/* ==========================================================================
   dashboard.css — pestaña "Dashboard": KPIs de servidor y flota, donuts
   estilo "Mercado Pago", barra/línea de altas, tarjetas de estado de la OLT,
   tabla del registro de cambios y las tarjetas/rejillas PON del módulo OLT.
   ========================================================================== */

.kpi-grid { display:grid; gap:14px; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); margin:14px 0; }
.kpi { padding:16px 18px; display:flex; flex-direction:column; gap:2px; }
.kpi span { color:var(--muted); font-size:.76rem; text-transform:uppercase; letter-spacing:.04em; }
.kpi b { font-size:1.9rem; font-weight:700; line-height:1.1; }
.kpi em { color:var(--muted); font-size:.74rem; font-style:normal; }
.kpi-ok b { color:#4ade80; } .kpi-err b { color:#f87171; } .kpi-acc b { color:var(--accent); }

.dash-charts { display:grid; gap:14px; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); }
.chart-card { padding:16px 18px; }
.chart-card h3 { margin:0 0 10px; font-size:.98rem; }
.chart-card.chart-wide { grid-column:1 / -1; }
.chart-box { position:relative; height:260px; }
.chart-head { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:10px; }
.chart-head h3 { margin:0; }
.period-toggle { display:inline-flex; border:1px solid rgba(255,255,255,.12); border-radius:10px; overflow:hidden; }
.period-toggle button { border:none; border-radius:0; background:transparent; padding:5px 12px; font-size:.8rem; }
.period-toggle button.active { background:rgba(56,189,248,.22); color:#e0f2fe; }

/* donut estilo "Mercado Pago": KPI central gigante + leyenda con dots */
.donut-box { height:232px; }
.donut-center { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; pointer-events:none; text-align:center; }
.donut-center b { font-size:2.15rem; font-weight:800; line-height:1; letter-spacing:-.02em; }
.donut-center span { color:var(--muted); font-size:.78rem; margin-top:4px; }
.chart-legend { display:flex; flex-wrap:wrap; gap:8px 16px; justify-content:center; margin-top:14px; font-size:.8rem; color:var(--muted); }
.chart-legend .lg { display:inline-flex; align-items:center; gap:7px; }
.chart-legend .lg i { width:10px; height:10px; border-radius:50%; display:inline-block; box-shadow:0 0 8px currentColor; }
.chart-legend .lg b { color:#e2e8f0; font-weight:650; }

/* --- Dashboard: filas y tarjetas de servidor/OLT --- */
.dash-row-title {
  font-size:.82rem; text-transform:uppercase; letter-spacing:.08em; color:var(--muted);
  margin:26px 0 10px; display:flex; align-items:center; gap:10px;
}
.dash-row-title::after { content:''; flex:1; height:1px; background:rgba(255,255,255,.08); }
#dashboard-section .toolbar.glass-card + .dash-row-title { margin-top:8px; }

.kpi-bar { margin-top:9px; height:6px; border-radius:999px; background:rgba(255,255,255,.08); overflow:hidden; }
.kpi-bar > i { display:block; height:100%; width:0; border-radius:999px; transition:width .5s ease, background .3s; background:var(--accent); }
.kpi-bar > i.warn { background:var(--warn); }
.kpi-bar > i.err { background:var(--err); }
.kpi.kpi-net b { font-size:1.35rem; }
.kpi .kpi-net-row { display:flex; gap:14px; margin-top:2px; font-size:.9rem; }
.kpi .kpi-net-row span { color:#e2e8f0; }
.kpi .kpi-net-row span b { font-size:1rem; font-weight:700; }

.kpi.olt-kpi { border-color:rgba(56,189,248,.25); }
.kpi.olt-kpi.st-online { border-color:rgba(74,222,128,.4); box-shadow:0 0 18px rgba(74,222,128,.12), var(--glass-shadow); }
.kpi.olt-kpi.st-offline { border-color:rgba(248,113,113,.45); box-shadow:0 0 18px rgba(248,113,113,.14), var(--glass-shadow); }
.kpi.olt-kpi b { display:flex; align-items:center; gap:8px; font-size:1.25rem; }
.kpi.olt-kpi b::before { content:''; width:11px; height:11px; border-radius:50%; background:#64748b; flex-shrink:0; }
.kpi.olt-kpi.st-online b::before { background:#4ade80; box-shadow:0 0 10px rgba(74,222,128,.8); }
.kpi.olt-kpi.st-offline b::before { background:#f87171; box-shadow:0 0 10px rgba(248,113,113,.8); }

/* tabla del registro de cambios */
#changeLogRows td { font-size:.82rem; }
#changeLogRows .cl-serial { font-weight:600; }
.cl-result { display:inline-block; padding:2px 9px; border-radius:999px; font-size:.7rem; font-weight:700; border:1px solid rgba(255,255,255,.15); }
.cl-result.SUCCESS { color:#bbf7d0; border-color:rgba(74,222,128,.5); background:rgba(74,222,128,.12); }
.cl-result.PENDING { color:#fde68a; border-color:rgba(251,191,36,.5); background:rgba(251,191,36,.12); }
.cl-result.FAILED { color:#fecaca; border-color:rgba(248,113,113,.5); background:rgba(248,113,113,.12); }

/* animación de entrada suave de las tarjetas del dashboard */
#dashboard-section .glass-card { animation:card-in .45s cubic-bezier(.2,.7,.3,1) both; }
#dashboard-section .dash-charts .chart-card:nth-child(2) { animation-delay:.08s; }
#dashboard-section .dash-charts .chart-card:nth-child(3) { animation-delay:.16s; }
@keyframes card-in { from { opacity:0; transform:translateY(14px) scale(.985); } to { opacity:1; transform:none; } }
@media (prefers-reduced-motion: reduce) { #dashboard-section .glass-card { animation:none; } }

/* --- OLTs (SNMP) --- */
.olt-cards { display:grid; gap:14px; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); margin:14px 0; }
.olt-card { padding:16px 18px; cursor:pointer; transition:transform .12s, border-color .12s; }
.olt-card:hover { transform:translateY(-2px); border-color:rgba(56,189,248,.4); }
.olt-card .olt-head { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.olt-card .olt-name { font-weight:700; font-size:1.02rem; }
.olt-card .olt-sub { color:var(--muted); font-size:.78rem; margin-top:2px; }
.olt-card .olt-metrics { display:grid; grid-template-columns:repeat(2,1fr); gap:8px 12px; margin-top:12px; font-size:.82rem; }
.olt-card .olt-metrics b { display:block; font-size:1.05rem; }
.olt-card .olt-metrics span { color:var(--muted); font-size:.72rem; }

/* rejilla de puertos PON estilo switch SFP */
.pon-grid { display:flex; flex-wrap:wrap; gap:7px; margin:12px 0; }
.pon-port {
  width:44px; height:34px; border-radius:6px; border:1px solid rgba(255,255,255,.14);
  display:flex; align-items:center; justify-content:center; font-size:.72rem; font-weight:700;
  background:linear-gradient(180deg, rgba(148,163,184,.15), rgba(148,163,184,.05)); color:var(--muted);
  position:relative;
}
.pon-port.up { border-color:rgba(34,197,94,.55); color:#bbf7d0;
  background:linear-gradient(180deg, rgba(34,197,94,.28), rgba(34,197,94,.08)); box-shadow:0 0 10px rgba(34,197,94,.28); }
.pon-port.down { border-color:rgba(239,68,68,.55); color:#fecaca;
  background:linear-gradient(180deg, rgba(239,68,68,.26), rgba(239,68,68,.07)); box-shadow:0 0 10px rgba(239,68,68,.25); }
.pon-port .pon-onus { position:absolute; top:-6px; right:-6px; background:#0b1120; border:1px solid rgba(255,255,255,.2);
  border-radius:999px; font-size:.6rem; padding:0 4px; line-height:1.4; }
.pon-port.has-error { border-color:rgba(251,191,36,.75); box-shadow:0 0 10px rgba(251,191,36,.4); }
.pon-port .pon-error-badge { position:absolute; bottom:-6px; left:-6px; background:#3f2a06; color:#fde68a;
  border:1px solid rgba(251,191,36,.6); border-radius:999px; font-size:.58rem; padding:0 4px; line-height:1.4; }