:root {
    --navy: #111c2d;
    --navy-2: #1a2537;
    --navy-line: #26324a;
    --primary: #00a1ff;
    --primary-600: #0074ba;
    --cyan: #00d4ff;
    --bg: color-mix(in srgb, var(--primary) 3%, #f6f7f9);
    --card: #ffffff;
    --campo: color-mix(in srgb, var(--primary) 7%, #f1f3f6);
    --suave: color-mix(in srgb, var(--primary) 6%, #eef1f4);
    --line: color-mix(in srgb, var(--primary) 9%, #e3e7ec);
    --txt: #1f2a3d;
    --muted: #5a6a85;
    --ok: #00a85a;
    --ok-fondo: #e3f7ed;
    --texto-ok: #067a45;
    --mal: #e0443f;
    --mal-fondo: #fde8e7;
    --texto-error: #c0353a;
    --aviso-fondo: #fff4dc;
    --texto-aviso: #8a5a00;
}

:root[data-tema="rojo"] { --navy: #24090e; --navy-2: #331017; --navy-line: #4a1a24; --primary: #e11d48; --primary-600: #be123c; --cyan: #fb7185; }
:root[data-tema="verde"] { --navy: #0c241d; --navy-2: #133329; --navy-line: #1d4638; --primary: #0f9f6e; --primary-600: #047857; --cyan: #34d399; }
:root[data-tema="grafito"] { --navy: #1b1c1f; --navy-2: #26282c; --navy-line: #36393e; --primary: #e08a00; --primary-600: #b45309; --cyan: #fbbf24; }
:root[data-tema="violeta"] { --navy: #1c1433; --navy-2: #271c45; --navy-line: #372a5c; --primary: #7c3aed; --primary-600: #5b21b6; --cyan: #a78bfa; }
:root[data-tema="showcase"] { --navy: #2b0b45; --navy-2: #3a1160; --navy-line: #512080; --primary: #c026d3; --primary-600: #9a1cad; --cyan: #e879f9; }
:root[data-tema="multiplex"] { --navy: #1f1a1d; --navy-2: #2c2428; --navy-line: #43353b; --primary: #e4007c; --primary-600: #b50062; --cyan: #f5b400; }

:root[data-modo="oscuro"] {
    --bg: color-mix(in srgb, var(--navy) 72%, #000000);
    --card: color-mix(in srgb, var(--navy) 94%, #ffffff);
    --campo: color-mix(in srgb, var(--navy) 89%, #ffffff);
    --suave: color-mix(in srgb, var(--navy) 91%, #ffffff);
    --line: color-mix(in srgb, var(--navy) 84%, #ffffff);
    --txt: #eceef1; --muted: #a7adb8;
    --ok-fondo: #0f3a28; --texto-ok: #4fd18f;
    --mal-fondo: #44191a; --texto-error: #ff8a8e;
    --aviso-fondo: #3d300f; --texto-aviso: #f5c66b;
    color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
    :root[data-modo="sistema"] {
        --bg: color-mix(in srgb, var(--navy) 72%, #000000);
        --card: color-mix(in srgb, var(--navy) 94%, #ffffff);
        --campo: color-mix(in srgb, var(--navy) 89%, #ffffff);
        --suave: color-mix(in srgb, var(--navy) 91%, #ffffff);
        --line: color-mix(in srgb, var(--navy) 84%, #ffffff);
        --txt: #eceef1; --muted: #a7adb8;
        --ok-fondo: #0f3a28; --texto-ok: #4fd18f;
        --mal-fondo: #44191a; --texto-error: #ff8a8e;
        --aviso-fondo: #3d300f; --texto-aviso: #f5c66b;
        color-scheme: dark;
    }
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    min-height: 100%;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    font-size: 16px;
    color: var(--txt);
    background: var(--bg);
    -webkit-tap-highlight-color: transparent;
    -webkit-text-size-adjust: 100%;
}

h1, h2 { margin: 0; font-weight: 650; letter-spacing: -.01em; }
h1:focus { outline: none; }
h2 { font-size: 1.05rem; display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }

.app { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }

.barra {
    position: sticky; top: 0; z-index: 5;
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: calc(env(safe-area-inset-top) + 8px) 16px 8px;
    background: var(--navy); color: #fff;
}
.marca { color: #fff; text-decoration: none; font-weight: 700; font-size: 1.05rem; display: flex; align-items: center; min-width: 0; }
.marca img { height: 40px; max-width: 55vw; object-fit: contain; }
.quien { display: flex; align-items: center; gap: 12px; font-size: .9rem; min-width: 0; }
.quien span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 40vw; opacity: .9; }

.contenido {
    flex: 1; width: 100%; max-width: 560px; margin: 0 auto;
    padding: 16px 16px calc(env(safe-area-inset-bottom) + 24px);
    display: flex; flex-direction: column; gap: 14px;
}

.boton {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 48px; padding: 0 18px; border: 0; border-radius: 12px;
    background: var(--primary); color: #fff; font: inherit; font-weight: 650; text-decoration: none;
    cursor: pointer; touch-action: manipulation;
}
.boton:active { background: var(--primary-600); }
.boton:disabled { opacity: .5; cursor: default; }
.boton.grande { width: 100%; min-height: 58px; font-size: 1.1rem; border-radius: 14px; }
.boton.secundario { background: var(--suave); color: var(--txt); }
.enlace { background: none; border: 0; color: inherit; font: inherit; text-decoration: underline; cursor: pointer; padding: 6px; }

.tarjeta { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 16px; display: flex; flex-direction: column; gap: 12px; }

input {
    width: 100%; min-height: 52px; padding: 0 14px; border-radius: 12px;
    border: 1px solid var(--line); background: var(--campo); color: var(--txt); font: inherit; font-size: 1.1rem;
}
input:focus { outline: 2px solid var(--primary); outline-offset: 0; }

.formulario label { display: flex; flex-direction: column; gap: 6px; font-weight: 600; font-size: .95rem; }

.login { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 22px; padding-top: 6vh; }
.login-marca { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.login-marca img { max-height: 110px; max-width: 80%; object-fit: contain; }
.login-marca p { margin: 0; color: var(--muted); font-weight: 600; }
.pie { margin: 0; text-align: center; color: var(--muted); font-size: .8rem; }

.aviso { padding: 12px 14px; border-radius: 12px; background: var(--aviso-fondo); color: var(--texto-aviso); font-weight: 600; }
.aviso.error { background: var(--mal-fondo); color: var(--texto-error); }

.puestos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; background: var(--suave); padding: 4px; border-radius: 14px; }
.puesto { min-height: 44px; border: 0; border-radius: 10px; background: transparent; color: var(--muted); font: inherit; font-size: .9rem; font-weight: 650; cursor: pointer; }
.puesto-fijo { text-align: center; padding: 10px; border-radius: 14px; background: var(--suave); font-weight: 700; }
.puesto.on { background: var(--card); color: var(--txt); box-shadow: 0 1px 3px rgb(0 0 0 / .12); }

.visor {
    position: relative; width: 100%; aspect-ratio: 1 / 1; border-radius: 18px; overflow: hidden;
    background: var(--navy); display: flex; align-items: center; justify-content: center;
}
.visor video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: none; }
.visor.activo video { display: block; }
.visor .escanear { width: auto; padding: 0 28px; z-index: 1; }
.visor .marco {
    position: absolute; inset: 18%; border-radius: 18px; pointer-events: none;
    box-shadow: 0 0 0 999px rgb(0 0 0 / .35); border: 3px solid rgb(255 255 255 / .9);
}
.visor .detener { position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%); min-height: 40px; font-size: .9rem; opacity: .92; }

.manual { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.manual input { text-transform: uppercase; }
.ayuda { margin: 0; color: var(--muted); font-size: .85rem; text-align: center; }

.compra { display: flex; flex-direction: column; gap: 14px; }
.compra-cabecera { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.volver { color: var(--primary); text-decoration: none; font-weight: 650; padding: 6px 0; }
.codigo { font-family: ui-monospace, Consolas, monospace; font-size: .85rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.resultado { border-radius: 16px; padding: 18px 16px; font-size: 1.15rem; text-align: center; }
.resultado.bien { background: var(--ok-fondo); color: var(--texto-ok); border: 2px solid var(--ok); }
.resultado.mal { background: var(--mal-fondo); color: var(--texto-error); border: 2px solid var(--mal); }

.funcion { border-top: 1px solid var(--line); padding-top: 10px; }
.funcion:first-of-type { border-top: 0; padding-top: 0; }
.funcion-titulo { font-weight: 700; font-size: 1.05rem; }
.funcion-datos { color: var(--muted); font-size: .92rem; margin-top: 2px; }

.entradas { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.entrada {
    display: grid; grid-template-columns: 34px 1fr auto; grid-template-areas: "tilde butaca estado" "tilde categoria estado";
    align-items: center; column-gap: 10px; padding: 10px 12px; border-radius: 12px; background: var(--suave); cursor: pointer; user-select: none;
}
.entrada.apagada { cursor: default; opacity: .75; }
.tilde {
    grid-area: tilde; width: 30px; height: 30px; border-radius: 9px; border: 2px solid var(--line); background: var(--card);
    display: flex; align-items: center; justify-content: center; font-weight: 800; color: #fff;
}
.tilde.on { background: var(--primary); border-color: var(--primary); }
.entrada.apagada .tilde { visibility: hidden; }
.butaca { grid-area: butaca; font-weight: 750; font-size: 1.15rem; }
.categoria { grid-area: categoria; color: var(--muted); font-size: .85rem; }
.entrada .estado { grid-area: estado; }

.estado { display: inline-block; padding: 4px 10px; border-radius: 999px; font-size: .8rem; font-weight: 700; white-space: nowrap; }
.estado.pendiente { background: color-mix(in srgb, var(--primary) 14%, transparent); color: var(--primary-600); }
.estado.retirado { background: var(--ok-fondo); color: var(--texto-ok); }
.estado.bloqueado { background: var(--mal-fondo); color: var(--texto-error); }
:root[data-modo="oscuro"] .estado.pendiente { color: var(--cyan); }

.lineas { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.lineas li { padding: 8px 12px; border-radius: 10px; background: var(--suave); }
.cantidad { font-weight: 750; margin-right: 6px; }
.elecciones { list-style: none; margin: 6px 0 0 4px; padding: 0 0 0 10px; border-left: 3px solid var(--primary); display: flex; flex-direction: column; gap: 2px; }
.elecciones li { padding: 0; background: none; font-size: 1.02rem; font-weight: 650; }

.vacio, .arranque { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 40px 0; color: var(--muted); text-align: center; }
.arranque { min-height: 100vh; }
.girando { width: 40px; height: 40px; border-radius: 50%; border: 4px solid var(--line); border-top-color: var(--primary); animation: girar 0.9s linear infinite; }
@keyframes girar { to { transform: rotate(360deg); } }

#blazor-error-ui {
    display: none; position: fixed; bottom: 0; left: 0; right: 0; z-index: 1000;
    padding: 12px 16px calc(env(safe-area-inset-bottom) + 12px); background: #fff4c4; color: #3d2f00;
}
#blazor-error-ui .reload { margin-left: 8px; color: inherit; font-weight: 700; }
#blazor-error-ui .dismiss { float: right; cursor: pointer; }

@media (min-width: 700px) {
    .contenido { padding-top: 28px; }
    .visor { aspect-ratio: 4 / 3; }
}