/*===============Propiedades Globales================*/

@import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap');

body {
    font-family: 'Montserrat', sans-serif;
    overflow-x: hidden;
    background-color: #20232C;
}

/*===================SLIDER DE IMAGENES==========================*/

.carousel-inner {
    max-height: 39rem !important;
}

.container_circulo {
    margin-top: -15px;
    display: flex;
    align-items: center;
    width: 40%;
    margin-left: 20%;
}

.circle_circulo {
    align-items: center;
    width: 10px;
    height: 10px;
    background-color: rgb(100, 100, 100);
    border-radius: 50%;
}

.text_circulo {
    margin-top: -1px;
    align-items: center;
    margin-left: 5px;
    font-size: 15px;
    font-family: Arial, sans-serif;
    color: rgb(255, 255, 255);
}
/*===================SECCION NUESTRO EQUIPO IMAGEN==========================*/

.button-row {
    display: flex;
    flex-direction: row;
    gap: 50px;
    /* Espacio entre los botones */
}

#img-equipo {
    max-height: 30rem !important;
    width: 50%;
}

/*=========================CONTACTOS BACKGROUND================================*/

#bg-contactos {
    position: relative;
    top: -130px;
}

#seccion-contacto {
    background-color: #20232C;
    min-height: 500px;
    position: relative;
}


/*=========================FOOTER================================*/

footer {
    position: fixed;
    background: #20232C;
    min-height: 100px;
    bottom: 0;
}

footer p {
    position: fixed;
    color: #f3f3f3;
    text-align: center;
    margin-bottom: 1px;
}

#iconos i {
    font-size: 26px;
    padding: 0 8px;
    color: #f3f3f3;
    position: fixed;
    margin-bottom: 1px;
}


/*=========================MEDIA QUERIES PANTALLA ANCHA================================*/

@media (max-width:1200px) {

    #intro,
    #equipo {
        width: 90% !important;
        margin: auto;
    }

    #local {
        flex-wrap: wrap;
        padding-top: 30px;
    }

    .wrapper-local {
        width: 90%;
        margin: auto;
        padding-top: 50px;
    }

}

/*=========================MEDIA QUERIES PANTALLA SM================================*/


@media (max-width:768px) {

    #intro,
    #equipo {
        width: 90% !important;
        margin: auto;
    }


    #img-equipo {
        max-height: 20rem !important;
        width: 90%;
    }

    .wrapper-local {
        width: 90%;
        margin: auto;
        padding-top: 50px;
    }

    #local {
        flex-wrap: wrap;
    }

    .mapa img {
        width: 100%;
        height: auto;
    }

    #bg-contactos {
        top: -120px;
    }


}

/*=========================MEDIA QUERIES PANTALLA EXTRA-SM================================*/

@media (max-width: 576px) {
    #servicios-fila-2 {
        width: 100% !important;
    }

    #servicios-fila-1 {
        width: 100% !important;
    }

    .icono-wrap {
        flex-wrap: wrap !important;
        justify-content: center !important;
        text-align: center;
    }
}


#iconos i {
    font-size: 26px;
    padding: 0 8px;
    color: #f3f3f3;
    position: fixed;
    margin-bottom: 0px;
}

.botones-container {
    display: flex;
    justify-content: space-between;
}

.boton {
    font-size: 10px;
    padding: 10px 20px;
}

h3 {
    text-align: center;
    margin-top: 25px;
    margin-left: 20px;
    margin-right: 20px;
    font-weight: bold;
}

/*=========================MEDIA QUERIES PANTALLA EXTRA-SM================================*/

.btn-custom-sm {
    padding: 0.175rem 0.25rem;
    /* Personaliza el padding */
    font-size: 0.5rem;
    /* Personaliza el tamaño de fuente */
}
.btn-customize-sm {
    padding: 0.175rem 0.25rem;
    /* Personaliza el padding */
    font-size: 0.75rem;
    /* Personaliza el tamaño de fuente */
}
.btn-saveandclean{
    margin-left: 50%;
}
/*=========================contenedores ocultos================================*/

.container {
    margin-top: 15px;
}


.content-container {
    display: none;
    /* Oculta todos los contenedores por defecto */
}

.btn {
    margin-right: 10px; /* Ajusta el valor según el espacio que desees entre los botones */
}

/* Asegúrate de que el último botón no tenga margen derecho */
.btn:last-child {
    margin-right: 0;
}

/*=========================contenedores ocultos================================*/
/* Estilos para el contenedor */
.content-container {
    margin-bottom: 40px; 
    padding: 20px;
    border-radius: 15px;
}

.text-before-input {
    margin-bottom: 0px; 
    font-size: 16px;
    color: black;
}

.text-input.error {
        color:red;
}

.text-input {
    text-align: right;
    width: calc(50% - 5px);
    margin-bottom: 10px;
    padding: 2px;
    border: 1px solid #00469c;
    border-radius: 5px;
    box-sizing: border-box;
}

.text-below-input {
    font-style: italic; /* Texto en cursiva */
    font-size: 60%; /* Tamaño del texto */
    color: #888; /* Color gris */
}
.text-color-info {
    color: rgb(255, 194,55);
}

.text-below-input-information {
    font-style: italic; /* Texto en cursiva */
    font-size: 70%; /* Tamaño del texto */
    color: rgb(197, 197, 197); /* Color gris */
}

.text-below-input-information li {
    margin-left: 20px; /* Ajusta el valor según sea necesario */
    margin-right: 20px;
}
/*========================= frame circular ================================*/


.circular-frame {
    width: 150px; /* Ajusta el tamaño según sea necesario */
    height: 150px; /* Ajusta el tamaño según sea necesario */
    border: 5px solid rgb(255, 194,55); /* Contorno de grosor 5px y color negro */
    border-radius: 50%; /* Marco circular */
    overflow: hidden; /* Para asegurar que la imagen no se salga del contorno circular */
    display: flex;
    justify-content: center;
    align-items: center;
}

.gif-principal_edicion {
    margin-top: 30%;
    width: 100%;
    height: auto;
    overflow: hidden; /* Para asegurar que la imagen no se salga del contorno circular */
    display: flex;
    align-items: center;
}


.circular-frame img {
    width: auto;
    height: 100%;
    object-fit: cover; /* Para asegurar que la imagen cubra el área del contorno sin distorsión */
}

.hidden {
    display: none;
}

.content_login{
    width: 80%;
    margin-left: 10%;
}       

.form-control{
width: 100%;
}

.center {
    display: block;
    margin: auto;
}


    /* Estilos para el botón */
    .transparent-button {
        background-color: transparent; /* Fondo transparente */
        border: none; /* Sin borde */
        padding: 0; /* Sin relleno */
    }
    


    .container-home-buttons {
        display: grid;
        grid-template-columns: repeat(2, 1fr); /* 2 columnas */
        gap: 10px; /* Espacio entre botones */
        width: 100%; /* Ajusta el ancho según sea necesario */
        border: none;
        margin-left:0%;
        margin-right: 0%;
        padding: 10px;
        border-radius: 15px;
    }
    
    .linea {
        border-top: 1px dashed rgb(255, 255, 255); /* Línea horizontal de 1px de grosor y sólida */
        margin-right: 10%;
        width: 80%;
        margin-left: 10%;
        align-items: center;
        margin-top:10px;
      }

.container-home-buttons-contenidos{
    grid-template-columns: repeat(1, 1fr); /* 2 columnas */
    gap: 0px; /* Espacio entre botones */
    width: 90%; /* Ajusta el ancho según sea necesario */
    margin-left:5%;
    margin-right: 5%;
    padding: 10px;
    border-radius: 15px;
}
    
    .container-home-buttons button {
        height: 150px;
        padding-right: 5%;
        padding-left: 5%;
        font-size: 16px;
        border-color: none;
        border-radius: 15px;
        background-color: #1a1c25;
    }

    .container-home-buttons button p{
        margin-top:15px;
        margin-left:0px;
        color: white;
    }
    .container-home-buttons button img{
        display: block; /* Hace que la imagen sea un bloque para poder aplicar márgenes */
        margin: 0 auto; 
        width: 40%;
        }

    .button_Serv_tec {
        margin-top: 20px;
        height: 50px;
        padding-right: 10%;
        padding-left: 10%;
        font-size: 16px;
        border-color: none;
        border-radius: 15px;
        background-color: #06de43;
    }
    .button_stadistics {
        margin-top: 20px;
        height: 50px;
        padding-right: 10%;
        padding-left: 10%;
        font-size: 16px;
        border-color: none;
        border-radius: 15px;
    }
.consumibles{
    width: 80%;
    margin-left: 10%;
    margin-top: 20px;
    margin-bottom: 10px;
    padding: 10px;
    border: 1px solid #EF7828;
    border-radius: 5px; 
    color: white; /* Texto en blanco */
    display: flex;
    align-items: flex-start;
}
#videoContainer {
    text-align: center;
}

#video {
    width: 100%;
    max-width: 600px;
}

#qrInput {
    margin-top: 10px;
    padding: 5px;
    font-size: 16px;
    display: none;
} 

.container-maquinas {
    width: 80%;
    margin-left: 10%;
    margin-top: 10px;
    margin-bottom: 10px;
    padding: 10px;
    border: 0.5px dashed #EF7828;
    border-radius: 5px; 
    color: white; /* Texto en blanco */
    display: flex;
    align-items: flex-start;
    }
    

    .container-maquinas img {
    margin-top: -10px;
    margin-right: 20px;
    width: 100px;
    height: auto;
    }


    .container_wifi {
        width: 80%;
        margin-left: 10%;
        margin-top: 10px;
        margin-bottom: 10px;
        padding: 10px;
        border: 2px dashed #5bc0de;
        border-radius: 5px; 
        color: white; /* Texto en blanco */
        display: flex;
        align-items: flex-start;
        flex-direction: column;
        }
        
    
    .text-content-maquinas {
    flex-grow: 1;
    }
    
    .button-container {
    margin-top: 10px;
    }
    
    #addButton {
    margin-top: 20px;
    }
    
    #scanButton {
        margin-top: 10px;
        padding: 10px 20px;
        font-size: 16px;
        cursor: pointer;
    }
    #compareButton {
        margin-top: 10px;
        padding: 10px 20px;
        font-size: 16px;
        cursor: pointer;
        display: none;
    }
      
    .password-container {
        position: relative;
      }
      .toggle-password {
        position: absolute;
        top: 50%;
        right: 10px;
        transform: translateY(-50%);
        cursor: pointer;
      }

      .container_barras {
        margin-top: 10px;
        width: 80%;
        margin-left: 10%;
        border-radius: 5px; 
      }
  
      .container_barras .custom-progress {
        height: 50px;
        border-radius: 5px;
        overflow: hidden;
        margin-bottom: 10px;
      }
  
      .container_barras .custom-progress .progress-bar {
        height: 100%;
        transition: width 0.3s ease-in-out;
      }
  
     .progress-bar1 {
        background-color: #fff200; /* Green */
      }
  
      .progress-bar2 {
        background-color: #2196F3; /* Blue */
      }
  
      .progress-bar3 {
        background-color: #58186f; /*  */
      }
  
      .progress-bar4 {
        background-color: #ff6060; /*  */
      }


    .grid-container {
        display: grid;
        grid-template-columns: repeat(3, 1fr); /* 3 columnas con el mismo ancho */
        grid-gap: 10px; /* Espacio entre las celdas */
        width: 90%; /* Ajusta el ancho según sea necesario */
        margin: auto; /* Centra el contenedor horizontalmente */
        border: 1px solid #ffffff;
    }
    .grid-item {
        background-color: transparent;
        padding: 1px;
        text-align: center;
    }

    .fullscreen-gif {
        position: fixed;
        /* Posición fija en relación con la ventana del navegador */
        top: 0;
        left: 0;
        width: 100vw;
        /* Ancho igual al ancho de la ventana del navegador */
        height: 100vh;
        /* Altura igual a la altura de la ventana del navegador */
        z-index: 9999;
        /* Colocar encima de otros elementos */
      }





        .lamp-block{
    position:relative; isolation:isolate;
    --hue:285;           /* color luz (bloque 1)           */
    --logo-hue:300;      /* color brillo del logo (bloque 2) */
    width:min(1000px,96vw);
    margin:18px auto; display:grid; gap:10px;
  }
        .logo-block{
    position:relative; isolation:isolate;
    --hue:285;           /* color luz (bloque 1)           */
    --logo-hue:300;      /* color brillo del logo (bloque 2) */
    width:min(1000px,96vw);
    margin:18px auto; display:grid; gap:10px;
  }
  .lamp-stage{
    position:relative; aspect-ratio:1316/768;
    overflow:hidden; border-radius:14px;
  }
  .lamp-img{
    position:absolute; inset:0; width:100%; height:100%; object-fit:contain;
    z-index:2; user-select:none; -webkit-user-drag:none;
  }

  /* Luz general detrás (bloque 1) */
  .lamp-glow, .lamp-glow-core{
    --c: hsla(var(--hue),100%,55%,1);
    position:absolute; left:50%; transform:translateX(-50%);
    pointer-events:none; mix-blend-mode:screen; opacity:1; z-index:0;
  }
  .lamp-glow{
    bottom:8%; width:100%; height:65%;
    background: radial-gradient(ellipse,
      var(--c) 0%, hsla(var(--hue),100%,55%,0.55) 25%,
      hsla(var(--hue),100%,55%,0.22) 60%, transparent 90%);
    filter: blur(44px) saturate(140%);
  }
  .lamp-glow-core{
    bottom:14%; width:70%; height:45%;
    background: radial-gradient(ellipse,
      var(--c) 0%, hsla(var(--hue),100%,65%,0.75) 45%, transparent 85%);
    filter: blur(24px) saturate(160%) brightness(1.2);
  }

  /* ===== Brillo SOLO en el área del logo (bloque 2) ===== */
  .logo-area{
    position:absolute; z-index:1; /* debajo de la lámpara, encima del fondo */
    left:50%; transform:translateX(-50%);
    top:14%;            /* ajusta posición vertical */
    width:70%;          /* ancho del trapecio       */
    height:40%;         /* alto del trapecio        */
    /* Trapecio: afina estos puntos si tu forma es distinta */
    clip-path: polygon(10% 0, 90% 0, 100% 100%, 0 100%);
    pointer-events:none;
  }
  .logo-glow, .logo-glow-core{
    --lc: hsla(var(--logo-hue),100%,55%,1);
    position:absolute; inset:0;
    mix-blend-mode:screen; pointer-events:none;
  }
  .logo-glow{
    background: radial-gradient(ellipse at center,
      var(--lc) 0%,
      hsla(var(--logo-hue),100%,55%,0.5) 35%,
      hsla(var(--logo-hue),100%,55%,0.2) 65%,
      transparent 90%);
    filter: blur(22px) saturate(140%);
  }
  .logo-glow-core{
    background: radial-gradient(ellipse at center,
      var(--lc) 0%,
      hsla(var(--logo-hue),100%,65%,0.75) 55%,
      transparent 90%);
    filter: blur(10px) saturate(160%) brightness(1.15);
  }

  /* Logo (imagen) SIN recolorear */
  .logo-img{
    position:absolute; z-index:3; left:50%; transform:translateX(-50%);
    top:10%; width:100%; user-select:none; -webkit-user-drag:none;
  }

  /* Slider grande centrado */
  .lamp-slider{
    -webkit-appearance:none; appearance:none;
    width:80%; max-width:420px; margin:0 auto;
    height:12px; border-radius:6px;
    background:linear-gradient(90deg, red, yellow, lime, cyan, blue, magenta, red);
    outline:none;
  }

  .logo-slider{
    -webkit-appearance:none; appearance:none;
    width:80%; max-width:420px; margin:0 auto;
    height:12px; border-radius:6px;
    background:linear-gradient(90deg, red, yellow, lime, cyan, blue, magenta, red);
    outline:none;
  }
  
  .logo-slider::-webkit-slider-thumb{
    -webkit-appearance:none; width:28px; height:28px; border-radius:50%;
    background:#fff; border:3px solid #000; cursor:pointer; box-shadow:0 0 6px rgba(0,0,0,.5);
  }
  .logo-slider::-moz-range-thumb{
    width:28px; height:28px; border-radius:50%;
    background:#fff; border:3px solid #000; cursor:pointer; box-shadow:0 0 6px rgba(0,0,0,.5);
  }


  .lamp-slider::-webkit-slider-thumb{
    -webkit-appearance:none; width:28px; height:28px; border-radius:50%;
    background:#fff; border:3px solid #000; cursor:pointer; box-shadow:0 0 6px rgba(0,0,0,.5);
  }
  .lamp-slider::-moz-range-thumb{
    width:28px; height:28px; border-radius:50%;
    background:#fff; border:3px solid #000; cursor:pointer; box-shadow:0 0 6px rgba(0,0,0,.5);
  }
      .contenedores_scrolling {
      margin: 0 auto;
      position: relative;
      margin-bottom: 60px;
    }

    .contenedor_header {
      position: fixed;
      z-index: 1000;
      position: fixed;
      top: 0;
      /* Coloca los botones al final de la ventana */
      left: 0;
      width: 100%;
      background-color: #20232C;
    }

    .texto-box {
      margin-bottom: 20px;
    }

    .imagen-box {
      width: 90%;
      height: auto;
      margin-left: 5%;
    }

    .texto-box p {
      padding: 10 px;
      text-align: center;
      font-size: 18px;
      /* Tamaño de la fuente del texto */
      color: #ffffff;
      /* Color del texto */
      margin: 0 0 10px;
      /* Margen del texto */
    }

    .sigiente {
      width: 50%;
      height: auto;
      border-radius: 5px;
      margin-left: 25%;
      font-size: 20px;
      color: #ffffff;
    }

    .disabled {
      pointer-events: none;
      /* Deshabilitar interacción */
      opacity: 0.6;
      /* Opcional: hacer los botones visualmente deshabilitados */
    }

    .container-next {
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 20px;
    }


    .image-container-next {
      flex: 1;
      padding: 10px;
    }

    .form-container-next {
      flex: 1;
      padding: 10px;
    }

    .form-container-next input {
      width: 100%;
      padding: 10px;
      margin-bottom: 10px;
      box-sizing: border-box;
    }


    .slider {
      -webkit-appearance: none;
      /* Eliminar el estilo predeterminado de los navegadores WebKit */
      appearance: none;
      /* Eliminar el estilo predeterminado de otros navegadores */
      width: 100%;
      /* Ancho del slider */
      height: 20px;
      /* Altura del track */
      background: #ffffff;
      /* Color del track */
      outline: none;
      /* Eliminar el borde */
      transition: opacity 0.2s;
      /* Transición de opacidad */
      border-radius: 5px;
      /* Bordes redondeados del track */
    }

    /* Cambiar la opacidad cuando el slider está en hover */
    .slider:hover {
      opacity: 1;
    }

    /* Estilo del handle del slider para navegadores WebKit (Chrome, Safari) */
    .slider::-webkit-slider-thumb {
      -webkit-appearance: none;
      /* Eliminar el estilo predeterminado */
      appearance: none;
      /* Eliminar el estilo predeterminado */
      width: 50px;
      /* Ancho del handle */
      height: 50px;
      /* Altura del handle */
      background: #ffae00;
      /* Color del handle */
      border: 5px solid #20232C;
      /*
      cursor: pointer; /* Cambiar el cursor al pasar por encima */
      border-radius: 50%;
      /* Bordes redondeados del handle */
    }

    #countdown {
      font-size: 35px;
      font-weight: 800;
      color: #ffae00;
    }

    #countdown.long-text {
      font-size: 15px;
      font-style: italic;
      font-weight: 800;
      color: #ffae00;
    }



      /* Contenedor de 2 columnas, siempre en una sola fila */
  .ui-row-2{
    display:grid;
    grid-template-columns: repeat(2, minmax(200px, 1fr));
    gap:12px;
    width:min(700px, 96vw);
    margin:12px auto;
  }

  /* Estilo del select (ajusta a tu tema) */
  .ui-select{
    appearance:none;
    width:70%;
    background:#ffc107; color:#000000;
    border:1px solid #2a2a2a; border-radius:14px;
    padding:12px 20px; font-size:16px; line-height:1.2;
    outline:none;
  }
  .ui-select:focus{ border-color:#ffb000; box-shadow:0 0 0 3px rgba(255,176,0,.25); }


  .contenedores_scrolling {
      margin: 0 auto;
      position: relative;
      margin-bottom: 60px;
    }

    .contenedor_header {
      position: fixed;
      z-index: 1000;
      position: fixed;
      top: 0;
      /* Coloca los botones al final de la ventana */ 
      left: 0;
      width: 100%;
      background-color: #20232C;
    }

    .texto-box {
      margin-bottom: 20px;
    }

    .imagen-box {
      width: 60%;
      height: auto;
      margin-left: 20%;
    }

    .texto-box p {
      padding: 10 px;
      text-align: center;
      font-size: 18px;
      /* Tamaño de la fuente del texto */
      color: #ffffff;
      /* Color del texto */
      margin: 0 0 10px;
      /* Margen del texto */
    }

    .sigiente {
      width: 50%;
      height: auto;
      border-radius: 5px;
      margin-left: 25%;
    }

    .disabled {
      pointer-events: none;
      /* Deshabilitar interacción */
      opacity: 0.6;
      /* Opcional: hacer los botones visualmente deshabilitados */
    }

    .container-next {
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 20px;
    }


    .image-container-next {
      flex: 1;
      padding: 10px;
    }

    .form-container-next {
      flex: 1;
      padding: 10px;
    }

    .form-container-next input {
      width: 100%;
      padding: 10px;
      margin-bottom: 10px;
      box-sizing: border-box;
    }


    .slider {
      -webkit-appearance: none;
      /* Eliminar el estilo predeterminado de los navegadores WebKit */
      appearance: none;
      /* Eliminar el estilo predeterminado de otros navegadores */
      width: 100%;
      /* Ancho del slider */
      height: 20px;
      /* Altura del track */
      background: #ffffff;
      /* Color del track */
      outline: none;
      /* Eliminar el borde */
      transition: opacity 0.2s;
      /* Transición de opacidad */
      border-radius: 5px;
      /* Bordes redondeados del track */
    }

    /* Cambiar la opacidad cuando el slider está en hover */
    .slider:hover {
      opacity: 1;
    }

    /* Estilo del handle del slider para navegadores WebKit (Chrome, Safari) */
    .slider::-webkit-slider-thumb {
      -webkit-appearance: none;
      /* Eliminar el estilo predeterminado */
      appearance: none;
      /* Eliminar el estilo predeterminado */
      width: 50px;
      /* Ancho del handle */
      height: 50px;
      /* Altura del handle */
      background: #ffae00;
      /* Color del handle */
      border: 5px solid #20232C;
      /*
      cursor: pointer; /* Cambiar el cursor al pasar por encima */
      border-radius: 50%;
      /* Bordes redondeados del handle */
    }

    #countdown {
      font-size: 35px;
      font-weight: 800;
      color: #ffae00;
    }

    #countdown.long-text {
      font-size: 15px;
      font-style: italic;
      font-weight: 800;
      color: #ffae00;
    }

    .menu {
      justify-content: space-between;
      width: 100%;
      text-align: justify;
    }

    #countdown{
      font-size: 35px; 
      font-weight: 800;
      color: #ffae00;
    }
    #countdown.long-text {
      font-size: 15px; 
      font-style: italic;
      font-weight: 800;
      color: #ffae00;
        }
    #countdown_2{
      font-size: 35px; 
      font-weight: 800;
      color: #ffae00;
    }
    #countdown_2.long-text {
      font-size: 15px; 
      font-style: italic;
      font-weight: 800;
      color: #ffae00;
        }


          body {
      font-family: Arial, sans-serif;
      text-align: center;
      margin-top: 50px;
    }
    #countdown {
      font-size: 24px;
      margin-top: 20px;
    }