/* ═══════════════════════════════════════════════════════════════════════════
   profundidad.css — EL BLOQUE DE PROFUNDIDAD, COMPARTIDO por las dos
   superficies que lo muestran: la ficha publica (web/biblioteca/<slug>/) y
   el visor de Mi Biblioteca (app.html).

   POR QUE NACE (v1.88.0). Encargo de Diego, 2026-08-19, con captura: «esto me
   gusta con un poco mas de animaciones y detalles graficos, pero no se ve asi
   en la implementacion que yo tengo». Lo MEDIDO: el bloque —las 4 cifras, la
   rampa de 5 peldanos, los ejes y la tarjeta del nivel— vivia SOLO en
   ficha.css. Dentro de la cuenta, el visor mostraba una insignia «N5» y nada
   mas: **quien paga veia menos que un visitante anonimo**. No era cache ni una
   version vieja: era otro componente.

   La cura no es copiar las reglas a vault.css —eso es el espejo que nadie
   comprueba (CLAUDE.md, regla 8 del 13-08)—: es UNA hoja que cargan las dos
   paginas. Si manana alguien cambia el filete de una caja, cambia en las dos.
   Lo clava _QA/prueba_visor_profundidad.py, que nacio en ROJO (10 de 11 casos)
   con el bloque ausente del visor.

   La ficha publica sigue siendo casi autosuficiente: pasa de una hoja a dos, y
   la segunda es exactamente el componente que comparte. Es el precio de no
   tener dos verdades.

   LA CAPA VIVA (al final del fichero) cumple la ley LUXE entera: se anima solo
   opacity/transform/box-shadow (cero reflow), lo ambiental va a 7 s, el hover
   lo PAUSA, `prefers-reduced-motion` lo APAGA y ninguna luz lleva un dato que
   no este ademas escrito.
   ═══════════════════════════════════════════════════════════════════════════ */

:root{
  /* Rampa de PROFUNDIDAD: semaforo de urgencia (N1 rojo) a sistema (N5 verde).
     El rojo NO significa "malo": significa "apague el incendio hoy". */
  /* INYECTADO desde datos/niveles.json (semaforo, decision de Diego
     2026-08-13: N5 en VERDE). Desde 1.30.0 esto NO se edita a mano:
     motor/sellar_assets.py --escribir lo copia de la fuente y --gate FALLA
     si difiere (deuda del espejo pagada; se midio en rojo desincronizando
     un hex a proposito). Para cambiar un color: datos/niveles.json. */
  --n1:#E5484D;--n2:#F76B15;--n3:#F59E0B;--n4:#84cc16;--n5:#22c55e;
}

.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(132px,1fr));gap:11px;margin:0 0 var(--mr-sp-2);position:relative}
.stat{position:relative;border-radius:var(--mr-r-md,14px);padding:var(--mr-sp-35) var(--mr-sp-4);overflow:hidden;
  background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.015) 45%,transparent),
             var(--mr-glass,rgba(20,26,38,.62));
  border:1px solid rgba(255,255,255,.09);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  box-shadow:var(--mr-elev-2,0 6px 18px rgba(0,0,0,.35)), inset 0 1px 0 rgba(255,255,255,.08);
  transition:transform var(--mr-dur-fast,260ms) var(--mr-ease,ease),
             box-shadow var(--mr-dur-base,400ms) var(--mr-ease,ease)}
/* Filete superior: la firma visual de la caja de luz. */
.stat::before{content:"";position:absolute;top:0;left:14%;right:14%;height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.5),transparent)}
.stat:hover{transform:translateY(-2px);
  box-shadow:var(--mr-elev-3,0 14px 40px rgba(0,0,0,.45)),
             0 0 30px -14px var(--mr-tiffany), inset 0 1px 0 rgba(255,255,255,.12)}
.stat__v .lux-cifra{font-size:21px;font-weight:800}
.stat__v{font-size:20px;font-weight:800;letter-spacing:-.02em;line-height:1.15;display:flex;align-items:center;gap:7px}
.stat__v small{font-size:var(--mr-fs-support,13px);color:var(--mr-text-muted);font-weight:700}
.stat__k{font-size:var(--mr-fs-meta,11px);letter-spacing:.07em;text-transform:uppercase;color:var(--mr-text-muted);font-weight:700;margin-top:5px}
.punto{width:9px;height:9px;border-radius:50%;flex:none;box-shadow:0 0 12px currentColor}

/* ── Barra de profundidad (el componente que pidio Diego) ─────────────────
   Rehecha tras ver la captura de Diego: los segmentos intermedios salian
   apagados y marrones. La causa medida: un color plano al 55 % de opacidad
   sobre un fondo #0a0d13 pierde saturacion y los naranjas se van a marron.
   La solucion no es subir la opacidad a secas —eso quema el N5 oro— sino
   componer cada segmento como una PIEZA ILUMINADA: degradado vertical del
   color, reflejo superior de 1 px, borde interno y sombra propia. El activo
   ademas enciende su halo y sube 3 px. Asi la rampa se lee como una escala de
   temperatura y no como cinco botones grises. */
.prof{margin:34px 0 0;position:relative}
.prof__cab{display:flex;align-items:baseline;gap:var(--mr-sp-25);flex-wrap:wrap;margin-bottom:var(--mr-sp-4)}
.prof__t{font:800 var(--mr-fs-meta,11px)/1 var(--mr-font);letter-spacing:.12em;text-transform:uppercase;
  color:color-mix(in srgb,var(--mr-tiffany) 78%,#fff)}
.prof__hint{font-size:var(--mr-fs-caption,12px);color:var(--mr-text-muted);margin-left:auto}
.rampa{position:relative;display:grid;grid-template-columns:repeat(5,1fr);gap:var(--mr-sp-15);
  padding:7px;border-radius:var(--mr-r-pill,999px);
  background:linear-gradient(180deg,rgba(0,0,0,.34),rgba(255,255,255,.03));
  border:1px solid var(--mr-line);
  box-shadow:inset 0 2px 8px rgba(0,0,0,.45), 0 1px 0 rgba(255,255,255,.04)}
/* El riel de calor: fino, luminoso, y por encima de la rampa. */
.rampa::before{content:"";position:absolute;left:16px;right:16px;top:-12px;height:3px;border-radius:999px;
  background:linear-gradient(90deg,var(--n1),var(--n2),var(--n3),var(--n4),var(--n5));
  box-shadow:0 0 14px -2px color-mix(in srgb,var(--n3) 70%,transparent);opacity:.95}
.seg{position:relative;border:0;padding:0;cursor:pointer;background:transparent;
  height:54px;border-radius:999px;overflow:hidden;
  transition:transform var(--mr-dur-fast,260ms) var(--mr-ease,ease)}
.seg__f{position:absolute;inset:0;border-radius:inherit;
  background:linear-gradient(180deg,
      color-mix(in srgb,var(--c) 88%, #fff 6%),
      color-mix(in srgb,var(--c) 62%, #000 22%));
  opacity:.54;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28), inset 0 -1px 0 rgba(0,0,0,.35);
  transition:opacity var(--mr-dur-base,400ms) var(--mr-ease,ease),
             box-shadow var(--mr-dur-base,400ms) var(--mr-ease,ease)}
.seg__n{position:relative;font:800 var(--mr-fs-h3,17px)/54px var(--mr-font-mono,monospace);
  color:rgba(255,255,255,.72);display:block;text-align:center;
  text-shadow:0 1px 2px rgba(0,0,0,.55);
  transition:color var(--mr-dur-fast,260ms) var(--mr-ease,ease),
             text-shadow var(--mr-dur-fast,260ms) var(--mr-ease,ease)}
.seg:hover{transform:translateY(-2px)}
.seg:hover .seg__f{opacity:.84}
.seg:hover .seg__n{color:#fff}
.seg[aria-pressed="true"]{transform:translateY(-3px)}
.seg[aria-pressed="true"] .seg__f{opacity:1;
  box-shadow:0 0 30px -4px var(--c), inset 0 0 0 1.5px rgba(255,255,255,.42),
             inset 0 1px 0 rgba(255,255,255,.5)}
.seg[aria-pressed="true"] .seg__n{color:#0b0d12;text-shadow:0 1px 0 rgba(255,255,255,.35)}
.seg:focus-visible{outline:2px solid color-mix(in srgb,var(--mr-tiffany) 85%,#fff);outline-offset:3px}
.rampa__ejes{display:flex;justify-content:space-between;margin:11px var(--mr-sp-15) 0;font:700 var(--mr-fs-meta,11px)/1 var(--mr-font);
  letter-spacing:.08em;text-transform:uppercase;color:var(--mr-text-muted)}
.prof__det{margin-top:var(--mr-sp-4);border:1px solid var(--mr-line);border-left:3px solid var(--c,var(--mr-gold));
  border-radius:var(--mr-r-md,14px);
  background:linear-gradient(180deg,color-mix(in srgb,var(--c) 7%,transparent),transparent 55%),var(--mr-surface,#11151d);
  padding:var(--mr-sp-45) var(--mr-sp-5);display:grid;grid-template-columns:auto 1fr;gap:var(--mr-sp-4);align-items:start;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05)}
.prof__ico{width:46px;height:46px;border-radius:13px;display:grid;place-items:center;font-size:22px;
  background:color-mix(in srgb,var(--c) 20%,transparent);
  border:1px solid color-mix(in srgb,var(--c) 45%,transparent);
  box-shadow:0 0 22px -8px var(--c), inset 0 1px 0 rgba(255,255,255,.18)}
.prof__nom{font-weight:800;font-size:var(--mr-fs-lead,16px);letter-spacing:-.01em;margin:0 0 5px}
.prof__nom em{font-style:normal;color:var(--c);font-family:var(--mr-font-mono,monospace);font-size:var(--mr-fs-support,13px);margin-right:var(--mr-sp-2)}
.prof__txt{font-size:var(--mr-fs-body,14.5px);color:var(--mr-text-2);margin:0}
.prof__este{display:inline-flex;align-items:center;gap:var(--mr-sp-15);margin-top:var(--mr-sp-25);font:800 var(--mr-fs-meta,11px)/1 var(--mr-font);
  letter-spacing:.07em;text-transform:uppercase;color:#12131a;background:var(--c);
  padding:7px 11px;border-radius:999px;box-shadow:0 0 18px -6px var(--c)}
.prof__cuantos{font:700 var(--mr-fs-caption,12px)/1 var(--mr-font-mono,monospace);color:var(--mr-text-muted);margin-top:11px;display:block}
.prof__cuantos a{color:var(--mr-tiffany-2,#3fe0db)}

/* ── RESPONSIVE del componente (venia del @media 640 de ficha.css) ────────── */
@media(max-width:640px){
  .prof__det{grid-template-columns:1fr}
  .seg__n{font-size:var(--mr-fs-support,13px)}
}

/* ══════════════════════════════════════════════════════════════════════════
   LA RAMPA VIVA — la capa de movimiento (v1.88.0).
   Intensidad elegida por Diego: «notorio pero sobrio». Se aplica al componente
   entero y SIN clase-puerta: `.stat` y `.seg` solo existen dentro de este
   bloque, asi que una puerta extra seria una pieza mas que se puede olvidar de
   poner en una de las dos superficies — que es exactamente el defecto que esta
   hoja viene a cerrar. Las reglas van al final del fichero a proposito: ganan
   por orden, no por especificidad inflada.
   ══════════════════════════════════════════════════════════════════════════ */
@keyframes rv-sube{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes rv-dibuja{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes rv-brillo{0%{transform:translateX(-130%) skewX(-14deg)}42%,100%{transform:translateX(240%) skewX(-14deg)}}
@keyframes rv-respira{0%,100%{box-shadow:0 0 30px -4px var(--c),inset 0 0 0 1.5px rgba(255,255,255,.42),inset 0 1px 0 rgba(255,255,255,.5)}
                      50%{box-shadow:0 0 44px 0 var(--c),inset 0 0 0 1.5px rgba(255,255,255,.55),inset 0 1px 0 rgba(255,255,255,.6)}}

/* 1 · Entrada escalonada: 70 ms entre piezas, en el orden en que se leen. */
.stats .stat{animation:rv-sube 540ms cubic-bezier(.22,.8,.3,1) both;animation-delay:calc(var(--d,0)*70ms)}
.rampa .seg{animation:rv-sube 520ms cubic-bezier(.22,.8,.3,1) both;animation-delay:calc(220ms + var(--d,0)*70ms)}
.rampa__ejes{animation:rv-sube 460ms cubic-bezier(.22,.8,.3,1) both;animation-delay:560ms}
.prof__det{animation:rv-sube 460ms cubic-bezier(.22,.8,.3,1) both;animation-delay:640ms}
/* 2 · El riel de calor se DIBUJA de rojo a verde: la escala contandose sola. */
.rampa::before{transform-origin:left center;animation:rv-dibuja 760ms cubic-bezier(.22,.8,.3,1) both;animation-delay:140ms}
/* 3 · El peldano de ESTE asistente respira, y cada 7 s lo recorre un brillo.
      El dato no viaja en la luz: al lado dice «Este asistente» en texto. */
.seg[aria-pressed="true"]{animation:rv-respira 7s ease-in-out 1.6s infinite}
.seg[aria-pressed="true"] .seg__f{overflow:hidden}
.seg[aria-pressed="true"] .seg__f::after{content:"";position:absolute;top:-30%;bottom:-30%;width:38%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.45),transparent);
  animation:rv-brillo 7s ease-in-out 1.9s infinite;pointer-events:none}
/* 4 · El hover PAUSA lo ambiental (ley LUXE 3). */
.rampa:hover .seg[aria-pressed="true"],
.rampa:hover .seg[aria-pressed="true"] .seg__f::after{animation-play-state:paused}
/* 5 · Relieve al pasar: la cifra se levanta un poco mas que antes. */
.stat:hover{transform:translateY(-3px)}
.stat__v{font-variant-numeric:tabular-nums}
/* 6 · Reduced motion: se APAGA, no se atenua. Todo queda en su estado final. */
@media (prefers-reduced-motion:reduce){
  .stats .stat,.rampa .seg,.rampa__ejes,.prof__det,.rampa::before,
  .seg[aria-pressed="true"],.seg[aria-pressed="true"] .seg__f::after{
    animation:none!important;opacity:1;transform:none}
  .rampa::before{transform:scaleX(1)}
  .seg[aria-pressed="true"]{transform:translateY(-3px)}
}