:root {
  --tinta: #1e293b;
  --tinta-suave: #64748b;
  --linea: #e2e8f0;
  --primario: #4f46e5;
  --primario-oscuro: #4338ca;
  --primario-suave: #eef2ff;
  --fondo: #f8fafc;
  --tarjeta: #ffffff;
  --verde: #16a34a;
  --ambar: #d97706;
  --rojo: #dc2626;
  --sombra: 0 1px 3px rgba(15, 23, 42, 0.08), 0 8px 24px rgba(15, 23, 42, 0.06);
  --radio: 16px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--tinta);
  background: radial-gradient(1200px 600px at 50% -10%, #eef2ff 0%, var(--fondo) 55%);
  min-height: 100vh;
  line-height: 1.5;
}

.cabecera {
  padding: 22px clamp(16px, 5vw, 48px);
  border-bottom: 1px solid var(--linea);
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(6px);
}
.marca { display: flex; align-items: center; gap: 14px; }
.logo {
  width: 46px; height: 46px; border-radius: 12px;
  background: linear-gradient(135deg, var(--primario), #7c3aed);
  color: #fff; font-size: 26px; font-weight: 700;
  display: grid; place-items: center; box-shadow: var(--sombra);
}
.cabecera h1 { margin: 0; font-size: clamp(1.05rem, 3vw, 1.4rem); }
.clave { margin: 2px 0 0; color: var(--tinta-suave); font-size: 0.85rem; }

.contenedor { max-width: 780px; margin: 0 auto; padding: clamp(20px, 5vw, 40px) clamp(16px, 5vw, 24px); }

.pie {
  max-width: 780px; margin: 0 auto; padding: 8px 24px 40px;
  color: var(--tinta-suave); font-size: 0.82rem; text-align: center;
}

.tarjeta {
  background: var(--tarjeta); border: 1px solid var(--linea);
  border-radius: var(--radio); box-shadow: var(--sombra); padding: clamp(20px, 4vw, 30px);
}

/* Home */
.intro { margin: 0 0 22px; color: var(--tinta-suave); }
.opciones { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 620px) { .opciones { grid-template-columns: 1fr 1fr; } }
/* Con una sola opción visible, el grid de dos columnas la dejaba pegada a la izquierda con un
   hueco a la derecha. Esto la centra sin tocar el caso de dos. */
@media (min-width: 620px) {
  .opciones.una { grid-template-columns: minmax(0, 460px); justify-content: center; }
}
.opcion {
  text-align: left; cursor: pointer; border: 1px solid var(--linea);
  background: var(--tarjeta); border-radius: var(--radio); padding: 22px;
  transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease;
}
.opcion:hover { transform: translateY(-2px); box-shadow: var(--sombra); border-color: #c7d2fe; }
.opcion h3 { margin: 0 0 6px; font-size: 1.1rem; }
.opcion p { margin: 0; color: var(--tinta-suave); font-size: 0.9rem; }
.opcion .emoji { font-size: 1.6rem; display: block; margin-bottom: 10px; }

/* Reactivo */
.progreso { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.progreso .barra { flex: 1; height: 8px; background: var(--linea); border-radius: 99px; overflow: hidden; }
.progreso .relleno { height: 100%; background: var(--primario); transition: width 0.3s ease; }
.progreso .num { font-size: 0.85rem; color: var(--tinta-suave); white-space: nowrap; }
.area-chip {
  display: inline-block; font-size: 0.75rem; font-weight: 600; color: var(--primario-oscuro);
  background: var(--primario-suave); padding: 3px 10px; border-radius: 99px; margin-bottom: 12px;
}
.enunciado { font-size: 1.15rem; margin: 6px 0 18px; white-space: pre-line; }
.figura { display: grid; place-items: center; padding: 16px; background: #fbfcfe; border: 1px solid var(--linea); border-radius: 12px; margin-bottom: 18px; overflow-x: auto; }
.figura svg { max-width: 100%; height: auto; }

.fila-resp { display: flex; gap: 10px; flex-wrap: wrap; }
input[type="text"] {
  flex: 1; min-width: 160px; font-size: 1.05rem; padding: 12px 14px;
  border: 1px solid var(--linea); border-radius: 10px; font-family: inherit;
}
input[type="text"]:focus { outline: 2px solid var(--primario); border-color: var(--primario); }
.pista { font-size: 0.8rem; color: var(--tinta-suave); margin-top: 8px; }

button.primario {
  background: var(--primario); color: #fff; border: 0; border-radius: 10px;
  padding: 12px 22px; font-size: 1rem; font-weight: 600; cursor: pointer; font-family: inherit;
  transition: background 0.12s ease;
}
button.primario:hover { background: var(--primario-oscuro); }
button.secundario {
  background: transparent; color: var(--primario-oscuro); border: 1px solid #c7d2fe;
  border-radius: 10px; padding: 10px 18px; font-size: 0.95rem; cursor: pointer; font-family: inherit;
}

/* Manual */
.reactivo-manual { padding: 16px 0; border-bottom: 1px solid var(--linea); }
.reactivo-manual:last-of-type { border-bottom: 0; }
.reactivo-manual .n { font-weight: 700; color: var(--primario-oscuro); }
.reactivo-manual .enun { margin: 4px 0 10px; }

/* Perfil */
.perfil-cab { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.perfil-cab h2 { margin: 0; }
.marcador { font-size: 1.05rem; color: var(--tinta-suave); }
.areas { display: grid; gap: 14px; margin: 20px 0; }
.area-fila .encab { display: flex; justify-content: space-between; font-size: 0.92rem; margin-bottom: 5px; }
.area-fila .val { font-variant-numeric: tabular-nums; color: var(--tinta-suave); }
.medidor { height: 12px; background: var(--linea); border-radius: 99px; overflow: hidden; }
.medidor .nivel { height: 100%; border-radius: 99px; transition: width 0.5s ease; }
.debiles { background: #fff7ed; border: 1px solid #fed7aa; border-radius: 12px; padding: 16px 18px; margin-top: 8px; }
.debiles h3 { margin: 0 0 8px; font-size: 1rem; color: #9a3412; }
.debiles ol { margin: 0; padding-left: 20px; }
.aviso-tutor { margin-top: 20px; padding: 16px 18px; border: 1px dashed #c7d2fe; border-radius: 12px; background: var(--primario-suave); color: var(--primario-oscuro); font-size: 0.9rem; }
.acciones { margin-top: 22px; display: flex; gap: 10px; flex-wrap: wrap; }
.cargando { color: var(--tinta-suave); padding: 20px 0; display: flex; align-items: center; gap: 12px; }
.spinner { width: 20px; height: 20px; border: 3px solid var(--linea); border-top-color: var(--primario); border-radius: 50%; animation: girar 0.8s linear infinite; flex-shrink: 0; }
@keyframes girar { to { transform: rotate(360deg); } }
.error-msg { color: var(--rojo); background: #fef2f2; border: 1px solid #fecaca; border-radius: 12px; padding: 16px 18px; margin: 0 0 4px; }

/* Tutor / chat */
.tarjeta-practica { background: #fbfcff; border: 1px solid var(--linea); border-radius: 12px; padding: 16px 18px; margin-bottom: 16px; }
.chat { display: flex; flex-direction: column; gap: 8px; margin: 8px 0 16px; max-height: 42vh; overflow-y: auto; }
.burbuja { max-width: 85%; padding: 10px 14px; border-radius: 14px; font-size: 0.95rem; white-space: pre-line; }
.burbuja.tutor { align-self: flex-start; background: var(--primario-suave); color: var(--primario-oscuro); border-bottom-left-radius: 4px; }
.burbuja.alumno { align-self: flex-end; background: var(--primario); color: #fff; border-bottom-right-radius: 4px; }
/* Indicador de espera del tutor: itálica + latido, mientras el texto CICLA entre estados. */
.burbuja.escribiendo { font-style: italic; animation: latido 1.2s ease-in-out infinite; }
@keyframes latido { 0%, 100% { opacity: 0.45; } 50% { opacity: 0.95; } }
/* Aviso del sistema (logro de área / fin de sesión): banner central. */
.burbuja.sistema { align-self: center; text-align: center; max-width: 95%; background: #e7f6ec; color: #166534; font-weight: 600; border-radius: 10px; }
/* Contador discreto de problemas resueltos en la cabecera del tutor. */
.contador-resueltas { font-size: 0.85rem; color: var(--tinta-suave); font-weight: 500; }

/* ── Sesión de la persona (WP-7) ─────────────────────────────────────────────────────────── */
.pie-sesion {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  margin-top: 1.4rem; padding-top: .9rem; border-top: 1px solid #e2e8f0;
  color: #64748b; font-size: .88rem;
}
button.enlace {
  background: none; border: none; padding: 0; color: #2563eb; cursor: pointer;
  font-size: .88rem; text-decoration: underline; font-family: inherit;
}
button.enlace:hover { color: #1d4ed8; }
.etiqueta-campo {
  display: block; margin: .7rem 0 .25rem; color: #475569; font-size: .86rem; font-weight: 600;
}
.campo .etiqueta-campo:first-child { margin-top: 0; }
/* Al reanudar, decirle a la persona que volvió a su lugar (y no que empezó de cero). */
.aviso-reanudado {
  background: #eff6ff; border-left: 3px solid #3b82f6; color: #1e40af;
  padding: .55rem .8rem; border-radius: .3rem; margin: 0 0 1rem; font-size: .9rem;
}

/* ── Comparativa inicio vs. cierre (§2.4) ────────────────────────────────────────────────── */
.areas.comparativa .medidor.doble { height: 7px; margin-top: .25rem; }
.areas.comparativa .nivel.ini { background: #cbd5e1; }
.delta { margin-left: .45rem; font-variant-numeric: tabular-nums; }
.delta.sube { color: var(--verde); }
.delta.baja { color: var(--rojo); }

/* ── Avance del alumno (T6-5, `adr/0013`) ────────────────────────────────────────────────── */
/* Sin barras de progreso a propósito: el criterio son tres conteos distintos, y una barra los
   promediaría en un número que no le dice a nadie qué hacer a continuación. */
.areas.avance { gap: 12px; }
.avance-fila { border: 1px solid var(--linea); border-radius: 12px; padding: 12px 14px; border-left-width: 4px; }
.avance-fila.pendiente { border-left-color: var(--primario); }
.avance-fila.dominada { border-left-color: var(--verde); background: #f6fdf8; }
/* Un área agotada NO se pinta de verde: no es un logro, es un límite del generador. */
.avance-fila.agotada { border-left-color: #94a3b8; background: #f8fafc; }
.avance-fila .encab { align-items: center; }
.avance-fila .contadores { font-size: .86rem; }
.etiqueta {
  font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
  padding: .15rem .5rem; border-radius: 99px; white-space: nowrap;
}
.etiqueta.pendiente { background: var(--primario-suave); color: var(--primario-oscuro); }
.etiqueta.dominada { background: #dcfce7; color: #166534; }
.etiqueta.agotada { background: #e2e8f0; color: #475569; }
.avance-falta { margin: .5rem 0 0; font-size: .9rem; color: var(--tinta-suave); }
.avance-tope { margin: .35rem 0 0; font-size: .84rem; color: #92400e; }
.aviso-avance {
  padding: .6rem .85rem; border-radius: .4rem; margin: 0 0 1rem; font-size: .9rem;
  border-left: 3px solid #94a3b8; background: #f8fafc; color: #334155;
}
.aviso-avance.tope { border-left-color: #f59e0b; background: #fffbeb; color: #92400e; }
.aviso-avance.completada { border-left-color: var(--verde); background: #f0fdf4; color: #166534; }
.debiles.sin-practica ul { margin: .4rem 0 0; padding-left: 20px; }
.debiles.sin-practica p { margin: 0; font-size: .9rem; }

/* ── La matrícula declarada (T6-6, `adr/0017`) ───────────────────────────────────────────── */
/* Ancho fijo y espaciado: nueve caracteres que se leen de un golpe para revisar el dedazo antes
   de mandarlos, que es la única verificación posible (el sistema no tiene lista contra la cual
   comprobar la matrícula). */
.campo input.matricula {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .12em; text-transform: uppercase;
}