/**
 * Paleta de marca — Marco A. Montes.
 * Fuente única de los colores del sitio: cambia un valor aquí y se
 * actualiza en todas las páginas que enlazan este archivo (basta con
 * agregar <link rel="stylesheet" href="/assets/css/theme.css"> en el <head>).
 *
 * Algunas páginas (curso.php, admin/admin.php) definen además tokens
 * propios de esa pantalla (--ok, --warn, --surface-2, etc.) — esos se
 * quedan en el <style> de cada archivo porque no son de marca, son de esa
 * pantalla puntual.
 */
:root {
  --bg:            #000000;
  --surface:       #0D0D0D;
  --border:        #222222;
  --text:          #F5F1EE;
  --text-muted:    rgba(245, 241, 238, 0.60);
  --text-faint:    rgba(245, 241, 238, 0.38);
  --accent:        #E85002;
  --accent-hover:  #C14202;
  --accent-soft:   #EC8049;
  --accent-tint:   rgba(232, 80, 2, 0.12);

  /* Acento de marca para el reproductor de video Plyr. */
  --plyr-color-main: #E85002;
}

/* Spinner de carga para botones con un proceso async detrás (fetch, envío
   de formulario). El color se hereda con currentColor, así que se ve bien
   en botones claros u oscuros sin configuración extra. */
@keyframes btn-spin { to { transform: rotate(360deg); } }
.btn-spinner {
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-right: 8px;
  vertical-align: -2px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  opacity: 0.85;
  animation: btn-spin 0.6s linear infinite;
}
