/* ============================================================================
   mobile.css — folha do shell MOBILE (priv/static/index.html).
   Saiu de dentro do <style> inline: estilo novo entra aqui, não no HTML.
   Cor = SEMPRE token do theme.css; nunca literal (cor:ci confere).
   Vem DEPOIS do theme.css e ANTES das folhas do core/mods — a cascata é a de
   quando era <style>: o app define a base e as folhas dos módulos ajustam.
   ========================================================================= */

* { box-sizing:border-box; font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; }
/* evita o "pull-to-refresh" do navegador: arrastar pra baixo recarregava o app
   (SPA voltava pra tela principal e o usuário perdia o que estava fazendo). */
html, body { overscroll-behavior-y: contain; }
body { margin:0; min-height:100vh; display:flex; align-items:flex-start; justify-content:center;
       background:linear-gradient(135deg,var(--bg),var(--bg2)); color:var(--txt);
       padding:max(16px,env(safe-area-inset-top)) 12px max(16px,env(safe-area-inset-bottom)); }
.card { width:380px; max-width:94vw; background:var(--card);
        border:1px solid var(--line); border-radius:14px; padding:22px;
        box-shadow:0 10px 30px rgba(var(--shade-rgb),.35); margin-top:6vh; }
/* telas de formulário: largura DINÂMICA — enchem a tela (tablet/desktop) e capam
   num limite legível; no celular caem no 96vw. Antes era fixo em 820px (sobrava
   faixa vazia dos lados no tablet em paisagem). */
.card.wide { width:96vw; max-width:1400px; margin-top:2vh; }
/* Agenda usa o máximo de largura: a moldura invade o padding do body (margem
   negativa, sem estourar — sobra ~4px de folga) e a tabela cola nas bordas. */
#agendaView { width:calc(100% + 16px); max-width:calc(100% + 16px);
              margin:-12px -8px 0; padding:8px 4px 16px; }
/* Tela PEQUENA (celular) DEITADA: exige retrato (o layout mobile é vertical).
   Detecta "aparelho pequeno em paisagem" pela ALTURA baixa — celular deitado
   ~<=430px, tablet deitado >=600px, então no tablet NÃO aparece (gira livre).
   Cross-platform (Android e iPhone), sem depender de API de lock. */
.rotate-hint { display:none; }
@media (orientation: landscape) and (max-height: 500px) {
  .rotate-hint { display:flex; position:fixed; inset:0; z-index:100000;
    background:linear-gradient(135deg,var(--bg),var(--bg2)); color:var(--txt);
    align-items:center; justify-content:center; text-align:center;
    padding:24px max(24px,env(safe-area-inset-left)); }
  .rotate-hint .rh-emoji { font-size:52px; margin-bottom:10px; }
  .rotate-hint h2 { margin:0 0 6px; font-size:20px; }
  .rotate-hint p { margin:0; opacity:.82; max-width:380px; line-height:1.5; }
}
h1 { font-size:20px; margin:0 0 2px; }
.sub, .muted { color:var(--mut); }
.sub { font-size:13px; margin-bottom:16px; }
.muted { font-size:12px; } .small { font-size:11px; }
label { display:block; font-size:12px; color:var(--mut); margin:12px 0 4px; }
input { width:100%; padding:12px; border-radius:8px; border:1px solid var(--line);
        background:var(--card); color:var(--txt); font-size:16px; }
input:focus { outline:none; border-color:var(--acc2); }
/* logo Clinica1 no login (wordmark em chip claro, legível no fundo escuro) */
.brand { display:flex; justify-content:center; margin:4px 0 18px; }
.brand img { height:56px; width:auto; max-width:82%; }
/* campo de senha com botão "mostrar senha" (olho) */
.pwwrap { position:relative; }
.pwwrap > input { padding-right:48px; }
.pw-eye { position:absolute; top:0; right:0; height:100%; width:44px; background:transparent; border:none;
          color:var(--mut); display:flex; align-items:center; justify-content:center; padding:0; }
.pw-eye:hover { color:var(--txt); }
select { width:100%; padding:12px; border-radius:8px; border:1px solid var(--line);
  background:var(--panel); color:var(--txt); font-size:15px; -webkit-appearance:none; appearance:none; }
select:focus { outline:none; border-color:var(--acc2); }
button { border:0; border-radius:8px; cursor:pointer; font-weight:700; }
.primary { width:100%; margin-top:18px; padding:14px; background:var(--acc2); color:var(--on-acc); font-size:16px; }
.primary:hover { background:var(--acc2-hover); } button:disabled { opacity:.6; cursor:default; }
.ghost { background:transparent; color:var(--txt); border:1px solid var(--line); }
.ghost:hover { background:var(--surface-2); }
#status { margin-top:14px; font-size:13px; min-height:18px; }
.ok { color:var(--acc); } .err { color:var(--danger-fg); }
pre { white-space:pre-wrap; word-break:break-all; font-size:12px; background:var(--inset);
      padding:10px; border-radius:8px; margin-top:14px; max-height:200px; overflow:auto; display:none; }

/* ---- Agenda ---- */
.topbar { display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:14px; }
.topbar b { font-size:16px; }
/* 2ª linha do cabeçalho: identidade FIXA do paciente (nome + prontuário), abaixo do topbar */
.pacline { display:flex; align-items:center; gap:8px; margin:-6px 0 12px; padding:7px 12px; min-width:0;
           background:rgba(var(--acc-rgb),.08); border:1px solid rgba(var(--acc-rgb),.22); border-radius:8px; font-size:14px; }
.pacline .pac-nome { font-weight:700; color:var(--txt); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pacline .pac-pront { color:var(--acc); font-weight:800; white-space:nowrap; }
.datenav { display:flex; align-items:center; justify-content:center; gap:8px; margin:6px 0; flex-wrap:wrap; position:relative; }
.nav { width:42px; height:42px; font-size:22px; background:var(--surface-2); color:var(--txt); }
.nav:hover { background:var(--surface-3); }
.dateheader { min-width:180px; text-align:center; font-size:16px; font-weight:700; text-transform:capitalize;
              cursor:pointer; padding:9px 10px; border-radius:8px; background:var(--card); }
.dateheader:hover { background:var(--surface-2); }
.datepicker-hidden { position:absolute; left:50%; bottom:0; width:1px; height:1px; opacity:0; border:0; padding:0; }
.controls { display:flex; align-items:center; justify-content:space-between; gap:10px; margin:12px 0; flex-wrap:wrap; }
.chip { padding:8px 14px; background:var(--surface-2); color:var(--txt); font-size:13px; }
.chip:hover { background:var(--surface-3); }
/* chip com filtro ativo: o ícone e o texto assumem a cor de destaque. Token de
   tema, nunca literal — vale nos dois temas (theme.css). */
.chip.on { color:var(--acc); border-color:var(--acc); }
.agf-foot { display:flex; gap:8px; margin-top:12px; }
.agf-foot .chip { flex:1; }
.agf-foot .icobtn { flex:1; }
/* "Hoje" na barra de data: mesma altura da caixa de data p/ alinhar a linha */
.datenav #btnHoje { min-height:37px; display:inline-flex; align-items:center; }
.toggle { display:inline-flex; border:1px solid var(--line); border-radius:8px; overflow:hidden; }
.seg { padding:8px 14px; background:transparent; color:var(--txt); font-size:13px; border-radius:0; }
.seg.active { background:var(--acc2); color:var(--on-acc); }
.tablewrap { overflow-x:auto; border:1px solid var(--line); border-radius:8px; margin-top:6px; max-height:62vh; }
table { width:100%; border-collapse:collapse; font-size:13px; }
thead th { position:sticky; top:0; background:var(--panel); text-align:left; padding:9px 8px; white-space:nowrap; z-index:1; }
tbody td { padding:8px; border-top:1px solid var(--line-soft); vertical-align:top; }
tbody tr:hover { background:var(--card); }
td.hora { font-weight:700; white-space:nowrap; }
/* aproveita a largura extra da agenda: coluna Agenda ocupa o espaco livre */
#agendaView thead th:nth-child(1) { width:78px; }
#agendaView thead th:nth-child(2) { width:auto; }
#agendaView thead th:nth-child(3),
#agendaView thead th:nth-child(4) { width:140px; }
#agendaView thead th:nth-child(5) { width:90px; }
tr.ag-meta td { border-top:1px solid var(--line); }
tr.ag-pac td { border-top:0; padding:0 8px 9px 16px; color:var(--txt); }
tr.ag-pac b { font-weight:700; }
tr.vrow { background:rgba(var(--acc2-rgb),.10); }
#agBody tr[data-row] { cursor:pointer; }
/* LINHA SELECIONADA — mesma moldura do desktop (ver "LINHA SELECIONADA" em
   desktop/desktop.css), com uma diferença ESTRUTURAL: aqui o registro são
   DUAS <tr>, a .ag-meta (hora/agenda/classificação/convênio/prontuário) e a
   .ag-pac (nome do paciente), montadas juntas por agRowHtml e marcadas juntas
   por selecionarLinha. `outline` desenharia DOIS retângulos com um filete no
   meio, então a moldura se monta com box-shadow inset: topo na primeira, base
   na última, laterais nas duas.
   box-shadow NÃO acumula entre regras — a mais específica substitui a
   declaração inteira —, por isso cada linha abaixo já traz todos os lados
   daquela célula. A .ag-pac tem uma <td colspan=5> única: é :first-child E
   :last-child ao mesmo tempo, e leva os três lados numa declaração só.
   No topo o verde entra RECOLORINDO a borda de 1px que já existe (.ag-meta td
   tem border-top) e somando 1px de inset: dois de verde, zero deslocamento.
   Pôr `border-top:2px` empurraria a linha 1px a cada clique.
   O verde entra no lugar do azul (--info) que marcava só aqui: a agenda do
   celular é a MESMA agenda do desktop e não tinha por que ler diferente. */
#agBody tr.sel td { background:rgba(var(--acc-rgb),.17) !important; }
#agBody tr.sel.ag-meta td { border-top-color:var(--acc); box-shadow:inset 0 1px 0 var(--acc); }
#agBody tr.sel.ag-meta td:first-child { box-shadow:inset 0 1px 0 var(--acc), inset 2px 0 0 var(--acc); }
#agBody tr.sel.ag-meta td:last-child { box-shadow:inset 0 1px 0 var(--acc), inset -2px 0 0 var(--acc); }
#agBody tr.sel.ag-pac td { box-shadow:inset 2px 0 0 var(--acc), inset -2px 0 0 var(--acc), inset 0 -2px 0 var(--acc); }

/* VAGA ABERTA AO AUTOAGENDAMENTO — a faixa do início do registro (a barra azul que
   o c1serenity desenha na homeAgenda por `a030PermiteAgendamentoCliente`). A classe
   vem do miolo puro (`rowHtml`, só vaga VAZIA) nas DUAS <tr> do cartão, então a
   faixa desce o registro inteiro: hora em cima, paciente embaixo.

   ::before DESLOCADA da borda (left:3px), nunca um inset na borda: a seleção mora
   nos 2px da esquerda (`inset 2px 0 0 var(--acc)` acima) e box-shadow NÃO acumula —
   desenhar a faixa ali trocaria um sinal pelo outro. Padding nenhum muda: cabe nos
   8px que a td já reserva (16px na .ag-pac), então o cartão não se mexe. */
#agBody tr.ag-autoagend>td:first-child { position:relative; }
#agBody tr.ag-autoagend>td:first-child::before { content:""; position:absolute; left:3px; top:0; bottom:0;
  width:3px; background:var(--ag-autoagend); }
#agBody tr.ag-meta.ag-autoagend>td:first-child::before { top:2px; border-radius:2px 2px 0 0; }
#agBody tr.ag-pac.ag-autoagend>td:first-child::before { bottom:2px; border-radius:0 0 2px 2px; }
.vagatag { display:inline-block; font-size:11px; font-weight:700; color:var(--on-acc); background:var(--acc);
           padding:1px 7px; border-radius:999px; }
.agstatus { font-size:13px; margin:8px 2px; min-height:18px; }

/* ---- Abas Agenda/Buscar ---- */
.home-tabs { display:flex; gap:6px; margin:0 0 14px; border-bottom:1px solid var(--line); }
/* BARRA ÚNICA de abas (Agenda/Cadastro/Buscar) FIXA no topo da tela; as telas
   trocam EMBAIXO dela, sem navegação — comportamento de app com abas. */
.home-tabs-bar { display:none; position:fixed; top:0; left:0; right:0; z-index:90;
  flex-direction:column; background:var(--panel);
  padding:calc(8px + env(safe-area-inset-top)) 8px 0;
  box-shadow:0 6px 14px rgba(var(--shade-rgb),.35); border-bottom:1px solid var(--line); }
.home-tabs-bar.on { display:flex; }
.home-tabs-row { display:flex; gap:6px; justify-content:center; align-items:center; }
.htab-sair { margin-left:auto; padding:8px 12px; font-size:16px; }
body.tabs-on { padding-top:var(--tabsbar-h, calc(58px + env(safe-area-inset-top))); }
/* acesso rápido (modelo desktop): identidade + chips de formulários no topo */
.quickpac { border-top:1px solid var(--line); padding:6px 2px 0; }
.quickpac-id { display:flex; align-items:center; gap:8px; font-weight:700; font-size:14px;
  padding:2px 6px 6px; cursor:pointer; }
.quickpac-id .qp-nome { border-radius:6px; padding:1px 8px; }
.quickpac-id .qp-nome.cli-bloq { background:rgba(var(--danger-rgb),.3); }
.quickpac-id .qp-pront { color:var(--acc2); font-size:13px; white-space:nowrap; }
.quickpac-id .qp-x { margin-left:auto; background:transparent; border:none; color:var(--mut);
  font-size:16px; padding:2px 8px; }
.quickpac-btns { display:flex; gap:6px; overflow-x:auto; padding:0 2px 8px;
  -webkit-overflow-scrolling:touch; scrollbar-width:thin; }
.quickpac-btns button { flex:none; background:var(--card); color:var(--txt);
  border:1px solid var(--line); border-radius:16px; padding:7px 12px; font-size:13px; }
.quickpac-btns button.preenchido { background:rgba(var(--preenchido-rgb),.25); border-color:rgba(var(--preenchido-rgb),.75); }
/* selo (N) dos formulários com dados — cliente e acesso rápido */
.cli-acoes button .selo, .quickpac-btns button .selo { background:var(--acc2); color:var(--on-acc2);
  border-radius:10px; padding:0 7px; font-size:11.5px; font-weight:700; display:inline-block; }
.htab { padding:10px 18px; background:transparent; color:var(--mut); border-radius:8px 8px 0 0; font-size:14px; }
.htab.active { background:var(--surface-2); color:var(--txt); box-shadow:inset 0 -2px 0 var(--acc2); }
/* destaque das abas principais (Agenda / Buscar cliente): leem como a navegação-mãe */
.htab[data-home] { background:var(--card); font-weight:600; }
.htab[data-home]:hover { background:var(--surface-2); color:var(--txt); }
.htab[data-home].active { background:rgba(var(--acc2-rgb),.16); color:var(--txt); }
.busca-bar { display:flex; gap:8px; margin-bottom:10px; }
.busca-bar input { flex:1; }
#buscaBody [data-cli] { cursor:pointer; }
#buscaBody [data-cli]:hover { background:var(--card); }

/* ---- Calendario ---- */
/* diálogos SEMPRE por cima da barra fixa de abas (z-index 90) — senão o topo
   do formulário (Salvar/Fechar) fica escondido atrás dela */
.cal-overlay { position:fixed; inset:0; background:var(--overlay); display:flex;
               align-items:center; justify-content:center; z-index:200; padding:16px; }
/* estado INICIAL de overlay fechado — o abrir/fechar continua sendo
   `style.display` na fiação (inline vence a classe), então isto só evita o
   `style="display:none"` cravado no HTML. */
.cal-overlay.oculto { display:none; }
.cal { width:340px; max-width:94vw; background:var(--panel); border:1px solid var(--line);
       border-radius:14px; padding:16px; box-shadow:0 12px 40px rgba(var(--shade-rgb),.5); }
.cal-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
.cal-title { font-weight:700; text-transform:capitalize; }
.cal-week, .cal-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:4px; }
.cal-week { margin-bottom:4px; color:var(--mut); font-size:12px; text-align:center; }
.cal-day { aspect-ratio:1; display:flex; align-items:center; justify-content:center; border-radius:8px;
           font-size:14px; background:var(--card); cursor:pointer; border:1px solid transparent; }
.cal-day.empty { background:transparent; cursor:default; }
.cal-day:not(.empty):hover { border-color:var(--border-hover); }
.cal-day.today { outline:2px solid var(--info); outline-offset:-2px; }
/* Semáforo da ocupação (ver --cal-* no theme.css): pastel SÓLIDO de propósito —
   como véu translúcido o painel atravessava e o amarelo virava marrom. */
.cal-day.v { background:var(--cal-livre); color:var(--cal-txt); }
.cal-day.a { background:var(--cal-pouca); color:var(--cal-txt); }
.cal-day.r { background:var(--cal-lotado); color:var(--cal-txt); }
.cal-legend { display:flex; gap:14px; justify-content:center; margin-top:12px; font-size:11px; color:var(--mut); }
.cal-legend .dot { display:inline-block; width:11px; height:11px; border-radius:3px; margin-right:5px; vertical-align:middle; }
/* a legenda usa a MESMA tinta do dia (era cor parecida em outro alpha) */
.dot.v { background:var(--cal-livre); } .dot.a { background:var(--cal-pouca); } .dot.r { background:var(--cal-lotado); }

/* ---- Seta "ver cliente" na linha ---- */
.pront-cell { white-space:nowrap; }
button.ir { width:26px; height:26px; padding:0; margin-left:8px; font-size:17px; line-height:1;
            background:var(--acc2); color:var(--on-acc); border-radius:50%; vertical-align:middle; }
button.ir:hover { background:var(--acc2-hover); }

/* ---- Tela do cliente ---- */
.cli-top { display:flex; align-items:center; gap:12px; margin-bottom:16px; }
.cli-foto-wrap { width:84px; height:84px; flex:0 0 84px; border-radius:50%; overflow:hidden;
                 background:var(--surface-2); border:2px solid var(--line); }
.cli-foto-wrap img { width:100%; height:100%; object-fit:cover; display:none; cursor:zoom-in; }
.cli-foto-ph { width:100%; height:100%; display:flex; align-items:center; justify-content:center;
               font-size:30px; font-weight:700; color:var(--mut); }
.cli-id h1 { margin:0; font-size:20px; }
.d-row { display:flex; gap:10px; padding:8px 0; border-top:1px solid var(--line-soft); font-size:14px; }
.d-lab { flex:0 0 96px; color:var(--mut); }
.d-val { color:var(--txt); }
.cli-acoes { display:flex; gap:10px; margin-top:18px; flex-wrap:wrap; }
.cli-acoes button { flex:1; min-width:96px; padding:14px 10px; background:var(--card);
                    color:var(--txt); border:1px solid var(--line); font-size:14px; }
.cli-acoes button:hover { background:var(--surface-2); }
/* formulário já preenchido: destaque + contador entre parênteses */
.cli-acoes button.preenchido { background:rgba(var(--preenchido-rgb),.20); border-color:rgba(var(--preenchido-rgb),.7);
                               font-weight:600; box-shadow:inset 0 0 0 1px rgba(var(--preenchido-rgb),.35); }
.cli-acoes button.preenchido:hover { background:rgba(var(--preenchido-rgb),.30); }
/* Cadastro do paciente: 1º botão, largura total, destaque (como a aba de Cadastro no desktop) */
.cli-acoes button.cli-cadastro { flex-basis:100%; background:rgba(var(--preenchido-rgb),.16);
                                 border-color:rgba(var(--preenchido-rgb),.5); font-weight:600; }
.cli-acoes button.cli-cadastro:hover { background:rgba(var(--preenchido-rgb),.26); }
/* Tela de Cadastro: cabeçalho fixo no topo; só o conteúdo rola (por dentro).
   showView seta display:block inline, então não dá p/ usar flex — o padrão do
   app é max-height no container de rolagem (a topbar, em fluxo de bloco, fica em cima). */
#cadastroView > .topbar { margin-bottom:8px; }
#cadDados { max-height:calc(100vh - 150px); overflow-y:auto; -webkit-overflow-scrolling:touch; }
/* Tela de Cadastro: seções */
.cad-sec { margin-top:16px; }
.cad-sec-h { font-size:12px; text-transform:uppercase; letter-spacing:.05em; color:var(--acc);
             font-weight:700; padding-bottom:4px; border-bottom:1px solid rgba(var(--acc-rgb),.25); }
.cad-sec .d-row:first-of-type { border-top:none; }
.d-lab.wide { flex:0 0 130px; }
/* ---- Anamnese ---- */
.anam-nav { position:sticky; top:0; z-index:3; display:flex; align-items:center; gap:8px;
            justify-content:center; padding:6px 0 10px; background:var(--panel); flex-wrap:nowrap; }
.anam-data { min-width:160px; max-width:60vw; text-align:center; padding:6px 12px;
             background:var(--card); border-radius:8px; }
.anam-data #anamData { font-weight:700; text-transform:capitalize; font-size:14px; }
.anam-nav .nav:disabled { opacity:.3; cursor:default; }
.anam-scroll { max-height:60vh; overflow-y:auto; border:1px solid var(--line);
               border-radius:8px; padding:14px; }
.anam-sec { margin-bottom:16px; }
.anam-sec h3 { margin:0 0 4px; font-size:12px; color:var(--acc); text-transform:uppercase; letter-spacing:.05em; }
.anam-sec .conteudo { font-size:14px; line-height:1.55; color:var(--txt); }
.anam-sec .conteudo p { margin:0 0 6px; }
.anam-ret { border-left:2px solid rgba(var(--acc-rgb),.45); padding:2px 0 2px 10px; margin-bottom:12px; }
.ret-dt { font-weight:700; font-size:12px; color:var(--mut); margin-bottom:3px; }

/* ---- Edição da anamnese ---- */
.anam-toolbar { display:flex; gap:8px; justify-content:center; margin:0 0 10px; flex-wrap:wrap; }
.fmtbar { display:flex; gap:4px; flex-wrap:wrap; margin:8px 0 4px; }
.fmtbar .icobtn { padding:6px 10px; font-size:13px; min-width:34px; }
.icobtn { padding:8px 14px; font-size:13px; background:var(--surface-2); color:var(--txt); }
.icobtn:hover { background:var(--surface-3); }
.icobtn.save { background:var(--acc2); color:var(--on-acc); } .icobtn.save:hover { background:var(--acc2-hover); }
.tabs { display:flex; gap:6px; border-bottom:1px solid var(--line); margin-bottom:12px; }
.tabbtn { padding:9px 16px; background:transparent; color:var(--mut); border-radius:8px 8px 0 0; font-size:14px; }
.tabbtn.active { background:var(--surface-2); color:var(--txt); box-shadow:inset 0 -2px 0 var(--acc2); }
.ed-field { margin-bottom:12px; }
.ed-field > label { font-size:12px; color:var(--acc); text-transform:uppercase; letter-spacing:.04em; }
.ed-box { min-height:48px; margin-top:4px; padding:8px 10px; border:1px solid var(--line);
          border-radius:8px; background:var(--card); color:var(--txt); font-size:14px; line-height:1.5; }
.ed-box:focus { outline:none; border-color:var(--acc2); }
.ed-box p { margin:0 0 6px; }
/* só a HORA fica estreita: o campo de data deixou de ser `input[type=date]` (que
   renderizava no locale do navegador, mm/dd/aaaa em Chrome inglês) e virou o
   texto mascarado .dataBR, que segue a largura do vizinho na linha. */
input[type=time] { width:auto; }
.ed-row { display:flex; gap:8px; flex-wrap:wrap; align-items:flex-end; margin-bottom:10px; }
.ed-row > div { flex:1; min-width:120px; }
.ed-row label { font-size:12px; color:var(--mut); }
.ret-card, .cid-card { border:1px solid var(--line); border-radius:8px; padding:10px 12px;
                       margin-bottom:8px; display:flex; justify-content:space-between; gap:10px; align-items:flex-start; }
.ret-card .body, .cid-card .body { flex:1; }
.minibtn { width:30px; height:30px; padding:0; font-size:14px; background:var(--surface-2); color:var(--txt); flex:0 0 auto; }
.minibtn:hover { background:var(--surface-3); }
/* ícones SVG (Feather) — herdam a cor do botão via currentColor */
.ic { width:22px; height:22px; display:block; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.interim { color:var(--mut); }   /* texto interino do ditado, ao vivo */
#ditadoRec.on { background:var(--danger); color:var(--txt); animation:pulse 1.2s infinite; }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.6} }
.minibtn.del:hover { background:rgba(var(--danger-rgb),.5); }
.cid-search { position:relative; }
.cid-drop { position:absolute; left:0; right:0; top:100%; z-index:5; background:var(--panel);
            border:1px solid var(--line); border-radius:0 0 8px 8px; max-height:240px; overflow-y:auto; }
.cid-opt { padding:8px 10px; cursor:pointer; font-size:13px; border-top:1px solid var(--line-soft); }
.cid-opt:hover { background:var(--surface-2); }
.cid-opt b { color:var(--acc); }
label.cid-sug { display:block; padding:9px 10px; border:1px solid var(--line); border-radius:8px;
                margin-bottom:8px; cursor:pointer; font-size:14px; }
label.cid-sug:hover { background:var(--card); }
label.cid-sug input { width:auto; margin-right:8px; vertical-align:middle; }
label.cid-sug b { color:var(--acc); }

/* ---- Ditado por voz ---- */
.ed-label-row { display:flex; align-items:center; justify-content:space-between; gap:8px; }
button.mic { width:30px; height:30px; padding:0; font-size:15px; background:var(--surface-2);
             color:var(--txt); flex:0 0 auto; border-radius:50%; }
button.mic:hover { background:rgba(var(--acc2-rgb),.45); }
.ditar-box { min-height:160px; max-height:42vh; overflow:auto; }
#ditarRec.rec { background:var(--danger); color:var(--txt); animation:pulse 1.2s infinite; }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.6} }
.ditar-interim { color:var(--mut); }

/* ---- Oftalmo (grades OD/OE) ---- */
.oft-sec { margin-bottom:18px; }
.oft-sec > h3 { margin:0 0 6px; font-size:12px; color:var(--acc); text-transform:uppercase; letter-spacing:.05em; }
.oft-grid { width:100%; border-collapse:collapse; font-size:13px; }
.oft-grid th, .oft-grid td { border:1px solid var(--line); padding:4px 6px; text-align:center; }
.oft-grid th { color:var(--mut); font-weight:600; font-size:11px; text-transform:uppercase; }
.oft-grid td.lado { color:var(--acc); font-weight:700; width:44px; }
.oft-grid input { width:100%; min-width:52px; padding:5px 4px; text-align:center; border:none;
                  background:var(--card); color:var(--txt); border-radius:5px; font-size:13px; }
.oft-grid input:focus { outline:none; background:rgba(var(--acc2-rgb),.18); }
.oft-extra { display:flex; gap:8px; flex-wrap:wrap; align-items:flex-end; margin-top:8px; }
.oft-extra > div { flex:0 1 auto; }
.oft-extra label { font-size:11px; color:var(--mut); display:block; margin-bottom:2px; }
.oft-extra input { width:110px; padding:6px 8px; border:1px solid var(--line);
                   background:var(--card); color:var(--txt); border-radius:6px; }
.oft-cola { display:flex; gap:8px; flex-wrap:wrap; margin-top:8px; }
.oft-cola .cola { font-size:12px; padding:6px 10px; background:rgba(var(--acc2-rgb),.16);
                  border:1px solid rgba(var(--acc2-rgb),.4); }
.oft-cola .cola:hover { background:rgba(var(--acc2-rgb),.3); }
.oft-ditar { margin:2px 0 14px; }
.oft-ia-resumo { margin-top:8px; padding:8px 10px; border-radius:8px; font-size:13px;
                 background:rgba(var(--acc2-rgb),.12); border:1px solid rgba(var(--acc2-rgb),.35); }
.oft-grid input.ia-fill, .oft-extra input.ia-fill { background:rgba(var(--acc2-rgb),.28);
                 animation:pulse 1.1s 2; }
.oft-grid input.ia-warn, .oft-extra input.ia-warn { background:rgba(var(--danger-rgb),.28);
                 border:1px solid var(--danger); }
/* leitura: mostra valores como uma tabelinha compacta */
.oft-ro table { width:100%; border-collapse:collapse; font-size:13px; margin-top:2px; }
.oft-ro th, .oft-ro td { border:1px solid var(--line); padding:3px 6px; text-align:center; }
.oft-ro td.lado { color:var(--acc); font-weight:700; }
.oft-ro .txtval { text-align:left; }

/* ---- Documentos (fotos) ---- */
.doc-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(130px,1fr)); gap:10px; }
.doc-tile { border:1px solid var(--line); border-radius:8px; overflow:hidden; cursor:pointer;
            background:var(--card); }
.doc-tile:hover { border-color:rgba(var(--acc2-rgb),.5); }
.doc-thumb { height:120px; display:flex; align-items:center; justify-content:center; overflow:hidden;
             background:var(--inset); font-size:34px; }
.doc-thumb img { width:100%; height:100%; object-fit:cover; }
.doc-cap { padding:6px 8px; text-align:center; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.doc-badge { display:block; font-size:11px; color:var(--mut); }
.rot90 { transform:rotate(90deg); } .rot180 { transform:rotate(180deg); } .rot270 { transform:rotate(270deg); }
.doc-add { display:flex; gap:8px; justify-content:center; flex-wrap:wrap; margin:2px 0 8px; }
.doc-add .icobtn.on { background:var(--acc2); color:var(--on-acc); }
#docGrid.reordering .doc-tile { cursor:grab; touch-action:none; }
#docGrid.reordering .doc-cap { pointer-events:none; }
.doc-tile.dragging { opacity:.35; }
.doc-tile.droptarget { border-color:var(--acc2); box-shadow:0 0 0 2px var(--acc2) inset; }
/* modo reordenar: mostra as 12 posições (4 colunas x 3 linhas) */
.doc-grid.slots12 { grid-template-columns:repeat(4,1fr); gap:6px; }
.doc-grid.slots12 .doc-thumb { height:74px; }
.doc-grid.slots12 .doc-thumb img { object-fit:contain; }  /* reordenar: imagem INTEIRA, sem corte */
.doc-grid.slots12 .doc-cap { padding:3px 4px; font-size:11px; }
.doc-tile.vazio { border-style:dashed; opacity:.8; }
.doc-tile.vazio .doc-thumb { color:var(--mut-soft); font-size:20px; font-weight:600; background:var(--card); }

.foto-full { position:fixed; inset:0; background:rgba(var(--shade-rgb),.93); display:none; z-index:90;
             align-items:center; justify-content:center; padding:12px; cursor:zoom-out; }
.foto-full img { max-width:100%; max-height:100%; object-fit:contain; border-radius:6px; }
/* legenda editável no visor de foto (feature portada do desktop) */
.foto-cap { position:fixed; left:0; right:0; bottom:0; z-index:91; cursor:default;
            display:flex; gap:8px; align-items:center; flex-wrap:wrap;
            padding:12px max(14px,env(safe-area-inset-left)) max(14px,env(safe-area-inset-bottom));
            background:linear-gradient(transparent, rgba(var(--shade-rgb),.9)); }
.foto-cap .fc-text { flex:1 1 120px; min-width:0; color:var(--txt); font-size:15px; line-height:1.4; }
.foto-cap .fc-input { flex:1 1 160px; min-width:0; padding:9px 11px; border-radius:8px; font-size:15px;
            border:1px solid var(--line); background:var(--surface-2); color:var(--txt); }
/* Histórico / Lixeira das Fotos */
.fh-nav { display:flex; gap:6px; align-items:center; margin-bottom:4px; }
.fh-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); gap:8px; }
.fh-tile { border:1px solid var(--line); border-radius:8px; overflow:hidden; }
.fh-thumb { aspect-ratio:1; display:flex; align-items:center; justify-content:center;
            background:var(--card); font-size:26px; }
.fh-thumb img { width:100%; height:100%; object-fit:cover; }
.fh-cap { display:flex; gap:6px; align-items:center; justify-content:space-between; padding:6px 8px; font-size:12px; }
.lx-item { border:1px solid var(--line); border-radius:10px; padding:10px; margin-bottom:10px; }
.lx-head { display:flex; gap:8px; align-items:center; justify-content:space-between; flex-wrap:wrap; margin-bottom:8px; }
.doc-grid.selmode .doc-tile { cursor:pointer; }
.doc-tile.sel { outline:3px solid var(--danger); outline-offset:-3px; border-radius:8px; }
.doc-grid.cmpmode .doc-tile { cursor:pointer; }
.doc-tile.cmpsel { outline:3px solid var(--warn-fg); outline-offset:-3px; border-radius:8px; }
.cmp-ov { position:fixed; inset:0; z-index:95; background:rgba(var(--shade-rgb),.95); display:flex; flex-direction:column; }
.cmp-bar { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 14px; color:var(--txt); }
.cmp-row { flex:1; display:flex; gap:8px; padding:0 8px 8px; min-height:0; }
.cmp-col { flex:1; display:flex; flex-direction:column; min-width:0; min-height:0; }
.cmp-img { flex:1; min-height:0; display:flex; align-items:center; justify-content:center; color:var(--txt); }
.cmp-img img { max-width:100%; max-height:100%; object-fit:contain; }
.cmp-cap { text-align:center; color:var(--txt); padding:6px; font-size:13px; }
/* RETRATO: empilha as duas imagens (uma acima da outra) p/ aproveitar a tela alta;
   PAISAGEM mantém lado a lado. */
@media (orientation: portrait) { .cmp-row { flex-direction: column; } }
.cam-vid { width:100%; max-height:60vh; border-radius:8px; background:var(--visor-bg); }
/* toast = a ÚNICA superfície invertida do sistema: escura nos dois temas. Por isso
   par próprio (--toast-bg/--toast-fg) e não --overlay+--txt: no dia o --txt é quase
   preto e o toast ficava preto no preto (medido: 1,02:1).
   z-index ACIMA de todo diálogo (cal-overlay 200, sheet-ov 1000, audit/lix-ov 1100
   do core): o toast é a ÚNICA resposta que o mobile dá quando o Salvar do
   agendamento é barrado (nome/classificação/convênio obrigatórios). Em 80 ele era
   pintado atrás do painel OPACO do agendamento (.agmob-dlg, 92vh) — tocar Salvar
   não mostrava nada e o operador lia "Salvar não funciona" (29/07/2026). Fica
   abaixo só dos bloqueadores de tela cheia (rotate-hint/#rotateLock, ~100000),
   onde a tela inteira está indisponível de propósito.
   Guarda: e2e/test_agenda_salvar_aviso_mobile_ui.py. */
.toast { position:fixed; left:50%; bottom:24px; transform:translateX(-50%); background:var(--toast-bg);
         color:var(--toast-fg); padding:10px 18px; border-radius:999px; font-size:13px; z-index:1200; opacity:0;
         transition:opacity .2s; pointer-events:none; }
.toast.show { opacity:1; }
/* Recusa por trava (A004): âmbar de atenção. --warn/--on-warn já são o par de
   aviso do tema (dia E noite, contraste conferido pelo `npm run contraste`) —
   token, nunca literal. O toast comum é a única superfície INVERTIDA do tema;
   este é a exceção da exceção, e é de propósito: tem de destoar. */
.toast.toast-alerta { background:var(--warn); color:var(--on-warn); }
/* ---- Documentos (e003): markdown-lite + preview (espelha o PDF do c1sign) ---- */
.doc-toolbar { display:flex; gap:6px; flex-wrap:wrap; margin:6px 0; }
.doc-toolbar button { background:var(--surface-2); color:var(--txt); font-size:12px; padding:5px 9px; border-radius:6px; }
.doc-toolbar button:hover { background:var(--surface-3); }
.doc-toolbar select { background:var(--surface-2); color:var(--txt); font-size:12px; padding:4px 6px; border-radius:6px; border:0; }
.doc-corpo { font-family:ui-monospace,"SF Mono",Consolas,monospace; font-size:13px; }
.doc-preview-lbl { font-size:11px; color:var(--mut); margin:8px 0 3px; }
.doc-preview { background:var(--folha-bg); color:var(--folha-txt); border-radius:6px; padding:12px 14px; line-height:1.35; font-size:13px; }
.doc-preview .md-h1 { font-size:18px; font-weight:700; margin:3px 0; }
.doc-preview .md-h2 { font-size:15px; font-weight:700; margin:3px 0; }
.doc-preview .md-li { margin:1px 0 1px 2px; }
.doc-preview .md-sm { font-size:10px; }
.doc-preview .md-p { margin:3px 0; }
.doc-preview b { font-weight:700; } .doc-preview i { font-style:italic; }
.doc-ajuda { font-size:11px; color:var(--mut); margin-bottom:8px; }
.doc-ajuda code { background:var(--surface-2); padding:1px 4px; border-radius:3px; }
/* Telas desenhadas para RETRATO. Em celular deitado, pede para girar
   (só telas baixas: não afeta desktop, que é naturalmente paisagem). */
#rotateLock { display:none; }
@media (orientation: landscape) and (max-height: 560px) {
  body > .card, body > .cal-overlay { display:none !important; }
  #rotateLock {
    display:flex; position:fixed; inset:0; z-index:99999;
    flex-direction:column; align-items:center; justify-content:center; gap:14px;
    background:var(--bg); color:var(--txt); text-align:center; padding:24px;
  }
  #rotateLock svg { width:56px; height:56px; stroke:var(--acc); fill:none; stroke-width:1.6; }
  #rotateLock b { font-size:17px; }
  #rotateLock span { font-size:14px; color:var(--mut); max-width:280px; }
}

/* ===== BOTOX no mobile (mod-botox.js) =====
   O componente é o mesmo do desktop; aqui damos às classes am-* o VISUAL mobile
   (padronização: abas como .home-tabs, botões como .icobtn, nav como .anam-nav)
   e ajustamos o layout bx-* para tela pequena (tema escuro + 1 vista por vez). */
#botoxView #bxHost { min-height:40vh; }
.am-root { display:flex; flex-direction:column; }
.am-tabs { display:flex; gap:6px; margin:0 0 12px; border-bottom:1px solid var(--line); }
.am-t { padding:10px 16px; background:transparent; color:var(--mut); border:none; border-radius:8px 8px 0 0; font-size:14px; cursor:pointer; }
.am-t.on { background:var(--surface-2); color:var(--txt); box-shadow:inset 0 -2px 0 var(--acc2); }
.am-head { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:10px; }
.am-nav { display:flex; align-items:center; gap:6px; }
.am-b { width:42px; height:42px; background:var(--surface-2); color:var(--txt); border:none; border-radius:10px; font-size:20px; cursor:pointer; }
.am-b:disabled { opacity:.3; cursor:default; }
.am-pos { font-size:11px; color:var(--mut); text-align:center; }
.am-ger { margin-left:auto; }
.am-btn { padding:10px 16px; border:none; border-radius:10px; background:var(--acc2); color:var(--on-acc); font-weight:700; font-size:14px; cursor:pointer; }
.am-toolbar { display:flex; gap:8px; flex-wrap:wrap; justify-content:center; margin:0 0 10px; }
.am-tbtn { padding:8px 14px; border:none; border-radius:10px; background:var(--surface-2); color:var(--txt); font-size:13px; cursor:pointer; }
.am-tbtn:hover { background:var(--surface-3); }
.am-tb { display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin-bottom:10px; }
.am-item { display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding:11px 2px; border-bottom:1px solid var(--line-soft); }
.am-item .g { flex:1; min-width:160px; }
.am-chip { padding:8px 12px; border:1px solid rgba(var(--acc-rgb),.22); background:var(--card); color:var(--txt); border-radius:8px; font-size:12px; cursor:pointer; }
.am-badge { font-size:11px; color:var(--acc); border:1px solid rgba(var(--acc-rgb),.3); border-radius:999px; padding:1px 8px; }
.am-field, .am-inp { font-size:16px; }  /* evita zoom do iOS */
/* bx-* : overrides p/ tema escuro + compacto (o base light é injetado pelo mod-botox) */
#botoxView .bx-pill { background:var(--card); color:var(--txt); border-color:var(--line); }
#botoxView .bx-pill.on { background:var(--acc2); color:var(--on-acc); border-color:var(--acc2); }
#botoxView .bx-hover { background:var(--card); color:var(--txt); border-color:var(--line); }
#botoxView .bx-prodrow.on { background:rgba(var(--acc2-rgb),.15); }
#botoxView .bx-full { background:var(--info); border-color:var(--btx-info); color:var(--txt); }
#botoxView .am-tbtn.bx-lixon, #botoxView .bx-lixon { background:var(--warn); color:var(--on-warn); font-weight:700; }
/* compacto: 1 vista por vez ocupa a largura; painel de obs e tabela empilham e rolam */
#botoxView .bx-compact .bx-map, #botoxView .bx-compact .bx-svg { width:100%; }
#botoxView .bx-mapobs { flex-direction:column; gap:12px; }
#botoxView .bx-obscol { min-width:0; }
/* as 3 seções de obs sizeiam pelo conteúdo (o flex:1 do desktop preenche a altura
   dos 3 diagramas; no compacto colapsaria a seção do meio) */
#botoxView .bx-obssec { flex:none; }
#botoxView .bx-obsta { flex:none; min-height:64px; }
#botoxView .bx-obsbody { flex:none; }
#botoxView .bx-resumo { overflow-x:auto; -webkit-overflow-scrolling:touch; }
#botoxView .bx-ptbl { font-size:12px; }
#botoxView .bx-prodrow { gap:6px; }
/* PORTRAIT (celular e tablet em pé): empilha sempre — mapa em cima, obs/pontos abaixo.
   É a orientação padrão do app (ver #rotateLock). Em tablet largo, limita a altura
   do mapa p/ os painéis abaixo ficarem alcançáveis sem rolar demais. */
@media (min-width:700px) and (orientation: portrait) {
  #botoxView .bx-compact { display:flex; flex-direction:column; align-items:center; }
  #botoxView .bx-compact .bx-map, #botoxView .bx-compact .bx-svg { width:auto; max-width:100%; max-height:58vh; }
  #botoxView .bx-vistas { justify-content:center; flex-wrap:wrap; }
}
/* LANDSCAPE em tela larga (tablet deitado): aí sim mapa à esquerda, painéis à direita */
@media (min-width:820px) and (orientation: landscape) {
  #botoxView .bx-mapobs { flex-direction:row; align-items:flex-start; }
  #botoxView .bx-compact { flex:0 0 auto; }
  #botoxView .bx-compact .bx-map, #botoxView .bx-compact .bx-svg { width:auto; max-height:64vh; }
  #botoxView .bx-obscol { flex:1 1 260px; }
}
/* Perfis D+E no compacto (tablet): os dois perfis lado a lado, cada um ~metade da
   largura. Sem isto, o `width:auto` acima cai sobre os DOIS .bx-svg do .bx-maps2 e,
   como o <svg> só tem viewBox (sem width/height), o flex os colapsa ao mínimo. */
@media (min-width:700px) {
  #botoxView .bx-compact .bx-maps2 { flex-wrap:nowrap; gap:8px; justify-content:center; align-items:flex-start; }
  #botoxView .bx-compact .bx-maps2 .bx-map { flex:1 1 0; min-width:0; }
  #botoxView .bx-compact .bx-maps2 .bx-svg { width:100%; height:auto; max-height:58vh; }
}
/* "Tela cheia" (bx-fs, fora do #botoxView): em portrait, empilha imagem + controles */
@media (orientation: portrait) {
  .bx-fs-body { flex-direction:column; }
  .bx-fs-side { flex:0 0 auto; max-width:none; width:100%; }
  .bx-fs-map { flex:0 0 auto; }
  .bx-fs-map .bx-svg { height:auto; width:100%; max-height:60vh; }
  .bx-fs-map .bx-maps2 { flex-wrap:wrap; }
  .bx-fs-map .bx-maps2 .bx-svg, .bx-fs-map .bx-maps3 .bx-svg { height:auto; width:100%; }
}
/* ===== operações da AGENDA no mobile: bottom sheet + clipboard ===== */
.agops { display:flex; gap:8px; justify-content:center; margin:6px 0 2px; }
.agclip { position:sticky; top:0; z-index:50; display:flex; align-items:center; gap:8px;
  background:rgba(var(--warn-rgb),.16); border:1px solid rgba(var(--warn-rgb),.55); border-radius:10px;
  padding:8px 12px; margin:6px 0; font-size:13.5px; }
.agclip b { color:var(--warn-fg); }
.agclip .x { margin-left:auto; background:none; border:none; color:var(--txt); font-size:17px; padding:2px 8px; }
.sheet-ov { position:fixed; inset:0; z-index:1000; background:var(--overlay);
  display:flex; align-items:flex-end; justify-content:center; }
.sheet { width:100%; max-width:560px; background:linear-gradient(180deg,var(--panel),var(--bg));
  border:1px solid rgba(var(--acc-rgb),.3); border-bottom:none; border-radius:18px 18px 0 0;
  padding:14px 16px calc(14px + env(safe-area-inset-bottom)); }
.sheet-t { font-weight:700; font-size:15px; margin-bottom:10px; text-align:center; }
.sheet-t .muted { font-weight:normal; }
.sheet-btns button { display:flex; align-items:center; gap:10px; width:100%; padding:14px;
  margin:7px 0; font-size:15.5px; background:var(--card);
  border:1px solid var(--line); border-radius:12px; color:var(--txt); }
.sheet-btns button:active { background:var(--surface-2); }
.sheet-btns button.danger { border-color:rgba(var(--danger-rgb),.45); color:var(--danger-fg); }
.sheet-btns button.destaque { border-color:rgba(var(--acc-rgb),.55); background:rgba(var(--acc-rgb),.12); }
.sheet-cancel { display:block; width:100%; padding:13px; margin-top:6px; font-size:15px;
  background:none; border:1px solid var(--line); border-radius:12px; color:var(--txt); }
.aglix-item { display:flex; align-items:center; gap:8px; padding:10px 4px;
  border-bottom:1px solid var(--line-soft); font-size:14px; }
.aglix-item .g { flex:1; }
/* AGENDAR/EDITAR agendamento: barra de salvar FIXA no topo + corpo rolável */
.agmob-dlg { max-height:92vh; display:flex; flex-direction:column; padding:0 !important; overflow:hidden; }
.agmob-top { position:sticky; top:0; z-index:5; display:flex; align-items:center; gap:8px;
  padding:12px 14px; background:linear-gradient(180deg,var(--panel),var(--panel));
  border-bottom:1px solid rgba(var(--acc-rgb),.25); }
.agmob-top .cal-title { flex:1; margin:0; font-size:15px; }
.agmob-body { overflow-y:auto; padding:12px 14px calc(16px + env(safe-area-inset-bottom)); }
.agmob-sec { font-size:12px; letter-spacing:.4px; color:var(--acc); text-transform:uppercase;
  margin:14px 0 6px; border-bottom:1px solid rgba(var(--acc-rgb),.18); padding-bottom:4px; }
.agmob-body label.f { display:block; font-size:12px; color:var(--mut); margin:8px 0 3px; }
.agmob-body input, .agmob-body select { width:100%; }
.agmob-row { display:flex; gap:8px; }
.agmob-row > div { flex:1; }
.agmob-chk { display:flex; align-items:center; gap:8px; font-size:14px; margin:7px 0; }
.agmob-chk input { width:auto; margin:0; }
/* CRUD do cadastro (T0014): toolbar + cadeado do nome + foto */
.cad-toolbar-m { display:flex; gap:6px; flex-wrap:wrap; margin:10px 0 4px; }
.cad-toolbar-m .icobtn { font-size:13px; padding:8px 11px; }
.nome-lock-wrap { display:flex; gap:6px; align-items:center; }
.nome-lock-wrap input { flex:1; }
.nome-lock-wrap input.travado { opacity:.65; }
#mCadNomeLock { background:var(--card); border:1px solid var(--line);
  border-radius:8px; color:var(--warn); padding:10px 12px; }
#mCadNomeLock.aberto { color:var(--acc); }
.cad-foto-m { display:flex; align-items:center; gap:12px; margin:6px 0; }
.cad-foto-m .cli-foto-wrap { width:72px; height:72px; flex:0 0 72px; }
/* caixas de ESCOPO da procura (ativos/apagados) e faixa do cadastro apagado */
.busca-escopo { display:flex; gap:14px; align-items:center; padding:2px 2px 6px;
  color:var(--mut); font-size:12px; }
.busca-escopo label { display:inline-flex; align-items:center; gap:5px; cursor:pointer; }
.cad-apagado-m { display:flex; align-items:center; gap:8px; padding:10px 12px; margin:6px 0 10px;
  background:var(--card); color:var(--txt); border:1px solid var(--warn);
  border-radius:9px; font-size:13px; }
.cad-apagado-m svg { width:16px; height:16px; flex:0 0 auto; }
/* selo do resultado apagado na lista da procura */
.pacpick-item .bsel-ap { margin-left:6px; padding:1px 6px; border-radius:6px; font-size:10.5px;
  font-weight:700; background:var(--warn); color:var(--bg); }
.cadhist-nav { display:flex; align-items:center; gap:6px; margin-bottom:8px; }
.cadhist-op { font-weight:700; margin:4px 0; }
.cadhist-op.op-i { color:var(--acc); } .cadhist-op.op-u { color:var(--warn); } .cadhist-op.op-d { color:var(--danger-fg); }
/* obs do agendamento marcada como ALERTA — mesmo destaque do desktop (agf-obs-al) */
.obs-al { background:rgba(var(--warn-rgb),.18); color:var(--warn); border-left:2px solid var(--warn);
  padding:2px 6px; border-radius:4px; display:inline-block; }
/* BLOQUEIO do cadastro (A003AvisoBloqueio): fundo vermelho 30% (agenda/busca/ficha) */
.pacpick-item.bloq { background:rgba(var(--danger-rgb),.3); }
.cli-bloq { background:rgba(var(--danger-rgb),.3); border-radius:8px; padding:2px 8px; }
.wa-badge { margin-left:6px; vertical-align:-1px; display:inline-block; }
/* popup de BUSCA DE PACIENTE (vincular ficha): busca fixa no topo, lista
   rolável (nome/prontuário/CPF/mãe/aniversário) e confirmação embaixo */
.pacpick-list { overflow-y:auto; flex:1; min-height:120px; }
.pacpick-item { border:1px solid var(--line); border-radius:10px;
  padding:10px 12px; margin:7px 0; font-size:13.5px; }
/* moldura de 2px como no resto do sistema, na forma dos CARTÕES: 1px na borda
   que já existe + 1px por dentro. Empilhar `outline` daria 3px de verde. */
.pacpick-item.sel { border-color:var(--acc); box-shadow:inset 0 0 0 1px var(--acc);
  background:rgba(var(--acc-rgb),.17); }
.pacpick-item b { font-size:14.5px; }
.pacpick-item .l { color:var(--mut); }
.pacpick-foot { position:sticky; bottom:0; padding:10px 0 2px;
  background:linear-gradient(0deg,var(--bg) 70%,transparent); }
.pacpick-foot button { width:100%; }
/* CONFERÊNCIA agendamento x cadastro (item D): mesmo dado do desktop
   (div-row/div-lado em desktop.css), layout EMPILHADO — telefone não tem
   largura pra duas colunas lado a lado. */
.divm-row { border:1px solid var(--line); border-radius:10px; padding:10px 12px; margin:7px 0; }
/* mesma moldura de cartão da .pacpick-item (1px na borda + 1px por dentro):
   o `outline` de 1px anterior não casava com nenhuma outra seleção do sistema */
.divm-row.sel { border-color:var(--acc); box-shadow:inset 0 0 0 1px var(--acc);
  background:rgba(var(--acc-rgb),.17); }
.divm-rot { font-weight:700; margin-bottom:4px; }
.divm-lado { margin:3px 0; font-size:13.5px; }
/* e-mail/whatsapp_user são tokens sem espaço: sem isso o navegador não
   quebra a linha e o valor que o operador está confirmando é clipado
   (achado da revisão — Critical 1). */
.divm-lado [data-div-lado] { overflow-wrap:anywhere; word-break:break-word; }
/* mesma leitura do desktop (.div-lado.venc/.perd): vencedor em destaque,
   perdedor riscado — é ele que o Aplicar sobrescreve. */
.divm-lado.venc [data-div-lado] { color:var(--acc); font-weight:700; }
.divm-lado.perd [data-div-lado] { color:var(--mut); text-decoration:line-through; }
.divm-acoes { display:flex; gap:6px; margin-top:8px; }
.divm-acoes .chip.sel { background:var(--surface-3); border-color:var(--acc); color:var(--acc); }
.divm-acoes .chip { flex:1; font-size:12.5px; padding:7px 8px; }
.divm-foot { position:sticky; bottom:0; padding:10px 0 2px; display:flex; gap:6px; flex-wrap:wrap;
  background:linear-gradient(0deg,var(--bg) 70%,transparent); }
.divm-foot .chip { flex:1; min-width:120px; }
.divm-foot #divAplicar { flex:0 0 100%; }

/* ---- Confirmar / cancelar (#agConfOv) ----
   Mesmo vocabulário do diálogo do desktop (.conf-op/.cf-*), redesenhado para o
   toque: os tipos de contato quebram em duas colunas em vez de uma fila. */
.conf-ops { display:flex; flex-wrap:wrap; gap:6px; margin:2px 0 4px; }
.conf-op { flex:1 1 46%; min-height:42px; padding:8px 10px; font-size:13px; font-weight:700;
  border:1px solid var(--line); border-radius:8px; background:var(--card); color:var(--txt); }
.conf-op.op-confirma { background:rgba(var(--acc-rgb),.16); border-color:rgba(var(--acc-rgb),.55); color:var(--acc); }
.conf-op.op-cancela { background:rgba(var(--neg-rgb),.16); border-color:rgba(var(--neg-rgb),.55); color:var(--neg-fg); }
.conf-op.op-semcontato { background:rgba(var(--warn-rgb),.14); border-color:rgba(var(--warn-rgb),.55); color:var(--warn-fg); }
.conf-op.sel { box-shadow:0 0 0 2px var(--txt) inset; filter:brightness(1.15); }
.ag-conf-lista { display:flex; flex-direction:column; gap:6px; }
.cf-row { border:1px solid var(--line); border-radius:8px; padding:7px 10px; background:var(--card); }
.cf-top { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.cf-badge { padding:1px 8px; border-radius:10px; font-size:10px; font-weight:800;
  background:var(--surface-3); color:var(--txt); }
.cf-badge.cf-s { background:rgba(var(--acc-rgb),.18); color:var(--acc); }
.cf-badge.cf-n { background:rgba(var(--neg-rgb),.18); color:var(--neg-fg); }
.cf-badge.cf-o { background:rgba(var(--warn-rgb),.16); color:var(--warn-fg); }
.cf-when { font-size:11px; color:var(--mut); }
.cf-obs { font-size:12.5px; color:var(--txt); margin-top:4px; white-space:pre-wrap; }

/* ============================================================================
   PAPÉIS DO SHELL MOBILE
   Estas classes substituem os style="…" que estavam colados no index.html. O
   motivo não é cosmético: enquanto a medida mora no atributo, ela vence QUALQUER
   folha — nenhum tema, variante ou ajuste consegue mudá-la sem editar o HTML.
   O vocabulário que os DOIS shells usam (.f1, .frow, escala de espaçamento…) não
   está aqui: mora no core.css, que mobile e desktop linkam.
   ========================================================================= */

/* Barra de topo das telas de módulo: Voltar à esquerda (empurra o resto com o
   margin-right:auto), título ao lado, botões-ícone à direita. */
.tb-voltar { padding:6px 12px; font-size:22px; line-height:1; margin-right:auto; }
.tb-ico { padding:6px 12px; font-size:18px; line-height:1; }
/* qualificado por elemento DE PROPÓSITO: `.topbar b` (acima) já vale 16px e tem
   especificidade maior que uma classe solta — como atributo, o 15px vencia sem
   disputa; como classe, precisa empatar em peso e ganhar pela ordem. */
b.tb-tit { font-size:15px; }

/* Campos curtos de telefone/endereço: repartir a linha por igual (o .f1 do
   core.css) deixaria o "+55" com a mesma largura da rua. */
.tel-pais { flex:0 0 56px; }
.tel-ddd { flex:0 0 64px; }
.tel-cod { flex:0 0 62px; }
.end-num { flex:0 0 90px; }
.end-btn { flex:0 0 auto; align-self:end; }
/* checkbox alinhado pela BASE da linha: o vizinho tem rótulo em cima, e sem isso
   o quadradinho sobe para o meio e some do lado do campo. */
.self-end { align-self:end; }

/* a hora é estreita por padrão (`input[type=time]`, mais acima) para não virar uma
   faixa vazia no meio do formulário. Onde o campo É a linha — a hora da vaga na
   agenda — o pedido explícito tem de vencer, e para isso precisa de peso maior que
   aquele seletor de atributo. (O `date` continua aqui porque o seletor de atributo
   some junto com o último campo nativo, e a regra não custa nada até lá.) */
input[type="date"].wfull, input[type="time"].wfull { width:100%; }
/* campo sem rótulo colado: precisa da folga própria que o par label+input já tem */
.campo-solto { margin:4px 0 10px; }

/* ============================================================================
   PAINÉIS DE OVERLAY (largura própria)
   O `.cal` nasceu calendário (340px) e virou o painel genérico de overlay; cada
   tela pede a sua largura por cima. Fica aqui embaixo DE PROPÓSITO: mesmo peso
   do `.cal`, e a ordem é que decide.
   ========================================================================= */
.ov-520, .ov-560, .ov-660, .ov-680 { max-width:96vw; }
.ov-520 { width:520px; }
.ov-560 { width:560px; }
.ov-660 { width:660px; }
.ov-680 { width:680px; }
/* altura do painel: rola por dentro em vez de estourar a tela */
.ovh-88 { max-height:88vh; overflow:auto; }
.ovh-92 { max-height:92vh; overflow:auto; }
/* a tabela da agenda rola sozinha dentro do card */
.mh-66 { max-height:66vh; }

/* rótulo de opção miúdo (só o mobile tem): `.tema-lbl` e os demais moram no
   core.css, que as duas cascas linkam. */
.opt-mini { display:flex; align-items:center; gap:6px; font-weight:normal;
            font-size:12px; margin:-2px 0 8px; }

/* ============================================================================
   APARÊNCIA DE UM ELEMENTO SÓ
   Não viram classe porque não são vocabulário: é o jeito DAQUELE campo. Regra
   por id mantém o peso que o atributo inline tinha sobre `input`/`select`/`pre`.
   ========================================================================= */
#temaToggle { align-self:center; margin:-2px 0 6px; }
#agVagaConvenio { width:100%; margin:4px 0 12px; }
#calClose { width:100%; margin-top:12px; padding:10px; }
#cadNome { margin:0; font-size:18px; }
#mHistPos { min-width:56px; text-align:center; }

/* receituário */
#rxGerarRow { display:flex; gap:8px; align-items:center; justify-content:center;
              flex-wrap:wrap; margin:2px 0 8px; }
#rxCatResultados { max-height:60vh; overflow:auto; margin-top:8px; }

/* prescrições */
#presToolbar { gap:8px; flex-wrap:wrap; align-items:center; margin-bottom:10px;
               padding:7px 10px; border:1px solid rgba(var(--info-rgb),.45);
               border-radius:8px; background:rgba(var(--info-rgb),.10); }
#presSelNome { flex:1 1 100%; min-width:0; overflow:hidden; text-overflow:ellipsis;
               white-space:nowrap; font-weight:600; }
#presHist { max-height:60vh; overflow:auto; }
#presPlano, #presLix { max-height:58vh; overflow:auto; }

/* prévia do que vai ser emitido: fundo de FOLHA, não de card */
#gerarPreview { white-space:pre-wrap; background:var(--folha-bg); color:var(--folha-txt);
                border-radius:6px; padding:14px; max-height:52vh; overflow:auto;
                font-size:13px; line-height:1.55; }

/* envio */
#envioLista { max-height:34vh; overflow:auto; margin-bottom:10px; }
#envioStatus { min-height:16px; margin-bottom:8px; }

/* IA */
#iaTexto { min-height:180px; max-height:42vh; overflow:auto; }
#iaStatus { margin-top:8px; min-height:16px; }

/* medicação e memórias */
#medResultados { max-height:28vh; overflow:auto; margin-top:8px; }
#medForm, #memMForm { margin-top:10px; border-top:1px solid var(--line); padding-top:10px; }
#medSelNome { font-weight:700; margin-bottom:2px; }
#medTodasMemorias { max-height:48vh; overflow:auto; }
#medStatus, #memMStatus { margin-top:6px; min-height:14px; }
#memMFiltro { flex:1; min-width:160px; }
#memMLista { max-height:56vh; overflow:auto; }
#memFTitulo { font-weight:700; margin-bottom:8px; }
/* campo de caixa: mais apertado que o `input`/`select` padrão (12px) */
#medApr, #medTipo, #memFTipo, #medAprTexto { width:100%; padding:10px; border-radius:8px;
              background:var(--card); color:var(--txt); border:1px solid var(--line); }
#medAprTexto { box-sizing:border-box; }

/* ditado */
#ditadoTexto { min-height:160px; max-height:44vh; overflow:auto; padding:12px;
               font-size:16px; line-height:1.5; border:1px solid var(--line);
               border-radius:8px; background:var(--card); color:var(--txt); }

/* o selo do tipo de receita entra NA LINHA do nome (o .doc-badge normal é
   bloco, empilhado embaixo) */
.doc-badge.inl { display:inline; }
/* no histórico de emissões o selo diz que o PDF existe — vem em acento, não no
   cinza do .doc-badge. Composto porque a classe base declara a cor. */
.doc-badge.acc { color:var(--acc); }

/* ---- histórico de emissões da prescrição (sanfona) ----
   O corpo abre e fecha por JS (style.display), então o display fica na fiação;
   daqui vem só o desenho. */
.pres-emi { border:1px solid var(--line); border-radius:8px; margin-bottom:8px;
            overflow:hidden; }
.pres-emi-h { display:flex; justify-content:space-between; align-items:center;
              gap:10px; padding:10px 12px; cursor:pointer; }
.pres-emi-b { padding:2px 12px 10px; }