/* ============================================================================
   Trivial Trainer — Componentes de ejemplo (Fase 0)
   ----------------------------------------------------------------------------
   Clases de componentes construidas EXCLUSIVAMENTE sobre los tokens semánticos
   definidos en tokens.css. Al depender solo de variables semánticas, los mismos
   componentes funcionan en el tema juego (oscuro) y admin (claro) sin cambios.

   Estas clases son ilustrativas para la preview de validación. No se aplican a
   las pantallas reales de la app en la Fase 0.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Base tipográfica y de superficie
   -------------------------------------------------------------------------- */
.tt-superficie {
  background: var(--fondo);
  color: var(--texto);
  font-family: var(--fuente-sans);
  font-size: var(--texto-base);
  line-height: var(--lh-normal);
}

/* --------------------------------------------------------------------------
   Marca / Lockup (símbolo + wordmark)
   --------------------------------------------------------------------------
   Lockup reutilizable de marca para cabeceras y superficies. Combina:
     - .tt-marca__simbolo : el símbolo (logo.svg vía <img>), la rueda de familias.
     - .tt-marca__wordmark: el nombre "Trivial Trainer" con la TIPOGRAFÍA DEL
       SISTEMA (sin fuentes externas).
   El favicon usa ÚNICAMENTE el símbolo (favicon.svg); el wordmark solo aparece
   en el lockup, nunca en el favicon.

   Tamaños:
     - .tt-marca            : tamaño normal (p. ej. pantallas de marca, splash).
     - .tt-marca--sm        : tamaño cabecera (topbar / sidebar).
   Las proporciones símbolo/wordmark se controlan con la escala tipográfica y
   un tamaño de símbolo relativo, de modo que ambos escalan de forma coherente. */
.tt-marca {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-3);
  /* --tt-marca-simbolo controla el lado del símbolo; el wordmark se dimensiona
     con font-size para mantener la proporción entre ambos. */
  --tt-marca-simbolo: 48px;
  color: var(--texto);
  text-decoration: none;
}
.tt-marca__simbolo {
  width: var(--tt-marca-simbolo);
  height: var(--tt-marca-simbolo);
  flex: none;
  display: block;
}
.tt-marca__wordmark {
  font-family: var(--fuente-display);
  font-weight: var(--peso-bold);
  font-size: var(--texto-2xl);
  line-height: var(--lh-ajustado);
  letter-spacing: -0.01em;
  color: inherit;
  white-space: nowrap;
}

/* Variante compacta para cabecera (topbar / sidebar) */
.tt-marca--sm {
  gap: var(--esp-2);
  --tt-marca-simbolo: 28px;
}
.tt-marca--sm .tt-marca__wordmark {
  font-size: var(--texto-lg);
}

/* --------------------------------------------------------------------------
   Botones
   -------------------------------------------------------------------------- */
.tt-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--esp-2);
  font-family: var(--fuente-sans);
  font-size: var(--texto-base);
  font-weight: var(--peso-semi);
  line-height: 1;
  padding: var(--esp-3) var(--esp-5);
  border-radius: var(--radio-md);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background var(--trans-rapida), border-color var(--trans-rapida),
              color var(--trans-rapida), box-shadow var(--trans-rapida);
}
.tt-btn:focus-visible {
  outline: var(--foco-grosor) solid var(--foco-color);
  outline-offset: 2px;
}

.tt-btn--primario {
  background: var(--acento);
  color: var(--texto-sobre-acento-principal);
}
.tt-btn--primario:hover { background: var(--acento-hover); }
.tt-btn--primario:active { background: var(--acento-activo); }

.tt-btn--secundario {
  background: transparent;
  color: var(--texto);
  border-color: var(--borde-fuerte);
}
.tt-btn--secundario:hover { background: var(--superficie-alt); }

.tt-btn--fantasma {
  background: transparent;
  color: var(--acento);
  border-color: transparent;
}
.tt-btn--fantasma:hover { background: var(--acento-suave); }

.tt-btn:disabled,
.tt-btn[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   Inputs
   -------------------------------------------------------------------------- */
.tt-campo {
  display: flex;
  flex-direction: column;
  gap: var(--esp-2);
}
.tt-label {
  font-size: var(--texto-sm);
  font-weight: var(--peso-medio);
  color: var(--texto-secundario);
}
.tt-input {
  font-family: var(--fuente-sans);
  font-size: var(--texto-base);
  color: var(--input-texto);
  background: var(--input-fondo);
  border: 1px solid var(--input-borde);
  border-radius: var(--radio-sm);
  padding: var(--esp-3) var(--esp-4);
  transition: border-color var(--trans-rapida), box-shadow var(--trans-rapida);
}
.tt-input::placeholder { color: var(--input-placeholder); }
.tt-input:focus-visible {
  outline: none;
  border-color: var(--acento);
  box-shadow: 0 0 0 var(--foco-grosor) var(--acento-suave);
}
.tt-input:disabled { opacity: 0.5; cursor: not-allowed; }

/* --------------------------------------------------------------------------
   Cards / superficies
   -------------------------------------------------------------------------- */
.tt-card {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio-lg);
  padding: var(--esp-5);
  box-shadow: var(--sombra-md);
}
.tt-card--plano { box-shadow: none; }

/* --------------------------------------------------------------------------
   Chips / etiquetas de estado y de familia
   -------------------------------------------------------------------------- */
.tt-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-2);
  font-size: var(--texto-sm);
  font-weight: var(--peso-medio);
  padding: var(--esp-1) var(--esp-3);
  border-radius: var(--radio-full);
  border: 1px solid var(--borde);
  background: var(--superficie-alt);
  color: var(--texto);
}
/* Punto de color de familia (acompaña SIEMPRE al texto: color no va solo) */
.tt-punto {
  width: 0.75em;
  height: 0.75em;
  border-radius: var(--radio-full);
  flex: none;
}

/* --------------------------------------------------------------------------
   Estados (mensajes correcto/incorrecto/aviso/info)
   -------------------------------------------------------------------------- */
.tt-estado {
  display: flex;
  align-items: center;
  gap: var(--esp-3);
  padding: var(--esp-3) var(--esp-4);
  border-radius: var(--radio-md);
  border: 1px solid;
  font-size: var(--texto-sm);
}
.tt-estado__icono { font-weight: var(--peso-bold); }

.tt-estado--exito { background: var(--exito-suave); border-color: var(--exito-borde); color: var(--exito); }
.tt-estado--error { background: var(--error-suave); border-color: var(--error-borde); color: var(--error); }
.tt-estado--aviso { background: var(--aviso-suave); border-color: var(--aviso-borde); color: var(--aviso); }
.tt-estado--info  { background: var(--info-suave);  border-color: var(--info-borde);  color: var(--info);  }

/* --------------------------------------------------------------------------
   Barras de progreso
   --------------------------------------------------------------------------
   Regla: el ancho del relleno DEBE reflejar el porcentaje real. El estado
   "Sin datos" (0/0) NO se pinta como barra llena: se muestra pista tenue +
   etiqueta textual "Sin datos". El color no es el único indicador: siempre
   hay etiqueta y valor textual. */
.tt-progreso {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: var(--esp-2) var(--esp-4);
}
.tt-progreso__etiqueta {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-2);
  font-size: var(--texto-sm);
  color: var(--texto-secundario);
}
.tt-progreso__valor {
  font-size: var(--texto-sm);
  font-variant-numeric: tabular-nums;
  color: var(--texto-secundario);
}
.tt-progreso__pista {
  grid-column: 1 / -1;
  height: 10px;
  border-radius: var(--radio-full);
  background: var(--progreso-pista);
  overflow: hidden;
}
.tt-progreso__relleno {
  height: 100%;
  /* DEFENSIVO: ancho 0 por defecto. El ancho REAL llega inline desde
     `progresoFamilia` (style="width:<pct>%"). Si por cualquier motivo el width
     inline no llegara, la barra queda VACÍA (0%) en lugar de llenarse al 100%
     por ser un bloque. No cambia el comportamiento correcto actual: solo
     elimina el modo de fallo "lleno por defecto". Theme-agnóstico (lo usan
     tanto juego como admin). */
  width: 0;
  border-radius: var(--radio-full);
  /* El color de familia se pasa por --relleno-color en línea; por defecto acento.
     ROBUSTEZ: respaldo literal final (#4c8dff, azul de acento de juego) para que
     la cadena de var() NUNCA colapse a transparente aunque una variable
     intermedia no resuelva. El relleno sin familia representa el acento general. */
  background: var(--relleno-color, var(--progreso-relleno, #4c8dff));
  /* Sin transición de width: las barras son indicadores estadísticos estáticos.
     La `transition: width` provocaba que el relleno no se pintara en el primer
     render de elementos creados dinámicamente (nacen con width:0 por CSS y
     reciben el width:<pct>% inline en el mismo tick antes de insertarse; el
     primer pintado quedaba en 0 hasta que un recálculo lo forzaba). */
}
/* Estado sin datos: pista discreta y sin relleno */
.tt-progreso--sindatos .tt-progreso__pista {
  background: var(--progreso-sindatos);
  border: 1px dashed var(--borde-fuerte);
  background-clip: padding-box;
}
.tt-progreso--sindatos .tt-progreso__valor { font-style: italic; opacity: 0.85; }

/* --------------------------------------------------------------------------
   Opción de multiple choice (lenguaje visual de pregunta)
   --------------------------------------------------------------------------
   Estados: normal, hover/focus, seleccionado, correcto, incorrecto.
   Cada estado combina color + refuerzo no cromático (borde/peso/icono). */
.tt-opcion {
  display: flex;
  align-items: center;
  gap: var(--esp-3);
  width: 100%;
  text-align: left;
  font-family: var(--fuente-sans);
  font-size: var(--texto-lg);
  color: var(--texto);
  background: var(--superficie);
  border: 1.5px solid var(--borde-fuerte);
  border-radius: var(--radio-md);
  padding: var(--esp-4) var(--esp-5);
  cursor: pointer;
  transition: border-color var(--trans-rapida), background var(--trans-rapida),
              box-shadow var(--trans-rapida);
}
.tt-opcion:hover { border-color: var(--acento); background: var(--superficie-alt); }
.tt-opcion:focus-visible {
  outline: var(--foco-grosor) solid var(--foco-color);
  outline-offset: 2px;
}
/* Marcador circular que refuerza el ESTADO tras responder (✓/✕) sin depender
   solo del color. En estado inicial (sin responder) NO se muestra: el diseño
   original de las opciones no llevaba "radio button" (ni en texto ni en imagen).
   Solo aparece cuando la opción adquiere un estado (elegida/correcta/incorrecta),
   momento en el que `responder()` le pone el símbolo ✓/✕. Al estar oculto por
   `display:none`, el `gap` del flex no reserva hueco a su izquierda. */
.tt-opcion__marca {
  width: 1.4em;
  height: 1.4em;
  border-radius: var(--radio-full);
  border: 2px solid var(--borde-fuerte);
  flex: none;
  display: none;
  align-items: center;
  justify-content: center;
  font-size: 0.8em;
  font-weight: var(--peso-bold);
}
/* El marcador solo se hace visible cuando la opción tiene estado (tras responder). */
.tt-opcion--seleccionada .tt-opcion__marca,
.tt-opcion--correcta .tt-opcion__marca,
.tt-opcion--incorrecta .tt-opcion__marca {
  display: inline-flex;
}

.tt-opcion--seleccionada {
  border-color: var(--acento);
  background: var(--acento-suave);
}
.tt-opcion--seleccionada .tt-opcion__marca {
  border-color: var(--acento);
  background: var(--acento);
  color: var(--texto-sobre-acento-principal);
}

.tt-opcion--correcta {
  border-color: var(--exito);
  background: var(--exito-suave);
  color: var(--exito);
  font-weight: var(--peso-semi);
}
.tt-opcion--correcta .tt-opcion__marca {
  border-color: var(--exito);
  background: var(--exito);
  color: var(--texto-sobre-acento);
}

.tt-opcion--incorrecta {
  border-color: var(--error);
  background: var(--error-suave);
  color: var(--error);
  font-weight: var(--peso-semi);
}
.tt-opcion--incorrecta .tt-opcion__marca {
  border-color: var(--error);
  background: var(--error);
  color: var(--texto-sobre-acento);
}

/* --------------------------------------------------------------------------
   Contexto de pregunta (Familia → Tema · Subtema)
   -------------------------------------------------------------------------- */
.tt-contexto__familia {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-2);
  font-size: var(--texto-sm);
  font-weight: var(--peso-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--familia-actual);
}
.tt-contexto__ruta {
  font-size: var(--texto-sm);
  color: var(--texto-atenuado);
}
.tt-pregunta {
  font-family: var(--fuente-display);
  font-size: var(--texto-display);
  line-height: var(--lh-ajustado);
  font-weight: var(--peso-bold);
  color: var(--texto);
  margin: var(--esp-4) 0 var(--esp-6);
}