/* -----------------------------------------------------------------------------
   Secciones 3 y 4 — Cobros y pagos.
   El rojo marca mora/urgencia; el verde se reserva para dinero ya cobrado.
   ----------------------------------------------------------------------------- */

.co-lista, .pa-lista { display: grid; grid-template-columns: 1fr; gap: 14px; }

.co {
  background: var(--glass-bg); border: 1px solid var(--glass-border); border-left: 4px solid var(--line-fuerte);
  border-radius: 22px; padding: 16px 18px;
  display: grid; grid-template-columns: 1fr auto auto; gap: 12px 18px; align-items: center;
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  box-shadow: var(--glass-shadow);
  transition: transform .25s ease, box-shadow .25s ease, border-color .2s ease;
}
.co:hover { transform: translateY(-3px); box-shadow: 0 16px 44px rgba(0,0,0,.13); }
.co.vencido { border-left-color: var(--rojo); background: var(--rojo-suave); }
.co.hoy { border-left-color: var(--rojo); }
.co.pronto { border-left-color: var(--line-fuerte); }
.co-main { min-width: 0; }
.co-nom { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.co-nom h3 { font-size: 19px; line-height: 1.1; }
.co-servs { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 7px; }
.co-serv { display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px; border-radius: 7px; background: var(--surface-2); border: 1px solid var(--line); font-size: 11.5px; color: var(--mut); }
.co-serv i { width: 7px; height: 7px; border-radius: 50%; background: var(--punto); flex: 0 0 auto; }
.co-serv b { color: var(--ink); font-weight: 500; }
.co-fecha { color: var(--faint); font-size: 12.5px; margin-top: 2px; }
.co.vencido .co-fecha, .co.hoy .co-fecha { color: var(--rojo); font-weight: 600; }
.co-valor { text-align: right; display: flex; flex-direction: column; }
.co-valor b { font-size: 18px; }
.co-valor span { color: var(--faint); font-size: 11px; }
.co-acc { display: flex; gap: 7px; flex-wrap: wrap; justify-content: flex-end; }
.co-exito { border-color: var(--good); border-left-color: var(--good); background: var(--good-suave); }

.pg-resumen {
  margin: 14px 0 2px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px;
  background: var(--surface-2); display: grid; grid-template-columns: 1fr auto; gap: 3px 10px; align-items: center;
}
.pg-resumen span { color: var(--mut); font-size: 13px; }
.pg-resumen b { font-size: 15px; }
.pg-resumen small { grid-column: 1 / -1; color: var(--faint); }
.pg-detalle { margin: 10px 0 4px; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.pg-linea { display: flex; justify-content: space-between; gap: 12px; padding: 9px 12px; border-bottom: 1px solid var(--line); font-size: 13px; }
.pg-linea:last-child { border-bottom: 0; }
.pg-linea span { color: var(--mut); }
.pg-linea.total { background: var(--surface-2); font-weight: 600; }
.pg-linea.total span { color: var(--ink); }
.cuadro input[type="date"], .cuadro select {
  width: 100%; padding: 12px 14px; border-radius: 10px;
  border: 1px solid var(--line-fuerte); background: var(--campo); color: var(--ink);
}

.pa-periodo {
  padding: 10px 13px; border-radius: 10px; border: 1px solid var(--line-fuerte);
  background: var(--campo); color: var(--ink); min-width: 160px;
}
.pa {
  background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: 22px;
  padding: 15px 18px; display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center;
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  box-shadow: var(--glass-shadow);
  transition: transform .25s ease, box-shadow .25s ease, border-color .2s ease;
}
.pa:hover { transform: translateY(-3px); box-shadow: 0 16px 44px rgba(0,0,0,.13); }
.pa-nom { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.pa-nom b { font-size: 15.5px; }
.pa-sub { color: var(--mut); font-size: 13px; margin-top: 2px; }
.pa-meta { color: var(--faint); font-size: 12px; margin-top: 3px; }
.pa-monto { font-size: 18px; font-weight: 600; color: var(--good); text-align: right; }

@media (max-width: 760px) {
  .co { grid-template-columns: 1fr auto; }
  .co-acc { grid-column: 1 / -1; justify-content: stretch; }
  .co-acc .btn { flex: 1; }
}
@media (max-width: 520px) {
  .co { grid-template-columns: 1fr; }
  .co-valor { text-align: left; }
  .co-acc { grid-column: auto; }
  .pa { grid-template-columns: 1fr; }
  .pa-monto { text-align: left; }
  .pa-periodo { width: 100%; }
}

/* Tanda 6 — soporte del pago y recibo imprimible. */
.cuadro .opcional { color: var(--faint); font-weight: 400; font-size: 11px; }
.cuadro .pg-archivo {
  width: 100%; padding: 10px 12px; border-radius: 10px;
  border: 1px dashed var(--line-fuerte); background: var(--campo); color: var(--ink);
}
.pg-ayuda-archivo { margin-top: -4px; }
.pa { grid-template-columns: minmax(0, 1fr) auto auto; }
.pa-info { min-width: 0; }
.pa-acc { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; align-items: center; }
.etq.soporte { color: var(--good); border-color: var(--good); background: var(--good-suave); }
.pa-quitar {
  width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--line-fuerte);
  background: transparent; color: var(--faint); font-size: 18px; line-height: 1; cursor: pointer;
}
.pa-quitar:hover { color: var(--rojo); border-color: var(--rojo); }

@media (max-width: 900px) {
  .pa { grid-template-columns: 1fr auto; }
  .pa-acc { grid-column: 1 / -1; justify-content: flex-end; }
}
@media (max-width: 520px) {
  .pa { grid-template-columns: 1fr; }
  .pa-acc { grid-column: auto; justify-content: stretch; }
  .pa-acc .btn { flex: 1; }
}

/* Hotfix 6.1 — anulación auditable y canales del recibo. */
.pa .btn.peligro{border-color:rgba(183,35,24,.45);color:#A81C11;background:transparent}
.pa .btn.peligro:hover{border-color:#A81C11;background:rgba(168,28,17,.06)}
.pa.anulada{border-color:rgba(168,28,17,.28);background:color-mix(in srgb,var(--surface) 94%,var(--rojo) 6%)}
.pa.anulada .pa-monto{color:var(--faint);text-decoration:line-through}
.etq.recibo{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;text-transform:none;letter-spacing:0}
.etq.anulada-etq{color:var(--rojo);border-color:var(--rojo);background:var(--rojo-suave)}
.pa-anulado-texto{margin-top:5px;color:var(--rojo);font-size:12px;font-weight:600}
.pa-acc .btn[disabled]{opacity:.48;cursor:not-allowed}
@media (max-width:1100px){.pa{grid-template-columns:minmax(0,1fr) auto}.pa-acc{grid-column:1/-1}}