:root {
  --marino: #02244B;
  --rojo: #FD2821;
  --blanco: #FFFFFF;
  --gris: #5B6B80;
  --fondo: #F6F7FA;
  --texto: var(--marino);
  --titulos: 'Outfit', system-ui, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, monospace;
  --insignia-fondo: #5B6B80;
  --insignia-texto: #FFFFFF;
}

@media (prefers-color-scheme: dark) {
  :root {
    --fondo: var(--marino); --texto: var(--blanco); --gris: #A9B4C4;
    --insignia-fondo: #A9B4C4; --insignia-texto: #02244B;
  }
  .logo-pequeno { background: var(--blanco); border-radius: 1rem; padding: .5rem; }
  .insignia.verificado { background: var(--blanco); color: var(--marino); }
  .nueva { background: #5B4A00; color: #FFF3CD; }
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--fondo); color: var(--texto); font-family: var(--titulos); }
main { max-width: 40rem; margin: 0 auto; padding: 3rem 1.25rem; }
h1 { font-weight: 800; font-size: clamp(1.8rem, 5vw, 2.8rem); line-height: 1.1; }
.acciones { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; }
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  background: var(--rojo); color: var(--blanco); border: 0;
  border-radius: .6rem; padding: .85rem 1.4rem; font: 600 1rem var(--titulos);
  text-decoration: none; cursor: pointer;
}
.boton.secundario { background: transparent; color: var(--texto); box-shadow: inset 0 0 0 2px currentColor; }
.boton:disabled { opacity: .6; cursor: wait; }

/* Iconos Lucide. Heredan el color del texto y van a la altura de la línea; dentro de
   una caja que ya reparte el hueco con `gap` (botones, la barra) no ponen margen. */
.icono { flex: none; vertical-align: -.15em; margin-right: .35rem; }
.icono-detras { margin-right: 0; margin-left: .35rem; }
.boton .icono, .barra .icono, summary .icono, .paleta-boton .icono,
.cabecera nav a .icono, .incluye .icono, .pasos .icono { margin: 0; }

.pagar { max-width: 26rem; }
.logo-pequeno { width: 7rem; display: block; }
.pagar form { display: grid; gap: .6rem; margin-top: 1.5rem; }
.comercio { color: var(--gris); margin: 0; }
.descripcion { margin: 0; font-weight: 600; }
.monto { font: 800 2.4rem var(--titulos); margin: 0 0 1rem; }
.pagar input {
  font: 1.1rem var(--mono); padding: .8rem; border-radius: .5rem;
  border: 2px solid var(--gris); background: var(--blanco); color: var(--marino);
}
.error { color: var(--rojo); font-weight: 600; }
.referencia { font-family: var(--mono); color: var(--gris); }

.no-encontrado .icono, .limite-error .icono { display: block; margin: 0 0 1rem; color: var(--rojo); }
.limite-error details { margin-top: 1.5rem; }
.limite-error pre { white-space: pre-wrap; word-break: break-word; }

/* `wrap`: a 400 px el botón de salir se salía de la pantalla y la página entera
   ganaba scroll horizontal. */
.barra { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; padding: .75rem 1.25rem; border-bottom: 2px solid var(--marino); }
.barra .al-panel { display: flex; align-items: center; gap: .6rem; color: var(--texto); }
.barra .quien { margin-left: auto; color: var(--gris); }
.registro, .llaves, .panel { max-width: 34rem; }
.campo { display: grid; gap: .3rem; margin-bottom: 1rem; }
.campo label { font-weight: 600; }
.campo input, .campo select {
  font: 1rem var(--titulos); padding: .7rem; border-radius: .5rem;
  border: 2px solid var(--gris); background: var(--blanco); color: var(--marino);
}
.campo small, .ayuda { color: var(--gris); }
.llaves dl { display: grid; gap: .4rem; }
.llaves code, code { font-family: var(--mono); overflow-wrap: anywhere; }
.comercios { list-style: none; padding: 0; display: grid; gap: .75rem; }
.comercios li { display: flex; flex-wrap: wrap; gap: .6rem; align-items: baseline; }
.insignia { font-size: .8rem; font-weight: 600; padding: .15rem .6rem; border-radius: 1rem; background: var(--insignia-fondo); color: var(--insignia-texto); }
.insignia.verificado { background: var(--marino); color: var(--blanco); }
.insignia.rechazado { background: #C8130D; color: var(--blanco); }
.admin { max-width: 56rem; }
.panel-comercio { max-width: 64rem; }
/* El azul de enlace por defecto no se lee sobre el marino del tema oscuro. */
.panel-comercio a { color: var(--rojo); }
.saldos { display: flex; flex-wrap: wrap; gap: 1.5rem; }
.saldos dt { color: var(--gris); font-size: .85rem; }
.saldos dd { margin: 0 0 .6rem; font: 800 1.5rem var(--titulos); }
.limite { color: var(--gris); }
.tabla { overflow-x: auto; }
.tabla table { border-collapse: collapse; width: 100%; font-size: .95rem; }
.tabla th, .tabla td { text-align: left; padding: .5rem .6rem; border-bottom: 1px solid var(--gris); white-space: nowrap; }
.cobro, .miembros { margin: 2rem 0; }
.link { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }
.llaves dl, .webhooks ul { font-family: var(--mono); overflow-wrap: anywhere; }
.nueva { background: #FFF3CD; color: #5B4A00; padding: .6rem; border-radius: .5rem; }
.vivo ul { list-style: none; padding: 0; display: grid; gap: .4rem; }

.consola { max-width: 60rem; }
.terminal { margin: 1.5rem 0; }
.terminal .salida { background: var(--marino); color: var(--blanco); font-family: var(--mono); font-size: .9rem;
  padding: 1rem; border-radius: .6rem; min-height: 12rem; max-height: 24rem; overflow-y: auto; white-space: pre-wrap; }
.terminal .linea.input { color: #A9B4C4; }
.terminal .linea.output { color: var(--blanco); }
.terminal .linea.error { color: #FF8A80; }
.terminal form { display: flex; align-items: center; gap: .5rem; margin-top: .5rem; font-family: var(--mono); }
.terminal input { flex: 1; font: 1rem var(--mono); padding: .6rem; border-radius: .5rem; border: 2px solid var(--gris);
  background: var(--blanco); color: var(--marino); }
.oculto { position: absolute; left: -10000px; }

.wiki { display: grid; grid-template-columns: 16rem 1fr; gap: 2rem; max-width: 72rem; }
@media (max-width: 48rem) { .wiki { grid-template-columns: 1fr; } }
.capitulos ul { list-style: none; padding: 0; display: grid; gap: .4rem; }
/* El índice se lee sobre el fondo de la página (marino en oscuro): hereda el color del
   texto en vez del azul de enlace del navegador, y el rojo marca el capítulo abierto. */
.capitulos a { color: var(--texto); text-decoration: none; opacity: .85; }
.capitulos a:hover, .capitulos a[aria-current=page] { color: var(--rojo); opacity: 1; font-weight: 600; }
.wiki-doc h1 { font-size: 1.8rem; } .wiki-doc h2 { font-size: 1.25rem; border-bottom: 1px solid var(--gris); padding-bottom: .2rem; }
/* Capturas de la app. En el markdown son `![alt](…)` con un `*pie*` en la línea
   siguiente, así que marked las deja en el mismo `<p>`: `display: block` pone el pie
   debajo de la imagen en vez de a su lado. */
.wiki-doc img {
  display: block; max-width: 100%; margin: 1.25rem 0 .4rem;
  border-radius: .6rem; border: 1px solid rgba(91, 107, 128, .35);
  box-shadow: 0 8px 30px rgba(2, 36, 75, .18);
}
.wiki-doc blockquote {
  margin: 1.25rem 0; padding: .6rem 1rem; border-left: 3px solid var(--rojo);
  background: rgba(91, 107, 128, .1); border-radius: 0 .4rem .4rem 0;
}
.wiki-doc img + em { display: block; color: var(--gris); font-size: .9rem; }
/* Los enlaces dentro de un capítulo («Sigue en Webhooks», /registro/individual…): el azul
   de enlace del navegador es ilegible sobre el marino del modo oscuro, igual que pasaba en
   el índice. Van en rojo de marca y subrayados, que es lo que los distingue del texto. */
.wiki-doc a { color: var(--rojo); text-decoration: underline; text-underline-offset: .15em; }
.wiki-doc a:hover { color: #C41C16; }
@media (prefers-color-scheme: dark) {
  /* Sobre el marino la sombra azulada no se ve: en oscuro va negra y más marcada. */
  .wiki-doc img { box-shadow: 0 8px 30px rgba(0, 0, 0, .5); }
  /* En oscuro el hover aclara en vez de oscurecer: un rojo más oscuro se hundiría en el fondo. */
  .wiki-doc a:hover { color: #FF7A74; }
}
.wiki-doc pre { background: var(--marino); color: var(--blanco); padding: .9rem; border-radius: .5rem; overflow-x: auto; font-family: var(--mono); font-size: .85rem; }
.wiki-doc table { border-collapse: collapse; } .wiki-doc th, .wiki-doc td { border: 1px solid var(--gris); padding: .4rem .6rem; }
.pestanas { display: flex; gap: .3rem; margin-bottom: .3rem; }
.pestanas [role=tab] { font: 600 .85rem var(--titulos); padding: .3rem .7rem; border-radius: .4rem .4rem 0 0; border: 2px solid var(--gris); border-bottom: 0; background: transparent; color: var(--texto); cursor: pointer; }
.pestanas [role=tab][aria-selected=true] { background: var(--marino); color: var(--blanco); border-color: var(--marino); }
.editor textarea { width: 100%; font: .9rem var(--mono); padding: .6rem; }

/* Acceso */
.acceso {
  max-width: none; width: 100%; min-height: 100vh; padding: 2.5rem 1rem;
  display: grid; align-content: center; justify-items: center; gap: 1.25rem;
  background:
    radial-gradient(52rem 30rem at 50% 4rem, rgba(2, 36, 75, .16), transparent 68%),
    linear-gradient(180deg, #EEF1F6 0%, #FFFFFF 70%);
}
/* La tarjeta es blanca en los dos temas: dentro de ella mandan los colores claros. */
.acceso .tarjeta {
  --gris: #5B6B80; --texto: var(--marino);
  width: min(24rem, 100%); background: var(--blanco); color: var(--marino);
  border-radius: 1rem; padding: 2.25rem 1.75rem;
  box-shadow: 0 24px 60px rgba(2, 36, 75, .18), 0 2px 6px rgba(2, 36, 75, .08);
  display: grid; gap: .85rem; justify-items: center; text-align: center;
}
.acceso .logo-pequeno { margin-bottom: .25rem; }
.acceso h1 { margin: 0; font-size: 1.55rem; letter-spacing: -.01em; }
.acceso .tarjeta > .ayuda { margin: 0 0 .4rem; font-size: .92rem; line-height: 1.45; }
.acceso .entrando { margin: .5rem 0; color: var(--gris); }
.acceso .tarjeta > .error {
  width: 100%; margin: 0; font-size: .92rem; text-align: left;
  background: rgba(253, 40, 33, .08); border-radius: .5rem; padding: .6rem .75rem;
}
.acceso form { width: 100%; text-align: left; }
.acceso form .boton { width: 100%; }
.boton.google {
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem; width: 100%;
  background: var(--blanco); color: #1F1F1F; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .18);
}
.boton.google:hover { background: #F5F5F5; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .28), 0 1px 4px rgba(0, 0, 0, .12); }
.o { display: flex; align-items: center; gap: .75rem; width: 100%; color: var(--gris); font-size: .85rem; }
.o::before, .o::after { content: ''; flex: 1; height: 1px; background: var(--gris); opacity: .35; }
.acceso details.dev { width: 100%; text-align: left; }
.acceso details.dev summary {
  cursor: pointer; font: 600 .85rem var(--titulos); color: var(--gris);
  list-style: none; display: flex; align-items: center; justify-content: center; gap: .4rem;
}
.acceso details.dev summary::-webkit-details-marker { display: none; }
.acceso details.dev summary::before { content: '\25B8'; font-size: .7rem; }
.acceso details.dev[open] summary::before { content: '\25BE'; }
.acceso details.dev form { margin-top: .9rem; }
.acceso .volver { margin: 0; }
.acceso .volver a { color: var(--gris); text-decoration: none; font-size: .9rem; }
.acceso .volver a:hover { color: var(--rojo); }
@media (prefers-color-scheme: dark) {
  .acceso {
    background:
      radial-gradient(52rem 30rem at 50% 4rem, rgba(253, 40, 33, .18), transparent 68%),
      linear-gradient(180deg, #02244B 0%, #01152C 100%);
  }
  .acceso .tarjeta { box-shadow: 0 24px 60px rgba(0, 0, 0, .55); }
  .acceso .logo-pequeno { background: none; padding: 0; }
}

/* Paleta de comandos (Cmd/Ctrl+G), disponible en toda la app, con el tema amarillo
   neo-brutalista por defecto de GREB (mismo `:bg`/`:border`/`:shadow` que
   `omnirepl.cljs` le pasa a la librería): la paleta y su botón deben verse como la
   misma pieza en claro y en oscuro, así que no dependen de `--texto`/`--marino`. */
.paleta-boton {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .3rem .55rem; border: 2px solid black; border-radius: .4rem;
  background: #F5DF4D; color: #1c1c1c; cursor: pointer;
  box-shadow: -3px 4px 0 black; transform: translate(0, 0);
  font: 600 .8rem var(--titulos);
  transition: transform .1s ease, box-shadow .1s ease;
}
.paleta-boton img { width: 1.25rem; height: 1.25rem; }
.paleta-boton kbd {
  font: 600 .75rem var(--mono); color: inherit; opacity: .85;
  padding: .12rem .3rem; border-radius: .3rem; box-shadow: inset 0 0 0 1px currentColor;
}
.paleta-boton:hover, .paleta-boton:focus-visible {
  transform: translate(1px, -1px); box-shadow: -4px 5px 0 black;
}
.paleta-boton:active {
  transform: translate(-1px, 1px); box-shadow: none;
}
/* omnibar cierra la barra al ejecutar y solo pinta su historial en el layout
   :terminal, así que la respuesta de un comando se queda aquí, con el mismo amarillo,
   borde y sombra que la barra (radio 13.65px: el que usa `palette-shell` en la
   librería) para que se lea como una sola pieza. */
.paleta-salida {
  position: fixed; top: 9.4rem; left: 50%; transform: translateX(-50%);
  width: min(700px, calc(100vw - 20px)); z-index: 10000040;
  margin: 0; padding: .6rem .9rem; list-style: none;
  background: #F5DF4D; color: #1c1c1c; border: 2px solid black;
  border-radius: 13.65px; box-shadow: -6.82px 9.10px 0 black;
  font: .85rem/1.5 var(--mono); overflow-wrap: anywhere;
  max-height: 40vh; overflow-y: auto;
}
.paleta-salida .input { color: #4a4a4a; }
.paleta-salida .error { color: #B3140F; }
.paleta-salida .output { color: #1c1c1c; }

/* Inicio: portada del producto. Ancho completo, cada sección centra su contenido
   en 72rem con `padding-inline` calculado (sin envoltorios extra). */
.inicio {
  --tarjeta: var(--blanco);
  --codigo: var(--marino);
  --linea: rgba(2, 36, 75, .12);
  --cabecera-fondo: rgba(246, 247, 250, .88);
  --ancho: max(1.25rem, calc((100% - 72rem) / 2));
}
@media (prefers-color-scheme: dark) {
  .inicio {
    --tarjeta: rgba(255, 255, 255, .06);
    --codigo: #00152E;
    --linea: rgba(255, 255, 255, .16);
    --cabecera-fondo: rgba(2, 36, 75, .88);
  }
}
.inicio main { max-width: none; margin: 0; padding: 0; }
.inicio section { padding: 4rem var(--ancho); }
.inicio h2 { font-size: clamp(1.7rem, 4vw, 2rem); letter-spacing: -.01em; margin: 0; }
.inicio p { line-height: 1.6; }

/* Cabecera */
.cabecera {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20;
  display: flex; align-items: center; gap: 1rem;
  padding: .7rem var(--ancho);
  background: var(--cabecera-fondo); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--linea);
}
.cabecera .marca { display: flex; align-items: center; gap: .55rem; text-decoration: none; color: var(--texto); }
/* Recorte del símbolo: la imagen entra ampliada y desplazada, y la caja la corta. */
.marca-icono { width: 2.6rem; height: 2rem; overflow: hidden; border-radius: .4rem; flex: none; }
.marca-icono img { width: 5.02rem; height: 5.02rem; display: block; margin: -1.13rem 0 0 -1.19rem; }
.marca-nombre { font: 800 1.2rem var(--titulos); letter-spacing: -.02em; }
.cabecera nav { margin-left: auto; display: flex; align-items: center; gap: 1.4rem; }
.cabecera nav a:not(.boton) {
  display: inline-flex; align-items: center; gap: .4rem;
  color: var(--texto); text-decoration: none; font: 600 .95rem var(--titulos);
}
.cabecera nav a:not(.boton):hover { color: var(--rojo); }
.cabecera .boton { padding: .5rem 1.1rem; font-size: .9rem; }
/* El logo es transparente: en oscuro va sobre una placa blanca. El `box-shadow`
   hace de margen, porque un `padding` ensancharía el recorte y asomaría el nombre. */
@media (prefers-color-scheme: dark) {
  .marca-icono { background: var(--blanco); box-shadow: 0 0 0 .3rem var(--blanco); }
}
@media (max-width: 48rem) {
  .cabecera nav { gap: .7rem; }
  .cabecera nav a:not(.boton) { display: none; }
}

/* Hero */
#hero {
  display: grid; grid-template-columns: 1.1fr .9fr; gap: 3rem; align-items: center;
  padding-block: 5rem 4.5rem;
  background: radial-gradient(58rem 30rem at 10% -8rem, rgba(2, 36, 75, .12), transparent 70%);
}
#hero h1 { margin: 0; font-size: clamp(2.4rem, 6vw, 4rem); line-height: 1.04; letter-spacing: -.025em; }
#hero .lema { margin: 1.25rem 0 0; max-width: 34rem; font-size: 1.12rem; color: var(--gris); }
#hero .acciones { margin-top: 2.25rem; }
@media (prefers-color-scheme: dark) {
  #hero { background: radial-gradient(58rem 30rem at 10% -8rem, rgba(253, 40, 33, .18), transparent 70%); }
}
@media (max-width: 56rem) { #hero { grid-template-columns: 1fr; gap: 2.5rem; padding-block: 3rem; } }

/* Terminal de muestra (dibujo estático de OmniREPL) */
.demo-terminal {
  background: var(--codigo); color: var(--blanco); border-radius: 1rem;
  padding: 1rem 1.2rem 1.4rem; font: .9rem/1.95 var(--mono);
  box-shadow: 0 24px 60px rgba(2, 36, 75, .28);
}
@media (prefers-color-scheme: dark) {
  .demo-terminal { box-shadow: 0 24px 60px rgba(0, 0, 0, .5); outline: 1px solid var(--linea); }
}
.demo-terminal .puntos {
  display: flex; align-items: center; gap: .45rem; margin-bottom: 1rem;
  color: #A9B4C4; font: 600 .72rem var(--mono); letter-spacing: .06em;
}
.demo-terminal .puntos .icono { margin-left: .5rem; }
.demo-terminal .puntos i { width: .62rem; height: .62rem; border-radius: 50%; background: rgba(255, 255, 255, .22); }
.demo-terminal .puntos i:first-child { background: var(--rojo); }
.demo-linea { overflow-wrap: anywhere; }
.demo-linea.salida { color: #A9B4C4; }
.demo-linea .prompt { color: var(--rojo); font-weight: 700; }
.demo small { display: block; margin-top: .9rem; color: var(--gris); font-size: .85rem; }

/* Integrar en 5 minutos */
.pasos {
  list-style: none; counter-reset: paso; padding: 0;
  margin: 2.25rem 0 2.5rem; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.75rem;
}
.pasos li {
  counter-increment: paso; position: relative; padding-top: 3rem;
  line-height: 1.55; border-top: 2px solid var(--linea);
}
.pasos li::before {
  content: counter(paso); position: absolute; top: 1rem; left: 0;
  width: 1.9rem; height: 1.9rem; border-radius: 50%;
  background: var(--rojo); color: var(--blanco);
  display: grid; place-items: center; font: 700 .9rem var(--titulos);
}
.pasos .icono { position: absolute; top: 1.35rem; left: 2.35rem; color: var(--rojo); }
.pasos code { font-size: .92em; }
.ejemplos-inicio .pestanas { margin: 0; gap: .25rem; }
.inicio .pestanas [role=tab][aria-selected=true] { background: var(--codigo); border-color: var(--codigo); color: var(--blanco); }
.ejemplos-inicio pre {
  margin: 0; background: var(--codigo); color: var(--blanco);
  padding: 1.35rem 1.4rem; border-radius: 0 .8rem .8rem .8rem;
  overflow-x: auto; font: .88rem/1.75 var(--mono);
}
.inicio .mas { margin: 1.25rem 0 0; }
.inicio .mas a { color: var(--rojo); font-weight: 600; text-decoration: none; }
.inicio .mas a:hover { text-decoration: underline; }
@media (max-width: 52rem) { .pasos { grid-template-columns: 1fr; gap: 1.25rem; } .pasos li { padding-top: 2.8rem; } }

/* Precio */
.precio {
  background: var(--tarjeta); border: 1px solid var(--linea); border-radius: 1.25rem;
  padding: 2.5rem; display: grid; grid-template-columns: minmax(10rem, auto) 1fr; gap: 2rem 3rem; align-items: start;
}
.precio .cifra { margin: 0; font: 800 clamp(3rem, 8vw, 4rem)/1 var(--titulos); color: var(--rojo); letter-spacing: -.03em; }
.precio .cifra-pie { margin: .5rem 0 0; color: var(--gris); font-size: .9rem; }
.incluye {
  list-style: none; padding: 0; margin: 1.5rem 0 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem 1.75rem;
}
.incluye li { display: flex; align-items: flex-start; gap: .5rem; line-height: 1.5; }
.incluye .icono { color: var(--rojo); margin-top: .22em; }
.precio .nota { margin: 1.75rem 0 0; color: var(--gris); font-size: .95rem; max-width: 46rem; }
@media (max-width: 52rem) {
  .precio { grid-template-columns: 1fr; padding: 1.75rem 1.4rem; gap: 1rem; }
  .incluye { grid-template-columns: 1fr; }
}

/* Para cada quien. Las reglas van bajo `.inicio` porque /acceso también tiene
   una `.tarjeta`, con su propio diseño. */
.inicio .tarjetas {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1.25rem; margin-top: 2.5rem;
}
.inicio .tarjeta {
  background: var(--tarjeta); border: 1px solid var(--linea); border-radius: 1rem;
  padding: 1.75rem 1.5rem; display: flex; flex-direction: column; gap: .7rem;
}
.inicio .tarjeta h3 { margin: 0; font-size: 1.2rem; }
.inicio .tarjeta p { margin: 0; color: var(--gris); }
.inicio .tarjeta .boton { margin-top: auto; align-self: flex-start; padding: .6rem 1.05rem; font-size: .9rem; }

/* Pie */
.pie {
  border-top: 1px solid var(--linea); padding: 2.5rem var(--ancho) 3rem;
  display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.75rem;
  color: var(--gris); font-size: .92rem;
}
.pie p { margin: 0; }
.pie nav { display: flex; flex-wrap: wrap; gap: 1.25rem; }
.pie a { color: var(--gris); text-decoration: none; }
.pie a:hover { color: var(--rojo); }
.pie .estado {
  margin-left: auto; font: .78rem var(--mono);
  background: var(--tarjeta); border: 1px solid var(--linea);
  border-radius: 1rem; padding: .25rem .8rem;
}

/* ── Dashboard de pagos (panel del comercio y /demo) ─────────────────────────────
   Las mismas piezas en los dos sitios. `--tarjeta` y `--linea` se declaran aquí
   porque el panel no vive dentro de `.inicio`, que es donde nacieron. */
.dashboard {
  --tarjeta: var(--blanco);
  --linea: rgba(2, 36, 75, .14);
  display: grid; gap: 1.5rem; margin: 1.5rem 0;
}
@media (prefers-color-scheme: dark) {
  .dashboard { --tarjeta: rgba(255, 255, 255, .06); --linea: rgba(255, 255, 255, .18); }
}
.dashboard h2 { font-size: 1.15rem; margin: 0 0 .75rem; }
.dashboard h3 { font-size: 1rem; }
/* `min-width: 0` en los hijos del grid: sin él la tabla ancha estira la columna y la
   página entera gana scroll horizontal en móvil, aunque `.tabla` desborde sola. */
.dashboard > * { min-width: 0; }
.dashboard > section { margin: 0; }

/* Barra superior: periodo, CSV y el punto de «En vivo». */
.dashboard-barra { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; }
.periodo { display: inline-flex; border: 2px solid var(--linea); border-radius: .6rem; overflow: hidden; }
.periodo button {
  font: 600 .85rem var(--titulos); padding: .4rem .8rem; border: 0; cursor: pointer;
  background: transparent; color: var(--texto);
}
.periodo button + button { border-left: 2px solid var(--linea); }
.periodo button[aria-pressed=true] { background: var(--marino); color: var(--blanco); }
@media (prefers-color-scheme: dark) {
  .periodo button[aria-pressed=true] { background: var(--blanco); color: var(--marino); }
}
.dashboard-barra .boton { padding: .45rem .9rem; font-size: .85rem; }
.en-vivo { margin-left: auto; display: inline-flex; align-items: center; gap: .4rem; color: var(--gris); font-size: .85rem; }
.en-vivo .punto { width: .55rem; height: .55rem; border-radius: 50%; background: #16A34A; animation: latido 2s ease-in-out infinite; }
@keyframes latido { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .en-vivo .punto { animation: none; } }

/* Tarjetas KPI */
/* 12.5rem y no 11: con 11 las columnas salían tan estrechas en /demo que «RD$53,547.94»
   se partía en dos líneas. */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(12.5rem, 1fr)); gap: .75rem; }
.kpis article {
  background: var(--tarjeta); border: 1px solid var(--linea); border-radius: .8rem;
  padding: .9rem 1rem; display: grid; gap: .15rem; align-content: start;
}
.kpis .etiqueta { margin: 0; font: 600 .82rem var(--titulos); color: var(--gris); display: flex; align-items: center; gap: .35rem; }
.kpis .cifra { margin: 0; font: 800 1.35rem/1.2 var(--titulos); overflow-wrap: anywhere; }
.kpis small { color: var(--gris); font-size: .78rem; }
.dashboard .limite { margin: 0; font-size: .9rem; }

/* Gráfico: el SVG trae su viewBox y se estira al ancho de la caja. */
/* Solo el gráfico: `.grafico svg` a secas también estiraba el icono del encabezado. */
.grafico svg.barras { display: block; width: 100%; height: auto; }
.grafico h3 { margin: 1rem 0 .25rem; font-size: .9rem; color: var(--gris); }

/* Pills de estado */
.estados { display: flex; flex-wrap: wrap; gap: .5rem; }
.estados button {
  font: 600 .85rem var(--titulos); padding: .35rem .8rem; cursor: pointer;
  background: var(--tarjeta); color: var(--texto);
  border: 1px solid var(--linea); border-radius: 1rem;
}
.estados button:hover { border-color: var(--rojo); }
.estados button[aria-pressed=true] { background: var(--rojo); border-color: var(--rojo); color: var(--blanco); }
.estados .n { font-variant-numeric: tabular-nums; opacity: .8; }
.estados button[aria-pressed=true] .n { opacity: 1; }

/* Top de referencias: una barra proporcional por fila */
.top-referencias ol { list-style: none; padding: 0; margin: 0; display: grid; gap: .5rem; }
.top-referencias li {
  display: grid; grid-template-columns: minmax(0, 10rem) minmax(0, 1fr) auto auto;
  gap: .4rem .75rem; align-items: center; font-size: .9rem;
}
.top-referencias .ref { overflow-wrap: anywhere; font-family: var(--mono); font-size: .85rem; }
.top-referencias .proporcion { background: var(--linea); border-radius: 1rem; height: .5rem; }
.top-referencias .proporcion i { display: block; height: 100%; border-radius: 1rem; background: var(--rojo); }
.top-referencias .cantidad { font-weight: 700; font-variant-numeric: tabular-nums; }
.top-referencias small { color: var(--gris); }
@media (max-width: 40rem) {
  .top-referencias li { grid-template-columns: minmax(0, 1fr) auto; }
  .top-referencias .proporcion { grid-column: 1 / -1; }
}

/* Tabla de pagos */
.buscador { display: flex; align-items: center; gap: .4rem; margin-bottom: .75rem; color: var(--gris); }
.buscador input {
  flex: 1; min-width: 0; font: 1rem var(--titulos); padding: .5rem .7rem;
  border: 2px solid var(--linea); border-radius: .5rem; background: var(--tarjeta); color: var(--texto);
}
.pagos tbody tr { cursor: pointer; }
.pagos tbody tr:hover, .pagos tbody tr:focus-visible { background: var(--linea); }
.pagos tbody tr.elegida { background: var(--linea); box-shadow: inset .25rem 0 0 var(--rojo); }
.insignia.completado { background: #0B6B34; color: var(--blanco); }
.insignia.procesando { background: #7A5B00; color: var(--blanco); }
.insignia.fallido { background: #C8130D; color: var(--blanco); }
.pagos .boton { margin-top: .9rem; }

/* Panel de detalle, bajo la tabla */
.detalle {
  background: var(--tarjeta); border: 1px solid var(--linea); border-left: .3rem solid var(--rojo);
  border-radius: .8rem; padding: 1rem 1.2rem;
}
.detalle-cabecera { display: flex; align-items: center; gap: 1rem; }
.detalle-cabecera h2 { margin: 0; }
.detalle .cerrar {
  margin-left: auto; background: transparent; border: 0; cursor: pointer; color: var(--gris);
  display: inline-flex; padding: .25rem; border-radius: .4rem;
}
.detalle .cerrar:hover { color: var(--rojo); }
.detalle .mono { margin: .2rem 0 .9rem; font-family: var(--mono); font-size: .85rem; }
.detalle dl { display: grid; grid-template-columns: minmax(0, 9rem) minmax(0, 1fr); gap: .3rem .9rem; margin: 0 0 1rem; }
.detalle dt { color: var(--gris); font-size: .85rem; }
.detalle dd { margin: 0; overflow-wrap: anywhere; }
.detalle h3 { margin: 0 0 .5rem; }
.asientos, .asientos ul { list-style: none; padding: 0; margin: 0; }
.asientos > li { border-top: 1px solid var(--linea); padding: .5rem 0; }
.asientos .hecho { margin: 0 0 .3rem; display: flex; flex-wrap: wrap; gap: .5rem; align-items: baseline; }
.asientos .hecho small { color: var(--gris); }
.asientos ul li { display: flex; flex-wrap: wrap; gap: .5rem; font-size: .88rem; }
.asientos .cuenta { font-family: var(--mono); font-size: .82rem; color: var(--gris); }
.asientos .cantidad { margin-left: auto; font-variant-numeric: tabular-nums; }
.reembolso { margin-top: 1rem; border-top: 1px solid var(--linea); padding-top: 1rem; }
.reembolso .campo { max-width: 18rem; }
.reembolso .campo input {
  font: 1rem var(--titulos); padding: .5rem .7rem; border: 2px solid var(--linea);
  border-radius: .5rem; background: var(--tarjeta); color: var(--texto);
}
.acciones-detalle { display: flex; flex-wrap: wrap; gap: .6rem; }

/* «Nuevo cobro» plegable */
.cobro-plegable { margin: 2rem 0; }
.cobro-plegable > summary {
  cursor: pointer; font: 800 1.15rem var(--titulos); display: flex; align-items: center; gap: .4rem;
  list-style: none;
}
.cobro-plegable > summary::-webkit-details-marker { display: none; }
.cobro-plegable > summary::after { content: '\25BE'; font-size: .7rem; color: var(--gris); }
.cobro-plegable:not([open]) > summary::after { content: '\25B8'; }
.cobro-plegable .cobro { margin: 1rem 0 0; }

/* ── /demo ──────────────────────────────────────────────────────────────────── */
.demo-publica main { max-width: none; margin: 0; padding: 2.5rem var(--ancho) 3.5rem; }
/* /demo comparte la cabecera y el pie del inicio, pero no su ritmo de secciones:
   `.inicio section { padding: 4rem … }` sangraba e hinchaba todo el dashboard. */
.demo-publica section { padding: 0; }
.demo-publica h1 { margin: 0; font-size: clamp(1.9rem, 4.5vw, 2.6rem); letter-spacing: -.02em; }
.demo-publica .lema { margin: .9rem 0 2rem; max-width: 46rem; color: var(--gris); font-size: 1.05rem; }
.llaves-demo { margin: 0 0 2.5rem; }
.llaves-demo dl { display: grid; gap: 1rem; margin: 0 0 1.5rem; }
.llave dt { font: 600 .85rem var(--titulos); color: var(--gris); }
.llave dd { margin: .25rem 0 0; display: flex; flex-wrap: wrap; gap: .5rem .75rem; align-items: center; }
/* Solo las llaves van en caja: `code` a secas también pintaba el ejemplo del `pre`. */
.llave code {
  font-family: var(--mono); font-size: .85rem; background: var(--tarjeta);
  border: 1px solid var(--linea); border-radius: .5rem; padding: .4rem .6rem; overflow-wrap: anywhere;
}
.llave dd .boton { padding: .35rem .8rem; font-size: .82rem; }
.llave dd small { flex-basis: 100%; color: var(--gris); }
.demo-publica .mas { color: var(--gris); font-size: .95rem; }

/* Procesadores de pago del comercio (panel) */
.procesadores .procesador { border: 1px solid var(--linea); border-radius: .5rem; padding: 1rem 1.2rem; margin: 1rem 0; max-width: 36rem; }
.procesadores .procesador h3 { margin: 0 0 .3rem; display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.procesadores .ok { color: #0B6B34; font-weight: 600; }

/* Tu marca en la página de pago: el formulario y, al lado, el ticket como lo verá el cliente. */
.marca .ok { color: #0B6B34; font-weight: 600; }
.marca-rejilla { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 22rem); gap: 2rem; align-items: start; margin-top: 1rem; }
@media (max-width: 52rem) { .marca-rejilla { grid-template-columns: minmax(0, 1fr); } }
.marca-form fieldset { border: 0; padding: 0; margin: 0 0 1rem; }
.marca-form legend { font-weight: 600; margin-bottom: .3rem; }
.marca-form .opcion { display: flex; gap: .6rem; align-items: flex-start; padding: .5rem .7rem; border: 1px solid var(--linea); border-radius: .5rem; cursor: pointer; font-weight: 400; }
.marca-form .opcion:has(input:checked) { border-color: var(--rojo); }
.marca-form .opcion input { margin-top: .25rem; }
.marca-form .opcion span { display: grid; }
.color-marca { display: flex; gap: .5rem; align-items: center; }
.color-marca input[type=color] { width: 3rem; height: 2.4rem; padding: .1rem; border-radius: .4rem; flex: none; }
.color-marca input:not([type=color]) { flex: 1; min-width: 0; }
.vista-marca {
  --oro: #FFC83D; --oro-borde: #D99A00; --tinta: #02244B;
  display: flex; flex-direction: column; align-items: center; gap: 1rem; padding: 1.5rem 1rem;
  border-radius: 1rem; background: #E3ECFF; position: sticky; top: 1rem;
}
.vista-marca .logo-pequeno { width: 5rem; }
.vista-marca .logo-marca { width: auto; max-width: 12rem; max-height: 7rem; object-fit: contain; }
.vista-marca .ticket-pie { margin: 0; }
.vista-marca .pagar-boton { cursor: default; }
.vista-marca .contador { font-size: 2.2rem; }

/* ---------------------------------------------------------------------------
   Ticket de pago (/pagar). Un ticket de caja que se imprime al llegar; el monto
   rueda como un contador de monedas; al pagar, sello y lluvia de monedas.
   --------------------------------------------------------------------------- */
.pagar {
  --oro: #FFC83D; --oro-borde: #D99A00; --cielo: #E3ECFF; --tinta: #02244B;
  max-width: 28rem; min-height: 100vh; padding: 2rem 1rem 3rem;
  display: flex; flex-direction: column; align-items: center; gap: 1.5rem;
}
body:has(.pagar) {
  background:
    radial-gradient(circle at 15% 10%, #FFFFFF 0, transparent 45%),
    radial-gradient(circle at 90% 85%, #FFE7A8 0, transparent 40%),
    var(--cielo, #E3ECFF);
}
.pagar .logo-pequeno { width: 6rem; }
.pagar .logo-marca { width: auto; max-width: 14rem; max-height: 10rem; object-fit: contain; }

.ticket {
  --gris: #5B6B80; position: relative; width: 100%; color: var(--tinta);
  filter: drop-shadow(0 18px 30px rgba(2, 36, 75, .22));
  animation: imprimir .7s cubic-bezier(.2, .9, .3, 1.15) both;
}
.ticket.esperando { padding: 2rem; text-align: center; background: var(--blanco); border-radius: 1.4rem; color: var(--gris); }

/* Arriba, lo que pagas: marino, con el contador. */
.ticket-cabeza {
  background: var(--tinta); color: var(--blanco);
  border-radius: 1.4rem 1.4rem 0 0; padding: 1.6rem 1.6rem 1.4rem;
}
.ticket-cabeza .comercio { color: #A9C1E8; margin: 0; font-weight: 600; }
.ticket-cabeza .concepto { margin: .2rem 0 1.1rem; font-size: 1.15rem; font-weight: 600; overflow-wrap: anywhere; }
.ticket-cabeza .mensaje-marca { margin: -.6rem 0 1.1rem; color: #A9C1E8; font-size: .95rem; overflow-wrap: anywhere; }
.letra-pequena.contacto { display: block; }
.letra-pequena.contacto a { color: inherit; font-weight: 600; }
.cuenta { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: .75rem; }
.cuenta .pila { flex: none; }

.contador { display: flex; margin: 0; min-width: 0; font: 800 clamp(1.8rem, 9vw, 3rem)/1 var(--titulos); }
.contador .rodillo { display: inline-block; width: .6em; height: 1em; overflow: hidden; text-align: center; }
.contador .tira { display: flex; flex-direction: column; transition: transform 1.1s cubic-bezier(.25, 1.4, .4, 1); }
.contador .tira span, .contador .fijo { height: 1em; line-height: 1; }
.contador .fijo { display: inline-block; }

/* Monedas: oro con canto y una N grabada. */
.moneda {
  display: block; width: 2.4rem; height: .9rem; border-radius: 50%;
  background: radial-gradient(ellipse at 50% 35%, #FFE38A 0 35%, var(--oro) 36% 100%);
  box-shadow: 0 .22rem 0 var(--oro-borde), inset 0 0 0 2px #FFF2C2;
}
.pila { display: flex; flex-direction: column-reverse; align-items: center; gap: .05rem; padding-bottom: .3rem; }
.pila .moneda { animation: caer .45s cubic-bezier(.3, 1.6, .5, 1) both; }
.pila .moneda:nth-child(1) { animation-delay: 1.6s; }
.pila .moneda:nth-child(2) { animation-delay: 1.75s; margin-left: .3rem; }
.pila .moneda:nth-child(3) { animation-delay: 1.9s; margin-left: -.2rem; }
.pila.apilando .moneda { animation: apilar .9s ease-in infinite; }
.pila.apilando .moneda:nth-child(2) { animation-delay: .15s; }
.pila.apilando .moneda:nth-child(3) { animation-delay: .3s; }
.pila.llena .moneda { animation: tintinear .5s ease-in-out 3 both; }

/* La perforación separa lo que pagas de cómo lo pagas. */
.perforado {
  height: 1.4rem; background:
    radial-gradient(circle at 0 50%, transparent .7rem, var(--blanco) .72rem) left / 51% 100% no-repeat,
    radial-gradient(circle at 100% 50%, transparent .7rem, var(--blanco) .72rem) right / 51% 100% no-repeat;
  position: relative;
}
.perforado::after {
  content: ''; position: absolute; left: 1.1rem; right: 1.1rem; top: 50%;
  border-top: 2px dashed #C9D4E6;
}

/* Abajo, cómo lo pagas. */
.pagar .ticket-pie { margin: 0; }
.ticket-pie {
  background: var(--blanco); border-radius: 0 0 1.4rem 1.4rem;
  padding: .6rem 1.6rem 1.6rem; display: grid; gap: .9rem;
}
.ticket-pie label { font-weight: 600; }
.ticket-pie input {
  font: 600 1.15rem var(--titulos); letter-spacing: .06em; padding: .85rem 1rem; border-radius: .8rem;
  border: 2px solid #C9D4E6; background: #F6F8FC; color: var(--tinta);
}
.ticket-pie input:focus { outline: none; border-color: var(--tinta); background: var(--blanco); }

.pagar-boton {
  display: flex; align-items: center; justify-content: center; gap: .5rem; width: 100%;
  border: 0; border-radius: 1rem; padding: 1.05rem 1.2rem; cursor: pointer; text-decoration: none;
  font: 800 1.15rem var(--titulos); color: var(--blanco); background: var(--rojo);
  box-shadow: 0 .35rem 0 var(--sombra-boton, #B8150F); transform: translateY(0);
  transition: transform .12s ease, box-shadow .12s ease;
}
.pagar-boton span { display: inline-flex; align-items: center; gap: .5rem; }
.pagar-boton .icono { margin: 0; }
.pagar-boton:hover { transform: translateY(-2px); box-shadow: 0 .5rem 0 var(--sombra-boton, #B8150F); }
.pagar-boton:active { transform: translateY(.3rem); box-shadow: 0 .05rem 0 var(--sombra-boton, #B8150F); }
.pagar-boton:focus-visible { outline: 3px solid var(--oro); outline-offset: 3px; }
.pagar-boton:disabled { cursor: wait; opacity: 1; background: #FF6A5E; }

.aviso { display: flex; gap: .5rem; align-items: flex-start; margin: 0; padding: .8rem 1rem; border-radius: .8rem;
  background: #FFECEA; color: #A3140E; font-weight: 600; }
.aviso .icono { margin: .15rem 0 0; flex: none; }
.letra-pequena { display: flex; gap: .4rem; align-items: flex-start; margin: 0; font-size: .88rem; color: var(--gris); }
.letra-pequena .icono { margin: .1rem 0 0; flex: none; color: #0B6B34; }
.volver { justify-self: center; color: var(--gris); font-weight: 600; }

/* Pagado: sello, lluvia y cuenta atrás de vuelta al comercio. */
.ticket.pagado .ticket-cabeza { background: #0B4F2E; }
.sello {
  position: absolute; z-index: 2; right: 1rem; top: 1rem; pointer-events: none;
  font: 800 1.5rem/1 var(--titulos); letter-spacing: .04em; text-transform: uppercase;
  color: #4DF09A; border: .2rem solid currentColor; border-radius: .5rem; padding: .25rem .6rem;
  transform: rotate(-12deg);
  animation: sellar .5s cubic-bezier(.3, 1.8, .5, 1) .25s both;
}
.ticket-pie.hecho { text-align: center; padding-top: 1rem; }
.listo { margin: 0; font-size: 1.35rem; font-weight: 800; }
.ticket-pie.hecho .letra-pequena { justify-content: center; }
.cuenta-atras { height: .4rem; border-radius: 1rem; background: #E6ECF5; overflow: hidden; }
.cuenta-atras span { display: block; height: 100%; background: var(--oro); transform-origin: left;
  animation: vaciar var(--ms, 3s) linear both; }

.lluvia { position: absolute; inset: -2rem 0 auto; height: 0; z-index: 3; pointer-events: none; }
.lluvia .moneda { position: absolute; top: 0; width: 1.6rem; height: 1.6rem;
  background: radial-gradient(circle at 35% 30%, #FFF2C2 0 18%, var(--oro) 20% 70%, var(--oro-borde) 72%);
  box-shadow: none; animation: llover 1.6s cubic-bezier(.3, 0, .7, 1) both; }

.ticket.sacude { animation: sacudir .45s ease-in-out both; }

@keyframes imprimir { from { transform: translateY(-2rem) scaleY(.85); transform-origin: top; opacity: 0; }
                      60% { transform: translateY(.3rem) scaleY(1.02); opacity: 1; }
                      to { transform: none; opacity: 1; } }
@keyframes caer { from { transform: translateY(-3.5rem) rotate(-20deg); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes apilar { 0% { transform: translateY(-2.5rem); opacity: 0; } 35%, 70% { transform: none; opacity: 1; } 100% { transform: translateY(.4rem); opacity: 0; } }
@keyframes tintinear { 50% { transform: translateY(-.35rem) rotate(6deg); } }
@keyframes sellar { from { transform: rotate(-12deg) scale(2.6); opacity: 0; } to { transform: rotate(-12deg) scale(1); opacity: 1; } }
@keyframes vaciar { from { transform: scaleX(1); } to { transform: scaleX(0); } }
@keyframes llover { from { transform: translateY(0) rotate(0); opacity: 1; }
                    to { transform: translateY(32rem) rotate(var(--giro, 360deg)); opacity: 0; } }
@keyframes sacudir { 20%, 60% { transform: translateX(-.6rem) rotate(-1deg); } 40%, 80% { transform: translateX(.6rem) rotate(1deg); } }

@media (prefers-color-scheme: dark) {
  body:has(.pagar) { background: radial-gradient(circle at 85% 90%, #3A2E00 0, transparent 40%), #011733; }
  .pagar .logo-pequeno { background: var(--blanco); }
  .ticket-pie, .perforado { --blanco: #FFFFFF; }
}
@media (prefers-reduced-motion: reduce) {
  .ticket, .pila .moneda, .sello, .ticket.sacude, .cuenta-atras span { animation: none !important; }
  .contador .tira { transition: none; }
  .lluvia { display: none; }
}