/* Layout Âmbar — o mesmo desenho já aplicado no HubTax, trazido para cá.
 *
 * Arquivo NOVO: não substitui nem edita o app.css, que continua servindo todas
 * as telas atuais. Só quem estende ambar/base.html carrega este.
 *
 * Duas metades:
 *
 *   1. tokens, shell e átomos do Âmbar (rail, topo, cartão, selo, tabela);
 *   2. as classes que as telas deste sistema JÁ usam (.card, .btn-primary,
 *      .badge-green, .form-control, .tabs, .alert, .modal-box, .week-grid...),
 *      redesenhadas com os mesmos tokens.
 *
 * A segunda metade é o que torna a migração viável: ao trocar a base de uma
 * tela, ela ganha o visual novo sem ter a marcação reescrita linha a linha.
 *
 * Fonte: aqui é a Inter, servida por este domínio (o @font-face está no
 * app.css), e não a Onest do Google que o HubTax usa. O desenho é irmão e a
 * decisão de não bloquear a tela esperando DNS + TLS do Google continua de pé.
 */

/* Paleta clara em azul e branco (28/09/2026). Antes era ambar -- o backup do
   arquivo inteiro esta em ambar.css.bak-ambar-20260928.

   Fundo em azul bem claro, cartoes em branco puro: o contraste entre os dois e'
   o que separa conteudo de pagina sem precisar de borda forte.

   --sig e' a cor de acao (botoes primarios) e --sig-on e' o texto EM CIMA dela.
   Com o ambar, o texto era quase preto; com azul medio precisa ser branco --
   #1C6DBA com branco da 5.3:1, acima dos 4.5:1 que a WCAG pede para texto
   normal. Trocar so o --sig e deixar o --sig-on escuro deixaria os botoes
   ilegiveis.

   As cores semanticas (ok/warn/crit) ficam como estao: verde, amarelo e
   vermelho comunicam estado, nao identidade visual.

   O modo escuro abaixo segue ambar, por decisao de quem pediu a mudanca. */
:root{
  --bg:#F2F7FC; --surface:#FFFFFF; --surface-2:#E6F0F9; --surface-3:#F8FBFE;
  --line:#D4E3F0; --line-2:#B3CCE0;
  --ink:#12212E; --ink-2:#40566B; --ink-3:#71879B;
  --sig:#1C6DBA; --sig-2:#155799; --sig-soft:#DCEBF8; --sig-on:#FFFFFF;
  --ok:#1F7048; --ok-soft:#E0EFE7;
  --warn:#93600A; --warn-soft:#F8EDD5;
  --crit:#AC2A1D; --crit-soft:#F9E3E0;
  --info:#2C5578; --info-soft:#E3EBF2;
  --r:14px; --r-sm:9px;
  --shadow:0 1px 2px rgba(18,33,46,.05), 0 14px 34px -20px rgba(18,33,46,.30);
  --shadow-h:0 2px 6px rgba(18,33,46,.08), 0 22px 46px -22px rgba(18,33,46,.40);
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#121210; --surface:#1A1A17; --surface-2:#23231F; --surface-3:#161614;
    --line:#2B2B26; --line-2:#3C3C35;
    --ink:#F0EFEA; --ink-2:#AEADA4; --ink-3:#82817A;
    --sig:#F2C238; --sig-2:#FFD65F; --sig-soft:#332809; --sig-on:#211900;
    --ok:#56BE83; --ok-soft:#12301F;
    --warn:#DDA943; --warn-soft:#32250C;
    --crit:#EE8378; --crit-soft:#3A1B17;
    --info:#7FAAD4; --info-soft:#15222E;
    --shadow:0 1px 2px rgba(0,0,0,.5), 0 14px 34px -20px rgba(0,0,0,.85);
    --shadow-h:0 2px 6px rgba(0,0,0,.6), 0 22px 46px -22px rgba(0,0,0,.95);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#121210; --surface:#1A1A17; --surface-2:#23231F; --surface-3:#161614;
  --line:#2B2B26; --line-2:#3C3C35;
  --ink:#F0EFEA; --ink-2:#AEADA4; --ink-3:#82817A;
  --sig:#F2C238; --sig-2:#FFD65F; --sig-soft:#332809; --sig-on:#211900;
  --ok:#56BE83; --ok-soft:#12301F;
  --warn:#DDA943; --warn-soft:#32250C;
  --crit:#EE8378; --crit-soft:#3A1B17;
  --info:#7FAAD4; --info-soft:#15222E;
  --shadow:0 1px 2px rgba(0,0,0,.5), 0 14px 34px -20px rgba(0,0,0,.85);
  --shadow-h:0 2px 6px rgba(0,0,0,.6), 0 22px 46px -22px rgba(0,0,0,.95);
  color-scheme:dark;
}

/* Nomes do tema anterior apontando para os tokens novos.
 *
 * Dezenas de telas trazem CSS embutido escrito com eles (--border no
 * odontograma, --text-muted na ajuda, --primary no gráfico do painel). Redirecionar
 * aqui faz todas seguirem a paleta nova — inclusive no tema escuro — sem
 * reescrever estilo tela por tela, e sem deixar sobra do visual antigo.
 */
:root{
  --primary:var(--sig-2); --primary-dark:var(--sig-2); --primary-light:var(--sig-soft);
  --blue:var(--info); --blue-dark:var(--info);
  --accent:var(--info);
  --green:var(--ok); --green-dark:var(--ok);
  --red:var(--crit); --amber:var(--warn);
  --border:var(--line);
  --text:var(--ink); --text-muted:var(--ink-3);
  --sidebar-bg:var(--surface);
  --radius:var(--r); --radius-sm:var(--r-sm);
  --shadow-sm:none; --shadow-md:var(--shadow); --shadow-lg:var(--shadow-h);
}

*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font-size:14px;line-height:1.45;
  font-family:"Inter",-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
input,select,textarea{font:inherit;color:inherit}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--sig);outline-offset:2px;border-radius:6px}
h1,h2,h3{margin:0;letter-spacing:-.02em}
.tnum,.mono{font-variant-numeric:tabular-nums}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:10px}

/* ============================ shell ============================ */
.shell{display:grid;grid-template-columns:62px 1fr;min-height:100vh}
.rail{background:var(--surface);border-right:1px solid var(--line);display:flex;flex-direction:column;
  align-items:center;gap:5px;padding:14px 0;position:sticky;top:0;height:100vh;z-index:20;
  overflow-y:auto;overflow-x:hidden;scrollbar-width:thin}
.rail::-webkit-scrollbar{width:6px}
.rl-topo{display:flex;flex-direction:column;align-items:center;gap:6px;margin-bottom:8px;width:100%}
.rl-mark{width:32px;height:32px;border-radius:9px;background:var(--ink);color:var(--bg);
  display:grid;place-items:center;font-weight:700;font-size:13px;letter-spacing:-.03em;flex:0 0 32px;
  overflow:hidden}
.rl-mark img{width:100%;height:100%;object-fit:contain}
.rl-alt{width:26px;height:26px;border-radius:7px;display:grid;place-items:center;color:var(--ink-3)}
.rl-alt:hover{background:var(--surface-2);color:var(--ink)}
.rl-alt svg{width:15px;height:15px;transition:transform .16s}
.rl-secao{display:none}
.rl{width:38px;height:38px;border-radius:10px;display:grid;place-items:center;color:var(--ink-3);position:relative}
.rl .rot{display:none}
.rl:hover{background:var(--surface-2);color:var(--ink)}
.rl.on{background:var(--ink);color:var(--bg)}
.rl svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.rl .bd{position:absolute;top:6px;right:5px;width:7px;height:7px;border-radius:50%;background:var(--crit);
  border:2px solid var(--surface)}
.rail .sp{margin-top:auto}
/* fixed, e não absolute: a barra rola quando não cabe, e o balão ficaria
   cortado na borda dela. O topo vem do JS, no hover. */
.tip{position:fixed;left:56px;background:var(--ink);color:var(--bg);font-size:11.5px;font-weight:600;
  padding:4px 8px;border-radius:6px;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .14s;z-index:30}
.rl:hover .tip{opacity:1}

/* barra expandida: mesma marcação, a seta do topo troca a largura */
.shell.aberto{grid-template-columns:216px 1fr}
.shell.aberto .rail{align-items:stretch;padding:14px 10px}
.shell.aberto .rl-topo{flex-direction:row;align-items:center;padding:0 4px}
.shell.aberto .rl-alt{margin-left:auto}
.shell.aberto .rl-alt svg{transform:rotate(180deg)}
.shell.aberto .rl{width:100%;height:36px;display:flex;align-items:center;gap:10px;padding:0 10px}
.shell.aberto .rl .rot{display:block;font-size:13px;font-weight:500;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.shell.aberto .rl.on .rot{font-weight:600}
.shell.aberto .rl svg{flex:0 0 19px}
.shell.aberto .rl .bd{position:static;margin-left:auto;border:0;width:8px;height:8px}
.shell.aberto .tip{display:none}
.shell.aberto .rl-secao{display:block;font-size:10px;letter-spacing:.07em;text-transform:uppercase;
  color:var(--ink-3);font-weight:600;padding:10px 10px 4px}

.main{min-width:0;display:flex;flex-direction:column}
.top{display:flex;align-items:center;gap:12px;padding:14px 24px;position:sticky;top:0;z-index:15;
  background:color-mix(in srgb,var(--bg) 90%,transparent);backdrop-filter:blur(10px)}
.bc{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--ink-3);font-weight:500;min-width:0}
.bc b{color:var(--ink);font-weight:600}
.usr{display:flex;align-items:center;gap:9px;min-width:0;padding-left:12px;border-left:1px solid var(--line)}
.usr .sq{flex:0 0 29px;font-weight:600}
.usr .bd2{min-width:0}
.usr b{display:block;font-size:12.5px;font-weight:600;line-height:1.25;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:170px}
.usr small{display:block;font-size:11px;color:var(--ink-3);line-height:1.25}
@media (max-width:680px){ .usr .bd2{display:none} }
.ic{width:36px;height:36px;border-radius:10px;border:1px solid var(--line);display:grid;place-items:center;
  color:var(--ink-2);background:var(--surface);flex:0 0 auto}
.ic:hover{border-color:var(--line-2);color:var(--ink)}

.view{padding:4px 24px 48px;display:flex;flex-direction:column;gap:16px;flex:1;min-width:0}
.phead{display:flex;align-items:flex-end;gap:14px;flex-wrap:wrap}
.phead h1{font-size:25px;letter-spacing:-.03em;font-weight:600}
.phead p{margin:4px 0 0;color:var(--ink-3);font-size:13px}
.phead .r{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap;align-items:center}

/* ============================ átomos ============================ */
.btn{border:1px solid var(--line);border-radius:9px;padding:8px 13px;font-size:13px;font-weight:600;
  color:var(--ink-2);background:var(--surface);display:inline-flex;align-items:center;gap:7px;
  text-align:center;cursor:pointer}
.btn:hover{border-color:var(--line-2);color:var(--ink)}
.btn.s{background:var(--sig);border-color:var(--sig);color:var(--sig-on)}
.btn.s:hover{background:var(--sig-2);border-color:var(--sig-2);color:var(--sig-on)}
.btn.d{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.btn.sm{padding:5px 10px;font-size:12px;border-radius:7px}
.btn:disabled{opacity:.45;cursor:not-allowed}

.c{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:16px 17px;
  display:flex;flex-direction:column;gap:13px;min-width:0}
.c.pad0{padding:0;overflow:hidden}
.c-hd{display:flex;align-items:baseline;gap:10px}
.c-hd h2{font-size:13px;font-weight:600}
.c-hd .t{margin-left:auto;font-size:11.5px;color:var(--ink-3);font-weight:500}
.sec-hd{padding:13px 16px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:10px;
  background:var(--surface-3)}
.sec-hd h2{font-size:12px;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3);font-weight:600}

.bg{display:inline-flex !important;align-items:center;gap:5px;border-radius:20px;padding:3px 9px;
  font-size:11.5px;font-weight:600;white-space:nowrap;letter-spacing:0;text-transform:none}
.bg.ok{background:var(--ok-soft);color:var(--ok)}
.bg.warn{background:var(--warn-soft);color:var(--warn)}
.bg.crit{background:var(--crit-soft);color:var(--crit)}
.bg.info{background:var(--info-soft);color:var(--info)}
.bg.mut{background:var(--surface-2);color:var(--ink-3)}
.bg.sig{background:var(--sig-soft);color:var(--warn)}
.bg i{width:6px;height:6px;border-radius:50%;background:currentColor;display:block}

.segs{display:inline-flex;background:var(--surface-2);border-radius:9px;padding:3px;gap:2px}
.sg{padding:6px 12px;border-radius:7px;font-size:12.5px;font-weight:600;color:var(--ink-3)}
.sg.on{background:var(--surface);color:var(--ink);box-shadow:0 1px 2px rgba(0,0,0,.08)}

.fld{display:flex;align-items:center;gap:8px;background:var(--surface);border:1px solid var(--line);
  border-radius:9px;padding:7px 11px;min-width:0}
.fld:focus-within{border-color:var(--sig)}
.fld input,.fld select{border:0;background:none;outline:0;width:100%;font-size:13px;min-width:0}

.ent{display:flex;align-items:center;gap:10px;min-width:0}
.sq{width:29px;height:29px;border-radius:8px;background:var(--surface-2);color:var(--ink-2);display:grid;
  place-items:center;font-size:10.5px;font-weight:700;flex:0 0 29px}
.ent b{display:block;font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ent small{display:block;color:var(--ink-3);font-size:11.5px}

.lst{display:flex;flex-direction:column;gap:2px}
.li{display:flex;gap:10px;align-items:center;padding:9px 8px;border-radius:9px;text-align:left;width:100%}
.li:hover{background:var(--surface-2)}
.li .bd2{min-width:0;flex:1}
.li b{display:block;font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.li small{display:block;color:var(--ink-3);font-size:11.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.li .rt{font-size:11.5px;color:var(--ink-3);white-space:nowrap;font-variant-numeric:tabular-nums}

.kv{display:grid;grid-template-columns:180px 1fr}
.kv>div{padding:10px 16px;border-bottom:1px solid var(--line);font-size:13px}
.kv>div:nth-child(odd){color:var(--ink-3);background:var(--surface-3)}
.kv>div:nth-last-child(-n+2){border-bottom:0}

.note{display:flex;gap:10px;padding:13px 15px;background:var(--sig-soft);border-radius:var(--r-sm);
  font-size:13px;color:var(--ink-2);line-height:1.55}
.empty{padding:46px 20px;text-align:center;color:var(--ink-3);font-size:13px}

/* grids */
.g2{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.g3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.g4{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.bento{display:grid;grid-template-columns:repeat(12,1fr);gap:14px}
.s2{grid-column:span 2}.s3{grid-column:span 3}.s4{grid-column:span 4}.s5{grid-column:span 5}
.s6{grid-column:span 6}.s7{grid-column:span 7}.s8{grid-column:span 8}.s12{grid-column:span 12}

/* Cartão de destaque do painel. O protótipo usava o bloco preto; aqui ele é
   claro, num azul suave — mesma hierarquia, sem o peso do preto no alto da
   tela, e sem disputar com o âmbar, que marca ação. */
.c.hero{background:var(--info-soft);color:var(--ink);border-color:color-mix(in srgb,var(--info) 26%,transparent)}
.c.hero .c-hd h2{color:var(--info)}
.c.hero .c-hd .t{color:var(--ink-3)}
.hv{font-size:44px;font-weight:600;letter-spacing:-.04em;line-height:1;font-variant-numeric:tabular-nums}
.hsub{font-size:12.5px;color:var(--ink-2);margin:6px 0 0}
.hsplit{display:flex;gap:18px;flex-wrap:wrap;padding-top:11px;margin-top:auto;
  border-top:1px solid color-mix(in srgb,var(--info) 24%,transparent)}
.hsplit span{display:block;font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;font-weight:600;
  color:var(--info)}
.hsplit b{font-size:16px;font-weight:600;font-variant-numeric:tabular-nums;color:var(--ink)}
.hsplit b.s{color:var(--info)}

.stat span{display:block;font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);font-weight:600}
.stat b{font-size:23px;font-weight:600;letter-spacing:-.03em;font-variant-numeric:tabular-nums;display:block;margin-top:4px}
.stat small{display:block;font-size:11.5px;color:var(--ink-3);margin-top:2px}

/* gráfico de barras do painel.
   A barra tem largura máxima: num cartão largo, sete colunas em 1fr viravam
   sete tijolos esticados, mais parecidos com faixas do que com barras. */
.chart{display:flex;align-items:flex-end;gap:10px;height:128px;padding-top:20px}
.col{flex:1;display:flex;flex-direction:column;justify-content:flex-end;gap:7px;align-items:center;height:100%}
.col .pair{display:flex;align-items:flex-end;justify-content:center;gap:4px;width:100%;height:100%}
.col .stack{border-radius:6px 6px 3px 3px;background:var(--sig);position:relative;flex:1;max-width:46px}
.col .stack em{position:absolute;top:-19px;left:50%;transform:translateX(-50%);font-style:normal;font-size:11px;
  font-weight:600;color:var(--ink);white-space:nowrap;font-variant-numeric:tabular-nums}
.col .lb{font-size:11px;color:var(--ink-3);font-weight:600;text-align:center}

/* ================== classes que as telas já usam ==================
   Daqui para baixo, o mesmo desenho aplicado às classes do app.css, para uma
   tela migrar trocando só a base. */

.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:16px 17px;margin-bottom:16px;box-shadow:none}
.card-title{font-size:13px;font-weight:600;margin-bottom:12px;letter-spacing:0;color:var(--ink)}

.btn-primary{background:var(--sig);border:1px solid var(--sig);color:var(--sig-on);box-shadow:none}
.btn-primary:hover{background:var(--sig-2);border-color:var(--sig-2);color:var(--sig-on)}
.btn-secondary{background:var(--surface);border:1px solid var(--line);color:var(--ink-2)}
.btn-secondary:hover{background:var(--surface-3);border-color:var(--line-2);color:var(--ink)}
.btn-danger{background:var(--crit);border:1px solid var(--crit);color:#fff}
.btn-danger:hover{filter:brightness(.94)}
.btn-sm{padding:5px 10px;font-size:12px;border-radius:7px}

.badge{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:20px;
  font-size:11.5px;font-weight:600;letter-spacing:0}
.badge-green{background:var(--ok-soft);color:var(--ok)}
.badge-teal{background:var(--info-soft);color:var(--info)}
.badge-yellow{background:var(--warn-soft);color:var(--warn)}
.badge-red{background:var(--crit-soft);color:var(--crit)}
.badge-blue{background:var(--sig-soft);color:var(--warn)}
.badge-gray{background:var(--surface-2);color:var(--ink-3)}

table{border-collapse:collapse;width:100%}
th{text-align:left;font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3);
  font-weight:600;padding:10px 14px;border-bottom:1px solid var(--line);background:var(--surface-3);white-space:nowrap}
td{padding:11px 14px;border-bottom:1px solid var(--line);vertical-align:middle;font-size:13px}
tbody tr:last-child td{border-bottom:0}
tr:hover td{background:var(--surface-3)}
td.r,th.r{text-align:right}
.tw{overflow-x:auto}

.form-group{margin-bottom:14px}
.form-group label,label{font-size:12px;font-weight:600;color:var(--ink-2)}
.form-group label{display:block;margin-bottom:5px}
.form-control{width:100%;padding:9px 11px;border:1px solid var(--line);border-radius:9px;font-size:13px;
  background:var(--surface);color:var(--ink);font-family:inherit}
.form-control:focus{outline:none;border-color:var(--sig);box-shadow:0 0 0 3px var(--sig-soft)}
.form-row{display:flex;gap:14px;flex-wrap:wrap}
.form-row .form-group{flex:1;min-width:200px}

.tabs{display:flex;gap:4px;background:var(--surface-2);border-radius:11px;padding:4px;
  border-bottom:0;margin-bottom:16px;overflow-x:auto;align-self:flex-start;max-width:100%}
.tabs a{display:inline-flex;align-items:center;gap:7px;padding:7px 13px;border-radius:8px;
  font-size:12.5px;font-weight:600;color:var(--ink-3);white-space:nowrap;border-bottom:0}
.tabs a:hover{background:color-mix(in srgb,var(--surface) 60%,transparent);color:var(--ink-2)}
.tabs a.active{background:var(--surface);color:var(--ink);box-shadow:0 1px 2px rgba(0,0,0,.08)}

.alert{padding:12px 15px;border-radius:var(--r-sm);margin-bottom:16px;font-size:13px;line-height:1.55;
  border:1px solid transparent}
.alert-info{background:var(--info-soft);color:var(--info);border-color:transparent}
.alert-success{background:var(--ok-soft);color:var(--ok)}
.alert-error{background:var(--crit-soft);color:var(--crit)}

.modal-overlay{display:none;position:fixed;inset:0;background:rgba(20,20,16,.44);
  align-items:flex-start;justify-content:center;z-index:80;padding:10vh 16px 16px;overflow-y:auto}
.modal-overlay.open{display:flex}
.modal-box{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--shadow-h);padding:18px 19px;width:min(560px,100%);max-height:86vh;overflow-y:auto}
.modal-box h3{margin-top:0;font-size:15px;font-weight:600}

.stat-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px;margin-bottom:16px}
.stat-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:15px 16px;box-shadow:none;display:flex;align-items:center;gap:13px}
a.stat-card{color:var(--ink)}
a.stat-card:hover{border-color:var(--line-2)}
.stat-card .icon{width:38px;height:38px;border-radius:10px;display:grid;place-items:center;
  font-size:17px;background:var(--sig-soft);flex-shrink:0}
.stat-card .label{font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);font-weight:600}
.stat-card .value{font-size:23px;font-weight:600;letter-spacing:-.03em;font-variant-numeric:tabular-nums}

/* agenda */
.week-grid{display:grid;grid-template-columns:60px repeat(7,1fr);border:1px solid var(--line);
  background:var(--surface);border-radius:var(--r);overflow:hidden;box-shadow:none}
.week-header{padding:10px 6px;text-align:center;border-bottom:1px solid var(--line);
  border-left:1px solid var(--line);font-size:12.5px;background:var(--surface-3)}
.week-header .dow{color:var(--ink-3);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;font-weight:600}
.week-header .dnum{font-weight:600;font-size:15px;font-variant-numeric:tabular-nums}
.week-cell{border-top:1px solid var(--line);border-left:1px solid var(--line);min-height:46px;padding:2px;position:relative}
.hour-label{padding:4px 6px;font-size:11px;color:var(--ink-3);text-align:right;border-top:1px solid var(--line);
  font-variant-numeric:tabular-nums}
.appt-chip{background:var(--sig-soft);border-left:3px solid var(--sig);border-radius:5px;padding:4px 6px;
  font-size:11px;margin-bottom:2px;cursor:pointer;color:var(--ink)}
.appt-chip:hover{filter:brightness(.97)}
.appt-chip.status-confirmado{background:var(--info-soft);border-color:var(--info)}
.appt-chip.status-atendido{background:var(--ok-soft);border-color:var(--ok)}
.appt-chip.status-cancelado{background:var(--crit-soft);border-color:var(--crit);text-decoration:line-through;opacity:.8}
.appt-chip.status-faltou{background:var(--warn-soft);border-color:var(--warn)}
.appt-chip strong{display:block}

.patient-header{display:flex;align-items:center;gap:14px;margin-bottom:16px}
.patient-avatar{width:48px;height:48px;border-radius:12px;background:var(--sig-soft);color:var(--warn);
  display:grid;place-items:center;font-weight:700;font-size:17px}

.autocomplete-wrap{position:relative}
.autocomplete-list{position:absolute;top:100%;left:0;right:0;background:var(--surface);
  border:1px solid var(--line);border-radius:11px;margin-top:6px;max-height:280px;overflow-y:auto;
  z-index:40;box-shadow:var(--shadow-h);display:none;text-align:left}
.autocomplete-list.open{display:block}
.autocomplete-item{padding:9px 12px;font-size:13px;cursor:pointer}
.autocomplete-item:hover{background:var(--surface-2)}
.autocomplete-empty{padding:12px;font-size:12.5px;color:var(--ink-3)}

/* troca de clínica, no topo — o estilo antigo era feito para a barra azul e
   sumia num topo claro */
.clinic-switch{position:relative;display:inline-block;min-width:0}
.clinic-pill{display:inline-flex;align-items:center;gap:7px;max-width:42vw;
  padding:5px 10px;border:1px solid var(--line);border-radius:9px;background:var(--surface);
  font-size:12.5px;font-weight:600;color:var(--ink)}
.clinic-pill:hover{border-color:var(--line-2)}
.clinic-pill-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.clinic-pill-arrow{flex:none;color:var(--ink-3);transition:transform .15s}
.clinic-switch.open .clinic-pill-arrow{transform:rotate(180deg)}
.clinic-menu{position:absolute;top:calc(100% + 6px);left:0;min-width:240px;background:var(--surface);
  border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow-h);padding:6px;
  display:none;z-index:40;text-align:left}
.clinic-menu.open{display:block}
.clinic-menu form{margin:0}
.clinic-menu-head{font-size:10px;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3);
  font-weight:600;padding:5px 9px 7px}
.clinic-menu-item{display:block;width:100%;text-align:left;padding:8px 9px;border-radius:8px}
.clinic-menu-item:hover{background:var(--surface-2)}
.clinic-menu-nome{display:block;font-size:13px;font-weight:600;color:var(--ink)}
.clinic-menu-sub{display:block;font-size:11.5px;color:var(--ink-3);margin-top:2px}
.clinic-lock{color:var(--warn)}

/* avisos que aparecem sozinhos no canto (toast.js) */
.toast-stack{position:fixed;right:18px;bottom:18px;display:flex;flex-direction:column;gap:9px;z-index:90}
.toast{background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--ink-3);
  border-radius:11px;box-shadow:var(--shadow-h);padding:11px 14px;font-size:13px;color:var(--ink);
  max-width:340px;display:flex;align-items:flex-start;gap:8px}
.toast.success{border-left-color:var(--ok)}
.toast.error{border-left-color:var(--crit)}

.paginacao{display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin-top:14px;font-size:12.5px;color:var(--ink-3);flex-wrap:wrap}
.paginacao-botoes{display:flex;gap:8px}

.patient-header .patient-avatar{flex:0 0 48px}

/* links: o shell usa cor herdada, mas dentro do conteúdo o link precisa se
   anunciar — senão nome de paciente clicável fica igual a texto comum */
.view td a,.view p a,.view .card a:not(.btn):not(.badge){text-decoration:underline;
  text-underline-offset:2px;text-decoration-color:var(--line-2)}
.view td a:hover,.view p a:hover,.view .card a:not(.btn):not(.badge):hover{text-decoration-color:var(--sig)}

.text-muted{color:var(--ink-3)}
.mt-0{margin-top:0}.mb-0{margin-bottom:0}
.flex{display:flex}.gap-8{gap:8px}.gap-12{gap:12px}.justify-between{justify-content:space-between}

/* ============================ responsivo ============================ */
@media (max-width:1150px){
  .s3,.s4,.s5,.s6,.s7,.s8{grid-column:span 6}
  .g4,.g3{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:700px){
  .shell{grid-template-columns:52px 1fr}
  /* no celular a barra aberta vira gaveta POR CIMA da tela: 216px de menu num
     aparelho de 375px não deixaria nada para o conteúdo */
  .shell.aberto{grid-template-columns:52px 1fr}
  .shell.aberto .rail{position:fixed;top:0;left:0;bottom:0;width:min(276px,86vw);
    align-items:stretch;padding:14px 10px;overflow-y:auto;z-index:60;box-shadow:var(--shadow-h)}
  .shell.aberto::before{content:"";position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:55}
  .shell.aberto .rl{width:100%;height:38px;display:flex;align-items:center;gap:10px;padding:0 10px;
    justify-content:flex-start}
  .shell.aberto .rl .rot{display:block;font-size:13.5px}
  .shell.aberto .tip{display:none}
  .top{padding:12px 16px}
  .view{padding:0 16px 40px}
  .s3,.s4,.s5,.s6,.s7,.s8{grid-column:span 12}
  .g2,.g3,.g4{grid-template-columns:1fr}
  .kv{grid-template-columns:1fr}
  .kv>div:nth-child(odd){padding-bottom:2px;border-bottom:0}
  .hv{font-size:36px}
  .phead{gap:10px}
  .phead h1{font-size:21px}
  .phead .r{width:100%;margin-left:0}
  .fld{min-width:0 !important}
  .segs{max-width:100%;overflow-x:auto;scrollbar-width:none}
  .so-largo{display:none}
  /* Tabela larga (financeiro, tratamentos) rola dentro do próprio cartão em vez
     de empurrar a tela inteira para o lado. display:block é o que dá overflow a
     um <table> sem precisar envolver cada uma num contêiner. */
  .card table,.c table{display:block;width:100%;max-width:100%;overflow-x:auto}
  .stat-cards{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

[hidden]{display:none !important}