/* ==========================================================================
   Tá na Mão — tema
   ==========================================================================

   Camada única de tokens e primitivas, consumida pelo site (`site.css`) e pelo
   painel (`adm.css`). Antes havia duas paletas: a do site, aqui, e a do painel,
   espalhada por nove arquivos em `/adm/assets/css` que se sobrescreviam. Duas
   paletas divergem — foi o que aconteceu: o azul do botão do painel não era o
   azul do site. Com um arquivo, mudar a marca é mudar um bloco.

   ---------------------------------------------------------------- os 3 temas

   Claro, escuro e sistema. "Sistema" não é um terceiro conjunto de cores: é a
   ausência de escolha, e aí vale o que o aparelho diz. Isso exige que cada cor
   seja declarada em três lugares, nesta ordem:

     1. `:root`                              → claro, o padrão
     2. `@media (prefers-color-scheme: dark)` → escuro, quando é o sistema que
        com a guarda `:not([data-tema="claro"])`   manda e ninguém pediu claro
     3. `:root[data-tema="escuro"]`          → escuro pedido explicitamente

   A guarda do item 2 é o que faz "claro" vencer o sistema escuro. Sem ela, quem
   escolhesse claro num celular no escuro continuaria no escuro — e concluiria,
   com razão, que o botão não funciona.

   O item 3 não é redundante com o item 2: ele atende quem está num aparelho em
   modo claro e pediu escuro, caso em que a media query nunca casa.

   ------------------------------------------------------------------- escalas

   As cores de texto e borda saem de uma escala neutra fria (slate), e não de
   cinzas puros: cinza puro ao lado do índigo da marca parece sujo. A escala é
   invertida no escuro em vez de ser substituída, de modo que contraste e
   hierarquia se mantenham sem uma segunda paleta para revisar.
   ========================================================================== */

:root {
    color-scheme: light;

    /* ------------------------------------------------------------- marca -- */
    --primaria: #4F46E5;
    --primaria-forte: #4338CA;
    --primaria-fraca: #EEF2FF;
    --primaria-contraste: #FFFFFF;

    --secundaria: #06B6D4;
    --acento: #EC4899;

    --gradiente: linear-gradient(135deg, #4F46E5 0%, #06B6D4 100%);
    --gradiente-suave: linear-gradient(135deg, #EEF2FF 0%, #ECFEFF 100%);

    /* --------------------------------------------------------- superfícies -- */
    /* Três níveis, e não dois: o cartão precisa se destacar do fundo, e o que
       está dentro do cartão (um campo, um trecho de código) precisa se destacar
       do cartão. Com dois níveis o terceiro elemento vira borda sobre borda. */
    --fundo: #F7F8FC;
    --superficie: #FFFFFF;
    --superficie-2: #F1F3F9;
    --superficie-inversa: #0F172A;

    /* ------------------------------------------------------------- texto -- */
    --texto-1: #121826;   /* título e corpo */
    --texto-2: #5A6782;   /* apoio, legenda */
    --texto-3: #8B97AE;   /* placeholder, desabilitado */
    --texto-inverso: #F8FAFC;

    /* ------------------------------------------------------------ bordas -- */
    --borda: #E4E7F0;
    --borda-forte: #CBD2E1;

    /* ------------------------------------------------------------ estado -- */
    --sucesso: #0D9F6E;
    --sucesso-fraca: #E6F7F1;
    --alerta: #D97708;
    --alerta-fraca: #FEF6E7;
    --erro: #DC2626;
    --erro-fraca: #FEECEC;
    --info: #0284C7;
    --info-fraca: #E6F4FB;

    /* ------------------------------------------------------------ formas -- */
    --raio-p: 8px;
    --raio-m: 12px;
    --raio-g: 18px;
    --raio-xg: 26px;
    --raio-pilula: 999px;

    /* ---------------------------------------------------------- elevação -- */
    /* Duas sombras somadas por nível: uma curta e opaca, que define o contorno,
       e uma longa e difusa, que dá a distância. Uma sombra só precisa escolher
       entre parecer colada ou parecer borrada. */
    --sombra-1: 0 1px 2px rgb(16 24 40 / 5%), 0 1px 3px rgb(16 24 40 / 6%);
    --sombra-2: 0 2px 4px rgb(16 24 40 / 5%), 0 8px 20px rgb(16 24 40 / 8%);
    --sombra-3: 0 4px 8px rgb(16 24 40 / 6%), 0 18px 40px rgb(16 24 40 / 12%);
    --sombra-foco: 0 0 0 3px color-mix(in srgb, var(--primaria) 22%, transparent);

    /* -------------------------------------------------------- tipografia -- */
    --fonte: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --fonte-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

    --corpo: 1rem;
    --t-xs: 0.75rem;
    --t-sm: 0.8125rem;
    --t-md: 0.9375rem;
    --t-lg: 1.125rem;
    --t-xl: 1.375rem;
    --t-2xl: 1.75rem;
    --t-3xl: 2.25rem;
    --t-4xl: 3rem;

    /* --------------------------------------------------------- espaçamento -- */
    --e-1: 4px;
    --e-2: 8px;
    --e-3: 12px;
    --e-4: 16px;
    --e-5: 24px;
    --e-6: 32px;
    --e-7: 48px;
    --e-8: 64px;
    --e-9: 96px;

    /* ------------------------------------------------------------ layout -- */
    --largura-max: 1180px;
    --largura-texto: 68ch;
    --topo-altura: 68px;
    --nav-altura: 64px;

    /* ---------------------------------------------------------- transição -- */
    --rapida: 120ms cubic-bezier(0.4, 0, 0.2, 1);
    --media: 220ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Escuro por decisão do sistema, só se o usuário não pediu claro. */
@media (prefers-color-scheme: dark) {
    :root:not([data-tema="claro"]) {
        color-scheme: dark;

        --primaria: #818CF8;
        --primaria-forte: #A5B4FC;
        --primaria-fraca: #1E2340;
        --primaria-contraste: #0B1020;

        --secundaria: #22D3EE;
        --acento: #F472B6;

        --gradiente: linear-gradient(135deg, #4F46E5 0%, #0E7490 100%);
        --gradiente-suave: linear-gradient(135deg, #1B2140 0%, #122B33 100%);

        --fundo: #0B1020;
        --superficie: #151B2E;
        --superficie-2: #1E2639;
        --superficie-inversa: #F8FAFC;

        --texto-1: #F2F5FA;
        --texto-2: #A2AFC7;
        --texto-3: #6F7D96;
        --texto-inverso: #121826;

        --borda: #28314A;
        --borda-forte: #3A456380;

        --sucesso: #34D399;
        --sucesso-fraca: #11312A;
        --alerta: #FBBF24;
        --alerta-fraca: #32270D;
        --erro: #F87171;
        --erro-fraca: #3A1517;
        --info: #38BDF8;
        --info-fraca: #10293A;

        --sombra-1: 0 1px 2px rgb(0 0 0 / 40%), 0 1px 3px rgb(0 0 0 / 30%);
        --sombra-2: 0 2px 4px rgb(0 0 0 / 35%), 0 8px 20px rgb(0 0 0 / 45%);
        --sombra-3: 0 4px 8px rgb(0 0 0 / 40%), 0 18px 40px rgb(0 0 0 / 55%);
    }
}

/* Escuro por escolha explícita. Repete o bloco acima porque a media query não
   casa num aparelho em modo claro — e é exatamente nele que esta escolha existe
   para ser respeitada. */
:root[data-tema="escuro"] {
    color-scheme: dark;

    --primaria: #818CF8;
    --primaria-forte: #A5B4FC;
    --primaria-fraca: #1E2340;
    --primaria-contraste: #0B1020;

    --secundaria: #22D3EE;
    --acento: #F472B6;

    --gradiente: linear-gradient(135deg, #4F46E5 0%, #0E7490 100%);
    --gradiente-suave: linear-gradient(135deg, #1B2140 0%, #122B33 100%);

    --fundo: #0B1020;
    --superficie: #151B2E;
    --superficie-2: #1E2639;
    --superficie-inversa: #F8FAFC;

    --texto-1: #F2F5FA;
    --texto-2: #A2AFC7;
    --texto-3: #6F7D96;
    --texto-inverso: #121826;

    --borda: #28314A;
    --borda-forte: #3A4563;

    --sucesso: #34D399;
    --sucesso-fraca: #11312A;
    --alerta: #FBBF24;
    --alerta-fraca: #32270D;
    --erro: #F87171;
    --erro-fraca: #3A1517;
    --info: #38BDF8;
    --info-fraca: #10293A;

    --sombra-1: 0 1px 2px rgb(0 0 0 / 40%), 0 1px 3px rgb(0 0 0 / 30%);
    --sombra-2: 0 2px 4px rgb(0 0 0 / 35%), 0 8px 20px rgb(0 0 0 / 45%);
    --sombra-3: 0 4px 8px rgb(0 0 0 / 40%), 0 18px 40px rgb(0 0 0 / 55%);
}

/* ============================== reset ==================================== */

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

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    /* O topo é fixo: sem isto, um link de âncora deixa o alvo embaixo dele. */
    scroll-padding-top: calc(var(--topo-altura) + var(--e-4));
}

body {
    margin: 0;
    background: var(--fundo);
    color: var(--texto-1);
    font: var(--corpo)/1.6 var(--fonte);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

img,
svg,
video {
    max-width: 100%;
    display: block;
}

img {
    height: auto;
}

a {
    color: inherit;
    text-decoration: none;
}

h1, h2, h3, h4, h5, h6 {
    margin: 0;
    line-height: 1.2;
    letter-spacing: -0.02em;
    font-weight: 700;
}

p {
    margin: 0;
}

ul, ol {
    margin: 0;
    padding: 0;
    list-style: none;
}

button,
input,
select,
textarea {
    font: inherit;
    color: inherit;
}

button {
    cursor: pointer;
}

/* Foco sempre visível. Remover o outline é a forma mais rápida de tornar um
   site inutilizável por teclado — e é o que as nove folhas antigas faziam. */
:focus-visible {
    outline: 2px solid var(--primaria);
    outline-offset: 2px;
    border-radius: var(--raio-p);
}

::selection {
    background: color-mix(in srgb, var(--primaria) 28%, transparent);
}

/* ============================ utilidades ================================= */

.container {
    width: 100%;
    max-width: var(--largura-max);
    margin-inline: auto;
    padding-inline: var(--e-4);
}

/* Visível só para leitor de tela: o rótulo existe para quem navega por áudio,
   sem ocupar espaço de quem navega por imagem. `clip-path` em vez de
   `display:none` porque o segundo remove o elemento da árvore de acessibilidade
   junto — ou seja, esconde de quem o rótulo serve. */
.apenas-leitor {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.pular-para-conteudo {
    position: absolute;
    left: var(--e-4);
    top: -100px;
    z-index: 200;
    padding: var(--e-3) var(--e-4);
    background: var(--primaria);
    color: var(--primaria-contraste);
    border-radius: var(--raio-m);
    font-weight: 600;
    transition: top var(--rapida);
}

.pular-para-conteudo:focus {
    top: var(--e-3);
}

/* ============================== botões =================================== */

.botao {
    --botao-fundo: var(--primaria);
    --botao-texto: var(--primaria-contraste);
    --botao-borda: transparent;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--e-2);
    padding: 12px 20px;
    border: 1px solid var(--botao-borda);
    border-radius: var(--raio-m);
    background: var(--botao-fundo);
    color: var(--botao-texto);
    font-size: var(--t-md);
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    transition: filter var(--rapida), transform var(--rapida), box-shadow var(--rapida),
                background-color var(--rapida), border-color var(--rapida);
}

.botao:hover {
    filter: brightness(1.06);
}

.botao:active {
    transform: translateY(1px);
}

.botao:disabled,
.botao[aria-disabled="true"] {
    opacity: 0.55;
    cursor: not-allowed;
    transform: none;
    filter: none;
}

.botao--primario {
    box-shadow: 0 1px 2px rgb(16 24 40 / 10%),
                0 6px 16px color-mix(in srgb, var(--primaria) 28%, transparent);
}

.botao--secundario {
    --botao-fundo: var(--superficie);
    --botao-texto: var(--texto-1);
    --botao-borda: var(--borda-forte);
    box-shadow: var(--sombra-1);
}

.botao--fantasma {
    --botao-fundo: transparent;
    --botao-texto: var(--texto-1);
    --botao-borda: transparent;
}

.botao--fantasma:hover {
    --botao-fundo: var(--superficie-2);
    filter: none;
}

.botao--perigo {
    --botao-fundo: var(--erro);
    --botao-texto: #FFFFFF;
}

.botao--g {
    padding: 15px 28px;
    font-size: var(--corpo);
    border-radius: var(--raio-g);
}

.botao--p {
    padding: 8px 14px;
    font-size: var(--t-sm);
    border-radius: var(--raio-p);
}

.botao--bloco {
    width: 100%;
}

/* ============================== campos =================================== */

.campo {
    display: grid;
    gap: var(--e-2);
}

.campo__rotulo {
    font-size: var(--t-md);
    font-weight: 600;
    color: var(--texto-1);
}

.campo__dica {
    font-size: var(--t-sm);
    color: var(--texto-2);
}

.campo__erro {
    font-size: var(--t-sm);
    font-weight: 600;
    color: var(--erro);
}

.entrada,
.selecao,
.area-texto {
    width: 100%;
    padding: 12px 14px;
    background: var(--superficie);
    border: 1px solid var(--borda-forte);
    border-radius: var(--raio-m);
    font-size: var(--t-md);
    transition: border-color var(--rapida), box-shadow var(--rapida);
}

.entrada::placeholder,
.area-texto::placeholder {
    color: var(--texto-3);
}

.entrada:focus,
.selecao:focus,
.area-texto:focus {
    outline: none;
    border-color: var(--primaria);
    box-shadow: var(--sombra-foco);
}

.entrada[aria-invalid="true"],
.area-texto[aria-invalid="true"] {
    border-color: var(--erro);
}

.area-texto {
    min-height: 120px;
    resize: vertical;
}

.selecao {
    appearance: none;
    padding-right: 40px;
    /* A seta é desenhada em SVG embutido para não depender de um arquivo e não
       abrir `img-src` na CSP por causa de um triângulo. */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9' fill='none'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%238B97AE' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
}

/* ============================= etiquetas ================================= */

.etiqueta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: var(--raio-pilula);
    background: var(--superficie-2);
    color: var(--texto-2);
    font-size: var(--t-xs);
    font-weight: 600;
    letter-spacing: 0.01em;
}

.etiqueta--primaria { background: var(--primaria-fraca); color: var(--primaria); }
.etiqueta--sucesso  { background: var(--sucesso-fraca);  color: var(--sucesso); }
.etiqueta--alerta   { background: var(--alerta-fraca);   color: var(--alerta); }
.etiqueta--erro     { background: var(--erro-fraca);     color: var(--erro); }
.etiqueta--info     { background: var(--info-fraca);     color: var(--info); }

/* ============================== cartões ================================== */

.painel {
    background: var(--superficie);
    border: 1px solid var(--borda);
    border-radius: var(--raio-g);
    box-shadow: var(--sombra-1);
}

.painel--flutuante {
    box-shadow: var(--sombra-2);
}

/* ============================== avisos =================================== */

.aviso {
    display: flex;
    gap: var(--e-3);
    padding: var(--e-4);
    border-radius: var(--raio-m);
    border: 1px solid transparent;
    font-size: var(--t-md);
}

.aviso__icone {
    flex: none;
    margin-top: 2px;
}

.aviso--erro {
    background: var(--erro-fraca);
    border-color: color-mix(in srgb, var(--erro) 30%, transparent);
    color: var(--erro);
}

.aviso--sucesso {
    background: var(--sucesso-fraca);
    border-color: color-mix(in srgb, var(--sucesso) 30%, transparent);
    color: var(--sucesso);
}

.aviso--info {
    background: var(--info-fraca);
    border-color: color-mix(in srgb, var(--info) 30%, transparent);
    color: var(--info);
}

.aviso--alerta {
    background: var(--alerta-fraca);
    border-color: color-mix(in srgb, var(--alerta) 30%, transparent);
    color: var(--alerta);
}

/* ========================= seletor de tema =============================== */
/*
 * Três botões num grupo, e não um interruptor de dois estados: "sistema" é uma
 * opção de verdade, e a maioria das pessoas a quer. Um interruptor obrigaria a
 * escolher claro ou escuro para sempre, e quem usa o celular em modo automático
 * perderia a transição do fim do dia.
 *
 * O indicador de qual está ativo é posto pelo JS (`aria-checked`), e o estilo
 * vem do próprio atributo de acessibilidade — não de uma classe paralela. Assim
 * não existe o estado em que o visual diz uma coisa e o leitor de tela outra.
 */

.tema {
    display: inline-flex;
    gap: 2px;
    padding: 3px;
    background: var(--superficie-2);
    border: 1px solid var(--borda);
    border-radius: var(--raio-pilula);
}

.tema__opcao {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: var(--raio-pilula);
    background: transparent;
    color: var(--texto-2);
    transition: background-color var(--rapida), color var(--rapida);
}

.tema__opcao:hover {
    color: var(--texto-1);
    background: color-mix(in srgb, var(--texto-1) 8%, transparent);
}

.tema__opcao[aria-checked="true"] {
    background: var(--superficie);
    color: var(--primaria);
    box-shadow: var(--sombra-1);
}

/* O seletor só aparece depois que o JS assume o controle. Sem JS, mostrar três
   botões que não fazem nada é pior do que não mostrar nenhum. */
.tema:not([data-pronto]) {
    display: none;
}

/* ====================== preferências do usuário ========================== */

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}