/* ============================================================
   responsive.css — Media Queries e Ajustes Mobile/Tablet
   ============================================================ */

@media (max-width: 768px) {
  /* ── Header ── */
  .app-header          { padding: 0 14px; height: 60px; gap: 8px; }
  .header-brand        { gap: 8px; min-width: 0; flex-shrink: 1; overflow: hidden; }
  .header-brand h2     { font-size: 0.92rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .header-brand span   { font-size: 0.62rem; white-space: nowrap; }
  .header-logo         { width: 34px; height: 34px; flex-shrink: 0; }
  .header-logo i       { font-size: 14px; }
  .header-actions      { gap: 8px; flex-shrink: 0; }

  /* ── Layout ── */
  .app-content         { padding: 16px; }
  .welcome-banner      { flex-direction: column; padding: 20px; gap: 16px; }
  .welcome-deco        { display: none; }

  /* ── Toolbar & Filtros ── */
  .toolbar             { flex-direction: column; align-items: stretch; gap: 12px; }
  .filter-tabs         {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
  }
  .filter-tab          {
    justify-content: center;
    padding: 7px 6px;
    font-size: 0.73rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .filter-tab i        { display: none; }

  /* ── Busca ── */
  .search-bar          { width: 100%; }
  .search-input        { width: 100%; }

  /* ── Grid & Modais ── */
  .files-grid          { grid-template-columns: 1fr; }
  .modal               { max-width: 100%; border-radius: 16px 16px 0 0; }
  .modal.modal-viewer  { width: 100vw; height: 100vh; border-radius: 0; }

  /* ── Stats (1 linha com 4 colunas) ── */
  .stats-grid          { grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 16px; }
  .stat-card           { flex-direction: column; align-items: center; text-align: center; padding: 12px 6px; gap: 6px; }
  .stat-icon           { width: 36px; height: 36px; font-size: 15px; }
  .stat-info strong    { font-size: 1.1rem; }
  .stat-info span      { font-size: 0.62rem; }

  /* ── FAB & Auth ── */
  .fab                 { display: flex; }
  .header-user span    { display: none; }
  .btn-upload-desktop  { display: none; }
  .login-card          { padding: 36px 24px 28px; }
}

@media (max-width: 480px) {
  .file-card-actions   { gap: 5px; }
  .btn-sm              { padding: 5px 9px; font-size: 0.72rem; }

  /* Navbar ainda menor */
  .header-brand h2     { font-size: 0.82rem; }
  .header-brand span   { display: none; }
}