/* =============================================================================
   consola.css — la consola de demostración (Ctrl + Alt + Shift + R)
   =============================================================================
   Hoja aparte y sin depender de style.css ni de landing.css: la consola se
   abre igual en la portada, en los términos o dentro de un panel, y cada una
   de esas páginas carga hojas distintas. Todo lo que necesita está aquí, con
   colores propios y en oscuro, para que se distinga de un vistazo de la
   aplicación de verdad: no es una pantalla del producto.
   ============================================================================= */

.rr-consola-fondo {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  background: rgba(12, 12, 14, .62);
  backdrop-filter: blur(3px);
  animation: rr-consola-entra .18s ease both;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
@keyframes rr-consola-entra { from { opacity: 0; } to { opacity: 1; } }

.rr-consola {
  width: min(880px, 100%); max-height: min(88vh, 900px);
  display: flex; flex-direction: column;
  background: #16181D; color: #E7E9EE;
  border: 1px solid #2C3038; border-radius: 14px;
  box-shadow: 0 32px 90px rgba(0, 0, 0, .55);
  overflow: hidden;
  animation: rr-consola-sube .22s cubic-bezier(.22, .61, .36, 1) both;
}
@keyframes rr-consola-sube { from { transform: translateY(14px) scale(.985); } to { transform: none; } }

.rr-consola-head {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 16px 20px; border-bottom: 1px solid #2C3038; background: #1B1E24;
}
.rr-consola-head strong { display: block; font-size: 15px; letter-spacing: -.01em; }
.rr-consola-head small { display: block; font-size: 12px; color: #8A929F; margin-top: 3px; }
.rr-consola-x {
  background: none; border: none; color: #8A929F; font-size: 26px; line-height: 1;
  cursor: pointer; padding: 0 4px; transition: color .15s;
}
.rr-consola-x:hover { color: #E7E9EE; }

.rr-consola-body {
  display: grid; grid-template-columns: 1.25fr 1fr; gap: 0;
  /* Se puede rodar: con el panel de escuelas debajo, la ventana ya no cabe
     entera en alto. Antes era overflow: hidden porque las dos columnas de
     arriba siempre cabian. */
  overflow-y: auto; min-height: 0;
  /* Y las filas miden lo que mide su contenido. Sin esto, align-content vale
     stretch y reparte el alto de la ventana a partes iguales entre las tres:
     la de arriba se queda corta, la lista de cuentas se sale por abajo y se
     pinta encima del bloque siguiente. */
  align-content: start;
}
@media (max-width: 760px) { .rr-consola-body { grid-template-columns: 1fr; } }

.rr-consola-bloque {
  padding: 18px 20px; display: flex; flex-direction: column;
  /* min-width: 0 para que las columnas respeten su 1.25fr / 1fr: sin esto,
     un correo largo sin espacios estira su columna y aplasta la otra.
     El alto no se toca: cada bloque mide lo que mide su contenido y el cuerpo,
     que rueda, se encarga del resto. Con min-height: 0 el grid les quitaba
     altura y lo de dentro se dibujaba encima del bloque siguiente. */
  min-width: 0;
}
.rr-consola-bloque + .rr-consola-bloque { border-left: 1px solid #2C3038; }
@media (max-width: 760px) {
  .rr-consola-bloque + .rr-consola-bloque { border-left: none; border-top: 1px solid #2C3038; }
}
.rr-consola-bloque h4 { margin: 0 0 4px; font-size: 13px; letter-spacing: .04em; text-transform: uppercase; color: #9AA3B2; }
.rr-consola-bloque > p { margin: 0 0 12px; font-size: 13px; line-height: 1.5; color: #8A929F; }

.rr-consola-buscar {
  width: 100%; box-sizing: border-box; margin-bottom: 10px;
  padding: 10px 12px; font-size: 14px; font-family: inherit;
  background: #0F1115; color: #E7E9EE;
  border: 1px solid #2C3038; border-radius: 8px;
}
.rr-consola-buscar:focus { outline: none; border-color: #4C90F0; }

/* La lista se queda con lo que le deje el bloque y rueda por dentro. Su alto
   mínimo no se pide aquí sino en el bloque (ver más abajo): como la lista es
   un contenedor que rueda, no cuenta para lo que mide el bloque, y pedirlo
   aquí solo conseguía que se saliera por abajo. */
.rr-consola-lista { flex: 1; min-height: 0; overflow-y: auto; margin: 0 -6px; padding: 0 6px; }
.rr-consola-vacio { padding: 26px 10px; text-align: center; font-size: 13px; color: #6E7684; line-height: 1.6; }

.rr-consola-cuenta {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 9px 10px; margin-bottom: 4px;
  background: #1B1E24; color: inherit; font-family: inherit; text-align: left;
  border: 1px solid transparent; border-radius: 8px; cursor: pointer;
  transition: background .13s, border-color .13s;
}
.rr-consola-cuenta:hover { background: #222630; border-color: #3A404B; }
.rr-consola-cuenta:disabled { opacity: .55; cursor: default; }

.rr-consola-rol {
  flex: 0 0 auto; min-width: 84px; text-align: center;
  font-size: 10.5px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase;
  padding: 4px 8px; border-radius: 99px;
  background: #2C3038; color: #B7BFCC;
}
.rr-consola-rol.rol-admin,
.rr-consola-rol.rol-subdirector,
.rr-consola-rol.rol-secretary { background: #3A2430; color: #F09BB4; }
.rr-consola-rol.rol-teacher { background: #2B3320; color: #B6D97C; }
.rr-consola-rol.rol-student { background: #1F2E3A; color: #85C5E8; }
.rr-consola-rol.rol-personal { background: #322A1C; color: #E3B968; }

.rr-consola-quien { flex: 1; min-width: 0; }
.rr-consola-quien strong { display: block; font-size: 13.5px; font-weight: 600; }
.rr-consola-quien small {
  display: block; font-size: 11.5px; color: #7E8693; margin-top: 2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rr-consola-ir { flex: 0 0 auto; font-size: 12px; color: #6E7684; }
.rr-consola-cuenta:hover .rr-consola-ir { color: #7FB4F5; }

.rr-consola-campos { display: flex; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
.rr-consola-campos label { flex: 1; min-width: 120px; font-size: 12px; color: #9AA3B2; }
.rr-consola-campos input {
  display: block; width: 100%; box-sizing: border-box; margin-top: 5px;
  padding: 8px 10px; font-size: 14px; font-family: inherit;
  background: #0F1115; color: #E7E9EE; border: 1px solid #2C3038; border-radius: 8px;
}
.rr-consola-campos input:focus { outline: none; border-color: #4C90F0; }

.rr-consola-btn {
  width: 100%; padding: 11px 14px;
  font-size: 14px; font-weight: 600; font-family: inherit;
  background: #3B6FD4; color: #fff;
  border: none; border-radius: 8px; cursor: pointer;
  transition: background .13s;
}
.rr-consola-btn:hover { background: #4C90F0; }
.rr-consola-btn:disabled { background: #2C3038; color: #7E8693; cursor: default; }

.rr-consola-salida { margin-top: 12px; overflow-y: auto; min-height: 0; }
.rr-consola-ok {
  padding: 12px 14px; border-radius: 8px;
  background: #1A2620; border: 1px solid #2E4436;
}
.rr-consola-ok strong { display: block; font-size: 13.5px; color: #9FDFB4; }
.rr-consola-ok small { display: block; font-size: 12px; color: #7E9A88; margin-top: 2px; }
.rr-consola-ok ul { margin: 10px 0 0; padding-left: 18px; }
.rr-consola-ok li { font-size: 12.5px; line-height: 1.6; color: #C4D3CA; }
.rr-consola-ok em { font-style: normal; color: #7E9A88; }
.rr-consola-error {
  padding: 11px 13px; border-radius: 8px; font-size: 13px;
  background: #2A1A1C; border: 1px solid #4A2A2E; color: #F0A3A8;
}

.rr-consola-pie {
  padding: 11px 20px; border-top: 1px solid #2C3038; background: #1B1E24;
  font-size: 11.5px; color: #6E7684; text-align: center;
}

/* El botón de "una escuela entera": es la acción que se usa el 90 % de las
   veces, así que va grande y arriba, y las casillas quedan escondidas detrás
   de un desplegable para quien quiera afinar la cantidad. */
.rr-consola-btn-grande {
  display: flex; flex-direction: column; align-items: flex-start; gap: 3px;
  width: 100%; text-align: left; padding: 13px 16px; margin-bottom: 10px;
}
.rr-consola-btn-grande strong { font-size: 13.5px; }
.rr-consola-btn-grande small { font-size: 11.5px; font-weight: 500; opacity: .72; }

.rr-consola-detalle { margin-bottom: 12px; }
.rr-consola-detalle summary {
  cursor: pointer; font-size: 12px; color: #9AA3B2;
  padding: 6px 0; user-select: none;
}
.rr-consola-detalle summary:hover { color: #C9D1DC; }
.rr-consola-detalle[open] summary { margin-bottom: 10px; }

/* =============================================================================
   El candado
   =============================================================================
   La consola es de una sola cuenta. Cuando la sesión no la tiene abierta, esto
   es TODO lo que se dibuja: ni la lista de cuentas ni el botón de fabricar
   datos llegan a existir en la pantalla, así que no hay nada que espiar con el
   inspector. Ver routes/dev.js. */

.rr-consola-candado { width: min(420px, 100%); }
.rr-consola-body-solo { display: block; }
.rr-consola-candado-ic {
  font-size: 32px; text-align: center; margin: 10px 0 14px;
  filter: grayscale(.2);
}
.rr-consola-candado-txt {
  margin: 0 0 16px; font-size: 13.5px; line-height: 1.6; color: #9AA3B2; text-align: center;
}
.rr-consola-clave {
  width: 100%; box-sizing: border-box; margin-bottom: 10px;
  background: #0F1115; color: #E7E9EE;
  border: 1px solid #2C3038; border-radius: 9px;
  padding: 11px 13px; font-size: 14px; font-family: inherit;
  letter-spacing: .04em;
}
.rr-consola-clave:focus { outline: none; border-color: #4C8BF5; box-shadow: 0 0 0 3px rgba(76, 139, 245, .18); }
.rr-consola-candado .rr-consola-btn { width: 100%; justify-content: center; }

/* =============================================================================
   El panel de escuelas
   =============================================================================
   Va a lo ancho, debajo de las dos columnas de siempre: sus casillas no caben
   en media ventana, y lo que se monta aquí —una escuela entera— tampoco es del
   mismo tamaño que "crear tres clases al azar".

   Con esta tercera fila la ventana ya no cabe en alto de una vez, así que el
   cuerpo pasa a poder rodarse (arriba tenía overflow: hidden). */

.rr-consola-bloque-ancho { grid-column: 1 / -1; border-top: 1px solid #2C3038; }
@media (max-width: 760px) { .rr-consola-bloque-ancho { border-left: none; } }

.rr-consola-esc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 700px) { .rr-consola-esc-grid { grid-template-columns: 1fr; } }

.rr-consola-esc-campo { display: block; margin-bottom: 10px; }
.rr-consola-esc-campo span { display: block; font-size: 12px; color: #9AA3B2; margin-bottom: 4px; }
.rr-consola-esc-campo em { font-style: normal; color: #6E7684; }
.rr-consola-esc-campo input {
  width: 100%; box-sizing: border-box;
  background: #0F1115; color: #E7E9EE;
  border: 1px solid #2C3038; border-radius: 8px;
  padding: 9px 11px; font-size: 13.5px; font-family: inherit;
}
.rr-consola-esc-campo input:focus { outline: none; border-color: #4C90F0; }

.rr-consola-esc-tit {
  margin: 0 0 8px; font-size: 12px; color: #9AA3B2;
  letter-spacing: .03em; text-transform: uppercase;
}
.rr-consola-esc-tit-sep { margin-top: 18px; }

/* Las casillas de grados y materias: cuadraditos que se encienden. Un checkbox
   suelto con su etiqueta al lado se pierde entre diez; así se ve de un vistazo
   qué está puesto y qué no. */
.rr-consola-esc-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.rr-consola-chip { cursor: pointer; }
.rr-consola-chip input { position: absolute; opacity: 0; pointer-events: none; }
.rr-consola-chip span {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 6px 10px; border-radius: 999px;
  border: 1px solid #2C3038; background: #0F1115;
  font-size: 12.5px; color: #8A929F;
  transition: border-color .15s, color .15s, background .15s;
}
.rr-consola-chip span em {
  font-style: normal; font-size: 11px; color: #6E7684;
  background: #1B1E24; border-radius: 999px; padding: 1px 6px;
}
.rr-consola-chip input:checked + span { border-color: #4C90F0; color: #E7E9EE; background: #17233A; }
.rr-consola-chip input:checked + span em { color: #A8C7F5; background: #21324E; }
.rr-consola-chip input:focus-visible + span { box-shadow: 0 0 0 3px rgba(76, 139, 245, .25); }

/* Cuántas cuentas van a salir. Se dice ANTES y no después: mil trescientas
   cuentas tardan, y enterarse cuando ya están creadas no sirve de nada. */
.rr-consola-esc-cuenta {
  margin: 4px 0 12px; padding: 10px 12px;
  background: #0F1115; border: 1px solid #2C3038; border-radius: 9px;
  font-size: 12.5px; color: #8A929F; line-height: 1.5;
}
.rr-consola-esc-cuenta strong { display: block; font-size: 15px; color: #E7E9EE; margin-bottom: 2px; }
.rr-consola-esc-cuenta-mal { border-color: #5A3038; color: #E39AA6; }

.rr-consola-esc-lista { max-height: 180px; overflow-y: auto; margin: 0 -6px; padding: 0 6px; }
.rr-consola-esc-fila {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 11px; margin-bottom: 6px;
  background: #0F1115; border: 1px solid #2C3038; border-radius: 9px;
}
.rr-consola-esc-quien { flex: 1; min-width: 0; }
.rr-consola-esc-quien strong { display: block; font-size: 13.5px; color: #E7E9EE; }
.rr-consola-esc-quien small { display: block; font-size: 11.5px; color: #7E8693; margin-top: 2px; }

/* Borrar pregunta antes: el primer clic cambia el botón a la cuenta de lo que
   se va a llevar por delante, el segundo lo hace. No es un confirm() del
   navegador porque ese bloquea la página entera, y la consola vive encima de
   una pantalla que puede estar a medias. */
.rr-consola-esc-borrar {
  flex: 0 0 auto;
  background: #241A1D; color: #E39AA6;
  border: 1px solid #5A3038; border-radius: 8px;
  padding: 7px 11px; font-size: 12.5px; font-family: inherit; cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.rr-consola-esc-borrar:hover { background: #3A2229; color: #F3C2C9; }
.rr-consola-esc-borrar.esta-seguro { background: #B3303F; border-color: #B3303F; color: #fff; }
.rr-consola-esc-borrar:disabled { background: #2C3038; border-color: #2C3038; color: #7E8693; cursor: default; }

/* =============================================================================
   La llave de Robin
   =============================================================================
   Va a lo ancho, como el panel de escuelas: una llave de API pegada en media
   columna se corta y no se ve entera ni cuando se escribe. */

.rr-consola-llave-estado {
  padding: 10px 12px; margin-bottom: 12px;
  background: #0F1115; border: 1px solid #2C3038; border-radius: 9px;
}
.rr-consola-llave-estado strong { display: block; font-size: 13.5px; color: #9AA3B2; }
.rr-consola-llave-estado small { display: block; font-size: 12px; color: #6E7684; margin-top: 3px; }
/* Con llave puesta se ve de un vistazo, sin leer: es el estado que importa. */
.rr-consola-llave-estado.esta-puesta { border-color: #2F5C3F; background: #101A14; }
.rr-consola-llave-estado.esta-puesta strong { color: #9FDFB4; }
.rr-consola-llave-estado.esta-puesta small { color: #7E9A88; }

.rr-consola-llave-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 14px; }
@media (max-width: 700px) { .rr-consola-llave-grid { grid-template-columns: 1fr; } }

/* El <select> del modelo, con la misma pinta que los campos de al lado: sin
   esto se cuela el desplegable gris del sistema en una ventana oscura. */
.rr-consola-llave-grid select {
  width: 100%; box-sizing: border-box;
  background: #0F1115; color: #E7E9EE;
  border: 1px solid #2C3038; border-radius: 8px;
  padding: 9px 11px; font-size: 13.5px; font-family: inherit;
}
.rr-consola-llave-grid select:focus { outline: none; border-color: #4C90F0; }
.rr-consola-llave-grid input:disabled,
.rr-consola-llave-grid select:disabled { opacity: .5; cursor: not-allowed; }

/* La llave se escribe con espacio de sobra: una de Anthropic pasa de cien
   caracteres y verla a trozos no ayuda a saber si se pegó entera. */
.rr-consola-llave-grid input[type="password"] { letter-spacing: .04em; }

.rr-consola-llave-botones { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

/* Probar no cambia nada; guardar sí. Por eso el de probar va apagado: los dos
   botones iguales invitan a apretar el que no era. */
.rr-consola-btn-suave { background: #2C3038; color: #C9D1DC; }
.rr-consola-btn-suave:hover { background: #3A404B; }

/* El bloque de cuentas pide su sitio: cabecera, buscador y unos 150px de
   lista. Lo pide él porque la lista, al rodar por dentro, no cuenta para lo
   que mide el bloque; sin esto la fila del grid sale corta y la lista se
   dibuja por fuera, encima del bloque siguiente. */
.rr-consola-body > .rr-consola-bloque:first-child { min-height: 334px; }

/* Los botones de aquí van en fila y del ancho de su texto. .rr-consola-btn es
   width: 100% porque en las otras columnas va uno solo y ocupa el ancho. */
.rr-consola-llave-botones .rr-consola-btn { width: auto; }

/* =============================================================================
   La lupa
   =============================================================================
   Sube el tamaño de lo que dice Robin y del enunciado de los minijuegos. Lo de
   verdad pasa en style.css, con la variable --rr-lupa; aquí están el −, el + y
   la cifra de en medio.

   Va arriba del todo de la consola a propósito: es lo que se toca con la sala
   ya llena, y buscarlo debajo de la lista de cuentas —que es lo largo— sería
   justo al revés de como se usa.
   ============================================================================= */

.rr-consola-bloque-lupa { border-top: none; }

.rr-lupa { display: flex; align-items: center; gap: 12px; }

.rr-lupa-btn {
  flex: 0 0 auto; width: 40px; height: 40px;
  /* Centrado con grid y no con el line-height: el signo menos se apoya en la
     linea base y con line-height se quedaba pegado al suelo del boton. */
  display: grid; place-items: center;
  font-size: 22px; font-family: inherit; line-height: 1;
  background: #0F1115; color: #E7E9EE;
  border: 1px solid #2C3038; border-radius: 10px; cursor: pointer;
  transition: background .13s, border-color .13s;
}
.rr-lupa-btn:hover:not(:disabled) { background: #232730; border-color: #4C90F0; }
.rr-lupa-btn:disabled { color: #4A5160; cursor: default; }

.rr-lupa-medida { flex: 1; min-width: 0; }
.rr-lupa-medida strong {
  display: block; font-size: 17px; font-variant-numeric: tabular-nums;
  color: #E7E9EE; margin-bottom: 6px;
}
.rr-lupa-barra {
  display: block; height: 5px; border-radius: 3px;
  background: #2C3038; overflow: hidden;
}
.rr-lupa-barra i {
  display: block; height: 100%; width: 0;
  background: #4C90F0; border-radius: 3px;
  transition: width .18s ease;
}

.rr-lupa-normal { width: auto; flex: 0 0 auto; }

/* La muestra. El texto que la lupa agranda queda detrás de la consola, tapado
   por ella justo mientras se ajusta: sin esta frase habría que cerrar y volver
   a abrir para ver si quedó bien, y eso con gente esperando no se hace. El
   tamaño se lo pone consola.js, con el mismo número de partida que una
   respuesta de Robin. */
.rr-lupa-muestra {
  margin: 16px 0 0; padding: 14px 16px;
  background: #0F1115; border: 1px solid #2C3038; border-radius: 10px;
  color: #C7CDD8; line-height: 1.6;
}