/* Marco común de las demos, con la identidad de Ganda Software. Cada demo trae además los estilos
   de su sistema original (accesos.css, comercial.css). */
@font-face {
  font-family: "Geist";
  src: url("/assets/fonts/geist-latin.woff2") format("woff2");
  font-weight: 400 800;
  font-display: swap;
}

.demo-bar {
  position: sticky; top: 0; z-index: 100;
  display: flex; align-items: center; gap: 16px 24px; flex-wrap: wrap;
  min-height: 52px; padding: 6px clamp(20px, 3vw, 32px);
  background: #171717; color: #EBE6D8;
  font: 500 0.875rem/1.3 "Geist", system-ui, sans-serif;
}
.demo-bar a, .demo-bar button { color: inherit; }
.demo-bar__brand { display: inline-flex; align-items: center; gap: 8px; font-weight: 800; text-decoration: none; letter-spacing: -0.02em; }
.demo-bar__brand img { width: 28px; height: 28px; }
.demo-bar__state { flex: 1; margin: 0; min-width: 0; }
.demo-bar__dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #D9784D; margin-right: 8px; vertical-align: 1px; }
.demo-bar__sub { color: #BDB7A8; }
.demo-bar__links { display: flex; align-items: center; gap: 8px 18px; flex-wrap: wrap; }
.demo-bar__links a { text-underline-offset: 4px; padding: 8px 0; }
.demo-bar__tour { background: none; border: 0; font: inherit; text-decoration: underline; text-underline-offset: 4px; cursor: pointer; padding: 8px 0; }
.demo-bar__cta { background: #D9784D; color: #171717 !important; text-decoration: none; font-weight: 700; padding: 8px 16px !important; border-radius: 999px; }
.demo-bar :focus-visible, .demo-intro :focus-visible { outline: 3px solid #D9784D; outline-offset: 2px; }
@media (max-width: 760px) {
  .demo-bar__sub { display: none; }
  .demo-bar__state { flex: 1 1 auto; }
  .demo-bar__links { width: 100%; justify-content: space-between; }
}

.demo-intro {
  width: min(560px, calc(100vw - 32px)); max-height: calc(100svh - 32px); overflow: auto;
  padding: 32px; border: 0; border-radius: 24px;
  background: #EBE6D8; color: #171717;
  font: 400 1rem/1.55 "Geist", system-ui, sans-serif;
  box-shadow: 0 24px 64px rgba(0, 0, 0, .35);
}
.demo-intro::backdrop { background: rgba(23, 23, 23, .55); }
.demo-intro h2 { margin: 0 0 12px; font-size: 1.75rem; line-height: 1.1; letter-spacing: -0.03em; color: #0E4D82; }
.demo-intro p { margin: 0 0 12px; }
.demo-intro__note { background: #DDD5C2; padding: 12px 14px; border-radius: 12px; font-size: 0.9375rem; }
.demo-intro__label { font-weight: 700; margin-top: 20px !important; }
.demo-intro ol { margin: 0 0 24px; padding-left: 1.4em; display: grid; gap: 6px; }
.demo-intro ol a { color: #0E4D82; font-weight: 600; text-underline-offset: 3px; }
.demo-intro__actions { display: flex; align-items: center; gap: 16px 24px; flex-wrap: wrap; }
.demo-intro__actions a { color: #171717; font-weight: 600; text-underline-offset: 4px; }
.demo-btn { min-height: 48px; padding: 0 24px; border: 0; border-radius: 999px; background: #0E4D82; color: #EBE6D8; font: 700 1rem "Geist", system-ui, sans-serif; cursor: pointer; }
.demo-btn:hover { background: #0A3B66; }

.demo-toast {
  position: fixed; left: 50%; bottom: 24px; z-index: 200;
  max-width: min(520px, calc(100vw - 32px));
  padding: 14px 18px; border-radius: 14px;
  background: #171717; color: #EBE6D8;
  font: 500 0.9375rem/1.4 "Geist", system-ui, sans-serif;
  box-shadow: 0 12px 32px rgba(0, 0, 0, .3);
  transform: translate(-50%, 16px); opacity: 0; pointer-events: none;
  transition: opacity .2s, transform .2s;
}
.demo-toast.is-on { opacity: 1; transform: translate(-50%, 0); }
@media (prefers-reduced-motion: reduce) { .demo-toast { transition: none; } }