/* ═════════════════════════════════════════════════════════════
           Paleta arcade. Variables para que cada componente las consuma
           y un futuro cambio de tema sea barato.
        ═════════════════════════════════════════════════════════════ */
        :root {
            --arc-bg-0:       #0a0014;   /* fondo profundo */
            --arc-bg-1:       #110028;   /* fondo intermedio */
            --arc-bg-2:       #1a0033;   /* panel */
            --arc-panel:      #0e0024;
            --arc-line:       #2a0050;

            --arc-cyan:       #00f0ff;   /* primario / links */
            --arc-magenta:    #ff2bd6;   /* acento / hover */
            --arc-yellow:     #ffd400;   /* warning / score */
            --arc-green:      #36ff8b;   /* success / dinero */
            --arc-red:        #ff3b6b;   /* error / detractor */
            --arc-purple:     #b46cff;   /* secundario */

            --arc-text:       #f1e8ff;
            --arc-text-dim:   #a89cc4;
            /* #6b5d8a daba 3.48:1 sobre --arc-bg-0 y 3.41:1 sobre --arc-panel:
               por debajo del 4.5:1 de WCAG AA para texto normal, y se usa en
               .form-text/.help-block/placeholders/footer (texto chico). #8577a8
               sube a 5.08 / 4.98 — pasa AA en ambos fondos manteniendo el tono
               "muted" morado del tema. */
            --arc-text-muted: #8577a8;

            --arc-font-pixel: "Press Start 2P", "Courier New", monospace;
            --arc-font-mono:  "VT323", "Courier New", monospace;
            --arc-font-body:  "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

            --arc-glow-cyan:    0 0 8px rgba(0,240,255,.55), 0 0 18px rgba(0,240,255,.25);
            --arc-glow-magenta: 0 0 8px rgba(255,43,214,.6), 0 0 18px rgba(255,43,214,.25);
            --arc-glow-yellow:  0 0 8px rgba(255,212,0,.6),  0 0 18px rgba(255,212,0,.25);
            --arc-glow-green:   0 0 8px rgba(54,255,139,.6), 0 0 18px rgba(54,255,139,.25);
        }

        /* Body con fondo en capas:
             - Gradiente base
             - Grid sutil
             - Scanlines horizontales
           El scanline es ~3px de alto, casi imperceptible pero da el feel CRT.
        */
        body {
            background-color: var(--arc-bg-0);
            background-image:
                radial-gradient(ellipse at top, rgba(180,108,255,.10), transparent 55%),
                radial-gradient(ellipse at bottom, rgba(0,240,255,.08),  transparent 55%),
                linear-gradient(180deg, var(--arc-bg-0) 0%, var(--arc-bg-1) 100%);
            color: var(--arc-text);
            min-height: 100vh;
            font-family: var(--arc-font-body);
            font-size: 16px;
            line-height: 1.5;
            margin: 0;
            overflow-x: hidden;
            position: relative;
        }

        /* Scanlines CRT — overlay fijo, no captura clics. */
        body::before {
            content: "";
            position: fixed;
            inset: 0;
            background-image: repeating-linear-gradient(
                to bottom,
                rgba(255,255,255,.02) 0,
                rgba(255,255,255,.02) 1px,
                transparent 1px,
                transparent 3px
            );
            pointer-events: none;
            z-index: 9998;
            mix-blend-mode: overlay;
        }

        /* Pixel grid muy sutil, da textura sin saturar. */
        body::after {
            content: "";
            position: fixed;
            inset: 0;
            background-image:
                linear-gradient(rgba(180,108,255,.06) 1px, transparent 1px),
                linear-gradient(90deg, rgba(180,108,255,.06) 1px, transparent 1px);
            background-size: 32px 32px;
            pointer-events: none;
            z-index: -1;
        }

        /* ═════════════════════════════════════════════════════════════
           Tipografia
        ═════════════════════════════════════════════════════════════ */

        /* Titulos: Press Start 2P solo para encabezados cortos. */
        h1, h2, h3, .h1, .h2, .h3 {
            font-family: var(--arc-font-pixel);
            font-weight: 400;
            letter-spacing: .04em;
            text-transform: uppercase;
            line-height: 1.4;
            color: var(--arc-text);
        }
        h1, .h1 { font-size: clamp(1.25rem, 3.2vw, 1.85rem); }
        h2, .h2 { font-size: clamp(1.05rem, 2.4vw, 1.4rem); }
        h3, .h3 { font-size: clamp(.92rem, 2vw, 1.1rem); }

        /* Subtitulos y h4+: sans-serif para legibilidad de copy mas largo. */
        h4, h5, h6, .h4, .h5, .h6 {
            font-family: var(--arc-font-body);
            font-weight: 700;
            letter-spacing: .02em;
        }

        /* Numeros grandes y scores: VT323 (retro pero legible a gran tamano). */
        .arcade-score, .display-1, .display-2, .display-3, .display-4, .display-5, .display-6 {
            font-family: var(--arc-font-mono);
            font-weight: 400;
            letter-spacing: .01em;
            line-height: 1;
        }
        .arcade-score { font-size: clamp(1.8rem, 4vw, 2.6rem); color: var(--arc-text); }
        .arcade-score--cyan    { color: var(--arc-cyan);    text-shadow: var(--arc-glow-cyan); }
        .arcade-score--magenta { color: var(--arc-magenta); text-shadow: var(--arc-glow-magenta); }
        .arcade-score--yellow  { color: var(--arc-yellow);  text-shadow: var(--arc-glow-yellow); }
        .arcade-score--green   { color: var(--arc-green);   text-shadow: var(--arc-glow-green); }
        .arcade-score--red     { color: var(--arc-red); }

        /* Etiquetas pequenas en pixel font — para badges y stat labels.
           Press Start 2P a < 0.7rem es practicamente ilegible (~10px) y
           rompe legibilidad WCAG 1.4.4. Subido a 0.75rem como minimo
           razonable (~12px) sin perder el aire arcade. */
        .arcade-label {
            font-family: var(--arc-font-pixel);
            font-size: .75rem;
            letter-spacing: .12em;
            text-transform: uppercase;
            color: var(--arc-text-dim);
            line-height: 1.4;
        }

        /* Texto monospace de soporte (codigos, IDs, fechas formateadas). */
        .arcade-mono {
            font-family: var(--arc-font-mono);
            font-size: 1.05em;
            letter-spacing: .02em;
            color: var(--arc-text);
        }

        /* ═════════════════════════════════════════════════════════════
           Componentes
        ═════════════════════════════════════════════════════════════ */

        /* Tarjeta: borde pixel + glow sutil al hover. */
        .arcade-card, .card {
            background: linear-gradient(180deg, var(--arc-panel) 0%, var(--arc-bg-1) 100%) !important;
            border: 2px solid var(--arc-line) !important;
            border-radius: 4px !important;
            box-shadow:
                inset 0 0 0 1px rgba(180,108,255,.10),
                0 4px 0 rgba(0,0,0,.4),
                0 0 20px rgba(180,108,255,.06);
            color: var(--arc-text);
            transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
        }
        .arcade-card:hover, .card:hover {
            transform: translateY(-2px);
            border-color: var(--arc-cyan) !important;
            box-shadow:
                inset 0 0 0 1px rgba(0,240,255,.20),
                0 6px 0 rgba(0,0,0,.5),
                0 0 25px rgba(0,240,255,.18);
        }

        /* Boton arcade: chunky border + sombra dura para feel de boton fisico. */
        .arcade-btn, .btn {
            font-family: var(--arc-font-pixel);
            font-size: .68rem;
            letter-spacing: .08em;
            text-transform: uppercase;
            padding: .65rem 1.1rem;
            border-radius: 3px;
            border: 2px solid currentColor;
            background: transparent;
            color: var(--arc-cyan);
            box-shadow: 0 4px 0 rgba(0,0,0,.4);
            transition: transform .08s ease, box-shadow .08s ease, background .12s ease, color .12s ease;
            cursor: pointer;
        }
        .arcade-btn:hover, .btn:hover {
            background: var(--arc-cyan);
            color: var(--arc-bg-0);
            text-shadow: none;
        }
        /* Efecto "pulsar fisico" al hacer click */
        .arcade-btn:active, .btn:active {
            transform: translateY(2px);
            box-shadow: 0 2px 0 rgba(0,0,0,.4);
        }

        /* Variantes de boton — sobrescriben colores Bootstrap. */
        .btn-primary, .arcade-btn--primary {
            color: var(--arc-cyan);     border-color: var(--arc-cyan);
            background: transparent !important;
        }
        .btn-primary:hover, .arcade-btn--primary:hover {
            background: var(--arc-cyan) !important;
            color: var(--arc-bg-0) !important;
            border-color: var(--arc-cyan) !important;
        }
        .btn-success, .arcade-btn--success {
            color: var(--arc-green);    border-color: var(--arc-green);
            background: transparent !important;
        }
        .btn-success:hover, .arcade-btn--success:hover {
            background: var(--arc-green) !important;
            color: var(--arc-bg-0) !important;
        }
        .btn-warning, .arcade-btn--warning {
            color: var(--arc-yellow);   border-color: var(--arc-yellow);
            background: transparent !important;
        }
        .btn-warning:hover, .arcade-btn--warning:hover {
            background: var(--arc-yellow) !important;
            color: var(--arc-bg-0) !important;
        }
        .btn-danger, .arcade-btn--danger {
            color: var(--arc-red);      border-color: var(--arc-red);
            background: transparent !important;
        }
        .btn-danger:hover, .arcade-btn--danger:hover {
            background: var(--arc-red) !important;
            color: var(--arc-bg-0) !important;
        }
        .btn-info {
            color: var(--arc-magenta); border-color: var(--arc-magenta);
        }
        .btn-info:hover {
            background: var(--arc-magenta) !important; color: var(--arc-bg-0) !important;
        }
        .btn-outline-light {
            color: var(--arc-text);     border-color: var(--arc-text);
        }
        .btn-outline-light:hover {
            background: var(--arc-text) !important; color: var(--arc-bg-0) !important;
        }

        /* CTA destacado — el boton verde fluo de "Crear Evento". */
        .btn-crear-evento {
            background: var(--arc-green) !important;
            color: var(--arc-bg-0) !important;
            border: 2px solid var(--arc-green) !important;
            font-family: var(--arc-font-pixel);
            font-size: .65rem;
            letter-spacing: .08em;
            text-transform: uppercase;
            box-shadow: 0 4px 0 rgba(54,255,139,.25), 0 0 16px rgba(54,255,139,.35);
        }
        .btn-crear-evento:hover {
            background: var(--arc-yellow) !important;
            border-color: var(--arc-yellow) !important;
            box-shadow: 0 4px 0 rgba(255,212,0,.25), 0 0 18px rgba(255,212,0,.45);
        }

        /* Toggle de sonidos arcade — minimalista, no compite con CTAs.
           Tap target 44x44 (WCAG 2.5.5). */
        .btn-arcade-sfx {
            background: transparent !important;
            border: 1px solid var(--arc-line) !important;
            color: var(--arc-cyan) !important;
            border-radius: 50%;
            width: 44px; height: 44px;
            display: inline-flex; align-items: center; justify-content: center;
            transition: background .15s, color .15s, box-shadow .15s;
        }
        .btn-arcade-sfx:hover {
            background: rgba(0,240,255,.08) !important;
            color: var(--arc-cyan) !important;
            box-shadow: 0 0 10px rgba(0,240,255,.3);
        }
        .btn-arcade-sfx[aria-pressed="false"] {
            color: var(--arc-text-muted) !important;
            border-color: var(--arc-text-muted) !important;
        }

        /* Badges — pixel + bordes definidos. .7rem (~11px) es el minimo legible
           con Press Start 2P; antes a .55rem (~8.8px) los badges informativos
           (estado de ticket, tipo de movimiento) eran ilegibles sin zoom. */
        .badge {
            font-family: var(--arc-font-pixel);
            font-size: .7rem;
            letter-spacing: .08em;
            border-radius: 2px;
            padding: .35rem .6rem;
            border: 1px solid currentColor;
        }
        .bg-success { background: var(--arc-green) !important; color: var(--arc-bg-0) !important; }
        .bg-info    { background: var(--arc-cyan)  !important; color: var(--arc-bg-0) !important; }
        .bg-warning { background: var(--arc-yellow)!important; color: var(--arc-bg-0) !important; }
        .bg-danger  { background: var(--arc-red)   !important; color: var(--arc-bg-0) !important; }
        .bg-primary { background: var(--arc-magenta)!important; color: var(--arc-bg-0) !important; }
        .bg-secondary { background: var(--arc-purple) !important; color: var(--arc-bg-0) !important; }
        .text-success { color: var(--arc-green) !important; }
        .text-warning { color: var(--arc-yellow) !important; }
        .text-danger  { color: var(--arc-red) !important; }
        .text-info    { color: var(--arc-cyan) !important; }
        .text-primary { color: var(--arc-magenta) !important; }
        /* Helper genérico ya usado en varias plantillas (estaba acompañado de
           un style="color:..." inline, bloqueado por la CSP). */
        .text-dim    { color: var(--arc-text-dim) !important; }

        /* Links: cyan con underline animado. */
        a {
            color: var(--arc-cyan);
            text-decoration: none;
            transition: color .15s ease, text-shadow .15s ease;
        }
        a:hover {
            color: var(--arc-magenta);
            text-shadow: var(--arc-glow-magenta);
        }

        /* ─────────────────────────────────────────────────────────────
           Formularios y calendarios — borde pixel, foco neon, pickers CRT
        ───────────────────────────────────────────────────────────────── */

        /* color-scheme: dark hace que el navegador renderice los popups
           NATIVOS en modo oscuro — el calendario de datetime-local, el
           reloj de time, los spinners de number y el menu de select. Sin
           esto el calendario aparece en blanco puro y rompe el tema. */
        :root { color-scheme: dark; }

        /* Campos de texto: borde pixel + foco neon. */
        .form-control, .form-select, input, textarea, select {
            background: var(--arc-panel) !important;
            border: 2px solid var(--arc-line) !important;
            border-radius: 3px !important;
            color: var(--arc-text) !important;
            font-family: var(--arc-font-body);
            padding: .55rem .75rem;
            transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
        }
        textarea { resize: vertical; }
        .form-control:hover, .form-select:hover,
        input:hover, textarea:hover, select:hover {
            border-color: var(--arc-purple) !important;
        }
        .form-control:focus, .form-select:focus,
        input:focus, textarea:focus, select:focus {
            border-color: var(--arc-cyan) !important;
            background: var(--arc-bg-1) !important;
            box-shadow:
                0 0 0 .15rem rgba(0,240,255,.18),
                inset 0 0 12px rgba(0,240,255,.10) !important;
            /* outline: 0 solo cuando el foco viene de mouse (no :focus-visible).
               Para teclado mantenemos el outline nativo del navegador para
               garantizar visibilidad de foco WCAG 2.4.7. */
        }
        .form-control:focus:not(:focus-visible), .form-select:focus:not(:focus-visible),
        input:focus:not(:focus-visible), textarea:focus:not(:focus-visible),
        select:focus:not(:focus-visible) {
            outline: 0;
        }
        .form-control:focus-visible, .form-select:focus-visible,
        input:focus-visible, textarea:focus-visible, select:focus-visible {
            outline: 2px solid var(--arc-cyan);
            outline-offset: 2px;
        }
        .form-control::placeholder, input::placeholder, textarea::placeholder {
            color: var(--arc-text-muted) !important;
            font-style: italic;
        }
        .form-label, label {
            font-family: var(--arc-font-pixel);
            font-size: .75rem;
            letter-spacing: .1em;
            text-transform: uppercase;
            color: var(--arc-text-dim);
            margin-bottom: .4rem;
        }
        /* El label se enciende cuando algun input del grupo tiene foco. */
        .mb-3:focus-within > .form-label,
        .form-group:focus-within > .form-label,
        .form-group:focus-within > label {
            color: var(--arc-cyan);
            text-shadow: var(--arc-glow-cyan);
        }

        /* ── Calendarios / horas: glifo cyan propio ──
           El indicador nativo es un glifo del navegador; con color-scheme
           dark sale blanco. Lo sustituimos por un SVG cyan inline para que
           combine con el tema. Calendario para date/month/week, reloj para
           time. Caja de hover con tinte cyan para feedback. */
        input[type=date]::-webkit-calendar-picker-indicator,
        input[type=datetime-local]::-webkit-calendar-picker-indicator,
        input[type=time]::-webkit-calendar-picker-indicator,
        input[type=month]::-webkit-calendar-picker-indicator,
        input[type=week]::-webkit-calendar-picker-indicator {
            cursor: pointer;
            width: 1.5rem;
            height: 1.5rem;
            padding: 3px;
            border-radius: 3px;
            background-repeat: no-repeat;
            background-position: center;
            background-size: 1rem;
            transition: background-color .15s ease, transform .08s ease;
        }
        input[type=date]::-webkit-calendar-picker-indicator,
        input[type=datetime-local]::-webkit-calendar-picker-indicator,
        input[type=month]::-webkit-calendar-picker-indicator,
        input[type=week]::-webkit-calendar-picker-indicator {
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%2300f0ff' stroke-width='1.4' stroke-linecap='round'%3E%3Crect x='1.5' y='2.6' width='13' height='11.9' rx='1.6'/%3E%3Cpath d='M1.5 6.2h13M5 1v3M11 1v3'/%3E%3C/svg%3E");
        }
        input[type=time]::-webkit-calendar-picker-indicator {
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%2300f0ff' stroke-width='1.4' stroke-linecap='round'%3E%3Ccircle cx='8' cy='8' r='6.4'/%3E%3Cpath d='M8 4.4V8l2.6 2'/%3E%3C/svg%3E");
        }
        input[type=date]::-webkit-calendar-picker-indicator:hover,
        input[type=datetime-local]::-webkit-calendar-picker-indicator:hover,
        input[type=time]::-webkit-calendar-picker-indicator:hover,
        input[type=month]::-webkit-calendar-picker-indicator:hover,
        input[type=week]::-webkit-calendar-picker-indicator:hover {
            background-color: rgba(0,240,255,.18);
        }
        input[type=date]::-webkit-calendar-picker-indicator:active,
        input[type=datetime-local]::-webkit-calendar-picker-indicator:active,
        input[type=time]::-webkit-calendar-picker-indicator:active,
        input[type=month]::-webkit-calendar-picker-indicator:active,
        input[type=week]::-webkit-calendar-picker-indicator:active {
            transform: scale(.88);
        }
        /* Los segmentos editables (dd / mm / aaaa, hh:mm) en fuente mono. */
        input[type=date]::-webkit-datetime-edit,
        input[type=datetime-local]::-webkit-datetime-edit,
        input[type=time]::-webkit-datetime-edit {
            font-family: var(--arc-font-mono);
            font-size: 1.05rem;
            letter-spacing: .03em;
        }
        ::-webkit-datetime-edit-text { color: var(--arc-text-muted); padding: 0 .12em; }
        ::-webkit-datetime-edit-day-field:focus,
        ::-webkit-datetime-edit-month-field:focus,
        ::-webkit-datetime-edit-year-field:focus,
        ::-webkit-datetime-edit-hour-field:focus,
        ::-webkit-datetime-edit-minute-field:focus,
        ::-webkit-datetime-edit-ampm-field:focus {
            background: var(--arc-cyan);
            color: var(--arc-bg-0);
            border-radius: 2px;
            outline: none;
        }

        /* Spinners de los number — color-scheme:dark ya los pinta claros;
           solo nos aseguramos de que sean visibles y clicables. */
        input[type=number]::-webkit-inner-spin-button,
        input[type=number]::-webkit-outer-spin-button {
            opacity: 1;
            cursor: pointer;
        }

        /* ── Select: flecha SVG propia en cyan (la nativa es ilegible) ── */
        .form-select, select {
            -webkit-appearance: none;
            appearance: none;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 16 16'%3E%3Cpath fill='%2300f0ff' d='M8 11L2 5h12z'/%3E%3C/svg%3E") !important;
            background-repeat: no-repeat !important;
            background-position: right .75rem center !important;
            padding-right: 2.2rem !important;
        }
        .form-select option, select option {
            background: var(--arc-panel);
            color: var(--arc-text);
        }

        /* ── Input de color (badge de TipoTicket) — sin chrome blanco ── */
        input[type=color] {
            -webkit-appearance: none;
            appearance: none;
            width: 52px !important;
            height: 40px !important;
            padding: 3px !important;
            cursor: pointer;
        }
        input[type=color]::-webkit-color-swatch { border: none; border-radius: 2px; }
        input[type=color]::-webkit-color-swatch-wrapper { padding: 0; }

        /* ── Input de archivo — boton arcade integrado ── */
        input[type=file] {
            border-style: dashed !important;
            color: var(--arc-text-dim) !important;
            padding: .5rem !important;
            cursor: pointer;
        }
        input[type=file]:hover { border-color: var(--arc-cyan) !important; }
        input[type=file]::file-selector-button,
        input[type=file]::-webkit-file-upload-button {
            font-family: var(--arc-font-pixel);
            font-size: .7rem;
            letter-spacing: .08em;
            text-transform: uppercase;
            background: transparent;
            color: var(--arc-cyan);
            border: 2px solid var(--arc-cyan);
            border-radius: 3px;
            padding: .4rem .8rem;
            margin-right: .8rem;
            cursor: pointer;
            transition: background .15s, color .15s;
        }
        input[type=file]::file-selector-button:hover,
        input[type=file]::-webkit-file-upload-button:hover {
            background: var(--arc-cyan);
            color: var(--arc-bg-0);
        }

        /* ── Checkbox / radio / range — accent arcade ──
           accent-color + color-scheme:dark dejan el control nativo oscuro
           con el tilde en cyan; reseteamos el borde/padding que la regla
           generica de inputs les habia aplicado de mas. */
        input[type=checkbox], input[type=radio] {
            accent-color: var(--arc-cyan);
            width: 1.15rem !important;
            height: 1.15rem !important;
            padding: 0 !important;
            border: 0 !important;
            background: transparent !important;
            box-shadow: none !important;
            vertical-align: -.15rem;
            cursor: pointer;
        }
        input[type=range] {
            accent-color: var(--arc-cyan);
            border: 0 !important;
            background: transparent !important;
            padding: 0 !important;
        }
        /* Bootstrap .form-check-input — recolor sin perder el tilde SVG. */
        .form-check-input:checked {
            background-color: var(--arc-cyan) !important;
            border-color: var(--arc-cyan) !important;
            box-shadow: 0 0 8px rgba(0,240,255,.45);
        }
        .form-check-label {
            font-family: var(--arc-font-body);
            text-transform: none;
            letter-spacing: 0;
            color: var(--arc-text);
        }

        /* ── Mensajes de ayuda y validacion ── */
        .form-text, .help-block, small.text-muted, .text-white-50 small {
            color: var(--arc-text-muted) !important;
            font-size: .85rem;
        }
        .invalid-feedback, .error-msg, .errorlist, ul.errorlist li {
            color: var(--arc-red) !important;
            font-family: var(--arc-font-mono);
            font-size: .98rem;
            list-style: none;
            padding-left: 0;
            margin-top: .25rem;
        }
        .form-control.is-invalid, input.is-invalid,
        select.is-invalid, .is-invalid {
            border-color: var(--arc-red) !important;
        }

        /* Progress bars con estilo retro. */
        .progress {
            background: rgba(180,108,255,.10) !important;
            border: 1px solid var(--arc-line);
            border-radius: 2px !important;
            overflow: hidden;
            height: 12px;
        }
        .progress-bar {
            background: linear-gradient(90deg, var(--arc-cyan), var(--arc-magenta)) !important;
            box-shadow: 0 0 8px rgba(0,240,255,.4);
            transition: width .4s ease;
        }
        .progress-bar.bg-success { background: var(--arc-green) !important; box-shadow: 0 0 8px rgba(54,255,139,.4); }
        .progress-bar.bg-warning { background: var(--arc-yellow) !important; box-shadow: 0 0 8px rgba(255,212,0,.4); }
        .progress-bar.bg-danger  { background: var(--arc-red) !important; }
        .progress-bar.bg-info    { background: var(--arc-cyan) !important; }

        /* Tablas. */
        table, .table {
            color: var(--arc-text) !important;
            border-color: var(--arc-line) !important;
        }
        .table > :not(caption) > * > * {
            background: transparent !important;
            color: var(--arc-text) !important;
            border-color: var(--arc-line) !important;
        }
        .table thead th {
            font-family: var(--arc-font-pixel);
            /* Subido de .58rem a .7rem por legibilidad: en tablas de gestion
               (tipos_ticket, wallet, dashboard) los headers son funcionales,
               no decorativos. */
            font-size: .7rem;
            letter-spacing: .1em;
            text-transform: uppercase;
            color: var(--arc-magenta) !important;
        }

        /* ═════════════════════════════════════════════════════════════
           Layout: header, footer, breadcrumbs
        ═════════════════════════════════════════════════════════════ */

        /* Skip-link accesible — visible al recibir foco con teclado. */
        .skip-link {
            position: absolute;
            left: -9999px;
            top: auto;
            width: 1px; height: 1px;
            overflow: hidden;
            background: var(--arc-magenta);
            color: var(--arc-bg-0);
            padding: 8px 16px;
            z-index: 9999;
            font-family: var(--arc-font-pixel);
            font-size: .65rem;
        }
        .skip-link:focus { left: 0; top: 0; width: auto; height: auto; }

        /* Contenedor principal — sobre las capas de fondo (scanlines/grid).
           Antes era un style="" inline en base.html, bloqueado por la CSP. */
        #main-content { position: relative; z-index: 1; }

        /* Helper de altura mínima usado por las pantallas de auth (login,
           registro, recuperar, 2FA) — antes iba en style="min-height:80vh"
           inline y la CSP lo bloqueaba. */
        .min-vh-80 { min-height: 80vh; }

        /* Containers angostos para flujos centrados (encuestas, etc.). */
        .container-narrow    { max-width: 600px; }
        .container-narrow-md { max-width: 720px; }

        /* Emoji grande para hero/estados (antes style="font-size:3rem"). */
        .emoji-lg { font-size: 3rem; }

        /* Tamaños de iconos reutilizables (antes <i style="font-size:Xrem">). */
        .icon-md { font-size: 1.25rem; }
        .icon-lg { font-size: 1.5rem; }
        .icon-xl { font-size: 2rem; }

        /* Header arcade. */
        header .navbar {
            background: linear-gradient(180deg, rgba(10,0,20,.95) 0%, rgba(17,0,40,.95) 100%) !important;
            backdrop-filter: blur(8px);
            border-bottom: 2px solid var(--arc-magenta);
            box-shadow: 0 0 20px rgba(255,43,214,.25), inset 0 -1px 0 var(--arc-cyan);
        }
        .navbar-brand {
            font-family: var(--arc-font-pixel);
            font-size: 1.1rem !important;
            letter-spacing: .15em;
            color: var(--arc-cyan) !important;
            text-shadow: var(--arc-glow-cyan);
            transition: color .15s ease, text-shadow .15s ease;
        }
        .navbar-brand:hover {
            color: var(--arc-magenta) !important;
            text-shadow: var(--arc-glow-magenta);
        }

        .nav-pill {
            font-family: var(--arc-font-pixel);
            /* Subido de .58rem a .7rem (~11px) para legibilidad: los nav
               links son texto funcional, no decorativo. */
            font-size: .7rem;
            letter-spacing: .08em;
            color: var(--arc-text-dim) !important;
            border-radius: 2px;
            padding: 7px 12px;
            transition: background .15s, color .15s;
        }
        .nav-pill:hover, .nav-pill.active {
            background: rgba(0,240,255,.12);
            color: var(--arc-cyan) !important;
            text-shadow: var(--arc-glow-cyan);
        }

        /* Dropdown menu: panel arcade. */
        .dropdown-menu {
            background: var(--arc-panel) !important;
            backdrop-filter: blur(10px);
            border: 2px solid var(--arc-line) !important;
            border-radius: 3px !important;
            box-shadow: 0 6px 0 rgba(0,0,0,.5);
        }
        .dropdown-item {
            color: var(--arc-text) !important;
            font-family: var(--arc-font-body);
            font-size: .9rem;
            padding: .55rem 1rem;
        }
        .dropdown-item:hover {
            background: rgba(0,240,255,.12) !important;
            color: var(--arc-cyan) !important;
        }
        .dropdown-divider { border-color: var(--arc-line) !important; }

        /* Breadcrumbs. */
        .breadcrumb-cosmic, .breadcrumb {
            background: transparent !important;
            padding: .25rem 0;
            margin: 0;
            font-family: var(--arc-font-mono);
            font-size: 1rem;
        }
        .breadcrumb-item a, .breadcrumb-cosmic .breadcrumb-item a {
            color: var(--arc-text-muted);
            text-decoration: none;
        }
        .breadcrumb-item a:hover, .breadcrumb-cosmic .breadcrumb-item a:hover {
            color: var(--arc-cyan);
        }
        .breadcrumb-item.active, .breadcrumb-cosmic .breadcrumb-item.active {
            color: var(--arc-text-dim);
        }
        .breadcrumb-item + .breadcrumb-item::before,
        .breadcrumb-cosmic .breadcrumb-item + .breadcrumb-item::before {
            color: var(--arc-magenta) !important;
            content: ">";
        }
        .breadcrumb-wrap {
            padding: .3rem 0 .6rem;
            border-bottom: 1px solid var(--arc-line);
            margin-bottom: 1.5rem;
        }

        /* Glass morphism (alertas, modales) — actualizado a arcade. */
        .glass-morphism {
            background: var(--arc-panel) !important;
            backdrop-filter: blur(10px);
            border: 2px solid var(--arc-line) !important;
            border-radius: 3px !important;
            box-shadow: 0 4px 0 rgba(0,0,0,.4);
        }

        /* Alert messages.
           El magenta es el default (.alert sin variante de tipo). Las variantes
           semanticas se re-diferencian abajo: esta regla usa !important y, al
           aplicarse por igual a -success/-danger/-warning/-info, aplanaba los
           cuatro al mismo color. Un error se veia identico a una confirmacion,
           dejando el tipo de mensaje sin ninguna senal visual. */
        .alert {
            border-radius: 3px !important;
            border: 2px solid var(--arc-magenta) !important;
            background: rgba(255,43,214,.08) !important;
            color: var(--arc-text) !important;
            box-shadow: 0 4px 0 rgba(0,0,0,.4);
            font-family: var(--arc-font-body);
        }
        .alert .btn-close {
            filter: invert(1) brightness(1.5);
        }

        /* Variantes semanticas — necesitan !important para ganarle al bloque de
           arriba (misma especificidad: gana el ultimo declarado, pero ambos
           llevan !important, asi que el orden en el archivo es lo que decide).
           El borde izquierdo grueso agrega una segunda senal ademas del color:
           no depender solo del matiz es lo que pide WCAG 1.4.1 (Use of Color),
           y ayuda con daltonismo rojo-verde, el caso mas comun. */
        .alert-success {
            border-color: var(--arc-green) !important;       /* #36ff8b */
            background: rgba(54,255,139,.08) !important;
            border-left-width: 6px !important;
        }
        /* .alert-error: Django emite message.tags="error", no "danger". Sin este
           selector, los messages.error() quedaban con el estilo magenta base. */
        .alert-danger, .alert-error {
            border-color: var(--arc-red) !important;          /* #ff3b6b */
            background: rgba(255,59,107,.10) !important;
            border-left-width: 6px !important;
        }
        .alert-warning {
            border-color: var(--arc-yellow) !important;       /* #ffd400 */
            background: rgba(255,212,0,.10) !important;
            border-left-width: 6px !important;
        }
        .alert-info {
            border-color: var(--arc-cyan) !important;         /* #00f0ff */
            background: rgba(0,240,255,.08) !important;
            border-left-width: 6px !important;
        }

        /* Footer. */
        footer {
            font-family: var(--arc-font-pixel);
            font-size: .6rem;
            letter-spacing: .12em;
            color: var(--arc-text-muted);
            border-top: 1px solid var(--arc-line);
            padding-top: 1.5rem;
            margin-top: 4rem;
        }

        /* Animacion de parpadeo para indicadores "live". */
        @keyframes arcade-blink {
            0%, 49%   { opacity: 1; }
            50%, 100% { opacity: .3; }
        }
        .arcade-blink { animation: arcade-blink 1.2s steps(2) infinite; }

        @keyframes arcade-pulse {
            0%, 100% { transform: scale(1);    opacity: 1; }
            50%      { transform: scale(1.05); opacity: .85; }
        }
        .animate-pulse { animation: arcade-pulse 1.8s ease-in-out infinite; }

        /* Responsive: en moviles los headings pixel se vuelven muy intensos.
           Reducimos peso visual sin perder identidad. */
        @media (max-width: 576px) {
            h1, .h1 { font-size: 1.1rem; letter-spacing: .02em; }
            h2, .h2 { font-size: .95rem; }
            .navbar-brand { font-size: .9rem !important; }
            .arcade-score { font-size: 1.75rem; }
        }

        /* Respeto a prefers-reduced-motion (accesibilidad). */
        @media (prefers-reduced-motion: reduce) {
            *, *::before, *::after {
                animation-duration: .001ms !important;
                animation-iteration-count: 1 !important;
                transition-duration: .001ms !important;
            }
        }

        /* ═════════════════════════════════════════════════════════════
           Aliases del sistema "cosmic" → arcade (decision de producto).
           Mantienen el markup existente (.cosmic-*, .form-control-cosmic,
           etc.) pero fuerzan el look arcade. Patron ya establecido por
           .glass-morphism arriba. Asi se evita reescribir ~30 templates.
        ═════════════════════════════════════════════════════════════ */

        /* Inputs: ya existe .galactic-input — replicamos su look. */
        .cosmic-input,
        .form-control-cosmic {
            background: var(--arc-bg-1) !important;
            border: 2px solid var(--arc-line) !important;
            border-radius: 3px !important;
            color: var(--arc-text) !important;
            font-family: var(--arc-font-body);
            padding: .55rem .85rem;
        }
        .cosmic-input::placeholder,
        .form-control-cosmic::placeholder {
            color: var(--arc-text-muted) !important;
        }
        .cosmic-input:focus,
        .form-control-cosmic:focus {
            border-color: var(--arc-cyan) !important;
            box-shadow: 0 0 0 3px rgba(0, 240, 255, .15) !important;
            background: var(--arc-panel) !important;
        }
        /* :focus-visible para teclado (WCAG 2.4.7) — outline alto contraste */
        .cosmic-input:focus:not(:focus-visible),
        .form-control-cosmic:focus:not(:focus-visible) { outline: none; }
        .cosmic-input:focus-visible,
        .form-control-cosmic:focus-visible {
            outline: 2px solid var(--arc-cyan);
            outline-offset: 2px;
        }

        /* Labels: pixel font, uppercase, alineado con .arcade-label. */
        .form-label-cosmic {
            font-family: var(--arc-font-pixel) !important;
            font-size: .7rem !important;
            letter-spacing: .12em !important;
            text-transform: uppercase !important;
            color: var(--arc-text-dim) !important;
            margin-bottom: .4rem !important;
        }

        /* Botones cosmic → btn-arcade-primary equivalente. */
        .btn-cosmic,
        .mk-btn-cosmic {
            background: var(--arc-cyan) !important;
            color: var(--arc-bg-0) !important;
            border: 2px solid var(--arc-cyan) !important;
            border-radius: 3px !important;
            font-family: var(--arc-font-pixel);
            font-size: .8rem;
            letter-spacing: .12em;
            text-transform: uppercase;
            box-shadow: 0 3px 0 rgba(0, 240, 255, .35);
            transition: background .15s, box-shadow .15s, transform .05s;
        }
        .btn-cosmic:hover,
        .mk-btn-cosmic:hover {
            background: #4dffff !important;
            color: var(--arc-bg-0) !important;
            box-shadow: 0 5px 0 rgba(0, 240, 255, .5);
        }
        .btn-cosmic:active,
        .mk-btn-cosmic:active {
            transform: translateY(2px);
            box-shadow: 0 1px 0 rgba(0, 240, 255, .35);
        }
        .btn-cosmic:focus-visible,
        .mk-btn-cosmic:focus-visible {
            outline: 2px solid var(--arc-magenta);
            outline-offset: 2px;
        }

        /* Field de solo-lectura (perfil): caja con borde arcade. */
        .cosmic-data-field {
            background: var(--arc-bg-1) !important;
            border: 1px solid var(--arc-line) !important;
            border-radius: 3px !important;
            color: var(--arc-text) !important;
            font-family: var(--arc-font-body);
        }
        .cosmic-data-field:hover {
            border-color: var(--arc-cyan) !important;
        }

        /* Color "iris" del sistema cosmic → cyan arcade (links accent). */
        .text-iris { color: var(--arc-cyan) !important; }

        /* Card de acceso (login/registro) — adopta look arcade-card. */
        .access-card {
            background: linear-gradient(180deg, var(--arc-panel) 0%, var(--arc-bg-1) 100%) !important;
            border: 2px solid var(--arc-line) !important;
            border-radius: 4px !important;
            box-shadow:
                inset 0 0 0 1px rgba(180, 108, 255, .10),
                0 4px 0 rgba(0, 0, 0, .4);
        }

        /* Boton "ignicion" (registro_organizador) — primario arcade. */
        .btn-ignicion {
            background: var(--arc-cyan) !important;
            color: var(--arc-bg-0) !important;
            border: 2px solid var(--arc-cyan) !important;
            font-family: var(--arc-font-pixel);
            letter-spacing: .12em;
            text-transform: uppercase;
        }

/* ── <summary> interactivo ────────────────────────────────────────────────────
   Regla global en vez de style="cursor:pointer" inline en cada template: la CSP
   declara style-src [self, nonce] sin 'unsafe-inline', y los nonces NO aplican
   a atributos style="" — un inline queda bloqueado en produccion (en dev no se
   nota porque la CSP va en report-only). Un <summary> siempre es clickeable,
   asi que corresponde que sea global. */
summary {
    cursor: pointer;
}