/* /status y /alerts (revisión 5.4, t90, 2026-11-08).
 *
 * Hoja propia de las dos secciones: prefijo `ss-` en Service status y `alx-`
 * en Alerts, para no pisar nada de `blockboard.css`. Sólo tokens de color; el
 * tono de cada clase sale de una variable (`--tone`) que pone su `t-*`.
 * Movimiento sólo con transform/opacity, y nada con prefers-reduced-motion. */

.t-down { --tone: var(--down); }
.t-warn { --tone: var(--warn); }
.t-info { --tone: var(--info); }
.t-muted { --tone: var(--text-faint); }
.t-ok { --tone: var(--ok); }

/* ---------- Service status ---------- */

.ss-hero {
  display: grid; gap: var(--s4); grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  align-items: center; padding: var(--s5); margin-bottom: var(--s4);
  background:
    radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--tone) 10%, transparent), transparent 60%),
    var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--sheen);
}
.ss-verdict { display: flex; gap: var(--s3); align-items: flex-start; }
.ss-pulse {
  flex: none; width: 14px; height: 14px; margin-top: 9px; border-radius: 50%;
  background: var(--tone); box-shadow: 0 0 0 0 color-mix(in srgb, var(--tone) 55%, transparent);
  animation: ss-pulse 2.4s ease-out infinite;
}
@keyframes ss-pulse {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--tone) 55%, transparent); }
  70%, 100% { box-shadow: 0 0 0 12px transparent; }
}
.ss-v-title { margin: 0; font-size: var(--size-2xl); line-height: 1.15; font-weight: 700; letter-spacing: -0.01em; }
.ss-v-sub { margin: var(--s2) 0 0; font-size: var(--size-sm); }
.ss-v-sub b { color: var(--text); }

.ss-kinds { display: flex; flex-wrap: wrap; gap: var(--s2); justify-content: flex-end; }
.ss-kind {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; min-height: 30px;
  border: 1px solid var(--line-strong); border-radius: var(--radius-pill);
  color: var(--text-muted); font-size: var(--size-xs); text-decoration: none;
  transition: transform .15s ease, border-color .15s ease, background .15s ease;
}
.ss-kind .ss-ic { color: var(--tone); }
.ss-kind b { color: var(--text); font-variant-numeric: tabular-nums; }
.ss-kind:hover, .ss-kind:focus-visible, .ss-kind.on {
  border-color: color-mix(in srgb, var(--tone) 55%, transparent);
  background: color-mix(in srgb, var(--tone) 9%, transparent); transform: translateY(-1px);
}
.ss-kind.zero { opacity: .5; }

.ss-search { display: flex; gap: var(--s2); align-items: center; margin: 0 0 var(--s2); }
.ss-search-box {
  flex: 1; display: flex; align-items: center; gap: var(--s2); padding: 0 var(--s4);
  background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius);
  box-shadow: var(--sheen); transition: border-color .15s ease, box-shadow .15s ease;
}
.ss-search-box:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.ss-search-box svg { color: var(--text-faint); flex: none; }
.ss-search-box input {
  flex: 1; min-width: 0; height: 52px; border: 0; background: transparent; color: var(--text);
  font: inherit; font-size: var(--size-md); outline: none;
}
.ss-quick { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: var(--s5); font-size: var(--size-xs); }
.ss-qcoin {
  display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px 3px 6px; min-height: 28px;
  border: 1px solid var(--line); border-left: 3px solid var(--tone); border-radius: var(--radius-sm);
  color: var(--text); font-weight: 600; text-decoration: none; transition: transform .15s ease, background .15s ease;
}
.ss-qcoin img { border-radius: 50%; }
.ss-qcoin small { color: var(--text-faint); font-weight: 500; }
.ss-qcoin:hover, .ss-qcoin:focus-visible { background: var(--surface-hover); transform: translateY(-1px); }

.ss-grid { display: grid; gap: var(--s3); grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); margin-bottom: var(--s5); }
.ss-top { grid-template-columns: repeat(auto-fill, minmax(min(100%, 400px), 1fr)); }

.ss-card {
  position: relative; display: flex; flex-direction: column; gap: var(--s2);
  padding: var(--s4); background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--sheen); min-width: 0;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.ss-card::before {
  content: ""; position: absolute; left: -1px; top: 12px; bottom: 12px; width: 3px;
  border-radius: 3px; background: var(--tone); opacity: .9;
}
.ss-card:hover { transform: translateY(-2px); border-color: var(--line-strong); box-shadow: var(--shadow); }
.ss-card.feat { background:
  linear-gradient(180deg, color-mix(in srgb, var(--tone) 6%, transparent), transparent 70%), var(--surface); }
.ss-card-top { display: flex; flex-wrap: wrap; align-items: center; gap: 6px var(--s2); }
.ss-card-top .svc-name { font-weight: 600; margin-right: auto; min-width: 0; }
.ss-card-top .svc-name a { overflow-wrap: anywhere; }
.ss-chip {
  display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border-radius: var(--radius-pill);
  color: var(--tone); font-size: var(--size-2xs); font-weight: 600; letter-spacing: .01em;
  background: color-mix(in srgb, var(--tone) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--tone) 30%, transparent); white-space: nowrap;
}
.ss-age { font-size: var(--size-2xs); color: var(--text-faint); white-space: nowrap; font-variant-numeric: tabular-nums; }
.ss-age.new { color: var(--accent); font-weight: 600; }
.ss-age.old { color: var(--text-muted); }
.ss-head { margin: 0; font-size: var(--size-base); line-height: 1.4; overflow-wrap: anywhere; }
.ss-card.feat .ss-head { font-size: var(--size-md); font-weight: 600; }
.ss-why { margin: 0; font-size: var(--size-xs); color: var(--text-muted); }
.ss-coins { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }
.ss-coin {
  display: inline-flex; align-items: baseline; gap: 4px; padding: 2px 8px; min-height: 24px;
  border-radius: var(--radius-sm); border: 1px solid var(--line-strong);
  font-size: var(--size-xs); font-weight: 600; color: var(--text); text-decoration: none;
}
.ss-coin small { color: var(--text-faint); font-weight: 500; }
.ss-coin.hot { border-color: color-mix(in srgb, var(--warn) 55%, transparent); background: color-mix(in srgb, var(--warn) 10%, transparent); }
.ss-coin:hover, .ss-coin:focus-visible { background: var(--surface-hover); }
.ss-more-n { font-size: var(--size-2xs); }
.ss-det { font-size: var(--size-xs); }
.ss-det summary { cursor: pointer; color: var(--text-muted); list-style: none; display: inline-flex; gap: 6px; align-items: center; min-height: 28px; }
.ss-det summary::-webkit-details-marker { display: none; }
.ss-det summary::before { content: "▸"; transition: transform .15s ease; color: var(--text-faint); }
.ss-det[open] summary::before { transform: rotate(90deg); }
.ss-notes, .ss-routes { margin: var(--s2) 0; padding-left: var(--s4); color: var(--text-muted); }
.ss-notes li, .ss-routes li { margin: 2px 0; overflow-wrap: anywhere; }
.ss-routes { columns: 2 220px; column-gap: var(--s4); }
.ss-evo { list-style: none; margin: var(--s2) 0 0; padding: 0; border-left: 2px solid var(--line-strong); }
.ss-evo li { position: relative; padding: 2px 0 6px 14px; display: flex; flex-wrap: wrap; gap: 4px 6px; align-items: baseline; }
.ss-evo li i { position: absolute; left: -6px; top: 7px; width: 10px; height: 10px; border-radius: 50%; background: var(--st, var(--text-faint)); border: 2px solid var(--surface); }
.ss-evo li:first-child b { color: var(--st, var(--text)); }
.st-down { --st: var(--down); }
.st-degraded { --st: var(--warn); }
.st-maintenance { --st: var(--info); }
.st-ok { --st: var(--ok); }
.ss-foot { display: flex; flex-wrap: wrap; gap: 4px var(--s2); font-size: var(--size-2xs); margin-top: auto; padding-top: var(--s1); }
.ss-foot .link { margin-left: auto; }

.ss-tabs {
  display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; margin: var(--s4) 0 var(--s3);
  border-bottom: 1px solid var(--line); scroll-margin-top: 80px;
}
.ss-tabs::-webkit-scrollbar { display: none; }
.ss-tabs a {
  flex: none; display: inline-flex; gap: 6px; align-items: center; padding: var(--s2) var(--s3); min-height: 40px;
  color: var(--text-muted); text-decoration: none; font-size: var(--size-sm); font-weight: 600;
  border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color .15s ease, border-color .15s ease;
}
.ss-tabs a b { font-weight: 600; color: var(--text-faint); font-variant-numeric: tabular-nums; }
.ss-tabs a:hover { color: var(--text); }
.ss-tabs a.on { color: var(--text); border-bottom-color: var(--accent); }
.ss-panel-lead { font-size: var(--size-sm); max-width: 90ch; margin: 0 0 var(--s3); }

.ss-ugroup { margin-bottom: var(--s4); }
.ss-ugroup h3 { font-size: var(--size-md); margin: 0; }
.ss-ugroup > p { margin: 2px 0 var(--s2); font-size: var(--size-xs); }
.ss-ulist, .ss-changes, .ss-oklist { list-style: none; margin: 0; padding: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.ss-ulist li, .ss-changes li {
  display: grid; grid-template-columns: minmax(150px, 220px) 1fr auto; gap: var(--s1) var(--s3); align-items: center;
  padding: var(--row-y) var(--row-x); border-top: 1px solid var(--line); font-size: var(--size-xs);
}
.ss-ulist li:first-child, .ss-changes li:first-child { border-top: 0; }
.ss-ulist li:hover, .ss-changes li:hover, .ss-oklist li:hover { background: var(--surface-hover); }
.ss-uage { font-variant-numeric: tabular-nums; white-space: nowrap; }
.ss-changes li { grid-template-columns: minmax(140px, 200px) 110px 1fr auto; }
.ss-ch-now { font-weight: 600; color: var(--st, var(--text)); }
.ss-ch-flow { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.ss-ch-flow i { color: var(--text-faint); font-style: normal; }
.ss-step {
  display: inline-flex; gap: 3px; align-items: baseline; padding: 1px 7px; border-radius: var(--radius-pill);
  font-size: var(--size-2xs); color: var(--st, var(--text-muted));
  background: color-mix(in srgb, var(--st, var(--text-faint)) 12%, transparent);
}
.ss-step small { color: var(--text-faint); }
.ss-ch-when { white-space: nowrap; }
.ss-oklist { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); padding: var(--s2); gap: 2px var(--s3); }
.ss-oklist li { display: flex; gap: var(--s2); align-items: center; justify-content: space-between; padding: 6px var(--s2); border-radius: var(--radius-sm); font-size: var(--size-xs); min-width: 0; }
.ss-oklist-res { grid-template-columns: repeat(auto-fill, minmax(min(100%, 360px), 1fr)); margin-bottom: var(--s5); }
.ss-oklist-res li { justify-content: flex-start; flex-wrap: wrap; }
.ss-res-sum { margin: 0 0 var(--s3); font-size: var(--size-sm); color: var(--text-muted); }
.ss-none { display: flex; flex-direction: column; gap: 4px; margin-bottom: var(--s5); }

@media (max-width: 1100px) {
  .ss-hero { grid-template-columns: 1fr; }
  .ss-kinds { justify-content: flex-start; }
}
@media (max-width: 720px) {
  .ss-hero { padding: var(--s4); }
  .ss-v-title { font-size: var(--size-xl); }
  .ss-search-box input { height: 48px; font-size: var(--size-base); }
  .ss-search .btn { display: none; }
  .ss-ulist li { grid-template-columns: 1fr auto; }
  .ss-ulist li > .muted { grid-column: 1 / -1; grid-row: 2; }
  .ss-changes li { grid-template-columns: 1fr auto; }
  .ss-changes .ss-ch-flow { grid-column: 1 / -1; }
  .ss-changes .ss-ch-now { justify-self: end; }
  .ss-changes .ss-ch-when { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .ss-pulse { animation: none; }
  .ss-card, .ss-kind, .ss-qcoin { transition: none; }
  .ss-card:hover, .ss-kind:hover, .ss-qcoin:hover { transform: none; }
}
.ss-coinline { margin: 0 0 var(--s2); font-size: var(--size-md); font-weight: 600; max-width: 90ch; }

/* ---------- Alerts ---------- */

/* Las subsecciones (la imagen del menú del usuario), también dentro de la
   página porque en el móvil la barra lateral no se ve. */
.alx-tabs {
  display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none;
  margin: calc(-1 * var(--s2)) 0 var(--s5); border-bottom: 1px solid var(--line);
}
.alx-tabs::-webkit-scrollbar { display: none; }
.alx-tabs a {
  flex: none; display: inline-flex; align-items: center; gap: 7px; padding: var(--s2) var(--s3); min-height: 42px;
  color: var(--text-muted); font-size: var(--size-sm); font-weight: 600; text-decoration: none;
  border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color .15s ease, border-color .15s ease;
}
.alx-tabs a:hover { color: var(--text); }
.alx-tabs a.on { color: var(--text); border-bottom-color: var(--accent); }
.alx-tabs a.on svg { color: var(--accent); }
.alx-tabs a b { font-size: var(--size-2xs); padding: 1px 6px; border-radius: var(--radius-pill); background: var(--accent-soft); color: var(--accent); }

/* La explicación breve y el botón (antes, media pantalla de instrucciones). */
.alx-intro {
  display: flex; align-items: center; gap: var(--s3) var(--s4); flex-wrap: wrap;
  padding: var(--s3) var(--s4); margin-bottom: var(--s5);
  background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 9%, transparent), transparent 70%), var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--sheen);
}
.alx-intro p { flex: 1 1 340px; margin: 0; font-size: var(--size-sm); }
.alx-intro-ico { flex: none; width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center;
  color: var(--accent); background: var(--accent-soft); }
.alx-intro-act { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; }

.alx-lede { margin: 0 0 var(--s3); font-size: var(--size-md); }
.alx-lede .fig { font-size: var(--size-lg); }
.alx-cats { display: grid; gap: var(--s3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); margin-bottom: var(--s5); }
.alx-cat { display: flex; flex-direction: column; gap: var(--s2); color: inherit; text-decoration: none; position: relative; overflow: hidden;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
.alx-cat::after { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--cat); opacity: .85; }
.alx-cat:hover { transform: translateY(-2px); border-color: var(--line-strong); box-shadow: var(--shadow); text-decoration: none; }
.alx-cat .eyebrow { display: inline-flex; gap: 6px; align-items: center; }
.alx-cat .eyebrow svg { color: var(--cat); }
.c-market { --cat: var(--info); }
.c-security { --cat: var(--warn); }
.c-news { --cat: var(--accent); }
.alx-cat-n b { font-size: var(--size-2xl); font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.alx-cat-last { font-size: var(--size-xs); min-height: 2.6em; }
.alx-cat-last b.up { color: var(--up); } .alx-cat-last b.down { color: var(--down); }
.alx-cat-go { font-size: var(--size-xs); color: var(--accent); font-weight: 600; margin-top: auto; }
.alx-days { display: flex; align-items: flex-end; gap: 4px; height: 44px; }
.alx-days i { flex: 1; height: max(3px, var(--h)); border-radius: 3px 3px 1px 1px;
  background: color-mix(in srgb, var(--cat, var(--accent)) 70%, transparent); transition: opacity .15s ease; }
.alx-days i.sx-hot { background: var(--cat, var(--accent)); }
.alx-days:has(i.sx-hot) i:not(.sx-hot) { opacity: .45; }

/* Las filas: la misma lectura que la pieza del terminal (t5, `_alerts.html`). */
.alx-list { padding: var(--s1) var(--s4); margin-bottom: var(--s4); }
.alx-row { display: flex; align-items: center; gap: var(--s3); padding: var(--s3) var(--s2); margin: 0 calc(-1 * var(--s2));
  border-top: 1px solid var(--line); color: inherit; text-decoration: none; border-radius: var(--radius-sm);
  transition: background-color .18s ease; }
.alx-row:first-child, .alx-row.pin + .alx-row { border-top-color: transparent; }
a.alx-row[href]:hover { background: var(--surface-hover); text-decoration: none; }
.alx-row.pin { background: color-mix(in srgb, var(--warn) 8%, transparent); border-top-color: transparent; }
.alx-row.k-service { --rule: var(--warn); }
.alx-row.k-rises, .alx-row.k-drops { --rule: var(--info); }
.alx-row.k-hacks { --rule: var(--down); }
.alx-row.k-news { --rule: var(--accent); }
.alx-row .al-ico { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; }
.alx-row .al-ico:not(.has-face) { color: var(--rule);
  background: color-mix(in srgb, var(--rule) 14%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--rule) 30%, transparent); }
.alx-row .al-face { border-radius: 50%; width: 32px; height: 32px; }
.alx-row.pin .al-ico { animation: alx-pulse 1.8s ease-out infinite; }
@keyframes alx-pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--warn) 50%, transparent); } 70%, 100% { box-shadow: 0 0 0 9px transparent; } }
.alx-body { flex: 1 1 auto; min-width: 0; display: grid; gap: 2px; }
.alx-name { display: flex; align-items: center; gap: var(--s2); min-width: 0; }
.alx-name b { font-size: var(--size-base); font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.alx-meta { font-size: var(--size-2xs); color: var(--text-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.alx-rule { font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--rule, var(--text-muted)); }
.alx-detail { font-size: var(--size-xs); color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.alx-badge { flex: none; font-size: var(--size-2xs); font-weight: 600; padding: 1px 7px; border-radius: var(--radius-pill);
  border: 1px solid var(--line-strong); color: var(--text-muted); }
.alx-badge.warn { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 40%, transparent); }
.alx-badge.down { color: var(--down); border-color: color-mix(in srgb, var(--down) 40%, transparent); }
.alx-badge.violet { color: var(--info); border-color: color-mix(in srgb, var(--info) 40%, transparent); }
.alx-badge.rep { color: var(--text-faint); }
.alx-end { flex: none; display: grid; justify-items: end; gap: 2px; text-align: right; font-variant-numeric: tabular-nums; }
.alx-end b { font-size: var(--size-base); font-weight: 700; white-space: nowrap; }
.alx-end b.up { color: var(--up); } .alx-end b.down { color: var(--down); }
.alx-end small { font-size: var(--size-2xs); color: var(--text-faint); white-space: nowrap; }
.alx-empty, .alx-quiet { padding: var(--s3) 0; margin: 0; }
.alx-quiet { padding: var(--s4); margin-bottom: var(--s4); }

.alx-sechead { display: grid; grid-template-columns: minmax(0, 1fr) minmax(200px, 340px); gap: var(--s4); align-items: end; margin-bottom: var(--s4); }
.alx-sechead .alx-days { height: 56px; }
.alx-sechead p { margin: var(--s1) 0 0; }
.alx-sectitle { display: flex; align-items: center; gap: var(--s2); margin: 0; font-size: var(--size-xl); }
.alx-sectitle svg { width: 22px; height: 22px; color: var(--accent); }
.alx-fil { margin-bottom: var(--s3); }
.alx-nudge { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; font-size: var(--size-sm); margin: 0 0 var(--s4); }
.alx-rules { margin-bottom: var(--s5); }

/* Mis alertas y el formulario de editar. */
.alx-mine { display: grid; gap: var(--s3); }
.alx-mine-card { display: grid; gap: var(--s2); }
.alx-mine-top { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; }
.alx-mine-top b { font-size: var(--size-md); }
.alx-mine-top .right { margin-left: auto; }
.alx-mine-acts { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; }
.alx-mine-acts form { display: inline; margin: 0; }
.alx-mine-card.off { opacity: .72; }
.alx-flash { border-left: 3px solid var(--tone); margin-bottom: var(--s3); }

@media (max-width: 720px) {
  .alx-sechead { grid-template-columns: 1fr; }
  .alx-detail { display: none; }
  .alx-row { gap: var(--s2); }
  .alx-intro-act { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .alx-row.pin .al-ico { animation: none; }
  .alx-cat, .alx-row { transition: none; }
  .alx-cat:hover { transform: none; }
}

/* El submenú de Alerts en la barra lateral (`base.html`). */
.alx-side { display: grid; margin: 2px 0 var(--s2) 22px; padding-left: var(--s3); border-left: 1px solid var(--line-strong); }
.alx-side a { padding: 5px var(--s2) !important; font-size: var(--size-xs) !important; color: var(--text-muted); min-height: 28px; }
.alx-side a.on { color: var(--text); font-weight: 600; }
.side-closed .alx-side { display: none; }
@media (max-width: 720px) { .ss-card-top .svc-name { flex: 1 1 100%; } }
.alx-side a.on { background: none !important; box-shadow: none !important; }
@media (max-width: 860px) { .alx-side { display: none; } }
.ss-step.was { opacity: .7; }