body {
  font-family: "Roboto", sans-serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
  overflow-x: hidden !important;
  scroll-behavior: smooth;
}

:root{
  overflow-x: hidden !important;
  scroll-behavior: smooth;
}

/* * {
  outline: 1px solid red;
} */

/*** Estilos propios ***/
.hidden{
	display: none !important;
}

.componente-desactivado{
  pointer-events: none !important;
  user-select: none !important;
  opacity: 0.6 !important;
}

/* Estilos cargando */
.spinner {
  background-image: linear-gradient(
    135deg,
    rgb(240, 198, 32) 0%,     /* amarillo */
    rgb(52, 168, 83) 33%,     /* verde */
    rgb(52, 188, 217) 66%,    /* celeste */
    rgb(35, 71, 216) 160%     /* azul oscuro */
  );
  width: 100px;
  height: 100px;
  animation: spinning82341 1.7s linear infinite;
  text-align: center;
  border-radius: 50px;
  filter: blur(1px);
  box-shadow: 
    0px -5px 20px 0px rgb(240, 198, 32), 
    0px 5px 20px 0px rgb(52, 188, 217),
    5px 0px 20px 0px rgb(52, 168, 83),
    -5px 0px 20px 0px rgb(35, 71, 216);
}
.spinner1 {
  background-color: rgb(36, 36, 36);
  width: 100px;
  height: 100px;
  border-radius: 50px;
  filter: blur(10px);
}
@keyframes spinning82341 {
  to {
    transform: rotate(360deg);
  }
}

/* ---------------------- Estilo checkbox ----------------------*/
/* From Uiverse.io by Shoh2008 */ 
.checkbox-wrapper-19 {
  box-sizing: border-box;
  --background-color: #fff;
  --checkbox-height: 15px;
}

@-moz-keyframes dothabottomcheck-19 {
  0% {
    height: 0;
  }

  100% {
    height: calc(var(--checkbox-height) / 2);
  }
}
@-webkit-keyframes dothabottomcheck-19 {
  0% {
    height: 0;
  }

  100% {
    height: calc(var(--checkbox-height) / 2);
  }
}
@keyframes dothabottomcheck-19 {
  0% {
    height: 0;
  }

  100% {
    height: calc(var(--checkbox-height) / 2);
  }
}
@keyframes dothatopcheck-19 {
  0% {
    height: 0;
  }

  50% {
    height: 0;
  }

  100% {
    height: calc(var(--checkbox-height) * 1.2);
  }
}
@-webkit-keyframes dothatopcheck-19 {
  0% {
    height: 0;
  }

  50% {
    height: 0;
  }

  100% {
    height: calc(var(--checkbox-height) * 1.2);
  }
}
@-moz-keyframes dothatopcheck-19 {
  0% {
    height: 0;
  }

  50% {
    height: 0;
  }

  100% {
    height: calc(var(--checkbox-height) * 1.2);
  }
}

.checkbox-wrapper-19 input[type=checkbox] {
  display: none;
}
.checkbox-wrapper-19 .check-box {
  height: var(--checkbox-height);
  width: var(--checkbox-height);
  background: #374151;
  border: none;
  border-radius: 6px;
  position: relative;
  display: inline-block;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -moz-transition: border-color ease 0.2s;
  -o-transition: border-color ease 0.2s;
  -webkit-transition: border-color ease 0.2s;
  transition: border-color ease 0.2s;
  cursor: pointer;
}
.checkbox-wrapper-19 .check-box::before,
  .checkbox-wrapper-19 .check-box::after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  position: absolute;
  height: 0;
  width: calc(var(--checkbox-height) * .2);
  background-color: #FFFFFF;
  display: inline-block;
  -moz-transform-origin: left top;
  -ms-transform-origin: left top;
  -o-transform-origin: left top;
  -webkit-transform-origin: left top;
  transform-origin: left top;
  border-radius: 5px;
  content: " ";
  -webkit-transition: opacity ease 0.5;
  -moz-transition: opacity ease 0.5;
  transition: opacity ease 0.5;
}
.checkbox-wrapper-19 .check-box::before {
  top: calc(var(--checkbox-height) * .72);
  left: calc(var(--checkbox-height) * .41);
  /* box-shadow: 0 0 0 calc(var(--checkbox-height) * .05) var(--background-color); */
  -moz-transform: rotate(-135deg);
  -ms-transform: rotate(-135deg);
  -o-transform: rotate(-135deg);
  -webkit-transform: rotate(-135deg);
  transform: rotate(-135deg);
}
.checkbox-wrapper-19 .check-box::after {
  top: calc(var(--checkbox-height) * .37);
  left: calc(var(--checkbox-height) * .05);
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}
.checkbox-wrapper-19 input[type=checkbox]:checked + .check-box::after,
  .checkbox-wrapper-19 .check-box.checked::after {
  height: calc(var(--checkbox-height) / 2);
  -moz-animation: dothabottomcheck-19 0.2s ease 0s forwards;
  -o-animation: dothabottomcheck-19 0.2s ease 0s forwards;
  -webkit-animation: dothabottomcheck-19 0.2s ease 0s forwards;
  animation: dothabottomcheck-19 0.2s ease 0s forwards;
}
.checkbox-wrapper-19 input[type=checkbox]:checked + .check-box::before,
  .checkbox-wrapper-19 .check-box.checked::before {
  height: calc(var(--checkbox-height) * 1.2);
  -moz-animation: dothatopcheck-19 0.4s ease 0s forwards;
  -o-animation: dothatopcheck-19 0.4s ease 0s forwards;
  -webkit-animation: dothatopcheck-19 0.4s ease 0s forwards;
  animation: dothatopcheck-19 0.4s ease 0s forwards;
}
.checkbox-wrapper-19 .check-label {
  display: flex;
  align-items: center;
  gap: 12px; 
  cursor: pointer;
  color: #D1D5DB;
}
.checkbox-wrapper-19 .check-text {
  font-size: 16px;
  line-height: 1.4;
  white-space: normal;
  word-break: break-word;
  max-width: 100%;
}


/* .checkbox-wrapper-19 input[type=checkbox]:checked + .check-box,
  .checkbox-wrapper-19 .check-box.checked {
  border-color: #34b93d;
} */


/* ---------------------- Estilos botones ----------------------*/
.btn-estilo-base{
  height: 40px;
  width: auto;
  padding: 5px 10px;
  border: 2px solid black;
  border-radius: 8px;
}

.btn-inicio{
  height: 40px;
  padding: 5px 10px;
  border: none;
  background: transparent;
  color: #fff;
  font-size: 22px;
}
.btn-inicio:hover{
  color: #34A853;
}
.btn-inicio:hover .icono-flecha {
  content: url("../../__data/_img/iconos/arrow-half-circle-right-green.webp");
}
.btn-inicio:hover .icono-login {
  content: url("../../__data/_img/iconos/login-green.webp");
}

.btn-inicio-accede{
  height: 68px;
  padding: 5px 10px;
  background: transparent;
  color: #34A853;
  border: 3px solid #34A853;
  border-radius: 8px;
  font-size: 32px;
  font-weight: 700;
  transition: all 0.5s;
}
.btn-inicio-accede:hover {
  color: #fff;
  background: #34A853;
  border: 3px solid #18993A;
  box-shadow: 0px 4px 15px 0px #1C943C;
}
.btn-inicio-accede:active {
  box-shadow: 0px 4px 15px 0px #1C943C;
}
@media (max-width: 576px) {
  .btn-inicio{
    font-size: 13px;
  }
  .btn-inicio-accede{
    height: 44px;
    font-size: 18px;
  }
}

.btn-dark-blue{
  min-height: 40px;
  min-width: 160px;
  padding: 5px 10px;
  border: none;
  border-radius: 8px;
  /* background: radial-gradient(circle, #213A93 0%, #2347D8 100%); */
  background: radial-gradient(100% 100% at 50% 50%, #213A93 0%, #2347D8 100%);
  color: #fff;
  font-size: 18px;
  font-weight: 400;
  box-shadow: 4px 4px 8px 0px rgba(0, 0, 0, 0.25);
  transition: all 0.8s;
}
.btn-dark-blue:hover{
  /* background: radial-gradient(circle, #213A93 0%, #2347D8 100%); */
  background: radial-gradient(100% 100% at 50% 50%, #2347D8 0%, #213A93 100%);
  box-shadow: 4px 4px 8px 0px rgba(0, 0, 0, 0.25) inset;
  transform: translateY(1px);
}

.btn-yellow{
  min-height: 40px;
  min-width: 160px;
  padding: 5px 10px;
  border: none;
  border-radius: 8px;
  background: #F0C620;
  color: #374151;
  font-size: 18px;
  font-weight: 700;
  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
  transition: all 0.5s;
}
.btn-yellow:hover{
  background: #F0C620;
  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25) inset;
  transform: translateY(1px);
}
.btn-yellow > svg,
.btn-yellow > img {
  transition: transform 0.3s ease-in-out;
}
.btn-yellow:hover img.ms-2 {
  transform: translateX(10px);
}
.btn-yellow:hover img.me-2 {
  transform: translateX(-10px);
}
.btn-yellow:active {
  transform: scale(0.95);
}

.btn-categorias{
  padding: 5px 10px;
  min-height: 37px;
  width: auto;
  margin-top: 20px;
  border-radius: 20px;
  border: none;
  background: #0D8EAA;
  color: #fff !important;
  font-size: 18px;
  font-weight: 600;
}
.btn-categorias:hover{
  background: #0D8EAA;
}
.btn-categorias.desactivado {
  opacity: 0.6;
}

.btn-green{
  min-height: 40px;
  min-width: 160px;
  padding: 5px 10px;
  border: none;
  border-radius: 8px;
  background: #34A853;
  color: #fff;
  font-size: 18px;
  font-weight: 400;
  box-shadow: 4px 4px 8px 0px rgba(0, 0, 0, 0.25);
  transition: all 0.5s;
}
.btn-green:hover{
  background: #34A853;
  box-shadow: 4px 4px 8px 0px rgba(0, 0, 0, 0.25) inset;
  transform: translateY(1px);
}

.btn-light-blue{
  min-height: 40px;
  min-width: 160px;
  padding: 5px 10px;
  border: none;
  border-radius: 8px;
  background: #1FA4E7;
  color: #FFFFFF;
  font-size: 18px;
  font-weight: 400;
  box-shadow: 4px 4px 8px 0px rgba(0, 0, 0, 0.25);
  transition: all 0.5s;
}
.btn-light-blue:hover{
  background: #1FA4E7;
  box-shadow: 4px 4px 8px 0px rgba(0, 0, 0, 0.25) inset;
  transform: translateY(1px);
}

.btn-green-sombra{
  min-height: 43px;
  padding: 10px 20px;
  background: transparent;
  color: #34A853;
  border: 3px solid #34A853;
  border-radius: 8px;
  font-size: 20px;
  font-weight: 700;
  transition: all 0.5s;
}
.btn-green-sombra:hover {
  color: #fff;
  background: #34A853;
  border: 3px solid #18993A;
  box-shadow: 0px 4px 15px 0px rgba(28, 148, 60, 1);
}
.btn-green-sombra:active {
  box-shadow: 0px 4px 15px 0px rgba(28, 148, 60, 1);
}

.btn-eliminar{
  min-height: 40px;
  min-width: 160px;
  padding: 5px 10px;
  border: none;
  border-radius: 8px;
  background: #8E8E8E;
  color: #FFFFFF;
  font-size: 18px;
  font-weight: 400;
  box-shadow: 4px 4px 8px 0px rgba(0, 0, 0, 0.25);
  transition: all 0.5s;
}
.btn-eliminar:hover{
  background: #FD5D5D;
  box-shadow: 4px 4px 8px 0px rgba(0, 0, 0, 0.25) inset;
  transform: translateY(1px);
}

.btn-orange{
  min-height: 40px;
  min-width: 160px;
  padding: 5px 10px;
  border: none;
  border-radius: 8px;
  background: radial-gradient(circle, #FA8B40 0%, #E87F3A 100%);
  color: #FFFFFF;
  font-size: 18px;
  font-weight: 400;
  box-shadow: 7px 7px 20px 0px rgba(0, 0, 0, .1),
              4px 4px 5px 0px rgba(0, 0, 0, .1);
  transition: all 0.5s;
}
.btn-orange:hover{
  background: radial-gradient(circle, #FA8B40 0%, #E87F3A 100%);
  box-shadow:  -2px -2px 6px 0 rgba(58, 61, 66, 0.5), 
              inset 0px 4px 6px 0 rgba(0, 0, 0, .4);
  transform: translateY(1px);
}

.btn-red{
  min-height: 40px;
  min-width: 160px;
  padding: 5px 10px;
  border: none;
  border-radius: 8px;
  background: #DD6060;
  color: #FFFFFF;
  font-size: 18px;
  font-weight: 400;
  box-shadow: 7px 7px 20px 0px rgba(0, 0, 0, .1),
              4px 4px 5px 0px rgba(0, 0, 0, .1);
  transition: all 0.5s;
}
.btn-red:hover{
  background: #DD6060;
  box-shadow:  -2px -2px 6px 0 rgba(58, 61, 66, 0.5), 
              inset 0px 4px 6px 0 rgba(0, 0, 0, .4);
  transform: translateY(1px);
}

.btn-gray{
  min-height: 40px;
  min-width: 160px;
  padding: 5px 10px;
  border: none;
  border-radius: 8px;
  background: #8E8E8E;
  color: #fff;
  font-size: 18px;
  font-weight: 400;
  box-shadow: 4px 4px 8px 0px rgba(0, 0, 0, 0.25);
  transition: all 0.5s;
}
.btn-gray:hover{
  background: #FD5D5D;
  box-shadow: 4px 4px 8px 0px rgba(0, 0, 0, 0.25) inset;
  transform: translateY(1px);
}

.btn-dark-blue-icono{
  min-height: 40px;
  padding: 5px 10px;
  border: none;
  border-radius: 8px;
  background: radial-gradient(100% 100% at 50% 50%, #213A93 0%, #2347D8 100%);
  color: #fff;
  font-size: 18px;
  font-weight: 400;
  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
  transition: all 0.5s;
}
.btn-dark-blue-icono:hover{
  background: radial-gradient(100% 100% at 50% 50%, #2347D8 0%, #213A93 100%);
  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25) inset;
  transform: translateY(1px);
}

.btn-gray-icono{
  min-height: 40px;
  padding: 5px 10px;
  border: none;
  border-radius: 8px;
  background: #8E8E8E;
  color: #fff;
  font-size: 18px;
  font-weight: 400;
  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
  transition: all 0.5s;
}
.btn-gray-icono:hover{
  background: #FD5D5D;
  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25) inset;
  transform: translateY(1px);
}

.btn-dark{
  height: 40px;
  padding: 5px 10px;
  border: none;
  border-radius: 8px;
  background: #1F2937;
  color: #fff;
  font-size: 18px;
  font-weight: 400;
  transition: all 0.5s;
}
.btn-dark:hover{
  background: #81878f;
}

.btn-gray-plan{
  padding: 5px 10px;
  border: none;
  border-radius: 8px;
  background: #868686;
  color: #fff;
  font-size: 24px;
  font-weight: 500;
}

.btn-purple-plan{
  padding: 5px 10px;
  border: none;
  border-radius: 8px;
  background: #9747FF;
  color: #fff;
  font-size: 24px;
  font-weight: 500;
}
.btn-purple-plan:hover{
  background: #750BFF;
}

.btn-sin-fondo{
  min-height: 40px;
  min-width: 160px;
  padding: 5px 10px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: #FFFFFF;
  font-size: 18px;
  font-weight: 400;
  box-shadow: none;
}





/* ---------------------- Estilos label/texto ----------------------*/
.txt-normal{
  color: #fff;
  font-size: 18px !important;
  font-weight: 400;
}
.txt-normal-gray{
  color: #BEBEBE;
  font-size: 18px;
  font-weight: 400;
}
.txt-normal-green{
  color: #34A853 !important;
  font-size: 18px !important;
  font-weight: 400 !important;
}
.txt-normal-dark-blue{
  color: #131C27;
  font-size: 18px;
  font-weight: 400;
}
.txt-tachado{
  text-decoration: line-through;
}
.tittle-negritas{
  color: #fff !important;
  font-size: 24px !important;
  font-weight: 700 !important;
}
.tittle-negritas-green{
  color: #34A853 !important;
  font-size: 24px !important;
  font-weight: 700 !important;
}
.tittle-negritas-red{
  color: #FD5D5D !important;
  font-size: 24px !important;
  font-weight: 700 !important;
}
.tittle-negritas-light-blue{
  color: #6BCDFF !important;
  font-size: 22px !important;
  font-weight: 700 !important;
}
.subtittle-negritas-light-blue{
  color: #6BCDFF !important;
  font-size: 18px !important;
  font-weight: 600 !important;
}
.subtittle-light-blue{
  color: #6BCDFF !important;
  font-size: 18px !important;
  font-weight: 400 !important;
}
.label-registro{
  color: #D1D5DB;
  font-size: 18px !important;
  margin-bottom: 0;
}
.label-principal{
  /* color: #D1D5DB; */
  color: #fff;
  font-size: 18px;
  margin-bottom: 0;
}
.label-categorias{
  min-height: 37px;
  width: auto;
  padding: 10px 20px;
  border-radius: 20px;
  border: none;
  background: #0d8eaa !important;
  color: #fff !important;
  font-size: 18px;
  font-weight: 600;
}
@media (max-width: 488px) {
  .label-categorias{
    /* width: 163px; */
    width: 130px;
    font-size: 15px;
    padding: 5px 10px;
  }
}
.label-pago-pagado{
  min-height: 37px;
  width: auto;
  padding: 5px 10px;
  border-radius: 8px;
  border: none;
  background: #1FA4E7 !important;
  color: #fff !important;
  font-size: 16px;
  font-weight: 500;
}
.label-pago-pendiente{
  min-height: 37px;
  width: auto;
  padding: 5px 10px;
  border-radius: 8px;
  border: none;
  background: #D87D23 !important;
  color: #fff !important;
  font-size: 16px;
  font-weight: 500;
}
.label-pago-cencelado{
  min-height: 37px;
  width: auto;
  padding: 5px 10px;
  border-radius: 8px;
  border: none;
  background: #DE4646 !important;
  color: #fff !important;
  font-size: 16px;
  font-weight: 500;
}
.tittle-bienvenido{
  color: #34A853;
  font-size: 32px;
  font-weight: 700;
}
.txt-bienvenido{
  color: #fff;
  font-size: 32px;
  font-weight: 700;
}




/* ---------------------- Estilos inputs ----------------------*/
/* Input con icono/imagen */
.field-container {
  position: relative;
  display: flex;
  align-items: center;
}
.field-container input,
.field-container button {
  width: 100%;
}
.field-with-left-icon input,
.field-with-left-icon button {
  padding-left: 35px;
}
.field-with-right-icon input,
.field-with-right-icon button {
  padding-right: 30px;
}
.field-icon {
  position: absolute;
  width: 20px;
  height: 20px;
  cursor: pointer;
  top: 40%;
}
.field-with-left-icon .field-icon {
  left: 10px;
  margin-right: 5px;
}
.field-with-right-icon .field-icon {
  right: 10px;
  margin-left: 5px;
}

.input-estilo-primero{
  height: 37px;
  margin-top: 10px;
  border-radius: 8px;
  border: none;
  background: #374151;
  color: #fff !important;
  font-size: 18px;
  font-weight: 400;
  box-shadow: inset 2px 2px 8px #131C2740;
  transition: box-shadow 0.3s ease-in-out;
}
.input-estilo-primero:focus {
  border: none;
  background: #374151;
  box-shadow: inset 2px 2px 8px #131C2740;
  /* box-shadow: inset 2px 2px 8px rgb(19, 28, 39); */
}

.input-estilo-segundo{
  min-height: 37px;
  margin-top: 10px;
  border: 2px solid #172539;
  border-radius: 8px;
  background: #1F2937;
  color: #fff !important;
  font-size: 18px;
  font-weight: 400;
  /* box-shadow: inset 2px 2px 8px rgb(19, 28, 39);
  transition: box-shadow 0.3s ease-in-out; */
}
.input-estilo-segundo:focus {
  border: 2px solid #172539;
  border-radius: 8px;
  background: #1F2937;
  color: #fff !important;
  font-size: 18px;
  font-weight: 400;
}

/* Input usado como buscador */
.input-search{
  height: 37px;
  margin-top: 10px;
  border: none;
  border-radius: 30px;
  background: #131C27;
  color: #fff;
  font-size: 18px;
  font-weight: 400;
  box-shadow: inset 2px 2px 8px rgb(10, 13, 17);
  transition: box-shadow 0.3s ease-in-out;
}
.input-search::placeholder{
  color: #BEBEBE;
  font-size: 18px;
  font-weight: 400;
}
.input-search:focus{
  border: none;
  border-radius: 30px;
  background: #131C27;
  color: #fff;
  font-size: 18px;
  font-weight: 400;
}

/* ---------------------- Estilos inputs ----------------------*/
.select-estilo-primero{
  height: 37px;
  margin-top: 10px !important;
  border-radius: 8px;
  border: none;
  background-color: #374151;
  color: #fff !important;
  font-size: 18px;
  font-weight: 400;
  box-shadow: inset 2px 2px 8px #131C2740;
  transition: box-shadow 0.3s ease-in-out;
}
.select-estilo-primero:focus {
  border: none;
  background-color: #374151;
  box-shadow: inset 2px 2px 8px #131C2740;
}

.select-estilo-segundo{
  min-height: 37px;
  margin-top: 10px;
  border: 2px solid #172539;
  border-radius: 8px;
  background-color: #1F2937;
  color: #fff !important;
  font-size: 18px;
  font-weight: 400;
}
.select-estilo-segundo:focus {
  border: 2px solid #172539;
  border-radius: 8px;
  background-color: #1F2937;
  color: #fff !important;
  font-size: 18px;
  font-weight: 400;
}

select.form-select {
  --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}


/* ---------------------- Estilos text-area ----------------------*/
.text-area-primero{
  height: 170px !important;
  margin-top: 10px;
  border-radius: 6px;
  border: none;
  background: #374151;
  color: #fff !important;
  font-size: 18px;
  font-weight: 400;
  box-shadow: inset 2px 2px 8px #131C2740;
}
.text-area-primero:focus {
  border: none;
  background: #374151;
  box-shadow: inset 2px 2px 8px #131C2740;
}

.text-area-segundo{
  height: 120px !important;
  min-height: 120px !important;
  margin-top: 10px;
  border-radius: 6px;
  border: none;
  background: #1F2937;
  color: #fff !important;
  font-size: 18px;
  font-weight: 400;
  box-shadow: inset 2px 2px 8px #131C2740;
  transition: box-shadow 0.3s ease-in-out;
}
.text-area-segundo:focus {
  border: none;
  background: #1F2937;
  box-shadow: inset 2px 2px 8px #131C2740;
}

/* ----------------------Estilos para nav-items ----------------------*/
.nav-tabs{
  border-color: transparent;
}
.nav-tabs .nav-item {
  margin-right: 4px;
}
/* Estilo para las pestañas activas */
.nav-tabs .nav-link.active {
  background-color: #1F2937;
  color: #fff;
  border-color: transparent;
}
/* Estilo para las pestañas inactivas */
.nav-tabs .nav-link {
  background-color: #1F293780;
  color: #8E8E8E;
  border-color: transparent;
}
.nav-tabs .nav-link:hover {
  border-color: transparent;
}



/* ----------------------Estilos para el menú superior ----------------------*/
.logo-menu{
  width: 160px;
}
.img-perfil-menu{
  width: 80px;
}
.btn.show{
  background-color: #374151 !important;
  border: none !important;
}
.dropdown .show > i {
  transform: rotate(180deg);
  transition: transform 0.4s ease-in-out;
}
.dropdown i {
  transform: rotate(0deg);
  transition: transform 0.4s ease-in-out;
}
.menu-notificaciones {
  padding: 10px !important;
  background-color: #374151 !important;
  width: 350px;  
  word-wrap: break-word;
  max-height: 500px; 
  overflow-y: auto;
}
.item-notificaciones {
  background-color: #1e2734 !important;
  color: #fff !important;
  font-size: 18px !important;
  font-weight: 400 !important;
  margin-bottom: 7px !important;
  border-radius: 8px !important;
  display: flex;
  text-align: right;
  flex-direction: column;
  padding: 10px;
  max-width: 100%;
  white-space: normal;
}
.menu-perfil {
  padding: 10px !important;
  background-color: #374151 !important;
}
.menu-perfil .dropdown-header{
  color: #6BCDFF;
  font-size: 18px;
  font-weight: 600;
}
.menu-perfil .dropdown-item{
  color: #FFFFFF;
  font-size: 18px;
  font-weight: 400;
}
.menu-perfil .dropdown-item.green:hover{
  color: #34A853;
  background: transparent;
}

.menu-perfil .dropdown-item.button{
  color: #6BCDFF;
}
.menu-perfil .dropdown-item.button:hover{
  border: none;
  border-radius: 30px;
  background: #1C2736;
}

.menu-perfil .dropdown-item.agenda{
  height: 40px;
  width: 160px;
  padding: 5px 10px;
  border: none;
  border-radius: 8px;
  background: #1FA4E7;
  color: #FFFFFF;
  font-size: 18px;
  font-weight: 400;
  box-shadow: 7px 7px 20px 0px rgba(0, 0, 0, .1),
              4px 4px 5px 0px rgba(0, 0, 0, .1);
  transition: all 0.5s;
}
.menu-perfil .dropdown-item.agenda:hover{
  background: #1FA4E7;
  box-shadow:  -2px -2px 6px 0 rgba(58, 61, 66, 0.5), 
              inset 0px 4px 6px 0 rgba(0, 0, 0, .4);
  transform: translateY(1px);
}

.navbar-toggler {
  border: 1px solid #fff;
}
.navbar-toggler-icon {
  filter: invert(100%); /* Invierte el color (blanco) */
}
#menuUbicacion{
  width: 630px;
  padding: 10px;
  background: #1f2c4a;
  border-top-left-radius: 0px; 
  border-top-right-radius: 0px; 
  border-bottom-left-radius: 0px; 
  border-bottom-right-radius: 70px; 
  border: none;
  color: #fff !important;
  font-size: 36px !important;
  font-weight: 700 !important;
}
@media (max-width: 1200px){
  #menuUbicacion{
    width: 380px;
    font-size: 28px !important;
  }
}
@media (max-width: 890px){
  #menuUbicacion{
    width: 260px;
    font-size: 18px !important;
  }
}
@media (max-width: 767px){
  .logo-menu{
    width: 90px;
  }
  .img-perfil-menu{
    width: 40px;
  }
  .menu-notificaciones {
    width: 190px;  
  }
}

/* ----------------------Estilos para el menú lateral en escritorio ----------------------*/
.menu-fixed {
  position: fixed;
  top: 24%; /* Ajustado para estar más pegado al top */
  left: 0;
  display: flex;
  flex-direction: column;
  border-radius: 0;
  overflow: hidden;
  padding: 20px 10px;
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
  overflow: visible;
  z-index: 9999;
}
.menu-fixed.menuCliente{
  background: #2347D8;
}
.menu-fixed.menuProveedor{
  background: #E87F3A;
}
.menu-fixed a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  border-radius: 8px;
  color: white;
  text-decoration: none;
}
.menu-fixed.menuCliente a{
  background: #2347D8;
}
.menu-fixed.menuProveedor a{
  background: #E87F3A;
}
.menu-fixed a:last-child {
  border-bottom: none;
}
.menu-fixed.menuCliente a:hover {
  background: #0D63CB;
}
.menu-fixed.menuCliente a.active {
  background: #0d63cb !important;
}
.menu-mobile.menuCliente a.active{
  background: #0d63cb !important;
}
.menu-fixed.menuProveedor a:hover {
  background: #E96F22;
}
.menu-fixed.menuProveedor a.active {
  background: #E96F22 !important;
}
.menu-mobile.menuProveedor a.active{
  background: #E96F22 !important;
}

.tooltip-container {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 12px;
}
.tooltip {
  position: absolute;
  top: 50%;
  left: 105%;
  transform: translateY(-50%);
  background: #FFFFFF;
  color: #0F5969;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 18px;
  font-weight: 700;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: 0.3s ease;
  z-index: 10;
}
.tooltip::before {
  content: "";
  position: absolute;
  top: 50%;
  left: -6px;
  transform: translateY(-50%);
  border-style: solid;
  border-width: 6px 6px 6px 0;
  border-color: transparent #FFFFFF transparent transparent;
}
.tooltip-container:hover .tooltip {
  opacity: 1;
  visibility: visible;
  left: 110%;
}

/* Mostrar el menú lateral dentro del menú hamburguesa en móviles */
@media (max-width: 768px) {
  .menu-fixed {
      display: none;
  }
}

/* ---------------------- Estilos modales ----------------------*/
.modal-estilo-base{
  background-color: #1F2937;
  padding: clamp(5px, 2vw, 10px) clamp(5px, 5vw, 40px);
  box-shadow: 12px 10px 14px -5px #00000040;
}
.modal-estilo-base .modal-header{
  border-bottom: none;
}
.modal-estilo-base .modal-footer{
  border-top: none;
  justify-content: center !important;
}
.btn-close-modal {
  background: none !important;
  border: none !important;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.btn-close-modal img {
  width: 20px; /* Ajusta el tamaño de la imagen */
  height: auto;
}

.btn-close-modal:hover .icono-equis {
  content: url("../../__data/_img/iconos/equis-circle-red.webp");
}

/* ---------------------- Estilos para el footer ----------------------*/
.footer {
  /* position: fixed; */
  bottom: 0;
  width: 100%;
  background: #D87D23;
  color: white;
  text-align: center;
  padding: 50px 80px 15px 80px
}
/* Footer redes sociales */
.wrapper {
  display: inline-flex;
  list-style: none;
  /* height: 100%; */
  width: 100%;
  padding-top: 40px;
  font-family: "Poppins", sans-serif;
  justify-content: center;
}
.wrapper .icon {
  position: relative;
  background: #fff;
  color: #000;
  border-radius: 50%;
  margin: 10px;
  width: 50px;
  height: 50px;
  font-size: 18px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.wrapper .tooltip {
  position: absolute;
  top: 0;
  font-size: 14px;
  background: #fff;
  color: #fff;
  padding: 5px 8px;
  border-radius: 5px;
  box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1);
  opacity: 0;
  pointer-events: none;
  transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.wrapper .tooltip::before {
  position: absolute;
  content: "";
  height: 8px;
  width: 8px;
  background: #fff;
  bottom: -3px;
  left: 50%;
  transform: translate(-50%) rotate(45deg);
  transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.wrapper .icon:hover .tooltip {
  top: -45px;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.wrapper .icon:hover span,
.wrapper .icon:hover .tooltip {
  text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.1);
}
.wrapper .facebook:hover,
.wrapper .facebook:hover .tooltip,
.wrapper .facebook:hover .tooltip::before {
  background: #1877f2;
  color: #fff;
}
.wrapper .instagram:hover,
.wrapper .instagram:hover .tooltip,
.wrapper .instagram:hover .tooltip::before {
  background: #e4405f;
  color: #fff;
}


/* ---------------------- Estilos fondo con esferas en movimiento ----------------------*/
.uiverse {
  --duration: 7s;
  --easing: linear;
  /* --c-radial-inner: #ffd215; */
  --c-radial-inner: #000000;
  /* --c-radial-outer: #fff172; */
  --c-radial-outer: #000000;
  --c-color: #fff;
  -webkit-tap-highlight-color: transparent;
  -webkit-appearance: none;
  outline: none;
  position: relative;
  border: none;
  border-radius: 8px;
  display: table;
  color: var(--c-color);
  background: #1F2937;
}

.uiverseLogin {
  max-width: 700px;
  width: 700px;
}
.uiverseRegistro {
  max-width: 800px;
  width: 800px;
}

.uiverse:before {
  content: "";
  pointer-events: none;
  position: absolute;
  z-index: 3;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  border-radius: 8px;
}

.uiverse .wrapperUi {
  -webkit-mask-image: -webkit-radial-gradient(white, black);
  overflow: hidden;
  border-radius: 8px;
  /* min-width: 132px; */
  /* padding: 12px 0; */
}

.uiverse .wrapperUi span,
.uiverse .wrapperUi label {
  display: inline-block;
  position: relative;
  z-index: 1;
}

.uiverse:hover {
  --duration: 1400ms;
}

.uiverse .wrapperUi .circle {
  position: absolute;
  left: 0;
  top: 0;
  border-radius: 50%;
  filter: blur(var(--blur, 8px));
  background: var(--background, transparent);
  transform: translate(var(--x, 0), var(--y, 0)) translateZ(0);
  animation: var(--animation, none) var(--duration) var(--easing) infinite;
}
.uiverse .wrapperUi .circle.circle-1 {
  width: 140px;
  height: 140px;
  --background: #3DDCFF;
  --blur: 80px;
  --x: -88px;
  --y: 170px;
  --animation: circle-1;
}
.uiverse .wrapperUi .circle.circle-2 {
  width: 170px;
  height: 170px;
  --background: #34A853;
  --blur: 75px;
  --x: 165px;
  --y: 420px;
  --animation: circle-2;
}
.uiverse .wrapperUi .circle.circle-3 {
  width: 280px;
  height: 280px;
  --background: #2347D8;
  --blur: 70px;
  --x: 98px;
  --y: -20px;
  --animation: circle-3;
}
.uiverse .wrapperUi .circle.circle-4 {
  width: 180px;
  height: 180px;
  --background: #2347D8;
  --blur: 73px;
  --x: 500px;
  --y: 360px;
  --animation: circle-4;
}
.uiverse .wrapperUi .circle.circle-5 {
  width: 170px;
  height: 170px;
  --background: #3DDCFF;
  --blur: 80px;
  --x: 380px;
  --y: 150px;
  --animation: circle-5;
}
.uiverse .wrapperUi .circle.circle-6 {
  width: 160px;
  height: 160px;
  --background: #34A853;
  --blur: 70px;
  --blur: 60px;
  --x: 560px;
  --y: 4px;
  --animation: circle-6;
}
.uiverse .wrapperUi .circle.circle-7 {
  width: 160px;
  height: 150px;
  --background: #3DDCFF;
  --blur: 80px;
  --x: -88px;
  --y: 320px;
  --animation: circle-7;
}
.uiverse .wrapperUi .circle.circle-8 {
  width: 190px;
  height: 190px;
  --background: #34A853;
  --blur: 80px;
  --x: 170px;
  --y: 700px;
  --animation: circle-8;
}
.uiverse .wrapperUi .circle.circle-9 {
  width: 290px;
  height: 290px;
  --background: #2347D8;
  --blur: 70px;
  --x: 98px;
  --y: -20px;
  --animation: circle-9;
}
.uiverse .wrapperUi .circle.circle-10 {
  width: 180px;
  height: 180px;
  --background: #2347D8;
  --blur: 73px;
  --x: 566px;
  --y: 580px;
  --animation: circle-10;
}
.uiverse .wrapperUi .circle.circle-11 {
  width: 170px;
  height: 170px;
  --background: #3DDCFF;
  --blur: 80px;
  --x: 520px;
  --y: 200px;
  --animation: circle-11;
}
.uiverse .wrapperUi .circle.circle-12 {
  width: 160px;
  height: 160px;
  --background: #34A853;
  --blur: 60px;
  --x: 590px;
  --y: 4px;
  --animation: circle-12;
}
.uiverse .wrapperUi .circle.circle-13 {
  width: 250px;
  height: 250px;
  --background: #3DDCFF;
  --blur: 80px;
  --x: -2px;
  --y: 200px;
  --animation: circle-13;
}
.uiverse .wrapperUi .circle.circle-14 {
  width: 260px;
  height: 260px;
  --background: #34A853;
  --blur: 80px;
  --x: 470px;
  --y: -120px;
  --animation: circle-14;
}
.uiverse .wrapperUi .circle.circle-15 {
  width: 340px;
  height: 340px;
  --background: #2347D8;
  --blur: 90px;
  --x: 980px;
  --y: 270px;
  --animation: circle-15;
}
.uiverse .wrapperUi .circle.circle-16 {
  width: 260px;
  height: 260px;
  --background: #3DDCFF;
  --blur: 80px;
  --x: 1550px;
  --y: 20px;
  --animation: circle-16;
}
.uiverse .wrapperUi .circle.circle-17 {
  width: 260px;
  height: 260px;
  --background: #34A853;
  --blur: 80px;
  --x: 2200px;
  --y: 120px;
  --animation: circle-17;
}
.uiverse .wrapperUi .circle.circle-18 {
  width: 360px;
  height: 360px;
  --background: #2347D8;
  --blur: 80px;
  --x: -40px;
  --y: 650px;
  --animation: circle-18;
}
.uiverse .wrapperUi .circle.circle-19 {
  width: 300px;
  height: 300px;
  --background: #3DDCFF;
  --blur: 80px;
  --x: 580px;
  --y: 400px;
  --animation: circle-19;
}
.uiverse .wrapperUi .circle.circle-20 {
  width: 140px;
  height: 140px;
  --background: #2347D8;
  --blur: 50px;
  --x: -4px;
  --y: 15px;
  --animation: circle-20;
}
.uiverse .wrapperUi .circle.circle-21 {
  width: 140px;
  height: 140px;
  --background: #3DDCFF;
  --blur: 50px;
  --x: 506px;
  --y: -94px;
  --animation: circle-21;
}

@keyframes circle-1 {
  33% {
    transform: translate(-88px, 240px) translateZ(0);
  }

  66% {
    transform: translate(-90px, 200px) translateZ(0);
  }
}
@keyframes circle-2 {
  33% {
    transform: translate(210px, 330px) translateZ(0);
  }

  66% {
    transform: translate(180px, 370px) translateZ(0);
  }
}
@keyframes circle-3 {
  33% {
    transform: translate(30px, -10px) translateZ(0);
  }

  66% {
    transform: translate(60px, -5px) translateZ(0);
  }
}
@keyframes circle-4 {
  33% {
    transform: translate(475px, 280px) translateZ(0);
  }

  66% {
    transform: translate(460px, 340px) translateZ(0);
  }
}
@keyframes circle-5 {
  33% {
    transform: translate(300px, 140px) translateZ(0);
  }

  66% {
    transform: translate(360px, 210px) translateZ(0);
  }
}
@keyframes circle-6 {
  33% {
    transform: translate(500px, 10px) translateZ(0);
  }

  66% {
    transform: translate(540px, -12px) translateZ(0);
  }
}
@keyframes circle-7 {
  33% {
    transform: translate(-88px, 500px) translateZ(0);
  }

  66% {
    transform: translate(-90px, 410px) translateZ(0);
  }
}
@keyframes circle-8 {
  33% {
    transform: translate(230px, 430px) translateZ(0);
  }

  66% {
    transform: translate(120px, 480px) translateZ(0);
  }
}
@keyframes circle-9 {
  33% {
    transform: translate(30px, -10px) translateZ(0);
  }

  66% {
    transform: translate(60px, -5px) translateZ(0);
  }
}
@keyframes circle-10 {
  33% {
    transform: translate(500px, 500px) translateZ(0);
  }

  66% {
    transform: translate(490px, 520px) translateZ(0);
  }
}
@keyframes circle-11 {
  33% {
    transform: translate(340px, 140px) translateZ(0);
  }

  66% {
    transform: translate(420px, 210px) translateZ(0);
  }
}
@keyframes circle-12 {
  33% {
    transform: translate(540px, 20px) translateZ(0);
  }

  66% {
    transform: translate(570px, -12px) translateZ(0);
  }
}
@keyframes circle-13 {
  33% {
    transform: translate(60px, 100px) translateZ(0);
  }

  66% {
    transform: translate(40px, 140px) translateZ(0);
  }
}
@keyframes circle-14 {
  33% {
    transform: translate(530px, 100px) translateZ(0);
  }

  66% {
    transform: translate(470px, 20px) translateZ(0);
  }
}
@keyframes circle-15 {
  33% {
    transform: translate(960px, 120px) translateZ(0);
  }

  66% {
    transform: translate(980px, 200px) translateZ(0);
  }
}
@keyframes circle-16 {
  33% {
    transform: translate(1490px, 60px) translateZ(0);
  }

  66% {
    transform: translate(1510px, 20px) translateZ(0);
  }
}
@keyframes circle-17 {
  33% {
    transform: translate(2160px, 80px) translateZ(0);
  }

  66% {
    transform: translate(2190px, 100px) translateZ(0);
  }
}
@keyframes circle-18 {
  33% {
    transform: translate(70px, 520px) translateZ(0);
  }

  66% {
    transform: translate(30px, 580px) translateZ(0);
  }
}
@keyframes circle-19 {
  33% {
    transform: translate(500px, 480px) translateZ(0);
  }

  66% {
    transform: translate(560px, 430px) translateZ(0);
  }
}
@keyframes circle-20 {
  33% {
    transform: translate(20px, 5px) translateZ(0);
  }

  66% {
    transform: translate(2px, 10px) translateZ(0);
  }
}
@keyframes circle-21 {
  33% {
    transform: translate(490px, -30px) translateZ(0);
  }

  66% {
    transform: translate(500px, -60px) translateZ(0);
  }
}
@keyframes circle-21-mobile {
  33% {
    transform: translate(270px, -10px) translateZ(0);
  }

  66% {
    transform: translate(290px, -40px) translateZ(0);
  }
}

@media (max-width: 1200px) {
  .uiverse .wrapperUi .circle.circle-20 {
    width: 100px;
    height: 100px;
    --x: -4px;
    --y: 15px;
    --animation: circle-20;
  }
  .uiverse .wrapperUi .circle.circle-21 {
    width: 100px;
    height: 100px;
    --x: 306px;
    --y: -57px;
    --animation: circle-21-mobile;
  }
  
}

/* ---------------------- Estilos para el contenedor de contenido dinámico ----------------------*/
.content-container {
  margin-left: 80px;
  padding: 20px 5px 50px 5px;
  /* min-height: calc(100vh - 50px); */
  /* padding-bottom: 50px; */
}
.content-containerMargen{
  margin-top: 50px;
}
@media (max-width: 767px) {
  .content-container {
    margin-left: 0px;
  }
}

/* ---------------------- Estilos inicio ----------------------*/
.container-inicio{
  height: 100hv;
  background:#131c27; 
  padding: 10px 40px 20px 40px;
}
.txt-inicio{
  color: #fff;
  font-size: 50px;
  font-weight: 700;
}
@media (max-width: 1200px) {
  .txt-inicio{
    font-size: 40px;
  }
}
@media (max-width: 576px) {
  .txt-inicio{
    font-size: 30px;
  }
  .logo-inicio{
    width: 200px;
  }
}

/* ----------------------Estilos login ----------------------*/
.container-login{
  height: 100hv;
  background:#131c27; 
  padding: 10px 40px 20px 40px;
}
.logo-login{
  max-width: 220px;
}
.container-login-secundario{
  max-width: 700px;
  padding: 20px clamp(20px, 5vw, 90px) 40px clamp(20px, 5vw, 90px);
  margin: 0 auto;
  border: none;
  border-radius: 8px;
  /* background: #275172; */
  position: relative;
  backdrop-filter: blur(10px);
}
.mb-20{
  margin-bottom: 20px;
}
.tittle-login{
  color: #fff;
  font-weight: 700;
}
.leyenda-login{
  color: #BEBEBE;
  font-size: 24px;
  font-weight: 700;
}
.handyhub-img2 {
  position: absolute;
  left: -173px;
  top: 75%;
  max-width: 280px;
  width: auto;
  z-index: 1;
}
.handyhub-img3 {
  position: absolute;
  right: -241px;
  top: 8%;
  max-width: 317px;
  width: auto;
  /* z-index: -1; */
}

@media (max-width: 1200px) {
  .container-login-secundario,
  .uiverseLogin,
  .uiverseRegistro{
    max-width: 600px;
  }
  .handyhub-img2 {
    left: -136px; 
    top: 80%;
    width: 220px;
  }
  .handyhub-img3 {
    right: -199px;
    top: 24%;
    width: 199px;
  }
}
@media (max-width: 992px) {
  .container-login-secundario,
  .uiverseLogin,
  .uiverseRegistro{
    max-width: 500px;
  }
  .leyenda-login{
    font-size: 18px;
  }
  .handyhub-img2,
  .handyhub-img3 {
    display: none;
  }
}
@media (max-width: 576px) {
  .container-login-secundario,
  .uiverseLogin,
  .uiverseRegistro{
    max-width: 350px;
  }
  .leyenda-login{
    font-size: 16px;
  }
}


/* ----------------------Estilos registro---------------------- */
.container-registro{
  height: 100hv;
  background:#131c27; 
  padding: 10px 40px 20px 40px;
}
.container-registro-auxiliar{
  margin-top: -120px;
}
.container-registro-secundario{
  max-width: 800px;
  padding: 40px clamp(20px, 5vw, 70px) 50px clamp(20px, 5vw, 70px);
  margin: 0 auto;
  border: none;
  border-radius: 8px;
  /* background: #275172; */
  position: relative;
  backdrop-filter: blur(10px);
}
.subtittle-registro{
  color: #fff;
  font-size: 18px;
  font-weight: 700;
}
.handyhub-img4 {
  position: absolute;
  right:-500px;
  top: 59%;
  max-width: 317px;
  width: auto;
  z-index: 1;
}
#img_bienvenido{
  width: 380px;
}
@media (max-width: 1300px) {
  .container-registro-auxiliar{
    margin-top: -60px;
  }
}
@media (max-width: 1200px) {
  .handyhub-img4 {
    display: none;
  }
}
@media (max-width: 992px) {
  .container-registro-auxiliar{
    margin-top: 0px;
  }
}
@media (max-width: 576px) {
  #img_bienvenido{
    width: 280px;
  }
  .txt-bienvenido, .tittle-bienvenido{
    font-size: 28px;
  }
}


/* ---------------------- Estilos v-inicio ----------------------*/
.container-notificacion{
  height: 100hv;
  max-width: 1700px;
  padding: clamp(5px, 5vw, 50px);
  border-radius: 8px;
  background: rgba(107, 205, 255, 0.3);
}

.tittle-notificaciones{
  padding: 10px 30px;
  background: #34A853;
  border: none;
  border-radius: 40px;
  font-size: 36px;
  font-weight: 700;
}

@media (max-width: 1400px) {
  .tittle-notificaciones{
    font-size: 28px;
    padding: 10px 20px;
  }
}
@media (max-width: 1126px) {
  .tittle-notificaciones{
    font-size: 24px;
    padding: 10px 20px;
  }
  .container-notificacion .tittle-negritas{
    font-size: 22px !important;
  }
}
@media (max-width: 991px) {
  #img-handyHub16{
    width: 460px !important;
  }
}
@media (max-width: 576px) {
  #img-handyHub16{
    width: 280px !important;
  }
}

.container-categorias{
  height: 100hv;
  max-width: 1700px;
  padding: clamp(5px, 5vw, 50px);
  border-radius: 8px;
  background: #1f2937;
}

/* Start cards*/
.custom-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 2px;
}
.image-container {
  max-width: 400px; 
 aspect-ratio: 1/1;
  background-color: #374151 !important;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}
.image-container img {
  width: 100%;  
  height: 100%; 
  object-fit: cover;
  border-radius: 8px;
}
.txt-calificacion-card{
  color: #fff !important;
  font-size: 16px !important;
  font-weight: 500 !important;
}
.nombre-card-proveedor{
  color: #6BCDFF;
  font-size: 18px;
  font-weight: 500;
}
.tittle-disponibilidad-card{
  color: #fff !important;
  font-size: 18px !important;
  font-weight: 400 !important;
}
.txt-disponibilidad-card{
  color: #fff !important;
  font-size: 18px !important;
  font-weight: 600 !important;
}
.txt-horarios-card{
  color: #34A853 !important;
  font-size: 18px !important;
  font-weight: 400 !important;
}
.circulo-disponible{
  width: 15px;
  height: 15px;
  border-radius: 50%;
  display: inline-block;
}

@media (max-width: 1640px) and (min-width: 992px) {
  .custom-container {
      flex-direction: column;
  }
}
@media (max-width: 854px) and (min-width: 768px) {
  .custom-container {
      flex-direction: column;
  }
}
/*End cards*/


/* Start Corazon favoritos */
#customInput {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}
.custom-checkbox {
  display: block;
  position: relative;
  cursor: pointer;
  user-select: none;
}
.custom-checkbox #customSVG {
  position: relative;
  top: 0;
  left: 0;
  height: 30px;
  width: 30px;
  transition: all 0.3s;
  fill: transparent;
  stroke: #fff;
  stroke-width: 1.5px;
}
.custom-checkbox #customSVG:hover {
  transform: scale(1.1);
}
#customInput:checked ~ #customSVG {
  fill: #34a853;
  stroke: #34a853;
}
/* End Corazon favoritos */

@media (min-width: 992px) {
  .container-items-premium{
    padding-left: clamp(5px, 10vw, 200px);
  }
  #BTNPremiumUno{
    display: inline-block !important;
  }
  #BTNPremiumDos{
    display: none !important;
  }
}
@media (max-width: 991px) {
  .container-items-premium .tittle-negritas{
    font-size: 20px !important;
  }
  .container-items-premium img{
    width: 22px;
  }
  #BTNPremiumUno{
    display: none !important;
  }
  #BTNPremiumDos{
    display: inline-block !important;
  }
}

/* ---------------------- Estilos v-perfilProveedor ----------------------*/
.container-perfil-prov{
  height: 100hv;
  padding: clamp(5px, 5vw, 50px);
  border-radius: 8px;
  background: #1f2937;
}
.cuenta-verificada{
  height: 60px;
  padding: 10px 20px;
  background: #fff;
  border: none;
  border-radius: 8px;
  color: #2347D8;
  font-size: 18px;
  font-weight: 400;
}
.cuenta-no-verificada{
  height: 60px;
  padding: 10px 20px;
  background: #fff;
  border: none;
  border-radius: 8px;
  color: #666666;
  font-size: 18px;
  font-weight: 400;
}
.txt-promedio{
  color: #fff;
  font-size: 16px;
  font-weight: 500;
}
.container-nuestro-servicio{
  padding: clamp(20px, 5vw, 40px) clamp(5px, 5vw, 60px);
}
.carousel-img {
  max-height: 500px;
  object-fit: cover;
}
/* Start Corazon favoritos */
#customInputPP {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}
.custom-checkboxPP {
  display: block;
  position: relative;
  cursor: pointer;
  user-select: none;
  min-height: 56px;
  min-width: 150px;
  padding: 15px 20px;
  border: none;
  border-radius: 2px;
  background: #374151;
  color: #FFFFFF;
  font-size: 18px;
  font-weight: 400;
}
.custom-checkboxPP #customSVGPP {
  position: relative;
  top: 0;
  left: 0;
  height: 30px;
  width: 30px;
  transition: all 0.3s;
  fill: transparent;
  stroke: #fff;
  stroke-width: 1.5px;
}
.custom-checkboxPP #customSVGPP:hover {
  transform: scale(1.1);
}
#customInputPP:checked ~ #customSVGPP {
  fill: #34a853;
  stroke: #34a853;
}
/* End Corazon favoritos */


/* Estilos comentarios en modal */
.comentario {
  padding: 10px 0;
  border-bottom: 1px solid #374151;
}

/** ----------------------Estilos busqueda ---------------------- */
.container-filtros{
  max-width: 1400px;
  padding: clamp(5px, 5vw, 50px);
  border-radius: 8px;
  background: #374151;
}

/* Estilo base para el input tipo range */
.input-rango {
  -webkit-appearance: none; /* Necesario para Chrome, Safari, y Opera */
  appearance: none;
  width: 100%;  /* Ajusta el tamaño de la barra */
  height: 8px;  /* Grosor de la barra */
  background: #1F2937;  /* Color de la barra base (despues de que el rango es cambiado) */
  border-radius: 5px;
  transition: background 0.3s ease;
}
/* Estilo para la parte llena (progreso) de la barra en Webkit */
.input-rango::-webkit-slider-runnable-track {
  height: 8px;  /* Grosor de la barra */
  background: #1F2937;  /* Color base de la barra */
}
/* Estilo para el progreso de la barra en Webkit (la parte que refleja el valor seleccionado) */
.input-rango::-webkit-slider-progressbar {
  background: #2347D8; /* Color del progreso seleccionado */
  height: 8px;  /* Grosor de la parte del progreso */
}
/* Para Firefox */
.input-rango::-moz-range-track {
  height: 8px;
  background: #1F2937; /* Barra base */
}
.input-rango::-moz-range-progress {
  background: #2347D8; /* Progreso seleccionado */
  height: 8px;
}
/* Para Internet Explorer */
.input-rango::-ms-track {
  width: 100%;
  height: 8px;
  background: #1F2937;
  border-color: transparent;
  border-width: 8px 0;
  color: transparent;
}
.input-rango::-ms-fill-lower {
  background: #2347D8; /* Color de la parte seleccionada */
}
.input-rango::-ms-fill-upper {
  background: #1F2937; /* Barra base */
}
/* Estilo del thumb (control deslizante) */
.input-rango::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #1F2937;
  cursor: pointer;
}
/* Para Firefox */
.input-rango::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #2347D8;
  cursor: pointer;
}
/* Para Internet Explorer */
.input-rango::-ms-thumb {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #1F2937;
  cursor: pointer;
}


/* ---------------------- Estilos perfil ----------------------*/
#datosPersonales,
#datosFacturacion,
#perfilProveedor{
  height: 100hv;
  padding: clamp(5px, 5vw, 40px) clamp(5px, 10vw, 120px) clamp(10px, 10vw, 90px) clamp(5px, 10vw, 120px);
}
.tittle-perfil{
  color: #fff !important;
  font-size: 36px !important;
  font-weight: 700 !important;
}
.circulo{
  width: 15px;
  height: 15px;
  border-radius: 50%;
  display: inline-block;
  background-color: #A1FF0A;
}
#img_cambio_contraseña{
  width: 400px;
}
#img_eliminar_tarjeta{
  width: 300px;
}

/* Input fecha de vencimiento */
.input-select-fecha:focus {
  border: none;
  background: #374151;
  box-shadow: inset 2px 2px 8px #131C2740;
}
.expiration-input {
  height: 37px;
  display: flex;
  align-items: center;
  position: relative;
  width: 100%;
  border: none;
  border-radius: 8px;
  overflow: hidden;
  background: #374151;
  padding: 5px;
  margin-top: 10px;
  color: #fff !important;
  font-size: 18px;
  font-weight: 400;
  box-shadow: inset 2px 2px 8px #131C2740;
  transition: box-shadow 0.3s ease-in-out;
}
.expiration-input select {
  width: 50%;
  text-align: center;
  border: none;
  outline: none;
  padding: 8px;
  color: #fff !important;
  font-size: 18px;
  font-weight: 400;
  appearance: none;
  background: transparent;
}
.expiration-input .separator {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-size: 18px;
  font-weight: bold;
  background: #374151;
  color: #fff !important;
  font-size: 18px;
  font-weight: 400;
}

/* Para ocultar la flecha en algunos navegadores */
.select-exp {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding-right: 20px; /* Espacio para la flecha */
}
/* Agregar flecha personalizada */
.select-exp::after {
  content: "▼";
  font-size: 12px;
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
}

/* Tarjeta de banco */
.credit-card {
  max-width: 320px;
  height: 200px;
  background: lightgrey;
  position: relative;
  border-radius: 15px;
  overflow: hidden;
}
.foreground {
  border-radius: 15px;
  position: absolute;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.18);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(2.8px);
  -webkit-backdrop-filter: blur(2.8px);
  padding: 16px;
  color: white;
  font-size: 16px;
}
.credit-card-header {
  display: flex;
  justify-content: space-between;
}
.credit-card-chip-container {
  margin: 8px 0;
  height: 40px;
  width: 40px;
}
.chip {
  width: 100%;
  height: 100%;
}
.category, .bank {
  font-size: 14px;
}
.info-container {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.names {
  align-self: flex-end;
  text-transform: uppercase;
  font-size: 14px;
}
.serial {
  align-self: flex-end;
  letter-spacing: 2px;
  font-size: 15px;
  font-family: monospace;
}
.expire {
  margin-left: 3px;
  font-size: 14px;
}

.txt-saldo{
  color: #fff;
  font-size: 64px;
  font-weight: 700;
}
.container-movimientos{
  padding: 0 clamp(10px, 5vw, 140px) 80px clamp(10px, 5vw, 140px);
}
.container-table-movimientos{
  background: #374151; 
  padding: clamp(5px, 2vw, 20px) clamp(5px, 2vw, 60px);
}
#tableMovimientos {
  border: none;
  width: 100%;
  background: #374151;
}
#tableMovimientos thead {
  background-color: #374151 !important;
  color: #fff;
}
#tableMovimientos thead th {
  padding: 12px;
  border: none;
  background-color: #374151 !important;
  color: #34A853;
  font-size: 20px;
  font-weight: 700;
}
#tableMovimientos tbody tr {
  border: none;
  background-color: #374151 !important;
}
#tableMovimientos tbody td {
  background-color: #374151 !important;
  border: none;
  padding: 12px;
  color: #fff;
  font-size: 18px;
  font-weight: 700;
}

/* Última fila sin borde inferior */
#tableMovimientos tbody tr:last-child {
  border-bottom: none;
}

@media (max-width: 596px) {
  .credit-card {
    max-width: 280px;
    height: 175px;
  }

  .foreground {
    padding: 10px;
    font-size: 14px;
  }

  .credit-card-chip-container {
    height: 8%;
    width: 8%;
  }

  .category, .bank, .expire {
    font-size: 12px;
  }

  .info-container {
    gap: 10px;
  }

  .names {
    font-size: 12px;
  }

  .serial {
    font-size: 14px;
  }
}
@media (max-width: 480px) {
  #img_cambio_contraseña{
    width: 290px;
  }
  .txt-saldo{
    font-size: 36px;
  }
}

/* ----------------------Estilos cotizaciones ----------------------*/
.container-card-body{
  background: #131c27;  
  border-radius: 8px; 
  padding: 20px; 
  height: 260px;
  max-height: 380px; 
  overflow-y: auto;
  color: #fff;
  font-size: 18px;
  font-weight: 500;
}
.row-servicios-solicitados,
.row-servicios-curso,
.row-servicios-historial{
  padding-left: clamp(5px, 2vw, 40px);
  padding-right: clamp(5px, 2vw, 40px);
}
@media (min-width: 1350px) {
  .custom-col{
      flex: 0 0 auto;
      max-width: 50%;
  }
}
@media (min-width: 2000px) {
  .custom-col {
      flex: 0 0 33.333%;
      max-width: 33.333%;
  }
}
.margin-btn-propuestas{
  margin-top: -6px;
}
@media (max-width: 768px) {
  .margin-btn-propuestas{
    margin-top: 20px;
  }
}

/* Start Corazon favoritos */
#customInputF {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}
.custom-checkboxF {
  display: block;
  position: relative;
  cursor: pointer;
  user-select: none;
}
.custom-checkboxF #customSVGF {
  position: relative;
  top: 0;
  left: 0;
  height: 30px;
  width: 30px;
  transition: all 0.3s;
  fill: transparent;
  stroke: #fff;
  stroke-width: 1.5px;
}
.custom-checkboxF #customSVGF:hover {
  transform: scale(1.1);
}
#customInputF:checked ~ #customSVGF {
  fill: #34a853;
  stroke: #34a853;
}
/* End Corazon favoritos */

/* Estilos para las estrellas */
.rating-stars a {
  text-decoration: none;
  font-size: inherit; 
  color: #ccc;
  cursor: pointer;
}
.rating-stars a .fas {
  color: #f39c12;
}
.rating-stars a .far {
  color: #ccc;
}
.rating-stars a:hover ~ a i.fas,
.rating-stars a:hover ~ a i.far {
  color: #ccc;
}
.rating-stars a:hover i.fas,
.rating-stars a:hover i.far {
  color: #f39c12;
}

@media (min-width: 1200px) {
  .card-height{
    height: 1350px;
    max-height: 1350px;
    overflow-y: auto;
    scrollbar-width: none;
    -ms-overflow-style: none !important;
  }
  .card-footer-historial{
    height: 370px;
    max-height: 370px;
    overflow-y: auto;
  }
  
}


/* Estilos para las etiquetas usadas como status */
.etiqueta-status-cancelado {
  width: 184px;
  margin-top: -1px;
  content: url("../../__data/_img/imagenes/etiqueta-cancelado.webp");
}
.etiqueta-status-reagendado {
  width: 196px;
  margin-top: -3px;
  content: url("../../__data/_img/imagenes/etiqueta-reagendado.webp");
}
.etiqueta-status-reprogramacion {
  width: 236px;
  margin-top: -1px;
  content: url("../../__data/_img/imagenes/etiqueta-reprogramacion-en-curso.webp");
}
.etiqueta-status-aceptado {
  width: 178px;
  margin-top: -2px;
  content: url("../../__data/_img/imagenes/etiqueta-servicio-aceptado.webp");
}
.etiqueta-status-curso {
  width: 178px;
  margin-top: -2px;
  content: url("../../__data/_img/imagenes/etiqueta-servicio-en-curso.webp");
}
.etiqueta-status-aceptar {
  width: 190px;
  margin-top: -3px;
  content: url("../../__data/_img/imagenes/etiqueta-servicio-por-aceptar.webp");
}
.etiqueta-status-terminado {
  width: 184px;
  margin-top: -2px;
  content: url("../../__data/_img/imagenes/etiqueta-servicio-terminado.webp");
}
.etiqueta-status-asignacion {
  width: 154px;
  margin-top: -3px;
  content: url("../../__data/_img/imagenes/etiqueta-sin-asignacion.webp");
}


/* ----------------------Estilos pagoServicio ----------------------*/
.containerPagos{
  background: #909090;
  transition: all 0.5s;
}
.containerPagos:hover{
  background: #FF9D5B;
}
#handyhub-img6{
  width: 290px;
}

/* ----------------------Estilos reagendar ----------------------*/
.circle-image {
  width: 35px;
  height: 35px;
  border-radius: 50%;
  border: 2px solid #fff;
  background-color: transparent;
  display: flex;
  justify-content: center;
  align-items: center;
  animation: rotateImage 2s linear infinite;
}
.circle-image .img-cargando {
  width: 20px;
  height: 30px;
  border-radius: 50%;
  content: url("../../__data/_img/iconos/cambiar-icono.webp");
}
.circle-image.verificado{
  border: 2px solid #34A853 ;
  animation: none;
}
.verificado .img-cargando {
  width: 20px;
  height: 30px;
  border-radius: 50%;
  content: url("../../__data/_img/iconos/palomita-verde.webp");
}

/* Start Agenda */

.table-agenda{
  border-spacing: 4px;
  border-collapse: separate;
}
.table-agenda th:first-child {
  background: transparent !important;
}
.table-agenda th:first-child,
.table-agenda td:first-child {
  position: sticky;
  left: 0;
  z-index: 2;
  min-width: 90px !important;
  width: 90px !important;
}
.table-agenda > :not(caption) > * > *{
  padding: 6px !important;
  font-size: 14px;
  font-weight: 600;
  border: none !important;
  border-radius: 10px;
}
.table-agenda thead th {  
  background-color: #EF843C !important;
  border: none !important; 
  /* border-radius: 30px !important; */
  color: #fff !important;          
}
.table-agenda th,
.table-agenda td {
  min-width: 146px !important;
  height: 65px !important;
  text-align: center;
  vertical-align: middle;
}
.td-hora {  
  background-color: #0D8EAA !important;
  border: none !important; 
  /* border-radius: 30px !important; */
  font-size: 16px !important;      
  font-weight: 500 !important;     
  color: #fff !important;          
}

/* .table-hover > tbody > tr:hover > *{
  background-color: #212529 !important;
} */

.diaRC,
.diaAP {
  position: relative;
  cursor: pointer;
  background: #FFFFFF !important;
  border: 1px solid #B6B6B6;
}
.diaRC::after,
.diaAP::after {
  content: "";
  position: absolute;
  bottom: 5px;
  left: 10%;
  width: 80%;
  height: 3px;
  background-color: #1FA4E7;
  border-radius: 20px;
  z-index: 0;
}
.diaRC::before,
.diaAP::before {
  content: "Disponible";
  position: absolute;
  bottom: 0px;
  left: 50%;
  transform: translateX(-50%);
  background: #fff;
  color: #1FA4E7;
  padding: 0 4px;
  z-index: 1;
}
/* .diaRC:hover,
.diaAP:hover {
  content: "Disponibless";
  color: #FFFFFF !important;
  background: #0D76AC !important;
  text-align: center;
} */

.diaNoDisponible{
	cursor: pointer;
  background: #FFFFFF !important;
  border: 1px solid #B6B6B6;
}
.diaNoDisponible::before {
  content: "Disponible";
  color: #C3EBFF;
  text-align: center;
}
.diaNoDisponible:hover{
	background: #f1f2f3 !important;
  box-shadow: none !important;
}

.diaAgendado{
	cursor: pointer;
  background: #34A753 !important;
  border: none;
}
.diaAgendado::before {
  content: "Agendado";
  color: #FFFFFF;
}

.diaPendiente{
	cursor: pointer;
  background: #E0A700 !important;
  color: #FFFFFF !important;
  text-align: center;
  vertical-align: middle;
  position: relative;
  text-align: center !important;
}
.diaPendiente::before {
  content: "";
  display: inline-block;
  vertical-align: middle;
  background-image: url("../../__data/_img/iconos/adevertencia-agenda.webp");
  background-size: contain;
  background-repeat: no-repeat;
  width: 24px;   
  height: 24px;
  margin-right: 4px;
  text-align: center !important;
}
.diaPendiente::after {
  content: "Pendiente por confirmar";
  display: inline-block;
  vertical-align: bottom;
  color: #FFFFFF;
  text-align: center !important;
}

.diaProponer{
  background: #B072FF !important;
  border: 1px solid #B6B6B6;
}
.diaProponer::before {
  content: "Proponer día";
  color: #FFFFFF;
  text-align: center;
}

.diaPropuesto{
  background: #B072FF !important;
  border: 1px solid #B6B6B6;
}
.diaPropuesto::before {
  content: "Día propuesto";
  color: #FFFFFF;
  text-align: center;
}

.diaAnterior{
  background: #F876AC !important;
  border: 1px solid #B6B6B6;
}
.diaAnterior::before {
  content: "Horario anterior";
  color: #FFFFFF;
  text-align: center;
}

.diaSolicitadoCliente{
  background: #E0A700 !important;
  border: 1px solid #B6B6B6;
}
.diaSolicitadoCliente::before {
  content: "Solicitado por el cliente";
  color: #FFFFFF;
  text-align: center;
}

.diaDeshabilitado {
  cursor: pointer;
  background: linear-gradient(to bottom, #DBDBDB 50%, #868686 50%);
  color: #DBDBDB !important;
  text-align: center;
  vertical-align: bottom;
  position: relative;
}
.diaDeshabilitado::before {
  content: "";
  display: inline-block;
  vertical-align: bottom;
  background-image: url("../../__data/_img/iconos/diaDeshabilitado2.webp");
  background-size: contain;
  background-repeat: no-repeat;
  width: 24px;   
  height: 24px;
  margin-right: 4px;
}
.diaDeshabilitado::after {
  content: "No disponible";
  display: inline-block;
  vertical-align: bottom;
  color: #DBDBDB;
  margin-top: 29px;
}


.diaSeleccionado{
	background: linear-gradient(180deg, #E87F3A 0%, #C9570B 100%) !important;
  position: relative;
}
.diaSeleccionado::before {
  content: "Solicitar";
  position: relative;
  bottom: 0px;
  left: 0;
  background: none;
  color: #FFFFFF !important;
  text-align: center;
}
.diaSeleccionado::after {
  content: "";
  position: relative;
  bottom: 0;
  left: 0;
}

.pasado{
  border: 1px solid #B6B6B6;
  cursor:not-allowed;
	background: #e4e4e4 !important;
}

@keyframes rotateImage {
  100% {
    transform: rotate(360deg);
  }
}
@media (max-width: 1300px) {
  .td-hora {  
    font-size: 16px !important;        
  }
}
@media (max-width: 576px) {
  .table-agenda > :not(caption) > * > *{
    /* padding: 4px !important; */
    font-size: 14px !important;
  }
  .td-hora {  
    font-size: 12px !important;        
  }
}

/* End Agenda */

.formulario-parte {
  display: none;
}

.formulario-parte.active {
  display: block;
}

/*----------------------Estilos buscarClientes ----------------------*/
.container-recordatorio{
  border: 2px dashed #8E8E8E;
  padding: 10px;
  margin: 0 10px 40px 10px;
}


/* ---------------------- Estilos planes ----------------------*/
.container-planes{
  padding: 0px 200px;
}
.container-planes-btn{
  padding: 10px 20px;
  background: rgba(134, 134, 134, 0.5);
  border: 2px solid #868686;
  border-radius: 8px;
}
.card-plan{
  min-height: 1120px;
  padding: 50px 20px;
  background: rgba(31, 41, 55, 1);
  border: none;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
}
.title-plan-basico{
  color: #F0C620 !important;
  font-size: 32px !important;
  font-weight: 700 !important;
}
.title-plan-premium{
  color: #E77F3A !important;
  font-size: 32px !important;
  font-weight: 700 !important;
}
.precio-plan{
  color: #fff !important;
  font-size: 64px !important;
  font-weight: 700 !important;
}
.leyenda-plan{
  color: #fff !important;
  font-size: 24px !important;
  font-weight: 500 !important;
}

@media (max-width: 1600px){
  .container-planes{
    padding: 0px 100px;
  }
  .card-plan .tittle-negritas,
  .card-plan .leyenda-plan,
  .btn-gray-plan,
  .btn-purple-plan{
    font-size: 20px !important;
  }

  .precio-plan{
    font-size: 54px !important;
  }
}
@media (max-width: 1199px){
  .container-planes{
    padding: 0px 80px;
  }
  .card-plan{
    min-height: 1000px;
  }
}
@media (max-width: 991px){
  .container-planes{
    padding: 0px 110px;
  }
  .card-plan{
    min-height: auto;
  }
}
@media (max-width: 767px){
  .container-planes{
    padding: 0px 60px;
  }
}
@media (max-width: 560px){
  .container-planes{
    padding: 0px 20px;
  }
  .container-planes-btn{
    padding: 10px;
  }
}