/* =================================
   TABLETS Y CELULARES
================================= */
@media (max-width: 992px){

    .sidebar{
        width:100%;
        position:relative;
        min-height:auto;
    }

    .content{
        margin-left:0;
        width:100%;
        padding:20px;
    }

    .container{
        flex-direction:column;
    }

    .stats-grid{
        grid-template-columns:repeat(2,1fr);
    }

    .dashboard-grid{
        grid-template-columns:1fr;
    }

}

/* =================================
   CELULARES
================================= */
@media (max-width: 768px){

    .content{
        padding:15px;
    }

    .card{
        padding:20px;
    }

    .form-grid{
        grid-template-columns:1fr;
    }

    .stats-grid{
        grid-template-columns:1fr;
    }

    .cards-grid{
        grid-template-columns:1fr;
    }

    .dashboard-grid{
        grid-template-columns:1fr;
    }

    .table{
        display:block;
        overflow-x:auto;
        white-space:nowrap;
    }

    button,
    .btn{
        width:100%;
    }

    .card h2{
        font-size:26px;
    }

    .topbar{
        flex-direction:column;
        text-align:center;
    }

    .logo-img{
        width:60px;
    }

}

/* =================================
   IMÁGENES RESPONSIVAS
================================= */

img{
    max-width:100%;
    height:auto;
}
/* ==========================
   TELEFONOS
========================== */

@media (max-width:768px){

/* HEADER */
.header-container{
    grid-template-columns:1fr;
    text-align:center;
    padding:15px;
    gap:15px;
}

.header-logos{
    justify-content:center;
}

.header-logos img{
    height:80px !important;
}

.header-brand h1{
    font-size:18px !important;
}

.header-brand span{
    font-size:13px;
}

.header-auth{
    justify-content:center;
    flex-wrap:wrap;
}

/* MENU */
.main-nav ul{
    gap:10px !important;
    padding:15px;
}

.main-nav a{
    font-size:14px;
}

/* CONTENIDO */
#app-content{
    padding:15px !important;
}

.section{
    padding:15px !important;
}

/* SUBMENUS */
.acerca-layout{
    grid-template-columns:1fr !important;
}

.acerca-menu{
    width:100% !important;
}

.acerca-content{
    width:100%;
}

.acerca-panel{
    padding:15px;
}

/* MAPAS */
iframe{
    width:100% !important;
    height:300px !important;
}

/* CARRUSEL */
.mainSwiper{
    width:100% !important;
    height:220px !important;
}

.swiper-slide{
    height:220px !important;
}

/* SERVICIOS */
.servicios-grid{
    gap:20px;
}

.servicio-card{
    width:120px;
    height:120px;
}

.servicio-card p{
    font-size:12px;
}

/* PORTALES */
.portal-grid{
    grid-template-columns:1fr !important;
}

/* BIENESTAR */
.bienestar-grid{
    grid-template-columns:1fr !important;
}

/* FORMULARIOS */
input,
select,
textarea{
    width:100%;
}

.btn-login,
.btn-register,
.btn-denuncia{
    width:100%;
}

/* ORGANIGRAMA */
.organigrama-wrapper{
    padding:5px;
}

.organigrama-wrapper img{
    width:100%;
}

/* FOOTER */
.footer-container{
    grid-template-columns:1fr !important;
    gap:25px;
}

}
/* =====================================
   AJUSTE FUERTE PARA CELULARES
===================================== */

@media (max-width:768px){

/* LOGO */
.header-logos img{
    height:55px !important;
}

/* TITULO */
.header-brand h1{
    font-size:16px !important;
    margin-bottom:4px;
}

.header-brand span{
    font-size:11px !important;
}

/* BOTONES LOGIN */
.btn-login,
.btn-register{
    width:140px !important;
    padding:8px 12px !important;
    font-size:12px !important;
}

/* MODAL LOGIN */
.auth-content{
    max-width:95% !important;
    padding:15px !important;
}

/* TABS LOGIN */
.tab-btn{
    padding:8px !important;
    font-size:12px !important;
}

/* FORM LOGIN */
.auth-form input,
.auth-form select{
    padding:8px !important;
    font-size:12px !important;
}

.auth-form h3{
    font-size:18px !important;
}

/* MENU */
.main-nav ul{
    gap:8px !important;
    padding:10px !important;
}

.main-nav a{
    font-size:13px !important;
}

/* SECCIONES */
.section{
    padding:12px !important;
}

.section h2{
    font-size:22px !important;
}

/* SUBMENU */
.acerca-menu{
    padding:10px !important;
}

.menu-item{
    padding:10px !important;
    font-size:13px !important;
}

/* PANEL */
.acerca-panel{
    padding:12px !important;
}

/* FORMULARIOS */
.form-group input,
.form-group select,
.form-group textarea{
    padding:8px !important;
    font-size:13px !important;
}

/* SOLICITUD APOYO */
#formSolicitud{
    font-size:13px;
}

#formSolicitud label{
    font-size:13px;
}

#formSolicitud select{
    width:100%;
}

/* TARJETA APOYO */
.acerca-content{
    overflow:hidden;
}

/* BOTONES */
.btn-denuncia{
    padding:10px !important;
    font-size:13px !important;
}

/* FOOTER */
.footer-chalco{
    padding:30px 15px !important;
}

.footer-col h4{
    font-size:16px;
}

.footer-col p{
    font-size:12px;
}

}
/* =================================
   SOLICITUD DE APOYO MOVIL
================================= */

@media(max-width:768px){

#formSolicitud{

    width:100%;

}

/* cajas moradas */

#submenuMujeres,
#submenuViolencia,
#submenuVivienda,
#submenuCampo,
#submenuJovenes,
#submenuOtro,
#submenuEconomico{

    margin-left:0 !important;

    width:100%;

    padding:12px;

    border-left:none;

    border-radius:12px;

    background:#f8f1fb;

}

/* radios */

#formSolicitud label{

    display:block;

    margin-bottom:12px;

    font-size:14px;

}

/* textarea */

#formSolicitud textarea{

    width:100%;

    min-height:90px;

}

/* select promotor */

#formSolicitud select{

    width:100%;

    max-width:none;

}

/* card principal */

#acerca #apoyo{

    padding:10px;

}

}