.zarza-boot,
.zarza-barra {
  --zb-negro: #050407;
  --zb-panel: #0b0a0e;
  --zb-rosa: #e86fa4;
  --zb-violeta: #b14fe0;
  --zb-verde: #31d67a;
  --zb-ambar: #c9a227;
  --zb-linea: #2a2140;
  --zb-texto: #f0e8ef;
  --zb-muted: #aa9cad;
  font-family: Fixedsys, "Lucida Console", "Courier New", monospace;
}


.zarza-barra {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
  padding: 6px clamp(10px, 3vw, 26px);
  border-bottom: 1px solid var(--zb-linea);
  background: var(--zb-negro);
  color: var(--zb-muted);
  font-size: .68rem;
  letter-spacing: .06em;
}


.zarza-barra__volver {
  padding: 3px 8px;
  border: 1px solid var(--zb-rosa);
  color: var(--zb-rosa);
  text-decoration: none;
  white-space: nowrap;
}
.zarza-barra__volver:hover, .zarza-barra__volver:focus-visible { background: var(--zb-rosa); color: var(--zb-negro); }
.zarza-barra__sello { color: var(--zb-verde); white-space: nowrap; }
.zarza-barra__sello b { color: var(--zb-rosa); }
.zarza-barra__modulos { display: flex; flex-wrap: wrap; gap: 4px 10px; }
.zarza-barra__mod {
  padding: 3px 7px;
  border: 1px solid transparent;
  color: var(--zb-muted);
  text-decoration: none;
  white-space: nowrap;
}
a.zarza-barra__mod:hover,
a.zarza-barra__mod:focus-visible { border-color: var(--zb-rosa); color: var(--zb-rosa); }
.zarza-barra__mod--aqui { border-color: var(--zb-violeta); color: var(--zb-texto); }
.zarza-barra__mapa {
  margin-left: auto;
  padding: 3px 8px;
  border: 1px solid var(--zb-linea);
  background: var(--zb-panel);
  color: var(--zb-ambar);
  font: inherit;
  cursor: pointer;
  white-space: nowrap;
}
.zarza-barra__mapa:hover, .zarza-barra__mapa:focus-visible { border-color: var(--zb-ambar); color: var(--zb-negro); background: var(--zb-ambar); }




html[data-zarza-boot="activo"] { overflow: hidden; }

.zarza-boot {
  position: fixed;
  inset: 0;
  z-index: 9000;
  overflow-y: auto;
  padding: clamp(14px, 4vw, 48px) clamp(10px, 4vw, 32px);
  background: var(--zb-negro);
  color: var(--zb-texto);
  font-size: .78rem;
  line-height: 1.5;
}
.zarza-boot__marco {
  width: min(760px, 100%);
  margin: 0 auto;
  display: grid;
  gap: 12px;
}
.zarza-boot [data-visible] { opacity: 1; }
.zarza-boot__cabecera,
.zarza-boot__linea,
.zarza-boot__estacion,
.zarza-boot__pie { opacity: 0; transition: opacity .16s steps(2); }

.zarza-boot__cabecera { border-bottom: 1px solid var(--zb-linea); padding-bottom: 10px; }
.zarza-boot__titulo { margin: 0; color: var(--zb-rosa); font-size: clamp(1rem, 3.4vw, 1.5rem); letter-spacing: .1em; }
.zarza-boot__bios { margin: 6px 0 0; color: var(--zb-verde); font-size: .7rem; letter-spacing: .06em; }
.zarza-boot__linea { margin: 0; color: var(--zb-ambar); letter-spacing: .05em; }
.zarza-boot__linea--tenue { color: var(--zb-muted); }

.zarza-boot__mapa { display: grid; gap: 0; margin: 4px 0 0; padding: 0; list-style: none; }
.zarza-boot__estacion { display: grid; gap: 0; justify-items: center; }


.zarza-boot__hilo { color: var(--zb-violeta); line-height: 1.1; font-size: 1.1rem; }

.zarza-boot__caja {
  display: grid;
  gap: 3px;
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--zb-linea);
  border-left: 4px solid var(--zb-violeta);
  background: var(--zb-panel);
}
.zarza-boot__quien { color: var(--zb-rosa); font-size: .64rem; font-weight: 800; letter-spacing: .16em; }
.zarza-boot__que { color: var(--zb-texto); font-size: .82rem; letter-spacing: .02em; }
.zarza-boot__detalle { color: var(--zb-muted); font-size: .72rem; }




.zarza-boot__ramas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; width: 100%; margin-top: 6px; }
.zarza-boot__rama { display: grid; gap: 3px; padding: 7px 8px; border: 1px dashed var(--zb-linea); background: var(--zb-negro); }
.zarza-boot__rama b { color: var(--zb-verde); font-size: .66rem; letter-spacing: .08em; }
.zarza-boot__rama span { color: var(--zb-muted); font-size: .66rem; }

.zarza-boot__pie { margin: 6px 0 0; padding-top: 10px; border-top: 1px solid var(--zb-linea); color: var(--zb-muted); }
.zarza-boot__pie b { color: var(--zb-verde); }

@media (max-width: 560px) {
  .zarza-boot__ramas { grid-template-columns: 1fr; }
  .zarza-barra__mapa { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .zarza-boot__cabecera, .zarza-boot__linea, .zarza-boot__estacion, .zarza-boot__pie { transition: none; }
}