/* Utilidades y componentes globales para módulos */

/* Chips y badges */
.ui-chip { display:inline-flex; align-items:center; gap:6px; padding:4px 10px; border-radius:999px; font-size:12px; font-weight:600; }
.ui-chip.neutral { background: var(--panel-2); border:1px solid var(--border); color: var(--text); }
.ui-chip.brand { background: linear-gradient(135deg, var(--brand) 0%, var(--brand-light) 100%); color:#fff; border:1px solid transparent; }
.ui-chip.success { background: linear-gradient(135deg, var(--success) 0%, var(--success-light) 100%); color:#fff; }
.ui-chip.warning { background: linear-gradient(135deg, var(--warning) 0%, var(--warning-light) 100%); color:#fff; }
.ui-chip.info { background: linear-gradient(135deg, var(--info) 0%, var(--info-light) 100%); color:#fff; }
.ui-chip.danger { background: linear-gradient(135deg, var(--danger) 0%, var(--danger-light) 100%); color:#fff; }

/* Paneles */
.ui-panel { background: var(--panel); border:1px solid var(--border); border-radius:12px; padding:16px; }
.ui-panel.raised { box-shadow: var(--shadow-md); }

/* Botones */
.ui-btn { padding:10px 14px; border-radius:10px; border:1px solid var(--border); background: linear-gradient(135deg, var(--panel) 0%, var(--panel-2) 100%); color: var(--text); font-weight:600; cursor:pointer; transition: all .2s ease; }
.ui-btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); }
.ui-btn.primary { background: linear-gradient(135deg, var(--brand) 0%, var(--brand-light) 100%); color:#fff; border-color:transparent; }
.ui-btn.success { background: linear-gradient(135deg, var(--success) 0%, var(--success-light) 100%); color:#fff; border-color:transparent; }
.ui-btn.warning { background: linear-gradient(135deg, var(--warning) 0%, var(--warning-light) 100%); color:#fff; border-color:transparent; }
.ui-btn.info { background: linear-gradient(135deg, var(--info) 0%, var(--info-light) 100%); color:#fff; border-color:transparent; }
.ui-btn.danger { background: linear-gradient(135deg, var(--danger) 0%, var(--danger-light) 100%); color:#fff; border-color:transparent; }

/* Alertas */
.ui-alert { border-radius:12px; padding:12px 14px; border:1px solid var(--border); }
.ui-alert.info { background: linear-gradient(135deg, rgba(var(--info-rgb), .08) 0%, rgba(var(--info-light-rgb), .06) 100%); border-color: rgba(var(--info-rgb), .3); }
.ui-alert.success { background: linear-gradient(135deg, rgba(var(--success-rgb), .08) 0%, rgba(var(--success-light-rgb), .06) 100%); border-color: rgba(var(--success-rgb), .3); }
.ui-alert.warning { background: linear-gradient(135deg, rgba(var(--warning-rgb), .08) 0%, rgba(var(--warning-light-rgb), .06) 100%); border-color: rgba(var(--warning-rgb), .3); }
.ui-alert.danger { background: linear-gradient(135deg, rgba(var(--danger-rgb), .08) 0%, rgba(var(--danger-light-rgb), .06) 100%); border-color: rgba(var(--danger-rgb), .3); }

/* Skeletons */
.ui-skeleton { background: linear-gradient(90deg, var(--panel-2) 25%, var(--panel) 37%, var(--panel-2) 63%); background-size: 400% 100%; animation: ui-shimmer 1.4s ease infinite; border-radius: 8px; }
.ui-skeleton.text { height: 12px; }
.ui-skeleton.rect { height: 120px; }
.ui-skeleton.circle { height: 40px; width: 40px; border-radius: 50%; }

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