/* ==========================================================================
   FILE SYSTEM SPECIFICS
   ========================================================================== */

/* Botón de borrado flotante en los items de archivo */
.del-btn {
  position: absolute; top: 4px; right: 4px; width: 22px; height: 22px;
  border-radius: 50%; background-color: var(--danger); color: white;
  border: none; font-size: 12px; line-height: 1; cursor: pointer;
  opacity: 0; transform: scale(0.8); transition: opacity 0.2s, transform 0.2s;
  display: flex; align-items: center; justify-content: center;
}
.data-item:hover .del-btn { opacity: 1; transform: scale(1); }
.del-btn:hover { filter: brightness(0.9); }

/* Ajuste del botón borrar en modo Lista */
.view-list .del-btn {
  position: relative; top: auto; right: auto; margin-left: auto;
  opacity: 1; transform: scale(1); background: transparent; color: var(--danger);
}
.view-list .del-btn:hover { background: #fde8e8; }

/* ==========================================================================
   APP: SUBIDA DE ARCHIVOS (UPLOAD)
   ========================================================================== */
.upload-wrap { padding: 24px; display: flex; flex-direction: column; gap: 16px; }

.upload-drop {
  border: 2px dashed var(--border); border-radius: 8px; padding: 48px 24px;
  text-align: center; cursor: pointer; transition: all 0.2s ease; background-color: var(--surface-alt);
}
.upload-drop:hover, .upload-drop.dragover { border-color: var(--accent); background-color: var(--hover-bg); }

.upload-drop-label { display: flex; flex-direction: column; align-items: center; gap: 12px; color: var(--text-muted); font-size: 13px; pointer-events: none; }
.upload-icon { font-size: 40px; }

.upload-progress { display: none; height: 20px; background-color: var(--surface-alt); border-radius: 10px; overflow: hidden; position: relative; width: 100%; border: 1px solid var(--border); }
.upload-progress.active { display: block; }
.upload-fill { height: 100%; background-color: var(--accent); width: 0%; transition: width 0.3s ease; }
.upload-pct { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: bold; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,0.4); }

/* ==========================================================================
   APP: CREACIÓN DE CARPETAS
   ========================================================================== */
.folder-create { padding: 20px; display: flex; flex-direction: column; gap: 16px; }
.folder-create input[type="text"] { width: 100%; padding: 8px 12px; border: 1px solid var(--border); border-radius: var(--radius); outline: none; }
.folder-create input[type="text"]:focus { border-color: var(--accent); }
.folder-create .row { display: flex; justify-content: flex-end; gap: 8px; }

/* ==========================================================================
   APP: PREVIEW / VISUALIZADOR
   ========================================================================== */
.preview-wrap { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; overflow: hidden; }

/* ==========================================================================
   APP: EDITOR DE CÓDIGO
   ========================================================================== */
.code-editor-layout { display: flex; flex-direction: column; height: 100%; width: 100%; background-color: #282a36; /* Tema Dracula */ }
.editor-statusbar { margin-left: auto; color: #8b92a5; font-size: 11px; font-family: monospace; padding-left: 12px; }
.code-editor-container { flex: 1; display: flex; flex-direction: column; overflow: hidden; color: white; padding: 16px; }
.code-editor-container .CodeMirror { height: 100% !important; font-family: 'Fira Code', 'Consolas', monospace; font-size: 13px; }