#menu-mobile{
    display: none;   
}
@media screen and (max-width:1100px){
    #menu-mobile{
        display: block;   
    }
    #menu-menu-principal{
        display: none;
    }
    #menu-menu-noticias{
        display: none;
    }
    .search{
        top: -176px;
        right: 0px;
    }

}


@media screen and (max-width:991px){
    .copyright-1,.copyright-2,.center-logo-footer{
        text-align: center;
    }
    #facebook-container{
        display: none;
    }
    .search{
        top: -230px;
        right: 0px;
    }
}









.padding-right{
    padding-right: 0px;
}
.padding-left{
    padding-left: 0px;
}
@media screen and (max-width:767px){
    .padding-right{
        padding-right: 15px;
    }
    .padding-left{
        padding-left: 15px;
    }
    #menu-mobile-noticias,#menu-mobile-principal{
        font-size: 16px;
    }
    #menu-mobile-principal-box,#menu-mobile-noticias-box{
        margin-top: -38px;
    }
    .search{
        top: -236px;
        right: 0px;
    }
}

/* Estilos responsive específicos para el organigrama moderno */

/* Asegurar que el organigrama quepa en una sola vista */
@media (max-height: 800px) {
    .organigrama-container {
        min-height: auto;
        padding: 15px;
    }
    
    .organigrama-title {
        padding: 8px 16px;
        margin-bottom: 15px;
        font-size: 1em;
    }
    
    .nivel {
        gap: 10px;
        margin-bottom: 10px;
    }
    
    .nivel-1 { margin-bottom: 10px; }
    .nivel-2 { 
        gap: 25px; 
        margin-bottom: 10px; 
    }
    .nivel-3 { margin-bottom: 10px; }
    .nivel-4 { 
        gap: 20px; 
        margin-bottom: 10px; 
    }
    .nivel-5 { gap: 6px; }
    
    .cargo {
        padding: 6px 8px;
        font-size: 0.7em;
        min-width: 100px;
        max-width: 130px;
    }
    
    .cargo-principal {
        padding: 8px 10px;
        font-size: 0.75em;
        min-width: 120px;
        max-width: 150px;
    }
    
    .sub-departamentos {
        gap: 3px;
        margin-top: 4px;
    }
    
    .sub-depto {
        padding: 3px 6px;
        font-size: 0.55em;
        min-width: 60px;
    }
    
    .stats-container {
        gap: 15px;
        margin-bottom: 15px;
    }
    
    .stat-item {
        padding: 10px;
        min-width: 80px;
    }
    
    .stat-number {
        font-size: 1.5em;
    }
    
    .search-container {
        margin-bottom: 15px;
    }
}

/* Para pantallas muy pequeñas en altura */
@media (max-height: 600px) {
    .organigrama-container {
        padding: 10px;
    }
    
    .organigrama-title {
        padding: 6px 12px;
        margin-bottom: 10px;
        font-size: 0.9em;
    }
    
    .nivel {
        gap: 8px;
        margin-bottom: 8px;
    }
    
    .cargo {
        padding: 4px 6px;
        font-size: 0.65em;
        min-width: 90px;
        max-width: 120px;
    }
    
    .cargo-principal {
        padding: 6px 8px;
        font-size: 0.7em;
        min-width: 110px;
        max-width: 140px;
    }
    
    .sub-depto {
        padding: 2px 4px;
        font-size: 0.5em;
        min-width: 50px;
    }
    
    .stats-container {
        gap: 10px;
        margin-bottom: 10px;
    }
    
    .stat-item {
        padding: 8px;
        min-width: 70px;
    }
    
    .stat-number {
        font-size: 1.3em;
    }
}

/* Para pantallas ultra anchas */
@media (min-width: 1600px) {
    .organigrama-container {
        max-width: 1800px;
    }
    
    .nivel-5 {
        gap: 12px;
    }
    
    .cargo {
        min-width: 140px;
        max-width: 170px;
        font-size: 0.8em;
    }
    
    .cargo-principal {
        min-width: 160px;
        max-width: 190px;
        font-size: 0.85em;
    }
}

/* Para pantallas de escritorio estándar */
@media (min-width: 1200px) and (max-width: 1599px) {
    .organigrama-container {
        max-width: 1400px;
    }
    
    .nivel-5 {
        gap: 8px;
    }
    
    .cargo {
        min-width: 120px;
        max-width: 150px;
    }
}

/* Para tablets en modo landscape */
@media (min-width: 768px) and (max-width: 1199px) and (orientation: landscape) {
    .organigrama-container {
        max-width: 95%;
        padding: 15px;
    }
    
    .nivel-5 {
        gap: 6px;
    }
    
    .cargo {
        min-width: 100px;
        max-width: 130px;
        font-size: 0.7em;
    }
    
    .cargo-principal {
        min-width: 120px;
        max-width: 150px;
        font-size: 0.75em;
    }
}

/* Para móviles en modo landscape */
@media (max-width: 767px) and (orientation: landscape) {
    .organigrama-container {
        padding: 10px 5px;
    }
    
    .organigrama-title {
        padding: 6px 12px;
        margin-bottom: 8px;
        font-size: 0.85em;
    }
    
    .nivel {
        gap: 6px;
        margin-bottom: 6px;
    }
    
    .nivel-2 {
        gap: 20px;
    }
    
    .nivel-4 {
        gap: 15px;
    }
    
    .cargo {
        min-width: 80px;
        max-width: 110px;
        padding: 4px 6px;
        font-size: 0.6em;
    }
    
    .cargo-principal {
        min-width: 100px;
        max-width: 130px;
        padding: 6px 8px;
        font-size: 0.65em;
    }
    
    .sub-depto {
        padding: 2px 4px;
        font-size: 0.45em;
        min-width: 45px;
    }
    
    .stats-container {
        gap: 8px;
        margin-bottom: 8px;
    }
    
    .stat-item {
        padding: 6px;
        min-width: 60px;
    }
    
    .stat-number {
        font-size: 1.2em;
    }
}

/* Ocultar botones flotantes en pantallas muy pequeñas */
@media (max-width: 480px) {
    button[style*="position: fixed"] {
        display: none !important;
    }
}

/* Mejorar la legibilidad en pantallas de alta densidad */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .cargo {
        font-weight: 600;
    }
    
    .sub-depto {
        font-weight: 600;
    }
}

/* Asegurar que el contenido no se desborde */
.organigrama-container {
    overflow: hidden;
}

.organigrama-content {
    overflow: visible;
}

/* Mejorar el contraste en modo de alto contraste */
@media (prefers-contrast: high) {
    .cargo {
        border: 2px solid #000;
    }
    
    .sub-depto {
        border: 1px solid #000;
    }
}

/* Reducir animaciones para usuarios que las prefieren reducidas */
@media (prefers-reduced-motion: reduce) {
    .cargo,
    .sub-depto,
    .stat-item {
        animation: none;
        transition: none;
    }
    
    .cargo:hover,
    .sub-depto:hover {
        transform: none;
    }
}