/* ==========================================================================
   On the Shortlist with AI · app.css (produccion)
   Solo disposicion. Colores, tipografia y espaciado vienen de kit/tokens.css
   (var(--ots-*)). Hereda el bloque de layout del mockup B (28-09-2026) sin la
   navegacion DEMO, y anade agenda, codigo, prosa legal y aviso de cookies.
   ========================================================================== */
:root { --ots-ribbon-h: 0px; } /* sin cinta DEMO en produccion */
[hidden] { display: none !important; }

/* ---- portada ---- */
.b-hero { display: grid; gap: var(--ots-s6); grid-template-columns: minmax(0, 1fr); align-items: start; }
.b-ask { background: var(--ots-surface-2); border-radius: var(--ots-r-md); padding: var(--ots-s3) var(--ots-s4); font-weight: 600; }
.b-names { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--ots-s2); }
.b-names li { display: flex; align-items: center; gap: var(--ots-s2); padding: 10px 12px; border: 1px solid var(--ots-line); border-radius: var(--ots-r-md); background: var(--ots-surface); color: var(--ots-ink); font-size: var(--ots-fs-sm); }
.b-names li .ots-dot { color: var(--ots-on); }
.b-names li.is-you { border: 2px dashed var(--ots-line-strong); background: transparent; color: var(--ots-muted); font-weight: 600; }
.b-names li.is-you .ots-dot { color: var(--ots-line-strong); }

/* ---- confirmacion y medicion ---- */
.b-run { display: grid; gap: var(--ots-s4); grid-template-columns: minmax(0, 1fr); align-items: start; }

/* ---- textos largos (correos, dominios) no desbordan a 390 ---- */
.ots-alert, .ots-h1, .ots-h2, .ots-h3, #runTitle, .b-note, .ots-meta, .ots-lead, .b-text { overflow-wrap: anywhere; }

/* ---- resultado ---- */
.b-result__head { display: grid; gap: var(--ots-s2); }
.b-exits { border-top: 1px solid var(--ots-line); padding-top: var(--ots-s7); }
.b-exits__head { max-width: 62ch; }
.b-permalink { display: grid; gap: var(--ots-s3); }
.b-permalink .ots-row { flex-wrap: wrap; min-width: 0; }
.b-permalink code, .b-permalink .ots-mono { overflow-wrap: anywhere; word-break: break-all; max-width: 100%; }
.b-note { font-size: var(--ots-fs-sm); color: var(--ots-ink-2); }
/* Longitud de linea: unos 90 caracteres como mucho en el informe y los textos largos. */
.ots-method > p, .ots-method > details, [data-view="result"] .ots-alert, .b-result__head p, .b-text { max-width: 90ch; }
.b-compare { display: grid; gap: var(--ots-s3); grid-template-columns: minmax(0, 1fr); }
.b-compare__num { font-size: var(--ots-fs-3xl); font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.b-compare__num small { font-size: .45em; color: var(--ots-muted); font-weight: 600; }
.b-compare .is-after .b-compare__num { color: var(--ots-on); }
.b-compare .is-before .b-compare__num { color: var(--ots-off); }

/* ---- agenda (iframe de la agenda de Cupperlab + boton + QR) ---- */
.ots-agenda-frame { width: 100%; min-height: 620px; border: 1px solid var(--ots-line); border-radius: var(--ots-r-md); background: var(--ots-surface); }
.ots-agenda-alt { display: flex; flex-wrap: wrap; gap: var(--ots-s3); align-items: center; }
.ots-agenda-alt img { width: 112px; height: 112px; border: 1px solid var(--ots-line); border-radius: var(--ots-r-md); background: #fff; }

#thanks, #kickoffRoot, #panelRoot, #pageRoot { overflow-wrap: anywhere; min-width: 0; }

/* ---- panel DIY ---- */
.b-plan { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--ots-s2); }
.b-plan li { border: 1px solid var(--ots-line); border-radius: var(--ots-r-md); padding: var(--ots-s3) var(--ots-s4); background: var(--ots-surface); }
.b-plan li.is-done { background: var(--ots-on-soft); border-color: transparent; }
.b-plan li.is-done .b-plan__title { text-decoration: line-through; color: var(--ots-ink-2); }
.b-plan .ots-check { color: var(--ots-ink); font-size: var(--ots-fs-md); }
.b-plan__meta { display: flex; flex-wrap: wrap; gap: var(--ots-s2); align-items: center; margin-top: 6px; padding-left: 32px; font-size: var(--ots-fs-sm); color: var(--ots-muted); }
.b-progress { height: 8px; border-radius: 4px; background: var(--ots-line); overflow: hidden; }
.b-progress > span { display: block; height: 100%; background: var(--ots-on); }
.b-copyrow { display: flex; justify-content: space-between; align-items: center; gap: var(--ots-s2); flex-wrap: wrap; }
.b-text { background: var(--ots-surface-2); border-radius: var(--ots-r-md); padding: var(--ots-s3) var(--ots-s4); font-size: var(--ots-fs-sm); color: var(--ots-ink); }
.b-big-date { font-size: var(--ots-fs-xl); font-weight: 700; }
.ots-code { margin: 0; padding: var(--ots-s3) var(--ots-s4); border: 1px solid var(--ots-line); border-radius: var(--ots-r-md); background: var(--ots-surface-2); font-family: var(--ots-mono); font-size: var(--ots-fs-xs); line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; max-height: 420px; overflow: auto; }

/* ---- paginas de texto (metodo, privacidad, condiciones) ---- */
.ots-prose { max-width: 72ch; }
.ots-prose h1 { font-size: var(--ots-fs-2xl); line-height: 1.2; margin: 0 0 var(--ots-s4); }
.ots-prose h2 { font-size: var(--ots-fs-xl); line-height: 1.25; margin: var(--ots-s6) 0 var(--ots-s3); }
.ots-prose h3 { font-size: var(--ots-fs-lg); margin: var(--ots-s5) 0 var(--ots-s2); }
.ots-prose p, .ots-prose li { font-size: var(--ots-fs-md); line-height: 1.6; color: var(--ots-ink); }
.ots-prose p + p { margin-top: var(--ots-s3); }
.ots-prose ul, .ots-prose ol { padding-left: 1.25em; margin: var(--ots-s3) 0; }
.ots-prose li + li { margin-top: 6px; }
.ots-prose table { border-collapse: collapse; width: 100%; font-size: var(--ots-fs-sm); margin: var(--ots-s3) 0; }
.ots-prose th, .ots-prose td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--ots-line); vertical-align: top; }
.ots-prose th { background: var(--ots-surface-2); }
.ots-prose .ots-pending { background: var(--ots-warn-soft); color: var(--ots-warn); padding: 0 4px; border-radius: 4px; }

/* ---- pie y aviso de cookies ---- */
.ots-footer__nav a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.ots-linkbtn { background: none; border: 0; padding: 0; margin: 0; font: inherit; color: inherit; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.ots-consent { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1100; padding: 0 var(--ots-s4) var(--ots-s4); pointer-events: none; }
.ots-consent__box { pointer-events: auto; max-width: 720px; margin: 0 auto; background: var(--ots-surface); border: 1px solid var(--ots-line); border-radius: var(--ots-r-md); box-shadow: 0 8px 32px rgba(0, 0, 0, .12); padding: var(--ots-s4); display: grid; gap: var(--ots-s2); }
.ots-consent__text { margin: 0; font-size: var(--ots-fs-sm); color: var(--ots-ink); }
.ots-consent__ca { margin: 0; font-size: var(--ots-fs-xs); color: var(--ots-muted); }
.ots-consent__actions { display: flex; flex-wrap: wrap; gap: var(--ots-s2); justify-content: flex-end; }
#ots-turnstile { position: fixed; bottom: 0; right: 0; width: 0; height: 0; overflow: hidden; }

/* ---- el kit pone .ots-section despues de .ots-container y borra el relleno lateral ---- */
.ots-container.ots-section { padding-left: var(--ots-s4); padding-right: var(--ots-s4); }

@media (min-width: 600px) {
  .b-compare { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 900px) {
  .ots-container.ots-section { padding-left: var(--ots-s6); padding-right: var(--ots-s6); }
  .b-hero { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); }
  .b-run { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); }
  .b-run__rail { order: -1; }
  .b-diygrid { display: grid; gap: var(--ots-s4); grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); align-items: start; }
  .b-diygrid > * + * { margin-top: 0; }
  .ots-consent { padding-bottom: var(--ots-s5); }
}
@media print {
  .ots-header, .ots-footer, .ots-consent, .b-exits, .ots-langswitch { display: none !important; }
}