@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
 @import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
 @import url("https://use.fontawesome.com/releases/v5.8.1/css/all.css");
 :root {
     /* FUENTE */
     --Roboto: "Roboto", sans-serif;
     --FontTicket: 'VT323', monospace;
     --Titulos: calc(2vw + 3vh);
     --Contenidos: calc(1vw + 2vh);
     /* COLORES */
     /******* Background */
     --Primary_Background: #e4e4e4;
     --Primary_Background_Dark: #272727;
     /******* Elements */
     --Primary_Color: #001A9D;
     --Primary_Color_Dark: #0E69AD;
     --Primary_Color_Oscured: #00146A;
     --Secondary_Color: #0E69AD;
     --Secondary_Color_Dark: #4CA6FB;
     --Secondary_Color_Oscured: #002B5C;
     --Third_Color: #002B5C;
     --Positive_Color: #047000;
     --Positive_Color_Dark: #039000;
     --Negative_Color: #A00A00;
     --Negative_Color_Dark: #900900;
     --Element_Background: #D9D9D9;
     --Element_Text: #020202;
     --Element_Placeholder: #070707;
     /******* Components */
     --Card: #F0F0F0;
     /******* MasColores */
     --verde: #246B1D;
     --negro: #151515;
     --blanco: #FFF;
     /* BORDERS */
     --BRadius_Element: 7px;
     --BRadius_Card: 7px;
     /* SOMBRAS */
     --Sombra_Cards: 0px 1px 3px 0px #00000077;
     --Sombra_Cards_Inset: inset -1px 3px 10px 1px #00000077;
     --Sombra_Cards_Inset2: inset -1px 1px 8px -1px #00000077;
     --Sombra_Element: 0px 2px 7px 0px #00000077;
     --Sombra_Element_Error: 0px 0px 8px 2px #FF0000;
     --Sombra_Boton: inset 0px -4px 2px 0px #00000077;
     --Sombra_Boton_Hover: inset 0px -8px 2px 0px #00000077;
     --Sombra_Boton_Press: inset 0px 4px 2px 0px #00000077;
     --Sombra_Boton_Small: inset 0px -2px 2px 0px #00000077;
     --Sombra_Boton_Hover_Small: inset 0px -3px 2px 0px #00000077;
     --Sombra_Boton_Press_Small: inset 0px 2px 2px 0px #00000077;
 }
 
 body {
     font-family: var(--Roboto);
     margin: 0px !important;
     background-color: var(--Primary_Background);
     box-sizing: border-box;
     -webkit-touch-callout: none;
     -webkit-user-select: none;
     -khtml-user-select: none;
     -moz-user-select: none;
     -ms-user-select: none;
     user-select: none;
     color: var(--Element_Text);
     scrollbar-width: thin;
 }
 /* ********************************************************************************* */
 /* ************************************ INPUTS  ***************************************/
 /* ********************************************************************************* */
 
 * {
     box-sizing: border-box;
     font-family: var(--Roboto);
 }
 
 ul li {
     padding: 0;
     list-style: none;
     margin: 0;
 }
 
 a {
     text-decoration: none;
     color: white;
 }
 
 input,
 select,
 textarea {
     background-color: var(--Element_Background);
     outline: none;
     border: 0;
     border-radius: var(--BRadius_Element);
     height: 48px;
     color: var(--Element_Background);
     width: 100%;
     font-size: 20px;
     padding-left: 10px;
     transition: 0.9s ease all;
 }
 
 textarea:not(:placeholder-shown),
 select:not(:placeholder-shown),
 input:not(:placeholder-shown) {
     color: var(--Element_Text);
 }
 
 textarea {
     height: 140px;
     margin: -5px;
     resize: none;
     border: 18px solid var(--Element_Background);
 }
 
 input:hover,
 select:hover,
 textarea:hover {
     box-shadow: var(--Sombra_Element);
 }
 
 input[type="number"] {
     -webkit-appearance: textfield;
     -moz-appearance: textfield;
     appearance: textfield;
 }
 
 input[type=number]::-webkit-inner-spin-button,
 input[type=number]::-webkit-outer-spin-button {
     -webkit-appearance: none;
 }
 
 .Element {
     position: relative;
 }
 
 .Element .placeholder,
 .inputmessage {
     position: absolute;
     pointer-events: none;
     padding: 0px 5px;
     left: 20px;
     top: 10px;
     transition: 0.5s ease all;
     font-size: 20px;
     color: var(--Element_Placeholder);
     white-space: nowrap;
 }
 
 .SelectCardModal {
     position: relative;
 }
 
 .SelectCardModal .CardSelect {
     position: absolute;
     background-color: var(--Element_Background);
     border-radius: var(--BRadius_Element);
     box-shadow: var(--Sombra_Cards);
     min-height: 50px;
     height: max-content;
     width: 100%;
     padding: 5px;
     margin-top: 5px;
     display: none;
     z-index: 5;
 }
 
 .SelectCardModal .CardSelect .Opciones {
     width: 100%;
     font-weight: 500;
     font-size: 15px;
     border-radius: var(--BRadius_Card);
     padding: 2px;
     color: rgb(32, 32, 32);
     cursor: pointer;
 }
 
 .SelectCardModal .CardSelect .Opciones:hover {
     background-color: #ececec;
 }
 
 textarea~.placeholder,
 textarea~.inputmessage {
     border-radius: var(--BRadius_Element);
     background-color: var(--Element_Background);
 }
 
 *::placeholder {
     color: var(--Element_Background);
 }
 
 textarea:focus~.placeholder,
 textarea:not(:placeholder-shown)~.placeholder,
 input:focus~.placeholder,
 input:not(:placeholder-shown)~.placeholder,
 select:focus~.placeholder,
 select:not(:placeholder-shown)~.placeholder {
     top: -3px;
     font-size: 15px;
 }
 
 .inputmessage {
     left: inherit;
     top: inherit;
     right: 20px;
     bottom: 0px;
     font-size: 15px;
 }
 
 .inputmessage.error {
     color: var(--Negative_Color);
 }
 
 .inputmessage.info {
     color: var(--Primary_Color_Dark);
     bottom: inherit;
     top: 0;
 }
 
 input.prefix {
     padding-left: 45px;
 }
 
 input.prefix~.placeholder {
     padding-left: 30px;
 }
 
 i.prefix {
     position: absolute;
     top: 7px;
     left: 10px;
 }
 
 input.sufix {
     padding-right: 45px;
 }
 
 input.sufix~.inputmessage {
     padding-right: 30px;
 }
 
 i.sufix {
     position: absolute;
     top: 7px;
     right: 10px;
 }
 
 .MiniProgressBar {
     position: absolute;
     display: none;
     top: inherit;
     left: 0;
     bottom: -8px;
     right: 0;
     margin-left: auto;
     margin-right: auto;
     background-color: var(--Secondary_Color_Dark);
     border-radius: var(--BRadius_Element);
     width: 50%;
     height: 10px;
     padding: 2px;
     text-align: center;
 }
 
 .MiniProgressBar .BarProgress {
     background-color: var(--Primary_Color);
     border-radius: var(--BRadius_Element);
     width: 0%;
     height: 100%;
     margin: auto 0;
 }
 /* ********************************************************************************* */
 /* ************************************ SELECT **************************************/
 /* ********************************************************************************* */
 /* ********************************************************************************* */
 /* ************************************ BOTONES**************************************/
 /* ********************************************************************************* */
 
 button {
     border-radius: var(--BRadius_Element);
     background-color: var(--Primary_Color_Oscured);
     height: 48px;
     outline: none;
     border: 0;
     width: 100%;
     font-size: 25px;
     color: var(--Element_Background);
     box-shadow: var(--Sombra_Boton);
     transition: 0.2s ease all;
     text-transform: uppercase;
     padding-bottom: 2px;
     cursor: pointer;
 }
 
 button:hover {
     box-shadow: var(--Sombra_Boton_Hover);
     padding-bottom: 10px;
 }
 
 button:active {
     box-shadow: var(--Sombra_Boton_Press);
     padding-bottom: 0px;
 }
 
 button.positive {
     background-color: var(--Positive_Color);
 }
 
 button.negative {
     background-color: var(--Negative_Color);
 }
 /* ********************************************************************************* */
 /* ************************************ SCROLLS  *************************************/
 /* ********************************************************************************* */
 
 ::-webkit-scrollbar {
     width: 0px;
 }
 
 ::-webkit-scrollbar-track {
     /* box-shadow: inset 0 0 5px grey; */
     border-radius: 10px;
     background-color: transparent;
 }
 
 ::-webkit-scrollbar-thumb {
     background: var(--Secondary_Color_Dark);
     border-radius: 10px;
 }
 
 ::-webkit-scrollbar-thumb:hover {
     background: var(--Secondary_Color);
 }
 /* ********************************************************************************* */
 /* ************************************ MENU  ***************************************/
 /* ********************************************************************************* */
 
 .Menu {
     display: grid;
     grid-template-columns: 55px 1fr;
     height: calc(100vh - 14px);
     grid-template-rows: minmax(85vh, 1fr);
     width: calc(100% - 14px);
     gap: 15px;
     margin: 5px;
 }
 
 .MenuBar {
     display: grid;
     width: 55px;
     height: 99%;
     grid-template-rows: 55px 1fr 55px;
     background-color: var(--Primary_Color);
     align-items: center;
     justify-items: flex-start;
     border-radius: var(--BRadius_Card);
     position: fixed;
     z-index: 1;
     transition: 0.2s width ease-in, 0.2s min-width ease-in-out;
     overflow: hidden;
 }
 
 .MenuBarTopOpcion,
 .MenuBarBotOpcion {
     color: var(--negro);
     display: grid;
     height: 65px;
     width: 55px;
     border-radius: var(--BRadius_Card);
     align-items: center;
     justify-items: center;
     cursor: pointer;
 }
 
 .MenuBarTopOpcion {
     margin: auto;
 }
 
 .MenuBarTopOpcion img,
 .MenuBarBotOpcion img {
     height: 40px;
     width: 40px;
 }
 
 .MenuBarOpcions {
     display: grid;
     gap: 15px;
     /* overflow: auto; */
     height: 100%;
     width: 100%;
     align-content: center;
     justify-items: center;
 }
 
 .MenuBarOpcionsContainer {
     display: flex;
     width: 100%;
     margin: 0;
     padding: 5px;
     height: calc(100vh - 170px);
     align-content: center;
     /* align-items: center; */
     justify-content: flex-start;
     /* overflow-x: hidden; */
 }
 
 .MenuBarOpcionsList {
     display: grid;
     /* gap: 15px; */
     width: 100%;
     height: calc(100vh - 170px);
     margin: 0;
     padding: 0;
     position: relative;
     overflow: hidden;
     overflow-y: auto;
     /* justify-items: center; */
     align-items: center;
     align-content: space-between;
 }
 
 .MenuBarOpcion {
     height: 45px;
     width: 45px;
     padding: 5px;
     /* margin: auto; */
     margin-top: 15px;
     border-radius: var(--BRadius_Card);
     background-position: center;
     background-size: cover;
     z-index: 3;
     display: flex;
     align-items: center;
     justify-content: flex-start;
     cursor: pointer;
 }
 
 .MenuBarOpcion img {
     margin: auto 5px;
     height: 25px;
     width: 25px;
 }
 
 .MenuOpcionSelected {
     background-color: var(--blanco);
     box-shadow: inset 0px -5px 0px 0px #675229;
     transition: 0.2s box-shadow ease-in-out, 0.2s background-color ease-in-out, 0.2s width ease-in-out, 0.2s padding ease-in-out;
     padding-bottom: 10px;
 }
 
 .MenuOpcionSelected img {
     height: 27px;
     width: 27px;
 }
 
 .MenuToolTip {
     overflow: hidden;
     max-width: 0;
     display: flex;
     flex-basis: 100%;
     transition: 0.2s max-width ease-in-out;
 }
 
 .ScreenMenu {
     display: grid;
     /* max-height: 55vh; */
     gap: 5px;
     grid-template-rows: min-content 1fr;
     grid-column: 2;
 }
 
 .AppBar {
     display: flex;
     gap: 5px;
     justify-content: space-between;
     width: 100%;
 }
 
 .AppBarLogo {
     background-image: url('../../img/imago.png');
     background-size: contain;
     background-position: center;
     background-repeat: no-repeat;
 }
 
 .AppBarTitulo {
     display: grid;
     padding: 7px 0px;
     grid-template-columns: 1fr max-content;
     align-items: center;
     width: 100%;
 }
 
 .Perfil {
     display: flex;
     justify-content: flex-start;
     align-items: center;
     gap: 5px;
 }
 
 .Perfil .AvatarUsuario {
     border-radius: var(--BRadius_Card);
     background-size: cover;
     background-position: center;
     height: 50px;
     width: 50px;
     border: 1px solid #a8a8a8;
 }
 
 .Perfil .UsuarioNombre div:first-child {
     font-weight: 700;
 }
 
 .Perfil .UsuarioNombre:hover {
     color: var(--Secondary_Color_Dark);
     cursor: pointer;
     /* text-shadow: -1px 1px 1px var(--Secondary_Color_Dark); */
 }
 
 .Titulo {
     width: max-content;
     text-align: center;
     font-weight: bold;
     font-size: calc(var(--Contenidos) - 5px);
     color: var(--Primary_Color);
 }
 
 .tipo-usuario-perfil {
     font-size: small;
     text-align: right;
 }
 
 .AppBarTitulo .Acciones {
     display: flex;
     justify-content: space-evenly;
     align-items: center;
     gap: 5px;
     margin-right: 5px;
 }
 
 .Acciones button {
     /* padding: 10px; */
     width: 50px;
     height: 50px;
     border-radius: 7px;
 }
 /* ********************************************************************************* */
 /* ************************************ MENU CARDS  ***************************************/
 /* ********************************************************************************* */
 
 .SubMenuCards {
     overflow-x: scroll;
     width: calc(100vw - 90px);
 }
 
 .SubMenuCards .Menu {
     grid-template-columns: 280px minmax(320px, 1fr);
     margin-right: 15px;
     max-height: 80vh;
     min-width: 610px;
 }
 
 .SubMenuCards .MenuBar {
     display: grid;
     position: relative;
     z-index: 4;
     max-height: 80vh;
     /* height: calc(100% - 7px); */
     width: 280px;
     grid-template-rows: 80px 1fr;
     background-color: var(--Element_Background);
     align-items: center;
     justify-items: center;
     border-radius: var(--BRadius_Card);
 }
 
 .SubMenuCards .MenuBarOpcionsContainer {
     width: 280px;
     height: calc(80vh - 60px);
 }
 
 .SubMenuCards .MenuBarOpcionsList {
     height: calc(80vh - 60px);
 }
 
 .SubMenuCards .OpcionSelected {
     height: 160px;
     width: 275px;
     background-color: white;
     border-radius: var(--BRadius_Card) 0px 0px var(--BRadius_Card);
 }
 
 .SubMenuCards.OpcionSelected::before,
 .SubMenuCards .OpcionSelected::after {
     box-shadow: 0 -25px 0 0 white;
 }
 
 .SubMenuCards .MenuBarOpcion {
     height: 150px;
     width: 260px;
     background-color: var(--Primary_Color);
     border-radius: var(--BRadius_Card);
     color: white;
 }
 
 .SubMenuCards .MenuOpcionSelected {
     height: 150px;
     background-color: var(--Element_Background);
     width: 270px;
     color: black;
 }
 
 .SubMenuCards .MenuBarTopOpcion {
     box-shadow: var(--Sombra_Boton);
     color: white;
     font-size: 22px;
     width: 260px;
     height: 60px;
     margin-top: 10px;
 }
 /* ********************************************************************************* */
 /* ********************************** NOTIFICACIONES *********************************/
 /* ********************************************************************************* */
 
 .BackgroundMenu {
     top: 0;
     width: 100vw;
     height: 100vh;
     position: absolute;
     z-index: -1;
     background-color: var(--Primary_Background);
 }
 
 .Notificaciones {
     position: absolute;
     top: 10px;
     display: grid;
     grid-template-columns: minmax(100%, 500px);
     height: 120px;
     z-index: -2;
 }
 
 .Notificacion {
     display: flex;
     position: relative;
     align-items: center;
     height: 100px;
     width: 450px;
     max-width: 90vw;
     left: calc(100vw - 650px);
     background-color: var(--Primary_Color_Dark);
     box-shadow: var(--Sombra_Element);
     border-radius: var(--BRadius_Card);
     transition: 3s cubic-bezier(0.18, 0.89, 0.32, 1.28) all;
 }
 
 #NotificacionUsuarioFoto {
     background-position: center;
     background-size: cover;
     border-radius: 50%;
     margin: 5px;
     height: 90px;
     display: grid;
     grid-template-columns: minmax(90px, 50%);
 }
 
 #NotificacionClose {
     position: absolute;
     top: -8px;
     right: -12px;
     z-index: 11;
     background-color: var(--Secondary_Color);
     display: flex;
     align-items: center;
     justify-content: center;
     height: 40px;
     width: 40px;
     box-shadow: var(--Sombra_Boton);
     border-radius: 50%;
     color: white;
 }
 
 .Notificaciones p {
     color: white;
     margin: 0px;
 }
 
 .Notificaciones img {
     height: 70px;
 }
 
 .NoticiacionTexto {
     width: 260px;
 }
 
 #NotificacionMensaje {
     font-size: 24px;
 }
 
 #NotificacionUsuarioNombre {
     font-size: 18px;
 }
 
 #NotificacionHora {
     font-size: 15px;
     height: 15px;
     width: 100px;
 }
 
 .NotificacionClose {
     position: absolute;
     right: -10px;
     top: -5px;
     box-shadow: var(--Sombra_Element);
 }
 /* ********************************************************************************* */
 /* ********************************** NOTIFICACIONES *********************************/
 /* ********************************************************************************* */
 
 .Tablageneral {
     text-align: left;
     margin: 0;
     padding: 0;
 }
 
 .Tablageneral li {
     border-radius: 12px;
     padding: 15px;
     display: flex;
     justify-content: space-between;
     align-items: center;
     margin-bottom: 5px;
     cursor: pointer;
     transition: 0.3s;
 }
 
 .Tablageneral .TablaTitulo {
     background-color: var(--Primary_Color_Oscured);
     font-size: 14px;
     color: white;
     text-transform: uppercase;
     letter-spacing: 0.03em;
 }
 
 .Tablageneral .TablaRow {
     background-color: var(--Primary_Color);
     color: white;
     box-shadow: 0px 0px 9px 0px rgba(0, 0, 0, 0.1);
 }
 
 .TablaColumna {
     margin: auto 5px;
     flex-basis: 100%;
     display: flex;
     align-items: center;
     justify-content: left;
 }
 /* ********************************************************************************* */
 /* ********************************** MODAL **************************************** */
 /* ********************************************************************************* */
 
 .ModalPanel {
     background-color: #49494949;
     position: fixed;
     width: 100vw;
     height: 100vh;
     z-index: 5;
 }
 
 .ModalCard {
     background-color: white;
     width: 100%;
     max-width: 400px;
     height: max-content;
     min-height: 150px;
     border-radius: var(--BRadius_Card);
     position: absolute;
     top: 0;
     bottom: 0;
     left: 0;
     right: 0;
     margin: auto;
     padding: 10px;
     text-align: center;
     animation-name: bounceIn;
     animation-duration: .65s;
     animation-fill-mode: both;
 }
 
 .ModalCard h2 {
     color: #414344;
 }
 
 .ModalCard .FlexButtons {
     display: flex;
     width: 100%;
     align-items: center;
     justify-content: space-between;
     gap: 10px;
 }
 
 .ModalCard .icon {
     color: #94979b;
     margin: auto;
 }
 
 @keyframes bounceIn {
     0% {
         opacity: 0;
         -webkit-transform: scale3d(.3, .3, .3);
         transform: scale3d(.3, .3, .3);
     }
     20% {
         -webkit-transform: scale3d(1.1, 1.1, 1.1);
         transform: scale3d(1.1, 1.1, 1.1);
     }
     40% {
         -webkit-transform: scale3d(.9, .9, .9);
         transform: scale3d(.9, .9, .9);
     }
     60% {
         opacity: 1;
         -webkit-transform: scale3d(1.03, 1.03, 1.03);
         transform: scale3d(1.03, 1.03, 1.03);
     }
     80% {
         -webkit-transform: scale3d(.97, .97, .97);
         transform: scale3d(.97, .97, .97);
     }
     100% {
         opacity: 1;
         -webkit-transform: scale3d(1, 1, 1);
         transform: scale3d(1, 1, 1);
     }
 }
 /* ********************************************************************************* */
 /* ********************************** LOADER ************************************* */
 /* ********************************************************************************* */
 
 circle {
     transform-origin: center;
     transform-box: fill-box;
     transform-origin: center;
     animation: rotate linear infinite;
 }
 
 circle:nth-child(1) {
     animation-duration: 1.6s;
     stroke: var(--Secondary_Color);
 }
 
 circle:nth-child(2) {
     animation-duration: 1.2s;
     stroke: var(--Primary_Color_Oscured);
 }
 
 circle:nth-child(3) {
     animation-duration: 0.8s;
     stroke: var(--Third_Color);
 }
 
 @keyframes rotate {
     100% {
         transform: rotate(360deg);
     }
 }
 
 .loader {
     width: 100px;
     height: 100px;
     position: absolute;
     top: 0;
     bottom: 0;
     right: 0;
     left: 0;
     margin: auto;
     z-index: 2;
 }
 /* ********************************************************************************* */
 /* ********************************** CHECKBOX ************************************* */
 /* ********************************************************************************* */
 
 .control {
     font-family: arial;
     display: block;
     position: relative;
     padding-left: 30px;
     margin-bottom: 5px;
     padding-top: 3px;
     cursor: pointer;
     font-size: 16px;
 }
 
 .control input {
     position: absolute;
     z-index: -1;
     opacity: 0;
 }
 
 .control_indicator {
     position: absolute;
     top: 2px;
     left: 0;
     height: 20px;
     width: 20px;
     background: var(--Element_Background);
     border: 0px solid #000000;
     border-radius: 7px;
 }
 
 .control:hover input~.control_indicator,
 .control input:focus~.control_indicator {
     background: #cccccc;
 }
 
 .control input:checked~.control_indicator {
     background: var(--Primary_Color_Dark);
 }
 
 .control:hover input:not([disabled]):checked~.control_indicator,
 .control input:checked:focus~.control_indicator {
     background: #0e6647d;
 }
 
 .control input:disabled~.control_indicator {
     background: #e6e6e6;
     opacity: 0.6;
     pointer-events: none;
 }
 
 .control_indicator:after {
     box-sizing: unset;
     content: '';
     position: absolute;
     display: none;
 }
 
 .control input:checked~.control_indicator:after {
     display: block;
 }
 
 .control-checkbox .control_indicator:after {
     left: 8px;
     top: 4px;
     width: 3px;
     height: 8px;
     border: solid #ffffff;
     border-width: 0 2px 2px 0;
     transform: rotate(45deg);
 }
 
 .control-checkbox input:disabled~.control_indicator:after {
     border-color: #7b7b7b;
 }