:root {
  --azul: #3b82f6;
  --amarillo: #fbbf24;
  --verde: #22c55e;
  --morado: #a855f7;
  --rojo: #ef4444;
  --fondo: #f0f7ff;
  --texto: #1e293b;
  --radio: 20px;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: 'Comic Sans MS', 'Trebuchet MS', system-ui, sans-serif;
  background: var(--fondo);
  color: var(--texto);
}

.oculto {
  display: none !important;
}

.pantalla {
  min-height: 100vh;
}

/* --- Pantalla de perfil --- */
#pantalla-perfil {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2.5rem;
  text-align: center;
  padding: 2rem;
  background: linear-gradient(135deg, var(--azul), var(--morado));
  color: white;
}

#pantalla-perfil h1 {
  font-size: 2.2rem;
  margin: 0;
}

.tarjetas-perfil {
  display: flex;
  gap: 2rem;
  flex-wrap: wrap;
  justify-content: center;
}

.tarjeta-perfil {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  width: 200px;
  padding: 2rem 1rem;
  border: none;
  border-radius: var(--radio);
  background: white;
  color: var(--texto);
  cursor: pointer;
  box-shadow: 0 8px 0 rgba(0, 0, 0, 0.15);
  transition: transform 0.15s ease;
}

.tarjeta-perfil:hover {
  transform: translateY(-6px);
}

.tarjeta-perfil:active {
  transform: translateY(0);
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.15);
}

.icono-perfil {
  width: 72px;
  height: 72px;
}

/* --- Avatares de perfil (GIF animado provisto por el usuario) --- */
.avatar-perfil {
  display: block;
  width: 84px;
  height: 84px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 0 0 4px white, 0 2px 8px rgba(0, 0, 0, 0.15);
}

.nombre-perfil {
  font-size: 1.5rem;
  font-weight: bold;
}

.grado-perfil {
  font-size: 1rem;
  color: #64748b;
}

.tarjeta-santi {
  border-bottom: 8px solid var(--verde);
}

.tarjeta-salo {
  border-bottom: 8px solid var(--amarillo);
}

/* --- Pantalla de PIN (ver server/src/lib/acceso.js) --- */
.pantalla-pin {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 2rem;
  background: linear-gradient(135deg, var(--azul), var(--morado));
  color: white;
}

.pin-caja {
  background: white;
  color: var(--texto);
  border-radius: var(--radio);
  padding: 2.5rem 2rem;
  max-width: 320px;
  width: 100%;
  box-shadow: 0 8px 0 rgba(0, 0, 0, 0.15);
}

.pin-caja h1 {
  font-size: 1.8rem;
  margin: 0 0 0.5rem;
}

.pin-subtitulo {
  margin: 0 0 1.5rem;
  color: #64748b;
  font-size: 0.95rem;
}

.form-pin {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: center;
}

.input-pin {
  width: 100%;
  padding: 0.8rem;
  border: 2px solid #cbd5e1;
  border-radius: 12px;
  font-family: inherit;
  font-size: 2rem;
  letter-spacing: 0.6em;
  text-align: center;
}

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

.pin-mensaje {
  margin: 0;
  color: var(--rojo);
  font-size: 0.9rem;
}

/* --- App principal --- */
.barra-superior {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.5rem;
  background: white;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

.logo {
  font-size: 1.4rem;
  font-weight: bold;
  color: var(--azul);
}

.acciones-barra {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.boton-historial {
  border: none;
  border-radius: 999px;
  padding: 0.5rem 1rem;
  background: var(--morado);
  color: white;
  font-size: 0.9rem;
  font-family: inherit;
  cursor: pointer;
  box-shadow: 0 3px 0 #7e22ce;
}

.boton-historial:hover {
  filter: brightness(1.05);
}

.boton-historial:active {
  box-shadow: 0 1px 0 #7e22ce;
  transform: translateY(2px);
}

.chip-perfil {
  background: var(--amarillo);
  padding: 0.4rem 1rem;
  border-radius: 999px;
  font-size: 0.95rem;
}

/* --- Control parental de tiempo (ver server/config/limites.json) --- */
.aviso-bloqueo {
  margin: 1rem 1.5rem 0;
  padding: 0.9rem 1.2rem;
  border-radius: var(--radio);
  background: #fef3c7;
  border: 2px solid var(--amarillo);
  color: #92400e;
  font-size: 1rem;
  text-align: center;
}

.aviso-tiempo {
  margin: 0;
  padding: 0.5rem 0.9rem;
  border-radius: 999px;
  background: #fef3c7;
  border: 2px solid var(--amarillo);
  color: #92400e;
  font-size: 0.85rem;
  text-align: center;
}

.zona-drop {
  margin: 3rem auto;
  max-width: 480px;
  padding: 3rem 2rem;
  text-align: center;
  border: 4px dashed var(--azul);
  border-radius: var(--radio);
  background: white;
}

.zona-drop.arrastrando {
  background: #e0edff;
}

.zona-drop p {
  font-size: 1.2rem;
  margin: 0.5rem 0;
}

.boton {
  display: inline-block;
  font-size: 1.1rem;
  padding: 0.8rem 1.6rem;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  font-family: inherit;
}

.boton-secundario {
  background: var(--azul);
  color: white;
  box-shadow: 0 4px 0 #1d4ed8;
}

.boton-secundario:active {
  box-shadow: 0 1px 0 #1d4ed8;
  transform: translateY(3px);
}

.separador-opcional {
  margin: 1.2rem 0 0.5rem !important;
  color: #94a3b8;
  font-size: 1rem !important;
}

.boton-enlace {
  background: none;
  border: none;
  padding: 0.4rem;
  color: var(--azul);
  font-size: 1rem;
  font-family: inherit;
  text-decoration: underline;
  cursor: pointer;
}

.boton-enlace:hover {
  color: #1d4ed8;
}

/* --- Visor de PDF --- */
.visor-pdf {
  display: grid;
  grid-template-columns: 180px 1fr 300px;
  gap: 1rem;
  padding: 1rem;
  height: calc(100vh - 70px);
}

.panel-miniaturas,
.panel-transcripcion {
  background: white;
  border-radius: var(--radio);
  padding: 1rem;
  overflow-y: auto;
}

.panel-miniaturas h2,
.panel-transcripcion h2 {
  margin-top: 0;
  font-size: 1.1rem;
  color: var(--morado);
}

.encabezado-miniaturas {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.encabezado-miniaturas h2 {
  margin: 0;
}

.boton-nuevo-documento {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border: none;
  border-radius: 50%;
  background: var(--azul);
  color: white;
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 3px 0 #1d4ed8;
}

.boton-nuevo-documento:hover {
  filter: brightness(1.05);
}

.boton-nuevo-documento:active {
  box-shadow: 0 1px 0 #1d4ed8;
  transform: translateY(2px);
}

/* Pestañas de documentos abiertos (hasta 3, ver app.js). Cada documento
   además tiene su PROPIO `.lista-miniaturas` dentro de `.miniaturas-wrapper`
   — solo el del documento seleccionado queda visible (los demás siguen en
   el DOM con `oculto`, no se destruyen al cambiar de pestaña). */
.selector-documentos {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 0.75rem;
}

.pestana-documento {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 0.35rem 0.7rem;
  border: none;
  border-radius: 999px;
  background: #f1f5f9;
  color: var(--texto);
  font-family: inherit;
  font-size: 0.8rem;
  cursor: pointer;
}

.pestana-documento:hover {
  background: #e2e8f0;
}

.pestana-documento.activa {
  background: var(--azul);
  color: white;
}

.aviso-documento-quitado {
  margin: 0 0 0.75rem;
  padding: 0.5rem 0.7rem;
  border-radius: 10px;
  background: #fef3c7;
  border: 2px solid var(--amarillo);
  color: #92400e;
  font-size: 0.8rem;
  text-align: center;
}

.miniaturas-wrapper {
  display: flex;
  flex-direction: column;
}

.lista-miniaturas {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  align-items: center;
}

.miniatura {
  width: 100%;
  border: 3px solid transparent;
  border-radius: 10px;
  cursor: pointer;
}

.miniatura:hover {
  border-color: var(--amarillo);
}

.miniatura.activa {
  border-color: var(--azul);
}

.panel-principal {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  overflow: hidden;
}

.contenedor-canvas {
  flex: 1;
  /* Sin esto, un item flex se resiste a encogerse por debajo del tamaño de
     su contenido (el canvas, que puede ser mucho más alto que el espacio
     disponible) y termina empujando a toda la columna fuera de la pantalla
     — la causa real del scroll lateral que cortaba la imagen a la mitad. */
  min-height: 0;
  width: 100%;
  overflow: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  background: white;
  border-radius: var(--radio);
  padding: 0.5rem;
}

.sin-documento {
  flex: 1;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 0.5rem;
  background: white;
  border-radius: var(--radio);
  padding: 2rem;
  color: #64748b;
  font-size: 1.1rem;
}

#pagina-actual {
  /* `max-height` es lo que de verdad evita el corte: el canvas se renderiza
     internamente a su resolución real (ver pdfViewer.js), que suele ser más
     alta que el espacio disponible, así que sin este límite se salía del
     contenedor y forzaba la barra de scroll. Con ambos límites a la vez la
     imagen siempre se ve completa, escalada hacia abajo si hace falta. */
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  display: block;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.controles-voz {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
}

.boton-mic {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--verde);
  color: white;
  font-size: 1.3rem;
  box-shadow: 0 4px 0 #15803d;
}

.boton-mic:disabled {
  background: #cbd5e1;
  box-shadow: 0 4px 0 #94a3b8;
  cursor: not-allowed;
}

.boton-mic.activo {
  background: var(--rojo);
  box-shadow: 0 4px 0 #b91c1c;
  animation: pulso 1.2s infinite;
}

@keyframes pulso {
  0% { transform: scale(1); }
  50% { transform: scale(1.08); }
  100% { transform: scale(1); }
}

.boton-detener {
  padding: 0.4rem 1rem;
  font-size: 0.9rem;
  background: var(--rojo);
  color: white;
  box-shadow: 0 3px 0 #b91c1c;
}

.boton-detener:disabled {
  background: #cbd5e1;
  box-shadow: 0 3px 0 #94a3b8;
  cursor: not-allowed;
}

.estado-texto {
  margin: 0;
  font-size: 0.85rem;
  color: #64748b;
  text-align: center;
}

.form-texto {
  display: flex;
  gap: 0.5rem;
  width: 100%;
  max-width: 420px;
}

.input-texto {
  flex: 1;
  min-width: 0;
  padding: 0.45rem 0.9rem;
  border: 2px solid #cbd5e1;
  border-radius: 999px;
  font-family: inherit;
  font-size: 0.95rem;
}

.input-texto:disabled {
  background: #f1f5f9;
  cursor: not-allowed;
}

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

.boton-enviar-texto {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--azul);
  color: white;
  font-size: 1.1rem;
  box-shadow: 0 3px 0 #1d4ed8;
}

.boton-enviar-texto:disabled {
  background: #cbd5e1;
  box-shadow: 0 3px 0 #94a3b8;
  cursor: not-allowed;
}

.transcripcion {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

/* --- Aviso de memoria real entre sesiones (ver 'contexto_previo') --- */
.continuando-desde {
  margin: 0 0 0.85rem;
  padding: 0.5rem 0.75rem;
  background: #f1f5f9;
  border-left: 3px solid var(--azul);
  border-radius: 8px;
  font-size: 0.82rem;
  font-style: italic;
  color: #475569;
}

/* --- Pestañas de herramientas: Pizarra / Calculadora --- */
.tabs-herramientas {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 0.75rem;
}

.tab-herramienta {
  /* Con 5 pestañas ya no entran cómodas en una sola fila (se veían
     truncadas) — `flex-wrap` de arriba las pasa a 2 filas (3+2) en vez de
     apretarlas o cortar el texto. */
  flex: 1 1 calc(33% - 0.4rem);
  min-width: 70px;
  padding: 0.45rem 0.3rem;
  border: none;
  border-radius: 10px;
  background: #f1f5f9;
  color: var(--texto);
  font-family: inherit;
  font-size: 0.78rem;
  cursor: pointer;
}

.tab-herramienta:hover {
  background: #e2e8f0;
}

.tab-herramienta.activa {
  background: var(--morado);
  color: white;
}

.panel-tab-herramienta {
  margin-bottom: 1rem;
  padding-bottom: 1rem;
  border-bottom: 2px dashed #cbd5e1;
}

.herramienta-vacia {
  display: none;
  margin: 0;
  padding: 0.5rem 0;
  font-size: 0.82rem;
  color: #94a3b8;
  text-align: center;
}

#lista-pasos:empty + #pizarra-vacia {
  display: block;
}

/* --- Calculadora: teclas grandes y claras, usable con clic o por Gemini
   (ver calculadora.js) — mismo camino de código para las dos formas. --- */
.calculadora {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.calculadora-visor {
  padding: 0.6rem 0.8rem;
  border-radius: 12px;
  background: #1e293b;
  color: white;
  font-family: 'Courier New', monospace;
  font-size: 1.6rem;
  text-align: right;
  overflow-x: auto;
  white-space: nowrap;
}

.calculadora-teclado {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.5rem;
}

.tecla-calc {
  padding: 0.7rem 0;
  border: none;
  border-radius: 10px;
  background: white;
  box-shadow: 0 3px 0 #cbd5e1;
  color: var(--texto);
  font-family: inherit;
  font-size: 1.1rem;
  font-weight: bold;
  cursor: pointer;
}

.tecla-calc:hover {
  filter: brightness(1.05);
}

.tecla-calc:active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 #cbd5e1;
}

.tecla-calc-op {
  background: var(--azul);
  color: white;
  box-shadow: 0 3px 0 #1d4ed8;
}

.tecla-calc-igual {
  grid-row: span 2;
  background: var(--verde);
  color: white;
  box-shadow: 0 3px 0 #15803d;
}

.tecla-calc-cero {
  grid-column: span 2;
}

.tecla-calc-borrar {
  background: var(--rojo);
  color: white;
  box-shadow: 0 3px 0 #b91c1c;
}

/* Destello breve cuando se "presiona" una tecla (ver _destellarTecla en
   calculadora.js) — sobre todo útil cuando lo hace Gemini, donde no hay un
   clic real del niño que ya lo muestre solo. */
.tecla-calc.presionada {
  box-shadow: 0 0 0 3px var(--amarillo) inset;
  transform: translateY(2px);
}

/* --- Bloque científico (oculto por defecto — ver contexto: no abrumar a
   Santi con teclas que todavía no usa). Mismas teclas `.tecla-calc` de
   siempre, más chicas para que entren "x^y"/"log"/"sin" sin desbordar. --- */
.calculadora-toggle-cientifica {
  align-self: center;
  font-size: 0.8rem;
}

.calculadora-cientifica {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px dashed #cbd5e1;
}

.calculadora-modo-fila {
  display: flex;
  gap: 0.5rem;
}

.tecla-calc-modo {
  flex: 1;
  padding: 0.35rem 0;
  font-size: 0.8rem;
  background: #f1f5f9;
}

.tecla-calc-modo.activa {
  background: var(--morado);
  color: white;
}

.calculadora-teclado-cientifico {
  grid-template-columns: repeat(5, 1fr);
}

.calculadora-teclado-cientifico .tecla-calc {
  padding: 0.5rem 0;
  font-size: 0.85rem;
}

/* --- Recta numérica (SVG fijo, ver rectaNumerica.js) --- */
.recta-numerica-svg {
  display: block;
  width: 100%;
  height: auto;
  background: white;
  border-radius: 12px;
  border: 2px solid #e2e8f0;
}

/* --- Fracciones visuales (SVG fijo, ver fracciones.js) --- */
.fracciones-svg {
  display: block;
  width: 100%;
  height: auto;
  background: white;
  border-radius: 12px;
  border: 2px solid #e2e8f0;
}

/* --- Vocabulario en inglés (flashcards, ver vocabulario.js) --- */
.vocabulario-barra {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
  font-size: 0.78rem;
}

.vocabulario-tarjeta {
  min-height: 130px;
  padding: 1.2rem 1rem;
  border-radius: var(--radio);
  background: white;
  border: 2px solid #e2e8f0;
  box-shadow: 0 3px 0 #e2e8f0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.vocabulario-tarjeta:hover {
  border-color: var(--azul);
}

.vocabulario-cara {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

.vocabulario-palabra {
  margin: 0;
  font-size: 1.5rem;
  font-weight: bold;
  color: var(--azul);
  word-break: break-word;
}

.vocabulario-pista {
  margin: 0;
  font-size: 0.75rem;
  color: #94a3b8;
}

.vocabulario-traduccion {
  margin: 0;
  font-size: 1.2rem;
  font-weight: bold;
  color: var(--morado);
  word-break: break-word;
}

.vocabulario-ejemplo {
  margin: 0;
  font-size: 0.85rem;
  font-style: italic;
  color: var(--texto);
  word-break: break-word;
}

.vocabulario-lista-repaso {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  max-height: 320px;
  overflow-y: auto;
  margin-top: 0.5rem;
}

.vocabulario-item-repaso {
  padding: 0.6rem 0.8rem;
  border-radius: 12px;
  background: #f1f5f9;
}

.vocabulario-item-palabra {
  color: var(--azul);
  margin-right: 0.5rem;
}

.vocabulario-item-traduccion {
  color: var(--morado);
}

.vocabulario-item-ejemplo {
  margin: 0.3rem 0 0;
  font-size: 0.8rem;
  font-style: italic;
  color: #64748b;
}

.lista-pasos {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  max-height: 280px;
  overflow-y: auto;
}

.paso-item {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  padding: 0.5rem 0.7rem;
  border-radius: 12px;
  background: #f1f5f9;
  opacity: 0.65;
  transition: background 0.2s ease, opacity 0.2s ease, box-shadow 0.2s ease;
}

.paso-item.paso-actual {
  background: #fef3c7;
  opacity: 1;
  box-shadow: 0 0 0 2px var(--amarillo);
}

.paso-numero {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--azul);
  color: white;
  font-size: 0.8rem;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
}

.paso-item.paso-actual .paso-numero {
  background: var(--amarillo);
  color: var(--texto);
}

.paso-contenido {
  min-width: 0;
}

.paso-descripcion {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.3;
}

.paso-formula {
  margin: 0.3rem 0 0;
  font-size: 0.95rem;
  font-weight: bold;
  font-family: 'Courier New', monospace;
  color: var(--morado);
  word-break: break-word;
}

.burbuja {
  padding: 0.6rem 0.9rem;
  border-radius: 14px;
  font-size: 0.95rem;
  line-height: 1.3;
  max-width: 100%;
}

.burbuja-profesor {
  background: #e0edff;
  align-self: flex-start;
}

.burbuja-nino {
  background: #dcfce7;
  align-self: flex-end;
  text-align: right;
}

/* --- Modal de Historial --- */
.modal-historial {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  z-index: 100;
}

.modal-historial-contenido {
  background: white;
  border-radius: var(--radio);
  width: 100%;
  max-width: 560px;
  max-height: 85vh;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.modal-historial-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}

.modal-historial-header h2 {
  margin: 0;
  font-size: 1.2rem;
  color: var(--morado);
}

.boton-cerrar-modal {
  border: none;
  background: #f1f5f9;
  color: var(--texto);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  font-size: 1rem;
  cursor: pointer;
}

.boton-cerrar-modal:hover {
  background: #e2e8f0;
}

#historial-lista-vista,
#historial-detalle-vista {
  overflow-y: auto;
}

.historial-vacio,
.historial-aviso {
  color: #64748b;
  text-align: center;
  padding: 1.5rem 0;
}

.lista-historial {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.item-historial {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.7rem 0.9rem;
  border-radius: 14px;
  background: #f1f5f9;
  cursor: pointer;
  transition: background 0.15s ease;
}

.item-historial:hover,
.item-historial:focus-visible {
  background: #e0edff;
  outline: none;
}

.item-historial-fecha {
  font-size: 0.95rem;
}

.item-historial-documento {
  font-size: 0.85rem;
  color: #64748b;
}

.historial-detalle-meta {
  margin: 0 0 1rem;
  font-size: 0.9rem;
  color: #64748b;
}

.transcripcion-solo-lectura {
  gap: 0.6rem;
}

@media (max-width: 900px) {
  .visor-pdf {
    grid-template-columns: 1fr;
    height: auto;
  }

  .lista-miniaturas {
    flex-direction: row;
    overflow-x: auto;
  }

  .miniatura {
    width: 90px;
    flex-shrink: 0;
  }
}