#wifi-loader {
    --background: #62abff;
    --front-color: #0360eb;
    --back-color: #D6E9F7;
    --text-color: #414856;
    width: 100%;
    height: 64px;
    margin-top: 12%;
    border-radius: 50px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  #wifi-loader svg {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  #wifi-loader svg circle {
    position: absolute;
    fill: none;
    stroke-width: 6px;
    stroke-linecap: round;
    stroke-linejoin: round;
    transform: rotate(-100deg);
    transform-origin: center;
  }
  
  #wifi-loader svg circle.back {
    stroke: var(--back-color);
  }
  
  #wifi-loader svg circle.front {
    stroke: var(--front-color);
  }
  
  #wifi-loader svg.circle-outer {
    height: 86px;
    width: 86px;
  }
  
  #wifi-loader svg.circle-outer circle {
    stroke-dasharray: 62.75 188.25;
  }
  
  #wifi-loader svg.circle-outer circle.back {
    animation: circle-outer135 1.8s ease infinite 0.3s;
  }
  
  #wifi-loader svg.circle-outer circle.front {
    animation: circle-outer135 1.8s ease infinite 0.15s;
  }
  
  #wifi-loader svg.circle-middle {
    height: 60px;
    width: 60px;
  }
  
  #wifi-loader svg.circle-middle circle {
    stroke-dasharray: 42.5 127.5;
  }
  
  #wifi-loader svg.circle-middle circle.back {
    animation: circle-middle6123 1.8s ease infinite 0.25s;
  }
  
  #wifi-loader svg.circle-middle circle.front {
    animation: circle-middle6123 1.8s ease infinite 0.1s;
  }
  
  #wifi-loader svg.circle-inner {
    height: 34px;
    width: 34px;
  }
  
  #wifi-loader svg.circle-inner circle {
    stroke-dasharray: 22 66;
  }
  
  #wifi-loader svg.circle-inner circle.back {
    animation: circle-inner162 1.8s ease infinite 0.2s;
  }
  
  #wifi-loader svg.circle-inner circle.front {
    animation: circle-inner162 1.8s ease infinite 0.05s;
  }
  
  #wifi-loader .text {
    position: absolute;
    bottom: -40px;
    top: 110px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-transform: lowercase;
    font-weight: 500;
    font-size: 14px;
    letter-spacing: 0.2px;
  }
  
  #wifi-loader .text::before, #wifi-loader .text::after {
    content: attr(data-text);
  }
  
  #wifi-loader .text::before {
    color: var(--text-color);
  }
  
  #wifi-loader .text::after {
    color: var(--front-color);
    animation: text-animation76 3.6s ease infinite;
    position: absolute;
    left: 0;
  }
  
  @keyframes circle-outer135 {
    0% {
      stroke-dashoffset: 25;
    }
  
    25% {
      stroke-dashoffset: 0;
    }
  
    65% {
      stroke-dashoffset: 301;
    }
  
    80% {
      stroke-dashoffset: 276;
    }
  
    100% {
      stroke-dashoffset: 276;
    }
  }
  
  @keyframes circle-middle6123 {
    0% {
      stroke-dashoffset: 17;
    }
  
    25% {
      stroke-dashoffset: 0;
    }
  
    65% {
      stroke-dashoffset: 204;
    }
  
    80% {
      stroke-dashoffset: 187;
    }
  
    100% {
      stroke-dashoffset: 187;
    }
  }
  
  @keyframes circle-inner162 {
    0% {
      stroke-dashoffset: 9;
    }
  
    25% {
      stroke-dashoffset: 0;
    }
  
    65% {
      stroke-dashoffset: 106;
    }
  
    80% {
      stroke-dashoffset: 97;
    }
  
    100% {
      stroke-dashoffset: 97;
    }
  }
  
  @keyframes text-animation76 {
    0% {
      clip-path: inset(0 100% 0 0);
    }
  
    50% {
      clip-path: inset(0);
    }
  
    100% {
      clip-path: inset(0 0 0 100%);
    }
  }


  .container2 {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Fondo oscuro semitransparente */
    z-index: 9999; /* Asegura que la ventana emergente esté en la parte superior */
}

.card {
    position: absolute;
    top: 10%;
    left: 88%;
    transform: translate(-50%, -50%);
    width: 130px;
    height: 140px;
    background-color: #F8FBFE;
    border-radius: 8px;
    z-index: 10000; /* Asegura que la ventana emergente esté en la parte superior */
}

.tools {
    display: flex;
    align-items: center;
    padding: 9px;
}

.circle {
    padding: 0 4px;
}

.box {
    display: inline-block;
    align-items: center;
    width: 10px;
    height: 10px;
    padding: 1px;
    border-radius: 50%;
}




.larger-popup {
  width: 20%;
  min-height: 50%;   /* altura mínima */
  height: auto;      /* permite que crezca si el contenido lo requiere */
}

.larger-popup-toast{
  height: 10%;
  font-size: 18px;
}

@media screen and (max-width: 768px) {
  .larger-popup {
      width: 85%; /* Ajuste del ancho para pantallas pequeñas */
      min-height: 50%;   /* altura mínima */
      height: auto;      /* permite que crezca si el contenido lo requiere */
  }
}





.tooltipManual {
  position: relative;
  display: inline-block;
  cursor: pointer;
  width: 100%;
}

/* .tooltip button {
  background-color: #db3434;
  color: #fff;
  border: none;
  padding: 10px 20px;
  border-radius: 5px;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.3s, transform 0.2s ease-out;
} */

.tooltipManual .hoverMe:hover {
  transform: scale(1.05);
}

.tooltipManual:hover .tooltiptextManual {
  visibility: visible;
  opacity: 1;
}

.tooltiptextManual {
  visibility: hidden;
  width: 160px;
  background-color: #333;
  color: #fff;
  text-align: center;
  border-radius: 8px;
  padding: 5px;
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  margin-left: -80px;
  opacity: 0;
  transition: opacity 0.3s;
}

.tooltiptextManual::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #333 transparent transparent transparent;
}




.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 3 SIN MODAL */

.loader3 {
  position: relative;
  width: 54px;
  height: 54px;
  border-radius: 10px;
}

.loader3 div {
  width: 8%;
  height: 24%;
  background: rgb(128, 128, 128);
  position: absolute;
  left: 50%;
  top: 30%;
  opacity: 0;
  border-radius: 50px;
  box-shadow: 0 0 3px rgba(0,0,0,0.2);
  animation: fade458 1s linear infinite;
}

@keyframes fade458 {
  from {
    opacity: 1;
  }

  to {
    opacity: 0.25;
  }
}

.loader3 .bar1 {
  transform: rotate(0deg) translate(0, -130%);
  animation-delay: 0s;
}

.loader3 .bar2 {
  transform: rotate(30deg) translate(0, -130%);
  animation-delay: -1.1s;
}

.loader3 .bar3 {
  transform: rotate(60deg) translate(0, -130%);
  animation-delay: -1s;
}

.loader3 .bar4 {
  transform: rotate(90deg) translate(0, -130%);
  animation-delay: -0.9s;
}

.loader3 .bar5 {
  transform: rotate(120deg) translate(0, -130%);
  animation-delay: -0.8s;
}

.loader3 .bar6 {
  transform: rotate(150deg) translate(0, -130%);
  animation-delay: -0.7s;
}

.loader3 .bar7 {
  transform: rotate(180deg) translate(0, -130%);
  animation-delay: -0.6s;
}

.loader3 .bar8 {
  transform: rotate(210deg) translate(0, -130%);
  animation-delay: -0.5s;
}

.loader3 .bar9 {
  transform: rotate(240deg) translate(0, -130%);
  animation-delay: -0.4s;
}

.loader3 .bar10 {
  transform: rotate(270deg) translate(0, -130%);
  animation-delay: -0.3s;
}

.loader3 .bar11 {
  transform: rotate(300deg) translate(0, -130%);
  animation-delay: -0.2s;
}

.loader3 .bar12 {
  transform: rotate(330deg) translate(0, -130%);
  animation-delay: -0.1s;
}


  /* +++++++++++++++++++++++++++++++++++++++++++++ CHAT DE SELECCIÓN    +++++++++++++++++++++++++++++++++++++++++++++++ */

   
.chat-card {
  width: 400px;
  height: 350px;
  background-color: #fff;
  border-radius: 5px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  z-index: 9999999;
}

.chat-header {
  padding: 10px;
  background-color: #f2f2f2;
  /* display: flex;
  align-items: center; */
}

.chat-header .h2 {
  font-size: 16px;
  color: #333;
}

.chat-body {
  padding: 20px;
  height: 225px;
  overflow: auto;
}

.message {
  margin-bottom: 10px;
  padding: 10px;
  border-radius: 5px;
}

.incoming {
  background-color: #e1e1e1;
}

.outgoing {
  background-color: #f2f2f2;
  text-align: right;
}

.message p {
  font-size: 14px;
  color: #333;
  margin: 0;
}

.chat-footer {
  padding: 10px;
  background-color: #f2f2f2;
  display: flex;
}

.chat-footer textarea {
  flex-grow: 1;
  color: black;
  padding: 5px;
  border: none;
  border-radius: 3px;
  resize: none;
  overflow: auto;
  font-size: 14px;
}

.chat-footer button {
  padding: 5px 10px;
  border: none;
  background-color: #4285f4;
  color: #fff;
  font-weight: bold;
  cursor: pointer;
  transition: background-color 0.3s;
}

.chat-footer button:hover {
  background-color: #0f9d58;
}

@keyframes chatAnimation {
  0% {
    opacity: 0;
    transform: translateY(10px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.chat-card .message {
  animation: chatAnimation 0.3s ease-in-out;
  animation-fill-mode: both;
  animation-delay: 0.1s;
}

.chat-card .message:nth-child(even) {
  animation-delay: 0.2s;
}

.chat-card .message:nth-child(odd) {
  animation-delay: 0.3s;
}




.switch {
 --button-width: 3.5em;
 --button-height: 2em;
 --toggle-diameter: 1.5em;
 --button-toggle-offset: calc((var(--button-height) - var(--toggle-diameter)) / 2);
 --toggle-shadow-offset: 10px;
 --toggle-wider: 3em;
 --color-grey: #cccccc;
 --color-green: #4296f4;
}

.slider {
 display: inline-block;
 width: var(--button-width);
 height: var(--button-height);
 background-color: var(--color-grey);
 border-radius: calc(var(--button-height) / 2);
 position: relative;
 transition: 0.3s all ease-in-out;
}

.slider::after {
 content: "";
 display: inline-block;
 width: var(--toggle-diameter);
 height: var(--toggle-diameter);
 background-color: #fff;
 border-radius: calc(var(--toggle-diameter) / 2);
 position: absolute;
 top: var(--button-toggle-offset);
 transform: translateX(var(--button-toggle-offset));
 box-shadow: var(--toggle-shadow-offset) 0 calc(var(--toggle-shadow-offset) * 4) rgba(0, 0, 0, 0.1);
 transition: 0.3s all ease-in-out;
}

.switch input[type="checkbox"]:checked + .slider {
 background-color: var(--color-green);
}

.switch input[type="checkbox"]:checked + .slider::after {
 transform: translateX(calc(var(--button-width) - var(--toggle-diameter) - var(--button-toggle-offset)));
 box-shadow: calc(var(--toggle-shadow-offset) * -1) 0 calc(var(--toggle-shadow-offset) * 4) rgba(0, 0, 0, 0.1);
}

.switch input[type="checkbox"] {
 display: none;
}

.switch input[type="checkbox"]:active + .slider::after {
 width: var(--toggle-wider);
}

.switch input[type="checkbox"]:checked:active + .slider::after {
 transform: translateX(calc(var(--button-width) - var(--toggle-wider) - var(--button-toggle-offset)));
}





/* TOOLTIP COMPONENT QUESTION */

.tooltip-container-question {
    position: relative;
    display: inline-block;
}

/* --- TOOLTIP BASE --- */
.tooltip-question {
    position: absolute;
    width: clamp(200px, 40vw, 280px);
    padding: 5px 5px;
    background: black;
    border-radius: 10px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    color: white;
    font-size: 14px;
    white-space: normal; 
    word-wrap: break-word; 
    opacity: 0;
    visibility: hidden;
    transition: all 0.25s ease;
    border: 1px solid rgba(229, 231, 235, 1);
    z-index: 99999;
    left: 50%;
    transform: translateX(-50%);
}
/* TOP */
.tooltip-question.top {
    bottom: calc(100% + 12px);
    left: 50%;
    transform: translateX(-50%);
}
.tooltip-question.top::after {
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border-color: #fff transparent transparent transparent;
}

/* BOTTOM */
.tooltip-question.bottom {
    top: calc(100% + 4px);
    left: 50%;
    transform: translateX(-50%);
}
.tooltip-question.bottom::after {
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%) rotate(180deg);
    border-color: #fff transparent transparent transparent;
}

/* LEFT */
.tooltip-question.left {
    right: 50%;
    top: 50%;
    transform: translateY(-50%);
}
.tooltip-question.left::after {
    left: 50%;
    top: 50%;
    transform: translateY(-50%) rotate(90deg);
    border-color: transparent transparent transparent #fff;
}

/* RIGHT */
.tooltip-question.right {
    left: 80%;
    top: 50%;
    transform: translateY(-50%);
}
.tooltip-question.right::after {
    right: 50%;
    top: 50%;
    transform: translateY(-50%) rotate(-90deg);
    border-color: transparent #fff transparent transparent;
}

/* Mostrar tooltip */
.tooltip-container-question:hover .tooltip-question {
    opacity: 1;
    visibility: visible;
}

/* Animaciones */
@keyframes glow {
    0% { text-shadow: 0 0 10px rgba(99, 102, 241, 0.5); }
    50% { text-shadow: 0 0 20px rgba(99, 102, 241, 0.7); }
    100% { text-shadow: 0 0 10px rgba(99, 102, 241, 0.5); }
}
.tooltip-question strong {
    animation: glow 2s infinite;
    font-weight: 600;
}
.tooltip-question i {
    margin-right: 6px;
    color: #6366f1;
}

@media (max-width: 768px) {

    /* Fuerza al tooltip a NO salirse de la pantalla */
    .tooltip-question {
        max-width: calc(100vw - 20px) !important; 
        left: 50% !important;
        transform: translateX(-50%) !important;
        overflow-wrap: break-word;
    }

    /* Asegura que nunca se genere scroll vertical */
    body {
        overflow-x: hidden !important;
    }
}