/**
 * ========================================
 * ESTILOS RESPONSIVOS PARA DASHBOARD
 * ========================================
 * Soluciona el desbordamiento de números largos en móviles
 */

/* ========================================
   LOGO DEL HEADER - Responsividad
   ======================================== */

/* Asegurar que el logo se vea completo */
.main-header .logo {
    height: auto !important;
    min-height: 50px;
    display: flex;
    align-items: center;
}

.main-header .logo-lg {
    display: flex;
    align-items: center;
    height: 100%;
}

.main-header .logo-lg img {
    max-height: 40px;
    width: auto;
    padding: 5px 0 !important;
    margin: 0 auto;
}

.main-header .logo-mini img {
    max-height: 35px;
    width: auto;
    padding: 5px !important;
}

/* Ajustes para móvil */
@media (max-width: 767px) {
    .main-header .logo {
        min-height: 45px;
    }
    
    .main-header .logo-lg img {
        max-height: 35px;
        padding: 3px 0 !important;
    }
    
    .main-header .logo-mini img {
        max-height: 30px;
        padding: 3px !important;
    }
    
    /* Asegurar que el navbar no colapse el logo */
    .main-header .navbar {
        margin-left: 0;
    }
}

/* ========================================
   SIDEBAR - Responsividad de Menús
   ======================================== */

/* Ajustes generales del sidebar */
.sidebar-menu {
    padding: 0;
    margin: 0;
}

/* Menú principal del sidebar */
.sidebar-menu > li > a {
    padding: 12px 5px 12px 15px;
    display: block;
    font-size: 14px;
}

/* Submenús (treeview-menu) */
.sidebar-menu .treeview-menu {
    padding: 0;
    margin: 0;
    list-style: none;
    background: rgba(0, 0, 0, 0.1);
}

.sidebar-menu .treeview-menu > li {
    margin: 0;
}

.sidebar-menu .treeview-menu > li > a {
    padding: 8px 5px 8px 15px;
    display: block;
    font-size: 14px;
    color: #fff;
    white-space: normal;
    word-wrap: break-word;
}

.sidebar-menu .treeview-menu > li > a > .fa-circle-o,
.sidebar-menu .treeview-menu > li > a > .fa {
    width: 20px;
    margin-right: 8px;
    font-size: 12px;
    text-align: center;
}

.sidebar-menu .treeview-menu > li > a > span {
    display: inline-block;
    vertical-align: middle;
}

/* Ajustes específicos para móviles */
@media (max-width: 767px) {
    /* Sidebar en móvil */
    .sidebar-menu > li > a {
        padding: 10px 5px 10px 12px;
        font-size: 13px;
    }
    
    /* Submenús más compactos */
    .sidebar-menu .treeview-menu > li > a {
        padding: 6px 5px 6px 12px;
        font-size: 12px;
        line-height: 1.4;
    }
    
    /* Iconos más pequeños */
    .sidebar-menu > li > a > .fa,
    .sidebar-menu > li > a > .glyphicon,
    .sidebar-menu > li > a > .ion {
        width: 25px;
        font-size: 14px;
    }
    
    .sidebar-menu .treeview-menu > li > a > .fa-circle-o,
    .sidebar-menu .treeview-menu > li > a > .fa {
        width: 18px;
        margin-right: 6px;
        font-size: 11px;
    }
    
    /* Flecha de expansión */
    .sidebar-menu .treeview > a > .pull-right-container {
        width: 25px;
    }
    
    /* Asegurar que el texto no se corte */
    .sidebar-menu .treeview-menu > li > a > span {
        white-space: normal;
        word-break: break-word;
        max-width: calc(100% - 30px);
    }
}

/* Ajustes para móviles pequeños */
@media (max-width: 480px) {
    .sidebar-menu > li > a {
        padding: 8px 3px 8px 10px;
        font-size: 12px;
    }
    
    .sidebar-menu .treeview-menu > li > a {
        padding: 5px 3px 5px 10px;
        font-size: 11px;
    }
}

/* ========================================
   CAJAS DEL DASHBOARD
   ======================================== */

/* Ajustes para las cajas del dashboard */
.small-box .inner h3 {
    font-size: 38px;
    font-weight: bold;
    margin: 0 0 10px 0;
    white-space: nowrap;
    padding: 0;
}

/* Responsividad para tablets (pantallas menores a 992px) */
@media (max-width: 991px) {
    .small-box .inner h3 {
        font-size: 28px;
    }
}

/* Responsividad para móviles grandes (pantallas menores a 768px) */
@media (max-width: 767px) {
    .small-box .inner h3 {
        font-size: 24px;
        word-wrap: break-word;
        white-space: normal;
        line-height: 1.2;
    }
    
    .small-box .inner p {
        font-size: 13px;
    }
    
    /* Ajustar padding interno de las cajas */
    .small-box .inner {
        padding: 10px;
    }
    
    /* Reducir tamaño del ícono */
    .small-box .icon {
        font-size: 60px;
    }
}

/* Responsividad para móviles pequeños (pantallas menores a 576px) */
@media (max-width: 575px) {
    .small-box .inner h3 {
        font-size: 20px;
        word-break: break-all;
    }
    
    .small-box .inner p {
        font-size: 12px;
        margin-bottom: 5px;
    }
    
    /* Reducir más el padding */
    .small-box .inner {
        padding: 8px;
    }
    
    /* Reducir aún más el ícono */
    .small-box .icon {
        font-size: 50px;
        top: 5px;
        right: 5px;
    }
    
    /* Ajustar el footer */
    .small-box-footer {
        font-size: 11px;
        padding: 5px;
    }
}

/* Para números muy largos, usar formato compacto */
@media (max-width: 480px) {
    .small-box .inner h3 {
        font-size: 18px;
        letter-spacing: -0.5px;
    }
    
    /* Asegurar que las columnas no colapsen mal */
    .col-xs-6 {
        width: 50%;
        float: left;
        padding-left: 5px;
        padding-right: 5px;
        margin-bottom: 10px;
    }
}

/* Ajuste adicional para pantallas muy pequeñas */
@media (max-width: 360px) {
    .small-box .inner h3 {
        font-size: 16px;
    }
    
    .small-box .inner p {
        font-size: 11px;
    }
}

/* Asegurar que las cajas tengan altura mínima consistente */
.small-box {
    min-height: 100px;
    position: relative;
    overflow: hidden;
}

/* Evitar que el texto del footer se desborde */
.small-box-footer {
    display: block;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}