/* ============================================================================
   Squash Copérnico — estilos propios del sitio.
   El grueso del diseño visual se hace con clases de utilidad de Tailwind
   (cargado por CDN en cada página); aquí solo van las reglas que Tailwind
   no cubre directamente.
   ============================================================================ */

/* Ajuste de los íconos "Material Symbols Outlined" (usados en todas las
   páginas: header, footer, tarjetas de servicios, etc.) */
.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* Variante "rellena" del mismo ícono (ej. la pestaña activa del panel de
   admin, en admin/index.html) */
.icon-fill {
  font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* Recorte diagonal del hero de la página Club (paginas/club.html) */
.hero-clip {
  clip-path: polygon(0 0, 100% 0, 100% 90%, 0 100%);
}

/* ============================================================================
   Animaciones compartidas. Para cambiar qué tan rápido/lento se sienten,
   ajusta el número de milisegundos (ms) de cada "animation:" de aquí abajo
   — entre más grande, más lenta.
   ============================================================================ */

/* Fondo oscuro del modal (js/modal.js) */
@keyframes overlay-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
.anim-overlay-in {
  animation: overlay-in 1000ms ease-out;
}

/* Tarjeta del modal (js/modal.js) */
@keyframes modal-in {
  from { opacity: 0; transform: scale(0.95) translateY(4px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}
.anim-modal-in {
  animation: modal-in 1000ms ease-out;
}

/* Contenido que se re-dibuja (lista de canchas/horarios, resumen de reserva) */
@keyframes fade-in-up {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}
.anim-fade-in {
  animation: fade-in-up 1000ms ease-out;
}

/* Selección puntual (un horario elegido, el total al actualizarse) */
@keyframes pop-in {
  from { opacity: 0.4; transform: scale(0.94); }
  to { opacity: 1; transform: scale(1); }
}
.anim-pop {
  animation: pop-in 1000ms ease-out;
}