/* ══════════════════════════════════════════════════════════════════════════
   AURA · Reserva en línea
   Design system "Industry" reproducido en el entorno destino.

   No se copia el styles.css del handoff: ese archivo es la referencia de
   diseño. Aquí se reproducen sus tokens y solo las clases que esta pantalla
   usa, que es lo que pedía el README del bundle.

   Regla del sistema: cards, botones e inputs son de esquina RECTA. Las cajas
   son dibujos de línea (borde de 1px, sin relleno) con marcas de registro "+"
   en las cuatro esquinas. El único objeto sólido es el botón primario.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Tipografías empaquetadas ──────────────────────────────────────────────
   Barlow y Barlow Condensed servidas desde este mismo origen, no desde
   Google Fonts. Motivos:
     · La PWA funciona sin red desde la primera visita.
     · No hay una petición a un tercero antes de poder pintar texto.
     · Ningún dato del visitante sale hacia otro dominio.
   Solo se incluyen los subconjuntos latin y latin-ext: cubren el español
   y los símbolos de moneda europeos. El `unicode-range` hace que el
   navegador descargue únicamente el que necesite.
   `font-display: swap` mantiene el texto visible mientras carga. */
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fuentes/barlow-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fuentes/barlow-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fuentes/barlow-500-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fuentes/barlow-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fuentes/barlow-700-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fuentes/barlow-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fuentes/barlow-condensed-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fuentes/barlow-condensed-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fuentes/barlow-condensed-600-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fuentes/barlow-condensed-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


:root {
  /* ── Color ── */
  --color-bg:       #f2f2f3;
  --color-surface:  #e9e9ea;
  --color-text:     #1d1f20;
  --color-accent:   #5980a6;
  --color-divider:  color-mix(in srgb, #1d1f20 16%, transparent);

  --color-neutral-200: #e7e7ea;
  --color-neutral-300: #d4d4d7;
  --color-neutral-500: #98989b;
  --color-neutral-600: #7a7a7d;

  --color-accent-100: #eef6ff;
  --color-accent-600: #597ea3;
  --color-accent-700: #416180;

  /* ── Estados de disponibilidad (extensión propia del sistema) ── */
  --ocupado-bg:     #fdecec;
  --ocupado-linea:  #c0392b;
  --apartado-bg:    #fff5e6;
  --apartado-linea: #c47f17;
  --apartado-texto: #a9690f;

  /* ── Tipografía ── */
  --font-heading: "Barlow Condensed", "Arial Narrow", system-ui, sans-serif;
  --font-body:    "Barlow", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* ── Espaciado (escala 0.85×) ── */
  --space-1: 3.4px;  --space-2: 6.8px;  --space-3: 10.2px;
  --space-4: 13.6px; --space-6: 20.4px; --space-8: 27.2px;

  --marca: color-mix(in srgb, var(--color-text) 55%, transparent);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.55;
  -webkit-text-size-adjust: 100%;
}

h1, h2, h3, h4 {
  font-family: var(--font-heading);
  font-weight: 600;
  margin: 0;
  line-height: 1.1;
}
h2 { font-size: 32px; }
h4 { font-size: 20px; }

.apagado { color: var(--color-neutral-600); }

/* ── Foco de teclado: 2px del acento, nunca el anillo azul del navegador ── */
:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/* ══ Marco blueprint ═══════════════════════════════════════════════════════
   Las cuatro marcas "+" se dibujan con ocho gradientes sobre un pseudo-
   elemento que sobresale 6px de la caja. El sistema original usa cuatro
   <i class="corner">; aquí se hace en CSS porque las tarjetas se generan
   desde JS y así no hay que inyectar cuatro nodos vacíos en cada una. */
.blueprint {
  position: relative;
  border: 1px solid var(--color-divider);
  border-radius: 0;
  background: transparent;
}
.blueprint::before {
  content: "";
  position: absolute;
  inset: -6px;
  pointer-events: none;
  background:
    linear-gradient(var(--marca), var(--marca)) left 5px top 0 / 1px 11px no-repeat,
    linear-gradient(var(--marca), var(--marca)) left 0 top 5px / 11px 1px no-repeat,
    linear-gradient(var(--marca), var(--marca)) right 5px top 0 / 1px 11px no-repeat,
    linear-gradient(var(--marca), var(--marca)) right 0 top 5px / 11px 1px no-repeat,
    linear-gradient(var(--marca), var(--marca)) left 5px bottom 0 / 1px 11px no-repeat,
    linear-gradient(var(--marca), var(--marca)) left 0 bottom 5px / 11px 1px no-repeat,
    linear-gradient(var(--marca), var(--marca)) right 5px bottom 0 / 1px 11px no-repeat,
    linear-gradient(var(--marca), var(--marca)) right 0 bottom 5px / 11px 1px no-repeat;
}

/* ══ Estructura ══ */
.pagina {
  min-height: 100vh;
  min-height: 100dvh;      /* evita el salto por la barra del navegador móvil */
  display: flex;
  justify-content: center;
  padding: var(--space-8) var(--space-4);
}
.columna {
  width: min(500px, 100%);
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

/* ══ Marca ══ */
.marca { display: flex; align-items: center; gap: var(--space-3); }
.marca-cuadro {
  width: 32px; height: 32px; flex: none;
  display: grid; place-items: center;
  background: var(--color-accent);
}
.marca-cuadro svg { stroke: var(--color-bg); }
.marca-nombre {
  font-family: var(--font-heading); font-weight: 600;
  font-size: 19px; letter-spacing: 0.04em; line-height: 1;
}
.marca-bajada {
  font-size: 9px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--color-neutral-600);
}

/* ══ Iconos ══ */
.ico {
  width: 18px; height: 18px; display: block; flex: none;
  stroke: currentColor; stroke-width: 1.5; fill: none;
  stroke-linecap: round; stroke-linejoin: round;
}
.ico-sm { width: 15px; height: 15px; }

/* ══ Stepper ══ */
.pasos { display: flex; align-items: center; gap: var(--space-2); }
.paso { flex: 1; display: flex; align-items: center; gap: 8px; min-width: 0; }
.paso-num {
  width: 26px; height: 26px; flex: none;
  display: grid; place-items: center;
  font-family: var(--font-heading); font-size: 13px;
  border: 1px solid var(--color-divider);
  color: var(--color-neutral-500);
}
.paso-txt {
  font-family: var(--font-heading); font-size: 13px;
  color: var(--color-neutral-500);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.paso[data-estado="hecho"] .paso-num   { border-color: var(--color-accent); color: var(--color-accent); }
.paso[data-estado="actual"] .paso-num  { border-color: var(--color-accent); background: var(--color-accent); color: var(--color-bg); }
.paso[data-estado="hecho"] .paso-txt,
.paso[data-estado="actual"] .paso-txt  { color: var(--color-text); }

/* ══ Botones ══ */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px;
  font-family: var(--font-body); font-size: 14px; font-weight: 500;
  padding: 9px var(--space-4);
  border: 1px solid var(--color-divider);
  border-radius: 0;
  background: transparent;
  color: var(--color-text);
  cursor: pointer;
  transition: background .12s, border-color .12s;
}
.btn:hover:not(:disabled) { background: color-mix(in srgb, var(--color-accent) 8%, transparent); }
.btn:active:not(:disabled) { background: color-mix(in srgb, var(--color-accent) 16%, transparent); }
.btn:disabled { opacity: .45; cursor: not-allowed; }

.btn-primario {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-bg);
}
.btn-primario svg { stroke: var(--color-bg); }
.btn-primario:hover:not(:disabled)  { background: var(--color-accent-600); border-color: var(--color-accent-600); }
.btn-primario:active:not(:disabled) { background: var(--color-accent-700); border-color: var(--color-accent-700); }

.btn-icono { padding: 7px; }
.btn-bloque { width: 100%; height: 48px; font-size: 16px; }

/* ══ Servicios (paso 1) ══ */
.servicios { display: flex; flex-direction: column; gap: var(--space-4); }
.servicio {
  display: flex; align-items: center; gap: var(--space-4);
  padding: var(--space-4);
  width: 100%; text-align: left;
  font: inherit; color: inherit;
  cursor: pointer;
  transition: background .12s, border-color .12s;
}
.servicio:hover { background: color-mix(in srgb, var(--color-accent) 6%, transparent); }
.servicio[aria-pressed="true"] {
  border-color: var(--color-accent);
  background: var(--color-accent-100);
}
.servicio-nombre { display: block; font-family: var(--font-heading); font-size: 17px; line-height: 1.1; }
.servicio-meta {
  display: flex; align-items: center; gap: 5px;
  font-size: 12px; margin-top: 2px; color: var(--color-neutral-600);
}
.servicio-precio { font-family: var(--font-heading); font-size: 20px; }

/* ══ Calendario (paso 2) ══ */
.calendario { padding: var(--space-4); }
.cal-cabecera { display: flex; align-items: center; margin-bottom: var(--space-4); }
.cal-mes {
  flex: 1; text-align: center; text-transform: capitalize;
  font-family: var(--font-heading); font-size: 17px;
}
.cal-semana, .cal-dias { display: grid; grid-template-columns: repeat(7, 1fr); }
.cal-semana { gap: 2px; margin-bottom: 6px; }
.cal-semana span {
  text-align: center; font-size: 10px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--color-neutral-600);
}
.cal-dias { gap: 4px; }

.dia {
  position: relative;
  height: 44px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1px;
  font-family: var(--font-heading); font-size: 15px;
  border: 1px solid var(--color-divider);
  border-radius: 0;
  background: transparent;
  color: var(--color-text);
  cursor: pointer;
}
.dia:hover:not(:disabled) { background: color-mix(in srgb, var(--color-accent) 10%, transparent); }
.dia[disabled] { cursor: not-allowed; }
.dia-etiqueta { font-family: var(--font-body); font-size: 7px; letter-spacing: .06em; line-height: 1; }
.dia-hueco { visibility: hidden; }

/* PASADO: apagado, sin más lectura. */
.dia[data-estado="PASADO"] { opacity: .28; }

/* COMPLETO: rojo. Comunica "otro cliente lo tomó". */
.dia[data-estado="COMPLETO"] {
  background: var(--ocupado-bg);
  border-color: var(--ocupado-linea);
  color: var(--ocupado-linea);
}

/* CERRADO y BLOQUEADO: gris, NO rojo. El rojo dice "ocupado por alguien";
   un domingo o unas vacaciones no lo están, y teñirlos de rojo haría pensar
   al cliente que el salón está desbordado. */
.dia[data-estado="CERRADO"],
.dia[data-estado="BLOQUEADO"] {
  background: var(--color-neutral-200);
  border-color: var(--color-neutral-300);
  color: var(--color-neutral-600);
  opacity: .8;
}

.dia[aria-pressed="true"] {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-bg);
}

/* ══ Franjas horarias ══ */
.franjas-cabecera { display: flex; align-items: center; margin-bottom: var(--space-3); }
.franjas { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-2); }
.franja {
  height: 44px; padding: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1px; line-height: 1;
  font-size: 14px;
}
.franja-etiqueta { font-family: var(--font-body); font-size: 8px; letter-spacing: .08em; }

.franja[data-estado="OCUPADO"] {
  background: var(--ocupado-bg);
  border-color: var(--ocupado-linea);
  color: var(--ocupado-linea);
}
.franja[data-estado="APARTADO"] {
  background: var(--apartado-bg);
  border-color: var(--apartado-linea);
  color: var(--apartado-texto);
}
/* SIN_CUPO: la hora está libre pero el servicio no cabe entero (p. ej. 18:30
   con un corte de 60 min). No es culpa de otro cliente, así que se muestra
   como deshabilitado neutro y SIN etiqueta: leerlo como "ocupado" sería
   mentirle al cliente. */
.franja[data-estado="SIN_CUPO"] { opacity: .45; }

.franja[aria-pressed="true"] {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-bg);
}

.leyenda {
  display: flex; flex-wrap: wrap; gap: var(--space-4);
  margin-top: var(--space-4); font-size: 11px;
}
.leyenda span { display: inline-flex; align-items: center; gap: 6px; }
.leyenda i { width: 12px; height: 12px; border: 1px solid var(--color-divider); }
.leyenda .l-apartado { border-color: var(--apartado-linea); background: var(--apartado-bg); }
.leyenda .l-ocupado  { border-color: var(--ocupado-linea);  background: var(--ocupado-bg); }
.leyenda .l-sincupo  { border-color: var(--color-divider);  opacity: .45; }

/* ══ Etiquetas ══ */
.tag {
  display: inline-flex; align-items: center;
  font-size: 11px; padding: 2px 8px;
  border: 1px solid var(--color-divider);
  border-radius: 0;
}

/* ══ Formulario (paso 3) ══ */
.resumen { padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-3); }
.resumen-fila { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-4); }
.resumen-k { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--color-neutral-600); }
.resumen-v { font-family: var(--font-heading); font-size: 16px; text-align: right; }

.campos { display: flex; flex-direction: column; gap: var(--space-4); }
.campo { display: flex; flex-direction: column; gap: var(--space-2); }
.campo label { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--color-neutral-600); }
.entrada {
  font-family: var(--font-body); font-size: 15px;
  padding: 10px var(--space-3);
  border: 1px solid var(--color-divider);
  border-radius: 0;
  background: var(--color-bg);
  color: var(--color-text);
  width: 100%;
}
.entrada:hover { border-color: var(--color-neutral-500); }
.campo-error .entrada { border-color: var(--ocupado-linea); }
.campo-mensaje { font-size: 12px; color: var(--ocupado-linea); }

.previsualizacion { padding: var(--space-4); background: var(--color-surface); }
.previsualizacion-titulo {
  font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
  margin-bottom: 6px; color: var(--color-neutral-600);
}
.previsualizacion-cuerpo { font-size: 13px; white-space: pre-wrap; line-height: 1.5; }

/* ══ Navegación inferior ══ */
.navegacion { display: flex; gap: var(--space-3); margin-top: var(--space-2); }
.navegacion .derecha { margin-left: auto; }

/* ══ Avisos ══════════════════════════════════════════════════════════════
   El handoff no diseñó ninguna pantalla de error, y el 409 "ese horario ya
   no está disponible" es el camino de fallo más probable del flujo. */
.aviso {
  padding: var(--space-4);
  display: flex; flex-direction: column; gap: var(--space-3);
  background: var(--ocupado-bg);
  border-color: var(--ocupado-linea);
}
.aviso-titulo {
  font-family: var(--font-heading); font-size: 17px;
  color: var(--ocupado-linea);
  display: flex; align-items: center; gap: 8px;
}
.aviso-cuerpo { font-size: 13px; }
.aviso-alternativas { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.aviso.aviso-neutro { background: var(--color-surface); border-color: var(--color-divider); }
.aviso.aviso-neutro .aviso-titulo { color: var(--color-text); }

/* ══ Carga ══ */
.cargando {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: var(--space-8) 0;
  font-size: 13px; color: var(--color-neutral-600);
}
.girando {
  width: 16px; height: 16px;
  border: 2px solid var(--color-neutral-300);
  border-top-color: var(--color-accent);
  border-radius: 50%;
  animation: girar .7s linear infinite;
}
@keyframes girar { to { transform: rotate(360deg); } }

/* Quien prefiere menos movimiento no necesita ver girar nada. */
@media (prefers-reduced-motion: reduce) {
  .girando { animation-duration: 3s; }
  * { transition-duration: .01ms !important; }
}

.oculto { display: none !important; }

/* Solo para lectores de pantalla: los anuncios de cambio de paso. */
.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;
}

/* ── Pantallas muy estrechas ── */
@media (max-width: 380px) {
  .franjas { grid-template-columns: repeat(3, 1fr); }
  .paso-txt { display: none; }        /* el número basta cuando no hay sitio */
  h2 { font-size: 27px; }
}