/**
    * Modulo............: inicio.css
    * Ficheros:.........: 
    * Descripcion.......: Aspecto de la ventana acceso a la aplicación
    * Fecha Creacion....: 22/03/2024
    * Fecha Modificacion: 
    *
    * @copyright CopyRight(C)2024 Daniel Rosado
    * @author Daniel Rosado
*/

/*                            Cuerpo de la página                             */
*{
    margin:0px;
    padding:0px;
}
:root {
  /* Se define la variable y desde javascript (en rld_Conf.js) se modificará
      el valor de v de forma aleatoria para que se actualice la imagen */
  --ImagenConNumeroAleatorio: url("../img/fondoH.jpg?v=2");
}
body{
    background-image: var(--ImagenConNumeroAleatorio);
    background-attachment: fixed;
    background-position: center center;
    background-repeat:no-repeat;
    background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
}

.contenedor-body{
    position: fixed;
    top:91px;
    width: 100%;
    height: calc(100% - 141px);
    /*background-color: #ffffff;*/
    overflow-y: auto;
    font-family: Roboto;
    /*font-weight: bold;*/
    font-size: medium;
    text-align: left;
}

.MenuNav{
    position: fixed;
    width: 100%;
    height: 92px;
    background-color: #3d3b3b;
    box-shadow: 10px 5px 5px black;
}
/*******************  Se configura el aspecto de las tablas *******************/
/* Fondo de la tabla */
.table {
    background-color: rgb(255,255,255,0.93);
}
/* Se cambia el color de las filas alternandolas con el fondo de la tabla */
.table-striped tbody tr:nth-of-type(odd) {
    background-color: rgb(230, 230, 230,0.25); /*rgb(217, 235, 235);*/
  }
/* Se establece el color de la fila al pasar el ratón sobre ellas */
.table-hover tbody tr:hover {
    background-color: rgba(15, 200, 240, 0.5);
    color: rgb(112, 24, 78);
}
.CabeceraTabla{
    background-color: rgba(30, 100, 175, 1);
    color: rgb(230, 235, 240);
}
/** Fuentes  ******************************************************************/

.Texto{
    font-family: Roboto;
    text-align: justify;
    font-weight: 900;
    font-size: 12pt;
    color: blue;
}
.Texto2{
    font-family: Roboto;
    text-align: justify;
    font-weight: 900;
    font-size: 13px;
    color: #212121;
}
.Titulo{
    /*text-align: left;*/
    font-family: Marvel;
    font-weight: bolder;
    font-size:  xx-large;
    color: #000;
    margin-bottom: 20px;
}

.Subtitulo{
    /*text-align: left;*/
    font-family: Quicksand;
    font-weight:  bold;
    font-size: x-large;
    color: #51585e;
}

.Descripcion{
    font-family: Quicksand;
    font-weight:  bold;
    font-size: 16px;
    color: #303030;
}
.Comentario{
    text-align: left;
    font-family: sans-serif;
    font-size: 12px;
    color: #00a89c;
}

.Codigo{
    text-align:  left;
    font-family: "Spline Sans Mono";
    font-size: 12px;
    color: #00a89c;
}
.TituloCarrusel{
    text-align: left;
    color: white;
    font-size: medium;
}

.rldCursor{
    cursor: pointer;
}
/** FONDOS ********************************************************************/
.Fondo1T{
    padding-top: 100px;
    background-color: rgba(255,255,255,.80);
    padding-bottom: 100px;
}

.Fondo2T{
    padding-top: 100px;
    background-color: rgba(255,255,255,.70);
    padding-bottom: 100px;
}


/******************************************************************************/
.Footer{
    position: fixed;
    bottom: 0px;
    left:0px;
    width: 100vw; /*100% viewport width*/
    height:  50px;/*30vh; /*33% viewport height*/
    background-color: #012869;
    /*background-color: #1d1d1b;*/
}
    .AreaCopyRight{
        padding-top: 10px;
        color: #00a89c;
        float: left;
        width: 100%;
        text-align: center;
        float: left;
        font-size: small;
    }
    /****************************** E N L A C E S *****************************/
    .AreaCopyRight a:link{
        color: #e0e0e0e0;
        text-decoration:none;
        width: 100%;
    }
    .AreaCopyRight a:focus{
        color: #ffffff;
        text-decoration:none;
    }
    .AreaCopyRight a:visited{
        color: #e0e0e0;
        text-decoration:none;
    }
    .AreaCopyRight a:hover{
        color: #ffffff;
        font-weight: bold;
        text-decoration:none;
    }

/* Botones ********************************************************************/
.Boton_Azul{
    background-color: #0d4e9c;
    width: calc(50% - 20px);
    text-decoration: none;
    padding: 5px;
    font-weight: 300;
    font-size: 15px;
       /*calc(1em + 1vw);*/
    color: #ffffff;
    border-radius: 6px;
    border: 2px solid #00a89c;
    margin-bottom: 10px;
    margin-left:2px;
    margin-right:2px;
    cursor: pointer;
    transition-property: background-color, color;
    transition-duration: 1s;
    transition-timing-function: ease-out;
    -webkit-transition-property: background-color, color;
    -webkit-transition-duration: 1s;
    -o-transition-property: background-color, color;
    -o-transition-duration: 1s;
    
}
.Boton_Azul:hover{
    color: #1883ba;
    background-color: #ffffff;
    transition-property: background-color, color;
    transition-duration: 1s;
    transition-timing-function: ease-out;
    -webkit-transition-property: background-color, color;
    -webkit-transition-duration: 1s;
    -o-transition-property: background-color, color;
    -o-transition-duration: 1s;
}

.Boton_Gris{
    background-color: #00a89c;
    width: calc(50% - 20px);
    text-decoration: none;
    padding: 5px;
    font-weight: 300;
    font-size: 15px;
    color: #ffffff;
    border-radius: 6px;
    border: 2px solid #0d4e9c;
    margin-bottom: 10px;
    margin-left:2px;
    margin-right:2px;
    cursor: pointer;
    transition-property: background-color, color;
    transition-duration: 1s;
    transition-timing-function: ease-out;
    -webkit-transition-property: background-color, color;
    -webkit-transition-duration: 1s;
    -o-transition-property: background-color, color;
    -o-transition-duration: 1s;
}

.Boton_Gris:hover{
    color: #1883ba;
    background-color: #ffffff;
    transition-property: background-color, color;
    transition-duration: 1s;
    transition-timing-function: ease-out;
    -webkit-transition-property: background-color, color;
    -webkit-transition-duration: 1s;
    -o-transition-property: background-color, color;
    -o-transition-duration: 1s;
}

/********************************** BOTONES ***********************************/
/* Botones para usar en las páginas de contenido*******************************/
.rldBoton_Azul{
    background-color: #0d4e9c;
    width: calc(100% - 20px);
    text-decoration: none;
    padding: 5px;
    font-weight: 300;
    font-size: 15px;
       /*calc(1em + 1vw);*/
    color: #ffffff;
    border-radius: 6px;
    border: 2px solid #00a89c;
    margin-bottom: 10px;
    margin-left:2px;
    margin-right:2px;
    cursor: pointer;
    transition-property: background-color, color;
    transition-duration: 1s;
    transition-timing-function: ease-out;
    -webkit-transition-property: background-color, color;
    -webkit-transition-duration: 1s;
    -o-transition-property: background-color, color;
    -o-transition-duration: 1s;
    
}
.rldBoton_Azul:hover{
    color: #1883ba;
    background-color: #ffffff;
    transition-property: background-color, color;
    transition-duration: 1s;
    transition-timing-function: ease-out;
    -webkit-transition-property: background-color, color;
    -webkit-transition-duration: 1s;
    -o-transition-property: background-color, color;
    -o-transition-duration: 1s;
}

.rldBoton_Gris{
    background-color: #00a89c;
    width: calc(100% - 20px);
    text-decoration: none;
    padding: 5px;
    font-weight: 300;
    font-size: 15px;
    color: #ffffff;
    border-radius: 6px;
    border: 2px solid #0d4e9c;
    margin-bottom: 10px;
    margin-left:2px;
    margin-right:2px;
    cursor: pointer;
    transition-property: background-color, color;
    transition-duration: 1s;
    transition-timing-function: ease-out;
    -webkit-transition-property: background-color, color;
    -webkit-transition-duration: 1s;
    -o-transition-property: background-color, color;
    -o-transition-duration: 1s;
}

.rldBoton_Gris:hover{
    color: #1883ba;
    background-color: #ffffff;
    transition-property: background-color, color;
    transition-duration: 1s;
    transition-timing-function: ease-out;
    -webkit-transition-property: background-color, color;
    -webkit-transition-duration: 1s;
    -o-transition-property: background-color, color;
    -o-transition-duration: 1s;
}

/***************** BARRAS DE DESPLAZAMIENTOS **********************************/
/* Works on Firefox */
/*  * {
  scrollbar-width:  thin;
  scrollbar-color:  #9e9e9e #212121; Deslizador Fondo
}*/

/* Works on Chrome, Edge, and Safari */
/*  *::-webkit-scrollbar {
  width: 12px;
}*/

/*  *::-webkit-scrollbar-track {
  background: #212121;fondo
}*/

/*  *::-webkit-scrollbar-thumb {
  background-color: #9e9e9e;
  border-radius: 20px;
  border: 3px solid #212121;
}*/

/* Works on Firefox */
* {
  scrollbar-width:  thin;
  scrollbar-color:  #0056b3 #f5f5f5; /*Deslizador Fondo*/
}

/* Works on Chrome, Edge, and Safari */
*::-webkit-scrollbar {
  width: 12px;
}

*::-webkit-scrollbar-track {
  background: #f5f5f5;/*fondo*/
}

*::-webkit-scrollbar-thumb {
  background-color: #0056b3;
  border-radius: 20px;
  border: 3px solid #f5f5f5;
}
/******************************************************************************/

@media all and (max-width: 640px), only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min--moz-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (-o-min-device-pixel-ratio: 2/1) and (max-width: 1024px), only screen and (min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min-resolution: 192dpi) and (max-width: 1024px), only screen and (min-resolution: 2dppx) and (max-width: 1024px) {
    
    .contenedor-body{
        top:0px;
        margin-top: 92px;/*Se comienza bajo el area de menu*/
        height: calc(100% - 142px);
    }
    
    .AreaCopyRight{
        padding-top: 5px;
    }
}