/* ============================================================
   Paleta y tokens (light-first, con soporte de modo oscuro)
   ============================================================ */
:root {
  color-scheme: light;
  --surface-1:      #fcfcfb;
  --page-plane:     #f9f9f7;
  --text-primary:   #0b0b0b;
  --text-secondary: #52514e;
  --text-muted:     #898781;
  --gridline:       #e1e0d9;
  --border:         rgba(11,11,11,0.10);

  --series-consumo: #2a78d6;
  --series-meta:    #eb6834;

  --status-good:     #0ca30c;
  --status-warning:  #fab219;
  --status-critical: #d03b3b;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --surface-1:      #1a1a19;
    --page-plane:     #0d0d0d;
    --text-primary:   #ffffff;
    --text-secondary: #c3c2b7;
    --text-muted:     #898781;
    --gridline:       #2c2c2a;
    --border:         rgba(255,255,255,0.10);
    --series-consumo: #3987e5;
    --series-meta:    #d95926;
  }
}

/* Fuerza modo oscuro sin importar la preferencia del sistema operativo,
   cuando el botón de tema del topbar guardó data-theme="dark" (ver app.js).
   El bloque de arriba solo cubre el caso "sistema en oscuro"; este cubre
   "sistema en claro pero el usuario forzó oscuro". */
:root[data-theme="dark"] {
  color-scheme: dark;
  --surface-1:      #1a1a19;
  --page-plane:     #0d0d0d;
  --text-primary:   #ffffff;
  --text-secondary: #c3c2b7;
  --text-muted:     #898781;
  --gridline:       #2c2c2a;
  --border:         rgba(255,255,255,0.10);
  --series-consumo: #3987e5;
  --series-meta:    #d95926;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--page-plane);
  color: var(--text-primary);
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
  background: var(--surface-1);
  border-bottom: 1px solid var(--border);
}
.topbar h1 { font-size: 18px; margin: 0; }
.topbar-actions { display: flex; align-items: center; gap: 12px; }
.topbar-title { display: flex; align-items: center; gap: 12px; }

/* Variante solo para index.php: título a la izquierda, botones de
   navegación centrados en el header, usuario/salir a la derecha -- en vez
   de todo empujado al borde derecho con un hueco grande en el medio. */
.topbar.topbar-3col {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 12px;
}
.topbar.topbar-3col > h1 { justify-self: start; }
.topbar-nav { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-self: center; }
.topbar.topbar-3col > .topbar-user { justify-self: end; }
.muted { color: var(--text-muted); font-size: 13px; }

.btn {
  border: 1px solid var(--border);
  background: var(--surface-1);
  color: var(--text-primary);
  padding: 8px 14px;
  border-radius: 8px;
  font-size: 14px;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
}
.btn-ghost:hover { background: var(--page-plane); }
.btn-primary {
  background: var(--series-consumo);
  color: #fff;
  border-color: transparent;
}
.btn-primary:hover { opacity: 0.92; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

.kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
  padding: 20px 24px 0;
}
.kpi-card {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.kpi-label { font-size: 12px; color: var(--text-secondary); }
.kpi-value { font-size: 22px; font-weight: 600; font-variant-numeric: tabular-nums; }
.kpi-sub { font-size: 12px; }

.panel {
  margin: 20px 24px 0;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 16px 18px;
}
.panel h2 { font-size: 15px; margin: 0 0 12px; color: var(--text-secondary); }

.global-alert {
  margin: 16px 24px 0;
  padding: 12px 16px;
  border-radius: 10px;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.global-alert > span { flex: 1; }
.global-alert .btn-notify { flex-shrink: 0; }
.global-alert.warning { background: color-mix(in srgb, var(--status-warning) 18%, var(--surface-1)); border: 1px solid var(--status-warning); }
.global-alert.critical { background: color-mix(in srgb, var(--status-critical) 16%, var(--surface-1)); border: 1px solid var(--status-critical); }

.alerts-list { display: flex; flex-direction: column; gap: 8px; }
.alert-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid var(--border);
  font-size: 13px;
}
.alert-row .badge {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  color: #fff;
  white-space: nowrap;
}
.badge.warning { background: var(--status-warning); color: #241a00; }
.badge.critical { background: var(--status-critical); }
.alert-row .service-name { font-weight: 600; flex: 1; }
.alert-row .pct { font-variant-numeric: tabular-nums; color: var(--text-secondary); }

.alert-justification {
  flex: 1 1 100%;
  border-top: 1px dashed var(--border);
  padding-top: 8px;
  margin-top: 2px;
}
.alert-just-input {
  width: 100%;
  resize: vertical;
  padding: 6px 8px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--page-plane);
  color: var(--text-primary);
  font-size: 12px;
  font-family: inherit;
}
.alert-just-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 6px;
}
.alert-just-readonly { font-size: 12px; color: var(--text-secondary); margin: 0; }

.service-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 12px;
}
.service-card {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
}
.service-card .name { font-weight: 600; font-size: 13px; margin-bottom: 6px; }
.service-card .row { display: flex; justify-content: space-between; font-size: 12px; color: var(--text-secondary); }
.service-card .bar-track {
  margin-top: 8px;
  height: 6px;
  border-radius: 4px;
  background: var(--gridline);
  overflow: hidden;
}
.service-card .bar-fill { height: 100%; border-radius: 4px; background: var(--series-consumo); }
.service-card .bar-fill.warning { background: var(--status-warning); }
.service-card .bar-fill.critical { background: var(--status-critical); }

.service-trend-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.service-trend-label { font-size: 13px; color: var(--text-secondary); white-space: nowrap; }
.service-trend-select {
  flex: 1;
  min-width: 200px;
  max-width: 420px;
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface-1);
  color: var(--text-primary);
  font-size: 13px;
}
.service-detail-wrap { max-width: 340px; }
.service-card-solo { margin: 0; }

.history-wrap {
  max-width: 900px;
  margin: 0 auto;
  padding: 20px 16px 60px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.history-filter {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.history-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.history-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid var(--border);
}
.history-row-header {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 13px;
}
.history-row .badge {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  color: #fff;
  white-space: nowrap;
}
.history-row .badge.warning { background: var(--status-warning); color: #241a00; }
.history-row .badge.critical { background: var(--status-critical); }
.history-row .badge.cloud-badge { background: var(--surface-2, var(--border)); color: var(--text-primary); }
.history-row .service-name { font-weight: 600; flex: 1; }
.history-row-reason { margin: 0; font-size: 12px; color: var(--text-secondary); }
.history-row-compare { font-size: 12px; }

.contracts-wrap {
  max-width: 1360px;
  margin: 0 auto;
  padding: 20px 16px 60px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.contracts-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.contract-card {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.contract-card-header {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.contract-card-header h2 { margin: 0; font-size: 16px; flex: 1; }
.contract-status {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--surface-2, var(--border));
  color: var(--text-primary);
}
.contract-status.active { background: var(--status-good); color: #072; }
.contract-status.ended { background: var(--status-critical); color: #fff; }
.contract-dates {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  font-size: 13px;
}
.contract-dates .muted.small { display: block; margin-bottom: 2px; }

.contract-table-wrap { overflow-x: auto; }
.contract-table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
}
.contract-table th {
  text-align: left;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--text-secondary);
  white-space: normal;
  padding: 0 10px 8px 0;
  border-bottom: 2px solid var(--border);
}
.contract-table td {
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 10px 10px 0 0;
}
.contract-table td.contract-negative { color: var(--status-critical); }
.contract-table td.contract-warning { color: var(--status-warning); }
.contract-table td.contract-critical { color: var(--status-critical); }
.contract-progress-wrap { display: flex; flex-direction: column; gap: 6px; }
.contract-progress-label {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
}
.contract-progress-track {
  height: 10px;
  border-radius: 6px;
  background: var(--gridline);
  overflow: hidden;
}
.contract-progress-fill {
  height: 100%;
  border-radius: 6px;
  background: var(--series-consumo);
}
.contract-progress-fill.warning { background: var(--status-warning); }
.contract-progress-fill.critical { background: var(--status-critical); }

.contract-config-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.contract-config-row input, .contract-config-row select {
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface-1);
  color: var(--text-primary);
  font-size: 13px;
}

.report-wrap {
  max-width: 1360px;
  margin: 0 auto;
  padding: 20px 16px 60px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.report-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.report-controls .btn { margin-left: auto; }
.report-title { font-size: 20px; margin: 0; }
.report-section {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.report-section h2 { margin: 0; font-size: 15px; }
.report-chart-wrap { position: relative; height: 380px; }
.report-service-table td.report-observacion {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  font-size: 12px;
  font-weight: 400;
  color: var(--text-secondary);
  min-width: 260px;
}

/* El membrete institucional (logo + ola de color) solo se usa para el PDF
   impreso -- en pantalla ya está el topbar con el título y la navegación,
   mostrar también el membrete ahí se vería redundante. */
.report-letterhead-header,
.report-letterhead-footer {
  display: none;
  width: 100%;
  height: auto;
}

@media print {
  .no-print { display: none !important; }
  body { background: #fff; }
  .report-wrap { max-width: 100%; padding: 0; gap: 12px; }
  .report-section { border: 1px solid #ccc; break-inside: avoid; }
  .report-letterhead-header { display: block; margin-bottom: 4px; }
  .report-letterhead-footer { display: block; margin-top: 24px; }
}
.service-cards-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  margin: 22px 0 10px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}

.spike-selector {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}
.spike-selector-btn {
  border: 1px solid var(--border);
  background: var(--surface-1, transparent);
  color: var(--text-secondary);
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
}
.spike-selector-btn:hover { color: var(--text-primary); }
.spike-selector-btn.active {
  color: #fff;
  border-color: transparent;
}
.spike-selector-btn.warning.active { background: var(--status-warning); color: #241a00; }
.spike-selector-btn.critical.active { background: var(--status-critical); }

.spike-card {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 12px;
}
.spike-card:last-child { margin-bottom: 0; }
.spike-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.spike-card-header .badge {
  font-size: 12px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 999px;
  color: #fff;
  white-space: nowrap;
}
.spike-card-header .pct { font-size: 12px; color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.spike-list {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  font-size: 12px;
  color: var(--text-secondary);
  display: grid;
  gap: 4px;
}
.spike-list strong { color: var(--text-primary); }

.modal {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.45);
  display: flex; align-items: center; justify-content: center;
}
/* CRÍTICO: sin esta regla, el atributo HTML "hidden" del modal es ignorado
   porque .modal ya fija "display: flex" con la misma especificidad que la
   hoja de estilos del navegador (que pone display:none en [hidden]) — como
   es una regla de AUTOR, le gana a la del navegador y el modal queda visible
   siempre, incluso con hidden puesto. Esto era la causa real de que
   "Generando informe..." apareciera bloqueando la página desde el primer
   segundo, sin haber hecho clic en el botón. */
.modal[hidden] {
  display: none;
}
.modal-box {
  background: var(--surface-1);
  border-radius: 12px;
  padding: 20px 24px;
  width: min(420px, 90vw);
}
.report-log {
  margin-top: 10px;
  max-height: 160px;
  overflow: auto;
  background: var(--page-plane);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px;
  font-family: monospace;
  font-size: 11px;
  white-space: pre-wrap;
}

/* ============================================================
   Topbar: usuario / salir
   ============================================================ */
.topbar-user { white-space: nowrap; }
.topbar-user a { color: var(--text-secondary); }

/* ============================================================
   Página de login
   ============================================================ */
.login-page {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
}
.login-box {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 32px;
  width: min(340px, 90vw);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.login-box h1 { font-size: 18px; margin: 0; }
.login-box label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
  color: var(--text-secondary);
}
.login-box input {
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--page-plane);
  color: var(--text-primary);
  font-size: 14px;
}
.login-box .btn { margin-top: 6px; }
.login-error {
  margin: 0;
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 13px;
  background: color-mix(in srgb, var(--status-critical) 16%, var(--surface-1));
  border: 1px solid var(--status-critical);
}

/* ============================================================
   Modal de configuración (presupuestos y umbrales de alerta)
   ============================================================ */
.modal-box-lg { width: min(620px, 92vw); max-height: 85vh; overflow-y: auto; }
.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.modal-header h3 { margin: 0; }
.btn-icon { padding: 4px 8px; }

.config-tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--border);
  margin: 4px 0 4px;
}
.config-tab {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 8px 12px;
  font-size: 13px;
  color: var(--text-secondary);
  cursor: pointer;
  margin-bottom: -1px;
}
.config-tab:hover { color: var(--text-primary); }
.config-tab.active {
  color: var(--text-primary);
  border-bottom-color: var(--series-consumo);
  font-weight: 600;
}
.config-tab-intro { margin: 0 0 12px; font-size: 12px; }
.btn-sm { padding: 5px 10px; font-size: 12px; }

.config-section { margin-top: 18px; }
.config-section:first-of-type { margin-top: 4px; }
.config-section h4 {
  font-size: 13px;
  margin: 0 0 10px;
  color: var(--text-secondary);
}
.config-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.config-row .config-label { flex: 1; font-size: 13px; }
.config-row input[type="number"] {
  width: 110px;
  padding: 6px 8px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--page-plane);
  color: var(--text-primary);
  font-size: 13px;
}
.config-service-list .config-row .config-service-name {
  flex: 1;
  font-size: 13px;
}
.config-service-list .config-row input[type="number"] { flex: 0 0 130px; }

.config-select,
.config-select-service,
.config-row input[type="text"],
.config-row input[type="email"],
.config-textarea {
  padding: 6px 8px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--page-plane);
  color: var(--text-primary);
  font-size: 13px;
  font-family: inherit;
}
.config-select { flex: 0 0 80px; }
.config-select-service { flex: 0 0 180px; min-width: 0; }
.config-row-add input[type="text"] { flex: 0 0 140px; }
.config-row-add input[type="email"] { flex: 1; min-width: 0; }
.config-textarea { flex: 1; min-width: 0; resize: vertical; }
.config-form-label { margin: 0 0 6px; }

.config-recipient-form {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px;
  margin-bottom: 10px;
  background: var(--page-plane);
}

.recipient-card {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 10px;
  margin-bottom: 8px;
}
.recipient-card-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
}
.recipient-card-header .recipient-cloud {
  flex: 0 0 34px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--text-muted);
}
.recipient-card-header .recipient-service { flex: 0 0 140px; color: var(--text-secondary); }
.recipient-card-header .recipient-email-input {
  flex: 1;
  min-width: 0;
  padding: 5px 8px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--page-plane);
  color: var(--text-primary);
  font-size: 13px;
}
.recipient-card-body {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 8px;
}

.config-user-list { margin-bottom: 14px; }
.config-user-row {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 10px;
  margin-bottom: 6px;
  font-size: 13px;
  flex-wrap: wrap;
}
.config-user-name { flex: 1; min-width: 120px; font-weight: 600; }
.config-user-role {
  padding: 4px 8px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--page-plane);
  color: var(--text-primary);
  font-size: 12px;
}
.config-user-status {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--status-good) 18%, transparent);
  color: var(--status-good);
}
.config-user-status.inactive {
  background: color-mix(in srgb, var(--text-muted) 18%, transparent);
  color: var(--text-muted);
}
.config-user-form {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px;
  background: var(--page-plane);
}

/* ============================================================
   Menú de selección (GCP / OCI), pantalla posterior al login,
   con vista previa de consumo, avance del mes y top 10 servicios
   ============================================================ */
.menu-wrap { max-width: 1080px; margin: 0 auto; padding: 32px 24px; }
.menu-intro { margin: 0 0 20px; text-align: center; font-size: 14px; }
.menu-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
  gap: 20px;
  align-items: start;
}
.preview-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 24px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface-1);
}
.preview-card-disabled { opacity: 0.6; }
.preview-card-header { display: flex; align-items: center; gap: 10px; }
.preview-card-icon { width: 30px; height: 30px; flex-shrink: 0; }
.preview-card-header h2 { font-size: 19px; margin: 0; }

.preview-kpis {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.preview-kpis > div { display: flex; flex-direction: column; gap: 4px; }
.preview-kpis .muted { font-size: 13px; }
.preview-kpis strong { font-size: 19px; font-variant-numeric: tabular-nums; }

.preview-top10-title {
  font-size: 12px;
  margin: 0;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.top10-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 320px;
  overflow-y: auto;
}
.top10-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  padding: 7px 0;
  border-bottom: 1px solid var(--border);
}
.top10-row:last-child { border-bottom: 0; }
.top10-rank { width: 18px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.top10-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.top10-pct { color: var(--text-muted); }
.top10-amount { font-variant-numeric: tabular-nums; color: var(--text-secondary); }

.preview-cta { align-self: flex-start; text-decoration: none; margin-top: auto; font-size: 15px; }

/* Semáforo de "% consumido vs. meta" (menu.js): un punto de color en vez de
   texto coloreado, para no depender del contraste de --status-warning
   (un ámbar que se lee mal como texto sobre fondo claro). */
.status-dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  margin-right: 6px;
  vertical-align: middle;
}
.status-dot.good { background: var(--status-good); }
.status-dot.warning { background: var(--status-warning); }
.status-dot.critical { background: var(--status-critical); }