/* 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; } }

/* Paginación compartida para tablas */
.table-pagination {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0.75rem 1.25rem;
	background: var(--panel);
	border: 1px solid var(--border);
	border-radius: 999px;
	margin-top: 0;
	box-shadow: var(--shadow-sm, 0 4px 12px rgba(0,0,0,0.05));
	gap: 1rem;
}

.table-pagination-info {
	color: var(--muted);
	font-size: 0.875rem;
	font-weight: 500;
}

.table-pagination-controls {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.table-pagination-btn {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.5rem 1.25rem;
	border: 1px solid var(--border);
	border-radius: 999px;
	background: var(--panel);
	color: var(--text);
	font-size: 0.875rem;
	font-weight: 500;
	cursor: pointer;
	transition: all 0.2s ease;
}

.table-pagination-btn:hover:not(:disabled) {
	background: var(--panel-2);
	border-color: var(--brand);
	color: var(--brand);
	transform: translateY(-1px);
}

.table-pagination-btn:disabled {
	opacity: 0.5;
	cursor: not-allowed;
	transform: none;
}

.table-pagination-pages {
	display: flex;
	gap: 0.25rem;
	margin: 0 1rem;
}

.table-pagination-page {
	width: 36px;
	height: 36px;
	border: 1px solid var(--border);
	border-radius: 50%;
	background: var(--panel);
	color: var(--text);
	font-size: 0.875rem;
	font-weight: 500;
	cursor: pointer;
	transition: all 0.2s ease;
	display: flex;
	align-items: center;
	justify-content: center;
}

.table-pagination-page:hover {
	background: var(--panel-2);
	border-color: var(--brand);
	color: var(--brand);
	transform: translateY(-1px);
}

.table-pagination-page.active {
	background: var(--brand);
	border-color: var(--brand);
	color: white;
	box-shadow: 0 2px 4px rgba(var(--brand-rgb), 0.2);
}

.table-pagination-page.active:hover {
	background: var(--brand-light);
	transform: translateY(-1px);
}