/* flots · css/paginas/agenda.css
   Agenda pública (/agenda) — Agenda (1440) y MAgenda (390).
   Desktop: columna izquierda (título + datos) y calendario de 640 px a la derecha, ambos
   centrados en el alto disponible. ≤1199: todo apilado (título, calendario, formulario).
   ========================================================================== */

.agenda{
  display:flex;
  flex-direction:column;
  min-height:calc(100vh - var(--alto-banner));
}

/* La columna izquierda (intro + formulario) y el calendario quedan centrados en vertical,
   como el `align-items:center` del artboard. Las filas 1fr de arriba y abajo reparten el
   espacio sobrante; el calendario ocupa las cuatro filas. */
.agenda-main{
  flex:1 0 auto;
  display:grid;
  grid-template-columns:minmax(0, 1fr) 640px;
  grid-template-rows:1fr auto auto 1fr;
  grid-template-areas:
    ".     panel"
    "intro panel"
    "form  panel"
    ".     panel";
  column-gap:88px;
  width:100%;
  max-width:1440px;
  margin-inline:auto;
  padding:8px var(--gutter) 48px;
}

/* ---------- Intro ---------- */
.agenda-intro{
  grid-area:intro;
  display:flex;
  flex-direction:column;
  gap:28px;
  min-width:0;
  container-type:inline-size;
}
/* 112 px a 1440 como el artboard (el token --fs-display-xl usa 7.3vw → 105 px). Con la columna
   angosta (1200–1399) se achica para que "una charla" no se parta en dos renglones. */
.agenda-titulo{
  font-size:clamp(52px, 7.78vw, 112px);
  font-size:min(clamp(52px, 7.78vw, 112px), 21.5cqi);
  line-height:.9;
  letter-spacing:-0.05em;
}
.agenda-lead{
  max-width:460px;
  font-size:18px;
  line-height:1.55;
  color:var(--muted);
}
.agenda-pista{
  align-self:flex-start;
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-size:17px;
  font-weight:500;
}

/* ---------- Panel derecho (calendario o confirmación) ---------- */
.agenda-panel{
  grid-area:panel;
  align-self:center;
  min-width:0;
  background:var(--surface);
}

/* ---------- Calendario ---------- */
.agenda-cal{
  display:flex;
  flex-direction:column;
  gap:22px;
  padding:40px;
}
.agenda-cal-estado{ min-height:320px; justify-content:center; }
.agenda-cal-estado .error-caja{ background:var(--surface-2); }

.agenda-cal-cabeza{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
}
.agenda-cal-mes{
  margin:0;
  font-size:26px;
  font-weight:400;
  line-height:1.2;
  letter-spacing:-0.02em;
}
.agenda-cal-nav{ display:flex; gap:8px; }
.agenda-cal-flecha{
  display:flex;
  align-items:center;
  justify-content:center;
  width:40px;
  height:40px;
  padding:0;
  border:1px solid var(--line-input);
  background:var(--surface);
  color:var(--ink);
  transition:border-color .15s ease;
}
.agenda-cal-flecha:hover:not(:disabled){ border-color:var(--ink); }
.agenda-cal-flecha:disabled{
  border-color:var(--line-soft);
  color:var(--disabled);
  cursor:default;
}

.agenda-cal-semana{
  display:grid;
  grid-template-columns:repeat(7, minmax(0, 1fr));
  gap:6px;
  font-size:13px;
  line-height:1.3;
  color:var(--muted);
  text-align:center;
}

.agenda-cal-dias{
  display:grid;
  grid-template-columns:repeat(7, minmax(0, 1fr));
  gap:6px;
}
.agenda-dia,
.agenda-dia-vacio{ height:50px; }
.agenda-dia{
  min-width:0;
  padding:0;
  border:1px solid var(--line-input);
  background:var(--surface);
  color:var(--ink);
  font:inherit;
  font-size:16px;
  line-height:1;
  cursor:pointer;
  transition:background-color .15s ease, border-color .15s ease, color .15s ease;
}
.agenda-dia:hover:not(:disabled){ border-color:var(--ink); }
.agenda-dia[aria-pressed="true"],
.agenda-dia[aria-pressed="true"]:hover{
  background:var(--accent);
  border-color:var(--accent);
  color:#FFFFFF;
}
/* Pasados, fuera de la ventana, no hábiles o bloqueados (disabled real) */
.agenda-dia:disabled{
  background:transparent;
  border-color:transparent;
  color:var(--disabled);
  cursor:default;
}
/* Hábil pero sin horarios libres */
.agenda-dia-completo{
  text-decoration:line-through;
  text-decoration-thickness:1px;
}
/* Mientras llegan los ocupados del mes: los hábiles se ven, pero todavía no se pueden tocar */
.agenda-dia[data-estado="cargando"]{
  background:var(--surface);
  border-color:var(--line-input);
  color:var(--ink);
  opacity:.45;
  cursor:progress;
}
/* Si los ocupados no se pudieron cargar, los días quedan apagados hasta reintentar */
.agenda-cal-dias-error .agenda-dia[data-estado="cargando"]{ opacity:.35; cursor:default; }

/* ---------- Horarios del día ---------- */
.agenda-horarios{
  display:flex;
  flex-direction:column;
  gap:12px;
  padding-top:18px;
  border-top:1px solid var(--line);
}
.agenda-horarios-cabeza{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:16px;
}
.agenda-horarios-dia{ font-size:15px; font-weight:500; }
.agenda-horarios-zona{ font-size:13px; color:var(--muted); text-align:right; }

.agenda-slots{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:8px;
}
.agenda-slot{
  height:48px;
  min-width:0;
  padding:0;
  border:1px solid var(--line-input);
  background:var(--surface);
  color:var(--ink);
  font:inherit;
  font-size:16px;
  line-height:1;
  cursor:pointer;
  transition:background-color .15s ease, border-color .15s ease, color .15s ease;
}
.agenda-slot:hover:not(:disabled){ border-color:var(--ink); }
.agenda-slot[aria-pressed="true"],
.agenda-slot[aria-pressed="true"]:hover{
  background:var(--accent);
  border-color:var(--accent);
  color:#FFFFFF;
}
.agenda-slot:disabled{
  border-color:var(--line-soft);
  color:var(--disabled);
  cursor:default;
}

.agenda-aviso{
  margin:0;
  padding:12px 16px;
  border-left:4px solid var(--danger);
  background:var(--surface-2);
  font-size:15px;
  font-weight:500;
  line-height:1.45;
  color:var(--ink);
}
.agenda-aviso:focus{ outline:none; }
.agenda-aviso:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.agenda-error-horarios{ padding:16px 18px; background:var(--surface-2); }

/* ---------- Formulario (aparece al elegir horario) ---------- */
.agenda-form{
  --in-desde:12px;
  grid-area:form;
  display:flex;
  flex-direction:column;
  gap:16px;
  max-width:460px;
  min-width:0;
  margin-top:28px;
  animation:flotsIn .4s ease-out 1;
}
.agenda-form-resumen{
  margin:0;
  font-size:17px;
  font-weight:600;
  line-height:1.35;
}
.agenda-form-grilla{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:12px;
}
.agenda-form .campo-control{ height:52px; }
.agenda-form textarea.campo-control{ height:auto; min-height:76px; }
.agenda-form-error{
  margin:0;
  font-size:15px;
  font-weight:500;
  line-height:1.45;
  color:var(--danger);
}
.agenda-form-boton.btn{ height:56px; padding:0 24px; }

/* ---------- Confirmación (reemplaza al calendario) ---------- */
.agenda-listo{
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:20px;
  padding:48px;
  animation:flotsIn .4s ease-out 1;
}
.agenda-listo-titulo{
  margin:0;
  font-size:56px;
  font-weight:300;
  line-height:1;
  letter-spacing:-0.04em;
}
.agenda-listo-titulo:focus{ outline:none; }
.agenda-listo-cuando{ margin:0; font-size:20px; line-height:1.5; }
.agenda-listo-link{
  display:flex;
  flex-direction:column;
  gap:4px;
  margin:0;
  font-size:16px;
  line-height:1.45;
}
.agenda-listo-link-etiqueta{ font-size:14px; color:var(--muted); }
.agenda-listo-link a{ font-weight:500; overflow-wrap:anywhere; }
.agenda-listo-agregar{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
}
.agenda-listo-nota{
  margin:0;
  font-size:16px;
  line-height:1.55;
  color:var(--muted);
}
.agenda-listo-cta.btn{ align-self:flex-start; height:52px; padding:0 28px; }
.agenda-listo-cambiar{
  margin:0;
  font-size:15px;
  line-height:1.5;
  color:var(--muted);
}
.agenda-listo-cambiar a{
  color:var(--muted);
  text-decoration:underline;
  text-underline-offset:2px;
}
.agenda-listo-cambiar a:hover{ color:var(--ink); }

/* Desktop angosto: la columna izquierda queda en ~300 px → nombre y mail uno debajo del otro */
@media (min-width: 1200px) and (max-width: 1279px){
  .agenda-form-grilla{ grid-template-columns:minmax(0, 1fr); }
}

/* ---------- Tablet (768–1199): se apila todo ---------- */
@media (max-width: 1199px){
  .agenda-main{
    display:flex;
    flex-direction:column;
    gap:40px;
    padding-top:8px;
    padding-bottom:64px;
  }
  .agenda-pista{ display:none; }
  .agenda-panel{ align-self:stretch; width:100%; max-width:720px; }
  .agenda-form{ max-width:720px; margin-top:0; }
}

/* ---------- Celular (MAgenda) ---------- */
@media (max-width: 767px){
  .agenda-main{
    gap:22px;
    padding:8px 20px 48px;
  }
  .agenda-intro{ gap:10px; }
  .agenda-titulo{ line-height:.92; }
  .agenda-lead{ max-width:none; font-size:16px; line-height:1.5; }

  .agenda-panel{ max-width:none; }
  .agenda-cal{ gap:16px; padding:20px 16px; }
  .agenda-cal-estado{ min-height:240px; }
  .agenda-cal-cabeza{ gap:12px; }
  .agenda-cal-mes{ font-size:22px; letter-spacing:0; }
  .agenda-cal-nav{ gap:6px; }
  .agenda-cal-flecha{ width:36px; height:36px; }
  .agenda-cal-flecha .icono{ width:16px; height:16px; }
  .agenda-cal-semana{ gap:4px; font-size:12px; }
  .agenda-cal-dias{ gap:4px; }
  .agenda-dia,
  .agenda-dia-vacio{ height:42px; }

  .agenda-horarios{ gap:10px; padding-top:14px; }
  .agenda-horarios-dia{ font-size:14px; }
  .agenda-horarios-zona{ font-size:12px; text-align:left; }
  .agenda-slots{ gap:6px; }
  .agenda-slot{ height:44px; font-size:15px; }
  .agenda-aviso{ font-size:14px; padding:10px 14px; }

  .agenda-form{ --in-desde:16px; gap:14px; max-width:none; }
  .agenda-form-resumen{ font-size:16px; }
  .agenda-form-grilla{ grid-template-columns:minmax(0, 1fr); gap:14px; }
  .agenda-form .campo-control{ height:50px; }
  .agenda-form textarea.campo-control{ height:auto; min-height:76px; }
  .agenda-form-boton.btn{ height:54px; }

  .agenda-listo{ gap:16px; padding:28px 20px; }
  .agenda-listo-titulo{ font-size:44px; }
  .agenda-listo-cuando{ font-size:17px; }
  .agenda-listo-nota{ font-size:15px; }
  .agenda-listo-agregar .btn{ flex:1 1 100%; }
  .agenda-listo-cta.btn{ align-self:stretch; width:100%; height:52px; }
  .agenda-listo-cambiar{ font-size:14px; }
}

/* ---------- Movimiento reducido ---------- */
@media (prefers-reduced-motion: reduce){
  .agenda-form,
  .agenda-listo{ animation:none; }
  .agenda-dia,
  .agenda-slot,
  .agenda-cal-flecha{ transition:none; }
}