/*
 * Sistema de diseno. Lo que el tenant NO puede expresar: escalas, difuminado,
 * elevaciones y componentes. Los colores de marca llegan de /tema.css, que se
 * genera en memoria desde tenant.json; aqui no se escribe ni un color literal
 * salvo los que se derivan con color-mix de los del tenant.
 */

:root {
  /* Escala tipografica fluida: clamp(minimo, preferido, maximo). El termino en
     vw es lo que la hace escalar con el viewport en vez de saltar en cada
     media query. */
  --texto-xs: clamp(0.7rem, 0.68rem + 0.1vw, 0.75rem);
  --texto-sm: clamp(0.8rem, 0.77rem + 0.15vw, 0.875rem);
  --texto-md: clamp(0.9rem, 0.86rem + 0.2vw, 1rem);
  --texto-lg: clamp(1.05rem, 0.98rem + 0.35vw, 1.25rem);
  --texto-xl: clamp(1.2rem, 1.05rem + 0.75vw, 1.5rem);
  --texto-2xl: clamp(1.5rem, 1.2rem + 1.5vw, 2rem);
  --texto-3xl: clamp(1.9rem, 1.4rem + 2.5vw, 2.75rem);

  /* Escala de espaciado, base 4px. */
  --e1: 0.25rem;
  --e2: 0.5rem;
  --e3: 0.75rem;
  --e4: 1rem;
  /* El espaciado grande tambien respira menos en pantallas pequenas. */
  --e6: clamp(1rem, 0.85rem + 0.75vw, 1.5rem);
  --e8: clamp(1.25rem, 1rem + 1.25vw, 2rem);
  --e12: clamp(1.75rem, 1.3rem + 2.25vw, 3rem);

  --difuminado: blur(12px);
  --ancho-max: 72rem;
  --margen-seguro: max(var(--e4), env(safe-area-inset-left, 0px));

  /*
   * Translucidez derivada del tema, no escrita a mano. Asi un cambio de paleta
   * en tenant.json arrastra los bordes y los velos, en vez de dejarlos anclados
   * a un rgba fijo que dejaria de pegar.
   */
  --velo: color-mix(in srgb, var(--color-superficie) 72%, transparent);
  --velo-fuerte: color-mix(in srgb, var(--color-superficie) 88%, transparent);
  --borde-sutil: color-mix(in srgb, var(--color-texto) 10%, transparent);
  --borde-marcado: color-mix(in srgb, var(--color-texto) 18%, transparent);
  --acento-tenue: color-mix(in srgb, var(--color-acento) 16%, transparent);
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--fuente);
  font-size: var(--texto-md);
  line-height: 1.5;
  color: var(--color-texto);
  background-color: var(--color-fondo);
  /*
   * Malla de gradientes en vez de un fondo plano: son tres manchas muy diluidas
   * que dan profundidad sin dibujar nada. `fixed` evita que se muevan al hacer
   * scroll, que es lo que delataria que son un fondo y no luz.
   */
  background-image:
    radial-gradient(60rem 40rem at 15% -10%, var(--acento-tenue), transparent 60%),
    radial-gradient(45rem 35rem at 110% 10%,
      color-mix(in srgb, var(--color-exito) 10%, transparent), transparent 60%),
    radial-gradient(50rem 50rem at 50% 120%,
      color-mix(in srgb, var(--color-acento) 10%, transparent), transparent 60%);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
}

/* --- Superficies ---------------------------------------------------------- */

.superficie {
  background: var(--velo);
  backdrop-filter: var(--difuminado);
  -webkit-backdrop-filter: var(--difuminado);
  border: 1px solid var(--borde-sutil);
  border-radius: var(--radio-grande);
  box-shadow: var(--sombra);
}

.tarjeta { padding: var(--e6); }

/* --- Estructura ----------------------------------------------------------- */

.cabecera {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: var(--e4);
  padding: var(--e3) var(--e6);
  background: var(--velo-fuerte);
  backdrop-filter: var(--difuminado);
  -webkit-backdrop-filter: var(--difuminado);
  border-bottom: 1px solid var(--borde-sutil);
}

.cabecera__marca {
  font-size: var(--texto-lg);
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0;
}

.cabecera__lema {
  color: var(--color-texto-suave);
  font-size: var(--texto-sm);
  margin: 0;
}

.cabecera__acciones { margin-left: auto; display: flex; gap: var(--e2); }

.contenido {
  max-width: var(--ancho-max);
  margin: 0 auto;
  padding: var(--e8) var(--e6);
}

/* --- Paginas legales ------------------------------------------------------ */

.legal {
  max-width: 42rem;
  margin: 0 auto;
  padding: var(--e8) var(--e6);
}
.legal__titulo { margin-bottom: var(--e2); }
.legal__fecha { color: var(--color-texto-suave); font-size: var(--texto-sm); }
.legal h2 { margin-top: var(--e6); font-size: var(--texto-lg); }
.legal p { margin-top: var(--e3); line-height: 1.6; }

/* Que se vea a la primera que el texto es de relleno: el dia que sea real,
   esto se borra y nadie tiene que acordarse de buscarlo. */
.legal__aviso {
  border: 1px solid var(--color-error);
  border-radius: var(--radio);
  padding: var(--e3) var(--e4);
  margin-bottom: var(--e6);
  font-size: var(--texto-sm);
}

.pie {
  max-width: var(--ancho-max);
  margin: 0 auto;
  padding: var(--e8) var(--e6);
  color: var(--color-texto-suave);
  font-size: var(--texto-sm);
}

/* --- Botones -------------------------------------------------------------- */

.boton {
  font: inherit;
  font-weight: 550;
  color: var(--color-texto);
  background: var(--velo);
  border: 1px solid var(--borde-marcado);
  border-radius: var(--radio);
  padding: var(--e2) var(--e4);
  cursor: pointer;
  transition: all var(--transicion);
}

.boton:hover { border-color: var(--color-acento); }

/*
 * :focus-visible y no :focus. El contorno solo aparece para quien navega con
 * teclado, y NO se quita sin sustituirlo: sin el, la aplicacion es inusable
 * sin raton.
 */
.boton:focus-visible,
.campo__entrada:focus-visible {
  outline: 2px solid var(--color-acento);
  outline-offset: 2px;
}

.boton:active { transform: scale(0.97); }

.boton--principal {
  color: var(--color-fondo);
  background: var(--color-acento);
  border-color: transparent;
}

.boton--principal:hover { background: var(--color-acento-hover); }

.boton[disabled] { opacity: 0.5; cursor: not-allowed; transform: none; }

/* --- Formularios ---------------------------------------------------------- */

.campo { display: flex; flex-direction: column; gap: var(--e1); margin-bottom: var(--e4); }

.campo__etiqueta { font-size: var(--texto-sm); color: var(--color-texto-suave); }

.campo__entrada {
  font: inherit;
  color: var(--color-texto);
  background: color-mix(in srgb, var(--color-fondo) 60%, transparent);
  border: 1px solid var(--borde-marcado);
  border-radius: var(--radio);
  padding: var(--e2) var(--e3);
  transition: border-color var(--transicion);
}

.campo__entrada:hover { border-color: var(--borde-sutil); }

/* Se marca el campo que la API senalo en `detalles`, no el formulario entero. */
.campo--error .campo__entrada { border-color: var(--color-error); }
.campo__error { color: var(--color-error); font-size: var(--texto-xs); }

/* La regla se dice ANTES de que la persona escriba, no solo al rechazarla. */
.campo__ayuda { color: var(--color-texto-suave); font-size: var(--texto-xs); }

/* La casilla y su texto en una fila, alineados arriba para que un texto de dos
   lineas no descentre el cuadrito. Toda la etiqueta es zona de clic. */
.campo__casilla {
  display: flex;
  gap: var(--e2);
  align-items: flex-start;
  font-size: var(--texto-sm);
  cursor: pointer;
}
.campo__casilla input { margin-top: 0.15em; flex-shrink: 0; }

/* --- Avisos flotantes ----------------------------------------------------- */

/*
 * El contenedor existe desde el principio y vive vacio: la Tarea 2 solo mete y
 * saca hijos. Es `region` con aria-live para que un lector de pantalla anuncie
 * el aviso sin robar el foco.
 */
.avisos {
  position: fixed;
  right: var(--e6);
  bottom: var(--e6);
  z-index: 100;
  display: flex;
  flex-direction: column;
  gap: var(--e2);
  width: min(24rem, calc(100vw - var(--e8)));
}

.aviso {
  background: var(--velo-fuerte);
  backdrop-filter: var(--difuminado);
  -webkit-backdrop-filter: var(--difuminado);
  border: 1px solid var(--borde-sutil);
  border-left: 3px solid var(--color-texto-suave);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  padding: var(--e3) var(--e4);
  animation: aviso-entra var(--transicion);
}

.aviso--error { border-left-color: var(--color-error); }
.aviso--exito { border-left-color: var(--color-exito); }
.aviso__detalle { color: var(--color-texto-suave); font-size: var(--texto-sm); }

@keyframes aviso-entra {
  from { opacity: 0; transform: translateY(var(--e2)); }
  to { opacity: 1; transform: none; }
}

/* --- Accesibilidad -------------------------------------------------------- */

/*
 * Quien pide menos movimiento no recibe NINGUNA de las animaciones ni escalas.
 * No es un detalle opcional: para algunas personas el movimiento produce mareo.
 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .boton:active { transform: none; }
}

.solo-lectores {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* --- Dialogos ------------------------------------------------------------- */

/*
 * <dialog> nativo y no un div: trae el atrapado de foco, el cierre con Escape y
 * la capa modal sin una linea de JavaScript ni una dependencia.
 */
.dialogo {
  width: min(28rem, calc(100vw - var(--e8)));
  padding: var(--e6);
  color: var(--color-texto);
  background: var(--velo-fuerte);
  backdrop-filter: var(--difuminado);
  -webkit-backdrop-filter: var(--difuminado);
  border: 1px solid var(--borde-sutil);
  border-radius: var(--radio-grande);
  box-shadow: var(--sombra);
}

.dialogo::backdrop {
  background: color-mix(in srgb, var(--color-fondo) 70%, transparent);
  backdrop-filter: blur(4px);
}

.dialogo__titulo { margin: 0 0 var(--e4); font-size: var(--texto-xl); }
.dialogo__acciones { display: flex; gap: var(--e2); justify-content: flex-end; }

/* --- Movil ---------------------------------------------------------------- */

@media (max-width: 40rem) {
  /*
   * Mobile first de verdad: en pantalla estrecha el dialogo deja de ser una
   * tarjeta flotante y se pega abajo, que es donde llega el pulgar.
   */
  .dialogo {
    width: 100%;
    max-width: none;
    margin: auto auto 0;
    border-radius: var(--radio-grande) var(--radio-grande) 0 0;
  }

  .dialogo__acciones { flex-direction: column-reverse; }
  .dialogo__acciones .boton { width: 100%; }

  /* Los avisos ocupan el ancho con margenes de seguridad, sin pegarse al borde. */
  .avisos {
    right: var(--margen-seguro);
    left: var(--margen-seguro);
    bottom: var(--margen-seguro);
    width: auto;
  }

  .cabecera { flex-wrap: wrap; gap: var(--e2); }
  .cabecera__acciones { width: 100%; margin-left: 0; }
  .cabecera__acciones .boton { flex: 1; }
}

@media (min-width: 40.001rem) {
  .dialogo { margin: auto; }
}

/* --- Grilla de disponibilidad --------------------------------------------- */

/*
 * auto-fill con minmax: las celdas se reacomodan solas segun el ancho, sin una
 * sola media query. En un telefono caben dos, en una tablet cuatro y en un
 * monitor seis, y nadie tuvo que escribir los puntos de corte.
 */
.grilla {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr));
  gap: var(--e3);
  margin-top: var(--e6);
  padding: 0;
  list-style: none;
}

.bloque {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: var(--e1);
  width: 100%;
  min-height: 5.25rem;
  padding: var(--e3);
  text-align: left;
  font: inherit;
  color: var(--color-texto);
  background: var(--velo);
  border: 1px solid var(--borde-sutil);
  border-radius: var(--radio);
  transition: transform var(--transicion), border-color var(--transicion),
    box-shadow var(--transicion);
  /* Entra con la cascada. El retraso lo calcula grilla.js, no el CSS. */
  animation: bloque-entra 320ms cubic-bezier(.25, .46, .45, .94) backwards;
}

.bloque__hora { font-size: var(--texto-lg); font-weight: 600; letter-spacing: -0.01em; }
.bloque__dato { font-size: var(--texto-sm); color: var(--color-texto-suave); }

.bloque[data-estado="libre"] { cursor: pointer; }

.bloque[data-estado="libre"]:hover {
  transform: translateY(-2px);
  border-color: var(--color-acento);
  box-shadow: var(--sombra);
}

.bloque[data-estado="libre"]:focus-visible {
  outline: 2px solid var(--color-acento);
  outline-offset: 2px;
}

.bloque[data-estado="libre"]:active { transform: scale(0.97); }

/*
 * Barrido diagonal del estado seleccionado.
 *
 * Tecnica adaptada del checkbox de Nawsome en uiverse.io, publicado bajo
 * licencia MIT (https://uiverse.io/Nawsome/heavy-cheetah-95). Original:
 *   Copyright (c) Nawsome - MIT License
 * Aqui cambia el color por nuestra variable de acento, el tamano se ata al
 * propio bloque y el disparador es aria-pressed en vez de :checked.
 */
.bloque::before {
  content: "";
  position: absolute;
  inset-inline-start: -120%;
  inset-block-start: -120%;
  width: 240%;
  aspect-ratio: 1;
  background: var(--acento-tenue);
  transform: rotate(45deg);
  transition: inset-inline-start var(--transicion), inset-block-start var(--transicion);
  pointer-events: none;
}

.bloque[aria-pressed="true"]::before { inset-inline-start: -70%; inset-block-start: -70%; }
.bloque[aria-pressed="true"] { border-color: var(--color-acento); }

/* Los cinco estados que no se pueden pulsar. */
.bloque[data-estado="ocupado"],
.bloque[data-estado="bloqueado"],
.bloque[data-estado="pasado"],
.bloque[data-estado="cerrado"],
.bloque[data-estado="lejano"] {
  cursor: not-allowed;
  color: var(--color-texto-suave);
  background: color-mix(in srgb, var(--color-superficie) 40%, transparent);
}

/* Se distinguen por una marca de color, no solo por opacidad: apagarlo todo por
   igual dejaria "reservado" y "cerrado" indistinguibles. */
.bloque[data-estado="ocupado"] { border-inline-start: 3px solid var(--color-error); }
.bloque[data-estado="bloqueado"] { border-inline-start: 3px solid var(--color-texto-suave); }
.bloque[data-estado="pasado"],
.bloque[data-estado="lejano"],
.bloque[data-estado="cerrado"] { opacity: 0.55; }

@keyframes bloque-entra {
  from { opacity: 0; transform: translateY(var(--e3)) scale(0.98); }
  to { opacity: 1; transform: none; }
}

/* --- Selector de dia y de cancha ------------------------------------------ */

.filtros {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e3);
  align-items: flex-end;
}

.filtros .campo { flex: 1 1 12rem; margin-bottom: 0; }

.vacio {
  margin-top: var(--e6);
  padding: var(--e6);
  text-align: center;
  color: var(--color-texto-suave);
  border: 1px dashed var(--borde-marcado);
  border-radius: var(--radio-grande);
}

@media (prefers-reduced-motion: reduce) {
  .bloque { animation: none; }
  .bloque[data-estado="libre"]:hover { transform: none; }
}

/* --- Resumen de confirmacion ---------------------------------------------- */

.resumen { margin: 0 0 var(--e6); display: grid; gap: var(--e2); }

.resumen__fila {
  display: flex;
  justify-content: space-between;
  gap: var(--e4);
  padding-bottom: var(--e2);
  border-bottom: 1px solid var(--borde-sutil);
}

.resumen__fila:last-child { border-bottom: none; }
.resumen__clave { color: var(--color-texto-suave); font-size: var(--texto-sm); }
.resumen__valor { font-weight: 550; text-align: right; }

/* --- Mis reservas --------------------------------------------------------- */

.reservas { display: grid; gap: var(--e2); padding: 0; margin: 0; list-style: none; }

.reserva {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e2) var(--e4);
  padding: var(--e3);
  background: var(--velo);
  border: 1px solid var(--borde-sutil);
  border-radius: var(--radio);
}

.reserva__datos { flex: 1 1 14rem; min-width: 0; }
.reserva__cancha { font-weight: 600; }
.reserva__cuando { color: var(--color-texto-suave); font-size: var(--texto-sm); }
.reserva--cancelada { opacity: 0.55; }
.reserva--cancelada .reserva__cancha { text-decoration: line-through; }

.reserva__estado {
  font-size: var(--texto-xs);
  padding: var(--e1) var(--e2);
  border-radius: 999px;
  border: 1px solid var(--borde-marcado);
  color: var(--color-texto-suave);
}

.seccion__titulo {
  margin: var(--e6) 0 var(--e2);
  font-size: var(--texto-sm);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-texto-suave);
}

@media (max-width: 40rem) {
  /* En movil la accion baja a su propia linea y ocupa el ancho: un boton de
     destruir apretujado al lado del texto se pulsa sin querer. */
  .reserva__accion { width: 100%; }
}