/* /funcionalidades/alertas/ — the alerts board. What pantallas-demo.css does
   not already draw: the product's StatCard (a plain label with its icon, not
   the Panel's uppercase KPI), the board's tabs with their counts, the alert
   and channel rows with their colored tiles, and the square icon buttons. */

.pn-frame[data-screen="alerts"] .pn-body.is-module { gap: 19px; }

/* ---------- the five counters ---------- */

.pn-frame[data-screen="alerts"] .al-stats {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}

.pn-frame[data-screen="alerts"] .al-stat {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 11px 13px;
  border: 1px solid var(--ac-line);
  border-radius: 10px;
  background: #fff;
}

.pn-frame[data-screen="alerts"] .al-stat-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 6px;
  color: var(--ac-mut);
  font-size: 11px;
}

.pn-frame[data-screen="alerts"] .al-stat-icon {
  flex-shrink: 0;
  width: 13px;
  height: 13px;
  color: var(--ac-dim);
}

.pn-frame[data-screen="alerts"] .al-stat-value {
  font-size: 19px;
  font-variant-numeric: tabular-nums;
  font-weight: 650;
  line-height: 1.2;
}

/* ---------- the cards ---------- */

.pn-frame[data-screen="alerts"] .al-card .pn-card-head { align-items: center; }
.pn-frame[data-screen="alerts"] .al-card .pn-card-head > .md-btn,
.pn-frame[data-screen="alerts"] .al-card .pn-card-head > .md-select { flex-shrink: 0; }

.pn-frame[data-screen="alerts"] .al-tabs {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  border-bottom: 1px solid var(--ac-line);
}

.pn-frame[data-screen="alerts"] .al-tab-set { display: flex; }

.pn-frame[data-screen="alerts"] .al-tab {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 13px;
  color: var(--ac-mut);
  font-size: 11px;
  font-weight: 550;
}

.pn-frame[data-screen="alerts"] .al-tab i {
  padding: 1px 5px;
  border-radius: 999px;
  background: var(--ac-faint);
  color: var(--ac-mut);
  font-size: 9.5px;
  font-variant-numeric: tabular-nums;
  font-weight: 500;
}

.pn-frame[data-screen="alerts"] .al-tab.is-on { color: var(--ac-ink); }

.pn-frame[data-screen="alerts"] .al-tab.is-on::after {
  position: absolute;
  right: 10px;
  bottom: 0;
  left: 10px;
  height: 2px;
  border-radius: 999px;
  background: var(--ac-accent);
  content: '';
}

.pn-frame[data-screen="alerts"] .al-all {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--ac-mut);
  font-size: 9.5px;
  font-weight: 550;
}

.pn-frame[data-screen="alerts"] .al-body-wrap { padding: 4px 19px 6px; }

.pn-frame[data-screen="alerts"] .al-body-wrap .md-foot {
  margin: 6px -3px 0;
  padding-right: 3px;
  padding-left: 3px;
}

/* ---------- the rows ---------- */

.pn-frame[data-screen="alerts"] .al-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.pn-frame[data-screen="alerts"] .al-row,
.pn-frame[data-screen="alerts"] .al-source {
  display: flex;
  gap: 10px;
  padding: 10px 0;
}

.pn-frame[data-screen="alerts"] .al-row { align-items: flex-start; }
.pn-frame[data-screen="alerts"] .al-source { align-items: center; }

.pn-frame[data-screen="alerts"] .al-row + .al-row,
.pn-frame[data-screen="alerts"] .al-source + .al-source { border-top: 1px solid var(--ac-line); }

.pn-frame[data-screen="alerts"] .al-row > .md-check {
  flex-shrink: 0;
  margin-top: 7px;
}

.pn-frame[data-screen="alerts"] .al-sev,
.pn-frame[data-screen="alerts"] .al-source-tile {
  display: grid;
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  place-items: center;
  border-radius: 7px;
}

.pn-frame[data-screen="alerts"] .al-sev { margin-top: 1px; }
.pn-frame[data-screen="alerts"] .al-sev.is-critical { background: #fdecec; color: var(--ac-bad); }
.pn-frame[data-screen="alerts"] .al-sev.is-warning { background: #fdf3dc; color: #b45309; }
.pn-frame[data-screen="alerts"] .al-sev.is-info { background: #e8f0fe; color: #1d4ed8; }
.pn-frame[data-screen="alerts"] .al-source-tile { background: var(--ac-faint); color: var(--ac-mut); }

.pn-frame[data-screen="alerts"] .al-sev-icon {
  width: 13px;
  height: 13px;
}

.pn-frame[data-screen="alerts"] .al-text {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
}

.pn-frame[data-screen="alerts"] .al-title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
}

.pn-frame[data-screen="alerts"] .al-title b,
.pn-frame[data-screen="alerts"] .al-source-name {
  color: var(--ac-ink);
  font-size: 11px;
  font-weight: 550;
}

.pn-frame[data-screen="alerts"] .al-body {
  margin-top: 3px;
  color: var(--ac-mut);
  font-size: 11px;
}

.pn-frame[data-screen="alerts"] .al-meta {
  margin-top: 3px;
  color: var(--ac-dim);
  font-size: 9.5px;
}

.pn-frame[data-screen="alerts"] .al-source .al-meta { margin-top: 2px; }

.pn-frame[data-screen="alerts"] .al-acts {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 4px;
}

/* ActionIconButton, secondary: a bordered square with the glyph in ink; the
   link back to the source system is a bare glyph in the muted color. */
.pn-frame[data-screen="alerts"] .al-ibtn,
.pn-frame[data-screen="alerts"] .al-link {
  display: grid;
  width: 26px;
  height: 26px;
  place-items: center;
  border-radius: 7px;
}

.pn-frame[data-screen="alerts"] .al-ibtn {
  border: 1px solid var(--ac-line);
  background: #fff;
  color: var(--ac-ink);
}

.pn-frame[data-screen="alerts"] .al-link { color: var(--ac-mut); }

.pn-frame[data-screen="alerts"] .al-ibtn-icon {
  width: 13.5px;
  height: 13.5px;
}