/* ==========================================================================
   RemoSync -- Base Design System v1.0
   ==========================================================================
   Load order:
     1. fonts.css        -- @font-face declarations
     2. base.css         -- THIS FILE (reset, tokens, layout, components)
     3. theme-*.css      -- Theme-specific custom property overrides
   ==========================================================================
   Naming convention:  --rs-{category}-{variant}
   Categories: bg, surface, text, accent, border, shadow, overlay, glow,
               radius, space, font, z, transition, anim
   ========================================================================== */

/* ==========================================================================
   1. CSS RESET (Modern Minimal)
   ========================================================================== */

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

html {
  line-height: 1.15;
  -webkit-text-size-adjust: 100%;
  -moz-tab-size: 4;
  tab-size: 4;
  scroll-behavior: smooth;
}

body {
  min-height: 100vh;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
}

.rs-password-toggle {
  color: var(--rs-text-secondary);
  transition: color var(--rs-transition-fast), background-color var(--rs-transition-fast), border-color var(--rs-transition-fast);
}

.rs-password-toggle:hover,
.rs-password-toggle:focus-visible {
  color: var(--rs-text-primary);
}

.rs-password-toggle[data-rs-revealed="true"] {
  color: var(--rs-accent-primary);
}

.rs-password-toggle__icon {
  width: 1rem;
  height: 1rem;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.85;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.rs-password-toggle__slash {
  opacity: 0;
  transition: opacity var(--rs-transition-fast);
}

.rs-password-toggle[data-rs-revealed="true"] .rs-password-toggle__slash {
  opacity: 1;
}

button {
  cursor: pointer;
  border: none;
  background: none;
}

a {
  color: inherit;
  text-decoration: none;
}

ul,
ol {
  list-style: none;
}

h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
  font-size: inherit;
  font-weight: inherit;
}

p {
  overflow-wrap: break-word;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* Remove default fieldset/legend styling */
fieldset {
  border: none;
  padding: 0;
  margin: 0;
}

/* ==========================================================================
   2. CSS CUSTOM PROPERTIES -- ROOT TOKENS
   Default values follow the Minimalist Dark palette.
   Theme files override these via :root[data-rs-theme][data-rs-mode] selectors.
   ========================================================================== */

:root {
  /* --- Spacing Scale (4px base) --- */
  --rs-space-1:  4px;
  --rs-space-2:  8px;
  --rs-space-3:  12px;
  --rs-space-4:  16px;
  --rs-space-5:  20px;
  --rs-space-6:  24px;
  --rs-space-8:  32px;
  --rs-space-10: 40px;
  --rs-space-12: 48px;
  --rs-space-16: 64px;

  /* --- Border Radius --- */
  --rs-radius-none: 0;
  --rs-radius-sm:   4px;
  --rs-radius-md:   8px;
  --rs-radius-lg:   12px;
  --rs-radius-xl:   16px;
  --rs-radius-2xl:  24px;
  --rs-radius-full: 9999px;

  /* --- Z-Index Layers --- */
  --rs-z-three:        -1;
  --rs-z-base:          0;
  --rs-z-content:      10;
  --rs-z-sticky:       20;
  --rs-z-dropdown:     30;
  --rs-z-overlay:      40;
  --rs-z-overlay-tools: 50;
  --rs-z-modal:        60;
  --rs-z-toast:        70;
  --rs-z-tooltip:      80;
  --rs-z-spotlight:    85;
  --rs-z-pointer:      90;

  /* --- Transitions --- */
  --rs-transition-fast:   150ms ease;
  --rs-transition-normal: 250ms ease-in-out;
  --rs-transition-slow:   400ms ease-in-out;
  --rs-transition-theme:  0ms;

  /* --- Typography Scale (Major Third 1.25) --- */
  --rs-font-size-xs:   0.75rem;    /* 12px */
  --rs-font-size-sm:   0.875rem;   /* 14px */
  --rs-font-size-base: 1rem;       /* 16px */
  --rs-font-size-md:   1.125rem;   /* 18px */
  --rs-font-size-lg:   1.25rem;    /* 20px */
  --rs-font-size-xl:   1.5rem;     /* 24px */
  --rs-font-size-2xl:  1.875rem;   /* 30px */
  --rs-font-size-3xl:  2.25rem;    /* 36px */
  --rs-font-size-4xl:  3rem;       /* 48px */

  /* --- Line Heights --- */
  --rs-leading-tight:   1.25;
  --rs-leading-snug:    1.375;
  --rs-leading-normal:  1.5;
  --rs-leading-relaxed: 1.625;
  --rs-leading-loose:   1.75;

  /* --- Letter Spacing --- */
  --rs-tracking-tight:   -0.025em;
  --rs-tracking-normal:   0;
  --rs-tracking-wide:     0.025em;
  --rs-tracking-wider:    0.05em;
  --rs-tracking-widest:   0.1em;

  /* --- Font Weights --- */
  --rs-font-regular:  400;
  --rs-font-medium:   500;
  --rs-font-semibold: 600;
  --rs-font-bold:     700;

  /* --- Font Families (overridden per theme) --- */
  --rs-font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
  --rs-font-family-mono: 'JetBrains Mono', 'Fira Code', 'Consolas', 'Courier New', monospace;
  --rs-font-family-display: var(--rs-font-family);

  /* --- Default Colors (Minimalist Dark) --- */
  /* Backgrounds */
  --rs-bg-primary:   #111111;
  --rs-bg-secondary: #1a1a1a;
  --rs-bg-tertiary:  #0d0d0d;

  /* Surfaces */
  --rs-surface-1: #1e1e1e;
  --rs-surface-2: #252525;
  --rs-surface-3: #2c2c2c;

  /* Text */
  --rs-text-primary:   #f0f0f0;
  --rs-text-secondary: #a0a0a0;
  --rs-text-muted:     #8b8b8b;
  --rs-text-inverse:   #111111;

  /* Accent */
  --rs-accent-primary: #3b82f6;
  --rs-accent-hover:   #60a5fa;
  --rs-accent-active:  #2563eb;
  --rs-accent-muted:   rgba(59, 130, 246, 0.15);

  /* Accent Secondary */
  --rs-accent-secondary:       #3b82f6;
  --rs-accent-secondary-hover: #60a5fa;

  /* Borders */
  --rs-border-default: #2e2e2e;
  --rs-border-subtle:  #1f1f1f;
  --rs-border-strong:  #444444;
  --rs-border-accent:  #3b82f6;

  /*
   * `--rs-border-field` existe aparte de `--rs-border-default` a proposito.
   *
   * WCAG 1.4.11 exige 3:1 al *contorno de un control*, no a una regla
   * decorativa. Subir `--rs-border-default` a 3:1 habria engordado tambien
   * cada divisor, cada linea de tabla y cada separador de barra lateral: se
   * habria cumplido la norma rompiendo la personalidad de los diez temas, que
   * es justo lo que no se puede hacer. El campo de formulario es el unico sitio
   * donde el borde ES el control, asi que solo el campo usa este token.
   *
   * `--rs-select-arrow-color` reemplaza al `#a0a0a0` que estaba incrustado en
   * un data-URI y por tanto ignoraba el sistema de temas: con `appearance:none`
   * esa flecha es la unica pista de que el control despliega.
   *
   * Los valores por tema los verifica `tests/http/ContrasteTest.php`
   * CALCULANDO el ratio sobre estos tokens; no comprueba que existan.
   */
  --rs-border-field:        #6e6e6e;
  --rs-select-arrow-color:  #a0a0a0;

  /* Shadows */
  --rs-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --rs-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
  --rs-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5);

  /* Overlay */
  --rs-overlay-bg: rgba(17, 17, 17, 0.85);

  /* Semantic States */
  --rs-success: #22c55e;
  --rs-warning: #f59e0b;
  --rs-error:   #ef4444;
  --rs-info:    #3b82f6;
}

/* ==========================================================================
   3. BASE TYPOGRAPHY
   ========================================================================== */

body {
  font-family: var(--rs-font-family);
  font-size: var(--rs-font-size-base);
  font-weight: var(--rs-font-regular);
  line-height: var(--rs-leading-normal);
  letter-spacing: var(--rs-tracking-normal);
  color: var(--rs-text-primary);
  background-color: var(--rs-bg-primary);
}

/*
 * Ninguna palabra puede salirse de su caja.
 *
 * Los datos de este producto son nombres de curso escritos por un profesor
 * ("Redes de ordenadores y protocolos de comunicacion 2026-2027") e
 * identificadores sin espacios (`lesson_9aa717a8a7707cb3`, `v_1788346853`).
 * Sin esto, un identificador es UNA sola palabra: fija el ancho minimo de su
 * columna, y a 390 px empuja la tabla de alumnos hasta 1041 px. Medido en
 * /admin/students y /admin/lessons antes del arreglo.
 *
 * `break-word` solo parte cuando la palabra NO cabe; en el 99 % de los textos
 * no cambia nada. `anywhere` se reserva al codigo, donde partir es lo normal.
 */
h1, h2, h3, h4, h5, h6,
p, li, dt, dd, th, td, label, figcaption, blockquote {
  overflow-wrap: break-word;
}

code, kbd, samp {
  overflow-wrap: anywhere;
}

h1 {
  font-size: var(--rs-font-size-4xl);
  font-weight: var(--rs-font-bold);
  line-height: var(--rs-leading-tight);
  letter-spacing: var(--rs-tracking-tight);
  color: var(--rs-text-primary);
  margin-bottom: var(--rs-space-6);
}

h2 {
  font-size: var(--rs-font-size-3xl);
  font-weight: var(--rs-font-semibold);
  line-height: var(--rs-leading-tight);
  letter-spacing: var(--rs-tracking-tight);
  color: var(--rs-text-primary);
  margin-bottom: var(--rs-space-5);
}

h3 {
  font-size: var(--rs-font-size-2xl);
  font-weight: var(--rs-font-semibold);
  line-height: var(--rs-leading-snug);
  letter-spacing: var(--rs-tracking-normal);
  color: var(--rs-text-primary);
  margin-bottom: var(--rs-space-4);
}

h4 {
  font-size: var(--rs-font-size-xl);
  font-weight: var(--rs-font-medium);
  line-height: var(--rs-leading-snug);
  color: var(--rs-text-primary);
  margin-bottom: var(--rs-space-4);
}

h5 {
  font-size: var(--rs-font-size-lg);
  font-weight: var(--rs-font-medium);
  line-height: var(--rs-leading-normal);
  color: var(--rs-text-primary);
  margin-bottom: var(--rs-space-3);
}

h6 {
  font-size: var(--rs-font-size-md);
  font-weight: var(--rs-font-medium);
  line-height: var(--rs-leading-normal);
  text-transform: uppercase;
  letter-spacing: var(--rs-tracking-wider);
  color: var(--rs-text-secondary);
  margin-bottom: var(--rs-space-3);
}

p {
  font-size: var(--rs-font-size-base);
  line-height: var(--rs-leading-normal);
  color: var(--rs-text-primary);
  margin-bottom: var(--rs-space-4);
}

a {
  color: var(--rs-accent-primary);
  text-decoration: none;
  transition: color var(--rs-transition-fast);
}

a:hover {
  color: var(--rs-accent-hover);
  text-decoration: underline;
}

small {
  font-size: var(--rs-font-size-sm);
  color: var(--rs-text-muted);
}

code,
kbd,
samp,
pre {
  font-family: var(--rs-font-family-mono);
  font-size: 0.9em;
}

code {
  padding: 2px 6px;
  border-radius: var(--rs-radius-sm);
  background: var(--rs-surface-2);
  color: var(--rs-accent-primary);
}

pre {
  padding: var(--rs-space-4);
  border-radius: var(--rs-radius-md);
  background: var(--rs-surface-1);
  border: 1px solid var(--rs-border-default);
  overflow-x: auto;
  margin-bottom: var(--rs-space-4);
}

pre code {
  padding: 0;
  background: none;
  color: inherit;
}

strong, b {
  font-weight: var(--rs-font-semibold);
}

em, i {
  font-style: italic;
}

hr {
  border: none;
  border-top: 1px solid var(--rs-border-default);
  margin: var(--rs-space-8) 0;
}

/*
 * Contenido del profesor -- prioriza la lectura.
 *
 * `overflow-x: auto` porque aqui dentro va HTML DE OTRA PERSONA: la leccion
 * que el profesor ha subido, con sus tablas, sus <pre> y sus imagenes, que no
 * saben nada de esta rejilla. Sin contenedor propio, una tabla del autor
 * empuja la pagina del producto de lado y la barra lateral, la navegacion y
 * la cabecera se van con ella. Se vio en /admin/lessons/{id}/preview a 390 px
 * con una tabla de dos columnas.
 */
.rs-content {
  font-size: var(--rs-font-size-md);
  line-height: var(--rs-leading-relaxed);
  max-width: 72ch;
  overflow-x: auto;
}

/* ==========================================================================
   4. LAYOUT UTILITIES
   ========================================================================== */

.rs-container {
  width: 100%;
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--rs-space-6);
  padding-right: var(--rs-space-6);
}

.rs-container--narrow {
  max-width: 720px;
}

.rs-container--wide {
  max-width: 1440px;
}

/* --- Grid --- */
.rs-grid {
  display: grid;
  gap: var(--rs-space-4);
}

.rs-grid--2 {
  grid-template-columns: repeat(2, 1fr);
}

.rs-grid--3 {
  grid-template-columns: repeat(3, 1fr);
}

.rs-grid--4 {
  grid-template-columns: repeat(4, 1fr);
}

.rs-grid--auto-fill {
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}

/* --- Flex --- */
.rs-flex {
  display: flex;
}

.rs-flex--center {
  align-items: center;
  justify-content: center;
}

.rs-flex--between {
  align-items: center;
  justify-content: space-between;
}

.rs-flex--col {
  flex-direction: column;
}

.rs-flex--wrap {
  flex-wrap: wrap;
}

.rs-flex--gap-2 {
  gap: var(--rs-space-2);
}

.rs-flex--gap-4 {
  gap: var(--rs-space-4);
}

.rs-flex--gap-6 {
  gap: var(--rs-space-6);
}

/* --- Sidebar Layout --- */
.rs-sidebar-layout {
  display: flex;
  min-height: 100vh;
  isolation: isolate;
}

.rs-sidebar-layout__sidebar {
  width: 240px;
  flex-shrink: 0;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: var(--rs-z-sticky);
  background: var(--rs-bg-secondary);
  border-right: 1px solid var(--rs-border-default);
  padding: var(--rs-space-6) 0;
  overflow-y: auto;
  transition: width var(--rs-transition-normal);
}

.rs-sidebar-layout__main {
  flex: 1;
  margin-left: 240px;
  padding: var(--rs-space-6);
  min-width: 0;
}

.rs-sidebar-layout__sidebar ul {
  display: flex;
  flex-direction: column;
  gap: var(--rs-space-1);
  padding: 0 var(--rs-space-3);
  margin: 0;
}

.rs-sidebar-layout__sidebar hr {
  border: 0;
  border-top: 1px solid var(--rs-border-subtle);
  margin: var(--rs-space-4) var(--rs-space-4);
}

.rs-sidebar-utility {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  border: 1px solid transparent;
  color: var(--rs-text-secondary);
  text-decoration: none;
  transition: background var(--rs-transition-fast),
              border-color var(--rs-transition-fast),
              color var(--rs-transition-fast),
              transform 80ms ease-in,
              box-shadow var(--rs-transition-fast);
}

.rs-sidebar-utility svg {
  width: 17px;
  height: 17px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.rs-sidebar-utility:hover {
  background: var(--rs-surface-1);
  border-color: var(--rs-border-default);
  color: var(--rs-text-primary);
}

.rs-sidebar-utility:active {
  transform: translateY(1px);
}

.rs-sidebar-utility--active {
  color: var(--rs-accent-primary);
  background: var(--rs-accent-muted);
  border-color: color-mix(in srgb, var(--rs-accent-primary) 30%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--rs-accent-primary) 20%, transparent);
}

.rs-sidebar-footer {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  padding: 0 var(--rs-space-3);
}

.rs-sidebar-utility--danger:hover {
  color: var(--rs-error);
  border-color: color-mix(in srgb, var(--rs-error) 28%, transparent);
  background: color-mix(in srgb, var(--rs-error) 10%, transparent);
}

.rs-sidebar-utility--danger svg {
  width: 16px;
  height: 16px;
  stroke-width: 2;
}

.rs-sidebar-link {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0 var(--rs-space-4);
  border: 1px solid transparent;
  border-radius: var(--rs-radius-md);
  color: var(--rs-text-secondary);
  text-decoration: none;
  font-size: var(--rs-font-size-sm);
  font-weight: var(--rs-font-medium);
  transition: background var(--rs-transition-fast),
              border-color var(--rs-transition-fast),
              color var(--rs-transition-fast),
              transform 80ms ease-in,
              box-shadow var(--rs-transition-fast);
}

.rs-sidebar-link:hover {
  background: var(--rs-surface-1);
  border-color: var(--rs-border-default);
  color: var(--rs-text-primary);
}

.rs-sidebar-link:active {
  transform: translateX(1px);
}

.rs-sidebar-link--active {
  background: linear-gradient(90deg, var(--rs-accent-muted), transparent);
  border-color: color-mix(in srgb, var(--rs-accent-primary) 30%, transparent);
  color: var(--rs-text-primary);
  box-shadow: inset 3px 0 0 var(--rs-accent-primary);
}

.rs-sidebar-link--accent {
  color: var(--rs-accent-primary);
}

.rs-sidebar-link--accent:hover {
  background: var(--rs-accent-muted);
  border-color: color-mix(in srgb, var(--rs-accent-primary) 35%, transparent);
}

.rs-dashboard-tools {
  display: inline-flex;
  align-items: center;
  gap: var(--rs-space-2);
}

.rs-dashboard-tool {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 1px solid var(--rs-border-default);
  background: var(--rs-surface-1);
  color: var(--rs-text-secondary);
  text-decoration: none;
  transition: background var(--rs-transition-fast),
              border-color var(--rs-transition-fast),
              color var(--rs-transition-fast),
              transform 80ms ease-in,
              box-shadow var(--rs-transition-fast);
}

.rs-dashboard-tool:hover {
  color: var(--rs-text-primary);
  border-color: color-mix(in srgb, var(--rs-accent-primary) 28%, transparent);
  background: var(--rs-accent-muted);
  box-shadow: var(--rs-shadow-sm);
}

.rs-dashboard-tool:active {
  transform: translateY(1px);
}

.rs-dashboard-tool--subtle {
  background: transparent;
}

.rs-dashboard-tool__icon {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ==========================================================================
   5. FORM BASE STYLES
   ========================================================================== */

label {
  display: block;
  font-size: var(--rs-font-size-sm);
  font-weight: var(--rs-font-medium);
  color: var(--rs-text-primary);
  margin-bottom: var(--rs-space-2);
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="url"],
input[type="number"],
input[type="tel"],
select,
textarea {
  display: block;
  width: 100%;
  height: 44px;
  padding: 0 var(--rs-space-4);
  font-size: var(--rs-font-size-base);
  line-height: 44px;
  color: var(--rs-text-primary);
  background: var(--rs-surface-1);
  border: 1px solid var(--rs-border-field);
  border-radius: var(--rs-radius-md);
  transition: border-color var(--rs-transition-fast),
              box-shadow var(--rs-transition-fast);
  outline: none;
}

textarea {
  height: auto;
  min-height: 100px;
  padding: var(--rs-space-3) var(--rs-space-4);
  line-height: var(--rs-leading-normal);
  resize: vertical;
}

/*
 * La flecha se dibuja con dos gradientes en vez de con un data-URI porque el
 * color de un SVG incrustado en `url()` no puede venir de una variable CSS:
 * el `#a0a0a0` anterior estaba escrito dentro de la cadena y era el mismo en
 * los diez temas. Aqui el color es un token, asi que cada tema pone el suyo y
 * el ratio es calculable desde fuera.
 */
select {
  appearance: none;
  -webkit-appearance: none;
  background-image:
    linear-gradient(45deg,  transparent 50%, var(--rs-select-arrow-color) 50%),
    linear-gradient(135deg, var(--rs-select-arrow-color) 50%, transparent 50%);
  background-repeat: no-repeat, no-repeat;
  background-position: right 19px center, right 13px center;
  background-size: 6px 6px, 6px 6px;
  padding-right: 40px;
}

/*
 * Casillas y radios: eran los UNICOS controles del producto sin una sola
 * regla. El navegador los pintaba a 13x13 px con su aspecto nativo, al lado
 * de campos de 44 px tematizados. Se veia en /admin/room/open (tres grupos de
 * radios y dos casillas) y en /admin/config.
 *
 * Se conserva el dibujo nativo --el tic y el punto los pinta el navegador, no
 * hay que reimplementarlos-- y se gobierna lo que si es del sistema: tamano,
 * color de acento y anillo de foco. `accent-color` toma el acento del tema, o
 * sea que cada tema sigue teniendo el suyo.
 *
 * El objetivo tactil sigue por debajo de 44 px: llegar ahi exige que la
 * <label> envuelva al control para que el area pulsable sea la fila entera.
 * Eso es plantilla, no hoja de estilos. Anotado para la via C.
 *
 * `:not([class*="__input"])` deja fuera a los controles nativos que estan
 * ESCONDIDOS bajo un dibujo propio -- `.rs-switch-card__input`,
 * `.rs-assignment-option__input`, `.rs-file-trigger__input` --, que se
 * estiran al area entera de su tarjeta. Un selector de atributo gana en
 * especificidad a una clase, asi que sin esta exclusion el interruptor de
 * "Auto-registro" habria pasado de 54x32 a 20x20 y su fila dejaria de ser
 * pulsable. La convencion BEM `__input` es la que ya usa el producto.
 */
input[type="checkbox"]:not([class*="__input"]),
input[type="radio"]:not([class*="__input"]) {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin: 0;
  accent-color: var(--rs-accent-primary);
  cursor: pointer;
}

input[type="checkbox"]:not([class*="__input"]):disabled,
input[type="radio"]:not([class*="__input"]):disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

input[type="checkbox"]:not([class*="__input"]):focus-visible,
input[type="radio"]:not([class*="__input"]):focus-visible {
  outline: 2px solid var(--rs-accent-primary);
  outline-offset: 3px;
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--rs-accent-primary);
  box-shadow: 0 0 0 3px var(--rs-accent-muted);
}

/*
 * La regla de arriba pinta borde y halo a CUALQUIER `input`, incluidos los
 * casilleros y radios, que no tienen borde propio: les salia un halo azul
 * cuadrado alrededor del dibujo nativo. El anillo de esos dos lo pone la
 * regla `:focus-visible` de arriba.
 *
 * Se retira el halo y NADA MAS. Aqui habia tambien un `border-color: initial`
 * que se ha quitado a proposito: sobre un control de aspecto nativo el borde
 * no se ve, asi que no arreglaba nada, y en cambio dejaba a los temas sin
 * poder pintarselo. Una regla generica no debe cerrarle la puerta a un tema.
 */
input[type="checkbox"]:not([class*="__input"]):focus,
input[type="radio"]:not([class*="__input"]):focus {
  box-shadow: none;
}

input::placeholder,
textarea::placeholder {
  color: var(--rs-text-muted);
}

/* Validation states */
input.rs-input--error,
select.rs-input--error,
textarea.rs-input--error {
  border-color: var(--rs-error);
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15);
}

input.rs-input--success,
select.rs-input--success,
textarea.rs-input--success {
  border-color: var(--rs-success);
}

/* Help text below inputs */
.rs-input-help {
  font-size: var(--rs-font-size-sm);
  color: var(--rs-text-muted);
  margin-top: var(--rs-space-1);
}

.rs-input-help--error {
  color: var(--rs-error);
}

/* --- Buttons --- */
.rs-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--rs-space-2);
  height: 44px;
  padding: 0 var(--rs-space-6);
  font-size: var(--rs-font-size-base);
  font-weight: var(--rs-font-medium);
  line-height: 1;
  border-radius: var(--rs-radius-md);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color var(--rs-transition-fast),
              border-color var(--rs-transition-fast),
              color var(--rs-transition-fast),
              transform 80ms ease-in,
              box-shadow var(--rs-transition-fast);
  white-space: nowrap;
  user-select: none;
}

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

.rs-btn:disabled,
.rs-btn--disabled {
  opacity: 0.5;
  pointer-events: none;
  cursor: not-allowed;
}

/* Primary button */
.rs-btn--primary {
  background: var(--rs-accent-primary);
  color: var(--rs-text-inverse);
  border-color: var(--rs-accent-primary);
}

.rs-btn--primary:hover {
  background: var(--rs-accent-hover);
  border-color: var(--rs-accent-hover);
}

.rs-btn--primary:active {
  background: var(--rs-accent-active);
}

/* Secondary button */
.rs-btn--secondary {
  background: transparent;
  color: var(--rs-text-primary);
  border-color: var(--rs-border-default);
}

.rs-btn--secondary:hover {
  background: var(--rs-surface-2);
  border-color: var(--rs-border-strong);
}

/* Danger button */
.rs-btn--danger {
  background: var(--rs-error);
  color: #ffffff;
  border-color: var(--rs-error);
}

.rs-btn--danger:hover {
  filter: brightness(1.1);
}

/* Danger outline button */
.rs-btn--danger-outline {
  background: transparent;
  color: var(--rs-error);
  border-color: var(--rs-error);
}

.rs-btn--danger-outline:hover {
  background: rgba(239, 68, 68, 0.1);
}

/* Ghost button */
.rs-btn--ghost {
  background: transparent;
  color: var(--rs-text-secondary);
  border-color: transparent;
}

.rs-btn--ghost:hover {
  background: var(--rs-surface-1);
  color: var(--rs-text-primary);
}

/* Button sizes */
.rs-btn--sm {
  height: 36px;
  padding: 0 var(--rs-space-4);
  font-size: var(--rs-font-size-sm);
}

.rs-btn--lg {
  height: 52px;
  padding: 0 var(--rs-space-8);
  font-size: var(--rs-font-size-lg);
}

.rs-btn--full {
  width: 100%;
}

/* ==========================================================================
   6. COMPONENT BASE STYLES
   ========================================================================== */

/* --- Card --- */
.rs-card {
  background: var(--rs-surface-1);
  border: 1px solid var(--rs-border-default);
  border-radius: var(--rs-radius-lg);
  padding: var(--rs-space-6);
  box-shadow: var(--rs-shadow-sm);
  transition: box-shadow var(--rs-transition-fast),
              border-color var(--rs-transition-fast);
}

.rs-card:hover {
  box-shadow: var(--rs-shadow-md);
}

.rs-card--flat {
  box-shadow: none;
}

.rs-card--flat:hover {
  box-shadow: none;
}

.rs-card__header {
  margin-bottom: var(--rs-space-4);
  padding-bottom: var(--rs-space-4);
  border-bottom: 1px solid var(--rs-border-subtle);
}

.rs-card__title {
  font-size: var(--rs-font-size-lg);
  font-weight: var(--rs-font-semibold);
}

.rs-card__body {
  color: var(--rs-text-secondary);
}

.rs-card__footer {
  margin-top: var(--rs-space-4);
  padding-top: var(--rs-space-4);
  border-top: 1px solid var(--rs-border-subtle);
}

.rs-course-detail-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--rs-space-3);
  align-items: center;
  justify-content: flex-end;
}

.rs-course-create-form {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--rs-space-5);
  align-items: start;
  width: 100%;
  max-width: none;
}

.rs-course-create-form__stack {
  display: grid;
  gap: calc(var(--rs-space-4) + 2px);
  min-width: 0;
}

.rs-course-create-form__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) max-content;
  gap: var(--rs-space-4);
  align-items: stretch;
}

.rs-course-create-form__field {
  display: grid;
  gap: var(--rs-space-3);
  min-width: 0;
}

.rs-course-create-form__actions {
  display: flex;
  align-items: stretch;
  justify-content: flex-start;
}

.rs-course-create-form__actions .rs-btn {
  min-width: 152px;
  height: 48px;
}

.rs-switch-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: calc(var(--rs-space-5) + 2px);
  min-height: 72px;
  padding: var(--rs-space-4) var(--rs-space-5);
  border-radius: var(--rs-radius-lg);
  border: 1px solid var(--rs-border-default);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), transparent 100%),
    color-mix(in srgb, var(--rs-surface-1) 86%, var(--rs-bg-secondary) 14%);
  box-shadow: var(--rs-shadow-sm);
  cursor: pointer;
  transition: border-color var(--rs-transition-fast),
              background-color var(--rs-transition-fast),
              box-shadow var(--rs-transition-fast),
              transform 120ms ease;
}

.rs-switch-card:hover {
  border-color: var(--rs-border-strong);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.045), transparent 100%),
    color-mix(in srgb, var(--rs-surface-2) 90%, var(--rs-bg-secondary) 10%);
  box-shadow: var(--rs-shadow-md);
}

.rs-switch-card:focus-within {
  border-color: var(--rs-accent-primary);
  box-shadow: 0 0 0 3px var(--rs-accent-muted), var(--rs-shadow-md);
}

.rs-switch-card__content {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
  max-width: 36ch;
}

.rs-switch-card__title {
  font-size: var(--rs-font-size-sm);
  font-weight: var(--rs-font-semibold);
  color: var(--rs-text-primary);
  letter-spacing: var(--rs-tracking-wide);
  text-transform: uppercase;
}

.rs-switch-card__hint {
  display: block;
  font-size: var(--rs-font-size-xs);
  line-height: 1.45;
  color: var(--rs-text-secondary);
}

.rs-switch-card__control {
  position: relative;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.rs-switch-card__input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

.rs-switch-card__track {
  position: relative;
  display: inline-flex;
  align-items: center;
  width: 54px;
  height: 32px;
  padding: 3px;
  border-radius: var(--rs-radius-full);
  border: 1px solid var(--rs-border-default);
  background: var(--rs-surface-2);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.18);
  transition: background-color var(--rs-transition-fast),
              border-color var(--rs-transition-fast),
              box-shadow var(--rs-transition-fast);
}

.rs-switch-card__thumb {
  width: 24px;
  height: 24px;
  border-radius: var(--rs-radius-full);
  background: var(--rs-text-muted);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
  transition: transform var(--rs-transition-fast),
              background-color var(--rs-transition-fast),
              box-shadow var(--rs-transition-fast);
}

.rs-switch-card__input:checked + .rs-switch-card__track {
  border-color: color-mix(in srgb, var(--rs-accent-primary) 45%, var(--rs-border-default));
  background: color-mix(in srgb, var(--rs-accent-primary) 14%, var(--rs-surface-2));
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.08), 0 0 0 1px color-mix(in srgb, var(--rs-accent-primary) 10%, transparent);
}

.rs-switch-card__input:checked + .rs-switch-card__track .rs-switch-card__thumb {
  transform: translateX(22px);
  background: var(--rs-accent-primary);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.18);
}

.rs-switch-card__input:focus-visible + .rs-switch-card__track {
  box-shadow: 0 0 0 3px var(--rs-accent-muted);
}

.rs-switch-card--course {
  align-self: stretch;
  justify-self: start;
  width: max-content;
  min-width: 0;
}

.rs-switch-card--compact {
  min-height: 44px;
  padding: 0 var(--rs-space-4) 0 var(--rs-space-5);
  border-radius: var(--rs-radius-md);
  column-gap: var(--rs-space-4);
}

.rs-switch-card--compact .rs-switch-card__content {
  max-width: none;
  gap: 0;
}

.rs-switch-card--course .rs-switch-card__title {
  white-space: nowrap;
}

.rs-course-list-card__footer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--rs-space-4);
  align-items: end;
}

.rs-course-list-card__stats {
  margin-bottom: 0;
}

.rs-course-list-card__actions {
  display: flex;
  justify-content: flex-end;
  align-self: end;
}

.rs-course-list-card__actions .rs-btn {
  min-width: 0;
  padding-inline: var(--rs-space-3);
}

.rs-assignment-list {
  display: grid;
  gap: var(--rs-space-3);
}

.rs-course-lessons-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--rs-space-5);
}

.rs-course-lessons-pane {
  min-width: 0;
}

.rs-course-lessons-pane__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--rs-space-3);
  margin-bottom: var(--rs-space-4);
}

.rs-course-lessons-pane__header h5 {
  margin: 0;
  font-size: var(--rs-font-size-sm);
  font-weight: var(--rs-font-semibold);
  letter-spacing: var(--rs-tracking-wide);
  text-transform: uppercase;
  color: var(--rs-text-secondary);
}

.rs-assignment-disclosure {
  border: 1px solid var(--rs-border-default);
  border-radius: var(--rs-radius-lg);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.02), transparent 100%),
    color-mix(in srgb, var(--rs-surface-1) 90%, var(--rs-bg-secondary) 10%);
  box-shadow: var(--rs-shadow-sm);
  overflow: hidden;
}

.rs-assignment-disclosure__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--rs-space-3);
  padding: var(--rs-space-4);
  cursor: pointer;
  list-style: none;
}

.rs-assignment-disclosure__summary::-webkit-details-marker {
  display: none;
}

.rs-assignment-disclosure__label {
  font-size: var(--rs-font-size-sm);
  font-weight: var(--rs-font-semibold);
  color: var(--rs-text-primary);
}

.rs-assignment-disclosure__body {
  padding: 0 var(--rs-space-4) var(--rs-space-4);
}

.rs-assigned-lessons-list {
  display: grid;
  gap: var(--rs-space-3);
}

.rs-assigned-lesson {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--rs-space-3);
  align-items: center;
  min-height: 72px;
  padding: var(--rs-space-4);
  border-radius: var(--rs-radius-lg);
  border: 1px solid color-mix(in srgb, var(--rs-accent-primary) 22%, var(--rs-border-default));
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent 100%),
    color-mix(in srgb, var(--rs-accent-primary) 8%, var(--rs-surface-1));
  box-shadow: var(--rs-shadow-sm);
}

.rs-assigned-lesson__meta {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.rs-assigned-lesson__title {
  margin: 0;
  font-size: var(--rs-font-size-sm);
  font-weight: var(--rs-font-semibold);
  color: var(--rs-text-primary);
}

.rs-assigned-lesson__details {
  display: flex;
  flex-wrap: wrap;
  gap: var(--rs-space-2) var(--rs-space-3);
  align-items: center;
  font-size: var(--rs-font-size-xs);
  color: var(--rs-text-secondary);
}

.rs-assigned-lesson__actions {
  display: flex;
  align-items: center;
}

.rs-assignment-option {
  position: relative;
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  align-items: center;
  gap: var(--rs-space-4);
  min-height: 64px;
  padding: var(--rs-space-4) var(--rs-space-4);
  border-radius: var(--rs-radius-lg);
  border: 1px solid var(--rs-border-default);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.03), transparent 100%),
    color-mix(in srgb, var(--rs-surface-1) 88%, var(--rs-bg-secondary) 12%);
  box-shadow: var(--rs-shadow-sm);
  cursor: pointer;
  transition: border-color var(--rs-transition-fast),
              background-color var(--rs-transition-fast),
              box-shadow var(--rs-transition-fast),
              transform 120ms ease;
}

.rs-assignment-option:hover {
  border-color: var(--rs-border-strong);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.045), transparent 100%),
    color-mix(in srgb, var(--rs-surface-2) 90%, var(--rs-bg-secondary) 10%);
  box-shadow: var(--rs-shadow-md);
}

.rs-assignment-option:has(.rs-assignment-option__input:focus-visible) {
  border-color: var(--rs-accent-primary);
  box-shadow: 0 0 0 3px var(--rs-accent-muted), var(--rs-shadow-md);
}

.rs-assignment-option:has(.rs-assignment-option__input:checked) {
  border-color: color-mix(in srgb, var(--rs-accent-primary) 48%, var(--rs-border-default));
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), transparent 100%),
    color-mix(in srgb, var(--rs-accent-primary) 10%, var(--rs-surface-1));
  box-shadow: 0 10px 26px color-mix(in srgb, var(--rs-accent-primary) 12%, transparent);
}

.rs-assignment-option__input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

.rs-assignment-option__check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 8px;
  border: 1px solid var(--rs-border-default);
  background: color-mix(in srgb, var(--rs-surface-2) 90%, var(--rs-bg-secondary) 10%);
  color: transparent;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.14);
  transition: border-color var(--rs-transition-fast),
              background-color var(--rs-transition-fast),
              color var(--rs-transition-fast),
              box-shadow var(--rs-transition-fast),
              transform 120ms ease;
}

.rs-assignment-option__check svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.rs-assignment-option__input:checked + .rs-assignment-option__check {
  border-color: color-mix(in srgb, var(--rs-accent-primary) 52%, var(--rs-border-default));
  background: color-mix(in srgb, var(--rs-accent-primary) 16%, var(--rs-surface-2));
  color: var(--rs-accent-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--rs-accent-primary) 10%, transparent);
}

.rs-assignment-option__meta {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.rs-assignment-option__title {
  font-weight: var(--rs-font-semibold);
  color: var(--rs-text-primary);
}

.rs-assignment-option__details {
  display: flex;
  flex-wrap: wrap;
  gap: var(--rs-space-2) var(--rs-space-3);
  align-items: center;
  font-size: var(--rs-font-size-xs);
  color: var(--rs-text-secondary);
}

.rs-course-assignment-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--rs-space-3);
  align-items: center;
}

.rs-theme-thumb {
  position: relative;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), transparent 72%),
    var(--rs-surface-2);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.rs-theme-thumb__glow,
.rs-theme-thumb__panel,
.rs-theme-thumb__line {
  position: absolute;
  display: block;
  pointer-events: none;
}

.rs-theme-thumb__glow {
  inset: 0;
  opacity: 0.9;
}

.rs-theme-thumb__panel {
  top: 16px;
  left: 16px;
  right: 16px;
  bottom: 24px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.08);
}

.rs-theme-thumb__line {
  left: 24px;
  height: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
}

.rs-theme-thumb__line--short {
  width: 32%;
  bottom: 24px;
}

.rs-theme-thumb__line--long {
  width: 48%;
  bottom: 12px;
}

.rs-theme-selector {
  max-width: 1180px;
}

.rs-theme-card {
  min-height: 184px;
  display: flex;
  flex-direction: column;
  gap: var(--rs-space-2);
}

.rs-theme-card__meta {
  gap: var(--rs-space-2);
}

.rs-theme-card__modes {
  margin-top: auto;
}

[data-rs-theme-preview="minimalist"] {
  background:
    linear-gradient(180deg, rgba(59, 130, 246, 0.18), transparent 45%),
    linear-gradient(180deg, #161616, #101010);
}

[data-rs-theme-preview="minimalist"] .rs-theme-thumb__panel {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
}

[data-rs-theme-preview="minimalist"] .rs-theme-thumb__line {
  background: rgba(255, 255, 255, 0.22);
}

[data-rs-theme-preview="hacker"] {
  background:
    repeating-linear-gradient(
      180deg,
      rgba(0, 255, 65, 0.06),
      rgba(0, 255, 65, 0.06) 2px,
      rgba(0, 0, 0, 0) 2px,
      rgba(0, 0, 0, 0) 4px
    ),
    linear-gradient(180deg, #0d130d, #080b08);
}

[data-rs-theme-preview="hacker"] .rs-theme-thumb__panel {
  background: rgba(0, 255, 65, 0.04);
  border: 1px solid rgba(0, 255, 65, 0.18);
  box-shadow: 0 0 18px rgba(0, 255, 65, 0.12);
}

[data-rs-theme-preview="hacker"] .rs-theme-thumb__line {
  background: rgba(0, 255, 65, 0.42);
}

[data-rs-theme-preview="3d"] {
  background:
    radial-gradient(circle at 18% 20%, rgba(0, 255, 65, 0.24), transparent 32%),
    radial-gradient(circle at 80% 26%, rgba(118, 255, 170, 0.18), transparent 30%),
    linear-gradient(135deg, rgba(2, 10, 7, 0.96), rgba(7, 24, 17, 0.82));
}

[data-rs-theme-preview="3d"] .rs-theme-thumb__panel {
  background: linear-gradient(135deg, rgba(5, 18, 13, 0.72), rgba(10, 30, 22, 0.52));
  border: 1px solid rgba(0, 255, 65, 0.22);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 0 18px rgba(0, 255, 65, 0.08), 0 0 26px rgba(118, 255, 170, 0.05);
}

[data-rs-theme-preview="3d"] .rs-theme-thumb__line {
  background: linear-gradient(90deg, rgba(0, 255, 65, 0.46), rgba(118, 255, 170, 0.28));
}

[data-rs-theme-preview="academic"] {
  background:
    linear-gradient(180deg, rgba(192, 149, 64, 0.2), transparent 42%),
    linear-gradient(180deg, #2a2419, #1a1710);
}

[data-rs-theme-preview="academic"] .rs-theme-thumb__panel {
  background: rgba(255, 248, 232, 0.06);
  border: 1px solid rgba(192, 149, 64, 0.18);
}

[data-rs-theme-preview="academic"] .rs-theme-thumb__line {
  background: rgba(232, 224, 208, 0.3);
}

[data-rs-theme-preview="synthwave"] {
  background:
    linear-gradient(180deg, rgba(255, 56, 160, 0.28), transparent 35%),
    linear-gradient(0deg, rgba(91, 33, 182, 0.3), transparent 40%),
    linear-gradient(180deg, #241739, #120a22);
}

[data-rs-theme-preview="synthwave"] .rs-theme-thumb__glow {
  background:
    linear-gradient(180deg, transparent 58%, rgba(56, 189, 248, 0.2) 58%, rgba(56, 189, 248, 0.2) 60%, transparent 60%),
    linear-gradient(90deg, rgba(56, 189, 248, 0.12), transparent 32%, transparent 68%, rgba(255, 56, 160, 0.16));
}

[data-rs-theme-preview="synthwave"] .rs-theme-thumb__panel {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 56, 160, 0.24);
  box-shadow: 0 0 20px rgba(56, 189, 248, 0.12);
}

[data-rs-theme-preview="synthwave"] .rs-theme-thumb__line {
  background: rgba(255, 255, 255, 0.28);
}

/* --- Modal --- */
.rs-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: var(--rs-z-modal);
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--rs-space-4);
  animation: rs-fade-in 200ms ease-out;
}

.rs-modal {
  background: var(--rs-bg-secondary);
  border: 1px solid var(--rs-border-default);
  border-radius: var(--rs-radius-lg);
  box-shadow: var(--rs-shadow-lg);
  width: 100%;
  max-width: 560px;
  max-height: 90vh;
  overflow-y: auto;
  padding: var(--rs-space-8);
  animation: rs-scale-in 200ms ease-out;
}

.rs-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--rs-space-6);
}

.rs-modal__title {
  font-size: var(--rs-font-size-xl);
  font-weight: var(--rs-font-semibold);
}

.rs-modal__close {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--rs-radius-md);
  color: var(--rs-text-muted);
  transition: color var(--rs-transition-fast),
              background var(--rs-transition-fast);
}

.rs-modal__close:hover {
  color: var(--rs-text-primary);
  background: var(--rs-surface-2);
}

.rs-modal__body {
  margin-bottom: var(--rs-space-6);
}

.rs-modal__footer {
  display: flex;
  gap: var(--rs-space-3);
  justify-content: flex-end;
}

/* --- Toast / Notification --- */
.rs-toast-container {
  position: fixed;
  top: var(--rs-space-4);
  right: var(--rs-space-4);
  z-index: var(--rs-z-toast);
  display: flex;
  flex-direction: column;
  gap: var(--rs-space-2);
  pointer-events: none;
}

.rs-toast {
  pointer-events: auto;
  padding: var(--rs-space-3) var(--rs-space-4);
  border-radius: var(--rs-radius-md);
  background: var(--rs-surface-2);
  border: 1px solid var(--rs-border-default);
  box-shadow: var(--rs-shadow-md);
  font-size: var(--rs-font-size-sm);
  color: var(--rs-text-primary);
  max-width: 400px;
  display: flex;
  align-items: center;
  gap: var(--rs-space-3);
  animation: rs-slide-in-right 250ms ease-out;
}

.rs-toast--success {
  border-left: 3px solid var(--rs-success);
}

.rs-toast--error {
  border-left: 3px solid var(--rs-error);
}

.rs-toast--warning {
  border-left: 3px solid var(--rs-warning);
}

.rs-toast--info {
  border-left: 3px solid var(--rs-info);
}

/* --- Alert --- */
.rs-alert {
  padding: var(--rs-space-4);
  border-radius: var(--rs-radius-md);
  border-left: 3px solid;
  margin-bottom: var(--rs-space-4);
  font-size: var(--rs-font-size-sm);
}

.rs-alert--success {
  background: rgba(34, 197, 94, 0.1);
  border-color: var(--rs-success);
  color: var(--rs-success);
}

.rs-alert--error {
  background: rgba(239, 68, 68, 0.1);
  border-color: var(--rs-error);
  color: var(--rs-error);
}

.rs-alert--warning {
  background: rgba(245, 158, 11, 0.08);
  border-color: var(--rs-warning);
  color: var(--rs-warning);
}

.rs-alert--info {
  background: rgba(59, 130, 246, 0.1);
  border-color: var(--rs-info);
  color: var(--rs-info);
}

/* --- Badge --- */
.rs-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px 8px;
  font-size: var(--rs-font-size-xs);
  font-weight: var(--rs-font-medium);
  line-height: 1.5;
  border-radius: var(--rs-radius-sm);
  white-space: nowrap;
}

.rs-badge--primary {
  background: var(--rs-accent-muted);
  color: var(--rs-accent-primary);
}

.rs-badge--success {
  background: rgba(34, 197, 94, 0.15);
  color: var(--rs-success);
}

.rs-badge--error {
  background: rgba(239, 68, 68, 0.15);
  color: var(--rs-error);
}

.rs-badge--warning {
  background: rgba(245, 158, 11, 0.12);
  color: var(--rs-warning);
}

.rs-badge--neutral {
  background: var(--rs-surface-2);
  color: var(--rs-text-secondary);
}

.rs-badge--pill {
  border-radius: var(--rs-radius-full);
  padding: 2px 12px;
}

/* --- Progress Bar --- */
.rs-progress {
  width: 100%;
  height: 8px;
  background: var(--rs-surface-2);
  border-radius: var(--rs-radius-full);
  overflow: hidden;
}

.rs-progress__bar {
  height: 100%;
  background: var(--rs-accent-primary);
  border-radius: var(--rs-radius-full);
  transition: width var(--rs-transition-normal);
}

.rs-progress__bar--success {
  background: var(--rs-success);
}

.rs-progress__bar--warning {
  background: var(--rs-warning);
}

.rs-progress__bar--error {
  background: var(--rs-error);
}

/* --- Skeleton Loading --- */
.rs-skeleton {
  background: var(--rs-surface-2);
  border-radius: var(--rs-radius-md);
  animation: rs-skeleton-pulse 1.5s ease-in-out infinite;
}

.rs-skeleton--text {
  height: 1em;
  width: 100%;
  margin-bottom: var(--rs-space-2);
}

.rs-skeleton--heading {
  height: 1.5em;
  width: 60%;
  margin-bottom: var(--rs-space-4);
}

.rs-skeleton--avatar {
  width: 40px;
  height: 40px;
  border-radius: var(--rs-radius-full);
}

.rs-skeleton--card {
  height: 160px;
  width: 100%;
}

/* --- Table --- */
.rs-table {
  width: 100%;
  max-width: 100%;
  font-size: var(--rs-font-size-sm);
  border-collapse: collapse;
}

/*
 * La tabla se desplaza DENTRO de su contenedor, y la pagina no se mueve.
 *
 * El sitio donde poner `overflow-x` es el padre de la tabla, no la tabla.
 * Ponerlo en la tabla obliga a `display: block`, y entonces la caja de tabla
 * anonima que queda dentro deja de conocer el ancho del contenedor: las
 * columnas se encogen a su minimo absoluto en vez de conservar su ancho
 * natural y desplazarse. Probado: en /admin/lessons a 820 px con esa version
 * el identificador `lesson_8682165fccd3775f` se partia en cuatro lineas y el
 * titulo salia cortado. Con el contenedor en el padre, la tabla conserva sus
 * proporciones y lo que sobra se desplaza.
 *
 * `:has(> .rs-table)` acierta con el envoltorio real sea cual sea --aqui hay
 * tablas dentro de `.rs-card` (lecciones, detalle de curso) y sueltas dentro
 * de un `<section>` (gestion de alumnos)-- sin tocar ninguna plantilla.
 */
:where(div, section, article, main, form, fieldset):has(> .rs-table) {
  overflow-x: auto;
}

/*
 * Sin `:has()` no hay forma de alcanzar al padre desde la hoja de estilos.
 * Se cae al comportamiento anterior: peor reparto de columnas, pero la
 * pagina sigue sin desplazarse de lado, que es lo que no puede pasar.
 */
@supports not selector(:has(*)) {
  .rs-table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

.rs-table th {
  text-align: left;
  font-weight: var(--rs-font-semibold);
  color: var(--rs-text-secondary);
  padding: var(--rs-space-3) var(--rs-space-4);
  border-bottom: 2px solid var(--rs-border-default);
}

.rs-table td {
  padding: var(--rs-space-3) var(--rs-space-4);
  border-bottom: 1px solid var(--rs-border-subtle);
  color: var(--rs-text-primary);
}

.rs-table tr:hover td {
  background: var(--rs-surface-1);
}

/* ==========================================================================
   7. TEACHER OVERLAY BASE
   ========================================================================== */

.rs-overlay {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 56px;
  padding: 0 var(--rs-space-4);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--rs-space-2);
  z-index: var(--rs-z-overlay);
  background: var(--rs-overlay-bg);
  border-top: 1px solid var(--rs-border-subtle);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  animation: rs-overlay-enter 200ms ease-out;
  transition: opacity 200ms ease, transform 200ms ease;
}

.rs-overlay--hidden {
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
}

.rs-overlay-group {
  display: flex;
  align-items: center;
  gap: var(--rs-space-2);
}

.rs-overlay-btn {
  width: 40px;
  height: 40px;
  padding: 8px;
  border-radius: var(--rs-radius-md);
  border: 1px solid var(--rs-border-subtle);
  background: transparent;
  color: var(--rs-text-secondary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color var(--rs-transition-fast),
              background var(--rs-transition-fast),
              border-color var(--rs-transition-fast),
              transform 80ms ease-in;
  position: relative;
  z-index: var(--rs-z-overlay-tools);
}

.rs-overlay-btn:hover {
  color: var(--rs-text-primary);
  background: var(--rs-surface-2);
  border-color: var(--rs-border-default);
}

.rs-overlay-btn:active {
  transform: scale(0.95);
}

.rs-overlay-btn--active {
  color: var(--rs-accent-primary);
  background: var(--rs-accent-muted);
  border-color: var(--rs-accent-primary);
}

.rs-overlay-btn--active:hover {
  background: var(--rs-accent-muted);
  filter: brightness(1.1);
}

.rs-overlay-btn--disabled {
  opacity: 0.3;
  pointer-events: none;
}

.rs-overlay-separator {
  width: 1px;
  height: 24px;
  background: var(--rs-border-subtle);
  margin: 0 var(--rs-space-2);
}

/* Student counter in overlay */
.rs-student-counter {
  display: flex;
  align-items: center;
  gap: var(--rs-space-2);
  padding: 4px 12px;
  border-radius: var(--rs-radius-full);
  background: var(--rs-surface-1);
  border: 1px solid var(--rs-border-subtle);
  color: var(--rs-text-secondary);
  font-size: var(--rs-font-size-sm);
  font-variant-numeric: tabular-nums;
  min-width: 56px;
  justify-content: center;
}

/* ==========================================================================
   8. STUDENT VIEW BASE
   ========================================================================== */

.rs-student-content {
  max-width: 72ch;
  margin: 0 auto;
  padding: var(--rs-space-6);
  font-size: var(--rs-font-size-md);
  line-height: var(--rs-leading-relaxed);
}

.rs-sync-indicator {
  display: flex;
  align-items: center;
  gap: var(--rs-space-2);
  padding: var(--rs-space-2) var(--rs-space-4);
  font-size: var(--rs-font-size-sm);
  border-bottom: 1px solid var(--rs-border-subtle);
  background: var(--rs-surface-1);
}

.rs-sync-indicator__dot {
  width: 8px;
  height: 8px;
  border-radius: var(--rs-radius-full);
  background: var(--rs-success);
}

.rs-sync-indicator__dot--reviewing {
  background: var(--rs-warning);
}

.rs-sync-indicator__dot--disconnected {
  background: var(--rs-error);
}

.rs-sync-indicator__text {
  color: var(--rs-text-secondary);
}

.rs-sync-indicator__page {
  margin-left: auto;
  color: var(--rs-text-muted);
}

/* Student nav bar */
.rs-student-nav {
  display: flex;
  align-items: center;
  height: 48px;
  padding: 0 var(--rs-space-4);
  background: var(--rs-bg-secondary);
  border-bottom: 1px solid var(--rs-border-default);
  position: sticky;
  top: 0;
  z-index: var(--rs-z-sticky);
}

.rs-student-nav__logo {
  font-weight: var(--rs-font-bold);
  font-size: var(--rs-font-size-base);
  color: var(--rs-text-primary);
  margin-right: var(--rs-space-4);
}

.rs-student-nav__course {
  font-size: var(--rs-font-size-sm);
  color: var(--rs-text-secondary);
  flex: 1;
}

.rs-student-nav__logout {
  /* padding 0: el control es ahora un <button> dentro de un formulario POST
     (S1 cabo 6) y sin esto heredaria el relleno de agente de usuario que el
     ancla no tenia. El resto (borde, fondo, fuente) ya lo iguala el reset
     global de button. En el shell aislado manda su propia regla, mas
     especifica, que si declara relleno. */
  padding: 0;
  font-size: var(--rs-font-size-sm);
  color: var(--rs-text-muted);
  cursor: pointer;
  transition: color var(--rs-transition-fast);
}

.rs-student-nav__logout:hover {
  color: var(--rs-text-primary);
}

/* ==========================================================================
   9. ICON BASE
   ========================================================================== */

.rs-icon {
  display: inline-block;
  width: 24px;
  height: 24px;
  background-color: currentColor;
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
}

.rs-icon--sm {
  width: 16px;
  height: 16px;
}

.rs-icon--lg {
  width: 32px;
  height: 32px;
}

/* ==========================================================================
   10. KEYFRAME ANIMATIONS
   ========================================================================== */

@keyframes rs-overlay-enter {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes rs-overlay-exit {
  from { opacity: 1; transform: translateY(0); }
  to   { opacity: 0; transform: translateY(8px); }
}

@keyframes rs-pointer-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%      { transform: scale(1.3); opacity: 0.7; }
}

@keyframes rs-scanline {
  0%   { transform: translateY(-100%); }
  100% { transform: translateY(100vh); }
}

@keyframes rs-glow-pulse {
  0%, 100% { text-shadow: 0 0 10px var(--rs-glow-color, #3b82f6); }
  50%      { text-shadow: 0 0 20px var(--rs-glow-color, #3b82f6), 0 0 40px var(--rs-glow-color, #3b82f6); }
}

@keyframes rs-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes rs-scale-in {
  from { opacity: 0; transform: scale(0.95); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes rs-slide-in-right {
  from { opacity: 0; transform: translateX(100%); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes rs-skeleton-pulse {
  0%   { opacity: 1; }
  50%  { opacity: 0.4; }
  100% { opacity: 1; }
}

@keyframes rs-shake {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-3px); }
  40%, 80% { transform: translateX(3px); }
}

/* ==========================================================================
   11. RESPONSIVE BREAKPOINTS
   ========================================================================== */

/* Tablet: 768px - 1279px */
@media (max-width: 1279px) {
  .rs-sidebar-layout__sidebar {
    width: 176px;
    padding: var(--rs-space-5) 0;
  }

  .rs-sidebar-layout__main {
    margin-left: 176px;
    padding: var(--rs-space-5);
  }

  .rs-sidebar-layout__sidebar ul {
    padding: 0 var(--rs-space-2);
  }

  .rs-sidebar-layout__sidebar hr {
    margin: var(--rs-space-3) var(--rs-space-3);
  }

  .rs-sidebar-link {
    min-height: 42px;
    padding: 0 var(--rs-space-3);
    font-size: var(--rs-font-size-xs);
  }

  .rs-grid--3 {
    grid-template-columns: repeat(2, 1fr);
  }

  .rs-grid--4 {
    grid-template-columns: repeat(2, 1fr);
  }

  /*
   * Por debajo de 1280 px las celdas no envuelven: la tabla toma el ancho que
   * necesita y se desplaza dentro de su contenedor (el `:has(> .rs-table)` de
   * mas arriba).
   *
   * Esta linea es la que hace que el contenedor sirva de algo, y costo una
   * captura entenderlo. `width: 100%` no puede encoger una tabla por debajo
   * de su ancho MINIMO de contenido; con las celdas envolviendo, ese minimo
   * es diminuto, asi que la tabla se conformaba al contenedor, no lo
   * desbordaba nunca y no habia nada que desplazar: solo columnas
   * aplastadas. En /admin/lessons a 820 px `lesson_8682165fccd3775f` salia
   * partido en cuatro lineas y el titulo cortado a "Introdu". Con `nowrap` el
   * minimo pasa a ser el texto entero, la tabla vuelve a medir 1075 px y lo
   * que sobra se desplaza.
   *
   * A partir de 1280 px las celdas envuelven como siempre: ahi la tabla cabe.
   */
  .rs-table th,
  .rs-table td {
    white-space: nowrap;
  }

  /*
   * Las filas de cabecera (titulo + acciones) tienen que poder envolver.
   *
   * `.rs-flex--between` era `display:flex` a secas: sin `flex-wrap` y con
   * hijos que no pueden encoger por debajo de su contenido, porque `.rs-btn`
   * lleva `white-space: nowrap`. En /admin/courses/{id} a 390 px los dos
   * botones de accion se salian 9 px de la pagina y se montaban ENCIMA del
   * nombre del curso. Envolver solo ocurre cuando no cabe: donde cabia, no
   * cambia nada.
   *
   * Se envuelve donde hay BOTONES, no en cualquier fila flex. Probado a lo
   * bruto primero --`flex-wrap: wrap` en todos los `.rs-flex--gap-*`-- y se
   * vio en la captura por que no vale: el reparto en lineas se decide con el
   * tamano SIN envolver del hijo, asi que en /admin/room/open cada etiqueta
   * de radio ("Fragmentado: el alumno solo recibe lo que ya has explicado")
   * se iba a una linea propia y dejaba el circulito solo arriba. Un texto
   * encoge por si mismo y no necesita envolver; un `.rs-btn` no puede.
   */
  .rs-flex--between,
  .rs-flex:has(> .rs-btn),
  .rs-flex:has(> form > .rs-btn) {
    flex-wrap: wrap;
  }

  .rs-flex--between > * {
    min-width: 0;
  }

  /*
   * Escalon tipografico de tableta.
   *
   * Estaba h1=36 h2=30 h3=30: h2 y h3 median EXACTAMENTE lo mismo, asi que
   * entre 768 y 1279 px un nivel de la jerarquia no existia. Se baja la
   * escalera entera un paso y vuelve a haber cinco niveles distinguibles.
   */
  h1 { font-size: var(--rs-font-size-3xl); }
  h2 { font-size: var(--rs-font-size-2xl); }
  h3 { font-size: var(--rs-font-size-xl); }
  h4 { font-size: var(--rs-font-size-lg); }
  h5 { font-size: var(--rs-font-size-md); }
}

/* Small Desktop: 1024px */
@media (max-width: 1024px) {
  :root {
    --rs-space-8:  28px;
    --rs-space-10: 36px;
    --rs-space-12: 40px;
    --rs-space-16: 52px;
  }

  .rs-course-create-form__actions {
    justify-content: flex-start;
  }
}

/* Mobile: <= 767px */
@media (max-width: 767px) {
  .rs-sidebar-layout__sidebar {
    display: none;
  }

  .rs-sidebar-layout__main {
    margin-left: 0;
    padding: var(--rs-space-4);
    padding-bottom: calc(var(--rs-space-10) + 92px + env(safe-area-inset-bottom));
  }

  .rs-container {
    padding-left: var(--rs-space-4);
    padding-right: var(--rs-space-4);
  }

  .rs-grid--2,
  .rs-grid--3,
  .rs-grid--4 {
    grid-template-columns: 1fr;
  }

  .rs-course-create-form {
    grid-template-columns: 1fr;
  }

  .rs-course-create-form__row {
    grid-template-columns: 1fr;
  }

  .rs-course-create-form__actions {
    justify-content: stretch;
  }

  .rs-course-create-form__actions .rs-btn {
    width: 100%;
  }

  .rs-switch-card {
    min-height: 64px;
    padding: var(--rs-space-3) var(--rs-space-4);
    column-gap: var(--rs-space-4);
  }

  .rs-assignment-option {
    min-height: 60px;
    padding: var(--rs-space-3) var(--rs-space-4);
    gap: var(--rs-space-3);
  }

  .rs-course-lessons-grid {
    grid-template-columns: 1fr;
  }

  .rs-course-assignment-actions .rs-btn {
    width: 100%;
  }

  /*
   * Escalon tipografico de movil. Faltaban h4 y h5, que se quedaban en 24 y
   * 20 px: h4 media lo mismo que h2 (24) y h5 lo mismo que h3 (20). Dos
   * colisiones mas de la misma escalera.
   */
  h1 { font-size: var(--rs-font-size-2xl); }
  h2 { font-size: var(--rs-font-size-xl); }
  h3 { font-size: var(--rs-font-size-lg); }
  h4 { font-size: var(--rs-font-size-md); }
  h5 { font-size: var(--rs-font-size-base); }

  .rs-overlay {
    height: 48px;
  }

  #theme-form {
    scroll-margin-top: var(--rs-space-4);
  }

  .rs-theme-selector__grid {
    gap: var(--rs-space-3) !important;
  }

  .rs-theme-card {
    min-height: auto;
    padding: var(--rs-space-3);
  }

  .rs-theme-card .rs-theme-thumb {
    height: 78px !important;
    margin-bottom: var(--rs-space-2) !important;
  }

  .rs-theme-card__meta {
    align-items: flex-start !important;
  }

  .rs-theme-card__modes {
    justify-content: flex-start !important;
    flex-wrap: wrap;
  }

  .rs-theme-card__modes .rs-btn {
    height: 28px !important;
    padding: 0 var(--rs-space-2) !important;
  }

  .rs-theme-selector__preview-card {
    height: 220px !important;
  }

  .rs-dashboard-header {
    flex-wrap: wrap;
    gap: var(--rs-space-3);
    align-items: flex-start !important;
  }

  .rs-dashboard-tools {
    width: 100%;
    justify-content: flex-start;
  }

  .rs-dashboard-room-actions {
    flex-wrap: wrap;
  }

  .rs-dashboard-room-actions > .rs-btn,
  .rs-dashboard-room-actions__form,
  .rs-dashboard-room-actions__form > .rs-btn {
    width: 100%;
    min-width: 0 !important;
  }

  .rs-student-tabs {
    flex-wrap: wrap;
    gap: var(--rs-space-2);
  }

  .rs-student-tabs .rs-btn {
    flex: 1 1 calc(50% - var(--rs-space-2));
    min-width: 0;
    justify-content: center;
  }

  /*
   * A 390 px una etiqueta larga tiene que poder partirse en dos lineas.
   *
   * `.rs-btn` lleva `white-space: nowrap` y altura fija: "Publicar esta
   * version" media 486 px y se llevaba la pagina entera de vista previa 96 px
   * hacia la derecha. En escritorio el `nowrap` es correcto --evita botones
   * de dos lineas donde sobra sitio--; en movil no hay sitio que sobre.
   */
  .rs-btn {
    max-width: 100%;
    height: auto;
    min-height: 44px;
    padding-block: var(--rs-space-2);
    white-space: normal;
    text-align: center;
  }

  .rs-btn--sm {
    height: auto;
    min-height: 36px;
  }


  .rs-student-content {
    padding: var(--rs-space-3);
    font-size: var(--rs-font-size-base);
  }

  .rs-modal {
    max-width: 100%;
    padding: var(--rs-space-6);
    border-radius: var(--rs-radius-md);
  }
}

/* ==========================================================================
   12. THEME BACKGROUNDS
   ========================================================================== */

.rs-theme-background {
  position: fixed;
  inset: 0;
  z-index: var(--rs-z-base);
  overflow: hidden;
  pointer-events: none;
}

.rs-three-canvas,
.rs-bg-fallback {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.rs-three-canvas {
  z-index: var(--rs-z-three);
}

.rs-bg-fallback {
  z-index: calc(var(--rs-z-three) - 1);
  opacity: 0;
  transition: opacity var(--rs-transition-normal);
}

.rs-bg-fallback--visible {
  opacity: 1;
}

.rs-bg-fallback--animated {
  animation: rs-bg-drift 18s ease-in-out infinite alternate;
  background-size: 130% 130%;
}

.rs-3d-toggle {
  position: fixed;
  bottom: var(--rs-space-4);
  right: var(--rs-space-4);
  width: 36px;
  height: 36px;
  border-radius: var(--rs-radius-md);
  z-index: var(--rs-z-sticky);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--rs-transition-fast);
  pointer-events: auto;
}

.rs-3d-toggle svg {
  width: 18px;
  height: 18px;
}

html[data-rs-theme="3d"] body {
  background-color: transparent;
}

html[data-rs-theme="3d"] body > *:not(#rs-theme-background):not(.sr-only) {
  position: relative;
  z-index: var(--rs-z-content);
}

:root[data-rs-theme="3d"] .rs-3d-toggle {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--rs-text-secondary);
}

:root[data-rs-theme="3d"] .rs-3d-toggle:hover {
  background: rgba(255, 255, 255, 0.14);
  color: var(--rs-text-primary);
}

:root[data-rs-theme="3d"] .rs-3d-toggle[aria-pressed="true"] {
  color: var(--rs-accent-primary);
  border-color: var(--rs-border-accent);
}

@keyframes rs-bg-drift {
  0% {
    transform: scale(1) translate3d(0, 0, 0);
  }

  100% {
    transform: scale(1.06) translate3d(-1%, 1%, 0);
  }
}

/* ==========================================================================
   12. ACCESSIBILITY
   ========================================================================== */

/* Focus-visible for keyboard navigation */
:focus-visible {
  outline: 2px solid var(--rs-accent-primary);
  outline-offset: 2px;
}

/* Remove outline for mouse/touch */
:focus:not(:focus-visible) {
  outline: none;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .rs-scanline,
  .rs-scanline-beam {
    display: none;
  }

  .rs-three-canvas {
    display: none;
  }

  .rs-bg-fallback--animated {
    animation: none;
  }

  .rs-grid-perspective {
    animation: none;
  }

  .rs-overlay {
    animation: none;
  }

  .rs-pointer-indicator {
    animation: none;
  }
}

/* High contrast mode */
@media (prefers-contrast: high) {
  :root {
    --rs-border-default: #888888;
    --rs-border-subtle:  #666666;
    --rs-border-strong:  #ffffff;
    --rs-text-muted:     #aaaaaa;
  }

  .rs-btn--primary {
    border-width: 2px;
  }

  .rs-card {
    border-width: 2px;
  }

  input,
  select,
  textarea {
    border-width: 2px;
  }
}

/* ==========================================================================
   13. PRINT STYLES
   ========================================================================== */

@media print {
  *,
  *::before,
  *::after {
    background: transparent !important;
    color: #000 !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }

  body {
    font-size: 12pt;
    line-height: 1.5;
  }

  .rs-sidebar-layout__sidebar,
  .rs-overlay,
  .rs-toast-container,
  .rs-modal-backdrop,
  .rs-student-nav,
  .rs-sync-indicator,
  .rs-btn,
  .rs-scanline,
  .rs-three-canvas,
  .rs-bg-fallback {
    display: none !important;
  }

  .rs-sidebar-layout__main {
    margin-left: 0 !important;
  }

  a[href]::after {
    content: " (" attr(href) ")";
    font-size: 0.8em;
  }

  h1, h2, h3, h4, h5, h6 {
    page-break-after: avoid;
  }

  img, pre, table {
    page-break-inside: avoid;
  }

  .rs-card {
    border: 1px solid #ccc !important;
    page-break-inside: avoid;
  }
}

/* ==========================================================================
   14. UTILITY CLASSES
   ========================================================================== */

/* Screen reader only */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.sr-only:focus,
.sr-only:active {
  width: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  clip: auto;
  white-space: normal;
  left: var(--rs-space-4);
  top: var(--rs-space-4);
  padding: var(--rs-space-3) var(--rs-space-4);
  border-radius: var(--rs-radius-md);
  background: var(--rs-accent-primary);
  color: var(--rs-text-inverse);
  z-index: var(--rs-z-toast);
  box-shadow: var(--rs-shadow-md);
}

/* Hidden */
.rs-hidden {
  display: none !important;
}

.rs-file-trigger {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.rs-file-trigger__label {
  pointer-events: none;
}

.rs-file-trigger__input {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0;
  z-index: 1;
  cursor: pointer;
  font-size: 0;
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
}

.rs-invisible {
  visibility: hidden;
}

/* Text alignment */
.rs-text-center { text-align: center; }
.rs-text-left   { text-align: left; }
.rs-text-right  { text-align: right; }

/* Text color utilities */
.rs-text-primary   { color: var(--rs-text-primary); }
.rs-text-secondary { color: var(--rs-text-secondary); }
.rs-text-muted     { color: var(--rs-text-muted); }
.rs-text-accent    { color: var(--rs-accent-primary); }
.rs-text-success   { color: var(--rs-success); }
.rs-text-error     { color: var(--rs-error); }
.rs-text-warning   { color: var(--rs-warning); }

/* Font weight utilities */
.rs-font-regular  { font-weight: var(--rs-font-regular); }
.rs-font-medium   { font-weight: var(--rs-font-medium); }
.rs-font-semibold { font-weight: var(--rs-font-semibold); }
.rs-font-bold     { font-weight: var(--rs-font-bold); }

/* Spacing utilities */
.rs-mb-0  { margin-bottom: 0; }
.rs-mb-2  { margin-bottom: var(--rs-space-2); }
.rs-mb-4  { margin-bottom: var(--rs-space-4); }
.rs-mb-6  { margin-bottom: var(--rs-space-6); }
.rs-mb-8  { margin-bottom: var(--rs-space-8); }

.rs-mt-0  { margin-top: 0; }
.rs-mt-4  { margin-top: var(--rs-space-4); }
.rs-mt-8  { margin-top: var(--rs-space-8); }

.rs-p-0  { padding: 0; }
.rs-p-4  { padding: var(--rs-space-4); }
.rs-p-6  { padding: var(--rs-space-6); }
.rs-p-8  { padding: var(--rs-space-8); }

/* Width utilities */
.rs-w-full { width: 100%; }
.rs-w-auto { width: auto; }

/* Truncation */
.rs-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Inactive link (unrevealed content) */
.rs-link--inactive {
  opacity: 0.4;
  cursor: default;
  pointer-events: none;
  text-decoration: none;
  color: inherit;
}

/* Pointer indicator */
.rs-pointer-indicator {
  position: fixed;
  width: 20px;
  height: 20px;
  border-radius: var(--rs-radius-full);
  background: var(--rs-accent-primary);
  opacity: 0.85;
  z-index: var(--rs-z-pointer);
  transform: translate(-50%, -50%);
  pointer-events: none;
  animation: rs-pointer-pulse 2s ease-in-out infinite;
  transition: left 100ms linear, top 100ms linear;
}

.rs-pointer-indicator--idle {
  opacity: 0 !important;
  animation: none;
  transition: opacity 500ms ease;
}

/* Spotlight mask */
.rs-spotlight-mask {
  position: fixed;
  inset: 0;
  z-index: var(--rs-z-spotlight);
  pointer-events: none;
  background: radial-gradient(
    circle 120px at var(--rs-spotlight-x, 50%) var(--rs-spotlight-y, 50%),
    transparent 0%,
    transparent 80%,
    rgba(0, 0, 0, 0.7) 100%
  );
}

/* Tabular numbers for counters */
.rs-tabular-nums {
  font-variant-numeric: tabular-nums;
}

/* Password strength bar */
.rs-password-strength {
  width: 200px;
  height: 4px;
  background: var(--rs-surface-2);
  border-radius: var(--rs-radius-full);
  overflow: hidden;
  margin-top: var(--rs-space-1);
}

.rs-password-strength__bar {
  height: 100%;
  border-radius: var(--rs-radius-full);
  transition: width var(--rs-transition-fast), background var(--rs-transition-fast);
}

/* Drop zone for file uploads */
.rs-dropzone {
  border: 2px dashed var(--rs-border-default);
  border-radius: var(--rs-radius-lg);
  padding: var(--rs-space-10);
  text-align: center;
  transition: border-color var(--rs-transition-fast),
              background var(--rs-transition-fast);
  cursor: pointer;
}

.rs-dropzone:hover,
.rs-dropzone--active {
  border-color: var(--rs-accent-primary);
  background: var(--rs-accent-muted);
}

/* Step indicator (wizard) */
.rs-steps {
  display: flex;
  align-items: center;
  gap: var(--rs-space-2);
}

.rs-steps__dot {
  width: 8px;
  height: 8px;
  border-radius: var(--rs-radius-full);
  background: var(--rs-text-muted);
}

.rs-steps__dot--active {
  background: var(--rs-accent-primary);
}

.rs-steps__dot--completed {
  background: var(--rs-success);
}

/* Glass panel base (used by 3D theme) */
.rs-glass {
  backdrop-filter: blur(var(--rs-glass-blur, 16px));
  -webkit-backdrop-filter: blur(var(--rs-glass-blur, 16px));
  background: var(--rs-glass-bg, rgba(255, 255, 255, 0.06));
  border: var(--rs-glass-border, 1px solid rgba(255, 255, 255, 0.12));
  border-radius: var(--rs-radius-lg);
  box-shadow: var(--rs-glass-shadow, 0 8px 32px rgba(0, 0, 0, 0.3));
}

/* Mobile bottom nav */
.rs-bottom-nav {
  display: none;
  position: fixed;
  bottom: max(12px, env(safe-area-inset-bottom));
  left: 50%;
  transform: translateX(-50%);
  width: auto;
  max-width: calc(100% - 24px);
  min-height: 56px;
  background: var(--rs-surface-1);
  border: 1px solid var(--rs-border-default);
  border-color: color-mix(in srgb, var(--rs-border-default) 88%, transparent);
  border-radius: 999px;
  box-shadow: var(--rs-shadow-lg);
  z-index: var(--rs-z-sticky);
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 6px;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  opacity: 1;
  transition: opacity var(--rs-transition-fast),
              background var(--rs-transition-fast),
              border-color var(--rs-transition-fast),
              transform var(--rs-transition-fast);
}

@media (max-width: 767px) {
  .rs-bottom-nav {
    display: flex;
  }
}

.rs-bottom-nav:hover,
.rs-bottom-nav:focus-within {
  opacity: 1;
  transform: translateX(-50%) translateY(-1px);
}

/*
 * 44x44: es la unica navegacion que tiene el profesor en el movil y estaba a
 * 42x42, dos pixeles por debajo del minimo de objetivo tactil. La pildora
 * pasa de 56 a 58 px de alto y no toca ningun otro sitio.
 */
.rs-bottom-nav__item {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: 999px;
  font-size: var(--rs-font-size-xs);
  color: var(--rs-text-muted);
  text-decoration: none;
  transition: color var(--rs-transition-fast),
              background var(--rs-transition-fast),
              transform var(--rs-transition-fast),
              box-shadow var(--rs-transition-fast);
}

.rs-bottom-nav__icon {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.rs-bottom-nav__item:hover {
  background: var(--rs-surface-1);
  color: var(--rs-text-primary);
}

.rs-bottom-nav__item--active {
  color: var(--rs-accent-primary);
  background: var(--rs-accent-muted);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18);
}

.rs-bottom-nav__item:focus-visible {
  outline: 2px solid var(--rs-accent-primary);
  outline-offset: 2px;
}