/* main.css */

/* Base Styles
Importa los estilos de tipografía y las definiciones de variables globales.
Estos estilos fundamentales definen los colores, fuentes y otros valores básicos utilizados en todo el sitio. */
@import url('base/typography.css');
/* @import url('base/variables.css'); */

/* Component Styles
    Importa los estilos específicos de componentes como botones, tarjetas y formularios.
    Estos estilos definen la apariencia y el comportamiento de los elementos de UI comunes. */
@import url('components/bg-colors.css');
@import url('components/buttons.css');
@import url('components/cards.css');
@import url('components/forms.css');
@import url('components/modal.css');
@import url('components/others.css');
@import url('components/price.css');
@import url('components/spinner.css');
@import url('components/swal2.css');

/* Layout Styles
    Establece estilos para elementos estructurales mayores como cabecera, pie de página y menú de navegación.
    Estos estilos ayudan a mantener una consistencia estructural a través de diferentes vistas. */
@import url('layout/header.css');
@import url('layout/footer.css');
@import url('layout/login.css');
@import url('layout/menu.css');

/* Utility Classes
    Incluye clases de ayuda que proporcionan utilidades rápidas para margenes, padding, tipografía, y más.
    Estas clases están diseñadas para ser reutilizables y componibles a través de varios componentes y layouts. */
@import url('utilities/helpers.css');

/* Pages */
/* @import url('pages/app_theme.css'); */
@import url('pages/app_core_estadistica.css');
@import url('pages/app_documentacion.css');
@import url('pages/app_solicitud.css');
@import url('pages/app_users_management.css');

/* Estilos Globales */

html{
    -webkit-text-size-adjust: 100%;
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

body {
    font-family: "SF Pro Display" !important;
    font-size: 13px !important;
    line-height: normal !important;
    background-color: var(--general-background) !important;
    margin: 0;
}

a:hover {
    color: #0458eb;
    text-decoration: underline;
}

a[disabled="disabled"] {
    pointer-events: none;
}

::-webkit-scrollbar {
    width: 7px;
}
  
::-webkit-scrollbar-track {
    background-color: transparent;
}
  
::-webkit-scrollbar-thumb {
    background-color: #d6dee1;
    border-radius: 129px !important;
    border: -2px solid transparent;
    background-clip: content-box;
}
  
::-webkit-scrollbar-thumb:hover {
    background-color: #a8bbbf;
}

*,
*::before,
*::after {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}



/* Small devices (landscape phones, 426px and down) */
@media (max-width: 426px) { 
    .usuario {
        display: none;
    }
    .nav-externo-color a {
        font-size: 0.7rem !important;
    }
    .img_logo_completo {
        height: 15px !important;
    }
    .dash_campus {
        font-size: 15px;
    }
}

/* Medium devices (tablets, 768px and down) */
@media (max-width: 768px) { 
    .abs-center-img {
        height: 100px !important;
        margin-top: 0 !important;
        width: 100% !important;
    }
    .dashboard-content {
        padding: 15px 0px;
    }
}

/* Large devices (desktops, 992px and down) */
@media (max-width: 992px) { 
    nav img {
        height: 35px;
    }
    .dashboard-nav {
        display: none;
        position: fixed;
        top: 0;
        right: 0;
        left: 0;
        bottom: 0;
        z-index: 1070;
    }
    .dashboard-nav.mobile-show {
        display: block;
    }
    .dashboard-nav header .menu-toggle {
        display: flex;
        color: var(--navbar-superior-color);
    }
    .dashboard-nav header .menu-toggle:hover,
    .dashboard-nav header .menu-toggle:active,
    .dashboard-nav header .menu-toggle:focus {
        color: var(--navbar-superior-hover) !important;
    }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
    .dashboard-app {
        margin-left: 238px;
    }
    .dashboard-compact .dashboard-app {
        margin-left: 0;
    }
    .dashboard-toolbar {
        left: 238px;
    }
    .dashboard-compact .dashboard-toolbar {
        left: 0;
    }
}