/* Capacitación Nebucor · paleta de catalogo.nebucor.com.mx */
:root {
  --navy: #000D2D; --royal: #123A9E; --azul: #2F7FE8; --cyan: #7FD0F7;
  --oro: #D59F3F; --oro-hi: #EFCB7C; --tinta: #08122F; --gris: #5A6987;
  --verde: #10B981; --rojo: #C2362F;
  --ui: 'Instrument Sans', system-ui, sans-serif; --disp: 'Archivo', sans-serif; --mono: 'JetBrains Mono', monospace; --pix: 'Press Start 2P', monospace;
  --oro-grad: linear-gradient(160deg, #FFF3CF 0%, #EFCB7C 30%, #D59F3F 65%, #F3D48E 100%);
  --fondo: radial-gradient(130% 80% at 60% 0%, #1747B8 0%, #0B2470 34%, #061650 58%, #000A26 100%);
  --card: radial-gradient(120% 90% at 50% 0%, #2A63E0 0%, #0E2F86 38%, #071A57 64%, #000A26 100%);
  --vidrio: linear-gradient(160deg, rgba(255,255,255,0.11), rgba(255,255,255,0.03));
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: #000A26; }
body { margin: 0; min-height: 100vh; min-height: 100dvh; font-family: var(--ui); color: #FFFFFF; background: var(--fondo); background-attachment: fixed; -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: var(--oro-hi); }
[hidden] { display: none !important; }
img { max-width: 100%; }

.pantalla { position: relative; max-width: 560px; margin: 0 auto; min-height: 100vh; min-height: 100dvh; padding: max(14px, env(safe-area-inset-top)) 18px max(22px, env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 14px; overflow-x: hidden; }
.brillo { position: fixed; pointer-events: none; border-radius: 50%; background: radial-gradient(closest-side, rgba(170,215,255,0.42), rgba(47,127,232,0.12) 55%, rgba(47,127,232,0) 78%); }
.rayo { position: fixed; top: -200px; width: 2px; height: 1600px; transform: rotate(20deg); pointer-events: none; background: linear-gradient(180deg, rgba(220,240,255,0.7), rgba(127,208,247,0.03) 60%); box-shadow: 0 0 16px rgba(127,208,247,0.5); }

.disp { font-family: var(--disp); font-weight: 900; font-stretch: 86%; line-height: 0.98; letter-spacing: -0.03em; margin: 0; }
.tw { background: linear-gradient(176deg, #FFFFFF 40%, #C7DBF5 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.tg { font-style: italic; padding-right: 0.12em; background: linear-gradient(180deg, #FFF1C6 0%, #EFCB7C 48%, #C8902F 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ceja { font-family: var(--mono); font-size: 10px; letter-spacing: 0.26em; font-weight: 700; color: var(--oro-hi); text-transform: uppercase; }
.suave { color: rgba(228,238,255,0.72); }
.chico { font-size: 13px; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 50px; padding: 0 20px; border-radius: 15px; border: 0; font-weight: 800; font-size: 16px; text-decoration: none; transition: transform .12s, opacity .12s, box-shadow .12s; }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .4; cursor: default; }
.btn-oro { color: #1A1200; background: var(--oro-grad); box-shadow: inset 0 1px 0 rgba(255,255,255,0.85), inset 0 -3px 8px rgba(120,80,10,0.22), 0 0 30px rgba(239,203,124,0.3), 0 12px 26px rgba(0,4,18,0.35); }
.btn-vidrio { color: #FFFFFF; font-weight: 700; background: linear-gradient(160deg, rgba(255,255,255,0.14), rgba(255,255,255,0.04)); border: 1px solid rgba(255,255,255,0.22); }
.ancho { width: 100%; }
.volver { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; font-size: 14px; font-weight: 600; text-decoration: none; background: none; border: 0; padding: 0; color: var(--oro-hi); }
.barra-sup { display: flex; justify-content: space-between; align-items: center; min-height: 44px; gap: 10px; }

/* ---------- entrar ---------- */
.entrar h1 { font-size: 42px; max-width: 240px; }
.entrar .masc { position: absolute; right: 14px; top: 70px; width: 150px; filter: drop-shadow(0 14px 20px rgba(0,4,18,0.55)); }
.entrar .logo { height: 30px; align-self: flex-start; filter: drop-shadow(0 4px 14px rgba(0,4,18,0.5)); }
.acceso { display: flex; flex-direction: column; gap: 8px; }
.lbl-o { font-size: 13px; font-weight: 600; color: rgba(228,238,255,0.75); margin-top: 4px; }
.lbl-o small { font-weight: 500; color: rgba(228,238,255,0.5); }
.campo-o { width: 100%; height: 52px; padding: 0 16px; border-radius: 14px; border: 1px solid rgba(255,255,255,0.22); background: rgba(255,255,255,0.08); color: #FFFFFF; font-size: 16px; outline: none; }
.campo-o::placeholder { color: rgba(228,238,255,0.4); }
.campo-o:focus { border-color: var(--oro-hi); box-shadow: 0 0 0 3px rgba(239,203,124,0.22); }
.pass { position: relative; }
.pass .campo-o { padding-right: 82px; }
.pass .ver { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); height: 36px; padding: 0 12px; border-radius: 10px; border: 0; background: rgba(255,255,255,0.1); color: rgba(228,238,255,0.85); font-size: 13px; font-weight: 600; }
.acceso .btn { margin-top: 12px; }
.error { padding: 12px 14px; border-radius: 12px; background: rgba(194,54,47,0.2); border: 1px solid rgba(255,140,130,0.4); color: #FFD9D5; font-size: 14.5px; line-height: 1.5; }
.paso-ac { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; border-radius: 14px; background: rgba(239,203,124,0.12); border: 1px solid rgba(239,203,124,0.3); }
.paso-ac b { font-family: var(--disp); font-weight: 800; font-size: 19px; color: var(--oro-hi); }
.paso-ac span { font-size: 14px; line-height: 1.5; color: rgba(228,238,255,0.8); }

/* ---------- ruta ---------- */
.xp { display: flex; align-items: center; gap: 6px; height: 32px; padding: 0 10px; border-radius: 10px; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.14); font-family: var(--mono); font-size: 12px; font-weight: 700; color: var(--oro-hi); }
.ava { width: 36px; height: 36px; border-radius: 50%; padding: 2px; background: linear-gradient(160deg, #FFF3CF, #D59F3F 60%, #F3D48E); border: 0; flex: none; }
.ava span { width: 100%; height: 100%; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: radial-gradient(circle at 35% 30%, #1F56D0, #061650 80%); font-family: var(--disp); font-weight: 800; font-size: 12px; color: var(--oro-hi); }
.vidrio { padding: 14px; border-radius: 16px; background: var(--vidrio); border: 1px solid rgba(255,255,255,0.15); box-shadow: inset 0 1px 0 rgba(255,255,255,0.15); }
.prog { height: 8px; border-radius: 4px; background: rgba(255,255,255,0.1); overflow: hidden; }
.prog i { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, #7FD0F7, #EFCB7C); box-shadow: 0 0 12px rgba(239,203,124,0.6); transition: width .3s; }
.lecciones { display: flex; flex-direction: column; gap: 6px; }
.lec { display: flex; align-items: center; gap: 12px; min-height: 54px; padding: 6px 12px; border-radius: 14px; text-decoration: none; color: #FFFFFF; border: 0; background: none; text-align: left; width: 100%; }
.lec.hecha { background: rgba(255,255,255,0.05); }
.lec.bloq { color: rgba(228,238,255,0.5); }
.lec .num { width: 32px; height: 32px; flex: none; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: var(--disp); font-weight: 800; font-size: 13px; border: 1.5px solid rgba(255,255,255,0.25); }
.lec.hecha .num { border: 0; background: linear-gradient(160deg, #6EE7B7, #10B981); }
.lec .tx { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.lec .tx b { font-weight: 600; font-size: 15px; }
.lec .tx small { font-size: 12.5px; color: rgba(228,238,255,0.58); }
.actual { display: flex; flex-direction: column; gap: 10px; padding: 12px; border-radius: 16px; background: radial-gradient(120% 120% at 80% 0%, #2A63E0 0%, #0E2F86 45%, #071A57 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,0.25), 0 0 0 1.5px var(--oro-hi), 0 0 26px rgba(239,203,124,0.3), 0 14px 30px rgba(0,4,18,0.45); }
.actual .num { width: 32px; height: 32px; flex: none; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: var(--disp); font-weight: 900; font-size: 14px; color: #1A1200; background: var(--oro-grad); }
.dos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.dos .btn { min-height: 46px; font-size: 14px; padding: 0 10px; }
.examen-lec { border: 1.5px dashed rgba(239,203,124,0.4); }

/* ---------- presentación ---------- */
.pres { position: fixed; inset: 0; z-index: 50; display: flex; background: #000A26; }
.pres .lam { position: relative; flex: 1; min-width: 0; display: flex; align-items: center; justify-content: center; background: #000D2D; }
.pres .lam img { width: 100%; height: 100%; object-fit: contain; display: block; }
.pres .subt { position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); max-width: 90%; padding: 8px 14px; border-radius: 10px; background: rgba(0,6,24,0.8); font-size: 14px; line-height: 1.4; text-align: center; }
.pres .riel { width: 168px; flex: none; padding: max(10px, env(safe-area-inset-top)) 12px max(12px, env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 8px; background: radial-gradient(140% 80% at 50% 0%, #1747B8 0%, #0B2470 40%, #061650 70%, #000A26 100%); box-shadow: -10px 0 30px rgba(0,4,18,0.5); }
.pres .cerrar { align-self: flex-end; width: 40px; height: 40px; border-radius: 12px; border: 0; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,0.1); color: #FFFFFF; }
.puntos { display: flex; gap: 3px; flex-wrap: wrap; }
.puntos i { flex: 1 1 8px; min-width: 6px; height: 4px; border-radius: 2px; background: rgba(255,255,255,0.14); }
.puntos i.v { background: var(--oro-hi); }
.puntos i.a { background: rgba(239,203,124,0.5); }
.audio { position: relative; align-self: center; width: 80px; height: 80px; padding: 0; border: 0; border-radius: 50%; background: none; }
.audio svg.anillo { position: absolute; inset: 0; }
.audio .dentro { position: absolute; left: 11px; top: 11px; width: 58px; height: 58px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--oro-grad); box-shadow: 0 0 22px rgba(239,203,124,0.5); }
.pres .acciones { margin-top: auto; display: flex; flex-direction: column; gap: 6px; }
.pres .acciones .btn { min-height: 46px; font-size: 14.5px; padding: 0 10px; }
.girar { display: none; }
@media (orientation: portrait) {
  .pres { flex-direction: column; }
  .pres .lam { flex: none; width: 100%; aspect-ratio: 16 / 9; margin-top: max(56px, env(safe-area-inset-top)); }
  .pres .riel { width: auto; flex: 1; box-shadow: none; background: none; padding-top: 16px; }
  .pres .cerrar { position: absolute; right: 12px; top: max(8px, env(safe-area-inset-top)); }
  .pres .subt { position: static; transform: none; max-width: none; margin: 10px 14px 0; }
  .girar { display: flex; align-items: center; gap: 8px; font-size: 13px; color: rgba(228,238,255,0.6); justify-content: center; }
}

/* ---------- actividades ---------- */
.tarjeta { position: relative; border-radius: 22px; padding: 20px; background: var(--card); box-shadow: inset 0 1px 0 rgba(255,255,255,0.25), inset 0 0 0 1px rgba(127,208,247,0.14), 0 24px 50px rgba(0,4,18,0.5); display: flex; flex-direction: column; gap: 12px; }
.tarjeta.blanca { background: #FFFFFF; color: var(--tinta); }
.pregunta { font-family: var(--disp); font-weight: 800; font-size: 21px; line-height: 1.22; letter-spacing: -0.2px; }
.opciones { display: flex; flex-direction: column; gap: 10px; }
.op { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 56px; padding: 10px 16px; border-radius: 14px; border: 1.5px solid rgba(255,255,255,0.22); background: rgba(255,255,255,0.06); color: #FFFFFF; font-weight: 600; font-size: 15.5px; line-height: 1.35; text-align: left; }
.op.bien { border-color: #6EE7B7; background: rgba(16,185,129,0.18); }
.op.mal { border-color: #FF8C82; background: rgba(194,54,47,0.2); }
.op.apagada { opacity: .45; }
.op .m { font-weight: 900; flex: none; }
.retro { padding: 13px 15px; border-radius: 14px; font-size: 14.5px; line-height: 1.5; }
.retro.bien { background: rgba(16,185,129,0.16); border: 1px solid rgba(110,231,183,0.4); color: #C9F7E3; }
.retro.mal { background: rgba(194,54,47,0.2); border: 1px solid rgba(255,140,130,0.4); color: #FFD9D5; }
.retro b { display: block; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.18em; margin-bottom: 4px; }
.frase { font-family: var(--disp); font-weight: 800; font-style: italic; font-size: 17px; line-height: 1.3; color: var(--oro-hi); margin-top: 6px; }
.pasos-act { display: grid; gap: 5px; }
.pasos-act i { height: 5px; border-radius: 3px; background: rgba(255,255,255,0.14); }
.pasos-act i.v { background: var(--oro-hi); box-shadow: 0 0 10px rgba(239,203,124,0.7); }
.empuja { margin-top: auto; }

/* juego pixel */
.pixel { position: fixed; inset: 0; z-index: 0; overflow: hidden; }
.pixel img.fondo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; image-rendering: pixelated; }
.pixel::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,8,38,0.55) 0%, rgba(0,8,38,0.15) 45%, rgba(0,8,38,0.4) 100%); }
.juego { position: relative; z-index: 1; }
.juego .pix { font-family: var(--pix); }
.caja-pix { padding: 18px; background: #FFFFFF; color: #0B1A44; border: 4px solid #0B1A44; box-shadow: 6px 6px 0 #000A26, inset 0 -6px 0 #DCE6F7; display: flex; flex-direction: column; gap: 12px; }
.caja-pix .tema { font-family: var(--pix); font-size: 10px; line-height: 1.6; color: #1F56D0; text-transform: uppercase; }
.caja-pix .frase-p { font-family: var(--disp); font-weight: 800; font-size: 19px; line-height: 1.28; }
.btn-pix { min-height: 60px; border: 4px solid #0B1A44; color: #FFFFFF; font-family: var(--pix); font-size: 11px; box-shadow: 4px 4px 0 #000A26, inset 0 -6px 0 rgba(0,0,0,0.22), inset 0 4px 0 rgba(255,255,255,0.3); }
.btn-pix.v { background: #21A365; } .btn-pix.f { background: #E2453C; } .btn-pix.az { background: #1F7AE0; } .btn-pix.gris { background: #5A6987; }
.btn-pix:disabled { cursor: default; }
.vidas { display: flex; gap: 6px; }
.globo { position: relative; padding: 14px; background: #FFFFFF; color: #0B1A44; border: 4px solid #0B1A44; box-shadow: 4px 4px 0 #000A26; }
.globo .pix { font-size: 9px; line-height: 1.6; display: block; margin-bottom: 6px; }
.globo p { margin: 0; font-size: 14px; line-height: 1.45; font-weight: 500; }
.masc-juego { display: flex; align-items: flex-end; gap: 6px; margin-top: auto; }
.masc-juego img { width: 128px; flex: none; margin-bottom: -22px; filter: drop-shadow(0 10px 16px rgba(0,4,18,0.5)); }

/* modelos */
.chips { display: grid; gap: 6px; }
.chip-m { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 4px; height: 96px; padding: 6px 2px; border-radius: 14px; border: 1.5px solid rgba(255,255,255,0.16); background: rgba(255,255,255,0.07); color: #FFFFFF; }
.chip-m img { max-width: 58px; max-height: 54px; object-fit: contain; }
.chip-m b { font-family: var(--disp); font-weight: 800; font-size: 12.5px; }
.chip-m.bien { border-color: #6EE7B7; background: rgba(16,185,129,0.18); }
.chip-m.mal { border-color: #FF8C82; background: rgba(194,54,47,0.2); }
.chip-m.apagada { opacity: .45; }
.cliente { display: flex; gap: 12px; padding: 16px; border-radius: 18px; background: #FFFFFF; color: var(--tinta); box-shadow: 0 18px 40px rgba(0,4,18,0.45); }
.cliente .ico { flex: none; width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: linear-gradient(160deg, #EAF1FC, #D9E5F7); }
.cliente .ceja { color: #C68A26; }
.cliente p { margin: 4px 0 0; font-family: var(--disp); font-weight: 700; font-size: 17px; line-height: 1.32; }
.nota-hl { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 14px; border: 1px dashed rgba(239,203,124,0.4); background: rgba(239,203,124,0.06); font-size: 12.5px; line-height: 1.45; color: rgba(228,238,255,0.8); }
.nota-hl img { width: 60px; flex: none; }

/* A/B */
.ab { position: relative; height: 170px; padding: 0; border-radius: 20px; overflow: hidden; border: 2px solid rgba(255,255,255,0.18); background: radial-gradient(120% 120% at 70% 0%, #2A63E0 0%, #0E2F86 45%, #071A57 100%); color: #FFFFFF; text-align: left; width: 100%; }
.ab .calle { position: absolute; left: 0; right: 0; bottom: 0; height: 54px; background: linear-gradient(180deg, #2A2F3A, #15181F); }
.ab .linea { position: absolute; left: 0; right: 0; bottom: 25px; height: 4px; background: repeating-linear-gradient(90deg, #F3D48E 0 22px, transparent 22px 40px); }
.ab img { position: absolute; right: 16px; bottom: 12px; height: 116px; filter: drop-shadow(0 10px 12px rgba(0,0,0,0.5)); }
.ab .et { position: absolute; left: 16px; top: 14px; }
.ab .et b { display: block; font-family: var(--disp); font-weight: 900; font-size: 34px; color: var(--oro-hi); line-height: 1; }
.ab.bien { border-color: #6EE7B7; box-shadow: 0 0 26px rgba(110,231,183,0.45); }
.ab.mal { border-color: #FF8C82; }
.ab.apagada { opacity: .5; }

/* ordenar */
.paso-o { display: flex; align-items: center; gap: 12px; min-height: 60px; padding: 8px 12px; border-radius: 14px; border: 1.5px solid rgba(255,255,255,0.16); background: rgba(255,255,255,0.06); color: #FFFFFF; text-align: left; font-size: 14.5px; line-height: 1.35; width: 100%; }
.paso-o .n { flex: none; width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: var(--disp); font-weight: 900; font-size: 15px; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,0.22); }
.paso-o.puesto { border-color: var(--oro-hi); background: rgba(239,203,124,0.10); }
.paso-o.puesto .n { background: var(--oro-grad); color: #1A1200; box-shadow: 0 0 14px rgba(239,203,124,0.4); }
.paso-o.bien { border-color: #6EE7B7; background: rgba(16,185,129,0.14); }
.paso-o.bien .n { background: linear-gradient(160deg, #6EE7B7, #10B981); color: #FFFFFF; }
.paso-o.mal { border-color: #FF8C82; background: rgba(194,54,47,0.18); }
.paso-o.mal .n { background: linear-gradient(160deg, #FF9A90, #C2362F); color: #FFFFFF; }

/* tarjetas */
.tj { min-height: 430px; overflow: hidden; }
.tj .foto { position: relative; height: 230px; display: flex; align-items: flex-end; justify-content: center; }
.tj .foto::before { content: ''; position: absolute; width: 220px; height: 220px; top: 0; left: 50%; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(closest-side, rgba(160,215,255,0.5), rgba(127,208,247,0) 75%); }
.tj .foto img { position: relative; max-height: 220px; filter: drop-shadow(0 18px 22px rgba(0,4,18,0.6)); }
.tj .dato { font-family: var(--disp); font-weight: 900; font-stretch: 86%; font-size: 104px; line-height: 0.9; letter-spacing: -5px; }
.tj .t { font-family: var(--disp); font-weight: 800; font-size: 23px; line-height: 1.15; }
.tj ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.tj li { display: flex; gap: 10px; font-size: 15px; line-height: 1.45; color: rgba(228,238,255,0.85); }
.tj li::before { content: ''; flex: none; margin-top: 7px; width: 6px; height: 6px; border-radius: 3px; background: var(--oro-hi); box-shadow: 0 0 8px rgba(239,203,124,0.9); }
.tj .dilo { padding: 18px; border-radius: 18px; background: #FFFFFF; color: var(--tinta); font-family: var(--disp); font-weight: 700; font-size: 19px; line-height: 1.3; }

/* fin de lección / resultados */
.medalla { position: relative; width: 136px; height: 136px; border-radius: 50%; padding: 5px; align-self: center; background: var(--oro-grad); box-shadow: inset 0 2px 0 rgba(255,255,255,0.8), 0 0 50px rgba(239,203,124,0.55), 0 20px 40px rgba(0,4,18,0.5); }
.medalla > div { width: 100%; height: 100%; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; background: radial-gradient(circle at 35% 30%, #1F56D0, #061650 80%); }
.medalla .grande { font-family: var(--disp); font-weight: 900; font-stretch: 86%; font-size: 44px; line-height: 0.9; letter-spacing: -2px; }
.medalla .peq { font-family: var(--mono); font-size: 10px; letter-spacing: 1.5px; color: rgba(228,238,255,0.8); margin-top: 4px; }
.etiqueta { align-self: center; display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; font-family: var(--mono); font-size: 10.5px; letter-spacing: 1.5px; font-weight: 700; }
.etiqueta.bien { background: rgba(16,185,129,0.16); border: 1px solid rgba(110,231,183,0.45); color: #A7F3D0; }
.etiqueta.mal { background: rgba(194,54,47,0.18); border: 1px solid rgba(255,140,130,0.45); color: #FFD0CA; }
.tema-fila { display: flex; flex-direction: column; gap: 4px; }
.tema-fila .f { display: flex; justify-content: space-between; font-size: 13.5px; }
.tema-fila .b { height: 6px; border-radius: 3px; background: rgba(255,255,255,0.1); overflow: hidden; }
.tema-fila .b i { display: block; height: 100%; border-radius: 3px; }
.centro { text-align: center; align-items: center; }

/* capas */
#capa:empty { display: none; }
.modal-fondo { position: fixed; inset: 0; z-index: 100; background: rgba(0,6,24,0.7); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); display: flex; align-items: center; justify-content: center; padding: 20px; }
.modal { width: 100%; max-width: 420px; border-radius: 22px; padding: 24px; background: var(--fondo); box-shadow: inset 0 1px 0 rgba(255,255,255,0.2), 0 40px 80px rgba(0,4,18,0.55); display: flex; flex-direction: column; gap: 12px; }
.modal h2 { margin: 0; font-family: var(--disp); font-weight: 900; font-size: 26px; }
.modal p { margin: 0; color: rgba(228,238,255,0.75); line-height: 1.5; }
#aviso { position: fixed; left: 50%; top: max(14px, env(safe-area-inset-top)); z-index: 120; transform: translate(-50%, -12px); opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; padding: 12px 18px; border-radius: 14px; background: #0B1A44; color: #FFFFFF; font-size: 14.5px; font-weight: 600; box-shadow: 0 16px 40px rgba(0,4,18,0.45); max-width: calc(100vw - 32px); }
#aviso.on { opacity: 1; transform: translate(-50%, 0); }
#aviso.mal { background: #7D1F1A; }
.cargando { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; }
.cargando img { height: 40px; }
.spin { width: 28px; height: 28px; border-radius: 50%; border: 3px solid rgba(255,255,255,0.18); border-top-color: var(--oro-hi); animation: gira .8s linear infinite; }
@keyframes gira { to { transform: rotate(360deg); } }
.demo-tag { padding: 3px 8px; border-radius: 6px; background: rgba(239,203,124,0.18); color: var(--oro-hi); font-family: var(--mono); font-size: 10px; letter-spacing: 0.15em; font-weight: 700; }