/* MIDE OS · Portal Cliente · Reportes (reference client/07). Layout of the view only:
   components come from ui/components.css and every value from ui/tokens.css. */
@layer views {
  .reports-panel { display: grid; gap: var(--mide-space-5); min-width: 0; }
  /* Activity (2) beside who attends the conversations (1), one height. */
  .reports .reports-activity-pair { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
  @media (max-width: 720px) { .reports .reports-activity-pair { grid-template-columns: minmax(0, 1fr); } }
  /* Right rail: real filters (period) and the period summary, as in the reference. */
  .reports .ui-tabs-form { grid-template-columns: minmax(0, 1fr) 320px; }
  .reports .ui-tabs-form-aside { gap: var(--mide-space-5); }
  /* Below 1100 px the rail opens the page (filters first) and its summary closes it. */
  @media (max-width: 1100px) {
    .reports .ui-tabs-form { grid-template-columns: minmax(0, 1fr); }
    .reports .ui-tabs-form-aside { display: contents; }
    .reports .reports-filters { order: -1; }
    .reports .ui-tabs-form-main { order: 0; }
    .reports .reports-period { order: 1; }
  }
  /* The error slot takes no room (and adds no gap) while empty: header → tabs like other screens. */
  #reportsError:empty { display: none; }
  .reports-custom { display: grid; gap: var(--mide-space-3); }
  .reports-custom > .ui-button { justify-self: start; }
  .reports-custom[hidden] { display: none; }
  .reports-filters .ui-select-menu { display: grid; }
  .reports-period-label { margin: 0; color: var(--mide-ink); font-size: var(--mide-text-sm); font-weight: var(--mide-weight-semibold); }
  .reports-help { margin: 0; color: var(--mide-muted); font-size: var(--mide-text-sm); line-height: var(--mide-leading); }
  .reports .ui-card-body { display: grid; gap: var(--mide-space-3); }
  .reports-period-list { display: grid; margin: 0; }
  .reports-period-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: var(--mide-space-3); padding: var(--mide-space-3) 0; }
  .reports-period-row + .reports-period-row { border-top: 1px solid var(--mide-line-2); }
  .reports-period-row dt { display: grid; grid-template-columns: 10px minmax(0, 1fr); align-items: center; column-gap: var(--mide-space-2); color: var(--mide-ink-2); font-size: var(--mide-text-sm); }
  .reports-period-row dt > i { width: 10px; height: 10px; border-radius: 50%; background: var(--tone, var(--mide-muted)); }
  .reports-period-row dt > small { grid-column: 2; color: var(--mide-muted); font-size: var(--mide-text-xs); }
  .reports-period-row[data-tone="human"] { --tone: var(--mide-blue-700); }
  .reports-period-row[data-tone="ai"] { --tone: var(--mide-data-ai); }
  .reports-period-row[data-tone="danger"] { --tone: var(--mide-danger); }
  .reports-period-row dd { display: grid; justify-items: end; gap: 2px; margin: 0; }
  .reports-period-row strong { color: var(--mide-heading); font-size: var(--mide-text-lg); font-variant-numeric: tabular-nums; }
  .reports-period-row small { color: var(--mide-muted); font-size: var(--mide-text-xs); white-space: nowrap; }
  .reports-period-row small[data-tone="ok"] { color: var(--mide-ok); }
  .reports-period-row small[data-tone="danger"] { color: var(--mide-danger); }
  .reports-flow-compact { display: grid; gap: var(--mide-space-4); }
  .reports-usage { display: grid; gap: var(--mide-space-3); justify-items: start; }
  .reports-usage p { margin: 0; color: var(--mide-ink-2); font-size: var(--mide-text-sm); }
  .reports-facts { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--mide-space-2) var(--mide-space-4); width: 100%; margin: 0; font-size: var(--mide-text-sm); }
  .reports-facts dt { color: var(--mide-muted); }
  .reports-facts dd { margin: 0; color: var(--mide-ink); font-weight: var(--mide-weight-semibold); font-variant-numeric: tabular-nums; text-align: right; }
  .reports .ui-progress-item { grid-template-columns: minmax(0, 10rem) minmax(0, 1fr) auto; }
}