/**
 * Archivo: assets/css/shared/variables.css
 * Sistema: Allage - Variables CSS Globales Compartidas
 * Versión: 1.4.0
 * Fecha: 05 Febrero 2026
 *
 * Cambios v1.4.0:
 * - Añadidas variables green-light alpha: --ltn-green-light-15/20/30/40/50
 * - Añadidas variables shadow-accent: --ltn-shadow-accent-08/30/40
 * - Añadida --ltn-overlay-white-15, --ltn-overlay-black-70
 * - Añadida --ltn-info-alpha-40
 *
 * Cambios v1.3.0:
 * - Añadidas variables de alertas Bootstrap: backgrounds, textos, borders
 * - --ltn-success-bg, --ltn-warning-bg, --ltn-error-bg, --ltn-info-bg
 * - --ltn-success-text, --ltn-warning-text, --ltn-error-text, --ltn-info-text
 * - --ltn-success-border, --ltn-warning-border, --ltn-error-border, --ltn-info-border
 *
 * Cambios v1.2.0:
 * - Añadido --ltn-hover-overlay-strong para hover más visible
 * - Añadido --ltn-overlay-light para overlays claros en fondos oscuros
 *
 * Cambios v1.1.0:
 * - Añadido --ltn-hover-overlay para efectos hover sutiles
 * - Añadido --ltn-shadow-tooltip para tooltips oscuros
 *
 * DESCRIPCIÓN:
 * Variables CSS compartidas entre admin y frontend para todos los módulos.
 * Este archivo se carga SIEMPRE (admin + frontend) para garantizar consistencia.
 *
 * USO:
 * - Usar variables --ltn-* en todos los componentes
 * - Los fallbacks garantizan funcionamiento sin este archivo
 * - Visual Customizer puede modificar estas variables dinámicamente
 *
 * COLORES CORPORATIVOS:
 * - Verde principal: #506727 (--ltn-green-primary)
 * - Verde oscuro: #3e5120 (--ltn-green-dark)
 * - Verde claro: #BACD70 (--ltn-green-light)
 * - Terracota hover: #D57B4E (--ltn-terra)
 */

:root {
    /* ===========================================
       COLORES PRIMARIOS
       =========================================== */
    --ltn-green-primary: #506727;
    --ltn-green-dark: #3e5120;
    --ltn-green-light: #BACD70;
    --ltn-green-accent: #9ACD32;
    --ltn-green-bg: #F7F9ED;

    /* Color de hover para botones */
    --ltn-terra: #D57B4E;

    /* ===========================================
       ESCALA DE GRISES
       =========================================== */
    --ltn-white: #FFFFFF;
    --ltn-gray-50: #F9FAFB;
    --ltn-gray-100: #F8FAFC;
    --ltn-gray-200: #E2E8F0;
    --ltn-gray-300: #CBD5E0;
    --ltn-gray-400: #A0AEC0;
    --ltn-gray-500: #718096;
    --ltn-gray-600: #4A5568;
    --ltn-gray-700: #334155;
    --ltn-gray-800: #1E293B;
    --ltn-gray-900: #0F172A;

    /* ===========================================
       COLORES SEMÁNTICOS
       =========================================== */
    --ltn-success: #10B981;
    --ltn-warning: #F59E0B;
    --ltn-error: #EF4444;
    --ltn-info: #3B82F6;

    /* Backgrounds de alertas (Bootstrap-compatible) */
    --ltn-success-bg: #d4edda;
    --ltn-warning-bg: #fff3cd;
    --ltn-error-bg: #f8d7da;
    --ltn-info-bg: #d1ecf1;
    --ltn-neutral-bg: #e2e3e5;

    /* Textos de alertas */
    --ltn-success-text: #155724;
    --ltn-warning-text: #856404;
    --ltn-error-text: #721c24;
    --ltn-info-text: #0c5460;
    --ltn-neutral-text: #383d41;

    /* Borders de alertas */
    --ltn-success-border: #c3e6cb;
    --ltn-warning-border: #ffeaa7;
    --ltn-error-border: #f5c6cb;
    --ltn-info-border: #bee5eb;
    --ltn-neutral-border: #d6d8db;

    /* Variantes oscuras de colores semánticos */
    --ltn-success-dark: #1e7e34;
    --ltn-error-dark: #c82333;
    --ltn-info-dark: #0056b3;
    --ltn-warning-dark: #e67e22;

    /* Colores Flat UI (compat) */
    --ltn-flat-gray: #95a5a6;
    --ltn-flat-gray-dark: #7f8c8d;
    --ltn-flat-red: #c0392b;
    --ltn-purple: #9b59b6;
    --ltn-indigo: #667eea;

    /* ===========================================
       ESPACIADO
       =========================================== */
    --ltn-spacing-xs: 4px;
    --ltn-spacing-sm: 8px;
    --ltn-spacing-md: 16px;
    --ltn-spacing-lg: 24px;
    --ltn-spacing-xl: 32px;

    /* ===========================================
       CONTROLES INTERACTIVOS
       =========================================== */
    --ltn-control-height: 38px;

    /* ===========================================
       BORDES Y RADIOS
       =========================================== */
    --ltn-border-radius: 8px;
    --ltn-border-radius-sm: 4px;
    --ltn-border-radius-lg: 12px;
    --ltn-border: 1px solid var(--ltn-gray-200);

    /* ===========================================
       SOMBRAS
       =========================================== */
    --ltn-shadow-sm: 0 2px 4px rgba(80, 103, 39, 0.1);
    --ltn-shadow-md: 0 4px 8px rgba(80, 103, 39, 0.15);
    --ltn-shadow-lg: 0 8px 16px rgba(80, 103, 39, 0.2);
    --ltn-shadow-tooltip: 0 2px 8px rgba(0, 0, 0, 0.25);

    /* ===========================================
       OVERLAYS Y EFECTOS
       =========================================== */
    --ltn-hover-overlay: rgba(0, 0, 0, 0.02);
    --ltn-hover-overlay-strong: rgba(0, 0, 0, 0.05);
    --ltn-overlay-light: rgba(255, 255, 255, 0.1);
    --ltn-overlay-white-15: rgba(255, 255, 255, 0.15);
    --ltn-overlay-white-20: rgba(255, 255, 255, 0.2);
    --ltn-overlay-white-30: rgba(255, 255, 255, 0.3);
    --ltn-overlay-white-80: rgba(255, 255, 255, 0.8);
    --ltn-overlay-white-90: rgba(255, 255, 255, 0.9);
    --ltn-overlay-dark: rgba(0, 0, 0, 0.5);
    --ltn-overlay-dark-60: rgba(0, 0, 0, 0.6);
    --ltn-overlay-dark-80: rgba(52, 58, 64, 0.8);
    --ltn-overlay-dark-90: rgba(52, 58, 64, 0.9);
    --ltn-overlay-black-04: rgba(0, 0, 0, 0.04);
    --ltn-overlay-black-07: rgba(0, 0, 0, 0.07);
    --ltn-overlay-black-08: rgba(0, 0, 0, 0.08);
    --ltn-overlay-black-10: rgba(0, 0, 0, 0.1);
    --ltn-overlay-black-12: rgba(0, 0, 0, 0.12);
    --ltn-overlay-black-15: rgba(0, 0, 0, 0.15);
    --ltn-overlay-black-20: rgba(0, 0, 0, 0.2);
    --ltn-overlay-black-25: rgba(0, 0, 0, 0.25);
    --ltn-overlay-black-30: rgba(0, 0, 0, 0.3);
    --ltn-overlay-black-70: rgba(0, 0, 0, 0.7);

    /* Sombras corporativas (verde) */
    --ltn-shadow-green-10: rgba(80, 103, 39, 0.1);
    --ltn-shadow-green-15: rgba(80, 103, 39, 0.15);
    --ltn-shadow-green-20: rgba(80, 103, 39, 0.2);
    --ltn-shadow-green-30: rgba(80, 103, 39, 0.3);
    --ltn-shadow-accent-10: rgba(107, 142, 35, 0.1);
    --ltn-shadow-accent-15: rgba(107, 142, 35, 0.15);
    --ltn-shadow-accent-20: rgba(107, 142, 35, 0.2);
    --ltn-shadow-accent-25: rgba(107, 142, 35, 0.25);
    --ltn-shadow-accent-30: rgba(107, 142, 35, 0.3);
    --ltn-shadow-accent-40: rgba(107, 142, 35, 0.4);
    --ltn-shadow-accent-08: rgba(107, 142, 35, 0.08);

    /* Transparencias green-light (BACD70 = 186, 205, 112) */
    --ltn-green-light-15: rgba(186, 205, 112, 0.15);
    --ltn-green-light-20: rgba(186, 205, 112, 0.2);
    --ltn-green-light-30: rgba(186, 205, 112, 0.3);
    --ltn-green-light-40: rgba(186, 205, 112, 0.4);
    --ltn-green-light-50: rgba(186, 205, 112, 0.5);

    /* Transparencias semánticas */
    --ltn-success-alpha-10: rgba(40, 167, 69, 0.1);
    --ltn-success-alpha-30: rgba(40, 167, 69, 0.3);
    --ltn-error-alpha-10: rgba(220, 53, 69, 0.1);
    --ltn-error-alpha-30: rgba(220, 53, 69, 0.3);
    --ltn-warning-alpha-10: rgba(255, 193, 7, 0.1);
    --ltn-warning-alpha-30: rgba(255, 193, 7, 0.3);
    --ltn-info-alpha-40: rgba(0, 124, 186, 0.4);

    /* ===========================================
       TRANSICIONES
       =========================================== */
    --ltn-transition: all 0.2s ease;
    --ltn-transition-fast: all 0.15s ease;
    --ltn-transition-slow: all 0.3s ease;

    /* ===========================================
       TIPOGRAFÍA
       =========================================== */
    --ltn-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    --ltn-font-size-xs: 11px;
    --ltn-font-size-sm: 13px;
    --ltn-font-size-md: 14px;
    --ltn-font-size-lg: 16px;
    --ltn-font-size-xl: 18px;

    /* ===========================================
       ALIAS SIMPLIFICADOS PARA BOTONES
       =========================================== */
    --ltn-primary: var(--ltn-green-primary);
    --ltn-primary-dark: var(--ltn-green-dark);
    --ltn-primary-light: var(--ltn-green-light);
    --ltn-primary-hover: var(--ltn-green-light);
    --ltn-green-hover: #9acd32;

    /* ===========================================
       ALIAS DE COMPATIBILIDAD (--acf-* → --ltn-*)
       Estos alias permiten migración gradual
       =========================================== */
    --acf-green-primary: var(--ltn-green-primary);
    --acf-green-dark: var(--ltn-green-dark);
    --acf-green-light: var(--ltn-green-light);
    --acf-green-accent: var(--ltn-green-accent);
    --acf-green-bg: var(--ltn-green-bg);
    --acf-terra: var(--ltn-terra);
    --acf-white: var(--ltn-white);
    --acf-gray-50: var(--ltn-gray-50);
    --acf-gray-100: var(--ltn-gray-100);
    --acf-gray-200: var(--ltn-gray-200);
    --acf-gray-300: var(--ltn-gray-300);
    --acf-gray-400: var(--ltn-gray-400);
    --acf-gray-500: var(--ltn-gray-500);
    --acf-gray-600: var(--ltn-gray-600);
    --acf-gray-700: var(--ltn-gray-700);
    --acf-gray-800: var(--ltn-gray-800);
    --acf-gray-900: var(--ltn-gray-900);
    --acf-shadow-sm: var(--ltn-shadow-sm);
    --acf-shadow-md: var(--ltn-shadow-md);
    --acf-shadow-lg: var(--ltn-shadow-lg);
    --acf-transition: var(--ltn-transition);
    --acf-border-radius: var(--ltn-border-radius);
    --acf-border: var(--ltn-border);
    --acf-spacing-xs: var(--ltn-spacing-xs);
    --acf-spacing-sm: var(--ltn-spacing-sm);
    --acf-spacing-md: var(--ltn-spacing-md);
    --acf-spacing-lg: var(--ltn-spacing-lg);
    --acf-spacing-xl: var(--ltn-spacing-xl);
}

/* ═══════════════════════════════════════════════════════════════════════════
   PUENTE GUTENBERG — ltn-theme/theme.json
   ═══════════════════════════════════════════════════════════════════════════
   Cuando ltn-theme está activo, Gutenberg genera variables CSS con el prefijo
   --wp--preset--color--{slug} a partir de los colores definidos en theme.json.

   Este bloque hace que --ltn-* consuma esas variables generadas por WP,
   estableciendo una única fuente de verdad: cambiar un color en theme.json
   lo propaga automáticamente a Allage, Gutenberg y Elementor Global Colors.

   El segundo parámetro de var() es el fallback hexadecimal original.
   Garantiza que si ltn-theme no está activo (p.ej. en staging con otro tema),
   el sistema sigue funcionando exactamente igual que antes.

   NUNCA eliminar los fallbacks hex.
   NUNCA modificar este bloque sin actualizar ltn-theme/theme.json en paralelo.
   ─────────────────────────────────────────────────────────────────────────── */

:root {
    /* Paleta corporativa */
    --ltn-green-primary: var(--wp--preset--color--ltn-green-primary, #506727);
    --ltn-green-dark:    var(--wp--preset--color--ltn-green-dark,    #3e5120);
    --ltn-green-light:   var(--wp--preset--color--ltn-green-light,   #BACD70);
    --ltn-green-accent:  var(--wp--preset--color--ltn-green-accent,  #9ACD32);
    --ltn-green-bg:      var(--wp--preset--color--ltn-green-bg,      #F7F9ED);
    --ltn-terra:         var(--wp--preset--color--ltn-terra,         #D57B4E);

    /* Semánticos */
    --ltn-success:       var(--wp--preset--color--ltn-success,       #10B981);
    --ltn-warning:       var(--wp--preset--color--ltn-warning,       #F59E0B);
    --ltn-error:         var(--wp--preset--color--ltn-error,         #EF4444);
    --ltn-info:          var(--wp--preset--color--ltn-info,          #3B82F6);

    /* Blanco y escala de grises */
    --ltn-white:         var(--wp--preset--color--ltn-white,         #FFFFFF);
    --ltn-gray-50:       var(--wp--preset--color--ltn-gray-50,       #F9FAFB);
    --ltn-gray-100:      var(--wp--preset--color--ltn-gray-100,      #F8FAFC);
    --ltn-gray-200:      var(--wp--preset--color--ltn-gray-200,      #E2E8F0);
    --ltn-gray-300:      var(--wp--preset--color--ltn-gray-300,      #CBD5E0);
    --ltn-gray-400:      var(--wp--preset--color--ltn-gray-400,      #A0AEC0);
    --ltn-gray-500:      var(--wp--preset--color--ltn-gray-500,      #718096);
    --ltn-gray-600:      var(--wp--preset--color--ltn-gray-600,      #4A5568);
    --ltn-gray-700:      var(--wp--preset--color--ltn-gray-700,      #334155);
    --ltn-gray-800:      var(--wp--preset--color--ltn-gray-800,      #1E293B);
    --ltn-gray-900:      var(--wp--preset--color--ltn-gray-900,      #0F172A);
}

/* Nota: La escala de grises, espaciados, bordes, sombras y tipografía
   no tienen equivalente directo en theme.json (son valores fijos del sistema).
   Se mantienen como están en el bloque :root principal de este archivo. */