/*---------------------------------------------------*/
    
    .boton-qrc {
  display: inline-block;
  padding: 15px 40px;
  font-size: 1.2rem;
  background-color: var(--btn-bg);
  color: var(--btn-color);
  border-radius: 12px;
  text-decoration: none;
  transition: background-color 0.3s ease;
}

.boton-qrc:hover {
  background-color: var(--btn-bg-hover);
}
  /*--------------------------------------------------*/
  /*

    body {
      font-family: "Segoe UI", sans-serif;
      background-color: #ffff;
      margin: 0;
      padding: 0;
    }
    */
    
       /**********************************/ 
       
    .separador {
      display: flex;
      width: 100%;
      height: 5px;
    }
    
    .contenedor {
      display: flex;
      width: 100%;
      height: 100%;
      border: 0px solid #ccc;
      margin: 0px;
    }
    .uno     {  flex: 1; }
    .dos      { flex: 2; }
    .tres   {  flex: 3; }
    .cuatro  { flex: 4; }
    .auto  {  flex: 0 1 auto; width: 300px; }
    .none  {   flex: none; width: 100px; }
    
    .bgc_1  { background-color: var(--color-prin);  }
    .bgc_2  { background-color: var(--color-blan);  }
    .bgc_3  { background-color: var(--color-neg);  }
    .bgc_4  { background-color: red;  }
    .bgc_5  { background-color: grey;  }
    
    
    .ico-arch { 
        display: flex;
        flex-direction:row;
        align-items:flex-end ;
        gap: 1rem;
        background-color: ;  
          }
          
    .ico-qr { 
        display: flex;
        flex-direction:column;
        align-items:center ;
        gap: 1rem;
        background-color: ;  
          }  
    .grupo-1 { 
        display: flex;
        flex-direction:row;
        align-items:flex-end ;
        background-color: ;  
          } 
    .grupo-2 { 
        display: flex;
        flex-direction:column;
         align-items:flex-start ;
 
          } 
    
     .mar30 {

        margin-top: 30px;
        margin-bottom: 30px;
        margin-right: 30px;
        margin-left: 30px;
         padding: 0rem 0;
    }
     

    .main-content {
      padding-top: 100px;
      max-width: 900px;
      margin: 0 auto;
      padding-left: 1.5rem;
      padding-right: 1.5rem;
    }

    .container {
      max-width: 900px;
      margin: 50px auto;
      background-color: var(--color-bg);
      border-radius: 12px;
      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
      overflow: hidden;
      display: flex;
      flex-wrap: wrap;
    }
    
    .container2 {
      max-width: 1400px;
      margin: 50px auto;
      background-color: var(--color-bg);
      border-radius: 12px;
  
      overflow: hidden;
      display: flex;
      flex-wrap: wrap;
    }
    
    .container-login {
      max-width: 400px;
      margin: 50px auto;
      background-color: var(--color-bg);
      border-radius: 12px;
      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
      overflow: hidden;
      display: flex;
      flex-wrap: wrap;
    }
    
    .container-texto{
     max-width: 800px ;
      margin: 50px auto;
      background-color: var(--color-bg);
      border-radius: 12px;
      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
      overflow: hidden;
      display: flex;
      flex-wrap: wrap;
      
    }
     .container-texto2{
         text-align: right;
         text-align: start;
     max-width: 1000px ;
      margin: 50px auto;
      background-color: var(--color-bg);
      border-radius: 12px;
      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
      overflow: hidden;

      
    }
    
      .t1 {
      margin: 40px 40px;
      padding: 10px;
       text-align: center;
         }
         
         div.a {
  text-align: center;
}
         b.c {
 
  color: #007bff ;
}


    .form-section, .rules-section {
      flex: 1 1 300px;
      padding: 30px;
    }

    .form-section {
      background-color: var(--color-bg);
    }

    .rules-section {
      background-color: #f0f4f8;
      border-left: 1px solid #ddd;
    }

    h4, h5 {
      margin-bottom: 20px;
      color: #007bff;
    }

    label {
      display: block;
      margin-bottom: 8px;
      margin: 8px 8px ;
      font-weight: normal;
    }

    input[type="password"] {
      width: 100%;
      padding: 10px;
      margin-bottom: 12px;
      border: 1px solid #ccc;
      border-radius: 6px;
      font-size: 16px;
    }

    .progress-container {
      height: 8px;
      background-color: #ddd;
      border-radius: 5px;
      overflow: hidden;
      margin-bottom: 20px;
    }

    .progress-bar {
      height: 100%;
      width: 0%;
      transition: width 0.3s ease;
    }

    .btn {
      background-color: #007bff;
      border: none;
      color: white;
      padding: 12px;
      font-size: 16px;
      width: 100%;
      border-radius: 6px;
      cursor: pointer;
    }

    .btn:hover {
      background-color: #0056b3;
    }

    .rules-section ul {
      padding-left: 20px;
    }

    .rules-section li {
      margin-bottom: 8px;
    }

    .error-message {
      color: red;
      margin-bottom: 15px;
      display: none;
    }

    @media (max-width: 768px) {
      .container {
        flex-direction: column;
      }
      .rules-section {
        border-left: none;
        border-top: 1px solid #ddd;
      }
    }
    
    .derecha {
  text-align: right;
}

    .izquierda {
  text-align: left;
}

    .t40 svg {
      width: 80px;
      height: 80px;
        fill: green;

    }
    .t50 svg {
      width: 50px;
      height: 50px;
        fill: green;
    }
    .t50 {
      width: 50px;
      height: 50px;
    }
    .t90 {
      width: 90px;
      height: 90px;
    
    }
       .t120 { width: 120px; height: 120px;}
       .t150 { width: 150px; height: 150px;}
       .t170 { width: 170px; height: 170px;}
       .t200 { width: 200px; height: 200px;}
       .t250 { width: 250px; height: 250px;}
    
      .invert {
  filter: invert(1);
    }
    
    .original {
  filter: var(--color-filter);
    }    
         
         
    .color_1 {
 color: var(--color-blan);
    }
    
        .color_2 {
 color: var(--color-neg);
    }
    
    
        .h30 {   height: 30px;    }
        .h40 {   height: 40px;    }
        .h50 {   height: 50px;    }
        .h60 {   height: 60px;    }
        .h70 {   height: 70px;    }
        .h100 {   height: 100px;    }
    
   
    
    
    .c-derecha {
  display: flex;
  justify-content: flex-end;   /* horizontal a la derecha */
  align-items: center;         /* vertical al centro */
}
    .c-izquierda {
  justify-content: flex-start; /* horizontal a la izquierda */
  align-items: center;         /* vertical al centro */
    }
    
    .al-row {
  display: flex;
  flex-direction: row;
} 

#caja {
  width: 400px;
  height: auto;
  border: 0px solid #c3c3c3;
  display: grid;
  justify-content: end;
  align-items: flex-end;
}

#caja div {
  width: auto;
  height: auto;
}
div.a {
  text-align: center;
}

div.b {
  text-align: left;
}

div.c {
  text-align: right;
} 

div.d {
  text-align: justify;
}