/* ════════════════════════════════════════════════════════════
   PAGAR — lo propio de esta pantalla

   Va en su propio archivo y no dentro de estilos.css a propósito:
   `pago.html` es la única página que lo carga, y así el sitio
   principal no arrastra reglas que no usa.

   Todo lo demás —`.card`, `.inp`, `.f`, `.duo`, `.drop3`, `.btn`,
   las variables de color y el tema oscuro— sale de estilos.css. Esta
   pantalla no inventa ni un color.
   ════════════════════════════════════════════════════════════ */

/* SIN `max-width` propio: hereda los 1180px de `.wrap`, como el resto
   del sitio.
 *
 *  Tenía 940 y eso la centraba en una caja más estrecha, así que en
 *  pantalla ancha el título de Pagar arrancaba más a la derecha que el
 *  de Registrar. Se nota al saltar de una pestaña a otra: el texto
 *  pega un brinco lateral.
 *
 *  Lo que sí se limita es el CONTENIDO del cobro, más abajo, pero
 *  pegado a la izquierda —no centrado— para que el borde siga siendo
 *  el mismo. */
.pg-wrap{padding-top:38px;padding-bottom:70px}

/* El cobro no necesita 1180px de ancho: dos columnas de 570 dejan las
   líneas demasiado largas para leerlas de un vistazo. Se corta en 940,
   pero con `margin-right:auto` en vez de `margin:0 auto`, que es lo
   que mantiene el borde izquierdo donde debe. */
#cobro{max-width:940px;margin-right:auto}

/* ── La puerta ────────────────────────────────────────────── */
/* La caja de las dos llaves. Va a la izquierda y con el ancho de una
   columna del formulario de registro, no centrada: dos campos cortos
   estirados a todo lo ancho se leen como un formulario a medio hacer. */
#puerta .pg-caja{max-width:430px;margin:0}

.pg-caja{padding:26px 24px 24px;display:grid;gap:16px;text-align:left}

/* El código se teclea a mano y se dicta por teléfono: letras grandes,
   separadas y siempre en mayúscula, para que no se confunda al leerlo. */
.pg-cod{text-transform:uppercase;letter-spacing:.22em;font-size:19px;text-align:center}
.pg-cod::placeholder{letter-spacing:.12em;text-transform:none}

.pg-btn{width:100%;margin-top:4px}

.pg-ayuda{margin:20px 0 0;max-width:460px;
  font-size:14px;color:var(--text-faint);line-height:1.55}
.pg-ayuda a{color:var(--accent);text-decoration:underline;text-underline-offset:2px}

/* El mensaje de error de cada formulario. Aparece donde el ojo ya
   está —justo debajo del botón que se acaba de pulsar— y no como un
   aviso flotante que se va antes de que lo lean. */
.pg-aviso{margin:12px 0 0;font-size:14px;line-height:1.5;font-weight:500;
  padding:11px 14px;border-radius:var(--r-sm)}
.pg-aviso[hidden]{display:none}
.pg-aviso.mal{color:var(--s4);background:color-mix(in srgb,var(--s4) 9%,transparent)}
.pg-aviso.bien{color:var(--ok,#0F7B4F);background:color-mix(in srgb,var(--ok,#0F7B4F) 10%,transparent)}

/* ── El cobro ─────────────────────────────────────────────── */
.pg-hola{margin-bottom:18px}
.pg-hola h1{font-size:clamp(1.5rem,3.4vw,2.1rem);margin:4px 0 0;letter-spacing:-.03em}

.pg-total{display:flex;align-items:center;justify-content:space-between;gap:18px;
  padding:20px 26px;margin-bottom:22px;background:var(--accent);border-color:transparent}
.pg-total-lab{display:block;color:#fff;font-weight:600;font-size:15px;letter-spacing:-.01em}
.pg-total-sub{display:block;color:#fff;opacity:.72;font-size:13px;margin-top:2px}
.pg-total-val{color:#fff;font-size:clamp(1.8rem,4.6vw,2.4rem);font-weight:800;letter-spacing:-.045em}

.pg-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:start}
.pg-col{display:grid;gap:20px;align-content:start}

.pg-bloque{padding:22px 24px}
.pg-h2{font-size:15px;font-weight:700;letter-spacing:-.02em;margin:0 0 14px}
.pg-nota{margin:12px 0 0;font-size:14px;color:var(--text-faint);line-height:1.5}

/* ── Lista de paquetes ────────────────────────────────────── */
.pg-paquetes{display:grid;gap:10px}
.pg-paq{display:grid;grid-template-columns:1fr auto;gap:3px 14px;
  padding:12px 0;border-top:1px solid var(--line)}
.pg-paq:first-child{border-top:0;padding-top:0}
.pg-paq-trk{font-family:var(--mono,ui-monospace,monospace);font-size:13px;
  font-weight:600;letter-spacing:-.01em;word-break:break-all}
.pg-paq-lb{font-size:14px;font-weight:600;white-space:nowrap;align-self:center}
.pg-paq-desc{grid-column:1/-1;font-size:14px;color:var(--text-faint);line-height:1.45}
.pg-paq-est{grid-column:1/-1;font-size:12px;font-weight:600;letter-spacing:.04em;
  text-transform:uppercase;color:var(--accent)}

/* ── Cuentas bancarias ────────────────────────────────────── */
.pg-titular{font-size:14px;line-height:1.55;margin:0 0 14px;color:var(--text-dim)}
.pg-titular b{color:var(--text)}
.pg-banco{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:11px 0;border-top:1px solid var(--line)}
.pg-banco-n{font-size:14px;font-weight:600}
.pg-banco-c{font-family:var(--mono,ui-monospace,monospace);font-size:14px;color:var(--text-dim)}
/* Copiar la cuenta es LA acción de este bloque: nadie teclea un número
   de diez cifras mirando otra pantalla sin equivocarse. */
.pg-copiar{background:var(--bg-elev);border:1px solid var(--line-strong);
  border-radius:99px;padding:6px 13px;font-size:12.5px;font-weight:600;
  cursor:pointer;color:var(--text);white-space:nowrap;transition:.2s var(--ease)}
.pg-copiar:hover{background:var(--line-strong)}
.pg-copiar.ok{background:var(--accent);border-color:transparent;color:#fff}

/* ── Estado del comprobante ya subido ─────────────────────── */
.pg-estado{padding:13px 15px;border-radius:var(--r-sm);margin-bottom:16px;
  font-size:14px;line-height:1.5;border:1px solid var(--line-strong);background:var(--bg-elev)}
.pg-estado[hidden]{display:none}
.pg-estado b{display:block;margin-bottom:3px}
.pg-estado.pendiente{border-color:color-mix(in srgb,var(--s3,#B7791F) 45%,transparent)}
.pg-estado.aprobado{border-color:color-mix(in srgb,var(--ok,#0F7B4F) 45%,transparent)}
.pg-estado.rechazado{border-color:color-mix(in srgb,var(--s4) 45%,transparent)}

/* ── Elegir entrega ───────────────────────────────────────── */
.pg-opciones{display:grid;gap:10px;margin-bottom:16px}
.pg-op{display:flex;gap:11px;align-items:flex-start;cursor:pointer;
  padding:13px 15px;border:1.5px solid var(--line-strong);border-radius:var(--r-sm);
  background:var(--bg-elev);transition:.2s var(--ease)}
.pg-op:hover{border-color:var(--accent)}
.pg-op input{margin-top:2px;accent-color:var(--accent);width:17px;height:17px;flex-shrink:0}
.pg-op b{display:block;font-size:14px;font-weight:600}
.pg-op i{display:block;font-style:normal;font-size:13px;color:var(--text-faint);
  line-height:1.45;margin-top:2px}
.pg-op:has(input:checked){border-color:var(--accent);
  background:color-mix(in srgb,var(--accent) 7%,transparent)}

/* ── Teléfono ─────────────────────────────────────────────── */
@media(max-width:820px){
  .pg-grid{grid-template-columns:1fr}
}
@media(max-width:560px){
  .pg-wrap{padding-top:26px}
  .pg-total{padding:17px 20px}
  .pg-bloque{padding:19px 18px}
  .pg-banco{flex-wrap:wrap;gap:7px}
}
/* Por debajo de 16px iOS amplía la página al tocar un campo. Mismo
   umbral y mismo motivo que en el formulario de registro. */
@media(max-width:700px){
  .pg-caja .inp, #cobro .inp, #cobro select.inp, #cobro textarea.inp{font-size:16px}
}

/* ── De dónde sale el total ─────────────────────────────────
   Va pegado debajo del total y con su mismo ancho: es su nota al pie,
   no otra sección. Por eso el margen negativo de arriba, que come el
   hueco que dejaba el bloque azul. */
.pg-desglose{
  margin:-14px 0 22px;padding:16px 26px 18px;
  border:1px solid var(--line);border-top:0;
  border-radius:0 0 var(--r-lg) var(--r-lg);
  background:var(--bg-elev);
}
.pg-desglose[hidden]{display:none}
.pg-lin{display:flex;justify-content:space-between;align-items:baseline;gap:16px;
  padding:6px 0;font-size:14px;line-height:1.45}
.pg-lin span{color:var(--text-dim)}
.pg-lin b{font-variant-numeric:tabular-nums;white-space:nowrap}
/* El total repetido aquí abajo cierra la suma: sin él, las líneas
   quedan sueltas y el ojo tiene que subir a comprobar que cuadran. */
.pg-lin-total{border-top:1px solid var(--line);margin-top:6px;padding-top:11px;font-weight:700}
.pg-lin-total span{color:var(--text);font-weight:700}
/* El subtotal de un cobro de categoría C. Lleva raya arriba pero no el
   peso del total: separa el flete y la gestión del IVA que va debajo,
   sin competir con la cifra final. */
.pg-lin-sub{border-top:1px solid var(--line);margin-top:5px;padding-top:9px}
.pg-lin-sub span{color:var(--text)}

@media(max-width:560px){
  .pg-desglose{padding:14px 20px 16px}
}

/* Lo que RESTA del total: descuento y saldo a favor. En verde y con
   su signo — un renglón que baja el total pintado igual que uno que lo
   sube se lee al revés, y el cliente saca la calculadora. */
.pg-lin-menos b{ color:#128a4a }