/* =====================================================================
   GESTÃO DA CLÍNICA — base: tokens de cor, tipografia, botões e campos.

   TEMAS: todas as cores da interface são variáveis definidas aqui, uma
   vez para o tema claro e uma para o escuro (atributo data-tema do
   <html>, aplicado por assets/js/tema-inicial.js). Nenhum outro arquivo
   usa cor fixa — para ajustar a identidade visual, mexa só neste bloco.
   ===================================================================== */

:root {
    color-scheme: light;

    /* Superfícies e linhas */
    --fundo: #f3f5f7;
    --superficie: #ffffff;
    --superficie-2: #f6f8f9;
    --superficie-3: #eceff2;
    --borda: #d9dfe5;
    --borda-forte: #b9c2cc;

    /* Texto */
    --texto: #16202a;
    --texto-2: #4a5866;
    --texto-3: #6b7885;

    /* Cor principal (verde-azulado) */
    --primaria: #0f766e;
    --primaria-forte: #0b5c56;
    --primaria-suave: #dff1ef;
    --sobre-primaria: #ffffff;
    --foco: #0f766e;

    /* Estados */
    --perigo: #b42318;
    --perigo-suave: #fdecea;
    --sucesso: #17693f;
    --sucesso-suave: #e3f4ea;
    --alerta: #8a5a00;
    --alerta-suave: #fff3d6;

    /* Menu lateral */
    --lateral: #10242b;
    --lateral-texto: #d7e2e6;
    --lateral-texto-2: #93a7ae;
    --lateral-ativo: #1d3b44;

    /* Gráficos: séries categóricas e linhas de apoio */
    --serie-1: #2a78d6;
    --serie-2: #eb6834;
    --grafico-grade: #e3e7eb;

    --sombra: 0 1px 2px rgb(16 32 42 / 6%), 0 4px 16px rgb(16 32 42 / 6%);
    --sombra-forte: 0 12px 40px rgb(16 32 42 / 22%);
    --raio: 10px;
    --raio-pequeno: 6px;
    --fonte: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

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

    --fundo: #0e1418;
    --superficie: #161e24;
    --superficie-2: #1b252c;
    --superficie-3: #222e36;
    --borda: #2a3740;
    --borda-forte: #3d4d58;

    --texto: #e7edf2;
    --texto-2: #a9b6c1;
    --texto-3: #8291a0;

    --primaria: #2bb3a6;
    --primaria-forte: #4cc7bb;
    --primaria-suave: #153a38;
    --sobre-primaria: #04201d;
    --foco: #4cc7bb;

    --perigo: #ff8a80;
    --perigo-suave: #3b1a18;
    --sucesso: #6fd49b;
    --sucesso-suave: #14321f;
    --alerta: #f0c060;
    --alerta-suave: #3a2c0a;

    --lateral: #0a1014;
    --lateral-texto: #d7e2e6;
    --lateral-texto-2: #8fa2aa;
    --lateral-ativo: #172a31;

    --serie-1: #3987e5;
    --serie-2: #d95926;
    --grafico-grade: #26323b;

    --sombra: 0 1px 2px rgb(0 0 0 / 30%), 0 4px 16px rgb(0 0 0 / 25%);
    --sombra-forte: 0 12px 40px rgb(0 0 0 / 60%);
}

/* ---------------------------------------------------------------------
   Reset e tipografia
   --------------------------------------------------------------------- */

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

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

body {
    margin: 0;
    background: var(--fundo);
    color: var(--texto);
    font-family: var(--fonte);
    font-size: 0.9375rem;
    line-height: 1.5;
}

h1, h2, h3, h4, p, ul, dl, dd, fieldset { margin: 0; padding: 0; }
ul { list-style: none; }
fieldset { border: 0; min-width: 0; }
table { border-collapse: collapse; width: 100%; }
img, svg { display: block; }
a { color: var(--primaria); }
strong { font-weight: 600; }

[hidden] { display: none !important; }

:focus-visible {
    outline: 2px solid var(--foco);
    outline-offset: 2px;
}

/* Texto só para leitores de tela. */
.so-leitor {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.pular-conteudo {
    position: absolute;
    left: -999px;
    top: 0.5rem;
    z-index: 100;
    padding: 0.5rem 1rem;
    background: var(--primaria);
    color: var(--sobre-primaria);
    border-radius: var(--raio-pequeno);
}
.pular-conteudo:focus { left: 0.5rem; }

.icone {
    width: 1.25em;
    height: 1.25em;
    flex: none;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

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

.botao {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    min-height: 2.5rem;
    padding: 0.45rem 0.95rem;
    border: 1px solid transparent;
    border-radius: var(--raio-pequeno);
    background: transparent;
    color: var(--texto);
    font: inherit;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.12s, border-color 0.12s;
}
.botao:disabled { opacity: 0.55; cursor: not-allowed; }

.botao--primario { background: var(--primaria); color: var(--sobre-primaria); }
.botao--primario:hover:not(:disabled) { background: var(--primaria-forte); }

.botao--secundario { background: var(--superficie); border-color: var(--borda-forte); }
.botao--secundario:hover:not(:disabled) { background: var(--superficie-3); }

.botao--fantasma { color: var(--texto-2); }
.botao--fantasma:hover:not(:disabled) { background: var(--superficie-3); color: var(--texto); }

.botao--perigo { background: var(--perigo); color: var(--superficie); }
.botao--perigo:hover:not(:disabled) { filter: brightness(0.92); }

.botao--perigo-suave { color: var(--perigo); border-color: var(--perigo); margin-right: auto; }
.botao--perigo-suave:hover:not(:disabled) { background: var(--perigo-suave); }

.botao--icone { min-width: 2.5rem; padding: 0.4rem; color: var(--texto-2); }
.botao--icone:hover:not(:disabled) { background: var(--superficie-3); color: var(--texto); }

.botao--pequeno { min-height: 2.1rem; padding: 0.3rem 0.7rem; font-size: 0.875rem; }
.botao--bloco { width: 100%; }

.botao-link {
    padding: 0;
    border: 0;
    background: none;
    color: var(--primaria);
    font: inherit;
    font-weight: 600;
    text-decoration: underline;
    cursor: pointer;
}

/* ---------------------------------------------------------------------
   Campos de formulário
   --------------------------------------------------------------------- */

.formulario { display: grid; gap: 1rem; }

.campo { display: grid; gap: 0.3rem; align-content: start; min-width: 0; }

.campo > label,
.campo__rotulo {
    color: var(--texto-2);
    font-size: 0.8125rem;
    font-weight: 600;
}

.campo__opcional { color: var(--texto-3); font-weight: 400; }

input[type="text"],
input[type="password"],
input[type="date"],
input[type="number"],
input[type="search"],
select {
    width: 100%;
    min-height: 2.5rem;
    padding: 0.4rem 0.65rem;
    border: 1px solid var(--borda-forte);
    border-radius: var(--raio-pequeno);
    background: var(--superficie);
    color: var(--texto);
    font: inherit;
}
input::placeholder { color: var(--texto-3); }

input:focus-visible,
select:focus-visible {
    outline: 2px solid var(--foco);
    outline-offset: 0;
    border-color: var(--foco);
}

input[aria-invalid="true"],
select[aria-invalid="true"] { border-color: var(--perigo); }

input[type="radio"],
input[type="checkbox"] {
    width: 1.05rem;
    height: 1.05rem;
    margin: 0;
    accent-color: var(--primaria);
}

.campo__erro,
.pagamentos__erro {
    color: var(--perigo);
    font-size: 0.8125rem;
    font-weight: 600;
}

.campo__ajuda { color: var(--texto-3); font-size: 0.8125rem; }

.campo__calculado {
    display: flex;
    align-items: center;
    min-height: 2.5rem;
    padding: 0.4rem 0.65rem;
    border: 1px dashed var(--borda-forte);
    border-radius: var(--raio-pequeno);
    background: var(--superficie-2);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* Campo preenchido pelo sistema (não editável): borda contínua e etiqueta "automático". */
.campo__calculado--automatico { border-style: solid; border-color: var(--borda); font-weight: 600; }
.campo__etiqueta {
    margin-left: 0.25rem;
    padding: 0.05rem 0.4rem;
    border-radius: 999px;
    background: var(--primaria-suave);
    color: var(--primaria);
    font-size: 0.6875rem;
    font-weight: 700;
    white-space: nowrap;
}

.formulario__acoes {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.6rem;
    margin-top: 0.5rem;
}

.formulario__erro-geral {
    padding: 0.7rem 0.9rem;
    border: 1px solid var(--perigo);
    border-radius: var(--raio-pequeno);
    background: var(--perigo-suave);
    color: var(--perigo);
    font-weight: 600;
}

/* Pergunta com opções (rádio): "uma forma ou várias?", "houve venda?". */
.escolha {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1.25rem;
}
.escolha--coluna { flex-direction: column; align-items: flex-start; }
.escolha__pergunta { font-weight: 600; }
.escolha__opcao {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    min-height: 2rem;
    cursor: pointer;
}

.grade { display: grid; gap: 0.9rem; }
.grade--duas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grade--consulta { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grade--consulta .campo--largo { grid-column: span 4; }
.grade--consulta .campo--total { grid-column: 1 / -1; }
/* Medicamento vendido: 1ª linha, o que o usuário informa (medicamento e
   quantidade); 2ª linha, o que o sistema preenche e calcula. */
.grade--item { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.item-venda__medicamento { grid-column: span 4; }
.item-venda__quantidade,
.item-venda__unitario,
.item-venda__total { grid-column: span 2; }

@media (max-width: 860px) {
    .grade--consulta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .grade--consulta .campo--largo { grid-column: span 2; }
    .grade--item { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .item-venda__medicamento,
    .item-venda__quantidade { grid-column: 1 / -1; }
    .item-venda__unitario,
    .item-venda__total { grid-column: auto; }
}

@media (max-width: 520px) {
    .grade--duas,
    .grade--consulta { grid-template-columns: minmax(0, 1fr); }
    .grade--consulta .campo--largo { grid-column: auto; }
    .formulario__acoes .botao { flex: 1 1 auto; }
}

@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; animation: none !important; }
}