/* ---------------------------------------------------------------------------
   A cara do sistema — escrita para o CELULAR primeiro.

   Isto não é "responsivo depois": as regras de base são as do telefone, e o
   computador é que recebe os ajustes lá embaixo, na media query de tela
   grande. A ordem importa. Quando se desenha para o desktop e se conserta o
   telefone no fim, sobra sempre uma tabela que rola para o lado e um botão
   que fica embaixo do teclado — e este sistema vai ser usado no telefone em
   99% das vezes, em pé, no corredor da clínica, com uma mão só.

   As três decisões que vêm disso:

   1. O MENU FICA EMBAIXO. É onde o polegar chega. Menu no topo de um celular
      de 6 polegadas exige a segunda mão ou o malabarismo de escorregar o
      aparelho na palma.
   2. NÃO EXISTE TABELA NO TELEFONE. Toda listagem vira cartão empilhado. Uma
      tabela de cinco colunas em 360px de largura ou rola para o lado (e a
      coluna do valor fica escondida, que é justamente a que importa) ou
      espreme a fonte até ninguém ler.
   3. CAMPO DE TEXTO COM 16px. Abaixo disso o Safari do iPhone dá zoom sozinho
      ao focar, a tela salta, e a pessoa perde o lugar onde estava digitando.
--------------------------------------------------------------------------- */
:root {
  --fundo:#f6f6f7; --papel:#fff; --linha:#e4e4e7; --texto:#18181b; --fraco:#52525b;
  --apagado:#a1a1aa; --azul:#2563eb; --verde:#16a34a; --vermelho:#dc2626;
  --ambar:#d97706; --roxo:#7c3aed;
  --sombra:0 1px 2px rgba(0,0,0,.04), 0 1px 8px rgba(0,0,0,.03);
  --barra:62px;                                  /* altura do menu de baixo */
  --pe:env(safe-area-inset-bottom, 0px);         /* a faixa do iPhone sem botão */
}
* { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body { margin:0; padding:0; background:var(--fundo); color:var(--texto);
  font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  font-size:16px; -webkit-font-smoothing:antialiased;
  overscroll-behavior-y:none; }
/* `hidden` tem que esconder SEMPRE. Sem isto, qualquer regra de `display`
   numa classe passa por cima do atributo: os campos de data do "Período"
   ficavam abertos em toda tela, com o seletor fechado, porque `.faixa-datas`
   declara `display:flex`. */
[hidden] { display:none !important; }
body { visibility:hidden; }
body.pronto, body.livre { visibility:visible; }
.mono { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-variant-numeric:tabular-nums; }

/* ================================ MENU (embaixo no celular) ============= */
.menu { position:fixed; left:0; right:0; bottom:0; z-index:30;
  background:var(--papel); border-top:1px solid var(--linha);
  padding:6px 4px calc(6px + var(--pe)); display:flex; align-items:stretch; }
.menu-topo, .menu-sair { display:none; }          /* no celular vivem no cabeçalho */
.menu-links { display:flex; flex:1; }
.menu-link { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:3px; padding:7px 2px; border-radius:10px; text-decoration:none;
  color:var(--apagado); font-size:.66rem; font-weight:600; letter-spacing:.01em;
  min-height:48px; }                              /* alvo de toque confortável */
.menu-link.on { color:var(--texto); }
.menu-icone { font-size:1.15rem; line-height:1; }
.menu-link.on .menu-icone { transform:translateY(-1px); }

/* O cabeçalho do celular: quem está logado e a saída, fora do caminho. */
.cabeca { display:flex; align-items:center; justify-content:space-between;
  padding:14px 16px 0; }
.cabeca-conta { font-size:.78rem; color:var(--apagado); font-weight:600; }
.cabeca-sair { background:none; border:none; color:var(--apagado); font:inherit;
  font-size:.78rem; padding:6px; cursor:pointer; }

.pagina { padding:6px 16px calc(var(--barra) + var(--pe) + 28px); }
h1 { font-size:1.35rem; font-weight:700; letter-spacing:-.02em; margin:10px 0 0; }
.sub { color:var(--fraco); font-size:.85rem; line-height:1.5; margin:5px 0 18px; }

/* =================================== peças ============================== */
.cartao { background:var(--papel); border:1px solid var(--linha); border-radius:14px; box-shadow:var(--sombra); }
.rotulo { font-size:.66rem; text-transform:uppercase; letter-spacing:.06em; color:var(--fraco); font-weight:700; }
.numerao { font-size:1.5rem; font-weight:700; letter-spacing:-.025em; margin-top:3px; }
.nota { font-size:.73rem; color:var(--apagado); margin-top:3px; line-height:1.45; }
.grade { display:grid; gap:12px; }
.g2 { grid-template-columns:1fr 1fr; }
.verde { color:var(--verde); } .vermelho { color:var(--vermelho); } .ambar { color:var(--ambar); }

/* O `appearance:none` aqui é para o select e o campo de data não virem com a
   cara do sistema operacional. Mas ele NÃO pode pegar caixa de marcar:
   `appearance:none` num checkbox apaga o próprio check, e sobra um quadrado
   vazio que nunca muda de aparência. Foi exatamente isso que fez o botão
   "Já foi pago" parecer quebrado — ele funcionava, e não tinha como saber. */
input:not([type=checkbox]):not([type=radio]), select, textarea {
  font:inherit; font-size:16px; color:inherit; background:var(--papel);
  border:1px solid var(--linha); border-radius:11px; padding:13px 14px; width:100%;
  appearance:none; -webkit-appearance:none; }
input[type=checkbox], input[type=radio] { accent-color:var(--texto); }
select { 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 d='M1 1l5 5 5-5' stroke='%2352525b' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center; padding-right:36px; }
input:focus, select:focus { outline:2px solid #bfdbfe; outline-offset:-1px; border-color:var(--azul); }
label { display:block; font-size:.75rem; font-weight:650; color:var(--fraco); margin-bottom:6px; }
.botao { background:var(--texto); color:#fff; border:none; border-radius:12px;
  padding:15px 18px; font-weight:650; font-size:1rem; cursor:pointer; min-height:50px; width:100%; }
.botao:active { transform:scale(.99); }
.botao:disabled { opacity:.45; }
.botao.claro { background:var(--papel); color:var(--texto); border:1px solid var(--linha); }
.botao.perigo { background:var(--vermelho); }
.botao.pequeno { padding:9px 14px; font-size:.85rem; min-height:40px; width:auto; }

/* Ação secundária com cara de link, dentro de um texto ("mudar meta").
   Tem classe própria porque a primeira versão pegava emprestada a `.menu-sair`
   — que é escondida no celular, onde o menu vive no cabeçalho. Resultado: no
   telefone, que é 99% do uso, não dava para definir meta de ninguém. O padding
   vertical é para o polegar acertar sem a linha ficar mais alta. */
.link { background:none; border:none; padding:6px 0; margin:-6px 0; font:inherit; font-size:inherit;
  color:var(--azul); text-decoration:underline; cursor:pointer; }

/* ============================== escolha de dois ========================== */
/* Dois botões grandes em vez de uma caixinha de marcar.
   No celular, a caixa de marcar de 22px é um alvo pequeno, e o estado dela
   ("marcado" x "não marcado") depende de um detalhe visual de poucos pixels.
   Dois botões dizem o estado por palavra e por cor, e cada um é do tamanho do
   polegar. O mesmo padrão do "Saiu / Entrou dinheiro", por coerência. */
.escolha { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.escolha button { padding:13px 8px; border:1px solid var(--linha); border-radius:12px;
  background:var(--papel); color:var(--fraco); font:inherit; font-weight:600; font-size:.88rem;
  cursor:pointer; min-height:48px; }
.escolha button.on { background:var(--texto); color:#fff; border-color:var(--texto); }
.escolha button.on.aberto { background:var(--ambar); border-color:var(--ambar); }

/* O botão de quitar uma conta. Alvo de verdade, não etiqueta.
   A primeira versão era uma pílula pequena no meio de outras pílulas — dava
   para errar o toque e não parecia clicável. */
.pagar { background:var(--papel); color:var(--ambar); border:1px solid var(--ambar);
  border-radius:10px; padding:9px 15px; font:inherit; font-size:.82rem; font-weight:700;
  cursor:pointer; min-height:40px; white-space:nowrap; }
.pagar:active { background:var(--ambar); color:#fff; }
.pagar.forte { background:var(--ambar); color:#fff; }

/* ================================== período ============================= */
/* Rola na horizontal de propósito: seis faixas quebradas em duas linhas
   empurram o conteúdo da tela para baixo da dobra logo na abertura. */
.periodo { display:flex; gap:7px; margin:0 -16px 18px; padding:2px 16px 8px;
  overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch; }
.periodo::-webkit-scrollbar { display:none; }
/* Com as datas abertas, a fila quebra em vez de rolar: dentro do rolamento
   horizontal, os botões esticavam até a altura dos campos de data. */
.periodo { align-items:center; }
.periodo:has(.faixa-datas:not([hidden])) { flex-wrap:wrap; overflow:visible; }
.faixa { font-size:.85rem; padding:9px 15px; border-radius:999px; border:1px solid var(--linha);
  background:var(--papel); color:var(--fraco); cursor:pointer; white-space:nowrap; flex:0 0 auto; min-height:40px; }
.faixa.on { background:var(--texto); color:#fff; border-color:var(--texto); font-weight:650; }
.faixa-datas { display:flex; gap:7px; align-items:center; flex-wrap:wrap; width:100%;
  order:99; margin-top:4px; font-size:.85rem; }
.faixa-datas input { width:auto; flex:1 1 130px; padding:9px 11px; }
.faixa-ok { font-size:.85rem; padding:9px 16px; border-radius:999px; border:none;
  background:var(--texto); color:#fff; cursor:pointer; min-height:40px; }
.faixa-aviso { color:var(--vermelho); font-size:.78rem; width:100%; }

/* ============================== listas em cartão ======================== */
/* O substituto da tabela no telefone. Cada linha é um bloco com o que importa
   grande (a descrição e o valor) e o resto pequeno embaixo. */
.itens { display:flex; flex-direction:column; }
.item-linha { display:flex; align-items:flex-start; justify-content:space-between; gap:12px;
  padding:14px 16px; border-bottom:1px solid #f4f4f5; }
.item-linha:last-child { border-bottom:none; }
.item-oq { font-size:.94rem; font-weight:550; line-height:1.3; word-break:break-word; }
.item-meta { display:flex; align-items:center; gap:7px; flex-wrap:wrap; margin-top:5px; }
.item-valor { font-size:.98rem; font-weight:700; white-space:nowrap; text-align:right; }
.item-acao { background:none; border:none; color:var(--apagado); font-size:1.2rem;
  padding:4px 2px 4px 8px; cursor:pointer; line-height:1; }

.etiqueta { display:inline-flex; align-items:center; gap:5px; font-size:.7rem; padding:3px 9px;
  border-radius:999px; background:#f4f4f5; color:var(--fraco); white-space:nowrap; }
.etiqueta.toque { border:none; font:inherit; font-size:.7rem; cursor:pointer; min-height:28px; }
.ponto { width:7px; height:7px; border-radius:50%; display:inline-block; flex:0 0 auto; }
.vazio { padding:40px 22px; text-align:center; color:var(--apagado); font-size:.88rem; line-height:1.5; }

.barra-fundo { height:8px; border-radius:999px; background:#f1f1f3; overflow:hidden; }
.barra { height:100%; border-radius:999px; display:block; }

.aviso { border:1px solid #fde68a; background:#fffbeb; color:#92400e;
  border-radius:12px; padding:12px 14px; font-size:.85rem; line-height:1.55; }
.erro { border:1px solid #fecaca; background:#fef2f2; color:#991b1b;
  border-radius:12px; padding:12px 14px; font-size:.88rem; }
.recado { font-size:.85rem; padding:11px 13px; border-radius:11px; margin-top:12px; line-height:1.45; }
.recado.bom { background:#f0fdf4; color:#166534; border:1px solid #bbf7d0; }
.recado.ruim { background:#fef2f2; color:#991b1b; border:1px solid #fecaca; }

/* ============================ gaveta de escolha ========================= */
/* Substitui o `prompt()` do navegador, que no celular abre uma caixinha do
   sistema pedindo para "digitar o número da opção" — impossível de usar com
   uma mão e feio em qualquer aparelho. Aqui a escolha sobe de baixo, com os
   itens no tamanho do polegar. */
.gaveta-fundo { position:fixed; inset:0; background:rgba(0,0,0,.35); z-index:40;
  display:flex; align-items:flex-end; animation:aparecer .15s ease-out; }
.gaveta { background:var(--papel); width:100%; border-radius:18px 18px 0 0;
  max-height:82vh; display:flex; flex-direction:column;
  padding-bottom:var(--pe); animation:subir .22s cubic-bezier(.32,.72,0,1); }
.gaveta-topo { padding:16px 18px 12px; border-bottom:1px solid var(--linha); }
.gaveta-titulo { font-weight:700; font-size:1rem; }
.gaveta-lista { overflow-y:auto; -webkit-overflow-scrolling:touch; padding:6px 0; }
.gaveta-op { display:flex; align-items:center; gap:10px; width:100%; text-align:left;
  background:none; border:none; font:inherit; font-size:.96rem; padding:15px 18px; cursor:pointer;
  min-height:52px; color:var(--texto); }
.gaveta-op:active { background:#f4f4f5; }
.gaveta-op.on { font-weight:700; }
.gaveta-fechar { margin:8px 18px 16px; }
@keyframes subir { from { transform:translateY(100%); } to { transform:translateY(0); } }
@keyframes aparecer { from { opacity:0; } to { opacity:1; } }

/* A tabela só existe em tela grande — no telefone o HTML dela nem é gerado. */
table { width:100%; border-collapse:collapse; font-size:.88rem; }
thead th { text-align:left; font-size:.66rem; text-transform:uppercase; letter-spacing:.05em;
  color:var(--fraco); font-weight:700; padding:10px 12px; border-bottom:1px solid var(--linha); }
tbody td { padding:11px 12px; border-bottom:1px solid #f4f4f5; }
tbody tr:last-child td { border-bottom:none; }
.dir { text-align:right; }
.so-grande { display:none; }
.so-celular { display:block; }
/* O menu manda os mesmos itens duas vezes — a lista completa para a coluna do
   computador e a curta para a barra do celular — e o CSS escolhe qual aparece.
   Um HTML só evita a versão "de celular" que alguém esquece de atualizar. */
.so-grande-flex { display:none !important; }
.so-celular-flex { display:flex !important; }

/* ======================================================================== */
/* ============================ TELA GRANDE =============================== */
/* Daqui para baixo é o computador. Tudo acima já funcionava sem isto.       */
/* ======================================================================== */
@media (min-width:860px) {
  :root { --menu:236px; }
  .menu { position:fixed; inset:0 auto 0 0; width:var(--menu); border-top:none;
    border-right:1px solid var(--linha); flex-direction:column; padding:22px 14px; }
  .menu-topo { display:block; padding:0 8px 18px; border-bottom:1px solid var(--linha); margin-bottom:14px; }
  .menu-conta { font-weight:650; letter-spacing:-.01em; }
  .menu-quem { font-size:.78rem; color:var(--apagado); margin-top:2px; }
  .menu-links { flex-direction:column; gap:2px; }
  .menu-link { flex-direction:row; justify-content:flex-start; gap:10px; padding:10px;
    font-size:.9rem; font-weight:500; color:var(--fraco); min-height:0; }
  .menu-link:hover { background:#f4f4f5; color:var(--texto); }
  .menu-link.on { background:var(--texto); color:#fff; font-weight:600; }
  .menu-icone { font-size:1rem; width:18px; text-align:center; }
  .menu-sair { display:block; margin-top:auto; background:none; border:none; color:var(--apagado);
    font-size:.8rem; text-align:left; padding:8px 10px; cursor:pointer; }
  .menu-sair:hover { color:var(--vermelho); }
  .cabeca { display:none; }

  /* Os itens do menu NÃO esticam. No celular eles dividem a barra de baixo
     (`flex:1`); herdado na coluna do computador, o mesmo `flex:1` fazia cada
     item crescer até ocupar a altura da tela — oito botões de 80px. */
  .menu-links, .menu-link { flex:0 0 auto; }

  /* O conteúdo fica centrado no espaço que sobra ao lado do menu, com uma
     largura de leitura. Encostado à esquerda, num monitor de 1440px, sobrava
     uma faixa vazia à direita e o valor de cada linha ficava longe da
     descrição dela. */
  :root { --largura:1180px; }
  .pagina { margin-left:calc(var(--menu) + max(0px, (100vw - var(--menu) - var(--largura)) / 2));
    padding:28px 32px 64px; max-width:var(--largura); }

  /* Campo de texto no computador: mais baixo e sem o tamanho de polegar. O
     16px do telefone (contra o zoom do Safari) não é necessário aqui. */
  input:not([type=checkbox]):not([type=radio]), select, textarea { padding:10px 13px; font-size:15px; border-radius:10px; }
  .faixa-datas { width:auto; flex-wrap:nowrap; margin:0 0 0 6px; order:0; }
  .faixa-datas input { flex:0 0 170px; padding:7px 10px; font-size:14px; }
  .item-linha { padding:12px 18px; }
  .cartao { border-radius:12px; }
  h1 { font-size:1.5rem; }
  .numerao { font-size:1.7rem; }
  .botao { width:auto; min-height:44px; padding:12px 20px; font-size:.92rem; }
  .periodo { margin:0 0 20px; padding:0; flex-wrap:wrap; overflow:visible; }
  .faixa, .faixa-ok { min-height:0; padding:7px 14px; font-size:.83rem; }
  .so-grande { display:block; }
  .so-celular { display:none; }
  .so-grande-flex { display:flex !important; }
  .so-celular-flex { display:none !important; }
  tbody tr:hover { background:#fafafa; }

  .gaveta-fundo { align-items:center; justify-content:center; padding:24px; }
  .gaveta { max-width:420px; border-radius:16px; animation:aparecer .15s ease-out; }
}