/* ═══════════════════════════════════════════════════════════════════
   Konexia — Tokens (docs/design-system.md, sección 3)
   La única hoja con colores a pelo: todo lo demás los usa por su variable.
   Paleta de la guía de marca de Konexia (docs/konexia-guia-de-marca.png, 16/09/2026).
   ═══════════════════════════════════════════════════════════════════ */
:root {
    --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    /* Marca: índigo primario, morado secundario, cian de acento, degradado de la K */
    --primary: #6366f1;
    --primary-hover: #4f46e5;
    --primary-soft: #eef2ff;
    --primary-text: #3730a3;
    --secondary: #a855f7;
    --secondary-soft: #f3e8ff;
    --accent: #22d3ee;
    --accent-soft: #ecfeff;
    --gradiente-marca: linear-gradient(135deg, #6366f1, #a855f7);
    /* Fondos: página gris muy claro, tarjetas blancas con sombra, lateral claro */
    --bg-main: #f8fafc;
    --bg-sidebar: #ffffff;
    --bg-card: #ffffff;
    --bg-card-hover: #f8fafc;
    --bg-input: #ffffff;
    --bg-elevated: #f1f5f9;
    --sidebar-text: #0f172a;
    --sidebar-muted: #64748b;
    --sidebar-active: #eef2ff;
    --sidebar-hover: #f1f5f9;
    --sidebar-border: #e2e8f0;
    /* Bordes */
    --border-light: #e2e8f0;
    --border-strong: #cbd5e1;
    /* Texto */
    --text-primary: #0f172a;
    --text-secondary: #475569;
    --text-muted: #64748b;
    /* Semánticos */
    --green: #10b981;
    --green-soft: #ecfdf5;
    --blue: #3b82f6;
    --blue-soft: #eff6ff;
    --purple: #a855f7;
    --purple-soft: #f3e8ff;
    --danger: #f43f5e;
    --danger-soft: #fff1f2;
    --pending: #f59e0b;
    --pending-soft: #fffbeb;
    /* Alias de la piel anterior (dorado): siguen funcionando, pero lo nuevo usa --primary */
    --orange: var(--primary);
    --orange-hover: var(--primary-hover);
    --orange-soft: var(--primary-soft);
    --orange-text: var(--primary-text);
    --orange-ink: #1e1b4b;
    /* Redes */
    --red-facebook: #1877f2;
    --red-instagram: linear-gradient(135deg, #f58529, #dd2a7b 55%, #8134af);
    --red-whatsapp: #25d366;
    /* Layout */
    --sidebar-w: 240px;
    /* Escala de espaciado 4/8 (unica fuente de verdad para paddings y gaps) */
    --sp-1: 4px;
    --sp-2: 8px;
    --sp-3: 12px;
    --sp-4: 16px;
    --sp-5: 24px;
    --sp-6: 32px;
    --sp-7: 48px;
    /* Tamanos de icono */
    --ico-sm: 16px;
    --ico-md: 18px;
    --ico-lg: 22px;
    /* Sombras y radios: las tarjetas no llevan borde, llevan sombra */
    --shadow-sm: 0 1px 3px rgba(20, 29, 56, .05);
    --shadow-md: 0 2px 12px rgba(20, 29, 56, .06);
    --shadow-lg: 0 24px 60px rgba(26, 31, 46, .25);
    --radius-sm: 8px;
    --radius-md: 10px;
    --radius-lg: 16px;
    --tinta: var(--orange);
    --tinta-soft: var(--orange-soft);
    /* Maquetas de Facebook e Instagram (imitan la app, no la marca del hub) */
    --maqueta-texto: #1c1e21;
    --maqueta-gris: #65676b;
    --maqueta-gris-claro: #8a8d91;
    --maqueta-fondo: #f0f2f5;
    --maqueta-fondo-2: #e6e8ec;
    --maqueta-borde: #eceff3;
    --maqueta-borde-2: #e4e6eb;
    --maqueta-borde-3: #dfe2e6;
    --maqueta-foto: #e9ebef;
    --maqueta-punto: #c8cbd0;
    --maqueta-avatar-fb: #4a6fa5;
    --ig-rosa: #c9385f;
    --ig-naranja: #e0a44e;
    --ig-morado: #7a3fb3;
    --telefono-marco: #1a1f2e;
    --telefono-borde: #3a4256;
    --negro: #000;
    --red-tiktok: #111;
    --red-linkedin: #0a66c2;
    --red-linkedin-soft: #e6effa;
    --red-linkedin-texto: #0a4f9c;
    --red-tiktok-soft: #ececec;
    --text-primary-hover: #1e293b;
    --bg-elevated-2: #e2e8f0;
    --green-soft-2: #f0fdf4;
    --pending-text: #b45309;
    --avatar-dorado: #6366f1;
    --avatar-azul: #3b82f6;
    --avatar-ocre: #a855f7;
    --avatar-verde: #10b981;
    --avatar-morado: #ec4899;
    /* Tema público (landing): el azul marino de la guía de Konexia con el brillo de la marca */
    --auth-bg: #0f172a;
    --auth-card: #1e293b;
    --auth-elevated: #273449;
    --auth-border: #334155;
    --auth-text-secondary: #cbd5e1;
    --auth-hero: #312e81;
    --auth-hero-2: #1e1b4b;
    --auth-text: #f8fafc;
    --auth-border-strong: #475569;
    --red-youtube: #ff0000;
    --sombra-marca: rgba(99, 102, 241, .35);
    --red-x: #000000;
    --ig-azul: #0095f6;
}