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

@font-face {
    font-family: 'Lato';
    src: url('../Fonts/Lato-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Lato';
    src: url('../Fonts/Lato-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Lato';
    src: url('../Fonts/Lato-Black.ttf') format('truetype');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

:root {


    /* Logos institucionales */

    --logo-vertical: url('../img/logos/Logo Vertical.svg');
    --logo-vertical-blanco: url('../img/logos/Logo Vertical Blanco.svg');
    --logo-dashboard: url('../img/logos/logo Horizontal.svg');
    --logo-horizontal-blanco: url('../img/logos/logo blanco horizontal.png');
    --logo-navbar: url('../img/logos/logo Horizontal.svg');
    --logo-favicon: url('../img/logos/Logo 1.svg');
--logo-solo: url('../img/logos/Logo 2.svg');
    




    /*==================================================
        COLORES CORPORATIVOS COOPNASEJU
    ==================================================*/

    --color-primary: #4AB331;
    --color-secondary: #FFD600;
    --color-tertiary: #0752BA;
    --color-quaternary: #88D641;
    --color-texto-blanco: #ffffff;

    /* Variantes */

--glass-light:rgba(255,255,255,.08);

--glass-medium:rgba(255,255,255,.15);

--glass-focus:rgba(255,255,255,.25);

--text-placeholder:#e5e5e5;








    --primary-dark: #3D9728;
    --primary-light: #6AC84F;

    --secondary-dark: #E5C100;
    --secondary-light: #FFE34D;

    --tertiary-dark: #05449B;
    --tertiary-light: #2F73CB;

    --quaternary-dark: #74C030;
    --quaternary-light: #A4E468;

    /* Superficies y transparencias derivadas de la identidad corporativa */

    --primary-surface: #EEF8EB;
    --primary-surface-soft: #F3FAEF;
    --primary-surface-muted: #EAF3E8;
    --primary-border: #A9D99D;
    --primary-shadow: rgba(74, 179, 49, .20);
    --primary-focus: rgba(74, 179, 49, .28);
    --white-90: rgba(255, 255, 255, .90);
    --white-95: rgba(255, 255, 255, .95);

    /* Colores semánticos compartidos por todos los módulos */

    --surface-page: #F8F9FA;
    --surface-card: #FFFFFF;
    --surface-muted: #F1F3F5;
    --text-primary: #212529;
    --text-secondary: #495057;
    --text-muted: #6C757D;
    --border-light: #E9ECEF;
    --border-default: #DEE2E6;
    --danger-dark: #B42318;
    --danger-surface: #FFF3F2;
    --danger-border: #F4C7C3;

    /* Escala de grises */

    --white: #FFFFFF;
    --black: #000000;

    --gray-50: #F8F9FA;
    --gray-100: #F1F3F5;
    --gray-200: #E9ECEF;
    --gray-300: #DEE2E6;
    --gray-400: #CED4DA;
    --gray-500: #ADB5BD;
    --gray-600: #6C757D;
    --gray-700: #495057;
    --gray-800: #343A40;
    --gray-900: #212529;

    /* Estados */

    --success: #198754;
    --warning: #FFC107;
    --danger: #DC3545;
    --info: #0DCAF0;

    /* Tipografía */

    --font-family: 'Lato', sans-serif;

    /* Pesos */

    --font-regular: 400;
    --font-bold: 700;
    --font-black: 900;

    /* Bordes */

    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 18px;
    --radius-xl: 25px;

    /* Sombras */

    --shadow-sm: 0 2px 6px rgba(0,0,0,.08);
    --shadow-md: 0 5px 15px rgba(0,0,0,.12);
    --shadow-lg: 0 10px 30px rgba(0,0,0,.18);

    /* Transición */

    --transition: all .30s ease;

}

/*==================================================
    ESTILOS GLOBALES
==================================================*/

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{
    font-family: var(--font-family);
    font-weight: var(--font-regular);
    background: var(--gray-50);
    color: var(--gray-900);
}

h1,h2,h3,h4,h5,h6{
    font-weight: var(--font-black);
}

strong,b{
    font-weight: var(--font-bold);
}


/*==================================
    SCROLLBAR  barra de navegación
==================================*/

/* Chrome, Edge y Opera */

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-track{

    background:rgba(255,255,255,.08);

    border-radius:20px;

}

::-webkit-scrollbar-thumb{

    background:var(--color-secondary);

    border-radius:20px;

    border:2px solid transparent;

    background-clip:content-box;

}

::-webkit-scrollbar-thumb:hover{

    background:var(--secondary-dark);

    background-clip:content-box;

}

/* Firefox */

*{

    scrollbar-width:thin;

    scrollbar-color:var(--color-secondary) rgba(255,255,255,.08);

}