/* ================================
   1. Drive (Gestor de archivos)
   ================================ */

/* ----------------
   Contenedor principal
   ---------------- */
.drive-container { /* Contenedor principal del gestor de archivos */
  background: transparent; /* Fondo transparente para heredar el tema */
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; /* Fuente del sistema para mejor legibilidad */
  height: 100%; /* Ocupa toda la altura de su contenedor padre */
  display: flex; /* Usa Flexbox para alinear elementos internos */
  flex-direction: column; /* Organiza el contenido en una columna */
  overflow: hidden; /* Oculta cualquier desbordamiento para evitar scroll doble */
  position: relative; /* Necesario para posicionar elementos absolutos internos (ej. loading) */
}

/* ----------------
   Header (fijo en la parte superior)
   ---------------- */
.drive-header { /* Cabecera fija del gestor de archivos */
  position: fixed; /* Se fija en la parte superior de la ventana */
  top: 0; /* Alineado al borde superior */
  left: 0; /* Alineado al borde izquierdo */
  right: 0; /* Alineado al borde derecho */
  display: flex; /* Flexbox para organizar sus hijos */
  justify-content: space-between; /* Espacio entre los grupos izquierdo, centro y derecho */
  align-items: center; /* Centra verticalmente los elementos */
  padding: 12px 16px; /* Espaciado interno */
  background: var(--drive-bg); /* Fondo basado en la variable del tema (claro/oscuro) */
  border-bottom: 1px solid var(--drive-border); /* Línea divisoria inferior con color de tema */
  flex-wrap: wrap; /* Permite que los elementos se envuelvan en pantallas pequeñas */
  gap: 12px; /* Espacio entre los elementos cuando se envuelven */
  flex-shrink: 0; /* Evita que el header se encoja */
  z-index: 11; /* Asegura que esté por encima del área de archivos (z-index base 10) */
}

/* Lado izquierdo del header (Logo y estadísticas) */
.drive-header-left { /* Grupo izquierdo de la cabecera */
  display: flex; /* Flexbox para alinear horizontalmente */
  align-items: center; /* Centra verticalmente */
  gap: 16px; /* Espacio entre el logo y las stats */
  flex-wrap: wrap; /* Permite que se envuelva en móviles */
}

/* Logo y título del drive */
.drive-logo { /* Contenedor del logo y título */
  display: flex; /* Flexbox para alinear ícono y título */
  align-items: center; /* Centrado vertical */
  gap: 8px; /* Espacio entre el ícono y el texto */
}

.drive-logo i { /* Estilo para el ícono del logo */
  font-size: 20px; /* Tamaño del ícono */
  color: var(--drive-primary); /* Color principal del tema */
}

.drive-logo h3 { /* Estilo para el título del logo */
  margin: 0; /* Elimina el margen por defecto */
  font-size: 1rem; /* Tamaño de fuente */
  font-weight: 600; /* Seminegrita */
  color: var(--drive-text); /* Color de texto principal del tema */
}

/* Estadísticas (ej. número de archivos) */
.drive-stats { /* Contenedor de las estadísticas */
  display: flex; /* Flexbox para alinear las stats */
  gap: 8px; /* Espacio entre cada badge de estadística */
}

.stats-badge { /* Estilo para cada badge de estadística */
  display: inline-flex; /* Se comporta como inline pero con propiedades flex */
  align-items: center; /* Centra verticalmente el ícono y el texto */
  gap: 6px; /* Espacio entre el ícono y el número */
  padding: 4px 10px; /* Espaciado interno */
  background: var(--drive-primary-light); /* Fondo ligero del color principal */
  border-radius: 16px; /* Bordes redondeados */
  font-size: 0.75rem; /* Tamaño de fuente pequeño */
  font-weight: 500; /* Grosor de fuente */
  color: var(--drive-primary); /* Texto de color principal */
}

/* Centro del header (Búsqueda) */
.drive-header-center { /* Grupo central de la cabecera */
  display: flex; /* Flexbox para alinear la búsqueda */
  align-items: center; /* Centra verticalmente */
  gap: 12px; /* Espacio entre elementos (ej. botón de ordenar y caja de búsqueda) */
  flex: 1; /* Ocupa el espacio disponible para empujar los otros grupos */
  justify-content: center; /* Centra su contenido horizontalmente */
}

/* Lado derecho del header (Botones de acción y vista) */
.drive-header-right { /* Grupo derecho de la cabecera */
  display: flex; /* Flexbox para alinear botones */
  align-items: center; /* Centra verticalmente */
  gap: 8px; /* Espacio entre botones */
  flex-wrap: wrap; /* Permite envolver en móviles */
}

/* Botones de vista (Grid/Lista) */
.view-buttons { /* Contenedor de los botones para cambiar la vista */
  display: flex; /* Flexbox para alinear los botones */
  gap: 4px; /* Pequeño espacio entre botones */
  margin-left: 4px; /* Margen izquierdo para separar de otros elementos */
}

/* ----------------
   Botones de herramienta (Tool Buttons)
   ---------------- */
.btn-tool { /* Estilo base para botones de herramientas (ej. Subir, Nueva Carpeta) */
  display: inline-flex; /* Se muestra como inline-flex */
  align-items: center; /* Centra verticalmente ícono y texto */
  gap: 6px; /* Espacio entre ícono y texto */
  padding: 6px 12px; /* Espaciado interno */
  border-radius: 20px; /* Bordes redondeados tipo píldora */
  font-size: 0.75rem; /* Tamaño de fuente pequeño */
  font-weight: 500; /* Seminegrita */
  cursor: pointer; /* Cursor tipo mano para indicar que es clickeable */
  transition: var(--drive-transition); /* Transición suave definida en variables */
  background: transparent; /* Fondo transparente por defecto */
  border: 1px solid var(--drive-border); /* Borde sólido con color del tema */
  color: var(--drive-text); /* Color de texto del tema */
}

.btn-tool:hover { /* Estilo al pasar el ratón por encima */
  border-color: var(--drive-primary); /* El borde toma el color principal */
  background: var(--drive-primary-light); /* Fondo se vuelve la versión clara del color primario */
  color: var(--drive-primary); /* Texto toma el color principal */
}

.btn-tool.danger { /* Modificador para botones de peligro (ej. Eliminar) */
  color: var(--drive-danger); /* Texto de color de peligro */
}

.btn-tool.danger:hover { /* Hover para botones de peligro */
  background: rgba(239, 68, 68, 0.1); /* Fondo rojo con opacidad */
  border-color: var(--drive-danger); /* Borde del color de peligro */
}

.btn-tool.primary { /* Modificador para botones primarios (ej. Subir principal) */
  background: var(--drive-primary); /* Fondo del color principal */
  border-color: var(--drive-primary); /* Borde del color principal */
  color: white; /* Texto blanco */
}

.btn-tool.primary:hover { /* Hover para botones primarios */
  background: var(--drive-primary-dark); /* Fondo se oscurece con la variable */
}

/* Botones de vista (Grid/Lista específicos) */
.drive-view-btn { /* Estilo para los botones que cambian entre vista grid y lista */
  width: 32px; /* Ancho fijo */
  height: 32px; /* Alto fijo */
  display: flex; /* Flexbox para centrar el ícono */
  align-items: center; /* Centrado vertical */
  justify-content: center; /* Centrado horizontal */
  border: 1px solid var(--drive-border); /* Borde del tema */
  background: transparent; /* Fondo transparente */
  border-radius: var(--drive-radius-sm); /* Radio de borde pequeño (ej. 8px) */
  cursor: pointer; /* Puntero para indicar click */
  transition: var(--drive-transition); /* Transición suave */
  color: var(--drive-text-light); /* Color de texto secundario del tema */
}

.drive-view-btn:hover,
.drive-view-btn.active { /* Estilo común para hover y el botón activo (vista actual) */
  background: var(--drive-primary); /* Fondo color principal */
  border-color: var(--drive-primary); /* Borde color principal */
  color: white; /* Texto blanco para contraste */
}

/* Contador de selección */
.selected-count { /* Badge que muestra cuántos archivos están seleccionados */
  background: var(--drive-danger); /* Fondo rojo de peligro */
  color: white; /* Texto blanco */
  border-radius: 10px; /* Bordes redondeados */
  padding: 1px 5px; /* Espaciado interno pequeño */
  font-size: 0.7rem; /* Fuente pequeña */
  margin-left: 4px; /* Margen izquierdo para separar del texto del botón "Seleccionar" */
}

/* ----------------
   Caja de búsqueda (Search Box)
   ---------------- */
.search-box { /* Contenedor del campo de búsqueda */
  position: relative; /* Necesario para posicionar los íconos internos de forma absoluta */
  display: inline-flex; /* Se muestra como inline-flex */
  align-items: center; /* Centra verticalmente los elementos absolutos */
}

.search-box .search-icon { /* Ícono de lupa dentro del buscador */
  position: absolute; /* Posición absoluta respecto a .search-box */
  left: 14px; /* Separado del borde izquierdo */
  color: #9ca3af; /* Color gris estándar para el ícono */
  font-size: 14px; /* Tamaño del ícono */
  pointer-events: none; /* Evita que el ícono interfiera con clics en el input */
  z-index: 1; /* Asegura que esté por encima del input */
}

.search-box .drive-search { /* Campo de texto para la búsqueda */
  padding: 6px 32px 6px 38px; /* Padding: arriba/abajo, derecha, izquierda (espacio para íconos) */
  border: 1px solid var(--drive-border); /* Borde del tema */
  border-radius: 50px; /* Bordes muy redondeados (tipo píldora) */
  font-size: 12px; /* Tamaño de fuente */
  width: 220px; /* Ancho fijo, responsivo en media queries */
  transition: all 0.2s ease; /* Transición suave para el foco */
  background-color: transparent; /* Fondo transparente para heredar del padre */
  outline: none; /* Elimina el contorno por defecto al hacer foco */
  color: var(--drive-text); /* Color de texto del tema */
}

.search-box .drive-search:focus { /* Estilo del input de búsqueda cuando recibe foco */
  border-color: var(--drive-primary); /* Borde se vuelve del color principal */
  box-shadow: 0 0 0 2px var(--drive-primary-light); /* Sombra exterior suave color primario */
}

.search-box .clear-search { /* Botón para limpiar el texto de búsqueda */
  position: absolute; /* Posicionado absolutamente a la derecha */
  right: 8px; /* Separado del borde derecho */
  background: none; /* Sin fondo */
  border: none; /* Sin borde */
  color: #9ca3af; /* Color gris */
  cursor: pointer; /* Puntero */
  padding: 4px; /* Padding para hacer clickeable */
  display: flex; /* Flexbox para centrar el ícono */
  align-items: center;
  justify-content: center;
  border-radius: 50%; /* Redondo */
  width: 24px; /* Ancho fijo */
  height: 24px; /* Alto fijo */
}

.search-box .clear-search:hover { /* Hover del botón de limpiar */
  color: var(--drive-text); /* Toma el color de texto del tema */
  background-color: rgba(0, 0, 0, 0.05); /* Fondo oscuro sutil para feedback */
}

/* ----------------
   Dropdown de ordenamiento (Sort Dropdown)
   ---------------- */
.sort-dropdown { /* Contenedor del dropdown para ordenar archivos */
  position: relative; /* Necesario para posicionar el menú desplegable */
}

.sort-btn { /* Botón que activa el menú de ordenamiento */
  display: flex; /* Flexbox para alinear ícono y texto */
  align-items: center;
  gap: 6px; /* Espacio entre texto y el ícono de flecha */
  padding: 6px 12px; /* Espaciado interno */
  border: 1px solid var(--drive-border); /* Borde del tema */
  background: transparent; /* Fondo transparente */
  border-radius: 20px; /* Bordes redondeados */
  cursor: pointer; /* Puntero */
  font-size: 0.75rem; /* Fuente pequeña */
  color: var(--drive-text); /* Color de texto del tema */
}

.sort-btn:hover { /* Hover del botón de ordenar */
  border-color: var(--drive-primary);
  background: var(--drive-primary-light);
}

.sort-menu { /* Menú desplegable con las opciones de ordenamiento */
  position: absolute; /* Posicionado relativo a .sort-dropdown */
  top: 100%; /* Aparece justo debajo del botón */
  left: 0; /* Alineado al borde izquierdo */
  margin-top: 4px; /* Pequeña separación del botón */
  background: var(--drive-bg); /* Fondo del tema */
  border: 1px solid var(--drive-border); /* Borde del tema */
  border-radius: var(--drive-radius-sm); /* Bordes redondeados pequeños */
  box-shadow: 0 2px 8px rgba(0,0,0,0.1); /* Sombra suave para elevar el menú */
  min-width: 150px; /* Ancho mínimo */
  z-index: 1000; /* Z-index alto para que se muestre sobre otros elementos */
  display: none; /* Oculto por defecto */
}

.sort-menu.show { /* Clase para mostrar el menú */
  display: block; /* Se muestra como bloque */
}

.sort-option { /* Cada opción dentro del menú de ordenamiento */
  padding: 8px 12px; /* Espaciado interno */
  display: flex; /* Flexbox para alinear nombre y el indicador de orden */
  align-items: center;
  justify-content: space-between; /* Nombres a la izquierda, indicador (↑/↓) a la derecha */
  cursor: pointer; /* Puntero */
  font-size: 0.75rem; /* Fuente pequeña */
  color: var(--drive-text); /* Color de texto del tema */
}

.sort-option:hover { /* Hover sobre una opción de ordenamiento */
  background: var(--drive-primary-light); /* Fondo claro del color primario */
}

.sort-indicator { /* Indicador de orden (↑/↓) para la opción activa */
  margin-left: 8px; /* Separado del texto */
  font-size: 0.7rem; /* Fuente más pequeña */
}

/* ----------------
   Espaciadores para elementos fijos (Header y Paginación)
   ---------------- */
.drive-header-spacer,
.drive-pagination-spacer { /* Elementos invisibles que ocupan espacio */
  display: block; /* Se comportan como bloque */
  width: 100%; /* Ancho completo */
  flex-shrink: 0; /* No se encogen */
}

.drive-header-spacer { /* Espaciador para el header fijo */
  height: 0; /* Altura inicial 0, se ajustará con JS para evitar que el contenido quede oculto */
  transition: height 0.2s ease; /* Transición suave cuando la altura cambie */
}

.drive-pagination-spacer { /* Espaciador para la paginación fija */
  height: 0; /* Altura inicial 0, se ajustará con JS */
  transition: height 0.2s ease;
}

/* ----------------
   Área de archivos (zona de drop y contenedor principal)
   ---------------- */
.drive-files-area { /* Contenedor principal que muestra los archivos y recibe el drag and drop */
  flex: 1 1 auto; /* Permite que crezca y se encoja, tomando el espacio restante */
  padding: 16px; /* Espaciado interno */
  overflow-y: auto; /* Habilita scroll vertical si el contenido es muy grande */
  min-height: 0; /* Necesario para que flex-basis funcione correctamente en Firefox */
  position: relative; /* Contiene a .drop-overlay y .drive-loading */
  display: flex; /* Flexbox para .files-container */
  flex-direction: column; /* Columna para su contenido */

  background: transparent; /* Fondo transparente */
  transition: all 0.3s ease; /* Transición para cambios de fondo o borde durante drag & drop */
}

/* Overlay de zona de drop (Aparece cuando se arrastran archivos) */
.drop-overlay { /* Capa superpuesta que se muestra al arrastrar archivos sobre el área */
  position: absolute; /* Posicionada sobre toda .drive-files-area */
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(59, 130, 246, 0.95); /* Fondo azul intenso y semitransparente */
  display: none; /* Oculto por defecto */
  align-items: center; /* Centra verticalmente el contenido */
  justify-content: center; /* Centra horizontalmente el contenido */
  z-index: 1000; /* Z-index alto para superponer a todo */
  border-radius: var(--drive-radius); /* Bordes redondeados del radio del drive */
  backdrop-filter: blur(4px); /* Efecto de desenfoque para el contenido de fondo */
  pointer-events: none; /* Permite que el usuario interactúe con el elemento subyacente si es necesario */
}

.drive-files-area.drag-over-files .drop-overlay { /* Overlay visible cuando la clase 'drag-over-files' está presente en el área */
  display: flex; /* Se muestra como flex */
  animation: fadeIn 0.2s ease-out; /* Animación de aparición */
}

.drop-overlay-content { /* Contenido dentro del overlay de drop */
  text-align: center; /* Texto centrado */
  color: white; /* Texto blanco sobre fondo azul */
}

.drop-overlay-content i { /* Ícono grande dentro del overlay */
  font-size: 64px; /* Tamaño muy grande */
  margin-bottom: 16px; /* Separación del texto */
  animation: bounce 0.5s ease infinite; /* Animación de rebote para llamar la atención */
}

.drop-overlay-content p { /* Texto principal del overlay */
  font-size: 1.2rem;
  font-weight: 500;
  margin: 0;
}

/* Efecto visual de drag sobre toda el área */
.drive-files-area.drag-over-files { /* Estilo adicional cuando se arrastra sobre el área */
  background: var(--drive-primary-light); /* Fondo claro del color primario */
  outline: 3px dashed var(--drive-primary); /* Contorno discontinuo del color principal */
  outline-offset: -3px; /* El contorno se dibuja hacia adentro */
}

/* ----------------
   Contenedor de archivos (Grid o Lista)
   ---------------- */
.files-container { /* Este es el contenedor principal que cambia entre grid y list view */
  position: relative; /* Posición relativa para contener elementos absolutos como .empty-drive */
  width: 100%; /* Ancho completo */
  flex: 1; /* Ocupa el espacio disponible en .drive-files-area */
  display: flex; /* Flexbox por defecto, pero será anulado por grid en .grid-view */
  flex-direction: column; /* Por defecto, comportamiento de lista */
  min-height: 100%; /* Altura mínima para que .empty-drive funcione correctamente */
}

.files-container:has(.empty-drive) { /* Cuando el contenedor tiene un estado vacío */
  flex: 1; /* Ocupa todo el espacio */
  min-height: 100%; /* Asegura que ocupe toda la altura disponible */
}

/* Vistas grid y lista con altura mínima */
.files-container.grid-view,
.files-container.list-view { /* Para ambas vistas, asegurar una altura mínima */
  min-height: 400px; /* Altura mínima antes de mostrar scroll o estado vacío */
}

.files-container.grid-view { /* Estilos específicos para la vista de cuadrícula (Grid) */
  display: grid; /* Usa CSS Grid Layout */
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); /* Columnas responsivas: mínimo 160px, máximo 1fr */
  gap: 16px; /* Espacio entre las tarjetas */
  align-items: start; /* Las tarjetas se alinean al inicio, no se estiran verticalmente */
}

.files-container.list-view { /* Estilos específicos para la vista de lista */
  display: flex; /* Usa Flexbox en columna */
  flex-direction: column;
  gap: 8px; /* Pequeño espacio entre filas */
}

/* ----------------
   Estado vacío (centrado)
   ---------------- */
.empty-drive { /* Mensaje y animación cuando no hay archivos */
  position: absolute; /* Posicionado absolutamente respecto a .files-container */
  top: 50%; /* Coloca el borde superior al 50% del padre */
  left: 50%; /* Coloca el borde izquierdo al 50% del padre */
  transform: translate(-50%, -50%); /* Centra perfectamente el elemento */
  text-align: center; /* Texto centrado */
  width: 100%; /* Ancho completo para que el texto no se corte */
  padding: 2rem; /* Espaciado interno */
  color: var(--drive-text-light); /* Color de texto secundario del tema */
  pointer-events: none; /* Evita que interfiera con clics en el fondo */
  z-index: 1; /* Asegura que esté por encima del fondo pero por debajo de otros elementos interactivos */
}

.empty-drive i { /* Ícono grande para el estado vacío */
  font-size: 64px; /* Tamaño grande */
  margin-bottom: 16px; /* Separación del texto */
  color: var(--drive-primary); /* Color principal del tema */
  opacity: 0.6; /* Opacidad para un efecto más suave */
}

.empty-drive p { /* Párrafo principal del estado vacío */
  margin: 8px 0; /* Margen vertical */
  font-size: 0.9rem;
  font-weight: 500;
}

.empty-drive .small-text { /* Texto secundario más pequeño */
  font-size: 0.75rem;
  opacity: 0.7;
  display: block; /* Ocupa toda la línea */
  margin-top: 0.5rem;
}

/* ----------------
   Tarjeta de archivo (Vista Grid)
   ---------------- */
.file-card { /* Estilo para cada archivo en la vista de cuadrícula */
  background: var(--drive-bg); /* Fondo principal del tema */
  border-radius: var(--drive-radius); /* Radio de borde grande (ej. 12px) */
  padding: 20px 12px; /* Padding: arriba/abajo, izquierda/derecha */
  text-align: center; /* Todo el texto centrado */
  cursor: pointer; /* Indicador de que es clickeable */
  transition: var(--drive-transition); /* Transición suave para hover y selección */
  position: relative; /* Necesario para posicionar el check de selección */
  border: 1px solid var(--drive-border); /* Borde sutil del tema */
  display: flex; /* Flexbox para organizar su contenido */
  flex-direction: column; /* Columna: ícono, nombre, tamaño */
  align-items: center; /* Centrado horizontal de los elementos */
  gap: 8px; /* Espacio entre los elementos internos */
}

.file-card:hover { /* Hover de la tarjeta */
  transform: translateY(-2px); /* Se eleva ligeramente */
  box-shadow: 0 2px 8px rgba(0,0,0,0.1); /* Sombra para dar profundidad */
  border-color: var(--drive-primary); /* Borde se vuelve del color principal */
}

.file-card.selected { /* Tarjeta que está seleccionada */
  background: var(--drive-primary-light); /* Fondo claro del color principal */
  border: 2px solid var(--drive-primary); /* Borde más grueso y de color principal */
}

.file-check { /* Check visual de selección (aparece en la esquina) */
  position: absolute; /* Posición absoluta sobre la tarjeta */
  top: 8px; /* Separado del borde superior */
  right: 8px; /* Separado del borde derecho */
  width: 22px; /* Tamaño del círculo */
  height: 22px;
  background: var(--drive-primary); /* Fondo de color principal */
  border-radius: 50%; /* Forma circular */
  display: none; /* Oculto por defecto */
  align-items: center; /* Centra el ícono de check */
  justify-content: center;
}

.file-card.selected .file-check { /* Se muestra el check solo cuando la tarjeta está seleccionada */
  display: flex;
}

.file-check i { /* Estilo para el ícono de check */
  color: white; /* Blanco sobre fondo de color principal */
  font-size: 11px; /* Tamaño pequeño */
}

.file-icon { /* Contenedor del ícono del archivo */
  width: 48px; /* Tamaño fijo */
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.file-icon i { /* Estilo para el ícono (ej. de FontAwesome) */
  font-size: 36px !important; /* Tamaño grande del ícono */
}

.file-name { /* Nombre del archivo */
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--drive-text); /* Color de texto del tema */
  width: 100%; /* Ancho completo para que el ellipsis funcione */
  display: -webkit-box; /* Caja flexible para límite de líneas */
  -webkit-line-clamp: 2; /* Máximo 2 líneas de texto */
  -webkit-box-orient: vertical; /* Orientación vertical */
  overflow: hidden; /* Oculta el texto que desborda */
  text-overflow: ellipsis; /* Agrega "..." al final */
  word-break: break-word; /* Rompe palabras largas para evitar desbordes */
  line-height: 1.3; /* Altura de línea */
  min-height: 2.6em; /* Altura mínima para 2 líneas (1.3 * 2) */
}

.file-size { /* Tamaño del archivo (ej. 1.2 MB) */
  font-size: 0.7rem; /* Fuente más pequeña */
  color: var(--drive-text-light); /* Color de texto secundario */
}

/* ----------------
   Vista lista (Fila)
   ---------------- */
.file-row { /* Estilo para cada archivo en la vista de lista */
  display: grid; /* Usa CSS Grid para alinear las columnas */
  grid-template-columns: auto auto 1fr 90px auto auto; /* Columnas: Check, Ícono, Nombre, Tamaño, Fecha, Acciones */
  align-items: center; /* Centra verticalmente todo el contenido de la fila */
  gap: 12px; /* Espacio entre columnas */
  padding: 8px 12px; /* Espaciado interno */
  background: var(--drive-bg); /* Fondo del tema */
  border: 1px solid var(--drive-border); /* Borde sutil */
  border-radius: var(--drive-radius-sm); /* Bordes redondeados pequeños */
  transition: var(--drive-transition); /* Transición para hover y selección */
  cursor: pointer; /* Indica que la fila es clickeable */
}

.file-row:hover { /* Hover sobre la fila */
  border-color: var(--drive-primary); /* Borde del color principal */
  background: var(--drive-bg-hover); /* Fondo de hover (asumiendo que existe la variable, si no, se puede usar una opacidad) */
}

.file-row.selected { /* Fila seleccionada */
  background: var(--drive-primary-light); /* Fondo claro del color principal */
  border: 2px solid var(--drive-primary); /* Borde más grueso y de color principal */
}

.file-row-check { /* Check de selección para la vista de lista */
  width: 20px; /* Círculo pequeño */
  height: 20px;
  background: var(--drive-primary); /* Fondo color principal */
  border-radius: 50%; /* Circular */
  display: none; /* Oculto por defecto */
  align-items: center;
  justify-content: center;
}

.file-row.selected .file-row-check { /* Se muestra solo cuando la fila está seleccionada */
  display: flex;
}

.file-row-check i { /* Ícono de check dentro del círculo */
  color: white;
  font-size: 10px;
}

.file-row-icon { /* Contenedor del ícono en la fila */
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.file-row-icon i { /* Ícono del archivo en la fila */
  font-size: 24px !important; /* Tamaño del ícono */
}

.file-row-name { /* Nombre del archivo en la vista de lista */
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--drive-text);
  overflow: hidden; /* Oculta desbordamiento */
  word-break: break-word; /* Rompe palabras largas */
  line-height: 1.3;
  display: -webkit-box; /* Límite de líneas */
  -webkit-line-clamp: 2; /* Máximo 2 líneas */
  -webkit-box-orient: vertical;
}

.file-row-size,
.file-row-date { /* Tamaño y fecha en la vista de lista */
  font-size: 0.7rem;
  color: var(--drive-text-light);
  justify-self: end; /* Se alinea al final de la celda de la cuadrícula (derecha) */
  text-align: right; /* Texto alineado a la derecha */
}

.file-row-actions { /* Contenedor de los botones de acción - ANCHO FIJO */
  display: flex;
  gap: 4px; /* Pequeño espacio entre botones */
  min-width: 100px; /* Ancho mínimo fijo para todos los contenedores */
  justify-content: flex-start; /* Botones alineados a la izquierda */
}

.row-action { /* Estilo base para cada botón de acción en la fila */
  width: 28px; /* Tamaño cuadrado */
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none; /* Sin borde por defecto */
  background: transparent; /* Fondo transparente */
  border-radius: var(--drive-radius-sm); /* Bordes redondeados */
  cursor: pointer;
  color: var(--drive-text-light); /* Color de texto secundario */
}

.row-action:hover { /* Hover sobre un botón de acción */
  background: var(--drive-primary-light); /* Fondo claro del color principal */
  color: var(--drive-primary); /* Texto del color principal */
}

.row-action.delete:hover { /* Hover específico para el botón de eliminar */
  background: rgba(239, 68, 68, 0.1); /* Fondo rojo claro */
  color: var(--drive-danger); /* Texto del color de peligro */
}

/* ----------------
   Paginación (fija en la parte inferior)
   ---------------- */
.drive-pagination { /* Barra de paginación fija */
  position: fixed; /* Fijo en la parte inferior de la ventana */
  bottom: 0; /* Alineado al borde inferior */
  left: 0;
  right: 0;
  display: flex;
  justify-content: center; /* Centra los botones horizontalmente */
  align-items: center;
  gap: 8px;
  padding: 12px 16px; /* Espaciado interno */
  border-top: 1px solid var(--drive-border); /* Línea divisoria superior */
  background: var(--drive-bg); /* Fondo del tema */
  z-index: 10; /* Z-index para que esté por encima del contenido pero por debajo de herramientas flotantes */
  flex-wrap: wrap; /* Permite que los botones se envuelvan en pantallas pequeñas */
}

.page-btn,
.page-number { /* Estilo común para los botones de página y los números de página */
  min-width: 35px; /* Ancho mínimo para que sea cuadrado */
  height: 35px; /* Alto fijo */
  display: inline-flex; /* Se comporta como inline-flex para centrar contenido */
  align-items: center;
  justify-content: center;
  border: 1px solid var(--drive-border); /* Borde del tema */
  background: transparent; /* Fondo transparente */
  border-radius: var(--drive-radius-sm); /* Bordes redondeados */
  cursor: pointer; /* Puntero */
  font-size: 0.95rem;
  color: var(--drive-text);
  transition: var(--drive-transition); /* Transición para hover */
}

.page-btn:hover:not(:disabled),
.page-number:hover:not(.active) { /* Hover para botones habilitados y números no activos */
  border-color: var(--drive-primary);
  color: var(--drive-primary);
  background: var(--drive-primary-light);
}

.page-number.active { /* Número de página activo (el actual) */
  background: var(--drive-primary); /* Fondo del color principal */
  border-color: var(--drive-primary);
  color: white; /* Texto blanco */
}

.page-btn:disabled { /* Botones de navegación (Anterior/Siguiente) deshabilitados */
  opacity: 0.4; /* Opacidad reducida */
  cursor: not-allowed; /* Cursor de no permitido */
}

.page-numbers { /* Contenedor de los números de página */
  display: flex;
  gap: 4px;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
}

/* ----------------
   Loading (Indicador de carga)
   ---------------- */
.drive-loading { /* Capa de carga/loading */
  position: absolute; /* Absoluto respecto a .drive-files-area */
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.3); /* Fondo oscuro semitransparente */
  display: flex; /* Por defecto, se puede activar/desactivar con JS */
  align-items: center;
  justify-content: center;
  z-index: 1000; /* Z-index alto para superponer al contenido */
  display: none; /* Oculto por defecto */
}

.drive-loading.active { /* Clase que muestra el loading */
  display: flex;
}

.loading-spinner { /* Contenedor del spinner de carga */
  text-align: center;
  background: var(--drive-bg); /* Fondo del tema */
  padding: 20px; /* Espaciado interno */
  border-radius: var(--drive-radius); /* Bordes redondeados */
  box-shadow: 0 2px 12px rgba(0,0,0,0.15); /* Sombra para destacar */
}

.spinner-ring { /* El spinner animado */
  width: 32px;
  height: 32px;
  border: 3px solid var(--drive-border); /* Borde base */
  border-top-color: var(--drive-primary); /* Borde superior de color principal */
  border-radius: 50%;
  animation: spin 0.6s linear infinite; /* Animación de giro */
}

/* ----------------
   Animaciones globales para el Drive
   ---------------- */
@keyframes spin { /* Rotación infinita para el spinner */
  to { transform: rotate(360deg); }
}

@keyframes bounce { /* Animación de rebote para el overlay de drop */
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

@keyframes fadeIn { /* Animación de aparición */
  from { opacity: 0; }
  to { opacity: 1; }
}

/* ----------------
   Menú contextual (Context Menu)
   ---------------- */
.context-menu { /* Menú que aparece al hacer clic derecho sobre un archivo */
  position: absolute; /* Posicionado cerca del cursor */
  background: var(--drive-bg); /* Fondo del tema */
  border-radius: var(--drive-radius-sm); /* Bordes redondeados */
  box-shadow: 0 2px 12px rgba(0,0,0,0.15); /* Sombra elevada */
  min-width: 160px; /* Ancho mínimo */
  z-index: 10000; /* Muy alto para que se muestre sobre todo */
  display: none; /* Oculto por defecto */
  overflow: hidden; /* Oculta el contenido que se desborda, útil para bordes redondeados */
}

.context-menu-header { /* Cabecera del menú contextual, muestra información del archivo */
  padding: 8px 12px;
  background: var(--drive-primary-light); /* Fondo claro del color principal */
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.7rem;
  font-weight: 500;
  color: var(--drive-primary);
}

.context-menu-divider { /* Línea divisoria entre secciones del menú */
  height: 1px;
  background: var(--drive-border);
  margin: 4px 0;
}

.context-menu-item { /* Cada opción del menú contextual */
  padding: 8px 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px; /* Espacio entre ícono y texto */
  font-size: 0.75rem;
  color: var(--drive-text);
}

.context-menu-item:hover { /* Hover sobre una opción del menú */
  background: var(--drive-primary-light);
}

.context-menu-item.danger { /* Opción peligrosa (ej. Eliminar) */
  color: var(--drive-danger);
}

.context-menu-item.danger:hover { /* Hover sobre opción peligrosa */
  background: rgba(239, 68, 68, 0.1);
}

/* Animación de entrada para archivos */
.file-card,
.file-row { /* Tanto en grid como en lista, tienen una animación de aparición */
  animation: fadeIn 0.2s ease-out;
}

/* ----------------
   Responsive para el Drive
   ---------------- */
@media (max-width: 1024px) { /* Pantallas medianas (ej. tablets pequeñas o portátiles) */
  .drive-header {
    flex-direction: column; /* El header se vuelve columna */
    align-items: stretch; /* Los hijos se estiran */
  }

  .drive-header-center {
    order: 3; /* El centro (búsqueda) pasa a ser el último elemento en móvil */
    justify-content: stretch; /* La búsqueda se estira */
  }

  .search-box .drive-search {
    width: 100%; /* La caja de búsqueda ocupa todo el ancho disponible */
  }
}

@media (max-width: 768px) { /* Pantallas tipo tablet y móviles grandes */
  .drive-header-left,
  .drive-header-right {
    justify-content: space-between; /* Distribuye el espacio en los laterales */
  }

  .file-row {
    grid-template-columns: auto 1fr auto; /* Se ocultan tamaño y fecha */
  }

  .file-row-actions {
    min-width: 80px; /* Ancho un poco menor en móviles */
  }

  .file-row-date,
  .file-row-size {
    display: none; /* Se ocultan en tablets y móviles */
  }

  .drive-files-area {
    min-height: 300px; /* Se reduce la altura mínima */
  }
}

@media (max-width: 480px) { /* Pantallas de móviles pequeños */
  .files-container.grid-view {
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); /* Tarjetas más pequeñas */
    gap: 8px; /* Menos espacio entre tarjetas */
  }

  .file-row-actions {
    min-width: 70px; /* Ancho aún menor en móviles pequeños */
    gap: 2px;
  }

  .btn-tool span { /* Se oculta el texto de los botones de herramientas para ahorrar espacio */
    display: none;
  }

  .btn-tool { /* Los botones se vuelven más compactos */
    padding: 6px 10px;
  }

  .drive-files-area {
    min-height: 250px; /* Altura mínima aún más pequeña */
  }
}

.pdf-thumbnail {
    position: relative;
    transition: all 0.2s ease;
    border: 2px solid transparent;
}

.pdf-thumbnail.active {
    background: var(--drive-primary-light, rgba(59, 130, 246, 0.15));
    border: 2px solid var(--drive-primary, #3b82f6);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.3), 0 4px 12px rgba(0, 0, 0, 0.15);
    transform: scale(1.02);
}

.pdf-thumbnail.active img {
    border-color: var(--drive-primary, #3b82f6);
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.2);
}

.pdf-thumbnail.active span {
    color: var(--drive-primary, #3b82f6);
    font-weight: 600;
    background: var(--drive-primary-light, rgba(59, 130, 246, 0.1));
    display: inline-block;
    padding: 2px 8px;
    border-radius: 12px;
    margin-top: 5px;
}

/* Efecto adicional - indicador de página activa con barra lateral */
.pdf-thumbnail.active::before {
    content: '';
    position: absolute;
    left: -2px;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 40px;
    background: var(--drive-primary, #3b82f6);
    border-radius: 0 3px 3px 0;
}

/* Hover en miniaturas normales */
.pdf-thumbnail:hover:not(.active) {
    background: var(--drive-primary-light, rgba(59, 130, 246, 0.08));
    border-color: var(--drive-primary, rgba(59, 130, 246, 0.3));
    transform: scale(1.01);
}

/* Estilos para el scroll automático hacia la miniatura activa */
.pdf-thumbnails-list {
    scroll-behavior: smooth;
}

/* Responsive para miniaturas activas */
@media (max-width: 768px) {
    .pdf-thumbnail.active {
        transform: scale(1.01);
        box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.3), 0 2px 8px rgba(0, 0, 0, 0.1);
    }

    .pdf-thumbnail.active::before {
        height: 30px;
    }
}

@media (max-width: 576px) {
    .pdf-thumbnail.active span {
        font-size: 8px;
        padding: 1px 6px;
    }
}

/* ================================
   2. Ventana de Progreso de Descarga (Download Progress)
   ================================ */

.download-progress { /* Contenedor flotante que muestra el progreso de una descarga */
  position: fixed; /* Fijo en la esquina inferior derecha */
  bottom: 20px;
  right: 20px;
  z-index: 10001; /* Muy alto para que esté por encima de casi todo */
  background: var(--drive-bg); /* Fondo del tema */
  border-radius: var(--drive-radius); /* Bordes redondeados grandes */
  padding: 14px 16px; /* Espaciado interno */
  box-shadow: var(--drive-shadow-lg); /* Sombra grande para destacar */
  min-width: 280px; /* Ancho mínimo */
  max-width: 380px; /* Ancho máximo */
  width: auto; /* Ancho automático en escritorio */
  border: 1px solid var(--drive-border); /* Borde sutil */
  transition: var(--drive-transition); /* Transición suave para cambios de estado */
  animation: slideInRight 0.3s ease-out; /* Animación de entrada desde la derecha */
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; /* Fuente legible */
  line-height: 1.4; /* Altura de línea para buena legibilidad */
}

/* Header del progreso de descarga */
.download-progress-header { /* Cabecera de la ventana de progreso */
  display: flex;
  align-items: center;
  justify-content: space-between; /* Título a la izquierda, nombre de archivo a la derecha */
  margin-bottom: 10px;
  gap: 8px;
}

.download-progress-title { /* Título "Descargando" */
  font-size: 12px;
  font-weight: 600;
  color: var(--drive-text);
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0; /* Evita que se encoja */
  letter-spacing: -0.2px; /* Ligero ajuste de espaciado */
}

.download-progress-title i { /* Ícono de descarga */
  color: var(--drive-primary);
  font-size: 12px;
  width: 14px;
  text-align: center;
}

.download-progress-filename { /* Nombre del archivo que se está descargando */
  font-size: 11px;
  color: var(--drive-primary);
  font-weight: 500;
  max-width: 180px; /* Ancho máximo antes de truncarse */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap; /* Se mantiene en una línea */
  text-align: right;
  flex-shrink: 1; /* Puede encogerse si es necesario */
  letter-spacing: -0.2px;
}

/* Información de tamaño y velocidad */
.download-progress-info { /* Muestra el tamaño descargado y la velocidad */
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
  font-size: 10px;
  color: var(--drive-text-light);
  gap: 12px;
  flex-wrap: wrap;
}

.download-progress-size,
.download-progress-speed { /* Estilo común para el tamaño y la velocidad */
  font-family: 'SF Mono', 'Fira Code', 'Courier New', monospace; /* Fuente monoespaciada para números */
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
  font-weight: 500;
}

.download-progress-size i,
.download-progress-speed i { /* Íconos para tamaño y velocidad */
  font-size: 10px;
  width: 12px;
  text-align: center;
  flex-shrink: 0;
}

/* Contenedor de la barra de progreso */
.download-progress-bar-container { /* Fondo gris de la barra */
  background: var(--drive-border);
  border-radius: 10px;
  overflow: hidden;
  height: 6px;
  margin: 10px 0;
}

.download-progress-bar { /* Barra de progreso que se llena */
  width: 0%; /* Controlado por JS */
  height: 100%;
  background: linear-gradient(90deg, var(--drive-primary), var(--drive-primary-dark)); /* Degradado del color principal */
  border-radius: 10px;
  transition: width 0.3s ease; /* Transición suave al aumentar el ancho */
  position: relative;
  overflow: hidden;
}

.download-progress-bar::after { /* Efecto de brillo (shimmer) que se mueve por la barra */
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  animation: shimmer 1.5s infinite; /* Animación de brillo */
}

/* Animación del efecto shimmer (brillo) */
@keyframes shimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

/* Porcentaje de descarga */
.download-progress-percent { /* Texto que muestra el porcentaje actual */
  font-size: 11px;
  font-weight: 600;
  color: var(--drive-primary);
  text-align: right;
  margin-top: 4px;
  letter-spacing: -0.2px;
}

/* Botón de cancelar */
.download-progress-cancel { /* Botón para cancelar la descarga */
  margin-top: 12px;
  width: 100%; /* Ocupa todo el ancho de la ventana */
  padding: 6px 12px;
  background: rgba(239, 68, 68, 0.1); /* Fondo rojo claro */
  border: 1px solid var(--drive-danger); /* Borde del color de peligro */
  border-radius: var(--drive-radius-sm); /* Bordes redondeados pequeños */
  color: var(--drive-danger); /* Texto de color de peligro */
  font-size: 11px;
  font-weight: 500;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: var(--drive-transition);
  font-family: inherit;
}

.download-progress-cancel i { /* Ícono dentro del botón cancelar */
  font-size: 11px;
  width: 14px;
  text-align: center;
}

.download-progress-cancel:hover { /* Hover del botón cancelar */
  background: rgba(239, 68, 68, 0.2); /* Fondo rojo más intenso */
  transform: translateY(-1px); /* Efecto de elevación */
}

.download-progress-cancel:active { /* Click en el botón cancelar */
  transform: translateY(0); /* Vuelve a su lugar */
}

/* Ocultar botón de cancelar cuando está completado */
.download-progress.completed .download-progress-cancel {
  display: none;
}

/* Estado de error */
.download-progress.error .download-progress-bar { /* Barra de color de peligro */
  background: linear-gradient(90deg, var(--drive-danger), #dc2626);
}

.download-progress.error .download-progress-percent { /* Porcentaje de color de peligro */
  color: var(--drive-danger);
}

.download-progress.error .download-progress-cancel { /* Botón cancelar visible en error */
  display: flex;
}

/* Estado completado */
.download-progress.completed .download-progress-bar { /* Barra de color éxito (verde) */
  background: linear-gradient(90deg, #10b981, #059669);
}

.download-progress.completed .download-progress-percent { /* Porcentaje de color éxito */
  color: #10b981;
}

.download-progress.completed .download-progress-bar::after {
  animation: none; /* Se detiene la animación de brillo al completarse */
}

/* Animación de entrada para la ventana de progreso */
@keyframes slideInRight { /* Aparece desde la derecha */
  from {
    opacity: 0;
    transform: translateX(100px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* ========================================
   RESPONSIVE DESIGN MEJORADO - LETRAS CLARAS
   ======================================== */

/* Tablets (768px - 1024px) */
@media (max-width: 1024px) {
  .download-progress { /* Ajustes de tamaño y espaciado */
    min-width: 260px;
    max-width: 360px;
    padding: 12px 14px;
    bottom: 15px;
    right: 15px;
  }

  .download-progress-filename {
    max-width: 160px;
  }

  .download-progress-title {
    font-size: 11px;
  }
  .download-progress-title i { font-size: 11px; width: 13px; }
  .download-progress-filename { font-size: 10px; }
  .download-progress-info { font-size: 9.5px; gap: 8px; }
  .download-progress-size i, .download-progress-speed i { font-size: 9px; width: 11px; }
  .download-progress-percent { font-size: 10px; }
  .download-progress-cancel { padding: 5px 10px; font-size: 10px; }
  .download-progress-cancel i { font-size: 10px; width: 12px; }
}

/* Móviles grandes (576px - 768px) */
@media (max-width: 768px) {
  .download-progress { /* La ventana ocupa todo el ancho en móvil */
    left: 15px;
    right: 15px;
    bottom: 15px;
    min-width: auto;
    max-width: none;
    width: calc(100% - 30px);
    padding: 12px 14px;
    border-radius: var(--drive-radius-sm);
  }
  /* Ajustes de fuentes y tamaños */
  .download-progress-header { gap: 8px; }
  .download-progress-title { font-size: 11px; gap: 5px; }
  .download-progress-title i { width: 12px; font-size: 11px; }
  .download-progress-filename { font-size: 10px; max-width: 160px; }
  .download-progress-info { flex-direction: row; gap: 12px; margin-bottom: 8px; font-size: 10px; }
  .download-progress-size, .download-progress-speed { gap: 4px; }
  .download-progress-size i, .download-progress-speed i { width: 11px; font-size: 9px; }
  .download-progress-bar-container { margin: 8px 0; }
  .download-progress-percent { font-size: 10px; margin-top: 3px; }
  .download-progress-cancel { margin-top: 10px; padding: 6px 12px; gap: 5px; font-size: 10px; }
  .download-progress-cancel i { width: 12px; font-size: 10px; }
}

/* Móviles pequeños (320px - 576px) */
@media (max-width: 576px) {
  .download-progress {
    left: 10px;
    right: 10px;
    bottom: 70px; /* Ajustado para que no cubra elementos de navegación en móvil */
    width: calc(100% - 20px);
    padding: 10px 12px;
  }
  /* Más ajustes de fuentes */
  .download-progress-header { gap: 6px; margin-bottom: 8px; }
  .download-progress-title { font-size: 10px; gap: 4px; }
  .download-progress-title i { font-size: 10px; width: 11px; }
  .download-progress-filename { font-size: 9.5px; max-width: 120px; }
  .download-progress-info { font-size: 9px; gap: 8px; margin-bottom: 6px; }
  .download-progress-size, .download-progress-speed { gap: 3px; }
  .download-progress-size i, .download-progress-speed i { font-size: 8px; width: 10px; }
  .download-progress-bar-container { margin: 6px 0; }
  .download-progress-percent { font-size: 9px; margin-top: 2px; }
  .download-progress-cancel { margin-top: 8px; padding: 5px 10px; font-size: 9.5px; gap: 4px; }
  .download-progress-cancel i { font-size: 9px; width: 11px; }
}

/* Móviles muy pequeños (menos de 375px) */
@media (max-width: 375px) {
  .download-progress { padding: 8px 10px; }
  .download-progress-header { gap: 4px; }
  .download-progress-title { font-size: 9px; gap: 3px; }
  .download-progress-title i { font-size: 9px; width: 10px; }
  .download-progress-filename { font-size: 8.5px; max-width: 100px; }
  .download-progress-info { font-size: 8px; gap: 6px; }
  .download-progress-size, .download-progress-speed { gap: 2px; }
  .download-progress-size i, .download-progress-speed i { font-size: 7px; width: 9px; }
  .download-progress-percent { font-size: 8px; }
  .download-progress-cancel { padding: 4px 8px; font-size: 8.5px; gap: 3px; }
  .download-progress-cancel i { font-size: 8px; width: 10px; }
}

/* Landscape (orientación horizontal en móviles) */
@media (max-width: 768px) and (orientation: landscape) {
  .download-progress { /* Cuando el móvil está en horizontal */
    bottom: 10px;
    padding: 8px 12px;
    min-width: 300px;
    width: auto;
    max-width: 400px;
    left: auto;
    right: 10px;
  }
  .download-progress-header { margin-bottom: 6px; }
  .download-progress-info { flex-direction: row; gap: 12px; margin-bottom: 6px; }
  .download-progress-filename { max-width: 180px; }
  .download-progress-title { font-size: 10px; }
  .download-progress-filename { font-size: 9.5px; }
  .download-progress-info { font-size: 9px; }
  .download-progress-cancel { padding: 4px 8px; font-size: 9px; }
}

/* Pantallas muy grandes (escritorio) */
@media (min-width: 1440px) {
  .download-progress { /* Versión más grande para monitores grandes */
    min-width: 320px;
    max-width: 420px;
    padding: 16px 20px;
    bottom: 30px;
    right: 30px;
  }
  .download-progress-title { font-size: 13px; }
  .download-progress-title i { font-size: 13px; width: 16px; }
  .download-progress-filename { font-size: 12px; max-width: 220px; }
  .download-progress-info { font-size: 11px; }
  .download-progress-size i, .download-progress-speed i { font-size: 11px; width: 13px; }
  .download-progress-percent { font-size: 12px; }
  .download-progress-cancel { padding: 8px 14px; font-size: 12px; }
  .download-progress-cancel i { font-size: 12px; width: 15px; }
}

/* Modo oscuro para la ventana de progreso (si el navegador lo prefiere) */
@media (prefers-color-scheme: dark) {
  .download-progress {
    background: var(--drive-bg);
    border-color: var(--drive-border);
  }
}

/* Animación de salida (cuando se cierra la ventana) */
.download-progress.fade-out {
  animation: fadeOut 0.3s ease-out forwards;
}

@keyframes fadeOut { /* Desaparece hacia la derecha */
  from {
    opacity: 1;
    transform: translateX(0);
  }
  to {
    opacity: 0;
    transform: translateX(100px);
  }
}

/* Soporte para reducción de movimiento */
@media (prefers-reduced-motion: reduce) {
  .download-progress,
  .download-progress-bar,
  .download-progress-cancel,
  .download-progress-bar::after {
    animation: none !important;
    transition: none !important;
  }
  .download-progress {
    animation: none !important;
  }
}

/* ================================
   3. Modal de renombramiento file
   ================================ */

.drive-rename-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(6px);
  z-index: 20000;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fadeIn 0.2s ease-out;
}

.drive-rename-modal {
  background: var(--cred-bg, rgba(255, 255, 255, 0.95));
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: 20px;
  box-shadow: 0 20px 35px -10px rgba(0, 0, 0, 0.15);
  width: 90%;
  max-width: 400px;
  animation: slideInUp 0.25s ease-out;
  overflow: hidden;
  border: 1px solid var(--cred-border, rgba(0, 0, 0, 0.08));
}

.drive-rename-modal-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  background: var(--modal-header-bg, linear-gradient(150deg, hsl(223, 70%, 35%), hsl(223, 90%, 20%)));
  color: white;
}

.drive-rename-modal-header i {
  font-size: 16px;
  background: rgba(255, 255, 255, 0.15);
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
}

.drive-rename-modal-header h3 {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 600;
  flex: 1;
}

.drive-rename-modal-close {
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: white;
  width: 28px;
  height: 28px;
  border-radius: 10px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}

.drive-rename-modal-close:hover {
  background: rgba(255, 255, 255, 0.25);
  transform: scale(1.05);
}

.drive-rename-modal-body {
  padding: 20px;
}

.drive-rename-file-icon {
  text-align: center;
  margin-bottom: 16px;
}

.drive-rename-file-icon i {
  font-size: 40px !important;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
}

.drive-rename-form-group {
  margin-bottom: 16px;
}

.drive-rename-form-group label {
  display: block;
  margin-bottom: 6px;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--cred-text-muted, #6b7280);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.drive-rename-input-wrapper {
  display: flex;
  align-items: center;
  background: var(--cred-input-bg, rgba(249, 250, 251, 0.8));
  border: 1.5px solid var(--cred-border, rgba(0, 0, 0, 0.08));
  border-radius: 12px;
  transition: all 0.2s;
  overflow: hidden;
  backdrop-filter: blur(4px);
}

.drive-rename-input-wrapper:focus-within {
  border-color: var(--cred-accent, #3b82f6);
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.15);
}

.drive-rename-input {
  flex: 1;
  padding: 10px 12px;
  border: none !important;
  background: transparent;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--cred-text, #0f172a);
  font-family: 'SF Mono', 'Fira Code', monospace;
}

/* Eliminar completamente el borde del input rename-filename al tener foco */
.drive-rename-input:focus {
  outline: none !important;
  box-shadow: none !important;
  border: none !important;
  text-decoration: none !important;
}

/* Asegurar que no haya borde en ningún estado del input */
.drive-rename-input,
.drive-rename-input:hover,
.drive-rename-input:focus,
.drive-rename-input:active,
.drive-rename-input:focus-visible,
.drive-rename-input:focus-within {
  outline: none !important;
  box-shadow: none !important;
  border: none !important;
  text-decoration: none !important;
}

.drive-rename-extension {
  padding: 10px 12px;
  background: rgba(59, 130, 246, 0.1);
  color: var(--cred-accent, #3b82f6);
  font-size: 0.85rem;
  font-weight: 600;
  border-left: 1px solid var(--cred-border, rgba(0, 0, 0, 0.08));
  font-family: 'SF Mono', 'Fira Code', monospace;
}

.drive-rename-hint {
  display: block;
  margin-top: 8px;
  font-size: 0.65rem;
  color: var(--cred-text-muted, #6b7280);
  font-weight: 500;
}

.drive-rename-modal-footer {
  display: flex;
  gap: 10px;
  padding: 14px 20px;
  border-top: 1px solid var(--cred-border, rgba(0, 0, 0, 0.06));
  background: var(--drive-bg-secondary, rgba(249, 250, 251, 0.5));
  backdrop-filter: blur(4px);
}

.drive-rename-btn-cancel,
.drive-rename-btn-confirm {
  flex: 1;
  padding: 8px 12px;
  border-radius: 10px;
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  border: none;
  text-align: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.drive-rename-btn-cancel {
  background: var(--nf-cancel-bg, #6b7280);
  color: white;
}

.drive-rename-btn-cancel:hover {
  transform: translateY(-1px);
  filter: brightness(1.05);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.drive-rename-btn-confirm {
  background: var(--nf-ok-bg, #2563eb);
  color: white;
  box-shadow: 0 2px 6px rgba(37, 99, 235, 0.2);
}

.drive-rename-btn-confirm:hover {
  transform: translateY(-1px);
  filter: brightness(1.05);
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
}

.drive-rename-btn-cancel:active,
.drive-rename-btn-confirm:active {
  transform: translateY(0);
}

/* ================================
   RESPONSIVE
   ================================ */
@media (max-width: 576px) {
  .drive-rename-modal {
    width: 95%;
  }

  .drive-rename-modal-header {
    padding: 12px 16px;
  }

  .drive-rename-modal-header i {
    width: 26px;
    height: 26px;
    font-size: 14px;
  }

  .drive-rename-modal-body {
    padding: 16px;
  }

  .drive-rename-file-icon i {
    font-size: 32px !important;
  }

  .drive-rename-input,
  .drive-rename-extension {
    padding: 8px 10px;
    font-size: 0.8rem;
  }

  .drive-rename-modal-footer {
    padding: 12px 16px;
  }

  .drive-rename-btn-cancel,
  .drive-rename-btn-confirm {
    padding: 6px 10px;
    font-size: 0.7rem;
  }
}

/* ================================
   ANIMACIONES
   ================================ */
@keyframes slideInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .drive-rename-modal-overlay,
  .drive-rename-modal {
    animation: none !important;
  }
}

/* ================================
   4. Visor PDF (PDF Viewer)
   ================================ */

.pdf-fullscreen-overlay { /* Overlay que cubre toda la pantalla para el visor PDF */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.95);
  z-index: 20000;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(5px);
}

.pdf-fullscreen-container { /* Contenedor principal del visor PDF */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--drive-bg);
  box-shadow: none;
  overflow: hidden;
  animation: pdfFadeIn 0.2s ease-out;
  transform: translateZ(0);
  backface-visibility: hidden;
}

@keyframes pdfFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* ===== HEADER COMPACTO DEL VISOR PDF ===== */
.pdf-fullscreen-header {
  padding: 6px 16px;
  background: var(--drive-primary);
  color: white;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--drive-border);
  flex-shrink: 0;
  min-height: 40px;
  transform: translateZ(0);
}

.pdf-header-left {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 500;
  min-width: 0;
  flex: 1;
}

.pdf-header-left i {
  font-size: 16px;
  flex-shrink: 0;
}

.pdf-filename {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  font-size: 12px;
}

.pdf-header-right {
  display: flex;
  align-items: center;
  gap: 6px;
}

.pdf-header-btn {
  background: rgba(255, 255, 255, 0.15);
  border: none;
  color: white;
  width: 30px;
  height: 30px;
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
  flex-shrink: 0;
  transform: translateZ(0);
}

.pdf-header-btn:hover {
  background: rgba(255, 255, 255, 0.3);
  transform: scale(1.02);
}

/* ===== TOOLBAR DE HERRAMIENTAS PDF ===== */
.pdf-toolbar {
  padding: 6px 12px;
  background: var(--drive-bg-secondary);
  border-bottom: 1px solid var(--drive-border);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  flex-shrink: 0;
  min-height: 44px;
  transform: translateZ(0);
}

.pdf-toolbar-group {
  display: flex;
  align-items: center;
  gap: 4px;
}

.pdf-toolbar-divider {
  width: 1px;
  height: 28px;
  background: var(--drive-border);
  margin: 0 4px;
}

.pdf-tool-btn {
  background: var(--drive-bg);
  border: 1px solid var(--drive-border);
  padding: 5px 10px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s;
  color: var(--drive-text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  font-size: 13px;
  min-width: 32px;
  height: 32px;
  transform: translateZ(0);
  backface-visibility: hidden;
}

.pdf-tool-btn:hover:not(:disabled) {
  background: var(--drive-primary-light);
  border-color: var(--drive-primary);
  color: var(--drive-primary);
}

.pdf-tool-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.pdf-page-info {
  display: flex;
  align-items: center;
  gap: 4px;
  background: var(--drive-bg);
  padding: 4px 8px;
  border-radius: 6px;
  border: 1px solid var(--drive-border);
  height: 32px;
}

.pdf-page-input {
  width: 45px;
  text-align: center;
  border: none;
  padding: 4px;
  font-size: 13px;
  font-weight: 500;
  background: transparent;
  color: var(--drive-text);
}

.pdf-page-input:focus {
  outline: none;
}

.pdf-zoom-select {
  background: var(--drive-bg);
  border: 1px solid var(--drive-border);
  padding: 5px 8px;
  border-radius: 6px;
  color: var(--drive-text);
  font-size: 13px;
  cursor: pointer;
  height: 32px;
}

.pdf-zoom-select:focus {
  outline: none;
  border-color: var(--drive-primary);
}

/* ===== BÚSQUEDA DENTRO DEL PDF ===== */
.pdf-search-group {
  flex: 1;
  min-width: 220px;
}

.pdf-search-wrapper {
  display: flex;
  align-items: center;
  background: var(--drive-bg);
  border: 1px solid var(--drive-border);
  border-radius: 6px;
  overflow: hidden;
  height: 32px;
}

.pdf-search-icon {
  padding: 0 8px;
  color: var(--drive-text-light);
  font-size: 12px;
}

.pdf-search-input {
  flex: 1;
  border: none;
  padding: 6px 0;
  font-size: 13px;
  background: transparent;
  color: var(--drive-text);
}

.pdf-search-input:focus {
  outline: none;
}

.pdf-search-prev,
.pdf-search-next {
  background: transparent;
  border: none;
  padding: 0 8px;
  cursor: pointer;
  color: var(--drive-text-light);
  transition: all 0.2s;
  height: 100%;
  display: flex;
  align-items: center;
}

.pdf-search-prev:hover,
.pdf-search-next:hover {
  background: var(--drive-primary-light);
  color: var(--drive-primary);
}

.pdf-search-count {
  font-size: 12px;
  color: var(--drive-text-light);
  padding: 0 8px;
  white-space: nowrap;
}

.pdf-spacer {
  flex: 1;
}

/* ===== CONTENIDO PRINCIPAL DEL VISOR ===== */
.pdf-main-content {
  flex: 1;
  display: flex;
  overflow: hidden;
  min-height: 0;
}

/* Sidebar de miniaturas */
.pdf-sidebar {
  width: 200px;
  background: var(--drive-bg-secondary);
  border-right: 1px solid var(--drive-border);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  flex-shrink: 0;
  transform: translateZ(0);
}

.pdf-sidebar-header {
  padding: 10px 12px;
  background: var(--drive-bg);
  border-bottom: 1px solid var(--drive-border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  font-weight: 600;
}

.pdf-sidebar-close {
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--drive-text-light);
  padding: 4px;
  border-radius: 4px;
}

.pdf-sidebar-close:hover {
  background: var(--drive-primary-light);
  color: var(--drive-primary);
}

.pdf-thumbnails-list {
  flex: 1;
  overflow-y: auto;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  scroll-behavior: smooth;
  contain: content;
}

.pdf-thumbnail {
  cursor: pointer;
  text-align: center;
  transition: all 0.2s;
  padding: 5px;
  border-radius: 6px;
  transform: translateZ(0);
}

.pdf-thumbnail:hover {
  background: var(--drive-primary-light);
}

.pdf-thumbnail img {
  width: 100%;
  height: auto;
  border-radius: 4px;
  border: 1px solid var(--drive-border);
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
}

.pdf-thumbnail span {
  display: block;
  font-size: 11px;
  margin-top: 5px;
  color: var(--drive-text-light);
}

/* Visor principal del PDF (Canvas) - MEJORADO PARA ZOOM */
.pdf-viewer-container {
  flex: 1;
  overflow: hidden;
  background: #3a3a3a;
  position: relative;
  min-height: 0;
  contain: layout style paint;
  isolation: isolate;
  transform: translateZ(0);
}

.pdf-canvas-wrapper {
  height: 100%;
  overflow-y: auto;
  overflow-x: auto;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 20px;
  scroll-behavior: auto !important;
  -webkit-overflow-scrolling: touch;
  contain: layout style paint;
  transform: translateZ(0);
  backface-visibility: hidden;
}

/* Scrollbar personalizada */
.pdf-canvas-wrapper::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

.pdf-canvas-wrapper::-webkit-scrollbar-track {
  background: #2a2a2a;
  border-radius: 5px;
}

.pdf-canvas-wrapper::-webkit-scrollbar-thumb {
  background: var(--drive-primary);
  border-radius: 5px;
  transition: background 0.2s ease;
}

.pdf-canvas-wrapper::-webkit-scrollbar-thumb:hover {
  background: var(--drive-primary-dark);
}

/* ===== CANVAS OPTIMIZADO PARA ZOOM FLUIDO ===== */
.pdf-canvas {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
  background: white;
  border-radius: 4px;
  display: block;

  /* Aceleración por hardware */
  will-change: transform, width, height;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
  backface-visibility: hidden;
  transform: translateZ(0) scale(1);
  transform-style: preserve-3d;

  /* Prevenir repintados */
  contain: layout style paint;

  /* Transiciones ultra suaves para zoom */
  transition: transform 0.05s cubic-bezier(0.2, 0.9, 0.4, 1.1);
}

/* Estado durante zoom activo */
.pdf-canvas.zooming {
  transition: transform 0.08s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Feedback visual de zoom */
.pdf-canvas.zoom-feedback {
  animation: zoomFeedback 0.15s cubic-bezier(0.2, 0.9, 0.4, 1.1);
}

@keyframes zoomFeedback {
  0% { transform: scale(1); }
  50% { transform: scale(1.02); }
  100% { transform: scale(1); }
}

/* Calidad adaptativa según nivel de zoom */
.pdf-canvas[data-zoom="low"] {
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

.pdf-canvas[data-zoom="high"] {
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
  filter: brightness(1.01) contrast(1.01);
}

/* Wrapper durante zoom activo */
.pdf-canvas-wrapper.zooming-active {
  overflow: hidden !important;
}

.pdf-canvas-wrapper.zooming-active .pdf-canvas {
  transition: transform 0.05s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Loading overlay */
.pdf-loading-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 10;
}

.pdf-spinner {
  width: 48px;
  height: 48px;
  border: 4px solid var(--drive-border);
  border-top-color: var(--drive-primary);
  border-radius: 50%;
  animation: pdfSpin 0.8s linear infinite;
  margin-bottom: 16px;
}

@keyframes pdfSpin {
  to { transform: rotate(360deg); }
}

.pdf-loading-overlay p {
  color: white;
  font-size: 14px;
  margin: 0;
}

/* Statusbar */
.pdf-statusbar {
  padding: 4px 16px;
  background: var(--drive-bg-secondary);
  border-top: 1px solid var(--drive-border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11px;
  color: var(--drive-text-light);
  flex-shrink: 0;
  min-height: 32px;
  transform: translateZ(0);
}

.pdf-status-info {
  display: flex;
  align-items: center;
  gap: 6px;
}

.pdf-status-info i {
  font-size: 12px;
}

/* ===== CAPA DE RESALTADO PARA BÚSQUEDA ===== */
.pdf-highlight-layer {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 10;
}

.pdf-text-highlight {
  position: absolute;
  background: rgba(255, 255, 0, 0.5);
  border: 1px solid rgba(255, 200, 0, 0.8);
  border-radius: 2px;
  pointer-events: none;
  transition: all 0.2s ease;
}

.pdf-text-highlight.current {
  background: rgba(255, 200, 0, 0.8);
  border: 2px solid rgba(255, 100, 0, 0.9);
  box-shadow: 0 0 5px rgba(255, 100, 0, 0.5);
}

/* ===== TOOLTIPS ===== */
.pdf-tool-btn[data-title] {
  position: relative;
}

.pdf-tool-btn[data-title]::after {
  content: attr(data-title);
  position: absolute;
  top: 115%;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(31, 41, 55, 0.95);
  color: #fff;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, top 0.2s ease;
  z-index: 1000;
  font-family: sans-serif;
  letter-spacing: 0.3px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  backdrop-filter: blur(4px);
}

.pdf-tool-btn[data-title]::before {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent rgba(31, 41, 55, 0.95) transparent;
  opacity: 0;
  transition: opacity 0.2s ease, top 0.2s ease;
  pointer-events: none;
  z-index: 1000;
}

.pdf-tool-btn[data-title]:hover::after {
  opacity: 1;
  top: 135%;
}

.pdf-tool-btn[data-title]:hover::before {
  opacity: 1;
  top: 105%;
}

.pdf-tool-btn:disabled[data-title]::after,
.pdf-tool-btn:disabled[data-title]::before {
  display: none;
}

/* Tooltips para header */
.pdf-header-btn[data-title] {
  position: relative;
}

.pdf-header-btn[data-title]::after {
  content: attr(data-title);
  position: absolute;
  top: 115%;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(31, 41, 55, 0.95);
  color: #fff;
  padding: 5px 8px;
  border-radius: 6px;
  font-size: 11px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, top 0.2s ease;
  z-index: 1000;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  backdrop-filter: blur(4px);
}

.pdf-header-btn[data-title]::before {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border-width: 4px;
  border-style: solid;
  border-color: transparent transparent rgba(31, 41, 55, 0.95) transparent;
  opacity: 0;
  transition: opacity 0.2s ease, top 0.2s ease;
  pointer-events: none;
  z-index: 1000;
}

.pdf-header-btn[data-title]:hover::after {
  opacity: 1;
  top: 135%;
}

.pdf-header-btn[data-title]:hover::before {
  opacity: 1;
  top: 105%;
}

/* ===== BOTONES PARA VISUALIZAR PDF ===== */
.file-pdf-view {
  position: absolute;
  bottom: 8px;
  right: 8px;
  background: #dc2626;
  border: none;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  color: white;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
  opacity: 0;
  transform: translateZ(0);
}

.file-card:hover .file-pdf-view {
  opacity: 1;
}

.file-pdf-view:hover {
  background: #b91c1c;
  transform: scale(1.05);
}

.file-row .row-action.view {
  background: transparent;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s;
  color: var(--drive-text-light, #6b7280);
}

.file-row .row-action.view:hover {
  background: rgba(220, 38, 38, 0.1);
  color: #dc2626;
}

/* Efecto visual al pasar sobre tarjetas PDF */
.file-card[data-ext="pdf"]:hover {
  border-color: #dc2626;
  box-shadow: 0 4px 12px rgba(220, 38, 38, 0.15);
}

/* ===== RESPONSIVE ===== */
@media (max-width: 1024px) {
  .pdf-toolbar { padding: 6px 10px; gap: 6px; }
  .pdf-tool-btn { padding: 4px 8px; font-size: 12px; min-width: 28px; height: 28px; }
  .pdf-search-group { min-width: 200px; }
  .pdf-sidebar { width: 180px; }
}

@media (max-width: 768px) {
  .pdf-fullscreen-header { padding: 4px 12px; min-height: 36px; }
  .pdf-header-left { font-size: 11px; gap: 8px; }
  .pdf-header-left i { font-size: 14px; }
  .pdf-filename { max-width: 150px; font-size: 11px; }
  .pdf-header-btn { width: 26px; height: 26px; }
  .pdf-toolbar { padding: 5px 8px; gap: 5px; min-height: 40px; }
  .pdf-toolbar-group { gap: 3px; }
  .pdf-tool-btn { padding: 3px 6px; font-size: 11px; min-width: 26px; height: 26px; }
  .pdf-tool-btn span { display: none; }
  .pdf-page-info { padding: 2px 6px; height: 26px; }
  .pdf-page-input { width: 35px; font-size: 11px; }
  .pdf-zoom-select { padding: 3px 6px; font-size: 11px; height: 26px; max-width: 70px; }
  .pdf-search-group { min-width: 180px; }
  .pdf-search-wrapper { height: 26px; }
  .pdf-search-icon { font-size: 10px; padding: 0 6px; }
  .pdf-search-input { font-size: 11px; }
  .pdf-search-prev, .pdf-search-next { padding: 0 6px; }
  .pdf-search-count { font-size: 10px; }
  .pdf-sidebar { width: 150px; }
  .pdf-canvas-wrapper { padding: 12px; }
  .pdf-statusbar { padding: 3px 12px; font-size: 10px; min-height: 28px; }

  /* Mejoras para transiciones más rápidas en móvil */
  .pdf-canvas {
    transition: transform 0.03s cubic-bezier(0.2, 0.9, 0.4, 1.1);
  }

  .pdf-canvas-wrapper {
    -webkit-overflow-scrolling: touch;
    scroll-behavior: auto;
  }
}

@media (max-width: 576px) {
  .pdf-filename { max-width: 100px; }
  .pdf-toolbar { gap: 4px; }
  .pdf-toolbar-divider { margin: 0 2px; }
  .pdf-search-group { min-width: 150px; }
  .pdf-sidebar { width: 120px; }
  .pdf-thumbnail span { font-size: 9px; }
  .pdf-canvas-wrapper { padding: 8px; }
  .file-pdf-view { width: 24px; height: 24px; }
  .file-pdf-view i { font-size: 11px; }

  /* Ocultar tooltips en móvil pequeño */
  .pdf-tool-btn[data-title]::after,
  .pdf-tool-btn[data-title]::before,
  .pdf-header-btn[data-title]::after,
  .pdf-header-btn[data-title]::before {
    display: none;
  }
}

@media (max-width: 480px) {
  .pdf-search-group { min-width: 130px; }
  .pdf-search-count { display: none; }
  .pdf-zoom-select { max-width: 60px; }
}

@media (max-width: 768px) and (orientation: landscape) {
  .pdf-fullscreen-header { padding: 4px 12px; }
  .pdf-toolbar { padding: 4px 8px; }
  .pdf-canvas-wrapper { padding: 8px; }
  .pdf-filename { max-width: 300px; }
  .pdf-sidebar { width: 140px; }
}

@media (min-width: 1440px) {
  .pdf-fullscreen-header { padding: 8px 20px; min-height: 44px; }
  .pdf-header-left { font-size: 14px; }
  .pdf-filename { font-size: 13px; }
  .pdf-toolbar { padding: 8px 16px; min-height: 48px; }
  .pdf-tool-btn { padding: 6px 12px; font-size: 14px; min-width: 36px; height: 36px; }
  .pdf-page-info { height: 36px; }
  .pdf-page-input { width: 50px; font-size: 14px; }
  .pdf-zoom-select { height: 36px; font-size: 14px; }
  .pdf-sidebar { width: 220px; }
  .pdf-canvas-wrapper { padding: 30px; }
  .pdf-statusbar { padding: 6px 20px; font-size: 12px; min-height: 36px; }

  .pdf-tool-btn[data-title]::after {
    padding: 8px 12px;
    font-size: 13px;
    top: 120%;
  }
  .pdf-tool-btn[data-title]:hover::after { top: 145%; }
  .pdf-tool-btn[data-title]::before { border-width: 6px; }
}

/* Pantalla completa nativa */
.pdf-fullscreen-overlay:fullscreen,
.pdf-fullscreen-overlay:-webkit-full-screen,
.pdf-fullscreen-overlay:-moz-full-screen {
  background: rgba(0, 0, 0, 0.95);
}

/* Reducción de movimiento */
@media (prefers-reduced-motion: reduce) {
  .pdf-fullscreen-container,
  .pdf-fullscreen-overlay { animation: none !important; }
  .pdf-tool-btn, .pdf-header-btn { transition: none !important; }
  .pdf-canvas { transition: none !important; }
  .pdf-canvas-wrapper { scroll-behavior: auto; }
  .pdf-canvas.zoom-feedback { animation: none !important; }
}

/* Dispositivos táctiles */
@media (hover: none) and (pointer: coarse) {
  .pdf-tool-btn[data-title]::after,
  .pdf-header-btn[data-title]::after {
    transition: opacity 0.3s ease, top 0.3s ease;
    top: 130%;
  }
  .pdf-tool-btn[data-title]:active::after,
  .pdf-header-btn[data-title]:active::after {
    opacity: 1;
    top: 140%;
  }
  .pdf-tool-btn[data-title]::before,
  .pdf-header-btn[data-title]::before {
    display: none;
  }
}

/* ================================
   5. Ventana de Progreso de Subida (Upload Progress)
   ================================ */

.upload-progress { /* Contenedor flotante, análogo al de descarga pero para subidas */
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 10001;
  background: var(--drive-bg);
  border-radius: var(--drive-radius);
  padding: 14px 16px;
  box-shadow: var(--drive-shadow-lg);
  min-width: 280px;
  max-width: 380px;
  width: auto;
  border: 1px solid var(--drive-border);
  transition: var(--drive-transition);
  animation: slideInRight 0.3s ease-out;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.4;
}

/* Header del progreso de subida */
.upload-progress-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  gap: 8px;
}

.upload-progress-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--drive-text);
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  letter-spacing: -0.2px;
}

.upload-progress-title i {
  color: var(--drive-primary);
  font-size: 12px;
  width: 14px;
  text-align: center;
}

.upload-progress-files-count { /* Muestra "Subiendo archivo X de Y" */
  font-size: 11px;
  color: var(--drive-primary);
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
}

.upload-progress-files-count i { font-size: 10px; }

/* Archivo actual subiendo */
.upload-progress-current-file { /* Info del archivo que se está subiendo en este momento */
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--drive-primary-light);
  padding: 6px 10px;
  border-radius: var(--drive-radius-sm);
  margin-bottom: 10px;
  font-size: 11px;
  color: var(--drive-text);
  border: 1px solid var(--drive-border);
  min-height: 38px;
}

.upload-progress-current-file i {
  color: var(--drive-primary);
  font-size: 12px;
  flex-shrink: 0;
}

.current-file-name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 500;
  font-size: 11px;
}

/* Información de tamaño y velocidad (similar a download) */
.upload-progress-info {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
  font-size: 10px;
  color: var(--drive-text-light);
  gap: 12px;
  flex-wrap: wrap;
}
.upload-progress-size, .upload-progress-speed {
  font-family: monospace;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
  font-weight: 500;
}
.upload-progress-size i, .upload-progress-speed i { font-size: 10px; width: 12px; text-align: center; flex-shrink: 0; }

/* Barra de progreso general de la subida */
.upload-progress-bar-container {
  background: var(--drive-border);
  border-radius: 10px;
  overflow: hidden;
  height: 6px;
  margin: 10px 0;
}
.upload-progress-bar {
  width: 0%;
  height: 100%;
  background: linear-gradient(90deg, var(--drive-primary), var(--drive-primary-dark));
  border-radius: 10px;
  transition: width 0.3s ease;
  position: relative;
  overflow: hidden;
}
.upload-progress-bar::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  animation: shimmer 1.5s infinite;
}
.upload-progress-percent {
  font-size: 11px;
  font-weight: 600;
  color: var(--drive-primary);
  text-align: right;
  margin-top: 4px;
  letter-spacing: -0.2px;
}

/* Botón de cancelar */
.upload-progress-cancel {
  margin-top: 12px;
  width: 100%;
  padding: 6px 12px;
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid var(--drive-danger);
  border-radius: var(--drive-radius-sm);
  color: var(--drive-danger);
  font-size: 11px;
  font-weight: 500;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: var(--drive-transition);
  font-family: inherit;
}
.upload-progress-cancel i { font-size: 11px; width: 14px; text-align: center; }
.upload-progress-cancel:hover {
  background: rgba(239, 68, 68, 0.2);
  transform: translateY(-1px);
}
.upload-progress-cancel:active { transform: translateY(0); }

/* Estados (completado, error) */
.upload-progress.completed .upload-progress-cancel { display: none; }
.upload-progress.error .upload-progress-bar { background: linear-gradient(90deg, var(--drive-danger), #dc2626); }
.upload-progress.error .upload-progress-percent { color: var(--drive-danger); }
.upload-progress.error .upload-progress-cancel { display: flex; }
.upload-progress.completed .upload-progress-bar { background: linear-gradient(90deg, #10b981, #059669); }
.upload-progress.completed .upload-progress-percent { color: #10b981; }
.upload-progress.completed .upload-progress-bar::after { animation: none; }

/* Barra de progreso por archivo individual (si se suben varios en lote) */
.current-file-progress { margin: 8px 0 4px 0; }
.current-file-bar {
  height: 3px;
  background: var(--drive-primary-light);
  width: 0%;
  border-radius: 2px;
  transition: width 0.2s ease;
}

/* ===== RESPONSIVE PARA UPLOAD PROGRESS ===== */
/* (Estructura muy similar a download-progress, aplicando los mismos breakpoints) */
@media (max-width: 1024px) {
  .upload-progress { min-width: 260px; max-width: 360px; padding: 12px 14px; bottom: 15px; right: 15px; }
  .upload-progress-title { font-size: 11px; }
  .upload-progress-files-count { font-size: 10px; }
  .upload-progress-current-file { padding: 5px 8px; font-size: 10px; }
  .current-file-name { font-size: 10px; }
  .upload-progress-info { font-size: 9px; }
  .upload-progress-percent { font-size: 10px; }
  .upload-progress-cancel { padding: 5px 10px; font-size: 10px; }
}
@media (max-width: 768px) {
  .upload-progress { left: 15px; right: 15px; bottom: 15px; min-width: auto; max-width: none; width: calc(100% - 30px); padding: 12px 14px; }
  .upload-progress-current-file { margin-bottom: 8px; }
  .upload-progress-info { flex-direction: row; gap: 12px; }
}
@media (max-width: 576px) {
  .upload-progress { left: 10px; right: 10px; bottom: 70px; width: calc(100% - 20px); padding: 10px 12px; }
  .upload-progress-title { font-size: 10px; }
  .upload-progress-files-count { font-size: 9px; }
  .current-file-name { font-size: 9px; }
  .upload-progress-info { font-size: 8px; gap: 8px; }
  .upload-progress-percent { font-size: 9px; }
  .upload-progress-cancel { padding: 4px 8px; font-size: 9px; }
}
@media (max-width: 375px) {
  .upload-progress { padding: 8px 10px; }
  .upload-progress-title { font-size: 9px; }
  .upload-progress-title i { font-size: 9px; }
  .current-file-name { font-size: 8px; }
  .upload-progress-info { font-size: 7.5px; }
  .upload-progress-percent { font-size: 8px; }
  .upload-progress-cancel { padding: 3px 6px; font-size: 8px; }
}
@media (max-width: 768px) and (orientation: landscape) {
  .upload-progress { bottom: 10px; padding: 8px 12px; min-width: 300px; width: auto; max-width: 400px; left: auto; right: 10px; }
  .upload-progress-current-file { margin-bottom: 6px; padding: 4px 8px; }
  .upload-progress-info { flex-direction: row; gap: 12px; }
}
@media (min-width: 1440px) {
  .upload-progress { min-width: 320px; max-width: 420px; padding: 16px 20px; bottom: 30px; right: 30px; }
  .upload-progress-title { font-size: 13px; }
  .upload-progress-files-count { font-size: 12px; }
  .upload-progress-current-file { padding: 8px 12px; font-size: 12px; }
  .current-file-name { font-size: 12px; }
  .upload-progress-info { font-size: 11px; }
  .upload-progress-percent { font-size: 12px; }
  .upload-progress-cancel { padding: 8px 14px; font-size: 12px; }
}

/* ================= ESTILOS PARA IMGViewer ================= */

.img-viewer-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10000;
  display: none;
}

.img-viewer-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.92);
  backdrop-filter: blur(8px);
}

.img-viewer-container {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  z-index: 10001;
}

.img-viewer-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 20px;
  background: rgba(0, 0, 0, 0.7);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  flex-shrink: 0;
}

.img-viewer-title {
  display: flex;
  align-items: center;
  gap: 10px;
  color: white;
  font-size: 14px;
}

.img-viewer-title svg,
.img-viewer-title i {
  font-size: 16px;
  width: 16px;
  height: 16px;
  color: #60a5fa;
}

.img-viewer-filename {
  max-width: 400px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.img-viewer-controls {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Botones del visor con estilo base para tooltips - TAMAÑO REDUCIDO */
.img-viewer-controls button {
  background: rgba(255, 255, 255, 0.1);
  border: none;
  color: white;
  width: 30px;
  height: 30px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 0;
}

.img-viewer-controls button svg,
.img-viewer-controls button i {
  width: 14px;
  height: 14px;
  font-size: 14px;
}

.img-viewer-controls button:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: scale(1.05);
}

/* ===== TOOLTIPS PARA BOTONES DEL VISOR DE IMÁGENES ===== */
/* Tooltip para botones del visor (aparece DEBAJO) */
.img-viewer-controls button[data-title]::after {
  content: attr(data-title);
  position: absolute;
  top: 115%;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(31, 41, 55, 0.95);
  color: #fff;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 500;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, top 0.2s ease;
  z-index: 1000;
  font-family: sans-serif;
  letter-spacing: 0.3px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  backdrop-filter: blur(4px);
}

/* Flecha del tooltip (apunta hacia ARRIBA) */
.img-viewer-controls button[data-title]::before {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border-width: 4px;
  border-style: solid;
  border-color: transparent transparent rgba(31, 41, 55, 0.95) transparent;
  opacity: 0;
  transition: opacity 0.2s ease, top 0.2s ease;
  pointer-events: none;
  z-index: 1000;
}

.img-viewer-controls button[data-title]:hover::after {
  opacity: 1;
  top: 130%;
}

.img-viewer-controls button[data-title]:hover::before {
  opacity: 1;
  top: 105%;
}

.img-viewer-controls button:disabled[data-title]::after,
.img-viewer-controls button:disabled[data-title]::before {
  display: none;
}

/* Span del nivel de zoom */
.img-zoom-level {
  color: white;
  font-size: 12px;
  min-width: 45px;
  text-align: center;
  font-family: monospace;
  margin: 0 2px;
}

.img-viewer-content {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  min-height: 0;
  width: 100%;
  height: 100%;
}

/* Botones de navegación - TAMAÑO AJUSTADO */
.img-nav-prev,
.img-nav-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0, 0, 0, 0.5);
  border: none;
  color: white;
  width: 40px;
  height: 60px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.img-nav-prev svg,
.img-nav-next svg,
.img-nav-prev i,
.img-nav-next i {
  width: 20px;
  height: 20px;
  font-size: 20px;
}

.img-nav-prev {
  left: 20px;
}

.img-nav-next {
  right: 20px;
}

.img-nav-prev:hover:not(:disabled),
.img-nav-next:hover:not(:disabled) {
  background: rgba(0, 0, 0, 0.7);
  transform: translateY(-50%) scale(1.05);
}

.img-nav-prev:disabled,
.img-nav-next:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

/* Tooltip para botones de navegación (prev/next) */
.img-nav-prev[data-title]::after,
.img-nav-next[data-title]::after {
  content: attr(data-title);
  position: absolute;
  bottom: -35px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(31, 41, 55, 0.95);
  color: #fff;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 500;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, bottom 0.2s ease;
  z-index: 1000;
  font-family: sans-serif;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  backdrop-filter: blur(4px);
}

.img-nav-prev[data-title]::before,
.img-nav-next[data-title]::before {
  content: '';
  position: absolute;
  bottom: -12px;
  left: 50%;
  transform: translateX(-50%);
  border-width: 4px;
  border-style: solid;
  border-color: transparent transparent rgba(31, 41, 55, 0.95) transparent;
  opacity: 0;
  transition: opacity 0.2s ease, bottom 0.2s ease;
  pointer-events: none;
  z-index: 1000;
}

.img-nav-prev[data-title]:hover::after,
.img-nav-next[data-title]:hover::after {
  opacity: 1;
  bottom: -45px;
}

.img-nav-prev[data-title]:hover::before,
.img-nav-next[data-title]:hover::before {
  opacity: 1;
  bottom: -20px;
}

.img-nav-prev:disabled[data-title]::after,
.img-nav-next:disabled[data-title]::after,
.img-nav-prev:disabled[data-title]::before,
.img-nav-next:disabled[data-title]::before {
  display: none;
}

.img-viewer-image-container {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
  width: 100%;
  height: 100%;
}

.img-viewer-image {
  max-width: 90%;
  max-height: 90%;
  object-fit: contain;
  transition: transform 0.1s ease-out;
  user-select: none;
  -webkit-user-drag: none;
}

.img-loader {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 15px;
  color: white;
}

.img-loader-spinner {
  width: 40px;
  height: 40px;
  border: 3px solid rgba(255, 255, 255, 0.2);
  border-top-color: #60a5fa;
  border-radius: 50%;
  animation: img-spinner-rotate 0.8s linear infinite;
}

@keyframes img-spinner-rotate {
  to {
    transform: rotate(360deg);
  }
}

.img-loader-error {
  text-align: center;
  color: #ef4444;
}

.img-loader-error i {
  font-size: 40px;
  margin-bottom: 10px;
}

.img-viewer-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 20px;
  background: rgba(0, 0, 0, 0.7);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  flex-shrink: 0;
}

.img-viewer-info {
  display: flex;
  gap: 20px;
  color: rgba(255, 255, 255, 0.7);
  font-size: 12px;
}

.img-viewer-position-mobile {
  display: none;
  background: rgba(0, 0, 0, 0.6);
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 12px;
  color: white;
  font-family: monospace;
  letter-spacing: 0.5px;
}

.img-viewer-counter {
  color: rgba(255, 255, 255, 0.7);
  font-size: 12px;
}

/* ================================
   6. Visualizador de Imagenes
   ================================ */

/* Botón que aparece en la tarjeta del archivo de imagen (vista grid) */
.file-img-view {
  position: absolute;
  bottom: 8px;
  right: 8px;
  background: #f59e0b;
  border: none;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  color: white;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  opacity: 0;
  z-index: 5;
}

.file-img-view svg,
.file-img-view i {
  width: 14px;
  height: 14px;
  font-size: 14px;
}

/* Mostrar el botón al hacer hover sobre la tarjeta */
.file-card:hover .file-img-view {
  opacity: 1;
}

/* Efecto hover del botón de imagen */
.file-img-view:hover {
  background: #d97706;
  transform: scale(1.05);
}

/* Botón en vista lista para ver imágenes */
.file-row .row-action.view-img {
  background: transparent;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  color: var(--drive-text-light, #6b7280);
}

.file-row .row-action.view-img svg,
.file-row .row-action.view-img i {
  width: 14px;
  height: 14px;
  font-size: 14px;
}

.file-row .row-action.view-img:hover {
  background: rgba(245, 158, 11, 0.1);
  color: #f59e0b;
}

/* ===== OPCIÓN DE VER IMAGEN EN EL MENÚ CONTEXTUAL ===== */
.context-menu-item.drive-ctx-view-img {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  cursor: pointer;
  transition: all 0.2s ease;
  color: var(--drive-text, #1f2937);
}

.context-menu-item.drive-ctx-view-img i {
  width: 16px;
  font-size: 14px;
  color: #f59e0b;
}

.context-menu-item.drive-ctx-view-img:hover {
  background: var(--drive-primary-light, rgba(96, 165, 250, 0.1));
}

/* ==================== RESPONSIVE ==================== */

/* Tablets */
@media (max-width: 1024px) {
  .img-viewer-filename {
    max-width: 300px;
  }

  .img-viewer-controls button {
    width: 28px;
    height: 28px;
  }

  .img-viewer-controls button svg,
  .img-viewer-controls button i {
    width: 13px;
    height: 13px;
    font-size: 13px;
  }
}

/* Móviles grandes */
@media (max-width: 768px) {
  .img-viewer-header {
    padding: 8px 12px;
  }

  .img-viewer-filename {
    max-width: 150px;
    font-size: 12px;
  }

  /* Ocultar texto del título en móviles pequeños (se verá en 576px) */
  .img-viewer-title-text {
    display: inline-block;
  }

  .img-viewer-controls {
    gap: 4px;
  }

  .img-viewer-controls button {
    width: 26px;
    height: 26px;
  }

  .img-viewer-controls button svg,
  .img-viewer-controls button i {
    width: 12px;
    height: 12px;
    font-size: 12px;
  }

  .img-zoom-level {
    font-size: 11px;
    min-width: 40px;
  }

  .img-nav-prev,
  .img-nav-next {
    width: 32px;
    height: 50px;
  }

  .img-nav-prev svg,
  .img-nav-next svg,
  .img-nav-prev i,
  .img-nav-next i {
    width: 16px;
    height: 16px;
    font-size: 16px;
  }

  .img-nav-prev {
    left: 8px;
  }

  .img-nav-next {
    right: 8px;
  }

  .img-viewer-info {
    gap: 10px;
    font-size: 10px;
  }

  /* Mostrar el indicador de posición móvil y ocultar el contador tradicional si se usa */
  .img-viewer-position-mobile {
    display: inline-block;
  }

  /* Opcional: Si el contador está separado, ocultarlo en móvil */
  .img-viewer-counter {
    display: none;
  }
}

/* Móviles pequeños (máximo 576px) - UI MÁS LIMPIA */
@media (max-width: 576px) {
  .img-viewer-header {
    padding: 6px 10px;
  }

  /* Ocultar el nombre del archivo completamente (ganamos espacio) */
  .img-viewer-filename {
    display: none;
  }

  /* Ocultar el texto del título (solo icono) */
  .img-viewer-title-text {
    display: none;
  }

  /* Simplificar aún más los botones */
  .img-viewer-controls button {
    width: 24px;
    height: 24px;
  }

  .img-viewer-controls button svg,
  .img-viewer-controls button i {
    width: 11px;
    height: 11px;
    font-size: 11px;
  }

  /* Ocultar tooltips en móvil pequeño (opcional, mejora UX al no tapar botones) */
  .img-viewer-controls button[data-title]::after,
  .img-viewer-controls button[data-title]::before,
  .img-nav-prev[data-title]::after,
  .img-nav-prev[data-title]::before,
  .img-nav-next[data-title]::after,
  .img-nav-next[data-title]::before {
    display: none;
  }

  .img-zoom-level {
    font-size: 10px;
    min-width: 35px;
  }

  .img-nav-prev,
  .img-nav-next {
    width: 28px;
    height: 40px;
    border-radius: 4px;
  }

  .img-nav-prev svg,
  .img-nav-next svg,
  .img-nav-prev i,
  .img-nav-next i {
    width: 14px;
    height: 14px;
    font-size: 14px;
  }

  .img-viewer-footer {
    padding: 6px 12px;
  }

  .img-viewer-info {
    gap: 8px;
    font-size: 9px;
  }

  /* Ajuste para el indicador móvil */
  .img-viewer-position-mobile {
    font-size: 10px;
    padding: 2px 8px;
  }
}

/* Móviles muy pequeños (max 480px) */
@media (max-width: 480px) {
  .img-viewer-header {
    padding: 4px 8px;
  }

  .img-viewer-title svg,
  .img-viewer-title i {
    width: 12px;
    height: 12px;
    font-size: 12px;
  }

  .img-viewer-controls button {
    width: 22px;
    height: 22px;
  }

  .img-viewer-controls button svg,
  .img-viewer-controls button i {
    width: 10px;
    height: 10px;
    font-size: 10px;
  }

  .img-zoom-level {
    font-size: 9px;
    min-width: 32px;
  }

  .img-nav-prev,
  .img-nav-next {
    width: 24px;
    height: 36px;
  }

  .img-nav-prev svg,
  .img-nav-next svg,
  .img-nav-prev i,
  .img-nav-next i {
    width: 12px;
    height: 12px;
    font-size: 12px;
  }

  /* Reducir el tamaño de la imagen para tener más margen */
  .img-viewer-image {
    max-width: 95%;
    max-height: 85%;
  }
}

/* Pantallas grandes */
@media (min-width: 1440px) {
  .img-viewer-filename {
    max-width: 600px;
    font-size: 15px;
  }

  .img-viewer-controls button {
    width: 34px;
    height: 34px;
  }

  .img-viewer-controls button svg,
  .img-viewer-controls button i {
    width: 16px;
    height: 16px;
    font-size: 16px;
  }

  .img-nav-prev,
  .img-nav-next {
    width: 48px;
    height: 70px;
  }

  .img-nav-prev svg,
  .img-nav-next svg,
  .img-nav-prev i,
  .img-nav-next i {
    width: 24px;
    height: 24px;
    font-size: 24px;
  }
}

/* ================================
   7. Aviso de Modo Presentación (PDF Viewer)
   ================================ */

/* Contenedor principal del aviso */
.pdf-presentation-warning {
    position: fixed;
    top: 80px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10002;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Card del aviso */
.pdf-warning-card {
    background: var(--cred-bg, rgba(17, 25, 40, 0.95));
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: 16px;
    padding: 12px 20px;
    min-width: 320px;
    text-align: center;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.2);
    border: 1px solid var(--cred-border, rgba(255, 255, 255, 0.08));
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Icono contenedor (círculo decorativo) */
.pdf-warning-icon {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    background: var(--cred-accent-light, rgba(59, 130, 246, 0.15));
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pdf-warning-icon i {
    font-size: 16px;
    color: var(--cred-accent, #3b82f6);
}

/* Contenido de texto */
.pdf-warning-content {
    flex: 1;
    text-align: left;
}

.pdf-warning-title {
    margin: 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--cred-text, #ffffff);
    letter-spacing: -0.01em;
}

.pdf-warning-action {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
}

.pdf-warning-action i {
    font-size: 10px;
    color: var(--cred-accent, #3b82f6);
}

.pdf-warning-action span {
    font-size: 11px;
    color: var(--cred-text-light, #e2e8f0);
}

/* Icono informativo lateral */
.pdf-warning-info {
    font-size: 14px;
    color: var(--cred-accent, #3b82f6);
    opacity: 0.7;
    flex-shrink: 0;
}

/* ===== RESPONSIVE PARA EL AVISO ===== */
@media (max-width: 768px) {
    .pdf-presentation-warning {
        top: 70px;
    }

    .pdf-warning-card {
        padding: 10px 16px;
        min-width: 280px;
        gap: 10px;
    }

    .pdf-warning-icon {
        width: 28px;
        height: 28px;
    }

    .pdf-warning-icon i {
        font-size: 14px;
    }

    .pdf-warning-title {
        font-size: 12px;
    }

    .pdf-warning-action span {
        font-size: 10px;
    }

    .pdf-warning-info {
        font-size: 12px;
    }
}

@media (max-width: 576px) {
    .pdf-presentation-warning {
        top: 60px;
        left: 10px;
        right: 10px;
        transform: none;
        width: calc(100% - 20px);
    }

    .pdf-warning-card {
        min-width: auto;
        width: 100%;
        padding: 8px 12px;
        gap: 8px;
    }

    .pdf-warning-icon {
        width: 24px;
        height: 24px;
    }

    .pdf-warning-icon i {
        font-size: 12px;
    }

    .pdf-warning-title {
        font-size: 11px;
    }

    .pdf-warning-action span {
        font-size: 9px;
    }

    .pdf-warning-info {
        font-size: 11px;
    }
}

@media (max-width: 380px) {
    .pdf-warning-action span {
        display: none;
    }

    .pdf-warning-title {
        font-size: 10px;
    }

    .pdf-warning-card {
        padding: 6px 10px;
    }
}

@media (min-width: 1440px) {
    .pdf-presentation-warning {
        top: 90px;
    }

    .pdf-warning-card {
        padding: 14px 24px;
        min-width: 380px;
        gap: 14px;
    }

    .pdf-warning-icon {
        width: 36px;
        height: 36px;
    }

    .pdf-warning-icon i {
        font-size: 18px;
    }

    .pdf-warning-title {
        font-size: 14px;
    }

    .pdf-warning-action span {
        font-size: 12px;
    }

    .pdf-warning-info {
        font-size: 15px;
    }
}

/* Reducción de movimiento */
@media (prefers-reduced-motion: reduce) {
    .pdf-presentation-warning {
        transition: none !important;
    }
}

/* ================================
   8. Botón de tres puntos en tarjetas (grid)
   ================================ */

.file-card .card-menu-btn {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 28px;
  height: 28px;
  border: none;
  background: transparent;
  border-radius: 50%;
  color: var(--drive-text-light, #6b7280);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
  transition: background-color 0.2s, color 0.2s, transform 0.2s;
  z-index: 5;
}

.file-card .card-menu-btn svg,
.file-card .card-menu-btn i {
  font-size: 14px;
  width: 14px;
  height: 14px;
  line-height: 1;
}

.file-card .card-menu-btn:hover {
  background: var(--drive-primary-light, rgba(59, 130, 246, 0.1));
  color: var(--drive-primary, #3b82f6);
  transform: scale(1.1);
}

.file-card .card-menu-btn:active {
  transform: scale(0.95);
}

/* Asegurar que no interfiera con el check de selección */
.file-card.selected .card-menu-btn {
  background: transparent;
  color: var(--drive-primary, #3b82f6);
  z-index: 6;
}

.file-card.selected .card-menu-btn:hover {
  background: rgba(255, 255, 255, 0.3);
}

/* ========================================
   Menú desplegable para tarjetas
   ======================================== */
.card-context-menu {
  position: fixed;
  z-index: 10001;
  background: var(--drive-bg, #ffffff);
  border-radius: 10px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.06);
  min-width: 160px;
  padding: 6px 0;
  animation: cardMenuFadeIn 0.18s ease-out;
  overflow: visible;
}

/* Ocultar la cabecera del menú contextual clonado */
.card-context-menu .context-menu-header {
  display: none !important;
}

/* Ocultar el divisor extra */
.card-context-menu .context-menu-divider {
  display: none !important;
}

/* Flecha indicadora que apunta hacia arriba */
.card-context-menu::before {
  content: '';
  position: absolute;
  top: -6px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-bottom: 7px solid var(--drive-bg, #ffffff);
  z-index: 10002;
  filter: drop-shadow(0 -2px 2px rgba(0, 0, 0, 0.04));
}

/* Items del menú */
.card-context-menu .context-menu-item {
  padding: 9px 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.8rem;
  font-weight: 400;
  color: var(--drive-text, #1f2937);
  transition: all 0.15s ease;
  border: none;
  background: transparent;
  width: 100%;
  text-align: left;
  margin: 0;
  line-height: 1.4;
}

.card-context-menu .context-menu-item:hover {
  background: var(--drive-primary-light, rgba(59, 130, 246, 0.08));
  color: var(--drive-primary, #3b82f6);
}

.card-context-menu .context-menu-item svg,
.card-context-menu .context-menu-item i {
  font-size: 15px;
  width: 16px;
  height: 16px;
  text-align: center;
  color: inherit;
  flex-shrink: 0;
}

.card-context-menu .context-menu-item span {
  flex: 1;
}

/* Item peligroso (Eliminar) */
.card-context-menu .context-menu-item.danger {
  color: #ef4444;
  border-top: 1px solid var(--drive-border, rgba(0, 0, 0, 0.06));
  margin-top: 3px;
  padding-top: 10px;
}

.card-context-menu .context-menu-item.danger:hover {
  background: rgba(239, 68, 68, 0.08);
  color: #dc2626;
}

/* ========================================
   Ajustes responsive
   ======================================== */
@media (max-width: 768px) {
  .file-card .card-menu-btn {
    width: 30px;
    height: 30px;
    top: 4px;
    right: 4px;
  }

  .card-context-menu {
    min-width: 150px;
    border-radius: 8px;
  }

  .card-context-menu .context-menu-item {
    padding: 10px 16px;
    font-size: 0.82rem;
  }
}

@media (max-width: 480px) {
  .file-card .card-menu-btn {
    width: 32px;
    height: 32px;
    top: 3px;
    right: 3px;
  }

  .card-context-menu {
    min-width: 155px;
    border-radius: 10px;
  }

  .card-context-menu::before {
    display: none;
  }

  .card-context-menu .context-menu-item {
    padding: 11px 16px;
    font-size: 0.85rem;
  }
}

/* Dispositivos táctiles */
@media (hover: none) and (pointer: coarse) {
  .file-card .card-menu-btn {
    width: 34px;
    height: 34px;
    background: transparent;
  }

  .file-card .card-menu-btn:active {
    background: var(--drive-primary-light, rgba(59, 130, 246, 0.1));
    color: var(--drive-primary, #3b82f6);
    transform: scale(0.9);
  }

  .card-context-menu .context-menu-item {
    padding: 12px 16px;
    font-size: 0.88rem;
  }
}

/* Animación */
@keyframes cardMenuFadeIn {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Reducción de movimiento */
@media (prefers-reduced-motion: reduce) {
  .card-context-menu {
    animation: none !important;
  }

  .file-card .card-menu-btn {
    transition: none !important;
  }
}

/* ================================
   9. SimpleDrive - Archivos Protegidos
   ================================ */

/* Estilos para archivos protegidos en vista GRID */
.file-card.protected {
  position: relative;
  opacity: 0.95;
  background: var(--drive-bg-secondary, #f9fafb);
  border: 1px solid var(--drive-warning, #f59e0b);
  box-shadow: 0 1px 2px rgba(245, 158, 11, 0.1);
}

/* Badge de escudo en la esquina superior derecha (reemplaza los 3 puntitos) - SIN TOOLTIP */
.file-protected-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(245, 158, 11, 0.15);
  border-radius: 50%;
  cursor: default;
  z-index: 5;
  transition: all 0.2s ease;
}

.file-protected-badge i {
  font-size: 16px;
  color: var(--drive-warning, #f59e0b);
}

.file-protected-badge:hover {
  background: rgba(245, 158, 11, 0.25);
  transform: scale(1.05);
}

/* Mejorar el nombre del archivo en grid */
.file-card .file-name {
  font-size: 12px;
  font-weight: 500;
  text-align: center;
  margin-top: 8px;
  margin-bottom: 4px;
  padding: 0 8px;
  word-break: break-word;
  overflow-wrap: break-word;
  white-space: normal;
  line-height: 1.3;
  max-height: 32px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
}

/* Ajuste para archivos protegidos */
.file-card.protected .file-name {
  padding-right: 8px;
  padding-left: 8px;
  max-width: 100%;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

/* Ocultar botón de menú de 3 puntos en archivos protegidos */
.file-card.protected .card-menu-btn {
  display: none;
}

/* Estilos para archivos protegidos en vista LISTA */
.file-row.protected {
  background-color: rgba(245, 158, 11, 0.05);
  border-left: 3px solid var(--drive-warning, #f59e0b);
}

.file-row.protected .file-row-name {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

/* Mejorar el nombre en vista lista */
.file-row .file-row-name {
  word-break: break-word;
  overflow-wrap: break-word;
  white-space: normal;
  line-height: 1.4;
}

.file-row.protected .file-row-actions .row-action.delete {
  display: none;
}

/* Icono de escudo en vista lista - SIN TOOLTIP */
.file-row-name i.fa-shield-alt {
  flex-shrink: 0;
}