/**
 * Tabs → Accordion Component
 * Componente agnóstico que se adapta a cualquier tema usando variables CSS estándar
 * Desktop: Tabs | Mobile: Accordion
 */

/* Contenedor principal */
.tabs-accordion {
	background: var(--wp--preset--color--white, #fff);
	border: 1px solid var(--wp--preset--color--neutral-light-blue, #e6e8ef);
	border-radius: var(--wp--preset--spacing--30, 16px);
	overflow: hidden;
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06);
}

/* Desktop: Tabs */
.tabs-accordion .tablist {
	display: flex;
	gap: var(--wp--preset--spacing--10, 6px);
	padding: var(--wp--preset--spacing--20, 10px);
	border-bottom: 1px solid var(--wp--preset--color--neutral-light-blue, #e6e8ef);
	background: var(--wp--preset--color--neutral-light, #fbfcff);
}

.tabs-accordion .tab {
	appearance: none;
	border: 1px solid var(--wp--preset--color--neutral-light-blue, #e6e8ef);
	background: var(--wp--preset--color--white, #fff);
	padding: var(--wp--preset--spacing--20, 10px) var(--wp--preset--spacing--30, 12px);
	border-radius: 999px;
	cursor: pointer;
	font-weight: 600;
	font-size: var(--wp--preset--font-size--medium, 1rem);
	color: var(--wp--preset--color--text-main, #2b2b2b);
	transition: all 0.2s ease;
}

.tabs-accordion .tab:hover {
	border-color: var(--wp--preset--color--primary, #003a9e);
}

.tabs-accordion .tab[aria-selected="true"] {
	border-color: var(--wp--preset--color--primary, #003a9e);
	background: var(--wp--preset--color--primary, #003a9e);
	color: var(--wp--preset--color--white, #fff);
}

/* Paneles de contenido */
.tabs-accordion .panel {
	padding: var(--wp--preset--spacing--40, 16px);
}

.tabs-accordion .panel[hidden] {
	display: none;
}

/* Mobile: Accordion triggers */
.tabs-accordion .acc-trigger {
	width: 100%;
	text-align: left;
	padding: var(--wp--preset--spacing--30, 14px) var(--wp--preset--spacing--40, 16px);
	border: 0;
	border-top: 1px solid var(--wp--preset--color--neutral-light-blue, #e6e8ef);
	background: var(--wp--preset--color--white, #fff);
	cursor: pointer;
	font-weight: 700;
	font-size: var(--wp--preset--font-size--medium, 1rem);
	color: var(--wp--preset--color--text-main, #2b2b2b);
	display: none;
	transition: all 0.2s ease;
}

.tabs-accordion .acc-trigger:hover {
	background: var(--wp--preset--color--neutral-light, #fafafa);
}

.tabs-accordion .acc-trigger[aria-expanded="true"] {
	background: var(--wp--preset--color--neutral-light, #fafafa);
	color: var(--wp--preset--color--primary, #003a9e);
}

.tabs-accordion .acc-trigger .chev {
	float: right;
	opacity: 0.65;
	transition: transform 0.2s ease;
}

.tabs-accordion .acc-trigger[aria-expanded="true"] .chev {
	transform: rotate(180deg);
}

/* Mobile layout */
@media (max-width: 768px) {
	.tabs-accordion .tablist {
		display: none;
	}
	
	.tabs-accordion .acc-trigger {
		display: block;
	}
	
	.tabs-accordion .panel {
		padding-top: 0;
	}
}