/* ================================================
   FIMF CLOUD - RESPONSIVE (tablet / movil)
   Solo media queries: no altera la version de PC.
   ================================================ */

/* ============ SIDEBAR: boton «<» solo en PC (>1024px) ============
   En tablet y movil el sidebar es un cajon con hamburguesa,
   el boton «<» no aplica (se oculta). */
@media (max-width: 1024px) {
  .sidebar-collapse { display: none !important; }
}

/* ================= TABLETA (769px - 1100px) ================= */
@media (min-width: 769px) and (max-width: 1100px) {
  .content { padding: var(--sp-3) var(--sp-4); }
  .editor-head { --eh-x: var(--sp-4); }
  .topbar { padding: 0 var(--sp-4); }
  .fm-search-input { width: 150px; }
  .file-grid { grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); }
  .trash-grid { grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); }
  .storage-page .card.stat-card { padding: var(--sp-3); }
  .dash-hero { gap: var(--sp-3); }
  .modal { max-width: min(520px, calc(100vw - 40px)); }
  .floating-panel { max-width: min(560px, calc(100vw - 40px)); }
  #notif-dropdown { width: min(360px, calc(100vw - 32px)) !important; }
  .notif-page > .notif-cats { width: 190px !important; }
  .fm-toolbar-actions { gap: 3px; }
}

/* ================= MOVIL / TABLET VERTICAL (<=900px) ================= */
@media (max-width: 900px) {
  /* --- Notificaciones: filtros arriba (chips), lista debajo --- */
  .notif-page {
    flex-direction: column !important;
    height: auto !important;
    min-height: calc(100vh - 150px) !important;
  }
  .notif-page > .notif-cats {
    width: 100% !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-content: flex-start;
    align-items: center;
    justify-content: flex-start;
    border-right: none !important;
    border-bottom: 1px solid var(--border-subtle);
    padding: 10px !important;
    gap: 8px;
    overflow: visible !important;
  }
  .notif-page > .notif-cats::-webkit-scrollbar { display: none; }
  .notif-cats .notif-sidebar-top { margin: 0 !important; width: auto !important; padding: 0; }
  .notif-cats .notif-sidebar-top .btn { width: auto !important; white-space: nowrap; margin: 0 !important; padding: 8px 13px !important; font-size: 11px !important; border-radius: 20px !important; }
.notif-cats .notif-sidebar-label,
.notif-cats .notif-sep { display: none !important; }
.notif-cats .notif-group,
.notif-cats .notif-group-body,
.notif-cats .notif-group-inner { display: contents !important; }
.notif-cats .notif-group-head { display: none !important; }
.notif-cats .notif-group-inner { opacity: 1 !important; }
  .notif-cats .notif-sidebar-btn {
    width: auto !important;
    flex: 0 0 auto;
    white-space: nowrap;
    margin: 0 !important;
    padding: 8px 13px !important;
    border-radius: 20px !important;
    border: 1px solid var(--border-subtle);
    background: var(--bg-surface);
    font-size: var(--fs-xs);
  }
  .notif-cats .notif-sidebar-btn.active { background: var(--accent-muted); border-color: transparent; box-shadow: none; }
  .notif-cats .notif-cat-badge { margin-left: 2px; }
  .notif-page > .notif-main-col { min-height: 340px; }
  .notif-head { flex-wrap: wrap !important; gap: 8px !important; padding: var(--sp-3) !important; }
  .notif-head-actions { width: 100%; justify-content: flex-start; }
  .notif-list { padding-bottom: var(--sp-3); }
  .notif-row { margin: 8px; }
  #notif-bulk-bar { padding: 8px var(--sp-3) !important; }
  #notif-bulk-bar > div { flex-wrap: wrap; gap: 6px !important; }
}

/* ================= MOVIL (<=768px) ================= */
@media (max-width: 768px) {
  /* --- Shell --- */
  .sidebar { width: min(290px, 86vw); }
  body.sidebar-collapsed .sidebar { width: min(74px, 30vw); }
  .topbar { gap: var(--sp-2); padding: 0 var(--sp-3); }
  .topbar-title {
    font-size: var(--fs-md);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    min-width: 0; flex: 0 1 auto;
  }
  .topbar-spacer { min-width: 0; }
  .content { padding: var(--sp-3) var(--sp-2); }
  .editor-head { --eh-x: var(--sp-2); }
  .content-header { gap: var(--sp-2); margin-bottom: var(--sp-4); }
  .content-title { font-size: var(--fs-lg); }
  .content-sub { font-size: var(--fs-xs); }

  /* --- Menu usuario del topbar / lateral (siempre anclado al sidebar) --- */
  .user-dropdown {
    width: min(232px, calc(100vw - 24px));
  }

  /* --- Mis archivos: barra de herramientas --- */
  .fm-toolbar { gap: 6px; margin-bottom: var(--sp-3); }
  .fm-toolbar-actions { justify-content: flex-start; gap: 3px; min-height: 0; }
  .fm-search { flex: 1 1 100%; order: -1; height: 34px; }
  .fm-search-input { width: 100%; flex: 1; min-width: 0; }
  .fm-sep { display: none; }
  .fm-quota-chip { order: -2; }
  .fm-btn { height: 34px; padding: 0 10px; font-size: var(--fs-xs); }
  .fm-breadcrumb { font-size: var(--fs-xs); overflow-x: auto; white-space: nowrap; scrollbar-width: none; }
  .fm-breadcrumb::-webkit-scrollbar { display: none; }

  /* --- Mis archivos: grilla y listas --- */
  .file-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-2); }
  .trash-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-2); }
  .file-card { padding: var(--sp-3) var(--sp-2); text-align: center; }
  .file-card-name { font-size: var(--fs-xs); word-break: break-word; }
  .file-list-header { display: none; }
  .file-list-item {
    grid-template-columns: 1fr 84px;
    padding: 9px 8px;
    gap: var(--sp-2);
    border-bottom: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
  }
  .file-list-size { text-align: right; }
  .file-details-header { display: none; }
  .file-details-row {
    grid-template-columns: 34px 1fr 92px;
    padding: 9px 8px;
    gap: var(--sp-2);
  }
  .fm-empty { padding: var(--sp-8) var(--sp-3); }

  /* --- Almacenamiento --- */
  .storage-page .content-header { justify-content: flex-start !important; }
  .storage-page .card.stat-card { padding: var(--sp-3) !important; }
  .storage-tree { overflow-x: auto; }
  .tree-item { min-width: 240px; }
  .tree-meta { max-width: 45%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .st-bar-cell { display: none; }
  .st-legend-chip { flex: 1 1 130px; justify-content: center; }
  .st-live-chip { font-size: 10px; padding: 4px 10px; }

  /* --- Dashboard --- */
  .dash-welcome { min-height: 0; padding: var(--sp-3); }
  .dash-hero { gap: var(--sp-2); }
  .dash-quick-card { padding: var(--sp-3); }
  .dash-activity-item { gap: var(--sp-2); padding: var(--sp-2) var(--sp-3); }
  .dash-section { margin-top: var(--sp-4); }
  .dash-ring-stats { gap: var(--sp-2); }
  .dash-ring-stat { min-width: 96px; padding: var(--sp-1) var(--sp-2); }

  /* --- Panel flotante (perfil / temas / info / actualizaciones) --- */
  .floating-panel {
    width: calc(100vw - 20px);
    max-width: calc(100vw - 20px);
    max-height: 88vh;
  }
  .floating-panel-header { padding: var(--sp-4) var(--sp-4) var(--sp-2); }
  .floating-panel-nav {
    padding: 0 var(--sp-4) var(--sp-2);
    flex-wrap: wrap;
    gap: 6px;
    overflow: visible;
  }
  .floating-panel-nav::-webkit-scrollbar { display: none; }
  .fp-nav-btn { flex: 0 0 auto; padding: 7px 12px; font-size: 11.5px; }
  .floating-panel-body { padding: var(--sp-3) var(--sp-4) var(--sp-4); }
  #fp-banner {
    margin-top: calc(-1 * var(--sp-3)) !important;
    margin-left: calc(-1 * var(--sp-4)) !important;
    margin-right: calc(-1 * var(--sp-4)) !important;
    padding-left: var(--sp-4) !important;
    padding-right: var(--sp-4) !important;
  }

  /* --- Popover de notificaciones del topbar --- */
  #notif-dropdown {
    left: 10px !important;
    right: 10px !important;
    width: auto !important;
    max-height: 68vh;
  }

  /* --- Notificaciones: filas apiladas y meta en segunda linea --- */
  .notif-row { flex-wrap: wrap; padding: 11px 12px; gap: 10px; }
  .notif-item { flex: 1 1 0; min-width: 0; }
  .notif-item-meta { order: 5; width: 100%; max-width: none; justify-content: flex-start; margin-top: 2px; padding-left: 86px; gap: 6px; }
  .notif-icon { width: 32px; height: 32px; }
  .notif-unread-dot { margin-top: 4px; }
  .notif-item-title { font-size: 13.5px; white-space: normal; overflow: visible; text-overflow: clip; }
  .notif-empty { min-height: 260px; padding: var(--sp-8) var(--sp-3); }
  .notif-empty-icon { width: 68px; height: 68px; }
  .notif-empty-icon svg { width: 28px; height: 28px; }

  /* --- Visor de archivos --- */
  .viewer-window {
    width: calc(100vw - 16px);
    height: calc(100vh - 90px);
    max-width: calc(100vw - 16px);
    max-height: calc(100vh - 90px);
  }
  .viewer-window.viewer-compact {
    width: calc(100vw - 16px);
    max-width: calc(100vw - 16px);
  }
  .viewer-winbar { padding: 6px 8px; gap: var(--sp-1); }
  .viewer-ql .viewer-window { width: calc(100vw - 16px); max-width: calc(100vw - 16px); }
.arc-list-head, .arc-row { grid-template-columns: minmax(0,1fr) 74px; }
.arc-col-type { display: none; }
.arc-col-date { display: none; }
.arc-col-comp { display: none; }
.arc-tree { display: none; }
.arc-bar { gap: var(--sp-1); flex-wrap: wrap; }
.arc-bar #arc-extract-sel:disabled { display: flex; visibility: hidden; }
  .office-doc { padding: var(--sp-3); }

  /* --- Modales --- */
  .modal { max-width: calc(100vw - 20px); border-radius: var(--radius-lg); }
  .modal-header { padding: var(--sp-4) var(--sp-4) var(--sp-2); }
  .modal-body { padding: 0 var(--sp-4) var(--sp-3); }
  .modal-footer { padding: var(--sp-3) var(--sp-4) var(--sp-4); flex-wrap: wrap; }

  /* --- Grupos / amigos / chat --- */
  .group-card { padding: var(--sp-3); }
  .chat-layout { gap: var(--sp-2); }
  .admin-toolbar { gap: var(--sp-2); }
  .admin-search { max-width: none; width: 100%; }
  .count-chip { font-size: 10px; padding: 6px 11px; }

  /* --- Context menu --- */
  .win11-ctx { min-width: 210px; }
}

/* ================= MOVIL PEQUENO (<=560px) ================= */
@media (max-width: 560px) {
  .topbar { padding: 0 10px; }
  .topbar-title { font-size: var(--fs-base); }
  .topbar-actions { gap: 0; }

  .file-grid { gap: var(--sp-2); }
  .file-card-icon { width: 44px; height: 44px; }
  .file-card-meta { font-size: 10px; }

  .dash-quick { gap: var(--sp-2); }
  .dash-welcome-title { font-size: var(--fs-base); }

  .storage-page .card.stat-card { padding: var(--sp-3) !important; }
  .storage-page [style*="minmax(230px"] { gap: var(--sp-2) !important; }
  .st-pct { width: 46px; }
  .st-kpi-value { font-size: var(--fs-lg); }

  .floating-panel-header { padding: var(--sp-3) var(--sp-3) var(--sp-1); }
  .floating-panel-nav { padding: 0 var(--sp-3) var(--sp-2); }
  .floating-panel-body { padding: var(--sp-3); }
  #fp-banner {
    margin-top: calc(-1 * var(--sp-3)) !important;
    margin-left: calc(-1 * var(--sp-3)) !important;
    margin-right: calc(-1 * var(--sp-3)) !important;
    padding-left: var(--sp-3) !important;
    padding-right: var(--sp-3) !important;
  }
  .floating-panel-title { font-size: var(--fs-md); }

  .fm-toolbar-actions { gap: 2px; }
  .fm-btn { padding: 0 8px; gap: 5px; }
  .fm-btn span { font-size: 10.5px; }

  .notif-head { padding: var(--sp-2) var(--sp-3) !important; }
  .notif-head h2 { font-size: var(--fs-md) !important; }
  #notif-list-container { padding: 0; }

  .img-ed-controls { padding: 8px 12px 12px; }
}

/* ================= MUY PEQUENO (<=420px) ================= */
@media (max-width: 420px) {
  .content { padding: var(--sp-2) 6px; }
  .editor-head { --eh-x: 6px; }
  .file-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
  .file-card { padding: var(--sp-2) 4px; }
  .file-details-row { grid-template-columns: 30px 1fr 78px; padding: 8px 4px; }
  .file-list-item { grid-template-columns: 1fr 76px; padding: 8px 4px; }
  .topbar-title { font-size: var(--fs-sm); }
  .btn { font-size: var(--fs-xs); }
  .modal-header { padding: var(--sp-3) var(--sp-3) var(--sp-1); }
  .modal-body { padding: 0 var(--sp-3) var(--sp-2); }
}