/* ============================================================
   Agenda pública del Diagnóstico 7 (/diagnostico-7). Usa calculators.css y mega.css
   (barra de progreso, navegación de pasos y opciones).
   ============================================================ */
@layer templates {
  .agenda-hero { display: grid; gap: var(--s-xl); align-items: start; }
  @media (min-width: 1024px) { .agenda-hero { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); } }
  .quote-inline { margin: var(--s-lg) 0 0; padding-left: var(--s-md); border-left: 3px solid var(--c-red-line); font-family: var(--f-serif); font-style: italic; font-size: 1.15rem; color: var(--c-ink); }
  .agenda-points { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-md); }
  .agenda-points li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s-md); padding: var(--s-md) var(--s-lg); border: 1px solid var(--c-line); background: var(--c-surface-1); }
  .agenda-points span { font-family: var(--f-mono); color: var(--c-red-line); font-size: var(--fs-meta); }
  .agenda-points p { margin: 0.3rem 0 0; color: var(--c-ink-2); font-size: var(--fs-small); }

  .agenda-form { display: grid; gap: var(--s-md); }
  .agenda-step { border: 1px solid var(--c-line); background: var(--c-surface-1); padding: var(--s-lg); margin: 0; display: grid; gap: var(--s-md); }
  .agenda-step legend { padding: 0 0.4rem; font-family: var(--f-display); font-stretch: var(--display-stretch); font-weight: 800; font-size: var(--fs-h4); }
  .agenda-form.is-stepped .agenda-step[hidden] { display: none; }
  .no-js .agenda-step .mega-step__nav { display: none; }
  .no-js .agenda-step:last-of-type .mega-step__nav { display: flex; }
  .no-js .agenda-step .mega-step__nav [data-prev] { display: none; }
  .mega-options--row { grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); }

  .slot-days { display: grid; gap: var(--s-sm); margin-top: var(--s-sm); }
  .slot-day { border: 1px solid var(--c-line-strong); background: var(--c-bg); }
  .slot-day summary { cursor: pointer; padding: 0.75rem 0.9rem; display: flex; gap: 0.5rem; align-items: baseline; flex-wrap: wrap; }
  .slot-day__name { font-weight: 700; }
  .slot-day__count { margin-left: auto; font-family: var(--f-mono); font-size: var(--fs-meta); color: var(--c-gray); }
  .slot-day[open] summary { border-bottom: 1px solid var(--c-line); }
  .slot-times { display: grid; gap: 0.4rem; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); padding: var(--s-sm) 0.9rem var(--s-md); }
  .slot { display: flex; align-items: center; justify-content: center; gap: 0.4rem; min-height: 44px; border: 1px solid var(--c-line-strong); cursor: pointer; font-family: var(--f-mono); font-size: var(--fs-small); }
  .slot input { position: absolute; opacity: 0; width: 1px; height: 1px; }
  .slot:hover { border-color: var(--c-gray); }
  .slot:has(input:checked) { background: var(--c-red); border-color: var(--c-red); color: #f4f1ec; }
  .slot:has(input:focus-visible) { outline: 2px solid var(--c-focus); outline-offset: 2px; }

  .agenda-ticket { margin-top: var(--s-xl); }
  .facts-public { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 0.5rem var(--s-lg); margin: var(--s-sm) 0 var(--s-md); }
  .facts-public dt { color: var(--c-gray); font-family: var(--f-mono); font-size: var(--fs-meta); text-transform: uppercase; letter-spacing: 0.06em; padding-top: 0.2rem; }
  .facts-public dd { margin: 0; font-weight: 600; }
}