/* Folha base do painel — tokens + componentes de página (DE-001, docs/05-design).
   Vive em /static (e não embutida no template) porque a CSP do painel não
   permite mais script inline; manter CSS e JS no mesmo lugar deixa o base.html
   com o que ele é de fato: a moldura da página.

   São TRÊS folhas, para nenhuma passar do teto de 300 linhas da casa:
   `painel.css` (tokens + página), `moldura.css` (barra e trilha da V3) e
   `tabela.css` (a lista de ocorrências da V1). Os tokens vivem só aqui — as
   outras duas folhas não têm hex nenhum solto.

   Verde folha e verde claro são a MARCA; estados de ocorrência nunca são
   verdes, para que "verde" signifique sempre navegação/marca e nunca "este dado
   está bem". Com a MOLDURA em verde folha (decisão do PO), a ação primária
   escurece um tom (`--cor-acao` = `--cor-marca-800`) para a hierarquia
   "moldura → ação" continuar existindo. */
:root {
  --cor-marca-700: #2F6B2F; --cor-marca-800: #265726; --cor-marca-900: #1C3A1C;
  --cor-marca-claro-200: #A8D5A2; --cor-marca-claro-100: #DFF0DB; --cor-marca-claro-50: #EDF6EA;
  --cor-texto: #1F2A24; --cor-texto-suave: #55605A; --cor-texto-desabilitado: #8A948C;
  --cor-borda: #D3DCD3; --cor-borda-input: #78877C; --cor-superficie: #FFFFFF;
  --cor-fundo: #F4F7F3; --cor-zebra: #FAF9F5; --cor-fundo-desabilitado: #EEF1EE;
  --cor-estado-pendente-texto: #7A5800;    --cor-estado-pendente-fundo: #FCF1D2;
  --cor-estado-revisao-texto: #1D4F86;     --cor-estado-revisao-fundo: #E4EDF8;
  --cor-estado-confirmada-texto: #5B3E96;  --cor-estado-confirmada-fundo: #EFEAF9;
  --cor-estado-aguardando-texto: #47546A;  --cor-estado-aguardando-fundo: #E9EDF3;
  --cor-estado-recusada-texto: #A02121;    --cor-estado-recusada-fundo: #FBE5E5;
  --cor-erro-600: #B3261E; --cor-erro-texto: #8F1D1D; --cor-erro-fundo: #FBE5E5;
  --cor-aviso-texto: #7A5800; --cor-aviso-fundo: #FCF1D2;
  --cor-acao-erp-700: #1D4F86; --cor-foco: #1A5FB4;
  /* Moldura da V3 em verde folha (decisão do PO). O anel de foco azul sobre ela
     dá 1,02:1 — invisível: dentro da moldura o foco é BRANCO (6,43:1). */
  --cor-moldura: var(--cor-marca-700); --cor-moldura-hover: var(--cor-marca-900);
  --cor-moldura-texto: var(--cor-marca-claro-100); --cor-foco-claro: #FFFFFF;
  /* Ação primária um tom abaixo da moldura, para "verde de ação" continuar
     distinguível do "verde de marca" (branco sobre ela: 8,49:1). */
  --cor-acao: var(--cor-marca-800); --cor-acao-hover: var(--cor-marca-900);
  --cor-branco: #FFFFFF; --cor-superficie-2: #E7EBE7;
  --cor-cabecalho-fundo: #EEF3EF; --cor-cabecalho-texto: #40514A;
  --cor-cabecalho-borda: #E0E7E1; --cor-linha-hover: #EEF4EF;
  --cor-detalhe-fundo: #F4F8F4; --cor-recusar-borda: #F0D5D5; --cor-recusar-fundo: #FDF6F6;
  --fonte: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --tipo-titulo: 20px; --tipo-subtitulo: 16px; --tipo-destaque: 15px; --tipo-corpo: 14px;
  --tipo-corpo-s: 13px; --tipo-caption: 12px; --tipo-peso-medio: 600; --altura-linha: 1.45;
  --esp-1: 4px; --esp-2: 8px; --esp-3: 12px; --esp-4: 16px;
  --esp-5: 20px; --esp-6: 24px; --esp-8: 32px;
  --raio-s: 6px; --raio-m: 8px; --raio-l: 12px; --raio-pill: 999px;
  --sombra-1: 0 1px 4px rgba(0,0,0,.08); --sombra-2: 0 4px 14px rgba(0,0,0,.13);
  --sombra-modal: 0 6px 30px rgba(0,0,0,.5);
  --transicao-hover: 120ms ease; --transicao-troca: 150ms ease; --realce-atualizado: 1.5s;
  --trilha-larga: 220px; --trilha-estreita: 56px;
}
* { box-sizing: border-box; }
body { font-family: var(--fonte); margin: 0;
       background: var(--cor-fundo); color: var(--cor-texto); }
/* Foco visível universal (DE §5.4): nenhum controle some do teclado. */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--cor-foco); outline-offset: 2px;
}

/* Container acompanha a largura da tela; a tabela cabe inteira quando há
   espaço e só rola quando a tela é estreita (responsivo). */
.menu-topo { display: flex; align-items: center; justify-content: space-between;
             gap: var(--esp-3); max-width: 900px; }
.menu-titulo { margin: var(--esp-1) 0 18px; font-size: var(--tipo-titulo); }
.menu-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
             gap: var(--esp-4); max-width: 900px; }
/* O card é um link e o badge é OUTRO link (para as pendências): âncora dentro
   de âncora é HTML inválido, então o badge fica ao lado, sobreposto ao card. */
.cg-slot { position: relative; display: flex; }
.cartao-grupo { position: relative; display: flex; flex-direction: column; gap: 6px;
                text-decoration: none; background: var(--cor-superficie);
                border-radius: var(--raio-l); padding: var(--esp-5) 22px; width: 100%;
                box-shadow: var(--sombra-1); border-left: 4px solid var(--cor-marca-700);
                color: var(--cor-texto);
                transition: box-shadow var(--transicao-hover), transform var(--transicao-hover); }
.cg-badge { position: absolute; top: var(--esp-3); right: 14px; z-index: 1;
            min-width: 22px; height: 22px; padding: 0 7px; border-radius: var(--raio-pill);
            background: var(--cor-erro-600); color: var(--cor-branco); text-decoration: none;
            font-size: var(--tipo-caption); font-weight: 700; display: inline-flex;
            align-items: center; justify-content: center; box-shadow: 0 1px 3px rgba(0,0,0,.25); }
/* `display: inline-flex` acima venceria o `display:none` do agente do usuário:
   sem esta regra, `hidden` não esconderia o badge (e "0" apareceria). */
.cg-badge[hidden] { display: none; }
.cartao-grupo:hover { box-shadow: var(--sombra-2); transform: translateY(-2px); }
.cartao-grupo.cartao-admin { border-left-color: var(--cor-acao-erp-700); }
.cg-nome { font-size: 17px; font-weight: 700; }
.cg-nivel { font-size: var(--tipo-corpo-s); color: var(--cor-texto-suave); }
.cg-abrir { font-size: var(--tipo-corpo-s); color: var(--cor-marca-700);
            font-weight: var(--tipo-peso-medio); margin-top: var(--esp-1); }

.th-vazio { min-width: 90px; }
.aviso { padding: 10px 14px; border-radius: var(--raio-m); margin-bottom: var(--esp-4);
         font-size: var(--tipo-corpo); }
.aviso.ok { background: var(--cor-marca-claro-100); color: var(--cor-marca-900); }
.aviso.erro { background: var(--cor-erro-fundo); color: var(--cor-erro-texto); }

/* C15 — banner global de feedback (falhas de ação htmx: 401/403/409/500/rede)
   e o AVISO de falha parcial do gesto combinado (UX-002 §2.9), que não é erro:
   metade da decisão foi gravada, e o texto diz isso. */
#banner-global { position: fixed; top: var(--esp-3); left: var(--esp-4); right: var(--esp-4);
                 z-index: 200; display: flex; flex-direction: column; align-items: center;
                 gap: var(--esp-2); pointer-events: none; }
.banner { pointer-events: auto; width: 100%; max-width: 640px; display: flex;
          gap: var(--esp-3); align-items: baseline; padding: 10px 14px;
          border-radius: var(--raio-m); font-size: var(--tipo-corpo);
          line-height: var(--altura-linha); box-shadow: var(--sombra-2); }
.banner-erro { background: var(--cor-erro-fundo); color: var(--cor-erro-texto); }
.banner-aviso { background: var(--cor-aviso-fundo); color: var(--cor-aviso-texto); }
.banner-ok { background: var(--cor-marca-claro-100); color: var(--cor-marca-900); }
.banner a { color: inherit; font-weight: var(--tipo-peso-medio); }
.banner-x { margin-left: auto; background: none; border: 0; color: inherit;
            font-size: var(--tipo-subtitulo); line-height: 1; padding: 0 var(--esp-1);
            cursor: pointer; }

/* C16 — indicador de carregamento: acompanha o rótulo, nunca o substitui. */
.htmx-indicator { display: none; width: 12px; height: 12px; margin-left: 6px;
                  border: 2px solid currentColor; border-right-color: transparent;
                  border-radius: 50%; vertical-align: -2px; animation: girar .7s linear infinite; }
.htmx-request .htmx-indicator, .htmx-request.htmx-indicator { display: inline-block; }
@keyframes girar { to { transform: rotate(360deg); } }

.cartao { background: var(--cor-superficie); border-radius: var(--raio-l);
          padding: var(--esp-5) 22px; margin-bottom: 22px;
          box-shadow: var(--sombra-1); max-width: 1100px; }
.cartao h3 { margin: 0 0 var(--esp-4); font-size: var(--tipo-subtitulo); }
.form-usuario .campos { display: flex; gap: 18px; flex-wrap: wrap; }
.form-usuario label { font-size: var(--tipo-corpo-s); color: var(--cor-texto-suave);
                      display: flex; flex-direction: column; gap: var(--esp-1); }
.form-usuario input, .form-usuario select { width: 240px; max-width: 100%; margin: 0; }
.acessos { border: 1px solid var(--cor-borda); border-radius: var(--raio-m);
           padding: var(--esp-3) var(--esp-4); margin: 18px 0;
           display: flex; gap: var(--esp-5); flex-wrap: wrap; }
.acessos legend { font-size: var(--tipo-corpo-s); color: var(--cor-texto-suave); padding: 0 6px; }
.check-admin { flex-direction: row !important; align-items: center; gap: var(--esp-2);
               color: var(--cor-texto); margin-bottom: var(--esp-4); }
.check-admin input { width: auto; margin: 0; }
.badge-admin { background: var(--cor-estado-revisao-fundo); color: var(--cor-estado-revisao-texto);
               padding: 2px 9px; border-radius: var(--raio-pill);
               font-size: var(--tipo-caption); font-weight: var(--tipo-peso-medio); }
.form-usuario .hint, .hint { font-size: var(--tipo-caption); color: var(--cor-texto-suave); }
.legenda, .rodape { max-width: 900px; }
.legenda { font-size: var(--tipo-corpo-s); color: var(--cor-texto-suave);
           margin: 0 0 var(--esp-4); line-height: 1.6; }
.legenda b { color: var(--cor-texto); }
.rodape { font-size: var(--tipo-caption); color: var(--cor-texto-suave); margin-top: 14px; }

.filtros { display: flex; gap: 10px; align-items: flex-end; margin-bottom: var(--esp-2);
           flex-wrap: wrap; }
.filtros input { margin: 0; }
.filtros label { display: flex; flex-direction: column; gap: var(--esp-1);
                 font-size: var(--tipo-caption); color: var(--cor-texto-suave); }
.filtros input[type="date"] { width: auto; margin: 0; }
.filtros input[type="text"] { width: 320px; max-width: 100%; }
.filtros .limpar { font-size: var(--tipo-corpo-s); color: var(--cor-marca-700); }
/* RF-TA-11: o recorte por movimento é mais um campo do MESMO formulário de
   filtros (C05) — submeter leva todos juntos, e nenhum apaga o outro. */
.filtros select { margin: 0; padding: 6px; border: 1px solid var(--cor-borda-input);
                  border-radius: var(--raio-s); font-size: var(--tipo-corpo);
                  background: var(--cor-superficie); color: var(--cor-texto); }
/* C05 — chip de contexto: nunca uma lista sem dizer que recorte ela é. */
.chip-contexto { display: inline-flex; align-items: center; gap: var(--esp-2);
                 background: var(--cor-marca-claro-100); color: var(--cor-marca-900);
                 border-radius: var(--raio-pill); padding: var(--esp-1) var(--esp-3);
                 font-size: var(--tipo-corpo-s); margin-bottom: var(--esp-4); }
.chip-contexto a { color: inherit; }

/* C01 — botão. O primário é `--cor-acao` (um tom abaixo da moldura). */
button { cursor: pointer; padding: 6px var(--esp-3); border: 0; border-radius: var(--raio-s);
         background: var(--cor-acao); color: var(--cor-branco); font-size: var(--tipo-corpo-s);
         white-space: nowrap; transition: background var(--transicao-hover); }
button:hover { background: var(--cor-acao-hover); }
button.erp { background: var(--cor-acao-erp-700); }
button.secundario { background: var(--cor-superficie-2); color: var(--cor-texto); }
button.perigo { background: var(--cor-erro-600); }
button:disabled, button:disabled:hover { background: var(--cor-fundo-desabilitado);
         color: var(--cor-texto-desabilitado); cursor: not-allowed; }

/* Erro do campo: aparece ao lado do campo que falhou, com a mesma regra do servidor. */
.erro-campo:empty { display: none; }
.erro-campo { display: block; color: var(--cor-erro-600); font-size: var(--tipo-caption);
              margin-top: var(--esp-1); }
[aria-invalid="true"] { border-color: var(--cor-erro-600) !important; }

/* Miniatura da foto no relatório + lightbox (clique ou Enter para ampliar). */
.thumb { float: left; width: 46px; height: 46px; object-fit: cover;
         border-radius: var(--raio-s); margin: 0 var(--esp-2) 2px 0; cursor: zoom-in;
         border: 1px solid var(--cor-borda-input); background: var(--cor-fundo); }
#lightbox { display: none; position: fixed; inset: 0; z-index: 100; cursor: zoom-out;
            background: rgba(0,0,0,.82); align-items: center; justify-content: center; }
#lightbox.aberto { display: flex; }
#lightbox img { max-width: 92vw; max-height: 92vh; border-radius: var(--raio-m);
                box-shadow: var(--sombra-modal); }
.lb-fechar { position: absolute; top: var(--esp-4); right: var(--esp-4); }

.login-box { max-width: 340px; margin: 70px auto; background: var(--cor-superficie);
             padding: 28px; border-radius: var(--raio-l); box-shadow: 0 2px 10px rgba(0,0,0,.1); }
.login-box h1 { margin-top: 0; font-size: var(--tipo-titulo); }
label { font-size: var(--tipo-corpo-s); color: var(--cor-texto-suave); }
input { width: 100%; padding: 9px; margin: 6px 0 var(--esp-4);
        border: 1px solid var(--cor-borda-input); border-radius: var(--raio-s);
        font-size: var(--tipo-corpo); }
select:disabled, input:disabled { background: var(--cor-fundo-desabilitado);
        color: var(--cor-texto-desabilitado); cursor: not-allowed; }
.erro { color: var(--cor-erro-600); margin: 6px 0; font-size: var(--tipo-corpo); }