/* CSS propio de agenda-demo.html (sitio «origen»). Lo edita solo quien porta esa página: docs/sitio-2026/09-origen.md, «Receta para portar una página». */
/* Portado del prototipo v3 (red-de-metro-v3/css/agenda-demo.css). Carga después de metro.css y
   paginas.css y no redefine sus componentes: el formulario por pasos (paginas.css §6), el modal
   (§10) y el panel navy de las etapas (§11) se usan como están; aquí va la composición, la tarjeta
   del formulario, el avance relleno del indicador, los enunciados de cada paso y lo que pide el
   envío real de sta (intl-tel-input, Turnstile y los avisos de crm-leads.js).
   Movimiento: solo var(--ease); solo transform y opacity. Movimiento reducido: estado final. */

/* ---------- Composición: formulario a 7 de 12, etapas a la derecha (abajo en celular) ---------- */
.agenda { padding-block: clamp(28px, 3.4vw, 52px) var(--esp-seccion); }
.agenda__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; }
.agenda__cabeza { min-width: 0; }
.agenda__titulo { font-size: clamp(2.2rem, 1.3rem + 2.3vw, 3.7rem); max-width: none; }
.agenda__bajada { margin-top: 16px; max-width: 42rem; }

@media (min-width: 1000px) {
  .agenda__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--g); row-gap: 32px; align-items: start; }
  .agenda__cabeza { grid-column: 1 / span 7; grid-row: 1; }
  .agenda__form { grid-column: 1 / span 7; grid-row: 2; }
  .agenda__lado { grid-column: 8 / -1; grid-row: 1 / span 2; position: sticky; top: calc(var(--cab) + 32px); padding-left: clamp(0px, 2vw, 32px); }
}
@media (min-width: 1200px) {
  .agenda__lado { grid-column: 9 / -1; padding-left: 0; }
}

/* ---------- La tarjeta del formulario ---------- */
/* Superficie con borde: a lo más la sombra corta (DESIGN, «Borde o altura») */
.agenda__form {
  gap: 28px; padding: clamp(22px, 2.6vw, 40px);
  border: 1px solid var(--borde); border-radius: 16px;
  background: var(--superficie); box-shadow: var(--sombra);
}
.agenda__avance { display: grid; gap: 14px; padding-bottom: 24px; border-bottom: 1px solid var(--borde); }
.agenda .pasos-form__avance { color: var(--tinta-2); }

/* El trazo del indicador se rellena hasta la estación actual (form[data-paso-actual] lo pone paginas.js) */
.agenda .pasos-form__indicador::after {
  content: ""; position: absolute; top: 9px; left: 11px; right: 11px; height: 6px; border-radius: 3px;
  background: var(--l, var(--tinta)); transform-origin: left center; transform: scaleX(0);
  transition: transform 0.6s var(--ease);
}
.agenda .pasos-form__indicador li::before { z-index: 1; }
.agenda form[data-paso-actual="2"] .pasos-form__indicador::after { transform: scaleX(0.5); }
.agenda form[data-paso-actual="3"] .pasos-form__indicador::after { transform: scaleX(1); }

/* Enunciado de cada paso: la leyenda del paso 1 y la primera pregunta de los pasos 2 y 3 hablan con la
   misma voz (la de la leyenda de paginas.css §6) */
.agenda .opciones > legend.agenda__pregunta,
.agenda .campo > label.agenda__pregunta {
  margin-bottom: 4px; font: 700 clamp(1.3rem, 1.1rem + 0.6vw, 1.62rem)/1.25 var(--f-display);
  font-stretch: 104%; letter-spacing: -0.012em; color: var(--tinta);
}
.agenda .opciones + .opciones { margin-top: 14px; }
.agenda__aclara, .campo__opcional { font: 500 0.95rem/1.4 var(--f-texto); letter-spacing: 0; color: var(--tinta-3); white-space: nowrap; }
.agenda__aclara { display: block; margin-top: 4px; }
[data-paso-titulo]:focus { outline: none; }
[data-paso-titulo]:focus-visible { outline: 3px solid var(--foco); outline-offset: 4px; border-radius: 6px; }

/* Opciones de recursos: dos columnas desde 720 px (textos cortos) */
@media (min-width: 720px) {
  .opciones--dos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .opciones--dos > legend, .opciones--dos > .campo__error { grid-column: 1 / -1; }
}
.opcion { min-height: 56px; }

/* Volúmenes: aparecen al marcar el recurso, uno bajo otro (las etiquetas y los textos de las
   opciones de staging son largos y no caben a media columna) */
.agenda__volumenes { display: grid; gap: 22px; }
.agenda__volumenes:not(:has(.campo:not([hidden]))) { display: none; }
.movimiento-listo .agenda__condicional:not([hidden]) { animation: agenda-aparece 0.45s var(--ease) both; }
@keyframes agenda-aparece { from { opacity: 0; transform: translateY(-6px); } }

/* Consentimiento: casilla de 22 px dentro de un blanco de toque de 44 px */
.agenda__consentimiento .casilla { padding: 14px 16px; border: 1.5px solid var(--borde-fuerte); border-radius: 12px; background: var(--superficie); }
.agenda__consentimiento .casilla:hover { border-color: var(--tinta-3); }
.agenda__consentimiento .casilla:has(input:checked) { border-color: var(--tinta); background: var(--superficie-2); }
.agenda__consentimiento .casilla:has(input[aria-invalid="true"]) { border-color: var(--error); }
.agenda__consentimiento .casilla a { color: var(--tinta); font-weight: 600; }

/* Acciones: «Volver» primero y la principal después, en el DOM y en pantalla (a la izquierda en
   escritorio, arriba en celular), para que Tab siga el sentido del recorrido (revisión final, 11-oct) */
.agenda .pasos-form__acciones { padding-top: 10px; }
.agenda__volver .icono { transform: rotate(180deg); }
.agenda__volver:hover .icono { transform: rotate(180deg) translateX(4px); }
/* Mientras crm-leads.js envía, el botón queda deshabilitado con «Enviando...» */
.agenda .boton:disabled { opacity: 0.72; cursor: progress; transform: none; box-shadow: none; }

/* ---------- Envío real de sta ---------- */
/* intl-tel-input envuelve el teléfono en .iti (inline-block por defecto) y pone la bandera dentro
   del campo; el padding izquierdo lo calcula la librería */
.agenda .iti { display: block; width: 100%; }
.agenda .iti__selected-country { border-radius: 10px 0 0 10px; }
.agenda .iti__selected-country-primary:focus-visible { outline: 3px solid var(--foco); outline-offset: -3px; border-radius: 10px 0 0 10px; }
.iti__dropdown-content { border: 1px solid var(--borde-fuerte); border-radius: 10px; background: var(--superficie); color: var(--tinta); box-shadow: var(--sombra-alta); }
.iti__search-input { background: var(--superficie); color: var(--tinta); }
.iti__country.iti__highlight { background: var(--superficie-2); }
.iti__dial-code { color: var(--tinta-3); }
html[data-theme="dark"] .iti { --iti-arrow-color: #c9cee6; --iti-hover-color: rgba(255, 255, 255, 0.08); }

/* Turnstile (widget de 300 × 65) y su aviso */
.agenda__turnstile { display: grid; gap: 8px; min-height: 65px; }
.agenda__turnstile:not(:has(iframe)):not(:has(p:not(.hidden))) { min-height: 0; }
/* crm-leads.js muestra y oculta con la clase «hidden» (de Tailwind, que esta página no carga) */
.agenda .hidden { display: none !important; }

/* Los avisos de crm-leads.js: reemplaza la clase del <p> por las de Tailwind según el tono */
.agenda [data-crm-status], .agenda [data-crm-turnstile-status] { font: 600 0.92rem/1.45 var(--f-texto); color: var(--tinta-2); }
.agenda [data-crm-status] { padding: 12px 14px; border: 1px solid var(--borde-fuerte); border-radius: 10px; background: var(--superficie-2); }
/* Vacío no ocupa lugar, pero sigue en el árbol de accesibilidad: es una región viva (role="status")
   y con display:none el primer aviso podría no anunciarse */
.agenda [data-crm-status]:empty { position: absolute; width: 1px; height: 1px; padding: 0; border: 0; overflow: hidden; clip-path: inset(50%); }
.agenda [data-crm-status].text-red-600 { border-color: var(--error); color: var(--error); }
.agenda [data-crm-status].text-orange-600, .agenda [data-crm-turnstile-status].text-orange-600 { color: var(--tinta); }
.agenda [data-crm-turnstile-status].text-red-600 { color: var(--error); }

/* ---------- Celular y tableta ---------- */
@media (max-width: 999px) {
  .agenda__lado { margin-top: 12px; }
}
@media (max-width: 719px) {
  .agenda { padding-top: 24px; }
  .agenda__form { padding: 22px 18px 24px; border-radius: 14px; gap: 26px; }
  .agenda__avance { padding-bottom: 22px; }
  .agenda .pasos-form__indicador li { font-size: 0.8rem; }
  .agenda .pasos-form__acciones { flex-direction: column; align-items: stretch; }
  .agenda .pasos-form__acciones .boton { width: 100%; }
  .opcion { padding: 14px; gap: 12px; }
  .agenda__aclara, .campo__opcional { white-space: normal; }
}

/* ---------- Ajustes de la página ---------- */
/* El trazo de la línea elegida, un paso más oscuro donde el de marca no llega a 3:1 sobre blanco */
.agenda[data-linea] .pasos-form__indicador { --l: var(--l-curva); }