.document-manager { /*padding:20px; background:#f8f9fb; border-radius:12px; border:1px solid #e1e4e8;*/ }
.document-manager .doc-toolbar {
  padding: 16px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,.05);
}
.document-manager .doc-toolbar input,
.document-manager .doc-toolbar select { padding:10px 14px; border-radius:8px; border:1px solid #ccc; font-size:14px; transition:all .2s; }
.document-manager .doc-toolbar input:focus,
.document-manager .doc-toolbar select:focus { border-color:#4a90e2; box-shadow:0 0 0 2px rgba(74,144,226,0.2); outline:none; }
.document-manager .drop-zone { flex:1 1 200px; min-width:180px; padding:12px; border:2px dashed #bbb; border-radius:10px; text-align:center; font-weight:500; cursor:pointer; color:#555; background:#fafafa; transition:.2s; }
.document-manager .drop-zone:hover { border-color:#4a90e2; background:#f0f6ff; color:#333; }
.document-manager .doc-list { display:grid; grid-template-columns:repeat(auto-fill,minmax(170px,1fr)); gap:15px; }
.document-manager .doc-card {
  position: relative;
  background: #fff;
  padding: 12px;
  border-radius: 10px;
  border: 1px solid #e1e1e1;

  display: flex;
  flex-direction: column;
  justify-content: space-between; /* 👈 clave */
  
  height: 100%; /* 👈 clave */
  transition: transform .15s ease, box-shadow .15s ease;
}
.document-manager .doc-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0,0,0,.08);
}
.document-manager .doc-thumb { height:140px; width:100%; background:#f5f5f5; border-radius:6px; background-size:cover; background-position:center; display:flex; align-items:center; justify-content:center; font-size:48px; color:#888; }
.document-manager .doc-info { margin-top:8px; font-size:14px; word-break:break-word; }
.document-manager .doc-meta { font-size:12px; color:#666; margin-top:4px; line-height:1.2; }
.document-manager .doc-actions { margin-top:6px; }
.document-manager .doc-actions a { font-size:13px; text-decoration:none; color:#4a90e2; margin-right:8px; }
.document-manager .delete-bubble { position:absolute; top:-8px; right:-8px; width:32px; height:32px; background:#fff; border:2px solid #c62828; border-radius:50%; color:#c62828; display:flex; align-items:center; justify-content:center; cursor:pointer; z-index:20; box-shadow:0 2px 6px rgba(0,0,0,0.15); transition:.2s; }
.document-manager .delete-bubble:hover { background:#c62828; color:#fff; }

.document-manager .pagination { display:flex; justify-content:center; margin-top:15px; gap:6px; }
.document-manager .pagination button { padding:5px 10px; border-radius:5px; border:1px solid #ccc; background:#f7f7f7; cursor:pointer; transition:.2s; }
.document-manager .pagination button:hover { background:#e0e0e0; }
.document-manager .pagination button.active { background:#4a90e2; color:#fff; border-color:#4a90e2; }

.doc-rename-input { width: 100%; font-size: 14px; padding: 4px 6px; border: 1px solid #ccc; border-radius: 4px; }

.doc-dragover {
  border: 2px dashed #0d6efd;
  background: #f8fbff;
  transition: all .2s ease;
}

.doc-upload-progress {
  transition: opacity .3s ease;
}

.doc-progress-bar {
  transition: width .2s ease;
}

.document-manager .doc-name {
  font-weight: 500;
  font-size: 14px;
  line-height: 1.3;

  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;

  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-word;
  min-height: 2.6em; /* 👈 mantiene altura consistente */
}
.document-manager .doc-footer {
  margin-top: auto;
}

.document-manager .doc-rename-input {
  width: 100%;
  font-size: 14px;
  padding: 4px 6px;
  border: 1px solid #4a90e2;
  border-radius: 6px;
  outline: none;
}

.document-manager .doc-card.renaming {
  background: #f0f6ff;
}

.document-manager .doc-saving-overlay {
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,.6);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
}

.document-manager .doc-card[data-type="folder"] {
  cursor: pointer;
}

.document-manager .doc-card[data-type="folder"]:hover {
  background: #f5f7fa;
}

.document-manager .doc-card.dragging {
  opacity: .4;
}

.document-manager .doc-card[data-type="folder"].drag-over {
  background: #e8f2ff;
  border-color: #4a90e2;
  transform: scale(1.02);
  animation: l4dPulse 0.9s ease-in-out infinite;
}

.doc-breadcrumb-item.drag-over {
  animation: l4dPulse 0.9s ease-in-out infinite;
}

@keyframes l4dPulse {
  0% { transform: scale(1.0); }
  50% { transform: scale(1.03); }
  100% { transform: scale(1.0); }
}

.doc-context-menu {
  background: #fff;
  border: 1px solid #e1e4e8;
  border-radius: 10px;
  box-shadow: 0 10px 25px rgba(0,0,0,.12);
  z-index: 99999;
  min-width: 180px;
  padding: 6px 0;
  font-size: 14px;
}

.doc-menu-item {
  display: flex;
  align-items: center;
  padding: 8px 14px;
  cursor: pointer;
  transition: background .12s ease;
}

.doc-menu-item:hover {
  background: #f5f7fa;
}

.doc-menu-item i {
  width: 16px;
  text-align: center;
}

.doc-card .doc-name-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.file-meta {
  font-size: 12px;
  opacity: .7;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.doc-list-view {
  display: block !important;
}

.doc-list-view .doc-card {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 15px;
}

.doc-list-view .doc-name-wrapper {
  flex: 1;
  text-align: left;
  flex-direction: row;
  gap: 10px;
}

.doc-card.selected {
  border: 2px solid #0d6efd;
  background: #f0f6ff;
}

.doc-toolbar {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,.05);
}

.doc-header {
    width: 100%;
}

.doc-breadcrumb {
    font-size: 13px;
}

.doc-storage-bar .progress-bar {
  transition: width .3s ease;
}

.doc-storage-bar {
  width: 100%;
}

.doc-storage-text {
  font-size: 13px;
  color: #6c757d;
}

.document-manager {
    position: relative;
}

.doc-drop-overlay {
    position: absolute;
    inset: 0;
    background: rgba(13,110,253,.08);
    border: 2px dashed rgba(13,110,253,.55);
    border-radius: 12px;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.doc-drop-overlay-inner {
    background: rgba(255,255,255,.95);
    border-radius: 14px;
    padding: 18px 22px;
    text-align: center;
    box-shadow: 0 12px 30px rgba(0,0,0,.1);
}

.doc-card.dragging {
    opacity: .4;
}

.doc-breadcrumb-item.drag-over {
  animation: l4dPulse 0.9s ease-in-out infinite;
}

@keyframes l4dPulse {
  0% { transform: scale(1.0); }
  50% { transform: scale(1.03); }
  100% { transform: scale(1.0); }
}

.doc-trash {
  position: fixed;
  bottom: 25px;
  right: 25px;
  width: 64px;
  height: 64px;
  background: #f8d7da;
  color: #b02a37;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(0,0,0,.15);
  z-index: 9999;

  /* oculto por defecto */
  opacity: 0;
  transform: translateY(14px) scale(.92);
  pointer-events: none;
  transition: opacity .14s ease, transform .14s ease, background .14s ease, color .14s ease;
}

.doc-trash.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.doc-trash.drag-over {
  background: #dc3545;
  color: #fff;
  transform: translateY(0) scale(1.12);
}

.doc-trash i { pointer-events: none; }

.doc-trash.bite {
  animation: trashBite .22s ease;
}
@keyframes trashBite {
  0% { transform: translateY(0) scale(1.12); }
  50% { transform: translateY(0) scale(.92); }
  100% { transform: translateY(0) scale(1.12); }
}

.doc-fly-to-trash {
  position: fixed;
  z-index: 10000;
  border-radius: 10px;
  background: rgba(220,53,69,.10);
  border: 1px solid rgba(220,53,69,.25);
  box-shadow: 0 10px 25px rgba(0,0,0,.12);
  pointer-events: none;
  transform-origin: center;
}
.doc-fly-to-trash .label {
  padding: 8px 10px;
  font-size: 12px;
  max-width: 220px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #b02a37;
}

.doc-overlay-loader{
    position:absolute;
    inset:0;
    background:rgba(255,255,255,.65);
    display:flex;
    align-items:center;
    justify-content:center;
    z-index:50;
    backdrop-filter:blur(2px);
}

.document-manager{
    position:relative;
}

.doc-skeleton{
    border-radius:8px;
    background:#f2f2f2;
    position:relative;
    overflow:hidden;
    height:110px;
}

.doc-skeleton::after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.5),
        transparent
    );
    animation:docSkeleton 1.2s infinite;
}

@keyframes docSkeleton{
    0%{ transform:translateX(-100%) }
    100%{ transform:translateX(100%) }
}

.doc-list{
    position:relative;
}

.doc-card{
    height:110px;
}