/* dn-pay.css — la barra de pago. Se carga junto a `dn-pay.js`.
 *
 * POR QUÉ UN ARCHIVO PROPIO Y NO `site.css`
 * `site.css` es la hoja de TODO el sitio y la barra sólo existe en las páginas
 * que venden algo. Meter acá `.paybar` sería 2 KB en cada visita a la portada,
 * al manifiesto y a las métricas para pintar un elemento que no está. Se reusan
 * los tokens y las clases que ya existen (`.wrap`, `.btn`, `.chip`, `.fine`);
 * lo único nuevo es la barra.
 *
 * 🔴 EL PRESUPUESTO DE ALTO EN MÓVIL ES DURO: ≤3,5 rem (56 px) con el listbox
 * cerrado. La maqueta reservaba `body{padding-bottom:11rem}` — el doble de lo
 * aceptado— porque apilaba wallet + selector + cola + nota + botón en columna.
 * Acá, a 375 px, la barra es UNA fila: selector y botón. El chip de wallet ya
 * está en el header, la cola la dice cada tarjeta y la aclaración de riel vive
 * también en el encabezado del listbox, que es donde se elige la red y donde
 * el malentendido pasa. Nada de eso se pierde: se muestra donde ya está.
 */

.paybar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 20;
  background: var(--surface-raised);
  border-top: var(--border-width-emphasis) solid var(--border-strong);
  box-shadow: var(--shadow-overlay);
}
.paybar[hidden] { display: none; }

.paybar .wrap {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  padding-top: var(--space-2); padding-bottom: var(--space-2);
}

/* Chip de la wallet conectada. */
.pb-wallet {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-family: var(--font-data); font-size: var(--text-xs); color: var(--text-secondary);
}
.pb-wallet img { width: 18px; height: 18px; border-radius: var(--radius-circle); display: block; }

.pb-net { display: inline-flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.pb-raillab { font-size: var(--text-sm); color: var(--text-secondary); }

/* El selector. `position: relative` acá y `absolute` en la lista: la barra está
   fija abajo, así que el listbox se despliega HACIA ARRIBA (`bottom: 100%`) o
   quedaría fuera de la ventana. */
.dn-select { position: relative; display: inline-block; }
.netpick {
  font: inherit; font-size: var(--text-sm); cursor: pointer;
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--surface-page); color: var(--text-primary);
  border: var(--border-width) solid var(--border-strong); border-radius: var(--radius-control);
}
.netpick:hover { border-color: var(--border-hover); }
.netpick img { width: 18px; height: 18px; border-radius: var(--radius-circle); display: block; }
.netpick .caret { color: var(--text-tertiary); }

.netlist {
  position: absolute; bottom: calc(100% + var(--space-2)); left: 0;
  z-index: 30; min-width: 17rem; max-height: 60vh; overflow-y: auto;
  list-style: none; margin: 0; padding: var(--space-1) 0;
  background: var(--surface-raised); box-shadow: var(--shadow-overlay);
  border: var(--border-width) solid var(--border-strong); border-radius: var(--radius-surface);
}
.netlist[hidden] { display: none; }
.netlist li {
  display: flex; align-items: center; gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  font-family: var(--font-data); font-size: var(--text-sm); cursor: pointer;
}
.netlist li:hover, .netlist li[aria-selected="true"] { background: var(--table-row-hover); }
.netlist li[aria-selected="true"] { outline: var(--border-width-emphasis) solid var(--text-primary); outline-offset: -2px; }
/* El foco del sitio es un `box-shadow`, no un `outline` (site.css:31): con
   `outline` acá el anillo se vería distinto al del resto de la página. */
.netlist li:focus { outline: none; box-shadow: var(--focus-ring); }
.netlist img { width: 18px; height: 18px; border-radius: var(--radius-circle); display: block; }
.netlist .note {
  margin-left: auto; font-size: var(--text-2xs); color: var(--text-tertiary);
  letter-spacing: var(--tracking-label); text-transform: uppercase;
}
/* El encabezado del listbox: la frase que dice que el riel no es la cobertura
   está acá arriba y NO es una opción — de ahí el `role="presentation"`. */
.netlist .head {
  font-family: var(--font-body); font-size: var(--text-2xs); color: var(--text-tertiary);
  letter-spacing: var(--tracking-label); text-transform: uppercase;
  padding: var(--space-2) var(--space-3); cursor: default; display: block;
}
.netlist .head:hover { background: none; }

/* El disco neutro de una red sin icono: existe, se puede pagar en ella, no
   tenemos su png. Mismo tratamiento que `.chains .fallback` de site.css. */
.netpick img.fallback, .netlist img.fallback, .pb-wallet img.fallback {
  background: var(--series-other);
  content: none;
}

.pb-cart { font-size: var(--text-sm); color: var(--text-secondary); min-width: 0; }
.pb-cart b { color: var(--text-primary); font-weight: var(--weight-semibold); }
.pb-cart .then { display: block; font-size: var(--text-2xs); color: var(--text-tertiary); }

.pb-act { display: flex; align-items: center; gap: var(--space-3); margin-left: auto; flex-wrap: wrap; }
.pb-status { font-size: var(--text-sm); color: var(--text-secondary); }
.pb-pay { min-height: 2.75rem; }

/* G3 — el recibo, con el caso `reused` dicho con todas las letras. */
.paid-line {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-family: var(--font-data); font-size: var(--text-xs); color: var(--text-secondary);
}
.paid-line[hidden] { display: none; }

.pb-note {
  flex-basis: 100%; margin: 0;
  font-size: var(--text-xs); color: var(--text-tertiary);
}

/* ---------------------------------------------------------------------------
   EL POP-UP DE CONFIRMACIÓN

   Se hereda la ESTRUCTURA del SuccessModal de 402milly (scrim + tarjeta + X +
   detalle + cierre) y NO su tono: allá el scrim es un degradado morado, la
   tarjeta tiene borde de 3 px con `box-shadow` de neón y encima llueven 50
   piezas de confeti animadas. Acá es la misma tarjeta que ya usa el resto del
   sitio —`--surface-raised` sobre `--surface-overlay`, el borde de énfasis del
   sistema— para que se lea como una parte de la página y no como una ventana
   de otro producto.

   🔴 CENTRADO CON `margin:auto` SOBRE EL ITEM FLEX, no con `align-items:center`
   sobre el contenedor. Con `align-items:center`, una tarjeta más alta que la
   ventana —el caso de un teléfono corto con la lista de desbloqueos puesta— se
   desborda por ARRIBA y la parte de arriba queda inalcanzable: el scroll no
   llega a un margen negativo. Con `margin:auto` el navegador reparte lo que
   sobra y, cuando no sobra nada, la tarjeta se apoya arriba y scrollea entera.
   ------------------------------------------------------------------------ */
.dnpay-scrim {
  position: fixed; inset: 0; z-index: 40;
  display: flex; overflow-y: auto;
  padding: var(--space-4);
  background: var(--surface-overlay);
}
.dnpay-card {
  margin: auto; width: 100%; max-width: 30rem; position: relative;
  padding: var(--space-6);
  background: var(--surface-raised); color: var(--text-primary);
  border: var(--border-width-emphasis) solid var(--border-strong);
  border-radius: var(--radius-surface);
  box-shadow: var(--shadow-overlay);
}
/* Con el diálogo arriba, el documento no scrollea. La clase la pone y la saca
   `abrirModal`/`cerrarModal`; no se escribe `style.overflow` a mano porque la
   barra ya le escribe `--paybar-space` al mismo atributo `style` del body. */
body.dnpay-locked { overflow: hidden; }

/* La X. 2,75 rem = 44 px reales: es el mínimo táctil y es el control que más se
   busca a ciegas con el pulgar. El `padding` de la tarjeta le deja sitio. */
.dnpay-x {
  position: absolute; top: var(--space-2); right: var(--space-2);
  min-width: 2.75rem; min-height: 2.75rem;
  display: inline-flex; align-items: center; justify-content: center;
  font: inherit; font-size: var(--text-lg); line-height: 1; cursor: pointer;
  background: none; color: var(--text-secondary);
  border: var(--border-width) solid transparent; border-radius: var(--radius-control);
}
.dnpay-x:hover { color: var(--text-primary); border-color: var(--border-strong); }

.dnpay-brow { margin: 0 0 var(--space-1); }
.dnpay-t {
  margin: 0 0 var(--space-2); padding-right: 2.75rem;
  font-family: var(--font-display); font-size: var(--text-xl);
  font-weight: var(--weight-heading); letter-spacing: var(--tracking-tight);
}
.dnpay-p {
  margin: 0 0 var(--space-3);
  font-size: var(--text-sm); line-height: var(--leading-sm); color: var(--text-secondary);
}
/* `baseline` y no `center`: el esqueleto es un `inline-block` de 0,85 rem al
   lado de un texto que envuelve en dos renglones, y centrarlo contra el bloque
   entero lo deja flotando a media altura de la segunda línea. */
.dnpay-wait {
  display: flex; align-items: baseline; gap: var(--space-2);
  margin: 0 0 var(--space-4);
  font-size: var(--text-sm); color: var(--text-primary);
}
.dnpay-wait .sk[hidden] { display: none; }

/* Lo desbloqueado. Guiones y no puntos: la lista es un inventario de celdas de
   una tabla, no una enumeración de beneficios. */
.dnpay-unlocks {
  list-style: none; margin: 0 0 var(--space-4); padding: 0;
  font-size: var(--text-sm); color: var(--text-secondary);
}
.dnpay-unlocks li { padding-left: var(--space-4); position: relative; }
.dnpay-unlocks li::before {
  content: "—"; position: absolute; left: 0; color: var(--text-tertiary);
}

.dnpay-kv { margin: 0 0 var(--space-6); }
.dnpay-tx { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; min-width: 0; }
.dnpay-tx .sk { display: inline-block; }
.dnpay-tx-note {
  font-family: var(--font-body); font-size: var(--text-xs); color: var(--text-tertiary);
}
.dnpay-copy {
  font: inherit; font-family: var(--font-body); font-size: var(--text-2xs);
  letter-spacing: var(--tracking-label); text-transform: uppercase; cursor: pointer;
  padding: var(--space-1) var(--space-2);
  background: var(--surface-sunken); color: var(--text-secondary);
  border: var(--border-width) solid var(--border-strong); border-radius: var(--radius-chip);
}
.dnpay-copy:hover { border-color: var(--border-hover); color: var(--text-primary); }
.dnpay-copy[data-done] { color: var(--state-positive); background: var(--state-positive-surface); }

.dnpay-close { width: 100%; min-height: 2.75rem; }

@media (max-width: 30rem) {
  /* A 375 px la tarjeta ocupa el ancho menos dos veces el padding del scrim, y
     nada de lo que lleva adentro puede ser más ancho que eso: el hash va
     recortado (`hashCorto`), el `.dnpay-tx` envuelve, y por eso no hay scroll
     horizontal. La X mantiene sus 44 px — es lo último que se achica. */
  .dnpay-scrim { padding: var(--space-3); }
  .dnpay-card { padding: var(--space-4); padding-top: var(--space-3); }
  .dnpay-t { font-size: var(--text-lg); }
  .dnpay-kv { grid-template-columns: 1fr; gap: var(--space-1); }
}

/* La barra tapa el final de la página: se le devuelve el espacio al documento.
   La clase la pone y la saca `repintar()` en vez de un `body:has(...)`: `:has`
   todavía no está en todos lados, y el modo de fallar sería la última tarjeta
   tapada por la barra — invisible en el navegador del que escribe la regla. */
:root { --paybar-space: 5.5rem; }
body.has-paybar { padding-bottom: var(--paybar-space); }

@media (max-width: 30rem) {
  :root { --paybar-space: 4rem; }
  /* UNA fila: selector + estado + botón. Lo que se esconde tiene otra casa. */
  .paybar .wrap {
    flex-wrap: nowrap; gap: var(--space-2);
    padding: var(--space-1) var(--space-3);
  }
  .pb-wallet, .pb-cart, .pb-note, .pb-raillab { display: none; }
  .pb-act { gap: var(--space-2); min-width: 0; }
  .pb-status {
    font-size: var(--text-2xs); max-width: 8rem;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .netpick { padding: var(--space-2); min-height: 2.75rem; }
  .netpick .name {
    max-width: 5.5rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  /* 44 px de alto real: es el mínimo táctil, y un botón de pago que se falla
     al tocar en un teléfono es un pago que no ocurre. */
  .pb-pay { min-height: 2.75rem; white-space: nowrap; }
  .netlist { min-width: 15rem; max-width: calc(100vw - var(--space-6)); }
  /* El recibo NO se esconde en móvil: es la prueba de que el cobro ocurrió y de
     que no se cobró dos veces. Se recorta, que es distinto a desaparecer. En
     `paid` el estado va vacío, así que la fila no compite con nada. */
  .paid-line { max-width: 12rem; overflow: hidden; white-space: nowrap; }
}