@charset "utf-8";

/* ********************************************************
VARIABLES
 ******************************************************** */
:root {

  color-scheme: light dark;

  /* ------- */
  /* COLORES */
  /* ------- */
  --rojoConterail: #8a0f31;
  
  /*--fondoMain: var(--gris04);*/
  --fondoMain: #eee;
  --fondoCabecera: var(--rojoConterail);
  --link-color: #0d6efd;
  --fondoItemProyectos: #333;

  --rojo: red;
  --verde: green;
  --verdeOliva: olive;
  --azul: blue;
  --naranja: orange;

  --defaultSelectedOption: #1e90ff;

  /* escala de grises */
  --negro: #000000;
  --blanco: #ffffff;
  --gris01: #171717;
  --gris02: #2e2e2e;
  --gris03: #464646;
  --gris04: #5d5d5d;
  --gris05: #747474;
  --gris06: #8b8b8b;
  --gris07: #a2a2a2;
  --gris08: #b9b9b9;
  --gris09: #d1d1d1;
  --gris10: #e8e8e8;

  /* Botones */
/*
  --primarioBackground: #d40511;
  --primarioBackgroundHover: #b74c4c;
  --primarioBackgroundDisabled: #b76b6b;
  --primarioColor: #FFF;
*/

  --primarioBackground: #0d6efd;
  --primarioBackgroundHover: #0b5ed7;
  --primarioBackgroundDisabled: #62a1fe;
  --primarioColor: #FFF;
  --primarioColorDisabled: #FFF;

  --secundarioBackground: #6c757d;
  --secundarioBackgroundHover: #5c636a;
  --secundarioBackgroundDisabled: #a0a6ab;
  --secundarioColor: #FFF;
  --secundarioColorDisabled: #FFF;

  --exitoBackground: #198754;
  --exitoBackgroundHover: #157347;
  --exitoBackgroundDisabled: #6ab190;
  --exitoColor: #FFF;
  --exitoColorDisabled: #FFF;

  --peligroBackground: #dc3545;
  --peligroBackgroundHover: #bb2d3b;
  --peligroBackgroundDisabled: #e87c87;
  --peligroColor: #FFF;
  --peligroColorDisabled: #FFF;

  --oscuroBackground: #212529;
  --oscuroBackgroundHover: #1c1f23;
  --oscuroBackgroundDisabled: #6f7275;
  --oscuroColor: #FFF;
  --oscuroColorDisabled: #FFF;

  /* Colores de fondo de celdas */
  --fondoCelda_naranja:#FFA500; /*orange*/
  --fondoCelda_amarillopalido:#F5F5DC; /*Beige*/
  --fondoCelda_verde:#008000; /*green*/
  --fondoCelda_rojo:#FF0000; /*red*/
  --fondoCelda_azul:#0000FF; /*blue*/

  /* Mensajes de aviso */
  --errorBackground: #ffe4e4;
  --errorBorderLeft: #ada0a0;
  --errorBorder: rgba(173, 160, 160, 0.3);
  --errorColor: #a90000;
  --errorIconColor: red;

  --okBackground: #d1f7d1;
  --okBorderLeft: #26d926;
  --okBorder: rgba(38, 217, 38, 0.3);
  --okColor: #004e00;
  --okIconColor: green;

  --avisoBackground: #fef8de;
  --avisoBorderLeft: #ffab0e;
  --avisoBorder: rgba(255, 171, 14, 0.3);
  --avisoColor: #865a07;
  --avisoIconColor: #ffab0e;

  /* Notificaciones */
  --notifSuccessColor: var(--verde);
  --notifWarningColor: var(--naranja);
  --notifInfoColor: var(--azul);
  --notifDangerColor: var(--rojo);

  /* Caja loading */
  --colorSpinner: var(--blanco);
  --colorSpinnerCajaLoading: var(--gris05);

  --colorSpinner2: var(--blanco);

  /* z-index */
  --cabecera-Zindex: 300;
  --datepicker-Zindex: 310;
  --main-Zindex: 0;
  --velo_Zindex: 500; /* z-index del velo cuando está en primer plano */
  --notificaciones_Zindex: 5000;
}

/* ********************************************************
ESTILOS GENERALES
 ******************************************************** */
/*
*{
  margin: 0;
  padding: 0;
  border: 0;
  outline: none !important;
  text-decoration: none !important;
}
*/

html{
  /*
  font-family: sans-serif;
  font-size: 10px;
  */
  height: 100%;
  font-family: sans-serif;
}

body{
  /*background-color: #FFF;*/
  background-color: var(--fondoMain);
  color: #000;
  height: 100%;
}

/*
img{
  border:none;
}
*/

/*
a{
  color: #444;
  text-decoration:none;
}
*/

/*
a:hover,
a:active
{
  text-decoration:none;
}
*/

/*
p{
  margin:0 0 1rem 0;
}
*/

::selection {
  color: var(--blanco);
  background: var(--negro);
}

.rojo{
  color: var(--rojo) !important;
}

.verde{
  color: var(--verde) !important;
}

.verdeOliva{
  color: var(--verdeOliva) !important;
}

.naranja{
  color: var(--naranja) !important;
}

.clear{
  clear:both;
}

.centrar{
  text-align:center;
}

.noselect {
  -webkit-touch-callout: none; /* iOS Safari */
  -webkit-user-select: none;   /* Chrome/Safari/Opera */
  -khtml-user-select: none;    /* Konqueror */
  -moz-user-select: none;      /* Firefox */
  -ms-user-select: none;       /* Internet Explorer/Edge */
  user-select: none;           /* Non-prefixed version, currently
                                  not supported by any browser */
}

.cursorPointer{
  cursor: pointer;
}

/* **** */
/* velo */
/* **** */
.velo{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0,0,0,0.5);
  cursor: pointer;

  opacity: 0;
  z-index: -100;

  -webkit-transition: opacity 300ms ease-in-out,left 300ms ease-in-out;
  -moz-transition: opacity 300ms ease-in-out,left 300ms ease-in-out;
  -ms-transition: opacity 300ms ease-in-out,left 300ms ease-in-out;
  -o-transition: opacity 300ms ease-in-out,left 300ms ease-in-out;
  transition: opacity 300ms ease-in-out,left 300ms ease-in-out;
}

.velo.contenidoCentrado{
  display: flex;
  justify-content: center;
  align-items: center;
}

.velo .cajaLoading{
  width: 200px;
  height: 100px;
  background-color: var(--blanco);
  border-radius: 10px;
  display: grid;
  grid-template-columns: 2fr 3fr;
  grid-gap: 15px;

  -webkit-transition: all 300ms ease-in-out;
  -moz-transition: all 300ms ease-in-out;
  -ms-transition: all 300ms ease-in-out;
  -o-transition: all 300ms ease-in-out;
  transition: all 300ms ease-in-out;
}

.velo .cajaLoading .col1{
  display: flex;
  justify-content: end;
  align-items: center;
}

.velo .cajaLoading .col2{
  display: flex;
  justify-content: start;
  align-items: center;
  font-size: 1rem;
}

.velo.primerPlano{
  z-index: var(--velo_Zindex);
}

/* ******* */
/* botones */
/* ******* */

/*
.btn{
  text-transform: uppercase;
  padding-top: 5px;
  padding-bottom: 5px;
  padding-left: 30px;
  padding-right: 30px;
}
*/

/*
.btn i{
  margin-right: 10px;
}
*/

/*

.btn-primary{color:#FFF !important;background-color:#FF4F4F !important;border-color:#d42c54 !important}

.btn-primary:hover{color:#FFF;background-color:#FF4F4F !important;border-color:#FF4F4F !important}
.btn-primary:focus,.btn-primary.focus{box-shadow:0 0 0 .2rem rgba(0,90,90,0.5)}
.btn-primary.disabled,.btn-primary:disabled{color:#FFF;background-color:#FF4F4F !important;border-color:#FF4F4F !important}
.btn-primary:not(:disabled):not(.disabled):active,.btn-primary:not(:disabled):not(.disabled).active,.show>.btn-primary.dropdown-toggle{color:#FFF;background-color:#FF4F4F !important;border-color:#FF4F4F !important}
.btn-primary:not(:disabled):not(.disabled):active:focus,.btn-primary:not(:disabled):not(.disabled).active:focus,.show>.btn-primary.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(0,90,90,0.5)}

.btn-outline-primary{color:#FF4F4F;background-color:transparent;background-image:none;border-color:teal}.btn-outline-primary:hover{color:#222;background-color:#009a9a;border-color:#d42c54}
.btn-outline-primary:focus,.btn-outline-primary.focus{box-shadow:0 0 0 .2rem rgba(0,128,128,0.5)}
.btn-outline-primary.disabled,.btn-outline-primary:disabled{color:teal;background-color:transparent}
.btn-outline-primary:not(:disabled):not(.disabled):active,.btn-outline-primary:not(:disabled):not(.disabled).active,.show>.btn-outline-primary.dropdown-toggle{color:#fff;background-color:#009a9a;border-color:teal}
.btn-outline-primary:not(:disabled):not(.disabled):active:focus,.btn-outline-primary:not(:disabled):not(.disabled).active:focus,.show>.btn-outline-primary.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(0,128,128,0.5)}

*/

.boton{
  display: inline-block;
  font-family: 'Poppins', sans-serif;
  background-color: var(--primarioBackground);
  color: var(--primarioColor);
  padding: 0.3rem 0.8rem 0.3rem 0.8rem;
  text-decoration: none;
  font-size: 1rem;
  text-transform: uppercase;
  border: none;
  border-radius: 3px;
  cursor: pointer;
  margin-bottom: 0.5rem;
  text-align: center;
}

.boton.short{
  font-size: 0.6rem;
}

.boton.bloque{
  display: block;
}

a.boton.bloque{
  display: table;
}

.boton.ancho{
  width: 100%;
}

.boton:hover{
  color: var(--primarioColor);
  background-color: var(--primarioBackgroundHover);
}

.boton:active{
  color: var(--primarioColor);
  background-color: var(--primarioBackgroundHover);
}

.boton:focus{
  color: var(--primarioColor);
  background-color: var(--primarioBackgroundHover);
}

.boton:visited{
  color: var(--primarioColor);
}

.boton:disabled{
  color: var(--primarioColorDisabled);
  background-color: var(--primarioBackgroundDisabled);
}



.boton.secundario{
  color: var(--secundarioColor);
  background-color: var(--secundarioBackground);
}

.boton.secundario:hover{
  color: var(--secundarioColor);
  background-color: var(--secundarioBackgroundHover);
}

.boton.secundario:active{
  color: var(--secundarioColor);
  background-color: var(--secundarioBackgroundHover);
}

.boton.secundario:focus{
  color: var(--secundarioColor);
  background-color: var(--secundarioBackgroundHover);
}

.boton.secundario:visited{
  color: var(--secundarioColor);
}

.boton.secundario:disabled{
  color: var(--secundarioColorDisabled);
  background-color: var(--secundarioBackgroundDisabled);
}

.boton.exito{
  color: var(--exitoColor);
  background-color: var(--exitoBackground);
}

.boton.exito:hover{
  color: var(--exitoColor);
  background-color: var(--exitoBackgroundHover);
}

.boton.exito:active{
  color: var(--exitoColor);
  background-color: var(--exitoBackgroundHover);
}

.boton.exito:focus{
  color: var(--exitoColor);
  background-color: var(--exitoBackgroundHover);
}

.boton.exito:visited{
  color: var(--exitoColor);
}

.boton.exito:disabled{
  color: var(--exitoColorDisabled);
  background-color: var(--exitoBackgroundDisabled);
}

.boton.peligro{
  color: var(--peligroColor);
  background-color: var(--peligroBackground);
}

.boton.peligro:hover{
  color: var(--peligroColor);
  background-color: var(--peligroBackgroundHover);
}

.boton.peligro:active{
  color: var(--peligroColor);
  background-color: var(--peligroBackgroundHover);
}

.boton.peligro:focus{
  color: var(--peligroColor);
  background-color: var(--peligroBackgroundHover);
}

.boton.peligro:visited{
  color: var(--peligroColor);
}

.boton.peligro:disabled{
  color: var(--peligroColorDisabled);
  background-color: var(--peligroBackgroundDisabled);
}

.boton.oscuro{
  color: var(--oscuroColor);
  background-color: var(--oscuroBackground);
}

.boton.oscuro:hover{
  color: var(--oscuroColor);
  background-color: var(--oscuroBackgroundHover);
}

.boton.oscuro:active{
  color: var(--oscuroColor);
  background-color: var(--oscuroBackgroundHover);
}

.boton.oscuro:focus{
  color: var(--oscuroColor);
  background-color: var(--oscuroBackgroundHover);
}

.boton.oscuro:visited{
  color: var(--oscuroColor);
}

.boton.oscuro:disabled{
  color: var(--oscuroColorDisabled);
  background-color: var(--oscuroBackgroundDisabled);
}

/* ********************************************************
FORMULARIOS
 ******************************************************** */
/*
 input[type="text"]:read-only {
  background-color: red ;
}
*/

form label{
  /*
  font-family: 'Poppins', sans-serif;
  font-weight: 600;

  font-size: 0.9rem;
  */
}

form input,
form .input-group-text,
form select,
form textarea{
  /*
  font-size: 0.9rem !important;
  padding-top: 0.2rem !important;
  padding-bottom: 0.2rem !important;
  */
}

/*
form.needs-validation input:focus,
form.needs-validation select:focus,
form.needs-validation textarea:focus{
  background-color: var(--avisoBackground);
}
*/

form input[type="radio"],
form input[type="checkbox"]
{
  width: 20px;
  height: 20px;
  margin-right: 10px;
}

form input:not([type="radio"]),
form textarea,
form select
{
  border-radius: 0px !important;
  border-color: var(--gris02) !important;
}

form input:not([type="checkbox"]){
  border-color: var(--gris02) !important;
}

form .input-group span{
  border-color: var(--gris02) !important;
  background-color: var(--gris09);
  cursor: pointer;
}

form button{
  /*font-size: 0.9rem;*/
}

/*
form .invalid-feedback{
  position: relative;
  background-color: var(--peligroBackgroundDisabled);
  color: var(--blanco);
  padding: 0.2rem;
}


form .invalid-feedback:before{
  position: absolute;
  content: "";
  top: -12px;
  left: 5px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 12px 12px 12px;
  border-color: transparent transparent var(--peligroBackgroundDisabled) transparent;
}
*/

/* ********************************************************
COLORES DE FONDO DE LAS CELDAS DE LAS TABLAS
******************************************************** */

.fondoCelda_naranja,
.fondoCelda_naranja:hover
{
  background-color: var(--fondoCelda_naranja) !important;
  color: var(--blanco) !important;
}

.fondoCelda_amarillopalido,
.fondoCelda_amarillopalido:hover
{
  background-color: var(--fondoCelda_amarillopalido) !important;
}

.fondoCelda_rojo,
.fondoCelda_rojo:hover
{
  background-color: var(--fondoCelda_rojo) !important;
  color: var(--blanco) !important;
}

.fondoCelda_azul,
.fondoCelda_azul:hover
{
  background-color: var(--fondoCelda_azul) !important;
  color: var(--blanco) !important;
}

.fondoCelda_verde,
.fondoCelda_verde:hover
{
  background-color: var(--fondoCelda_verde) !important;
  color: var(--blanco) !important;
}

/* *********************************************************************** */
/* para que no salga el icono  de warning cuando el formulario es inválido */
/* y cambiar el color del borde cuando el formulario  es inválido          */
/* *********************************************************************** */

/* cuando el campo se inválido el campose bordea en rojo*/
.form-control.is-invalid,
.was-validated .form-control:invalid {
  border: 2px solid var(--rojo) !important;
}

.form-control.no-icon-warning.is-invalid,
.was-validated .form-control.no-icon-warning:invalid {
  background-image: none;
  /*border-color: #dc3545;*/ /* este es el color del borde del input cuando es inválido*/
}

.form-select.no-icon-warning.is-invalid, 
.was-validated .form-select.no-icon-warning:invalid {
  /* border-color: #dc3545; */ /* este es el color del borde del select cuando es inválido*/
}

.form-select.no-icon-warning.is-invalid:not([multiple]):not([size]), 
.form-select.no-icon-warning.is-invalid:not([multiple])[size="1"], 
.was-validated .form-select.no-icon-warning:invalid:not([multiple]):not([size]), 
.was-validated .form-select.no-icon-warning:invalid:not([multiple])[size="1"] {
  /*background-position: right 0.75rem center,center right 2.25rem;*/
  background-position: right 0.75rem center,center right -100rem;
}

 /* *************************************************************** */
/* para que no salga el icono  de ok cuando el formulario es válido */
/* y cambiar el color del borde cuando el formulario  es inválido   */
 /* *************************************************************** */

.form-control.no-icon-ok.is-valid,
.was-validated .form-control.no-icon-ok:valid {
  background: #FFF;
  /*border-color: #198754;*/ /* este es el color del borde del input cuando es válido*/
}

.form-select.is-valid, 
.was-validated .form-select:valid {
  /*border-color: #198754;*/ /* este es el color del borde del input cuando es válido*/
}

.form-select.no-icon-ok.is-valid:not([multiple]):not([size]),
.form-select.no-icon-ok.is-valid:not([multiple])[size="1"], 
.was-validated .form-select.no-icon-ok:valid:not([multiple]):not([size]), 
.was-validated .form-select.no-icon-ok:valid:not([multiple])[size="1"] {
  /*background-position: right 0.75rem center,center right 2.25rem;*/
  background-position: right 0.75rem center,center right -100rem;
}

/* **************************************************** */
/* para cambiar el glow de las cajas de los formularios */
/* **************************************************** */

textarea:focus,
select:focus,
input[type="text"]:focus,
input[type="password"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="time"]:focus,
input[type="week"]:focus,
input[type="number"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="color"]:focus,
.uneditable-input:focus {

  border-color: rgba(46, 72, 103, 0.5) !important;
  /*box-shadow: 0 1px 1px rgba(0, 0, 0, 0) inset, 0 0 8px rgba(0, 0, 0, 0);*/
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0) inset, 0 0 8px rgba(254, 203, 47, 0.5) !important;
  outline: 0 none !important;

}

textarea:hover, 
input:hover,
select:hover, 
textarea:active, 
input:active, 
select:active,
textarea:focus, 
button:focus,
select:focus,
button:active,
button:hover,
label:focus,
.btn:active,
.btn.active
{
/*
    border-color: rgba(46, 72, 103, 0.5) !important;
    outline:0px !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    /*box-shadow: none !important;*/
/*    
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0) inset, 0 0 8px rgba(254, 203, 47, 0.5) !important;
*/
}

table input[type="checkbox"]{
  /*
  appearance: checkbox !important;
  -webkit-appearance: checkbox !important;
  width: 16px;
  height: 16px;
  margin-top: 5px;
  */
  cursor: pointer;
}

/* ******************************* */
/* Personalización modal bootstrap */
/* ******************************* */


.modal.fade {
  transition: opacity 0.33s ease-in-out !important;
}


.modal.fade .modal-dialog {
	-webkit-transform: translate(0, 0%);
	-ms-transform: translate(0, 0%);
	transform: translate(0, 0%);
	-webkit-transition: -webkit-transform 0.3s ease-out;
	-moz-transition: -moz-transform 0.3s ease-out;
	-o-transition: -o-transform 0.3s ease-out;
	transition: transform 0.3s ease-out;
}

.modal .modal-content{
/*  
  border-radius: 0;
*/  
}

/* ******************************* */
/* Personalización tabla bootstrap */
/* ******************************* */

.contenedorTabla{
  visibility: hidden;
  width: 100%;
  overflow: hidden;
}

table.table thead th{
  white-space: nowrap;
}

/*
table.table thead th{
  border-bottom: 3px solid var(--negro);
  font-size: 0.9rem;
}

table.table.borderedHeader1 thead th{
  border-bottom: none;
  text-align: center;
  vertical-align: middle;
  border: 1px solid var(--gris08);
  text-transform: uppercase;
}

table.table.tablaFormulario thead th{
  background-color: var(--negro);
  color: var(--blanco);
  padding-top: 0;
  padding-bottom: 0;
  border-bottom: none;
}

table.table.tablaFormulario tbody td{
  padding-top: 2px !important;
  padding-bottom: 2px !important;
}
*/

.table.table thead{
  font-size: 1rem;
}

table.table tbody{
  font-size: 0.9rem;
}

/*
table.table tbody td{
  padding-top: 0.8rem !important;
  padding-bottom: 0.3rem !important;
}
*/

div.dt-buttons{
  padding-top: 2rem;
}

div.dt-buttons button.boton{
  margin-right: 10px !important;
  border-radius: 3px !important;
  background-color: var(--primarioBackground);
  font-size: 0.9rem;
}

div.dt-buttons input{
  margin-right: 10px !important;
  font-size: 0.8rem;
  height: 30px;
  width: 75px;
  padding: 0 5px 0 5px;
}

div.dt-buttons .infoBox{
  display: inline-block;
  height: 30px;
  background-color: var(--gris09);
  border: 1px solid var(--gris08);
  padding: 0 10px 0 10px;
  margin-left: 10px;
  margin-bottom: 7px;
}

/* 
.dataTables_scrollBody{
  overscroll-behavior: contain;
}
*/

.dataTables_scrollBody::-webkit-scrollbar {
  width: 8px; /* Controla el ancho de la barra de desplazamiento */
  height: 8px; /* Controla el alto de la barra de desplazamiento */
}

.dataTables_scrollBody::-webkit-scrollbar-track {
  background: #f1f1f1; /* Color de fondo de la barra de desplazamiento */
}

.dataTables_scrollBody::-webkit-scrollbar-thumb {
  background: #888; /* Color de la barra de desplazamiento */
}

.dataTables_scrollBody::-webkit-scrollbar-thumb:hover {
  background: #555; /* Color de la barra de desplazamiento al pasar el mouse */
}

/* ********************************************************************* */
/* Se oculta el spinner de carga de datatables en server side pagination */
/* ********************************************************************* */

/*
.dataTables_processing.card{
  display: none !important;
}
*/

/* ****************************************************************************** */
/* Los options seleccionados de un select multiple mantienen el color por defecto */
/* ****************************************************************************** */

select[multiple] option:checked{
  background-color: var(--defaultSelectedOption);
  color: var(--blanco);
}

/* ********************************************************
PERSONALIZACIÓN PAGINACIÓN BOOTSTRAP
******************************************************** */
ul.pagination{
  margin-top: 2rem !important;
}

.pagination a{
  color: var(--negro) !important;
}

.pagination li.active .page-link{
  color: var(--blanco) !important;
  background-color: var(--secundarioBackground) !important;
  border: 1px solid var(--secundarioBackground);
}

.pagination li .page-link:hover{
  color: var(--blanco) !important;
  background-color: var(--secundarioBackground) !important;
  border: 1px solid var(--secundarioBackground);
}

/* ************************************ */
/* Personalización bootstrap datepicker */
/* ************************************ */

.datepicker-dropdown{
  z-index: var(--datepicker-Zindex) !important;
  padding: 0.5rem !important;
}

/*
.datepicker,
.table-condensed {
  width: 260px;
  height:260px;
  font-size: 1.4rem;
}
*/

/* ****************************************** */
/* Personalización de notificaciones toastify */
/* ****************************************** */

.toastify{
  min-width: 450px;
  max-width: 950px;
  padding-top: 20px;
  padding-bottom: 20px;
  padding-right: 40px;
  border-radius: 5px;

  transition: all 0.6s cubic-bezier(0.215, 0.61, 0.355, 1);
  text-shadow: 1px 1px 0 rgba(0,0,0,0.7);
}

.toastify button.toast-close{
  position: absolute;
  top: 10px;
  right: 5px;
  color: var(--blanco) !important;
  opacity: 1;
  font-size: 1.4rem;
  font-weight: bold;
  text-shadow: 2px 2px 0 rgba(0,0,0,0.5);
}

/* ************************************ */
/*              CABECERA                */
/* ************************************ */

header{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 60px;
  background-color: var(--fondoCabecera);
  color: var(--blanco);
  z-index: var(--cabecera-Zindex);

  -webkit-box-shadow: 0 0 5px 5px rgba(0,0,0,0.5);
  box-shadow: 0 0 5px 5px rgba(0,0,0,0.5);
}

/* Logo */
header h1.logo{
  position: absolute;
  top: 10px;
  left: 10px;
}

header h1.logo a{
  position: relative;
  display:block;
  width: 150px;
  height: 40px;
  overflow:hidden;
  text-decoration:none;
  text-indent:-10000px;
  cursor: pointer;
}

header h1.logo a img{
  position:absolute;
  top:0;
  left:0;
  width: 150px;
  height: auto;
  opacity: 1;
}

header h1.logo span{
  position: absolute;
  width: 200px;
  top: 12px;
  left: 165px;
  color: var(--blanco);
  font-family: 'Poppins', sans-serif;
  font-size: 1rem;
  font-weight: 500;
}

/* menu */
header nav.menu{
  position: absolute;
  top: 20px;
  left: 300px;
  color: var(--blanco);
  border-left: 2px solid var(--gris04);
}

header nav.menu ul{
  list-style: none;
  margin: 0 0 0 20px;
  padding: 0;
}

header nav.menu ul a{
  font-family: 'Poppins', sans-serif;
  font-size: 1rem;
  font-weight: 500;
  text-decoration: none;
  color: var(--link-color);
}

header nav.menu ul a:hover{
  text-decoration: underline;
}

/* Desconectar */
header .logout{
  position: absolute;
  right: 10px;
  top: 10px;
  color: var(--blanco);
  font-size: 0.9rem;
}

header .logout a{
  color: var(--gris06);
  font-size: 1.5rem;
  margin-left: 10px;
}


/* ************************************ */
/*                CUERPO                */
/* ************************************ */
main{
  position: relative;
  padding: 90px 30px 2rem 30px;
}







/* ************************************ */
/*                 PIE                  */
/* ************************************ */
footer{
}


/* ************************************ */
/*               PARTES                 */
/************************************** */

/* -------- */
/* HELPERS  */
/* -------- */

/* Titular */
/* ------- */

main h2.titPpal{
  color: var(--negro);
  font-family: 'Poppins', sans-serif;
  font-size: 2rem;
  font-weight: 500;
  margin-bottom: 1.5rem;
}

main h2.titPpal a.volver{
  font-size: 2.5rem;
}

/* -------- */
/* GENERAL  */
/* -------- */

/* Caja */
/* ---- */

.caja{
  position: relative;
  background-color: var(--blanco);
  padding: 1.5rem 1rem 1.5rem 1rem;
  border-radius: 10px;
  margin-bottom: 2rem;

  -webkit-box-shadow: 0 0 10px 0 rgba(0,0,0,0.1);
  box-shadow: 0 0 10px 0 rgba(0,0,0,0.1);
}

.caja .cabecera{
  font-family: 'Poppins', sans-serif;
  margin-bottom: 1.5rem;
}

.caja .cuerpo{
  position: relative;
}

.caja .cuerpo label{
  color: var(--negro);
}

/* Formulario pequeño dentro de la Caja */
/* ------------------------------------ */

.caja form.formularioSm label{
  font-size: 0.95rem;
}

.caja form.formularioSm input:not([type="checkbox"]):not([type="radio"]),
.caja form.formularioSm textarea,
.caja form.formularioSm select
{
  font-size: 0.8rem;
  padding-top: 0.2rem;
  padding-bottom: 0.2rem;
}

/* Fieldset dentro de un formulario */
/* -------------------------------- */
/*
fieldset{
}
*/

fieldset legend{
  font-family: 'Poppins', sans-serif;
  font-size: 1.1rem;
  font-weight: 500;
  border-bottom: 1px solid var(--gris08);
}

/* filtros */
/* ------- */

.filtros.initInvisible{
  display: none;
}

/* ------------------ */
/* PANTALLA DE LOGIN  */
/* ------------------ */

.loginContainer{
  width: 100svw;
  height: 100svh;
  overflow-y: auto;
  overflow-x: hidden;

  display: flex;
  justify-content: center;
  /*align-items: initial;*/
  align-items: center;

  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
}

.loginContainer .loginBox{
  /*margin-top: 5rem;*/
  width: 750px;
  /*height: 550px;*/
  height:fit-content;
  text-align: center;
  /*background-color: rgba(255,0,0,0.1);*/
}

.loginContainer .loginBox h1{
  position: relative;
  margin-bottom: 4rem;
}

.loginContainer .loginBox h1 a{
  position: relative;
  display:block;
  text-decoration:none;
  text-indent:-10000px;
  cursor: pointer;
}

.loginContainer .loginBox h1 img{
  position:absolute;
  top:0;
  left:50%;
  margin-left: -125px;
  opacity: 1;

  aspect-ratio: 25/8;
  object-fit: cover;
}

.loginContainer .loginBox h2{
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
  font-size: 1.7rem;
  color: var(--rojoConterail);
  text-transform: uppercase;
}

.loginContainer .loginBox form.loginForm{
  width: 450px;
  margin: 5rem auto 0 auto;
  text-align: left;
}

.loginContainer .loginBox form.loginForm label{
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
  text-transform: uppercase;
}

.loginContainer .loginBox form.loginForm input,
.loginContainer .loginBox form.loginForm.was-validated input
{
  background-color: transparent !important;
  border-top: none !important;
  border-right: none !important;
  border-left: none !important;
  border-bottom: 1px solid var(--negro) !important;
  color: var(--gris03) !important;
}

.loginContainer .loginBox form.loginForm input[type="text"]:focus,
.loginContainer .loginBox form.loginForm input[type="password"]:focus,
.loginContainer .loginBox form.loginForm input[type="email"]:focus
{
  border-color: none !important;
  box-shadow: none !important;
  outline: none !important;
}

.loginContainer .loginBox form.loginForm input:hover,
.loginContainer .loginBox form.loginForm input:active, 
.loginContainer .loginBox form.loginForm button:focus,
.loginContainer .loginBox form.loginForm button:active,
.loginContainer .loginBox form.loginForm button:hover,
.loginContainer .loginBox form.loginForm label:focus,
.loginContainer .loginBox form.loginForm .btn:active,
.loginContainer .loginBox form.loginForm .btn.active
{
  border-color: none !important;
  box-shadow: none !important;
  outline: none !important;
}

.loginContainer .loginBox .form-control.is-invalid,
.loginContainer .loginBox .was-validated .form-control:invalid {
  border-bottom: 3px solid var(--rojo) !important;
}

/* --------- */
/* LEYENDAS  */
/* --------- */

ul.leyendas{
  list-style: none;
  border: 0;
  margin: 0.5rem 0 0 0;
  padding: 0;
}

ul.leyendas li{
  display: inline-block;
  margin-left: 15px;
  font-size: 0.9rem;
}

ul.leyendas li span{
  display: inline-block;
  height: 18px;
  width: 18px;
  border-radius: 5px;
  vertical-align: middle;
  border: 1px solid rgba(0, 0, 0, 0.3);
}

/* -------------- */
/* HANDLING FORM  */
/* -------------- */

.handlingForm fieldset legend{
  padding-top: 30px;
  border-bottom: none;
}

.handlingForm fieldset .fieldsetObs legend{
  padding-top: 15px;
}

.handlingForm fieldset{
  display: grid;
  grid-gap: 10px;
}

.handlingForm fieldset.generales{
  grid-template-columns: 300px 1fr;
}

.handlingForm fieldset.avi{
  grid-template-columns: 300px 1fr;
}

.handlingForm .fieldsetObs{
  display: grid;
  grid-template-columns: 300px 1fr;
  grid-gap: 10px;
}

/* -------- */
/* MENSAJES */
/* -------- */

.msg-error{
  background: var(--errorBackground);
	border-left:6px solid var(--errorBorderLeft);
  border-top: 1px solid var(--errorBorder);
  border-bottom: 3px solid var(--errorBorder);
  border-right: 1px solid var(--errorBorder);
  color: var(--errorColor);
}

.msg-error::before{
  font-family: "Font Awesome 6 Free"; 
  font-weight: 900;
  content: '\f06a';
  font-size: 1.5rem;
  color: var(--errorIconColor);
  position: absolute;
  top: 10px;
  left: 10px;
}

.msg-ok{
  background: var(--okBackground);
	border-left:6px solid var(--okBorderLeft);
  border-top: 1px solid var(--okBorder);
  border-bottom: 3px solid var(--okBorder);
  border-right: 1px solid var(--okBorder);
  color: var(--okColor);
}

.msg-ok::before{
  font-family: "Font Awesome 6 Free"; 
  font-weight: 900;
  content: '\f00c';
  font-size: 1.5rem;
  color: var(--okIconColor);
  position: absolute;
  top: 10px;
  left: 10px;
}

.msg-aviso{
  background: var(--avisoBackground);
	border-left:6px solid var(--avisoBorderLeft);
  border-top: 1px solid var(--avisoBorder);
  border-bottom: 3px solid var(--avisoBorder);
  border-right: 1px solid var(--avisoBorder);
  color: var(--avisoColor);
}

.msg-aviso::before{
  font-family: "Font Awesome 5 Free"; 
  font-weight: 900;
  content: '\f05a';
  font-size: 1.5rem;
  color: var(--avisoIconColor);
  position: absolute;
  top: 10px;
  left: 10px;
}

.msg-error,.msg-ok,.msg-aviso{
  position: relative;
	text-align: left;
	padding: 0.7rem 0.7rem 0.7rem 3rem;
	font-size: 0.9rem;
	line-height: 1.3rem;
	margin: 1rem 0 0.5rem 0;
}

/*--------------------*/
/*-- NOTIFICACIONES --*/
/*--------------------*/

.toastify.success{
  background: var(--notifSuccessColor);
  color: var(--blanco);
}

.toastify.warning{
  background: var(--notifWarningColor);
  color: var(--blanco);
}

.toastify.info{
  background: var(--notifInfoColor);
  color: var(--blanco);
}

.toastify.danger{
  background: var(--notifDangerColor);
  color: var(--blanco);
}

/*--------------------*/
/*--    SPINNER --*/
/*--------------------*/

.lds-ring {
  display: inline-block;
  position: relative;
  width: 80px;
  height: 80px;
}

.lds-ring.lds-ring-caja{
  /*
  width: 60px;
  height: 60px;
  */
  width: 50px;
  height: 50px;
}

.lds-ring div {
  box-sizing: border-box;
  display: block;
  position: absolute;
  width: 64px;
  height: 64px;
  margin: 8px;
  border: 8px solid var(--colorSpinner);
  border-radius: 50%;
  animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
  border-color: var(--colorSpinner) transparent transparent transparent;
}

.lds-ring.lds-ring-caja div{
  /*
  width: 48px;
  height: 48px;
  margin: 6px;
  border: 6px solid var(--colorSpinnerCajaLoading);
  border-color: var(--colorSpinnerCajaLoading) transparent transparent transparent;
  */
  width: 40px;
  height: 40px;
  margin: 6px;
  border: 6px solid var(--colorSpinnerCajaLoading);
  border-color: var(--colorSpinnerCajaLoading) transparent transparent transparent;
}

.lds-ring div:nth-child(1) {
  animation-delay: -0.45s;
}
.lds-ring div:nth-child(2) {
  animation-delay: -0.3s;
}
.lds-ring div:nth-child(3) {
  animation-delay: -0.15s;
}
@keyframes lds-ring {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/*---------------------*/
/*--    SPINNER 2    --*/
/*---------------------*/

.spinner{
  margin: 100px auto 100px;
  width: 140px;
  text-align: center;
}

.spinner > div {
  width: 20px;
  height: 20px;
  /*background-color: #333;*/
  background-color: var(--blanco);

  border-radius: 100%;
  display: inline-block;
  -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
  animation: sk-bouncedelay 1.4s infinite ease-in-out both;
}

.spinner .bounce1 {
  -webkit-animation-delay: -0.32s;
  animation-delay: -0.32s;
}

.spinner .bounce2 {
  -webkit-animation-delay: -0.16s;
  animation-delay: -0.16s;
}

@-webkit-keyframes sk-bouncedelay {
  0%, 80%, 100% { -webkit-transform: scale(0) }
  40% { -webkit-transform: scale(1.0) }
}

@keyframes sk-bouncedelay {
  0%, 80%, 100% { 
    -webkit-transform: scale(0);
    transform: scale(0);
  } 40% { 
    -webkit-transform: scale(1.0);
    transform: scale(1.0);
  }
}