/* ==========================================================================
   Tetraktia: componentes de la nueva arquitectura del mapa.
   Usa los tokens del sistema (styles.css) con reserva por si falta alguno.
   ========================================================================== */

/* ------------------------------------------------------------------ tu mapa en un minuto */

.mapa-minuto {
  display: grid;
  grid-template-columns: minmax(150px, auto) minmax(0, 1fr);
  gap: var(--e-8, 32px);
  align-items: stretch;
  margin: var(--e-6, 24px) 0 var(--e-3, 12px);
  background: var(--sup-3, #fff);
  border: 1px solid var(--linea, #d3c6ac);
  border-radius: var(--r-4, 16px);
  box-shadow: var(--elev-2, 0 2px 8px rgba(20,26,60,.08));
  overflow: hidden;
}

/* Columna de la cifra: el número, su nombre y la tetraktys con tu punto */
.minuto-cifra {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--e-2, 8px);
  padding: var(--e-8, 32px) var(--e-6, 24px);
  background: var(--sup-1, #f2ece0);
  border-right: 1px solid var(--linea-sutil, #e2d8c4);
}
.minuto-numero {
  font-family: var(--serif, Georgia, serif);
  font-size: 76px; line-height: .95;
  color: var(--oro-texto, #8a6220);
  font-variant-numeric: lining-nums tabular-nums;
}
.minuto-etiqueta {
  font-size: var(--t-micro-tam, 11px);
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--tinta-baja, #666e96);
}
.tetraktys-personal { margin-top: var(--e-2, 8px); }
.tetraktys-personal .punto-base { fill: var(--linea, #d3c6ac); }
.tetraktys-personal .punto-activo { fill: var(--oro-400, #c99a3f); }

/* Columna del texto: la frase y las cuatro claves en dos filas parejas */
.minuto-texto {
  display: flex; flex-direction: column; justify-content: center;
  gap: var(--e-4, 16px);
  padding: var(--e-8, 32px) var(--e-8, 32px) var(--e-8, 32px) 0;
}
.minuto-frase {
  font-family: var(--serif, Georgia, serif);
  font-size: clamp(22px, 2.6vw, 30px);
  line-height: 1.28;
  color: var(--tinta-alta, #141a3c);
  max-width: 26ch;
}
.minuto-claves {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--e-4, 16px) var(--e-6, 24px);
  padding-top: var(--e-4, 16px);
  border-top: 1px solid var(--linea-sutil, #e2d8c4);
}
.minuto-claves dt {
  font-size: var(--t-micro-tam, 11px);
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--turq-texto, #106c7a);
  margin-bottom: 2px;
}
.minuto-claves dd {
  font-size: var(--t-cuerpo-s-tam, 15px);
  line-height: 1.45;
  color: var(--tinta-alta, #141a3c);
}
.minuto-nota {
  font-size: var(--t-pie-tam, 13px);
  color: var(--tinta-baja, #666e96);
  margin-bottom: var(--e-6, 24px);
}

@media (max-width: 760px) {
  .mapa-minuto { grid-template-columns: 1fr; }
  .minuto-cifra {
    flex-direction: row; justify-content: flex-start; gap: var(--e-4, 16px);
    padding: var(--e-4, 16px) var(--e-6, 24px);
    border-right: none; border-bottom: 1px solid var(--linea-sutil, #e2d8c4);
  }
  .minuto-numero { font-size: 52px; }
  .minuto-etiqueta { text-align: left; }
  .tetraktys-personal { margin: 0 0 0 auto; }
  .minuto-texto { padding: var(--e-6, 24px); }
  .minuto-claves { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------------------ menú del mapa */

.indice-tetraktys { position: relative; }

.menu-mapa-boton {
  display: flex; align-items: center; gap: var(--e-3, 12px);
  min-height: 40px; padding: var(--e-2, 8px) var(--e-4, 16px);
  background: var(--sup-3, transparent);
  border: 1px solid var(--linea, #d3c6ac);
  border-radius: var(--r-2, 6px);
  color: var(--tinta-media, #3d456e);
  font-family: var(--sans, system-ui);
  font-size: 14px;
  max-width: 44ch;
}
.menu-mapa-boton:hover { border-color: var(--linea-fuerte, #8f7f5c); }
.menu-mapa-actual { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.menu-mapa-flecha {
  width: 8px; height: 8px; flex: none;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform var(--dur-2, 220ms) var(--ease-revelar, ease);
}
.menu-mapa-boton[aria-expanded="true"] .menu-mapa-flecha { transform: rotate(-135deg) translate(-3px, -3px); }

.menu-mapa-progreso {
  width: 42px; height: 3px; flex: none;
  background: var(--linea, #d3c6ac); border-radius: 999px; overflow: hidden;
}
.menu-mapa-progreso i {
  display: block; height: 100%; width: 100%;
  background: var(--oro-400, #c99a3f);
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur-3, 420ms) var(--ease-revelar, ease);
}

.menu-mapa-lista {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 60;
  min-width: 280px; margin: 0; padding: var(--e-2, 8px);
  list-style: none; counter-reset: none;
  background: var(--sup-3, #fff);
  border: 1px solid var(--linea, #d3c6ac);
  border-radius: var(--r-3, 10px);
  box-shadow: var(--elev-3, 0 24px 64px rgba(20, 26, 60, .16));
}
.menu-mapa-lista li { margin: 0; }
.menu-mapa-lista button {
  display: flex; align-items: baseline; gap: var(--e-3, 12px);
  width: 100%; min-height: 40px; padding: var(--e-2, 8px) var(--e-3, 12px);
  background: none; border: none; border-radius: var(--r-2, 6px);
  color: var(--tinta-media, #3d456e);
  font-family: var(--sans, system-ui); font-size: 14px; text-align: left;
}
.menu-mapa-lista button:hover { background: var(--sup-1, #f2ece0); color: var(--tinta-alta, #141a3c); }
.menu-mapa-lista button.actual { color: var(--tinta-alta, #141a3c); font-weight: 600; }
.menu-mapa-lista button.actual .menu-num { background: var(--oro-400, #c99a3f); color: var(--sup-0, #faf7f0); border-color: transparent; }
.menu-num {
  flex: none; width: 22px; height: 22px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--linea, #d3c6ac); border-radius: 999px;
  font-size: 11px; font-variant-numeric: tabular-nums;
}

@media (max-width: 720px) {
  .menu-mapa-boton { max-width: 42vw; }
  .menu-mapa-lista { position: fixed; left: var(--e-4, 16px); right: var(--e-4, 16px); min-width: 0; }
}

/* ------------------------------------------------------------------ radares del vínculo */

/* Dos radares, dos columnas exactas: el auto ajuste dejaba una tercera
   columna fantasma y el bloque se veía descuadrado. */
.radares {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--e-6, 24px);
  margin: var(--e-6, 24px) 0 var(--e-4, 16px);
}
@media (max-width: 720px) { .radares { grid-template-columns: 1fr; } }
.radar-caja {
  background: var(--sup-1, var(--fondo-2, #0c192e));
  border: 1px solid var(--linea, var(--borde, #1f3a5f));
  border-radius: var(--r-3, 12px);
  padding: var(--e-4, 16px);
  text-align: center;
}
.radar-caja h4 {
  font-size: var(--t-mini-tam, 12px);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--tinta-baja, var(--tinta-suave, #a4bad8));
  margin-bottom: var(--e-2, 8px);
}
.radar { width: 100%; max-width: 400px; height: auto; }
.radar-rotulo {
  font-family: var(--sans, system-ui);
  font-size: 12px;
  font-variant-numeric: lining-nums tabular-nums;
  fill: var(--tinta-baja, var(--tinta-suave, #a4bad8));
}
.radar-pie {
  font-size: var(--t-pie-tam, 13px);
  color: var(--tinta-baja, var(--tinta-suave, #a4bad8));
  margin-top: var(--e-2, 8px);
  text-align: left;
}
.radar-leyenda {
  grid-column: 1 / -1;
  display: flex;
  gap: var(--e-6, 24px);
  justify-content: center;
}
.leyenda-serie {
  font-size: var(--t-pie-tam, 13px);
  display: inline-flex;
  align-items: center;
  gap: var(--e-2, 8px);
  color: var(--tinta-media, var(--tinta-suave, #a4bad8));
}
.leyenda-serie::before {
  content: '';
  width: 14px; height: 3px; border-radius: 2px;
}
.leyenda-serie.serie-a::before { background: var(--oro-400, #d4af5f); }
.leyenda-serie.serie-b::before { background: var(--turq-400, #4fc3d4); }

:root { --radar-grilla: color-mix(in srgb, currentColor 18%, transparent); }

/* ------------------------------------------------------------------ lectura de los índices */

.lectura-indices {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--e-8, 32px);
  align-items: center;
  background: var(--sup-1, #f2ece0);
  border: 1px solid var(--linea, #d3c6ac);
  border-radius: var(--r-3, 10px);
  padding: var(--e-6, 24px);
  margin-bottom: var(--e-8, 32px);
}
.indices-par { display: flex; gap: var(--e-6, 24px); }
.indice-dato { text-align: center; min-width: 88px; }
.indice-cifra {
  display: block;
  font-family: var(--serif, Georgia, serif);
  font-size: 52px; line-height: 1;
  color: var(--oro-texto, #8a6220);
  font-variant-numeric: lining-nums tabular-nums;
}
.indice-nombre {
  display: block;
  font-size: var(--t-micro-tam, 11px);
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--tinta-baja, #666e96);
  margin-top: var(--e-1, 4px);
}
.indices-texto h4 {
  font-family: var(--serif, Georgia, serif);
  font-size: 20px;
  color: var(--tinta-alta, #141a3c);
  margin-bottom: var(--e-2, 8px);
}
.indices-texto p { font-size: var(--t-cuerpo-s-tam, 15px); color: var(--tinta-media, #3d456e); }
.indices-nota {
  font-size: var(--t-mini-tam, 12px);
  color: var(--tinta-baja, #666e96);
  margin-top: var(--e-3, 12px);
  padding-top: var(--e-3, 12px);
  border-top: 1px solid var(--linea-sutil, #e2d8c4);
}
@media (max-width: 720px) {
  .lectura-indices { grid-template-columns: 1fr; gap: var(--e-4, 16px); }
  .indices-par { justify-content: center; }
}

/* ------------------------------------------------------------------ procedencia discreta */

/* Las píldoras de origen ensuciaban la lectura: pasan a ser una nota al pie de
   cada línea, en la misma columna y con el mismo peso visual que una acotación. */
.foda-cuadro li, .col-recomendacion li { position: relative; }
.tag-origen {
  display: block;
  margin-top: 2px;
  font-family: var(--sans, system-ui);
  font-size: 11px;
  letter-spacing: .04em;
  color: var(--tinta-baja, #666e96);
  background: none;
  border: none;
  padding: 0;
  white-space: normal;
}
.tag-origen::before { content: '↳ '; opacity: .6; }

/* ------------------------------------------------------------------ el mes que vives */

.mes-actual {
  background: var(--sup-2, var(--fondo-3, #12233f));
  border: 1px solid var(--linea, var(--borde, #1f3a5f));
  border-left: 3px solid var(--turq-400, var(--acento, #4fc3d4));
  border-radius: 0 var(--r-3, 12px) var(--r-3, 12px) 0;
  padding: var(--e-6, 24px);
  margin: 0 0 var(--e-6, 24px);
}
.mes-etiqueta {
  font-size: var(--t-micro-tam, 11px);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--turq-400, var(--acento, #4fc3d4));
}
.mes-actual h3 {
  font-size: var(--t-h3-tam, 21px);
  color: var(--oro-400, var(--dorado-claro, #eeda9f));
  margin: var(--e-1, 4px) 0 var(--e-2, 8px);
  text-transform: capitalize;
}
.mes-gancho {
  font-family: var(--serif, Georgia, serif);
  font-size: 19px;
  color: var(--tinta-alta, var(--tinta, #eaf1fb));
  margin-bottom: var(--e-2, 8px);
}
.mes-actual p { color: var(--tinta-media, var(--tinta-suave, #a4bad8)); }
.mes-fuente {
  font-size: var(--t-pie-tam, 13px);
  margin-top: var(--e-3, 12px);
  padding-top: var(--e-3, 12px);
  border-top: 1px solid var(--linea-sutil, rgba(31, 58, 95, .7));
}

/* ------------------------------------------------------------------ destino de compatibilidad */

.punto-destino { color: var(--turq-400, var(--acento, #4fc3d4)); border-color: currentColor; }

@media (prefers-reduced-motion: reduce) {
  .indice-tetraktys .ind-punto { transition: none; }
}

/* ------------------------------------------------------------------ corrección de solapamiento */

/* La barra del informe es pegajosa: las secciones necesitan margen de anclaje
   para que el índice vivo no deje los títulos debajo de ella. */
#informe .seccion { scroll-margin-top: 128px; }
.seccion-portada-informe { padding-top: var(--e-6, 24px); }

/* ------------------------------------------------------------------ suscripción a la guía semanal */

.bloque-suscripcion {
  background: var(--sup-1, var(--fondo-2, #0c192e));
  border: 1px solid var(--linea, var(--borde, #1f3a5f));
  border-radius: var(--r-3, 12px);
  padding: var(--e-6, 24px);
  margin: var(--e-8, 32px) 0 0;
  max-width: var(--carril-medio, 760px);
}
.bloque-suscripcion h3 {
  font-size: var(--t-h3-tam, 21px);
  color: var(--oro-400, var(--dorado-claro, #eeda9f));
  margin-bottom: var(--e-2, 8px);
}
.bloque-suscripcion > p {
  color: var(--tinta-media, var(--tinta-suave, #a4bad8));
  font-size: var(--t-cuerpo-s-tam, 15px);
  margin-bottom: var(--e-4, 16px);
}
.campo-suscripcion { display: flex; gap: var(--e-2, 8px); flex-wrap: wrap; margin-bottom: var(--e-3, 12px); }
.campo-suscripcion input {
  flex: 1 1 220px;
  min-height: 44px;
  padding: var(--e-3, 12px) var(--e-4, 16px);
  background: var(--sup-0, var(--fondo, #081120));
  border: var(--b-control, 1px solid var(--linea-fuerte, #5c68b0));
  border-radius: var(--r-2, 6px);
  color: var(--tinta-alta, var(--tinta, #eaf1fb));
  font: inherit;
}
.campo-suscripcion .boton { min-height: 44px; flex: 0 0 auto; }

.consentimiento {
  display: flex;
  gap: var(--e-2, 8px);
  align-items: flex-start;
  font-size: var(--t-pie-tam, 13px);
  color: var(--tinta-media, var(--tinta-suave, #a4bad8));
  margin-bottom: var(--e-3, 12px);
  cursor: pointer;
}
.consentimiento input { margin-top: 3px; width: 18px; height: 18px; flex: none; accent-color: var(--turq-400, #4fc3d4); }

.nota-suscripcion { font-size: var(--t-pie-tam, 13px); min-height: 1.2em; }
.nota-suscripcion.ok { color: var(--don, var(--exito, #6fd4a5)); }
.nota-suscripcion.error { color: var(--peligro, var(--alerta, #e08f8f)); }

.letra-chica {
  font-size: var(--t-mini-tam, 12px);
  color: var(--tinta-baja, var(--tinta-suave, #a4bad8));
  margin-top: var(--e-2, 8px);
}
.letra-chica a { color: var(--turq-400, var(--acento, #4fc3d4)); }

.visualmente-oculto {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ------------------------------------------------------------------ radares con vida */

.radar-serie polygon {
  transform-origin: center;
  animation: radar-entrar var(--dur-4, 900ms) var(--ease-revelar, cubic-bezier(.2,.7,.3,1)) both;
  transition: fill-opacity var(--dur-2, 220ms) ease, stroke-width var(--dur-2, 220ms) ease;
}
.radar-serie circle {
  animation: radar-punto var(--dur-3, 420ms) var(--ease-revelar, ease) both;
  transition: r var(--dur-2, 220ms) ease;
}
.radar-serie-1 polygon, .radar-serie-1 circle { animation-delay: 160ms; }

@keyframes radar-entrar {
  from { transform: scale(.72); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}
@keyframes radar-punto {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Al posar el cursor sobre una silueta, esa pasa al frente y la otra se atenúa */
.radar:hover .radar-serie { opacity: .35; }
.radar .radar-serie:hover { opacity: 1; }
.radar .radar-serie:hover polygon { fill-opacity: .3; stroke-width: 3.5; }
.radar .radar-serie:hover circle { r: 6; }
.radar-serie { transition: opacity var(--dur-2, 220ms) ease; }

@media (prefers-reduced-motion: reduce) {
  .radar-serie polygon, .radar-serie circle { animation: none; }
}


/* ==========================================================================
   Retícula maestra
   Un solo eje izquierdo para todo el informe y tres carriles con anchos
   canónicos. Sin esto, cada bloque elegía su ancho y el resultado era el
   desorden que se veía: cajas de distinto largo, huecos irregulares y
   demasiado aire lateral en pantallas grandes.
   ========================================================================== */

/* Todo bloque de una sección nace en el mismo eje y con el mismo ritmo */
#informe .seccion > .contenedor > * { margin-left: 0; margin-right: 0; }

/* Carril de prosa: lo que se lee de corrido nunca pasa de la medida cómoda */
.intro-seccion,
.mapa-personal p,
.minuto-nota,
.nota-fuerza,
.leyenda-letras,
.equilibrio-tabla,
.indices-nota { max-width: var(--carril-prosa, 68ch); }

/* Carril medio: bloques que contienen una sola idea */
.mes-actual,
.bloque-suscripcion,
.lectura-combinada,
.guia-uso-nombre,
.caracter-vinculo { max-width: var(--carril-medio, 760px); }

/* Carril ancho: rejillas y elementos que ganan con el espacio completo */
.mapa-minuto,
.foda-rejilla,
.rejilla-recomendaciones,
.radares,
.lectura-indices,
.dos-gatos,
.tabla-natal-layout,
.tabla-columnas-layout,
.rejilla-tarjetas,
.desglose-compat,
.listas-vinculo { max-width: none; width: 100%; }

/* Ritmo vertical uniforme entre bloques de una misma sección */
#informe .seccion > .contenedor > * + * { margin-top: var(--e-6, 24px); }
#informe .seccion > .contenedor > h3 + * { margin-top: var(--e-4, 16px); }
#informe .seccion > .contenedor > .titulo-seccion + * { margin-top: var(--e-4, 16px); }

/* En pantallas anchas el texto no se estira: el aire sobrante se reparte
   en un margen interior mayor, no en líneas de sesenta palabras */
@media (min-width: 1280px) {
  .contenedor { padding-inline: var(--e-12, 48px); }
}
@media (min-width: 1600px) {
  :root { --lienzo: 1280px; }
}

/* El sello y toda pieza suelta respetan el eje izquierdo: nada centrado
   dentro del informe, porque un elemento centrado entre bloques alineados
   se lee como error de composición. */
#informe .sello-metodo { text-align: left; }
#informe .acciones-informe { justify-content: flex-start; }