/* Dentboard — Painel Clínico
   Design System "Sala Clara": um consultório bem iluminado. Barra petróleo no
   topo como moldura da marca; conteúdo em superfícies claras e quentes (linho),
   cartões brancos com sombra suave, teal como única cor de ação, tintas pastel
   para KPIs e estados. Cantos leves (6/8/12 px). Títulos Plus Jakarta Sans,
   texto Figtree. Tokens: bloco abaixo é cópia de design/dentboard-tokens.css. */

/* ── TOKENS (início da cópia) ─────────────────────────────────────── */
:root{
  --db-petrol-900:#0d343a; --db-petrol-800:#10434a; --db-petrol-700:#155157;
  --db-teal-700:#177d7b; --db-teal-600:#1f8f8c; --db-teal-500:#2aa7a2; --db-teal-300:#8fd3cd; --db-teal-100:#d9f1ee; --db-teal-50:#ecf7f5;
  --db-mint:#38e0c3;
  --db-linen-50:#f7f6f2; --db-linen-100:#efede7; --db-linen-200:#e4e1d9; --db-white:#ffffff;
  --db-ink-900:#1b2a2d; --db-ink-700:#3b4b4e; --db-ink-500:#64777a; --db-ink-300:#a3b1b2; --db-line:#e3e7e4; --db-line-strong:#cfd7d5;
  --db-ok-500:#1f8f8c; --db-ok-100:#d9f1ee; --db-good-500:#3f8fbf; --db-good-100:#e0eff8; --db-warn-500:#c98a2b; --db-warn-100:#fbeed6;
  --db-bad-500:#d35d55; --db-bad-100:#fbe4e1; --db-info-500:#7a63c4; --db-info-100:#ebe6f7; --db-neutral-500:#8a9a9b; --db-neutral-100:#eceeec;
  --db-tint-mint:#dff4ef; --db-tint-mint-ink:#177d7b; --db-tint-peach:#fde8df; --db-tint-peach-ink:#c6553f; --db-tint-sand:#fbefd9; --db-tint-sand-ink:#a86f1a;
  --db-tint-sky:#e1eff8; --db-tint-sky-ink:#2e6f99; --db-tint-lilac:#ece7f8; --db-tint-lilac-ink:#6a51b8;
  --db-r-xs:6px; --db-r-sm:8px; --db-r-md:12px; --db-r-lg:16px; --db-r-pill:999px;
  --db-shadow-1:0 1px 2px rgba(13,52,58,.05),0 1px 1px rgba(13,52,58,.03);
  --db-shadow-2:0 1px 2px rgba(13,52,58,.05),0 10px 28px -14px rgba(13,52,58,.18);
  --db-shadow-3:0 2px 4px rgba(13,52,58,.06),0 24px 48px -20px rgba(13,52,58,.28);
  --db-ring:0 0 0 4px rgba(31,143,140,.18);
  --db-font-text:'Figtree',system-ui,-apple-system,sans-serif;
  --db-font-display:'Plus Jakarta Sans','Figtree',system-ui,sans-serif;
  --db-track-label:.08em;
  --db-ease:cubic-bezier(.22,1,.36,1); --db-dur-fast:.16s; --db-dur:.28s;
}
/* ── TOKENS (fim da cópia) ────────────────────────────────────────── */

/* nomes históricos do painel, mapeados para os tokens (JS/PHP inline dependem deles) */
:root {
  --ink: var(--db-ink-900);
  --ink-soft: var(--db-ink-500);
  --petrol: var(--db-petrol-900);
  --petrol-2: var(--db-petrol-800);
  --teal: var(--db-teal-500);
  --teal-deep: var(--db-teal-600);
  --teal-soft: var(--db-teal-50);
  --teal-line: var(--db-teal-300);
  --sand: var(--db-linen-50);
  --sand-2: var(--db-linen-100);
  --card: var(--db-white);
  --line: var(--db-line);
  --gold: #c8a15a;
  --danger: var(--db-bad-500);
  --ok: var(--db-ok-500);
  --warn: var(--db-warn-500);
  --radius: var(--db-r-md);
  --radius-sm: var(--db-r-xs);
  --shadow: var(--db-shadow-2);
  --band: 64px;
  --font-sans: var(--db-font-text);
  --font-display: var(--db-font-display);
  --font-mono: var(--db-font-text);
  --font-serif: var(--font-display);
  --ease: var(--db-ease);
}
* { box-sizing: border-box; margin: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-sans);
  background:
    radial-gradient(900px 360px at 85% -120px, rgba(42,167,162,.10), transparent 60%),
    radial-gradient(700px 300px at 0% 100%, rgba(251,239,217,.7), transparent 60%),
    var(--sand);
  color: var(--ink);
  font-size: 13.5px;
  line-height: 1.45;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, .fr { font-family: var(--font-display); font-weight: 700; letter-spacing: -.02em; }
h2 { font-size: 18px; } h3 { font-size: 15px; }
h1 em, h2 em { font-style: normal; color: var(--teal-deep); }
a { color: var(--petrol-2); text-decoration: none; }
:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
.mono, .k, .crumbs, .kbd-hint, th, label, .badge, .photo-tag, .nav-sep, .page-head .sub, .stat .hint, time { font-family: var(--font-mono); }

/* Transição entre páginas: o conteúdo cruza em fade; o marcador de estação desliza. */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: vt-out .16s var(--ease) both; }
::view-transition-new(root) { animation: vt-in .3s var(--ease) both; }
::view-transition-group(nav-ink) { animation-duration: .4s; animation-timing-function: var(--ease); }
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; transform: translateY(6px); } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* ---------- shell: barra de comando no topo ---------- */
.shell { min-height: 100vh; }
.sidebar {
  position: fixed; left: 0; right: 0; top: 0; z-index: 60; height: var(--band);
  display: flex; align-items: center; gap: 18px; padding: 0 22px;
  background: var(--petrol); color: #cfe4e3;
  background-image: radial-gradient(50% 140% at 100% 0%, rgba(56,224,195,.16), transparent 70%);
  box-shadow: 0 8px 24px -16px rgba(13,52,58,.5);
}
.brand { display: flex; align-items: center; gap: 12px; flex-shrink: 0; height: 100%; padding-right: 18px; border-right: 1px solid rgba(255,255,255,.08); }
.brand-mark { width: 34px; height: 34px; flex-shrink: 0; display: grid; place-items: center; font-family: var(--font-display); font-weight: 800; font-size: 19px; color: var(--petrol); background: var(--teal); border-radius: 6px; }
.brand-logo { height: 36px; width: auto; display: block; background: #fff; border-radius: 6px; padding: 2px 6px; }
.sidebar nav { flex: 1; display: flex; align-items: stretch; gap: 2px; height: 100%; overflow-x: auto; scrollbar-width: none; counter-reset: nav; }
.sidebar nav::-webkit-scrollbar { display: none; }
.sidebar nav a {
  position: relative; display: flex; align-items: center; gap: 9px; color: #9dc0bf;
  padding: 0 13px; font-weight: 500; font-size: 12.5px; white-space: nowrap; counter-increment: nav;
  transition: color .18s var(--ease), background .18s var(--ease);
}
.sidebar nav a:hover { color: #fff; background: rgba(255,255,255,.04); }
.sidebar nav a .ic { width: 18px; height: 18px; flex-shrink: 0; opacity: .8; }
.sidebar nav a.on { color: #fff; font-weight: 600; }
.sidebar nav a.on .ic { opacity: 1; color: var(--db-mint); }
.sidebar nav a.on::before { content: ''; position: absolute; inset: 12px 0; border-radius: 6px; background: rgba(255,255,255,.07); pointer-events: none; }
.sidebar nav a.on::after { content: ''; position: absolute; left: 12px; right: 12px; bottom: 0; height: 3px; border-radius: 3px 3px 0 0; background: var(--db-mint); view-transition-name: nav-ink; }
.nav-sep { align-self: center; width: 1px; height: 24px; margin: 0 10px; background: rgba(255,255,255,.12); font-size: 0; color: transparent; overflow: hidden; }
.nav-sep::before { display: none; }
.sidebar-foot { display: flex; align-items: center; gap: 14px; flex-shrink: 0; height: 100%; padding-left: 18px; border-left: 1px solid rgba(255,255,255,.08); }
.user-chip { display: flex; gap: 10px; align-items: center; min-width: 0; }
.user-chip b { display: block; color: #fff; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 130px; font-weight: 600; }
.user-chip small { color: #7fa8a7; font-size: 10px; font-family: var(--font-mono); letter-spacing: .06em; text-transform: uppercase; }
.avatar { width: 34px; height: 34px; border-radius: 6px; background: var(--db-mint); color: #062a2a; display: grid; place-items: center; font-weight: 800; flex-shrink: 0; font-family: var(--font-display); font-size: 15px; }
.foot-actions { display: flex; align-items: center; gap: 10px; }
.foot-link { color: #7fa8a7; display: grid; }
.foot-link:hover { color: #fff; }
.logout-form { margin: 0; }
.logout { color: #7fa8a7; font: inherit; font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; background: none; border: 1px solid rgba(255,255,255,.14); padding: 5px 10px; cursor: pointer; border-radius: 6px; }
.logout:hover { color: #fff; border-color: var(--teal); }

.content { padding-top: var(--band); display: flex; flex-direction: column; min-width: 0; min-height: 100vh; }
.main { flex: 1; padding: 20px 36px 70px; max-width: 1280px; width: 100%; margin: 0 auto; }

@media (max-width: 1560px) and (min-width: 901px) {
  .sidebar nav a:not(.on):not(:hover) .nl { display: none; }
  .sidebar nav a:not(.on) { padding: 0 11px; }
  .sidebar nav a:not(.on) .ic { width: 20px; height: 20px; }
}

/* ---------- linha de comando (busca) ---------- */
.topbar {
  position: sticky; top: var(--band); z-index: 20;
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  padding: 12px 36px 10px;
  background: linear-gradient(to bottom, rgba(247,246,242,.96) 65%, rgba(247,246,242,0));
}
.topbar-search {
  position: relative; display: flex; align-items: center; gap: 10px;
  background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 9px 16px; width: 480px; max-width: 48vw;
  transition: box-shadow .2s var(--ease), border-color .2s var(--ease);
}
.topbar-search:focus-within { border-color: var(--teal); box-shadow: 0 0 0 4px rgba(42,167,167,.14); }
.topbar-search .ico { color: var(--ink-soft); display: grid; order: 3; }
.topbar-search input { border: none; background: transparent; outline: none; font: inherit; width: 100%; color: var(--ink); padding: 0; }
.topbar-search input::placeholder { color: #8da3a1; font-family: var(--font-mono); font-size: 12px; }
.topbar-right { display: flex; align-items: center; gap: 12px; }
.top-user { display: none; }

/* ---------- cabeçalho de página ---------- */
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 22px; flex-wrap: wrap; }
.page-head h1 { font-size: 30px; line-height: 1.02; color: var(--petrol); font-weight: 800; letter-spacing: -.03em; }
.page-head .sub { color: var(--ink-soft); margin-top: 7px; font-size: 11.5px; letter-spacing: .02em; }

/* ---------- cartões ---------- */
.card { position: relative; background: var(--card); border: 1px solid transparent; border-radius: var(--radius); box-shadow: var(--shadow); padding: 22px; transition: box-shadow .2s var(--ease); }
.card:hover, .card:focus-within { box-shadow: var(--db-shadow-3); }
.main > .card, .main > .grid > .card, .main > .grid > * > .card, .main > .grid > .stat { animation: rise .5s var(--ease) both; }
.main > .grid > :nth-child(2) { animation-delay: .05s } .main > .grid > :nth-child(3) { animation-delay: .1s }
.main > .grid > :nth-child(4) { animation-delay: .15s } .main > .grid > :nth-child(5) { animation-delay: .2s }
.main > .card:nth-of-type(2) { animation-delay: .08s } .main > .card:nth-of-type(3) { animation-delay: .16s }
@keyframes rise { from { opacity: 0; transform: translateY(12px); } }
.grid { display: grid; gap: 16px; }
/* Sistema único de grade: ≤1100px (tela média), ≤900px (tablet / menu recolhido) e ≤560px (celular). */
.grid.cols-5 { grid-template-columns: repeat(5, 1fr); }
.grid.cols-4, .grid.cols-4-alerts { grid-template-columns: repeat(4, 1fr); }
.grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 1100px) {
  .grid.cols-5 { grid-template-columns: repeat(3, 1fr); }
  .grid.cols-4, .grid.cols-4-alerts, .grid.cols-3 { grid-template-columns: repeat(2, 1fr); }
}
.stat { position: relative; overflow: hidden; display: flex; align-items: center; gap: 14px; }
.stat .icon {
  width: 42px; height: 42px; border-radius: 8px; flex-shrink: 0;
  display: grid; place-items: center; font-size: 18px; color: var(--db-tint-mint-ink);
  background: var(--db-tint-mint);
}
.stat.tone-b .icon { background: var(--db-tint-sky); color: var(--db-tint-sky-ink); }
.stat.tone-g .icon { background: var(--db-tint-mint); color: var(--db-tint-mint-ink); }
.stat.tone-o .icon { background: var(--db-tint-sand); color: var(--db-tint-sand-ink); }
.stat.tone-r .icon { background: var(--db-tint-peach); color: var(--db-tint-peach-ink); }
.stat.tone-danger .icon { background: var(--db-tint-lilac); color: var(--db-tint-lilac-ink); }
.stat.tone-danger.kpi-alert { animation: kpi-pulse 2.4s ease-in-out infinite; }
@keyframes kpi-pulse { 0%,100%{box-shadow:0 0 0 0 rgba(123,45,139,.0)} 50%{box-shadow:0 0 0 4px rgba(123,45,139,.18)} }
.kpi-clickable { cursor: pointer; transition: transform .13s ease, box-shadow .13s ease; }
.kpi-clickable:hover { transform: translateY(-2px); box-shadow: 0 6px 20px -8px rgba(0,0,0,.18); }
.kpi-open { outline: 2px solid #9b4bbf; outline-offset: 2px; }
.kpi-panel { border-top: 3px solid #9b4bbf; animation: fade-in .18s ease; }
@keyframes fade-in { from{opacity:0;transform:translateY(-6px)} to{opacity:1;transform:none} }
.kpi-panel-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
/* Faixa KPI de retornos atrasados */
.kpi-strip { display:flex; align-items:center; gap:12px; padding:12px 18px;
  border-radius:12px; border:1.5px solid #e0d3f0; font-size:13px; }
.kpi-strip-alert { background:linear-gradient(90deg,#f7f0fd,#fdf8ff); border-color:#c9a8e8; }
.kpi-strip-ok    { background:linear-gradient(90deg,#f0faf6,#f7fdfb); border-color:#b8e0d0; }
.kpi-strip-icon  { font-size:18px; }
.kpi-strip-label { font-weight:700; color:#3d1a54; white-space:nowrap; }
.kpi-strip-ok .kpi-strip-label { color:#1a4535; }
.kpi-strip-num   { font-family:var(--font-serif); font-size:22px;
  font-weight:700; color:#7b2d8b; line-height:1; min-width:28px; text-align:center; }
.kpi-strip-ok .kpi-strip-num { color:#2aa7a7; }
.kpi-strip-hint  { flex:1; color:#6b4d7a; font-size:12px; }
.kpi-strip-ok .kpi-strip-hint { color:#3a6b58; }
.kpi-strip-cta   { font-size:12px; font-weight:600; color:#9b4bbf; white-space:nowrap; }
.kpi-strip.kpi-open { outline:2px solid #9b4bbf; outline-offset:2px; }
.alert-atraso-on { border-top: 3px solid #7b2d8b; }

/* ── Painel de Filtros Avançados ────────────────────────────────── */
.af-card { padding: 18px 22px; }
.af-header { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px; flex-wrap:wrap; }
.af-title { font:700 14px/1 var(--font-sans,inherit); color:var(--ink); display:flex; align-items:center; gap:8px; }
.af-active-count { font-size:11px; font-weight:700; padding:2px 8px; border-radius:99px;
  background:#e8f7f6; color:#2aa7a7; border:1px solid #b8e8e5; }
.af-actions { display:flex; gap:8px; align-items:center; }
.af-row { display:grid; grid-template-columns:repeat(auto-fill,minmax(170px,1fr)); gap:10px 14px; }
.af-row .field { margin:0; }
.af-row .field label { font-size:11px; margin-bottom:4px; }
.af-row .af-field-lg { grid-column:span 2; }
.af-toggle { display:inline-flex; align-items:center; gap:6px; margin-top:12px;
  background:none; border:none; font:600 12px/1 var(--font-sans,inherit); color:var(--ink-soft);
  cursor:pointer; padding:6px 4px; transition:color .15s; }
.af-toggle:hover { color:var(--teal,#2aa7a7); }
.af-toggle .af-toggle-ico { font-size:10px; transition:transform .2s ease; display:inline-block; }
.af-toggle.af-toggle-open .af-toggle-ico { transform:rotate(180deg); }
.af-adv-badge { font-size:10px; font-weight:700; padding:1px 6px; border-radius:99px;
  background:#fff3cd; color:#856404; margin-left:2px; }
.af-advanced-wrap { margin-top:10px; padding-top:12px; border-top:1px dashed var(--line,#e8efee); }
.af-hidden { display:none; }
.af-row-adv { grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); }
.af-adv-hint { font-size:11px; color:var(--ink-soft); margin:10px 0 0; }

/* ══════════════════════════════════════════════════════════════════
   EDITOR RICO DE ARTIGO (conteudo.php)
══════════════════════════════════════════════════════════════════ */
.aew { border:1.5px solid var(--line,#e8efee); border-radius:12px; overflow:visible; position:relative; margin-top:6px; background:#fff; }

/* ── Modal do editor de artigo ───────────────────────────────────── */
.dm-box--editor { width:min(1080px,97vw); max-height:94vh; display:flex; flex-direction:column; overflow:hidden; }
.dm-box--editor #art-form { display:flex; flex-direction:column; min-height:0; flex:1; }
.dm-box--editor .dm-body { padding:0 22px 18px; flex:1; min-height:0; overflow-y:auto; }
.dm-box--editor.ae-full { width:100vw; height:100vh; max-height:100vh; border-radius:0; }
.dm-box--editor.ae-full .ql-editor { max-height:none; min-height:52vh; }
.ae-metagrid { display:grid; grid-template-columns:repeat(12,1fr); gap:12px; margin-bottom:14px; }
.ae-metagrid .field { margin:0; }
.ae-c12 { grid-column:span 12; } .ae-c6 { grid-column:span 6; }
.ae-c4  { grid-column:span 4; }  .ae-c3 { grid-column:span 3; } .ae-c2 { grid-column:span 2; }
@media (max-width:900px){ .ae-c4,.ae-c3,.ae-c2 { grid-column:span 6; } }
@media (max-width:560px){ .ae-c6,.ae-c4,.ae-c3,.ae-c2 { grid-column:span 12; } }

/* Rodapé fixo do modal */
.ae-foot { display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  padding:14px 22px; border-top:1.5px solid var(--line,#e8efee); background:#f9fcfc;
  border-radius:0 0 16px 16px; position:sticky; bottom:0; }
.ae-foot .spacer { margin-left:auto; }
.ae-chars { font-size:11.5px; color:var(--ink-soft); }

/* ── Tema Quill alinhado ao Dentboard ────────────────────────────── */
.aew .ql-toolbar.ql-snow {
  border:none; border-bottom:1.5px solid var(--line,#e8efee);
  background:linear-gradient(#fbfdfd,#f4f9f9); padding:9px 10px;
  border-radius:12px 12px 0 0; font-family:var(--font-sans,inherit);
  position:sticky; top:0; z-index:12;
}
.aew .ql-container.ql-snow { border:none; font-family:var(--font-sans,inherit); font-size:14px; }
.aew .ql-editor {
  min-height:340px; max-height:46vh; overflow-y:auto;
  padding:20px 24px; line-height:1.78; color:var(--ink);
}
.aew .ql-editor.ae-drag-over { outline:2.5px dashed #38c9b4; outline-offset:-6px; background:#f4fdfb; }
.aew .ql-editor.ql-blank::before { color:#9bb5b3; font-style:normal; left:24px; right:24px; }

/* Botões da toolbar */
.aew .ql-snow.ql-toolbar button,
.aew .ql-snow .ql-toolbar button { width:29px; height:27px; border-radius:6px; transition:background .12s; }
.aew .ql-snow.ql-toolbar button:hover,
.aew .ql-snow.ql-toolbar .ql-picker-label:hover { background:#e2f2f0; }
.aew .ql-snow.ql-toolbar button.ql-active,
.aew .ql-snow.ql-toolbar .ql-picker-label.ql-active,
.aew .ql-snow.ql-toolbar .ql-picker-item.ql-selected { background:#d3ecea; color:var(--teal,#2aa7a7); }
.aew .ql-snow.ql-toolbar button:hover .ql-stroke,
.aew .ql-snow.ql-toolbar button.ql-active .ql-stroke,
.aew .ql-snow .ql-picker-label:hover .ql-stroke,
.aew .ql-snow .ql-picker-label.ql-active .ql-stroke { stroke:var(--teal,#2aa7a7); }
.aew .ql-snow.ql-toolbar button:hover .ql-fill,
.aew .ql-snow.ql-toolbar button.ql-active .ql-fill { fill:var(--teal,#2aa7a7); }
.aew .ql-snow .ql-formats { margin-right:11px; }
.aew .ql-snow .ql-picker { font-size:13px; }

/* Botões customizados (mídia e blocos) */
.aew .ql-snow.ql-toolbar button.ae-tb { width:auto; padding:0 9px; font:600 11.5px/27px var(--font-sans,inherit);
  border-radius:6px; white-space:nowrap; }
.aew .ql-snow.ql-toolbar button.ae-tb--media { color:#0d7a6b; background:#e2f6f2; }
.aew .ql-snow.ql-toolbar button.ae-tb--media:hover { background:#c9ede6; }
.aew .ql-snow.ql-toolbar button.ae-tb--tip  { color:#0d7a5f; background:#e3f6ef; }
.aew .ql-snow.ql-toolbar button.ae-tb--warn { color:#9a6100; background:#fdf1de; }
.aew .ql-snow.ql-toolbar button.ae-tb--tip:hover  { background:#cdeee2; }
.aew .ql-snow.ql-toolbar button.ae-tb--warn:hover { background:#f8e5c6; }

/* WYSIWYG: o conteúdo dentro do editor imita o app do paciente */
.aew .ql-editor h2 { font-size:17px; font-weight:700; margin:20px 0 9px; }
.aew .ql-editor h3 { font-size:15px; font-weight:700; margin:18px 0 8px; }
.aew .ql-editor p  { margin:0 0 12px; }
.aew .ql-editor ol,.aew .ql-editor ul { padding-left:14px; }
.aew .ql-editor li { margin-bottom:5px; }
.aew .ql-editor blockquote { border-left:3px solid var(--teal,#2aa7a7); background:#f4faf9;
  margin:14px 0; padding:10px 16px; border-radius:0 8px 8px 0; color:var(--ink-soft); }
.aew .ql-editor img,.aew .ql-editor .art-img { max-width:100%; border-radius:10px; margin:14px 0; display:block; }
.aew .ql-editor video,.aew .ql-editor .art-vid { max-width:100%; border-radius:10px; margin:14px 0; display:block; background:#0d1c1c; }
.aew .ql-editor iframe.art-yt { width:100%; aspect-ratio:16/9; border-radius:10px; margin:14px 0; display:block; border:none; background:#000; pointer-events:none; }
.aew .ql-editor hr { border:none; border-top:1.5px solid #e2ecea; margin:22px 0; }
.aew .ql-editor .edu-tip  { background:rgba(56,224,195,.12); border-left:3px solid #38e0c3; padding:12px 16px; border-radius:0 10px 10px 0; margin:16px 0; }
.aew .ql-editor .edu-warn { background:rgba(245,166,35,.12);  border-left:3px solid #f5a623; padding:12px 16px; border-radius:0 10px 10px 0; margin:16px 0; }

/* Modo código-fonte. O [hidden] precisa vir depois para vencer o display:block. */
#ae-source { display:block; width:100%; box-sizing:border-box; min-height:340px; max-height:46vh;
  padding:16px 18px; font:13px/1.7 'Fira Code','JetBrains Mono','Courier New',monospace;
  color:#c8e8e4; background:#0d1c1c; border:none; outline:none; resize:vertical; }
#ae-source[hidden] { display:none; }
#ae-editor[hidden] { display:none; }

/* Barra de status abaixo do editor */
.ae-statusbar { display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  padding:8px 14px; background:#f6fafa; border-top:1.5px solid var(--line,#e8efee); font-size:11.5px; color:var(--ink-soft); }
.ae-statusbar .dot { width:5px; height:5px; border-radius:50%; background:#c3d6d4; }

/* Galeria de mídias inseridas */
.aew-gallery { display:flex; flex-wrap:wrap; gap:8px; padding:10px 12px; background:#f0f7f6; border-top:1.5px solid var(--line,#e8efee); min-height:58px; align-items:center; }
.aew-gal-empty { font-size:11px; color:var(--ink-soft); }
.aew-thumb { position:relative; width:54px; height:54px; border-radius:7px; overflow:hidden; border:1.5px solid var(--line,#e8efee); cursor:pointer; transition:transform .12s,box-shadow .12s; background:#dce; }
.aew-thumb:hover { transform:scale(1.07); box-shadow:0 4px 12px rgba(0,0,0,.14); }
.aew-thumb img { width:100%;height:100%;object-fit:cover; }
.aew-thumb-vid { display:flex; align-items:center; justify-content:center; width:100%; height:100%; background:#162020; color:#52dfc5; font-size:22px; position:relative; }
.aew-thumb-yt  { background:#1a0000; }
.aew-yt-play   { position:absolute; font-size:18px; color:#fff; text-shadow:0 1px 4px rgba(0,0,0,.7); }
.aew-thumb-badge { position:absolute; bottom:2px; right:2px; background:rgba(0,0,0,.55); color:#fff; font-size:9px; padding:2px 4px; border-radius:3px; font-family:monospace; }

/* Overlay de upload */
.aew-uploading { position:absolute; inset:0; background:rgba(8,20,20,.75); backdrop-filter:blur(5px); display:flex; align-items:center; justify-content:center; z-index:30; }
/* o atributo hidden precisa vencer o display:flex acima, senão o overlay cobre o editor inteiro */
.aew-uploading[hidden] { display:none !important; }
.aew-up-box { text-align:center; color:#fff; display:flex; flex-direction:column; align-items:center; gap:14px; }
.aew-spinner { width:44px; height:44px; border:3px solid rgba(255,255,255,.15); border-top-color:#38e0c3; border-radius:50%; animation:aew-spin .7s linear infinite; }
@keyframes aew-spin { to { transform:rotate(360deg); } }
.aew-up-label { font:700 15px/1.3 var(--font-sans,inherit); }
.aew-up-sub   { font-size:12px; opacity:.65; }

/* Toast */
.aew-toast { position:fixed; bottom:22px; right:22px; z-index:9999; padding:12px 18px; border-radius:10px; font:600 13px/1.45 var(--font-sans,inherit); color:#fff; box-shadow:0 4px 24px rgba(0,0,0,.22); animation:aew-toast-in .2s ease; max-width:320px; pointer-events:none; }
.aew-toast--ok  { background:#2aa7a7; }
.aew-toast--err { background:#e05c5c; }
@keyframes aew-toast-in { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:none; } }

/* Estilo das imagens/vídeos nos artigos renderizados no app */
.art-img { max-width:100%; border-radius:10px; margin:14px 0; display:block; }
.art-vid { max-width:100%; border-radius:10px; margin:14px 0; display:block; }
.art-yt  { width:100%; aspect-ratio:16/9; border-radius:10px; margin:14px 0; display:block; border:none; background:#000; }

/* ══════════════════════════════════════════════════════════════════
   IMPORTADOR DE PACIENTES (importar_pacientes.php)
══════════════════════════════════════════════════════════════════ */

/* Indicador de etapas */
.imp-steps { display:flex; align-items:center; gap:0; margin-bottom:24px; }
.imp-step  { display:flex; align-items:center; gap:8px; font:600 13px/1 var(--font-sans,inherit); color:var(--ink-soft); }
.imp-step--on   { color:var(--teal,#2aa7a7); }
.imp-step--done { color:var(--teal,#2aa7a7); opacity:.55; }
.imp-step-num { width:26px;height:26px;border-radius:50%;background:var(--line,#e8efee);color:var(--ink-soft);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;flex-shrink:0;transition:background .2s,color .2s; }
.imp-step--on   .imp-step-num { background:var(--teal,#2aa7a7);color:#fff; }
.imp-step--done .imp-step-num { background:var(--teal,#2aa7a7);color:#fff; }
.imp-step-line { flex:1; height:2px; background:var(--line,#e8efee); margin:0 12px; max-width:60px; }

/* Card do importador */
.imp-card { padding:24px; }

/* Intro */
.imp-intro { display:flex; gap:16px; align-items:flex-start; margin-bottom:24px; padding-bottom:20px; border-bottom:1.5px solid var(--line,#e8efee); }
.imp-intro-icon { font-size:36px; flex-shrink:0; line-height:1; }

/* Drop zone */
.imp-dropzone { display:block; border:2px dashed var(--line,#e8efee); border-radius:12px; padding:36px 24px; text-align:center; cursor:pointer; transition:border-color .15s,background .15s; }
.imp-dropzone:hover { border-color:var(--teal,#2aa7a7); background:rgba(42,167,167,.03); }
.imp-dz-icon  { font-size:32px; margin-bottom:10px; }
.imp-dz-title { font:700 15px/1.3 var(--font-sans,inherit); color:var(--ink); margin-bottom:6px; }
.imp-dz-sub   { font-size:12px; color:var(--ink-soft); }

/* Dica de campos reconhecidos */
.imp-fields-hint { margin-top:20px; padding-top:16px; border-top:1.5px solid var(--line,#e8efee); }
.imp-fh-title { font:700 11px/1 var(--font-sans,inherit); text-transform:uppercase; letter-spacing:.07em; color:var(--ink-soft); margin-bottom:10px; }
.imp-fh-list  { display:flex; flex-wrap:wrap; gap:6px; }
.imp-fh-item  { display:inline-flex; align-items:center; gap:4px; padding:4px 10px; border-radius:12px; background:#f0f7f6; border:1px solid var(--line,#e8efee); font-size:12px; color:var(--ink); }
.imp-fh-item span { font-size:10px; color:var(--ink-soft); }
.imp-fh--req  { background:rgba(42,167,167,.1); border-color:rgba(42,167,167,.3); font-weight:700; color:var(--teal,#2aa7a7); }
.imp-fh--req span { color:var(--teal,#2aa7a7); opacity:.75; }

/* Stats cards */
.imp-stats { display:flex; gap:12px; flex-wrap:wrap; }
.imp-stat   { flex:1; min-width:120px; padding:16px 18px; border-radius:10px; }
.imp-stat-n { font:700 28px/1 var(--font-sans,inherit); margin-bottom:4px; }
.imp-stat-l { font-size:11px; opacity:.75; }
.imp-stat--ok   { background:rgba(42,167,167,.1);  color:#1a7a7a; }
.imp-stat--skip { background:rgba(200,180,50,.1);  color:#7a6a10; }
.imp-stat--err  { background:rgba(224,92,92,.1);   color:#9a2a2a; }

/* Mapeamento de colunas */
.imp-map-grid { display:flex; flex-wrap:wrap; gap:8px; }
.imp-map-col  { display:flex; align-items:center; gap:6px; padding:6px 10px; border-radius:8px; font-size:12px; border:1px solid var(--line,#e8efee); }
.imp-map-col--on  { background:rgba(42,167,167,.07); border-color:rgba(42,167,167,.25); }
.imp-map-col--off { background:#f6f6f6; opacity:.6; }
.imp-map-orig { font-weight:600; color:var(--ink); }
.imp-map-arrow{ color:var(--ink-soft); font-size:11px; }
.imp-map-dest { color:var(--teal,#2aa7a7); font-weight:700; }
.imp-map-col--off .imp-map-dest { color:var(--ink-soft); }

/* Tabela de preview */
.imp-preview-table { width:100%; border-collapse:collapse; font-size:12px; }
.imp-preview-table th,.imp-preview-table td { padding:6px 10px; border-bottom:1px solid var(--line,#e8efee); text-align:left; white-space:nowrap; }
.imp-preview-table thead th { background:#f6fafa; font-size:11px; font-weight:700; color:var(--ink-soft); text-transform:uppercase; letter-spacing:.05em; }
.imp-th--mapped { color:var(--teal,#2aa7a7) !important; }
.imp-th--skip   { opacity:.4; }
.imp-row-num    { color:var(--ink-soft); font-size:11px; font-family:monospace; }
.imp-row-ok     { background:#fff; }
.imp-row-skip   { background:rgba(200,180,50,.05); opacity:.7; }
.imp-row-error  { background:rgba(224,92,92,.06); }
.imp-row-status { white-space:nowrap; }
.imp-badge      { display:inline-block; padding:2px 8px; border-radius:12px; font-size:10px; font-weight:700; }
.imp-badge--ok   { background:rgba(42,167,167,.15); color:#1a7a7a; }
.imp-badge--skip { background:rgba(200,180,50,.15); color:#7a6a10; }
.imp-badge--err  { background:rgba(224,92,92,.15);  color:#9a2a2a; }

/* Resultado final */
.imp-result { padding:32px; text-align:center; }
.imp-result-icon  { font-size:52px; margin-bottom:12px; }
.imp-result-title { font-size:20px; font-weight:700; margin:0 0 16px; }

/* ── Configuração de arcadas (avaliacao_form) ───────────────────── */
.arch-cfg { padding:18px 20px; }
.arch-cfg-row { display:flex; align-items:center; flex-wrap:wrap; gap:12px; padding:10px 0; border-bottom:1px solid var(--line,#e8efee); }
.arch-cfg-row:last-child { border-bottom:none; padding-bottom:0; }
.arch-cfg-lbl { width:100px; font-size:13px; flex-shrink:0; }
.arch-type-pills { display:flex; gap:6px; flex-wrap:wrap; }
.arch-pill { display:inline-flex; align-items:center; cursor:pointer; }
.arch-pill input { position:absolute; opacity:0; pointer-events:none; }
.arch-pill span { display:inline-block; padding:5px 12px; border-radius:12px; font-size:12px; font-weight:600; border:1.5px solid var(--line,#e8efee); background:#f6fafa; color:var(--ink); transition:border-color .15s,background .15s,color .15s; white-space:nowrap; }
.arch-pill input:checked + span { border-color:var(--teal,#2aa7a7); background:rgba(42,167,167,.1); color:var(--teal,#2aa7a7); }
.arch-extra { display:flex; gap:16px; align-items:center; flex-wrap:wrap; padding:8px 12px; background:#f6fafa; border-radius:8px; border:1px solid var(--line,#e8efee); }
.arch-extra label { font-size:11px; color:var(--ink-soft); display:block; margin-bottom:4px; }
.arch-extra-implants { display:flex; flex-direction:column; }

/* Arcadas de protocolo / prótese: arcada compacta */
.odo-arch--proto,
.odo-arch--denture { justify-content:flex-start; gap:4px; flex-wrap:wrap; min-height:60px; }

/* Slot de implante */
.tooth--impl { background:#f0f8f8; border:1.5px dashed #8ecece; min-width:36px; max-width:48px; }
.tooth--impl .impl-body { font-size:18px; text-align:center; line-height:1; padding:4px 0; color:#2aa7a7; }

/* Slot de prótese (protocolo ou total) */
.tooth--proto { background:#e6f4f4; border:2px solid #2aa7a7; min-width:54px; flex-grow:1; max-width:90px; }
.proto-crown b { border-color:#2aa7a7; }

/* Grupos de botões (substituem <select> no painel do odontograma) */
.odo-btngrp { display:flex; gap:4px; flex-wrap:wrap; margin-top:6px; }
.odo-btn {
  padding:5px 10px; border-radius:6px;
  border:1.5px solid #dde8e8; background:#f6fafa;
  cursor:pointer; font-size:12px; font-weight:600; color:var(--ink);
  transition:border-color .12s, background .12s, color .12s;
  white-space:nowrap;
}
.odo-btn:hover { border-color:#2aa7a7; }
.odo-btn.on   { border-color:#2aa7a7; background:rgba(42,167,167,.12); color:#2aa7a7; }

/* ── Cronologia de Limpeza ──────────────────────────────────────── */
.cl-tabs { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:14px; }
.cl-tab  { display:inline-flex; align-items:center; gap:6px; padding:7px 14px;
  border-radius:999px; border:1.5px solid var(--line); background:#fff;
  font:600 12px/1 var(--font-sans,inherit); color:var(--ink-soft); cursor:pointer;
  transition:all .15s ease; }
.cl-tab:hover { border-color:#2aa7a7; color:#2aa7a7; }
.cl-tab.active { background:#2aa7a7; border-color:#2aa7a7; color:#fff; }
.cl-tab.active .cl-badge { background:rgba(255,255,255,.25); color:#fff; }
.cl-tab-danger { border-color:#f5c5c5; color:#c0564f; }
.cl-tab-danger:hover, .cl-tab-danger.active { background:#c0564f; border-color:#c0564f; color:#fff; }
.cl-tab-muted { opacity:.65; }
.cl-badge { font-size:11px; font-weight:700; padding:1px 6px; border-radius:99px;
  background:var(--sand,#f3f5f4); color:var(--ink-soft); }
.cl-table-wrap { overflow-x:auto; }

/* Situação do plano dentro da Cronologia de Limpeza */
.cl-plan-sit { display:inline-block; margin-top:3px; padding:1px 7px; border-radius:999px;
  font-size:10.5px; font-weight:700; white-space:nowrap; cursor:help; }

/* ── Tabelas roláveis (cronologia, base de clientes, modais) ───────── */
.tbl-scroll { overflow:auto; max-height:var(--tbl-max,460px); border:1px solid var(--line,#e8efee); border-radius:10px; }
.tbl-scroll table { margin:0; }
.tbl-scroll thead th,
.tbl-scroll > table > tr:first-child th { position:sticky; top:0; z-index:2; background:#f6fafa; box-shadow:inset 0 -1px 0 var(--line,#e8efee); }
.tbl-scroll::-webkit-scrollbar { width:10px; height:10px; }
.tbl-scroll::-webkit-scrollbar-thumb { background:#cfe0df; border-radius:8px; border:2px solid #f6fafa; }
.tbl-scroll::-webkit-scrollbar-thumb:hover { background:#a9cbc9; }
.tbl-count { font-size:11px; color:var(--ink-soft); margin-top:6px; text-align:right; }

/* ── KPI clicável ──────────────────────────────────────────────────── */
.kpi-click { cursor:pointer; transition:transform .13s ease, box-shadow .13s ease; }
.kpi-click:hover { transform:translateY(-2px); box-shadow:0 12px 26px -14px rgba(14,58,64,.45); }
.kpi-click:focus-visible { outline:2px solid #2aa7a7; outline-offset:2px; }
.kpi-more { font-size:10.5px; font-weight:700; color:#2aa7a7; margin-top:6px; display:flex; align-items:center; gap:4px; }
.kpi-click:hover .kpi-more { text-decoration:underline; }

/* ── Filtros compactos (barra no topo) ─────────────────────────────── */
.af-card.af-compact { padding:12px 16px; }
.af-compact .af-header { margin-bottom:10px; }
.af-compact .af-row { grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:8px 10px; }
.af-compact .af-row .field input,
.af-compact .af-row .field select { padding:6px 9px; font-size:12.5px; }
.af-compact .af-row .field label { font-size:10px; letter-spacing:.04em; text-transform:uppercase; }
.af-compact .af-toggle { margin-top:8px; font-size:12px; }
.af-compact .af-advanced-wrap { margin-top:8px; padding-top:10px; }

/* ── Modal genérico de drill-down ──────────────────────────────────── */
.dm-back { display:none; position:fixed; inset:0; background:rgba(14,58,64,.55);
  backdrop-filter:blur(2px); z-index:9998; align-items:center; justify-content:center; padding:24px; }
.dm-back.on { display:flex; }
.dm-box { background:var(--surface,#fff); border-radius:12px; width:min(940px,96vw);
  max-height:88vh; display:flex; flex-direction:column; box-shadow:0 20px 60px rgba(0,0,0,.35); overflow:hidden; }
.dm-head { display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:18px 22px; border-bottom:1px solid var(--line,#e8efee); flex-wrap:wrap; }
.dm-head h2 { font-size:16px; margin:0; }
.dm-head .sub { font-size:12px; color:var(--ink-soft); margin-top:2px; }
.dm-actions { display:flex; gap:8px; align-items:center; }
.dm-body { padding:0 22px 20px; overflow:auto; }
.dm-body table { font-size:13px; }
.dm-body thead th { position:sticky; top:0; background:#f6fafa; z-index:2; }
.dm-close { background:none; border:none; font-size:20px; line-height:1; cursor:pointer;
  color:var(--ink-soft); padding:4px 8px; border-radius:8px; }
.dm-close:hover { background:#f0f5f5; color:var(--ink); }

/* ── Impressão: só a seção alvo ────────────────────────────────────── */
@media print {
  body * { visibility:hidden !important; }
  .print-target, .print-target * { visibility:visible !important; }
  .print-target { position:absolute; left:0; top:0; width:100%; box-shadow:none !important; border:none !important; }
  .no-print, .no-print * { visibility:hidden !important; display:none !important; }
  .tbl-scroll { max-height:none !important; overflow:visible !important; border:none !important; }
  /* Modal impresso precisa soltar a rolagem, senão a lista longa é cortada */
  .dm-box { max-height:none !important; overflow:visible !important; box-shadow:none !important; }
  .dm-body { max-height:none !important; overflow:visible !important; }
  @page { margin:14mm 12mm; size:A4 portrait; }
}
.cl-table { width:100%; border-collapse:collapse; font-size:13px; }
.cl-table th { text-align:left; font-size:10.5px; text-transform:uppercase;
  letter-spacing:.08em; color:var(--ink-soft); padding:8px 12px;
  border-bottom:2px solid var(--line); white-space:nowrap; }
.cl-table td { padding:9px 12px; border-bottom:1px solid var(--line); vertical-align:middle; }
.cl-table .cl-row:hover td { background:#f7fafa; }
.cl-row-atraso td { background:#fff8f8; }
.cl-row-p30 td   { background:#fffcf5; }
.cl-row-futuro td{ opacity:.7; }
.cl-plaque-bar  { width:56px; height:6px; border-radius:99px; background:var(--line,#e8efee); flex-shrink:0; }
.cl-plaque-fill { height:100%; border-radius:99px; transition:width .3s ease; }
.cl-pri-badge   { font-size:11px; font-weight:700; padding:2px 8px; border-radius:99px;
  border:1.5px solid transparent; white-space:nowrap; }
.cl-sit { font-size:12px; white-space:nowrap; }
.stat .k { font-size: 10px; text-transform: uppercase; letter-spacing: .14em; color: var(--ink-soft); font-weight: 500; }
.stat .v { font-family: var(--font-display); font-weight: 800; letter-spacing: -.04em; font-size: 34px; line-height: 1; color: var(--petrol); margin-top: 6px; font-variant-numeric: tabular-nums; }
.stat .hint { font-size: 11.5px; color: var(--ink-soft); margin-top: 5px; }

/* ---------- tabelas ---------- */
table { width: 100%; border-collapse: collapse; }
th { text-align: left; font-size: 10px; text-transform: uppercase; letter-spacing: .12em; color: var(--ink-soft); padding: 8px 12px; border-bottom: 1px solid var(--petrol); font-weight: 500; }
td { padding: 11px 12px; border-bottom: 1px solid #eef3f2; vertical-align: middle; }
tr:last-child td { border-bottom: none; }
tbody tr { transition: background .15s var(--ease); }
tr.rowlink { cursor: pointer; }
tr.rowlink:hover td { background: #f3faf9; }
tr.rowlink td:first-child { position: relative; }
tr.rowlink td:first-child::before { content: ''; position: absolute; left: 0; top: 20%; bottom: 20%; width: 3px; border-radius: 0 3px 3px 0; background: var(--teal); transform: scaleY(0); transition: transform .18s var(--ease); }
tr.rowlink:hover td:first-child::before { transform: scaleY(1); }

/* ---------- selos / scores ---------- */
.badge { display: inline-block; padding: 3px 9px; border-radius: 6px; font-size: 10.5px; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; }
.badge.tier { color: #fff; }
.badge.st-ativo { background: #e2f3ea; color: var(--ok); }
.badge.st-inativo, .badge.st-cancelado { background: #f4e4e2; color: var(--danger); }
.badge.st-suspenso { background: #f8eedb; color: var(--warn); }
.badge.st-concluido { background: #e7ecf5; color: #4a6591; }
.score-pill { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; padding: 3px 11px; border-radius: 6px; font-size: 12px; font-variant-numeric: tabular-nums; font-family: var(--font-display); }
.score-pill.excelente { background: #e2f3ea; color: var(--ok); }
.score-pill.bom { background: var(--teal-soft); color: #17797a; }
.score-pill.atencao { background: #f8eedb; color: var(--warn); }
.score-pill.critico { background: #f4e4e2; color: var(--danger); }
.score-decay { margin-top: 6px; font-size: 12px; font-weight: 600; color: #8a6520; background: #fbf1de; border: 1px solid #eddcb9; border-radius: 10px; padding: 6px 10px; }
.proto-note { font-size: 11.5px; color: #2d6e6e; background: rgba(42,167,167,.08); border: 1px solid rgba(42,167,167,.22); border-radius: 8px; padding: 6px 10px; margin-bottom: 2px; line-height: 1.5; }
.proto-legend { margin-top: 12px; font-size: 11px; color: var(--ink-soft); background: rgba(42,167,167,.06); border: 1px solid rgba(42,167,167,.18); border-radius: 8px; padding: 8px 10px; line-height: 1.7; }

/* ---------- formulários e botões ---------- */
label { display: block; font-size: 10.5px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); margin: 0 0 6px; }
input[type=text], input[type=password], input[type=email], input[type=date], input[type=number], input[type=search], select, textarea {
  width: 100%; padding: 10px 13px; border: 1px solid var(--line); border-radius: var(--radius-sm);
  font: inherit; background: #fff; color: var(--ink);
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 4px rgba(42,167,167,.14); }
.field { margin-bottom: 14px; }
.field-err { display: none; margin-top: 5px; font-size: 11.5px; font-weight: 600; color: var(--danger); }
.field-err.on { display: block; }
input.input-err { border-color: var(--danger); background: #fdf7f6; }
input.input-err:focus { box-shadow: 0 0 0 4px rgba(192,86,79,.14); border-color: var(--danger); }
input.input-ok { border-color: var(--teal-line); }
.form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; }
.btn {
  display: inline-flex; align-items: center; gap: 8px; padding: 10px 20px; border-radius: 8px;
  border: 1px solid transparent; background: var(--petrol);
  color: #fff; font: inherit; font-weight: 700; cursor: pointer; position: relative; overflow: hidden;
  transition: transform .16s var(--ease), box-shadow .16s var(--ease), background .16s var(--ease);
}
.btn::after { content: ''; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,.18) 50%, transparent 70%); transform: translateX(-110%); transition: transform .5s var(--ease); }
.btn:hover { transform: translateY(-1px); box-shadow: 0 14px 26px -14px rgba(14,58,64,.7); background: var(--petrol-2); }
.btn:hover::after { transform: translateX(110%); }
.btn:active { transform: translateY(0) scale(.98); }
.btn.teal { background: var(--teal); color: #052a2c; }
.btn.teal:hover { background: #31b8b6; box-shadow: 0 14px 26px -14px rgba(42,167,167,.9); }
.btn.ghost { background: transparent; color: var(--petrol); border-color: var(--line); }
.btn.ghost:hover { background: #fff; border-color: var(--teal-line); box-shadow: none; }
.btn.sm { padding: 5px 12px; font-size: 11.5px; border-radius: 6px; }
.btn.danger { background: transparent; color: var(--danger); border-color: #e7cfcd; }

/* ---------- flash ---------- */
.flash { padding: 12px 16px 12px 18px; border-radius: 8px; margin-bottom: 18px; font-weight: 600; border-left-width: 4px; animation: rise .4s var(--ease) both; }
.flash-ok { background: #e2f3ea; color: #22684a; border: 1px solid #c4e5d3; border-left: 4px solid var(--ok); }
.flash-err { background: #f4e4e2; color: #8c3a34; border: 1px solid #e7cfcd; border-left: 4px solid var(--danger); }
.flash-warn { background: #fbf1de; color: #8a6520; border: 1px solid #eddcb9; border-left: 4px solid var(--warn); }

/* ---------- login ---------- */
.auth-wrap { min-height: 100vh; display: grid; grid-template-columns: 1.1fr 1fr; background: var(--sand); }
.auth-side { position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; padding: 44px 52px;
  color: #d8ecea; background: var(--petrol); }
.auth-side .ring { position: absolute; pointer-events: none; border-radius: 50%; border: 1px solid rgba(42,167,167,.5); animation: vf-breathe 7s var(--ease) infinite; }
.auth-side .ring:nth-child(1) { width: 60%; aspect-ratio: 1; right: -18%; top: 14%; }
.auth-side .ring:nth-child(2) { width: 84%; aspect-ratio: 1; right: -30%; top: 2%; opacity: .5; animation-delay: -2.3s; }
.auth-side .ring:nth-child(3) { width: 110%; aspect-ratio: 1; right: -43%; top: -11%; opacity: .25; animation-delay: -4.6s; }
@keyframes vf-breathe { 0%,100% { transform: scale(1); } 50% { transform: scale(1.03); } }
.auth-side img { height: 52px; width: auto; align-self: flex-start; background: #fff; border-radius: 8px; padding: 6px 12px; position: relative; }
.auth-side h2 { position: relative; font-size: clamp(34px, 4.2vw, 56px); line-height: 1; color: #fff; max-width: 12ch; font-weight: 800; letter-spacing: -.035em; }
.auth-side h2 em { color: var(--teal); font-style: normal; }
.auth-side p { position: relative; margin-top: 18px; max-width: 42ch; color: #9fc3c1; font-size: 14px; }
.auth-side small { position: relative; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; color: #6e9493; }
.auth-form { display: grid; place-items: center; padding: 32px 24px; }
.auth-card { width: 400px; max-width: 100%; animation: rise .6s var(--ease) both; }
.auth-logo { display: none; }
.auth-card h1 { font-size: 28px; color: var(--petrol); font-weight: 800; letter-spacing: -.03em; }
.auth-card .sub { color: var(--ink-soft); font-size: 13px; margin: 8px 0 26px; }
.auth-card .btn { width: 100%; justify-content: center; padding: 13px; }
.auth-foot { margin-top: 18px; font-size: 12px; color: var(--ink-soft); }
@media (max-width: 900px) {
  .auth-wrap { grid-template-columns: 1fr; }
  .auth-side { padding: 28px 24px; min-height: 36vh; }
  .auth-side h2 { font-size: 32px; }
  .auth-side p { display: none; }
}
/* ---------- odontograma ---------- */
.odo-arch { display: flex; justify-content: center; gap: 6px; flex-wrap: nowrap; }
.odo-arch + .odo-arch { margin-top: 14px; }
.tooth {
  width: 44px; border: 1.5px solid var(--line); border-radius: 10px; background: #fff;
  padding: 5px 3px 6px; text-align: center; cursor: pointer; position: relative; user-select: none;
  transition: border-color .12s, box-shadow .12s;
}
.tooth:hover { border-color: var(--teal); box-shadow: 0 0 0 3px rgba(42,167,167,.15); }
.tooth.sel { border-color: var(--petrol); box-shadow: 0 0 0 3px rgba(14,58,64,.18); }
.tooth.absent { opacity: .38; background: #eef2f2; }
.tooth .num { font-size: 11px; font-weight: 700; color: var(--ink-soft); }
.tooth .crown { width: 26px; height: 26px; margin: 4px auto 2px; border-radius: 7px; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; overflow: hidden; border: 1px solid var(--line); }
.tooth .crown b { background: #f2f7f6; }
.tooth .crown b.pl { background: var(--danger); opacity: .75; }
.tooth .dots { display: flex; justify-content: center; gap: 3px; height: 6px; }
.tooth .dots u { width: 6px; height: 6px; border-radius: 50%; text-decoration: none; }
.dot-g0 { background: #d7e4e2; } .dot-g1 { background: #d69a3d; } .dot-g2 { background: #cd7434; } .dot-g3 { background: var(--danger); }
.dot-r { background: var(--petrol); }
.odo-panel { border: 1px dashed var(--teal-line); border-radius: 12px; padding: 16px; margin-top: 18px; background: #fbfdfd; }
.surf-grid { display: flex; gap: 8px; }
.surf-grid label { display: inline-flex; align-items: center; gap: 5px; border: 1px solid var(--line); border-radius: 8px; padding: 6px 10px; margin: 0; cursor: pointer; font-weight: 500; color: var(--ink); }
.surf-grid label.on { background: #f8e5e3; border-color: var(--danger); color: var(--danger); }

/* ---------- score gauge ---------- */
.gauge-wrap { display: flex; align-items: center; gap: 22px; }
.gauge { position: relative; width: 130px; height: 130px; flex-shrink: 0; }
.gauge svg { transform: rotate(-90deg); }
.gauge .val { position: absolute; inset: 0; display: grid; place-items: center; }
/* largura máxima = diâmetro interno do anel (r 54 − stroke/2 5,5) × 2 − folga 6 */
.gauge .val > * { width: 85px; text-align: center; }
.gauge .val b { font-family: var(--font-serif); font-size: 24px; line-height: 1.1; color: var(--petrol); display: block; }
.gauge .val small { display:block; text-align:center; font-size: 8px; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-soft); }
.pillars { flex: 1; display: flex; flex-direction: column; gap: 10px; }
.pillar .top { display: flex; justify-content: space-between; font-size: 11.5px; font-weight: 600; margin-bottom: 4px; }
.pillar .bar { height: 8px; border-radius: 99px; background: #e8efee; overflow: hidden; }
.pillar .bar i { display: block; height: 100%; border-radius: 99px; background: var(--teal); }

/* ---------- fotos ---------- */
.photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 14px; }
.photo-card { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: #fff; }
.photo-card img { width: 100%; height: 130px; object-fit: cover; display: block; }
.photo-card .meta { padding: 7px 10px; font-size: 11px; color: var(--ink-soft); display: flex; justify-content: space-between; align-items: center; }
.photo-tag { font-size: 9.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 2px 7px; border-radius: 99px; }
.photo-tag.antes { background: #f8eedb; color: var(--warn); }
.photo-tag.depois { background: #e2f3ea; color: var(--ok); }

/* Escaneamento 3D do paciente */
.scan-upload-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.scan-arch { position: relative; border: 1px solid var(--line); border-radius: 12px; padding: 14px; background: #fbfdfd; }
.scan-arch-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; margin-bottom: 12px; }
.scan-arch-head small, .scan-actions small { display: block; color: var(--muted); font-size: 11px; margin-top: 3px; }
.scan-file { display: flex; align-items: center; justify-content: center; min-height: 42px; border: 1px dashed #9dbdbc; border-radius: 9px; color: var(--petrol); font-size: 12px; font-weight: 700; cursor: pointer; background: #fff; }
.scan-file:hover { border-color: var(--teal); background: #f1fbfa; }
.scan-file input { position: absolute; opacity: 0; pointer-events: none; }
.scan-file.has-file { border-style: solid; border-color: var(--teal); background: #eef9f8; }
.scan-remove { margin-top: 9px; color: var(--danger); }
.scan-actions { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.scan-progress { grid-column: 1 / -1; padding: 10px 12px; border-radius: 9px; background: #eef8f7; color: var(--petrol); font-size: 12px; }
@media (max-width: 900px) {
  .scan-upload-grid { grid-template-columns: 1fr; }
  .scan-actions { align-items: flex-start; flex-direction: column; }
}

/* ---------- abas ---------- */
.tabs { display: flex; gap: 4px; margin-bottom: 18px; background: var(--sand-2); padding: 4px; border-radius: 999px; width: max-content; max-width: 100%; overflow-x: auto; }
.tabs a { padding: 8px 16px; border-radius: 999px; color: var(--ink-soft); font-weight: 700; white-space: nowrap; transition: background .18s var(--ease), color .18s var(--ease); }
.tabs a.on { color: var(--petrol); background: #fff; box-shadow: 0 4px 12px -8px rgba(14,58,64,.5); }

/* ---------- filtros ---------- */
.filter-bar { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; }
.filter-bar .field { margin: 0; min-width: 150px; }
.muted { color: var(--ink-soft); }
.mt { margin-top: 18px; } .mb { margin-bottom: 18px; }
.right { text-align: right; }
.empty { text-align: center; color: var(--ink-soft); padding: 40px 10px; }
.empty::before { content: ''; display: block; width: 54px; height: 54px; margin: 0 auto 14px; border-radius: 50%; border: 1.5px solid var(--teal-line); box-shadow: inset 0 0 0 8px #fff, inset 0 0 0 9.5px var(--teal-soft); }
.empty b { display: block; font-family: var(--font-serif); font-size: 19px; color: var(--petrol); margin-bottom: 4px; }
/* ---------- Relatórios: metas (gamificação) ---------- */
.stat.card { flex-direction: column; align-items: stretch; gap: 6px; }
.goal-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
.goal-icon { font-size: 20px; line-height: 1; }
.goal-stars { font-size: 16px; letter-spacing: 1px; }
.goal-num { display: flex; align-items: baseline; gap: 3px; margin: 2px 0; }
.goal-atual { font-family: var(--font-serif); font-size: 26px; line-height: 1; font-weight: 600; }
.goal-sep { color: var(--ink-soft); font-size: 15px; margin: 0 1px; }
.goal-meta { color: var(--ink-soft); font-size: 13px; }
.goal-bar-wrap { height: 6px; border-radius: 99px; background: var(--line); overflow: hidden; margin: 4px 0 2px; }
.goal-bar { height: 100%; border-radius: 99px; transition: width .6s ease; }

/* ---------- Relatórios: alertas de carteira ---------- */
.alert-card { padding: 16px 18px; }
.alert-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.alert-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.alert-head h3 { font-family: var(--font-serif); font-size: 14px; color: var(--petrol); flex: 1; }
.alert-count { font-family: var(--font-serif); font-size: 22px; font-weight: 600; color: var(--petrol); }
.alert-sub { font-size: 11px; color: var(--ink-soft); margin-bottom: 10px; }
.alert-empty { font-size: 12px; color: var(--ok); padding: 10px 0; }
.alert-list { list-style: none; display: flex; flex-direction: column; gap: 0; }
.alert-list li { border-top: 1px solid var(--line); }
.alert-list li:first-child { border-top: none; }
.alert-list a { display: flex; justify-content: space-between; align-items: center;
  padding: 8px 2px; gap: 8px; color: var(--ink); }
.alert-list a:hover { color: var(--petrol); }
.al-name { font-weight: 500; font-size: 12.5px; flex: 1; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.al-info { font-size: 11.5px; font-weight: 600; flex-shrink: 0; color: var(--ink-soft); }
.al-more a { font-size: 11px; color: var(--teal); font-weight: 600; }

/* ---------- Relatórios: linhas coloridas + badge de situação ---------- */
.sit-badge { display: inline-block; padding: 2px 8px; border-radius: 999px;
  font-size: 11px; font-weight: 600; }
tr.row-vencido td { background: rgba(192,57,43,.04); }
tr.row-vencido:hover td { background: rgba(192,57,43,.09); }
tr.row-iminente td { background: rgba(245,166,35,.04); }
tr.row-iminente:hover td { background: rgba(245,166,35,.09); }
tr.row-sem-plano td { background: rgba(160,82,45,.04); }
tr.row-sem-plano:hover td { background: rgba(160,82,45,.08); }

/* ---------- Relatórios: form-grid no modal ---------- */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; }
@media (max-width: 560px) { .form-grid { grid-template-columns: 1fr; } }
.form-grid small { display: block; font-size: 11px; color: var(--ink-soft); margin-top: 3px; line-height: 1.4; }

/* Uso do plano dentro do formulário de avaliação */
.plan-use-list { display:flex; flex-direction:column; gap:6px; margin-top:4px; }
.plan-use { display:flex; align-items:center; gap:8px; padding:7px 10px; border:1px solid #e2eae9;
            border-radius:8px; cursor:pointer; font-size:13px; background:#fff; transition:border-color .15s, background .15s; }
.plan-use:hover { border-color:var(--petrol); }
.plan-use input { accent-color:var(--petrol); width:15px; height:15px; margin:0; }
.plan-use:has(input:checked) { border-color:var(--petrol); background:rgba(42,167,167,.07); }
.plan-use-name { flex:1; }
.plan-use-qty { font-size:11px; color:var(--ink-soft); white-space:nowrap; }
.plan-use--out .plan-use-qty { color:var(--danger); }

/* ---------- Relatórios: seções recolhíveis ---------- */
/* <details class="sec"> — cabeçalho sempre visível, corpo abre sob demanda. */
.sec { padding: 0; }
.sec > summary {
  list-style: none; cursor: pointer; user-select: none;
  display: flex; align-items: center; gap: 10px;
  padding: 15px 18px; border-radius: inherit;
  transition: background .13s ease;
}
.sec > summary::-webkit-details-marker { display: none; }
.sec > summary:hover { background: rgba(42,167,167,.05); }
.sec > summary:focus-visible { outline: 2px solid var(--teal); outline-offset: -2px; }
.sec-chevron {
  flex-shrink: 0; width: 20px; height: 20px; display: grid; place-items: center;
  color: var(--ink-soft); font-size: 11px; transition: transform .18s ease;
}
.sec[open] > summary .sec-chevron { transform: rotate(90deg); }
.sec-title {
  font-family: var(--font-serif); font-size: 15px; font-weight: 600;
  color: var(--petrol); flex: 1; min-width: 0;
}
.sec-meta { font-size: 12px; color: var(--ink-soft); font-weight: 400; }
.sec-pill {
  flex-shrink: 0; font-size: 11px; font-weight: 700; padding: 2px 9px;
  border-radius: 999px; background: var(--line); color: var(--ink-soft);
}
.sec-pill--alert { background: #fde8e8; color: #c0392b; }
.sec-body { padding: 0 18px 18px; border-top: 1px solid var(--line); padding-top: 15px; }
.sec-body > .sec-desc { font-size: 12px; color: var(--ink-soft); margin: -4px 0 14px; }
/* Ações no cabeçalho não devem abrir/fechar a seção */
.sec-acts { display: flex; gap: 8px; flex-shrink: 0; }

/* Impressão: tudo aberto, sem setas */
@media print {
  .sec > summary { background: none; }
  .sec-chevron { display: none; }
  .sec .sec-body { display: block !important; }
}

/* ---------- Relatórios: card de alerta clicável ---------- */
.alert-head-link {
  display: flex; align-items: center; gap: 8px; width: 100%;
  margin: -16px -18px 6px; padding: 16px 18px 8px;
  color: inherit; border-radius: 12px 14px 0 0;
  transition: background .13s ease;
  background: none; border: 0; cursor: pointer; text-align: left; font: inherit;
}
.alert-head-link:hover { background: rgba(42,167,167,.06); }
.alert-head-link:hover h3 { text-decoration: underline; }
.alert-head-link:focus-visible { outline: 2px solid var(--teal); outline-offset: -2px; }
.alert-go { font-size: 13px; color: var(--teal); flex-shrink: 0; opacity: 0; transition: opacity .13s ease; }
.alert-head-link:hover .alert-go { opacity: 1; }

/* Estrelas ficam à direita agora que o cartão de meta não tem mais ícone */
.goal-head .goal-stars { margin-left: auto; }
/* Marcador de score reduzido por atraso (substitui o emoji de relógio) */
.score-late { font-size: 11px; opacity: .8; }
/* Botão que se comporta como link dentro das listas de alerta */
.linklike { background: none; border: 0; padding: 0; font: inherit; cursor: pointer;
  font-size: 11px; color: var(--teal); font-weight: 600; }
.linklike:hover { text-decoration: underline; }
.al-more .linklike { display: block; padding: 8px 0 2px; }

/* ---------- navegação: ícones, trilha, busca ao vivo, sino, paginação ---------- */
.ic { flex-shrink: 0; }
.foot-link { color: #7fa8a7; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; }
.foot-link:hover { color: #fff; background: rgba(255,255,255,.08); }
.foot-link .ic { width: 16px; height: 16px; }
.nav-toggle { display: none; border: 0; background: var(--petrol); border-radius: 6px; width: 40px; height: 40px; place-items: center; color: #fff; cursor: pointer; flex-shrink: 0; }
.sidebar-backdrop { display: none; }
.topbar-search .ico .ic { width: 17px; height: 17px; display: block; }
.topbar-search input[type=search] { border: 0; box-shadow: none; padding: 0; border-radius: 0; }
.topbar-search input[type=search]::-webkit-search-cancel-button { -webkit-appearance: none; }
.kbd-hint { font: 700 10px/1 var(--font-sans); color: var(--ink-soft); border: 1px solid var(--line); border-radius: 6px; padding: 4px 7px; background: #fff; }
.live-results { position: absolute; top: calc(100% + 8px); left: 0; right: 0; background: #fff; border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 24px 50px -24px rgba(14,58,64,.5); overflow: hidden; z-index: 40; max-height: 60vh; overflow-y: auto; animation: rise .22s var(--ease) both; }
.lr-item { display: flex; flex-direction: column; gap: 1px; padding: 10px 16px; color: var(--ink); border-top: 1px solid var(--line); }
.lr-item:first-child { border-top: 0; }
.lr-item b { font-size: 13px; }
.lr-item small { color: var(--ink-soft); font-size: 11px; }
.lr-item:hover, .lr-item.on { background: var(--teal-soft); }
.lr-all { display: block; padding: 10px 16px; font-size: 12px; font-weight: 700; color: var(--teal-deep); background: var(--sand); border-top: 1px solid var(--line); }
.lr-empty { padding: 12px 16px; color: var(--ink-soft); font-size: 12px; }
.bell-wrap { position: relative; }
.bell { position: relative; border: 1px solid var(--line); background: #fff; width: 40px; height: 40px; border-radius: 8px; display: grid; place-items: center; color: var(--ink-soft); cursor: pointer; transition: border-color .18s var(--ease), transform .18s var(--ease); }
.bell:hover { border-color: var(--teal-line); transform: translateY(-1px); }
.bell.has { color: var(--petrol); border-color: var(--teal-line); }
.bell .ic { width: 18px; height: 18px; }
.bell.has .ic { animation: bell-swing 2.6s var(--ease) 1.2s 2; transform-origin: top center; }
@keyframes bell-swing { 0%,100% { transform: rotate(0) } 15% { transform: rotate(14deg) } 30% { transform: rotate(-12deg) } 45% { transform: rotate(8deg) } 60% { transform: rotate(-4deg) } }
.bell-count { position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--danger); color: #fff; font-size: 10px; font-weight: 800; display: grid; place-items: center; border: 2px solid var(--sand); }
.bell-menu { position: absolute; right: 0; top: calc(100% + 10px); width: 300px; background: #fff; border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 24px 50px -24px rgba(14,58,64,.5); z-index: 40; overflow: hidden; animation: rise .22s var(--ease) both; }
.bell-head { padding: 10px 16px; font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); background: var(--sand); border-bottom: 1px solid var(--line); font-weight: 700; }
.bell-item { display: flex; align-items: center; gap: 12px; padding: 12px 16px; color: var(--ink); border-top: 1px solid var(--line); }
.bell-item:first-of-type { border-top: 0; }
.bell-item b { font-family: var(--font-display); font-weight: 800; font-size: 24px; min-width: 32px; text-align: center; color: var(--ink-soft); line-height: 1; }
.bell-item.warn b { color: var(--danger); }
.bell-item:hover { background: var(--teal-soft); }
.bell-empty { padding: 12px 16px; color: var(--ok); font-size: 12px; }
.crumbs { margin: -4px 0 14px; font-size: 11px; letter-spacing: .02em; }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 4px; padding: 0; }
.crumbs li + li::before { content: ''; display: inline-block; width: 14px; height: 1px; background: var(--teal-line); margin: 0 8px 3px 4px; }
.crumbs a { color: var(--ink-soft); }
.crumbs a:hover { color: var(--petrol); text-decoration: underline; }
.crumbs [aria-current] span { color: var(--petrol); font-weight: 700; }
.pager { display: flex; align-items: center; justify-content: center; gap: 14px; padding: 16px 0 4px; }
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-wrap > table { min-width: 100%; }

/* diálogo de confirmação */
.confirm-backdrop { position: fixed; inset: 0; background: rgba(14,38,42,.5); backdrop-filter: blur(3px); display: none; place-items: center; z-index: 100; padding: 20px; }
.confirm-backdrop.on { display: grid; }
.confirm-box { background: #fff; border-radius: 10px; padding: 24px 26px; width: min(440px, 100%); box-shadow: 0 40px 80px -30px rgba(0,0,0,.45); animation: pop .22s var(--ease); }
@keyframes pop { from { opacity: 0; transform: translateY(10px) scale(.97); } }
.confirm-box h3 { font-size: 22px; color: var(--petrol); margin-bottom: 8px; }
.confirm-box p { color: var(--ink-soft); line-height: 1.55; margin-bottom: 20px; }
.confirm-actions { display: flex; justify-content: flex-end; gap: 8px; }
.btn.danger { background: var(--danger); color: #fff; border-color: var(--danger); }

/* ---------- celular / tablet ---------- */
@media (max-width: 900px) {
  :root { --band: 56px; }
  .nav-toggle { display: grid; }
  .sidebar { padding: 0 14px; gap: 10px; flex-wrap: wrap; align-content: flex-start; height: var(--band); overflow: hidden; transition: height .26s var(--ease); }
  .brand { height: var(--band); border-right: 0; padding-right: 0; }
  .brand-logo { height: 32px; }
  .sidebar nav { order: 3; flex: 1 1 100%; flex-direction: column; height: auto; overflow: visible; padding: 8px 0 6px; counter-reset: nav; }
  .sidebar nav a { height: 46px; padding: 0 8px; font-size: 14px; border-radius: 6px; }
  .sidebar nav a.on::after { left: auto; right: 0; top: 10px; bottom: 10px; height: auto; width: 3px; }
  .sidebar nav a.on::before { inset: 6px 0; }
  .nav-sep { width: auto; height: 1px; margin: 6px 8px; }
  .sidebar-foot { order: 2; margin-left: auto; border-left: 0; padding-left: 0; height: var(--band); }
  .user-chip > div:not(.avatar), .foot-actions .logout-form { display: none; }
  .sidebar::after { display: none; }
  body.nav-open .sidebar { height: auto; bottom: 0; overflow: auto; }
  body.nav-open .user-chip > div:not(.avatar), body.nav-open .foot-actions .logout-form { display: block; }
  body.nav-open .sidebar-foot { order: 4; flex: 1 1 100%; height: auto; padding: 12px 0 16px; border-top: 1px solid rgba(255,255,255,.1); margin: 0; }
  .sidebar-backdrop { display: block; position: fixed; inset: 0; background: rgba(14,38,42,.45); z-index: 55; }
  .sidebar-backdrop[hidden] { display: none; }
  body.nav-open { overflow: hidden; }
  .topbar { padding: 10px 14px; gap: 10px; }
  .topbar-search { flex: 1; max-width: none; width: auto; padding: 8px 12px; }
  .kbd-hint { display: none; }
  .main { padding: 14px 14px 70px; }
  .page-head { flex-direction: column; align-items: flex-start; gap: 10px; }
  .page-head h1 { font-size: 26px; }
  .grid.cols-5, .grid.cols-4, .grid.cols-3, .grid.cols-2, .grid.cols-4-alerts { grid-template-columns: 1fr 1fr; }
  table th, table td { white-space: nowrap; }
  .bell-menu { position: fixed; left: 14px; right: 14px; top: calc(var(--band) + 54px); width: auto; }
}
@media (max-width: 560px) {
  .grid.cols-5, .grid.cols-4, .grid.cols-3, .grid.cols-2, .grid.cols-4-alerts { grid-template-columns: 1fr; }
  .card { padding: 16px; }
  .filter-bar .field { min-width: 100%; }
  .live-results { position: fixed; left: 10px; right: 10px; top: calc(var(--band) + 54px); }
}

/* Campo de senha com ações (mostrar / gerar) */
.pw-field{display:flex;gap:6px;align-items:stretch}
.pw-field input{flex:1;min-width:0}
.pw-field .btn{white-space:nowrap}
.field > small.muted{display:block;margin-top:5px;font-size:11.5px;line-height:1.4}

/* Trilha de auditoria na ficha do paciente */
.audit-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;max-height:360px;overflow:auto}
.audit-list li{display:grid;grid-template-columns:112px 1fr;gap:10px;font-size:13px;padding:6px 0;border-bottom:1px dashed var(--line)}
.audit-list li:last-child{border-bottom:0}
.audit-list time{color:var(--ink-soft);font-size:12px;white-space:nowrap}
.audit-list small{display:block;color:var(--ink-soft);font-size:11.5px;margin-top:2px}
.nowrap{white-space:nowrap}
@media (max-width:560px){.audit-list li{grid-template-columns:1fr}}
.imp-stat--warn { border-color: rgba(230,160,40,.35); }
.imp-stat--warn .imp-stat-n { color: #9a6a10; }
.imp-row-warn   { background: rgba(230,160,40,.06); }
.imp-badge--warn { background: rgba(230,160,40,.18); color: #7a5208; }
.imp-row-why { font-size: 11px; color: var(--ink-soft); white-space: normal; max-width: 280px; margin-top: 3px; line-height: 1.35; }
.reach-excluded { margin-top: 8px; font-size: 12px; }
.reach-excluded summary { cursor: pointer; font-weight: 600; }
.reach-excluded .reach-group { margin-top: 8px; }
.reach-excluded ul { margin: 4px 0 0; padding-left: 18px; columns: 2; }
.reach-excluded li { break-inside: avoid; }