<!--Header-->
<%- include("../template_user/heder.ejs") %>
<link rel="stylesheet" href="../registro/css/style2.css">
<head>
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
      <!-- Bootstrap CDN -->
  <!-- Bootstrap CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
  <!-- Bootstrap 5 Dark Mode -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.dark.min.css" rel="stylesheet">

  <style>

    .contenedor{
      text-align: center;
      height: auto;
    }

    .progreso-contenedor{
        background-color: transparent;/*#fff;*/
        display: flex;
        justify-content: space-between;
        position: relative;
        margin-bottom: 30px;
        max-width: 80%;
        width: 350px;
        min-width: 95%;
        /*border:1px solid red*/
    }

    .progreso {
      background-color: #3498db;
      position: absolute;
      top: 50%;
      left: 0;
      transform: translateY(-50%);
      height: 4px;
      width: 30%;
      /*z-index: -1;*/
      transition: 0.4s ease;
    }

    .circulo{
      background-color: #fff;
      color: #999;
      border-radius: 50%;
      height: 30px;
      width: 30px;    
      display: flex;
      align-items: center;
      justify-content: center;
      border: 3px solid #e0e0e0;
      z-index: 1;
      transition: 0.4s ease;
    }

    .circulo.active{
      border-color: #3498db;
      color: #3498db
    }
    
    a {
      text-decoration: none;  /* Elimina el subrayado */
      color: inherit;  /* Hereda el color del texto del elemento padre */
    }
    .div-shadow{
      /*border: 0.5px solid #bcbcbc; */
      box-shadow: 0 0 20px #bcbcbc; 
    }

    .button_colors {
      background: linear-gradient(to right, #25ACDE, #A0C045);
      border: none;
      color: white;
      padding: 5px;
      text-align: center;
      text-decoration: none;
      display: inline-block;
      border-radius: 8px;
    }
    /****************************************************/
    
      #chartContainer {
        max-width: 120px; /* Establece el ancho máximo deseado */
        /*border:1px solid yellow*/
      }
      #chartContainer2 {
        max-width: 120px; /* Establece el ancho máximo deseado */
        /*border:1px solid yellowgreen*/
      } 
      .letraSize{
        width: 100%;
        text-align: left;
        font-size: 18px; 
        font-weight: normal; 
      }

      .btn-custom {
          background-color: #fff;  /* Cambia #yourColor por el color de fondo que desees */
          border-color: #191A1A;  /* Cambia #yourBorderColor por el color de borde que desees */
          color: #191A1A;  /* Cambia #yourTextColor por el color de texto que desees */
      }

    /**/
    @media screen and (max-width: 375px){
      /*
      .contenedor {
        background-color: lightgreen;
      }
      */
      #chartContainer {
        max-width: 100%; 
        /*border:1px solid blueviolet*/
      }
      #chartContainer2 {
        max-width: 100%; 
        /*border:1px solid purple*/
      }


      /*
      .contenedor {
        background-color: lightblue;
      }
      */

      .letraSize{
        font-size: 14px; 
        font-weight: normal; 
      }
      
    }
/**Carrouysel****************************************************************/
    /* Controla la opacidad de las diapositivas durante el cambio */
    .carousel-fade .carousel-item {
      transition-property: opacity;
    }
    
    .carousel-fade .carousel-item-next.carousel-item-start,
    .carousel-fade .carousel-item-prev.carousel-item-end {
      opacity: 0;
    }
    
    .carousel-fade .carousel-item.active {
      opacity: 1;
    }
    
    .carousel-fade .carousel-item-next,
    .carousel-fade .carousel-item-prev,
    .carousel-fade .carousel-item.active.carousel-item-start,
    .carousel-fade .carousel-item.active.carousel-item-end {
      z-index: 1;
    }

    /* Estilo para el fondo del texto */
    .carousel-caption {
      border-radius: 8px;
      background-color: rgba(255, 255, 255, 0.5); /* Fondo negro con opacidad */
      color: white; /* Color de texto blanco */
      padding: 20px; /* Espaciado interno */
    }

    .fondoObscuro{
      background-color: #030405;
      color: #fff;
      text-align: center;
    }
    .fondoGris{
      background-color: #BCBCBB;
    }
  </style>

</head>
<body class="hold-transition sidebar-mini layout-fixed" style="background-color: #fff;">
<div class="wrapper">

  <!-- Loding Aqui va el monito de cargando-->
    <%- include("../template_user/loading.ejs") %>
  <!-- / Loding -->

  <!-- Navbar -->
    <%- include("../template_user/menuadmin.ejs") %>
  <!-- /.navbar -->

  <!-- Aside Main Sidebar Container -->
  <% dondeEsto = "sponsors"; %>
<!--------------------------------------------------------------------------------------------------------->
  <%- include("../template_user/asaid.ejs") %>

 <!------------------------------------------------------------------------------------------------------------>
 <!-- /.Aside -->

  <!-- Content Wrapper. Contains page content -->
  <div class="content-wrapper" style="background-color: #fff;">
    <div style="p-2 bg-light border">&nbsp;</div>
    <!-- Content Header (Page header) -->
      <!--Breadcrumbs
      < % - include("template_admin/breadcrumbs.ejs") %>-->
      <!--Breadcrumbs-->
     
    <!-- Main content -->
    <section class="content h-100 d-inline-block" style="padding-left:20px; padding-right:20px; margin-top:20px;">
        <div class="p-1 rounded floatleft fondoGris pt-2"  >
            <div class="font-weight-bold p-2 fondoObscuro rounded" >Conoce a nuestros sponsors</div> 
 
        <!--SPONSOR PRINCIPAL-->
        <div class="w-100 rounded mt-2 mb-2 p-2">
            <!-- COMIENZA EL CAROUSEL-->
            <div id="carouselExampleDark" class="carousel carousel-dark slide carousel-fade rounded-top" data-bs-ride="carousel">
              
              <!-- Indicators/dots -->

                <% 
                  var web_p = funct_Spion_P[0].t_web
                  var t_webii = ''
                  if(web_p.includes("http")){ t_webii=funct_Spion_P[0].t_web }else{ t_webii="https://"+funct_Spion_P[0].t_web } 
                %>
                <!-- <a style="font-size: 12px;" href="< %= funct_Spion_P[0].t_web %>" target="_blank"></a> -->

              <div class="carousel-indicators">
              <%
                for(var i=1; i <= funct_Spion_P.length; i++ ){
                  if(i==1){
                    %>
                    <button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="<%=i%>" class="active" aria-current="true" aria-label="Slide <%=i-1%>"></button>
                    <button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="<%=i%>" aria-current="true" aria-label="Slide <%=i%>"></button>
                    <%
                  }else{
                    %>
                    <button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="<%=i%>" aria-label="Slide <%=i%>"></button>
                    <%
                  }
                }
                
              %>
              </div>
    
              <div class="carousel-inner">
                <%
                for(var i=0; i < funct_Spion_P.length; i++ ){
                    var idCtrlPrincipal = funct_Spion_P[i].id_ctrl

                    <!-- Los enlaces de cada imagen -->
                      var web_p1 = funct_Spion_P[i].enlace
                      var t_webii1 = ''
                      if(web_p1.includes("http")){ t_webii1=web_p1 }else{ t_webii1="https://"+web_p1 }
                  
                  
                  if(i==0){
                    %>
                      <div class="carousel-item active">
                        <a href="<%= t_webii %>">
                          <img src="<%= funct_Spion_P[i].t_portada %>" class="d-block w-100 rounded-top" alt="Slide 1">
                          <div class="carousel-caption d-none d-md-block">
                            <h5><%= funct_Spion_P[0].t_nombre %></h5>
                            <p><%= funct_Spion_P[0].t_subtitulo %></p>
                          </div>
                        </a>
                      </div>
                      <div class="carousel-item">
                        <a href="<%= t_webii1 %>">
                          <img src="<%= funct_Spion_P[i].imagen %>" class="d-block w-100 rounded" alt="Slide 1">
                          <div class="carousel-caption d-none d-md-block">
                            <h5><%= funct_Spion_P[i].titulo %></h5>
                            <!--<p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>-->
                          </div>
                        </a>
                      </div>
                    <%
                  }else{
                    %>
                    <div class="carousel-item">
                      <a href="<%= t_webii1 %>">
                      <img src="<%= funct_Spion_P[i].imagen %>" class="d-block w-100 rounded" alt="Slide 1">
                        <div class="carousel-caption d-none d-md-block">
                          <h5><%= funct_Spion_P[i].titulo %></h5>
                          <!--<p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>-->
                        </div>
                      </a>
                    </div>
                    <%
                  }
                }
                
              %> 
              </div>

              <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleDark" data-bs-slide="prev">
                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                <span class="visually-hidden">Previous</span>
              </button>
              <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleDark" data-bs-slide="next">
                <span class="carousel-control-next-icon" aria-hidden="true"></span>
                <span class="visually-hidden">Next</span>
              </button>

            </div>
            <div class="border rounded-bottom text-center" style="background-color: #fff;">
                <a href="/virtualBooth?sp=<%=idCtrlPrincipal%>" style="font-size: 12px; font-weight: bold;">Visita nuestro virtual booth &nbsp;&nbsp;&nbsp;&nbsp;<i class="fa-solid fa-arrow-right-long"></i></a>
            </div>

            <!-- Bootstrap Bundle with Popper -->
            <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"></script>
            <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>

        </div>
        <!-- // TERMINA EL CAROUSEL-->

        <!-- SPONSORS NORMALES -->
        <div class="row p-1 text-secondary cien floatleft">          
            <!--<div class="font-weight-bold w-100 border-bottom"><br/><br/>Conoce a nuestros sponsors:</div> -->
          
            <div class="row col p-1 ml-1 d-flex justify-content-center align-items-center">
            <%
            for(var j=0; j < funct_Spion_Gral.length; j++ ){
                var t_web = ''
                var webi = funct_Spion_Gral[j].t_web
                if(webi.includes("http")){ t_webb=funct_Spion_Gral[j].t_web }else{ t_webb="https://"+funct_Spion_Gral[j].t_web }
            %>
            <div class="col-sm-6 col-md-6 col-lg-6 w-50 ">
              <a href="/virtualBooth?sp=<%=funct_Spion_Gral[j].id_ctrl%>" style="font-size: 9px; font-weight: bold;">
                <div class="rounded p-1">
                    <div class="text-center border" style="background-color: #fff; border:1px solid #fff; border-top-left-radius: 8px;border-top-right-radius: 8px;"><img src="<%= funct_Spion_Gral[j].t_logo %>" style=" width:100%; max-width:200px" alt=""></div>
                    <div class="p-1 text-center" style="background-color: rgba(255, 255, 255, 0.7); line-height: 0.8; border:1px solid #fff; border-bottom-left-radius: 8px;border-bottom-right-radius: 8px;">
                      Visita nuestro <br/>virtual booth <i class="fa-solid fa-arrow-right-long"></i>
                  </div>
                </div>
              </a>
            </div>
            
            <% 
            }
            %>
            </div>
        </div>
        
        
        <!-- // Eventos -->

      </div><!-- /.container-fluid -->
    </section>
    <!-- /.content -->
  </div>

  <!-- Control Sidebar -->
    <!--Footer B -->
    <%- include("../template_user/footerb.ejs") %>
    <!--/Footer B -->

    <!--Footer -->
    <%- include("../template_user/footer.ejs") %>
    <!--/Footer -->
</body>
</html>
