/* odontograma.css — solo /odontograma/. Usa los tokens de /marca.css.
   Capas (de abajo arriba): fondo y resplandor de la página → lienzo WebGL
   fijo (z 1, sin eventos) → escenario pegajoso con póster, velos, cota,
   números, etiquetas, textos del recorrido y raíl (z 2) → barra (z 5).
   El lienzo solo pinta dentro del escenario y del visor; el resto es
   transparente. Los textos del recorrido viven DENTRO del escenario: no se
   desplazan con la página, solo se funden, así nunca cruzan por encima de la
   pieza que la cámara enseña. Los bloques .od-cap son solo espacio de scroll. */

.od{overflow-x:clip}
.od .sn{position:absolute;left:0;right:0;top:0}
.od-vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* ── Lienzo ─────────────────────────────────────────────────────────── */
.od-lienzo{position:fixed;left:0;top:0;width:100%;height:100vh;height:100lvh;z-index:1;pointer-events:none;display:block}
.sin-3d .od-lienzo{display:none}

/* ── Recorrido ──────────────────────────────────────────────────────── */
.od-tour{position:relative}
.od-tour::before{content:"";display:block;position:sticky;top:0;height:100vh;height:100svh;
  background:radial-gradient(46% 52% at 64% 50%,rgba(96,43,244,.2),transparent 72%)}
.od-escenario{position:sticky;top:0;height:100vh;height:100svh;margin-top:-100vh;margin-top:-100svh;z-index:2;
  pointer-events:none;overflow:hidden}
.od-cap{height:95vh;height:95svh}
.od-cap-0{height:100vh;height:100svh;margin-top:-100vh;margin-top:-100svh}
.od-alt{position:absolute;inset:0}
.od-poster img,.od-poster-b{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:62% 50%;
  transition:opacity .4s var(--ease)}
.od-poster-b{opacity:0}
.od-poster-b.ve{opacity:1}
.con-3d .od-poster img,.con-3d .od-poster-b{opacity:0}

/* Velos: dejan legible el texto (a la izquierda en escritorio, abajo en móvil) */
.od-velo{position:absolute;inset:0;transition:opacity .6s var(--ease);
  background:linear-gradient(180deg,rgba(16,19,29,.82) 0,rgba(16,19,29,0) 132px),
    linear-gradient(0deg,rgba(16,19,29,.94) 0,rgba(16,19,29,.8) calc(var(--velo-y,46vh) - 80px),rgba(16,19,29,0) var(--velo-y,54vh))}
.od-velo-pie{opacity:0}
@media(min-width:820px) and (min-aspect-ratio:1/1){
  .od-velo{background:linear-gradient(180deg,rgba(16,19,29,.7) 0,rgba(16,19,29,0) 120px),
    linear-gradient(0deg,rgba(16,19,29,.6) 0,rgba(16,19,29,0) 18%),
    linear-gradient(90deg,rgba(16,19,29,.9) 0,rgba(16,19,29,.6) 30%,rgba(16,19,29,0) 52%)}
  .od-velo-pie{background:linear-gradient(180deg,rgba(16,19,29,.7) 0,rgba(16,19,29,0) 120px),
    linear-gradient(0deg,rgba(16,19,29,.92) 0,rgba(16,19,29,.6) 22%,rgba(16,19,29,0) 42%)}
  .od-escenario[data-cap="1"] .od-velo:not(.od-velo-pie){opacity:0}
  .od-escenario[data-cap="1"] .od-velo-pie{opacity:1}
}

/* Marcas de registro en las esquinas: el encuadre de un instrumento */
.od-marcas{position:absolute;inset:clamp(76px,9vh,96px) clamp(16px,2.2vw,36px) 20px;opacity:.7}
.od-marcas i{position:absolute;width:14px;height:14px;border:0 solid var(--linea-fuerte)}
.od-marcas i:nth-child(1){left:0;top:0;border-width:1px 0 0 1px}
.od-marcas i:nth-child(2){right:0;top:0;border-width:1px 1px 0 0}
.od-marcas i:nth-child(3){left:0;bottom:0;border-width:0 0 1px 1px}
.od-marcas i:nth-child(4){right:0;bottom:0;border-width:0 1px 1px 0}
@media(max-width:819px),(max-aspect-ratio:1/1){.od-marcas{display:none}}

/* Cota del 36: dato medido sobre el modelo, en --ok como las cifras medidas del sitio */
.od-cota{position:absolute;inset:0;width:100%;height:100%;opacity:0;overflow:visible}
.od-cota-l{fill:none;stroke:var(--ok);stroke-width:1.5;stroke-linecap:round}
.od-cota-t{position:absolute;left:0;top:0;opacity:0;display:flex;flex-direction:column;align-items:center;gap:2px;
  text-align:center;white-space:nowrap;will-change:transform}
.od-cota-t b{font:600 1.125rem/1 var(--f-mono);color:var(--ok);font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.od-cota-t b span{font:inherit;color:inherit;letter-spacing:inherit}
.od-cota-t>span{font:500 var(--t-eti)/1.2 var(--f-mono);letter-spacing:.06em;color:var(--tenue)}

/* Los 32 números FDI del odontograma desenrollado */
.od-nums{position:absolute;inset:0;opacity:0}
.od-num{position:absolute;left:0;top:0;width:3.2ch;margin:-.75em 0 0 -1.6ch;text-align:center;will-change:transform;
  font:600 clamp(12px,.6rem + .25vw,13px)/1.5 var(--f-mono);color:var(--tenue);font-variant-numeric:tabular-nums}
.od-num[hidden]{display:none}
@media(max-width:599px){.od-num{font-size:10.5px}}
.od-num-36{color:#fff;background:var(--violeta);border-radius:6px}

/* Etiquetas del caso: en dos columnas a los lados de la arcada, ordenadas por
   altura y unidas a su pieza con una guía; ninguna guía cruza otra etiqueta */
.od-guias{position:absolute;inset:0;width:100%;height:100%;opacity:var(--etq,0);overflow:visible}
.od-guias path{fill:none;stroke:rgba(244,245,250,.5);stroke-width:1}
.od-guias circle{fill:var(--texto);stroke:rgba(16,19,29,.6);stroke-width:3;paint-order:stroke}
.od-etqs{position:absolute;inset:0;opacity:var(--etq,0)}
.od-etq{position:absolute;left:0;top:0;white-space:nowrap;padding:6px 10px;border-radius:999px;will-change:transform;
  background:rgba(16,19,29,.86);border:1px solid var(--linea-fuerte);font-size:var(--t-peq);line-height:1;color:var(--texto)}
.od-etq em{font-style:normal}
.od-etq .c{display:none}
/* Sin hueco junto al índice de planos: el rótulo corto */
.od-etq.corta .l{display:none}.od-etq.corta .c{display:inline}
.od-etq b{font:600 var(--t-eti)/1 var(--f-mono);color:var(--violeta-texto);margin-right:6px;letter-spacing:.02em}
/* En móvil la etiqueta es solo el número; la leyenda del texto dice qué tiene cada pieza */
@media(max-width:599px){.od-etq em{display:none}.od-etq b{margin:0}.od-etq{padding:5px 8px}}

/* Capas del corte del 36 (plano 4) */
.od-capas-guias{position:absolute;inset:0;width:100%;height:100%;opacity:0;overflow:visible}
.od-capas-guias path{fill:none;stroke:rgba(244,245,250,.55);stroke-width:1}
.od-capas-guias circle{fill:var(--texto);stroke:rgba(16,19,29,.6);stroke-width:3;paint-order:stroke}
.od-capas{position:absolute;inset:0;opacity:0}
.od-capas li{position:absolute;left:0;top:0;padding:6px 11px;border-radius:999px;background:rgba(16,19,29,.86);border:1px solid var(--linea-fuerte);
  font:600 var(--t-eti)/1 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--texto);white-space:nowrap;will-change:transform}

/* Carga */
.od-carga{position:absolute;left:50%;top:clamp(84px,11vh,112px);transform:translateX(-50%);display:none;
  align-items:baseline;gap:8px;flex-wrap:wrap;justify-content:center;width:min(300px,80vw);
  font:500 var(--t-eti)/1.4 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--tenue)}
.od-carga b{color:var(--texto);font-weight:600;font-variant-numeric:tabular-nums}
.od-carga i{flex:1 0 100%;height:2px;border-radius:2px;background:var(--violeta-texto);transform:scaleX(0);transform-origin:left;
  transition:transform .25s linear;box-shadow:0 0 0 .5px var(--linea-fuerte)}
.od-carga em{flex:1 0 100%;text-align:center;font-style:normal;text-transform:none;letter-spacing:0;font-family:var(--f-texto);
  font-size:var(--t-peq);color:var(--mudo);display:none}
.od-carga.lento em{display:block}
.cargando-3d .od-carga{display:flex}


/* Raíl de planos */
.od-rail{position:absolute;right:clamp(16px,2.2vw,36px);top:50%;
  transform:translateY(-50%);pointer-events:auto;display:flex;flex-direction:column;align-items:flex-end;gap:18px}
.od-rail ol{position:relative;display:flex;flex-direction:column;gap:2px;padding-right:14px}
.od-rail ol::before,.od-rail ol::after{content:"";position:absolute;right:0;top:8px;bottom:8px;width:2px;border-radius:2px;background:var(--linea-fuerte)}
.od-rail ol::after{background:var(--violeta-texto);transform-origin:top;transform:scaleY(var(--avance,0))}
.od-rail a{display:flex;flex-direction:row-reverse;align-items:center;justify-content:flex-start;gap:10px;min-height:36px;padding:0 4px;
  font:500 var(--t-eti)/1 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:transparent;transition:color .25s;
  text-shadow:0 0 12px rgba(16,19,29,.9)}
.od-rail a span{color:var(--mudo);transition:color .25s}
.od-rail a:hover,.od-rail a:focus-visible,.od-rail a[aria-current]{color:var(--texto)}
.od-rail a:hover span{color:var(--tenue)}
.od-rail a[aria-current] span{color:var(--violeta-texto)}
.od-saltar{position:absolute;right:clamp(16px,2.2vw,36px);bottom:22px;pointer-events:auto;white-space:nowrap;font-size:var(--t-peq);
  color:var(--tenue);text-decoration:underline;text-underline-offset:5px;text-decoration-color:var(--linea-fuerte);
  min-height:44px;display:inline-flex;align-items:center}
.od-saltar:hover{color:var(--texto);text-decoration-color:var(--violeta-linea)}
.od-escenario{--avance:0}
@media(max-width:819px),(max-aspect-ratio:1/1){
  .od-rail{top:calc(50% - 120px);right:4px;gap:0}
  .od-rail ol{padding-right:0}
  .od-rail ol::before,.od-rail ol::after{right:auto;left:50%;margin-left:-1px;width:1px}
  .od-rail a{font-size:0;gap:0;min-height:40px;min-width:28px;justify-content:center;position:relative}
  .od-rail a span{font-size:0}
  .od-rail a::after{content:"";position:relative;width:7px;height:7px;border-radius:50%;background:var(--fondo);border:1.5px solid var(--mudo)}
  .od-rail a[aria-current]::after{background:var(--violeta-texto);border-color:var(--violeta-texto)}
  /* En móvil el salto va arriba a la derecha, bajo la barra, como pastilla */
  .od-escenario[data-cap="6"] .od-saltar,.od-escenario[data-cap="1"] .od-saltar{opacity:0;pointer-events:none}
  /* En vertical el raíl se dibujaría sobre la pieza: se quita (el salto sigue arriba) */
  .od-rail{display:none}
  .od-saltar{display:none!important;transition:opacity .3s;top:104px;bottom:auto;right:12px;min-height:36px;padding:0 12px;border-radius:999px;text-decoration:none;
    background:rgba(16,19,29,.82);border:1px solid var(--linea-fuerte);font-size:var(--t-eti)}
}

/* Textos del recorrido: fijos en el escenario, solo se funden (--vis) */
.od-textos{position:absolute;inset:0}
.od-txt{position:absolute;left:var(--margen);right:var(--margen);bottom:max(7svh,40px);max-width:34rem;
  opacity:var(--vis,0);transform:translate3d(0,calc((1 - var(--vis,0)) * 10px),0);pointer-events:auto;will-change:opacity,transform}
/* Fuera de su plano el texto solo se apaga (opacidad): sigue en el árbol de
   accesibilidad, así un lector de pantalla recorre los siete planos */
.od-txt[data-vis="0"]{pointer-events:none}
/* Rótulo de tránsito: entre dos planos, de dónde viene y a dónde va */
.od-transito{position:absolute;left:var(--margen);right:var(--margen);bottom:max(9svh,52px);display:flex;align-items:center;gap:14px;
  opacity:var(--vis,0);font:600 var(--t-eti)/1.2 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--tenue);pointer-events:none}
.od-transito i{flex:0 0 clamp(48px,8vw,120px);height:1px;background:linear-gradient(90deg,var(--linea-fuerte),var(--violeta-texto));position:relative}
.od-transito i::after{content:"";position:absolute;right:-1px;top:-3px;border:3.5px solid transparent;border-left:6px solid var(--violeta-texto)}
.od-transito .a{color:var(--texto);font:700 var(--t-h3)/1.1 var(--f-display);letter-spacing:-.02em;text-transform:none}
.od-quieto .od-transito{display:none}
.od-solo-movil{display:none}
@media(max-width:599px){.od-solo-movil{display:inline}}
/* Selector de idioma: esta página solo existe en español */
@media(min-width:820px) and (min-aspect-ratio:1/1){
  .od-transito{right:auto;top:auto;bottom:max(8vh,52px);left:max(var(--margen),calc((100vw - var(--ancho-caja)) / 2 + var(--margen)))}
}
/* El titular se ve desde el primer pintado (es el LCP), sin esperar al JS */
.od-txt-0{--vis:1}
@media(min-width:820px) and (min-aspect-ratio:1/1){
  .od-txt{left:max(var(--margen),calc((100vw - var(--ancho-caja)) / 2 + var(--margen)));right:auto;bottom:auto;top:50%;
    max-width:min(33rem,40vw);transform:translate3d(0,calc(-50% + (1 - var(--vis,0)) * 10px),0)}
  .od-txt-pie{top:auto;bottom:max(7vh,44px);max-width:min(64rem,78vw);display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
    column-gap:clamp(24px,4vw,64px);align-items:end;transform:translate3d(0,calc((1 - var(--vis,0)) * 10px),0)}
  .od-txt-pie .hy-ojo{grid-column:1/-1}
  .od-txt-pie h2{margin:0!important}
  .od-txt-pie p:last-child{max-width:none}
  .od-txt-0{top:calc(50% + 30px)}
}
.od-txt h1,.od-txt h2{font-family:var(--f-display);font-weight:700;color:var(--texto);text-wrap:balance}
.od-txt h1{font-size:clamp(2.5rem,1.2rem + 4.6vw,5.6rem);line-height:.96;letter-spacing:-.05em;margin:0 0 22px}
.od-txt h2{font-size:clamp(2.05rem,1.2rem + 3.1vw,4rem);line-height:1;letter-spacing:-.045em;margin:0 0 18px}
.od-txt p{color:var(--tenue);font-size:var(--t-lede);line-height:1.55;text-wrap:pretty;max-width:31rem}
.od-txt p b{color:var(--texto);font-weight:600}
.od-txt .hy-ojo{font-size:var(--t-eti);margin-bottom:14px;color:var(--violeta-texto)}
.od-txt .hy-ojo span{color:var(--violeta-linea)}
.od-txt .hy-ojo span{color:var(--tenue);margin-right:10px}
@media(max-width:819px),(max-aspect-ratio:1/1){
  .od-txt p{font-size:var(--t-txt)}
  .od-txt h1{margin-bottom:16px}
  .od-txt h2{margin-bottom:12px}
}
.od-lede{margin-bottom:22px}
.od-baja{display:flex;align-items:center;gap:18px}
.od-baja>span{display:inline-flex;align-items:center;gap:12px;font:500 var(--t-eti)/1 var(--f-mono);letter-spacing:.14em;
  text-transform:uppercase;color:var(--texto)}
.od-baja i{position:relative;display:block;width:1px;height:38px;background:var(--linea-fuerte);overflow:hidden}
.od-baja i::after{content:"";position:absolute;left:0;top:-40%;width:1px;height:40%;background:var(--violeta-texto);
  animation:od-baja 2.2s var(--ease) infinite}
@keyframes od-baja{to{top:100%}}
.od-nojs{margin-top:16px;color:var(--atencion)!important;font-size:var(--t-pie)!important}
.od-si-medida{display:none}
.con-medida .od-si-medida{display:inline}
.od-leyenda{display:none;margin-top:12px;gap:6px 14px;flex-wrap:wrap;font-size:var(--t-peq);color:var(--tenue)}
.od-leyenda b{font:600 var(--t-eti)/1 var(--f-mono);color:var(--violeta-texto);margin-right:4px}
@media(max-width:599px){.od-leyenda{display:flex}}

/* Rombo de las cinco caras (plano 4): se rellena a la par que el 3D */
.od-rombo-mini{display:flex;align-items:center;gap:18px;margin:20px 0 0}
.od-rombo-mini svg{width:84px;height:84px;flex:none}
.od-rombo-mini path,.od-rombo-mini rect{fill:rgba(163,172,194,.06);stroke:var(--linea-fuerte);stroke-width:1.5;stroke-linejoin:round}
.od-rombo-mini .r-o{fill:rgba(220,38,38,var(--pinta-o,0))}
.od-rombo-mini .r-m{fill:rgba(8,145,178,var(--pinta-m,0))}
.od-rombo-mini text{fill:var(--mudo);font:600 11px var(--f-mono);text-anchor:middle;stroke:none}
.od-rombo-mini figcaption{display:flex;flex-direction:column;gap:8px;font:500 var(--t-peq)/1.2 var(--f-texto);color:var(--tenue)}
.od-rombo-mini figcaption span{display:flex;align-items:center;gap:9px}
.od-rombo-mini figcaption span::before{content:"";width:10px;height:10px;border-radius:3px;flex:none}
.od-rombo-mini .c-nota{color:var(--mudo);font-size:var(--t-eti)}
.od-rombo-mini .c-nota::before{display:none}
.c-car::before{background:#dc2626}
.c-res::before{background:#0891b2}
@media(max-width:819px),(max-aspect-ratio:1/1){.od-rombo-mini{margin-top:14px}.od-rombo-mini svg{width:64px;height:64px}}

/* ── Exploración ────────────────────────────────────────────────────── */
.od-explora{position:relative;max-width:var(--ancho-caja);margin:0 auto;padding:var(--sec) var(--margen) 0}
.od-exp-cab{max-width:46rem;margin-bottom:clamp(24px,3vw,36px)}
.od-exp-cab h2{font-family:var(--f-display);font-weight:700;font-size:var(--t-h2);line-height:1.05;letter-spacing:-.04em;
  margin:0 0 12px;text-wrap:balance}
.od-exp-sub{color:var(--tenue);font-size:var(--t-lede);line-height:1.55;max-width:42rem}
.od-exp{display:grid;gap:20px;grid-template-columns:minmax(0,1fr)}
@media(min-width:1000px){.od-exp{grid-template-columns:minmax(0,1fr) 360px;align-items:start}}

.od-visor{position:relative;height:62svh;min-height:470px;max-height:680px;border-radius:var(--radio);
  background:radial-gradient(60% 55% at 50% 48%,rgba(96,43,244,.16),transparent 72%),#0d1019}
@media(min-width:1000px){.od-visor{height:min(80vh,760px,calc(100svh - 40px));max-height:none}}
/* «Saltar al odontograma» llega al visor, con la paleta dentro de la pantalla */
#visor{scroll-margin-top:16px}
/* Esquinas redondas por encima del render (la tijera de WebGL es rectangular) */
.od-visor::after{content:"";position:absolute;inset:0;border-radius:var(--radio);border:1px solid var(--linea);
  box-shadow:0 0 0 22px var(--fondo);z-index:2;pointer-events:none}
.od-sup{position:absolute;inset:0;z-index:2;border-radius:var(--radio);cursor:grab;outline-offset:-4px}
.arrastra .od-sup{cursor:grabbing}
.sobre .od-sup{cursor:none}
.od-visor-poster{position:absolute;inset:0;border-radius:var(--radio);overflow:hidden;opacity:.55;transition:opacity .6s}
.od-visor-poster img{width:100%;height:100%;object-fit:contain}
.sin-3d .od-visor-poster{opacity:.85}
.con-3d .od-visor-poster{opacity:0;visibility:hidden}
.od-sin3d{display:none;position:absolute;left:16px;right:16px;bottom:16px;z-index:3;padding:14px 16px;border-radius:14px;
  background:rgba(26,33,49,.94);border:1px solid var(--linea-fuerte);color:var(--texto);font-size:var(--t-pie);line-height:1.5}
.sin-3d .od-sin3d{display:block}
.sin-3d .od-vistas,.sin-3d .od-zoom,.sin-3d .od-ayuda,.sin-3d .od-bisagra,.sin-3d .od-dock{display:none}

/* Barra de vistas (arriba) */
.od-vistas{position:absolute;left:12px;right:12px;top:12px;z-index:3;display:flex;gap:6px;align-items:center;
  overflow-x:auto;scrollbar-width:none;padding:2px}
.od-vistas::-webkit-scrollbar{display:none}
.od-vistas button,.od-zoom button{min-height:40px;padding:0 14px;border-radius:999px;white-space:nowrap;cursor:pointer;
  background:rgba(22,27,40,.94);border:1px solid var(--linea-fuerte);color:var(--tenue);
  font:500 var(--t-peq)/1 var(--f-texto);transition:color .18s,border-color .18s,background-color .18s}
.od-vistas button:hover,.od-zoom button:hover{color:var(--texto);border-color:var(--violeta-linea)}
.od-vistas button[aria-pressed="true"]{color:var(--texto);border-color:var(--violeta-linea);background:#2a2163}
.od-vistas button[aria-disabled="true"]{opacity:.38;cursor:default;border-color:var(--linea);background:transparent;color:var(--tenue)}
.od-sep{flex:none;width:1px;height:20px;background:var(--linea-fuerte);margin:0 4px}
.od-ayuda{position:absolute;left:14px;top:62px;max-width:calc(100% - 96px);z-index:3;pointer-events:none;
  padding:6px 10px;border-radius:10px;background:rgba(16,19,29,.72);
  font:500 var(--t-eti)/1.4 var(--f-mono);letter-spacing:.02em;color:var(--tenue)}
.od-ayuda .tactil,.od-ayuda .tecla{display:none}
/* La ayuda de gestos se retira en cuanto se usa el visor (vuelve con el foco de teclado) */
.od-ayuda{transition:opacity .4s}
.od-visor.usado .od-ayuda{opacity:0}
.od-visor.usado:has(.od-sup:focus-visible) .od-ayuda{opacity:1}
@media(hover:none),(pointer:coarse){.od-ayuda .fino{display:none}.od-ayuda .tactil{display:inline}}
.od-visor:has(.od-sup:focus-visible) .od-ayuda>span{display:none}
.od-visor:has(.od-sup:focus-visible) .od-ayuda .tecla{display:inline;color:var(--tenue)}

/* Lado derecho: bisagra (apertura) y zoom */
.od-zoom{position:absolute;right:12px;bottom:76px;z-index:3;display:flex;flex-direction:column;gap:6px}
.od-zoom button{width:44px;height:44px;padding:0;font-size:1.25rem}
.od-bisagra{position:absolute;right:12px;top:62px;bottom:182px;z-index:3;width:44px;max-height:230px;display:flex;flex-direction:column;
  align-items:center;gap:6px;padding:8px 0;border-radius:22px;background:rgba(22,27,40,.94);border:1px solid var(--linea-fuerte);
  cursor:ns-resize;touch-action:none;user-select:none;-webkit-user-select:none}
.od-bisagra:focus-visible{outline:2px solid var(--violeta-texto);outline-offset:2px}
.od-bisagra-t{font:600 var(--t-eti)/1 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--mudo);writing-mode:vertical-rl;transform:rotate(180deg)}
.od-bisagra-pista{position:relative;flex:1;width:4px;border-radius:4px;background:var(--linea-fuerte);margin:6px 0 12px}
.od-bisagra-pista::before{content:"";position:absolute;left:0;right:0;bottom:0;height:calc(var(--ap,1) * 100%);border-radius:4px;background:var(--violeta-texto)}
.od-bisagra-pista i{position:absolute;left:50%;bottom:calc(var(--ap,1) * 100%);width:20px;height:20px;margin:0 0 -10px -10px;border-radius:50%;
  background:#fff;box-shadow:0 0 0 4px rgba(96,43,244,.45);transition:transform .15s var(--ease)}
.od-bisagra:active .od-bisagra-pista i{transform:scale(1.15)}
.od-bisagra.late .od-bisagra-pista i{animation:od-late 1.2s var(--ease) 2}
@keyframes od-late{50%{box-shadow:0 0 0 10px rgba(96,43,244,.25)}}
.od-bisagra-v{font:600 var(--t-eti)/1 var(--f-mono);color:var(--texto);font-variant-numeric:tabular-nums}

/* Paleta dentro del visor: herramienta activa y Deshacer siempre a mano */
/* La tira de herramientas se desplaza si no cabe; Deshacer queda fijo a la derecha */
.od-dock{position:absolute;left:12px;right:12px;bottom:12px;z-index:3;display:flex;gap:6px;align-items:center;
  padding:6px;border-radius:999px;background:rgba(16,19,29,.88);border:1px solid var(--linea-fuerte)}
.od-herr{display:flex;gap:4px;border:0;padding:0;margin:0;min-width:0;flex:1;overflow-x:auto;scrollbar-width:none;
}
.od-herr::-webkit-scrollbar{display:none}
@media(max-width:819px){.od-herr{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 18px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 18px),transparent)}}
.od-herr label{position:relative;flex:none}
.od-herr input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.od-herr label span{display:inline-flex;align-items:center;gap:7px;min-height:40px;padding:0 12px;border-radius:999px;
  border:1px solid transparent;color:var(--tenue);font-size:var(--t-peq);font-weight:500;white-space:nowrap;
  transition:color .18s,border-color .18s,background-color .18s;pointer-events:none}
.od-herr label:hover span{color:var(--texto);border-color:var(--linea-fuerte)}
.od-herr input:checked+span{color:#fff;border-color:var(--violeta-linea);background:#2a2163}
.od-herr input:focus-visible+span{outline:2px solid var(--violeta-texto);outline-offset:1px}
.od-herr label i{width:11px;height:11px;border-radius:50%;flex:none;background:var(--tenue)}
.h-ver i{background:transparent!important;border:1.5px solid var(--tenue)}
.h-caries i{background:#dc2626!important}
.h-restauracion i{background:#0891b2!important}
.h-corona i{background:#e4eef4!important}
.h-ausente i{background:transparent!important;border:1.5px dashed var(--tenue)}
.h-implante i{background:linear-gradient(135deg,#d5dce3,#7b8794)!important}
.h-borrar i{background:transparent!important;position:relative}
.h-borrar i::before,.h-borrar i::after{content:"";position:absolute;left:50%;top:-1px;bottom:-1px;width:1.5px;background:var(--tenue);transform:rotate(45deg)}
.h-borrar i::after{transform:rotate(-45deg)}
.od-herr.avisa{animation:od-avisa .6s var(--ease)}
@keyframes od-avisa{30%{box-shadow:0 0 0 3px rgba(124,81,246,.45);border-radius:999px}}
.od-deshacer{flex:none;display:inline-flex;align-items:center;gap:7px;min-height:40px;padding:0 14px;border-radius:999px;
  border:1px solid var(--linea-fuerte);background:transparent;color:var(--texto);font:500 var(--t-peq)/1 var(--f-texto);cursor:pointer;
  transition:border-color .18s,opacity .18s}
.od-deshacer svg{flex:none}
.od-deshacer:hover:not(:disabled){border-color:var(--violeta-linea)}
.od-deshacer:disabled{opacity:.4;cursor:default}
/* Nombre de la herramienta activa: en escritorio lo dice el botón marcado */
.od-dock-nombre{display:none}
/* Sup./Inf.: solo en el móvil, donde la boca abierta entera queda pequeña */
.od-vistas .od-solo-v{display:none}
@media(max-width:899px){.od-vistas .od-solo-v{display:inline-block}}
/* La paleta en una fila solo si cabe: el visor es contenedor y, si es estrecho
   (escritorio de 1000–1100 px, con la columna de la ficha al lado), los botones
   se compactan o pasan a la rejilla 4 × 2 de la tableta */
.od-visor{container-type:inline-size}
@container (max-width:980px){
  .od-herr label span{padding:0 8px;gap:6px}
  .od-deshacer{padding:0 11px}
}
@container (max-width:720px){
  /* La fila de vistas cabe sin desplazar en un visor de escritorio estrecho */
  .od-vistas{gap:4px}
  .od-vistas button{padding:0 10px}
  .od-dock{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;padding:6px;left:8px;right:8px;bottom:8px;border-radius:18px}
  .od-herr{display:contents}
  .od-herr label span,.od-deshacer{width:100%;min-height:44px;padding:0 6px;gap:6px;justify-content:center;border-radius:12px;font-size:var(--t-eti)}
  .od-herr .t,.od-deshacer .t{position:static;width:auto;height:auto;clip-path:none;font-weight:600}
  .od-zoom{bottom:118px}
  .od-bisagra{bottom:226px}
}
/* Pista de que la fila de vistas sigue: aparece solo si no cabe y aún queda
   por ver a la derecha; tocarla la desplaza */
.od-sigue{position:absolute;z-index:4;top:12px;right:12px;height:40px;width:44px;display:flex;align-items:center;justify-content:flex-end;
  padding-right:8px;border-radius:0 999px 999px 0;color:var(--texto);font:600 20px/1 var(--f-texto);cursor:pointer;
  background:linear-gradient(90deg,rgba(13,16,25,0),rgba(13,16,25,.96) 55%)}
.od-sigue[hidden]{display:none}
/* En móvil la paleta va en dos filas: los siete iconos (44 px) y, debajo, el
   nombre de la herramienta activa y Deshacer. Las vistas, en botones de 44 px. */
/* Hasta 899 px (móvil y tableta): la paleta es una rejilla 4 × 2 con icono y
   nombre corto (las 7 herramientas y Deshacer), y las vistas, una sola fila
   deslizable con un degradado que avisa de que sigue. */
@media(max-width:899px){
  .od-dock{display:block;padding:6px;left:8px;right:8px;bottom:8px;border-radius:18px}
  .od-dock-nombre{display:none}
  .od-herr{display:contents}
  .od-dock{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px}
  .od-herr label span,.od-deshacer{width:100%;min-height:44px;padding:0 6px;gap:6px;justify-content:center;border-radius:12px;font-size:var(--t-eti)}
  .od-herr .t,.od-deshacer .t{position:static;width:auto;height:auto;clip-path:none;font-weight:600}
  .od-deshacer{border:1px solid var(--linea-fuerte)}
  .od-zoom{bottom:118px}
  .od-vistas{flex-wrap:nowrap;overflow-x:auto;gap:4px;left:8px;right:58px;top:8px;
    -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent)}
  .od-vistas button{flex:none;min-height:44px;padding:0 12px}
  .od-sigue{top:8px;right:58px;height:44px}
  .od-sep{display:none}
  .od-bisagra{top:60px;right:8px;bottom:226px}
}
@media(max-width:599px){
  /* Nombre corto de cada idioma, en el atributo data-corto del HTML; solo a la
     vista: con texto alternativo vacío no se suma al nombre accesible */
  .od-herr .t[data-corto],.od-deshacer .t[data-corto]{font-size:0}
  .od-herr .t[data-corto]::after,.od-deshacer .t[data-corto]::after{content:attr(data-corto);content:attr(data-corto) / "";font-size:var(--t-eti)}
  .od-rail{display:none}
}
/* Con pantalla táctil la ayuda de gestos va en el texto de la sección, no sobre los dientes */
@media(hover:none),(pointer:coarse){.od-ayuda{display:none}}
/* Sin 3D, la paleta va sobre el odontograma 2D */
.od-paleta-2d{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:12px}
.od-paleta-2d:empty{display:none}
.od-paleta-2d .od-herr{flex-wrap:wrap;overflow:visible;-webkit-mask-image:none;mask-image:none}
.od-paleta-2d .od-herr label span{border-color:var(--linea-fuerte)}
.od-paleta-2d .od-deshacer{margin-left:0}

.od-pista{position:absolute;left:50%;top:50%;z-index:3;transform:translate(-50%,-50%) scale(.96);opacity:0;pointer-events:none;
  padding:12px 18px;border-radius:999px;background:rgba(16,19,29,.88);border:1px solid var(--linea-fuerte);
  font:500 var(--t-pie)/1 var(--f-texto);color:var(--texto);transition:opacity .25s,transform .25s var(--ease)}
.pista .od-pista{opacity:1;transform:translate(-50%,-50%) scale(1)}
/* Retícula: sigue al puntero sobre un diente (solo con ratón) */
.od-reticula{position:absolute;left:0;top:0;z-index:3;pointer-events:none;will-change:transform}
.od-reticula i{position:absolute;left:-14px;top:-14px;width:28px;height:28px;border-radius:50%;border:1.5px solid var(--violeta-texto);
  box-shadow:0 0 0 1px rgba(16,19,29,.6)}
.od-reticula i::before,.od-reticula i::after{content:"";position:absolute;background:var(--violeta-texto)}
.od-reticula i::before{left:50%;top:-7px;bottom:-7px;width:1.5px;transform:translateX(-50%);
  -webkit-mask:linear-gradient(#000 0 6px,transparent 6px calc(100% - 6px),#000 calc(100% - 6px));mask:linear-gradient(#000 0 6px,transparent 6px calc(100% - 6px),#000 calc(100% - 6px))}
.od-reticula i::after{top:50%;left:-7px;right:-7px;height:1.5px;transform:translateY(-50%);
  -webkit-mask:linear-gradient(90deg,#000 0 6px,transparent 6px calc(100% - 6px),#000 calc(100% - 6px));mask:linear-gradient(90deg,#000 0 6px,transparent 6px calc(100% - 6px),#000 calc(100% - 6px))}
.od-reticula span{position:absolute;left:22px;top:-30px;padding:5px 9px;border-radius:999px;white-space:nowrap;
  background:rgba(16,19,29,.9);border:1px solid var(--linea-fuerte);font:600 var(--t-eti)/1 var(--f-mono);letter-spacing:.06em;color:var(--texto)}
.od-visor[data-herr="caries"] .od-reticula i{border-color:#f87171}
.od-visor[data-herr="restauracion"] .od-reticula i{border-color:#22d3ee}

/* Panel: ficha y acciones */
.od-panel{position:relative;z-index:2;display:flex;flex-direction:column;gap:14px}
.od-ficha,.od-odo{border:1px solid var(--linea);border-radius:var(--radio);background:var(--superficie);padding:16px}
.od-ficha{flex:none}
/* Lista del caso: todo lo registrado, cada pieza lleva a su ficha */
.od-caso{border:1px solid var(--linea);border-radius:var(--radio);background:var(--superficie);padding:16px}
.od-caso h3{margin:0 0 4px;font:600 var(--t-eti)/1.3 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--tenue)}
.od-caso .od-resumen{margin:0 0 10px;color:var(--mudo)}
.od-caso-lista{display:flex;flex-direction:column;gap:2px;margin-bottom:12px}
.od-caso-lista button{display:flex;gap:10px;align-items:baseline;width:100%;min-height:36px;padding:8px 10px;border-radius:10px;text-align:left;
  background:transparent;color:var(--tenue);font-size:var(--t-peq);line-height:1.35;cursor:pointer;transition:background-color .18s,color .18s}
.od-caso-lista button:hover{background:rgba(163,172,194,.08);color:var(--texto)}
.od-caso-lista button[aria-current]{background:rgba(96,43,244,.22);color:var(--texto)}
.od-caso-lista b{font:600 var(--t-eti)/1 var(--f-mono);color:var(--violeta-texto);flex:none;min-width:2ch}
.od-caso-lista .vacio{color:var(--mudo);font-size:var(--t-peq);padding:6px 0}
.od-herr-ayuda{margin:0 0 12px;padding:10px 12px;border-radius:10px;background:rgba(96,43,244,.12);border:1px solid rgba(124,81,246,.3);
  color:var(--texto);font-size:var(--t-peq);line-height:1.45}
.od-ficha-cab{display:flex;gap:16px;align-items:center;margin-bottom:16px}
.od-ficha-num{font-family:var(--f-display);font-weight:700;font-size:3.6rem;line-height:.9;letter-spacing:-.05em;color:var(--texto);
  min-width:2.2ch;font-variant-numeric:tabular-nums}
.od-ficha-nom{font-weight:600;font-size:var(--t-txt);line-height:1.3;color:var(--texto)}
.od-ficha-fdi{font:500 var(--t-eti)/1.4 var(--f-mono);letter-spacing:.08em;color:var(--tenue);margin-top:4px;text-transform:uppercase}
.od-ficha-med{font:500 var(--t-eti)/1.4 var(--f-mono);color:var(--ok);margin-top:2px}
.od-ficha-cuerpo{display:flex;gap:18px;align-items:center}
.od-ficha-hall{display:flex;flex-direction:column;gap:6px;font-size:var(--t-peq);color:var(--texto);min-width:0}
.od-ficha-hall li{line-height:1.35}
.od-ficha-hall .vacio{color:var(--mudo)}
/* Rombo clásico del odontograma: cinco botones recortados */
.od-rombo{position:relative;width:132px;height:132px;flex:none}
.od-rombo button{position:absolute;inset:0;cursor:pointer;background:rgba(163,172,194,.1);transition:background-color .18s,filter .18s;
  color:var(--tenue);font:600 var(--t-eti)/1 var(--f-mono)}
.od-rombo button[data-con]{background:var(--c);color:#fff}
.od-rombo button:hover{filter:brightness(1.35)}
/* Foco: el recorte (clip-path) se come el outline; el contorno de la cara
   enfocada se dibuja en un SVG superpuesto con la misma forma */
.od-rombo button:focus-visible{outline:none}
.od-rombo button:not([data-con]):focus-visible{background:rgba(160,129,248,.35);color:#fff}
.od-rombo-foco{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.od-rombo-foco *{fill:none;stroke:transparent;stroke-width:3;vector-effect:non-scaling-stroke;stroke-linejoin:round}
.od-rombo:has(.c-arr:focus-visible) .f-arr,.od-rombo:has(.c-aba:focus-visible) .f-aba,.od-rombo:has(.c-izq:focus-visible) .f-izq,
.od-rombo:has(.c-der:focus-visible) .f-der,.od-rombo:has(.c-cen:focus-visible) .f-cen{stroke:#fff;filter:drop-shadow(0 0 1.5px #602BF4) drop-shadow(0 0 1.5px #602BF4)}
.od-rombo span{position:absolute;pointer-events:none}
.c-arr{clip-path:polygon(2% 0,98% 0,69% 29%,31% 29%)}
.c-arr span{left:50%;top:11%;transform:translateX(-50%)}
.c-aba{clip-path:polygon(31% 71%,69% 71%,98% 100%,2% 100%)}
.c-aba span{left:50%;bottom:11%;transform:translateX(-50%)}
.c-izq{clip-path:polygon(0 2%,29% 31%,29% 69%,0 98%)}
.c-izq span{left:9%;top:50%;transform:translateY(-50%)}
.c-der{clip-path:polygon(100% 2%,100% 98%,71% 69%,71% 31%)}
.c-der span{right:9%;top:50%;transform:translateY(-50%)}
.c-cen{clip-path:inset(32% 32% 32% 32% round 6px)}
.c-cen span{left:50%;top:50%;transform:translate(-50%,-50%)}
.od-ficha:not([data-pieza=""]) .od-rombo{opacity:.4}

.od-acciones{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.od-resumen{font:500 var(--t-eti)/1.4 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--tenue)}
.od-acciones button{min-height:44px;padding:0 16px;border-radius:999px;border:1px solid var(--linea-fuerte);color:var(--texto);
  background:transparent;-webkit-appearance:none;appearance:none;font:500 var(--t-peq)/1 var(--f-texto);cursor:pointer;transition:border-color .18s}
.od-acciones button:hover{border-color:var(--violeta-linea)}

/* Odontograma 2D a lo ancho: dos filas de 16 (como la ficha) cuando cabe;
   si no, un cuadrante por fila. Cada pieza lleva su rombo de cinco caras. */
.od-odo{margin-top:20px;container-type:inline-size}
.od-odo h3{margin:0 0 6px;font:600 var(--t-eti)/1.3 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--tenue)}
.od-odo-sub{margin:0 0 14px;color:var(--mudo);font-size:var(--t-peq);line-height:1.45;max-width:60rem}
.od-odo-sub .ancho{display:none}
.od-rejilla{display:grid;gap:10px 0;grid-template-columns:minmax(0,1fr)}
.od-cuad{display:flex;flex-direction:column;gap:6px;min-width:0}
.od-cuad-t{font:500 var(--t-eti)/1.2 var(--f-mono);color:var(--tenue);letter-spacing:.02em}
.od-cuad-t b{color:var(--tenue);margin-right:6px}
.od-fila{display:grid;grid-template-columns:repeat(8,minmax(44px,1fr));gap:2px}
.od-rejilla button{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-height:58px;
  border-radius:10px;cursor:pointer;background:rgba(163,172,194,.06);border:1px solid transparent;color:var(--tenue);
  font:600 var(--t-peq)/1 var(--f-mono);font-variant-numeric:tabular-nums;transition:background-color .18s,border-color .18s,color .18s}
.od-rejilla button:hover{color:var(--texto);border-color:var(--linea-fuerte)}
.od-rejilla button svg{width:26px;height:26px}
.od-rejilla button svg *{fill:rgba(163,172,194,.12);stroke:rgba(163,172,194,.35);stroke-width:1;vector-effect:non-scaling-stroke}
.od-rejilla button[data-con]{color:var(--texto)}
.od-rejilla button[data-pieza="ausente"] b{text-decoration:line-through;text-decoration-color:var(--tenue);opacity:.6}
.od-rejilla button[data-pieza="ausente"] svg{opacity:.25}
.od-rejilla button[aria-pressed="true"]{background:var(--violeta);color:#fff;border-color:var(--violeta)}
.od-rejilla button[aria-pressed="true"] svg *{stroke:rgba(255,255,255,.6)}
.od-rejilla button:focus-visible{outline-offset:1px}
.od-cuad-1{padding-bottom:10px;border-bottom:1px dashed var(--linea-fuerte)}
@container (min-width:760px){
  .od-rejilla{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"q1 q2" "q4 q3";gap:12px 0}
  .od-cuad-0{grid-area:q1;padding-right:8px;border-right:1px dashed var(--linea-fuerte)}
  .od-cuad-1{grid-area:q2;padding:0 0 0 8px;border-bottom:0}
  .od-cuad-2{grid-area:q4;padding-right:8px;border-right:1px dashed var(--linea-fuerte)}
  .od-cuad-3{grid-area:q3;padding-left:8px}
  .od-cuad-0,.od-cuad-1{padding-bottom:12px;border-bottom:1px dashed var(--linea-fuerte)}
  .od-cuad-1 .od-cuad-t,.od-cuad-3 .od-cuad-t{text-align:right}
  .od-odo-sub .ancho{display:inline}.od-odo-sub .estrecho{display:none}
}
@media(max-width:479px){
  .od-odo{margin-left:calc(12px - var(--margen));margin-right:calc(12px - var(--margen));padding:12px 6px}
  .od-odo h3,.od-odo-sub,.od-cuad-t{padding:0 6px}
  .od-fila{gap:1px}
}

/* Cierre y notas */
.od-cierre{position:relative;z-index:2}
.od-notas{max-width:var(--ancho);margin:clamp(32px,4vw,48px) auto 0;display:grid;gap:10px;color:var(--mudo);font-size:var(--t-peq);line-height:1.6}
.od-notas p{max-width:62rem}
.od-notas b{color:var(--tenue);font-weight:600}
.od-notas a{color:var(--tenue);text-decoration:underline;text-decoration-color:var(--linea-fuerte);text-underline-offset:3px}
.od-notas a:hover{color:var(--texto)}

/* ── Movimiento reducido: sin deslizamientos ni animaciones de adorno ─── */
.od-quieto .od-txt{transform:none}
@media(min-width:820px) and (min-aspect-ratio:1/1){.od-quieto .od-txt:not(.od-txt-pie){transform:translateY(-50%)}}
.od-quieto .od-baja i::after{animation:none;top:30%}
.od-quieto .od-poster img,.od-quieto .od-poster-b,.od-quieto .od-visor-poster{transition:none}
@media(prefers-reduced-motion:reduce){
  .od-baja i::after{animation:none}
  .od-herr.avisa{animation:none}
  .od-bisagra-pista i{transition:none}
}

/* ── Capturas para los pósteres (tools/odontograma/posteres.mjs) ───────── */
.od-captura .sn,.od-captura .od-textos,.od-captura .od-rail,.od-captura .od-carga,.od-captura .od-velo,
.od-captura .od-poster,.od-captura .od-poster-b,.od-captura .od-saltar,.od-captura .od-marcas{visibility:hidden}
/* La cota, los números y las etiquetas sí van en el póster (sin 3D son la explicación);
   el póster del visor (?captura&limpio) va sin ellos: ahí no se leerían */
.od-limpio .od-cota,.od-limpio .od-cota-t,.od-limpio .od-nums,.od-limpio .od-etqs,.od-limpio .od-guias{visibility:hidden}
@media(max-width:599px){.od-paleta-2d .t{position:static;width:auto;height:auto;clip-path:none}.od-paleta-2d .od-herr label span{width:auto;padding:0 12px}.od-paleta-2d .od-deshacer{width:auto;padding:0 14px}}

/* Enlace directo a la exploración en el titular: solo en vertical (sustituye a la pastilla) */
.od-solo-v2{display:none}
@media(max-width:819px),(max-aspect-ratio:1/1){.od-solo-v2{display:inline-flex}}