/* shared/css/mobile.css */
@media (max-width: 768px) {
  .tabs { overflow-x: auto; padding: 0 12px; }
  .tab { padding: 12px; font-size: 13px; white-space: nowrap; }
  .frame-top { padding: 10px 14px; }
  .hero { grid-template-columns: 1fr !important; padding: 20px; }
  .hero .big { font-size: 44px !important; }
  .cards-4 { grid-template-columns: 1fr 1fr !important; }
  .grid-2 { grid-template-columns: 1fr !important; }
  main.main { padding: 14px !important; }
  .tbl .thead, .tbl .row {
    grid-template-columns: 1fr !important;
    gap: 6px !important;
  }
  .tbl .thead { display: none; }
  .tbl .row > div::before { content: attr(data-label); display: block; font-size: 10px; color: var(--muted); text-transform: uppercase; font-weight: 600; margin-bottom: 2px; }
  .atn-item { grid-template-columns: 18px 1fr !important; }
  .atn-item > div:last-child { grid-column: 2; }

  /* Mi trabajo hero (inline-grid sections in mi-trabajo.js) */
  #main-content section[style*="grid-template-columns:1.4fr"] {
    grid-template-columns: 1fr !important;
    padding: 20px !important;
  }
  /* MetaQ stats row + Informe Resumen (nested under max-width wrapper) */
  #main-content div[style*="grid-template-columns:repeat(4"] {
    grid-template-columns: 1fr 1fr !important;
  }

  /* Informe hero (auto 1fr two-column with %% + pills) */
  #main-content div[style*="grid-template-columns:auto 1fr"] {
    grid-template-columns: 1fr !important;
    text-align: center;
    gap: 16px !important;
    padding: 20px !important;
  }
  #main-content div[style*="grid-template-columns:auto 1fr"] > div:first-child > div:first-child {
    font-size: 48px !important;
  }
}