/* =============================================================================
   roboRobin — sistema de diseño
   Paleta: rojo petirrojo, tinta carbón, blanco cálido, con acentos en azul
   huevo y dorado. Todo local: sin fuentes ni recursos externos.
   ============================================================================= */

:root {
  /* Color */
  --rr-red: #E23A1B;
  --rr-red-dark: #A72410;
  --rr-red-soft: #FFE9E3;
  --rr-red-glow: rgba(226, 58, 27, 0.28);

  --rr-ink: #14100E;
  --rr-ink-soft: #241C18;
  --rr-ink-line: rgba(255, 255, 255, 0.09);

  --rr-white: #FFFFFF;
  --rr-paper: #FAF7F4;
  --rr-paper-2: #F3EEE9;
  --rr-line: #E7DFD8;
  --rr-line-strong: #D6CAC0;

  --rr-text: #1B1512;
  --rr-text-muted: #6B5D55;
  --rr-text-faint: #9A8C83;

  --rr-gold: #F2A81B;
  --rr-gold-soft: #FFF3D6;
  --rr-blue: #2F8FA3;
  --rr-blue-soft: #E2F2F5;
  --rr-green: #2E8B57;
  --rr-green-soft: #E4F4EA;
  --rr-danger: #C62B14;
  --rr-danger-soft: #FCE6E1;

  /* Formas */
  --rr-r-xs: 10px;
  --rr-r-sm: 14px;
  --rr-r-md: 20px;
  --rr-r-lg: 28px;
  --rr-r-xl: 36px;
  --rr-r-pill: 999px;

  /* Sombras en capas: dan profundidad sin verse sucias */
  --rr-sh-xs: 0 1px 2px rgba(32, 20, 14, .06);
  --rr-sh-sm: 0 2px 4px rgba(32, 20, 14, .05), 0 6px 14px rgba(32, 20, 14, .06);
  --rr-sh-md: 0 4px 8px rgba(32, 20, 14, .06), 0 14px 30px rgba(32, 20, 14, .09);
  --rr-sh-lg: 0 8px 16px rgba(32, 20, 14, .08), 0 30px 60px rgba(32, 20, 14, .14);
  --rr-sh-glow: 0 8px 26px var(--rr-red-glow);

  /* Movimiento */
  --rr-ease: cubic-bezier(.22, .61, .36, 1);
  --rr-spring: cubic-bezier(.34, 1.4, .64, 1);
  --rr-fast: .16s;
  --rr-mid: .28s;
  --rr-slow: .5s;

  --rr-font: "Segoe UI Variable Display", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --rr-mono: "Cascadia Mono", "Consolas", "SF Mono", ui-monospace, monospace;

  --rr-sidebar-w: 252px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body { height: 100%; }

body {
  margin: 0;
  font-family: var(--rr-font);
  color: var(--rr-text);
  background: var(--rr-paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }

h1, h2, h3, h4 {
  margin: 0 0 .4em;
  font-weight: 750;
  letter-spacing: -0.022em;
  line-height: 1.12;
  color: var(--rr-ink);
}
p { line-height: 1.65; margin: 0 0 1em; }

::selection { background: var(--rr-red-soft); color: var(--rr-red-dark); }

:focus-visible {
  outline: 3px solid var(--rr-red);
  outline-offset: 2px;
  border-radius: 6px;
}

.container { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 24px; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase; color: var(--rr-red);
  margin-bottom: 14px;
}
.eyebrow::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--rr-red); animation: rr-blip 2.6s var(--rr-ease) infinite;
}

.text-muted { color: var(--rr-text-muted); }
.mt-0 { margin-top: 0; }
.center { text-align: center; }

/* =============================================================================
   Animaciones base
   ============================================================================= */

@keyframes rr-fade-up { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes rr-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes rr-pop-in { from { opacity: 0; transform: scale(.94) translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes rr-slide-right { from { opacity: 0; transform: translateX(-14px); } to { opacity: 1; transform: none; } }
@keyframes rr-shake { 0%,100% { transform: translateX(0); } 20% { transform: translateX(-7px); } 40% { transform: translateX(7px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(4px); } }
@keyframes rr-blip { 0%, 70%, 100% { transform: scale(1); opacity: 1; } 85% { transform: scale(1.6); opacity: .5; } }
@keyframes rr-spin { to { transform: rotate(360deg); } }
@keyframes rr-shimmer { from { background-position: -420px 0; } to { background-position: 420px 0; } }

/* Reveal al hacer scroll (lo activa api.js con IntersectionObserver) */
.rr-reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s var(--rr-ease), transform .7s var(--rr-ease); }
.rr-reveal.in { opacity: 1; transform: none; }
.rr-reveal-delay-1 { transition-delay: .09s; }
.rr-reveal-delay-2 { transition-delay: .18s; }
.rr-reveal-delay-3 { transition-delay: .27s; }

/* =============================================================================
   Mascota viva
   ============================================================================= */

/* Es el dibujo original (robin.png). Al ser una sola imagen, el movimiento
   va sobre el pajarito completo: respira siempre, flota donde se le pide con
   .rr-mascot-bob, se anima al pasar el mouse y brinca al hacer clic.
   Ojo: hover, bob y clic se pisan entre sí porque los tres animan transform;
   por eso cada estado cambia la animación completa en vez de sumarse. */
.rr-mascot {
  width: 88px; height: 88px;
  object-fit: contain;
  user-select: none; -webkit-user-drag: none;
  animation: rr-breathe 3.4s var(--rr-ease) infinite;
  will-change: transform;
}
.rr-mascot-sm { width: 38px; height: 38px; }

/* La galería rotatoria (ver rrMontarGaleria en mascot.js). Es un .rr-mascot
   más, así que hereda respiración, hover y brinco; lo único suyo es el
   parpadeo corto con el que se cambia de dibujo, para que el relevo no se
   vea como un corte seco. */
.rr-galeria { display: inline-block; line-height: 0; }
.rr-galeria-img { transition: opacity .18s var(--rr-ease); cursor: pointer; }
.rr-galeria-img.rr-galeria-fade { opacity: 0; }

/* Flota suave: se usa en el héroe, en las pantallas de acceso y al saludar */
.rr-mascot-bob { animation: rr-hover 3.4s var(--rr-ease) infinite; }

@keyframes rr-breathe {
  0%, 100% { transform: scale(1, 1); }
  50% { transform: scale(1.025, .982); }
}
@keyframes rr-hover {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-9px) rotate(-1.5deg); }
}

/* Al pasar el mouse: se espabila y se ladea */
.rr-mascot:hover { animation: rr-perk 1.1s var(--rr-ease) infinite; }
@keyframes rr-perk {
  0%, 100% { transform: translateY(0) rotate(0deg) scale(1.06); }
  30% { transform: translateY(-5px) rotate(-4deg) scale(1.08); }
  65% { transform: translateY(-2px) rotate(3deg) scale(1.07); }
}

/* Cómo acusa recibo Robin. Las dos clases las pone rrMascotMueve() en
   mascot.js, y las disparan tanto el clic como los avisos flotantes: el mismo
   movimiento para "me tocaste" y para "salió bien" no es pereza, es que son la
   misma alegría.

   Doble clase en las dos para ganarle al :hover, que tiene la misma
   especificidad y va antes. */
.rr-mascot.rr-mascot-cheer { animation: rr-cheer .72s var(--rr-spring); }
@keyframes rr-cheer {
  0% { transform: translateY(0) scale(1) rotate(0deg); }
  25% { transform: translateY(-16px) scale(1.06, .95) rotate(-7deg); }
  55% { transform: translateY(-4px) scale(.97, 1.04) rotate(6deg); }
  80% { transform: translateY(-8px) scale(1.02) rotate(-2deg); }
  100% { transform: translateY(0) scale(1) rotate(0deg); }
}

/* El fallo usa rr-shake, la MISMA sacudida que ya daba el botón equivocado y
   el error de un formulario: que el pajarito y el botón se muevan igual es lo
   que dice, sin texto, que están hablando de lo mismo. */
.rr-mascot.rr-robin-falla { animation: rr-shake .5s var(--rr-ease) 2; }

/* Un brinco que nadie pidió es justo lo que este ajuste viene a evitar. Con el
   clic se podía discutir —lo provoca quien lo toca—, pero desde que estos dos
   movimientos salen solos en cada "guardado" y cada "no se pudo", se quedan
   quietos: el dibujo y el color del aviso ya dicen cómo salió. */
@media (prefers-reduced-motion: reduce) {
  .rr-mascot.rr-mascot-cheer,
  .rr-mascot.rr-robin-falla { animation: none; }
}

/* Chispas del clic */
.rr-sparkle {
  position: fixed; z-index: 300; pointer-events: none;
  width: 8px; height: 8px; border-radius: 50%;
  animation: rr-sparkle .7s var(--rr-ease) forwards;
}
@keyframes rr-sparkle {
  0% { opacity: 1; transform: translate(-50%, -50%) scale(.4); }
  100% { opacity: 0; transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(1.1); }
}

/* Confeti: solo para los momentos que valen la pena (terminar la ultima tarea,
   crear la cuenta, inscribir la escuela). Lo suelta rrConfetti(). */
.rr-confetti {
  position: fixed; z-index: 300; pointer-events: none;
  width: 9px; height: 14px; border-radius: 2px;
  animation: rr-confetti 1.4s cubic-bezier(.2, .7, .3, 1) forwards;
}
@keyframes rr-confetti {
  0% { opacity: 1; transform: translate(-50%, -50%) rotate(0deg); }
  100% {
    opacity: 0;
    transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy) + 260px)) rotate(var(--rot));
  }
}

/* =============================================================================
   El resto del elenco: las poses
   -----------------------------------------------------------------------------
   Son el mismo Robin a color de siempre, dibujado en la situacion que toca y
   recortado sobre fondo transparente. robin.png sigue siendo el de la marca
   —el logo, el heroe, la cara del chat—; estas aparecen cuando la pantalla
   necesita contar algo: que no hay nada, que llego un aviso, que algo salio
   bien o mal.

   Cada pose tiene su propio movimiento, porque un fantasma no se mueve como un
   cartero. Todos parten de tamano libre: lo fija el contexto que los usa.
   ============================================================================= */

.rr-pose {
  width: auto; height: auto;
  max-width: 100%;
  /* A plena opacidad: el trazo a lapiz pedia bajarla para no gritar, pero
     estos dibujos son a color y a .92 se ven desteñidos sobre el papel. El
     unico que sigue traslucido es el fantasma, y por motivo propio. */
  opacity: 1;
  animation: none; /* cada pose define la suya abajo */
}
.rr-pose:hover { animation: none; transform: none; }

/* El fantasma flota y se desvanece de a poquito: no hay nada aqui. Es el unico
   que sigue traslucido —es un fantasma—, pero no tanto como cuando era un
   trazo negro: la sabana ya es gris palida de por si y por debajo de .8 se
   perdia contra la ficha blanca. */
.rr-pose-ghost { animation: rr-ghost 5s var(--rr-ease) infinite; }
@keyframes rr-ghost {
  0%, 100% { transform: translateY(0) rotate(-1deg); opacity: .84; }
  50% { transform: translateY(-12px) rotate(2deg); opacity: 1; }
}

/* El mensajero viene caminando con el bolso. */
.rr-pose-mailman { animation: rr-walk 2.6s var(--rr-ease) infinite; }
@keyframes rr-walk {
  0%, 100% { transform: translateY(0) rotate(-1.5deg); }
  50% { transform: translateY(-6px) rotate(1.5deg); }
}

/* Explicando: el cabeceo corto de quien esta hablando. */
.rr-pose-talking { animation: rr-talk 1.9s var(--rr-ease) infinite; }
@keyframes rr-talk {
  0%, 100% { transform: rotate(0deg) translateY(0); }
  30% { transform: rotate(-2.5deg) translateY(-3px); }
  60% { transform: rotate(1.5deg) translateY(-1px); }
}

/* Contento: brinca. */
.rr-pose-happy { animation: rr-hop 1.5s var(--rr-spring) infinite; }
@keyframes rr-hop {
  0%, 60%, 100% { transform: translateY(0) scale(1, 1); }
  25% { transform: translateY(-14px) scale(.97, 1.05); }
  45% { transform: translateY(0) scale(1.04, .96); }
}

/* Triste: se encoge y suspira. */
.rr-pose-sad { animation: rr-sigh 4.2s var(--rr-ease) infinite; }
@keyframes rr-sigh {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(3px) scale(.985); }
}

/* Esperando: solo respira. */
.rr-pose-idle { animation: rr-breathe 4s var(--rr-ease) infinite; }

/* Estrellado: la pantalla se rompio, y el todavia esta temblando. */
.rr-pose-error { animation: rr-crash 6s var(--rr-ease) infinite; }
@keyframes rr-crash {
  0%, 88%, 100% { transform: rotate(-2deg); }
  90% { transform: rotate(2deg) translateX(3px); }
  93% { transform: rotate(-3deg) translateX(-4px); }
  96% { transform: rotate(1deg) translateX(2px); }
}

/* Con el movimiento reducido del sistema, Robin no se queda tieso: solo
   respira más despacio. Ver la nota larga en landing.css. */
@media (prefers-reduced-motion: reduce) {
  .rr-mascot-bob { animation-duration: 9s; }
  .rr-pose-ghost { animation-duration: 10s; }
  .rr-pose-mailman { animation-duration: 6s; }
  .rr-pose-talking { animation-duration: 4.5s; }
  .rr-pose-happy { animation-duration: 4s; }
  .rr-pose-sad { animation-duration: 8s; }
  .rr-pose-idle { animation-duration: 8s; }
  .rr-pose-error { animation: none; }
}

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

.btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 2px solid transparent; border-radius: var(--rr-r-pill);
  padding: 13px 26px;
  font: inherit; font-size: 15px; font-weight: 700;
  cursor: pointer; white-space: nowrap;
  transition: transform var(--rr-fast) var(--rr-spring), box-shadow var(--rr-mid) var(--rr-ease),
              background var(--rr-fast) var(--rr-ease), color var(--rr-fast) var(--rr-ease),
              border-color var(--rr-fast) var(--rr-ease);
}
.btn:active { transform: translateY(1px) scale(.975); }

.btn-primary { background: var(--rr-red); color: #fff; box-shadow: var(--rr-sh-sm); }
.btn-primary:hover { background: var(--rr-red-dark); transform: translateY(-2px); box-shadow: var(--rr-sh-glow); }

.btn-dark { background: var(--rr-ink); color: #fff; }
.btn-dark:hover { background: var(--rr-ink-soft); transform: translateY(-2px); box-shadow: var(--rr-sh-md); }

.btn-outline { background: transparent; border-color: var(--rr-ink); color: var(--rr-ink); }
.btn-outline:hover { background: var(--rr-ink); color: #fff; transform: translateY(-2px); }

.btn-ghost { background: transparent; color: var(--rr-text); }
.btn-ghost:hover { background: var(--rr-paper-2); }

.btn-soft { background: var(--rr-red-soft); color: var(--rr-red-dark); }
.btn-soft:hover { background: var(--rr-red); color: #fff; }

.btn-danger { background: var(--rr-danger-soft); color: var(--rr-danger); }
.btn-danger:hover { background: var(--rr-danger); color: #fff; }

.btn-sm { padding: 8px 16px; font-size: 13.5px; }
.btn-lg { padding: 16px 34px; font-size: 16.5px; }
.btn-block { width: 100%; }
.btn[disabled] { opacity: .5; cursor: not-allowed; transform: none !important; box-shadow: none; }

/* =============================================================================
   Formularios
   ============================================================================= */

.field { margin-bottom: 18px; text-align: left; }
.field label { display: block; font-size: 13px; font-weight: 700; margin-bottom: 7px; color: var(--rr-ink); }
.field .hint { font-size: 12.5px; color: var(--rr-text-muted); margin-top: 6px; line-height: 1.5; }

input[type="text"], input[type="email"], input[type="password"], input[type="search"],
input[type="date"], input[type="number"], input[type="file"], select, textarea {
  width: 100%;
  padding: 12px 14px;
  font: inherit; font-size: 14.5px;
  color: var(--rr-text);
  background: var(--rr-white);
  border: 2px solid var(--rr-line);
  border-radius: var(--rr-r-xs);
  transition: border-color var(--rr-fast) var(--rr-ease), box-shadow var(--rr-fast) var(--rr-ease), background var(--rr-fast) var(--rr-ease);
}
textarea { resize: vertical; min-height: 96px; line-height: 1.55; }
input::placeholder, textarea::placeholder { color: var(--rr-text-faint); }

input:hover, select:hover, textarea:hover { border-color: var(--rr-line-strong); }
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--rr-red);
  box-shadow: 0 0 0 4px var(--rr-red-soft);
}

.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 560px) { .form-row { grid-template-columns: 1fr; } }

.form-error {
  background: var(--rr-danger-soft);
  color: #7A1F13;
  border-left: 4px solid var(--rr-danger);
  border-radius: var(--rr-r-xs);
  padding: 12px 14px;
  font-size: 13.5px; font-weight: 600;
  margin-bottom: 16px;
  display: none;
}
.form-error.visible { display: block; animation: rr-shake .45s var(--rr-ease); }

/* Tarjetas seleccionables (tipo de cuenta, nivel escolar) */
.rr-choice-grid { display: grid; gap: 12px; margin-bottom: 22px; }
.rr-choice-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.rr-choice-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
/* Cuatro caminos: personal, familia, con código y escuela. En dos filas de dos
   se leen mejor que en una tira de cuatro fichas estrechas. */
.rr-choice-grid.cols-2x2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 620px) {
  .rr-choice-grid.cols-2, .rr-choice-grid.cols-3, .rr-choice-grid.cols-2x2 { grid-template-columns: 1fr; }
}

.rr-choice {
  position: relative;
  border: 2px solid var(--rr-line);
  border-radius: var(--rr-r-md);
  padding: 22px 18px;
  background: var(--rr-white);
  cursor: pointer;
  text-align: left;
  font: inherit;
  transition: border-color var(--rr-fast) var(--rr-ease), transform var(--rr-mid) var(--rr-spring), box-shadow var(--rr-mid) var(--rr-ease);
  overflow: hidden;
}
.rr-choice::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(circle at 80% 0%, var(--rr-red-soft), transparent 60%);
  opacity: 0; transition: opacity var(--rr-mid) var(--rr-ease);
}
.rr-choice:hover { transform: translateY(-4px); box-shadow: var(--rr-sh-md); border-color: var(--rr-line-strong); }
.rr-choice:hover::after { opacity: .7; }
.rr-choice.selected { border-color: var(--rr-red); box-shadow: var(--rr-sh-glow); }
.rr-choice.selected::after { opacity: 1; }
.rr-choice > * { position: relative; z-index: 1; }
.rr-choice .ic {
  width: 46px; height: 46px; border-radius: var(--rr-r-sm);
  display: flex; align-items: center; justify-content: center;
  font-size: 23px; margin-bottom: 12px;
  background: var(--rr-paper-2);
  transition: transform var(--rr-mid) var(--rr-spring);
}
.rr-choice:hover .ic { transform: scale(1.08) rotate(-6deg); }
.rr-choice .t { font-size: 15px; font-weight: 800; color: var(--rr-ink); }
.rr-choice .d { font-size: 13px; color: var(--rr-text-muted); margin-top: 4px; line-height: 1.5; }

/* Cinco niveles, y la rejilla se reparte sola. Estaba fijada a cuatro
   columnas de cuando eran cuatro: al aparecer Universidad, se quedaba sola en
   una segunda fila, pegada abajo a la izquierda, y parecía añadida a última
   hora en vez de una opción más. */
.level-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
@media (max-width: 900px) { .level-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px) { .level-grid { grid-template-columns: repeat(2, 1fr); } }
/* Si el último se queda solo en su fila, se estira para ocuparla entera: una
   tarjeta suelta a media fila es lo que se veía mal. */
.level-card:last-child:nth-child(odd) { grid-column: 1 / -1; }
@media (min-width: 901px) { .level-card:last-child:nth-child(odd) { grid-column: auto; } }
.level-card {
  border: 2px solid var(--rr-line); border-radius: var(--rr-r-sm);
  padding: 14px 10px; text-align: center; cursor: pointer; background: var(--rr-white);
  transition: border-color var(--rr-fast) var(--rr-ease), transform var(--rr-mid) var(--rr-spring), box-shadow var(--rr-mid) var(--rr-ease);
}
.level-card:hover { transform: translateY(-4px); box-shadow: var(--rr-sh-sm); }
.level-card.selected { border-color: var(--rr-red); background: var(--rr-red-soft); }
.level-card .level-icon { font-size: 26px; margin-bottom: 7px; transition: transform var(--rr-mid) var(--rr-spring); }
.level-card:hover .level-icon { transform: scale(1.15) translateY(-2px); }
.level-card .level-name { font-size: 12.5px; font-weight: 700; }

/* Pasos del registro */
.rr-steps { display: flex; align-items: center; gap: 8px; justify-content: center; margin-bottom: 22px; }
.rr-steps span {
  height: 5px; width: 34px; border-radius: 99px; background: var(--rr-line);
  transition: background var(--rr-mid) var(--rr-ease), width var(--rr-mid) var(--rr-ease);
}
.rr-steps span.on { background: var(--rr-red); width: 46px; }
.rr-steps span.done { background: var(--rr-red-dark); }

.step-form { display: none; }
.step-form.active { display: block; animation: rr-fade-up .4s var(--rr-ease) both; }

/* =============================================================================
   Tarjetas, píldoras, etiquetas
   ============================================================================= */

.card {
  background: var(--rr-white);
  border: 1px solid var(--rr-line);
  border-radius: var(--rr-r-md);
  padding: 24px;
  box-shadow: var(--rr-sh-xs);
  transition: box-shadow var(--rr-mid) var(--rr-ease), transform var(--rr-mid) var(--rr-ease);
}

.pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 12px; border-radius: var(--rr-r-pill);
  font-size: 11.5px; font-weight: 800; letter-spacing: .01em;
  background: var(--rr-paper-2); color: var(--rr-text-muted);
}
.pill-admin { background: var(--rr-ink); color: #fff; }
.pill-teacher { background: var(--rr-blue-soft); color: #1D6373; }
.pill-student { background: var(--rr-red-soft); color: var(--rr-red-dark); }
.pill-personal { background: var(--rr-gold-soft); color: #8A5D00; }
.pill-active { background: var(--rr-green-soft); color: var(--rr-green); }
.pill-inactive { background: var(--rr-danger-soft); color: var(--rr-danger); }

/* Estado vacio: en vez de un emoji suelto, aparece Robin explicando por que
   no hay nada. Lo arma rrEmptyState() en mascot.js. */
.rr-empty {
  display: flex; flex-direction: column; align-items: center;
  text-align: center; padding: 46px 22px; color: var(--rr-text-muted);
  animation: rr-fade-up .5s var(--rr-ease) both;
}
.rr-empty-art {
  position: relative;
  width: 128px; height: 128px;
  display: grid; place-items: center;
  margin-bottom: 14px;
}
/* La sombrita en el piso ancla al pajarito para que no parezca recortado. */
.rr-empty-art::after {
  content: ""; position: absolute; left: 50%; bottom: -10px;
  width: 74px; height: 9px; margin-left: -37px; border-radius: 50%;
  background: rgba(32, 20, 14, .1); filter: blur(4px);
  animation: rr-shadow 5s var(--rr-ease) infinite;
}
.rr-empty-art .rr-pose { max-height: 128px; width: auto; }
@keyframes rr-shadow {
  0%, 100% { transform: scaleX(1); opacity: .55; }
  50% { transform: scaleX(.8); opacity: .3; }
}
.rr-empty h4 {
  margin: 4px 0 6px; font-size: 16.5px; font-weight: 780;
  color: var(--rr-text);
}
.rr-empty p { margin: 0; font-size: 13.8px; max-width: 42ch; line-height: 1.6; }
.rr-empty .btn, .rr-empty .rb-btn { margin-top: 16px; }
/* "Robin dice": el pajarito y un globo de dialogo. La cola del globo se dibuja
   con un cuadrado girado para que no haga falta ninguna imagen extra. */
.rr-says {
  display: flex; align-items: center; gap: 16px;
  margin: 4px 0 18px;
}
.rr-says-art { flex: 0 0 84px; display: grid; place-items: center; }
.rr-says-art .rr-pose { width: auto; height: auto; max-height: 84px; }
/* Texto y ya: ni fondo, ni borde, ni pico. Igual que en la portada. */
.rr-says-bubble { flex: 1; min-width: 0; }
.rr-says-bubble p { margin: 0; font-size: 15.5px; line-height: 1.6; color: var(--rr-text); }
.rr-says-bubble p strong { color: var(--rr-ink); font-weight: 750; }
.rr-says-bubble .btn { margin-top: 12px; }
@media (max-width: 560px) {
  .rr-says { gap: 12px; }
  .rr-says-art { flex-basis: 62px; }
  .rr-says-art .rr-pose { max-height: 62px; }
}

/* Robin pequenito dentro de un aviso flotante o una fila. */
.rr-mini-robin {
  width: 34px; height: 34px; object-fit: contain;
  flex: 0 0 34px; opacity: .9;
}

.rr-skeleton {
  height: 14px; border-radius: 7px;
  background: linear-gradient(90deg, var(--rr-paper-2) 25%, #EDE6E0 37%, var(--rr-paper-2) 63%);
  background-size: 420px 100%;
  animation: rr-shimmer 1.3s linear infinite;
}

/* =============================================================================
   Navegación (páginas públicas)
   ============================================================================= */

.rr-nav {
  position: sticky; top: 0; z-index: 40;
  background: rgba(250, 247, 244, .82);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--rr-line);
}
.rr-nav-inner {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 12px 24px; max-width: 1180px; margin: 0 auto;
}
.rr-brand { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 19px; color: var(--rr-ink); letter-spacing: -.02em; }
.rr-brand .rr-brand-mark { display: inline-flex; width: 38px; height: 38px; }
.rr-brand .rr-brand-mark .rr-mascot { width: 38px; height: 38px; }
.rr-nav-links { display: flex; align-items: center; gap: 8px; }

/* =============================================================================
   Portada
   ============================================================================= */

.rr-hero {
  padding: 76px 0 56px;
  display: grid; grid-template-columns: 1.05fr .95fr; gap: 40px; align-items: center;
}
@media (max-width: 900px) { .rr-hero { grid-template-columns: 1fr; padding-top: 40px; } }
.rr-hero h1 { font-size: clamp(34px, 5.2vw, 56px); }
.rr-hero h1 .rr-hl {
  background: linear-gradient(120deg, var(--rr-red), #F2703F);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.rr-hero .lead { font-size: 18px; color: var(--rr-text-muted); max-width: 520px; }
.rr-hero-actions { display: flex; gap: 12px; margin-top: 28px; flex-wrap: wrap; }

.rr-hero-art { display: flex; justify-content: center; position: relative; }
.rr-hero-art .rr-mascot { width: min(300px, 62vw); height: min(300px, 62vw); }
/* El halo va detrás del pájaro: sin el z-index, al estar posicionado se
   pintaría encima y lo dejaría desteñido. */
.rr-hero-art::before {
  content: ""; position: absolute; inset: 8% 12%; z-index: 0;
  border-radius: 50%;
  background: radial-gradient(circle, var(--rr-red-soft) 0%, transparent 68%);
  animation: rr-halo 6s var(--rr-ease) infinite;
}
.rr-hero-art > * { position: relative; z-index: 1; }
@keyframes rr-halo { 0%, 100% { transform: scale(1); opacity: .85; } 50% { transform: scale(1.09); opacity: .55; } }

.rr-stat-strip { display: flex; gap: 34px; margin-top: 38px; flex-wrap: wrap; }
.rr-stat-strip div strong { display: block; font-size: 25px; color: var(--rr-ink); }
.rr-stat-strip div span { font-size: 12px; color: var(--rr-text-muted); text-transform: uppercase; letter-spacing: .07em; }

/* Los dos caminos: persona / escuela */
.rr-paths { padding: 20px 0 70px; }
.rr-path-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-top: 34px; }
@media (max-width: 860px) { .rr-path-grid { grid-template-columns: 1fr; } }
.rr-path {
  position: relative; overflow: hidden;
  border-radius: var(--rr-r-lg); padding: 32px;
  border: 1px solid var(--rr-line); background: var(--rr-white);
  transition: transform var(--rr-mid) var(--rr-ease), box-shadow var(--rr-mid) var(--rr-ease);
}
.rr-path:hover { transform: translateY(-6px); box-shadow: var(--rr-sh-lg); }
.rr-path .rr-path-ic { font-size: 30px; margin-bottom: 14px; }
.rr-path h3 { font-size: 22px; }
.rr-path ul { margin: 16px 0 22px; padding-left: 20px; color: var(--rr-text-muted); font-size: 14.5px; }
.rr-path li { margin-bottom: 8px; }
.rr-path.dark { background: var(--rr-ink); color: #fff; border-color: transparent; }
.rr-path.dark h3 { color: #fff; }
.rr-path.dark ul, .rr-path.dark p { color: rgba(255, 255, 255, .72); }
.rr-path.dark::before {
  content: ""; position: absolute; width: 300px; height: 300px; right: -110px; top: -120px;
  background: radial-gradient(circle, rgba(226, 58, 27, .55), transparent 65%);
}

/* Camino de crecimiento por niveles */
.rr-growth { padding: 50px 0 70px; border-top: 1px solid var(--rr-line); }
.rr-growth-track { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 40px; }
.rr-growth-track::before {
  content: ""; position: absolute; top: 34px; left: 6%; right: 6%; height: 3px;
  background: repeating-linear-gradient(90deg, var(--rr-line-strong) 0 10px, transparent 10px 18px);
  z-index: 0;
}
@media (max-width: 800px) {
  .rr-growth-track { grid-template-columns: repeat(2, 1fr); }
  .rr-growth-track::before { display: none; }
}
.rr-growth-step { position: relative; z-index: 1; text-align: center; }
.rr-growth-badge {
  width: 70px; height: 70px; border-radius: 50%;
  background: var(--rr-white); border: 3px solid var(--rr-ink);
  display: flex; align-items: center; justify-content: center;
  font-size: 28px; margin: 0 auto 14px;
  box-shadow: var(--rr-sh-sm);
  transition: transform var(--rr-mid) var(--rr-spring), border-color var(--rr-fast) var(--rr-ease);
}
.rr-growth-step:hover .rr-growth-badge { transform: translateY(-6px) scale(1.07); border-color: var(--rr-red); }
.rr-growth-step h4 { font-size: 15px; margin-bottom: 4px; }
.rr-growth-step p { font-size: 13px; color: var(--rr-text-muted); margin: 0; }

/* Tarjetas por rol */
.rr-features { padding: 30px 0 80px; }
.rr-feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 36px; }
@media (max-width: 860px) { .rr-feature-grid { grid-template-columns: 1fr; } }
.rr-feature-card {
  background: var(--rr-white); border-radius: var(--rr-r-lg);
  padding: 28px; border: 1px solid var(--rr-line);
  transition: transform var(--rr-mid) var(--rr-ease), box-shadow var(--rr-mid) var(--rr-ease);
}
.rr-feature-card:hover { transform: translateY(-6px); box-shadow: var(--rr-sh-md); }
.rr-feature-icon {
  width: 52px; height: 52px; border-radius: var(--rr-r-sm);
  display: flex; align-items: center; justify-content: center;
  font-size: 23px; margin-bottom: 16px;
  transition: transform var(--rr-mid) var(--rr-spring);
}
.rr-feature-card:hover .rr-feature-icon { transform: rotate(-8deg) scale(1.08); }
.rr-feature-card ul { margin: 14px 0 0; padding-left: 18px; color: var(--rr-text-muted); font-size: 14px; }
.rr-feature-card li { margin-bottom: 7px; }
.icon-red { background: var(--rr-red-soft); color: var(--rr-red-dark); }
.icon-blue { background: var(--rr-blue-soft); color: #1D6373; }
.icon-gold { background: var(--rr-gold-soft); color: #8A5D00; }
.icon-black { background: var(--rr-ink); color: #fff; }

.rr-cta-band {
  position: relative; overflow: hidden;
  background: var(--rr-ink); border-radius: var(--rr-r-xl);
  padding: 56px 40px; text-align: center; margin: 0 0 80px; color: #fff;
}
.rr-cta-band h2 { color: #fff; }
.rr-cta-band p { color: rgba(255, 255, 255, .7); }
.rr-cta-band::before {
  content: ""; position: absolute; width: 420px; height: 420px; left: 50%; top: -60%;
  transform: translateX(-50%);
  background: radial-gradient(circle, rgba(226, 58, 27, .38), transparent 62%);
}
.rr-cta-band > * { position: relative; }

.rr-footer { border-top: 1px solid var(--rr-line); padding: 28px 0; text-align: center; color: var(--rr-text-muted); font-size: 13px; }

/* =============================================================================
   Entrar / crear cuenta
   ============================================================================= */

.rr-auth-wrap {
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  padding: 40px 20px;
  background:
    radial-gradient(circle at 12% 8%, var(--rr-red-soft) 0, transparent 42%),
    radial-gradient(circle at 88% 92%, var(--rr-blue-soft) 0, transparent 42%),
    var(--rr-paper);
}
.rr-auth-card {
  width: 100%; max-width: 470px;
  background: var(--rr-white);
  border-radius: var(--rr-r-xl);
  padding: 40px 36px;
  box-shadow: var(--rr-sh-lg);
  animation: rr-pop-in .45s var(--rr-spring) both;
}
.rr-auth-card.wide { max-width: 660px; }
.rr-auth-head { text-align: center; margin-bottom: 24px; }
.rr-auth-head .rr-mascot { width: 76px; height: 76px; margin: 0 auto 10px; }
.rr-auth-head .rr-pose { width: auto; height: auto; max-height: 122px; margin: 0 auto 4px; }
.rr-auth-head h2 { font-size: 25px; }
.rr-auth-switch { text-align: center; margin: 18px 0 0; font-size: 14px; color: var(--rr-text-muted); }
.rr-auth-switch a { color: var(--rr-red); font-weight: 700; }
.rr-auth-switch a:hover { text-decoration: underline; }

/* Tarjeta de códigos que ve el director al inscribir su escuela */
.rr-code-reveal { display: grid; gap: 12px; margin: 20px 0; }
.rr-code-box {
  border: 2px dashed var(--rr-line-strong); border-radius: var(--rr-r-sm);
  padding: 16px 18px; background: var(--rr-paper);
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  animation: rr-pop-in .4s var(--rr-spring) both;
}
.rr-code-box .lab { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; color: var(--rr-text-muted); }
.rr-code-box .val { font-family: var(--rr-mono); font-size: 23px; font-weight: 700; letter-spacing: .08em; color: var(--rr-red-dark); }
.rr-code-box.teacher .val { color: #1D6373; }

/* =============================================================================
   Estructura de los paneles
   ============================================================================= */

.rr-app { display: flex; min-height: 100vh; }

.rr-sidebar {
  width: var(--rr-sidebar-w); flex-shrink: 0;
  position: sticky; top: 0; height: 100vh; overflow: hidden;
  background: var(--rr-ink); color: #fff;
  padding: 18px 12px 14px;
  display: flex; flex-direction: column; gap: 2px;
}
.rr-side-head { display: flex; align-items: center; justify-content: space-between; padding: 2px 6px 14px; }
.rr-sidebar .rr-brand { color: #fff; padding: 0; font-size: 20px; letter-spacing: -.025em; }
.rr-sidebar .rr-brand:hover { color: #fff; opacity: .8; }
.rr-side-close {
  display: none; background: none; border: none; color: rgba(255, 255, 255, .6);
  font-size: 26px; line-height: 1; cursor: pointer; padding: 0 4px;
}
.rr-side-close:hover { color: #fff; }

/* El botón de conversación nueva va antes que el menú: es lo que más se pulsa. */
.rr-new-chat {
  display: flex; align-items: center; gap: 10px; width: 100%;
  background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .13);
  color: #fff; font-family: inherit; font-size: 14px; font-weight: 700;
  padding: 11px 14px; border-radius: var(--rr-r-xs); cursor: pointer; margin-bottom: 10px;
  transition: background var(--rr-fast) var(--rr-ease), border-color var(--rr-fast) var(--rr-ease), transform var(--rr-fast) var(--rr-ease);
}
.rr-new-chat:hover { background: var(--rr-red); border-color: var(--rr-red); transform: translateY(-1px); }
.rr-new-chat .ic { font-size: 13px; }

.rr-side-nav { display: flex; flex-direction: column; gap: 2px; flex-shrink: 0; }

.rr-side-label {
  font-size: 10.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  color: rgba(255, 255, 255, .34); padding: 14px 14px 6px;
}
.rr-side-label-row { display: flex; align-items: center; justify-content: space-between; }
.rr-side-mini {
  background: none; border: none; color: rgba(255, 255, 255, .34);
  cursor: pointer; font-size: 12px; padding: 2px 4px; border-radius: 6px;
}
.rr-side-mini:hover { color: #fff; background: rgba(255, 255, 255, .1); }

.rr-side-link {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px; border-radius: var(--rr-r-xs);
  color: rgba(255, 255, 255, .72); font-weight: 600; font-size: 14.5px;
  cursor: pointer; position: relative;
  transition: background var(--rr-fast) var(--rr-ease), color var(--rr-fast) var(--rr-ease), transform var(--rr-fast) var(--rr-ease);
  animation: rr-slide-right .35s var(--rr-ease) both;
}
.rr-side-link .ic { width: 20px; text-align: center; font-size: 15px; }
.rr-side-link:hover { background: rgba(255, 255, 255, .08); color: #fff; transform: translateX(2px); }
.rr-side-link.active { background: var(--rr-red); color: #fff; box-shadow: var(--rr-sh-glow); }
.rr-side-link .badge {
  margin-left: auto; background: var(--rr-red); color: #fff;
  font-size: 11px; font-weight: 800; padding: 1px 7px; border-radius: 99px;
}
.rr-side-link.active .badge { background: rgba(0, 0, 0, .3); }
.rr-side-spacer { flex: 1; }

/* El piso de en medio: crece, se encoge y tiene su propio scroll, para que
   los botones de arriba y los de abajo no se muevan nunca de sitio. */
.rr-side-chats { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.rr-chat-rail { flex: 1; min-height: 0; overflow-y: auto; padding-right: 2px; }
.rr-chat-rail::-webkit-scrollbar { width: 6px; }
.rr-chat-rail::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .14); border-radius: 99px; }
.rr-rail-empty { padding: 10px 14px; font-size: 12.5px; color: rgba(255, 255, 255, .34); line-height: 1.5; }
.rr-rail-group {
  font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: rgba(255, 255, 255, .26); padding: 12px 14px 5px;
}
.rr-rail-item {
  display: flex; align-items: center; gap: 9px;
  padding: 8px 10px 8px 12px; border-radius: 9px; cursor: pointer;
  color: rgba(255, 255, 255, .66); font-size: 13.5px;
  transition: background var(--rr-fast) var(--rr-ease), color var(--rr-fast) var(--rr-ease);
}
.rr-rail-item:hover { background: rgba(255, 255, 255, .07); color: #fff; }
.rr-rail-item.active { background: rgba(255, 255, 255, .13); color: #fff; }
.rr-rail-ic { font-size: 12px; opacity: .7; flex-shrink: 0; }
.rr-rail-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rr-rail-del {
  background: none; border: none; color: rgba(255, 255, 255, .4);
  cursor: pointer; font-size: 12px; padding: 2px 4px; border-radius: 5px;
  opacity: 0; transition: opacity var(--rr-fast) var(--rr-ease);
}
.rr-rail-item:hover .rr-rail-del { opacity: 1; }
.rr-rail-del:hover { background: var(--rr-danger); color: #fff; }

.rr-side-foot { border-top: 1px solid var(--rr-ink-line); padding-top: 10px; margin-top: 8px; flex-shrink: 0; }
.rr-side-user-mini { display: flex; flex-shrink: 0; }
.rr-side-user-text { min-width: 0; display: block; line-height: 1.25; }
.rr-side-user-text strong { display: block; color: #fff; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rr-side-user-text small { display: block; font-size: 11.5px; color: rgba(255, 255, 255, .45); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rr-side-user { display: flex; align-items: center; gap: 10px; padding: 8px; font-size: 12.5px; color: rgba(255, 255, 255, .6); }
.rr-side-user strong { display: block; color: #fff; font-size: 13.5px; }
.rr-side-user span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }

/* Cuánto le queda hoy de Robin. Se ve siempre, no solo cuando se acaba. */
.rr-usage {
  display: block; padding: 9px 12px; margin-bottom: 8px;
  background: rgba(255, 255, 255, .05); border-radius: var(--rr-r-xs);
  font-size: 12px; cursor: default;
  transition: background var(--rr-fast) var(--rr-ease);
}
.rr-usage[role="button"] { cursor: pointer; }
.rr-usage[role="button"]:hover { background: rgba(255, 255, 255, .11); }
.rr-usage-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.rr-usage-top strong { color: #fff; font-size: 12.5px; font-weight: 700; }
.rr-usage-top em {
  font-style: normal; font-size: 10px; font-weight: 800; letter-spacing: .06em;
  text-transform: uppercase; color: rgba(255, 255, 255, .4);
}
.rr-usage-bar { display: block; height: 4px; margin-top: 7px; background: rgba(255, 255, 255, .12); border-radius: 99px; overflow: hidden; }
.rr-usage-bar i { display: block; height: 100%; background: var(--rr-blue); border-radius: 99px; transition: width var(--rr-slow) var(--rr-ease); }
.rr-usage.low .rr-usage-bar i { background: var(--rr-gold); }
.rr-usage.low .rr-usage-top strong { color: var(--rr-gold); }
.rr-usage-max { background: linear-gradient(135deg, rgba(242, 168, 27, .22), rgba(226, 58, 27, .18)); }
.rr-usage-max .rr-usage-top em { color: var(--rr-gold); }

.rr-sidebar-scrim { display: none; }
@media (max-width: 860px) {
  .rr-app { display: block; }
  .rr-sidebar {
    position: fixed; inset: 0 auto 0 0; width: 270px; z-index: 50;
    transform: translateX(-105%); transition: transform var(--rr-mid) var(--rr-ease);
  }
  .rr-sidebar.open { transform: none; box-shadow: var(--rr-sh-lg); }
  .rr-sidebar-scrim { display: block; position: fixed; inset: 0; background: rgba(20, 16, 14, .5); backdrop-filter: blur(2px); z-index: 45; opacity: 0; pointer-events: none; transition: opacity var(--rr-mid) var(--rr-ease); }
  .rr-sidebar-scrim.open { opacity: 1; pointer-events: auto; }
  .rr-menu-btn { display: inline-flex !important; }
  .rr-side-close { display: block; }
  .rr-main { padding: 20px 20px 70px; }
}

.rr-main { flex: 1; min-width: 0; padding: 30px 40px 80px; }
.rr-topbar { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 28px; flex-wrap: wrap; }
.rr-topbar h1 { font-size: 28px; margin: 0; animation: rr-fade-up .4s var(--rr-ease) both; }
.rr-topbar .sub { color: var(--rr-text-muted); font-size: 14px; margin-top: 5px; animation: rr-fade-up .5s var(--rr-ease) both; }
.rr-menu-btn {
  display: none; align-items: center; justify-content: center;
  background: var(--rr-ink); color: #fff; border: none;
  border-radius: var(--rr-r-xs); padding: 9px 13px; font-size: 16px; cursor: pointer; margin-bottom: 10px;
}

/* =============================================================================
   Modo enfocado — /-/robinAI y /-/minijuegos
   =============================================================================
   Una sola pantalla y ninguna puerta. La barra lateral ni siquiera se dibuja
   (ver rrRenderShell en sidebar.js), así que aquí abajo no hay nada que
   esconder: solo queda recolocar lo que daba por hecho que la barra estaba.

   Lo que cambia:
     · el panel ocupa el ancho entero, sin el hueco de la barra
     · el botón de menú no existe — no hay menú que abrir
     · la cabecera es una línea, no un saludo con subtítulo largo
     · el chat se lleva el alto de la pantalla, que es la única cosa que hay
   ============================================================================= */

body.rr-enfocado .rr-app { display: block; }
body.rr-enfocado .rr-main { padding: 22px 28px 28px; }
body.rr-enfocado .rr-menu-btn { display: none !important; }

/* El saludo del panel sobra: aquí no se entra a un panel, se entra a una
   cosa. Y además no es nuestro — personal.js lo reescribe en cuanto carga la
   sesión, así que ni se intenta: se esconde y se pone el nuestro encima. */
body.rr-enfocado .rr-topbar { display: none; }

.rr-enfoque-top {
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  padding-bottom: 14px; margin-bottom: 16px;
  border-bottom: 1px solid var(--rr-line);
}
.rr-enfoque-top strong { font-size: 19px; color: var(--rr-ink); letter-spacing: -.01em; }
.rr-enfoque-top small { font-size: 13.5px; color: var(--rr-text-muted); }

/* Con una sola sección en pantalla, el chat se estira hasta abajo en vez de
   dejar un pasillo blanco debajo del compositor. */
body.rr-enfoque-robinai .rr-section-full,
body.rr-enfoque-robinai .rr-section-full .rr-chat {
  height: calc(100vh - 128px); max-height: none;
}

/* En los minijuegos, la ventana de jugar tapa la pantalla entera igual que
   siempre; lo único que sobra es el hueco donde iba el botón de salir, que
   ahora es un icono mudo para que el título siga centrado. */
.rr-arcade-x-mudo {
  display: inline-flex; align-items: center; justify-content: center;
  opacity: .45; pointer-events: none; user-select: none;
}

@media (max-width: 720px) {
  body.rr-enfocado .rr-main { padding: 16px 16px 20px; }
  body.rr-enfoque-robinai .rr-section-full,
  body.rr-enfoque-robinai .rr-section-full .rr-chat { height: calc(100vh - 106px); }
}

.rr-avatar { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; flex: 0 0 34px; }
.rr-avatar-placeholder { display: inline-flex; align-items: center; justify-content: center; background: var(--rr-red-soft); color: var(--rr-red-dark); }

.rr-section { animation: rr-fade-up .35s var(--rr-ease) both; }
.rr-section-title { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; flex-wrap: wrap; gap: 10px; }
.rr-section-title h2 { font-size: 20px; margin: 0; }
.rr-section-lead { color: var(--rr-text-muted); font-size: 14px; margin: -6px 0 18px; max-width: 640px; }

.rr-stat-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 28px; }
@media (max-width: 900px) { .rr-stat-cards { grid-template-columns: repeat(2, 1fr); } }
.rr-stat-card { padding: 20px; animation: rr-pop-in .4s var(--rr-ease) both; }
.rr-stat-card:nth-child(2) { animation-delay: .05s; }
.rr-stat-card:nth-child(3) { animation-delay: .1s; }
.rr-stat-card:nth-child(4) { animation-delay: .15s; }
.rr-stat-card:nth-child(5) { animation-delay: .2s; }
.rr-stat-card:hover { transform: translateY(-3px); box-shadow: var(--rr-sh-md); }
.rr-stat-card .n { font-size: 30px; font-weight: 800; color: var(--rr-ink); letter-spacing: -.03em; }
.rr-stat-card .l { font-size: 13px; color: var(--rr-text-muted); font-weight: 600; margin-top: 3px; }

.rr-toolbar { display: flex; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; align-items: center; }
.rr-toolbar select, .rr-toolbar input { width: auto; min-width: 160px; }

/* Tabla */
.rr-table-wrap { overflow-x: auto; border: 1px solid var(--rr-line); border-radius: var(--rr-r-md); background: var(--rr-white); box-shadow: var(--rr-sh-xs); }
table.rr-table { width: 100%; border-collapse: collapse; min-width: 760px; }
table.rr-table th {
  text-align: left; font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--rr-text-muted); padding: 14px 16px; background: var(--rr-paper);
  border-bottom: 2px solid var(--rr-line); position: sticky; top: 0;
}
table.rr-table td { padding: 13px 16px; border-bottom: 1px solid var(--rr-line); font-size: 14px; vertical-align: middle; }
table.rr-table tr:last-child td { border-bottom: none; }
table.rr-table tbody tr { animation: rr-fade-in .3s var(--rr-ease) both; transition: background var(--rr-fast) var(--rr-ease); }
table.rr-table tbody tr:hover td { background: rgba(226, 58, 27, .04); }
.rr-row-actions { display: flex; gap: 6px; }

/* Avisos */
.rr-announce { padding: 18px 20px; margin-bottom: 14px; border-left: 4px solid var(--rr-red); animation: rr-fade-up .35s var(--rr-ease) both; }
.rr-announce:hover { box-shadow: var(--rr-sh-sm); }
.rr-announce h3 { font-size: 16.5px; margin-bottom: 4px; }
.rr-announce .meta { font-size: 12px; color: var(--rr-text-muted); margin-bottom: 8px; }
.rr-announce p { margin: 0 0 4px; font-size: 14.5px; }

/* Clases y notificaciones */
.rr-form-card { max-width: 760px; margin-bottom: 20px; }
.rr-class-card { margin-bottom: 14px; border-left: 4px solid var(--rr-blue); animation: rr-fade-up .35s var(--rr-ease) both; }
.rr-class-card h3 { margin-bottom: 6px; font-size: 17px; }
.rr-class-card p { margin-bottom: 10px; color: var(--rr-text-muted); font-size: 14px; }
.class-code { font-family: var(--rr-mono); color: var(--rr-red-dark); font-weight: 700; }
.invite-form { min-width: 250px; }
.invite-form label { display: block; font-size: 12px; font-weight: 700; margin-bottom: 5px; }
.invite-form div { display: flex; gap: 6px; }
.invite-form input { min-width: 0; }
.rr-notification { margin-bottom: 12px; border-left: 4px solid var(--rr-line-strong); animation: rr-fade-up .3s var(--rr-ease) both; }
.rr-notification.unread { border-left-color: var(--rr-red); background: linear-gradient(90deg, var(--rr-red-soft), var(--rr-white) 55%); }
.rr-notification p { margin: 6px 0; font-size: 14px; }
.rr-notification small { display: block; color: var(--rr-text-muted); margin-bottom: 10px; }
/* El mensajero de una notificación sin leer. Va flotando en la esquina y no en
   el flujo del texto: así no empuja el título ni cambia el alto de la ficha
   cuando se marca como leída y el pajarito desaparece. */
.rr-notification { position: relative; }
.rr-notification .rr-note-bird {
  position: absolute; top: 10px; right: 14px;
  width: auto; height: auto; max-height: 56px;
  pointer-events: none;
}
.rr-notification.unread strong { padding-right: 62px; display: inline-block; }
@media (max-width: 560px) {
  .rr-notification .rr-note-bird { max-height: 42px; top: 8px; right: 10px; }
  .rr-notification.unread strong { padding-right: 48px; }
}

/* Códigos de la escuela (panel del director) */
.rr-code-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-bottom: 24px; }
@media (max-width: 760px) { .rr-code-cards { grid-template-columns: 1fr; } }
.rr-code-card {
  position: relative; overflow: hidden;
  border-radius: var(--rr-r-md); padding: 24px;
  border: 1px solid var(--rr-line); background: var(--rr-white);
  box-shadow: var(--rr-sh-xs);
  animation: rr-pop-in .4s var(--rr-ease) both;
}
.rr-code-card::before {
  content: ""; position: absolute; inset: 0 auto 0 0; width: 5px;
  background: var(--rr-red);
}
.rr-code-card.teacher::before { background: var(--rr-blue); }
.rr-code-card .who { font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--rr-text-muted); }
.rr-code-card .code {
  font-family: var(--rr-mono); font-size: 34px; font-weight: 700; letter-spacing: .1em;
  color: var(--rr-ink); margin: 10px 0 6px; user-select: all;
}
.rr-code-card .note { font-size: 13px; color: var(--rr-text-muted); margin-bottom: 16px; line-height: 1.55; }
.rr-code-card .acts { display: flex; gap: 8px; flex-wrap: wrap; }
.rr-code-flash { animation: rr-code-flash .8s var(--rr-ease); }
@keyframes rr-code-flash {
  0% { background: var(--rr-gold-soft); transform: scale(1.02); }
  100% { background: transparent; transform: none; }
}

/* Modal */
.rr-modal-backdrop {
  position: fixed; inset: 0; background: rgba(20, 16, 14, .48);
  backdrop-filter: blur(3px);
  display: none; align-items: center; justify-content: center; z-index: 100; padding: 20px;
  animation: rr-fade-in .2s var(--rr-ease);
}
.rr-modal-backdrop.open { display: flex; }
.rr-modal {
  background: var(--rr-white); border-radius: var(--rr-r-lg);
  max-width: 500px; width: 100%; padding: 28px; max-height: 90vh; overflow-y: auto;
  box-shadow: var(--rr-sh-lg);
  animation: rr-pop-in .3s var(--rr-spring);
}
.rr-modal h3 { margin-bottom: 18px; }
.rr-modal-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 20px; }

/* Avisos flotantes */
.rr-toast-stack { position: fixed; top: 20px; right: 20px; z-index: 200; display: flex; flex-direction: column; gap: 10px; }
.rr-toast {
  background: var(--rr-ink); color: #fff;
  padding: 13px 18px; border-radius: var(--rr-r-xs);
  font-size: 13.5px; font-weight: 600; box-shadow: var(--rr-sh-md);
  animation: rr-toast-in .35s var(--rr-spring) both;
  max-width: 330px;
  border-left: 4px solid var(--rr-red);
}
.rr-toast.success { border-left-color: #4ADE80; }
.rr-toast.error { border-left-color: #F87171; }
.rr-toast.aviso { border-left-color: var(--rr-gold); }
/* El aviso lleva a Robin al lado del texto, y en la pose que le toque al tono
   (ver rrToast en api.js). La caja es alta y angosta porque el pajarito de
   cuerpo entero lo es: en un cuadrado de 34 px se quedaba del tamano de una
   moneda. */
.rr-toast { display: flex; align-items: center; gap: 11px; }
.rr-toast .rr-mini-robin {
  width: 34px; height: 46px;
  flex: 0 0 34px;
  object-fit: contain; object-position: bottom;
}
/* Aqui no se le pone una animacion continua al pajarito: cada pose ya trae la
   suya —el contento brinca, el triste suspira— y una regla generica se las
   comia a todas. Lo que si lleva, cuando el aviso es de exito o de error, es
   un movimiento de UNA vez encima de esa: se lo pone rrToast() con
   rrMascotMueve(), y por eso son dos clases y no una. */
@keyframes rr-toast-in { from { opacity: 0; transform: translateX(40px) scale(.95); } to { opacity: 1; transform: none; } }

/* =============================================================================
   Espacio de trabajo personal (chat + tareas)
   ============================================================================= */

.rr-work { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 22px; align-items: start; }
@media (max-width: 1100px) { .rr-work { grid-template-columns: 1fr; } }

.rr-chat {
  display: flex; flex-direction: column;
  height: calc(100vh - 190px); min-height: 460px;
  background: transparent; border: none; border-radius: 0; box-shadow: none;
  overflow: hidden;
}
.rr-chat-head {
  display: flex; align-items: baseline; gap: 12px;
  padding: 0 0 14px; border-bottom: 1px solid var(--rr-line);
  background: none;
}
/* Robin, al lado de su nombre. Lo mete rrCreateChat() en chat.js y es una
   galeria, asi que de aqui solo sale el tamano: el movimiento y los cambios de
   dibujo ya los trae puestos (ver mascot.js).

   align-self porque la cabecera alinea por baseline —le va bien al texto— y un
   dibujo de cuerpo entero colgado de la linea base se sale por arriba.

   El alto es mayor que el ancho porque Robin es un pajarito de pie: en un
   cuadrado se queda del tamano de una moneda en medio de un hueco vacio. */
.rr-chat-bird {
  flex: 0 0 auto; align-self: center; line-height: 0;
  width: 34px; height: 44px;
}
.rr-chat-bird img {
  width: 100%; height: 100%;
  object-fit: contain; object-position: bottom;
}

.rr-chat-head strong { display: block; font-size: 15px; }
.rr-chat-head span { font-size: 12.5px; color: var(--rr-text-muted); }
.rr-chat-mode {
  margin-left: auto; flex: 0 0 auto; font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  padding: 5px 11px; border-radius: 99px; background: var(--rr-green-soft); color: var(--rr-green);
}
.rr-chat-mode.live { background: var(--rr-red-soft); color: var(--rr-red-dark); }

.rr-chat-body {
  flex: 1; overflow-y: auto; padding: 26px 0 10px;
  display: flex; flex-direction: column; gap: 22px; scroll-behavior: smooth;
}
/* Todo lo que va dentro de la conversación comparte la misma columna: los
   mensajes, el saludo, el aviso del límite y los puntitos de "escribiendo". */
.rr-chat-body > * { width: 100%; max-width: 1400px; margin-inline: auto; }

.rr-bubble { display: flex; animation: rr-fade-up .3s var(--rr-ease) both; }
.rr-bubble .txt {
  font-size: 15.5px; line-height: 1.68;
  white-space: pre-wrap; word-break: break-word;
}
/* Robin contesta como texto corrido, sin globo: lo que dice suele ser largo y
   encerrarlo en una burbuja lo vuelve más difícil de leer, no más claro. */
.rr-bubble.bot .txt { padding: 0; color: var(--rr-text); }
/* Lo que escribe la persona sí lleva globo, y va a la derecha: es lo corto y
   es lo que se busca con la vista al repasar la conversación. */
.rr-bubble.user { justify-content: flex-end; }
.rr-bubble.user .txt {
  background: var(--rr-paper-2); border-radius: 18px;
  padding: 11px 16px; max-width: 80%;
}

.rr-chat-hello { text-align: center; padding: 30px 10px 6px; animation: rr-fade-up .5s var(--rr-ease) both; }
.rr-chat-hello .rr-pose { width: auto; height: auto; max-height: 118px; }
/* El Robin del saludo: se puede tocar y se pone a hablar. */
.rr-hello-robin { display: block; margin-bottom: 14px; }
/* El dibujo es un bloque, así que centrarlo es cosa suya y no del text-align
   del contenedor. */
.rr-hello-robin .rr-mascot { width: auto; height: auto; max-height: 130px; margin-inline: auto; }
@media (max-width: 760px) { .rr-hello-robin .rr-mascot { max-height: 96px; } }
.rr-chat-hello h3 { font-size: 26px; margin-bottom: 8px; letter-spacing: -.02em; }
.rr-chat-hello p { color: var(--rr-text-muted); font-size: 14.5px; margin: 0 auto; max-width: 420px; }

.rr-chips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 18px; }
.rr-chip {
  border: 1px solid var(--rr-line); background: var(--rr-white);
  border-radius: var(--rr-r-pill); padding: 9px 15px;
  font: inherit; font-size: 13px; color: var(--rr-text-muted); cursor: pointer;
  transition: all var(--rr-fast) var(--rr-ease);
}
.rr-chip:hover { border-color: var(--rr-red); color: var(--rr-red-dark); background: var(--rr-red-soft); transform: translateY(-2px); }

/* Robin pensando. Los puntitos propios del chat se fueron: ahora usa la
   misma espera que el resto de la aplicación (loading.css), y aquí solo queda
   dónde se coloca dentro de la conversación.
   Va con el pajarito hablando al lado, porque en una conversación larga el
   saludo de arriba ya se fue y Robin no se veía por ninguna parte. */
.rr-typing-row {
  display: flex; align-items: center; gap: 10px; padding: 6px 0;
  animation: rr-fade-up .3s var(--rr-ease) both;
}
.rr-typing-row .rr-wait-text { color: var(--rr-text-muted); font-weight: 600; font-size: 14px; }
.rr-typing-row .rr-wait { gap: 11px; }
.rr-typing-bird {
  width: auto; height: auto; max-height: 42px;
  flex: 0 0 auto;
}

/* El Robin triste de una respuesta que no llegó. Solo aparece en esa burbuja
   —ver addBubble() en chat.js—, nunca en las que sí contestaron. */
.rr-bubble-bird {
  width: auto; height: auto; max-height: 54px;
  flex: 0 0 auto; margin-right: 12px; align-self: flex-start;
}

.rr-composer {
  display: flex; gap: 10px; align-items: flex-end;
  width: 100%; max-width: 1400px; margin: 14px auto 0;
  padding: 10px 10px 10px 8px; border: 1px solid var(--rr-line);
  border-radius: 28px; background: var(--rr-white);
  box-shadow: var(--rr-sh-sm);
  transition: border-color var(--rr-fast) var(--rr-ease), box-shadow var(--rr-fast) var(--rr-ease);
}
/* El texto de Robin sí se corta antes: una línea de 1400 px se lee mal, se
   recorre. Lo que se estira es la caja de escribir y el ancho útil, no la
   medida de la línea. */
.rr-chat-body .rr-bubble.bot .txt { max-width: 78ch; }
.rr-composer:focus-within { border-color: var(--rr-line-strong); box-shadow: var(--rr-sh-md); }
.rr-composer textarea {
  flex: 1; min-height: 52px; max-height: 220px; resize: none;
  border: none; background: transparent; box-shadow: none;
  border-radius: 0; padding: 15px 10px 15px 18px; font-size: 15.5px;
}
.rr-composer textarea:focus { outline: none; border: none; box-shadow: none; }
.rr-composer button {
  width: 40px; height: 40px; flex: 0 0 40px; align-self: flex-end; margin-bottom: 2px;
  border-radius: 50%; border: none; background: var(--rr-red); color: #fff;
  font-size: 17px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: transform var(--rr-fast) var(--rr-spring), background var(--rr-fast) var(--rr-ease), box-shadow var(--rr-fast) var(--rr-ease);
}
.rr-composer button:hover { background: var(--rr-red-dark); transform: scale(1.08); box-shadow: var(--rr-sh-glow); }
.rr-composer button[disabled] { background: var(--rr-line-strong); cursor: not-allowed; transform: none; }

/* Panel de tareas */
.rr-tasks {
  background: var(--rr-white); border: 1px solid var(--rr-line);
  border-radius: var(--rr-r-lg); box-shadow: var(--rr-sh-sm);
  display: flex; flex-direction: column;
  max-height: calc(100vh - 150px);
}
.rr-tasks-head { padding: 18px 20px 12px; border-bottom: 1px solid var(--rr-line); }
.rr-tasks-head h3 { margin: 0 0 4px; font-size: 17px; }
.rr-tasks-head p { margin: 0; font-size: 12.5px; color: var(--rr-text-muted); }
.rr-task-add { display: flex; gap: 8px; padding: 14px 16px 10px; }
.rr-task-add input { flex: 1; }
.rr-task-add button { flex: 0 0 44px; width: 44px; height: 44px; border-radius: 50%; border: none; background: var(--rr-ink); color: #fff; font-size: 20px; cursor: pointer; transition: transform var(--rr-fast) var(--rr-spring), background var(--rr-fast) var(--rr-ease); }
.rr-task-add button:hover { background: var(--rr-red); transform: rotate(90deg); }

.rr-task-filters { display: flex; gap: 6px; padding: 0 16px 12px; flex-wrap: wrap; }
.rr-task-filters button {
  border: 1px solid var(--rr-line); background: transparent; border-radius: var(--rr-r-pill);
  padding: 6px 13px; font: inherit; font-size: 12.5px; font-weight: 600; color: var(--rr-text-muted); cursor: pointer;
  transition: all var(--rr-fast) var(--rr-ease);
}
.rr-task-filters button:hover { border-color: var(--rr-line-strong); }
.rr-task-filters button.on { background: var(--rr-ink); border-color: var(--rr-ink); color: #fff; }

.rr-task-list { overflow-y: auto; padding: 4px 12px 14px; flex: 1; }
.rr-task {
  display: flex; align-items: flex-start; gap: 11px;
  padding: 11px 10px; border-radius: var(--rr-r-xs);
  transition: background var(--rr-fast) var(--rr-ease);
  animation: rr-fade-up .28s var(--rr-ease) both;
}
.rr-task:hover { background: var(--rr-paper); }
.rr-task-check {
  flex: 0 0 21px; width: 21px; height: 21px; margin-top: 1px;
  border: 2px solid var(--rr-line-strong); border-radius: 7px;
  background: transparent; cursor: pointer; position: relative;
  transition: all var(--rr-fast) var(--rr-spring);
}
.rr-task-check:hover { border-color: var(--rr-red); transform: scale(1.12); }
.rr-task-check::after {
  content: ""; position: absolute; left: 6px; top: 2px;
  width: 5px; height: 10px; border: solid #fff; border-width: 0 2.5px 2.5px 0;
  transform: rotate(45deg) scale(0); transition: transform var(--rr-fast) var(--rr-spring);
}
.rr-task.done .rr-task-check { background: var(--rr-green); border-color: var(--rr-green); }
.rr-task.done .rr-task-check::after { transform: rotate(45deg) scale(1); }
.rr-task-main { flex: 1; min-width: 0; }
.rr-task-title { font-size: 14px; font-weight: 600; line-height: 1.45; word-break: break-word; }
.rr-task.done .rr-task-title { text-decoration: line-through; color: var(--rr-text-faint); }
.rr-task-meta { display: flex; gap: 7px; align-items: center; flex-wrap: wrap; margin-top: 5px; font-size: 11.5px; color: var(--rr-text-muted); }
.rr-task-due { padding: 2px 8px; border-radius: 99px; background: var(--rr-paper-2); font-weight: 700; }
.rr-task-due.today { background: var(--rr-gold-soft); color: #8A5D00; }
.rr-task-due.late { background: var(--rr-danger-soft); color: var(--rr-danger); }
.rr-task-prio { padding: 2px 8px; border-radius: 99px; background: var(--rr-red-soft); color: var(--rr-red-dark); font-weight: 700; }
.rr-task-del {
  border: none; background: transparent; color: var(--rr-text-faint);
  cursor: pointer; font-size: 15px; padding: 2px 6px; border-radius: 6px;
  opacity: 0; transition: opacity var(--rr-fast) var(--rr-ease), color var(--rr-fast) var(--rr-ease), background var(--rr-fast) var(--rr-ease);
}
.rr-task:hover .rr-task-del { opacity: 1; }
.rr-task-del:hover { color: var(--rr-danger); background: var(--rr-danger-soft); }

.rr-progress { height: 7px; border-radius: 99px; background: var(--rr-paper-2); overflow: hidden; margin-top: 10px; }
.rr-progress i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--rr-red), var(--rr-gold)); transition: width var(--rr-slow) var(--rr-ease); }

/* =============================================================================
   Burbuja flotante de Robin (paneles de escuela)
   ============================================================================= */

.rr-ai-launcher {
  position: fixed; bottom: 24px; right: 24px; z-index: 90;
  width: 64px; height: 64px; border-radius: 50%;
  background: var(--rr-white); border: 2px solid var(--rr-line); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--rr-sh-md);
  transition: transform var(--rr-mid) var(--rr-spring), box-shadow var(--rr-mid) var(--rr-ease);
}
.rr-ai-launcher::before {
  content: ""; position: absolute; inset: -4px; border-radius: 50%;
  border: 2px solid var(--rr-red); opacity: 0;
  animation: rr-ring 2.8s var(--rr-ease) infinite;
}
@keyframes rr-ring {
  0% { transform: scale(.9); opacity: .7; }
  70% { transform: scale(1.3); opacity: 0; }
  100% { opacity: 0; }
}
.rr-ai-launcher .rr-mascot { width: 44px; height: 44px; }
.rr-ai-launcher:hover { transform: scale(1.08) translateY(-2px); box-shadow: var(--rr-sh-lg); }

.rr-ai-panel {
  position: fixed; bottom: 100px; right: 24px; z-index: 91;
  width: 360px; max-width: calc(100vw - 40px);
  height: 500px; max-height: 72vh;
  background: var(--rr-white); border-radius: var(--rr-r-lg);
  box-shadow: var(--rr-sh-lg); border: 1px solid var(--rr-line);
  display: none; flex-direction: column; overflow: hidden;
  transform-origin: bottom right;
}
.rr-ai-panel.open { display: flex; animation: rr-pop-in .28s var(--rr-spring); }
.rr-ai-panel .rr-chat { height: 100%; border: none; border-radius: 0; box-shadow: none; }
.rr-ai-close { margin-left: auto; background: none; border: none; color: var(--rr-text-muted); font-size: 22px; line-height: 1; cursor: pointer; padding: 0 4px; border-radius: 6px; }
.rr-ai-close:hover { color: var(--rr-danger); background: var(--rr-danger-soft); }

/* =============================================================================
   Utilidades finales
   ============================================================================= */

.rr-loader { display: flex; align-items: center; justify-content: center; padding: 50px 0; }
/* El aro lo pone ahora /loading/style.css (.spinner). Aquí solo queda
   .rr-loader, que es la caja que lo centra — no anima nada. */

/* Aquí estaba el apagón general: un *{animation-duration:.001ms} que dejaba
   la aplicación entera sin una sola animación en cuanto Windows tenía apagados
   los efectos visuales. Ahora se calma en vez de apagarse. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .rr-reveal { transform: translateY(14px); }
  .rr-task { animation-duration: .3s; }
}

/* =============================================================================
   Minijuegos
   ============================================================================= */

.rr-games-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 22px; }
.rr-games-head h2 { font-size: 22px; margin: 0 0 4px; }
.rr-games-head p { color: var(--rr-text-muted); font-size: 14px; margin: 0; max-width: 56ch; }
.rr-games-count {
  font-size: 12px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
  color: var(--rr-text-faint); background: var(--rr-paper-2); padding: 6px 12px; border-radius: var(--rr-r-pill);
}

.rr-game-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(268px, 1fr)); gap: 16px; max-width: 1140px; }

.rr-game-card {
  position: relative; overflow: hidden;
  background: var(--rr-white); border: 1px solid var(--rr-line);
  border-radius: var(--rr-r-md); padding: 22px 20px 20px;
  display: flex; flex-direction: column; gap: 6px;
  animation: rr-pop-in .4s var(--rr-ease) both;
  transition: transform var(--rr-mid) var(--rr-ease), box-shadow var(--rr-mid) var(--rr-ease), border-color var(--rr-mid) var(--rr-ease);
}
/* La franja de color de arriba es lo que distingue una materia de otra de un
   vistazo, antes incluso de leer el nombre. */
.rr-game-card::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 4px;
  background: var(--rr-red); transform: scaleX(.25); transform-origin: left;
  transition: transform var(--rr-slow) var(--rr-ease);
}
.rr-game-card.accent-blue::before { background: var(--rr-blue); }
.rr-game-card.accent-gold::before { background: var(--rr-gold); }
.rr-game-card.accent-green::before { background: var(--rr-green); }
.rr-game-card:hover { transform: translateY(-4px); box-shadow: var(--rr-sh-md); border-color: var(--rr-line-strong); }
.rr-game-card:hover::before { transform: scaleX(1); }

.rr-game-ic { font-size: 34px; line-height: 1; margin-bottom: 4px; transition: transform var(--rr-mid) var(--rr-spring); }
.rr-game-card:hover .rr-game-ic { transform: scale(1.12) rotate(-7deg); }
.rr-game-subject {
  font-size: 10.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--rr-text-faint);
}
.rr-game-card h3 { font-size: 17px; margin: 0; }
.rr-game-card p { font-size: 13.5px; color: var(--rr-text-muted); margin: 0; line-height: 1.55; flex: 1; }
.rr-game-stats { display: flex; gap: 12px; flex-wrap: wrap; font-size: 12px; color: var(--rr-text-faint); margin: 10px 0 12px; }
.rr-game-stats .hot { color: var(--rr-red); font-weight: 700; }
.rr-game-card.off { opacity: .62; }
.rr-game-card.off:hover { transform: none; box-shadow: none; }
.rr-game-locked {
  margin-top: 12px; font-size: 12.5px; color: var(--rr-text-muted);
  background: var(--rr-paper-2); border-radius: var(--rr-r-xs); padding: 10px 12px; line-height: 1.5;
}

/* ---- El tablero de juego --------------------------------------------------- */

.rr-game-board {
  background: var(--rr-white); border: 1px solid var(--rr-line);
  border-radius: var(--rr-r-lg); box-shadow: var(--rr-sh-sm);
  overflow: hidden; max-width: 760px; margin: 0 auto;
  animation: rr-pop-in .35s var(--rr-ease) both;
}
.rr-board-top {
  display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  padding: 14px 18px; border-bottom: 1px solid var(--rr-line); background: var(--rr-paper);
}
.rr-board-title { display: flex; align-items: center; gap: 11px; }
.rr-board-title .ic { font-size: 26px; }
.rr-board-title strong { display: block; font-size: 15.5px; }
.rr-board-title small { font-size: 12px; color: var(--rr-text-muted); }
.rr-board-streak { text-align: center; min-width: 62px; }
.rr-board-streak strong { display: block; font-size: 22px; color: var(--rr-red); line-height: 1; }
.rr-board-streak small { font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--rr-text-faint); }

.rr-board-stage { padding: 30px 26px 24px; min-height: 190px; }
.rr-round-prompt { font-size: 20px; font-weight: 650; line-height: 1.45; margin: 0 0 16px; color: var(--rr-ink); }

/* El programa del reto, aparte del enunciado. En monoespaciada y con los
   espacios respetados: en un ejercicio de código la sangría no es adorno,
   es la mitad de la respuesta. */
.rr-round-code {
  margin: 0 0 20px; padding: 16px 18px;
  background: var(--rr-ink); color: #F4EFEA;
  border-radius: var(--rr-r-sm); border-left: 4px solid var(--rr-red);
  font-family: var(--rr-mono); font-size: 14.5px; line-height: 1.65;
  white-space: pre; overflow-x: auto; tab-size: 4;
}
/* El hueco por rellenar se ve desde lejos: es lo que hay que encontrar, y
   buscarlo entre líneas de código oscuro no es parte del ejercicio. */
.rr-round-code .rr-blank {
  background: var(--rr-gold); color: var(--rr-ink);
  border-radius: 4px; padding: 0 4px; font-weight: 700;
}

.rr-round-options { display: grid; gap: 10px; }
@media (min-width: 620px) { .rr-round-options { grid-template-columns: 1fr 1fr; } }
.rr-option {
  display: flex; align-items: center; gap: 12px; text-align: left;
  background: var(--rr-white); border: 2px solid var(--rr-line);
  border-radius: var(--rr-r-sm); padding: 14px 16px;
  font-family: inherit; font-size: 15px; font-weight: 600; color: var(--rr-text);
  cursor: pointer; animation: rr-pop-in .3s var(--rr-ease) both;
  transition: border-color var(--rr-fast) var(--rr-ease), background var(--rr-fast) var(--rr-ease), transform var(--rr-fast) var(--rr-ease);
}
.rr-option .k {
  display: grid; place-items: center; flex: 0 0 26px; height: 26px;
  background: var(--rr-paper-2); border-radius: 8px;
  font-size: 12px; font-weight: 800; color: var(--rr-text-faint);
}
.rr-option:hover:not(:disabled) { border-color: var(--rr-red); transform: translateY(-2px); }
.rr-option:hover:not(:disabled) .k { background: var(--rr-red-soft); color: var(--rr-red-dark); }
.rr-option:disabled { cursor: default; opacity: .55; }
.rr-option.right { border-color: var(--rr-green); background: var(--rr-green-soft); opacity: 1; }
.rr-option.right .k { background: var(--rr-green); color: #fff; }
.rr-option.wrong { border-color: var(--rr-danger); background: var(--rr-danger-soft); opacity: 1; animation: rr-shake .4s var(--rr-ease); }

.rr-round-input { display: flex; gap: 10px; flex-wrap: wrap; }
.rr-round-input input { flex: 1; min-width: 180px; font-size: 17px; font-family: var(--rr-mono); }

.rr-board-help { padding: 0 26px; }
.rr-board-help:empty { display: none; }

.rr-round-result {
  display: flex; align-items: center; gap: 14px;
  border-radius: var(--rr-r-sm); padding: 14px 16px; margin-bottom: 4px;
  animation: rr-fade-up .3s var(--rr-ease) both;
}
.rr-round-result.ok { background: var(--rr-green-soft); }
.rr-round-result.no { background: var(--rr-gold-soft); }
.rr-round-result strong { display: block; font-size: 14.5px; margin-bottom: 2px; }
.rr-round-result .btn { margin-top: 8px; }
/* El único que queda: el Robin triste del aviso de "se te acabó por hoy".
   Los del resultado y la pista viven ahora en la columna de Robin de la
   ventana de minijuegos, que tiene su propio dibujo grande. */
.rr-limit-bird { width: auto; height: auto; max-height: 62px; flex: 0 0 auto; }

.rr-round-help {
  display: flex; gap: 14px; align-items: flex-start;
  background: var(--rr-blue-soft); border-radius: var(--rr-r-sm);
  padding: 15px 17px; margin-bottom: 4px;
  animation: rr-fade-up .3s var(--rr-ease) both;
}
.rr-round-help.limit { background: var(--rr-gold-soft); }
.rr-round-help em { display: block; font-style: normal; font-weight: 700; font-size: 13.5px; margin-bottom: 6px; color: var(--rr-ink); }
.rr-round-help p { margin: 0 0 6px; font-size: 14px; line-height: 1.55; }
.rr-round-help ol { margin: 0 0 6px; padding-left: 20px; font-size: 14px; line-height: 1.7; }
.rr-round-help small { font-size: 11.5px; color: var(--rr-text-muted); }
.rr-round-help .btn { margin-top: 8px; }

.rr-board-actions {
  display: flex; gap: 10px; flex-wrap: wrap;
  padding: 16px 26px 20px; border-top: 1px solid var(--rr-line); margin-top: 16px;
}

/* ---- Interruptores de minijuego (profesorado y dirección) ------------------ */

.rr-toggle-list { display: grid; gap: 8px; max-width: 560px; }
.rr-toggle-row {
  display: flex; align-items: center; gap: 13px; cursor: pointer;
  background: var(--rr-white); border: 1px solid var(--rr-line);
  border-radius: var(--rr-r-sm); padding: 13px 16px;
  transition: border-color var(--rr-fast) var(--rr-ease), opacity var(--rr-fast) var(--rr-ease);
}
.rr-toggle-row:hover { border-color: var(--rr-line-strong); }
.rr-toggle-row.off { opacity: .6; }
.rr-toggle-row .ic { font-size: 22px; }
.rr-toggle-row .txt { flex: 1; }
.rr-toggle-row .txt strong { display: block; font-size: 14.5px; }
.rr-toggle-row .txt small { font-size: 12px; color: var(--rr-text-muted); }
.rr-toggle-row input { position: absolute; opacity: 0; pointer-events: none; }
.rr-switch {
  position: relative; flex: 0 0 44px; height: 25px;
  background: var(--rr-line-strong); border-radius: 99px;
  transition: background var(--rr-mid) var(--rr-ease);
}
.rr-switch::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 19px; height: 19px;
  background: #fff; border-radius: 50%; box-shadow: var(--rr-sh-xs);
  transition: transform var(--rr-mid) var(--rr-spring);
}
.rr-toggle-row input:checked ~ .rr-switch { background: var(--rr-green); }
.rr-toggle-row input:checked ~ .rr-switch::after { transform: translateX(19px); }

/* =============================================================================
   Planes
   ============================================================================= */

.rr-plans-head { text-align: center; max-width: 640px; margin: 0 auto 30px; }
.rr-plans-head h2 { font-size: clamp(24px, 3.4vw, 32px); margin-bottom: 8px; }
.rr-plans-head p { color: var(--rr-text-muted); font-size: 15px; }

.rr-cycle-switch {
  display: inline-flex; gap: 4px; padding: 4px; margin-top: 8px;
  background: var(--rr-paper-2); border-radius: var(--rr-r-pill);
}
.rr-cycle-switch button {
  display: inline-flex; align-items: center; gap: 7px;
  background: none; border: none; cursor: pointer;
  font-family: inherit; font-size: 13.5px; font-weight: 700; color: var(--rr-text-muted);
  padding: 9px 17px; border-radius: var(--rr-r-pill);
  transition: background var(--rr-mid) var(--rr-ease), color var(--rr-mid) var(--rr-ease), box-shadow var(--rr-mid) var(--rr-ease);
}
.rr-cycle-switch button:hover { color: var(--rr-ink); }
.rr-cycle-switch button.on { background: var(--rr-white); color: var(--rr-ink); box-shadow: var(--rr-sh-xs); }
.rr-cycle-off {
  font-size: 10.5px; font-weight: 800; letter-spacing: .03em;
  background: var(--rr-green-soft); color: var(--rr-green);
  padding: 2px 7px; border-radius: 99px;
}

.rr-plan-grid { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); align-items: start; max-width: 1020px; margin: 0 auto; }

.rr-plan {
  position: relative; background: var(--rr-white);
  border: 1px solid var(--rr-line); border-radius: var(--rr-r-lg);
  padding: 30px 26px 26px; display: flex; flex-direction: column;
  animation: rr-fade-up .45s var(--rr-ease) both;
  transition: transform var(--rr-mid) var(--rr-ease), box-shadow var(--rr-mid) var(--rr-ease);
}
.rr-plan:hover { transform: translateY(-4px); box-shadow: var(--rr-sh-md); }
.rr-plan.popular { border-color: var(--rr-red); box-shadow: var(--rr-sh-md); }
.rr-plan.current { border-color: var(--rr-blue); }
.rr-plan-flag {
  position: absolute; top: -11px; left: 50%; transform: translateX(-50%); white-space: nowrap;
  background: var(--rr-red); color: #fff;
  font-size: 11px; font-weight: 800; letter-spacing: .03em;
  padding: 5px 14px; border-radius: 99px; box-shadow: var(--rr-sh-sm);
}
.rr-plan-flag.current { background: var(--rr-blue); }
.rr-plan.current.popular .rr-plan-flag:not(.current) { display: none; }

.rr-plan h3 { font-size: 21px; margin: 0 0 4px; }
.rr-plan-tag { font-size: 13.5px; color: var(--rr-text-muted); margin: 0 0 18px; line-height: 1.5; min-height: 40px; }
.rr-plan-price { display: flex; align-items: baseline; gap: 7px; }
.rr-plan-price strong { font-size: 40px; font-weight: 800; letter-spacing: -.03em; line-height: 1; color: var(--rr-ink); }
.rr-plan-price span { font-size: 13.5px; color: var(--rr-text-muted); }
.rr-plan-billing { font-size: 12.5px; color: var(--rr-text-faint); margin: 8px 0 20px; min-height: 18px; }
.rr-plan-billing em { font-style: normal; color: var(--rr-green); font-weight: 700; margin-left: 6px; }

.rr-plan-list { list-style: none; padding: 0; margin: 0 0 22px; flex: 1; }
.rr-plan-list li { position: relative; padding: 0 0 0 26px; margin-bottom: 11px; font-size: 13.8px; line-height: 1.5; color: var(--rr-text); }
.rr-plan-list li::before {
  content: "✓"; position: absolute; left: 0; top: -1px;
  color: var(--rr-green); font-weight: 800; font-size: 14px;
}
.rr-plan.accent-red .rr-plan-list li::before { color: var(--rr-red); }
.rr-plan.accent-gold .rr-plan-list li::before { color: var(--rr-gold); }

.rr-plans-note {
  text-align: center; max-width: 620px; margin: 28px auto 0;
  font-size: 12.5px; color: var(--rr-text-faint); line-height: 1.6;
}

/* =============================================================================
   Cuenta y perfil
   ============================================================================= */

.rr-profile-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 22px; align-items: start; }
@media (max-width: 960px) { .rr-profile-grid { grid-template-columns: 1fr; } }

.rr-profile-card { padding: 26px; }
.rr-profile-top { display: flex; align-items: center; gap: 18px; margin-bottom: 24px; flex-wrap: wrap; }
.rr-profile-top h3 { font-size: 20px; margin: 0 0 6px; }
.rr-profile-top p { font-size: 12.5px; margin: 8px 0 0; }

.rr-photo {
  position: relative; display: block; width: 88px; height: 88px; flex-shrink: 0;
  border-radius: 50%; overflow: hidden; cursor: pointer;
  border: 2px solid var(--rr-line); background: var(--rr-paper-2);
  transition: border-color var(--rr-fast) var(--rr-ease);
}
.rr-photo:hover { border-color: var(--rr-red); }
.rr-photo img { width: 100%; height: 100%; object-fit: cover; }
.rr-photo-empty { display: grid; place-items: center; width: 100%; height: 100%; font-size: 34px; }
.rr-photo-edit {
  position: absolute; inset: auto 0 0 0; padding: 5px 0;
  background: rgba(20, 16, 14, .72); color: #fff;
  font-size: 10.5px; font-weight: 700; text-align: center; text-transform: uppercase; letter-spacing: .05em;
  opacity: 0; transition: opacity var(--rr-fast) var(--rr-ease);
}
.rr-photo:hover .rr-photo-edit { opacity: 1; }

.rr-rule { border: none; border-top: 1px solid var(--rr-line); margin: 22px 0; }

.rr-summary { padding: 22px; }
.rr-summary h3 { font-size: 16px; margin-bottom: 14px; }
.rr-summary-rows { display: grid; gap: 1px; background: var(--rr-line); border-radius: var(--rr-r-xs); overflow: hidden; }
.rr-summary-rows > div {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  background: var(--rr-white); padding: 11px 13px;
}
.rr-summary-rows span { font-size: 12.5px; color: var(--rr-text-muted); }
.rr-summary-rows strong { font-size: 14px; text-align: right; }

.rr-set-card { padding: 22px; margin-bottom: 14px; max-width: 640px; }
.rr-set-card h3 { font-size: 16px; margin-bottom: 6px; }
.rr-set-card p { font-size: 13.5px; margin-bottom: 14px; }
.rr-set-card code { background: var(--rr-paper-2); padding: 2px 6px; border-radius: 5px; font-family: var(--rr-mono); font-size: 12.5px; }

.rr-tasks-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 22px; align-items: start; }
@media (max-width: 1000px) { .rr-tasks-wrap { grid-template-columns: 1fr; } }
.rr-tasks-side { padding: 22px; }
.rr-tasks-side h3 { font-size: 16px; margin-bottom: 14px; }
.rr-mini-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 16px; }
.rr-mini-stats > div { text-align: center; background: var(--rr-paper); border-radius: var(--rr-r-xs); padding: 12px 6px; }
.rr-mini-stats strong { display: block; font-size: 24px; line-height: 1; color: var(--rr-ink); }
.rr-mini-stats span { font-size: 11px; color: var(--rr-text-muted); }
.rr-mini-stats .alert strong { color: var(--rr-danger); }

/* Sección que ocupa el alto completo (el chat a pantalla entera). */
.rr-section-full { display: flex; flex-direction: column; }

/* El aviso de "se te acabó por hoy" dentro del chat. */
.rr-limit-note {
  display: flex; align-items: flex-start; gap: 14px;
  background: var(--rr-gold-soft); border-radius: var(--rr-r-md);
  padding: 16px 18px; animation: rr-fade-up .35s var(--rr-ease) both;
}
.rr-limit-note strong { display: block; font-size: 14.5px; margin-bottom: 5px; }
.rr-limit-note p { font-size: 13.5px; margin: 0 0 10px; line-height: 1.55; color: var(--rr-text-muted); }

/* Cuando Robin contesta por una regla y no por la conversación, la burbuja se
   marca y dice cuál. Se marcan para que no se lean como un «no sé»: hay una
   diferencia grande entre no saber la respuesta y no ir a darla, y quien está
   del otro lado tiene derecho a saber en cuál de las dos está.

   Tres reglas, tres marcas (las pone chat.js con el `mode` que manda el
   servidor; ver routes/ai.js):

     .tutor      no da el resultado de un ejercicio
     .guardia    esto no es de estudio, cambiamos de tema
     .respeto    había una grosería y se tapó
*/
.rr-bubble.tutor .txt,
.rr-bubble.guardia .txt,
.rr-bubble.respeto .txt { border-left: 3px solid var(--rr-blue); padding-left: 16px; }

.rr-bubble.tutor .txt::after,
.rr-bubble.guardia .txt::after,
.rr-bubble.respeto .txt::after {
  display: block; margin-top: 9px; font-size: 10.5px; font-weight: 800;
  letter-spacing: .06em; text-transform: uppercase; color: #1D6373; opacity: .75;
}
.rr-bubble.tutor .txt::after { content: "Robin guía, no resuelve"; }
.rr-bubble.guardia .txt::after { content: "Robin solo habla de estudio"; }
.rr-bubble.respeto .txt::after { content: "Aquí se habla bien"; }

/* Las dos últimas van en dorado y no en azul: el azul de arriba es el de
   «estoy enseñando», y estas dos no enseñan nada, avisan. */
.rr-bubble.guardia .txt,
.rr-bubble.respeto .txt { border-left-color: var(--rr-gold); }
.rr-bubble.guardia .txt::after,
.rr-bubble.respeto .txt::after { color: #8A6A12; }

/* =============================================================================
   Asignaciones y entregas
   ============================================================================= */

.rr-assign-list { display: grid; gap: 12px; }
.rr-assign {
  background: var(--rr-white); border: 1px solid var(--rr-line);
  border-left: 4px solid var(--rr-line-strong);
  border-radius: var(--rr-r-sm); padding: 18px 20px;
  animation: rr-fade-up .35s var(--rr-ease) both;
  transition: border-color var(--rr-fast) var(--rr-ease), box-shadow var(--rr-fast) var(--rr-ease);
}
.rr-assign:hover { box-shadow: var(--rr-sh-sm); }
.rr-assign.pendiente { border-left-color: var(--rr-gold); }
.rr-assign.atrasada { border-left-color: var(--rr-danger); }
.rr-assign.entregada { border-left-color: var(--rr-blue); }
.rr-assign.calificada { border-left-color: var(--rr-green); }
.rr-assign-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.rr-assign h3 { font-size: 16px; margin: 0 0 4px; }
.rr-assign .meta { font-size: 12px; color: var(--rr-text-faint); margin-bottom: 8px; }
.rr-assign p { font-size: 13.8px; color: var(--rr-text-muted); margin: 0 0 12px; line-height: 1.6; }
.rr-assign-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.rr-assign-state {
  font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
  padding: 4px 11px; border-radius: 99px; white-space: nowrap;
}
.rr-assign-state.pendiente { background: var(--rr-gold-soft); color: #8A5D00; }
.rr-assign-state.atrasada { background: var(--rr-danger-soft); color: var(--rr-danger); }
.rr-assign-state.entregada { background: var(--rr-blue-soft); color: #1D6373; }
.rr-assign-state.calificada { background: var(--rr-green-soft); color: var(--rr-green); }

.rr-assign-work { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--rr-line); }
.rr-assign-work textarea { min-height: 130px; }
.rr-assign-plan {
  background: var(--rr-blue-soft); border-radius: var(--rr-r-sm);
  padding: 14px 16px; margin-top: 12px; font-size: 13.8px; line-height: 1.65; white-space: pre-wrap;
}
.rr-assign-grade {
  display: inline-flex; align-items: baseline; gap: 5px;
  background: var(--rr-green-soft); color: var(--rr-green);
  border-radius: var(--rr-r-xs); padding: 7px 13px; font-weight: 800; font-size: 15px;
}
.rr-assign-grade small { font-weight: 600; font-size: 11.5px; opacity: .8; }

/* =============================================================================
   Códigos de ingreso
   ============================================================================= */

.rr-code-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); margin-bottom: 26px; }
.rr-code-card { padding: 22px; text-align: center; }
.rr-code-card h3 { font-size: 15px; margin-bottom: 4px; }
.rr-code-card > p { font-size: 12.5px; color: var(--rr-text-muted); margin-bottom: 14px; min-height: 36px; }
.rr-code-value {
  display: block; font-family: var(--rr-mono); font-size: 27px; font-weight: 700; letter-spacing: .09em;
  background: var(--rr-paper); border: 1px dashed var(--rr-line-strong);
  border-radius: var(--rr-r-sm); padding: 14px 10px; margin-bottom: 12px; color: var(--rr-ink);
  word-break: break-all;
}
.rr-code-value.hidden-code { color: var(--rr-text-faint); font-size: 14px; letter-spacing: 0; font-family: var(--rr-font); }

.rr-code-table { width: 100%; }
.rr-code-state {
  font-size: 10.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
  padding: 3px 9px; border-radius: 99px;
}
.rr-code-state.listo { background: var(--rr-green-soft); color: var(--rr-green); }
.rr-code-state.usado { background: var(--rr-paper-2); color: var(--rr-text-faint); }
.rr-code-state.anulado { background: var(--rr-danger-soft); color: var(--rr-danger); }
.rr-code-mono { font-family: var(--rr-mono); font-weight: 700; letter-spacing: .05em; }

/* Confirmar en dos tiempos: el botón cambia y pide que se vuelva a pulsar.
   Vale para invitar, para anular y para cualquier cosa que no se deshace. */
.btn.rr-confirming {
  background: var(--rr-gold) !important; color: var(--rr-ink) !important;
  animation: rr-pulse-confirm 1.1s var(--rr-ease) infinite;
}
@keyframes rr-pulse-confirm {
  0%, 100% { box-shadow: 0 0 0 0 rgba(242, 168, 27, .5); }
  50% { box-shadow: 0 0 0 7px rgba(242, 168, 27, 0); }
}

/* =============================================================================
   Entrar y crear cuenta: media pantalla de formulario, media de foto
   ============================================================================= */

.rr-auth-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); min-height: 100vh; }
@media (max-width: 940px) { .rr-auth-split { grid-template-columns: 1fr; } }

.rr-auth-form-side {
  display: flex; flex-direction: column; justify-content: center;
  padding: 40px clamp(24px, 4.5vw, 76px); background: var(--rr-paper);
}
/* La columna se escala con la pantalla en vez de quedarse en una tira fija de
   420 px con medio monitor en blanco a los lados. El ancho crece con el
   viewport y solo se detiene cuando el renglón empieza a ser incómodo de
   leer; la letra sube con él (ver .rr-auth-inner h1 y .lead). */
.rr-auth-inner {
  width: 100%;
  max-width: clamp(420px, 34vw, 520px);
  margin: 0 auto;
  animation: rr-fade-up .5s var(--rr-ease) both;
}
.rr-auth-inner.wide { max-width: clamp(560px, 44vw, 680px); }
.rr-auth-back {
  /* Cuelga de la columna, no del formulario: en pantalla grande se va a la
     esquina (ver el @media de más abajo) y en pantalla estrecha se queda
     encima del formulario, pegado a la izquierda y sin estirarse. */
  display: inline-flex; align-self: flex-start; align-items: center; gap: 7px; margin-bottom: 30px;
  font-size: 13.5px; font-weight: 600; color: var(--rr-text-muted);
  transition: color var(--rr-fast) var(--rr-ease), transform var(--rr-fast) var(--rr-ease);
}
.rr-auth-back:hover { color: var(--rr-red); transform: translateX(-3px); }
.rr-auth-inner h1 { font-size: clamp(30px, 3.9vw, 44px); margin-bottom: 7px; line-height: 1.08; }
.rr-auth-inner .lead { color: var(--rr-text-muted); font-size: clamp(15px, 1.15vw, 17.5px); margin-bottom: 26px; }

/* ---- La cabecera de entrar: Robin al lado del título, no encima -----------
   Puesto encima, el pájaro empujaba el título hacia abajo y dejaba la mitad
   de arriba de la columna vacía. Al lado, la cabecera ocupa una sola línea y
   todo el bloque sube. */
.rr-auth-head-row { display: flex; align-items: center; gap: 18px; margin-bottom: 14px; }
.rr-auth-head-row .rr-auth-robin { margin-bottom: 0; flex: 0 0 auto; }
.rr-auth-head-row h1 { margin: 0; }
.rr-auth-kicker {
  display: block; margin-bottom: 2px;
  font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  color: var(--rr-red);
}

/* ---- El ojo de la contraseña ---------------------------------------------- */
.rr-input-eye { position: relative; }
.rr-input-eye input { padding-right: 46px; }
.rr-input-eye button {
  position: absolute; top: 50%; right: 6px; transform: translateY(-50%);
  background: none; border: none; cursor: pointer;
  width: 34px; height: 34px; border-radius: var(--rr-r-xs);
  font-size: 16px; line-height: 1; opacity: .55;
  transition: opacity var(--rr-fast) var(--rr-ease), background var(--rr-fast) var(--rr-ease);
}
.rr-input-eye button:hover { opacity: 1; background: var(--rr-paper-2); }
.rr-input-eye button.on { opacity: 1; }

/* ---- Los tres caminos, debajo del formulario ------------------------------
   Aquí abajo no había nada: en una pantalla de escritorio quedaba un tercio
   de columna en blanco. Ahora va la duda real de quien llega — «¿yo con qué
   entro?» — resuelta sin salir de la página. */
.rr-auth-ways {
  display: grid; gap: 10px; margin-top: 30px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 560px) { .rr-auth-ways { grid-template-columns: 1fr; } }
.rr-auth-way {
  background: var(--rr-white); border: 1px solid var(--rr-line);
  border-radius: var(--rr-r-sm); padding: 13px 14px;
  transition: border-color var(--rr-fast) var(--rr-ease), transform var(--rr-fast) var(--rr-ease);
}
.rr-auth-way:hover { border-color: var(--rr-line-strong); transform: translateY(-2px); }
.rr-auth-way .ic { display: block; font-size: 19px; margin-bottom: 5px; }
.rr-auth-way strong { display: block; font-size: 13.5px; margin-bottom: 3px; }
.rr-auth-way small { display: block; font-size: 12px; line-height: 1.45; color: var(--rr-text-muted); }
.rr-auth-way code {
  font-family: var(--rr-mono); font-size: 11.5px;
  background: var(--rr-paper-2); padding: 1px 5px; border-radius: 5px;
}

.rr-auth-foot {
  margin: 22px 0 0; text-align: center;
  font-size: 12.5px; color: var(--rr-text-faint);
}
.rr-auth-foot a { color: var(--rr-text-muted); font-weight: 600; }
.rr-auth-foot a:hover { color: var(--rr-red); text-decoration: underline; }
.rr-auth-inner .rr-brand { margin-bottom: 20px; font-size: 17px; color: var(--rr-text-muted); }
.rr-auth-inner .rr-brand:hover { color: var(--rr-ink); }

/* El lado de la foto. La imagen cambia en cada recarga, así que entrar dos
   veces seguidas nunca se ve igual. */
.rr-auth-art-side { position: relative; overflow: hidden; background: var(--rr-ink); }
@media (max-width: 940px) { .rr-auth-art-side { min-height: 210px; order: -1; } }
.rr-auth-art-img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  animation: rr-auth-art 22s var(--rr-ease) both;
}
@keyframes rr-auth-art {
  from { transform: scale(1.1); filter: saturate(.85); }
  to { transform: scale(1.0); filter: saturate(1); }
}
.rr-auth-art-side::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(190deg, rgba(20, 16, 14, 0) 0%, rgba(20, 16, 14, .06) 45%, rgba(20, 16, 14, .5) 76%, rgba(20, 16, 14, .84) 100%);
}
.rr-auth-quote {
  position: absolute; inset: auto 0 0 0; z-index: 1;
  padding: clamp(26px, 4vw, 46px); color: #fff;
  animation: rr-fade-up .8s .25s var(--rr-ease) both;
}
.rr-auth-quote .rr-mascot { width: 62px; height: 62px; margin-bottom: 14px; }
.rr-auth-quote p { font-size: clamp(17px, 2.1vw, 22px); font-weight: 650; line-height: 1.45; margin: 0 0 8px; max-width: 24ch; letter-spacing: -.015em; }
.rr-auth-quote small { font-size: 12.5px; color: rgba(255, 255, 255, .62); }

.rr-auth-switch { text-align: center; font-size: 14px; color: var(--rr-text-muted); margin-top: 22px; }
.rr-auth-switch a { color: var(--rr-red); font-weight: 700; }
.rr-auth-switch a:hover { text-decoration: underline; }

/* =============================================================================
   Modo peques: parvularia y los primeros grados
   ============================================================================= */

.rr-kids {
  min-height: 100vh; display: flex; flex-direction: column;
  background:
    radial-gradient(1200px 520px at 50% -180px, var(--rr-gold-soft), transparent 70%),
    var(--rr-paper);
}
.rr-kids-top {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 18px clamp(18px, 4vw, 40px);
}
.rr-kids-hi { display: flex; align-items: center; gap: 13px; }
.rr-kids-hi .rr-avatar { width: 46px; height: 46px; flex: 0 0 46px; border: 2px solid var(--rr-white); box-shadow: var(--rr-sh-xs); }
.rr-kids-hi strong { display: block; font-size: 19px; }
.rr-kids-hi small { font-size: 13px; color: var(--rr-text-muted); }

.rr-kids-stage { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 10px 20px 30px; text-align: center; }
.rr-kids-robin { width: min(280px, 58vw); height: auto; margin-bottom: 8px; }
.rr-kids-bubble {
  position: relative; background: var(--rr-white);
  border: 2px solid var(--rr-line); border-radius: var(--rr-r-xl);
  padding: 20px 28px; max-width: 620px; box-shadow: var(--rr-sh-sm);
  font-size: clamp(19px, 2.6vw, 25px); font-weight: 650; line-height: 1.4; color: var(--rr-ink);
  animation: rr-pop-in .4s var(--rr-spring) both;
}
.rr-kids-bubble::before {
  content: ""; position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
  border: 12px solid transparent; border-bottom-color: var(--rr-line); border-top: 0;
}
.rr-kids-bubble::after {
  content: ""; position: absolute; top: -10px; left: 50%; transform: translateX(-50%);
  border: 11px solid transparent; border-bottom-color: var(--rr-white); border-top: 0;
}

.rr-kids-actions { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; margin-top: 28px; }
.rr-kids-btn {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  min-width: 132px; padding: 20px 22px;
  background: var(--rr-white); border: 3px solid var(--rr-line);
  border-radius: var(--rr-r-lg); cursor: pointer;
  font-family: inherit; font-size: 16px; font-weight: 750; color: var(--rr-ink);
  box-shadow: var(--rr-sh-sm);
  transition: transform var(--rr-mid) var(--rr-spring), border-color var(--rr-mid) var(--rr-ease), box-shadow var(--rr-mid) var(--rr-ease);
}
.rr-kids-btn .ic { font-size: 40px; line-height: 1; }
.rr-kids-btn:hover { transform: translateY(-6px) scale(1.03); border-color: var(--rr-red); box-shadow: var(--rr-sh-md); }
.rr-kids-btn:active { transform: translateY(-1px) scale(.98); }
.rr-kids-btn.mic.on { border-color: var(--rr-red); background: var(--rr-red-soft); animation: rr-mic 1.2s var(--rr-ease) infinite; }
@keyframes rr-mic {
  0%, 100% { box-shadow: 0 0 0 0 var(--rr-red-glow); }
  50% { box-shadow: 0 0 0 14px rgba(226, 58, 27, 0); }
}

.rr-kids-say { display: flex; gap: 10px; margin-top: 26px; width: min(560px, 92vw); }
.rr-kids-say input {
  flex: 1; font-size: 18px; padding: 16px 20px; border-radius: var(--rr-r-pill);
  border: 3px solid var(--rr-line); text-align: center;
}
.rr-kids-say input:focus { border-color: var(--rr-red); }
.rr-kids-say button {
  flex: 0 0 64px; height: 64px; border-radius: 50%; border: none;
  background: var(--rr-red); color: #fff; font-size: 24px; cursor: pointer;
  box-shadow: var(--rr-sh-glow);
  transition: transform var(--rr-mid) var(--rr-spring);
}
.rr-kids-say button:hover { transform: scale(1.08); }

.rr-kids-games { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 16px; width: min(760px, 94vw); margin-top: 8px; }
.rr-kids-game {
  background: var(--rr-white); border: 3px solid var(--rr-line); border-radius: var(--rr-r-lg);
  padding: 22px 16px; cursor: pointer; font-family: inherit; text-align: center;
  box-shadow: var(--rr-sh-sm);
  transition: transform var(--rr-mid) var(--rr-spring), border-color var(--rr-mid) var(--rr-ease);
}
.rr-kids-game:hover { transform: translateY(-5px) rotate(-1.5deg); border-color: var(--rr-gold); }
.rr-kids-game .ic { font-size: 46px; display: block; margin-bottom: 8px; }
.rr-kids-game strong { font-size: 16px; display: block; }
.rr-kids-game small { font-size: 12.5px; color: var(--rr-text-muted); }
.rr-kids-game[disabled] { opacity: .45; cursor: not-allowed; transform: none; }

.rr-kids-option {
  font-size: clamp(20px, 3vw, 28px); font-weight: 750;
  padding: 22px 18px; border-width: 3px; justify-content: center; text-align: center;
}
.rr-kids-option .k { display: none; }

/* =============================================================================
   Tablas compactas de los paneles de escuela
   ============================================================================= */

.rr-people-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.rr-person {
  display: flex; gap: 13px; align-items: flex-start;
  background: var(--rr-white); border: 1px solid var(--rr-line);
  border-radius: var(--rr-r-sm); padding: 15px 16px;
  animation: rr-pop-in .35s var(--rr-ease) both;
}
.rr-person .rr-avatar { width: 40px; height: 40px; flex: 0 0 40px; }
.rr-person-main { flex: 1; min-width: 0; }
.rr-person-main strong { display: block; font-size: 14.5px; }
.rr-person-main .id { font-family: var(--rr-mono); font-size: 11.5px; color: var(--rr-text-faint); }
.rr-person-main .mail { font-size: 12px; color: var(--rr-text-muted); overflow: hidden; text-overflow: ellipsis; }
.rr-person-tags { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 7px; }
.rr-person-actions { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.pill-subdirector { background: var(--rr-blue-soft); color: #1D6373; }
.pill-secretary { background: var(--rr-gold-soft); color: #8A5D00; }

/* Robin en las pantallas de entrar y crear cuenta: cambia de cara según cómo
   vaya el formulario, así que necesita su propio sitio y su propio tamaño. */
.rr-auth-robin { display: block; margin-bottom: 14px; }
.rr-auth-robin .rr-mascot { width: 76px; height: 76px; }
.rr-auth-robin .rr-pose { width: auto; height: auto; max-height: 92px; }

/* Subtítulo dentro de una sección, para separar dos listas distintas. */
.rr-sub-h {
  font-size: 15px; margin: 30px 0 10px;
  color: var(--rr-text-muted); text-transform: uppercase;
  letter-spacing: .07em; font-weight: 800;
}
.rr-sub-h:first-of-type { margin-top: 4px; }

/* Un campo que existe pero no se puede tocar, con el motivo al lado. Mejor que
   esconderlo: así se sabe que la contraseña sí se puede cambiar, y quién. */
.rr-locked-note {
  background: var(--rr-paper-2); border: 1px dashed var(--rr-line-strong);
  border-radius: var(--rr-r-xs); padding: 13px 15px;
  font-size: 13px; color: var(--rr-text-muted); line-height: 1.55;
}

/* El código para compartir de una clase, en la esquina de su tarjeta. */
.rr-class-code { text-align: right; margin-bottom: 6px; }
.rr-class-code small {
  display: block; font-size: 10.5px; font-weight: 800; letter-spacing: .07em;
  text-transform: uppercase; color: var(--rr-text-faint); margin-bottom: 3px;
}
.rr-class-code strong { font-size: 19px; letter-spacing: .12em; color: var(--rr-ink); }

/* Tabla de "quién puede qué". Una fila por acción, con los cargos al lado. */
.rr-perm-table { display: grid; gap: 1px; background: var(--rr-line); border-radius: var(--rr-r-xs); overflow: hidden; }
.rr-perm-row {
  display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 14px;
  background: var(--rr-white); padding: 11px 14px; font-size: 13px; align-items: center;
}
@media (max-width: 620px) { .rr-perm-row { grid-template-columns: 1fr; gap: 6px; } }
.rr-perm-row > span:last-child { display: flex; gap: 5px; flex-wrap: wrap; }
.rr-perm-row em {
  font-style: normal; font-size: 11px; font-weight: 700;
  background: var(--rr-paper-2); color: var(--rr-text-muted);
  padding: 3px 9px; border-radius: 99px; white-space: nowrap;
}

/* Estudiantes por nivel: la barra dice más de un vistazo que el número solo. */
.rr-level-row { display: grid; grid-template-columns: 110px 1fr 34px; gap: 10px; align-items: center; margin-bottom: 9px; font-size: 13px; }
.rr-level-row strong { text-align: right; }
.rr-level-bar { height: 8px; background: var(--rr-paper-2); border-radius: 99px; overflow: hidden; }
.rr-level-bar i { display: block; height: 100%; background: var(--rr-red); border-radius: 99px; animation: rr-grow .7s var(--rr-ease) both; }
@keyframes rr-grow { from { transform: scaleX(0); transform-origin: left; } to { transform: scaleX(1); } }

/* Formulario que se despliega dentro de una tarjeta, en vez de abrir una
   ventana del navegador. Se ve dónde estás mientras escribes, que es
   justo lo que un prompt() te quita. */
.rr-inline-form {
  background: var(--rr-paper); border: 1px dashed var(--rr-line-strong);
  border-radius: var(--rr-r-sm); padding: 14px 16px; margin-top: 12px;
  animation: rr-fade-up .25s var(--rr-ease) both;
}
.rr-inline-form label { display: block; font-size: 12.5px; font-weight: 700; margin-bottom: 7px; color: var(--rr-ink); }
.rr-inline-row { display: flex; gap: 8px; flex-wrap: wrap; }
.rr-inline-row input { flex: 1; min-width: 190px; }
.rr-inline-form small { display: block; margin-top: 8px; font-size: 12px; color: var(--rr-text-muted); line-height: 1.5; }

/* =============================================================================
   RobinAI en la barra lateral
   =============================================================================
   El bloque de Robin dejó de estar suelto arriba: ahora es su propio piso,
   debajo del menú, con su título, su botón de conversación nueva y el
   historial. Así la barra se lee de arriba abajo como lo que es — primero
   dónde estás, luego con quién hablas. */

.rr-side-robin-label {
  cursor: pointer; border-radius: var(--rr-r-xs);
  margin-top: 6px;
  transition: color var(--rr-fast) var(--rr-ease), background var(--rr-fast) var(--rr-ease);
}
.rr-side-robin-label:hover { color: rgba(255, 255, 255, .72); background: rgba(255, 255, 255, .05); }
.rr-side-robin-label > span { display: inline-flex; align-items: center; gap: 8px; }
.rr-side-robin-label .ic { font-size: 12px; }
.rr-side-chats .rr-new-chat { margin-bottom: 8px; }

/* Subtítulo de tercer nivel: dentro de un bloque que ya tiene su .rr-sub-h.
   Hace falta desde que varias pantallas se fusionaron en una. */
.rr-sub-h2 {
  font-size: 13px; margin: 20px 0 8px;
  color: var(--rr-text-faint); text-transform: uppercase;
  letter-spacing: .06em; font-weight: 800;
}
/* Un .rr-sub-h que además lleva un botón a la derecha. */
.rr-sub-title { margin-top: 30px; }
.rr-sub-title .rr-sub-h { margin: 0; }

/* =============================================================================
   El margen de Robin de toda la escuela (panel de dirección)
   ============================================================================= */

.rr-limit-row {
  display: grid; grid-template-columns: 190px 1fr 74px;
  align-items: center; gap: 14px;
  padding: 13px 0; border-bottom: 1px solid var(--rr-line);
}
.rr-limit-row:last-of-type { border-bottom: none; }
@media (max-width: 620px) {
  .rr-limit-row { grid-template-columns: 1fr 64px; }
  .rr-limit-who { grid-column: 1 / -1; }
}
.rr-limit-who { display: flex; align-items: center; gap: 9px; font-size: 14.5px; }
.rr-limit-who .ic { font-size: 17px; }
.rr-limit-row input[type="range"] { width: 100%; accent-color: var(--rr-red); cursor: pointer; }
.rr-limit-out {
  font-family: var(--rr-mono); font-size: 15px; font-weight: 700;
  text-align: right; color: var(--rr-text-muted);
}
.rr-limit-out.subido { color: var(--rr-red-dark); }

/* La comparación de un plan contra el Gratis, en porcentaje: es lo primero que
   se mira de una tarjeta de plan. */
.rr-plan-compare {
  display: inline-block; margin: -10px 0 16px;
  font-size: 12px; font-weight: 800; letter-spacing: .03em;
  padding: 4px 11px; border-radius: 99px;
  background: var(--rr-paper-2); color: var(--rr-text-muted);
}
.rr-plan.popular .rr-plan-compare { background: var(--rr-red-soft); color: var(--rr-red-dark); }

/* La marca sin pajarito: sola, tiene que sostener la pantalla ella misma. */
.rr-brand-xl { font-size: 24px; font-weight: 800; letter-spacing: -.035em; }

/* =============================================================================
   Entrar y crear cuenta en pantalla grande
   =============================================================================
   En una laptop ancha el formulario ya no tiene por qué llevar el "volver"
   dentro de la columna, robándole altura al contenido: se va a la esquina de
   la pantalla, que es donde se busca. En móvil se queda donde estaba, encima
   del formulario, porque ahí una esquina flotante estorba. */

@media (min-width: 941px) {
  /* El hueco de arriba es para el "volver": la columna sigue centrada, pero
     dentro de lo que queda, así que el contenido no puede subir hasta chocar
     con la pastilla de la esquina por corta que sea la ventana. */
  .rr-auth-form-side { position: relative; padding-top: 108px; }
  .rr-auth-back {
    position: absolute; top: 28px; left: 30px; margin-bottom: 0; z-index: 2;
    background: var(--rr-white); border: 1px solid var(--rr-line);
    border-radius: 99px; padding: 9px 17px;
    box-shadow: var(--rr-sh-xs);
  }
  .rr-auth-back:hover { border-color: var(--rr-red); }
}

/* =============================================================================
   Pantallas grandes: que los paneles usen la laptop entera
   =============================================================================
   Igual que en la portada: a 1440 px o más, todo lo que se lee crece — la
   barra lateral, el texto, las tarjetas y las separaciones — en vez de dejar
   una aplicación diminuta flotando en medio de un monitor enorme. Por debajo
   de 1440 px no cambia absolutamente nada. */

@media (min-width: 1440px) {
  :root { --rr-sidebar-w: 300px; }

  .rr-main { padding: 44px 64px 110px; max-width: 1760px; }
  .rr-topbar h1 { font-size: 34px; }
  .rr-topbar .sub { font-size: 16px; }

  .rr-sidebar { padding: 24px 16px 18px; }
  .rr-side-link { font-size: 16px; padding: 12px 16px; }
  .rr-side-link .ic { font-size: 17px; width: 22px; }
  .rr-new-chat { font-size: 15.5px; padding: 13px 16px; }
  .rr-rail-item { font-size: 14.5px; padding: 9px 12px 9px 13px; }
  .rr-usage-top strong { font-size: 14px; }
  .rr-side-user-text strong { font-size: 15px; }
  .rr-side-user-text small { font-size: 12.5px; }

  .rr-section-title h2 { font-size: 24px; }
  .rr-section-lead { font-size: 15.5px; max-width: 760px; }
  .rr-sub-h { font-size: 16px; }
  .rr-sub-h2 { font-size: 14px; }
  .card { font-size: 15.5px; }
  .btn { font-size: 15.5px; }
  .btn-sm { font-size: 14px; }
  .field label { font-size: 14.5px; }
  .field input, .field select, .field textarea { font-size: 16px; }
  .rr-table { font-size: 15px; }
  .rr-chat-body { font-size: 16px; }
  .rr-form-card { max-width: 920px; }

  /* Entrar y crear cuenta: la columna del formulario también respira.
     El ancho y el cuerpo de letra ya suben solos con clamp() más arriba,
     así que aquí solo se suelta el techo. */
  .rr-auth-inner { max-width: 560px; }
  .rr-auth-inner.wide { max-width: 740px; }
  .rr-auth-ways { gap: 13px; }
  .rr-auth-way strong { font-size: 14.5px; }
  .rr-auth-way small { font-size: 12.5px; }
  .rr-auth-robin .rr-mascot { width: 108px; height: 108px; }
  .rr-auth-robin .rr-pose { max-height: 124px; }
  .rr-auth-quote p { font-size: 26px; max-width: 26ch; }
  .rr-auth-quote small { font-size: 14px; }
  .rr-auth-back { top: 38px; left: 44px; font-size: 15px; padding: 11px 20px; }
  .rr-auth-form-side { padding-top: 124px; }
  .rr-choice { padding: 24px 22px; }
  .rr-choice .t { font-size: 17px; }
  .rr-choice .d { font-size: 14px; }
  .rr-choice .ic { font-size: 26px; }
  .rr-choice-grid { gap: 16px; }
  .level-card { padding: 20px 14px; }
  .rr-auth-switch { font-size: 15px; }
  .hint { font-size: 13.5px; }
}

@media (min-width: 1800px) {
  :root { --rr-sidebar-w: 330px; }
  .rr-main { padding: 54px 84px 130px; }
  .rr-topbar h1 { font-size: 38px; }
  .rr-auth-inner { max-width: 620px; }
  .rr-auth-inner.wide { max-width: 840px; }
  .rr-auth-robin .rr-mascot { width: 128px; height: 128px; }
}

/* RobinAI encendido: es la sección que está abierta ahora mismo. */
.rr-side-robin-label.on { color: #fff; background: rgba(255, 255, 255, .07); }

/* Aire entre bloques que se dibujan solos dentro de una sección compartida
   (los pendientes y los minijuegos dentro de "Mis clases"). Sin esto quedan
   pegados al bloque de arriba y parecen parte de él. */
.rr-lead-gap { margin-top: 34px; }
.rr-block-gap { margin-top: 38px; }

/* =============================================================================
   La ventana de los minijuegos
   ============================================================================= */
/* Jugar pasa aquí dentro, encima de todo lo demás. El panel sigue existiendo
   debajo pero no se ve ni se puede mover: jugar no tiene por qué sentirse como
   rellenar un formulario más, debajo del menú y del "Hola, fulano".

   La pantalla se parte en dos, y el reparto no es casual: el reto a la
   izquierda, que es por donde se empieza a leer, y Robin a la derecha, que es
   a donde se levanta la vista buscando ayuda. */

body.rr-arcade-open { overflow: hidden; }

.rr-arcade {
  position: fixed; inset: 0; z-index: 400;
  display: flex; flex-direction: column;
  background: var(--rr-paper);
  animation: rr-arcade-in .28s var(--rr-ease) both;
}
@keyframes rr-arcade-in { from { opacity: 0; transform: scale(.985); } to { opacity: 1; transform: none; } }

.rr-arcade-top {
  display: flex; align-items: center; gap: 16px;
  padding: 12px 20px; border-bottom: 1px solid var(--rr-line);
  background: var(--rr-white); flex: 0 0 auto;
}
.rr-arcade-x {
  border: 1px solid var(--rr-line); background: var(--rr-white);
  border-radius: var(--rr-r-pill); padding: 8px 15px;
  font: inherit; font-size: 13.5px; font-weight: 700; color: var(--rr-text-muted);
  cursor: pointer; transition: all var(--rr-fast) var(--rr-ease); flex: 0 0 auto;
}
.rr-arcade-x:hover { border-color: var(--rr-red); color: var(--rr-red-dark); background: var(--rr-red-soft); }

.rr-arcade-title { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; }
.rr-arcade-title .ic { font-size: 28px; line-height: 1; }
.rr-arcade-title strong { display: block; font-size: 16px; }
.rr-arcade-title small { font-size: 12.5px; color: var(--rr-text-muted); }

.rr-arcade-streak { text-align: center; min-width: 62px; flex: 0 0 auto; }
.rr-arcade-streak strong { display: block; font-size: 24px; color: var(--rr-red); line-height: 1; }
.rr-arcade-streak small { font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--rr-text-faint); }

.rr-arcade-body { flex: 1; min-height: 0; overflow: auto; }
.rr-arcade-body.gallery { padding: 30px 32px 60px; }
.rr-arcade-gallery { max-width: 1140px; margin: 0 auto; }

/* Jugando: la pantalla partida por la mitad.
 *
 *   izquierda   el reto
 *   derecha     Robin, grande, con lo que dice justo debajo
 *
 * Robin ocupa de verdad media pantalla: es el que acompaña, y a tamaño de
 * icono no acompañaba nada. Lo que dice va DEBAJO de él y no encima, que es
 * donde se mira después de mirarlo a él. */
.rr-arcade-body.playing {
  display: grid; grid-template-columns: 1fr 1fr;
  overflow: hidden;
}

.rr-arcade-play {
  display: flex; flex-direction: column; min-width: 0;
  overflow: auto; padding: 34px 32px 0;
}
.rr-arcade-play .rr-board-stage { flex: 1; padding: 0 0 20px; min-height: 0; }
.rr-arcade-play .rr-board-actions {
  border-top: 1px solid var(--rr-line); margin-top: 20px;
  padding: 16px 0 20px; position: sticky; bottom: 0; background: var(--rr-paper);
}

/* Los botones de ayuda, grandes: son la razón por la que Robin está ahí y se
   pulsan con prisa, justo cuando uno se atoró. */
.rr-arcade-play .rr-board-actions .btn {
  font-size: 15px; padding: 13px 20px; border-radius: var(--rr-r-pill);
}

/* ---- La mitad de Robin ---------------------------------------------------- */

.rr-buddy {
  min-width: 0; overflow: hidden;
  display: flex; flex-direction: column; align-items: center;
  padding: 20px 26px 24px; gap: 14px;
  border-left: 1px solid var(--rr-line);
  background: linear-gradient(180deg, var(--rr-white), var(--rr-paper));
}
/* Robin se lleva el espacio de arriba y crece con la ventana; el globo se
   queda abajo con lo que necesite. */
/* Flex y no grid a propósito. Con `display:grid; place-items:center` el
   pájaro no se estira, así que su `height:100%` se mide contra una fila que a
   su vez se mide contra el pájaro: como eso es circular, el navegador lo
   resuelve como `auto` y usa el alto natural de la imagen — 900 px dentro de
   una caja de 775, desbordando por abajo y saliéndose de la columna. En flex
   la caja sí tiene un alto definido y el 100 % significa lo que parece. */
.rr-buddy-bird {
  flex: 1; min-height: 0; width: 100%;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.rr-buddy-bird .rr-mascot {
  width: auto; height: 100%; max-height: 100%; max-width: 100%;
  object-fit: contain;
  filter: drop-shadow(0 10px 26px rgba(20, 20, 20, .12));
}

.rr-buddy-bubble {
  flex: 0 0 auto; width: 100%; max-height: 42%; overflow-y: auto;
  background: var(--rr-white); border: 1px solid var(--rr-line);
  border-radius: 20px; padding: 17px 20px; box-shadow: var(--rr-sh-sm);
}
.rr-buddy-bubble[hidden] { display: none; }
.rr-buddy-bubble p { margin: 0 0 8px; font-size: 15px; line-height: 1.6; }
.rr-buddy-bubble p:last-child { margin-bottom: 0; }
.rr-buddy-bubble em { display: block; font-style: normal; font-weight: 700; font-size: 14px; margin-bottom: 8px; color: var(--rr-ink); }
.rr-buddy-bubble ol { margin: 0 0 8px; padding-left: 20px; font-size: 14.5px; line-height: 1.7; }
.rr-buddy-bubble small, .rr-buddy-small { display: block; font-size: 12px; color: var(--rr-text-muted); }
.rr-buddy-bubble .btn { margin-top: 10px; font-size: 14.5px; padding: 11px 18px; }
.rr-buddy-bubble.ok { background: var(--rr-green-soft); border-color: transparent; }
.rr-buddy-bubble.no { background: var(--rr-gold-soft); border-color: transparent; }
.rr-buddy-bubble.help { background: var(--rr-blue-soft); border-color: transparent; }
.rr-buddy-bubble.limit { background: var(--rr-gold-soft); border-color: transparent; }

/* Robin acierta y Robin falla.
   -----------------------------------------------------------------------------
   Lo pone robinReacciona() en games-ui.js, cambiando la pose del pajarito de la
   esquina. Aquí solo está el movimiento que acompaña a cada una.

   Las dos reglas llevan .rr-mascot delante a propósito: cada pose ya trae su
   animación (.rr-pose-happy brinca, .rr-pose-sad suspira) y con una sola clase
   empatarían en especificidad. Con dos, mandan estas, que son las del momento.

   La del fallo (.rr-robin-falla) ya no está aquí: se usa en toda la app desde
   que los avisos flotantes también sacuden a Robin, así que vive arriba, con
   el brinco, en la sección de la mascota. */

/* El acierto: el brinco de la pose de contento, pero más alto y con un giro,
   porque es el único momento del juego que vale la pena celebrar. Va junto al
   confeti que suelta robinReacciona(). */
.rr-buddy-bird .rr-mascot.rr-pose-happy { animation: rr-robin-acierta 1.05s var(--rr-spring) 2; }
@keyframes rr-robin-acierta {
  0%, 100% { transform: translateY(0) rotate(0deg) scale(1); }
  20% { transform: translateY(-26px) rotate(-6deg) scale(.96, 1.07); }
  45% { transform: translateY(0) rotate(3deg) scale(1.06, .95); }
  65% { transform: translateY(-11px) rotate(-2deg) scale(1.01); }
}

/* Con el movimiento reducido del sistema no se sacude ni brinca: se queda el
   cambio de dibujo, que es lo que de verdad lleva la información. */
@media (prefers-reduced-motion: reduce) {
  .rr-buddy-bird .rr-mascot.rr-pose-happy { animation: none; }
}

/* Al decir algo, el globo entra dando un saltito: es lo que hace que se note
   que Robin reaccionó y no que el texto cambió solo. */
.rr-buddy-pop { animation: rr-buddy-pop .34s var(--rr-spring) both; }
@keyframes rr-buddy-pop {
  from { opacity: 0; transform: translateY(10px) scale(.94); }
  to   { opacity: 1; transform: none; }
}

/* En pantalla angosta no se parte en dos: Robin se pone arriba, en pequeño,
   y el reto ocupa el resto — que es lo que hay que ver. */
@media (max-width: 900px) {
  .rr-arcade-body.playing { display: flex; flex-direction: column; overflow: auto; }
  .rr-arcade-play { padding: 22px 20px 0; overflow: visible; order: 2; }
  .rr-buddy {
    order: 1; border-left: none; border-bottom: 1px solid var(--rr-line);
    flex-direction: row; align-items: center; padding: 14px 18px; gap: 14px;
  }
  .rr-buddy-bird { flex: 0 0 auto; width: auto; }
  .rr-buddy-bird .rr-mascot { height: auto; max-height: 110px; }
  .rr-buddy-bubble { max-height: none; padding: 13px 15px; }
  .rr-buddy-bubble p { font-size: 14px; }
  .rr-arcade-play .rr-board-actions .btn { font-size: 14px; padding: 11px 16px; }
}

/* La tarjeta que queda en el panel cuando los juegos viven en su ventana. */
.rr-games-away { display: flex; align-items: center; gap: 20px; padding: 24px; max-width: 640px; }
.rr-games-away-bird { width: auto; height: auto; max-height: 92px; flex: 0 0 auto; }
.rr-games-away h3 { font-size: 17px; margin: 0 0 5px; }
.rr-games-away p { font-size: 13.5px; color: var(--rr-text-muted); margin: 0 0 14px; }
@media (max-width: 560px) { .rr-games-away { flex-direction: column; text-align: center; } }

/* ---- Retos de armar con piezas -------------------------------------------- */
/* Una fila de huecos arriba y el montón de piezas abajo. Las piezas se pueden
   arrastrar o tocar: arrastrar en una tableta es incómodo y el reto tiene que
   ser la materia, no la puntería. */

.rr-round-lead { font-size: 14px; color: var(--rr-text-muted); margin: -14px 0 20px; }

.rr-build { display: flex; flex-direction: column; gap: 22px; }

.rr-build-slots {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
  min-height: 62px; padding: 14px 16px;
  background: var(--rr-white); border: 2px dashed var(--rr-line-strong);
  border-radius: var(--rr-r-md);
  transition: border-color var(--rr-fast) var(--rr-ease);
}
.rr-build.tight .rr-build-slots { gap: 5px; }
.rr-build-slots.right { border-color: var(--rr-green); border-style: solid; background: var(--rr-green-soft); }
.rr-build-slots.wrong { border-color: var(--rr-danger); animation: rr-shake .4s var(--rr-ease); }

.rr-build-slot {
  display: grid; place-items: center;
  min-width: 54px; height: 46px; padding: 0 12px;
  border-radius: var(--rr-r-xs); background: var(--rr-paper-2);
  border: 1px solid transparent;
  font-size: 17px; font-weight: 700; color: var(--rr-ink);
  cursor: default; transition: all var(--rr-fast) var(--rr-ease);
}
.rr-build.tight .rr-build-slot { min-width: 40px; padding: 0 6px; }
.rr-build-slot.filled { background: var(--rr-ink); color: #fff; cursor: pointer; }
.rr-build-slot.filled:hover { background: var(--rr-red); }
.rr-build-slot.over { background: var(--rr-red-soft); border-color: var(--rr-red); }

.rr-build-bank { display: flex; flex-wrap: wrap; gap: 10px; }
.rr-build-piece {
  min-width: 54px; height: 46px; padding: 0 14px;
  border: 2px solid var(--rr-line); background: var(--rr-white);
  border-radius: var(--rr-r-xs);
  font: inherit; font-size: 17px; font-weight: 700; color: var(--rr-ink);
  cursor: grab; animation: rr-pop-in .3s var(--rr-ease) both;
  transition: all var(--rr-fast) var(--rr-ease);
}
.rr-build-piece:hover:not(.used) { border-color: var(--rr-red); transform: translateY(-2px); box-shadow: var(--rr-sh-sm); }
.rr-build-piece.dragging { opacity: .4; cursor: grabbing; }
.rr-build-piece.used { opacity: .25; pointer-events: none; }
.rr-build-piece:disabled { opacity: .35; cursor: default; }

.rr-build-actions { display: flex; gap: 10px; align-items: center; }

/* Las piezas largas —una línea de programa, un paso de un algoritmo— no caben
   en una ficha de ancho fijo: se estiran y respetan su propia sangría. */
.rr-build-piece, .rr-build-slot { white-space: pre-wrap; text-align: left; }
.rr-build.lines .rr-build-slots,
.rr-build.lines .rr-build-bank { flex-direction: column; align-items: stretch; }
.rr-build.lines .rr-build-piece,
.rr-build.lines .rr-build-slot {
  width: 100%; height: auto; min-height: 44px; padding: 11px 14px;
  font-family: var(--rr-mono); font-size: 14px; white-space: pre;
  overflow-x: auto; justify-items: start; display: flex; align-items: center;
}

/* ---- Armar con piezas, versión peques -------------------------------------
   Lo mismo que en el panel grande pero todo el doble de grande y sin
   arrastrar: a esta edad el dedo no tiene esa puntería todavía, y el reto
   tiene que ser la palabra, no atinarle al hueco. */

.rr-kids-build { display: flex; flex-direction: column; align-items: center; gap: 20px; }

.rr-kids-slots {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 10px;
  min-height: 82px; padding: 14px 18px;
  background: #fff; border: 3px dashed var(--rr-line-strong); border-radius: 22px;
}
.rr-kids-build.tight .rr-kids-slots { gap: 6px; }
.rr-kids-slots.right { border-style: solid; border-color: var(--rr-green); background: var(--rr-green-soft); }
.rr-kids-slots.wrong { border-color: var(--rr-danger); animation: rr-shake .4s var(--rr-ease); }

.rr-kids-slot {
  display: grid; place-items: center;
  min-width: 64px; height: 64px; padding: 0 14px;
  border-radius: 16px; background: var(--rr-paper-2);
  font-size: 30px; font-weight: 800; color: var(--rr-ink);
  transition: all var(--rr-fast) var(--rr-ease);
}
.rr-kids-slot.filled { background: var(--rr-ink); color: #fff; cursor: pointer; }
.rr-kids-slot.filled:active { transform: scale(.94); }

.rr-kids-bank { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.rr-kids-piece {
  min-width: 64px; height: 64px; padding: 0 16px;
  border: 3px solid var(--rr-line); background: #fff; border-radius: 16px;
  font: inherit; font-size: 30px; font-weight: 800; color: var(--rr-ink);
  cursor: pointer; transition: all var(--rr-fast) var(--rr-spring);
}
.rr-kids-piece:hover:not(.used) { border-color: var(--rr-red); transform: translateY(-3px); }
.rr-kids-piece:active:not(.used) { transform: scale(.92); }
.rr-kids-piece.used { opacity: .22; pointer-events: none; }

/* =============================================================================
   Robin encima del saludo
   ============================================================================= */
/* El único sitio de cada panel donde sale la cara de Robin. Antes salía además
   en la cabecera del chat, en cada burbuja que contestaba y en cada aviso, y
   de tanto repetirse dejaba de mirarse. Aquí sí: es lo primero que se ve al
   entrar, encima del "Hola, fulano", y al hacerle clic se pone a hablar. */

/* (El Robin que estaba encima del "Hola, fulano" se movió al saludo del chat:
   ver .rr-hello-robin. Allí reacciona a lo que haces; aquí solo decoraba.) */

/* =============================================================================
   Mis pendientes en una pantalla de PC
   ============================================================================= */
/* La lista iba encajonada: angosta, con su propio scroll dentro de un alto
   fijo, y en un monitor quedaba media pantalla vacía al lado. Ahora el panel
   se estira —a lo ancho y a lo alto— y la lista corre con la página en vez de
   tener su propia barrita de scroll metida dentro de la caja. */

@media (min-width: 1100px) {
  .rr-tasks-wrap { grid-template-columns: minmax(0, 1fr) 300px; gap: 26px; }
  .rr-tasks { max-height: none; min-height: calc(100vh - 320px); }
  .rr-tasks-head { padding: 22px 26px 14px; }
  .rr-tasks-head h3 { font-size: 19px; }
  .rr-task-add { padding: 18px 24px 12px; }
  .rr-task-filters { padding: 0 24px 14px; }
  .rr-task-list { overflow-y: visible; padding: 6px 18px 20px; }
  .rr-task { padding: 14px 12px; gap: 14px; }
  .rr-task-title { font-size: 15px; }
  .rr-task-meta { font-size: 12px; }
}
@media (min-width: 1600px) {
  .rr-tasks-wrap { grid-template-columns: minmax(0, 1fr) 340px; gap: 32px; }
  .rr-task-title { font-size: 16px; }
}

/* =============================================================================
   La conexión con Claude (pantalla de configuración)
   ============================================================================= */

.rr-ai-card { max-width: 680px; }
.rr-ai-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
.rr-ai-head h3 { margin: 0; font-size: 16px; }
.rr-ai-lead { font-size: 13.5px; margin-bottom: 18px; }

/* El estado, de un vistazo: conectado, sin probar, falla o sin llave. */
.rr-ai-dot {
  flex: 0 0 auto; font-size: 11px; font-weight: 800;
  letter-spacing: .05em; text-transform: uppercase;
  padding: 5px 11px; border-radius: 99px;
}
.rr-ai-dot.ok { background: var(--rr-green-soft); color: var(--rr-green); }
.rr-ai-dot.bad { background: var(--rr-danger-soft); color: var(--rr-danger); }
.rr-ai-dot.unknown { background: var(--rr-gold-soft); color: #8A5D00; }
.rr-ai-dot.off { background: var(--rr-paper-2); color: var(--rr-text-faint); }

.rr-ai-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin: 18px 0 4px; }

/* Lo que contestó la petición de prueba. Se enseña entero —el código de
   estado, el tiempo, el modelo— porque "¿se envió bien?" no se responde con
   un tic verde: se responde con lo que dijo el servidor. */
.rr-ai-result {
  margin-top: 16px; border-radius: var(--rr-r-sm); padding: 16px 18px;
  animation: rr-fade-up .3s var(--rr-ease) both;
}
.rr-ai-result.ok { background: var(--rr-green-soft); }
.rr-ai-result.bad { background: var(--rr-danger-soft); }
.rr-ai-result strong { display: block; font-size: 14.5px; margin-bottom: 8px; }
.rr-ai-result p { font-size: 13.5px; line-height: 1.55; margin: 0 0 10px; }
.rr-ai-result ul { list-style: none; padding: 0; margin: 0 0 10px; display: grid; gap: 5px; }
.rr-ai-result li { display: flex; justify-content: space-between; gap: 14px; font-size: 13px; }
.rr-ai-result li span { color: var(--rr-text-muted); }
.rr-ai-result li em {
  font-style: normal; font-weight: 700; text-align: right;
  font-family: var(--rr-mono); font-size: 12.5px; word-break: break-word;
}
.rr-ai-result small { font-size: 11.5px; color: var(--rr-text-muted); }

/* =============================================================================
   Preguntar dentro de un minijuego
   =============================================================================

   Debajo del reto quedaba media columna en blanco. Ahí va la caja de
   preguntar — y no como relleno: las pistas están escritas de antemano y
   valen para el reto entero, pero la duda real de quien se atasca casi nunca
   es "dame una pista", es "¿por qué el % da 1 y no 3.5?".

   Se coloca sola (ver colocarChatDelReto en games-ui.js):

     .rr-arcade-chat          debajo del reto, donde están las preguntas
     .rr-arcade-chat.beside   al lado, debajo de Robin, cuando el reto es
                              largo y ya no cabe nada más en su columna
                              (ordenar las líneas de un programa, por ejemplo)
   ============================================================================= */

.rr-arcade-chat {
  display: flex; flex-direction: column; min-height: 0;
  background: var(--rr-white); border: 1px solid var(--rr-line);
  border-radius: var(--rr-r-md); overflow: hidden;
  margin-top: 18px; flex: 0 1 auto; max-height: 300px;
  animation: rr-fade-up .34s var(--rr-ease) both;
}

.rr-ac-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 14px; border-bottom: 1px solid var(--rr-line);
  background: var(--rr-paper);
}
.rr-ac-title { font-size: 13px; font-weight: 700; color: var(--rr-text-muted); }
.rr-ac-fold {
  border: none; background: none; cursor: pointer;
  width: 24px; height: 24px; border-radius: 6px;
  font-size: 16px; line-height: 1; color: var(--rr-text-faint);
}
.rr-ac-fold:hover { background: var(--rr-paper-2); color: var(--rr-text); }

.rr-ac-body {
  flex: 1; min-height: 0; overflow-y: auto;
  padding: 12px 14px; display: flex; flex-direction: column; gap: 9px;
}
.rr-ac-empty { margin: 0; font-size: 13px; color: var(--rr-text-faint); line-height: 1.5; }

.rr-ac-msg { font-size: 13.5px; line-height: 1.55; max-width: 92%; }
.rr-ac-msg.user {
  align-self: flex-end; background: var(--rr-red); color: #fff;
  padding: 8px 13px; border-radius: 15px 15px 4px 15px;
}
.rr-ac-msg.bot {
  align-self: flex-start; color: var(--rr-text);
  border-left: 3px solid var(--rr-line-strong); padding-left: 11px;
}
.rr-ac-msg.bot.limit { border-left-color: var(--rr-gold); }

.rr-ac-form { display: flex; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--rr-line); }
.rr-ac-form input {
  flex: 1; min-width: 0; font-size: 13.5px;
  padding: 9px 13px; border: 1px solid var(--rr-line); border-radius: var(--rr-r-pill);
  background: var(--rr-paper);
}
.rr-ac-form input:focus { outline: none; border-color: var(--rr-red); background: var(--rr-white); }
.rr-ac-form button {
  flex: 0 0 36px; width: 36px; height: 36px; border: none; border-radius: 50%;
  background: var(--rr-red); color: #fff; font-size: 14px; cursor: pointer;
}
.rr-ac-form button:hover { background: var(--rr-red-dark); }

/* Plegada: solo la cabecera, para recuperar el sitio cuando estorba. */
.rr-arcade-chat.folded .rr-ac-body,
.rr-arcade-chat.folded .rr-ac-form { display: none; }

/* Al lado de Robin, y ARRIBA de él. Ahí el fondo es un degradado, así que la
   caja se apoya en blanco puro para despegarse.

   Antes iba debajo del pájaro, y para caber le quitaba alto: Robin se
   encogía a poco más de la mitad justo cuando alguien se había atascado y
   había ido a buscarlo. Ahora va arriba del todo —que además es donde se
   está escribiendo, así que se lee antes— y el pájaro no se toca. */
.rr-arcade-chat.beside {
  width: 100%; flex: 0 0 auto; max-height: 300px;
  margin-top: 0; margin-bottom: 16px; box-shadow: var(--rr-sh-sm);
}

/* Con la caja en su columna, la columna deja pasar el scroll en vez de
   apretar a nadie, y el pájaro conserva un mínimo por debajo del cual no baja.
   Que Robin se lleve el hueco que sobre sigue siendo su `flex: 1` de siempre:
   aquí no se le pone ningún tope. */
.rr-buddy.with-chat { overflow-y: auto; justify-content: flex-start; }
.rr-buddy.with-chat .rr-buddy-bird { flex: 1 1 auto; min-height: 220px; }

@media (max-width: 900px) {
  .rr-arcade-chat { max-height: 260px; margin-bottom: 16px; }
  .rr-arcade-chat.beside { max-height: 260px; }
  /* En pantalla angosta la columna de Robin es una tira horizontal (ver el
     @media de arriba): ahí el mínimo del pájaro no aplica. */
  .rr-buddy.with-chat { overflow: visible; }
  .rr-buddy.with-chat .rr-buddy-bird { min-height: 0; }
}

/* =============================================================================
   Escalado del panel en pantalla de escritorio
   =============================================================================

   Entre 1200 y 1440 px —la pantalla de la mayoría de los portátiles— el panel
   se quedaba con los tamaños de partida: títulos de 20 px, 40 px de margen y
   las tarjetas apretadas arriba a la izquierda con un pasillo vacío a la
   derecha. Todo se veía pequeño y lejos.

   Son dos bloques a propósito:

     el primero  es un ESCALÓN, no un techo: vale solo hasta 1439 px, porque
                 de 1440 en adelante manda el bloque de arriba, que sube más.
                 Sin ese tope lo pisaría, por ir después en el archivo.
     el segundo  sube de 1200 en adelante y no se solapa con nada: son
                 rejillas y medidas que el bloque de 1440 no toca.

   Así el crecimiento es continuo —1200, 1440, 1800— en vez de dar un salto
   brusco al final.
   ============================================================================= */

@media (min-width: 1200px) and (max-width: 1439.98px) {
  .rr-main { padding: 38px 54px 100px; }
  .rr-topbar { margin-bottom: 34px; }
  .rr-topbar h1 { font-size: 31px; }
  .rr-topbar .sub { font-size: 15px; }
  .rr-section-title h2 { font-size: 22px; }
  .rr-section-lead { font-size: 15px; max-width: 72ch; }
  .card { font-size: 15px; }
  .btn { font-size: 15px; }
}

@media (min-width: 1200px) {
  /* Las rejillas de fichas aprovechan el ancho de más en vez de estirar cada
     ficha hasta dejarle la foto deformada y el texto en una sola línea. */
  .rr-people-grid { grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); }
  .rr-child-grid { grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); }
  .rr-att-tally { grid-template-columns: repeat(4, minmax(0, 1fr)); }

  /* La fila del pase de lista: la foto y el número crecen, que son lo que se
     mira de reojo mientras se pasa lista con treinta personas delante. */
  .rr-att-row { grid-template-columns: 60px 64px minmax(0, 1fr) auto; padding: 13px 18px; }
  .rr-att-face { width: 64px; height: 64px; flex-basis: 64px; }
  .rr-att-num { width: 60px; height: 46px; font-size: 17px; }
  .rr-att-who strong { font-size: 16px; }
  .rr-att-mark { font-size: 13.5px; padding: 8px 15px; }

  .rr-day-strip { padding: 16px 22px; }
  .rr-day-strip strong { font-size: 17.5px; }
}

/* El rótulo que va debajo de las tres tarjetas de Asistencia necesita aire:
   pegado a ellas se leía como el pie de la última. */
#section-attendance .rr-sub-h { margin-top: 34px; }
#section-attendance .rr-section-lead { max-width: 80ch; }

/* ---- La casilla del código para activar la cuenta ------------------------ */
/* Seis cifras que alguien copia de un correo o teclea mirando el teléfono.
   Grandes, separadas y centradas: a este tamaño no se confunde un 0 con una O
   ni se pierde la cuenta de por dónde va. */

.rr-code-input {
  font-size: 30px;
  font-weight: 700;
  letter-spacing: .38em;
  text-align: center;
  /* La separación se pinta a la derecha de cada cifra, así que el texto queda
     descentrado por un hueco. Este padding se lo devuelve. */
  text-indent: .38em;
  font-variant-numeric: tabular-nums;
  font-family: var(--rr-mono);
  color: var(--rr-red-dark);
  padding-top: 14px;
  padding-bottom: 14px;
}

.rr-code-input::placeholder {
  color: var(--rr-text-faint);
  font-weight: 500;
}

/* "Mandar otro código": es una acción, no un destino, así que es un botón —
   pero se lee como el enlace que la gente espera ahí. */
.rr-link-btn {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: var(--rr-red);
  font-weight: 600;
  cursor: pointer;
  text-decoration: underline;
}

.rr-link-btn:disabled {
  color: var(--rr-text-faint);
  cursor: default;
  text-decoration: none;
}

/* =============================================================================
   En un teléfono
   =============================================================================
   Lo de arriba está pensado en una pantalla ancha y después se estrecha. Esto
   es al revés: son las cosas que solo se notan con el teléfono en la mano y
   que ninguna regla de las de arriba arregla sola.

   Van al final del archivo a propósito: comparten especificidad con lo que
   corrigen, y aquí gana el último. */

@media (max-width: 860px) {
  /* 1. El zoom que nadie pidió.
     Safari en iPhone hace zoom al tocar cualquier campo que tenga la letra
     por debajo de 16 px, y ese zoom no se deshace solo: te deja el formulario
     a medio salir de la pantalla y arrastrando de lado para leer. No se
     arregla con maximum-scale —eso además le quita el zoom a quien lo
     necesita de verdad— sino subiendo la letra a 16. */
  input[type="text"], input[type="email"], input[type="password"], input[type="search"],
  input[type="date"], input[type="number"], input[type="tel"], input[type="file"],
  select, textarea { font-size: 16px; }

  /* 2. Sitios donde tocar.
     Un dedo son unos 9 mm. Los botones pequeños de una barra de herramientas
     se pueden pulsar con el ratón y no con el pulgar. */
  .btn, .btn-sm { min-height: 44px; }
  .btn-sm { padding: 10px 16px; }
  .rr-side-link { padding: 12px 14px; }
  .rr-rail-item { padding: 11px 10px 11px 12px; }
  /* El botón de borrar una conversación no aparece al pasar el mouse por
     encima, porque no hay mouse: se ve siempre. */
  .rr-rail-del { opacity: .6; padding: 6px 8px; }

  /* 3. El alto de la ventana en un navegador de teléfono.
     100vh cuenta la pantalla entera, incluida la barra de direcciones que se
     esconde al bajar: con eso, el pie de la barra lateral queda debajo del
     borde y no se llega nunca. dvh es el alto de verdad en cada momento. */
  .rr-app { min-height: 100dvh; }
  .rr-sidebar { height: 100dvh; }
  .rr-auth-split { min-height: 100dvh; }

  /* 4. La muesca y la barra de gestos.
     La barra lateral ocupa el alto entero, así que su contenido tiene que
     empezar por debajo de la muesca y acabar por encima del gesto de inicio. */
  .rr-sidebar {
    padding-top: calc(18px + env(safe-area-inset-top));
    padding-bottom: calc(14px + env(safe-area-inset-bottom));
    padding-left: calc(12px + env(safe-area-inset-left));
  }

  /* 5. Con el menú abierto, lo de atrás no se mueve.
     Sin esto, arrastrar el dedo sobre el menú hace scroll de la página que
     está debajo: se cierra el menú y has perdido el sitio donde estabas. */
  body.rr-menu-abierto { overflow: hidden; }

  /* 6. La cabecera de cada pantalla.
     El título y su botón no caben en una línea: el botón se va abajo y ocupa
     el ancho, que es donde se pulsa sin apuntar. */
  .rr-topbar { flex-direction: column; align-items: stretch; gap: 12px; }
  .rr-topbar h1 { font-size: 24px; }
  .rr-topbar > div:last-child:not(:only-child) { display: flex; flex-wrap: wrap; gap: 8px; }
  .rr-topbar > div:last-child:not(:only-child) .btn { flex: 1 1 auto; }

  /* 7. Las tablas anchas.
     Ya tenían scroll propio (.rr-table-wrap), pero sin un borde que lo diga
     parece que la tabla está cortada. El degradado de la derecha es la pista
     de que hay más. */
  .rr-table-wrap { position: relative; }
  .rr-table-wrap::after {
    content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 26px;
    pointer-events: none; border-radius: 0 var(--rr-r-md) var(--rr-r-md) 0;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0), var(--rr-white));
  }
}

@media (max-width: 560px) {
  .rr-main { padding: 16px 14px calc(70px + env(safe-area-inset-bottom)); }
  .rr-topbar h1 { font-size: 22px; }
  .card { padding: 16px 14px; }

  /* Crear cuenta y entrar: la columna del formulario respira lo justo y el
     "volver" se queda pegado arriba, que es donde se busca. */
  .rr-auth-inner { padding-left: 2px; padding-right: 2px; }
  .rr-auth-back { margin-bottom: 14px; }

  /* Las fichas de "qué tipo de cuenta" en una columna ya estaban; lo que
     faltaba era que no fueran tan altas: en un teléfono, cuatro fichas de
     ciento y pico píxeles son cuatro pantallas de scroll antes del primer
     campo. */
  .rr-choice { padding: 15px 15px; }
  .rr-choice .ic { font-size: 21px; }
  .rr-choice .t { font-size: 15.5px; }
  .rr-choice .d { font-size: 13px; line-height: 1.45; }

  .level-grid { gap: 8px; }
  .level-card { padding: 12px 8px; }
  .level-icon { font-size: 22px; }
  .level-name { font-size: 12.5px; }
}

/* =============================================================================
   La lupa
   =============================================================================
   Un solo número, --rr-lupa, que agranda el texto de Robin y el de los
   minijuegos. Lo pone la consola de demostración (Ctrl + Alt + Shift + R) y se
   guarda en este navegador; ver la sección «La lupa» en public/js/consola.js.

   Para qué: enseñar el proyecto desde el fondo de un salón. A 15,5 px la
   respuesta de Robin no se lee ni desde la tercera fila, y subirle el zoom al
   navegador entero desmonta la maqueta —la barra lateral se come media
   pantalla y los botones se salen de su fila.

   Por eso agranda SOLO lo que hay que leer de lejos y deja quieto todo lo
   demás: el menú, las tarjetas, las cabeceras. Lo que crece es lo que dice
   Robin, lo que se le escribe, el enunciado del reto y sus opciones.

   Cada regla repite su tamaño de partida multiplicado por la variable. Es
   repetición, sí, pero la alternativa —meter la lupa dentro de cada regla de
   arriba— dejaría el número suelto por media hoja y sin manera de ver de un
   vistazo qué agranda y qué no. Con la lupa en 1 (lo normal) esto no cambia
   absolutamente nada.
   ============================================================================= */

:root { --rr-lupa: 1; }

/* ---- Lo que dice Robin, y lo que se le escribe --------------------------- */
.rr-bubble .txt { font-size: calc(15.5px * var(--rr-lupa)); }
.rr-chat-hello h3 { font-size: calc(26px * var(--rr-lupa)); }
.rr-chat-hello p { font-size: calc(14.5px * var(--rr-lupa)); }
.rr-composer textarea { font-size: calc(15.5px * var(--rr-lupa)); }

/* La etiqueta de la regla («Robin guía, no resuelve») crece con su burbuja:
   suelta a 10,5 px al lado de un texto grande parecía una errata. */
.rr-bubble.tutor .txt::after,
.rr-bubble.guardia .txt::after,
.rr-bubble.respeto .txt::after { font-size: calc(10.5px * var(--rr-lupa)); }

/* ---- Los minijuegos ------------------------------------------------------ */
.rr-round-prompt { font-size: calc(20px * var(--rr-lupa)); }
.rr-round-code { font-size: calc(14.5px * var(--rr-lupa)); }
.rr-option { font-size: calc(15px * var(--rr-lupa)); }
.rr-build-slot, .rr-build-piece { font-size: calc(17px * var(--rr-lupa)); }
.rr-round-input input { font-size: calc(17px * var(--rr-lupa)); }

/* Robin en su esquina del reto, y la caja de preguntarle. */
.rr-buddy-bubble p { font-size: calc(15px * var(--rr-lupa)); }
.rr-ac-msg { font-size: calc(13.5px * var(--rr-lupa)); }
.rr-ac-empty { font-size: calc(13px * var(--rr-lupa)); }
.rr-ac-form input { font-size: calc(13.5px * var(--rr-lupa)); }

/* ---- Los peques ---------------------------------------------------------- */
/* Aquí el tamaño de partida ya es elástico, así que la lupa multiplica el
   clamp entero en vez de un número fijo. */
.rr-kids-bubble { font-size: calc(clamp(19px, 2.6vw, 25px) * var(--rr-lupa)); }

/* Con la lupa muy subida, las piezas de armar y los botones de opción tienen
   que crecer de alto también: si no, la letra se sale de su caja. Se hace con
   el mismo número, para que no haya dos ajustes que cuadrar a mano. */
.rr-build-slot, .rr-build-piece { height: calc(46px * var(--rr-lupa)); min-width: calc(54px * var(--rr-lupa)); }