/* Identidade do ADR-0042 sobre a semântica de cor do ADR-0030.
 *
 * Os tokens abaixo são a ÚNICA fonte de cor da interface: página nenhuma escreve hexadecimal
 * à mão. O tema do MudBlazor (TemaDaFicha.cs) repete os mesmos valores — mudou um, muda o
 * outro.
 *
 * Todo par texto/fundo tem contraste AA ou mais, nos dois temas. Ao acrescentar ou mudar um
 * token, confira de novo; ver design/identidade.html.
 *
 * Vermelho e âmbar (--alarme, --aviso) são estado do sistema. Nunca em valor clínico. */

@font-face {
    font-family: "Plus Jakarta Sans";
    src: url("../fontes/plus-jakarta-sans-latin.woff2") format("woff2");
    font-weight: 200 800;
    font-style: normal;
    /* O texto aparece na fonte do sistema e troca quando a nossa chega — nunca em branco. */
    font-display: swap;
}

:root {
    color-scheme: light;

    --fundo: #F2F4F3;
    --superficie: #FFFFFF;
    --superficie-2: #E9EEEC;
    --regua: #DCE3E0;
    --regua-forte: #C5CFCB;
    --tinta: #14201E;
    --apagado: #4B5A57;
    --rotulo: #56635F;
    --acento: #0F766E;
    --acento-forte: #0B5550;
    --acento-suave: #E3F1EE;
    --sobre-acento: #FFFFFF;

    /* Estado do sistema — ADR-0030. */
    --alarme: #B3261E;
    --aviso: #7A5E00;
    --aviso-fundo: #FBF3DE;
    --aviso-regua: #E8D9AE;

    --sombra: 0 1px 2px rgba(20, 32, 30, .05), 0 6px 20px rgba(20, 32, 30, .07);
    --raio: 14px;
    --raio-cartao: 20px;

    --fonte: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
}

/* Escuro só quando o sistema pede: o padrão é claro (ADR-0042). */
@media (prefers-color-scheme: dark) {
    :root {
        color-scheme: dark;

        --fundo: #0E1413;
        --superficie: #17201E;
        --superficie-2: #1F2A28;
        --regua: #2A3734;
        --regua-forte: #3A4945;
        --tinta: #E8EFED;
        --apagado: #A3B3AF;
        --rotulo: #97A8A3;
        --acento: #5EC4B6;
        --acento-forte: #8FDDD2;
        --acento-suave: #16302C;
        --sobre-acento: #062421;

        --alarme: #F2A097;
        --aviso: #E2C26A;
        --aviso-fundo: #2B2410;
        --aviso-regua: #4A3E1A;

        --sombra: 0 1px 2px rgba(0, 0, 0, .35), 0 8px 24px rgba(0, 0, 0, .35);
    }
}

/* Papel é sempre claro: a lista de medicação é impressa para levar à consulta. */
@media print {
    :root {
        color-scheme: light;

        --fundo: #FFFFFF;
        --superficie: #FFFFFF;
        --superficie-2: #E9EEEC;
        --regua: #C5CFCB;
        --regua-forte: #C5CFCB;
        --tinta: #000000;
        --apagado: #333B39;
        --rotulo: #333B39;
        --acento: #0B5550;
        --acento-forte: #0B5550;
        --acento-suave: #FFFFFF;
        --sombra: none;
    }
}

html, body {
    margin: 0;
    background: var(--fundo);
    color: var(--tinta);
    font-family: var(--fonte);
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
}

/* Números clínicos alinham em coluna (ADR-0030) com os algarismos de largura fixa da
   própria fonte, sem uma mono destoando ao lado do texto (ADR-0042). */
.numero { font-variant-numeric: tabular-nums; }

/* Título de página: o peso que as telas não tinham. */
.titulo-pagina {
    font-size: 28px;
    font-weight: 800;
    letter-spacing: -.03em;
    line-height: 1.15;
    margin: 0;
}

.carregando {
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 18px;
    color: var(--apagado);
}

.carregando-marca {
    width: 34px;
    height: 34px;
    border-radius: 17px;
    border: 3px solid var(--regua);
    border-top-color: var(--acento);
    animation: girar 900ms linear infinite;
}

@keyframes girar { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
    .carregando-marca { animation: none; border-top-color: var(--regua); }
}

.carregando p { margin: 0; font-size: 15px; font-weight: 500; }

#blazor-error-ui {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    padding: 14px 20px;
    background: var(--aviso-fundo);
    color: var(--aviso);
    border-top: 1px solid var(--aviso-regua);
    box-shadow: 0 -1px 3px rgba(0, 0, 0, .06);
}

#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: 16px; top: 12px; }
#blazor-error-ui .reload { color: var(--aviso); margin-left: 8px; }

/* ── Compartilhado pelas telas ─────────────────────────────────────────────────────── */

/* Ação principal da tela: pílula, alta o bastante para o polegar (ADR-0030, 44 px ou mais). */
.botao-pilula.mud-button-root { border-radius: 999px; min-height: 52px; }

/* Cartão: separação por sombra, não por borda — o que tirava o "apagado" das telas. */
.cartao-zelo {
    background: var(--superficie);
    border-radius: var(--raio-cartao);
    box-shadow: var(--sombra);
}

/* Rótulo de seção: pequeno, em caixa alta, com contraste AA (era 3,9:1; agora 6,3:1). */
.rotulo-secao {
    margin: 0;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--rotulo);
}

/* Etiqueta de selo — "titular", "somente leitura". O tom do acento é identidade, não juízo. */
.selo {
    font-size: 12px;
    font-weight: 700;
    color: var(--acento-forte);
    background: var(--acento-suave);
    border-radius: 999px;
    padding: 3px 10px;
    flex-shrink: 0;
}

.selo.neutro { color: var(--apagado); background: var(--superficie-2); }

/* ── Telas de entrada: entrar, pedir link, definir senha ───────────────────────────── */

.pagina-entrada {
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 32px 28px 40px;
    max-width: 460px;
    margin: 0 auto;
}

.pagina-entrada .topo { margin-bottom: 36px; }
.pagina-entrada .campos { display: flex; flex-direction: column; gap: 16px; }
.pagina-entrada .acoes { margin-top: 28px; display: flex; flex-direction: column; gap: 8px; }

.marca-zelo {
    width: 60px;
    height: 60px;
    border-radius: 20px;
    background: var(--acento-suave);
    color: var(--acento);
    display: flex;
    align-items: center;
    justify-content: center;
}

.nome-produto {
    font-size: 38px;
    font-weight: 800;
    letter-spacing: -.04em;
    line-height: 1;
    margin: 18px 0 0;
}

.lema { color: var(--apagado); margin: 10px 0 0; font-size: 17px; }