/* ============================================
   GSR DASHBOARD - PANEL DE USUARIO COMPLETO
   Version: 2.0.0
   Integra elementos visuales de Wizard, Timeline y Calculadora
   ============================================ */

/* ============================================
   CONTENEDOR PRINCIPAL DEL DASHBOARD
   ============================================ */
.gsr-dashboard-container {
  max-width: 1400px;
  margin: 0 auto;
  padding: var(--gsr-space-6);
  animation: fadeInUp 0.6s var(--gsr-ease-out);
}

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

/* ============================================
   HEADER DE BIENVENIDA
   ============================================ */
.gsr-dashboard-welcome {
  background: var(--gsr-gradient-primary);
  color: var(--gsr-text-inverse);
  padding: var(--gsr-space-10) var(--gsr-space-8);
  border-radius: var(--gsr-radius-xl);
  margin-bottom: var(--gsr-space-8);
  text-align: center;
  position: relative;
  overflow: hidden;
  box-shadow: var(--gsr-shadow-xl);
}

.gsr-dashboard-welcome::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--gsr-gradient-mesh);
  opacity: 0.3;
  animation: meshMove 20s ease-in-out infinite;
}

@keyframes meshMove {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(-30px, -30px) scale(1.1); }
  66% { transform: translate(30px, -30px) scale(0.9); }
}

.gsr-dashboard-welcome h2 {
  font-family: var(--gsr-font-primary);
  font-size: var(--gsr-text-4xl);
  font-weight: var(--gsr-font-bold);
  margin: 0 0 var(--gsr-space-3) 0;
  text-transform: uppercase;
  letter-spacing: var(--gsr-tracking-wider);
  position: relative;
  z-index: 1;
}

.gsr-dashboard-welcome p {
  font-size: var(--gsr-text-lg);
  opacity: 0.95;
  margin: 0;
  position: relative;
  z-index: 1;
}

/* ============================================
   QUICK ACTIONS - ACCIONES RÁPIDAS
   ============================================ */
.gsr-dashboard-quick-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--gsr-gap-base);
  margin-bottom: var(--gsr-space-10);
}

.gsr-quick-action-card {
  background: var(--gsr-bg-primary);
  border-radius: var(--gsr-radius-lg);
  padding: var(--gsr-space-8);
  box-shadow: var(--gsr-shadow-md);
  text-align: center;
  position: relative;
  overflow: hidden;
  transition: all var(--gsr-transition-base);
  border: 2px solid transparent;
  cursor: pointer;
}

.gsr-quick-action-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--gsr-shadow-2xl);
  border-color: var(--gsr-primary);
}

.gsr-quick-action-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: var(--gsr-gradient-rainbow);
  transform: scaleX(0);
  transition: transform var(--gsr-transition-base);
}

.gsr-quick-action-card:hover::before {
  transform: scaleX(1);
}

.gsr-quick-action-icon {
  font-size: var(--gsr-text-6xl);
  margin-bottom: var(--gsr-space-4);
  display: block;
  transition: transform var(--gsr-transition-base);
}

.gsr-quick-action-card:hover .gsr-quick-action-icon {
  transform: scale(1.1) rotate(5deg);
}

.gsr-quick-action-card 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;
  text-transform: uppercase;
  letter-spacing: var(--gsr-tracking-wide);
}

.gsr-quick-action-card p {
  color: var(--gsr-gray-600);
  font-size: var(--gsr-text-sm);
  margin: 0 0 var(--gsr-space-4) 0;
  line-height: var(--gsr-leading-relaxed);
}

/* ============================================
   KPI CARDS - ESTADÍSTICAS
   ============================================ */
.gsr-dashboard-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--gsr-gap-sm);
  margin-bottom: var(--gsr-space-8);
}

.gsr-kpi-card {
  background: var(--gsr-bg-primary);
  border-radius: var(--gsr-radius-lg);
  padding: var(--gsr-space-6);
  box-shadow: var(--gsr-shadow-elevation-2);
  position: relative;
  overflow: hidden;
  transition: all var(--gsr-transition-base);
  border-left: 4px solid var(--gsr-primary);
}

.gsr-kpi-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--gsr-shadow-elevation-3);
}

.gsr-kpi-card.success { border-left-color: var(--gsr-success); }
.gsr-kpi-card.warning { border-left-color: var(--gsr-warning); }
.gsr-kpi-card.info { border-left-color: var(--gsr-info); }
.gsr-kpi-card.accent { border-left-color: var(--gsr-accent); }

.gsr-stat-icon {
  width: var(--gsr-kpi-icon-size);
  height: var(--gsr-kpi-icon-size);
  margin: 0 auto var(--gsr-space-3);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--gsr-gradient-info);
  border-radius: var(--gsr-radius-full);
  color: var(--gsr-primary);
  font-size: var(--gsr-text-2xl);
}

.gsr-stat-value {
  font-family: var(--gsr-font-primary);
  font-size: var(--gsr-kpi-value-size);
  font-weight: var(--gsr-font-bold);
  color: var(--gsr-primary);
  line-height: 1;
  margin-bottom: var(--gsr-space-2);
  display: block;
  animation: countUp 1s var(--gsr-ease-out);
}

@keyframes countUp {
  from {
    opacity: 0;
    transform: scale(0.5);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.gsr-stat-label {
  font-size: var(--gsr-text-xs);
  color: var(--gsr-text-secondary);
  text-transform: uppercase;
  letter-spacing: var(--gsr-tracking-wider);
  font-weight: var(--gsr-font-semibold);
  display: block;
}

.gsr-stat-trend {
  position: absolute;
  top: var(--gsr-space-4);
  right: var(--gsr-space-4);
  font-size: var(--gsr-kpi-trend-size);
  font-weight: var(--gsr-font-bold);
  padding: var(--gsr-space-1) var(--gsr-space-2);
  border-radius: var(--gsr-radius-full);
  background: var(--gsr-success-light);
  color: var(--gsr-success-dark);
}

.gsr-stat-trend.down {
  background: var(--gsr-error-light);
  color: var(--gsr-error-dark);
}

/* ============================================
   SISTEMA DE TABS MEJORADO
   ============================================ */
.gsr-tabs {
  display: flex;
  gap: var(--gsr-space-2);
  margin-bottom: var(--gsr-space-6);
  border-bottom: 2px solid var(--gsr-border-color);
  position: relative;
}

.gsr-tab {
  padding: var(--gsr-space-3) var(--gsr-space-6);
  background: transparent;
  border: none;
  border-bottom: 3px solid transparent;
  font-family: var(--gsr-font-secondary);
  font-size: var(--gsr-text-base);
  font-weight: var(--gsr-font-semibold);
  color: var(--gsr-text-secondary);
  cursor: pointer;
  transition: all var(--gsr-transition-base);
  position: relative;
  text-transform: uppercase;
  letter-spacing: var(--gsr-tracking-wide);
}

.gsr-tab:hover {
  color: var(--gsr-primary);
  background: var(--gsr-gray-50);
}

.gsr-tab.is-active,
.gsr-tab[aria-selected="true"] {
  color: var(--gsr-primary);
  border-bottom-color: var(--gsr-accent);
  background: var(--gsr-gradient-info);
}

.gsr-tab-indicator {
  position: absolute;
  bottom: -2px;
  height: 3px;
  background: var(--gsr-gradient-accent);
  transition: all var(--gsr-transition-base);
}

.gsr-tab-panels {
  min-height: 400px;
}

.gsr-tab-panel {
  display: none;
  animation: tabFadeIn var(--gsr-transition-base);
}

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

@keyframes tabFadeIn {
  from {
    opacity: 0;
    transform: translateX(20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* ============================================
   TIMELINE DE TRACKING VISUAL
   ============================================ */
.gsr-tracking-timeline {
  background: var(--gsr-bg-primary);
  padding: var(--gsr-space-8);
  border-radius: var(--gsr-radius-lg);
  box-shadow: var(--gsr-shadow-lg);
  position: relative;
  overflow: hidden;
}

.gsr-timeline {
  position: relative;
  padding: var(--gsr-space-6) 0;
}

.gsr-timeline::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: var(--gsr-timeline-line-width);
  background: linear-gradient(
    180deg,
    var(--gsr-gray-200) 0%,
    var(--gsr-primary) 50%,
    var(--gsr-gray-200) 100%
  );
  transform: translateX(-50%);
}

.gsr-timeline-item {
  position: relative;
  margin: var(--gsr-space-8) 0;
  display: flex;
  align-items: center;
  animation: timelineItemIn 0.6s var(--gsr-ease-out) backwards;
}

.gsr-timeline-item:nth-child(1) { animation-delay: 0.1s; }
.gsr-timeline-item:nth-child(2) { animation-delay: 0.2s; }
.gsr-timeline-item:nth-child(3) { animation-delay: 0.3s; }
.gsr-timeline-item:nth-child(4) { animation-delay: 0.4s; }
.gsr-timeline-item:nth-child(5) { animation-delay: 0.5s; }

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

.gsr-timeline-item:nth-child(odd) {
  flex-direction: row-reverse;
}

.gsr-timeline-content {
  flex: 1;
  padding: var(--gsr-space-5);
  background: var(--gsr-gradient-info);
  border-radius: var(--gsr-radius-lg);
  box-shadow: var(--gsr-shadow-md);
  margin: 0 var(--gsr-timeline-content-spacing);
  position: relative;
  transition: all var(--gsr-transition-base);
}

.gsr-timeline-content:hover {
  transform: scale(1.02);
  box-shadow: var(--gsr-shadow-xl);
}

.gsr-timeline-content::before {
  content: '';
  position: absolute;
  top: 50%;
  width: 0;
  height: 0;
  border: 10px solid transparent;
  transform: translateY(-50%);
}

.gsr-timeline-item:nth-child(odd) .gsr-timeline-content::before {
  left: -20px;
  border-right-color: var(--gsr-bg-primary);
}

.gsr-timeline-item:nth-child(even) .gsr-timeline-content::before {
  right: -20px;
  border-left-color: var(--gsr-bg-primary);
}

.gsr-timeline-dot {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: var(--gsr-timeline-dot-size);
  height: var(--gsr-timeline-dot-size);
  background: var(--gsr-bg-primary);
  border: 4px solid var(--gsr-gray-400);
  border-radius: var(--gsr-radius-full);
  z-index: var(--gsr-z-10);
  transition: all var(--gsr-transition-base);
}

.gsr-timeline-item.completed .gsr-timeline-dot {
  background: var(--gsr-gradient-accent);
  border-color: var(--gsr-accent);
  width: var(--gsr-timeline-dot-size-lg);
  height: var(--gsr-timeline-dot-size-lg);
}

.gsr-timeline-item.active .gsr-timeline-dot {
  background: var(--gsr-gradient-warning);
  border-color: var(--gsr-warning);
  animation: timelinePulse 2s infinite;
}

@keyframes timelinePulse {
  0%, 100% {
    transform: translateX(-50%) scale(1);
    box-shadow: 0 0 0 0 rgba(255, 179, 0, 0.7);
  }
  50% {
    transform: translateX(-50%) scale(1.1);
    box-shadow: 0 0 0 20px rgba(255, 179, 0, 0);
  }
}

.gsr-timeline-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;
}

.gsr-timeline-date {
  font-size: var(--gsr-text-sm);
  color: var(--gsr-text-secondary);
  margin-bottom: var(--gsr-space-2);
}

.gsr-timeline-description {
  font-size: var(--gsr-text-base);
  color: var(--gsr-text-primary);
  line-height: var(--gsr-leading-relaxed);
}

/* ============================================
   CALCULADORA AVANZADA CON GRÁFICO
   ============================================ */
.gsr-calculator-advanced {
  background: var(--gsr-bg-primary);
  border-radius: var(--gsr-radius-xl);
  box-shadow: var(--gsr-shadow-2xl);
  overflow: hidden;
  margin-bottom: var(--gsr-space-8);
}

.gsr-calc-header {
  background: var(--gsr-gradient-primary);
  padding: var(--gsr-space-6);
  text-align: center;
  position: relative;
}

.gsr-calc-header::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--gsr-gradient-rainbow);
  animation: shimmer 3s infinite;
}

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

.gsr-calc-title {
  font-family: var(--gsr-font-primary);
  font-size: var(--gsr-text-2xl);
  color: var(--gsr-text-inverse);
  margin: 0;
  text-transform: uppercase;
  letter-spacing: var(--gsr-tracking-wider);
}

.gsr-calc-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gsr-gap-base);
  padding: var(--gsr-space-8);
}

.gsr-calc-inputs {
  display: flex;
  flex-direction: column;
  gap: var(--gsr-space-4);
}

.gsr-calc-input-group {
  position: relative;
}

.gsr-calc-input-group label {
  display: block;
  margin-bottom: 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: var(--gsr-tracking-wide);
}

.gsr-calc-input {
  width: 100%;
  padding: var(--gsr-space-4);
  font-size: var(--gsr-text-xl);
  font-weight: var(--gsr-font-bold);
  border: 2px solid var(--gsr-border-color);
  border-radius: var(--gsr-radius-lg);
  background: var(--gsr-bg-tertiary);
  transition: all var(--gsr-transition-base);
  text-align: center;
  font-family: var(--gsr-font-primary);
}

.gsr-calc-input:focus {
  outline: none;
  border-color: var(--gsr-primary);
  box-shadow: 0 0 0 4px rgba(7, 75, 120, 0.1);
  background: var(--gsr-bg-primary);
  transform: scale(1.02);
}

.gsr-calc-currency-selector {
  display: flex;
  gap: var(--gsr-space-2);
  margin-bottom: var(--gsr-space-4);
}

.gsr-currency-btn {
  flex: 1;
  padding: var(--gsr-space-3);
  background: var(--gsr-bg-tertiary);
  border: 2px solid var(--gsr-border-color);
  border-radius: var(--gsr-radius-base);
  font-weight: var(--gsr-font-semibold);
  cursor: pointer;
  transition: all var(--gsr-transition-base);
}

.gsr-currency-btn:hover {
  background: var(--gsr-gray-100);
  border-color: var(--gsr-primary);
}

.gsr-currency-btn.active {
  background: var(--gsr-gradient-primary);
  color: var(--gsr-text-inverse);
  border-color: var(--gsr-primary);
}

.gsr-calc-result {
  background: var(--gsr-gradient-info);
  border-radius: var(--gsr-radius-lg);
  padding: var(--gsr-space-6);
  text-align: center;
  position: relative;
  overflow: hidden;
}

.gsr-calc-result::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, var(--gsr-accent) 0%, transparent 70%);
  opacity: 0.1;
  animation: rotate 20s linear infinite;
}

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

.gsr-calc-result-label {
  font-size: var(--gsr-text-sm);
  color: var(--gsr-text-secondary);
  text-transform: uppercase;
  letter-spacing: var(--gsr-tracking-wider);
  margin-bottom: var(--gsr-space-2);
  position: relative;
}

.gsr-calc-result-value {
  font-family: var(--gsr-font-primary);
  font-size: var(--gsr-text-5xl);
  font-weight: var(--gsr-font-bold);
  color: var(--gsr-primary);
  margin: var(--gsr-space-2) 0;
  position: relative;
  animation: resultPulse 0.6s var(--gsr-ease-bounce);
}

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

.gsr-calc-chart {
  height: var(--gsr-chart-height);
  position: relative;
  background: var(--gsr-bg-tertiary);
  border-radius: var(--gsr-radius-lg);
  padding: var(--gsr-space-4);
}

/* ============================================
   TABLA DE ÓRDENES MEJORADA
   ============================================ */
.gsr-orders-table-container {
  background: var(--gsr-bg-primary);
  border-radius: var(--gsr-radius-lg);
  box-shadow: var(--gsr-shadow-lg);
  overflow: hidden;
  margin-bottom: var(--gsr-space-8);
}

.gsr-table-header {
  background: var(--gsr-gradient-primary);
  padding: var(--gsr-space-5) var(--gsr-space-6);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.gsr-table-title {
  font-family: var(--gsr-font-primary);
  font-size: var(--gsr-text-xl);
  color: var(--gsr-text-inverse);
  text-transform: uppercase;
  letter-spacing: var(--gsr-tracking-wider);
}

.gsr-table-filters {
  background: var(--gsr-bg-tertiary);
  padding: var(--gsr-space-4) var(--gsr-space-6);
  display: flex;
  gap: var(--gsr-space-4);
  align-items: center;
  flex-wrap: wrap;
}

.gsr-filter-group {
  display: flex;
  flex-direction: column;
  gap: var(--gsr-space-1);
}

.gsr-filter-label {
  font-size: var(--gsr-text-xs);
  font-weight: var(--gsr-font-semibold);
  color: var(--gsr-text-secondary);
  text-transform: uppercase;
  letter-spacing: var(--gsr-tracking-wide);
}

.gsr-filter-select,
.gsr-filter-input {
  padding: var(--gsr-space-2) var(--gsr-space-3);
  border: 2px solid var(--gsr-border-color);
  border-radius: var(--gsr-radius-base);
  background: var(--gsr-bg-primary);
  font-size: var(--gsr-text-sm);
  transition: all var(--gsr-transition-base);
}

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

.gsr-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}

.gsr-table thead {
  background: var(--gsr-bg-tertiary);
}

.gsr-table th {
  padding: var(--gsr-space-4);
  text-align: left;
  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);
  border-bottom: 2px solid var(--gsr-border-color);
  position: sticky;
  top: 0;
  background: var(--gsr-bg-tertiary);
  z-index: var(--gsr-z-10);
}

.gsr-table tbody tr {
  transition: all var(--gsr-transition-base);
  position: relative;
}

.gsr-table tbody tr:hover {
  background: var(--gsr-gradient-info);
  transform: translateX(4px);
}

.gsr-table tbody tr::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--gsr-primary);
  transform: scaleY(0);
  transition: transform var(--gsr-transition-base);
}

.gsr-table tbody tr:hover::before {
  transform: scaleY(1);
}

.gsr-table td {
  padding: var(--gsr-space-4);
  border-bottom: 1px solid var(--gsr-border-color);
  font-size: var(--gsr-text-sm);
}

/* ============================================
   BADGES DE ESTADO
   ============================================ */
.gsr-status-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--gsr-space-1);
  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);
  white-space: nowrap;
}

.gsr-status-badge.pending {
  background: linear-gradient(135deg, #fff8e1 0%, #ffecb3 100%);
  color: #f57c00;
  border: 1px solid #ffb300;
}

.gsr-status-badge.processing {
  background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
  color: #1565c0;
  border: 1px solid #2196f3;
}

.gsr-status-badge.confirmed {
  background: linear-gradient(135deg, #e0f2f1 0%, #b2dfdb 100%);
  color: #00796b;
  border: 1px solid #00bcd4;
}

.gsr-status-badge.preparing {
  background: linear-gradient(135deg, #fff3e0 0%, #ffe0b2 100%);
  color: #e65100;
  border: 1px solid #ff9800;
}

.gsr-status-badge.in-transfer {
  background: linear-gradient(135deg, #e8eaf6 0%, #c5cae9 100%);
  color: #283593;
  border: 1px solid #3f51b5;
}

.gsr-status-badge.delivered {
  background: linear-gradient(135deg, #e8f5e9 0%, #c8e6c9 100%);
  color: #2e7d32;
  border: 1px solid #4caf50;
}

.gsr-status-badge.failed {
  background: linear-gradient(135deg, #ffebee 0%, #ffcdd2 100%);
  color: #c62828;
  border: 1px solid #f44336;
}

.gsr-status-badge.canceled {
  background: linear-gradient(135deg, #fafafa 0%, #eeeeee 100%);
  color: #424242;
  border: 1px solid #9e9e9e;
}

.gsr-status-badge.refunded {
  background: linear-gradient(135deg, #f3e5f5 0%, #e1bee7 100%);
  color: #6a1b9a;
  border: 1px solid #9c27b0;
}

/* ============================================
   TARJETAS DE DESTINATARIOS
   ============================================ */
.gsr-recipients-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--gsr-gap-base);
  margin-bottom: var(--gsr-space-8);
}

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

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

.gsr-recipient-card.selected {
  background: var(--gsr-gradient-info);
  border-color: var(--gsr-accent);
  box-shadow: 0 0 0 4px rgba(0, 255, 136, 0.2);
}

.gsr-recipient-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: var(--gsr-gradient-rainbow);
  transform: scaleX(0);
  transition: transform var(--gsr-transition-base);
}

.gsr-recipient-card:hover::before {
  transform: scaleX(1);
}

.gsr-recipient-favorite {
  position: absolute;
  top: var(--gsr-space-3);
  right: var(--gsr-space-3);
  color: var(--gsr-warning);
  font-size: var(--gsr-text-xl);
  transition: transform var(--gsr-transition-base);
}

.gsr-recipient-favorite:hover {
  transform: scale(1.2);
}

.gsr-recipient-name {
  font-size: var(--gsr-text-lg);
  font-weight: var(--gsr-font-bold);
  color: var(--gsr-primary);
  margin-bottom: var(--gsr-space-2);
}

.gsr-recipient-phone {
  font-size: var(--gsr-text-sm);
  color: var(--gsr-text-secondary);
  margin-bottom: var(--gsr-space-1);
}

.gsr-recipient-location {
  font-size: var(--gsr-text-sm);
  color: var(--gsr-text-muted);
  display: flex;
  align-items: center;
  gap: var(--gsr-space-1);
}

/* ============================================
   FORMULARIO RÁPIDO DE TRANSFERENCIA
   ============================================ */
.gsr-quick-transfer {
  background: var(--gsr-bg-primary);
  border-radius: var(--gsr-radius-xl);
  padding: var(--gsr-space-8);
  box-shadow: var(--gsr-shadow-xl);
}

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

.gsr-quick-transfer-title {
  font-family: var(--gsr-font-primary);
  font-size: var(--gsr-text-3xl);
  color: var(--gsr-primary);
  margin-bottom: var(--gsr-space-2);
  text-transform: uppercase;
  letter-spacing: var(--gsr-tracking-wider);
}

.gsr-quick-form {
  display: grid;
  gap: var(--gsr-gap-base);
}

.gsr-form-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--gsr-gap-sm);
}

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

.gsr-form-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);
}

.gsr-form-label.required::after {
  content: ' *';
  color: var(--gsr-error);
}

.gsr-form-input,
.gsr-form-select {
  padding: var(--gsr-space-3) var(--gsr-space-4);
  border: 2px solid var(--gsr-border-color);
  border-radius: var(--gsr-radius-base);
  font-size: var(--gsr-text-base);
  transition: all var(--gsr-transition-base);
  background: var(--gsr-bg-tertiary);
}

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

.gsr-form-input.error {
  border-color: var(--gsr-error);
  background: var(--gsr-error-light);
}

.gsr-form-error {
  font-size: var(--gsr-text-xs);
  color: var(--gsr-error);
  margin-top: var(--gsr-space-1);
  display: none;
}

.gsr-form-input.error + .gsr-form-error {
  display: block;
  animation: shake 0.3s;
}

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

/* ============================================
   RESPONSIVE DESIGN
   ============================================ */
@media (max-width: 768px) {
  .gsr-dashboard-container {
    padding: var(--gsr-space-4);
  }
  
  .gsr-dashboard-welcome h2 {
    font-size: var(--gsr-text-2xl);
  }
  
  .gsr-dashboard-quick-actions {
    grid-template-columns: 1fr;
  }
  
  .gsr-dashboard-stats {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .gsr-calc-body {
    grid-template-columns: 1fr;
  }
  
  .gsr-table-filters {
    flex-direction: column;
    align-items: stretch;
  }
  
  .gsr-filter-group {
    width: 100%;
  }
  
  .gsr-recipients-grid {
    grid-template-columns: 1fr;
  }
  
  .gsr-form-row {
    grid-template-columns: 1fr;
  }
  
  .gsr-tabs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  
  .gsr-tab {
    padding: var(--gsr-space-2) var(--gsr-space-4);
    font-size: var(--gsr-text-sm);
  }
  
  .gsr-wizard-steps {
    padding: 0;
  }
  
  .gsr-step-label {
    display: none;
  }
  
  .gsr-timeline-item {
    flex-direction: column !important;
  }
  
  .gsr-timeline-content {
    margin: var(--gsr-space-4) 0 !important;
  }
  
  .gsr-timeline::before {
    left: 20px;
  }
  
  .gsr-timeline-dot {
    left: 20px;
  }
  
  /* Tabla responsive */
  .gsr-table {
    font-size: var(--gsr-text-xs);
  }
  
  .gsr-table th,
  .gsr-table td {
    padding: var(--gsr-space-2);
  }
  
  /* Ocultar columnas menos importantes en móvil */
  .gsr-table th:nth-child(n+4),
  .gsr-table td:nth-child(n+4) {
    display: none;
  }
}

@media (max-width: 480px) {
  .gsr-dashboard-welcome {
    padding: var(--gsr-space-6) var(--gsr-space-4);
  }
  
  .gsr-quick-action-icon {
    font-size: var(--gsr-text-4xl);
  }
  
  .gsr-stat-value {
    font-size: var(--gsr-text-3xl);
  }
  
  .gsr-dashboard-stats {
    grid-template-columns: 1fr;
  }
  
  .gsr-calc-result-value {
    font-size: var(--gsr-text-3xl);
  }
}

/* ============================================
   ANIMACIONES DE CARGA
   ============================================ */
.gsr-skeleton {
  background: linear-gradient(
    90deg,
    var(--gsr-gray-200) 25%,
    var(--gsr-gray-100) 50%,
    var(--gsr-gray-200) 75%
  );
  background-size: 200% 100%;
  animation: loading 1.5s infinite;
}

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

.gsr-spinner {
  width: 40px;
  height: 40px;
  border: 4px solid var(--gsr-gray-200);
  border-top-color: var(--gsr-primary);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

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

/* ============================================
   TOOLTIPS
   ============================================ */
.gsr-tooltip {
  position: relative;
  cursor: help;
}

.gsr-tooltip::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  padding: var(--gsr-space-2) var(--gsr-space-3);
  background: var(--gsr-gray-900);
  color: var(--gsr-text-inverse);
  font-size: var(--gsr-text-xs);
  border-radius: var(--gsr-radius-base);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--gsr-transition-base);
  z-index: var(--gsr-z-tooltip);
}

.gsr-tooltip:hover::after {
  opacity: 1;
}

/* ============================================
   ACCESIBILIDAD - FOCUS VISIBLE
   ============================================ */
*:focus-visible {
  outline: 2px solid var(--gsr-primary);
  outline-offset: 2px;
}

button:focus-visible {
  outline-offset: 4px;
}

/* Skip to content link */
.gsr-skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: var(--gsr-primary);
  color: var(--gsr-text-inverse);
  padding: var(--gsr-space-2) var(--gsr-space-4);
  text-decoration: none;
  z-index: var(--gsr-z-9999);
}

.gsr-skip-link:focus {
  top: 0;
}

/* Screen reader only text */
.gsr-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}