/* =====================================================================
   MAKKI — Estilos propios de los modulos.
   Fase 2: Modulo 1 (triangulo narrativo + asistente de Idea Controladora).
   ===================================================================== */

/* ---------------------------------------------------------------
   Cabecera de modulo: titular tipo cartel + pregunta que responde
   --------------------------------------------------------------- */
.mod-cabecera { border-top: var(--filete-grueso) solid var(--acento); padding-top: var(--e-4); margin-bottom: var(--e-5); }
.mod-cabecera__meta { display: flex; justify-content: space-between; gap: var(--e-3); flex-wrap: wrap; margin-bottom: var(--e-2); }
.mod-cabecera__titulo { font-size: var(--t-cartel); line-height: .86; margin: 0 0 var(--e-3); }
.mod-cabecera__pregunta { font-family: var(--f-cond); font-size: var(--t-l); color: var(--acento); text-transform: uppercase; letter-spacing: .02em; font-weight: 700; max-width: 24ch; }

/* Paginacion por etapas dentro de un modulo */
.etapas { display: flex; gap: 0; border: var(--filete) solid var(--negro-filete); margin-bottom: var(--e-5); overflow-x: auto; }
.etapa {
  flex: 1 0 auto; min-width: 96px; min-height: var(--alto-toque);
  padding: var(--e-2) var(--e-3);
  background: var(--negro); color: var(--crema-apag);
  border: 0; border-right: var(--filete) solid var(--negro-filete);
  font-family: var(--f-cond); font-weight: 700; font-size: var(--t-xs);
  letter-spacing: .1em; text-transform: uppercase; cursor: pointer; text-align: left;
}
.etapa:last-child { border-right: 0; }
.etapa--actual { background: var(--crema); color: var(--negro); }
.etapa--hecha { color: var(--acento); }
.etapa__n { display: block; font-family: var(--f-mono); font-size: .6rem; opacity: .7; }

/* ---------------------------------------------------------------
   TRIÁNGULO NARRATIVO (Modulo 1, componente 1)
   --------------------------------------------------------------- */
.triangulo-zona { display: grid; gap: var(--e-4); grid-template-columns: 1fr; }
@media (min-width: 1000px) { .triangulo-zona { grid-template-columns: minmax(0,1fr) 340px; align-items: start; } }

.triangulo-marco {
  position: relative;
  background: var(--negro-elev);
  border: var(--filete) solid var(--negro-filete);
  padding: var(--e-4);
  touch-action: none;          /* el pin se arrastra sin que la pagina haga scroll */
}
/* touch-action tambien en el propio svg: algunos motores no lo heredan del marco */
.triangulo { display: block; width: 100%; height: auto; max-width: 100%; touch-action: none; }

.tri-lado { fill: none; stroke: var(--negro-filete); stroke-width: 1.6; }
.tri-relleno { fill: #060606; }
.tri-malla { stroke: #1a1918; stroke-width: .7; }

.tri-vertice-pto { fill: var(--acento); }
.tri-vertice-txt {
  font-family: "Anton", "Arial Narrow", Impact, sans-serif;
  fill: var(--crema); text-transform: uppercase;
  font-size: 5.6px; letter-spacing: .04em;
}
.tri-vertice-sub {
  font-family: "Barlow Condensed", "Arial Narrow", sans-serif;
  fill: var(--crema-apag); font-size: 3.4px;
  letter-spacing: .2em; text-transform: uppercase; font-weight: 700;
}

.tri-pin { cursor: grab; }
.tri-pin:active { cursor: grabbing; }
.tri-pin-halo { fill: none; stroke: var(--acento); stroke-width: 1.1; }
.tri-pin-nucleo { fill: var(--crema); stroke: var(--acento); stroke-width: 1.6; }
.tri-pin-guia { stroke: var(--acento); stroke-width: .6; stroke-dasharray: 2 2; opacity: .55; }
.triangulo:focus-visible { outline: var(--filete-grueso) solid var(--acento); outline-offset: 3px; }

/* Lectura numerica del vertice, y alternativa 100 % accesible por teclado */
.vertice-lectura { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--e-2); margin-top: var(--e-4); }
.vertice-dato { border-top: var(--filete) solid var(--acento); padding-top: var(--e-2); }
.vertice-dato__cifra { font-family: var(--f-display); font-size: var(--t-xl); line-height: 1; }
.vertice-dato__etq { font-family: var(--f-cond); font-size: var(--t-meta); letter-spacing: var(--ls-meta); text-transform: uppercase; color: var(--crema-apag); display: block; }

.deslizadores { margin-top: var(--e-4); }
.deslizador { margin-bottom: var(--e-3); }
.deslizador input[type="range"] { width: 100%; accent-color: var(--acento); min-height: 32px; }

/* Reglas desbloqueadas por la posicion del pin */
.reglas { border: var(--filete) solid var(--negro-filete); }
.regla {
  display: flex; gap: var(--e-3); align-items: flex-start;
  padding: var(--e-3);
  border-bottom: 1px solid var(--negro-filete);
  font-size: var(--t-s);
}
.regla:last-child { border-bottom: 0; }
.regla__estado { flex: none; width: 18px; text-align: center; font-family: var(--f-cond); font-weight: 700; }
.regla--activa .regla__estado { color: var(--acento); }
.regla--inactiva .regla__estado { color: var(--crema-apag); }
.regla--inactiva { color: var(--crema-apag); }
.regla__nombre { font-family: var(--f-cond); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; font-size: var(--t-xs); display: block; }
.regla__modulos { font-family: var(--f-mono); font-size: .62rem; letter-spacing: .1em; color: var(--crema-apag); }

/* ---------------------------------------------------------------
   MATRIZ DE VALORES HUMANOS (Modulo 1, paso 1 del asistente)
   --------------------------------------------------------------- */
.matriz-valores { display: grid; gap: var(--e-2); grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.valor-tarjeta {
  padding: var(--e-3);
  border: var(--filete) solid var(--negro-filete);
  background: var(--negro-elev);
  color: var(--crema);
  text-align: left; cursor: pointer; font: inherit;
  min-height: 88px;
  display: flex; flex-direction: column; justify-content: space-between; gap: var(--e-2);
  transition: background var(--trans), border-color var(--trans), color var(--trans);
}
.valor-tarjeta:hover:not(.valor-tarjeta--elegida) { border-color: var(--crema); }
.valor-tarjeta__nombre { font-family: var(--f-display); font-size: var(--t-l); text-transform: uppercase; line-height: .95; }
.valor-tarjeta__escala { font-family: var(--f-mono); font-size: .62rem; color: var(--crema-apag); letter-spacing: .02em; }
.valor-tarjeta--elegida { background: var(--acento); border-color: var(--acento); color: var(--crema); }
.valor-tarjeta--elegida .valor-tarjeta__escala { color: rgba(244,239,230,.85); }

/* Escala de negatividad, precargada para el Modulo 2 */
.escala-neg { display: grid; gap: var(--e-2); grid-template-columns: 1fr; margin-top: var(--e-4); }
@media (min-width: 720px) { .escala-neg { grid-template-columns: repeat(4, 1fr); } }
.peldano { padding: var(--e-3); border-top: var(--filete-grueso) solid; }
.peldano__etq { font-family: var(--f-cond); font-size: var(--t-meta); letter-spacing: var(--ls-meta); text-transform: uppercase; display: block; margin-bottom: var(--e-1); }
.peldano__valor { font-family: var(--f-cond); font-weight: 700; font-size: var(--t-m); line-height: 1.2; }
.peldano--1 { border-top-color: var(--valido); }
.peldano--2 { border-top-color: var(--ambar); }
.peldano--3 { border-top-color: var(--acento); }
.peldano--4 { border-top-color: var(--crema); }

/* ---------------------------------------------------------------
   POLARIDAD Y MOTOR DE CAUSAS (pasos 2 y 3)
   --------------------------------------------------------------- */
.polaridades { display: grid; gap: var(--e-3); grid-template-columns: 1fr; }
@media (min-width: 760px) { .polaridades { grid-template-columns: repeat(3, 1fr); } }
.polaridad {
  padding: var(--e-4); border: var(--filete) solid var(--negro-filete);
  background: var(--negro-elev); color: var(--crema);
  text-align: left; cursor: pointer; font: inherit;
  display: flex; flex-direction: column; gap: var(--e-2);
}
.polaridad:hover:not(.polaridad--elegida) { border-color: var(--crema); }
.polaridad--elegida { background: var(--crema); color: var(--negro); border-color: var(--crema); }
.polaridad__signo { font-family: var(--f-display); font-size: var(--t-xxl); line-height: .8; }
.polaridad__nombre { font-family: var(--f-cond); font-weight: 700; text-transform: uppercase; letter-spacing: .1em; font-size: var(--t-s); }
.polaridad__desc { font-size: var(--t-xs); color: var(--crema-apag); }
.polaridad--elegida .polaridad__desc { color: rgba(0,0,0,.68); }

.causa { border-left: var(--filete-grueso) solid var(--negro-filete); padding-left: var(--e-4); margin-bottom: var(--e-5); }
.causa--respondida { border-left-color: var(--acento); }
.causa__pregunta { font-family: var(--f-cond); font-weight: 700; font-size: var(--t-m); letter-spacing: .01em; margin-bottom: var(--e-2); }

/* Sugerencias automaticas segun la polaridad elegida */
.sugerencias { display: flex; flex-wrap: wrap; gap: var(--e-2); margin-top: var(--e-2); }
.sugerencia {
  padding: var(--e-2) var(--e-3); min-height: 36px;
  border: 1px dashed var(--crema-apag); background: transparent; color: var(--crema-apag);
  font-family: var(--f-cuerpo); font-size: var(--t-xs); cursor: pointer; text-align: left;
}
.sugerencia:hover { border-style: solid; border-color: var(--acento); color: var(--acento); }

/* ---------------------------------------------------------------
   CONTRATO NARRATIVO (ficha de cierre del Modulo 1)
   --------------------------------------------------------------- */
.contrato { background: var(--crema); color: var(--negro); padding: var(--e-5); }
@media (min-width: 720px) { .contrato { padding: var(--e-7); } }
.contrato__sello { display: flex; justify-content: space-between; gap: var(--e-3); flex-wrap: wrap; border-bottom: var(--filete) solid var(--negro); padding-bottom: var(--e-2); margin-bottom: var(--e-5); }
.contrato__idea {
  font-family: var(--f-display); text-transform: uppercase;
  font-size: var(--t-xl); line-height: .98; letter-spacing: var(--ls-cartel);
  margin: 0 0 var(--e-5); max-width: 30ch;
}
.contrato__cifras { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--e-3); border-top: var(--filete) solid var(--negro); padding-top: var(--e-3); }
.contrato__cifra { font-family: var(--f-display); font-size: var(--t-xl); line-height: 1; }
.contrato__cifra-etq { font-family: var(--f-cond); font-size: var(--t-meta); letter-spacing: var(--ls-meta); text-transform: uppercase; color: rgba(0,0,0,.62); display: block; }

/* ---------------------------------------------------------------
   Aviso de modulo pendiente de construir (fases posteriores)
   --------------------------------------------------------------- */
.pendiente { border: var(--filete) dashed var(--negro-filete); padding: var(--e-6) var(--e-4); }
.pendiente__titular { font-family: var(--f-display); font-size: var(--t-xxl); text-transform: uppercase; line-height: .9; margin-bottom: var(--e-3); }
.pendiente__lista { columns: 2; column-gap: var(--e-5); font-size: var(--t-s); }
@media (max-width: 600px) { .pendiente__lista { columns: 1; } }