:root {
  color-scheme: light;
  --plano:      #f9f9f7;
  --superficie: #fcfcfb;
  --tinta:      #0b0b0b;
  --tinta-2:    #52514e;
  --tinta-3:    #898781;
  --linea:      #e1e0d9;
  --borde:      rgba(11,11,11,.10);
  --s1:#2a78d6; --s2:#eb6834; --s3:#1baf7a; --s4:#eda100;
  --s5:#e87ba4; --s6:#008300; --s7:#4a3aa7; --s8:#e34948;
  --otras:#898781;
  --critico:#d03b3b; --aviso:#fab219; --bien:#0ca30c;
  --acento:#00a86b;
}
@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) {
    color-scheme: dark;
    --plano:#0d0d0d; --superficie:#1a1a19; --tinta:#fff; --tinta-2:#c3c2b7;
    --tinta-3:#898781; --linea:#2c2c2a; --borde:rgba(255,255,255,.10);
    --s1:#3987e5; --s2:#d95926; --s3:#199e70; --s4:#c98500;
    --s5:#d55181; --s6:#008300; --s7:#9085e9; --s8:#e66767;
    --acento:#00e676;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --plano:#0d0d0d; --superficie:#1a1a19; --tinta:#fff; --tinta-2:#c3c2b7;
  --tinta-3:#898781; --linea:#2c2c2a; --borde:rgba(255,255,255,.10);
  --s1:#3987e5; --s2:#d95926; --s3:#199e70; --s4:#c98500;
  --s5:#d55181; --s6:#008300; --s7:#9085e9; --s8:#e66767;
  --acento:#00e676;
}

* { box-sizing: border-box; }
body {
  margin: 0; background: var(--plano); color: var(--tinta);
  font: 14px/1.5 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
h1, h2, h3 { margin: 0; font-weight: 600; }
a { color: inherit; }

.app { display: grid; grid-template-columns: 236px 1fr; min-height: 100vh; }
/* Sin esto, el panel de puertos (ancho fijo) estira la columna en vez de
   desplazarse dentro de su caja, y la pagina entera scrollea en horizontal. */
.app > * { min-width: 0; }
@media (max-width: 820px) { .app { grid-template-columns: 1fr; } }

/* --- lateral --- */
.rail {
  background: var(--superficie); border-right: 1px solid var(--linea);
  padding: 16px 12px; position: sticky; top: 0; align-self: start;
  max-height: 100vh; overflow-y: auto;
}
@media (max-width: 820px) { .rail { position: static; max-height: none; } }
.marca { font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--tinta-3); margin-bottom: 12px; }
.buscador {
  width: 100%; padding: 8px 10px; border-radius: 8px; margin-bottom: 14px;
  border: 1px solid var(--borde); background: var(--plano); color: var(--tinta);
  font: inherit;
}
.buscador:focus { outline: 2px solid var(--s1); outline-offset: -1px; }
.locales { list-style: none; margin: 0; padding: 0; }
.locales button {
  width: 100%; text-align: left; background: none; border: 0; font: inherit;
  color: var(--tinta-2); padding: 6px 8px; border-radius: 7px; cursor: pointer;
  display: flex; justify-content: space-between; gap: 8px;
}
.locales button:hover { background: var(--plano); color: var(--tinta); }
.locales button[aria-current="true"] {
  background: var(--s1); color: #fff; font-weight: 600;
}
.locales .n { font-variant-numeric: tabular-nums; opacity: .75; font-size: 12px; }

/* --- principal --- */
.hoja { padding: 22px 26px 60px; max-width: 1180px; }
.cabecera { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap;
  margin-bottom: 4px; }
.cabecera h1 { font-size: 22px; }
.sub { color: var(--tinta-2); font-size: 13px; margin-bottom: 20px; }

.pestanas { display: flex; gap: 4px; border-bottom: 1px solid var(--linea);
  margin-bottom: 22px; flex-wrap: wrap; }
.pestanas button {
  background: none; border: 0; font: inherit; color: var(--tinta-2);
  padding: 8px 12px; cursor: pointer; border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.pestanas button:hover { color: var(--tinta); }
.pestanas button[aria-selected="true"] {
  color: var(--tinta); border-bottom-color: var(--s1); font-weight: 600;
}

.fichas { display: grid; grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  gap: 10px; margin-bottom: 26px; }
.ficha { background: var(--superficie); border: 1px solid var(--borde);
  border-radius: 10px; padding: 12px 14px; }
.ficha .v { font-size: 26px; font-weight: 600; line-height: 1.1; }
.ficha .k { font-size: 12px; color: var(--tinta-2); margin-top: 2px; }
.ficha.alerta .v { color: var(--critico); }

.tarjeta { background: var(--superficie); border: 1px solid var(--borde);
  border-radius: 12px; padding: 16px 18px; margin-bottom: 18px; }
.tarjeta > h3 { font-size: 14px; margin-bottom: 4px; }
.tarjeta > .meta { font-size: 12px; color: var(--tinta-2); margin-bottom: 14px;
  font-variant-numeric: tabular-nums; }

/* --- panel frontal de switch --- */
.panel { display: grid; grid-auto-flow: column; grid-template-rows: repeat(2, auto);
  gap: 3px; overflow-x: auto; padding-bottom: 6px; }
.pto {
  width: 40px; height: 34px; border-radius: 5px; border: 1px solid var(--borde);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  cursor: default; position: relative; background: var(--plano);
}
.pto .np { font-size: 8px; color: var(--tinta-3); line-height: 1;
  font-variant-numeric: tabular-nums; }
.pto .vl { font-size: 11px; font-weight: 600; line-height: 1.15;
  font-variant-numeric: tabular-nums; }
.pto[data-color] { color: #fff; }
.pto[data-color] .np { color: rgba(255,255,255,.8); }
.pto.libre { background: var(--plano); }
.pto.libre .vl { color: var(--tinta-3); font-weight: 400; }
.pto.enlace::after {
  content: ""; position: absolute; inset: -1px; border-radius: 5px;
  border: 2px solid var(--tinta); opacity: .85;
}

.leyenda { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 14px;
  font-size: 12px; color: var(--tinta-2); }
.leyenda span { display: flex; align-items: center; gap: 5px; }
.pastilla { width: 11px; height: 11px; border-radius: 3px; display: inline-block;
  border: 1px solid var(--borde); }

/* --- mapa --- */
.mapa { width: 100%; overflow-x: auto; }
.mapa { background: #000; border: 1px solid #2c2c2a; padding: 18px; }
.mapa svg { display: block; min-width: 760px; }
.nodo rect { stroke: var(--borde); }
.nodo text { font: 11px system-ui, sans-serif; fill: var(--tinta); }
.nodo .sub { font-size: 9px; fill: var(--tinta-2); }
.arista { stroke: var(--tinta-3); fill: none; stroke-width: 2; }
.arista.deducida { stroke-dasharray: 4 3; opacity: .75; }
.arista.fibra { stroke: var(--s4); stroke-width: 3; }

/* --- tablas --- */
table { border-collapse: collapse; width: 100%; font-size: 13px; }
th, td { text-align: left; padding: 6px 10px; border-bottom: 1px solid var(--linea);
  vertical-align: top; }
th { font-size: 11px; text-transform: uppercase; letter-spacing: .05em;
  color: var(--tinta-3); font-weight: 600; }
td.num { font-variant-numeric: tabular-nums; }
.envoltorio { overflow-x: auto; }

.etiq { display: inline-block; padding: 1px 7px; border-radius: 999px;
  font-size: 11px; border: 1px solid var(--borde); color: var(--tinta-2); }

.vacio { color: var(--tinta-2); font-size: 13px; padding: 18px 0; }

.cred { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: -6px 0 14px;
  font-size: 12px; }
.cred span { display: flex; align-items: baseline; gap: 6px; }
.cred i { font-style: normal; color: var(--tinta-3); }
.cred code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  background: var(--plano); border: 1px solid var(--borde); border-radius: 4px;
  padding: 1px 6px; user-select: all; }

.etiq.cerrado { background: var(--aviso); color: #fff; border-color: transparent; }

.aviso-claves { background: var(--superficie); border: 1px solid var(--borde);
  border-left: 3px solid var(--aviso); border-radius: 8px; padding: 10px 14px;
  margin-bottom: 18px; font-size: 12px; color: var(--tinta-2); }

/* --- resultados de busqueda --- */
.resultado { padding: 10px 0; border-bottom: 1px solid var(--linea); }
.resultado .q { font-size: 12px; color: var(--tinta-2); }
mark { background: var(--s4); color: #0b0b0b; border-radius: 2px; padding: 0 2px; }

.imprimir { background: none; border: 1px solid var(--borde); border-radius: 7px;
  font: inherit; font-size: 12px; color: var(--tinta-2); padding: 4px 10px;
  cursor: pointer; }
.imprimir:hover { color: var(--tinta); border-color: var(--tinta-3); }

/* Exportar a PDF = imprimir a PDF. Se quita el marco de navegacion y se
   evita que una tarjeta o el diagrama se parta entre dos paginas. */
@media print {
  .rail, .pestanas, .imprimir, #tip, .aviso-claves { display: none !important; }
  .app { display: block; }
  .hoja { max-width: none; padding: 0; }
  body { background: #fff; }
  .tarjeta, .ficha { break-inside: avoid; page-break-inside: avoid;
    border-color: #ccc; }
  .mapa { overflow: visible; }
  .mapa svg { max-width: 100%; height: auto; }
  table { font-size: 11px; }
  thead { display: table-header-group; }
  tr { break-inside: avoid; }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

#tip {
  position: fixed; z-index: 30; pointer-events: none; max-width: 300px;
  background: var(--superficie); border: 1px solid var(--borde);
  border-radius: 8px; padding: 8px 10px; font-size: 12px;
  box-shadow: 0 6px 24px rgba(0,0,0,.18); display: none;
}
#tip b { display: block; margin-bottom: 3px; }
#tip dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 1px 8px; }
#tip dt { color: var(--tinta-2); }
#tip dd { margin: 0; }

/* --- formularios y navegacion propios de la webapp --- */
.buscador { padding: 0 14px 12px; }
.buscador input { width: 100%; background: var(--plano); color: var(--tinta);
  border: 1px solid var(--borde); border-radius: 7px; padding: 7px 10px;
  font: inherit; font-size: 13px; }
.buscador input:focus { outline: none; border-color: var(--tinta-3); }

.rail nav a { display: block; padding: 7px 14px; color: var(--tinta-2);
  text-decoration: none; font-size: 13px; border-left: 2px solid transparent; }
.rail nav a:hover { color: var(--tinta); background: var(--plano); }
.rail nav a.activo { color: var(--tinta); border-left-color: var(--acento);
  background: var(--plano); }

.pestanas a { display: inline-block; padding: 7px 12px; font-size: 13px;
  color: var(--tinta-2); text-decoration: none; border-bottom: 2px solid transparent; }
.pestanas a[aria-selected="true"] { color: var(--tinta);
  border-bottom-color: var(--acento); }

.formulario { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.formulario label { display: flex; flex-direction: column; gap: 4px;
  font-size: 12px; color: var(--tinta-3); }
.formulario input, .formulario select { background: var(--plano);
  color: var(--tinta); border: 1px solid var(--borde); border-radius: 7px;
  padding: 7px 10px; font: inherit; font-size: 13px; min-width: 190px; }
.formulario button { background: var(--acento); color: #fff; border: 0;
  border-radius: 7px; padding: 8px 16px; font: inherit; font-size: 13px;
  cursor: pointer; }
.formulario button.rojo { background: var(--aviso); }
.tarjeta.peligro { border-color: var(--aviso); }

/* --- diagrama de topologia --- */
.mapa { overflow-x: auto; padding: 4px 0 8px; }
.diagrama { max-width: none; }
.diagrama .cable { stroke: var(--borde); stroke-width: 1.5; }
.diagrama .boca { fill: var(--tinta-3); font-size: 10px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.diagrama .caja rect { fill: var(--superficie); stroke: var(--borde); }
.diagrama .caja .franja { stroke: none; }
.diagrama .n1 { fill: var(--tinta); font-size: 12.5px; font-weight: 560; }
.diagrama .n2 { fill: var(--tinta-3); font-size: 10.5px; }

.diagrama .t-router  .franja { fill: #e0a03a; }
.diagrama .t-switch  .franja { fill: #4f9ed9; }
.diagrama .t-sai     .franja { fill: #c96a6a; }
.diagrama .t-ap      .franja { fill: #5cb87f; }
.diagrama .t-ont     .franja { fill: #8f7fd0; }
.diagrama .t-otro    .franja { fill: var(--tinta-3); }
.diagrama .caja.inactivo { opacity: .45; }
.diagrama .caja.inactivo rect:first-child { stroke: var(--aviso); stroke-dasharray: 5 4; }
.diagrama .cable.inactivo { stroke: var(--aviso); stroke-dasharray: 7 5; opacity: .45; }

/* Lectura rápida del rack: contraste alto y una superficie negra reservada
   para el esquema, sin adornos que compitan con los cables. */
.diagrama .caja rect:first-child { fill: #141714; stroke: #4a514b; stroke-width: 1.5; }
.diagrama .caja .n1 { fill: #fff; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-weight: 700; }
.diagrama .caja .n2 { fill: #a9b3aa; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.diagrama .caja .franja { stroke: none; }
.diagrama .cable { stroke: #00e676; stroke-width: 3; }
.diagrama .cable.fibra { stroke: #ffb800; stroke-width: 4; }
.diagrama .punta { fill: #00e676; }
.diagrama .boca { fill: #ffb800; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10px; font-weight: 700; }
.diagrama .caja.inactivo rect:first-child { stroke: #ff3b30; }
.tarjeta, .ficha, .jerarquia-topologia span { border-radius: 0; }

/* --- edicion en pantalla --- */
table.editable input { width: 100%; min-width: 60px; background: transparent;
  color: var(--tinta); border: 1px solid transparent; border-radius: 5px;
  padding: 3px 6px; font: inherit; font-size: 12px; }
table.editable input:hover { border-color: var(--borde); }
table.editable input:focus { outline: none; border-color: var(--acento);
  background: var(--plano); }
table.editable input.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
table.editable select { width: 100%; min-width: 150px; background: transparent;
  color: var(--tinta); border: 1px solid transparent; border-radius: 5px;
  padding: 3px 6px; font: inherit; font-size: 12px; }
table.editable select:focus { outline: none; border-color: var(--acento);
  background: var(--plano); }
table.editable button { white-space: nowrap; background: var(--acento); color: #fff;
  border: 0; border-radius: 6px; padding: 5px 9px; font: inherit; font-size: 12px;
  cursor: pointer; }
.conexion-cabecera { display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; margin-top: 18px; margin-bottom: 6px; }
.conexion-cabecera h3 { font-size: 13px; }
.conexion-cabecera a { color: var(--acento); font-size: 12px; text-decoration: none; }
.conexiones td { white-space: nowrap; }
.conexiones td:first-child, .conexiones td:nth-child(5) { white-space: normal; }
.referencias-pendientes { margin-top: 16px; padding: 12px; border: 1px dashed var(--aviso); }
.referencias-pendientes h3 { margin-bottom: 6px; color: var(--aviso); }
.referencias-pendientes .etiq { margin: 4px 4px 0 0; display: inline-block; }
.tabla-cableado .campo-avanzado { display: none; }
.tabla-cableado.mostrar-detalles .campo-avanzado { display: table-cell; }
.interruptor-detalles { display: inline-flex; align-items: center; gap: 8px; color: var(--tinta-2); font-size: 12px; margin-top: 8px; cursor: pointer; }
.interruptor-detalles input { accent-color: var(--acento); }
.filtro-cableado { display: flex; align-items: center; gap: 10px; margin-top: 14px; color: var(--tinta-2); font-size: 12px; }
.filtro-cableado select { min-width: min(440px, 100%); padding: 8px 10px; border: 1px solid var(--linea); background: #fff; color: var(--tinta); font: inherit; }

/* Dirección visual Swiss: superficie clara, reglas finas y jerarquía tipográfica
   para que una tabla de infraestructura se pueda escanear rápidamente. */
:root { color-scheme: light; --plano:#f7f8fa; --superficie:#fff; --tinta:#111827;
  --tinta-2:#475569; --tinta-3:#64748b; --linea:#dbe1e8; --borde:#cbd5e1;
  --acento:#155eef; --s1:#155eef; --critico:#c62828; --aviso:#b45309; --bien:#16803c; }
body { background: var(--plano); color: var(--tinta); font: 14px/1.5 Helvetica, Arial, sans-serif; }
.app { grid-template-columns: 250px 1fr; }
.rail { background: #fff; border-right: 1px solid var(--linea); }
.marca, th { letter-spacing: .06em; }
.hoja { max-width: 1320px; padding: 28px 34px 64px; }
.cabecera h1 { font-size: 26px; letter-spacing: -.03em; }
.sub { color: var(--tinta-2); }
.pestanas { gap: 0; border-bottom: 2px solid #111827; }
.pestanas button, .pestanas a { padding: 10px 14px; }
.pestanas button[aria-selected="true"], .pestanas a[aria-selected="true"] { border-bottom-color: var(--acento); color: var(--acento); }
.tarjeta, .ficha { background: #fff; border: 1px solid var(--linea); border-radius: 4px; box-shadow: 0 1px 2px rgba(15,23,42,.04); }
table { font-size: 13px; } th { color: #64748b; background: #f8fafc; } td, th { padding: 9px 10px; }
.tabla-cableado tbody tr:hover { background: #f0f6ff; }
.tabla-cableado select, .tabla-cableado input { border-color: #dbe1e8; background: #fff; color: #111827; }
.jerarquia-topologia span { background: #eff6ff; border-color: #bfdbfe; color: #1d4ed8; }
.jerarquia-topologia b { color: var(--acento); }
.mapa { background: #f8fafc; border-color: #cbd5e1; }
.selector-cableado { display: flex; align-items: center; gap: 12px; margin: 6px 0 14px;
  color: var(--tinta-2); font-size: 12px; }
.jerarquia-topologia { display: flex; align-items: center; gap: 10px; margin: 12px 0 8px;
  color: var(--tinta); font: 11px ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .08em; }
.jerarquia-topologia span { border: 1px solid var(--linea); padding: 6px 8px; background: var(--plano); }
.jerarquia-topologia b { color: var(--acento); font-size: 16px; }
.selector-cableado select { min-width: min(520px, 100%); background: var(--plano);
  color: var(--tinta); border: 1px solid var(--linea); border-radius: 0; padding: 8px;
  font: inherit; font-size: 12px; }
.rutas-cableado { display: flex; flex-direction: column; gap: 5px; margin-bottom: 16px; }
.ruta-cable { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; width: 100%;
  text-align: left; background: var(--plano); color: var(--tinta); border: 1px solid var(--linea);
  border-left: 3px solid var(--acento); padding: 9px 11px; font: inherit; font-size: 12px; cursor: pointer; }
.ruta-cable:hover, .ruta-cable.seleccionado { border-color: var(--acento); }
.ruta-cable.atenuado { opacity: .22; }
.ruta-cable b { color: var(--acento); font-size: 16px; }
.ruta-equipo, .ruta-intermedio { display: inline-flex; flex-direction: column; gap: 2px; }
.ruta-intermedio { color: var(--aviso); }
.ruta-cable small { color: var(--tinta-3); font-size: 10px; }
.diagrama [data-cable] { cursor: pointer; transition: opacity .15s, stroke-width .15s; }
.diagrama [data-cable].atenuado { opacity: .1; }
.diagrama [data-cable].seleccionado { opacity: 1; stroke-width: 4; }
.notas-form { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.notas-form textarea { width: 100%; resize: vertical; background: var(--plano); color: var(--tinta);
  border: 1px solid var(--linea); border-radius: 0; padding: 12px; font: inherit;
  font-size: 13px; line-height: 1.55; }
.notas-form textarea:focus { outline: none; border-color: var(--acento); }
.nota-texto { white-space: pre-wrap; border: 1px solid var(--linea); padding: 14px;
  color: var(--tinta-2); min-height: 180px; }
.alta-equipo { border-left: 3px solid var(--acento); }
.baja-equipo { margin-top: 14px; border-top: 1px solid var(--linea); padding-top: 10px; }
.baja-equipo summary { cursor: pointer; color: var(--aviso); font-size: 12px; }
.alta-activo { border-top: 1px solid var(--linea); padding-top: 10px; margin-bottom: 14px; }
.alta-activo summary { cursor: pointer; color: var(--acento); font-size: 12px; }
.baja-activo { margin-top: 6px; }
.baja-activo summary { cursor: pointer; color: var(--aviso); font-size: 10px; }
.baja-activo .formulario { gap: 5px; align-items: center; margin-top: 5px; }
.baja-activo input { width: 120px; }
.casilla { flex-direction: row !important; align-items: center; }
.acciones { padding-top: 12px; }
.acciones button { background: var(--acento); color: #fff; border: 0;
  border-radius: 7px; padding: 8px 16px; font: inherit; font-size: 13px;
  cursor: pointer; }
.editor { margin: -4px 0 12px; }
.editor summary { cursor: pointer; font-size: 12px; color: var(--tinta-3); }
.editor summary:hover { color: var(--tinta); }
.editor .formulario { padding-top: 12px; }
.aviso-ok { background: var(--superficie); border: 1px solid var(--borde);
  border-left: 3px solid #5cb87f; border-radius: 8px; padding: 10px 14px;
  margin-bottom: 18px; font-size: 12px; color: var(--tinta-2); }

/* --- sesion y login --- */
body.centrado { display: grid; place-items: center; min-height: 100vh; }
.entrada { width: min(360px, 92vw); background: var(--superficie);
  border: 1px solid var(--borde); border-radius: 12px; padding: 28px;
  display: flex; flex-direction: column; gap: 14px; }
.entrada h1 { font-size: 19px; margin: 0; }
.entrada .meta { margin: -12px 0 4px; }
.entrada label { display: flex; flex-direction: column; gap: 5px;
  font-size: 12px; color: var(--tinta-3); }
.entrada input { background: var(--plano); color: var(--tinta);
  border: 1px solid var(--borde); border-radius: 7px; padding: 9px 11px;
  font: inherit; font-size: 14px; }
.entrada input:focus { outline: none; border-color: var(--acento); }
.entrada button { background: var(--acento); color: #fff; border: 0;
  border-radius: 7px; padding: 10px; font: inherit; font-size: 14px;
  cursor: pointer; margin-top: 4px; }
.aviso-error { background: var(--superficie); border: 1px solid var(--aviso);
  border-radius: 8px; padding: 9px 12px; font-size: 12px; color: var(--tinta-2); }

.acciones-centro { min-width: 110px; }
.accion-centro { display: block; color: var(--acento); font-size: 11px; margin-bottom: 7px; }
.baja-centro summary { cursor: pointer; color: var(--aviso); font-size: 12px; }
.baja-centro form { display: flex; flex-direction: column; gap: 7px; min-width: 220px;
  padding: 9px 0 2px; }
.baja-centro label { display: flex; flex-direction: column; gap: 4px;
  color: var(--tinta-3); font-size: 11px; }
.baja-centro input { width: 100%; background: var(--plano); color: var(--tinta);
  border: 1px solid var(--borde); border-radius: 6px; padding: 6px 8px;
  font: inherit; font-size: 12px; }
.baja-centro button { align-self: flex-start; }

.sesion { padding: 0 14px 12px; font-size: 12px; color: var(--tinta-3);
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.sesion a { color: var(--tinta-3); }
.sesion a:hover { color: var(--tinta); }
.sesion a[title] { color: var(--acento); }
.sesion { display: block; padding: 0 12px 16px; }
.sesion-identidad { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 14px; color: var(--tinta); }
.sesion-identidad strong { min-width: 0; overflow-wrap: anywhere; font-size: 13px; }
.sesion-identidad .etiq { flex: none; font-size: 10px; }
.rail-section-label { display: block; margin-bottom: 6px; color: var(--tinta-3); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }
.sesion-acciones { display: grid; gap: 4px; margin: 0 -4px 13px; }
.sesion-accion { display: flex; flex-direction: column; gap: 1px; padding: 8px 9px; border-left: 3px solid transparent; color: var(--tinta-2) !important; text-decoration: none; }
.sesion-accion strong { color: var(--tinta); font-size: 12px; font-weight: 600; }
.sesion-accion small { color: var(--tinta-3); font-size: 10px; }
.sesion-accion:hover, .sesion-accion.activo { background: #eff6ff; border-left-color: var(--acento); }
.sesion-accion:hover strong, .sesion-accion.activo strong { color: var(--acento); }
.sesion-salir { display: inline-block; padding-top: 3px; color: var(--tinta-3) !important; font-size: 11px; }
.sesion-salir:hover { color: var(--tinta) !important; }
.rail-admin { margin: 0 -12px 14px; padding: 12px 12px 13px; border-top: 1px solid #bfdbfe; border-bottom: 1px solid #bfdbfe; background: #f8fbff; }
.rail-admin .rail-section-label { margin: 0 4px 8px; color: #64748b; font-size: 10px; font-weight: 600; }
.rail-admin .sesion-acciones { margin: 0; gap: 8px; }
.rail-admin .sesion-accion { min-height: 52px; justify-content: center; border: 1px solid #dbeafe; border-left: 4px solid #93c5fd; background: #fff; padding: 9px 10px; }
.rail-admin .sesion-accion:hover, .rail-admin .sesion-accion.activo { border-color: #93c5fd; border-left-color: var(--acento); background: #eff6ff; }
.rail-admin .sesion-accion strong { display: block; margin-bottom: 3px; font-size: 13px; line-height: 1.2; }
.rail-admin .sesion-accion small { font-size: 10px; }
.rail-admin .sesion-accion:hover strong, .rail-admin .sesion-accion.activo strong { color: var(--acento); }
code.oculto { color: var(--tinta-3); }

/* --- panel de usuarios --- */
.usuarios-cabecera { align-items: end; }
.usuarios-cabecera .eyebrow { margin: 0 0 3px; color: var(--tinta-3); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.usuarios-seccion-cabecera { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin-bottom: 14px; }
.usuarios-seccion-cabecera h2 { font-size: 18px; }
.usuarios-seccion-cabecera .meta { margin: 3px 0 0; }
.usuarios-contador { color: var(--tinta-2); font-size: 12px; white-space: nowrap; }
.usuarios-form { display: grid; grid-template-columns: repeat(5, minmax(130px, 1fr)); align-items: end; }
.usuarios-form button { min-height: 35px; }
.usuarios-tabla { min-width: 900px; }
.usuarios-tabla td, .usuarios-tabla th { vertical-align: top; }
.usuarios-tabla td > strong { display: inline-block; }
.usuarios-tabla td > small { display: block; margin-top: 4px; color: var(--tinta-3); font-size: 11px; }
.usuarios-tabla input, .usuarios-tabla select { max-width: 180px; min-width: 125px; padding: 6px 8px; background: var(--plano); color: var(--tinta); border: 1px solid var(--borde); border-radius: 4px; font: inherit; font-size: 13px; }
.usuarios-tabla button { white-space: nowrap; }
.usuario-tu { display: inline-block; margin-left: 7px; padding: 1px 6px; border: 1px solid var(--borde); color: var(--tinta-2); font-size: 10px; }
.usuario-inactivo { opacity: .62; }
.usuario-clave { margin-top: 10px; }
.usuario-clave summary { color: var(--acento); cursor: pointer; font-size: 11px; }
.usuarios-clave-form { display: grid; grid-template-columns: repeat(2, minmax(120px, 1fr)); gap: 8px; margin-top: 10px; min-width: 280px; }
.usuarios-clave-form label { display: flex; flex-direction: column; gap: 4px; color: var(--tinta-3); font-size: 11px; }
.usuarios-clave-form button { grid-column: 1 / -1; justify-self: start; padding: 7px 10px; font-size: 12px; }
.usuarios-nota { margin: 0 0 18px; color: var(--tinta-2); font-size: 12px; }
.seguridad-copias-acciones { display: grid; gap: 18px; }
.restaurar-form { display: grid; grid-template-columns: minmax(220px, 1fr) minmax(170px, .6fr) auto; gap: 10px; align-items: end; }
.restaurar-form label { display: flex; flex-direction: column; gap: 5px; color: var(--tinta-2); font-size: 12px; }
.restaurar-form input[type="file"], .restaurar-form input[name="confirmacion"] { width: 100%; padding: 8px 9px; border: 1px solid var(--borde); border-radius: 6px; background: var(--plano); color: var(--tinta); font: inherit; font-size: 13px; }
.seguridad-copias-aviso { margin: 14px 0 0; color: var(--tinta-3); font-size: 12px; }
.boton.peligro { background: var(--critico); color: #fff; border-color: transparent; }
@media (max-width: 760px) { .restaurar-form { grid-template-columns: 1fr; } }
@media (max-width: 900px) { .usuarios-form { grid-template-columns: repeat(2, minmax(140px, 1fr)); } }
@media (max-width: 560px) { .usuarios-form { grid-template-columns: 1fr; } .usuarios-seccion-cabecera { align-items: start; flex-direction: column; gap: 3px; } }

/* Dirección visual: Industrial. La red es el objeto principal, por eso la
   interfaz usa una superficie negra, reglas de un píxel y una única señal
   verde para estados y acciones. */
:root {
  color-scheme: dark;
  --plano: #000000; --superficie: #0B0C0A; --tinta: #F2F4F1;
  --tinta-2: #9AA39A; --tinta-3: #657065; --linea: #293029;
  --borde: #354035; --acento: #00E676; --bien: #00E676;
  --aviso: #FFB800; --critico: #FF3B30;
}
body { background: var(--plano); color: var(--tinta);
  font-family: IBM Plex Mono, JetBrains Mono, ui-monospace, SFMono-Regular, Menlo, monospace;
  font-variant-numeric: tabular-nums; }
.app { grid-template-columns: 248px 1fr; }
.rail, .tarjeta, .ficha, .entrada { background: var(--superficie);
  border-color: var(--linea); border-radius: 0; box-shadow: none; }
.rail { border-right: 1px solid var(--linea); }
.hoja { max-width: none; padding: 28px 34px 64px; }
.cabecera h1 { font-size: 21px; letter-spacing: -.04em; }
.sub, .meta { color: var(--tinta-2); }
.pestanas { border-color: var(--linea); }
.pestanas a[aria-selected="true"] { color: var(--acento); border-bottom-color: var(--acento); }
.pestanas a:hover, .rail nav a:hover { color: var(--acento); background: transparent; }
.rail nav a.activo { color: var(--acento); border-left-color: var(--acento); background: transparent; }
.tarjeta { padding: 18px 20px; }
.etiq { border-radius: 0; color: var(--tinta-2); border-color: var(--linea); }
.formulario input, .formulario select, .entrada input { border-radius: 0; border-color: var(--linea); }
.formulario button, .acciones button, .formulario button.rojo, .entrada button,
table.editable button { border-radius: 0; background: var(--acento); color: #000; font-weight: 700; }
table.editable input, table.editable select { border-radius: 0; }
.topologia-resumen { display: flex; gap: 0; margin: 14px 0 18px; border-top: 1px solid var(--linea);
  border-bottom: 1px solid var(--linea); }
.topologia-resumen span { padding: 9px 18px 9px 0; margin-right: 18px; color: var(--tinta-2);
  border-right: 1px solid var(--linea); font-size: 11px; }
.topologia-resumen b { color: var(--tinta); font-size: 16px; margin-right: 5px; }
.topologia-resumen .senal b { color: var(--aviso); }
.diagrama .cable { stroke: var(--acento); stroke-width: 2; opacity: .72; }
.diagrama .cable.fibra { stroke: #FFB800; stroke-width: 3; }
.diagrama .punta { fill: var(--acento); }
.diagrama .boca { fill: var(--acento); font-size: 10px; font-weight: 700; }
.diagrama .caja rect { fill: var(--superficie); stroke: var(--linea); }
.diagrama .n1 { fill: var(--tinta); font-family: inherit; font-size: 11px; }
.diagrama .n2 { fill: var(--tinta-2); font-family: inherit; font-size: 9px; }
.diagrama .t-router .franja { fill: var(--acento); }
.diagrama .t-switch .franja { fill: #4DA3FF; }
.diagrama .t-sai .franja { fill: var(--aviso); }
.diagrama .t-ap .franja { fill: #B6FF00; }
.diagrama .t-ont .franja, .diagrama .t-otro .franja { fill: var(--tinta-3); }
.conexion-cabecera { border-top: 1px solid var(--linea); padding-top: 15px; }
.conexion-cabecera a { color: var(--acento); }
.aviso-ok { border-radius: 0; border-left-color: var(--acento); background: var(--superficie); }

/* Capa visual final: Swiss claro. Mantiene la rejilla y evita que la capa
   antigua de terminal oscurezca los controles operativos. */
:root { color-scheme: light; --plano:#f7f8fa; --superficie:#fff; --tinta:#111827;
  --tinta-2:#475569; --tinta-3:#64748b; --linea:#dbe1e8; --borde:#cbd5e1;
  --acento:#155eef; --bien:#16803c; --aviso:#b45309; --critico:#c62828; }
body { background:var(--plano); color:var(--tinta); font-family:Helvetica Neue, Helvetica, Arial, sans-serif;
  font-variant-numeric:tabular-nums; }
.rail, .tarjeta, .ficha, .entrada { background:#fff; border-color:var(--linea); border-radius:4px; box-shadow:0 1px 2px rgba(15,23,42,.04); }
.rail { border-right:1px solid var(--linea); }
.hoja { max-width:1320px; padding:28px 34px 64px; }
.cabecera h1 { font-size:26px; letter-spacing:-.03em; }
.sub, .meta { color:var(--tinta-2); }
.pestanas { border-bottom:2px solid var(--tinta); gap:0; }
.pestanas a[aria-selected="true"] { color:var(--acento); border-bottom-color:var(--acento); }
.pestanas a:hover, .rail nav a:hover { color:var(--acento); background:transparent; }
.rail nav a.activo { color:var(--acento); border-left-color:var(--acento); background:#eff6ff; }
.tarjeta { padding:18px 20px; }
.etiq { border-radius:0; color:var(--tinta-2); border-color:var(--linea); }
.formulario input, .formulario select, .entrada input { color:var(--tinta); background:#fff; border-radius:4px; border-color:var(--borde); }
.formulario button, .acciones button, .formulario button.rojo, .entrada button, table.editable button { border-radius:4px; background:var(--acento); color:#fff; font-weight:600; }
table { font-size:13px; }
th { color:var(--tinta-3); background:#f8fafc; }
td, th { padding:9px 10px; }
table.editable input, table.editable select, .tabla-cableado select, .tabla-cableado input { color:var(--tinta); background:#fff; border-color:var(--linea); border-radius:4px; }
table.editable input:focus, table.editable select:focus, .tabla-cableado select:focus, .tabla-cableado input:focus { outline:2px solid #bfdbfe; border-color:var(--acento); }
.tabla-cableado tbody tr:hover { background:#f0f6ff; }
.jerarquia-topologia span { background:#eff6ff; border-color:#bfdbfe; color:#1d4ed8; border-radius:0; }
.jerarquia-topologia b { color:var(--acento); }
.mapa { background:#f8fafc; border-color:var(--borde); }
.selector-cableado, .filtro-cableado { color:var(--tinta-2); }
.selector-cableado select, .filtro-cableado select { color:var(--tinta); background:#fff; border:1px solid var(--borde); border-radius:4px; }
.ruta-cable { background:#f8fafc; color:var(--tinta); border-color:var(--linea); border-left-color:var(--acento); }
.ruta-cable:hover, .ruta-cable.seleccionado { border-color:var(--acento); }
.ruta-cable b { color:var(--acento); }
.ruta-intermedio { color:var(--aviso); }
.diagrama .cable { stroke:var(--acento); stroke-width:2; opacity:.72; }
.diagrama .cable.fibra { stroke:#b45309; stroke-width:3; }
.diagrama .punta { fill:var(--acento); }
.diagrama .caja rect { fill:#fff; stroke:var(--borde); }
.diagrama .caja .n1 { fill:var(--tinta); font-family:inherit; }
.diagrama .caja .n2 { fill:var(--tinta-2); font-family:inherit; }
.diagrama .t-router .franja { fill:var(--acento); }
.diagrama .t-switch .franja { fill:#4d8dff; }
.diagrama .t-sai .franja { fill:var(--aviso); }
.diagrama .t-ap .franja { fill:#16803c; }
.diagrama .t-ont .franja, .diagrama .t-otro .franja { fill:var(--tinta-3); }
.referencias-pendientes { border-color:var(--aviso); }
.referencias-pendientes h3 { color:var(--aviso); }
.aviso-ok { border-radius:4px; border-left-color:var(--bien); background:#fff; }

/* Reconstrucción operativa: recorridos legibles y editables */
.eyebrow,.codigo,.tipo-paso { font-size:.68rem; letter-spacing:.12em; font-weight:700; color:var(--acento); }
.hero-panel { display:flex; justify-content:space-between; align-items:end; gap:24px; padding:28px 0; border-bottom:2px solid var(--tinta); margin-bottom:18px; }
.hero-panel h2 { margin:4px 0 8px; font-size:2rem; letter-spacing:-.04em; }
.hero-panel select { min-width:250px; }
.recorrido,.conexion-card { background:#fff; border:1px solid var(--borde); border-left:4px solid var(--acento); padding:18px 20px; margin:12px 0; box-shadow:0 2px 8px #0b1f3510; }
.recorrido-head { display:flex; align-items:start; justify-content:space-between; gap:16px; }
.recorrido-head h3 { margin:4px 0 0; }
.cadena { display:flex; align-items:stretch; gap:10px; overflow-x:auto; padding:18px 0 4px; }
.nodo-paso { min-width:150px; padding:11px 13px; background:#f4f7fb; border:1px solid var(--borde); display:flex; flex-direction:column; gap:4px; }
.nodo-paso strong { color:var(--tinta); }.nodo-paso small { color:var(--tinta-2); }.tipo-wan { border-top:3px solid #b45309; }.tipo-equipo { border-top:3px solid var(--acento); }.tipo-patch,.tipo-toma { border-top:3px solid #7c3aed; }.tipo-activo { border-top:3px solid #16803c; }
.flecha { align-self:center; color:var(--acento); font-size:1.35rem; font-weight:700; }.compacta { padding:12px 0 0; }.compacta .nodo-paso { min-width:120px; padding:8px 10px; }
.nota-linea { border-top:1px solid var(--linea); padding-top:10px; color:var(--tinta-2); }
.form-cabecera,.paso-row { display:grid; grid-template-columns:1.2fr 1.2fr; gap:12px; }.pasos-editor { display:flex; flex-direction:column; gap:8px; margin:18px 0; }.paso-row { grid-template-columns:26px 180px 1fr 150px 150px 32px; align-items:center; }.paso-row select,.paso-row input { min-width:0; }.paso-mover { color:var(--tinta-3); text-align:center; }.quitar-paso { border:0; background:transparent; color:#b42318; font-size:1.5rem; cursor:pointer; }
.acciones { display:flex; gap:10px; align-items:center; flex-wrap:wrap; }.boton { display:inline-block; background:var(--acento); color:#fff; border:1px solid var(--acento); padding:9px 14px; text-decoration:none; cursor:pointer; font:inherit; }.boton.secundario { background:#fff; color:var(--acento); }.boton.peligro { background:#fff; color:#b42318; border-color:#e5b4b0; }
.summary-accion { cursor:pointer; font-weight:700; color:var(--acento); }.equipo-card summary { display:flex; justify-content:space-between; gap:20px; cursor:pointer; list-style:none; }.equipo-titulo { display:flex; align-items:center; gap:10px; }.equipo-resumen { color:var(--tinta-2); font-size:.9rem; }.punto { width:9px; height:9px; background:#16803c; border-radius:50%; }.punto.apagado { background:#b42318; }
.compacto-form { grid-template-columns:repeat(4,minmax(140px,1fr)); }.compacto-form label:last-of-type { grid-column:span 2; }.tabla-simple { overflow:auto; }.tabla-simple table { min-width:760px; width:100%; }
.puertos-mini { margin-top:18px; border-top:1px solid var(--linea); padding-top:12px; }.puertos-mini summary { cursor:pointer; color:var(--acento); font-weight:700; }.puertos-grid { display:grid; grid-template-columns:repeat(3,minmax(180px,1fr)); gap:10px; margin-top:12px; }.puertos-grid label { display:grid; grid-template-columns:32px 1fr; gap:6px; align-items:center; }.puertos-grid label input { grid-column:1 / -1; }.puertos-grid button { grid-column:1 / -1; justify-self:start; }
.constructor { overflow:visible; }.constructor > summary { font-size:1.05rem; }.matriz-toolbar { display:grid; grid-template-columns:1fr 1.5fr auto; gap:12px; align-items:end; margin:18px 0; }.matriz { border:1px solid var(--borde); overflow:auto; }.matriz-scroll { min-width:max-content; }.matriz table { border-collapse:collapse; min-width:100%; }.matriz th { background:#eef3f9; color:var(--tinta); text-align:left; min-width:220px; padding:12px; border-right:1px solid var(--borde); }.matriz th span { display:block; color:var(--acento); font-size:.68rem; text-transform:uppercase; letter-spacing:.08em; }.matriz th strong { display:block; margin-top:4px; }.matriz th button { float:right; margin-top:-22px; border:0; background:transparent; color:#b42318; font-size:1.2rem; cursor:pointer; }.matriz td { padding:8px 12px; border-top:1px solid var(--linea); border-right:1px solid var(--linea); height:48px; }.matriz td select { width:100%; }.puerto-no { color:var(--tinta-3); }.matriz-vacia { padding:22px; border:1px dashed var(--borde); color:var(--tinta-2); }
@media(max-width:800px){.matriz-toolbar{grid-template-columns:1fr}.puertos-grid{grid-template-columns:1fr}}
.rack-panel { margin-bottom:14px; }.rack-lista { margin:14px 0; display:grid; gap:8px; }.rack-item { border:1px solid var(--borde); padding:10px 12px; }.rack-item summary { display:flex; justify-content:space-between; cursor:pointer; }.rack-item summary span { color:var(--tinta-2); font-size:.85rem; }.rack-item .compacto-form { margin-top:12px; }
.celda-puerto { display:grid; grid-template-columns:minmax(100px,1fr) 105px; gap:6px; min-width:280px; }.selector-medio { font-size:.78rem; }.info-puerto { grid-column:1 / -1; width:100%; box-sizing:border-box; font-size:.8rem; }
.matriz-indice,.matriz-fila { width:42px; min-width:42px; padding-left:8px !important; padding-right:8px !important; text-align:center !important; }.matriz-fila { background:#f7f9fc; color:var(--tinta-2); font-weight:700; }
.mover-columna { display:flex; gap:3px; margin-top:8px; }.mover-columna button { border:1px solid var(--borde); background:#fff; color:var(--acento); cursor:pointer; padding:2px 7px; }.mover-columna button:disabled { color:var(--tinta-3); cursor:not-allowed; }.mover-columna .quitar-columna { color:#b42318; margin-left:auto; }
.hoja-rack { padding:0; overflow:hidden; }.hoja-rack-cabecera { display:flex; justify-content:space-between; align-items:end; gap:20px; padding:18px 20px; border-bottom:1px solid var(--borde); }.hoja-rack-cabecera h3 { margin:3px 0 4px; }.hoja-contador { color:var(--tinta-2); font-size:.82rem; white-space:nowrap; }.tabla-rack-scroll { overflow:auto; }.tabla-rack { border-collapse:separate; border-spacing:0; width:100%; min-width:900px; font-size:.86rem; }.tabla-rack th,.tabla-rack td { border-right:1px solid var(--linea); border-bottom:1px solid var(--linea); padding:10px 12px; text-align:left; vertical-align:top; }.tabla-rack thead th { position:sticky; top:0; z-index:2; background:#eef3f9; color:var(--tinta); font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; white-space:nowrap; }.tabla-rack thead th:first-child,.tabla-rack tbody th { position:sticky; left:0; z-index:3; background:#f7f9fc; }.tabla-rack thead th:first-child { z-index:4; }.tabla-rack .col-numero,.tabla-rack .fila-numero { width:42px; text-align:center; }.tabla-rack .col-recorrido { min-width:190px; }.tabla-rack .col-acciones { width:150px; }.recorrido-celda,.paso-celda { min-width:170px; }.recorrido-celda strong,.paso-celda strong,.paso-celda small { display:block; }.recorrido-celda small,.paso-celda small { color:var(--tinta-2); margin-top:5px; }.paso-celda .tipo-paso { display:block; margin-bottom:5px; font-size:.64rem; }.paso-celda .paso-info { color:var(--acento); }.celda-vacia { color:var(--tinta-3); text-align:center !important; background:#fbfcfe; }.acciones-celda { white-space:nowrap; }.acciones-celda form { display:inline-block; margin-left:5px; }.acciones-celda .boton { padding:6px 9px; font-size:.78rem; }
.tabla-rack thead th small { display:block; margin-top:5px; color:var(--tinta-2); font-size:.62rem; letter-spacing:.04em; font-weight:500; text-transform:none; }
.cabecera-seleccionable { display:block; width:100%; padding:0; border:0; background:transparent; color:inherit; text-align:left; font:inherit; cursor:pointer; }.cabecera-seleccionable:hover strong,.celda-seleccionable:hover strong { color:var(--acento); }.celda-seleccionable { cursor:pointer; }.celda-seleccionable:focus,.cabecera-seleccionable:focus { outline:2px solid var(--acento); outline-offset:-3px; }
@media(max-width:800px){ .hero-panel,.equipo-card summary { align-items:start; flex-direction:column; }.form-cabecera,.paso-row,.compacto-form { grid-template-columns:1fr; }.paso-row { padding:10px; border:1px solid var(--borde); }.compacto-form label:last-of-type { grid-column:auto; } }

/* Lectura operativa de la topología: cada tarjeta representa un cableado real. */
.filtro-topologia-label { display:flex; flex-direction:column; gap:6px; color:var(--tinta-2); font-size:.78rem; min-width:min(330px,100%); }
.filtro-topologia-label select { color:var(--tinta); background:#fff; border:1px solid var(--borde); border-radius:4px; padding:10px 12px; font:inherit; }
.topologia-lista { display:flex; flex-direction:column; gap:14px; }
.recorrido[hidden] { display:none; }
.recorrido-head h3 { font-size:1rem; }
.recorrido-head a { color:var(--acento); text-decoration:none; white-space:nowrap; }
.recorrido-head a:hover { text-decoration:underline; }
.cadena { align-items:center; }
.nodo-paso { position:relative; min-width:190px; background:#fff; box-shadow:0 1px 3px rgba(15,23,42,.06); }
.nodo-paso a { color:inherit; text-decoration:none; }
.nodo-paso a:hover strong { color:var(--acento); text-decoration:underline; }
.nodo-paso .nodo-info { color:var(--acento); }
.flecha { min-width:24px; text-align:center; }

/* Topología gráfica: lienzo amplio, tarjetas físicas y cables seleccionables. */
.mapa-unifi { padding:0; overflow:hidden; }
.mapa-unifi-cabecera { display:flex; justify-content:space-between; align-items:end; gap:20px; padding:18px 20px; border-bottom:1px solid var(--borde); }
.mapa-unifi-cabecera h3 { margin-bottom:4px; }
.mapa-leyenda { display:flex; align-items:center; gap:7px; color:var(--tinta-2); font-size:.75rem; white-space:nowrap; }
.leyenda-linea { display:inline-block; width:26px; height:3px; background:var(--acento); }
.leyenda-linea.fibra { background:repeating-linear-gradient(90deg,var(--acento) 0 7px,transparent 7px 12px); }
.mapa-unifi-scroll { overflow:auto; background:#f8fafc; border-bottom:1px solid var(--linea); }
.mapa-columnas { display:grid; grid-template-columns:repeat(5,210px); column-gap:92px; width:max-content; padding:14px 28px 0; color:var(--tinta-3); font-size:10px; font-weight:700; letter-spacing:.08em; }
.mapa-unifi-svg { display:block; min-width:860px; min-height:390px; padding:28px; }
.mapa-cable { fill:none; stroke:var(--acento); stroke-width:3; opacity:.42; cursor:pointer; transition:opacity .16s,stroke-width .16s; }
.mapa-cable.fibra { stroke-dasharray:8 6; }
.mapa-cable:hover,.mapa-cable.seleccionado { opacity:1; stroke-width:5; }
.mapa-cable.atenuado { opacity:.08; }
.mapa-nodo { cursor:pointer; transition:opacity .16s; }
.mapa-nodo .nodo-caja { fill:#fff; stroke:#cbd5e1; stroke-width:1.5; }
.mapa-nodo .nodo-barra { fill:var(--acento); }
.mapa-nodo .nodo-tipo { fill:var(--acento); font:700 10px Helvetica Neue,Helvetica,Arial,sans-serif; letter-spacing:1px; }
.mapa-nodo .nodo-nombre { fill:var(--tinta); font:600 14px Helvetica Neue,Helvetica,Arial,sans-serif; }
.mapa-nodo .nodo-detalle { fill:var(--tinta-2); font:12px Helvetica Neue,Helvetica,Arial,sans-serif; }
.mapa-nodo .nodo-estado { fill:var(--tinta-3); font:700 9px Helvetica Neue,Helvetica,Arial,sans-serif; letter-spacing:1px; }
.mapa-nodo.sin-enlace { opacity:.46; }
.mapa-nodo.seleccionado .nodo-caja { stroke:var(--acento); stroke-width:3; }
.mapa-nodo.atenuado { opacity:.16; }
.equipos-sin-enlace { padding:0; }
.equipos-sin-enlace .mapa-unifi-cabecera { border-bottom:1px solid var(--linea); }
.sin-enlace-lista { display:flex; flex-wrap:wrap; gap:8px; padding:16px 20px 20px; }
.sin-enlace-lista span { display:flex; flex-direction:column; gap:2px; min-width:190px; padding:9px 11px; background:#f8fafc; border:1px solid var(--linea); }
.sin-enlace-lista small { color:var(--tinta-2); }
@media(max-width:800px){.mapa-unifi-cabecera{align-items:start;flex-direction:column}.mapa-leyenda{white-space:normal}}