/* JDServer-Webs v6.1 — modules/alerts/alerts.css */
#alerts { margin: 10px 0 16px; }
#alerts > h3 { font-weight: 600; margin: 0 0 10px; }

.alerts-empty{
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-1);
  padding: 12px;
  color: var(--muted);
}

.alerts-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}
@media (min-width: 900px){
  .alerts-grid{
    grid-template-columns: repeat(2, minmax(0,1fr));
  }
}

.alert-card{
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-1);
  padding: 12px;
  display: grid;
  gap: 8px;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.alert-card:hover{ transform: translateY(-2px); box-shadow: var(--shadow-2); }

.alert-head{ display:flex; gap:8px; align-items:center; flex-wrap: wrap; }
.alert-title{ font-weight: 700; color: var(--text); }

.alert-badge{
  font: 800 11px/1 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  padding: 5px 9px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--muted);
  letter-spacing: .2px;
}

/* Niveles */
.lvl-green .alert-badge{ color:#16a34a; border-color: rgba(22,163,74,.35); background: rgba(22,163,74,.10); }
.lvl-yellow .alert-badge{ color:#f59e0b; border-color: rgba(245,158,11,.38); background: rgba(245,158,11,.14); }
.lvl-orange .alert-badge{ color:#f97316; border-color: rgba(249,115,22,.40); background: rgba(249,115,22,.16); }
.lvl-red    .alert-badge{ color:#ef4444; border-color: rgba(239,68,68,.45);  background: rgba(239,68,68,.20); }

/* Borde por nivel */
.lvl-green{ border-color: rgba(22,163,74,.25); }
.lvl-yellow{ border-color: rgba(245,158,11,.30); }
.lvl-orange{ border-color: rgba(249,115,22,.35); }
.lvl-red{ border-color: rgba(239,68,68,.40); }

.alert-line{ color: var(--muted); font-size: 13px; }
.alert-desc{ color: var(--text); font-size: 13px; }

/* Pie de actualización */
.alerts-meta{
  margin-top: 6px;
  font: 12px/1.2 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--muted);
}