/* ═══════════════════════════════════════════════════════════════════════
   Minha Receita Popular — fundação visual
   Tokens, reset e componentes usados pelo site e pelo painel.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
    /* Verde da saúde, sóbrio — não o verde saturado de farmácia popular */
    --verde-900: #0b3d2e;
    --verde-800: #10553f;
    --verde-700: #146c50;
    --verde-600: #17845f;
    --verde-500: #1f9e73;
    --verde-300: #7fd1b3;
    --verde-100: #d8f2e8;
    --verde-50:  #eef9f5;

    --azul-700: #1b4d7a;
    --azul-500: #2b7cc4;
    --azul-100: #dbeafe;

    --cinza-900: #111827;
    --cinza-800: #1f2937;
    --cinza-700: #374151;
    --cinza-600: #4b5563;
    --cinza-500: #6b7280;
    --cinza-400: #9ca3af;
    --cinza-300: #d1d5db;
    --cinza-200: #e5e7eb;
    --cinza-100: #f3f4f6;
    --cinza-50:  #f9fafb;

    --vermelho-700: #b91c1c;
    --vermelho-500: #ef4444;
    --vermelho-50:  #fef2f2;

    --amarelo-700: #a16207;
    --amarelo-500: #f59e0b;
    --amarelo-50:  #fffbeb;

    --branco: #ffffff;

    --raio-sm: 6px;
    --raio:    10px;
    --raio-lg: 16px;
    --raio-xl: 24px;

    --sombra-sm: 0 1px 2px rgba(17, 24, 39, .06);
    --sombra:    0 2px 8px rgba(17, 24, 39, .08);
    --sombra-md: 0 8px 24px rgba(17, 24, 39, .10);
    --sombra-lg: 0 20px 48px rgba(17, 24, 39, .14);

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

    --largura-max: 1180px;
    --transicao: 160ms cubic-bezier(.4, 0, .2, 1);
}

/* ── Reset ─────────────────────────────────────────────────────────── */

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

* { margin: 0; }

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

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

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

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

button { cursor: pointer; }

a { color: var(--verde-700); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3, h4 {
    line-height: 1.2;
    font-weight: 700;
    color: var(--cinza-900);
    letter-spacing: -.02em;
}

h1 { font-size: clamp(1.9rem, 1.3rem + 2.4vw, 3.2rem); }
h2 { font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem); }
h3 { font-size: 1.25rem; }
h4 { font-size: 1.05rem; }

p { text-wrap: pretty; }

:focus-visible {
    outline: 3px solid var(--verde-300);
    outline-offset: 2px;
    border-radius: 3px;
}

/* Acessibilidade: respeita quem pediu menos animação */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ── Utilitários ───────────────────────────────────────────────────── */

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

.somente-leitores {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.texto-centro   { text-align: center; }
.texto-direita  { text-align: right; }
.texto-mudo     { color: var(--cinza-500); }
.texto-pequeno  { font-size: .875rem; }
.texto-menor    { font-size: .8125rem; }
.texto-forte    { font-weight: 600; }
.texto-mono     { font-family: var(--fonte-mono); font-size: .9em; }
.texto-verde    { color: var(--verde-700); }
.texto-vermelho { color: var(--vermelho-700); }
.texto-amarelo  { color: var(--amarelo-700); }
.nowrap         { white-space: nowrap; }
.lista-limpa    { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 3px; }

.pilha    { display: flex; flex-direction: column; gap: 16px; }
.pilha-sm { display: flex; flex-direction: column; gap: 8px; }
.linha    { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.linha-entre { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.crescer  { flex: 1 1 auto; }

.mt-0 { margin-top: 0; }    .mt-1 { margin-top: 8px; }
.mt-2 { margin-top: 16px; } .mt-3 { margin-top: 24px; }
.mt-4 { margin-top: 32px; } .mt-5 { margin-top: 48px; }
.mb-1 { margin-bottom: 8px; }  .mb-2 { margin-bottom: 16px; }
.mb-3 { margin-bottom: 24px; } .mb-4 { margin-bottom: 32px; }

/* ── Botões ────────────────────────────────────────────────────────── */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 11px 20px;
    border: 1px solid transparent;
    border-radius: var(--raio);
    font-size: .9375rem;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
    transition: background var(--transicao), border-color var(--transicao),
                transform var(--transicao), box-shadow var(--transicao);
}

.btn:hover { text-decoration: none; }
.btn:active { transform: translateY(1px); }

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

.btn-primario {
    background: var(--verde-600);
    color: var(--branco);
    box-shadow: var(--sombra-sm);
}
.btn-primario:hover { background: var(--verde-700); box-shadow: var(--sombra); }

.btn-secundario {
    background: var(--branco);
    color: var(--cinza-800);
    border-color: var(--cinza-300);
}
.btn-secundario:hover { background: var(--cinza-50); border-color: var(--cinza-400); }

.btn-perigo {
    background: var(--branco);
    color: var(--vermelho-700);
    border-color: var(--vermelho-500);
}
.btn-perigo:hover { background: var(--vermelho-50); }

.btn-fantasma {
    background: transparent;
    color: var(--cinza-700);
    padding-inline: 12px;
}
.btn-fantasma:hover { background: var(--cinza-100); }

.btn-grande  { padding: 15px 30px; font-size: 1.05rem; border-radius: var(--raio-lg); }
.btn-pequeno { padding: 7px 14px; font-size: .8125rem; }
.btn-bloco   { display: flex; width: 100%; }

/* ── Formulários ───────────────────────────────────────────────────── */

.campo { margin-bottom: 18px; }

.campo label,
.rotulo {
    display: block;
    margin-bottom: 6px;
    font-size: .875rem;
    font-weight: 600;
    color: var(--cinza-700);
}

.obrigatorio::after {
    content: " *";
    color: var(--vermelho-500);
}

.entrada,
input[type="text"], input[type="email"], input[type="password"],
input[type="tel"], input[type="date"], input[type="number"],
input[type="search"], input[type="url"], textarea, select {
    display: block;
    width: 100%;
    padding: 10px 13px;
    border: 1px solid var(--cinza-300);
    border-radius: var(--raio);
    background: var(--branco);
    font-size: .9375rem;
    color: var(--cinza-900);
    transition: border-color var(--transicao), box-shadow var(--transicao);
}

.entrada:focus,
input:focus, textarea:focus, select:focus {
    outline: none;
    border-color: var(--verde-500);
    box-shadow: 0 0 0 3px var(--verde-100);
}

input:disabled, textarea:disabled, select:disabled {
    background: var(--cinza-100);
    color: var(--cinza-500);
    cursor: not-allowed;
}

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

textarea { min-height: 96px; resize: vertical; }

select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%236b7280' d='M1.4 0 6 4.6 10.6 0 12 1.4 6 7.4 0 1.4z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 13px center;
    padding-right: 36px;
}

.ajuda {
    margin-top: 5px;
    font-size: .8125rem;
    color: var(--cinza-500);
}

.erro-campo {
    margin-top: 5px;
    font-size: .8125rem;
    color: var(--vermelho-700);
    font-weight: 500;
}

.marcador {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    cursor: pointer;
    font-size: .9375rem;
}
.marcador input[type="checkbox"],
.marcador input[type="radio"] {
    width: 18px; height: 18px;
    margin-top: 2px;
    flex-shrink: 0;
    accent-color: var(--verde-600);
    cursor: pointer;
}

.grade-form {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 0 18px;
}
.grade-form .campo-inteiro { grid-column: 1 / -1; }

/* ── Cartões ───────────────────────────────────────────────────────── */

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

.cartao-cabeca {
    padding: 18px 22px;
    border-bottom: 1px solid var(--cinza-200);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}
.cartao-cabeca h2, .cartao-cabeca h3 { font-size: 1.0625rem; margin: 0; }

.cartao-corpo { padding: 22px; }
.cartao-pe {
    padding: 16px 22px;
    border-top: 1px solid var(--cinza-200);
    background: var(--cinza-50);
    border-radius: 0 0 var(--raio-lg) var(--raio-lg);
}

/* ── Avisos ────────────────────────────────────────────────────────── */

.aviso {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 18px;
    border-radius: var(--raio);
    border: 1px solid;
    font-size: .9375rem;
    margin-bottom: 18px;
}
.aviso p:last-child { margin-bottom: 0; }

.aviso-sucesso { background: var(--verde-50);    border-color: var(--verde-300);  color: var(--verde-900); }
.aviso-erro    { background: var(--vermelho-50); border-color: #fca5a5;           color: #7f1d1d; }
.aviso-atencao { background: var(--amarelo-50);  border-color: #fcd34d;           color: #78350f; }
.aviso-info    { background: var(--azul-100);    border-color: #93c5fd;           color: #1e3a8a; }

.aviso-icone { flex-shrink: 0; font-size: 1.1em; line-height: 1.45; }

/* ── Etiquetas ─────────────────────────────────────────────────────── */

.etiqueta {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .01em;
    white-space: nowrap;
}

.etiqueta-verde    { background: var(--verde-100);    color: var(--verde-800); }
.etiqueta-cinza    { background: var(--cinza-200);    color: var(--cinza-700); }
.etiqueta-vermelha { background: var(--vermelho-50);  color: var(--vermelho-700); border: 1px solid #fca5a5; }
.etiqueta-amarela  { background: var(--amarelo-50);   color: var(--amarelo-700); border: 1px solid #fcd34d; }
.etiqueta-azul     { background: var(--azul-100);     color: var(--azul-700); }

/* ── Tabelas ───────────────────────────────────────────────────────── */

.tabela-rolagem {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.tabela {
    width: 100%;
    border-collapse: collapse;
    font-size: .9375rem;
}

.tabela th {
    padding: 11px 14px;
    text-align: left;
    font-size: .75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--cinza-500);
    background: var(--cinza-50);
    border-bottom: 1px solid var(--cinza-200);
    white-space: nowrap;
}

.tabela th a { color: inherit; }

.tabela td {
    padding: 13px 14px;
    border-bottom: 1px solid var(--cinza-100);
    vertical-align: middle;
}

.tabela tbody tr:hover { background: var(--cinza-50); }
.tabela tbody tr:last-child td { border-bottom: none; }

.tabela-acoes { white-space: nowrap; text-align: right; }

/* ── Estado vazio ──────────────────────────────────────────────────── */

.vazio {
    padding: 56px 24px;
    text-align: center;
    color: var(--cinza-500);
}
.vazio-icone { font-size: 2.5rem; margin-bottom: 14px; opacity: .45; }
.vazio h3 { color: var(--cinza-700); margin-bottom: 6px; }

/* ── Paginação ─────────────────────────────────────────────────────── */

.paginacao {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex-wrap: wrap;
    padding: 20px 0;
}

.paginacao a, .paginacao span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    height: 38px;
    padding-inline: 10px;
    border: 1px solid var(--cinza-300);
    border-radius: var(--raio-sm);
    font-size: .875rem;
    color: var(--cinza-700);
}
.paginacao a:hover { background: var(--cinza-100); text-decoration: none; }
.paginacao .atual {
    background: var(--verde-600);
    border-color: var(--verde-600);
    color: var(--branco);
    font-weight: 600;
}
.paginacao .desativado { opacity: .4; pointer-events: none; }

/* ── Barra de progresso ────────────────────────────────────────────── */

.progresso {
    height: 8px;
    background: var(--cinza-200);
    border-radius: 999px;
    overflow: hidden;
}
.progresso-barra {
    height: 100%;
    background: var(--verde-500);
    border-radius: 999px;
    transition: width 400ms ease;
}
.progresso-barra.atencao { background: var(--amarelo-500); }
.progresso-barra.perigo  { background: var(--vermelho-500); }

/* ── Impressão ─────────────────────────────────────────────────────── */

@media print {
    .sem-impressao, .barra-lateral, .cabecalho-app, .paginacao { display: none !important; }
    body { background: #fff; }
    .cartao { box-shadow: none; border: 1px solid #ccc; }
}

/* ═══════════════════════════════════════════════════════════════════════
   Tema escuro
   Todo componente usa os tokens acima, então trocar o tema é redefinir
   os tokens. Ativado por data-tema="escuro" no <html> (o JS aplica antes
   do primeiro paint para não piscar) e, na ausência de escolha salva,
   segue a preferência do sistema.
   ═══════════════════════════════════════════════════════════════════════ */

[data-tema="escuro"] {
    --verde-900: #0e2e24;
    --verde-800: #14523e;
    --verde-700: #1c8a63;
    --verde-600: #22a577;
    --verde-500: #2cc08b;
    --verde-300: #37725c;
    --verde-100: #1b3f32;
    --verde-50:  #16281f;

    --azul-700: #7fb8e8;
    --azul-500: #4d9be0;
    --azul-100: #1b2f42;

    /* Escala invertida: o que era escuro-no-claro vira claro-no-escuro */
    --cinza-900: #f1f5f3;
    --cinza-800: #dfe5e2;
    --cinza-700: #c2cac6;
    --cinza-600: #9aa5a0;
    --cinza-500: #7d8883;
    --cinza-400: #5a635f;
    --cinza-300: #3c4441;
    --cinza-200: #2c3330;
    --cinza-100: #222826;
    --cinza-50:  #191e1c;

    --vermelho-700: #f28b82;
    --vermelho-500: #e06055;
    --vermelho-50:  #33201e;

    --amarelo-700: #f5c664;
    --amarelo-500: #d9a23e;
    --amarelo-50:  #322a18;

    --branco: #101412;

    --sombra-sm: 0 1px 2px rgba(0, 0, 0, .4);
    --sombra:    0 2px 8px rgba(0, 0, 0, .45);
    --sombra-md: 0 8px 24px rgba(0, 0, 0, .5);
    --sombra-lg: 0 20px 48px rgba(0, 0, 0, .6);

    color-scheme: dark;
}

/* Ajustes pontuais que os tokens sozinhos não cobrem */
[data-tema="escuro"] body { background: #0c100e; }

[data-tema="escuro"] .site-cabecalho {
    background: rgba(16, 20, 18, .92);
}

[data-tema="escuro"] .hero {
    background:
        radial-gradient(1100px 460px at 78% -12%, #16281f 0%, transparent 62%),
        radial-gradient(760px 380px at 8% 8%, #101a24 0%, transparent 58%);
}

[data-tema="escuro"] .aviso-sucesso { background: #16281f; border-color: #2c5a46; color: #a7e8cc; }
[data-tema="escuro"] .aviso-erro    { background: #33201e; border-color: #7a3c36; color: #f3b6b0; }
[data-tema="escuro"] .aviso-atencao { background: #322a18; border-color: #7a6430; color: #f0d69a; }
[data-tema="escuro"] .aviso-info    { background: #1b2f42; border-color: #34567a; color: #b7d6f2; }

[data-tema="escuro"] .exemplo-formato { background: #05130d; }
[data-tema="escuro"] .caixa-qr { background: #ffffff; }  /* QR precisa de fundo claro para ler */
[data-tema="escuro"] .faixa-numeros { background: #0e2e24; }
[data-tema="escuro"] .chamada-final { background: linear-gradient(135deg, #14523e, #1c8a63); }

/* ── Botão de alternar tema ────────────────────────────────────────── */

.alternar-tema {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px; height: 36px;
    border: 1px solid var(--cinza-300);
    border-radius: 50%;
    background: var(--branco);
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
    flex-shrink: 0;
}
.alternar-tema:hover { background: var(--cinza-100); }

[data-tema="escuro"] .cabecalho-app { background: rgba(16, 20, 18, .94); }
[data-tema="escuro"] .abrir-menu { background: var(--branco); }