:root {
  --bg: #0a0e13;
  --panel: #11171f;
  --panel2: #171f29;
  --line: #233040;
  --text: #dbe5ef;
  --muted: #8a9bb0;
  --accent: #14b8a6;
  --accent2: #0d9488;
  --warn: #fbbf24;
  --rail-w: 64px;
  color-scheme: dark;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; margin: 0; }
body {
  background: var(--bg); color: var(--text);
  font: 13px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  display: flex; flex-direction: column; overflow: hidden;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) 0 env(safe-area-inset-left);
}
button, select, input, a.btn {
  font: inherit; color: var(--text); background: var(--panel2);
  border: 1px solid var(--line); border-radius: 8px; padding: 6px 10px;
}
button, a.btn { cursor: pointer; white-space: nowrap; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
button:hover, a.btn:hover { border-color: var(--accent); }
button.active, button.primary { background: var(--accent2); border-color: var(--accent); color: #fff; }
button:disabled { opacity: .45; cursor: default; }
svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.hidden { display: none !important; }
body:not(.has-vol) .needs-vol { display: none !important; }
.spacer { flex: 1; }
.muted { color: var(--muted); }
.small { font-size: 12px; }

/* ---------------------------------------------------------------- barra superior */
#topbar {
  display: flex; align-items: center; gap: 8px; padding: 6px 10px; min-height: 48px;
  background: var(--panel); border-bottom: 1px solid var(--line);
}
.brand { display: flex; align-items: center; gap: 7px; font-size: 15px; margin-right: 4px; }
.brand b { color: var(--accent); }
.brand img.clinic-logo { height: 28px; max-width: 120px; object-fit: contain; border-radius: 4px; }
.logo { width: 24px; height: 24px; border-radius: 6px; background: var(--accent2); display: inline-block; flex: none;
  background-image: radial-gradient(circle at 50% 38%, #fff 3px, transparent 4px); }
.patient { min-width: 0; line-height: 1.15; }
.patient b { display: block; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 260px; }
.patient small { color: var(--muted); font-size: 11px; white-space: nowrap; }
.seg { display: inline-flex; background: var(--panel2); border: 1px solid var(--line); border-radius: 10px; padding: 2px; }
.seg button { border: 0; background: none; border-radius: 8px; padding: 5px 14px; }
.seg button.active { background: var(--accent2); color: #fff; }
button.icon { padding: 6px; }
#series-select { max-width: 200px; }

/* ---------------------------------------------------------------- barra de controles */
#subbar, #stepbar {
  display: flex; align-items: center; gap: 8px; padding: 5px 10px; overflow-x: auto; scrollbar-width: thin;
  background: var(--panel); border-bottom: 1px solid var(--line); white-space: nowrap; min-height: 42px;
}
#stepbar { background: #0e141b; font-size: 12px; min-height: 38px; }
#stepbar .hint { color: var(--muted); white-space: normal; min-width: 220px; max-width: 520px; line-height: 1.25; }
#stepbar .info { color: var(--text); }
#stepbar button { padding: 4px 9px; font-size: 12px; }
#stepbar select, #stepbar input { padding: 3px 6px; font-size: 12px; }
#stepbar input.tooth { width: 58px; }
.ctl { display: inline-flex; align-items: center; gap: 4px; }
.ctl > .lbl { font-size: 10px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin-right: 2px; }
.ctl .val { min-width: 34px; text-align: center; font-variant-numeric: tabular-nums; color: var(--accent); font-weight: 600; }
.ctl button { padding: 2px 9px; font-size: 15px; line-height: 1.2; }
.ctl select { padding: 3px 6px; }
.vsep { width: 1px; align-self: stretch; background: var(--line); margin: 2px 4px; flex: none; }
.steps { display: inline-flex; gap: 4px; }
.steps button { padding: 4px 10px; border-radius: 999px; font-size: 12px; }
.steps button i { font-style: normal; display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--line); font-size: 11px; }
.steps button.active i { background: #fff; color: var(--accent2); }
.steps button.done i { background: var(--accent); color: #fff; }

/* ---------------------------------------------------------------- cuerpo */
#body { flex: 1; display: flex; min-height: 0; }
#rail {
  width: var(--rail-w); background: var(--panel); border-right: 1px solid var(--line);
  display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 4px; overflow-y: auto; overflow-x: hidden; flex: none;
}
#rail button { flex-direction: column; gap: 2px; width: 56px; padding: 6px 2px; border-color: transparent; background: none; font-size: 10px; color: var(--muted); }
#rail button:hover { color: var(--text); background: var(--panel2); }
#rail button.active { background: color-mix(in srgb, var(--accent) 22%, transparent); color: #fff; border-color: var(--accent); }
.rail-sep { width: 36px; height: 1px; background: var(--line); margin: 4px 0; }

#stage { flex: 1; position: relative; min-width: 0; display: grid; gap: 2px; background: #000; }
.pane { position: relative; display: flex; min-width: 0; min-height: 0; }
.pane > .vp { flex: 1; }
.vp { position: relative; overflow: hidden; background: #000; min-width: 0; min-height: 0; outline: 1px solid #18222d; }
.vp.active { outline: 1px solid var(--accent); z-index: 1; }
.vp canvas { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; display: block;
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; }
.vp { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.cross-grid { flex: 1; display: grid; gap: 2px; min-width: 0; min-height: 0; }

.layout-mpr { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
.layout-single { grid-template-columns: 1fr; grid-template-rows: 1fr; }
/* Dental (como OnDemand): Axial | Transversales / Panorámica | 3D */
.layout-dental {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-areas: "ax cross" "pano v3d";
}
.layout-dental .pane[data-pane="axial"] { grid-area: ax; }
.layout-dental .pane[data-pane="pano"] { grid-area: pano; }
.layout-dental .pane[data-pane="cross"] { grid-area: cross; }
.layout-dental .pane[data-pane="v3d"] { grid-area: v3d; }

/* deslizador de cortes (dedo) */
.vp-slider { position: absolute; right: 3px; top: 34px; bottom: 34px; width: 20px; z-index: 2; cursor: ns-resize; touch-action: none; }
.vp-slider::before { content: ""; position: absolute; left: 9px; top: 0; bottom: 0; width: 2px; background: rgba(148,163,184,.35); border-radius: 2px; }
.vp-thumb { position: absolute; left: 3px; width: 14px; height: 14px; margin-top: -7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px rgba(20,184,166,.25); }

#view-tabs { display: none; }
#status {
  display: flex; justify-content: space-between; padding: 3px 10px; font-size: 12px;
  color: var(--muted); background: var(--panel); border-top: 1px solid var(--line);
}

/* ---------------------------------------------------------------- portada */
#landing { position: fixed; inset: 48px 0 24px 0; display: flex; align-items: center; justify-content: center; padding: 16px; }
body.has-vol #landing { display: none; }
.drop { max-width: 720px; width: 100%; text-align: center; padding: 44px 24px; border: 2px dashed var(--line); border-radius: 18px; background: var(--panel); }
.drop.over { border-color: var(--accent); background: #0f2a2a; }
.drop .big { font-size: 21px; font-weight: 600; margin-bottom: 6px; }
.drop p { color: var(--muted); }
.drop .small { font-size: 12px; margin-top: 18px; }
.row { display: flex; gap: 6px; flex-wrap: wrap; }
.row.center { justify-content: center; margin-top: 14px; }
.row.end { justify-content: flex-end; margin-top: 10px; }

/* ---------------------------------------------------------------- menús / avisos */
.popover {
  position: fixed; z-index: 60; min-width: 220px; max-width: 92vw; background: var(--panel); border: 1px solid var(--line);
  border-radius: 12px; padding: 6px; box-shadow: 0 12px 30px rgba(0,0,0,.5); display: flex; flex-direction: column; gap: 2px;
}
.popover > button, .popover > a { justify-content: flex-start; border: 0; background: none; padding: 8px 10px; border-radius: 8px; color: var(--text); text-decoration: none; display: flex; gap: 8px; align-items: center; }
.popover > button:hover, .popover > a:hover { background: var(--panel2); }
.popover hr { border: 0; border-top: 1px solid var(--line); margin: 4px 0; width: 100%; }
.pop-label { font-size: 10px; text-transform: uppercase; color: var(--muted); padding: 2px 10px; letter-spacing: .06em; }
.pop-row { display: flex; flex-wrap: wrap; gap: 4px; padding: 2px 8px 4px; }
.pop-row button { padding: 4px 8px; font-size: 12px; }
.popover .tools-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; padding: 4px; }
.popover .tools-row button { flex-direction: column; font-size: 10px; padding: 6px 2px; gap: 2px; }
#ctxmenu { min-width: 240px; }
#toast {
  position: fixed; left: 50%; bottom: 40px; transform: translateX(-50%); z-index: 70; background: #1e293b; color: #fff;
  padding: 10px 16px; border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,.4); max-width: 90vw; font-size: 13px;
}

#progress { position: fixed; inset: 0; background: rgba(0,0,0,.55); display: flex; align-items: center; justify-content: center; z-index: 80; }
#progress .box { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 18px 22px; width: min(420px, 90vw); }
#progress .bar { height: 8px; background: var(--panel2); border-radius: 4px; overflow: hidden; margin-top: 10px; }
#progress .bar i { display: block; height: 100%; width: 0; background: var(--accent); transition: width .15s; }
#progress .progress-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
#progress #progress-text { color: var(--muted); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#progress #progress-pct { font-size: 26px; color: var(--accent); font-variant-numeric: tabular-nums; min-width: 64px; text-align: right; }
#progress .bar { height: 10px; }
#progress .bar.indeterminate i { width: 35% !important; animation: av-indet 1.2s ease-in-out infinite; }
@keyframes av-indet { 0% { margin-left: -35%; } 100% { margin-left: 100%; } }

dialog { background: var(--panel); color: var(--text); border: 1px solid var(--line); border-radius: 12px; padding: 0; width: min(860px, 94vw); }
dialog::backdrop { background: rgba(0,0,0,.6); }
.dlg { padding: 16px 18px; display: flex; flex-direction: column; gap: 8px; }
.dlg h2 { margin: 0 0 6px; font-size: 16px; }
.dlg input { flex: 1; min-width: 120px; }
.results { max-height: 50vh; overflow: auto; border: 1px solid var(--line); border-radius: 8px; }
.results table { width: 100%; border-collapse: collapse; font-size: 12px; }
.results th { position: sticky; top: 0; background: var(--panel2); text-align: left; padding: 6px; text-transform: uppercase; font-size: 11px; color: var(--muted); }
.results td { padding: 6px; border-top: 1px solid var(--line); }
.results tr:hover td { background: #102330; }
.copy { display: flex; gap: 6px; flex-wrap: wrap; }
.copy input { flex: 1; }

/* ---------------------------------------------------------------- teléfono / pantallas chicas */
@media (max-width: 820px) {
  #topbar { padding: 4px 6px; gap: 6px; min-height: 44px; }
  .brand-name, #status, .share-btn span { display: none; }
  .brand { margin: 0; }
  .patient b { max-width: 34vw; font-size: 12px; }
  .patient small { display: none; }
  .seg button { padding: 5px 10px; }
  #subbar { padding: 4px 6px; gap: 6px; }
  #body { flex-direction: column; }
  #stage { grid-template-columns: 1fr !important; grid-template-rows: 1fr !important; grid-template-areas: none !important; }
  #stage .pane { grid-area: 1 / 1 !important; }
  #stage .pane:not(.focus) { display: none; }
  #rail {
    order: 3; width: auto; height: auto; flex-direction: row; overflow-x: auto; overflow-y: hidden; border-right: 0; border-top: 1px solid var(--line);
    padding: 4px 4px calc(4px + env(safe-area-inset-bottom)); justify-content: flex-start;
  }
  #rail button { width: 58px; flex: none; padding: 6px 2px; }
  .rail-sep { width: 1px; height: 32px; margin: 0 4px; flex: none; }
  #view-tabs { display: flex; gap: 4px; padding: 4px 6px; background: var(--panel); border-top: 1px solid var(--line); overflow-x: auto; }
  #view-tabs button { flex: 1; justify-content: center; padding: 7px 6px; font-size: 13px; }
  #view-tabs button.active { background: var(--accent2); color: #fff; }
  .vp-slider { width: 30px; right: 0; }
  .vp-slider::before { left: 14px; }
  .vp-thumb { left: 6px; width: 18px; height: 18px; margin-top: -9px; }
  #landing { inset: 44px 0 0 0; }

  /* "Todas": vistas apiladas a la vez (como OHIF en el teléfono) */
  #stage.show-all .pane { grid-area: auto !important; }
  #stage.show-all .pane[data-pane="v3d"] { display: none !important; }
  #stage.show-all.layout-mpr { grid-template-rows: repeat(3, minmax(0, 1fr)) !important; }
  #stage.show-all.layout-dental { grid-template-rows: minmax(0, 1fr) minmax(0, .75fr) minmax(0, 1.25fr) !important; }
  #stage.show-all .vp-slider { top: 24px; bottom: 24px; }
  #stage.show-all .pane-head { height: 22px; }
}

/* asa para arrastrar la vista al informe (pestaña aparte) */
.vp-grab {
  position: absolute; top: 6px; right: 30px; z-index: 3; width: 26px; height: 26px; border-radius: 7px;
  display: none; place-items: center; cursor: grab; background: rgba(13,148,136,.9); color: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,.4);
}
.vp-grab svg { width: 16px; height: 16px; }
.vp:hover .vp-grab, body.report-linked .vp-grab { display: grid; }
.vp-grab:active { cursor: grabbing; }
@media (max-width: 820px) { body.report-linked .vp-grab { width: 32px; height: 32px; } }
/* herramienta "Al informe": solo con el informe conectado */
body:not(.report-linked) .report-tool { display: none !important; }
#rail .report-tool.active { background: rgba(250,204,21,.18); border-color: var(--warn); }
/* ventana Transversal: encabezado único + asa "Todos al informe" */
.pane[data-pane="cross"] { flex-direction: column; }
.pane-head { display: flex; align-items: center; gap: 10px; height: 26px; padding: 0 8px; background: #0e141b; border-bottom: 1px solid var(--line); font-size: 12px; color: #5eead4; flex: none; }
.pane-grab { display: none; cursor: grab; background: var(--accent2); color: #fff; border-radius: 6px; padding: 1px 9px; font-size: 11px; }
body.report-linked .pane-grab { display: inline-block; }
/* deshacer al trazar la curva (botón grande sobre el axial) */
.vp-undo {
  position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); z-index: 3;
  padding: 8px 16px; font-size: 14px; font-weight: 600; border-radius: 999px;
  background: rgba(17,23,31,.92); border: 1px solid var(--warn); color: #fff; box-shadow: 0 4px 14px rgba(0,0,0,.5);
}
.vp-undo:hover { background: var(--warn); color: #111; }