/*
==============================================
   ESTILOS PARA INPUT DE FICHEROS MÚLTIPLES
==============================================
*/

/* Contenedor principal de cada fila de input de archivo */
.control-group.input-group {
    display: flex;
    align-items: stretch; /* Asegura que todos los elementos tengan la misma altura */
}

/* Label a la izquierda ("Archivos") */
.control-group .input-group-prepend .input-group-text {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    font-weight: 500;
    background-color: var(--light-gray);
    border-color: #ced4da;
    height: 100%; /* Asegura que ocupe toda la altura */
}

/* Contenedor principal del input de archivo, estilizado como un botón */
.control-group .btn-file {
    position: relative; /* Clave para posicionar el input real */
    overflow: hidden; /* Oculta el input real que es más grande */
    display: flex;
    align-items: center;
    justify-content: space-between; /* Espacia el nombre del archivo y el botón de acción */
    padding: 0; /* Quitamos el padding por defecto del botón */
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    text-align: left;
    white-space: nowrap;
    background-color: var(--white-color); /* Fondo blanco para el área del input */
    border: 1px solid #ced4da;
    color: var(--text-color-light);
    font-weight: 400;
}
.control-group .btn-file:hover {
    background-color: var(--light-green-subtle);
}

/* El input[type="file"] real, que se oculta visualmente */
.control-group .btn-file input[type="file"] {
    position: absolute;
    top: 0;
    right: 0;
    min-width: 100%;
    min-height: 100%;
    font-size: 100px; /* Tamaño grande para asegurar que sea clicable */
    text-align: right;
    filter: alpha(opacity=0); /* Para IE viejo */
    opacity: 0;
    outline: none;
    cursor: pointer;
    display: block;
    z-index: 1; /* Por encima del texto */
}

/* Span para mostrar el nombre del archivo seleccionado (se añade con JS) */
.control-group .file-name-display {
    padding: 0.375rem 0.75rem;
    overflow: hidden;
    text-overflow: ellipsis; /* Añade "..." si el nombre es muy largo */
    white-space: nowrap;
    flex-grow: 1; /* Ocupa el espacio disponible */
}

/* Contenedor para los botones de acción (+ Añadir, - Eliminar) */
.control-group .input-group-btn {
    flex-shrink: 0; /* Evita que el botón se encoja */
    z-index: 2; /* Por encima del input invisible */
}

/* Botones de acción (+ y -) */
.control-group .btn {
    height: 100%; /* Ocupa toda la altura */
    border-radius: 0; /* Sin bordes redondeados para que encaje */
}
/* Ajuste específico para el primer botón de añadir */
.increment .btn-success {
    border-top-right-radius: var(--border-radius-global);
    border-bottom-right-radius: var(--border-radius-global);
}
/* Ajuste específico para el botón de eliminar */
.clone .btn-danger {
    border-top-right-radius: var(--border-radius-global);
    border-bottom-right-radius: var(--border-radius-global);
}

/* Opcional: Estilo para indicar que se puede soltar un archivo (drag & drop) */
.control-group .btn-file.dragover {
    border-color: var(--accent-color);
    border-style: dashed;
    box-shadow: 0 0 10px rgba(151, 103, 76, 0.25);
}

/* Margen para las filas clonadas */
.clone .control-group {
    margin-top: 15px;
}