﻿/*    INICIO PRUEBA*/
.dropzone-container {
    border: 2px dashed #a0b0c0;
    border-radius: 10px;
    background-color: #eaf1f6;
    padding: 40px;
    text-align: center;
    color: #607d8b;
    cursor: pointer;
}

    .dropzone-container p {
        font-size: 16px;
        color: #455a64;
    }

    .dropzone-container.dragover {
        background-color: #d1e4f2;
        border-color: #4a90e2;
    }

#removeButton {
    display: none; /* Manténlo oculto inicialmente */
    margin-top: 10px;
    color: #fff;
    background-color: #dc3545; /* Rojo para el botón de eliminar */
    border: none;
    border-radius: 25px; /* Bordes redondeados */
    padding: 10px 20px; /* Espaciado interno */
    cursor: pointer;
    font-size: 14px;
    transition: background-color 0.3s ease, transform 0.3s ease; /* Animación suave para el hover */
}

    #removeButton:hover {
        background-color: #c82333; /* Rojo oscuro en hover */
        transform: scale(1.05); /* Ligera animación de aumento de tamaño */
    }

    #removeButton i {
        margin-right: 5px; /* Espaciado entre el icono y el texto */
    }
/* FIN PRUEBA*/

/*ARCHIVO MULTIPLE*/
/* Estilo del contenedor principal de vista previa */
#visor_files_preview_multiple {
    display: flex;
    flex-direction: column; /* Cambiamos a columna para que los elementos se apilen verticalmente */
    gap: 10px; /* Espacio entre los elementos */
    width: 100%; /* Asegura que ocupe el 100% del ancho disponible */
    padding: 10px;
    box-sizing: border-box;
}

/* Estilo de la vista previa de cada archivo */
.file-preview {
    width: 100%; /* Asegura que cada archivo ocupe toda la fila */
    box-sizing: border-box;
    margin-bottom: 10px;
    background-color: #fff;
    border: 1px solid #ddd;
    padding: 10px;
    border-radius: 5px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

    /* Estilo del objeto (PDF) */
    .file-preview object {
        width: 100%; /* Asegura que el objeto ocupe el 100% del espacio disponible */
        height: 200px; /* Ajusta la altura según tus necesidades */
        object-fit: cover; /* Mantiene la proporción del archivo, evitando que se deforme */
        margin-bottom: 10px;
    }

    /* Estilo del nombre del archivo */
    .file-preview span {
        margin-top: 10px;
        font-size: 12px;
        text-align: center;
        display: block;
    }

    /* Estilo del botón de eliminar */
    .file-preview button {
        margin-top: 10px;
        width: 100%; /* Hace que el botón ocupe todo el ancho disponible */
    }


/*FIN ARCHIVO MULTIPLE*/