/*
 * Hoja de estilos principal de la aplicación de Archivos.
 * Propósito: personaliza paleta, tipografía y componentes (navbar, breadcrumbs, tablas, helpers).
 * Alcance: estilos globales y ajustes responsivos; no altera la estructura HTML.
 * SPA: anima transiciones de contenido y mantiene consistencia visual tras navegación.
 */
/* Fuente local elegante: Inter */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../vendor/fonts/Inter-Regular.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../vendor/fonts/Inter-Medium.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../vendor/fonts/Inter-Bold.woff2') format('woff2');
}

/* Custom styles for the Files app */

/* General styles */

/* Close button variación roja para el modal de subida */
#uploadModal .btn-close {
  filter: invert(19%) sepia(97%) saturate(7464%) hue-rotate(358deg) brightness(93%) contrast(120%);
}
#uploadModal .btn-close:hover {
  filter: invert(19%) sepia(97%) saturate(7464%) hue-rotate(358deg) brightness(93%) contrast(120%);
}

:root {
  --app-accent: #2f6fed;
  --bs-body-font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', 'Liberation Sans', sans-serif;
}

.bg-primary {
    --bs-bg-opacity: 1;
    background-color: rgb(143 5 74) !important;
}

.bg-secondary {
    --bs-bg-opacity: 1;
    background-color: #515a62c4 !important;
}

.breadcrumb-item.active {
    color: rgb(229 180 204);
}

a {
    color: rgb(244 224 165);
    text-decoration: underline;
}
a:hover {
    color: rgb(233, 200, 100);
    text-decoration: underline;
}

/* --- Navbar: hover y active para menú principal --- */
#app-navbar .navbar-nav.me-auto .nav-link {
  color: #495057;
  text-decoration: none;
  border-radius: .5rem;
  padding: .5rem .75rem;
}
#app-navbar .navbar-nav.me-auto .nav-link:hover {
  color: rgb(143, 5, 74);
  background-color: rgba(143, 5, 74, 0.08);
  text-decoration: none;
}
#app-navbar .navbar-nav.me-auto .nav-link.active {
  color: #ffffff;
  background-color: rgb(143, 5, 74);
  text-decoration: none;
  font-weight: 500;
}

/* Separación entre items de menú principal sin afectar el menú de usuario */
#app-navbar .navbar-nav.me-auto.nav-pills {
  gap: .5rem;
}

/* Estilo diferenciado para el menú de usuario (dropdown) */
#app-navbar #navbarDropdown.nav-link {
  color: #fff;
  background-color: #6c757d; /* gris distinto al menú principal */
  border-radius: .5rem;
  padding: .5rem .75rem;
  text-decoration: none;
}
#app-navbar #navbarDropdown.nav-link:hover {
  color: #fff;
  background-color: #5c636a; /* tono hover */
}

.breadcrumb-item+.breadcrumb-item::before {
    float: left;
    padding-right: var(--bs-breadcrumb-item-padding-x);
    color: rgb(219 229 240 / 35%);
    content: var(--bs-breadcrumb-divider, "/");
}

/***** Helpers *****/
.main-content-enter {
  animation: fade-in 180ms ease-out;
}

@keyframes fade-in {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Responsive columns for files table */
@media (max-width: 767.98px) {
  .table-responsive table th:nth-child(2),
  .table-responsive table td:nth-child(2),
  .table-responsive table th:nth-child(4),
  .table-responsive table td:nth-child(4) {
    display: none;
  }
  /* Slightly smaller text for size column on small screens */
  .table-responsive table td:nth-child(3) {
    font-size: 0.85rem;
  }
}

/* Tables hover tweaks */
.folder-row:hover, .file-row:hover { background-color: rgba(var(--bs-primary-rgb), 0.03); }

.folder-icon, .file-icon { transition: transform 0.2s ease; }
.folder-row:hover .file-icon, .file-row:hover .file-icon { transform: scale(1.15); }

/* Highlight name on hover for both folders and files */
.folder-row:hover .item-name,
.file-row:hover .item-name { 
  color: var(--bs-primary) !important; text-decoration: none !important; 
}

.btn-group > .btn {
    transition: all 0.2s ease;
    opacity: 0.85;
}

.btn-group > .btn:hover {
    opacity: 1;
    transform: translateY(-2px);
    box-shadow: 0 3px 5px rgba(0,0,0,0.1);
}
/* Estilos para mejorar la tabla de archivos */
.folder-row:hover, .file-row:hover {
  background-color: rgba(var(--bs-primary-rgb), 0.03);
}

/* --- Alertas globales mejoradas --- */
.app-alert {
  position: fixed;
  top: 72px; /* justo debajo de la navbar */
  left: 50%;
  transform: translateX(-50%);
  width: min(760px, 92vw);
  z-index: 1060; /* encima de contenido, debajo de modals */
  pointer-events: none;
}
.app-alert .alert {
  pointer-events: all;
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.08);
  padding: .75rem 1rem;
  display: flex;
  align-items: center;
  gap: .5rem;
}
.app-alert .alert::before {
  content: "";
  display: block;
  width: 4px;
  height: 100%;
  border-radius: 6px;
  margin-right: .5rem;
  background: var(--alert-accent, var(--app-accent));
}
.app-alert .alert.alert-success { --alert-accent: #25a244; }
.app-alert .alert.alert-danger { --alert-accent: #e03131; }
.app-alert .alert.alert-warning { --alert-accent: #f59f00; }
.app-alert .alert.alert-info { --alert-accent: #0ca9f2; }

.app-alert .alert.show { animation: app-alert-in 160ms ease-out; }
@keyframes app-alert-in {
  from { transform: translateY(-6px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

.folder-icon, .file-icon {
  transition: transform 0.2s ease;
}

.folder-row:hover .folder-icon, .file-row:hover .file-icon {
  transform: scale(1.15);
}

.btn-group > .btn {
  transition: all 0.2s ease;
  opacity: 0.85;
}

.btn-group > .btn:hover {
  opacity: 1;
  transform: translateY(-2px);
  box-shadow: 0 3px 5px rgba(0,0,0,0.1);
}

/* Avatar uniforme en la tabla de Usuarios */
.user-avatar {
  --avatar-size: 42px; /* tamaño fijo del avatar */
  width: var(--avatar-size);
  height: var(--avatar-size);
  min-width: var(--avatar-size);
  flex: 0 0 var(--avatar-size);
  font-weight: 600;
  font-size: calc(var(--avatar-size) / 2.2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-transform: uppercase;
  line-height: 1;
  letter-spacing: 0;
  overflow: hidden;
  transition: transform 0.2s ease;
}
.user-row:hover .user-avatar { transform: scale(1.15); }

@media (max-width: 767.98px) {
  .table-responsive table th:nth-child(2),
  .table-responsive table td:nth-child(2),
  .table-responsive table th:nth-child(4),
  .table-responsive table td:nth-child(4) {
      display: none;
  }
  
  .table-responsive table td:nth-child(3) {
      font-size: 0.85rem;
  }
}

/* Footer spacing */
footer.footer { margin-top: 1.5rem; }

/* Acciones en tablas: sin animación ni desplazamiento en hover */
.table .btn-group > .btn {
  transition: none;
  opacity: 1;
  transform: none;
  box-shadow: none;
}
.table .btn-group > .btn:hover,
.table .btn-group > .btn:focus,
.table .btn-group > .btn:active {
  transform: none;
  box-shadow: none;
}

/* Scroll agradable para la lista de archivos en el modal de subida */
#uploadModal #uploadFileList.upload-list-scroll {
  max-height: 240px; /* evita que el modal crezca demasiado */
  overflow-y: auto;
  padding-right: 6px; /* espacio para scrollbar */
  scroll-behavior: smooth;
}

/* --- Árbol de directorios para el modal Mover --- */
.move-info { color: #495057; }
.move-info .bi { color: #0b5ed7; }
.move-info strong { font-weight: 600; }

.move-tree {
  min-height: 160px;
  max-height: 300px;
  overflow-y: auto;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: .5rem;
  padding: .5rem;
  background: #fff;
}
.tree-node { display: block; }
.tree-node-header {
  display: flex;
  align-items: center;
  gap: .4rem;
}
.tree-children {
  list-style: none;
  margin: .15rem 0 .10rem 0.70rem;
  padding-left: .5rem;
  border-left: 1px dashed rgba(0,0,0,0.15);
}
.tree-toggle {
  width: 1.5rem;
  height: 1.5rem;
  border: none;
  background: transparent;
  color: #6c757d;
  cursor: pointer;
  display: inline-grid;
  place-items: center;
  line-height: normal;
  overflow: visible;
  padding: 0;
}
.tree-caret { font-size: .9rem; }
.tree-caret.bi-chevron-right, .tree-caret.bi-chevron-down { font-size: 1rem; }
.tree-select {
  border: none;
  background: transparent;
  color: #212529; /* negro */
  font-weight: 600; /* bold */
  cursor: pointer;
  padding: 0;
  text-decoration: none; /* sin subrayado */
}
.tree-select:hover {
  color: #212529;
  text-decoration: none;
  opacity: .8;
}
.tree-node.selected .tree-select {
  font-weight: 600;
  color: #198754;
  text-decoration: none;
}
.tree-folder { color: #d39e00; } /* folder cerrado */
.tree-node[data-expanded='true'] .tree-folder { color: #f59f00; } /* folder abierto */
.tree-node.selected .tree-folder { color: #198754; }

/* Resultados de filtro: lista plana sin guías laterales */
.move-tree .filter-results {
  border-left: none;
  margin: .15rem 0 .10rem 0;
  padding-left: 0;
}
.tree-crumb {
  font-size: .82rem;
  color: #6c757d;
  margin-left: 2rem; /* alinear bajo el texto de carpeta */
}
.tree-match { background-color: #fff3bf; padding: 0 .10rem; border-radius: .2rem; }

/* Estilizar scrollbar (WebKit) */
#uploadModal #uploadFileList.upload-list-scroll::-webkit-scrollbar {
  width: 8px;
}
#uploadModal #uploadFileList.upload-list-scroll::-webkit-scrollbar-track {
  background: rgba(0,0,0,0.06);
  border-radius: 8px;
}
#uploadModal #uploadFileList.upload-list-scroll::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,0.28);
  border-radius: 8px;
}
#uploadModal #uploadFileList.upload-list-scroll::-webkit-scrollbar-thumb:hover {
  background: rgba(0,0,0,0.38);
}

/* Firefox scrollbar */
#uploadModal #uploadFileList.upload-list-scroll {
  scrollbar-width: thin; /* Firefox */
  scrollbar-color: rgba(0,0,0,0.28) rgba(0,0,0,0.06);
}

@media (max-width: 576px) {
  #uploadModal #uploadFileList.upload-list-scroll { max-height: 180px; }
}

/* Animación suave para modales sin provocar conflictos de accesibilidad */
.modal-animated .modal-dialog {
  transition: transform 0.2s ease-out, opacity 0.2s ease-out;
  transform: translateY(-6px);
  opacity: 0;
}
.modal.show.modal-animated .modal-dialog {
  transform: translateY(0);
  opacity: 1;
}
/* Asegurar que los backdrops no queden residuales */
.modal-backdrop.fade.show { opacity: 0.5; transition: opacity 0.2s ease-out; }
.move-tree.is-filter .tree-children { border-left: none; padding-left: 0; margin-left: 0; }
.tree-results { list-style: none; margin: .15rem 0 0 0; padding: 0; }
.tree-result { margin: .10rem 0; }
.tree-result .tree-node-header { gap: .6rem; }
.tree-select .tree-path { color: #6c757d; font-weight: 400; margin-left: .5rem; }
.tree-empty { color: #6c757d; font-style: italic; padding: .25rem .25rem; }
/* Scroll agradable para move-tree */
.move-tree::-webkit-scrollbar { width: 8px; }
.move-tree::-webkit-scrollbar-track { background: rgba(0,0,0,0.06); border-radius: 8px; }
.move-tree::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.28); border-radius: 8px; }
.move-tree::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,0.38); }

/* Firefox */
.move-tree { scrollbar-width: thin; scrollbar-color: rgba(0,0,0,0.28) rgba(0,0,0,0.06); }

/* --- Dropdown de Búsqueda Global --- */
.global-search-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  width: 100%;
  max-height: 360px;
  overflow-y: auto;
  background: rgba(248, 249, 252, 0.98); /* fondo opaco y distinto */
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: .5rem;
  box-shadow: 0 12px 24px rgba(0,0,0,0.16);
  z-index: 1060;
  display: none;
}
.global-search-dropdown.show { display: block; }
.global-search-item {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  align-items: center;
  gap: .5rem;
  padding: .6rem .80rem;
  cursor: pointer;
  border-bottom: 1px solid rgba(0,0,0,0.06); /* separar filas */
}
.global-search-item:last-child { border-bottom: none; }
.global-search-item:nth-child(odd) { background: rgba(0,0,0,0.012); }
.global-search-item:hover, .global-search-item.active {
  background: rgba(0,0,0,0.04);
}
.gs-left { font-size: 1rem; display: flex; align-items: center; justify-content: center; }
.gs-icon { font-size: 1.35rem; } /* íconos ligeramente más grandes */
.gs-main .gs-title { font-weight: 600; }
.gs-main .gs-sub { font-size: .82rem; color: #6c757d; }
.gs-right .badge { font-size: .70rem; }
.global-search-empty, .global-search-loading { padding: .5rem .75rem; color: #6c757d; }

/* Scrollbar del dropdown (WebKit) */
.global-search-dropdown::-webkit-scrollbar { width: 8px; }
.global-search-dropdown::-webkit-scrollbar-track { background: rgba(0,0,0,0.06); border-radius: 8px; }
.global-search-dropdown::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.28); border-radius: 8px; }
.global-search-dropdown::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,0.38); }

/* Navbar: quitar subrayado en enlaces del header */
#app-navbar a,
#app-navbar .nav-link,
#app-navbar .navbar-brand,
#app-navbar .dropdown-item {
  text-decoration: none;
}
#app-navbar a:hover,
#app-navbar .nav-link:hover,
#app-navbar .navbar-brand:hover,
#app-navbar .dropdown-item:hover {
  text-decoration: none;
}

/* --- Drive status badge (navbar) --- */
.drive-status-badge {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  border-radius: 8px;
  padding: .25rem .6rem;
  font-size: .9rem;
  line-height: 1;
  height: 40px; /* igual al alto del botón de usuario */
  box-sizing: border-box;
  opacity: .95;
  transition: opacity .2s ease, transform .2s ease, background-color .2s ease, border-color .2s ease;
}
.drive-status-badge:hover { opacity: 1; }
.drive-status-badge .drive-icon { font-size: 1rem; }

/* Estados */
.drive-status-badge.connected {
  background-color: rgba(25, 135, 84, 0.12);
  color: #0f5132;
  border: 1px solid rgba(25, 135, 84, 0.35);
}
.drive-status-badge.local {
  background-color: rgba(108, 117, 125, 0.12);
  color: #41464b;
  border: 1px solid rgba(108, 117, 125, 0.35);
}

/* Animación sutil para "conectado" */
.drive-status-badge.connected .drive-icon { animation: drive-pulse 1.6s ease-in-out infinite; }
@keyframes drive-pulse {
  0% { transform: scale(1); opacity: .9; }
  50% { transform: scale(1.08); opacity: 1; }
  100% { transform: scale(1); opacity: .9; }
}

/* Global Progress Bar */
.global-progress {
     position: absolute;
     bottom: -1px;
     left: 0;
     right: 0;
     height: 6px;
     z-index: 1050;
     margin: 0;
     border-radius: 0;
     overflow: visible;
     opacity: 0;
     transform: translateY(2px);
     transition: opacity 300ms ease, transform 300ms ease;
 }
 
 .files-container .card-header { position: relative; overflow: visible; }
 
 .global-progress.show {
     opacity: 1;
     transform: translateY(0);
 }
 
 .global-progress .progress-bar {
     transition: width 240ms ease;
     position: relative;
     border-radius: 0;
 }
 
 .global-progress .progress-label {
     position: absolute;
     right: 8px;
     top: 6px;
     font-size: .7rem;
     font-weight: 600;
     color: #212529;
     background: rgba(255, 255, 255, 0.212);
     padding: 2px 6px;
     border-radius: 3px;
     white-space: nowrap;
     box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
 }
 
 .global-progress.error .progress-bar {
     background-color: #dc3545 !important;
 }

.global-progress.complete .progress-bar {
    background-color: #198754 !important;
    background: rgba(255, 255, 255, 0.212);
}

/* Overlay de carga global */
.page-overlay {
  position: fixed;
  inset: 0;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(2px);
  z-index: 1100; /* por encima del contenido y barra */
  display: flex;
  align-items: center;
  justify-content: center;
}
.page-overlay .overlay-inner {
  display: inline-flex;
  align-items: center;
  padding: 1rem 1.25rem;
  border-radius: 12px;
  background: rgba(255,255,255,0.9);
  box-shadow: 0 8px 24px rgba(0,0,0,0.08);
}
.page-overlay .overlay-text {
  font-weight: 600;
  color: #0d6efd;
}

/* Overlay dentro del card de archivos */
.files-container, #files-container {
  position: relative; /* necesario para overlay absoluto */
}
.card-preview { position: relative; }
.files-overlay, .card-preview .files-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.85);
  border-radius: inherit; /* respeta el borde del card */
  z-index: 10;
}
.files-overlay .overlay-inner {
  display: inline-flex;
  align-items: center;
  padding: 0.75rem 1rem;
  border-radius: 10px;
  background: rgba(255,255,255,0.95);
  box-shadow: 0 6px 18px rgba(0,0,0,0.06);
}
.files-overlay .overlay-text {
  font-weight: 600;
  color: #0d6efd;
}

/* Altura mínima para skeleton del contenedor de archivos */
.files-container.skeleton {
  min-height: 280px;
}

.global-progress.error .progress-label {
    background: rgba(220, 53, 69, 0.1);
    color: #dc3545;
}

.global-progress.complete .progress-label {
    background: rgba(25, 135, 84, 0.1);
    color: #198754;
}

/* Dark mode adjustments */
[data-bs-theme="dark"] .global-progress .progress-label {
    color: #f8f9fa;
    background: rgba(33, 37, 41, 0.185);
}

[data-bs-theme="dark"] .global-progress.error .progress-label {
    background: rgba(220, 53, 69, 0.2);
    color: #f5c2c7;
}

[data-bs-theme="dark"] .global-progress.complete .progress-label {
    background: rgba(25, 135, 84, 0.2);
    color: #a3cfbb;
}

/* Contenedor padre para la barra de progreso */
.files-container {
    position: relative;
    overflow: visible; /* no recorta contenido, permite ver esquinas redondeadas */
}

/* Bordes redondeados visibles en tarjeta y encabezado */
.card {
    border-radius: .5rem; /* ~8px */
}
.card .card-header {
    border-top-left-radius: .5rem;
    border-top-right-radius: .5rem;
}

/* Mejora visual del spinner en el botón del árbol */
.move-tree .tree-toggle .spinner-border {
  display: block;
  width: 14px;
  height: 14px;
  min-width: 14px;
  min-height: 14px;
  aspect-ratio: 1 / 1;
  border-width: 2px;
  border-radius: 50%;
  box-sizing: border-box;
  margin: 0;
}
.tree-caret { font-size: .9rem; }
.tree-caret.bi-chevron-right, .tree-caret.bi-chevron-down { font-size: 1rem; }
.tree-select {
  border: none;
  background: transparent;
  color: #212529; /* negro */
  font-weight: 600; /* bold */
  cursor: pointer;
  padding: 0;
  text-decoration: none; /* sin subrayado */
}
.tree-select:hover {
  color: #212529;
  text-decoration: none;
  opacity: .8;
}
.tree-node.selected .tree-select {
  font-weight: 600;
  color: #198754;
  text-decoration: none;
}
.tree-folder { color: #d39e00; } /* folder cerrado */
.tree-node[data-expanded='true'] .tree-folder { color: #f59f00; } /* folder abierto */
.tree-node.selected .tree-folder { color: #198754; }

/* Resultados de filtro: lista plana sin guías laterales */
.move-tree .filter-results {
  border-left: none;
  margin: .15rem 0 .10rem 0;
  padding-left: 0;
}
.tree-crumb {
  font-size: .82rem;
  color: #6c757d;
  margin-left: 2rem; /* alinear bajo el texto de carpeta */
}
.tree-match { background-color: #fff3bf; padding: 0 .10rem; border-radius: .2rem; }

/* Estilizar scrollbar (WebKit) */
#uploadModal #uploadFileList.upload-list-scroll::-webkit-scrollbar {
  width: 8px;
}
#uploadModal #uploadFileList.upload-list-scroll::-webkit-scrollbar-track {
  background: rgba(0,0,0,0.06);
  border-radius: 8px;
}
#uploadModal #uploadFileList.upload-list-scroll::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,0.28);
  border-radius: 8px;
}
#uploadModal #uploadFileList.upload-list-scroll::-webkit-scrollbar-thumb:hover {
  background: rgba(0,0,0,0.38);
}

/* Firefox scrollbar */
#uploadModal #uploadFileList.upload-list-scroll {
  scrollbar-width: thin; /* Firefox */
  scrollbar-color: rgba(0,0,0,0.28) rgba(0,0,0,0.06);
}

@media (max-width: 576px) {
  #uploadModal #uploadFileList.upload-list-scroll { max-height: 180px; }
}

/* Animación suave para modales sin provocar conflictos de accesibilidad */
.modal-animated .modal-dialog {
  transition: transform 0.2s ease-out, opacity 0.2s ease-out;
  transform: translateY(-6px);
  opacity: 0;
}
.modal.show.modal-animated .modal-dialog {
  transform: translateY(0);
  opacity: 1;
}
/* Asegurar que los backdrops no queden residuales */
.modal-backdrop.fade.show { opacity: 0.5; transition: opacity 0.2s ease-out; }
.move-tree.is-filter .tree-children { border-left: none; padding-left: 0; margin-left: 0; }
.tree-results { list-style: none; margin: .15rem 0 0 0; padding: 0; }
.tree-result { margin: .10rem 0; }
.tree-result .tree-node-header { gap: .6rem; }
.tree-select .tree-path { color: #6c757d; font-weight: 400; margin-left: .5rem; }
.tree-empty { color: #6c757d; font-style: italic; padding: .25rem .25rem; }
/* Scroll agradable para move-tree */
.move-tree::-webkit-scrollbar { width: 8px; }
.move-tree::-webkit-scrollbar-track { background: rgba(0,0,0,0.06); border-radius: 8px; }
.move-tree::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.28); border-radius: 8px; }
.move-tree::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,0.38); }

/* Firefox */
.move-tree { scrollbar-width: thin; scrollbar-color: rgba(0,0,0,0.28) rgba(0,0,0,0.06); }

/* --- Dropdown de Búsqueda Global --- */
.global-search-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  width: 100%;
  max-height: 360px;
  overflow-y: auto;
  background: rgba(248, 249, 252, 0.98); /* fondo opaco y distinto */
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: .5rem;
  box-shadow: 0 12px 24px rgba(0,0,0,0.16);
  z-index: 1060;
  display: none;
}
.global-search-dropdown.show { display: block; }
.global-search-item {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  align-items: center;
  gap: .5rem;
  padding: .6rem .80rem;
  cursor: pointer;
  border-bottom: 1px solid rgba(0,0,0,0.06); /* separar filas */
}
.global-search-item:last-child { border-bottom: none; }
.global-search-item:nth-child(odd) { background: rgba(0,0,0,0.012); }
.global-search-item:hover, .global-search-item.active {
  background: rgba(0,0,0,0.04);
}
.gs-left { font-size: 1rem; display: flex; align-items: center; justify-content: center; }
.gs-icon { font-size: 1.35rem; } /* íconos ligeramente más grandes */
.gs-main .gs-title { font-weight: 600; }
.gs-main .gs-sub { font-size: .82rem; color: #6c757d; }
.gs-right .badge { font-size: .70rem; }
.global-search-empty, .global-search-loading { padding: .5rem .75rem; color: #6c757d; }

/* Scrollbar del dropdown (WebKit) */
.global-search-dropdown::-webkit-scrollbar { width: 8px; }
.global-search-dropdown::-webkit-scrollbar-track { background: rgba(0,0,0,0.06); border-radius: 8px; }
.global-search-dropdown::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.28); border-radius: 8px; }
.global-search-dropdown::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,0.38); }

/* Navbar: quitar subrayado en enlaces del header */
#app-navbar a,
#app-navbar .nav-link,
#app-navbar .navbar-brand,
#app-navbar .dropdown-item {
  text-decoration: none;
}
#app-navbar a:hover,
#app-navbar .nav-link:hover,
#app-navbar .navbar-brand:hover,
#app-navbar .dropdown-item:hover {
  text-decoration: none;
}

/* --- Drive status badge (navbar) --- */
.drive-status-badge {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  border-radius: 8px;
  padding: .25rem .6rem;
  font-size: .9rem;
  line-height: 1;
  height: 40px; /* igual al alto del botón de usuario */
  box-sizing: border-box;
  opacity: .95;
  transition: opacity .2s ease, transform .2s ease, background-color .2s ease, border-color .2s ease;
}
.drive-status-badge:hover { opacity: 1; }
.drive-status-badge .drive-icon { font-size: 1rem; }

/* Estados */
.drive-status-badge.connected {
  background-color: rgba(25, 135, 84, 0.12);
  color: #0f5132;
  border: 1px solid rgba(25, 135, 84, 0.35);
}
.drive-status-badge.local {
  background-color: rgba(108, 117, 125, 0.12);
  color: #41464b;
  border: 1px solid rgba(108, 117, 125, 0.35);
}

/* Animación sutil para "conectado" */
.drive-status-badge.connected .drive-icon { animation: drive-pulse 1.6s ease-in-out infinite; }
@keyframes drive-pulse {
  0% { transform: scale(1); opacity: .9; }
  50% { transform: scale(1.08); opacity: 1; }
  100% { transform: scale(1); opacity: .9; }
}

/* Global Progress Bar */
.global-progress {
     position: absolute;
     bottom: -1px;
     left: 0;
     right: 0;
     height: 6px;
     z-index: 1050;
     margin: 0;
     border-radius: 0;
     overflow: visible;
     opacity: 0;
     transform: translateY(2px);
     transition: opacity 300ms ease, transform 300ms ease;
 }
 
 .files-container .card-header { position: relative; overflow: visible; }
 
 .global-progress.show {
     opacity: 1;
     transform: translateY(0);
 }
 
 .global-progress .progress-bar {
     transition: width 240ms ease;
     position: relative;
     border-radius: 0;
 }
 
 .global-progress .progress-label {
     position: absolute;
     right: 8px;
     top: 6px;
     font-size: .7rem;
     font-weight: 600;
     color: #212529;
     background: rgba(255, 255, 255, 0.212);
     padding: 2px 6px;
     border-radius: 3px;
     white-space: nowrap;
     box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
 }
 
 .global-progress.error .progress-bar {
     background-color: #dc3545 !important;
 }

.global-progress.complete .progress-bar {
    background-color: #198754 !important;
    background: rgba(255, 255, 255, 0.212);
}

.global-progress.error .progress-label {
    background: rgba(220, 53, 69, 0.1);
    color: #dc3545;
}

.global-progress.complete .progress-label {
    background: rgba(25, 135, 84, 0.1);
    color: #198754;
}

/* Dark mode adjustments */
[data-bs-theme="dark"] .global-progress .progress-label {
    color: #f8f9fa;
    background: rgba(33, 37, 41, 0.185);
}

[data-bs-theme="dark"] .global-progress.error .progress-label {
    background: rgba(220, 53, 69, 0.2);
    color: #f5c2c7;
}

[data-bs-theme="dark"] .global-progress.complete .progress-label {
    background: rgba(25, 135, 84, 0.2);
    color: #a3cfbb;
}

/* Contenedor padre para la barra de progreso */
.files-container {
    position: relative;
    overflow: visible; /* no recorta contenido, permite ver esquinas redondeadas */
}

/* Bordes redondeados visibles en tarjeta y encabezado */
.card {
    border-radius: .5rem; /* ~8px */
}
.card .card-header {
    border-top-left-radius: .5rem;
    border-top-right-radius: .5rem;
}

/* Mejora visual del spinner en el botón del árbol */
.move-tree .tree-toggle .spinner-border {
  display: block;
  width: 14px;
  height: 14px;
  min-width: 14px;
  min-height: 14px;
  aspect-ratio: 1 / 1;
  border-width: 2px;
  border-radius: 50%;
  box-sizing: border-box;
  margin: 0;
}
.tree-caret { font-size: .9rem; }
.tree-caret.bi-chevron-right, .tree-caret.bi-chevron-down { font-size: 1rem; }
.tree-select {
  border: none;
  background: transparent;
  color: #212529; /* negro */
  font-weight: 600; /* bold */
  cursor: pointer;
  padding: 0;
  text-decoration: none; /* sin subrayado */
}
.tree-select:hover {
  color: #212529;
  text-decoration: none;
  opacity: .8;
}
.tree-node.selected .tree-select {
  font-weight: 600;
  color: #198754;
  text-decoration: none;
}
.tree-folder { color: #d39e00; } /* folder cerrado */
.tree-node[data-expanded='true'] .tree-folder { color: #f59f00; } /* folder abierto */
.tree-node.selected .tree-folder { color: #198754; }

/* Resultados de filtro: lista plana sin guías laterales */
.move-tree .filter-results {
  border-left: none;
  margin: .15rem 0 .10rem 0;
  padding-left: 0;
}
.tree-crumb {
  font-size: .82rem;
  color: #6c757d;
  margin-left: 2rem; /* alinear bajo el texto de carpeta */
}
.tree-match { background-color: #fff3bf; padding: 0 .10rem; border-radius: .2rem; }

/* Estilizar scrollbar (WebKit) */
#uploadModal #uploadFileList.upload-list-scroll::-webkit-scrollbar {
  width: 8px;
}
#uploadModal #uploadFileList.upload-list-scroll::-webkit-scrollbar-track {
  background: rgba(0,0,0,0.06);
  border-radius: 8px;
}
#uploadModal #uploadFileList.upload-list-scroll::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,0.28);
  border-radius: 8px;
}
#uploadModal #uploadFileList.upload-list-scroll::-webkit-scrollbar-thumb:hover {
  background: rgba(0,0,0,0.38);
}

/* Firefox scrollbar */
#uploadModal #uploadFileList.upload-list-scroll {
  scrollbar-width: thin; /* Firefox */
  scrollbar-color: rgba(0,0,0,0.28) rgba(0,0,0,0.06);
}

@media (max-width: 576px) {
  #uploadModal #uploadFileList.upload-list-scroll { max-height: 180px; }
}

/* Animación suave para modales sin provocar conflictos de accesibilidad */
.modal-animated .modal-dialog {
  transition: transform 0.2s ease-out, opacity 0.2s ease-out;
  transform: translateY(-6px);
  opacity: 0;
}
.modal.show.modal-animated .modal-dialog {
  transform: translateY(0);
  opacity: 1;
}
/* Asegurar que los backdrops no queden residuales */
.modal-backdrop.fade.show { opacity: 0.5; transition: opacity 0.2s ease-out; }
.move-tree.is-filter .tree-children { border-left: none; padding-left: 0; margin-left: 0; }
.tree-results { list-style: none; margin: .15rem 0 0 0; padding: 0; }
.tree-result { margin: .10rem 0; }
.tree-result .tree-node-header { gap: .6rem; }
.tree-select .tree-path { color: #6c757d; font-weight: 400; margin-left: .5rem; }
.tree-empty { color: #6c757d; font-style: italic; padding: .25rem .25rem; }
/* Scroll agradable para move-tree */
.move-tree::-webkit-scrollbar { width: 8px; }
.move-tree::-webkit-scrollbar-track { background: rgba(0,0,0,0.06); border-radius: 8px; }
.move-tree::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.28); border-radius: 8px; }
.move-tree::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,0.38); }

/* Firefox */
.move-tree { scrollbar-width: thin; scrollbar-color: rgba(0,0,0,0.28) rgba(0,0,0,0.06); }

/* --- Dropdown de Búsqueda Global --- */
.global-search-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  width: 100%;
  max-height: 360px;
  overflow-y: auto;
  background: rgba(248, 249, 252, 0.98); /* fondo opaco y distinto */
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: .5rem;
  box-shadow: 0 12px 24px rgba(0,0,0,0.16);
  z-index: 1060;
  display: none;
}
.global-search-dropdown.show { display: block; }
.global-search-item {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  align-items: center;
  gap: .5rem;
  padding: .6rem .80rem;
  cursor: pointer;
  border-bottom: 1px solid rgba(0,0,0,0.06); /* separar filas */
}
.global-search-item:last-child { border-bottom: none; }
.global-search-item:nth-child(odd) { background: rgba(0,0,0,0.012); }
.global-search-item:hover, .global-search-item.active {
  background: rgba(0,0,0,0.04);
}
.gs-left { font-size: 1rem; display: flex; align-items: center; justify-content: center; }
.gs-icon { font-size: 1.35rem; } /* íconos ligeramente más grandes */
.gs-main .gs-title { font-weight: 600; }
.gs-main .gs-sub { font-size: .82rem; color: #6c757d; }
.gs-right .badge { font-size: .70rem; }
.global-search-empty, .global-search-loading { padding: .5rem .75rem; color: #6c757d; }

/* Scrollbar del dropdown (WebKit) */
.global-search-dropdown::-webkit-scrollbar { width: 8px; }
.global-search-dropdown::-webkit-scrollbar-track { background: rgba(0,0,0,0.06); border-radius: 8px; }
.global-search-dropdown::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.28); border-radius: 8px; }
.global-search-dropdown::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,0.38); }

/* Navbar: quitar subrayado en enlaces del header */
#app-navbar a,
#app-navbar .nav-link,
#app-navbar .navbar-brand,
#app-navbar .dropdown-item {
  text-decoration: none;
}
#app-navbar a:hover,
#app-navbar .nav-link:hover,
#app-navbar .navbar-brand:hover,
#app-navbar .dropdown-item:hover {
  text-decoration: none;
}

/* --- Drive status badge (navbar) --- */
.drive-status-badge {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  border-radius: 8px;
  padding: .25rem .6rem;
  font-size: .9rem;
  line-height: 1;
  height: 40px; /* igual al alto del botón de usuario */
  box-sizing: border-box;
  opacity: .95;
  transition: opacity .2s ease, transform .2s ease, background-color .2s ease, border-color .2s ease;
}
.drive-status-badge:hover { opacity: 1; }
.drive-status-badge .drive-icon { font-size: 1rem; }

/* Estados */
.drive-status-badge.connected {
  background-color: rgba(25, 135, 84, 0.12);
  color: #0f5132;
  border: 1px solid rgba(25, 135, 84, 0.35);
}
.drive-status-badge.local {
  background-color: rgba(108, 117, 125, 0.12);
  color: #41464b;
  border: 1px solid rgba(108, 117, 125, 0.35);
}

/* Animación sutil para "conectado" */
.drive-status-badge.connected .drive-icon { animation: drive-pulse 1.6s ease-in-out infinite; }
@keyframes drive-pulse {
  0% { transform: scale(1); opacity: .9; }
  50% { transform: scale(1.08); opacity: 1; }
  100% { transform: scale(1); opacity: .9; }
}

/* Global Progress Bar */
.global-progress {
     position: absolute;
     bottom: -1px;
     left: 0;
     right: 0;
     height: 6px;
     z-index: 1050;
     margin: 0;
     border-radius: 0;
     overflow: visible;
     opacity: 0;
     transform: translateY(2px);
     transition: opacity 300ms ease, transform 300ms ease;
 }
 
 .files-container .card-header { position: relative; overflow: visible; }
 
 .global-progress.show {
     opacity: 1;
     transform: translateY(0);
 }
 
 .global-progress .progress-bar {
     transition: width 240ms ease;
     position: relative;
     border-radius: 0;
 }
 
 .global-progress .progress-label {
     position: absolute;
     right: 8px;
     top: 6px;
     font-size: .7rem;
     font-weight: 600;
     color: #212529;
     background: rgba(255, 255, 255, 0.212);
     padding: 2px 6px;
     border-radius: 3px;
     white-space: nowrap;
     box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
 }
 
 .global-progress.error .progress-bar {
     background-color: #dc3545 !important;
 }

.global-progress.complete .progress-bar {
    background-color: #198754 !important;
    background: rgba(255, 255, 255, 0.212);
}

.global-progress.error .progress-label {
    background: rgba(220, 53, 69, 0.1);
    color: #dc3545;
}

.global-progress.complete .progress-label {
    background: rgba(25, 135, 84, 0.1);
    color: #198754;
}

/* Dark mode adjustments */
[data-bs-theme="dark"] .global-progress .progress-label {
    color: #f8f9fa;
    background: rgba(33, 37, 41, 0.185);
}

[data-bs-theme="dark"] .global-progress.error .progress-label {
    background: rgba(220, 53, 69, 0.2);
    color: #f5c2c7;
}

[data-bs-theme="dark"] .global-progress.complete .progress-label {
    background: rgba(25, 135, 84, 0.2);
    color: #a3cfbb;
}

/* Contenedor padre para la barra de progreso */
.files-container {
    position: relative;
    overflow: visible; /* no recorta contenido, permite ver esquinas redondeadas */
}

/* Bordes redondeados visibles en tarjeta y encabezado */
.card {
    border-radius: .5rem; /* ~8px */
}
.card .card-header {
    border-top-left-radius: .5rem;
    border-top-right-radius: .5rem;
}

/* Mejora visual del spinner en el botón del árbol */
.move-tree .tree-toggle .spinner-border {
  width: 1rem;
  height: 1rem;
  aspect-ratio: 1 / 1;
  border-width: .15rem;
  margin: 0;
}

/* Preview header layout: actions bottom, breadcrumb top, alternating row backgrounds */
.preview-header-row {
  padding: .5rem .75rem;
  border-radius: .35rem;
}
.preview-header-row--breadcrumb {
  /*background-color: rgba(255,255,255,0.08);  claro sobre encabezado oscuro */
  border-bottom: 1px solid rgba(255, 255, 255, 0.10);
    padding: 0 10px 5px;
    margin-bottom: 10px;
    font-size: smaller;
}
.preview-header-row--actions {
  /*background-color: rgba(0,0,0,0.12);  ligeramente más oscuro */
  /* border: 1px solid rgba(0,0,0,0.18); */
  padding: 0;
}

.preview-header-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;
}
.btn-preview {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 180px;
}

/* Accesibilidad: asegurar contraste en breadcrumb dentro de header oscuro */
.preview-breadcrumb .breadcrumb-item,
.preview-breadcrumb .breadcrumb-item a { color: #e9ecef; }
.preview-breadcrumb .breadcrumb-item.active { color: #f8d7e2; }

@media (max-width: 576px) {
  .btn-preview { min-width: 140px; }
}
@media (max-width: 400px) {
  .btn-preview { min-width: 120px; font-size: 0.9rem; padding: 0.375rem 0.5rem; }
}