/* =========================================================
   Plantões — estilo clínico
   Referência visual: prontuário e escala de serviço hospitalar.
   Superfícies frias, régua fina, números monoespaçados e uma
   única cor institucional. A cor viva pertence ao hospital.
   ========================================================= */

:root{
  --bg:      #FCFCFA;
  --bg-2:    #F4F4EF;
  --bg-3:    #E9E9E2;
  --ink:     #1A1A17;
  --ink-2:   #56574F;
  --ink-3:   #8A8B82;
  --linha:   #E4E4DC;
  --linha-2: #D0D0C6;

  --inst:    #0D6E63;
  --inst-2:  #0A544B;
  --inst-bg: #E4EFEC;
  --ok:      #16704F;
  --ok-bg:   #E5F0EA;
  --pend:    #8A5A12;
  --pend-bg: #F7EFDF;
  --erro:    #A62B24;

  --mola:    var(--mola);
  --grade:   rgba(26,26,23,.045);

  --r1: 4px; --r2: 8px; --r3: 10px; --r4: 16px;

  --ui:    "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono:  "IBM Plex Mono", ui-monospace, "SF Mono", monospace;
  --serif: "Newsreader", Georgia, "Times New Roman", serif;

  --sb: env(safe-area-inset-bottom, 0px);
  --st: env(safe-area-inset-top, 0px);
  --abas-h: calc(58px + var(--sb));
  --lateral: 0px;
}

[data-tema="escuro"]{
  --bg:      #121211;
  --bg-2:    #1A1A18;
  --bg-3:    #232320;
  --ink:     #EFEFE9;
  --ink-2:   #A8A99F;
  --ink-3:   #77786F;
  --linha:   #262622;
  --linha-2: #34342F;

  --inst:    #4FC2B1;
  --inst-2:  #6FD3C4;
  --inst-bg: #12241F;
  --ok:      #52C795;
  --ok-bg:   #14251D;
  --pend:    #D3A05C;
  --pend-bg: #262013;
  --erro:    #EE6A5F;
  --grade:   rgba(239,239,233,.05);
}

*{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
[hidden]{ display:none !important; }
html,body{ margin:0; height:100%; overscroll-behavior-y:none; }
body{
  font-family:var(--ui); background:var(--bg); color:var(--ink);
  font-size:15px; line-height:1.45;
  -webkit-font-smoothing:antialiased;
}
button{ font:inherit; color:inherit; border:0; background:none; cursor:pointer; }
input,select,textarea{ font:inherit; color:inherit; }
h1,h2,h3{ margin:0; font-weight:600; letter-spacing:-.015em; }
.top h1, .folha h2, .total b, .vazio b, .marca-txt b{
  font-family:var(--serif); font-weight:500; letter-spacing:-.012em; }
.top h1{ font-size:26px; }
.folha h2{ font-size:22px; letter-spacing:-.015em; }
svg{ width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.5;
     stroke-linecap:round; stroke-linejoin:round; }
svg.mini{ width:15px; height:15px; stroke-width:2; }

/* números monoespaçados: a coluna de valores alinha como em planilha */
.valor, .metricas b, .total b, .duplo b, .dia .n, .g-col span,
.linha .t2, .meta-txt, .total .detalhe, .anos b, .eti b, .dia-cab b, .dia-cab span{
  font-family:var(--mono); font-variant-numeric:tabular-nums; letter-spacing:-.02em;
}

/* ---------- abertura ---------- */
.boot{ position:fixed; inset:0; display:grid; place-content:center; justify-items:center;
  gap:16px; background:var(--bg); z-index:99; }
.boot p{ margin:0; font-size:13px; color:var(--ink-3); font-family:var(--mono); }
.boot-mark{ width:28px; height:28px; border-radius:50%; border:2px solid var(--linha);
  border-top-color:var(--inst); animation:girar .8s linear infinite; }
@keyframes girar{ to{ transform:rotate(360deg) } }
.boot-saida{ font-size:13px; color:var(--ink-2); text-decoration:underline;
  text-underline-offset:3px; padding:10px 14px; }

/* ---------- estrutura ---------- */
.app{ height:100dvh; display:flex; flex-direction:column; background:var(--bg); }
.view{ flex:1; min-height:0; display:flex; flex-direction:column; position:relative; }
.view.entra{ animation:entra .24s var(--mola); }
@keyframes entra{ from{ opacity:0; transform:translateY(5px) } }
.rolagem{ flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch;
  padding:14px 16px calc(var(--abas-h) + 16px); }
#view-calendario .rolagem, #view-hospitais .rolagem{ padding-bottom:calc(var(--abas-h) + 84px); }
.fim{ height:20px; }
.pilha{ display:flex; flex-direction:column; gap:6px; }

/* ---------- cabeçalho ---------- */
.top{ padding:calc(var(--st) + 10px) 16px 0; background:var(--bg);
  border-bottom:1px solid var(--linha); position:relative; z-index:2; }
.top::before{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:0;
  background-image:
    repeating-linear-gradient(to right, var(--grade) 0 1px, transparent 1px 16px),
    repeating-linear-gradient(to bottom, var(--grade) 0 1px, transparent 1px 16px);
  mask-image:linear-gradient(to bottom, #000, transparent 78%);
  -webkit-mask-image:linear-gradient(to bottom, #000, transparent 78%);
}
.top > *{ position:relative; z-index:1; }
.top--simples{ padding-bottom:14px; }
.top h1{ font-size:23px; }
.cab-marca{ display:flex; align-items:center; gap:9px; margin-bottom:10px; }
.cab-marca i{ width:26px; height:26px; border-radius:8px; background:var(--inst); color:#fff;
  display:grid; place-items:center; flex:none; }
.cab-marca i svg{ width:15px; height:15px; }
.cab-marca span{ font-family:var(--serif); font-size:15px; font-weight:500; letter-spacing:.01em; }
.cab-marca b{ font-family:var(--ui); font-size:10px; font-weight:600; text-transform:uppercase;
  letter-spacing:.09em; color:var(--ink-3); margin-left:auto; }
@media (min-width:1000px){ .cab-marca{ display:none; } }
.top .sub{ margin:3px 0 0; font-size:13px; color:var(--ink-3); }
.top-linha{ display:flex; align-items:center; justify-content:space-between; gap:4px; }
.icone{ width:36px; height:36px; border-radius:var(--r2); display:grid; place-items:center;
  color:var(--ink-2); transition:background .15s, transform .15s; }
.icone:active{ background:var(--bg-2); transform:scale(.92); }
.titulo-mes{ display:flex; align-items:center; gap:6px; padding:6px 10px; border-radius:var(--r2);
  font-size:16px; font-weight:600; text-transform:capitalize; }
.titulo-mes:active{ background:var(--bg-2); }
.titulo-mes .mini{ color:var(--ink-3); }

.metricas{ display:grid; grid-template-columns:repeat(4,1fr); gap:2px; margin-top:8px; }
.metricas b{ display:block; font-size:16px; font-weight:600; white-space:nowrap; }
.metricas span{ font-size:10px; color:var(--ink-3); text-transform:uppercase; letter-spacing:.07em; }
.metricas .ok b{ color:var(--ok); }

.meta{ margin-top:12px; }
.meta-barra{ height:3px; background:var(--bg-3); overflow:hidden; }
.meta-barra i{ display:block; height:100%; background:var(--inst);
  transition:width .6s var(--mola); }
.meta-barra i.cheia{ background:var(--ok); }
.meta-txt{ display:flex; justify-content:space-between; gap:10px; margin-top:6px;
  font-size:11px; color:var(--ink-3); }

.modos{ display:flex; margin-top:10px; }
.modos button{ padding:9px 2px 10px; margin-right:20px; font-size:13px; font-weight:500;
  color:var(--ink-3); border-bottom:2px solid transparent; transition:color .18s, border-color .18s; }
.modos button[aria-pressed="true"]{ color:var(--ink); border-bottom-color:var(--inst); }

/* ---------- calendário ---------- */
.pilula{ display:block; margin:0 auto 12px; padding:6px 14px; border-radius:99px;
  border:1px solid var(--linha); background:var(--bg); font-size:12.5px; font-weight:500;
  color:var(--inst); animation:entra .25s ease; }

.cal{ touch-action:pan-y; transition:transform .28s var(--mola), opacity .2s; }
.cal.arrastando{ transition:none; }
.semana{ display:grid; grid-template-columns:repeat(7,1fr); gap:3px; padding:0 0 6px;
  text-align:center; font-size:10px; font-weight:500; color:var(--ink-3);
  text-transform:uppercase; letter-spacing:.09em; }
.semana i{ font-style:normal; }
.semana u{ display:none; text-decoration:none; font-style:normal; }
.grade{ display:grid; grid-template-columns:repeat(7,1fr); gap:3px; }

.dia{
  position:relative; aspect-ratio:1/1.04; border-radius:var(--r1);
  background:var(--bg-2); display:grid; place-items:center; overflow:hidden;
  font-size:13px; font-weight:500; color:var(--ink-2);
  transition:transform .13s var(--mola), opacity .2s, border-color .2s, background .2s;
  animation:surge .24s backwards;
}
@keyframes surge{ from{ opacity:0; transform:scale(.92) } }
.dia:active{ transform:scale(.9); }
.dia.vazia{ background:transparent; animation:none; }
.dia.tem{ color:#fff; font-weight:600; }
.dia.tem.claro{ color:#0F1720; }
.dia.hoje{ box-shadow:inset 0 0 0 1.6px var(--inst); background:var(--bg); }
.dia.hoje:not(.tem) .n{ color:var(--inst); font-weight:600; }
.dia.passado:not(.tem){ opacity:.42; }
.dia.tem.passado .preenche{ opacity:.7; }
.dia.apagada{ opacity:.14; }
.dia .n{ position:relative; z-index:2; }
.dia .preenche{ position:absolute; inset:0; z-index:1; }
.dia .qtd{ position:absolute; top:2px; right:4px; z-index:2; font-size:9px; font-weight:600;
  opacity:.85; font-family:var(--mono); }
.dia .noite{ position:absolute; top:4px; left:4px; z-index:2; width:5px; height:5px;
  border-radius:50%; border:1.3px solid currentColor; }
.dia .quitado{ position:absolute; bottom:3px; left:50%; transform:translateX(-50%); z-index:2;
  width:11px; height:2px; background:currentColor; opacity:.8; }
.dia .chips{ display:none; }

.legenda{ display:flex; flex-wrap:wrap; gap:5px; margin-top:14px; }
.eti{ display:inline-flex; align-items:center; gap:6px; padding:5px 10px; border-radius:var(--r1);
  border:1px solid var(--linha); font-size:12px; font-weight:500;
  transition:transform .12s, opacity .2s, border-color .2s; }
.eti:active{ transform:scale(.95); }
.eti.off{ opacity:.35; }
.eti i{ width:7px; height:7px; border-radius:2px; }
.eti b{ font-weight:500; color:var(--ink-3); }

.secao{ font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.09em;
  color:var(--ink-3); margin:22px 0 8px; display:flex; align-items:center; gap:8px; }
.secao::before{ content:""; width:11px; height:2px; background:var(--inst); flex:none; border-radius:1px; }
.secao-linha{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.secao-linha .secao{ margin-bottom:8px; }

/* agenda por dia */
.dia-grupo{ margin-bottom:14px; }
.dia-cab{ display:flex; align-items:baseline; gap:8px; padding:0 2px 6px;
  border-bottom:1px solid var(--linha); margin-bottom:6px; }
.dia-cab b{ font-size:13px; font-weight:600; }
.dia-cab b small{ font-family:var(--ui); font-weight:400; color:var(--ink-3);
  margin-left:7px; text-transform:capitalize; }
.dia-cab span{ margin-left:auto; font-size:12px; color:var(--ink-3); }
.dia-cab.hoje::before{ content:"hoje"; font-size:9.5px; font-weight:600; text-transform:uppercase;
  letter-spacing:.07em; background:var(--inst); color:#fff; padding:2px 6px; border-radius:3px;
  font-family:var(--ui); }

/* ---------- cartões e linhas ---------- */
.cartao{ background:var(--bg); border:1px solid var(--linha); border-radius:var(--r3);
  padding:13px 14px; transition:border-color .18s; }
.cartao + .cartao{ margin-top:6px; }

.linha{ display:flex; align-items:stretch; border:1px solid var(--linha); border-radius:var(--r3);
  overflow:hidden; background:var(--bg);
  transition:transform .16s var(--mola), border-color .18s; }
.linha.premida{ transform:scale(.985); }
.linha-alvo{ flex:1; min-width:0; display:flex; align-items:center; gap:11px;
  padding:11px 4px 11px 12px; text-align:left; }
.linha-alvo:active{ background:var(--bg-2); }
.linha .traco{ width:3px; align-self:stretch; border-radius:2px; flex:none; }
.linha .txt{ flex:1; min-width:0; }
.linha .t1{ display:block; font-size:14px; font-weight:500; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap; }
.linha .t2{ display:block; font-size:12px; color:var(--ink-3); margin-top:1px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.lua{ display:inline-block; width:7px; height:7px; border-radius:50%;
  border:1.3px solid var(--ink-3); margin-right:6px; vertical-align:middle; position:relative; top:-1px; }
.linha-fim{ display:flex; flex-direction:column; align-items:flex-end; justify-content:center;
  gap:4px; padding:11px 12px; }
.linha-fim:active{ background:var(--bg-2); }
.valor{ font-size:13.5px; font-weight:600; }
.selo{ font-size:9.5px; font-weight:600; letter-spacing:.05em; text-transform:uppercase;
  padding:2px 6px; border-radius:3px; }
.selo.pago{ background:var(--ok-bg); color:var(--ok); }
.selo.aberto{ background:var(--pend-bg); color:var(--pend); }

.vazio{ text-align:center; padding:28px 20px; border:1px dashed var(--linha-2);
  border-radius:var(--r3); color:var(--ink-3); font-size:13px; line-height:1.5; }
.vazio b{ display:block; color:var(--ink); font-size:15px; font-weight:600; margin-bottom:4px; }
.vazio-mosaico{ display:flex; gap:3px; justify-content:center; margin-bottom:12px; }
.vazio-mosaico i{ width:15px; height:16px; border-radius:2px; background:var(--bg-3); }
.vazio-mosaico i:nth-child(2){ background:var(--linha-2); }

/* ---------- financeiro ---------- */
.total{ padding:2px 0 14px; border-bottom:1px solid var(--linha); }
.total span{ font-size:10.5px; color:var(--ink-3); text-transform:uppercase; letter-spacing:.08em; }
.total b{ display:block; font-size:31px; font-weight:600; letter-spacing:-.03em; margin:4px 0 6px; }
.total .detalhe{ font-size:12px; color:var(--ink-3); }
.total .delta{ display:inline-block; margin-left:8px; font-size:11px; font-weight:500;
  padding:1px 6px; border-radius:3px; background:var(--bg-2); color:var(--ink-2); font-family:var(--ui); }

.duplo{ display:grid; grid-template-columns:1fr 1fr; }
.duplo > div{ padding:13px 0; }
.duplo > div + div{ border-left:1px solid var(--linha); padding-left:16px; }
.duplo span{ display:block; font-size:10.5px; color:var(--ink-3); text-transform:uppercase; letter-spacing:.07em; }
.duplo b{ display:block; font-size:18px; font-weight:600; margin-top:3px; }
.duplo .v-ok b{ color:var(--ok); }

.grafico{ display:flex; align-items:flex-end; gap:6px; height:120px; }
.g-col{ flex:1; display:flex; flex-direction:column; justify-content:flex-end; align-items:center;
  gap:6px; height:100%; }
.g-barras{ width:100%; max-width:34px; flex:1; display:flex; flex-direction:column;
  justify-content:flex-end; border-radius:var(--r1); overflow:hidden; }
.g-barras i{ display:block; min-height:2px; animation:cresce .42s var(--mola) backwards;
  transform-origin:bottom; }
@keyframes cresce{ from{ transform:scaleY(0) } }
.g-barras .aberto{ background:var(--bg-3); }
.g-barras .pago{ background:var(--ink-3); }
.g-col.atual .g-barras .pago{ background:var(--inst); }
.g-col.atual .g-barras .aberto{ background:var(--inst-bg); }
.g-col span{ font-size:10px; color:var(--ink-3); }
#sub-numeros .g-col span{ font-size:9px; }
.g-col.atual span{ color:var(--inst); font-weight:600; }

.barra-h{ height:3px; background:var(--bg-3); overflow:hidden; margin-top:9px; }
.barra-h i{ display:block; height:100%; animation:estica .42s var(--mola) backwards;
  transform-origin:left; }
@keyframes estica{ from{ transform:scaleX(0) } }

.filtros{ display:flex; gap:3px; }
.filtros button{ padding:5px 10px; border-radius:var(--r1); border:1px solid var(--linha);
  font-size:11.5px; font-weight:500; color:var(--ink-3); transition:all .18s; }
.filtros button[aria-pressed="true"]{ background:var(--inst); color:#fff; border-color:var(--inst); }

.grade2{ display:grid; grid-template-columns:1fr 1fr; gap:6px; }
.bloco{ border:1px solid var(--linha); border-radius:var(--r3); padding:12px 13px; text-align:left;
  transition:transform .13s, background .15s, border-color .15s; }
.bloco:active{ transform:scale(.97); background:var(--bg-2); }
.bloco b{ display:block; font-size:13px; font-weight:500; }
.bloco span{ font-size:10.5px; color:var(--ink-3); font-family:var(--mono); }

/* ---------- ajustes ---------- */
.item{ display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:12px 14px; border:1px solid var(--linha); border-radius:var(--r3); background:var(--bg); }
.item + .item{ margin-top:6px; }
.item .rot{ font-size:14px; font-weight:500; }
.item .desc{ font-size:12.5px; color:var(--ink-3); margin-top:2px; }
.item-col{ flex-direction:column; align-items:stretch; }

.segmento{ display:grid; grid-auto-flow:column; gap:2px; background:var(--bg-2);
  border-radius:var(--r2); padding:3px; }
.segmento button{ padding:9px 6px; border-radius:6px; font-size:13px; font-weight:500;
  color:var(--ink-3); transition:background .18s, color .18s; }
.segmento button[aria-pressed="true"]{ background:var(--bg); color:var(--ink);
  box-shadow:0 1px 2px rgba(15,23,32,.1); }
[data-tema="escuro"] .segmento button[aria-pressed="true"]{ background:var(--bg-3); box-shadow:none; }

.chave{ width:44px; height:26px; border-radius:99px; background:var(--linha-2); position:relative;
  flex:none; transition:background .22s; }
.chave::after{ content:""; position:absolute; top:3px; left:3px; width:20px; height:20px;
  border-radius:50%; background:#fff; box-shadow:0 1px 2px rgba(0,0,0,.3);
  transition:transform .22s var(--mola); }
.chave[aria-pressed="true"]{ background:var(--ok); }
.chave[aria-pressed="true"]::after{ transform:translateX(18px); }

/* ---------- convite de instalação ---------- */
.instalar{ display:flex; align-items:center; gap:12px; padding:12px 13px; margin-bottom:14px;
  border:1px solid var(--linha); border-left:3px solid var(--inst); border-radius:var(--r3);
  background:var(--bg-2); animation:entra .3s ease; }
.instalar .ic{ width:32px; height:32px; border-radius:var(--r2); background:var(--inst); color:#fff;
  display:grid; place-items:center; flex:none; }
.instalar .txt{ flex:1; min-width:0; }
.instalar b{ display:block; font-size:13px; font-weight:600; }
.instalar span{ font-size:11.5px; color:var(--ink-3); }
.instalar .sim{ padding:8px 13px; border-radius:var(--r2); background:var(--inst); color:#fff;
  font-size:12.5px; font-weight:600; flex:none; }
.instalar .nao{ width:26px; height:26px; border-radius:var(--r1); display:grid; place-items:center;
  color:var(--ink-3); flex:none; }

/* ---------- navegação ---------- */
.marca{ display:none; }
.abas{ display:grid; grid-template-columns:repeat(4,1fr); background:var(--bg);
  border-top:1px solid var(--linha); padding-bottom:var(--sb);
  position:fixed; bottom:0; left:0; right:0; z-index:20; }
.aba{ padding:8px 0 7px; display:grid; justify-items:center; gap:2px; color:var(--ink-3);
  transition:color .2s; }
.aba span{ font-size:10px; font-weight:500; }
.aba.ativa{ color:var(--inst); }
.aba.ativa svg{ stroke-width:1.9; }

.fab{ position:absolute; right:16px; bottom:calc(var(--abas-h) + 14px); z-index:15;
  width:50px; height:50px; border-radius:15px; background:var(--inst); color:#fff;
  display:grid; place-items:center; box-shadow:0 8px 22px -8px rgba(13,110,99,.6);
  transition:transform .26s var(--mola), opacity .22s; }
.fab svg{ width:22px; height:22px; stroke-width:2.1; }
.fab:active{ transform:scale(.9); }
.fab.recolhido{ transform:translateY(90px) scale(.85); opacity:0; pointer-events:none; }

/* ---------- folha ---------- */
.veu{ position:fixed; inset:0; background:rgba(15,23,32,.42); z-index:40; animation:apaga .2s ease; }
@keyframes apaga{ from{ opacity:0 } }
.veu.saindo{ animation:some .22s ease forwards; }
@keyframes some{ to{ opacity:0 } }

.folha{ position:fixed; left:0; right:0; bottom:0; z-index:41; background:var(--bg);
  border-radius:var(--r4) var(--r4) 0 0; max-height:92dvh; display:flex; flex-direction:column;
  border-top:1px solid var(--linha); animation:sobe .3s var(--mola); }
@keyframes sobe{ from{ transform:translateY(100%) } }
.folha.saindo{ animation:desce .24s cubic-bezier(.4,0,.9,.4) forwards; }
@keyframes desce{ to{ transform:translateY(101%) } }
.puxador{ width:100%; padding:11px 0 3px; flex:none; }
.puxador::before{ content:""; display:block; width:34px; height:3px; border-radius:99px;
  background:var(--linha-2); margin:0 auto; }
.folha-corpo{ overflow-y:auto; padding:8px 16px calc(20px + var(--sb)); }
.folha h2{ font-size:19px; margin:4px 0 2px; }
.folha .intro{ font-size:12.5px; color:var(--ink-3); margin:0 0 16px; }

/* ---------- formulários ---------- */
.campo{ margin-bottom:13px; }
.campo label{ display:block; font-size:10.5px; font-weight:600; color:var(--ink-2);
  margin-bottom:5px; text-transform:uppercase; letter-spacing:.07em; }
.campo input, .campo select, .campo textarea{ width:100%; padding:11px 12px; border-radius:var(--r2);
  border:1px solid var(--linha-2); background:var(--bg); font-size:16px;
  transition:border-color .15s, box-shadow .15s; }
.campo input:focus, .campo select:focus, .campo textarea:focus{ outline:none;
  border-color:var(--inst); box-shadow:0 0 0 3px var(--inst-bg); }
.campo input[type="date"], .campo input[type="time"], .campo input[inputmode="decimal"]{
  font-family:var(--mono); }
.campo textarea{ font-family:var(--mono); font-size:13px; line-height:1.5; resize:vertical; min-height:140px; }
.campo .dica{ font-size:11.5px; color:var(--ink-3); margin-top:5px; }
.campo .erro{ font-size:12px; color:var(--erro); margin-top:5px; }
.par{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }

.turnos{ display:grid; grid-template-columns:repeat(4,1fr); gap:5px; }
.turno{ padding:9px 3px; border-radius:var(--r2); border:1px solid var(--linha-2);
  font-size:11.5px; font-weight:500; text-align:center; transition:all .16s; }
.turno small{ display:block; font-size:9.5px; color:var(--ink-3); font-family:var(--mono); margin-top:1px; }
.turno[aria-pressed="true"]{ background:var(--inst); color:#fff; border-color:var(--inst); }
.turno[aria-pressed="true"] small{ color:rgba(255,255,255,.72); }

.cores{ display:flex; flex-wrap:wrap; gap:8px; }
.cor{ width:32px; height:32px; border-radius:var(--r2); position:relative; transition:transform .14s; }
.cor:active{ transform:scale(.88); }
.cor[aria-pressed="true"]::after{ content:""; position:absolute; inset:-4px; border-radius:var(--r3);
  border:1.5px solid var(--ink); }

.acoes{ display:flex; gap:8px; margin-top:18px; }
.acoes button{ flex:1; padding:13px; border-radius:var(--r2); font-size:14px; font-weight:600;
  transition:transform .13s; }
.acoes button:active{ transform:scale(.97); }
.primario{ background:var(--inst); color:#fff; }
.primario:active{ background:var(--inst-2); }
.secundario{ border:1px solid var(--linha-2); }
.largo{ width:100%; padding:13px; border-radius:var(--r2); font-size:14px; font-weight:600;
  background:var(--inst); color:#fff; margin-top:10px; }
.largo.quieto{ background:transparent; color:var(--ink); border:1px solid var(--linha-2); }
.texto-link{ display:block; width:100%; text-align:center; margin-top:14px; font-size:13px;
  font-weight:500; color:var(--ink-3); text-decoration:underline; text-underline-offset:3px; }
.perigo{ color:var(--erro); }

.opcao{ width:100%; text-align:left; padding:13px 14px; border-radius:var(--r2);
  border:1px solid var(--linha); font-size:14px; font-weight:500;
  transition:transform .14s, background .15s, border-color .15s; }
.opcao:active{ transform:scale(.98); background:var(--bg-2); }
.opcao small{ display:block; font-size:11.5px; font-weight:400; color:var(--ink-3); margin-top:2px; }

.anos{ display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
.anos b{ font-size:16px; font-weight:600; }
.meses{ display:grid; grid-template-columns:repeat(3,1fr); gap:5px; }
.mes-op{ padding:12px 4px; border-radius:var(--r2); border:1px solid var(--linha);
  font-size:12.5px; font-weight:500; text-transform:capitalize; }
.mes-op[aria-pressed="true"]{ background:var(--inst); color:#fff; border-color:var(--inst); }
.mes-op i{ display:block; width:4px; height:4px; border-radius:50%; background:var(--inst);
  margin:3px auto -3px; }
.mes-op[aria-pressed="true"] i{ background:#fff; }

.passos li{ margin-bottom:9px; font-size:13px; color:var(--ink-2); line-height:1.5; }
.passos li b{ color:var(--ink); font-weight:600; }

/* ---------- aviso ---------- */
.aviso{ position:fixed; left:16px; right:16px; bottom:calc(var(--abas-h) + 14px);
  background:var(--ink); color:var(--bg); padding:11px 14px; border-radius:var(--r2);
  font-size:13px; font-weight:500; z-index:60; display:flex; align-items:center;
  justify-content:space-between; gap:14px; animation:sobe2 .24s var(--mola); }
@keyframes sobe2{ from{ opacity:0; transform:translateY(14px) } }
.aviso button{ font-size:12.5px; font-weight:600; white-space:nowrap; text-decoration:underline;
  text-underline-offset:3px; }

.offline{ position:fixed; top:calc(var(--st) + 6px); left:50%; transform:translateX(-50%);
  background:var(--pend-bg); color:var(--pend); border:1px solid var(--pend);
  font-size:11px; font-weight:600; padding:4px 11px; border-radius:99px; z-index:70;
  animation:entra .3s ease; }

/* =========================================================
   TABLET — a partir de 700px
   ========================================================= */
@media (min-width:700px){
  .rolagem{ padding:20px 26px calc(var(--abas-h) + 24px); }
  #view-calendario .rolagem, #view-hospitais .rolagem{ padding-bottom:calc(var(--abas-h) + 90px); }
  .top{ padding:calc(var(--st) + 14px) 26px 0; }
  .top h1{ font-size:26px; }
  .dia{ aspect-ratio:1/.92; font-size:14px; }
  .grade, .semana{ gap:5px; }
  .grade2{ grid-template-columns:repeat(4,1fr); }
  #lista-hospitais, #fin-hospitais, #fin-lancamentos{ display:grid; grid-template-columns:1fr 1fr; gap:6px; }
  #fin-hospitais .cartao + .cartao{ margin-top:0; }
  .grafico{ height:150px; }

  .folha{ left:50%; right:auto; bottom:auto; top:50%; width:520px; max-width:calc(100vw - 48px);
    max-height:86dvh; border-radius:var(--r4); border:1px solid var(--linha);
    transform:translate(-50%,-50%);
    box-shadow:0 30px 70px -25px rgba(15,23,32,.45); }
  @keyframes sobe{ from{ opacity:0; transform:translate(-50%,-46%) } to{ opacity:1; transform:translate(-50%,-50%) } }
  @keyframes desce{ to{ opacity:0; transform:translate(-50%,-46%) } }
  .puxador{ padding:14px 0 4px; }
  .folha-corpo{ padding:8px 22px 24px; }
  .aviso{ left:auto; right:26px; max-width:400px; }
}

/* =========================================================
   DESKTOP — a partir de 1000px: barra lateral e escala ampla
   ========================================================= */
@media (min-width:1000px){
  :root{ --lateral:236px; --abas-h:0px; }

  .app{ margin-left:var(--lateral); }

  .marca{ display:flex; align-items:center; gap:10px; padding:4px 10px 18px; }
  .marca-ic{ width:34px; height:34px; border-radius:10px; background:var(--inst); color:#fff;
    display:grid; place-items:center; flex:none;
    box-shadow:0 2px 8px -2px rgba(13,110,99,.5); }
  .marca-ic svg{ width:19px; height:19px; }
  .marca-txt b{ display:block; font-size:17px; font-weight:500; letter-spacing:-.01em; }
  .marca-txt small{ display:block; font-size:11px; color:var(--ink-3); }

  .abas{ position:fixed; top:0; bottom:0; left:0; right:auto; width:var(--lateral);
    display:block; padding:20px 12px; border-top:0; border-right:1px solid var(--linha);
    background:var(--bg-2); overflow-y:auto; }
  .aba{ display:flex; align-items:center; gap:11px; width:100%; padding:10px 11px;
    border-radius:var(--r2); margin-bottom:2px; transition:background .18s, color .18s; }
  .aba svg{ width:19px; height:19px; flex:none; }
  .aba span{ font-size:13.5px; font-weight:500; }
  .aba:hover{ background:var(--bg-3); }
  .aba.ativa{ background:var(--bg); color:var(--inst); box-shadow:0 1px 2px rgba(15,23,32,.07); }
  [data-tema="escuro"] .aba.ativa{ background:var(--bg-3); box-shadow:none; }

  .top{ padding:20px 32px 0; }
  .top-linha{ justify-content:flex-start; gap:2px; }
  #view-inicio .top-linha{ justify-content:space-between; }
  #view-documentos .rolagem, #view-calculadoras .rolagem,
  #view-biblioteca .rolagem, #view-inicio .rolagem{ max-width:1000px; }
  .titulo-mes{ font-size:21px; order:-1; margin-right:4px; padding-left:0; }
  .metricas{ grid-template-columns:repeat(4,minmax(0,140px)); gap:24px; margin-top:14px; }
  .metricas b{ font-size:19px; }
  .meta{ max-width:620px; }
  .rolagem{ padding:24px 32px 40px; }
  #view-calendario .rolagem, #view-hospitais .rolagem{ padding-bottom:40px; }

  /* a grade vira escala de serviço: cada dia lista os plantões por extenso */
  .semana{ gap:6px; padding-bottom:8px; text-align:left; padding-left:8px; }
  .semana i{ display:none; }
  .semana u{ display:inline; }
  .grade{ gap:6px; }
  .dia{ aspect-ratio:auto; min-height:120px; display:block; padding:6px 7px;
    background:var(--bg); border:1px solid var(--linha); border-radius:var(--r2);
    text-align:left; overflow:hidden; }
  .dia:hover{ border-color:var(--linha-2); background:var(--bg-2); }
  .dia:active{ transform:none; }
  .dia.vazia{ border-color:transparent; background:transparent; }
  .dia.tem{ color:var(--ink-2); font-weight:500; }
  .dia.tem .preenche, .dia .qtd, .dia .noite, .dia .quitado{ display:none; }
  .dia .risco{ top:5px; right:5px; }
  .dia .n{ font-size:12.5px; color:var(--ink-3); }
  .dia.hoje{ border-color:var(--inst); box-shadow:inset 0 0 0 1px var(--inst); background:var(--bg); }
  .dia.hoje .n{ color:var(--inst); font-weight:600; }
  .dia.passado:not(.tem){ opacity:1; background:var(--bg-2); }
  .dia.passado .n{ color:var(--ink-3); }
  .dia{ min-width:0; }
  .dia .chips{ display:flex; flex-direction:column; gap:3px; margin-top:5px;
    width:100%; max-width:100%; min-width:0; }
  .chip-p{ display:block; padding:3px 5px 3px 6px; border-radius:var(--r1);
    background:var(--bg-2); border-left:2.5px solid var(--c); font-size:10.5px;
    color:var(--ink-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
    line-height:1.35; }
  .chip-p b{ display:block; font-family:var(--mono); font-weight:500; color:var(--ink);
    font-size:10px; letter-spacing:-.02em; }
  .chip-p em{ display:block; font-style:normal; overflow:hidden;
    text-overflow:ellipsis; font-size:10.5px; }
  .chip-p.pago-p{ opacity:.55; }
  [data-tema="escuro"] .chip-p{ background:var(--bg-3); }

  #painel-mes{ display:grid; grid-template-columns:minmax(0,1fr) 280px;
    grid-template-rows:auto auto; column-gap:26px; align-items:start; }
  #painel-mes .cal{ grid-column:1; grid-row:1; }
  #painel-mes .legenda{ grid-column:1; grid-row:2; }
  .coluna-lado{ grid-column:2; grid-row:1 / span 2; align-self:start; }
  .coluna-lado .secao{ margin-top:0; }
  #painel-lista{ max-width:780px; }

  #view-financeiro .rolagem{ max-width:940px; }
  #view-ajustes .rolagem{ max-width:660px; }
  .total b{ font-size:38px; }
  .grafico{ height:180px; }
  #lista-hospitais{ grid-template-columns:repeat(3,1fr); }

  .pilula{ margin:0 0 10px auto; }
  .fab{ right:32px; bottom:32px; width:54px; height:54px; }
  .aviso{ right:32px; bottom:32px; }
  .linha:hover, .bloco:hover, .opcao:hover, .cartao:hover, .eti:hover{ border-color:var(--linha-2); }
  .icone:hover{ background:var(--bg-2); }
}

@media (min-width:1400px){
  .rolagem{ padding-left:52px; padding-right:52px; }
  .top{ padding-left:52px; padding-right:52px; }
  #painel-mes{ grid-template-columns:minmax(0,1fr) 320px; }
  .dia{ min-height:134px; }
}

/* =========================================================
   IMPRESSÃO — a escala do mês em papel
   ========================================================= */
@media print{
  .abas, .fab, .modos, .icone, .aviso, .veu, .folha, #banner-instalar,
  .pilula, .offline, .boot{ display:none !important; }
  .app{ margin:0; height:auto; }
  .view{ display:block !important; }
  .rolagem{ overflow:visible; padding:0; }
  .top{ border-bottom:1px solid #000; padding:0 0 10px; }
  #painel-mes{ display:block !important; }
  .dia{ min-height:78px; display:block; border:1px solid #999 !important;
    break-inside:avoid; background:#fff !important; color:#000 !important; padding:4px; }
  .dia .chips{ display:flex !important; flex-direction:column; gap:2px; margin-top:4px; }
  .dia .preenche{ display:none !important; }
  .chip-p{ display:block; border-left:3px solid var(--c); padding:2px 4px; font-size:9.5px;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .chip-p em{ font-style:normal; }
  .chip-p b{ margin-right:4px; }
  body{ background:#fff; color:#000; }
}

@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
}
:focus-visible{ outline:2px solid var(--inst); outline-offset:2px; border-radius:3px; }

/* =========================================================
   Verificação da escala
   ========================================================= */
.sinal{ display:inline-grid; place-items:center; width:14px; height:14px; border-radius:3px;
  background:var(--erro); color:#fff; font-size:9.5px; font-weight:700; font-style:normal;
  margin-right:6px; vertical-align:middle; position:relative; top:-1px; }

.dia .risco{ position:absolute; top:3px; right:3px; z-index:4;
  width:13px; height:13px; border-radius:50%; background:var(--bg);
  color:var(--erro); font-size:9.5px; font-weight:700; line-height:13px;
  text-align:center; box-shadow:0 0 0 1px var(--erro); }
.dia .risco.leve{ color:var(--pend); box-shadow:0 0 0 1px var(--pend); }
.dia.tem .qtd{ top:auto; bottom:3px; right:4px; }

.alerta-item{ display:block; width:100%; text-align:left; padding:11px 13px;
  border:1px solid var(--linha); border-left:3px solid var(--linha-2);
  border-radius:var(--r3); background:var(--bg); }
.alerta-item b{ display:block; font-size:13px; font-weight:600; }
.alerta-item span{ display:block; font-size:12.5px; color:var(--ink-3); margin-top:2px; }
.alerta-item.grave{ border-left-color:var(--erro); }
.alerta-item.grave b{ color:var(--erro); }
.alerta-item.atencao{ border-left-color:var(--pend); }
.alerta-item.atencao b{ color:var(--pend); }
.alerta-item.leve{ border-left-color:var(--linha-2); }
.alerta-item.clicavel:active{ background:var(--bg-2); }

.item--grave{ border-left:3px solid var(--erro); }
.item--grave .rot{ color:var(--erro); }
.item--atencao{ border-left:3px solid var(--pend); }

.aba{ position:relative; }
.aba.com-alerta::after{ content:""; position:absolute; top:6px; right:calc(50% - 16px);
  width:6px; height:6px; border-radius:50%; background:var(--pend); }
.aba.com-alerta-grave::after{ background:var(--erro); }

@media (min-width:1000px){
  .aba.com-alerta::after{ top:50%; right:12px; transform:translateY(-50%); }
  #sub-numeros .grafico{ height:190px; }
  .dia.choque .chip-p{ border-left-color:var(--erro); }
  .dia.choque{ border-color:var(--erro); }
  .dia.apertado{ border-color:var(--pend); }
}

/* =========================================================
   Sistema — telas novas
   ========================================================= */
.hoje-marca{ font-size:10px; font-weight:600; text-transform:uppercase; letter-spacing:.08em;
  color:var(--inst); margin-bottom:6px; }

.busca-linha{ display:flex; gap:8px; margin-bottom:6px; }
.busca-linha input{ flex:1; padding:11px 12px; border-radius:var(--r2);
  border:1px solid var(--linha-2); background:var(--bg); font-size:16px; }
.busca-linha input:focus{ outline:none; border-color:var(--inst); box-shadow:0 0 0 3px var(--inst-bg); }
.busca-linha button{ padding:0 18px; border-radius:var(--r2); font-weight:600; font-size:14px; }

.estrela{ font-size:16px; color:var(--linha-2); }
.estrela.on{ color:var(--pend); }

/* resultado de calculadora */
.resultado{ border:1px solid var(--linha); border-left:3px solid var(--inst);
  border-radius:var(--r3); padding:14px; background:var(--bg-2); margin:4px 0 4px; }
.resultado.vazia{ border-left-color:var(--linha-2); color:var(--ink-3); font-size:13px;
  background:transparent; }
.r-num{ font-family:var(--mono); font-size:28px; font-weight:600; letter-spacing:-.03em; }
.r-un{ font-size:13px; color:var(--ink-3); }
.r-leitura{ margin:8px 0 0; font-size:13.5px; }
.r-formula{ margin:10px 0 0; font-size:11.5px; color:var(--ink-2); font-family:var(--mono);
  border-top:1px solid var(--linha); padding-top:8px; }
.r-ref{ margin:4px 0 0; font-size:11.5px; color:var(--ink-3); }
.rodape-legal{ font-size:11px; color:var(--ink-3); line-height:1.5; margin:16px 0 0;
  border-top:1px solid var(--linha); padding-top:10px; }

/* artigos */
.artigo{ border:1px solid var(--linha); border-radius:var(--r3); padding:12px 13px; }
.a-titulo{ display:block; font-size:14px; font-weight:600; color:var(--ink); text-decoration:none;
  line-height:1.35; }
.a-titulo:hover{ color:var(--inst); }
.a-meta{ font-size:12px; color:var(--ink-2); margin-top:4px; }
.a-fonte{ font-size:11.5px; color:var(--ink-3); font-family:var(--mono); margin-top:2px; }
.a-acoes{ display:flex; gap:14px; margin-top:9px; }
.a-acoes button, .a-acoes a{ font-size:12px; font-weight:600; color:var(--inst);
  text-decoration:underline; text-underline-offset:3px; }

/* pré-visualização de documento */
.previa{ border:1px solid var(--linha); border-radius:var(--r2); background:#fff; color:#111;
  padding:18px 16px; max-height:46vh; overflow:auto; font-size:12px; line-height:1.5; }
.previa .doc-topo{ border-bottom:1.2px solid #111; padding-bottom:6px; margin-bottom:14px;
  display:flex; justify-content:space-between; gap:12px; align-items:flex-end; }
.previa .prof-nome{ font-size:14px; font-weight:700; }
.previa .prof-esp, .previa .prof-crm{ font-size:11px; color:#444; }
.previa .doc-contato{ font-size:9.5px; color:#666; text-align:right; max-width:50%; }
.previa .doc-titulo{ font-size:11px; letter-spacing:1.5px; text-align:center; margin:0 0 14px;
  font-weight:700; text-transform:uppercase; }
.previa .doc-via{ display:block; font-size:9px; letter-spacing:0; font-weight:400; color:#666; }
.previa .doc-paciente{ font-size:11px; margin-bottom:12px; }
.previa .doc-paciente span{ color:#777; display:inline-block; min-width:58px; }
.previa .doc-corpo{ min-height:60px; }
.previa .corpo-livre{ font-family:inherit; white-space:pre-wrap; margin:0; font-size:12px; line-height:1.6; }
.previa .doc-comprador{ display:flex; gap:8px; margin-top:12px; }
.previa .doc-comprador .cx{ flex:1; border:1px solid #aaa; padding:6px; font-size:8.5px; color:#666; }
.previa .doc-comprador .ln{ border-bottom:1px solid #ccc; padding-top:10px; }
.previa .doc-data{ margin-top:16px; text-align:right; font-size:11px; }
.previa .doc-assina{ margin-top:20px; text-align:center; }
.previa .linha-assina{ width:150px; border-top:1px solid #111; margin:0 auto 4px; }
.previa .assina-nome{ font-weight:600; font-size:11px; }
.previa .assina-crm, .previa .assina-obs{ font-size:9.5px; color:#555; }
[data-tema="escuro"] .previa{ background:#fff; }

@media (max-width:999px){
  .aba--lateral{ display:none; }
  .abas{ grid-template-columns:repeat(5,1fr); }
}
@media (min-width:1000px){
  .aba--lateral{ display:flex; }
  #view-documentos .rolagem, #view-calculadoras .rolagem,
  #view-biblioteca .rolagem, #view-inicio .rolagem{ max-width:880px; }
  #lista-calc .pilha{ display:grid; grid-template-columns:1fr 1fr; gap:6px; }
  #doc-historico .pilha, #doc-pacientes .pilha{ display:grid; grid-template-columns:1fr 1fr; gap:6px; }
  .previa{ max-height:52vh; }
}

/* =========================================================
   Plantão em andamento
   ========================================================= */
.turno-cab{ display:flex; align-items:flex-start; justify-content:space-between;
  gap:12px; margin-top:10px; }
.turno-hosp{ display:flex; align-items:center; gap:8px; font-size:15px; font-weight:600; }
.turno-hosp i{ width:9px; height:9px; border-radius:2px; flex:none; }
.turno-tempo{ font-size:12px; color:var(--ink-3); font-family:var(--mono); margin-top:2px; }
.turno-nums{ display:grid; grid-template-columns:repeat(3,1fr); gap:2px; margin-top:12px; }
.turno-nums b{ display:block; font-family:var(--mono); font-size:19px; font-weight:600; }
.turno-nums span{ font-size:10.5px; color:var(--ink-3); text-transform:uppercase; letter-spacing:.06em; }

.turno-card{ display:block; width:100%; text-align:left; border:1px solid var(--linha);
  border-left:3px solid var(--inst); border-radius:var(--r3); padding:13px 14px;
  background:var(--bg); transition:transform .14s, background .15s; }
.turno-card:active{ transform:scale(.985); background:var(--bg-2); }
.tc-topo{ display:flex; align-items:center; gap:8px; }
.tc-topo i{ width:8px; height:8px; border-radius:2px; flex:none; }
.tc-topo b{ font-size:14.5px; font-weight:600; flex:1; }
.tc-topo span{ font-family:var(--mono); font-size:12px; color:var(--ink-3); }
.tc-nums{ display:flex; gap:16px; margin-top:8px; font-size:12px; color:var(--ink-3); }
.tc-nums b{ font-family:var(--mono); color:var(--ink); font-weight:600; }
.turno-card.vazio-turno{ border-left-color:var(--linha-2); }
.turno-card.vazio-turno b{ display:block; font-size:14.5px; }
.turno-card.vazio-turno span{ font-size:12.5px; color:var(--ink-3); }

.leito{ display:inline-block; font-family:var(--mono); font-size:11px; font-weight:600;
  background:var(--bg-3); color:var(--ink-2); padding:1px 5px; border-radius:3px; margin-right:6px; }

.status-grade{ display:grid; grid-template-columns:1fr 1fr; gap:5px; }
.status-grade button{ padding:10px 8px; border-radius:var(--r2); border:1px solid var(--linha-2);
  font-size:12.5px; font-weight:500; text-align:left; transition:all .16s; }
.status-grade button[aria-pressed="true"]{ background:var(--c); color:#fff; border-color:var(--c); }

.pend{ display:flex; align-items:flex-start; gap:10px; width:100%; text-align:left;
  border:1px solid var(--linha); border-radius:var(--r3); padding:11px 13px; background:var(--bg);
  transition:transform .14s, background .15s; }
.pend:active{ transform:scale(.985); background:var(--bg-2); }
.marca-check{ width:17px; height:17px; border-radius:4px; border:1.5px solid var(--linha-2);
  flex:none; margin-top:1px; }
.pend-txt{ font-size:14px; }
.pend-txt small{ display:block; font-size:11.5px; color:var(--ink-3); margin-top:1px; }

/* temas e feed */
.temas-linha{ display:flex; flex-wrap:wrap; gap:5px; }
.eti--novo{ border-style:dashed; color:var(--inst); }
.a-tema{ font-size:10px; font-weight:600; text-transform:uppercase; letter-spacing:.07em;
  color:var(--inst); margin-bottom:4px; }
a.artigo{ display:block; text-decoration:none; color:inherit; }
a.artigo .a-titulo{ font-weight:600; }

@media (min-width:1000px){
  #view-plantao .rolagem{ max-width:900px; }
  #plantao-corpo .pilha{ display:grid; grid-template-columns:1fr 1fr; gap:6px; }
  .status-grade{ grid-template-columns:repeat(3,1fr); }
}

/* diagnóstico de abertura */
.diag{ max-width:340px; text-align:left; padding:0 18px; }
.diag h2{ font-family:var(--serif); font-size:20px; font-weight:500; margin:0 0 4px; }
.diag p{ font-size:13px; color:var(--ink-3); margin:0 0 14px; }
.diag ul{ list-style:none; margin:0; padding:0; font-family:var(--mono); font-size:11px; }
.diag li{ padding:6px 0; border-bottom:1px solid var(--linha); color:var(--ink-2); }
.diag li.bom::before{ content:"ok "; color:var(--ok); }
.diag li.ruim{ color:var(--erro); }
.diag li.ruim::before{ content:"× "; }
.diag li.dica{ font-family:var(--ui); font-size:12.5px; color:var(--ink); border-bottom:0;
  padding-top:12px; line-height:1.5; }
.diag-botoes{ display:flex; align-items:center; gap:16px; margin-top:18px; }
.diag-botoes button{ background:var(--inst); color:#fff; border:0; padding:11px 18px;
  border-radius:9px; font:inherit; font-weight:600; font-size:14px; }
.diag-botoes a{ font-size:13px; color:var(--ink-2); }

/* =========================================================
   3.5 — bento, busca global, trilha, caderno
   ========================================================= */
.bento{ display:grid; gap:8px; }
.bento > div:empty{ display:none; }

.prox-card{ border:1px solid var(--linha); border-radius:var(--r3); padding:13px 14px;
  background:var(--bg-2); display:flex; flex-direction:column; gap:3px; }
.prox-rot{ font-size:10.5px; font-weight:600; text-transform:uppercase; letter-spacing:.07em; color:var(--ink-3); }
.prox-card b{ font-family:var(--serif); font-size:26px; font-weight:500; letter-spacing:-.02em; line-height:1.1; }
.prox-sub{ font-size:12.5px; color:var(--ink-2); display:flex; align-items:center; gap:6px; }
.prox-sub i{ width:7px; height:7px; border-radius:2px; flex:none; }

.trilha{ border:1px solid var(--linha); border-radius:var(--r3); padding:13px 14px; margin-bottom:14px;
  background:var(--bg); }
.trilha-cab{ display:flex; align-items:center; gap:10px; }
.trilha-cab b{ font-size:14px; font-weight:600; flex:1; }
.trilha-cab span{ font-family:var(--mono); font-size:11.5px; color:var(--ink-3); }
.trilha-cab button{ width:24px; height:24px; border-radius:6px; color:var(--ink-3); font-size:18px; line-height:1; }
.trilha-barra{ height:3px; background:var(--bg-3); margin:10px 0 8px; overflow:hidden; }
.trilha-barra i{ display:block; height:100%; background:var(--inst); transition:width .5s var(--mola); }
.trilha-item{ display:flex; align-items:center; gap:10px; width:100%; text-align:left; padding:8px 0;
  font-size:13.5px; border-top:1px solid var(--linha); }
.trilha-item:first-of-type{ border-top:0; }
.trilha-item.ok{ color:var(--ink-3); text-decoration:line-through; }
.trilha-item.ok .marca-check{ background:var(--ok); border-color:var(--ok); position:relative; }
.trilha-item.ok .marca-check::after{ content:""; position:absolute; left:5px; top:2px; width:4px; height:8px;
  border:solid #fff; border-width:0 1.8px 1.8px 0; transform:rotate(45deg); }

.bg-item{ display:flex; flex-wrap:wrap; align-items:baseline; gap:0 8px; }
.bg-item .bg-grupo{ font-size:10px; font-weight:600; text-transform:uppercase; letter-spacing:.07em;
  color:var(--inst); width:100%; margin-bottom:2px; }
.bg-item small{ width:100%; }
.bg-item.sel{ border-color:var(--inst); background:var(--inst-bg); }

.busca-lateral{ display:none; }

.nota{ display:block; width:100%; text-align:left; border:1px solid var(--linha); border-radius:var(--r3);
  padding:11px 13px; background:var(--bg); transition:transform .14s, border-color .15s; }
.nota:active{ transform:scale(.985); }
.nota b{ display:block; font-size:14px; font-weight:600; }
.nota span{ display:block; font-size:12.5px; color:var(--ink-3); margin-top:2px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.nota.fixa{ border-left:3px solid var(--inst); }

/* superfícies com leve profundidade e resposta ao passar o mouse */
.linha, .cartao, .bloco, .opcao, .item, .turno-card, .prox-card, .trilha, .nota, .artigo{
  box-shadow:0 1px 0 rgba(26,26,23,.02); }
[data-tema="escuro"] .linha, [data-tema="escuro"] .cartao, [data-tema="escuro"] .bloco{
  box-shadow:none; }

@media (min-width:700px){
  .bento{ grid-template-columns:1fr 1fr; }
  .b-turno:not(:empty) + .b-proximo:empty{ display:none; }
}
@media (min-width:1000px){
  .busca-lateral{ display:flex; align-items:center; gap:9px; width:100%; padding:9px 11px;
    margin:0 0 10px; border-radius:var(--r2); border:1px solid var(--linha); background:var(--bg);
    color:var(--ink-3); font-size:13px; }
  .busca-lateral svg{ width:16px; height:16px; }
  .busca-lateral span{ flex:1; text-align:left; }
  .busca-lateral kbd{ font-family:var(--mono); font-size:10.5px; border:1px solid var(--linha-2);
    border-radius:4px; padding:1px 5px; color:var(--ink-3); }
  .busca-lateral:hover{ border-color:var(--linha-2); color:var(--ink-2); }
  .bento{ grid-template-columns:2fr 1fr; }
  .prox-card b{ font-size:32px; }
  .linha:hover, .cartao:hover, .bloco:hover, .opcao:hover, .nota:hover, .artigo:hover{
    transform:translateY(-1px); box-shadow:0 6px 18px -12px rgba(26,26,23,.35); }
  .linha, .cartao, .bloco, .opcao, .nota, .artigo{ transition:transform .18s var(--mola), box-shadow .18s, border-color .15s; }
  #ini-atalhos{ grid-template-columns:repeat(6,1fr); }
  #ini-atalhos .bloco{ padding:16px 14px; }
}