"aviso" sin clase. Lo forzamos al
color de texto del formulario (tema-aware) para que el guard no dependa de la
herencia y se lea en ambos temas. */
.form p {
color: var(--form-texto);
}
.warning p {
color: var(--form-warning);
}
.reservar {
width: fit-content;
margin: 1.5rem auto 0;
display: flex;
justify-content: center;
align-items: center;
padding: 0.5rem 1.5rem;
font-size: 1.5rem;
font-weight: 800;
text-decoration: none;
border-radius: var(--border-radius);
cursor: pointer;
}
/* ********* BOTONES DE RESERVA CON DEGRADADO ANIMADO *************************** */
/* Aplicado a los 3 botones de reserva: header de index, header de carta/drinks
y botón final del formulario. El degradado se mueve horizontalmente en bucle
para llamar la atención sobre la acción principal del SaaS. */
.index__boton-reservar,
.carta__boton-reservar,
.reservar {
color: var(--blanco);
background: linear-gradient(
270deg,
var(--color-secundario),
var(--color-primario),
color-mix(in srgb, var(--color-primario) 30%, var(--color-secundario)),
var(--color-secundario)
);
/* 300% = (4 paradas - 1) × 100%. Crea espacio para que background-position se mueva */
background-size: 300% 100%;
border: 1px solid var(--blanco);
box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.2);
text-shadow: none;
animation: degradadoMovil 3s ease infinite;
transition:
transform 0.3s ease,
box-shadow 0.3s ease;
&:hover {
transform: scale(1.05);
box-shadow: 0 0.5rem 1.25rem rgba(0, 0, 0, 0.3);
}
}
@keyframes degradadoMovil {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
/* Cerrar formulario de reservas */
.cerrar-formulario {
position: absolute;
top: 0.8rem;
right: 1rem;
/* Disco verde con la X en blanco: el glifo es solo la X (bi-x-lg) y el
círculo lo pone el background, así la X se ve blanca (antes era el hueco
transparente de bi-x-circle-fill y mostraba el fondo oscuro). */
display: flex;
align-items: center;
justify-content: center;
width: 2.2rem;
height: 2.2rem;
padding: 0; /* anula el padding del selector global `i` (si no, sería un óvalo) */
font-size: 1.4rem;
color: var(--blanco);
background: var(--color-primario);
border-radius: 50%;
cursor: pointer;
transition: transform 0.3s ease;
}
.cerrar-formulario:hover {
transform: scale(1.2);
}
.cerrar-formulario-desde-fuera {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
z-index: 2;
}
/* Position absolute */
/* Botón Llamada */
.boton-whatsapp {
display: none;
justify-content: center;
align-items: center;
position: fixed;
bottom: 1rem;
left: 50%;
padding: 0.3rem 2rem;
transform: translate(-45%, -50%);
font-size: 1.2rem;
border: 1px solid var(--blanco);
border-radius: 1.25rem;
box-shadow: var(--sombra);
cursor: pointer;
z-index: 2;
}
.booking {
color: var(--blanco);
text-shadow: none;
}
#booking {
color: var(--blanco);
font-size: 1.5rem;
font-weight: bold;
}
.boton-whatsapp-img {
width: 2rem;
}
.boton-whatsapp span {
font-size: 1.5rem;
font-weight: bold;
}
/* Animaciones fade-in: en estructura-base (estándar de flota) */
/* ============================================================================
MODAL BINGO / QUIZ — singularidad de Danny's Bar (noches de martes).
Modal fixed que se muestra al entrar (cookie 2h). El script inline vive en
index.html. Se conserva al alinear (no está en la base).
============================================================================ */
.bingo-modal {
position: fixed;
inset: 0;
z-index: 30;
display: none; /* .activo lo pasa a flex desde el script */
justify-content: center;
align-items: center;
padding: 1.5rem;
background: rgba(0, 0, 0, 0.6);
backdrop-filter: blur(4px);
}
.bingo-modal.activo {
display: flex;
}
.bingo-modal__img {
width: 100%;
max-width: 26rem;
border-radius: var(--border-radius);
box-shadow: var(--sombra);
}
.bingo-modal__cerrar {
position: absolute;
top: 1.2rem;
right: 1.2rem;
width: 2.6rem;
height: 2.6rem;
display: flex;
justify-content: center;
align-items: center;
border: none;
border-radius: 50%;
background: var(--blanco);
cursor: pointer;
box-shadow: var(--sombra2);
}
.bingo-modal__cerrar .icono {
width: 1.6rem; /* icono más grande dentro del botón */
height: 1.6rem;
/* La X va con la técnica .icono (máscara + color de token): toma el color de
--color-icono-nav (= --color-secundario, azul de marca), así SIEMPRE
contrasta con el botón blanco. Antes era un del cerrar.svg con el fill
horneado en BLANCO → X invisible sobre el botón blanco. */
}
/* fin bingo */