/* ===========================================================================
   PetForte . sistema de estilo
   Uma tabela fixa de cor, letra, espaco, raio, sombra e curva. Nada aqui e
   escolhido no olho, e nenhuma tela inventa valor proprio.

   A pele do balcao e clara de proposito. A recepcionista abre estas telas num
   monitor barato, com a luz da rua batendo atras e um cachorro puxando a
   coleira, e precisa achar um numero em dois segundos. Fundo escuro e vidro
   translucido cobram contraste justamente nessa hora.

   As variaveis --azul e --amarelo continuam sendo as que o motor injeta com a
   cor de cada clinica. Tudo o mais deriva delas ou da tabela abaixo.
   ======================================================================== */
:root{
  /* marca, sobrescrita por clinica em pintarMarca. Paleta fiel decidida em
     22/09/2026 (secao 3 do plano de construcao): azul #16407F, dourado de
     area #F2B705, dourado de texto #8A6A00. --azul e --amtx aqui abaixo
     estavam com valores levemente diferentes (drift de quem preencheu
     este arquivo antes da decisao ficar fechada); corrigido na Fase 9. */
  --azul:#16407F;
  --amarelo:#F2B705;

  /* derivadas da marca */
  --azul2:#2E6BD6;
  --amtx:#8A6A00;

  /* chao, papel e traco */
  --fundo:#F4F6FA;
  --branco:#FFFFFF;
  --papel2:#FBFCFE;
  --linha:#E2E7F0;
  --linha2:#EEF1F7;

  /* tinta, tres niveis e nao mais. --cinza corrigido na Fase 9: o tom
     antigo (#7D879A) dava 3,62:1 sobre branco, abaixo dos 4,5:1 que a
     secao 5.7 do plano exige para todo texto, e --cinza e usado como
     texto de verdade (subtitulo, dica, cabecalho de tabela, rotulo de
     placa), nunca so decoracao. Mesmo tom, mais escuro: 4,69:1. */
  --txt:#141922;
  --txt2:#4E5769;
  --cinza:#6B7488;

  /* estado, separado da marca de proposito */
  --ok:#15683C;   --ok-fundo:#E7F4EC;   --ok-linha:#CBE6D6;
  --perigo:#A8231C; --perigo-fundo:#FCEBEA; --perigo-linha:#F3D3D1;
  --atencao-fundo:#FFF6E0; --atencao-linha:#F0E0B4;

  /* letra */
  --display:"Bricolage Grotesque","Figtree",system-ui,sans-serif;
  --corpo:"Figtree",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;

  /* escalas */
  --e1:4px; --e2:8px; --e3:12px; --e4:16px; --e6:24px; --e8:32px; --e12:48px;
  --r-sm:8px; --r-md:14px; --r-lg:18px; --r-xl:24px; --r-pill:100px;

  /* sombra baixa e larga, nunca dura */
  --sombra-1:0 1px 2px rgba(20,25,34,.05);
  --sombra-2:0 1px 2px rgba(20,25,34,.04), 0 8px 24px -14px rgba(20,25,34,.18);
  --sombra-3:0 1px 2px rgba(20,25,34,.04), 0 16px 40px -20px rgba(20,25,34,.26);
  --foco:0 0 0 3px rgba(46,107,214,.28);

  --curva:cubic-bezier(.22,.68,.28,1);
  --toque:48px;
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0;min-height:100%}
body{
  font-family:var(--corpo);
  color:var(--txt);background:var(--fundo);
  font-size:17px;line-height:1.6;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  font-feature-settings:"cv05" 1;
}
.oculto{display:none !important}

/* ------------------------------------------------------------ estrutura */
#topo{
  background:var(--azul);color:#fff;
  padding:13px 20px;display:flex;align-items:center;gap:14px;
  position:sticky;top:0;z-index:10;
  box-shadow:0 1px 0 rgba(255,255,255,.10) inset, 0 6px 20px -12px rgba(10,16,32,.55);
}
#topo img{
  height:36px;width:auto;border-radius:9px;background:#fff;padding:4px;
  box-shadow:0 2px 8px rgba(0,0,0,.18);
}
#topo .marca{font-family:var(--display);font-weight:800;font-size:1.06rem;line-height:1.15;letter-spacing:-.02em}
#topo .marca small{
  display:block;font-family:var(--corpo);font-weight:500;font-size:.72rem;
  letter-spacing:.02em;opacity:.72;margin-top:1px;
}
#topo .dir{margin-left:auto;display:flex;align-items:center;gap:12px;font-size:.85rem}
#topo button{
  background:rgba(255,255,255,.14);color:#fff;border:1px solid rgba(255,255,255,.16);
  border-radius:var(--r-pill);padding:9px 18px;font:inherit;font-size:.85rem;font-weight:600;
  cursor:pointer;transition:background .45s var(--curva),transform .45s var(--curva);
}
#topo button:hover{background:rgba(255,255,255,.24)}
#topo button:active{transform:scale(.97)}

main{max-width:960px;margin:0 auto;padding:26px 20px 110px}

/* ---------------------------------------------------------------- cartao */
.cartao{
  background:var(--branco);border:1px solid var(--linha);border-radius:var(--r-xl);
  padding:26px 28px;margin-bottom:18px;box-shadow:var(--sombra-2);
}
.cartao h2{
  margin:0 0 4px;font-family:var(--display);font-size:1.22rem;font-weight:800;
  letter-spacing:-.022em;color:var(--azul);line-height:1.2;text-wrap:balance;
}
.cartao .sub{margin:0 0 22px;font-size:.9rem;color:var(--cinza);max-width:68ch}

/* Secao recolhida, para a regra dos sete campos visiveis. */
details{
  border:1px solid var(--linha);border-radius:var(--r-lg);
  margin:14px 0 18px;background:var(--papel2);overflow:hidden;
}
summary{
  padding:14px 18px;cursor:pointer;font-weight:600;font-size:.92rem;color:var(--azul);
  list-style:none;display:flex;align-items:center;gap:10px;
  transition:background .4s var(--curva);
}
summary:hover{background:var(--linha2)}
summary::-webkit-details-marker{display:none}
summary::before{
  content:'';width:18px;height:18px;flex:none;border-radius:6px;
  background:var(--azul2);color:#fff;
  -webkit-mask:no-repeat center/11px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M6 1v10M1 6h10' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  mask:no-repeat center/11px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M6 1v10M1 6h10' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  transition:transform .45s var(--curva);
}
details[open] summary::before{transform:rotate(135deg)}
details .corpo{padding:2px 18px 16px}

/* ----------------------------------------------------------------- campo */
.campo{margin-bottom:17px}
.linha{display:flex;gap:14px;flex-wrap:wrap}
.linha>.campo{flex:1 1 190px;min-width:0}
.linha>.campo.curto{flex:0 1 130px}
label{display:block;font-weight:600;font-size:.88rem;margin-bottom:6px;color:var(--txt2)}
label .opc{font-weight:400;color:var(--cinza);font-size:.82rem}
input,select,textarea{
  width:100%;min-height:var(--toque);padding:12px 14px;
  font-size:1rem;font-family:inherit;color:var(--txt);
  background:var(--branco);border:1.5px solid var(--linha);border-radius:var(--r-md);
  transition:border-color .35s var(--curva),box-shadow .35s var(--curva),background .35s var(--curva);
}
input::placeholder,textarea::placeholder{color:#A5AEBF}
input:hover,select:hover,textarea:hover{border-color:#CBD4E3}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--azul2);box-shadow:var(--foco)}
input[disabled]{background:var(--fundo);color:var(--cinza);cursor:not-allowed}
input[type=number]{font-variant-numeric:tabular-nums}
.dica{font-size:.83rem;color:var(--cinza);margin-top:6px;line-height:1.5}
.erro{font-size:.85rem;color:var(--perigo);font-weight:600;margin-top:6px;display:none}
.campo.mau input,.campo.mau select{border-color:var(--perigo);box-shadow:0 0 0 3px rgba(168,35,28,.14)}
.campo.mau .erro{display:block}

/* ----------------------------------------------------------------- botao */
button.acao{
  min-height:var(--toque);padding:13px 26px;font:inherit;font-family:var(--corpo);
  font-weight:700;font-size:1rem;letter-spacing:-.01em;
  border-radius:var(--r-pill);border:1.5px solid transparent;cursor:pointer;
  transition:background .45s var(--curva),transform .3s var(--curva),box-shadow .45s var(--curva);
}
.pri{
  background:linear-gradient(180deg,var(--azul2),color-mix(in srgb,var(--azul2) 78%,var(--azul)));
  color:#fff;box-shadow:0 1px 2px rgba(20,25,34,.14),0 8px 20px -12px var(--azul2);
}
.pri:hover{box-shadow:0 1px 2px rgba(20,25,34,.16),0 12px 26px -12px var(--azul2)}
.sec{background:var(--branco);color:var(--azul);border-color:var(--linha);box-shadow:var(--sombra-1)}
.sec:hover{border-color:#C6D2E6;background:var(--papel2)}
button.acao:active{transform:scale(.975)}
button.acao:focus-visible{outline:none;box-shadow:var(--foco)}
.acoes{display:flex;gap:12px;flex-wrap:wrap;margin-top:var(--e2)}

/* --------------------------------------------------------- painel do que */
.porque{
  font-size:.82rem;color:var(--azul2);cursor:pointer;background:none;border:0;padding:0;
  font-family:inherit;font-weight:600;text-underline-offset:3px;text-decoration:underline;
}
.porque:hover{color:var(--azul)}
.painel{
  display:none;background:#F1F5FC;border:1px solid #D8E3F5;border-radius:var(--r-lg);
  padding:16px 18px;font-size:.88rem;margin:10px 0 16px;line-height:1.6;
}
.painel.ver{display:block}
.painel h4{margin:0 0 6px;font-family:var(--display);font-size:.95rem;font-weight:600;color:var(--azul)}
.painel .norma{margin-top:10px;font-size:.79rem;font-style:italic;color:#5D6879}

/* ---------------------------------------------------------------- recado */
.recado{
  padding:14px 17px;border-radius:var(--r-md);margin-bottom:16px;font-size:.92rem;
  border:1px solid transparent;line-height:1.55;
}
.recado strong{display:block;margin-bottom:3px;font-weight:600}
.recado.mau{background:var(--perigo-fundo);border-color:var(--perigo-linha);color:#7A1A15}
.recado.bom{background:var(--ok-fundo);border-color:var(--ok-linha);color:#0F4C2B}
.recado.atencao{background:var(--atencao-fundo);border-color:var(--atencao-linha);color:var(--amtx)}

/* ---------------------------------------------------------------- tabela */
.rolagem{
  overflow-x:auto;-webkit-overflow-scrolling:touch;
  border:1px solid var(--linha);border-radius:var(--r-lg);background:var(--branco);
}
table{width:100%;border-collapse:collapse;font-size:.89rem}
th{
  text-align:left;padding:11px 14px;background:var(--papel2);
  font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;
  font-weight:600;color:var(--cinza);border-bottom:1px solid var(--linha);
  white-space:nowrap;
}
td{padding:12px 14px;border-bottom:1px solid var(--linha2);color:var(--txt2)}
tbody tr:last-child td{border-bottom:0}
tbody tr{transition:background .3s var(--curva)}
tbody tr:hover td{background:#F7F9FD}
.num{text-align:right;font-variant-numeric:tabular-nums}

/* ------------------------------------------------------------------ selo */
.selo{
  display:inline-block;font-size:.74rem;font-weight:600;padding:3px 11px;
  border-radius:var(--r-pill);background:#E9EFFA;color:var(--azul);white-space:nowrap;
}
.selo.ok{background:var(--ok-fundo);color:var(--ok)}
.selo.mau{background:var(--perigo-fundo);color:var(--perigo)}
.selo.atencao{background:var(--atencao-fundo);color:var(--amtx)}

/* ----------------------------------------------------------------- placa */
.placas{display:grid;grid-template-columns:repeat(auto-fit,minmax(158px,1fr));gap:13px}
.placa{
  border:1px solid var(--linha);border-radius:var(--r-lg);padding:16px 18px;
  background:var(--papel2);transition:transform .5s var(--curva),box-shadow .5s var(--curva);
}
.placa:hover{transform:translateY(-2px);box-shadow:var(--sombra-2)}
.placa .rot{font-size:.73rem;font-weight:600;color:var(--cinza);letter-spacing:.05em;text-transform:uppercase}
.placa .val{
  font-family:var(--display);font-size:1.62rem;font-weight:800;color:var(--azul);
  letter-spacing:-.032em;font-variant-numeric:tabular-nums;line-height:1.22;margin-top:2px;
}
.placa .pe{font-size:.77rem;color:var(--cinza);line-height:1.4}
.placa.alerta{background:var(--atencao-fundo);border-color:var(--atencao-linha)}
.placa.alerta .val{color:var(--amtx)}

/* -------------------------------------------------------------- carregar */
#carregando{
  position:fixed;inset:0;background:var(--fundo);
  display:flex;align-items:center;justify-content:center;z-index:50;
  font-family:var(--display);font-weight:600;color:var(--azul);letter-spacing:-.01em;
}
#rodape{
  max-width:960px;margin:0 auto;padding:0 20px 36px;font-size:.81rem;color:var(--cinza);line-height:1.6;
}
#rodape a{color:var(--azul2)}

/* -------------------------------------------------------------- entrada */
#tela{animation:sobe .5s var(--curva) both}
@keyframes sobe{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* ------------------------------------------------------------- responsivo */
@media(max-width:640px){
  body{font-size:16px}
  main{padding:18px 15px 96px}
  .cartao{padding:20px 18px;border-radius:var(--r-lg)}
  .linha>.campo{flex:1 1 100%}
  #topo{padding:12px 15px}
  #topo .dir span{display:none}
  .acoes button.acao{flex:1 1 100%}
}
@media(prefers-reduced-motion:reduce){
  *{transition:none !important;animation:none !important}
}