/* ================================================================
   HISTORIAL
   ================================================================ */

.historial-list {
  display:        flex;
  flex-direction: column;
  gap:            var(--space-2);
  margin-top:     var(--space-4);
}

.historial-item {
  display:         flex;
  justify-content: space-between;
  align-items:     center;
  gap:             var(--space-4);
  padding:         var(--space-3) var(--space-5);
  border-radius:   var(--radius-md);
  transition:      transform var(--transition-fast), border-color var(--transition-fast);
  animation:       fadeInUp var(--duration-normal) var(--ease-out) both;
  position:        relative;
  overflow:        hidden;
}

/* Fondo distinto para positivo (ganancia) vs negativo (gasto) */
.historial-positivo-bg {
  background:  rgba(16, 185, 129, 0.07);
  border:      1px solid rgba(16, 185, 129, 0.22);
}

.historial-negativo-bg {
  background:  rgba(239, 68, 68, 0.07);
  border:      1px solid rgba(239, 68, 68, 0.22);
}

.historial-neutral-bg {
  background:  var(--bg-surface-2);
  border:      1px solid var(--border-default);
}

/* Barra de acento izquierda */
.historial-item::before {
  content:  '';
  position: absolute;
  left:     0; top: 0; bottom: 0;
  width:    3px;
}

.historial-positivo-bg::before { background: var(--color-success); }
.historial-negativo-bg::before  { background: var(--color-danger); }
.historial-neutral-bg::before   { background: var(--color-primary); }

.historial-item:hover { transform: translateX(4px); }

.historial-item-title {
  font-size:   var(--text-sm);
  font-weight: var(--weight-semibold);
  color:       var(--text-primary);
  margin:      0 0 2px 0;
}

.historial-item-meta {
  font-size: var(--text-xs);
  color:     var(--text-muted);
  margin:    0;
}

.historial-puntos {
  font-size:   var(--text-md);
  font-weight: var(--weight-extrabold);
  white-space: nowrap;
  flex-shrink: 0;
}

.historial-positivo { color: var(--color-success); text-shadow: 0 0 12px rgba(16,185,129,0.4); }
.historial-negativo { color: var(--color-danger);  text-shadow: 0 0 12px rgba(239,68,68,0.4); }