/* Reportes compactos: comparación legible y detalle fuera de la fila. */
.monitoring-report { display: grid; gap: 0.4rem; min-width: 0; font: inherit; font-size: 0.8125rem; }
.monitoring-report__toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem; min-width: 0; }
.monitoring-report__toolbar > span { color: var(--color-text-muted); font-size: 0.75rem; }
.monitoring-report__toolbar > .button { margin-left: auto; min-height: 1.75rem; }
.monitoring-report__metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; gap: 0.3rem; }
.monitoring-report__metrics > div { display: flex; align-items: center; justify-content: space-between; gap: 0.4rem; padding: 0.3rem 0.45rem; border: var(--border-default); border-radius: var(--radius-sm); background: var(--color-surface); }
.monitoring-report__metrics dt { color: var(--color-text-muted); }
.monitoring-report__metrics dd { margin: 0; font-weight: 600; white-space: nowrap; }
.monitoring-report__section { min-width: 0; }
.monitoring-report__section > h2 { margin: 0 0 0.25rem; font-size: 0.8125rem; font-weight: 700; }
.monitoring-report__scroll { max-height: 62dvh; overflow: auto; background: var(--color-surface); }
.monitoring-report__table { width: 100%; font: inherit; line-height: 1.2; }
.monitoring-report__table :is(th, td) { padding: 0.2rem 0.4rem; text-align: left; vertical-align: middle; }
.monitoring-report__table thead th { position: sticky; top: 0; z-index: 1; background: var(--color-surface-muted); white-space: nowrap; }
.monitoring-report__cell { display: inline-block; vertical-align: middle; white-space: pre-line; max-width: 24rem; max-height: 2.4em; overflow: hidden; }
.monitoring-report__table .button--icon { width: 1.5rem; min-width: 1.5rem; min-height: 1.5rem; padding: 0; margin-left: 0.2rem; }
.monitoring-report__alert > td { background: var(--color-warning-soft, #fff4eb); }
.monitoring-report__note { margin: 0; color: var(--color-text-muted); font-size: 0.75rem; }
.monitoring-report__detail { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 0.8125rem; }
@media (max-width: 800px) { .monitoring-report__metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); } }