/* ==== Live SOC/NOC dashboard additions ==== */
.live-tag { display:inline-flex; align-items:center; gap:8px; padding:6px 12px; border-radius:999px; background:rgba(239,68,68,.12); border:1px solid rgba(239,68,68,.35); color:#fca5a5; font-size:.72rem; font-weight:800; letter-spacing:2px; text-transform:uppercase; }
.live-tag::before { content:""; width:8px; height:8px; border-radius:50%; background:#ef4444; box-shadow:0 0 0 0 rgba(239,68,68,.7); animation:livePulse 1.4s infinite; }
@keyframes livePulse { 0%{box-shadow:0 0 0 0 rgba(239,68,68,.7);} 70%{box-shadow:0 0 0 10px rgba(239,68,68,0);} 100%{box-shadow:0 0 0 0 rgba(239,68,68,0);} }
.dash-clock { font-family: 'JetBrains Mono', 'Courier New', monospace; color: var(--text-strong); font-weight:700; letter-spacing:1px; }
.dash-head-row { display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:6px; flex-wrap:wrap; }
.dash-value.counting { color: var(--text-strong); transition: color .25s; }
.dash-value.tick { color:#60a5fa; }

/* Log feed */
.log-feed { list-style:none; padding:10px; margin:0; height:280px; overflow:hidden; background:#050b18; border:1px solid rgba(59,130,246,.18); border-radius:10px; font-family:'JetBrains Mono','Courier New',monospace; font-size:.78rem; line-height:1.55; }
html[data-theme="light"] .log-feed { background:#0b1a30; }
.log-feed li { display:grid; grid-template-columns:auto auto 1fr; gap:10px; padding:2px 0; color:#93c5fd; opacity:0; transform:translateY(6px); animation: logIn .35s ease forwards; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.log-feed li .lt { color:#64748b; }
.log-feed li .ls { font-weight:800; padding:0 6px; border-radius:4px; }
.log-feed li.sev-INFO .ls { color:#60a5fa; background:rgba(59,130,246,.14); }
.log-feed li.sev-WARN .ls { color:#fbbf24; background:rgba(251,191,36,.14); }
.log-feed li.sev-HIGH .ls { color:#fb923c; background:rgba(251,146,60,.16); }
.log-feed li.sev-CRIT .ls { color:#f87171; background:rgba(239,68,68,.18); }
@keyframes logIn { to { opacity:1; transform:none; } }

/* Alert queue */
.alert-queue { display:flex; flex-direction:column; gap:10px; max-height:280px; overflow:hidden; }
.alert-card { display:grid; grid-template-columns:auto 1fr auto; gap:12px; align-items:center; padding:12px 14px; border-radius:10px; background:rgba(15,23,42,.6); border:1px solid rgba(96,165,250,.15); border-left:4px solid #3b82f6; animation: alertIn .45s cubic-bezier(.2,.9,.3,1.2); }
html[data-theme="light"] .alert-card { background:rgba(255,255,255,.55); }
.alert-card.sev-crit { border-left-color:#ef4444; box-shadow:0 0 24px -14px #ef4444; }
.alert-card.sev-high { border-left-color:#fb923c; }
.alert-card.sev-med { border-left-color:#fbbf24; }
.alert-card.sev-low { border-left-color:#22c55e; }
.alert-sev { font-size:.65rem; font-weight:900; letter-spacing:1.5px; padding:4px 8px; border-radius:6px; color:#fff; background:#3b82f6; text-transform:uppercase; }
.alert-card.sev-crit .alert-sev { background:#ef4444; }
.alert-card.sev-high .alert-sev { background:#fb923c; }
.alert-card.sev-med .alert-sev { background:#fbbf24; color:#0b1a30; }
.alert-card.sev-low .alert-sev { background:#22c55e; }
.alert-title { font-weight:700; color:var(--text-strong); font-size:.9rem; }
.alert-meta { font-size:.72rem; color:var(--text-faint); margin-top:2px; }
.alert-time { font-family:'JetBrains Mono',monospace; font-size:.72rem; color:var(--text-faint); }
@keyframes alertIn { from{ opacity:0; transform:translateX(-14px);} to{opacity:1; transform:none;} }

/* Node list */
.node-list { list-style:none; padding:0; margin:0; display:grid; grid-template-columns:repeat(2,1fr); gap:8px; max-height:260px; overflow:hidden; }
.node-list li { display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:8px; background:rgba(15,23,42,.45); border:1px solid rgba(96,165,250,.14); font-size:.82rem; color:var(--text-strong); }
html[data-theme="light"] .node-list li { background:rgba(255,255,255,.55); }
.node-dot { width:10px; height:10px; border-radius:50%; flex-shrink:0; background:#22c55e; box-shadow:0 0 0 0 rgba(34,197,94,.6); animation: nodePulse 1.8s infinite; }
.node-dot.warn { background:#fbbf24; box-shadow:0 0 0 0 rgba(251,191,36,.6); animation-name: nodePulseW; }
.node-dot.crit { background:#ef4444; box-shadow:0 0 0 0 rgba(239,68,68,.6); animation-name: nodePulseC; }
.node-name { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.node-latency { font-family:'JetBrains Mono',monospace; font-size:.72rem; color:var(--text-faint); }
@keyframes nodePulse { 0%{box-shadow:0 0 0 0 rgba(34,197,94,.55);} 70%{box-shadow:0 0 0 8px rgba(34,197,94,0);} 100%{box-shadow:0 0 0 0 rgba(34,197,94,0);} }
@keyframes nodePulseW { 0%{box-shadow:0 0 0 0 rgba(251,191,36,.55);} 70%{box-shadow:0 0 0 8px rgba(251,191,36,0);} 100%{box-shadow:0 0 0 0 rgba(251,191,36,0);} }
@keyframes nodePulseC { 0%{box-shadow:0 0 0 0 rgba(239,68,68,.55);} 70%{box-shadow:0 0 0 8px rgba(239,68,68,0);} 100%{box-shadow:0 0 0 0 rgba(239,68,68,0);} }

.spark-wrap { height:110px; margin-top:10px; }
.spark-wrap canvas { width:100%; height:100%; display:block; }

@media (prefers-reduced-motion: reduce) {
  .live-tag::before, .node-dot { animation-duration: 4s !important; }
  .log-feed li, .alert-card { animation-duration: .25s !important; opacity:1 !important; }
}


/* Producción 3.0 — Log Stream legible en ambos temas */
.log-feed {
    background:linear-gradient(180deg,#071326 0%,#050b18 100%);
    border-color:rgba(96,165,250,.24);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.03);
}
html[data-theme="light"] .log-feed {
    background:linear-gradient(180deg,#ffffff 0%,#eef5fd 100%) !important;
    border-color:#bfd4ec !important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.9), 0 10px 26px rgba(15,42,90,.06);
}
html[data-theme="light"] .log-feed li { color:#17365f !important; }
html[data-theme="light"] .log-feed li .lt { color:#64748b !important; }
html[data-theme="light"] .log-feed li.sev-INFO .ls { color:#1d4ed8; background:rgba(37,99,235,.10); }
html[data-theme="light"] .log-feed li.sev-WARN .ls { color:#92400e; background:rgba(245,158,11,.15); }
html[data-theme="light"] .log-feed li.sev-HIGH .ls { color:#9a3412; background:rgba(234,88,12,.14); }
html[data-theme="light"] .log-feed li.sev-CRIT .ls { color:#b91c1c; background:rgba(220,38,38,.12); }