/* La pantalla de tesorería de VanyPago. El marco, la lista, la ficha, el ciclo y los campos son
   de VanyMarca (`marca/componentes.css` y `marca/consola.css`, la consola común del sprint 9);
   aquí va solo lo propio: el enlace de pago, el comprobante y los reversos de un recibo. */

/* El enlace de pago se enseña UNA vez: tiene que verse que es importante y poder copiarse. */
.enlace-pago { border: 1px solid var(--vc-laton); background: var(--vc-laton-suave); border-radius: var(--vc-radio-md);
  padding: var(--vc-e-4); margin-bottom: var(--vc-e-4); display: flex; flex-direction: column; gap: var(--vc-e-2); }
.enlace-pago code { font: var(--vc-t-nota)/1.4 var(--vc-font-mono); overflow-wrap: anywhere; user-select: all;
  background: var(--vc-superficie); border: 1px solid var(--vc-borde); border-radius: var(--vc-radio-sm); padding: var(--vc-e-3); }
.enlace-pago .vc-boton { align-self: flex-start; }

.comprobante-img { max-width: 100%; max-height: 28rem; border: 1px solid var(--vc-borde); border-radius: var(--vc-radio-sm);
  display: block; margin-top: var(--vc-e-3); }

/* Los reversos de un recibo, cada uno con su ciclo. */
.reverso { display: flex; flex-direction: column; gap: var(--vc-e-3); padding: var(--vc-e-4) 0; border-top: 1px solid var(--vc-borde); }
.reverso:first-of-type { border-top: 0; padding-top: 0; }

/* «Cargar desde una hoja» (posplan-4, t2, R10): el archivo, la casilla del enlace y el botón, uno
   debajo de otro; el enlace de cada cobro cargado se parte donde haga falta (es una URL larga). */
.pago-hoja { display: flex; flex-direction: column; gap: var(--vc-e-3); align-items: stretch; }
.pago-hoja .vc-campo { margin: 0; }
.pago-hoja__casilla { display: flex; gap: var(--vc-e-2); align-items: flex-start; cursor: pointer; }
.pago-hoja__casilla input { margin-top: 0.2em; flex: none; }
vc-lista[nombre="enlaces-de-la-hoja"] code { overflow-wrap: anywhere; font: var(--vc-t-nota)/1.4 var(--vc-font-mono); }

/* `hidden` manda siempre (también lo pone la consola común): un velo con `display` y `hidden` tapaba la pantalla. */
[hidden] { display: none !important; }