/* ─────────────────────────────────────────────
   pagos.css — Historial y formulario de pagos
   Estética: refined financial / luxury minimal
───────────────────────────────────────────── */

/* ══ RESUMEN FINANCIERO ══════════════════════ */

.pagos-resumen-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .75rem;
  margin-bottom: 1.1rem;
}

.pagos-resumen-item {
  display: flex;
  flex-direction: column;
  gap: .3rem;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: 14px;
  padding: .9rem .85rem;
  position: relative;
  overflow: hidden;
}

.pagos-resumen-item::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--glass-border);
  border-radius: 14px 14px 0 0;
}

.pagos-resumen-item.pagado::before {
  background: linear-gradient(90deg, var(--accent), var(--accent2));
}

.pagos-resumen-item.saldado::before {
  background: linear-gradient(90deg, var(--accent), #52b788);
}

.pagos-resumen-item.pendiente::before {
  background: linear-gradient(90deg, #c9a84c, #e9c46a);
}

.pagos-resumen-item.excedente::before {
  background: linear-gradient(90deg, #c0392b, #e74c3c);
}

.pr-label {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.pr-value {
  font-family: 'Roboto', sans-serif;
  font-size: .95rem;
  font-weight: 700;
  color: var(--text);
  line-height: 1.2;
}

.pagos-resumen-item.saldado .pr-value {
  color: var(--accent);
}

.pagos-resumen-item.pendiente .pr-value {
  color: var(--gold-text);
}

.pagos-resumen-item.excedente .pr-value {
  color: var(--danger);
}

/* ── BARRA DE PROGRESO ──────────────────────── */

.pagos-progress-wrap {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-top: .25rem;
}

.pagos-progress-bar {
  flex: 1;
  height: 6px;
  background: var(--bg2);
  border-radius: 99px;
  overflow: hidden;
}

.pagos-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent), var(--accent2));
  border-radius: 99px;
  transition: width .6s cubic-bezier(.4,0,.2,1);
}

.pagos-progress-fill.completo {
  background: linear-gradient(90deg, var(--accent), #52b788);
}

.pagos-pct {
  font-size: .78rem;
  font-weight: 700;
  color: var(--text-muted);
  min-width: 2.5rem;
  text-align: right;
}

/* ══ HISTORIAL DE PAGOS ══════════════════════ */

.pagos-loading {
  text-align: center;
  padding: 2rem;
  color: var(--text-muted);
  font-size: .85rem;
}

.pagos-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .75rem;
  padding: 2.5rem 1rem;
  color: var(--text-muted);
  font-size: .85rem;
  text-align: center;
}

.pagos-empty svg {
  opacity: .2;
}

/* ── FILA DE PAGO ───────────────────────────── */

.pago-row {
  padding: .8rem .4rem;
  border-bottom: 1px solid var(--glass-border);
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: .6rem;
  cursor: pointer;
  transition: background .12s;
  border-radius: 8px;
  margin: 0 -.4rem;
}

.pago-row:last-child {
  border-bottom: none;
}

.pago-row:active {
  background: rgba(45,106,79,.05);
}

.pago-row-izq {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex: 1;
  min-width: 0;
}

.pago-chevron {
  color: var(--text-muted);
  opacity: .4;
  flex-shrink: 0;
}

/* ── BADGE DE TIPO ──────────────────────────── */

.pago-tipo-badge {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .22rem .65rem;
  border-radius: 20px;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .03em;
}

.pago-tipo-badge.tipo-pago {
  background: var(--success-bg);
  color: var(--success-text);
}

.pago-tipo-badge.tipo-devolucion {
  background: var(--danger-bg2);
  color: var(--danger);
}

.pago-tipo-badge.tipo-transferencia {
  background: var(--info-bg);
  color: var(--info-text);
}

/* ── MONTO ──────────────────────────────────── */

.pago-monto {
  font-family: 'Roboto', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  white-space: nowrap;
  margin-left: auto;
}

.pago-monto.tipo-pago          { color: var(--accent); }
.pago-monto.tipo-devolucion    { color: var(--danger); }
.pago-monto.tipo-transferencia { color: var(--info-text); }


.pago-fecha {
  font-size: .75rem;
  color: var(--text-muted);
  font-weight: 500;
}

.pago-comp {
  font-size: .72rem;
  color: var(--text-muted);
  background: var(--bg2);
  padding: .15rem .45rem;
  border-radius: 6px;
  font-family: 'Roboto Mono', monospace;
}

.pago-metodo {
  font-size: .75rem;
  color: var(--text-muted);
  font-weight: 500;
}

.pago-obs {
  font-size: .74rem;
  color: var(--text-muted);
  font-style: italic;
}

.pago-by {
  font-size: .7rem;
  color: var(--text-muted);
  opacity: .65;
  margin-left: auto;
}

.pago-foto-link {
  font-size: .73rem;
  color: var(--accent);
  text-decoration: none;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: .2rem;
}

.pago-foto-link:hover {
  text-decoration: underline;
}

/* ══ FORMULARIO DE NUEVO PAGO ════════════════ */

.pago-form-inner {
  margin-top: 1.1rem;
  padding: 1.25rem;
  background: rgba(45,106,79,.03);
  border: 1.5px solid rgba(45,106,79,.18);
  border-radius: 16px;
  animation: formSlideIn .2s ease;
}

@keyframes formSlideIn {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── SEPARADOR TRANSFER ─────────────────────── */

#pago-transferencia-wrap .section-title {
  margin-top: .5rem;
  margin-bottom: .65rem;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--info-text);
  display: flex;
  align-items: center;
  gap: .4rem;
}

/* ── RESULTADO BÚSQUEDA TRANSFERENCIA ───────── */

.trans-vacio {
  font-size: .8rem;
  color: var(--text-muted);
  padding: .5rem .2rem;
  font-style: italic;
}

/* ══ SERVICIOS EXTRA (pagos de pasajero) ══════ */

.pagos-extra-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: .65rem 0;
  border-bottom: 1px solid var(--glass-border);
  gap: .6rem;
}
.pagos-extra-row:last-child { border-bottom: none; }
.pagos-extra-nombre { font-size: .85rem; font-weight: 600; color: var(--text); }
.pagos-extra-precio {
  font-size: .85rem; font-weight: 700;
  color: var(--accent);
  white-space: nowrap;
}
.pagos-extra-remove {
  background: none; border: none; cursor: pointer;
  color: var(--text-muted);
  padding: .3rem;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  transition: background .12s, color .12s;
  flex-shrink: 0;
}
.pagos-extra-remove:hover { background: var(--danger-bg2, rgba(192,57,43,.08)); color: var(--danger); }

.pagos-extra-total-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: .5rem .7rem;
  background: var(--bg2);
  border-radius: 8px;
  margin-top: .4rem;
  font-size: .82rem;
}
.pagos-extra-total-label { color: var(--text-muted); font-weight: 500; }
.pagos-extra-total-valor { font-weight: 700; color: var(--text); }

/* ══ MODAL AGREGAR SERVICIO EXTRA (usa .modal-transferir-*) ══ */

#modal-extra-lista .modal-trans-vacio {
  padding: .75rem .2rem;
}

#modal-extra-lista {
  max-height: 320px;
  overflow-y: auto;
  border-radius: 12px;
}


/* ══ CAMPOS OCULTOS POR DEFECTO ══════════════ */

#pago-banco-wrap,
#pago-comprobante-wrap,
#pago-foto-wrap,
#pd-foto-wrap {
  display: none;
}

/* ══ INPUT DE ARCHIVO PERSONALIZADO ══════════
   El <input type="file"> nativo no es estilizable en su totalidad (el
   nombre del archivo seleccionado es parte del navegador, no del DOM
   normal) y en pantallas angostas ese layout interno se recorta,
   dejando invisible si el usuario ya adjuntó algo. Se oculta
   visualmente el input real (sin display:none, para no romper foco de
   teclado ni lectores de pantalla) y se lo reemplaza por un botón +
   texto propios, totalmente controlados por este CSS. */
.file-input-custom {
  display: flex;
  align-items: center;
  gap: .6rem;
  flex-wrap: wrap;
}

.file-input-native {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.file-input-btn {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .6rem .9rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg);
  color: var(--text);
  font-family: 'Roboto', sans-serif;
  font-size: .88rem;
  font-weight: 500;
  cursor: pointer;
  flex-shrink: 0;
  transition: border-color .2s, background .15s;
  -webkit-tap-highlight-color: transparent;
}

.file-input-btn:hover {
  background: var(--surface-hover);
}

.file-input-btn:active {
  background: var(--border);
}

/* El botón real recibe el foco de teclado; mostramos el foco ahí en vez
   del input oculto para que la navegación por teclado siga siendo clara. */
.file-input-native:focus-visible + .file-input-btn {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(45,106,79,.1);
}

/* Tarjeta de archivo seleccionado, estilo "chip" (similar al selector
   de archivos de GitHub): ícono + nombre truncado en una sola línea +
   botón para quitar. Reemplaza al span de texto plano, que en pantallas
   angostas se desparramaba en varias líneas sin estructura visual. */
/* .detail-grid es 1fr 1fr, pero los grid items no se encogen por
   debajo del ancho de su contenido por defecto (min-width:auto
   implícito). Si solo una celda tiene min-width:0, el motor de grid
   redistribuye el espacio sobrante hacia las celdas que SÍ lo piden,
   desbordando la card. Por eso el freno va en el grid entero, no en
   una celda puntual. */
.detail-grid > .form-field {
  min-width: 0;
}

.file-chip {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-top: .5rem;
  padding: .55rem .6rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg);
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  overflow: hidden;
}

.file-chip-icon {
  flex-shrink: 0;
  color: var(--text-muted);
}

.file-chip-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: .85rem;
  font-weight: 500;
  color: var(--text);
}

.file-chip-remove {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: background .15s, color .15s;
  -webkit-tap-highlight-color: transparent;
}

.file-chip-remove:hover {
  background: var(--surface-hover);
  color: var(--text);
}

.file-chip-remove:active {
  background: var(--border);
}

@media (max-width: 480px) {
  .file-input-custom {
    align-items: stretch;
  }

  .file-input-btn {
    justify-content: center;
  }
}

/* ══ RESPONSIVE ══════════════════════════════ */

@media (max-width: 420px) {
  .pagos-resumen-grid {
    grid-template-columns: 1fr;
  }

  .pagos-resumen-item {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: .75rem 1rem;
  }

  .pagos-resumen-item::before {
    top: 0; left: 0; bottom: 0; right: auto;
    width: 3px;
    height: 100%;
    border-radius: 14px 0 0 14px;
  }

  .pr-value {
    font-size: .9rem;
    text-align: right;
  }
}

/* ══ BUSCADOR DE BANCO ═══════════════════════ */

.banco-search-wrap {
  position: relative;
}

.banco-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  left: 0; right: 0;
  background: var(--surface);
  border: 1.5px solid rgba(45,106,79,.25);
  border-radius: 12px;
  box-shadow: 0 8px 24px var(--shadow-card);
  z-index: 100;
  overflow: hidden;
  max-height: 220px;
  overflow-y: auto;
}

.banco-option {
  padding: .7rem 1rem;
  font-size: .85rem;
  color: var(--text);
  cursor: pointer;
  border-bottom: 1px solid var(--border);
  transition: background .1s;
}

.banco-option:last-child {
  border-bottom: none;
}

.banco-option:hover {
  background: rgba(45,106,79,.07);
  color: var(--accent);
  font-weight: 600;
}

.banco-dropdown-empty {
  padding: .7rem 1rem;
  font-size: .82rem;
  color: var(--text-muted);
  font-style: italic;
}

/* ══ DETALLE DE PAGO ═════════════════════════ */

.pd-monto-valor {
  font-family: 'Roboto', sans-serif;
  font-size: 2rem;
  font-weight: 700;
  margin-top: .25rem;
}

.pd-monto-valor.tipo-pago          { color: var(--accent); }
.pd-monto-valor.tipo-devolucion    { color: var(--danger); }
.pd-monto-valor.tipo-transferencia { color: var(--info-text); }

.pd-grid {
  box-sizing: border-box;
  width: 100%;
  display: flex;
  flex-direction: column;
}

.pd-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  padding: .75rem 0;
  border-bottom: 1px solid var(--glass-border);
}

.pd-row:last-child { border-bottom: none; }

.pd-label {
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--text-muted);
  flex-shrink: 0;
}

.pd-value {
  font-size: .88rem;
  color: var(--text);
  font-weight: 500;
  text-align: right;
}

.pd-foto-img {
  width: 100%;
  border-radius: 12px;
  margin-top: .5rem;
  display: block;
  box-shadow: var(--shadow-md);
}

/* ══ BOTÓN TRANSFERIR PAGO ═══════════════════ */

.btn-transferir-pago {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  width: 100%;
  margin-top: 1.25rem;
  padding: .85rem 1rem;
  background: rgba(52,120,246,.07);
  border: 1.5px solid rgba(52,120,246,.25);
  border-radius: 14px;
  color: var(--info-text);
  font-size: .88rem;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s, border-color .15s;
}

.btn-transferir-pago:hover {
  background: rgba(52,120,246,.13);
  border-color: rgba(52,120,246,.45);
}

.btn-transferir-pago:active {
  background: rgba(52,120,246,.18);
}

.pd-transferido-aviso {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  width: 100%;
  margin-top: 1.25rem;
  padding: .85rem 1rem;
  background: rgba(120,120,120,.07);
  border: 1.5px solid rgba(120,120,120,.2);
  border-radius: 14px;
  color: var(--text-muted, #888);
  font-size: .88rem;
  font-weight: 600;
  cursor: default;
}

/* ══ MODAL TRANSFERIR PAGO ═══════════════════ */

.modal-transferir-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.45);
  z-index: 500;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0;
  animation: fadeInOverlay .18s ease;
}

@keyframes fadeInOverlay {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.modal-transferir-card {
  background: var(--surface);
  border-radius: 20px 20px 0 0;
  padding: 1.5rem 1.25rem 2rem;
  width: 100%;
  max-width: 520px;
  min-height: 40vh;
  max-height: 88vh;
  overflow-y: auto;
  box-shadow: 0 -8px 32px var(--shadow-card);
  animation: slideUpModal .22s cubic-bezier(.4,0,.2,1);
}

@keyframes slideUpModal {
  from { transform: translateY(60px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

.modal-transferir-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: .75rem;
}

.modal-transferir-titulo {
  display: flex;
  align-items: center;
  gap: .45rem;
  font-size: 1rem;
  font-weight: 700;
  color: var(--info-text);
}

.modal-transferir-close {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-muted);
  padding: .25rem;
  border-radius: 8px;
  display: flex;
  align-items: center;
  transition: background .12s;
}

.modal-transferir-close:hover {
  background: var(--bg2);
}

.modal-transferir-desc {
  font-size: .82rem;
  color: var(--text-muted);
  margin-bottom: .5rem;
  line-height: 1.45;
}

.modal-transferir-monto {
  font-family: 'Roboto', sans-serif;
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--accent);
  margin-bottom: .25rem;
}

/* ── Resultados búsqueda modal ─────────────── */

.modal-trans-resultados {
  margin-top: .5rem;
  max-height: 220px;
  overflow-y: auto;
  border-radius: 12px;
}

.modal-trans-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .7rem .85rem;
  border-bottom: 1px solid var(--glass-border);
  cursor: pointer;
  transition: background .1s;
  border-radius: 10px;
}

.modal-trans-item:hover {
  background: rgba(45,106,79,.06);
}

.modal-trans-item:last-child {
  border-bottom: none;
}

.modal-trans-vacio {
  font-size: .8rem;
  color: var(--text-muted);
  padding: .5rem .2rem;
  font-style: italic;
}

.modal-trans-seleccionado {
  display: flex;
  align-items: center;
  gap: .45rem;
  margin-top: .75rem;
  padding: .65rem .9rem;
  background: rgba(45,106,79,.08);
  border: 1.5px solid rgba(45,106,79,.2);
  border-radius: 10px;
  font-size: .85rem;
  font-weight: 600;
  color: var(--accent);
}

.modal-transferir-actions {
  display: flex;
  gap: .75rem;
  margin-top: 1.25rem;
}

.modal-transferir-actions .btn-cancel {
  flex: 0 0 auto;
}

.modal-transferir-actions .btn-save {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
}

.modal-transferir-actions .btn-save:disabled {
  opacity: .45;
  cursor: not-allowed;
}

/* ══ REEMPLAZO DE PASAJERO ═══════════════════════ */

.btn-reemplazar-pasajero {
  margin-top: .6rem;
  background: transparent;
  border: 1.5px solid rgba(45,106,79,.35);
  color: var(--accent);
}

.btn-reemplazar-pasajero:hover {
  background: rgba(45,106,79,.08);
}

[data-theme="dark"] .btn-reemplazar-pasajero {
  border-color: rgba(82,183,136,.4);
  color: var(--accent2, #52b788);
}

[data-theme="dark"] .btn-reemplazar-pasajero:hover {
  background: rgba(82,183,136,.12);
}

#reemplazo-banner {
  background: rgba(45,106,79,.06);
  border: 1px solid rgba(45,106,79,.2);
  border-radius: 14px;
}

[data-theme="dark"] #reemplazo-banner {
  background: rgba(82,183,136,.08);
  border-color: rgba(82,183,136,.25);
}

#reemplazo-banner .page-desc {
  color: var(--text-muted);
  font-size: .85rem;
}

#reemplazo-banner strong {
  color: var(--text);
}

.form-check-wrap {
  display: flex;
  align-items: center;
  gap: .55rem;
  font-size: .85rem;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
  user-select: none;
}

.form-check-wrap input[type="checkbox"] {
  width: 17px;
  height: 17px;
  accent-color: var(--accent);
  cursor: pointer;
}