/* Estilos para la grilla de disponibilidad */
.availability-table {
    border-collapse: separate;
    border-spacing: 2px;
    width: 100%;
    user-select: none;
}

.availability-cell {
    width: 30px;
    height: 30px;
    background-color: #374151; /* gray-700 */
    cursor: pointer;
    border-radius: 4px;
    transition: background-color 0.2s;
}

.availability-cell.available {
    background-color: #10B981; /* green-500 */
}

.availability-cell.complicated {
    background-color: #F59E0B; /* yellow-500 */
}

.availability-cell.unavailable {
    background-color: #EF4444; /* red-500 */
}

.hour-header {
    font-size: 0.7rem;
    color: #9CA3AF;
    text-align: center;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
}

.day-label {
    font-weight: bold;
    color: #D1D5DB;
    padding-right: 10px;
    text-align: right;
    white-space: nowrap;
}

/* Loader animado */
.loader {
    border-top-color: #3498db;
    -webkit-animation: spinner 1.5s linear infinite;
    animation: spinner 1.5s linear infinite;
}

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

/* Ajustes para móvil */
@media (max-width: 768px) {
    .availability-cell {
        width: 25px;
        height: 25px;
    }
}


/* Colores de estado de grilla */
.availability-cell.available { background-color: #10B981; } /* Green */
.availability-cell.complicated { background-color: #F59E0B; } /* Yellow */
.availability-cell.unavailable { background-color: #EF4444; } /* Red */

/* Animaciones del Acordeón */
.step-content {
    transition: all 0.3s ease-in-out;
}

/* Evitar selección de texto en la grilla para mejor drag en mobile */
.availability-table {
    user-select: none;
    -webkit-user-select: none;
}

/* Scrollbar oculto para horizontal scroll en mobile */
#disponibilidad-grid::-webkit-scrollbar {
    display: none;
}
#disponibilidad-grid {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* inscripciones_style.css */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap');

body {
    font-family: 'Roboto', sans-serif;
    -webkit-tap-highlight-color: transparent; /* Elimina flash azul en mobile */
}

/* Estilos para el contenedor de la grilla */
#disponibilidad-grid {
    touch-action: none; /* CRÍTICO: Evita que la pantalla haga scroll mientras arrastras el dedo sobre la grilla */
    user-select: none;
    -webkit-user-select: none;
}

/* Celda base */
.availability-cell {
    transition: all 0.2s ease-in-out;
    position: relative;
    overflow: hidden;
}

/* Efecto de pulsación */
.availability-cell:active {
    transform: scale(0.95);
}

/* Scrollbars personalizadas para contenedores con overflow */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
::-webkit-scrollbar-track {
    background: #1f2937; 
}
::-webkit-scrollbar-thumb {
    background: #4b5563; 
    border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
    background: #6b7280; 
}

/* Animaciones del Wizard */
.wizard-step {
    transition: opacity 0.3s ease, transform 0.3s ease;
}

/* Loading overlay */
.loader {
    border-top-color: #3b82f6;
    -webkit-animation: spinner 1.5s linear infinite;
    animation: spinner 1.5s linear infinite;
}

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

/* Ajustes para inputs deshabilitados (estilo "readonly") */
input:disabled, select:disabled {
    opacity: 0.7;
    background-color: #1f2937; /* gray-800 */
    color: #9ca3af; /* gray-400 */
    border-color: #374151; /* gray-700 */
}

/* ... (estilos previos) ... */

/* MATRIX STYLES */
.matrix-container {
    overflow-x: auto; /* Scroll horizontal nativo */
    -webkit-overflow-scrolling: touch; /* Suavidad en iOS */
    max-width: 100%;
}

.matrix-container table {
    border-spacing: 0;
}

/* Sticky Columns/Headers */
.matrix-container thead th {
    position: sticky;
    top: 0;
    z-index: 20;
}

.matrix-container td:first-child, 
.matrix-container th:first-child {
    position: sticky;
    left: 0;
    z-index: 30; /* Encima de las otras celdas */
    background-color: #1f2937; /* gray-800 para tapar al hacer scroll */
}

/* Celda táctil */
.availability-cell {
    touch-action: none; /* Prevenir scroll de página al tocar celda */
}

/* Scrollbars finas */
.matrix-container::-webkit-scrollbar {
    height: 8px;
}
.matrix-container::-webkit-scrollbar-thumb {
    background: #4b5563;
    border-radius: 4px;
}

/* Modificar en inscripciones_style.css */

/* Permitir que el contenido sobresalga de los pasos del wizard */
.wizard-step {
    transition: opacity 0.3s ease, transform 0.3s ease;
    overflow: visible !important; /* Cambiado de hidden a visible */
}


/* Evitar que el contenedor principal del wizard limite el alto */
.main-container {
    overflow: visible;
}


/* Permitir que las listas de autocompletado floten fuera de los pasos */
.step-content {
    overflow: visible !important;
}

#step-2, #step-3 {
    overflow: visible !important;
}

/* Estilo para la lista de resultados con prioridad visual */
#j1-results-admin, #j2-results {
    position: absolute;
    z-index: 100; /* Asegura que esté por encima de otros pasos */
    background-color: #1f2937; /* bg-gray-800 */
    border: 1px solid #4b5563;
    border-radius: 0.5rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.5);
    width: 100%;
    max-height: 250px;
    overflow-y: auto;
}


/* Asegurar que el scroll horizontal funcione bien en el contenedor reducido */
.matrix-container {
    overflow-x: auto; 
    -webkit-overflow-scrolling: touch; /* Suavidad nativa en iOS */
    scrollbar-width: none; /* Ocultar scrollbar nativa en Firefox para limpieza visual */
}

/* Ocultar scrollbar nativa en Chrome/Safari/Opera */
.matrix-container::-webkit-scrollbar {
    display: none; 
}

/* Efecto visual al tocar los botones de scroll */
button:active i {
    transform: scale(0.9);
}

/* Ajuste fino para la celda de Hora pegajosa cuando la tabla es más angosta */
.matrix-container table {
    border-spacing: 0;
    min-width: 100%; /* Asegura que llene el contenedor */
}

/* ====== ESTILOS DE CELDA MINIMIZADA ====== */

.availability-cell {
    width: 100%; /* Ocupa el 100% del td */
    height: 14px; /* Altura súper fina */
    transition: background-color 0.1s ease-in-out;
    position: relative;
    overflow: hidden;
}

@media (max-width: 768px) {
    .availability-cell {
        height: 12px; /* Aún más bajita en celulares */
    }
}


@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap');

body {
    font-family: 'Roboto', sans-serif;
    -webkit-tap-highlight-color: transparent; 
}

/* Scrollbars personalizadas para contenedores con overflow */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
::-webkit-scrollbar-track {
    background: #1f2937; 
}
::-webkit-scrollbar-thumb {
    background: #4b5563; 
    border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
    background: #6b7280; 
}

/* Animaciones del Wizard */
.wizard-step {
    transition: opacity 0.3s ease, transform 0.3s ease;
    overflow: visible !important; 
}

.main-container {
    overflow: visible;
}

.step-content {
    transition: all 0.3s ease-in-out;
    overflow: visible !important;
}

#step-2, #step-3 {
    overflow: visible !important;
}

/* Loading overlay */
.loader {
    border-top-color: #3b82f6;
    -webkit-animation: spinner 1.5s linear infinite;
    animation: spinner 1.5s linear infinite;
}

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

/* Ajustes para inputs deshabilitados */
input:disabled, select:disabled {
    opacity: 0.7;
    background-color: #1f2937; 
    color: #9ca3af; 
    border-color: #374151; 
}

/* Estilo para la lista de resultados con prioridad visual */
#j1-results-admin, #j2-results {
    position: absolute;
    z-index: 100; 
    background-color: #1f2937; 
    border: 1px solid #4b5563;
    border-radius: 0.5rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.5);
    width: 100%;
    max-height: 250px;
    overflow-y: auto;
}

/* ------ MATRIX V2 STYLES ------ */
.matrix-container {
    -webkit-overflow-scrolling: touch; /* Scroll suave en iOS */
    scrollbar-width: thin; 
    touch-action: pan-x pan-y; /* Permite arrastre y scroll natural */
}

/* Evitar selección de texto en la grilla para mejor drag */
#disponibilidad-grid {
    user-select: none;
    -webkit-user-select: none;
}

/* Celda base para la Matriz */
.availability-cell {
    position: relative;
    overflow: hidden;
    touch-action: none; /* CRÍTICO para poder pintar deslizando el dedo */
}

.availability-cell:active {
    transform: scale(0.95);
}

/* Colores de estado fijos */
.bg-gray-750 { background-color: #2d3748; }

/* Botones de bloques (UI Nueva) */
.block-btn {
    user-select: none;
    -webkit-user-select: none;
}
.block-btn:active {
    transform: scale(0.95);
}