/* Base histórica consolidada a partir do antigo <style> inline. */
  :root {
    --bg: #f6f7f9; --panel: #ffffff; --ink: #16202b; --muted: #667085;
    --line: #e4e7ec; --accent: #2563eb; --accent-ink: #ffffff;
    --verde: #16a34a; --amarelo: #d97706; --vermelho: #dc2626; --cinza: #98a2b3;
    --shadow: 0 1px 2px rgba(16,24,40,.06), 0 1px 3px rgba(16,24,40,.1);
  }
  @media (prefers-color-scheme: dark) {
    :root {
      --bg: #0f141a; --panel: #161d26; --ink: #e6edf3; --muted: #93a1b0;
      --line: #262f3a; --accent: #3b82f6; --shadow: none;
    }
  }
  * { box-sizing: border-box; }
  body {
    margin: 0; font: 15px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    background: var(--bg); color: var(--ink);
  }
  header {
    display: flex; align-items: center; gap: 12px; padding: 14px 20px;
    background: var(--panel); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 10;
  }
  header h1 { font-size: 17px; margin: 0; font-weight: 650; }
  header .sp { flex: 1; }
  button {
    font: inherit; cursor: pointer; border: 1px solid var(--line); background: var(--panel);
    color: var(--ink); padding: 7px 13px; border-radius: 8px;
  }
  button.primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
  button:hover { filter: brightness(1.03); }
  button.small { padding: 4px 9px; font-size: 13px; }
  main { padding: 20px; max-width: 1200px; margin: 0 auto; }

  .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; }
  .card {
    background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
    padding: 14px 16px; box-shadow: var(--shadow); cursor: pointer; transition: transform .06s;
  }
  .card:hover { transform: translateY(-1px); border-color: var(--accent); }
  .card .top { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
  .card .num { font-weight: 650; }
  .card .tit { color: var(--muted); font-size: 13.5px; margin: 2px 0 10px; }
  .badges { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
  .badge {
    font-size: 12px; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--line);
    color: var(--muted); white-space: nowrap;
  }
  .dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; flex: none; }
  .verde { background: var(--verde); } .amarelo { background: var(--amarelo); }
  .vermelho { background: var(--vermelho); } .cinza { background: var(--cinza); }
  .badge.verde, .badge.amarelo, .badge.vermelho { color: #fff; border: 0; }
  .badge.verde { background: var(--verde); } .badge.amarelo { background: var(--amarelo); }
  .badge.vermelho { background: var(--vermelho); }
  .bars { font-size: 12px; color: var(--muted); }
  .bar { height: 7px; background: var(--line); border-radius: 999px; overflow: hidden; margin: 3px 0 8px; }
  .bar > i { display: block; height: 100%; }
  .meta { font-size: 12.5px; color: var(--muted); display: flex; justify-content: space-between; }
  .warn { color: var(--vermelho); font-weight: 600; }

  /* Detalhe (painel deslizante) */
  .overlay { position: fixed; inset: 0; background: rgba(0,0,0,.35); display: none; z-index: 20; }
  .overlay.on { display: block; }
  .drawer {
    position: fixed; top: 0; right: 0; height: 100%; width: min(720px, 100%);
    background: var(--bg); border-left: 1px solid var(--line); z-index: 30;
    transform: translateX(100%); visibility: hidden;
    transition: transform .18s ease, visibility 0s linear .18s; overflow-y: auto;
  }
  .drawer.on { transform: translateX(0); visibility: visible; transition-delay: 0s; }
  .drawer .dh { display: flex; align-items: center; gap: 10px; padding: 16px 20px; border-bottom: 1px solid var(--line); position: sticky; top: 0; background: var(--panel); }
  .drawer .body { padding: 20px; }
  .sec { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; margin-bottom: 14px; }
  .sec h3 { margin: 0 0 10px; font-size: 14px; }
  .kv { display: grid; grid-template-columns: 160px 1fr; gap: 6px 12px; font-size: 13.5px; align-items: center; }
  .kv b { color: var(--muted); font-weight: 500; }
  .kv span { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
  summary.sumario { cursor: pointer; font-weight: 600; font-size: 13.5px; color: var(--ink); list-style: revert; user-select: none; }
  summary.sumario:hover { color: var(--accent); }
  details[open] summary.sumario { margin-bottom: 8px; }
  .lapis { border: 0; background: transparent; color: var(--muted); padding: 2px 5px; font-size: 12.5px; border-radius: 6px; cursor: pointer; line-height: 1; opacity: 0; transition: opacity .12s; }
  .kv span:hover .lapis, .row:hover > .lapis, li:hover > .lapis, .lapis:focus-visible { opacity: 1; }
  @media (hover: none) { .lapis { opacity: 1; } }
  .lapis:hover { color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); }
  input.inl,
  textarea.inl { font: inherit; font-size: 13px; padding: 4px 7px; border: 1px solid var(--line); border-radius: 6px; background: var(--panel); color: var(--ink); min-width: 130px; }
  textarea.inl { width: min(100%, 720px); min-height: 3.8em; resize: vertical; line-height: 1.4; }
  ul.clean { margin: 0; padding-left: 18px; font-size: 13.5px; }
  .alerta { padding: 8px 10px; border-radius: 8px; margin-bottom: 6px; font-size: 13px; border-left: 3px solid; }
  .alerta.critico { border-color: var(--vermelho); background: color-mix(in srgb, var(--vermelho) 8%, transparent); }
  .alerta.aviso { border-color: var(--amarelo); background: color-mix(in srgb, var(--amarelo) 8%, transparent); }
  .alerta.info { border-color: var(--cinza); background: color-mix(in srgb, var(--cinza) 10%, transparent); }

  .drop { border: 2px dashed var(--line); border-radius: 12px; padding: 22px; text-align: center; color: var(--muted); font-size: 13.5px; }
  .drop.hot { border-color: var(--accent); color: var(--accent); background: color-mix(in srgb, var(--accent) 6%, transparent); }
  body.windowDropActive::after {
    content: "Larga os documentos em qualquer ponto";
    position: fixed;
    inset: 12px;
    z-index: 1000;
    display: grid;
    place-items: center;
    border: 3px dashed var(--accent);
    border-radius: 18px;
    background: color-mix(in srgb, var(--panel) 86%, transparent);
    color: var(--accent);
    font-size: clamp(18px, 3vw, 30px);
    font-weight: 800;
    pointer-events: none;
    backdrop-filter: blur(3px);
  }
  .prog { height: 6px; background: var(--line); border-radius: 999px; overflow: hidden; margin-top: 8px; }
  .prog > i { display: block; height: 100%; background: var(--accent); width: 0; }

  textarea { width: 100%; min-height: 320px; font: 12.5px/1.5 ui-monospace, Menlo, monospace; border: 1px solid var(--line); border-radius: 8px; padding: 10px; background: var(--bg); color: var(--ink); }
  .escala { border: 1px solid var(--amarelo); border-radius: 10px; padding: 12px; margin-bottom: 10px; }
  .escala .exc { font-size: 12.5px; color: var(--muted); background: var(--bg); border-radius: 6px; padding: 6px 8px; margin: 6px 0; font-style: italic; }
  .escala input { font: inherit; width: 100%; padding: 6px 8px; border: 1px solid var(--line); border-radius: 6px; background: var(--panel); color: var(--ink); }
  .row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
  .muted { color: var(--muted); }
  .empty { text-align: center; color: var(--muted); padding: 60px 20px; }
  .toast { position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%); background: var(--ink); color: var(--bg); padding: 10px 16px; border-radius: 8px; font-size: 13.5px; z-index: 50; opacity: 0; transition: opacity .2s; }
  .toast.on { opacity: 1; }
  a { color: var(--accent); }

  .toolbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
  .fgrupo { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
  .fbtn { border: 0; border-right: 1px solid var(--line); border-radius: 0; background: var(--panel); color: var(--muted); padding: 6px 12px; font-size: 13px; }
  .fbtn:last-child { border-right: 0; }
  .fbtn.on { background: var(--accent); color: var(--accent-ink); }
  .flabel { font-size: 13px; color: var(--muted); display: inline-flex; align-items: center; gap: 6px; }
  .flabel select { font: inherit; font-size: 13px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); color: var(--ink); }
  /* Barra de faturação: cada segmento é um auto/fatura que já entrou. */
  .barfat { display: flex; gap: 2px; height: 9px; border-radius: 5px; overflow: hidden; background: var(--line); margin: 4px 0 2px; }
  .barfat i { display: block; background: var(--accent); min-width: 2px; }
  .barfat i.alt { background: color-mix(in srgb, var(--accent) 68%, var(--panel)); }
  .fsearch { font: inherit; font-size: 13px; padding: 6px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); color: var(--ink); min-width: 260px; flex: 0 1 320px; }
  .fsearch:focus { outline: none; border-color: var(--accent); }
  .fsep { flex: 1; }
  .fcount { font-size: 12.5px; color: var(--muted); }
  .card .tit { min-height: 2.6em; }
  .passo { font-size: 13px; padding: 7px 10px; border-radius: 8px; margin: 8px 0; background: color-mix(in srgb, var(--accent) 8%, transparent); border-left: 3px solid var(--accent); }
  .passo.atraso { background: color-mix(in srgb, var(--vermelho) 9%, transparent); border-left-color: var(--vermelho); }

  /* Email semanal: sinal de perigo da sexta-feira as 14h00. */
  #btnEmail .sinal { display: inline-block; margin-left: 6px; font-size: 11.5px; padding: 1px 6px; border-radius: 999px; background: var(--line); color: var(--muted); }
  #btnEmail.perigo, #btnEmail.atrasado {
    background: var(--vermelho); border-color: var(--vermelho); color: #fff; font-weight: 600;
  }
  #btnEmail.perigo .sinal, #btnEmail.atrasado .sinal { background: rgba(255,255,255,.25); color: #fff; }
  #btnEmail.perigo { animation: pulsar 1.6s ease-in-out infinite; }
  @keyframes pulsar {
    0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--vermelho) 60%, transparent); }
    50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--vermelho) 0%, transparent); }
  }
  @media (prefers-reduced-motion: reduce) { #btnEmail.perigo { animation: none; } }
  .avisoBar {
    display: none; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px;
    padding: 12px 16px; border-radius: 12px; border-left: 5px solid var(--vermelho);
    background: color-mix(in srgb, var(--vermelho) 10%, var(--panel)); font-size: 14px;
  }
  .avisoBar.on { display: flex; }
  .avisoBar .icone { font-size: 20px; line-height: 1; }
  .avisoBar b { font-weight: 650; }

  /* Painel do email semanal */
  .destin { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; margin-bottom: 14px; }
  .destin.critico { border-left: 4px solid var(--vermelho); }
  .destin.lacuna { border-left: 4px solid var(--amarelo); }
  .destin.saso { border-left: 4px solid var(--accent); }
  .destin h4 { margin: 0 0 2px; font-size: 14.5px; }
  .destin .obras { font-size: 13px; margin: 8px 0 0; padding-left: 18px; }
  .destin .obras li { margin-bottom: 4px; }
  .destin .obras .pend { color: var(--muted); }
  .destin .obras .bloq { color: var(--vermelho); font-weight: 600; }
  textarea.email { min-height: 260px; font: 13px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; white-space: pre-wrap; }
  .assunto { width: 100%; font: inherit; font-size: 13px; padding: 7px 9px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); color: var(--ink); margin-bottom: 8px; }

:root {
  color-scheme: light;
  --bg: #f7f8fa;
  --panel: #ffffff;
  --ink: #15202f;
  --muted: #66748a;
  --line: #e2e7ed;
  --accent: #246fe5;
  --accent-ink: #ffffff;
  --verde: #087443;
  --amarelo: #a85d00;
  --vermelho: #b4232d;
  --cinza: #8591a3;
  --navy: #101c2c;
  --subtle: #f4f6f8;
  --shadow: 0 1px 2px rgba(16, 28, 44, .05);
  --shadow-raised: 0 12px 34px rgba(24, 39, 58, .1);
}

body.theme-dark {
  color-scheme: dark;
  --bg: #111b29;
  --panel: #182433;
  --ink: #f2f5f8;
  --muted: #a7b3c3;
  --line: #2a3a4f;
  --accent: #4d8cf0;
  --accent-ink: #ffffff;
  --verde: #31b779;
  --amarelo: #e2a449;
  --vermelho: #ef6570;
  --cinza: #8290a3;
  --subtle: #131f2e;
  --shadow: none;
  --shadow-raised: 0 18px 50px rgba(0, 0, 0, .28);
}

html {
  background: var(--bg);
}

body {
  min-width: 320px;
  overflow-x: clip;
  background: var(--bg);
  color: var(--ink);
}

/* Só em monitores grandes, próximos de 2560 × 1440, aplica a escala de 125%.
   Portáteis e desktops intermédios conservam a escala nativa. */
@media (min-width: 2200px) and (min-height: 1100px) {
  body {
    zoom: 1.25;
  }
}

body.detailOpen {
  overflow: hidden;
}

.loginGate {
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 24px;
  background:
    radial-gradient(circle at 50% 0%, rgba(47, 116, 219, .13), transparent 38%),
    var(--bg);
}

.loginCard {
  width: min(100%, 430px);
  padding: 36px;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: var(--panel);
  box-shadow: var(--shadow-raised);
}

.loginMark {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  margin-bottom: 28px;
  border-radius: 14px;
  background: linear-gradient(145deg, #397fe8, #205dc0);
  color: white;
  font-weight: 800;
}

.loginCard h1 {
  margin: 6px 0 8px;
  font-size: clamp(28px, 7vw, 38px);
}

.loginCard > p {
  margin: 0 0 26px;
  color: var(--muted);
}

.loginForm {
  display: grid;
  gap: 10px;
}

.loginForm label {
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.loginForm .small {
  width: 100%;
  min-height: 48px;
  margin-top: 5px;
}

body.authLocked {
  overflow: hidden;
}

body.authLocked .appShell,
body.authLocked > .drawer,
body.authLocked > .overlay,
body.authLocked > .toast,
body.authLocked > .mobileScrim {
  display: none !important;
}

body:not(.authLocked) > .loginGate {
  display: none;
}

button,
input,
select,
textarea {
  font: inherit;
}

button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
a:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--accent) 25%, transparent);
  outline-offset: 2px;
}

.appShell {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 256px minmax(0, 1fr);
}

.appSidebar {
  width: 256px;
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 18;
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(circle at 15% 0%, rgba(74, 134, 210, .2), transparent 28%),
    var(--navy);
  color: #f4f7fb;
  border-right: 1px solid rgba(255, 255, 255, .06);
}

.brand {
  min-height: 84px;
  padding: 18px;
  display: flex;
  align-items: center;
  gap: 11px;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.brandMark {
  width: 39px;
  height: 39px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 11px;
  background: linear-gradient(145deg, #397fe8, #205dc0);
  color: white;
  font-weight: 750;
  letter-spacing: -.04em;
  box-shadow: inset 0 1px rgba(255, 255, 255, .2);
}

.brandText {
  min-width: 0;
}

.brandText b,
.brandText small {
  display: block;
}

.brandText b {
  font-size: 13.5px;
}

.brandText small {
  margin-top: 2px;
  color: #92a0b3;
  font-size: 10px;
}

.sideNav {
  flex: 1;
  padding: 20px 12px;
  overflow-y: auto;
}

.navLabel {
  display: block;
  padding: 0 12px 8px;
  color: #728198;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.navLabel.lower {
  margin-top: 24px;
}

.sideNav button {
  width: 100%;
  height: 42px;
  padding: 0 12px;
  display: flex;
  align-items: center;
  gap: 11px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: #aab5c5;
  font-size: 13px;
  text-align: left;
  cursor: pointer;
}

.sideNav button:hover,
.sideNav button.active {
  background: rgba(255, 255, 255, .07);
  color: white;
  filter: none;
}

.sideNav button.active {
  background: rgba(60, 128, 229, .2);
  box-shadow: inset 3px 0 #4d8cf0;
}

.sideNav button i {
  width: 18px;
  font-size: 16px;
  font-style: normal;
  text-align: center;
}

.sideNav button em {
  min-width: 22px;
  height: 20px;
  margin-left: auto;
  padding: 0 6px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: rgba(255, 255, 255, .1);
  color: #c4ceda;
  font-size: 10px;
  font-style: normal;
}

.sideFooter {
  width: calc(100% - 24px);
  min-height: 72px;
  margin: 0 12px;
  padding: 14px 8px;
  display: flex;
  align-items: center;
  gap: 10px;
  border: 0;
  border-top: 1px solid rgba(255, 255, 255, .08);
  border-radius: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition: background .15s ease;
}

.sideFooter:hover,
.sideFooter:focus-visible {
  background: rgba(255, 255, 255, .055);
  outline: none;
}

.sideFooter .avatar {
  width: 34px;
  height: 34px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #324761;
  color: white;
  font-size: 11px;
  font-weight: 700;
}

.sideFooter b,
.sideFooter small {
  display: block;
}

.sideFooter b {
  color: #edf2f8;
  font-size: 11.5px;
}

.sideFooter small {
  margin-top: 1px;
  color: #8190a4;
  font-size: 9.5px;
}

.sideFooter > span:nth-child(2) {
  min-width: 0;
  flex: 1;
}

.sideFooter > i {
  color: #8190a4;
  font-size: 18px;
  font-style: normal;
}

.workspace {
  min-width: 0;
  grid-column: 2;
}

.topbar {
  height: 68px;
  padding: 0 32px;
  position: sticky;
  top: 0;
  z-index: 14;
  display: flex;
  align-items: center;
  gap: 9px;
  background: color-mix(in srgb, var(--panel) 93%, transparent);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(12px);
}

.globalSearch {
  width: min(470px, 47vw);
  height: 40px;
  padding: 0 12px;
  display: flex;
  align-items: center;
  gap: 9px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--subtle);
  color: var(--muted);
}

.globalSearch:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 10%, transparent);
}

.globalSearch input {
  min-width: 0;
  flex: 1;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--ink);
  font-size: 12px;
}

.globalSearch input::placeholder {
  color: var(--muted);
}

.globalSearch kbd {
  padding: 2px 6px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: var(--panel);
  color: var(--muted);
  font-size: 9px;
}

.topSpacer {
  flex: 1;
}

button {
  transition: background .15s ease, border-color .15s ease, color .15s ease, transform .15s ease, box-shadow .15s ease;
}

button.small {
  min-height: 36px;
  padding: 0 11px;
  border-radius: 9px;
  font-size: 11px;
  font-weight: 600;
}

button.primary {
  background: linear-gradient(#2c74df, #1c62cb);
  border-color: #175cd3;
  box-shadow: 0 1px 2px rgba(23, 92, 211, .25);
}

#btnEmail .sinal {
  vertical-align: middle;
}

.emailIcon {
  display: none;
}

#dashboardView {
  max-width: 1460px;
  margin: 0 auto;
  padding: 34px 42px 70px;
}

.pageHeading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
}

.pageHeading h1 {
  margin: 0;
  color: var(--ink);
  font-size: clamp(25px, 2.2vw, 32px);
  letter-spacing: -.035em;
  line-height: 1.15;
}

.pageHeading p {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 12.5px;
}

.eyebrow {
  display: block;
  margin-bottom: 5px;
  color: var(--muted);
  font-size: 9.5px;
  font-weight: 720;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.headingActions {
  flex: none;
  display: flex;
  gap: 8px;
}

.avisoBar {
  margin-top: 20px;
}

/* Três cartões, não quatro: críticas + a vigiar + em dia particionam o
   portefólio. O total explícito ao lado deixa a soma verificável de relance. */
.summaryGrid {
  position: relative;
  margin-top: 28px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.summaryTotal {
  position: absolute;
  top: -19px;
  right: 2px;
  color: var(--muted);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: .02em;
}

/* Atalhos: tudo o que não conta empreitadas. Cada um diz a sua unidade. */
.atalhosBar {
  margin-top: 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.atalhoChip {
  padding: 7px 12px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel);
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}

.atalhoChip:hover { border-color: var(--accent, #3448b5); }
.atalhoChip b { font-size: 11px; font-weight: 680; }
.atalhoChip small { color: var(--muted); font-size: 9px; }

.escondido { display: none !important; }

/* Pesquisa focada: a barra superior permanece visível e a lista filtrada sobe
   imediatamente para baixo dela. Os resumos e controlos intermédios regressam
   assim que o campo de pesquisa fica vazio. */
body.searchMode #dashboardView {
  padding-top: 16px;
}

body.searchMode .pageHeading,
body.searchMode #avisoEmail,
body.searchMode .summaryGrid,
body.searchMode #atalhosBar,
body.searchMode #prioritySection,
body.searchMode #uploadSection,
body.searchMode .contractsHeading,
body.searchMode #toolbar {
  display: none !important;
}

body.searchMode #contractsSection {
  margin-top: 0;
}

/* Cabeçalho da lista reduzido ao contador: o título da vista já diz o resto. */
.contractsHeading.soContador { justify-content: flex-end; margin-bottom: 8px; }

/* Agrupado por tipo de próxima ação, cada ação é um quadro fechado sobre si
   próprio: título por cima, tabela por baixo, e ar a separar do quadro
   seguinte. O cabeçalho de colunas único deixa de fazer sentido (são várias
   tabelas), por isso esconde-se. */
.listHeader[hidden] { display: none; }

.contractsList.agrupado {
  display: grid;
  gap: 26px;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.grupoBloco {
  min-width: 0;
  display: block;
}

/* Cabeçalho de grupo: o título da ação, clicável para abrir e fechar. */
.grupoCab {
  width: 100%;
  margin: 0 0 9px;
  padding: 0 2px 8px;
  display: flex;
  align-items: baseline;
  gap: 9px;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: none;
  text-align: left;
  cursor: pointer;
}

.grupoCab:hover b,
.grupoCab:hover .grupoSeta { color: var(--accent); }

.grupoCab b {
  flex: 1;
  min-width: 0;
  color: var(--ink);
  font-size: 13.5px;
  font-weight: 750;
  letter-spacing: -.01em;
}

.grupoCab .grupoContagem {
  flex: none;
  color: var(--muted);
  font-size: 9.5px;
  font-weight: 600;
}

.grupoCab .grupoSeta {
  flex: none;
  color: var(--muted);
  font-size: 10px;
  line-height: 1;
  transition: transform .15s ease;
}

.grupoBloco.fechado .grupoCab { margin-bottom: 0; }
.grupoBloco.fechado .grupoSeta { transform: rotate(-90deg); }

.grupoLista {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: var(--panel);
  box-shadow: var(--shadow);
}

.grupoLista[hidden] { display: none; }

/* A última linha de cada quadro não precisa de risco: o bordo já fecha. */
.grupoLista .card:last-child { border-bottom: 0; }

/* Ações em linha: a lista dizia o que fazer e não deixava fazer nada.
   Três lugares de largura fixa, e não um fluxo livre: "Registar auto" e
   "Registar consignação" têm larguras diferentes e os botões desalinhavam-se
   de linha para linha. Cada lugar é sempre ocupado, nem que seja por um vazio. */
.rowActions {
  display: grid;
  grid-template-columns: 152px 52px 30px;
  align-items: center;
  justify-content: end;
  gap: 6px;
}

.rowActionVazia { display: block; }

.rowAction {
  min-width: 0;
  padding: 5px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  color: var(--ink);
  font-size: 10px;
  font-weight: 650;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
}

.rowAction:hover { border-color: var(--accent, #3448b5); }

.rowAction.primary {
  border-color: transparent;
  background: var(--accent, #3448b5);
  color: #fff;
}

.rowAction.ghost {
  padding: 5px 8px;
  border-color: transparent;
  background: none;
  color: var(--muted);
  font-size: 12px;
}

/* Painel de formulário, no lugar dos prompt() do browser. Largo o suficiente
   para caber um assunto de email sem o cortar e o corpo sem o espremer. */
.formDrawer { width: min(680px, 100vw); }

.formPanel {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.formDescricao { margin: 0; font-size: 11.5px; }

.formRow {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.formRow > label {
  color: var(--muted);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.formRow input,
.formRow select,
.formRow textarea {
  width: 100%;
  min-height: 38px;
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--panel);
  color: var(--ink);
  font: inherit;
  font-size: 12px;
}

.formRow textarea { min-height: 76px; resize: vertical; }

.formRow input:focus-visible,
.formRow select:focus-visible,
.formRow textarea:focus-visible {
  outline: 2px solid var(--accent, #3448b5);
  outline-offset: 1px;
}

.formRow.temErro input,
.formRow.temErro select,
.formRow.temErro textarea { border-color: var(--vermelho); }

.formAjuda { color: var(--muted); font-size: 9.5px; }

.formErro:empty { display: none; }
.formErro { color: var(--vermelho); font-size: 9.5px; font-weight: 600; }

.formErroGeral:empty { display: none; }
.formErroGeral {
  margin: 0;
  padding: 9px 11px;
  border-radius: 9px;
  background: color-mix(in srgb, var(--vermelho) 10%, var(--panel));
  color: var(--vermelho);
  font-size: 11px;
  font-weight: 600;
}

.formAcoes {
  margin-top: 4px;
  display: flex;
  gap: 8px;
}

button.perigo {
  border-color: transparent;
  background: var(--vermelho);
  color: #fff;
}

.escolhaLista {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.escolhaItem {
  padding: 12px 13px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel);
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}

.escolhaItem:hover { border-color: var(--accent, #3448b5); }
.escolhaItem b { font-size: 12px; font-weight: 680; }
.escolhaItem small { color: var(--muted); font-size: 10px; }

.summaryCard {
  min-height: 108px;
  padding: 17px;
  display: flex;
  align-items: center;
  gap: 13px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: var(--panel);
  color: var(--ink);
  box-shadow: var(--shadow);
  text-align: left;
  cursor: pointer;
}

.summaryCard:hover,
.summaryCard.on {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
  box-shadow: var(--shadow-raised);
  filter: none;
}

.summaryCard > span:nth-child(2) {
  min-width: 0;
}

.summaryCard small,
.summaryCard b,
.summaryCard em {
  display: block;
}

.summaryCard small {
  color: var(--muted);
  font-size: 10.5px;
}

.summaryCard b {
  margin-top: 1px;
  color: var(--ink);
  font-size: 25px;
  letter-spacing: -.04em;
}

.summaryCard em {
  color: var(--muted);
  font-size: 9.5px;
  font-style: normal;
}

.summaryCard > i {
  margin-left: auto;
  color: var(--cinza);
  font-style: normal;
}

.summaryIcon {
  width: 38px;
  height: 38px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 10px;
  font-weight: 750;
}

.summaryIcon.critical {
  background: #fdecee;
  color: #b4232d;
}

.summaryIcon.blue {
  background: #eaf2ff;
  color: #175cd3;
}

.summaryIcon.amber {
  background: #fff2da;
  color: #a85d00;
}

.summaryIcon.green {
  background: #e6f6ee;
  color: #087443;
}

.theme-dark .summaryIcon.critical { background: rgba(239, 101, 112, .14); color: #ff8d96; }
.theme-dark .summaryIcon.blue { background: rgba(77, 140, 240, .14); color: #81b0f7; }
.theme-dark .summaryIcon.amber { background: rgba(226, 164, 73, .14); color: #f0bd70; }
.theme-dark .summaryIcon.green { background: rgba(49, 183, 121, .14); color: #71d5a7; }

.prioritySection,
.uploadSection,
.contractsSection {
  margin-top: 30px;
}

.contractsSection {
  container-name: contracts;
  container-type: inline-size;
}

.sectionHeading {
  margin-bottom: 13px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
}

.sectionHeading h2 {
  margin: 0;
  color: var(--ink);
  font-size: 15px;
  letter-spacing: -.02em;
}

.sectionHint {
  color: var(--muted);
  font-size: 9.5px;
}

.textButton,
.clearFilters {
  padding: 4px 0;
  border: 0;
  background: transparent;
  color: var(--accent);
  font-size: 10.5px;
  cursor: pointer;
}

.priorityList,
.toolbar,
.listHeader,
.contractsList,
.uploadSection .drop,
.sec {
  border-color: var(--line);
  background: var(--panel);
  box-shadow: var(--shadow);
}

.priorityList {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 13px;
}

.priorityItem {
  width: 100%;
  min-height: 73px;
  padding: 12px 17px;
  display: grid;
  grid-template-columns: 47px minmax(0, 1fr) auto 20px;
  align-items: center;
  gap: 13px;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}

.priorityItem:last-child {
  border-bottom: 0;
}

.priorityItem:hover {
  background: var(--subtle);
  filter: none;
}

/* O vermelho era o fundo por omissão: qualquer linha da lista de prioridade
   nascia com ar de prazo estourado, mesmo estando dentro do prazo. Passa a
   ser preciso pedi-lo. */
.priorityAge {
  width: 43px;
  height: 43px;
  display: grid;
  place-content: center;
  border-radius: 9px;
  background: var(--subtle);
  color: var(--muted);
  text-align: center;
}

.priorityAge.atraso {
  background: #fdecee;
  color: #b4232d;
}

.priorityAge.aviso {
  background: #fff2da;
  color: #a85d00;
}

.priorityAge b,
.priorityAge small,
.priorityCopy b,
.priorityCopy small {
  display: block;
}

.priorityAge b {
  font-size: 12px;
  line-height: 1;
}

.priorityAge small {
  margin-top: 2px;
  font-size: 8px;
}

.priorityCopy b {
  font-size: 11.5px;
}

.priorityCopy small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 10px;
}

.priorityItem > em {
  color: var(--cinza);
  font-style: normal;
}

.statusPill,
.phasePill,
.rolePill {
  min-height: 23px;
  padding: 2px 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--subtle);
  color: var(--muted);
  font-size: 9px;
  font-weight: 680;
  white-space: nowrap;
}

.statusPill.critico {
  background: #fdecee;
  color: #b4232d;
}

.statusPill.aviso {
  background: #fff2da;
  color: #a85d00;
}

.statusPill.ok {
  background: #e6f6ee;
  color: #087443;
}

.theme-dark .statusPill.critico { background: rgba(239, 101, 112, .14); color: #ff8d96; }
.theme-dark .statusPill.aviso { background: rgba(226, 164, 73, .14); color: #f0bd70; }
.theme-dark .statusPill.ok { background: rgba(49, 183, 121, .14); color: #71d5a7; }

/* Aumentos de prazo e de valor: têm de saltar à vista de quem olha para a
   ficha, sem obrigar a abrir o separador "Alterações". */
.deltaPill {
  min-height: 23px;
  padding: 2px 8px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border-radius: 999px;
  font-size: 9px;
  font-weight: 700;
  white-space: nowrap;
}

.deltaPill.prazo {
  background: #eef1fd;
  color: #3448b5;
}

.deltaPill.valor {
  background: #fff2da;
  color: #a85d00;
}

.deltaPill.valorMenos {
  background: #e6f6ee;
  color: #087443;
}

.theme-dark .deltaPill.prazo { background: rgba(88, 116, 235, .16); color: #9db0ff; }
.theme-dark .deltaPill.valor { background: rgba(226, 164, 73, .16); color: #f0bd70; }
.theme-dark .deltaPill.valorMenos { background: rgba(49, 183, 121, .16); color: #71d5a7; }

.deltaNota {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 9px;
  font-weight: 560;
  letter-spacing: 0;
  text-transform: none;
}

.uploadSection .drop {
  min-height: 108px;
  padding: 24px;
  display: grid;
  place-content: center;
  border-width: 1px;
  background:
    linear-gradient(var(--panel), var(--panel)) padding-box,
    repeating-linear-gradient(90deg, var(--line) 0 8px, transparent 8px 14px) border-box;
  color: var(--muted);
  cursor: pointer;
}

.uploadSection .drop:hover {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 4%, var(--panel));
}

.uploadSection .drop b,
.uploadSection .drop span {
  display: block;
  text-align: center;
}

.uploadSection .drop b {
  color: var(--ink);
  font-size: 12px;
}

.uploadSection .drop span {
  margin-top: 3px;
  font-size: 10px;
}

.naDocuments {
  display: grid;
  gap: 8px;
  max-width: 680px;
}

.naDocumentRow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: color-mix(in srgb, var(--panel) 92%, var(--bg));
}

.naDocumentRow .naActive {
  border-color: color-mix(in srgb, var(--verde) 42%, var(--line));
  color: var(--verde);
}

.contractsHeading {
  margin-bottom: 11px;
}

.toolbar {
  min-height: 54px;
  margin-bottom: 10px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 12px;
  gap: 9px;
}

.toolbar[hidden] {
  display: none;
}

.toolbar #btnAgrupar,
.toolbar #btnColapsarGrupos,
.toolbar .clearFilters {
  min-height: 32px;
  padding: 0 11px;
  border: 1px solid var(--line) !important;
  border-radius: 7px;
  background: var(--panel);
  color: var(--ink);
  box-shadow: 0 1px 2px rgba(21, 32, 47, .08);
  font-size: 10px;
  font-weight: 650;
  white-space: nowrap;
}

.toolbar #btnAgrupar:hover,
.toolbar #btnColapsarGrupos:hover,
.toolbar .clearFilters:hover {
  border-color: var(--accent) !important;
  color: var(--accent);
}

.toolbar #btnAgrupar.on {
  border-color: var(--accent) !important;
  background: color-mix(in srgb, var(--accent) 10%, var(--panel));
  color: var(--accent);
}

.toolbar .clearFilters {
  color: var(--muted);
}

.groupLabelMobile {
  display: none;
}

.fgrupo {
  padding: 3px;
  border: 0;
  border-radius: 8px;
  background: var(--subtle);
}

.fbtn {
  min-height: 29px;
  padding: 0 10px;
  border: 0 !important;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  font-size: 10px;
}

.fbtn.on {
  background: var(--panel);
  color: var(--ink);
  box-shadow: 0 1px 4px rgba(21, 32, 47, .12);
}

.flabel {
  font-size: 9.5px;
}

.selectField {
  min-width: 0;
  position: relative;
  display: inline-block;
}

.selectField::after {
  width: 7px;
  height: 7px;
  position: absolute;
  top: 50%;
  right: 12px;
  border-right: 1.7px solid var(--muted);
  border-bottom: 1.7px solid var(--muted);
  content: "";
  pointer-events: none;
  transform: translateY(-68%) rotate(45deg);
}

.flabel select {
  min-height: 32px;
  padding: 0 28px 0 9px;
  border-radius: 7px;
  font-size: 10px;
}

.toolbar .selectField select {
  -webkit-appearance: none;
  appearance: none;
}

.listHeader {
  min-height: 38px;
  padding: 0 14px;
  display: grid;
  grid-template-columns: minmax(230px, 2fr) minmax(76px, .6fr) minmax(112px, .85fr) minmax(104px, .95fr) minmax(190px, 1.4fr) 246px;
  align-items: center;
  gap: 14px;
  border: 1px solid var(--line);
  border-bottom: 0;
  border-radius: 13px 13px 0 0;
  background: var(--subtle);
  color: var(--muted);
  font-size: 8.5px;
  font-weight: 720;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.contractsList {
  overflow: hidden;
  display: block;
  border: 1px solid var(--line);
  border-radius: 0 0 13px 13px;
}

.contractsList .card {
  width: 100%;
  min-height: 82px;
  padding: 11px 14px;
  display: grid;
  grid-template-columns: minmax(230px, 2fr) minmax(76px, .6fr) minmax(112px, .85fr) minmax(104px, .95fr) minmax(190px, 1.4fr) 246px;
  align-items: center;
  gap: 14px;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: var(--panel);
  color: var(--ink);
  box-shadow: none;
  text-align: left;
  cursor: pointer;
  transform: none;
}

.contractsList .card:last-child {
  border-bottom: 0;
}

.contractsList .card:hover {
  background: var(--subtle);
  border-color: var(--line);
  filter: none;
  transform: none;
}

.contractIdentity {
  min-width: 0;
}

.contractIdentity .top {
  margin: 0 0 2px;
}

.contractIdentity .num {
  font-size: 11px;
}

.contractIdentity .tit {
  min-height: 0;
  margin: 0;
  overflow: hidden;
  color: var(--ink);
  font-size: 10.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.contractIdentity .submeta {
  margin-top: 4px;
  color: var(--muted);
  font-size: 8.8px;
}

.contractStatus small,
.contractAction small {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 8.8px;
}

/* Os dias de atraso ficam sempre à mesma altura e na mesma linha. Antes, a
   coluna era estreita ao ponto de "487 dias em atraso" partir em duas, e como
   as células estão centradas verticalmente cada linha punha a data a uma
   altura diferente — o que se lia como desalinhamento. */
.contractStatus {
  align-self: center;
}

.contractStatus small.warn {
  white-space: nowrap;
}

.contractStatus small.warn {
  color: var(--vermelho);
}

.contractProgress .progressLabel {
  margin-bottom: 5px;
  display: flex;
  justify-content: space-between;
  color: var(--muted);
  font-size: 8.5px;
}

.contractProgress .bar {
  height: 5px;
  margin: 0;
}

.contractAction b {
  display: block;
  font-size: 10px;
  line-height: 1.4;
}

.contractArrow {
  width: 29px;
  height: 29px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  color: var(--muted);
}

.drawer {
  background: var(--bg);
}

.detailDrawer {
  width: calc(100vw - 256px);
  max-width: none;
  overflow-x: clip;
}

.detailDrawer .dh {
  min-height: 64px;
  padding: 0 34px;
  gap: 16px;
  z-index: 5;
  background: color-mix(in srgb, var(--panel) 95%, transparent);
  backdrop-filter: blur(12px);
}

.detailDrawer .dh b {
  color: var(--muted);
  font: 10px ui-monospace, SFMono-Regular, Menlo, monospace;
}

.backDetail {
  min-height: 34px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--accent);
  font-size: 11px;
  font-weight: 620;
  cursor: pointer;
}

.detailDrawer .body {
  max-width: 1280px;
  margin: 0 auto;
  padding: 26px 38px 70px;
}

.detailHero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
}

.detailHero > div:first-child,
.detailSections,
.detailRail,
.detailContent > * {
  min-width: 0;
}

.detailHeroMeta {
  margin-bottom: 9px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.detailHeroMeta > span:first-child {
  margin-right: 2px;
  color: var(--muted);
  font: 10px ui-monospace, SFMono-Regular, Menlo, monospace;
}

.detailHero h1 {
  margin: 0;
  color: var(--ink);
  font-size: clamp(23px, 2.2vw, 31px);
  letter-spacing: -.035em;
  line-height: 1.18;
  overflow-wrap: anywhere;
}

.detailHero p {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 11px;
}

.detailHeroActions {
  flex: none;
  display: flex;
  gap: 8px;
}

.detailTabs {
  margin: 25px 0 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  position: sticky;
  top: 64px;
  z-index: 4;
  overflow: visible;
  border-bottom: 1px solid var(--line);
  background: var(--bg);
  touch-action: pan-y;
}

.detailTabs button {
  height: 43px;
  flex: none;
  padding: 0 12px;
  position: relative;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 590;
  cursor: pointer;
}

.detailTabs button.on {
  color: var(--accent);
}

.detailTabs button.on::after {
  content: "";
  height: 2px;
  position: absolute;
  right: 8px;
  bottom: -1px;
  left: 8px;
  border-radius: 2px;
  background: var(--accent);
}

.detailTabs .tabCount {
  min-width: 17px;
  height: 17px;
  margin-left: 5px;
  padding: 0 5px;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  background: #fff2da;
  color: #a85d00;
  font-size: 8px;
}

.detailContent {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 310px;
  gap: 16px;
  align-items: start;
}

/* Separadores sem nada na faixa lateral usam a largura toda. Ver
   `ativarTabDetalhe`: a coluna fixa ficava reservada e vazia, e o conteúdo
   perdia 28% da largura por nada. */
.detailContent.semRail {
  grid-template-columns: minmax(0, 1fr);
}

.detailContent.semRail .detailRail { display: none; }

.detailSections,
.detailRail {
  display: grid;
  gap: 14px;
}

.detailDrawer .sec {
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
}

.readonlyNotice {
  margin: 0 0 12px;
  padding: 10px 12px;
  border: 1px solid #c9d7ea;
  border-radius: 10px;
  background: #f4f8fd;
  color: #40536f;
  line-height: 1.45;
}

.handoverState {
  padding-top: 8px;
  border-top: 1px solid var(--line);
}

.handoverActions {
  margin-top: 12px;
}

.detailReadOnly input:disabled,
.detailReadOnly select:disabled,
.detailReadOnly textarea:disabled {
  color: var(--ink);
  opacity: 1;
  -webkit-text-fill-color: var(--ink);
}

.detailSections > .sec,
.detailRail > .sec {
  margin: 0;
}

.detailSections > .sec[hidden],
.detailRail > .sec[hidden] {
  display: none !important;
}

.detailRail .sec {
  padding: 17px;
}

.detailRail .nextPanel {
  border: 0;
  background: linear-gradient(145deg, #17263a, #213751);
  color: white;
  box-shadow: var(--shadow-raised);
}

.detailRail .nextPanel h3,
.detailRail .nextPanel .passo {
  color: white;
}

.detailRail .nextPanel .passo {
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
}

.detailRail .nextPanel .muted {
  color: #9eacc0;
}

.sec {
  padding: 18px 19px;
  border-radius: 13px;
}

.sec h3 {
  margin-bottom: 14px;
  color: var(--ink);
  font-size: 14px;
}

.matrixMonths {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(155px, 100%), 1fr));
  gap: 8px;
}

.matrixMonth {
  position: relative;
  min-width: 0;
  min-height: 76px;
  border: 1px solid var(--line);
  border-top: 3px solid var(--cinza);
  border-radius: 9px;
  background: var(--subtle);
}

/* O cartão inteiro é o alvo de clique quando há documento; o lápis fica por
   cima, para corrigir o valor sem abrir o ficheiro. */
.matrixMonthOpen {
  width: 100%;
  min-width: 0;
  min-height: 76px;
  padding: 10px 30px 10px 11px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  border: 0;
  border-radius: 8px;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: default;
}

.matrixMonth.temDoc .matrixMonthOpen { cursor: pointer; }

.matrixMonth.temDoc:hover,
.matrixMonth:focus-within {
  border-color: var(--accent, #3448b5);
}

.matrixMonthOpen:focus-visible {
  outline: 2px solid var(--accent, #3448b5);
  outline-offset: 1px;
}

.matrixMonthClip { font-size: 8.5px; }

.matrixMonthEdit {
  position: absolute;
  top: 6px;
  right: 5px;
  opacity: 0;
  transition: opacity .12s ease;
}

.matrixMonth:hover .matrixMonthEdit,
.matrixMonth:focus-within .matrixMonthEdit { opacity: 1; }

@media (hover: none) {
  .matrixMonthEdit { opacity: 1; }
}

.matrixMonth.manual { border-style: dashed; }

.matrixMonthManual {
  margin-left: 3px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--subtle);
  color: var(--muted);
  font-size: 8px;
  font-weight: 700;
}

.matrixMonthDate {
  color: var(--muted);
  font: 9.5px ui-monospace, SFMono-Regular, Menlo, monospace;
}

.matrixMonthState {
  color: var(--ink);
  font-size: 11px;
  font-weight: 650;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.matrixMonthValue {
  margin-top: auto;
  color: var(--muted);
  font-size: 10px;
  font-weight: 600;
}

.matrixMonthInvoice {
  margin-top: 2px;
  color: var(--muted);
  font-size: 8.5px;
  line-height: 1.25;
}

.financeSubheading {
  margin: 18px 0 8px;
  font-size: 12.5px;
}

.financeRule {
  margin: -5px 0 14px;
  max-width: 850px;
}

.financeRecord {
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.financeRecordActions {
  display: inline-flex;
  flex: 0 0 auto;
}

.financeRecord > span:first-child {
  min-width: 0;
  overflow-wrap: anywhere;
}

.financeBreakdown {
  display: block;
  margin-top: 3px;
}

.financeRecord .lapis {
  opacity: 1;
}

.financeAddActions {
  margin-top: 14px;
}

.matrixMonth.ok {
  border-top-color: var(--verde);
  background: color-mix(in srgb, var(--verde) 7%, var(--panel));
}

.matrixMonth.ok .matrixMonthState {
  color: var(--verde);
}

.matrixMonth.critico {
  border-top-color: var(--vermelho);
  background: color-mix(in srgb, var(--vermelho) 6%, var(--panel));
}

.matrixMonth.critico .matrixMonthState {
  color: var(--vermelho);
}

.matrixMonth.aviso,
.matrixMonth.pendente {
  border-top-color: var(--amarelo);
  background: color-mix(in srgb, var(--amarelo) 7%, var(--panel));
}

.matrixMonth.aviso .matrixMonthState,
.matrixMonth.pendente .matrixMonthState {
  color: var(--amarelo);
}

.matrixMonth.indeterminado {
  border-top-color: var(--cinza);
}

.kv {
  grid-template-columns: repeat(4, minmax(120px, 1fr));
  gap: 16px 22px;
  align-items: start;
}

.kv b {
  font-size: 9px;
}

.kv span {
  align-content: flex-start;
  min-width: 0;
  font-size: 11px;
  font-weight: 560;
}

.lapis {
  opacity: 0;
}

.reanalyzeButton .reanalyzeIcon {
  display: inline-block;
  transform-origin: center;
}

.reanalyzeButton.isRunning {
  opacity: 1;
  color: var(--accent);
  cursor: progress;
}

.reanalyzeButton.isRunning .reanalyzeIcon {
  animation: reanalyze-spin .8s linear infinite;
}

@keyframes reanalyze-spin {
  to {
    transform: rotate(360deg);
  }
}

.kv span:hover .lapis,
.row:hover > .lapis,
li:hover > .lapis,
.lapis:hover,
.lapis:focus-visible {
  opacity: 1;
}

@media (hover: none) {
  .lapis {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .reanalyzeButton.isRunning .reanalyzeIcon {
    animation: none;
  }
}

.detailDrawer select,
.detailDrawer input.inl {
  min-height: 33px;
  border-color: var(--line);
  background: var(--panel);
  color: var(--ink);
}

.alerta {
  padding: 10px 12px;
  border-radius: 9px;
  line-height: 1.5;
}

.detailDrawer .drop {
  background: var(--subtle);
}

.ccpOverview {
  margin-bottom: 14px;
  padding: 17px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--subtle);
}

.ccpOverview h3 {
  margin: 0 0 5px;
}

.ccpOverview p {
  max-width: 650px;
  margin: 0;
  color: var(--muted);
  font-size: 10px;
}

.ccpStats {
  flex: none;
  display: flex;
  gap: 18px;
}

.ccpStats span {
  /* Sem largura máxima fixa: os 92px chegavam para "3 acionáveis" mas
     partiam uma data ("2026-03-31") ou um valor a meio, para a linha de
     baixo. Cada bloco dimensiona-se pelo seu conteúdo. */
  color: var(--muted);
  font-size: 8px;
  line-height: 1.35;
  white-space: nowrap;
}

.ccpStats b {
  display: block;
  color: var(--ink);
  font-size: 19px;
  white-space: nowrap;
}

/* A nota do valor é a única linha longa destes blocos e pode quebrar. */
.ccpStats .deltaNota {
  max-width: 200px;
  white-space: normal;
}

.ccpFinding {
  margin-top: 12px;
  padding: 16px;
  border: 1px solid var(--line);
  border-left-width: 4px;
  border-radius: 11px;
  background: var(--panel);
}

.ccpFinding.critico {
  border-left-color: var(--vermelho);
}

.ccpFinding.aviso {
  border-left-color: var(--amarelo);
}

.ccpFinding.info {
  border-left-color: var(--cinza);
}

.ccpFindingTop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.ccpRuleId {
  color: var(--muted);
  font: 9px ui-monospace, SFMono-Regular, Menlo, monospace;
}

.ccpFinding h4 {
  margin: 13px 0 5px;
  color: var(--ink);
  font-size: 14px;
}

.ccpFinding > p {
  margin: 0;
  color: var(--muted);
  font-size: 10.5px;
  line-height: 1.6;
}

.ccpLegal {
  margin-top: 13px;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--vermelho) 32%, var(--line));
  border-radius: 9px;
  background: color-mix(in srgb, var(--vermelho) 6%, var(--panel));
}

.ccpFinding.aviso .ccpLegal,
.ccpFinding.info .ccpLegal {
  border-color: color-mix(in srgb, var(--amarelo) 32%, var(--line));
  background: color-mix(in srgb, var(--amarelo) 6%, var(--panel));
}

.ccpLegal b {
  display: block;
  margin-bottom: 4px;
  color: var(--ink);
  font-size: 9px;
  text-transform: uppercase;
}

.ccpLegal a {
  color: var(--vermelho);
  font-size: 10px;
  font-weight: 680;
}

.ccpFinding.aviso .ccpLegal a,
.ccpFinding.info .ccpLegal a {
  color: var(--amarelo);
}

.ccpEvidence {
  margin-top: 12px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.ccpEvidence > div {
  padding: 11px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--subtle);
}

.ccpEvidence b {
  display: block;
  margin-bottom: 5px;
  color: var(--muted);
  font-size: 8px;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.ccpEvidence p,
.ccpEvidence ul {
  margin: 0;
  padding-left: 16px;
  color: var(--ink);
  font-size: 9.5px;
  line-height: 1.5;
}

.ccpEvidence p {
  padding: 0;
}

.ccpAction {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  color: var(--ink);
  font-size: 10px;
}

.ccpAction b {
  color: var(--muted);
}

.ccpFootnote {
  margin: 14px 0 0;
  color: var(--muted);
  font-size: 9px;
  line-height: 1.55;
}

.drawer:not(.detailDrawer) {
  width: min(760px, 100%);
  background: var(--bg);
}

.drawer:not(.detailDrawer) .dh {
  z-index: 2;
}

.drawer:not(.detailDrawer) .body {
  padding: 20px;
}

.auditRoleBar {
  display: flex;
  min-height: 66px;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 14px;
  padding: 11px 13px 11px 16px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: var(--panel);
  box-shadow: var(--shadow);
}

.auditRoleText {
  min-width: 0;
}

.auditRoleText b,
.auditRoleText small {
  display: block;
}

.auditRoleText b {
  margin-bottom: 3px;
  color: var(--ink);
  font-size: 11px;
}

.auditRoleText small {
  color: var(--muted);
  font-size: 9.5px;
  line-height: 1.4;
}

.auditRoleSwitch {
  position: relative;
  width: 196px;
  flex: 0 0 196px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding: 3px;
  border-radius: 9px;
  background: var(--subtle);
}

.auditRoleThumb {
  position: absolute;
  top: 3px;
  bottom: 3px;
  left: 3px;
  width: calc((100% - 6px) / 2);
  border: 1px solid color-mix(in srgb, var(--line) 75%, transparent);
  border-radius: 7px;
  background: var(--panel);
  box-shadow: 0 1px 4px rgba(21, 32, 47, .12);
  transition: transform .18s ease;
}

.auditRoleSwitch.isSuplente .auditRoleThumb {
  transform: translateX(100%);
}

.auditRoleOption {
  position: relative;
  z-index: 1;
  min-height: 32px;
  padding: 0 10px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--muted);
  font-size: 10px;
  font-weight: 650;
  cursor: pointer;
}

.auditRoleOption:hover {
  filter: none;
  color: var(--ink);
}

.auditRoleOption.on {
  color: var(--accent);
}

.auditLoading {
  padding: 10px 4px;
}

.overlay {
  background: rgba(8, 16, 26, .48);
  backdrop-filter: blur(2px);
}

.accessDrawer {
  max-width: 540px;
}

.accessKeyCard {
  display: grid;
  gap: 22px;
  padding: 26px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--panel);
  box-shadow: var(--shadow);
}

.accessKeyIcon {
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  border-radius: 14px;
  background: color-mix(in srgb, var(--accent) 12%, var(--panel));
  color: var(--accent);
  font-size: 25px;
  font-weight: 800;
}

.accessKeyCard h2 {
  margin: 5px 0 7px;
  font-size: 21px;
}

.accessKeyCard p {
  margin: 0;
  line-height: 1.6;
}

.accessKeyForm {
  display: grid;
  gap: 9px;
}

.accessKeyForm > label {
  color: var(--ink);
  font-size: 12px;
  font-weight: 750;
}

.accessKeyInput {
  display: flex;
  min-height: 48px;
  align-items: center;
  gap: 10px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--bg);
  transition: border-color .15s ease, box-shadow .15s ease;
}

.accessKeyInput:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 14%, transparent);
}

.accessKeyInput > span {
  color: var(--accent);
  font-size: 9px;
}

.accessKeyInput input {
  width: 100%;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--ink);
  font: 600 14px ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .12em;
}

.accessKeyInput input::placeholder {
  color: var(--muted);
  opacity: .65;
}

.keyStatus {
  min-height: 20px;
  color: var(--muted);
  font-size: 11px;
}

.keyStatus.saved {
  color: var(--ok);
}

.keyActions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 5px;
}

.mobileMenu,
.mobileClose,
.mobileScrim {
  display: none;
}

/* A largura útil da tabela não coincide com a largura da janela: no desktop,
   a barra lateral e o padding do conteúdo retiram mais de 300px. A grelha
   passa por isso a adaptar-se ao próprio quadro, mantendo sempre visíveis as
   ações da direita mesmo em ecrãs 1280x800 a 100%. */
@container contracts (max-width: 1080px) {
  .listHeader,
  .contractsList .card {
    grid-template-columns: minmax(200px, 1.8fr) minmax(76px, .6fr) minmax(112px, .85fr) minmax(170px, 1.2fr) 246px;
  }

  .listHeader > span:nth-child(4),
  .contractsList .contractProgress {
    display: none;
  }
}

@media (max-width: 1180px) {
  .summaryGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .kv {
    grid-template-columns: repeat(2, minmax(140px, 1fr));
  }

  #btnTema {
    display: none;
  }
}

@media (max-width: 900px) {
  .appShell {
    display: block;
  }

  .appSidebar {
    width: 276px;
    transform: translateX(-101%);
    transition: transform .2s ease;
    box-shadow: 20px 0 60px rgba(8, 16, 26, .28);
  }

  .appSidebar.on {
    transform: translateX(0);
  }

  .mobileClose {
    margin-left: auto;
    display: block;
    border: 0;
    background: transparent;
    color: white;
    font-size: 21px;
  }

  .mobileScrim {
    position: fixed;
    inset: 0;
    z-index: 17;
    border: 0;
    background: rgba(8, 16, 26, .48);
  }

  .mobileScrim.on {
    display: block;
  }

  .workspace {
    width: 100%;
  }

  .topbar {
    height: 62px;
    padding: 0 18px;
  }

  .mobileMenu {
    width: 36px;
    height: 36px;
    display: block;
    border: 1px solid var(--line);
    border-radius: 9px;
    background: var(--panel);
    color: var(--ink);
  }

  .globalSearch {
    width: auto;
    flex: 1;
  }

  .topSpacer {
    display: none;
  }

  .globalSearch kbd,
  #btnNova {
    display: none;
  }

  #dashboardView {
    padding: 27px 20px 60px;
  }

  .detailDrawer {
    width: 100%;
  }

  .detailDrawer .body {
    padding: 24px 22px 60px;
  }

  .detailDrawer .dh {
    padding: 0 20px;
  }

  .detailContent {
    /* `1fr` equivale a `minmax(auto, 1fr)` e não encolhe abaixo do conteúdo
       mais largo lá dentro: em ecrã estreito a coluna ficava maior do que o
       contentor e o Resumo transbordava. `minmax(0, 1fr)` deixa encolher. */
    grid-template-columns: minmax(0, 1fr);
  }

  .detailRail {
    grid-row: 1;
  }

  .pageHeading,
  .detailHero {
    align-items: flex-start;
    flex-direction: column;
  }

  .priorityItem {
    grid-template-columns: 47px minmax(0, 1fr) 18px;
  }

  .priorityItem .statusPill {
    display: none;
  }

  .toolbar {
    flex-wrap: wrap;
  }

  .listHeader,
  .contractsList .card {
    grid-template-columns: minmax(200px, 1.6fr) minmax(112px, .8fr) minmax(170px, 1.2fr) 246px;
  }

  .listHeader > span:nth-child(2),
  .contractsList .contractPhase {
    display: none;
  }

  .ccpOverview {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (max-width: 620px) {
  .topbar {
    gap: 7px;
    padding: 0 12px;
  }

  /* 16 CSS px é o limiar usado pelo Safari iOS para não ampliar a página ao
     focar inputs. Aplica-se ao login, à gestão da sessão e à pesquisa. */
  .globalSearch input,
  .accessKeyInput input {
    font-size: 16px;
  }

  .mobileMenu {
    padding: 0;
    display: grid;
    place-items: center;
    font-size: 20px;
    line-height: 1;
  }

  #btnEmail {
    width: 40px;
    min-width: 40px;
    height: 40px;
    min-height: 40px;
    padding: 0;
    position: relative;
    display: grid;
    place-items: center;
  }

  #btnEmail .emailLabel {
    display: none;
  }

  #btnEmail .emailIcon {
    display: block;
    font-size: 17px;
    line-height: 1;
  }

  #btnEmail .sinal:not(:empty) {
    min-width: 17px;
    height: 17px;
    margin: 0;
    padding: 0 4px;
    position: absolute;
    top: -5px;
    right: -5px;
    display: grid;
    place-items: center;
    border: 2px solid var(--panel);
    font-size: 8px;
    line-height: 1;
  }

  #dashboardView {
    padding: 23px 14px 52px;
  }

  .toolbar {
    display: grid;
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr) auto;
    align-items: end;
  }

  .pageHeading {
    align-items: stretch;
  }

  .pageHeading h1,
  .detailHero h1 {
    font-size: 23px;
  }

  .headingActions,
  .detailHeroActions {
    width: 100%;
  }

  .headingActions button,
  .detailHeroActions button {
    flex: 1;
  }

  .auditRoleBar {
    align-items: stretch;
    flex-direction: column;
    gap: 11px;
  }

  .auditRoleSwitch {
    width: 100%;
    flex-basis: auto;
  }

  .summaryGrid {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .summaryCard {
    min-height: 68px;
    padding: 10px 12px;
    gap: 10px;
  }

  .summaryCard > span:nth-child(2) {
    display: grid;
    grid-template-columns: auto auto;
    align-items: baseline;
    justify-content: start;
    column-gap: 8px;
  }

  .summaryCard small,
  .summaryCard b {
    margin: 0;
    line-height: 1.2;
  }

  .summaryCard b {
    font-size: 21px;
  }

  .summaryCard em {
    grid-column: 1 / -1;
    margin-top: 2px;
  }

  .summaryIcon {
    width: 34px;
    height: 34px;
    border-radius: 9px;
  }

  .priorityItem {
    min-height: 82px;
    padding: 12px;
  }

  .sectionHint {
    display: none;
  }

  .fgrupo {
    width: 100%;
    grid-column: 1 / -1;
  }

  .fgrupo button {
    flex: 1;
  }

  .flabel {
    min-width: 0;
    align-items: stretch;
    flex-direction: column;
  }

  .flabel select {
    width: 100%;
  }

  .selectField {
    width: 100%;
  }

  .fsep {
    display: none;
  }

  .toolbar #btnAgrupar,
  .toolbar #btnColapsarGrupos,
  .toolbar .clearFilters {
    min-width: 0;
  }

  .toolbar #btnAgrupar {
    grid-column: 3;
    width: auto;
    padding-inline: 10px;
    white-space: nowrap;
  }

  .toolbar #btnColapsarGrupos,
  .toolbar .clearFilters {
    width: 100%;
    grid-column: 1 / -1;
  }

  .groupLabelFull {
    display: none;
  }

  .groupLabelMobile {
    display: inline;
  }

  .listHeader {
    display: none;
  }

  .contractsList {
    display: grid;
    gap: 10px;
    overflow: visible;
    border: 0;
    background: transparent;
  }

  .contractsList .card {
    min-height: 0;
    padding: 15px;
    position: relative;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 10px;
    border: 1px solid var(--line);
    border-radius: 12px;
    box-shadow: var(--shadow);
  }

  /* Em mobile cada linha já é um cartão com bordo próprio: o quadro do grupo
     deixa de ser uma caixa e passa a ser só o espaçamento entre cartões. */
  .grupoLista {
    display: grid;
    gap: 10px;
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  .contractsList .card:last-child,
  .grupoLista .card:last-child {
    border-bottom: 1px solid var(--line);
  }

  .contractsList.agrupado {
    gap: 22px;
  }

  .contractsList .contractIdentity,
  .contractsList .contractAction {
    grid-column: 1 / -1;
  }

  .contractsList .contractIdentity .top {
    padding-right: 150px;
  }

  .contractsList .contractStatus {
    position: absolute;
    top: 15px;
    right: 15px;
    display: flex;
    align-items: center;
    gap: 6px;
    text-align: right;
  }

  .contractsList .contractStatus small {
    margin-top: 0;
  }

  .contractsList .contractAction {
    padding: 10px;
    border-left: 3px solid var(--accent);
    border-radius: 8px;
    background: var(--subtle);
  }

  .contractsList .contractArrow {
    display: none;
  }

  .detailDrawer .body {
    padding: 20px 14px 50px;
  }

  .detailDrawer .dh {
    padding: 0 14px;
  }

  .detailHeroActions {
    flex-wrap: wrap;
  }

  .detailHeroActions button {
    min-width: 130px;
  }

  .detailTabs {
    gap: 0;
  }

  .detailTabs button {
    height: 36px;
    flex: 1 1 auto;
    padding: 0 8px;
    font-size: 9.5px;
  }

  .kv,
  .ccpEvidence {
    grid-template-columns: minmax(0, 1fr);
  }

  .detailDrawer .kv {
    row-gap: 2px;
  }

  .detailDrawer .kv > span {
    margin-bottom: 13px;
    font-weight: 650;
  }

  .detailDrawer .kv > span:last-child {
    margin-bottom: 0;
  }

  .detailContent,
  .detailSections,
  .detailRail,
  .detailDrawer .sec,
  .detailDrawer .kv,
  .detailDrawer .kv > * {
    min-width: 0;
    max-width: 100%;
  }

  .detailDrawer .kv span,
  .detailDrawer .sec p,
  .detailDrawer .sec li {
    overflow-wrap: anywhere;
  }

  .detailDrawer select,
  .detailDrawer input,
  .detailDrawer textarea {
    min-width: 0;
    max-width: 100%;
  }

  .ccpStats {
    width: 100%;
    justify-content: space-between;
    gap: 10px;
  }

  .ccpFinding {
    padding: 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition: none !important;
  }
}