/* ============================================================
   Quicksand en TODO el sistema.
   Se aplica con !important para ganarle al tema inspinia (Open Sans / Roboto)
   y a los botones. Los íconos (FontAwesome / Glyphicons) se re-afirman abajo
   con su propia fuente, si no se rompen los glifos.
   Cargar este archivo DESPUÉS del resto de los CSS.
   ============================================================ */

body,
h1, h2, h3, h4, h5, h6,
p, a, span, div, td, th, tr, li, ul, ol, dl, dt, dd,
input, select, textarea, button, label, small, strong, b, em, i,
.btn, .form-control, .navbar, .nav, .dropdown-menu, .modal, .panel,
.table, .breadcrumb, .pagination, .alert, .badge, .label, .tooltip, .popover {
    font-family: 'Quicksand', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif !important;
}

/* Íconos: mantienen su tipografía propia (más específicos + !important, así
   le ganan a las reglas de arriba y no se rompen). */
.glyphicon {
    font-family: 'Glyphicons Halflings' !important;
}
.fa {
    font-family: FontAwesome !important;
}

/* ============================================================
   Personalizaciones pedidas: color del header del sidebar (#2f4050)
   ============================================================ */

/* Título del top (breadcrumb): Gotham Bold (Montserrat de fallback si no está
   Gotham instalada) + color del encabezado del sidebar. */
#top-search {
    font-family: 'Gotham', 'Montserrat', 'Quicksand', sans-serif !important;
    font-weight: 700 !important;
    color: #2f4050 !important;
}

/* Nombres de módulos del sidebar: "Primera en mayús, resto en minús" (sentence
   case) + color del encabezado del sidebar. */
#side-menu .nav-label b {
    display: inline-block;
    text-transform: lowercase !important;
    color: #2f4050 !important;
    font-weight: 400 !important;
}

/* Cualquier botón armado con flexbox centra su contenido (justify-content se
   ignora en los que no son flex, así que no molesta al resto). */
.btn, .btn-atras {
    justify-content: center;
}

/* Sidebar con fondo BLANCO (antes mostraba el gris #EEEEEE del body). */
.navbar-static-side {
    background-color: #ffffff !important;
}

/* ---- Layout fijo: sidebar + barra superior quedan quietos, scrollea solo el
   contenido. Usa el modo fixed-sidebar de inspinia; igualo el ancho al margin
   del #page-wrapper (280px) para que no queden huecos ni solapes. ---- */
body.fixed-sidebar .navbar-static-side {
    width: 280px !important;
    overflow-y: auto;
    overflow-x: hidden;
}
@media (min-width: 768px) {
    body.fixed-sidebar #page-wrapper {
        margin-left: 280px !important;
    }
    /* Barra superior fija arriba mientras se scrollea el contenido. */
    #page-wrapper > .navbar-static-top {
        position: sticky;
        top: 0;
        z-index: 1500;
    }
}

/* Select de "Negocio" (select2) a la altura estándar del sistema (34px),
   así deja de verse más chico que el resto. Cubre select2 v4 y v3. */
#wrap_select_negocio .select2-selection--single {
    height: 34px !important;
}
#wrap_select_negocio .select2-selection--single .select2-selection__rendered {
    line-height: 34px !important;
}
#wrap_select_negocio .select2-selection--single .select2-selection__arrow {
    height: 32px !important;
}
#wrap_select_negocio .select2-choice {
    height: 34px !important;
    line-height: 34px !important;
}
#side-menu .nav-label b::first-letter {
    text-transform: uppercase !important;
}
/* Hover / foco / clic / ítem activo del sidebar: fondo beige claro (#EFEFEB),
   texto e ícono navy (que se lean), y SIN el outline azul de foco. El foco está
   en el <a>, no en el <li>, por eso se apunta a a:focus (antes usaba li:focus y
   no aplicaba, ganaba el fondo oscuro del tema y tapaba el texto). */
#side-menu li > a:hover,
#side-menu li > a:focus,
#side-menu li > a:active,
#side-menu li.active > a {
    background-color: #EFEFEB !important;
    color: #2f4050 !important;
    outline: none !important;
    box-shadow: none !important;
}
#side-menu li > a:hover .nav-label b,
#side-menu li > a:focus .nav-label b,
#side-menu li > a:active .nav-label b,
#side-menu li.active > a .nav-label b,
#side-menu li > a:hover .fa,
#side-menu li > a:focus .fa,
#side-menu li > a:active .fa,
#side-menu li.active > a .fa {
    color: #2f4050 !important;
}
/* El ítem activo (página actual) se distingue con un acento marrón a la izquierda. */
#side-menu li.active > a {
    border-left: 3px solid #451A0A !important;
}