/*
 * Neola Kiosco · ingreso y cambio de clave
 * A la izquierda la marca y el formulario; a la derecha la escena «del toque
 * a la cocina»: el tótem recibe toques, el ticket sale y viaja por la línea
 * Kiosco → Hub → Cocina y el número aparece en la pantalla de llamados.
 */

.ingreso {
    min-height: 100vh;
    min-height: 100dvh;
    display: grid;
    grid-template-columns: minmax(420px, 560px) minmax(0, 1fr);
    background: var(--papel);
}

/* ------------------------------------------------------------------
   Columna del formulario
   ------------------------------------------------------------------ */
.ingreso__lado {
    display: flex;
    flex-direction: column;
    padding: 40px 56px 32px;
    min-width: 0;
}
.ingreso__marca { font-size: 28px; }
.ingreso__marca .marca { color: var(--azul); }
.ingreso__centro {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    max-width: 380px;
    padding: 48px 0;
}
.ingreso__titulo { font-size: 30px; font-weight: 600; letter-spacing: -.02em; line-height: 1.15; }
.ingreso__bajada { margin-top: 10px; color: var(--tinta-3); font-size: 15px; line-height: 1.55; }
.ingreso__form { display: grid; gap: 18px; margin-top: 32px; }
.ingreso__form .entrada { height: 46px; font-size: 15px; border-radius: 12px; }
.ingreso__form .entrada:focus { border-radius: 12px; }
.ingreso__form .btn { height: 48px; font-size: 15px; border-radius: 12px; margin-top: 6px; }
.ingreso__clave { position: relative; }
.ingreso__clave .entrada { padding-right: 48px; }
.ingreso__ver {
    position: absolute;
    top: 50%;
    right: 6px;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: var(--tinta-3);
    display: grid;
    place-items: center;
    cursor: pointer;
}
.ingreso__ver:hover { background: var(--papel-2); color: var(--tinta); }
.ingreso__ver .ico { width: 19px; height: 19px; }
.ingreso__pie {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    color: var(--tinta-3);
    font-size: var(--t-s);
}
.ingreso__pie p { max-width: 330px; line-height: 1.5; }
.ingreso__otro { margin-top: 18px; font-size: var(--t-s); color: var(--tinta-3); }
.ingreso__otro a { font-weight: 500; }

.ingreso .reglas-clave { margin-top: -4px; }

/* ------------------------------------------------------------------
   Escena
   ------------------------------------------------------------------ */
.escena {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
    padding: 56px 56px 28px;
    background: var(--riel);
    color: #fff;
    overflow: hidden;
}
:root[data-tema="oscuro"] .escena { background: #0A0F26; }
@media (prefers-color-scheme: dark) { :root:not([data-tema="claro"]) .escena { background: #0A0F26; } }

.escena__texto { position: relative; z-index: 1; max-width: 460px; }
.escena__texto h2 { font-size: 30px; font-weight: 600; letter-spacing: -.02em; line-height: 1.15; color: #fff; }
.escena__texto p { margin-top: 10px; font-size: 15px; line-height: 1.6; color: #C9CFE4; }
.escena__lienzo {
    flex: 1;
    min-height: 0;
    display: grid;
    place-items: center;
}
.escena svg.escena__svg {
    width: 100%;
    height: 100%;
    max-height: calc(100dvh - 210px);
    max-width: 760px;
    overflow: visible;
    font-family: var(--fuente);
}
.escena__rotulo {
    font-size: 13px;
    font-weight: 500;
    fill: #C9CFE4;
    text-anchor: middle;
}

/* Piezas de la escena: la clase base es el estado final (así se ve quieta). */
.esc-anim { animation-duration: 12s; animation-iteration-count: infinite; animation-fill-mode: both; animation-timing-function: linear; }
.esc-centro { transform-box: fill-box; transform-origin: center; }

/* Dedo: entra, toca dos platos, confirma y se retira */
.esc-dedo { opacity: 0; transform: translate(300px, 520px); animation-name: esc-dedo; }
@keyframes esc-dedo {
    0%, 3% { opacity: 0; transform: translate(300px, 520px) scale(1); }
    5% { opacity: 1; transform: translate(268px, 440px) scale(1); animation-timing-function: cubic-bezier(.45, 0, .25, 1); }
    10% { opacity: 1; transform: translate(133px, 174px) scale(1); }
    10.83% { transform: translate(133px, 174px) scale(.9); }
    12.5% { transform: translate(133px, 174px) scale(1); }
    15% { transform: translate(133px, 174px) scale(1); animation-timing-function: cubic-bezier(.45, 0, .25, 1); }
    23.33% { transform: translate(231px, 304px) scale(1); }
    24.17% { transform: translate(231px, 304px) scale(.9); }
    25.83% { transform: translate(231px, 304px) scale(1); }
    28% { transform: translate(231px, 304px) scale(1); animation-timing-function: cubic-bezier(.45, 0, .25, 1); }
    36.67% { opacity: 1; transform: translate(236px, 428px) scale(1); }
    37.5% { transform: translate(236px, 428px) scale(.9); }
    39.17% { transform: translate(236px, 428px) scale(1); }
    41% { opacity: 1; transform: translate(236px, 428px) scale(1); animation-timing-function: cubic-bezier(.45, 0, .55, 1); }
    46%, 100% { opacity: 0; transform: translate(300px, 520px) scale(1); }
}

/* Ondas del toque (naranja: el momento de la acción) */
.esc-onda { opacity: 0; transform: scale(.3); }
.esc-onda--a { animation-name: esc-onda-a; }
.esc-onda--b { animation-name: esc-onda-b; }
.esc-onda--c { animation-name: esc-onda-c; }
@keyframes esc-onda-a { 0%, 10.4% { opacity: 0; transform: scale(.3); } 10.9% { opacity: 1; transform: scale(.45); } 16%, 100% { opacity: 0; transform: scale(1.9); } }
@keyframes esc-onda-b { 0%, 23.7% { opacity: 0; transform: scale(.3); } 24.2% { opacity: 1; transform: scale(.45); } 29.5%, 100% { opacity: 0; transform: scale(1.9); } }
@keyframes esc-onda-c { 0%, 37.1% { opacity: 0; transform: scale(.3); } 37.6% { opacity: 1; transform: scale(.5); } 43%, 100% { opacity: 0; transform: scale(2.2); } }

/* Platos que vuelan al carrito en arco */
.esc-vuela { opacity: 0; }
.esc-vuela--a { animation-name: esc-vuela-a; }
.esc-vuela--b { animation-name: esc-vuela-b; }
@keyframes esc-vuela-a {
    0%, 10.8% { opacity: 0; transform: translate(133px, 172px) scale(1); }
    11% { opacity: 1; transform: translate(133px, 172px) scale(1); animation-timing-function: cubic-bezier(.2, .6, .4, 1); }
    13.6% { opacity: 1; transform: translate(168px, 262px) scale(.85); animation-timing-function: cubic-bezier(.6, 0, .9, .6); }
    16.6% { opacity: 1; transform: translate(110px, 426px) scale(.45); }
    17%, 100% { opacity: 0; transform: translate(110px, 426px) scale(.4); }
}
@keyframes esc-vuela-b {
    0%, 24.1% { opacity: 0; transform: translate(231px, 302px) scale(1); }
    24.3% { opacity: 1; transform: translate(231px, 302px) scale(1); animation-timing-function: cubic-bezier(.2, .6, .4, 1); }
    27% { opacity: 1; transform: translate(196px, 352px) scale(.85); animation-timing-function: cubic-bezier(.6, 0, .9, .6); }
    29.9% { opacity: 1; transform: translate(110px, 426px) scale(.45); }
    30.3%, 100% { opacity: 0; transform: translate(110px, 426px) scale(.4); }
}

/* Carrito: cantidad y total */
.esc-c0, .esc-c1 { opacity: 0; }
.esc-c2 { opacity: 1; }
.esc-c0 { animation-name: esc-c0; }
.esc-c12 { opacity: 1; animation-name: esc-c12; }
.esc-c1 { animation-name: esc-c1; }
.esc-c2 { animation-name: esc-c2; }
@keyframes esc-c0 { 0%, 16.6% { opacity: 1; } 16.7%, 97.4% { opacity: 0; } 97.5%, 100% { opacity: 1; } }
@keyframes esc-c1 { 0%, 16.6% { opacity: 0; } 16.7%, 29.9% { opacity: 1; } 30%, 100% { opacity: 0; } }
@keyframes esc-c12 { 0%, 16.6% { opacity: 0; } 16.7%, 97.4% { opacity: 1; } 97.5%, 100% { opacity: 0; } }
@keyframes esc-c2 { 0%, 29.9% { opacity: 0; } 30%, 95% { opacity: 1; } 97.4%, 100% { opacity: 0; } }

.esc-insignia { animation-name: esc-insignia; }
@keyframes esc-insignia {
    0%, 16.4% { transform: scale(1); }
    17.6% { transform: scale(1.35); }
    19% { transform: scale(1); }
    29.7% { transform: scale(1); }
    30.9% { transform: scale(1.35); }
    32.3%, 100% { transform: scale(1); }
}
.esc-carrito { fill: #3F6CDF; animation-name: esc-carrito; }
@keyframes esc-carrito { 0%, 37.2% { fill: #3F6CDF; } 37.8% { fill: #2F55BF; } 39.5%, 100% { fill: #3F6CDF; } }

/* Confirmación en la pantalla del tótem */
.esc-confirmacion { opacity: 1; animation-name: esc-confirmacion; }
@keyframes esc-confirmacion { 0%, 40% { opacity: 0; } 41.7%, 93.3% { opacity: 1; } 95%, 100% { opacity: 0; } }

/* Ticket que se imprime */
.esc-ticket { transform: translateY(0); opacity: 1; animation-name: esc-ticket; }
@keyframes esc-ticket {
    0%, 40% { transform: translateY(-104px); opacity: 1; animation-timing-function: cubic-bezier(.3, .1, .3, 1); }
    48.3% { transform: translateY(0); opacity: 1; }
    50% { transform: translateY(0); opacity: 1; }
    53.3%, 98.9% { transform: translateY(0); opacity: 0; }
    99%, 100% { transform: translateY(-104px); opacity: 0; }
}

/* El pedido viaja por la línea: Kiosco → Hub → Cocina → pantalla de llamados */
.esc-ficha { opacity: 0; transform: translate(604px, 268px) scale(0); animation-name: esc-ficha; }
@keyframes esc-ficha {
    0%, 51.6% { opacity: 0; transform: translate(250px, 545px) scale(0); }
    52.5% { opacity: 1; transform: translate(250px, 545px) scale(1); animation-timing-function: cubic-bezier(.45, 0, .55, 1); }
    55.8% { opacity: 1; transform: translate(372px, 545px) scale(1); }
    57.5% { opacity: 1; transform: translate(372px, 545px) scale(1); animation-timing-function: cubic-bezier(.45, 0, .55, 1); }
    61.7% { opacity: 1; transform: translate(488px, 545px) scale(1); }
    63.3% { opacity: 1; transform: translate(488px, 545px) scale(1); animation-timing-function: cubic-bezier(.45, 0, .55, 1); }
    67.5% { opacity: 1; transform: translate(604px, 545px) scale(1); }
    70.8% { opacity: 1; transform: translate(604px, 545px) scale(1); animation-timing-function: cubic-bezier(.45, 0, .55, 1); }
    76.7% { opacity: 1; transform: translate(604px, 270px) scale(1); }
    78.3%, 100% { opacity: 0; transform: translate(604px, 268px) scale(0); }
}

/* La línea se va pintando detrás del pedido (pathLength = 100) */
.esc-progreso { stroke-dasharray: 100; stroke-dashoffset: 0; opacity: 1; animation-name: esc-progreso; }
@keyframes esc-progreso {
    0%, 52.5% { stroke-dashoffset: 100; opacity: 1; animation-timing-function: cubic-bezier(.45, 0, .55, 1); }
    55.8%, 57.5% { stroke-dashoffset: 80.7; animation-timing-function: cubic-bezier(.45, 0, .55, 1); }
    61.7%, 63.3% { stroke-dashoffset: 62.3; animation-timing-function: cubic-bezier(.45, 0, .55, 1); }
    67.5%, 70.8% { stroke-dashoffset: 43.9; animation-timing-function: cubic-bezier(.45, 0, .55, 1); }
    76.7%, 93.3% { stroke-dashoffset: 0; opacity: 1; }
    95% { stroke-dashoffset: 0; opacity: 0; }
    96%, 100% { stroke-dashoffset: 100; opacity: 0; }
}

.esc-luz { opacity: 1; }
.esc-luz--1 { animation-name: esc-luz-1; }
.esc-luz--2 { animation-name: esc-luz-2; }
.esc-luz--3 { animation-name: esc-luz-3; }
@keyframes esc-luz-1 { 0%, 55.4% { opacity: 0; } 56.6%, 93.3% { opacity: 1; } 95%, 100% { opacity: 0; } }
@keyframes esc-luz-2 { 0%, 61.3% { opacity: 0; } 62.5%, 93.3% { opacity: 1; } 95%, 100% { opacity: 0; } }
@keyframes esc-luz-3 { 0%, 67.1% { opacity: 0; } 68.3%, 93.3% { opacity: 1; } 95%, 100% { opacity: 0; } }

/* Pantalla de llamados */
.esc-tv-prep { opacity: 0; animation-name: esc-tv-prep; }
@keyframes esc-tv-prep { 0%, 76.7% { opacity: 0; } 78.3%, 85% { opacity: 1; } 86.7%, 100% { opacity: 0; } }
.esc-tv-listo { opacity: 1; animation-name: esc-tv-listo; }
@keyframes esc-tv-listo { 0%, 85% { opacity: 0; transform: scale(.85); } 86.7% { opacity: 1; transform: scale(1.08); } 88.3%, 93.3% { opacity: 1; transform: scale(1); } 95%, 100% { opacity: 0; transform: scale(1); } }
.esc-tv-baja { transform: translateY(24px); animation-name: esc-tv-baja; }
@keyframes esc-tv-baja { 0%, 85% { transform: translateY(0); } 86.7%, 95% { transform: translateY(24px); } 97.5%, 100% { transform: translateY(0); } }

/* ------------------------------------------------------------------
   Pantallas angostas: sin escena
   ------------------------------------------------------------------ */
@media (max-width: 1100px) {
    .ingreso { grid-template-columns: minmax(400px, 480px) minmax(0, 1fr); }
    .ingreso__lado { padding: 36px 40px 28px; }
    .escena { padding: 44px 36px 24px; }
}

@media (max-width: 900px) {
    .ingreso { grid-template-columns: minmax(0, 1fr); }
    .escena { display: none; }
    .ingreso__lado { padding: 24px 20px calc(20px + env(safe-area-inset-bottom)); align-items: center; }
    .ingreso__marca { align-self: flex-start; font-size: 24px; }
    .ingreso__centro { padding: 40px 0 32px; }
    .ingreso__titulo { font-size: 26px; }
    .ingreso__pie { width: 100%; max-width: 380px; }
}

/* Movimiento reducido: la escena queda quieta en su estado final. */
@media (prefers-reduced-motion: reduce) {
    .escena .esc-anim { animation: none !important; }
}