/* ==========================================================================
   map.css — módulo Monitoreo (Leaflet): overrides del tema oscuro de Leaflet,
   efecto "datos en vivo" sobre las polylines de fibra, editor de vértices,
   marcadores FTTH y el panel lateral de la caja NAP.
   ========================================================================== */

#map-section { padding:6px; margin-top:8px; position:relative; }
#map-container { width:100%; height:560px; border-radius:12px; overflow:hidden; }
.map-legend { display:flex; gap:10px; align-items:center; font-size:.76rem; color:var(--muted); margin-left:auto; flex-wrap:wrap; }
.map-legend i { width:11px; height:11px; border-radius:50%; display:inline-block; margin-right:3px; vertical-align:-1px; }
.map-legend i.g { background:#4ade80; box-shadow:0 0 8px rgba(74,222,128,.6); }
.map-legend i.y { background:#fbbf24; box-shadow:0 0 8px rgba(251,191,36,.5); }
.map-legend i.r { background:#f87171; box-shadow:0 0 8px rgba(248,113,113,.6); }
.leaflet-container { background:#0b1120; font:inherit; }
.leaflet-popup-content-wrapper, .leaflet-popup-tip { background:#1e293b; color:#e2e8f0; box-shadow:0 8px 28px rgba(0,0,0,.55); }
.leaflet-popup-content { margin:12px 14px; font:inherit; line-height:1.5; }
.leaflet-popup-content b { color:#fff; }
.leaflet-popup-content button {
  margin-top:8px; background:#38bdf8; color:#04222f; border:none; border-radius:8px;
  padding:5px 12px; font-weight:650; cursor:pointer;
}
.leaflet-bar a { background:#1e293b; color:#e2e8f0; border-color:rgba(255,255,255,.15); }
.leaflet-bar a:hover { background:#334155; }
.leaflet-control-layers { background:#1e293b; color:#e2e8f0; border:1px solid rgba(255,255,255,.15);
  border-radius:10px; box-shadow:0 8px 24px rgba(0,0,0,.5); }
.leaflet-control-layers-expanded { padding:8px 12px 8px 10px; }
.leaflet-control-layers label { font:inherit; font-size:.82rem; }
.leaflet-control-layers-separator { border-top-color:rgba(255,255,255,.12); }
.leaflet-control-layers-toggle { background-color:#1e293b; filter:invert(1) hue-rotate(180deg); }
.leaflet-tooltip { background:#1e293b; color:#e2e8f0; border:1px solid rgba(255,255,255,.15); box-shadow:0 6px 20px rgba(0,0,0,.5); font:inherit; font-size:.78rem; line-height:1.45; }
.leaflet-tooltip::before { display:none; }

/* --- fibra: efecto láser/datos en vivo sobre la polyline (SVG <path>) --- */
.fiber-link, .fiber-hit { cursor:pointer; }
.fiber-link-online {
  stroke-dasharray:10 10;
  animation:dash-flow .8s linear infinite;
  filter:drop-shadow(0 0 5px rgba(34,197,94,.9));
}
.fiber-link-offline {
  stroke-dasharray:6 6;
  animation:fiber-pulse 1.3s ease-in-out infinite;
  filter:drop-shadow(0 0 4px rgba(239,68,68,.85));
}
@keyframes dash-flow { to { stroke-dashoffset:-40; } }
@keyframes fiber-pulse { 0%,100% { stroke-opacity:.3; } 50% { stroke-opacity:1; } }
@media (prefers-reduced-motion: reduce) {
  .fiber-link-online, .fiber-link-offline { animation:none; }
}
/* vértices arrastrables del editor de trazado */
.fiber-vertex { background:#fff; border:2px solid #38bdf8; border-radius:50%; box-shadow:0 0 6px rgba(0,0,0,.55); cursor:grab; }
.fiber-vertex:active { cursor:grabbing; }
.fiber-vertex-mid { background:rgba(56,189,248,.35); border:1px dashed #38bdf8; border-radius:50%; cursor:copy; }
#fiberEditBar, #trunkEditBar {
  position:absolute; left:14px; bottom:14px; z-index:1000; padding:10px 12px;
  display:flex; gap:8px; align-items:center; flex-wrap:wrap; max-width:calc(100% - 28px);
}
#fiberEditBar .muted, #trunkEditBar .muted { font-size:.76rem; }
#map-fiber-controls, #map-trunk-controls { align-items:center; }
#map-fiber-controls select, #map-trunk-controls select { padding:6px 8px; max-width:340px; flex:1 1 200px; }

/* --- fibra troncal / primaria --- */
.trunk-fiber, .trunk-hit { cursor:pointer; }
.trunk-fiber {
  stroke-dasharray:14 6;
  animation:dash-flow 1.1s linear infinite;
  filter:drop-shadow(0 0 4px rgba(245,158,11,.75));
}
.trunk-core-spur { filter:drop-shadow(0 0 3px rgba(34,211,238,.7)); }
@media (prefers-reduced-motion: reduce) {
  .trunk-fiber { animation:none; }
}
#trunkCoreRows .tk-core-row input,
#trunkCoreRows .tk-core-row select { padding:5px 7px; color:#e2e8f0; }
#trunkModal .modal-body label select { padding:8px 10px; color:#e2e8f0; }
#trunkModal .modal-foot { flex-wrap:wrap; }

/* presupuesto óptico: Rx estimado vs real */
.rx-budget {
  display:inline-block; font-size:.74rem; font-weight:600; padding:1px 7px; border-radius:999px;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.14);
}
.rx-budget.ok { color:#4ade80; border-color:rgba(74,222,128,.4); }
.rx-budget.warn { color:#fbbf24; border-color:rgba(251,191,36,.4); }
.rx-budget.bad { color:#f87171; border-color:rgba(248,113,113,.45); }

/* insignia de color de hilo de fibra (norma TIA-598) */
.fiber-color-dot {
  display:inline-block; width:12px; height:12px; border-radius:50%;
  border:1px solid rgba(255,255,255,.55); box-shadow:0 0 3px rgba(0,0,0,.5);
  vertical-align:-2px; margin-right:5px; flex:0 0 auto;
}
.tk-core-row .tk-swatch { margin-right:0; }

/* --- controles para agregar nodos FTTH --- */
#ftthTools { align-items:center; }
#ftthTools .ftth-add { display:inline-flex; gap:4px; align-items:center; }
#ftthTools select { padding:6px 8px; }
#ftthHint { font-style:italic; }
.ftth-marker { background:none; border:none; }
.ftth-marker svg { width:26px; height:26px; display:block; filter:drop-shadow(0 2px 4px rgba(0,0,0,.6)); }
.ftth-marker.t-OLT svg { color:#f472b6; }
.ftth-marker.t-ODF svg { color:#c084fc; }
.ftth-marker.t-SPLICE_BOX svg { color:#facc15; }
.ftth-marker.t-NAP svg { color:#38bdf8; }
.ftth-marker.sat-g svg { color:#4ade80; }
.ftth-marker.sat-y svg { color:#fbbf24; }
.ftth-marker.sat-r svg { color:#f87171; }

/* --- OLTs monitoreadas por SNMP (tabla `olts`), distintas de los nodos FTTH manuales --- */
.olt-monitor-marker { background:none; border:none; }
.olt-monitor-marker svg { width:28px; height:28px; display:block; filter:drop-shadow(0 2px 5px rgba(0,0,0,.65)); }
.olt-monitor-marker.online svg { color:#4ade80; }
.olt-monitor-marker.offline svg { color:#f87171; animation:olt-offline-pulse 1.6s ease-in-out infinite; }
@keyframes olt-offline-pulse { 0%, 100% { opacity:1; } 50% { opacity:.45; } }

/* --- panel lateral de la NAP --- */
#napPanel {
  position:absolute; top:14px; right:14px; width:320px; max-width:calc(100% - 28px);
  max-height:calc(100% - 28px); overflow:auto; z-index:1000; padding:14px 16px;
}
.nap-panel-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:4px; }
.nap-panel-head button { padding:2px 8px; }
#napPortList { margin-top:10px; display:flex; flex-direction:column; gap:6px; }
.nap-port { border:1px solid rgba(255,255,255,.08); border-radius:10px; padding:8px 10px; background:rgba(2,6,23,.4); }
.nap-port .pp-head { display:flex; justify-content:space-between; font-size:.8rem; }
.nap-port.free .pp-head { color:var(--muted); }
.nap-port select { width:100%; margin-top:6px; padding:6px 8px; }
.nap-port .pp-row { display:flex; gap:6px; margin-top:6px; align-items:center; }
.nap-port .pp-row button { flex:0 0 auto; padding:4px 10px; }
.nap-port .pp-sub { font-size:.74rem; color:var(--muted); margin-top:3px; display:flex; gap:8px; flex-wrap:wrap; }
.nap-port .dot { width:8px; height:8px; border-radius:50%; display:inline-block; vertical-align:0; margin-right:3px; }
.nap-port .dot.ONLINE { background:#4ade80; box-shadow:0 0 6px rgba(74,222,128,.6); }
.nap-port .dot.OFFLINE { background:#f87171; box-shadow:0 0 6px rgba(248,113,113,.6); }
.nap-port .dot.UNPROVISIONED { background:#fbbf24; }
#napSat { font-weight:600; }
#napSat.g { color:#4ade80; } #napSat.y { color:#fbbf24; } #napSat.r { color:#f87171; }
.ftth-assign .row { margin:8px 0; }
.ftth-assign select, .ftth-assign input { padding:7px 9px; }

/* --- módulo "Cajas NAP" (listado + detalle standalone) --- */
#napsSearch { flex:1 1 240px; min-width:180px; max-width:380px; }
#napsTypeFilter { padding:6px 8px; }

/* insignia de tipo de nodo en el listado / detalle */
.nt-badge {
  display:inline-block; padding:2px 8px; border-radius:999px; font-size:.68rem; font-weight:650;
  border:1px solid rgba(255,255,255,.18); white-space:nowrap;
}
.nt-badge.nt-nap { background:rgba(56,189,248,.16); color:#7dd3fc; }
.nt-badge.nt-splice { background:rgba(250,204,21,.16); color:#fde047; }
.nt-badge.nt-odf { background:rgba(192,132,252,.16); color:#d8b4fe; }

/* detalle de fusión de una botella / ODF */
.splice-trunk {
  border:1px solid rgba(255,255,255,.10); border-radius:10px; padding:10px 12px;
  background:rgba(2,6,23,.4); margin-top:8px;
}
.splice-trunk .st-head { display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap; align-items:baseline; }

/* formulario inline de fusión de pelo (botella / ODF) */
.splice-form {
  border:1px dashed rgba(255,255,255,.16); border-radius:10px; padding:12px 14px;
  background:rgba(2,6,23,.35);
}
.splice-form label { display:flex; flex-direction:column; gap:4px; font-size:.78rem; color:var(--muted); }
.splice-form select, .splice-form input { padding:6px 8px; color:#e2e8f0; }
.splice-form .sf-row select { width:100%; }
/* traza de fusión de pelo en el mapa (color TIA-598) */
.splice-trace { filter:drop-shadow(0 0 3px rgba(0,0,0,.45)); }
.coord-badge { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; white-space:nowrap; }
#napDetailBody .nap-detail-head {
  display:flex; flex-wrap:wrap; gap:12px 26px; align-items:flex-start; justify-content:space-between;
}
#napDetailBody .nap-ports-grid {
  display:grid; gap:8px; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); margin-top:14px;
}
#napDetailBody .nap-ports-grid .nap-port select { width:100%; margin-top:6px; padding:6px 8px; }
.nap-edit-btn { margin-left:4px; }

/* splitter secundario en cascada: grilla anidada dentro de una salida */
#napDetailBody .nap-ports-grid.nested-grid {
  grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); margin-top:6px; gap:6px;
}
.splitter-child { background:rgba(2,6,23,.35); border-radius:8px; padding:8px 8px 8px 10px; }
.splitter-child .nap-port { background:rgba(2,6,23,.5); }

/* --- Modal genérico (usado por la edición de Cajas NAP) --- */
.modal-overlay {
  position:fixed; inset:0; z-index:4000; display:flex; align-items:center; justify-content:center;
  padding:20px; background:rgba(2,6,23,.62); backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px);
}
.modal-card {
  width:100%; max-width:460px; max-height:calc(100vh - 40px); overflow:auto;
  padding:0; border-radius:16px;
}
.modal-head, .modal-foot {
  display:flex; align-items:center; padding:14px 18px;
}
.modal-head { justify-content:space-between; border-bottom:1px solid rgba(255,255,255,.10); }
.modal-head strong { font-size:1rem; }
.modal-body { padding:16px 18px; display:flex; flex-direction:column; gap:12px; }
.modal-body label { display:flex; flex-direction:column; gap:4px; font-size:.82rem; color:var(--muted); }
.modal-body label input { padding:8px 10px; color:#e2e8f0; }
.modal-body .row { display:flex; gap:12px; }
.modal-body .row label { flex:1; }
.modal-body label select { padding:8px 10px; color:#e2e8f0; }
.modal-foot { justify-content:flex-end; gap:10px; border-top:1px solid rgba(255,255,255,.10); }

/* --- Transcripción de una sesión CLI (Telnet) contra la OLT: VLAN / Uplink --- */
.cli-output {
  max-height:220px; overflow:auto; margin:0; padding:10px 12px; border-radius:8px;
  background:#0b1120; border:1px solid rgba(255,255,255,.10); color:#9ae6b4;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:.74rem;
  white-space:pre-wrap; word-break:break-word;
}