/**
 * APPSUR FAQs — frontend CSS
 * Reset agresivo: NUNCA hereda del tema. Cada plantilla define todos los valores.
 * Usa !important en propiedades clave para sobrescribir CSS del tema (botones, etc.).
 */

/* ==================== Reset wrapper pre/code si está mal puesto ==================== */
/* Si por error el shortcode se renderiza dentro de un pre/code, lo neutralizamos */
pre:has(> code > .appsur-faqs),
pre:has(> .appsur-faqs),
code:has(.appsur-faqs) {
	display: block !important;
	padding: 0 !important;
	margin: 0 !important;
	background: transparent !important;
	background-color: transparent !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	font-family: inherit !important;
	font-size: inherit !important;
	color: inherit !important;
	white-space: normal !important;
	overflow: visible !important;
	max-width: none !important;
	word-wrap: normal !important;
	word-break: normal !important;
}

/* Si el navegador no soporta :has(), forzar el reset en el contexto interno */
.appsur-faqs,
.appsur-faqs * {
	white-space: normal !important;
	word-break: normal !important;
	word-wrap: normal !important;
	-webkit-text-size-adjust: 100%;
}

/* ==================== Contenedor raíz ==================== */
.appsur-faqs {
	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
	margin: 0;
	padding: 0;
	color: var(--appsur-faqs-question-color, #1A1A1A);
	font-family: var(--appsur-font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif);
	font-size: 16px;
	line-height: 1.5;
	white-space: normal;
}

.appsur-faqs *,
.appsur-faqs *::before,
.appsur-faqs *::after {
	box-sizing: border-box;
}

/* ==================== Buscador ==================== */
.appsur-faqs__search {
	margin: 0 0 1em !important;
	padding: 0 !important;
}

.appsur-faqs__search-input {
	width: 100% !important;
	padding: 0.65em 0.9em !important;
	margin: 0 !important;
	font-family: inherit !important;
	font-size: 1em !important;
	font-weight: 400 !important;
	line-height: 1.4 !important;
	color: var(--appsur-faqs-question-color, #1A1A1A) !important;
	background-color: #fff !important;
	background-image: none !important;
	border: 1px solid rgba(0, 0, 0, 0.15) !important;
	border-radius: var(--appsur-radius, 4px) !important;
	box-shadow: none !important;
	outline: none !important;
	text-transform: none !important;
	letter-spacing: normal !important;
	-webkit-appearance: none !important;
	-moz-appearance: none !important;
	appearance: none !important;
	transition: border-color 200ms ease, box-shadow 200ms ease !important;
}

.appsur-faqs__search-input:focus {
	border-color: var(--appsur-primary, #D01918) !important;
	box-shadow: 0 0 0 3px rgba(208, 25, 24, 0.12) !important;
}

/* ==================== Lista ==================== */
.appsur-faqs__list {
	display: flex !important;
	flex-direction: column !important;
	gap: var(--appsur-faqs-item-gap, 0) !important;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}

/* ==================== Item ==================== */
.appsur-faqs__item {
	position: relative;
	margin: 0 !important;
	padding: 0 !important;
	background-color: var(--appsur-faqs-item-bg, transparent) !important;
	background-image: none !important;
	border: 0 !important;
	border-bottom-width: var(--appsur-faqs-separator-width, 1px) !important;
	border-bottom-style: solid !important;
	border-bottom-color: var(--appsur-faqs-item-border-color, rgba(0, 0, 0, 0.1)) !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	overflow: hidden;
	transition: background-color 200ms ease, border-color 200ms ease;
}

.appsur-faqs__item.is-open {
	background-color: var(--appsur-faqs-item-bg-active, var(--appsur-faqs-item-bg, transparent)) !important;
}

/* Cuando hay fondo activo distinto, da radius si el global lo pide */
.appsur-faqs__item {
	border-radius: var(--appsur-faqs-item-radius, 0) !important;
}

/* ==================== Heading wrapper (h2-h6) ==================== */
.appsur-faqs__heading {
	margin: 0 !important;
	padding: 0 !important;
	font-size: inherit !important;
	font-weight: inherit !important;
	line-height: inherit !important;
	color: inherit !important;
	font-family: inherit !important;
	background: transparent !important;
	border: 0 !important;
}

/* ==================== BOTÓN PREGUNTA — RESET TOTAL ==================== */
/* Reset agresivo para evitar que el tema aplique estilos de <button> */
.appsur-faqs__question,
button.appsur-faqs__question {
	/* Reset completo de button del tema */
	-webkit-appearance: none !important;
	-moz-appearance: none !important;
	appearance: none !important;

	/* Layout */
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	gap: 0.75em !important;
	width: 100% !important;
	min-height: auto !important;
	max-width: none !important;
	margin: 0 !important;
	padding: var(--appsur-faqs-question-padding, 1em 1.25em) !important;

	/* Tipografía */
	font-family: inherit !important;
	font-size: var(--appsur-faqs-question-size, 1em) !important;
	font-weight: var(--appsur-faqs-question-weight, 600) !important;
	font-style: normal !important;
	line-height: 1.4 !important;
	letter-spacing: normal !important;
	text-align: left !important;
	text-transform: none !important;
	text-decoration: none !important;
	white-space: normal !important;

	/* Colores */
	color: var(--appsur-faqs-question-color, #1A1A1A) !important;
	background-color: transparent !important;
	background-image: none !important;

	/* Borde y sombras */
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	outline: none !important;

	/* Comportamiento */
	cursor: pointer !important;
	user-select: none;
	-webkit-user-select: none;

	/* Transición */
	transition: color 200ms ease, background-color 200ms ease !important;
}

.appsur-faqs__question:hover,
button.appsur-faqs__question:hover {
	color: var(--appsur-faqs-question-color-hover, var(--appsur-primary, #D01918)) !important;
	background-color: transparent !important;
	background-image: none !important;
	border: 0 !important;
}

.appsur-faqs__question:focus,
button.appsur-faqs__question:focus {
	outline: none !important;
	background-color: transparent !important;
}

.appsur-faqs__question:focus-visible,
button.appsur-faqs__question:focus-visible {
	outline: 2px solid var(--appsur-primary, #D01918) !important;
	outline-offset: -2px !important;
	background-color: transparent !important;
}

.appsur-faqs__question:active,
button.appsur-faqs__question:active {
	background-color: transparent !important;
	background-image: none !important;
	transform: none !important;
	box-shadow: none !important;
}

.appsur-faqs__item.is-open .appsur-faqs__question {
	color: var(--appsur-faqs-question-color-active, var(--appsur-primary, #D01918)) !important;
}

.appsur-faqs__question-text {
	flex: 1 1 auto !important;
	min-width: 0 !important;
	color: inherit !important;
	font: inherit !important;
}

/* ==================== Icono ==================== */
.appsur-faqs__icon {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	flex-shrink: 0 !important;
	width: calc(var(--appsur-faqs-icon-size, 1em) * 1.5) !important;
	height: calc(var(--appsur-faqs-icon-size, 1em) * 1.5) !important;
	padding: 0 !important;
	margin: 0 !important;
	color: var(--appsur-faqs-icon-color, #71717A) !important;
	background: transparent !important;
	border: 0 !important;
	border-radius: 0 !important;
	opacity: 1 !important;
	transition: transform 300ms ease, color 200ms ease !important;
}

.appsur-faqs__icon svg {
	display: block !important;
	width: var(--appsur-faqs-icon-size, 1em) !important;
	height: var(--appsur-faqs-icon-size, 1em) !important;
	max-width: none !important;
	max-height: none !important;
	color: inherit !important;
	fill: none;
	stroke: currentColor;
}

.appsur-faqs__item.is-open .appsur-faqs__icon {
	color: var(--appsur-faqs-icon-color-active, var(--appsur-primary, #D01918)) !important;
}

/* Rotación según tipo de icono */
.appsur-faqs--icon-chevron .appsur-faqs__item.is-open .appsur-faqs__icon,
.appsur-faqs--icon-arrow .appsur-faqs__item.is-open .appsur-faqs__icon {
	transform: rotate(180deg) !important;
}

/* Plus-minus: oculta línea vertical al abrir */
.appsur-faqs--icon-plus-minus .appsur-faqs__item.is-open .appsur-faqs__icon svg line:first-child {
	opacity: 0;
}

/* ==================== Respuesta (collapse) ==================== */
.appsur-faqs__answer {
	overflow: hidden !important;
	max-height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	background: transparent !important;
	border: 0 !important;
	transition: max-height 300ms ease;
}

.appsur-faqs__answer:not([hidden]) {
	max-height: 4000px !important;
}

.appsur-faqs__answer-inner {
	padding: var(--appsur-faqs-answer-padding, 0 1.25em 1em 1.25em) !important;
	margin: 0 !important;
	color: var(--appsur-faqs-answer-color, #52525B) !important;
	font-family: inherit !important;
	font-size: var(--appsur-faqs-answer-size, 1em) !important;
	font-weight: 400 !important;
	line-height: 1.6 !important;
	background: transparent !important;
	border: 0 !important;
}

.appsur-faqs__answer-inner > *:first-child { margin-top: 0 !important; }
.appsur-faqs__answer-inner > *:last-child { margin-bottom: 0 !important; }

.appsur-faqs__answer-inner p,
.appsur-faqs__answer-inner ul,
.appsur-faqs__answer-inner ol {
	font-family: inherit;
	font-size: inherit;
	line-height: inherit;
	color: inherit;
	margin: 0 0 0.75em;
}

.appsur-faqs__answer-inner p:last-child,
.appsur-faqs__answer-inner ul:last-child,
.appsur-faqs__answer-inner ol:last-child {
	margin-bottom: 0;
}

.appsur-faqs__answer-inner a {
	color: var(--appsur-primary, #D01918) !important;
	text-decoration: underline;
}

.appsur-faqs__answer-inner a:hover {
	text-decoration: none;
}

.appsur-faqs__answer-inner strong,
.appsur-faqs__answer-inner b {
	color: inherit;
	font-weight: 700;
}

.appsur-faqs__answer-inner ul,
.appsur-faqs__answer-inner ol {
	padding-left: 1.5em;
}

.appsur-faqs__answer-inner li {
	margin-bottom: 0.25em;
}

/* ==================== Modos visuales ==================== */

/* GRID */
.appsur-faqs--grid .appsur-faqs__list {
	display: grid !important;
	grid-template-columns: repeat(2, 1fr) !important;
	gap: var(--appsur-faqs-item-gap, 1em) !important;
}

.appsur-faqs--grid .appsur-faqs__item {
	border-bottom-width: var(--appsur-faqs-separator-width, 1px) !important;
}

/* LIST (todas abiertas) */
.appsur-faqs--list .appsur-faqs__answer {
	max-height: none !important;
}

.appsur-faqs--list .appsur-faqs__question,
.appsur-faqs--list button.appsur-faqs__question {
	cursor: default !important;
	pointer-events: none !important;
}

.appsur-faqs--list .appsur-faqs__icon {
	display: none !important;
}

/* TABS */
.appsur-faqs--tabs .appsur-faqs__item {
	border-bottom-width: var(--appsur-faqs-separator-width, 1px) !important;
}

/* ==================== Estado empty (editor) ==================== */
.appsur-faqs-empty {
	padding: 0.75em 1em;
	background-color: rgba(0, 0, 0, 0.04);
	border: 1px dashed rgba(0, 0, 0, 0.2);
	border-radius: var(--appsur-radius, 4px);
	color: #6B7280;
	font-size: 0.9em;
	font-style: italic;
}

/* Filtrado por búsqueda */
.appsur-faqs__item.is-hidden {
	display: none !important;
}

/* ==================== Responsive ==================== */
@media (max-width: 768px) {
	.appsur-faqs--grid .appsur-faqs__list {
		grid-template-columns: 1fr !important;
	}
}

/* ==================== A11y ==================== */
@media (prefers-reduced-motion: reduce) {
	.appsur-faqs__answer,
	.appsur-faqs__icon,
	.appsur-faqs__question,
	.appsur-faqs__item {
		transition: none !important;
	}
}

/* ==================== RTL ==================== */
[dir="rtl"] .appsur-faqs__question,
[dir="rtl"] button.appsur-faqs__question {
	text-align: right !important;
}