/* ======== ESTILOS PARA LA VISTA DE RESERVA ======== */

.reserva-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    /*background-image: url("/images/fondo.png");*/
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: 40px 20px;
}

.reserva-card {
    background-color: rgb(229, 234, 234, 0.9);
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    padding: 30px 40px;
    width: 90%;
    max-width: 900px;
    text-align: center;
}

    /* Título */
    .reserva-card h2 {
        font-size: 1.8rem;
        color: #071833;
        font-weight: 700;
        margin-bottom: 25px;
    }

/* --- ESTILOS DEL FORMULARIO DE FILTRO DE FECHA --- */

/* Contenedor del filtro (filtros-Reserva) */
.filtros-Reserva { /* CLASE CORREGIDA */
    display: flex;
    justify-content: center; /* Centrar los elementos horizontalmente */
    align-items: center;
    margin-bottom: 20px; /* ✅ SEPARACIÓN: Espacio entre la fecha y los horarios */
}

    .filtros-Reserva label {
        font-weight: 600;
        color: #0c223f;
        margin-right: 10px;
    }

.input-fecha-Reserva { /* CLASE CORREGIDA */
    border: 1px solid #ccc;
    border-radius: 8px;
    padding: 6px 12px;
}

/* Botón buscar (mantenemos estilos base) */
.reserva-card .btn-primary {
    background-color: #1c6dd0;
    border: none;
    border-radius: 8px;
    transition: all 0.3s;
}

    .reserva-card .btn-primary:hover {
        background-color: #1558a3;
    }

/* ======== BOTONES DE HORARIOS ======== */

/* Contenedor de botones (para que se centren y envuelvan correctamente) */
.btn-group {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

/* Oculta los círculos de selección */
input[type="radio"] {
    display: none;
}

/* Hace que el span actúe como botón */
label span {
    display: inline-block;
    background-color: white;
    color: #1c6dd0;
    border: 2px solid #1c6dd0;
    border-radius: 8px;
    padding: 8px 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
    margin: 4px; /* Margen entre botones */
}

    /* Efecto hover */
    label span:hover {
        background-color: #1c6dd0;
        color: white;
    }

/* Cuando está seleccionado */
input[type="radio"]:checked + span {
    background-color: #1c6dd0;
    color: white;
    border-color: #1c6dd0;
}

/* Cuando está deshabilitado */
input[type="radio"]:disabled + span {
    background-color: #999;
    color: #eee;
    border-color: #999;
    cursor: not-allowed;
}

/* Botón confirmar */
.btn-reserva {
    margin-top: 35px; /* Más margen para separar del bloque de horarios */
    padding: 10px 25px;
    border-radius: 10px;
    font-weight: 600;
}

/* Contenedor de etiquetas de botones (para flexbox) */
.btn-group label {
    display: inline-block;
}


/* ======================================= */
/* ====== AJUSTES RESPONSIVE (MÓVILES) ===== */
/* ======================================= */

@media (max-width: 600px) {

    /* Hacemos que el filtro se apile verticalmente */
    .filtros-Reserva {
        flex-direction: column;
        gap: 15px;
    }

        /* Centra la etiqueta y el input en su nueva columna */
        .filtros-Reserva label {
            margin-right: 0;
            margin-bottom: 5px;
        }

    .input-fecha-Reserva {
        width: 100%;
        max-width: 200px;
        margin-right: 0;
    }

    /* Asegurar que la tarjeta de reserva no sea demasiado estrecha */
    .reserva-card {
        padding: 20px 15px;
    }

        /* Ajuste de tipografía en títulos para móviles */
        .reserva-card h2 {
            font-size: 1.5rem;
        }
}