/* ==========================================================================
   Kizuna · páginas públicas de reserva (/agendar), ADR‑035. Hoja propia (la superficie pública no carga el sistema del
   panel), con los mismos colores y muelles: claro y oscuro según el sistema, y todo el movimiento se apaga con
   «reducir movimiento».
   ========================================================================== */
@layer reset, tokens, base, componentes, movimiento;

@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("/fonts/inter-var.woff2") format("woff2"); }
@font-face { font-family: "Space Grotesk"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("/fonts/space-grotesk-var.woff2") format("woff2"); }

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  * { margin: 0; }
  input, button, textarea, select { font: inherit; color: inherit; }
  button { background: none; border: 0; padding: 0; cursor: pointer; }
  ul, ol { list-style: none; padding: 0; }
  a { color: inherit; }
  /* stylelint-disable-next-line declaration-no-important -- [hidden] debe ganar siempre, como en la hoja del navegador. */
  [hidden] { display: none !important; }
}

@layer tokens {
  :root {
    color-scheme: light dark;
    --fondo: light-dark(#f6f7f5, #0b0c0b);
    --caja: light-dark(#fff, #141614);
    --lado: light-dark(#eef1ec, #191c19);
    --superficie: light-dark(#e7ebe5, #202420);
    --texto: light-dark(#161a16, #eef1ec);
    --suave: light-dark(#4d554d, #aab3aa);
    --borde: light-dark(#cfd6cc, #333a33);
    --primario: light-dark(#006e45, #00ff9f);
    --sobre-primario: light-dark(#fff, #00331e);
    --tonal: light-dark(#cdeedb, #1b3a2a);
    --sobre-tonal: light-dark(#003920, #bff5d6);
    --aviso: light-dark(#fff1cf, #3d3210);
    --sobre-aviso: light-dark(#4d3800, #ffe39a);
    --error: light-dark(#ffdad6, #5c1e18);
    --sobre-error: light-dark(#8c1d13, #ffdad6);
    --foco: light-dark(#006e45, #7dffc7);
    --r-s: 10px; --r-m: 14px; --r-l: 22px; --r-full: 999px;
    --e1: 4px; --e2: 8px; --e3: 12px; --e4: 16px; --e5: 24px; --e6: 32px; --e7: 48px;
    --muelle: linear(0, 0.098, 0.314, 0.556, 0.77, 0.93, 1.031, 1.081, 1.095, 1.085, 1.065, 1.042, 1.022, 1.007, 0.997, 0.992, 0.991, 0.992, 0.994, 0.996, 1);
    --suave-fin: cubic-bezier(.2, 0, 0, 1);
    --t-rapido: 180ms; --t-medio: 380ms;
  }
}

@layer base {
  html { background: var(--fondo); }
  body { min-block-size: 100dvh; background: var(--fondo); color: var(--texto); font: 400 1rem/1.55 "Inter", system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
  h1, h2 { font-family: "Space Grotesk", "Inter", system-ui, sans-serif; font-weight: 500; text-wrap: balance; }
  :focus-visible { outline: 3px solid var(--foco); outline-offset: 2px; }
  a { color: var(--primario); }
}

@layer componentes {
  /* Seguimiento del proyecto para el cliente (enlace privado, sustituye al Portal). */
  .seguimiento { display: grid; gap: var(--e4); inline-size: min(720px, 100%); margin-inline: auto; padding: var(--e6) var(--e4) var(--e7); }
  .seguimiento__caja { display: grid; gap: var(--e3); padding: var(--e5); border-radius: var(--r-l); background: var(--caja); }
  .seguimiento h1 { font-size: 1.75rem; line-height: 1.2; }
  .seguimiento h2 { font-size: 1.125rem; }
  .seguimiento__antetitulo, .seguimiento__nota, .seguimiento__pie, .seguimiento__fecha { color: var(--suave); font-size: .875rem; }
  .seguimiento__avance { font-weight: 600; }
  .seguimiento__barra { appearance: none; inline-size: 100%; block-size: 8px; border: 0; border-radius: 8px; background: var(--superficie); overflow: hidden; }
  .seguimiento__barra::-webkit-progress-bar { background: var(--superficie); }
  .seguimiento__barra::-webkit-progress-value { background: var(--primario); }
  .seguimiento__barra::-moz-progress-bar { background: var(--primario); }
  .seguimiento__etapas { list-style: none; padding: 0; display: grid; gap: var(--e2); }
  .seguimiento__etapa { display: flex; align-items: center; gap: var(--e3); color: var(--suave); }
  .seguimiento__punto { inline-size: 12px; block-size: 12px; border-radius: var(--r-full); border: 2px solid var(--borde); flex: none; }
  .seguimiento__etapa--hecha { color: var(--texto); }
  .seguimiento__etapa--hecha .seguimiento__punto { background: var(--primario); border-color: var(--primario); }
  .seguimiento__etapa--actual { color: var(--texto); font-weight: 600; }
  .seguimiento__etapa--actual .seguimiento__punto { border-color: var(--primario); box-shadow: 0 0 0 4px var(--tonal); }
  .seguimiento__ahora { margin-inline-start: auto; padding: 2px var(--e2); border-radius: var(--r-full); background: var(--tonal); color: var(--sobre-tonal); font-size: .75rem; font-weight: 600; }
  .seguimiento__lista { padding-inline-start: 1.2em; display: grid; gap: var(--e2); }
  .seguimiento__lista--hitos { list-style: none; padding: 0; }
  .seguimiento__lista--hitos li { display: flex; justify-content: space-between; gap: var(--e3); padding: var(--e3) var(--e4); border-radius: var(--r-m); background: var(--lado); }
  .seguimiento__lista--hitos li.hecho .seguimiento__fecha { color: var(--primario); font-weight: 600; }
  .seguimiento__pie { text-align: center; }

  .reserva { display: grid; place-items: start center; padding: var(--e5) var(--e4) var(--e7); }
  @media (min-width: 720px) { .reserva { padding-block-start: var(--e7); } }
  .reserva__caja {
    inline-size: min(1040px, 100%); display: grid; border-radius: var(--r-l); overflow: hidden;
    background: var(--caja); box-shadow: 0 1px 2px rgb(0 0 0 / .06), 0 12px 40px rgb(0 0 0 / .08);
  }
  @media (min-width: 900px) { .reserva__caja { grid-template-columns: 300px minmax(0, 1fr); min-block-size: 560px; } }
  .reserva__lado { display: grid; gap: var(--e5); align-content: start; padding: var(--e5); background: var(--lado); }
  .reserva__marca { display: flex; align-items: center; gap: var(--e3); }
  .reserva__marca div { display: grid; }
  .reserva__marca span:not(.reserva__avatar) { font-size: .875rem; color: var(--suave); }
  .reserva__avatar {
    display: grid; place-items: center; inline-size: 48px; block-size: 48px; flex: none; border-radius: var(--r-full);
    background: var(--primario); color: var(--sobre-primario); font: 600 1.05rem/1 "Space Grotesk", sans-serif;
  }
  .reserva__resumen { display: grid; gap: var(--e3); font-size: .9375rem; color: var(--suave); }
  .reserva__resumen li { display: flex; gap: var(--e2); align-items: flex-start; }
  .reserva__resumen--fuerte { color: var(--texto); font-weight: 600; }
  .reserva__icono { inline-size: 20px; block-size: 20px; flex: none; margin-block-start: 1px; }
  .reserva__principal { display: grid; gap: var(--e5); align-content: start; padding: var(--e5); min-inline-size: 0; }
  @media (min-width: 900px) { .reserva__principal { padding: var(--e6); } }
  .reserva__pasos { display: flex; flex-wrap: wrap; gap: var(--e2) var(--e4); font-size: .8125rem; color: var(--suave); }
  .reserva__pasos li { display: inline-flex; align-items: center; gap: var(--e2); }
  .reserva__pasos li span {
    display: grid; place-items: center; inline-size: 22px; block-size: 22px; border-radius: var(--r-full);
    background: var(--superficie); font-weight: 600; font-size: .75rem;
  }
  .reserva__pasos li[aria-current="step"] { color: var(--texto); font-weight: 600; }
  .reserva__pasos li[aria-current="step"] span { background: var(--primario); color: var(--sobre-primario); }
  .reserva__pasos li.hecho span { background: var(--tonal); color: var(--sobre-tonal); }
  .reserva__titulo { font-size: clamp(1.5rem, 3vw, 1.875rem); line-height: 1.2; }
  .reserva__atras { font-size: .875rem; text-decoration: none; font-weight: 600; }
  .reserva__nota, .reserva__vacio { color: var(--suave); }
  .reserva__vacio { padding: var(--e5); border-radius: var(--r-m); background: var(--lado); }
  .reserva__error { padding: var(--e3) var(--e4); border-radius: var(--r-m); background: var(--error); color: var(--sobre-error); }

  /* Paso 1: servicios */
  .reserva__servicios { display: grid; gap: var(--e3); grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr)); }
  .reserva__servicio {
    display: grid; gap: var(--e2); align-content: start; block-size: 100%; padding: var(--e5); border-radius: var(--r-m);
    background: var(--lado); border: 2px solid transparent; text-decoration: none; color: var(--texto);
  }
  .reserva__servicio:hover { border-color: var(--primario); }
  .reserva__servicio-nombre { font: 600 1.0625rem/1.3 "Space Grotesk", sans-serif; }
  .reserva__servicio-texto { font-size: .875rem; color: var(--suave); }
  .reserva__chips { display: flex; flex-wrap: wrap; gap: var(--e1); margin-block: var(--e1); }
  .reserva__chip { display: inline-flex; align-items: center; gap: var(--e1); padding: 2px var(--e2); border-radius: var(--r-s); background: var(--superficie); font-size: .8125rem; color: var(--suave); }
  .reserva__chip .reserva__icono { inline-size: 16px; block-size: 16px; margin: 0; }
  .reserva__precio { font: 600 1.125rem/1.2 "Space Grotesk", sans-serif; }

  /* Paso 2: calendario y horas */
  .reserva__eleccion { display: grid; gap: var(--e5); }
  @media (min-width: 720px) { .reserva__eleccion { grid-template-columns: minmax(0, 1fr) 200px; } }
  .reserva__mes { display: flex; align-items: center; justify-content: space-between; margin-block-end: var(--e3); }
  .reserva__mes h2 { font-size: 1.0625rem; }
  .reserva__mes-boton {
    display: grid; place-items: center; inline-size: 40px; block-size: 40px; border-radius: var(--r-full);
    text-decoration: none; font-size: 1.5rem; line-height: 1; color: var(--texto);
  }
  a.reserva__mes-boton:hover { background: var(--superficie); }
  .reserva__dias { display: grid; grid-template-columns: repeat(7, 1fr); gap: var(--e1); text-align: center; }
  .reserva__dia-semana { font-size: .75rem; font-weight: 600; color: var(--suave); padding-block: var(--e1); }
  .reserva__dia {
    display: grid; place-items: center; justify-self: center; inline-size: 100%; max-inline-size: 46px; aspect-ratio: 1;
    border-radius: var(--r-full); font-variant-numeric: tabular-nums; font-size: .9375rem;
  }
  a.reserva__dia { background: var(--tonal); color: var(--sobre-tonal); font-weight: 600; text-decoration: none; }
  a.reserva__dia:hover { outline: 2px solid var(--primario); }
  a.reserva__dia[aria-current="date"] { background: var(--primario); color: var(--sobre-primario); }
  .reserva__dia--ocupado { color: var(--suave); opacity: .45; }
  .reserva__zona { display: flex; align-items: center; gap: var(--e1); margin-block-start: var(--e3); font-size: .8125rem; color: var(--suave); }
  .reserva__zona .reserva__icono { inline-size: 16px; block-size: 16px; margin: 0; }
  .reserva__horas { display: grid; gap: var(--e2); align-content: start; }
  .reserva__horas h2 { font-size: .9375rem; }
  .reserva__horas ul { display: grid; gap: var(--e2); max-block-size: 420px; overflow-y: auto; padding: 2px; }
  .reserva__horas form { display: contents; }
  .reserva__hora {
    display: grid; place-items: center; inline-size: 100%; min-block-size: 46px; border-radius: var(--r-m);
    border: 1.5px solid var(--primario); color: var(--primario); font-weight: 600; text-decoration: none; font-variant-numeric: tabular-nums;
  }
  .reserva__hora:hover { background: var(--primario); color: var(--sobre-primario); }

  /* Paso 3: datos */
  .reserva__formulario { display: grid; gap: var(--e4); }
  .reserva__fila { display: grid; gap: var(--e4); grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); }
  .reserva__campo { display: grid; gap: var(--e1); }
  .reserva__campo label { font-size: .875rem; font-weight: 600; }
  .reserva__campo label span { font-weight: 400; color: var(--suave); }
  .reserva__campo input, .reserva__campo textarea, .reserva__campo select {
    inline-size: 100%; min-block-size: 48px; padding: var(--e3) var(--e4); border-radius: var(--r-s);
    border: 1px solid var(--borde); background: var(--caja); color: var(--texto);
  }
  .reserva__campo textarea { resize: vertical; min-block-size: 96px; }
  .reserva__campo input:focus-visible, .reserva__campo textarea:focus-visible, .reserva__campo select:focus-visible { outline: 2px solid var(--primario); outline-offset: 0; border-color: transparent; }
  .reserva__cupon > summary { cursor: pointer; font-size: .875rem; color: var(--primario); font-weight: 600; }
  .reserva__cupon[open] > summary { margin-block-end: var(--e3); }
  .reserva__politica { padding: var(--e3) var(--e4); border-radius: var(--r-m); background: var(--lado); font-size: .875rem; color: var(--suave); }
  .reserva__casilla { display: flex; gap: var(--e3); align-items: flex-start; font-size: .875rem; }
  .reserva__casilla input { inline-size: 20px; block-size: 20px; margin-block-start: 2px; accent-color: var(--primario); flex: none; }
  .reserva__boton {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--e2); justify-self: start;
    min-block-size: 48px; padding-inline: var(--e5); border-radius: var(--r-full);
    background: var(--primario); color: var(--sobre-primario); font-weight: 600; text-decoration: none; border: 1.5px solid transparent;
  }
  .reserva__boton--tonal { background: var(--tonal); color: var(--sobre-tonal); }
  .reserva__boton--contorno { background: transparent; color: var(--texto); border-color: var(--borde); }
  .reserva__boton--peligro { background: var(--error); color: var(--sobre-error); }

  /* Paso 4 y reserva */
  .reserva__estado { display: grid; gap: var(--e2); }
  .reserva__estado p { color: var(--suave); }
  .reserva__retencion { display: flex; gap: var(--e2); align-items: center; padding: var(--e3) var(--e4); border-radius: var(--r-m); background: var(--aviso); color: var(--sobre-aviso); }
  .reserva__pago { display: grid; gap: var(--e2); padding: var(--e5); border-radius: var(--r-m); background: var(--lado); }
  .reserva__monto { font: 600 1.5rem/1.2 "Space Grotesk", sans-serif; }
  .reserva__monto span { font: 400 .8125rem/1 "Inter", sans-serif; color: var(--suave); }
  .reserva__dato { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--e2); padding: var(--e3) var(--e4); border-radius: var(--r-s); background: var(--caja); }
  .reserva__copiar { padding: var(--e1) var(--e3); border-radius: var(--r-full); font-size: .8125rem; font-weight: 600; color: var(--primario); }
  .reserva__copiar:hover { background: var(--tonal); }
  .reserva__acciones { display: flex; flex-wrap: wrap; gap: var(--e2); }
  .reserva__en-linea { display: grid; gap: var(--e3); padding: var(--e5); border-radius: var(--r-m); background: var(--lado); }
  .reserva__en-linea form { display: contents; }
  .reserva__otra-forma { display: grid; gap: var(--e4); }
  .reserva__otra-forma > summary { cursor: pointer; font-size: .875rem; font-weight: 600; color: var(--primario); }
  .reserva__otra-forma[open] > summary { margin-block-end: var(--e4); }
  .reserva__aviso { padding: var(--e3) var(--e4); border-radius: var(--r-m); background: var(--tonal); color: var(--sobre-tonal); }
  .reserva__acciones--secundarias { padding-block-start: var(--e4); border-block-start: 1px solid var(--borde); }
  .reserva__enlace { font-size: .875rem; font-weight: 600; color: var(--primario); cursor: pointer; }
  .reserva__confirmar > summary { list-style: none; }
  .reserva__confirmar > summary::-webkit-details-marker { display: none; }
  .reserva__confirmar form { display: grid; gap: var(--e2); margin-block-start: var(--e3); }
}

@layer movimiento {
  @media (prefers-reduced-motion: no-preference) {
    .reserva__caja { animation: entrar var(--t-medio) var(--muelle) both; }
    .reserva__principal > * { animation: subir var(--t-medio) var(--muelle) backwards; }
    .reserva__principal > :nth-child(2) { animation-delay: 40ms; }
    .reserva__principal > :nth-child(n + 3) { animation-delay: 80ms; }
    .reserva__servicios > li, .reserva__horas li { animation: subir var(--t-medio) var(--muelle) backwards; }
    .reserva__servicios > li:nth-child(2), .reserva__horas li:nth-child(2) { animation-delay: 40ms; }
    .reserva__servicios > li:nth-child(3), .reserva__horas li:nth-child(3) { animation-delay: 80ms; }
    .reserva__servicios > li:nth-child(n + 4), .reserva__horas li:nth-child(n + 4) { animation-delay: 120ms; }
    .reserva__servicio, .reserva__hora, .reserva__boton, a.reserva__dia, .reserva__copiar {
      transition: translate var(--t-medio) var(--muelle), scale var(--t-rapido) var(--muelle), background-color var(--t-rapido) var(--suave-fin), color var(--t-rapido) var(--suave-fin), border-color var(--t-rapido) var(--suave-fin);
    }
    .reserva__servicio:hover { translate: 0 -3px; }
    .reserva__boton:active, .reserva__hora:active, a.reserva__dia:active { scale: .95; }
    a.reserva__dia[aria-current="date"] { animation: pulso var(--t-medio) var(--muelle); }
    .reserva__retencion { animation: subir var(--t-medio) var(--muelle) backwards; }
    @keyframes entrar { from { opacity: 0; translate: 0 16px; scale: .985; } }
    @keyframes subir { from { opacity: 0; translate: 0 12px; } }
    @keyframes pulso { 40% { scale: 1.15; } }
    @view-transition { navigation: auto; }
    ::view-transition-old(root), ::view-transition-new(root) { animation-duration: var(--t-rapido); }
  }
}