/* Chrome del panel Profesor — "Mis actividades" (rediseño visual).
   Estilo propio (no Bootstrap) para la barra superior, la home y sus tarjetas.
   NO usa los tokens --ww-* del juego (esto es chrome, no "el juego"): por eso el
   ratchet styles.test.mjs lo EXCLUYE. Paleta calibrada del mockup del usuario.
   Fuente = del sistema (decisión del usuario, sin webfont). */

:root {
  --dash-bg:        #f3efe4;   /* crema cálido de la página */
  --dash-fg:        #1f2937;
  --dash-ink:       #141c2e;   /* títulos / navy */
  --dash-muted:     #6b7280;
  --dash-line:      #e2ddce;   /* bordes cálidos */
  --dash-card-line: #ece7d8;
  --dash-primary:   #2563eb;
  --dash-primary-d: #1d4ed8;
  /* Barra superior: terracota cálido que combina con el crema (antes navy #141c2e).
     Los botones son velos de blanco translúcido → se adaptan al color de la barra. */
  --dash-navy:      #c95324;
  --dash-navy-btn:  rgba(255,255,255,.14);
  --dash-navy-btn2: rgba(255,255,255,.26);
  --dash-navy-line: rgba(255,255,255,.32);
  --dash-yellow:    #f5c518;
  --dash-yellow-d:  #ffd534;
  /* Paleta suave (bg/fg) por color semántico — UNA fuente para las pastillas de
     plantilla (.tag--*), la tira de modos (.mode-*) y el respaldo del preview. */
  --soft-info-bg:    #e2f8fb; --soft-info-fg:    #0891b2;
  --soft-success-bg: #e8f6ee; --soft-success-fg: #16a34a;
  --soft-warning-bg: #fef3e2; --soft-warning-fg: #d97706;
  --soft-primary-bg: #e7f0fe; --soft-primary-fg: #2563eb;
  --soft-danger-bg:  #fdeaea; --soft-danger-fg:  #ef4444;
  --soft-neutral-bg: #eef2f7; --soft-neutral-fg: #475569;
}

/* La app del profesor vive sobre crema; la fuente del sistema. */
body {
  background: var(--dash-bg);
  color: var(--dash-fg);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
#app { min-height: 40vh; }

/* ── MÁRGENES DEL PANEL DEL PROFE (R-A · plan del editor, 2026-08-13) ────────
   El editor, los reportes y el admin se pintaban PEGADOS al borde de la
   pantalla: «está ahogado». No era de ninguna vista — `#app` traía su
   `container py-3` de Bootstrap y lo perdió cuando la home pasó a poner su
   propio `.home-wrap` en el rediseño. La home quedó bien y las otras 15
   pantallas se quedaron sin nada, que es lo que pasa cuando el aire lo pone
   cada vista en vez de un sitio único.
   Va aquí, en el chrome, y NO en cada vista: así una pantalla nueva nace con
   márgenes sin acordarse de nada.
   · `:not(.container)` — en `student.html` el `#app` ya lleva el contenedor de
     Bootstrap; sin esto se sumarían los dos.
   · Las vistas que traen su PROPIO envoltorio a ancho completo se declaran
     abajo: la home necesita sus 1440 para la rejilla de tarjetas, y el juego
     manda sobre su propio marco. */
#app:not(.container) {
  max-width: 1100px;
  margin: 0 auto;
  padding: 1rem .9rem 2.5rem;
}
#app:not(.container):has(> .home-wrap),
#app:not(.container):has(> .ww-play-page) { max-width: none; padding: 0; }
@media (max-width: 640px) {
  #app:not(.container) { padding: .75rem .7rem 2rem; }
}

/* ─────────────────────────── Barra superior ─────────────────────────── */
/* SU ALTO ES UN DATO MEDIDO, no un número que cada pantalla recuerde. Quien
   tenga que llenar «lo que queda de ventana» (el marco del alumno) lo descuenta
   con `var(--ww-topbar-h)`. Antes nadie lo descontaba: la página del alumno
   pedía 100dvh DEBAJO de la barra, así que el documento medía 72px más que la
   ventana y siempre había scroll (medido, 2026-08-15).
   El 56 de aquí es solo el valor de ARRANQUE, para el primer pintado: el real
   lo escribe `medirBarra()` (core/boot.js) desde la caja del elemento, porque
   la barra es `flex-wrap: wrap` y a ciertos anchos ocupa dos líneas — un número
   fijo volvía a dejar scroll, con otra cifra. */
:root { --ww-topbar-h: 56px; }
.ww-topbar {
  position: relative;
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  background: var(--dash-navy); color: #fff;
  padding: 0 18px; min-height: var(--ww-topbar-h);
  flex-wrap: wrap;
}
/* Botón hamburguesa — oculto en escritorio, visible en móvil. */
.ww-topbar__burger {
  display: none;
  width: 40px; height: 40px; align-items: center; justify-content: center;
  background: var(--dash-navy-btn); color: #e5edf9;
  border: 1px solid var(--dash-navy-line); border-radius: 9px;
  cursor: pointer; font-size: 20px;
}
.ww-topbar__burger:hover { background: var(--dash-navy-btn2); color: #fff; }
.ww-topbar__brand {
  display: inline-flex; align-items: center; gap: 10px;
  font-weight: 800; font-size: 17px; letter-spacing: .2px; color: #fff;
  text-decoration: none;
}
.ww-topbar__brand:hover { color: #fff; }
.ww-topbar__logo {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 8px;
  background: var(--dash-yellow); color: var(--dash-ink); font-size: 15px;
}
.ww-topbar__brand .sep { opacity: .45; font-weight: 500; }
.ww-topbar__brand .role { font-weight: 600; opacity: .9; }
.ww-topbar__actions { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }

.ww-topbar #ww-version {
  font-size: 11px; font-weight: 700; letter-spacing: .2px;
  background: var(--dash-navy-btn); color: #ffe3d3;
  padding: 4px 9px; border-radius: 6px;
}

/* Botones de la barra (incl. los inyectados en #ww-mute-slot/#ww-auth-slot). */
.ww-navbtn,
#ww-mute-slot > *, #ww-auth-slot > * {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  background: var(--dash-navy-btn); color: #e5edf9;
  border: 1px solid var(--dash-navy-line); border-radius: 9px;
  padding: 8px 13px; min-height: 36px;
  font: inherit; font-size: 13px; font-weight: 600; line-height: 1;
  cursor: pointer; text-decoration: none; transition: background .15s, color .15s;
}
.ww-navbtn:hover,
#ww-mute-slot > *:hover, #ww-auth-slot > *:hover {
  background: var(--dash-navy-btn2); color: #fff;
}
.ww-navbtn--icon { width: 36px; padding: 0; }
/* La etiqueta de los botones solo-icono SOLO se ve en el desplegable móvil. */
.ww-navbtn__lbl { display: none; }
.ww-navbtn--accent {
  background: var(--dash-yellow); color: var(--dash-ink); border: none;
}
.ww-navbtn--accent:hover { background: var(--dash-yellow-d); color: var(--dash-ink); }
.ww-navbtn i { font-size: 15px; }

/* Sesión del profe (logueado): avatar redondo + nombre + menú. El wrapper
   `.ww-auth--in` NO debe heredar el recuadro navy de los botones de la barra
   (por eso lo reseteamos) — el fondo/borde va en el propio botón interno. */
#ww-auth-slot > .ww-auth--in {
  background: none; border: none; padding: 0; min-height: 0; gap: 6px;
}
.ww-auth__btn {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--dash-navy-btn); color: #e5edf9;
  border: 1px solid var(--dash-navy-line); border-radius: 999px;
  padding: 4px 12px 4px 5px; min-height: 36px;
  font: inherit; font-size: 13px; font-weight: 600; line-height: 1;
  cursor: pointer; transition: background .15s, color .15s;
}
.ww-auth__btn:hover { background: var(--dash-navy-btn2); color: #fff; }
.ww-auth__av {
  width: 28px; height: 28px; flex: 0 0 auto;
  border-radius: 50%; object-fit: cover; background: #fff; display: block;
}
.ww-auth__av--ph {
  display: inline-flex; align-items: center; justify-content: center;
  color: #8496b3; font-size: 16px;
}
.ww-auth__name { max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ww-auth__mod { flex: 0 0 auto; }
/* Menú desplegable (Mi perfil / Salir). */
.ww-auth__menu {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 60;
  min-width: 180px; padding: 6px;
  background: #fff; border: 1px solid #e2ddce; border-radius: 12px;
  box-shadow: 0 12px 30px rgba(20,28,46,.18);
  display: flex; flex-direction: column; gap: 2px;
}
.ww-auth__menu[hidden] { display: none; }
.ww-auth__item {
  display: flex; align-items: center; gap: 9px; width: 100%;
  padding: 9px 11px; border: none; background: none; border-radius: 8px;
  font: inherit; font-size: 14px; color: #1f2937; text-align: left;
  cursor: pointer; text-decoration: none;
}
.ww-auth__item:hover { background: #f3efe4; color: #141c2e; }
.ww-auth__item i { font-size: 15px; color: #6b7280; }

/* ──────────────────────────── Home layout ───────────────────────────── */
.home-wrap { max-width: 1440px; margin: 0 auto; padding: 30px 28px 60px; }

.home-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; flex-wrap: wrap; margin-bottom: 18px;
}
.home-head h1 {
  margin: 0; font-size: 30px; font-weight: 800; letter-spacing: -.5px;
  color: var(--dash-ink);
}
.home-head p { margin: 4px 0 0; color: var(--dash-muted); font-size: 14px; font-weight: 500; }

/* Botones del toolbar */
.btn-ghost, .btn-primary-solid {
  display: inline-flex; align-items: center; gap: 7px;
  font: inherit; font-size: 13px; font-weight: 600; line-height: 1;
  border-radius: 10px; cursor: pointer; text-decoration: none;
  transition: background .15s, border-color .15s, box-shadow .15s;
}
.btn-ghost {
  background: #fff; color: #374151; border: 1px solid var(--dash-line);
  padding: 9px 14px; box-shadow: 0 1px 2px rgba(20,28,46,.04);
}
.btn-ghost:hover { border-color: #c9c2ad; background: #faf8f2; color: #374151; }
.btn-ghost:disabled { opacity: .5; cursor: not-allowed; }
.btn-ghost i { font-size: 15px; }
/* Solo icono (tres puntos, lápiz suelto…): cuadrado, para que no quede un botón
   ancho y medio vacío junto a los que sí llevan texto. Vive AQUÍ, al lado de la
   familia, y no en la hoja de la vista que primero lo necesitó: la medida que
   corrige (`.btn-ghost { padding: 9px 14px }`) está en este archivo, así que
   separarlas es garantizar que se desincronicen. Misma forma que
   `.ww-navbtn--icon`, que es la convención ya establecida para lo mismo. */
.btn-ghost--icon { width: 36px; padding: 0; justify-content: center; }
.btn-primary-solid {
  background: var(--dash-primary); color: #fff; border: none;
  padding: 10px 18px; font-weight: 700;
  box-shadow: 0 3px 10px rgba(37,99,235,.32);
}
.btn-primary-solid:hover { background: var(--dash-primary-d); color: #fff; }
.btn-primary-solid i { font-size: 16px; }

/* Búsqueda + filtro + contador */
.home-tools {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 24px;
}
.home-search { position: relative; flex: 1; min-width: 240px; }
.home-search > i {
  position: absolute; left: 15px; top: 50%; transform: translateY(-50%);
  color: #9aa2ad; font-size: 16px; pointer-events: none;
}
.home-search input {
  width: 100%; padding: 12px 16px 12px 40px;
  border: 1px solid var(--dash-line); border-radius: 12px; background: #fff;
  font: inherit; font-size: 14px; color: var(--dash-fg);
  box-shadow: 0 1px 2px rgba(20,28,46,.04);
}
.home-search input:focus {
  outline: none; border-color: var(--dash-primary);
  box-shadow: 0 0 0 3px rgba(37,99,235,.14);
}
/* Config (filtro por plantilla) — botón icónico junto al buscador que despliega
   un popover con el <select>. Usa <details>/<summary> (toggle nativo, sin JS). */
.home-filter { position: relative; flex: 0 0 auto; }
.home-filter > summary { list-style: none; }
.home-filter > summary::-webkit-details-marker { display: none; }
.home-config {
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; border-radius: 12px;
  border: 1px solid var(--dash-line); background: #fff; color: #374151;
  cursor: pointer; font-size: 18px; box-shadow: 0 1px 2px rgba(20,28,46,.04);
}
.home-config:hover { border-color: #c9c2ad; background: #faf8f2; }
.home-filter[open] > .home-config,
.home-filter.is-set > .home-config {
  border-color: var(--dash-primary); color: var(--dash-primary);
  box-shadow: 0 0 0 3px rgba(37,99,235,.14);
}
.home-filter-pop {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 40;
  min-width: 220px; padding: 12px;
  background: #fff; border: 1px solid var(--dash-line); border-radius: 12px;
  box-shadow: 0 12px 30px rgba(20,28,46,.14);
}
.home-filter-label { font-size: 12px; font-weight: 700; color: var(--dash-muted); margin-bottom: 6px; }
.home-filter-pop select {
  appearance: none; -webkit-appearance: none;
  width: 100%; padding: 10px 14px;
  border: 1px solid var(--dash-line); border-radius: 10px; background: #fff;
  font: inherit; font-size: 14px; font-weight: 600; color: #374151; cursor: pointer;
}
.home-filter-pop select:focus {
  outline: none; border-color: var(--dash-primary);
  box-shadow: 0 0 0 3px rgba(37,99,235,.14);
}

/* ───────────────────────────── Grid + tarjeta ───────────────────────── */
.home-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 18px;
}
.acard {
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--dash-card-line); border-radius: 16px;
  overflow: hidden; box-shadow: 0 1px 3px rgba(20,28,46,.05);
  transition: box-shadow .18s, transform .18s;
}
.acard:hover { box-shadow: 0 12px 30px rgba(20,28,46,.13); transform: translateY(-3px); }

/* Preview esquemático LIGERO (core/homePreview.js): dibujo fijo por tipo de
   plantilla, sin render del juego. Marco de alto fijo tipo mockup. */
.acard-preview {
  position: relative; height: 150px; overflow: hidden;
  border-bottom: 1px solid #f0ecdf; background: #fbfaf7;
}
/* Badge de nº de páginas (esquina sup. izq.) — vistazo rápido de "cuántas hojas". */
.acard-pages {
  position: absolute; top: 9px; left: 10px; z-index: 3;
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; font-weight: 800; line-height: 1;
  background: rgba(20,28,46,.72); color: #fff;
  padding: 4px 8px; border-radius: 7px;
  backdrop-filter: blur(2px);
}
.acard-pages i { font-size: 11px; }
.pv {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  padding: 12px; overflow: hidden;
  /* Centrado GENERAL: un esquema puede acotar su ancho (width:86% en pv-quiz,
     82% en pv-text, 68% en pv-memory…) sobre este mismo elemento. Como está en
     position:absolute con inset:0 (left:0+right:0), fijar width dejaría el bloque
     anclado a la IZQUIERDA (el navegador ignora right:0). margin auto reparte el
     hueco a ambos lados → cualquier esquema, actual o futuro, queda centrado sin
     parche por plantilla. */
  margin: auto;
}
/* Emparejar */
.pv-match { gap: 16px; }
.pv-col { display: flex; flex-direction: column; gap: 7px; }
.pv-chip {
  font-size: 9px; font-weight: 600; padding: 5px 8px; border-radius: 5px;
  width: 72px; text-align: center; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
.pv-chip--l { background: #eef2ff; color: #4338ca; }
.pv-chip--r { background: #f5f3ff; color: #6d28d9; }
.pv-match__ropes { width: 40px; height: 92px; align-self: center; flex: 0 0 auto; }
/* Quiz */
.pv-quiz { flex-direction: column; width: 86%; gap: 9px; }
/* Pastilla clara: legible sobre CUALQUIER fondo/skin (incl. oscuros) — Fase 2b. */
.pv-quiz__q {
  text-align: center; font-size: 10px; font-weight: 700; color: #1f2937; line-height: 1.2;
  background: rgba(255,255,255,.85); padding: 3px 8px; border-radius: 6px;
}
.pv-quiz__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; width: 100%; }
.pv-opt {
  font-size: 9px; font-weight: 700; color: #fff; padding: 6px; border-radius: 6px;
  text-align: center; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
.pv-opt--a { background: #e0483d; } .pv-opt--b { background: #2563eb; }
.pv-opt--c { background: #f59e0b; } .pv-opt--d { background: #16a34a; }
/* Operaciones (calculadora) */
.pv-calc { flex-direction: column; gap: 7px; background: #0b1024; }
.pv-calc__disp {
  font-family: "Courier New", monospace; font-weight: 800; font-size: 20px;
  color: #f5c518; letter-spacing: 2px;
}
.pv-calc__screen {
  background: #000; color: #22d3ee; font-family: "Courier New", monospace;
  font-weight: 700; font-size: 14px; padding: 2px 20px; border-radius: 5px; border: 1px solid #1e293b;
}
.pv-calc__pad { display: grid; grid-template-columns: repeat(3, 18px); gap: 5px; }
.pv-calc__pad span { height: 14px; background: #16233b; border-radius: 4px; }
.pv-calc__pad span.ok { background: #22c55e; }
/* Texto (comas/tildes) */
.pv-text { flex-direction: column; width: 82%; text-align: center; gap: 8px; }
/* Pastilla clara: legible sobre cualquier fondo/skin (incl. oscuros) — Fase 2b. */
.pv-text__line {
  font-size: 11px; font-weight: 700; color: #1f2937; line-height: 1.3;
  background: rgba(255,255,255,.85); padding: 4px 9px; border-radius: 7px;
}
.pv-text__rule { border-bottom: 2px solid #94a3b8; width: 70%; margin: 0 auto; }
.pv-text__ok { font-size: 9px; font-weight: 700; color: #fff; background: #16a34a; padding: 3px 12px; border-radius: 5px; }
/* Diagrama */
.pv-diagram { gap: 10px; }
.pv-diagram__img { max-height: 122px; max-width: 55%; object-fit: contain; border-radius: 8px; }
.pv-tags { display: flex; flex-direction: column; gap: 5px; }
.pv-tag {
  font-size: 8px; font-weight: 600; background: #f1f5f9; color: #334155;
  border: 1px solid #e2e8f0; padding: 4px 7px; border-radius: 12px; white-space: nowrap;
}
/* Memoria */
.pv-memory { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; width: 68%; }
.pv-memory span { aspect-ratio: 3/4; background: linear-gradient(135deg, #6366f1, #8b5cf6); border-radius: 5px; }
/* Ruleta — disco de 8 sectores + eje + aguja */
.pv-wheel__disc {
  width: 106px; height: 106px; border-radius: 50%;
  background: conic-gradient(#ef4444 0 45deg, #f59e0b 45deg 90deg, #eab308 90deg 135deg,
    #16a34a 135deg 180deg, #0891b2 180deg 225deg, #2563eb 225deg 270deg,
    #8b5cf6 270deg 315deg, #ec4899 315deg 360deg);
  box-shadow: 0 2px 9px rgba(20, 28, 46, .18);
}
.pv-wheel__hub {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
}
.pv-wheel__pin {
  position: absolute; top: 12px; left: 50%; transform: translateX(-50%);
  width: 0; height: 0; border-left: 7px solid transparent; border-right: 7px solid transparent;
  border-top: 15px solid #141c2e;
}
/* Sopa de letras — rejilla 5×5, palabra resaltada en diagonal */
.pv-word__grid { display: grid; grid-template-columns: repeat(5, 20px); gap: 3px; }
.pv-word__grid span {
  height: 20px; display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; color: #475569; background: #f1f5f9; border-radius: 4px;
}
.pv-word__grid .pv-word__hit { background: #2563eb; color: #fff; }
/* Crucigrama — rejilla blanca/negra con letras */
.pv-cross__grid { display: grid; grid-template-columns: repeat(5, 20px); gap: 2px; }
.pv-cross__grid span {
  height: 20px; border-radius: 3px; background: #fff; border: 1px solid #dbe2ea;
  display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 800; color: #334155;
}
.pv-cross__grid .pv-cross__b { background: #141c2e; border-color: #141c2e; }
.pv-cross__grid .pv-cross__l { background: #e7f0fe; color: #2563eb; border-color: #bfd3f5; }
/* Ordena las Pelotas — 3 tubos con bolas */
.pv-balls { gap: 12px; }
.pv-tube {
  display: flex; flex-direction: column-reverse; gap: 3px; padding: 4px;
  border: 2px solid #cbd5e1; border-top: 0; border-radius: 0 0 13px 13px; background: rgba(255, 255, 255, .55);
}
.pv-tube b { width: 18px; height: 18px; border-radius: 50%; display: block; }
.pv-tube__empty { background: transparent; }
/* Explota Globos */
.pv-globos svg { width: 94%; height: 100%; }
/* Abre Cajas — 6 cajas, una abierta */
.pv-boxes__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.pv-box {
  width: 34px; height: 30px; border-radius: 7px; background: #ece7d8; color: #8a8371;
  border: 2px solid #ddd6c4; display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 800;
}
.pv-box--open {
  background: #fef3e2; color: #f59e0b; border-color: #f6d488;
  box-shadow: 0 2px 9px rgba(245, 158, 11, .3);
}
/* Respaldo genérico — el color lo da la clase .tag--{color} de la plantilla; aquí
   solo la maqueta + un neutro por defecto (por si el color no tuviera .tag--*). */
.pv-generic { flex-direction: column; gap: 8px; background: var(--soft-neutral-bg); color: var(--soft-neutral-fg); }
.pv-generic i { font-size: 40px; line-height: 1; }
.pv-generic span { font-size: 12px; font-weight: 700; }
/* Cabecera de tarjeta-lista (variante) */
.acard-listhead {
  height: 150px; display: flex; align-items: center; gap: 14px; padding: 18px;
  background: var(--dash-navy); color: #fff; border-bottom: 1px solid #f0ecdf;
}
.acard-listhead i { font-size: 34px; opacity: .8; }
.acard-listhead .t { font-weight: 700; font-size: 16px; }
.acard-listhead .s { opacity: .8; font-size: 12.5px; }

/* Tira de modos (pastillas de color con icono) */
.acard-modes {
  display: flex; gap: 6px; padding: 10px 12px; border-bottom: 1px solid #f2eee2;
}
.acard-modes button {
  flex: 1; display: inline-flex; align-items: center; justify-content: center;
  height: 30px; border: none; border-radius: 8px; cursor: pointer;
  font-size: 15px; transition: background .15s, color .15s;
}
.acard-modes button.mode-solo  { background: var(--soft-success-bg); color: var(--soft-success-fg); }
.acard-modes button.mode-vs    { background: var(--soft-danger-bg);  color: var(--soft-danger-fg); }
.acard-modes button.mode-teams { background: var(--soft-primary-bg); color: var(--soft-primary-fg); }
.acard-modes button.mode-live  { background: var(--soft-warning-bg); color: var(--soft-warning-fg); }
.acard-modes button.mode-task  { background: var(--soft-info-bg);    color: var(--soft-info-fg); }
/* Modo host-only sin sesión (En vivo / Tarea): CANDADO en gris neutro — se ve, se
   entiende que falta algo, y el tooltip/toast dice qué ("Inicia sesión para crear
   una sala en vivo"). No se esconde: esconder un modo enseña que no existe. */
.acard-modes button.is-locked,
.acard-modes button.is-locked:hover {
  background: var(--soft-neutral-bg); color: var(--soft-neutral-fg);
  cursor: pointer;
}
.acard-modes button.mode-solo:hover  { background: var(--soft-success-fg); color: #fff; }
.acard-modes button.mode-vs:hover    { background: var(--soft-danger-fg);  color: #fff; }
.acard-modes button.mode-teams:hover { background: var(--soft-primary-fg); color: #fff; }
.acard-modes button.mode-live:hover  { background: var(--soft-warning-fg); color: #fff; }
.acard-modes button.mode-task:hover  { background: var(--soft-info-fg);    color: #fff; }
/* Botón "Jugar" de la tarjeta-lista (ocupa toda la fila) */
.acard-modes .mode-list {
  flex: 1; gap: 7px; font-size: 13px; font-weight: 700;
  background: #e7f0fe; color: #2563eb;
}
.acard-modes .mode-list:hover { background: #2563eb; color: #fff; }

/* Cuerpo de la tarjeta */
.acard-body { padding: 13px 14px 15px; display: flex; flex-direction: column; flex: 1; }
.acard-toprow {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  margin-bottom: 9px;
}
.tag {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: 800; padding: 4px 10px; border-radius: 999px;
  background: var(--soft-neutral-bg); color: var(--soft-neutral-fg);
}
.tag i { font-size: 12px; }
.tag--info      { background: var(--soft-info-bg);    color: var(--soft-info-fg); }
.tag--success   { background: var(--soft-success-bg); color: var(--soft-success-fg); }
.tag--warning   { background: var(--soft-warning-bg); color: var(--soft-warning-fg); }
.tag--primary   { background: var(--soft-primary-bg); color: var(--soft-primary-fg); }
.tag--danger    { background: var(--soft-danger-bg);  color: var(--soft-danger-fg); }
.tag--secondary { background: var(--soft-neutral-bg); color: var(--soft-neutral-fg); }

.acard-icons { display: flex; gap: 4px; align-items: center; }
.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 7px; border: none;
  background: #f4f1e8; color: #6b7280; cursor: pointer; font-size: 14px;
  transition: background .15s, color .15s;
}
.icon-btn.edit:hover { background: #e7f0fe; color: #2563eb; }
.icon-btn.del:hover  { background: #fdeaea; color: #ef4444; }
.acard-unsync { color: #f59e0b; font-size: 14px; }

.acard-title {
  margin: 0; font-size: 15px; font-weight: 700; color: var(--dash-ink);
  line-height: 1.3;
}
.acard-sub { margin: 3px 0 0; font-size: 12.5px; color: #8a8371; font-weight: 500; }
.acard-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; }
.acard-tags .t {
  font-size: 10px; font-weight: 600; color: #6b7280;
  background: #f4f1e8; border: 1px solid #e7e1d2; border-radius: 6px; padding: 2px 7px;
}
.acard-foot {
  display: flex; align-items: center; gap: 14px;
  margin-top: auto; padding-top: 11px; border-top: 1px solid #f2eee2;
  color: #9aa2ad; font-size: 12px; font-weight: 600;
}
.acard-foot span { display: inline-flex; align-items: center; gap: 5px; }
.acard-foot .heart { color: #ef4444; }
/* Chip "N formatos" (el gesto Wordwall): mismo tono que el pie, clicable → editor. */
.acard-switch { border: none; background: none; padding: 0; font: inherit; color: #2563eb;
  display: inline-flex; align-items: center; gap: 5px; cursor: pointer; font-weight: 600; }
.acard-switch:hover { text-decoration: underline; }

/* Estado vacío / sin resultados */
.home-empty { text-align: center; padding: 60px 20px; color: var(--dash-muted); }
.home-empty i { font-size: 54px; opacity: .5; }
.home-empty p { margin-top: 14px; font-size: 15px; }
/* "No aparece" es una bifurcación, no un callejón (norte §2b: buscar es
   binario). El vacío ofrece las salidas reales, no un mensaje y ya. */
.home-empty-actions {
  margin-top: 18px; display: flex; gap: 10px; justify-content: center; flex-wrap: wrap;
}

/* Entrada discreta del alumno en la portada (§7c): existe, no protagoniza. */
.landing-hero__pin { margin-top: 14px; font-size: 13px; color: var(--dash-muted); }
.landing-hero__pin a { font-weight: 700; }

/* ───────────────────────────── Responsive ───────────────────────────── */
@media (max-width: 640px) {
  /* Barra compacta: marca + hamburguesa. Todas las acciones caen en un menú
     desplegable (mismos botones, incluidos mute/auth inyectados en sus slots). */
  /* El alto NO baja en móvil: el hamburguesa mide 40px y con los 8px de aire
     arriba y abajo la barra sigue midiendo 56. Declararla en 52 era una mentira
     de 4px que se convertía en 4px de scroll en la página del alumno. */
  .ww-topbar { flex-wrap: nowrap; padding: 8px 12px; }
  .ww-topbar__burger { display: inline-flex; }
  .ww-topbar__actions {
    display: none;
    position: absolute; top: 100%; right: 8px; left: 8px; z-index: 60;
    flex-direction: column; align-items: stretch; gap: 6px;
    background: var(--dash-navy); border: 1px solid var(--dash-navy-line);
    border-radius: 12px; padding: 10px; margin-top: 6px;
    box-shadow: 0 16px 34px rgba(0,0,0,.45);
  }
  .ww-topbar.open .ww-topbar__actions { display: flex; }
  .ww-topbar__actions #ww-version { align-self: flex-start; }
  #ww-mute-slot, #ww-auth-slot { width: 100%; }
  .ww-topbar__actions .ww-navbtn,
  .ww-topbar__actions #ww-mute-slot > *,
  .ww-topbar__actions #ww-auth-slot > * {
    width: 100%; justify-content: flex-start; padding: 8px 12px; gap: 8px;
  }
  .ww-topbar__actions .ww-navbtn--icon { width: 100%; }
  /* En el desplegable, los botones solo-icono muestran su etiqueta → nada de
     barras "vacías" con un icono suelto. */
  .ww-topbar__actions .ww-navbtn__lbl { display: inline; }
  .ww-topbar__actions .ww-navbtn i { font-size: 16px; width: 18px; text-align: center; }

  .home-wrap { padding: 20px 16px 48px; }
  .home-head h1 { font-size: 24px; }
  /* "Nueva" a lo ancho en móvil, debajo del título. */
  .home-head { gap: 10px; }
  .home-head .btn-primary-solid { width: 100%; justify-content: center; }
  /* El desplegable se ancla por la DERECHA también en el móvil: el botón vive
     al final de la barra, así que `left: 0` lo lanzaba hacia fuera de la
     pantalla (medido: 150px fuera en un teléfono de 390). Anclado a la derecha
     crece hacia dentro. El tope evita el caso contrario en pantallas muy
     estrechas. Lo cazó tools/margenes-smoke.mjs. */
  .home-filter-pop { right: 0; left: auto; max-width: calc(100vw - 24px); }
  .home-grid { grid-template-columns: 1fr; }   /* una sola columna en teléfono */
}

/* ── Gate de sesión (core/authGate.js) — chrome, EXCLUIDO del ratchet ────────── */
.auth-gate {
  min-height: 60vh; display: flex; align-items: center; justify-content: center; padding: 24px;
}
.auth-gate__card {
  max-width: 440px; width: 100%; text-align: center;
  background: #fff; border: 1px solid #ece7d8; border-radius: 18px;
  padding: 40px 32px; box-shadow: 0 12px 30px rgba(20,28,46,.10);
}
.auth-gate__icon {
  width: 64px; height: 64px; margin: 0 auto 16px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: #e7f0fe; color: #2563eb; font-size: 30px;
}
.auth-gate__title { font-size: 22px; font-weight: 800; color: #141c2e; margin: 0 0 8px; }
.auth-gate__sub { color: #6b7280; font-size: 14px; line-height: 1.5; margin: 0 0 20px; }
.auth-gate__cta { display: flex; justify-content: center; margin-bottom: 16px; }
.auth-gate__back { color: #9aa2ad; font-size: 13px; text-decoration: none; }
.auth-gate__back:hover { color: #2563eb; }

/* ── Portada pública (views/landing.js) — chrome, EXCLUIDO del ratchet ──────── */
.landing { max-width: 1200px; margin: 0 auto; padding: 8px 20px 40px; }
.landing-hero { text-align: center; padding: 32px 12px 28px; }
.landing-hero__title { font-size: clamp(28px, 5vw, 44px); font-weight: 800; color: #141c2e; margin: 0 0 10px; }
.landing-hero__sub { color: #6b7280; font-size: 16px; max-width: 640px; margin: 0 auto 22px; line-height: 1.5; }
.landing-search {
  display: flex; align-items: center; gap: 8px; max-width: 560px; margin: 0 auto 16px;
  background: #fff; border: 1px solid #e2ddce; border-radius: 14px; padding: 6px 8px 6px 14px;
  box-shadow: 0 2px 10px rgba(20,28,46,.05);
}
.landing-search i { color: #9aa2ad; }
.landing-search input { flex: 1; border: 0; outline: none; font-size: 15px; background: transparent; padding: 8px 4px; }
.landing-cta { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: center; }
.landing-cta__hint { color: #9aa2ad; font-size: 14px; }
.landing-featured { margin-top: 12px; }
.landing-featured__head { display: flex; align-items: baseline; justify-content: space-between; margin: 0 4px 14px; }
.landing-featured__head h2 { font-size: 20px; font-weight: 800; color: #141c2e; margin: 0; }
.landing-featured__all { color: #2563eb; font-size: 14px; text-decoration: none; font-weight: 600; }
.lp-card__pv { cursor: pointer; }
.lp-play { margin-top: 10px; }

/* ❤ Like + toggle Borrador/Publicada (landing + home) */
.lp-like {
  display: inline-flex; align-items: center; gap: 4px; border: 1px solid #e2ddce; background: #fff;
  color: #6b7280; border-radius: 999px; padding: 3px 10px; font-size: 13px; font-weight: 700; cursor: pointer;
}
.lp-like:hover { border-color: #ef4444; color: #ef4444; }
.lp-like.is-liked { background: #fdeaea; border-color: #ef4444; color: #ef4444; }
.pub-toggle {
  display: inline-flex; align-items: center; gap: 4px; border: 1px solid #e2ddce; background: #fff;
  color: #9aa2ad; border-radius: 999px; padding: 2px 9px; font-size: 12px; font-weight: 700; cursor: pointer;
}
.pub-toggle:hover { border-color: #c9c2ad; background: #faf8f2; }
.pub-toggle.is-pub { background: #e8f6ee; border-color: #16a34a; color: #16a34a; }

/* ── Moderación (views/moderate.js) — chrome, EXCLUIDO del ratchet ──────────── */
.mod-reports { display: flex; flex-direction: column; gap: 10px; }
.mod-report {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: #fff; border: 1px solid #ece7d8; border-radius: 12px; padding: 12px 16px;
}
.mod-report__act { font-weight: 700; color: #141c2e; font-size: 14px; }
.mod-report__reason { color: #6b7280; font-size: 14px; margin-top: 2px; }
.mod-report__meta { color: #9aa2ad; font-size: 12px; margin-top: 4px; }
.mod-report__actions { display: flex; gap: 6px; flex-wrap: wrap; flex-shrink: 0; }

/* ── Modal de login (views/loginModal.js) — chrome, EXCLUIDO del ratchet ─────── */
.login-modal { position: fixed; inset: 0; z-index: 3000; display: flex; align-items: center; justify-content: center; }
.login-modal__backdrop { position: absolute; inset: 0; background: rgba(20,28,46,.5); }
.login-modal__card {
  position: relative; width: 92%; max-width: 380px; background: #fff; border-radius: 18px;
  padding: 28px 26px; box-shadow: 0 20px 60px rgba(20,28,46,.3); text-align: center;
}
.login-modal__x { position: absolute; top: 12px; right: 14px; border: 0; background: transparent; color: #9aa2ad; font-size: 16px; cursor: pointer; }
.login-modal__title { font-size: 22px; font-weight: 800; color: #141c2e; margin: 0 0 4px; }
.login-modal__sub { color: #6b7280; font-size: 13px; margin: 0 0 18px; }
.login-modal__google {
  width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px;
  border: 1px solid #e2ddce; background: #fff; color: #1f2937; font-weight: 700;
  border-radius: 10px; padding: 10px; cursor: pointer;
}
.login-modal__google:hover { background: #faf8f2; border-color: #c9c2ad; }
.login-modal__or { display: flex; align-items: center; gap: 10px; color: #9aa2ad; font-size: 12px; margin: 16px 0; }
.login-modal__or::before, .login-modal__or::after { content: ''; flex: 1; height: 1px; background: #ece7d8; }
.login-modal__form { display: flex; flex-direction: column; gap: 10px; }
.login-modal__inp { border: 1px solid #e2ddce; border-radius: 10px; padding: 10px 12px; font-size: 14px; outline: none; }
.login-modal__inp:focus { border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37,99,235,.14); }
.login-modal__err { color: #ef4444; font-size: 13px; min-height: 18px; text-align: left; }
.login-modal__submit { background: #2563eb; color: #fff; border: 0; border-radius: 10px; padding: 10px; font-weight: 700; cursor: pointer; }
.login-modal__submit:hover { background: #1d4ed8; }
.login-modal__submit:disabled { opacity: .6; cursor: default; }
.login-modal__toggle { margin-top: 14px; background: transparent; border: 0; color: #2563eb; font-size: 13px; cursor: pointer; }
/* ALTA DE PROFE: era un enlace dentro de una línea de texto pequeño. Ahora es
   su propio bloque, con una separación que lo despega del formulario y un botón
   de contorno — visible, pero un escalón por debajo del azul de «Entrar». */
.login-modal__alta {
  margin-top: 18px; padding-top: 16px; border-top: 1px solid #ece7d8;
  display: flex; flex-direction: column; align-items: stretch; gap: 8px;
}
.login-modal__alta-q { color: #1f2937; font-size: 14px; font-weight: 700; }
.login-modal__alta-note { color: #9aa2ad; font-size: 12px; }
.login-modal__create {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  border: 2px solid #2563eb; border-radius: 10px; padding: 10px;
  color: #2563eb; background: #fff; font-weight: 700; font-size: 15px;
  text-decoration: none; cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.login-modal__create:hover, .login-modal__create:focus-visible { background: #2563eb; color: #fff; }

/* Autor en tarjetas públicas (landing/explore/perfil) */
.lp-author { color: #2563eb; font-size: 13px; font-weight: 600; text-decoration: none; }
.lp-author:hover { text-decoration: underline; }

/* ── Página del autor (#/autor/:id) — perfil público estilo Wordwall ────────── */
.author-head { margin: 4px 0 18px; }
/* Portada estilo Facebook: banda superior con imagen o degradado. El avatar se
   solapa sobre su borde inferior (author-avatar-wrap con margen negativo). */
.author-cover { height: 170px; border-radius: 16px; background: linear-gradient(120deg,#243149,#3a4a67); background-size: cover; background-position: center; position: relative; }
.author-cover.has-img { box-shadow: inset 0 -40px 60px rgba(0,0,0,.25); }
.author-cover__btn, .author-avatar__btn { border: none; cursor: pointer; font: inherit; }
.author-cover__btn { position: absolute; right: 12px; bottom: 12px; background: rgba(20,28,46,.62); color: #fff; border-radius: 8px; padding: 5px 10px; font-size: 13px; display: inline-flex; align-items: center; gap: 5px; }
.author-cover__btn:hover { background: rgba(20,28,46,.82); }
.author-id { display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-top: -36px; padding: 0 8px; }
.author-avatar-wrap { position: relative; flex: 0 0 auto; }
.author-avatar { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; border: 4px solid #fff; box-shadow: 0 2px 10px rgba(20,28,46,.18); display: block; }
.author-avatar--ph { display: flex; align-items: center; justify-content: center; background: #e7eef7; color: #8496b3; font-size: 46px; }
.author-avatar__btn { position: absolute; right: 2px; bottom: 2px; width: 30px; height: 30px; border-radius: 50%; background: #2563eb; color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 1px 4px rgba(0,0,0,.3); }
.author-avatar__btn:hover { background: #1d4ed8; }
.author-actions { flex: 0 0 auto; display: flex; gap: 8px; align-self: center; }
.author-meta { flex: 1 1 220px; min-width: 0; padding-bottom: 4px; }
.author-name { font-size: 28px; font-weight: 800; color: #141c2e; margin: 0; line-height: 1.1; }
.author-school { color: #4b5563; font-size: 14px; margin-top: 3px; }
.author-bio { color: #374151; font-size: 15px; margin: 6px 0 0; max-width: 640px; }
.author-edit { flex: 0 0 auto; }
.author-editcard { background: #fff; border: 1px solid #ece7d8; border-radius: 14px; padding: 16px; margin-top: 14px; max-width: 520px; display: flex; flex-direction: column; }
.author-editcard .login-modal__inp { width: 100%; }
@media (max-width: 640px) { .author-cover { height: 120px; } .author-avatar { width: 74px; height: 74px; } .author-name { font-size: 23px; } .author-id { margin-top: -28px; } }

/* ── Analítica por ítem/palabra (views/itemStatsView.js) ─────────────────────── */
.istats { max-width: 900px; margin: 0 auto; }
.istats__head { font-weight: 600; color: #141c2e; margin-bottom: 12px; }
.istats-item { background: #fff; border: 1px solid #ece7d8; border-radius: 12px; padding: 12px 14px; margin-bottom: 12px; }
.istats-item--empty { opacity: .6; }
.istats-item__head { font-size: 14px; color: #374151; margin-bottom: 8px; }
.istats-bar { display: flex; align-items: center; gap: 8px; margin: 4px 0; font-size: 13px; }
.istats-bar__lbl { flex: 0 0 40%; max-width: 40%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #1f2937; }
.istats-bar__track { flex: 1; height: 12px; background: #f0ecdf; border-radius: 999px; overflow: hidden; }
.istats-bar__fill { display: block; height: 100%; border-radius: 999px; }
.istats-bar__fill.is-ok { background: #16a34a; }
.istats-bar__fill.is-warn { background: #f59e0b; }
.istats-bar__fill.is-bad { background: #ef4444; }
.istats-bar__fill.is-muted { background: #9aa2ad; }
.istats-bar__pct { flex: 0 0 40px; text-align: right; color: #6b7280; font-variant-numeric: tabular-nums; }
/* heatmap sobre el texto (tildes/comas) */
.istats-heat { font-size: 20px; line-height: 2.1; margin: 6px 0 12px; color: #1f2937; }
.tc-heat { position: relative; border-radius: 4px; padding: 0 1px; font-weight: 700; }
.tc-heat--ok { background: rgba(22,163,74,.18); color: #15803d; }
.tc-heat--warn { background: rgba(245,158,11,.20); color: #b45309; }
.tc-heat--bad { background: rgba(239,68,68,.20); color: #b91c1c; }
.tc-heat__pct { font-size: .5em; font-weight: 700; vertical-align: super; margin-left: 1px; opacity: .8; }
.tc-heat__coma { color: inherit; }

/* nombres por veredicto (quién acertó/falló) — estilo concurso */
.istats-names { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-top: 10px; padding-top: 8px; border-top: 1px dashed #ece7d8; font-size: 13px; }
.istats-who { display: inline-flex; flex-wrap: wrap; gap: 4px; margin-right: 6px; }
.istats-chip { display: inline-block; padding: 1px 8px; border-radius: 999px; font-weight: 600; }
.istats-who--ok .istats-chip { background: #e8f6ee; color: #15803d; }
.istats-who--bad .istats-chip { background: #fdeaea; color: #b91c1c; }

/* ── Tabla alumno×ítem estilo concurso (views/sessionTable.js) ─────────────────── */
.st-wrap { overflow-x: auto; margin: 8px 0; -webkit-overflow-scrolling: touch; }
.st-table { border-collapse: separate; border-spacing: 0; font-size: 13px; min-width: 100%; background: #fff; border-radius: 12px; overflow: hidden; }
.st-table th, .st-table td { padding: 7px 9px; text-align: center; border-bottom: 1px solid #f0ecdf; white-space: nowrap; }
.st-table thead th { background: #faf8f2; color: #4b5563; font-weight: 700; position: sticky; top: 0; }
.st-qh small { color: #9aa2ad; font-weight: 600; }
.st-name { text-align: left !important; font-weight: 600; color: #1f2937; position: sticky; left: 0; background: #fff; z-index: 1; }
.st-table thead .st-name { background: #faf8f2; }
.st-cell { font-weight: 700; }
.st-cell--ok { color: #15803d; background: #e8f6ee; }
.st-cell--bad { color: #b91c1c; background: #fdeaea; }
.st-cell--meh { color: #b45309; background: #fef3e2; }
.st-cell--none { color: #cbd2da; }
.st-total { font-weight: 800; color: #141c2e; background: #f7f4ea; }
/* pestañas del informe post-partida (A1) */
.ll-tabs { display: inline-flex; gap: 6px; background: #efeadd; padding: 4px; border-radius: 999px; margin: 4px auto 14px; }
.ll-tab { border: 0; background: transparent; padding: 7px 16px; border-radius: 999px; font-weight: 600; color: #4b5563; cursor: pointer; font-size: 14px; }
.ll-tab.is-active { background: #fff; color: #141c2e; box-shadow: 0 1px 3px rgba(20,28,46,.12); }
.ll-medals { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 10px 0; }
.ll-medal { display: inline-flex; align-items: center; gap: 6px; background: #fff; border: 1px solid #ece7d8; border-radius: 999px; padding: 5px 12px; font-size: 13px; font-weight: 600; color: #374151; }
.ll-rank { max-width: 520px; margin: 8px auto 0; }
.ll-rank__row { display: flex; align-items: center; gap: 10px; padding: 6px 12px; border-bottom: 1px solid #f0ecdf; }
.ll-rank__pos { width: 26px; text-align: right; color: #9aa2ad; font-weight: 700; }
.ll-rank__name { flex: 1; font-weight: 600; color: #1f2937; }
.ll-rank__pts { font-weight: 800; color: #141c2e; }

.st-fix { font-size: .7em; margin-left: 1px; opacity: .8; }