@charset "UTF-8";

.bg-DDIMBE {
    background-color: #611232 /*Color pirmario principal */
}
.bg-DDIMBE-2 {
    background-color: #9d2449 /*Color primario segundo */
}


.bg-filtros {
    background-color: #a57f2c !important; /*Color secundario principal */    
    color: white !important;
    border-color: black;
    border: groove;
}

.bg-filtros-2 {
    background-color: #e6d194 !important; /*Color secundario segundo */
    color: black !important;
    border: none;
}

.btn-DDIMBE {
    background-color: #661232;
    color: white;
    border-color: black;
    border: groove;
}

ul.ul-noneStyle li {
    list-style: none;
    margin-top: 5px;
    padding: 2px 2px 2px 0px;
}
li.li-noneStyle {
    list-style: none;
    
}
a.a-noneStyle {
    color: black;
    text-decoration: none;
    font-size: 14px;
    display: block;
}
.ListaGuias {
    max-height: 720px; /* o usa unidades relativas */
    overflow-y: auto;
    margin-left: 5vw; /* usa unidades relativas para mejor adaptación */
    margin-right: 5vw;
    padding-left: 0vw;
    box-sizing: border-box;
}

    .ListaGuias li {
        margin-left: 35px;
        line-height: 1.6;
    }
.ListaSecciones {
    max-height: 720px; /* o usa unidades relativas */
    overflow-y: auto;
    overflow-x: hidden;
}
.VistaGuias {
    max-height: 600px; /* o usa unidades relativas */
    overflow-y: auto;
    overflow-x: hidden;
}


.select:focus {
    outline: 2px solid #661232 !important; /* Cambia el color del borde */
    box-shadow: 0 0 5px #661232 !important; /* Agrega un efecto de sombra */
}
input:focus {
    outline: 2px solid #661232 !important; /* Cambia el color del borde */
    box-shadow: 0 0 5px #661232 !important; /* Agrega un efecto de sombra */
}

ul.Square {
    list-style-type: square !important;
    padding-left: 2em; /* Ajusta el espacio entre el ícono y el texto */
    position: relative;
}
ul.Circle {
    list-style-type: circle !important;
    padding-left: 2em; /* Ajusta el espacio entre el ícono y el texto */
    position: relative;
}
.col-min {
    width: 1%;
    white-space: nowrap;
    text-align: center;
}
.login-wrapper {
    min-height: 50vh; /* Ocupa toda la altura de la ventana */
    display: flex;
    justify-content: center; /* Centra verticalmente el formulario */
    padding-bottom: 4rem; /* Espacio para que el footer no se monte */
}

/*-----------------------------------------  Card   ------------------------------------*/
.card-grid {
    display: grid;
    grid-template-columns: 180px 1fr; /* Imagen rectangular y contenido */
    gap: 20px; /* Espacio entre imagen y texto */
    align-items: center;
}
@media (max-width: 991px) {
    .card-grid {
        grid-template-columns: 1fr;  solo una columna en móviles 
    }
}

.preview-img {
    width: 150px; /* Tamaño rectangular */
    height: 180px;
    object-fit: cover; /* Ajusta la imagen sin deformarla */
    border-radius: 8px;
}

.card-info {
    text-align: left; /* Alinea el texto a la izquierda */
}
p.card-Justify {
    text-align: justify !important;
}
.card-description {
    margin-top: 15px;
    font-size: 0.9rem;
    color: #666;
    text-align: center; /* Centra la descripción */
}



/*-----------------------------------------  Modal   ------------------------------------*/
.modal-imagen {
    display: none;
    position: fixed;
    z-index: 1400;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.7);
}

/*Stilo para la imagen de las guias*/
.contenido-GuiaModal {
    /*max-width: 90%;
    max-height: 80%;
    margin: 5% auto;
    display: block;
    border-radius: 10px;*/
    border-radius: 10px;
    display: block;
    margin: 5% auto;
}
/*Estilo para las portadas de las guias*/
.contenido-modal {
    max-width: 90%;
    max-height: 100%;
    margin: 5% auto;
    display: block;
    border-radius: 10px;
}

.cerrar-modal {
    position: absolute;
    top: 20px;
    right: 30px;
    font-size: 40px;
    color: white;
    cursor: pointer;
}
#modalPDF .modal-dialog {
    max-width: 80vw; /* O usa 100vw si quieres que ocupe todo */
    width: 60vw;
    margin: 0 auto;
}

/*-------------------select en agregar documentos-------------------*/
.Texto-pro {
    max-width: 250px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}


/*-------------------Estilos docs-------------------*/
.img-doc {
    display: block;
    margin: 1rem auto;
    max-width: 98%;
    min-width: 200px;
   
    object-fit: contain;
}

.justificado {
    text-align: justify !important;
    text-justify: inter-word !important;
}

/*Separador texto preguntas*/
.separador {
    text-align: center;
    font-weight: bold; 
    margin: 1.5em 0;
    /*font-style: italic;*/
    border-bottom: 1px dashed #ccc;
}


.accordion-button {
    font-size: 18px !important;
}


/*-----------------Menu deslizante*/
/* Contenedor principal con layout horizontal en escritorio */
/* Layout horizontal en escritorio */
.layout-container {
    display: flex;
    flex-direction: column;
}

/* Layout horizontal en escritorio */
@media (min-width: 992px) {
    .layout-container {
        flex-direction: row;
        gap: 20px;
    }

    #formSlidePanel {
        position: static !important;
        left: auto !important;
        width: 22%;
        max-width: none;
        height: auto;
        box-shadow: none;
        transition: none;
        z-index: auto;
    }

    .result-container {
        width: 78%;
    }

    .floating-btn,
    #closeFormBtn {
        display: none !important;
    }

    .slide-top,
    .slide-bottom {
        display: none !important;
    }

    .slide-middle {
        flex: 1 1 auto;
        height: auto;
        padding: 0 20px;
    }

    .slide-content {
        display: block;
        height: auto;
    }

}


/* Panel deslizante en móviles */
.slide-panel {
    position: fixed;
    top: 0;
    left: -100%;
    width: 100%;
    max-width: 400px;
    height: 100%;
    background-color: white;
    box-shadow: 2px 0 5px rgba(0,0,0,0.2);
    transition: left 0.3s ease-in-out;
    z-index: 1050;
}

    .slide-panel.active {
        left: 0;
    }

/*.slide-content {
    padding: 10px;
    overflow-y: auto;
    height: 100%;
}*/
.slide-content {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 0;
}

/* Secciones */
.slide-top {
    flex: 0 0 16%;
    background-color: #611232;
    display: flex;
    align-items: center;
    justify-content: center;
}

.slide-middle {
    flex: 1 1 75%;
    overflow-y: auto;
    padding: 20px;
    background-color: #FFFFFF;
}

.slide-bottom {
    flex: 0 0 6%;
    background-color: #13322e;
    display: flex;
    align-items: center;
    justify-content: center;
}
.slide-middle-Secciones {
    flex: 1 1 94%;
    overflow-y: auto;
    padding: 10px;
    background-color: #FFFFFF;
}

/* Botón flotante en móviles */
/*.floating-btn {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 1100;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}*/
.floating-btn {
    position: fixed;
    top: 270px;
    right: 5px;
    z-index: 10;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #611232; /* azul Bootstrap con transparencia */
    color: white;
    backdrop-filter: blur(2px); /* opcional: efecto visual sobre fondo */
    box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}


/*Tabla estadistica*/
#tablaLecturas td, #tablaLecturas th {
    word-wrap: break-word;
    white-space: normal;
}

@media (max-width: 400px) {
    .table-responsive {
        overflow-x: auto;
    }

    #tablaLecturas {
        min-width: 500px; /* fuerza scroll horizontal si la pantalla es muy angosta */
    }
}