@charset "utf-8";
    /* Degredado lineal de arriba hacia abajo 
    background:-webkit-linear-gradient(top, rgb(0,0,0), rgb(43, 43, 43));
    */
    /* Degredado radial de arriba hacia abajo
    background:-webkit-radial-gradient(red, green, blue, white);
    */
    
    

    @media (max-height:1200px) {
        :root {
            --cuerpo-alto: 800px; /*830px; con pie de pagina */
            --ventana-datos-alto: 720px;
            --ventana-datos-alto2: 670px;
            --ventana-datos-alto3: 630px;
            --ventana-tabular-alto: 790px;
            --ventana-noticia-alto: 760px;
            
            --ventana-grafica-alto: 720px;
            --ventana-grafica-alto2: 600px;

            --caja-ventana-ancho: 1400px;
            --caja-ventana-alto: 850px;
            --caja-ventana-msg-ancho: 1300px;
            --caja-ventana-msg-alto: 750px;
            --caja-ventana-contenido-ancho: 1300px;
            --caja-ventana-contenido-alto: 740px;

            --caja-actividad-alto:700px;
            --caja-actividad-ancho:900px;

            --carrusel-alto: 650px;
            --carrusel-ancho: 630px;
        }
    }
        
    @media (max-height:768px) {
        :root {
            --cuerpo-alto: 500px; /*530px; con pie de pagina */
            --ventana-datos-alto: 440px;
            --ventana-datos-alto2: 380px;
            --ventana-datos-alto3: 330px;
            --ventana-tabular-alto: 480px;
            --ventana-noticia-alto: 460px;
            
            --ventana-grafica-alto: 440px;
            --ventana-grafica-alto2: 380px;

            --caja-ventana-ancho: 1000px;
            --caja-ventana-alto: 600px;
            --caja-ventana-msg-ancho: 900px;
            --caja-ventana-msg-alto: 500px;
            --caja-ventana-contenido-ancho: 950px;
            --caja-ventana-contenido-alto: 500px;

            --caja-actividad-alto:500px;
            --caja-actividad-ancho:800px;

            --carrusel-alto: 530px;
            --carrusel-ancho: 550px;
        }
    }
   

:root {
    /* Página en General */
        --pagina-imagenfondo: url(../imagenes/fondo/azulado.jpg);
        --pagina-colorfondo: rgb(34, 34, 34, 0);
        --pagina-letracolor: rgb(255, 255, 255);
        --pagina-letratamaño: 22px;
        --pagina-letratipo: Verdana, Geneva, Tahoma, sans-serif;
        --pagina-tranparente: 1;
    /* Membrete */

        /* Titulo */
        --titulo-colorfondo: rgb(34, 34, 34, 0.5);
        --titulo-letracolor: rgb(255, 255, 255);
        --titulo-letratamaño: 28px;
        --titulo-linea-alto: 44px;
        --titulo-letratipo: cursive;
        --titulo-margen-izq: 10px;
        /* Titulo descripcion  */
        --titulo2-margen-1zq: 10px;
        --titulo2-letratipo: Arial, Helvetica, sans-serif;
        --titulo2-letratamaño: 14px;
        --titulo2-linea-alto: 14px;
        --titulo2-letracolor:rgb(255, 255, 255);        
        /* Fecha  */
        --fecha-margen-1zq: 10px;
        --fecha-letratipo: Arial, Helvetica, sans-serif;
        --fecha-letratamaño: 14px;
        --fecha-linea-alto: 18px;
        --fecha-letracolor:rgb(255, 255, 255);    

    /* Cuerpo de la Página */

        /* cuerpo */
        --cuerpo-colorfondo: rgb(255, 255, 255);
        --cuerpo-letracolor: rgb(34, 34, 34);
        --cuerpo-letratamaño: 14px;
        --cuerpo-linea-alto: 16px;
        --cuerpo-letratipo: Arial, Helvetica, sans-serif;

        /* Sub Titulo */
        --subtitulo-colorfondo:rgb(0, 102, 255);
        --subtitulo-color: rgb(255, 255, 255);
        --subtitulo-ancho: 100%;
        --subtitulo-centro: center;
        --subtitulo-borde-radio: 10px;
        --subtitulo-letratipo: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif; 
        --subtitulo-letratamaño: 18px;
        --subtitulo-linea-alto: 22px;

        /* carrusel */
        --carrusel-color: rgb(255, 255, 255);

         /*  Noticia */
         --noticia-color: rgb(0, 0, 0);
         --noticia-colorfondo: rgba(44, 43, 51, 0.5);
         --noticia-titulo-color:rgb(255, 255, 255);
         --noticia-titulo-colorfondo:rgba(44, 43, 51, 0.5);
         --noticia-subtituto-colorfondo: rgba(17, 17, 20, 0.5);
         --noticia-subtituto-color: rgb(255, 255, 255);
         --noticia-mensaje-colorfondo: rgba(17, 17, 20, 0.5);
         --noticia-mensaje-color: rgb(255, 255, 255);
         --noticia-nro-colorfondo: rgb(34, 34, 34);
         --noticia-nro-color: rgb(255, 255, 255);

    /* Mini ventana (mini win) */

        /* cuerpo */
        --miniwin-colorfondo: rgb(255, 255, 255);
        --miniwin-letracolor: rgb(0, 0, 0);
        --miniwin-letratamaño: 14px;
        --miniwin-linea-alto: 16px;
        --miniwin-letratipo: Arial, Helvetica, sans-serif;

        /* Sub Titulo */
        --miniwin-subtitulo-colorfondo:rgb(0, 102, 255);
        --miniwin-subtitulo-color: rgb(255, 255, 255);
        --miniwin-subtitulo-ancho: 100%;
        --miniwin-subtitulo-centro: center;
        --miniwin-subtitulo-borde-radio: 10px;
        --miniwin-subtitulo-letratipo: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
        --miniwin-subtitulo-letratamaño: 18px;
        --miniwin-subtitulo-linea-alto: 22px;


    /* Formulario */
        
        /* Boton */
        --boton-color: rgb(0, 0, 0);
        --boton-fondo: rgb(255, 255, 255);
        --boton-borde: rgb(0, 0, 0);
        --boton-sel-color: rgb(0, 0, 0);
        --boton-sel-fondo: rgb(0, 100, 255);
        --boton-sel-borde: rgb(0, 170, 255);

        /* link */
        --link-letratipo: Arial, Helvetica, sans-serif;
        --link-color: rgb(0, 0, 0);
        --link-fondo: transparent;
        --link-hover-color: rgb(2, 75, 0);
        --link-hover-fondo: transparent;
        --link-sel-color: rgb(0, 39, 39);

    /*  Tabla */
        --tabla-fondo: transparent;
        --tabla-color: white;
        --tabla-titulo-fondo: rgb(13, 0, 129);
        --tabla-titulo-color: white;
        --tabla-fila1-fondo: rgb(255, 255, 255);
        --tabla-fila1-color: rgb(0, 0, 0);
        --tabla-fila2-fondo: rgb(208, 255, 209) ;
        --tabla-fila2-color: rgb(0, 0, 0);
        --tabla-fila-hover-fondo: rgba(0, 4, 255, 0.315);
        --tabla-fila-hover-color: rgb(0, 0, 0);
        --tabla-celda-link-fondo: transparent;
        --tabla-celda-link-color: rgb(56, 0, 0);

    /*  Pie de página */
        --pie-letratipo: Verdana, Geneva, Tahoma, sans-serif;
        --pie-letratamaño: 14px;
        --pie-color: rgb(255, 255, 255);
        --pie-fondo: rgb(34, 34, 34, 0.5);

    /* Menu */
        --menu-principal-letratipo: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        --menu-principal-letratamaño: 14px;
        --menu-principal-color: rgb(209, 209, 209);
        --menu-principal-fondo: transparent;
        --menu-principal-hover-color: white;
        --menu-principal-hover-fondo: transparent;

        --menu-secundario-fondo: rgb(255, 255, 255);
        --menu-secundario-color: rgb(0, 0, 0);
        --menu-secundario-letratipo: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        --menu-secundario-letratamaño: 14px;
        --menu-secundario-hover-fondo: rgb(4, 0, 255);
        --menu-secundario-hover-color: rgb(255, 255, 255);

        --menu-separador: black;

    /* Mini Mensaje - Alerta - Aviso */
        --alerta-fondo: rgb(84, 84, 84);;
        --alerta-color: rgb(255, 255, 255);

        --alerta-mensaje-fondo: rgb(44, 44, 44);;
        --alerta-mensaje-color: rgb(255, 255, 255);

    /* Esperar */
	    --esperar-fondo: rgba(0, 0, 0, 0.7);
        --esperar-ventana-fondo: rgb(255, 255, 255);
        --esperar-ventana-color: #000000;
        --esperar-ventana-letratipo: 'Times New Roman', Times, serif;
        --esperar-ventana-letratamaño: 16px;
        --esperar-mensaje-letratipo: Arial, Helvetica, sans-serif;
        --esperar-mensaje-letratamaño: 18px; 
        --esperar-mensaje-fondo: transparent;
        --esperar-mensaje-color: #000000; 
        --esperar-subtitulo-colorfondo:rgb(0, 102, 255);
        --esperar-subtitulo-color: rgb(255, 255, 255);
        --esperar-subtitulo-ancho: 100%;
        --esperar-subtitulo-centro: center;
        --esperar-subtitulo-borde-radio: 10px;
        --esperar-subtitulo-letratipo: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
        --esperar-subtitulo-letratamaño: 18px;
        --esperar-subtitulo-linea-alto: 22px;

    /* MsgBox */
	    --msgbox-fondo: rgba(0, 0, 0, 0.7);
        --msgbox-ventana-mensaje-fondo: rgb(255, 255, 255);
        --msgbox-ventana-mensaje-color: #000000;
        --msgbox-ventana-mensaje-letratipo: 'Times New Roman', Times, serif;
        --msgbox-ventana-mensaje-letratamaño: 16px;
        --msgbox-mensaje-letratipo: 'Times New Roman', Times, serif;
        --msgbox-mensaje-letratamaño: 18px; 
        --msgbox-mensaje-fondo: transparent;
        --msgbox-mensaje-color: #000000; 

}

/* evitar la selección y el resaltado */
*{
    user-select: none;
}
*::selection {
    background: none;
}
*::-moz-selection {
    background: none;
}

/*
.puedeseleccionar {
    -moz-user-select: auto;
    -webkit-user-select: auto;
    -ms-user-select: auto;
    user-select: auto;
  }
*/
/* ----------------------- Página -------------------------------------*/
.pagina {
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
    opacity: var(--pagina-tranparente);
    background-color:var(--pagina-colorfondo);
    background-image: var(--pagina-imagenfondo);
    background-repeat: no-repeat; 
    background-attachment: fixed;
    background-size: cover;
    font-family: var(--pagina-letratipo);
    font-size: var(--pagina-letratamaño);
    color: var(--pagina-letracolor);
    font-weight: 1px;
    color:white
}

/* ----------------------- Carrusel -------------------------------------*/
.carrusel-cuerpo {
    width: var(--carrusel-ancho);
    height: var(--carrusel-alto);
    padding: 10px 60px 10px 65px;
    color: var(--carrusel-color);
}

/* ----------------------- Encabezado -------------------------------------*/
.encabezado-ventana {
    background-color: var(--titulo-colorfondo);
}

.encabezado-ventana .titulo {
    font-family:var(--titulo-letratipo);
    /*margin-left: var(--titulo-margen-izq);*/
    font-size: var(--titulo-letratamaño);
    line-height: var(--titulo-linea-alto);
    color: var(--titulo-letracolor);
}

.encabezado-ventana .subtitulo {
    margin-left: var(--titulo2-margen-1zq);
    font-family: var(--titulo2-letratipo);
    font-size: var(--titulo2-letratamaño);
    line-height: var(--titulo2-linea-alto);
    color: var(--titulo2-letracolor);
}

.fecha {
    margin-left: var(--fecha-margen-1zq);
    font-family: var(--fecha-letratipo);
    font-size: var(--fecha-letratamaño);
    line-height: var(--fecha-linea-alto);
    color: var(--fecha-letracolor);
}

/* ----------------------- Cuerpo -------------------------------------*/
.cuerpo-ventana {
    overflow: hidden;
    height: var(--cuerpo-alto);
    background-color: var(--cuerpo-colorfondo);
    color: var(--cuerpo-letracolor);
    font-size: var(--cuerpo-letratamaño);
    line-height: var(--cuerpo-linea-alto);
    font-family: var(--cuerpo-letratipo);
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px; 
}

.subtitulo {
    font-family: var(--subtitulo-letratipo);
    background-color:var(--subtitulo-colorfondo);
    color: var(--subtitulo-color);
    width: var(--subtitulo-ancho);
    font-size: var(--subtitulo-letratamaño);
    line-height: var(--subtitulo-linea-alto);
    text-align: var(--subtitulo-centro);
    border-radius: var(--subtitulo-borde-radio);
}

/* ----------------------- mini ventana izquierda (Mini win)----------------------------------*/
.miniwin-ventana {
    height: var(--miniwin-alto);
    background-color: var(--miniwin-colorfondo);
    color: var(--miniwin-letracolor);
    font-size: var(--miniwin-letratamaño); 
    line-height: var(--miniwin-linea-alto);
    font-family: var(--miniwin-letratipo);
    /* height: 525px; */
}

.miniwin-ventana .subtitulo {
    font-family: var(--miniwin-subtitulo-letratipo);
    background-color:var(--miniwin-subtitulo-colorfondo);
    color: var(--miniwin-subtitulo-color);
    width: var(--miniwin-subtitulo-ancho);
    font-size: var(--miniwin-subtitulo-letratamaño);
    line-height: var(--miniwin-subtitulo-linea-alto);
    text-align: var(--miniwin-subtitulo-centro);
    border-radius: var(--miniwin-subtitulo-borde-radio);
}

/* ----------------------- Noticias -------------------------------------*/
.noticia-ventana {
    padding-left: 20px;
    padding-right: 20px;
    height: var(--ventana-noticia-alto);
    padding: 10px, 10px, 10px, 10px;
    font-family: var(--subtitulo-letratipo);
    background-color: var(--noticia-colorfondo);
    color: var(--noticia-color);
    font-size: 20px;
    line-height: 22px;
    text-align:left;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    overflow: auto;
}

.noticia-titulo {
    padding-left: 10px;
    height: 60px;
    background-color: var(--noticia-titulo-colorfondo);
    color: var(--noticia-titulo-color);
    font-size: 24px;
    line-height: 50px;
    font-family:'Courier New', Courier, monospace;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

.noticia-informacion-subtitulo {
    padding-left: 10px;
    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: var(--noticia-subtituto-colorfondo);
    color: var(--noticia-subtituto-color);
    width: 100%;
    font-size: 18px;
    line-height: 20px;
    text-align: left;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

.noticia-informacion-mensaje {
    padding-left: 40px;
    font-family:'Times New Roman', Times, serif;
    background-color: var(--noticia-mensaje-colorfondo);
    color: var(--noticia-mensaje-color);
    width: 100%;
    font-size: 16px;
    line-height: 18px;
    text-align: left;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;;
}



/* ---------------------- Vantana de datos ----------------------*/

.ventana-datos-tabular{
    height: var(--ventana-tabular-alto);
    overflow: auto;
}

.ventana-datos{
    height: var(--ventana-datos-alto);
    overflow: auto;
}

.ventana-datos2{
    height: var(--ventana-datos-alto2);
    overflow: auto;
;
}

.ventana-datos3{
    height: var(--ventana-datos-alto3);
    overflow: auto;
}

.ventana-noticia{
    height: var(--ventana-noticia-alto);
    overflow: auto;
}

.ventana-nomina{
    float:left; 
    background-color:transparent; 
    color:white; 
    padding-left: 5px; 
    padding-right: 5px; 
    padding-top: 5px; 
    padding-bottom: 5px; 
    border-radius: 5px; 
    height:var(--ventana-datos-alto); 
    overflow: auto;
}

.ventana-grafica{
    height: var(--ventana-grafica-alto);
}

.ventana-grafica-2{
    height: var(--ventana-grafica-alto2);
}

.caja-actividad{
    float:left; 
    background-color:#FFFFFF; 
    width:var(--caja-actividad-ancho); 
    height:var(--caja-actividad-alto); 
    margin-left:10px;
}

/* ----------------------- Tablas --------------------------------*/
.borde-inferior{
    border-collapse: collapse;
    border-bottom: solid;
    border-top: none;
    border-left: none;
    border-right: none;
    border-width: 1px;
}

.borde-completo{
    border-collapse: collapse;
    border-style: solid;
    border-width: 1px;
}

.tabla-contenedor {
    overflow-y: auto; /* Permite desplazamiento vertical */
    width:100%;
    height:100%;
}

.tabla {
	background-color: var(--tabla-fondo);
    color: var(--tabla-color);
	border-spacing: 1px;
}

.tabla thead {
    text-align: center;
    background-color: var(--tabla-titulo-fondo);
    color: var(--tabla-titulo-color);
    position: sticky;
    top: 0;
    /*z-index: 1;  Asegura que el encabezado esté por encima del contenido */
}

.tabla tbody tr:nth-child(even) {
    background-color: var(--tabla-fila1-fondo);
    color: var(--tabla-fila1-color);
}

.tabla tbody tr:nth-child(odd) {
    background-color: var(--tabla-fila2-fondo);
    color: var(--tabla-fila2-color);
}

.tabla tbody tr:hover {
	background-color: var(--tabla-fila-hover-fondo);
    color: var(--tabla-fila-hover-color);
	/* cursor: pointer; */
}
/*
.tabla tr.fila {
    background-color: var(--tabla-fila1-fondo);
    color: var(--tabla-fila1-color);
}
*/
.tabla a {
    background-color: var(--tabla-celda-link-fondo);
    color: var(--tabla-celda-link-color);
}

/* ----------------------- Pie -------------------------------------*/
.pie-ventana {
    /*height: 40px;*/
    font-family: var(--pie-letratipo);
    font-size: var(--pie-letratamaño);
    color:var(--pie-color);
    background-color: var(--pie-fondo);
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px; 
}

/* =========================  Menu ================================= */
.opcion-principal {
    font-family: var(--menu-principal-letratipo);
    font-size: var(--menu-principal-letratamaño);
    margin-left:20px;
    color: var(--menu-principal-color);
    background-color: var(--menu-principal-fondo);
}

.opcion-principal:hover {
    color: var(--menu-principal-hover-color);
    background-color: var(--menu-principal-hover-fondo);
}

.submenu {
    background-color: var(--menu-secundario-fondo);
}

.opcion-secundaria {
    font-family: var(--menu-secundario-letratipo);
    font-size: var(--menu-secundario-letratamaño);
    color: var(--menu-secundario-color);
}

.opcion-secundaria:hover {
    background-color: var(--menu-secundario-hover-fondo);
    color: var(--menu-secundario-hover-color);
}

.opcion-separador {
    background-color: var(--menu-separador);
}
/* ========================= Formulario ============================ */

  /* styling of Input */
  .texto {
    background-color: rgb(225, 214, 255);
    border-width: 0 0 1px 0;
    border-color: rgb(0, 0, 0);
    color: rgb(0, 0, 0);
    font-size: 0.9rem;
    width: 100%;
    box-sizing: border-box;
    padding-inline: 0.5em;
    padding-block: 0.7em;
  }
  /* styling of animated border */
   /* Hover on Input */
.texto:hover {
    background:rgb(255, 255, 255);
    color: #000000;
}
   
.texto:focus {
    background-color: #ffffff;
    color: #000000;
    border-color: blue;
    outline: none;
    transform:scaleX(1.05) scaleY(1.05);
}
   /* here is code of animated border */
.texto:focus ~ .input-border {
    width: 100%;
}

.boton {
    text-decoration: none;
    text-align: center;
    margin-top: 5px;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 15px;
    padding-right: 15px;
    border-style: solid;
    border-radius: 10px;
    border-color: var(--boton-borde);
    border-width: 2px;
    font-size: 14px;
    background-color: var(--boton-fondo);
    color: var(--boton-color);
    cursor: pointer;
}

.boton:hover {
    border-color:var(--boton-sel-borde);
    background-color: var(--boton-sel-fondo);
    color: var(--boton-sel-color);
    cursor: pointer;    
}

.botonico {
    background-color: #e0e0e0;
    box-shadow: inset 4px 4px 10px #bcbcbc, inset -4px -4px 10px #ffffff;
    color: #4d4d4d;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.2s ease-in-out;
    border: 1px solid rgb(206, 206, 206);
    border-radius: 10px;
    text-align: center;
  }
  
  .botonico:hover {
    background-color: #ffffff;
    cursor: pointer;
    transform: scaleX(1.2) scaleY(1.2);
  }
  
.link {
    outline: none;
    text-decoration: none;
    padding: 2px 1px 0;
    font-family: var(--link-letratipo);
    font-size: 16px;
    color: var(--link-color);
    background-color: var(--link-fondo);
    border-bottom: 1px solid;
}

.link:hover {
    color: var(--link-hover-color);    
    border-bottom: 1px solid;
    background: var(--link-hover-fondo);
    cursor: pointer;
}

.link:visited {
    color: var(--link-hover-color);    
    border-bottom: 1px solid;
    background: var(--link-hover-fondo);
}

.seleccion {
    text-decoration: none;
    font-family:Arial, Helvetica, sans-serif;
    font-size: 16px;
    border-radius: .3em;
    cursor: pointer;
}

/*
.seleccion::-ms-expand {
    display: none;
}
.seleccion:hover {
    background-color: rgb(187, 8, 8);
}

*/

.seleccion:focus {
    box-shadow: 0 0 1px 3px rgba(59, 153, 252, .7);
    box-shadow: 0 0 0 3px -moz-mac-focusring;
    color: rgb(0, 0, 0); 
    outline: none;
}

.seleccion option{
    background-color: rgb(255, 255, 255);
    font-weight:normal;
}

.seleccion classOfElementToColor:hover {background-color:red; color:black}
  
.seleccion option[selected] {
      background-color: orange;
}
  
   
/* ======================= Mini Mensaje ================= */
.alerta {
    background-color: var(--alerta-fondo);
    color: var(--alerta-color);
}

.alerta-mensaje {
    background-color: var(--alerta-mensaje-fondo);
    color: var(--alerta-mensaje-color);
}

/* ================== Ventana de Esperar ================ */
.esperar-ventana {
	background-color: var(--esperar-fondo);
	position: fixed;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	visibility: hidden;
	/* opacity: 0; */
}

.esperar-ventana.activo{
	visibility: visible;
}

.esperar-cuerpo {
    /*box-shadow: 0px, 0px, 5px, 0px rgb(0, 0, 0, 0.5);*/
    Width:500px; 
    height:100px;
    background-color: var(--esperar-ventana-fondo);    
    font-family: var(--esperar-ventana-letratipo);
    font-size: var(--esperar-ventana-letratamaño);
	color: var(--esperar-ventana-color);
	border-radius: 3px;
	padding: 10px 20px 10px 20px;
	text-align: center;
	border-radius: 10px;	
    /* transition: .3s ease all; 
    animation-name:animacion_3;
	animation-duration:3s; */
}

.esperar-mensaje {
    width:500px; 
    height:70px;
    font-family: var(--esperar-mensaje-letratipo);
    font-size: var(--esperar-mensaje-letratamaño);
	color: var(--esperar-mensaje-color);
    background-color: var(--esperar-mensaje-fondo);
	padding: 10px 20px 10px 20px;
}

.esperar-subtitulo {
    font-family: var(--esperar-subtitulo-letratipo);
    background-color: var(--esperar-subtitulo-colorfondo);
    color: var(--esperar-subtitulo-color);
    font-size: var(--esperar-subtitulo-letratamaño);
    line-height: var(--esperar-subtitulo-linea-alto);
    text-align: var(--esperar-subtitulo-centro);
    border-radius: var(--esperar-subtitulo-borde-radio);
}

/* ======================= MsgBox ======================= */
.caja-ventana {
	background-color: var(--msgbox-fondo);
	position: fixed;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	visibility: hidden;
	/* opacity: 0; */
}

.caja-ventana.activo{
	visibility: visible; 
}

.caja-ventana-mensaje {
    /*box-shadow: 0px, 0px, 5px, 0px rgb(0, 0, 0, 0.5);*/
    width: var(--caja-ventana-ancho);
    height: var(--caja-ventana-alto);
    background-color: var(--msgbox-ventana-mensaje-fondo);    
    font-family: var(--msgbox-ventana-mensaje-letratipo);
    font-size: var(--msgbox-ventana-mensaje-letratamaño);
	color: var(--msgbox-ventana-mensaje-color);
	border-radius: 3px;
	padding: 10px 10px 10px 10px;
	text-align: center;
	border-radius: 10px;	
    /*
    transition: .3s ease all; 
    animation-name:animacion_2;
	animation-duration:1s;
    */
}

@keyframes animacion_1 {
	0% {opacity:0;}
	100% {opacity:1;}
}

@keyframes animacion_2 {
	0% {transform: scale(0,0);}
	100% {transform: scale(1,1);}
}

@keyframes animacion_3 {
	0% {transform: rotate(90deg) scale(0);}
	100% {transform:rotate(0deg) scale(1);}	
}

.caja-mensaje {
    /*width: var(--caja-ventana-msg-ancho);
    height: var(--caja-ventana-msg-alto);*/
    font-family: var(--msgbox-mensaje-letratipo);
    font-size: var(--msgbox-mensaje-letratamaño);
	color: var(--msgbox-mensaje-color);
    background-color: var(--msgbox-mensaje-fondo);
	padding: 0px 10px 0px 5px;
}

.caja-ventana-mensaje-contenido {
    width: var(--caja-ventana-contenido-ancho);
    height: var(--caja-ventana-contenido-alto);
    float:left; 
    background-color:white; 
    margin-left:10px;
    padding: 0px 0px 10px 0px;
}

.caja-ventana-mensaje .subtitulo {
    font-family: var(--subtitulo-letratipo);
    background-color: var(--subtitulo-colorfondo);
    color: var(--subtitulo-color);
    font-size: var(--subtitulo-letratamaño);
    line-height: var(--subtitulo-linea-alto);
    text-align: var(--subtitulo-centro);
    border-radius: var(--subtitulo-borde-radio);
}

/* ================== Mensajes de Noticias ============*/
.noticias-titulo {
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    background-color:rgb(65, 65, 65);
    color:rgb(162, 255, 100);
    font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    font-size: 18px;
    width: 100%;
    padding: 5px 5px 5px 5px;
}

.noticias-mensaje {
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    background-color:rgb(88, 88, 88);
    color:rgb(255, 255, 255);
    font-family:'Courier New', Courier, monospace;
    font-size: 18px;
    width: 100%;
    padding: 10px 10px 10px 10px;
    margin-bottom: 10px;
}

.noticias-nro {
    background-color: var(--noticia-nro-colorfondo);
    color: var(--noticia-nro-color);
}

/* ========================= Otros ====================== */
.esquina-redonda-arriba {
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

.esquina-redonda-abajo {
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}

.esquina-redonda {
    border-radius: 10px 10px 10px 10px;
}

.medio-transparente {
    opacity: 0.9;
}

.margen-10 {
    margin: 10px 10px 10px 10px;
}

.margen-20 {
    margin: 20px 20px 20px 20px;
}

.parpadea10s {
	
	animation-name: parpadeo;
	animation-duration: 2s;
	animation-timing-function: linear;
	animation-iteration-count: 2; /*infinite;*/
  
	-webkit-animation-name:parpadeo;
	-webkit-animation-duration: 2s;
	-webkit-animation-timing-function: linear;
	-webkit-animation-iteration-count: 2;
  }

.parpadea {
	
	animation-name: parpadeo;
	animation-duration: 2s;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
  
	-webkit-animation-name:parpadeo;
	-webkit-animation-duration: 2s;
	-webkit-animation-timing-function: linear;
	-webkit-animation-iteration-count: infinite;
  }

  
  .mascara {
    mask-image: url(../../imagenes/fondo/claro2.png);
  }
  
  @-moz-keyframes parpadeo{  
	0% { opacity: 1.0; }
	50% { opacity: 0.0; }
	100% { opacity: 1.0; }
  }
  
  @-webkit-keyframes parpadeo {  
	0% { opacity: 1.0; }
	50% { opacity: 0.0; }
	 100% { opacity: 1.0; }
  }
  
  @keyframes parpadeo {  
	0% { opacity: 1.0; }
	50% { opacity: 0.0; }
	100% { opacity: 1.0; }
  }