.welcome-banner {
  background: linear-gradient(135deg, var(--azul-gazapo), var(--azul-oscuro));
  padding: 1.5rem;
  border-radius: var(--radius-lg);
  margin-bottom: 2rem;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  box-shadow: var(--shadow-card);
}
.welcome-banner h1 { font-size: 1.875rem; margin: 0; color: var(--texto-claro); font-weight: 800; }
.welcome-banner .highlight { color: var(--coral); }
.welcome-banner p { color: var(--texto-claro-sec); margin: 4px 0 0; font-weight: 500; }
.banner-badges { display: flex; flex-direction: column; gap: 10px; align-items: flex-end; }
.badge-alertas { background: var(--success-bg); color: var(--success); padding: 5px 12px; border-radius: 20px; font-size: var(--font-size-label); font-weight: 700; }
.badge-matching { background: #f3e8ff; color: #6f42c1; padding: 5px 12px; border-radius: 20px; font-size: var(--font-size-label); font-weight: 700; }
.badge-alertas { background: #e8f5e9; color: #2e7d32; padding: 5px 12px; border-radius: 20px; font-size: 0.75rem; font-weight: 700; }
.badge-matching { background: #f3e8ff; color: #6f42c1; padding: 5px 12px; border-radius: 20px; font-size: 0.75rem; font-weight: 700; }

@media (max-width: 768px) {
  .welcome-banner h1  { font-size: 1.5rem; }
  .badge-alertas,
  .badge-matching     { font-size: 0.7rem; padding: 4px 10px; }
}

@media (max-width: 430px) {
  .welcome-banner {
    flex-direction: column;
    gap: 12px;
    padding: 1.25rem;
    margin-bottom: 1.25rem;
  }

  .welcome-banner h1    { font-size: 1.3rem; }
  .welcome-banner p     { font-size: 0.875rem; }

  .banner-badges {
    align-items: flex-start;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px;
  }

  .badge-alertas,
  .badge-matching { font-size: 0.7rem; padding: 4px 10px; }
}