/* =================================================================
   Receituário · Clínica Futura
   Identidade: azul-petróleo com destaque verde-água, cantos arredondados suaves.
   ================================================================= */

:root {
  /* marca */
  --grafite: #0E2A36;       /* azul-petróleo escuro: menu e botões principais */
  --grafite-2: #17394A;
  --grafite-3: #1F4A5E;
  --ouro: #0E7C74;          /* destaque */
  --ouro-escuro: #07514B;   /* destaque legível sobre branco */
  --ouro-claro: #E0F2EF;    /* itens selecionados */
  --faixa: #6FD3C7;         /* destaque claro sobre o menu escuro */
  --faixa-papel: #B3A86F;   /* faixa dourada do papel timbrado (só na prévia) */
  --marca: #2B2A28;         /* cor do logotipo da clínica */

  /* neutros */
  --bg: #EDF1F4;
  --surface: #FFFFFF;
  --surface-2: #F6F8FA;
  --texto: #1B2B34;
  --muted: #627482;
  --borda: #DCE3E8;
  --borda-forte: #C3CDD5;

  /* estados */
  --warn: #855000; --warn-soft: #FBF1DC;
  --danger: #A3311E; --danger-soft: #FBEAE6;

  --r: 7px;
  --r-lg: 12px;
  --sombra-folha: 0 1px 0 rgba(14,42,54,.06), 0 18px 40px -18px rgba(14,42,54,.28);

  --ui: "Geist", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  --titulo: "Saira", "Geist", "Segoe UI", system-ui, sans-serif;
  --papel: "Geist", "Segoe UI", Arial, sans-serif;

  --fw: 210mm; --fh: 297mm; --fs: 11pt;
  /* papel timbrado: valores vêm de Ajustes */
  --tw: 170mm; --th: 235mm; --mt: 46mm; --mb: 58mm; --ml: 16mm; --mr: 16mm; --dt: 204mm;
}
body.papel-a5 { --fw: 148mm; --fh: 210mm; --fs: 9.5pt; }
body.papel-timbrado { --fw: var(--tw); --fh: var(--th); --fs: 11pt; }

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body { font-family: var(--ui); color: var(--texto); background: var(--bg); font-size: 14px; line-height: 1.45; -webkit-font-smoothing: antialiased; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--ouro); outline-offset: 2px; }
[hidden] { display: none !important; }
.ph { font-size: 1.15em; line-height: 1; }

/* ===== Estrutura ===== */
.app { display: grid; grid-template-columns: 84px 1fr; height: 100%; }

.rail { background: var(--grafite); color: #B7C6CF; display: flex; flex-direction: column; align-items: stretch; padding: 0 0 12px; position: relative; }
.rail::before { content: none; }
.logo { width: 50px; height: 50px; margin: 16px auto 14px; display: grid; place-items: center; color: var(--marca); background: #fff; border-radius: 12px; padding: 10px; }
.logo svg { width: 100%; height: 100%; display: block; }
.logo-completo { color: var(--marca); }
.logo-completo svg { display: block; width: 100%; height: auto; }
.rail-btn {
  position: relative; background: none; margin: 0 6px 2px; border-radius: 10px; cursor: pointer; color: inherit;
  /* borda reservada para o destaque não mexer no layout ao selecionar */
  border: 1px solid transparent; border-left-width: 3px;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 12px 3px 11px 1px; font-size: 11px; font-weight: 500; letter-spacing: .01em;
  transition: background .15s, border-color .15s;
}
.rail-btn .ph { font-size: 21px; }
.rail-btn:hover { color: #fff; background: rgba(255,255,255,.04); }
/* selecionado: fundo verde-água discreto, contorno fino e linha curva à esquerda */
.rail-btn.ativo {
  color: #fff; background: rgba(111,211,199,.09);
  border-color: rgba(111,211,199,.16); border-left-color: var(--faixa);
}
.rail-btn.ativo .ph { color: var(--faixa); }
.sync { margin-top: auto; display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 10.5px; text-align: center; padding: 10px 6px; border: 0; background: none; color: inherit; cursor: default; line-height: 1.3; }
.sync .dot { width: 8px; height: 8px; border-radius: 50%; background: #8DA0AC; }
.sync[data-estado="ok"] .dot { background: #7FB38F; }
.sync[data-estado="salvando"] .dot { background: var(--faixa); }
.sync[data-estado="erro"] { cursor: pointer; color: #F0A898; }
.sync[data-estado="erro"] .dot { background: #E0705C; }
.sync .quem { color: #fff; font-weight: 600; font-size: 11px; overflow-wrap: anywhere; }

main { min-width: 0; min-height: 0; }
.view { height: 100%; }

/* ===== Botões ===== */
.btn {
  display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
  border: 1px solid transparent; border-radius: var(--r); padding: 8px 14px; min-height: 36px;
  font-weight: 500; font-size: 13.5px; cursor: pointer; background: none;
  transition: background .12s, border-color .12s, color .12s;
}
.btn:active { transform: translateY(1px); }
.btn-pri { background: var(--ouro); color: #fff; }
.btn-pri:hover { background: #0A665F; }
.btn-ghost { color: var(--texto); }
.btn-ghost:hover { background: var(--surface-2); border-color: var(--borda); }
.btn-borda { border-color: var(--borda-forte); background: var(--surface); }
.btn-borda:hover { border-color: var(--grafite); }
.btn-perigo { color: var(--danger); }
.btn-perigo:hover { background: var(--danger-soft); }
.btn-link { border: 0; background: none; color: var(--ouro-escuro); font-weight: 500; cursor: pointer; padding: 2px 0; text-decoration: underline; text-underline-offset: 3px; }
.icone-btn { border: 0; background: none; cursor: pointer; width: 34px; height: 34px; border-radius: var(--r); display: grid; place-items: center; color: var(--muted); font-size: 22px; }
.icone-btn:hover { background: var(--surface-2); color: var(--texto); }

/* ===== Telas de montar (receita e pedido) ===== */
.tela-montar { display: grid; grid-template-columns: 330px 1fr; }
.picker { background: var(--surface); border-right: 1px solid var(--borda); display: flex; flex-direction: column; min-height: 0; }
.picker-topo { padding: 22px 20px 14px; border-bottom: 1px solid var(--borda); }
.picker-topo h1 { font-family: var(--titulo); font-weight: 600; font-size: 21px; letter-spacing: .005em; margin: 0 0 14px; color: var(--grafite); }

.busca { position: relative; }
.busca .ph { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--muted); }
.busca input { width: 100%; height: 38px; padding: 0 12px 0 34px; border-radius: var(--r); border: 1px solid var(--borda-forte); background: var(--surface); }
.busca input::placeholder { color: #7E7D78; }
.busca input:focus { border-color: var(--grafite); outline: none; box-shadow: 0 0 0 3px rgba(14,124,116,.18); }

.chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 12px; }
.chip { border: 1px solid var(--borda); background: var(--surface); border-radius: 999px; padding-inline: 12px; padding: 4px 10px; font-size: 12.5px; font-weight: 500; cursor: pointer; color: var(--muted); }
.chip:hover { border-color: var(--borda-forte); color: var(--texto); }
.chip.ativo { background: var(--grafite); border-color: var(--grafite); color: #fff; }

.lista-picker { flex: 1; overflow-y: auto; padding: 8px 10px 20px; }
.card-modelo {
  position: relative; display: block; width: 100%; text-align: left; cursor: pointer;
  border: 1px solid transparent; border-left-width: 3px; border-radius: 10px; background: none;
  padding: 11px 13px 11px 13px; margin-bottom: 4px; transition: background .15s, border-color .15s;
}
.card-modelo:hover { background: var(--surface-2); border-color: var(--borda); }
.card-modelo.ativo { background: var(--ouro-claro); border-color: #A8D8D0; border-left-color: var(--ouro); }
.cm-topo { display: flex; align-items: center; gap: 8px; }
.cm-topo strong { font-size: 14.5px; font-weight: 600; color: var(--grafite); flex: 1; }
.cm-area { display: block; font-size: 12px; color: var(--ouro-escuro); font-weight: 500; margin-top: 1px; }
.cm-meds { display: block; font-size: 12.5px; color: var(--muted); margin-top: 4px; line-height: 1.45; }
.selo { font-size: 11px; font-weight: 600; color: var(--warn); background: var(--warn-soft); border: 1px solid #EBD5A8; border-radius: var(--r); padding: 1px 6px; white-space: nowrap; }
.grupo-picker { font-size: 12px; font-weight: 600; color: var(--muted); padding: 14px 12px 6px; }
.card-exame { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; cursor: pointer; border: 1px solid transparent; border-left-width: 3px; border-radius: 8px; background: none; padding: 8px 11px 8px 9px; margin-bottom: 3px; font-size: 14px; transition: background .15s, border-color .15s; }
.card-exame:hover { background: var(--surface-2); border-color: var(--borda); }
.card-exame .caixinha { width: 17px; height: 17px; border-radius: 4px; border: 1.5px solid var(--borda-forte); flex-shrink: 0; display: grid; place-items: center; font-size: 11px; color: #fff; }
.card-exame.marcado { background: var(--ouro-claro); border-color: #A8D8D0; border-left-color: var(--ouro); font-weight: 500; color: var(--grafite); }
.card-exame.marcado .caixinha { background: var(--ouro); border-color: var(--ouro); }
.card-exame.marcado .caixinha::after { content: "✓"; font-weight: 700; }
.vazio { text-align: center; color: var(--muted); padding: 32px 20px; font-size: 13.5px; line-height: 1.55; }
.vazio .btn { margin-top: 12px; }

.desk { overflow-y: auto; padding: 0 0 70px; min-width: 0; }
.toolbar { position: sticky; top: 0; z-index: 5; background: var(--surface); border-bottom: 1px solid var(--borda); margin-bottom: 26px; container-type: inline-size; }
.toolbar-inner { display: flex; align-items: center; gap: 8px; min-height: 56px; padding: 9px 24px; max-width: max(calc(var(--fw) + 48px), 980px); margin: 0 auto; }
.toolbar-inner > * { flex-shrink: 0; }
.toolbar .espaco { flex: 1; flex-shrink: 1; }
/* pouco espaço: os botões secundários ficam só com o ícone, tudo numa linha */
@container (max-width: 800px) {
  .toolbar-inner { gap: 6px; padding-inline: 16px; }
  .toolbar .btn-ghost { padding-inline: 10px; }
  .toolbar .btn-ghost .rotulo { display: none; }
}
/* celular: duas linhas organizadas, papel e 2 vias em cima, ações embaixo */
@container (max-width: 620px) {
  .toolbar-inner { flex-wrap: wrap; row-gap: 8px; }
  .toolbar .espaco { flex-basis: 100%; height: 0; }
  .toolbar .btn-pri { flex: 1; justify-content: center; }
}
.seg { display: inline-flex; border: 1px solid var(--borda-forte); border-radius: var(--r); overflow: hidden; }
.seg button { border: 0; background: var(--surface); padding: 6px 12px; font-weight: 500; font-size: 12.5px; cursor: pointer; color: var(--muted); }
.seg button + button { border-left: 1px solid var(--borda-forte); }
.seg button:hover { color: var(--texto); }
.seg button[aria-pressed="true"] { background: var(--grafite); color: #fff; }

.switch { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; font-size: 13px; cursor: pointer; padding: 0 8px; user-select: none; }
.switch input { position: absolute; opacity: 0; pointer-events: none; }
.trilho { width: 34px; height: 20px; border-radius: 999px; background: var(--borda-forte); position: relative; transition: background .15s; }
.trilho::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .15s; }
.switch input:checked + .trilho { background: var(--ouro); }
.switch input:checked + .trilho::after { transform: translateX(14px); }
.switch input:focus-visible + .trilho { outline: 2px solid var(--ouro); outline-offset: 2px; }

.aviso { max-width: var(--fw); margin: 0 auto 14px; display: flex; align-items: center; gap: 10px; background: var(--warn-soft); color: var(--warn); border: 1px solid #EBD5A8; border-radius: var(--r-lg); padding: 9px 10px 9px 14px; font-size: 13px; font-weight: 500; }
.aviso span { flex: 1; }
.aviso .btn { background: var(--warn); color: #fff; min-height: 30px; padding: 4px 12px; }

/* Folhas de orientação que acompanham a receita */
.anexos { max-width: var(--fw); margin: 22px auto 0; background: var(--surface); border: 1px solid var(--borda); border-radius: var(--r-lg); padding: 16px 18px; }
.anexos-cab { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.anexos-cab strong { color: var(--grafite); font-weight: 600; }
.anexos-cab span { color: var(--muted); font-size: 12.5px; }
.anexos-lista { display: flex; flex-wrap: wrap; gap: 6px; }
.chip-anexo { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--borda-forte); background: var(--surface); border-radius: var(--r); padding: 6px 11px; font-size: 13px; font-weight: 500; cursor: pointer; color: var(--texto); }
.chip-anexo::before { content: ""; width: 14px; height: 14px; border-radius: 4px; border: 1.5px solid var(--borda-forte); display: grid; place-items: center; font-size: 9px; line-height: 1; }
.chip-anexo:hover { border-color: var(--grafite); }
.chip-anexo.ativo { background: var(--ouro-claro); border-color: #A8D8D0; color: var(--grafite); }
.chip-anexo.ativo::before { content: "✓"; background: var(--ouro); border-color: var(--ouro); color: #fff; }

/* ===== Folha (papel) ===== */
.folha {
  position: relative; width: var(--fw); max-width: calc(100% - 32px); min-height: var(--fh); margin: 0 auto;
  padding: 16mm 16mm 13mm; background: #fff; color: #161616; box-shadow: var(--sombra-folha); border-radius: 4px;
  font-family: var(--papel); font-size: var(--fs); line-height: 1.55; display: flex; flex-direction: column;
}
body.papel-timbrado .folha { height: var(--fh); min-height: 0; padding: var(--mt) var(--mr) var(--mb) var(--ml); }
body.papel-timbrado .folha :is(.cab, .titulo-doc, .assinatura, .contato) { display: none; }
body.papel-timbrado.sem-nome-papel .folha .assinatura { display: block; position: absolute; top: calc(var(--fh) - 50mm); right: 12mm; width: 72mm; }
body.papel-timbrado.sem-nome-papel .zona-carimbo { display: none !important; }
body.papel-timbrado .paciente { margin-top: 0; }
body.papel-timbrado .rodape { padding: 0; margin: 0; }
body.papel-timbrado .local-data { position: absolute; left: 0; right: 0; top: var(--dt); text-align: center; margin: 0; }
body.papel-timbrado .via { position: absolute; top: 9mm; right: 8mm; }

/* Áreas que já vêm impressas no papel (só aparecem na tela) */
.zona { display: none; }
body.papel-timbrado .zona {
  display: flex; position: absolute; align-items: center; justify-content: center; text-align: center;
  font-family: var(--ui); font-size: 10.5px; font-weight: 500; color: #9A988F; line-height: 1.35;
  border: 1px dashed #CCD5DC; border-radius: 6px; pointer-events: none; padding: 6px;
}
body.papel-timbrado .zona-faixa { border: 0; border-radius: 0; background: var(--faixa-papel); opacity: .9; left: 0; right: 0; height: 5mm; padding: 0; }
.zona-faixa-topo { top: 0; }
.zona-faixa-base { bottom: 0; }
.zona-logo { top: 12mm; left: 9mm; width: 48mm; height: 27mm; }
body.papel-timbrado .zona-logo { border: 0; flex-direction: column; gap: 3px; padding: 0; }
.zona-logo .logo-completo { width: 100%; opacity: .38; }
.zona-logo small { font-size: 9.5px; color: #A9A79F; }
.zona-carimbo { top: calc(var(--fh) - 53mm); right: 12mm; width: 72mm; height: 18mm; }
.zona-rodape { bottom: 9mm; left: 12mm; right: 12mm; height: 11mm; }

.cab { display: flex; flex-direction: column; align-items: center; text-align: center; padding-bottom: 12px; border-bottom: 1px solid var(--grafite); }
.cab .logo-completo { width: 34mm; margin-bottom: 4mm; }
body.papel-a5 .cab .logo-completo { width: 26mm; margin-bottom: 3mm; }
.cab-nome { font-size: 1.45em; font-weight: 600; color: var(--grafite); letter-spacing: -.005em; }
.cab-esp { color: #4A4945; }
.cab-reg { font-size: .82em; color: #5A5955; margin-top: 2px; }
.paciente { display: flex; align-items: baseline; gap: 10px; margin: 1.6em 0 .2em; }
.paciente > span { font-size: .88em; color: #555; }
.paciente .linha-campo { flex: 1; border-bottom: 1px solid #8E8C86; min-height: 1.55em; padding: 0 4px; }
.titulo-doc { text-align: center; font-weight: 600; font-size: .95em; letter-spacing: .28em; text-transform: uppercase; color: var(--grafite); margin: 1.4em 0 .6em; }

.itens { list-style: none; margin: 0; padding: 0; }
body.papel-timbrado .folha[data-doc="pedido"] .itens { margin-top: 1.4em; }
.grupo-uso { text-align: center; color: #222; margin: 1em 0 .6em; }
.grupo-uso::before { content: "# "; }
.grupo-uso::after { content: " #"; }
.grupo-uso span { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.item { position: relative; margin-bottom: .85em; }
.exame { margin-bottom: .45em; }
.item-topo { display: flex; align-items: baseline; gap: 6px; }
.item .num { min-width: 1.5em; color: #444; }
.item .nome { font-weight: 600; }
.exame .nome { font-weight: 400; }
.item .pontilhado { flex: 1; min-width: 20px; border-bottom: 1px solid #555; transform: translateY(-4px); }
.item .qtd { white-space: nowrap; }
.item .pos { margin-left: 1.5em; padding-left: 6px; white-space: pre-wrap; }

.ctrl {
  position: absolute; right: -6px; top: -32px; display: flex; gap: 0; padding: 0;
  background: var(--grafite); border-radius: var(--r); font-family: var(--ui); font-size: 12px;
  opacity: 0; pointer-events: none; transition: opacity .12s; z-index: 2; overflow: hidden;
}
.item:hover .ctrl, .item:focus-within .ctrl { opacity: 1; pointer-events: auto; }
.ctrl button { border: 0; background: none; padding: 6px 9px; cursor: pointer; font-size: 12px; font-weight: 500; color: #DAD8D1; }
.ctrl > * + * { border-left: 1px solid rgba(255,255,255,.12) !important; }
.ctrl > .sel { border-left: 0 !important; }
/* a barrinha continua visível enquanto a lista de via de uso está aberta */
.item:has(.sel[aria-expanded="true"]) .ctrl { opacity: 1; pointer-events: auto; }
.ctrl button:hover:not(:disabled) { background: var(--grafite-3); color: #fff; }
.ctrl button:disabled { opacity: .35; cursor: default; }
.ctrl .remover:hover { background: var(--danger) !important; color: #fff !important; }
.vazio-folha { font-family: var(--ui); color: var(--muted); text-align: center; border: 1px dashed var(--borda-forte); border-radius: var(--r-lg); padding: 26px 16px; font-size: 13.5px; }

.add-wrap { position: relative; margin-top: .3em; font-family: var(--ui); }
.add-btn { display: inline-flex; align-items: center; gap: 6px; border: 1px dashed var(--borda-forte); border-radius: var(--r); background: none; color: var(--grafite); font-weight: 500; font-size: 13px; padding: 7px 13px; cursor: pointer; }
.add-btn { color: var(--ouro-escuro); }
.add-btn .ph { color: var(--ouro); }
.add-btn:hover { border-style: solid; border-color: var(--grafite); }
.add-pop { position: absolute; top: calc(100% + 6px); left: 0; width: 380px; max-width: 90vw; z-index: 10; background: #fff; border: 1px solid var(--borda-forte); border-radius: var(--r-lg); overflow: hidden; box-shadow: 0 16px 40px -12px rgba(14,42,54,.3); font-size: 13.5px; }
.add-pop input { width: 100%; height: 40px; padding: 0 12px; border: 0; border-bottom: 1px solid var(--borda); border-radius: 0; }
.add-pop input:focus { outline: none; background: var(--surface-2); }
.add-lista { max-height: 290px; overflow-y: auto; padding: 4px 0; }
.add-op { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; border: 0; background: none; padding: 8px 12px; cursor: pointer; }
.add-op:hover, .add-op:focus-visible { background: var(--surface-2); }
.add-op small { color: var(--muted); margin-left: auto; font-size: 12px; }
.add-op.especial { color: var(--ouro-escuro); font-weight: 500; }
.add-sep { height: 1px; background: var(--borda); margin: 4px 0; }

.bloco { margin-top: 1.2em; }
.bloco > span { font-size: .88em; color: #555; display: block; margin-bottom: 3px; }
.bloco .caixa { white-space: pre-wrap; min-height: 1.5em; border-left: 2px solid #D5DBE0; padding-left: 10px; }
.bloco-linha { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.bloco-linha > span:first-child { font-size: .88em; color: #555; }
.bloco-linha .caixa-linha { flex: 1; min-width: 120px; min-height: 1.5em; }
.atalhos { display: flex; flex-wrap: wrap; font-family: var(--ui); border: 1px solid var(--borda); border-radius: var(--r); overflow: hidden; }
.atalhos button { border: 0; background: var(--surface); padding: 3px 9px; font-size: 11.5px; font-weight: 500; color: var(--muted); cursor: pointer; }
.atalhos button + button { border-left: 1px solid var(--borda); }
.atalhos button:hover { background: var(--grafite); color: #fff; }

.rodape { margin-top: auto; padding-top: 2.5em; }
.local-data { text-align: right; margin-bottom: 3.4em; }
.assinatura { width: 62%; margin: 0 auto; text-align: center; }
.assinatura .traco { border-top: 1px solid #222; margin-bottom: 4px; }
.ass-nome { font-size: .95em; font-weight: 500; }
.ass-reg { font-size: .78em; color: #555; }
.contato { margin-top: 1.8em; padding-top: 7px; border-top: 1px solid #CCCCCC; text-align: center; font-size: .76em; color: #555; white-space: pre-wrap; }
.via { font-family: var(--ui); font-size: 8pt; color: #555; text-align: right; margin-bottom: 4px; }

.folha [contenteditable] { outline: none; }
.folha [contenteditable] { border-radius: 3px; }
.folha [contenteditable]:hover { background: #F3F8F7; }
.folha [contenteditable]:focus { background: var(--ouro-claro); box-shadow: 0 0 0 1px var(--ouro); }
.folha [contenteditable]:empty::before { content: attr(data-placeholder); color: #9A988F; font-style: italic; }

/* Folha de orientação impressa */
.of-titulo { font-family: var(--papel); font-size: 1.25em; font-weight: 600; color: var(--grafite); text-align: center; margin: 0 0 .9em; }
.of-texto { white-space: pre-wrap; line-height: 1.65; }

/* ===== Telas de gestão ===== */
.gestao { overflow-y: auto; padding: 36px 40px 64px; }
.gestao-inner { max-width: 880px; margin: 0 auto; }
.gestao-cab { display: flex; align-items: flex-end; gap: 16px; margin-bottom: 22px; padding-bottom: 18px; border-bottom: 1px solid var(--borda-forte); }
.gestao-cab h1 { font-family: var(--titulo); font-weight: 600; font-size: 30px; line-height: 1.1; margin: 0; color: var(--grafite); letter-spacing: .005em; }
.gestao-cab p { margin: 6px 0 0; color: var(--muted); max-width: 60ch; }
.gestao-cab > div { flex: 1; }
.gestao .busca { margin-bottom: 18px; max-width: 380px; }

.abas { display: flex; gap: 2px; box-shadow: inset 0 -1px 0 var(--borda-forte); margin-bottom: 18px; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
.abas::-webkit-scrollbar { display: none; }
.aba { border: 0; background: none; padding: 10px 14px; font-weight: 500; color: var(--muted); cursor: pointer; border-bottom: 3px solid transparent; white-space: nowrap; }
.aba:hover { color: var(--texto); }
.aba.ativo { color: var(--grafite); font-weight: 600; border-bottom-color: var(--ouro); }
.aba small { font-weight: 500; color: var(--muted); margin-left: 4px; font-variant-numeric: tabular-nums; }

.painel { background: var(--surface); border: 1px solid var(--borda); border-radius: var(--r-lg); overflow: hidden; }
.painel + .painel { margin-top: 18px; }
.painel-titulo { font-size: 13px; font-weight: 600; color: var(--grafite); padding: 14px 18px 12px; margin: 0; border-bottom: 1px solid var(--borda); background: var(--surface-2); }
.linha-lista { display: flex; align-items: center; gap: 14px; padding: 12px 18px; border-top: 1px solid var(--borda); cursor: pointer; }
.painel-titulo + .linha-lista, .linha-lista:first-child { border-top: 0; }
.linha-lista:hover { background: var(--surface-2); }
.ll-icone { width: 36px; height: 36px; border-radius: 9px; background: var(--ouro-claro); border: 0; color: var(--ouro-escuro); display: grid; place-items: center; font-size: 17px; flex-shrink: 0; }
.ll-info { flex: 1; min-width: 0; }
.ll-info strong { display: block; font-size: 14.5px; font-weight: 600; color: var(--grafite); }
.ll-info span { display: block; color: var(--muted); font-size: 12.5px; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ll-acoes { display: flex; gap: 4px; flex-shrink: 0; }

.form-grade { padding: 18px; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-grade .inteiro { grid-column: 1 / -1; }
.campo { display: flex; flex-direction: column; gap: 6px; }
.campo > span { font-size: 12.5px; font-weight: 600; color: var(--texto); }
.campo small { color: var(--muted); font-size: 12px; }
.campo input:not([type=checkbox]), .campo select, .campo textarea,
.d-item input:not([type=checkbox]), .d-item textarea, .d-item select, .d-add select {
  width: 100%; padding: 9px 11px; border: 1px solid var(--borda-forte); border-radius: var(--r); background: #fff;
}
.campo textarea, .d-item textarea { resize: vertical; line-height: 1.5; }
.campo :is(input, select, textarea):focus, .d-item :is(input, textarea, select):focus, .d-add select:focus {
  outline: none; border-color: var(--grafite); box-shadow: 0 0 0 3px rgba(14,124,116,.18);
}

/* ===== Seletor (substitui a lista de opções do navegador; ver js/seletor.js) ===== */
select.sel-nativo { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; border: 0 !important; opacity: 0; pointer-events: none; overflow: hidden; }
.sel {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 40px; padding: 8px 10px 8px 12px;
  border: 1px solid var(--borda-forte); border-radius: var(--r); background: #fff; color: var(--texto);
  text-align: left; cursor: pointer; transition: border-color .15s, box-shadow .15s;
}
.sel-texto { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sel-vazio .sel-texto { color: var(--muted); }
.sel-seta { color: var(--muted); font-size: 14px; transition: transform .18s; }
.sel:hover:not(:disabled) { border-color: var(--grafite); }
.sel:focus-visible, .sel[aria-expanded="true"] { outline: none; border-color: var(--grafite); box-shadow: 0 0 0 3px rgba(14,124,116,.18); }
.sel[aria-expanded="true"] .sel-seta { transform: rotate(180deg); color: var(--ouro); }
.sel:disabled { opacity: .55; cursor: default; }

/* dentro da barrinha escura do remédio na folha */
.ctrl .sel {
  width: auto; min-height: 0; gap: 8px; padding: 6px 9px 6px 11px; border: 0; border-radius: 0;
  background: var(--grafite-2); color: #fff; font-size: 12px; font-weight: 500;
}
.ctrl .sel .sel-seta { color: var(--faixa); font-size: 12px; }
.ctrl .sel:hover, .ctrl .sel[aria-expanded="true"] { background: var(--grafite-3); box-shadow: none; }
.ctrl .sel:focus-visible { box-shadow: inset 0 0 0 2px var(--faixa); }

/* lista aberta */
.sel-menu {
  position: fixed; z-index: 60; display: flex; flex-direction: column; max-width: min(420px, calc(100vw - 16px));
  background: #fff; border: 1px solid var(--borda-forte); border-radius: var(--r-lg);
  box-shadow: 0 16px 40px -12px rgba(14,42,54,.3), 0 2px 6px rgba(14,42,54,.06);
  overflow: hidden; font-size: 13.5px; animation: sel-entra .12s ease-out;
}
.sel-menu.para-cima { animation-name: sel-entra-cima; }
@keyframes sel-entra { from { opacity: 0; transform: translateY(-4px); } }
@keyframes sel-entra-cima { from { opacity: 0; transform: translateY(4px); } }
.sel-busca { position: relative; flex-shrink: 0; border-bottom: 1px solid var(--borda); }
.sel-busca .ph { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--muted); }
.sel-busca input { width: 100%; height: 40px; padding: 0 12px 0 34px; border: 0; background: none; }
.sel-busca input:focus { outline: none; background: var(--surface-2); }
.sel-lista { overflow-y: auto; padding: 5px; outline: none; overscroll-behavior: contain; }
.sel-op {
  display: flex; align-items: center; gap: 10px; padding: 7px 10px 7px 9px; margin-bottom: 1px; cursor: pointer;
  border: 1px solid transparent; border-left-width: 3px; border-radius: 8px; color: var(--texto); white-space: nowrap;
}
.sel-op span { flex: 1; overflow: hidden; text-overflow: ellipsis; }
.sel-op .ph-check { visibility: hidden; color: var(--ouro); font-size: 15px; }
.sel-op.ativo { background: var(--surface-2); }
/* opção escolhida: mesmo destaque dos cards selecionados */
.sel-op[aria-selected="true"] { background: var(--ouro-claro); border-color: #A8D8D0; border-left-color: var(--ouro); color: var(--grafite); font-weight: 500; }
.sel-op[aria-selected="true"] .ph-check { visibility: visible; }
.sel-op[aria-selected="true"].ativo { background: #D3ECE8; }
.sel-op[aria-disabled="true"] { opacity: .45; cursor: default; }
.sel-grupo { padding: 8px 10px 4px; font-size: 11.5px; font-weight: 600; color: var(--muted); }
.sel-nada { padding: 14px 10px; color: var(--muted); text-align: center; }
.sel-menu-compacto { font-size: 13px; }
.sel-menu-compacto .sel-op { padding-block: 6px; }

.check { display: flex; align-items: center; gap: 8px; font-size: 13.5px; cursor: pointer; }
.check input { width: 16px; height: 16px; accent-color: var(--grafite); flex-shrink: 0; }
.lista-checks { display: flex; flex-direction: column; gap: 8px; padding: 12px; border: 1px solid var(--borda); border-radius: var(--r); }
.bloco-texto { padding: 16px 18px; line-height: 1.6; }
.bloco-texto p { margin: 0 0 10px; max-width: 70ch; }
.bloco-texto p:last-child { margin: 0; }
.bloco-acoes { display: flex; gap: 8px; flex-wrap: wrap; padding: 0 18px 18px; }
.erro-form { color: var(--danger); font-weight: 500; font-size: 13px; margin: 0; }

/* ===== Drawer ===== */
.fundo { position: fixed; inset: 0; background: rgba(14,42,54,.4); opacity: 0; pointer-events: none; transition: opacity .2s; z-index: 30; }
.drawer { position: fixed; top: 0; right: 0; bottom: 0; width: 560px; max-width: 100vw; z-index: 31; background: var(--surface); visibility: hidden; transform: translateX(100%); transition: transform .22s cubic-bezier(.2,.8,.2,1), visibility 0s .22s; }
body.drawer-aberto .fundo { opacity: 1; pointer-events: auto; }
body.drawer-aberto .drawer { transform: none; visibility: visible; transition: transform .22s cubic-bezier(.2,.8,.2,1); box-shadow: -24px 0 60px -20px rgba(14,42,54,.35); }
.drawer form { display: flex; flex-direction: column; height: 100%; }
.drawer-cab { display: flex; align-items: center; padding: 0 20px; height: 64px; border-bottom: 1px solid var(--borda); }
.drawer-cab h2 { flex: 1; margin: 0; font-family: var(--titulo); font-weight: 600; font-size: 19px; color: var(--grafite); }
.drawer-corpo { flex: 1; overflow-y: auto; padding: 22px 20px; display: flex; flex-direction: column; gap: 18px; }
.drawer-rodape { display: flex; align-items: center; gap: 8px; padding: 12px 20px; border-top: 1px solid var(--borda); background: var(--surface-2); }
.drawer-rodape .espaco { flex: 1; }
.linha-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.dica { font-size: 12.5px; color: var(--muted); background: var(--surface-2); border-radius: var(--r); padding: 10px 12px; line-height: 1.55; margin: 0; }
.d-itens { display: flex; flex-direction: column; gap: 8px; }
.d-item { border: 1px solid var(--borda); border-radius: var(--r-lg); padding: 10px; display: flex; flex-direction: column; gap: 8px; background: var(--surface-2); }
.d-item-topo { display: grid; grid-template-columns: 1fr 130px; gap: 8px; }
.d-item-rodape { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.d-item-rodape .sel { width: auto; min-width: 150px; min-height: 32px; padding: 5px 9px 5px 11px; border-color: var(--borda-forte); background: #fff; color: var(--texto); }
.d-item-rodape .sel:hover:not(:disabled) { border-color: var(--grafite); background: #fff; color: var(--texto); }
.d-item-rodape .espaco { flex: 1; }
.d-item-rodape button { border: 1px solid transparent; background: none; cursor: pointer; padding: 4px 8px; border-radius: var(--r); color: var(--muted); font-weight: 500; }
.d-item-rodape button:hover:not(:disabled) { background: #fff; border-color: var(--borda); color: var(--texto); }
.d-item-rodape button:disabled { opacity: .35; cursor: default; }
.d-item-rodape .remover:hover { color: var(--danger) !important; }
.d-add { display: flex; gap: 8px; margin-top: 10px; }
.d-add .sel { flex: 1; }
.d-vazio { color: var(--muted); font-size: 13px; border: 1px dashed var(--borda-forte); border-radius: var(--r-lg); padding: 16px; text-align: center; }

/* ===== Login ===== */
.tela-cheia { position: fixed; inset: 0; z-index: 40; overflow-y: auto; }
.tela-cheia.login { display: grid; grid-template-columns: minmax(320px, 46%) 1fr; background: var(--surface); }
.login-marca {
  background: var(--grafite); color: #fff; position: relative;
  display: flex; flex-direction: column; justify-content: center; padding: 64px 56px;
}
.login-marca::before, .login-marca::after { content: none; }
.login-marca::before { top: 0; }
.login-marca::after { bottom: 0; }
.login-marca .logo-completo { width: min(320px, 82%); color: var(--marca); background: #fff; border-radius: 16px; padding: 28px 30px; }
.login-marca p { margin: 32px 0 0; color: #B7C6CF; max-width: 34ch; line-height: 1.6; font-size: 15px; }
.login-lado { display: flex; align-items: center; justify-content: center; padding: 40px 24px; }
.login-caixa { width: 360px; max-width: 100%; display: flex; flex-direction: column; gap: 16px; }
.login-caixa h1 { margin: 0; font-family: var(--titulo); font-weight: 600; font-size: 30px; color: var(--grafite); line-height: 1.1; }
.login-caixa > p { margin: -8px 0 6px; color: var(--muted); }
.login-caixa input { height: 42px; }
.login-caixa .btn-pri { justify-content: center; min-height: 44px; margin-top: 6px; font-size: 14.5px; }
.login-caixa .btn-link { align-self: flex-start; font-size: 13px; color: var(--muted); margin-top: 8px; }

/* ===== Administração ===== */
.tela-cheia.admin { background: var(--bg); display: flex; justify-content: center; align-items: flex-start; padding: 0 24px; }
.admin-caixa { width: 880px; max-width: 100%; padding: 36px 0 48px; }
.admin-caixa > header { display: flex; align-items: center; gap: 16px; margin-bottom: 22px; padding-bottom: 18px; border-bottom: 1px solid var(--borda-forte); }
.admin-caixa > header h1 { flex: 1; margin: 0; font-family: var(--titulo); font-weight: 600; font-size: 30px; color: var(--grafite); }
.admin-entrar { display: flex; gap: 10px; align-items: flex-end; padding: 18px; flex-wrap: wrap; }
.admin-entrar .campo { flex: 1; min-width: 220px; }

.toast {
  position: fixed; bottom: 24px; left: 50%; transform: translate(-50%, 12px); opacity: 0; z-index: 60;
  background: var(--grafite); color: #fff; padding: 11px 18px; border-radius: 10px;
  font-weight: 500; font-size: 13.5px; transition: opacity .2s, transform .2s; pointer-events: none;
}
.toast.visivel { opacity: 1; transform: translate(-50%, 0); }

/* ===== Página de teste de impressão ===== */
#areaImpressao { display: none; }
.teste .regua { position: absolute; left: 0; right: 0; border-top: .25mm solid #bbb; }
.teste .regua span { position: absolute; left: 2mm; top: -3.6mm; font: 7pt var(--ui); color: #777; }
.teste .regua span + span { left: auto; right: 2mm; }
.teste .area-util { position: absolute; top: var(--mt); left: var(--ml); right: var(--mr); bottom: var(--mb); border: .5mm dashed #0E7C74; display: flex; align-items: center; justify-content: center; text-align: center; font: 10pt var(--ui); color: #0E7C74; padding: 8mm; }
.teste .marca-data { position: absolute; top: var(--dt); left: 0; right: 0; text-align: center; font: 10pt var(--ui); color: #A3311E; }

/* ===== Responsivo ===== */
@media (max-width: 1100px) { .tela-montar { grid-template-columns: 280px 1fr; } }

/* Folha ajustada à tela: quando o papel não cabe na largura (celular, tablet em pé),
   a folha vira um documento que acompanha a largura, com letra legível.
   A impressão não muda. A classe "medindo" volta a folha ao tamanho real por um
   instante, para conferir se o texto cabe no papel (ver verificarEspaco no app.js). */
.folha.medindo { max-width: none; }
@media screen {
  body.folha-fluida .folha:not(.medindo) {
    width: auto; max-width: none; height: auto; min-height: 0; margin: 0 12px;
    padding: 26px 18px 24px; font-size: 16px; border-radius: 8px;
  }
  body.folha-fluida.papel-timbrado .folha:not(.medindo) .zona:not(.zona-faixa) { display: none; }
  body.folha-fluida.papel-timbrado .folha:not(.medindo) .zona-faixa { height: 6px; }
  body.folha-fluida.papel-timbrado .folha:not(.medindo) .local-data { position: static; text-align: right; margin: 0; }
  body.folha-fluida.papel-timbrado.sem-nome-papel .folha:not(.medindo) .assinatura { position: static; width: 72%; margin: 3em auto 0; }
  body.folha-fluida .folha:not(.medindo) .rodape { padding-top: 2em; }
  body.folha-fluida .folha:not(.medindo) .item { margin-bottom: 1.1em; }
  body.folha-fluida .folha:not(.medindo) .item .pontilhado { min-width: 12px; }
  /* sem mouse para passar por cima: a barrinha de cada remédio fica sempre à mostra */
  body.folha-fluida .folha:not(.medindo) .ctrl { opacity: 1; pointer-events: auto; position: static; margin: 0 0 6px 1.5em; width: fit-content; }
  body.folha-fluida .folha:not(.medindo) .add-pop { width: auto; left: -8px; right: -8px; max-width: none; }
  body.folha-fluida .folha:not(.medindo) .vazio-folha { font-size: 14px; }
}

/* Celular e tablet em pé */
@media screen and (max-width: 860px) {
  .app { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; height: 100dvh; }
  .rail { order: 2; flex-direction: row; justify-content: space-around; padding: 0 0 env(safe-area-inset-bottom); }
  .rail::before, .rail .logo, .sync { display: none; }
  .rail-btn { flex: 1; margin: 6px 3px; padding-block: 9px 8px; gap: 4px; }

  /* lista de modelos/exames em cima, folha embaixo, tudo numa rolagem só */
  .tela-montar { display: block; overflow-y: auto; }
  .picker { max-height: 46dvh; border-right: 0; border-bottom: 1px solid var(--borda); }
  .picker-topo { padding: 16px 16px 12px; }
  .picker-topo h1 { font-size: 19px; margin-bottom: 10px; }
  .lista-picker { padding: 6px 8px 10px; }
  .desk { overflow: visible; padding-bottom: 28px; }
  .toolbar { margin-bottom: 16px; }
  .toolbar-inner { padding: 8px 12px; }
  .aviso { margin-inline: 12px; }
  .anexos { margin: 18px 12px 0; padding: 14px; }

  .gestao { padding: 22px 16px 40px; }
  .gestao-cab { flex-direction: column; align-items: stretch; gap: 14px; margin-bottom: 16px; padding-bottom: 16px; }
  .gestao-cab h1 { font-size: 26px; }
  .gestao-cab > .btn { align-self: flex-start; }
  .gestao .busca { max-width: none; }
  .linha-lista { padding: 12px 14px; gap: 12px; }
  .ll-icone { width: 32px; height: 32px; }
  .ll-acoes .btn { padding-inline: 10px; }
  .form-grade, .linha-2 { grid-template-columns: 1fr; }
  .form-grade { padding: 16px; }

  .drawer-cab { padding: 0 16px; height: 58px; }
  .drawer-corpo { padding: 18px 16px; }
  .drawer-rodape { padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); }
  .d-item-topo { grid-template-columns: 1fr 110px; }

  .tela-cheia.login { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; }
  .login-marca { padding: 28px 24px; }
  .login-marca .logo-completo { width: min(220px, 70%); padding: 18px 20px; }
  .login-marca p { display: none; }
  .login-lado { align-items: flex-start; padding: 32px 20px 40px; }
  .tela-cheia.admin { padding: 0 16px; }
  .admin-caixa { padding-top: 22px; }
  .admin-caixa > header h1 { font-size: 24px; }

  /* letra de 16px nos campos: abaixo disso o iPhone dá zoom ao tocar */
  input:not([type=checkbox]):not([type=radio]), textarea { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* ===== Impressão ===== */
@media print {
  body { background: #fff; }
  body > *:not(#areaImpressao) { display: none !important; }
  #areaImpressao { display: block; }
  #areaImpressao .folha { box-shadow: none; padding: 0; margin: 0; width: auto; max-width: none; min-height: calc(var(--fh) - 26mm); }
  #areaImpressao .folha + .folha { break-before: page; }
  body.papel-timbrado #areaImpressao .folha { padding: var(--mt) var(--mr) var(--mb) var(--ml); height: var(--fh); min-height: 0; overflow: hidden; }
  #areaImpressao .folha-fluxo { page: fluxo; display: block; height: auto !important; min-height: 0 !important; padding: 0 !important; overflow: visible !important; }
  #areaImpressao :empty::before { content: none !important; }
}