@import url('bootstrap-icons/bootstrap-icons.min.css');

:root {
    /* COLOR */
    /* Primary */
    --color-primary-50: #e5effd;
    --color-primary-100: #C4DCFA;
    --color-primary-200: #7FBBF6;
    --color-primary-300: #3D9CE2;
    --color-primary-400: #2E7AB1;
    --color-primary-500: #1F5983;
    --color-primary-600: #123A57;
    --color-primary-700: #061E30; /* Color base */
    --color-primary-800: #041726;
    --color-primary-900: #020C17;
    /* Color Secondary */
    --color-secondary-100: #E5E6FF;
    --color-secondary-200: #CED1FF;
    --color-secondary-300: #B4B9FE;
    --color-secondary-400: #99A1FE;
    --color-secondary-500: #7D88FE;
    --color-secondary-600: #6373FD;
    --color-secondary-700: #4059FD; /* Color base */
    --color-secondary-800: #0633CA;
    --color-secondary-900: #021873;
    /* Color Error */
    --color-error-100: #fceceb;
    --color-error-200: #fcdbdb;
    --color-error-300: #fcd6d6;
    --color-error-400: #e7000b;
    /* Color Success */
    --color-success-100: #E9FFF4;
    --color-success-200: #C9F7DB;
    --color-success-300: #9FECC0;
    --color-success-400: #2CA56D;
    /* Color Warning */
    --color-warning-100: #fcf8e6;
    --color-warning-200: #fcf1c3;
    --color-warning-300: #fcf0c0;
    --color-warning-400: #e17100;
    /* Color Neutral */
    --color-gray-100: #F5F6F8;
    --color-gray-200: #ECEEF0;
    --color-gray-300: #E2E6E9;
    --color-gray-400: #D9DDE2;
    --color-gray-500: #CED4DA; /* Detail color */
    --color-gray-600: #9CA7B2;
    --color-gray-700: #727B83;
    --color-gray-800: #4B5156;
    --color-gray-900: #272A2E;
    /* Text Color */
    --color-text-primary: #202124;
    --color-text-secondary: #444746;
    --color-text-tertiary: #5F6368;
    /* Background Color */
    --color-background: #F8F9FA;
    /* ---------------------------------------- */
    /* FONT SIZE */
    --font-size-h1: 1rem;
    --font-size-h2: 0.875rem;
    --font-size-h3: 0.875rem;
    --font-size-body-1: 0.875rem;
    --font-size-body-2: 0.75rem;
    --font-size-button: 0.875rem;
    --font-size-label: 0.75rem;
    --font-size-caption: 0.875rem;
    /* --- */
    /* FONT WEIGHT */
    --font-weight-h1: 600 !important;
    --font-weight-h2: 600 !important;
    --font-weight-h3: 600 !important;
    --font-weight-caption: 600 !important;
    /* ---------------------------------------- */
    /* SPACING */
    --spacing-1: 0.25rem;
    --spacing-2: 0.5rem;
    --spacing-3: 0.75rem;
    --spacing-4: 1rem;
    --spacing-5: 1.5rem;
    --spacing-6: 2rem;
    --spacing-7: 2.75rem;
    --spacing-8: 3rem;
    --spacing-9: 3.5rem;
    --spacing-10: 4rem;
    --spacing-11: 4.5rem;
    --spacing-12: 5rem;
    /* ---------------------------------------- */
    /* BORDER-RADIUS */
    --border-radius-1: 0.25rem;
    --border-radius-2: 0.5rem;
    --border-radius-3: 0.75rem;
    --border-radius-4: 1rem;
    /* ---------------------------------------- */
}

@font-face {
    font-family: 'Poppins';
    src: url(../fonts/Poppins/Poppins-Regular.ttf);
}

html, body {
    font-family: 'Poppins', sans-serif;
    background-color: var(--color-background) !important;
    font-size: 16px;
    color: var(--color-text-primary);
}

/* Typography system */
h1 {
    font-size: var(--font-size-h1) !important;
    color: var(--color-text-primary) !important;
    font-weight: var(--font-weight-h1) !important;
    margin: 0 !important;
}

h2 {
    font-size: var(--font-size-h2) !important;
    color: var(--color-text-primary) !important;
    font-weight: var(--font-weight-h2) !important;
    margin: 0 !important;
}

h3 {
    font-size: var(--font-size-h3) !important;
    color: var(--color-text-primary) !important;
    font-weight: var(--font-weight-h3) !important;
    margin: 0 !important;
}

.body-1 {
    font-size: var(--font-size-body-1) !important;
    color: var(--color-text-primary) !important;
    margin: 0 !important;
}

.body-2 {
    font-size: var(--font-size-body-1) !important;
    color: var(--color-text-tertiary) !important;
    margin: 0 !important;
}

label {
    font-size: var(--font-size-label) !important;
    margin: 0 !important;
}

ol.breadcrumb {
    font-size: var(--font-size-h1) !important;
    color: var(--color-text-primary) !important;
    font-weight: var(--font-weight-h1) !important;
    margin: 0 !important;
}

    ol.breadcrumb a {
        font-size: var(--font-size-h1) !important;
        color: var(--color-text-primary) !important;
        font-weight: var(--font-weight-h1) !important;
        margin: 0 !important;
        text-decoration: none !important;
    }

    ol.breadcrumb li.active {
        color: var(--color-text-tertiary) !important;
    }


/* Estilos sueltos */
ul li.dxbl-list-box-item-selected {
    background-color: var(--color-gray-500) !important;
    color: #000 !important;
}

/* Icono del DataAnnotationsValidator */
.dxbl-edit-validation-status svg {
    display: none !important;
}

/* Flechita Dropdown input */
button.dxbl-btn.dxbl-btn-outline-secondary.dxbl-edit-btn-dropdown {
    display: block !important;
}