/* FIN-2 — POR PAGAR. Estilos aislados; tokens del ERP con fallbacks. Mobile-first. */

.pay-autoridad { color: var(--muted, #5f6f68); font-size: 0.82rem; margin: 0 0 10px; }
.pay-aviso {
  border: 1px dashed var(--line-strong, rgba(34, 69, 58, 0.3));
  border-radius: 12px; padding: 12px 14px; margin-bottom: 12px;
  background: var(--surface-soft, #f7faf8);
}
.pay-aviso p { margin: 4px 0 8px; color: var(--muted, #5f6f68); font-size: 0.85rem; }
.pay-nota { color: var(--muted, #5f6f68); font-size: 0.82rem; margin: 6px 0; }

.pay-barra { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 10px; }
.pay-buscador { flex: 1 1 220px; min-height: 42px; }
.pay-filtros { display: flex; flex-wrap: wrap; gap: 6px; }
.pay-filtro {
  border: 1px solid var(--line, rgba(34, 69, 58, 0.16)); border-radius: 999px;
  background: #fff; padding: 8px 12px; min-height: 40px; cursor: pointer; font-size: 0.8rem;
}
.pay-filtro.es-activo { background: var(--accent, #1f7a5c); color: #fff; border-color: var(--accent, #1f7a5c); }

.pay-lista { display: grid; gap: 8px; }
.pay-fila {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px;
  border: 1px solid var(--line, rgba(34, 69, 58, 0.16)); border-radius: 12px;
  padding: 12px 14px; background: #fff; min-width: 0;
}
.pay-fila.es-vencida { border-left: 4px solid #b42318; }
.pay-fila-id strong { display: block; overflow-wrap: anywhere; }
.pay-fila-id small, .pay-fila-venc small { color: var(--muted, #5f6f68); }
.pay-fila-venc small { display: block; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.04em; }
.pay-fila-cifras small { display: block; color: var(--muted, #5f6f68); }
.pay-fila-acciones { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.pay-fila-acciones button { min-height: 44px; }

.pay-chip {
  display: inline-block; border: 1px solid var(--line, rgba(34, 69, 58, 0.16));
  border-radius: 999px; padding: 1px 8px; font-size: 0.72rem; margin-left: 6px;
}
.pay-chip--vencido { background: #fee4e2; color: #b42318; border-color: #fda29b; }
.pay-chip--vence_hoy { background: #fef0c7; color: #b54708; border-color: #fedf89; }
.pay-chip--sin_vencimiento, .pay-chip--por_vencer { color: var(--muted, #5f6f68); }
.pay-chip--pendiente { color: var(--muted, #5f6f68); }
.pay-chip--parcial { background: #fef0c7; color: #b54708; border-color: #fedf89; }
.pay-chip--pagado, .pay-chip--activo { background: #d1fadf; color: #027a48; border-color: #abefc6; }
.pay-chip--cancelada, .pay-chip--revertido { color: var(--muted, #5f6f68); text-decoration: line-through; }

.pay-form {
  border: 1px solid var(--line, rgba(34, 69, 58, 0.16)); border-radius: 12px;
  padding: 14px; margin: 10px 0; background: var(--surface-soft, #f7faf8);
  display: grid; gap: 10px;
}
.pay-form h4 { margin: 0; }
.pay-form label { display: block; font-size: 0.8rem; color: var(--muted, #4c5a54); }
.pay-form input, .pay-form select { width: 100%; margin-top: 3px; min-height: 42px; }
.pay-form-acciones { display: flex; flex-wrap: wrap; gap: 8px; }
.pay-form-acciones button { min-height: 44px; }
.pay-total { margin: 0; font-size: 0.95rem; }

.pay-apps { display: grid; gap: 8px; }
.pay-app {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px;
  border: 1px solid var(--line, rgba(34, 69, 58, 0.16)); border-radius: 10px;
  padding: 10px 12px; background: #fff;
}
.pay-app-check { display: flex; gap: 8px; align-items: center; }
.pay-app-check input[type="checkbox"] {
  width: 18px; height: 18px; min-width: 18px; min-height: 18px; flex: 0 0 auto;
  border: none; background: none; padding: 0; accent-color: var(--accent, #1f7a5c);
}
.pay-app-saldo { color: var(--muted, #5f6f68); font-size: 0.82rem; }
.pay-app input[type="number"] { min-height: 44px; width: 140px; }

.pay-manuales, .pay-pagos { margin-top: 16px; }
.pay-manuales h4, .pay-pagos h4 { margin: 0 0 6px; }
.pay-manual, .pay-pago {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between;
  border: 1px solid var(--line, rgba(34, 69, 58, 0.16)); border-radius: 10px;
  padding: 10px 12px; background: #fff; margin-bottom: 6px;
}
.pay-pago.es-revertido { opacity: 0.75; }
.pay-manual small, .pay-pago small { color: var(--muted, #5f6f68); }
.pay-manual button, .pay-pago button { min-height: 44px; }

.pay-filtro:focus-visible, .pay-fila-acciones button:focus-visible,
.pay-form button:focus-visible, .pay-manual button:focus-visible, .pay-pago button:focus-visible {
  outline: 2px solid var(--accent, #1f7a5c); outline-offset: 2px;
}

@media (min-width: 900px) {
  .pay-fila { grid-template-columns: minmax(200px, 1.3fr) minmax(150px, 1fr) minmax(180px, 1fr) auto; align-items: center; }
  .pay-fila-acciones { justify-content: flex-end; }
  .pay-app { grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; }
  .pay-form--pago { max-width: 720px; }
}
/* Confirmacion del inicio de CxP: la casilla que habilita el submit (el servidor revalida). */
.pay-confirmar { display: flex; gap: 10px; align-items: flex-start; font-size: 0.85rem; }
.pay-confirmar input[type="checkbox"] {
  width: 18px; height: 18px; min-width: 18px; min-height: 18px; flex: 0 0 auto; margin-top: 2px;
  border: none; background: none; padding: 0; accent-color: var(--accent, #1f7a5c);
}

/* ==== FIN-3: flujo por vencimientos registrados (todo el contenido viene del servidor) ======== */
.pay-flujo {
  background: var(--surface, #fff); border: 1px solid var(--border-color, #e2e8f0);
  border-radius: 12px; padding: 14px 16px; margin-bottom: 14px;
}
.pay-flujo-cabecera { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; }
.pay-flujo-cabecera h4 { margin: 0; font-size: 0.95rem; }
.pay-flujo-grid { display: grid; gap: 12px; margin-top: 10px; grid-template-columns: 1fr; }
.pay-flujo-grid article {
  border: 1px solid var(--border-color, #e2e8f0); border-radius: 10px; padding: 10px 12px; min-width: 0;
}
.pay-flujo-grid h5 { margin: 0 0 6px; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--muted, #64748b); }
.pay-flujo-linea { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: baseline; padding: 2px 0; font-size: 0.85rem; }
.pay-flujo-linea span { color: var(--muted, #64748b); min-width: 0; }
.pay-flujo-linea strong { font-variant-numeric: tabular-nums; }
/* La semantica JAMAS es solo color: cada cifra lleva su etiqueta de texto. */
.pay-flujo-linea em { font-style: normal; font-size: 0.72rem; color: var(--muted, #64748b); border: 1px solid var(--border-color, #e2e8f0); border-radius: 999px; padding: 1px 8px; }
.pay-flujo .pay-nota { margin: 4px 0 0; }
@media (min-width: 900px) {
  .pay-flujo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1280px) {
  .pay-flujo-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}