/* ==========================================================================
   FlowprintFiles - tema "cloud workspace" (indigo/cyan)
   Se inyecta en la web (FlowprintFiles) via nginx sub_filter.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap');

:root,
body,
#app {
  /* --- paleta base FlowprintFiles -> mockup --- */
  --background: #070a12;
  --surfacePrimary: #0f172a;
  --surfaceSecondary: #1e293b;
  --textPrimary: #94a3b8;
  --textSecondary: #e2e8f0;
  --divider: rgba(148, 163, 184, 0.12);
  --dividerPrimary: rgba(148, 163, 184, 0.10);
  --dividerSecondary: rgba(148, 163, 184, 0.18);
  --borderPrimary: rgba(148, 163, 184, 0.10);
  --borderSecondary: rgba(148, 163, 184, 0.20);
  --hover: rgba(148, 163, 184, 0.10);

  --blue: #6366f1;
  --dark-blue: #4f46e5;
  --icon-blue: #818cf8;
  --icon-green: #34d399;
  --icon-orange: #fb923c;
  --icon-red: #f87171;
  --icon-violet: #a78bfa;
  --icon-yellow: #fbbf24;
  --item-selected: rgba(99, 102, 241, 0.14);

  /* tokens propios */
  --fpf-sidebar: #0b1120;
  --fpf-card: #0f172a;
  --fpf-brand: #6366f1;
  --fpf-brand-600: #4f46e5;
  --fpf-cyan: #38bdf8;
  --fpf-slate-800: #1e293b;
  --fpf-slate-700: #334155;
  --fpf-radius: 0.85rem;
  --fpf-glow: 0 0 25px -4px rgba(99, 102, 241, 0.35);
  --fpf-glow-sm: 0 0 15px -3px rgba(99, 102, 241, 0.25);
  --fpf-sidebar-w: 272px;
}

html, body, #app, input, button, textarea, select, .message {
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif !important;
}

body {
  background: var(--background) !important;
}

/* la pantalla de carga de FlowprintFiles es blanca a saco (hardcodeada);
   si no la oscurecemos, cada recarga da un flash blanco muy feo */
#loading {
  background: var(--background) !important;
}
#loading .spinner > div {
  background-color: #818cf8 !important;
}

/* fondos-glow decorativos */
body::before,
body::after {
  content: '';
  position: fixed;
  z-index: 0;
  pointer-events: none;
  border-radius: 9999px;
  filter: blur(120px);
}
body::before {
  width: 40vw; height: 40vw;
  top: 20%; left: 45%;
  background: rgba(79, 70, 229, 0.10);
}
body::after {
  width: 28vw; height: 28vw;
  bottom: 10%; right: 15%;
  background: rgba(56, 189, 248, 0.09);
}
#app { position: relative; z-index: 1; }

/* ==========================================================================
   LOGIN
   ========================================================================== */

/* SOLO el formulario de login (form sin clase). Los de ajustes son form.card. */
#app form:not(.card) {
  background: var(--fpf-card) !important;
  border: 1px solid var(--fpf-slate-800) !important;
  border-radius: 1.25rem !important;
  box-shadow: var(--fpf-glow-sm), 0 24px 60px -24px rgba(0, 0, 0, 0.7) !important;
  padding: 2.25rem !important;
  max-width: 22rem !important;
}
#app form:not(.card) h1 {
  color: #fff !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  font-size: 1.5rem !important;
}
#app form:not(.card) .input {
  background: #0b1120 !important;
  border: 1px solid var(--fpf-slate-800) !important;
  border-radius: 0.7rem !important;
  color: var(--textSecondary) !important;
}
#app form:not(.card) .input:focus {
  border-color: rgba(99, 102, 241, 0.7) !important;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.18) !important;
  outline: none !important;
}
#app form:not(.card) .button--block {
  background: linear-gradient(90deg, var(--fpf-brand-600), #4338ca) !important;
  box-shadow: var(--fpf-glow-sm) !important;
  color: #fff !important;
  border-radius: 0.7rem !important;
}
#app form:not(.card) .button--block:hover {
  box-shadow: var(--fpf-glow) !important;
}

/* ==========================================================================
   AJUSTES (form.card, checkboxes, selects)
   ========================================================================== */

#app .dashboard { background: transparent !important; }

#app form.card,
#app .dashboard .card {
  background: var(--fpf-card) !important;
  border: 1px solid var(--fpf-slate-800) !important;
  border-radius: 1rem !important;
  box-shadow: 0 20px 45px -25px rgba(0, 0, 0, 0.5) !important;
}
#app .dashboard h2,
#app form.card h2 {
  color: #fff !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
}
#app .dashboard p {
  color: var(--textPrimary) !important;
}
#app .dashboard p > input[type="checkbox"] {
  accent-color: var(--fpf-brand);
  width: 16px !important;
  height: 16px !important;
  margin: 2px 10px 0 0 !important;
  flex-shrink: 0;
  cursor: pointer;
}
#app .dashboard p:has(> input[type="checkbox"]) {
  display: flex !important;
  align-items: flex-start !important;
  line-height: 1.4 !important;
  padding: 4px 0 !important;
}
#app .dashboard select,
#app .dashboard input[type="text"],
#app .dashboard input[type="password"] {
  background: #0b1120 !important;
  border: 1px solid var(--fpf-slate-800) !important;
  border-radius: 0.6rem !important;
  color: var(--textSecondary) !important;
}
#app .dashboard .button {
  color: var(--fpf-brand) !important;
}
/* pestañas de ajustes */
#app .dashboard nav a,
#app .dashboard .row > nav a {
  color: var(--textPrimary) !important;
}
#app .dashboard nav a.active,
#app .dashboard nav a.router-link-active {
  color: #818cf8 !important;
  border-color: #818cf8 !important;
}

/* ==========================================================================
   BOTONES
   ========================================================================== */

.button,
button.button {
  border-radius: 0.7rem !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  transition: all 0.18s ease !important;
}
.button--flat {
  color: var(--fpf-brand) !important;
}
.button--flat:hover {
  background: rgba(99, 102, 241, 0.10) !important;
}
.button.button--blue,
#login .button {
  background: linear-gradient(90deg, var(--fpf-brand-600), #4338ca) !important;
  box-shadow: var(--fpf-glow-sm) !important;
  color: #fff !important;
}
.button.button--blue:hover,
#login .button:hover {
  box-shadow: var(--fpf-glow) !important;
  transform: translateY(-1px) !important;
}

/* ==========================================================================
   SIDEBAR
   ========================================================================== */

nav {
  background: var(--fpf-sidebar) !important;
  border-right: 1px solid rgba(30, 41, 59, 0.8) !important;
  padding: 1rem 0.85rem !important;
  width: 272px !important;
  min-width: 272px !important;
  display: flex !important;
  flex-direction: column !important;
  /* de origen empieza en top:64px (para dejar hueco a la cabecera, que antes
     ocupaba todo el ancho). Ahora la cabecera esta confinada al area de
     contenido (ver regla "header"), asi que el sidebar sube hasta arriba del
     todo para no dejar una franja negra vacia encima suyo. */
  top: 0 !important;
  height: 100vh !important;
}
/* la tarjeta de marca hereda un border-top generico de FlowprintFiles (pensado
   para separarla de un elemento que ya no esta encima); al ser ahora el
   primer elemento del sidebar, esa linea queda flotando sola arriba. */
nav > .fpf-brand {
  border-top: 0 !important;
  /* altura fija = misma altura que la cabecera (64px) para que la linea de
     abajo de esta tarjeta quede exactamente a la misma altura que la linea
     de abajo de la cabecera del area de contenido. */
  height: 48px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  box-sizing: border-box !important;
  /* separador gris entre la tarjeta de marca y el resto del sidebar --
     antes lo daba la etiqueta "Espacio de trabajo" (eliminada), sin ella
     no quedaba ningun corte visual antes de "Mis archivos". */
  border-bottom: 1px solid rgba(148, 163, 184, 0.14) !important;
  margin-bottom: 14px !important;
}
.fpf-nav-bottom {
  margin-top: auto !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 2px;
  padding-top: 0.75rem;
}
.fpf-nav-bottom > .fpf-backup-btn { order: 0; margin-bottom: 2px !important; }
.fpf-nav-bottom > div.credits { order: 1; }
.fpf-nav-bottom > .fpf-profile { order: 2; }
.fpf-nav-bottom > #logout { order: 3; margin-top: 4px !important; }

nav .action,
nav > div > .action {
  border-radius: 0.75rem !important;
  color: var(--textPrimary) !important;
  font-weight: 500 !important;
  margin: 2px 0 !important;
  transition: background 0.15s, color 0.15s !important;
}
nav .action:hover {
  background: rgba(30, 41, 59, 0.5) !important;
  color: #e2e8f0 !important;
}
nav .action .material-icons {
  color: #64748b !important;
}
/* item activo (router-link-active si lo hubiera, o el primero de archivos).
   Antes llevaba un borde indigo brillante -- al lado del borde gris sutil de
   la tarjeta "Almacenamiento" (mismo ancho real, comprobado con guias) daba
   la sensacion optica de ser una tarjeta mas grande. Mismo borde neutro que
   el resto, solo cambia el fondo/color de texto para marcar que esta activo. */
nav a.router-link-active .action,
nav .action.active {
  background: rgba(99, 102, 241, 0.10) !important;
  border: 1px solid var(--fpf-slate-800) !important;
  color: #818cf8 !important;
}
nav a.router-link-active .action .material-icons {
  color: #818cf8 !important;
}

#logout,
nav #logout {
  color: #fb7185 !important;
}
#logout:hover {
  background: rgba(244, 63, 94, 0.10) !important;
}

/* tarjeta de almacenamiento (div.credits) — el <p class="credits"> (version) se oculta */
nav div.credits {
  visibility: visible !important;
  display: block !important;
  /* FlowprintFiles trae su propio "width" nativo en este elemento (pensado para
     otro layout) que lo dejaba mas estrecho que el resto de tarjetas del
     sidebar, con mas hueco a la derecha que a la izquierda -- forzamos
     100% + border-box para que ocupe el mismo ancho que .fpf-profile, con
     los mismos margenes (los del padding del propio "nav") a ambos lados. */
  width: 100% !important;
  box-sizing: border-box !important;
  margin: 0.75rem 0 0 !important;
  padding: 0.9rem !important;
  background: rgba(15, 23, 42, 0.8) !important;
  border: 1px solid var(--fpf-slate-800) !important;
  border-radius: 0.85rem !important;
  color: #cbd5e1 !important;
  font-size: 0.75rem !important;
  font-weight: 600 !important;
}
nav p.credits,
p.credits {
  display: none !important;
  visibility: hidden !important;
}

/* oculta el banner "el aviso de proyecto archivado" en Ajustes */
.dashboard > .card {
  display: none !important;
}

/* Idioma fijado en espanol: todo lo inyectado por FlowprintFiles (Dispositivos,
   Backup, Almacenamiento, etc.) esta escrito en espanol y no se traduce con el
   selector nativo -- si el usuario cambiara el idioma nativo, quedaria una
   mezcla inconsistente. Se oculta el selector (por atributo name, no por texto,
   asi sigue funcionando aunque el idioma activo cambie el propio label "Idioma"). */
h3:has(+ select[name="selectLanguage"]),
select[name="selectLanguage"] {
  display: none !important;
}

/* pestana nativa "Gestion Compartida" (shares) -- sin uso en este despliegue
   (herramienta personal de un solo admin). Selector por ruta, no por texto. */
a[href="/settings/shares"] {
  display: none !important;
}

/* pestana nativa "Ajustes del perfil" -- ahora vive dentro del panel que
   abre la tarjeta "admin" del sidebar (openProfilePanel), no como pagina
   aparte. Selector por ruta, no por texto. */
a[href="/settings/profile"] {
  display: none !important;
}

/* ==========================================================================
   CABECERA
   ========================================================================== */

/* logo redundante: el sidebar ya tiene su propia tarjeta de marca
   (icono + "FlowprintFiles") -- sobra repetirlo aqui, a la izquierda del
   icono home, en la cabecera del area de contenido. */
header > img {
  display: none !important;
}

header {
  /* SIN backdrop-filter aqui: convierte a "header" en el contenedor de referencia
     de sus descendientes position:fixed (el buscador en pantalla completa es uno),
     y rompe su tamano -- ver #search.active. Compensamos con mas opacidad solida. */
  background: rgba(11, 17, 32, 0.94) !important;
  border-bottom: 1px solid rgba(30, 41, 59, 0.8) !important;
  /* la cabecera es position:fixed de origen y por defecto ocupa TODO el ancho,
     pasando por encima del sidebar. La confinamos al area de contenido (a la
     derecha del sidebar) para que quede justo encima de la tabla de archivos,
     no solapada con el menu lateral. */
  left: var(--fpf-sidebar-w) !important;
  width: calc(100% - var(--fpf-sidebar-w)) !important;
}

#search #input,
#search > div:first-child {
  background: rgba(15, 23, 42, 0.9) !important;
  border: 1px solid var(--fpf-slate-800) !important;
  border-radius: 0.75rem !important;
}
#search.active #input,
#search #input:focus-within {
  border-color: rgba(99, 102, 241, 0.7) !important;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.18) !important;
}
#search #input input {
  color: var(--textSecondary) !important;
}

/* Los resultados de busqueda ya NO se muestran en la capa nativa a pantalla
   completa (tapaba sidebar + listado con una lista sin estilo) -- los
   pintamos nosotros dentro de la tabla de archivos (fpf-theme.js,
   performSearch/renderSearchResults). Aqui solo neutralizamos esa capa:
   que el buscador se quede como una caja normal en la cabecera. */
#search.active {
  position: static !important;
  height: auto !important;
  width: 100% !important;
  max-width: 25em !important;
}
#search .overlay,
#search #result {
  display: none !important;
}

/* ------------------------------------------------------------- resultados */

.fpf-search-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.65rem 1.5rem;
  background: rgba(99, 102, 241, 0.08);
  border-bottom: 1px solid rgba(30, 41, 59, 0.6);
  font-size: 0.85rem;
  color: var(--textPrimary);
}
.fpf-search-banner strong { color: var(--textSecondary); font-weight: 600; }
.fpf-search-banner button {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  background: transparent;
  border: 1px solid var(--fpf-slate-800);
  color: var(--textPrimary);
  border-radius: 0.6rem;
  padding: 0.3rem 0.65rem;
  font-size: 0.8rem;
  cursor: pointer;
}
.fpf-search-banner button:hover {
  background: var(--fpf-slate-800);
  color: #e2e8f0;
}
.fpf-search-banner button .material-icons {
  font-size: 1rem;
}

header .action,
#dropdown .action,
#more {
  border-radius: 0.7rem !important;
  color: var(--textPrimary) !important;
}
header .action:hover {
  background: var(--fpf-slate-800) !important;
  color: #e2e8f0 !important;
}
#dropdown {
  background: var(--fpf-card) !important;
  border: 1px solid var(--fpf-slate-800) !important;
  border-radius: 0.85rem !important;
}

/* ==========================================================================
   BREADCRUMBS + LISTADO
   ========================================================================== */

.breadcrumbs {
  background: rgba(7, 10, 18, 0.5) !important;
  border-bottom: 1px solid rgba(30, 41, 59, 0.4) !important;
  padding: 0.75rem 1.5rem !important;
}
.breadcrumbs a,
.breadcrumbs span {
  color: var(--textPrimary) !important;
  font-weight: 500 !important;
}
.breadcrumbs a:hover { color: #e2e8f0 !important; }

/* Cuando fpf-theme.js mueve .breadcrumbs dentro de la cabecera (junto al
   logo), pasa de ser una fila propia a ser un item mas de la fila -- sin
   fondo/borde/padding propios, ancho acotado y sin salto de linea. */
header .breadcrumbs {
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  margin: 0 0.75rem 0 0.5rem !important;
  display: flex !important;
  align-items: center !important;
  flex: 0 1 auto !important;
  max-width: 14rem;
  overflow: hidden;
  white-space: nowrap;
}
header .breadcrumbs a,
header .breadcrumbs span {
  font-size: 0.85rem !important;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
header .breadcrumbs i.material-icons {
  font-size: 1.1rem !important;
}

#listing {
  background: transparent !important;
}
/* archivos ocultos (empiezan por punto) -- la app nativa los atenua al
   0.33 de opacidad; se pide menos atenuado, al 0.80. */
.file-icons [aria-label^="."],
.file-icons [data-ext=".bak"] {
  opacity: 0.8 !important;
}
#listing h2 {
  color: #64748b !important;
  font-size: 0.7rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
}
#listing .item {
  background: transparent !important;
  border-radius: 0.75rem !important;
  border: 1px solid transparent !important;
  color: var(--textPrimary) !important;
  transition: background 0.14s, border-color 0.14s !important;
}
#listing .item:hover {
  background: rgba(30, 41, 59, 0.4) !important;
}
#listing .item.selected {
  background: rgba(99, 102, 241, 0.12) !important;
  border-color: rgba(99, 102, 241, 0.30) !important;
  color: #e2e8f0 !important;
}
#listing .item.header {
  color: #64748b !important;
  border: none !important;
}
#listing .item i,
#listing .item .material-icons {
  color: #818cf8 !important;
}

/* estado vacio */
#listing .message,
.dashboard .message {
  color: #64748b !important;
}

/* barras de progreso (subidas, disco) */
progress::-webkit-progress-value,
.progress > div {
  background: linear-gradient(90deg, var(--fpf-brand), var(--fpf-cyan)) !important;
}

/* prompt / modales */
.card,
.prompt,
#prompts .card {
  background: var(--fpf-card) !important;
  border: 1px solid var(--fpf-slate-800) !important;
  border-radius: 1rem !important;
}

/* ==========================================================================
   ELEMENTOS INYECTADos por fpf-theme.js
   ========================================================================== */

.fpf-badge-pro {
  padding: 2px 6px;
  font-size: 10px;
  font-weight: 700;
  background: rgba(99, 102, 241, 0.20);
  color: #818cf8;
  border: 1px solid rgba(99, 102, 241, 0.30);
  border-radius: 4px;
  letter-spacing: 0.03em;
}
.fpf-subtitle {
  font-size: 0.72rem;
  color: #64748b;
  font-weight: 500;
  margin-top: 1px;
}
.fpf-nav-label {
  padding: 0 0.5rem 0.4rem;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #64748b;
  text-transform: uppercase;
}
.fpf-profile {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.75rem;
  border-radius: 1rem;
  margin-top: 0.5rem;
  cursor: pointer;
}
.fpf-profile:hover, .fpf-profile.active { background: rgba(30, 41, 59, 0.4); }
.fpf-avatar {
  width: 56px; height: 56px;
  border-radius: 9999px;
  background: linear-gradient(135deg, #7c3aed, var(--fpf-brand));
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 700; font-size: 1.15rem;
  border: 2px solid var(--fpf-slate-800);
  flex-shrink: 0;
}
.fpf-profile-name {
  font-size: 1.25rem; font-weight: 600; color: #fff; line-height: 1.1;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  min-width: 0; flex: 1 1 auto;
}
.fpf-profile-logout {
  margin-left: auto; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  border-radius: 1rem;
  background: transparent; border: 0;
  color: #fb7185; cursor: pointer;
}
.fpf-profile-logout:hover { background: rgba(244, 63, 94, 0.12); }
.fpf-profile-logout svg { width: 24px; height: 24px; }

.fpf-kbd {
  padding: 2px 6px;
  font-size: 10px;
  font-weight: 600;
  color: #94a3b8;
  background: var(--fpf-slate-800);
  border: 1px solid rgba(51, 65, 85, 0.8);
  border-radius: 6px;
}
.fpf-sync-badge {
  /* boton flotante fijo en la esquina inferior derecha, no en la cabecera --
     independiente de header (position:fixed, sin transform/filter en sus
     ancestros que lo desvien) asi que se posiciona contra el viewport real. */
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 1500;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0.6rem 1rem;
  border-radius: 9999px;
  border: 1px solid rgba(16, 185, 129, 0.20);
  background: rgba(15, 23, 42, 0.95);
  color: #34d399;
  font-size: 0.78rem;
  font-weight: 600;
  white-space: nowrap;
  box-shadow: 0 10px 28px -6px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(16, 185, 129, 0.06);
  backdrop-filter: blur(10px);
}
.fpf-sync-badge.off {
  border-color: rgba(244, 63, 94, 0.20);
  background: rgba(244, 63, 94, 0.10);
  color: #fb7185;
}
.fpf-sync-badge.warn {
  border-color: rgba(217, 143, 30, 0.25);
  background: rgba(217, 143, 30, 0.12);
  color: #fbbf24;
}
.fpf-sync-badge.grey {
  border-color: rgba(148, 163, 184, 0.20);
  background: rgba(148, 163, 184, 0.10);
  color: #94a3b8;
}
.fpf-sync-badge.grey .fpf-sync-dot { animation: none; }
.fpf-sync-dot {
  width: 8px; height: 8px; border-radius: 9999px;
  background: currentColor;
  animation: fpf-pulse 2s infinite;
}
@keyframes fpf-pulse { 0%,100%{opacity:1} 50%{opacity:.35} }

.fpf-empty-wrap {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  min-height: 60vh;
}
.fpf-dropzone {
  width: 100%;
  max-width: 42rem;
  border: 2px dashed var(--fpf-slate-800);
  border-radius: 1.5rem;
  padding: 3rem 2rem;
  text-align: center;
  transition: border-color 0.2s, background 0.2s;
}
.fpf-dropzone:hover {
  border-color: rgba(99, 102, 241, 0.5);
  background: rgba(15, 23, 42, 0.3);
}
.fpf-dz-icon {
  width: 88px; height: 88px;
  margin: 0 auto 1.5rem;
  border-radius: 1.25rem;
  background: linear-gradient(180deg, #1e293b, #0f172a);
  border: 1px solid rgba(51, 65, 85, 0.7);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 20px 40px -12px rgba(0,0,0,0.5);
}
.fpf-dz-icon .material-icons { font-size: 44px; color: #818cf8; }
.fpf-dz-title { font-size: 1.6rem; font-weight: 700; color: #fff; letter-spacing: -0.02em; }
.fpf-dz-text { margin: 0.6rem auto 0; max-width: 26rem; font-size: 0.9rem; color: #94a3b8; line-height: 1.5; }
.fpf-dz-actions { margin-top: 2rem; display: flex; flex-wrap: wrap; gap: 0.85rem; justify-content: center; }
.fpf-btn-primary {
  display: inline-flex; align-items: center; gap: 0.6rem;
  padding: 0.75rem 1.5rem;
  border-radius: 0.75rem;
  background: linear-gradient(90deg, var(--fpf-brand-600), #4f46e5);
  color: #fff; font-size: 0.85rem; font-weight: 600;
  box-shadow: var(--fpf-glow);
  border: 0; cursor: pointer;
  transition: transform 0.18s;
}
.fpf-btn-primary:hover { transform: translateY(-2px); }
.fpf-btn-ghost {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.75rem 1.25rem;
  border-radius: 0.75rem;
  background: rgba(30, 41, 59, 0.8);
  color: #e2e8f0; font-size: 0.85rem; font-weight: 500;
  border: 1px solid rgba(51, 65, 85, 0.8);
  cursor: pointer;
}
.fpf-dz-formats { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid rgba(30,41,59,0.6); }
.fpf-dz-formats .hint { font-size: 0.72rem; color: #64748b; margin-bottom: 0.75rem; }
.fpf-chip {
  display: inline-block;
  padding: 4px 10px;
  margin: 3px;
  font-size: 11px; font-weight: 500;
  background: #0f172a;
  border: 1px solid var(--fpf-slate-800);
  border-radius: 6px;
  color: #94a3b8;
}

/* --- panel Dispositivos: pagina a la derecha del sidebar, no un popup --- */
.fpf-devices-panel,
.fpf-backup-panel,
.fpf-profile-panel {
  position: fixed;
  top: 0; left: 272px; right: 0; bottom: 34px;
  z-index: 2000;
  background: var(--background);
  overflow-y: auto;
  padding: 2rem 2.25rem;
  color: var(--textSecondary);
}
/* mientras un panel esta abierto, "Mis archivos" no debe seguir pareciendo activo */
body:has(.fpf-devices-panel) nav a.router-link-active .action,
body:has(.fpf-backup-panel) nav a.router-link-active .action,
body:has(.fpf-profile-panel) nav a.router-link-active .action {
  background: transparent !important;
  border-color: transparent !important;
  color: var(--textPrimary) !important;
}
body:has(.fpf-devices-panel) nav a.router-link-active .action .material-icons,
body:has(.fpf-backup-panel) nav a.router-link-active .action .material-icons,
body:has(.fpf-profile-panel) nav a.router-link-active .action .material-icons {
  color: #64748b !important;
}
.fpf-modal-head { display: flex; align-items: center; justify-content: space-between; max-width: 46rem; }
.fpf-modal-head h2 { margin: 0; font-size: 1.4rem; font-weight: 700; color: #fff; letter-spacing: -0.01em; }
.fpf-modal-x {
  background: none; border: 0; color: #94a3b8; font-size: 1.6rem;
  line-height: 1; cursor: pointer; padding: 0 4px;
}
.fpf-modal-x:hover { color: #fff; }
.fpf-modal-sub { margin: 6px 0 20px; font-size: 0.85rem; color: #94a3b8; max-width: 46rem; }
.fpf-modal-body { max-width: 46rem; }
.fpf-modal .fpf-btn-primary { width: 100%; justify-content: center; }
.fpf-code-box {
  margin-top: 1rem; padding: 1rem;
  background: #0b1120; border: 1px dashed #475569; border-radius: 0.8rem;
  text-align: center;
}
.fpf-code {
  font-size: 2.4rem; font-weight: 700; letter-spacing: 0.5rem;
  color: #fff; font-family: "Plus Jakarta Sans", monospace;
}
.fpf-code-ttl { font-size: 0.75rem; color: #64748b; margin-top: 4px; }

.fpf-devices-btn { width: 100%; text-align: left; }

/* --- arbol de carpetas bajo "Mis archivos" --- */
.fpf-tree {
  margin: 1px 0 4px;
  /* hereda un border-top generico de FlowprintFiles (el mismo problema que ya
     tuvo la tarjeta de marca) -- no hace falta ninguna linea aqui, el arbol
     cuelga directamente de "Mis archivos". */
  border-top: 0 !important;
}
.fpf-tree-node { width: 100%; }
.fpf-tree-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 7px 9px 0;
  border-radius: 0.7rem;
  font-size: 0.74rem;
  font-weight: 500;
  color: var(--textPrimary);
  cursor: pointer;
  user-select: none;
}
.fpf-tree-row:hover { background: rgba(30, 41, 59, 0.5); color: #e2e8f0; }
.fpf-tree-row.active {
  background: rgba(99, 102, 241, 0.10);
  color: #818cf8;
}
.fpf-tree-arrow {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; flex-shrink: 0;
  color: #64748b;
  transition: transform 0.13s ease;
}
.fpf-tree-arrow svg { width: 11px !important; height: 11px !important; }
.fpf-tree-arrow.open { transform: rotate(90deg); }
.fpf-tree-icon { font-size: 21px !important; color: #64748b; flex-shrink: 0; }
.fpf-tree-row.active .fpf-tree-icon { color: #818cf8; }
.fpf-tree-name {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.fpf-tree-children { width: 100%; }

/* --- panel de backup --- */
.fpf-backup-summary {
  padding: 1rem 1.1rem;
  border-radius: 0.9rem;
  background: rgba(15, 23, 42, 0.8);
  border: 1px solid var(--fpf-slate-800);
}
.fpf-backup-list { display: flex; flex-direction: column; gap: 0.6rem; }
.fpf-backup-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem 1rem;
  border-radius: 0.85rem;
  background: rgba(15, 23, 42, 0.6);
  border: 1px solid var(--fpf-slate-800);
}
.fpf-backup-row-date { font-size: 0.85rem; font-weight: 600; color: #e2e8f0; }
.fpf-backup-row-size { font-size: 0.75rem; color: #64748b; margin-top: 2px; }
.fpf-backup-dl {
  display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px;
  border-radius: 0.65rem;
  background: transparent;
  border: 1px solid var(--fpf-slate-800);
  color: var(--textPrimary);
  cursor: pointer;
  flex-shrink: 0;
}
.fpf-backup-dl:hover { background: var(--fpf-slate-800); color: #e2e8f0; }
.fpf-backup-trash {
  display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px;
  border-radius: 0.65rem;
  background: transparent;
  border: 1px solid var(--fpf-slate-800);
  color: var(--textPrimary);
  cursor: pointer;
  flex-shrink: 0;
}
.fpf-backup-trash:hover { background: rgba(239, 68, 68, 0.12); border-color: rgba(239, 68, 68, 0.4); color: #f87171; }

/* --- backup a la carta (picker de archivos dentro del panel de Backup) --- */
.fpf-custom-toggle {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.85rem 1rem;
  margin-top: 0.9rem;
  border-radius: 0.85rem;
  background: rgba(15, 23, 42, 0.6);
  border: 1px solid var(--fpf-slate-800);
  color: #e2e8f0;
  font-size: 0.85rem; font-weight: 600;
  cursor: pointer;
}
.fpf-custom-toggle:hover { background: rgba(15, 23, 42, 0.85); }
.fpf-custom-toggle-arrow {
  display: inline-flex; color: #64748b;
  transition: transform 0.15s ease;
}
.fpf-custom-toggle.open .fpf-custom-toggle-arrow { transform: rotate(90deg); }
.fpf-custom-body {
  margin-top: 0.7rem;
  padding: 0.9rem 1rem 1rem;
  border-radius: 0.85rem;
  background: rgba(15, 23, 42, 0.4);
  border: 1px solid var(--fpf-slate-800);
}
.fpf-picker-tree {
  max-height: 15rem;
  overflow-y: auto;
  border-radius: 0.6rem;
  background: rgba(7, 10, 18, 0.5);
  border: 1px solid var(--fpf-slate-800);
  padding: 0.35rem 0;
}
.fpf-picker-loading { padding: 0.6rem 1rem; font-size: 0.78rem; color: #64748b; }
.fpf-picker-node { width: 100%; }
.fpf-picker-row {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 10px 6px 0;
  font-size: 0.76rem; font-weight: 500;
  color: var(--textPrimary);
}
.fpf-picker-row:hover { background: rgba(30, 41, 59, 0.5); }
.fpf-picker-arrow {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; flex-shrink: 0;
  color: #64748b; cursor: pointer;
  transition: transform 0.13s ease;
}
.fpf-picker-arrow-spacer { visibility: hidden; }
.fpf-picker-arrow.open { transform: rotate(90deg); }
.fpf-picker-check { flex-shrink: 0; cursor: pointer; accent-color: var(--fpf-brand-600); }
.fpf-picker-icon { font-size: 18px !important; color: #64748b; flex-shrink: 0; }
.fpf-picker-name {
  flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.fpf-picker-size { font-size: 0.68rem; color: #64748b; flex-shrink: 0; }
.fpf-picker-children { width: 100%; }
.fpf-custom-actions {
  display: flex; align-items: center; justify-content: space-between;
  gap: 0.75rem;
  margin-top: 0.75rem;
}
.fpf-custom-count { font-size: 0.75rem; color: #94a3b8; }
.fpf-custom-run {
  padding: 0.55rem 1rem;
  font-size: 0.78rem;
  white-space: nowrap;
}
.fpf-custom-run:disabled { opacity: 0.45; cursor: default; }
.fpf-custom-run:disabled:hover { transform: none; }
.fpf-custom-list { display: flex; flex-direction: column; gap: 0.6rem; margin-top: 0.9rem; }
.fpf-custom-list-head {
  display: flex; justify-content: space-between;
  font-size: 0.72rem; color: #64748b; font-weight: 600;
  padding: 0 0.15rem;
}

/* --- panel de Perfil (Ajustes del perfil + Cambiar contraseña) --- */
.fpf-settings-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  max-width: 60rem;
}
.fpf-settings-card {
  flex: 1 1 320px;
  padding: 1.25rem 1.4rem 1.4rem;
  border-radius: 0.9rem;
  background: rgba(15, 23, 42, 0.6);
  border: 1px solid var(--fpf-slate-800);
  display: flex;
  flex-direction: column;
}
.fpf-settings-card h3 {
  margin: 0 0 1rem;
  font-size: 1.05rem;
  font-weight: 700;
  color: #fff;
}
.fpf-settings-check {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.82rem;
  color: var(--textPrimary);
  padding: 0.45rem 0;
  cursor: pointer;
}
.fpf-settings-check input { accent-color: var(--fpf-brand-600); cursor: pointer; }
.fpf-settings-label {
  display: block;
  margin: 0.75rem 0 0.4rem;
  font-size: 0.78rem;
  color: #94a3b8;
}
.fpf-settings-select,
.fpf-settings-input {
  width: 100%;
  padding: 0.65rem 0.8rem;
  margin-bottom: 0.6rem;
  border-radius: 0.6rem;
  background: rgba(7, 10, 18, 0.6);
  border: 1px solid var(--fpf-slate-800);
  color: var(--textSecondary);
  font-size: 0.82rem;
}
.fpf-settings-select:focus,
.fpf-settings-input:focus {
  outline: none;
  border-color: rgba(99, 102, 241, 0.6);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
}
.fpf-settings-msg {
  min-height: 1.1rem;
  font-size: 0.75rem;
  margin: 0.3rem 0;
}
.fpf-settings-msg-ok { color: #4ade80; }
.fpf-settings-msg-err { color: #f87171; }
.fpf-settings-save-link {
  align-self: flex-end;
  margin-top: auto;
  background: none;
  border: 0;
  color: #818cf8;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  padding: 0.3rem 0.2rem;
}
.fpf-settings-save-link:hover { color: #a5b4fc; }
.fpf-settings-save-link:disabled { opacity: 0.5; cursor: default; }

/* --- grid de tarjetas de dispositivo --- */
.fpf-dev-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(236px, 1fr));
  gap: 1.4rem;
  margin-top: 0.5rem;
}
.fpf-dev-tile {
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
  padding: 2rem 1.2rem;
  min-height: 220px;
  background: #0b1120;
  border: 1px solid var(--fpf-slate-800);
  border-radius: 1.3rem;
  color: var(--textSecondary);
  font-family: inherit;
}
.fpf-dev-tile .fpf-dz-icon { width: 80px !important; height: 80px !important; margin: 0 0 16px !important; }
.fpf-dev-tile .fpf-dz-icon svg { width: 44px !important; height: 44px !important; }
.fpf-tile-name { font-size: 1.05rem; font-weight: 600; color: #e2e8f0; word-break: break-word; }
.fpf-tile-meta { font-size: 0.78rem; color: #64748b; margin-top: 4px; }
.fpf-dev-del {
  position: absolute; top: 12px; right: 12px;
  width: 34px; height: 34px; display: grid; place-items: center;
  background: transparent; border: 1px solid transparent; border-radius: 0.7rem;
  color: #64748b; cursor: pointer; transition: color .15s, background .15s, border-color .15s;
}
.fpf-dev-del:hover { color: #f87171; background: rgba(248, 113, 113, 0.1); border-color: rgba(248, 113, 113, 0.35); }
.fpf-dev-dot { display: inline-block; width: 8px; height: 8px; border-radius: 9999px; }
.fpf-dev-dot.on { background: #22c55e; }
.fpf-dev-dot.off { background: #64748b; }

.fpf-dev-add {
  border-style: dashed;
  border-color: #475569;
  color: #94a3b8;
  cursor: pointer;
  font-size: 1rem;
  font-weight: 600;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.fpf-dev-add .fpf-dz-icon { background: transparent; border: 0; box-shadow: none; color: #64748b; }
.fpf-dev-add .fpf-dz-icon svg { width: 52px !important; height: 52px !important; }
.fpf-dev-add:hover:not(:disabled) {
  border-color: rgba(99, 102, 241, 0.6);
  background: rgba(99, 102, 241, 0.06);
  color: #c7d2fe;
}
.fpf-dev-add:hover:not(:disabled) .fpf-dz-icon { color: #818cf8; }
.fpf-dev-add.showing-code {
  border-style: solid;
  border-color: rgba(99, 102, 241, 0.5);
  background: rgba(99, 102, 241, 0.08);
  cursor: default;
}
.fpf-tile-code {
  font-size: 2.1rem; font-weight: 700; letter-spacing: 0.14rem;
  color: #fff; font-family: "Plus Jakarta Sans", monospace;
}
.fpf-tile-ttl { font-size: 0.85rem; color: #818cf8; margin-top: 8px; }
.fpf-tile-cancel {
  position: absolute; top: 10px; right: 14px;
  color: #64748b; font-size: 1.4rem; line-height: 1; cursor: pointer;
}
.fpf-tile-cancel:hover { color: #fb7185; }
.fpf-tile-spin {
  width: 32px; height: 32px; border-radius: 9999px;
  border: 3px solid var(--fpf-slate-800); border-top-color: #818cf8;
  animation: fpf-spin 0.7s linear infinite;
}
@keyframes fpf-spin { to { transform: rotate(360deg); } }

/* ==========================================================================
   MOVIL / PANTALLAS ESTRECHAS
   ========================================================================== */

@media (max-width: 768px) {
  /* el resalte gris/blanco por defecto al tocar (tap highlight) del
     navegador movil se veia como una capa blanca con degradado sobre las
     tarjetas y botones oscuros -- se quita en todos lados. */
  * {
    -webkit-tap-highlight-color: transparent !important;
  }
  #listing .item,
  .fpf-mcard-more,
  .fpf-mnav-tab,
  .menu-button,
  header .fpf-sync-badge,
  .fpf-mobile-nav button {
    -webkit-tap-highlight-color: transparent !important;
    outline: none !important;
  }

  /* la cabecera se confina al area de contenido (a la derecha del sidebar)
     para escritorio -- en movil el sidebar es un cajon superpuesto (off
     canvas), no ocupa hueco de verdad, asi que la cabecera vuelve a ser de
     ancho completo o se queda con una rendija minuscula sin sitio para nada. */
  header {
    left: 0 !important;
    width: 100% !important;
    height: auto !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    padding: 0.6rem 0.85rem !important;
    gap: 0.5rem 0 !important;
    row-gap: 0.6rem !important;
  }
  /* la cabecera pasa de una fila fija (64px, compensada en body) a dos
     filas de alto variable -- sin esto la fila de "ruta + orden" quedaba
     tapada debajo. */
  /* el alto real de la cabecera cambia segun su contenido (ha cambiado ya
     dos veces) -- en vez de un numero fijo que se desincroniza cada vez,
     fpf-theme.js mide el alto real y lo aplica aqui via variable. */
  body { padding-top: var(--fpf-mobile-header-h, 150px) !important; }

  /* boton de mostrar/ocultar el arbol de carpetas (navegacion principal la
     lleva la barra inferior; este se queda como icono normal a la izquierda,
     para las cosas que solo estan en el sidebar: arbol, almacenamiento,
     cerrar sesion). */
  .menu-button {
    position: static !important;
    width: 38px !important;
    height: 38px !important;
    border-radius: 0.75rem !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    /* del todo a la derecha de la fila */
    order: 2;
  }
  .menu-button span { display: none; }

  /* marca movil: como el sidebar esta oculto por defecto, sin esto no se ve
     "FlowprintFiles" en ningun sitio hasta abrir el cajon. */
  .fpf-mobile-brand {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    /* centrada en la fila: hueco automatico a ambos lados */
    order: 0;
    margin: 0 auto !important;
    min-width: 0;
  }
  .fpf-mbrand-icon {
    width: 42px; height: 42px;
    border-radius: 0.8rem;
    background: linear-gradient(135deg, #4f46e5, #6366f1 55%, #38bdf8);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 0 15px -3px rgba(99, 102, 241, 0.4);
    flex-shrink: 0;
  }
  .fpf-mbrand-icon svg { width: 22px; height: 22px; }
  .fpf-mbrand-text { min-width: 0; }
  .fpf-mbrand-row { display: flex; align-items: center; gap: 0.4rem; }
  .fpf-mbrand-name {
    font-weight: 700;
    font-size: 1.02rem;
    color: #fff;
    letter-spacing: -0.02em;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .fpf-mbrand-sub {
    font-size: 0.74rem;
    color: #94a3b8;
    font-weight: 500;
  }

  header .fpf-sync-badge {
    position: static !important;
    /* entre la marca (centrada) y la hamburguesa (del todo a la derecha) */
    order: 1;
    margin-right: 0.5rem;
    box-shadow: none !important;
    backdrop-filter: none !important;
    flex-shrink: 0;
    /* en movil, icono de conexion en vez de la pildora con texto -- el
       color sigue reflejando el estado (verde/rojo/ambar/gris), heredado
       por el pseudo-elemento via "color: currentColor" implicito. */
    width: 42px;
    height: 42px;
    padding: 0 !important;
    border-radius: 0.8rem !important;
    justify-content: center;
    gap: 0;
  }
  header .fpf-sync-badge .fpf-sync-dot,
  header .fpf-sync-badge .fpf-sync-txt {
    display: none;
  }
  header .fpf-sync-badge::before {
    font-family: "Material Icons";
    font-size: 21px;
    content: "wifi";
  }
  #more { display: none !important; }

  /* el resto de iconos (nueva carpeta/archivo, descargar, subir, info) se
     apretujaban sin sitio -- en movil viven en el boton "..." nativo
     (#more) y en el FAB de subir; el resto se oculta. "Cambiar vista" se
     mueve (por JS) a la fila de pills de orden, no se oculta. */
  #dropdown > .action:not(#more) { display: none !important; }

  /* el buscador nativo se colapsa a un simple icono en movil (con un boton
     ".search-button" aparte que lo activa) -- lo forzamos siempre expandido,
     como una caja de busqueda normal, y ocultamos ese boton redundante. */
  #search {
    display: flex !important;
    /* despues de brand/badge/hamburguesa (fila 1) -- fuerza su propia fila */
    order: 3;
    flex: 1 1 100%;
    max-width: none !important;
    /* mismo margen lateral que el resto de la app (el padding de la
       cabecera, 0.85rem), no a sangre como antes. */
    margin: 0 !important;
    width: 100% !important;
  }
  #search #input { width: 100% !important; }
  .search-button { display: none !important; }

  /* fila de ruta ("Inicio > Mis archivos") + contador de items */
  header .breadcrumbs {
    display: flex !important;
    align-items: center;
    /* ultima fila, despues del buscador */
    order: 4;
    flex: 1 1 100%;
    max-width: none !important;
    margin: 0 !important;
    font-size: 0.78rem;
    color: #94a3b8;
    /* la regla de escritorio trae overflow:hidden + nowrap (pensada para
       una fila estrecha en la cabecera) -- en movil, si hay varias carpetas
       de profundidad, tiene que poder verse entera (envolviendo, nunca
       recortada ni con scroll). */
    overflow: visible !important;
    white-space: normal !important;
    flex-wrap: wrap !important;
    row-gap: 0.3rem;
  }
  header .breadcrumbs a {
    display: inline-flex;
    align-items: center;
    max-width: none !important;
    overflow: visible !important;
  }
  header .breadcrumbs .material-icons { font-size: 16px; }
  /* separador visual entre carpetas de la ruta (Inicio > carpeta > ...) */
  header .breadcrumbs a:not(:last-child)::after {
    content: "\203a";
    margin: 0 0.35rem;
    color: #475569;
    font-size: 0.9rem;
  }
  .fpf-mobile-crumb-count {
    margin-left: 0.5rem;
    padding: 0.15rem 0.55rem;
    border-radius: 9999px;
    background: rgba(15, 23, 42, 0.7);
    border: 1px solid var(--fpf-slate-800);
    font-size: 0.68rem;
    font-family: monospace;
    color: #94a3b8;
  }

  /* ---- fila de ruta + ordenacion, a modo de "pills" (sustituye a la fila
     de cabecera de columnas "Nombre / Tamano / Ultima modificacion") ---- */
  /* boton "Cambiar vista": no cabia sin desbordar y su icono no se veia --
     se queda oculto en movil (ver regla #dropdown mas arriba). */
  #listing .item.header > .action { display: none !important; }

  #listing .item.header {
    display: flex !important;
    align-items: center !important;
    gap: 0.4rem !important;
    padding: 0.7rem 1rem !important;
    background: transparent !important;
    border: 0 !important;
  }
  #listing .item.header > div {
    display: flex !important;
    gap: 0.4rem !important;
    overflow: visible !important;
    min-width: 0 !important;
    flex: 1 1 auto !important;
  }
  #listing .item.header p {
    flex: 1 1 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 2px !important;
    padding: 0.4rem 0.4rem !important;
    border-radius: 9999px !important;
    background: rgba(15, 23, 42, 0.7) !important;
    border: 1px solid var(--fpf-slate-800) !important;
    font-size: 0.72rem !important;
    white-space: nowrap !important;
    position: static !important;
    width: auto !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  #listing .item.header p.active {
    background: rgba(99, 102, 241, 0.16) !important;
    border-color: rgba(99, 102, 241, 0.35) !important;
    color: #a5b4fc !important;
  }
  #listing .item.header .material-icons { font-size: 15px !important; color: inherit !important; }

  /* ---- listado como tarjetas, no filas de tabla ---- */
  /* padding-bottom real: ver regla junto a .fpf-mobile-storage mas abajo */
  #listing { padding-left: 0.85rem !important; padding-right: 0.85rem !important; }
  #listing .item:not(.header) {
    display: flex !important;
    align-items: center !important;
    gap: 0.85rem !important;
    padding: 0.75rem !important;
    margin: 0 0 0.6rem !important;
    border-radius: 1rem !important;
    background: rgba(15, 23, 42, 0.7) !important;
    border: 1px solid var(--fpf-slate-800) !important;
  }
  #listing .item:not(.header) > div:first-child {
    width: 44px !important;
    height: 44px !important;
    border-radius: 0.85rem !important;
    background: rgba(99, 102, 241, 0.12) !important;
    flex-shrink: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  #listing .item .material-icons {
    font-size: 24px !important;
    color: #818cf8 !important;
    line-height: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  #listing .item:not(.header) > div:last-child {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 2px !important;
    min-width: 0 !important;
    flex: 1 1 auto !important;
  }
  #listing .item p { position: static !important; width: auto !important; max-width: 100% !important; }
  #listing .item .name {
    font-size: 0.9rem !important;
    font-weight: 600 !important;
    color: #f1f5f9 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
  #listing .item .size, #listing .item .modified {
    font-size: 0.72rem !important;
    color: #64748b !important;
  }
  #listing .item h2 { padding: 0 0 0.4rem !important; }

  /* ---- color del icono segun el tipo de archivo ---- */
  #listing .item.fpf-cat-folder > div:first-child { background: rgba(99, 102, 241, 0.15) !important; }
  #listing .item.fpf-cat-folder .material-icons { color: #818cf8 !important; }
  #listing .item.fpf-cat-image > div:first-child { background: rgba(16, 185, 129, 0.15) !important; }
  #listing .item.fpf-cat-text > div:first-child { background: rgba(167, 139, 250, 0.15) !important; }
  #listing .item.fpf-cat-text .material-icons { color: #a78bfa !important; }
  #listing .item.fpf-cat-blob > div:first-child { background: rgba(56, 189, 248, 0.15) !important; }
  #listing .item.fpf-cat-blob .material-icons { color: #38bdf8 !important; }

  /* ---- etiqueta de extension (EXE / MD / JPG...) ---- */
  .fpf-mcard-ext {
    display: inline-block !important;
    padding: 0.1rem 0.45rem;
    border-radius: 0.4rem;
    background: rgba(99, 102, 241, 0.15);
    color: #a5b4fc;
    font-size: 0.62rem;
    font-weight: 700;
    font-family: monospace;
    letter-spacing: 0.02em;
    white-space: nowrap !important;
    max-width: none !important;
    width: auto !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }
  .fpf-cat-image .fpf-mcard-ext { background: rgba(16, 185, 129, 0.15); color: #6ee7b7; }
  .fpf-cat-text .fpf-mcard-ext { background: rgba(167, 139, 250, 0.15); color: #c4b5fd; }
  .fpf-cat-blob .fpf-mcard-ext { background: rgba(56, 189, 248, 0.15); color: #7dd3fc; }

  /* ---- boton "..." de acciones por fila ---- */
  .fpf-mcard-more {
    margin-left: auto;
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 0.6rem;
    background: transparent;
    border: 0;
    color: #64748b;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .fpf-mcard-more:active { background: rgba(30, 41, 59, 0.7); }
  .fpf-mcard-more .material-icons {
    font-size: 18px !important;
    color: inherit !important;
  }
  /* FlowprintFiles pinta el icono del TIPO de archivo con un ::before segun
     data-type/data-ext de la fila, aplicado a "cualquier" .material-icons
     dentro -- sin esto, el boton "..." heredaba tambien ese icono duplicado. */
  .fpf-mcard-more .material-icons::before { content: none !important; }

  /* ---- tarjeta de almacenamiento fija encima de la barra inferior (no
     dentro del listado -- no se mueve al hacer scroll de los archivos) ---- */
  .fpf-mobile-storage {
    position: fixed;
    left: 0.85rem;
    right: 0.85rem;
    bottom: calc(var(--fpf-mobile-nav-h, 78px) + 10px);
    z-index: 2050;
    padding: 0.9rem;
    border-radius: 1rem;
    background: rgba(15, 23, 42, 0.95);
    border: 1px solid var(--fpf-slate-800);
    backdrop-filter: blur(10px);
    box-shadow: 0 10px 28px -8px rgba(0, 0, 0, 0.55);
  }
  /* hueco al final del listado para que la ultima fila no quede tapada
     detras de la tarjeta fija + la barra inferior. */
  main, #listing {
    padding-bottom: calc(var(--fpf-mobile-nav-h, 78px) + var(--fpf-mobile-storage-h, 84px) + 24px) !important;
  }

  /* ---- boton flotante "Subir archivo" ---- */
  .fpf-mobile-fab {
    position: fixed;
    right: 20px;
    bottom: 96px;
    z-index: 2000;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0.85rem 1.15rem;
    border-radius: 1.1rem;
    background: linear-gradient(90deg, var(--fpf-brand-600), #4f46e5);
    color: #fff;
    font-size: 0.8rem;
    font-weight: 600;
    border: 1px solid rgba(255, 255, 255, 0.15);
    box-shadow: 0 14px 30px -8px rgba(79, 70, 229, 0.55);
  }
  .fpf-mobile-fab:active { transform: scale(0.96); }

  /* ---- menu de acciones por archivo (hoja inferior) ---- */
  .fpf-row-menu-back {
    position: fixed;
    inset: 0;
    z-index: 3000;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: flex-end;
  }
  .fpf-row-menu {
    width: 100%;
    background: var(--fpf-sidebar);
    border: 1px solid var(--fpf-slate-800);
    border-bottom: 0;
    border-radius: 1.25rem 1.25rem 0 0;
    padding: 0.5rem 0 calc(0.5rem + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 -10px 40px -10px rgba(0, 0, 0, 0.6);
  }
  .fpf-row-menu-title {
    padding: 0.75rem 1.25rem 0.5rem;
    font-size: 0.8rem;
    font-weight: 700;
    color: #fff;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    border-bottom: 1px solid var(--fpf-slate-800);
    margin-bottom: 0.4rem;
  }
  .fpf-row-menu-item {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    width: 100%;
    padding: 0.85rem 1.25rem;
    background: transparent;
    border: 0;
    color: #e2e8f0;
    font-size: 0.9rem;
    font-weight: 500;
    text-align: left;
  }
  .fpf-row-menu-item:active { background: rgba(30, 41, 59, 0.6); }
  .fpf-row-menu-item .material-icons { font-size: 20px; color: #94a3b8; }
  .fpf-row-menu-danger { color: #fb7185; }
  .fpf-row-menu-danger .material-icons { color: #fb7185; }
  .fpf-row-menu-cancel {
    margin-top: 0.4rem;
    padding-top: 0.85rem;
    border-top: 1px solid var(--fpf-slate-800);
    justify-content: center;
    color: #94a3b8;
  }

  /* ---- barra de pestanas inferior ---- */
  .fpf-mobile-nav {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 2100;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    background: rgba(11, 17, 32, 0.95);
    backdrop-filter: blur(16px);
    border-top: 1px solid var(--fpf-slate-800);
    padding: 0.5rem 0.5rem calc(0.6rem + env(safe-area-inset-bottom, 0px));
  }
  .fpf-mnav-tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    background: transparent;
    border: 0;
    padding: 0.3rem 0;
    color: #64748b;
    font-size: 0.66rem;
    font-weight: 500;
  }
  .fpf-mnav-tab .material-icons { font-size: 22px; }
  .fpf-mnav-tab.active { color: #818cf8; }
  .fpf-mnav-avatar {
    width: 22px; height: 22px;
    border-radius: 9999px;
    background: linear-gradient(135deg, #7c3aed, var(--fpf-brand));
    color: #fff;
    font-size: 0.62rem;
    font-weight: 700;
    display: flex; align-items: center; justify-content: center;
  }
}