/* ============================================
   DTONE RECHARGE - CSS OPTIMIZADO v3.7.0
   Módulo de recargas telefónicas con design system GSR
   
   CARACTERÍSTICAS:
   ✅ 100% basado en design tokens GSR
   ✅ Input teléfono compuesto (código + número)
   ✅ Selector país con banderas visual
   ✅ Responsive mobile-first
   ✅ Estados de validación DTone
   ✅ Accesibilidad completa
   ✅ Logos de operadores optimizados
   ✅ Consistente con formulario remesas
   ✅ CRITICAL-005: Sistema de tabs por categoría
   ✅ CRITICAL-005: Agrupación de productos (promociones/bundles/airtime)
   ✅ FASE 2: Sistema de modales para operadores y productos
   ✅ STEP 1: Integración optimizada con Elementor
   ✅ STEP 2: Input teléfono armonioso y responsive
   ✅ MODAL FIX: Touch targets WCAG, responsive mejorado, performance optimizado
   ============================================ */

/* ============================================
   WRAPPER PRINCIPAL Y LAYOUT
   STEP 1: Optimizado para page builders
   ============================================ */

/**
 * Contenedor principal del shortcode - OPTIMIZADO PARA PAGE BUILDERS
 * 
 * FILOSOFÍA DE DISEÑO:
 * - El shortcode debe adaptarse al contenedor padre (Elementor, Gutenberg, etc.)
 * - Sin backgrounds propios: el page builder controla el fondo
 * - Sin limitaciones de ancho fijas: permite full-width o columnas estrechas
 * - Padding mínimo: evita doble espaciado con el contenedor padre
 * 
 * COMPATIBILIDAD:
 * - ✅ Elementor (contenedor controla ancho/fondo)
 * - ✅ Gutenberg (bloques controlan layout)
 * - ✅ Widgets y sidebars (se adapta al espacio disponible)
 * - ✅ Full-width sections (crece hasta el ancho del contenedor)
 */
.gsr-dtone-recharge-wrapper {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: var(--gsr-space-4);
    font-family: var(--gsr-font-secondary);
    background: transparent;
    transition: all var(--gsr-transition-base);
}

/**
 * Variante STANDALONE - Para uso sin page builder
 * USO: [gotosend_recargas class="standalone"]
 */
.gsr-dtone-recharge-wrapper.gsr-dtone-standalone {
    max-width: 800px;
    margin: 0 auto;
    padding: var(--gsr-space-5);
    background: var(--gsr-bg-secondary);
    border-radius: var(--gsr-radius-xl);
    box-shadow: var(--gsr-shadow-md);
}

/* Pasos del formulario - usando design tokens */
.gsr-form-step {
    background: var(--gsr-bg-primary);
    border: var(--gsr-border-width) solid var(--gsr-border-color);
    border-radius: var(--gsr-radius-xl);
    padding: var(--gsr-space-8);
    margin-bottom: var(--gsr-space-5);
    box-shadow: var(--gsr-shadow-md);
    transition: all var(--gsr-transition-base);
    position: relative;
}

.gsr-form-step:hover {
    box-shadow: var(--gsr-shadow-lg);
    transform: translateY(-1px);
}

/* Títulos de pasos consistentes */
.gsr-form-step h3 {
    font-family: var(--gsr-font-primary);
    font-size: var(--gsr-text-xl);
    font-weight: var(--gsr-font-bold);
    color: var(--gsr-primary);
    margin: 0 0 var(--gsr-space-4) 0;
    display: flex;
    align-items: center;
    gap: var(--gsr-space-3);
}

.gsr-step-number {
    background: var(--gsr-gradient-primary);
    color: var(--gsr-text-inverse);
    width: 32px;
    height: 32px;
    border-radius: var(--gsr-radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--gsr-text-sm);
    font-weight: var(--gsr-font-bold);
    flex-shrink: 0;
}

/* ============================================
   INPUT TELÉFONO COMPUESTO - REDISEÑO PROFESIONAL v2.0
   STEP 2: Diseño armonioso, consistente y responsive
   ============================================ */

/**
 * WRAPPER PRINCIPAL - OPTIMIZADO
 * 
 * MEJORAS APLICADAS:
 * - Flex-wrap habilitado para mejor responsividad
 * - Gaps uniformes de 12px
 * - Alineación stretch para altura consistente
 */
.gsr-phone-input-wrapper {
    display: flex;
    gap: var(--gsr-space-3); /* 12px - consistente */
    align-items: stretch; /* Todos los hijos misma altura */
    margin-bottom: var(--gsr-space-5);
    flex-wrap: wrap; /* Permite wrapping si necesario */
}

/**
 * SELECT PAÍS - ANCHO OPTIMIZADO Y CUSTOM ARROW
 * 
 * SOLUCIÓN AL PROBLEMA:
 * - width: auto (anula el 100% de gsr-components.css)
 * - min-width: 180px (espacio suficiente para nombres de países)
 * - max-width: 200px (no crece excesivamente)
 * - flex-shrink: 0 (no se comprime, mantiene tamaño)
 * - height: 48px (consistente con compound input)
 * - Custom arrow SVG en color brand
 */
.gsr-phone-input-wrapper .gsr-select {
    width: auto;
    min-width: 180px;
    max-width: 200px;
    flex-shrink: 0;
    height: 48px; /* Altura fija, consistente */
    padding: var(--gsr-space-3) var(--gsr-space-4);
    
    /* Estilos visuales */
    font-size: var(--gsr-text-base);
    font-weight: var(--gsr-font-medium);
    cursor: pointer;
    
    /* Custom arrow - Apariencia mejorada */
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23074b78' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 12px;
    padding-right: 36px; /* Espacio para el icono */
}

/* Estados del select - NUEVOS */
.gsr-phone-input-wrapper .gsr-select:hover {
    border-color: var(--gsr-primary);
    box-shadow: var(--gsr-shadow-sm);
}

.gsr-phone-input-wrapper .gsr-select:focus {
    border-color: var(--gsr-primary);
    box-shadow: 0 0 0 3px rgba(7, 75, 120, 0.1);
    outline: none;
}

/**
 * INPUT COMPUESTO - MEJORADO
 * 
 * MEJORAS:
 * - flex: 1 1 auto (crece y se encoge según espacio disponible)
 * - min-width: 200px (no colapsa excesivamente)
 * - height: 48px (FIJA, no min-height, para consistencia perfecta)
 */
.gsr-phone-compound-input {
    display: flex;
    align-items: center;
    flex: 1 1 auto; /* Ocupa espacio restante */
    min-width: 200px; /* No colapsa demasiado */
    border: var(--gsr-border-width-2) solid var(--gsr-border-color);
    border-radius: var(--gsr-radius-base);
    background: var(--gsr-bg-primary);
    overflow: hidden;
    transition: all var(--gsr-transition-base);
    height: 48px; /* ALTURA FIJA - no min-height */
    position: relative;
}

.gsr-phone-compound-input:focus-within {
    border-color: var(--gsr-primary);
    box-shadow: 0 0 0 3px rgba(7, 75, 120, 0.1);
    transform: translateY(-1px);
}

.gsr-phone-compound-input.gsr-phone-success {
    border-color: var(--gsr-success);
    background: var(--gsr-success-light);
}

.gsr-phone-compound-input.gsr-phone-error {
    border-color: var(--gsr-error);
    background: var(--gsr-error-light);
    animation: shake 0.5s ease-in-out;
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    75% { transform: translateX(5px); }
}

/* Campo código de país editable - MEJORADO CON HEIGHT 100% */
.gsr-country-code-input {
    width: 70px;
    padding: var(--gsr-space-3);
    border: none;
    background: var(--gsr-gray-100);
    font-family: var(--gsr-font-primary);
    font-weight: var(--gsr-font-bold);
    font-size: var(--gsr-text-sm);
    text-align: center;
    color: var(--gsr-primary);
    outline: none;
    transition: all var(--gsr-transition-base);
    height: 100%; /* ✅ NUEVO: Ocupa toda la altura del padre */
}

.gsr-country-code-input:focus {
    background: var(--gsr-primary-subtle);
    color: var(--gsr-primary-dark);
}

.gsr-country-code-input:read-only {
    cursor: pointer;
    background: var(--gsr-gray-50);
}

/* Separador visual - MEJORADO CON HEIGHT 100% */
.gsr-phone-separator {
    padding: 0 var(--gsr-space-2);
    color: var(--gsr-gray-500);
    font-weight: var(--gsr-font-bold);
    font-size: var(--gsr-text-sm);
    user-select: none;
    display: flex;
    align-items: center;
    height: 100%; /* ✅ NUEVO: Alineación vertical perfecta */
}

/* Campo número de teléfono - MEJORADO CON HEIGHT 100% */
.gsr-phone-number-input {
    flex: 1;
    padding: var(--gsr-space-3) var(--gsr-space-4);
    border: none;
    background: transparent;
    font-size: var(--gsr-text-base);
    font-family: var(--gsr-font-secondary);
    color: var(--gsr-text-primary);
    outline: none;
    height: 100%; /* ✅ NUEVO: Consistencia total */
}

.gsr-phone-number-input::placeholder {
    color: var(--gsr-text-muted);
    font-style: italic;
}

/* ============================================
   SELECTOR DE PAÍS CON BANDERAS - OPTIMIZADO
   ============================================ */

.gsr-country-selector-container {
    position: relative;
    width: 140px;
    flex-shrink: 0;
}

.gsr-country-selector-visual {
    position: relative;
    width: 100%;
}

/* Display principal del país - solo bandera */
.gsr-country-display {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--gsr-space-3);
    min-height: 48px;
    border: var(--gsr-border-width-2) solid var(--gsr-border-color);
    border-radius: var(--gsr-radius-base);
    background: var(--gsr-bg-primary);
    cursor: pointer;
    transition: all var(--gsr-transition-base);
    position: relative;
}

.gsr-country-display:hover {
    border-color: var(--gsr-primary);
    box-shadow: var(--gsr-shadow-md);
    transform: translateY(-1px);
}

.gsr-country-display:active {
    transform: translateY(0);
}

/* Solo bandera visible, nombre oculto para espacios reducidos */
.gsr-country-flag-display {
    font-size: var(--gsr-text-2xl);
    line-height: 1;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1));
}

.gsr-country-name-display {
    display: none; /* Oculto en vista compacta */
}

/* Chevron indicador */
.gsr-country-chevron {
    position: absolute;
    right: 6px;
    bottom: 6px;
    width: 12px;
    height: 12px;
    opacity: 0.6;
    transition: transform var(--gsr-transition-base);
}

.gsr-country-selector-visual[data-open="true"] .gsr-country-chevron {
    transform: rotate(180deg);
}

/* Dropdown expandido - ancho independiente */
.gsr-country-dropdown {
    position: absolute;
    top: calc(100% + var(--gsr-space-1));
    left: 0;
    width: 320px; /* Ancho fijo independiente */
    z-index: var(--gsr-z-dropdown);
    background: var(--gsr-bg-primary);
    border: var(--gsr-border-width) solid var(--gsr-border-color);
    border-radius: var(--gsr-radius-lg);
    box-shadow: var(--gsr-shadow-xl);
    max-height: 400px;
    overflow-y: auto;
    animation: slideDown var(--gsr-transition-base) var(--gsr-ease-out);
}

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

/* Búsqueda en dropdown */
.gsr-country-search-wrapper {
    display: flex;
    align-items: center;
    padding: var(--gsr-space-4);
    border-bottom: var(--gsr-border-width) solid var(--gsr-border-color);
}

.gsr-country-search {
    flex: 1;
    padding: var(--gsr-space-3);
    padding-left: var(--gsr-space-4);
    border: var(--gsr-border-width) solid var(--gsr-border-color);
    border-radius: var(--gsr-radius-base);
    font-size: var(--gsr-text-sm);
    background: var(--gsr-bg-secondary);
    outline: none;
    transition: all var(--gsr-transition-base);
}

.gsr-country-search:focus {
    border-color: var(--gsr-primary);
    background: var(--gsr-bg-primary);
    box-shadow: 0 0 0 3px rgba(7, 75, 120, 0.1);
}

.gsr-country-search-wrapper i {
    position: static;
    margin-left: var(--gsr-space-4);
    color: var(--gsr-gray-500);
    width: 16px;
    height: 16px;
}

/* Países populares */
.gsr-popular-countries {
    padding: var(--gsr-space-4);
    border-bottom: var(--gsr-border-width) solid var(--gsr-border-color);
}

.gsr-popular-countries h5 {
    font-size: var(--gsr-text-xs);
    font-weight: var(--gsr-font-bold);
    text-transform: uppercase;
    letter-spacing: var(--gsr-tracking-widest);
    color: var(--gsr-gray-600);
    margin-bottom: var(--gsr-space-4);
    margin-top: 0;
}

.gsr-popular-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--gsr-space-2);
}

.gsr-country-popular {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--gsr-space-3);
    border: var(--gsr-border-width) solid var(--gsr-border-color);
    border-radius: var(--gsr-radius-base);
    cursor: pointer;
    transition: all var(--gsr-transition-base);
    text-align: center;
    background: var(--gsr-bg-secondary);
}

.gsr-country-popular:hover {
    border-color: var(--gsr-primary);
    background: var(--gsr-primary-subtle);
    transform: translateY(-2px);
    box-shadow: var(--gsr-shadow-md);
}

.gsr-country-flag-large {
    font-size: var(--gsr-text-3xl);
    margin-bottom: var(--gsr-space-2);
    line-height: 1;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
}

.gsr-country-info strong {
    font-size: var(--gsr-text-xs);
    font-weight: var(--gsr-font-semibold);
    color: var(--gsr-text-primary);
    line-height: var(--gsr-leading-tight);
    margin-bottom: var(--gsr-space-1);
}

.gsr-country-info small {
    font-size: 10px;
    color: var(--gsr-gray-600);
    line-height: 1;
}

/* Lista completa de países */
.gsr-all-countries {
    padding: var(--gsr-space-4);
    max-height: 200px;
    overflow-y: auto;
}

.gsr-all-countries h5 {
    font-size: var(--gsr-text-xs);
    font-weight: var(--gsr-font-bold);
    text-transform: uppercase;
    letter-spacing: var(--gsr-tracking-widest);
    color: var(--gsr-gray-600);
    margin-top: 0;
    margin-bottom: var(--gsr-space-3);
}

.gsr-country-item {
    display: flex;
    align-items: center;
    gap: var(--gsr-space-3);
    padding: var(--gsr-space-2) var(--gsr-space-3);
    border-radius: var(--gsr-radius-base);
    cursor: pointer;
    transition: all var(--gsr-transition-base);
}

.gsr-country-item:hover {
    background: var(--gsr-primary-subtle);
}

.gsr-country-item .gsr-country-flag {
    flex-shrink: 0;
    width: 24px;
    height: 16px;
    border-radius: var(--gsr-radius-sm);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.gsr-country-item .gsr-country-flag img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.gsr-country-text {
    display: flex;
    align-items: center;
    gap: var(--gsr-space-2);
}

.gsr-country-text strong {
    font-size: var(--gsr-text-sm);
    color: var(--gsr-text-primary);
    line-height: var(--gsr-leading-tight);
    display: inline;
}

.gsr-country-text small {
    font-size: var(--gsr-text-xs);
    color: var(--gsr-gray-600);
    line-height: 1;
    display: inline;
}

/* ============================================
   GRID DE OPERADORES ALTERNATIVOS (INLINE - NO MODAL)
   ============================================ */

.gsr-operators-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--gsr-space-4);
    margin: var(--gsr-space-5) 0;
}

.gsr-country-operators-section {
    margin: var(--gsr-space-6) 0;
}

.gsr-section-header {
    text-align: center;
    margin-bottom: var(--gsr-space-6);
}

.gsr-section-header h3 {
    font-family: var(--gsr-font-primary);
    font-size: var(--gsr-text-xl);
    font-weight: var(--gsr-font-bold);
    color: var(--gsr-primary);
    margin: 0 0 var(--gsr-space-2) 0;
}

.gsr-section-header p {
    color: var(--gsr-text-secondary);
    margin: 0;
}

/* ============================================
   INFORMACIÓN DEL OPERADOR - LOGOS OPTIMIZADOS
   ============================================ */

/* ============================================
   STEP 2: DETECCIÓN DE OPERADOR - UI/UX MEJORADO
   Basado en Material Design + Carbon Design System
   Implementa: Badge confianza, Card vertical, Meta-items, Jerarquía botones
   ============================================ */

/* ===================
   1. BADGE DE DETECCIÓN (Header)
   =================== */

/**
 * Badge de confianza superior
 * Material Design: Visual hierarchy con badges informativos
 * Ubicación: Top del contenedor de operador detectado
 */
.gsr-detection-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--gsr-space-2);
    padding: var(--gsr-space-2) var(--gsr-space-4);
    background: var(--gsr-gradient-success);
    color: var(--gsr-success-dark);
    font-size: var(--gsr-text-sm);
    font-weight: var(--gsr-font-bold);
    text-transform: uppercase;
    letter-spacing: var(--gsr-tracking-wide);
    border-radius: var(--gsr-radius-full);
    margin-bottom: var(--gsr-space-4);
    border: var(--gsr-border-width) solid var(--gsr-success);
    box-shadow: var(--gsr-shadow-sm);
    animation: fadeInSlide 0.3s var(--gsr-ease-out);
}

.gsr-detection-badge i {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

/* Variante de confianza media */
.gsr-detection-badge.gsr-confidence-medium {
    background: var(--gsr-gradient-info);
    color: var(--gsr-info-dark);
    border-color: var(--gsr-info);
}

/* Variante de confianza alta */
.gsr-detection-badge.gsr-confidence-high {
    background: var(--gsr-gradient-success);
    color: var(--gsr-success-dark);
    border-color: var(--gsr-success);
}

/* ===================
   2. CARD PRINCIPAL STEP 2 (Body)
   =================== */

/**
 * Contenedor principal del operador detectado
 * Card Design Best Practice: Header/Body/Footer clara
 * Spacing: 24px padding, 16px gap entre elementos
 */
.gsr-operator-card-step2 {
    background: var(--gsr-bg-primary);
    border: var(--gsr-border-width-2) solid var(--gsr-border-color);
    border-radius: var(--gsr-radius-xl);
    padding: var(--gsr-space-6); /* 24px */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--gsr-space-4); /* 16px entre logo e info */
    margin-bottom: var(--gsr-space-5);
    box-shadow: var(--gsr-shadow-md);
    position: relative;
    overflow: hidden;
    transition: all var(--gsr-transition-base);
}

.gsr-operator-card-step2::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--gsr-gradient-primary);
    z-index: 1;
}

.gsr-operator-card-step2:hover {
    box-shadow: var(--gsr-shadow-lg);
    transform: translateY(-2px);
}

/* ===================
   3. LOGO GRANDE CENTRADO
   =================== */

/**
 * Logo grande 120px (desktop) / 100px (mobile)
 * Reutiliza estructura de .gsr-operator-logo existente
 */
.gsr-operator-logo-large {
    width: 120px;
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--gsr-bg-primary);
    border-radius: var(--gsr-radius-lg);
    box-shadow: var(--gsr-shadow-lg);
    flex-shrink: 0;
    overflow: hidden;
    border: 2px solid var(--gsr-gray-200);
    transition: all var(--gsr-transition-base);
    position: relative;
}

.gsr-operator-logo-large:hover {
    transform: scale(1.05);
    box-shadow: var(--gsr-shadow-xl);
    border-color: var(--gsr-primary);
}

/* Imagen dentro del logo */
.gsr-operator-logo-large .gsr-operator-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    border-radius: var(--gsr-radius-base);
    background: var(--gsr-bg-primary);
    transition: all var(--gsr-transition-base);
}

.gsr-operator-logo-large .gsr-operator-img:hover {
    transform: scale(1.05);
}

/* Placeholder - reutiliza .gsr-operator-placeholder existente */
.gsr-operator-logo-large .gsr-operator-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--gsr-gray-100), var(--gsr-gray-200));
    color: var(--gsr-gray-500);
    font-size: var(--gsr-text-3xl);
    border-radius: var(--gsr-radius-base);
}

.gsr-operator-logo-large .gsr-operator-placeholder i {
    width: 48px;
    height: 48px;
}

/* ===================
   4. INFORMACIÓN ORGANIZADA VERTICALMENTE
   =================== */

/**
 * Bloque de información del operador
 * UX: Estructura vertical con jerarquía clara
 * Spacing: 12px entre elementos
 */
.gsr-operator-info-step2 {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--gsr-space-3); /* 12px */
    text-align: center;
}

.gsr-operator-info-step2 .gsr-operator-name {
    font-family: var(--gsr-font-primary);
    font-size: var(--gsr-text-2xl);
    font-weight: var(--gsr-font-bold);
    color: var(--gsr-primary);
    margin: 0;
    line-height: var(--gsr-leading-tight);
    letter-spacing: -0.025em;
}

/* ===================
   5. META-INFORMACIÓN CON ICONOS
   =================== */

/**
 * Contenedor de meta-items
 * Card UI Best Practice: Max 3 líneas de meta-info
 * Icons + Text pattern para mejor scannability
 */
.gsr-operator-meta {
    display: flex;
    flex-direction: column;
    gap: var(--gsr-space-2); /* 8px entre items */
    width: 100%;
    padding: var(--gsr-space-3) 0;
}

/**
 * Meta-item individual (País, Teléfono, Cobertura)
 */
.gsr-meta-item {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--gsr-space-2);
    padding: var(--gsr-space-2) var(--gsr-space-3);
    background: var(--gsr-bg-secondary);
    border-radius: var(--gsr-radius-base);
    font-size: var(--gsr-text-sm);
    color: var(--gsr-text-secondary);
    transition: all var(--gsr-transition-base);
}

.gsr-meta-item:hover {
    background: var(--gsr-primary-subtle);
    color: var(--gsr-primary);
}

.gsr-meta-item i {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    color: var(--gsr-primary);
}

.gsr-meta-item span {
    font-weight: var(--gsr-font-medium);
    line-height: var(--gsr-leading-tight);
}

/* Meta-item especial: Teléfono con bandera */
.gsr-meta-item.gsr-meta-phone {
    background: var(--gsr-gradient-info);
    border: var(--gsr-border-width) solid var(--gsr-info);
    font-weight: var(--gsr-font-semibold);
}

.gsr-meta-item.gsr-meta-phone strong {
    font-family: var(--gsr-font-mono, monospace);
    font-weight: var(--gsr-font-bold);
    color: var(--gsr-primary-dark);
    letter-spacing: 0.5px;
}

.gsr-phone-flag {
    font-size: var(--gsr-text-lg);
    margin-right: var(--gsr-space-1);
}

/* ===================
   6. BOTONES CON JERARQUÍA CLARA (Footer)
   =================== */

/**
 * Contenedor de acciones
 * Button Hierarchy Best Practice:
 * - 1 botón primario (filled, high emphasis)
 * - 1 botón secundario (outlined, medium emphasis)
 * - Spacing: 12px entre botones
 */
.gsr-step2-actions {
    display: flex;
    gap: var(--gsr-space-3); /* 12px */
    width: 100%;
    margin-top: var(--gsr-space-2);
    flex-wrap: wrap;
    justify-content: center;
}

/* Botón primario - Ver Productos (alta prioridad) */
.gsr-step2-actions .gsr-btn-primary {
    flex: 1;
    min-width: 180px;
    background: var(--gsr-gradient-primary);
    color: var(--gsr-text-inverse);
    border: none;
    padding: var(--gsr-space-3) var(--gsr-space-5);
    font-size: var(--gsr-text-base);
    font-weight: var(--gsr-font-bold);
    border-radius: var(--gsr-radius-base);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--gsr-space-2);
    cursor: pointer;
    transition: all var(--gsr-transition-base);
    box-shadow: var(--gsr-shadow-md);
}

.gsr-step2-actions .gsr-btn-primary:hover {
    background: var(--gsr-gradient-accent);
    transform: translateY(-2px);
    box-shadow: var(--gsr-shadow-lg);
}

.gsr-step2-actions .gsr-btn-primary:active {
    transform: translateY(0);
}

.gsr-step2-actions .gsr-btn-primary i {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

/* Botón secundario - Cambiar Operador (media prioridad) */
.gsr-step2-actions .gsr-btn-outline {
    flex: 1;
    min-width: 180px;
    background: transparent;
    color: var(--gsr-primary);
    border: var(--gsr-border-width-2) solid var(--gsr-primary);
    padding: var(--gsr-space-3) var(--gsr-space-5);
    font-size: var(--gsr-text-base);
    font-weight: var(--gsr-font-semibold);
    border-radius: var(--gsr-radius-base);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--gsr-space-2);
    cursor: pointer;
    transition: all var(--gsr-transition-base);
}

.gsr-step2-actions .gsr-btn-outline:hover {
    background: var(--gsr-primary-subtle);
    border-color: var(--gsr-primary-dark);
    color: var(--gsr-primary-dark);
    transform: translateY(-1px);
    box-shadow: var(--gsr-shadow-sm);
}

.gsr-step2-actions .gsr-btn-outline:active {
    transform: translateY(0);
}

.gsr-step2-actions .gsr-btn-outline i {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

/* Accesibilidad: Estados focus */
.gsr-step2-actions .gsr-btn-primary:focus-visible,
.gsr-step2-actions .gsr-btn-outline:focus-visible {
    outline: 2px solid var(--gsr-primary);
    outline-offset: 2px;
}

/* ===================
   7. NOTA INFORMATIVA
   =================== */

/**
 * Mensaje informativo de próximo paso
 * UX: Reduce ansiedad mostrando progreso
 * Spacing: 16px margin-top
 */
.gsr-step2-note {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--gsr-space-2);
    padding: var(--gsr-space-3) var(--gsr-space-4);
    background: var(--gsr-gradient-light);
    border: var(--gsr-border-width) dashed var(--gsr-border-color);
    border-radius: var(--gsr-radius-base);
    margin-top: var(--gsr-space-4);
    transition: all var(--gsr-transition-base);
}

.gsr-step2-note:hover {
    background: var(--gsr-primary-subtle);
    border-color: var(--gsr-primary);
    border-style: solid;
}

.gsr-step2-note i {
    width: 16px;
    height: 16px;
    color: var(--gsr-info);
    flex-shrink: 0;
}

.gsr-step2-note p {
    margin: 0;
    font-size: var(--gsr-text-sm);
    color: var(--gsr-text-secondary);
    font-weight: var(--gsr-font-medium);
    line-height: var(--gsr-leading-relaxed);
}

/* ===================
   8. CONTENEDOR OPERADOR DETECTADO
   =================== */

/**
 * Wrapper principal - agrupa badge + card + actions + note
 */
.gsr-operator-detected {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    animation: fadeInSlide 0.4s var(--gsr-ease-out);
}

/* ===================
   9. RESPONSIVE DESIGN - STEP 2
   =================== */

/* Tablet (641px - 768px) */
@media (min-width: 641px) and (max-width: 768px) {
    .gsr-operator-logo-large {
        width: 100px;
        height: 100px;
    }
    
    .gsr-operator-info-step2 .gsr-operator-name {
        font-size: var(--gsr-text-xl);
    }
    
    .gsr-step2-actions {
        gap: var(--gsr-space-2);
    }
    
    .gsr-step2-actions .gsr-btn-primary,
    .gsr-step2-actions .gsr-btn-outline {
        min-width: 150px;
        font-size: var(--gsr-text-sm);
    }
}

/* Mobile (≤ 640px) */
@media (max-width: 640px) {
    .gsr-operator-card-step2 {
        padding: var(--gsr-space-4);
    }
    
    .gsr-operator-logo-large {
        width: 80px;
        height: 80px;
    }
    
    .gsr-operator-logo-large .gsr-operator-placeholder i {
        width: 32px;
        height: 32px;
    }
    
    .gsr-operator-info-step2 .gsr-operator-name {
        font-size: var(--gsr-text-lg);
    }
    
    .gsr-operator-meta {
        gap: var(--gsr-space-2);
    }
    
    .gsr-meta-item {
        font-size: var(--gsr-text-xs);
        padding: var(--gsr-space-2);
    }
    
    .gsr-meta-item i {
        width: 14px;
        height: 14px;
    }
    
    /* Botones stack vertical en mobile */
    .gsr-step2-actions {
        flex-direction: column;
        gap: var(--gsr-space-2);
    }
    
    .gsr-step2-actions .gsr-btn-primary,
    .gsr-step2-actions .gsr-btn-outline {
        width: 100%;
        min-width: 100%;
        font-size: var(--gsr-text-sm);
        padding: var(--gsr-space-3) var(--gsr-space-4);
    }
    
    .gsr-step2-note {
        padding: var(--gsr-space-2) var(--gsr-space-3);
    }
    
    .gsr-step2-note p {
        font-size: var(--gsr-text-xs);
    }
}

/* Mobile Extra Small (≤ 375px) */
@media (max-width: 375px) {
    .gsr-operator-logo-large {
        width: 72px;
        height: 72px;
    }
    
    .gsr-detection-badge {
        font-size: var(--gsr-text-xs);
        padding: var(--gsr-space-1) var(--gsr-space-3);
    }
}

/* ===================
   10. ACCESIBILIDAD Y PREFERENCIAS
   =================== */

@media (prefers-reduced-motion: reduce) {
    .gsr-operator-card-step2,
    .gsr-operator-logo-large,
    .gsr-step2-actions .gsr-btn-primary,
    .gsr-step2-actions .gsr-btn-outline,
    .gsr-operator-detected {
        animation: none;
        transition-duration: 0.01ms;
    }
    
    .gsr-operator-card-step2:hover,
    .gsr-operator-logo-large:hover,
    .gsr-step2-actions .gsr-btn-primary:hover,
    .gsr-step2-actions .gsr-btn-outline:hover {
        transform: none;
    }
}

@media (prefers-contrast: high) {
    .gsr-operator-card-step2,
    .gsr-meta-item,
    .gsr-step2-actions .gsr-btn-primary,
    .gsr-step2-actions .gsr-btn-outline {
        border-width: var(--gsr-border-width-3);
    }
    
    .gsr-detection-badge,
    .gsr-step2-note {
        filter: contrast(1.2);
    }
}

/* ============================================
   FIN STEP 2: DETECCIÓN DE OPERADOR UI/UX MEJORADO
   ============================================ */


.gsr-operator-card {
    background: var(--gsr-gradient-info);
    border: var(--gsr-border-width) solid var(--gsr-border-color);
    border-radius: var(--gsr-radius-lg);
    padding: var(--gsr-space-6);
    display: flex;
    align-items: center;
    gap: var(--gsr-space-5);
    margin-bottom: var(--gsr-space-6);
    box-shadow: var(--gsr-shadow-md);
    position: relative;
    overflow: hidden;
}

.gsr-operator-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--gsr-gradient-primary);
}

/* Logo de operador principal - OPTIMIZADO */
.gsr-operator-logo {
    width: 120px;
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--gsr-bg-primary);
    box-shadow: var(--gsr-shadow-lg);
    flex-shrink: 0;
    overflow: hidden;
    border: 2px solid var(--gsr-gray-200);
    transition: all var(--gsr-transition-base);
    position: relative;
}

.gsr-operator-logo:hover {
    transform: scale(1.05);
    box-shadow: var(--gsr-shadow-xl);
}

/* Imagen del logo - AJUSTES RESPONSIVOS MEJORADOS */
.gsr-operator-logo img,
.gsr-operator-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    border-radius: var(--gsr-radius-base);
    transition: all var(--gsr-transition-base);
    background: var(--gsr-bg-primary);
}

.gsr-operator-logo img:hover,
.gsr-operator-img:hover {
    transform: scale(1.1);
}

/* Placeholder mejorado con gradiente dinámico */
.gsr-operator-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--gsr-gray-100), var(--gsr-gray-200));
    color: var(--gsr-gray-500);
    font-size: var(--gsr-text-3xl);
    border-radius: var(--gsr-radius-base);
    position: relative;
    overflow: hidden;
}

.gsr-operator-placeholder::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    animation: shimmer 2s infinite;
}

/* ============================================
   LOGOS EN GRID DE OPERADORES ALTERNATIVOS  
   ============================================ */

.gsr-operator-option {
    display: flex;
    align-items: center;
    gap: var(--gsr-space-4);
    padding: var(--gsr-space-4);
    border: var(--gsr-border-width-2) solid var(--gsr-border-color);
    border-radius: var(--gsr-radius-lg);
    background: var(--gsr-bg-primary);
    cursor: pointer;
    transition: all var(--gsr-transition-base);
    position: relative;
    overflow: hidden;
}

.gsr-operator-option::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(7, 75, 120, 0.1), transparent);
    transition: all var(--gsr-transition-base);
}

.gsr-operator-option:hover {
    border-color: var(--gsr-primary);
    box-shadow: var(--gsr-shadow-lg);
    transform: translateY(-2px);
}

.gsr-operator-option:hover::before {
    left: 100%;
}

/* Logo en opciones - TAMAÑO OPTIMIZADO */
.gsr-operator-option-logo {
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--gsr-radius-base);
    background: var(--gsr-bg-secondary);
    flex-shrink: 0;
    overflow: hidden;
    border: 1px solid var(--gsr-gray-200);
    position: relative;
}

.gsr-operator-option-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    border-radius: calc(var(--gsr-radius-base) - 1px);
    background: var(--gsr-bg-primary);
}

.gsr-operator-option-logo .gsr-operator-placeholder {
    font-size: var(--gsr-text-xl);
    background: linear-gradient(135deg, var(--gsr-gray-100), var(--gsr-gray-150));
}

/* Información del operador */
.gsr-operator-option-info {
    flex: 1;
    min-width: 0;
}

.gsr-operator-option-info h4 {
    margin: 0 0 var(--gsr-space-1) 0;
    font-size: var(--gsr-text-base);
    font-weight: var(--gsr-font-bold);
    color: var(--gsr-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.gsr-operator-option-info p {
    margin: 0 0 var(--gsr-space-1) 0;
    font-size: var(--gsr-text-sm);
    color: var(--gsr-text-secondary);
}

.gsr-operator-option-info small {
    font-size: var(--gsr-text-xs);
    color: var(--gsr-text-muted);
}

/* Acciones del operador */
.gsr-operator-option-actions {
    flex-shrink: 0;
}

.gsr-operator-details {
    flex: 1;
}

.gsr-operator-details h3 {
    margin: 0 0 var(--gsr-space-2) 0;
    color: var(--gsr-primary);
    font-family: var(--gsr-font-primary);
    font-size: var(--gsr-text-xl);
    display: flex;
    align-items: center;
    gap: var(--gsr-space-2);
}

.gsr-operator-details p {
    margin: 0;
    color: var(--gsr-text-secondary);
    font-size: var(--gsr-text-sm);
}

/* Estados de operadores */
.gsr-operator-option.selected {
    border-color: var(--gsr-primary);
    background: var(--gsr-primary-subtle);
    box-shadow: var(--gsr-shadow-primary);
}

.gsr-operator-option.selected::after {
    content: '✓';
    position: absolute;
    top: var(--gsr-space-2);
    right: var(--gsr-space-2);
    background: var(--gsr-gradient-accent);
    color: var(--gsr-text-inverse);
    width: 24px;
    height: 24px;
    border-radius: var(--gsr-radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: var(--gsr-font-bold);
    font-size: var(--gsr-text-sm);
    animation: bounceIn 0.5s var(--gsr-ease-bounce);
}

/* ============================================
   CRITICAL-005: CONTENEDOR PRINCIPAL DE PRODUCTOS
   ============================================ */

.gsr-products-container {
    width: 100%;
    margin: var(--gsr-space-6) 0;
}

.gsr-products-title {
    font-family: var(--gsr-font-primary);
    font-size: var(--gsr-text-xl);
    font-weight: var(--gsr-font-bold);
    color: var(--gsr-primary);
    margin: 0 0 var(--gsr-space-6) 0;
    text-align: center;
}

/* ============================================
   CRITICAL-005: TABS DE CATEGORÍAS
   ============================================ */

.gsr-product-tabs {
    display: flex;
    gap: var(--gsr-space-2);
    margin-bottom: var(--gsr-space-6);
    border-bottom: 2px solid var(--gsr-border-color);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: var(--gsr-primary) transparent;
}

.gsr-product-tabs::-webkit-scrollbar {
    height: 4px;
}

.gsr-product-tabs::-webkit-scrollbar-track {
    background: transparent;
}

.gsr-product-tabs::-webkit-scrollbar-thumb {
    background: var(--gsr-primary);
    border-radius: var(--gsr-radius-full);
}

.gsr-tab-button {
    display: flex;
    align-items: center;
    gap: var(--gsr-space-2);
    padding: var(--gsr-space-3) var(--gsr-space-5);
    border: none;
    background: transparent;
    color: var(--gsr-text-secondary);
    font-size: var(--gsr-text-base);
    font-weight: var(--gsr-font-semibold);
    font-family: var(--gsr-font-secondary);
    cursor: pointer;
    border-bottom: 3px solid transparent;
    transition: all var(--gsr-transition-base);
    white-space: nowrap;
    position: relative;
}

.gsr-tab-button:hover {
    color: var(--gsr-primary);
    background: var(--gsr-primary-subtle);
    border-radius: var(--gsr-radius-base) var(--gsr-radius-base) 0 0;
}

.gsr-tab-button.active {
    color: var(--gsr-primary);
    border-bottom-color: var(--gsr-primary);
    font-weight: var(--gsr-font-bold);
}

.gsr-tab-button i {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.gsr-tab-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 24px;
    padding: 0 var(--gsr-space-2);
    background: var(--gsr-gray-200);
    color: var(--gsr-text-secondary);
    font-size: var(--gsr-text-xs);
    font-weight: var(--gsr-font-bold);
    border-radius: var(--gsr-radius-full);
    transition: all var(--gsr-transition-base);
}

.gsr-tab-button.active .gsr-tab-count {
    background: var(--gsr-gradient-primary);
    color: var(--gsr-text-inverse);
    box-shadow: var(--gsr-shadow-sm);
}

/* ============================================
   CRITICAL-005: PANELES DE CONTENIDO
   ============================================ */

.gsr-tabs-content {
    position: relative;
}

.gsr-tab-panel {
    display: none;
    animation: fadeInSlide 0.3s var(--gsr-ease-out);
}

.gsr-tab-panel.active {
    display: block;
}

@keyframes fadeInSlide {
    from {
        opacity: 0;
        transform: translateY(var(--gsr-space-3));
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ============================================
   CRITICAL-005: SECCIONES DE PRODUCTOS
   ============================================ */

.gsr-products-section {
    margin-bottom: var(--gsr-space-6);
}

.gsr-section-title {
    font-family: var(--gsr-font-primary);
    font-size: var(--gsr-text-lg);
    font-weight: var(--gsr-font-bold);
    color: var(--gsr-text-primary);
    margin: 0 0 var(--gsr-space-4) 0;
    padding-left: var(--gsr-space-3);
    border-left: 4px solid var(--gsr-primary);
}

/* ============================================
   CRITICAL-005: GRID Y TARJETAS DE PRODUCTOS (INLINE - NO MODAL)
   ============================================ */

.gsr-products-grid {
    display: grid;
    gap: var(--gsr-space-5);
    margin-top: var(--gsr-space-6);
}

.gsr-product-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--gsr-space-4);
}

.gsr-product-card {
    position: relative;
    background: var(--gsr-bg-primary);
    border: var(--gsr-border-width-2) solid var(--gsr-border-color);
    border-radius: var(--gsr-radius-lg);
    padding: var(--gsr-space-5);
    cursor: pointer;
    transition: all var(--gsr-transition-base);
    overflow: hidden;
}

.gsr-product-card:hover {
    border-color: var(--gsr-primary);
    box-shadow: var(--gsr-shadow-lg);
    transform: translateY(-4px);
}

.gsr-product-card.selected {
    border-color: var(--gsr-primary);
    background: var(--gsr-primary-subtle);
    box-shadow: var(--gsr-shadow-primary);
}

.gsr-product-card.selected::after {
    content: '✓';
    position: absolute;
    top: var(--gsr-space-3);
    right: var(--gsr-space-3);
    background: var(--gsr-gradient-accent);
    color: var(--gsr-text-inverse);
    width: 32px;
    height: 32px;
    border-radius: var(--gsr-radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: var(--gsr-font-bold);
    font-size: var(--gsr-text-sm);
    animation: bounceIn 0.5s var(--gsr-ease-bounce);
}

/* ============================================
   CRITICAL-005: PRODUCTOS CON PROMOCIÓN
   ============================================ */

.gsr-product-card.has-promotion {
    border-color: var(--gsr-warning);
    background: linear-gradient(135deg, var(--gsr-warning-light) 0%, var(--gsr-bg-primary) 100%);
}

.gsr-product-card.has-promotion::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--gsr-warning), var(--gsr-error));
    border-radius: var(--gsr-radius-lg) var(--gsr-radius-lg) 0 0;
}

/* ============================================
   CRITICAL-005: ESTRUCTURA DE TARJETA
   ============================================ */

.gsr-product-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--gsr-space-4);
}

.gsr-product-value {
    font-family: var(--gsr-font-primary);
    font-size: var(--gsr-text-2xl);
    font-weight: var(--gsr-font-bold);
    color: var(--gsr-primary);
    line-height: 1;
}

.gsr-product-body {
    margin-bottom: var(--gsr-space-4);
}

.gsr-product-name {
    font-size: var(--gsr-text-base);
    font-weight: var(--gsr-font-semibold);
    color: var(--gsr-text-primary);
    margin: 0 0 var(--gsr-space-3) 0;
    line-height: var(--gsr-leading-normal);
}

.gsr-product-description {
    font-size: var(--gsr-text-sm);
    color: var(--gsr-text-secondary);
    line-height: var(--gsr-leading-relaxed);
    margin-top: var(--gsr-space-2);
}

/* ============================================
   CRITICAL-005: BENEFICIOS DEL PRODUCTO
   ============================================ */

.gsr-product-benefits {
    list-style: none;
    padding: 0;
    margin: var(--gsr-space-3) 0;
    display: flex;
    flex-direction: column;
    gap: var(--gsr-space-2);
}

.gsr-benefit-item {
    display: flex;
    align-items: center;
    gap: var(--gsr-space-2);
    padding: var(--gsr-space-2);
    font-size: var(--gsr-text-sm);
    color: var(--gsr-text-primary);
    background: var(--gsr-bg-secondary);
    border-radius: var(--gsr-radius-base);
    transition: all var(--gsr-transition-base);
}

.gsr-benefit-item:hover {
    background: var(--gsr-primary-subtle);
}

.gsr-benefit-item i {
    width: 16px;
    height: 16px;
    color: var(--gsr-primary);
    flex-shrink: 0;
}

.gsr-benefit-item span {
    font-weight: var(--gsr-font-medium);
}

/* ============================================
   CRITICAL-005: VALIDEZ DEL PRODUCTO
   ============================================ */

.gsr-product-validity {
    display: inline-flex;
    align-items: center;
    gap: var(--gsr-space-2);
    padding: var(--gsr-space-2) var(--gsr-space-3);
    background: var(--gsr-gradient-info);
    color: var(--gsr-info-dark);
    font-size: var(--gsr-text-xs);
    font-weight: var(--gsr-font-semibold);
    border-radius: var(--gsr-radius-full);
    margin-top: var(--gsr-space-2);
    border: var(--gsr-border-width) solid var(--gsr-info);
}

.gsr-product-validity i {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

/* ============================================
   SISTEMA UNIFICADO: BADGES DE PRODUCTOS
   Badges para promociones, paquetes y urgencia
   ============================================ */

/**
 * Badge base para productos
 * Posicionamiento absoluto en esquina superior derecha
 */
.gsr-product-badge {
    position: absolute;
    top: var(--gsr-space-3);
    right: var(--gsr-space-3);
    display: flex;
    align-items: center;
    gap: var(--gsr-space-2);
    padding: var(--gsr-space-2) var(--gsr-space-3);
    border-radius: var(--gsr-radius-full);
    font-size: var(--gsr-text-xs);
    font-weight: var(--gsr-font-bold);
    text-transform: uppercase;
    letter-spacing: var(--gsr-tracking-wide);
    box-shadow: var(--gsr-shadow-md);
    z-index: 10;
    max-width: 200px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    animation: badgePulse 2s ease-in-out infinite;
}

.gsr-product-badge i {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

/**
 * Badge de Promoción - Gradiente dorado
 */
.gsr-badge-promotion {
    background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%);
    color: var(--gsr-text-inverse);
    border: 2px solid rgba(255, 255, 255, 0.6);
}

/**
 * Badge de Paquete - Gradiente azul
 */
.gsr-badge-bundle {
    background: linear-gradient(135deg, #4A90E2 0%, #357ABD 100%);
    color: var(--gsr-text-inverse);
    border: 2px solid rgba(255, 255, 255, 0.6);
}

/**
 * Badge Crítico - Para promociones que terminan pronto
 * Gradiente rojo con animación más rápida
 */
.gsr-badge-critical {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    color: var(--gsr-text-inverse);
    border: 2px solid rgba(255, 255, 255, 0.8);
    animation: badgeCriticalPulse 1s ease-in-out infinite;
}

/**
 * Badge Ending Soon - Para promociones próximas a expirar
 * Gradiente naranja
 */
.gsr-badge-ending-soon {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: var(--gsr-text-inverse);
    border: 2px solid rgba(255, 255, 255, 0.7);
    animation: badgeWarnPulse 1.5s ease-in-out infinite;
}

/* Animaciones de badges */
@keyframes badgePulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
}

@keyframes badgeCriticalPulse {
    0%, 100% { 
        opacity: 1;
        box-shadow: 0 2px 8px rgba(239, 68, 68, 0.4);
    }
    50% { 
        opacity: 0.85;
        box-shadow: 0 4px 16px rgba(239, 68, 68, 0.7);
    }
}

@keyframes badgeWarnPulse {
    0%, 100% { 
        opacity: 1;
        box-shadow: 0 2px 8px rgba(245, 158, 11, 0.3);
    }
    50% { 
        opacity: 0.9;
        box-shadow: 0 4px 12px rgba(245, 158, 11, 0.6);
    }
}

/* ============================================
   SISTEMA UNIFICADO: COUNTDOWN TIMER
   Timer de cuenta regresiva para promociones
   ============================================ */

/**
 * Contenedor principal del countdown
 * Fondo gris claro con borde izquierdo de acento
 */
.gsr-promo-countdown {
    display: flex;
    align-items: center;
    gap: var(--gsr-space-2);
    padding: var(--gsr-space-3);
    background: var(--gsr-bg-tertiary);
    border-radius: var(--gsr-radius-base);
    margin: var(--gsr-space-3) 0;
    border-left: 3px solid var(--gsr-warning);
}

.gsr-promo-countdown i {
    width: 18px;
    height: 18px;
    color: var(--gsr-warning);
    flex-shrink: 0;
}

/**
 * Contenedor de tiempo
 */
.gsr-countdown-time {
    flex: 1;
    display: flex;
    align-items: center;
    gap: var(--gsr-space-1);
    flex-wrap: wrap;
    font-weight: var(--gsr-font-semibold);
    color: var(--gsr-text-primary);
    font-size: var(--gsr-text-sm);
}

/**
 * Label "Quedan:"
 */
.gsr-countdown-label {
    color: var(--gsr-text-secondary);
    font-weight: var(--gsr-font-normal);
    margin-right: var(--gsr-space-1);
}

/**
 * Display del tiempo (días, horas, minutos)
 */
.gsr-time-display {
    display: inline-flex;
    align-items: center;
    gap: 2px;
}

/**
 * Unidad de tiempo individual (ej: "2d", "14h")
 */
.gsr-time-unit {
    display: inline-flex;
    align-items: center;
    background: var(--gsr-bg-primary);
    border-radius: var(--gsr-radius-sm);
    padding: 2px 6px;
    margin: 0 2px;
    box-shadow: var(--gsr-shadow-xs);
}

/**
 * Número del tiempo (parte numérica)
 */
.gsr-time-number {
    font-family: 'Courier New', monospace;
    font-weight: var(--gsr-font-bold);
    color: var(--gsr-primary);
    min-width: 1.2em;
    text-align: center;
}

/**
 * Label de unidad (d, h, m)
 */
.gsr-time-label {
    font-size: var(--gsr-text-xs);
    color: var(--gsr-text-muted);
    margin-left: 2px;
}

/* ============================================
   SISTEMA UNIFICADO: PROGRESS BAR
   Barra de progreso para tiempo restante de promoción
   ============================================ */

/**
 * Contenedor principal del progress
 */
.gsr-promo-progress {
    margin: var(--gsr-space-3) 0;
}

/**
 * Labels del progress (texto + días restantes)
 */
.gsr-progress-label {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--gsr-space-2);
    font-size: var(--gsr-text-sm);
}

/**
 * Días restantes
 */
.gsr-progress-days {
    color: var(--gsr-text-secondary);
    font-size: var(--gsr-text-xs);
    font-weight: var(--gsr-font-medium);
}

/**
 * Contenedor de la barra (fondo gris)
 */
.gsr-progress-bar-container {
    height: 8px;
    background: var(--gsr-gray-200);
    border-radius: var(--gsr-radius-full);
    overflow: hidden;
    position: relative;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
}

/**
 * Barra de relleno (coloreada según urgencia)
 */
.gsr-progress-bar-fill {
    height: 100%;
    border-radius: var(--gsr-radius-full);
    transition: width 0.6s ease, background-color 0.3s ease;
    position: relative;
    overflow: hidden;
}

/**
 * Colores según nivel de urgencia
 */
.gsr-progress-bar-fill[data-urgency="low"] {
    background: linear-gradient(90deg, #10b981, #059669);
}

.gsr-progress-bar-fill[data-urgency="medium"] {
    background: linear-gradient(90deg, #3b82f6, #2563eb);
}

.gsr-progress-bar-fill[data-urgency="high"] {
    background: linear-gradient(90deg, #f59e0b, #d97706);
}

.gsr-progress-bar-fill[data-urgency="critical"] {
    background: linear-gradient(90deg, #ef4444, #dc2626);
    animation: progressPulseCritical 1.5s ease-in-out infinite;
}

/**
 * Efecto de brillo en la barra
 */
.gsr-progress-bar-fill::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    animation: progressShine 2s ease-in-out infinite;
}

/* Animaciones de progress */
@keyframes progressPulseCritical {
    0%, 100% { 
        opacity: 1; 
    }
    50% { 
        opacity: 0.75; 
    }
}

@keyframes progressShine {
    to { 
        left: 100%; 
    }
}

/* ============================================
   CRITICAL-005: FOOTER DE TARJETA CON PRECIOS
   ============================================ */

.gsr-product-footer {
    display: flex;
    flex-direction: column;
    gap: var(--gsr-space-3);
    padding-top: var(--gsr-space-4);
    border-top: var(--gsr-border-width) solid var(--gsr-border-color);
}

.gsr-product-price {
    flex: 1;
}

.gsr-price-amount {
    font-family: var(--gsr-font-primary);
    font-size: var(--gsr-text-xl);
    font-weight: var(--gsr-font-bold);
    color: var(--gsr-text-primary);
}

.gsr-product-footer .gsr-btn {
    width: 100%;
    justify-content: center;
}

/* ============================================
   CRITICAL-005: PRECIOS MÚLTIPLES (DTone API)
   ============================================ */

.gsr-dtone-pricing {
    display: flex;
    flex-direction: column;
    gap: var(--gsr-space-2);
}

.gsr-price-primary {
    display: flex;
    align-items: baseline;
    gap: var(--gsr-space-2);
}

.gsr-price-primary .gsr-price-amount {
    font-size: var(--gsr-text-2xl);
    font-weight: var(--gsr-font-bold);
    color: var(--gsr-primary);
}

.gsr-price-label {
    font-size: var(--gsr-text-xs);
    color: var(--gsr-text-muted);
    font-weight: var(--gsr-font-medium);
}

.gsr-price-alternatives {
    display: flex;
    align-items: center;
    gap: var(--gsr-space-2);
    font-size: var(--gsr-text-sm);
    color: var(--gsr-text-secondary);
}

.gsr-price-alt {
    font-weight: var(--gsr-font-medium);
}

.gsr-price-separator {
    color: var(--gsr-gray-400);
}

.gsr-price-warning {
    font-size: var(--gsr-text-xs);
    color: var(--gsr-warning-dark);
    padding: var(--gsr-space-1) var(--gsr-space-2);
    background: var(--gsr-warning-light);
    border-radius: var(--gsr-radius-base);
    border: var(--gsr-border-width) solid var(--gsr-warning);
}

.gsr-price-fallback {
    color: var(--gsr-text-muted);
    font-style: italic;
}

/* ============================================
   CRITICAL-005: PRODUCTOS DE RANGO
   ============================================ */

.gsr-range-section {
    margin-top: var(--gsr-space-6);
}

.gsr-range-products {
    display: grid;
    gap: var(--gsr-space-4);
}

.gsr-range-product {
    background: var(--gsr-bg-primary);
    border: var(--gsr-border-width-2) solid var(--gsr-border-color);
    border-radius: var(--gsr-radius-lg);
    padding: var(--gsr-space-5);
    transition: all var(--gsr-transition-base);
}

.gsr-range-product:hover {
    border-color: var(--gsr-primary);
    box-shadow: var(--gsr-shadow-md);
}

.gsr-range-header {
    margin-bottom: var(--gsr-space-4);
}

.gsr-range-header h6 {
    font-family: var(--gsr-font-primary);
    font-size: var(--gsr-text-lg);
    font-weight: var(--gsr-font-bold);
    color: var(--gsr-text-primary);
    margin: 0 0 var(--gsr-space-2) 0;
}

.gsr-range-rates {
    margin: var(--gsr-space-2) 0;
}

.gsr-range-rates small {
    font-size: var(--gsr-text-xs);
    color: var(--gsr-text-muted);
    background: var(--gsr-bg-secondary);
    padding: var(--gsr-space-1) var(--gsr-space-2);
    border-radius: var(--gsr-radius-base);
}

.gsr-range-limits {
    display: flex;
    gap: var(--gsr-space-3);
    margin-top: var(--gsr-space-2);
}

.gsr-range-limits span {
    padding: var(--gsr-space-2) var(--gsr-space-3);
    background: var(--gsr-gradient-info);
    color: var(--gsr-info-dark);
    font-size: var(--gsr-text-sm);
    font-weight: var(--gsr-font-semibold);
    border-radius: var(--gsr-radius-base);
    border: var(--gsr-border-width) solid var(--gsr-info);
}

.gsr-range-input {
    display: flex;
    align-items: flex-end;
    gap: var(--gsr-space-3);
}

.gsr-range-input label {
    display: block;
    font-size: var(--gsr-text-sm);
    font-weight: var(--gsr-font-semibold);
    color: var(--gsr-text-primary);
    margin-bottom: var(--gsr-space-2);
}

.gsr-range-input .gsr-input {
    flex: 1;
}

.gsr-range-input .gsr-btn {
    flex-shrink: 0;
}

/* ============================================
   CRITICAL-005: ESTADO VACÍO
   ============================================ */

.gsr-no-products {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--gsr-space-12) var(--gsr-space-6);
    text-align: center;
    background: var(--gsr-bg-secondary);
    border-radius: var(--gsr-radius-lg);
    border: 2px dashed var(--gsr-border-color);
}

.gsr-no-products i {
    width: 64px;
    height: 64px;
    color: var(--gsr-gray-400);
    margin-bottom: var(--gsr-space-4);
}

.gsr-no-products p {
    font-size: var(--gsr-text-base);
    color: var(--gsr-text-secondary);
    margin: 0;
}

/* ============================================
   BADGES Y ESTADOS
   ============================================ */

.gsr-badge {
    display: inline-block;
    padding: var(--gsr-space-1) var(--gsr-space-3);
    border-radius: var(--gsr-radius-full);
    font-size: var(--gsr-text-xs);
    font-weight: var(--gsr-font-bold);
    text-transform: uppercase;
    letter-spacing: var(--gsr-tracking-wide);
}

.gsr-badge-success {
    background: var(--gsr-success-light);
    color: var(--gsr-success-dark);
}

.gsr-badge-discount {
    background: var(--gsr-warning-light);
    color: var(--gsr-warning-dark);
}

.gsr-badge-popular {
    background: var(--gsr-gradient-accent);
    color: var(--gsr-text-inverse);
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.05); opacity: 0.9; }
}

/* ============================================
   LOADING Y SPINNERS
   ============================================ */

.gsr-loading {
    text-align: center;
    padding: var(--gsr-space-12);
    color: var(--gsr-text-secondary);
}

.gsr-spinner {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 2px solid var(--gsr-border-color);
    border-top: 2px solid var(--gsr-primary);
    border-radius: var(--gsr-radius-full);
    animation: spin 1s linear infinite;
}

.gsr-spinner-large {
    width: 32px;
    height: 32px;
    border-width: 3px;
}

/* Loading state para logos */
.gsr-operator-logo.loading {
    background: linear-gradient(90deg, 
        var(--gsr-gray-200) 25%, 
        var(--gsr-gray-100) 50%, 
        var(--gsr-gray-200) 75%
    );
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
}

/* Error state para logos */
.gsr-operator-logo.error {
    background: var(--gsr-error-light);
    border-color: var(--gsr-error);
}

.gsr-operator-logo.error .gsr-operator-placeholder {
    color: var(--gsr-error);
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

@keyframes bounceIn {
    from {
        opacity: 0;
        transform: scale(0.3);
    }
    50% {
        opacity: 1;
        transform: scale(1.05);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* ============================================
   RESUMEN DE ORDEN - DISEÑO CARDS MODERNO
   ============================================ */

.gsr-summary-cards-wrapper {
    display: flex;
    flex-direction: column;
    gap: var(--gsr-space-5);
}

.gsr-summary-main-title {
    display: flex;
    align-items: center;
    gap: var(--gsr-space-3);
    font-size: var(--gsr-text-lg);
    font-weight: var(--gsr-font-semibold);
    color: var(--gsr-text-primary);
    margin: 0 0 var(--gsr-space-4) 0;
}

.gsr-summary-main-title i {
    width: 20px;
    height: 20px;
    color: var(--gsr-primary);
}

/* Card 1: Producto */
.gsr-summary-product-card {
    background: var(--gsr-bg-primary);
    border: 1px solid var(--gsr-border-color);
    border-radius: var(--gsr-radius-lg);
    padding: var(--gsr-space-5);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.gsr-product-info-header {
    display: flex;
    align-items: center;
    gap: var(--gsr-space-2);
    font-size: var(--gsr-text-sm);
    font-weight: var(--gsr-font-semibold);
    color: var(--gsr-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: var(--gsr-space-4);
}

.gsr-product-info-header i {
    width: 16px;
    height: 16px;
}

.gsr-product-details {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--gsr-space-3);
}

.gsr-detail-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: var(--gsr-space-3);
    border-bottom: 1px solid var(--gsr-border-color-light);
}

.gsr-detail-row:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.gsr-detail-row dt {
    display: flex;
    align-items: center;
    gap: var(--gsr-space-2);
    font-size: var(--gsr-text-sm);
    color: var(--gsr-text-secondary);
    font-weight: var(--gsr-font-medium);
}

.gsr-detail-row dt i {
    width: 16px;
    height: 16px;
}

.gsr-detail-row dd {
    margin: 0;
    font-size: var(--gsr-text-base);
    color: var(--gsr-text-primary);
    text-align: right;
}

.gsr-detail-highlight {
    background: var(--gsr-primary-subtle);
    padding: var(--gsr-space-3);
    border-radius: var(--gsr-radius-base);
    margin-top: var(--gsr-space-2);
    border-bottom: none !important;
}

.gsr-detail-highlight dt {
    color: var(--gsr-primary);
    font-weight: var(--gsr-font-semibold);
}

.gsr-detail-highlight dd {
    font-size: var(--gsr-text-lg);
    font-weight: var(--gsr-font-bold);
    color: var(--gsr-primary);
}

/* Card 2: Pago */
.gsr-summary-payment-card {
    background: var(--gsr-bg-primary);
    border: 2px solid var(--gsr-primary);
    border-radius: var(--gsr-radius-lg);
    padding: var(--gsr-space-5);
    box-shadow: 0 2px 8px rgba(7, 75, 120, 0.08);
}

.gsr-payment-header {
    display: flex;
    align-items: center;
    gap: var(--gsr-space-2);
    font-size: var(--gsr-text-sm);
    font-weight: var(--gsr-font-semibold);
    color: var(--gsr-primary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: var(--gsr-space-4);
}

.gsr-payment-header i {
    width: 16px;
    height: 16px;
}

/* Selector de monedas - Reutiliza estilos de calculator */
.gsr-currency-options {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    gap: var(--gsr-space-3);
    margin-bottom: var(--gsr-space-4);
}

.gsr-currency-option {
    cursor: pointer;
    position: relative;
}

.gsr-currency-option input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.gsr-currency-card {
    background: var(--gsr-bg-primary);
    border: 2px solid var(--gsr-border-color);
    border-radius: var(--gsr-radius-lg);
    padding: var(--gsr-space-4);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--gsr-space-2);
    transition: all 0.2s ease;
    position: relative;
    min-height: 120px;
    cursor: pointer;
}

.gsr-currency-card:hover {
    border-color: var(--gsr-primary-light);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(7, 75, 120, 0.1);
}

.gsr-currency-option input:checked ~ .gsr-currency-card {
    border-color: var(--gsr-primary);
    background: var(--gsr-primary-subtle);
    box-shadow: 0 0 0 3px rgba(7, 75, 120, 0.1);
}

.gsr-currency-flag {
    font-size: 32px;
    line-height: 1;
}

.gsr-currency-details {
    text-align: center;
}

.gsr-currency-amount {
    font-size: var(--gsr-text-xl);
    font-weight: var(--gsr-font-bold);
    color: var(--gsr-text-primary);
    margin-bottom: var(--gsr-space-1);
}

.gsr-currency-label {
    font-size: var(--gsr-text-xs);
    color: var(--gsr-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.gsr-currency-check {
    position: absolute;
    top: var(--gsr-space-2);
    right: var(--gsr-space-2);
    width: 20px;
    height: 20px;
    color: var(--gsr-primary);
    opacity: 0;
    transition: opacity 0.2s ease;
}

.gsr-currency-option input:checked ~ .gsr-currency-card .gsr-currency-check {
    opacity: 1;
}

/* Info de tasa de cambio */
.gsr-exchange-rate-info {
    display: flex;
    align-items: center;
    gap: var(--gsr-space-2);
    padding: var(--gsr-space-2) var(--gsr-space-3);
    background: var(--gsr-bg-secondary);
    border-radius: var(--gsr-radius-base);
    margin-bottom: var(--gsr-space-4);
}

.gsr-exchange-rate-info i {
    width: 14px;
    height: 14px;
    color: var(--gsr-text-secondary);
}

.gsr-exchange-rate-info span {
    font-size: var(--gsr-text-xs);
    color: var(--gsr-text-secondary);
}

/* Total destacado */
.gsr-total-highlight {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--gsr-space-5);
    background: linear-gradient(135deg, var(--gsr-primary-subtle) 0%, var(--gsr-bg-secondary) 100%);
    border: 2px solid var(--gsr-primary);
    border-radius: var(--gsr-radius-lg);
    margin-bottom: var(--gsr-space-4);
}

.gsr-total-label {
    font-size: var(--gsr-text-base);
    font-weight: var(--gsr-font-semibold);
    color: var(--gsr-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.gsr-total-amount {
    font-size: 32px;
    font-weight: var(--gsr-font-bold);
    color: var(--gsr-primary);
    font-family: var(--gsr-font-primary);
    line-height: 1;
}

/* Responsive */
@media (max-width: 768px) {
    .gsr-total-amount {
        font-size: 28px;
    }
    
    .gsr-currency-options {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 480px) {
    .gsr-summary-product-card,
    .gsr-summary-payment-card {
        padding: var(--gsr-space-4);
    }
    
    .gsr-total-highlight {
        flex-direction: column;
        gap: var(--gsr-space-2);
        text-align: center;
    }
    
    .gsr-total-amount {
        font-size: 24px;
    }
}

/* ============================================
   DESTINATARIOS GUARDADOS
   ============================================ */

.gsr-saved-recipients {
    margin-top: var(--gsr-space-8);
    padding-top: var(--gsr-space-6);
    border-top: var(--gsr-border-width) solid var(--gsr-border-color);
}

.gsr-recipients-list {
    display: grid;
    gap: var(--gsr-space-3);
    margin-top: var(--gsr-space-4);
}

.gsr-recipient-item {
    display: flex;
    align-items: center;
    gap: var(--gsr-space-4);
    padding: var(--gsr-space-4);
    background: var(--gsr-bg-secondary);
    border: var(--gsr-border-width) solid var(--gsr-border-color);
    border-radius: var(--gsr-radius-base);
    cursor: pointer;
    transition: all var(--gsr-transition-base);
}

.gsr-recipient-item:hover {
    background: var(--gsr-primary-subtle);
    border-color: var(--gsr-primary);
    transform: translateX(4px);
}

.gsr-recipient-avatar {
    width: 48px;
    height: 48px;
    background: var(--gsr-gradient-primary);
    color: var(--gsr-text-inverse);
    border-radius: var(--gsr-radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: var(--gsr-font-bold);
    font-size: var(--gsr-text-lg);
}

.gsr-recipient-info {
    flex: 1;
}

.gsr-recipient-info strong {
    display: block;
    margin-bottom: var(--gsr-space-1);
    color: var(--gsr-text-primary);
    font-size: var(--gsr-text-base);
}

.gsr-recipient-info span {
    color: var(--gsr-text-secondary);
    font-size: var(--gsr-text-sm);
}

/* ============================================
   PANTALLA DE ÉXITO
   ============================================ */

.gsr-success-screen {
    text-align: center;
    padding: var(--gsr-space-12) var(--gsr-space-6);
}

.gsr-success-icon {
    font-size: var(--gsr-text-6xl);
    color: var(--gsr-success);
    margin-bottom: var(--gsr-space-6);
    animation: successPulse 2s infinite;
}

@keyframes successPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

.gsr-success-screen h2 {
    color: var(--gsr-primary);
    margin-bottom: var(--gsr-space-3);
    font-family: var(--gsr-font-primary);
}

.gsr-success-details {
    background: var(--gsr-gradient-success);
    border-radius: var(--gsr-radius-lg);
    padding: var(--gsr-space-6);
    margin: var(--gsr-space-8) auto;
    max-width: 400px;
    box-shadow: var(--gsr-shadow-md);
}

.gsr-success-details dl {
    margin: 0;
    text-align: left;
}

.gsr-success-actions {
    margin-top: var(--gsr-space-8);
    display: flex;
    gap: var(--gsr-space-3);
    justify-content: center;
    flex-wrap: wrap;
}

/* ============================================
   FEEDBACK Y VALIDACIÓN
   ============================================ */

.gsr-input-feedback {
    margin-top: var(--gsr-space-2);
    padding: var(--gsr-space-2) var(--gsr-space-3);
    border-radius: var(--gsr-radius-base);
    font-size: var(--gsr-text-sm);
    font-weight: var(--gsr-font-medium);
    display: flex;
    align-items: center;
    gap: var(--gsr-space-2);
}

.gsr-input-feedback.gsr-feedback-error {
    background: var(--gsr-error-light);
    color: var(--gsr-error-dark);
    border: var(--gsr-border-width) solid var(--gsr-error);
}

.gsr-input-feedback.gsr-feedback-success {
    background: var(--gsr-success-light);
    color: var(--gsr-success-dark);
    border: var(--gsr-border-width) solid var(--gsr-success);
}

.gsr-input-feedback.gsr-feedback-warning {
    background: var(--gsr-warning-light);
    color: var(--gsr-warning-dark);
    border: var(--gsr-border-width) solid var(--gsr-warning);
}

/* ============================================
   STEPS INDICATOR EN FILA
   ============================================ */

.gsr-steps-indicator {
    display: flex;
    justify-content: space-between;
    position: relative;
    margin-bottom: var(--gsr-space-8);
    padding: 0 var(--gsr-space-4);
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

/* Línea de progreso entre steps */
.gsr-steps-indicator::before {
    content: '';
    position: absolute;
    top: 20px;
    left: 60px;
    right: 60px;
    height: 2px;
    background: var(--gsr-gray-300);
    z-index: 0;
}

/* Cada step individual */
.gsr-step-indicator {
    position: relative;
    z-index: 2;
    text-align: center;
    flex: 1;
    cursor: pointer;
    transition: all var(--gsr-transition-base);
}

/* Número del step */
.gsr-step-number {
    width: 40px;
    height: 40px;
    margin: 0 auto var(--gsr-space-2);
    background: var(--gsr-bg-primary);
    border: 3px solid var(--gsr-gray-300);
    border-radius: var(--gsr-radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: var(--gsr-font-bold);
    color: var(--gsr-gray-500);
    transition: all var(--gsr-transition-base);
    font-size: var(--gsr-text-sm);
}

/* Step activo */
.gsr-step-indicator.active .gsr-step-number {
    background: var(--gsr-gradient-primary);
    border-color: var(--gsr-primary);
    color: var(--gsr-text-inverse);
    transform: scale(1.1);
    box-shadow: 0 0 20px rgba(7, 75, 120, 0.4);
}

/* Step completado */
.gsr-step-indicator.completed .gsr-step-number {
    background: var(--gsr-gradient-accent);
    border-color: var(--gsr-accent);
    color: var(--gsr-text-inverse);
}

.gsr-step-indicator.completed .gsr-step-number::after {
    content: '✓';
    font-size: var(--gsr-text-lg);
    animation: checkIn 0.3s var(--gsr-ease-bounce);
}

@keyframes checkIn {
    0% { transform: scale(0) rotate(-180deg); }
    100% { transform: scale(1) rotate(0); }
}

/* Label del step */
.gsr-step-label {
    font-size: var(--gsr-text-sm);
    font-weight: var(--gsr-font-semibold);
    color: var(--gsr-text-secondary);
    text-transform: uppercase;
    letter-spacing: var(--gsr-tracking-wide);
    opacity: 0.7;
    transition: all var(--gsr-transition-base);
}

.gsr-step-indicator.active .gsr-step-label {
    color: var(--gsr-primary);
    opacity: 1;
    font-weight: var(--gsr-font-bold);
}

.gsr-step-indicator.completed .gsr-step-label {
    color: var(--gsr-accent);
    opacity: 1;
}

/* ============================================
   DESTINATARIOS FRECUENTES - DISEÑO MEJORADO
   ============================================ */

.gsr-recipients-section {
    background: var(--gsr-bg-primary);
    border: var(--gsr-border-width) solid var(--gsr-border-color);
    border-radius: var(--gsr-radius-lg);
    padding: var(--gsr-space-6);
    margin-bottom: var(--gsr-space-5);
    box-shadow: var(--gsr-shadow-md);
    position: relative;
    overflow: hidden;
    transition: all var(--gsr-transition-base);
}

.gsr-recipients-section:hover {
    box-shadow: var(--gsr-shadow-lg);
    transform: translateY(-1px);
}

/* Línea decorativa superior */
.gsr-recipients-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--gsr-gradient-primary);
    z-index: 1;
}

/* Header de la sección */
.gsr-recipients-section .gsr-section-header {
    margin-bottom: var(--gsr-space-4);
}

.gsr-recipients-section .gsr-subsection-title {
    font-family: var(--gsr-font-primary);
    font-size: var(--gsr-text-lg);
    font-weight: var(--gsr-font-bold);
    color: var(--gsr-primary);
    margin: 0 0 var(--gsr-space-2) 0;
    display: flex;
    align-items: center;
    gap: var(--gsr-space-2);
}

.gsr-recipients-section .gsr-section-help {
    font-size: var(--gsr-text-sm);
    color: var(--gsr-text-secondary);
    margin: 0;
    line-height: var(--gsr-leading-relaxed);
}

/* Container principal */
.gsr-recipients-container {
    position: relative;
    min-height: 120px;
}

/* Estado de carga */
.gsr-recipients-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--gsr-space-8) 0;
}

.gsr-loading-spinner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--gsr-space-3);
    color: var(--gsr-text-secondary);
}

.gsr-loading-spinner .gsr-spinner {
    width: 32px;
    height: 32px;
    border: 3px solid var(--gsr-border-color);
    border-top-color: var(--gsr-primary);
    border-radius: var(--gsr-radius-full);
    animation: spin 1s linear infinite;
}

/* Estado vacío */
.gsr-recipients-empty {
    padding: var(--gsr-space-8) var(--gsr-space-4);
}

.gsr-empty-state {
    text-align: center;
    padding: var(--gsr-space-6);
    background: var(--gsr-bg-tertiary);
    border: 2px dashed var(--gsr-border-color);
    border-radius: var(--gsr-radius-lg);
    transition: all var(--gsr-transition-base);
}

.gsr-empty-state:hover {
    border-color: var(--gsr-primary);
    background: var(--gsr-primary-subtle);
}

.gsr-empty-icon {
    width: 48px;
    height: 48px;
    margin: 0 auto var(--gsr-space-4);
    background: var(--gsr-gradient-primary);
    border-radius: var(--gsr-radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gsr-text-inverse);
    font-size: var(--gsr-text-xl);
}

.gsr-empty-state h4 {
    font-family: var(--gsr-font-primary);
    font-size: var(--gsr-text-lg);
    color: var(--gsr-primary);
    margin: 0 0 var(--gsr-space-2) 0;
    font-weight: var(--gsr-font-bold);
}

.gsr-empty-state p {
    font-size: var(--gsr-text-sm);
    color: var(--gsr-text-secondary);
    margin: 0 0 var(--gsr-space-3) 0;
    line-height: var(--gsr-leading-relaxed);
}

.gsr-empty-tip {
    font-size: var(--gsr-text-xs);
    color: var(--gsr-text-muted);
    background: var(--gsr-bg-primary);
    padding: var(--gsr-space-2) var(--gsr-space-3);
    border-radius: var(--gsr-radius-base);
    border: var(--gsr-border-width) solid var(--gsr-border-color);
    display: inline-block;
}

/* Lista de destinatarios con scroll */
.gsr-recipients-list {
    max-height: 200px;
    overflow-y: auto;
    padding: var(--gsr-space-2);
    scrollbar-width: thin;
    scrollbar-color: var(--gsr-primary) var(--gsr-bg-tertiary);
}

.gsr-recipients-list::-webkit-scrollbar {
    width: 6px;
}

.gsr-recipients-list::-webkit-scrollbar-track {
    background: var(--gsr-bg-tertiary);
    border-radius: var(--gsr-radius-base);
}

.gsr-recipients-list::-webkit-scrollbar-thumb {
    background: var(--gsr-primary);
    border-radius: var(--gsr-radius-base);
}

.gsr-recipients-list::-webkit-scrollbar-thumb:hover {
    background: var(--gsr-primary-600);
}

/* ============================================
   ✅ STEP 5: TARJETA DESTINATARIO MEJORADA
   Más espaciosa, mejores transiciones
   ============================================ */

.gsr-recipient-card {
    background: var(--gsr-bg-primary);
    border: var(--gsr-border-width) solid var(--gsr-border-color);
    border-radius: var(--gsr-radius-lg);
    padding: var(--gsr-space-3) var(--gsr-space-4);
    margin-bottom: var(--gsr-space-3);
    display: flex;
    align-items: center;
    gap: var(--gsr-space-3);
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: visible;
    min-height: 64px;
    box-shadow: var(--gsr-shadow-xs);
}

.gsr-recipient-card:last-child {
    margin-bottom: 0;
}

/**
 * Hover state mejorado
 */
.gsr-recipient-card:hover {
    border-color: var(--gsr-primary);
    background: var(--gsr-primary-subtle);
    transform: translateX(6px); /* ✅ Más pronunciado: 4px → 6px */
    box-shadow: var(--gsr-shadow-lg); /* ✅ Elevación mayor */
}

/**
 * Estado selected mejorado con gradient
 */
.gsr-recipient-card.selected {
    border-color: var(--gsr-accent);
    background: linear-gradient(135deg, 
        var(--gsr-accent-subtle) 0%, 
        var(--gsr-bg-primary) 100%
    );
    box-shadow: var(--gsr-shadow-accent);
}

/**
 * Estado focus para accesibilidad
 */
.gsr-recipient-card:focus-visible {
    outline: 2px solid var(--gsr-primary);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px rgba(7, 75, 120, 0.1);
}

.gsr-recipient-card.selected::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: var(--gsr-gradient-accent);
}

/* ============================================
   ✅ STEP 5: AVATAR CON LOGO GOTOSEND
   Avatar rediseñado con logo corporativo
   ============================================ */

/**
 * Avatar contenedor
 * CRÍTICO: overflow: visible para badge bandera fuera
 */
.gsr-recipient-avatar {
    width: 48px; /* ✅ Más grande: 40px → 48px */
    height: 48px;
    border-radius: var(--gsr-radius-full);
    background: var(--gsr-bg-primary); /* ✅ Fondo blanco para logo */
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    position: relative;
    overflow: visible; /* ✅ CRÍTICO: permite bandera fuera */
    border: 2px solid var(--gsr-border-color);
    box-shadow: var(--gsr-shadow-sm);
    transition: all var(--gsr-transition-base);
}

/**
 * Imagen del logo GotoSend
 */
.gsr-recipient-avatar img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: var(--gsr-radius-full);
    padding: 2px;
}

/**
 * Fallback: Iniciales si logo no carga
 */
.gsr-recipient-avatar .gsr-recipient-initials {
    font-size: var(--gsr-text-lg);
    font-weight: var(--gsr-font-bold);
    color: var(--gsr-text-inverse);
    background: var(--gsr-gradient-primary);
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--gsr-radius-full);
}

/**
 * Estados hover - Avatar
 */
.gsr-recipient-card:hover .gsr-recipient-avatar {
    border-color: var(--gsr-primary);
    transform: scale(1.08); /* ✅ Más pronunciado: 1.05 → 1.08 */
    box-shadow: var(--gsr-shadow-md);
}

/**
 * ✅ STEP 5: Badge bandera FUERA del avatar
 * Badge circular sin recortes, posición absoluta arriba-derecha
 */
.gsr-recipient-avatar .gsr-country-flag {
    position: absolute;
    top: -4px; /* ✅ Ajustado: -6px → -4px */
    right: -4px;
    width: 22px; /* ✅ Más grande: 20px → 22px */
    height: 22px;
    background: var(--gsr-bg-primary);
    border: 2px solid var(--gsr-primary); /* ✅ Borde color brand */
    border-radius: var(--gsr-radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--gsr-text-sm);
    z-index: 5; /* ✅ Mayor z-index: 3 → 5 */
    box-shadow: var(--gsr-shadow-md); /* ✅ Shadow más pronunciada */
    transition: all var(--gsr-transition-base);
}

/**
 * Hover en bandera - Micro-interacción
 */
.gsr-recipient-card:hover .gsr-country-flag {
    transform: scale(1.1);
    border-color: var(--gsr-accent);
}

/**
 * ✅ Información con mejor jerarquía
 */
.gsr-recipient-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--gsr-space-1);
}

.gsr-recipient-name {
    font-size: var(--gsr-text-base);
    font-weight: var(--gsr-font-bold);
    color: var(--gsr-text-primary);
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: var(--gsr-leading-tight);
}

.gsr-recipient-phone {
    font-size: var(--gsr-text-sm);
    font-family: var(--gsr-font-mono, monospace);
    font-weight: var(--gsr-font-medium);
    color: var(--gsr-text-secondary);
    margin: 0;
    display: flex;
    align-items: center;
    gap: var(--gsr-space-1);
    line-height: var(--gsr-leading-tight);
}

/**
 * Iconos inline sutiles
 */
.gsr-recipient-phone i,
.gsr-recipient-location i {
    width: 12px;
    height: 12px;
    flex-shrink: 0;
    opacity: 0.7;
}

.gsr-recipient-location {
    font-size: var(--gsr-text-xs);
    color: var(--gsr-text-muted);
    margin: 0;
}

/**
 * ✅ Botón de acción: Acciones con micro-interacción mejorada
 */
.gsr-recipient-actions {
    flex-shrink: 0;
    opacity: 0;
    transform: translateX(16px);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.gsr-recipient-card:hover .gsr-recipient-actions {
    opacity: 1;
    transform: translateX(0);
}

.gsr-btn-use-recipient {
    background: var(--gsr-gradient-primary);
    color: var(--gsr-text-inverse);
    border: none;
    border-radius: var(--gsr-radius-base);
    padding: var(--gsr-space-2) var(--gsr-space-4);
    font-size: var(--gsr-text-sm);
    font-weight: var(--gsr-font-bold);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--gsr-space-2);
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 80px;
    white-space: nowrap;
}

.gsr-btn-use-recipient:hover {
    background: var(--gsr-gradient-accent);
    transform: scale(1.05);
    box-shadow: var(--gsr-shadow-md);
}

.gsr-btn-use-recipient:active {
    transform: scale(0.98); /* ✅ Efecto click */
}

.gsr-btn-use-recipient:focus-visible {
    outline: 2px solid var(--gsr-text-inverse);
    outline-offset: 2px;
}

.gsr-btn-use-recipient i {
    width: 14px; /* ✅ Icono más grande: 12px → 14px */
    height: 14px;
    flex-shrink: 0;
}

/* Información del teléfono en operador */
.gsr-operator-phone-info {
    margin: var(--gsr-space-3) 0;
    padding: var(--gsr-space-3);
    background: var(--gsr-bg-secondary);
    border-radius: var(--gsr-radius-base);
    border-left: 3px solid var(--gsr-primary);
}

.gsr-phone-display {
    display: flex;
    align-items: center;
    gap: var(--gsr-space-2);
    font-size: var(--gsr-text-lg);
    font-weight: var(--gsr-font-semibold);
    color: var(--gsr-text-primary);
}

.gsr-country-flag {
    font-size: var(--gsr-text-xl);
    min-width: 24px;
    text-align: center;
}

.gsr-phone-number {
    font-family: monospace;
    letter-spacing: 0.5px;
}

.gsr-phone-meta {
    color: var(--gsr-text-secondary);
    font-size: var(--gsr-text-xs);
    margin-top: var(--gsr-space-1);
    display: block;
}

/* ============================================
   FASE 2: SISTEMA DE MODALES - OPTIMIZADO v3.7.0
   Modales para operadores y productos agrupados
   ✅ Touch targets WCAG 44px+
   ✅ Performance optimizado
   ✅ Responsive mejorado
   ============================================ */

/* ===================
   MODAL BASE
   =================== */
.gsr-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    padding: var(--gsr-space-4, 1rem);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.gsr-modal.active {
    opacity: 1;
    visibility: visible;
}

.gsr-modal.active .gsr-modal-container {
    animation: modalSlideUp 0.3s ease-out;
}

/* ✅ CAMBIO 5: Animation optimizada sin scale */
@keyframes modalSlideUp {
    from { 
        opacity: 0; 
        transform: translateY(30px);
    }
    to { 
        opacity: 1; 
        transform: translateY(0);
    }
}

/* Overlay - Click fuera para cerrar */
.gsr-modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
}

/* ✅ CAMBIO 5: Contenedor con will-change optimizado */
.gsr-modal-container {
    background: var(--gsr-bg-primary, #ffffff);
    border-radius: var(--gsr-radius-lg, 12px);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    width: 100%;
    max-width: 700px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
    z-index: 1;
    will-change: transform, opacity;
}

.gsr-modal.active .gsr-modal-container {
    will-change: auto;
}

/* ✅ CAMBIO 2: Header con padding balanceado y min-height */
.gsr-modal-header {
    background: var(--gsr-gradient-primary, linear-gradient(135deg, #074b78, #0a6bb0));
    color: var(--gsr-text-inverse, #ffffff);
    padding: var(--gsr-space-5);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--gsr-space-4);
    border-bottom: 2px solid var(--gsr-accent, #00ff88);
    min-height: 64px;
}

/* Título del modal */
.gsr-modal-title {
    font-family: var(--gsr-font-primary, sans-serif);
    font-size: var(--gsr-text-xl, 1.25rem);
    font-weight: var(--gsr-font-bold, 700);
    margin: 0;
    display: flex;
    align-items: center;
    gap: var(--gsr-space-2, 0.5rem);
}

.gsr-modal-title i { 
    width: 24px; 
    height: 24px; 
}

/* ✅ CAMBIO 4: Botón cerrar con touch target WCAG 44px+ */
.gsr-modal-close {
    background: rgba(255, 255, 255, 0.1);
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gsr-text-inverse, #ffffff);
    cursor: pointer;
    transition: all var(--gsr-transition-base, 0.2s ease);
    flex-shrink: 0;
}

.gsr-modal-close:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.5);
    transform: scale(1.1);
}

.gsr-modal-close:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.3);
}

.gsr-modal-close i { 
    width: 24px; 
    height: 24px; 
}

/* ✅ CAMBIO 3: Body con max-height dinámico y overscroll */
.gsr-modal-body {
    padding: 0;
    overflow-y: auto;
    flex: 1;
    max-height: calc(90vh - 140px);
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}

/* Scrollbar personalizada */
.gsr-modal-body::-webkit-scrollbar { 
    width: 8px; 
}

.gsr-modal-body::-webkit-scrollbar-track { 
    background: var(--gsr-bg-tertiary, #f8f9fa); 
}

.gsr-modal-body::-webkit-scrollbar-thumb { 
    background: var(--gsr-gray-400, #ced4da); 
    border-radius: 4px; 
}

.gsr-modal-body::-webkit-scrollbar-thumb:hover { 
    background: var(--gsr-gray-500, #adb5bd); 
}

/* ============================================
   ESTADO DE LOADING PARA MODAL BODY
   ============================================ */

/**
 * Contenedor de loading dentro del modal-body
 * Se muestra mientras se cargan operadores o productos
 */
.gsr-modal-body-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--gsr-space-12) var(--gsr-space-8);
    min-height: 300px;
}

.gsr-modal-body-loading .gsr-spinner-large {
    margin-bottom: var(--gsr-space-4);
}

.gsr-modal-loading-text {
    font-size: var(--gsr-text-base);
    color: var(--gsr-text-secondary);
    text-align: center;
    font-weight: var(--gsr-font-medium);
    margin: 0;
}

.gsr-modal-loading-subtext {
    font-size: var(--gsr-text-sm);
    color: var(--gsr-text-muted); /* ✅ CORREGIDO: tertiary → muted */
    margin-top: var(--gsr-space-2);
    text-align: center;
}

/* Responsive: Loading mobile */
@media (max-width: 640px) {
    .gsr-modal-body-loading {
        padding: var(--gsr-space-8) var(--gsr-space-4);
        min-height: 250px;
    }
    
    .gsr-modal-loading-text {
        font-size: var(--gsr-text-sm);
    }
    
    .gsr-modal-loading-subtext {
        font-size: var(--gsr-text-xs);
    }
}

/* ✅ CAMBIO 7: Footer con padding uniforme y min-height */
.gsr-modal-footer {
    position: sticky;
    bottom: 0;
    background: var(--gsr-bg-primary, #ffffff);
    border-top: 2px solid var(--gsr-border-color, #dee2e6);
    padding: var(--gsr-space-4);
    display: flex;
    flex-direction: column;
    gap: var(--gsr-space-3);
    box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.05);
    min-height: 72px;
}

/* ✅ CAMBIO 6: Footer info con max-width y centrado */
.gsr-modal-footer-info {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--gsr-space-2, 0.5rem);
    font-size: var(--gsr-text-sm, 0.875rem);
    color: var(--gsr-text-secondary, #6c757d);
    flex-wrap: wrap;
    max-width: 600px;
    margin: 0 auto;
    text-align: center;
}

.gsr-modal-footer-info i { 
    width: 16px; 
    height: 16px; 
    color: var(--gsr-success, #28a745); 
}

.gsr-modal-footer-info .gsr-divider {
    color: var(--gsr-border-color, #dee2e6);
    margin: 0 var(--gsr-space-1, 0.25rem);
}

/* ============================================
   MODAL DE PAGO ESPECÍFICO
   ============================================ */

.gsr-payment-modal-container {
    max-width: 600px;
}

.gsr-payment-modal-title {
    display: flex;
    flex-direction: column;
    gap: var(--gsr-space-2);
}

.gsr-payment-modal-total {
    display: flex;
    align-items: center;
    gap: var(--gsr-space-2);
    font-size: var(--gsr-text-base);
    font-weight: var(--gsr-font-medium);
    margin-top: var(--gsr-space-1);
}

.gsr-payment-total-label {
    color: rgba(255, 255, 255, 0.8);
}

.gsr-payment-total-amount {
    font-size: var(--gsr-text-xl);
    font-weight: var(--gsr-font-bold);
    color: var(--gsr-accent);
}

.gsr-payment-modal-content {
    padding: var(--gsr-space-5);
}

.gsr-payment-section-title {
    display: flex;
    align-items: center;
    gap: var(--gsr-space-2);
    font-size: var(--gsr-text-base);
    font-weight: var(--gsr-font-semibold);
    color: var(--gsr-text-primary);
    margin: 0 0 var(--gsr-space-4) 0;
    padding-bottom: var(--gsr-space-3);
    border-bottom: 2px solid var(--gsr-border-color);
}

.gsr-payment-section-title i {
    width: 20px;
    height: 20px;
    color: var(--gsr-primary);
}

.gsr-payment-section {
    margin-bottom: var(--gsr-space-5);
}

.gsr-sender-info {
    margin-bottom: var(--gsr-space-5);
}

.gsr-terms-section {
    margin-bottom: 0;
}

.gsr-payment-security-mini {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--gsr-space-2);
    font-size: var(--gsr-text-xs);
    color: var(--gsr-text-secondary);
    padding: var(--gsr-space-3);
    background: var(--gsr-bg-secondary);
    border-radius: var(--gsr-radius-base);
    margin-bottom: var(--gsr-space-3);
}

.gsr-payment-security-mini i {
    width: 14px;
    height: 14px;
    color: var(--gsr-success);
}

.gsr-payment-security-mini .gsr-divider {
    color: var(--gsr-border-color);
    margin: 0 var(--gsr-space-1);
}

/* Ajustes para Step 3 */
.gsr-summary-navigation {
    margin-top: var(--gsr-space-5);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--gsr-space-3);
}

@media (max-width: 640px) {
    .gsr-summary-navigation {
        grid-template-columns: 1fr;
    }
    
    .gsr-payment-modal-container {
        max-width: 100%;
        max-height: 100vh;
        border-radius: 0;
    }
    
    .gsr-payment-modal-content {
        padding: var(--gsr-space-4);
    }
}

/* ===================
   PRODUCTOS AGRUPADOS EN MODAL
   =================== */

/* Grupo de productos */
.gsr-products-group {
    padding: var(--gsr-space-4, 1rem);
}

/* ✅ CAMBIO 8: Group header con spacing mejorado y acento */
.gsr-products-group-header {
    padding: var(--gsr-space-4);
    background: var(--gsr-gradient-light, linear-gradient(135deg, #f8f9fa, #e9ecef));
    border-radius: var(--gsr-radius-md, 8px);
    margin-bottom: var(--gsr-space-4);
    border-left: 4px solid var(--gsr-primary);
}

.gsr-products-group-header h4 {
    margin: 0;
    font-size: var(--gsr-text-lg, 1.125rem);
    font-weight: var(--gsr-font-semibold, 600);
    display: flex;
    align-items: center;
    gap: var(--gsr-space-2, 0.5rem);
    color: var(--gsr-text-primary, #212529);
    line-height: var(--gsr-leading-tight);
}

/* ✅ CAMBIO 1: Grid de productos responsive optimizado */
.gsr-modal .gsr-products-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--gsr-space-4);
    padding: var(--gsr-space-4);
}

/* ===================
   OPERADORES EN MODAL
   =================== */

/* Grid de operadores en modal - ESPECÍFICO PARA MODAL */
.gsr-modal .gsr-operators-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: var(--gsr-space-4, 1rem);
    padding: var(--gsr-space-6, 2rem);
}

/* Tarjeta de operador en modal */
.gsr-operator-card-modal {
    background: var(--gsr-bg-primary, #ffffff);
    border: 2px solid var(--gsr-border-color, #dee2e6);
    border-radius: var(--gsr-radius-lg, 12px);
    padding: var(--gsr-space-5, 1.5rem);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--gsr-space-4, 1rem);
    transition: all var(--gsr-transition-base, 0.2s ease);
    cursor: pointer;
}

.gsr-operator-card-modal:hover {
    border-color: var(--gsr-primary, #074b78);
    transform: translateY(-4px);
    box-shadow: var(--gsr-shadow-lg, 0 10px 20px rgba(0, 0, 0, 0.15));
}

.gsr-operator-card-modal .gsr-operator-logo {
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--gsr-radius-full, 50%);
    background: var(--gsr-bg-tertiary, #f8f9fa);
    overflow: hidden;
}

.gsr-operator-card-modal .gsr-operator-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.gsr-operator-card-modal .gsr-operator-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: var(--gsr-gray-400, #ced4da);
}

.gsr-operator-card-modal .gsr-operator-placeholder i {
    width: 40px;
    height: 40px;
}

.gsr-operator-card-modal .gsr-operator-info {
    text-align: center;
}

.gsr-operator-card-modal .gsr-operator-info h4 {
    margin: 0 0 var(--gsr-space-1, 0.25rem) 0;
    font-size: var(--gsr-text-base, 1rem);
    font-weight: var(--gsr-font-semibold, 600);
    color: var(--gsr-text-primary, #212529);
}

.gsr-operator-card-modal .gsr-operator-info p {
    margin: 0;
    font-size: var(--gsr-text-sm, 0.875rem);
    color: var(--gsr-text-secondary, #6c757d);
}

/* ===================
   MODAL DE DETECCIÓN DE OPERADOR
   =================== */

.gsr-detection-modal .gsr-modal-container {
    max-width: 450px;
}

.gsr-detection-modal-body {
    padding: var(--gsr-space-8, 2.5rem);
    text-align: center;
}

.gsr-detection-spinner-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--gsr-space-5, 1.5rem);
}

.gsr-detection-spinner {
    width: 64px;
    height: 64px;
    border: 4px solid var(--gsr-border-color, #dee2e6);
    border-top: 4px solid var(--gsr-primary, #074b78);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

.gsr-detection-message {
    font-family: var(--gsr-font-primary, sans-serif);
    font-size: var(--gsr-text-lg, 1.125rem);
    font-weight: var(--gsr-font-semibold, 600);
    color: var(--gsr-text-primary, #212529);
    margin: 0;
}

.gsr-detection-submessage {
    font-size: var(--gsr-text-sm, 0.875rem);
    color: var(--gsr-text-secondary, #6c757d);
    margin: var(--gsr-space-2, 0.5rem) 0 0 0;
}

.gsr-detection-phone {
    display: inline-flex;
    align-items: center;
    gap: var(--gsr-space-2, 0.5rem);
    padding: var(--gsr-space-2, 0.5rem) var(--gsr-space-4, 1rem);
    background: var(--gsr-gradient-info, #e3f2fd);
    border-radius: var(--gsr-radius-full, 999px);
    font-family: monospace;
    font-weight: var(--gsr-font-bold, 700);
    color: var(--gsr-primary, #074b78);
    margin-top: var(--gsr-space-3, 0.75rem);
}

/* ============================================
   RESPONSIVE DESIGN - MOBILE FIRST
   STEP 2: Breakpoints mejorados y específicos
   ============================================ */

/**
 * TABLET (641px - 768px)
 * Ajuste fino de anchos para pantallas medianas
 */
@media (min-width: 641px) and (max-width: 768px) {
    .gsr-phone-input-wrapper .gsr-select {
        min-width: 160px;
        max-width: 180px;
        font-size: var(--gsr-text-sm);
    }
    
    .gsr-phone-compound-input {
        min-width: 180px;
    }
    
    .gsr-country-code-input {
        width: 60px;
        font-size: var(--gsr-text-xs);
    }
    
    .gsr-products-grid,
    .gsr-product-cards {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .gsr-popular-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .gsr-country-dropdown {
        width: 300px;
    }
    
    .gsr-operators-grid {
        grid-template-columns: 1fr;
    }
    
    /* ✅ CAMBIO 1: Grid productos 2 columnas en tablet */
    .gsr-modal .gsr-products-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/**
 * MOBILE (≤ 640px)
 * Layout vertical para mejor usabilidad táctil
 */
@media (max-width: 640px) {
    .gsr-dtone-recharge-wrapper {
        padding: var(--gsr-space-4);
    }
    
    .gsr-form-step {
        padding: var(--gsr-space-5);
    }
    
    .gsr-form-step h3 {
        flex-direction: column;
        text-align: center;
        gap: var(--gsr-space-2);
    }
    
    /* STEP 2: Input teléfono responsive mejorado */
    .gsr-phone-input-wrapper {
        flex-direction: column;
        gap: var(--gsr-space-3);
    }
    
    .gsr-phone-input-wrapper .gsr-select {
        width: 100%;
        max-width: 100%;
        min-width: 100%;
    }
    
    .gsr-phone-compound-input {
        width: 100%;
        min-width: 100%;
    }
    
    .gsr-country-code-input {
        width: 65px;
    }
    
    .gsr-phone-number-input {
        padding: var(--gsr-space-3);
        font-size: var(--gsr-text-sm);
    }
    
    .gsr-country-selector-container {
        width: 100%;
    }
    
    .gsr-country-display {
        justify-content: flex-start;
        padding-left: var(--gsr-space-4);
    }
    
    .gsr-country-name-display {
        display: inline;
        margin-left: var(--gsr-space-2);
    }
    
    .gsr-country-flag-display {
        font-size: var(--gsr-text-xl);
    }
    
    .gsr-country-dropdown {
        width: 100%;
        max-height: 300px;
        left: 0;
        right: 0;
    }
    
    .gsr-popular-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    /* CRITICAL-005: Productos una columna en móvil */
    .gsr-products-grid,
    .gsr-product-cards {
        grid-template-columns: 1fr;
        gap: var(--gsr-space-4);
    }
    
    /* CRITICAL-005: Tabs con scroll en móvil */
    .gsr-product-tabs {
        gap: var(--gsr-space-1);
    }
    
    .gsr-tab-button {
        font-size: var(--gsr-text-sm);
        padding: var(--gsr-space-2) var(--gsr-space-4);
    }
    
    /* CRITICAL-005: Productos de rango adaptados */
    .gsr-range-input {
        flex-direction: column;
        align-items: stretch;
    }
    
    .gsr-range-input .gsr-btn {
        width: 100%;
    }
    
    .gsr-operator-logo {
        width: 80px;
        height: 80px;
    }

    .gsr-operator-option-logo {
        width: 48px;
        height: 48px;
    }

    .gsr-operator-option-logo .gsr-operator-placeholder {
        font-size: var(--gsr-text-base);
    }

    .gsr-operators-grid {
        grid-template-columns: 1fr;
        gap: var(--gsr-space-3);
    }

    .gsr-operator-card {
        flex-direction: column;
        text-align: center;
        gap: var(--gsr-space-4);
    }

    .gsr-operator-details {
        text-align: center;
    }
    
    .gsr-success-actions {
        flex-direction: column;
        align-items: center;
    }
    
    .gsr-phone-separator {
        padding: 0 var(--gsr-space-1);
    }
    
    .gsr-steps-indicator::before {
        left: 40px;
        right: 40px;
    }
    
    .gsr-step-number {
        width: 32px;
        height: 32px;
        font-size: var(--gsr-text-xs);
    }
    
    .gsr-step-label {
        font-size: var(--gsr-text-xs);
    }
    
    /* Sistema unificado: Ajustes mobile */
    .gsr-product-badge {
        font-size: 10px;
        padding: var(--gsr-space-1) var(--gsr-space-2);
        max-width: 150px;
    }
    
    .gsr-product-badge i {
        width: 12px;
        height: 12px;
    }
    
    .gsr-promo-countdown {
        padding: var(--gsr-space-2);
        gap: var(--gsr-space-1);
    }
    
    .gsr-countdown-time {
        font-size: var(--gsr-text-xs);
        flex-wrap: wrap;
    }
    
    .gsr-time-unit {
        padding: 1px 4px;
        margin: 0 1px;
    }
    
    .gsr-progress-label {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--gsr-space-1);
    }
    
    .gsr-progress-bar-container {
        height: 6px;
    }
    
    .gsr-recipients-section {
        padding: var(--gsr-space-4);
        margin-bottom: var(--gsr-space-4);
    }
    
    .gsr-recipient-card {
        padding: var(--gsr-space-3);
        gap: var(--gsr-space-2);
        min-height: 72px;
    }
    
    .gsr-recipient-avatar {
        width: 56px;
        height: 56px;
    }
    
    .gsr-recipient-avatar .gsr-country-flag {
        width: 24px;
        height: 24px;
        font-size: var(--gsr-text-base);
    }
    
    .gsr-recipient-name {
        font-size: var(--gsr-text-base);
    }
    
    .gsr-recipient-phone {
        font-size: var(--gsr-text-sm);
    }

    .gsr-recipient-location {
        font-size: var(--gsr-text-xs);
    }
    
    .gsr-recipient-actions {
        opacity: 1;
        transform: translateX(0);
    }
    
    .gsr-btn-use-recipient {
        padding: var(--gsr-space-2) var(--gsr-space-3);
        font-size: var(--gsr-text-xs);
        min-width: 70px;
    }
    
    .gsr-operator-actions {
        flex-direction: column;
        gap: var(--gsr-space-2);
    }
    
    .gsr-operator-actions .gsr-btn {
        width: 100%;
        justify-content: center;
    }
    
    /* ✅ CAMBIO 2: Modal header mobile padding uniforme */
    .gsr-modal-header {
        padding: var(--gsr-space-4);
        min-height: 56px;
    }
    
    .gsr-modal-title {
        font-size: var(--gsr-text-lg, 1.125rem);
    }
    
    /* ✅ CAMBIO 3: Modal body más altura en mobile */
    .gsr-modal-body {
        max-height: calc(95vh - 120px);
    }
    
    /* ✅ CAMBIO 4: Botón cerrar más grande en mobile (48px) */
    .gsr-modal-close {
        width: 48px;
        height: 48px;
    }
    
    /* ✅ CAMBIO 7: Modal footer mobile padding reducido */
    .gsr-modal-footer {
        padding: var(--gsr-space-3);
        min-height: 64px;
    }
    
    /* ✅ CAMBIO 6: Footer info stack vertical en mobile */
    .gsr-modal-footer-info {
        flex-direction: column;
        gap: var(--gsr-space-1);
        font-size: var(--gsr-text-xs, 0.75rem);
    }
    
    .gsr-modal-footer-info .gsr-divider {
        display: none;
    }
    
    /* ✅ CAMBIO 1: Grid productos 1 columna en mobile */
    .gsr-modal .gsr-products-grid {
        grid-template-columns: 1fr;
        gap: var(--gsr-space-3);
        padding: var(--gsr-space-3);
    }
    
    .gsr-modal .gsr-operators-grid {
        grid-template-columns: 1fr;
        padding: var(--gsr-space-4, 1rem);
    }
}

/* ============================================
   ✅ CAMBIO 9: MODAL BOTTOM SHEET MOBILE MEJORADO
   ============================================ */

@media (max-width: 640px) {
    /* Modal full-height en mobile */
    .gsr-modal {
        padding: 0;
        align-items: flex-end;
    }
    
    .gsr-modal-container {
        max-width: 100%;
        margin: 0;
        border-radius: var(--gsr-radius-lg) var(--gsr-radius-lg) 0 0;
        max-height: 95vh;
        animation: modalSlideUpMobile 0.3s ease-out;
    }
    
    /* Animación desde abajo en mobile */
    @keyframes modalSlideUpMobile {
        from {
            opacity: 0;
            transform: translateY(100%);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
    
    /* Handle visual para arrastrar */
    .gsr-modal-header::before {
        content: '';
        position: absolute;
        top: 8px;
        left: 50%;
        transform: translateX(-50%);
        width: 40px;
        height: 4px;
        background: rgba(255, 255, 255, 0.3);
        border-radius: 2px;
    }
}

/**
 * MOBILE EXTRA SMALL (≤ 375px)
 * Optimización para dispositivos muy pequeños
 */
@media (max-width: 375px) {
    .gsr-recipient-card {
        padding: var(--gsr-space-2);
        gap: var(--gsr-space-2);
    }

    .gsr-recipient-avatar {
        width: 48px;
        height: 48px;
    }

    .gsr-recipient-avatar .gsr-country-flag {
        width: 20px;
        height: 20px;
    }

    .gsr-recipient-name {
        font-size: var(--gsr-text-sm);
    }

    .gsr-phone-input-wrapper {
        gap: var(--gsr-space-2); /* Gap reducido */
    }
    
    .gsr-phone-input-wrapper .gsr-select {
        font-size: var(--gsr-text-sm);
        padding: var(--gsr-space-2) var(--gsr-space-3);
    }
    
    .gsr-country-code-input {
        width: 55px;
        padding: var(--gsr-space-2);
        font-size: var(--gsr-text-xs);
    }
    
    .gsr-phone-separator {
        padding: 0 var(--gsr-space-1);
    }
    
    .gsr-phone-number-input {
        padding: var(--gsr-space-2) var(--gsr-space-3);
        font-size: var(--gsr-text-sm);
    }
}

/* Desktop (1025px+) */
@media (min-width: 1025px) {
    .gsr-dtone-recharge-wrapper {
        padding: var(--gsr-space-6);
    }
    
    .gsr-products-grid,
    .gsr-product-cards {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .gsr-form-step {
        padding: var(--gsr-space-10);
    }
    
    .gsr-operators-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Responsive adicionales para wrapper principal - STEP 1 */
@media (max-width: 768px) {
    .gsr-dtone-recharge-wrapper {
        padding: var(--gsr-space-3); /* 12px en mobile */
    }
    
    .gsr-dtone-recharge-wrapper.gsr-dtone-standalone {
        padding: var(--gsr-space-4); /* 16px en mobile */
        margin: var(--gsr-space-2); /* Margen lateral en mobile */
    }
}

/* Media queries adicionales para modal */
@media (max-width: 480px) {
    .gsr-products-group {
        padding: var(--gsr-space-3, 0.75rem);
    }
    
    .gsr-detection-modal-body {
        padding: var(--gsr-space-6, 2rem);
    }
    
    .gsr-detection-spinner {
        width: 48px;
        height: 48px;
    }
}

/* ============================================
   ACCESIBILIDAD Y PREFERENCIAS
   ============================================ */

@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    
    .gsr-operator-logo:hover,
    .gsr-operator-option:hover,
    .gsr-product-card:hover {
        transform: none;
    }
    
    /* FASE 2: Modal sin animaciones */
    .gsr-modal,
    .gsr-modal-container {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
    
    .gsr-operator-card-modal:hover {
        transform: none;
    }
}

@media (prefers-contrast: high) {
    .gsr-country-display,
    .gsr-phone-compound-input,
    .gsr-product-card,
    .gsr-operator-option {
        border-width: var(--gsr-border-width-3);
    }
    
    .gsr-badge,
    .gsr-success-icon,
    .gsr-promo-badge {
        filter: contrast(1.2);
    }
    
    .gsr-operator-placeholder {
        background: var(--gsr-gray-300);
        color: var(--gsr-gray-700);
    }
}

@media (prefers-color-scheme: dark) {
    [data-theme="auto"] {
        --gsr-bg-primary: var(--gsr-gray-900);
        --gsr-text-primary: var(--gsr-gray-100);
        --gsr-border-color: var(--gsr-gray-700);
    }
    
    .gsr-operator-logo {
        background: var(--gsr-gray-800);
        border-color: var(--gsr-gray-600);
    }
    
    .gsr-operator-placeholder {
        background: linear-gradient(135deg, var(--gsr-gray-800), var(--gsr-gray-700));
        color: var(--gsr-gray-400);
    }
}

/* ============================================
   UTILIDADES
   ============================================ */

.gsr-loading-state {
    opacity: 0.6;
    pointer-events: none;
}

.gsr-loading-state * {
    cursor: wait;
}

.gsr-disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

.gsr-focus-visible:focus-visible {
    outline: 2px solid var(--gsr-primary);
    outline-offset: 2px;
}

.gsr-country-dropdown,
.gsr-all-countries {
    scroll-behavior: smooth;
}

.gsr-country-dropdown::-webkit-scrollbar,
.gsr-all-countries::-webkit-scrollbar {
    width: 6px;
}

.gsr-country-dropdown::-webkit-scrollbar-track,
.gsr-all-countries::-webkit-scrollbar-track {
    background: var(--gsr-gray-100);
    border-radius: var(--gsr-radius-full);
}

.gsr-country-dropdown::-webkit-scrollbar-thumb,
.gsr-all-countries::-webkit-scrollbar-thumb {
    background: var(--gsr-primary);
    border-radius: var(--gsr-radius-full);
}

.gsr-country-dropdown::-webkit-scrollbar-thumb:hover,
.gsr-all-countries::-webkit-scrollbar-thumb:hover {
    background: var(--gsr-primary-dark);
}

@media print {
    .gsr-country-dropdown,
    .gsr-loading,
    .gsr-spinner,
    .gsr-modal {
        display: none;
    }
    
    .gsr-form-step {
        box-shadow: none;
        border: var(--gsr-border-width) solid var(--gsr-gray-400);
        break-inside: avoid;
    }
    
    .gsr-operator-logo,
    .gsr-operator-option-logo {
        print-color-adjust: exact;
    }
}

.gsr-operator-logo,
.gsr-operator-option-logo,
.gsr-product-card {
    will-change: transform;
    backface-visibility: hidden;
}

/* ============================================
   FIN - DTONE RECHARGE CSS v3.7.0
   ✅ STEP 1: Integración Elementor IMPLEMENTADO
   ✅ STEP 2: Input teléfono armonioso IMPLEMENTADO
   ✅ CRITICAL-005 IMPLEMENTADO
   ✅ FASE 2: SISTEMA DE MODALES IMPLEMENTADO
   ✅ MODAL FIX v3.7.0: Touch targets WCAG + Performance + Responsive
   
   CHANGELOG v3.7.0:
   - ✅ CAMBIO 1: Grid productos responsive (1 columna mobile, padding interno)
   - ✅ CAMBIO 2: Modal header padding balanceado (24px desktop, 16px mobile)
   - ✅ CAMBIO 3: Modal body max-height dinámico (90vh-140px, 95vh-120px mobile)
   - ✅ CAMBIO 4: Botón cerrar WCAG 44px desktop / 48px mobile
   - ✅ CAMBIO 5: Animation sin scale + will-change optimizado
   - ✅ CAMBIO 6: Footer info max-width 600px + stack vertical mobile
   - ✅ CAMBIO 7: Footer padding uniforme + min-height
   - ✅ CAMBIO 8: Group header spacing + acento visual
   - ✅ CAMBIO 9: Bottom sheet mobile con animación desde abajo + handle
   ============================================ */