@font-face {
    font-family: "Open Sans";
    src: url("../fonts/open-sans.ttf") format("truetype");
    font-style: normal;
    font-weight: 300 800;
    font-display: swap;
}

@font-face {
    font-family: "Inter";
    src: url("../fonts/inter.ttf") format("truetype");
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
}

@font-face {
    font-family: "Roboto";
    src: url("../fonts/roboto.ttf") format("truetype");
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
}

:root {
    --fuente-sistema: "Open Sans", sans-serif;
}

:root[data-system-font="Inter, Sans Serif"] {
    --fuente-sistema: "Inter", sans-serif;
}

:root[data-system-font="Roboto, Sans Serif"] {
    --fuente-sistema: "Roboto", sans-serif;
}

:root[data-system-font="Segoe UI, Sans Serif"] {
    --fuente-sistema: "Segoe UI", sans-serif;
}

:root[data-system-font="Sans Serif"] {
    --fuente-sistema: sans-serif;
}

body,
body input,
body select,
body textarea,
body button,
body .btn,
body .form-control,
body table,
body h1,
body h2,
body h3,
body h4,
body h5,
body h6,
body .main-header,
body .main-sidebar,
body .content-wrapper,
body .dropdown-menu,
body .ui-widget,
body .select2-container,
body .swal2-popup,
body .jconfirm,
body .daterangepicker,
body .tooltip,
body .popover,
body .loading {
    font-family: var(--fuente-sistema);
}