/**
 * Componente: Tabs — solapas horizontales con contenido único visible.
 * Modifiers: __item--active, __panel--active. Variant --vertical para sidebar.
 * Depende de: andreani-core-variables
 */

.andr-tabs {
	display: flex;
	flex-direction: column;
}

.andr-tabs__list {
	display: flex;
	align-items: stretch;
	gap: 2px;
	padding: 0 var(--andr-sp-3);
	background: var(--andr-color-surface);
	border-bottom: 1px solid var(--andr-color-border);
	overflow-x: auto;
	scrollbar-width: thin;
}

.andr-tabs__item {
	display: inline-flex;
	align-items: center;
	gap: var(--andr-sp-2);
	padding: var(--andr-sp-3) var(--andr-sp-4);
	background: transparent;
	border: none;
	border-bottom: 2px solid transparent;
	font-family: var(--andr-font-body);
	font-size: var(--andr-text-sm);
	font-weight: var(--andr-fw-medium);
	color: var(--andr-color-text-muted);
	cursor: pointer;
	white-space: nowrap;
	transition: color var(--andr-transition-fast), border-color var(--andr-transition-fast), background var(--andr-transition-fast);
	margin-bottom: -1px;
}

.andr-tabs__item:hover {
	color: var(--andr-color-text-strong);
	background: var(--andr-color-surface-subtle);
}

.andr-tabs__item:focus-visible {
	outline: 2px solid var(--andr-color-border-focus);
	outline-offset: -2px;
	border-radius: var(--andr-radius-xs);
}

.andr-tabs__item--active {
	color: var(--andr-color-brand);
	border-bottom-color: var(--andr-color-brand);
}

.andr-tabs__item--active:hover {
	color: var(--andr-color-brand);
	background: transparent;
}

.andr-tabs__item svg,
.andr-tabs__item .dashicons {
	width: 18px;
	height: 18px;
	flex-shrink: 0;
}

.andr-tabs__panel {
	display: none;
	padding: var(--andr-sp-5);
	animation: andr-tabs-fade-in var(--andr-transition-base);
}

.andr-tabs__panel--active {
	display: block;
}

@keyframes andr-tabs-fade-in {
	from { opacity: 0; transform: translateY(2px); }
	to   { opacity: 1; transform: translateY(0); }
}

.andr-tabs--vertical {
	flex-direction: row;
}

.andr-tabs--vertical .andr-tabs__list {
	flex-direction: column;
	align-items: stretch;
	gap: 0;
	padding: var(--andr-sp-3) 0;
	border-bottom: none;
	border-right: 1px solid var(--andr-color-border);
	min-width: 200px;
}

.andr-tabs--vertical .andr-tabs__item {
	justify-content: flex-start;
	border-bottom: none;
	border-right: 2px solid transparent;
	margin-bottom: 0;
	margin-right: -1px;
	padding: var(--andr-sp-3) var(--andr-sp-4);
}

.andr-tabs--vertical .andr-tabs__item--active {
	border-right-color: var(--andr-color-brand);
	background: var(--andr-color-brand-subtle);
}