/* ============================================================
   Aladez — styles.css
   Tokens :root (--ala-*) + componentes. Tema oscuro por defecto
   (vibra videojuego), claro con [data-theme="light"].
   ============================================================ */

@font-face {
  font-family: "Baloo 2";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("/public/fonts/baloo2-var-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/public/fonts/inter-var-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215;
}

:root {
  /* Paleta de marca */
  --ala-ink: #1b1035;
  --ala-violet: #6c4df6;
  --ala-violet-2: #8b6cff;
  --ala-cyan: #2ad4c8;
  --ala-sun: #ffc53d;
  --ala-coral: #ff6b6b;
  --ala-cloud: #f6f4ff;

  /* Tema oscuro (default) */
  --bg: #140b2c;
  --bg-2: #1b1035;
  --panel: rgba(255, 255, 255, 0.05);
  --panel-borde: rgba(255, 255, 255, 0.1);
  --texto: #f6f4ff;
  --texto-2: rgba(246, 244, 255, 0.72);
  --primario: var(--ala-violet);
  --acento: var(--ala-cyan);
  --sombra: 0 14px 40px rgba(0, 0, 0, 0.45);

  /* El fallback de emoji al final hace que 🦉⭐🏆 rendericen aunque la fuente base
     no traiga glifos de color (si no, salen como caja/«?» en algunos sistemas). */
  --emoji: "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji", emoji;
  --display: "Baloo 2", system-ui, sans-serif, var(--emoji);
  --cuerpo: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif, var(--emoji);
  --radio: 18px;
}

[data-theme="light"] {
  --bg: #f6f4ff;
  --bg-2: #ffffff;
  --panel: #ffffff;
  --panel-borde: rgba(27, 16, 53, 0.1);
  --texto: #1b1035;
  --texto-2: rgba(27, 16, 53, 0.66);
  --sombra: 0 14px 36px rgba(27, 16, 53, 0.12);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
/* Barra de scroll con la identidad de Aladez (violeta→cian), en TODA la web y en
   ambos temas. Firefox: scrollbar-color; WebKit: thumb con gradiente de marca. Las
   áreas que ocultan su barra a propósito (mapa, menú móvil) llevan su regla propia,
   más específica → siguen ganando. */
* { scrollbar-width: thin; scrollbar-color: var(--ala-violet) transparent; }
*::-webkit-scrollbar { width: 11px; height: 11px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: linear-gradient(var(--ala-violet), var(--ala-cyan));
  border-radius: 999px;
}
*::-webkit-scrollbar-thumb:hover { background: linear-gradient(var(--ala-violet-2), var(--ala-cyan)); }
*::-webkit-scrollbar-corner { background: transparent; }
body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--cuerpo);
  color: var(--texto);
  background:
    radial-gradient(1100px 700px at 85% -10%, rgba(108, 77, 246, 0.35), transparent 60%),
    radial-gradient(900px 600px at -10% 110%, rgba(42, 212, 200, 0.16), transparent 60%),
    var(--bg);
  background-attachment: fixed;
}
[dir="rtl"] body { text-align: right; }

h1, h2, h3 { font-family: var(--display); line-height: 1.15; margin: 0 0 0.4em; }
p { line-height: 1.6; }
a { color: var(--acento); text-decoration: none; }
a:hover { text-decoration: underline; }
/* Enlaces «bloque» (tarjetas de post/relacionados/rail y el menú del header): SIN
   subrayado en hover — el subrayado global es solo para enlaces de texto en prosa. */
.noticia-card:hover, .sigue-card:hover, .rail-news:hover, .chip-curso:hover,
.mundo:hover, .marca:hover, .amigo-info:hover,
.rail-amigo:hover, .dscale:hover, .dip-card:hover { text-decoration: none; }
img { max-width: 100%; }
button { font-family: inherit; }
/* `hidden` SIEMPRE oculta. Sin esto, cualquier `display: flex/grid` de la clase gana al
   display:none del navegador y lo «oculto» se ve: los botones Ejecutar/Reiniciar seguían
   ahí tras acertar y la tarjeta de liga salía vacía mientras cargaba (2026-09-26). */
[hidden] { display: none !important; }

.contenedor { max-width: 1080px; margin: 0 auto; padding: 0 20px; }

/* ── Botones ── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 0; cursor: pointer; text-decoration: none !important;
  font-weight: 700; font-size: 0.98rem; padding: 0.72em 1.5em;
  border-radius: 999px; color: #fff; font-family: var(--cuerpo);
  background: linear-gradient(90deg, var(--ala-cyan), var(--ala-violet));
  box-shadow: 0 8px 22px rgba(108, 77, 246, 0.4);
  transition: transform 0.15s, filter 0.15s;
}
.btn:hover { transform: translateY(-2px); filter: brightness(1.08); }
.btn:disabled { opacity: 0.55; cursor: not-allowed; transform: none; }
.btn-suave {
  background: var(--panel); color: var(--texto);
  border: 1px solid var(--panel-borde); box-shadow: none;
}
.btn-icono {
  background: var(--panel); border: 1px solid var(--panel-borde); color: var(--texto);
  border-radius: 12px; padding: 8px 10px; cursor: pointer; font-size: 1rem;
  text-decoration: none !important;  /* es un <a>: evita el subrayado global a:hover */
}
.btn-icono:hover { border-color: var(--acento); }
select.selector-idioma {
  background: var(--bg-2); color: var(--texto); border: 1px solid var(--panel-borde);
  border-radius: 12px; padding: 8px 10px; font-family: inherit; cursor: pointer;
}
/* La lista desplegable nativa hereda estos colores sólidos (evita blanco-sobre-blanco). */
select.selector-idioma option { background: var(--bg-2); color: var(--texto); }

/* ── Hero ── */

@keyframes flotar { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }

.chips { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 22px; }
.portada-ia { margin-top: 16px; padding: 8px 14px; border-radius: 999px; border: 1px dashed color-mix(in srgb, var(--acento) 60%, transparent);
  background: color-mix(in srgb, var(--acento) 10%, transparent); color: var(--texto); font: 700 .9rem/1.3 var(--display); cursor: pointer; }
.portada-ia:hover { background: color-mix(in srgb, var(--acento) 18%, transparent); }
.portada-ia:focus-visible { outline: 3px solid var(--acento); outline-offset: 2px; }
#era-ia-t { scroll-margin-top: 150px; }   /* el salto deja ver la pregunta, bajo la cabecera fija */
.ia-mundo { margin: 0 0 14px; padding: 10px 14px; border-radius: 14px; border: 1px solid color-mix(in srgb, var(--color-mundo, var(--acento)) 45%, transparent);
  background: color-mix(in srgb, var(--color-mundo, var(--acento)) 10%, var(--bg-2)); color: var(--texto-2); font-size: .9rem; line-height: 1.45; }
.ia-mundo b { color: var(--texto); margin-inline-end: 4px; }
.chip { font-size: 0.85rem; font-weight: 600; padding: 0.4em 0.95em; border-radius: 999px; background: var(--panel); border: 1px solid var(--panel-borde); color: var(--texto-2); }

/* ── Mapa de mundos ── */

.seccion-sub { color: var(--texto-2); margin: 0 0 20px; }
.mundos { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 18px; padding-bottom: 30px; }
.mundo {
  position: relative; overflow: hidden;
  background: var(--panel); border: 1px solid var(--panel-borde);
  border-radius: var(--radio); padding: 22px; cursor: pointer;
  transition: transform 0.18s, border-color 0.18s, box-shadow 0.18s;
  color: var(--texto); text-decoration: none !important; display: block;
}
.mundo:hover { transform: translateY(-5px); border-color: var(--color-mundo, var(--acento)); box-shadow: var(--sombra); }
.mundo::before {
  content: ""; position: absolute; inset: 0 0 auto;
  height: 5px; background: var(--color-mundo, var(--acento));
}
.mundo-emoji { font-size: 2.5rem; display: block; margin-bottom: 8px; }
.mundo h3 { font-size: 1.25rem; margin-bottom: 2px; }
.mundo p { color: var(--texto-2); font-size: 0.92rem; margin: 0 0 14px; min-height: 2.6em; }

/* ── Tarjetas / paneles genéricos ── */
.panel { background: var(--panel); border: 1px solid var(--panel-borde); border-radius: var(--radio); padding: 26px; }
.panel-angosto { max-width: 460px; margin: 44px auto; }
.centrado { text-align: center; }

/* ── Formularios ── */
.campo { margin-bottom: 15px; }
.campo label { display: block; font-weight: 600; font-size: 0.92rem; margin-bottom: 6px; }
.campo input, .campo textarea {
  width: 100%; padding: 0.75em 1em; font-size: 1rem; font-family: inherit;
  color: var(--texto); background: var(--bg-2); border: 1px solid var(--panel-borde);
  border-radius: 12px; outline: none; transition: border-color 0.15s; resize: vertical;
}
.campo input:focus, .campo textarea:focus { border-color: var(--ala-violet); }
.form-error { color: var(--ala-coral); font-size: 0.9rem; min-height: 1.3em; margin: 4px 0 10px; }
.form-ok { color: var(--ala-cyan); font-weight: 600; }
.form-pie { text-align: center; margin-top: 16px; font-size: 0.94rem; color: var(--texto-2); }
.turnstile-caja { margin: 6px 0 12px; min-height: 68px; }
/* Sin widget (aún no cargó, o el captcha no está configurado) no reserva alto:
   así el botón «Entrar» no queda empujado hacia abajo (feedback de Jennifer). */
.turnstile-caja:empty { min-height: 0; margin: 0; }

.aviso {
  border-radius: 12px; padding: 10px 14px; font-size: 0.92rem; margin-bottom: 14px;
  background: rgba(255, 197, 61, 0.12); border: 1px solid rgba(255, 197, 61, 0.4); color: var(--ala-sun);
}

/* ── Páginas de texto (legales) ── */
.prosa { max-width: 760px; margin: 36px auto 60px; }
.prosa h1 { font-size: 2rem; }
.prosa h2 { font-size: 1.25rem; margin-top: 1.6em; }
.prosa p, .prosa li { color: var(--texto-2); }
.prosa-fecha { font-size: 0.85rem; color: var(--texto-2); }
.prosa .legal-nota { font-size: 0.85rem; color: var(--texto-2); font-style: italic; border-inline-start: 3px solid var(--panel-borde); padding-inline-start: 10px; }   /* «traducción de cortesía» */

/* ── Footer ── */
.pie { border-top: 1px solid var(--panel-borde); margin-top: 40px; padding: 28px 0 90px; }
.pie-fila { display: flex; flex-wrap: wrap; gap: 10px 22px; align-items: center; }
.pie a { color: var(--texto-2); font-size: 0.88rem; }
.pie a:hover { color: var(--acento); }

.pie-copy { font-size: 0.8rem; color: var(--texto-2); margin-top: 14px; opacity: 0.7; }
.pie-fallo { background: none; border: 0; padding: 0; font: inherit; font-size: 0.88rem;
  color: var(--texto-2); cursor: pointer; }
.pie-fallo:hover { color: var(--acento); }
/* Modal «reportar fallo» (reusa el shell .modal-acceso; solo campos propios) */
.rf-desc { width: 100%; background: var(--bg-2); color: var(--texto); resize: vertical;
  border: 1px solid var(--panel-borde); border-radius: var(--radio); padding: 12px 14px;
  font: inherit; font-size: 0.95rem; }
.rf-desc:focus { outline: none; border-color: var(--acento); box-shadow: 0 0 0 3px color-mix(in srgb, var(--acento) 25%, transparent); }
.rf-ctx { font-size: 0.78rem; color: var(--texto-2); margin: 8px 0 4px; word-break: break-all; }
.rf-estado { min-height: 1.2em; font-size: 0.88rem; margin: 4px 0; }
.rf-estado.rf-err { color: var(--ala-coral); font-weight: 700; }
.rf-enviar { width: 100%; margin-top: 6px; }
.rep-ua { font-size: 0.72rem; color: var(--texto-2); opacity: 0.7; margin-top: 4px; word-break: break-all; }

/* ── Banner de cookies ── */
.cookies-banner {
  position: fixed; inset: auto 16px 16px; z-index: 90;
  max-width: 560px; margin-inline-start: auto;
  background: var(--bg-2); border: 1px solid var(--ala-violet); border-radius: var(--radio);
  padding: 18px 20px; box-shadow: 0 18px 50px rgba(0, 0, 0, 0.55);
  animation: subir-banner 0.5s ease-out 0.6s both;
}
@keyframes subir-banner {
  from { transform: translateY(120%); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}
/* Mientras el banner está en pantalla, el contenido reserva su alto: en móvil
   tapaba el botón «Entrar» del formulario de acceso (feedback de Jennifer). */
body:has(.cookies-banner) main { padding-bottom: 210px; }
@media (min-width: 700px) { body:has(.cookies-banner) main { padding-bottom: 130px; } }
.cookies-banner p { margin: 0 0 12px; font-size: 0.92rem; color: var(--texto-2); }
.cookies-botones { display: flex; gap: 10px; flex-wrap: wrap; }
.cookies-botones .btn { padding: 0.5em 1.2em; font-size: 0.9rem; }

/* ── Página "en construcción" por mundo ── */
.obra { text-align: center; padding: 70px 0; }
.obra .mundo-emoji { font-size: 4rem; }
.obra h1 { font-size: 2rem; }
.obra p { color: var(--texto-2); }

/* ── Utilidades ── */
.oculto { display: none !important; }
.saltar {
  position: absolute; inset-inline-start: -999px;
}
.saltar:focus { inset-inline-start: 12px; top: 12px; z-index: 99; background: var(--bg-2); padding: 10px 16px; border-radius: 10px; }

@media (max-width: 760px) {

  .chips { justify-content: center; }

}

/* En móvil los efectos activos se ven dentro de la mochila (🎒). */
@media (max-width: 600px) { .efectos-activos { display: none; } }

/* ── Prácticas (runners F3) ── */
.practica-cargando { text-align: center; padding: 80px 0; color: var(--texto-2); font-weight: 600; }
.practica { padding: 22px 20px 72px; }
.practica .volver { display: inline-flex; align-items: center; gap: 4px; margin-bottom: 16px; font-weight: 700; opacity: 0.85; }
.practica .volver:hover { opacity: 1; text-decoration: none; }
.practica-cab { display: flex; align-items: center; gap: 16px; margin-bottom: 4px; }
.practica-cab .mundo-emoji {
  font-size: 2rem; width: 60px; height: 60px; flex: 0 0 auto;
  display: grid; place-items: center; border-radius: 18px;
  background: color-mix(in srgb, var(--color-mundo, var(--ala-violet)) 22%, var(--bg-2));
  border: 1px solid color-mix(in srgb, var(--color-mundo, var(--ala-violet)) 45%, transparent);
  box-shadow: 0 8px 26px color-mix(in srgb, var(--color-mundo, var(--ala-violet)) 32%, transparent);
}
.practica-cab h1 { margin: 0; font-size: 1.6rem; line-height: 1.12; }
.practica-nivel {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 5px;
  font-size: 0.8rem; font-weight: 800; letter-spacing: 0.02em;
  color: var(--color-mundo, var(--acento));
  background: color-mix(in srgb, var(--color-mundo, var(--acento)) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-mundo, var(--acento)) 38%, transparent);
  padding: 3px 12px; border-radius: 999px;
}

.practica-enunciado {
  display: flex; gap: 12px; align-items: flex-start;
  margin: 0 0 18px; padding: 14px 18px; border-radius: 14px;
  color: var(--texto); font-size: 1.06rem; line-height: 1.5; font-weight: 600;
  background: color-mix(in srgb, var(--color-mundo, var(--acento)) 10%, var(--panel));
  border: 1px solid color-mix(in srgb, var(--color-mundo, var(--acento)) 32%, var(--panel-borde));
  border-inline-start: 5px solid var(--color-mundo, var(--acento));
}
.practica-enunciado .pe-ico { font-size: 1.3rem; line-height: 1.15; flex: 0 0 auto; }
.practica-enunciado p { margin: 0; }
.practica-enunciado code, .res-detalle code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  background: var(--panel); border: 1px solid var(--panel-borde);
  padding: 1px 6px; border-radius: 6px; font-size: 0.9em;
}
.practica-taller {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start;
}
/* Editor en 2 paneles (DataCamp/Codédex): instrucciones a la izquierda,
   taller (editor + acciones + salida) a la derecha. Apila en móvil. */
.practica-cols { display: grid; grid-template-columns: 1fr; gap: 22px; align-items: start; }
@media (min-width: 900px) { .practica-cols { grid-template-columns: 0.92fr 1.08fr; } }
.practica-instr { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
@media (min-width: 900px) { .practica-instr { position: sticky; top: 74px; max-height: calc(100vh - 92px); overflow: auto; } }
.practica-work { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.practica-2p .practica-acciones { margin: 4px 0 0; }
.practica-editor { min-width: 0; }
.editor-codigo {
  width: 100%; min-height: 260px; resize: vertical; tab-size: 2;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.92rem; line-height: 1.55; color: var(--texto);
  background: var(--bg-2); border: 1px solid var(--panel-borde);
  border-radius: var(--radio); padding: 14px 16px; white-space: pre;
}
.editor-codigo:focus { outline: none; border-color: var(--acento);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--acento) 25%, transparent); }
.practica-editor .CodeMirror {
  height: clamp(160px, 32vh, 340px);   /* editor.js la ajusta al código y a la pantalla */ border-radius: var(--radio); border: 1px solid var(--panel-borde);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.92rem;
}

/* ── Aspecto del editor (tamaño/fondo/texto) ─────────────────── */
.editor-barra { margin-bottom: 8px; }
.ed-ajustes { display: inline-block; }
.ed-ajustes > summary {
  cursor: pointer; list-style: none; user-select: none;
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 0.8rem; font-weight: 800; color: var(--texto-2);
  background: var(--panel); border: 1px solid var(--panel-borde);
  padding: 5px 12px; border-radius: 999px;
}
.ed-ajustes > summary::-webkit-details-marker { display: none; }
.ed-ajustes[open] > summary { color: var(--texto); border-color: var(--acento); }
.ed-ajustes[open] {
  display: block; margin-bottom: 8px; padding: 12px 14px;
  background: var(--panel); border: 1px solid var(--panel-borde); border-radius: 14px;
}
.ed-fila { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin-top: 9px; }
.ed-fila:first-of-type { margin-top: 12px; }
.ed-lbl { font-size: 0.72rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; color: var(--texto-2); min-width: 60px; }
.ed-btn {
  cursor: pointer; font-weight: 800; font-size: 0.85rem;
  background: var(--bg-2); color: var(--texto); border: 1px solid var(--panel-borde);
  border-radius: 9px; padding: 4px 11px;
}
.ed-btn:hover { border-color: var(--acento); }
.ed-fs-val { min-width: 26px; text-align: center; font-weight: 800; font-variant-numeric: tabular-nums; }
.ed-reset { margin-top: 12px; }
.ed-swatch {
  width: 26px; height: 26px; border-radius: 8px; cursor: pointer; padding: 0;
  border: 2px solid var(--panel-borde); background: var(--bg-2);
  color: var(--texto-2); font-size: 0.8rem; line-height: 1; display: grid; place-items: center;
}
.ed-swatch:hover { transform: translateY(-1px); }
.ed-swatch.activo { border-color: var(--acento); box-shadow: 0 0 0 3px color-mix(in srgb, var(--acento) 30%, transparent); }

/* Personalización aplicada por vars sobre el contenedor #ed-caja */
.editor-caja .CodeMirror { font-size: var(--ed-fs, 0.92rem); }
.editor-caja .editor-codigo { font-size: var(--ed-fs, 0.92rem); }
.editor-caja[data-ed-bg] .CodeMirror,
.editor-caja[data-ed-bg] .CodeMirror-gutters,
.editor-caja[data-ed-bg] .editor-codigo { background: var(--ed-bg) !important; }
.editor-caja[data-ed-bg] .CodeMirror-gutters { border-inline-end-color: transparent; }
.editor-caja[data-ed-fg] .CodeMirror,
.editor-caja[data-ed-fg] .CodeMirror pre,
.editor-caja[data-ed-fg] .CodeMirror-line,
.editor-caja[data-ed-fg] .editor-codigo { color: var(--ed-fg) !important; }

/* ── Tarjetas de conversación (Inglés) ───────────────────────── */
.practica-taller-card { align-items: start; }
/* Ejecutar/Reiniciar van DENTRO de la columna de la respuesta (bajo el cuadro de
   escribir, como en la práctica normal van bajo el editor); el gap de la columna
   ya da el aire → sin el margen grande de .practica-acciones. */
.practica-taller-card .practica-acciones { margin: 0; }
/* Quiz de opción múltiple (certificaciones cloud): una columna, opciones a lo ancho.
   El gap de .practica-lado ya da el aire → sin el margen grande de .practica-acciones
   (evita el hueco muerto entre «Comprobar» y los botones de recursos de abajo). */
.practica-taller-quiz { grid-template-columns: 1fr; gap: 18px; }
.practica-taller-quiz .practica-acciones { margin: 0; }
.quiz-zona { min-width: 0; }
.quiz-pregunta { font-size: 1.12rem; font-weight: 700; line-height: 1.4; margin: 0 0 14px; color: var(--texto); }
.quiz-opciones { display: flex; flex-direction: column; gap: 10px; }
.quiz-opcion {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  padding: 12px 14px; border: 2px solid var(--panel-borde); border-radius: var(--radio);
  background: var(--panel); color: var(--texto); font: inherit; cursor: pointer;
  transition: border-color .12s, background .12s, transform .06s;
}
.quiz-opcion:hover:not(:disabled) { border-color: var(--acento); }
.quiz-opcion:active:not(:disabled) { transform: translateY(1px); }
.quiz-opcion:disabled { cursor: default; }
.quiz-opcion.elegida { border-color: var(--acento); background: color-mix(in srgb, var(--acento) 12%, var(--panel)); }
.quiz-opcion.quiz-correcta { border-color: #22c55e; background: color-mix(in srgb, #22c55e 16%, var(--panel)); }
.quiz-opcion.quiz-mala { border-color: #ef4444; background: color-mix(in srgb, #ef4444 14%, var(--panel)); }
.quiz-opcion.quiz-ia::after { content: "🤖"; margin-inline-start: auto; padding-inline-start: 8px; font-size: 1.15em; }   /* Reto IA: lo que «eligió» la IA */
.quiz-letra {
  flex: 0 0 auto; width: 28px; height: 28px; display: grid; place-items: center;
  border-radius: 50%; background: var(--bg-2); color: var(--texto-2); font-weight: 800; font-size: .9rem;
}
.quiz-opcion.quiz-correcta .quiz-letra { background: #22c55e; color: #fff; }
.quiz-opcion.quiz-mala .quiz-letra { background: #ef4444; color: #fff; }
.quiz-texto { min-width: 0; line-height: 1.35; }
.res-explica {
  margin-top: 12px; padding: 12px 14px; border-radius: var(--radio);
  background: var(--bg-2); border: 1px solid var(--panel-borde); color: var(--texto-2); line-height: 1.45;
}
.tj-zona { min-width: 0; perspective: 1200px; }
.tj-tarjeta {
  position: relative; width: 100%; min-height: 250px; cursor: pointer;
  transform-style: preserve-3d;
  transition: transform 0.55s cubic-bezier(0.34, 1.3, 0.5, 1);
  transform: rotateY(0deg);
}
.tj-tarjeta.volteada { transform: rotateY(180deg); }
.tj-cara {
  position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  padding: 26px 22px; border-radius: 20px; text-align: center;
  border: 1px solid var(--panel-borde); box-shadow: var(--sombra);
}
.tj-frente {
  background: linear-gradient(150deg, color-mix(in srgb, var(--color-mundo, var(--ala-violet)) 22%, var(--bg-2)), var(--bg-2) 78%);
}
.tj-reverso {
  transform: rotateY(180deg);
  background: linear-gradient(150deg, color-mix(in srgb, var(--ala-sun) 20%, var(--bg-2)), var(--bg-2) 78%);
}
.tj-flag { font-size: 1.5rem; }
.tj-frase { font-size: 1.5rem; font-weight: 800; line-height: 1.25; display: flex; flex-wrap: wrap; gap: 6px 8px; justify-content: center; }
.tj-trad { font-size: 1.35rem; }
.tj-palabra {
  cursor: pointer; font: inherit; font-weight: 800;
  background: color-mix(in srgb, var(--color-mundo, var(--acento)) 12%, transparent);
  color: var(--texto); border: 1px dashed color-mix(in srgb, var(--color-mundo, var(--acento)) 50%, transparent);
  border-radius: 8px; padding: 1px 7px;
}
.tj-palabra:hover { background: color-mix(in srgb, var(--color-mundo, var(--acento)) 24%, transparent); }
.tj-palabra.activa { border-style: solid; box-shadow: 0 0 0 3px color-mix(in srgb, var(--acento) 24%, transparent); }
.tj-pron { font-size: 0.95rem; color: var(--texto-2); font-style: italic; }
.tj-voz {
  cursor: pointer; font-weight: 800; font-size: 0.9rem;
  background: var(--acento); color: #fff; border: 0; border-radius: 999px; padding: 7px 16px;
}
.tj-voz:hover { filter: brightness(1.08); }
.tj-girar { position: absolute; bottom: 10px; right: 14px; font-size: 0.72rem; font-weight: 800; color: var(--texto-2); opacity: 0.8; }
.tj-ayuda { margin: 12px 2px 0; font-size: 0.86rem; color: var(--texto-2); }
.tj-popup {
  margin-top: 10px; padding: 11px 14px; border-radius: 12px; font-size: 0.98rem;
  background: var(--panel); border: 1px solid var(--acento); box-shadow: var(--sombra);
  animation: pop-res 0.25s ease both;
}
.tj-pop-pron { color: var(--texto-2); font-style: italic; }
.escribir-caja { background: var(--panel); border: 1px solid var(--panel-borde); border-radius: var(--radio); padding: 12px 14px; }
.editor-frase {
  width: 100%; min-height: 78px; resize: vertical; margin-top: 4px;
  font-size: 1.05rem; line-height: 1.5; color: var(--texto);
  background: var(--bg-2); border: 1px solid var(--panel-borde); border-radius: 12px; padding: 11px 13px;
}
.editor-frase:focus { outline: none; border-color: var(--acento); box-shadow: 0 0 0 3px color-mix(in srgb, var(--acento) 25%, transparent); }
.escribir-nota { margin: 9px 2px 0; font-size: 0.9rem; color: var(--texto-2); }
.practica-lado { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.panel-titulo {
  margin: 0 0 8px; font-size: 0.74rem; font-weight: 800; letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--texto-2);
}
.sql-datos, .practica-preview-caja {
  background: var(--panel); border: 1px solid var(--panel-borde);
  border-radius: var(--radio); padding: 12px 14px;
}
.sql-tabla + .sql-tabla { margin-top: 14px; }
.sql-tabla-nombre { font-weight: 800; font-size: 0.9rem; margin-bottom: 6px; color: var(--color-mundo, var(--acento)); }
.sql-scroll { overflow-x: auto; border-radius: 10px; border: 1px solid var(--panel-borde); }
.sql-datos table { border-collapse: collapse; width: 100%; font-size: 0.85rem; }
.sql-datos th, .sql-datos td {
  padding: 6px 11px; text-align: start; white-space: nowrap; border-bottom: 1px solid var(--panel-borde);
}
.sql-datos th { background: var(--bg-2); font-weight: 700; color: var(--texto); }
.sql-datos td { color: var(--texto-2); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.sql-datos tr:last-child td { border-bottom: 0; }
.practica-preview {
  border: 1px solid var(--panel-borde); border-radius: 12px;
  overflow: hidden; background: #fff; min-height: 120px;
}
.web-preview { width: 100%; height: 220px; border: 0; display: block; }
.practica-resultados { min-height: 40px; }
/* Vacío (aún sin ejecutar / tras Reiniciar) NO reserva alto → sin hueco muerto bajo
   los botones (se ve sobre todo en el quiz y la tarjeta, de una sola columna). */
.practica-resultados:empty { min-height: 0; }
.practica-resultados .corriendo { color: var(--texto-2); font-weight: 600; }
.res-banner {
  border-radius: 14px; padding: 13px 18px; font-weight: 800; margin-bottom: 12px;
  animation: pop-res 0.32s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
@keyframes pop-res { from { transform: scale(0.92); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.res-gano {
  background: rgba(74, 222, 128, 0.16); color: #4ade80;
  border: 1px solid rgba(74, 222, 128, 0.45); box-shadow: 0 12px 32px rgba(74, 222, 128, 0.22);
}
.res-sigue { background: rgba(255, 197, 61, 0.14); color: var(--ala-sun); border: 1px solid rgba(255, 197, 61, 0.4); }
.res-error { color: var(--ala-coral); font-weight: 700; }
.res-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.res-lista li {
  display: flex; gap: 10px; align-items: flex-start;
  background: var(--panel); border: 1px solid var(--panel-borde);
  border-inline-start: 3px solid var(--panel-borde);
  border-radius: 12px; padding: 10px 12px;
  animation: pop-res 0.3s ease both;
}
.res-lista li.res-ok { border-inline-start-color: #4ade80; }
.res-lista li.res-no { border-inline-start-color: var(--ala-coral); }
.res-icono { flex: 0 0 auto; }
.res-desc { font-weight: 600; }
.res-detalle { display: flex; flex-direction: column; gap: 2px; margin-top: 4px; font-size: 0.88rem; color: var(--texto-2); }
.res-salida {
  margin-top: 10px; padding: 10px 12px; border-radius: 10px; overflow-x: auto;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.85rem;
  background: var(--bg-2); border: 1px solid var(--panel-borde); color: var(--texto-2);
}
.practica-acciones { display: flex; gap: 10px; margin: 20px 0; flex-wrap: wrap; }
.practica-acciones .btn { padding: 0.8em 1.9em; font-size: 1.02rem; }
.practica-pistas {
  background: var(--panel); border: 1px solid var(--panel-borde);
  border-radius: 14px; padding: 10px 18px;
}
.practica-pistas summary { cursor: pointer; font-weight: 800; list-style: none; }
.practica-pistas summary::-webkit-details-marker { display: none; }
.practica-pistas[open] summary { margin-bottom: 4px; }
.practica-pistas ol { margin: 8px 0 6px; padding-inline-start: 20px; color: var(--texto-2); }
.practica-pistas li { margin-bottom: 4px; }
/* Pistas de pago (revelar cuesta XP) */
.pistas-cab { display: flex; align-items: center; gap: 8px; font-weight: 800; margin: 0 0 6px; }
.pistas-costo { font-size: .78rem; font-weight: 700; color: var(--texto-2);
  background: var(--fondo-2, rgba(0,0,0,.05)); border-radius: 999px; padding: 2px 8px; }
.pistas-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.pistas-lista .pista { margin: 0; }
.pista-btn { cursor: pointer; width: 100%; text-align: start;
  background: var(--fondo-2, rgba(0,0,0,.04)); border: 1px dashed var(--panel-borde);
  border-radius: 10px; padding: 8px 12px; font: inherit; font-weight: 700; color: var(--texto-2); }
.pista-btn:hover:not(:disabled) { border-style: solid; color: var(--texto); }
.pista-btn:disabled { opacity: .7; cursor: default; }
.pista.abierta .pista-txt { display: block; padding: 8px 12px; color: var(--texto-2);
  border-inline-start: 3px solid var(--color-mundo, var(--acento)); border-radius: 0 8px 8px 0; }
/* Video del tema: botón que abre la búsqueda de YouTube (el alumno elige el video) */
.practica-video-btn {
  display: inline-flex; align-items: center; gap: 8px;
  align-self: flex-start; text-decoration: none; font-weight: 800;
  color: var(--texto); background: var(--panel); border: 1px solid var(--panel-borde);
  border-radius: 12px; padding: 9px 16px;
  cursor: pointer; font-size: 1rem;  /* también sirve al <button> «preguntar a un amigo» */
}
.practica-video-btn:hover { border-color: var(--color-mundo, var(--acento));
  color: var(--color-mundo, var(--acento)); text-decoration: none; }
/* Fila de recursos del reto (📺 vídeos · 📖 teoría · 🙋 amigo) con aire entre botones. */
.practica-recursos { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 16px; }
.practica-recursos .practica-video-btn { align-self: center; margin-top: 0; }

/* ── Currículo del mundo (F4) ── */
.curso { padding: 22px 20px 72px; }
.curso .volver { display: inline-flex; align-items: center; gap: 4px; margin-bottom: 16px; font-weight: 700; opacity: 0.85; }

.res-nav { display: flex; align-items: center; gap: 12px; margin-top: 14px; flex-wrap: wrap; }
.res-hint { color: var(--texto-2); font-size: 0.9rem; }
/* Los avisos van en su propia línea, ENCIMA de los botones: inline los empujaban y los
   botones cambiaban de sitio según el aviso (Jennifer, 2026-10). */
.res-nav .res-hint { flex-basis: 100%; }

/* ── Panel admin (F8) ── */
.panel-admin { padding: 22px 20px 72px; max-width: 1120px; }
/* Ajustes en categorías desplegables (acordeón); dentro, columnas tipo masonry
   (empacado sin huecos). Una sola sección ocupa todo el ancho. */
#form-ajustes, #form-pub { display: flex; flex-direction: column; gap: 14px; }
.ajustes-cat { border: 1px solid var(--panel-borde); border-radius: var(--radio); background: var(--panel); overflow: hidden; }
.ajustes-cat > summary {
  cursor: pointer; font-weight: 800; font-size: 1.05rem; padding: 14px 18px;
  display: flex; align-items: center; gap: 10px; list-style: none; user-select: none;
}
.ajustes-cat > summary::-webkit-details-marker { display: none; }
.ajustes-cat > summary::after { content: "▾"; margin-inline-start: auto; color: var(--texto-2); transition: transform .2s; }
.ajustes-cat[open] > summary::after { transform: rotate(180deg); }
.ajustes-cat > summary:hover { background: var(--bg-2); }
.ajustes-cat > summary:focus-visible { outline: 2px solid var(--acento); outline-offset: -2px; }
.ajg-ico { font-size: 1.25rem; }
/* columns = masonry: los fieldsets fluyen de arriba abajo y saltan de columna sin
   dejar el hueco feo que dejaba el grid (un fieldset corto junto a uno alto). */
/* Cada tarjeta es una «línea» de las columnas: con orphans/widows a 2 (lo de serie) cada columna
   exigía 2 tarjetas → 2+2 aunque quedara una corta junto a otra larguísima, y con 2 tarjetas ni se
   partía (todo a la izquierda y la derecha vacía) */
.ajustes-cat-cuerpo { columns: 2 330px; column-gap: 16px; padding: 6px 16px 12px; orphans: 1; widows: 1; }
.ajustes-cat-cuerpo:not(:has(> .admin-grupo:nth-child(3))) { columns: 1; }  /* 1 o 2 secciones → ancho completo */
.ajustes-cat-cuerpo > .admin-grupo { break-inside: avoid; display: inline-block; width: 100%; margin: 0 0 16px; }
.admin-grupo {
  border: 1px solid var(--panel-borde); border-radius: var(--radio);
  padding: 8px 18px 18px; margin: 0; background: var(--panel);
}
.admin-grupo legend { font-weight: 800; padding: 0 8px; }
.admin-grupo label { display: block; margin: 12px 0; font-weight: 600; font-size: 0.92rem; }
.admin-grupo input, .admin-grupo select {
  width: 100%; margin-top: 5px; padding: 0.6em 0.8em; border-radius: 10px; font: inherit;
  color: var(--texto); background: var(--bg-2); border: 1px solid var(--panel-borde);
}
.admin-grupo input:focus, .admin-grupo select:focus { outline: none; border-color: var(--acento);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--acento) 22%, transparent); }
.admin-check { display: flex !important; align-items: center; gap: 8px; }
.admin-check input { width: auto; margin: 0; }
.admin-nota { font-size: 0.85rem; color: var(--texto-2); margin: 6px 0 0; }
.admin-estado { margin-inline-start: 10px; font-weight: 700; }
/* Correo «te extrañamos» (⚙️ Ajustes → Servicios base): selector + vista previa real. */
.wb-fila { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; }
.wb-prev { display: block; width: 100%; height: 640px; margin-top: 10px; border: 1px solid var(--panel-borde);
  border-radius: 12px; background: #ece7ff; }
.admin-sub { color: var(--texto-2); font-size: 0.85rem; margin: 4px 0 10px; }

/* Estado de activación de integraciones (arriba de Ajustes) */
.act-estado { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 8px; }
.act-chip { font-size: 0.8rem; font-weight: 700; border-radius: 999px; padding: 4px 12px; border: 1px solid var(--panel-borde); }
.act-chip.act-on { color: #2fb98a; background: color-mix(in srgb, #2fd6a6 15%, transparent); border-color: color-mix(in srgb, #2fd6a6 42%, transparent); }
.act-chip.act-warn { color: #d99a2b; background: color-mix(in srgb, #e0a53d 16%, transparent); border-color: color-mix(in srgb, #e0a53d 48%, transparent); }
.act-chip.act-off { color: var(--texto-2); background: color-mix(in srgb, var(--texto-2) 8%, transparent); }
.act-aviso { border-inline-start: 3px solid #e0a53d; padding-inline-start: 10px; }

/* Chips de estado del panel Publicidad (activo/apagado de cada canal) */
.pub-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; }
.pub-chip { font-size: 0.8rem; font-weight: 700; border-radius: 999px; padding: 4px 12px; border: 1px solid var(--panel-borde); }
.pub-chip.on { color: var(--ala-verde, var(--acento)); background: color-mix(in srgb, var(--ala-verde, var(--acento)) 14%, transparent); border-color: color-mix(in srgb, var(--ala-verde, var(--acento)) 40%, transparent); }
.pub-chip.off { color: var(--texto-2); background: color-mix(in srgb, var(--texto-2) 8%, transparent); }

/* Zonas de banner: contenedor público (sin hueco si está vacío) + gestor admin */
.ad-zona { text-align: center; max-width: 100%; overflow-x: auto; }
.ad-zona[hidden] { display: none; }
.ad-zona img, .ad-zona video { max-width: 100%; height: auto; }
.ad-zonas-mgr { margin-top: 6px; }
.ad-zona-edit { border: 1px solid var(--panel-borde); border-radius: var(--radio); padding: 12px 14px; margin: 12px 0; }
.ad-zona-edit textarea { width: 100%; font-family: monospace; font-size: 0.85rem; resize: vertical; margin-top: 6px; }

/* Panel admin con nav lateral (estilo Arkemu) */
.panel-admin-2col { display: grid; grid-template-columns: 236px 1fr; gap: 20px; align-items: start; }
@media (max-width: 860px) { .panel-admin-2col { grid-template-columns: 1fr; } }
.admin-nav { background: var(--panel); border: 1px solid var(--panel-borde); border-radius: var(--radio); padding: 12px; position: sticky; top: 74px; }
@media (max-width: 860px) { .admin-nav { position: static; } }
.admin-nav-cab { display: flex; align-items: center; gap: 10px; padding: 4px 6px 12px; border-bottom: 1px solid var(--panel-borde); margin-bottom: 8px; }
.admin-nav-cab .mundo-emoji { font-size: 1.6rem; }
.admin-nav-cab small { color: var(--texto-2); font-size: 0.78rem; }
.admin-nav-items { display: flex; flex-direction: column; gap: 3px; }
@media (max-width: 860px) { .admin-nav-items { flex-direction: row; flex-wrap: wrap; } }
.admin-navitem { text-align: start; background: none; border: 0; color: var(--texto-2); font: inherit; font-weight: 700; font-size: 0.9rem; padding: 9px 12px; border-radius: 10px; cursor: pointer; white-space: nowrap; }
.admin-navitem:hover { background: var(--bg-2); color: var(--texto); }
.admin-navitem.activo { background: color-mix(in srgb, var(--acento) 18%, transparent); color: var(--texto); }
.admin-main { min-width: 0; }
.admin-vacio { background: var(--panel); border: 1px solid var(--panel-borde); border-radius: var(--radio); padding: 28px 24px; }
.admin-vacio h2 { margin: 0 0 8px; }

/* Avatar (perfil) */

.avatar-sel { margin: 14px 0; }
.avatar-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(46px, 1fr)); gap: 8px; margin-top: 8px; }
.avatar-op { font-size: 1.5rem; line-height: 1; padding: 8px; border-radius: 12px; cursor: pointer;
  background: var(--panel); border: 2px solid var(--panel-borde); transition: transform 0.12s, border-color 0.12s; }
.avatar-op:hover { transform: translateY(-2px); border-color: var(--acento); }
.avatar-op.sel { border-color: var(--acento); box-shadow: 0 0 0 3px color-mix(in srgb, var(--acento) 26%, transparent); }
/* Foto real de avatar: escala con el texto (mismo tamaño que el emoji al que sustituye) */
.avatar-img { width: 1em; height: 1em; border-radius: 50%; object-fit: cover;
  vertical-align: -0.15em; background: var(--panel); }

/* Medallón de avatar (disco con gradiente del color + el emoji dentro). El emoji
   se pinta en el navegador; en la BD solo va el código ASCII (a01…a21). */
.avatar-medal { display: inline-flex; align-items: center; justify-content: center;
  width: 1.5em; height: 1.5em; border-radius: 50%; vertical-align: -0.4em;
  background-color: var(--av, #8b93a7);
  background-image:
    radial-gradient(circle at 32% 26%, rgba(255,255,255,.55), rgba(255,255,255,0) 46%),
    radial-gradient(circle at 72% 82%, rgba(0,0,0,.28), rgba(0,0,0,0) 55%);
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.22), 0 1px 3px rgba(0,0,0,.35); }
 .avatar-op .avatar-medal { vertical-align: middle; }
.avatar-op { display: flex; align-items: center; justify-content: center; }
.avatar-subir { display: inline-flex; align-items: center; gap: 8px; margin-top: 10px; cursor: pointer; }

/* Pestañas */
.admin-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 20px;
  border-bottom: 1px solid var(--panel-borde); }
.admin-tab { background: none; border: none; color: var(--texto-2); font: inherit;
  font-weight: 700; padding: 10px 14px; cursor: pointer; border-radius: 10px 10px 0 0;
  border-bottom: 3px solid transparent; }
.admin-tab:hover { color: var(--texto); }
.admin-tab.activo { color: var(--texto); border-bottom-color: var(--acento); }

/* Resumen */
.admin-stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.stat-card { background: var(--panel); border: 1px solid var(--panel-borde);
  border-radius: var(--radio); padding: 16px; display: flex; flex-direction: column; gap: 2px; }
.stat-emoji { font-size: 1.4rem; }
.stat-num { font-size: 1.8rem; font-weight: 800; line-height: 1.1; }
.stat-lbl { color: var(--texto-2); font-size: 0.85rem; }
.admin-roles { margin-top: 20px; }
.admin-roles h3 { margin: 0 0 8px; }
.admin-pill { display: inline-block; background: var(--panel); border: 1px solid var(--panel-borde);
  border-radius: 999px; padding: 4px 12px; margin: 0 6px 6px 0; font-size: 0.9rem; }

/* Visitas / analítica · Monitoreo */
.admin-graf { margin-top: 22px; }
.admin-graf h3 { margin: 0 0 10px; }
.mini-barras { display: flex; align-items: flex-end; gap: 4px; height: 120px;
  padding: 10px 12px; background: var(--panel); border: 1px solid var(--panel-borde); border-radius: var(--radio); }
.mini-barra { flex: 1; display: flex; align-items: flex-end; height: 100%; }
.mini-barra b { display: block; width: 100%; min-height: 2px; border-radius: 4px 4px 0 0;
  background: var(--acento); opacity: 0.85; transition: height 0.3s ease; }
.mon-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.mon-item { display: flex; align-items: baseline; gap: 10px; background: var(--panel);
  border: 1px solid var(--panel-borde); border-radius: 12px; padding: 10px 14px; }

/* Panel de Seguridad */
.seg-lista { list-style: none; margin: 0 0 8px; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.seg-lista li { padding: 8px 12px; border-radius: 10px; border: 1px solid var(--panel-borde); background: var(--panel); font-size: 0.9rem; }
.seg-no { border-color: color-mix(in srgb, var(--ala-sun, orange) 45%, transparent); }
.seg-eventos { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; max-height: 360px; overflow-y: auto; }
.seg-ev { display: flex; align-items: baseline; gap: 10px; padding: 6px 10px; border-radius: 8px; background: var(--panel); border: 1px solid var(--panel-borde); font-size: 0.82rem; flex-wrap: wrap; }
.seg-ev-k { font-weight: 700; border-radius: 999px; padding: 1px 8px; background: color-mix(in srgb, var(--texto-2) 14%, transparent); }
.seg-k-scanner, .seg-k-block { background: color-mix(in srgb, var(--ala-coral, crimson) 22%, transparent); }
.seg-ev-ip { font-variant-numeric: tabular-nums; }
.seg-ev-p { color: var(--texto-2); flex: 1; min-width: 120px; word-break: break-all; }

/* Actividad reciente */
.act-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.act-item { display: flex; align-items: baseline; gap: 10px; padding: 8px 12px;
  background: var(--panel); border: 1px solid var(--panel-borde); border-radius: 12px; }
.act-emoji { flex: none; }
.act-txt { flex: 1; }
.act-ref { color: var(--texto-2); font-family: var(--mono, monospace); font-size: 0.82rem; }
.act-xp { color: var(--ala-verde, var(--acento)); font-weight: 700; font-size: 0.85rem; }
.act-fecha { flex: none; color: var(--texto-2); font-size: 0.8rem; font-variant-numeric: tabular-nums; }

/* Premios */
.premio-sistema { display: flex; align-items: center; gap: 14px; padding: 14px 16px; margin-bottom: 18px;
  background: var(--panel); border: 1px solid var(--panel-borde); border-radius: var(--radio); }
.premio-sistema.on { border-color: var(--ala-verde, var(--acento)); }
.premio-sistema p { margin: 2px 0 0; }
.premio-img { width: 34px; height: 34px; object-fit: cover; border-radius: 8px; vertical-align: middle; }
.premio-nuevo { margin: 16px 0; }
.premio-nuevo summary { cursor: pointer; font-weight: 700; padding: 8px 0; }
.premio-form { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; margin-top: 10px; }
.premio-form label { display: flex; flex-direction: column; gap: 4px; font-size: 0.85rem; color: var(--texto-2); }
.premio-form input { padding: 0.5em 0.7em; border-radius: 10px; font: inherit;
  color: var(--texto); background: var(--bg-2); border: 1px solid var(--panel-borde); }
.premio-form-ancho { grid-column: 1 / -1; }
.premio-form .btn { align-self: end; }
/* mini interruptor reutilizable */
.mini-switch { position: relative; display: inline-block; width: 42px; height: 24px; flex: none; cursor: pointer; }
.mini-switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.mini-switch span { position: absolute; inset: 0; background: var(--panel-borde); border-radius: 999px; transition: background 0.2s; }
.mini-switch span::before { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px;
  background: #fff; border-radius: 50%; transition: transform 0.2s; }
.mini-switch input:checked + span { background: var(--ala-verde, var(--acento)); }
.mini-switch input:checked + span::before { transform: translateX(18px); }

/* Noticias — editor admin */
.noti-acc { display: flex; gap: 6px; flex-wrap: wrap; }
.noti-form { margin-top: 18px; padding: 18px; background: var(--panel); border: 1px solid var(--panel-borde); border-radius: var(--radio); }
.noti-form h3 { margin: 0 0 12px; }
/* Todos los labels del form (también los que ahora van dentro de .noti-paso) en
   columna full-width; el checkbox «importante» es la excepción (fila). */
.noti-form label:not(.noti-check) { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; font-size: 0.88rem; color: var(--texto-2); }
.noti-form input, .noti-form textarea { width: 100%; padding: 0.55em 0.75em; border-radius: 10px; font: inherit;
  color: var(--texto); background: var(--bg-2); border: 1px solid var(--panel-borde); }
.noti-form textarea { resize: vertical; font-family: var(--mono, monospace); line-height: 1.5; }
.noti-check { display: flex; flex-direction: row; align-items: center; gap: 8px; margin: 4px 0 12px; }
.noti-check input { width: auto; }
.noti-form-btns { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 6px; }
.noti-ia-fila { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: -4px 0 12px; }
.noti-ia[disabled] { opacity: 0.6; cursor: progress; }
/* Botón HERO: el de un clic domina el editor (lo demás es «avanzado»). */
.noti-ia-todo { display: block; width: 100%; font-weight: 800; font-size: 1.06rem;
  padding: 14px 18px; margin: 6px 0 8px; border: 0; color: #fff;
  background: linear-gradient(135deg, var(--ala-violet), var(--ala-cyan)); }
.noti-ia-todo:hover { filter: brightness(1.06); }
.noti-ia-todo[disabled] { opacity: 0.75; cursor: progress; filter: none; }
.noti-link-solo { width: 100%; margin: 0 0 8px; }
/* Desplegables «avanzado»/«a mano»: discretos, no compiten con el botón grande. */
.noti-avanzado { margin: 2px 0 8px; }
.noti-avanzado > summary { cursor: pointer; font-size: 0.88rem; opacity: 0.7;
  padding: 4px 0; user-select: none; list-style: none; }
.noti-avanzado > summary:hover { opacity: 1; }
.noti-avanzado > summary::before { content: "▸ "; }
.noti-avanzado[open] > summary::before { content: "▾ "; }
.noti-avanzado[open] > summary { margin-bottom: 8px; }
.noti-link-fila { display: flex; gap: 8px; align-items: center; margin: 0 0 6px; }
.noti-link-fila input { flex: 1; min-width: 120px; }
.noti-link-fila .noti-lang { flex: 0 0 auto; }
.noti-lang { padding: 0.5em; border-radius: 10px; background: var(--bg-2, var(--panel)); border: 1px solid var(--panel-borde); color: var(--texto); font: inherit; }
.noti-preview-caja:not(:empty) { margin: -4px 0 14px; }
.noti-preview { max-width: 100%; max-height: 220px; border-radius: 12px; border: 1px solid var(--panel-borde); }

/* Columna derecha: progreso + insignias + noticias, apiladas (antes las noticias
   caían debajo del mapa; ahora van en el rail). */
.rail-col { display: flex; flex-direction: column; gap: 14px; }
.rail-badges { background: var(--panel); border: 1px solid var(--panel-borde); border-radius: var(--radio); padding: 14px 16px; }
.rail-badges-n { font-size: 0.82rem; font-weight: 700; color: var(--texto-2); }
.rail-badges-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; }
.rail-badge { padding: 0; border: 0; width: auto; }
.rail-badge .badge-medal { width: 40px; height: 40px; }
.rail-badge .badge-ico { font-size: 1.2rem; }
.rail-badge .badge-nom { display: none; }
/* Noticias — caja del rail */
.rail-noticias { background: var(--panel); border: 1px solid var(--panel-borde); border-radius: var(--radio);
  padding: 14px 16px; }
.rail-news-lista { list-style: none; margin: 8px 0 6px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.rail-news { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--texto); }
.rail-news:hover .rail-news-tit { color: var(--acento); }
.rail-news-img { width: 40px; height: 40px; flex: none; object-fit: cover; border-radius: 8px;
  background: var(--bg-2); display: grid; place-items: center; font-size: 1.1rem; }
.rail-news-tit { font-size: 0.86rem; font-weight: 600; line-height: 1.25; }
.rail-news-todas { font-size: 0.82rem; font-weight: 700; color: var(--acento); text-decoration: none; }

/* Amigos — caja del rail (#6) */
.rail-amigos { background: var(--panel); border: 1px solid var(--panel-borde); border-radius: var(--radio); padding: 14px 16px; }
.rail-amigos-lista { display: flex; flex-direction: column; gap: 8px; margin: 8px 0 6px; }
.rail-amigo { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--texto); }
.rail-amigo:hover .rail-amigo-nom { color: var(--acento); }
.rail-amigo-av { width: 34px; height: 34px; flex: none; display: grid; place-items: center; font-size: 1.1rem; }
.rail-amigo-av .avatar-img { width: 34px; height: 34px; }
.rail-amigo-nom { font-size: 0.9rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Recomendados en el rail: cuando tienes pocos amigos, a quién agregar sin salir del curso */
.rail-reco-tit { margin: 12px 0 2px; font-size: 0.78rem; font-weight: 800; color: var(--texto-2); letter-spacing: 0.02em; }
.rail-reco .rail-amigo-nom { flex: 1; min-width: 0; color: var(--texto); text-decoration: none; }
.rail-reco .rail-amigo-av { text-decoration: none; }
.rail-reco-mas {
  flex: none; width: 30px; height: 30px; border-radius: 50%; cursor: pointer; padding: 0;
  font: 800 1.1rem/1 var(--display); color: var(--cian-t, #04302c); background: var(--acento);
  border: 0; box-shadow: 0 3px 0 color-mix(in srgb, var(--acento) 55%, #000); transition: transform 0.08s;
}
.rail-reco-mas:active { transform: translateY(3px); box-shadow: none; }
.rail-reco-ok { flex: none; width: 30px; text-align: center; font-weight: 800; color: var(--acento); }
.amigos-reco-h { margin-top: 24px; }
.rail-amigos-pend { display: inline-block; margin: 4px 0 8px; font-size: 0.82rem; font-weight: 700; color: var(--ala-coral, #ff7a3c); text-decoration: none; }

/* Amigos — página /amigos */
.amigos-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin: 14px 0 16px; }
.amigos-tab { background: var(--bg-2); border: 1px solid var(--panel-borde); color: var(--texto); font: inherit; font-weight: 700; font-size: 0.9rem; padding: 8px 14px; border-radius: 999px; cursor: pointer; }
.amigos-tab.activo { background: var(--acento); color: #fff; border-color: var(--acento); }
.amigos-badge { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--ala-coral, #ff7a3c); color: #fff; font-size: 0.72rem; font-weight: 800; }
.amigos-h { margin: 18px 0 8px; font-size: 0.95rem; color: var(--texto-2); }
.amigo-fila { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--panel-borde); flex-wrap: wrap; }
.amigo-info { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--texto); min-width: 0; flex: 1 1 auto; }
.amigo-info:hover .amigo-nom { color: var(--acento); }
.amigo-av { font-size: 1.4rem; width: 38px; height: 38px; flex: none; display: grid; place-items: center; }
.amigo-av .avatar-img { width: 38px; height: 38px; }
.amigo-nom { font-weight: 700; }
.amigo-xp { color: var(--texto-2); font-size: 0.82rem; }
.amigo-acc { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.amigo-estado { color: var(--texto-2); font-size: 0.84rem; font-weight: 600; }
/* Recomendados: fila + motivo debajo (misma separación que el resto). */
.amigo-reco { border-bottom: 1px solid var(--panel-borde); padding-bottom: 8px; }
.amigo-reco .amigo-fila { border-bottom: none; padding-bottom: 2px; }
.amigo-reco-razon { margin: 0 0 0 46px; font-size: 0.82rem; color: var(--texto-2); }
.amigos-reco-sub { margin-top: 4px; }
.btn-sm { padding: 0.4em 0.8em; font-size: 0.85rem; }
.amigos-buscar input { width: 100%; padding: 0.6em 0.9em; border-radius: 10px; font: inherit; color: var(--texto); background: var(--bg-2); border: 1px solid var(--panel-borde); }
.amigos-buscar input:focus { outline: none; border-color: var(--acento); box-shadow: 0 0 0 3px color-mix(in srgb, var(--acento) 22%, transparent); }
#amigos-res { margin-top: 10px; }
/* Amigos B2: preguntar a un amigo + XP de regalo */
.pp-regalo { margin: 8px 0 0; font-weight: 700; color: var(--ala-sun, #f5c542); }
.ayuda-item { padding: 12px 0; border-bottom: 1px solid var(--panel-borde); }
.ayuda-de { margin: 0 0 4px; font-size: 0.9rem; }
.ayuda-reto { color: var(--texto-2); }
.ayuda-q { margin: 4px 0; font-style: italic; color: var(--texto-2); }
.ayuda-a { margin: 4px 0 0; padding: 8px 10px; background: var(--bg-2); border-radius: 10px; }
.ayuda-resp { width: 100%; margin: 6px 0; padding: 0.5em 0.7em; border-radius: 10px; font: inherit; color: var(--texto); background: var(--bg-2); border: 1px solid var(--panel-borde); resize: vertical; }
textarea.dlg-input { resize: vertical; min-height: 60px; }
select.dlg-input { cursor: pointer; }
/* Referidos: estado de recompensas en el perfil */
.ref-estado { margin: 6px 0 2px; }
.ref-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 8px 0 4px; }
.ref-stat { background: var(--bg-2); border-radius: 12px; padding: 10px 6px; text-align: center; }
.ref-stat b { display: block; font-size: 1.15rem; }
.ref-stat small { color: var(--texto-2); font-size: 0.72rem; }
.ref-nota { font-size: 0.8rem; color: var(--texto-2); margin: 2px 0 0; }

/* Noticias — páginas públicas */
.noticias-pag, .noticia-pag { padding-top: 20px; padding-bottom: 40px; }
.noticias-rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 18px; margin-top: 16px; }
.noticia-card { display: flex; flex-direction: column; text-decoration: none; color: var(--texto);
  background: var(--panel); border: 1px solid var(--panel-borde); border-radius: var(--radio); overflow: hidden; transition: transform 0.15s; }
.noticia-card:hover { transform: translateY(-3px); }
.noticia-card img, .noticia-ph { width: 100%; height: 150px; object-fit: cover; display: block; }
.noticia-ph { display: grid; place-items: center; font-size: 2.4rem; background: var(--bg-2); }
.noticia-card-txt { padding: 14px; display: flex; flex-direction: column; gap: 6px; }
.noticia-card-txt h3 { margin: 0; font-size: 1.05rem; }
.noticia-card-txt p { margin: 0; color: var(--texto-2); font-size: 0.9rem; }
.noticia-card-txt small { color: var(--texto-2); font-size: 0.78rem; }
.noticia { max-width: 760px; margin: 0 auto; }
.noticia h1 { margin: 10px 0 4px; }
.noticia-fecha { color: var(--texto-2); font-size: 0.85rem; margin: 0 0 16px; }
.noticia-cover { width: 100%; max-height: 380px; object-fit: cover; border-radius: var(--radio); margin-bottom: 28px; }
.noticia-cuerpo { line-height: 1.7; }
.noticia-cuerpo h2 { margin: 22px 0 8px; }
.noticia-cuerpo p { margin: 0 0 14px; }
.noticia-img { margin: 28px 0; }
.noticia-img img { width: 100%; max-height: 360px; object-fit: cover; border-radius: var(--radio); display: block; }
.volver { display: inline-block; margin-bottom: 14px; color: var(--acento); text-decoration: none; font-weight: 600; }

/* ── Pie «Sigue leyendo» (enlazado interno) ── */
.noticia-sigue { margin-top: 30px; padding-top: 20px; border-top: 1px solid var(--panel-borde); }
.noticia-sigue h2 { margin: 0 0 14px; font-size: 1.15rem; }
.sigue-posts { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.sigue-card { display: flex; gap: 10px; align-items: center; text-decoration: none; color: var(--texto); background: var(--panel); border: 1px solid var(--panel-borde); border-radius: 14px; padding: 8px; transition: transform .12s, border-color .12s; }
.sigue-card:hover { transform: translateY(-2px); border-color: var(--acento); }
.sigue-card img, .sigue-ph { width: 60px; height: 60px; flex: 0 0 60px; object-fit: cover; border-radius: 10px; display: grid; place-items: center; background: var(--bg-2); font-size: 1.5rem; }
.sigue-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sigue-txt b { font-size: 0.92rem; line-height: 1.25; }
.sigue-txt small { color: var(--texto-2); font-size: 0.78rem; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.sigue-cursos { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 16px; color: var(--texto-2); font-size: 0.9rem; }
.chip-curso { text-decoration: none; color: var(--acento); font-weight: 700; background: var(--panel); border: 1px solid var(--panel-borde); border-radius: 999px; padding: 5px 12px; font-size: 0.85rem; }
.chip-curso:hover { border-color: var(--acento); }

/* Noticias — pestañas de idioma, paginación, insignias, compartir */
.noticias-lema { color: var(--texto-2); margin: 0 0 18px; }
.noticias-tabs { display: flex; gap: 8px; margin: 0 0 18px; }
.ntab { padding: 7px 16px; border-radius: 999px; border: 1px solid var(--panel-borde); background: none; color: var(--texto); font-weight: 700; cursor: pointer; }
.ntab.activa { background: var(--acento); color: #fff; border-color: transparent; }
.noticia-card-meta { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; color: var(--texto-2); font-size: 0.78rem; }
.noticia-lang { display: inline-block; font-weight: 800; font-size: 0.7rem; letter-spacing: .04em; padding: 1px 7px; border-radius: 999px;
  background: color-mix(in srgb, var(--acento) 18%, transparent); color: var(--acento); }
.noticias-pager { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 24px; }
.npag { min-width: 38px; padding: 7px 12px; border-radius: 10px; border: 1px solid var(--panel-borde); background: var(--panel); color: var(--texto); font-weight: 700; cursor: pointer; }
.npag.activa { background: var(--acento); color: #fff; border-color: transparent; }
.noticia-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 12px; }
.noticia-sub { color: var(--texto-2); font-size: 1.02rem; margin: 0 0 12px; line-height: 1.5; }
.noticia-alt { margin-left: auto; font-weight: 700; font-size: 0.8rem; padding: 4px 12px; border-radius: 999px;
  border: 1px solid var(--acento); color: var(--acento); text-decoration: none; }
.noticia-alt:hover { background: var(--acento); color: #fff; }
.noticia-tags { display: flex; flex-wrap: wrap; gap: 7px; margin: 0 0 16px; }
.noticia-tag { font-size: 0.78rem; font-weight: 600; color: var(--texto-2); background: var(--panel);
  border: 1px solid var(--panel-borde); border-radius: 999px; padding: 3px 10px; }
.noticia-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-bottom: 20px; }
.noticia-yt { text-decoration: none; }
.noticia-compartir { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.share-lbl { color: var(--texto-2); font-size: 0.85rem; font-weight: 700; }
.share-btn { display: inline-flex; align-items: center; gap: 5px; padding: 6px 11px; border-radius: 10px; border: 1px solid var(--panel-borde);
  background: var(--panel); color: var(--texto); font-weight: 700; font-size: 0.82rem; cursor: pointer; text-decoration: none; }
.share-btn:hover { border-color: var(--acento); }
.s-x:hover { background: #000; color: #fff; border-color: #000; }
.s-fb:hover { background: #1877f2; color: #fff; border-color: #1877f2; }
.s-wa:hover { background: #25d366; color: #fff; border-color: #25d366; }
.s-tg:hover { background: #29a9eb; color: #fff; border-color: #29a9eb; }
/* Comentarios de noticia (solo usuarios registrados) */
.noticia-comentarios { margin-top: 34px; padding-top: 22px; border-top: 1px solid var(--panel-borde); }
.coment-h { margin: 0 0 16px; font-size: 1.15rem; display: flex; align-items: center; gap: 8px; }
.coment-n { font-size: 0.8rem; font-weight: 800; color: #fff; background: var(--acento);
  border-radius: 999px; padding: 1px 9px; min-width: 20px; text-align: center; }
.coment-form { display: flex; flex-direction: column; gap: 10px; margin-bottom: 22px; }
.coment-form textarea { width: 100%; padding: 0.7em 0.85em; border-radius: 12px; font: inherit; resize: vertical;
  color: var(--texto); background: var(--bg-2); border: 1px solid var(--panel-borde); }
.coment-form textarea:focus { outline: none; border-color: var(--acento); }
.coment-form button { align-self: flex-end; }
.coment-login { margin: 0 0 22px; }
.coment-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.coment { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: 14px;
  background: var(--panel); border: 1px solid var(--panel-borde); }
.coment-av { flex-shrink: 0; font-size: 1.4rem; line-height: 1; }
.coment-av .avatar-img, .coment-av .avatar-medal { width: 38px; height: 38px; }
.coment-cuerpo { flex: 1; min-width: 0; }
.coment-cab { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; margin-bottom: 3px; }
.coment-cab b { font-size: 0.95rem; }
.coment-fecha { color: var(--texto-2); font-size: 0.78rem; }
.coment-txt { margin: 0; white-space: pre-wrap; word-break: break-word; line-height: 1.5; }
.coment-del { flex-shrink: 0; background: none; border: none; cursor: pointer; font-size: 1rem; opacity: 0.5;
  padding: 2px 4px; border-radius: 8px; }
.coment-del:hover { opacity: 1; background: color-mix(in srgb, var(--coral, #ff6b6b) 18%, transparent); }
.coment-vacio { color: var(--texto-2); font-style: italic; padding: 6px 2px; }
/* Admin noticias — barra superior + diagnóstico */
.noti-top { display: flex; flex-wrap: wrap; gap: 10px; margin: 6px 0 12px; }
.noti-h-lista { margin: 22px 0 10px; font-size: 1.1rem; }
.noti-diag-res { margin: 4px 0 14px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--panel-borde); background: var(--bg-2); font-size: 0.9rem; }
.noti-diag-res p { margin: 4px 0; }
.noti-diag-res code { font-size: 0.82rem; }
/* Barra de consumo de IA (generaciones de hoy vs. cuota de referencia) */
.noti-consumo { margin: 4px 0 14px; padding: 12px 14px; border-radius: 12px;
  border: 1px solid var(--panel-borde); background: var(--bg-2); }
.consumo-cab { display: flex; align-items: center; gap: 8px; font-weight: 700; margin-bottom: 10px; }
.consumo-ref { margin-left: auto; padding: 2px 9px; font-size: 0.9rem; line-height: 1.4; }
.consumo-fila { display: flex; align-items: center; gap: 10px; margin: 7px 0; }
.consumo-etq { flex: 0 0 130px; font-size: 0.86rem; }
.consumo-barra { flex: 1; height: 12px; border-radius: 999px; background: var(--panel-borde); overflow: hidden; }
.consumo-relleno { display: block; height: 100%; border-radius: 999px; transition: width 0.3s ease; }
.c-bajo { background: #22c55e; }
.c-medio { background: #f59e0b; }
.c-alto { background: #ef4444; }
.consumo-num { flex: 0 0 auto; font-size: 0.82rem; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--texto-2); }
.consumo-nota { margin: 8px 0 0; font-size: 0.78rem; color: var(--texto-2); }
/* Editor de noticias en 3 pasos (fuente → revisar → publicar) */
.noti-paso { border: 1px solid var(--panel-borde); border-radius: 14px; padding: 14px 16px; margin: 14px 0; background: var(--bg-2); }
.noti-paso-cab { display: flex; align-items: center; gap: 9px; font-weight: 800; font-size: 1.02rem; margin-bottom: 6px; }
.noti-paso-num { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px;
  border-radius: 50%; background: var(--acento); color: #fff; font-size: 0.85rem; flex-shrink: 0; }

/* Moderación de comentarios */
.com-filtros { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 14px; }
.com-filtro.activo { background: var(--acento); color: #fff; border-color: var(--acento); }
.com-autor { white-space: nowrap; }
.com-autor .avatar-img, .com-autor .avatar-medal { width: 26px; height: 26px; vertical-align: middle; }
.com-txt { max-width: 360px; white-space: pre-wrap; word-break: break-word; }
.com-oculto { opacity: 0.55; }
/* Crear usuario a mano */
.u-crear-form { margin: 0 0 16px; padding: 14px 16px; border-radius: 14px;
  border: 1px solid var(--panel-borde); background: var(--bg-2); }
.u-crear-form h4 { margin: 0 0 4px; }
.u-crear-campos { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; margin: 10px 0; }
.u-crear-campos input, .u-crear-campos select { padding: 0.55em 0.7em; border-radius: 10px; font: inherit;
  color: var(--texto); background: var(--panel); border: 1px solid var(--panel-borde); }
.u-crear-btns { display: flex; gap: 8px; }

/* Usuarios */
.admin-buscar { display: flex; gap: 8px; margin-bottom: 14px; }
.admin-buscar input { flex: 1; padding: 0.55em 0.8em; border-radius: 10px; font: inherit;
  color: var(--texto); background: var(--bg-2); border: 1px solid var(--panel-borde); }
.admin-tabla-wrap { overflow-x: auto; }
.admin-tabla { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
.admin-tabla th, .admin-tabla td { text-align: start; padding: 10px 8px;
  border-bottom: 1px solid var(--panel-borde); vertical-align: middle; }
.admin-tabla th { color: var(--texto-2); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.03em; }
.admin-tabla select { padding: 0.35em 0.5em; border-radius: 8px; font: inherit;
  color: var(--texto); background: var(--bg-2); border: 1px solid var(--panel-borde); }
.admin-ban { color: var(--ala-coral); font-weight: 700; }
/* Plan del usuario en el admin: píldora clara Free / ⭐ Premium. */
.u-prem, .u-free { font-weight: 700; font-size: 0.78em; white-space: nowrap; border-radius: 999px; padding: 2px 9px; }
.u-prem { color: var(--ala-sun); background: color-mix(in srgb, var(--ala-sun) 18%, transparent); border: 1px solid color-mix(in srgb, var(--ala-sun) 45%, transparent); }
.u-free { color: var(--texto-2); background: color-mix(in srgb, var(--texto-2) 10%, transparent); border: 1px solid var(--panel-borde); }
.u-vidas { color: var(--ala-coral); font-weight: 700; font-size: 0.85em; white-space: nowrap; }

/* Páginas de resultado del pago */
.pago-pantalla { display: flex; justify-content: center; padding: 40px 16px; }
.pago-card { width: 100%; max-width: 480px; text-align: center; background: var(--panel); border: 1px solid var(--panel-borde); border-radius: var(--radio); padding: 36px 28px; box-shadow: 0 18px 50px rgba(0,0,0,.25); }
.pago-emoji { font-size: 3.4rem; display: block; margin-bottom: 8px; }
.pago-card h1 { margin: 0 0 10px; font-size: 1.6rem; }
.pago-card > p { color: var(--texto-2); margin: 0 0 20px; text-wrap: balance; }
.pago-exito { border-color: color-mix(in srgb, var(--ala-sun) 55%, var(--panel-borde)); }
.pago-perks { list-style: none; padding: 0; margin: 0 0 22px; display: flex; flex-direction: column; gap: 8px; text-align: left; max-width: 260px; margin-inline: auto; font-weight: 600; }
.pago-perks li { background: color-mix(in srgb, var(--acento) 10%, transparent); border-radius: 12px; padding: 8px 12px; }
.pago-btns { display: flex; flex-direction: column; gap: 10px; }
.pago-btns .btn { width: 100%; }
.u-acc { display: flex; gap: 6px; flex-wrap: wrap; }
.u-acc .btn { font-size: 0.82rem; padding: 0.3em 0.6em; }

/* Puerta de acceso para invitados */

.acceso-emoji { font-size: 2.6rem; display: block; margin-bottom: 8px; }

.acceso-libre { margin: 16px 0 0 !important; font-size: 0.85rem; }

/* Modal de acceso para invitados (blur traslúcido) */
body.modal-abierto { overflow: hidden; }
.modal-acceso { position: fixed; inset: 0; z-index: 1200; display: flex; align-items: center; justify-content: center; padding: 16px; }
.modal-acceso-fondo { position: absolute; inset: 0; background: color-mix(in srgb, var(--bg) 55%, transparent); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.modal-acceso-card { position: relative; z-index: 1; width: 100%; max-width: 400px; max-height: 92vh; overflow-y: auto; text-align: center;
  background: var(--panel); border: 1px solid var(--panel-borde); border-radius: var(--radio); padding: 26px 24px 22px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.4); animation: modalSube 0.18s ease-out; }
@keyframes modalSube { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .modal-acceso-card { animation: none; } }
.modal-acceso-x { position: absolute; top: 8px; right: 10px; background: none; border: none; font-size: 1.1rem; line-height: 1; cursor: pointer; color: var(--texto-2); padding: 6px; }
.modal-acceso-card h2 { margin: 0 0 6px; font-size: 1.35rem; }
.modal-acceso-sub { color: var(--texto-2); font-size: 0.9rem; margin: 0 0 16px; }
.modal-acceso-tabs { display: flex; gap: 8px; margin-bottom: 16px; }
.ma-tab { flex: 1; padding: 9px; border-radius: 999px; border: 1px solid var(--panel-borde); background: none; color: var(--texto); font-weight: 700; cursor: pointer; }
.ma-tab.activa { background: var(--acento); color: #fff; border-color: transparent; }
.modal-acceso-card .campo { text-align: left; }
/* Diálogo genérico (función dialogo(): reemplaza prompt/confirm nativos) */
.dlg-card { max-width: 430px; text-align: left; }
.dlg-titulo { margin: 0 4px 8px 0; font-size: 1.2rem; }
.dlg-msg { color: var(--texto-2); font-size: 0.92rem; margin: 0 0 14px; white-space: pre-line; line-height: 1.45; }
.dlg-input { width: 100%; box-sizing: border-box; padding: 11px 12px; border-radius: 12px;
  border: 1px solid var(--panel-borde); background: var(--bg-2); color: var(--texto); font-size: 1rem; margin: 0 0 16px; }
.dlg-input:focus { outline: none; border-color: var(--acento); }
.dlg-acciones { display: flex; gap: 10px; justify-content: flex-end; }
.ma-sep { display: flex; align-items: center; gap: 10px; margin: 14px 0 10px; color: var(--texto-2); font-size: 0.8rem; }
.ma-sep::before, .ma-sep::after { content: ""; flex: 1; height: 1px; background: var(--panel-borde); }
.ma-gbtn { display: flex; justify-content: center; }
.ma-social-btns { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.ma-fbbtn { display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  width: 300px; max-width: 100%; padding: 10px 16px; border-radius: 999px; border: 0;
  background: #1877f2; color: #fff; font-weight: 700; font-size: 0.95rem; cursor: pointer; }
.ma-fbbtn:hover { background: #166fe0; }
.ma-fbicon { display: inline-grid; place-items: center; width: 22px; height: 22px;
  border-radius: 50%; background: #fff; color: #1877f2; font-weight: 900; font-family: Georgia, serif; }
.btn-peligro { background: var(--ala-coral); color: #fff; border: none; }
.admin-pag { display: flex; align-items: center; gap: 12px; margin-top: 16px; justify-content: center; }

/* Reportes */
.admin-filtros { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.chip-filtro { background: var(--panel); border: 1px solid var(--panel-borde); color: var(--texto-2);
  font: inherit; font-weight: 600; padding: 6px 14px; border-radius: 999px; cursor: pointer; }
.chip-filtro.activo { background: var(--acento); color: var(--ala-ink); border-color: var(--acento); }
.rep-card { background: var(--panel); border: 1px solid var(--panel-borde); border-radius: var(--radio);
  padding: 14px 16px; margin-bottom: 12px; border-inline-start: 4px solid var(--acento); }
.rep-card.rep-closed { border-inline-start-color: var(--texto-2); opacity: 0.72; }
.rep-card.rep-reviewing { border-inline-start-color: var(--ala-sun); }
.rep-cab { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.rep-tipo { font-weight: 800; text-transform: uppercase; font-size: 0.75rem; letter-spacing: 0.04em;
  background: var(--bg-2); border: 1px solid var(--panel-borde); border-radius: 6px; padding: 2px 8px; }
.rep-fecha { color: var(--texto-2); font-size: 0.82rem; }
.rep-cab select { margin-inline-start: auto; padding: 0.3em 0.5em; border-radius: 8px; font: inherit;
  color: var(--texto); background: var(--bg-2); border: 1px solid var(--panel-borde); }
.rep-de { margin: 0 0 4px; }
.rep-asunto { font-weight: 700; margin: 0 0 4px; }
.rep-msg { margin: 0; color: var(--texto-2); white-space: pre-wrap; }
.rep-json { margin: 0; font-size: 0.82rem; overflow-x: auto; color: var(--texto-2); }

/* ── Pausa patrocinada (anuncio VAST) ── */
.ad-overlay { position: fixed; inset: 0; z-index: 9999; display: flex;
  align-items: center; justify-content: center; padding: 16px;
  background: color-mix(in srgb, var(--bg) 55%, transparent);
  backdrop-filter: blur(8px) saturate(140%); -webkit-backdrop-filter: blur(8px) saturate(140%); }
.ad-card { background: var(--panel); border: 1px solid var(--panel-borde);
  border-radius: var(--radio); padding: 18px; width: min(680px, 96vw);
  backdrop-filter: blur(16px) saturate(140%); -webkit-backdrop-filter: blur(16px) saturate(140%);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5); }
.ad-titulo { margin: 0 0 10px; font-weight: 800; }
.ad-card.ad-directo { width: min(420px, 94vw); text-align: center; }
.ad-video-caja { position: relative; background: #000; border-radius: 12px;
  overflow: hidden; aspect-ratio: 16 / 9; cursor: pointer; }
.ad-video { width: 100%; height: 100%; object-fit: contain; display: block; background: #000; }
.ad-sonido { position: absolute; bottom: 10px; right: 10px; border: none; cursor: pointer;
  background: rgba(0, 0, 0, 0.6); color: #fff; border-radius: 999px;
  width: 40px; height: 40px; font-size: 1.1rem; }
.ad-nota { color: var(--texto-2); font-size: 0.82rem; margin: 10px 0 0; text-align: center; }
.ad-acciones { display: flex; justify-content: flex-end; margin-top: 12px; }
.ad-saltar:disabled { opacity: 0.5; cursor: not-allowed; }

/* ── Gamificación (F5) ── */
.gami { margin: 14px 0 18px; }
.gami-stats { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.gami-stat { flex: 1; min-width: 130px; background: var(--panel); border: 1px solid var(--panel-borde);
  border-radius: 14px; padding: 12px 14px; display: flex; align-items: center; gap: 10px; }
.gami-ico { font-size: 1.6rem; }
.gami-stat b { font-size: 1.4rem; }
.gami-stat small { color: var(--texto-2); display: block; }
.perfil-sep { border: 0; height: 2px; margin: 22px 0; border-radius: 2px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--acento) 55%, transparent), transparent); }
.gami-h { margin: 8px 0 10px; font-size: 1rem; display: flex; align-items: center; gap: 8px; }
.gami-h-grande { font-size: 1.5rem; font-family: var(--display, inherit); margin: 4px 0 16px; }
.gami-h-grande .gami-h-n { font-size: 0.85rem; }
.gami-h-n, .badge-cat-n { font-size: 0.78rem; font-weight: 700; color: var(--texto-2);
  background: color-mix(in srgb, var(--acento) 12%, transparent); border-radius: 999px; padding: 2px 9px; }
.badge-cat { margin: 6px 0 16px; }
.badge-cat-h { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font-size: 0.9rem;
  padding-bottom: 6px; border-bottom: 1px solid var(--panel-borde); }
.badge-cat-n { margin-inline-start: auto; }
.badges-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; }
.badge { --cat: #8b8bd8; text-align: center; padding: 12px 6px; border-radius: 14px;
  border: 1px solid var(--panel-borde); background: var(--panel); }
/* Medallón estilo videojuego: aro metálico + disco con el color de la categoría
   + brillo superior; el emoji va centrado. 100% CSS (sin imágenes de stock). */
.badge-medal { position: relative; display: grid; place-items: center; width: 58px; height: 58px;
  margin: 2px auto 0; border-radius: 50%;
  background:
    radial-gradient(circle at 50% 34%, color-mix(in srgb, var(--cat) 55%, #fff) 0%, var(--cat) 46%, color-mix(in srgb, var(--cat) 70%, #000) 100%);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--cat) 40%, #d9d9e6),
    0 0 0 5px color-mix(in srgb, var(--cat) 60%, #6b6b7a),
    inset 0 -4px 8px color-mix(in srgb, var(--cat) 70%, #000),
    inset 0 4px 8px color-mix(in srgb, #ffffff 70%, transparent);
}
/* brillo/gloss superior */
.badge-medal::before { content: ""; position: absolute; top: 6px; left: 12px; right: 12px; height: 40%;
  border-radius: 50%; background: linear-gradient(180deg, rgba(255,255,255,0.55), rgba(255,255,255,0)); }
.badge-ico { position: relative; font-size: 1.75rem; line-height: 1; display: block;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,0.35)); }
.badge-nom { font-size: 0.78rem; font-weight: 700; display: block; margin-top: 6px; }
.badge-off { opacity: 0.7; }
.badge-off .badge-medal { filter: grayscale(1) brightness(0.85); box-shadow: 0 0 0 3px #c9c9d2, 0 0 0 5px #8a8a95, inset 0 -4px 8px rgba(0,0,0,0.35); }
.badge-off .badge-ico { opacity: 0.55; }
.badge-on { border-color: var(--cat); box-shadow: 0 0 0 2px color-mix(in srgb, var(--cat) 22%, transparent); }
.badge-on .badge-medal { box-shadow: 0 0 0 3px color-mix(in srgb, var(--cat) 45%, #ffe08a),
    0 0 0 5px color-mix(in srgb, var(--cat) 65%, #7a5a12),
    0 0 12px color-mix(in srgb, var(--cat) 55%, transparent),
    inset 0 -4px 8px color-mix(in srgb, var(--cat) 70%, #000),
    inset 0 4px 8px rgba(255,255,255,0.6); }
.insignias-nuevas { margin-top: 12px; padding: 10px 14px; border-radius: 12px;
  background: color-mix(in srgb, var(--ala-sun) 18%, transparent); font-weight: 700; }
.badge-nuevo { display: inline-block; margin: 4px 6px 0 0; padding: 4px 10px; border-radius: 999px;
  background: var(--bg-2); border: 1px solid var(--panel-borde); font-size: 0.85rem; }

.rank-lista { list-style: none; padding: 0; margin: 8px 0 0; }
.rank-fila { display: flex; align-items: center; gap: 12px; padding: 12px 10px;
  border-bottom: 1px solid var(--panel-borde); }
.rank-pos { font-size: 1.15rem; font-weight: 800; min-width: 2.2rem; text-align: center; }
.rank-nom { flex: 1; font-weight: 700; }
.rank-xp { color: var(--texto-2); font-weight: 700; }
.rank-yo { background: color-mix(in srgb, var(--acento) 12%, transparent); border-radius: 10px; }

/* ── Ligas semanales ── */
.liga-enlace { display: inline-block; margin: 2px 0 14px; font-weight: 700; color: var(--acento); text-decoration: none; }
.liga-enlace:hover { text-decoration: underline; }
.liga-cab { display: flex; align-items: center; gap: 14px; margin-bottom: 6px; }
.liga-medalla { font-size: 2.6rem; line-height: 1; filter: drop-shadow(0 4px 10px color-mix(in srgb, var(--liga-c, var(--acento)) 55%, transparent)); }
.liga-nombre { margin: 0; font-size: 1.7rem; color: var(--liga-c, var(--texto)); }
.liga-sub { margin: 2px 0 0; color: var(--texto-2); font-size: 0.9rem; font-weight: 700; }
.liga-ayuda { color: var(--texto-2); font-size: 0.86rem; margin: 6px 0 14px; }
.liga-banner { border-radius: 12px; padding: 10px 14px; font-weight: 700; font-size: 0.92rem; margin: 8px 0 12px; }
.liga-banner-up { background: color-mix(in srgb, #29b765 18%, transparent); border: 1px solid color-mix(in srgb, #29b765 45%, transparent); color: #29b765; }
.liga-banner-down { background: color-mix(in srgb, #e05a4a 15%, transparent); border: 1px solid color-mix(in srgb, #e05a4a 40%, transparent); color: #e05a4a; }
.liga-lista { list-style: none; padding: 0; margin: 0; }
.liga-fila { display: flex; align-items: center; gap: 12px; padding: 11px 12px; border-radius: 10px; border-left: 3px solid transparent; }
.liga-fila + .liga-fila { border-top: 1px solid var(--panel-borde); }
.liga-pos { font-weight: 800; min-width: 2rem; text-align: center; color: var(--texto-2); }
.liga-nom { flex: 1; font-weight: 700; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.liga-xp { color: var(--texto-2); font-weight: 700; }
/* zonas: los primeros suben (verde), los últimos bajan (rojo) */
.liga-promo { background: color-mix(in srgb, #29b765 9%, transparent); border-left-color: #29b765; }
.liga-baja { background: color-mix(in srgb, #e05a4a 8%, transparent); border-left-color: #e05a4a; }
.liga-yo { outline: 2px solid var(--acento); outline-offset: -2px; }
/* Tarjeta de liga en el dashboard */
.dash-liga { display: flex; align-items: center; gap: 14px; margin-top: 16px; padding: 14px 18px; text-decoration: none; color: var(--texto);
  background: var(--panel); border: 1px solid var(--panel-borde); border-left: 4px solid var(--liga-c, var(--acento)); border-radius: var(--radio); transition: transform 0.15s; }
.dash-liga:hover { transform: translateY(-2px); text-decoration: none; }
.dash-liga:hover b, .dash-liga:hover small { text-decoration: none; }
.dash-liga-med { font-size: 2rem; line-height: 1; }
.dash-liga-txt { display: flex; flex-direction: column; }
.dash-liga-txt b { font-size: 1.05rem; }
.dash-liga-txt small { color: var(--texto-2); }
.dash-liga-arr { margin-left: auto; font-size: 1.3rem; color: var(--liga-c, var(--acento)); }

@media (max-width: 760px) {
  .practica-taller { grid-template-columns: 1fr; }
  .practica-cab h1 { font-size: 1.4rem; }
}

/* ── Mapa isométrico del mundo (src/map/map.js) ───────────────
   Scopeado bajo .mm-host con tokens --mm-* propios (no colisiona con el SPA).
   El SPA es oscuro por defecto; [data-theme="light"] da la variante clara.
   El --tc/--tc-ink los fija el módulo por JS (color del mundo). */
.curso-mapa { padding-top: 10px; }
/* Cabecera del curso: volver (izq) + «Estudia la teoría» (der, enlace externo). */
.curso-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.curso-top .volver { margin-bottom: 0; }
.curso-teoria { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: 0.9rem;
  color: var(--texto); text-decoration: none; padding: 7px 14px; border-radius: 999px;
  background: var(--panel); border: 1px solid var(--panel-borde); transition: border-color 0.15s, transform 0.15s; }
.curso-examen { display: inline-flex; align-items: center; gap: 6px; font-weight: 800; font-size: 0.9rem; cursor: pointer;
  color: #fff; padding: 7px 14px; border-radius: 999px; border: 1px solid transparent;
  background: linear-gradient(135deg, var(--color-mundo, var(--acento)), color-mix(in srgb, var(--color-mundo, var(--acento)) 55%, #1B1035)); transition: transform 0.15s; }
.curso-examen:hover { transform: translateY(-1px); }
.examen-intro { margin: 0 0 12px; color: var(--texto-2); font-size: 0.9rem; line-height: 1.5; }
.examen-lista { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 8px; }
.examen-item { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 12px; background: var(--bg-2); border: 1px solid var(--panel-borde); }
.examen-item.ok { border-color: color-mix(in srgb, var(--acento) 45%, var(--panel-borde)); }
.examen-chk { font-size: 1.1rem; width: 1.4em; text-align: center; }
.examen-txt { flex: 1; min-width: 0; font-size: 0.9rem; } .examen-txt small { display: block; color: var(--texto-2); }
.examen-ir { white-space: nowrap; font-weight: 700; font-size: 0.85rem; }
.examen-pie { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-top: 4px; }
.examen-prog { font-weight: 800; }
.examen-nota { margin: 10px 0 0; font-size: 0.8rem; color: var(--texto-2); }
.curso-teoria:hover { border-color: var(--color-mundo, var(--acento)); transform: translateY(-1px); text-decoration: none; }
.mm-host { --mm-panel: rgba(40,34,54,.82); --mm-panel-2: rgba(40,34,54,.62); --mm-borde: rgba(255,255,255,.14); --mm-texto: #efeaf6; --mm-texto-2: rgba(239,234,246,.66); --mm-sombra: 0 14px 32px rgba(0,0,0,.42); --mm-cream: #f4eefb; display: block; font-family: "Inter", system-ui, sans-serif; }
[data-theme="light"] .mm-host { --mm-panel: rgba(255,252,246,.92); --mm-panel-2: rgba(255,252,246,.72); --mm-borde: rgba(90,74,98,.16); --mm-texto: #5a4a63; --mm-texto-2: rgba(90,74,98,.6); --mm-sombra: 0 10px 24px rgba(120,100,130,.2); --mm-cream: #fff8ec; }
.mm-cab { display: flex; gap: 13px; align-items: center; max-width: 720px; margin: 6px auto 12px; background: var(--mm-panel); border: 1px solid var(--mm-borde); border-left: 5px solid var(--tc); border-radius: 18px; padding: 12px 15px; box-shadow: var(--mm-sombra); backdrop-filter: blur(10px); }
.mm-badge { flex: 0 0 auto; width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; font-size: 25px; background: color-mix(in srgb, var(--tc) 20%, var(--mm-cream)); border: 2px solid color-mix(in srgb, var(--tc) 42%, transparent); }
.mm-txt h1 { font-family: "Baloo 2", system-ui, sans-serif; font-weight: 800; font-size: 1.35rem; margin: 0; color: var(--mm-texto); text-wrap: balance; }
.mm-txt p { margin: 3px 0 0; color: var(--mm-texto-2); font-size: .82rem; line-height: 1.45; max-width: 58ch; }
.mm-sub { display: inline-block; margin-top: 4px; color: var(--tc); font-weight: 700; font-size: .78rem; }
/* Filtro por rango del mapa (Inicio/Aprendiz/Intermedio/Experto + Todos). */
.mm-filtros { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; max-width: 720px; margin: 0 auto 12px; padding: 0 4px; }
.mm-fchip { font-family: "Baloo 2", system-ui, sans-serif; font-weight: 700; font-size: .8rem; cursor: pointer; white-space: nowrap;
  padding: 6px 14px; border-radius: 999px; color: var(--mm-texto); background: var(--mm-panel);
  border: 1.5px solid var(--mm-borde); box-shadow: var(--mm-sombra); transition: border-color .15s, transform .12s, background .15s, color .15s; }
.mm-fchip:hover { transform: translateY(-1px); border-color: var(--tc); }
.mm-fchip.on { background: var(--tc); color: #fff; border-color: var(--tc); }
.mm-wrap { position: relative; max-width: 700px; margin: 0 auto; }
.mm-scaler { position: absolute; top: 0; left: 0; width: 700px; transform-origin: top left; } /* escala JS para responsive */
/* Móvil: el mapa a tamaño real dentro de una ventana que se arrastra con el dedo. */
.mm-wrap.mm-scroll {
  max-width: 100%; overflow: auto; border-radius: 28px;
  -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
  touch-action: pan-x pan-y; box-shadow: 0 14px 34px rgba(120,100,130,.18);
  scrollbar-width: none;
}
.mm-wrap.mm-scroll::-webkit-scrollbar { width: 0; height: 0; }
.mm-sky { position: absolute; inset: 0; z-index: 0; border-radius: 28px; box-shadow: 0 14px 34px rgba(120,100,130,.18); }
.mm-lienzo { position: relative; z-index: 1; margin: 0 auto; }
.mm-terreno { position: absolute; inset: 0; z-index: 1; }
.mm-deco { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.mm-host .tile, .mm-host .marker, .mm-host .plaque, .mm-biome, .mm-badge, .mm-pop h3, .mm-btn { font-family: "Baloo 2", system-ui, sans-serif; }
.mm-biome { position: absolute; z-index: 5; transform: translate(-50%,-50%); display: flex; align-items: center; gap: 6px; padding: 5px 13px; border-radius: 999px; font-weight: 800; font-size: 12px; white-space: nowrap; color: #574a63; background: var(--mm-cream); border: 2px solid var(--tc); box-shadow: var(--mm-sombra); }
.mm-nodo { position: absolute; z-index: 3; transform: translate(-50%,-76%); border: 0; background: none; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 0; }
.mm-host .tile { width: 46px; height: 46px; border-radius: 16px; background: var(--mm-cream); border: 3px solid var(--tc); position: relative; display: grid; place-items: center; color: var(--tc-ink); font-weight: 800; font-size: 21px; box-shadow: 0 5px 0 color-mix(in srgb, var(--tc) 45%, #8a7a90), 0 8px 14px rgba(120,100,130,.3); transition: transform .12s; }
.mm-host .tile::after { content: ""; position: absolute; top: 5px; left: 8px; width: 16px; height: 9px; border-radius: 9px; background: rgba(255,255,255,.55); }
.mm-nodo:hover .tile { transform: translateY(-2px); }
.mm-nodo:focus-visible .tile { outline: 3px solid var(--tc); outline-offset: 3px; }
.mm-host .n-done .tile { background: var(--tc); color: #fff; }
.mm-host .n-done .tile .num { display: none; }
.mm-host .n-done .tile > .chk { display: block; }
.mm-host .chk { display: none; font-size: 23px; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.2); }
.mm-host .n-lock .tile { background: #e7e3ee; border-color: #cfc9db; color: #b0aabf; box-shadow: 0 5px 0 #d3cddd, 0 8px 12px rgba(120,100,130,.2); }
.mm-host .n-lock .tile::after { opacity: .4; }
.mm-host .n-skip .tile { border-style: dashed; background: color-mix(in srgb, var(--tc) 12%, var(--mm-cream)); } /* rango aprobado por examen: abierto, sin ✓ */
.mm-host .n-current .tile { box-shadow: 0 5px 0 color-mix(in srgb, var(--tc) 45%, #8a7a90), 0 0 0 6px color-mix(in srgb, var(--tc) 30%, transparent), 0 8px 15px rgba(120,100,130,.32); }
.mm-host .marker { position: absolute; bottom: 100%; margin-bottom: 11px; left: 50%; transform: translateX(-50%); background: var(--mm-cream); color: #574a63; border: 2px solid var(--tc); border-radius: 12px; padding: 3px 9px; font-weight: 800; font-size: 12px; white-space: nowrap; box-shadow: var(--mm-sombra); animation: mm-bob 1.3s ease-in-out infinite; }
.mm-host .marker::after { content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: 6px solid transparent; border-top-color: var(--mm-cream); }
@keyframes mm-bob { 0%,100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(-4px); } }
.mm-host .plaque { background: var(--mm-cream); color: #574a63; border: 2px solid var(--tc); border-radius: 11px; padding: 2px 9px; font-weight: 800; font-size: 10.5px; max-width: 116px; text-align: center; line-height: 1.12; text-wrap: balance; box-shadow: 0 4px 9px rgba(120,100,130,.3); position: relative; z-index: 4; }
.mm-host .chold { position: relative; display: grid; place-items: center; }
.mm-host .castle { width: 96px; height: auto; position: relative; z-index: 1; filter: drop-shadow(0 9px 7px rgba(120,100,130,.42)); }
.mm-host .n-final .castle { width: 134px; height: auto; filter: drop-shadow(0 11px 9px rgba(120,100,130,.5)); }
.mm-host .n-boss .chold::before, .mm-host .n-final .chold::before { content: ""; position: absolute; z-index: 0; width: 132%; height: 60%; bottom: 2%; left: -16%; border-radius: 50%; background: radial-gradient(50% 62% at 50% 56%, color-mix(in srgb, var(--tc) 50%, transparent), transparent 72%); filter: blur(5px); }
.mm-host .n-final .chold::before { width: 142%; left: -21%; height: 66%; background: radial-gradient(50% 62% at 50% 56%, color-mix(in srgb, var(--tc) 58%, transparent), transparent 72%); animation: mm-glow 2.6s ease-in-out infinite; }
.mm-host .n-lock .chold::before { opacity: .22; animation: none; }
@keyframes mm-glow { 0%,100% { opacity: .72; transform: scale(1); } 50% { opacity: 1; transform: scale(1.07); } }
.mm-host .n-boss.n-lock .castle, .mm-host .n-final.n-lock .castle { filter: grayscale(.7) opacity(.6) drop-shadow(0 6px 5px rgba(120,100,130,.3)); }
.mm-host .lockbadge { position: absolute; font-size: 20px; top: 42%; left: 50%; transform: translate(-50%,-50%); }
.mm-pop-bg { position: fixed; inset: 0; z-index: 1200; background: rgba(70,58,86,.42); backdrop-filter: blur(2px); display: none; align-items: flex-end; justify-content: center; padding: 0 12px 18px; }
.mm-pop-bg.on { display: flex; }
.mm-pop { width: 100%; max-width: 420px; background: var(--mm-panel); backdrop-filter: blur(18px); border: 1px solid var(--mm-borde); border-radius: 24px; padding: 20px; box-shadow: var(--mm-sombra); animation: mm-rise .22s cubic-bezier(.2,.9,.3,1); color: var(--mm-texto); }
@keyframes mm-rise { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
.mm-pop-badge { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: 12px; padding: 4px 11px; border-radius: 999px; background: color-mix(in srgb, var(--tc) 16%, transparent); color: var(--mm-texto); border: 1px solid color-mix(in srgb, var(--tc) 40%, transparent); }
.mm-pop h3 { font-weight: 800; font-size: 1.35rem; margin: 12px 0 4px; text-wrap: balance; color: var(--mm-texto); }
.mm-meta { color: var(--mm-texto-2); font-size: 13px; margin: 0 0 16px; display: flex; gap: 14px; flex-wrap: wrap; }
.mm-meta b { color: var(--mm-texto); }
.mm-pop-cta { display: flex; gap: 10px; }
.mm-btn { flex: 1; border: 0; border-radius: 16px; padding: 13px; font-weight: 800; font-size: 15px; cursor: pointer; background: var(--tc); color: #fff; box-shadow: 0 5px 0 color-mix(in srgb, var(--tc) 55%, #8a7a90); transition: transform .1s; }
.mm-btn:active { transform: translateY(3px); box-shadow: 0 2px 0 color-mix(in srgb, var(--tc) 55%, #8a7a90); }
.mm-btn.ghost { background: var(--mm-panel-2); color: var(--mm-texto); box-shadow: none; border: 1px solid var(--mm-borde); flex: 0 0 auto; width: 52px; }
.mm-btn[disabled] { background: #e7e3ee; color: #b0aabf; box-shadow: none; cursor: not-allowed; }
@media (prefers-reduced-motion: reduce) { .mm-host .marker, .mm-pop, .mm-host .n-final .chold::before { animation: none; } }

/* ── Tier-2: camino de ejercicios del nivel (/nivel/<tech>/<carpeta>) ──
   Reutiliza el estilo .mm-host (fichas/estados/marker); sólo añade la
   disposición serpenteante y el nodo-jefe del desafío final. */

.nv-cara { font-size: 24px; }
.nv-boss .tile { width: 62px; height: 62px; font-size: 26px; box-shadow: 0 6px 0 color-mix(in srgb, var(--tc) 45%, #8a7a90), 0 0 0 6px color-mix(in srgb, var(--tc) 22%, transparent), 0 10px 18px rgba(120,100,130,.32); }

/* ── Vidas (empuje suave; localStorage — nunca bloquea) ── */
.vidas-chip, .mochila-chip { display: inline-flex; align-items: center; gap: 3px; background: var(--panel); border: 1px solid var(--panel-borde); color: var(--texto); border-radius: 12px; padding: 8px 10px; cursor: pointer; font-weight: 800; font-size: 0.95rem; line-height: 1; font-variant-numeric: tabular-nums; }
.vidas-chip:hover, .mochila-chip:hover { border-color: var(--acento); }
.mochila-n { background: var(--acento); color: #fff; border-radius: 999px; font-size: 0.68rem; min-width: 15px; height: 15px; display: inline-flex; align-items: center; justify-content: center; padding: 0 3px; }
.vidas-chip.vidas-vacio { border-color: #e5566a; box-shadow: 0 0 0 2px rgba(229,86,106,.22); }
@keyframes vidas-shake { 0%,100% { transform: translateX(0); } 20% { transform: translateX(-3px); } 40% { transform: translateX(3px); } 60% { transform: translateX(-2px); } 80% { transform: translateX(2px); } }
.vidas-chip.vidas-shake { animation: vidas-shake 0.45s; }
.vidas-modal { position: fixed; inset: 0; z-index: 1300; background: color-mix(in srgb, var(--bg) 55%, transparent); backdrop-filter: blur(8px) saturate(140%); -webkit-backdrop-filter: blur(8px) saturate(140%); display: flex; align-items: center; justify-content: center; padding: 18px; }
.vidas-caja { position: relative; width: 100%; max-width: 380px; background: var(--panel); border: 1px solid var(--panel-borde); border-radius: 22px; padding: 26px 22px 20px; text-align: center; box-shadow: 0 24px 60px rgba(0,0,0,.5); backdrop-filter: blur(16px) saturate(140%); -webkit-backdrop-filter: blur(16px) saturate(140%); animation: mm-rise 0.22s cubic-bezier(.2,.9,.3,1); }
.vidas-x { position: absolute; top: 10px; right: 12px; background: none; border: 0; color: var(--texto-2); font-size: 1.15rem; cursor: pointer; line-height: 1; }
.vidas-hearts { font-size: 1.7rem; letter-spacing: 5px; margin-bottom: 8px; }
.vc-h { position: relative; display: inline-block; }
.vc-h.off { filter: grayscale(1) opacity(0.55); }
/* medio corazón (estilo Zelda): un ❤️ recortado a la mitad izquierda sobre el 🤍 */
.vc-h.half > i { position: absolute; left: 0; top: 0; font-style: normal; clip-path: inset(0 50% 0 0); }
.vidas-caja h3 { font-size: 1.2rem; margin: 2px 0 6px; text-wrap: balance; }
.vidas-recarga { color: var(--texto-2); font-size: 0.9rem; margin: 0 0 8px; }
.vidas-regla { margin: 0 0 16px; padding: 8px 12px; border-radius: 12px; background: var(--panel);
  border: 1px solid var(--panel-borde); font-size: 0.82rem; font-weight: 600; }
.vidas-cd { margin: 0; padding: 10px 12px; border-radius: 12px; font-size: 0.9rem; font-weight: 600;
  color: var(--texto); background: color-mix(in srgb, var(--acento) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--acento) 30%, transparent); }
.vidas-acciones { display: flex; flex-direction: column; gap: 9px; }
.vidas-acciones .btn { width: 100%; }

.vidas-nota { margin: 12px 0 0; color: var(--acento); font-weight: 600; font-size: 0.9rem; }
.vidas-pie { margin: 14px 0 0; color: var(--texto-2); font-size: 0.78rem; opacity: 0.8; }
.vidas-inf { font-size: 2rem; letter-spacing: 0; }

/* ── Ítems (épico Zelda): medallón, popup sorpresa y mochila ── */
.item-medallon { width: 74px; height: 74px; margin: 4px auto 8px; border-radius: 50%; display: flex;
  align-items: center; justify-content: center; font-size: 2.1rem;
  background: radial-gradient(circle at 34% 28%, #fff6, transparent 60%), var(--panel-2, var(--panel));
  border: 3px solid var(--ala-cyan, var(--acento)); box-shadow: 0 6px 20px rgba(0,0,0,.35); }
.item-r-comun { border-color: #8aa0b4; box-shadow: 0 0 0 3px rgba(138,160,180,.18), 0 6px 20px rgba(0,0,0,.35); }
.item-r-raro  { border-color: var(--ala-cyan, #34c6d6); box-shadow: 0 0 0 3px rgba(52,198,214,.22), 0 6px 22px rgba(0,0,0,.4); }
.item-r-epico { border-color: var(--ala-sun, #f2b134); box-shadow: 0 0 0 3px rgba(242,177,52,.30), 0 8px 26px rgba(242,177,52,.25); }
.item-pop-caja { max-width: 340px; }
.item-pop-tit { margin: 0 0 4px; font-weight: 800; color: var(--acento); letter-spacing: .3px; }
.item-pop-caja .item-medallon { animation: item-pop-in .4s cubic-bezier(.2,1.3,.4,1); }
@keyframes item-pop-in { 0% { transform: scale(.4) rotate(-12deg); opacity: 0; } 100% { transform: scale(1) rotate(0); opacity: 1; } }
.item-pop-desc { color: var(--texto-2); font-size: 0.92rem; margin: 2px 0 16px; }
/* Mochila */
.mochila-caja { max-width: 460px; text-align: left; }
.mochila-caja h3 { text-align: center; }
.mochila-lista { display: flex; flex-direction: column; gap: 10px; margin-top: 6px; max-height: 60vh; overflow-y: auto; }
.mochila-item { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border: 1px solid var(--panel-borde); border-radius: 14px; }
.mochila-item .item-medallon { width: 46px; height: 46px; font-size: 1.4rem; margin: 0; flex: 0 0 auto; }
.mochila-item-txt { flex: 1 1 auto; min-width: 0; }
.mochila-item-txt small { display: block; color: var(--texto-2); font-size: 0.8rem; margin-top: 2px; }
.mochila-q { color: var(--acento); font-weight: 800; font-variant-numeric: tabular-nums; }
.mochila-item .btn { flex: 0 0 auto; padding: 6px 12px; font-size: 0.85rem; }
.mochila-vacia { color: var(--texto-2); text-align: center; padding: 18px 6px; }
/* Etiqueta de rareza (pastilla) — reutiliza item-r-* pero SIN el glow del medallón. */
.item-rareza { display: inline-block; box-shadow: none; border: 1px solid var(--panel-borde);
  border-radius: 999px; padding: 1px 8px; font-size: 0.62rem; font-weight: 800;
  letter-spacing: .5px; text-transform: uppercase; vertical-align: middle; line-height: 1.6; }
.item-rareza.item-r-comun { color: #8aa0b4; border-color: #8aa0b4; background: rgba(138,160,180,.12); }
.item-rareza.item-r-raro  { color: var(--ala-cyan, #34c6d6); border-color: var(--ala-cyan, #34c6d6); background: rgba(52,198,214,.12); }
.item-rareza.item-r-epico { color: var(--ala-sun, #f2b134); border-color: var(--ala-sun, #f2b134); background: rgba(242,177,52,.14); }
.item-pop-caja .item-rareza { margin: 0 0 8px; }
.mochila-item-txt .item-rareza { margin-left: 6px; }
/* Efectos activos dentro de la mochila */
.mochila-efectos { border: 1px solid var(--panel-borde); border-radius: 14px; padding: 8px 12px; margin: 6px 0 12px;
  background: color-mix(in srgb, var(--acento) 6%, transparent); }
.mochila-sub { margin: 0 0 6px; font-weight: 800; color: var(--acento); font-size: 0.9rem; }
.mef-lista { display: flex; flex-wrap: wrap; gap: 8px; }
.mef { display: inline-flex; align-items: center; gap: 5px; font-size: 0.85rem; background: var(--panel);
  border: 1px solid var(--panel-borde); border-radius: 999px; padding: 4px 10px; }
.mef-e { font-size: 1.05rem; }
.mef b { color: var(--acento); font-variant-numeric: tabular-nums; }
/* Indicador de efectos activos en el header (junto a los corazones) */
.efectos-activos { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; }
.efc { display: inline-flex; align-items: center; gap: 2px; background: var(--panel); border: 1px solid var(--panel-borde);
  border-radius: 10px; padding: 4px 6px; line-height: 1; font-size: 0.9rem; }
.efc i { font-style: normal; font-weight: 800; font-size: 0.7rem; color: var(--texto-2); font-variant-numeric: tabular-nums; }
.efectos-activos:hover .efc { border-color: var(--acento); }

/* ── Premium: selector de planes + toast de pago ── */
.planes-caja { max-width: 440px; }
.planes-sub { color: var(--texto-2); font-size: 0.9rem; margin: 0 0 8px; }
.planes-tarjeta { font-size: 0.85rem; margin: 0 0 14px; padding: 8px 10px; border-radius: 10px; background: color-mix(in srgb, var(--acento) 10%, transparent); border: 1px solid color-mix(in srgb, var(--acento) 25%, transparent); }
.planes-lista { display: flex; flex-direction: column; gap: 10px; }
.plan-card { border: 1px solid var(--panel-borde); border-radius: 14px; padding: 12px 14px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; text-align: left; }
.plan-nombre { font-weight: 700; }
.plan-precio { color: var(--acento); font-weight: 800; margin-left: auto; }
.plan-precio small { color: var(--texto-2); font-weight: 600; font-size: 0.7rem; }
.plan-btns { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 8px; }
.plan-btns .btn { flex: 1 1 auto; font-size: 0.85rem; padding: 8px 10px; }
.planes-nota { margin: 12px 0 0; color: #e05a4a; font-weight: 600; font-size: 0.85rem; }
/* Códigos promo (Fase D): descuento aplicado + cuadro de canje en el modal de pago. */
.plan-precio-viejo { color: var(--texto-2); font-weight: 600; font-size: 0.82em; opacity: 0.7; }
.planes-desc { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 12px; padding: 8px 12px; border-radius: 10px; font-size: 0.86rem; font-weight: 700;
  background: color-mix(in srgb, var(--ala-sun, #ffc53d) 16%, transparent); border: 1px solid color-mix(in srgb, var(--ala-sun, #ffc53d) 40%, transparent); }
.planes-desc-quitar { margin-left: auto; background: none; border: 0; color: var(--acento); font: inherit; font-size: 0.82rem; cursor: pointer; text-decoration: underline; }
.planes-promo { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--panel-borde); text-align: left; }
.planes-promo-lbl { display: block; font-weight: 700; font-size: 0.9rem; margin-bottom: 6px; }
.planes-promo-fila { display: flex; gap: 8px; }
.planes-promo-fila input { flex: 1 1 auto; min-width: 0; padding: 0.6em 0.9em; font-size: 0.95rem; font-family: inherit;
  color: var(--texto); background: var(--bg-2); border: 1px solid var(--panel-borde); border-radius: 10px; outline: none; text-transform: uppercase; }
.planes-promo-fila input:focus { border-color: var(--acento); }
.planes-promo-fila .btn { flex: 0 0 auto; font-size: 0.85rem; padding: 8px 14px; }
.planes-promo-msg { margin: 8px 0 0; font-size: 0.84rem; font-weight: 600; color: #e05a4a; }
.planes-promo-msg.form-ok { color: var(--ala-cyan); }
.promo-code { font-family: ui-monospace, "SFMono-Regular", Menlo, monospace; font-weight: 700; letter-spacing: 0.03em; }
.toast-pago { position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 1400; background: var(--bg-2); border: 1px solid var(--panel-borde); border-radius: 14px; padding: 12px 18px; box-shadow: 0 12px 40px rgba(0,0,0,.45); font-weight: 600; max-width: 90vw; text-align: center; animation: mm-rise 0.22s cubic-bezier(.2,.9,.3,1); }

/* ── Panel lateral de progreso (Codédex) junto al mapa/pueblo ── */
.curso-layout { display: grid; grid-template-columns: 1fr; gap: 18px; align-items: start; }
/* min-width:0 en las columnas del grid: sin esto la columna del MAPA (1fr) no baja de
   su ancho de contenido y, en resoluciones intermedias, desbordaba por encima del rail
   de la derecha (se veía «10 XP / Noticias» encima del mapa). */
.curso-layout > * { min-width: 0; }
/* En 2 columnas el rail ENTERO se hace sticky como una unidad (no solo la 1.ª caja).
   Antes solo `.rail-prog` era sticky y sus hermanas (Amigos/Noticias) iban en flujo:
   al bajar, esas cajas subían POR DEBAJO de la caja fija y se superponían. Fijando
   toda la `.rail-col` juntas, las cajas mantienen su separación y ya no se solapan. */
@media (min-width: 900px) {
  .curso-layout { grid-template-columns: 1fr 264px; }
  /* max-height + scroll interno: si el rail supera la ventana (pantalla corta),
     scrollea dentro en vez de dejar sus cajas de abajo inalcanzables (patrón del
     panel de prácticas). En pantallas normales no aparece barra. */
  .rail-col { position: sticky; top: 74px; align-self: start; max-height: calc(100vh - 88px); overflow-y: auto; }
}
.rail-prog { background: var(--panel); border: 1px solid var(--panel-borde); border-radius: var(--radio); padding: 16px; display: flex; flex-direction: column; gap: 8px; }
.rail-tit { font-size: 0.95rem; margin: 0 0 2px; color: var(--texto-2); font-weight: 700; }
.rail-fila { display: flex; align-items: center; gap: 10px; background: none; border: 0; color: var(--texto); padding: 6px 4px; text-align: start; width: 100%; font-family: inherit; }
button.rail-fila { cursor: pointer; border-radius: 10px; }
button.rail-fila:hover { background: var(--bg-2); }
.rail-ico { font-size: 1.25rem; width: 26px; text-align: center; }
.rail-dato b { font-size: 1.1rem; font-variant-numeric: tabular-nums; }
.rail-dato small { color: var(--texto-2); margin-inline-start: 3px; }
.rail-curso { padding: 6px 4px 2px; }
.rail-curso-top { display: flex; justify-content: space-between; font-size: 0.82rem; color: var(--texto-2); margin-bottom: 5px; }
.rail-curso-top b { color: var(--texto); font-variant-numeric: tabular-nums; }
.rail-barra { height: 8px; border-radius: 999px; background: var(--panel-borde); overflow: hidden; }
.rail-barra i { display: block; height: 100%; border-radius: 999px; transition: width 0.4s ease; }
.rail-perfil { display: inline-flex; align-items: center; gap: 5px; margin-top: 4px; font-weight: 700; font-size: 0.88rem; }

/* ── Stepper de progreso del ejercicio (Codédex «puntos de avance») ── */
.paso-progreso { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 2px 0 16px; }
.paso-dots { display: flex; gap: 6px; flex-wrap: wrap; }
.paso-dot { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; font-size: 0.8rem; font-weight: 800; text-decoration: none !important; background: var(--panel); border: 1px solid var(--panel-borde); color: var(--texto-2); font-variant-numeric: tabular-nums; }
a.paso-dot:hover { border-color: var(--color-mundo, var(--acento)); transform: translateY(-1px); }
.paso-dot.paso-hecho { background: var(--color-mundo, var(--acento)); border-color: transparent; color: #fff; }
.paso-dot.paso-actual { border-color: var(--color-mundo, var(--acento)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-mundo, var(--acento)) 26%, transparent); color: var(--texto); }
span.paso-dot { opacity: 0.5; cursor: not-allowed; }
.paso-txt { color: var(--texto-2); font-size: 0.85rem; font-weight: 600; }
.res-cuenta { font-size: 0.82em; opacity: 0.85; font-weight: 700; margin-inline-start: 6px; }

/* ── Portada con sesión: próximo hito (insignia más cercana) ── */
/* Próximo hito (insignia más cercana) */
.dash-hito { margin-top: 12px; background: var(--panel); border: 1px solid var(--panel-borde); border-radius: var(--radio); padding: 12px 16px; }
.dash-hito-cab { font-weight: 800; font-size: 0.9rem; margin-bottom: 8px; }
.dash-hito-fila { display: flex; align-items: center; gap: 12px; }
.dash-hito-ico { font-size: 1.8rem; line-height: 1; }
.dash-hito-txt { flex: 1; display: flex; flex-direction: column; }
.dash-hito-txt small { color: var(--texto-2); font-size: 0.8rem; }
.dash-hito-n { font-weight: 800; font-variant-numeric: tabular-nums; color: var(--texto-2); }
.dash-hito-barra { height: 8px; border-radius: 999px; background: var(--panel-borde); overflow: hidden; margin-top: 8px; }
.dash-hito-barra i { display: block; height: 100%; border-radius: 999px; background: var(--color-mundo, var(--acento)); transition: width 0.4s; }

/* «Hoy»: misiones diarias + calendario de la semana (hábito) */
.dash-hoy { margin-top: 12px; }
/* Tarjeta 🔔 recordatorio diario (Web Push, opt-in) del dashboard. */
.dash-push { margin-top: 12px; background: var(--panel); border: 1px solid var(--panel-borde); border-radius: var(--radio); padding: 14px 16px; }
.dash-push-cab { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 0.95rem; }
.dash-push-ico { font-size: 1.15rem; }
.dash-push-estado { margin-inline-start: auto; font-size: 0.8rem; font-weight: 700; color: var(--acento); }
.dash-push-desc { margin: 6px 0 10px; color: var(--texto-2); font-size: 0.86rem; line-height: 1.45; }
.dash-push-ctl { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.dash-push-hora { display: inline-flex; align-items: center; gap: 8px; font-size: 0.86rem; font-weight: 600; }
.dash-push-hora select { padding: 6px 10px; border-radius: 10px; border: 1px solid var(--panel-borde); background: var(--bg-2); color: var(--texto); font: inherit; }
.dash-push-nota { margin: 10px 0 0; font-size: 0.82rem; color: var(--texto-2); }
.dash-push-on { border-color: color-mix(in srgb, var(--acento) 45%, var(--panel-borde)); }
.dash-hoy-cols { display: grid; grid-template-columns: 1.4fr 1fr; gap: 14px; }
@media (max-width: 720px) { .dash-hoy-cols { grid-template-columns: 1fr; } }
.dash-hoy-bloque { background: var(--panel); border: 1px solid var(--panel-borde); border-radius: var(--radio); padding: 14px 16px; }
.dash-hoy-h { font-size: 0.95rem; margin: 0 0 10px; }
.misiones { display: flex; flex-direction: column; gap: 10px; }
.mision { display: flex; align-items: center; gap: 10px; }
.mision-ico { font-size: 1.3rem; line-height: 1; width: 1.6rem; text-align: center; }
.mision-cuerpo { flex: 1; display: flex; flex-direction: column; gap: 5px; }
.mision-cuerpo b { font-size: 0.85rem; font-weight: 700; }
.mision-barra { height: 7px; border-radius: 999px; background: var(--panel-borde); overflow: hidden; }
.mision-barra i { display: block; height: 100%; border-radius: 999px; background: var(--acento); transition: width 0.4s; }
.mision-n { font-weight: 800; font-variant-numeric: tabular-nums; color: var(--texto-2); font-size: 0.85rem; }
.mision-ok .mision-barra i { background: var(--ala-verde, var(--acento)); }
.cal-fila { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.cal-dia { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 8px 0; border-radius: 10px; border: 1px solid var(--panel-borde); }
.cal-dia small { color: var(--texto-2); font-size: 0.7rem; text-transform: uppercase; }
.cal-dia span { font-size: 1rem; line-height: 1; }
.cal-on { border-color: var(--ala-verde, var(--acento)); background: color-mix(in srgb, var(--ala-verde, var(--acento)) 12%, transparent); }
.cal-hoy { box-shadow: 0 0 0 2px color-mix(in srgb, var(--acento) 40%, transparent); }
/* Selector de voz de inglés (popup desde el curso) */
.tj-cambiar-voz { display: block; margin: 10px auto 0; }
/* Separa el bloque de la tarjeta (con «Cambiar voz» abajo) de las pistas de abajo. */
.practica-taller-card + .practica-pistas { margin-top: 20px; }
.voz-modal-card { max-width: 460px; }
.voz-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-top: 10px; }
.voz-btn { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 9px 12px; border-radius: 10px; border: 1px solid var(--panel-borde); background: var(--fondo); color: var(--texto); font-weight: 700; font-size: 0.85rem; cursor: pointer; transition: border-color 0.2s, background 0.2s; }
.voz-btn:hover { border-color: color-mix(in srgb, var(--acento) 50%, transparent); }
.voz-btn .voz-play { color: var(--texto-2); font-size: 0.8rem; }
.voz-sel { border-color: var(--acento); background: color-mix(in srgb, var(--acento) 14%, transparent); }
.voz-sel .voz-play { color: var(--acento); }
/* #4/#6 AIRE GENEROSO entre cuadros y botones (dashboard + admin): se veían
   pegados. Pase completo → ritmo vertical entre secciones + más padding en cajas
   + gaps mayores en filas de botones. (Sin selectores universales para no
   sobre-separar subtítulos/captions.) */
/* — Panel admin — */
.panel-admin { padding: 24px 22px 84px; }
.admin-main h2, .admin-main h3 { margin-top: 26px; margin-bottom: 6px; }
.admin-main > h2:first-child, .admin-main > h3:first-child { margin-top: 2px; }
.admin-stats { gap: 16px; margin: 12px 0 24px; }
.admin-main .mon-lista { margin-top: 14px; gap: 10px; }

.mon-item { padding: 12px 14px; }
.admin-grupo { padding: 10px 20px 20px; }
.admin-tabla th, .admin-tabla td { padding: 12px 12px; }
/* filas de botones: más separación entre botones (y entre filas al envolver) */
.u-acc, .noti-acc, .noti-form-btns, .dlg-btns, .act-estado { gap: 10px; row-gap: 8px; }
/* — Portada — */
.dash-hoy, .dash-hito { margin-top: 22px; }
.dash-hoy-cols { gap: 18px; }
.dash-hoy-bloque, .dash-hito { padding: 18px 20px; }

/* ═══════════ Diplomas ═══════════ */
.dip-sec { margin-top: 4px; }
.dip-h { font-family: var(--display, "Baloo 2", sans-serif); font-size: 1.2rem; font-weight: 800; margin: 22px 0 2px; }
.dip-sub { color: var(--texto-2); font-size: 0.9rem; margin: 0 0 14px; }
.dip-grid { display: grid; gap: 14px; }
.dip-card { background: var(--panel); border: 1px solid var(--panel-borde); border-radius: 14px; padding: 14px; }
.dip-card-cab { display: flex; align-items: center; gap: 7px; font-size: 0.98rem; margin-bottom: 8px; }
.dip-emo { font-size: 1.2rem; }
.dip-ok { margin-left: auto; font-size: 0.76rem; font-weight: 700; color: var(--ala-verde, #4ADE80); }
.dip-bar { height: 9px; border-radius: 999px; background: color-mix(in srgb, var(--texto) 12%, transparent); overflow: hidden; }
.dip-bar > span { display: block; height: 100%; min-width: 8px; border-radius: 999px; transition: width .4s; }
.dip-prog-txt { margin: 7px 0 0; font-size: 0.82rem; color: var(--texto-2); font-variant-numeric: tabular-nums; }
.dip-nota { margin: 10px 0 0; font-size: 0.82rem; color: var(--texto-2); }
.dip-cta { margin-top: 12px; }
.dip-previa-btn { margin-top: 10px; width: 100%; font-size: 0.85rem; }
/* Modal de previa de diplomas (fondo con blur del modal-acceso) */
.dip-modal-card { max-width: 560px; width: min(94vw, 560px); }
.dip-modal-nav { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 4px 0 12px; }
.dip-modal-tit { font-family: var(--display, "Baloo 2", sans-serif); font-weight: 800; font-size: 1.15rem; text-align: center; flex: 1; }
.dip-nav-prev, .dip-nav-next { flex: 0 0 auto; min-width: 44px; font-size: 1rem; }
.dip-modal-diploma { position: relative; }
/* Escala de grises + candado hasta obtenerlo (anti-falsificación) */
.dip-previa-bn .dscale { filter: grayscale(1) contrast(0.92) brightness(0.9); }
.dip-lock { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); z-index: 6;
  background: rgba(10,6,30,.82); color: #fff; font-weight: 800; font-size: 0.8rem; letter-spacing: .03em;
  padding: 6px 14px; border-radius: 999px; border: 1px solid rgba(255,255,255,.25); white-space: nowrap; pointer-events: none; }
.dip-modal-nota { margin: 12px 0 0; text-align: center; color: var(--texto-2); font-size: 0.86rem; }
.dip-btn-emitir { width: 100%; font-weight: 700; background: linear-gradient(135deg, var(--ala-violet, #6c4df6), var(--ala-violet-2, #8b6cff)); color: #fff; border: 0; }
.dip-btn-emitir:hover { filter: brightness(1.06); }

.dip-acciones { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.btn-share { font-size: 0.82rem; font-weight: 700; padding: 7px 12px; border-radius: 9px; text-decoration: none; border: 1px solid var(--panel-borde); }
.btn-share.s-li { background: #0a66c2; color: #fff; border-color: #0a66c2; }
.btn-share.s-x { background: #000; color: #fff; border-color: #000; }
.btn-share.s-fb { background: #1877f2; color: #fff; border-color: #1877f2; }
.btn-share.s-wa { background: #25d366; color: #05391c; border-color: #25d366; }
.btn-share.s-print, .btn-share.s-copy { background: var(--panel); color: var(--texto); cursor: pointer; }

/* El pergamino (diseño premium; look fijo, independiente del tema) */
.dscale { width: 100%; aspect-ratio: 1.5/1; border-radius: 20px; overflow: hidden; box-shadow: 0 22px 60px -22px rgba(0,0,0,.7); }
.dscale > .diploma { width: 960px; transform-origin: 0 0; }
.dip-emitido .dscale[role="button"] { cursor: zoom-in; transition: transform .15s; }
.dip-emitido .dscale[role="button"]:hover { transform: translateY(-2px); }
.dip-emitido .dscale[role="button"]:focus-visible { outline: 3px solid var(--acento); outline-offset: 3px; }   /* tamaño de diseño; app.js lo escala al ancho (escalarDiploma) */
.diploma { position: relative; aspect-ratio: 1.5/1; container-type: inline-size; overflow: hidden; isolation: isolate;
  --m: #4ADE80; --oro: #f5c542; color: #eee7ff; padding: 28px;
  background: radial-gradient(120% 140% at 50% -10%, color-mix(in srgb, var(--m) 22%, #241653) 0%, #1a1046 40%, #120a30 100%); }
.d-estrellas { position: absolute; inset: 0; z-index: 0; opacity: .9; pointer-events: none; }
.d-marco { position: absolute; inset: clamp(9px,1.6cqi,16px); border-radius: 16px; z-index: 2; pointer-events: none;
  border: 1.5px solid color-mix(in srgb, var(--oro) 75%, transparent);
  box-shadow: inset 0 0 0 4px color-mix(in srgb, var(--m) 18%, transparent), 0 0 26px -6px color-mix(in srgb, var(--m) 45%, transparent); }
.d-esq { position: absolute; width: clamp(20px,4cqi,34px); height: clamp(20px,4cqi,34px); z-index: 3; pointer-events: none; stroke: var(--oro); stroke-width: 2; fill: none; opacity: .95; }
.d-esq.tl { top: clamp(6px,1.2cqi,13px); left: clamp(6px,1.2cqi,13px); }
.d-esq.tr { top: clamp(6px,1.2cqi,13px); right: clamp(6px,1.2cqi,13px); transform: scaleX(-1); }
.d-esq.bl { bottom: clamp(6px,1.2cqi,13px); left: clamp(6px,1.2cqi,13px); transform: scaleY(-1); }
.d-esq.br { bottom: clamp(6px,1.2cqi,13px); right: clamp(6px,1.2cqi,13px); transform: scale(-1,-1); }
.d-in { position: relative; z-index: 4; height: 100%; display: flex; flex-direction: column; padding: clamp(6px,1.2cqi,14px) clamp(10px,2.4cqi,30px); }
.d-head { display: flex; align-items: center; }
.d-logo-full { height: clamp(28px,5.6cqi,52px); width: auto; filter: drop-shadow(0 3px 10px rgba(0,0,0,.45)); }
.d-cinta { position: absolute; top: clamp(4px,1cqi,12px); right: clamp(4px,1cqi,12px); z-index: 5; text-align: center;
  max-width: clamp(80px, 20cqi, 140px);
  background: linear-gradient(160deg, #ffe08a, var(--oro) 45%, #d99a1c); color: #3a2600;
  font-weight: 800; font-size: clamp(.42rem,1.05cqi,.62rem); letter-spacing: .1em; line-height: 1.25;
  padding: clamp(8px,1.5cqi,13px) clamp(9px,1.8cqi,15px) clamp(12px,2.2cqi,18px); border-radius: 6px 6px 0 0;
  box-shadow: 0 6px 16px -4px rgba(180,120,0,.6); clip-path: polygon(0 0,100% 0,100% 100%,50% 86%,0 100%); }
.d-cinta .laurel { font-size: 1.3em; display: block; margin-bottom: 2px; }
.d-cuerpo { flex: 1; position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.d-otorga { font-size: clamp(.6rem,1.45cqi,.86rem); letter-spacing: .14em; text-transform: uppercase; color: var(--oro); font-weight: 800; }
.d-nombre { font-family: var(--display, "Baloo 2", sans-serif); font-weight: 800; font-size: calc(clamp(1.5rem,6cqi,3.3rem) * var(--fn, 1)); line-height: 1.02; margin: .08em 0 .1em; color: #fff; text-shadow: 0 3px 18px rgba(0,0,0,.4); }
.d-sep { display: flex; align-items: center; justify-content: center; gap: 8px; color: var(--oro); margin: .1em 0 .5em; width: min(56%,320px); }
.d-sep::before, .d-sep::after { content: ""; height: 1.5px; flex: 1; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--oro) 80%, transparent), transparent); }
.d-por { font-size: clamp(.66rem,1.55cqi,.95rem); color: #cdc0f0; }
.d-cartucho { margin-top: .55em; display: inline-flex; flex-direction: column; align-items: center; gap: 2px;
  padding: clamp(8px,1.8cqi,16px) clamp(20px,4.5cqi,44px); border-radius: 14px;
  background: color-mix(in srgb, var(--m) 12%, #0e0826);
  border: 1.5px solid color-mix(in srgb, var(--m) 55%, var(--oro));
  box-shadow: inset 0 0 22px -6px color-mix(in srgb, var(--m) 55%, transparent), 0 8px 22px -10px #000; }
.d-asig-nom { display: inline-flex; align-items: center; gap: .45em; font-family: var(--display, "Baloo 2", sans-serif); font-weight: 800; font-size: clamp(1.1rem,3.4cqi,2rem); color: var(--m); }
.d-asig-nom .emo { font-size: 1.15em; filter: drop-shadow(0 2px 4px rgba(0,0,0,.4)); }
.d-aventura { font-style: italic; color: #b3a6dd; font-size: clamp(.6rem,1.4cqi,.85rem); }
.d-stats { display: grid; grid-template-columns: repeat(4,1fr); gap: clamp(6px,1.4cqi,12px); margin-top: clamp(10px,2cqi,20px); }
.d-stat { background: rgba(255,255,255,.05); border: 1px solid color-mix(in srgb, var(--oro) 30%, transparent); border-radius: 11px; padding: clamp(6px,1.3cqi,12px) clamp(6px,1.4cqi,13px); text-align: left; }
.d-stat .lbl { display: flex; align-items: center; gap: 5px; font-size: clamp(.46rem,1.05cqi,.64rem); color: #b3a6dd; text-transform: uppercase; letter-spacing: .05em; font-weight: 700; }
.d-stat .val { font-family: var(--display, "Baloo 2", sans-serif); font-weight: 700; font-size: clamp(.72rem,1.75cqi,1.05rem); color: #fff; margin-top: 1px; }
/* Nombre entre dos ramas de laurel (antes una corona DETRÁS que tapaba el texto) */
.d-nombre-fila { display: flex; align-items: center; justify-content: center; gap: clamp(4px, 1.2cqi, 12px); max-width: 100%; }
.d-rama { flex: none; width: clamp(22px, 5cqi, 46px); height: clamp(32px, 7cqi, 66px); fill: var(--oro); color: var(--oro); opacity: 0.9;
  filter: drop-shadow(0 2px 6px color-mix(in srgb, var(--oro) 40%, transparent)); }
.d-rama-der { transform: scaleX(-1); }
.d-nombre { background: linear-gradient(180deg, #fff 30%, #ffe6a8 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
  overflow-wrap: break-word; min-width: 0; white-space: nowrap; }
/* Marca de agua: la mascota del mundo, grande y tenue */
.d-marca-agua { position: absolute; right: 5%; bottom: 14%; z-index: 1; font-size: clamp(4rem, 26cqi, 15rem); line-height: 1;
  opacity: 0.05; filter: grayscale(0.2); transform: rotate(-12deg); pointer-events: none; user-select: none; }
/* Pie en 3 columnas: quién emite · sello · verificación (antes el sello pisaba los datos) */
.d-pie { margin-top: clamp(8px, 1.8cqi, 18px); display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; gap: clamp(6px, 1.4cqi, 14px);
  border-top: 1px solid color-mix(in srgb, var(--oro) 35%, transparent); padding-top: clamp(6px, 1.4cqi, 12px); }
.d-firma { display: flex; align-items: center; gap: clamp(4px, 1cqi, 8px); font-size: clamp(.46rem, 1.05cqi, .66rem); color: #b3a6dd; letter-spacing: .04em; }
.d-firma img { width: clamp(18px, 4cqi, 34px); height: auto; filter: drop-shadow(0 2px 6px rgba(0,0,0,.4)); }
.d-sello { text-align: center; }
.d-verif { display: flex; align-items: center; justify-content: flex-end; gap: 9px; }
.d-sello .disco { width: clamp(40px,8.5cqi,64px); height: clamp(40px,8.5cqi,64px); margin: 0 auto; border-radius: 50%; display: grid; place-items: center; font-size: clamp(1.1rem,3cqi,1.9rem);
  background: conic-gradient(from 210deg, #fff5d6, #f1c95a, #fff1c2, #d9a12a, #fff5d6); border: 2.5px solid var(--oro); outline: 2px dashed color-mix(in srgb, var(--oro) 70%, transparent); outline-offset: 3px;
  box-shadow: 0 0 20px -2px color-mix(in srgb, var(--oro) 70%, transparent), 0 4px 10px rgba(0,0,0,.4); }
.d-sello .tag { margin-top: 4px; display: inline-block; background: color-mix(in srgb, var(--m) 60%, #2a1c5e); color: #fff; font-family: var(--display, "Baloo 2", sans-serif); font-weight: 700; font-size: clamp(.44rem,1cqi,.62rem); letter-spacing: .08em; padding: 2px 10px; border-radius: 999px; border: 1px solid var(--oro); }
.d-cod { font-size: clamp(.5rem,1.15cqi,.7rem); color: #b3a6dd; text-align: right; line-height: 1.35; }
.d-cod b { font-variant-numeric: tabular-nums; color: #fff; letter-spacing: .03em; }
.d-qr { width: clamp(40px,8.5cqi,64px); height: clamp(40px,8.5cqi,64px); background: #fff; padding: 4px; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,.4); flex: none; }
.d-qr svg { display: block; width: 100%; height: 100%; }
.d-master { --m: #f5c542; background: radial-gradient(120% 140% at 50% -10%, #3a2b6b 0%, #241653 42%, #140a34 100%); }
.d-master .d-asig-nom { color: #ffdd85; }
.d-master .d-cartucho { background: rgba(245,197,66,.08); }
.d-titulo { font-family: var(--display, "Baloo 2", sans-serif); font-weight: 800; font-size: clamp(1.3rem,4.4cqi,2.4rem); color: #ffdd85; text-shadow: 0 2px 18px rgba(245,197,66,.4); }
.d-mascotas { font-size: clamp(1.1rem,3.6cqi,2.1rem); letter-spacing: .1em; margin: .05em 0; }
.d-premium { position: absolute; top: clamp(4px,1cqi,12px); left: 50%; transform: translateX(-50%); z-index: 6; background: linear-gradient(135deg, #ffe08a, #f5c542); color: #3a2600; font-family: var(--display, "Baloo 2", sans-serif); font-weight: 800; font-size: clamp(.5rem,1.15cqi,.68rem); padding: 3px 13px; border-radius: 999px; letter-spacing: .03em; box-shadow: 0 4px 14px -3px rgba(245,197,66,.6); }
@container (max-width: 440px) { .d-stats { grid-template-columns: repeat(2,1fr); } }

/* Página pública de verificación /d/<code> */
.verif-pag { max-width: 760px; }
.verif-banner { text-align: center; font-size: 1.1rem; background: color-mix(in srgb, var(--ala-verde, #4ADE80) 16%, transparent); border: 1px solid color-mix(in srgb, var(--ala-verde, #4ADE80) 45%, transparent); border-radius: 12px; padding: 12px; margin-bottom: 16px; }
.verif-detalle { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px,1fr)); gap: 12px; margin-top: 18px; }
.verif-detalle > div { background: var(--panel); border: 1px solid var(--panel-borde); border-radius: 12px; padding: 12px 14px; }
.verif-detalle span { display: block; font-size: 0.74rem; color: var(--texto-2); text-transform: uppercase; letter-spacing: .05em; }
.verif-detalle b { font-size: 1.02rem; }
.verif-pie { text-align: center; color: var(--texto-2); font-size: 0.85rem; margin-top: 18px; }
.verif-no { text-align: center; padding: 40px 16px; }
.verif-cod { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--texto-2); margin: 6px 0 18px; }

/* ═══════════ Lanzamiento ═══════════ */
.lz-card { background: var(--panel); border: 1px solid var(--panel-borde); border-radius: 14px; padding: 16px 18px; margin-bottom: 16px; }
.lz-card h3 { margin: 0 0 10px; }
.lz-lista { list-style: none; padding: 0; margin: 0 0 12px; display: flex; flex-direction: column; gap: 6px; }
.lz-item { font-size: 0.95rem; }
.lz-item.lz-no { color: var(--texto); }
.lz-acciones { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 10px; }
.lz-pasos { line-height: 1.7; padding-inline-start: 1.2em; }
.lz-pasos code { background: color-mix(in srgb, var(--texto) 10%, transparent); padding: 1px 5px; border-radius: 5px; }

/* ═══════════ Mensajería ═══════════ */
.msg-chip { position: relative; background: var(--panel); border: 1px solid var(--panel-borde); color: var(--texto); cursor: pointer; font-size: 1rem; line-height: 1; padding: 8px 10px; border-radius: 12px; }
.msg-chip:hover { border-color: var(--acento); }
.msg-badge { position: absolute; top: 0; right: 0; min-width: 16px; height: 16px; padding: 0 3px; border-radius: 999px; background: var(--ala-coral, #FF6B6B); color: #fff; font-size: 0.66rem; font-weight: 800; line-height: 16px; text-align: center; box-shadow: 0 0 0 2px var(--bg); }
.msg-vacio { text-align: center; color: var(--texto-2); padding: 30px 10px; }
.msg-todo-btn { margin-bottom: 12px; }
.msg-item { border: 1px solid var(--panel-borde); border-radius: 12px; margin-bottom: 10px; background: var(--panel); overflow: hidden; }
.msg-item > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px; padding: 12px 14px; }
.msg-item > summary::-webkit-details-marker { display: none; }
.msg-punto { width: 9px; height: 9px; border-radius: 50%; background: transparent; flex: none; }
.msg-no-leido > summary { font-weight: 700; }
.msg-no-leido .msg-punto { background: var(--ala-coral, #FF6B6B); }
.msg-asunto { flex: 1; }
.msg-fecha { color: var(--texto-2); font-size: 0.82rem; white-space: nowrap; }
.msg-cuerpo { padding: 0 14px 14px; border-top: 1px solid var(--panel-borde); }
.msg-de { color: var(--texto-2); font-size: 0.86rem; margin: 10px 0 6px; }
.msg-texto { white-space: pre-wrap; line-height: 1.6; }
/* Compositor del admin */
.msg-compose { display: flex; flex-direction: column; gap: 10px; max-width: 620px; }
.msg-compose label { display: flex; flex-direction: column; gap: 4px; font-weight: 600; font-size: 0.9rem; }
.msg-compose input, .msg-compose select, .msg-compose textarea { font: inherit; padding: 8px 10px; border-radius: 9px; border: 1px solid var(--panel-borde); background: var(--bg-2); color: var(--texto); width: 100%; }
.msg-h-enviados { margin-top: 26px; }

/* Imprimir / descargar: aísla el diploma en la hoja */
#impresion { display: none; }
@media print {
  body.imprimir-diploma > :not(#impresion) { display: none !important; }
  body.imprimir-diploma #impresion { display: block; }
  #impresion .diploma { width: 100%; max-width: 960px; margin: 0 auto; transform: none !important; box-shadow: none;
    -webkit-print-color-adjust: exact; print-color-adjust: exact; break-inside: avoid; }
  html:has(body.imprimir-diploma), body.imprimir-diploma { background: #fff !important; }
  #impresion .d-nombre { background: none; color: #fff; -webkit-text-fill-color: #fff; }   /* el degradado recortado al texto sale con recuadro en PDF */
}

/* ── Cuenta (perfil): editar usuario/redes/bio/público (#1) ── */
.cuenta-sec { display: flex; flex-direction: column; gap: 10px; }
.cuenta-campo { display: flex; flex-direction: column; gap: 4px; font-weight: 600; font-size: 0.9rem; }
/* Inputs bonitos, iguales a los del panel admin (#2). */
.cuenta-campo input, .cuenta-red input, .cuenta-pass input {
  width: 100%; padding: 0.6em 0.8em; border-radius: 10px; font: inherit;
  color: var(--texto); background: var(--bg-2); border: 1px solid var(--panel-borde);
}
.cuenta-campo input:focus, .cuenta-red input:focus, .cuenta-pass input:focus {
  outline: none; border-color: var(--acento);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--acento) 22%, transparent);
}
.cuenta-ayuda { font-weight: 400; font-size: 0.78rem; color: var(--texto-2); line-height: 1.35; }
.cuenta-sub { font-weight: 700; margin: 10px 0 0; }
.cuenta-redes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 4px; }
@media (max-width: 560px) { .cuenta-redes { grid-template-columns: 1fr; } }
.cuenta-red { display: flex; align-items: center; gap: 8px; }
.cuenta-red-ico { width: 26px; text-align: center; flex: none; font-size: 1.05rem; }
#c-ref-link { font-family: var(--mono, monospace); font-size: 0.82rem; }
.cuenta-check { display: flex; align-items: center; gap: 8px; font-weight: 600; margin-top: 6px; }
.cuenta-check input { width: auto; flex: none; }
.cuenta-links { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-top: 4px; }
.cuenta-msg { font-size: 0.85rem; margin: 4px 0 0; }
.cuenta-ok { color: var(--exito, #2fbf71); }
.cuenta-err { color: var(--peligro, #e5484d); }
.cuenta-pass { margin-top: 6px; border: 1px solid var(--panel-borde); border-radius: 12px; padding: 8px 12px; }
.cuenta-pass summary { cursor: pointer; font-weight: 700; }
.cuenta-pass input { margin-top: 8px; }

/* ── Perfil público /u/<usuario> (#1) ── */
.pp-cab { display: flex; align-items: center; gap: 14px; }
.pp-cab h1 { margin: 0; }
.pp-avatar { font-size: 2.6rem; }
.pp-bio { margin: 4px 0 0; }
.pp-fecha { margin: 2px 0 0; font-size: 0.8rem; color: var(--texto-2); }
.pp-priv { color: var(--texto-2); margin-top: 10px; }
.pp-redes { display: flex; gap: 10px; margin: 12px 0; font-size: 1.3rem; }
.pp-red { text-decoration: none; }
.pp-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 12px 0; }
.pp-stat { background: var(--bg-2); border-radius: 12px; padding: 10px 6px; text-align: center; }
.pp-stat b { display: block; font-size: 1.2rem; }
.pp-stat small { color: var(--texto-2); font-size: 0.72rem; }
.pp-h { margin: 18px 0 8px; }
.pp-h-n { color: var(--texto-2); font-weight: 700; font-size: 0.85em; }
.pp-badges { display: flex; flex-wrap: wrap; gap: 12px; }
.pp-badge { flex: none; }
.pp-diplomas { display: flex; flex-wrap: wrap; gap: 8px; }
.pp-dip { text-decoration: none; background: var(--bg-2); border: 1px solid var(--panel-borde); border-radius: 999px; padding: 6px 12px; font-weight: 600; font-size: 0.85rem; }
.pp-sin { color: var(--texto-2); }
.pp-ref { margin-top: 18px; padding: 14px 16px; background: var(--bg-2); border: 1px solid var(--panel-borde); border-radius: 14px; }
.pp-ref .pp-h { margin-top: 0; }
.pp-ref-sub { color: var(--texto-2); font-size: 0.86rem; margin: 0 0 10px; }
.pp-ref-fila { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.pp-ref-link { flex: 1 1 200px; min-width: 0; padding: 0.55em 0.75em; border-radius: 10px; font: inherit;
  font-family: var(--mono, monospace); font-size: 0.8rem; color: var(--texto); background: var(--panel); border: 1px solid var(--panel-borde); }

/* Comisiones de referido (⚙️ Cuenta): saldo/disponible/retención + movimientos */
.ref-com { margin-top: 10px; }
.ref-det { margin-top: 8px; }
.ref-det summary { cursor: pointer; font-size: 0.85rem; color: var(--texto-2); }
.ref-movs { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 4px; }
.ref-mov { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; font-size: 0.82rem; padding: 6px 10px; background: var(--bg-2); border-radius: 10px; }
.ref-mov small { color: var(--texto-2); }
.ref-mov.pos b { color: var(--ala-cyan); }
.ref-mov.neg b { color: var(--texto-2); }
.retiro-pend td { background: color-mix(in srgb, var(--ala-sun) 12%, transparent); }

/* 👁️ Ver la contraseña (se inyecta en todo input[type=password]) */
.campo-pass { position: relative; }
.campo-pass input { padding-right: 44px; }
.ver-pass { position: absolute; right: 8px; bottom: 6px; background: none; border: 0; padding: 4px 6px;
  font-size: 1.05rem; line-height: 1; cursor: pointer; opacity: .75; border-radius: 8px; }
.ver-pass:hover { opacity: 1; background: color-mix(in srgb, var(--texto) 8%, transparent); }
.ver-pass:focus-visible { outline: 2px solid var(--ala-violet); outline-offset: 2px; }
.res-hint-ok { color: var(--ala-cyan); font-weight: 700; }
.dip-nota { font-size: 0.82rem; opacity: .85; margin-top: -6px; }

/* ── Campos de formulario: controles nativos acordes al tema + base del panel ──────
   Causa del «desplegable feo» (2026-09-26): (1) sin `color-scheme` el navegador pinta
   los controles nativos en modo CLARO sobre la página oscura (checkbox blanco, icono
   del calendario invisible, lista del <select> blanca); (2) cada panel escribía sus
   propias reglas de campo y los que no las tenían (Tipo de 🎟️ Promo, zonas de
   📣 Publicidad) salían con el aspecto del navegador. La base va con :where()
   (especificidad 0): las reglas de cada panel siguen mandando y un campo NUEVO del
   panel nace ya con el estilo del sitio. `color-scheme` va en los controles, no en
   :root, para no cambiar el lienzo de los iframes (runner web, anuncios, captcha). */
input, select, textarea { color-scheme: dark; accent-color: var(--acento); }
[data-theme="light"] :is(input, select, textarea) { color-scheme: light; }

:where(.admin-main) :where(select, textarea,
  input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"], [type="color"], [type="hidden"])) {
  padding: 0.55em 0.75em; border-radius: 10px; font: inherit;
  color: var(--texto); background-color: var(--bg-2); border: 1px solid var(--panel-borde);
}
:where(.admin-main) :where(select, textarea, input):focus-visible { outline: none; border-color: var(--acento);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--acento) 22%, transparent); }
:where(.admin-main) :where(textarea) { width: 100%; resize: vertical; min-height: 4.5em; }
.ad-zona-edit textarea { font-family: ui-monospace, "SFMono-Regular", Menlo, monospace; font-size: 0.85rem; margin: 6px 0 10px; }

/* Flecha propia en TODOS los desplegables del panel (misma en Chrome y Firefox, color
   del tema). Va al final y con la misma especificidad que `.admin-grupo select`,
   `.admin-tabla select`… para ganarles el background-image que su `background:` borra. */
.admin-main select {
  appearance: none; -webkit-appearance: none; cursor: pointer; padding-inline-end: 2.3em;
  background-image: linear-gradient(45deg, transparent 50%, var(--texto-2) 50%),
                    linear-gradient(135deg, var(--texto-2) 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%;
  background-size: 5px 5px; background-repeat: no-repeat;
}
[dir="rtl"] .admin-main select { background-position: 13px 50%, 18px 50%; }
.admin-main select option { background: var(--bg-2); color: var(--texto); }

/* ============================================================
   Diseño de juego — «el Reino de los 9 Mundos» (antes rpg.css tras la bandera ?ui=rpg;
   desde 2026-09-27 es EL diseño de Aladez). Va al FINAL a propósito: redefine los
   tokens de arriba (todo lo anterior se adapta solo) y añade el armazón de juego.
   Concepto, tokens y fases: docs/arquitectura/rediseno-rpg.md
   ============================================================ */

/* ── Tokens: «noche encantada» (oscuro, por defecto) ─────────────────────── */
:root {
  --bg: #0e0922;
  --bg-2: #1a1142;
  --sup: #1d1548;          /* superficie de paneles */
  --sup-2: #271d5e;        /* superficie elevada / hover */
  --linea: #34287a;
  --linea-2: #4a3a9e;
  --labio: #07041a;        /* el «volumen» bajo cada pieza */
  --texto: #f6f4ff;
  --texto-2: #bdb4e6;
  --tenue: #8a7fc0;
  --cian: #2ad4c8;  --cian-l: #149189;  --cian-t: #04302c;
  --oro: #ffc53d;   --oro-l: #c98a0c;   --oro-t: #3a2400;
  --violeta: #7c5cff; --violeta-l: #4d33c7;
  --coral: #ff6b6b; --coral-l: #c93f3f;
  --verde: #4ade80; --verde-l: #1d9a4f;
  --panel: var(--sup);
  --panel-borde: var(--linea);
  --acento: var(--cian);
  --radio: 20px;
  --sombra: 0 4px 0 var(--labio), 0 16px 34px rgba(0, 0, 0, 0.35);
  --hud-h: 64px;
  --tab-h: 66px;
  --cielo:
    radial-gradient(1200px 620px at 78% -8%, rgba(124, 92, 255, 0.42), transparent 62%),
    radial-gradient(900px 520px at 4% 104%, rgba(42, 212, 200, 0.18), transparent 60%),
    radial-gradient(700px 380px at 40% 55%, rgba(255, 107, 180, 0.07), transparent 70%),
    linear-gradient(180deg, #0c0720 0%, #150d3a 48%, #1f1454 100%);
}
/* «Amanecer» (claro) */
[data-theme="light"] {
  --bg: #efe9ff;
  --bg-2: #ffffff;
  --sup: #ffffff;
  --sup-2: #f5f1ff;
  --linea: #ddd3fb;
  --linea-2: #c6b8f5;
  --labio: #cfc2f3;
  --texto: #1b1035;
  --texto-2: #54497f;
  --tenue: #8a80b3;
  --cian-t: #033e39;
  --sombra: 0 4px 0 var(--labio), 0 14px 30px rgba(60, 40, 140, 0.12);
  --cielo:
    radial-gradient(1100px 600px at 82% -12%, rgba(255, 190, 150, 0.55), transparent 62%),
    radial-gradient(900px 520px at 0% 100%, rgba(120, 220, 230, 0.35), transparent 60%),
    linear-gradient(180deg, #e9e2ff 0%, #f6efff 55%, #fff4ea 100%);
}

/* ── Cielo: gradiente + dos capas de estrellas que titilan (fijas al viewport) ── */
body {
  background: var(--cielo);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
}
body::before, body::after {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0;
}
body::before {
  background-image:
    radial-gradient(1.4px 1.4px at 18px 26px, #fff 55%, transparent 60%),
    radial-gradient(1.2px 1.2px at 96px 140px, #d8ceff 55%, transparent 60%),
    radial-gradient(1.6px 1.6px at 172px 64px, #fff 55%, transparent 60%),
    radial-gradient(1px 1px at 214px 196px, #bff6f1 55%, transparent 60%),
    radial-gradient(1.3px 1.3px at 60px 214px, #fff 55%, transparent 60%);
  background-size: 240px 240px;
  opacity: 0.55;
}
body::after {
  background-image:
    radial-gradient(2px 2px at 40px 80px, #fff 50%, transparent 60%),
    radial-gradient(1.6px 1.6px at 290px 30px, #ffe8a8 50%, transparent 60%),
    radial-gradient(2px 2px at 200px 260px, #fff 50%, transparent 60%);
  background-size: 360px 360px;
  animation: titilar 5.5s ease-in-out infinite alternate;
}
[data-theme="light"] body::before { opacity: 0.18; filter: invert(0.6) sepia(1) hue-rotate(200deg); }
[data-theme="light"] body::after { opacity: 0; animation: none; }
@keyframes titilar { from { opacity: 0.15; } to { opacity: 0.75; } }

/* ── Armazón ─────────────────────────────────────────────────────────────── */
#app { position: relative; z-index: 1; }
.rpg-app { display: grid; grid-template-columns: minmax(0, 1fr); min-height: 100dvh; }
.rpg-col {
  min-width: 0; display: flex; flex-direction: column;
  padding-bottom: calc(var(--tab-h) + env(safe-area-inset-bottom));
}
/* `backwards` y NO `both`: una animación de transform que se queda «aplicada» (fill
   forwards) convierte a <main> en el bloque contenedor de TODO lo `position: fixed`
   de dentro → el popup del nivel, el botón del tutor y su panel se anclaban al final
   de la página en vez de a la pantalla. Con backwards solo actúa mientras dura. */
.rpg-col > main { flex: 1; animation: entrar 0.42s cubic-bezier(0.2, 0.8, 0.2, 1) backwards; }
@keyframes entrar { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.sidenav { display: none; }

/* Barra del juego (HUD) */
.hud {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: 8px;
  min-height: var(--hud-h); padding: 10px 14px;
  padding-top: max(10px, env(safe-area-inset-top));
  background: color-mix(in srgb, var(--bg) 74%, transparent);
  backdrop-filter: blur(14px) saturate(1.4); -webkit-backdrop-filter: blur(14px) saturate(1.4);
  border-bottom: 2px solid var(--linea);
}
.hud-marca { display: inline-flex; align-items: center; gap: 8px; text-decoration: none !important; color: var(--texto); }
.hud-marca img { width: 40px; height: 40px; filter: drop-shadow(0 3px 6px rgba(124, 92, 255, 0.45)); }
.hud-marca span { font: 800 1.35rem/1 var(--display); letter-spacing: -0.01em;
  background: linear-gradient(90deg, var(--cian), var(--violeta)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hud-esp { flex: 1; }
.hud .hud-chip {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 42px; min-width: 42px; padding: 0 11px; border-radius: 14px;
  border: 2px solid var(--linea); background: var(--sup); color: var(--texto);
  font: 800 1rem/1 var(--display); font-variant-numeric: tabular-nums;
  box-shadow: 0 3px 0 var(--labio); cursor: pointer; text-decoration: none !important;
  position: relative; transition: transform 0.08s, box-shadow 0.08s, border-color 0.15s;
}
.hud .hud-chip:hover { border-color: var(--linea-2); }
.hud .hud-chip:active { transform: translateY(3px); box-shadow: 0 0 0 var(--labio); }
.hud-ico { font-size: 1.2rem; line-height: 1; }
.hud-racha { cursor: default !important; }
.hud-racha .hud-ico { filter: grayscale(1) opacity(0.55); }
.hud-racha.on { color: var(--oro); border-color: color-mix(in srgb, var(--oro) 55%, var(--linea)); }
.hud-racha.on .hud-ico { filter: none; display: inline-block; animation: llama 1.2s ease-in-out infinite alternate; transform-origin: 50% 90%; }
@keyframes llama { from { transform: scale(1) rotate(-3deg); } to { transform: scale(1.12) rotate(3deg); } }
.hud .vidas-chip b { color: var(--coral); }
/* Anillo de nivel: se llena con el EXP hacia el siguiente nivel */
.hud-nivel {
  --p: 0; display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%;
  font: 800 0.78rem/1 var(--display); color: var(--oro-t);
  background:
    radial-gradient(closest-side, var(--oro) 72%, transparent 74% 100%),
    conic-gradient(var(--oro) calc(var(--p) * 1%), var(--linea-2) 0);
}
.hud-exp b { color: var(--oro); }
.hud-exp.sube { animation: brinco 0.55s cubic-bezier(0.3, 1.6, 0.5, 1); }
@keyframes brinco { 0% { transform: scale(1); } 40% { transform: scale(1.18); } 100% { transform: scale(1); } }
.hud .msg-chip .msg-badge, .hud .mochila-n {
  position: absolute; top: -7px; right: -7px; min-width: 20px; height: 20px; padding: 0 5px;
  display: grid; place-items: center; border-radius: 10px; border: 2px solid var(--bg);
  background: var(--coral); color: #fff; font: 800 0.7rem/1 var(--display);
}
.hud .mochila-n { background: var(--violeta); }
.hud .mochila-n[hidden] { display: none; }
.hud-avatar {
  display: inline-grid; place-items: center; width: 44px; height: 44px; padding: 0;
  border-radius: 50%; border: 2px solid var(--linea-2); background: var(--sup-2);
  font-size: 1.45rem; cursor: pointer; box-shadow: 0 3px 0 var(--labio);
}
.hud-avatar:hover { border-color: var(--cian); }
.hud-avatar .avatar-img { width: 36px; height: 36px; vertical-align: middle; }
.hud-avatar .avatar-medal { font-size: 1.2rem; }
.hud .selector-idioma, .hud .btn-icono, .sidenav .selector-idioma, .sidenav .btn-icono, .mh-ctl .selector-idioma, .mh-ctl .btn-icono {
  height: 42px; border-radius: 14px; border: 2px solid var(--linea); background: var(--sup); color: var(--texto);
  box-shadow: 0 3px 0 var(--labio); font: 800 0.9rem var(--display); padding: 0 10px; cursor: pointer;
}
.hud .efectos-activos { display: none; }
.hud .hud-chip, .hud-avatar, .hud-nivel { flex-shrink: 0; }
@media (max-width: 640px) {   /* móvil: solo el icono de la marca; contadores compactos */
  .hud { gap: 6px; padding-inline: 10px; }
  .hud:has(.hud-chip) .hud-marca span { display: none; }
  .hud .hud-chip { padding: 0 8px; gap: 4px; min-width: 40px; }
  .hud-marca img { width: 36px; height: 36px; }
}
@media (max-width: 419px) { .hud .mochila-chip { display: none; } }   /* sigue en el menú del héroe */
/* Sin sesión (sin contadores) el texto «Aladez» quedaba cortado bajo idioma/tema/botones. */
@media (max-width: 480px) { .hud-marca span { display: none; } }
/* Teléfonos muy estrechos (320 px): los contadores no cabían y ensanchaban TODA la página (24 px
   de scroll lateral, y la barra inferior fija se estiraba con ella). */
@media (max-width: 359px) {
  .hud { gap: 4px; padding-inline: 6px; }
  .hud .hud-chip { height: 38px; min-width: 36px; padding: 0 6px; gap: 3px; font-size: .9rem; }
  .hud-marca { display: none; }   /* se aplastaba; a la portada se vuelve con la pestaña «Aventura» */
}
.hud-entrar, .hud-registro { min-height: 42px !important; padding: 8px 16px !important; font-size: 0.82rem !important; }

/* Barra inferior (móvil): patrón de app nativa, lista para envolverla como app */
.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
  display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr));
  height: calc(var(--tab-h) + env(safe-area-inset-bottom)); padding: 0 4px env(safe-area-inset-bottom);
  background: color-mix(in srgb, var(--sup) 90%, transparent);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-top: 2px solid var(--linea);
}
.tab {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  color: var(--tenue); text-decoration: none !important;
  font: 800 0.64rem/1 var(--display); letter-spacing: 0.05em; text-transform: uppercase;
}
.tab-ico { font-size: 1.5rem; line-height: 1; filter: grayscale(0.7) opacity(0.7); transition: transform 0.18s, filter 0.18s; }
.tab-txt { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0 2px; }
.tab.activo { color: var(--texto); }
.tab.activo .tab-ico { filter: none; transform: translateY(-3px) scale(1.14); }
.tab.activo::before {
  content: ""; position: absolute; top: 6px; width: 46px; height: 38px; border-radius: 14px; z-index: -1;
  background: color-mix(in srgb, var(--cian) 16%, transparent); border: 2px solid color-mix(in srgb, var(--cian) 50%, transparent);
}

/* Escritorio: menú lateral de juego; sin barra inferior */
@media (min-width: 1024px) {
  .rpg-app { grid-template-columns: 244px minmax(0, 1fr); }
  .rpg-col { padding-bottom: 0; }
  .tabbar { display: none; }
  .hud-marca { display: none; }
  .hud { padding-inline: 24px; }
  .sidenav {
    display: flex; flex-direction: column; gap: 4px;
    position: sticky; top: 0; height: 100dvh; overflow-y: auto; padding: 16px 12px;
    border-right: 2px solid var(--linea);
    background: color-mix(in srgb, var(--bg) 62%, transparent);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  }
}
.sidenav-marca { display: block; padding: 4px 10px 14px; }
.sidenav-marca img { width: 168px; height: auto; display: block; filter: drop-shadow(0 4px 10px rgba(124, 92, 255, 0.4)); }
.sidenav-nav { display: flex; flex-direction: column; gap: 4px; }
.snav-item {
  display: flex; align-items: center; gap: 14px; padding: 10px 14px; border-radius: 16px;
  border: 2px solid transparent; color: var(--texto-2); text-decoration: none !important;
  font: 800 0.9rem/1 var(--display); letter-spacing: 0.06em; text-transform: uppercase;
  transition: background 0.15s, color 0.15s;
}
.snav-ico { width: 34px; text-align: center; font-size: 1.55rem; line-height: 1; transition: transform 0.2s; }
.snav-item:hover { background: var(--sup); color: var(--texto); }
.snav-item:hover .snav-ico { transform: scale(1.12) rotate(-4deg); }
.snav-item.activo {
  color: var(--cian); background: color-mix(in srgb, var(--cian) 13%, transparent);
  border-color: color-mix(in srgb, var(--cian) 55%, transparent);
}
[data-theme="light"] .snav-item.activo { color: #0b8279; }
.sidenav-pie { margin-top: auto; display: flex; gap: 8px; padding-top: 14px; border-top: 2px solid var(--linea); }
.sidenav-pie .selector-idioma { flex: 1; }
.sidenav-cta {
  margin-top: auto; display: flex; flex-direction: column; gap: 10px; padding: 16px;
  border-radius: var(--radio); border: 2px solid var(--linea); background: var(--sup); box-shadow: 0 4px 0 var(--labio);
}
.sidenav-cta b { font: 800 1rem/1.25 var(--display); }
.sidenav-cta .btn { width: 100%; }

/* ── Botones gordos con volumen (el «clic» de un videojuego) ─────────────── */
.btn {
  --b: var(--cian); --bl: var(--cian-l); --bt: var(--cian-t);
  min-height: 46px; padding: 10px 22px; border: 0; border-radius: 16px;
  color: var(--bt); background: var(--b);
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.24), rgba(255, 255, 255, 0) 56%);
  box-shadow: 0 4px 0 var(--bl);
  font: 800 0.92rem/1.1 var(--display); letter-spacing: 0.05em; text-transform: uppercase;
  transition: transform 0.08s, box-shadow 0.08s, filter 0.15s;
}
.btn:hover { transform: none; filter: brightness(1.07); }
.btn:active { transform: translateY(4px); box-shadow: 0 0 0 var(--bl); }
.btn:focus-visible { outline: 3px solid var(--oro); outline-offset: 3px; }
.btn:disabled, .btn[disabled] { filter: grayscale(0.6); opacity: 0.6; transform: none; box-shadow: 0 4px 0 var(--bl); }
.btn-suave {
  --b: var(--sup); --bl: var(--labio); --bt: var(--texto);
  border: 2px solid var(--linea); background-image: none;
}
.btn-suave:hover { --b: var(--sup-2); border-color: var(--linea-2); filter: none; }
.btn-peligro { --b: var(--coral); --bl: var(--coral-l); --bt: #fff; }
.btn-oro { --b: var(--oro); --bl: var(--oro-l); --bt: var(--oro-t); }
.btn-grande { min-height: 56px; padding: 14px 28px; font-size: 1.02rem; border-radius: 18px; box-shadow: 0 5px 0 var(--bl); }
.btn-grande:active { transform: translateY(5px); }
.btn-icono { border-width: 2px; box-shadow: 0 3px 0 var(--labio); }
.chip { border-width: 2px; font-weight: 700; }

/* Paneles con canto y labio (lo que antes era cristal plano) */
.panel, .rail-prog, .rail-noticias, .rail-amigos, .dash-hoy-bloque, .dash-liga, .dash-hito,
.noticia-card, .sigue-card, .admin-grupo, .mon-item, .dash-stat {
  border: 2px solid var(--linea) !important; box-shadow: var(--sombra);
}

/* ── Portada con sesión: ficha del héroe + archipiélago + columna de misiones ── */
.rpg-inicio {
  width: 100%; max-width: 1200px; margin: 0 auto; padding: 22px 16px 32px;
  display: grid; gap: 22px; grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 1280px) {
  .rpg-inicio:not(.rpg-inicio-anon) { grid-template-columns: minmax(0, 1fr) 320px; align-items: start; }
  .rpg-inicio-rail { position: sticky; top: calc(var(--hud-h) + 18px); }
}
.rpg-inicio-main { min-width: 0; display: flex; flex-direction: column; gap: 18px; }
.rpg-inicio-rail { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.rpg-inicio-rail .dash-hoy { margin: 0; }
.rpg-inicio-rail .dash-hoy-cols { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 700px) and (max-width: 1279px) { .rpg-inicio-rail .dash-hoy-cols { grid-template-columns: 1.3fr 1fr; } }
.rpg-inicio-rail .dash-liga, .rpg-inicio-rail .dash-hito { margin: 0; }

.heroe-ficha {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px 20px; align-items: center;
  padding: 20px; border-radius: 24px; border: 2px solid var(--linea); box-shadow: var(--sombra);
  background:
    radial-gradient(420px 200px at 100% 0%, color-mix(in srgb, var(--violeta) 30%, transparent), transparent 70%),
    linear-gradient(135deg, var(--sup-2), var(--sup));
}
.heroe-ficha::after {   /* destellos sutiles de la «carta de personaje» */
  content: "✦"; position: absolute; top: 12px; right: 18px; font-size: 1.1rem; color: var(--oro); opacity: 0.7;
  animation: titilar 2.6s ease-in-out infinite alternate;
}
.heroe-retrato {
  --p: 0; position: relative; width: 104px; height: 104px; border-radius: 50%; padding: 7px;
  background: conic-gradient(var(--oro) calc(var(--p) * 1%), var(--linea-2) 0);
  box-shadow: 0 0 0 4px var(--sup), 0 8px 24px rgba(0, 0, 0, 0.35);
}
.heroe-avatar {
  display: grid; place-items: center; width: 100%; height: 100%; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--sup-2), var(--bg-2)); font-size: 3rem; overflow: hidden;
}
.heroe-avatar .avatar-img { width: 100%; height: 100%; }
.heroe-avatar .avatar-medal { font-size: 2.1rem; }
.heroe-nivel {
  position: absolute; left: 50%; bottom: -8px; transform: translateX(-50%);
  min-width: 34px; height: 30px; padding: 0 8px; display: grid; place-items: center;
  font: 800 1rem/1 var(--display); color: var(--oro-t);
  background: var(--oro); border-radius: 10px; box-shadow: 0 3px 0 var(--oro-l);
  clip-path: polygon(0 0, 100% 0, 100% 72%, 50% 100%, 0 72%);
}
.heroe-saludo { margin: 0; color: var(--texto-2); }
.heroe-saludo b { color: var(--texto); }
.heroe-titulo { margin: 2px 0 8px; font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.2rem); }
.barra-exp {
  position: relative; height: 16px; border-radius: 999px; overflow: hidden;
  background: color-mix(in srgb, var(--linea) 80%, transparent); box-shadow: inset 0 2px 0 rgba(0, 0, 0, 0.25);
}
.barra-exp i {
  position: relative; display: block; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, #ffb020, var(--oro)); box-shadow: inset 0 3px 0 rgba(255, 255, 255, 0.45);
  transition: width 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); overflow: hidden;
}
.barra-exp i::after {   /* brillo que recorre la barra */
  content: ""; position: absolute; inset: 0; width: 40%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.55), transparent);
  animation: brillo 2.8s ease-in-out infinite;
}
@keyframes brillo { from { transform: translateX(-120%); } to { transform: translateX(320%); } }
.heroe-exp { display: block; margin-top: 6px; color: var(--texto-2); font-weight: 600; font-variant-numeric: tabular-nums; }
.heroe-stats { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.heroe-stat {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 12px;
  background: color-mix(in srgb, var(--bg) 45%, transparent); border: 2px solid var(--linea);
  color: var(--texto-2); font-size: 0.86rem; text-decoration: none !important;
}
.heroe-stat b { color: var(--texto); font: 800 1rem/1 var(--display); }
.heroe-stat.on { border-color: color-mix(in srgb, var(--oro) 60%, var(--linea)); }
a.heroe-stat:hover { border-color: var(--linea-2); }
.heroe-cta { grid-column: 1 / -1; width: 100%; --b: var(--oro); --bl: var(--oro-l); --bt: var(--oro-t); }
@media (max-width: 520px) {
  .heroe-ficha { gap: 14px; padding: 16px; }
  .heroe-retrato { width: 80px; height: 80px; padding: 6px; }
  .heroe-avatar { font-size: 2.3rem; }
  .heroe-stat { padding: 5px 9px; font-size: 0.8rem; }
}
@media (min-width: 760px) {
  .heroe-ficha { grid-template-columns: auto minmax(0, 1fr) auto; }
  .heroe-cta { grid-column: auto; width: auto; align-self: center; }
}

/* ── Portada sin sesión ── */
.portada {
  display: grid; gap: 18px; align-items: center; grid-template-columns: minmax(0, 1fr);
  padding: 18px 4px 0;
}
.portada-sello {
  display: inline-block; padding: 6px 12px; border-radius: 999px; margin-bottom: 12px;
  background: color-mix(in srgb, var(--oro) 18%, transparent); border: 2px solid color-mix(in srgb, var(--oro) 50%, transparent);
  color: var(--oro); font: 800 0.8rem/1 var(--display); letter-spacing: 0.06em; text-transform: uppercase;
}
[data-theme="light"] .portada-sello { color: #8a5a00; }
.portada h1 { font-size: clamp(2.1rem, 1.3rem + 3.6vw, 3.8rem); line-height: 1.02; margin: 0 0 12px; letter-spacing: -0.02em; }
.portada h1 em {
  font-style: normal; background: linear-gradient(90deg, var(--cian), var(--violeta), #ff6bb4);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.portada-sub { color: var(--texto-2); font-size: 1.1rem; max-width: 36em; }
.portada-cta { display: flex; flex-wrap: wrap; gap: 12px; margin: 18px 0 16px; }
.portada .chips { display: flex; flex-wrap: wrap; gap: 8px; }
.portada-guia { display: grid; place-items: center; }
.portada-guia img { width: min(360px, 78%); height: auto; filter: drop-shadow(0 22px 34px rgba(0, 0, 0, 0.45)); animation: flotar 5s ease-in-out infinite; }
@media (min-width: 900px) { .portada { grid-template-columns: 1.2fr 0.8fr; padding-top: 30px; } }

/* ── El archipiélago: 9 islas flotantes ─────────────────────────────────── */
.reino { position: relative; }
.reino-cab { text-align: center; margin: 6px 0 4px; }
.reino-cab h2 {
  margin: 0; font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.2rem);
  text-shadow: 0 2px 0 var(--labio), 0 0 26px color-mix(in srgb, var(--violeta) 60%, transparent);
}
.reino-cab p { margin: 4px auto 0; max-width: 34em; color: var(--texto-2); }
.reino-planeta { margin-top: 10px; }
.btn-planeta { border-color: color-mix(in srgb, var(--acento) 60%, transparent); }
.reto-ia-caja { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.reto-ia-nota { color: var(--texto-2); font-size: .82rem; }
.reino-islas {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 10px; padding: 8px 0 16px;
}
.reino-islas .isla:nth-child(even) { margin-top: 46px; }
.reino-islas .isla:last-child:nth-child(odd) { grid-column: 1 / -1; width: 58%; justify-self: center; }
@media (min-width: 720px) {
  .reino-islas { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 18px; }
  .reino-islas .isla:nth-child(even) { margin-top: 0; }
  .reino-islas .isla:nth-child(3n+2) { margin-top: 58px; }
  .reino-islas .isla:last-child:nth-child(odd) { grid-column: auto; width: auto; }
}
.isla {
  --c: var(--cian); position: relative; display: flex; flex-direction: column; align-items: center;
  padding-top: 26px; color: var(--texto); text-decoration: none !important; border-radius: 22px;
  outline: none;
}
.isla-flota {
  display: block; width: 100%; max-width: 250px;
  animation: flotar 6.5s ease-in-out infinite; animation-delay: calc(var(--i) * -0.73s);
}
@keyframes flotar { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
.isla-arte {
  position: relative; display: block; aspect-ratio: 220 / 214;
  transition: transform 0.35s cubic-bezier(0.2, 0.9, 0.3, 1.3), filter 0.35s;
}
.isla-arte::before {   /* silueta mientras carga el motor + halo del mundo */
  content: ""; position: absolute; left: 12%; right: 12%; top: 30%; height: 30%; border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--c) 45%, transparent), transparent);
  filter: blur(10px); opacity: 0.55; transition: opacity 0.4s;
}
.isla-arte canvas {
  position: relative; display: block; width: 100%; height: 100%;
  opacity: 0; transform: translateY(18px) scale(0.96);
  transition: opacity 0.6s ease calc(var(--i) * 60ms), transform 0.7s cubic-bezier(0.2, 0.9, 0.3, 1.2) calc(var(--i) * 60ms);
  filter: drop-shadow(0 22px 20px rgba(0, 0, 0, 0.35));
}
[data-theme="light"] .isla-arte canvas { filter: drop-shadow(0 18px 18px rgba(80, 50, 150, 0.22)); }
.isla-arte.lista canvas { opacity: 1; transform: none; }
.isla-castillo { position: absolute; z-index: 1; opacity: 0; transition: opacity 0.5s ease 0.25s; filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.25)); }
.isla-arte.lista .isla-castillo { opacity: 1; }
.isla-castillo svg { display: block; width: 100%; height: auto; }
.isla-cascada {
  position: absolute; z-index: 0; width: 7px; height: 34%; transform: translateX(-50%); border-radius: 4px;
  background: repeating-linear-gradient(180deg, var(--agua) 0 7px, color-mix(in srgb, var(--agua) 45%, #fff) 7px 11px);
  background-size: 100% 11px;
  -webkit-mask-image: linear-gradient(#000 55%, transparent); mask-image: linear-gradient(#000 55%, transparent);
  animation: caer 0.7s linear infinite; opacity: 0.9;
}
@keyframes caer { to { background-position: 0 11px; } }
.isla-guardian {
  position: absolute; z-index: 2; top: 4%; right: 14%;
  font-size: clamp(1.7rem, 1.2rem + 1.5vw, 2.4rem); line-height: 1;
  filter: drop-shadow(0 5px 6px rgba(0, 0, 0, 0.4));
  animation: guardian 3.2s ease-in-out infinite; animation-delay: calc(var(--i) * -0.4s);
}
@keyframes guardian { 0%, 100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-8px) rotate(5deg); } }
.isla-cartel {
  position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 4px;
  margin-top: -14px; min-width: min(170px, 100%); padding: 8px 12px 10px;
  border-radius: 16px; border: 2px solid var(--linea); background: var(--sup); box-shadow: 0 4px 0 var(--labio);
  transition: transform 0.2s, border-color 0.2s;
}
.isla-cartel b { font: 800 1rem/1.1 var(--display); text-align: center; }
.isla-rango {
  font: 800 0.66rem/1 var(--display); letter-spacing: 0.05em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 999px; color: var(--texto-2);
  background: color-mix(in srgb, var(--c) 18%, transparent);
}
.isla-barra {
  display: block; width: 100%; height: 8px; border-radius: 999px; overflow: hidden;
  background: color-mix(in srgb, var(--linea) 85%, transparent);
}
.isla-barra i { display: block; height: 100%; border-radius: 999px; background: var(--c); min-width: 0; }
.isla-cartel small { color: var(--tenue); font-weight: 700; font-size: 0.74rem; font-variant-numeric: tabular-nums; }
.isla:hover .isla-arte, .isla:focus-visible .isla-arte { transform: scale(1.06) translateY(-4px); }
.isla:hover .isla-cartel, .isla:focus-visible .isla-cartel { transform: translateY(-3px); border-color: var(--c); }
.isla:focus-visible .isla-cartel { outline: 3px solid var(--oro); outline-offset: 3px; }
.isla:active .isla-arte { transform: scale(0.97); }
/* La isla donde sigue tu aventura: baliza de luz + cartel encendido */
.isla-actual .isla-arte::before { opacity: 1; background: radial-gradient(closest-side, color-mix(in srgb, var(--c) 75%, transparent), transparent); animation: latido 2.4s ease-in-out infinite; }
@keyframes latido { 0%, 100% { transform: scale(1); opacity: 0.8; } 50% { transform: scale(1.15); opacity: 1; } }
.isla-actual .isla-cartel {
  border-color: var(--c);
  box-shadow: 0 4px 0 color-mix(in srgb, var(--c) 55%, #000), 0 0 26px color-mix(in srgb, var(--c) 40%, transparent);
}
.isla-baliza {
  position: absolute; top: 0; left: 50%; z-index: 3; transform: translateX(-50%);
  padding: 6px 12px; border-radius: 999px; white-space: nowrap;
  background: var(--oro); color: var(--oro-t); box-shadow: 0 3px 0 var(--oro-l);
  font: 800 0.72rem/1 var(--display); letter-spacing: 0.06em; text-transform: uppercase;
  animation: saltito 1.7s ease-in-out infinite;
}
@keyframes saltito { 0%, 100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, -5px); } }

/* ── Columna de misiones: pergaminos + antorchas de la semana ── */
.dash-hoy-bloque { background: var(--sup); }
.dash-hoy-h { font-size: 1rem; letter-spacing: 0.02em; }
.mision { padding: 8px 0; }
.mision-barra { height: 10px !important; border-radius: 999px; background: color-mix(in srgb, var(--linea) 85%, transparent) !important; }
.mision-barra i { background: linear-gradient(90deg, #ffb020, var(--oro)) !important; border-radius: 999px; }
.mision-ok .mision-barra i { background: linear-gradient(90deg, var(--verde-l), var(--verde)) !important; }
.cal-fila { gap: 6px; }
.cal-dia { border-width: 2px !important; border-radius: 12px !important; background: color-mix(in srgb, var(--bg) 40%, transparent); }
.cal-dia span { font-size: 1.15rem; }
.cal-dia:not(.cal-on) span { filter: grayscale(1) opacity(0.3); }
.cal-on { border-color: color-mix(in srgb, var(--oro) 60%, transparent) !important; background: color-mix(in srgb, var(--oro) 12%, transparent); }
.cal-on span { display: inline-block; animation: llama 1.3s ease-in-out infinite alternate; }
.cal-hoy { outline: 2px solid var(--cian); outline-offset: 2px; }
.dash-liga, .dash-hito { background: var(--sup); }
.dash-hito-barra { height: 10px !important; }
.dash-hito-barra i { background: linear-gradient(90deg, var(--violeta), var(--cian)) !important; }

/* ── Menú del héroe (tocar tu avatar) ── */
.menu-heroe {
  position: fixed; inset: 0; z-index: 95; display: flex; justify-content: flex-end; align-items: flex-start;
  padding: calc(var(--hud-h) + 6px) 14px 14px; background: rgba(8, 4, 24, 0.35);
  animation: aparecer 0.15s ease-out;
}
@keyframes aparecer { from { opacity: 0; } to { opacity: 1; } }
.mh-caja {
  width: min(320px, 100%); display: flex; flex-direction: column; gap: 2px; padding: 12px;
  border-radius: 22px; border: 2px solid var(--linea-2); background: var(--sup); box-shadow: var(--sombra);
  animation: caer-menu 0.2s cubic-bezier(0.2, 0.9, 0.3, 1.2);
}
@keyframes caer-menu { from { transform: translateY(-10px) scale(0.97); opacity: 0; } to { transform: none; opacity: 1; } }
.mh-cab { display: flex; align-items: center; gap: 12px; padding: 6px 8px 12px; margin-bottom: 4px; border-bottom: 2px solid var(--linea); font-size: 2rem; }
.mh-cab div { display: flex; flex-direction: column; font-size: 1rem; }
.mh-cab b { font: 800 1.05rem/1.2 var(--display); }
.mh-cab small { color: var(--texto-2); }
.mh-caja [role="menuitem"], .mh-caja [role="menuitemcheckbox"] {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 11px 12px; border: 0; border-radius: 12px;
  background: transparent; color: var(--texto); font: 700 0.96rem var(--cuerpo); text-align: start;
  text-decoration: none !important; cursor: pointer;
}
.mh-caja [role="menuitem"]:hover, .mh-caja [role="menuitem"]:focus-visible, .mh-caja [role="menuitemcheckbox"]:hover, .mh-caja [role="menuitemcheckbox"]:focus-visible { background: var(--sup-2); outline: none; }
.mh-ctl { display: flex; gap: 8px; padding: 10px 4px 2px; margin-top: 4px; border-top: 2px solid var(--linea); }
.mh-ctl .selector-idioma { flex: 1; }
@media (max-width: 1023px) {   /* móvil: hoja que sube desde abajo, sobre la barra inferior */
  .menu-heroe { align-items: flex-end; justify-content: center; padding: 12px 10px calc(var(--tab-h) + env(safe-area-inset-bottom) + 10px); }
  .mh-caja { width: min(440px, 100%); animation-name: subir-menu; }
  @keyframes subir-menu { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
}

/* ── F2 · Mundos vivos: el mapa de cada mundo y sus pueblos ─────────────────
   El cielo y el clima los pinta el motor (map.js, opts.rpg); aquí, el marco y las piezas. */
.mm-host .mm-cab {
  position: relative; overflow: hidden; padding: 14px 18px; border-radius: 22px;
  border: 2px solid color-mix(in srgb, var(--tc) 55%, var(--linea)); border-left-width: 2px;
  background:
    radial-gradient(360px 170px at 0% 0%, color-mix(in srgb, var(--tc) 34%, transparent), transparent 70%),
    linear-gradient(135deg, var(--sup-2), var(--sup));
  box-shadow: 0 4px 0 color-mix(in srgb, var(--tc) 40%, var(--labio)), 0 16px 34px rgba(0, 0, 0, 0.3);
}
.mm-host .mm-badge {
  width: 60px; height: 60px; border-radius: 18px; font-size: 32px;
  background: color-mix(in srgb, var(--tc) 28%, var(--sup-2)); border: 2px solid color-mix(in srgb, var(--tc) 60%, transparent);
  box-shadow: 0 4px 0 color-mix(in srgb, var(--tc) 45%, var(--labio)); animation: guardian 3.4s ease-in-out infinite;
}
.mm-host .mm-txt h1 { font-size: clamp(1.4rem, 1.1rem + 1.2vw, 1.9rem); color: var(--texto); }
.mm-host .mm-txt p { color: var(--texto-2); }
.mm-host .mm-sub { color: color-mix(in srgb, var(--tc) 70%, var(--texto)); }
.mm-host .mm-sky {
  border-radius: 28px;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--tc) 45%, var(--linea)), 0 6px 0 var(--labio), 0 26px 54px rgba(0, 0, 0, 0.4);
}
.mm-host .mm-fchip {
  border: 2px solid var(--linea); background: var(--sup); color: var(--texto-2); border-radius: 12px;
  box-shadow: 0 3px 0 var(--labio); font: 800 0.72rem/1 var(--display); letter-spacing: 0.05em; text-transform: uppercase; padding: 8px 12px;
}
.mm-host .mm-fchip.on { background: var(--tc); color: #fff; border-color: var(--tc); box-shadow: 0 3px 0 color-mix(in srgb, var(--tc) 55%, #000); }
/* Nodos: el actual respira y lanza ondas; los hechos brillan con el color del mundo */
.mm-host .n-current .tile { animation: respirar 2s ease-in-out infinite; }
.mm-host .n-current .tile::before {
  content: ""; position: absolute; inset: -9px; border-radius: 22px; border: 3px solid var(--tc);
  pointer-events: none; animation: onda 1.8s ease-out infinite;
}
@keyframes respirar { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
@keyframes onda { from { transform: scale(0.85); opacity: 0.9; } to { transform: scale(1.4); opacity: 0; } }
.mm-host .n-done .tile { background: linear-gradient(180deg, color-mix(in srgb, var(--tc) 78%, #fff), var(--tc)); }
/* El héroe de pie sobre su nodo, con la mascota del mundo */
.mm-host .marker.mk-heroe {
  display: flex; align-items: center; gap: 6px; padding: 3px 10px 3px 3px; margin-bottom: 14px; border-radius: 999px;
  background: var(--sup); color: var(--texto); border: 2px solid var(--tc);
  box-shadow: 0 3px 0 var(--labio), 0 8px 18px rgba(0, 0, 0, 0.35);
}
.mm-host .marker.mk-heroe::after { border-top-color: var(--tc); }
.mk-heroe .mk-av { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; overflow: hidden; background: var(--sup-2); font-size: 1.1rem; }
.mk-heroe .mk-av .avatar-img { width: 30px; height: 30px; vertical-align: middle; }
.mk-heroe .mk-av .avatar-medal { font-size: 0.85rem; }
.mk-heroe b { font-size: 12px; letter-spacing: 0.04em; }
.mk-heroe .mk-masc { font-size: 16px; display: inline-block; animation: guardian 2.4s ease-in-out infinite; }
/* Carteles de rango y de misión, placas de castillo */
.mm-host .mm-biome {
  background: var(--sup); color: var(--texto); border: 2px solid var(--tc);
  box-shadow: 0 3px 0 var(--labio), 0 8px 16px rgba(0, 0, 0, 0.3); letter-spacing: 0.03em;
}
.mm-host .plaque { background: var(--sup); color: var(--texto); border-color: var(--tc); box-shadow: 0 3px 0 var(--labio); }
/* Ventana de nivel: diálogo de juego */
.mm-pop-bg { background: rgba(8, 4, 24, 0.5); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.mm-host .mm-pop { background: var(--sup); color: var(--texto); border: 2px solid var(--linea-2); border-radius: 26px; box-shadow: var(--sombra); }
.mm-host .mm-pop h3, .mm-host .mm-meta b { color: var(--texto); }
.mm-host .mm-meta { color: var(--texto-2); }
.mm-host .mm-btn { font-family: var(--display); letter-spacing: 0.05em; text-transform: uppercase; border-radius: 16px; }
.mm-host .mm-btn.ghost { background: var(--sup-2); color: var(--texto); border: 2px solid var(--linea); box-shadow: 0 4px 0 var(--labio); }
/* Hora del día (pueblos; Lógica vive de noche): el terreno toma la luz del momento */
.mm-host[data-momento="noche"] .mm-terreno, .mm-host[data-momento="noche"] .mm-deco { filter: brightness(0.74) saturate(0.88) hue-rotate(-12deg); }
.mm-host[data-momento="atardecer"] .mm-terreno, .mm-host[data-momento="atardecer"] .mm-deco { filter: sepia(0.22) saturate(1.18) brightness(0.97); }
.mm-host[data-momento="amanecer"] .mm-terreno, .mm-host[data-momento="amanecer"] .mm-deco { filter: saturate(1.08) brightness(1.03) hue-rotate(-8deg); }

/* ── F3 · El reto como ENCUENTRO: el guardián habla, la misión, la victoria ───── */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.practica-cab .mundo-emoji {
  border: 2px solid color-mix(in srgb, var(--color-mundo) 60%, transparent); border-radius: 18px;
  box-shadow: 0 4px 0 color-mix(in srgb, var(--color-mundo) 40%, var(--labio)), 0 10px 26px color-mix(in srgb, var(--color-mundo) 30%, transparent);
}
.practica-cab h1 { font-size: clamp(1.4rem, 1.1rem + 1vw, 1.8rem); }
.practica-nivel { border-width: 2px; font-family: var(--display); letter-spacing: 0.04em; }
/* El guardián cuenta la historia */
.dialogo {
  --c: var(--cian); position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; align-items: start;
  margin: 16px 0; padding: 16px 18px 20px; border-radius: 20px; cursor: pointer;
  background: linear-gradient(180deg, var(--sup-2), var(--sup));
  border: 2px solid color-mix(in srgb, var(--c) 55%, var(--linea));
  box-shadow: 0 4px 0 var(--labio), 0 12px 28px rgba(0, 0, 0, 0.3);
}
.dlg-retrato {
  width: 64px; height: 64px; display: grid; place-items: center; font-size: 2.2rem; border-radius: 18px;
  background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--c) 45%, var(--sup-2)), var(--sup));
  border: 2px solid color-mix(in srgb, var(--c) 65%, transparent);
  box-shadow: 0 4px 0 color-mix(in srgb, var(--c) 40%, var(--labio));
  animation: hablar 2.6s ease-in-out infinite;
}
@keyframes hablar { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg) translateY(-2px); } }
.dialogo.dlg-fin .dlg-retrato { animation-duration: 5s; }
.dlg-nombre {
  display: inline-block; margin-bottom: 6px; font: 800 0.8rem/1 var(--display); letter-spacing: 0.08em; text-transform: uppercase;
  color: color-mix(in srgb, var(--c) 72%, var(--texto));
}
.dlg-texto { margin: 0; font-size: 1.03rem; line-height: 1.55; min-height: 3.1em; }
.dlg-sig { position: absolute; right: 14px; bottom: 6px; color: color-mix(in srgb, var(--c) 72%, var(--texto)); font-size: 0.75rem; opacity: 0; }
.dialogo.dlg-fin .dlg-sig { opacity: 0.9; animation: saltito-v 1s ease-in-out infinite; }
@keyframes saltito-v { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(3px); } }
/* La misión: pergamino dorado */
.practica-enunciado.mision-rpg {
  border: 2px solid color-mix(in srgb, var(--oro) 55%, var(--linea)); border-inline-start-width: 2px; border-radius: 18px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--oro) 13%, var(--sup)), var(--sup));
  box-shadow: 0 4px 0 var(--labio);
}
.mision-lbl { display: block; margin-bottom: 4px; font: 800 0.74rem/1 var(--display); letter-spacing: 0.1em; text-transform: uppercase; color: var(--oro); }
[data-theme="light"] .mision-lbl { color: #9a6700; }
/* Avance del nivel: cuentas de un collar */
.paso-dot { width: 30px; height: 30px; border-radius: 10px; border: 2px solid var(--linea); background: var(--sup); box-shadow: 0 3px 0 var(--labio); font-family: var(--display); }
.paso-dot.paso-hecho { box-shadow: 0 3px 0 color-mix(in srgb, var(--color-mundo) 50%, #000); }
.paso-dot.paso-actual { transform: translateY(-2px) scale(1.1); border-color: var(--color-mundo); }
@media (max-width: 420px) { .paso-dots { gap: 5px; } .paso-dot { width: 27px; height: 27px; border-radius: 9px; } }   /* 10 pasos caben en una fila a 360-390 px */
.editor-caja, .practica-editor { border-radius: 18px; }
.practica-editor { border: 2px solid var(--linea); box-shadow: var(--sombra); overflow: hidden; }
.practica-video-btn { border: 2px solid var(--linea); border-radius: 14px; box-shadow: 0 3px 0 var(--labio); background: var(--sup); }
.practica-pistas { border-width: 2px; border-radius: 18px; }
/* Resultado: la victoria se celebra */
.res-gano {
  position: relative; overflow: hidden; color: var(--texto); border: 2px solid color-mix(in srgb, var(--verde) 60%, transparent);
  background: linear-gradient(135deg, color-mix(in srgb, var(--verde) 24%, var(--sup)), var(--sup));
  box-shadow: 0 4px 0 var(--labio), 0 0 34px color-mix(in srgb, var(--verde) 25%, transparent);
  animation: victoria-in 0.55s cubic-bezier(0.2, 1.5, 0.4, 1) both;
}
.res-gano::after {
  content: ""; position: absolute; inset: 0; width: 45%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.28), transparent);
  animation: brillo 1.6s ease-out 0.3s 2;
}
.victoria {
  display: block; margin-bottom: 4px; font: 800 1.7rem/1 var(--display); letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--oro); text-shadow: 0 3px 0 var(--oro-l), 0 0 22px rgba(255, 197, 61, 0.45);
}
@keyframes victoria-in { from { transform: scale(0.8) rotate(-2deg); opacity: 0; } to { transform: none; opacity: 1; } }
.res-sigue { border-width: 2px; animation: sacudir 0.42s ease-in-out; }
@keyframes sacudir { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-6px); } 40% { transform: translateX(6px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(4px); } }
.res-lista li { border-width: 2px; border-radius: 14px; }
.res-nav .btn { min-height: 50px; }
.confeti { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 300; pointer-events: none; }
.exp-vuela {
  position: fixed; left: 0; top: 0; z-index: 310; pointer-events: none; white-space: nowrap;
  font: 800 1.35rem/1 var(--display); color: var(--oro);
  text-shadow: 0 3px 0 var(--oro-l), 0 0 20px rgba(255, 197, 61, 0.6);
}
.corazon-roto { position: fixed; z-index: 310; font-size: 1.6rem; pointer-events: none; animation: roto 1.15s ease-in forwards; }
@keyframes roto {
  0% { transform: translate(-50%, 0) scale(0.6); opacity: 0; }
  25% { transform: translate(-50%, 10px) scale(1.35); opacity: 1; }
  100% { transform: translate(-50%, 80px) scale(0.9) rotate(22deg); opacity: 0; }
}
.hud .vidas-chip.vidas-shake { border-color: var(--coral); }
/* ¡Subiste de nivel! */
.subida-nivel {
  position: fixed; inset: 0; z-index: 305; display: grid; place-items: center; padding: 20px;
  background: radial-gradient(circle at 50% 42%, rgba(255, 197, 61, 0.22), rgba(8, 4, 24, 0.72) 60%);
  animation: aparecer 0.2s ease-out;
}
.sn-caja {
  position: relative; width: min(380px, 100%); padding: 34px 26px 26px; text-align: center; border-radius: 28px;
  background: linear-gradient(180deg, var(--sup-2), var(--sup)); border: 2px solid color-mix(in srgb, var(--oro) 60%, var(--linea));
  box-shadow: 0 6px 0 var(--labio), 0 30px 70px rgba(0, 0, 0, 0.5); animation: victoria-in 0.6s cubic-bezier(0.2, 1.5, 0.4, 1) both;
}
.sn-rayos {
  position: absolute; left: 50%; top: 70px; width: 300px; height: 300px; margin: -150px 0 0 -150px; z-index: 0; pointer-events: none;
  background: repeating-conic-gradient(rgba(255, 197, 61, 0.22) 0 10deg, transparent 10deg 24deg);
  -webkit-mask-image: radial-gradient(circle, #000 20%, transparent 68%); mask-image: radial-gradient(circle, #000 20%, transparent 68%);
  animation: girar 12s linear infinite;
}
@keyframes girar { to { transform: rotate(360deg); } }
.sn-medalla {
  position: relative; z-index: 1; width: 96px; height: 96px; margin: 0 auto 14px; display: grid; place-items: center;
  border-radius: 50%; font: 800 2.6rem/1 var(--display); color: var(--oro-t);
  background: radial-gradient(circle at 35% 30%, #fff1b8, var(--oro) 55%, #e39a0b);
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--oro) 35%, transparent), 0 6px 0 var(--oro-l), 0 0 40px rgba(255, 197, 61, 0.55);
}
.sn-caja h2 { position: relative; z-index: 1; margin: 0 0 6px; font-size: 1.6rem; }
.sn-caja p { position: relative; z-index: 1; color: var(--texto-2); margin: 0 0 18px; }
.sn-caja .btn { position: relative; z-index: 1; width: 100%; }

/* ── F4 · Salón de trofeos: perfil, insignias coleccionables, podio, ligas ──── */
.perfil-rpg { width: 100%; max-width: 1200px; margin: 0 auto; padding: 22px 16px 36px; display: flex; flex-direction: column; gap: 18px; }
.perfil-cols { display: grid; gap: 18px; grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 1100px) {
  .perfil-cols { grid-template-columns: minmax(0, 1fr) 380px; }
  .perfil-ajustes { position: sticky; top: calc(var(--hud-h) + 18px); max-height: calc(100dvh - var(--hud-h) - 36px); overflow-y: auto; }
}
.perfil-trofeos { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.perfil-trofeos .gami, .perfil-trofeos .dip-sec:not(:empty) {
  padding: 18px 18px 8px; border-radius: 22px; border: 2px solid var(--linea); background: var(--sup); box-shadow: var(--sombra);
}
.perfil-ajustes.panel { padding: 20px; border-radius: 22px; }
.perfil-rpg .aviso { border-radius: 16px; border-width: 2px; }
.gami-stat { border-width: 2px; border-radius: 16px; box-shadow: 0 3px 0 var(--labio); }
.gami-h-grande { font-size: 1.7rem; }
.badge-cat-h { font: 800 0.86rem/1 var(--display); letter-spacing: 0.06em; text-transform: uppercase; color: var(--texto-2); }
/* Diplomas: cuadrícula de pergaminos (antes una columna muy larga) */
.perfil-trofeos .dip-grid { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.dip-card { border: 2px solid var(--linea); border-radius: 18px; box-shadow: 0 3px 0 var(--labio); display: flex; flex-direction: column; }
.dip-card .dip-acciones, .dip-card .dip-cta { margin-top: auto; padding-top: 10px; }
/* compartir: una fila compacta (heredaban el botón grande del juego y se apilaban) */
.dip-acciones { gap: 6px; }
.dip-acciones .btn.btn-share { padding: 6px 11px; min-height: 0; font-size: .76rem; letter-spacing: .01em; text-transform: none; box-shadow: none; border-radius: 9px; }
.dip-card .dip-nota { margin-top: 10px; }
.dip-elegible, .dip-emitido { border-color: color-mix(in srgb, var(--oro) 55%, var(--linea)); background: linear-gradient(180deg, color-mix(in srgb, var(--oro) 10%, var(--sup-2)), var(--sup)); }
.dip-card-cab b { font-family: var(--display); }
.dip-bar { height: 10px; }

/* Cada insignia es una carta: marco del color de su categoría; las que faltan, silueta */
.badges-grid { grid-template-columns: repeat(auto-fill, minmax(108px, 1fr)); gap: 12px; }
.badge {
  position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 14px 8px 12px; border-radius: 18px;
  border: 2px solid color-mix(in srgb, var(--cat) 45%, var(--linea));
  background: linear-gradient(180deg, color-mix(in srgb, var(--cat) 18%, var(--sup-2)), var(--sup));
  box-shadow: 0 4px 0 var(--labio); transition: transform 0.2s;
}
.badge:hover { transform: translateY(-4px) rotate(-1.2deg); }
.badge-on { border-color: var(--cat); box-shadow: 0 4px 0 color-mix(in srgb, var(--cat) 45%, var(--labio)), 0 0 18px color-mix(in srgb, var(--cat) 22%, transparent); }
.badge-on::after {   /* destello que cruza la carta de vez en cuando */
  content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 45%; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  animation: brillo-carta 5.5s ease-in-out infinite; animation-delay: calc(var(--d, 0) * 1s);
}
@keyframes brillo-carta { 0%, 70% { transform: translateX(-140%); } 100% { transform: translateX(320%); } }
.badge-off { opacity: 0.62; border-style: dashed; background: var(--sup); }
.badge-off .badge-ico { filter: brightness(0) opacity(0.5); opacity: 1; }   /* silueta: «¿cuál será?» */
[data-theme="light"] .badge-off .badge-ico { filter: brightness(0) opacity(0.25); }
.badge-nom { font: 800 0.76rem/1.15 var(--display); }
.badge-nueva { animation: carta-nueva 0.9s cubic-bezier(0.2, 1.4, 0.4, 1) both; }
@keyframes carta-nueva { from { transform: perspective(500px) rotateY(95deg) scale(0.7); opacity: 0; } to { transform: none; opacity: 1; } }
.badge-nueva::before {
  content: "✨"; position: absolute; top: 5px; right: 6px; z-index: 1; font-size: 0.95rem;   /* sin texto: vale en los 12 idiomas */
  animation: titilar 1.2s ease-in-out infinite alternate;
}
/* Ranking: podio de los tres primeros + filas con volumen */
.podio { display: grid; grid-template-columns: 1fr 1.15fr 1fr; align-items: end; gap: 10px; margin: 10px 0 20px; }
.podio-p { min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 3px; text-align: center; }
.podio-av {
  display: grid; place-items: center; width: 62px; height: 62px; border-radius: 50%; overflow: hidden; font-size: 2rem;
  background: var(--sup-2); border: 3px solid #b8bcc6; box-shadow: 0 4px 0 var(--labio);
}
.podio-av .avatar-img { width: 100%; height: 100%; }
.podio-1 .podio-av { width: 78px; height: 78px; font-size: 2.5rem; border-color: #ffd34d; box-shadow: 0 4px 0 var(--labio), 0 0 26px rgba(255, 211, 77, 0.5); animation: flotar 4s ease-in-out infinite; }
.podio-3 .podio-av { border-color: #d49a64; }
.podio-p b { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 800 0.92rem/1.2 var(--display); }
.podio-p small { color: var(--texto-2); font-weight: 700; }
.podio-base {
  display: grid; place-items: start center; width: 100%; padding-top: 10px; margin-top: 6px; font-size: 1.9rem;
  border-radius: 16px 16px 6px 6px; border: 2px solid rgba(255, 255, 255, 0.18); box-shadow: 0 4px 0 var(--labio);
  background: linear-gradient(180deg, #d8dce6, #9aa0ad); height: 84px;
}
.podio-1 .podio-base { height: 116px; background: linear-gradient(180deg, #ffe38a, #e8a817); }
.podio-3 .podio-base { height: 64px; background: linear-gradient(180deg, #e9b98a, #b0703d); }
.podio-p.rank-yo b { color: var(--cian); }
.rank-fila, .liga-fila {
  margin-bottom: 8px; padding: 12px 14px; border-radius: 16px; border: 2px solid var(--linea); background: var(--sup);
  box-shadow: 0 3px 0 var(--labio);
}
.rank-fila.rank-yo, .liga-fila.liga-yo { border-color: var(--cian) !important; background: color-mix(in srgb, var(--cian) 12%, var(--sup)) !important; }
.podio-p.rank-yo { background: none; }
.rank-xp, .liga-xp { font-family: var(--display); color: var(--oro); }
/* Liga: estandarte del tier + zonas de ascenso y descenso */
.liga-cab {
  gap: 16px; padding: 18px; margin-bottom: 12px; border-radius: 22px;
  border: 2px solid color-mix(in srgb, var(--liga-c) 55%, var(--linea));
  background: radial-gradient(380px 180px at 0% 0%, color-mix(in srgb, var(--liga-c) 35%, transparent), transparent 70%), var(--sup-2);
  box-shadow: 0 4px 0 color-mix(in srgb, var(--liga-c) 40%, var(--labio));
}
.liga-medalla { font-size: 3.4rem; animation: flotar 4.5s ease-in-out infinite; }
.liga-nombre { font-size: 2rem; text-shadow: 0 2px 0 var(--labio); }
.liga-fila.liga-promo { border-inline-start: 6px solid var(--verde); }
.liga-fila.liga-baja { border-inline-start: 6px solid var(--coral); }
.liga-banner { border-width: 2px; border-radius: 16px; }

/* ── F5 · Consola del maestro (panel admin) ──────────────────────────────── */
@media (min-width: 1024px) {   /* el menú del juego se compacta a iconos: el panel trae el suyo */
  .rpg-app.compacta { grid-template-columns: 78px minmax(0, 1fr); }
  .compacta .sidenav { padding: 14px 10px; }
  .compacta .sidenav-marca { padding: 2px 0 12px; }
  .compacta .sidenav-marca img { width: 56px; height: 56px; object-fit: cover; object-position: 0 50%; }
  .compacta .snav-item { justify-content: center; padding: 10px 6px; }
  .compacta .snav-txt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .compacta .sidenav-pie { flex-direction: column; align-items: stretch; }
  .compacta .sidenav-pie .selector-idioma { padding: 0 4px; }
}
.panel-admin { max-width: 1320px; }
.admin-nav { border: 2px solid var(--linea); border-radius: 22px; background: var(--sup); box-shadow: var(--sombra); top: calc(var(--hud-h) + 14px); }
.admin-nav-cab { border-bottom-width: 2px; }
.admin-navitem { border: 2px solid transparent; border-radius: 12px; padding: 6px 12px; line-height: 1.25; font-family: var(--display); letter-spacing: 0.02em; }
.admin-navitem:hover { background: var(--sup-2); }
.admin-navitem.activo { color: var(--cian); background: color-mix(in srgb, var(--cian) 13%, transparent); border-color: color-mix(in srgb, var(--cian) 50%, transparent); }
[data-theme="light"] .admin-navitem.activo { color: #0b8279; }
.admin-main h2 { font-size: clamp(1.4rem, 1.1rem + 1vw, 1.8rem); }
.admin-tabla-wrap { border: 2px solid var(--linea); border-radius: 18px; background: var(--sup); box-shadow: 0 4px 0 var(--labio); }
.admin-tabla th { font: 800 0.72rem/1.2 var(--display); letter-spacing: 0.08em; text-transform: uppercase; color: var(--texto-2); background: var(--sup-2); }
.admin-tabla tr:hover td { background: color-mix(in srgb, var(--cian) 5%, transparent); }
.stat-card { border: 2px solid var(--linea); border-radius: 18px; background: linear-gradient(180deg, var(--sup-2), var(--sup)); box-shadow: 0 4px 0 var(--labio); }
.stat-num { font-family: var(--display); color: var(--oro); }
.admin-pill, .lz-card { border-width: 2px; }

/* ── F6 · Bienvenida guiada (1.ª visita) ────────────────────────────────── */
.bienvenida {
  position: fixed; inset: 0; z-index: 320; display: grid; place-items: center; padding: 16px;
  background: radial-gradient(circle at 50% 35%, rgba(124, 92, 255, 0.35), rgba(8, 4, 24, 0.78) 65%);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); animation: aparecer 0.25s ease-out;
}
.bv-caja {
  width: min(420px, 100%); padding: 22px 24px 24px; text-align: center; border-radius: 28px;
  background: linear-gradient(180deg, var(--sup-2), var(--sup)); border: 2px solid var(--linea-2);
  box-shadow: 0 6px 0 var(--labio), 0 30px 70px rgba(0, 0, 0, 0.5);
  animation: victoria-in 0.5s cubic-bezier(0.2, 1.4, 0.4, 1) both;
}
.bv-barra { height: 10px; border-radius: 999px; background: color-mix(in srgb, var(--linea) 85%, transparent); overflow: hidden; margin-bottom: 14px; }
.bv-barra i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--cian), var(--violeta)); transition: width 0.4s cubic-bezier(0.2, 0.8, 0.2, 1); }
.bv-guia { width: 170px; height: auto; filter: drop-shadow(0 16px 24px rgba(0, 0, 0, 0.4)); animation: flotar 4s ease-in-out infinite; }
.bv-nombre { margin: 6px 0 2px; font: 800 0.82rem/1 var(--display); letter-spacing: 0.1em; text-transform: uppercase; color: var(--cian); }
.bv-texto { margin: 6px 0 18px; font-size: 1.08rem; line-height: 1.5; min-height: 3em; }
.bv-botones { display: flex; flex-direction: column; gap: 10px; }
.bv-botones .btn { width: 100%; }

/* ── Portada: «en la era de la IA, quien entiende el código manda» ── */
.era-ia { margin: 34px auto 10px; max-width: 1080px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.era-ia-sello {
  margin: 0; padding: 6px 14px; border-radius: 999px; font: 800 0.78rem/1 var(--display); letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--cian); background: color-mix(in srgb, var(--cian) 12%, transparent); border: 2px solid color-mix(in srgb, var(--cian) 40%, transparent);
}
.era-ia h2 { margin: 4px 0 0; font-size: clamp(1.6rem, 1.1rem + 2.2vw, 2.6rem); line-height: 1.08; max-width: 22em; text-wrap: balance; }
.era-ia-sub { margin: 0; max-width: 40em; color: var(--texto-2); font-size: 1.05rem; line-height: 1.55; text-wrap: pretty; }
.era-ia-cartas { width: 100%; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin: 14px 0 10px; text-align: left; }
.era-ia-carta {
  padding: 18px 18px 16px; background: var(--sup); border: 2px solid var(--linea); border-radius: var(--radio);
  box-shadow: 0 4px 0 var(--labio); transition: transform 0.2s, border-color 0.2s;
}
.era-ia-carta:hover { transform: translateY(-3px); border-color: var(--linea-2); }
.era-ia-ico { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; font-size: 1.6rem; background: var(--sup-2); border: 2px solid var(--linea-2); }
.era-ia-carta h3 { margin: 12px 0 6px; font-size: 1.12rem; }
.era-ia-carta p { margin: 0; color: var(--texto-2); font-size: 0.93rem; line-height: 1.5; }

/* Aviso del «Reto IA: caza el bug» encima del editor */
.ia-bug-aviso {
  display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: 16px; scroll-margin-top: calc(var(--hud-h) + 18px);
  background: color-mix(in srgb, var(--oro) 12%, var(--sup)); border: 2px solid color-mix(in srgb, var(--oro) 55%, transparent);
  box-shadow: 0 4px 0 var(--labio); animation: globo-in 0.3s ease-out;
}
.ia-bug-ico { font-size: 1.7rem; line-height: 1; }
.ia-bug-aviso + .practica-taller { margin-top: 14px; }   /* tarjeta y quiz no van en una columna con gap */
.ia-bug-aviso p { margin: 0; font-size: 0.93rem; line-height: 1.45; }
.ia-bug-aviso b { color: var(--oro); font-family: var(--display); letter-spacing: 0.02em; }
[data-theme="light"] .ia-bug-aviso b { color: #8a5a00; }

/* ── Ada, la tutora IA: un personaje que flota, reacciona y abre un chat flotante ──
   El chat NO empuja la página (antes era un cajón que desplazaba todo #app). */
.tutor { --tutor-y: 22px; }
@media (max-width: 1023px) { .tutor { --tutor-y: calc(var(--tab-h) + env(safe-area-inset-bottom) + 14px); } }
.tutor-fab {
  position: fixed; right: 20px; bottom: var(--tutor-y); z-index: 60;
  width: 68px; height: 68px; padding: 0; display: grid; place-items: center; cursor: pointer;
  border: 3px solid var(--cian); border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--sup-2), var(--sup));
  box-shadow: 0 5px 0 var(--labio), 0 14px 30px rgba(0, 0, 0, 0.4);
  animation: ada-flota 3.6s ease-in-out infinite; transition: scale 0.15s, border-color 0.2s;
}
.tutor-fab img { width: 50px; height: 50px; border-radius: 50%; position: relative; z-index: 1; display: block; }
.tutor-aura {
  position: absolute; inset: -9px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--cian) 50%, transparent), transparent);
  animation: ada-aura 2.6s ease-in-out infinite;
}
.tutor-fab:hover { scale: 1.07; }
.tutor-fab:focus-visible { outline: 3px solid var(--oro); outline-offset: 5px; }
.tutor.abierto .tutor-fab { border-color: var(--oro); animation: none; }
.tutor.abierto .tutor-aura { opacity: 0; }
.tutor-fab.salta img { animation: ada-salta 0.6s cubic-bezier(0.3, 1.6, 0.5, 1); }
.tutor-fab.tiembla img { animation: ada-tiembla 0.5s ease-in-out; }
@keyframes ada-flota { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes ada-aura { 0%, 100% { opacity: 0.5; transform: scale(0.92); } 50% { opacity: 1; transform: scale(1.08); } }
@keyframes ada-salta { 0% { transform: none; } 35% { transform: translateY(-14px) rotate(-8deg) scale(1.08); } 100% { transform: none; } }
@keyframes ada-tiembla { 0%, 100% { transform: none; } 25% { transform: rotate(-12deg); } 75% { transform: rotate(12deg); } }

/* Globo de diálogo junto a Ada (al entrar, al fallar, al acertar) */
.tutor-globo {
  position: fixed; right: 102px; bottom: calc(var(--tutor-y) + 12px); z-index: 60;
  max-width: min(300px, calc(100vw - 130px)); padding: 12px 34px 12px 14px;
  background: var(--sup); color: var(--texto); border: 2px solid var(--linea-2); border-radius: 18px 18px 4px 18px;
  box-shadow: 0 4px 0 var(--labio), 0 14px 30px rgba(0, 0, 0, 0.35);
  animation: globo-in 0.32s cubic-bezier(0.2, 1.4, 0.4, 1);
}
.tutor-globo::after {
  content: ""; position: absolute; right: -9px; bottom: 14px; width: 14px; height: 14px; background: var(--sup);
  border-right: 2px solid var(--linea-2); border-top: 2px solid var(--linea-2); transform: rotate(45deg);
}
.tutor-globo-txt { margin: 0; font-weight: 600; font-size: 0.95rem; line-height: 1.4; }
.tutor-globo-x { position: absolute; top: 6px; right: 8px; background: none; border: 0; color: var(--tenue); cursor: pointer; font-size: 0.85rem; padding: 2px; }
.tutor-globo-cta { margin-top: 10px; font-size: 0.78rem; padding: 0.55em 0.95em; }
@keyframes globo-in { from { opacity: 0; transform: translateY(8px) scale(0.94); } to { opacity: 1; transform: none; } }

/* Chat flotante */
.tutor-panel {
  position: fixed; right: 20px; bottom: calc(var(--tutor-y) + 84px); z-index: 61;
  width: min(400px, calc(100vw - 32px)); height: min(620px, calc(100vh - var(--hud-h) - var(--tutor-y) - 110px));
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--sup); border: 2px solid var(--linea-2); border-radius: 24px;
  box-shadow: 0 6px 0 var(--labio), 0 30px 70px rgba(0, 0, 0, 0.5);
  transform-origin: bottom right; animation: tutor-abre 0.24s cubic-bezier(0.2, 1.2, 0.4, 1);
}
@keyframes tutor-abre { from { opacity: 0; transform: translateY(12px) scale(0.94); } to { opacity: 1; transform: none; } }
@media (max-width: 640px) {
  .tutor-panel { left: 8px; right: 8px; width: auto; bottom: var(--tutor-y); height: min(78svh, calc(100svh - var(--hud-h) - var(--tutor-y) - 12px)); }
  .tutor.abierto .tutor-fab { display: none; }
  .tutor-globo { right: 96px; }
}
.tutor-cab {
  display: flex; align-items: center; gap: 10px; padding: 12px 12px 12px 14px; border-bottom: 2px solid var(--linea);
  background: linear-gradient(135deg, color-mix(in srgb, var(--cian) 20%, var(--sup)), color-mix(in srgb, var(--violeta) 24%, var(--sup)));
}
.tutor-retrato { width: 42px; height: 42px; flex: none; display: grid; place-items: center; border-radius: 50%; border: 2px solid var(--cian); background: var(--sup-2); }
.tutor-retrato img { width: 32px; height: 32px; display: block; }
.tutor-quien { display: flex; flex-direction: column; min-width: 0; }
.tutor-quien strong { font: 800 1.08rem/1.1 var(--display); }
.tutor-rol { margin-top: 3px; font: 800 0.62rem/1 var(--display); letter-spacing: 0.08em; text-transform: uppercase; color: var(--cian); }
.tutor-usos { flex: 1; font-size: 0.72rem; color: var(--texto-2); text-align: right; }
.tutor-ico {
  width: 36px; height: 36px; flex: none; display: grid; place-items: center; padding: 0; cursor: pointer;
  background: var(--sup-2); color: var(--texto); border: 2px solid var(--linea); border-radius: 50%; font-size: 1rem;
}
.tutor-ico:hover { border-color: var(--cian); }
#tutor-cerrar { background: var(--coral); border-color: var(--coral-l); color: #fff; font-weight: 800; }
.tutor-msgs { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.tutor-msg { max-width: 88%; padding: 10px 13px; border-radius: 16px; font-size: 0.92rem; line-height: 1.5; overflow-wrap: anywhere; animation: globo-in 0.2s ease-out; }
.tutor-msg.bot { align-self: flex-start; background: var(--sup-2); border: 1px solid var(--linea); border-bottom-left-radius: 4px; }
.tutor-msg.user { align-self: flex-end; background: var(--cian); color: var(--cian-t); font-weight: 600; border-bottom-right-radius: 4px; }
.tutor-msg code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.86em; padding: 1px 5px; border-radius: 6px; background: color-mix(in srgb, var(--texto) 10%, transparent); }
.tutor-code { margin: 8px 0; padding: 10px 12px; overflow-x: auto; white-space: pre; font-size: 0.84rem; line-height: 1.45; background: var(--bg); border: 1px solid var(--linea); border-radius: 10px; }
.tutor-code code { padding: 0; background: none; }
.tutor-cta .btn { width: 100%; }
.tutor-puntos { display: inline-flex; gap: 5px; padding: 4px 2px; }
.tutor-puntos i { width: 7px; height: 7px; border-radius: 50%; background: var(--texto-2); animation: puntito 1s ease-in-out infinite; }
.tutor-puntos i:nth-child(2) { animation-delay: 0.15s; }
.tutor-puntos i:nth-child(3) { animation-delay: 0.3s; }
@keyframes puntito { 0%, 80%, 100% { transform: translateY(0); opacity: 0.45; } 40% { transform: translateY(-5px); opacity: 1; } }
.tutor-rapidas { display: flex; flex-wrap: wrap; gap: 8px; padding: 10px 12px 2px; }
.tutor-rapida {
  flex: none; padding: 8px 12px; cursor: pointer; font: 700 0.8rem/1 var(--cuerpo); color: var(--texto);
  background: var(--sup-2); border: 2px solid var(--linea-2); border-radius: 999px; box-shadow: 0 3px 0 var(--labio);
  transition: transform 0.08s, box-shadow 0.08s, border-color 0.15s;
}
.tutor-rapida:hover { border-color: var(--cian); }
.tutor-rapida:active { transform: translateY(3px); box-shadow: 0 0 0 var(--labio); }
.tutor-input { display: flex; gap: 8px; padding: 10px 12px 12px; }
.tutor-input input {
  flex: 1; min-width: 0; padding: 0.7em 1em; font: inherit; color: var(--texto);
  background: var(--bg-2); border: 2px solid var(--linea); border-radius: 999px;
}
.tutor-input input:focus { outline: none; border-color: var(--cian); }
.tutor-input .btn { width: 46px; height: 46px; padding: 0; border-radius: 50%; flex: none; }

/* ── Convivencia con piezas flotantes en móvil (barra inferior) ── */
@media (max-width: 1023px) {
  .cookies-banner { bottom: calc(var(--tab-h) + env(safe-area-inset-bottom) + 12px); }
}
.pie { margin-top: 24px; padding-bottom: 28px; border-top-width: 2px; }

/* ── Menos movimiento: el reino se queda quieto (accesibilidad) ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .isla-arte canvas { opacity: 1; transform: none; }
}

/* ── Manual de uso (/manual) ── índice fijo a la izquierda en escritorio; en el móvil,
   chips arriba. Texto a ~70 caracteres, capturas con marco y pie. */
.manual h1 { font-family: var(--display); margin: 0 0 6px; }
.manual-aviso { color: var(--texto-2); margin: 0 0 12px; }
.manual-cols { display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 1fr); gap: 28px; align-items: start; margin-top: 18px; }
.manual-cols > * { min-width: 0; }
.manual-indice { position: sticky; top: calc(var(--hud-h, 64px) + 16px); display: flex; flex-direction: column; gap: 2px;
  max-height: calc(100vh - var(--hud-h, 64px) - 32px); overflow-y: auto; }
.manual-indice b { font-size: 0.78rem; text-transform: uppercase; letter-spacing: .06em; color: var(--texto-2); margin-bottom: 6px; }
.manual-indice a { padding: 6px 10px; border-radius: 10px; color: var(--texto); text-decoration: none; font-size: 0.92rem; }
.manual-indice a:hover { background: var(--panel); }
.manual-txt { max-width: 72ch; line-height: 1.65; }
.manual-txt h2 { font-family: var(--display); margin: 34px 0 10px; scroll-margin-top: calc(var(--hud-h, 64px) + 16px); }
.manual-txt h3 { margin: 22px 0 8px; scroll-margin-top: calc(var(--hud-h, 64px) + 16px); }
.manual-txt li + li { margin-top: 4px; }
.manual-txt figure { margin: 18px 0 24px; }
.manual-txt figure img { display: block; width: 100%; height: auto; border-radius: 14px; border: 1px solid var(--panel-borde); box-shadow: 0 6px 22px rgba(0,0,0,.25); }
.manual-txt figcaption { margin-top: 8px; font-size: 0.85rem; color: var(--texto-2); text-align: center; }
.vidas-ayuda { color: var(--acento); white-space: nowrap; }
@media (max-width: 860px) {
  .manual-cols { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .manual-indice { position: static; max-height: none; flex-direction: row; flex-wrap: wrap; gap: 6px; }
  .manual-indice b { flex-basis: 100%; }
  .manual-indice a { background: var(--panel); border: 1px solid var(--panel-borde); font-size: 0.85rem; padding: 5px 10px; }
}

/* ── 🌍 El planeta (src/map/planeta.js, Canvas 2D) ──
   El lienzo pinta el mundo (y el mar abierto, sin bordes); los carteles de los mundos, la
   ciudadela, las tierras por descubrir, las misiones del pueblo y el «estás aquí» son
   botones HTML posicionados por JS (transform). */
.pla { position: relative; height: clamp(380px, 68vh, 680px); border-radius: 22px; overflow: hidden; isolation: isolate;
  background: radial-gradient(circle at 50% 55%, #2a92d2 40%, #1a58a6); box-shadow: var(--sombra); user-select: none; -webkit-user-select: none; }
.pla-cargando::after { content: "⏳ " attr(data-cargando); position: absolute; inset: 0; display: grid; place-items: center; color: #fff;
  font: 700 1rem/1 var(--display); text-shadow: 0 2px 8px rgba(20, 12, 40, .45); animation: pla-respira 1.4s ease-in-out infinite alternate; }
@keyframes pla-respira { from { opacity: .55; } to { opacity: 1; } }
.pla-girando .pla-lienzo { opacity: .55; transition: opacity .15s; }
.pla:focus-visible { outline: 3px solid var(--acento); outline-offset: 3px; }
.pla-lienzo { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; cursor: grab; }
.pla-lienzo:active { cursor: grabbing; }
.pla-vida { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; }
.pla-capa { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.pla-capa > button { position: absolute; left: 0; top: 0; pointer-events: auto; will-change: transform; cursor: pointer; visibility: hidden; }
:where(.pla-capa > button) { font: inherit; }   /* sin especificidad: cada cartel pone su letra */
.pla-terr { display: flex; align-items: center; gap: 6px; padding: 3px 11px 3px 3px; border-radius: 999px; border: 2px solid var(--c);
  background: var(--bg-2); color: var(--texto); box-shadow: 0 6px 16px rgba(20, 12, 40, .28); white-space: nowrap; }
.pla-terr::after { content: ""; position: absolute; left: 50%; bottom: -7px; margin-left: -6px; border: 6px solid transparent; border-bottom: 0; border-top-color: var(--c); }
.pla-terr-g { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; font-size: 18px; background: color-mix(in srgb, var(--c) 24%, transparent); }
.pla-terr-t { display: flex; flex-direction: column; gap: 3px; text-align: start; }
.pla-terr-t b { font: 700 .86rem/1 var(--display); }
.pla-terr-barra { display: block; width: 64px; height: 5px; border-radius: 9px; background: var(--panel-borde); overflow: hidden; }
.pla-terr-barra > i { display: block; height: 100%; background: var(--c); }
.pla-pin { background: none; border: 0; padding: 0 0 9px; }
.pla-pin-av { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; overflow: hidden; background: var(--bg-2);
  border: 3px solid var(--c); box-shadow: 0 8px 18px rgba(20, 12, 40, .35); font-size: 24px; animation: pla-bote 2.2s ease-in-out infinite; }
.pla-pin-av img { width: 100%; height: 100%; object-fit: cover; }
.pla-pin::after { content: ""; position: absolute; left: 50%; bottom: 0; margin-left: -8px; border: 8px solid transparent; border-bottom: 0; border-top-color: var(--c); }
@keyframes pla-bote { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
.pla-pin.pla-lejos .pla-pin-av { width: 30px; height: 30px; font-size: 16px; border-width: 2px; }
.pla-hub { border: 0; padding: 4px 11px; border-radius: 999px; background: rgba(27, 16, 53, .74); color: #fff; font: 700 .85rem/1.2 var(--display); white-space: nowrap; }
/* fichas detalladas, «Continuar», el Mundo IA y el Reto IA */
.pla-ficha-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; padding-inline-end: 30px; }
.pla-chip { padding: 3px 9px; border-radius: 999px; background: var(--panel-borde); color: var(--texto); font: 700 .74rem/1.3 var(--display); white-space: nowrap; }
.pla-ficha-meta { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 10px; color: var(--texto-2); font-size: .84rem; }
.pla-ficha-meta b { color: var(--texto); }
.pla-ficha-historia { margin: 10px 0 0; color: var(--texto-2); font-size: .86rem; line-height: 1.45;
  display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.pla-seguir { position: absolute; top: 10px; inset-inline-start: 10px; z-index: 2; max-width: calc(100% - 70px); padding: 8px 14px;
  border: 2px solid var(--c, var(--acento)); border-radius: 999px; background: var(--bg-2); color: var(--texto); cursor: pointer;
  font: 800 .86rem/1.2 var(--display); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  box-shadow: 0 4px 0 color-mix(in srgb, var(--c, var(--acento)) 55%, #000), 0 10px 22px rgba(20, 12, 40, .3); }
.pla-seguir:hover { transform: translateY(-1px); }
.pla-seguir:focus-visible { outline: 3px solid var(--acento); outline-offset: 2px; }
.pla-bruma.pla-ia { border: 1px solid #36e0ff; background: rgba(20, 30, 80, .78); color: #c8f6ff; opacity: 1; box-shadow: 0 0 14px rgba(54, 224, 255, .45); }
.pla-retoia { --c: #36e0ff; background: linear-gradient(135deg, #1d2a6b, #3b1d6b); box-shadow: 0 0 12px rgba(54, 224, 255, .5); }
.pla-ej { width: 30px; height: 30px; padding: 0; border: 0; border-radius: 9px; background: transparent; pointer-events: none !important; }
.pla-ej:focus-visible { outline: 3px solid var(--acento); outline-offset: 2px; }
.pla-mision { border: 2px solid var(--c); padding: 2px 9px; border-radius: 999px; background: rgba(20, 16, 40, .78); color: #fff;
  font: 700 .74rem/1.2 var(--display); white-space: nowrap; box-shadow: 0 4px 10px rgba(20, 12, 40, .3); }
.pla-final { background: color-mix(in srgb, var(--c) 78%, #1b1035); font-size: .8rem; text-shadow: 0 1px 2px rgba(0, 0, 0, .4); }
.pla-mini .pla-terr-t, .pla-bruma.pla-mini span { display: none; }
.pla-terr.pla-mini { padding: 2px; }
.pla-bruma { border: 1px dashed rgba(255, 255, 255, .7); padding: 3px 9px; border-radius: 999px; background: rgba(120, 132, 150, .42); color: #fff; font: 600 .7rem/1.2 var(--cuerpo); white-space: nowrap; opacity: .85; }
.pla-ctl { position: absolute; top: 10px; inset-inline-end: 10px; z-index: 2; display: flex; flex-direction: column; gap: 6px; }
.pla-b { width: 40px; height: 40px; border-radius: 12px; border: 1px solid var(--panel-borde); background: var(--bg-2); color: var(--texto);
  font: 700 1.05rem/1 var(--display); display: grid; place-items: center; cursor: pointer; box-shadow: 0 4px 12px rgba(20, 12, 40, .22); }
.pla-b:hover { transform: translateY(-1px); }
.pla-b:focus-visible { outline: 3px solid var(--acento); outline-offset: 2px; }
.pla-ficha { position: absolute; inset-inline-start: 12px; bottom: 12px; z-index: 3; width: min(360px, calc(100% - 76px)); padding: 14px 16px;
  border-radius: 18px; background: var(--bg-2); color: var(--texto); border: 1px solid var(--panel-borde); box-shadow: var(--sombra); animation: mm-rise .22s cubic-bezier(.2, .9, .3, 1); }
.pla-ficha-x { position: absolute; top: 8px; inset-inline-end: 8px; width: 30px; height: 30px; border-radius: 50%; border: 0; background: var(--panel-borde); color: var(--texto); cursor: pointer; }
.pla-ficha-cab { display: flex; align-items: center; gap: 12px; padding-inline-end: 30px; }
.pla-ficha-cab b { display: block; font: 700 1.04rem/1.25 var(--display); }
.pla-ficha-cab small { display: block; color: var(--texto-2); font-size: .82rem; margin-top: 2px; }
.pla-ficha-g { flex: none; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; font-size: 28px; background: color-mix(in srgb, var(--c, #8b6cff) 24%, transparent); }
.pla-ficha-n { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--c); color: #fff; font: 800 1.15rem/1 var(--display); }
.pla-ficha-n.is-done { background: #ffcf3f; color: #5a3d00; }
.pla-ficha-n.is-lock { background: #7d7690; }
.pla-ficha-n.is-skip { background: #8fb8ff; }
.pla-barra { display: block; height: 8px; margin-top: 12px; border-radius: 9px; background: var(--panel-borde); overflow: hidden; }
.pla-barra > i { display: block; height: 100%; background: linear-gradient(90deg, var(--ala-sun), var(--ala-coral)); }
.pla-ficha-est { margin: 10px 0 0; font-weight: 600; font-size: .9rem; }
.pla-ficha-est.is-lock, .pla-ficha-nota { color: var(--texto-2); }
.pla-ficha-nota { margin: 0; font-size: .86rem; }
.pla-ficha-acc { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.pla-ficha-acc:empty { display: none; }
.pla-ayuda { position: absolute; left: 50%; bottom: 14px; z-index: 2; transform: translateX(-50%); width: max-content; max-width: calc(100% - 110px);
  margin: 0; padding: 6px 12px; border-radius: 999px; background: rgba(20, 12, 40, .72); color: #fff; font-size: .78rem; text-align: center; pointer-events: none; }
.pla.pla-full { position: fixed; inset: 0; z-index: 1250; height: auto; border-radius: 0; }
body.pla-sin-scroll { overflow: hidden; }
.reino-3d .reino-cab p { display: none; }
@media (max-width: 560px) {
  .pla { height: 70vh; min-height: 380px; border-radius: 18px; }
  .pla-ficha { inset-inline: 8px; bottom: 8px; width: auto; }
  .pla-b { width: 38px; height: 38px; }
  .pla-terr { padding: 2px 8px 2px 2px; gap: 4px; border-width: 1.5px; }
  .pla-terr-g { width: 22px; height: 22px; font-size: 13px; }
  .pla-terr-t b { font-size: .72rem; }
  .pla-terr-barra { width: 44px; height: 4px; }
  .pla-bruma span { display: none; }   /* en el móvil, solo 🔭 */
  .pla-hub { font-size: .76rem; padding: 3px 9px; }
}
.pla-full .pla-ctl { top: calc(10px + env(safe-area-inset-top, 0px)); inset-inline-end: calc(10px + env(safe-area-inset-right, 0px)); }
.pla-full .pla-ficha, .pla-full .pla-ayuda { bottom: calc(12px + env(safe-area-inset-bottom, 0px)); }
@media (prefers-reduced-motion: reduce) { .pla-pin-av, .pla-ficha, .pla-cargando::after { animation: none; } }