@media (max-width: 820px) {
  :root {
    --m-bg: #f3f5f7;
    --m-surface: #fff;
    --m-line: #dde3e8;
    --m-text: #1f2933;
    --m-muted: #667786;
    --m-primary: #1a73e8;
    --m-primary-soft: #e8f0fe;
  }

  body { background: var(--m-bg) !important; color: var(--m-text) !important; overflow-x: hidden !important; }
  .bg-orb, #contenedor-personaje, .sidebar, .mobile-tabs, .site-footer, #btnLogout, .mobile-dock, .details-head, #btnUploadStatus, .bottom-search { display: none !important; }
  .app { padding: 8px !important; gap: 8px !important; }

  .top {
    position: sticky !important; top: 0 !important; z-index: 60 !important;
    display: grid !important; grid-template-columns: 1fr auto !important; align-items: center !important;
    background: var(--m-surface) !important; border: 1px solid var(--m-line) !important; border-radius: 10px !important;
    padding: 8px 10px !important;
  }
  .brand-gif { width: 24px !important; height: 24px !important; }
  .top h1 { margin: 0 !important; font-size: 1rem !important; font-weight: 700 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; }
  #userBox { min-height: 34px !important; height: 34px !important; border-radius: 8px !important; padding: 0 10px !important; font-size: .78rem !important; border: 1px solid var(--m-line) !important; background: #fff !important; color: #222 !important; }
  #userBox::before { content: none !important; }

  .main { background: transparent !important; border: none !important; box-shadow: none !important; padding: 0 !important; }

  .main-head {
    position: sticky !important; top: 50px !important; z-index: 55 !important;
    display: flex !important; gap: 6px !important; overflow-x: auto !important;
    margin: 0 !important; padding: 0 !important; background: var(--m-bg) !important; border: none !important;
  }
  .main-actions, .main-actions-left, .main-actions-right { display: contents !important; }
  .main-head .btn, #btnMoreMobile {
    flex: 0 0 auto !important; width: auto !important; min-height: 30px !important; height: 30px !important;
    padding: 0 10px !important; border-radius: 14px !important; border: 1px solid var(--m-line) !important;
    background: #fff !important; color: #3d4a57 !important; font-size: .74rem !important; font-weight: 600 !important;
  }
  #btnAdvancedSearch, #btnBackups, #btnColumns, #btnTrash { display: none !important; }

  .upload-bar {
    position: sticky !important; top: 84px !important; z-index: 54 !important;
    display: grid !important; gap: 6px !important; border: 1px solid var(--m-line) !important;
    border-radius: 10px !important; background: var(--m-surface) !important; padding: 8px !important;
  }
  .upload-actions { display: grid !important; grid-template-columns: 1fr auto !important; gap: 8px !important; align-items: center !important; }
  #btnMobileUpload {
    min-height: 34px !important; height: 34px !important; border-radius: 16px !important; border: none !important;
    background: var(--m-primary) !important; color: #fff !important; font-size: .74rem !important; padding: 0 10px !important;
  }
  #searchBox {
    min-width: 0 !important; width: 100% !important; height: 34px !important; border-radius: 16px !important;
    border: 1px solid var(--m-line) !important; font-size: .9rem !important;
  }
  #btnNewFolder, #btnCreateFile, #btnDeleteSelected, #btnMoveSelected, #btnCopySelected { display: none !important; }
  #stats { font-size: .74rem !important; color: var(--m-muted) !important; text-align: right !important; }

  .explorer, .file-list, .details-view { background: transparent !important; border: none !important; box-shadow: none !important; padding: 0 !important; }

  .details-row {
    display: grid !important; grid-template-columns: 18px 1fr auto !important; gap: 6px 8px !important; align-items: center !important;
    border: 1px solid var(--m-line) !important; border-radius: 10px !important; background: var(--m-surface) !important;
    padding: 8px !important; margin-bottom: 6px !important;
  }
  .col-type, .col-size { display: block !important; font-size: .74rem !important; color: var(--m-muted) !important; }
  .col-extension, .col-mime, .col-createdAt, .col-updatedAt { display: none !important; }
  .name-link { display: flex !important; align-items: center !important; gap: 6px !important; width: 100% !important; font-size: .95rem !important; font-weight: 600 !important; color: var(--m-text) !important; }
  .name-link::before { content: none !important; }
  .name-text { white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; }
  .share-emoji, .note-badge { display: none !important; }

  .row-actions { display: grid !important; grid-template-columns: 1fr !important; gap: 4px !important; width: 40px !important; }
  .row-actions .btn[data-open-file] { display: none !important; }
  .row-actions .m-more {
    min-height: 28px !important; height: 28px !important; width: 40px !important;
    border-radius: 6px !important; border: 1px solid var(--m-line) !important;
    background: #f4f6f8 !important; color: #5f6368 !important; font-size: .95rem !important; padding: 0 !important;
  }

  .floating-plus { position: fixed; right: 14px; bottom: calc(16px + env(safe-area-inset-bottom)); width: 52px; height: 52px; border-radius: 50%; border: none; background: #111; color: #fff; font-size: 2rem; z-index: 90; box-shadow: 0 8px 18px rgba(0,0,0,.25); }

  .modal-overlay { padding: 8px !important; align-items: flex-end !important; }
  .modal-card { width: 100% !important; max-width: 100% !important; max-height: 88vh !important; border-radius: 12px !important; }
  .modal-actions { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 8px !important; }

  .context-menu { width: min(94vw, 320px) !important; max-height: 70vh !important; overflow: auto !important; border-radius: 10px !important; }
  input, select, textarea { font-size: 16px !important; }
}