/* Reportes: filtros en una fila, tarjetas que se reparten todo el ancho (2 columnas; 4 en pantallas anchas) y métricas en rejilla. Solo tokens canon. */
.report-filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--sp-3) var(--sp-4); margin: 0 0 var(--sp-4); padding: var(--sp-3) var(--sp-4); border: var(--border-w) solid var(--border-default); border-radius: var(--r-lg); background: var(--surface-1); }
.report-filters .ui-field { flex: 0 0 auto; width: var(--field-w-sm); }
.report-filters .ui-field:has(input[type="date"]) { width: 170px; }
.report-filters > .ui-btn { width: auto; }
.reports-layout { display: flex; flex-wrap: wrap; gap: var(--sp-4); }
.reports-layout > .report-card { flex: 1 1 calc(50% - var(--sp-2)); min-width: 0; }
.reports-layout > .report-wide { flex-basis: 100%; }
.report-card { padding: var(--sp-5); border: var(--border-w) solid var(--border-default); border-radius: var(--r-lg); background: var(--surface-1); box-shadow: var(--shadow-1); }
.report-card h2 { margin: 0 0 var(--sp-3); font-size: var(--fs-title); }
.report-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--sp-3); }
.report-metric { display: grid; gap: 3px; min-height: calc(var(--row-h) * 1.5); align-content: center; padding: var(--sp-3) var(--sp-4); border-radius: var(--r-md); background: var(--surface-2); }
.report-metric strong { font-size: var(--fs-screen); line-height: 1.1; }
.report-metric span { color: var(--text-primary); font-size: var(--fs-body); }
.report-metric small { color: var(--text-muted); font-size: var(--fs-meta); }
.report-ranking { margin: var(--sp-4) 0 0; padding: 0; list-style: none; }
.report-ranking li { display: flex; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-2) 2px; border-top: var(--border-w) solid var(--border-default); font-size: var(--fs-body); }
/* Pantallas anchas: las tarjetas de cifras quedan una junto a otra, sin hueco a la derecha. */
@media (min-width: 1680px) { .reports-layout > .report-card { flex-basis: 380px; } .reports-layout > .report-wide { flex-basis: 100%; } }

.report-test-note { margin: 0 0 var(--sp-3); color: var(--text-muted); font-size: var(--fs-body); }