@import url('https://fonts.googleapis.com/css2?family=Mukta+Malar:wght@300&display=swap');

:root {
    --tipoLetraTitulo: Arial;
    --tipoLetraParrafo: 'Mukta Malar', sans-serif;
    --colorPrimario: rgb(38, 87, 110); /*#26576e*/
    --colorSecundario: rgb(174, 154, 54); /*#ae9a36*/
    --colorTerciario: rgb(161, 50, 74); /* #a1324a  mas oscuro pero del mismo color Darken 20% #531a26*/
    --colorAuxiliar: rgb(38, 87, 110); /*para botones y cajas de texto*/
    --colorBgAuxiliar: rgb(38, 87, 110); /*para botones y cajas de texto*/
}

*:focus {
    outline: none;
}

html {
    height: 100%; /*footer*/
}

h1 {
    font-family: var(--tipoLetraTitulo);
    color: var(--colorPrimario);
    font-variant: small-caps;
}

h2 {
    font-family: var(--tipoLetraTitulo);
    color: var(--colorPrimario);
}

h3 {
    font-family: var(--tipoLetraTitulo);
    color: var(--colorPrimario);
}

a {
    font-family: var(--tipoLetraTitulo);
    text-decoration: none;
    color: var(--colorPrimario);
    font-size: 1rem;
    font-weight: 500;
    word-break: break-word;
}

    a:hover {
        text-decoration: underline;
    }
/**FLECHAS**/
.IrArriba {
    margin-left: calc(100vw - 5rem);
    transition: transform 400ms ease-in-out, -webkit-transform 400ms ease-in-out;
}

    .IrArriba:hover {
        transform: translateY(.5rem);
        -webkit-transform: translateY(-.5rem);
    }

.irAdelante {
    transition: transform 400ms ease-in-out, -webkit-transform 400ms ease-in-out;
}

    .irAdelante:hover {
        -webkit-transform: translateX(.5rem);
        transform: translateX(.5rem);
    }

.irAtras {
    transition: transform 400ms ease-in-out, -webkit-transform 400ms ease-in-out;
}

    .irAtras:hover {
        -webkit-transform: translateX(-.5rem);
        transform: translateX(-.5rem);
    }

/********************************** Site Master *******************************/
/*contenedor general*/
body {
    display: flex; /*no necesito width interior*/
    flex-wrap: wrap;
    position: relative; /*formularios y footer*/
    height: 100%; /*footer*/
    margin: 0;
    padding: 0;
    font-family: var(--tipoLetraParrafo);
    font-size: 1rem;
    min-width:400px;
    /*para responsive */
    width: 100%;
 
}
/*contenido*/
form {
    width: 100%; /*body varia si no es 100%*/
}
/* Contiene 3 divs:1 divheader, 2 divcuerpo y 3 divFooter*/
/*1. divHeader contiene: logo1tipo, Menu */
.divHeader {
    display: flex;
    flex-wrap: wrap-reverse; /*responsive: 1ro se ve logo*/
    width: 98%;
    margin: 5px 0;
}
.divMenu {
    padding-top: 5rem;
    margin: 0.5rem;
    margin-left: 2.5rem;
}
.logotipo {
    width: 11rem;
    object-fit: contain;
    padding-left: 0.5rem; /*para que tenga una distancia del menu horizontal*/
    margin: 0.5rem auto; /*en responsive: tenga distancia menu vertical*/
}

.MenuItemEstatico {
    font-family: var(--tipoLetraTitulo);
    color: var(--colorPrimario);
    font-size: 1.7rem;
    font-weight:bold;
    padding: 0 0.5rem;
}
/*distancia entre los items del menu, son 2 menues*/
#MenuDefault a.static ,
#mnuPrincipal2 a.static {
    margin-right: 0.3rem;
}

.MenuItemDinamico {
    font-family: var(--tipoLetraTitulo);
    color: white;
    font-size: 1.4rem;
    font-weight: bold;
    text-align: left;
    background-color: var(--colorPrimario);
    padding: 0.5rem;
}

    .MenuItemEstatico:before, .MenuItemDinamico:before {
        content: "";
        position: absolute;
        left: 0;
        right: 100%;
        bottom: 0;
        height: 0.1rem;
        transition: right 300ms ease-out;
        /*compatibilizando*/
        -webkit-transition: right 300ms ease-out;
        -moz-transition: right 300ms ease-out;
        background-color: white;
    }

.MenuItemEstatico:before {
    background-color: var(--colorPrimario);
}

.MenuItemDinamico:before {
    background-color: white;
}

.MenuItemEstatico:hover:before, .MenuItemDinamico:hover:before {
    right: 0;
}

/*****cuerpo***/
.divCuerpo {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    word-break: break-word; /*palabras muy largas*/
    animation: cambiaopacity 500ms ease-in-out normal;
    /*compatibilizando*/
    -webkit-animation: cambiaopacity 500ms ease-in-out normal;
    -moz-animation: cambiaopacity500ms ease-in-out normal;
}

@keyframes cambiaopacity {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}
/*****footer*/
.divFooter {
    margin-top: 5rem;
    position: relative;
    width: 100%;
    bottom: 0;
    left: 0;
    color: white;
    background-color: var(--colorPrimario);
    text-align: center;
    overflow: hidden;
    transition: all 300ms ease-in-out;
    min-height: 12.5rem;
    -webkit-box-shadow: 0.5px 3px rgba(139,139,139,0.7), inset 0px 0px 0px 2px rgba(139,139,139,0.64 );
    box-shadow: 0.5px 3px rgba(139,139,139,0.7), inset 0px 0px 0px 2px rgba(139,139,139,0.64);
}

    .divFooter p, .divFooter a {
        color: white;
    }
    /* al hacer hover en el footer que salten los iconos*/
    .divFooter:hover .iconosSocialMedia {
        opacity: 1;
        width: 3.5rem;
    }

.iconosSocialMedia {
    width: 1rem; /*se amplia 3.5rem*/
    height: 12rem;
    background-color: var(--colorTerciario);
    position: absolute;
    bottom: 0;
    right: 0;
    cursor: pointer;
    border-radius: 0.1rem;
    opacity: .5;
    box-shadow: 0 0.625rem 1.25rem rgba(0,0,0,0.5), 0 0.5rem 0.5rem rgba(0,0,0,0.22);
    transition: all 500ms ease-in-out;
}

    .iconosSocialMedia ul {
        margin: 0;
        padding-top: 0.5rem;
        padding-left: 1rem;
    }

        .iconosSocialMedia ul li {
            list-style: none;
        }

    .iconosSocialMedia a {
        text-decoration: none;
        font-size: 1.3rem;
        color: white;
    }

    .iconosSocialMedia .fa {
        color: white;
        -webkit-transition: font-size 300ms ease-in-out;
    }

        .iconosSocialMedia .fa:hover {
            font-size: 150%;
        }

    .iconosSocialMedia .fa-facebook-square:hover {
        color: #3b5998;
    }

    .iconosSocialMedia .fa-twitter-square:hover {
        color: #55ACEE;
    }

    .iconosSocialMedia .fa-google-plus-square:hover {
        color: #dd4b39;
    }

    .iconosSocialMedia .fa-linkedin-square:hover {
        color: #007bb5;
    }

    .iconosSocialMedia .fa-envelope:hover {
        color: white;
    }

    .iconosSocialMedia .fa-whatsapp:hover {
        color: forestgreen;
    }

/********************************** pagina Inicio *******************************/
/* Banner esta dentro de body > form > divcuerpo*/
.divBanner {
    background: linear-gradient(270deg, rgba(180,120,105,0) 10%, rgba(55, 85, 110,1) 100%), url('../Imagenes/banner.jpg') no-repeat center fixed;
    background-size: cover;
    padding: 9vh 4vw;
    color: white;
    text-shadow: 0.0625rem 0.125rem 0.0625rem black;  
    -webkit-box-shadow: 0.5px 3px rgba(139,139,139,0.7), inset 0px 0px 0px 2px rgba(139,139,139,0.64 );
    box-shadow: 0.5px 3px rgba(139,139,139,0.7), inset 0px 0px 0px 2px rgba(139,139,139,0.64);
}

.bannerTitulo {
    font-family: var(--tipoLetraTitulo);
    width: 70%;
    /*  font-size: 4rem; line-height: 4rem;*/
    font-size: 3.5rem;
    line-height: 3.8rem;
    font-weight: 800;
    font-variant: small-caps;
    text-align: left;
    text-shadow: 0.0625rem 0.25rem 0.0625rem black;
    color: white;
}

.bannerSubTitulo {
    width: 90%;
    font-size: 2rem;
    text-align: justify;
    color: white;
}

    .bannerSubTitulo a {
        color: white;
    }

.bannerBotones {
    width: 95%;
    text-align: center;
}

    .bannerBotones .btnBlanco {
        /*  font-size: 2rem;*/
        font-size: 1.8rem;
        text-shadow: 0.0625rem 0.125rem 0.0625rem black;
        color: white;
    }

/*cajas de texto*/
    .divTexto {
    width: 100%;
    box-sizing: border-box;
    background-color: var(--colorPrimario);
    padding: 3.5rem;
    margin: 2rem .2rem;
    transition: all 500ms ease-in;
    opacity: 0.86;
    border-radius: 1.25rem; /* arriba curva, abajo recto 50% 50% 0 0*/
}

    .divTexto:hover {
        opacity: 1;
        box-shadow: 0 0.625rem 1.25rem rgba(0,0,0,0.25), 0 0.5rem 0.5rem rgba(0,0,0,0.22);
    }

    .divTexto h1 {
        color: white;
        text-align: center;
    }

    .divTexto p {
        color: white;
        font-size: 1.2rem;
    }

    .divTexto.colorSecundario {
        background-color: var(--colorSecundario);
    }

    .divTexto.colorTerciario {
        background-color: var(--colorTerciario);
    }
/*Contenedores internos*/
.divContenedor { /*esta en boletines y pagina de inicio*/
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding: 1rem;
}
/*subcontenedores internos, colorPrimario por default*/
.subContenedor {
    vertical-align: middle;
    margin: 1rem;
    border-radius: 1rem;
    box-shadow: 0 0.0625rem 0.1875rem rgba(0,0,0,0.12), 0 0.0625rem 0.125rem rgba(0,0,0,0.24);
    transition: all 1000ms cubic-bezier(.25,.8,.25,1);
    padding: 2rem;
    --colorAuxiliar: var(--colorPrimario);
    --colorBgAuxiliar: transparent;
    --anchoVariable: 25%;
    color: var(--colorAuxiliar);
    border: .15rem solid var(--colorAuxiliar);
    background-color: var(--colorBgAuxiliar);
    width: var(--anchoVariable);
    position: relative; /*para botones internos*/
}

    .subContenedor:hover {
        transform: scale(1.02);
        box-shadow: 0 0.85rem 1.75rem rgba(0,0,0,0.25), 0 0.625rem 0.625rem rgba(0,0,0,0.22);
    }

    .subContenedor p {
        color: var(--colorAuxiliar);
        text-align: left;
        font-size: 1.1rem;
    }

    .subContenedor h2 {
        color: var(--colorAuxiliar);
        text-align: center;
    }

    .subContenedor ul li {
        font-family: var(--tipoLetraParrafo);
        color: white;
        font-size: 1.1rem;
    }

.inicioImgEquipo {
    width: 7.5rem;
    border-radius: 50%;
}
/*con background transparente*/
.subContenedor.colorSecundario {
    --colorAuxiliar: var(--colorSecundario);
}

.subContenedor.colorTerciario {
    --colorAuxiliar: var(--colorTerciario);
}

/*background solido segun color*/
.subContenedor.colorSecundarioBG {
    --colorAuxiliar: white;
    --colorBgAuxiliar: var(--colorSecundario);
    height: 23rem;
    margin: 1rem 2rem;
}

.subContenedor.colorTerciarioBG {
    --colorAuxiliar: white;
    --colorBgAuxiliar: var(--colorTerciario);
}

/********************************** botones y estilos input *******************************/
input[type=text], input[type=password], textarea,  input[type=tel] {
    display: block;
    width: 17.5rem;
    padding: 0.2rem 0;
    border: 0;
    border-bottom: 0.0625rem solid #555555;
    
    background-color: transparent;
    font-size: 0.9rem;
    font-family: var(--tipoLetraTitulo);
    letter-spacing: 0.0625rem;
    margin-bottom: 0.5rem;
    color: #555555;
}

/* botones  colorAuxiliar para encapsulamiento el btncoloPrimario esta por default :) */
 
input[type="submit"], .btnImportar1 {
    color: var(--colorAuxiliar);
    font-size: 1.2rem;
    font-weight: 500;
    background-color: transparent;
    border: 0.1rem solid var(--colorAuxiliar);
    border-radius: 1rem;
    padding: 0.3rem 1.6rem;
    margin: 0.2rem;
    display: inline-block;
    transition: 500ms box-shadow;
    cursor: pointer;
    min-width: 8rem;
}

    input[type="submit"]:hover, input[type="submit"]:focus {
        color: white;
        box-shadow: -0.25rem -0.25rem 0 2rem var(--colorAuxiliar) inset;
    }

    input[type="submit"]:disabled, input[type="submit"]:disabled:hover {
        background: gray;
        color: white;
        cursor: none;
    }

    input[type="submit"].btnColorSecundario {
        --colorAuxiliar: var(--colorSecundario);
    }

    input[type="submit"].btnColorTerciario {
        --colorAuxiliar: var(--colorTerciario);
    }

    input[type="submit"].btnBlanco {
        --colorAuxiliar: white;
    }

        input[type="submit"].btnBlanco:hover {
            color: var(--colorPrimario);
        }

/*para validadores*/
.validadoresColor {
    color: #ed0707;
}
/*fileupload*/
input[type="file"] {
    Width: 135px;
    display: inline;
    border: none;
    font-size:0.7rem;
    color:transparent;/*Es el textbox*/
}
/********************************** ventana modal *******************************/
.ventanaModal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
    background-color: rgba(0,0,0,0.8);
    pointer-events: none;
    z-index: 20;
    opacity: 0;
    -webkit-transition: opacity 500ms ease-in-out;
    -moz-transition: opacity 500ms ease-in-out;
    transition: opacity 500ms ease-in-out;
}

    .ventanaModal:target {
        opacity: 1;
        pointer-events: auto;
    }

    .ventanaModal > div {
        border-radius: 0.625rem;
        background: #fff;
        padding: 2rem;
        position: relative;
        top: 5%;
        left: 1%;
        width: 30%;
        min-height: 12.5rem; /*300*/
        margin: 10% auto;
        text-align: center;
    }

.cerrar {
    background: #075AAE;
    color: #FFFFFF;
    line-height: 1.56;
    position: absolute;
    right: -0.75rem;
    text-align: center;
    top: -0.625rem;
    width: 1.5rem;
    text-decoration: none;
    font-weight: bold;
    -webkit-border-radius: 0.75rem;
    -moz-border-radius: 0.75rem;
    border-radius: 0.75rem;
    -moz-box-shadow: 0.0625rem 0.0625rem 0.1875rem #000;
    -webkit-box-shadow: 0.0625rem 0.0625rem 0.1875rem #000;
    box-shadow: 0.0625rem 0.0625rem 0.1875rem #000;
}

    .cerrar:hover {
        background: #00d9ff;
    }

/********************************** LOGIN Y CREAR CUENTA *******************************/
/* body>bodyLOGINCrearCuenta>form*/
.bodyLOGINCrearCuenta {
    background: linear-gradient(248deg, rgba(55,85,110,0.8) 0%, rgba(63,57,80,0.8) 35%, rgba(55,85,110,0.8) 100%), url('../Imagenes/banner.jpg') no-repeat;
    background-size: cover;
    width: 100%!important;
}

.contenedorLogin {
    position: relative; /*para objetos internos:imagen, boton etc;*/
    margin: 10% auto;
    width: 28%;
    min-height: 25rem; 
    background-color: white;
    padding: 2rem 3rem 1rem 3rem;
    box-shadow: 0 0.3rem 1rem 0 rgba(0,0,0,0.24), 0 0.3rem 1.875rem 0 rgba(0,0,0,0.19);
    border-radius: 0 4.2rem 0 4.2rem;
}
 
.bodyLOGINCrearCuenta .logo {
    width: 40%;
    padding-left: 55%;
    padding-bottom: 0.5rem;
}

.labelLoginCrearCuentaMensaje {
    display: block;
    margin: 0.5rem;
    font-weight: 700;
}

.linkVolverLogin {
    font-size: 1.3rem !important;
    margin-left: -0.5rem;
    margin-top: -1rem;
    margin-bottom: 1rem;
    color: #555555;
    text-decoration: none !important;
}
/*button*/
.bodyLOGINCrearCuenta input[type="submit"] {
    float: right;
}

/*crear cuenta*/
.contenedorCrearCuenta {
    position: relative;
    margin: 2% auto;
    width: 28%;
    min-height: 38rem;
    padding: 2rem 3rem 1rem 3rem;
    background-color: white;
    box-shadow: 0 0.3rem 1rem 0 rgba(0,0,0,0.24), 0 0.3rem 1.875rem 0 rgba(0,0,0,0.19);
    border-radius: 0 4.2rem 0 4.2rem;
}

.contenedorListView {
    height: 25rem;
    width: 100%;
    margin: 0;
    padding: 0;
    overflow-y: AUTO;
}

.contenedorPlan {
    width: 90%;
    margin: .5rem auto;
    display: flex;
    flex-wrap: wrap;
    background-color: #efefef;
    transition: all ease-in-out 300ms;
}

    .contenedorPlan:hover {
        background-color: var(--colorPrimario);
        transform: scale(1.1);
    }

        .contenedorPlan:hover .subContenedorPlanPrecio,
        .contenedorPlan:hover .subContenedorPlanDescripcion {
            background-color: var(--colorPrimario);
      
        }
    
        .contenedorPlan:hover .descripcion {
            color: white;
        }

        .contenedorPlan:hover .planElegirLink {
            color: var(--colorSecundario);
            /**latido*/
            animation: pulse-black 1s infinite;
            -webkit-animation: pulse-black 2s infinite;
            -moz-animation: pulse-black 2s infinite;
        }
        .subContenedorPlanPrecio {
            width: 34%;
            justify-content: center;
            padding: 0.5rem;
            background-color: var(--colorPrimario);
        }

    .subContenedorPlanPrecio .nombre {
        margin: 0 auto;
        font-size: 1.4rem;
        font-weight: 700;
        font-family: var(--tipoLetraTitulo);
        color: white;
    }

    .subContenedorPlanPrecio .precio {
        font-size: 1.2rem;
        font-weight: 700;
        padding: 0.5rem;
        font-family: var(--tipoLetraTitulo);
        color: white;
    }

    .subContenedorPlanPrecio .spanBs {
        font-size: 0.6rem;
        font-family: var(--tipoLetraTitulo);
        color: white;
        margin: 0 -0.3rem;
    }

.subContenedorPlanDescripcion {
    width: 42%;
    padding: 0.5rem;
}

    .subContenedorPlanDescripcion .descripcion {
        padding: 0.5rem;
        font-family: var(--tipoLetraTitulo);
        color: var(--colorPrimario);
        white-space: pre-line; /*para que no se salga del div*/
    }

.subContenedorPlanBoton {
    width: 6%;
    padding-top: 1.1rem;
}

    .subContenedorPlanBoton .planElegirLink {
        color: transparent;
    }

/********************************** Formularios *******************************/
/* dentro de body > form > estan los formularios :2 divs: 1 formulario y otro el listado*/
.contenedorFormulario {
    padding: 1rem 1rem 1rem 3rem;
    margin-bottom: 1rem; /*responsive*/
    margin-left: 1rem;
    display: inline;
    width: 28%;
}

    .contenedorFormulario a {
        text-align: right;
    }

.contenedorGrilla {
    padding: 1rem;
  /*  width: 60%;*/
    display: inline;
    width: 100%;
}

.criterioBuscador {
    width: 9.375rem !important;
    display: inline-block !important;
}

.btnBuscarLupa {
    color: white !important;
    background-color: var(--colorPrimario);
    border-radius: 50%;
    padding: 0.4rem 0.5rem;
    transition: transform 600ms;
}

    .btnBuscarLupa:hover {
        transform: rotate(360deg) scale(1.2);
        text-decoration: none;
    }

/*Grilla Listado*/
.grilla {
    max-width: 98%;
    height: auto;
    border: 0.0625rem solid rgb(204, 204, 204);
}

    .grilla th {
        color: white;
        padding: 0.5rem 0.3rem;
        background-color: var(--colorPrimario);
        height: 2rem;
        font-family: var(--tipoLetraTitulo);
        font-size: 0.95rem;
        text-align: center;
    }

        .grilla th a {
            color: white;
            text-decoration: underline;
            font-weight: 700;
        }
    /*Row*/
    .grilla td {
        padding: 0.3rem;
        border: none;
        word-break: break-word;
        max-width: 12.5rem;
        font-size: 0.9rem;
    }

        .grilla td a {
            color: rgb(204, 204, 204);
            font-size: 1rem;
            text-decoration: none;
            transition: all 200ms ease-in-out;
        }

            .grilla td a:hover {
                font-size: 1.5rem;
                color: var(--colorPrimario);
                text-decoration: none;
            }

.grillaAlternateRow {
    background-color: var(--colorTerciario);
}

    .grilla tr:hover, .grillaAlternateRow:hover {
        background-color: var(--colorSecundario);
    }
/*paginacion*/
.grillaPaginacion {
    height: 1.5rem;
    border: 0.0625rem solid rgb(204, 204, 204);
}

    .grillaPaginacion a {
        font-size: 1.2rem;
        font-weight: 400;
        color: black;
    }

        .grillaPaginacion a:hover {
            color: black;
            font-size: 1.5rem;
        }

/*******************************Controles Usuario uno a muchos*******************************/
.ContenedorAsignaciones {
    margin-left: 5%;
}

.divRelacionUnoMuchos {
    padding: 0.7em;
    display: flex;
    flex-wrap: wrap;
}

.divBotonesUnoMuchos {
    padding: 2rem;
}

.btnUnoMuchos {
    min-width: 1rem !important; /*reseteo de min width*/
    width: 2.5rem !important; /*ahora si funciona*/
    padding: 0.5rem !important;
}

/*********************************** Pagina de boletines ************************************/
.contenedorBoletines {
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
    margin: 0 2.5rem;
    max-width: 99%;
}

.divLista {
    width: 70%; /*listview 70% y buscador 28% */
    display: inline block;
    margin-bottom: 1rem;
}
/*el id es divUltimoBoletin y #divUltimoBoletinIndicadores pero no lee asi :( */
#Cuerpo_divUltimoBoletin, #Cuerpo_divUltimoBoletinIndicadores {
    vertical-align: middle;
    height: 22rem; /*300px;*/
    width: 22rem;
    position: relative;
    padding: 1rem 1rem;
    margin: 0 1rem 0 0;
    border-radius: 1rem;
    text-align: center;
    cursor: pointer;
}

.divLista .colorSecundarioBG {
    width: 10rem;
    height: 10rem;
}

.divLista .colorTerciarioBG {
    width: 10rem;
    height: 10rem;
}

.imgUltimoBoletin {
    all: unset;
    width: 11.875rem; /*190px*/
    height: 10rem;
    margin: -9.1rem;
    box-shadow: 0 0 0.25rem 0.25rem white inset;
    object-fit: cover;
}

.itemListaBoletin {
    box-sizing: border-box;
    vertical-align: top;
    padding: 1rem;
    margin-right: 0.5rem;
    border: 0.0625rem solid var(--colorPrimario);
    border-radius: 0.5rem;
    /*border-radius:50%;*/
    width: 16rem;
    height: 16rem;
    overflow-y: auto;
    font-size: 0.8rem;
    color: rgb(89, 89, 89);
}

    .itemListaBoletin p {
        font-size: 1rem;
    }

.divItemLista {
    top: 0 !important;
}

.resumenBoletin {
    width: 100%;
    font-size: 1rem;
}

.tituloBoletin {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--colorPrimario);
}

.listaLnkMas {
    text-decoration: none;
    color: var(--colorPrimario);
    font-size: 1rem;
}
/***Buscador*/
.divBuscadorContenedor {
    width: 28%;
    display: inline block;
    min-width: 17rem;
}

.divBuscadorItem {
    display: block;
    background-color: whitesmoke;
    padding: 1rem;
    overflow-x: hidden;
    /* se dio que un titulo sobrepasa el div
        pero ninguno de los dos comandos de abajo funcionan

    word-break: break-word;
    white-space: pre-line;*/
}
    /*tamano treview item*/
    .divBuscadorItem a {
        font-size: 1.2rem;
        color: var(--colorPrimario);
        /*nombre de meses*/
        text-transform: capitalize;
    }

.divTituloListaBOLETIN {
    box-sizing: border-box;
    background-color: var(--colorPrimario);
    /*   padding: 3.5rem;*/
    /*   margin: 2rem .2rem;*/
    transition: all 500ms ease-in;
    opacity: 0.86;
    border-radius: 1.25rem; /* arriba curva, abajo recto 50% 50% 0 0*/
    margin: 0.5rem;
    padding: 1rem;
    width: 99%;
    color: white;
}
.divListaItemsBOLETIN {
    margin-left: 2.5rem;
    margin-top:1rem;
}

.imgFotoSuscriptor {
    width: 40px;
    height: 40px;
    margin: 2px;
    border-radius: 50%;
    object-fit: cover;
}
/*********************************** Pagina de Boletins Detalle ************************************/
.divBoletinDetalle {
    margin-left: 5%;
}

.contenidoDetalle {
    color: var(--colorPrimario);
    text-align: left;
    font-size: 1.2rem;
    font-family: var(--tipoLetraParrafo);
}

.gridViewBoletinDetalle {
    width: 90%;
}

    .gridViewBoletinDetalle tr {
        --colorAuxiliar: var(--colorTerciario);
        color: var(--colorAuxiliar);
    }

        .gridViewBoletinDetalle tr:nth-child(1n) {
            --colorAuxiliar: var(--colorTerciario);
        }

        .gridViewBoletinDetalle tr:nth-child(2n) {
            --colorAuxiliar: var(--colorSecundario);
        }

        .gridViewBoletinDetalle tr:nth-child(3n) {
            --colorAuxiliar: var(--colorPrimario);
        }

.informacionDetalle {
    display: block;
    padding: 1rem 0;
}

.lnkBoletinDetalle {
    text-decoration: underline;
}

.videoDetalle {
    width: 15%;
    padding: 4rem;
    background-color: var(--colorAuxiliar);
    color: white;
    margin-left: 15%;
    border-radius: 1rem;
}

    .videoDetalle .fa-video-camera {
        color: white;
    }

.tituloBoletinDetalle {
    padding: 1rem;
    font-size: 1.2rem;
    background-color: var(--colorAuxiliar);
    color: white;
    width: 80%;
}

.pnlComentariosBoletin {
    color: rgb(41,41,41);
    padding: 0.5rem;
    font-family: var(--tipoLetraParrafo);
    width: 40%;
}

.grillaComentario {
    width: 80%;
}

.grillaComentarioItem {
    padding: 0.5rem;
    margin: 0.1rem;
    color: rgb(41,41,41);
    background-color: whitesmoke;
    border-radius: 0.5rem;
}

.formComentario {
    width: 50%;
    padding: 0.5em;
    font-family: Open Sans, sans-serif;
}
/*********************************** Pagos ************************************/
.divGestionPagos {
    width: 100%;
    padding-left: 6rem;
}
/*********************************** mensajeria ************************************/
.contenedorMensajeria {
    padding: 1rem 1rem 1rem 3rem;
    margin-bottom: 1rem; /*responsive*/
    margin-left: 1rem;
    display: inline;
    width: 20%;
}

    .contenedorMensajeria a {
        text-align: right;
    }
.contenedorMensajeriaGrilla {
    padding: 1rem;
    width: 70%;
    display: inline;
}
/*********************************** Pagina de indicadores ************************************/
.contenedorIndicadores {
    width: 80%;
    padding: 0.5rem;
}

/*********************************** RESPONSIVE ************************************/
/*Responsive pagina de inicio*/
@media screen and (max-width: 800px) {
    /*site.master*/
    .divMenu {
        padding-top: 0.3rem;
        margin-left: 0.5rem;
    }
    /*Responsive pagina de inicio*/
    .subContenedor {
        --anchoVariable: 70%;
    }
    /*pagina Login*/
    .bodyLOGINCrearCuenta {
        background: white; /*no background-color*/
    }
        .bodyLOGINCrearCuenta .logo {
        width:45%;
        }
    .contenedorLogin, .contenedorCrearCuenta {
        width: 86%;
        box-shadow: none;
        padding: 0.5rem;
        margin: 0rem;
    }
    }
    /*formularios*/
    .contenedorFormulario, .contenedorGrilla {
        padding: 0;
        margin: 0.5rem;
        display: inline;
        width: 90%;
    }
  
    /*ver boletines*/
    .divLista {
        width: 90%;
    }

    .divListaItemsBOLETIN {
        padding: 0;
        margin : 0.5rem;
    }

    .divBuscadorContenedor {
        width: 90%;
    }
    /*Pagos*/
    .divGestionPagos {
        padding-left: 1rem;
    }
    /*mensajeria*/
    .contenedorMensajeria {
        width: 90%;
        padding: 0.5rem;
    }
    /*indicadores*/
    .contenedorIndicadores {
        width: 90%;
        padding: 0.5rem;
    }
    .ventanaModal > div {

        padding: 1rem;
        width: 50%;
    }



@media screen and (max-width:420px) {
/*celulares mas peques medida    iphone 5/se 320   568 */ 
    .responsiveTam {
        display: none;
    }
    .subContenedor.colorSecundarioBG {
        margin:0.2rem;    }
    }

/*adicionado 10/05/2023 --ojo esta era la ultima version encontrada pero
    no parece ser la utlima
*/
/*fuente https://www.florin-pop.com/blog/2019/03/css-pulse-effect/ */
@keyframes pulse-black {
    0% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.7);
    }

    70% {
        transform: scale(1);
        box-shadow: 0 0 0 10px rgba(0, 0, 0, 0);
    }

    100% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
    }
}