/**
 * Wapu Admin DS — Components
 *
 * Estilos de los componentes reusables. Cada componente PHP en components/
 * tiene su sección acá. Cero hex codes / px raros — todo viene de tokens.css.
 *
 * @package WapuCore
 * @since   5.0.0
 */

/* ─────────────────────────────────────────────────────────────
 * Icon — atom global
 * ──────────────────────────────────────────────────────────── */
.wa-icon { flex-shrink: 0; vertical-align: middle; }

/* ─────────────────────────────────────────────────────────────
 * App Brand (sidebar header)
 * ──────────────────────────────────────────────────────────── */
.wa-app-brand {
	display: flex;
	align-items: center;
	gap: var(--wa-space-1);
	padding: var(--wa-space-2) var(--wa-space-2);
	color: var(--wa-text);
	text-decoration: none;
	border-radius: var(--wa-radius);
	transition: var(--wa-transition);
}
a.wa-app-brand:hover { background: var(--wa-surface-3); }
.wa-app-brand__icon {
	display: grid;
	place-items: center;
	width: 28px;
	height: 28px;
	flex-shrink: 0;
	font-size: var(--wa-font-md);
}
.wa-app-brand__icon svg { width: 22px; height: 22px; }
.wa-app-brand__meta {
	display: flex;
	flex-direction: column;
	gap: 1px;
	min-width: 0;
}
.wa-app-brand__name {
	font-size: var(--wa-font-md);
	font-weight: var(--wa-weight-bold);
	letter-spacing: var(--wa-tracking-tight);
	line-height: 1.2;
	color: var(--wa-text);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.wa-app-brand__version {
	font-size: var(--wa-font-xs);
	color: var(--wa-text-subtle);
	font-family: var(--wa-font-mono);
	letter-spacing: var(--wa-tracking-tight);
}

/* ─────────────────────────────────────────────────────────────
 * Sidebar Nav
 * ──────────────────────────────────────────────────────────── */
.wa-sidebar-nav {
	display: flex;
	flex-direction: column;
	gap: var(--wa-space-3);
	padding: var(--wa-space-1) var(--wa-space-half);
}
.wa-sidebar-nav__group {
	display: flex;
	flex-direction: column;
	gap: var(--wa-space-half);
}
.wa-sidebar-nav__group-label {
	padding: var(--wa-space-1) var(--wa-space-2) var(--wa-space-half);
	font-size: var(--wa-font-xs);
	font-weight: var(--wa-weight-semibold);
	letter-spacing: var(--wa-tracking-wider);
	text-transform: uppercase;
	color: var(--wa-text-subtle);
}
.wa-sidebar-nav__items {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.wa-sidebar-nav__item {
	display: flex;
	align-items: center;
	gap: var(--wa-space-1);
	padding: var(--wa-space-1) var(--wa-space-2);
	border-radius: var(--wa-radius);
	font-size: var(--wa-font-base);
	font-weight: var(--wa-weight-medium);
	color: var(--wa-text-muted);
	text-decoration: none;
	transition: var(--wa-transition);
	position: relative;
}
.wa-sidebar-nav__item:hover {
	background: var(--wa-surface-3);
	color: var(--wa-text);
}
.wa-sidebar-nav__item.is-active {
	background: var(--wa-a10);
	color: var(--wa-accent);
	font-weight: var(--wa-weight-semibold);
}
.wa-sidebar-nav__icon {
	display: grid;
	place-items: center;
	width: 18px;
	height: 18px;
	flex-shrink: 0;
}
.wa-sidebar-nav__label {
	flex: 1;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.wa-sidebar-nav__warning {
	margin-left: auto;
	flex-shrink: 0;
}
.wa-sidebar-nav__badge {
	margin-left: auto;
	flex-shrink: 0;
}

/* ─────────────────────────────────────────────────────────────
 * Card
 * ──────────────────────────────────────────────────────────── */
.wa-card {
	background: var(--wa-surface);
	border: var(--wa-border-width) solid var(--wa-border-color);
	border-radius: var(--wa-radius-md);
	box-shadow: var(--wa-shadow-xs);
	transition: var(--wa-transition);
	overflow: hidden;
}
.wa-card:hover { box-shadow: var(--wa-shadow-sm); }

.wa-card__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wa-space-2);
	padding: var(--wa-space-2) var(--wa-space-3);
	border-bottom: var(--wa-border-thin) solid var(--wa-border-color-soft);
}
.wa-card__title {
	font-size: var(--wa-font-md);
	font-weight: var(--wa-weight-semibold);
	color: var(--wa-text);
	margin: 0;
	letter-spacing: var(--wa-tracking-tight);
}
.wa-card__action {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: var(--wa-font-sm);
	font-weight: var(--wa-weight-medium);
	color: var(--wa-accent);
	text-decoration: none;
	transition: var(--wa-transition);
}
.wa-card__action:hover { color: var(--wa-accent-hover); }

.wa-card__body { padding: var(--wa-space-3); }
.wa-card--unpadded .wa-card__body { padding: 0; }

.wa-card__footer {
	padding: var(--wa-space-2) var(--wa-space-3);
	border-top: var(--wa-border-thin) solid var(--wa-border-color-soft);
	background: var(--wa-surface-2);
}

/* Card variants */
.wa-card--accent  { border-color: var(--wa-accent-border); }
.wa-card--warning { border-color: var(--wa-warning-border); }
.wa-card--error   { border-color: var(--wa-error-border); }
.wa-card--success { border-color: var(--wa-success-border); }
.wa-card--info    { border-color: var(--wa-info-border); }

/* ─────────────────────────────────────────────────────────────
 * Card Grid
 * ──────────────────────────────────────────────────────────── */
.wa-card-grid {
	display: grid;
	grid-template-columns: repeat(var(--cols, 2), 1fr);
}
.wa-card-grid--cols-1 { grid-template-columns: 1fr; }
.wa-card-grid--cols-2 { grid-template-columns: repeat(2, 1fr); }
.wa-card-grid--cols-3 { grid-template-columns: repeat(3, 1fr); }
.wa-card-grid--cols-4 { grid-template-columns: repeat(4, 1fr); }
.wa-card-grid--gap-sm { gap: var(--wa-space-1); }
.wa-card-grid--gap-md { gap: var(--wa-space-2); }
.wa-card-grid--gap-lg { gap: var(--wa-space-3); }

@media (max-width: 900px) {
	.wa-card-grid--cols-2,
	.wa-card-grid--cols-3,
	.wa-card-grid--cols-4 { grid-template-columns: 1fr; }
}

/* ─────────────────────────────────────────────────────────────
 * Banner
 * ──────────────────────────────────────────────────────────── */
.wa-banner {
	display: flex;
	align-items: flex-start;
	gap: var(--wa-space-2);
	padding: var(--wa-space-2) var(--wa-space-3);
	border: var(--wa-border-width) solid var(--wa-border-color);
	border-radius: var(--wa-radius-md);
	margin-bottom: var(--wa-space-3);
	font-size: var(--wa-font-base);
	line-height: var(--wa-leading-snug);
}
.wa-banner__icon {
	display: grid;
	place-items: center;
	flex-shrink: 0;
	margin-top: 1px;
}
.wa-banner__content { flex: 1; min-width: 0; }
.wa-banner__title {
	font-weight: var(--wa-weight-semibold);
	color: var(--wa-text);
	margin-bottom: 2px;
}
.wa-banner__body {
	color: var(--wa-text-muted);
}
.wa-banner__cta {
	display: inline-flex;
	align-items: center;
	padding: var(--wa-space-1) var(--wa-space-2);
	background: var(--wa-surface);
	border: var(--wa-border-width) solid var(--wa-border-color-strong);
	border-radius: var(--wa-radius);
	font-size: var(--wa-font-sm);
	font-weight: var(--wa-weight-medium);
	color: var(--wa-text);
	text-decoration: none;
	flex-shrink: 0;
	align-self: center;
	transition: var(--wa-transition);
}
.wa-banner__cta:hover { background: var(--wa-surface-3); }
.wa-banner__dismiss {
	background: transparent;
	border: 0;
	color: var(--wa-text-subtle);
	cursor: pointer;
	padding: var(--wa-space-half);
	margin: -4px -4px -4px 0;
	border-radius: var(--wa-radius-sm);
	display: grid;
	place-items: center;
	transition: var(--wa-transition);
	flex-shrink: 0;
}
.wa-banner__dismiss:hover { background: var(--wa-surface-3); color: var(--wa-text); }

/* Banner variants */
.wa-banner--success { background: var(--wa-state-success-bg); border-color: var(--wa-state-success-border); }
.wa-banner--success .wa-banner__icon { color: var(--wa-state-success-fg); }
.wa-banner--warning { background: var(--wa-state-warning-bg); border-color: var(--wa-state-warning-border); }
.wa-banner--warning .wa-banner__icon { color: var(--wa-state-warning-fg); }
.wa-banner--error   { background: var(--wa-state-error-bg);   border-color: var(--wa-state-error-border); }
.wa-banner--error   .wa-banner__icon { color: var(--wa-state-error-fg); }
.wa-banner--info    { background: var(--wa-state-info-bg);    border-color: var(--wa-state-info-border); }
.wa-banner--info    .wa-banner__icon { color: var(--wa-state-info-fg); }
.wa-banner--neutral { background: var(--wa-state-neutral-bg); border-color: var(--wa-state-neutral-border); }
.wa-banner--neutral .wa-banner__icon { color: var(--wa-state-neutral-fg); }

/* ─────────────────────────────────────────────────────────────
 * Alert (inline, smaller than banner)
 * ──────────────────────────────────────────────────────────── */
.wa-alert {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px var(--wa-space-1);
	border-radius: var(--wa-radius);
	font-size: var(--wa-font-sm);
	line-height: var(--wa-leading-snug);
}
.wa-alert__icon { display: grid; place-items: center; flex-shrink: 0; }
.wa-alert__message { color: inherit; }
.wa-alert--success { background: var(--wa-state-success-bg); color: var(--wa-state-success-fg); }
.wa-alert--warning { background: var(--wa-state-warning-bg); color: var(--wa-state-warning-fg); }
.wa-alert--error   { background: var(--wa-state-error-bg);   color: var(--wa-state-error-fg); }
.wa-alert--info    { background: var(--wa-state-info-bg);    color: var(--wa-state-info-fg); }
.wa-alert--neutral { background: var(--wa-state-neutral-bg); color: var(--wa-state-neutral-fg); }

/* ─────────────────────────────────────────────────────────────
 * Empty State
 * ──────────────────────────────────────────────────────────── */
.wa-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--wa-space-1);
	padding: var(--wa-space-4) var(--wa-space-3);
	text-align: center;
	color: var(--wa-text-muted);
}
.wa-empty--compact { padding: var(--wa-space-3) var(--wa-space-2); gap: var(--wa-space-half); }
.wa-empty--hero    { padding: var(--wa-space-6) var(--wa-space-4); gap: var(--wa-space-2); }

.wa-empty__icon {
	color: var(--wa-text-subtle);
	margin-bottom: var(--wa-space-half);
}
.wa-empty__title {
	font-size: var(--wa-font-md);
	font-weight: var(--wa-weight-semibold);
	color: var(--wa-text);
	margin: 0;
	letter-spacing: var(--wa-tracking-tight);
}
.wa-empty--hero .wa-empty__title { font-size: var(--wa-font-lg); }
.wa-empty__message {
	font-size: var(--wa-font-base);
	color: var(--wa-text-muted);
	max-width: 420px;
	margin: 0;
	line-height: var(--wa-leading-snug);
}
.wa-empty__cta {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: var(--wa-space-1) var(--wa-space-3);
	border-radius: var(--wa-radius);
	font-size: var(--wa-font-sm);
	font-weight: var(--wa-weight-medium);
	text-decoration: none;
	transition: var(--wa-transition);
	margin-top: var(--wa-space-1);
}
.wa-empty__cta--primary {
	background: var(--wa-accent);
	color: var(--wa-accent-text);
}
.wa-empty__cta--primary:hover { background: var(--wa-accent-hover); }
.wa-empty__cta--ghost {
	background: transparent;
	color: var(--wa-text);
	border: var(--wa-border-width) solid var(--wa-border-color-strong);
}
.wa-empty__cta--ghost:hover { background: var(--wa-surface-3); }

/* ─────────────────────────────────────────────────────────────
 * Badge
 * ──────────────────────────────────────────────────────────── */
.wa-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 18px;
	height: 18px;
	padding: 0 6px;
	border-radius: var(--wa-radius-pill);
	font-size: var(--wa-font-xs);
	font-weight: var(--wa-weight-semibold);
	letter-spacing: var(--wa-tracking-tight);
	white-space: nowrap;
}
.wa-badge--md { height: 22px; padding: 0 8px; font-size: var(--wa-font-sm); min-width: 22px; }

.wa-badge--default { background: var(--wa-surface-3); color: var(--wa-text-muted); }
.wa-badge--accent  { background: var(--wa-a15); color: var(--wa-accent); }
.wa-badge--success { background: var(--wa-state-success-bg); color: var(--wa-state-success-fg); }
.wa-badge--warning { background: var(--wa-state-warning-bg); color: var(--wa-state-warning-fg); }
.wa-badge--error   { background: var(--wa-state-error-bg); color: var(--wa-state-error-fg); }
.wa-badge--info    { background: var(--wa-state-info-bg); color: var(--wa-state-info-fg); }
.wa-badge--neutral { background: var(--wa-surface-3); color: var(--wa-text-muted); }
.wa-badge--dark    { background: var(--wa-text); color: var(--wa-surface); }

.wa-badge--dot {
	min-width: 8px;
	width: 8px;
	height: 8px;
	padding: 0;
}
.wa-badge--dot.wa-badge--warning { background: var(--wa-warning); }
.wa-badge--dot.wa-badge--error   { background: var(--wa-error); }
.wa-badge--dot.wa-badge--success { background: var(--wa-success); }
.wa-badge--dot.wa-badge--info    { background: var(--wa-info); }
.wa-badge--dot.wa-badge--accent  { background: var(--wa-accent); }

/* ═══════════════════════════════════════════════════════════════
 * v5.1.0 — wa-modal, wa-table, wa-spinner, wa-skeleton, wa-toast
 * ═══════════════════════════════════════════════════════════════ */

/**
 * Wapu Admin DS — Components additions (CANON v5.1)
 *
 * Estos bloques se agregan al final de wapu-core/ds/components.css existente.
 * No reemplazan, no duplican: solo agregan los componentes nuevos consolidados.
 *
 *   1. .wa-modal (+ variants drawer / sheet)
 *   2. .wa-table (+ sortable, paginate, bulk)
 *   3. .wa-spinner / .wa-skeleton (loaders canónicos)
 *   4. .wa-toast (transient feedback)
 *
 * Reglas:
 *   - 0 !important
 *   - 0 hex inline (todo via tokens)
 *   - 0 spacing fuera del grid 8px
 *   - BEM puro (.block__element--modifier)
 *
 * @package WapuCore
 * @since   5.1.0
 */

/* ─────────────────────────────────────────────────────────────
 * 1. MODAL — replaces 8+ custom overlays across plugins
 * ──────────────────────────────────────────────────────────── */

.wa-modal {
	position: fixed;
	inset: 0;
	z-index: var(--wa-z-modal, 1100);
	display: none;
	align-items: center;
	justify-content: center;
	padding: var(--wa-space-3);
	font-family: var(--wa-font-sans);
}

.wa-modal--open {
	display: flex;
}

/* Backdrop */
.wa-modal__backdrop {
	position: fixed;
	inset: 0;
	background: rgba(15, 23, 42, 0.48);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
	cursor: pointer;
	animation: wa-modal-fade-in var(--wa-dur-base, 200ms) var(--wa-ease-out, cubic-bezier(.16,1,.3,1));
}

/* Panel */
.wa-modal__panel {
	position: relative;
	display: flex;
	flex-direction: column;
	max-height: calc(100vh - var(--wa-space-6));
	background: var(--wa-surface, #ffffff);
	border-radius: var(--wa-radius-lg);
	box-shadow: var(--wa-shadow-lg, 0 20px 40px rgba(15, 23, 42, 0.16));
	overflow: hidden;
	animation: wa-modal-slide-up var(--wa-dur-base, 200ms) var(--wa-ease-out, cubic-bezier(.16,1,.3,1));
	width: 100%;
}

/* Sizes */
.wa-modal--sm .wa-modal__panel { max-width: 420px; }
.wa-modal--md .wa-modal__panel { max-width: 640px; }
.wa-modal--lg .wa-modal__panel { max-width: 960px; }
.wa-modal--full .wa-modal__panel { max-width: calc(100vw - var(--wa-space-6)); max-height: calc(100vh - var(--wa-space-6)); }

/* Head */
.wa-modal__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wa-space-2);
	padding: var(--wa-space-2) var(--wa-space-3);
	border-bottom: var(--wa-border-thin) solid var(--wa-border-color);
	flex-shrink: 0;
}

.wa-modal__title {
	margin: 0;
	font-size: var(--wa-font-lg);
	font-weight: var(--wa-weight-semibold);
	letter-spacing: var(--wa-tracking-tight);
	line-height: var(--wa-leading-tight);
	color: var(--wa-text);
}

.wa-modal__close {
	display: grid;
	place-items: center;
	width: 32px;
	height: 32px;
	padding: 0;
	background: transparent;
	border: 0;
	border-radius: var(--wa-radius-sm);
	color: var(--wa-text-muted, #6b7280);
	cursor: pointer;
	transition: background-color var(--wa-dur-fast, 120ms), color var(--wa-dur-fast, 120ms);
}

.wa-modal__close:hover {
	background: var(--wa-surface-3, rgba(15, 23, 42, 0.06));
	color: var(--wa-text);
}

.wa-modal__close:focus-visible {
	outline: 2px solid var(--wa-accent);
	outline-offset: 2px;
}

/* Body */
.wa-modal__body {
	flex: 1;
	overflow-y: auto;
	padding: var(--wa-space-3);
	color: var(--wa-text);
	line-height: var(--wa-leading-normal);
}

/* Foot */
.wa-modal__foot {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: var(--wa-space-1);
	padding: var(--wa-space-2) var(--wa-space-3);
	border-top: var(--wa-border-thin) solid var(--wa-border-color);
	background: var(--wa-surface-2, #f4f4f5);
	flex-shrink: 0;
}

/* ── Variant: drawer (lateral derecha, full-height) ── */
.wa-modal--drawer {
	align-items: stretch;
	justify-content: flex-end;
	padding: 0;
}

.wa-modal--drawer .wa-modal__panel {
	max-height: 100vh;
	height: 100vh;
	border-radius: 0;
	animation: wa-modal-slide-left var(--wa-dur-slow, 360ms) var(--wa-ease-out, cubic-bezier(.16,1,.3,1));
}

.wa-modal--drawer.wa-modal--sm .wa-modal__panel { max-width: 380px; }
.wa-modal--drawer.wa-modal--md .wa-modal__panel { max-width: 520px; }
.wa-modal--drawer.wa-modal--lg .wa-modal__panel { max-width: 720px; }

/* ── Variant: sheet (bottom sheet en mobile) ── */
.wa-modal--sheet {
	align-items: flex-end;
	padding: 0;
}

.wa-modal--sheet .wa-modal__panel {
	border-radius: var(--wa-radius-lg) var(--wa-radius-lg) 0 0;
	max-height: 92vh;
	animation: wa-modal-slide-up var(--wa-dur-slow, 360ms) var(--wa-ease-out, cubic-bezier(.16,1,.3,1));
}

@media (min-width: 720px) {
	/* En desktop, sheet se comporta como modal centrado. */
	.wa-modal--sheet {
		align-items: center;
		padding: var(--wa-space-3);
	}
	.wa-modal--sheet .wa-modal__panel {
		border-radius: var(--wa-radius-lg);
		max-height: calc(100vh - var(--wa-space-6));
	}
}

/* Mobile */
@media (max-width: 480px) {
	.wa-modal:not(.wa-modal--drawer):not(.wa-modal--sheet) {
		padding: var(--wa-space-1);
	}
	.wa-modal__head { padding: var(--wa-space-2); }
	.wa-modal__body { padding: var(--wa-space-2); }
	.wa-modal__foot { padding: var(--wa-space-2); flex-wrap: wrap; }
}

/* Body cuando modal está abierto */
body[data-wa-modal-locked="true"] {
	overflow: hidden;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
	.wa-modal__backdrop,
	.wa-modal__panel { animation: none; }
}

/* Animations */
@keyframes wa-modal-fade-in {
	from { opacity: 0; }
	to { opacity: 1; }
}
@keyframes wa-modal-slide-up {
	from { opacity: 0; transform: translateY(12px); }
	to   { opacity: 1; transform: translateY(0); }
}
@keyframes wa-modal-slide-left {
	from { transform: translateX(100%); }
	to   { transform: translateX(0); }
}

/* ─────────────────────────────────────────────────────────────
 * 2. TABLE — replaces 7 plugin-specific table designs
 * ──────────────────────────────────────────────────────────── */

.wa-table-wrap {
	background: var(--wa-surface);
	border: var(--wa-border-thin) solid var(--wa-border-color);
	border-radius: var(--wa-radius-md);
	overflow: hidden;
}

.wa-table-toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wa-space-2);
	padding: var(--wa-space-2);
	background: var(--wa-surface-2, #f4f4f5);
	border-bottom: var(--wa-border-thin) solid var(--wa-border-color);
	flex-wrap: wrap;
}

.wa-table-toolbar__bulk {
	display: none;
	align-items: center;
	gap: var(--wa-space-1);
	font-size: var(--wa-font-sm);
	color: var(--wa-text-muted, #6b7280);
}

.wa-table-toolbar--has-selection .wa-table-toolbar__bulk { display: flex; }

.wa-table-scroll {
	overflow-x: auto;
}

.wa-table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--wa-font-base);
	color: var(--wa-text);
}

.wa-table thead {
	background: var(--wa-surface-2, #f4f4f5);
}

.wa-table th {
	text-align: left;
	font-weight: var(--wa-weight-semibold);
	font-size: var(--wa-font-sm);
	color: var(--wa-text-muted, #6b7280);
	letter-spacing: var(--wa-tracking-wider, 0.04em);
	text-transform: uppercase;
	padding: var(--wa-space-1) var(--wa-space-2);
	border-bottom: var(--wa-border-thin) solid var(--wa-border-color);
	white-space: nowrap;
	user-select: none;
}

.wa-table th[data-sortable="true"] {
	cursor: pointer;
	transition: color var(--wa-dur-fast, 120ms);
}

.wa-table th[data-sortable="true"]:hover { color: var(--wa-text); }

.wa-table th[data-sort="asc"]::after,
.wa-table th[data-sort="desc"]::after {
	content: '';
	display: inline-block;
	width: 0; height: 0;
	margin-left: 4px;
	vertical-align: middle;
	border-left: 4px solid transparent;
	border-right: 4px solid transparent;
}

.wa-table th[data-sort="asc"]::after  { border-bottom: 4px solid currentColor; }
.wa-table th[data-sort="desc"]::after { border-top: 4px solid currentColor; }

.wa-table td {
	padding: var(--wa-space-2);
	border-bottom: var(--wa-border-thin) solid var(--wa-border-color-soft, rgba(15, 23, 42, 0.05));
	vertical-align: middle;
}

.wa-table tbody tr:last-child td { border-bottom: 0; }
.wa-table tbody tr {
	transition: background-color var(--wa-dur-fast, 120ms);
}
.wa-table tbody tr:hover {
	background: var(--wa-surface-2, #f4f4f5);
}
.wa-table tbody tr[aria-selected="true"] {
	background: var(--wa-a05);
}

.wa-table__col--align-right { text-align: right; }
.wa-table__col--align-center { text-align: center; }

.wa-table__col--checkbox {
	width: 36px;
	padding-right: 0;
}

.wa-table__col--actions {
	width: 1%;
	text-align: right;
	white-space: nowrap;
}

.wa-table__cell-actions {
	display: inline-flex;
	gap: 4px;
	justify-content: flex-end;
}

/* Empty state inside table */
.wa-table__empty {
	padding: var(--wa-space-6);
	text-align: center;
	color: var(--wa-text-muted, #6b7280);
}

/* Pagination */
.wa-table-pagination {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wa-space-2);
	padding: var(--wa-space-1) var(--wa-space-2);
	border-top: var(--wa-border-thin) solid var(--wa-border-color);
	font-size: var(--wa-font-sm);
	color: var(--wa-text-muted, #6b7280);
	flex-wrap: wrap;
}

.wa-table-pagination__info { white-space: nowrap; }

.wa-table-pagination__controls {
	display: flex;
	gap: 4px;
	align-items: center;
}

.wa-table-pagination__btn {
	display: grid;
	place-items: center;
	width: 28px;
	height: 28px;
	padding: 0;
	background: var(--wa-surface);
	border: var(--wa-border-thin) solid var(--wa-border-color);
	border-radius: var(--wa-radius-sm);
	color: var(--wa-text);
	cursor: pointer;
	font-size: var(--wa-font-sm);
	transition: background-color var(--wa-dur-fast, 120ms), border-color var(--wa-dur-fast, 120ms);
}

.wa-table-pagination__btn:hover:not([disabled]) {
	background: var(--wa-surface-2, #f4f4f5);
	border-color: var(--wa-border-color-strong, rgba(15, 23, 42, 0.16));
}

.wa-table-pagination__btn[disabled] {
	opacity: 0.4;
	cursor: not-allowed;
}

.wa-table-pagination__btn[aria-current="page"] {
	background: var(--wa-accent);
	color: #fff;
	border-color: var(--wa-accent);
}

/* Responsive: stack on mobile */
@media (max-width: 720px) {
	.wa-table-toolbar { flex-direction: column; align-items: stretch; }
	.wa-table-pagination { flex-direction: column; }
}

/* ─────────────────────────────────────────────────────────────
 * 3. SPINNER + SKELETON
 * ──────────────────────────────────────────────────────────── */

.wa-spinner {
	display: inline-block;
	width: 16px;
	height: 16px;
	border: 2px solid var(--wa-border-color);
	border-top-color: var(--wa-accent);
	border-radius: var(--wa-radius-pill);
	animation: wa-spin 800ms linear infinite;
}

.wa-spinner--md { width: 24px; height: 24px; border-width: 2px; }
.wa-spinner--lg { width: 32px; height: 32px; border-width: 3px; }

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

.wa-skeleton {
	display: block;
	background: linear-gradient(
		90deg,
		var(--wa-surface-2, #f4f4f5) 0%,
		var(--wa-surface-3, #e9e9eb) 50%,
		var(--wa-surface-2, #f4f4f5) 100%
	);
	background-size: 200% 100%;
	animation: wa-skeleton-shimmer 1400ms ease-in-out infinite;
	border-radius: var(--wa-radius-sm);
}

.wa-skeleton--text   { height: var(--wa-font-base); margin-block: 4px; border-radius: var(--wa-radius-sm); }
.wa-skeleton--title  { height: var(--wa-font-lg); width: 60%; }
.wa-skeleton--avatar { width: 40px; height: 40px; border-radius: var(--wa-radius-pill); }
.wa-skeleton--card   { height: 120px; border-radius: var(--wa-radius-md); }

@keyframes wa-skeleton-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }

@media (prefers-reduced-motion: reduce) {
	.wa-spinner, .wa-skeleton { animation: none; }
}

/* ─────────────────────────────────────────────────────────────
 * 4. TOAST — transient feedback
 * ──────────────────────────────────────────────────────────── */

.wa-toast-region {
	position: fixed;
	bottom: var(--wa-space-3);
	right: var(--wa-space-3);
	z-index: var(--wa-z-toast, 1200);
	display: flex;
	flex-direction: column;
	gap: var(--wa-space-1);
	pointer-events: none;
	max-width: 380px;
}

@media (max-width: 480px) {
	.wa-toast-region {
		left: var(--wa-space-2);
		right: var(--wa-space-2);
		bottom: var(--wa-space-2);
		max-width: none;
	}
}

.wa-toast {
	pointer-events: auto;
	display: flex;
	align-items: center;
	gap: var(--wa-space-1);
	padding: var(--wa-space-1) var(--wa-space-2);
	background: var(--wa-surface);
	border: var(--wa-border-thin) solid var(--wa-border-color);
	border-radius: var(--wa-radius-md);
	box-shadow: var(--wa-shadow-md, 0 8px 24px rgba(15, 23, 42, 0.10));
	font-size: var(--wa-font-base);
	color: var(--wa-text);
	animation: wa-toast-slide-in var(--wa-dur-base, 200ms) var(--wa-ease-out, cubic-bezier(.16,1,.3,1));
}

.wa-toast--success { border-left: 3px solid var(--wa-success); }
.wa-toast--error   { border-left: 3px solid var(--wa-error); }
.wa-toast--warning { border-left: 3px solid var(--wa-warning); }
.wa-toast--info    { border-left: 3px solid var(--wa-info); }

.wa-toast__icon { flex-shrink: 0; }
.wa-toast__body { flex: 1; min-width: 0; }
.wa-toast__action {
	background: transparent;
	border: 0;
	color: var(--wa-accent);
	cursor: pointer;
	font: inherit;
	font-weight: var(--wa-weight-semibold);
	padding: 4px 8px;
}

.wa-toast--leaving { animation: wa-toast-slide-out var(--wa-dur-base, 200ms) var(--wa-ease-in, cubic-bezier(.4,0,1,1)) forwards; }

@keyframes wa-toast-slide-in  { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: translateX(0); } }
@keyframes wa-toast-slide-out { to   { opacity: 0; transform: translateX(40px); } }

/* ═══════════════════════════════════════════════════════════════
 * v5.2.0 — wa-tabs, wa-table expand-row, wa-empty refinements
 * ═══════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────
 * 5.2.0 — TABS
 * Variants: topbar | inline | vertical | rail
 * ──────────────────────────────────────────────────────────── */
.wa-tabs {
	display: flex;
	font-family: var(--wa-font-sans);
}

.wa-tabs__list {
	display: flex;
	gap: var(--wa-space-half);
	flex-wrap: wrap;
}

.wa-tabs__item {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: var(--wa-space-1) var(--wa-space-2);
	font-size: var(--wa-font-base);
	font-weight: var(--wa-weight-medium);
	color: var(--wa-text-muted);
	text-decoration: none;
	background: transparent;
	border: 0;
	cursor: pointer;
	transition: var(--wa-transition);
	font-family: inherit;
	line-height: var(--wa-leading-tight);
}

.wa-tabs__item:hover {
	color: var(--wa-text);
}

.wa-tabs__item:focus-visible {
	outline: none;
	box-shadow: var(--wa-focus-ring);
}

.wa-tabs__item--active {
	color: var(--wa-accent);
}

.wa-tabs__icon {
	display: inline-flex;
	flex-shrink: 0;
}

.wa-tabs__label {
	white-space: nowrap;
}

.wa-tabs__label--sr {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.wa-tabs__badge {
	display: inline-grid;
	place-items: center;
	min-width: 18px;
	padding: 0 6px;
	height: 18px;
	font-size: var(--wa-font-xs);
	font-weight: var(--wa-weight-bold);
	background: var(--wa-surface-3);
	color: var(--wa-text-muted);
	border-radius: var(--wa-radius-pill);
	margin-left: 4px;
}

.wa-tabs__item--active .wa-tabs__badge {
	background: var(--wa-a15);
	color: var(--wa-accent);
}

/* ── Variant: topbar (horizontal, underline activo) ── */
.wa-tabs--topbar {
	border-bottom: var(--wa-border-thin) solid var(--wa-border-color);
}

.wa-tabs--topbar .wa-tabs__list {
	gap: 0;
	flex-wrap: nowrap;
	overflow-x: auto;
}

.wa-tabs--topbar .wa-tabs__item {
	border-bottom: 2px solid transparent;
	margin-bottom: -1px;
	padding-bottom: 10px;
}

.wa-tabs--topbar .wa-tabs__item--active {
	border-bottom-color: var(--wa-accent);
}

/* ── Variant: inline (pills compactas) ── */
.wa-tabs--inline .wa-tabs__list {
	background: var(--wa-surface-3);
	padding: var(--wa-space-half);
	border-radius: var(--wa-radius);
	gap: 2px;
}

.wa-tabs--inline .wa-tabs__item {
	padding: 6px 12px;
	border-radius: calc(var(--wa-radius) - 4px);
}

.wa-tabs--inline .wa-tabs__item--active {
	background: var(--wa-surface);
	color: var(--wa-text);
	box-shadow: var(--wa-shadow-xs);
}

/* ── Variant: vertical (column nav) ── */
.wa-tabs--vertical .wa-tabs__list {
	flex-direction: column;
	gap: 2px;
	width: 100%;
}

.wa-tabs--vertical .wa-tabs__item {
	width: 100%;
	justify-content: flex-start;
	padding: var(--wa-space-1) var(--wa-space-2);
	border-radius: var(--wa-radius);
}

.wa-tabs--vertical .wa-tabs__item:hover {
	background: var(--wa-surface-3);
}

.wa-tabs--vertical .wa-tabs__item--active {
	background: var(--wa-a05);
	color: var(--wa-accent);
}

/* ── Variant: rail (icon-only column) ── */
.wa-tabs--rail .wa-tabs__list {
	flex-direction: column;
	gap: 4px;
	width: 56px;
}

.wa-tabs--rail .wa-tabs__item {
	width: 56px;
	height: 48px;
	padding: 0;
	border-radius: var(--wa-radius);
	justify-content: center;
}

.wa-tabs--rail .wa-tabs__item:hover {
	background: var(--wa-surface-3);
}

.wa-tabs--rail .wa-tabs__item--active {
	background: var(--wa-a05);
	color: var(--wa-accent);
}

.wa-tabs--rail .wa-tabs__icon svg {
	width: 20px;
	height: 20px;
}

/* ── Sizes ── */
.wa-tabs--size-sm .wa-tabs__item {
	padding: 6px 10px;
	font-size: var(--wa-font-sm);
}

.wa-tabs--size-lg .wa-tabs__item {
	padding: 12px var(--wa-space-2);
	font-size: var(--wa-font-md);
}

/* ─────────────────────────────────────────────────────────────
 * 5.2.0 — TABLE expand-row
 * ──────────────────────────────────────────────────────────── */
.wa-table__col--expand {
	width: 32px;
	padding-right: 0;
}

.wa-table__expand-btn {
	display: grid;
	place-items: center;
	width: 24px;
	height: 24px;
	padding: 0;
	background: transparent;
	border: 0;
	border-radius: var(--wa-radius-sm);
	color: var(--wa-text-muted);
	cursor: pointer;
	transition: var(--wa-transition);
}

.wa-table__expand-btn:hover {
	background: var(--wa-surface-3);
	color: var(--wa-text);
}

.wa-table__expand-btn:focus-visible {
	outline: none;
	box-shadow: var(--wa-focus-ring);
}

.wa-table__expand-btn svg {
	transition: transform var(--wa-dur-fast) var(--wa-ease);
}

.wa-table__row--expanded .wa-table__expand-btn svg {
	transform: rotate(180deg);
}

.wa-table__row--expandable {
	cursor: default;
}

.wa-table__row--expanded {
	background: var(--wa-surface-2);
}

.wa-table__expanded-row > .wa-table__expanded-cell {
	padding: var(--wa-space-2);
	background: var(--wa-surface-2);
	border-bottom: var(--wa-border-thin) solid var(--wa-border-color);
}

.wa-table__expanded-row[hidden] {
	display: none;
}

/* ─────────────────────────────────────────────────────────────
 * 5.2.0 — EMPTY STATE refinements (compact + hero variants)
 * Existing .wa-empty queda. Estos add más variants y polish.
 * ──────────────────────────────────────────────────────────── */
.wa-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding: var(--wa-space-4);
	font-family: var(--wa-font-sans);
}

.wa-empty__icon {
	color: var(--wa-text-subtle);
	margin-bottom: var(--wa-space-1);
	display: grid;
	place-items: center;
}

.wa-empty__icon svg {
	display: block;
}

.wa-empty__title {
	font-size: var(--wa-font-md);
	font-weight: var(--wa-weight-semibold);
	color: var(--wa-text);
	margin: 0 0 4px 0;
	line-height: var(--wa-leading-tight);
}

.wa-empty__desc {
	font-size: var(--wa-font-base);
	color: var(--wa-text-muted);
	margin: 0;
	max-width: 320px;
	line-height: var(--wa-leading-normal);
}

.wa-empty__action {
	margin-top: var(--wa-space-2);
}

/* ── Variant: default (heredan estilos base; clase declarada explícitamente para consistencia BEM) ── */
.wa-empty--default {
	/* Default variant — uses base .wa-empty styles. */
}

/* ── Variant: compact (in-table, etc.) ── */
.wa-empty--compact {
	padding: var(--wa-space-3);
}

.wa-empty--compact .wa-empty__icon {
	margin-bottom: 4px;
}

.wa-empty--compact .wa-empty__title {
	font-size: var(--wa-font-base);
}

.wa-empty--compact .wa-empty__desc {
	font-size: var(--wa-font-sm);
}

/* ── Variant: hero (large, dramatic) ── */
.wa-empty--hero {
	padding: var(--wa-space-8) var(--wa-space-4);
}

.wa-empty--hero .wa-empty__icon {
	margin-bottom: var(--wa-space-2);
}

.wa-empty--hero .wa-empty__title {
	font-size: var(--wa-font-xl);
}

.wa-empty--hero .wa-empty__desc {
	font-size: var(--wa-font-md);
	max-width: 480px;
}


/* ═══════════════════════════════════════════════════════════════════════════════
 * WIZARD (CANON v5.3.0)
 *
 * Multi-step wizard component. Selectors are grouped (canon BEM + legacy
 * `.wapu-wiz-*`) so a single rule applies to both class names emitted by
 * the dual-class helper in `components/wizard.php`.
 *
 * Migrated from inline <style> in `wapu-ui-wizard.php` (legacy, pre-5.3.0).
 * Tokens preserved 1:1 with fallbacks for backward visual compat.
 * ═══════════════════════════════════════════════════════════════════════════════ */

.wa-wizard,
.wapu-wiz {
	max-width: 720px;
	margin: 0 auto;
}

/* ── Step indicator ──────────────────────────────────────────────────────── */

.wa-wizard__indicator,
.wapu-wiz-indicator {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0;
	margin: 0 0 32px;
	padding: 0;
}

.wa-wizard__dot,
.wapu-wiz-dot {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	border: .5px solid rgba(0, 0, 0, .06);
	background: rgba(255, 255, 255, .85);
	font-size: 16px;
	flex-shrink: 0;
	transition: all .2s;
}

.wa-wizard__dot.is-active,
.wa-wizard__dot--active,
.wapu-wiz-dot.is-active {
	background: var(--wa-accent, #7c3aed);
	border-color: var(--wa-accent, #7c3aed);
	box-shadow: 0 2px 8px var(--wa-a18, rgba(124, 58, 237, .18));
}

.wa-wizard__dot.is-active .wa-wizard__dot-icon,
.wa-wizard__dot--active .wa-wizard__dot-icon,
.wa-wizard__dot.is-active .wapu-wiz-dot-icon,
.wapu-wiz-dot.is-active .wapu-wiz-dot-icon,
.wapu-wiz-dot.is-active .wa-wizard__dot-icon {
	filter: brightness(0) invert(1);
}

.wa-wizard__dot.is-done,
.wa-wizard__dot--done,
.wapu-wiz-dot.is-done {
	background: var(--wapu-green, #059669);
	border-color: var(--wapu-green, #059669);
}

.wa-wizard__dot.is-done .wa-wizard__dot-icon,
.wa-wizard__dot--done .wa-wizard__dot-icon,
.wapu-wiz-dot.is-done .wapu-wiz-dot-icon,
.wa-wizard__dot.is-done .wapu-wiz-dot-icon,
.wapu-wiz-dot.is-done .wa-wizard__dot-icon {
	display: none;
}

.wa-wizard__dot.is-done::after,
.wa-wizard__dot--done::after,
.wapu-wiz-dot.is-done::after {
	content: '✓';
	color: #fff;
	font-size: 14px;
	font-weight: 700;
}

.wa-wizard__dot-icon,
.wapu-wiz-dot-icon {
	font-size: 16px;
	line-height: 1;
}

.wa-wizard__line,
.wapu-wiz-line {
	flex: 1;
	height: 2px;
	background: rgba(0, 0, 0, .06);
	max-width: 80px;
	transition: background .2s;
}

.wa-wizard__line.is-done,
.wa-wizard__line--done,
.wapu-wiz-line.is-done {
	background: var(--wapu-green, #059669);
}

/* ── Meta (current step title + desc) ────────────────────────────────────── */

.wa-wizard__meta,
.wapu-wiz-meta {
	text-align: center;
	margin: 0 0 24px;
}

.wa-wizard__meta-step,
.wapu-wiz-meta-step {
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .08em;
	color: var(--wapu-gray, var(--wapu-text-muted, #71717a));
	margin: 0 0 4px;
}

.wa-wizard__meta-title,
.wapu-wiz-meta-title {
	font-size: 20px;
	font-weight: 800;
	color: var(--wapu-text, var(--wapu-text, #18181b));
	letter-spacing: -.02em;
	font-family: var(--wapu-font-title, 'Poppins', sans-serif);
}

.wa-wizard__meta-desc,
.wapu-wiz-meta-desc {
	font-size: 13px;
	color: var(--wapu-gray, var(--wapu-text-muted, #71717a));
	margin: 4px 0 0;
}

/* ── Step panels ─────────────────────────────────────────────────────────── */

.wa-wizard__step,
.wapu-wiz-step {
	display: none;
}

.wa-wizard__step.is-active,
.wa-wizard__step--active,
.wapu-wiz-step.is-active {
	display: block;
}

/* ── Navigation ──────────────────────────────────────────────────────────── */

.wa-wizard__nav,
.wapu-wiz-nav {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin: 32px 0 0;
	gap: 16px;
}

.wa-wizard__nav-spacer,
.wapu-wiz-nav-spacer {
	flex: 1;
}

/* ── Dark mode ───────────────────────────────────────────────────────────── */

body.wapu-dark .wa-wizard__dot,
body.wapu-dark .wapu-wiz-dot {
	background: rgba(255, 255, 255, .05);
	border-color: rgba(255, 255, 255, .07);
}

body.wapu-dark .wa-wizard__line,
body.wapu-dark .wapu-wiz-line {
	background: rgba(255, 255, 255, .07);
}

body.wapu-dark .wa-wizard__meta-title,
body.wapu-dark .wapu-wiz-meta-title {
	color: var(--wd-text, #f5f5f7);
}

body.wapu-dark .wa-wizard__meta-step,
body.wapu-dark .wapu-wiz-meta-step {
	color: var(--wd-text-2, rgba(255, 255, 255, .7));
}

body.wapu-dark .wa-wizard__meta-desc,
body.wapu-dark .wapu-wiz-meta-desc {
	color: var(--wd-text-3, rgba(255, 255, 255, .35));
}