/* ══════════════════════════════════════════════════════════════════════
   QVATUBE — Sistema de diseño
   Fondo casi negro + un único acento vivo (rojo-naranja). Tipografía:
   Bebas Neue para títulos (un solo peso, carga barata — pensado para
   conexiones lentas) + Inter para cuerpo/UI.
   ══════════════════════════════════════════════════════════════════════ */

/* Las fuentes (Bebas Neue + Inter) YA NO se cargan con un @import acá: un
   @import dentro de una hoja de estilos bloquea el primer pintado hasta que
   Google responde (o falla), y desde una red cubana lenta eso puede ser
   muchos segundos. Ahora cada página carga /fonts/fonts.css SIN bloquear
   (media="print" + onload) — el servidor las autoaloja solo, ver
   services/fonts.py. Mientras llegan se ve la tipografía del sistema. */

:root {
  /* Color */
  --bg:        #0a0a0b;
  --bg-2:      #111113;
  --surface:   #151517;
  --surface-2: #1c1c1f;
  --border:    #242428;
  --border-soft: #1a1a1d;

  --text:      #f5f4f0;
  --text-2:    #a8a8ad;
  --text-3:    #6b6b70;

  --accent:      #ff3d1a;
  --accent-dim:  #c92f12;
  --accent-ink:  #1a0500;
  --accent-soft: rgba(255, 61, 26, 0.14);

  --danger: #ff5252;
  --success: #3ddc84;

  /* Tipografía */
  --f-display: 'Bebas Neue', 'Arial Narrow', sans-serif;
  --f-body:    'Inter', -apple-system, 'Segoe UI', sans-serif;
  --f-mono:    ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* Radios y espaciado */
  --r-sm: 6px;
  --r:    10px;
  --r-lg: 16px;

  --safe-top: 0px;
}

* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
/* El documento en sí ya NO scrollea: header y todos los overlays son
   position:fixed, y el catálogo scrollea dentro de #content (su propio
   panel con overflow-y — ver .content en layout.css). Esto es justamente
   lo que permite ocultarle el scrollbar nativo de Android al índice A-Z:
   Chrome para Android ignora el ocultamiento por CSS en el scroll de la
   ventana/documento, pero SÍ lo respeta en un <div> con su propio scroll
   (igual que ya pasaba con las tiras horizontales .cats/.recent-row). De
   paso, elimina el rebote de scroll fantasma en iOS al no haber nada que
   scrollear en <html>/<body>. */
html, body { height: 100%; overflow: hidden; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--f-body);
  overscroll-behavior: none;
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--accent-soft); color: var(--text); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

h1, h2, h3, .display {
  font-family: var(--f-display);
  letter-spacing: 0.3px;
  font-weight: 400;
  line-height: 1.05;
}

a { color: inherit; text-decoration: none; }
button { font-family: inherit; border: none; background: none; cursor: pointer; color: inherit; }

/* ── Iconos SVG propios (ver web/static/js/icons.js) ──────────────────────
   Reemplazan a los emojis de texto en toda la web: un emoji lo dibuja la
   fuente del sistema operativo, así que en cada dispositivo (Smart TV,
   Android, iOS, escritorio...) puede salir con forma/color distinto o no
   existir directamente. Un <svg> con currentColor se ve siempre igual y
   hereda el color del texto de alrededor. */
.icon { display: inline-block; vertical-align: -3px; flex-shrink: 0; }
.icon-star, .review-star { vertical-align: -2px; }
.ico-ok { color: var(--success); }
.ico-bad { color: var(--danger); }

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