/* Netcloudify Looking Glass — capa propia sobre Tabler.
   Aquí sólo vive lo que el tema no trae: la consola de salida, la tabla del
   MTR, los selectores de nodo, las tarjetas de multi-ping y de enlaces, y la
   barra inferior del móvil. Todo lo demás (rejilla, tarjetas, formularios,
   botones, tablas) sale de Tabler. */

:root {
  /* Tabler viene bastante cuadrado (6 px). Se redondea todo el tema desde
     aquí: los componentes derivan su radio de estas mismas variables. */
  --tblr-border-radius-sm: 9px;
  --tblr-border-radius-md: 11px;
  --tblr-border-radius-lg: 15px;
  --tblr-border-radius-xl: 20px;
  --tblr-border-radius: 11px;
  --tblr-border-radius-scale: 1;

  --lg-mono: ui-monospace, "SFMono-Regular", "JetBrains Mono", "Fira Code", Menlo, Consolas, monospace;
  --lg-accent: var(--tblr-primary, #0e7490);
  --lg-safe-bottom: env(safe-area-inset-bottom, 0px);
}

body { -webkit-text-size-adjust: 100%; }
.mono, code, pre, .font-mono { font-family: var(--lg-mono); }
.tabular { font-variant-numeric: tabular-nums; }
.hidden { display: none !important; }

/* En el móvil la barra de herramientas vive abajo: hay que dejarle sitio. */
@media (max-width: 767.98px) {
  body.has-botnav .page-body { padding-bottom: calc(78px + var(--lg-safe-bottom)); }
}

/* ------------------------------------------------------------------ marca */
.brand-logo { display: block; height: 32px; width: auto; max-width: 190px; object-fit: contain; }
.brand-mark {
  width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center;
  background: var(--lg-accent); color: #fff; font-weight: 700; font-size: 14px; flex: none;
}
@media (max-width: 575.98px) { .brand-logo { height: 26px; max-width: 130px; } }

/* ------------------------------------------------------- selector de nodos */
.node-groups { display: flex; flex-direction: column; gap: .75rem; }
.node-group.empty { display: none; }
.node-group-title {
  font-size: .7rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  color: var(--tblr-secondary); margin-bottom: .35rem;
}
.node-group-title .dim { text-transform: none; letter-spacing: 0; font-weight: 400; opacity: .85; }
.nodes { display: flex; gap: .5rem; overflow-x: auto; padding-bottom: .25rem; scrollbar-width: thin; }
.node-chip {
  flex: 0 0 auto; min-width: 142px; cursor: pointer; position: relative;
  border: 1px solid var(--tblr-border-color); border-radius: var(--tblr-border-radius);
  background: var(--tblr-bg-surface); padding: .5rem .7rem;
  transition: border-color .15s, background .15s;
}
.node-chip:hover { border-color: var(--tblr-primary); }
.node-chip.active { border-color: var(--tblr-primary); background: rgba(var(--tblr-primary-rgb), .07); }
.node-chip input { position: absolute; opacity: 0; pointer-events: none; }
.node-chip .n-top { display: flex; align-items: center; gap: .35rem; font-weight: 600; font-size: .85rem; }
.node-chip .n-sub { font-size: .72rem; color: var(--tblr-secondary); margin-top: .1rem; }
.node-chip .n-dot {
  position: absolute; top: .5rem; right: .5rem; width: 7px; height: 7px; border-radius: 50%;
  background: var(--tblr-gray-400);
}
.node-chip .n-dot.ok { background: var(--tblr-green); }
.node-chip .n-dot.down { background: var(--tblr-red); }

/* ---------------------------------------------------------------- consola */
.term {
  background: var(--tblr-bg-surface-secondary, #f8fafc);
  border: 1px solid var(--tblr-border-color);
  border-radius: var(--tblr-border-radius);
  padding: .75rem .85rem; max-height: 60vh; overflow: auto;
  font-family: var(--lg-mono); font-size: 12.5px; line-height: 1.55;
  white-space: pre-wrap; word-break: break-word; color: var(--tblr-body-color);
}
.term .t-info { color: var(--tblr-blue); }
.term .t-err { color: var(--tblr-red); }
.term .t-ok { color: var(--tblr-green); }
.term .t-dim { color: var(--tblr-secondary); }
.term .t-hl { color: var(--tblr-orange); }
.term a.ipl { border-bottom: 1px dotted currentColor; }
.term .asn-chip { color: var(--tblr-purple); cursor: pointer; }
details.raw-output > summary {
  cursor: pointer; font-size: .8rem; color: var(--tblr-secondary); padding: .35rem 0;
}

/* -------------------------------------------------------------- resultados */
.result-target { font-family: var(--lg-mono); color: var(--tblr-primary); }
.rt-resolved { color: var(--tblr-secondary); font-weight: 400; }
.status-dot {
  width: 8px; height: 8px; border-radius: 50%; display: inline-block;
  background: var(--tblr-gray-400); flex: none;
}
.status-dot.running { background: var(--tblr-orange); animation: lg-pulse 1.1s infinite; }
.status-dot.done { background: var(--tblr-green); }
.status-dot.failed, .status-dot.timeout, .status-dot.cancelled { background: var(--tblr-red); }
@keyframes lg-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
.spin {
  width: 14px; height: 14px; border-radius: 50%; display: inline-block;
  border: 2px solid rgba(var(--tblr-primary-rgb), .25); border-top-color: var(--tblr-primary);
  animation: lg-spin .7s linear infinite;
}
@keyframes lg-spin { to { transform: rotate(360deg); } }

/* ---------------------------------------------------------- tabla del MTR */
.hop-host { font-family: var(--lg-mono); font-size: .8rem; }
.hop-name { color: var(--tblr-secondary); font-size: .72rem; }
.hop-asn { color: var(--tblr-purple); font-size: .7rem; }
.hop-none { color: var(--tblr-secondary); font-style: italic; }
.loss-0 { color: var(--tblr-green); font-weight: 600; }
.loss-low { color: var(--tblr-orange); font-weight: 600; }
.loss-high { color: var(--tblr-red); font-weight: 600; }
.bar { height: 6px; border-radius: 999px; background: var(--tblr-border-color); overflow: hidden; min-width: 46px; }
.bar > span { display: block; height: 100%; background: var(--tblr-green); }
.bar.warn > span { background: var(--tblr-orange); }
.bar.bad > span { background: var(--tblr-red); }
.spark { display: block; height: 22px; width: 90px; }
.spark path { fill: none; stroke: var(--tblr-primary); stroke-width: 1.5; }
.spark .area { fill: rgba(var(--tblr-primary-rgb), .12); stroke: none; }

/* -------------------------------------------------------------- multi-ping */
.pcard { position: relative; overflow: hidden; }
.pcard.running::after {
  content: ""; position: absolute; inset: 0 auto 0 0; width: 3px;
  background: var(--tblr-orange); animation: lg-pulse 1.1s infinite;
}
.pcard .p-rtt { font-family: var(--lg-mono); font-size: 1.35rem; font-weight: 600; line-height: 1.1; }
.pcard .p-unit { font-size: .7rem; color: var(--tblr-secondary); }
.pcard .p-extra { font-family: var(--lg-mono); font-size: .7rem; color: var(--tblr-secondary); }

/* ------------------------------------------------ tablas de resultados BGP */
.via-kind {
  display: block; font-size: .68rem; color: var(--tblr-secondary);
  text-transform: uppercase; letter-spacing: .03em;
}
.asn-link { font-family: var(--lg-mono); font-size: .78rem; white-space: nowrap; }
.asn-name { display: block; font-size: .68rem; color: var(--tblr-secondary); }
.grid-head { display: flex; align-items: baseline; gap: .6rem; margin-bottom: .5rem; }
.grid-head h3 { margin: 0; font-size: .95rem; }
.grid-count { font-size: .78rem; color: var(--tblr-secondary); }

/* ------------------------------------------------ resolución del destino */
.resolve-hint {
  display: flex; flex-wrap: wrap; align-items: center; gap: .35rem;
  margin-top: .35rem; font-size: .75rem; color: var(--tblr-secondary);
}
.resolve-hint.bad { color: var(--tblr-red); }
.resolve-hint .rh-label { text-transform: uppercase; font-size: .65rem; letter-spacing: .04em; }
.resolve-hint .rh-name { font-family: var(--lg-mono); color: var(--tblr-body-color); }
.resolve-hint .rh-note { opacity: .85; }
.resolve-hint .rh-ip {
  font-family: var(--lg-mono); font-size: .74rem; cursor: pointer; padding: .1rem .5rem;
  border-radius: 999px; border: 1px solid rgba(var(--tblr-primary-rgb), .35);
  background: rgba(var(--tblr-primary-rgb), .08); color: var(--tblr-primary);
}

/* --------------------------------------------------------- estado de la red */
.link-card { border-left: 3px solid var(--tblr-border-color); }
.link-card.s-up { border-left-color: var(--tblr-green); }
.link-card.s-degraded { border-left-color: var(--tblr-orange); }
.link-card.s-down { border-left-color: var(--tblr-red); }
.link-card.s-disabled { opacity: .65; }
.link-card .l-state { font-size: .68rem; text-transform: uppercase; letter-spacing: .04em; }
.link-card.s-up .l-state { color: var(--tblr-green); }
.link-card.s-degraded .l-state { color: var(--tblr-orange); }
.link-card.s-down .l-state { color: var(--tblr-red); }

/* --------------------------------------------------- matriz de latencias */
table.mesh { border-collapse: separate; border-spacing: 4px; }
table.mesh th { font-size: .72rem; color: var(--tblr-secondary); font-weight: 600; white-space: nowrap; padding: .2rem .5rem; }
table.mesh th.rowhead { text-align: right; }
table.mesh td {
  text-align: center; border-radius: 9px; padding: .5rem .6rem; min-width: 84px;
  font-family: var(--lg-mono); font-size: .8rem; border: 1px solid var(--tblr-border-color);
}
table.mesh td .ls { display: block; font-size: .64rem; color: var(--tblr-secondary); }
.q-great { background: rgba(var(--tblr-green-rgb), .12); border-color: rgba(var(--tblr-green-rgb), .3); }
.q-good { background: rgba(var(--tblr-teal-rgb), .12); border-color: rgba(var(--tblr-teal-rgb), .3); }
.q-fair { background: rgba(var(--tblr-orange-rgb), .12); border-color: rgba(var(--tblr-orange-rgb), .3); }
.q-far { background: rgba(var(--tblr-orange-rgb), .18); border-color: rgba(var(--tblr-orange-rgb), .4); }
.q-bad, .q-down { background: rgba(var(--tblr-red-rgb), .12); border-color: rgba(var(--tblr-red-rgb), .35); }
.q-unknown { color: var(--tblr-secondary); }
.q-self { border-style: dashed; color: var(--tblr-secondary); }

/* ------------------------------------------------------ barra inferior móvil */
.botnav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 1030; display: flex;
  background: var(--tblr-bg-surface); border-top: 1px solid var(--tblr-border-color);
  padding-bottom: var(--lg-safe-bottom); box-shadow: 0 -2px 12px rgba(0, 0, 0, .06);
}
.botnav button {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: .15rem;
  padding: .5rem .2rem; border: 0; background: none; cursor: pointer;
  color: var(--tblr-secondary); font-size: .66rem; font-weight: 600;
}
.botnav button.active { color: var(--tblr-primary); }
.botnav svg { width: 20px; height: 20px; }
@media (min-width: 768px) { .botnav { display: none; } }

/* ------------------------------------------------------------------ avisos */
.toast-host {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(86px + var(--lg-safe-bottom)); z-index: 1080;
  display: flex; flex-direction: column; gap: .5rem; pointer-events: none;
}
.lg-toast {
  background: var(--tblr-dark); color: #fff; padding: .5rem 1rem; border-radius: 999px;
  font-size: .82rem; box-shadow: var(--tblr-box-shadow);
}
.lg-toast.err { background: var(--tblr-red); }
.hist-target { font-family: var(--lg-mono); }

@media (prefers-reduced-motion: reduce) { * { animation-duration: .01ms !important; } }

/* ------------------------------------------------- estado de red en la barra */
.net-pill {
  display: inline-flex; align-items: center; gap: .4rem; white-space: nowrap;
  padding: .3rem .7rem; border-radius: 999px; font-size: .78rem; font-weight: 600;
  border: 1px solid var(--tblr-border-color); color: var(--tblr-secondary);
  background: var(--tblr-bg-surface);
}
.net-pill:hover { text-decoration: none; border-color: var(--tblr-primary); }
.net-pill.s-up { color: var(--tblr-green); border-color: rgba(var(--tblr-green-rgb), .35); background: rgba(var(--tblr-green-rgb), .07); }
.net-pill.s-degraded { color: var(--tblr-orange); border-color: rgba(var(--tblr-orange-rgb), .35); background: rgba(var(--tblr-orange-rgb), .08); }
.net-pill.s-down { color: var(--tblr-red); border-color: rgba(var(--tblr-red-rgb), .35); background: rgba(var(--tblr-red-rgb), .08); }
.net-pill .icon { width: 15px; height: 15px; }
.min-w-0 { min-width: 0; }
.as-chip {
  display: inline-flex; align-items: center; padding: .3rem .6rem; border-radius: 999px;
  border: 1px solid var(--tblr-border-color); background: var(--tblr-bg-surface);
  font-family: var(--lg-mono); font-size: .74rem; font-weight: 600; color: var(--tblr-secondary);
}
.as-chip:hover { text-decoration: none; border-color: var(--tblr-primary); color: var(--tblr-primary); }
.net-pill .np-short { display: none; }
@media (max-width: 575.98px) {
  .net-pill .np-text { display: none; }
  .net-pill .np-short { display: inline; }
}

/* --------------------------------------------- selector de herramienta */
/* Siete herramientas no caben en un móvil, así que la tira se desplaza. El
   degradado del borde avisa de que hay más a la derecha y desaparece al
   llegar al final. */
.toolbar-wrap { position: relative; margin-bottom: .75rem; }
.toolbar {
  display: flex; gap: .2rem; width: max-content; max-width: 100%; padding: .3rem; overflow-x: auto;
  border: 1px solid var(--tblr-border-color); border-radius: 999px;
  background: var(--tblr-bg-surface); scrollbar-width: none; scroll-behavior: smooth;
}
.toolbar::-webkit-scrollbar { display: none; }
.toolbar-wrap::after {
  content: ""; position: absolute; top: 1px; right: 1px; bottom: 1px; width: 42px;
  border-radius: 0 999px 999px 0; pointer-events: none; opacity: 0; transition: opacity .15s;
  background: linear-gradient(90deg, rgba(var(--tblr-bg-surface-rgb, 255,255,255), 0),
                                     var(--tblr-bg-surface) 70%);
}
.toolbar-wrap.has-more::after { opacity: 1; }
.tool {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: .4rem;
  padding: .5rem .9rem; border: 0; border-radius: 999px; background: none;
  font: inherit; font-size: .85rem; font-weight: 600; line-height: 1;
  color: var(--tblr-secondary); white-space: nowrap; cursor: pointer;
  transition: background .15s, color .15s;
}
.tool svg { width: 17px; height: 17px; flex: none; }
.tool:hover { color: var(--tblr-body-color); background: var(--tblr-bg-surface-secondary); }
.tool.active {
  background: var(--tblr-primary); color: var(--tblr-primary-fg);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .12);
}
.tool:focus-visible { outline: 2px solid var(--tblr-primary); outline-offset: 2px; }
@media (max-width: 400px) { .tool { padding: .5rem .7rem; font-size: .82rem; } }

/* Un nombre largo de datacenter no puede empujar la página a lo ancho. */
.badge { max-width: 100%; white-space: normal; text-align: left; }

/* El botón de lanzar ocupa todo el ancho en el móvil (es el objetivo del
   pulgar) y se queda en su tamaño en pantallas grandes. */
.btn-run { width: 100%; }
@media (min-width: 768px) { .btn-run { width: auto; min-width: 190px; } }