/* =====================================================================
   CASA GIA · Pilates Reformer
   Paleta y tipografías del manual de identidad (ver MARCA.md).

   La marca se llama CASA y el estudio es un espacio de paredes verde
   profundo, madera clara y luz cálida. La página entra igual: por un
   campo verde sólido —no por una cabecera clara con un acento de color—
   y de ahí se pasa al crema, donde vive la agenda.

   El dato que importa sigue siendo cuántos de los seis reformers quedan
   libres, así que el cupo se dibuja como seis marcas verticales, una por
   cama, en lugar de escribirse como número suelto.
   ===================================================================== */

:root {
  /* Paleta oficial */
  --crema:  #f1ebe1;
  --arena:  #cfbfb0;
  --verde:  #003d20;
  --dorado: #937124;

  /* Derivados */
  --verde-claro: #0a5c33;
  --papel:       #fdfaf5;
  --tinta:       #1a1a1a;
  --tinta-suave: #5f5a52;
  --linea:       #e0d6c8;
  --linea-tenue: #ebe3d7;
  --sobre-verde: #efe8dc;
  --sobre-verde-suave: rgba(239, 232, 220, 0.62);

  --serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --sans:  "Raleway", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --ancho: 66rem;
  --aire:  clamp(3.5rem, 8vw, 7rem);

  /* Un solo trazo fino en toda la interfaz */
  --filete: 1px solid var(--linea);
}

* { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--crema);
  color: var(--tinta);
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 300;
  line-height: 1.7;
  letter-spacing: 0.01em;
  -webkit-font-smoothing: antialiased;
  /* En iOS el resaltado azul al tocar rompe la calma de la paleta */
  -webkit-tap-highlight-color: transparent;
}

h1, h2, h3 { margin: 0; font-weight: 400; line-height: 1.15; }

a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 4px; }

button, input, select, textarea {
  font-family: inherit;
  /* 16px es el mínimo que evita que iOS acerque la pantalla al enfocar */
  font-size: 1rem;
}

:focus-visible {
  outline: 1px solid currentColor;
  outline-offset: 3px;
}

.contenedor {
  width: 100%;
  max-width: var(--ancho);
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 5vw, 3rem);
}

.oculto { display: none !important; }

/* Cormorant trae numerales antiguos: el 1 se lee como I, el 0 como o, y en
   tabular el 1 abre un hueco que convierte "17:00" en "1 7:00". Todo lo que
   muestre cifras en serif va en caja alta. */
.clase-hora,
.dia .dia-numero,
.reserva-cuando .hora,
.dato .cifra,
.clase-admin-hora {
  font-variant-numeric: lining-nums;
  font-feature-settings: "lnum" 1;
}

/* =====================================================================
   El campo verde: encabezado y portada son una sola superficie
   ===================================================================== */
.campo-verde {
  background: var(--verde);
  color: var(--sobre-verde);
  /* El notch del iPhone no debe comerse el logo */
  padding-top: env(safe-area-inset-top, 0px);
}

.encabezado .contenedor {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 5.5rem;
}

.marca { display: flex; align-items: center; gap: 1rem; }
.marca img { height: 3.25rem; width: auto; display: block; }
.marca span {
  font-family: var(--serif);
  font-size: 1rem;
  font-style: italic;
  color: var(--sobre-verde-suave);
  padding-left: 1rem;
  border-left: 1px solid rgba(239, 232, 220, 0.22);
}

.sesion-usuario {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  font-size: 0.85rem;
}
.sesion-usuario .nombre { color: var(--sobre-verde-suave); }

/* ---------------------------------------------------------------------
   Portada
   --------------------------------------------------------------------- */
.portada {
  padding: clamp(2.5rem, 7vw, 5.5rem) 0 clamp(3.5rem, 9vw, 7rem);
}

.portada h1 {
  font-family: var(--serif);
  font-weight: 300;
  font-style: italic;
  font-size: clamp(2.75rem, 9vw, 5.5rem);
  line-height: 1.05;
  letter-spacing: -0.015em;
  max-width: 14ch;
  color: var(--sobre-verde);
}

.portada p {
  margin: clamp(1.5rem, 3vw, 2.25rem) 0 0;
  max-width: 44ch;
  color: var(--sobre-verde-suave);
  font-size: clamp(0.95rem, 1.6vw, 1.075rem);
  line-height: 1.8;
}

.acciones-portada {
  margin-top: clamp(2rem, 4vw, 3rem);
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

/* =====================================================================
   Botones — el trazo fino y el tracking hacen el tono, no el relleno
   ===================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* 44px de alto mínimo: lo que iOS y Android piden para el dedo */
  min-height: 2.875rem;
  padding: 0.75rem 1.85rem;
  border: 1px solid var(--verde);
  border-radius: 0;
  background: var(--verde);
  color: var(--papel);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;   /* la portada usa un <a> como botón */
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 0.35s ease, color 0.35s ease, border-color 0.35s ease;
}
.btn:hover:not(:disabled) { background: var(--verde-claro); border-color: var(--verde-claro); }

.btn.secundario { background: transparent; color: var(--verde); }
.btn.secundario:hover:not(:disabled) { background: var(--verde); color: var(--papel); }

.btn.discreto {
  background: transparent;
  border-color: var(--linea);
  color: var(--tinta-suave);
}
.btn.discreto:hover:not(:disabled) { border-color: var(--tinta); color: var(--tinta); }

/* Sobre el campo verde se invierte la lógica */
.campo-verde .btn {
  border-color: rgba(239, 232, 220, 0.5);
  background: transparent;
  color: var(--sobre-verde);
}
.campo-verde .btn:hover:not(:disabled) {
  background: var(--sobre-verde);
  border-color: var(--sobre-verde);
  color: var(--verde);
}
.campo-verde .btn.lleno {
  background: var(--sobre-verde);
  border-color: var(--sobre-verde);
  color: var(--verde);
}
.campo-verde .btn.lleno:hover:not(:disabled) {
  background: transparent;
  color: var(--sobre-verde);
}

.btn:disabled { opacity: 0.35; cursor: not-allowed; }

.btn.pequeno {
  min-height: 2.375rem;
  padding: 0.5rem 1.1rem;
  font-size: 0.66rem;
  letter-spacing: 0.13em;
}

.enlace-boton {
  border: 0;
  background: none;
  padding: 0.25rem 0;
  color: inherit;
  cursor: pointer;
  font-size: 0.8rem;
  font-family: inherit;
  letter-spacing: 0.06em;
  border-bottom: 1px solid currentColor;
  transition: opacity 0.3s ease;
}
.enlace-boton:hover { opacity: 0.65; }

/* =====================================================================
   Tira de días
   ===================================================================== */
.dias {
  border-bottom: var(--filete);
  background: var(--papel);
  position: sticky;
  top: 0;
  z-index: 20;
}

.dias .contenedor {
  display: flex;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 0;
}
.dias .contenedor::-webkit-scrollbar { display: none; }

.dia {
  flex: 0 0 auto;
  min-width: 5rem;
  padding: 1.15rem 0.65rem 1rem;
  border: 0;
  border-right: 1px solid var(--linea-tenue);
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--tinta-suave);
  cursor: pointer;
  text-align: center;
  line-height: 1.3;
  font-family: inherit;
  transition: background-color 0.3s ease, color 0.3s ease;
}
.dia:first-child { border-left: 1px solid var(--linea-tenue); }

.dia .dia-semana {
  display: block;
  font-size: 0.6rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  opacity: 0.75;
}

.dia .dia-numero {
  display: block;
  font-family: var(--serif);
  font-size: 1.7rem;
  font-weight: 300;
  color: var(--tinta);
  margin-top: 0.15rem;
}

.dia[aria-selected="true"] {
  border-bottom-color: var(--verde);
  background: var(--crema);
}
.dia[aria-selected="true"] .dia-numero,
.dia[aria-selected="true"] .dia-semana { color: var(--verde); opacity: 1; }

.dia.sin-cupo .dia-numero { color: var(--arena); }

/* =====================================================================
   Agenda
   ===================================================================== */
.agenda {
  padding: var(--aire) 0;
  /* La tira de días es sticky: sin este margen, el salto desde "Ver
     horarios" deja el título del día escondido detrás de ella. */
  scroll-margin-top: 5.5rem;
}

.agenda h2 {
  font-family: var(--serif);
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: 300;
  font-style: italic;
  color: var(--verde);
  margin-bottom: clamp(2rem, 4vw, 3rem);
}

.clase {
  display: grid;
  grid-template-columns: 7rem 1fr auto;
  align-items: center;
  gap: 1.5rem;
  padding: 1.85rem 0;
  border-top: 1px solid var(--linea-tenue);
}
.clase:last-child { border-bottom: 1px solid var(--linea-tenue); }

.clase-hora {
  font-family: var(--serif);
  font-size: clamp(2rem, 4vw, 2.75rem);
  font-weight: 300;
  color: var(--verde);
  line-height: 1;
}

.clase-cupo { min-width: 0; }

/* Las seis camas del estudio, vistas de lado como los reformers en fila */
.camas {
  display: flex;
  gap: 6px;
  margin-bottom: 0.6rem;
}

.cama {
  width: 9px;
  height: 30px;
  border: 1px solid #b9a794;
  background: var(--papel);
  transition: background-color 0.3s ease;
}
.cama.ocupada { background: var(--verde); border-color: var(--verde); }

.clase-estado {
  font-size: 0.78rem;
  letter-spacing: 0.05em;
  color: var(--tinta-suave);
  font-variant-numeric: tabular-nums;
}
.clase-estado.pocos { color: var(--dorado); }
.clase-estado.mia   { color: var(--verde); font-weight: 500; }

.clase.pasada { opacity: 0.35; }
.clase.cancelada .clase-hora { text-decoration: line-through; color: var(--arena); }

.clase-nota {
  font-size: 0.78rem;
  color: var(--dorado);
  font-style: italic;
  margin-top: 0.2rem;
}

/* =====================================================================
   Cierre: el mensaje de marca
   ===================================================================== */
.cierre {
  background: var(--verde);
  color: var(--sobre-verde);
  padding: var(--aire) 0;
  padding-bottom: calc(var(--aire) + env(safe-area-inset-bottom, 0px));
  text-align: center;
}

.cierre blockquote {
  margin: 0 auto;
  max-width: 34ch;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.4rem, 3.4vw, 2.1rem);
  line-height: 1.4;
}

.cierre .firma {
  margin-top: 2rem;
  font-size: 0.66rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--sobre-verde-suave);
}

/* =====================================================================
   Diálogos
   ===================================================================== */
.telon {
  position: fixed;
  inset: 0;
  background: rgba(0, 26, 14, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
  z-index: 50;
  overflow-y: auto;
}

.tarjeta {
  background: var(--papel);
  border: var(--filete);
  padding: clamp(1.75rem, 5vw, 3rem);
  width: 100%;
  max-width: 27rem;
  max-height: 90vh;
  overflow-y: auto;
}

.tarjeta.ancha { max-width: 42rem; }

.tarjeta h2 {
  font-family: var(--serif);
  font-size: clamp(1.6rem, 4vw, 2.1rem);
  font-weight: 300;
  font-style: italic;
  color: var(--verde);
  margin-bottom: 0.5rem;
}

.tarjeta .subtitulo {
  color: var(--tinta-suave);
  font-size: 0.85rem;
  margin: 0 0 2rem;
}

/* =====================================================================
   Formularios
   ===================================================================== */
.campo { margin-bottom: 1.35rem; }

.campo label {
  display: block;
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--tinta-suave);
  margin-bottom: 0.5rem;
}

.campo input,
.campo select,
.campo textarea {
  width: 100%;
  padding: 0.8rem 0;
  border: 0;
  border-bottom: 1px solid var(--linea);
  border-radius: 0;
  background: transparent;
  color: var(--tinta);
  font-weight: 300;
  transition: border-color 0.3s ease;
  -webkit-appearance: none;
}

.campo input:focus,
.campo select:focus,
.campo textarea:focus {
  border-bottom-color: var(--verde);
  outline: none;
}

.campo textarea { border: 1px solid var(--linea); padding: 0.75rem; }

.campo .ayuda {
  font-size: 0.72rem;
  color: var(--tinta-suave);
  margin: 0.4rem 0 0;
  letter-spacing: 0;
  text-transform: none;
}

.fila-campos { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }

.acciones {
  display: flex;
  gap: 0.85rem;
  align-items: center;
  margin-top: 2rem;
}
.acciones .btn { flex: 1; }

.pie-form {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--linea-tenue);
  font-size: 0.82rem;
  color: var(--tinta-suave);
  text-align: center;
}

/* Los errores dicen qué pasó y qué hacer, sin disculparse */
.aviso {
  padding: 0.85rem 1rem;
  font-size: 0.84rem;
  margin-bottom: 1.5rem;
  border-left: 2px solid;
}
.aviso.error { background: #f9f0ee; border-color: #8c3a30; color: #74302a; }
.aviso.bien  { background: #eef3ef; border-color: var(--verde); color: var(--verde); }

/* =====================================================================
   Confirmación flotante
   ===================================================================== */
.notificacion {
  position: fixed;
  left: 50%;
  bottom: calc(1.75rem + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  background: var(--verde);
  color: var(--sobre-verde);
  padding: 0.95rem 1.75rem;
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  z-index: 100;
  max-width: calc(100vw - 2.5rem);
  text-align: center;
  animation: aparecer 0.35s ease;
}
.notificacion.error { background: #74302a; }

@keyframes aparecer {
  from { opacity: 0; transform: translate(-50%, 0.75rem); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}

/* =====================================================================
   Listas de reservas
   ===================================================================== */
.reserva {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  padding: 1.25rem 0;
  border-top: 1px solid var(--linea-tenue);
}
.reserva:first-of-type { border-top: 0; }

.reserva-cuando .hora {
  font-family: var(--serif);
  font-size: 1.75rem;
  font-weight: 300;
  color: var(--verde);
  line-height: 1.1;
}
.reserva-cuando .fecha {
  display: block;
  font-size: 0.82rem;
  color: var(--tinta-suave);
}

.vacio {
  padding: 3.5rem 0;
  text-align: center;
  color: var(--tinta-suave);
}
.vacio p {
  margin: 0 0 1.5rem;
  font-style: italic;
  font-family: var(--serif);
  font-size: 1.15rem;
}

/* =====================================================================
   Tablet y celular
   ===================================================================== */
/* En pantalla chica el aire se paga con scroll: la agenda se compacta para
   que quepan más horarios de un vistazo, sin tocar el ritmo del escritorio. */
@media (max-width: 52rem) {
  .clase {
    grid-template-columns: 5.5rem 1fr auto;
    gap: 1rem;
    padding: 1.35rem 0;
  }
  .agenda { padding: clamp(2.5rem, 6vw, 4rem) 0; }
}

@media (max-width: 38rem) {
  /* El botón se queda en la misma línea que la hora. Apilarlo debajo se veía
     generoso pero dejaba solo tres horarios por pantalla, y son nueve al día:
     todo el beneficio se iba en scroll. */
  .clase {
    grid-template-columns: 3.75rem 1fr auto;
    gap: 0.75rem;
    padding: 1.15rem 0;
  }
  .clase-hora { font-size: 1.5rem; }
  .clase-accion .btn {
    padding: 0.5rem 0.85rem;
    font-size: 0.6rem;
    letter-spacing: 0.1em;
  }
  .camas { gap: 4px; margin-bottom: 0.3rem; }
  .cama { width: 7px; height: 24px; }
  .clase-estado { font-size: 0.72rem; }

  .marca span { display: none; }
  .marca img { height: 2.9rem; }
  .encabezado .contenedor { min-height: 4.75rem; }
  .sesion-usuario { gap: 0.9rem; }

  .fila-campos { grid-template-columns: 1fr; gap: 0; }
  .acciones { flex-direction: column-reverse; }
  .acciones .btn { width: 100%; }

  .acciones-portada .btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}