/* ============================
   FORMULARIO COMPUBOX 360
   ============================ */

/* Campos */
.form-overlay {
    position: absolute;
    z-index: 999998;

    color: #f7f7f7;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 6px;
    padding-left: 8px;
    font-size: 16px;
    backdrop-filter: blur(2px);
    cursor: text;
}

/* Placeholder */
.form-overlay::placeholder {
    color: #e6e6e6;
    opacity: 0.9;
}

/* Foco */
.form-overlay:focus {
    outline: none;
    border-color: #66baff;
    background: rgba(255, 255, 255, 0.22);
}

/* Validación */
.form-overlay.valid {
    border-color: #4cd964;
    background: rgba(76, 217, 100, 0.15);
    box-shadow: 0 0 6px rgba(76, 217, 100, 0.4);
}

.form-overlay.invalid {
    border-color: #ff3b30;
    background: rgba(255, 59, 48, 0.15);
    box-shadow: 0 0 6px rgba(255, 59, 48, 0.4);
}

/* Errores */
.form-error {
    display: none;
    color: #d60000;
    font-size: 14px;
    font-weight: bold;
}

/* ============================
   BOTÓN DE RESERVA
   ============================ */
#btn-reservar {
    position: absolute;
    display: block;

    cursor: pointer;
    pointer-events: auto;

    z-index: 1000000; /* SIEMPRE arriba */

    background-color: transparent !important;
    border: none !important;
    padding: 0 !important;

}
/* ============================
   DEBUG: mostrar TODOS los botones
   ============================ */
/*
.link-overlay,
.email-overlay,
.whatsapp-overlay,
#btn-reservar {
    background: rgba(255, 0, 0, 0.4) !important;
    border: 2px solid red !important;
    z-index: 1000000 !important;
}

.form-overlay[type="button"],
button.form-overlay {
    background: rgba(255, 0, 0, 0.4) !important;
    border: 2px solid red !important;
    z-index: 1000000 !important;
}
*/

/* Animaciones */
.shake {
    animation: shake 0.4s ease;
}

@keyframes shake {
    0%   { transform: translateX(0); }
    20%  { transform: translateX(-6px); }
    40%  { transform: translateX(6px); }
    60%  { transform: translateX(-4px); }
    80%  { transform: translateX(4px); }
    100% { transform: translateX(0); }
}

.pulse {
    animation: pulse 1.2s infinite ease-in-out;
}

@keyframes pulse {
    0%   { transform: scale(1); }
    50%  { transform: scale(1.06); }
    100% { transform: scale(1); }
}

#btn-enviar-resena:hover {
    background: rgba(255,255,255,0.25);
    transform: scale(1.03);
    box-shadow: 0 0 10px rgba(0,200,255,0.6);
}

#btn-enviar-resena:active {
    transform: scale(0.97);
}