:root{color-scheme:light;box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}html{scroll-padding-top:env(safe-area-inset-top,0px)}body{margin:0;padding:0;font:14px -apple-system,BlinkMacSystemFont,sans-serif;background:#fff;color:#000}img{max-width:100%}[hidden]:not([hidden=until-found i]){display:none!important}
/* Visor anatómico: escenario 3D a sangre + panel clínico lateral (abajo en móvil). Tema oscuro único, como una sala de endoscopia. */
:root{
  --bg:#0e1316; --stage-a:#1b242a; --stage-b:#0a0e10;
  --panel:#141b1f; --raised:#1b2429; --line:#26333a;
  --fg:#e6ecee; --muted:#93a3aa; --accent:#86cfd9;
  --g0:#7fc4a0; --g1:#e3c46b; --g2:#ec9b55; --g3:#e2664f; --g4:#c13a50;
  --f-display:"Literata", Georgia, "Times New Roman", serif;
  --f-body:"IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-mono:"IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;
  color-scheme:dark;
}
html,body{height:100%}
[hidden]{display:none!important}
body{background:var(--bg);color:var(--fg);font-family:var(--f-body);font-size:14px;line-height:1.5}
*{box-sizing:border-box}
.app{display:grid;grid-template-columns:minmax(0,1fr) 384px;height:100%}
.stage{position:relative;min-height:0;min-width:0;overflow:hidden;
  background:radial-gradient(120% 90% at 40% 35%,var(--stage-a),var(--stage-b))}
#gl{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none;outline:none}
.hud{position:absolute;top:12px;left:max(12px,env(safe-area-inset-left,0px));display:flex;gap:8px;align-items:center;flex-wrap:wrap;pointer-events:none;z-index:3}
.chip{font-family:var(--f-mono);font-size:11.5px;letter-spacing:.04em;text-transform:uppercase;padding:5px 9px;border-radius:999px;background:rgba(10,14,16,.72);border:1px solid var(--line);color:var(--fg);display:inline-flex;align-items:center;gap:7px;backdrop-filter:blur(6px)}
.dot{width:8px;height:8px;border-radius:50%;background:var(--g0)}
.hint{position:absolute;bottom:12px;left:max(12px,env(safe-area-inset-left,0px));right:max(12px,env(safe-area-inset-right,0px));font-size:12px;color:var(--muted);pointer-events:none;z-index:3;text-shadow:0 1px 2px #000}
.tools{position:absolute;top:12px;right:max(12px,env(safe-area-inset-right,0px));display:flex;flex-direction:column;gap:6px;z-index:4}
.iconbtn{width:38px;height:38px;border-radius:10px;border:1px solid var(--line);background:rgba(10,14,16,.72);color:var(--fg);font:500 18px/1 var(--f-mono);cursor:pointer;display:grid;place-items:center}
.iconbtn:hover{border-color:var(--accent)}
.iconbtn:focus-visible,.seg button:focus-visible,.btn:focus-visible,input:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.tag{position:absolute;left:0;top:0;font-size:11.5px;color:var(--fg);white-space:nowrap;pointer-events:none;z-index:2;display:flex;align-items:center;gap:6px;opacity:.92}
.tag::before{content:"";width:26px;height:1px;background:var(--accent)}
.tag span{background:rgba(10,14,16,.7);padding:2px 7px;border-radius:4px;border:1px solid var(--line)}
.scope{position:absolute;inset:0;pointer-events:none;z-index:1;background:radial-gradient(circle closest-side,transparent 93%,#000 94%)}
.scope-read{position:absolute;bottom:42px;right:max(14px,env(safe-area-inset-right,0px));font-family:var(--f-mono);font-size:12px;color:#d9f2f5;z-index:3;text-align:right;pointer-events:none}
.scope-read b{display:block;font-size:22px;font-weight:500}
.loader{position:absolute;inset:0;display:grid;place-items:center;z-index:5;font-family:var(--f-mono);font-size:12.5px;color:var(--muted);background:rgba(10,14,16,.55)}

.panel{min-width:0;overflow:auto;background:var(--panel);border-left:1px solid var(--line);
  padding-block:24px 28px;padding-left:22px;padding-right:max(22px,env(safe-area-inset-right,0px));display:flex;flex-direction:column;gap:22px}
.eyebrow{font-family:var(--f-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
h1{font-family:var(--f-display);font-weight:650;font-size:30px;line-height:1.1;margin:6px 0 6px;text-wrap:balance}
.meta{color:var(--muted);font-size:13px;font-variant-numeric:tabular-nums}
.sec{display:flex;flex-direction:column;gap:10px}
.sec h2{font-size:11.5px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);margin:0}
.seg{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:3px;gap:3px}
.seg button{appearance:none;border:0;background:transparent;color:var(--muted);font:500 13px var(--f-body);padding:9px 4px;border-radius:7px;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:6px;min-width:0}
.seg button:hover{color:var(--fg)}
.seg button[aria-pressed="true"]{background:var(--raised);color:var(--fg);box-shadow:inset 0 0 0 1px var(--line)}
.seg .dot{width:7px;height:7px}
.card{background:var(--raised);border:1px solid var(--line);border-radius:12px;padding:16px 16px 14px;display:flex;flex-direction:column;gap:10px}
.card h3{font-family:var(--f-display);font-weight:500;font-size:20px;margin:0;line-height:1.2;text-wrap:balance}
.card p{margin:0;color:#c9d3d7}
.card ul{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:5px;color:#c9d3d7}
.card .sub{font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);font-weight:600}
.sev{height:4px;border-radius:2px;background:var(--line);overflow:hidden}
.sev i{display:block;height:100%;width:0;transition:width .35s ease,background .35s}
.range{display:flex;flex-direction:column;gap:6px}
.range input{width:100%;accent-color:var(--accent)}
.range .row{display:flex;justify-content:space-between;font-family:var(--f-mono);font-size:11.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.check{display:flex;align-items:center;gap:10px;cursor:pointer;color:#c9d3d7}
.check input{width:16px;height:16px;accent-color:var(--accent)}
.btn{appearance:none;border:1px solid var(--line);background:transparent;color:var(--fg);font:500 13px var(--f-body);padding:9px 12px;border-radius:9px;cursor:pointer;align-self:flex-start}
.btn:hover{border-color:var(--accent)}
.ctrl-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.ctrl-row .btn{align-self:auto}
.btn.primary{background:var(--accent);border-color:var(--accent);color:#0b1a1d;font-weight:600}
.btn.primary:hover{filter:brightness(1.08)}
.seg.sm{grid-auto-columns:auto;margin-left:auto}
.seg.sm button{padding:7px 10px;font-size:12.5px}
.live{display:flex;flex-direction:column;gap:6px}
.live-top{display:flex;justify-content:space-between;gap:10px;align-items:baseline;font-weight:500}
.lanes{display:flex;flex-direction:column;gap:4px}
.lane{appearance:none;display:grid;grid-template-columns:58px minmax(0,1fr) 50px;align-items:center;gap:10px;background:none;border:0;color:var(--muted);font:500 12.5px var(--f-body);padding:6px;border-radius:8px;cursor:pointer;text-align:left}
.lane:hover{color:var(--fg)}
.lane[aria-pressed="true"]{background:var(--bg);color:var(--fg);box-shadow:inset 0 0 0 1px var(--line)}
.lane:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.lane .nm{display:flex;align-items:center;gap:6px}
.track{position:relative;height:12px;border-radius:6px;background:var(--bg);border:1px solid var(--line)}
.lane[aria-pressed="true"] .track{background:var(--panel)}
.zone{position:absolute;top:0;bottom:0;opacity:.4;border-radius:3px}
.mark{position:absolute;top:-3px;bottom:-3px;width:2px;margin-left:-1px;background:var(--muted);opacity:.7}
.mark.sten{width:4px;margin-left:-2px;background:var(--fg);opacity:.85}
.bdot{position:absolute;top:50%;left:0;width:12px;height:12px;border-radius:50%;transform:translate(-50%,-50%);box-shadow:0 0 0 2px var(--panel)}
.lt{font-family:var(--f-mono);font-size:12px;font-variant-numeric:tabular-nums;text-align:right}
.lane .lt{opacity:.6}
.lane.done .lt{opacity:1;color:var(--fg)}
.axis{display:grid;grid-template-columns:58px minmax(0,1fr) 50px;gap:10px;padding:0 6px;font-family:var(--f-mono);font-size:10.5px;color:var(--muted)}
.ax{position:relative;display:flex;justify-content:space-between}
.ratio{margin:0;font-size:13px;color:var(--fg)}
.seg.grid3{grid-auto-flow:row;grid-template-columns:repeat(3,minmax(0,1fr))}
.mx{margin:0;font-size:13px;padding:9px 11px;border-radius:8px;background:var(--bg);border:1px solid var(--line);color:#c9d3d7}
.mx::before{content:"En México · ";color:var(--accent);font-weight:600}
.note{font-size:12px;color:var(--muted);border-top:1px solid var(--line);padding-top:14px;margin-top:auto}
.note p{margin:0 0 6px}
@media (max-width:820px){
  .app{grid-template-columns:minmax(0,1fr);grid-template-rows:62vh auto;grid-template-rows:62svh auto;height:auto}
  .panel{border-left:0;border-top:1px solid var(--line);overflow:visible;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
  h1{font-size:26px}
}
@media (prefers-reduced-motion:reduce){.sev i{transition:none}}
/* Antes estilos inline en index.html */
.dot.g0{background:var(--g0)}.dot.g1{background:var(--g1)}.dot.g2{background:var(--g2)}.dot.g3{background:var(--g3)}.dot.g4{background:var(--g4)}
.m0{margin:0}
.meta.fg{color:var(--fg)}
/* Créditos al pie del panel: tarjeta con borde degradado (acento aqua → naranja de los grados) */
.credits{position:relative;border-radius:14px;padding:16px;background:
  linear-gradient(var(--raised),var(--raised)) padding-box,
  linear-gradient(135deg,var(--accent),var(--g2)) border-box;
  border:1px solid transparent;box-shadow:0 10px 28px -14px rgba(134,207,217,.45);display:flex;flex-direction:column;gap:12px}
.credits-who{display:flex;align-items:center;gap:12px}
.credits-badge{flex:none;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--accent),var(--g2));color:#0e1316;font:650 15px/1 var(--f-display);letter-spacing:.02em}
.credits-eyebrow{font:500 10.5px var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
.credits-name{font:650 17px/1.25 var(--f-display);color:var(--fg)}
.credits-links{display:flex;flex-wrap:wrap;gap:8px}
.credits-links a{display:inline-flex;align-items:center;gap:7px;min-height:36px;padding:7px 12px;border-radius:999px;
  border:1px solid var(--line);background:var(--bg);color:var(--fg);font:500 12.5px var(--f-body);text-decoration:none;
  overflow-wrap:anywhere;transition:border-color .15s,color .15s,background .15s}
.credits-links a:hover,.credits-links a:focus-visible{border-color:var(--accent);color:var(--accent);background:rgba(134,207,217,.08)}
.credits-links a:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.credits-links svg{flex:none;width:15px;height:15px;fill:currentColor}
/* Etiquetas que apuntan hacia la izquierda (estructuras de la línea media) */
.tag.l{flex-direction:row-reverse}
/* Contador de visitas bajo los créditos */
.visits{display:flex;align-items:center;justify-content:center;gap:8px;font:500 12px var(--f-mono);letter-spacing:.04em;color:var(--muted)}
.visits b{color:var(--fg);font-weight:500;font-variant-numeric:tabular-nums}
.visits svg{flex:none;width:15px;height:15px;fill:currentColor}