/* VT323 Font */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700;800&family=VT323&display=swap');

body { 
    font-family: 'Inter', sans-serif; 
    background-color: #000000; 
    color: #e5e7eb; 
    scroll-behavior: smooth; 
    padding-top: 128px; /* Ajustado para la nav secundaria en móvil */
}

header { 
    position: fixed; 
    top: 0; 
    left: 0; 
    right: 0; 
    z-index: 40; 
    background-color: #000000; 
}

#secondary-nav-container { 
    position: fixed; 
    top: 80px; /* Debajo del header principal */
    left: 0; 
    right: 0; 
    z-index: 30; 
    background-color: #000000; 
    border-bottom: 1px solid #4b5563; 
}

#mobile-menu { 
    top: 80px; /* Debajo del header principal */
}

#next-event-promo-container { 
    flex-grow: 1; 
    min-width: 0; 
    overflow: hidden; 
    white-space: nowrap; 
    box-sizing: border-box; 
    position: relative; 
}

.font-pixel { 
    font-family: 'VT323', monospace; 
}

.text-glow-white { 
    text-shadow: 0 0 5px #ffffff, 0 0 8px #ffffff; 
}

.text-glow-yellow { 
    text-shadow: 0 0 5px #facc15, 0 0 8px #facc15; 
}

.spinner { 
    animation: spin 1s linear infinite; 
}

@keyframes spin { 
    0% { transform: rotate(0deg); } 
    100% { transform: rotate(360deg); } 
}

/* Ocultar flechas en inputs numéricos */
input[type='number']::-webkit-inner-spin-button,
input[type='number']::-webkit-outer-spin-button { 
    -webkit-appearance: none; 
    margin: 0; 
}
input[type='number'] { 
    -moz-appearance: textfield; 
    appearance: textfield; 
}

/* Estilos del Escáner */
#scanner-video { 
    width: 100%; 
    height: auto; 
    max-height: 70vh; 
    display: block; 
    background-color: #222; 
    border-radius: 0; 
}
#scanner-canvas { 
    display: none; 
}
.scanner-guide { 
    position: absolute; 
    inset: 0; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    pointer-events: none; 
}
.scanner-box { 
    width: 75%; 
    padding-bottom: 50%; /* Proporción */
    max-width: 400px; 
    max-height: 300px; 
    border: 4px dashed rgba(255, 255, 255, 0.5); 
    position: relative; 
}

/* Estilos de Formularios (Inputs, Textarea, Select) */
input[type='email'], input[type='password'], input[type='text'], input[type='url'],
input[type='datetime-local'], input[type='number'], textarea, select {
    background-color: #1f2937; 
    border-color: #4b5563; 
    color: #ffffff;
    border-radius: 0; 
    border-width: 1px; 
    padding: 0.5rem 0.75rem;
    transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

input::placeholder, textarea::placeholder { 
    color: #6b7280; 
}

input:focus, textarea:focus, select:focus {
    outline: 2px solid transparent; 
    outline-offset: 2px;
    --tw-ring-color: #ffffff; 
    box-shadow: 0 0 0 2px var(--tw-ring-color);
    border-color: #ffffff;
}

/* Estilos de Input[type=file] */
input[type="file"] { 
    background-color: #374151; 
    border-color: #4b5563; 
    color: #e5e7eb; 
    padding: 0.4rem 0.6rem; 
    border-radius: 0; 
    cursor: pointer; 
}
input[type="file"]::file-selector-button {
    background-color: #4b5563; 
    color: white; 
    border: none;
    padding: 0.4rem 0.8rem; 
    border-radius: 0; 
    margin-right: 0.5rem;
    cursor: pointer; 
    transition: background-color 0.2s;
}
input[type="file"]::file-selector-button:hover { 
    background-color: #6b7280; 
}

/* Estilo para el label de Restaurar (que oculta el input[type=file]) */
.restore-label {
    display: inline-block; 
    background-color: #1f2937; 
    color: #e5e7eb;
    border: 1px solid #4b5563; 
    padding: 0.5rem 1rem; 
    border-radius: 0;
    cursor: pointer; 
    font-family: 'VT323', monospace; 
    font-size: 1.125rem;
    transition: background-color 0.2s;
}
.restore-label:hover { 
    background-color: #374151; 
}

button:disabled { 
    opacity: 0.5; 
    cursor: not-allowed; 
}

/* Indicador de calendario en inputs de fecha */
input[type="datetime-local"]::-webkit-calendar-picker-indicator { 
    filter: invert(0.8); 
    cursor: pointer; 
}

/* Animaciones de Página y Modal */
.page-fade-in { 
    animation: fadeIn 0.4s ease-in-out; 
}
@keyframes fadeIn { 
    from { opacity: 0; transform: translateY(10px); } 
    to { opacity: 1; transform: translateY(0); } 
}

.modal-backdrop-fade-in { 
    animation: modalFadeIn 0.2s ease-out forwards; 
}
.modal-content-scale-in { 
    animation: modalScaleIn 0.25s ease-out forwards; 
}
@keyframes modalFadeIn { 
    from { opacity: 0; } 
    to { opacity: 1; } 
}
@keyframes modalScaleIn { 
    from { opacity: 0; transform: scale(0.95) translateY(10px); } 
    to { opacity: 1; transform: scale(1) translateY(0); } 
}

/* Estilos de Checkbox */
input[type="checkbox"] {
    appearance: none; 
    background-color: #374151; 
    border: 1px solid #6b7280;
    padding: 0; 
    display: inline-block; 
    vertical-align: middle; 
    position: relative;
    width: 1.25rem; 
    height: 1.25rem; 
    cursor: pointer;
}
input[type="checkbox"]:checked { 
    background-color: #facc15; 
    border-color: #facc15; 
}
input[type="checkbox"]:checked::after {
    content: '✔'; 
    position: absolute; 
    color: black; 
    font-size: 0.8rem;
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%); 
    line-height: 1;
}
input[type="checkbox"]:focus {
    outline: 2px solid transparent; 
    outline-offset: 2px;
    --tw-ring-color: #ffffff; 
    box-shadow: 0 0 0 2px var(--tw-ring-color);
}

/* Animación de Marquesina (Promo) */
@keyframes marquee { 
    0% { transform: translateX(100%); } 
    100% { transform: translateX(-100%); } 
}

#next-event-promo {
    display: inline-block; 
    padding-left: 100%;
    animation: marquee 20s linear infinite;
    will-change: transform; 
    white-space: nowrap;
    font-family: 'VT323', monospace; 
    color: #facc15;
    font-size: 1.125rem; 
    text-shadow: 0 0 5px #facc15, 0 0 8px #facc15;
}
#next-event-promo > span { 
    display: inline-block; 
}
#next-event-promo-container:hover #next-event-promo { 
    animation-play-state: paused; 
}