/* Folha SMS-JP — folha de estilo da aplicacao.
 *
 * Ficava embutida no layout.php: ~16 KB em TODA resposta, nunca cacheados,
 * reenviados a cada clique. Em arquivo, o navegador baixa uma vez e o ?v= do
 * layout (mtime deste arquivo) invalida sozinho no deploy.
 *
 * Ordem: tokens · casca (lateral/topbar) · tipografia · componentes ·
 * utilitarios · responsivo.
 */
/* --- Tokens -----------------------------------------------------------------
   Cor, espacamento, raio e tipografia num lugar so. Os nomes de cor ja
   existiam e nao mudaram (--jp, --bord, --sombra); o resto e novo e existe
   para os 203 style="..." espalhados pelas telas terem para onde migrar sem
   cada um inventar o proprio 0.7rem.
   -------------------------------------------------------------------------- */
:root{
  /* cor */
  --bg:#f4f5f7;--card:#fff;--ink:#0f172a;--mut:#64748b;--acc:#0f6db4;
  --jp:#8a1c1c;--jp-esc:#6e1414;--jp-claro:#a03030;--jp-suave:#fde8ec;
  --bord:#e2e8f0;--bord-2:#f1f5f9;
  --ok:#0e7c5b;--alerta:#b45309;--erro:#b91c1c;
  --sombra:0 1px 2px rgba(15,23,42,.06),0 4px 14px rgba(15,23,42,.05);
  --sombra-alta:0 12px 30px rgba(15,23,42,.18);
  /* espacamento — escala de 4px */
  --e1:.25rem;--e2:.5rem;--e3:.75rem;--e4:1rem;--e5:1.5rem;--e6:2rem;
  /* raio */
  --r1:6px;--r2:8px;--r3:12px;--r-pilula:999px;
  /* tipografia */
  --fonte:Inter,system-ui,'Segoe UI',sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --t-mini:.72rem;--t-peq:.84rem;--t-base:1rem;--t-med:1.1rem;--t-grande:1.32rem;
}
*{box-sizing:border-box}
/* Reserva sempre o espaço da barra de rolagem vertical: sem isso, ela aparece só
   nas telas mais longas e "empurra" o cabeçalho/conteúdo ~17px, deslocando o
   layout entre uma tela e outra (o que dava aquele vão à direita no header). */
html{scrollbar-gutter:stable}
body{margin:0;font:14.5px/1.5 Inter,system-ui,'Segoe UI',sans-serif;background:var(--bg);color:var(--ink)}
/* ---------------------------------------------------------------------------
   Casca: barra lateral recolhível + topbar fina (redesign aprovado —
   docs/design/redesign-casca.html). O vinho vira acento (logo e item ativo),
   não mais fundo de duas faixas empilhadas.
   --------------------------------------------------------------------------- */
.casca{display:flex;min-height:100vh}
.corpo{flex:1 1 auto;min-width:0;display:flex;flex-direction:column}
.lateral{width:260px;flex:0 0 260px;background:var(--card);border-right:1px solid var(--bord);
     display:flex;flex-direction:column;position:sticky;top:0;height:100vh;z-index:130}
/* Marca e alternador dividem a mesma faixa do topo: o alternador fica onde o
   olho já procura por controle de painel, e não escondido no rodapé. */
.lateral-topo{display:flex;align-items:center;gap:.3rem;flex:0 0 auto;
     border-bottom:1px solid var(--bord);padding:.7rem .55rem .7rem .75rem}
.lateral-marca{display:flex;align-items:center;gap:.6rem;flex:1 1 auto;min-width:0;
     text-decoration:none;color:var(--ink);overflow:hidden}
.lateral-alternar{flex:0 0 auto;background:transparent;border:0;cursor:pointer;
     color:var(--mut);padding:.3rem;border-radius:7px;display:flex;align-items:center}
.lateral-alternar:hover{background:#f1f5f9;color:var(--jp)}
.lateral-marca .titulo{line-height:1.15;min-width:0}
/* Rótulos cortam com reticências em vez de vazar por baixo da borda — nome de
   tela longo ("Painel de dimensionamento") não pode empurrar a lateral. */
.lateral-marca .titulo b,.lateral-marca .titulo span,.lateral-nav a .rotulo{
     display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lateral-marca .titulo b{font-size:.85rem;font-weight:750}
.lateral-marca .titulo span{font-size:.69rem;color:var(--mut);font-weight:500}
.lateral-nav{flex:1 1 auto;overflow-y:auto;overflow-x:hidden;padding:.45rem .5rem .8rem;
     display:flex;flex-direction:column;gap:.06rem;
     scrollbar-width:thin;scrollbar-color:#cbd5e1 transparent}
/* Sem isso a barra nativa do navegador (~15px) some com boa parte dos 56px da
   lateral recolhida, espremendo e cortando os ícones — ver captura no pedido
   de ajuste do menu. */
.lateral-nav::-webkit-scrollbar{width:6px}
.lateral-nav::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:3px}
.lateral-nav::-webkit-scrollbar-track{background:transparent}
/* Acordeão: o título do grupo é um botão; só o bloco .aberto mostra os filhos.
   O grupo da rota atual vem aberto do PHP (layout.php). */
.lateral-grupo{font-size:.66rem;font-weight:700;text-transform:uppercase;letter-spacing:.07em;
     color:var(--mut);padding:.8rem .55rem .28rem;white-space:nowrap;
     background:transparent;border:0;cursor:pointer;font-family:inherit;width:100%;
     display:flex;align-items:center;gap:.6rem;text-align:left}
/* A seta vai para a direita sozinha: com ícone, rótulo e seta, space-between
   jogaria o rótulo para o meio e ele não alinharia com o dos filhos. */
/* Mesma largura de ícone dos links filhos, senão o rótulo do grupo não alinha
   verticalmente com o das telas dentro dele. */
.lateral-grupo .lateral-ic{font-size:.72rem;color:#b6c2d2}
.lateral-grupo:hover{color:var(--ink);background:transparent}
.lateral-grupo .seta{font-size:.6rem;transition:transform .15s;flex:0 0 auto;margin-left:auto}
.lateral-bloco.aberto .lateral-grupo .seta{transform:rotate(180deg)}
.lateral-filhos{display:none;flex-direction:column;gap:.06rem}
.lateral-bloco.aberto .lateral-filhos{display:flex}
/* Filho entra um pouco a frente do titulo do grupo: e a marca visual de que
   a tela pertence ao grupo, sem isso a lista parece uma coisa so. Na lateral
   recolhida o recuo sai, senao o icone de 56px fica torto. */
.lateral-filhos a{margin-left:.85rem}
body.lateral-fechada .lateral-filhos a{margin-left:0}
.lateral-nav a{display:flex;align-items:center;gap:.6rem;padding:.4rem .55rem;border-radius:8px;
     color:#334155;text-decoration:none;font-size:.85rem;font-weight:600;white-space:nowrap;overflow:hidden}
.lateral-nav a:hover{background:#f1f5f9;color:var(--ink)}
.lateral-nav a.ativa{background:#fde8ec;color:var(--jp);font-weight:700}
.lateral-ic{width:1.15rem;flex:0 0 auto;text-align:center;font-size:.83rem;color:#94a3b8}
.lateral-nav a:hover .lateral-ic{color:#64748b}
.lateral-nav a.ativa .lateral-ic{color:var(--jp)}
/* Recolhida: só no desktop. No celular a lateral é gaveta e abre inteira. */
@media(min-width:901px){
  body.lateral-fechada .lateral{width:56px;flex-basis:56px}
  body.lateral-fechada .lateral .rotulo{display:none}
  body.lateral-fechada .lateral-topo{flex-direction:column;gap:.45rem;padding:.7rem .25rem}
  body.lateral-fechada .lateral-marca{justify-content:center}
  body.lateral-fechada .lateral-nav a{justify-content:center;padding-left:0;padding-right:0}
  /* Recolhida, o título do grupo vira só o ícone dele, centralizado, com um
     traço em cima separando do bloco anterior. Antes virava um traço mudo: a
     separação existia mas não dizia de quê. O acordeão desliga, porque com
     56px esconder um grupo esconderia tela; todos os filhos ficam visíveis. */
  body.lateral-fechada .lateral-grupo{justify-content:center;padding:.55rem 0 .3rem;
       margin:.35rem .45rem 0;border-top:1px solid var(--bord);pointer-events:none}
  body.lateral-fechada .lateral-grupo .lateral-ic{color:#94a3b8}
  body.lateral-fechada .lateral-filhos{display:flex}
}
.topbar{position:sticky;top:0;z-index:60;display:flex;align-items:center;gap:.7rem;
     min-height:46px;padding:.35rem 1.1rem;background:rgba(255,255,255,.93);
     backdrop-filter:blur(6px);border-bottom:1px solid var(--bord)}
.trilha-topo{display:flex;align-items:center;gap:.4rem;min-width:0;font-size:.84rem;color:var(--mut)}
.trilha-topo b{color:var(--ink);font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.trilha-topo .sep{opacity:.45}
.trilha-topo .grupo{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Cabeçalho de página em texto (substitui a segunda faixa vinho) — ver faixas(). */
.faixas{margin:.2rem 0 1.15rem;display:flex;align-items:flex-end;gap:1rem;flex-wrap:wrap}
.faixa-titulo{min-width:0}
.faixa-titulo b{display:block;font-size:1.3rem;font-weight:800;letter-spacing:-.015em;line-height:1.2}
.faixa-titulo span{display:block;margin-top:.15rem;font-size:.78rem;font-weight:600;color:var(--mut);
     text-transform:uppercase;letter-spacing:.04em}
.faixa-acoes{margin-left:auto;display:flex;gap:.45rem;align-items:center;flex-wrap:wrap}
.conta-wrap{margin-left:auto;display:flex;gap:.8rem;align-items:center}
.conta{position:relative}
.conta-btn{display:flex;align-items:center;gap:.5rem;background:transparent;border:1px solid var(--bord);
     color:var(--ink);border-radius:999px;padding:.22rem .6rem .22rem .25rem;cursor:pointer;
     font-size:.83rem;font-weight:600}
.conta-btn:hover{background:#f1f5f9}
.conta-avatar{width:24px;height:24px;border-radius:50%;background:var(--jp);color:#fff;
     display:flex;align-items:center;justify-content:center;font-weight:800;font-size:.78rem}
.conta-seta{font-size:.65rem;opacity:.8;transition:transform .15s}
.conta.aberta .conta-seta{transform:rotate(180deg)}
.conta-menu{position:absolute;right:0;top:calc(100% + 8px);background:#fff;color:var(--ink);
     border:1px solid var(--bord);border-radius:12px;box-shadow:0 12px 30px rgba(15,23,42,.18);
     width:230px;padding:.4rem;display:none;z-index:80}
.conta.aberta .conta-menu{display:block}
.conta-menu .cabecalho{padding:.5rem .6rem .6rem;border-bottom:1px solid var(--bord);margin-bottom:.3rem}
.conta-menu .cabecalho b{display:block;font-size:.88rem}
.conta-menu .cabecalho span{font-size:.74rem;color:var(--mut);text-transform:capitalize}
.conta-menu a{display:flex;align-items:center;gap:.55rem;padding:.5rem .6rem;border-radius:8px;
     color:var(--ink);text-decoration:none;font-size:.86rem;font-weight:500}
.conta-menu a:hover{background:#f4f5f7}
.conta-menu a.sair-item{color:var(--jp);border-top:1px solid var(--bord);margin-top:.3rem;padding-top:.55rem}
.conta-menu .ic{width:1.1rem;text-align:center;opacity:.75}
main{margin:1.15rem auto 0;padding:0 1.6rem;width:100%}
h1{font-size:1.45rem;font-weight:800;letter-spacing:-.01em;margin:.2rem 0 .3rem}
h2{font-size:1.02rem;font-weight:700;margin:1.9rem 0 .8rem;text-transform:uppercase;
   letter-spacing:.05em;color:#334155;display:flex;align-items:center;gap:.6rem}
h2::after{content:'';flex:1;height:1px;background:var(--bord)}
/* Card logo depois dos KPIs precisa respirar: os KPIs nao tem margem embaixo. */
.kpis+.card{margin-top:1rem}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(172px,1fr));gap:.8rem}
.kpi{background:var(--card);border:1px solid var(--bord);border-left:4px solid var(--acc);
     border-radius:10px;padding:.75rem .95rem;box-shadow:var(--sombra)}
.kpi.jp{border-left-color:var(--jp)}
.kpi.verde{border-left-color:#0e7c5b}
.kpi.ambar{border-left-color:#b45309}
.kpi .rot{color:var(--mut);font-size:.72rem;font-weight:600;text-transform:uppercase;letter-spacing:.04em}
.kpi .val{font-size:1.42rem;font-weight:800;margin-top:.1rem;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.kpi .sub{font-size:.74rem;color:var(--mut);margin-top:.1rem}
.kpi .delta{font-size:.74rem;margin-top:.1rem;font-weight:600}.delta.ruim{color:#b91c1c}.delta.bom{color:#15803d}
/* min-width:0 é o fix clássico: sem ele, itens de grid não encolhem abaixo do
   conteúdo (ex. tabela com white-space:nowrap), o que empurra a página inteira
   além da largura da tela e cria rolagem horizontal indevida. */
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.grid2.grid2-largo{grid-template-columns:1.6fr 1fr}
.grid2>*,.grid3>*{min-width:0}
@media(max-width:1000px){.grid2,.grid3,.grid2.grid2-largo{grid-template-columns:1fr}}
body{overflow-x:hidden}
main{overflow-x:hidden}
.card{background:var(--card);border:1px solid var(--bord);border-radius:12px;
      padding:1rem 1.2rem;margin-bottom:1rem;box-shadow:var(--sombra)}
.card h3{margin:.1rem 0 .7rem;font-size:.92rem;font-weight:700}
table{border-collapse:collapse;width:100%;font-size:.84rem}
th{color:var(--mut);font-size:.72rem;text-transform:uppercase;letter-spacing:.04em}
th,td{text-align:left;padding:.42rem .6rem;border-bottom:1px solid var(--bord);white-space:nowrap}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}
tbody tr:hover{background:#f8fafc}
tr.linha-total{font-weight:800;background:#f8fafc;border-top:2px solid var(--jp)}
tr.linha-total:hover{background:#f8fafc}
tr.clicavel:hover{background:#eef6fc;cursor:pointer}
/* Barra de ações injetada acima de cada tabela do componente (exportar xlsx). */
.tabela-acoes{display:flex;justify-content:flex-end;margin:0 0 .45rem}
.tabela-acoes .botao[disabled]{opacity:.6;cursor:progress}
/* Botão de exportar no verde do Excel, com ícone destacado — visual de "ação
   de download", não de botão secundário genérico. */
.botao-xlsx{display:inline-flex;align-items:center;gap:.45rem;background:#107c41;color:#fff;
     border:0;border-radius:8px;padding:.38rem .85rem .38rem .6rem;cursor:pointer;
     font-weight:600;font-size:.8rem;box-shadow:0 1px 2px rgba(16,124,65,.3);
     transition:background .15s,transform .1s}
.botao-xlsx:hover{background:#0b5c30;transform:translateY(-1px)}
.botao-xlsx:active{transform:none}
.botao-xlsx .ic-xlsx{width:1.45rem;height:1.45rem;border-radius:6px;background:rgba(255,255,255,.18);
     display:flex;align-items:center;justify-content:center;font-size:.8rem}
.botao-xlsx[disabled]{opacity:.65;cursor:progress;transform:none}
/* Cabeçalho ordenável (componente tabela()): clicável, com indicador de seta. */
.tabela-ordenavel thead th{cursor:pointer;user-select:none}
.tabela-ordenavel thead th:hover{color:var(--jp)}
.tabela-ordenavel thead th::after{content:'↕';opacity:.28;margin-left:.3rem;font-size:.9em}
.tabela-ordenavel thead th.ord-asc::after{content:'↑';opacity:.95}
.tabela-ordenavel thead th.ord-desc::after{content:'↓';opacity:.95}
/* Tabela ocupa a largura toda do card, sem o padding lateral — o que vier
   antes (h3) ou depois (legenda, ver_sql) mantém o padding normal do card,
   já que a margem negativa só afeta o wrapper da tabela, não os irmãos dele. */
/* A rolagem lateral vale para toda tabela, dentro ou fora de card: main tem
   overflow-x:hidden, entao sem isto uma tabela larga fora de card fica cortada
   sem jeito de rolar (aconteceu em /assistencia-farmaceutica). */
.tabela-rolagem{overflow-x:auto}
.card .tabela-rolagem{margin:0 -1.2rem}
.card .tabela-rolagem th:first-child,.card .tabela-rolagem td:first-child{padding-left:1.2rem}
.card .tabela-rolagem th:last-child,.card .tabela-rolagem td:last-child{padding-right:1.2rem}
details.sql{margin-top:.6rem}details.sql summary{color:var(--mut);font-size:.78rem;cursor:pointer;font-weight:600}
details.sql .sql-caixa{margin-top:.5rem;border:1px solid #1e293b;border-radius:8px;overflow:hidden}
details.sql .sql-caixa .CodeMirror{height:auto;font-size:.8rem}
details.sql .sql-rodape{display:flex;justify-content:flex-end;padding:.4rem;background:#fff}
details.sql .sql-rodape a{background:var(--jp);color:#fff;border:0;border-radius:6px;padding:.3rem .8rem;
     font-size:.76rem;font-weight:600;text-decoration:none}
details.sql .sql-rodape a:hover{background:var(--jp-esc)}
.trilha{margin:.6rem 0;display:flex;gap:.4rem;flex-wrap:wrap;align-items:center;font-size:.85rem}
.trilha a{background:#fde8ec;color:var(--jp);border-radius:999px;padding:.2rem .7rem;text-decoration:none;font-weight:600}
.mut{color:var(--mut);font-size:.84rem}
input,select,textarea,button{font:inherit}
button,.botao{background:var(--jp);color:#fff;border:0;border-radius:8px;padding:.45rem 1.1rem;
              cursor:pointer;font-weight:600;text-decoration:none;display:inline-block}
button:hover,.botao:hover{background:var(--jp-esc)}
button.botao-secundario,a.botao-secundario{background:#475569}
button.botao-secundario:hover,a.botao-secundario:hover{background:#334155}
button.botao-perigo,a.botao-perigo{background:#b91c1c}
button.botao-perigo:hover,a.botao-perigo:hover{background:#7f1d1d}
button.botao-pequeno,a.botao-pequeno{padding:.32rem .7rem;font-size:.78rem}
button.botao-icone,a.botao-icone{padding:.4rem .55rem;line-height:1;display:inline-flex;align-items:center;justify-content:center}
.acoes-linha{display:flex;gap:.35rem;flex-wrap:nowrap}
dialog.modal{border:0;border-radius:12px;padding:0;box-shadow:var(--sombra);max-width:360px;width:90%}
dialog.modal::backdrop{background:rgba(15,23,42,.45)}
dialog.modal .modal-corpo{padding:1.1rem 1.3rem}
dialog.modal h3{margin:.1rem 0 .8rem;font-size:.95rem}
dialog.modal .modal-rodape{display:flex;justify-content:flex-end;gap:.5rem;margin-top:1rem}
select,input[type=text],input[type=password]{border:1px solid var(--bord);border-radius:8px;padding:.45rem .6rem;background:#fff}
textarea{width:100%;border:1px solid var(--bord);border-radius:8px;padding:.6rem;font-family:ui-monospace,monospace;font-size:.85rem}
.erro{background:#fef2f2;border:1px solid #fecaca;color:#b91c1c;padding:.7rem 1rem;border-radius:8px;margin:.8rem 0}
#carregando{position:fixed;inset:0;background:rgba(244,245,247,.78);display:none;align-items:center;justify-content:center;flex-direction:column;gap:.8rem;z-index:99;backdrop-filter:blur(2px)}
#carregando.ativo{display:flex}
#carregando .disco{width:38px;height:38px;border:4px solid var(--bord);border-top-color:var(--jp);border-radius:50%;animation:gira .8s linear infinite}
#carregando p{color:var(--ink);font-weight:600}
@keyframes gira{to{transform:rotate(360deg)}}
footer{margin:2.5rem auto 1.5rem;padding:0 1.6rem;color:var(--mut);font-size:.8rem}
/* Modo compacto das telas de tabela: aperta linha e fonte sem mexer no HTML de
   nenhuma página. O botão vive na topbar e o estado fica em localStorage. */
body.compacto{font-size:13.5px}
body.compacto table{font-size:.79rem}
body.compacto th,body.compacto td{padding:.24rem .5rem}
body.compacto .card{padding:.7rem .9rem;margin-bottom:.7rem}
body.compacto .card .tabela-rolagem{margin:0 -.9rem}
body.compacto .card .tabela-rolagem th:first-child,
body.compacto .card .tabela-rolagem td:first-child{padding-left:.9rem}
body.compacto .card .tabela-rolagem th:last-child,
body.compacto .card .tabela-rolagem td:last-child{padding-right:.9rem}
body.compacto .kpi{padding:.5rem .7rem}
body.compacto .kpi .val{font-size:1.2rem}
body.compacto h2{margin:1.2rem 0 .55rem}
body.compacto main{margin-top:.8rem}
.bt-densidade{background:transparent;border:1px solid var(--bord);color:var(--mut);border-radius:8px;
     padding:.24rem .5rem;cursor:pointer;font-size:.78rem;line-height:1.2;position:relative}
.bt-densidade:hover{background:#f1f5f9;color:var(--ink)}
body.compacto .bt-densidade{background:#fde8ec;border-color:#f6cdd5;color:var(--jp)}
/* Dica ao lado do botão, só em telas com mouse/hover (evita ficar grudada
   em toque no celular, onde não há como "passar o mouse" pra tirar depois). */
@media (hover:hover) and (pointer:fine){
  .bt-densidade[data-tip]::after{content:attr(data-tip);position:absolute;top:100%;right:0;
       margin-top:.4rem;background:#1e293b;color:#fff;padding:.3rem .6rem;border-radius:6px;
       font-size:.72rem;line-height:1.3;white-space:nowrap;box-shadow:0 4px 10px rgba(0,0,0,.18);
       opacity:0;pointer-events:none;transform:translateY(-4px);transition:opacity .12s,transform .12s;z-index:60}
  .bt-densidade[data-tip]:hover::after,.bt-densidade[data-tip]:focus-visible::after{opacity:1;transform:translateY(0)}
}
/* A logo é larga (250×74): recolhida, encolhe pra caber nos 56px. */
body.lateral-fechada .lateral-marca img,body.lateral-fechada .lateral-marca svg{height:22px;max-width:40px;object-fit:contain}
/* No celular a MESMA lateral vira gaveta — uma navegação só para manter.
   O hambúrguer só existe aí; no desktop o botão é o "recolher" do pé. */
.hamb{display:none;background:transparent;border:0;color:var(--ink);font-size:1.05rem;
      cursor:pointer;padding:.35rem .55rem;border-radius:8px}
.hamb:hover{background:#f1f5f9}
#lateral-fundo{display:none}
/* Faixa sensível ao toque na borda esquerda: arrastar pra dentro abre a gaveta. */
#offcanvas-borda{position:fixed;top:0;left:0;bottom:0;width:14px;z-index:110;display:none}
@media(max-width:900px){
  #offcanvas-borda{display:block}
  .hamb{display:inline-flex;align-items:center;justify-content:center;margin-left:-.25rem}
  .lateral{position:fixed;top:0;left:0;bottom:0;width:280px;max-width:85vw;flex-basis:280px;
       transform:translateX(-100%);transition:transform .22s ease;box-shadow:0 0 30px rgba(15,23,42,.3)}
  body.menu-aberto .lateral{transform:none}
  #lateral-fundo{display:block;position:fixed;inset:0;background:rgba(15,23,42,.5);z-index:120;
       opacity:0;pointer-events:none;transition:opacity .22s}
  body.menu-aberto #lateral-fundo{opacity:1;pointer-events:auto}
  body.menu-aberto{overflow:hidden}
  /* Em gaveta não existe "recolher": ou está aberta ou fechada. */
  .lateral-alternar{display:none}
  .conta-btn{padding:.22rem;gap:0}
  .conta-btn .conta-nome,.conta-btn .conta-seta{display:none}
  main{padding:0 1rem}
  .topbar{padding:.35rem .8rem}
}
.data-destaque{background:#fde8ec;color:var(--jp);font-weight:700;border-radius:999px;
     padding:.05rem .5rem;font-size:.86em;white-space:nowrap}
/* Faixa de aviso: página fora do que o perfil 'vanessa' enxergaria (ver
   rota_permitida_para_perfil() no bootstrap). Fininha de propósito — é um
   lembrete visual pra quem está navegando, não um bloqueio. */
#faixa-fora-vanessa{background:#f59e0b;color:#4a2d02;font-size:.72rem;font-weight:700;
     text-align:center;padding:.22rem .6rem;letter-spacing:.02em}

/* --- Utilitarios ------------------------------------------------------------
   Uma duzia, de proposito: sao os padroes que se repetem nos style="..." das
   telas ("flex com gap", "empurra pro canto", "numero alinhado a direita").
   Nao e um framework de utilitarios — quando um caso aparece uma vez so, ele
   continua sendo CSS da propria tela.
   -------------------------------------------------------------------------- */
.linha{display:flex;align-items:center;gap:var(--e2)}
.linha-topo{display:flex;align-items:flex-start;gap:var(--e2)}
.entre{display:flex;align-items:center;justify-content:space-between;gap:var(--e2)}
.quebra{flex-wrap:wrap}
.empurra{margin-left:auto}
.gap-1{gap:var(--e1)}.gap-2{gap:var(--e2)}.gap-3{gap:var(--e3)}.gap-4{gap:var(--e4)}
.num{font-variant-numeric:tabular-nums}
.dir{text-align:right}
.mini{font-size:var(--t-mini)}
.peq{font-size:var(--t-peq)}
.forte{font-weight:700}
.sem-margem{margin:0}
.largura-total{width:100%}

.graf-caixa{position:relative}

/* Notas de leitura de um gráfico ou tabela, recolhidas. Mesmo peso visual do
   "ver SQL", que fica ao lado: as duas são a mesma promessa, a de que dá para
   auditar o número sem sair da tela. */
details.notas{margin-top:.6rem}
details.notas summary{color:var(--mut);font-size:.78rem;cursor:pointer;font-weight:600}
details.notas summary::marker{color:var(--mut)}
details.notas .notas-caixa{margin-top:.5rem;padding:.7rem .85rem;background:#f8fafc;
     border:1px solid var(--bord);border-radius:8px}
details.notas .notas-caixa p{margin:0 0 .5rem;color:var(--mut);font-size:.82rem;line-height:1.5}
details.notas .notas-caixa p:last-child{margin-bottom:0}

/* Ampliar o gráfico: botão no cabeçalho do card, e o card vira uma sobreposição
   da própria página. Não é a tela cheia do navegador — ela esconde a barra de
   endereço e os menus, o que atrapalha em reunião. Aqui basta Esc, ou o mesmo
   botão de novo, para voltar.

   O <h3> só vira flex quando ganha o botão (classe .com-ampliar, posta pelo JS):
   os cards sem gráfico continuam com o título exatamente como estavam. */
.card h3.com-ampliar,.card h2.com-ampliar{display:flex;align-items:center;
     justify-content:space-between;gap:.6rem}
.botao-ampliar{flex:0 0 auto;background:none;border:1px solid var(--bord);border-radius:7px;
     color:var(--mut);cursor:pointer;font-size:.78rem;line-height:1;padding:.34rem .46rem}
.botao-ampliar:hover{background:#f1f5f9;color:var(--ink)}

.card.ampliado{position:fixed;inset:0;z-index:1200;margin:0;border-radius:0;border:0;
     overflow:auto;padding:1.5rem 1.8rem}
body.tem-ampliado{overflow:hidden}
@media (max-width:640px){.card.ampliado{padding:1rem}}

/* Colunas de texto com largura ajustável pelo leitor (arrastar a alça no canto
   direito do cabeçalho). Vale para qualquer coluna cujo cabeçalho tenha um
   <span class="rotulo-ajustavel">, não só a primeira. Existe para print: o nome do serviço por extenso é
   longo e empurra as competências para fora da tela, e quem vai colar a tabela
   num relatório precisa decidir o que cabe. A escolha fica no localStorage,
   então sobrevive ao recarregar.

   O corte é no conteúdo, não na coluna: um <span> com ellipsis dentro da
   célula. Mexer na largura do <th> exigiria table-layout:fixed, que tiraria o
   dimensionamento automático das outras colunas.

   Começa ESTREITA (13rem) de propósito. Nome de serviço por extenso tem 50+
   caracteres e, solto, empurra as competências para fora da tela logo na
   abertura: quem chega na tela vê nome de hospital e nenhum número. Alargar é
   um arrasto; descobrir que existem colunas escondidas à direita, não. */
table.colunas-ajustaveis th{position:relative}
table.colunas-ajustaveis .rotulo-ajustavel{display:inline-block;
     overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:bottom;
     max-width:var(--larg-padrao,13rem)}
.alca-coluna{position:absolute;top:0;right:0;width:9px;height:100%;cursor:col-resize;
     display:flex;align-items:center;justify-content:center}
.alca-coluna::after{content:"";width:2px;height:60%;background:var(--bord);border-radius:2px}
.alca-coluna:hover::after,.alca-coluna.arrastando::after{background:var(--jp)}
body.redimensionando{cursor:col-resize;user-select:none}

/* Link dentro de tabela e card. Sem isto vale o azul padrão do navegador
   (#0000EE), que não é cor nenhuma do sistema e grita no meio de uma tabela de
   números. Escopado ao conteúdo: .botao e a navegação têm cor própria e não
   podem ser alcançados por aqui. */
.tabela-rolagem a,.card table a{color:var(--acc);text-decoration:none}
.tabela-rolagem a:hover,.card table a:hover{text-decoration:underline}