/* NOC FibraSLP · óptica del transceptor e historial del enlace — v1.11
 * Estilos de static/optica.js (prefijo .op-). Reutiliza las variables y clases de index.html
 * (.chart/.tip/.legend/.swatch, .seg, button.on/.mini, .pill/.dot, table/th/td, .num, .empty,
 * .res, .v-good/.v-warn/.v-crit). RX azul (--s1), TX naranja (--s2), temperatura (--serious). */
.op-box{display:flex;flex-direction:column;gap:8px;min-width:0}
.op-muted{color:var(--muted)}
.op-grow{flex:1}
.op-line{display:flex;align-items:center;gap:6px 16px;flex-wrap:wrap;color:var(--ink-2);font-size:13px}
.op-line b{color:var(--ink);font-variant-numeric:tabular-nums}
.op-mod{padding:2px 8px;border:1px solid var(--border);border-radius:999px;background:var(--surface-2);
  font-size:12px;white-space:nowrap}
.op-alarm b{color:var(--warning)}
.op-rng button{padding:4px 10px;font-size:12px}
.op-reset{margin-left:0}
.op-vendor{color:var(--ink-2);font-size:12px}
.op-vendor b{color:var(--ink);font-variant-numeric:tabular-nums}
.op-resline{font-size:12px}
.op-legend{margin:2px 0 0}
.op-sw{display:inline-block;width:16px;height:0;border-top:2px dashed;vertical-align:middle;margin-right:5px}
.op-sw.dot2{border-top-style:dotted}
.op-dark{display:inline-block;width:12px;height:5px;background:var(--critical);vertical-align:middle;
  margin-right:5px;border-radius:1px}
.op-sub{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-weight:600;
  margin-top:4px}
.op-mark text{pointer-events:none}

/* v1.13: en la página de la ficha la caja ya va dentro de una tarjeta: indicadores más bajos
   (≈ 62 px, antes ≈ 76) para que la tabla de caídas suba */
.op-kpis{display:grid;gap:8px;grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}
.op-kpi{background:var(--surface-2);border:1px solid var(--border);border-radius:8px;padding:7px 11px}
.op-kpi .v{font-size:20px;line-height:1.15;font-weight:600;font-variant-numeric:tabular-nums}
.op-kpi.warn .v{color:var(--warning)}
.op-kpi .v.op-state{font-size:18px}
.op-kpi .l{color:var(--muted);font-size:12px;margin-top:2px}
.op-kpi .s{color:var(--ink-2);font-size:12px;margin-top:2px}
/* v1.13: las tablas del historial se desplazan dentro de su caja en pantallas angostas (la ficha
   ahora es una página y una tabla ancha ensanchaba toda la página en el celular) */
.op-scroll{overflow-x:auto;border-radius:10px;min-width:0}
.op-table{font-size:13px}
.op-table td,.op-table th{padding:5px 10px}
/* un renglón por caída cuando hay ancho; en el celular la fecha puede partirse (si no, la tabla
   ensanchaba la página) */
@media(min-width:901px){
  .op-table td{white-space:nowrap}
  .op-table td.name{white-space:normal}
}
.op-table tr.op-open td{background:rgba(208,59,59,.08)}
.op-foot{display:flex;gap:14px;flex-wrap:wrap;align-items:center;color:var(--muted);font-size:12px}
.op-foot a{color:var(--s1);text-decoration:none}
.op-foot a:hover{text-decoration:underline}
@media(max-width:700px){
  .op-line{gap:4px 10px}
  .op-kpi .v{font-size:20px}
}