/* ══════════════════════════════════════════════════════════════════════
   cristal.css — LAS CAJAS SON DE VIDRIO · v3.1, «un pelín menos blanco»
   ══════════════════════════════════════════════════════════════════════
   Se carga la última en cada página y convierte las cajas opacas de la
   casa en vidrio. Tres cosas que la v2 no hacía y ésta sí:

   · ORDEN INDEPENDIENTE. Varias páginas escriben su <style> DESPUÉS de las
     hojas (el panel, «Lo mío»), y una regla igual de específica escrita
     después gana: el vidrio se perdía justo en las páginas con más cajas.
     Aquí las variables van en html:root y cada selector lleva «html »
     delante: una pizca más de especificidad, y gana esté donde esté.
   · VIDRIO QUE SE VE. Tinte blanco en vez de gris (sobre fondo oscuro un
     gris translúcido parece una caja opaca más clara), un brillo suave en
     la parte alta, borde de luz, y detrás tres resplandores de la casa
     con fuerza suficiente para que el desenfoque tenga qué desenfocar.
   · TODAS LAS CAJAS. La lista sale de un barrido de las 29 páginas: las
     de la capa común y la piel, y las que cada página escribió a mano
     (organigrama, panel, «Lo mío», sala, acta, decir, mapa, tablero).
   Nada de layout. Vidrio dentro de vidrio: la interior sin desenfoque.
   prefers-reduced-transparency e impresión devuelven las cajas opacas.
   ══════════════════════════════════════════════════════════════════════ */
html:root{
  --cr-vidrio:rgba(255,255,255,.038);
  --cr-vidrio-2:rgba(255,255,255,.024);
  --cr-borde:rgba(255,255,255,.11);
  --cr-brillo:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.012) 38%,rgba(255,255,255,0) 100%);
  --cr-filo:inset 0 1px 0 rgba(255,255,255,.10),inset 0 0 0 1px rgba(255,255,255,.02);
  --cr-sombra:0 12px 32px rgba(0,0,0,.34);
  --cz-panel:var(--cr-vidrio); --cz-vidrio:rgba(11,16,24,.5);
  --pl-carton:var(--cr-vidrio); --panel:var(--cr-vidrio); --panel2:var(--cr-vidrio-2);
  --card:var(--cr-vidrio); --bg2:var(--cr-vidrio-2);
}
/* lo que hay detrás del vidrio: tres resplandores de la casa, fijos, debajo de todo */
html body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(ellipse 58% 44% at 16% 10%,rgba(126,164,216,.22),transparent 68%),
             radial-gradient(ellipse 52% 44% at 86% 82%,rgba(217,163,76,.16),transparent 68%),
             radial-gradient(ellipse 44% 38% at 58% 48%,rgba(180,140,224,.10),transparent 70%)}
/* la barra */
html .cz-nav{-webkit-backdrop-filter:blur(18px) saturate(1.6);backdrop-filter:blur(18px) saturate(1.6);border-bottom:1px solid var(--cr-borde)}
/* las cajas de la casa: capa común, piel y cada página */
html .cz-ficha,html .cz-caja,html .cz-tip,html .cz-bienve,
html .pl-ficha,html .pl-atr,html .pl-hud__c,html .hj-chapa,html .arr,html .dg,html .pl-tip__c,html .pl-marco__t,html .tr__t,html .hm__ayuda,html .sq__q,
html .stat,html .proto,html .div,html .fx,html .est,html .kv,html .contr,html .som,html .warn,html .perf,
html .ptab,html .dif,html .rango,html pre.sellado,html a.ag,html .bloque,html .coord,html .parte,html .au-m,
html .pel,html .nada,html .au-carta,html .au-msg,html .mision,html .aclara,
html .mchip,html .ch,html .rep-fila,html .disputa,html .lazo,html .tablon,html .card,html .capa,html .evento,html .opc,html .puerta,html .quest,html #transcript,html .rasgo,html .placa-dia,html .asiento,html .mandato,html .oc,
html .notaext,html .veredicto,html .fbarra,html .lbar,html .tick.doble,html .aviso,html .canal,html #ficha,
html .firma,html .elenco a,html .reloj .celda,html .rail a i,html .avance .pista,
html .nv-bloque,html .lz-bloque,html .hb-bloque,html .rjs,
html .pt-ag__b,html #pt-tarjeta,html .pt-ac,html .pt-lienzo,html .pu-e,html .cp-l__b,html #cp-tarjeta,html .ci-plano,html .ci-f,
html .cv,html .av{
  background-color:var(--cr-vidrio);
  background-image:var(--cr-brillo);
  -webkit-backdrop-filter:blur(22px) saturate(1.6);backdrop-filter:blur(22px) saturate(1.6);
  border-color:var(--cr-borde);
  box-shadow:var(--cr-filo),var(--cr-sombra);
}
html .cv::after{background:var(--cr-vidrio)}
html .cv__cara,html .cv__div,html .dg__cab{background:rgba(16,23,37,.5)}
/* cajas dentro de cajas: el vidrio no se apila (la interior, sin desenfoque y sin sombra larga) */
html .pl-ficha .pl-atr,html .cz-ficha .cz-caja,html .card .card,html .pl-ficha .kv,html .card .kv,html .pel .marca,html .avance .pista,
html .div .kv,html .div .bar,html .div .contr,html .div .som,html .perf .kv,html .bloque .cuerpo,html .acto .parte,html .acto .au-m,html .mision .btn{
  -webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:var(--cr-filo);background-image:none}
/* las pastillas y las barras pequeñas no son cajas: se quedan como estaban */
html .pill,html .cz-chip,html .cz-led,html .bar i,html .orb{-webkit-backdrop-filter:none;backdrop-filter:none}
/* el plano del circuito: sus nodos también de vidrio */
html .ci-n rect{fill:rgba(255,255,255,.06);stroke:rgba(255,255,255,.18)}
html .ci-n:hover rect,html .ci-n:focus rect{stroke:#d9a34c}
/* formularios: vidrio sin desenfoque, para que lo escrito se lea nítido */
html :where(input[type=text],input[type=email],input[type=number],input[type=search],input[type=password],select,textarea){background:rgba(16,23,37,.62)}
@media (prefers-reduced-transparency:reduce){
  html:root{--cr-vidrio:#18202f;--cr-vidrio-2:#141b29;--cz-vidrio:rgba(11,16,24,.92);--cr-brillo:none}
  html body::before{display:none}
  html *{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
}
@media print{ html:root{--cr-vidrio:#fff;--cr-vidrio-2:#fff;--cr-brillo:none} html body::before{display:none} html *{-webkit-backdrop-filter:none!important;backdrop-filter:none!important;box-shadow:none!important} }
