/* ============================================================================
   HAYESHI · Base — reset, tipografía y accesibilidad
   ============================================================================

   Solo elementos HTML. Ninguna clase salvo las dos utilidades de accesibilidad
   del final (`.skip-link` y `.sr-only`), que existen porque son parte del
   contrato del documento, no componentes.

   NOMBRES DE CLASE EN INGLÉS, a propósito y en contra de la regla general de
   «todo en español»: esa regla es sobre lo que el usuario LEE. Los nombres de
   clase no los lee nadie más que quien porta las 32 plantillas de Django, y
   esas plantillas ya dicen `.data-table`, `.stat-card`, `.badge`, `.btn`,
   `.form-input`. Conservarlos hace que el HTML portado siga estilizado sin
   renombrar nada; traducirlos sería trabajo puro sin lector.

   Se carga DESPUÉS de tokens.css y ANTES de layout.css / components.css. El
   orden lo fija el layout a mano (ver app/views/layouts/dashboard.html.erb).
   -------------------------------------------------------------------------- */

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

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Evita que iOS agrande el texto al girar el teléfono a horizontal. */
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--color-text);
  background-color: var(--color-bg);
  min-height: 100dvh;
}

/* Los títulos del panel son sobrios: el peso y el color hacen la jerarquía, no
   el tamaño. Nada de `text-transform: uppercase` acá — main.css lo usa en
   botones de la landing, donde el texto es de dos palabras; en un panel con
   nombres propios de estudiantes destruye la lectura. */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 700;
  line-height: var(--leading-tight);
  letter-spacing: -0.01em;
  text-wrap: balance;
}

h1 {
  font-size: var(--text-3xl);
}

h2 {
  font-size: var(--text-xl);
}

h3 {
  font-size: var(--text-lg);
}

h4,
h5,
h6 {
  font-size: var(--text-base);
}

p {
  text-wrap: pretty;
}

a {
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
}

a:hover {
  color: var(--color-primary-hover);
}

img,
svg,
video {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Las listas del panel son estructura (navegación, chips), no prosa; igual que
   en main.css:152-154 e instructor.css:64-66. */
ul,
ol {
  list-style: none;
}

/* Los formularios no heredan la fuente por defecto en ningún navegador. */
button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

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

/* ── Foco ───────────────────────────────────────────────────────────────────
   `:focus-visible` y no `:focus`: el segundo dibuja el anillo también al hacer
   clic con el mouse, y es la razón por la que en tantas hojas de estilo alguien
   termina escribiendo `outline: none` y deja la app inutilizable con teclado.
   instructor.css:813-816 hace exactamente eso en `.form-input:focus`.

   El anillo va en `box-shadow` de dos capas (una del color del fondo, otra del
   color de foco) para que se vea tanto sobre crema como encima de un botón
   azul. */
:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--radius-sm);
}

/* ── Movimiento reducido ────────────────────────────────────────────────────
   Sin esto, `.chip-en-vivo` (la animación `pulse` heredada de
   instructor.css:426-431) parpadea indefinidamente para alguien con
   sensibilidad vestibular o migraña. */
@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;
  }
}

/* ── Utilidades de accesibilidad ────────────────────────────────────────────
   Estas dos no son componentes: son parte del contrato del documento y las usa
   el layout directamente. */

/* Primer elemento enfocable de la página. Invisible hasta que alguien tabula,
   momento en el que aparece arriba a la izquierda. Sin él, llegar al contenido
   con teclado cuesta pasar por los cinco enlaces de la navegación en cada
   pantalla. */
.skip-link {
  position: absolute;
  left: var(--space-2);
  top: calc(-1 * var(--space-16));
  z-index: calc(var(--z-flash) + 1);
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface);
  color: var(--color-text);
  border-radius: var(--radius-md);
  text-decoration: none;
  font-weight: 600;
  transition: top var(--transition-fast);
}

/* La sombra solo al enfocar. Escondido arriba, un `box-shadow` se desborda
   hacia abajo y deja una franja gris cruzando el borde superior de la página. */
.skip-link:focus {
  top: var(--space-2);
  box-shadow: var(--shadow-lg);
}

/* Visible solo para lectores de pantalla. Mismo nombre que main.css:3327 para
   que el HTML portado no cambie. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}