body {
            font-family: sans-serif;
            margin: 10px;
            background:#006FFA;
            display: flex;
            flex-direction: column;
            align-items: center; /* Corregido de 'align-ithem' */
            justify-content: center; /* Corregido de 'justyfy-content' */
            height: auto;
        }
        
        main{
          width: 100vw;  
          height: auto;
          margin:0;
          padding:0;
          display: flex;
          flex-direction: column;
          align-items: center; /* Corregido de 'align-ithem' */
          justify-content: center; /* Corregido de 'justyfy-content' */
        }
        
       
        
        .interface{
            width: 1200px;
            height: auto;
            background: white;
            border: 2px solid #006FFA;
            padding: 1.5rem;
            border-radius: 20px;
            display: flex;
            flex-direction: column;
            justify-content: center; 
        }
        
        .search-and-load-section{
            width: 100%;
            height: 170px;
            margin: 0px;
            padding-bottom: 1rem;
            display: flex;
            align-items: center;
            justify-content: center; 
        }
        
      .input-and-label {
            width: 70%;
            height: 50%;
            box-sizing: border-box;
            background: #006FFA;
            display: flex;
            align-items: center;
            justify-content: center; 
        }
        .container-logo{
            display: flex; 
            align-items: center;
            justify-content: center; 
            margin-right:0;
            font-weight: 500;
            font-size: 25px; 
            color: white;
            width: 20%;
            height: 100%;
        }
        .container-logo a{
            text-decoration: none;
        }
        .container-logo a .logo-img {
            width: 180px;
            height: auto;
            padding-top: 0;
            padding-bottom: 0;
            margin-top: 0;
            margin-bottom: 0;
        }
        .container-logo a .title{
            color: #006FFA;
            font-weight: 800;
            font-size: 30px;
            margin:0;
            padding:0;
            display: none;
        }
        
        
        #labelUrl {
            display: flex; 
            align-items: center;
            justify-content: center; 
            margin-right:0;
            font-weight: 500;
            font-size: 25px; 
            color: white;
            width: 20%;
            height: 100%;
            background: #006FFA;
        }
        #urlInput{
            display:block;
            width:80%;
            height:100%;
            box-sizing: border-box;
            background: white;
            border: 2px solid #006FFA;
            color: #000;
            font-weight: 400;
            font-size:14px;
        }
        
        .load-buttons {
            width: 30%;
            height: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
           /*justify-content: start;
           justify-content: space-between;*/
           padding: 0.5rem;
        }
        
        .logo{
            width:50px;
            height:50px;
        }
        
        #loadSafebooru{
            width: 100%; 
            height: 100%;
            border: none;
            background: linear-gradient(#328dfe, #0773fb);
            color: white;
            font-weight: 500;
            font-size:22px;
            margin-left:0.5rem;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            box-sizing:border-box;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        #loadSafebooru:hover{
            background: linear-gradient(#024A9B,rgb(23, 111, 218));
        }
        
       .filter-group {
            width: 100%;
            height: auto;
            margin: 0;
            padding: 0;
            box-sizing:border-box;
            display: flex;
            align-items: center;
            justify-content: center;
            background: #535877;
            border: none;
            color: white;
            padding: 6px;
        }
        
        #grupo-filtros-tamano{
            width: 50%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        #legendAndMinSizeCheck{
            width:50%;
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }
        
        #filtro-ancho-minimo,
        #filtro-alto-minimo {
            width:25%;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            padding:3px;
            box-sizing: border-box;
        }
        
        #minWidth{
           width:80%; 
           height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        
        #minHeight{
           width:80%; 
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        
        #grupo-filtros-formatos{
            width: 50%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: space-betwen;
        }
        
        #filtros-formatos-checkboxes {
            width: 80%;
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }
        
        #contenedor-checkbox-formatos {
            width: 100%;
            height:100%;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        #contenedor-boton-filtrar {
            width: 20%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        #filtrarEncontrados{
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0.5rem;
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: #006FFA; /* Un verde amigable */
            color: white;
            font-weight: 400;
            font-size:22px;
            padding-left:0.5rem;
            margin: 0px;
            border-radius: 20px;
            cursor: pointer;
        }
        
          #filtrarEncontrados:hover{
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0.5rem;
            display: flex;
            align-items: center;
            justify-content: center;
             background: linear-gradient(#024A9B,rgb(23, 111, 218)); /* Un verde amigable */
            color: white;
            font-weight: 400;
            font-size:22px;
            padding-left:0.5rem;
            margin: 0px;
            border-radius: 20px;
            cursor: pointer;
        }
        
        .action-buttons{
            width:100%;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: end;
            margin-top: 1rem;
            margin-bottom: 1rem;
       }
       
       .action-buttons button{
            width:60px;
            height:40px;
            border: 2px solid #006FFA;
            border-radius: 6px;
            background:white;
            color: rgb(8, 85, 10);
            font-weight: 400;
            font-size:10px;
            padding-left:0.5rem;
            margin-left: 0.2rem;
            margin-right: 0.2rem;
            cursor: pointer;
       }
       
       .action-buttons button:hover{
            width:60px;
            height:40px;
            border: 1px solid #006FFA;
            border-radius: 6px;
            background: linear-gradient(#024A9B,rgb(23, 111, 218));
            color: white;
            font-weight: 500;
            font-size:10px;
            padding-left:0.5rem;
            margin-left: 0.2rem;
            margin-right: 0.2rem;
            cursor: pointer;
       }
        
        #avisos{
            width: 100%; 
            height: auto;        
            background-color: transparent;
            display: flex;          
            justify-content: center;
            align-items: center; 
        }
        
        
        #avisos #aviso {
            color: #006FFA;        
            font-weight: 600;
            font-size: 20px;      
            text-align: center;
        }
        
        #grid {
            display: flex;
            flex-wrap: wrap;
            border: 1px solid #006FFA;
            margin-top: 1rem;
            margin-bottom: 1rem;
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
        
            /* Tamaño fijo del contenedor */
            height: 350px; /* puedes ajustarlo */
            width: 100%;
        
            /* Scroll si el contenido sobrepasa */
            overflow-y: auto;  /* scroll vertical */
            overflow-x: hidden; /* evitar scroll horizontal */
        }

        #data-for-download {
            width: 100%;
            height: 70px;
            margin: 0px;
            padding: 0px;
            display: flex;
            align-items: center; /* Corregido de 'align-ithem' */
            justify-content: center; /* Corregido de 'justyfy-content' */
        }
        
        #downloadOptions{
            width:40%;
            height:100%;
            display: flex;
            align-items: center; /* Corregido de 'align-ithem' */
            justify-content: space-betwen; /* Corregido de 'justyfy-content' */
        }
        
        #downloadOptions #checkLotesDirect{
            width:100%;
            height:100%;
            display: flex;
            flex-direction:column;
            align-items: center; /* Corregido de 'align-ithem' */
            justify-content: center; /* Corregido de 'justyfy-content' */
            font-size:12px;
        }
        #downloadOptions #sizeLoteDirect{
            width:100%;
            height:100%;
            display: flex;
            flex-direction:column;
            align-items: center; /* Corregido de 'align-ithem' */
            justify-content: center; /* Corregido de 'justyfy-content' */
            font-size:12px;
        }
        
        #downloadOptions #ChecCompress{
            width:100%;
            height:100%;
            display: flex;
            flex-direction:column;
            align-items: center; /* Corregido de 'align-ithem' */
            justify-content: center; /* Corregido de 'justyfy-content' */
            font-size:12px;
        }
        
        #progressContainer{
            width: 100%;
            height: auto;
            display: flex;
            align-items: center;
            justify-content: center; 
        }
        
        #zipFilename{
            display:block;
            width:40%;
            height:100%;
            padding: 1rem;
            box-sizing: border-box;
            background: white;
            border: 2px solid #006FFA;
            color: #000;
            font-weight: 400;
            font-size:22px;
        }
        
        /* Estilos base del botón */
        #downloadSelectedButton {
            width: 20%;
            height: 100%;
            background-color: #006FFA; /* Un verde amigable */
            color: white;
            font-weight: 400;
            font-size:22px;
            padding-left:0.5rem;
            margin: 0px;
            border: none;
            cursor: pointer;
            transition: background-color 0.3s ease; /* Transición suave para el color */
        }
        
        /* Estilos cuando el botón está habilitado (opcional, para el hover) */
        #downloadSelectedButton:hover:not(:disabled) {
            background: linear-gradient(#024A9B,rgb(23, 111, 218)); /* Verde un poco más oscuro al pasar el mouse */
        }
        
        /* Estilos cuando el botón está deshabilitado */
        #downloadSelectedButton:disabled {
            background-color: #cccccc; /* Un gris para indicar deshabilitado */
            cursor: not-allowed; /* Cursor de "no permitido" */
            opacity: 0.7; /* Ligeramente transparente */
        }
        /* En tu archivo CSS */
        #progressContainer {
            width: 100%;
            background: #eee;
            height: 20px;
            margin-top: 10px;
            display: none; /* Se mostrará con JavaScript cuando sea necesario */
        }
        
        #progressBar {
            width: 0%;
            height: 100%;
            background: #006FFA;
        }
        
/* --- MEDIA QUERIES para móviles --- */
@media (max-width: 768px) { /* Puedes ajustar este valor según tus necesidades, 768px es común para tablets/móviles */
    .interface {
        width: 90%; /* Ocupa casi todo el ancho de la pantalla en móviles */
        height: auto;
        padding: 0.5rem;
    }

    .search-and-load-section {
        display: flex;
        flex-direction: column; /* Apila verticalmente los elementos */
        height: 200px; /* Ajusta la altura automáticamente */
        align-items: center; /* Estira los elementos para que ocupen todo el ancho */
    }

    .input-and-label {
        width: 100%; /* Ocupa todo el ancho disponible */
        height: auto; /* Altura automática */
        margin-bottom: 3px; /* Espacio entre los elementos apilados */
        flex-direction: column; /* Apila el logo/label y el input verticalmente */
        justify-content: center;
    }
    
    .container-logo{
            display: flex; 
            align-items: center;
            justify-content: center; 
            margin-right:0;
            font-weight: 500;
            font-size: 25px; 
            color: white;
            width: 100%;
            height: 50px;
        }
        .container-logo a{
            text-decoration: none;
            width: 100%;
            text-align: center;
            margin:0;
            padding:0;
        }
        .container-logo a .logo-img {
            width: 180px;
            height: auto;
            padding-top: 0;
            padding-bottom: 0;
            margin-top: 0;
            margin-bottom: 0;
            display:none;
        }
        .container-logo a .title{
            color: #006FFA;
            font-weight: 800;
            font-size: 30px;
            margin:0;
            padding:0;
            display: block;
    }

    #labelUrl {
        width: 100%; /* Ocupa todo el ancho */
        height: 50px; /* Altura automática */
        font-size: 18px; /* Reduce el tamaño de la fuente para móviles */
        margin-right: 0; /* Elimina el margen derecho si estaba */
        margin-bottom: 5px; /* Espacio entre el logo/label y el input */
    }

    #urlInput {
        width: 100%; /* Ocupa todo el ancho */
        height: 40px; /* Altura fija o auto */
        font-size: 12px; /* Reduce el tamaño de la fuente */
    }

    .load-buttons {
        width: 100%; /* Ocupa todo el ancho */
        height: auto; /* Altura automática */
        padding: 0;
        margin-top: 10px; /* Espacio arriba del botón de carga */
    }

    #loadSafebooru {
        font-size: 18px; /* Ajusta el tamaño de la fuente */
        margin-left: 0; /* Elimina el margen izquierdo si estaba */
    }

    .filter-group {
        flex-direction: column; /* Apila verticalmente los grupos de filtros */
        align-items: stretch; /* Estira los elementos para que ocupen todo el ancho */
        padding: 10px; /* Ajusta el padding */
    }

    #grupo-filtros-tamano,
    #grupo-filtros-formatos {
        width: 100%; /* Ocupa todo el ancho */
        height: auto; /* Altura automática */
        margin-bottom: 10px; /* Espacio entre los grupos de filtros */
        font-size: 12px;
        justify-content: center; 
        align-items: center; /* Corregido de 'align-ithem' */
    }

    #legendAndMinSizeCheck,
    #filtros-formatos-checkboxes {
        width: 100%;
        height: auto;
        margin-bottom: 10px; /* Espacio entre estos elementos */
        display: flex;
        justify-content: center; 
        align-items: center; /* Corregido de 'align-ithem' */
    }

    #filtro-ancho-minimo,
    #filtro-alto-minimo {
        width: 100%; /* Ocupa todo el ancho */
        height: auto;
        margin-bottom: 5px; /* Espacio entre los inputs de tamaño */
        padding: 0; /* Elimina padding si no es necesario */
    }

    #minWidth,
    #minHeight {
        width: 40%; /* Ocupa todo el ancho */
    }

    #contenedor-checkbox-formatos {
        display: flex;
        justify-content: center; 
        align-items: center; /* Corregido de 'align-ithem' */
        justify-content: center;
    }

    #contenedor-boton-filtrar {
        width: 50%; /* Ocupa todo el ancho */
        height: auto;
        margin-top: 10px; /* Espacio arriba del botón filtrar */
    }

    #filtrarEncontrados {
        font-size: 18px; /* Ajusta el tamaño de la fuente */
    }
    #filtrarEncontrados:hover{
            width: 500%;
            height: auto;
            margin: 0;
            padding: 0.5rem;
            display: flex;
            align-items: center;
            justify-content: center;
             background: linear-gradient(#024A9B,rgb(23, 111, 218)); /* Un verde amigable */
            color: white;
            font-weight: 400;
            font-size:18px;
            padding-left:0.5rem;
            margin: 0px;
            border-radius: 20px;
            cursor: pointer;
        }

    .action-buttons{
            width:100%;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: end;
            margin-top: 1rem;
            margin-bottom: 1rem;
       }
       
       .action-buttons button{
            width:60px;
            height:40px;
            border: 2px solid #006FFA;
            border-radius: 6px;
            background:white;
            color: rgb(8, 85, 10);
            font-weight: 400;
            font-size:10px;
            padding-left:0.5rem;
            margin-left: 0.2rem;
            margin-right: 0.2rem;
            cursor: pointer;
       }
       
       .action-buttons button:hover{
            width:60px;
            height:40px;
            border: 1px solid #006FFA;
            border-radius: 6px;
            background: linear-gradient(#024A9B,rgb(23, 111, 218));
            color: white;
            font-weight: 500;
            font-size:10px;
            padding-left:0.5rem;
            margin-left: 0.2rem;
            margin-right: 0.2rem;
            cursor: pointer;
       }
    
  #grid {
        display: grid;
        /* Define 2 columnas con un ancho flexible */
        grid-template-columns: repeat(2, 1fr);
        gap: 10px; /* Opcional: agrega un espacio entre los elementos */
        height: auto;
    }

    #data-for-download {
        flex-direction: column; /* Apila las opciones de descarga y el botón */
        height: auto;
        align-items: stretch;
    }

    #downloadOptions {
        width: 100%; /* Ocupa todo el ancho */
        height: auto;
        display: flex;
        margin-bottom: 10px; /* Espacio entre las opciones y el campo de nombre */
    }

    #downloadOptions #checkLotesDirect,
    #downloadOptions #sizeLoteDirect,
    #downloadOptions #ChecCompress {
        width: 100%; /* Ocupa todo el ancho */
        margin-bottom: 5px; /* Espacio entre las opciones individuales */
        font-size: 14px; /* Ajusta el tamaño de la fuente */
    }

    #zipFilename {
        width: 100%; /* Ocupa todo el ancho */
        height: 40px; /* Altura fija o auto */
        font-size: 16px; /* Ajusta el tamaño de la fuente */
        margin-bottom: 10px; /* Espacio entre el nombre del archivo y el botón de descarga */
    }

    #downloadSelectedButton {
        width: 100%; /* Ocupa todo el ancho */
        height: 50px; /* Altura un poco más grande para el botón principal */
        font-size: 20px; /* Ajusta el tamaño de la fuente */
    }
    .textFooter{
        font-size: 10px !important;
        text-align: center;
    }
    }
}