/* Conéctate Fiber GIS — tablero de fibras v0.8.0 */
#tablero {
  --tb-fondo: #f5f7fb; --tb-tarjeta: #ffffff; --tb-borde: #e3e8ef; --tb-texto: #1e293b; --tb-tenue: #64748b;
  --tb-suave: #f1f5f9; --tb-azul: #1d6fe0; --tb-azul-suave: #e8f1fd; --tb-sombra: 0 1px 2px rgba(15,23,42,.06), 0 4px 14px rgba(15,23,42,.06);
  position: fixed; inset: 0; z-index: 30; display: flex; flex-direction: column; background: var(--tb-fondo); color: var(--tb-texto);
  font: 13px/1.35 Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
@media (prefers-color-scheme: dark) {
  #tablero { --tb-fondo: #0f1720; --tb-tarjeta: #17212d; --tb-borde: #2a3746; --tb-texto: #e2e8f0; --tb-tenue: #94a3b8;
    --tb-suave: #1d2938; --tb-azul: #4ea1f3; --tb-azul-suave: #17304d; --tb-sombra: 0 1px 2px rgba(0,0,0,.4), 0 4px 14px rgba(0,0,0,.3); }
}
#tablero button { border-radius: 8px; border: 1px solid var(--tb-borde); background: var(--tb-tarjeta); color: var(--tb-texto); padding: 6px 12px; cursor: pointer; }
#tablero button:hover { border-color: var(--tb-azul); }
#tablero button.primario { background: var(--tb-azul); border-color: var(--tb-azul); color: #fff; }
#tablero button:disabled { opacity: .4; cursor: default; }

.tb-top { display: flex; align-items: center; gap: 14px; padding: 12px 20px 6px; }
.tb-volver { font-size: 18px; width: 38px; height: 38px; padding: 0 !important; }
.tb-titulos { flex: 1; min-width: 0; }
.tb-migas { color: var(--tb-tenue); font-size: 12px; }
.tb-migas b { color: var(--tb-texto); }
.tb-top h1 { margin: 2px 0 0; font-size: 21px; font-weight: 700; letter-spacing: -.01em; }
.tb-top h1 span { font-size: 14px; font-weight: 400; color: var(--tb-tenue); margin-left: 8px; }
.tb-estado { color: #15803d; font-size: 12px; }
.tb-estado.mal { color: #c62828; }

.tb-barra { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 4px 20px 10px; padding: 8px 10px;
  background: var(--tb-tarjeta); border: 1px solid var(--tb-borde); border-radius: 12px; box-shadow: var(--tb-sombra); }
.tb-seg { display: flex; align-items: center; gap: 2px; padding-right: 10px; border-right: 1px solid var(--tb-borde); }
.tb-seg button { border-color: transparent !important; background: transparent !important; }
.tb-seg button.activo { background: var(--tb-azul-suave) !important; color: var(--tb-azul); border-color: var(--tb-azul) !important; font-weight: 600; }
#tb-zoom { min-width: 46px; text-align: center; font-variant-numeric: tabular-nums; }
.tb-buscar { display: flex; align-items: center; gap: 6px; flex: 1; min-width: 180px; max-width: 320px; padding: 0 10px;
  border: 1px solid var(--tb-borde); border-radius: 8px; background: var(--tb-tarjeta); }
.tb-buscar input { border: 0 !important; outline: 0; background: transparent; padding: 7px 0; width: 100%; color: var(--tb-texto); }
.tb-interruptor { display: flex; align-items: center; gap: 8px; padding: 5px 10px; border: 1px solid var(--tb-borde); border-radius: 8px; cursor: pointer; user-select: none; }
.tb-interruptor input { display: none; }
.tb-interruptor i { width: 34px; height: 20px; border-radius: 10px; background: #cbd5e1; position: relative; transition: background .15s; }
.tb-interruptor i::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: left .15s; box-shadow: 0 1px 2px #0003; }
.tb-interruptor input:checked + i { background: var(--tb-azul); }
.tb-interruptor input:checked + i::after { left: 16px; }

.tb-cuerpo { flex: 1; display: flex; gap: 12px; min-height: 0; padding: 0 20px 16px; }
.tb-vista { position: relative; flex: 1; overflow: hidden; border-radius: 14px; border: 1px solid var(--tb-borde); cursor: grab; touch-action: none;
  background-color: var(--tb-fondo); background-image: radial-gradient(circle, rgba(100,116,139,.28) 1px, transparent 1.2px); }
.tb-vista.paneando { cursor: grabbing; }
.tb-mundo { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.tb-svg { position: absolute; left: 0; top: 0; width: 1px; height: 1px; overflow: visible; z-index: 0; }
.tb-svg .tb-hit { pointer-events: stroke; cursor: pointer; }
#tb-bloques { position: relative; z-index: 1; }

.tb-bloque { position: absolute; width: 330px; background: var(--tb-tarjeta); border: 1px solid var(--tb-borde); border-radius: 14px;
  box-shadow: var(--tb-sombra); cursor: default; user-select: none; }
.tb-bloque.arrastrando { box-shadow: 0 10px 30px rgba(15,23,42,.22); z-index: 5; }
.tb-cab { display: flex; align-items: center; gap: 10px; padding: 12px 14px; cursor: move; border-bottom: 1px solid var(--tb-borde); }
.tb-ico { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: var(--tb-azul-suave); flex: none; }
.tb-ico svg { width: 20px; height: 20px; fill: none; stroke: var(--tb-azul); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.tb-spl .tb-ico { background: #ecfdf5; } .tb-spl .tb-ico svg { stroke: #059669; }
.tb-odf .tb-ico, .tb-olt .tb-ico { background: #f3e8ff; } .tb-odf .tb-ico svg, .tb-olt .tb-ico svg { stroke: #7c3aed; }
.tb-tit { flex: 1; min-width: 0; }
.tb-tit b { display: block; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tb-tit small { color: var(--tb-tenue); }
.tb-etq { font-size: 11px; padding: 2px 8px; border-radius: 99px; background: var(--tb-suave); color: var(--tb-tenue); }

.tb-sec { font-weight: 600; padding: 8px 14px 4px; background: var(--tb-suave); border-top: 1px solid var(--tb-borde); font-size: 12px; }
.tb-grupo { border-top: 1px solid var(--tb-borde); }
.tb-grupo:first-of-type { border-top: 0; }
.tb-grupo-cab { position: relative; display: flex; align-items: center; gap: 8px; height: 30px; padding: 0 22px; cursor: pointer; background: var(--tb-suave); }
.tb-grupo-cab:hover { background: var(--tb-azul-suave); }
.tb-grupo-cab b { font-size: 12.5px; }
.tb-resumen { color: var(--tb-tenue); font-size: 12px; margin-left: auto; }
.tb-chev { width: 12px; color: var(--tb-tenue); font-size: 13px; }
.tb-grupo:not(.plegado) .tb-grupo-cab .tb-p { visibility: hidden; }

.tb-fila { position: relative; display: flex; align-items: center; gap: 9px; height: 28px; padding: 0 24px; border-top: 1px solid var(--tb-suave); cursor: pointer; }
.tb-fila:hover { background: var(--tb-azul-suave); }
.tb-fila.libre .tb-nombre, .tb-fila.libre .tb-num { color: var(--tb-tenue); }
.tb-fila.sel { background: var(--tb-azul-suave); box-shadow: inset 3px 0 0 var(--tb-azul); }
.tb-fila.origen { background: #fef3c7; box-shadow: inset 3px 0 0 #f59e0b; }
.tb-fila.hallada { background: #fef9c3; }
.tb-num { width: 24px; font-variant-numeric: tabular-nums; color: var(--tb-tenue); font-size: 12px; }
.tb-color { width: 14px; height: 14px; border-radius: 4px; border: 1px solid rgba(15,23,42,.18); flex: none; }
.tb-color.grande { width: 30px; height: 30px; border-radius: 8px; }
.tb-nombre { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tb-nombre small { color: var(--tb-tenue); }
.tb-pot { font-size: 11px; padding: 1px 7px; border-radius: 99px; background: #1e293b; color: #fff; white-space: nowrap; }
.tb-pot.pot-bg-ok { background: #15803d; } .tb-pot.pot-bg-alerta { background: #b45309; }
.tb-pot.pot-bg-mal { background: #c62828; } .tb-pot.pot-bg-alta { background: #7c3aed; }
.tb-tx { font-size: 11px; margin-left: 6px; padding: 1px 6px; border-radius: 6px; border: 1px dashed var(--tb-borde); color: var(--tb-tenue); }

.tb-p { position: absolute; top: 50%; width: 14px; height: 14px; margin-top: -7px; border-radius: 50%;
  background: var(--tb-tarjeta); border: 2px solid #b6c2d1; box-sizing: border-box; }
.tb-p[data-lado="izq"] { left: 4px; } .tb-p[data-lado="der"] { right: 4px; }
.tb-p[data-ext]:not([data-ext=""]) { cursor: crosshair; }
.tb-p[data-ext]:not([data-ext=""]):hover { border-color: var(--tb-azul); box-shadow: 0 0 0 4px var(--tb-azul-suave); }
.tb-fila.usada .tb-p { border-color: #64748b; background: #64748b; box-shadow: inset 0 0 0 2px var(--tb-tarjeta); }
.tb-fila.senal .tb-p { border-color: var(--tb-azul); background: var(--tb-azul); box-shadow: inset 0 0 0 2px var(--tb-tarjeta); }
.tb-fila.origen .tb-p { border-color: #f59e0b; background: #f59e0b; }
.tb-grupo-cab .tb-p { border-color: #94a3b8; }

.tb-detalle { width: 320px; flex: none; overflow: auto; background: var(--tb-tarjeta); border: 1px solid var(--tb-borde); border-radius: 14px; box-shadow: var(--tb-sombra); padding: 16px; }
.tb-d-cab { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; font-size: 15px; }
.tb-d-cab button { border: 0 !important; background: transparent !important; font-size: 16px; padding: 2px 6px !important; }
.tb-d-fibra { display: flex; gap: 12px; align-items: center; padding-bottom: 14px; margin-bottom: 12px; border-bottom: 1px solid var(--tb-borde); }
.tb-d-fibra b { display: block; font-size: 16px; } .tb-d-fibra small { color: var(--tb-tenue); }
.tb-d-dato { display: flex; gap: 12px; margin: 14px 0; }
.tb-d-dato > span:first-child { width: 22px; text-align: center; font-size: 16px; }
.tb-d-dato small { display: block; color: var(--tb-tenue); }
.tb-d-dato b { display: block; }
.tb-d-pot { color: #15803d; font-size: 18px; }
.tb-d-pot.sin { color: var(--tb-tenue); font-size: 15px; }
.tb-d-punto { width: 12px !important; height: 12px; border-radius: 50%; margin: 4px 5px; flex: none; }
.tb-d-punto.ok { background: #16a34a; } .tb-d-punto.paso { background: #f59e0b; } .tb-d-punto.libre { background: #94a3b8; }
.tb-d-acciones { display: flex; flex-direction: column; gap: 8px; margin-top: 18px; }
.tb-d-acciones button { padding: 9px 12px !important; }
#tablero button.tb-peligro { color: #c62828; border-color: #fca5a5; background: #fef2f2; }

#tb-mini { position: absolute; left: 12px; bottom: 12px; z-index: 3; background: var(--tb-tarjeta); border: 1px solid var(--tb-borde); border-radius: 10px; box-shadow: var(--tb-sombra); cursor: pointer; }
.tb-leyenda { position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); z-index: 3; display: flex; gap: 16px; align-items: center;
  padding: 8px 16px; background: var(--tb-tarjeta); border: 1px solid var(--tb-borde); border-radius: 12px; box-shadow: var(--tb-sombra); white-space: nowrap; max-width: calc(100% - 260px); overflow: hidden; }
.tb-leyenda i { display: inline-block; width: 26px; height: 0; vertical-align: middle; margin-right: 6px; border-top: 3px solid #1e5bd8; }
.tb-leyenda .l-con { border-top-color: #64748b; }
.tb-leyenda .l-paso { border-top: 3px dashed #94a3b8; }
.tb-leyenda .l-sel { border-top: 6px solid #93c5fd; border-radius: 3px; }
.tb-leyenda .tenue { overflow: hidden; text-overflow: ellipsis; }

#tablero[data-modo="conectar"] .tb-fila { cursor: crosshair; }
#tablero[data-modo="desconectar"] .tb-fila.usada, #tablero[data-modo="desconectar"] .tb-hit { cursor: not-allowed; }

@media (max-width: 900px) {
  .tb-detalle { position: absolute; right: 8px; top: 140px; bottom: 8px; z-index: 6; width: min(320px, 90vw); }
  .tb-leyenda, #tb-mini { display: none; }
  .tb-cuerpo { padding: 0 8px 8px; }
  .tb-barra { margin: 4px 8px 8px; }
}

/* v0.13.0 */
.tb-quitar { margin-left: 6px; padding: 3px 7px !important; border-radius: 8px !important; font-size: 13px; background: transparent !important; }
.tb-quitar:hover { background: #fee2e2 !important; border-color: #fca5a5 !important; }
.tb-form { display: flex; flex-direction: column; gap: 10px; }
.tb-form label { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; color: var(--tb-tenue); }
.tb-form select, .tb-form input:not([type=checkbox]) { padding: 8px; border-radius: 8px; border: 1px solid var(--tb-borde); background: var(--tb-tarjeta); color: var(--tb-texto); }
.tb-form .tb-check { flex-direction: row; align-items: center; gap: 8px; color: var(--tb-texto); }