/* ==========================================================================
   Clínica Dra. Gláucia — folha de estilo única

   SEMÂNTICA DA COR (vale para os dois temas)
     azul     → ação: botão principal, link, foco, paciente em tratamento
     verde    → está certo: salvo, quitado, confirmado, sistema no ar
     roxo     → esperando: fila de aprovação, encaixe, área administrativa
     vermelho → problema: dívida, alerta clínico, erro

   Cada cor tem um papel só. É o que permite entender a tela sem ler tudo —
   verde e vermelho ficam reservados, então quando aparecem, ela olha.

   TEMAS
     Claro é o padrão. Escuro entra por escolha da usuária ou pelo ajuste do
     próprio aparelho. A troca acontece só nos tokens abaixo: nenhuma regra
     depois desta seção repete cor literal.

   TAMANHOS
     Base 17px e alvo de toque de 44px. As usuárias têm pouca familiaridade
     digital, e o sistema é usado no celular durante o atendimento.
   ========================================================================== */

/* --------------------------------------------------------------------------
   TEMA CLARO — padrão
   -------------------------------------------------------------------------- */
:root {
  --papel:          #F6F5FA;   /* fundo: branco com um toque frio de lilás  */
  --papel-alto:     #FFFFFF;   /* cartões                                   */
  --tinta:          #191833;   /* texto principal                           */
  --tinta-fraca:    #5A5876;   /* texto secundário                          */
  --linha:          #E2E0EC;   /* divisórias                                */

  --azul:           #2B4CB8;
  --azul-claro:     #EAEEFA;
  --sobre-azul:     #FFFFFF;   /* texto por cima do azul cheio              */

  --verde:          #1F7A4D;
  --verde-claro:    #E3F4EB;
  --sobre-verde:    #FFFFFF;

  --roxo:           #6B4E9E;
  --roxo-claro:     #F0EBF8;
  --sobre-roxo:     #FFFFFF;

  --vermelho:       #B92D45;
  --vermelho-claro: #FBEBEE;
  --sobre-vermelho: #FFFFFF;

  --sombra:      0 1px 2px rgba(25,24,51,.06), 0 4px 12px rgba(25,24,51,.05);
  --sombra-alta: 0 12px 40px rgba(25,24,51,.18);
  --veu:         rgba(25,24,51,.4);   /* fundo atrás dos diálogos           */

  /* Espaço e forma não mudam entre temas */
  --e1: 4px;  --e2: 8px;  --e3: 12px; --e4: 16px;
  --e5: 24px; --e6: 32px; --e7: 48px; --e8: 64px;
  --raio: 10px;
  --toque: 48px;

  --fonte-titulo: Georgia, "Times New Roman", "Noto Serif", serif;
  --fonte-texto:  -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                  "Helvetica Neue", Arial, sans-serif;

  color-scheme: light;
}

/* --------------------------------------------------------------------------
   TEMA ESCURO

   Não é o tema claro invertido. Três ajustes deliberados:

   1. O fundo é #141322, não preto. Preto puro com texto branco aumenta o
      efeito de rastro nas letras e cansa mais em leitura longa.
   2. As cores fortes clareiam. #2B4CB8 sobre fundo escuro fica ilegível;
      o azul do tema escuro é mais claro e menos saturado.
   3. O texto por cima de botão cheio fica ESCURO. Botão azul claro com
      letra branca não teria contraste suficiente.
   -------------------------------------------------------------------------- */
[data-tema="escuro"] {
  --papel:          #141322;
  --papel-alto:     #1D1C30;
  --tinta:          #ECEBF4;
  --tinta-fraca:    #A3A1BE;
  --linha:          #2F2D48;

  --azul:           #8AA2F0;
  --azul-claro:     #202748;
  --sobre-azul:     #10101F;

  --verde:          #5FD39B;
  --verde-claro:    #143223;
  --sobre-verde:    #08160F;

  --roxo:           #B79BE4;
  --roxo-claro:     #2A2243;
  --sobre-roxo:     #14101F;

  --vermelho:       #F2879A;
  --vermelho-claro: #3B1E27;
  --sobre-vermelho: #1F0C11;

  --sombra:      0 1px 2px rgba(0,0,0,.4), 0 4px 12px rgba(0,0,0,.3);
  --sombra-alta: 0 12px 40px rgba(0,0,0,.55);
  --veu:         rgba(6,6,14,.66);

  color-scheme: dark;
}

/* Sem escolha salva, segue o ajuste do aparelho. O seletor cobre tanto
   "nunca escolheu" quanto "escolheu automático". */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    --papel:          #141322;
    --papel-alto:     #1D1C30;
    --tinta:          #ECEBF4;
    --tinta-fraca:    #A3A1BE;
    --linha:          #2F2D48;

    --azul:           #8AA2F0;
    --azul-claro:     #202748;
    --sobre-azul:     #10101F;

    --verde:          #5FD39B;
    --verde-claro:    #143223;
    --sobre-verde:    #08160F;

    --roxo:           #B79BE4;
    --roxo-claro:     #2A2243;
    --sobre-roxo:     #14101F;

    --vermelho:       #F2879A;
    --vermelho-claro: #3B1E27;
    --sobre-vermelho: #1F0C11;

    --sombra:      0 1px 2px rgba(0,0,0,.4), 0 4px 12px rgba(0,0,0,.3);
    --sombra-alta: 0 12px 40px rgba(0,0,0,.55);
    --veu:         rgba(6,6,14,.66);

    color-scheme: dark;
  }
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: 17px; }

body {
  font-family: var(--fonte-texto);
  background: var(--papel);
  color: var(--tinta);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  padding-bottom: 88px;            /* espaço da barra inferior */
  transition: background-color .15s ease, color .15s ease;
}

@media (min-width: 900px) {
  body { padding-bottom: 0; padding-left: 232px; }
}

/* ==========================================================================
   Tipografia
   ========================================================================== */

h1, h2, h3 { font-family: var(--fonte-titulo); font-weight: 600; line-height: 1.2; }
h1 { font-size: 1.85rem; letter-spacing: -.015em; }
h2 { font-size: 1.35rem; }
h3 { font-size: 1.1rem; }

.rotulo {
  font-size: .78rem; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--tinta-fraca);
}

.apoio { font-size: .9rem; color: var(--tinta-fraca); }

/* ==========================================================================
   Estrutura
   ========================================================================== */

.tela { max-width: 760px; margin: 0 auto; padding: var(--e5) var(--e4) var(--e7); }

.topo { display: flex; align-items: center; gap: var(--e3); margin-bottom: var(--e5); }
.topo h1 { flex: 1; }

.cartao {
  background: var(--papel-alto);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  padding: var(--e4);
  box-shadow: var(--sombra);
}

.pilha > * + * { margin-top: var(--e3); }
.pilha-larga > * + * { margin-top: var(--e5); }

/* ==========================================================================
   Navegação — barra inferior no celular, lateral no computador
   ========================================================================== */

.navegacao {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 20;
  display: flex;
  background: var(--papel-alto);
  border-top: 1px solid var(--linha);
  padding-bottom: env(safe-area-inset-bottom);
}

.navegacao a {
  flex: 1; min-height: var(--toque);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; padding: var(--e2) var(--e1);
  text-decoration: none; color: var(--tinta-fraca);
  font-size: .72rem; font-weight: 600;
}
.navegacao a svg { width: 22px; height: 22px; stroke-width: 1.7; }
.navegacao a[aria-current="page"] { color: var(--azul); }

.marca { display: none; }

@media (min-width: 900px) {
  .navegacao {
    top: 0; right: auto; width: 232px;
    flex-direction: column; justify-content: flex-start;
    border-top: 0; border-right: 1px solid var(--linha);
    padding: var(--e5) var(--e3); gap: var(--e1);
  }
  .navegacao a {
    flex: none; flex-direction: row; justify-content: flex-start;
    gap: var(--e3); padding: 0 var(--e3);
    font-size: .95rem; border-radius: var(--raio);
  }
  .navegacao a[aria-current="page"] { background: var(--azul-claro); }
  .marca {
    display: block;
    font-family: var(--fonte-titulo); font-size: 1.15rem; font-weight: 600;
    padding: 0 var(--e3) var(--e5); color: var(--tinta);
  }
  .marca span {
    display: block; font-family: var(--fonte-texto);
    font-size: .78rem; font-weight: 500; color: var(--tinta-fraca);
  }
}

/* ==========================================================================
   Busca — a tela mais importante do sistema
   ========================================================================== */

.busca-caixa { position: relative; }

.busca-campo {
  width: 100%; min-height: 60px;
  padding: var(--e3) var(--e4) var(--e3) 52px;
  font-family: var(--fonte-texto); font-size: 1.15rem;
  color: var(--tinta);
  background: var(--papel-alto);
  border: 2px solid var(--linha);
  border-radius: var(--raio);
}
.busca-campo:focus { outline: none; border-color: var(--azul); }
.busca-campo::placeholder { color: var(--tinta-fraca); }

.busca-lupa {
  position: absolute; left: var(--e4); top: 50%; transform: translateY(-50%);
  width: 22px; height: 22px; color: var(--tinta-fraca); pointer-events: none;
}

.filtros { display: flex; flex-wrap: wrap; gap: var(--e2); }

.filtro {
  min-height: 40px; padding: 0 var(--e4);
  display: inline-flex; align-items: center;
  font-family: var(--fonte-texto); font-size: .9rem; font-weight: 600;
  color: var(--tinta-fraca);
  background: var(--papel-alto);
  border: 1px solid var(--linha); border-radius: 999px;
  cursor: pointer;
}
.filtro[aria-pressed="true"] {
  color: var(--azul); border-color: var(--azul); background: var(--azul-claro);
}

/* ==========================================================================
   Ficha na lista — o cartão espelha a ficha de papel

   A inicial grande à esquerda reproduz o gesto do arquivo físico: procurar
   pela letra do primeiro nome. É a única ornamentação do sistema.
   ========================================================================== */

.lista-fichas { list-style: none; }
.lista-fichas li + li { margin-top: var(--e2); }

.ficha-item {
  display: flex; align-items: center; gap: var(--e3);
  width: 100%; min-height: 76px;
  padding: var(--e3) var(--e4);
  text-align: left; text-decoration: none;
  background: var(--papel-alto);
  border: 1px solid var(--linha);
  border-left: 4px solid var(--linha);
  border-radius: var(--raio);
  cursor: pointer;
  transition: border-color .12s ease;
}
.ficha-item:hover, .ficha-item:focus-visible { border-color: var(--azul); }
.ficha-item[data-situacao="em_tratamento"] { border-left-color: var(--azul); }
.ficha-item[data-situacao="alta"]          { border-left-color: var(--verde); }
.ficha-item[data-situacao="arquivo"]       { border-left-color: var(--linha); }

.inicial {
  flex: none; width: 44px; height: 44px;
  display: grid; place-items: center;
  font-family: var(--fonte-titulo); font-size: 1.4rem; font-weight: 600;
  color: var(--azul); background: var(--azul-claro);
  border-radius: 50%;
}

.ficha-dados { flex: 1; min-width: 0; }

/* O nome NUNCA é cortado: é justamente o que ela procura na tela. Se for
   comprido, quebra em duas linhas e o cartão cresce. */
.ficha-nome {
  display: block;
  font-family: var(--fonte-titulo); font-size: 1.15rem; font-weight: 600;
  color: var(--tinta);
  overflow-wrap: anywhere;
}
.ficha-meta {
  display: block;
  font-size: .85rem; color: var(--tinta-fraca);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ==========================================================================
   Etiquetas
   ========================================================================== */

.etiqueta {
  flex: none;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px;
  font-size: .78rem; font-weight: 600;
  border-radius: 999px; white-space: nowrap;
}
.etiqueta-azul     { color: var(--azul);     background: var(--azul-claro); }
.etiqueta-verde    { color: var(--verde);    background: var(--verde-claro); }
.etiqueta-roxo     { color: var(--roxo);     background: var(--roxo-claro); }
.etiqueta-vermelho { color: var(--vermelho); background: var(--vermelho-claro); }
.etiqueta-neutra   { color: var(--tinta-fraca); background: var(--papel); border: 1px solid var(--linha); }

/* ==========================================================================
   Botões
   ========================================================================== */

.botao {
  min-height: var(--toque); padding: 0 var(--e5);
  display: inline-flex; align-items: center; justify-content: center; gap: var(--e2);
  font-family: var(--fonte-texto); font-size: 1rem; font-weight: 600;
  border: 1px solid transparent; border-radius: var(--raio);
  cursor: pointer; text-decoration: none;
  transition: filter .12s ease;
}
.botao:hover:not(:disabled) { filter: brightness(.94); }
.botao:disabled { opacity: .5; cursor: not-allowed; }
.botao svg { width: 20px; height: 20px; }

.botao-principal { background: var(--azul);     color: var(--sobre-azul); }
.botao-certo     { background: var(--verde);    color: var(--sobre-verde); }
.botao-roxo      { background: var(--roxo);     color: var(--sobre-roxo); }
.botao-perigo    { background: var(--vermelho); color: var(--sobre-vermelho); }
.botao-contorno  { background: var(--papel-alto); color: var(--tinta); border-color: var(--linha); }
.botao-largo     { width: 100%; }

/* No tema escuro, clarear ao passar o mouse funciona melhor do que
   escurecer — o botão já é claro sobre fundo escuro. */
[data-tema="escuro"] .botao:hover:not(:disabled) { filter: brightness(1.1); }
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) .botao:hover:not(:disabled) { filter: brightness(1.1); }
}

/* ==========================================================================
   Escolha do tema — três opções em botão segmentado
   ========================================================================== */

.tema-opcoes {
  display: flex; gap: var(--e1);
  padding: var(--e1);
  background: var(--papel);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
}

.tema-opcao {
  flex: 1; min-height: 44px;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--e2);
  font-family: var(--fonte-texto); font-size: .92rem; font-weight: 600;
  color: var(--tinta-fraca);
  background: transparent; border: 0; border-radius: 7px;
  cursor: pointer;
}
.tema-opcao svg { width: 18px; height: 18px; }
.tema-opcao[aria-pressed="true"] {
  color: var(--azul); background: var(--papel-alto);
  box-shadow: var(--sombra);
}

/* Em tela estreita os três rótulos com ícone não cabem e "Automático"
   encosta na borda. O ícone sai; a palavra sozinha basta e é o que a
   usuária lê de fato. */
@media (max-width: 430px) {
  .tema-opcao { font-size: .86rem; padding: 0 var(--e1); }
  .tema-opcao svg { display: none; }
}

/* ==========================================================================
   Formulários

   Rótulo sempre visível acima do campo — placeholder some ao digitar e
   deixa quem tem pouca prática sem saber o que aquele campo era.
   ========================================================================== */

.campo { display: block; }
.campo + .campo { margin-top: var(--e4); }

.campo > span {
  display: block; margin-bottom: var(--e1);
  font-size: .9rem; font-weight: 600; color: var(--tinta);
}
.campo .dica { font-weight: 400; color: var(--tinta-fraca); font-size: .82rem; }

.campo input, .campo select, .campo textarea {
  width: 100%; min-height: var(--toque);
  padding: var(--e2) var(--e3);
  font-family: var(--fonte-texto); font-size: 1rem; color: var(--tinta);
  background: var(--papel-alto);
  border: 1px solid var(--linha); border-radius: var(--raio);
}
.campo textarea { min-height: 110px; padding-top: var(--e3); resize: vertical; }
.campo input:focus, .campo select:focus, .campo textarea:focus {
  outline: 2px solid var(--azul); outline-offset: -1px; border-color: var(--azul);
}
.campo input[aria-invalid="true"] { border-color: var(--vermelho); }

.dupla { display: grid; gap: var(--e4); }
@media (min-width: 620px) { .dupla { grid-template-columns: 1fr 1fr; } }

fieldset { border: 0; }
fieldset legend {
  font-size: .78rem; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: var(--tinta-fraca);
  margin-bottom: var(--e3); padding-top: var(--e4);
}

/* ==========================================================================
   Avisos — quatro estados, quatro cores, sempre com texto explicando
   ========================================================================== */

.aviso {
  display: flex; gap: var(--e3);
  padding: var(--e3) var(--e4);
  border-radius: var(--raio);
  border: 1px solid; font-size: .95rem;
}
.aviso svg { flex: none; width: 20px; height: 20px; margin-top: 2px; }
.aviso strong { display: block; }

.aviso-erro   { color: var(--vermelho); background: var(--vermelho-claro); border-color: var(--vermelho); }
.aviso-espera { color: var(--roxo);     background: var(--roxo-claro);     border-color: var(--roxo); }
.aviso-certo  { color: var(--verde);    background: var(--verde-claro);    border-color: var(--verde); }
.aviso-neutro { color: var(--tinta-fraca); background: var(--papel-alto);  border-color: var(--linha); }

/* No tema claro a borda cheia fica pesada; suavizada. No escuro ela ajuda
   a separar o aviso do fundo, então permanece. */
:root:not([data-tema="escuro"]) .aviso {
  border-color: color-mix(in srgb, currentColor 30%, transparent);
}

/* ==========================================================================
   Estados vazios e de carregamento
   ========================================================================== */

.vazio { text-align: center; padding: var(--e7) var(--e4); color: var(--tinta-fraca); }
.vazio h3 { color: var(--tinta); margin-bottom: var(--e2); }

.carregando {
  display: flex; align-items: center; gap: var(--e3);
  padding: var(--e5); color: var(--tinta-fraca); justify-content: center;
}
.girando {
  width: 20px; height: 20px;
  border: 2px solid var(--linha); border-top-color: var(--azul);
  border-radius: 50%; animation: girar .7s linear infinite;
}
@keyframes girar { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ==========================================================================
   Ficha do paciente
   ========================================================================== */

.ficha-cabecalho {
  padding: var(--e5) var(--e4);
  background: var(--papel-alto);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
}
.ficha-cabecalho h1 { font-size: 1.7rem; margin-bottom: var(--e2); }

.dados { display: grid; gap: var(--e3) var(--e5); }
@media (min-width: 620px) { .dados { grid-template-columns: 1fr 1fr; } }
.dado dt {
  font-size: .78rem; font-weight: 600; letter-spacing: .05em;
  text-transform: uppercase; color: var(--tinta-fraca);
}
.dado dd { font-size: 1.05rem; }

.tabela { width: 100%; border-collapse: collapse; font-size: .95rem; }
.tabela th {
  text-align: left; padding: var(--e2) var(--e3);
  font-size: .78rem; font-weight: 600; letter-spacing: .05em;
  text-transform: uppercase; color: var(--tinta-fraca);
  border-bottom: 1px solid var(--linha);
}
.tabela td { padding: var(--e3); border-bottom: 1px solid var(--linha); }
.tabela tr:last-child td { border-bottom: 0; }
.numero { text-align: right; font-variant-numeric: tabular-nums; }

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

/* Valores: verde quando está quitado, vermelho quando falta pagar */
.valor-quitado { color: var(--verde);    font-weight: 600; }
.valor-devendo { color: var(--vermelho); font-weight: 600; }

/* ==========================================================================
   Agenda
   ========================================================================== */

.horario {
  display: flex; gap: var(--e4); align-items: flex-start;
  padding: var(--e3) var(--e4);
  background: var(--papel-alto);
  border: 1px solid var(--linha);
  border-left: 4px solid var(--azul);
  border-radius: var(--raio);
}
.horario[data-encaixe="true"]    { border-left-color: var(--roxo); }
.horario[data-confirmado="true"] { border-left-color: var(--verde); }
.horario time {
  flex: none; width: 62px;
  font-family: var(--fonte-titulo); font-size: 1.2rem; font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   Login
   ========================================================================== */

.entrada { min-height: 100vh; display: grid; place-items: center; padding: var(--e4); }
.entrada-caixa { width: 100%; max-width: 380px; }
.entrada-marca { text-align: center; margin-bottom: var(--e6); }
.entrada-marca h1 { font-size: 1.6rem; }

/* ==========================================================================
   Diálogo
   ========================================================================== */

dialog {
  width: min(440px, calc(100vw - 32px));
  padding: var(--e5);
  color: var(--tinta);
  background: var(--papel-alto);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  box-shadow: var(--sombra-alta);
}
dialog::backdrop { background: var(--veu); }

/* ==========================================================================
   Acessibilidade
   ========================================================================== */

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

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

.pular {
  position: absolute; left: -9999px;
  background: var(--azul); color: var(--sobre-azul);
  padding: var(--e3) var(--e4); border-radius: var(--raio); z-index: 100;
}
.pular:focus { left: var(--e4); top: var(--e4); }