.xpay-container .payment-methods .payment-method .method-footer i { font-size: 9px; margin-right: 2px; }
.xpay-container .payment-methods .payment-method .method-fee,
.xpay-container .payment-methods .payment-method .method-badge { font-size: 8px; padding: 1px 3px; gap: 2px; }
.xpay-container .payment-methods .payment-method[data-method="paypal"] .brand-logo { height: 16px; max-height: 16px; }

.xpay-container {
    --primary: #2563eb;
    --primary-soft: rgba(37, 99, 235, 0.1);
    --border: #d1d5db;
    --bg: #ffffff;
    --text: #111827;
    --muted: #6b7280;
    max-width: 1024px;
    margin: 0 auto;
    padding: 32px 16px;
    background: var(--bg);
    color: var(--text);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.xpay-header {
    margin-bottom: 32px;
    text-align: center;
    padding: 24px 20px;
    background: linear-gradient(135deg, #f8fafc 0%, #e0e7ff 100%);
    border-radius: 16px;
    border: 1px solid #e5e7eb;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    position: relative;
    overflow: hidden;
}

.xpay-header::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -10%;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(99, 102, 241, 0.1) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}

.xpay-header .header-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    background: linear-gradient(135deg, var(--primary) 0%, #4f46e5 100%);
    border-radius: 16px;
    margin-bottom: 16px;
    box-shadow: 0 6px 20px rgba(99, 102, 241, 0.3);
    position: relative;
    z-index: 1;
}

.xpay-header .header-icon i {
    font-size: 28px;
    color: white;
}

.xpay-header .header-title {
    font-size: 28px;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 8px;
    letter-spacing: -0.02em;
    position: relative;
    z-index: 1;
}

.xpay-header .header-subtitle {
    margin-top: 4px;
    color: #64748b;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.6;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    z-index: 1;
}

.xpay-grid {
    display: grid;
    gap: 20px;
    grid-template-columns: 1fr 300px;
}

@media (max-width: 768px) {
    .xpay-grid { grid-template-columns: 1fr; }
}

.xpay-container .xpay-card,
.xpay-container .summary-card {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 20px;
}

.xpay-container .xpay-card h2,
.xpay-container .summary-card h2 {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 18px;
    font-weight: 600;
}

.xpay-container .xpay-card h2 i,
.xpay-container .summary-card h2 i { color: var(--primary); }

.xpay-container .xpay-progress {
    margin: 24px 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    position: relative;
}

/* Alinear Monto, Datos, Pago en una sola fila: ocultar separadores internos */
.xpay-container .xpay-progress .progress-sep { display: none !important; }

.xpay-container .xpay-progress::before {
    /* Oculto la línea de fondo para evitar la raya en el medio */
    display: none;
}

.xpay-container .progress-line {
    position: absolute;
    top: 50%;
    left: 0;
    height: 2px;
    background: var(--primary);
    transform: translateY(-50%);
    z-index: 1;
    transition: width 0.4s ease;
    width: 0;
}

.xpay-container .progress-item {
    padding: 16px;
    border-radius: 8px;
    border: 1px solid var(--border);
    text-align: center;
    color: var(--muted);
    font-size: 14px;
    position: relative;
    z-index: 2;
    background: var(--bg);
    transition: all 0.3s ease;
}
.xpay-container .progress-item .num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    margin: 0 6px 0 0;
    border-radius: 9999px;
    background: var(--border);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
}
.xpay-container .progress-item.active .num { background: var(--primary); }
.xpay-container .progress-item .label {
    font-weight: 600;
}
.xpay-container .progress-item .progress-edit {
    display: none;
    margin-top: 6px;
    border: none;
    background: none;
    color: var(--primary);
    cursor: pointer;
    font-weight: 600;
    font-size: 12px;
}
/* Mostrar Editar solo cuando el paso está completado */
.xpay-container .progress-item.completed .progress-edit { display: inline-flex; }
.xpay-container .progress-item .progress-info {
    margin-top: 8px;
    font-size: 12px;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.xpay-container .progress-item.active .progress-info {
    color: var(--primary);
}

.xpay-container .progress-item.active {
    border-color: var(--primary);
    background: var(--primary-soft);
    color: var(--primary);
    font-weight: 600;
}

/* Estado completado en progreso */
.xpay-container .progress-item.completed {
    border-color: #16a34a;
    background: #ecfdf5;
}
.xpay-container .progress-item.completed .num { background: #16a34a; }
.xpay-container .progress-item.completed .progress-info { color: #065f46; }
/* Texto/título del paso en verde tenue cuando está completado */
.xpay-container .progress-item.completed .label { color: #065f46; }

/* Dot verde también cuando está completado */
.xpay-container .xpay-progress .progress-item.completed .dot i { color: #16a34a; }

/* Check del progreso: gris por defecto, azul cuando activo, verde cuando completado */
.xpay-container .xpay-progress .dot i { color: var(--muted); }
.xpay-container .xpay-progress .progress-item.active .dot i { color: var(--primary); }

.xpay-container .form-section {
    display: grid;
    gap: 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 16px;
}
.xpay-container .form-section { position: relative; overflow: hidden; }

/* Overlay circular de transición entre pasos */
.xpay-container .form-section .step-overlay {
    position: absolute;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.65);
    backdrop-filter: blur(1px);
    -webkit-backdrop-filter: blur(1px);
    z-index: 5;
}
.xpay-container .form-section.transitioning .step-overlay { display: flex; }
.xpay-container .step-spinner {
    width: 42px;
    height: 42px;
    border-radius: 9999px;
    border: 3px solid rgba(37,99,235,.25);
    border-top-color: var(--primary);
    animation: xpaySpin .9s linear infinite;
}
@keyframes xpaySpin {
  to { transform: rotate(360deg); }
}

/* Cuando se edita un paso, expandir a ancho completo */
.xpay-container .form-section.editing {
    grid-column: 1 / -1;
    box-shadow: 0 0 0 3px var(--primary-soft);
}

/* Estado visual cuando el paso está deshabilitado por gating: oculto */
/* No ocultar secciones por aria-disabled para evitar flujos forzados */
/* .form-section[aria-disabled="true"] { display: none !important; } */

.xpay-container .form-row {
    display: grid;
    gap: 12px;
    grid-template-columns: 1fr 1fr;
}

.xpay-container .input-label {
    display: flex;
    gap: 8px;
    align-items: center;
    font-size: 14px;
    font-weight: 600;
    color: var(--muted);
}

.xpay-container .input-with-icon { position: relative; }

.xpay-container .input-with-icon i {
    position: absolute;
    top: 50%;
    left: 14px;
    transform: translateY(-50%);
    color: var(--muted);
}

.xpay-container .input-with-icon input,
.xpay-container .input-with-icon textarea {
    width: 100%;
    padding: 10px 12px 10px 40px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: #fff;
    color: var(--text);
}

.xpay-container .input-with-icon input:focus,
.xpay-container .input-with-icon textarea:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-soft);
}

.xpay-container .amount-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.xpay-container .amount-badge {
    padding: 6px 10px;
    border-radius: 9999px;
    border: 1px solid var(--border);
    background: #f3f4f6;
    color: var(--text);
    font-weight: 500;
    font-size: 13px;
    cursor: pointer;
    text-align: center;
}

.xpay-container .amount-badge:hover,
.xpay-container .amount-badge.selected {
    border-color: var(--primary);
    color: var(--primary);
    background: var(--primary-soft);
}
    .amount-section > .input-label {
        color: #0f172a;
    }
    .input-hint {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-top: 6px;
        font-size: 13px;
        color: #0f172a;
        background: #f1f5f9;
        border: 1px solid #e2e8f0;
        border-left: 4px solid var(--primary);
        border-radius: 8px;
        padding: 8px 10px;
    }
    .input-hint i { color: var(--primary); }

.xpay-container .amount-badge.active {
    border-color: var(--primary);
    color: var(--primary);
    background: var(--primary-soft);
}

/* === Detalles de pago: layout por defecto a 1 columna para evitar FOUC === */
.xpay-container .payment-form {
    display: grid;
    grid-template-columns: 1fr; /* ancho completo desde el inicio, sin parpadeos */
    gap: 12px;
    align-items: start;
}

/* Paso 2 (Detalles del pago) a ancho completo en desktop; opcional si no se requiere */
.xpay-container .payment-form #step-2 { grid-column: 1 / -1; }

/* Modo escalonado: mostrar estrictamente un paso a la vez
   - En cuanto el HTML marca #step-1 como .active, los demás se ocultan
   - Con JS, se mantiene el mismo comportamiento */
.xpay-container .payment-form .form-section { display: none; }
.xpay-container .payment-form .form-section.active { display: grid; }
.payment-form .form-section.active {
    grid-column: 1 / -1;
}

@media (max-width: 900px) {
    /* Header más compacto */
    .xpay-header {
        padding: 20px 16px;
        margin-bottom: 28px;
        border-radius: 14px;
    }
    
    .xpay-header .header-icon {
        width: 50px;
        height: 50px;
        margin-bottom: 14px;
        border-radius: 14px;
    }
    
    .xpay-header .header-icon i {
        font-size: 26px;
    }
    
    .xpay-header .header-title {
        font-size: 24px;
        margin-bottom: 7px;
    }
    
    .xpay-header .header-subtitle {
        font-size: 14px;
    }
    
    .xpay-container .payment-form { grid-template-columns: 1fr; }
    .xpay-container .form-row { grid-template-columns: 1fr; }
}

/* Compactar tamaño en inputs dentro de Detalles de pago */
.xpay-container .form-row {
    display: grid;
    gap: 12px;
    grid-template-columns: 1fr 1fr;
}

.xpay-container .input-with-icon input,
.xpay-container .input-with-icon textarea {
    padding: 10px 12px 10px 40px;
}

/* Montos sugeridos: badges pequeños, sin icono, con color suave */
.xpay-container .amount-badges { gap: 8px; }
.xpay-container .amount-badge { padding: 6px 10px; border-radius: 9999px; font-size: 13px; font-weight: 500; background: #f3f4f6; color: var(--text); min-width: auto; }
.xpay-container .amount-badge i { display: none !important; }

/* Paso completado: se oculta si no está activo; se reabre con Editar */

/* Numeración visible en badge del paso (ocultar icono, mantener número) */
.step-badge i { display: none; }
.step-badge .step-number { font-weight: 700; font-size: 16px; }

/* Cuando el paso está completado, mostrar badge en verde */
.form-section.completed .step-badge { background: #16a34a; }
.form-section.completed .step-badge .step-number { color: #fff; }

/* Pasos: mantener 1 columna también en desktop; mobile sin cambios */
.payment-form { display: grid; grid-template-columns: 1fr; gap: 12px; align-items: start; }
@media (max-width: 900px) { .payment-form { grid-template-columns: 1fr; } .form-row { grid-template-columns: 1fr; } }

/* Ocultar descripción en el resumen inline del Paso 2 (solo email allí) */
#summary-step-2 .chip-description { display: none !important; }

/* Botón Editar con estilo de enlace */
.link-edit { font-weight: 600; }


.xpay-container .payment-methods,
.xpay-container .accounts-grid,
.xpay-container .summary-details {
    display: grid;
    gap: 12px;
}

/* Métodos de pago: 3 en la misma fila (desktop), 2 en tablet, 1 en móvil */
.xpay-container .payment-methods { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.xpay-container .payment-method { min-width: 0; padding: 10px; font-size: 13px; border: 1px solid #e5e7eb; border-radius: 12px; background: #ffffff; transition: border-color .16s ease, box-shadow .2s ease, transform .06s ease; }
.xpay-container .payment-method:hover { border-color: #cbd5e1; box-shadow: 0 6px 18px rgba(17,24,39,.06); }
.xpay-container .payment-method:active { transform: translateY(1px); }
.xpay-container .payment-method.selected { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
.xpay-container .payment-method .method-box { display: grid; gap: 4px; }
.xpay-container .payment-method .method-content { min-height: 20px; }
.xpay-container .payment-method .brand-logo { max-height: 18px; width: auto; height: auto; }
.xpay-container .payment-method .method-footer { display: flex; justify-content: flex-start; align-items: center; gap: 4px; font-size: 11px; flex-wrap: nowrap; }
.xpay-container .payment-method .method-footer i { margin-right: 2px; font-size: 11px; }

/* Chips/badges minimalistas dentro de los métodos */
.xpay-container .payment-method .method-fee,
.xpay-container .payment-method .method-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 5px;
    border-radius: 9999px;
    font-weight: 600;
    line-height: 1.05;
    white-space: nowrap;
    font-size: 10px;
}

/* Base neutra (por si faltara alguna regla específica) */
.xpay-container .payment-method .method-fee { background: #f1f5f9; color: #334155; }
.xpay-container .payment-method .method-badge { background: #eef2ff; color: #4338ca; }

/* Comisiones por método */
.xpay-container .payment-method[data-method="card"] .method-fee { background: #fef3c7; color: #b45309; }
.xpay-container .payment-method[data-method="paypal"] .method-fee { background: #ffedd5; color: #9a3412; }
.xpay-container .payment-method .method-fee.method-fee-free { background: #dcfce7; color: #166534; }

/* Estados (instantáneo / pendiente) */
.xpay-container .payment-method .method-badge.badge-instant { background: #dbeafe; color: #1d4ed8; }
.xpay-container .payment-method .method-badge.badge-pending { background: #fef3c7; color: #b45309; }

/* Ajustes responsivos para que no se rompa la línea */
@media (max-width: 480px) {
    /* Header ultra compacto */
    .xpay-header {
        padding: 14px 10px;
        margin-bottom: 20px;
        border-radius: 10px;
    }
    
    .xpay-header::before {
        width: 200px;
        height: 200px;
    }
    
    .xpay-header .header-icon {
        width: 40px;
        height: 40px;
        margin-bottom: 10px;
        border-radius: 10px;
    }
    
    .xpay-header .header-icon i {
        font-size: 20px;
    }
    
    .xpay-header .header-title {
        font-size: 18px;
        margin-bottom: 5px;
    }
    
    .xpay-header .header-subtitle {
        font-size: 12px;
        line-height: 1.5;
    }
    
    .xpay-container .payment-method .method-footer { flex-wrap: wrap; gap: 6px; }
}
.xpay-container .payment-method .check-indicator i { font-size: 16px; }
.xpay-container .payment-method .method-icon { width: 28px; height: 28px; display: grid; place-items: center; }
.xpay-container .payment-method .method-title { margin-left: 6px; font-weight: 700; letter-spacing: .2px; font-size: 11px; }
.xpay-container .payment-method[data-method="card"] .method-title { color: #0284c7; }
.xpay-container .payment-method[data-method="paypal"] .method-title { color: #0c4a6e; }
.xpay-container .payment-method[data-method="transfer"] .method-title { color: #15803d; }
.xpay-container .payment-method .method-icon i { color: #64748b; }
.xpay-container .payment-method[data-method="card"] .method-icon i { color: #0284c7 !important; }
.xpay-container .payment-method[data-method="paypal"] .method-icon i { color: #003087 !important; }
.xpay-container .payment-method[data-method="transfer"] .method-icon i { color: #15803d !important; }

/* Íconos en el progreso */
.xpay-progress .progress-item .dot i { color: #94a3b8; }
.xpay-progress .progress-item.active .dot i { color: #16a34a; }
.xpay-progress .progress-item .num { background: #94a3b8; }
.xpay-progress .progress-item.active .num { background: #16a34a; }
.xpay-container .logo-fallback { display: inline-block; font-weight: 600; color: var(--muted); }
@media (max-width: 900px) {
    .xpay-container .payment-methods { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
    /* Header muy compacto */
    .xpay-header {
        padding: 16px 12px;
        margin-bottom: 24px;
        border-radius: 12px;
    }
    
    .xpay-header .header-icon {
        width: 44px;
        height: 44px;
        margin-bottom: 12px;
        border-radius: 12px;
    }
    
    .xpay-header .header-icon i {
        font-size: 22px;
    }
    
    .xpay-header .header-title {
        font-size: 20px;
        margin-bottom: 6px;
    }
    
    .xpay-header .header-subtitle {
        font-size: 13px;
    }
    
    .xpay-container .payment-methods { grid-template-columns: 1fr; }
}

/* Afinar tamaños internos de tarjetas de pago */
.xpay-container .payment-method .method-header { display: flex; align-items: center; gap: 6px; }
.xpay-container .payment-method .method-footer { display: flex; justify-content: flex-start; gap: 3px; font-size: 10px; align-items: center; flex-wrap: nowrap; }
.xpay-container .payment-method .check-indicator i { font-size: 14px; }
.xpay-container .payment-method .method-icon { width: 24px; height: 24px; display: grid; place-items: center; }

/* Asegurar tamaños mínimos de logos dentro de métodos */
.xpay-container .payment-method .brand-logo { max-height: 14px; width: auto; height: auto; }
.xpay-container .payment-methods .payment-method[data-method="card"] .brand-logo { height: 12px; max-height: 12px; }
.xpay-container .payment-methods .payment-method[data-method="paypal"] .brand-logo { height: 12px; max-height: 12px; }
.xpay-container .payment-methods .payment-method[data-method="transfer"] .brand-logo { height: 12px; max-height: 12px; }

/* Reducir aún más los chips en el bloque inferior para ganar prioridad */
.payment-methods .payment-method .method-fee,
.payment-methods .payment-method .method-badge { font-size: 9px; padding: 1px 4px; gap: 2px; line-height: 1; }

/* Cuentas bancarias: 2 tarjetas por fila (desktop y móvil) con ajustes compactos */
.xpay-container .accounts-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 640px) {
    .xpay-container .accounts-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
}
@media (max-width: 420px) {
    .xpay-container .accounts-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
}

.xpay-container .payment-method,
.xpay-container .account-card {
    padding: 16px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: #fff;
    cursor: pointer;
}

.xpay-container .payment-method:hover,
.xpay-container .payment-method.selected,
.xpay-container .account-card:hover,
.xpay-container .account-card.selected {
    border-color: var(--primary);
    background: var(--primary-soft);
}

.xpay-container .payment-method.active {
    border-color: var(--primary);
    background: var(--primary-soft);
}

/* Selección de cuentas bancarias (visible siempre, seleccionable solo con transferencia) */
.xpay-container .account-card { position: relative; }
.xpay-container .account-card .account-check { position: absolute; top: 8px; right: 8px; display: none; color: #16a34a; font-size: 18px; }
.xpay-container .account-card.selected .account-check { display: inline-flex; }
/* Mantener el input radio sin afectar el layout */
.xpay-container .account-card .account-radio { position: absolute; opacity: 0; pointer-events: none; width: 0; height: 0; }

/* Cuando no es seleccionable (no método transferencia), ocultar radios y anular interacción */
.xpay-container .xpay-accounts:not(.selectable) .account-radio { display: none !important; }
.xpay-container .xpay-accounts:not(.selectable) .account-card { cursor: default; }
.xpay-container .xpay-accounts:not(.selectable) .account-card,
.xpay-container .xpay-accounts:not(.selectable) .account-card * { pointer-events: none; }
.xpay-container .xpay-accounts.selectable .account-card,
.xpay-container .xpay-accounts.selectable .account-card * { pointer-events: auto; }

.xpay-container .account-holder { font-weight: 700; font-size: 13px; display: flex; align-items: center; gap: 8px; color: #0f172a; }

.xpay-container .account-meta { margin-top: 6px; list-style: none; padding: 0; color: #334155; font-size: 12.5px; }

/* Compactar tarjetas de cuentas y logos */
.xpay-container .account-card { display: grid; grid-template-columns: 1fr; gap: 8px; }
.xpay-container .account-card .account-title { display: flex; align-items: center; justify-content: center; gap: 8px; }
.xpay-container .account-card .bank.only-logo { margin-inline: auto; }
.xpay-container .account-card .bank.only-logo { display: inline-flex; align-items: center; gap: 4px; padding: 3px 5px; border: 0; border-radius: 8px; background: transparent; }
.xpay-container .account-card .brand-logo { height: 18px; max-height: 18px; width: auto; filter: none; opacity: 1; image-rendering: -webkit-optimize-contrast; image-rendering: crisp-edges; }
@media (max-width: 640px) {
    .xpay-container .account-card { padding: 12px; }
    .xpay-container .account-card .brand-logo { height: 14px; max-height: 14px; }
    .xpay-container .holder-badge { font-size: 10.5px; padding: 2px 6px; }
    .xpay-container .account-holder { font-size: 12.5px; }
}
@media (max-width: 480px) {
    .xpay-container .account-card { padding: 10px; }
    .xpay-container .account-card .brand-logo { height: 12px; max-height: 12px; }
    .xpay-container .holder-badge { font-size: 10px; padding: 2px 5px; }
    .xpay-container .account-holder { font-size: 12px; }
}
.xpay-container .account-card:hover .brand-logo { transform: none; filter: none; opacity: 1; }

/* Badges por banco (compactos) */
.xpay-container .holder-badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 6px; border-radius: 9999px; font-size: 11px; font-weight: 800; letter-spacing: .2px; line-height: 1.1; }
.xpay-container .holder-badge i { font-size: 11px; }
.xpay-container .holder-badge--bcp { background: #e0f2fe; color: #075985; border: 1px solid #bae6fd; }
.xpay-container .holder-badge--interbank { background: #dcfce7; color: #166534; border: 1px solid #bbf7d0; }
.xpay-container .holder-badge--wu { background: #fef3c7; color: #92400e; border: 1px solid #fde68a; }
.xpay-container .holder-badge--paypal { background: #dbeafe; color: #1d4ed8; border: 1px solid #bfdbfe; }

/* Lista de datos con copiar */
.xpay-container .account-meta .meta-item { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 8px; padding: 6px 8px; border: 1px dashed #e5e7eb; border-radius: 8px; margin-bottom: 6px; background: #f8fafc; }
.xpay-container .account-meta .meta-item:hover { background: #f1f5f9; }
.xpay-container .account-meta .meta-label { color: #475569; font-weight: 700; font-size: 12px; }
.xpay-container .account-meta .meta-value { color: #0f172a; word-break: break-word; }
.xpay-container .copy-btn { display: inline-flex; align-items: center; justify-content: center; gap: 4px; padding: 2px 5px; border-radius: 8px; border: 1px solid #e5e7eb; background: #ffffff; color: #0f172a; cursor: pointer; transition: all .16s ease; font-size: 10.5px; line-height: 1; }
.xpay-container .copy-btn i { color: #334155; font-size: 11px; }
.xpay-container .copy-btn:hover { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); color: var(--primary); }
.xpay-container .copy-btn:active { transform: translateY(1px); }

/* Asegurar que el botón de copiar funcione aunque la sección no sea seleccionable o esté deshabilitada */
.xpay-container .xpay-accounts:not(.selectable) .copy-btn, .xpay-container .xpay-accounts.disabled .copy-btn { pointer-events: auto !important; }

.xpay-container .summary-card { 
    position: sticky; 
    top: 32px; 
}

.xpay-container .summary-row {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    color: var(--muted);
    padding: 6px 0;
    line-height: 1.4;
}

/* Mejora visual del bloque resumen */
.xpay-container .summary-card {
    border: 1px solid #e5e7eb;
    box-shadow: 0 6px 18px rgba(17, 24, 39, 0.06);
    padding: 16px;
}
.xpay-container .summary-card h2 { color: #0f172a; font-size: 17px; margin-bottom: 10px; }
.xpay-container .summary-card h2 i { color: var(--primary); font-size: 18px; }
.xpay-container .summary-row .label { color: #334155; font-weight: 500; display: inline-flex; align-items: center; gap: 5px; font-size: 13px; }
.xpay-container .summary-row .label i { color: var(--primary); font-size: 14px; }
.xpay-container .summary-row .value { color: #0f172a; font-weight: 600; font-size: 13px; max-width: 65%; text-align: right; word-break: break-word; }
.xpay-container .summary-details { gap: 6px; }

/* Estado pendiente del resumen */
.xpay-container .summary-pending-state {
    padding: 20px 16px;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border: 2px dashed #cbd5e1;
    border-radius: 12px;
    text-align: center;
    margin-top: 8px;
}

.xpay-container .pending-icon {
    margin-bottom: 12px;
}

.xpay-container .pending-icon i {
    font-size: 32px;
    color: var(--primary);
    opacity: 0.8;
}

.xpay-container .pending-steps {
    display: flex;
    flex-direction: column;
    gap: 8px;
    text-align: left;
}

.xpay-container .pending-step {
    font-size: 13px;
    font-weight: 500;
    color: #475569;
    padding: 8px 12px;
    background: white;
    border-radius: 8px;
    border-left: 3px solid var(--primary);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    transition: all 0.2s ease;
}

.xpay-container .pending-step:hover {
    transform: translateX(2px);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

/* Desglose de comisión: líneas pequeñas bajo el monto */
/* (Depurado) Reglas globales de commission-lines eliminadas; se aplican en contexto */

/* Fila de comisión con despliegue */
.xpay-container .summary-row-commission { align-items: flex-start; }
.xpay-container .summary-row-commission .commission-toggle {
    margin-right: 6px;
    cursor: pointer;
    color: var(--primary);
}
.xpay-container .summary-row-commission .commission-toggle:focus {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
    border-radius: 4px;
}

/* Panel deslizante de comisión */
.xpay-container .summary-row-commission { display: flex; justify-content: space-between; align-items: center; gap: 8px; position: relative; flex-wrap: nowrap; }
.xpay-container .summary-row-commission .commission-label-toggle { cursor: pointer; display: inline-flex; align-items: center; gap: 6px; flex: 1; }
.xpay-container .summary-row-commission .value { display: inline-flex; align-items: center; flex-shrink: 0; }
.xpay-container .summary-row-commission .commission-label-toggle:focus { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 4px; }
.xpay-container .summary-row-commission .commission-panel { display: none; }
.xpay-container .summary-row-commission .commission-lines { display: grid; gap: 4px; font-weight: 600; color: #0f172a; }
.xpay-container .summary-row-commission .commission-lines div { font-size: 12.5px; line-height: 1.2; }
.xpay-container .summary-row-commission .commission-note { margin: 6px 0 2px; font-size: 12px; color: #475569; line-height: 1.35; }
.xpay-container .summary-row-commission .summary-badge { font-size: 10px; padding: 2px 6px; }

.xpay-container .summary-total {
    margin-top: 10px;
    padding: 12px 14px;
    border-radius: 8px;
    background: var(--primary-soft);
    color: var(--primary);
    font-size: 16px;
    font-weight: 600;
}
.xpay-container .summary-total .label { font-size: 15px; }
.xpay-container .summary-total .value { font-size: 16px; }

/* Popover de detalle de comisión (anclado a la fila) */
.xpay-container .xpay-popover {
    position: absolute;
    right: 0;
    top: auto;
    bottom: calc(100% + 8px); /* por defecto hacia arriba */
    width: min(380px, 92%);
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    box-shadow: 0 16px 40px rgba(2,6,23,.14);
    z-index: 20;
    overflow: hidden;
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity .16s ease, transform .16s ease;
}
.xpay-container .xpay-popover.show { opacity: 1; transform: translateY(0); }
.xpay-container .xpay-popover.placement-bottom { top: calc(100% + 8px); bottom: auto; transform: translateY(6px); }
.xpay-container .xpay-popover-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 10px;
    border-bottom: 1px solid #e5e7eb;
}
.xpay-container .xpay-popover-title {
    font-weight: 700;
    color: #0f172a;
    font-size: 13px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.xpay-container .xpay-popover-close {
    border: none;
    background: none;
    color: #334155;
    cursor: pointer;
    padding: 6px;
    border-radius: 8px;
}
.xpay-container .xpay-popover-close:hover { background: #f1f5f9; }
.xpay-container .xpay-popover-close i { font-size: 14px; }
.xpay-container .xpay-popover-body { padding: 10px; }
.xpay-container .xpay-popover-body .commission-lines { gap: 6px; }
.xpay-container .xpay-popover-body .commission-note { margin-top: 8px; }

.xpay-container .summary-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
}

.xpay-container .btn-primary {
    padding: 12px 16px;
    border-radius: 8px;
    border: none;
    background: var(--primary);
    color: #fff;
    font-weight: 600;
    cursor: pointer;
}

.xpay-container .btn-primary:hover { background: #1f3fb5; }

.xpay-container .inline-summary,
.xpay-container .edit-actions {
    display: flex;
    gap: 12px;
    align-items: center;
    font-size: 14px;
}

.xpay-container .link-edit {
    border: none;
    background: none;
    color: var(--primary);
    cursor: pointer;
}

.xpay-container .hidden { display: none !important; }

.xpay-container .toast {
    position: fixed;
    bottom: 24px;
    right: 24px;
    background: var(--text);
    color: #fff;
    padding: 16px 20px;
    border-radius: 8px;
    transform: translateY(calc(100% + 24px));
    transition: transform 0.4s ease;
    z-index: 9999;
}

.xpay-container .toast.show {
    transform: translateY(0);
}

/* Estados de cuentas bancarias */
.xpay-container .xpay-accounts.disabled {
    opacity: 0.55;
}
.xpay-container .xpay-accounts.disabled * { pointer-events: none; }
/* Evitar salto de layout: usar outline en vez de border cuando se resalta por Transferencia */
.xpay-container .xpay-accounts.highlight { outline: 2px solid var(--primary); border-radius: 8px; }

/* Aviso para seleccionar cuenta bancaria (solo con Transferencia) */
.xpay-container .accounts-prompt {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    margin: 10px 0 14px;
    border-left: 4px solid var(--primary);
    border: 1px solid rgba(37, 99, 235, 0.25);
    border-radius: 8px;
    background: rgba(37, 99, 235, 0.09);
    color: #1e3a8a; /* azul más notorio */
    font-size: 15px;
    font-weight: 600;
}

/* Logos compactos en Transferencia: 4 en la misma fila, tamaños mínimos */
.xpay-container .payment-method[data-method="transfer"] .method-brands { display: flex; align-items: center; gap: 6px; flex-wrap: nowrap; opacity: .95; }
.xpay-container .payment-method[data-method="transfer"] .brand-logo { max-height: 14px; filter: saturate(0.85); }
.xpay-container .payment-method[data-method="transfer"] .brand-logo[alt="Western Union"] { max-height: 14px; }
.xpay-container .payment-method[data-method="card"] .brand-logo { max-height: 16px; }
.xpay-container .payment-method[data-method="paypal"] .brand-logo { max-height: 16px; }
.xpay-container .accounts-prompt[hidden] { display: none !important; }
.xpay-container .accounts-prompt i { color: var(--primary); font-size: 18px; }

/* Pequeña animación para llamar la atención cuando aparece */
@keyframes xpayPulse {
    0% { box-shadow: 0 0 0 0 rgba(37, 99, 235, 0.45); }
    70% { box-shadow: 0 0 0 10px rgba(37, 99, 235, 0); }
    100% { box-shadow: 0 0 0 0 rgba(37, 99, 235, 0); }
}
.xpay-container .accounts-prompt.pulse { animation: xpayPulse 1.6s ease-out 1; }

/* --- Overrides finales para tamaños minimalistas y ajuste específico de PayPal --- */
.xpay-container .payment-methods .payment-method .method-footer {
    gap: 2px !important;
    font-size: 9px !important;
}
.xpay-container .payment-methods .payment-method .method-footer i {
    font-size: 9px !important;
    margin-right: 2px !important;
}
.xpay-container .payment-methods .payment-method .method-fee,
.xpay-container .payment-methods .payment-method .method-badge {
    font-size: 8px !important;
    padding: 1px 3px !important;
    gap: 2px !important;
    line-height: 1 !important;
}

/* Aumentar solo el logo de PayPal dentro de Métodos de pago */
.xpay-container .payment-methods .payment-method[data-method="paypal"] .brand-logo {
    height: 18px !important;
    max-height: 18px !important;
}

/* Utilidades generales de iconos y colores */
/* Evitar reglas demasiado globales que apaguen colores de marca */
/* Quitar color global por defecto; se aplican colores por contexto */
.xpay-container .text-primary { color: var(--primary) !important; }
.xpay-container .text-success { color: #16a34a !important; }
.xpay-container .text-info { color: #0ea5e9 !important; }
.xpay-container .text-warning { color: #b45309 !important; }
.xpay-container .text-danger { color: #dc2626 !important; }
.xpay-container .icon-sm { font-size: 12px; }
.xpay-container .icon-md { font-size: 16px; }
.xpay-container .icon-lg { font-size: 20px; }

/* Afinar iconos en labels y acciones */
.xpay-container .input-label i { color: var(--primary); }
.xpay-container .link-edit i { color: var(--primary); }

/* Badges de opcional/requerido en labels */
.xpay-container .optional-badge,
.xpay-container .required-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 500;
    margin-left: auto;
}

.xpay-container .optional-badge {
    background: #f1f5f9;
    color: #64748b;
    border: 1px solid #e2e8f0;
}

.xpay-container .required-badge {
    background: #fef2f2;
    color: #dc2626;
    border: 1px solid #fecaca;
}

.xpay-container .required-badge i {
    font-size: 8px;
}

/* ================== Mejora visual: iconos y textos pequeños ================== */
/* Iconos un poco más alineados y legibles */
.xpay-container i.bi { vertical-align: -2px; }
.xpay-container .xpay-card h2 i,
.xpay-container .summary-card h2 i { color: var(--primary); font-size: 18px; }

/* Chips reutilizables (para montos y datos inline) */
.xpay-container .chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 9999px;
    border: 1px solid #e5e7eb;
    background: #f8fafc;
    color: #0f172a;
    font-weight: 600;
    font-size: 12.5px;
    line-height: 1.2;
}
.xpay-container .chip i { color: var(--primary); font-size: 14px; }

/* Badges de resumen (Summary) */
.xpay-container .summary-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 7px;
    border-radius: 9999px;
    font-weight: 600;
    font-size: 11px;
    line-height: 1.1;
}
.xpay-container .summary-badge i { font-size: 12px; }
.xpay-container .summary-badge.badge-info { background: #e0f2fe; color: #075985; }
.xpay-container .summary-badge.badge-warning { 
    background: #fef3c7; 
    color: #92400e; 
    font-size: 9px !important;
    padding: 2px 5px !important;
    font-weight: 600;
    gap: 2px;
    line-height: 1.3;
    white-space: nowrap;
}
.xpay-container .summary-badge.badge-warning i { font-size: 8px !important; }
.xpay-container .summary-badge.badge-success { background: #dcfce7; color: #166534; }
.xpay-container .summary-badge.badge-danger { background: #fee2e2; color: #991b1b; }

/* Mejoras de legibilidad en los métodos de pago */
.xpay-container .payment-methods .payment-method .method-footer {
    gap: 4px !important;
    font-size: 11px !important; /* antes 9px, ahora más legible */
}
.xpay-container .payment-methods .payment-method .method-fee,
.xpay-container .payment-methods .payment-method .method-badge {
    font-size: 10px !important; /* antes 8px */
    padding: 2px 6px !important;
    gap: 4px !important;
}
.xpay-container .payment-method .method-title { font-size: 12px; letter-spacing: .2px; }

/* Montos sugeridos un poco más visibles */
.xpay-container .amount-badge { font-size: 14px; padding: 7px 12px; }

/* Input labels y pequeños hints */
.xpay-container .input-label { font-size: 14px; color: #334155; }

/* Botón editar con foco visible */
.xpay-container .link-edit { color: var(--primary); }
.xpay-container .link-edit:hover { text-decoration: underline; }
.xpay-container .link-edit:focus { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 4px; }

/* ===================== */
/* Transferencia minimal */
/* ===================== */
.xpay-transfer-section { display: grid; gap: 6px; }
.xpay-transfer-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.xpay-transfer-label { font-size: 13px; font-weight: 600; color: var(--text); display: inline-flex; align-items: center; gap: 6px; }
.xpay-required { color: #dc2626; }
.xpay-help-text { font-size: 12px; color: var(--muted); line-height: 1.4; margin: 2px 0 0; }
.xpay-space { display: grid; gap: 10px; margin-top: 8px; }
.xpay-container #transfer-payment-container, .xpay-container #transfer-voucher-form { max-width: 100%; overflow: hidden; }
.xpay-input { width: 100%; padding: 10px 12px; border: 1px solid #e5e7eb; border-radius: 10px; background: #fff; font-size: 14px; }
.xpay-input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
.xpay-icon-btn { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 9999px; border: 1px solid #e5e7eb; background: #fff; color: #6b7280; }
.xpay-icon-btn:hover { background: #f9fafb; color: #374151; }
.xpay-text-center { text-align: center; }

.xpay-img-preview { max-width: 100%; height: auto; border-radius: 10px; border: 1px solid #e5e7eb; }
.xpay-bank-box { background: #f9fafb; border: 1px solid #e5e7eb; border-radius: 10px; padding: 10px; }

/* utilidad para ocultar (scoped) */
.xpay-container .hidden { display: none !important; }

/* Botón primario coherente con el sitio */
#transfer-submit-button.btn-primary { display: inline-flex; align-items: center; gap: 6px; padding: 10px 14px; border-radius: 10px; background: var(--primary); color: #fff; border: none; font-weight: 600; }
#transfer-submit-button.btn-primary[disabled] { opacity: .6; cursor: not-allowed; }

/* Modales de transferencia */
.xpay-modal { position: fixed; inset: 0; display: grid; place-items: center; background: rgba(0,0,0,.45); z-index: 10000; }
.xpay-modal.hidden { display: none !important; }
.xpay-modal__content { width: 100%; max-width: 640px; background: #fff; border-radius: 12px; border: 1px solid #e5e7eb; overflow: hidden; }
.xpay-modal__content { position: relative; z-index: 10001; }
.xpay-modal#transaction-help-modal .xpay-modal__content { max-width: 560px; }
.xpay-modal__header { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px; border-bottom: 1px solid #e5e7eb; background: #f3f4f6; }
.xpay-modal__title { font-size: 14px; font-weight: 700; color: #111827; display: inline-flex; align-items: center; gap: 8px; }
.xpay-modal__close { background: transparent; border: none; color: #6b7280; cursor: pointer; }
.xpay-modal__body { padding: 12px; display: grid; gap: 10px; }

/* Animación para el ícono de carga */
@keyframes xspin { to { transform: rotate(360deg); } }
.animate-spin { animation: xspin 1s linear infinite; }

/* Vista previa de voucher en tamaño pequeño */
#voucher-preview { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
#voucher-preview .xpay-img-preview { width: 160px; max-width: 100%; height: auto; border-radius: 8px; border: 1px solid #e5e7eb; }
@media (max-width: 480px) {
    #voucher-preview .xpay-img-preview { width: 140px; max-width: 100%; }
}

/* Subida minimalista de comprobante */
.xpay-upload { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.xpay-upload-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 10px; border: 1px dashed #cbd5e1; background: #fff; color: #334155; font-weight: 600; cursor: pointer; }
.xpay-upload-btn:hover { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); color: var(--primary); }
.xpay-upload .visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.xpay-upload-meta { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.xpay-file-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 9999px; border: 1px solid #e5e7eb; background: #f8fafc; color: #0f172a; font-weight: 600; font-size: 12.5px; }
.xpay-file-chip i { color: var(--primary); font-size: 14px; }
.xpay-replace-btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 10px; border: 1px solid #e5e7eb; background: #fff; color: #334155; font-weight: 600; cursor: pointer; font-size: 12.5px; }
.xpay-replace-btn:hover { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); color: var(--primary); }
/* Estados deshabilitados para controles de transferencia */
#voucher-upload-trigger[disabled], #voucher-upload-trigger[aria-disabled="true"],
#voucher-replace-btn[disabled], #voucher-replace-btn[aria-disabled="true"],
#transfer-submit-button[disabled], #transfer-submit-button[aria-disabled="true"] {
    opacity: 0.55;
    cursor: not-allowed;
    pointer-events: none;
    filter: saturate(0.6);
}

/* ========================= */
/* Modo móvil: resumen más compacto */
/* ========================= */
@media (max-width: 640px) {
    .xpay-container { padding: 20px 12px; }
    .xpay-container .summary-card { padding: 14px; }
    .xpay-container .summary-card h2 { font-size: 16px; gap: 8px; }
    .xpay-container .summary-card h2 i { font-size: 16px; }
    .xpay-container .summary-row { font-size: 13px; }
    .xpay-container .summary-row .label { gap: 4px; }
    .xpay-container .summary-row .label i { font-size: 14px; }
    .xpay-container .summary-details { gap: 8px; }
    .xpay-container .summary-total { padding: 12px; font-size: 16px; }
    .xpay-container .chip { padding: 3px 8px; font-size: 11.5px; }
    .xpay-container .summary-badge { padding: 3px 7px; font-size: 11px; }
}

/* Móvil pequeño: ultra-compacto */
@media (max-width: 480px) {
    .xpay-container .summary-card { padding: 12px; }
    .xpay-container .summary-card h2 { font-size: 15px; }
    .xpay-container .summary-row { font-size: 12.5px; }
    .xpay-container .summary-total { padding: 10px; font-size: 15px; }
    .xpay-container .chip { padding: 3px 7px; font-size: 11px; }
    .xpay-container .summary-badge { padding: 3px 6px; font-size: 10.5px; }
    /* Transferencia: inputs y vistas previas más pequeñas */
    .xpay-input { padding: 9px 11px; font-size: 13px; }
    .xpay-transfer-label { font-size: 12.5px; }
    #voucher-preview .xpay-img-preview { width: 120px; max-width: 120px; }
    .xpay-file-chip { font-size: 11.5px; padding: 5px 8px; }
    .xpay-replace-btn { font-size: 11.5px; padding: 5px 8px; }
}

@media (max-width: 360px) {
    .xpay-container .summary-card { padding: 10px; }
    .xpay-container .summary-card h2 { font-size: 14px; }
    .xpay-container .summary-row { font-size: 12px; }
    .xpay-container .summary-total { padding: 8px; font-size: 14px; }
    .xpay-container .chip { font-size: 10.5px; padding: 2px 6px; }
    .xpay-container .summary-badge { font-size: 10px; padding: 2px 6px; }
    .xpay-input { padding: 8px 10px; font-size: 12.5px; }
}

/* === Izipay Form Styles === */
#izipay-container {
    width: 100%;
    margin: 0 auto;
    padding: 0;
}

.izipay-form-wrapper {
    background: #ffffff;
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 20px;
    margin-top: 0;
    margin-bottom: 20px;
}

.izipay-header {
    margin-bottom: 15px;
    padding-bottom: 10px;
}

.izipay-header h3 {
    font-size: 18px !important;
    font-weight: 700;
    color: #333;
    margin: 0 0 5px 0;
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: "News Cycle", "Arial Narrow Bold", sans-serif;
}

.izipay-header h3 i {
    color: var(--primary);
}

.izipay-header p {
    font-size: 14px;
    color: var(--muted);
    margin: 0;
}

#izipay-form-container {
    min-height: 280px;
    margin: 15px 0;
    display: flex;
    justify-content: center;
}

.izipay-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 40px 20px;
    color: var(--muted);
    font-size: 14px;
}

.izipay-loading i {
    font-size: 20px;
    animation: rotate 1s linear infinite;
}

@keyframes rotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.izipay-footer {
    text-align: center;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--border);
}

.izipay-footer p {
    font-size: 13px;
    color: var(--muted);
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.izipay-footer i {
    color: #10b981;
}

/* Estilos personalizados para el formulario embebido de Izipay */
.kr-embedded {
    width: 100%;
    max-width: 600px;
}

/* Inyectar estilos del formulario embebido de Izipay */
#micuentawebstd_rest_wrapper {
    display: flex;
    justify-content: center;
    width: 100%;
}

/* Responsive */
@media (max-width: 640px) {
    .izipay-form-wrapper {
        padding: 15px;
    }
    
    .izipay-header h3 {
        font-size: 16px !important;
    }
    
    #izipay-form-container {
        min-height: 240px;
    }
}

/* ===================================
   SECCIÓN DE POLÍTICAS Y CONDICIONES
   =================================== */

.xpay-policies {
    width: 100%;
    background: #f8fafc;
    padding: 3rem 0 4rem;
    margin-top: 2rem;
}

.policies-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

.policies-header {
    text-align: center;
    margin-bottom: 2.5rem;
}

.policies-title {
    font-size: 2rem;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 0.5rem;
    letter-spacing: -0.02em;
}

.policies-subtitle {
    font-size: 0.9375rem;
    color: #64748b;
    font-weight: 400;
}

.policies-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
    margin-bottom: 2rem;
    align-items: stretch;
}

.policy-card {
    background: #ffffff;
    border-radius: 12px;
    padding: 1.75rem;
    border: 1px solid #e2e8f0;
    transition: all 0.2s ease;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.policy-card:hover {
    border-color: #cbd5e1;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    transform: translateY(-2px);
}

.policy-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 10px;
    margin-bottom: 1rem;
}

.policy-icon i {
    font-size: 1.25rem;
}

.policy-icon-success {
    background: #dcfce7;
    color: #16a34a;
}

.policy-icon-warning {
    background: #fef3c7;
    color: #d97706;
}

.policy-icon-info {
    background: #dbeafe;
    color: #2563eb;
}

.policy-icon-primary {
    background: #e0f2fe;
    color: #0284c7;
}

.policy-icon-secondary {
    background: #f3e8ff;
    color: #9333ea;
}

.policy-icon-dark {
    background: #f1f5f9;
    color: #475569;
}

.policy-title {
    font-size: 1.0625rem;
    font-weight: 600;
    color: #0f172a;
    margin-bottom: 0.75rem;
    letter-spacing: -0.01em;
}

.policy-text {
    font-size: 0.875rem;
    color: #475569;
    line-height: 1.65;
    flex: 1;
}

/* CTA WhatsApp */
.policies-cta {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    border-radius: 16px;
    padding: 2rem;
    margin-top: 2rem;
}

.cta-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
}

.cta-text h3 {
    font-size: 1.5rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 0.5rem;
}

.cta-text p {
    font-size: 0.9375rem;
    color: rgba(255, 255, 255, 0.9);
    margin: 0;
}

.whatsapp-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 2rem;
    background: #ffffff;
    color: #10b981;
    border-radius: 12px;
    font-weight: 600;
    font-size: 1rem;
    text-decoration: none;
    white-space: nowrap;
    transition: all 0.2s ease;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.whatsapp-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
    color: #059669;
}

.whatsapp-btn:active {
    transform: translateY(0);
}

.whatsapp-btn i {
    font-size: 1.5rem;
}

/* Responsivo */
@media (max-width: 1024px) {
    .policies-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }
}

@media (max-width: 900px) {
    .xpay-policies {
        padding: 2.5rem 0 3rem;
    }
    
    .policies-container {
        padding: 0 1rem;
    }
    
    .policies-title {
        font-size: 1.75rem;
    }
    
    .policies-subtitle {
        font-size: 0.875rem;
    }
    
    .policies-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.875rem;
    }
    
    .policy-card {
        padding: 1.25rem;
    }
    
    .policy-icon {
        width: 2.25rem;
        height: 2.25rem;
        margin-bottom: 0.75rem;
    }
    
    .policy-icon i {
        font-size: 1.125rem;
    }
    
    .policy-title {
        font-size: 0.9375rem;
        margin-bottom: 0.5rem;
    }
    
    .policy-text {
        font-size: 0.8125rem;
        line-height: 1.55;
    }
    
    .cta-content {
        flex-direction: column;
        text-align: center;
        gap: 1.25rem;
    }
    
    .cta-text h3 {
        font-size: 1.25rem;
    }
    
    .cta-text p {
        font-size: 0.875rem;
    }
    
    .whatsapp-btn {
        width: 100%;
        justify-content: center;
        padding: 0.875rem 1.5rem;
        font-size: 0.9375rem;
    }
}

@media (max-width: 640px) {
    .xpay-policies {
        padding: 2rem 0 2.5rem;
    }
    
    .policies-header {
        margin-bottom: 1.5rem;
    }
    
    .policies-title {
        font-size: 1.5rem;
        margin-bottom: 0.375rem;
    }
    
    .policies-subtitle {
        font-size: 0.8125rem;
    }
    
    .policies-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.625rem;
    }
    
    .policy-card {
        padding: 1rem;
    }
    
    .policy-icon {
        width: 2rem;
        height: 2rem;
        border-radius: 8px;
        margin-bottom: 0.625rem;
    }
    
    .policy-icon i {
        font-size: 1rem;
    }
    
    .policy-title {
        font-size: 0.875rem;
        font-weight: 600;
        margin-bottom: 0.375rem;
    }
    
    .policy-text {
        font-size: 0.75rem;
        line-height: 1.5;
    }
    
    .policies-cta {
        padding: 1.25rem;
        border-radius: 12px;
    }
    
    .cta-content {
        gap: 1rem;
    }
    
    .cta-text h3 {
        font-size: 1.125rem;
        margin-bottom: 0.375rem;
    }
    
    .cta-text p {
        font-size: 0.8125rem;
        line-height: 1.4;
    }
    
    .whatsapp-btn {
        padding: 0.75rem 1.25rem;
        font-size: 0.875rem;
    }
    
    .whatsapp-btn i {
        font-size: 1.25rem;
    }
}

@media (max-width: 480px) {
    .xpay-policies {
        padding: 1.5rem 0 2rem;
    }
    
    .policies-container {
        padding: 0 0.875rem;
    }
    
    .policies-title {
        font-size: 1.375rem;
    }
    
    .policies-grid {
        gap: 0.5rem;
    }
    
    .policy-card {
        padding: 0.875rem;
    }
    
    .policy-icon {
        width: 1.875rem;
        height: 1.875rem;
    }
    
    .policy-icon i {
        font-size: 0.9375rem;
    }
    
    .policy-title {
        font-size: 0.8125rem;
    }
    
    .policy-text {
        font-size: 0.6875rem;
        line-height: 1.45;
    }
    
    .policies-cta {
        padding: 1rem;
    }
    
    .cta-text h3 {
        font-size: 1rem;
    }
    
    .cta-text p {
        font-size: 0.75rem;
    }
    
    .whatsapp-btn {
        padding: 0.625rem 1rem;
        font-size: 0.8125rem;
        gap: 0.5rem;
    }
    
    .whatsapp-btn i {
        font-size: 1.125rem;
    }
}

/* ===================================
   OPTIMIZACIÓN STEP-2 MÓVIL
   =================================== */

@media (max-width: 900px) {
    /* Labels más compactos */
    .xpay-container .input-label {
        font-size: 11px;
        gap: 4px;
    }
    
    /* Inputs más pequeños */
    .xpay-container .input-with-icon input,
    .xpay-container .input-with-icon textarea {
        padding: 7px 8px 7px 32px;
        font-size: 12px;
    }
    
    .xpay-container .input-with-icon i {
        left: 10px;
        font-size: 12px;
    }
    
    /* Hints más discretos */
    .xpay-container .input-hint {
        font-size: 10px;
        padding: 5px 6px;
        margin-top: 3px;
    }
    
    /* Badges de opcional/requerido más pequeños */
    .optional-badge,
    .required-badge {
        font-size: 9px;
        padding: 1px 4px;
    }
    
    /* Amount section */
    .xpay-container .amount-section .input-label {
        font-size: 11px;
    }
    
    /* Custom amount input */
    .xpay-container .custom-amount-input {
        margin-bottom: 10px;
    }
}

@media (max-width: 640px) {
    /* Ocultar tarjetas de ayuda en móvil */
    .xpay-container .input-hint {
        display: none !important;
    }
    
    /* Labels aún más compactos */
    .xpay-container .input-label {
        font-size: 10px;
        gap: 3px;
        font-weight: 600;
    }
    
    .xpay-container .input-label i {
        font-size: 10px;
    }
    
    /* Inputs muy compactos */
    .xpay-container .input-with-icon input,
    .xpay-container .input-with-icon textarea {
        padding: 6px 8px 6px 28px;
        font-size: 11px;
        border-radius: 6px;
    }
    
    .xpay-container .input-with-icon i {
        left: 8px;
        font-size: 11px;
    }
    
    /* Form row más compacto */
    .xpay-container .form-row {
        gap: 8px;
    }
    
    /* Badges inline más pequeños */
    .optional-badge,
    .required-badge {
        font-size: 8px;
        padding: 1px 3px;
    }
    
    .optional-badge i,
    .required-badge i {
        font-size: 7px;
    }
    
    /* Form section padding reducido */
    .xpay-container .form-section {
        padding: 10px;
        gap: 8px;
    }
    
    /* Amount badges más pequeños */
    .xpay-container .amount-badge {
        padding: 4px 7px;
        font-size: 11px;
    }
    
    /* Custom amount input */
    .xpay-container .custom-amount-input {
        margin-bottom: 8px;
    }
    
    /* Amount section label */
    .xpay-container .amount-section .input-label {
        font-size: 10px;
        margin-bottom: 6px;
    }
}

@media (max-width: 480px) {
    /* Labels ultra compactos */
    .xpay-container .input-label {
        font-size: 9px;
        gap: 3px;
    }
    
    .xpay-container .input-label i {
        font-size: 9px;
    }
    
    /* Inputs ultra compactos */
    .xpay-container .input-with-icon input,
    .xpay-container .input-with-icon textarea {
        padding: 5px 6px 5px 26px;
        font-size: 10px;
        border-radius: 5px;
    }
    
    .xpay-container .input-with-icon i {
        left: 7px;
        font-size: 10px;
    }
    
    /* Form row muy ajustado */
    .xpay-container .form-row {
        gap: 6px;
    }
    
    /* Badges ultra pequeños */
    .optional-badge,
    .required-badge {
        font-size: 7px;
        padding: 1px 3px;
    }
    
    .optional-badge i,
    .required-badge i {
        font-size: 6px;
    }
    
    /* Section ultra compacta */
    .xpay-container .form-section {
        padding: 8px;
        gap: 6px;
    }
    
    /* Montos sugeridos ultra pequeños */
    .xpay-container .amount-badge {
        padding: 3px 6px;
        font-size: 10px;
    }
    
    .xpay-container .amount-badges {
        gap: 5px;
    }
    
    /* Custom amount muy compacto */
    .xpay-container .custom-amount-input {
        margin-bottom: 6px;
    }
    
    /* Amount section label pequeño */
    .xpay-container .amount-section .input-label {
        font-size: 9px;
        margin-bottom: 5px;
    }
}

/* ===================================
   OPTIMIZACIÓN CUENTAS BANCARIAS MÓVIL
   =================================== */

@media (max-width: 900px) {
    /* Tarjetas de cuenta más compactas */
    .xpay-container .account-card {
        padding: 10px;
    }
    
    /* Titular más pequeño */
    .xpay-container .account-holder {
        font-size: 12px;
        gap: 6px;
    }
    
    /* Meta items más compactos */
    .xpay-container .account-meta {
        font-size: 11px;
        margin-top: 5px;
    }
    
    .xpay-container .account-meta .meta-item {
        padding: 5px 6px;
        gap: 6px;
        margin-bottom: 5px;
    }
    
    .xpay-container .account-meta .meta-label {
        font-size: 10.5px;
    }
    
    .xpay-container .account-meta .meta-value {
        font-size: 11px;
    }
    
    /* Botón copiar más pequeño */
    .xpay-container .copy-btn {
        font-size: 9.5px;
        padding: 2px 4px;
    }
    
    .xpay-container .copy-btn i {
        font-size: 10px;
    }
    
    /* Badges de banco */
    .xpay-container .holder-badge {
        font-size: 10px;
        padding: 2px 5px;
        gap: 3px;
    }
    
    .xpay-container .holder-badge i {
        font-size: 10px;
    }
    
    /* Logo más pequeño */
    .xpay-container .account-card .brand-logo {
        height: 16px;
        max-height: 16px;
    }
}

@media (max-width: 640px) {
    /* Cuentas muy compactas */
    .xpay-container .account-card {
        padding: 8px;
        gap: 6px;
    }
    
    /* Titular reducido */
    .xpay-container .account-holder {
        font-size: 11px;
        gap: 5px;
    }
    
    /* Meta items super compactos */
    .xpay-container .account-meta {
        font-size: 10px;
        margin-top: 4px;
    }
    
    .xpay-container .account-meta .meta-item {
        padding: 4px 5px;
        gap: 5px;
        margin-bottom: 4px;
        border-radius: 6px;
    }
    
    .xpay-container .account-meta .meta-label {
        font-size: 9.5px;
        font-weight: 600;
    }
    
    .xpay-container .account-meta .meta-value {
        font-size: 10px;
        word-break: break-all;
        line-height: 1.3;
    }
    
    /* Botón copiar muy pequeño */
    .xpay-container .copy-btn {
        font-size: 9px;
        padding: 1px 3px;
        border-radius: 4px;
    }
    
    .xpay-container .copy-btn i {
        font-size: 9px;
    }
    
    /* Badges muy pequeños */
    .xpay-container .holder-badge {
        font-size: 9px;
        padding: 1px 4px;
        gap: 2px;
    }
    
    .xpay-container .holder-badge i {
        font-size: 9px;
    }
    
    /* Logo reducido */
    .xpay-container .account-card .brand-logo {
        height: 14px;
        max-height: 14px;
    }
    
    /* Grid de cuentas más ajustado */
    .xpay-container .accounts-grid {
        gap: 8px;
    }
    
    /* Check indicator más pequeño */
    .xpay-container .account-card .account-check {
        font-size: 16px;
        top: 6px;
        right: 6px;
    }
}

@media (max-width: 480px) {
    /* Cuentas ultra compactas */
    .xpay-container .account-card {
        padding: 7px;
        gap: 5px;
    }
    
    /* Titular muy reducido */
    .xpay-container .account-holder {
        font-size: 10px;
        gap: 4px;
    }
    
    /* Meta items mínimos */
    .xpay-container .account-meta {
        font-size: 9px;
        margin-top: 3px;
    }
    
    .xpay-container .account-meta .meta-item {
        padding: 3px 4px;
        gap: 4px;
        margin-bottom: 3px;
    }
    
    .xpay-container .account-meta .meta-label {
        font-size: 8.5px;
    }
    
    .xpay-container .account-meta .meta-value {
        font-size: 9px;
        line-height: 1.25;
    }
    
    /* Botón copiar mínimo */
    .xpay-container .copy-btn {
        font-size: 8px;
        padding: 1px 2px;
    }
    
    .xpay-container .copy-btn i {
        font-size: 8px;
    }
    
    /* Badges mínimos */
    .xpay-container .holder-badge {
        font-size: 8px;
        padding: 1px 3px;
        gap: 2px;
    }
    
    .xpay-container .holder-badge i {
        font-size: 8px;
    }
    
    /* Logo muy pequeño */
    .xpay-container .account-card .brand-logo {
        height: 12px;
        max-height: 12px;
    }
    
    /* Grid super ajustado */
    .xpay-container .accounts-grid {
        gap: 6px;
    }
    
    /* Check más pequeño */
    .xpay-container .account-card .account-check {
        font-size: 14px;
        top: 5px;
        right: 5px;
    }
}

/* ===================================
   OPTIMIZACIÓN MÉTODOS DE PAGO MÓVIL
   =================================== */

@media (max-width: 900px) {
    /* Mantener 3 columnas en tablet */
    .xpay-container .payment-methods {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 5px;
    }
    
    /* Métodos más compactos */
    .xpay-container .payment-method {
        padding: 6px;
        font-size: 11px;
        border-radius: 8px;
    }
    
    .xpay-container .payment-method .method-box {
        gap: 2px;
    }
    
    .xpay-container .payment-method .method-title {
        font-size: 9px;
        margin-left: 3px;
    }
    
    .xpay-container .payment-method .method-icon {
        width: 20px;
        height: 20px;
    }
    
    .xpay-container .payment-method .method-icon i {
        font-size: 13px;
    }
    
    .xpay-container .payment-method .method-footer {
        font-size: 8.5px;
        gap: 2px;
    }
    
    .xpay-container .payment-method .method-footer i {
        font-size: 7.5px;
    }
    
    .xpay-container .payment-method .brand-logo {
        max-height: 11px;
    }
    
    .xpay-container .payment-method .method-fee,
    .xpay-container .payment-method .method-badge {
        font-size: 7px;
        padding: 0px 2px;
    }
}

@media (max-width: 640px) {
    /* FORZAR 3 columnas horizontal en móvil */
    .xpay-container .payment-methods {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 4px;
    }
    
    /* Métodos muy compactos */
    .xpay-container .payment-method {
        padding: 4px;
        font-size: 10px;
        border-radius: 6px;
    }
    
    .xpay-container .payment-method .method-box {
        gap: 1px;
    }
    
    .xpay-container .payment-method .method-title {
        font-size: 8px;
        margin-left: 2px;
        font-weight: 600;
    }
    
    .xpay-container .payment-method .method-icon {
        width: 18px;
        height: 18px;
    }
    
    .xpay-container .payment-method .method-icon i {
        font-size: 12px;
    }
    
    .xpay-container .payment-method .method-footer {
        font-size: 7.5px;
        gap: 1px;
    }
    
    .xpay-container .payment-method .method-footer i {
        font-size: 6.5px;
        margin-right: 1px;
    }
    
    .xpay-container .payment-method .brand-logo {
        max-height: 10px;
    }
    
    .xpay-container .payment-method .method-fee,
    .xpay-container .payment-method .method-badge {
        font-size: 6.5px;
        padding: 0px 2px;
        gap: 1px;
    }
    
    .xpay-container .payment-method .check-indicator i {
        font-size: 11px;
    }
    
    /* Header del método más compacto */
    .xpay-container .payment-method .method-header {
        gap: 3px;
    }
    
    .xpay-container .payment-method .method-content {
        min-height: 14px;
    }
}

@media (max-width: 480px) {
    /* Mantener 3 columnas ultra compactas */
    .xpay-container .payment-methods {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 3px;
    }
    
    /* Métodos ultra compactos */
    .xpay-container .payment-method {
        padding: 3px;
        font-size: 9px;
        border-radius: 5px;
    }
    
    .xpay-container .payment-method .method-box {
        gap: 1px;
    }
    
    .xpay-container .payment-method .method-title {
        font-size: 7px;
        margin-left: 1px;
        font-weight: 600;
    }
    
    .xpay-container .payment-method .method-icon {
        width: 16px;
        height: 16px;
    }
    
    .xpay-container .payment-method .method-icon i {
        font-size: 10px;
    }
    
    .xpay-container .payment-method .method-footer {
        font-size: 6.5px;
        gap: 1px;
    }
    
    .xpay-container .payment-method .method-footer i {
        font-size: 6px;
        margin-right: 0px;
    }
    
    .xpay-container .payment-method .brand-logo {
        max-height: 9px;
    }
    
    .xpay-container .payment-method .method-fee,
    .xpay-container .payment-method .method-badge {
        font-size: 6px;
        padding: 0px 1px;
    }
    
    .xpay-container .payment-method .check-indicator i {
        font-size: 10px;
    }
    
    .xpay-container .payment-method .method-header {
        gap: 2px;
    }
    
    .xpay-container .payment-method .method-content {
        min-height: 12px;
    }
    
    /* Box-shadow más sutil en móvil pequeño */
    .xpay-container .payment-method.selected {
        box-shadow: 0 0 0 1px var(--primary-soft);
    }
}

/* ===================================
   OPTIMIZACIÓN SECCIÓN COMPLETA STEP-2 Y STEP-3
   =================================== */

@media (max-width: 900px) {
    /* Títulos de sección más pequeños */
    .xpay-container .xpay-card h2 {
        font-size: 18px;
    }
    
    .xpay-container .xpay-card h2 i {
        font-size: 16px;
    }
}

@media (max-width: 640px) {
    /* Títulos muy compactos */
    .xpay-container .xpay-card h2 {
        font-size: 16px;
        margin-bottom: 12px;
    }
    
    .xpay-container .xpay-card h2 i {
        font-size: 14px;
    }
    
    /* Card padding reducido */
    .xpay-container .xpay-card {
        padding: 14px;
    }
}

@media (max-width: 480px) {
    /* Títulos mínimos */
    .xpay-container .xpay-card h2 {
        font-size: 14px;
        margin-bottom: 10px;
    }
    
    .xpay-container .xpay-card h2 i {
        font-size: 13px;
    }
    
    /* Card muy compacto */
    .xpay-container .xpay-card {
        padding: 12px;
        border-radius: 10px;
    }
}

/* ===================================
   OPTIMIZACIÓN RESUMEN MÓVIL
   =================================== */

@media (max-width: 900px) {
    /* Summary card más compacto */
    .xpay-container .summary-card {
        padding: 14px;
    }
    
    .xpay-container .summary-card h2 {
        font-size: 16px;
        margin-bottom: 12px;
    }
    
    .xpay-container .summary-card h2 i {
        font-size: 14px;
    }
    
    /* Estado pendiente más compacto */
    .xpay-container .summary-pending-state {
        padding: 16px 12px;
        border-radius: 10px;
    }
    
    .xpay-container .pending-icon {
        margin-bottom: 10px;
    }
    
    .xpay-container .pending-icon i {
        font-size: 28px;
    }
    
    .xpay-container .pending-steps {
        gap: 7px;
    }
    
    .xpay-container .pending-step {
        font-size: 12px;
        padding: 7px 10px;
        border-radius: 7px;
    }
    
    /* Summary rows más pequeños */
    .xpay-container .summary-row {
        font-size: 13px;
        gap: 8px;
    }
    
    .xpay-container .summary-row .label {
        font-size: 12px;
        gap: 5px;
    }
    
    .xpay-container .summary-row .label i {
        font-size: 13px;
    }
    
    .xpay-container .summary-row .value {
        font-size: 13px;
    }
    
    .xpay-container .summary-details {
        gap: 8px;
    }
    
    /* Summary badges */
    .xpay-container .summary-badge {
        font-size: 11px;
        padding: 3px 6px;
    }
    
    /* Transferencia dentro de resumen */
    .xpay-container .xpay-transfer-label {
        font-size: 11px;
    }
    
    .xpay-container .xpay-input {
        font-size: 12px;
        padding: 8px 10px 8px 36px;
    }
    
    .xpay-container .xpay-upload-btn {
        font-size: 12px;
        padding: 8px 14px;
    }
    
    .xpay-container .xpay-help-text {
        font-size: 11px;
    }
}

@media (max-width: 640px) {
    /* Summary muy compacto */
    .xpay-container .summary-card {
        padding: 10px;
    }
    
    .xpay-container .summary-card h2 {
        font-size: 14px;
        margin-bottom: 10px;
    }
    
    .xpay-container .summary-card h2 i {
        font-size: 12px;
    }
    
    /* Estado pendiente muy compacto */
    .xpay-container .summary-pending-state {
        padding: 12px 10px;
        border-radius: 8px;
        border-width: 1.5px;
    }
    
    .xpay-container .pending-icon {
        margin-bottom: 8px;
    }
    
    .xpay-container .pending-icon i {
        font-size: 24px;
    }
    
    .xpay-container .pending-steps {
        gap: 6px;
    }
    
    .xpay-container .pending-step {
        font-size: 11px;
        padding: 6px 9px;
        border-radius: 6px;
        border-left-width: 2.5px;
    }
    
    /* Summary rows muy pequeños */
    .xpay-container .summary-row {
        font-size: 11px;
        gap: 6px;
    }
    
    .xpay-container .summary-row .label {
        font-size: 10px;
        gap: 4px;
    }
    
    .xpay-container .summary-row .label i {
        font-size: 11px;
    }
    
    .xpay-container .summary-row .value {
        font-size: 11px;
    }
    
    .xpay-container .summary-details {
        gap: 6px;
    }
    
    /* Summary total destacado */
    .xpay-container .summary-total {
        font-size: 13px;
    }
    
    .xpay-container .summary-total .value {
        font-size: 15px;
    }
    
    /* Summary badges pequeños */
    .xpay-container .summary-badge {
        font-size: 9px;
        padding: 2px 5px;
    }
    
    .xpay-container .summary-badge i {
        font-size: 9px;
    }
    
    /* Transferencia en resumen */
    .xpay-container #transfer-voucher-form {
        padding: 10px;
    }
    
    .xpay-container .xpay-transfer-label {
        font-size: 10px;
        gap: 4px;
    }
    
    .xpay-container .xpay-input {
        font-size: 11px;
        padding: 6px 8px 6px 30px;
    }
    
    .xpay-container .input-with-icon i {
        left: 8px;
        font-size: 11px;
    }
    
    .xpay-container .xpay-upload-btn {
        font-size: 11px;
        padding: 7px 12px;
    }
    
    .xpay-container .xpay-upload-btn i {
        font-size: 12px;
    }
    
    .xpay-container .xpay-help-text {
        font-size: 9.5px;
    }
    
    .xpay-container .xpay-file-chip {
        font-size: 10px;
        padding: 4px 8px;
    }
    
    .xpay-container .xpay-replace-btn {
        font-size: 10px;
        padding: 4px 8px;
    }
    
    .xpay-container .btn-primary {
        font-size: 12px;
        padding: 10px 16px;
    }
    
    /* PayPal button container */
    #paypal-button-container {
        padding: 10px;
    }
    
    /* Izipay container */
    #izipay-container {
        padding: 10px;
    }
    
    .izipay-loading {
        font-size: 11px;
        padding: 12px;
    }
    
    .izipay-loading i {
        font-size: 20px;
    }
}

@media (max-width: 480px) {
    /* Summary ultra compacto */
    .xpay-container .summary-card {
        padding: 8px;
    }
    
    .xpay-container .summary-card h2 {
        font-size: 12px;
        margin-bottom: 8px;
    }
    
    .xpay-container .summary-card h2 i {
        font-size: 11px;
    }
    
    /* Estado pendiente ultra compacto */
    .xpay-container .summary-pending-state {
        padding: 10px 8px;
        border-radius: 7px;
        border-width: 1.5px;
        margin-top: 6px;
    }
    
    .xpay-container .pending-icon {
        margin-bottom: 7px;
    }
    
    .xpay-container .pending-icon i {
        font-size: 20px;
    }
    
    .xpay-container .pending-steps {
        gap: 5px;
    }
    
    .xpay-container .pending-step {
        font-size: 10px;
        padding: 5px 8px;
        border-radius: 5px;
        border-left-width: 2px;
    }
    
    /* Summary rows ultra pequeños */
    .xpay-container .summary-row {
        font-size: 10px;
        gap: 5px;
    }
    
    .xpay-container .summary-row .label {
        font-size: 9px;
        gap: 3px;
    }
    
    .xpay-container .summary-row .label i {
        font-size: 10px;
    }
    
    .xpay-container .summary-row .value {
        font-size: 10px;
    }
    
    .xpay-container .summary-details {
        gap: 5px;
    }
    
    /* Summary total */
    .xpay-container .summary-total {
        font-size: 11px;
    }
    
    .xpay-container .summary-total .value {
        font-size: 13px;
    }
    
    /* Summary badges ultra pequeños */
    .xpay-container .summary-badge {
        font-size: 8px;
        padding: 2px 4px;
    }
    
    .xpay-container .summary-badge i {
        font-size: 8px;
    }
    
    /* Transferencia ultra compacto */
    .xpay-container #transfer-voucher-form {
        padding: 8px;
    }
    
    .xpay-container .xpay-space {
        gap: 8px;
    }
    
    .xpay-container .xpay-transfer-label {
        font-size: 9px;
        gap: 3px;
    }
    
    .xpay-container .xpay-transfer-label i {
        font-size: 9px;
    }
    
    .xpay-container .xpay-input {
        font-size: 10px;
        padding: 5px 6px 5px 26px;
    }
    
    .xpay-container .input-with-icon i {
        left: 7px;
        font-size: 10px;
    }
    
    .xpay-container .xpay-upload-btn {
        font-size: 10px;
        padding: 6px 10px;
    }
    
    .xpay-container .xpay-upload-btn i {
        font-size: 11px;
    }
    
    .xpay-container .xpay-help-text {
        font-size: 8.5px;
    }
    
    .xpay-container .xpay-file-chip {
        font-size: 9px;
        padding: 3px 6px;
    }
    
    .xpay-container .xpay-file-chip i {
        font-size: 9px;
    }
    
    .xpay-container .xpay-replace-btn {
        font-size: 9px;
        padding: 3px 6px;
    }
    
    .xpay-container .xpay-replace-btn i {
        font-size: 9px;
    }
    
    .xpay-container .btn-primary {
        font-size: 11px;
        padding: 8px 12px;
    }
    
    .xpay-container .btn-primary i {
        font-size: 11px;
    }
    
    /* Imagen preview más pequeña */
    .xpay-container .xpay-img-preview {
        max-height: 120px;
    }
    
    /* PayPal button muy compacto */
    #paypal-button-container {
        padding: 8px;
    }
    
    /* Izipay muy compacto */
    #izipay-container {
        padding: 8px;
    }
    
    .izipay-loading {
        font-size: 10px;
        padding: 10px;
    }
    
    .izipay-loading i {
        font-size: 18px;
    }
    
    /* Commission panel más pequeño */
    .xpay-container .commission-lines {
        font-size: 9px;
        gap: 3px;
    }
    
    .xpay-container .commission-note {
        font-size: 8.5px;
    }
}