/* ==========================================================
   SERF - GLOBAL.CSS
   Padrões visuais compartilhados por todo o sistema.
   Centraliza cores, tipografia e estilos globais para manter
   a identidade visual consistente entre todas as páginas.

   TEMAS
   O tema é aplicado pelo js/tema.js no atributo data-theme do
   <html> ("light" | "dark"). Os componentes usam APENAS estas
   variáveis; o modo escuro redefine os valores, não as regras.
   ========================================================== */

:root {
    color-scheme: light;

    /* Marca */
    --serf-marinho: #082B4C;          /* fundo da barra lateral e botões ativos (fixo nos dois temas) */
    --serf-azul-principal: #082B4C;   /* títulos e texto de destaque */
    --serf-azul-interacao: #1268B3;   /* links e foco */
    --serf-laranja: #F47A20;          /* marca: ícones, bordas, destaques (não para texto) */
    --serf-laranja-texto: #AD5309;    /* texto laranja: contraste AA (≥4,5) sobre branco e cinzas claros */
    --serf-laranja-acao: #B4570B;     /* fundo de botão com texto branco (4,9:1) */
    --serf-laranja-acao-hover: #974808;
    --serf-verde-texto: #15803D;

    /* Superfícies */
    --serf-fundo: #F7F9FC;            /* plano da página */
    --serf-branco: #FFFFFF;           /* (legado) = superfície dos cartões */
    --serf-superficie: #FFFFFF;       /* cartões, painéis, barra superior */
    --serf-superficie-2: #F8FAFC;     /* cabeçalhos internos, linhas em hover, chips */
    --serf-superficie-3: #EEF2F6;     /* trilhos, seletores segmentados */
    --serf-superficie-4: #E5EBF2;     /* contadores e preenchimentos neutros */

    /* Bordas */
    --serf-borda: #E8EEF4;
    --serf-borda-suave: #EEF2F6;
    --serf-borda-media: #DDE5ED;
    --serf-borda-forte: #CBD5E1;

    /* Texto */
    --serf-texto-principal: #172536;
    --serf-texto-secundario: #526476; /* ≥5,4:1 em todas as superfícies */
    --serf-texto-mudo: #5C6E80;       /* ≥4,6:1 (WCAG AA) */

    /* Tons de status (fundos suaves de selos) */
    --serf-tint-verde: #DCFCE7;
    --serf-tint-vermelho: #FCECEC;
    --serf-tint-laranja: #FFF8F1;
    --serf-tint-azul: #EDF5FC;

    --serf-sombra-cartao: 0 2px 12px rgba(8, 43, 76, 0.04);
}

:root[data-theme="dark"] {
    color-scheme: dark;

    --serf-azul-principal: #DCE8F6;
    --serf-azul-interacao: #5AA6F0;

    --serf-fundo: #0B1420;
    --serf-branco: #121D2B;
    --serf-superficie: #121D2B;
    --serf-superficie-2: #162334;
    --serf-superficie-3: #1B2A3D;
    --serf-superficie-4: #243449;

    --serf-borda: #22324A;
    --serf-borda-suave: #1C2B3F;
    --serf-borda-media: #2A3B52;
    --serf-borda-forte: #3A4D66;

    --serf-texto-principal: #E6EDF5;
    --serf-texto-secundario: #A3B3C6;
    --serf-texto-mudo: #93A5BA;

    --serf-laranja-texto: #F7934A;
    --serf-laranja-acao: #B4570B;
    --serf-laranja-acao-hover: #C9610D;
    --serf-verde-texto: #4ADE80;

    --serf-tint-verde: rgba(12, 163, 12, 0.16);
    --serf-tint-vermelho: rgba(220, 38, 38, 0.18);
    --serf-tint-laranja: rgba(244, 122, 32, 0.14);
    --serf-tint-azul: rgba(57, 135, 229, 0.16);

    --serf-sombra-cartao: 0 2px 14px rgba(0, 0, 0, 0.35);
}

/* ==========================================================
   RESET GLOBAL
   Remove espaçamentos padrão do navegador e padroniza a base.
   ========================================================== */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Arial, Helvetica, sans-serif;
    background-color: var(--serf-fundo);
    color: var(--serf-texto-principal);
}

a {
    color: inherit;
}


/* ==========================================================
   AVISO DE INATIVIDADE (auth-check.js)
   Faixa fixa, por cima de tudo, sem fechar diálogos abertos.
   ========================================================== */

.serf-aviso-inatividade {
    position: fixed;
    left: 50%;
    bottom: 20px;
    z-index: 20000;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 14px;
    width: min(560px, calc(100% - 32px));
    padding: 14px 16px;
    border-radius: 10px;
    background: var(--serf-marinho);
    color: #FFFFFF;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.3);
    transform: translateX(-50%);
}

.serf-aviso-inatividade strong {
    flex-basis: 100%;
    font-size: 15px;
}

.serf-aviso-inatividade span {
    flex: 1 1 260px;
    font-size: 13px;
    line-height: 1.4;
}

.serf-aviso-inatividade button {
    min-height: 40px;
    padding: 0 16px;
    border: 0;
    border-radius: 8px;
    background: var(--serf-laranja-acao);
    color: #FFFFFF;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

.serf-aviso-inatividade button:hover { background: var(--serf-laranja-acao-hover); }
.serf-aviso-inatividade button:focus-visible { outline: 2px solid #FFFFFF; outline-offset: 2px; }


/* ==========================================================
   APOIO À CSP (sem estilo inline)
   ========================================================== */

/* Começa escondido; o JS mostra com element.style.display (CSSOM, que a
   CSP permite) e o estilo do elemento vence a classe */
.oculto-inicial.oculto-inicial { display: none; }   /* classe dupla: vence .modal-serf e .btn-primary */

/* Cabeçalho com ações (Catálogo) */
.acoes-cabecalho {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

.btn-compacto {
    display: inline-flex;
    align-items: center;
    padding: 0 14px;
    font-size: 11px;
    text-decoration: none;
}