/* =====================================================================
   MAKKI — MÓDULO 2 · Sistema Solar Dramático.

   El lienzo orbital ya es oscuro por defecto, así que en lugar de paneles
   glassmorphism se usan los bloques planos crema/terracota de la sección 9.4
   para mantener la coherencia con el resto del sitio.
   ===================================================================== */

/* ---------------------------------------------------------------
   BARRA DE TELEMETRÍA — permanente en el borde superior (4.2.5)
   --------------------------------------------------------------- */
.telemetria {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--filete);
  border: var(--filete) solid var(--negro-filete);
  background: var(--negro-filete);
  margin-bottom: var(--e-4);
}
@media (min-width: 620px) { .telemetria { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1000px) { .telemetria { grid-template-columns: repeat(5, 1fr); } }

.tel-dato {
  background: var(--negro);
  padding: var(--e-2) var(--e-3);
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-height: 54px;
  justify-content: center;
}
.tel-dato__cifra { font-family: var(--f-display); font-size: var(--t-l); line-height: 1; }
.tel-dato__etq {
  font-family: var(--f-cond); font-size: 0.6rem; font-weight: 700;
  letter-spacing: var(--ls-meta); text-transform: uppercase; color: var(--crema-apag);
}
.tel-dato--ok { background: var(--valido-prof); }
.tel-dato--ok .tel-dato__etq { color: rgba(244, 239, 230, .85); }
.tel-dato--aviso { background: var(--ambar-prof); }
.tel-dato--aviso .tel-dato__etq { color: rgba(244, 239, 230, .85); }
.tel-dato--mal { background: var(--acento-prof); }
.tel-dato--mal .tel-dato__etq { color: rgba(244, 239, 230, .88); }

/* ---------------------------------------------------------------
   LIENZO ORBITAL
   --------------------------------------------------------------- */
.orbital-marco {
  position: relative;
  background: #040404;
  border: var(--filete) solid var(--negro-filete);
  touch-action: none;              /* el arrastre no debe hacer scroll de la página */
  overflow: hidden;
  min-height: 340px;
}
@media (min-width: 720px) { .orbital-marco { min-height: 480px; } }

.orbital { display: block; width: 100%; height: auto; }
.orbital:focus-visible { outline: var(--filete-grueso) solid var(--acento); outline-offset: -4px; }

.orbital-herramientas {
  position: absolute; top: var(--e-2); right: var(--e-2);
  display: flex; gap: var(--filete); z-index: 2;
}
.orbital-herramientas .btn { min-height: 36px; padding: var(--e-2); background: rgba(0,0,0,.82); }

/* La leyenda va DEBAJO del lienzo, no encima: flotando tapaba el nombre del
   planeta que quedara abajo del todo, que en movil es casi siempre alguno. */
.orbital-leyenda {
  display: flex; gap: var(--e-3); flex-wrap: wrap;
  padding: var(--e-2) var(--e-3);
  border-top: var(--filete) solid var(--negro-filete);
  pointer-events: none;
}
@media (min-width: 760px) {
  .orbital-leyenda {
    position: absolute; bottom: var(--e-2); left: var(--e-3);
    padding: 0; border-top: 0; z-index: 2;
  }
}
.orbital-leyenda span {
  font-family: var(--f-cond); font-size: 0.6rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--crema-apag);
  display: flex; align-items: center; gap: 5px;
}
.orbital-leyenda i { width: 9px; height: 9px; display: block; }
.orbital-leyenda i.ok { background: var(--valido); }
.orbital-leyenda i.err { border: 1px dashed var(--acento); }
.orbital-leyenda i.col { background: var(--acento); }

/* --- el Sol --- */
.sol-nucleo { fill: var(--crema); }
.sol-corona { fill: none; stroke: var(--acento); stroke-width: 1.4; opacity: .75; }
.sol-campo { fill: none; stroke: var(--acento); stroke-width: 0.9; opacity: .34; }
.sol-apagado .sol-nucleo { fill: #4a463f; }
.sol-apagado .sol-corona { stroke: var(--ambar); stroke-dasharray: 5 4; }
.sol-apagado .sol-campo { stroke: var(--ambar); opacity: .2; }

/* Enana blanca inactiva: halo ámbar parpadeante (4.2.2) */
.sol-halo-inactivo {
  fill: none; stroke: var(--ambar); stroke-width: 2.4; opacity: .9;
  animation: latido-ambar 1.6s ease-in-out infinite;
}
@keyframes latido-ambar {
  0%, 100% { opacity: .85; stroke-width: 2.4; }
  50%      { opacity: .28; stroke-width: 4.2; }
}
@media (prefers-reduced-motion: reduce) {
  .sol-halo-inactivo { animation: none; stroke-dasharray: 6 5; }
}

.sol-etiqueta {
  font-family: "Anton", "Arial Narrow", Impact, sans-serif;
  fill: var(--negro); text-transform: uppercase; font-size: 13px;
  text-anchor: middle; pointer-events: none;
}
.sol-apagado .sol-etiqueta { fill: var(--crema); }
.sol-subetiqueta {
  font-family: "Barlow Condensed", "Arial Narrow", sans-serif;
  fill: rgba(0, 0, 0, .62); font-size: 9px; font-weight: 700;
  letter-spacing: .16em; text-anchor: middle; text-transform: uppercase;
  pointer-events: none;
}
.sol-apagado .sol-subetiqueta { fill: var(--crema-apag); }

/* --- polos de contradicción sobre la superficie del Sol --- */
.polo { cursor: pointer; }
.polo__disco { fill: var(--negro); stroke: var(--crema); stroke-width: 1.6; }
.polo--a .polo__disco { stroke: var(--crema); }
.polo--b .polo__disco { stroke: var(--crema-apag); stroke-dasharray: 3 2; }
.polo__letra {
  font-family: "Barlow Condensed", sans-serif; font-weight: 700; font-size: 11px;
  fill: var(--crema); text-anchor: middle; pointer-events: none;
}
.polo--destino .polo__disco { fill: var(--acento); stroke: var(--acento); }
.polo--resaltado .polo__disco { fill: var(--crema); stroke: var(--acento); stroke-width: 2.6; }
.polo--resaltado .polo__letra { fill: var(--negro); }
.polo:focus-visible .polo__disco { stroke: var(--acento); stroke-width: 3; }

.polo-etiqueta {
  font-family: "Barlow Condensed", sans-serif; font-size: 9.5px; font-weight: 600;
  fill: var(--crema-apag); pointer-events: none;
}
.polo--resaltado .polo-etiqueta { fill: var(--crema); }

/* Cerco negro bajo TODO el texto del lienzo. Las etiquetas se mueven con el
   contenido del proyecto, así que por mucho que se coloquen bien siempre puede
   haber un cruce: con el cerco, el de arriba se sigue leyendo. */
.orbital text {
  paint-order: stroke fill;
  stroke: #000;
  stroke-width: 3px;
  stroke-linejoin: round;
}
.orbital .sol-etiqueta, .orbital .sol-subetiqueta { stroke: none; }
.orbital .polo__letra { stroke-width: 2px; }

/* --- órbitas --- */
.orbita-linea { fill: none; stroke: #171615; stroke-width: 1; }

/* --- vector magnético que ancla cada planeta a su polo --- */
.vector { stroke: var(--valido); stroke-width: 1.5; opacity: .8; }
.vector--arrastre { stroke: var(--acento); stroke-width: 2.2; stroke-dasharray: 5 4; }
.vector--colision { stroke: var(--acento); }

/* --- planetas y asteroides --- */
.cuerpo { cursor: pointer; }
.cuerpo__disco { fill: var(--negro-elev); stroke: var(--valido); stroke-width: 2; }
.cuerpo__nombre {
  font-family: "Barlow Condensed", sans-serif; font-weight: 700; font-size: 11px;
  fill: var(--crema); text-anchor: middle; pointer-events: none;
}
.cuerpo__funcion {
  font-family: "Barlow Condensed", sans-serif; font-weight: 700; font-size: 8px;
  fill: var(--crema-apag); text-anchor: middle; letter-spacing: .12em;
  text-transform: uppercase; pointer-events: none;
}
.cuerpo--errante .cuerpo__disco {
  fill: rgba(217, 72, 31, .1); stroke: var(--acento);
  stroke-width: 1.8; stroke-dasharray: 5 4;
}
.cuerpo--colision .cuerpo__disco { stroke: var(--acento); stroke-width: 3; }
.cuerpo--seleccionado .cuerpo__disco { stroke: var(--crema); stroke-width: 3.4; }
.cuerpo--ladron .cuerpo__disco { fill: var(--crema); }
.cuerpo--ladron .cuerpo__nombre { fill: var(--negro); }
.cuerpo:focus-visible .cuerpo__disco { stroke: var(--acento); stroke-width: 3.4; }

/* resonancia visual entre secundarios que colisionan */
.choque { stroke: var(--acento); stroke-width: 1.6; stroke-dasharray: 3 3; opacity: .95; }
.choque-aro {
  fill: none; stroke: var(--acento); stroke-width: 1;
  opacity: .5; animation: resonancia 1.4s ease-out infinite;
}
@keyframes resonancia {
  0%   { r: 18; opacity: .55; }
  100% { r: 34; opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .choque-aro { animation: none; opacity: .4; } }

.marca-errante {
  font-family: "Barlow Condensed", sans-serif; font-weight: 700; font-size: 8.5px;
  fill: var(--acento); text-anchor: middle; letter-spacing: .1em;
  text-transform: uppercase; pointer-events: none;
}

/* ---------------------------------------------------------------
   PANELES LATERALES — columnas en escritorio, apilados en móvil
   --------------------------------------------------------------- */
.panel { border: var(--filete) solid var(--negro-filete); }
.panel__cabeza {
  padding: var(--e-3);
  border-bottom: var(--filete) solid var(--negro-filete);
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--e-2);
}
.panel__cuerpo { padding: var(--e-3); }
@media (min-width: 1100px) {
  .panel--pegajoso { position: sticky; top: 76px; max-height: calc(100vh - 96px); overflow-y: auto; }
}

/* --- editor de pares polares --- */
.par {
  border: var(--filete) solid var(--negro-filete);
  padding: var(--e-3);
  margin-bottom: var(--e-3);
}
.par--completo { border-color: var(--valido-prof); }
.par__cabeza {
  display: flex; justify-content: space-between; align-items: center;
  gap: var(--e-2); margin-bottom: var(--e-2);
}
.par__polo { margin-bottom: var(--e-3); }
.par__polo:last-child { margin-bottom: 0; }
.par__polo-etq {
  display: flex; align-items: baseline; gap: var(--e-2);
  font-family: var(--f-cond); font-size: var(--t-meta); font-weight: 700;
  letter-spacing: var(--ls-meta); text-transform: uppercase; margin-bottom: var(--e-1);
}
.par__polo-etq b {
  width: 18px; height: 18px; display: grid; place-items: center; flex: none;
  background: var(--crema); color: var(--negro); font-size: 0.66rem;
}
.par__polo--b .par__polo-etq b { background: transparent; color: var(--crema); border: 1px dashed var(--crema-apag); }

/* --- inspector del cuerpo seleccionado --- */
.inspector__vacio { padding: var(--e-5) var(--e-3); text-align: center; color: var(--crema-apag); }
.inspector__nombre {
  font-family: var(--f-display); font-size: var(--t-xl); text-transform: uppercase;
  line-height: .92; margin: 0 0 var(--e-2); overflow-wrap: anywhere;
}
.inspector__vinculo {
  border-left: var(--filete-grueso) solid var(--valido);
  padding-left: var(--e-3); margin: var(--e-4) 0;
}
.inspector__vinculo--roto { border-left-color: var(--acento); }

/* selector de polo para el modo táctil y de teclado (secciones 12 y 16) */
.polo-lista { display: grid; gap: var(--e-2); }
.polo-opcion {
  display: flex; gap: var(--e-3); align-items: flex-start; text-align: left;
  padding: var(--e-3); min-height: var(--alto-toque);
  border: var(--filete) solid var(--negro-filete);
  background: var(--negro); color: var(--crema); font: inherit; cursor: pointer;
}
/* El hover no puede tapar la elección: pesaba más que --elegida. */
.polo-opcion:hover:not(.polo-opcion--elegida) { border-color: var(--crema); }
.polo-opcion--elegida { border-color: var(--acento); background: var(--negro-elev); }
.polo-opcion__marca {
  width: 24px; height: 24px; flex: none; display: grid; place-items: center;
  font-family: var(--f-cond); font-weight: 700; font-size: 0.7rem;
  background: var(--crema); color: var(--negro);
}
.polo-opcion--b .polo-opcion__marca { background: transparent; color: var(--crema); border: 1px dashed var(--crema-apag); }
.polo-opcion__texto { flex: 1 1 auto; font-size: var(--t-s); }
.polo-opcion__meta {
  display: block; font-family: var(--f-cond); font-size: 0.62rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--crema-apag);
}

/* --- anillos concéntricos de antagonismo --- */
.anillos-zona { display: grid; gap: var(--e-4); grid-template-columns: 1fr; }
@media (min-width: 980px) { .anillos-zona { grid-template-columns: 300px 1fr; align-items: start; } }

.anillos-diagrama { display: block; width: 100%; max-width: 300px; height: auto; margin: 0 auto; }
.anillo-aro { fill: none; stroke-width: 2; }
.anillo-aro--activo { stroke: var(--acento); }
.anillo-aro--vacio { stroke: var(--negro-filete); stroke-dasharray: 5 4; }
.anillo-txt {
  font-family: "Barlow Condensed", sans-serif; font-weight: 700; font-size: 8px;
  letter-spacing: .16em; text-transform: uppercase; text-anchor: middle; fill: var(--crema-apag);
}
.anillo-txt--activo { fill: var(--crema); }
.anillo-centro {
  font-family: "Anton", sans-serif; font-size: 11px; text-anchor: middle;
  fill: var(--crema); text-transform: uppercase;
}

.anillo-bloque { border-top: var(--filete-grueso) solid var(--negro-filete); padding-top: var(--e-3); margin-bottom: var(--e-6); }
.anillo-bloque--activo { border-top-color: var(--acento); }
.fuerza {
  display: flex; gap: var(--e-3); align-items: flex-start;
  border: var(--filete) solid var(--negro-filete);
  padding: var(--e-3); margin-bottom: var(--e-2);
}
.fuerza__texto { flex: 1 1 auto; font-size: var(--t-s); }
.fuerza__meta {
  display: block; font-family: var(--f-cond); font-size: 0.62rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--crema-apag); margin-top: 2px;
}

/* indicador Complicación vs. Complejidad */
.grado {
  padding: var(--e-4); margin-bottom: var(--e-4);
  border: var(--filete) solid var(--negro-filete);
}
.grado--desbloqueado { background: var(--acento); color: var(--negro); border-color: var(--acento); }
.grado__titulo { font-family: var(--f-display); font-size: var(--t-l); text-transform: uppercase; line-height: 1; }
.grado__barra { display: flex; gap: var(--filete); margin-top: var(--e-3); }
.grado__tramo { flex: 1 1 0; height: 8px; background: var(--negro-filete); }
.grado__tramo--on { background: var(--acento); }
.grado--desbloqueado .grado__tramo { background: rgba(0,0,0,.25); }
.grado--desbloqueado .grado__tramo--on { background: var(--negro); }

/* --- escala de negatividad: peldaños en escalera --- */
.escalera { display: grid; gap: var(--e-3); }
.peldano-fila {
  display: grid; gap: var(--e-3);
  grid-template-columns: 1fr;
  border-left: var(--filete-grueso) solid var(--negro-filete);
  padding-left: var(--e-4);
}
@media (min-width: 760px) { .peldano-fila { grid-template-columns: 220px 1fr; } }
.peldano-fila--presente { border-left-color: var(--valido); }
.peldano-fila--ultimo { border-left-color: var(--acento); }
.peldano-fila--ultimo.peldano-fila--presente { border-left-color: var(--valido); }
.peldano-fila__valor {
  font-family: var(--f-cond); font-weight: 700; font-size: var(--t-m); line-height: 1.15;
}
.peldano-fila__n {
  font-family: var(--f-mono); font-size: 0.62rem; letter-spacing: .1em;
  color: var(--crema-apag); display: block;
}

/* ---------------------------------------------------------------
   DIÁLOGO — Catálisis Dramática y formularios a pantalla completa
   --------------------------------------------------------------- */
.dialogo-velo { position: fixed; inset: 0; z-index: 70; background: rgba(0, 0, 0, .82); }
.dialogo {
  position: fixed; z-index: 75;
  inset: auto 0 0 0;                /* móvil: hoja inferior */
  max-height: 92vh; overflow-y: auto;
  background: var(--negro);
  border-top: var(--filete-grueso) solid var(--acento);
  padding: var(--e-5) var(--gutter) var(--e-7);
}
@media (min-width: 760px) {
  .dialogo {
    inset: 50% auto auto 50%;
    transform: translate(-50%, -50%);
    width: min(660px, calc(100vw - 64px));
    max-height: 86vh;
    border: var(--filete) solid var(--negro-filete);
    border-top: var(--filete-grueso) solid var(--acento);
  }
}
.dialogo__cabeza {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: var(--e-3); margin-bottom: var(--e-4);
}
.dialogo__titulo { font-family: var(--f-display); font-size: var(--t-xl); text-transform: uppercase; line-height: .95; margin: 0; }
.dialogo__pie {
  display: flex; gap: var(--e-3); flex-wrap: wrap;
  margin-top: var(--e-6); padding-top: var(--e-4);
  border-top: var(--filete) solid var(--negro-filete);
}
.dialogo__pie .btn { flex: 1 1 160px; }

/* pregunta fija de la catálisis dramática */
.pregunta-fija {
  background: var(--acento-prof); color: var(--crema);
  padding: var(--e-3) var(--e-4); margin-bottom: var(--e-4);
  font-family: var(--f-cond); font-weight: 700; font-size: var(--t-m); line-height: 1.3;
}

/* ---------------------------------------------------------------
   Aviso de modo táctil
   --------------------------------------------------------------- */
.modo-aviso {
  display: flex; gap: var(--e-3); align-items: center; justify-content: space-between;
  flex-wrap: wrap; padding: var(--e-2) var(--e-3);
  border: var(--filete) dashed var(--negro-filete); margin-bottom: var(--e-3);
}
.modo-aviso p { font-size: var(--t-xs); color: var(--crema-apag); margin: 0; }