/* ============================================================
   THEME — VELOX
   SOLO tokens de marca. Nada de reglas de componentes aqui.
   Para reskinear el panel entero se cambia unicamente este
   archivo. components.css consume estas variables y nunca
   repite un valor de color.

   La identidad viene del panel anterior del usuario: verde
   lima sobre azul-negro, tipografia Poppins.
   ============================================================ */

:root {
  /* --- Paleta base --- */
  --bg: #030712;          /* fondo general */
  --bg-soft: #0a1220;     /* franjas y cabeceras de tabla */
  --surface: #101c2a;     /* tarjetas */
  --surface-2: #172537;   /* controles sobre tarjeta */
  --surface-3: #1f3147;   /* hover de controles */
  --border: #1e2d40;
  --border-fuerte: #2c4159;

  /* --- Texto --- */
  --texto: #f1f5f9;
  --texto-suave: #94a3b8;
  --texto-tenue: #64748b;

  /* --- Acentos ---
     El verde lima manda sobre toda la interfaz. Sobre el acento
     el texto va NEGRO (el verde es muy luminoso y con texto
     blanco no llega al contraste minimo de accesibilidad). */
  --marca: #04ff00;
  --marca-2: #99ff00;
  --marca-texto: #030712;
  --marca-suave: color-mix(in srgb, var(--marca) 12%, transparent);
  --marca-brillo: color-mix(in srgb, var(--marca) 40%, transparent);

  /* --- Semanticos --- */
  --exito: #22c55e;
  --peligro: #ef4444;
  --alerta: #f59e0b;
  --info: #38bdf8;

  /* --- Colores por plataforma (chips, iconos de categoria) --- */
  --p-tiktok: #ff0050;
  --p-instagram: #e1306c;
  --p-facebook: #1877f2;
  --p-youtube: #ff0000;
  --p-netflix: #e50914;
  --p-spotify: #1db954;
  --p-freefire: #ff6b00;
  --p-robux: #00a2ff;
  --p-generico: var(--marca);

  /* --- Formas --- */
  --radio-sm: 8px;
  --radio: 12px;
  --radio-lg: 18px;
  --radio-full: 999px;

  /* --- Sombras --- */
  --sombra-sm: 0 1px 2px rgb(0 0 0 / 45%);
  --sombra: 0 8px 24px rgb(0 0 0 / 40%);
  --sombra-lg: 0 20px 50px rgb(0 0 0 / 50%);

  /* --- Espaciado --- */
  --esp-1: 4px;
  --esp-2: 8px;
  --esp-3: 12px;
  --esp-4: 16px;
  --esp-5: 24px;
  --esp-6: 32px;
  --esp-7: 48px;
  --esp-8: 64px;

  /* --- Tipografia ---
     Poppins con fallback al stack del sistema: si la fuente no
     carga (sin red, o el VPS sirviendola local), la interfaz no
     se rompe ni cambia de metricas de forma brusca. */
  --fuente: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --fuente-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;

  /* --- Layout --- */
  --ancho-max: 1320px;
  --ancho-texto: 680px;
  --alto-header: 64px;
  --ancho-lateral: 250px;

  /* --- Transiciones --- */
  --trans: 180ms cubic-bezier(0.4, 0, 0.2, 1);
}