/* ***************************************************** Estilos generales para vistas información ******************************************************* */
.contenedorDetalles {
    margin-left: 5%;
    margin-right: 5%;
}

#h1-Size {
    font-family: "Helvetica", "Arial", sans-serif !important;
    font-size: 1.25rem !important; /*20px*/
    font-weight: 600 !important;
}

#h2-Size {
     font-family: "Helvetica", "Arial", sans-serif !important;
    font-size: 1.125rem !important; /*18px*/
    font-weight: 600 !important;
}

.title-center {
    text-align: center;
}

.colorRojo {
    color: red;
}
/* ***************************************************** Para vista Texto informe Html  ******************************************************* */

.table-container {
    width: 100%;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch; /* mejora el scroll en iOS */
    scrollbar-width: thin; /* Firefox */
    padding-bottom: 15px;
    padding-top: 15px;
}
    .table-container table {
        /*width: 100%;*/
        border-collapse: collapse;
    }

   /* .table-container th, td {
        border: 1px solid #ddd;
        padding: 8px;       
    }
    .table-container td p{        
        padding: 8px;       
    }

    .table-container th {
       background-color: #f2f2f2;
    }*/

#contenedorTexto p, #contenedorTexto span {
    font-size: 0.875rem !important;
    font-family: "Helvetica", "Arial", sans-serif !important;
    line-height: 1.6 !important;
    /* para url o palabras largas que esten dentro de un p */
    overflow-wrap: anywhere;
}
/* para enlaces largos que esten dentro de un span dentro de la etiqueta a */
#contenedorTexto a span {
    display: block;
    overflow-wrap: anywhere;
}

/* ***************************************************** Card de resultados en vistas información ******************************************************* */

.estilo-headerCard {
    background-color: #486fbe;
    color: white;
    font-size: 1.125rem !important; /*18px*/
}

    .estilo-headerCard span {
        font-size: 1.125rem !important; /*18px*/
    }

.estilo-headerCard2 {
    background-color: #486fbe;
    color: white;
    font-size: 1.125rem !important; /*18px*/
    padding-bottom: 15px;
    padding-top: 15px;
}

    .estilo-headerCard2 span {
        font-size: 1.125rem !important; /*18px*/
    }

    .estilo-headerCard2 a {
        color: white;
        font-size: 1.125rem !important; /*18px*/       
    }

.estilo-body {
    padding-bottom: 15px;
    padding-top: 40px;
}

.listaOl ol {
    margin-bottom: 0;
}

.listaOl li {
    padding-bottom: 20px;   
}

.listaUl ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.listaUl li {
    padding-left: 0;
    padding-bottom: 20px;  
}

.listaUl2 ul {
    list-style-type: square !important;
    margin-left: 40px;
}

.listaUl2 li {
    padding-left: 5px !important;
    padding-top: 5px;
    padding-bottom: 15px;   
}

.contentCard p, span {
    font-size: 1rem !important; /*16px*/
}

.contentCard div span {
    font-size: 1rem !important; /*16px*/
}

.espacioSpan {
    padding-right: 8px;
}
/*para normas afectadas*/
.espacioSpan2 {
    display: inline-block;
    padding-right: 16px;
}

.espacioDiv {
    margin-bottom: 20px;
}

.espacioArticulo {
    display: inline-block;
    padding-right: 15px;
    padding-bottom: 15px;
}

/* ********************************************* Boton para uso solo de lector de pantalla (No visible en pantalla) **************************************** */

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
/* *************************************************************** Estilos en movil ********************************************************************** */

@media (max-width: 768px) {

    #h1-Size {
        font-size: 18px !important;
    }

    #h2-Size {
        font-size: 16px !important;
    }

    .estilo-headerCard {
        font-size: 16px !important;
    }
        .estilo-headerCard span {
            font-size:16px !important; /*16px*/
        }
        
    .estilo-headerCard2 {
        font-size: 14px !important;
    }
        .estilo-headerCard2 span {
            font-size: 16px !important; /*16px*/
        }
    
    .contentCard p {
        font-size: 12px !important;
    }   

    .estilo-body {
        padding: 5% 3% 1% 1%;
    }
    .listaUl li {
        font-size: 12px !important;
    }
    .listaUl2 ul {
        font-size: 12px !important;
        margin-left: 20px;
    }

    .espacioSpan {
        padding-right: 4px;
    }

    #contenedorTexto span {
        font-size: 12px !important;
        margin-left: 10px !important;
        /* text-align: left !important;*/
    }

    #contenedorTexto p {
        font-size: 12px !important;
        margin-left: 10px !important;
        margin-right: 10px !important;
        /*text-align: left !important;      */
    }
    
    /*alinear izquierda contenido de tablas de texto o resumen*/
    .table-container td {
        text-align: left;
    }

        .table-container td p {
            text-align: left !important;
            /* margin-left: 0 !important;
        margin-right: 0 !important;*/
        }

            .table-container td p span {
                text-align: left !important;
                /* margin-left: 0 !important;
            margin-right: 0 !important;*/
            }

    /*Imagenes responsive*/
    img {
        max-width: 100% !important;
        height: auto !important;
        display: block !important;
    }
}