/* ========================================
   VARIABLES.CSS
   ======================================== */
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');

:root {
    /* ------------------------------------
       COLOR PRINCIPAL (AZUL)
       ------------------------------------ */
    --azul-industrial: #00063d;
    --azul-industrial-oscuro: #000330;
    --azul-industrial-claro: rgba(0, 6, 61, 0.25);
    --azul-hover: #0a1255;

    /* ------------------------------------
       FONDOS
       ------------------------------------ */
    --fondo-general: #1E1E1E;
    --fondo-elevado: #2D2D2D;
    --fondo-mas-elevado: #3A3A3A;
    --fondo-header: #00063d;
    --fondo-input: #3A3A3A;
    --fondo-badge: #4A4A4A;
    --fondo-negro: black;

    /* ------------------------------------
       BARRA DE CATEGORÍAS
       ------------------------------------ */
    --fondo-categorias: linear-gradient(135deg, #4A4A4A 0%, #5A5A5A 15%, #6C6C6C 35%, #6C6C6C 50%, #6C6C6C 65%, #5A5A5A 85%, #4A4A4A 100%);
    --texto-categorias: #F5F5F5;
    --texto-categorias-hover: #E0E0E0;
    --fondo-categorias-hover: rgba(255, 255, 255, 0.15);
    --borde-categorias: #3A3A3A;

    /* ------------------------------------
       FOOTER - NUEVAS VARIABLES
       ------------------------------------ */
    --footer-fondo-superior: #2D2D2D;
    --footer-fondo-inferior: #000000;
    --footer-texto-superior: #F5F5F5;
    --footer-texto-inferior: #000000;

    /* ------------------------------------
       TEXTOS
       ------------------------------------ */
    --texto-principal: #F5F5F5;
    --texto-secundario: #CCCCCC;
    --texto-blanco: #F5F5F5;
    --texto-azul: var(--azul-industrial);
    --texto-azul-oscuro: var(--azul-industrial-oscuro);

    /* ------------------------------------
       BORDES Y DIVISIONES
       ------------------------------------ */
    --borde-gris: #4A4A4A;
    --borde-gris-claro: #3A3A3A;
    --borde-azul: var(--azul-industrial);
    --borde-azul-claro: rgba(0, 6, 61, 0.4);

    /* ------------------------------------
       SOMBRAS
       ------------------------------------ */
    --sombra-suave: 0 2px 10px rgba(0, 0, 0, 0.3);
    --sombra-media: 0 5px 15px rgba(0, 0, 0, 0.4);
    --sombra-fuerte: 0 10px 30px rgba(0, 0, 0, 0.5);
    --sombra-azul: 0 10px 25px rgba(0, 6, 61, 0.5);
    --sombra-gris: 0 4px 15px rgba(0, 0, 0, 0.4);

    /* ------------------------------------
       COLORES DE ACENTO INDUSTRIAL
       ------------------------------------ */
    --acero: #7A7A7A;
    --carbono: #3A3A3A;
    --gris-humo: #4A4A4A;

    /* ------------------------------------
       TIPOGRAFÍA
       ------------------------------------ */
    --fuente-principal: 'Open Sans', sans-serif;

    /* ------------------------------------
       TAMAÑOS DE FUENTE
       ------------------------------------ */
    --texto-xs: 0.75rem;
    --texto-sm: 0.875rem;
    --texto-base: 1rem;
    --texto-lg: 1.125rem;
    --texto-xl: 1.25rem;
    --texto-2xl: 1.5rem;
    --texto-3xl: 1.875rem;
    --texto-4xl: 2.25rem;
    --texto-5xl: 3rem;

    /* ------------------------------------
       ESPACIADO
       ------------------------------------ */
    --espaciado-xs: 0.25rem;
    --espaciado-sm: 0.5rem;
    --espaciado-md: 1rem;
    --espaciado-lg: 1.5rem;
    --espaciado-xl: 2rem;
    --espaciado-2xl: 2.5rem;
    --espaciado-3xl: 3rem;

    /* ------------------------------------
       BORDES Y RADIOS
       ------------------------------------ */
    --radio-xs: 4px;
    --radio-sm: 6px;
    --radio-md: 8px;
    --radio-lg: 12px;
    --radio-xl: 16px;
    --radio-2xl: 20px;
    --radio-3xl: 25px;
    --radio-circular: 50%;
    --radio-pill: 9999px;

    /* ------------------------------------
       ALTURAS
       ------------------------------------ */
    --altura-header: 110px;
    --altura-header-mobile: 100px;
    --altura-header-mobile-sm: 90px;
    --altura-logo: 100px;
    --altura-logo-mobile: 70px;
    --altura-imagen-producto: 250px;
    --altura-imagen-producto-mobile: 200px;

    /* ------------------------------------
       ANCHOS
       ------------------------------------ */
    --ancho-maximo-contenedor: 1335px;
    --ancho-sidebar: 265px;
    --ancho-sidebar-1366: 220px;
    --ancho-miniatura: 100px;
    --ancho-miniatura-mobile: 70px;

    /* ------------------------------------
       TRANSICIONES
       ------------------------------------ */
    --transicion-rapida: all 0.2s ease;
    --transicion-base: all 0.3s ease;
    --transicion-lenta: all 0.4s ease;

    /* ------------------------------------
       Z-INDEX
       ------------------------------------ */
    --z-index-header: 1000;
    --z-index-header-top: 1001;
    --z-index-dropdown: 1000;
    --z-index-modal: 1050;
    --z-index-popover: 1060;
    --z-index-tooltip: 1070;
    --z-index-toast: 1080;
    --z-index-offcanvas: 1090;

    /* ------------------------------------
       BREAKPOINTS
       ------------------------------------ */
    --breakpoint-xs: 0;
    --breakpoint-sm: 576px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 992px;
    --breakpoint-xl: 1200px;
    --breakpoint-xxl: 1400px;

    /* ------------------------------------
       COLORES ESPECÍFICOS
       ------------------------------------ */
    --detalle-fondo-imagen: var(--fondo-elevado);
    --detalle-borde-miniatura: var(--azul-industrial);
    --detalle-fondo-miniatura-activa: var(--azul-industrial-claro);
    --detalle-texto-titulo: var(--texto-principal);
    --detalle-texto-caracteristicas: var(--azul-industrial);
    --detalle-texto-descripcion: var(--texto-secundario);
    --detalle-borde-caracteristicas: var(--borde-azul-claro);
    --detalle-fondo-badge: var(--fondo-badge);
    --detalle-texto-badge: var(--texto-blanco);

    --contacto-fondo-formulario: var(--fondo-negro);
    --contacto-borde-input: var(--borde-gris);
    --contacto-borde-input-focus: gray;
    --contacto-texto-label: var(--texto-principal);
    --contacto-boton-enviar: var(--azul-industrial);
    --contacto-boton-enviar-hover: var(--azul-industrial-oscuro);

    --categoria-titulo-color: var(--azul-industrial);
    --categoria-badge-fondo: var(--fondo-badge);
    --categoria-badge-texto: var(--texto-blanco);
    --categoria-fondo-tarjeta: var(--fondo-elevado);
    --categoria-borde-tarjeta: var(--borde-gris);

    --whatsapp-color: #25D366;
    --whatsapp-color-hover: #20b856;
    --whatsapp-color-active: #128C7E;
    --facebook-color: #1877f2;

    --alerta-exito: linear-gradient(135deg, #2e7d32 0%, #1b5e20 100%);
    --alerta-error: linear-gradient(135deg, #b71c1c 0%, #8b0000 100%);

    --boton-primary: var(--azul-industrial);
    --boton-primary-hover: var(--azul-industrial-oscuro);
    --boton-primary-active: #000228;
    --boton-secondary: var(--gris-humo);
    --boton-pdf: var(--carbono);
    --boton-pdf-hover: var(--gris-humo);
}