/* Piel «mapa primero» de la página de la red (#112): encima de la app del equipo, que no se toca. Los tokens vienen
   del marco (ESTILO en marco.ts); acá sólo la forma. Una vista de grafo es una barra de herramientas y el mapa. */
:root {
  --alto-cabecera: 48px;
  --alto-pestanas: 48px;
  --alto-arriba: calc(var(--alto-cabecera) + var(--alto-pestanas) + 1px);
  --alto-herr: 56px;
  --ancho-texto: 1100px;
  /* Lo que sube el pie de un panel que no debe tapar al aviso: dos o tres renglones a 390 px. */
  --sobre-aviso: 80px;
}
:focus-visible { outline: 3px solid var(--rojo); outline-offset: 2px; }
.marco { border-bottom: 1px solid var(--tinta); }
.marco-dentro { flex-wrap: nowrap; max-width: none; margin: 0; height: var(--alto-cabecera); }
.marco-logo { padding: 0; font-size: 1.45rem; }
.marco-seccion { padding: 0; border-bottom: 0; font-size: 0.74rem; }
.wrap { max-width: none; padding: 0; }
.wrap > h1, .wrap > .tag { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
nav { z-index: 30; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; gap: 0; margin: 0; padding: 0 8px; height: var(--alto-pestanas);
  background: var(--papel); border-bottom: 1px solid var(--tinta); backdrop-filter: none; }
nav::-webkit-scrollbar { display: none; }
nav .navbtn { flex: 0 0 auto; height: 100%; padding: 0 0.8rem; border: 0; border-bottom: 3px solid transparent; background: none; color: var(--tinta-2);
  font: 600 0.84rem var(--sans); white-space: nowrap; }
nav .navbtn:hover { color: var(--tinta); }
nav .navbtn.on { background: none; color: var(--tinta); border-bottom-color: var(--rojo); }
nav .navbtn:focus-visible { outline-offset: -4px; }

/* El aviso de la cabecera baja debajo de las pestañas y sólo se ve en las vistas de texto. */
.wrap > .marco-aviso { max-width: var(--ancho-texto); padding: 12px 16px 0; }
.view:not(.piel-grafo) { max-width: var(--ancho-texto); margin: 0 auto; padding: 20px 16px 64px; }

/* Vista de grafo: una sola barra de herramientas y el mapa ocupa el resto de la pantalla. */
.piel-grafo { position: relative; }
.piel-grafo > :is(h2, p.sub, details.howto) { display: none; }
.piel-grafo .gwrap, .piel-grafo .gwrap.gwide { display: block; position: relative; width: auto; margin: 0; }
/* Sus z-index quedan adentro, bajo las pestañas. La pantalla completa es el mismo bloque fijo sobre toda la ventana: lo de
   adentro sigue acomodado igual y no hace falta repetir cada regla en versión fija. */
.piel-grafo .gwrap { isolation: isolate; }
.piel-grafo .gwrap.full { position: fixed; inset: 0; z-index: 50; background: var(--papel-2); }
.piel-grafo .gwrap > .net, .piel-grafo .gwrap.full > .net { position: relative; inset: auto; z-index: auto; width: auto; height: calc(100dvh - var(--alto-arriba) - var(--alto-herr));
  min-height: 380px; border: 0; background: var(--papel-2); }
.piel-grafo .gwrap.full > .net { height: calc(100dvh - var(--alto-herr)); min-height: 0; }
/* Los recorridos viven en «Opciones»; la app del equipo los oculta en línea y acá se mantiene así. */
.piel-grafo .gwrap > .tours { display: none !important; }
.piel-grafo .gwrap > .toolbar, .piel-grafo .gwrap.full > .toolbar { position: relative; z-index: 52; top: auto; left: auto; display: flex; flex-wrap: nowrap; gap: 8px;
  align-items: center; height: var(--alto-herr); margin: 0; padding: 0 12px; max-width: none; background: var(--papel); border-bottom: 1px solid var(--linea); }
.piel-grafo .toolbar :is(button, select, input) { height: 40px; padding: 0 0.8rem; border: 1px solid var(--tinta); background: var(--papel); color: var(--tinta);
  font: 600 0.84rem var(--sans); }
.piel-grafo .toolbar :is(button, select, input):hover { border-color: var(--tinta); }
.piel-grafo .toolbar button.on, .piel-grafo .toolbar button[aria-pressed="true"], .piel-grafo .toolbar .piel-abrir:has(+ .piel-mas:popover-open) {
  background: var(--tinta); color: var(--papel); border-color: var(--tinta); box-shadow: none; }
.piel-grafo .toolbar .bFind { flex: 0 1 340px; min-width: 0; font-weight: 400; }
.piel-grafo .toolbar .bFind::placeholder { color: var(--tinta-3); }

.piel-mas { margin: 6px 0 0; width: min(280px, calc(100vw - 24px)); padding: 0.6rem; background: var(--papel); color: var(--tinta); border: 1px solid var(--tinta);
  position-area: bottom span-right; position-try-fallbacks: flip-inline; }
.piel-mas:popover-open { display: grid; gap: 6px; }
.piel-grafo .piel-mas > * { width: 100%; max-width: none; text-align: left; }
.piel-zoom { margin-left: auto; display: flex; border: 1px solid var(--tinta); }
.piel-grafo .toolbar .piel-zoom button { width: 40px; height: 38px; padding: 0; border: 0; border-right: 1px solid var(--linea); font-size: 0; }
.piel-grafo .toolbar .piel-zoom button:last-child { border-right: 0; }
.piel-zoom button:focus-visible { outline-offset: -4px; }
.piel-zoom button::before { content: attr(data-icono); font: 600 1.15rem/1 var(--sans); }

.piel-grafo .gwrap > .legpanel, .piel-grafo .gwrap.full > .legpanel { position: absolute; z-index: 51; top: calc(var(--alto-herr) + 12px); left: 12px; width: min(380px, calc(100% - 24px));
  max-height: calc(100% - var(--alto-herr) - 90px); overflow: auto; margin: 0; padding: 0.7rem; background: var(--papel); border: 1px solid var(--tinta); }
.piel-grafo .legpanel .legend { flex-direction: column; flex-wrap: nowrap; gap: 5px; margin: 0 0 0.6rem; font: 0.78rem/1.3 var(--sans); }
.piel-grafo .legpanel .sttit { font: 500 0.68rem var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--tinta-3); }
.piel-grafo .legpanel .chip { border: 0; background: none; padding: 0; }

.piel-grafo .gwrap > .srcpanel, .piel-grafo .gwrap.full > .srcpanel { position: absolute; z-index: 53; top: var(--alto-herr); right: 0; bottom: 0; left: auto; width: min(400px, 100%); height: auto;
  max-width: none; max-height: none; margin: 0; overflow: auto; background: var(--papel); border: 0; border-left: 1px solid var(--tinta); }

/* El aviso de que nadie tiene condena no se tapa con nada: ni la leyenda, ni la ficha, ni la pantalla completa. */
.piel-grafo .gwrap > .aviso1, .piel-grafo .gwrap.full > .aviso1 { position: absolute; z-index: 54; left: 12px; bottom: 12px; display: block; max-width: min(520px, calc(100% - 24px));
  margin: 0; padding: 0.4rem 0.6rem; font: 0.7rem/1.4 var(--mono); color: var(--tinta-2); background: color-mix(in srgb, var(--papel) 94%, transparent); border: 1px solid var(--linea); }
.piel-grafo .gwrap.piel-ficha > .aviso1 { max-width: min(520px, calc(100% - 436px)); }
.piel-grafo .gwrap > .tourCap, .piel-grafo .gwrap.full > .tourCap { position: absolute; z-index: 55; left: 12px; bottom: var(--sobre-aviso); transform: none; border-color: var(--tinta); }

@media (max-width: 700px) {
  .piel-grafo .toolbar :is(button, select, input) { padding: 0 0.6rem; }
  .piel-grafo .toolbar .bFind { flex: 1 1 0; }
  .piel-zoom :is(.btnZin, .btnZout) { display: none; }
  .piel-grafo .gwrap > .srcpanel, .piel-grafo .gwrap.full > .srcpanel { top: auto; left: 0; width: auto; height: 58%; border-left: 0; border-top: 1px solid var(--tinta); }
  .piel-grafo .gwrap > .aviso1, .piel-grafo .gwrap.full > .aviso1 { right: 12px; font-size: 0.64rem; }
  .piel-grafo .gwrap.piel-ficha > .aviso1 { bottom: calc(58% + 12px); max-width: none; }
}