/* =====================================================================
   GAMIFICADOS EXCLUSIVOS · Escuela Psique Académica
   gamificados.css — estilos de los 6 componentes que se enchufan en el
   slot `escuela:gamificado-mount` del motor (sesion.js/sesion.css).
   Hereda paleta/fonts/radios de sesion.css (--navy/--gold/--coral/--verde/
   --rojo/--azul-info, --radius, --f-display/--f-ui/--f-mono). Cero CDN.
   ===================================================================== */

.esg-wrap{ display:flex; flex-direction:column; gap:16px; }
.esg-consigna{
  font-size:.94rem;
  color: color-mix(in srgb, var(--navy) 70%, transparent);
  margin: 0 0 4px;
}
.esg-toolbar{
  display:flex; flex-wrap:wrap; align-items:center; gap:10px;
  justify-content: space-between;
}
.esg-toolbar__grupo{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.esg-badge{
  font-family: var(--f-mono); font-size:.72rem; text-transform:uppercase; letter-spacing:.05em;
  background: color-mix(in srgb, var(--navy) 8%, transparent);
  color: color-mix(in srgb, var(--navy) 75%, transparent);
  border-radius:999px; padding:4px 10px;
}
.esg-record{
  font-family: var(--f-mono); font-size:.78rem; font-weight:700;
  color: var(--gold);
  background: color-mix(in srgb, var(--gold) 10%, transparent);
  border-radius:999px; padding:5px 12px;
  display:inline-flex; align-items:center; gap:5px;
}
.esg-score{
  font-family: var(--f-mono); font-weight:800; font-size:1.4rem; color:var(--navy);
}
.esg-score__label{ font-size:.68rem; text-transform:uppercase; letter-spacing:.06em; font-weight:600; color: color-mix(in srgb, var(--navy) 55%, transparent); display:block; }
.esg-combo{
  font-family: var(--f-mono); font-weight:800; color: var(--coral); font-size:.95rem;
}
.esg-hint-btn{
  font-family: var(--f-ui); font-size:.82rem;
}
.esg-hint-btn[disabled]{ opacity:.35; pointer-events:none; }
.esg-hint-texto{
  margin-top:10px; font-size:.88rem; font-style:italic;
  background: color-mix(in srgb, var(--azul-info) 8%, transparent);
  border-left: 3px solid var(--azul-info);
  padding: 8px 12px; border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.esg-cerrar-resultado{ text-align:center; padding: 18px 10px; }
.esg-cerrar-resultado__titulo{ font-family: var(--f-display); font-weight:800; font-size:1.35rem; color:var(--navy); margin:0 0 8px; }
.esg-cerrar-resultado__detalle{ font-family: var(--f-mono); font-size:.9rem; color: color-mix(in srgb, var(--navy) 65%, transparent); }
.esg-btn-completar{ margin-top:16px; }

/* ===================== 🧩 CONSTRUCTOR ===================== */
.esg-ctor{ position:relative; }
.esg-ctor-lienzo{
  position:relative;
  min-height: 230px;
  border-radius: var(--radius-sm);
  border: 1.5px dashed color-mix(in srgb, var(--navy) 20%, transparent);
  padding: 22px;
  display:flex; flex-wrap:wrap; align-content:flex-start; gap:14px 18px;
  background: color-mix(in srgb, var(--navy) 3%, transparent);
  touch-action: none;
}
.esg-ctor-lienzo.esg-ilumina{
  background: color-mix(in srgb, var(--gold) 12%, transparent);
  border-color: var(--gold); border-style: solid;
  transition: background .6s ease, border-color .6s ease;
}
.esg-ctor-svg{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; overflow:visible; }
.esg-ctor-svg line{ stroke: var(--verde); stroke-width:3; stroke-linecap:round; }
.esg-ctor-svg line.esg-linea-temp{ stroke: var(--coral); stroke-dasharray:6 5; }
.esg-ctor-nodo{
  position:relative; z-index:2;
  font-family: var(--f-ui); font-weight:700; font-size:.92rem;
  background:#fff; color:var(--navy);
  border: 2px solid rgba(30,42,74,.18);
  border-radius: 999px;
  padding: 10px 16px;
  cursor:pointer;
  user-select:none;
  transition: transform .12s, border-color .12s, box-shadow .12s, background .2s;
}
.esg-ctor-nodo:hover{ border-color: var(--coral); transform: translateY(-1px); }
.esg-ctor-nodo[aria-pressed="true"]{ border-color: var(--azul-info); background: color-mix(in srgb, var(--azul-info) 12%, transparent); box-shadow:0 0 0 3px color-mix(in srgb, var(--azul-info) 25%, transparent); }
.esg-ctor-nodo.esg-nodo-hint{ animation: esg-pulso-nodo 1s ease-in-out 2; border-color: var(--gold); }
.esg-ctor-nodo.esg-nodo-completo{ background: color-mix(in srgb, var(--verde) 12%, transparent); border-color: var(--verde); }
@keyframes esg-pulso-nodo{ 0%,100%{ box-shadow:0 0 0 0 rgba(201,162,39,.6);} 50%{ box-shadow:0 0 0 10px rgba(201,162,39,0);} }
.esg-ctor-pista{
  margin-top:12px; font-size:.88rem; color: var(--coral); font-style:italic;
  background: color-mix(in srgb, var(--coral) 8%, transparent);
  border-left: 3px solid var(--coral);
  padding: 8px 12px; border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

/* ===================== 🕵️ CAZA-TRAMPAS ===================== */
.esg-caza-ronda-badge{ display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; }
.esg-caza-parrafo{
  font-size:1.02rem; line-height:1.7;
  background:#fff; border:1.5px solid rgba(30,42,74,.1);
  border-radius: var(--radius-sm); padding:16px 18px;
}
.esg-caza-frase{
  border-radius:4px; padding:1px 3px;
  border:none; background:transparent;
  font: inherit; color: inherit;
  cursor:pointer;
  transition: background .15s;
}
.esg-caza-frase:hover:not([disabled]){ background: color-mix(in srgb, var(--coral) 14%, transparent); }
.esg-caza-frase[aria-pressed="true"]{ background: color-mix(in srgb, var(--azul-info) 18%, transparent); text-decoration: underline wavy var(--azul-info); }
.esg-caza-frase.esg-frase-correcta{ background: color-mix(in srgb, var(--verde) 22%, transparent); font-weight:700; }
.esg-caza-frase.esg-frase-incorrecta-elegida{ background: color-mix(in srgb, var(--rojo) 22%, transparent); text-decoration: line-through; }
.esg-caza-porque{ margin-top:14px; display:flex; flex-direction:column; gap:8px; }
.esg-caza-explicacion{
  margin-top:14px; font-size:.92rem;
  border-left:4px solid var(--gold);
  background: color-mix(in srgb, var(--gold) 7%, transparent);
  padding:10px 14px; border-radius:0 var(--radius-sm) var(--radius-sm) 0;
}
.esg-caza-cayo-parcial{
  display:inline-block; margin-top:8px;
  font-family: var(--f-mono); font-size:.72rem; text-transform:uppercase; letter-spacing:.05em;
  color: var(--rojo); background: color-mix(in srgb, var(--rojo) 10%, transparent);
  border-radius:999px; padding:3px 9px;
}

/* ===================== ⏳ LÍNEA VIVA ===================== */
.esg-linea-lista{ display:flex; flex-direction:column; gap:10px; list-style:none; margin:0; padding:0; }
.esg-linea-card{
  display:flex; align-items:center; gap:10px;
  background:#fff; border:1.5px solid rgba(30,42,74,.14);
  border-radius: var(--radius-sm); padding:12px 14px;
  transition: border-color .15s, background .15s, transform .12s;
}
.esg-linea-card[draggable="true"]{ cursor:grab; }
.esg-linea-card.esg-arrastrando{ opacity:.4; }
.esg-linea-card.esg-dragover{ border-color: var(--azul-info); box-shadow: 0 0 0 3px color-mix(in srgb, var(--azul-info) 20%, transparent); }
.esg-linea-card.esg-correcta{ border-color: var(--verde); background: color-mix(in srgb, var(--verde) 7%, transparent); }
.esg-linea-card.esg-incorrecta{ border-color: var(--rojo); background: color-mix(in srgb, var(--rojo) 6%, transparent); }
.esg-linea-card__num{
  flex-shrink:0; width:26px; height:26px; border-radius:999px;
  background: color-mix(in srgb, var(--navy) 8%, transparent);
  display:flex; align-items:center; justify-content:center;
  font-family: var(--f-mono); font-weight:700; font-size:.8rem;
}
.esg-linea-card__texto{ flex:1; }
.esg-linea-card__botones{ display:flex; flex-direction:column; gap:2px; }
.esg-linea-btn-mini{
  width:28px; height:22px; border-radius:6px; border:1px solid rgba(30,42,74,.2);
  background:#fff; font-size:.72rem; line-height:1; display:flex; align-items:center; justify-content:center;
}
.esg-linea-btn-mini:hover{ border-color: var(--coral); }
.esg-linea-btn-mini[disabled]{ opacity:.3; pointer-events:none; }
.esg-linea-bono{
  margin-top:6px; font-size:.85rem; font-style:italic;
  color: color-mix(in srgb, var(--gold) 80%, var(--navy) 20%);
}
.esg-linea-recorrido{ display:flex; flex-direction:column; gap:8px; margin-top:6px; }

/* ===================== ✍️ DICTADO ===================== */
.esg-dictado-progreso{ font-family: var(--f-mono); font-size:.8rem; color: color-mix(in srgb, var(--navy) 55%, transparent); margin-bottom:8px; }
.esg-dictado-frase{ font-size:1.05rem; line-height:1.7; }
.esg-dictado-input{
  font: inherit; font-size:1rem; font-weight:700; text-align:center;
  border: 2px solid rgba(30,42,74,.25);
  border-radius: 8px; padding: 4px 10px; width: 160px; max-width:60vw;
  background:#fff; color:var(--navy);
}
.esg-dictado-input:focus{ outline:none; border-color: var(--azul-info); }
.esg-dictado-input.esg-input-correcto{ border-color: var(--verde); background: color-mix(in srgb, var(--verde) 10%, transparent); }
.esg-dictado-input.esg-input-incorrecto{ border-color: var(--rojo); background: color-mix(in srgb, var(--rojo) 8%, transparent); }
.esg-dictado-acciones{ display:flex; gap:10px; margin-top:14px; flex-wrap:wrap; align-items:center; }
.esg-dictado-intentos{ font-family: var(--f-mono); font-size:.78rem; color: var(--coral); }
.esg-dictado-fallback{
  margin-top:10px; background: color-mix(in srgb, var(--gold) 8%, transparent);
  border-radius: var(--radius-sm); padding:12px 14px; font-size:.95rem;
}
.esg-dictado-fallback mark{ background: color-mix(in srgb, var(--gold) 40%, transparent); border-radius:3px; padding:0 3px; }
.esg-dictado-respuesta-correcta{ margin-top:10px; font-size:.92rem; color: var(--verde); font-weight:700; }

/* ===================== ⚡ RELÁMPAGO ===================== */
.esg-relampago-top{ display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:10px; }
.esg-relampago-modo{ display:flex; align-items:center; gap:8px; font-size:.85rem; }
.esg-relampago-timerbar-wrap{
  height:8px; border-radius:999px; background: color-mix(in srgb, var(--navy) 8%, transparent); overflow:hidden; margin-bottom:14px;
}
.esg-relampago-timerbar{ height:100%; background: var(--coral); width:100%; transition: width .2s linear, background .3s; }
.esg-relampago-timerbar.esg-tiempo-critico{ background: var(--rojo); }
.esg-relampago-multiplicador{
  font-family: var(--f-mono); font-weight:800; font-size:.95rem; color: var(--gold);
  background: color-mix(in srgb, var(--gold) 12%, transparent); border-radius:999px; padding:4px 12px;
}
.esg-relampago-toggle-btn{ font-size:.78rem; }
.esg-relampago-desglose{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin: 16px 0; }
.esg-relampago-stat{ text-align:center; min-width:90px; }
.esg-relampago-stat b{ display:block; font-family: var(--f-mono); font-size:1.3rem; color:var(--navy); }
.esg-relampago-stat span{ font-size:.72rem; text-transform:uppercase; letter-spacing:.05em; color: color-mix(in srgb, var(--navy) 55%, transparent); }
.esg-relampago-historial{ font-size:.88rem; color: color-mix(in srgb, var(--navy) 65%, transparent); margin-top:6px; }
.esg-tiempo-agotado{ color: var(--rojo); font-weight:700; }

/* ===================== 🪜 ESCALERA ===================== */
.esg-escalera-layout{ display:flex; gap:18px; align-items:flex-start; }
.esg-escalera-visual{
  display:flex; flex-direction:column-reverse; gap:4px;
  flex-shrink:0; width: 46px;
}
.esg-escalera-peldano-mini{
  height:20px; border-radius:5px;
  background: color-mix(in srgb, var(--navy) 8%, transparent);
  display:flex; align-items:center; justify-content:center;
  font-family: var(--f-mono); font-size:.62rem; font-weight:700;
  color: color-mix(in srgb, var(--navy) 45%, transparent);
  transition: background .3s, color .3s;
}
.esg-escalera-peldano-mini.esg-superado{ background: color-mix(in srgb, var(--verde) 35%, transparent); color: var(--navy); }
.esg-escalera-peldano-mini.esg-actual{ background: var(--gold); color:#fff; box-shadow:0 0 0 2px color-mix(in srgb, var(--gold) 45%, transparent); }
.esg-escalera-peldano-mini.esg-record-marca{ outline:2px dashed var(--coral); outline-offset:1px; }
.esg-escalera-cuerpo{ flex:1; min-width:0; }
.esg-escalera-nivel-badge{
  font-family: var(--f-mono); font-size:.72rem; text-transform:uppercase; letter-spacing:.05em;
  padding:3px 10px; border-radius:999px; display:inline-block; margin-bottom:8px;
}
.esg-escalera-nivel-badge.facil{ background: color-mix(in srgb, var(--verde) 15%, transparent); color: var(--verde); }
.esg-escalera-nivel-badge.media{ background: color-mix(in srgb, var(--gold) 15%, transparent); color: var(--gold); }
.esg-escalera-nivel-badge.dificil{ background: color-mix(in srgb, var(--rojo) 15%, transparent); color: var(--rojo); }
.esg-escalera-explicacion{
  margin-top:12px; font-size:.9rem;
  border-left:4px solid var(--azul-info);
  background: color-mix(in srgb, var(--azul-info) 7%, transparent);
  padding:10px 14px; border-radius:0 var(--radius-sm) var(--radius-sm) 0;
}
.esg-escalera-repasar{
  margin-top:12px; display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  background: color-mix(in srgb, var(--rojo) 6%, transparent);
  border: 1px solid color-mix(in srgb, var(--rojo) 25%, transparent);
  border-radius: var(--radius-sm); padding:10px 14px;
}
.esg-escalera-cima{ text-align:center; padding:14px 0; }

/* ===================== ORDERING / FLASHCARD (mecánicas rotables núcleo) ===================== */
.esgn-ordering-lista{ display:flex; flex-direction:column; gap:8px; list-style:none; margin:10px 0 0; padding:0; }
.esgn-ordering-item{
  display:flex; align-items:center; gap:10px;
  background:#fff; border:1.5px solid rgba(30,42,74,.14); border-radius:var(--radius-sm); padding:10px 12px;
}
.esgn-ordering-item[draggable="true"]{ cursor:grab; }
.esgn-flashcard{
  border-radius: var(--radius-sm);
  border: 1.5px solid rgba(30,42,74,.14);
  padding: 26px 20px; text-align:center; cursor:pointer; min-height:110px;
  display:flex; align-items:center; justify-content:center;
  background:#fff;
}
.esgn-flashcard__cara{ font-size:1.05rem; font-weight:600; }
.esgn-flashcard.esgn-volteada{ background: color-mix(in srgb, var(--navy) 4%, transparent); }
.esgn-flashcard-honestidad{ display:flex; gap:10px; justify-content:center; margin-top:14px; }

/* ===================== JUICE local (fallback si el motor no expone synth/juice) ===================== */
.esg-shake{ animation: esg-shake .4s; }
@keyframes esg-shake{ 10%,90%{transform:translateX(-2px);} 20%,80%{transform:translateX(3px);} 30%,50%,70%{transform:translateX(-5px);} 40%,60%{transform:translateX(5px);} }

/* ===================== REDUCED MOTION ===================== */
@media (prefers-reduced-motion: reduce), (prefers-reduced-motion){
  .esg-ctor-nodo.esg-nodo-hint{ animation:none; outline:2px dashed var(--gold); }
  .esg-shake{ animation:none; }
}
.es-no-motion .esg-ctor-nodo.esg-nodo-hint{ animation:none; outline:2px dashed var(--gold); }
.es-no-motion .esg-shake{ animation:none; }

/* ===================== MÓVIL ===================== */
@media (max-width:480px){
  .esg-ctor-lienzo{ padding:16px; gap:10px 12px; }
  .esg-ctor-nodo{ font-size:.84rem; padding:8px 12px; }
  .esg-escalera-layout{ gap:10px; }
  .esg-escalera-visual{ width:34px; }
  .esg-escalera-peldano-mini{ height:16px; font-size:.55rem; }
  .esg-dictado-input{ width:120px; }
}

/* =====================================================================
   ALTO CONTRASTE — html.hc (mismo canon que sesion.css: negro puro +
   bordes blancos 2px + texto full-opacity + feedback vivo con !important)
   ===================================================================== */
html.hc .esg-consigna{ color:#fff !important; opacity:.9; }
html.hc .esg-badge, html.hc .esg-record{ background:#000 !important; border:2px solid #FFD84D !important; color:#FFD84D !important; }
html.hc .esg-score, html.hc .esg-score__label, html.hc .esg-cerrar-resultado__titulo, html.hc .esg-cerrar-resultado__detalle,
html.hc .esg-dictado-progreso, html.hc .esg-linea-card__texto, html.hc .esg-linea-card__num,
html.hc .esgn-ordering-item .esg-linea-card__texto, html.hc .esgn-ordering-item .esg-linea-card__num{ color:#fff !important; }
html.hc .esg-score{ color:#fff !important; }
html.hc .esg-combo{ color:#FF9A6B !important; }
html.hc .esg-hint-texto{ background:#000 !important; border:2px solid #7FB8FF !important; color:#7FB8FF !important; }

html.hc .esg-ctor-lienzo{ background:#000 !important; border:2px dashed #fff !important; }
html.hc .esg-ctor-lienzo.esg-ilumina{ border-color:#FFD84D !important; }
html.hc .esg-ctor-nodo{ background:#000 !important; color:#fff !important; border:2px solid #fff !important; }
html.hc .esg-ctor-nodo[aria-pressed="true"]{ border-color:#7FB8FF !important; background:#000 !important; box-shadow:none !important; }
html.hc .esg-ctor-nodo.esg-nodo-completo{ border-color:#5CE28A !important; color:#5CE28A !important; }
html.hc .esg-ctor-svg line{ stroke:#5CE28A !important; }
html.hc .esg-ctor-svg line.esg-linea-temp{ stroke:#FF9A6B !important; }
html.hc .esg-ctor-pista{ background:#000 !important; border-color:#FF9A6B !important; color:#FF9A6B !important; }

html.hc .esg-caza-parrafo{ background:#000 !important; color:#fff !important; border:2px solid #fff !important; }
html.hc .esg-caza-frase[aria-pressed="true"]{ background:#000 !important; color:#7FB8FF !important; }
html.hc .esg-caza-frase.esg-frase-correcta{ background:#000 !important; color:#5CE28A !important; }
html.hc .esg-caza-frase.esg-frase-incorrecta-elegida{ background:#000 !important; color:#FF6B6B !important; }
html.hc .esg-caza-explicacion{ background:#000 !important; border-color:#FFD84D !important; color:#fff !important; }

html.hc .esg-linea-card{ background:#000 !important; color:#fff !important; border:2px solid #fff !important; }
html.hc .esg-linea-card.esg-correcta{ border-color:#5CE28A !important; color:#5CE28A !important; }
html.hc .esg-linea-card.esg-incorrecta{ border-color:#FF6B6B !important; color:#FF6B6B !important; }
html.hc .esg-linea-card__num{ background:#fff !important; color:#000 !important; }
html.hc .esg-linea-btn-mini{ background:#000 !important; color:#fff !important; border:2px solid #fff !important; }

html.hc .esg-dictado-input{ background:#000 !important; color:#fff !important; border:2px solid #fff !important; }
html.hc .esg-dictado-input.esg-input-correcto{ border-color:#5CE28A !important; color:#5CE28A !important; }
html.hc .esg-dictado-input.esg-input-incorrecto{ border-color:#FF6B6B !important; color:#FF6B6B !important; }
html.hc .esg-dictado-fallback{ background:#000 !important; border:2px solid #FFD84D !important; color:#fff !important; }

html.hc .esg-relampago-timerbar-wrap{ background:#000 !important; border:2px solid #fff !important; }
html.hc .esg-relampago-timerbar{ background:#FF9A6B !important; }
html.hc .esg-relampago-multiplicador{ background:#000 !important; border:2px solid #FFD84D !important; color:#FFD84D !important; }

html.hc .esg-escalera-peldano-mini{ background:#000 !important; border:1px solid #fff !important; color:#fff !important; }
html.hc .esg-escalera-peldano-mini.esg-superado{ background:#000 !important; color:#5CE28A !important; border-color:#5CE28A !important; }
html.hc .esg-escalera-peldano-mini.esg-actual{ background:#FFD84D !important; color:#000 !important; }
html.hc .esg-escalera-explicacion{ background:#000 !important; border-color:#7FB8FF !important; color:#fff !important; }
html.hc .esg-escalera-repasar{ background:#000 !important; border-color:#FF6B6B !important; color:#fff !important; }

html.hc .esgn-ordering-item{ background:#000 !important; color:#fff !important; border:2px solid #fff !important; }
html.hc .esgn-flashcard{ background:#000 !important; color:#fff !important; border:2px solid #fff !important; }
html.hc .esgn-flashcard.esgn-volteada{ background:#000 !important; }