/* MasterPrompt Vault · la escala de profundidad, compartida (home + Mi Biblioteca)
   El detalle nace con `hidden`: hasta que no se pulsa un nivel no hay nada
   abierto. Depende de la regla global `[hidden]{display:none!important}`. */
[hidden]{display:none!important}

/* El rotulo va SIEMPRE en su propia linea (v1.28): competia con las gemas y
   la quinta caia sola a un segundo renglon sin hilo que la acompanara. */
.niv-esc{display:flex;gap:var(--mr-sp-2);align-items:center;flex-wrap:wrap;margin:0 0 var(--mr-sp-25);position:relative}
.niv-esc__t{flex:1 0 100%}
/* El hilo del collar se RETIRO tras medirlo en captura: con las gemas
   partidas en dos renglones (pasa hasta en 1440), la linea cruzaba un renglon
   con una sola gema y se leia como error. Las gemas semaforo llevan el collar
   solas; un adorno que necesita condiciones que el layout no garantiza no se
   publica. */
.niv-esc__t{font-size:var(--mr-fs-caption,12px);color:var(--mr-text-muted);font-weight:700;
  letter-spacing:.04em;text-transform:uppercase;white-space:nowrap}
.niv-esc__b{cursor:pointer;min-height:38px;display:inline-flex;align-items:center;gap:7px}
/* La GEMA (v1.27, Propuesta B): el punto crece a pieza iluminada con brillo
   interno; el nivel abierto la levanta. La informacion sigue en el texto y en
   aria-pressed: la luz solo subraya (ley LUXE 5). */
.niv-esc__b .niv-punto{width:14px;height:14px;border-radius:50%;flex:none;
  background:radial-gradient(circle at 34% 28%,#fff,var(--nc,var(--mr-tiffany)) 58%,
    color-mix(in srgb,var(--nc,var(--mr-tiffany)) 55%,#000) 100%);
  box-shadow:0 0 12px color-mix(in srgb,var(--nc,var(--mr-tiffany)) 85%,transparent),
    inset 0 1px 2px rgba(255,255,255,.55)}
.niv-esc__b[aria-pressed="true"]{border-color:var(--nc);
  background:color-mix(in srgb,var(--nc) 16%,transparent);color:var(--mr-text)}
.niv-esc__b .niv-n{opacity:.65;font-variant-numeric:tabular-nums}

/* El detalle: lo que Diego pidió que se desplegara. Va debajo de la escala, en
   el flujo — no es un tooltip ni una capa flotante, porque las dos desaparecen
   en cuanto el dedo se levanta. */
.niv-det{display:flex;gap:var(--mr-sp-3);align-items:flex-start;position:relative;
  margin:0 0 var(--mr-sp-4);padding:var(--mr-sp-35) var(--mr-sp-10) var(--mr-sp-35) var(--mr-sp-35);border-radius:var(--mr-r-md);
  border:1px solid var(--nc,var(--mr-line));
  background:color-mix(in srgb,var(--nc,var(--mr-surface)) 9%,var(--mr-surface))}
.niv-det__ico{font-size:24px;line-height:1;flex:none}
.niv-det__cuerpo{min-width:0}
.niv-det__nom{margin:0 0 var(--mr-sp-1);font-size:var(--mr-fs-body,14.5px);color:var(--mr-text)}
.niv-det__nom b{color:var(--nc)}
.niv-det__txt{margin:0;font-size:var(--mr-fs-body,14.5px);line-height:1.55;color:var(--mr-text-2)}
.niv-det__senal{margin:var(--mr-sp-2) 0 0;font-size:var(--mr-fs-support,13px);line-height:1.5;color:var(--mr-text-muted)}
.niv-det__senal span{display:block;font-size:var(--mr-fs-meta,11px);font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--nc);margin-bottom:var(--mr-sp-05)}
.niv-det__x{position:absolute;top:8px;right:8px;background:none;border:0;cursor:pointer;
  color:var(--mr-text-muted);font-size:var(--mr-fs-body,14.5px);line-height:1;padding:var(--mr-sp-2);min-width:34px;min-height:34px}
.niv-det__x:hover{color:var(--mr-text)}

/* La insignia de cada fila abre la misma explicación: es el punto donde el dueño
   se pregunta «¿y esto qué es?», y hasta hoy sólo tenía un title. */
.badge.nivel[data-niv]{cursor:pointer;border:0;font:inherit;min-height:24px}

/* La escala, encendida (v1.16). El punto de cada nivel deja de ser un circulo
   plano y pasa a ser una PIEZA ILUMINADA con su halo; el nivel abierto levanta
   el suyo. La informacion sigue estando en el texto («N3 · Analisis con
   veredicto») y en `aria-pressed`: la luz solo la subraya. */
.niv-esc__b .niv-punto{box-shadow:0 0 10px color-mix(in srgb,var(--nc,var(--mr-tiffany)) 85%,transparent);
  background:radial-gradient(circle at 35% 30%,#fff,var(--nc,var(--mr-tiffany)) 62%)}
.niv-esc__b{transition:border-color var(--mr-dur-instant) var(--mr-ease),
                       box-shadow var(--mr-dur-fast) var(--mr-ease),
                       transform var(--mr-dur-fast) var(--mr-ease)}
.niv-esc__b[aria-pressed="true"]{transform:translateY(-2px)}
@media (prefers-reduced-motion:reduce){.niv-esc__b{transition:none}}
.niv-esc__b[aria-pressed="true"]{box-shadow:0 0 22px -8px var(--nc), inset 0 1px 0 rgba(255,255,255,.10)}
.niv-det{box-shadow:var(--mr-elev-2), inset 0 1px 0 rgba(255,255,255,.06),
                     0 0 40px -22px var(--nc,var(--mr-tiffany))}

@media (max-width:520px){
  .niv-esc{gap:var(--mr-sp-15)}
  .niv-esc__t{flex:1 0 100%}
  .niv-det{padding:var(--mr-sp-3) 38px var(--mr-sp-3) var(--mr-sp-3)}
}
/* MEDIDO EN UN TELEFONO DE 390 px: los cinco niveles se apilaban en cinco
   renglones y, sumados al rotulo, ocupaban 232 px. Con la barra de acciones y
   las pestanas encima, habia que recorrer casi 800 px antes de ver el primer
   asistente. La escala es una GUIA, no el contenido: en pantalla estrecha pasa
   a ser un carril que se desliza, con el mismo desvanecido que usan los chips
   del resto de la casa —asi se sabe que hay mas sin gastar cinco renglones—.
   El rotulo se queda arriba, en su linea, porque es el que da sentido al carril. */
@media (max-width:560px){
  .niv-esc{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;
    scroll-behavior:smooth;scroll-padding-inline:12px;padding-bottom:var(--mr-sp-05)}
  .niv-esc::-webkit-scrollbar{display:none}
  .niv-esc__b{flex:none}
  .niv-esc__t{position:sticky;left:0;flex:none;order:-1}
}
@media (max-width:560px) and (prefers-reduced-motion:reduce){.niv-esc{scroll-behavior:auto}}


/* ── LA ESCALA COMO CINCO CAJAS DE LUZ (v1.31) ────────────────────────────────
   Encargo de Diego 2026-08-14, con captura de la 1.29: «el tamano se ve feo,
   no esta bien organizado, no respiran con luz, el numero se ve pisado».
   Lo MEDIDO en esa captura: (a) radio de pildora (999px) sobre una celda de
   76 px de alto = un ovalo, no una caja; (b) el conteo era un numero suelto
   flotando sobre el borde curvo, sin placa ni sitio reservado — por eso se
   leia pisado; (c) celdas de alturas distintas cuando un nombre parte en dos
   lineas; (d) cero luz: ni filete, ni halo, ni respiracion.
   La cura, con el sistema (MRB-0012 medida 4): radio --mr-r-md como toda caja
   de la casa, filete superior (la firma de la caja de luz), halo del color del
   nivel, gema que RESPIRA con el latido que ya existe en lux.css, conteo en
   placa con su esquina reservada, y min-height que iguala las celdas aunque el
   nombre parta. Vale para la app (.niv-esc__b) Y el home (.rampa-niv .niv-chip):
   esta hoja carga despues de vault.css y por eso puede ganar la cascada. */
@media(min-width:560px){
  .niv-esc{display:grid;grid-template-columns:repeat(auto-fit,minmax(148px,1fr));gap:var(--mr-sp-25);align-items:stretch}
  .niv-esc__t{grid-column:1/-1}
  .niv-esc__b,.rampa-niv .niv-chip{
    display:flex;flex-direction:column;justify-content:center;align-items:center;gap:var(--mr-sp-15);
    white-space:normal;text-align:center;position:relative;line-height:1.3;
    padding:var(--mr-sp-35) var(--mr-sp-3) var(--mr-sp-3);min-height:92px;
    border-radius:var(--mr-r-md,14px);
    border:1px solid color-mix(in srgb,var(--nc,var(--mr-tiffany)) 28%,var(--mr-line));
    background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.012) 46%,transparent),
               var(--mr-glass,rgba(20,26,38,.62));
    box-shadow:0 8px 22px -16px rgba(0,0,0,.55), 0 0 26px -18px var(--nc,var(--mr-tiffany)),
               inset 0 1px 0 rgba(255,255,255,.07);
    overflow:hidden}
  /* El filete superior: la firma de la caja de luz, como .stat en la ficha. */
  .niv-esc__b::before,.rampa-niv .niv-chip::before{content:"";position:absolute;top:0;left:16%;right:16%;height:1px;
    background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--nc,var(--mr-tiffany)) 65%,#fff),transparent);
    opacity:.55}
  .niv-esc__b:hover:not([disabled]),.rampa-niv .niv-chip:hover:not([disabled]){
    transform:translateY(-2px);
    box-shadow:0 14px 30px -18px rgba(0,0,0,.6), 0 0 30px -12px var(--nc,var(--mr-tiffany)),
               inset 0 1px 0 rgba(255,255,255,.1)}
  .niv-esc__b[aria-pressed="true"],.rampa-niv .niv-chip[aria-pressed="true"]{
    border-color:color-mix(in srgb,var(--nc,var(--mr-tiffany)) 65%,transparent);
    background:linear-gradient(180deg,rgba(255,255,255,.06),transparent 50%),
               color-mix(in srgb,var(--nc,var(--mr-tiffany)) 13%,var(--mr-surface));
    box-shadow:0 10px 26px -16px rgba(0,0,0,.55), 0 0 34px -10px var(--nc,var(--mr-tiffany)),
               inset 0 1px 0 rgba(255,255,255,.12)}
  /* El conteo tiene PLACA y esquina propia: nunca mas un numero pisado. */
  .niv-esc__b .niv-n,.rampa-niv .niv-chip .niv-n{position:absolute;top:7px;right:7px;opacity:1;margin:0;
    font:700 var(--mr-fs-meta,11px)/1 var(--mr-font-mono);font-variant-numeric:tabular-nums;color:var(--mr-text-2);
    background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.09);
    border-radius:999px;padding:3px 7px}
  /* Cabecera gema + N: una linea que se lee de un golpe. */
  .niv-b__cab{display:inline-flex;align-items:center;gap:7px}
  .niv-id{font:800 var(--mr-fs-caption,12px)/1 var(--mr-font-mono);letter-spacing:.04em;color:var(--nc,var(--mr-tiffany))}
  .niv-nom{font-size:var(--mr-fs-caption,12px);font-weight:600;color:var(--mr-text-2);max-width:100%}
  .niv-esc__b[aria-pressed="true"] .niv-nom{color:var(--mr-text)}
  /* El «Todos» del home no lleva gema ni conteo: celda serena, mismo cuerpo. */
  .rampa-niv .niv-chip--todos{justify-content:center;font-size:var(--mr-fs-caption,12px);font-weight:700}
}
/* La gema, en las DOS superficies: pieza iluminada que RESPIRA con el latido
   de la casa (lux.css). Si lux.css no cargara, simplemente no late. */
.niv-esc__b .niv-punto,.niv-chip .niv-punto{width:14px;height:14px;border-radius:50%;flex:none;align-self:center;
  background:radial-gradient(circle at 34% 28%,#fff,var(--nc,var(--mr-tiffany)) 58%,color-mix(in srgb,var(--nc,var(--mr-tiffany)) 55%,#000) 100%);
  box-shadow:0 0 12px color-mix(in srgb,var(--nc,var(--mr-tiffany)) 85%,transparent),inset 0 1px 2px rgba(255,255,255,.55);
  animation:lux-latido 3.4s var(--mr-ease,ease-in-out) infinite}
.niv-esc__b[disabled] .niv-punto,.niv-chip[disabled] .niv-punto{animation:none}
/* Deshabilitado se VE deshabilitado tambien en la app: la regla de vault.css
   solo cubria .niv-chip (home) y N1 con 0 lucia igual de encendida que N3. */
.niv-esc__b[disabled]{opacity:.38;cursor:not-allowed}
@media (prefers-reduced-motion:reduce){
  .niv-esc__b .niv-punto,.niv-chip .niv-punto{animation:none}
  .niv-esc__b:hover:not([disabled]),.rampa-niv .niv-chip:hover:not([disabled]){transform:none}
}
/* En el carril movil (<560) las piezas conviven en linea: gema+N y nombre
   seguidos, conteo en placa pequena al final — sin absolutos que pisen. */
@media (max-width:560px){
  .niv-b__cab{display:inline-flex;align-items:center;gap:var(--mr-sp-15)}
  .niv-esc__b .niv-n,.niv-chip .niv-n{font:700 var(--mr-fs-meta,11px)/1 var(--mr-font-mono);color:var(--mr-text-muted);
    background:rgba(255,255,255,.07);border-radius:999px;padding:var(--mr-sp-05) var(--mr-sp-15);margin-left:var(--mr-sp-1)}
}

/* v1.35.1 — «El recuadro se esta montando muy pegado sobre los botones»
   (Diego, captura 2026-08-14). El detalle del nivel nacia sin margen superior
   y el halo del boton activo se montaba sobre su borde. Aire arriba, y en
   pantalla estrecha un poco mas de respiro interior. */
.niv-det{margin:var(--mr-sp-35) 0 var(--mr-sp-45)}
@media (max-width:520px){.niv-det{margin:var(--mr-sp-3) 0 var(--mr-sp-4);gap:var(--mr-sp-25)}}