/* =================================================================
   reserva.css - Estilos para el Frontend de la Reserva
   ================================================================= */

/* --- Estilos del Formulario General --- */

#aca-form-reserva input[type="text"],
#aca-form-reserva input[type="email"],
#aca-form-reserva input[type="tel"],
#aca-form-reserva input[type="date"],
#aca-form-reserva select {
    display: block;
    width: 100%;
    padding: 10px;
    margin-bottom: 15px;
    border: 1px solid #ccc;
    box-sizing: border-box; /* Crucial para que el padding no cambie el ancho */
}

/* --- Estilos de Botones de Horario --- */

.aca-hora-btn {
    padding: 8px 15px;
    margin: 5px;
    border: none;
    cursor: pointer;
    font-weight: bold;
    border-radius: 4px;
    transition: background-color 0.2s;
}

.hora-libre {
    background-color: #4CAF50; /* Verde */
    color: white;
}

.hora-libre:hover, .aca-hora-btn.seleccionado {
    background-color: #45a049;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}

.hora-ocupada {
    background-color: #f44336; /* Rojo */
    color: white;
    opacity: 0.6;
    cursor: not-allowed;
}

/* --- Estilos del Contenedor del Croquis --- */

#aca-croquis-container {
    position: relative; 
    /* AJUSTAR: El ancho y alto deben coincidir con las dimensiones de croquis-base.jpg */
    width: 100%; 
    max-width: 800px; /* Ejemplo, ajusta al tamaño de tu imagen */
    margin: 20px 0;
}

#aca-croquis-imagen {
    width: 100%;
    height: auto;
    display: block;
}

/* --- Estilos de las 5 Áreas Interactivas (.aca-espacio) --- */

.aca-espacio {
    position: absolute; 
    display: flex;
    justify-content: center;
    align-items: center;
    border: 3px solid transparent; 
    background-color: rgba(0, 128, 0, 0.4); /* Verde semi-transparente (Disponible) */
    color: white;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.3s, border-color 0.3s;
    border-radius: 5px;
}

/* **ESTILOS CRUCIALES PARA EL POSICIONAMIENTO** */
/* Debes medir la imagen y ajustar TOP, LEFT, WIDTH y HEIGHT para cada bahía */

.aca-espacio[data-espacio-id="1"] {
    top: 10%; 
    left: 1%; 
    width: 15%; 
    height: 30%;
}

.aca-espacio[data-espacio-id="2"] {
    top: 10%; 
    left: 23%; 
    width: 15%; 
    height: 30%;
}

.aca-espacio[data-espacio-id="3"] {
    top: 10%; 
    left: 45%; 
    width: 15%; 
    height: 30%;
}

.aca-espacio[data-espacio-id="4"] {
    top: 10%; 
    left: 68%; 
    width: 15%; 
    height: 30%;
}

.aca-espacio[data-espacio-id="5"] {
    top: 10%; 
    left: 90%; 
    width: 10%; 
    height: 30%;
}

/* --- Estados de las Bahías --- */

.aca-espacio:hover {
    border-color: #4CAF50;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

.aca-espacio.reservado {
    background-color: rgba(255, 0, 0, 0.6); /* Rojo (Ocupado) */
    cursor: not-allowed;
    border-color: transparent;
}

.aca-espacio.reservado:hover {
    border-color: transparent;
    box-shadow: none;
}

.aca-espacio.seleccionado {
    background-color: rgba(0, 0, 255, 0.6); /* Azul (Seleccionado por el usuario) */
    border: 3px solid #00FFFF;
}