.responsivo {
  overflow-x: auto;
}

table {
  width: 100%;
  border-collapse: collapse;
}

table td,
table th {
  padding: 5px;
  white-space: nowrap;
  /* Evita que los datos se envuelvan en varias líneas */
}

.rojo {
  color: red !important;
}


.azul {
  color: blue !important;
}

.verde {
  color: green !important;
}

.negro {
  color: black !important;
}

.liga_estilizada {
  outline: none;
  text-decoration: none;
  padding-top: 3px;
  padding-bottom: 3px;
  padding-left: 6px;
  padding-right: 6px;
  font-weight: bold;
}

.liga_estilizada2 {
  outline: none;
  text-decoration: none;
  font-weight: bold;
  color: #E20210FF;
}

#loading-indicator {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 1000;
  background: #fff;
  padding: 50px;
  border-radius: 5px;
  /**box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); */
}

.dataTables_processing {
  z-index: 11000;
  /* Asegúrate de que se muestre sobre otros elementos */
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid #aaa;
  padding: 20px;
  border-radius: 4px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
  color: #333;
  text-align: center;
  font-size: 18px;
}

.rotar {
  -webkit-transform: rotate(-90deg);
  transform: rotate(-90deg);
}

.blink {
  color: red;
  animation: blink-animation 1s steps(5, start) infinite;
  -webkit-animation: blink-animation 1s steps(5, start) infinite;
}

@keyframes blink-animation {
  to {
    visibility: hidden;
  }
}

@-webkit-keyframes blink-animation {
  to {
    visibility: hidden;
  }
}

.card-header {
  background: #FFF59D;
  color: #212121;
}

.dt-search {
  margin-top: 10px;
}

/*
input {
  text-transform: uppercase;
}
*/
/* controles personalizados checkbox */

.switch-holder {
  display: flex;
  padding: 10px 20px;
  border-radius: 10px;
  box-shadow: -8px -8px 15px rgba(255, 255, 255, .7),
    10px 10px 10px rgba(0, 0, 0, .2),
    inset 8px 8px 15px rgba(255, 255, 255, .7),
    inset 10px 10px 10px rgba(0, 0, 0, .2);
  justify-content: space-between;
  align-items: center;
}

.switch-label {
  padding: 0 20px 0 10px
}

.switch-label i {
  margin-right: 5px;
}

.switch-toggle {
  height: 40px;
}

.switch-toggle input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  z-index: -2;
}

.switch-toggle input[type="checkbox"]+label {
  position: relative;
  display: inline-block;
  width: 100px;
  height: 40px;
  border-radius: 20px;
  margin: 0;
  cursor: pointer;
  box-shadow: inset -8px -8px 15px rgba(255, 255, 255, .6),
    inset 10px 10px 10px rgba(0, 0, 0, .25);
}

.switch-toggle input[type="checkbox"]+label::before {
  position: absolute;
  content: 'OFF';
  font-size: 13px;
  text-align: center;
  line-height: 25px;
  top: 8px;
  left: 8px;
  width: 45px;
  height: 25px;
  border-radius: 20px;
  background-color: #eeeeee;
  box-shadow: -3px -3px 5px rgba(255, 255, 255, .5),
    3px 3px 5px rgba(0, 0, 0, .25);
  transition: .3s ease-in-out;
}

.switch-toggle input[type="checkbox"]:checked+label::before {
  left: 50%;
  content: 'ON';
  color: #fff;
  background-color: #00b33c;
  box-shadow: -3px -3px 5px rgba(255, 255, 255, .5),
    3px 3px 5px #00b33c;
}

/* */
.checkbox-wrapper input[type="checkbox"] {
  visibility: hidden;
  display: none;
}

.checkbox-wrapper *,
.checkbox-wrapper ::after,
.checkbox-wrapper ::before {
  box-sizing: border-box;
  user-select: none;
}

.checkbox-wrapper {
  position: relative;
  display: block;
  overflow: hidden;
}

.checkbox-wrapper .label {
  cursor: pointer;
}

.checkbox-wrapper .check {
  width: 50px;
  height: 50px;
  position: absolute;
  opacity: 0;
}

.checkbox-wrapper .label svg {
  vertical-align: middle;
}

.checkbox-wrapper .path1 {
  stroke-dasharray: 400;
  stroke-dashoffset: 400;
  transition: .5s stroke-dashoffset;
  opacity: 0;
}

.checkbox-wrapper .check:checked+label svg g path {
  stroke-dashoffset: 0;
  opacity: 1;
}


/* loader */
.🤚 {
  --skin-color: #E4C560;
  --tap-speed: 0.6s;
  --tap-stagger: 0.1s;
  position: relative;
  width: 80px;
  height: 60px;
  margin-left: 80px;
}

.🤚:before {
  content: '';
  display: block;
  width: 180%;
  height: 75%;
  position: absolute;
  top: 70%;
  right: 20%;
  background-color: black;
  border-radius: 40px 10px;
  filter: blur(10px);
  opacity: 0.3;
}

.🌴 {
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: var(--skin-color);
  border-radius: 10px 40px;
}

.👍 {
  position: absolute;
  width: 120%;
  height: 38px;
  background-color: var(--skin-color);
  bottom: -18%;
  right: 1%;
  transform-origin: calc(100% - 20px) 20px;
  transform: rotate(-20deg);
  border-radius: 30px 20px 20px 10px;
  border-bottom: 2px solid rgba(0, 0, 0, 0.1);
  border-left: 2px solid rgba(0, 0, 0, 0.1);
}

.👍:after {
  width: 20%;
  height: 60%;
  content: '';
  background-color: rgba(255, 255, 255, 0.3);
  position: absolute;
  bottom: -8%;
  left: 5px;
  border-radius: 60% 10% 10% 30%;
  border-right: 2px solid rgba(0, 0, 0, 0.05);
}

.👉 {
  position: absolute;
  width: 80%;
  height: 35px;
  background-color: var(--skin-color);
  bottom: 32%;
  right: 64%;
  transform-origin: 100% 20px;
  animation-duration: calc(var(--tap-speed) * 2);
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  transform: rotate(10deg);
}

.👉:before {
  content: '';
  position: absolute;
  width: 140%;
  height: 30px;
  background-color: var(--skin-color);
  bottom: 8%;
  right: 65%;
  transform-origin: calc(100% - 20px) 20px;
  transform: rotate(-60deg);
  border-radius: 20px;
}

.👉:nth-child(1) {
  animation-delay: 0;
  filter: brightness(70%);
  animation-name: tap-upper-1;
}

.👉:nth-child(2) {
  animation-delay: var(--tap-stagger);
  filter: brightness(80%);
  animation-name: tap-upper-2;
}

.👉:nth-child(3) {
  animation-delay: calc(var(--tap-stagger) * 2);
  filter: brightness(90%);
  animation-name: tap-upper-3;
}

.👉:nth-child(4) {
  animation-delay: calc(var(--tap-stagger) * 3);
  filter: brightness(100%);
  animation-name: tap-upper-4;
}

@keyframes tap-upper-1 {

  0%,
  50%,
  100% {
    transform: rotate(10deg) scale(0.4);
  }

  40% {
    transform: rotate(50deg) scale(0.4);
  }
}

@keyframes tap-upper-2 {

  0%,
  50%,
  100% {
    transform: rotate(10deg) scale(0.6);
  }

  40% {
    transform: rotate(50deg) scale(0.6);
  }
}

@keyframes tap-upper-3 {

  0%,
  50%,
  100% {
    transform: rotate(10deg) scale(0.8);
  }

  40% {
    transform: rotate(50deg) scale(0.8);
  }
}

@keyframes tap-upper-4 {

  0%,
  50%,
  100% {
    transform: rotate(10deg) scale(1);
  }

  40% {
    transform: rotate(50deg) scale(1);
  }
}


/* */

.select-icon {
  display: flex;
  align-items: center;
}

.select-icon i {
  margin-right: 15px;
  /* Ajusta el espacio entre el icono y el texto */
}


@media (max-width: 767.98px) {
  .login.login-v1 {
    color: white;
  }
}

@media (max-width: 767.98px) {
  .min {
    color: white;
  }

  .min small {
    color: white;
  }
}

/*  parametro de inputs    */

.input-container {
  margin: 10px 0;
}

.input-label {
  font-weight: bold;
}

.highlight {
  background-color: yellow;
}

/* loader verde */

.hacker-loader {
  position: relative;
  width: 24em;
  height: 6em;
  background-color: #0a0a0a;
  border: 0.2em solid #00ff00;
  border-radius: 0.5em;
  padding: 1em;
  overflow: hidden;
  box-shadow: 0 0 1em rgba(0, 255, 0, 0.3);
}

.loader-text {
  text-align: center;
  margin-bottom: 1em;
}

.text-glitch {
  color: #00ff00;
  font-family: monospace;
  font-size: 1.5em;
  position: relative;
  display: inline-block;
}

.text-glitch::before,
.text-glitch::after {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #0a0a0a;
  clip: rect(0, 0, 0, 0);
}

.text-glitch::before {
  left: -0.1em;
  text-shadow: 0.1em 0 #ff00ff;
  animation: glitch-effect 3s infinite linear alternate-reverse;
}

.text-glitch::after {
  left: 0.1em;
  text-shadow: -0.1em 0 #00ffff;
  animation: glitch-effect 2s infinite linear alternate-reverse;
}

.loader-bar {
  width: 100%;
  height: 0.5em;
  background-color: #003300;
  border-radius: 0.25em;
  position: relative;
  overflow: hidden;
}

.bar-fill {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 100%;
  background-color: #00ff00;
  animation: bar-fill-animation 2s infinite ease-in-out;
}

.bar-glitch {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(45deg,
      transparent,
      rgba(0, 255, 0, 0.2),
      transparent);
  background-size: 200% 200%;
  animation: bar-glitch-animation 2s infinite linear;
}

.particles {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.particle {
  position: absolute;
  width: 0.2em;
  height: 0.2em;
  background-color: #00ff00;
  border-radius: 50%;
  opacity: 0;
  animation: particle-animation 2s infinite linear;
}

.particle:nth-child(1) {
  top: 10%;
  left: 10%;
  animation-delay: 0s;
}

.particle:nth-child(2) {
  top: 30%;
  left: 60%;
  animation-delay: 0.5s;
}

.particle:nth-child(3) {
  top: 70%;
  left: 30%;
  animation-delay: 1s;
}

.particle:nth-child(4) {
  top: 90%;
  left: 90%;
  animation-delay: 1.5s;
}

.particle:nth-child(5) {
  top: 50%;
  left: 50%;
  animation-delay: 2s;
}

@keyframes glitch-effect {
  0% {
    clip: rect(42px, 9999px, 44px, 0);
  }

  5% {
    clip: rect(12px, 9999px, 59px, 0);
  }

  10% {
    clip: rect(48px, 9999px, 29px, 0);
  }

  15.0% {
    clip: rect(42px, 9999px, 73px, 0);
  }

  20% {
    clip: rect(63px, 9999px, 27px, 0);
  }

  25% {
    clip: rect(34px, 9999px, 55px, 0);
  }

  30.0% {
    clip: rect(86px, 9999px, 73px, 0);
  }

  35% {
    clip: rect(20px, 9999px, 20px, 0);
  }

  40% {
    clip: rect(26px, 9999px, 60px, 0);
  }

  45% {
    clip: rect(25px, 9999px, 66px, 0);
  }

  50% {
    clip: rect(57px, 9999px, 98px, 0);
  }

  55.0% {
    clip: rect(5px, 9999px, 46px, 0);
  }

  60.0% {
    clip: rect(82px, 9999px, 31px, 0);
  }

  65% {
    clip: rect(54px, 9999px, 27px, 0);
  }

  70% {
    clip: rect(28px, 9999px, 99px, 0);
  }

  75% {
    clip: rect(45px, 9999px, 69px, 0);
  }

  80% {
    clip: rect(23px, 9999px, 85px, 0);
  }

  85.0% {
    clip: rect(54px, 9999px, 84px, 0);
  }

  90% {
    clip: rect(45px, 9999px, 47px, 0);
  }

  95% {
    clip: rect(37px, 9999px, 20px, 0);
  }

  100% {
    clip: rect(4px, 9999px, 91px, 0);
  }
}

@keyframes bar-fill-animation {

  0%,
  100% {
    width: 0;
  }

  50% {
    width: 100%;
  }
}

@keyframes bar-glitch-animation {
  0% {
    background-position: 0 0;
  }

  100% {
    background-position: 200% 0;
  }
}

@keyframes particle-animation {
  0% {
    opacity: 0;
    transform: translate(0, 0);
  }

  50% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform: translate(2em, 2em);
  }
}


/* PIVOTTABLE */

/* swal pantalla completa */

.my-swal-fullscreen {
  width: 80vw !important;
  /* 80% del ancho de la ventana */
  height: 80vh !important;
  /* 80% de la altura de la ventana */
  max-width: 80vw !important;
  /* Elimina restricciones de tamaño */
  max-height: 80vh !important;
  position: fixed;
  /* Fijo para que no se mueva al hacer scroll */
  top: 50%;
  /* Posiciona la parte superior al 50% de la ventana */
  left: 50%;
  /* Posiciona el borde izquierdo al 50% de la ventana */
  transform: translate(-50%, -50%);
  /* Centra el modal desplazándolo hacia arriba y a la izquierda */
  margin: 0 !important;
  /* Sin márgenes */
  padding: 0 !important;
  /* Sin relleno */
  border-radius: 10px !important;
  /* Bordes ligeramente redondeados para un mejor diseño */
}

.scrollable-list {
  max-height: 300px;
  /* Limitar la altura máxima del contenedor */
  overflow-y: auto;
  /* Habilitar el scroll vertical */
  border: 1px solid #ddd;
  /* Agregar borde para diferenciar */
}



/* configuracion del switch de cierre normal y paro en calendario */

/* From Uiverse.io by victoryamaykin */
.switch {
  position: relative;
  display: inline-block;
  width: 120px;
  height: 34px;
}

.switch input {
  display: none;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #3C3C3C;
  -webkit-transition: .4s;
  transition: .4s;
  border-radius: 34px;
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
  border-radius: 50%;
}

input:checked+.slider {
  background-color: #0E6EB8;
}

input:focus+.slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked+.slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(85px);
}

/*------ ADDED CSS ---------*/
.slider:after {
  content: 'Normal';
  color: white;
  display: block;
  position: absolute;
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
  font-size: 10px;
  font-family: Verdana, sans-serif;
}

input:checked+.slider:after {
  content: 'Paro';
}

/*--------- END --------*/


/*LOADER2*/
/* From Uiverse.io by vinodjangid07 */
.loader {
  display: flex;
  align-items: center;
  justify-content: center;
}

.wrapper {
  width: 180px;
  height: 50px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}

.text {
  z-index: 3;
  font-family: Whitney, -apple-system, Helvetica;
  letter-spacing: 1px;
  font-weight: 700;
  font-size: 20px;
  color: white;
  filter: drop-shadow(2px 2px 0px #ff9e02);
}

.box {
  width: 100%;
  height: 100%;
  background-color: #ef5d2e;
  position: absolute;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: loading ease-in-out 0.9s infinite alternate-reverse;
}

@keyframes loading {
  0% {
    transform: translateX(-20px);
  }

  100% {
    transform: translateX(20px);
  }
}

.box::before {
  content: "";
  width: 20px;
  height: 170%;
  background-color: #ff9d0089;
  position: absolute;
  z-index: 1;
  animation: loading2 ease-in-out 0.9s infinite alternate-reverse;
}

@keyframes loading2 {
  0% {
    transform: translateX(-50px);
  }

  100% {
    transform: translateX(50px);
  }
}


#gallery .gallery img {
        width: 100%;
        height: auto;
        object-fit: cover;
        border-radius: 5px;
    }
/*LOADER2*/