/* Estilos del MVP de Trivial Trainer. Vanilla CSS, sin build. La experiencia de entrenamiento cuida más el detalle; el back-office es funcional pero más sobrio (Req 24, design.md). */ /* Variables locales de las vistas internas (aún no rediseñadas, Fase 2/3). NOTA: no se redefinen --fondo ni --texto aquí para no pisar los tokens semánticos por tema de tokens.css (el shell y el body los usan). Las vistas internas siguen usando estas variables locales de app. */ :root { --azul: #1f4e79; --azul-claro: #2f6fb0; --verde: #2e7d32; --rojo: #c62828; --gris: #6b7280; --gris-claro: #e5e7eb; --radio: 8px; } * { box-sizing: border-box; } body { margin: 0; font-family: var(--fuente-sans, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif); /* El color/fondo pasan a depender del tema (data-tema en ): tokens.css define --texto/--fondo/--fondo-degradado por tema. Las variables locales de abajo (:root { --azul... }) siguen usándose por las vistas internas que aún no se han rediseñado (Fase 2/3). */ color: var(--texto); background: var(--fondo); line-height: 1.5; } /* ========================================================================== Shell de aplicación (Fase 1): topbar + sidebar por rol, responsive. Construido sobre los tokens semánticos de tokens.css, de modo que hereda automáticamente el tema (juego oscuro / admin claro) según data-tema. ========================================================================== */ .shell { min-height: 100vh; background: var(--fondo-degradado, var(--fondo)); color: var(--texto); } .shell[hidden] { display: none; } /* --- Sidebar (desktop: fija a la izquierda) --- */ .sidebar { position: fixed; top: 0; left: 0; bottom: 0; width: 260px; display: flex; flex-direction: column; gap: var(--esp-2, 0.5rem); padding: var(--esp-4, 1rem); background: var(--superficie); border-right: 1px solid var(--borde); z-index: 30; } .sidebar__marca { padding: var(--esp-2, 0.5rem) var(--esp-2, 0.5rem) var(--esp-4, 1rem); border-bottom: 1px solid var(--borde); margin-bottom: var(--esp-2, 0.5rem); } .sidebar__nav { display: flex; flex-direction: column; gap: var(--esp-1, 0.25rem); flex: 1; overflow-y: auto; } .sidebar__enlace { display: flex; align-items: center; text-align: left; width: 100%; min-height: 44px; /* área táctil */ padding: var(--esp-3, 0.75rem) var(--esp-4, 1rem); border: 1px solid transparent; border-radius: var(--radio-md, 12px); background: transparent; color: var(--texto); font: inherit; font-weight: var(--peso-medio, 500); cursor: pointer; transition: background var(--trans-rapida, 120ms ease), color var(--trans-rapida, 120ms ease); } .sidebar__enlace:hover { background: var(--superficie-alt); } /* Estado ACTIVO / SELECCIONADO: el enlace de la sección que se está mostrando. Tratamiento ÚNICO y sin borde: relleno sutil con --acento-suave + texto de acento. NO se pinta borde de acento a propósito, para que el estado activo NUNCA se sume al anillo de :focus-visible y produzca un doble contorno. El borde transparente base se mantiene (evita saltos de layout). Es un ESTADO PERSISTENTE (refleja la vista actual), distinto del foco. Marcado también con aria-current="page" desde app.js (accesibilidad). */ .sidebar__enlace--activo, .sidebar__enlace[aria-current='page'] { background: var(--acento-suave); color: var(--acento); font-weight: var(--peso-semi, 600); } .sidebar__enlace--activo:hover, .sidebar__enlace[aria-current='page']:hover { background: var(--acento-suave); } /* FOCO por teclado: anillo outline, claramente distinto del relleno del estado activo. Se usa :focus-visible (no :focus), de modo que el clic de ratón NO deja un anillo "pegado" que parezca selección; el anillo solo aparece en navegación por teclado. outline-offset NEGATIVO: el anillo se dibuja DENTRO del contorno del enlace, en lugar de sobresalir 2px por arriba y por abajo. Con offset positivo, sobre el estado activo (fondo suave + texto acento) las porciones superior/inferior del anillo se percibían como "prolongaciones/líneas" azules sueltas. Al contenerlo dentro, el foco por teclado sigue siendo claramente visible y distinguible del estado activo, sin artefactos superpuestos. */ .sidebar__enlace:focus-visible { outline: var(--foco-grosor, 3px) solid var(--foco-color); outline-offset: -2px; } .sidebar__enlace--salir { margin-top: var(--esp-2, 0.5rem); color: var(--texto-secundario); } .sidebar__pie { border-top: 1px solid var(--borde); padding-top: var(--esp-3, 0.75rem); margin-top: var(--esp-2, 0.5rem); } .sidebar__usuario { font-size: var(--texto-sm, 0.875rem); color: var(--texto-atenuado); word-break: break-word; } /* --- Zona principal (a la derecha de la sidebar en desktop) --- */ .shell__principal { margin-left: 260px; min-height: 100vh; display: flex; flex-direction: column; } /* --- Topbar: solo relevante en móvil (hamburguesa). En desktop se oculta. --- */ .topbar { display: none; align-items: center; gap: var(--esp-3, 0.75rem); padding: var(--esp-3, 0.75rem) var(--esp-4, 1rem); background: var(--superficie); border-bottom: 1px solid var(--borde); position: sticky; top: 0; z-index: 20; } .topbar__hamburguesa { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--borde-fuerte); border-radius: var(--radio-sm, 8px); background: transparent; color: var(--texto); cursor: pointer; flex: none; } .topbar__hamburguesa:focus-visible { outline: var(--foco-grosor, 3px) solid var(--foco-color); outline-offset: 2px; } /* Icono hamburguesa dibujado con currentColor (tres líneas). */ .topbar__hamburguesa-icono, .topbar__hamburguesa-icono::before, .topbar__hamburguesa-icono::after { display: block; width: 20px; height: 2px; background: currentColor; border-radius: 2px; } .topbar__hamburguesa-icono { position: relative; } .topbar__hamburguesa-icono::before, .topbar__hamburguesa-icono::after { content: ""; position: absolute; left: 0; } .topbar__hamburguesa-icono::before { top: -6px; } .topbar__hamburguesa-icono::after { top: 6px; } /* --- Overlay para cerrar la sidebar en móvil --- */ .shell__overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.5); z-index: 25; } .shell__overlay[hidden] { display: none; } /* --- Login (raíz propia, fuera del shell) --- */ .login-root { min-height: 100vh; background: var(--fondo-degradado, var(--fondo)); color: var(--texto); } .login-root[hidden] { display: none; } .login-marca { display: flex; justify-content: center; margin-bottom: var(--esp-5, 1.5rem); } /* Contraste del wordmark en el LOGIN. El login usa el tema JUEGO (oscuro), por lo que --texto es casi blanco (#f2f6ff). Pero el lockup se monta dentro de la .tarjeta del formulario, que tiene fondo BLANCO (#fff): el wordmark quedaba texto casi-blanco sobre blanco y desaparecía. Acotamos SOLO el login para pintar el wordmark con una tinta oscura (contraste AA holgado sobre blanco), sin tocar el componente genérico .tt-marca (que en sidebar/topbar va sobre --superficie y se ve bien). El símbolo/logo aprobado no se toca. */ .login-marca .tt-marca__wordmark { color: #17233a; } /* ========================================================================== Responsive: en móvil la sidebar se oculta tras la hamburguesa (off-canvas). Sin scroll horizontal. ========================================================================== */ @media (max-width: 900px) { .topbar { display: flex; } .shell__principal { margin-left: 0; } .sidebar { transform: translateX(-100%); transition: transform var(--trans-media, 200ms ease); box-shadow: var(--sombra-lg); width: min(280px, 82vw); } .sidebar--abierta { transform: translateX(0); } } .cabecera { display: flex; align-items: center; gap: 1rem; padding: 0.75rem 1.25rem; background: var(--azul); color: #fff; flex-wrap: wrap; } .marca { font-weight: 700; font-size: 1.15rem; } .nav { display: flex; gap: 0.4rem; align-items: center; flex-wrap: wrap; margin-left: auto; } .nav-usuario { font-size: 0.85rem; opacity: 0.9; margin: 0 0.5rem; } .nav-btn { background: rgba(255, 255, 255, 0.14); color: #fff; border: 0; padding: 0.4rem 0.7rem; border-radius: var(--radio); cursor: pointer; font-size: 0.9rem; } .nav-btn:hover { background: rgba(255, 255, 255, 0.28); } .nav-btn--secundario { background: rgba(0, 0, 0, 0.2); } .contenido { max-width: 900px; margin: 1.5rem auto; padding: 0 1rem 3rem; color: var(--texto); } /* Ajuste MÍNIMO de legibilidad (no rediseño): los titulares y texto que quedan DIRECTAMENTE sobre el fondo del tema (fuera de una .tarjeta blanca) deben usar el color de texto del tema; dentro de .tarjeta conservan su color azul. El contenido y maquetación de las vistas no se tocan (Fase 2/3). */ .contenido > div > h1, .contenido > div > h2, .contenido > div > h3, .contenido > h1, .contenido > h2, .contenido > h3 { color: var(--texto); } .contenido > div > .silencio, .contenido > .silencio { color: var(--texto-secundario); } h1, h2, h3 { color: var(--azul); } .tarjeta { background: #fff; border: 1px solid var(--gris-claro); border-radius: var(--radio); padding: 1.25rem; margin-bottom: 1rem; } .rejilla-modos { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 1rem; } .modo { text-align: left; cursor: pointer; border: 1px solid var(--gris-claro); background: #fff; border-radius: var(--radio); padding: 1.1rem; transition: border-color 0.15s, transform 0.05s; } .modo:hover { border-color: var(--azul-claro); } .modo:active { transform: scale(0.99); } .modo h3 { margin: 0 0 0.35rem; } .modo p { margin: 0; color: var(--gris); font-size: 0.9rem; } button.primario { background: var(--azul-claro); color: #fff; border: 0; padding: 0.6rem 1.1rem; border-radius: var(--radio); cursor: pointer; font-size: 1rem; } button.primario:hover { background: var(--azul); } button.secundario { background: #fff; color: var(--azul); border: 1px solid var(--azul-claro); padding: 0.55rem 1rem; border-radius: var(--radio); cursor: pointer; } button:disabled { opacity: 0.5; cursor: not-allowed; } input, select, textarea { font: inherit; padding: 0.5rem 0.6rem; border: 1px solid var(--gris-claro); border-radius: var(--radio); width: 100%; background: #fff; } label { display: block; font-size: 0.85rem; color: var(--gris); margin: 0.6rem 0 0.2rem; } .fila { display: flex; gap: 0.6rem; flex-wrap: wrap; align-items: flex-end; } .fila > * { flex: 1; min-width: 140px; } /* --- Entrenamiento --- */ .enunciado { font-size: 1.3rem; font-weight: 600; margin-bottom: 1rem; } .imagen-enunciado { max-width: 100%; max-height: 280px; display: block; margin: 0.5rem 0 1rem; border-radius: var(--radio); border: 1px solid var(--gris-claro); } .imagen-no-disponible { display: flex; align-items: center; justify-content: center; height: 160px; background: var(--gris-claro); color: var(--gris); border-radius: var(--radio); margin: 0.5rem 0 1rem; font-style: italic; } .opciones { display: grid; gap: 0.6rem; } .opcion { text-align: left; padding: 0.75rem 1rem; border: 1px solid var(--gris-claro); border-radius: var(--radio); background: #fff; cursor: pointer; font-size: 1rem; } .opcion:hover { border-color: var(--azul-claro); } .opcion img { max-height: 120px; display: block; } .opcion.correcta { border-color: var(--verde); background: #e8f5e9; } .opcion.incorrecta { border-color: var(--rojo); background: #fdecea; } .feedback { margin-top: 1rem; padding: 0.9rem 1rem; border-radius: var(--radio); } .feedback.ok { background: #e8f5e9; border: 1px solid var(--verde); } .feedback.mal { background: #fdecea; border: 1px solid var(--rojo); } .feedback .respuesta-correcta { font-weight: 600; } .barra-progreso { background: var(--gris-claro); border-radius: 999px; height: 14px; overflow: hidden; margin: 0.2rem 0; } .barra-progreso > span { display: block; height: 100%; background: var(--azul-claro); } .metrica { margin-bottom: 0.6rem; } .metrica .etiqueta { display: flex; justify-content: space-between; font-size: 0.85rem; } .detalle-familia { border-top: 1px solid var(--gris-claro); padding-top: 0.6rem; margin-top: 0.6rem; } table { width: 100%; border-collapse: collapse; font-size: 0.9rem; } th, td { text-align: left; padding: 0.45rem 0.5rem; border-bottom: 1px solid var(--gris-claro); } th { color: var(--gris); font-weight: 600; } .aviso { position: fixed; bottom: 1rem; left: 50%; transform: translateX(-50%); /* Fondo fijo oscuro (independiente del tema) para que el toast sea legible tanto en juego como en admin; --rojo/--verde lo sobrescriben por estado. */ background: #1f2933; color: #fff; padding: 0.7rem 1.1rem; border-radius: var(--radio); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25); max-width: 90%; z-index: 10; } .aviso.error { background: var(--rojo); } .aviso.ok { background: var(--verde); } .login-caja { max-width: 380px; margin: 4rem auto; } .error-linea { color: var(--rojo); font-size: 0.85rem; margin-top: 0.4rem; } .pestanas { display: flex; gap: 0.4rem; flex-wrap: wrap; margin-bottom: 1rem; } .pestana { border: 1px solid var(--gris-claro); background: #fff; border-radius: var(--radio); padding: 0.4rem 0.8rem; cursor: pointer; } .pestana.activa { background: var(--azul); color: #fff; border-color: var(--azul); } .silencio { color: var(--gris); font-size: 0.9rem; } .chip { display: inline-block; background: var(--gris-claro); border-radius: 999px; padding: 0.1rem 0.6rem; font-size: 0.8rem; margin: 0.1rem; } /* Marcas de disponibilidad de imágenes en previsualización y resumen (admin). */ .disp-ok { color: var(--verde); } .disp-pend { color: var(--rojo); } .chip.disp-ok { color: #fff; background: var(--verde); } .chip.disp-pend { color: #fff; background: var(--rojo); } .marcas-valor { margin-top: 0.3rem; } /* Selector de tipo (TEXTO/IMAGEN) en la previsualización de importación CSV. La regla base de `select` usa `width:100%`, que en la columna estrecha "Tipo" encogía el control hasta dejar sin espacio el texto de la opción seleccionada: cerrado solo se veía el chevron (el texto solo aparecía al desplegar). Se le da ancho segun contenido con un minimo suficiente para mostrar "Imagen" + chevron, y no estirarse. */ .tipo-select { width: auto; min-width: 6.5rem; } /* Barra de paginación de listados de administración (imágenes, historial). */ .paginacion { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-top: 1rem; } .paginacion__info { color: var(--gris, #6b7890); font-size: 0.9rem; min-width: 8rem; text-align: center; } .paginacion button[disabled] { opacity: 0.5; cursor: default; } /* Gestión de imágenes (admin, tema claro). Los SVG y demás formatos se presentan SIEMPRE vía (Req 11.6). */ .galeria-imagenes { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 0.4rem; } .imagen-item { margin: 0; width: 140px; display: flex; flex-direction: column; gap: 0.3rem; border: 1px solid var(--gris-claro); border-radius: 8px; padding: 0.5rem; background: #fff; } .imagen-item img { width: 100%; height: 96px; object-fit: contain; background: var(--gris-claro); border-radius: 6px; } .imagen-item figcaption { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; } .imagen-nombre { font-size: 0.8rem; font-weight: 600; word-break: break-all; } .lista-pendientes { list-style: none; padding: 0; margin: 0.4rem 0 0; display: flex; flex-direction: column; gap: 0.35rem; } .aviso-colision { color: var(--rojo); font-weight: 600; } /* ========================================================================== FASE 2 — Experiencia de JUGADOR (tema oscuro). -------------------------------------------------------------------------- Rediseño de presentación de las vistas de juego (menú de modos, selección de tema, pregunta, feedback y resumen) aplicando el sistema visual aprobado (tokens.css + componentes .tt-* de components.css). ACOTAMIENTO CRÍTICO: TODAS las reglas de esta sección van prefijadas por [data-tema="juego"]. Las mismas clases base (.tarjeta, .modo, .opcion, .feedback, .enunciado, .barra-progreso, .chip, inputs, botones…) se siguen usando en las vistas de ADMIN (tema claro, data-tema="admin"), que NO se tocan en esta fase. Al prefijar por [data-tema="juego"] estas reglas SOLO aplican cuando el jugador está en el tema oscuro; en admin siguen vigentes las reglas base de más arriba en este fichero. Así admin no se rompe. No se cambia ninguna lógica: los handlers (onclick/onsubmit), las llamadas api(...), el flujo responder→feedback→continuar y salir→resumen son idénticos a la implementación previa; aquí solo cambian estructura DOM/clases/estilos. ========================================================================== */ /* --- Contenido: titulares y texto sobre el fondo oscuro --- */ [data-tema="juego"] .contenido { max-width: 820px; } [data-tema="juego"] .contenido h1, [data-tema="juego"] .contenido h2, [data-tema="juego"] .contenido h3 { color: var(--texto); } [data-tema="juego"] .contenido .silencio { color: var(--texto-secundario); } /* --- Tarjetas de las vistas de juego: superficie oscura (era blanco) --- */ [data-tema="juego"] .tarjeta { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio-lg); padding: var(--esp-5); box-shadow: var(--sombra-md); } /* --- Botones del sistema en tema oscuro --- */ [data-tema="juego"] button.primario { background: var(--acento); color: var(--texto-sobre-acento-principal); border: 1px solid transparent; border-radius: var(--radio-md); padding: var(--esp-3) var(--esp-5); font-weight: var(--peso-semi); } [data-tema="juego"] button.primario:hover { background: var(--acento-hover); } [data-tema="juego"] button.primario:active { background: var(--acento-activo); } [data-tema="juego"] button.secundario { background: transparent; color: var(--texto); border: 1px solid var(--borde-fuerte); border-radius: var(--radio-md); padding: var(--esp-3) var(--esp-5); } [data-tema="juego"] button.secundario:hover { background: var(--superficie-alt); } [data-tema="juego"] button:focus-visible { outline: var(--foco-grosor) solid var(--foco-color); outline-offset: 2px; } /* -------------------------------------------------------------------------- Formulario de "Selección de tema" (modo SELECCION_TEMA). -------------------------------------------------------------------------- - Ancho contenido y centrado: en desktop la tarjeta ya no se estira a lo ancho del contenido (evita el espacio desaprovechado); en móvil ocupa el ancho disponible. - Aire entre los campos y, sobre todo, entre la fila de acciones y el último campo; y separación cómoda entre "Empezar" y "Cancelar". -------------------------------------------------------------------------- */ .form-ambito { max-width: 30rem; margin-left: auto; margin-right: auto; padding: var(--esp-5, 1.5rem); } .form-ambito h2 { margin-top: 0; } /* Los selectores condicionados: un poco de separación vertical entre grupos (label + select). El label ya trae su propio margen superior. */ .form-ambito select { margin-bottom: 0.35rem; } /* Fila de acciones reutilizable: bastante aire por encima (separa del contenido anterior) y una separación clara entre los botones. La usa el selector de tema (.form-ambito__acciones) y el resumen de sesión (.acciones-fila). */ .form-ambito__acciones, .acciones-fila { display: flex; gap: 0.9rem; margin-top: 1.75rem; flex-wrap: wrap; } .form-ambito__acciones button, .acciones-fila button { flex: 0 0 auto; } /* Móvil: los botones se apilan a ancho completo, conservando el aire entre ellos y con el contenido anterior. */ @media (max-width: 560px) { .form-ambito { max-width: none; } .form-ambito__acciones, .acciones-fila { flex-direction: column; align-items: stretch; } .form-ambito__acciones button, .acciones-fila button { width: 100%; } } /* -------------------------------------------------------------------------- Vista de Preferencias (jugador): formulario de exclusión + lista de exclusiones actuales. El formulario reutiliza .form-ambito (desplegables en cascada) por lo que hereda su maquetación; aquí solo se estilan la lista de exclusiones y sus filas (ruta jerárquica + control de borrado por fila). -------------------------------------------------------------------------- */ .pref-form { margin-bottom: var(--esp-5, 1.5rem); } .pref-lista__caja h2 { margin-top: 0; } .pref-lista__items { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; } .pref-item { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.65rem 0.85rem; border: 1px solid var(--borde, var(--gris-claro)); border-radius: var(--radio, 0.5rem); } .pref-item__ruta { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 0.1rem; overflow-wrap: anywhere; } .pref-item__seg { font-weight: var(--peso-medio, 500); } .pref-item__flecha { color: var(--texto-atenuado, var(--gris)); } .pref-item__borrar { flex: 0 0 auto; } @media (max-width: 560px) { .pref-item { flex-direction: column; align-items: stretch; } .pref-item__borrar { width: 100%; } } /* Celda de acciones de la tabla de usuarios (back-office): "Deshabilitar/ Habilitar" + "Ver detalles". Se disponen en fila y saltan de línea en anchos estrechos sin desbordar la celda. */ .acciones-usuario { display: flex; flex-wrap: wrap; gap: 0.5rem; } /* Salir del entrenamiento: control secundario con MENOR peso visual (fantasma). */ [data-tema="juego"] .juego-salir button { background: transparent; color: var(--texto-atenuado); border: 1px solid transparent; font-weight: var(--peso-normal); } [data-tema="juego"] .juego-salir button:hover { background: var(--superficie-alt); color: var(--texto-secundario); } /* --- Inputs / selects / textarea en tema oscuro --- */ [data-tema="juego"] input, [data-tema="juego"] select, [data-tema="juego"] textarea { background: var(--input-fondo); color: var(--input-texto); border: 1px solid var(--input-borde); border-radius: var(--radio-sm); padding: var(--esp-3) var(--esp-4); } [data-tema="juego"] input::placeholder, [data-tema="juego"] textarea::placeholder { color: var(--input-placeholder); } [data-tema="juego"] input:focus-visible, [data-tema="juego"] select:focus-visible, [data-tema="juego"] textarea:focus-visible { outline: none; border-color: var(--acento); box-shadow: 0 0 0 var(--foco-grosor) var(--acento-suave); } [data-tema="juego"] label { color: var(--texto-secundario); font-size: var(--texto-sm); font-weight: var(--peso-medio); } /* -------------------------------------------------------------------------- 1) MENÚ DE MODOS — selector de modo (rejilla 2×2) -------------------------------------------------------------------------- Cuatro tarjetas COMPACTAS y homogéneas, en rejilla 2×2 (desktop). Jerarquía simple: TÍTULO → DESCRIPCIÓN (con un icono pequeño y secundario junto al título). Se leen como opciones del MISMO selector. COLOR: las tarjetas son NEUTRAS (superficie/borde neutros). El AZUL (acento) se reserva para la INTERACCIÓN: hover, focus-visible y :active. No hay color de acento por modo (nada de cuatro tarjetas de colores). Móvil: una columna. -------------------------------------------------------------------------- */ [data-tema="juego"] .rejilla-modos { /* 2×2 en desktop: dos columnas fijas, cuatro tarjetas en dos filas. */ grid-template-columns: repeat(2, 1fr); gap: var(--esp-4); } [data-tema="juego"] .modo { display: flex; flex-direction: column; gap: var(--esp-2); padding: var(--esp-4) var(--esp-5); background: var(--superficie); /* Borde NEUTRO uniforme (sin franja lateral de color). */ border: 1px solid var(--borde); border-radius: var(--radio-lg); box-shadow: var(--sombra-md); transition: border-color var(--trans-rapida), background var(--trans-rapida), transform var(--trans-rapida); } /* Cabecera de la tarjeta: icono pequeño + título en la misma línea. */ [data-tema="juego"] .modo__cabecera { display: flex; align-items: center; gap: var(--esp-3); } /* Icono pequeño y secundario (color atenuado neutro, no acento por modo). */ [data-tema="juego"] .modo__icono { display: inline-flex; align-items: center; justify-content: center; flex: none; color: var(--texto-secundario); } [data-tema="juego"] .modo__icono svg { display: block; width: 18px; height: 18px; } /* INTERACCIÓN: el acento (azul) aparece solo en hover / :active. */ [data-tema="juego"] .modo:hover { background: var(--superficie-alt); border-color: var(--acento); } [data-tema="juego"] .modo:hover .modo__icono { color: var(--acento); } [data-tema="juego"] .modo:active { transform: scale(0.995); } /* Foco por teclado: anillo visible solo con :focus-visible. */ [data-tema="juego"] .modo:focus-visible { outline: var(--foco-grosor) solid var(--foco-color); outline-offset: 2px; } [data-tema="juego"] .modo h3 { margin: 0; color: var(--texto); font-size: var(--texto-lg); font-weight: var(--peso-semi); } [data-tema="juego"] .modo p { margin: 0; color: var(--texto-secundario); font-size: var(--texto-sm); } /* Móvil: una sola columna, tarjetas cómodas y con buena área táctil. */ @media (max-width: 560px) { [data-tema="juego"] .rejilla-modos { grid-template-columns: 1fr; } } /* -------------------------------------------------------------------------- 2) PANTALLA DE PREGUNTA — la pregunta es el elemento DOMINANTE -------------------------------------------------------------------------- No debe parecer un formulario: mucho aire, enunciado a tamaño display, contexto (si existe) encima, opciones debajo y "Salir" como control secundario de bajo peso. -------------------------------------------------------------------------- */ [data-tema="juego"] .juego-pregunta { --familia-actual: var(--acento); /* acento neutro si no hay familia */ background: transparent; border: 0; box-shadow: none; max-width: 680px; margin: 0 auto; /* Equilibrio vertical: la pregunta es el CENTRO de la experiencia, no un formulario pegado arriba. En viewports altos el bloque se centra verticalmente en el espacio disponible; nunca fuerza scroll ni corta contenido (min-height + centrado, con padding de respiro arriba/abajo). */ display: flex; flex-direction: column; justify-content: center; min-height: min(72vh, 620px); padding: var(--esp-6) 0; } /* Reusa el componente del sistema para el enunciado dominante. Separaciones contenidas (no huecos excesivos) para que el bloque respire equilibrado. */ [data-tema="juego"] .juego-pregunta .tt-pregunta { margin: var(--esp-3) 0 var(--esp-5); } /* Imagen del enunciado, destacada y centrada. */ [data-tema="juego"] .juego-pregunta .imagen-enunciado { max-height: 320px; margin: 0 auto var(--esp-5); border: 1px solid var(--borde); border-radius: var(--radio-lg); background: var(--superficie); } [data-tema="juego"] .juego-pregunta .imagen-no-disponible { background: var(--superficie-alt); color: var(--texto-atenuado); border: 1px dashed var(--borde-fuerte); border-radius: var(--radio-lg); margin: 0 auto var(--esp-5); } /* --- Respuesta LIBRE: input + "Responder" como dos elementos RELACIONADOS --- El campo y su botón se leen como "campo de respuesta con su acción", pero NO fundidos: hay un espacio visual claro entre ambos (gap), con radios y bordes normales en cada uno. En desktop van en la misma fila; en móvil se apilan manteniendo la misma separación coherente. Alturas equilibradas y área táctil ≥ 44px. */ [data-tema="juego"] .juego-libre { margin: 0; } [data-tema="juego"] .juego-libre__grupo { display: flex; align-items: stretch; /* Espacio visual claro entre el campo y el botón (ni pegados ni enorme). */ gap: var(--esp-3); } [data-tema="juego"] .juego-libre__campo { flex: 1 1 auto; min-width: 0; /* Alto de acción cómodo (área táctil ≥ 44px con este padding). */ padding: var(--esp-3) var(--esp-4); font-size: var(--texto-lg); /* Radios/bordes normales (ya no van "fundidos" con el botón). */ border-radius: var(--radio-sm); } [data-tema="juego"] .juego-libre__enviar { flex: 0 0 auto; /* Mismo alto vertical que el input (área táctil usable en móvil). */ padding: var(--esp-3) var(--esp-5); /* Radio propio del botón del sistema (el genérico .primario ya lo define). */ } /* En móvil el grupo se apila, manteniendo la MISMA separación clara entre el campo y el botón (el botón ocupa el ancho completo debajo del campo). */ @media (max-width: 600px) { [data-tema="juego"] .juego-libre__grupo { flex-direction: column; } [data-tema="juego"] .juego-libre__enviar { width: 100%; } } /* Opciones multiple choice en TEXTO: tarjetas verticales grandes (.tt-opcion). */ [data-tema="juego"] .juego-opciones { display: flex; flex-direction: column; gap: var(--esp-3); } /* Opciones de IMAGEN: grid de 2 columnas; la imagen es lo principal. */ [data-tema="juego"] .juego-opciones--imagen { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--esp-4); } [data-tema="juego"] .juego-opciones--imagen .tt-opcion { flex-direction: column; align-items: stretch; padding: var(--esp-3); } [data-tema="juego"] .juego-opciones--imagen .tt-opcion img { width: 100%; max-height: 200px; object-fit: contain; border-radius: var(--radio-sm); display: block; } [data-tema="juego"] .juego-opciones--imagen .imagen-no-disponible { margin: 0; height: 140px; } /* El marcador de estado se posiciona arriba a la derecha en tarjetas de imagen. */ [data-tema="juego"] .juego-opciones--imagen .tt-opcion__marca { align-self: flex-end; } /* Controles secundarios (Salir): separados y con poco peso. */ [data-tema="juego"] .juego-controles { margin-top: var(--esp-5); display: flex; justify-content: center; } /* -------------------------------------------------------------------------- 3) RESULTADO — pantalla intermedia / overlay tras responder -------------------------------------------------------------------------- El resultado NO se inserta bajo la pregunta (eso la alargaba): aparece como una pantalla intermedia (overlay modal) centrada por encima, claramente SEPARADA de la pregunta. Reconocible de inmediato (icono ✓/✕ + texto + color de estado) sin resultar agresivo: superficies suaves de estado del tema, nunca rojo saturado a pantalla completa. No depende solo del color. El overlay se monta en , así que NO va prefijado por [data-tema]; como el jugador está siempre en tema oscuro, el resultado hereda ese tema. */ .juego-resultado { position: fixed; /* El overlay pertenece a la ZONA DE JUEGO/CONTENIDO, no a toda la app: en desktop se centra en el área a la derecha de la sidebar (coherente con .shell__principal { margin-left: 260px }). Usamos una custom property con el mismo ancho de sidebar (260px) y el mismo breakpoint (900px) que el shell; en móvil la sidebar es off-canvas y left:0 (igual que el shell). */ --ancho-sidebar: 260px; top: 0; right: 0; bottom: 0; left: var(--ancho-sidebar); z-index: 40; display: flex; align-items: center; justify-content: center; padding: var(--esp-5); /* Velo más opaco: oscurece bien la pregunta (apenas se intuye el contexto) sin llegar a negro pleno; color coherente con el fondo oscuro del juego. */ background: rgba(9, 14, 24, 0.88); } @media (max-width: 900px) { .juego-resultado { /* Móvil: la sidebar es off-canvas, el contenido ocupa todo el ancho. */ left: 0; } } .juego-resultado__panel { width: min(480px, 100%); background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio-lg); box-shadow: var(--sombra-lg); padding: var(--esp-6); /* Franja de estado suave en el borde superior (refuerza sin saturar). */ border-top: 4px solid var(--borde-fuerte); } .juego-resultado__panel:focus-visible { outline: var(--foco-grosor) solid var(--foco-color); outline-offset: 2px; } .juego-resultado--ok { border-top-color: var(--exito); background: var(--exito-suave); } .juego-resultado--mal { border-top-color: var(--error); background: var(--error-suave); } .juego-resultado__titular { display: flex; align-items: center; gap: var(--esp-3); font-size: var(--texto-2xl); font-weight: var(--peso-bold); } .juego-resultado--ok .juego-resultado__titular { color: var(--exito); } .juego-resultado--mal .juego-resultado__titular { color: var(--error); } .juego-resultado__icono { display: inline-flex; align-items: center; justify-content: center; width: 1.5em; height: 1.5em; border-radius: var(--radio-full); font-size: 0.9em; color: var(--texto-sobre-acento); } .juego-resultado--ok .juego-resultado__icono { background: var(--exito); } .juego-resultado--mal .juego-resultado__icono { background: var(--error); } .juego-resultado__respuesta { margin-top: var(--esp-4); color: var(--texto); font-size: var(--texto-lg); } .juego-resultado__respuesta strong { color: var(--texto); } .juego-resultado__respuesta .imagen-enunciado { max-height: 200px; margin-top: var(--esp-3); border: 1px solid var(--borde); border-radius: var(--radio-md); background: var(--superficie); } .juego-resultado__acciones { margin-top: var(--esp-6); display: flex; align-items: stretch; justify-content: flex-end; /* Separación clara entre "Reportar pregunta" y "Continuar" (antes iban pegados y el botón de reportar salía apelotonado en dos líneas). */ gap: var(--esp-4); flex-wrap: wrap; } .juego-resultado__continuar { min-width: 9rem; } /* El control de reportar dentro del resultado: que no parta el texto en dos líneas y quede alineado con "Continuar". */ .juego-resultado__acciones .reporte-boton { white-space: nowrap; } @media (max-width: 600px) { .juego-resultado__acciones { flex-direction: column-reverse; justify-content: stretch; } .juego-resultado__continuar { width: 100%; } .juego-resultado__acciones .reporte-boton { width: 100%; justify-content: center; } } /* -------------------------------------------------------------------------- 4) RESUMEN DE SESIÓN -------------------------------------------------------------------------- Indicadores (Aciertos, Fallos, % acierto) + desglose por familia con barras que usan el color de familia (.tt-progreso). Estado "Sin datos" cuando no hay base para el porcentaje. -------------------------------------------------------------------------- */ [data-tema="juego"] .resumen-indicadores { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--esp-4); margin: var(--esp-4) 0 var(--esp-5); } [data-tema="juego"] .resumen-indicador { background: var(--superficie-alt); border: 1px solid var(--borde); border-radius: var(--radio-md); padding: var(--esp-4); text-align: center; } [data-tema="juego"] .resumen-indicador__valor { font-family: var(--fuente-display); font-size: var(--texto-3xl); font-weight: var(--peso-bold); color: var(--texto); line-height: var(--lh-ajustado); } [data-tema="juego"] .resumen-indicador--ok .resumen-indicador__valor { color: var(--exito); } [data-tema="juego"] .resumen-indicador--mal .resumen-indicador__valor { color: var(--error); } [data-tema="juego"] .resumen-indicador__etiqueta { font-size: var(--texto-sm); color: var(--texto-secundario); margin-top: var(--esp-1); } [data-tema="juego"] .resumen-desglose { display: flex; flex-direction: column; gap: var(--esp-5); margin-top: var(--esp-4); } [data-tema="juego"] .resumen-chips { display: flex; flex-wrap: wrap; gap: var(--esp-2); margin-top: var(--esp-2); } /* Chips del resumen sobre tema oscuro. */ [data-tema="juego"] .chip { background: var(--superficie-alt); border: 1px solid var(--borde); color: var(--texto); } /* -------------------------------------------------------------------------- 4/5) MIS ESTADÍSTICAS — bloques de métricas y jerarquía tema/subtema -------------------------------------------------------------------------- El rendimiento se muestra como una fila etiqueta+valor con space-between (garantiza SIEMPRE separación visual entre "… — rendimiento" y "95 %"); la cobertura como barra .tt-progreso (ancho = % real). Temas y subtemas usan la MISMA convención (etiqueta + barra), diferenciados solo por indentación y tamaño. Prefijado por [data-tema="juego"] porque el jugador ve estas vistas en tema oscuro; admin no usa estas clases. */ [data-tema="juego"] .metrica-bloque { display: flex; flex-direction: column; gap: var(--esp-2); margin-top: var(--esp-2); } /* Fila de rendimiento: etiqueta a la izquierda, valor a la derecha (separación asegurada por justify-content aunque el layout base cambie). */ [data-tema="juego"] .metrica-rendimiento { display: flex; align-items: baseline; justify-content: space-between; gap: var(--esp-4); color: var(--texto); font-size: var(--texto-base); } [data-tema="juego"] .metrica-rendimiento__valor { font-variant-numeric: tabular-nums; color: var(--texto-secundario); white-space: nowrap; } /* Detalle de familia: borde superior sutil coherente con el tema oscuro. */ [data-tema="juego"] .detalle-familia { border-top: 1px solid var(--borde); padding-top: var(--esp-3); margin-top: var(--esp-3); display: flex; flex-direction: column; gap: var(--esp-3); } /* Jerarquía tema/subtema por INDENTACIÓN + tamaño (misma convención visual). */ [data-tema="juego"] .detalle-nivel--tema { font-size: var(--texto-base); } [data-tema="juego"] .detalle-nivel--subtema { font-size: var(--texto-sm); opacity: 0.92; } /* La jerarquía del subtema se marca SOLO en la etiqueta de texto (columna del grid .tt-progreso), NO en el contenedor. Así la barra (.tt-progreso__pista, que ocupa grid-column: 1 / -1) queda alineada a la izquierda con las barras de tema y familia, y sus longitudes son comparables de un vistazo. */ [data-tema="juego"] .detalle-nivel--subtema .tt-progreso__etiqueta { padding-left: var(--esp-5); } /* -------------------------------------------------------------------------- Responsive de la experiencia de juego (móvil). -------------------------------------------------------------------------- */ @media (max-width: 600px) { /* Grid de imágenes: 2 columnas por defecto; 1 solo cuando el viewport lo exija (imágenes dejarían de ser usables). */ [data-tema="juego"] .juego-opciones--imagen { grid-template-columns: repeat(2, 1fr); gap: var(--esp-3); } [data-tema="juego"] .resumen-indicadores { grid-template-columns: 1fr; } /* La pregunta baja de tamaño display para no desbordar en móvil. */ [data-tema="juego"] .juego-pregunta .tt-pregunta { font-size: var(--texto-2xl); } } @media (max-width: 380px) { [data-tema="juego"] .juego-opciones--imagen { grid-template-columns: 1fr; } } /* ========================================================================== REPORTAR PREGUNTA — control secundario + modal ligero de reporte ========================================================================== Feature `reportar-pregunta` (tarea 7.2). Estiliza los controles que monta `public/app.js` (tarea 7.1): el botón "Reportar pregunta" y el modal de comentario opcional. Todo con tokens del sistema (sin colores ad hoc). El botón de reportar aparece SOLO dentro del tema oscuro de juego (barra .juego-controles de la pregunta y .juego-resultado__acciones del overlay), así que su tratamiento se prefija con [data-tema="juego"]. El modal, en cambio, se monta en (igual que .juego-resultado) y NO se prefija: el jugador está siempre en tema oscuro, así que hereda ese tema. -------------------------------------------------------------------------- */ /* Control secundario de BAJO peso visual: no compite con "Continuar"/"Salir". Reutiliza el tratamiento de button.secundario del tema oscuro (transparente, borde neutro) y coloca el icono de bandera inline con el texto. Sin acento ni color de familia. */ [data-tema="juego"] .reporte-boton { display: inline-flex; align-items: center; gap: var(--esp-2); color: var(--texto-secundario); font-weight: var(--peso-normal); } [data-tema="juego"] .reporte-boton:hover { color: var(--texto); } /* Icono de bandera (SVG inline con stroke=currentColor); aria-hidden lo pone el JS. Tamaño pequeño, alineado al texto. */ [data-tema="juego"] .reporte-boton svg { display: block; width: 16px; height: 16px; flex: none; } /* -------------------------------------------------------------------------- Modal ligero de reporte -------------------------------------------------------------------------- Mismo patrón de superficie que .juego-resultado: overlay fijo a pantalla completa con velo oscuro que centra un panel de sistema. z-index por encima del overlay de resultado (que es 40) para poder abrirse sobre él. Sin prefijo de tema: hereda el tema oscuro del juego (montado en ). */ .reporte-modal { position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center; padding: var(--esp-5); background: rgba(9, 14, 24, 0.88); } /* Superficie del sistema (misma familia visual que .juego-resultado__panel). */ .reporte-modal__panel { width: min(480px, 100%); background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio-lg); box-shadow: var(--sombra-lg); padding: var(--esp-6); } .reporte-modal__panel:focus-visible { outline: var(--foco-grosor) solid var(--foco-color); outline-offset: 2px; } .reporte-modal__titulo { margin: 0; font-size: var(--texto-xl); font-weight: var(--peso-bold); color: var(--texto); } .reporte-modal__ayuda { margin: var(--esp-2) 0 var(--esp-4); color: var(--texto-secundario); font-size: var(--texto-sm); } /* Textarea: ancho completo, altura cómoda (~4-5 líneas), tipografía heredada. El aspecto (fondo/borde/foco oscuros) lo aporta la regla base [data-tema="juego"] textarea, que aplica porque el modal hereda ese tema. */ .reporte-modal__campo { width: 100%; min-height: 6rem; font: inherit; resize: vertical; } /* Contador "n / 500": pequeño, atenuado y alineado a la derecha. */ .reporte-modal__contador { margin-top: var(--esp-2); text-align: right; font-size: var(--texto-sm); color: var(--texto-atenuado); } .reporte-modal__contador--error { color: var(--error); } /* Mensaje de error (role="alert"): --error sobre --error-suave, con padding y radio suaves; el JS lo oculta cuando no aplica (hidden). */ .reporte-modal__error { margin-top: var(--esp-3); padding: var(--esp-2) var(--esp-3); border-radius: var(--radio-sm); background: var(--error-suave); color: var(--error); font-size: var(--texto-sm); } /* Fila de acciones (Cancelar/Enviar): mismo patrón que .acciones-fila (separación clara, alineadas a la derecha). En móvil se apilan cómodas. */ .reporte-modal__acciones { margin-top: var(--esp-5); display: flex; justify-content: flex-end; gap: 0.9rem; } .reporte-modal__acciones button { flex: 0 0 auto; } @media (max-width: 600px) { .reporte-modal__acciones { flex-direction: column-reverse; align-items: stretch; } .reporte-modal__acciones button { width: 100%; } } /* -------------------------------------------------------------------------- Back-office · pestaña Reportes: columna Acciones y modal de contexto -------------------------------------------------------------------------- Tema claro del back-office (sin prefijo de tema). */ /* Columna "Acciones" de la tabla de reportes: el botón "Ver" y el selector de estado apilados, alineados y con aire, sin quedar pegados ni cortarse el texto del