/**
 * ============================================
 * SISTEMA DE COLORES - MESA DE PROVEEDORES
 * ============================================
 * 
 * Este archivo centraliza todos los colores utilizados en la aplicación
 * basado en el sistema de diseño oficial.
 * Utiliza variables CSS (custom properties) para facilitar el mantenimiento
 * y permitir cambios globales desde un solo lugar.
 * 
 * Los colores configurables desde Django pueden sobrescribir estos valores
 * mediante estilos inline en los templates.
 */

 :root {
    /* ============================================
       COLORES PRIMARIOS (PRIMARY)
       Escala de verdes para elementos principales
       ============================================
    */
    
    /* Primary 900 - Verde muy oscuro
       Uso: Texto sobre fondos claros
       RGB: rgb(7, 120, 52) */
    --primary-900: #077834;
    
    /* Primary 700 - Verde oscuro
       Uso: Botones principales
       RGB: rgb(14, 164, 67) */
    --primary-700: #0EA443;
    
    /* Primary 500 - Verde medio
       Uso: Estados hover
       RGB: rgb(16, 185, 78) */
    --primary-500: #10B94E;
    
    /* Primary 300 - Verde claro
       Uso: Acentos sutiles
       RGB: rgb(93, 212, 134) */
    --primary-300: #5DD486;
    
    /* Primary 100 - Verde muy claro
       Uso: Fondos suaves
       RGB: rgb(212, 244, 224) */
    --primary-100: #D4F4E0;
    
    
    /* ============================================
       COLORES NEUTRALES
       Escala de grises desde negro hasta blanco
       para texto, fondos y bordes
       ============================================
    */
    
    /* Black - Negro puro
       Uso: Texto principal
       RGB: rgb(0, 0, 0) */
    --neutral-black: #000000;
    
    /* Gray 900 - Gris muy oscuro
       Uso: Títulos
       RGB: rgb(26, 26, 26) */
    --neutral-gray-900: #1A1A1A;
    
    /* Gray 700 - Gris oscuro
       Uso: Texto secundario
       RGB: rgb(58, 58, 58) */
    --neutral-gray-700: #3A3A3A;
    
    /* Gray 500 - Gris medio
       Uso: Texto deshabilitado
       RGB: rgb(115, 115, 115) */
    --neutral-gray-500: #737373;
    
    /* Gray 300 - Gris claro
       Uso: Bordes
       RGB: rgb(204, 204, 204) */
    --neutral-gray-300: #CCCCCC;
    
    /* Gray 100 - Gris muy claro
       Uso: Fondos
       RGB: rgb(245, 245, 245) */
    --neutral-gray-100: #F5F5F5;
    
    /* White - Blanco puro
       Uso: Fondo base
       RGB: rgb(255, 255, 255) */
    --neutral-white: #FFFFFF;
    
    
    /* ============================================
       COLORES PARA ESTADOS Y MENSAJES DEL SISTEMA
       ============================================
    */
    
    /* Success - Verde
       Uso: Confirmaciones
       RGB: rgb(14, 164, 67) */
    --state-success: #0EA443;
    
    /* Success Light - Verde muy claro
       Uso: Fondos success
       RGB: rgb(212, 244, 224) */
    --state-success-light: #D4F4E0;
    
    /* Warning - Naranja
       Uso: Advertencias
       RGB: rgb(245, 158, 11) */
    --state-warning: #F59E0B;
    
    /* Warning Light - Amarillo claro
       Uso: Fondos warning
       RGB: rgb(254, 243, 199) */
    --state-warning-light: #FEF3C7;
    
    /* Error - Rojo
       Uso: Errores
       RGB: rgb(220, 38, 38) */
    --state-error: #DC2626;
    
    /* Error Light - Rosa muy claro
       Uso: Fondos error
       RGB: rgb(254, 226, 226) */
    --state-error-light: #FEE2E2;
    
    /* Info - Azul
       Uso: Información
       RGB: rgb(59, 130, 246) */
    --state-info: #3B82F6;
    
    /* Info Light - Azul muy claro
       Uso: Fondos info
       RGB: rgb(219, 234, 254) */
    --state-info-light: #DBEAFE;
    
    /* Extra - Púrpura
       Uso: Acciones secundarias
       RGB: rgb(147, 51, 234) */
    --state-extra: #9333EA;
    
    /* Extra Light - Púrpura muy claro
       Uso: Fondos secondary
       RGB: rgb(243, 232, 255) */
    --state-extra-light: #F3E8FF;
    
    
    /* ============================================
       COLORES DE ACENTO
       Variaciones adicionales para CTAs y elementos destacados
       ============================================
    */
    
    /* Accent Dark - Verde muy oscuro
       Uso: Hover estados oscuros
       RGB: rgb(6, 90, 40) */
    --accent-dark: #065A28;
    
    /* Accent Medium - Verde medio
       Uso: CTAs principales
       RGB: rgb(14, 164, 67) */
    --accent-medium: #0EA443;
    
    /* Accent Light - Verde claro brillante
       Uso: Destacados
       RGB: rgb(127, 229, 163) */
    --accent-light: #7FE5A3;
    
    /* Accent Soft - Verde muy claro suave
       Uso: Backgrounds sutiles
       RGB: rgb(232, 248, 238) */
    --accent-soft: #E8F8EE;
    
    
    /* ============================================
       ALIAS Y COMPATIBILIDAD
       Variables de compatibilidad con el sistema actual
       y mapeo a clases existentes
       ============================================
    */
    
    /* Color primario del sistema (mapeado desde Django)
       Por defecto usa Primary 700 para compatibilidad
       Puede ser sobrescrito por configuracion_actual.color_primario */
    --color-primario: var(--primary-700);
    
    /* Color secundario 1 (mapeado desde Django)
       Por defecto usa Gray 100 para fondos
       Puede ser sobrescrito por configuracion_actual.color_secundario_1 */
    --color-secundario-1: var(--neutral-gray-100);
    
    /* Color de títulos (mapeado desde Django)
       Por defecto usa Gray 900
       Puede ser sobrescrito por configuracion_actual.color_titulos */
    --color-titulos: var(--neutral-gray-900);
    
    /* Texto primario - Usa Primary 700 */
    --color-texto-primario: var(--primary-700);
    
    /* Texto principal - Usa Black */
    --color-texto-principal: var(--neutral-black);
    
    /* Texto secundario - Usa Gray 700 */
    --color-texto-secundario: var(--neutral-gray-700);
    
    /* Texto deshabilitado - Usa Gray 500 */
    --color-texto-deshabilitado: var(--neutral-gray-500);
    
    /* Texto blanco - Usa White */
    --color-texto-blanco: var(--neutral-white);
    
    /* Fondo primario - Usa Primary 700 */
    --color-fondo-primario: var(--primary-700);
    
    /* Fondo secundario - Usa Gray 100 */
    --color-fondo-secundario: var(--neutral-gray-100);
    
    /* Fondo base - Usa White */
    --color-fondo-base: var(--neutral-white);
    
    /* Borde - Usa Gray 300 */
    --color-borde: var(--neutral-gray-300);
    
    /* Botones principales - Usa Primary 700 */
    --color-boton-primario: var(--primary-700);
    
    /* Botones hover - Usa Primary 500 */
    --color-boton-primario-hover: var(--primary-500);
    
    /* Botones secundarios - Usa Gray 700 */
    --color-boton-secundario: var(--neutral-gray-700);
    
    /* Error - Usa state-error */
    --color-error: var(--state-error);
    --color-error-fondo: var(--state-error-light);
    
    /* Éxito - Usa state-success */
    --color-exito: var(--state-success);
    --color-exito-fondo: var(--state-success-light);
    
    /* Advertencia - Usa state-warning */
    --color-advertencia: var(--state-warning);
    --color-advertencia-fondo: var(--state-warning-light);
    
    /* Info - Usa state-info */
    --color-info: var(--state-info);
    --color-info-fondo: var(--state-info-light);
}

/**
 * ============================================
 * CLASES UTILITARIAS (Opcional - para migración gradual)
 * ============================================
 * 
 * Estas clases pueden usarse para migrar gradualmente del sistema actual
 * a las variables CSS. Son opcionales y pueden eliminarse una vez que
 * todos los estilos usen directamente las variables.
 */

/* Clases de texto usando el sistema de colores */
.icons{
    color: var(--primary-900) !important;
}

.texto-primario {
    color: var(--color-texto-primario) !important;
}

.color-titulos {
    color: var(--color-titulos) !important;
}

.texto-principal {
    color: var(--color-texto-principal) !important;
}

.texto-secundario {
    color: var(--color-texto-secundario) !important;
}

.texto-deshabilitado {
    color: var(--color-texto-deshabilitado) !important;
}

.texto-blanco {
    color: var(--color-texto-blanco) !important;
}

/* Clases de fondo usando el sistema de colores */
.fondo-primario {
    background-color: var(--color-fondo-primario);
    color: var(--color-texto-blanco);
}

.fondo-secundario-1 {
    background-color: var(--color-fondo-secundario);
}

.fondo-base {
    background-color: var(--color-fondo-base);
}

/* Clases de botones usando el sistema de colores */
.btn-primario {
    background-color: var(--color-boton-primario) !important;
    border-color: var(--color-boton-primario) !important;
    color: var(--color-texto-blanco) !important;
}

.btn-primario:hover {
    background-color: var(--color-boton-primario-hover) !important;
    border-color: var(--color-boton-primario-hover) !important;
}

.btn-secundario {
    background-color: var(--color-boton-secundario) !important;
    border-color: var(--color-boton-secundario) !important;
    color: var(--color-texto-blanco) !important;
}

/* Bordes */
.tope-form-primario {
    border-top: 2px solid var(--color-primario);
}

.borde {
    border: 1px solid var(--color-borde);
}

/* Estados */
.texto-error {
    color: var(--color-error) !important;
}

.fondo-error {
    background-color: var(--color-error-fondo) !important;
}

.texto-exito {
    color: var(--color-exito) !important;
}

.fondo-exito {
    background-color: var(--color-exito-fondo) !important;
}

.texto-advertencia {
    color: var(--color-advertencia) !important;
}

.fondo-advertencia {
    background-color: var(--color-advertencia-fondo) !important;
}

.texto-info {
    color: var(--color-info) !important;
}

.fondo-info {
    background-color: var(--color-info-fondo) !important;
}

.btn-granulado {
    position: relative;
    background-color: var(--color-primary);
    color: white;
    border: none;
    padding: 12px 24px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    border-radius: 8px;
    overflow: hidden;
    transition: transform 0.2s ease;
  }
  
  /* Capa del granulado */
  .btn-granulado::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0.15; /* Ajusta la intensidad del grano aquí */
    pointer-events: none;
    
    /* Generamos el ruido usando un SVG de tipo fractalNoise */
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
    
    /* Aplicamos el color negro al grano */
    filter: contrast(150%) brightness(50%) invert(0);
  }
  
  .btn-granulado:hover {
    transform: scale(1.05);
    filter: brightness(1.1);
  }