/* ==========================================================================
   CSS INTEGRADO Y UNIFICADO - SISTEMA DE TURNOS SPA BERNARDO GOGLIO
   Maquetación moderna, control de pasos SPA y responsive sin floats.
   ========================================================================== */

/* --- 1. RESETEO GENERAL Y TIPOGRAFÍA --- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    width: 100%;
}

body {
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    background-color: #f8f9fa;
    color: #333;
}

/* Forzar a elementos interactivos a heredar la tipografía principal */
input, button, select, textarea {
    font-family: inherit;
}

header {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
    padding: 40px 20px !important;
    background: linear-gradient(135deg, #2b3e50 0%, #1e2b37 100%) !important;
    border-bottom: 3px solid #dee2e6 !important;
}

/* --- 2. MANEJO DE PASOS SPA (ESTRICTO) --- */
.paso-contenedor {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    clear: both !important;
    float: none !important;
    transition: all 0.2s ease-in-out;
}

.oculto {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
}

.contenedor-badge-paso {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    float: none !important;
    margin-bottom: 25px !important;
    clear: both !important;
}

/* --- 3. PASO 1: LADO A LADO (MESES + CALENDARIO) --- */
.grturno {
    display: flex !important;
    flex-direction: row !important;
    justify-content: center !important;
    align-items: flex-start !important;
    gap: 25px !important;
    width: 100% !important;
    max-width: 640px !important;
    margin: 0 auto !important;
    float: none !important;
    clear: both !important;
    padding: 0 15px !important;
    box-sizing: border-box !important;
}

/* Columna Izquierda: Meses */
.columna-meses {
    flex: 0 0 130px !important;
    width: 130px !important;
    max-width: 130px !important;
    float: none !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    box-sizing: border-box !important;
}

.titulo-ano-vertical {
    text-align: center !important;
    font-size: 0.82rem !important;
    color: #2b3e50 !important;
    font-weight: bold !important;
    margin-top: 10px !important;
    margin-bottom: 4px !important;
}

.mesnum {
    display: block !important;
    text-align: center !important;
    padding: 8px 10px !important;
    border: 1px solid #ced4da !important;
    border-radius: 8px !important;
    font-size: 0.85rem !important;
    color: #495057 !important;
    background-color: #ffffff !important;
    transition: all 0.15s ease-in-out !important;
    cursor: pointer !important;
    user-select: none !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.mesnum:hover:not(:disabled) {
    color: #2b3e50 !important;
    border-color: #2b3e50 !important;
    background-color: #f8f9fa !important;
}

.mesnum.active, .mesnum.active_mes {
    color: #ffffff !important;
    background-color: #2b3e50 !important;
    border-color: #2b3e50 !important;
    font-weight: bold !important;
}

.mesnum:disabled {
    opacity: 0.35;
    cursor: not-allowed;
    background-color: #e9ecef !important;
}

/* Columna Derecha: El Almanaque */
.container-calendar {
    flex: 1 !important;
    max-width: 440px !important;
    width: 100% !important;
    float: none !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}

.calendario-mes {
    background: #ffffff !important;
    border: 1px solid #e9ecef !important;
    border-radius: 16px !important;
    padding: 20px !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.04) !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.calendario-mes > b, .container-calendar h3 {
    display: block !important;
    font-size: 1.1rem !important;
    color: #2b3e50 !important;
    margin-bottom: 15px !important;
    text-align: center !important;
    font-weight: 700 !important;
}

/* Grilla del Mes (7 Columnas) */
.grsemana {
    display: grid !important;
    grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
    gap: 6px !important;
    border: none !important;
    background: none !important;
    padding: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.grsemana > div {
    border: none !important;
    border-radius: 8px !important;
    font-size: 0.9rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    aspect-ratio: 1 / 1 !important;
    box-sizing: border-box !important;
    transition: all 0.15s ease !important;
}

/* Encabezado de Días (D al S) */
.grsemana > div:nth-child(-n+7), .grsemana .dia-nombre {
    background-color: #eef2f6 !important;
    color: #1e2b37 !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    font-size: 0.62rem !important;
    padding: 6px 0 !important;
    aspect-ratio: auto !important;
    margin-bottom: 2px !important;
}

/* Configuración de celdas según estado del día */
.grsemana > div.laboral {
    background-color: #f8f9fa !important;
    border: 1px solid #e9ecef !important;
    padding: 0;
}

.grsemana > div.laboral:hover {
    background-color: #e9ecef !important;
    transform: scale(1.04);
}

.btn-dia-accion, .grsemana .laboral button {
    background: none;
    border: none;
    color: inherit;
    font: inherit;
    cursor: pointer;
    padding: 0;
    width: 100%;
    height: 100%;
    display: inline-block;
    text-align: center;
    font-weight: bold;
}

.grsemana > div.feriado {
    background-color: #fee2e2 !important;
    color: #dc2626 !important;
    font-weight: 600 !important;
    border: none !important;
}

.grsemana > div.libre, .grsemana .libre {
    background-color: #86b2fed4 !important;
    border: 1px solid #dee2e6 !important;
    color: #000 !important;
    cursor: not-allowed;
}

/* ✂️ Traslado de la textura decorativa de Tijeras aquí (Solo celdas vacías) */
.grsemana > div.vacio, .dia-vacio {
    background: transparent !important;
    border: none !important;
   /* background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512' fill='%23cccccc'><path d='M112 112c0 26.5-21.5 48-48 48S16 138.5 16 112s21.5-48 48-48 48 21.5 48 48zm33.3 92.2c-15-28.7-45-48.2-79.3-48.2-49.7 0-90 40.3-90 90s40.3 90 90 90c34.3 0 64.3-19.5 79.3-48.2L232.7 256 145.3 204.2zM64 400c0 26.5 21.5 48 48 48s48-21.5 48-48-21.5-48-48-48-48 21.5-48 48zm81.3-48.2c-15-28.7-45-48.2-79.3-48.2-49.7 0-90 40.3-90 90s40.3 90 90 90c34.3 0 64.3-19.5 79.3-48.2L232.7 256l-87.4-51.8zM289.4 256l143.5-85.1c9.3-5.5 12.3-17.6 6.8-26.9s-17.6-12.3-26.9-6.8L256 226.7l-33.4-19.8-19.1 32 49.9 29.6-49.9 29.6 19.1 32 33.4-19.8L412.8 374c9.3 5.5 21.4 2.5 26.9-6.8s2.5-21.4-6.8-26.9L289.4 256z'/></svg>") !important;
     background-repeat: repeat !important;
    background-size: 14px 14px !important;
    opacity: 0.15; /* Sutil para que quede elegante */
}


/* ==========================================================================
   4. PASO 2: SELECCIÓN DE HORARIOS (ASÍNCRONO AJAX)
   ========================================================================== */
.card {
    background: #ffffff;
    border: 1px solid #dee2e6;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

.grid-horarios, .grid-horarios-ajax {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
    margin-top: 12px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.btn-hora, .bloque-hora {
    padding: 8px 4px !important;
    text-align: center;
    border-radius: 6px;
    font-weight: 600;
    font-size: 0.88rem;
    border: 1px solid #dee2e6;
    width: 100%;
    transition: background 0.15s ease, transform 0.1s ease;
    box-sizing: border-box;
}

.btn-hora.disponible, .bloque-hora.disponible {
    background-color: #e2f0d9 !important;
    color: #385723 !important;
    border-color: #c5e0b4 !important;
    cursor: pointer;
}

.btn-hora.disponible:hover, .bloque-hora.disponible:hover {
    background-color: #d2e8c4 !important;
    transform: scale(1.02);
}

.btn-hora.ocupado, .btn-hora.pasado, .bloque-hora.ocupado {
    background-color: #fce4d6 !important;
    color: #c65911 !important;
    border-color: #f8cbad !important;
    cursor: not-allowed;
    opacity: 0.7;
}

/* Indicadores de referencias inferiores */
.grid-referencias {
    display: flex;
    justify-content: space-around;
    margin-top: 20px;
}

.ref-box {
    width: 16px;
    height: 16px;
    display: inline-block;
    border-radius: 4px;
    margin-right: 6px;
}

.ref-disponible { background-color: #e2f0d9; border: 1px solid #c5e0b4; }
.ref-ocupado { background-color: #fce4d6; border: 1px solid #f8cbad; }


/* ==========================================================================
   5. PASO 3: FORMULARIO CONTROLADO DE RESERVAS
   ========================================================================== */
#form-reserva-final {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.campo-grupo {
    display: flex;
    flex-direction: column;
    margin-bottom: 15px;
}

.campo-grupo label, .label-limpio-reserva {
    display: block !important;
    width: 100% !important;
    text-align: left !important;
    margin-bottom: 4px !important;
    color: #495057 !important;
    font-size: 0.85rem !important;
    font-weight: 600 !important;
}

.campo-grupo input.form-control, .input-limpio-reserva {
    display: block !important;
    width: 100% !important;
    height: 40px !important;
    padding: 6px 12px !important;
    font-size: 15px;
    border: 1px solid #ced4da !important;
    border-radius: 6px !important;
    background-color: #ffffff !important;
    color: #212529 !important;
    box-sizing: border-box !important;
}

.campo-grupo input.form-control:focus, .input-limpio-reserva:focus {
    border-color: #86b7fe !important;
    outline: 0;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25) !important;
}

#btn-enviar-reserva {
    width: 100%;
    padding: 14px;
    font-size: 16px;
    font-weight: bold;
    color: #ffffff;
    background-color: #0d6efd;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    margin-top: 15px;
    transition: background-color 0.15s ease;
}

#btn-enviar-reserva:hover {
    background-color: #0b5ed7;
}


/* ==========================================================================
   6. RESPONSIVE COMPLETO PARA DISPOSITIVOS MÓVILES
   ========================================================================== */
@media (max-width: 768px) {
    /* Corregido: En lugar de ocultar la barra de meses, la transformamos en un menú de selección horizontal superior */
    .grturno {
        flex-direction: column !important;
        align-items: center !important;
        max-width: 100% !important;
        padding: 0 10px !important;
        gap: 15px !important;
    }

    .columna-meses {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        width: 100% !important;
        max-width: 100% !important;
        flex: none !important;
        gap: 8px !important;
    }

    .titulo-ano-vertical {
        width: 100% !important;
        margin-top: 5px !important;
        margin-bottom: 2px !important;
        font-size: 0.9rem !important;
    }

    .mesnum {
        width: auto !important;
        flex: 1 1 calc(33.33% - 8px); /* Distribuye 3 meses por fila balanceadamente */
        min-width: 90px !important;
        padding: 8px 5px !important;
    }
    
    .container-calendar {
        max-width: 100% !important;
    }
}

@media screen and (max-width: 480px) {
    .mesnum {
        flex: 1 1 calc(50% - 8px); /* En pantallas hiper chicas, 2 meses por fila */
    }

    .grsemana {
        gap: 4px !important;
    }
    
    .grsemana > div {
        font-size: 13px !important;
    }
    
    .grid-horarios, .grid-horarios-ajax {
        grid-template-columns: 1fr !important; 
    }
}