/* RAVA Nexus: capa visual de la app del cliente. Solo apariencia: quitar este archivo
   devuelve el estilo anterior. Aprobado por Erick el 6 nov 2026 (prototipos v2). */
:root {
  --fondo: #0B0718; --panel: #1b1336; --panel2: #2B2050; --borde: #ffffff1c; --borde2: #ffffff30;
  --texto: #F8F7FF; --tenue: #B9B3D3;
  --cian: #26E5F3; --cian-suave: rgba(38, 229, 243, .16); --naranja: #8257FF; --naranja2: #A26BFF;
  --oro: #FFD65A; --rosa: #FF4BC1; --verde: #3DF29A; --rojo: #FF3B4E; --ambar: #FFD65A;
  --display: "Barlow Condensed", "Arial Narrow", system-ui, sans-serif;
  --body: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: var(--body);
  --radio: 20px;
}
body { background: radial-gradient(90% 40% at 72% 0, #3a1d86 0, transparent 70%), var(--fondo); background-attachment: fixed; }

/* Sin desplazamiento: una transformación aquí desacomodaría la barra fija */
.pantalla.activa { animation-name: nx-entra; }
@keyframes nx-entra { from { opacity: 0; } to { opacity: 1; } }

h1, h2 { font: italic 800 clamp(46px, 13.5vw, 60px)/.92 var(--display); text-transform: uppercase; letter-spacing: .002em; }
h2 { font-size: clamp(40px, 12vw, 52px); }
h1 em { color: var(--cian); text-shadow: none; }
.eti { font: 700 12px/1.2 var(--body); letter-spacing: .06em; }

/* Barra de arriba */
.logo { font: italic 800 25px/1 var(--display); letter-spacing: .09em; }
.logo i { width: 22px; height: 24px; border-radius: 0; transform: none; box-shadow: none; background: linear-gradient(145deg, var(--cian), var(--naranja));
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }
.pildora { min-height: 36px; padding: 0 13px; color: var(--texto); font: 700 13px var(--body); border-color: var(--borde); background: #120b28b8; backdrop-filter: blur(10px); }
.barra-der { display: flex; align-items: center; gap: 7px; }
.saldo-pill { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 13px 0 9px; border-radius: 18px; background: #120b28cc; backdrop-filter: blur(10px);
  box-shadow: inset 0 0 0 1px var(--borde); font: 700 21px/1 var(--display); color: var(--oro); font-variant-numeric: tabular-nums; }
.saldo-pill svg { width: 18px; height: 18px; }

/* Botón firma: inclinado, con canto. .cw da el canto porque el recorte no deja sombra propia */
.cw { display: block; width: 100%; filter: drop-shadow(4px 5px 0 var(--naranja)); }
.cta { min-height: 62px; border-radius: 0; font: italic 800 27px/1 var(--display); letter-spacing: .03em; color: #05151b; background: linear-gradient(180deg, #8df6fb, var(--cian));
  box-shadow: none; clip-path: polygon(14px 0, 100% 0, calc(100% - 14px) 100%, 0 100%); padding: 0 22px; }
.cta:active { transform: translate(3px, 4px); }
.cta:disabled { filter: none; color: var(--tenue); background: #2b2050; }
.cta .flecha { width: 22px; height: 22px; }
.cta.late { animation: nx-late 1.6s ease-in-out infinite; }
@keyframes nx-late { 50% { filter: brightness(1.18); } }
.sec { border-radius: 25px; border: 0; background: #ffffff14; font: 700 15px var(--body); }
.sec:active { background: #ffffff24; }

/* Superficies */
.tarjeta, .paquete { background: linear-gradient(150deg, var(--panel2), #191231); border: 0; box-shadow: inset 0 0 0 1px var(--borde); }
input { background: #ffffff0f; border-color: var(--borde); font-family: var(--body); font-weight: 600; }
.bisel { padding: 12px; border-radius: 28px; background: linear-gradient(160deg, #39325c, #16112b); box-shadow: 0 0 60px #26e5f340, inset 0 0 0 1px #ffffff2a; }
.bisel::after { display: none; }
.bisel canvas { border-radius: 17px; background: #06040e; }

/* Barra inferior: solo pantallas a las que de verdad se puede ir */
.dock { position: fixed; z-index: 8; left: 50%; bottom: calc(14px + env(safe-area-inset-bottom)); translate: -50% 0; width: 232px; height: 68px; display: flex; align-items: center; justify-content: space-around;
  padding: 0 8px; border-radius: 26px; background: #1b1336e6; backdrop-filter: blur(16px); box-shadow: inset 0 0 0 1px var(--borde), 0 14px 30px #0009; }
.dk { position: relative; width: 92px; height: 60px; padding: 0; border: 0; background: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; font: 700 11.5px/1 var(--body); color: var(--tenue); }
.dk svg { width: 23px; height: 23px; }
.dk .hx { display: none; }
.dk.on { color: var(--texto); }
.dk.on .hx { display: block; position: absolute; left: 50%; top: -22px; width: 60px; height: 66px; translate: -50% 0; filter: drop-shadow(0 0 12px #26e5f399); }
.dk.on .i { position: absolute; top: -1px; color: #05151b; }
.dk.on span { position: absolute; bottom: 3px; }

/* 1 · Entrada */
#entrada { padding: 0 0 calc(18px + env(safe-area-inset-bottom)); gap: 0; }
#entrada .escena { position: relative; min-height: 340px; padding: calc(14px + env(safe-area-inset-top)) max(20px, env(safe-area-inset-right)) 18px max(20px, env(safe-area-inset-left)); display: flex; flex-direction: column; gap: 14px;
  background: linear-gradient(180deg, #0b071899 0, transparent 34%, transparent 70%, var(--fondo) 100%), url(img/robot-bienvenida.jpg) 78% 77% / 120% auto no-repeat; }
#entrada .hero h1 { font-size: clamp(38px, 11.5vw, 46px); }
#entrada .hero { display: grid; gap: 8px; grid-template-columns: minmax(0, 1fr); margin: 0; }
#entrada .bisel { position: absolute; right: 16px; bottom: 12px; width: 88px; padding: 6px; border-radius: 15px; }
#entrada .bisel canvas { border-radius: 10px; }
#entrada .hoja { padding: 16px max(20px, env(safe-area-inset-right)) 0 max(20px, env(safe-area-inset-left)); display: grid; gap: 12px; }
.pasos { gap: 6px; }
.paso { padding: 7px 8px; text-align: center; border: 0; border-radius: 12px; background: #ffffff0d; }
.paso span { font: 800 13px var(--body); letter-spacing: 0; }
.paso b { font: 700 12px/1.15 var(--body); color: var(--tenue); }

/* 2 · Inicio: el video en vivo es el héroe; sin señal se ve el render */
#inicio { position: relative; padding-top: 0; padding-bottom: calc(104px + env(safe-area-inset-bottom)); }
#inicio .barra { position: absolute; z-index: 3; left: max(18px, env(safe-area-inset-left)); right: max(18px, env(safe-area-inset-right)); top: calc(14px + env(safe-area-inset-top)); }
#inicio .saludo { position: absolute; z-index: 3; left: max(18px, env(safe-area-inset-left)); right: max(18px, env(safe-area-inset-right)); top: calc(62px + env(safe-area-inset-top)); pointer-events: none; }
#inicio .saludo small { display: block; font: 700 14px/1.2 var(--body); color: var(--tenue); }
#inicio .saludo h1 { font-size: clamp(44px, 13.5vw, 56px); }
#marcoInicio { margin: 0 calc(-1 * max(18px, env(safe-area-inset-right))) 0 calc(-1 * max(18px, env(safe-area-inset-left))); height: clamp(350px, 54vh, 470px); aspect-ratio: auto; border: 0; border-radius: 0; box-shadow: none; background: var(--fondo); }
#marcoInicio > .visor { display: none; }
#marcoInicio::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, #0b0718e6 0, transparent 34%, transparent 66%, var(--fondo) 100%); }
#marcoInicio .sin-video { z-index: 0; align-content: end; padding-bottom: 54px; background: url(img/robot-heroe.jpg) 50% 34% / cover no-repeat, var(--fondo); }
#marcoInicio .sin-video .anillo { width: 18px; height: 18px; border-width: 2px; }
.en-vivo { left: auto; right: 18px; top: auto; bottom: 14px; z-index: 2; font: 700 12px var(--body); letter-spacing: .03em; background: #120b28b8; height: 30px; padding: 0 12px; }
.estado-robot { z-index: 2; right: 96px; bottom: 14px; min-height: 30px; font: 700 12.5px/1.2 var(--body); text-shadow: 0 1px 6px #000; }
#cajaFila { order: 1; }
#inicio .saldo { order: 2; }
#errInicio { order: 3; }
.saldo .cifra b { font: italic 800 48px/1 var(--display); color: var(--oro); }
.mas { border: 0; border-radius: 22px; background: #ffd65a22; color: var(--oro); font: 700 14px var(--body); }

/* Fila: antesala de turno con el lugar en un hexágono */
.boleto { position: relative; display: grid; grid-template-columns: 112px minmax(0, 1fr); align-items: center; gap: 14px; }
.turno-hex { position: relative; width: 112px; height: 124px; display: grid; place-items: center; text-align: center; }
.turno-hex svg { position: absolute; inset: 0; width: 100%; height: 100%; filter: drop-shadow(0 0 12px #8257ffa0); }
.turno-hex b { position: relative; font: italic 800 72px/.9 var(--display); color: var(--texto); font-variant-numeric: tabular-nums; }
.boleto .eti { display: block; margin-bottom: 7px; }
.boleto .tenue { margin-top: 8px; line-height: 1.35; }
.fila-puntos i { width: 13px; height: 14px; border-radius: 0; background: #ffffff2e; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }
.fila-puntos i.yo { background: var(--cian); box-shadow: none; }
.fila-puntos i.maneja { background: var(--rosa); }

/* 3 · Comprar */
#comprar, #pago { padding-bottom: calc(104px + env(safe-area-inset-bottom)); }
#pago { padding-bottom: calc(28px + env(safe-area-inset-bottom)); }
.paquete { padding: 14px 16px; border-radius: 22px; }
.paquete.destacado { padding-block: 24px 20px; border: 0; background: linear-gradient(135deg, #5a2bd8, #2a1763 62%, #3a1045); box-shadow: inset 0 0 0 1.5px var(--oro), 0 16px 34px -14px #8257ffb0; }
.ficha, .destacado .ficha { width: auto; min-width: 58px; height: auto; border: 0; border-radius: 0; background: none; font: italic 800 56px/.9 var(--display); color: var(--oro); }
.destacado .ficha { font-size: 78px; }
.paquete .info b { font: 800 16px/1.2 var(--body); }
.paquete .precio { font: italic 800 29px/1 var(--display); }
.etiqueta { top: -11px; left: 16px; right: auto; padding: 4px 11px; font: 800 11.5px/1.1 var(--body); letter-spacing: .05em; background: var(--oro); color: #2c1d00; }
.ahorro { font: 700 12.5px var(--body); }
.prueba { border: 0; border-radius: 12px; background: #ffd65a17; color: var(--oro); font-weight: 700; }
.total b { font: italic 800 38px/1 var(--display); }

/* 5 y 6 · Te toca y fin */
#llamado h1 { font-size: clamp(62px, 18vw, 80px); color: var(--cian); }
.cuenta { box-shadow: 0 0 34px -6px #26e5f380; }
.cuenta b { font: italic 800 58px/1 var(--display); }
.cuenta .fondo-anillo { stroke: #ffffff1f; }
.resumen .tarjeta { text-align: left; }
.resumen b { font: italic 800 46px/1 var(--display); }
.resumen .tarjeta + .tarjeta b { color: var(--oro); }

/* 7 · Cabina: la cámara manda; los controles son pocos y de vidrio oscuro */
#cabina > .visor { display: none; }
.vidrio { background: #0d0820b8; border: 0; box-shadow: inset 0 0 0 1px var(--borde); }
.hud { background: linear-gradient(#07050fa0, transparent); }
.chip { font: 700 13px var(--body); padding: 0 12px; height: 34px; }
.reloj-caja { border-radius: 20px; padding: 5px 20px 7px; }
.reloj { font: italic 800 34px/1 var(--display); }
.terminar { min-height: 44px; font: 700 14px var(--body); letter-spacing: 0; text-transform: none; padding: 0 18px; border-radius: 22px; }
.terminar:active { background: #ff3b4e66; }
.espejo { border-radius: 14px; }
.espejo span { font: 700 9.5px var(--body); letter-spacing: .02em; text-transform: none; }
.aviso { font-family: var(--body); }
.stick { border: 0; border-radius: 0; background: none; box-shadow: none; }
.stick::before { display: none; }
.stick .flechas .marco-hex { fill: #0d082070; stroke: var(--cian); stroke-opacity: .65; stroke-width: 2.5; stroke-linejoin: round; }
.bola { background: radial-gradient(circle at 36% 30%, #e5feff, var(--cian) 46%, #0f7f96); box-shadow: 0 0 24px #26e5f3a0; }
.vel { font: 700 12px var(--body); letter-spacing: .02em; text-transform: none; }
.gestos-txt { font: 700 10.5px var(--body); letter-spacing: .02em; text-transform: none; }
.gestos button.puesto { border-color: transparent; background: var(--naranja); box-shadow: 0 0 18px #8257ffa0; }
.gira { font: 700 11px var(--body); letter-spacing: 0; text-transform: none; }
@media (orientation: portrait) {
  .mandos { background: linear-gradient(#0d0820, var(--fondo)); }
}

/* Celular acostado fuera de la cabina: el héroe no debe comerse la pantalla */
@media (orientation: landscape) and (max-height: 500px) {
  #marcoInicio { height: 250px; }
  .dock { display: none; }
  #inicio, #comprar { padding-bottom: calc(28px + env(safe-area-inset-bottom)); }
  #entrada .escena { background-size: 60% auto; background-position: 92% 74%; }
}