/**********************************************************************************************************************/
/** ESTILOS																											  */
/**********************************************************************************************************************/

/**********************************************************************************************************************/
/** FUENTES ***********************************************************************************************************/
/**********************************************************************************************************************/

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;0,700;1,400&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;700&display=swap');


/**********************************************************************************************************************/
/** COLORES                                                                                                           */
/**********************************************************************************************************************/

:root {
    --color-gris: #343434;
    --color-gris-claro: #DEDEDE;
    --color-blanco: #ffffff;

    --main-color-1: #698ab7;
    --main-color-2: #60893a;
    --main-color-3: #996100;
    --main-color-4: #90a9cc;
    --main-color-5: #FFAA61;
    --main-color-6: #60893a;

    --color-tarjetas: #60893a;

    /* --background: #011023; */
    --background: #2aa869;
    /* --colorInicioSesion: #546883; */
    --colorInicioSesion: #297fb8;

    --text-color-1: #ffffff;
    --text-color-2: #000000;

    --radius: 15px;
    --app-width: 600px;
}


/**********************************************************************************************************************/
/** VARIABLES                                                                                                         */
/**********************************************************************************************************************/

:root {
    --altura-cabecera: 100px;
    --ancho-titulo-seccion: 25rem;
}


/**********************************************************************************************************************/
/** CONFIGURACIÓN CSS																							      */
/**********************************************************************************************************************/

.show-mobile { display:none !important; }
.show-tablet { display:none !important; }
.show-screen { display:inherit; }
.hide-mobile { display:inherit !important; }
.hide-tablet { display:inherit !important; }
.hide-screen { display:none !important; }

.max-img { width: 100%;	height: auto; }
.clear { clear:both; display:block; overflow:hidden; visibility:hidden; width:0; height:0; }
body { -webkit-tap-highlight-color: rgba(0,0,0,0); }
body { -webkit-tap-highlight-color: transparent; }
table { overflow-x: auto; }
input:-webkit-autofill { box-shadow: 0 0 0 1000px #ececec inset; }
*:focus { outline: none !important; }

/*::-webkit-scrollbar-button{ display: none; height: 13px; border-radius: 0px; background-color: #AAA; } ::-webkit-scrollbar-button:hover{ background-color: #AAA; } ::-webkit-scrollbar-thumb{ background-color: #808080; border-radius: 0; } ::-webkit-scrollbar-thumb:hover{ background-color: #808080; border-radius: 0; } ::-webkit-scrollbar-track{ background-color: #c0c0c0; } ::-webkit-scrollbar-track:hover{ background-color: #c0c0c0; } ::-webkit-scrollbar{ width: 10px; }*/

::-webkit-input-placeholder { color: #787878; font-size: .9em; }
::-moz-placeholder { color: #787878; font-size: .9em; }
:-ms-input-placeholder { color: #787878; font-size: .9em; }
:-moz-placeholder { color: #787878; font-size: .9em; }

.noselect {
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}


/**********************************************************************************************************************/
/** ELEMENTOS GENERALES ***********************************************************************************************/
/**********************************************************************************************************************/

html {
    margin: 0px;
    padding: 0px;
    width: 100%;
    height: 100%;
	font-size: 16px;
    scroll-behavior: smooth;
}

body {
    margin: 0px;
    padding: 0px;
    width: 100%;
    height: 100%;
    background-color: #011023;
}

body.scrollOff {
    overflow: hidden;
}

hr {
    width: 80%;
    border: 1px solid var(--color-blanco);
    align-items: center;
    justify-content: center;
    margin: 3rem auto 3rem auto;
}

p, li {
    color: var(--text-color-1);
    font-family: 'Open Sans', sans-serif;
    font-size: .9rem;
    line-height: 1.3rem;
    text-align: left;
}

li {
    margin-bottom: 1rem;
}
li li {
    font-size: inherit;
}
li ul, li ol {
    margin-top: 1rem;
}

a {
    outline: none;
    color: inherit;
}
a:hover {
    text-decoration: underline;
}

img {
    border: 0px;
    margin: 0px;
    padding: 0px;
    display: block;
}

h1 {
	font-family: 'Open Sans', sans-serif;
    font-size: 1.4rem;
    font-weight: normal;
    color: var(--text-color-1);
}
h2 {
    margin-top: 2rem;
	font-family: 'Open Sans', sans-serif;
    font-size: 1.3rem;
    font-weight: 400;
    letter-spacing: 1px;
    line-height: 1.1rem;
    color: var(--main-color-2);
}
h3 {
    margin-top: .5rem;
    font-family: 'Open Sans', sans-serif;
    font-size: 1.1rem;
    font-weight: 600;
    letter-spacing: 0;
    line-height: 1.2rem;
    color: black;
}
h4 {
    font-family: 'Open Sans', sans-serif;
    font-size: 1rem;
    font-weight: normal;
    letter-spacing: 0;
    line-height: 1.1rem;
    color: var(--main-color-5);
    font-style: italic;
}

input {
    margin: 0px;
    margin-bottom: 1rem;
    padding: .8rem;
	width: 100%;
    font-family: 'Open Sans', sans-serif;
    font-size: .9rem;
    color: #000000;
    border: 1px solid #d1d1d1;
    background-color: #ffffff;
}
input[type="checkbox"], input[type="radio"] {
    height: 1rem;
    width: 1rem;
    float: left;
}

textarea {
    margin: 0px;
    margin-bottom: 1rem;
    padding: .8rem;
	width: 100%;
    font-family: 'Roboto', sans-serif;
    font-size: .9rem;
    color: #787878;
    border: 1px solid #d1d1d1;
    background-color: #ffffff;
	resize: none;
}

select {
    margin: 0px;
    margin-bottom: 1rem;
    padding: .8rem;
	width: 100%;
    font-family: 'Open Sans', sans-serif;
    font-size: .9rem;
    color: #787878;
    border: 1px solid #d1d1d1;
    background-color: #ffffff;
}

table {
    margin: 0px;
    margin-left: auto;
    margin-right: auto;
    padding: 0px;
}
/*tr:hover {
    background-color: #dedede;
}*/
th {
    padding: 0.3rem;
    color: white;
    font-family: 'Open Sans', sans-serif;
    font-size: .9rem;
    line-height: 1.1rem;
    text-align: center;
    background-color: #688ab6;
}
td {
    padding: .3rem;
    color: #76767e;
    font-family: 'Open Sans', sans-serif;
    font-size: .9rem;
    line-height: 1.1rem;
}

fieldset {
    margin: 1rem auto 2rem auto;
    padding: 10px;
    border: 0;
    border-bottom: 1px solid #999999;
    position: relative;
    top: 100px;
}

fieldset p {
    line-height: 1.2rem;
}

fieldset.aviso {
    background-color: #f3f2a7;
}

.fieldsetVM{
    position: unset;
    border: 1px solid #999999;
    border-radius: 10px;
}
.fieldsetVM legend{
    padding: 1rem;
}

legend {
    padding: 0;
    padding-bottom: 1rem;
    color: #ffffff;
    font-family: 'Open Sans', sans-serif;
    font-size: 1.2rem;
    font-weight: bold;
    display: flex;
    align-items: center;
    gap: 1rem;
}
legend img{
    width: 30px;
}
/*****/

.animated.standby {
    -webkit-animation: none !important;
    -o-animation: none !important;
    animation: none !important;
    visibility: hidden;
}


/**********************************************************************************************************************/
/** BOTONES ***********************************************************************************************************/
/**********************************************************************************************************************/

.boton{
    background-color: var(--colorInicioSesion);
    color: var(--text-color-2);
    display: block;
    padding: .5rem 2rem;
    border-radius: 5px;
    outline: none;
    font-size: 15px;
    letter-spacing: 1.5px;
    font-weight: bold;
    cursor: pointer;
    margin-bottom: 2rem;
    transition: all 0.1s ease-in-out;
    border: none;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
    -webkit-transition: all 0.1s ease-in-out;
    -moz-transition: all 0.1s ease-in-out;
    -ms-transition: all 0.1s ease-in-out;
    -o-transition: all 0.1s ease-in-out;
    display: flex;
    align-items: center;
    justify-content: center;
}
.boton:hover{
    box-shadow: 0 0 10px 1px rgb(0, 0, 0, 0.15);
    transform: scale(1.02);
    -webkit-transform: scale(1.02);
    -moz-transform: scale(1.02);
    -ms-transform: scale(1.02);
    -o-transform: scale(1.02);
}




/**********************************************************/

.bVolver {
    margin-top: 3rem;
    padding: 0.5rem 1.5rem;
    border: 1px solid var(--text-color-2);
}
.bVolver p {
    color: var(--text-color-2);
}

/**********************************************************/

.bEntrar {
	width: 250px;
}


/**********************************************************************************************************************/
/** ESTRUCTURA ********************************************************************************************************/
/**********************************************************************************************************************/

#cabecera {
    position: fixed;
    top: 0px;
    z-index: 99998;
    width: 100%;
}

#barraMenu {
    min-height: 100px;
    border-bottom: 0;
    -webkit-transition: border 0.7s ease-in-out;
	-moz-transition: border 0.7s ease-in-out;
	-ms-transition: border 0.7s ease-in-out;
	-o-transition: border 0.7s ease-in-out;
	transition: border 0.7s ease-in-out;
    display: flex;
    align-items: center;
    justify-content: center;
}

.contenidoBarraMenu {
    display: flex;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: center;
    width: 80% !important;
    background-color: #ffffff;
    border-radius: 2rem;
}
.contenidoBarraMenu > div {
    flex-basis: 40%;
}
.contenidoBarraMenu img {
    margin: 0 auto;
    max-height: 80px;
}

.menu li p{
    font-size: inherit;
    font-family: inherit;
    color: inherit;
}

#menuLateralMovil p{
    color: inherit; 
    font-family: inherit; 
    font-size: inherit; 
    line-height: inherit; 
    text-align: inherit;
}
/**********************************************************/

.contenidoBloqueSeccion {
    margin: 0 auto;
}

/**********************************************************/

.tituloSeccion {
    margin: 0 auto 3rem auto;
    width: 100%;
}
.tituloSeccion h1 {
    margin: 0;
    color: var(--text-color-1);
    font-size: 2rem;
    letter-spacing: 3px;
    text-align: center;
    font-weight: 700;
    line-height: 2.1rem;
}
.tituloSeccion h2 {
    margin: 0;
    margin-bottom: 1.2rem;
    color: var(--text-color-1);
    font-size: .9rem;
    text-align: center;
    letter-spacing: normal;
}

.tituloH1{
    font-size: 2.2rem !important;
    font-weight: 800 !important;
    line-height: 2.75rem !important;
    font-family: 'Open Sans', sans-serif !important;
}

/**********************************************************/

.flexPanel {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: row;
}

.flexPanelCentral{
    flex-basis: 65%;
}

.flexPanelImg {
    width: 100%;
    display: flex;
    align-items: left;
    flex-direction: row;
    width: 50%;
}

.bloqueFlex {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
}

.bloqueFlexMultiLine {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: stretch;
}

/**********************************************************/

.bloqueCampoFormulario {
    margin: 0px;
    margin-right: 10px;
    margin-bottom: .5rem;
    float: left;
}
.bloqueReservas{
    display: flex;
    align-items: center;
}
.bloqueCampoFormulario p {
    margin: 0px;
    margin-bottom: 0.3rem;
    font-size: .8rem;
    color: #000000;
    font-weight: bold;
}
.bloqueCampoFormulario input[type='checkbox'] ~ p {
    display: inline;
    line-height: 1rem;
    color: #fff;
}
.bloqueCampoFormulario p.secundario {
    margin: 0px;
    margin-left: 5px;
    margin-right: 1rem;
    margin-bottom: .5rem;
    float: left;
    font-size: 1rem;
}
.bloqueCampoFormulario input {
    margin: 0px;
    padding: 5px;
    color: #000000;
    font-family: 'Open Sans', sans-serif;
    font-size: .9rem;
    background-color: #fbfbfb;
    border: 0px;
    border: 1px solid #C0C0C0;
    border-radius: 4px;
    float: left;
}
.bloqueCampoFormulario input[type='checkbox'] {
    width: 30px;
    height: 30px;
    margin-right: .5rem;
    margin-bottom: .5rem;
}
.bloqueCampoFormulario input[type='radio'] {
    width: 20px;
    height: 20px;
    margin-right: .5rem;
}
.bloqueCampoFormulario select {
    margin: 0px;
    padding: 5px;
    color: #000000;
    border: 0px;
    font-family: 'Open Sans', sans-serif;
    font-size: .9rem;
    background-color: #fbfbfb;
    border: 1px solid #C0C0C0;
    float: left;
    border-radius: 4px;
}
.bloqueCampoFormulario textarea {
    margin: 0px;
    padding: 5px;
    color: #000000;
    border: 0px;
    font-family: 'Open Sans', sans-serif;
    font-size: .9rem;
    background-color: #fbfbfb;
    border: 1px solid #C0C0C0;
}
.bloqueCampoFormulario img {
    float: left;
    margin-top: 1.5px;
    margin-left: 5px;
}

.campoObligatorio {
    color: #B40B15;
    font-size: 1.5rem;
    line-height: .6rem;
}

.campoFormularioError {
    border: 4px solid #B40B15 !important;
}

.bCampoFormulario_100 {
	width: calc(100% - 20px);
}
.bCampoFormulario_90 {
	width: calc(90% - 20px);
}
.bCampoFormulario_85 {
	width: calc(85% - 20px);
}
.bCampoFormulario_80 {
	width: calc(80% - 20px);
}
.bCampoFormulario_75 {
	width: calc(75% - 20px);
}
.bCampoFormulario_70 {
	width: calc(70% - 20px);
}
.bCampoFormulario_60 {
	width: calc(60% - 20px);
}
.bCampoFormulario_50 {
	width: calc(50% - 20px);
}
.bCampoFormulario_45 {
	width: calc(45% - 20px);
}
.bCampoFormulario_40 {
	width: calc(40% - 20px);
}
.bCampoFormulario_35 {
	width: calc(35% - 20px);
}
.bCampoFormulario_30 {
	width: calc(30% - 20px);
}
.bCampoFormulario_25 {
	width: calc(25% - 20px);
}
.bCampoFormulario_20 {
	width: calc(20% - 20px);
}
.bCampoFormulario_15 {
	width: calc(15% - 20px);
}
.bCampoFormulario_10 {
	width: calc(10% - 20px);
}

.flex {
    width: 100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-items: flex-start;
}

.flexBotonVM{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
}
/**********************************************************/

.videoResponsive {
       position: relative;
       padding-bottom: 56.25%; /* 16:9 */
       height: 0;
}

.videoResponsive iframe {
       position: absolute;
       top: 0;
       left: 0;
       width: 100%;
       height: 100%;
       z-index: 1;
}

/**********************************************************/

.controlesPaginacion {
    margin: 0rem 0 2rem 0;

    display: flex;
	flex-wrap: nowrap;
	justify-content: space-between;
	align-items: center;
}

.controlesPaginacion > p {
    margin: 0;
    font-size: .8rem;
    color: var(--text-color-2);
}

.controlesPaginacion .botonAnterior, .controlesPaginacion .botonAnteriorOff, .controlesPaginacion .botonSiguiente, .controlesPaginacion .botonSiguienteOff {
    padding: .5rem 1rem;
    background-color: var(--main-color-2);
}
.controlesPaginacion .botonAnteriorOff, .controlesPaginacion .botonSiguienteOff {
    background-color: #f1f1f1;
}
.controlesPaginacion .botonAnteriorOn:hover, .controlesPaginacion .botonSiguienteOn:hover {
    cursor: pointer;
    background-color: #929292;
}

.controlesPaginacion .botonAnterior {
    border-radius: 0px 10px 10px 0px;
    -moz-border-radius: 0px 10px 10px 0px;
    -webkit-border-radius: 0px 10px 10px 0px;
}
.controlesPaginacion .botonSiguiente {
    border-radius: 10px 0px 0px 10px;
    -moz-border-radius: 10px 0px 0px 10px;
    -webkit-border-radius: 10px 0px 0px 10px;
}

.controlesPaginacion .botonAnterior p, .controlesPaginacion .botonSiguiente p {
    margin: 0;
    font-size: 1.3rem;
    color: var(--text-color-1);
}
.controlesPaginacion .botonAnteriorOff p, .controlesPaginacion .botonSiguienteOff p {
    color: var(--color-gris-claro);
}

/**********************************************************/

.grecaptcha-badge {
    right: -1000px !important;
}

/**********************************************************/

.mfp-bg {
    z-index: 999998;
}
.mfp-wrap {
    z-index: 999999;
}

/**********************************************************/

.animation-not-started {
    opacity: 0;
}
.animation-start {
    opacity: 1;
}

/**********************************************************/

p.textoDestacado {
    margin: 0 auto 2rem auto;
    padding: 1rem;
    width: 80%;
    background-color: #666666;
    font-weight: 400;
    text-align: center;
    color: #ffffff;
}

/**********************************************************/

.cky-consent-bar .cky-consent-title {
    font-size: 13px !important;
    font-family: 'Open Sans', sans-serif  !important;
}
.cky-consent-bar p {
    font-size: 12px !important;
    font-family: 'Open Sans', sans-serif  !important;
}
.cky-tab-item {
    font-size: 11px;
    font-family: 'Open Sans', sans-serif  !important;
}

/**********************************************************************************************************************/
/** INICIO SESION *****************************************************************************************************/
/**********************************************************************************************************************/
#inicioSesion{
    margin: 0;
    box-sizing: border-box;
    font-family: "poppins";
    /* background-color: var(--background); */
    /* background: linear-gradient(to bottom right, #FFA07A, #FF8C00); */
    background: linear-gradient(to bottom, #ffffff 0%, #ffffff 50%, #2980b9 100%, #6dd5fa 50% );
    color: var(--text-color-2);
    letter-spacing: 1px;
    transition: background 0.2s ease;
    -webkit-transition: background 0.2s ease;
    -moz-transition: background 0.2s ease;
    -ms-transition: background 0.2s ease;
    -o-transition: background 0.2s ease;
}

#inicioSesion h1{
    font-size: 2rem;
}

.container{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

.login-container{
    position: relative;
    width: 22.2rem;
}

.bloqueImagenLogin{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}
.bloqueImagenLogin img{
    width: 250px;
}

.form-container{
    border: 1px solid hsla(0, 0%, 65%, 0.158);
    box-shadow: 0 0 36px rgb(0, 0, 0, 0.2);
    border-radius: 10px;
    backdrop-filter: blur(20px);
    z-index: 99;
    padding: 2rem;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
}

.circle{
    width: 8rem;
    height: 8rem;
    /* background: var(--colorInicioSesion); */
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    position: absolute;
}

.circle-one{
    background: #2980b9 ;
    top: 0;
    left: 0;
    z-index: -1;
    transform: translate(-45%, -45%);
    -webkit-transform: translate(-45%, -45%);
    -moz-transform: translate(-45%, -45%);
    -ms-transform: translate(-45%, -45%);
    -o-transform: translate(-45%, -45%);
}

.circle-two{
    background: #ffffff;
    bottom: 0;
    right: 0;
    z-index: -1;
    transform: translate(45%, 45%);
    -webkit-transform: translate(45%, 45%);
    -moz-transform: translate(45%, 45%);
    -ms-transform: translate(45%, 45%);
    -o-transform: translate(45%, 45%);
}

.login-container .botonInicioSesion{
    background-color: var(--colorInicioSesion);
    color: var(--text-color-2);
    display: block;
    padding: 13px;
    border-radius: 5px;
    outline: none;
    font-size: 18px;
    letter-spacing: 1.5px;
    font-weight: bold;
    width: 100%;
    cursor: pointer;
    margin-bottom: 2rem;
    transition: all 0.1s ease-in-out;
    border: none;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
    -webkit-transition: all 0.1s ease-in-out;
    -moz-transition: all 0.1s ease-in-out;
    -ms-transition: all 0.1s ease-in-out;
    -o-transition: all 0.1s ease-in-out;
    display: flex;
    align-items: center;
    justify-content: center;
}
.login-container .botonInicioSesion:hover{
    box-shadow: 0 0 10px 1px rgb(0, 0, 0, 0.15);
    transform: scale(1.02);
    -webkit-transform: scale(1.02);
    -moz-transform: scale(1.02);
    -ms-transform: scale(1.02);
    -o-transform: scale(1.02);
}

.frmInicioSesion input{
    background-color: transparent;
    border: 0;
    border-bottom: 2px #000000 solid;
    display: block;
    width: 100%;
    padding: 15px 0;
    font-size: 18px;
    color: #000000;
}
.frmInicioSesion input:focus,
.frmInicioSesion input:valid{
    outline: 0;
    border-bottom-color: #383838;
}
.frmInicioSesion label{
    position: relative;
    bottom: 50px;
    left: 0;
    pointer-events: none;
}
.frmInicioSesion label span{
    display: inline-block;
    font-size: 18px;
    min-width: 5px;
    color: var(--text-color-2);
    -webkit-transition: 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    transition: 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.frmInicioSesion input:focus+label span,
.frmInicioSesion input:valid+label span{
    color:#383838;
    transform: translateY(-30px);
    -webkit-transform: translateY(-30px);
    -ms-transform: translateY(-30px);
}

.textoRegistro{
    text-decoration: underline;
    cursor: pointer;
}
.textoRegistro:hover{
    color: #297fb8 !important;
}
/**********************************************************************************************************************/
/** CABECERA ***********************************************************************************************************/
/**********************************************************************************************************************/
.contenedorMenu{
    display: flex;
    position: fixed;
    top: 20px;
    gap: 2rem;
    align-items: center;
    padding: .5rem;
    width: 100%;
    z-index: 9999;
}

.contenedorMenuColor{
    /* background-color: #7c7c7c;
    border-radius: 1.5rem;    */
    /* background-color: #000000;
    border-radius: 1.5rem;
    border: 1px solid #ffffff59;
    box-shadow: 0 0 20rem 3px #ffffff9c; */
    border: 1px solid hsla(0, 0%, 65%, 0.158);
    box-shadow: 0 0 36px rgb(0, 0, 0, 0.2);
    border-radius: 1.5rem;
    backdrop-filter: blur(20px);
    z-index: 99;
    background-color: #ffffff14
}
.btnMenu {
    background-color: transparent;
    border: none;
    cursor: pointer;
    display: flex;
    padding: 0;
    margin-left: 1rem;
}
.line {
    fill: none;
    stroke: rgb(255, 255, 255);
    stroke-width: 6;
    transition: stroke-dasharray 600ms cubic-bezier(0.4, 0, 0.2, 1),
    stroke-dashoffset 600ms cubic-bezier(0.4, 0, 0.2, 1);
}
.line1 {
    stroke-dasharray: 60 207;
    stroke-width: 6;
}
.line2 {
    stroke-dasharray: 60 60;
    stroke-width: 6;
}
.line3 {
    stroke-dasharray: 60 207;
    stroke-width: 6;
}
.opened .line1 {
    stroke-dasharray: 90 207;
    stroke-dashoffset: -134;
    stroke-width: 6;
}
.opened .line2 {
    stroke-dasharray: 1 60;
    stroke-dashoffset: -30;
    stroke-width: 6;
}
.opened .line3 {
    stroke-dasharray: 90 207;
    stroke-dashoffset: -134;
    stroke-width: 6;
}

.content{
    display: flex;
    /* gap: 2rem; */
    width: 100%;
    align-items: center;
    justify-content: center;
}
.content ul{
    position: relative;
    display: flex;
    gap: 5rem;
    flex-direction: row;
    width: 100%;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin: 0;
}
.content ul li{
    position: relative;
    list-style: none;
    margin: 0;
}
.content ul li a{
    position: relative;
    font-size: 1.7rem;
    text-decoration: none;
    line-height: 3rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: transparent;
    -webkit-text-stroke: 1px rgb(255, 255, 255, 0.5);
}
.content ul li a:hover{
    cursor: pointer;
}
.content ul li a::before{
    content: attr(data-text);
    position: absolute;
    color: var(--clr);
    line-height: 3rem;
    letter-spacing: 2px;
    font-size: 1.7rem;
    width: 0;
    overflow: hidden;
    transition: 1s;
    -webkit-text-stroke: 1px var(--clr);
}
.content ul li a:hover::before{
    width: 100%;
    filter: drop-shadow(0 0 25px var(--clr));
}

.logoCabecera img{
    width: 250px;
}

/**********************************************************************************************************************/
/** INICIO   **********************************************************************************************************/
/**********************************************************************************************************************/
.videoInicio{
    height: 100%;
    width: 100%;
    background-color: #fff;
}
.videoInicio h1{
    color: var(--main-color-1);
    margin: 0;
    margin-bottom: 1rem;
    font-size: 3rem;
    font-weight: bold;
    text-align: center;
    width: 100%;
    padding-top: 1rem;
}
.videoInicio p{
    color: var(--text-color-2);
    color: var(--text-color-2);
    text-align: center;
    font-size: 1rem;
    font-weight: bold;
    padding-bottom: 1rem;
}

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


.maquinaEscribir{
    display: block;
    font-family: monospace;
    white-space: nowrap;
    border-right: 3px solid;
    width: 51ch;

    animation: typing 4s steps(51),
    blink .5s infinite step-end alternate;

    overflow: hidden;
}


@keyframes typing{
    from{ width: 0;}
}
/**********************************************************************************************************************/
/** BUSCADOR **********************************************************************************************************/
/**********************************************************************************************************************/
.buscador{
    width: 100%;
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
}
.buscador p{
    color: var(--text-color-1);
}
.botonesBuscador{
    display: flex;
    margin: 0 2rem;
    gap: 2rem;
    margin-bottom: 0.5rem;
}
.botonesBuscador .boton{
    margin: 0;
}

.contenedorBuscador{
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 5rem;
}

.botoneraNuevosRegistros{
    display: flex;
    width: 100%;
    justify-content: center;
}  
.botoneraNuevosRegistros .boton{
    width: 60%;
}

/** PAGINACIÓN ────────────────────────────────────────────────────────────────────────────────────────────────────── */

.filaPaginacion {
    width: 100%;
    
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
}

#numResultadosPaginacion {
    margin: 5px;
    padding-right: 5px;
	display: flex;
	flex-wrap: nowrap;
  	align-items: center;
  	justify-content: flex-start;
	border-radius: 6px;
	background-color: #2e3642;
}

#numResultadosPaginacion p {
    margin: 0px 5px;
    font-size: 0.7rem;
    color: #ffffff;
}

#numResultadosPaginacion select {
    padding: 0px 2px;
    height: 25px;
    border: 0px;
	font-size: .7rem;
	color: #ffffff;
	background-color: #2e3642;
}

.resultadosBusqueda p {
    padding: 0 .5rem;
    font-weight: bold;
    color: #cf4636;
    border: dotted 1px #cf4636;
}

#controlesPaginacion {
    margin: 5px;
	display: flex;
	flex-wrap: nowrap;
  	align-items: center;
  	justify-content: flex-start;	
}

#controlesPaginacion img {
	margin: 0px 2px;
	height: 25px;
}

#controlesPaginacion img.off {
   opacity: 0.2;
}

#controlesPaginacion p {
    margin: 0px 5px;
    font-size: 0.7rem;
    color: #333333;
}
/** TABLAS ────────────────────────────────────────────────────────────────────────────────────────────────────────── */

.tablaLogs {
    height: 300px;
    overflow: auto;
}

h2.tituloLogs {
    margin-top: 30px;
    padding: 5px;
    background-color: #333333;
    font-family: 'Open Sans', sans-serif;
    font-size: 12px;
    font-weight: 700;
    color: #FFFFFF;
}

.tablaResultados {
	width: 100%;
}

.tablaResultados a:link, .tablaResultados a:active, .tablaResultados a:visited {
    text-decoration: none;
    color: var(--text-color);
}
.tablaResultados a:hover {
    text-decoration: none;
}

.tablaResultados table {
	width: 100%;
}

.tablaResultados thead th {
    background-color: #333333;
    font-family: 'Open Sans', sans-serif;
    font-size: .9rem;
    font-weight: 700;
    text-align: center;
    color: #ffffff;
	padding: 5px;
}
.tablaResultados thead th a {
    color: #FFFFFF !important;
    text-decoration: underline !important;
}

.tablaResultados thead th.celdaCabecera2 {
    background-color: #666666;
    font-family: 'Open Sans', sans-serif;
    font-size: .8rem;
    font-weight: 700;
    text-align: center;
    color: #ffffff;
	padding: 3px;
}

.tablaResultados thead th img, .tablaResultados tbody td img {
	margin: 0px auto;
	width: 25px;
	max-height: 25px;
	cursor: pointer;	
}
.tablaResultados thead th img {
	float: none !important;
}
.tablaResultados tbody td > img {
	float: none;
}

.filaDatos td {
	position: relative;
	z-index: 1;
}

.botonesTabla div {
	display: flex;
	flex-wrap: nowrap;
  	align-items: center;
  	justify-content: center;  
}

.menuBotones {
	cursor: pointer;
	display: none;
}

.bloqueBotones {
	position: absolute;
	top: 1px;
	left: 2px;
	display: none;
  	padding: 2px;
	background-color: rgba(0,0,0,0.7);
}

.bloqueBotones img {
	float: left;
    margin: 2px 5px 2px 5px !important;
}

td.botonesTabla img {
    margin: 0px 5px 0px 5px !important;
}

.botonesTabla img.off {
	cursor: default;
	opacity: 0.1;
}

.N {
	cursor: pointer;
}

.tablaResultados tbody td {
    margin: 0px;
    padding: 0px;   
    border-bottom: 1px solid #BEBEBE;
    font-family: 'Open Sans', sans-serif;
    font-size: .9rem;
    text-align: center;
    color: var(--text-color);
    padding: 5px;
}

.tablaResultados input[type="checkbox"] {
    width: 30px;
    height: 30px;
}

.filaDatos {
    background-color: #ffffff;
}
.filaDatos:hover {
    background-color: #EEEEEE;
}

.filaDatosBaja {
    background-color: #ffd3d3;
}
.filaDatosBaja:hover {
    background-color: #EEEEEE;
}

.filaDatos_Sub {
    display: none;
    background-color: #ffffff;
    margin-bottom: 10px;
}

.filaDatos_Sub_Ajax {
	padding-bottom: 2rem !important;
}

.filaCargandoDatos  {
    display: none;
}

.filaCargandoDatos p {
    margin: 10px;
    font-weight: 700;
    font-size: 11px;
    color: #5F5F5F;
}

.colgadorSubTabla {
    background-image: url('../imagenes/colgadorSubTabla.svg');
    background-repeat: no-repeat;
}

.subTabla {
    padding-top: 8px;
}

.subTabla img.loading {
	padding: 5px 0px 5px 0px;
	width: auto;
	height: auto;
    margin-left: 0px;
    margin-right: 0px;
}

table .separador {
	height: 20px;
	background-color: #BEBEBE;
}

/**********************************************************************************************************************/
/** TO DO   **********************************************************************************************************/
/**********************************************************************************************************************/

.contenedorTodo{
    font-family: "Poppins", sans-serif;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    min-height: 100vh;
    background: linear-gradient(to right bottom, #1e1e1e, #0e2b3e, #297fb8);
}

.dia{
    color: white;
    display: flex;
    align-items: center;
}
.dia p{
    font-size: 30px;
    padding: 1rem;
}
.dia svg:hover{
    cursor: pointer;
}

.app{
    color: #ffffffb0;
    background-color: #ffffff21;
    width: var(--app-width);
    border-radius: var(--radius);
    padding: 2rem;
    box-shadow: 0 15px 40px -20px black;
}
.app-cabecera{
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1.5rem;
}
.app h1{
    margin-top: 0;
    margin-bottom: 0;
    font-size: 28px;
}
.boton-mover-hoy{
    border: 0;
    border-radius: 8px;
    padding: .6rem .9rem;
    font-family: "Poppins", sans-serif;
    font-size: .8rem;
    font-weight: 700;
    background-color: #297fb8;
    color: #ffffff;
    cursor: pointer;
    transition: opacity .2s ease;
}
.boton-mover-hoy:hover{
    opacity: .9;
}

.todo-input{
    width: 100%;
    margin-bottom: 2rem;
    border: none;
    border-radius: var(--radius);
    padding: 1rem 1.5rem;
    font-size: 20px;
    background-color: #f4f4f425;
    color: white;
}
.todo-input::placeholder{
    color: #ffffff70;
}

.todos, 
.completed-todos,
.uncompleted-todos{
    display: flex;
    flex-direction: column;
    gap: .8rem;
}

.todo-item{
    background-color: #f4f4f4bd;
    padding: 1rem 1.5rem;
    border-radius: var(--radius);
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: black;
}
/* .todo-item span{
    display: flex;
    align-items: center;
    gap: .8rem;
    width: 90%;
} */
.todo-item input[type=checkbox]{
    width: 20px;
    height: 20px;
    accent-color: lime;
    margin: 0;
}
.todo-item p{
    margin-left: .8rem;
    color: black;
}
.todo-item a{
    color: #555555;
}
.todo-item a:hover{
    cursor: pointer;
}
.todo-item a svg{
    width: 25px;
    height: 25px;
    pointer-events: none;
}

.completed-todos .todo-item{
    background-color: #74c674;
    text-decoration: line-through;
}

.completed-title{
    font-size: 20px;
    margin-top: 30px;
    margin-bottom: 10px;
}