/* ============================================================
   Octopus Lux — capa pedagógica (opt-in)
   Se carga DESPUÉS de ol-site-unify.css solo en páginas
   educativas. Reintroduce color con intención didáctica
   (distinguir, guiar la atención, separar elementos),
   manteniendo la identidad visual de la marca.
   El color aquí es semántico, no decorativo.
   ============================================================ */
:root {
  --edu-red:    #DC2626;
  --edu-amber:  #D97706;
  --edu-green:  #16A34A;
  --edu-blue:   #2563EB;
  --edu-purple: #7C3AED;
  --edu-orange: #EA580C;
  --edu-teal:   #0891B2;
  --edu-pink:   #DB2777;
}

/* ── NÚMEROS ────────────────────────────────────────────────
   Las tarjetas ya traen fondo de color (clases ng0…ng10): el
   color pedagógico lo aporta el fondo. El dígito va en blanco
   con sombra sutil para máxima legibilidad sobre cualquier
   tono, y la palabra/puntos también en blanco para contraste. */
.num-tile .num-big {
  color: #FFFFFF !important;
  font-weight: 800;
  text-shadow: 0 2px 6px rgba(0,0,0,0.28), 0 1px 1px rgba(0,0,0,0.20);
}
.num-tile .num-word {
  color: #FFFFFF !important;
  text-shadow: 0 1px 3px rgba(0,0,0,0.22);
}
.num-tile .num-dots { color: rgba(255,255,255,0.92) !important; }

/* ── VOCALES: un color fijo por vocal (constancia perceptiva) ─ */
.vc-a .vocal-ltr { color: var(--edu-red)    !important; }
.vc-e .vocal-ltr { color: var(--edu-amber)  !important; }
.vc-i .vocal-ltr { color: var(--edu-green)  !important; }
.vc-o .vocal-ltr { color: var(--edu-blue)   !important; }
.vc-u .vocal-ltr { color: var(--edu-purple) !important; }
.vocal-card .vocal-ltr { font-weight: 800; }
/* borde sutil del color de cada vocal para enmarcar sin saturar */
.vc-a { border-color: rgba(220,38,38,0.28)  !important; }
.vc-e { border-color: rgba(217,119,6,0.28)  !important; }
.vc-i { border-color: rgba(22,163,74,0.28)  !important; }
.vc-o { border-color: rgba(37,99,235,0.28)  !important; }
.vc-u { border-color: rgba(124,58,237,0.28) !important; }

/* ── PANELES INTERNOS DE APPS DE OPERACIONES ─────────────────
   Estas apps venían de un tema oscuro; al unificar a claro, los
   paneles del ejercicio quedaron blancos sobre la tarjeta blanca
   (sin separación). Les damos una superficie suave + borde, como
   las superficies #F8FAFC del index, para que el ejercicio resalte
   como un panel dentro de la tarjeta. */
.problem-display,
.visual-area,
.operacion-box,
.steps-box,
.instructions-box,
.instrucciones-box,
.score-display {
  background: var(--surface-2, #F8FAFC) !important;
  border: 1px solid var(--ol-border, rgba(37,99,235,0.12)) !important;
  box-shadow: none !important;
}

/* Rellenos que usaban var(--ol-text) como color "claro" del tema
   oscuro y ahora salen oscuros: platos de división y carátula del
   reloj. Se devuelven a blanco (la imagen del reloj queda encima). */
.plate { background: #FFFFFF !important; }
.clock { background-color: #FFFFFF !important; }

/* ── FRACCIONES: conectar la cifra con la figura ─────────────
   Numerador = color de las porciones que se "toman" (pintadas);
   denominador = total, en tono neutro. Así el niño asocia
   "partes tomadas / partes totales" con lo que ve en la pizza.
   Los valores de los sliders siguen el mismo código de color. */
#ex-num,
.slider-group:has(#sl-num) .slider-val {
  color: var(--c-painted, var(--edu-red)) !important;
}
#ex-den,
.slider-group:has(#sl-den) .slider-val {
  color: var(--edu-blue) !important;
}
.frac-barra { background: var(--ol-text, #111827) !important; opacity: 0.55; }

/* ── VALORES NUMÉRICOS DESTACADOS (estadísticas, marcador) ────
   El número que importa se realza en teal de marca. Antes iban
   en amarillo sobre fondo claro (poco legible). */
.stat-number,
.score-value,
.stat-percentage .stat-value { color: var(--edu-teal) !important; font-weight: 800; }

/* ── PASOS DE RESOLUCIÓN: resaltar el dato clave de cada paso ──
   El énfasis (<strong>) iba en amarillo ilegible; ahora ámbar
   de marca, que lee como "subrayado" y guía la atención. */
.step-item strong,
.paso-item strong { color: var(--edu-amber) !important; }

/* ── FEEDBACK correcto / incorrecto: verde y rojo de marca ────
   Refuerza la señal acierto/error de forma consistente. */
.feedback-success, .feedback-good,
.stat-success .stat-value   { color: var(--edu-green) !important; }
.feedback-error, .feedback-bad,
.stat-error .stat-value     { color: var(--edu-red)   !important; }