/* ============================================================================
   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: 11px; 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: 11px; 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: 10px; 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: 10px; 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: 11.5px; }
.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: 11px; }
.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: 11.5px; font-weight: 600; color: #23262e; }
.celula-dupla .secundario { font-size: 10.5px; 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: 11px; 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: 11px; flex-shrink: 0;
}
.avatar.md { width: 34px; height: 34px; font-size: 12px; }
.avatar.lg { width: 44px; height: 44px; font-size: 15px; }
.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: navy com fio de assinatura à esquerda, canto inferior
   direito a 26px, entrada de 180ms. */
.toast {
    position: fixed; bottom: 26px; right: 26px;
    background: #0a083d; color: #fff;
    border-left: 3px solid #d30000; border-radius: 0;
    padding: 13px 20px; font-size: 12px; font-weight: 500;
    display: flex; align-items: center; gap: 9px;
    transform: translateY(12px); opacity: 0; pointer-events: none;
    transition: opacity .18s ease, transform .18s ease; z-index: 70;
}
.toast.show { transform: translateY(0); opacity: 1; }
.toast.toast--erro { border-left-color: #b33a3a; }

@media (prefers-reduced-motion: reduce) {
    .toast { transition: opacity .18s ease; transform: 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: 10px; letter-spacing: .12em; text-transform: uppercase;
    color: #6b7280; font-weight: 600;
}
.card-kpi .numero { font-size: 28px; font-weight: 700; line-height: 1; color: #0a083d; }
.card-kpi .apoio { font-size: 11px; 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; }