* {
   margin: 0;
   padding: 0;
}

:root {
   --color_white: #fff;
   --color_light_white: #eff6f8;
   --color_dark: #000;
   --color_dark_blue: #385e6f;
   --color_darker_blue: #2c4a5b;
   --color_light_blue: #67acc6;
   --color_secondary_subtle: #d8d8d9;
   --color_bi_color_blue: #BFDAE4;
   --color_light_gray: #c2bebe;
   --color_light_gray_subtle: #f0f0f0;
   --color_lighter_blue: #F0F6F9;
   --color_gray_subtle: #F9F8F8;
   --color_gold: #FFD700;
   --color_semi_transparent_white: #f8f8f8;
   --color_red: #ff0033;
   --color_hard_info: #1F9AB7;
   --color_darker_hard_info: #1A7A9C;
}

@font-face {
   font-family: "Montserrat-Regular";
   src: url("../fonts/Montserrat/Montserrat-Regular.ttf") format("truetype");
}


@font-face {
   font-family: "Montserrat-Bold";
   src: url("../fonts/Montserrat/Montserrat-Bold.ttf") format("truetype");
}

@font-face {
   font-family: "Montserrat-SemiBold";
   src: url("../fonts/Montserrat/Montserrat-SemiBold.ttf") format("truetype");
}

.z-index-11 {
   z-index: 11;
}

h2,
h3,
h4,
h5,
h6,
p,
a,
li,
button,
label,
select,
option,
button {
   font-family: "Montserrat-Regular";
}

h1 {
   font-family: "Montserrat-SemiBold";
}

.btn {
   border-radius: 0;
}

/*Buttons*/
.btn-primary {
   --bs-btn-color: #fff;
   --bs-btn-bg: #385E70;
   --bs-btn-border-color: #385E70;
   --bs-btn-hover-color: #fff;
   --bs-btn-hover-bg: #304e5c;
   --bs-btn-hover-border-color: #304e5c;
   --bs-btn-focus-shadow-rgb: 130, 138, 145;
   --bs-btn-active-color: #fff;
   --bs-btn-active-bg: #304e5c;
   --bs-btn-active-border-color: #304e5c;
   --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
   --bs-btn-disabled-color: #fff;
   --bs-btn-disabled-bg: #304e5c;
   --bs-btn-disabled-border-color: #385E70;
   --bs-btn-disabled-opacity: 0.7;
}

.w-5 {
   width: 5%;
}

.w-10 {
   width: 10%;
}

.w-15 {
   width: 15%;
}

.w-20 {
   width: 20%;
}

.w-25 {
   width: 25%;
}

.w-30 {
   width: 30%;
}

.w-40 {
   width: 40%;
}

.w-45 {
   width: 45%;
}

.w-70 {
   width: 70%;
}

.w-75 {
   width: 75%;
}

.w-80 {
   width: 80%;
}

.w-85 {
   width: 85%;
}

.w-90 {
   width: 90%;
}

.w-95 {
   width: 95%;
}

.w-150 {
   width: 150%;
}

.w-img-logo {
   width: 69px;
}

.ml-15p {
   margin-left: 15% !important;
}

.ml-5p {
   margin-left: 5% !important;
}

.mxw-100 {
   max-width: 100%;
}

.mnh-100 {
   min-height: 100vh;
}

.mnh-stretch {
   min-height: stretch;
}

.mxh-100 {
   max-height: 100%;
}

.p-10px {
   padding: 10px !important;
}

.bg-hard-info {
   background: var(--color_hard_info);
   color: var(--color_white);
}

.bg-bi-color-blue {
   background: linear-gradient(180deg, rgba(56, 94, 111, 1) 0%, rgba(56, 94, 111, 1) 52%, rgba(39, 64, 77, 1) 50%, rgba(39, 64, 77, 1) 53%, rgba(225, 239, 244, 1) 53%, rgba(225, 239, 244, 1) 100%);
}

.bg-dark-blue {
   background: var(--color_dark_blue);
   color: var(--color_white);
}

.bg-light-white {
   background: var(--color_light_white);
   color: var(--color_dark);
}


.bg-light-gray-subtle {
   background: var(--color_light_gray_subtle);
   color: var(--color_dark);
}

.bg-lighter-blue {
   background: var(--color_lighter_blue);
   color: var(--color_dark);
}

.bg-semi-transparent-white {
   background: var(--color_semi_transparent_white);
   color: var(--color_dark);
}

.fz-1-3 {
   font-size: 1.3em;
}

.sidebar-content {
   transition: all 0.3s ease-in-out;
}

.main-content {
   transition: all 0.3s ease-in-out;
}

/*Seccion de tarjetas de provedores*/
.target {
   display: flex;
   align-items: center;
   background-color: var(--color_light_gray_subtle);
   border-radius: 5px;
   padding: 10px;
   width: 100%;
   cursor: pointer;
}

.target:hover {
   background-color: var(--color_light_gray);
}

.circle {
   width: 80px;
   height: 80px;
   border-radius: 50%;
   display: flex;
   justify-content: center;
   align-items: center;
   color: white;
   font-weight: bold;
   font-size: 30px;
   margin-right: 20px;
   flex-shrink: 0;
}

.description {
   display: flex;
   flex-direction: column;
}

.description h2 {
   margin: 0;
   font-size: 18px;
}

.description p {
   margin: 4px 0;
   font-size: 14px;
}

.text-dark-blue {
   color: var(--color_dark_blue);
}

.text-gold {
   color: var(--color_gold);
}

.group-floating {
   position: relative;
}

.group-floating .f-label {
   position: absolute;
   top: 50%;
   left: 10px;
   background: var(--color_white);
   padding: 0 5px;
   transform: translateY(-50%);
   transition: all 0.2s ease;
   pointer-events: none;
}

.group-floating .f-input:focus+.f-label,
.group-floating .f-input:not(:placeholder-shown)+.f-label {
   top: 0;
   left: 10px;
   font-size: 12px;
   background: var(--color_white);
   border-radius: 4px;
   padding: 0 5px;
}

.btn-dark-blue {
   background-color: var(--color_dark_blue);
   color: var(--color_white);
   border: none;
}

.btn-dark-blue:hover,
.btn-dark-blue:focus,
.btn-dark-blue:active {
   background-color: var(--color_darker_blue) !important;
   color: var(--color_white) !important;
}

.btn-dark-blue:disabled {
   background-color: var(--color_dark_blue) !important;
   color: var(--color_white) !important;
   opacity: 0.7;
}

.btn-outlined-dark-blue {
   background-color: transparent;
   color: var(--color_dark_blue);
   border: 2px solid var(--color_dark_blue);
   padding: 5px;
   transition: all 0.3s ease;
}

.btn-outlined-dark-blue:hover,
.btn-outlined-dark-blue:focus,
.btn-outlined-dark-blue:active {
   background-color: var(--color_dark_blue) !important;
   color: var(--color_white) !important;
}

.btn-outlined-dark-blue:disabled {
   background-color: transparent !important;
   color: var(--color_dark_blue) !important;
   border: 2px solid var(--color_dark_blue) !important;
   opacity: 0.7;
}

.btn-hard-blue {
   background-color: var(--color_hard_info);
   color: var(--color_white);
   border: none;
}

.btn-hard-blue:hover,
.btn-hard-blue:focus,
.btn-hard-blue:active {
   background-color: var(--color_darker_hard_info) !important;
   color: var(--color_white) !important;
}

.btn-hard-blue:disabled {
   background-color: var(--color_hard_info) !important;
   color: var(--color_white) !important;
   opacity: 0.7;
}

.title-section {
   color: #385e70;
}

.fs-6 {
   font-size: 1rem !important;
}

.fs-7 {
   font-size: 0.75rem !important;
}

.pointer {
   cursor: pointer;
}

.border-dark-blue {
   border: 2px solid var(--color_dark_blue)
}

.border-bottom-dark-blue {
   border-bottom: 2px solid var(--color_dark_blue) !important;
}

.cancel-btn-modal {
   position: absolute;
   top: -33px;
   right: -41px;
}

.select2 {
   width: 100% !important;
}

button {
   cursor: pointer;
   background-color: #385e70;
   color: #fff;
   border: none;
   padding: 10px;
}

select {
   padding: 10px;
   border: 1px solid #385e70;
   border-radius: 4px;
}

/*btn previous next*/
.prev {
   text-decoration: none;
   color: #385e70;
   cursor: pointer;
}

.next {
   text-decoration: none;
   color: #385e70;
   cursor: pointer;
}

.tab-list .tab {
   color: var(--color_dark);
   cursor: pointer;
   font-weight: bold;
   transition: all 0.3s ease;
}

.tab-list .tab.active,
.tab-list .tab:hover {
   color: var(--color_dark_blue);
   border-bottom: 3px solid var(--color_dark_blue);
}

/* Menú lateral (aside) */
.btn-aside-menu {
   display: none;
   position: fixed;
   top: 10px;
   left: 10px;
   z-index: 1000;
   /* width: 9%; */
   background: var(--color_dark_blue);
   color: var(--color_white);
}

.side-alert {
   position: fixed;
   top: 50px;
   right: 100%;
   background: var(--color_white);
   height: 94vh;
   width: 90%;
   border-radius: 0 40px 0 0;
   border: 1px solid var(--color_light_blue);
   overflow-y: auto;
   transition: all 0.3s ease;
}

.side-alert.active {
   right: 10%;
}

.side-alert .alert-content {
   position: absolute;
   top: 50%;
   transform: translate(0, -50%);
}

.side-alert .alert-content-top {
   position: absolute;
   top: 1%;
}

.splitter {
   border-top: 15px solid var(--color_darker_blue);
}

.splitter-bottom-secondary-subtle {
   border-bottom: 3px solid var(--color_secondary_subtle);
}

aside .nav-link {
   border-bottom: 5px solid var(--color_darker_blue);
}

aside .nav-link:hover,
aside .nav-link.active {
   background: var(--color_light_blue);
}

/* Loader */
.loader-bg {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background-color: rgba(0, 0, 0, 0.5);
   display: flex;
   justify-content: center;
   align-items: center;
   z-index: 2000;
}

.loader {
   width: 48px;
   height: 48px;
   display: inline-block;
   position: relative;
   transform: rotate(45deg);
}

.loader::before {
   content: '';
   box-sizing: border-box;
   width: 48px;
   height: 48px;
   position: absolute;
   left: 0;
   top: -48px;
   animation: animloader 4s ease infinite;
}

.loader::after {
   content: '';
   box-sizing: border-box;
   position: absolute;
   left: 0;
   top: 0;
   width: 48px;
   height: 48px;
   background: rgba(255, 255, 255, 0.85);
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
   animation: animloader2 2s ease infinite;
}

.border-bottom {
   border-bottom: 1px solid var(--color_dark_blue) !important;
}

.sticky-bar {
   position: sticky;
   top: 1rem;
   transition: background-color 0.5s ease-out 0.1s;
}

.error {
   color: #FF0033;
   font-size: 13px;
}

.easy-rotate {
   transform: rotate(0deg);
   transition: transform 0.3s ease;
}

.easy-rotate.active {
   transform: rotate(180deg);
}

.hide-r {
   display: block;
}

.show-r {
   display: none;
}

.border-table {
   border: 2px solid var(--color_light_gray) !important;
}

.drag-drop-area {
   width: 100%;
   min-height: 200px;
   border: 2px dashed var(--color_dark_blue);
   border-radius: 15px;
   justify-content: center;
   align-items: center;
   display: flex;
   padding: 20px 0 20px 0;
}

.drag-drop-area-hover {
   background-color: var(--color_secondary_subtle);
}

@keyframes animloader {
   0% {
      box-shadow: 0 48px rgba(255, 255, 255, 0), 48px 48px rgba(255, 255, 255, 0), 48px 96px rgba(255, 255, 255, 0), 0px 96px rgba(255, 255, 255, 0);
   }

   12% {
      box-shadow: 0 48px white, 48px 48px rgba(255, 255, 255, 0), 48px 96px rgba(255, 255, 255, 0), 0px 96px rgba(255, 255, 255, 0);
   }

   25% {
      box-shadow: 0 48px white, 48px 48px white, 48px 96px rgba(255, 255, 255, 0), 0px 96px rgba(255, 255, 255, 0);
   }

   37% {
      box-shadow: 0 48px white, 48px 48px white, 48px 96px white, 0px 96px rgba(255, 255, 255, 0);
   }

   50% {
      box-shadow: 0 48px white, 48px 48px white, 48px 96px white, 0px 96px white;
   }

   62% {
      box-shadow: 0 48px rgba(255, 255, 255, 0), 48px 48px white, 48px 96px white, 0px 96px white;
   }

   75% {
      box-shadow: 0 48px rgba(255, 255, 255, 0), 48px 48px rgba(255, 255, 255, 0), 48px 96px white, 0px 96px white;
   }

   87% {
      box-shadow: 0 48px rgba(255, 255, 255, 0), 48px 48px rgba(255, 255, 255, 0), 48px 96px rgba(255, 255, 255, 0), 0px 96px white;
   }

   100% {
      box-shadow: 0 48px rgba(255, 255, 255, 0), 48px 48px rgba(255, 255, 255, 0), 48px 96px rgba(255, 255, 255, 0), 0px 96px rgba(255, 255, 255, 0);
   }
}

@keyframes animloader2 {
   0% {
      transform: translate(0, 0) rotateX(0) rotateY(0);
   }

   25% {
      transform: translate(100%, 0) rotateX(0) rotateY(180deg);
   }

   50% {
      transform: translate(100%, 100%) rotateX(-180deg) rotateY(180deg);
   }

   75% {
      transform: translate(0, 100%) rotateX(-180deg) rotateY(360deg);
   }

   100% {
      transform: translate(0, 0) rotateX(0) rotateY(360deg);
   }
}

@media (min-width: 1024px) and (max-width: 1200px) {
   #sideMenu {
      width: 22% !important;
   }

   .mrl-22 {
      margin-left: 22% !important;
   }
}

/* Sección de responsividad */
@media (max-width: 798px),
(max-width: 950px) and (orientation: landscape) {
   .btn-aside-menu {
      display: block;
   }

   aside {
      width: 100% !important;
      padding: 0 !important;
      display: none !important;
      position: fixed;
      z-index: 1;
   }

   aside .nav-list {
      padding-inline: 3px;
      gap: 20px !important;
   }

   aside .nav-link {
      border: 1px solid var(--color_darker_blue);
      width: 97%;
      border-radius: 15px;
      font-weight: bold;
      display: flex;
      align-items: center;
   }

   aside .nav-link svg {
      color: var(--color_darker_blue) !important;
   }

   .text-center-responsive {
      text-align: center !important;
   }

   .mnh-100 {
      min-height: 100vh;
   }

   .mnw-103 {
      min-width: 103%;
   }

   .row-max-width-responsive {
      max-width: 103%;
   }

   .w-img-logo {
      width: 54px;
   }

   .loader {
      top: 0%;
      left: 0%;
   }

   .contentFull {
      margin-left: 0% !important;
      width: 100% !important;
   }

   .flex-responsive {
      flex-direction: column;
   }

   .flex-responsive-reverse {
      flex-direction: column-reverse;
   }

   .w-100r {
      width: 100% !important;
   }

   .mlr-0 {
      margin-left: 0 !important;
   }

   .text-center-responsive {
      text-align: center !important;
   }

   .table-div-responsive {
      overflow-x: auto;
      margin-inline: 0.5rem;
   }

   .overflow-x-responsive {
      overflow-x: auto;
   }

   .side-menu-header {
      background: var(--color_darker_blue) !important;
      margin-bottom: 0 !important;
   }

   .pb-50r {
      padding-bottom: 50px !important;
   }

   .mb-35r {
      margin-bottom: 35px !important;
   }

   .color-black-responsive {
      color: var(--color_dark) !important;
   }

   .bg-white-responsive {
      background: var(--color_white) !important;
   }

   .semi-circle-responsive {
      clip-path: ellipse(75% 100% at 50% 0%);
   }

   .splitter-r {
      border-top: 0px solid transparent !important;
   }

   .hide-r {
      display: none !important;
   }

   .show-r {
      display: block !important;
   }

   .btn-underlined-responsive {
      background: transparent !important;
      color: var(--color_darker_blue);
      padding: 0 !important;
   }
}