:root {
  /* Gradient fondo */
  --grad-fondo-from: #f6f9ff;
  --grad-fondo-to: #eef2ff;

  /* Marca */
  --azul: #2874a6;
  --ambar: #d68910;
  --ambar-claro: #f0b429;
  --rojo: #c0392b;
  --verde: #27ae60;
  --violeta: #8e44ad;

  /* Grises */
  --gris-900: #2d3748;
  --gris-600: #4a5568;
  --gris-200: #e2e8f0;
  --blanco: #ffffff;

  /* Estados */
  --correcto-bg: #d4edda;
  --correcto-tx: #155724;
  --error-bg: #f8d7da;
  --error-tx: #721c24;
  --foco-outline: #2874a6;

  /* Tipografía */
  --fuente-base: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --tam-base: 16px;
  --tam-titulo: 24px;
  --tam-vista: 20px;

  /* Radio y sombra */
  --radio-btn: 12px;
  --radio-tarj: 16px;
  --sombra: 0 4px 12px rgba(0, 0, 0, 0.08);
}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  background: linear-gradient(135deg, var(--grad-fondo-from), var(--grad-fondo-to));
  font-family: var(--fuente-base);
  color: var(--gris-900);
  font-size: var(--tam-base);
  min-height: 100vh;
}

/* ===== Layout ===== */

.contenedor {
  max-width: 960px;
  margin: 0 auto;
  padding: 16px;
}

/* Vistas: ocultas por defecto, visibles con .active */
.vista {
  display: none;
}

.vista.active {
  display: block;
}

/* Títulos */
h1 {
  font-size: var(--tam-titulo);
  margin-bottom: 12px;
}

h2 {
  font-size: var(--tam-vista);
  margin-bottom: 8px;
}

/* ===== Botones ===== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  min-width: 44px;
  padding: 12px 16px;
  border: none;
  border-radius: var(--radio-btn);
  font-family: var(--fuente-base);
  font-size: var(--tam-base);
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  line-height: 1.4;
  transition: background-color 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease;
}

.btn:active {
  transform: scale(0.97);
}

.btn--primario {
  background-color: var(--azul);
  color: var(--blanco);
}

.btn--primario:hover {
  background-color: #1f6690;
}

.btn--secundario {
  background-color: transparent;
  color: var(--azul);
  border: 2px solid var(--azul);
}

.btn--secundario:hover {
  background-color: rgba(40, 116, 166, 0.08);
}

/* Botón de opción (clasificación, V/F, tilde) */
.btn-opcion {
  display: block;
  width: 100%;
  min-height: 48px;
  padding: 12px 16px;
  border: 2px solid var(--gris-200);
  border-radius: var(--radio-btn);
  background-color: var(--blanco);
  font-family: var(--fuente-base);
  font-size: var(--tam-base);
  cursor: pointer;
  text-align: left;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.btn-opcion:hover {
  border-color: var(--azul);
  background-color: rgba(40, 116, 166, 0.04);
}

.btn-opcion.correcta {
  border-color: var(--verde);
  background-color: var(--correcto-bg);
  color: var(--correcto-tx);
}

.btn-opcion.incorrecta {
  border-color: var(--rojo);
  background-color: var(--error-bg);
  color: var(--error-tx);
}

.btn-opcion:disabled {
  cursor: default;
  opacity: 0.85;
}

/* Botón de token (identificación en frase) */
.btn-token {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  min-width: 44px;
  padding: 8px 12px;
  border: 2px solid var(--gris-200);
  border-radius: var(--radio-btn);
  background-color: var(--blanco);
  font-family: var(--fuente-base);
  font-size: var(--tam-base);
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.btn-token:hover {
  border-color: var(--azul);
}

.btn-token[aria-pressed="true"] {
  border-color: var(--azul);
  background-color: rgba(40, 116, 166, 0.15);
  font-weight: 600;
}

.btn-token.correcta {
  border-color: var(--verde);
  background-color: var(--correcto-bg);
  color: var(--correcto-tx);
}

.btn-token.incorrecta {
  border-color: var(--rojo);
  background-color: var(--error-bg);
  color: var(--error-tx);
}

.btn-token.faltante {
  border-color: var(--verde);
  background-color: var(--correcto-bg);
  border-style: dashed;
}

/* ===== Tarjetas ===== */

.tarjeta-tema {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 24px 16px;
  background-color: var(--blanco);
  border-radius: var(--radio-tarj);
  box-shadow: var(--sombra);
  border: none;
  cursor: pointer;
  font-family: var(--fuente-base);
  font-size: var(--tam-base);
  font-weight: 600;
  color: var(--gris-900);
  text-align: center;
  transition: box-shadow 0.15s ease, transform 0.15s ease;
  min-height: 48px;
}

.tarjeta-tema:hover {
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
  transform: translateY(-2px);
}

.tarjeta-tema .emoji {
  font-size: 32px;
}

.tarjeta-ejercicio {
  background-color: var(--blanco);
  border-radius: var(--radio-tarj);
  box-shadow: var(--sombra);
  padding: 16px;
  margin-bottom: 16px;
}

/* ===== Feedback ===== */

.feedback {
  padding: 12px 16px;
  border-radius: var(--radio-btn);
  margin-top: 12px;
  font-size: var(--tam-base);
  line-height: 1.5;
}

.feedback--ok {
  background-color: var(--correcto-bg);
  color: var(--correcto-tx);
}

.feedback--ko {
  background-color: var(--error-bg);
  color: var(--error-tx);
}

/* ===== Barra de puntuación ===== */

.barra-puntuacion {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 16px;
  background-color: var(--blanco);
  border-radius: var(--radio-btn);
  box-shadow: var(--sombra);
  margin-bottom: 16px;
  font-weight: 600;
  font-size: var(--tam-base);
}

/* ===== Badge mejor marca ===== */

.badge-mejor {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 12px;
  background-color: var(--ambar-claro);
  color: var(--gris-900);
  font-size: 12px;
  font-weight: 700;
  margin-left: 8px;
  vertical-align: middle;
}

/* ===== Resaltes de rol (sintaxis) ===== */

.resalte--gs {
  background-color: rgba(40, 116, 166, 0.2);
  padding: 2px 4px;
  border-radius: 4px;
}

.resalte--ngs {
  background-color: rgba(142, 68, 173, 0.2);
  padding: 2px 4px;
  border-radius: 4px;
  font-weight: 700;
}

.resalte--ngp {
  background-color: rgba(142, 68, 173, 0.2);
  padding: 2px 4px;
  border-radius: 4px;
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: var(--violeta);
}

.resalte--cc {
  background-color: rgba(39, 174, 96, 0.2);
  padding: 2px 4px;
  border-radius: 4px;
}

.resalte--gp {
  background-color: rgba(192, 57, 43, 0.15);
  padding: 2px 4px;
  border-radius: 4px;
}

/* Sílaba tónica */
.silaba-tonica {
  font-weight: 700;
  color: var(--rojo);
  text-decoration: underline;
  text-decoration-color: var(--rojo);
  text-underline-offset: 3px;
}

/* ===== Grids ===== */

.grid-temas {
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr;
}

.grid-opciones {
  display: grid;
  gap: 10px;
  grid-template-columns: 1fr;
}

.grid-tokens {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* ===== Input de texto (completar hueco, conjugación) ===== */

.input-respuesta {
  width: 100%;
  min-height: 48px;
  padding: 12px 16px;
  border: 2px solid var(--gris-200);
  border-radius: var(--radio-btn);
  font-family: var(--fuente-base);
  font-size: var(--tam-base);
  color: var(--gris-900);
  background-color: var(--blanco);
  transition: border-color 0.15s ease;
}

.input-respuesta:focus {
  border-color: var(--azul);
  outline: none;
}

.input-respuesta.correcta {
  border-color: var(--verde);
  background-color: var(--correcto-bg);
}

.input-respuesta.incorrecta {
  border-color: var(--rojo);
  background-color: var(--error-bg);
}

/* ===== Select (emparejar) ===== */

.select-emparejar {
  min-height: 44px;
  padding: 8px 12px;
  border: 2px solid var(--gris-200);
  border-radius: var(--radio-btn);
  font-family: var(--fuente-base);
  font-size: var(--tam-base);
  color: var(--gris-900);
  background-color: var(--blanco);
  cursor: pointer;
  flex: 1;
}

.fila-emparejar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
  padding: 8px;
  border-radius: 8px;
  transition: background-color 0.15s ease;
}

/* Palabra destacada en ejercicios */
.palabra-destacada {
  text-align: center;
}

/* ===== Tabla de conjugación (guía) ===== */

.tabla-conjugacion {
  width: 100%;
  border-collapse: collapse;
  margin: 12px 0;
}

.tabla-conjugacion th,
.tabla-conjugacion td {
  padding: 8px 12px;
  border: 1px solid var(--gris-200);
  text-align: left;
  font-size: var(--tam-base);
}

.tabla-conjugacion th {
  background-color: rgba(40, 116, 166, 0.1);
  font-weight: 600;
}

/* ===== Sección de tips ===== */

.bloque-tip {
  background-color: rgba(214, 137, 16, 0.1);
  border-left: 4px solid var(--ambar);
  padding: 12px 16px;
  border-radius: 0 var(--radio-btn) var(--radio-btn) 0;
  margin: 12px 0;
  font-size: var(--tam-base);
  line-height: 1.5;
}

/* ===== Resumen final ===== */

.resumen-final {
  text-align: center;
  padding: 32px 16px;
}

.resumen-final .emoji-celebracion {
  font-size: 64px;
  margin-bottom: 16px;
}

.resumen-final .puntuacion-final {
  font-size: var(--tam-titulo);
  font-weight: 700;
  margin-bottom: 24px;
}

/* ===== Focus visible ===== */

button:focus-visible,
input:focus-visible,
select:focus-visible,
[role="button"]:focus-visible {
  outline: 3px solid var(--foco-outline);
  outline-offset: 2px;
}

/* ===== Responsive ===== */

@media (min-width: 600px) {
  .grid-temas {
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 960px) {
  .grid-temas {
    grid-template-columns: 1fr 1fr;
    max-width: 720px;
    margin: 0 auto;
  }
}