/* ============================================================================
   Recomendly - estilos de la página del informe (lee el JSON del contrato).
   ============================================================================ */

.report-main { padding-block: var(--space-2xl) var(--space-4xl); }

/* Aviso de muestra */
.sample-banner {
  display: flex; align-items: center; gap: var(--space-md); flex-wrap: wrap;
  background: var(--accent-wash); border-radius: var(--radius-md);
  padding: var(--space-md) var(--space-lg); margin-bottom: var(--space-2xl);
  font-size: var(--text-sm); color: var(--ink);
}
.sample-banner .tag { background: var(--accent); color: var(--on-accent); border: 0; }

/* Encabezado del informe */
.report-top { display: grid; grid-template-columns: 1fr auto; gap: var(--space-xl); align-items: end; padding-bottom: var(--space-xl); border-bottom: 1px solid var(--border); }
.report-brand .kicker { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--ink-subtle); text-transform: uppercase; letter-spacing: var(--tracking-label); }
.report-brand h1 { font-size: var(--h2); margin-top: var(--space-xs); }
.report-brand .meta { margin-top: var(--space-sm); display: flex; flex-wrap: wrap; gap: 0.4rem 0.9rem; color: var(--ink-muted); font-size: var(--text-sm); }
.report-brand .meta span { display: inline-flex; align-items: center; gap: 0.4rem; }
.report-brand .meta a { color: var(--link); }

.score-hero { text-align: right; }
.score-hero .score-num { font-family: var(--font-mono); font-size: clamp(3.5rem, 2.6rem + 4vw, 5.5rem); font-weight: var(--weight-medium); line-height: 0.9; letter-spacing: -0.04em; color: var(--ink); }
.score-hero .score-den { color: var(--ink-subtle); font-size: var(--text-lg); font-family: var(--font-mono); }
.score-hero .score-label { margin-top: var(--space-xs); font-size: var(--text-sm); color: var(--ink-muted); }
@media (max-width: 680px) { .report-top { grid-template-columns: 1fr; } .score-hero { text-align: left; } }

/* Contexto del puntaje (interpretación honesta, no datos de sector inventados) */
.score-context { margin-top: var(--space-xl); }
.score-context .score-ctx-mention { font-size: var(--text-base); color: var(--ink); font-weight: var(--weight-medium); }
.band { margin-top: var(--space-md); display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.4rem; }
.band-cell {
  display: flex; align-items: center; gap: 0.45rem;
  padding: 0.5rem 0.7rem; border-radius: var(--radius-sm);
  background: var(--surface); border: 1px solid var(--border);
  font-size: var(--text-xs); color: var(--ink-subtle);
}
.band-cell .band-dot { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--border-strong); flex: none; }
.band-cell.is-on { background: var(--accent-wash); border-color: color-mix(in oklab, var(--accent) 45%, transparent); color: var(--ink); font-weight: var(--weight-semibold); }
.band-cell.is-on .band-dot { background: var(--accent); }
.band-note { margin-top: var(--space-sm); font-size: var(--text-xs); color: var(--ink-muted); line-height: var(--lh-relaxed); max-width: 52rem; }
@media (max-width: 560px) { .band { grid-template-columns: 1fr 1fr; } }

/* "Dónde te dejan fuera" */
.out-list { margin-top: var(--space-lg); display: grid; gap: var(--space-sm); }
.out-row { display: grid; grid-template-columns: 1fr auto; gap: var(--space-md); align-items: center; padding: 0.75rem 0; border-bottom: 1px solid var(--border); }
.out-row:last-child { border-bottom: 0; }
.out-q { display: flex; align-items: center; gap: 0.5rem; font-size: var(--text-sm); color: var(--ink); }
.out-q .dot { width: 0.45rem; height: 0.45rem; border-radius: 50%; flex: none; }
.out-won { display: inline-flex; align-items: center; gap: 0.45rem; white-space: nowrap; }
.out-won .lbl { font-size: var(--text-xs); color: var(--ink-subtle); }
.out-won .chip { font-size: var(--text-xs); padding: 0.2rem 0.55rem; border-radius: var(--radius-pill); background: var(--surface-2); color: var(--ink-muted); border: 1px solid var(--border); }
.out-all { margin-top: var(--space-md); color: var(--ink-muted); font-size: var(--text-base); }
@media (max-width: 560px) { .out-row { grid-template-columns: 1fr; gap: 0.4rem; } }

/* Secciones del informe */
.report-section { padding-top: var(--space-2xl); }
.report-section > h2 { font-size: var(--text-xl); font-weight: var(--weight-bold); letter-spacing: 0; }
.report-section > .sec-sub { color: var(--ink-muted); font-size: var(--text-sm); margin-top: 0.3rem; }

/* Dimensiones del puntaje */
.dims { margin-top: var(--space-lg); display: grid; gap: var(--space-md); }
.dim { display: grid; grid-template-columns: 9rem 1fr 4rem; gap: var(--space-md); align-items: center; }
.dim .dim-name { font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--ink); }
.dim .dim-name small { display: block; color: var(--ink-subtle); font-weight: var(--weight-body); font-size: var(--text-xs); }
.dim .dim-track { height: 0.75rem; background: var(--data-track); border-radius: var(--radius-pill); overflow: hidden; }
.dim .dim-fill { height: 100%; width: var(--w, 0); background: var(--accent); border-radius: var(--radius-pill); transition: width 900ms var(--ease-out); }
.js .dim .dim-fill { width: 0; }
.js .dims.is-in .dim-fill { width: var(--w, 0); }
.dim .dim-val { font-family: var(--font-mono); font-size: var(--text-sm); text-align: right; color: var(--ink); font-variant-numeric: tabular-nums; }
.dim .dim-val small { color: var(--ink-subtle); }
@media (max-width: 560px) { .dim { grid-template-columns: 7rem 1fr 3.4rem; } }

/* Motores (fichas) */
.engines { margin-top: var(--space-lg); display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-md); }
.engine {
  padding: var(--space-lg); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md);
}
.engine .eng-name { display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--font-mono); font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--ink); }
.engine .eng-name .dot { width: 0.5rem; height: 0.5rem; border-radius: 50%; }
.engine .eng-big { margin-top: var(--space-md); font-family: var(--font-mono); font-size: 1.9rem; color: var(--ink); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.engine .eng-big span { font-size: var(--text-sm); color: var(--ink-subtle); }
.engine .eng-sub { margin-top: 0.2rem; font-size: var(--text-xs); color: var(--ink-muted); }
@media (max-width: 640px) { .engines { grid-template-columns: 1fr; } }

/* Preguntas */
.questions { margin-top: var(--space-lg); display: grid; gap: var(--space-md); }
.q {
  padding: var(--space-lg); border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface);
}
.q .q-top { display: flex; align-items: center; gap: var(--space-sm); flex-wrap: wrap; margin-bottom: var(--space-sm); }
.q .q-engine { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--ink-muted); display: inline-flex; align-items: center; gap: 0.4rem; }
.q .q-engine .dot { width: 0.45rem; height: 0.45rem; border-radius: 50%; }
.q .q-state { margin-left: auto; font-size: var(--text-xs); font-weight: var(--weight-semibold); padding: 0.2rem 0.6rem; border-radius: var(--radius-pill); display: inline-flex; align-items: center; gap: 0.35rem; }
.q .q-state[data-m='true'] { background: var(--accent-wash); color: var(--ink); }
.q .q-state[data-m='false'] { background: var(--surface-2); color: var(--ink-muted); }
.q .q-text { font-weight: var(--weight-semibold); color: var(--ink); font-size: var(--text-base); }
.q .q-extract { margin-top: var(--space-sm); color: var(--ink-muted); font-size: var(--text-sm); line-height: var(--lh-relaxed); border-left: 0; padding-left: 0; }
.q .q-rec { margin-top: var(--space-md); display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; }
.q .q-rec .lbl { font-size: var(--text-xs); color: var(--ink-subtle); margin-right: 0.2rem; }
.q .q-rec .chip { font-size: var(--text-xs); padding: 0.2rem 0.55rem; border-radius: var(--radius-pill); background: var(--surface-2); color: var(--ink-muted); border: 1px solid var(--border); }
.q .q-rec .chip[data-you='true'] { background: var(--accent-wash); color: var(--ink); font-weight: var(--weight-semibold); border-color: transparent; }
.q .q-rec .chip .pos { font-family: var(--font-mono); color: var(--ink-subtle); }

/* Competidores y fuentes en dos columnas */
.two-col { margin-top: var(--space-lg); display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 4vw, 3rem); }
@media (max-width: 760px) { .two-col { grid-template-columns: 1fr; } }

.rivals { display: grid; gap: var(--space-sm); }
.rival { display: grid; grid-template-columns: 1fr auto; gap: var(--space-sm); align-items: center; padding: 0.7rem 0; border-bottom: 1px solid var(--border); }
.rival:last-child { border-bottom: 0; }
.rival .r-name { font-weight: var(--weight-medium); color: var(--ink); font-size: var(--text-sm); display: inline-flex; align-items: center; gap: 0.5rem; }
.rival[data-you='true'] .r-name::after { content: attr(data-youlabel); font-size: var(--text-xs); color: var(--on-accent); background: var(--accent); padding: 0.1rem 0.5rem; border-radius: var(--radius-pill); font-weight: var(--weight-semibold); }
.rival .r-tag { font-size: var(--text-xs); color: var(--ink-subtle); }
.rival .r-count { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--ink); font-variant-numeric: tabular-nums; }

.sources { display: grid; gap: var(--space-sm); }
.source { display: grid; grid-template-columns: 1fr auto; gap: var(--space-sm); align-items: baseline; padding: 0.7rem 0; border-bottom: 1px solid var(--border); }
.source:last-child { border-bottom: 0; }
.source .s-dom { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--ink); }
.source .s-dom a { color: var(--ink); text-decoration: none; }
.source .s-dom a:hover { color: var(--link); text-decoration: underline; }
.source .s-ex { display: block; font-family: var(--font-sans); font-size: var(--text-xs); color: var(--ink-subtle); margin-top: 0.15rem; word-break: break-all; }
.source .s-count { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--ink-muted); white-space: nowrap; }

/* Acciones */
.actions { margin-top: var(--space-lg); display: grid; gap: var(--space-md); }
.action { display: grid; grid-template-columns: auto 1fr; gap: var(--space-lg); padding: var(--space-lg); border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); }
.action .a-pri { display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: var(--radius-pill); background: var(--accent); color: var(--on-accent); font-family: var(--font-mono); font-weight: var(--weight-semibold); font-size: var(--text-base); align-self: start; }
.action h3 { font-size: var(--text-lg); font-weight: var(--weight-bold); }
.action p { margin-top: var(--space-xs); color: var(--ink-muted); font-size: var(--text-sm); line-height: var(--lh-relaxed); }

/* CTA al pie del informe */
.report-cta { margin-top: var(--space-3xl); padding: clamp(1.5rem, 3vw, 2.25rem); border-radius: var(--radius-lg); background: var(--surface); border: 1px solid var(--border); display: grid; grid-template-columns: 1fr auto; gap: var(--space-lg); align-items: center; }
.report-cta h2 { font-size: var(--text-xl); letter-spacing: 0; }
.report-cta p { color: var(--ink-muted); margin-top: 0.3rem; font-size: var(--text-sm); }
@media (max-width: 620px) { .report-cta { grid-template-columns: 1fr; } }

/* Estado de carga / error */
.report-status { padding: var(--space-4xl) 0; text-align: center; color: var(--ink-muted); }
.report-status .spinner { width: 2rem; height: 2rem; margin: 0 auto var(--space-md); border: 3px solid var(--border); border-top-color: var(--accent); border-radius: 50%; }
@media (prefers-reduced-motion: no-preference) { .report-status .spinner { animation: spin 700ms linear infinite; } }
@keyframes spin { to { transform: rotate(360deg); } }