/* Capa de resultados — a pantalla completa sobre la escena del vagón,
   con su propio scroll. Contenido real: viene de
   window.TRITIPO_REPORT.build(profile) (js/test/engine/*, sin tocar);
   este archivo solo lo viste. El cuerpo de cada una de las 16
   secciones (section.body) usa sus propias clases internas
   (translationGrid, deepList, cycle...) — esas se estilan aparte en
   css/components/report-content.css para no mezclar "el armazón del
   informe" con "el contenido de cada sección".

   Los toques de color especiales (firma, títulos de sección, radar,
   segmentos de barra, insignias de confianza) NO usan el latón fijo
   del resto del proyecto — se calculan a partir del color que el
   usuario eligió para su ente, en variantes más claras/oscuras.
   Esas variables las rellena setResultAccent() en
   js/scenes/main-test-scene.js, reutilizando lighten()/darken() de
   js/entity/entity-palette.js. El valor por defecto aquí (tono
   latón) es solo el fallback antes de que ese color exista. */

.result-overlay{
  --result-accent: var(--brass-light);
  --result-accent-mid: var(--brass);
  --result-accent-glow: rgba(198, 161, 91, 0.3);
  --result-accent-border: rgba(198, 161, 91, 0.4);

  display: none;
  /* position:fixed a propósito, no absolute: [data-scene="mainTest"]
     tiene su propio scroll interno (el recorrido vertical en móvil).
     Con position:absolute, esta capa quedaba anclada al scroll de la
     escena — si el usuario estaba desplazado hacia abajo (por el
     anclaje de test-flow.js) al terminar el test, la capa de
     resultados no cubría lo que se veía en pantalla. Con position:
     fixed queda anclada al viewport real, siempre correcta. */
  position: fixed;
  inset: 0;
  z-index: 20;
  overflow-y: auto;
  background: rgba(5, 7, 10, 0.96);
  /* SIN backdrop-filter aquí a propósito: cualquier filter/backdrop-
     filter en un ancestro crea un "containing block" nuevo para sus
     descendientes position:fixed — el botón de guía y los paneles de
     ayuda/introducción (fixed, pintados dentro de este overlay) dejaban
     de anclarse al viewport real y se quedaban pegados al scroll de
     ESTE contenedor en su lugar (se veían "flotando a medio scroll" o
     "cortados" según por dónde estuviera desplazado el usuario). El
     fondo ya es casi opaco (0.96) así que el desenfoque no se echa en
     falta. */
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.result-overlay::-webkit-scrollbar{ display: none; }

.result-overlay.is-visible{ display: block; }

.result-report{
  width: min(94vw, 1180px);
  margin: 0 auto;
  padding: clamp(32px, 6vh, 64px) clamp(16px, 3vw, 32px) 100px;
  display: flex;
  flex-direction: column;
  gap: clamp(32px, 5vh, 52px);
}

/* ---------- 1. Cabecera ---------- */
.result-header{
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding-bottom: clamp(24px, 3.5vh, 36px);
  border-bottom: 1px solid rgba(198, 161, 91, 0.25);
}

.result-eyebrow{
  margin: 0;
  font-family: var(--font-utility);
  font-size: 0.68rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--result-accent-mid);
}

.result-signature{
  margin: 4px 0 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.6rem, 4.4vw, 2.6rem);
  color: var(--result-accent);
  text-shadow: 0 0 22px var(--result-accent-glow);
}

.result-archetype{
  margin: 0;
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1rem, 2vw, 1.2rem);
  color: var(--parchment);
}

.result-instinct-row{
  margin: 10px 0 0;
  max-width: 720px;
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--parchment-dim);
}

.result-hero-actions{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 18px;
}

/* ---------- 2. Reglas de lectura ---------- */
.result-reading-rules{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 2.4vw, 28px);
}

.result-reading-rules article{
  display: flex;
  gap: 12px;
  padding: 16px 18px;
  background: rgba(237, 225, 201, 0.03);
  border: 1px solid rgba(198, 161, 91, 0.16);
  border-radius: 10px;
}

.result-reading-rules b{
  flex: none;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.1rem;
  color: var(--result-accent-mid);
}

.result-reading-rules p{
  margin: 0;
  font-size: 0.78rem;
  line-height: 1.55;
  color: var(--parchment-dim);
}

.result-reading-rules strong{ color: var(--parchment); }

/* ---------- Encabezados de sección compartidos ---------- */
.result-section__title{
  margin: 0 0 4px;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.15rem, 2.8vw, 1.5rem);
  color: var(--result-accent);
  text-align: center;
}

.result-section__title--left{ text-align: left; }

/* ---------- 3. Dashboard ---------- */
.result-dashboard__head{
  text-align: center;
  max-width: 640px;
  margin: 0 auto 20px;
}

.result-dashboard__desc{
  margin: 10px 0 0;
  font-size: 0.82rem;
  line-height: 1.55;
  color: var(--parchment-dim);
}

.result-dashboard-grid{
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 14px;
}

.result-chart-box{
  grid-column: span 2;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 18px clamp(14px, 2vw, 22px);
  background: rgba(237, 225, 201, 0.04);
  border: 1px solid rgba(198, 161, 91, 0.18);
  border-radius: 12px;
  min-width: 0;
}

.result-chart-box--wide{ grid-column: span 3; }
.result-confidence-box{ grid-column: span 4; }
.result-gauge-box{ text-align: center; align-items: center; }

.result-chart-box__head{ min-height: 56px; }

.result-chart-box__title{
  margin: 0 0 6px;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1rem;
  color: var(--parchment);
}

.result-chart-box__desc{
  margin: 0;
  font-size: 0.72rem;
  line-height: 1.5;
  color: var(--parchment-dim);
}

/* Barras */
.result-bars{ display: flex; flex-direction: column; gap: 14px; }

.result-bar__row{
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 8px;
  align-items: baseline;
  font-size: 0.7rem;
}

.result-bar__row b{ font-family: var(--font-display); font-size: 0.95rem; color: var(--parchment); }
.result-bar__row span{ color: var(--parchment-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.result-bar__row strong{ color: var(--parchment-dim); text-align: right; }

.result-bar__track{
  height: 7px;
  border-radius: 4px;
  background: rgba(237, 225, 201, 0.1);
  overflow: hidden;
}

.result-bar__segment{
  height: 100%;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--result-accent-mid), var(--result-accent));
}

/* Radar */
.result-radar{ width: min(100%, 320px); margin: 0 auto; overflow: visible; display: block; }
.result-radar__grid{ fill: none; stroke: rgba(237, 225, 201, 0.15); stroke-width: 1; }
.result-radar line{ stroke: rgba(237, 225, 201, 0.12); stroke-width: 1; }
.result-radar__data{ fill: var(--result-accent-glow); stroke: var(--result-accent); stroke-width: 2; }
.result-radar circle{ fill: var(--result-accent); }
.result-radar text{ font-family: var(--font-utility); font-size: 9px; fill: var(--parchment-dim); }

/* Indicador circular (libertad reciente) */
.result-circle-gauge{
  --gauge: 180deg;
  width: 130px;
  height: 130px;
  border-radius: 50%;
  background: conic-gradient(var(--result-accent) var(--gauge), rgba(237, 225, 201, 0.1) 0);
  display: grid;
  place-items: center;
  position: relative;
  margin: 4px auto 6px;
}

.result-circle-gauge::before{
  content: "";
  position: absolute;
  inset: 11px;
  border-radius: 50%;
  background: #0a0d12;
}

.result-circle-gauge div{ position: relative; display: grid; place-items: center; }
.result-circle-gauge b{ font-family: var(--font-display); font-size: 2rem; color: var(--parchment); line-height: 1; }
.result-circle-gauge span{ font-size: 0.65rem; color: var(--parchment-dim); }

.result-gauge-zone{ font-family: var(--font-display); font-style: italic; font-size: 1rem; color: var(--result-accent); }
.result-gauge-need{ margin: 4px 0 0; font-size: 0.76rem; color: var(--parchment-dim); }

/* Confianza por módulo */
.result-confidence-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 20px;
}

.result-confidence-row{
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid rgba(198, 161, 91, 0.16);
  padding: 9px 0;
  font-size: 0.74rem;
  color: var(--parchment);
}

.confidence{
  display: inline-block;
  border: 1px solid currentColor;
  border-radius: 999px;
  padding: 3px 10px;
  font-family: var(--font-utility);
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.confidence-high{ color: #8fae8b; }
.confidence-moderate{ color: var(--brass-light); }
.confidence-low{ color: #d98a70; }
.confidence-open{ color: var(--ember); }

/* ---------- 4. Cuerpo del informe ---------- */
.result-body-layout{
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 32px;
  align-items: start;
}

.result-nav{
  position: sticky;
  top: 18px;
  display: flex;
  flex-direction: column;
  border-left: 1px solid rgba(198, 161, 91, 0.2);
  padding-left: 14px;
  max-height: calc(100vh - 36px);
  overflow-y: auto;
  scrollbar-width: none;
}

.result-nav::-webkit-scrollbar{ display: none; }

.result-nav a{
  display: flex;
  gap: 8px;
  padding: 6px 0;
  font-family: var(--font-utility);
  font-size: 0.66rem;
  line-height: 1.4;
  color: var(--parchment-dim);
  text-decoration: none;
}

.result-nav a span{ color: var(--result-accent-mid); font-family: var(--font-display); flex: none; }
.result-nav a:hover{ color: var(--parchment); }

.result-sections{ min-width: 0; display: flex; flex-direction: column; gap: 16px; }

.result-section{
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 8px;
  padding: clamp(24px, 4vw, 44px);
  background: rgba(237, 225, 201, 0.03);
  border: 1px solid rgba(198, 161, 91, 0.16);
  border-radius: 14px;
  scroll-margin-top: 18px;
}

.result-section__number{
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1rem;
  color: var(--result-accent-mid);
  padding-top: 3px;
}

.result-section__question{
  margin: 0 0 8px;
  font-family: var(--font-utility);
  font-size: 0.64rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--result-accent-mid);
}

.result-section__intro{
  margin: 10px 0 22px;
  max-width: 700px;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--parchment-dim);
}

.result-longitudinal,
.result-notice{
  padding: 18px 22px;
  border-left: 3px solid var(--result-accent-border);
  background: rgba(237, 225, 201, 0.03);
  border-radius: 0 8px 8px 0;
  font-size: 0.78rem;
  line-height: 1.6;
  color: var(--parchment-dim);
}

.result-longitudinal p{ margin: 6px 0 0; }
.result-notice{ border-left-color: rgba(198, 161, 91, 0.3); font-size: 0.7rem; }
.result-notice strong{ color: var(--parchment); }

.result-actions{
  display: flex;
  justify-content: center;
  padding-top: 8px;
}

/* ---------- 5. Guía del informe (glosario) ---------- */
.result-help-btn{
  position: fixed;
  z-index: 40;
  right: 22px;
  bottom: 22px;
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--brass);
  border-radius: 999px;
  background: rgba(10, 13, 18, 0.92);
  color: var(--parchment);
  padding: 8px 16px 8px 8px;
  cursor: pointer;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45);
  font-family: var(--font-utility);
}

.result-help-btn span{
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--brass);
  color: var(--void);
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 700;
}

.result-help-btn b{ font-size: 0.66rem; letter-spacing: 0.04em; font-weight: normal; }

.result-help-btn.is-highlighted{ animation: result-guide-pulse 1.7s ease-in-out 3; }

@keyframes result-guide-pulse{
  0%, 100%{ transform: translateY(0); }
  50%{ transform: translateY(-4px); }
}

.result-help-overlay{
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  justify-content: flex-end;
}

.result-help-backdrop{
  position: absolute;
  inset: 0;
  border: 0;
  background: rgba(5, 7, 10, 0.7);
  cursor: pointer;
}

.result-help-panel{
  position: relative;
  width: min(560px, 94vw);
  height: 100%;
  overflow-y: auto;
  background: #0a0d12;
  border-left: 1px solid rgba(198, 161, 91, 0.3);
  padding: clamp(24px, 4vw, 40px);
  box-shadow: -15px 0 60px rgba(0, 0, 0, 0.5);
}

.result-help-head{
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 18px;
  border-bottom: 1px solid rgba(198, 161, 91, 0.2);
  padding-bottom: 18px;
}

.result-help-close{
  border: 0;
  background: transparent;
  font-size: 1.8rem;
  line-height: 1;
  color: var(--parchment-dim);
  cursor: pointer;
}

.result-help-intro{
  margin: 20px 0;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--parchment);
}

.result-glossary details{
  border-top: 1px solid rgba(198, 161, 91, 0.16);
  padding: 0;
}

.result-glossary details:last-child{ border-bottom: 1px solid rgba(198, 161, 91, 0.16); }

.result-glossary summary{
  cursor: pointer;
  padding: 14px 26px 14px 0;
  position: relative;
  list-style: none;
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--parchment);
}

.result-glossary summary::-webkit-details-marker{ display: none; }
.result-glossary summary::after{ content: "+"; position: absolute; right: 4px; color: var(--result-accent-mid); }
.result-glossary details[open] summary::after{ content: "−"; }

.result-glossary p{
  margin: 0 0 16px;
  font-size: 0.8rem;
  line-height: 1.6;
  color: var(--parchment-dim);
}

.result-research-note{
  margin-top: 24px;
  padding: 16px 18px;
  background: rgba(237, 225, 201, 0.04);
  border-left: 3px solid rgba(198, 161, 91, 0.3);
  font-size: 0.72rem;
  line-height: 1.6;
  color: var(--parchment-dim);
}

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

/* ---------- 6. Guía "antes de empezar" ---------- */
.result-guide-overlay{
  position: fixed;
  inset: 0;
  z-index: 60;
  overflow-y: auto;
  background: rgba(5, 7, 10, 0.98);
  display: grid;
  place-items: center;
  padding: clamp(20px, 4vw, 40px);
}

.result-guide-page{
  width: min(880px, 100%);
  padding: clamp(28px, 5vw, 56px);
  background: rgba(237, 225, 201, 0.03);
  border: 1px solid rgba(198, 161, 91, 0.22);
  border-radius: 16px;
}

.result-guide-page h1{
  margin: 8px 0 20px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.6rem, 4vw, 2.4rem);
  line-height: 1.15;
  color: var(--parchment);
}

.result-guide-lead{
  margin: 0 0 28px;
  font-family: var(--font-display);
  font-size: 1.02rem;
  line-height: 1.6;
  color: var(--parchment-dim);
}

.result-guide-lead em{ color: var(--result-accent); font-style: italic; }

.result-guide-steps{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 1px solid rgba(198, 161, 91, 0.2);
  border-bottom: 1px solid rgba(198, 161, 91, 0.2);
}

.result-guide-steps article{
  display: flex;
  gap: 10px;
  padding: 22px 18px;
}

.result-guide-steps article + article{ border-left: 1px solid rgba(198, 161, 91, 0.16); }
.result-guide-steps b{ font-family: var(--font-display); font-style: italic; font-size: 1.1rem; color: var(--result-accent-mid); }
.result-guide-steps h2{ margin: 0 0 8px; font-family: var(--font-display); font-size: 1rem; color: var(--parchment); }
.result-guide-steps p{ margin: 0; font-size: 0.76rem; line-height: 1.55; color: var(--parchment-dim); }

.result-guide-callout{
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 26px 0;
  padding: 16px 18px;
  background: rgba(198, 161, 91, 0.08);
  border-radius: 10px;
}

.result-guide-callout span{
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--brass);
  color: var(--void);
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 700;
}

.result-guide-callout p{ margin: 0; font-size: 0.78rem; line-height: 1.55; color: var(--parchment); }

.result-guide-actions{
  display: flex;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
}

.result-guide-dismiss{
  border: 0;
  background: transparent;
  color: var(--parchment-dim);
  font-family: var(--font-utility);
  font-size: 0.72rem;
  text-decoration: underline;
  cursor: pointer;
  padding: 10px 0;
}

/* ---------- Responsive ---------- */
@media (max-width: 900px){
  .result-dashboard-grid{ grid-template-columns: 1fr 1fr; }
  .result-chart-box,
  .result-chart-box--wide,
  .result-confidence-box{ grid-column: span 1; }
  .result-body-layout{ grid-template-columns: 1fr; }
  .result-nav{
    position: static;
    flex-direction: row;
    flex-wrap: wrap;
    border-left: none;
    border-bottom: 1px solid rgba(198, 161, 91, 0.2);
    padding-left: 0;
    padding-bottom: 14px;
    max-height: none;
    gap: 4px 16px;
  }
  .result-nav a{ padding: 4px 0; }
}

@media (max-width: 640px){
  .result-reading-rules{ grid-template-columns: 1fr; }
  .result-dashboard-grid{ grid-template-columns: 1fr; }
  .result-guide-steps{ grid-template-columns: 1fr; }
  .result-guide-steps article + article{ border-left: none; border-top: 1px solid rgba(198, 161, 91, 0.16); }
  .result-confidence-grid{ grid-template-columns: 1fr; }
  .result-section{ grid-template-columns: 26px minmax(0, 1fr); padding: 22px 16px; }
  .result-help-btn b{ display: none; }
}

@media print{
  .result-help-btn,
  .result-nav,
  .result-hero-actions,
  .result-actions{ display: none !important; }
  .result-overlay{ position: static; background: #fff; color: #000; }
}