/* ==========================================================================
   Refinado de modales — nueva carpeta, renombrar, compartir, eliminar,
   papelera y opciones. Se carga al final para no tocar el resto de la UI.
   ========================================================================== */

:root {
  --mr-surface: var(--bg-secondary, #0f0f0f);
  --mr-surface-2: #141414;
  --mr-sunken: #0a0a0a;
  --mr-line: var(--border-color, #1c1c1c);
  --mr-line-2: #2a2a2a;
  --mr-ink: var(--text-color, #fff);
  --mr-ink-2: var(--text-secondary, #8a8a8a);
  --mr-accent: var(--accent-color, #fa4e49);
  --mr-danger: var(--danger-color, #fa4e49);
  --mr-hover: rgba(255, 255, 255, 0.06);
  --mr-hover-2: rgba(255, 255, 255, 0.04);
  --mr-hover-3: rgba(255, 255, 255, 0.015);
  --mr-head-grad: linear-gradient(180deg, rgba(255, 255, 255, 0.02), transparent);
  --mr-shadow: 0 26px 64px rgba(0, 0, 0, 0.55);
  --mr-danger-text: #ff7b72;
  --mr-radius: 14px;
  --mr-radius-sm: 9px;
  --mr-mono: 'Fira Mono', ui-monospace, monospace;
}

[data-theme="light"] {
  --mr-surface-2: #f1f3f5;
  --mr-sunken: #eef0f2;
  --mr-line-2: #d8dce1;
  --mr-hover: rgba(0, 0, 0, 0.05);
  --mr-hover-2: rgba(0, 0, 0, 0.04);
  --mr-hover-3: rgba(0, 0, 0, 0.015);
  --mr-head-grad: linear-gradient(180deg, rgba(0, 0, 0, 0.02), transparent);
  --mr-shadow: 0 18px 44px rgba(0, 0, 0, 0.18);
  --mr-danger-text: var(--danger-color, #dc3545);
}

/* ---------- Hoja común ---------- */
#createFolderModal .modal-content,
#renameModal .modal-content,
#deleteModal .modal-content,
#displayOptionsModal .modal-content,
#confirmModal .modal-content,
.confirm-modal .modal-content,
.share-modal .modal-content {
  position: relative;
  background: var(--mr-surface);
  border: 1px solid var(--mr-line-2);
  border-radius: var(--mr-radius);
  box-shadow: var(--mr-shadow);
  overflow: hidden;
}

/* Filo de acento en la parte superior (detalle de firma) */
#createFolderModal .modal-content::before,
#renameModal .modal-content::before,
#deleteModal .modal-content::before,
#displayOptionsModal .modal-content::before,
#confirmModal .modal-content::before,
.confirm-modal .modal-content::before,
.share-modal .modal-content::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--mr-accent), rgba(250, 78, 73, 0) 62%);
  pointer-events: none;
}

/* ---------- Cabecera ---------- */
#createFolderModal .modal-header,
#renameModal .modal-header,
#deleteModal .modal-header,
#displayOptionsModal .modal-header,
#confirmModal .modal-header,
.confirm-modal .modal-header,
.share-modal .modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 17px 20px;
  border-bottom: 1px solid var(--mr-line);
  background: var(--mr-head-grad);
}

#createFolderModal .modal-header h2,
#renameModal .modal-header h2,
#deleteModal .modal-header h2,
#displayOptionsModal .modal-header h2,
#confirmModal .modal-header h2,
.confirm-modal .modal-header h2,
.share-modal .modal-header h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--mr-ink);
  display: flex;
  align-items: center;
  gap: 11px;
}

#createFolderModal .modal-header h2 i,
#renameModal .modal-header h2 i,
#deleteModal .modal-header h2 i,
#displayOptionsModal .modal-header h2 i,
.share-modal .modal-header h3 i {
  width: auto;
  height: auto;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  border-radius: 0;
  font-size: 18px;
  color: var(--mr-accent);
}

#createFolderModal .close-button,
#renameModal .close-button,
#deleteModal .close-button,
#displayOptionsModal .close-button,
#confirmModal .close-button,
.confirm-modal .close-button,
.share-modal .close-button {
  width: 32px;
  height: 32px;
  border-radius: var(--mr-radius-sm);
  background: transparent;
  color: var(--mr-ink-2);
  font-size: 19px;
  transition: background 0.15s ease, color 0.15s ease;
}
#createFolderModal .close-button:hover,
#renameModal .close-button:hover,
#deleteModal .close-button:hover,
#displayOptionsModal .close-button:hover,
#confirmModal .close-button:hover,
.confirm-modal .close-button:hover,
.share-modal .close-button:hover {
  background: var(--mr-hover);
  color: var(--mr-ink);
  transform: none;
}

/* ---------- Cuerpo y pie ---------- */
#createFolderModal .modal-body,
#renameModal .modal-body,
#deleteModal .modal-body,
#displayOptionsModal .modal-body,
#confirmModal .modal-body,
.confirm-modal .modal-body,
.share-modal .modal-body {
  padding: 18px 20px 20px;
  color: var(--mr-ink-2);
  font-size: 13.5px;
  line-height: 1.55;
}

#createFolderModal .modal-footer,
#renameModal .modal-footer,
#deleteModal .modal-footer,
#displayOptionsModal .modal-footer,
#confirmModal .modal-footer,
.confirm-modal .modal-footer,
.share-modal .modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 13px 20px;
  border-top: 1px solid var(--mr-line);
  background: var(--mr-hover-3);
  border-radius: 0;
}

/* ---------- Etiquetas y campos ---------- */
#createFolderModal .form-group,
#renameModal .form-group,
#deleteModal .form-group,
#displayOptionsModal .form-group,
.confirm-modal .form-group,
.share-modal .form-group { margin-bottom: 16px; }

#createFolderModal .form-group > label:not(.checkbox-label),
#renameModal .form-group > label,
.share-modal .form-group > label {
  display: block;
  margin-bottom: 7px;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--mr-ink-2);
}

#createFolderModal input[type="text"],
#renameModal input[type="text"],
.share-modal input[type="text"],
.share-modal input[readonly] {
  width: 100%;
  padding: 11px 13px;
  background: var(--mr-sunken);
  border: 1px solid var(--mr-line-2);
  border-radius: var(--mr-radius-sm);
  color: var(--mr-ink);
  font-size: 14px;
  box-sizing: border-box;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
#createFolderModal input[type="text"]:focus,
#renameModal input[type="text"]:focus,
.share-modal input[type="text"]:focus {
  border-color: var(--mr-accent);
  box-shadow: 0 0 0 3px rgba(250, 78, 73, 0.16);
  outline: none;
}

/* ---------- Botones dentro de los modales ---------- */
#createFolderModal .modal-footer button,
#renameModal .modal-footer button,
#deleteModal .modal-footer button,
#displayOptionsModal .modal-footer button,
#confirmModal .modal-footer button,
.confirm-modal .modal-footer button,
.share-modal .modal-footer button {
  height: 38px;
  padding: 0 16px;
  border-radius: var(--mr-radius-sm);
  font-size: 13px;
  font-weight: 600;
}
#createFolderModal .btn-primary,
#renameModal .btn-primary,
#displayOptionsModal .btn-primary,
#confirmModal .btn-primary,
.share-modal .btn-primary {
  background: var(--mr-accent);
  border-color: transparent;
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
#createFolderModal .btn-primary:hover,
#renameModal .btn-primary:hover,
#displayOptionsModal .btn-primary:hover,
#confirmModal .btn-primary:hover { background: var(--accent-hover, #b53d39); }

#createFolderModal .btn-secondary,
#renameModal .btn-secondary,
#deleteModal .btn-secondary,
#displayOptionsModal .btn-secondary,
.confirm-modal .btn-secondary,
.share-modal .btn-secondary {
  background: transparent;
  border: 1px solid var(--mr-line-2);
  color: var(--mr-ink);
}
#createFolderModal .btn-secondary:hover,
#renameModal .btn-secondary:hover,
#deleteModal .btn-secondary:hover,
#displayOptionsModal .btn-secondary:hover,
.confirm-modal .btn-secondary:hover,
.share-modal .btn-secondary:hover { background: var(--mr-hover); }

#deleteModal .btn-danger,
.confirm-modal .btn-danger {
  background: transparent;
  border: 1px solid rgba(250, 78, 73, 0.45);
  color: var(--mr-danger-text);
}
#deleteModal .btn-danger:hover,
.confirm-modal .btn-danger:hover { background: rgba(250, 78, 73, 0.12); }

/* ---------- Nueva carpeta ---------- */
#createFolderModal .checkbox-label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px;
  background: var(--mr-surface-2);
  border: 1px solid var(--mr-line);
  border-radius: 10px;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
#createFolderModal .checkbox-label:hover { border-color: var(--mr-line-2); background: var(--mr-hover); }
#createFolderModal .checkbox-label .cb-text { flex: 1; min-width: 0; }
#createFolderModal .checkbox-label .cb-title {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--mr-ink);
  font-size: 13.5px;
  font-weight: 600;
}
#createFolderModal .checkbox-label .cb-title i { color: var(--mr-accent); font-size: 17px; line-height: 1; }
#createFolderModal .checkbox-label small { display: block; margin-top: 3px; color: var(--mr-ink-2); font-size: 12px; line-height: 1.4; }

#createFolderModal .email-tags-container { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
#createFolderModal .email-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  background: rgba(250, 78, 73, 0.10);
  border: 1px solid rgba(250, 78, 73, 0.35);
  border-radius: 999px;
  color: var(--mr-ink);
  font-size: 12.5px;
}
#createFolderModal .remove-tag { cursor: pointer; color: var(--mr-ink-2); display: inline-flex; }
#createFolderModal .remove-tag:hover { color: var(--mr-danger); transform: none; }
#createFolderModal .input-group { display: flex; gap: 8px; align-items: center; }
#createFolderModal .input-group .form-control { flex: 1; }
#createFolderModal #addEmailButton {
  height: 42px;
  min-width: 44px;
  padding: 0 14px;
  background: var(--mr-accent);
  border: none;
  border-radius: var(--mr-radius-sm);
  color: #fff;
}

/* ---------- Renombrar ---------- */
#renameModal .modal-body .form-group > div { display: flex !important; align-items: stretch; gap: 6px; }
#renameModal #newFileName { flex: 1; }
#renameModal #fileExtStatic {
  display: inline-flex;
  align-items: center;
  padding: 0 12px;
  background: var(--mr-surface-2);
  border: 1px solid var(--mr-line);
  border-radius: var(--mr-radius-sm);
  color: var(--mr-ink-2);
  font-family: var(--mr-mono);
  font-size: 13px;
}

/* ---------- Compartir ---------- */
.share-modal .modal-body p { margin: 0 0 14px; }
.share-modal .modal-body p strong { color: var(--mr-ink); word-break: break-all; }
.share-modal .share-settings {
  background: var(--mr-surface-2);
  border: 1px solid var(--mr-line);
  border-radius: 12px;
  padding: 12px;
  margin-bottom: 14px;
}
.share-modal .share-settings .checkbox-label { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.share-modal .share-settings .checkbox-label span { color: var(--mr-ink); font-size: 13.5px; }
.share-modal .expiry-options {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 12px 0 2px;
  padding: 0;
}
.share-modal .expiry-options label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 12px;
  margin: 0;
  background: transparent;
  border: 1px solid var(--mr-line-2);
  border-radius: 999px;
  color: var(--mr-ink-2);
  font-size: 12.5px;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.share-modal .expiry-options label:hover { border-color: var(--mr-ink-2); color: var(--mr-ink); }
.share-modal .expiry-options label:has(input:checked) {
  border-color: var(--mr-accent);
  background: rgba(250, 78, 73, 0.10);
  color: var(--mr-ink);
}
.share-modal .share-url-container {
  margin-top: 6px;
  padding: 12px;
  background: var(--mr-surface-2);
  border: 1px solid var(--mr-line);
  border-radius: 12px;
}
.share-modal .share-url-container h4 {
  margin: 0 0 10px;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--mr-ink-2);
  display: flex;
  align-items: center;
  gap: 6px;
}
.share-modal .share-url-box { display: flex; gap: 8px; }
.share-modal .share-url-box input {
  flex: 1;
  font-family: var(--mr-mono);
  font-size: 12.5px;
  padding: 10px 12px;
}
.share-modal .btn-copy {
  min-width: 44px;
  height: 42px;
  padding: 0 14px;
  background: var(--mr-accent);
  border: 1px solid transparent;
  border-radius: var(--mr-radius-sm);
  color: #fff;
  cursor: pointer;
}
.share-modal .btn-copy:hover { background: var(--accent-hover, #b53d39); }
.share-modal .share-info { margin: 10px 0 0; font-size: 12.5px; color: var(--mr-ink-2); }
.share-modal .guest-share-notice,
.share-modal .share-info-box {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 11px 13px;
  margin: 0 0 14px;
  background: rgba(255, 193, 7, 0.08);
  border: 1px solid rgba(255, 193, 7, 0.30);
  border-radius: 10px;
  color: var(--mr-ink);
  font-size: 12.5px;
  line-height: 1.5;
}
.share-modal .guest-share-notice i,
.share-modal .share-info-box i { color: #ffc107; margin-top: 1px; }

/* ---------- Eliminar ---------- */
#deleteModal .modal-body p { margin: 0 0 10px; color: var(--mr-ink-2); }
#deleteModal .modal-body p strong { color: var(--mr-ink); word-break: break-all; }
#deleteModal .warning-text {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 4px 0 0;
  padding: 11px 13px;
  background: rgba(250, 78, 73, 0.08);
  border: 1px solid rgba(250, 78, 73, 0.30);
  border-radius: 10px;
  color: var(--mr-ink);
  font-size: 13px;
}
#deleteModal .warning-text i { color: var(--mr-danger); }

/* ---------- Opciones (orden / dirección / vista / agrupar) ---------- */
#displayOptionsModal .modal-content { max-width: 520px; width: min(94vw, 520px); }
#displayOptionsModal .sort-section {
  padding: 14px 0 16px;
  border-bottom: 1px solid var(--mr-line);
}
#displayOptionsModal .sort-section:last-child { border-bottom: 0; padding-bottom: 4px; }
#displayOptionsModal .sort-section h3 {
  margin: 0 0 10px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--mr-ink-2);
}
#displayOptionsModal .sort-section h3 i { display: none; }

#displayOptionsModal .sort-options,
#displayOptionsModal .view-options {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
#displayOptionsModal .sort-options label,
#displayOptionsModal .view-options label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  margin: 0;
  border: 1px solid var(--mr-line-2);
  border-radius: 8px;
  background: transparent;
  color: var(--mr-ink-2);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.13s ease, border-color 0.13s ease, color 0.13s ease;
}
#displayOptionsModal .sort-options label input,
#displayOptionsModal .view-options label input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
#displayOptionsModal .sort-options label:hover,
#displayOptionsModal .view-options label:hover {
  background: var(--mr-hover);
  color: var(--mr-ink);
}
#displayOptionsModal .sort-options label:has(input:checked),
#displayOptionsModal .view-options label:has(input:checked) {
  background: var(--mr-hover);
  border-color: var(--mr-ink-2);
  color: var(--mr-ink);
  font-weight: 700;
}
#displayOptionsModal .sort-options label i,
#displayOptionsModal .view-options label i {
  font-size: 17px;
  color: var(--mr-ink-2);
}
#displayOptionsModal .sort-options label:has(input:checked) i,
#displayOptionsModal .view-options label:has(input:checked) i { color: var(--mr-ink); }

/* ---------- Papelera ---------- */
#trashModal .trash-redesign {
  max-width: 920px;
  width: min(94vw, 920px);
  background: var(--mr-surface);
  border: 1px solid var(--mr-line-2);
  border-radius: var(--mr-radius);
  box-shadow: var(--mr-shadow);
}
#trashModal .trash-redesign .tr-header {
  padding: 16px 18px;
  border-bottom: 1px solid var(--mr-line);
  background: var(--mr-head-grad);
}
#trashModal .tr-icon {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: rgba(250, 78, 73, 0.12);
  border: 1px solid rgba(250, 78, 73, 0.25);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 17px !important;
  color: var(--mr-accent);
}
#trashModal .tr-title { font-size: 16px; font-weight: 700; letter-spacing: -0.01em; }
#trashModal .tr-subtitle { font-size: 12px; color: var(--mr-ink-2); }
#trashModal .tr-actions .search-wrap input[type="search"] {
  min-width: 220px;
  height: 36px;
  padding: 0 12px 0 34px;
  background: var(--mr-sunken);
  border: 1px solid var(--mr-line-2);
  border-radius: var(--mr-radius-sm);
  color: var(--mr-ink);
  font-size: 13px;
}
#trashModal .tr-actions .search-wrap i { left: 11px; right: auto; font-size: 16px; }
#trashModal .btn-ghost {
  height: 36px;
  padding: 0 14px;
  background: transparent;
  border: 1px solid var(--mr-line-2);
  border-radius: var(--mr-radius-sm);
  color: var(--mr-ink);
  font-size: 13px;
  font-weight: 600;
}
#trashModal .btn-ghost:hover { background: var(--mr-hover); }
#trashModal .tr-body { padding: 12px 14px; }
#trashModal .tr-controls { margin-bottom: 8px; padding: 0 4px; color: var(--mr-ink-2); font-size: 12.5px; }
#trashModal .tr-list { gap: 0; border: 1px solid var(--mr-line); border-radius: 11px; overflow: hidden; }
#trashModal .tr-list .trash-item {
  padding: 10px 12px;
  border-bottom: 1px solid var(--mr-line);
  border-radius: 0;
  background: transparent;
  grid-template-columns: 28px 26px 1fr 120px 140px;
  gap: 10px;
}
#trashModal .tr-list .trash-item:last-child { border-bottom: none; }
#trashModal .tr-list .trash-item:hover { background: var(--mr-hover-3); }
#trashModal .tr-list .trash-item.selected {
  background: rgba(250, 78, 73, 0.08);
}
#trashModal .tr-list .trash-item .file-icon { color: var(--mr-ink-2); }
#trashModal .tr-list .trash-item .name { color: var(--mr-ink); font-weight: 600; font-size: 13.5px; }
#trashModal .tr-list .trash-item .uploader,
#trashModal .tr-list .trash-item .date {
  color: var(--mr-ink-2);
  font-size: 11.5px;
  font-family: var(--mr-mono);
}
#trashModal .tr-list .empty { padding: 42px 20px; text-align: center; color: var(--mr-ink-2); }
#trashModal .tr-footer {
  padding: 12px 16px;
  border-top: 1px solid var(--mr-line);
  background: transparent;
}
#trashModal .tr-footer #selectionInfo { font-size: 12.5px; color: var(--mr-ink-2); }
#trashModal .tr-footer .actions button {
  height: 36px;
  min-width: 120px;
  padding: 0 14px;
  border-radius: var(--mr-radius-sm);
  font-size: 13px;
  font-weight: 600;
}
#trashModal .tr-footer .actions .btn-secondary { background: transparent; border: 1px solid var(--mr-line-2); color: var(--mr-ink); }
#trashModal .tr-footer .actions .btn-secondary:hover { background: var(--mr-hover); }
#trashModal .tr-footer .actions .btn-danger {
  background: transparent;
  border: 1px solid rgba(250, 78, 73, 0.45);
  color: var(--mr-danger-text);
}
#trashModal .tr-footer .actions .btn-danger:hover { background: rgba(250, 78, 73, 0.12); }

/* ---------- Confirmación genérica ---------- */
#confirmModal .modal-body,
.confirm-modal .modal-body { font-size: 13.5px; }

/* ---------- Responsive ---------- */
@media (max-width: 720px) {
  #trashModal .trash-redesign { width: calc(100% - 20px); }
  #trashModal .tr-header { flex-direction: column; align-items: flex-start; }
  #trashModal .tr-actions { width: 100%; flex-wrap: wrap; }
  #trashModal .tr-actions .search-wrap { flex: 1; }
  #trashModal .tr-actions .search-wrap input[type="search"] { min-width: 0; width: 100%; }
  #trashModal .tr-list .trash-item { grid-template-columns: 28px 26px 1fr auto; }
  #trashModal .tr-list .trash-item .uploader { display: none; }
  #trashModal .tr-list .trash-item .date { text-align: right; }
  #displayOptionsModal .modal-content { width: calc(100% - 20px); }
}