/* Reset, tipografía base, layout general */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: Roboto, system-ui, sans-serif;
  background: var(--md-sys-color-surface-container-low);
  color: var(--md-sys-color-on-surface);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

/* App bar */
.app-bar {
  background: var(--md-sys-color-surface);
  border-bottom: 1px solid var(--md-sys-color-outline-variant);
  padding: 12px 24px;
  display: flex;
  align-items: center;
  gap: 10px;
  position: sticky;
  top: 0;
  z-index: 20;
}
.app-bar h1 { font-size: 20px; font-weight: 600; letter-spacing: -0.2px; display: flex; align-items: center; gap: 6px; }
.app-bar .status-info {
  font-size: 12px; color: var(--md-sys-color-on-surface-variant);
  display: flex; align-items: center; gap: 6px;
}
.status-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.status-dot.ok { background: var(--md-sys-color-success); }
.status-dot.err { background: var(--md-sys-color-error); }

/* Container principal */
.container {
  max-width: 1040px;
  margin: 0 auto;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Summary cards */
.summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  gap: 10px;
}
.summary-item {
  background: var(--md-sys-color-surface);
  border-radius: var(--md-sys-shape-corner-large);
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.summary-item .val { font-size: 30px; font-weight: 600; letter-spacing: -0.3px; line-height: 1.15; }
.summary-item .lbl {
  font-size: 11px; color: var(--md-sys-color-on-surface-variant);
  text-transform: uppercase; letter-spacing: 0.3px;
}
.summary-item.danger .val { color: var(--md-sys-color-error); }

/* Section headers */
.section-header {
  display: flex; align-items: center; gap: 8px;
  padding: 4px 0 8px;
  font-size: 14px; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.4px;
  color: var(--md-sys-color-on-surface-variant);
  border-bottom: 1px solid var(--md-sys-color-outline-variant);
}
.section-header .count {
  font-size: 12px; background: var(--md-sys-color-surface-container);
  padding: 0 8px; border-radius: var(--md-sys-shape-corner-full);
  color: var(--md-sys-color-on-surface-variant);
}