.zsen {
  --zs-negro: #050407;
  --zs-panel: #0b0a0e;
  --zs-rosa: #e86fa4;
  --zs-violeta: #b14fe0;
  --zs-verde: #31d67a;
  --zs-ambar: #c9a227;
  --zs-linea: #2a2140;
  --zs-texto: #f0e8ef;
  --zs-muted: #aa9cad;
  position: fixed;
  inset: 0;
  z-index: 9500;
  font-family: Fixedsys, "Lucida Console", "Courier New", monospace;
}




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



.zsen__velo { position: absolute; inset: 0; cursor: default; }



.zsen[data-sin-marco] .zsen__velo { background: rgba(5, 4, 7, .78); }

.zsen__marco {
  position: absolute;
  left: var(--zsen-x, 0);
  top: var(--zsen-y, 0);
  width: var(--zsen-w, 0);
  height: var(--zsen-h, 0);
  border: 2px solid var(--zs-verde);
  box-shadow: 0 0 0 9999px rgba(5, 4, 7, .78);
  pointer-events: none;
}
.zsen__marco[hidden] { display: none; }

.zsen__flecha {
  position: absolute;
  left: var(--zsen-x, 0);
  top: var(--zsen-y, 0);
  color: var(--zs-verde);
  font-size: 1rem;
  line-height: 1;
  pointer-events: none;
}
.zsen__flecha[hidden] { display: none; }

.zsen__cartel {
  position: absolute;
  left: var(--zsen-x, 50%);
  top: var(--zsen-y, 50%);
  width: min(360px, calc(100vw - 24px));
  padding: 14px 16px;
  border: 1px solid var(--zs-rosa);
  border-bottom-width: 4px;
  background: var(--zs-panel);
  color: var(--zs-texto);
  box-shadow: 7px 7px 0 rgba(177, 79, 224, .45);
}
.zsen__cartel[data-centro="si"] { left: 50%; top: 50%; transform: translate(-50%, -50%); }

.zsen__cuenta { margin: 0 0 6px; color: var(--zs-verde); font-size: .62rem; letter-spacing: .14em; }
.zsen__titulo { margin: 0 0 8px; color: var(--zs-rosa); font-size: .95rem; line-height: 1.2; letter-spacing: .02em; }
.zsen__texto { margin: 0; color: var(--zs-texto); font-size: .76rem; line-height: 1.55; }

.zsen__pie { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 14px; }
.zsen__boton, .zsen__salir {
  min-height: 36px;
  padding: 7px 11px;
  border: 1px solid var(--zs-linea);
  background: #08070a;
  color: var(--zs-texto);
  font: inherit;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .05em;
  cursor: pointer;
}
.zsen__boton:hover:not(:disabled), .zsen__boton:focus-visible { border-color: var(--zs-rosa); color: var(--zs-rosa); }
.zsen__boton:disabled { opacity: .4; cursor: not-allowed; }
.zsen__boton--fuerte { margin-left: auto; border-color: var(--zs-rosa); background: var(--zs-rosa); color: var(--zs-negro); }
.zsen__boton--fuerte:hover, .zsen__boton--fuerte:focus-visible { background: var(--zs-texto); color: var(--zs-negro); border-color: var(--zs-texto); }



.zsen__salir { color: var(--zs-ambar); border-color: var(--zs-ambar); background: transparent; }
.zsen__salir:hover, .zsen__salir:focus-visible { background: var(--zs-ambar); color: var(--zs-negro); }

.zsen button:focus-visible { outline: 2px solid var(--zs-verde); outline-offset: 2px; }

@media (max-width: 560px) {
  .zsen__boton--fuerte { margin-left: 0; }
  .zsen__pie { display: grid; grid-template-columns: 1fr 1fr; }
  .zsen__salir { grid-column: 1 / -1; order: 3; }
}
@media (prefers-reduced-motion: reduce) {
  .zsen__marco, .zsen__cartel, .zsen__flecha { transition: none; }
}