/* ============================================================================
   Componentes de UI compartilhados — carregado uma única vez em base/base.html.
   Valores do Guia de Design (IESGO, versão 1.0).

   Regra: só entra aqui a classe usada por mais de um template. Estilo exclusivo
   de uma tela continua no <style> daquela tela.

   Os nomes de classe são os mesmos de antes — o HTML não precisa mudar para
   receber a pele nova.
   ========================================================================== */

/* ── Títulos de seção ───────────────────────────────────────────────────────
   Guia seção 03: título de card é 11px / 700 / .12em / caixa alta em navy. */
.section-title {
    color: #0a083d; font-size: calc(11px * var(--escala-fonte, 1)); font-weight: 700;
    letter-spacing: .12em; text-transform: uppercase;
    padding: 9px 16px; background: #fbfbfc;
    border: 1px solid #e2e5ea;
    margin: 14px 0 0 0;
    display: flex; align-items: center; gap: 8px;
}
.section-title.green { color: #2e7d32; }

.autos-title {
    color: #0a083d; font-size: calc(11px * var(--escala-fonte, 1)); font-weight: 700;
    letter-spacing: .12em; text-transform: uppercase;
    padding: 2px 0; margin: 0;
    display: flex; align-items: center; gap: 7px;
}
.autos-title.green { color: #2e7d32; }

/* ── Etiqueta de situação ───────────────────────────────────────────────────
   Guia seção 02: deixa de ser pílula. Raio 0, trio fundo/texto/borda.
   .aval e .pend seguem como sinônimos de .ok e .warn. */
.pill {
    display: inline-flex; align-items: center;
    padding: 3px 9px; border: 1px solid;
    font-size: calc(10px * var(--escala-fonte, 1)); font-weight: 700;
    letter-spacing: .07em; text-transform: uppercase;
    white-space: nowrap; border-radius: 0;
}
.pill.ok,
.pill.aval  { background: #eaf4ec; color: #2e7d32; border-color: #bee0c2; }
.pill.warn,
.pill.pend  { background: #fff5e4; color: #a96400; border-color: #f1d59c; }
.pill.erro  { background: #fdeeee; color: #b33a3a; border-color: #f3cfcf; }
.pill.gray  { background: #f1f2f4; color: #5b6270; border-color: #d8dbe1; }

/* ── Modal ──────────────────────────────────────────────────────────────────
   Guia seção 07: 560px, sem raio, overlay navy 55%, entrada de 160ms.
   O nome é .modal-fundo, e não .modal-overlay, porque painel_administrativo e
   gerenciar_grupos já usam .modal-overlay para o backdrop interno dos modais
   deles — nomes iguais para coisas diferentes se anulavam na cascata. */
.modal-fundo {
    position: fixed; inset: 0; background: rgba(10, 8, 61, .55);
    display: none; align-items: center; justify-content: center; z-index: 60;
}
.modal-fundo.open { display: flex; }

/* Sem borda: o guia (seção 07) especifica o modal por sombra e overlay. A borda
   de 1px só aparece na demonstração dele, onde o modal é um cartão sobre fundo
   claro — sobre o overlay navy ela vira um halo claro em volta da caixa. */
.modal {
    background: #fff; width: 560px; max-width: 92vw;
    border-radius: 0;
    box-shadow: 0 24px 60px -12px rgba(10, 8, 61, .45);
    opacity: 0; transform: translateY(-6px);
    transition: opacity .16s ease, transform .16s ease;
}
.modal-fundo.open .modal { opacity: 1; transform: translateY(0); }

.modal--sm { width: 480px; }
.modal--lg { width: 720px; max-height: 88vh; display: flex; flex-direction: column; }
.modal-body { overflow: auto; }

/* Rodapé de ações do modal — #fbfbfc com borda superior, botões à direita. */
.modal-acoes {
    padding: 13px 20px; border-top: 1px solid #e2e5ea; background: #fbfbfc;
    display: flex; justify-content: flex-end; gap: 8px;
}

@media (prefers-reduced-motion: reduce) {
    .modal { transition: none; }
}

/* ── Tabelas ────────────────────────────────────────────────────────────────
   Guia seção 06: cabeçalho #f7f8fa em 10px/700/.1em/caixa alta, linha com
   padding 11px 16px, divisor #eef0f3, hover #f7faff. Sem zebrado — a
   separação vem do divisor, não de faixa alternada. */
.tbl-projudi, .tbl-files, .tbl-hist, .tbl, .tbl-mov {
    width: 100%; border-collapse: collapse;
    border: 1px solid #e2e5ea; background: #fff;
}
.tbl-projudi thead th, .tbl-files thead th,
.tbl-hist thead th, .tbl thead th, .tbl-mov thead th {
    background: #f7f8fa; text-align: left;
    font-size: calc(10px * var(--escala-fonte, 1)); font-weight: 700;
    letter-spacing: .1em; text-transform: uppercase; color: #6b7280;
    padding: 9px 16px; border: 0; border-bottom: 1px solid #e2e5ea;
    white-space: nowrap;
}
.tbl-projudi tbody td, .tbl-files tbody td,
.tbl-hist tbody td, .tbl tbody td, .tbl-mov tbody td {
    background: #fff; border: 0; border-bottom: 1px solid #eef0f3;
    color: #23262e;
}
.tbl-projudi tbody tr:last-child td, .tbl-files tbody tr:last-child td,
.tbl-hist tbody tr:last-child td, .tbl tbody tr:last-child td,
.tbl-mov tbody tr:last-child td { border-bottom: 0; }

.tbl-projudi tbody tr:hover td, .tbl-files tbody tr:hover td,
.tbl-hist tbody tr:hover td, .tbl tbody tr:hover td,
.tbl-mov tbody tr:hover td { background: #f7faff; }

/* Densidade padrão — listagens de processo e de arquivo */
.tbl-projudi, .tbl-files { font-size: calc(11.5px * var(--escala-fonte, 1)); }
.tbl-projudi tbody td, .tbl-files tbody td { padding: 11px 16px; vertical-align: middle; }
/* Só link. `.tbl-projudi a` tem especificidade 0-1-1 e vencia o `text-white`
   (0-1-0) do botão primário na coluna de ação: o rótulo saía em #1f4f9c sobre
   fundo #0a083d, ilegível. `.btn` marca botão — ver CLASSES_BOTAO em base/ui.py. */
.tbl-projudi a:not(.btn), .tbl-mov a:not(.btn) { color: #1f4f9c; font-weight: 500; }
.tbl-projudi a:not(.btn):hover, .tbl-mov a:not(.btn):hover { color: #0a083d; text-decoration: underline; }
.tbl-files .empty td {
    text-align: center; color: #6b7280; font-style: italic;
    padding: 22px; background: #fbfbfc;
}

/* Densidade compacta — histórico, notas e movimentações */
.tbl-hist, .tbl, .tbl-mov { font-size: calc(11px * var(--escala-fonte, 1)); }
.tbl-hist tbody td, .tbl-mov tbody td { padding: 9px 16px; vertical-align: top; line-height: 1.55; }
.tbl tbody td { padding: 10px 16px; vertical-align: middle; }
.tbl tbody tr:hover td { cursor: pointer; }

/* Coluna de ação tem largura fixa — o guia proíbe `auto` aqui. O alinhamento
   é o mesmo das demais colunas: o guia fixa a largura, não o alinhamento, e
   uma última coluna à direita destoava de todas as outras à esquerda. */
.tbl-projudi .col-acoes, .tbl .col-acoes,
.tbl-hist .col-acoes, .tbl-mov .col-acoes { width: 118px; text-align: left; }

/* Linha de preenchimento do paginador — segura a altura da página cheia sem
   parecer um registro. Ver static/js/paginador.js. */
.paginador-preenchimento td { background: #fff !important; border-bottom: 0 !important; padding: 0 !important; }
.paginador-preenchimento:hover td { background: #fff !important; cursor: default !important; }

/* Célula dupla: 11.5px/600 em cima, 10.5px/#6b7280 embaixo. */
.celula-dupla { display: flex; flex-direction: column; gap: 2px; padding-right: 14px; }
.celula-dupla .principal { font-size: calc(11.5px * var(--escala-fonte, 1)); font-weight: 600; color: #23262e; }
.celula-dupla .secundario { font-size: calc(10.5px * var(--escala-fonte, 1)); color: #6b7280; }

/* ── Barra de abas ──────────────────────────────────────────────────────────
   Guia seção 07: aba ativa com sublinhado de 2px. Mesma linguagem da
   nav_secundaria. Usada por visualizar_processo e movimentar_processo — as duas
   tinham abas em forma de pasta, cada uma com o seu desenho. */
.tabs {
    display: flex; gap: 2px;
    background: #fff; border-bottom: 1px solid #e2e5ea;
}
.tab {
    padding: 9px 14px; font-size: calc(11px * var(--escala-fonte, 1)); font-weight: 600;
    letter-spacing: .06em; text-transform: uppercase;
    color: #6b7280; background: transparent;
    border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px;
    transition: color .12s ease, background-color .12s ease;
}
.tab.active { color: #0a083d; font-weight: 700; border-bottom-color: #1f4f9c; }
/* clicável só onde a aba de fato troca de painel */
.tabs.interativa .tab { cursor: pointer; }
.tabs.interativa .tab:not(.active):hover { color: #0a083d; background: #f7f8fa; }

/* ── Avatar ────────────────────────────────────────────────────────────────
   Guia seção 07: iniciais em 2 letras. Sobre navy #1f4f9c, sobre claro #eef1f6. */
.avatar {
    width: 28px; height: 28px; border-radius: 50%;
    background: #1f4f9c; color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-weight: 600; font-size: calc(11px * var(--escala-fonte, 1)); flex-shrink: 0;
}
.avatar.md { width: 34px; height: 34px; font-size: calc(12px * var(--escala-fonte, 1)); }
.avatar.lg { width: 44px; height: 44px; font-size: calc(15px * var(--escala-fonte, 1)); }
.avatar.claro { background: #eef1f6; color: #0a083d; font-weight: 700; }
.avatar.grupo, .avatar.prof { background: #0a083d; }

/* Ponto de status — 6px, ao lado de um rótulo. */
.ponto-status { width: 6px; height: 6px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
.ponto-status.ok    { background: #2e7d32; }
.ponto-status.warn  { background: #a96400; }
.ponto-status.erro  { background: #b33a3a; }
.ponto-status.gray  { background: #5b6270; }

/* ── Toast ─────────────────────────────────────────────────────────────────
   Guia seção 07 (entrada de 180ms, z 70) com os trios de estado da seção 02:
   a peça inteira assume a cor do estado. A pilha ancora 16px abaixo do fio de
   assinatura do cabeçalho — 60px de altura + 3px de fio. */
.toast-pilha {
    position: fixed; top: 79px; left: 50%; transform: translateX(-50%);
    width: min(520px, calc(100vw - 32px));
    display: flex; flex-direction: column; gap: 10px;
    z-index: 70; pointer-events: none;
}

.toast {
    pointer-events: auto; border-radius: 0;
    background: #0a083d; color: #fff;
    box-shadow: 0 12px 30px -12px rgba(10, 8, 61, .5);
    opacity: 0; transform: translateY(-12px);
    transition: opacity .18s ease, transform .18s ease;
}
.toast.show { opacity: 1; transform: translateY(0); }

.toast__linha  { display: flex; align-items: stretch; }
.toast__icone  {
    display: flex; align-items: center; padding: 12px 0 12px 18px; flex-shrink: 0;
    font-size: calc(15px * var(--escala-fonte, 1));
}
/* min-width:0 deixa o texto quebrar em vez de empurrar o botão de fechar
   para fora da tela quando a pilha encolhe no celular. */
.toast__corpo  {
    flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px;
    padding: 12px 18px; overflow-wrap: anywhere;
}
/* Branco puro: sobre #a96400 o branco já fica em 4.66:1, e qualquer
   transparência derruba o rótulo abaixo do mínimo de 4.5:1 da AA. */
.toast__rotulo {
    font-size: calc(10px * var(--escala-fonte, 1)); font-weight: 700;
    letter-spacing: .12em; text-transform: uppercase; color: #fff;
}
.toast__texto  { font-size: calc(12px * var(--escala-fonte, 1)); font-weight: 500; line-height: 1.45; }
.toast__fechar {
    background: none; border: 0; border-left: 1px solid rgba(255, 255, 255, .22);
    padding: 0 14px; cursor: pointer; color: rgba(255, 255, 255, .8); flex-shrink: 0;
    font-size: calc(11px * var(--escala-fonte, 1));
}
.toast__fechar:hover { color: #fff; }
.toast__fechar:focus-visible { outline: 2px solid #fff; outline-offset: -3px; }

/* Barra de tempo: a duração chega por style inline, calculada em toast.js. */
.toast__tempo { height: 3px; background: rgba(255, 255, 255, .22); }
.toast__tempo span {
    display: block; height: 3px; background: rgba(255, 255, 255, .85);
    transform-origin: left; animation: toast-tempo linear forwards;
}
@keyframes toast-tempo { from { transform: scaleX(1); } to { transform: scaleX(0); } }

.toast--sucesso { background: #2e7d32; }
.toast--atencao { background: #a96400; }
.toast--erro    { background: #b33a3a; }
.toast--info    { background: #0a083d; }
.toast--info .toast__rotulo,
.toast--info .toast__fechar { color: #a7abcd; }

@media (prefers-reduced-motion: reduce) {
    .toast { transition: opacity .18s ease; transform: none; }
    .toast.show { transform: none; }
    .toast__tempo span { animation: none; }
}

/* ── Card de KPI ───────────────────────────────────────────────────────────
   Guia seção 07: faixa superior de 3px em navy, número em 28px/700. */
.card-kpi {
    background: #fff; border: 1px solid #e2e5ea; border-top: 3px solid #0a083d;
    padding: 14px 16px; display: flex; flex-direction: column; gap: 6px;
}
.card-kpi .rotulo {
    font-size: calc(10px * var(--escala-fonte, 1)); letter-spacing: .12em; text-transform: uppercase;
    color: #6b7280; font-weight: 600;
}
.card-kpi .numero { font-size: calc(28px * var(--escala-fonte, 1)); font-weight: 700; line-height: 1; color: #0a083d; }
.card-kpi .apoio { font-size: calc(11px * var(--escala-fonte, 1)); color: #6b7280; }

/* Indicador que pede ação: mesma geometria, trio de erro do guia (seção 02). */
.card-kpi--alerta { border-top-color: #b33a3a; }
.card-kpi--alerta .numero { color: #b33a3a; }