/* CSS puro, arquivo único, sem framework e sem build.
   Densidade de planilha, mas com cor fazendo trabalho: cada borda colorida
   diz o que aquela linha é. Se uma cor não significa nada, ela não entra.
   Escuro é o padrão; o botão da barra alterna e o navegador é consultado
   quando ninguém escolheu. */

:root {
    color-scheme: dark;

    /* Grafite, não preto: fundo cinza médio, painéis um degrau acima.
       Contraste suficiente para ler o dia inteiro sem cansar. */
    --bg:        #2b3038;
    --bg-panel:  #343a44;
    --bg-alt:    #3b424d;
    --bg-head:   #414954;
    --bg-hover:  #4a525f;

    --fg:        #f0f3f7;
    --fg-muted:  #bcc5d1;
    --fg-dim:    #97a1af;

    --border:        #4b5361;
    --border-strong: #626c7c;

    --accent:      #7cb8ff;
    --accent-soft: #3a4a63;
    --sobre-accent: #10161f;

    /* Semáforo do ciclo de vida: cor do texto, da borda e do fundo.
       A borda delimita, o texto se lê, o fundo só situa. */
    --ok-fg:   #7ee2a8;  --ok-line:   #3f8f62;  --ok-bg:   #33443b;
    --warn-fg: #fdd35f;  --warn-line: #9c7a2a;  --warn-bg: #44402f;
    --crit-fg: #ffab6b;  --crit-line: #a56a35;  --crit-bg: #453a30;
    --over-fg: #ff9b9b;  --over-line: #ab4c4c;  --over-bg: #47353a;

    --radius: 5px;
}

/* Claro só quando a pessoa pede no botão. O tema do sistema não manda aqui:
   quem usa o macOS em claro nunca chegava a ver o grafite. */
:root[data-tema="claro"] {
    color-scheme: light;

    --bg:        #f4f6f9;
    --bg-panel:  #ffffff;
    --bg-alt:    #f7f9fc;
    --bg-head:   #eef1f6;
    --bg-hover:  #e8eefa;

    --fg:        #171a1f;
    --fg-muted:  #5b6675;
    --fg-dim:    #8a93a1;

    --border:        #dde2ea;
    --border-strong: #b9c2cf;

    --accent:      #1f6fd0;
    --accent-soft: #e4eefc;
    --sobre-accent: #ffffff;

    --ok-fg:   #1c7a3e;  --ok-line:   #7fd3a0;  --ok-bg:   #eefaf1;
    --warn-fg: #8a6100;  --warn-line: #e9c76c;  --warn-bg: #fdf7e6;
    --crit-fg: #9a4a06;  --crit-line: #eda874;  --crit-bg: #fdf1e7;
    --over-fg: #b02222;  --over-line: #eb9a9a;  --over-bg: #fdeeee;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    color: var(--fg);
    background: var(--bg);
    font: 13px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); }

h1 { font-weight: 600; letter-spacing: -0.01em; }

h2 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--fg-muted);
    margin: 0 0 0.55rem;
}

/* Traço de cor antes do título: separa blocos sem precisar de moldura. */
h2::before {
    content: "";
    width: 3px;
    height: 0.95em;
    border-radius: 2px;
    background: var(--accent);
}

p.sub {
    margin: -0.25rem 0 0.7rem;
    color: var(--fg-dim);
    font-size: 12px;
    max-width: 48rem;
}

/* ---------- barra superior ---------- */

.topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0 0.9rem;
    height: 44px;
    background: var(--bg-panel);
    border-bottom: 1px solid var(--border-strong);
    box-shadow: inset 0 -2px 0 0 var(--accent-soft);
}

.topbar nav { display: flex; align-items: center; gap: 0.2rem; }

.topbar .brand {
    font-weight: 700;
    letter-spacing: 0.12em;
    margin-right: 1rem;
    font-size: 12px;
    color: var(--accent);
}

.topbar nav a {
    padding: 0.32rem 0.7rem;
    border: 1px solid transparent;
    border-radius: var(--radius);
    text-decoration: none;
    color: var(--fg-muted);
}

.topbar nav a:hover { background: var(--bg-hover); color: var(--fg); }

.topbar nav a.on {
    background: var(--accent-soft);
    border-color: var(--accent);
    color: var(--fg);
    font-weight: 600;
}

.topbar .who {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    color: var(--fg-muted);
    font-size: 12px;
}

.topbar .who form { display: inline; }

main { padding: 0.7rem; max-width: 1900px; }

section { margin-bottom: 0.9rem; }

/* ---------- painéis ---------- */

.grade-paineis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(23rem, 1fr));
    gap: 0.7rem;
    align-items: start;
}

.painel {
    padding: 0.7rem 0.75rem;
    background: var(--bg-panel);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

/* ---------- controles ---------- */

input[type="text"], input[type="email"], input[type="password"],
input[type="search"], input[type="date"], select, textarea {
    padding: 0.3rem 0.45rem;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    font: inherit;
    background: var(--bg-alt);
    color: var(--fg);
}

input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 2px var(--accent-soft);
}

::placeholder { color: var(--fg-dim); }

button, .btn {
    display: inline-block;
    padding: 0.3rem 0.75rem;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    background: var(--bg-alt);
    color: var(--fg);
    font: inherit;
    text-decoration: none;
    cursor: pointer;
}

button:hover, .btn:hover { background: var(--bg-hover); border-color: var(--accent); }

button.primary {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--sobre-accent);
    font-weight: 600;
}
button.primary:hover { filter: brightness(1.12); }

button.link {
    border: 0; background: none; padding: 0;
    color: var(--accent); text-decoration: underline;
}

button.tema { padding: 0.22rem 0.5rem; font-size: 14px; line-height: 1.1; }

/* ---------- filtros ---------- */

/* Campos do tamanho do conteúdo, não esticados: grade com 1fr espalhava os
   selects pela tela toda e sobrava buraco na segunda linha. */
.filtros {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.4rem 0.55rem;
    padding: 0.5rem 0.6rem;
    margin-bottom: 0.6rem;
    background: var(--bg-panel);
    border: 1px solid var(--border);
    border-left: 3px solid var(--accent);
    border-radius: var(--radius);
}

.campo { display: flex; flex-direction: column; gap: 0.12rem; min-width: 0; }

.campo > span {
    font-size: 9.5px;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--fg-dim);
    line-height: 1.2;
}

.campo input, .campo select { width: auto; padding: 0.22rem 0.4rem; }
.campo select { max-width: 11rem; }
.campo.largo input { width: 17rem; }
.campo .par { display: flex; gap: 0.25rem; }
.campo .par input { width: 8.6rem; }

.acoes-filtro {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    margin-left: auto;
}

.contagem { margin-left: auto; color: var(--fg-muted); font-size: 12px; }
.contagem strong { color: var(--fg); font-size: 15px; }

/* ---------- tabela ---------- */

.tabela-wrap {
    max-height: calc(100vh - 175px);
    overflow: auto;
    background: var(--bg-panel);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
}

.tabela-wrap.curta { max-height: 17rem; }

table.grid {
    border-collapse: separate;
    border-spacing: 0;
    width: 100%;
    font-size: 12px;
    font-variant-numeric: tabular-nums;
}

/* Nome comprido não pode empurrar a tabela para fora da tela: corta com
   reticências e o valor inteiro fica no title. */
table.grid td.corta {
    max-width: 13rem;
    overflow: hidden;
    text-overflow: ellipsis;
}

table.grid th, table.grid td {
    padding: 0.16rem 0.4rem;
    border-bottom: 1px solid var(--border);
    border-right: 1px solid var(--border);
    text-align: left;
    white-space: nowrap;
}

table.grid th:last-child, table.grid td:last-child { border-right: 0; }
table.grid tbody tr:last-child td { border-bottom: 0; }

table.grid thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--bg-head);
    border-bottom: 2px solid var(--accent);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--fg-muted);
    font-weight: 700;
}

table.grid thead th a { color: inherit; text-decoration: none; display: block; }
table.grid thead th a:hover { color: var(--accent); }
table.grid thead th .mark { color: var(--accent); }

table.grid tbody tr:nth-child(even) { background: var(--bg-alt); }
table.grid tbody tr:hover { background: var(--bg-hover); }

table.grid td.num { text-align: right; }
table.grid td.tag { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
table.grid td.tag a { color: var(--accent); text-decoration: none; }
table.grid td.tag a:hover { text-decoration: underline; }
table.grid td.vazio, .vazio { color: var(--fg-dim); font-style: italic; }

table.compacta { font-size: 12px; }
table.estreita { width: auto; min-width: 22rem; }

tr.ano-atual td {
    font-weight: 700;
    box-shadow: inset 3px 0 0 var(--accent);
    background: var(--accent-soft) !important;
}

/* Coluna da tag presa à esquerda: rolar de lado não pode fazer perder de
   vista de qual máquina é a linha. */
table.grid td.tag, table.grid thead th:first-child {
    position: sticky;
    left: 0;
    z-index: 1;
    background: var(--bg-panel);
    border-right: 1px solid var(--border-strong);
}
table.grid thead th:first-child { z-index: 3; background: var(--bg-head); }
table.grid tbody tr:nth-child(even) td.tag { background: var(--bg-alt); }
table.grid tbody tr:hover td.tag { background: var(--bg-hover); }

/* ---------- semáforo ----------
   Fundo discreto + borda esquerda forte. A cor sai da regra de negócio,
   nunca de alguém pintando célula à mão — que foi o problema da planilha. */

.sev-ok, .sev-warn, .sev-critical, .sev-overdue {
    border-left: 3px solid transparent;
    font-weight: 600;
}

.sev-ok       { background: var(--ok-bg);   color: var(--ok-fg);   border-left-color: var(--ok-line); }
.sev-warn     { background: var(--warn-bg); color: var(--warn-fg); border-left-color: var(--warn-line); }
.sev-critical { background: var(--crit-bg); color: var(--crit-fg); border-left-color: var(--crit-line); }
.sev-overdue  { background: var(--over-bg); color: var(--over-fg); border-left-color: var(--over-line); }
.sev-none     { color: var(--fg-dim); }

/* ---------- cartões ---------- */

.cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
    gap: 0.5rem;
    margin-bottom: 0.7rem;
}

.card {
    display: block;
    padding: 0.5rem 0.65rem;
    background: var(--bg-panel);
    border: 1px solid var(--border);
    border-top: 3px solid var(--border-strong);
    border-radius: var(--radius);
    text-decoration: none;
    color: inherit;
}

.card:hover { border-color: var(--accent); background: var(--bg-hover); }

.card .n { display: block; font-size: 24px; font-weight: 700; line-height: 1.15; }
.card .l {
    display: block;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--fg-muted);
}

/* No cartão a cor vai na borda de cima e no número — não no fundo inteiro,
   senão nove cartões coloridos brigam entre si e nenhum se destaca. */
.card.sev-ok, .card.sev-warn, .card.sev-critical, .card.sev-overdue {
    background: var(--bg-panel);
    border-left: 1px solid var(--border);
    font-weight: inherit;
}
.card.sev-ok       { border-top-color: var(--ok-line); }
.card.sev-warn     { border-top-color: var(--warn-line); }
.card.sev-critical { border-top-color: var(--crit-line); }
.card.sev-overdue  { border-top-color: var(--over-line); }

.card.sev-ok .n       { color: var(--ok-fg); }
.card.sev-warn .n     { color: var(--warn-fg); }
.card.sev-critical .n { color: var(--crit-fg); }
.card.sev-overdue .n  { color: var(--over-fg); }

.rodape {
    margin-top: 0.5rem;
    padding-left: 0.6rem;
    border-left: 2px solid var(--border);
    color: var(--fg-dim);
    font-size: 11.5px;
    max-width: 56rem;
}

/* ---------- célula editável ---------- */

td.editavel { cursor: cell; }
td.editavel:hover { outline: 1px dashed var(--accent); outline-offset: -1px; }

td.editando { padding: 0; }
td.editando select, td.editando input {
    width: 100%;
    border: 1px solid var(--accent);
    border-radius: 0;
    padding: 0.22rem 0.45rem;
    background: var(--bg-hover);
}

.erro-celula {
    display: block;
    color: var(--over-fg);
    font-size: 11px;
    font-weight: 400;
    white-space: normal;
}

/* ---------- ficha do ativo ---------- */

.ficha-topo {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.8rem 0.9rem;
    margin-bottom: 1.1rem;
    background: var(--bg-panel);
    border: 1px solid var(--border);
    border-left: 3px solid var(--accent);
    border-radius: var(--radius);
}

.ficha-topo h1 {
    margin: 0.55rem 0 0.2rem;
    font-size: 22px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    color: var(--accent);
}

.portador-atual {
    padding: 0.55rem 0.85rem;
    border: 1px solid var(--border);
    border-left: 3px solid var(--ok-line);
    border-radius: var(--radius);
    background: var(--bg-alt);
    min-width: 14rem;
}
.portador-atual .l { display: block; font-size: 10px; text-transform: uppercase;
                     letter-spacing: 0.07em; color: var(--fg-dim); }
.portador-atual .n { display: block; font-size: 16px; font-weight: 600; }

table.ficha { width: 100%; }
table.ficha th {
    width: 11rem;
    background: var(--bg-alt);
    font-weight: 600;
    color: var(--fg-muted);
    font-size: 11.5px;
    padding: 0.3rem 0.55rem;
    text-align: left;
    white-space: nowrap;
    border-bottom: 1px solid var(--border);
    border-right: 1px solid var(--border);
}

.acoes { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-bottom: 0.8rem; }
.linha-acao {
    display: flex; gap: 0.4rem; align-items: center;
    padding: 0.55rem;
    background: var(--bg-panel);
    border: 1px solid var(--border);
    border-left: 3px solid var(--accent);
    border-radius: var(--radius);
}
.linha-acao input[type="text"] { min-width: 13rem; }

.form-nota { display: flex; flex-direction: column; gap: 0.4rem; margin-bottom: 0.8rem; }
.form-nota textarea { resize: vertical; }
.form-nota button { align-self: flex-start; }

ul.notas { list-style: none; margin: 0; padding: 0; }
ul.notas li {
    padding: 0.5rem 0.65rem;
    margin-bottom: 0.4rem;
    background: var(--bg-panel);
    border: 1px solid var(--border);
    border-left: 3px solid var(--warn-line);
    border-radius: var(--radius);
}
ul.notas li p { margin: 0.25rem 0 0; white-space: pre-wrap; }
ul.notas .quando { color: var(--fg-dim); font-size: 11px; margin-left: 0.4rem; }

/* ---------- login ---------- */

.login {
    max-width: 21rem;
    margin: 12vh auto;
    padding: 1.5rem;
    background: var(--bg-panel);
    border: 1px solid var(--border);
    border-top: 3px solid var(--accent);
    border-radius: var(--radius);
}

.login h1 { margin: 0 0 1.1rem; font-size: 18px; letter-spacing: 0.12em; color: var(--accent); }
.login label { display: block; margin-bottom: 0.8rem; }
.login label span { display: block; margin-bottom: 0.2rem; color: var(--fg-dim);
                    font-size: 10px; text-transform: uppercase; letter-spacing: 0.07em; }
.login input { width: 100%; }
.login button { width: 100%; padding: 0.45rem; }

.error {
    margin-bottom: 1rem;
    padding: 0.5rem 0.6rem;
    border: 1px solid var(--over-line);
    border-left: 3px solid var(--over-fg);
    border-radius: var(--radius);
    color: var(--over-fg);
    background: var(--over-bg);
}

/* Coluna com dois painéis empilhados, para nenhum bloco curto deixar buraco
   embaixo esperando o vizinho mais alto terminar. */
.coluna-empilhada { display: flex; flex-direction: column; gap: 0.7rem; }

/* ---------- justificativa da ação ----------
   A ação era uma conclusão sem argumento na tela. Aqui vem a regra que
   disparou, com o número, ao lado do rótulo. */

.justificativa {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.5rem 0.7rem;
    padding: 0.6rem 0.75rem;
    margin-bottom: 1rem;
    background: var(--bg-panel);
    border: 1px solid var(--border);
    border-left: 4px solid var(--border-strong);
    border-radius: var(--radius);
    font-weight: 400;
}

.justificativa.sev-overdue  { border-left-color: var(--over-line); }
.justificativa.sev-critical { border-left-color: var(--crit-line); }
.justificativa.sev-warn     { border-left-color: var(--warn-line); }
.justificativa.sev-ok       { border-left-color: var(--ok-line); }
.justificativa.sev-none     { border-left-color: var(--border-strong); }

.justificativa .acao {
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.06em;
    padding: 0.1rem 0.5rem;
    border-radius: var(--radius);
    border: 1px solid currentColor;
}
.justificativa.sev-overdue  .acao { color: var(--over-fg); }
.justificativa.sev-critical .acao { color: var(--crit-fg); }
.justificativa.sev-warn     .acao { color: var(--warn-fg); }
.justificativa.sev-ok       .acao { color: var(--ok-fg); }
.justificativa.sev-none     .acao { color: var(--fg-dim); }

.justificativa .porque { color: var(--fg); }
.justificativa .situacao {
    width: 100%;
    color: var(--fg-muted);
    font-size: 12px;
    padding-top: 0.35rem;
    border-top: 1px solid var(--border);
}

/* A coluna "Por quê" é a mais larga da grade: é frase, não rótulo. */
table.grid td.motivo {
    max-width: 21rem;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--fg-muted);
}

/* Formulário de contrato: os campos herdam a grade dos filtros, mas aqui a
   largura de conteúdo atrapalha — campo de formulário quer preencher. */
.form-contrato .filtros, form .filtros {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
    align-items: end;
}
.form-contrato .campo input, form .filtros .campo input,
.form-contrato .campo select, form .filtros .campo select { width: 100%; max-width: none; }

.campo .checkbox {
    display: flex; align-items: center; gap: 0.35rem;
    font-size: 12px; color: var(--fg); text-transform: none; letter-spacing: 0;
    padding: 0.3rem 0;
}
.campo .checkbox input { width: auto; }

.linha-acao select[multiple] { min-width: 20rem; height: auto; }

/* Selo de prazo dentro do cartão: precisa envolver só o texto, senão a cor
   vira uma faixa atravessando o painel. */
.portador-atual .l.sev-ok, .portador-atual .l.sev-warn,
.portador-atual .l.sev-critical, .portador-atual .l.sev-overdue {
    display: inline-block;
    margin-top: 0.25rem;
    padding: 0.05rem 0.4rem;
    border-radius: var(--radius);
    border-left-width: 2px;
}

/* ---------- abas de tipo de ativo ---------- */

.abas {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    margin-bottom: 0.55rem;
    padding-bottom: 0.45rem;
    border-bottom: 1px solid var(--border);
}

.aba {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 0.7rem;
    border: 1px solid var(--border);
    border-bottom: 2px solid transparent;
    border-radius: var(--radius);
    background: var(--bg-panel);
    color: var(--fg-muted);
    text-decoration: none;
    font-size: 12.5px;
}

.aba:hover { background: var(--bg-hover); color: var(--fg); }

.aba.on {
    background: var(--accent-soft);
    border-color: var(--accent);
    border-bottom-color: var(--accent);
    color: var(--fg);
    font-weight: 600;
}

.aba .qtd {
    padding: 0.02rem 0.35rem;
    border-radius: 999px;
    background: var(--bg-alt);
    border: 1px solid var(--border);
    font-size: 11px;
    font-variant-numeric: tabular-nums;
    color: var(--fg-muted);
}
.aba.on .qtd { background: var(--bg-panel); border-color: var(--accent); color: var(--fg); }

/* ---------- ações nomeadas na ficha ----------
   Cada ação tem nome próprio em vez de sair escondida numa edição genérica.
   O formulário abre no <details>, sem JavaScript. */

.acoes-nomeadas { margin-bottom: 1rem; }
.botoes-acao { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: flex-start; }
.acao summary { list-style: none; cursor: pointer; }
.acao summary::-webkit-details-marker { display: none; }
.acao[open] summary { border-color: var(--accent); background: var(--bg-hover); }
.acao .linha-acao { margin-top: 0.45rem; }
.btn.perigo { border-color: var(--over-line); color: var(--over-fg); }
.btn.perigo:hover { background: var(--over-bg); border-color: var(--over-fg); }

/* ---------- histórico em linha do tempo ----------
   Tabela densa serve para comparar linhas; histórico serve para ler uma
   sequência. Formatos diferentes para perguntas diferentes. */

ol.linha-tempo { list-style: none; margin: 0; padding: 0 0 0 0.9rem; border-left: 2px solid var(--border); }

ol.linha-tempo li {
    position: relative;
    padding: 0.5rem 0.7rem;
    margin-bottom: 0.5rem;
    background: var(--bg-panel);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

ol.linha-tempo li::before {
    content: "";
    position: absolute;
    left: -1.35rem;
    top: 0.9rem;
    width: 9px; height: 9px;
    border-radius: 50%;
    background: var(--accent);
    border: 2px solid var(--bg);
}

ol.linha-tempo .cabeca { display: flex; justify-content: space-between; gap: 0.6rem; align-items: baseline; }
ol.linha-tempo .evento { font-weight: 600; text-transform: uppercase; font-size: 11px; letter-spacing: 0.06em; color: var(--accent); }
ol.linha-tempo .quando { color: var(--fg-dim); font-size: 11px; font-variant-numeric: tabular-nums; }

ol.linha-tempo .mudanca { margin-top: 0.3rem; display: flex; flex-wrap: wrap; gap: 0.35rem; align-items: center; }
ol.linha-tempo .campo { color: var(--fg-muted); font-size: 12px; }
ol.linha-tempo .de, ol.linha-tempo .para {
    padding: 0.05rem 0.4rem;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    background: var(--bg-alt);
    font-size: 12px;
}
ol.linha-tempo .de   { color: var(--fg-dim); text-decoration: line-through; }
ol.linha-tempo .para { color: var(--ok-fg); border-color: var(--ok-line); }
ol.linha-tempo .seta { color: var(--fg-dim); }
ol.linha-tempo .nota { color: var(--fg-muted); font-size: 12px; font-style: italic; }
ol.linha-tempo .rodape-evento { margin-top: 0.3rem; color: var(--fg-dim); font-size: 11px; }

/* ---------- termo de responsabilidade ----------
   Sem biblioteca de PDF: a folha é HTML e o navegador imprime. A numeração de
   página, as margens e a quebra são responsabilidade do @page. */

.acoes-termo { display: flex; align-items: center; gap: 0.5rem; padding: 0.7rem; }

.folha {
    max-width: 21cm;
    margin: 0 auto 2rem;
    padding: 1.6cm;
    background: var(--bg-panel);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.folha-topo {
    display: flex; justify-content: space-between; gap: 1rem;
    padding-bottom: 0.6rem; margin-bottom: 1.1rem;
    border-bottom: 2px solid var(--fg);
    font-size: 12px; line-height: 1.4;
}
.folha-topo .direita { text-align: right; color: var(--fg-muted); }

.folha h1 { font-size: 16px; text-align: center; margin: 0 0 1.1rem; letter-spacing: 0.02em; }

table.quadro { width: 100%; border-collapse: collapse; margin-bottom: 1.1rem; font-size: 12.5px; }
table.quadro th {
    width: 12rem; text-align: left; font-weight: 600; color: var(--fg-muted);
    padding: 0.3rem 0.5rem; border: 1px solid var(--border); background: var(--bg-alt);
}
table.quadro td { padding: 0.3rem 0.5rem; border: 1px solid var(--border); }

table.itens { width: 100%; border-collapse: collapse; font-size: 12px; }
table.itens th, table.itens td { padding: 0.3rem 0.45rem; border: 1px solid var(--border); text-align: left; }
table.itens th { background: var(--bg-alt); font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--fg-muted); }
table.itens .mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }

.declaracao { margin: 1.3rem 0; font-size: 12.5px; line-height: 1.65; text-align: justify; }

.assinaturas { display: flex; gap: 2.5rem; margin-top: 2.6rem; }
.assinatura { flex: 1; text-align: center; font-size: 12px; }
.assinatura .linha { border-top: 1px solid var(--fg); margin-bottom: 0.35rem; }

.local-data { margin-top: 2rem; font-size: 12.5px; }

.folha-rodape { margin-top: 1.6rem; padding-top: 0.5rem; border-top: 1px solid var(--border);
                color: var(--fg-dim); font-size: 10.5px; }

@media print {
    /* A folha é o documento; o resto da interface não vai para o papel. */
    .nao-imprimir, .topbar { display: none !important; }

    :root {
        --bg: #fff; --bg-panel: #fff; --bg-alt: #f2f2f2;
        --fg: #000; --fg-muted: #333; --fg-dim: #555;
        --border: #999; --ok-fg: #000; --ok-line: #999;
    }

    body { background: #fff; color: #000; font-size: 11pt; }
    main { padding: 0; max-width: none; }

    .folha { max-width: none; margin: 0; padding: 0; border: 0; }

    @page { size: A4; margin: 1.8cm; }

    table.itens { page-break-inside: auto; }
    table.itens tr { page-break-inside: avoid; }
    thead { display: table-header-group; }  /* cabeçalho repete em cada página */
    .assinaturas, .declaracao { page-break-inside: avoid; }
}

/* ---------- anotações ---------- */

.novo-assunto { margin-bottom: 0.8rem; }
.novo-assunto summary { list-style: none; cursor: pointer; display: inline-block; }
.novo-assunto summary::-webkit-details-marker { display: none; }
.novo-assunto[open] summary { margin-bottom: 0.5rem; }

.titulo-assunto { font-size: 19px; margin: 0.5rem 0 0.2rem; font-family: inherit; color: var(--fg); }
.descricao-assunto { margin: 0.4rem 0 0; color: var(--fg-muted); font-size: 13px; max-width: 52rem; }

table.grid td .vinculo {
    margin-left: 0.4rem;
    padding: 0.02rem 0.35rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: 10.5px;
    color: var(--fg-dim);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* Assunto encerrado continua na lista, mas para de disputar atenção. */
table.grid tr.encerrado td { opacity: 0.55; }

ol.linha-tempo .corpo-nota { margin-top: 0.3rem; white-space: pre-wrap; }

/* ---------- painel: faixas por pergunta ----------
   "O parque" e "Exige decisão" são perguntas diferentes. Misturar os dois
   numa fileira só era o que deixava o painel confuso. */

.faixa { margin-bottom: 1rem; }
.faixa h2 { margin-bottom: 0.45rem; }

.card .n.valor { font-size: 19px; }

/* O bloco central ganha uma borda de destaque: é o que se olha primeiro. */
.painel.destaque {
    border-left: 3px solid var(--accent);
    margin-bottom: 1.1rem;
}

/* Etiqueta de origem na lista de atenção: prazo, contrato ou assunto. */
.etiqueta {
    display: inline-block;
    padding: 0.02rem 0.35rem;
    margin-right: 0.3rem;
    border-radius: var(--radius);
    border: 1px solid var(--border-strong);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--fg-muted);
}
.etiqueta.t-PRAZO    { border-color: var(--crit-line); color: var(--crit-fg); }
.etiqueta.t-CONTRATO { border-color: var(--accent);    color: var(--accent); }
.etiqueta.t-ASSUNTO  { border-color: var(--warn-line); color: var(--warn-fg); }

/* Aviso de corte: a lista de atenção esconde dívida antiga de propósito, e
   isso precisa ficar dito — corte silencioso vira "está tudo bem". */
.aviso-corte {
    padding: 0.4rem 0.6rem;
    border: 1px dashed var(--border-strong);
    border-radius: var(--radius);
    color: var(--fg-muted);
}

/* Coluna derivada: não abre para edição, e o cursor diz isso antes do clique. */
td.derivada { cursor: help; }
td.derivada:hover { outline: none; }