/* ───────── filemanager.css ───────── */

/* 1. Miniaturas: ancho fijo */
.item-thumb {
    width: 150px !important;
}
@media (max-width: 575.98px) {
    /* xs */
    .item-thumb {
        width: 100px !important;
    }
}

/* 2. Contenido centrado en TODAS las tarjetas */
.fm-thumb-body,
.fm-folder-body,      /* carpetas */
.fm-file-body {
    /* archivos */
    padding: 0.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

/* 2-a) Alto para carpetas (se mantiene cómodo) */
.fm-folder-body {
    min-height: 100px;
}

/* 2-b) Alto para archivos (ligeramente menor) */
.fm-file-body {
    min-height: 90px;
}

/* 3. Checkbox flotante */
.fm-thumb-checkbox {
    position: absolute;
    left: 0.25rem;
    top: 0.25rem;
}

/* 4. Bordes dashed para carpetas compartidas */
.border-dashed {
    border: 1px dashed var(--bs-border-color) !important;
}

/* 5. Icono redondo para archivos (cualquier tipo) */
.fm-file-icon {
    display: inline-flex;
    width: 46px;
    height: 46px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.05); /* sutil fondo en temas oscuros */
    margin-bottom: 0.25rem;
}
.fm-file-icon i {
    font-size: 28px;
}

/* 6. Badge extensión (opcional, si lo usas) */
.file-ext-badge {
    position: absolute;
    right: 0.3rem;
    bottom: 0.3rem;
    padding: 0.05rem 0.25rem;
    font-size: 0.55rem;
    line-height: 1;
    border-radius: 0.2rem;
    color: #fff;
    background: #6c757d;
}

#bulkActionsToolbar {
    padding: 0.25rem 0.5rem;
    background-color: var(
        --bs-light
    ); /* o usa var(--bs-body-bg) si usas modo oscuro */
    border-radius: 0.375rem;
    border: 1px solid var(--bs-border-color);
}

/* Efecto visual al arrastrar */
#dropZone.drag-over {
    background-color: #e7f1ff;
    border-color: #3b71ca;
}

/* Tamaño y estilos de cada preview */
.preview-item {
    width: 100px;
    font-size: 0.75rem;
}
.preview-item .loading-overlay {
    background: rgba(255, 255, 255, 0.7);
}
/* Contenedor de preview evita desbordes */
.preview-item .border {
    overflow: hidden;
}
.preview-item img {
    width: 100%;
    height: 80px;
    object-fit: contain;
}

/* Hojas de cálculo */
.preview-item.type-xls .border,
.preview-item.type-xlsx .border {
    border-color: #1d6f42 !important;
}

/* Documentos Word */
.preview-item.type-doc .border,
.preview-item.type-docx .border {
    border-color: #2a579a !important;
}

/* Presentaciones PowerPoint */
.preview-item.type-ppt .border,
.preview-item.type-pptx .border {
    border-color: #d24726 !important;
}

/* PDFs (ya lo tenías) */
.preview-item.type-pdf .border {
    border-color: #e42101 !important;
}

/* ============================= */
/*  Ajustes definitivos de iconos
/* ============================= */

/* 1) Aseguramos que .fm-file-icon sea un flex container de 60×60 centralizando TODO */
.fm-file-body .fm-file-icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 60px !important;
    height: 60px !important;
    margin-bottom: 0.5rem !important;
}

/* 2) Iconos dentro de ese contenedor escalan pero se mantienen centrados */
.fm-file-body .fm-file-icon i {
    font-size: 2rem !important; /* ajusta si quieres más grande/pequeño */
    margin: 0 !important;
}

/* 3) Imágenes dentro del mismo contenedor rellenan manteniendo proporción */
.fm-file-body .fm-file-icon img {
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
    display: block !important;
    margin: 0 !important;
}