/* PuraNota Undécimo: tres capas de ficción sobre los mismos componentes de undecimo.css.
   Cada una define su propia identidad visual (la ficción manda, no el interruptor Noche/Neobrutal):
   .fic-esferas   «Las Esferas»    hallazgo arqueológico, piedra y jade, cuaderno de campo (sabor Avatar: dominar las cinco)
   .fic-expedicion «La Expedición» carta náutica, papel y óxido, máquina de escribir (sabor Outer Banks: la pista que lleva a otra)
   .fic-ruido      «El Ruido»      negro, rojo neón, estática y VT323 (sabor Stranger Things: el otro lado bajo el pueblo) */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,600;9..144,700;9..144,900&family=Caveat:wght@500;700&family=Anton&family=Oswald:wght@500;700&family=Special+Elite&family=Libre+Baskerville:wght@400;700&family=VT323&family=Rubik+Glitch&display=swap');

/* ---------- comunes ---------- */
.tel .hero { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: 10px; margin: -6px -16px -10px; padding: 24px 20px 22px; position: relative; overflow: hidden; }
.tel .hero > * { position: relative; }
.temporada { font: 800 10.5px 'Inter'; letter-spacing: .18em; text-transform: uppercase; opacity: .85; }
.frag { display: grid; gap: 6px; padding: 12px 14px; border-radius: 14px; }
.frag .meta-f { display: flex; justify-content: space-between; align-items: center; font: 700 10.5px 'Inter'; letter-spacing: .08em; text-transform: uppercase; opacity: .75; }
.frag .tag { font: 800 9px 'Inter'; letter-spacing: .1em; padding: 2px 6px; border-radius: 5px; }
.frag.bloq { opacity: .55; border-style: dashed; }
.cuenta-f { display: flex; align-items: baseline; gap: 8px; }
.cuenta-f .num { font-size: 56px; }
.grano-f::after { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .14; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* ======================================================================
   LAS ESFERAS
   ====================================================================== */
.fic-esferas { --fondo: #0E1311; --capa: #131A17; --tarjeta: #18211D; --tarjeta-2: #212C27; --linea: #2E3B35;
  --texto: #F1EFE6; --suave: #A9B5AC; --tenue: #6F7D74; --acento: #5BD3A0; --acento-tinta: #0E1311; --oro: #E2B65A;
  --verde: #5BD3A0; --rojo: #E06B6B; --ambar: #E2B65A; --borde: 1px solid var(--linea); --sombra: 0 10px 28px rgba(0,0,0,.4); --sombra-boton: none; --radio: 18px;
  --mat: #7FB7D9; --cie: #5BD3A0; --esp: #D98FA4; --soc: #E2B65A; --civ: #B39DDB; }
.fic-esferas .display, .fic-esferas h1, .fic-esferas h2, .fic-esferas h3, .fic-esferas .num { font-family: 'Fraunces', serif; font-variation-settings: 'opsz' 96; letter-spacing: -.01em; }
.fic-esferas .mano { font-family: 'Caveat', cursive; font-size: 19px; line-height: 1.25; font-weight: 500; }
.fic-esferas .hero { background: radial-gradient(90% 60% at 50% 20%, #2A3A33 0%, #0E1311 70%); }
.fic-esferas .hero::before { content: ''; position: absolute; inset: 0; opacity: .5;
  background-image: radial-gradient(circle at 30% 25%, rgba(255,255,255,.06) 0 2px, transparent 3px), radial-gradient(circle at 70% 60%, rgba(255,255,255,.05) 0 1.5px, transparent 2.5px); background-size: 37px 41px, 53px 47px; }
/* la esfera: piedra con anillos de inscripción; --p = porcentaje pulido; .on = encendida (jade) */
.esfera { position: relative; width: var(--d, 64px); height: var(--d, 64px); border-radius: 50%; flex: none;
  background: radial-gradient(circle at 35% 30%, #8E887B 0%, #5B574F 35%, #2A2824 100%); box-shadow: inset -6px -8px 14px rgba(0,0,0,.5), 0 6px 14px rgba(0,0,0,.45); }
.esfera::before { content: ''; position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from -90deg, rgba(91,211,160,.55) calc(var(--p, 0) * 1%), transparent 0); mix-blend-mode: screen; -webkit-mask: radial-gradient(circle, transparent 58%, #000 60%, #000 78%, transparent 80%); mask: radial-gradient(circle, transparent 58%, #000 60%, #000 78%, transparent 80%); }
.esfera::after { content: ''; position: absolute; inset: 18%; border-radius: 50%; border: 1px dashed rgba(241,239,230,.25); }
.esfera.on { background: radial-gradient(circle at 35% 30%, #BFF5DC 0%, #5BD3A0 40%, #1F6B4E 100%); box-shadow: 0 0 0 2px rgba(91,211,160,.25), 0 0 26px rgba(91,211,160,.55), inset -6px -8px 14px rgba(0,0,0,.25); }
.esfera.on::after { border-color: rgba(14,19,17,.45); }
.esfera.main { outline: 2px solid var(--oro); outline-offset: 4px; }
.pent { position: relative; height: 222px; }
.pent .nodo { position: absolute; display: grid; justify-items: center; gap: 4px; transform: translate(-50%, -50%); font: 700 11px 'Inter'; color: var(--suave); }
.pent .nodo b { font-family: 'Fraunces'; font-size: 15px; color: var(--texto); }
.pent .nodo b.off { color: var(--ambar); }
.pent svg.lineas { position: absolute; inset: 0; width: 100%; height: 100%; }
.inscripcion { display: grid; grid-template-columns: 26px 1fr; gap: 10px; align-items: start; padding: 8px 0; border-top: 1px solid var(--linea); }
.inscripcion:first-of-type { border-top: 0; }
.inscripcion .n { font: 700 11px 'Fraunces'; color: var(--acento); padding-top: 3px; }
.fic-esferas .frag { background: #F3EBD6; color: #2A2824; border: 1px solid #D9CDB0; box-shadow: 0 4px 0 #D9CDB0; }
.fic-esferas .frag .tag.hecho { background: #1F6B4E; color: #fff; } .fic-esferas .frag .tag.leyenda { background: #B07A2A; color: #fff; }
.fic-esferas .frag.bloq { background: transparent; color: var(--suave); border: 1px dashed var(--linea); box-shadow: none; }

/* ======================================================================
   LA EXPEDICIÓN
   ====================================================================== */
.fic-expedicion { --fondo: #EFE3C8; --capa: #E6D7B5; --tarjeta: #F7EEDC; --tarjeta-2: #E9DCBE; --linea: #B9A77F;
  --texto: #1F1B16; --suave: #5E5444; --tenue: #8E8370; --acento: #0E6E8C; --acento-tinta: #FFFFFF; --oro: #B9552A;
  --verde: #2E7D5B; --rojo: #B9552A; --ambar: #B07A2A; --borde: 1.5px solid #8E8370; --sombra: 0 3px 0 #B9A77F; --sombra-boton: 0 3px 0 #0A4A5E; --radio: 10px;
  --mat: #0E6E8C; --cie: #2E7D5B; --esp: #B9552A; --soc: #B07A2A; --civ: #5A4E8C; }
.fic-expedicion .display, .fic-expedicion h1, .fic-expedicion h2, .fic-expedicion h3, .fic-expedicion .num { font-family: 'Anton', 'Oswald', sans-serif; letter-spacing: .01em; font-weight: 400; }
.fic-expedicion .maquina { font-family: 'Special Elite', monospace; font-size: 14px; line-height: 1.45; }
.fic-expedicion .tabs { background: #E6D7B5; }
.fic-expedicion .hero { background: #E8DAB8; color: #1F1B16; }
.fic-expedicion .hero::before { content: ''; position: absolute; inset: 0; opacity: .35;
  background-image: repeating-radial-gradient(circle at 80% 110%, transparent 0 13px, rgba(14,110,140,.35) 13px 14px); }
.fic-expedicion .chip { background: #E9DCBE; }
/* la carta rota en cinco */
.carta { position: relative; border-radius: 8px; background: #E8DAB8; border: 1.5px solid #8E8370; overflow: hidden; }
.carta svg { display: block; width: 100%; height: auto; }
.pieza { fill: #F3E8CF; stroke: #8E8370; stroke-width: 1.2; }
.pieza.falta { fill: #D8C9A5; stroke-dasharray: 3 3; opacity: .55; }
.pieza-txt { font: 700 8px 'Inter'; fill: #1F1B16; letter-spacing: .06em; }
.pieza-txt.falta { fill: #8E8370; }
.fic-expedicion .frag { background: #FBF5E6; border: 1.5px solid #B9A77F; }
.fic-expedicion .frag .tag.hecho { background: #2E7D5B; color: #fff; } .fic-expedicion .frag .tag.leyenda { background: #B9552A; color: #fff; }
.trip { display: flex; gap: 8px; }
.trip .avatar { width: 36px; height: 36px; background: #E9DCBE; }
.trip .avatar.ok { outline: 2px solid var(--verde); outline-offset: 2px; }
.escala { display: flex; gap: 2px; align-items: flex-end; height: 22px; }
.escala i { flex: 1; background: #1F1B16; height: 8px; opacity: .25; }
.escala i.ok { height: 18px; opacity: 1; }
.escala i.r { height: 14px; background: var(--rojo); opacity: 1; }
.cofre { display: grid; grid-template-columns: 56px 1fr; gap: 12px; align-items: center; padding: 12px; border-radius: 10px; background: #1F1B16; color: #EFE3C8; }
.cofre .ico { width: 56px; height: 56px; border-radius: 8px; background: #B9552A; display: grid; place-items: center; font-size: 28px; }

/* ======================================================================
   EL RUIDO
   ====================================================================== */
.fic-ruido { --fondo: #050507; --capa: #0B0B0F; --tarjeta: #101016; --tarjeta-2: #17171F; --linea: #26262F;
  --texto: #EDEDED; --suave: #9A9AA6; --tenue: #5C5C68; --acento: #FF2D4A; --acento-tinta: #FFFFFF; --oro: #FFB547;
  --verde: #39D98A; --rojo: #FF2D4A; --ambar: #FFB547; --borde: 1px solid var(--linea); --sombra: 0 10px 28px rgba(0,0,0,.6); --sombra-boton: 0 0 18px rgba(255,45,74,.45); --radio: 14px;
  --mat: #4C8DFF; --cie: #2DD4BF; --esp: #FF7A9A; --soc: #FFB547; --civ: #A78BFA; }
.fic-ruido .display, .fic-ruido h1, .fic-ruido h2, .fic-ruido h3 { font-family: 'Libre Baskerville', serif; font-weight: 700; letter-spacing: .01em; }
.fic-ruido .num { font-family: 'Libre Baskerville', serif; font-weight: 700; }
.fic-ruido .titulo-neon { color: #FF3B5C; text-shadow: 0 0 6px rgba(255,59,92,.9), 0 0 22px rgba(255,45,74,.55); letter-spacing: .06em; }
.fic-ruido .glitch { font-family: 'Rubik Glitch', 'Libre Baskerville', serif; font-weight: 400; }
.fic-ruido .tty { font-family: 'VT323', monospace; font-size: 17px; line-height: 1.2; color: #B8F3C9; }
.fic-ruido .tty .amb { color: #FFB547; }
.fic-ruido .hero { background: radial-gradient(80% 50% at 50% 100%, #2A0A11 0%, #050507 70%); }
.fic-ruido .boton { box-shadow: var(--sombra-boton); }
.scan::before { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .18; background: repeating-linear-gradient(0deg, transparent 0 2px, rgba(0,0,0,.6) 2px 3px); }
.estatica { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.2' numOctaves='1' seed='7'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E"); background-size: 90px 90px; }
.medidor { position: relative; height: 16px; border-radius: 4px; overflow: hidden; background: #17171F; border: 1px solid var(--linea); }
.medidor i { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, #FF2D4A, #FF6B4A); }
.medidor i.est { opacity: .55; mix-blend-mode: screen; }
.panel { display: grid; grid-template-columns: repeat(8, 1fr); gap: 6px; }
.luz { aspect-ratio: 1; border-radius: 3px; background: #17171F; border: 1px solid var(--linea); position: relative; }
.luz.on { background: #39D98A; box-shadow: 0 0 10px rgba(57,217,138,.7); border-color: #39D98A; }
.luz.par { background: #FFB547; box-shadow: 0 0 8px rgba(255,181,71,.6); border-color: #FFB547; opacity: .8; }
.luz.off { background: #FF2D4A; opacity: .35; }
.fic-ruido .frag { background: #0B0B0F; border: 1px solid #26262F; }
.fic-ruido .frag .tag.hecho { background: #39D98A; color: #050507; } .fic-ruido .frag .tag.leyenda { background: #FFB547; color: #050507; }
.mapa-cr { position: relative; border-radius: 12px; background: #0B0B0F; border: 1px solid var(--linea); padding: 8px; }
.mapa-cr svg { display: block; width: 100%; height: auto; }
.mapa-cr .tierra { fill: #141420; stroke: #2A2A38; stroke-width: 4; stroke-linejoin: round; }
.mapa-cr .luzp { fill: #FFB547; }
.mapa-cr .luzp.v { fill: #39D98A; }
.mapa-cr .yo { fill: #FF2D4A; stroke: #fff; stroke-width: 1.5; }
.radar-ruido { position: relative; }
.radar-ruido .est { position: absolute; border-radius: 50%; opacity: .5; mix-blend-mode: screen; pointer-events: none; }