/* ============================================================================
   GENOMA CANÓNICO - INDUCOP
   Base única del sistema de diseño (CRISPR-0 v2)

   Versión: 2.0 - UNIFICADO
   Fecha: 14 Junio 2026

   CHANGELOG v2 (re-land):
   - Absorbe _variables.css (tokens estructurales)
   - Absorbe _compat-montserrat.css (grises, fonts, variantes)
   - Autoriza 29 tokens indefinidos (familia semántica + layout)
   - Resuelve 6 conflictos (navy/cyan/radius ganadores)
   - CORRECCIÓN: _compat-montserrat.css mantiene @import de fuente

   GENOMA = FUENTE ÚNICA DE VERDAD
   ============================================================================ */

:root {
    /* =========================================================================
       COLORES CORPORATIVOS (INMUTABLES)
       ========================================================================= */

    /* Colores primarios - valores de fenotipo actual (_variables.css) */
    --brand-navy: #184074;
    --brand-cyan: #00bcd4;
    /* S183: acento "Reportes Estrategicos" (morado, decorativo de seccion) — SSOT del inline repetido */
    --estrategicos: #667eea;
    --estrategicos-deep: #764ba2;
    --gradient-estrategicos: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    --brand-lime: #84cc16;
    --brand-dark: #0f172a;

    /* Variantes claras/oscuras (de _variables.css) */
    --brand-navy-light: #3b5998;
    --brand-navy-dark: #0f2a4a;
    --brand-cyan-light: #22d3ee;
    --brand-cyan-dark: #0891b2;
    --brand-lime-light: #a3e635;
    --brand-lime-dark: #65a30d;

    /* Lime legacy (de _compat-montserrat.css) */
    --brand-lime-legacy: #8bc34a;

    /* Marca externa (WhatsApp): color de marca, no re-pintable por piel */
    --brand-whatsapp: #25d366;

    /* =========================================================================
       PALETA DE MODULOS (identidad categorica, S193) — NO es marca ni rebrand.
       Como los --rpt y --estrategicos: cada modulo del CRM tiene un color de
       IDENTIDAD estable (nav + tarjetas 3D). Se define UNA vez aqui; los
       consumidores (_fluent-3d-icons.css, nav) usan var(--module-*), jamas hex.
       Rhito NO esta aqui: usa la MARCA (--brand-navy/-dark/-lime) a proposito.
       ========================================================================= */
    --module-prospectos: #a855f7;       --module-prospectos-deep: #6366f1;   --module-prospectos-badge: #9333ea;
    --module-cotizador: #06b6d4;        --module-cotizador-deep: #0284c7;
    --module-inventario: #10b981;       --module-inventario-deep: #059669;
    --module-reportes: #3b82f6;         --module-reportes-deep: #1d4ed8;
    --module-documentos: #6366f1;       --module-documentos-deep: #4338ca;

    /* =========================================================================
       FAMILIA SEMÁNTICA (Estados - 16 tokens autorizados)
       ========================================================================= */

    /* Success */
    --success-bg: #d1fae5;
    --success-text: #065f46;
    --success-border: #10b981;
    --success-icon: #22c55e;

    /* Warning */
    --warning-bg: #fef3c7;
    --warning-text: #92400e;
    --warning-border: #f59e0b;
    --warning-icon: #f59e0b;

    /* Danger */
    --danger-bg: #fee2e2;
    --danger-text: #991b1b;
    --danger-border: #ef4444;
    --danger-icon: #ef4444;

    /* Info */
    --info-bg: #dbeafe;
    --info-text: #1e40af;
    --info-border: #06b6d4;
    --info-icon: #06b6d4;

    /* Aliases status (para _patch-mis-prospectos.css) */
    --status-success-bg: var(--success-bg);
    --status-success-border: var(--success-border);
    --status-danger-bg: var(--danger-bg);
    --status-danger-border: var(--danger-border);

    /* Estados legacy (mantener compatibilidad) */
    --status-success: #22c55e;
    --status-warning: #f59e0b;
    --status-danger: #ef4444;
    --status-info: #3b82f6;
    --indigo:      #667eea;   /* acento de presets (filtros guardados) */
    --indigo-dark: #5a6fd6;   /* hover del preset activo */

    /* =========================================================================
       COLORES DE FONDO
       ========================================================================= */

    --bg-card: #ffffff;
    --bg-subtle: #f8fafc;
    --bg-secondary: #ffffff;   /* F2 S189: valor light legacy (dark en _themes) */
    --bg-hover: #f1f5f9;        /* F2 S189: valor light legacy (dark en _themes) */

    /* Autorizados (anteriormente indefinidos) */
    --bg-body: #f8fafc;
    --bg-card-hover: #f1f5f9;
    --bg-input: #f1f5f9;       /* F2 S189: valor light legacy (dark en _themes) */

    /* =========================================================================
       COLORES DE TEXTO
       ========================================================================= */

    --text-primary: #0f172a;   /* F2 S189: valor light legacy (dark en _themes) */
    --text-secondary: #475569; /* F2 S189: valor light legacy (dark en _themes) */
    --text-muted: #94a3b8;
    --text-inverse: #ffffff;

    /* =========================================================================
       GRISES (escala completa de _compat-montserrat.css)
       ========================================================================= */

    --gray-50: #f9fafb;
    --gray-100: #f3f4f6;
    --gray-200: #e5e7eb;
    --gray-300: #d1d5db;
    --gray-400: #9ca3af;
    --gray-500: #6b7280;
    --gray-600: #4b5563;
    --gray-700: #374151;
    --gray-800: #1f2937;
    --gray-900: #111827;

    /* =========================================================================
       BORDES
       ========================================================================= */

    --border-subtle: rgba(30, 58, 138, 0.1);  /* F2 S189: valor light legacy (dark en _themes) */
    --border-medium: #cbd5e1;
    --border-default: #cbd5e1;

    /* =========================================================================
       TIPOGRAFÍA
       ========================================================================= */

    /* Familias */
    --font-primary: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-mono: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
    --font-montserrat: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

    /* Tamaños - valores ganadores (px) */
    --text-2xs: 0.6875rem;   /* 11px - S198, racimo sub-xs (badges/metadatos diminutos) */
    --text-xs: 0.75rem;      /* 12px */
    --text-sm: 0.875rem;     /* 14px */
    --text-base: 1rem;       /* 16px */
    --text-lg: 1.125rem;     /* 18px */
    --text-xl: 1.25rem;      /* 20px */
    --text-2xl: 1.5rem;      /* 24px */
    --text-3xl: 1.875rem;    /* 30px - de _variables.css */
    --text-4xl: 2.25rem;     /* 36px */
    --text-5xl: 2.5rem;      /* 40px - S202, hero display fuera-de-escala (productos contact_form h1) */
    --text-6xl: 3rem;        /* 48px - S202, hero display fuera-de-escala (productos about_us h1) */
    --text-tooltip: 0.8125rem; /* 13px - S202, matiz de rol: tooltip de micro-UI (_floating_button); NO es peldano de la escala */

    /* Pesos */
    --font-light: 300;
    --font-normal: 400;
    --font-medium: 500;
    --font-semibold: 600;
    --font-bold: 700;
    --font-extrabold: 800;

    /* =========================================================================
       ESPACIADO (Sistema de 4px)
       ========================================================================= */

    --space-0: 0;
    --space-1: 0.25rem;      /* 4px */
    --space-2: 0.5rem;       /* 8px */
    --space-3: 0.75rem;      /* 12px */
    --space-4: 1rem;         /* 16px */
    --space-5: 1.25rem;      /* 20px */
    --space-6: 1.5rem;       /* 24px */
    --space-8: 2rem;         /* 32px */
    --space-10: 2.5rem;      /* 40px */
    --space-12: 3rem;        /* 48px - de _variables.css */
    --space-16: 4rem;        /* 64px - de _variables.css */

    /* =========================================================================
       RADIOS - valores de fenotipo actual (_variables.css en rem)
       ========================================================================= */

    --radius-sm: 0.25rem;    /* 4px */
    --radius-md: 0.375rem;   /* 6px */
    --radius-lg: 0.5rem;     /* 8px */
    --radius-xl: 0.75rem;    /* 12px */
    --radius-2xl: 1rem;      /* 16px */
    --radius-full: 9999px;

    /* =========================================================================
       SOMBRAS
       ========================================================================= */

    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);   /* F2 S189: valor light legacy (dark en _themes) */
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);   /* F2 S189: valor light legacy (dark en _themes) */
    --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.1);
    --shadow-card-hover: 0 4px 12px rgba(0, 0, 0, 0.15);
    --shadow-glow-cyan: 0 4px 20px rgba(6, 182, 212, 0.15);  /* F2 S189: valor light legacy (dark en _themes) */

    /* =========================================================================
       EFECTOS DE CARD por token (S178) — consumidos por .mo-card-product; la piel
       los amplifica/enciende. lift = BASELINE canon (preserva el hover -5px del
       <style> inline migrado -> diff=0 canon); glow/ring = INERTES (canon no los
       tenia -> sombra transparente de CERO, no 'none': invalido en lista box-shadow).
       Quitar [data-skin] -> baseline canon, sin residuo.
       ========================================================================= */
    --card-lift: -5px;                 /* hover translateY (baseline canon) */
    --card-glow: 0 0 0 0 transparent;  /* sombra de color en hover (inerte) */
    --card-ring: 0 0 0 0 transparent;  /* aro de marca (inerte) */
    --surface-glass: var(--surface-base);  /* superficie glass: opaca/inerte en canon; la piel la vuelve translucida */

    /* =========================================================================
       TRANSICIONES
       ========================================================================= */

    --transition-fast: 150ms ease-out;
    --transition-base: 200ms ease-out;
    --transition-slow: 300ms ease-out;

    /* =========================================================================
       Z-INDEX (de _variables.css)
       ========================================================================= */

    --z-dropdown: 100;
    --z-sticky: 200;
    --z-modal: 500;
    --z-tooltip: 700;
    --z-toast: 800;
    --z-overlay: 999;
    --z-sidebar: 1000;
    --z-splash: 9999;

    /* =========================================================================
       LAYOUT (de _variables.css)
       ========================================================================= */

    --container-2xl: 1400px;
    --sidebar-width: 236px;   /* S196: sidebar angostado (era 280) sin recortar texto de nav */
    --sidebar-width-collapsed: 70px;
    --sidebar-collapsed-width: 70px;
    --sidebar-width-sm: 320px;

    /* =========================================================================
       COMPATIBILIDAD - ALIASES (base.html depende)
       ========================================================================= */

    --inducop-navy: var(--brand-navy);
    --inducop-cyan: var(--brand-cyan);
    --inducop-lime: var(--brand-lime);
    --inducop-dark: var(--brand-dark);
    --inducop-lime-legacy: var(--brand-lime-legacy);

    /* Variantes con nombre inducop (de _compat-montserrat.css) */
    --inducop-navy-light: #2563a8;
    --inducop-navy-dark: #0f2d52;
    --inducop-cyan-light: #26e0f0;
    --inducop-cyan-dark: #0097a7;

    /* =========================================================================
       U2.a (F3, S176) - Tokens antes definidos SOLO en design-system/_themes.css
       (:root / [data-theme="light"]). Promovidos al genoma para que _tokens.css
       sea el DUENO UNICO del light/base. Sus overrides de modo oscuro / alto
       contraste siguen viviendo en _themes.css ([data-theme="dark"|"*-hc"]).
       ========================================================================= */

    /* Fondos (nuevos en genoma) */
    --bg-overlay: rgba(15, 23, 42, 0.5);

    /* Texto / enlace */
    --text-link: var(--brand-cyan);

    /* Bordes (variantes) -- U2.c.1b: recuperados al genoma. Seguros: su valor LIGHT es
       identico en legacy (css/themes.css) y design-system, y el dark ahora gana por
       especificidad (:root[data-theme=dark], U2.c.1a). */
    --border-light: #e2e8f0;
    --border-dark: #cbd5e1;

    /* F2 (S189): --bg-primary y --border-strong SI se promueven al genoma (bloque "F2 CIERRE
       LEGACY" abajo), resolviendo U2.c.2 = valor LIGHT legacy preservado (cero-visual).
       themes.css deja de gobernar tokens. */

    /* Scrollbar */
    --scrollbar-track: #f1f5f9;
    --scrollbar-thumb: #cbd5e1;
    --scrollbar-thumb-hover: #94a3b8;

    /* =========================================================================
       F2 CIERRE LEGACY (S189) - tokens antes gobernados SOLO por css/themes.css,
       promovidos al genoma preservando su valor LIGHT actual (cero-visual). Su faceta
       dark vive en design-system/_themes.css. Ver DIFF_F2_CIERRE_LEGACY_THEMES_S189.md.
       ========================================================================= */
    --bg-primary:    #f8fafc;                 /* CANVAS (body + --bs-body-bg); dark en _themes */
    --border-strong: rgba(30, 58, 138, 0.2);  /* dark en _themes (#64748b) */
    --shadow-lg:     0 8px 30px rgba(0, 0, 0, 0.12);   /* dark en _themes */
    --header-bg:     linear-gradient(135deg, var(--navy) 0%, var(--navy-light) 100%);  /* dark en _themes (transparent) */
    --grid-color:    rgba(30, 58, 138, 0.04); /* patron de fondo (themes.css body::before); dark en _themes */
    --navy-dark:     var(--brand-dark);        /* #0f172a - preserva legacy */
    --navy-light:    #2d4a9e;                  /* sin equivalente de marca; crudo sancionado (regla d) */
    --cyan-light:    var(--brand-cyan-light);  /* #22d3ee - mismo valor */
    --warning-orange: var(--status-warning);   /* alias legacy - #f59e0b, invariante */
    --success-green:  var(--status-success);   /* alias legacy - #22c55e, invariante */

    /* Compatibilidad de marca (aliases sin prefijo) */
    --navy: var(--brand-navy);
    --cyan: var(--brand-cyan);
    --cyan-dark: var(--brand-cyan-dark);
    --lime: var(--brand-lime);

    /* =========================================================================
       U3.0 (S176) - VOCABULARIO DE ROL (taxonomia de pieles). Ver
       docs/vuelo/INVENTARIO_U3_TAXONOMIA_TOKENS_S176.md.
       Un objeto DECLARA su rol; la piel (data-skin) y el dark (data-theme) reasignan
       estos pocos tokens. Casi todos ALIASAN tokens existentes (heredan su conmutacion);
       los que tienen valor propio traen su piel dark en _themes.css.
       ADITIVO: sin consumidores aun (los objetos migran en U3.1+).
       ========================================================================= */

    /* Superficies (tiers de elevacion) */
    --surface-base:    var(--bg-card);      /* card estandar */
    --surface-raised:  #ffffff;             /* elevado; dark = mas claro que el fondo (_themes) */
    --surface-sunken:  var(--bg-subtle);    /* hundido; --bg-subtle ahora conmuta (_themes) */
    --surface-overlay: var(--bg-overlay);   /* backdrop de modales/drawers */

    /* Rellenos semanticos suaves - TRANSLUCIDOS EN AMBOS MODOS (dark-safe, decision S176) */
    --fill-success: rgba(34, 197, 94, 0.12);
    --fill-warning: rgba(245, 158, 11, 0.12);
    --fill-danger:  rgba(239, 68, 68, 0.12);
    --fill-info:    rgba(6, 182, 212, 0.12);
    --fill-neutral: rgba(100, 116, 139, 0.12);

    /* Texto sobre relleno (aliasa los semanticos, ya conmutan) */
    --on-fill-success: var(--success-text);
    --on-fill-warning: var(--warning-text);
    --on-fill-danger:  var(--danger-text);
    --on-fill-info:    var(--info-text);
    --on-fill-neutral: var(--text-secondary);

    /* Borde de estado (aliasa los semanticos, ya conmutan) */
    --edge-success: var(--success-border);
    --edge-warning: var(--warning-border);
    --edge-danger:  var(--danger-border);
    --edge-info:    var(--info-border);

    /* =========================================================================
       U3.0-ext (S176) - PALETA CATEGORICA + RECURSOS GRAFICOS
       Anticipa recursos de uso inminente/probable del inventario. Todo ACOTADO
       (N slots fijos, no por-objeto). Piel dark de los conmutables en _themes.css.
       ========================================================================= */

    /* Categorico: workflow/categorias que necesitan DISTINCION (no salud-semantica).
       Un dominio (quote-status 7, lead-status 7, category 7, pipeline 5) mapea sus
       miembros a estos 8 slots. Rellenos TRANSLUCIDOS (dark-safe). */
    --cat-1: rgba(6, 182, 212, 0.12);    /* cyan    */
    --cat-2: rgba(59, 130, 246, 0.12);   /* azul    */
    --cat-3: rgba(139, 92, 246, 0.12);   /* violeta */
    --cat-4: rgba(236, 72, 153, 0.12);   /* rosa    */
    --cat-5: rgba(245, 158, 11, 0.12);   /* ambar   */
    --cat-6: rgba(132, 204, 22, 0.12);   /* lima    */
    --cat-7: rgba(20, 184, 166, 0.12);   /* teal    */
    --cat-8: rgba(100, 116, 139, 0.12);  /* slate   */
    /* Texto sobre categorico (hue saturado; conmuta a claro en dark, _themes) */
    --on-cat-1: #0e7490;
    --on-cat-2: #1e40af;
    --on-cat-3: #5b21b6;
    --on-cat-4: #9d174d;
    --on-cat-5: #92400e;
    --on-cat-6: #3f6212;
    --on-cat-7: #115e59;
    --on-cat-8: #334155;

    /* S184: texto sobre categorico para SUPERFICIE OSCURA FIJA (ej. banner navy de
       leads). NO conmuta por tema (la superficie es oscura siempre) -> siempre el
       valor claro. Espejo del bloque --on-cat-*/--*-text del tema oscuro (_themes.css).
       Vive en el genoma (SSOT, exento del guard hex); los componentes lo CONSUMEN. */
    --on-cat-1-ondark: #22d3ee;
    --on-cat-2-ondark: #93c5fd;
    --on-cat-3-ondark: #c4b5fd;
    --on-cat-4-ondark: #f9a8d4;
    --on-cat-5-ondark: #fcd34d;
    --on-cat-6-ondark: #bef264;
    --on-cat-7-ondark: #5eead4;
    --on-cat-8-ondark: #cbd5e1;
    --on-fill-success-ondark: #4ade80;
    --on-fill-danger-ondark:  #f87171;

    /* Avatar: color de identidad por indice (el componente compone el gradiente).
       Colores estables en ambos modos (identidad, no superficie). */
    --avatar-1: var(--brand-cyan);
    --avatar-2: #8b5cf6;   /* violeta */
    --avatar-3: #ec4899;   /* rosa    */
    --avatar-4: #f97316;   /* naranja */
    --avatar-5: #14b8a6;   /* teal    */
    --avatar-6: var(--brand-lime);

    /* Hues categoricos sueltos (no cubiertos por --avatar-*): iconos decorativos.
       --hue-indigo recurre cross-superficie (drawer Nora + icon-gradient-purple).
       Estables en ambos modos (identidad, no superficie). Los '-light' se derivan
       con color-mix en el consumidor (idioma S179), no como token. */
    --hue-indigo: #6366f1;
    --hue-slate:  #64748b;

    /* Gradientes recurrentes (compuestos de tokens) */
    --gradient-brand:  linear-gradient(135deg, var(--brand-navy), var(--brand-cyan));
    --gradient-header: linear-gradient(135deg, #1e293b, #334155);   /* header/drawer oscuro */
    --gradient-success:       linear-gradient(135deg, var(--success-icon), #16a34a);   /* estado ganado / CTA exito */
    --gradient-success-hover: linear-gradient(135deg, #16a34a, #15803d);

    /* Glow / sombra de color (hover, focus, efectos de piel) */
    --glow-cyan:    var(--shadow-glow-cyan);
    --glow-success: 0 0 16px rgba(34, 197, 94, 0.35);
    --glow-warning: 0 0 16px rgba(245, 158, 11, 0.35);
    --glow-danger:  0 0 16px rgba(239, 68, 68, 0.35);

    /* =========================================================================
       U3 (S176) - PUENTE A BOOTSTRAP 5.3: sus --bs-* consumen NUESTROS tokens.
       Requiere que _themes.css se cargue en TODAS las paginas (base.html) para que
       estos tokens conmuten en legacy tambien; sin eso el body se iba a claro (la
       regresion de los blancos). Efecto: (1) una sola paleta; (2) Bootstrap SKINNEABLE
       -> una piel que mute el genoma re-tematiza .card/.modal/.table/forms.
       --bs-body-bg usa --bg-primary (el mismo token que pinta el <body> de la pagina).
       ========================================================================= */
    --bs-body-bg: var(--bg-primary);
    --bs-body-color: var(--text-primary);
    --bs-emphasis-color: var(--text-primary);
    --bs-secondary-color: var(--text-secondary);
    --bs-tertiary-color: var(--text-muted);
    --bs-secondary-bg: var(--bg-secondary);
    --bs-tertiary-bg: var(--bg-subtle);
    --bs-card-bg: var(--surface-base);
    --bs-card-cap-bg: var(--bg-subtle);
    --bs-border-color: var(--border-subtle);
    --bs-link-color: var(--text-link);
    --bs-link-hover-color: var(--brand-cyan-dark);
    --bs-heading-color: var(--text-primary);

    /* PRIMARY = color de MARCA (amplificador S177). Canon = navy; una piel que reasigne
       --brand-navy repinta botones/links/utilidades .*-primary. --bs-primary-rgb es un
       triplete literal: las pieles que cambien el primario deben re-declararlo. */
    --bs-primary: var(--brand-navy);
    --bs-primary-rgb: 24, 64, 116;
}

/* Reconciliacion de COMPONENTES Bootstrap con color LITERAL compilado (no var):
   .btn-primary/.btn-outline-primary fijan --bs-btn-* hardcodeados (#0d6efd) -> se
   remapean a la marca para que SIGAN la piel. En @layer genoma (> vendor) ganan al
   Bootstrap compilado; en las bases sin capa ganan por orden de carga. */
.btn-primary {
    --bs-btn-bg: var(--brand-navy);
    --bs-btn-border-color: var(--brand-navy);
    --bs-btn-hover-bg: var(--brand-navy-dark);
    --bs-btn-hover-border-color: var(--brand-navy-dark);
    --bs-btn-active-bg: var(--brand-navy-dark);
    --bs-btn-active-border-color: var(--brand-navy-dark);
    --bs-btn-disabled-bg: var(--brand-navy);
    --bs-btn-disabled-border-color: var(--brand-navy);
}
.btn-outline-primary {
    --bs-btn-color: var(--brand-navy);
    --bs-btn-border-color: var(--brand-navy);
    --bs-btn-hover-bg: var(--brand-navy);
    --bs-btn-hover-border-color: var(--brand-navy);
    --bs-btn-active-bg: var(--brand-navy);
    --bs-btn-active-border-color: var(--brand-navy);
}

/* =========================================================================
   ESCALA TIPOGRAFICA RESPONSIVE (Fase 3, S201) -- hogar UNICO del downscale
   movil. Antes vivia en css/theme.css (solo mundo publico); subido al genoma
   para que TODOS los mundos que cargan _tokens.css reescalen la tipografia en
   movil (incluido el dashboard). Valores identicos a los que tenia theme.css:
   cero-visual para el publico; comportamiento NUEVO para el dashboard (QA movil).
   ========================================================================= */
@media (max-width: 768px) {
    :root {
        --text-base: 0.875rem;
        --text-lg: 1rem;
        --text-xl: 1.125rem;
        --text-2xl: 1.25rem;
        --text-3xl: 1.5rem;
        --text-4xl: 1.875rem;
    }
}