/* =======================================================================
   MODAL DE PAGOS UNIFICADO – ESTILOS PRO (FULL RESPONSIVO)
   ======================================================================= */

/* ***** MODAL FIJO (no se mueve con el scroll) ***** */
#modal_pagos_unificado.modal {
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  overflow: hidden;
}

.modal-open { 
  overflow: hidden !important; 
}

/* Contenedor del modal */
.payment-modal { 
  font-family: 'Segoe UI', system-ui, sans-serif; 
}

.modal-dialog.payment-modal {
  width: auto; 
  max-width: 900px;
  height: 100%;
  margin: 0 auto;
  display: flex; 
  align-items: center; 
  justify-content: center;
  pointer-events: auto;
}

.payment-content {
  width: 100%; 
  height: calc(100% - 3rem);
  margin: 1.5rem 0;
  display: flex; 
  flex-direction: column; 
  overflow: hidden;
  border-radius: 12px; 
  box-shadow: 0 10px 30px rgba(0,0,0,.15);
}

/* Header con pasos */
.payment-header {
  background: linear-gradient(135deg, #2c3e50, #1a252f); 
  color: #fff; 
  border-bottom: none;
  padding: 1.25rem 1.5rem; 
  position: relative; 
  display: flex; 
  flex-direction: column; 
  align-items: center;
}

.payment-steps { 
  display: flex; 
  justify-content: space-between; 
  width: 100%; 
  max-width: 520px; 
  margin: .35rem auto 0; 
  position: relative; 
}

.payment-steps::before { 
  content: ''; 
  position: absolute; 
  top: 20px; 
  left: 0; 
  right: 0; 
  height: 3px; 
  background: rgba(255,255,255,.2); 
  z-index: 1; 
}

.payment-steps::after { 
  content: ''; 
  position: absolute; 
  top: 20px; 
  left: 0; 
  width: var(--progress-width, 0%); 
  height: 3px; 
  background: #3498db; 
  z-index: 2; 
  transition: .4s; 
}

.step { 
  display: flex; 
  flex-direction: column; 
  align-items: center; 
  z-index: 3; 
  width: 33.33%; 
}

.step-icon {
  width: 40px; 
  height: 40px; 
  border-radius: 50%; 
  background: rgba(255,255,255,.9);
  display: flex; 
  align-items: center; 
  justify-content: center; 
  font-weight: 700; 
  color: #2c3e50; 
  transition: .3s;
}

.step.active .step-icon { 
  background: #3498db; 
  color: #fff; 
  transform: scale(1.08); 
}

.step-label { 
  margin-top: 8px; 
  font-size: .9rem; 
  font-weight: 600; 
  opacity: .7; 
  color: rgba(255,255,255,.85); 
  transition: .3s; 
}

.step.active .step-label { 
  opacity: 1; 
  color: #fff; 
}

.payment-close {
  position: absolute; 
  right: 20px; 
  top: 20px; 
  width: 40px; 
  height: 40px; 
  border-radius: 50%;
  background: rgba(0,0,0,.25); 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  border: none; 
  color: #fff; 
  opacity: .9; 
  transition: .25s;
}

.payment-close:hover { 
  opacity: 1; 
  background: rgba(0,0,0,.35); 
  transform: rotate(90deg); 
}

/* Body (scroll interno del modal) */
.payment-body {
  flex: 1; 
  overflow-y: auto; 
  padding: 1rem 1.25rem; 
  background: #f8fafc; 
  display: flex; 
  flex-direction: column;
}

/* Pills premium (Cliente / Pagar) - REORGANIZACIÓN RESPONSIVA */
.payment-info-card {
  background: #fff; 
  border-radius: 14px; 
  padding: 1rem 1.1rem; 
  margin-bottom: 1rem;
  box-shadow: 0 8px 22px rgba(31,41,55,.06); 
  border: 1px solid #e8eef5;
  display: flex; 
  flex-direction: column;
  gap: .8rem; 
  min-height: auto;
}

.payment-info-card .customer-info,
.payment-info-card .amount-info {
  display: inline-flex; 
  align-items: center; 
  gap: .6rem; 
  padding: .48rem .95rem; 
  border-radius: 999px;
  border: 1px solid #e7e9fb; 
  background: linear-gradient(180deg, #f7f8ff, #eef2ff);
  box-shadow: 0 6px 18px rgba(31,41,55,.06), inset 0 2px 3px rgba(255,255,255,.65);
  white-space: nowrap; 
  width: 100%;
  justify-content: flex-start;
}

.payment-info-card .amount-info {
  border-color: #d7e8fb; 
  background: linear-gradient(180deg, #f2f8ff, #e8f2ff);
}

.payment-info-card .customer-info i,
.payment-info-card .amount-info i {
  width: 32px; 
  height: 32px; 
  border-radius: 50%; 
  color: #fff; 
  display: inline-flex; 
  align-items: center; 
  justify-content: center; 
  flex: 0 0 auto;
}

.payment-info-card .customer-info i { 
  background: linear-gradient(135deg, #7c3aed, #a78bfa); 
}

.payment-info-card .amount-info i { 
  background: linear-gradient(135deg, #2a7fc1, #39a3e4); 
}

.payment-info-card .label { 
  font-weight: 800; 
  color: #0f172a; 
  opacity: .9; 
}

.payment-info-card .value { 
  font-weight: 800; 
  color: #0f172a; 
  overflow: hidden; 
  text-overflow: ellipsis; 
  flex: 1;
}

.payment-info-card .amount { 
  font-weight: 800; 
  color: #0f172a; 
}

/* Switches - MEJORADO PARA MÓVIL */
.payment-options-card {
  background: #fff; 
  border-radius: 12px; 
  box-shadow: 0 2px 10px rgba(0,0,0,.05);
  padding: .8rem .9rem; 
  margin: 1rem 0;
  display: flex; 
  flex-direction: column;
  gap: .8rem;
}

.option-item { 
  display: flex; 
  align-items: center; 
  justify-content: space-between;
  width: 100%;
  min-height: 44px;
  padding: .4rem 0;
}

.switch-label { 
  font-size: .92rem; 
  font-weight: 600; 
  color: #495057; 
  flex: 1;
}

.payment-switch { 
  position: relative; 
  display: inline-flex; 
  align-items: center; 
  gap: 8px; 
  cursor: pointer; 
}

.payment-slider { 
  position: relative; 
  display: inline-block; 
  width: 46px; 
  height: 22px; 
  background: #ced4da; 
  transition: .4s; 
  border-radius: 34px; 
  flex: 0 0 auto; 
}

.payment-slider:before { 
  content: ""; 
  position: absolute; 
  height: 14px; 
  width: 14px; 
  left: 4px; 
  bottom: 4px; 
  background: #fff; 
  transition: .4s; 
  border-radius: 50%; 
}

.payment-switch input[type="checkbox"] { 
  position: absolute; 
  opacity: 0; 
  width: 0; 
  height: 0; 
}

.payment-switch input:checked + .payment-slider { 
  background: #28a745; 
}

.payment-switch input:checked + .payment-slider:before { 
  transform: translateX(22px); 
}

.option-item .question { 
  display: inline-block; 
  margin-left: .35rem; 
  min-width: auto;
  text-align: right; 
  font-weight: 600; 
  color: #374151; 
  font-size: .92rem; 
}

/* Tarjetas de métodos - GRID RESPONSIVO */
.section-methods { 
  background: #fff; 
  border-radius: 12px; 
  padding: 1rem 1.1rem; 
  box-shadow: 0 2px 10px rgba(0,0,0,.05); 
}

.payment-methods-container { 
  width: 100%; 
}

.payment-methods-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 12px;
  justify-items: center;
}

.method-card {
  background: #fff; 
  border-radius: 12px; 
  padding: 1.05rem .9rem; 
  display: flex; 
  flex-direction: column; 
  align-items: center; 
  justify-content: center;
  cursor: pointer; 
  transition: .25s; 
  border: 1px solid #e9ecef; 
  position: relative; 
  overflow: hidden; 
  width: 100%;
  min-width: 110px;
  min-height: 120px;
}

.method-card::after { 
  content: ''; 
  position: absolute; 
  bottom: 0; 
  left: 0; 
  right: 0; 
  height: 4px; 
  background: transparent; 
  transition: .25s; 
}

.method-card:hover { 
  transform: translateY(-2px); 
  box-shadow: 0 5px 15px rgba(0,0,0,.08); 
}

.method-card.selected { 
  border-color: #3498db; 
  box-shadow: 0 5px 15px rgba(52,152,219,.18); 
}

.method-card.selected::after { 
  background: #3498db; 
}

.method-name { 
  font-weight: 700; 
  font-size: .95rem; 
  margin-bottom: 5px; 
  color: #343a40; 
  text-align: center;
}

.method-badge { 
  font-size: .7rem; 
  padding: 3px 8px; 
  border-radius: 10px; 
  background: #e9ecef; 
  color: #6c757d; 
  margin-top: 5px; 
}

.method-card.selected .method-badge { 
  background: rgba(52,152,219,.1); 
  color: #3498db; 
}

.method-icon { 
  font-size: 1.7rem; 
  margin-bottom: 8px; 
  transition: .3s; 
}

.method-card[data-method="cash"] .method-icon { 
  color: #18a558; 
}

.method-card[data-method="card"] .method-icon { 
  color: #2e86de; 
}

.method-card[data-method="transfer"] .method-icon { 
  color: #00bcd4; 
}

.method-card[data-method="check"] .method-icon { 
  color: #8a63d2; 
}

.method-card[data-method="points"] .method-icon { 
  color: #d4af37; 
}

.method-card.selected .method-icon { 
  transform: translateY(-1px); 
}

.method-card.premium { 
  border-color: #e9ecef; 
  background: linear-gradient(to bottom, rgba(212,175,55,.04), #fff); 
}

.method-card.premium .method-icon { 
  color: #b58900; 
}

.method-card.premium.selected { 
  border-color: #d4af37; 
  box-shadow: 0 5px 15px rgba(212,175,55,.22); 
}

.method-card.premium.selected::after { 
  background: #d4af37; 
}

.info-icon { 
  position: absolute; 
  top: 10px; 
  right: 10px; 
  font-size: .9rem; 
  color: #6c757d; 
  cursor: help; 
}

.method-card.default-focus { 
  border-color: #3498db!important; 
  box-shadow: 0 0 0 3px rgba(52,152,219,.25), 0 8px 18px rgba(0,0,0,.06); 
}

/* Formularios */
.payment-details-container {
  background: #fff; 
  border-radius: 12px; 
  padding: 1rem 1.1rem; 
  box-shadow: 0 2px 10px rgba(0,0,0,.05); 
  margin-bottom: 1rem;
}

.detail-header { 
  display: flex; 
  align-items: center; 
  gap: .65rem; 
  margin-bottom: .85rem; 
  padding-bottom: .65rem; 
  border-bottom: 1px solid #e9ecef; 
}

.method-display { 
  display: flex; 
  align-items: center; 
  gap: .65rem; 
  font-size: 1.12rem; 
  font-weight: 800; 
  color: #2c3e50; 
}

.method-display i { 
  font-size: 1.45rem; 
  color: #3498db; 
}

.payment-details[data-method="points"] .method-display i { 
  color: #d4af37; 
}

.payment-form-group { 
  position: relative; 
  margin-bottom: .65rem; 
}

.payment-form-control {
  width: 100%; 
  padding: .72rem 2.25rem .72rem 1rem; 
  font-size: 1rem; 
  border: 1px solid #ced4da; 
  border-radius: 8px; 
  background: #fff; 
  transition: .2s;
}

.payment-form-control:focus { 
  outline: none; 
  border-color: #3498db; 
  box-shadow: 0 0 0 3px rgba(52,152,219,.18); 
}

.payment-form-group label {
  position: absolute; 
  top: .7rem; 
  left: 1rem; 
  color: #6c757d; 
  pointer-events: none; 
  transition: .2s; 
  background: #fff; 
  padding: 0 .25rem; 
  border-radius: 4px;
}

.payment-form-control:focus~label,
.payment-form-control:not(:placeholder-shown)~label { 
  top: -.55rem; 
  left: .85rem; 
  font-size: .75rem; 
  color: #3498db; 
}

.currency-symbol { 
  position: absolute; 
  right: .85rem; 
  top: .7rem; 
  font-weight: 700; 
  color: #6c757d; 
  pointer-events: none; 
}

.payment-step { 
  display: none; 
}

.payment-step.active { 
  display: block; 
}

.bootstrap-select .btn { 
  display: flex; 
  align-items: center; 
  min-height: 42px; 
}

/* Readonly visual */
.payment-form-control.readonly,
.payment-form-control[readonly] { 
  background: #f9fafb; 
  color: #6b7280; 
  cursor: not-allowed; 
}

/* ===== CONFIRMAR (paso 3) ===== */
#section_confirm { 
  display: none; 
}

/* --- Card general con más contraste --- */
.confirm-card {
  background: linear-gradient(180deg, #ffffff 0%, #f9fbff 100%);
  border-radius: 16px;
  border: 1px solid #e3eaf5;
  box-shadow: 0 10px 28px rgba(17,24,39,.08);
  padding: 1.25rem 1.25rem;
  margin-top: .35rem;
}

/* Header */
.confirm-header {
  display: flex; 
  align-items: center; 
  gap: .75rem;
  font-weight: 800; 
  font-size: 1.28rem; 
  color: #1f2937;
  margin-bottom: 1rem; 
  padding-bottom: .6rem;
  border-bottom: 2px solid #eef2f7;
}

.confirm-header i { 
  color: #10b981; 
  font-size: 1.55rem; 
}

/* Pills de info */
.confirm-info-grid { 
  display: grid; 
  grid-template-columns: 1fr 1fr; 
  gap: .75rem; 
  margin-bottom: .9rem; 
}

.confirm-info-pill {
  display: flex; 
  align-items: center; 
  gap: .6rem; 
  padding: .65rem 1rem; 
  border-radius: 12px;
  border: 1px solid #e6e9f5; 
  background: linear-gradient(180deg, #f7f8ff, #eef2ff);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.75), 0 4px 12px rgba(31,41,55,.05);
  white-space: nowrap;
}

.confirm-info-pill.amount { 
  border-color: #d7e8fb; 
  background: linear-gradient(180deg, #f2f8ff, #e8f2ff); 
}

.confirm-info-pill i {
  width: 30px; 
  height: 30px; 
  border-radius: 8px; 
  color: #fff; 
  display: inline-flex; 
  align-items: center; 
  justify-content: center;
  background: linear-gradient(135deg, #7c3aed, #a78bfa);
}

.confirm-info-pill.amount i { 
  background: linear-gradient(135deg, #2a7fc1, #39a3e4); 
}

.confirm-info-pill .label { 
  font-weight: 700; 
  color: #0f172a; 
  opacity: .9; 
  font-size: .9rem; 
}

.confirm-info-pill .value { 
  font-weight: 800; 
  color: #0f172a; 
  overflow: hidden; 
  text-overflow: ellipsis; 
}

/* Opciones (Comprobante / Múltiples) */
.confirm-options-grid { 
  display: grid; 
  grid-template-columns: 1fr 1fr; 
  gap: .65rem; 
  margin-bottom: 1rem; 
}

.confirm-option {
  display: flex; 
  align-items: center; 
  justify-content: space-between;
  padding: .65rem .9rem; 
  border-radius: 10px;
  background: #f8fafc; 
  border: 1px solid #e8edf4;
}

.confirm-option .option-label { 
  font-weight: 600; 
  color: #64748b; 
  font-size: .9rem; 
}

.confirm-option .option-value.pill {
  padding: .28rem .75rem; 
  border-radius: 999px; 
  background: #eaf5ff; 
  border: 1px solid #cfe6ff;
  font-weight: 800; 
  color: #0f172a; 
  font-size: .85rem;
}

/* ======= MÉTODOS APLICADOS (MEJORA DESDE AQUÍ) ======= */
.payment-methods-summary h6 {
  position: relative; 
  margin: 0 0 .75rem 0; 
  padding-left: 12px;
  font-weight: 800; 
  color: #0f172a; 
  font-size: 1rem; 
  letter-spacing: .2px;
}

.payment-methods-summary h6::before {
  content: ''; 
  position: absolute; 
  left: 0; 
  top: 3px; 
  bottom: 3px; 
  width: 4px; 
  border-radius: 4px;
  background: linear-gradient(180deg, #3ba0e0, #2f87c8);
}

/* Lista de métodos: tiles con zebra + separadores suaves */
.method-summary-item {
  display: flex; 
  align-items: center; 
  justify-content: space-between;
  padding: .65rem .9rem; 
  border-radius: 10px;
  border: 1px dashed #e7ecf5; 
  background: #fff;
  margin-bottom: .5rem;
  transition: .2s;
}

.method-summary-item:hover { 
  box-shadow: 0 6px 16px rgba(2,6,23,.06); 
  transform: translateY(-1px); 
}

.method-summary-item:nth-child(even) { 
  background: linear-gradient(180deg, #ffffff 0%, #f9fbff 100%); 
}

.method-summary-name {
  display: flex; 
  align-items: center; 
  gap: .55rem;
  font-weight: 700; 
  color: #1f2937;
}

.method-summary-name::before {
  content: ''; 
  width: 10px; 
  height: 10px; 
  border-radius: 50%;
  background: linear-gradient(135deg, #93c5fd, #3b82f6);
  box-shadow: 0 0 0 2px rgba(59,130,246,.15);
}

.method-summary-amount {
  font-weight: 900; 
  color: #0b1220;
  font-size: 1.02rem;
  font-variant-numeric: tabular-nums lining-nums;
}

/* Totales: tarjetas con jerarquía clara */
.confirm-totals-grid { 
  display: grid; 
  gap: .65rem; 
  margin: 1rem 0 .4rem 0; 
}

.total-line {
  display: flex; 
  align-items: center; 
  justify-content: space-between;
  padding: .85rem 1.1rem; 
  border-radius: 12px;
  background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
  border: 1px solid #e6ebf3;
  font-weight: 800;
}

.total-line .total-label { 
  color: #334155; 
  font-size: .95rem; 
}

.total-line .total-amount {
  color: #0b1220; 
  font-size: 1.15rem; 
  font-weight: 900;
  font-variant-numeric: tabular-nums lining-nums;
}

/* Línea de diferencia (warning/ok) */
.total-line.difference {
  background: linear-gradient(180deg, #fffbeb 0%, #fff7d6 100%);
  border-color: #fde68a;
}

.total-line.difference .total-amount { 
  color: #b45309; 
}

.total-line.difference.ok {
  background: linear-gradient(180deg, #ecfdf5 0%, #dcfce7 100%);
  border-color: #a7f3d0;
}

.total-line.difference.ok .total-amount { 
  color: #047857; 
}

/* Soporte al id #difference-line si lo utilizas en HTML */
#difference-line {
  border-radius: 12px; 
  padding: .85rem 1.1rem; 
  border: 1px solid #fde68a;
  background: linear-gradient(180deg, #fffbeb 0%, #fff7d6 100%);
}

#difference-line.ok {
  border-color: #a7f3d0;
  background: linear-gradient(180deg, #ecfdf5 0%, #dcfce7 100%);
}

/* Botón Registrar pago full-width con mejor foco */
.confirm-submit-btn,
.payment-btn {
  padding: 1rem; 
  font-weight: 900; 
  border-radius: 12px;
  border: none; 
  box-shadow: 0 6px 16px rgba(16,185,129,.35); 
  transition: transform .12s, box-shadow .2s, filter .2s;
  min-width: 160px; 
  display: inline-flex; 
  align-items: center; 
  gap: 8px; 
  justify-content: center; 
  cursor: pointer;
}

.confirm-submit-btn {
  background: linear-gradient(180deg, #10b981, #059669); 
  color: #fff; 
  width: 100%;
}

.confirm-submit-btn:hover { 
  transform: translateY(-2px); 
  box-shadow: 0 10px 22px rgba(16,185,129,.45); 
  filter: brightness(1.03); 
}

.confirm-submit-btn:focus { 
  outline: 3px solid rgba(16,185,129,.25); 
  outline-offset: 3px; 
}

.confirm-submit-btn:disabled { 
  background: linear-gradient(180deg, #9ca3af, #6b7280); 
  box-shadow: none; 
  transform: none; 
}

/* Footer - BOTONES EN UNA SOLA LÍNEA EN MÓVIL */
.payment-actions {
  display: flex; 
  align-items: center; 
  justify-content: center; 
  gap: 8px;
  padding: 1rem 1.25rem; 
  background: #f3f6f9; 
  border-top: 1px solid #e5edf5;
  flex-wrap: nowrap;
}

.payment-btn {
  padding: .85rem 1rem; 
  font-size: .85rem;
  box-shadow: 0 6px 14px rgba(0,0,0,.06);
  transition: transform .12s, box-shadow .2s, background-color .2s, border-color .2s, filter .2s;
  flex: 1;
  max-width: 140px;
  text-align: center;
}

.payment-btn:hover { 
  filter: brightness(1.03); 
  box-shadow: 0 12px 20px rgba(0,0,0,.12); 
}

.payment-btn:active { 
  transform: translateY(1px); 
}

.payment-btn:disabled { 
  opacity: .6; 
  cursor: not-allowed; 
  box-shadow: none; 
}

.payment-btn-prev {
  background: linear-gradient(180deg, #f59e0b, #d97706);
  color: #fff; 
  border-color: #d97706;
}

.payment-btn-next {
  background: linear-gradient(180deg, #3ba0e0, #2f87c8);
  color: #fff; 
  border-color: #2f87c8;
}

.payment-btn-close {
  background: linear-gradient(180deg, #6b7280, #4b5563);
  color: #fff; 
  border-color: #4b5563;
}

/* Publicidad */
.ad-space {
  background: linear-gradient(135deg, #f8f9fa, #e9ecef);
  border-radius: 8px; 
  border: 1px dashed #dee2e6; 
  transition: all .3s;
}

.ad-space:hover { 
  transform: translateY(-2px); 
  box-shadow: 0 4px 12px rgba(0,0,0,.05); 
}

.ad-space .ad-link { 
  text-decoration: underline; 
}

/* Campo de error para focus */
.error-field {
  border-color: #ef4444 !important;
  box-shadow: 0 0 0 3px rgba(239,68,68,.18) !important;
  animation: pulse-error .5s ease-in-out;
}

@keyframes pulse-error {
  0% { transform: translateX(0); }
  25% { transform: translateX(-3px); }
  50% { transform: translateX(3px); }
  75% { transform: translateX(-3px); }
  100% { transform: translateX(0); }
}

/* ============= MEDIA QUERIES RESPONSIVAS ============= */

/* Tablets grandes */
@media (max-width: 992px) { 
  .modal-dialog.payment-modal { 
    max-width: 95%; 
  }
  
  .payment-methods-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Tablets */
@media (max-width: 768px) {
  .payment-header {
    padding: 1rem 1.25rem;
  }
  
  .step-icon { 
    width: 36px; 
    height: 36px; 
    font-size: .9rem; 
  }
  
  .step-label { 
    font-size: .8rem; 
  }
  
  .payment-body {
    padding: .8rem 1rem;
  }
  
  .payment-info-card {
    padding: .8rem .9rem;
  }
  
  .payment-info-card .customer-info i,
  .payment-info-card .amount-info i {
    width: 28px;
    height: 28px;
  }
  
  .method-card {
    min-width: 100px;
    min-height: 110px;
    padding: .9rem .7rem;
  }
  
  .method-icon {
    font-size: 1.5rem;
  }
  
  .method-name {
    font-size: .85rem;
  }
  
  .payment-actions {
    padding: .8rem 1rem;
    gap: 6px;
  }
  
  .payment-btn {
    padding: .75rem .8rem;
    font-size: .8rem;
    min-width: auto;
  }
}

/* Móviles */
@media (max-width: 576px) {
  .payment-content {
    height: calc(100% - 1rem);
    margin: .5rem 0;
    border-radius: 8px;
  }
  
  .payment-header {
    padding: .8rem 1rem;
  }
  
  .step-icon { 
    width: 32px; 
    height: 32px; 
    font-size: .85rem; 
  }
  
  .step-label { 
    font-size: .75rem; 
    margin-top: 6px;
  }
  
  .payment-close {
    right: 15px;
    top: 15px;
    width: 36px;
    height: 36px;
  }
  
  .payment-body {
    padding: .7rem .8rem;
  }
  
  .payment-info-card { 
    padding: .7rem .8rem; 
    gap: .6rem; 
  }
  
  .payment-info-card .customer-info,
  .payment-info-card .amount-info { 
    padding: .4rem .7rem; 
  }
  
  .payment-info-card .customer-info i,
  .payment-info-card .amount-info i { 
    width: 26px; 
    height: 26px; 
    font-size: .8rem; 
  }
  
  .payment-info-card .label { 
    font-size: .85rem; 
  }
  
  .payment-info-card .value { 
    font-size: .9rem; 
  }
  
  .payment-info-card .amount { 
    font-size: .95rem; 
  }
  
  .payment-options-card { 
    padding: .6rem .7rem; 
    gap: .6rem; 
  }
  
  .switch-label, 
  .option-item .question { 
    font-size: .8rem; 
  }
  
  .payment-slider { 
    width: 40px; 
    height: 20px; 
  }
  
  .payment-slider:before { 
    width: 12px; 
    height: 12px; 
    left: 4px; 
    bottom: 4px; 
  }
  
  .payment-switch input:checked + .payment-slider:before { 
    transform: translateX(20px); 
  }
  
  .payment-methods-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
  }
  
  .method-card { 
    min-width: auto;
    min-height: 100px;
    padding: .8rem .5rem; 
  }
  
  .method-icon {
    font-size: 1.4rem;
    margin-bottom: 6px;
  }
  
  .method-name {
    font-size: .8rem;
    margin-bottom: 4px;
  }
  
  .method-badge {
    font-size: .65rem;
    padding: 2px 6px;
  }
  
  .info-icon {
    top: 8px;
    right: 8px;
    font-size: .8rem;
  }
  
  .payment-details-container {
    padding: .8rem .9rem;
  }
  
  .method-display {
    font-size: 1rem;
  }
  
  .method-display i {
    font-size: 1.3rem;
  }
  
  .payment-form-control {
    padding: .65rem 2rem .65rem .9rem;
    font-size: .9rem;
  }
  
  .payment-form-group label {
    top: .65rem;
    left: .9rem;
    font-size: .85rem;
  }
  
  .payment-form-control:focus~label,
  .payment-form-control:not(:placeholder-shown)~label {
    top: -.5rem;
    left: .8rem;
    font-size: .7rem;
  }
  
  .currency-symbol {
    right: .8rem;
    top: .65rem;
    font-size: .85rem;
  }
  
  /* Confirm responsive */
  .confirm-info-grid,
  .confirm-options-grid { 
    grid-template-columns: 1fr; 
    gap: .5rem;
  }
  
  .confirm-info-pill {
    padding: .55rem .8rem;
  }
  
  .confirm-info-pill i {
    width: 26px;
    height: 26px;
  }
  
  .confirm-option {
    padding: .55rem .8rem;
  }
  
  .method-summary-item { 
    padding: .55rem .7rem; 
    flex-direction: column;
    align-items: flex-start;
    gap: .3rem;
  }
  
  .method-summary-amount {
    align-self: flex-end;
    font-size: .95rem;
  }
  
  .total-line { 
    padding: .7rem .8rem; 
  }
  
  .total-line .total-amount {
    font-size: 1rem;
  }
  
  .payment-actions {
    padding: .7rem .8rem;
    gap: 6px;
  }
  
  .payment-btn {
    padding: .7rem .6rem;
    font-size: .75rem;
    min-width: auto;
    flex: 1;
  }
  
  .ad-space {
    padding: .6rem;
    margin-top: .8rem;
  }
  
  .ad-space small {
    font-size: .75rem;
  }
}

/* Móviles muy pequeños */
@media (max-width: 400px) {
  .payment-content {
    height: 100%;
    margin: 0;
    border-radius: 0;
  }
  
  .payment-header {
    padding: .7rem .8rem;
  }
  
  .payment-body {
    padding: .6rem .7rem;
  }
  
  .payment-info-card {
    padding: .6rem .7rem;
  }
  
  .payment-options-card {
    padding: .5rem .6rem;
  }
  
  .method-card {
    min-height: 90px;
    padding: .7rem .4rem;
  }
  
  .method-icon {
    font-size: 1.2rem;
  }
  
  .method-name {
    font-size: .75rem;
  }
  
  .payment-btn {
    padding: .6rem .4rem;
    font-size: .7rem;
  }
  
  .payment-actions {
    padding: .6rem .7rem;
  }
}