/* Estilos del CUERPO de cada una de las 16 secciones del informe.
   section.body llega como HTML ya construido por
   js/test/engine/report-assembler.js (contenido sin tocar, con sus
   propias clases: translationGrid, deepList, cycle, breakCard...).
   Este archivo solo las re-viste con nuestra paleta y tipografía —
   todo queda deliberadamente ESCOPADO bajo .result-section__body
   para no filtrar estilos al resto de la app. */

.result-section__body{
  font-size: 0.86rem;
  line-height: 1.7;
  color: var(--parchment);
}

.result-section__body p{ margin: 8px 0 16px; }

.result-section__body > h3{
  margin: 30px 0 12px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.2rem;
  color: var(--parchment);
}

.result-section__body > h3:first-child{ margin-top: 0; }

.result-section__body blockquote{
  margin: 0 0 22px;
  padding: 6px 0 6px 20px;
  border-left: 3px solid var(--result-accent-border);
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.15rem;
  line-height: 1.5;
  color: var(--result-accent);
}

.result-section__body a{ color: var(--result-accent-mid); font-weight: 600; }

.answerLead{
  font-family: var(--font-display);
  font-size: 0.98rem;
  line-height: 1.65;
  max-width: 780px;
}

.answerLead p:first-child{ margin-top: 0; }

.plainNote,
.evidenceLine{
  background: rgba(237, 225, 201, 0.04);
  border-left: 3px solid rgba(198, 161, 91, 0.3);
  border-radius: 0 6px 6px 0;
  padding: 13px 16px;
  font-size: 0.76rem;
  line-height: 1.6;
  color: var(--parchment-dim);
}

.evidenceLine{ border-left-color: var(--result-accent-border); }

/* Aviso de hipótesis abierta (subtipo/firma con confianza baja): mismo
   lenguaje visual que plainNote pero con borde discontinuo, para leerse
   como "esto todavía está por confirmar" en vez de un dato cerrado. */
.hypothesisNote{
  background: rgba(237, 225, 201, 0.03);
  border-left: 3px dashed rgba(198, 161, 91, 0.4);
  border-radius: 0 6px 6px 0;
  padding: 13px 16px;
  font-size: 0.76rem;
  line-height: 1.6;
  color: var(--parchment-dim);
}

/* La paradoja central del perfil, dentro de la lectura integrada
   (sección 01) — un énfasis mayor que un párrafo normal. */
.portraitParadox{
  margin: 18px 0 0;
  padding: 14px 18px;
  background: rgba(198, 161, 91, 0.06);
  border-radius: 8px;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 0.92rem;
  color: var(--parchment);
}

.portraitParadox strong{ color: var(--result-accent); font-style: normal; }

/* Detalle de cálculo dentro de <details> (sección de confianza) */
.methodDetails{ padding: 2px 16px 14px; }
.methodDetails p{ font-size: 0.74rem; color: var(--parchment-dim); margin: 8px 0; }
.methodDetails strong{ color: var(--parchment); }

/* Grids de 2 columnas con tarjetas de traducción/concepto/impacto */
.translationGrid,
.conceptGrid,
.impactGrid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 18px 0;
}

.translationGrid article,
.conceptGrid article,
.impactGrid article,
.strengthGrid article,
.explainCard{
  border: 1px solid rgba(198, 161, 91, 0.16);
  border-radius: 8px;
  padding: 16px 18px;
  background: rgba(237, 225, 201, 0.03);
}

.translationGrid span,
.conceptGrid span,
.impactGrid span,
.cardLabel,
.breakCard > span,
.practiceCards article > span{
  display: block;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--parchment-dim);
  font-family: var(--font-utility);
  font-size: 0.6rem;
  margin-bottom: 6px;
}

.translationGrid b{
  display: block;
  font-family: var(--font-display);
  font-size: 1.1rem;
  color: var(--parchment);
}

.translationGrid p,
.conceptGrid p,
.impactGrid p{
  font-size: 0.78rem;
  line-height: 1.55;
  color: var(--parchment-dim);
  margin: 6px 0 0;
}

/* Términos tradicionales (details/summary) */
.result-section__body details{
  border: 1px solid rgba(198, 161, 91, 0.18);
  border-radius: 8px;
  margin: 18px 0;
}

.result-section__body summary{
  cursor: pointer;
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--parchment);
  padding: 13px 16px;
}

.termList{ padding: 0 16px 12px; margin: 0; }

.termList div{
  display: grid;
  grid-template-columns: 170px 1fr;
  gap: 14px;
  border-top: 1px solid rgba(198, 161, 91, 0.14);
  padding: 10px 0;
}

.termList dt{ font-family: var(--font-display); font-weight: 600; color: var(--parchment); margin: 0; }
.termList dd{ margin: 0; font-size: 0.78rem; color: var(--parchment-dim); }

/* Tarjetas explicativas (centros, flechas) */
.explainGrid{ display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.explainGrid .explainCard:last-child:nth-child(3){ grid-column: 1 / -1; }

.explainCard h3{ margin: 0 0 10px; font-family: var(--font-display); font-size: 1.05rem; color: var(--parchment); }
.explainCard p{ font-size: 0.78rem; line-height: 1.55; margin: 6px 0; color: var(--parchment-dim); }

.measure{
  border-top: 1px solid rgba(198, 161, 91, 0.14);
  padding-top: 10px;
  margin-top: 12px;
  font-size: 0.68rem;
  color: var(--parchment-dim);
}

.inlineMeter{
  display: inline-block;
  width: 84px;
  height: 6px;
  margin: 0 8px;
  vertical-align: middle;
  border-radius: 4px;
  overflow: hidden;
  background: rgba(237, 225, 201, 0.12);
}

.inlineMeter i{ display: block; height: 100%; background: var(--result-accent); }
.measure small{ font-size: 0.62rem; }

/* Fortalezas / puntos ciegos */
.strengthGrid{ display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.strengthGrid b{ font-family: var(--font-display); font-size: 1.05rem; text-transform: capitalize; color: var(--parchment); }
.strengthGrid p{ font-size: 0.78rem; color: var(--parchment-dim); line-height: 1.55; margin: 6px 0 0; }

.deepList{
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.deepList li{ border: 1px solid rgba(198, 161, 91, 0.16); border-radius: 8px; padding: 15px; background: rgba(237, 225, 201, 0.03); }
.deepList strong{ display: block; text-transform: capitalize; font-family: var(--font-display); font-size: 0.98rem; margin-bottom: 6px; color: var(--parchment); }
.deepList span{ font-size: 0.74rem; color: var(--parchment-dim); line-height: 1.5; }

/* Circuito de autoboicot */
.cycle{
  list-style: none;
  padding: 0;
  margin: 0 0 15px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.cycle li{ border: 1px solid rgba(198, 161, 91, 0.16); border-radius: 8px; padding: 15px; position: relative; background: rgba(237, 225, 201, 0.03); }
.cycle li span{ display: block; color: var(--result-accent-mid); text-transform: uppercase; letter-spacing: 0.1em; font-family: var(--font-utility); font-size: 0.6rem; }
.cycle li p{ font-size: 0.78rem; line-height: 1.55; margin: 7px 0 0; color: var(--parchment-dim); }

.breakCard{
  background: rgba(198, 161, 91, 0.1);
  border: 1px solid var(--result-accent-border);
  border-radius: 10px;
  padding: 18px 20px;
  margin-top: 4px;
}

.breakCard > span{ color: var(--result-accent-mid); }
.breakCard p{ margin: 7px 0; font-size: 0.82rem; color: var(--parchment); }
.breakCard strong{ color: var(--result-accent); }

/* Estado reciente por filas */
.stateRows{ margin: 18px 0; }

.stateRow{
  display: grid;
  grid-template-columns: 1.1fr 0.7fr;
  gap: 14px;
  border-top: 1px solid rgba(198, 161, 91, 0.14);
  padding: 14px 0;
}

.stateRow > div:first-child{ display: grid; }
.stateRow strong{ font-family: var(--font-display); color: var(--parchment); }
.stateRow span{ font-size: 0.7rem; color: var(--parchment-dim); margin-top: 3px; }
.stateRow p{ grid-column: 1 / -1; margin: 0; font-size: 0.72rem; color: var(--parchment-dim); }

/* Plan de práctica */
.practiceCards{ display: grid; gap: 10px; }
.practiceCards article{ border: 1px solid rgba(198, 161, 91, 0.16); border-radius: 8px; padding: 18px; background: rgba(237, 225, 201, 0.03); }
.practiceCards h3{ margin: 0 0 10px; font-family: var(--font-display); font-size: 1.05rem; color: var(--parchment); }
.practiceCards p{ font-size: 0.78rem; line-height: 1.55; margin: 6px 0; color: var(--parchment-dim); }

/* Tabla de confianza y alternativas */
.tableScroll{ overflow-x: auto; }

.result-section__body table{
  border-collapse: collapse;
  width: 100%;
  margin: 8px 0 20px;
  font-size: 0.74rem;
}

.result-section__body th,
.result-section__body td{
  text-align: left;
  border-bottom: 1px solid rgba(198, 161, 91, 0.16);
  padding: 10px 8px;
  vertical-align: top;
  color: var(--parchment);
}

.result-section__body thead th{
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--parchment-dim);
  font-family: var(--font-utility);
  font-size: 0.6rem;
  font-weight: normal;
}

@media (max-width: 640px){
  .translationGrid,
  .conceptGrid,
  .impactGrid,
  .explainGrid,
  .strengthGrid,
  .deepList,
  .cycle{
    grid-template-columns: 1fr;
  }
  .termList div{ grid-template-columns: 1fr; gap: 4px; }
  .stateRow{ grid-template-columns: 1fr; }
}