/* ============================================================
   Serraf Integração — base compartilhada
   Carregada por TODOS os layouts (público, acesso, painel, portal).
   Aqui ficam tokens, tipografia, botões e primitivos genéricos.
   A landing pública tem o seu próprio arquivo: landing.css.
   Paleta e contraste conforme docs/09-interface.md.
   ============================================================ */

:root {
    /* Marca — cores extraídas do logo Serraf Integração */
    --azul-950: #001943;   /* marinho profundo do emblema */
    --azul-900: #012C5A;
    --azul-800: #023D7C;   /* primária: botões e títulos */
    --azul-600: #1B6FC4;   /* links e texto azul sobre branco */
    --azul-500: #3A8FDE;
    --azul-400: #18A9FE;   /* ciano vivo do "INTEGRAÇÃO" — decorativo sobre claro,
                              legível como texto sobre --azul-950 (6,7:1) */
    --azul-300: #6CC4FF;
    --azul-100: #E3F0FC;
    --azul-50:  #F1F7FD;

    /* Neutros */
    --preto:     #111827;
    --cinza-700: #374151;
    --cinza-500: #6B7280;
    --cinza-300: #CBD2DC;
    --cinza-200: #E5E7EB;
    --cinza-50:  #F7F9FC;
    --branco:    #FFFFFF;

    /* Estados */
    --sucesso: #1B7F4C;
    --erro:    #C0392B;
    --aviso:   #B26A00;

    /* Tipografia — pilha do sistema, sem fonte externa (spec 09 / CSP).
       Títulos usam a variante "Display" quando o sistema oferece. */
    --fonte:        "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Roboto, Arial, sans-serif;
    --fonte-titulo: "Segoe UI Variable Display", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Roboto, Arial, sans-serif;
    --fonte-mono:   ui-monospace, "Cascadia Mono", "SF Mono", Consolas, Menlo, monospace;

    --raio: 12px;
    --raio-p: 8px;
    --sombra: 0 1px 3px rgba(2, 61, 124, .08), 0 8px 24px rgba(2, 61, 124, .06);
    --sombra-alta: 0 12px 40px rgba(0, 25, 67, .18);
    --largura: 1160px;

    --transicao: 160ms cubic-bezier(.2, .7, .3, 1);

    /* ---- Tokens semânticos (design system do painel e do portal) ----
       Componentes leem estes; os primitivos acima só existem para alimentá-los. */
    --cor-marca:         var(--azul-800);
    --cor-marca-escura:  var(--azul-950);
    --cor-acento:        var(--azul-400);   /* ciano: sinal, nunca fundo de texto branco */
    --cor-acento-suave:  rgba(24, 169, 254, .14);
    --cor-texto:         #0F1B33;
    --cor-texto-suave:   #5B6B85;
    --cor-texto-fraco:   #8A97AD;
    --cor-borda:         #E3E8F0;
    --cor-borda-forte:   #CBD4E1;
    --cor-fundo:         #F3F6FB;           /* fundo da aplicação, levemente azulado */
    --cor-superficie:    #FFFFFF;
    --cor-superficie-2:  #F8FAFD;           /* cabeçalho de tabela, linhas alternadas */
    --cor-foco:          var(--azul-400);

    --cor-rh:  var(--azul-800);
    --cor-dp:  var(--azul-400);
    --cor-col: #F2B33D;

    --sucesso-fundo: #E6F6EC;  --sucesso-texto: #135E37;  --sucesso-borda: #B7E2C7;
    --erro-fundo:    #FDECEA;  --erro-texto:    #8B2A1F;  --erro-borda:    #F3BBB4;
    --aviso-fundo:   #FFF4DF;  --aviso-texto:   #7A4A00;  --aviso-borda:   #F7D89A;
    --info-fundo:    var(--azul-100); --info-texto: var(--azul-900); --info-borda: #B9D8F5;

    --raio-sm: 6px;
    --raio-md: 10px;
    --raio-lg: 14px;

    --espaco-1: 4px;  --espaco-2: 8px;  --espaco-3: 12px; --espaco-4: 16px;
    --espaco-5: 24px; --espaco-6: 32px; --espaco-7: 48px; --espaco-8: 64px;

    --sombra-1: 0 1px 2px rgba(15, 27, 51, .06);
    --sombra-2: 0 2px 6px rgba(15, 27, 51, .06), 0 10px 24px rgba(15, 27, 51, .05);
    --sombra-3: 0 12px 40px rgba(0, 25, 67, .18);

    --altura-campo: 46px;
    --largura-lateral: 250px;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    font-family: var(--fonte);
    font-size: 16px;
    line-height: 1.6;
    color: var(--cinza-700);
    background: var(--branco);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

h1, h2, h3 {
    font-family: var(--fonte-titulo);
    color: var(--azul-800);
    line-height: 1.2;
    margin: 0 0 .5em;
    font-weight: 800;
    letter-spacing: -.015em;
}
h1 { font-size: clamp(1.75rem, 4.5vw, 2.75rem); letter-spacing: -.025em; }
h2 { font-size: clamp(1.4rem, 3vw, 2rem); }
h3 { font-size: 1.125rem; font-weight: 700; letter-spacing: -.005em; }
p  { margin: 0 0 1rem; }

a { color: var(--azul-600); }

img { max-width: 100%; height: auto; }

code, kbd, pre { font-family: var(--fonte-mono); }

.container {
    width: 100%;
    max-width: var(--largura);
    margin: 0 auto;
    padding: 0 20px;
}

/* Acessibilidade -------------------------------------------- */

.pular {
    position: absolute;
    left: -9999px;
    top: 0;
    background: var(--azul-800);
    color: var(--branco);
    padding: 12px 20px;
    z-index: 100;
}
.pular:focus { left: 0; }

:focus-visible {
    outline: 3px solid var(--azul-400);
    outline-offset: 2px;
}

/* Botões ----------------------------------------------------- */

.botao {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 48px;
    padding: 0 24px;
    border-radius: var(--raio-p);
    font-family: var(--fonte);
    font-weight: 600;
    font-size: .975rem;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    border: 2px solid transparent;
    transition: background-color var(--transicao), color var(--transicao),
                border-color var(--transicao), box-shadow var(--transicao),
                transform var(--transicao);
}
.botao:active { transform: translateY(1px); }
.botao svg { flex: 0 0 auto; }

.botao--primario {
    background: var(--azul-800);
    color: var(--branco);
    box-shadow: 0 1px 2px rgba(0, 25, 67, .2);
}
.botao--primario:hover { background: var(--azul-900); box-shadow: 0 4px 14px rgba(2, 61, 124, .28); }

.botao--secundario {
    background: transparent;
    color: var(--azul-800);
    border-color: var(--azul-800);
}
.botao--secundario:hover { background: var(--azul-100); }

.botao--claro {
    background: var(--branco);
    color: var(--azul-800);
}
.botao--claro:hover { background: var(--azul-100); }

/* Ciano da marca: destaque máximo sobre fundo marinho. Texto marinho
   sobre ciano tem 7,6:1 — o inverso (branco sobre ciano) não passaria. */
.botao--ciano {
    background: var(--azul-400);
    color: var(--azul-950);
    box-shadow: 0 1px 2px rgba(0, 25, 67, .25);
}
.botao--ciano:hover { background: var(--azul-300); box-shadow: 0 6px 20px rgba(24, 169, 254, .35); }

/* Contorno claro para uso sobre fundo escuro */
.botao--contorno-claro {
    background: transparent;
    color: var(--branco);
    border-color: rgba(255, 255, 255, .45);
}
.botao--contorno-claro:hover { border-color: var(--branco); background: rgba(255, 255, 255, .08); }

/* Ação destrutiva. Contorno, e não preenchido: a cor alerta sem convidar o clique. */
.botao--perigo {
    background: transparent;
    color: var(--erro);
    border-color: var(--erro);
}
.botao--perigo:hover { background: var(--erro); color: var(--branco); }

.botao--grande  { min-height: 56px; padding: 0 30px; font-size: 1.05rem; border-radius: 10px; }
.botao--pequeno { min-height: 36px; padding: 0 14px; font-size: .85rem; }

/* Utilitários ------------------------------------------------ */

.u-oculto {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* Grades ----------------------------------------------------- */

.grade { display: grid; gap: 20px; }
.grade--2 { grid-template-columns: 1fr; }
.grade--3 { grid-template-columns: 1fr; }

/* Cartões ---------------------------------------------------- */

.cartao {
    background: var(--branco);
    border: 1px solid var(--cinza-200);
    border-radius: var(--raio);
    padding: 26px;
    box-shadow: var(--sombra);
}

.cartao p:last-child, .cartao ul:last-child { margin-bottom: 0; }

.cartao__titulo {
    padding-bottom: 12px;
    margin-bottom: 14px;
    border-bottom: 2px solid var(--azul-100);
}

.lista { margin: 0; padding-left: 0; list-style: none; }

.lista li {
    position: relative;
    padding-left: 26px;
    margin-bottom: 10px;
}

.lista li::before {
    content: "";
    position: absolute;
    left: 0;
    top: .55em;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--azul-500);
}

/* Seções (padding padrão herdado por painel e portal) --------- */

section { padding: 64px 0; }

/* Erro ------------------------------------------------------- */

.erro { padding: 96px 0; }
.erro__interno { text-align: center; max-width: 520px; }

.erro__codigo {
    font-family: var(--fonte-titulo);
    font-size: 5rem;
    font-weight: 800;
    color: var(--azul-400);
    line-height: 1;
    letter-spacing: -.04em;
    margin: 0 0 .2em;
}

/* Responsivo ------------------------------------------------- */

@media (min-width: 720px) {
    .grade--2 { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 960px) {
    .grade--3 { grid-template-columns: repeat(3, 1fr); }
    section { padding: 80px 0; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    * { transition: none !important; animation: none !important; }
    .botao:active { transform: none; }
}