/* ==========================================================================
   CONFIGURACIÓN DE VARIABLES (DESIGN SYSTEM)
   ========================================================================== */
:root {
    --weu-color-primary: #EA1E1C;
    --weu-color-black: #000000;
    --weu-color-dark: #1D1D1D;
    --weu-color-neutral: #BFB0A1;
    --weu-color-grey: #f1f1f1;
    --weu-color-grey-light: #fafafa;
    --weu-checkout-sidebar-bg: #f8f9fa;
    --weu-checkout-sidebar-top: 145px;
    --weu-checkout-sidebar-max-height: calc(100vh - 157px);
    --weu-color-grey-hover: #e8e8e8;
    --weu-color-grey-dark: #1D1D1D;
    --weu-white: #FFFFFF;
    --weu-color-border: rgba(0, 0, 0, 0.05);
    --weu-color-form-control-border: #ced4da;
    --weu-color-success: #5BCD76;
    --weu-color-warning: #FFA500;
    --weu-color-yellow: #F3A41D;
    --weu-color-yellow-dark: #E09212;
    --weu-color-yellow-text: #5D3A1A;
    --weu-color-yellow-soft: rgba(243, 164, 29, 0.58);
    --weu-color-yellow-soft-mid: rgba(243, 164, 29, 0.34);
    --weu-color-yellow-soft-end: rgba(224, 146, 18, 0.12);
    --weu-color-danger: #FF0000;
    --weu-color-primary-soft: rgba(234, 30, 28, 0.1);
    --weu-color-primary-soft-hover: rgba(234, 30, 28, 0.14);

    --weu-border-color: rgb(209 213 219);

    --weu-width-container: calc(1920px - 128px);

    --font-size-base: 15px;
    --weu-font-size-base: var(--font-size-base);
    --bs-body-font-size: var(--font-size-base);
    --bs-font-size-base: var(--font-size-base);
    --font-size-xs: 8px;
    --font-size-sm: 12px;
    --font-size-secondary: 14px;
    --font-size-md: 20px;
    --font-size-lg: 24px;
    --font-size-xl: 32px;
    --font-size-xxl: 40px;

    --weu-shadow-offcanva: rgba(50, 50, 93, .25) 0 50px 100px -20px, rgba(0, 0, 0, .3) 0 30px 60px -30px;

    --weu-spacing-xs: 8px;
    --weu-spacing-sm: 16px;
    --weu-spacing-md: 32px;
    --weu-spacing-lg: 64px;

    --weu-radius-default: 8px;
    --weu-radius-tag: 16px;

    --weu-transition: transform 0.6s cubic-bezier(.16,1,.3,1),opacity 0.3s, visibility 0.3s!important;

    --weu-accent-color: #EA1E1C;

    --weu-focus-border-color: var(--weu-color-primary);
    --weu-focus-ring-shadow: 0 0 0 3px rgba(234, 30, 28, 0.12);

    --weu-tooltip-bg: var(--weu-color-dark);
    --weu-tooltip-color: var(--weu-white);
    --weu-tooltip-shadow: 0 6px 16px rgba(0, 0, 0, 0.16);
    --weu-tooltip-radius: 6px;
    --weu-tooltip-arrow-size: 8px;
    --weu-tooltip-font-weight: 400;
}

html {
    font-size: var(--font-size-base);
}

body {
    font-size: var(--font-size-base);
}

.offcanvas, .offcanvas-lg, .offcanvas-md, .offcanvas-sm, .offcanvas-xl, .offcanvas-xs, .offcanvas-xxl {
    --bs-offcanvas-zindex: 1045;
    --bs-offcanvas-width: 400px;
    --bs-offcanvas-height: 30vh;
    --bs-offcanvas-padding-x: 1rem;
    --bs-offcanvas-padding-y: 1rem;
    --bs-offcanvas-color: var(--bs-body-color);
    --bs-offcanvas-bg: var(--bs-body-bg);
    --bs-offcanvas-border-width: var(--bs-border-width);
    --bs-offcanvas-border-color: var(--bs-border-color-translucent);
    --bs-offcanvas-box-shadow: var(--bs-box-shadow-sm);
    --bs-offcanvas-transition: transform 0.2s ease-in-out;
    --bs-offcanvas-title-line-height: 1.5;
}

@keyframes wave-effect {
    0% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
    }

    100% {
        transform: translate(-50%, -50%) scale(2);
        opacity: 0;
    }
}