/* responsive.css — breakpoints. Versión 3.0.0 */

@media (max-width: 1200px) {
  .metadata-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 900px) {
  .metadata-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .metadata-grid { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
  .tab-content { padding: 0.5rem; }
  .two-col { flex-direction: column; }
  .chart-grid-2x2 { grid-template-columns: 1fr; }
  .app-header { flex-direction: column; align-items: flex-start; gap: 0.3rem; }
  .tab-nav { top: 76px; }
}

@media (max-width: 480px) {
  table.data-table { font-size: 0.72rem; }
  .tab-btn { font-size: 0.75rem; padding: 0.4rem 0.6rem; }
}