/**
 * TAKUM APEX — Frontend styles
 * Scoped to plugin classes, designed to coexist with Elementor / WC themes.
 */

/* ============================================================
   Variables / base
   ============================================================ */
.takum-apex-form,
.takum-apex-intro,
.takum-apex-completed,
.takum-apex-thankyou-banner,
.takum-apex-flash {
	--apex-bg: #ffffff;
	--apex-fg: #1a1a1a;
	--apex-muted: #6b7280;
	--apex-border: #e5e7eb;
	--apex-border-strong: #d1d5db;
	--apex-accent: #3871e0;
	--apex-accent-hover: #2c5dc7;
	--apex-accent-soft: #eaf1fc;
	--apex-accent-fg: #ffffff;
	--apex-soft: #f9fafb;
	--apex-radius: 8px;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
	color: var(--apex-fg);
	box-sizing: border-box;
}

.takum-apex-form *,
.takum-apex-form *::before,
.takum-apex-form *::after,
.takum-apex-intro *,
.takum-apex-completed *,
.takum-apex-thankyou-banner * {
	box-sizing: border-box;
}

/* ============================================================
   Banner en la página "thank-you" de WC
   ============================================================ */
.takum-apex-thankyou-banner {
	display: flex;
	gap: 18px;
	align-items: flex-start;
	background: var(--apex-accent-soft);
	border: 1px solid #c9dafa;
	border-radius: var(--apex-radius);
	padding: 22px 24px;
	margin: 24px 0;
}
.takum-apex-thankyou-banner__icon {
	flex: 0 0 auto;
	width: 48px;
	height: 48px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--apex-accent);
	color: #fff;
	border-radius: 50%;
}
.takum-apex-thankyou-banner__body {
	flex: 1 1 auto;
}
.takum-apex-thankyou-banner__body h2 {
	margin: 0 0 8px;
	font-size: 1.25rem;
	font-weight: 700;
	line-height: 1.3;
}
.takum-apex-thankyou-banner__body p {
	margin: 0 0 14px;
	color: #444;
	line-height: 1.55;
	font-size: 0.95rem;
}

/* ============================================================
   Intro + selección de sexo
   ============================================================ */
.takum-apex-intro {
	max-width: 720px;
	margin: 0 auto;
}
.takum-apex-notice {
	background: var(--apex-soft);
	border: 1px solid var(--apex-border);
	border-radius: var(--apex-radius);
	padding: 18px 22px;
	margin-bottom: 24px;
}
.takum-apex-notice h3 {
	margin: 0 0 10px;
	font-size: 1.1rem;
	font-weight: 700;
}
.takum-apex-notice ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
.takum-apex-notice li {
	padding: 6px 0;
	font-size: 0.95rem;
	color: #444;
	line-height: 1.5;
}
.takum-apex-gender-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
	margin: 18px 0 22px;
}
@media (max-width: 540px) {
	.takum-apex-gender-grid { grid-template-columns: 1fr; }
}
.takum-apex-gender-card {
	position: relative;
	display: block;
	cursor: pointer;
	border: none;
	padding: 26px 18px 22px;
	border-radius: 14px;
	text-align: center;
	transition: all 0.18s ease;
	user-select: none;
}
.takum-apex-gender-card:hover {
	border-color: var(--apex-accent);
	transform: translateY(-2px);
	box-shadow: 0 4px 14px rgba(56, 113, 224, 0.12);
}
.takum-apex-gender-card input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}
.takum-apex-gender-card__check {
	position: absolute;
	top: 10px;
	right: 10px;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	border: 2px solid var(--apex-border-strong);
	background: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	color: transparent;
	font-size: 14px;
	font-weight: 700;
	line-height: 1;
	transition: all 0.18s ease;
}
.takum-apex-gender-card:has(input:checked) {
	border-color: var(--apex-accent);
	border-width: 3px;
	background: var(--apex-accent-soft);
	box-shadow: 0 6px 20px rgba(56, 113, 224, 0.22);
	padding: 25px 17px 21px; /* compensar el +1px del border */
}
.takum-apex-gender-card:has(input:checked) .takum-apex-gender-card__check {
	background: var(--apex-accent);
	border-color: var(--apex-accent);
	color: #fff;
}
.takum-apex-gender-card__icon {
	font-size: 2.4rem;
	display: block;
	margin-bottom: 6px;
	line-height: 1;
}
.takum-apex-gender-card__label {
	font-weight: 600;
	font-size: 1.05rem;
	color: var(--apex-fg);
}
.takum-apex-gender-card:has(input:checked) .takum-apex-gender-card__label {
	color: var(--apex-accent);
	font-weight: 700;
}

/* Fallback :has() para navegadores antiguos (la JS añade .is-checked) */
.takum-apex-gender-card.is-checked {
	border-color: var(--apex-accent);
	border-width: 3px;
	background: var(--apex-accent-soft);
	box-shadow: 0 6px 20px rgba(56, 113, 224, 0.22);
	padding: 25px 17px 21px;
}
.takum-apex-gender-card.is-checked .takum-apex-gender-card__check {
	background: var(--apex-accent);
	border-color: var(--apex-accent);
	color: #fff;
}
.takum-apex-gender-card.is-checked .takum-apex-gender-card__label {
	color: var(--apex-accent);
	font-weight: 700;
}

/* ============================================================
   Formulario principal
   ============================================================ */
.takum-apex-form-wrap {
	margin: 0 auto;
}
.takum-apex-form-header {
	margin-bottom: 18px;
	padding-bottom: 16px;
	border-bottom: 1px solid var(--apex-border);
}
.takum-apex-form-header h2 {
	margin: 0 0 4px;
	font-size: 1.4rem;
	font-weight: 700;
}
.takum-apex-form-header__sub,
.takum-apex-form-header__subtitle {
	color: var(--apex-muted);
	font-size: 0.9rem;
	margin: 0 0 12px;
}
.takum-apex-form-header__intro {
	margin: 12px 0 0;
	color: #444;
	line-height: 1.55;
	font-size: 0.95rem;
}
.takum-apex-status-bar,
.takum-apex-form-meta {
	display: flex;
	gap: 12px;
	align-items: center;
	margin: 10px 0 0;
	font-size: 0.85rem;
	color: var(--apex-muted);
	flex-wrap: wrap;
}
.takum-apex-status-bar__updated { color: var(--apex-muted); }

/* ----- Contenedor scrollable de las secciones ----- */
.takum-apex-form { display: block; }
.takum-apex-form__scroll {
	max-height: 70vh;
	min-height: 380px;
	overflow-y: auto;
	overflow-x: hidden;
	padding: 4px 14px 4px 4px; /* aire para el scrollbar */
	border: 1px solid var(--apex-border);
	border-radius: var(--apex-radius);
	background: var(--apex-soft);
	scroll-behavior: smooth;
	scrollbar-width: thin;
	scrollbar-color: var(--apex-border-strong) transparent;
}
.takum-apex-form__scroll:focus { outline: none; box-shadow: 0 0 0 3px rgba(56,113,224,0.18); }
.takum-apex-form__scroll::-webkit-scrollbar { width: 10px; }
.takum-apex-form__scroll::-webkit-scrollbar-track { background: transparent; }
.takum-apex-form__scroll::-webkit-scrollbar-thumb {
	background: var(--apex-border-strong);
	border-radius: 999px;
	border: 2px solid var(--apex-soft);
}
.takum-apex-form__scroll::-webkit-scrollbar-thumb:hover { background: #b0b6bf; }

/* En pantallas chicas dejamos que crezca un poco más */
@media (max-width: 540px) {
	.takum-apex-form__scroll { max-height: 60vh; min-height: 320px; }
}

.takum-apex-section {
	margin: 14px 0;
	padding: 22px;
	background: #fff;
	border: 1px solid var(--apex-border);
	border-radius: var(--apex-radius);
}
.takum-apex-section:first-child { margin-top: 4px; }
.takum-apex-section:last-child  { margin-bottom: 4px; }
.takum-apex-section h3,
.takum-apex-section__title {
	margin: 0 0 18px;
	padding-bottom: 10px;
	border-bottom: 2px solid var(--apex-accent);
	font-size: 1.1rem;
	font-weight: 700;
	color: var(--apex-fg);
}
.takum-apex-section__help {
	background: #fff8e1;
	border-left: 3px solid #f5a623;
	padding: 10px 14px;
	margin: 0 0 16px;
	font-size: 0.9rem;
	color: #5d4500;
	border-radius: 4px;
	line-height: 1.5;
}

.takum-apex-fields {
	display: flex;
	flex-direction: column;
	gap: 18px;
}
.takum-apex-field { display: flex; flex-direction: column; gap: 6px; }
.takum-apex-field__label {
	font-weight: 600;
	font-size: 0.92rem;
	color: #1f2937;
	line-height: 1.35;
}
.takum-apex-field__label .takum-apex-field__req { color: #dc2626; margin-left: 2px; font-weight: 700; }
.takum-apex-field__help {
	color: var(--apex-muted);
	font-size: 0.83rem;
	line-height: 1.4;
}

.takum-apex-field input[type="text"],
.takum-apex-field input[type="number"],
.takum-apex-field input[type="date"],
.takum-apex-field input[type="email"],
.takum-apex-field select,
.takum-apex-field textarea {
	width: 100%;
	padding: 9px 12px;
	border: 1px solid var(--apex-border-strong);
	border-radius: 6px;
	font-size: 0.95rem;
	font-family: inherit;
	background: #fff;
	color: var(--apex-fg);
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.takum-apex-field input:focus,
.takum-apex-field select:focus,
.takum-apex-field textarea:focus {
	outline: none;
	border-color: var(--apex-accent);
	box-shadow: 0 0 0 3px rgba(0,0,0,0.08);
}
.takum-apex-field textarea { min-height: 90px; resize: vertical; line-height: 1.5; }

.takum-apex-options {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 8px;
}
.takum-apex-options--single { grid-template-columns: 1fr; }
.takum-apex-options label {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	padding: 8px 12px;
	background: #fafafa;
	border: 1px solid var(--apex-border);
	border-radius: 6px;
	font-size: 0.92rem;
	cursor: pointer;
	line-height: 1.4;
	transition: all 0.12s ease;
}
.takum-apex-options label:hover { background: #f0f0f0; }
.takum-apex-options input[type="radio"],
.takum-apex-options input[type="checkbox"] { margin-top: 2px; flex-shrink: 0; }
.takum-apex-options label:has(input:checked) {
	background: #f0f9ff;
	border-color: var(--apex-accent);
}

/* File upload */
.takum-apex-field--file input[type="file"] {
	padding: 8px;
	background: #fafafa;
	border: 1px dashed var(--apex-border-strong);
	border-radius: 6px;
	width: 100%;
	font-size: 0.9rem;
}
.takum-apex-file-preview {
	margin-top: 8px;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px;
	background: #f0f9ff;
	border: 1px solid #c7e6f9;
	border-radius: 6px;
}
.takum-apex-file-preview img {
	max-width: 80px;
	max-height: 80px;
	border-radius: 4px;
	border: 1px solid #ddd;
}
.takum-apex-file-preview__label {
	font-size: 0.85rem;
	color: #0c4a6e;
}

/* ============================================================
   Botones / acciones (fuera del scroll, justo debajo)
   ============================================================ */
.takum-apex-form__actions,
.takum-apex-actions {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
	align-items: center;
	margin-top: 14px;
	padding: 16px 18px;
	background: #1a1d24;
	border: 1px solid #1a1d24;
	border-radius: var(--apex-radius);
	box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.03);
}
.takum-apex-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 12px 22px;
	border: 2px solid transparent;
	border-radius: 6px;
	font-size: 0.95rem;
	font-weight: 600;
	font-family: inherit;
	cursor: pointer;
	text-decoration: none;
	line-height: 1.2;
	transition: all 0.15s ease;
}
.takum-apex-btn--primary {
	background: var(--apex-accent);
	color: var(--apex-accent-fg);
	border-color: var(--apex-accent);
	box-shadow: 0 2px 8px rgba(56, 113, 224, 0.25);
}
.takum-apex-btn--primary:hover,
.takum-apex-btn--primary:focus {
	background: var(--apex-accent-hover);
	border-color: var(--apex-accent-hover);
	color: #fff;
	transform: translateY(-1px);
	box-shadow: 0 4px 14px rgba(56, 113, 224, 0.35);
}
.takum-apex-btn--secondary {
	background: #fff;
	color: var(--apex-accent);
	border-color: var(--apex-accent);
}
.takum-apex-btn--secondary:hover,
.takum-apex-btn--secondary:focus {
	background: var(--apex-accent-soft);
	color: var(--apex-accent-hover);
	border-color: var(--apex-accent-hover);
}
.takum-apex-form__autosave { margin: 0 0 0 auto; }
.takum-apex-form__autosave-msg {
	font-size: 0.85rem;
	color: var(--apex-muted);
	font-style: italic;
}

/* ============================================================
   Status pills (frontend + admin)
   ============================================================ */
.takum-apex-status-pill {
	display: inline-block;
	padding: 3px 10px;
	border-radius: 999px;
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.3px;
	color: #fff;
	background: #6b7280;
	line-height: 1.5;
	white-space: nowrap;
}
.takum-apex-status-pill--borrador        { background: #6b7280; }
.takum-apex-status-pill--pendiente_fotos { background: #d97706; }
.takum-apex-status-pill--completado      { background: #059669; }

/* ============================================================
   Pantalla "completado"
   ============================================================ */
.takum-apex-completed { max-width: 720px; margin: 0 auto; text-align: center; }
.takum-apex-completed__hero { padding: 30px 20px 18px; }
.takum-apex-completed__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 80px; height: 80px;
	background: #d1fae5;
	color: #059669;
	border-radius: 50%;
	margin-bottom: 16px;
}
.takum-apex-completed h2 {
	margin: 0 0 10px;
	font-size: 1.6rem;
	font-weight: 700;
}
.takum-apex-completed__lede {
	color: #4b5563;
	font-size: 1rem;
	max-width: 480px;
	margin: 0 auto;
	line-height: 1.55;
}
.takum-apex-completed__meta {
	display: flex;
	justify-content: center;
	gap: 28px;
	margin: 28px 0;
	flex-wrap: wrap;
	padding: 18px;
	background: var(--apex-soft);
	border-radius: var(--apex-radius);
}
.takum-apex-completed__meta-item { display: flex; flex-direction: column; gap: 4px; align-items: center; }
.takum-apex-completed__meta-label {
	font-size: 0.78rem;
	color: var(--apex-muted);
	text-transform: uppercase;
	letter-spacing: 0.5px;
}
.takum-apex-completed__meta-value { font-weight: 600; font-size: 0.95rem; }
.takum-apex-completed__notice {
	background: #fff;
	border: 1px solid var(--apex-border);
	border-radius: var(--apex-radius);
	padding: 22px;
	text-align: left;
}
.takum-apex-completed__notice strong { display: block; margin-bottom: 6px; font-size: 1rem; }
.takum-apex-completed__notice p { margin: 0 0 14px; color: #555; line-height: 1.5; font-size: 0.92rem; }

/* ============================================================
   Mensajes flash
   ============================================================ */
.takum-apex-flash {
	padding: 12px 16px;
	border-radius: var(--apex-radius);
	margin: 0 0 18px;
	border-left: 4px solid;
}
.takum-apex-flash p { margin: 0; }
.takum-apex-flash--success { background: #ecfdf5; border-color: #059669; color: #064e3b; }
.takum-apex-flash--error   { background: #fef2f2; border-color: #dc2626; color: #7f1d1d; }
.takum-apex-flash--info    { background: #eff6ff; border-color: #2563eb; color: #1e3a8a; }

/* ============================================================
 * THEME ISOLATION
 * Garantiza que el cuestionario se renderice en modo claro
 * aunque el tema activo del sitio esté en modo oscuro.
 * Usa !important sólo donde es estrictamente necesario para
 * vencer reglas de Astra/Hello/Hello Dark/OceanWP/Elementor.
 * ============================================================ */

/* Header del formulario: títulos, subtítulos, intro */
.takum-apex-form-wrap .takum-apex-form-header h2,
.takum-apex-form-wrap .takum-apex-form-header h3 {
	color: #1a1a1a !important;
}
.takum-apex-form-wrap .takum-apex-form-header__sub,
.takum-apex-form-wrap .takum-apex-form-header__subtitle {
	color: #6b7280 !important;
}
.takum-apex-form-wrap .takum-apex-form-header__intro {
	color: #4b5563 !important;
}
.takum-apex-form-wrap .takum-apex-status-bar,
.takum-apex-form-wrap .takum-apex-status-bar__updated {
	color: #6b7280 !important;
}

/* Sección: tarjeta blanca con título oscuro */
.takum-apex-form-wrap .takum-apex-section {
	background: #ffffff !important;
	color: #1a1a1a !important;
}
.takum-apex-form-wrap .takum-apex-section h3,
.takum-apex-form-wrap .takum-apex-section .takum-apex-section__title {
	color: #1a1a1a !important;
	border-bottom-color: #3871e0 !important;
}
.takum-apex-form-wrap .takum-apex-section__help {
	color: #5d4500 !important;
	background: #fff8e1 !important;
}

/* Labels de campo: SIEMPRE oscuros sobre fondo blanco */
.takum-apex-form-wrap .takum-apex-field__label,
.takum-apex-form-wrap .takum-apex-field label,
.takum-apex-form-wrap label.takum-apex-field__label {
	color: #1f2937 !important;
}
.takum-apex-form-wrap .takum-apex-field__help {
	color: #6b7280 !important;
}

/* INPUTS, TEXTAREAS, SELECTS: fondo blanco, texto oscuro, borde gris */
.takum-apex-form-wrap input[type="text"],
.takum-apex-form-wrap input[type="number"],
.takum-apex-form-wrap input[type="date"],
.takum-apex-form-wrap input[type="email"],
.takum-apex-form-wrap input[type="tel"],
.takum-apex-form-wrap input[type="url"],
.takum-apex-form-wrap input[type="search"],
.takum-apex-form-wrap select,
.takum-apex-form-wrap textarea {
	background-color: #ffffff !important;
	background-image: none !important;
	color: #1a1a1a !important;
	border: 1px solid #d1d5db !important;
	-webkit-text-fill-color: #1a1a1a !important; /* Safari quirk */
}
.takum-apex-form-wrap input[type="text"]:focus,
.takum-apex-form-wrap input[type="number"]:focus,
.takum-apex-form-wrap input[type="date"]:focus,
.takum-apex-form-wrap input[type="email"]:focus,
.takum-apex-form-wrap select:focus,
.takum-apex-form-wrap textarea:focus {
	border-color: #3871e0 !important;
	box-shadow: 0 0 0 3px rgba(56, 113, 224, 0.18) !important;
	outline: none !important;
}
.takum-apex-form-wrap input::placeholder,
.takum-apex-form-wrap textarea::placeholder {
	color: #9ca3af !important;
	opacity: 1;
}
/* Autofill de Chrome también respeta el tema claro */
.takum-apex-form-wrap input:-webkit-autofill,
.takum-apex-form-wrap input:-webkit-autofill:hover,
.takum-apex-form-wrap input:-webkit-autofill:focus,
.takum-apex-form-wrap textarea:-webkit-autofill,
.takum-apex-form-wrap select:-webkit-autofill {
	-webkit-box-shadow: 0 0 0 1000px #ffffff inset !important;
	-webkit-text-fill-color: #1a1a1a !important;
	caret-color: #1a1a1a;
}

/* Indicador del calendario en input[type=date] (icono blanco invisible en dark themes) */
.takum-apex-form-wrap input[type="date"]::-webkit-calendar-picker-indicator {
	filter: none !important;
	opacity: 1 !important;
	cursor: pointer;
}

/* Opciones radio/checkbox: tarjetas claras */
.takum-apex-form-wrap .takum-apex-options label {
	background: #fafafa !important;
	color: #1f2937 !important;
	border-color: #e5e7eb !important;
}
.takum-apex-form-wrap .takum-apex-options label:hover {
	background: #f0f0f0 !important;
}
.takum-apex-form-wrap .takum-apex-options input[type="radio"]:checked + *,
.takum-apex-form-wrap .takum-apex-options input[type="checkbox"]:checked + * {
	color: #1f2937 !important;
}

/* File input: fondo claro con borde dashed */
.takum-apex-form-wrap input[type="file"] {
	background: #fafafa !important;
	color: #1f2937 !important;
	border: 1px dashed #d1d5db !important;
}
.takum-apex-form-wrap .takum-apex-file-hint {
	color: #6b7280 !important;
}

/* Asegurar contraste del scroll wrapper */
.takum-apex-form-wrap .takum-apex-form__scroll {
	background: #f9fafb !important;
	border-color: #e5e7eb !important;
}

/* Barra de acciones: fondo blanco siempre */
.takum-apex-form-wrap .takum-apex-form__actions,
.takum-apex-form-wrap .takum-apex-actions {
	background: #ffffff !important;
	border-color: #e5e7eb !important;
}

/* Mensajes flash: respetar fondos claros */
.takum-apex-flash--success { background: #ecfdf5 !important; color: #064e3b !important; }
.takum-apex-flash--error   { background: #fef2f2 !important; color: #7f1d1d !important; }
.takum-apex-flash--info    { background: #eff6ff !important; color: #1e3a8a !important; }
.takum-apex-flash p { color: inherit !important; }

/* Cards de selección de sexo (modo oscuro coherente) */
.takum-apex-intro .takum-apex-gender-card {
	background: #1a1d24 !important;
	color: #ffffff !important;
}
.takum-apex-intro .takum-apex-gender-card__icon,
.takum-apex-intro .takum-apex-gender-card__label {
	color: #ffffff !important;
}
.takum-apex-intro .takum-apex-gender-card.is-checked,
.takum-apex-intro .takum-apex-gender-card:has(input:checked) {
	background: rgba(56, 113, 224, 0.15) !important;
	border-color: #3871e0 !important;
}
.takum-apex-intro .takum-apex-gender-card.is-checked .takum-apex-gender-card__label,
.takum-apex-intro .takum-apex-gender-card:has(input:checked) .takum-apex-gender-card__label {
	color: #ffffff !important;
}
.takum-apex-intro .takum-apex-notice {
	background: #f9fafb !important;
	color: #1a1a1a !important;
	border-color: #e5e7eb !important;
}
.takum-apex-intro .takum-apex-notice h3,
.takum-apex-intro .takum-apex-notice li {
	color: #1f2937 !important;
}
.takum-apex-intro h2,
.takum-apex-intro h3 {
	color: #1a1a1a !important;
}

/* Pantalla "completado" - también tema claro forzado */
.takum-apex-completed,
.takum-apex-completed h2,
.takum-apex-completed__lede,
.takum-apex-completed__meta-value {
	color: #1a1a1a !important;
}
.takum-apex-completed__meta {
	background: #f9fafb !important;
}
.takum-apex-completed__meta-label {
	color: #6b7280 !important;
}
.takum-apex-completed__notice {
	background: #ffffff !important;
	border-color: #e5e7eb !important;
	color: #1a1a1a !important;
}
.takum-apex-completed__notice strong { color: #1a1a1a !important; }
.takum-apex-completed__notice p     { color: #4b5563 !important; }

/* ============================================================
 * THEME ISOLATION — REFUERZO DE ESPECIFICIDAD
 * Reglas con mayor peso para vencer temas oscuros agresivos
 * (Hello Dark, Astra dark, OceanWP dark, Elementor Pro dark theme).
 * ============================================================ */

/* Inputs/textareas/selects con triple-clase + body para máxima especificidad */
body .takum-apex-form-wrap .takum-apex-section .takum-apex-field input[type="text"],
body .takum-apex-form-wrap .takum-apex-section .takum-apex-field input[type="number"],
body .takum-apex-form-wrap .takum-apex-section .takum-apex-field input[type="date"],
body .takum-apex-form-wrap .takum-apex-section .takum-apex-field input[type="email"],
body .takum-apex-form-wrap .takum-apex-section .takum-apex-field input[type="tel"],
body .takum-apex-form-wrap .takum-apex-section .takum-apex-field input[type="url"],
body .takum-apex-form-wrap .takum-apex-section .takum-apex-field input[type="search"],
body .takum-apex-form-wrap .takum-apex-section .takum-apex-field select,
body .takum-apex-form-wrap .takum-apex-section .takum-apex-field textarea,
body .takum-apex-form-wrap form textarea,
body .takum-apex-form-wrap form input[type="text"],
body .takum-apex-form-wrap form input[type="number"],
body .takum-apex-form-wrap form input[type="date"],
body .takum-apex-form-wrap form select,
html body .takum-apex-form-wrap textarea,
html body .takum-apex-form-wrap input[type="text"],
html body .takum-apex-form-wrap input[type="number"],
html body .takum-apex-form-wrap input[type="date"],
html body .takum-apex-form-wrap select {
	background: #ffffff !important;
	background-color: #ffffff !important;
	background-image: none !important;
	color: #1a1a1a !important;
	-webkit-text-fill-color: #1a1a1a !important;
	border: 1px solid #d1d5db !important;
	box-shadow: none;
}

/* Textarea específicamente: a veces los temas la atacan por separado */
body .takum-apex-form-wrap .takum-apex-fields textarea,
html body .takum-apex-form-wrap textarea,
.takum-apex-form-wrap .takum-apex-section .takum-apex-fields .takum-apex-field textarea {
	background: #ffffff !important;
	background-color: #ffffff !important;
	color: #1a1a1a !important;
	-webkit-text-fill-color: #1a1a1a !important;
	border: 1px solid #d1d5db !important;
	min-height: 90px;
	resize: vertical;
}

/* Pantalla de selección de sexo: títulos siempre visibles */
body .takum-apex-intro,
body .takum-apex-intro .takum-apex-intro__title,
body .takum-apex-intro .takum-apex-intro__prompt,
body .takum-apex-intro .takum-apex-notice__title,
html body .takum-apex-intro h2,
html body .takum-apex-intro h3,
.takum-apex-intro .takum-apex-intro__title.takum-apex-intro__title,
.takum-apex-intro form .takum-apex-intro__prompt,
.takum-apex-intro .takum-apex-form .takum-apex-intro__prompt {
	color: #1a1a1a !important;
}
body .takum-apex-intro .takum-apex-intro__title {
	font-size: 1.7rem;
	font-weight: 700;
	margin: 0 0 18px;
	line-height: 1.25;
}
body .takum-apex-intro .takum-apex-intro__prompt {
	font-size: 1.05rem;
	font-weight: 600;
	margin: 6px 0 14px;
	line-height: 1.4;
}
body .takum-apex-intro .takum-apex-notice__title {
	font-size: 1.05rem;
	font-weight: 700;
	margin: 0 0 10px;
}
body .takum-apex-intro .takum-apex-notice li {
	color: #374151 !important;
}

/* ============================================================
 * WOOCOMMERCE FORM RESET — solicitado por el cliente
 * Aplica a TODOS los formularios de WooCommerce (My Account,
 * checkout, login, registro, etc.) además del cuestionario APEX.
 * Nota: el color de texto se ajustó a #000 para que sea legible
 * sobre el fondo blanco (#fff con #fff sería invisible).
 * ============================================================ */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce-page form input,
.woocommerce-page form textarea,
.woocommerce-page form select {
	background: #fff !important;
	border: 1px solid black !important;
	border-radius: 10px !important;
	color: #000 !important;
	padding: 0.85rem 1rem !important;
	font-family: 'Inter', sans-serif !important;
	font-size: 0.9rem !important;
	transition: border-color 0.25s, box-shadow 0.25s !important;
}

/* ============================================================
 * Pantalla "Cuestionario completado" — overrides finales
 * ============================================================ */

/* Texto descriptivo (lede) en blanco sobre fondo oscuro del tema */
body .takum-apex-completed .takum-apex-completed__lede,
html body .takum-apex-completed__lede {
	color: #ffffff !important;
}

/* Botón "Editar respuestas": usa los estilos por defecto del tema/WC.
 * Aseguramos que NO herede los azules del plugin. */
.takum-apex-completed__notice .button,
.takum-apex-completed__notice a.button {
	border-color: initial;
	box-shadow: none;
}

/* ============================================================
 * PANTALLA POST-PURCHASE (reemplaza el thank-you de WC)
 * ============================================================ */
.takum-apex-postpurchase-wrapper {
	max-width: 880px;
	margin: 0 auto;
	padding: 30px 20px 60px;
}
.takum-apex-postpurchase {
	display: flex;
	flex-direction: column;
	gap: 22px;
}

/* ===== Header con pill y hero ===== */
#takum-apex-screen .takum-apex-postpurchase__header {
	margin: 14px 0 12px;
}
#takum-apex-screen .takum-apex-postpurchase__pill {
	display: inline-block;
	border: 1.5px solid #3871e0 !important;
	color: #3871e0 !important;
	background: transparent !important;
	padding: 9px 22px !important;
	border-radius: 999px !important;
	font-size: 11px !important;
	font-weight: 700 !important;
	letter-spacing: 2.5px !important;
	text-transform: uppercase !important;
	margin: 0 0 28px !important;
	line-height: 1 !important;
}
#takum-apex-screen .takum-apex-postpurchase__hero {
	font-size: clamp(2.5rem, 6.5vw, 4.5rem) !important;
	font-weight: 900 !important;
	text-transform: uppercase !important;
	color: #ffffff !important;
	margin: 0 0 22px !important;
	padding: 0 !important;
	line-height: 1.02 !important;
	letter-spacing: -0.015em !important;
	border: 0 !important;
}
#takum-apex-screen .takum-apex-postpurchase__hero-line {
	display: inline;
	color: inherit;
}
#takum-apex-screen .takum-apex-postpurchase__hero-line--accent {
	color: #c9a872 !important; /* dorado/bronze elegante */
}
#takum-apex-screen .takum-apex-postpurchase__lede {
	color: #9ca3af !important;
	font-size: 1rem !important;
	margin: 0 0 36px !important;
	max-width: 720px;
	line-height: 1.55;
}
#takum-apex-screen .takum-apex-postpurchase__received {
	color: #d1d5db !important;
	font-size: 0.95rem !important;
	margin: 0 !important;
	font-weight: 400;
}

/* Prompt de selección de género - tema renderiza, sólo asegura visibilidad */
.takum-apex-postpurchase__prompt {
	margin: 0 0 14px !important;
	text-align: center;
	color: #ffffff !important;
}

/* Formulario (selector de género) */
.takum-apex-postpurchase__form--gender {
	background: rgba(255,255,255,0.03);
	border: 1px solid rgba(255,255,255,0.1);
	border-radius: 12px;
	padding: 26px 22px;
}

/* Formulario completo: scroll interno */
.takum-apex-postpurchase__scroll {
	max-height: 60vh;
	min-height: 360px;
	overflow-y: auto;
	overflow-x: hidden;
	padding: 4px 14px 4px 4px;
	border: 1px solid #e5e7eb;
	border-radius: 10px;
	background: #f9fafb;
	scroll-behavior: smooth;
	scrollbar-width: thin;
	scrollbar-color: #d1d5db transparent;
}
.takum-apex-postpurchase__scroll:focus {
	outline: none;
	box-shadow: 0 0 0 3px rgba(56,113,224,0.18);
}
.takum-apex-postpurchase__scroll::-webkit-scrollbar { width: 10px; }
.takum-apex-postpurchase__scroll::-webkit-scrollbar-track { background: transparent; }
.takum-apex-postpurchase__scroll::-webkit-scrollbar-thumb {
	background: #d1d5db;
	border-radius: 999px;
	border: 2px solid #f9fafb;
}
.takum-apex-postpurchase__scroll::-webkit-scrollbar-thumb:hover { background: #b0b6bf; }

@media (max-width: 540px) {
	.takum-apex-postpurchase__scroll { max-height: 55vh; min-height: 300px; }
}

/* Bloque de acciones — fuera del scroll, separados visualmente */
.takum-apex-postpurchase__actions {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	margin-top: 18px;
	padding: 18px 18px;
	background: #ffffff;
	border: 1px solid #e5e7eb;
	border-radius: 10px;
	box-shadow: 0 -2px 10px rgba(0,0,0,0.04);
}
.takum-apex-postpurchase__actions .takum-apex-btn--primary {
	flex: 1 1 auto;
	min-width: 220px;
	max-width: 340px;
	padding: 14px 24px;
	font-size: 1rem;
}
.takum-apex-postpurchase__actions .button {
	flex: 0 0 auto;
}

@media (max-width: 540px) {
	.takum-apex-postpurchase__actions {
		flex-direction: column;
		align-items: stretch;
	}
	.takum-apex-postpurchase__actions .takum-apex-btn,
	.takum-apex-postpurchase__actions .button {
		max-width: none;
		width: 100%;
		text-align: center;
		justify-content: center;
	}
}

/* ============================================================
 * MODO OSCURO COHERENTE PARA EL CUESTIONARIO
 * Reemplaza TODOS los overrides anteriores que forzaban tema claro.
 * Aplica a:
 *   - .takum-apex-form-wrap (Mi Cuenta)
 *   - .takum-apex-postpurchase (post-pago)
 * Selectores con triple anclaje para vencer el WC reset y theme-isolation.
 * ============================================================ */

/* Variables específicas del modo oscuro */
.takum-apex-form-wrap,
.takum-apex-postpurchase {
	--apex-dark-bg:        #0e1116;
	--apex-dark-card:      #1a1d24;
	--apex-dark-input:     #14171d;
	--apex-dark-border:    rgba(255,255,255,0.08);
	--apex-dark-border-h:  rgba(255,255,255,0.16);
	--apex-dark-text:      #ffffff;
	--apex-dark-muted:     #9ca3af;
	--apex-dark-placeholder: #6b7280;
	--apex-dark-accent:    #3871e0;
}

/* ===== Card / sección ===== */
html body .takum-apex-form-wrap .takum-apex-section,
html body .takum-apex-postpurchase .takum-apex-section {
	background: var(--apex-dark-card) !important;
	border: 1px solid var(--apex-dark-border) !important;
	border-radius: 18px !important;
	padding: 28px 30px !important;
	margin: 16px 0 !important;
	color: var(--apex-dark-text) !important;
	box-shadow: 0 1px 0 rgba(255,255,255,0.02) inset;
}
@media (max-width: 640px) {
	html body .takum-apex-form-wrap .takum-apex-section,
	html body .takum-apex-postpurchase .takum-apex-section {
		padding: 22px 18px !important;
		border-radius: 14px !important;
	}
}

/* ===== Título de sección con icono ===== */
html body .takum-apex-form-wrap .takum-apex-section .takum-apex-section__title,
html body .takum-apex-postpurchase .takum-apex-section .takum-apex-section__title {
	display: flex !important;
	align-items: center !important;
	gap: 10px !important;
	font-size: 0.85rem !important;
	font-weight: 800 !important;
	letter-spacing: 2px !important;
	text-transform: uppercase !important;
	color: var(--apex-dark-text) !important;
	margin: 0 0 22px !important;
	padding-bottom: 18px !important;
	border-bottom: 1px solid var(--apex-dark-border) !important;
}
html body .takum-apex-form-wrap .takum-apex-section__icon,
html body .takum-apex-postpurchase .takum-apex-section__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--apex-dark-accent) !important;
	flex-shrink: 0;
}
html body .takum-apex-form-wrap .takum-apex-section__icon svg,
html body .takum-apex-postpurchase .takum-apex-section__icon svg {
	width: 22px;
	height: 22px;
	stroke: currentColor;
}

/* ===== Help / notas ===== */
html body .takum-apex-form-wrap .takum-apex-section .takum-apex-section__help,
html body .takum-apex-postpurchase .takum-apex-section .takum-apex-section__help {
	background: rgba(56,113,224,0.08) !important;
	border-left: 3px solid var(--apex-dark-accent) !important;
	color: #cbd5e1 !important;
	padding: 12px 16px !important;
	margin: 0 0 20px !important;
	border-radius: 6px !important;
	font-size: 0.9rem;
	line-height: 1.55;
}

/* ===== Layout en grid: 2-3 columnas según tipo ===== */
html body .takum-apex-form-wrap .takum-apex-section .takum-apex-fields,
html body .takum-apex-postpurchase .takum-apex-section .takum-apex-fields {
	display: grid !important;
	grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	gap: 14px 18px !important;
}
@media (max-width: 640px) {
	html body .takum-apex-form-wrap .takum-apex-section .takum-apex-fields,
	html body .takum-apex-postpurchase .takum-apex-section .takum-apex-fields {
		grid-template-columns: 1fr !important;
	}
}
/* Campos de tipo textarea, file, radio, checkbox: span completo */
html body .takum-apex-form-wrap .takum-apex-field--textarea,
html body .takum-apex-form-wrap .takum-apex-field--file,
html body .takum-apex-form-wrap .takum-apex-field--radio,
html body .takum-apex-form-wrap .takum-apex-field--checkbox,
html body .takum-apex-postpurchase .takum-apex-field--textarea,
html body .takum-apex-postpurchase .takum-apex-field--file,
html body .takum-apex-postpurchase .takum-apex-field--radio,
html body .takum-apex-postpurchase .takum-apex-field--checkbox {
	grid-column: 1 / -1 !important;
}

/* ===== Labels ===== */
html body .takum-apex-form-wrap .takum-apex-field__label,
html body .takum-apex-postpurchase .takum-apex-field__label {
	color: #d1d5db !important;
	font-size: 0.8rem !important;
	font-weight: 500 !important;
	margin-bottom: 6px !important;
	letter-spacing: 0.3px;
}
html body .takum-apex-form-wrap .takum-apex-field__help,
html body .takum-apex-postpurchase .takum-apex-field__help {
	color: var(--apex-dark-muted) !important;
	font-size: 0.78rem !important;
	margin-top: 4px;
}
html body .takum-apex-form-wrap .takum-apex-field__req,
html body .takum-apex-postpurchase .takum-apex-field__req {
	color: var(--apex-dark-accent) !important;
}

/* ===== Inputs / textarea / select - fondo oscuro ===== */
html body .takum-apex-form-wrap input[type="text"],
html body .takum-apex-form-wrap input[type="number"],
html body .takum-apex-form-wrap input[type="date"],
html body .takum-apex-form-wrap input[type="email"],
html body .takum-apex-form-wrap input[type="tel"],
html body .takum-apex-form-wrap input[type="url"],
html body .takum-apex-form-wrap input[type="search"],
html body .takum-apex-form-wrap select,
html body .takum-apex-form-wrap textarea,
html body .takum-apex-postpurchase input[type="text"],
html body .takum-apex-postpurchase input[type="number"],
html body .takum-apex-postpurchase input[type="date"],
html body .takum-apex-postpurchase input[type="email"],
html body .takum-apex-postpurchase input[type="tel"],
html body .takum-apex-postpurchase input[type="url"],
html body .takum-apex-postpurchase input[type="search"],
html body .takum-apex-postpurchase select,
html body .takum-apex-postpurchase textarea,
body.woocommerce-account .takum-apex-form-wrap input,
body.woocommerce-account .takum-apex-form-wrap textarea,
body.woocommerce-account .takum-apex-form-wrap select {
	background: var(--apex-dark-input) !important;
	background-color: var(--apex-dark-input) !important;
	background-image: none !important;
	color: var(--apex-dark-text) !important;
	-webkit-text-fill-color: var(--apex-dark-text) !important;
	border: 1px solid var(--apex-dark-border) !important;
	border-radius: 12px !important;
	padding: 14px 18px !important;
	font-size: 0.92rem !important;
	font-family: inherit !important;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
	width: 100% !important;
	box-shadow: none !important;
}

html body .takum-apex-form-wrap input:hover,
html body .takum-apex-form-wrap select:hover,
html body .takum-apex-form-wrap textarea:hover,
html body .takum-apex-postpurchase input:hover,
html body .takum-apex-postpurchase select:hover,
html body .takum-apex-postpurchase textarea:hover {
	border-color: var(--apex-dark-border-h) !important;
}

html body .takum-apex-form-wrap input:focus,
html body .takum-apex-form-wrap select:focus,
html body .takum-apex-form-wrap textarea:focus,
html body .takum-apex-postpurchase input:focus,
html body .takum-apex-postpurchase select:focus,
html body .takum-apex-postpurchase textarea:focus {
	outline: none !important;
	border-color: var(--apex-dark-accent) !important;
	box-shadow: 0 0 0 3px rgba(56,113,224,0.18) !important;
}

/* Placeholders */
html body .takum-apex-form-wrap input::placeholder,
html body .takum-apex-form-wrap textarea::placeholder,
html body .takum-apex-postpurchase input::placeholder,
html body .takum-apex-postpurchase textarea::placeholder {
	color: var(--apex-dark-placeholder) !important;
	opacity: 1;
}

/* Textarea altura mínima */
html body .takum-apex-form-wrap textarea,
html body .takum-apex-postpurchase textarea {
	min-height: 100px !important;
	resize: vertical;
	line-height: 1.5;
}

/* Select: flecha custom */
html body .takum-apex-form-wrap select,
html body .takum-apex-postpurchase select {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	padding-right: 44px !important;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>") !important;
	background-repeat: no-repeat !important;
	background-position: right 18px center !important;
	background-size: 12px !important;
	cursor: pointer;
}

/* Date picker icono claro */
html body .takum-apex-form-wrap input[type="date"]::-webkit-calendar-picker-indicator,
html body .takum-apex-postpurchase input[type="date"]::-webkit-calendar-picker-indicator {
	filter: invert(0.7) !important;
	cursor: pointer;
	opacity: 0.8;
}

/* Autofill Chrome */
html body .takum-apex-form-wrap input:-webkit-autofill,
html body .takum-apex-postpurchase input:-webkit-autofill {
	-webkit-box-shadow: 0 0 0 1000px var(--apex-dark-input) inset !important;
	-webkit-text-fill-color: var(--apex-dark-text) !important;
	caret-color: var(--apex-dark-text);
}

/* ===== Radios y checkboxes ===== */
html body .takum-apex-form-wrap .takum-apex-options,
html body .takum-apex-postpurchase .takum-apex-options {
	display: grid !important;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important;
	gap: 8px !important;
}
html body .takum-apex-form-wrap .takum-apex-options label,
html body .takum-apex-postpurchase .takum-apex-options label {
	display: flex !important;
	align-items: flex-start;
	gap: 10px;
	background: var(--apex-dark-input) !important;
	color: #d1d5db !important;
	border: 1px solid var(--apex-dark-border) !important;
	border-radius: 10px !important;
	padding: 12px 14px !important;
	font-size: 0.9rem !important;
	cursor: pointer;
	transition: all 0.15s ease;
	line-height: 1.4;
}
html body .takum-apex-form-wrap .takum-apex-options label:hover,
html body .takum-apex-postpurchase .takum-apex-options label:hover {
	border-color: var(--apex-dark-border-h) !important;
	background: #181c24 !important;
}
html body .takum-apex-form-wrap .takum-apex-options input[type="radio"],
html body .takum-apex-form-wrap .takum-apex-options input[type="checkbox"],
html body .takum-apex-postpurchase .takum-apex-options input[type="radio"],
html body .takum-apex-postpurchase .takum-apex-options input[type="checkbox"] {
	accent-color: var(--apex-dark-accent);
	margin-top: 2px;
	flex-shrink: 0;
	width: auto !important;
	padding: 0 !important;
	background: transparent !important;
	border: none !important;
}

/* Header del form en Mi Cuenta */
html body .takum-apex-form-wrap .takum-apex-form-header,
html body .takum-apex-form-wrap .takum-apex-form-header h2,
html body .takum-apex-form-wrap .takum-apex-form-header__sub,
html body .takum-apex-form-wrap .takum-apex-form-header__intro {
	color: #ffffff !important;
}
html body .takum-apex-form-wrap .takum-apex-form-header__sub {
	color: var(--apex-dark-muted) !important;
}
html body .takum-apex-form-wrap .takum-apex-form-header__intro {
	color: #cbd5e1 !important;
}

/* Scroll wrapper transparente sobre fondo dark */
html body .takum-apex-form-wrap .takum-apex-form__scroll,
html body .takum-apex-postpurchase .takum-apex-postpurchase__scroll {
	background: transparent !important;
	border: 1px solid var(--apex-dark-border) !important;
	border-radius: 14px !important;
	padding: 6px 14px 6px 6px !important;
	scrollbar-color: rgba(255,255,255,0.15) transparent;
}
html body .takum-apex-form-wrap .takum-apex-form__scroll::-webkit-scrollbar-thumb,
html body .takum-apex-postpurchase .takum-apex-postpurchase__scroll::-webkit-scrollbar-thumb {
	background: rgba(255,255,255,0.15) !important;
	border: 2px solid transparent;
	background-clip: padding-box;
}

/* Barra de acciones también en dark */
html body .takum-apex-form-wrap .takum-apex-form__actions,
html body .takum-apex-postpurchase .takum-apex-postpurchase__actions {
	background: var(--apex-dark-card) !important;
	border: 1px solid var(--apex-dark-border) !important;
	border-radius: 14px !important;
}
html body .takum-apex-form-wrap .takum-apex-btn--secondary,
html body .takum-apex-postpurchase .takum-apex-btn--secondary {
	background: transparent !important;
	color: #d1d5db !important;
	border-color: var(--apex-dark-border-h) !important;
}
html body .takum-apex-form-wrap .takum-apex-btn--secondary:hover,
html body .takum-apex-postpurchase .takum-apex-btn--secondary:hover {
	background: rgba(255,255,255,0.04) !important;
	border-color: rgba(255,255,255,0.3) !important;
	color: #fff !important;
}

/* File input dark */
html body .takum-apex-form-wrap input[type="file"],
html body .takum-apex-postpurchase input[type="file"] {
	background: var(--apex-dark-input) !important;
	color: #d1d5db !important;
	border: 1px dashed var(--apex-dark-border-h) !important;
}
html body .takum-apex-form-wrap .takum-apex-file-preview,
html body .takum-apex-postpurchase .takum-apex-file-preview {
	background: rgba(56,113,224,0.08) !important;
	border-color: rgba(56,113,224,0.3) !important;
	color: #c9dafa !important;
}

/* Status pill en headers */
html body .takum-apex-form-wrap .takum-apex-status-bar,
html body .takum-apex-form-wrap .takum-apex-form-meta {
	color: var(--apex-dark-muted) !important;
}

/* ============================================================
 * Bloque "Antes de comenzar" — visible siempre arriba del form
 * ============================================================ */
.takum-apex-before-begin {
	background: rgba(56, 113, 224, 0.08);
	border: 1px solid rgba(56, 113, 224, 0.25);
	border-radius: 14px;
	padding: 20px 24px;
	margin: 0 0 4px;
}
.takum-apex-before-begin__title {
	margin: 0 0 12px !important;
	padding: 0 !important;
	border: 0 !important;
	font-size: 1rem !important;
	font-weight: 700 !important;
	color: #ffffff !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
}
.takum-apex-before-begin__list {
	margin: 0 !important;
	padding: 0 0 0 4px !important;
	list-style: none !important;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.takum-apex-before-begin__list li {
	position: relative;
	padding-left: 22px !important;
	color: #cbd5e1 !important;
	font-size: 0.92rem !important;
	line-height: 1.55 !important;
	margin: 0 !important;
}
.takum-apex-before-begin__list li::before {
	content: "";
	position: absolute;
	left: 4px;
	top: 8px;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: #3871e0;
}

@media (max-width: 540px) {
	.takum-apex-before-begin { padding: 16px 18px; }
}

/* ============================================================
 * MAX SPECIFICITY OVERRIDES — usando #takum-apex-screen como ID anchor
 * vence cualquier regla del tema (specificity ≥ 1,1,3).
 * ============================================================ */

/* Sección/card en dark */
#takum-apex-screen .takum-apex-section {
	background: #1a1d24 !important;
	border: 1px solid rgba(255,255,255,0.08) !important;
	border-radius: 18px !important;
	padding: 28px 30px !important;
	margin: 16px 0 !important;
	color: #ffffff !important;
}
@media (max-width: 640px) {
	#takum-apex-screen .takum-apex-section {
		padding: 22px 18px !important;
		border-radius: 14px !important;
	}
}

/* Título de sección con icono */
#takum-apex-screen .takum-apex-section__title {
	display: flex !important;
	align-items: center !important;
	gap: 10px !important;
	font-size: 0.85rem !important;
	font-weight: 800 !important;
	letter-spacing: 2px !important;
	text-transform: uppercase !important;
	color: #ffffff !important;
	margin: 0 0 22px !important;
	padding-bottom: 18px !important;
	border-bottom: 1px solid rgba(255,255,255,0.08) !important;
}
#takum-apex-screen .takum-apex-section__icon { color: #3871e0 !important; }
#takum-apex-screen .takum-apex-section__icon svg { stroke: #3871e0 !important; }

/* Layout grid de los campos */
#takum-apex-screen .takum-apex-fields {
	display: grid !important;
	grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	gap: 14px 18px !important;
}
@media (max-width: 640px) {
	#takum-apex-screen .takum-apex-fields { grid-template-columns: 1fr !important; }
}
#takum-apex-screen .takum-apex-field--textarea,
#takum-apex-screen .takum-apex-field--file,
#takum-apex-screen .takum-apex-field--radio,
#takum-apex-screen .takum-apex-field--checkbox {
	grid-column: 1 / -1 !important;
}

/* Labels */
#takum-apex-screen .takum-apex-field__label {
	color: #d1d5db !important;
	font-size: 0.8rem !important;
	font-weight: 500 !important;
	margin-bottom: 6px !important;
	letter-spacing: 0.3px !important;
}
#takum-apex-screen .takum-apex-field__help { color: #9ca3af !important; font-size: 0.78rem !important; }
#takum-apex-screen .takum-apex-field__req { color: #3871e0 !important; }

/* INPUTS dark mode con MAX specificity */
#takum-apex-screen input[type="text"],
#takum-apex-screen input[type="number"],
#takum-apex-screen input[type="date"],
#takum-apex-screen input[type="email"],
#takum-apex-screen input[type="tel"],
#takum-apex-screen input[type="url"],
#takum-apex-screen input[type="search"],
#takum-apex-screen select,
#takum-apex-screen textarea {
	background: #14171d !important;
	background-color: #14171d !important;
	background-image: none !important;
	color: #ffffff !important;
	-webkit-text-fill-color: #ffffff !important;
	border: 1px solid rgba(255,255,255,0.08) !important;
	border-radius: 12px !important;
	padding: 14px 18px !important;
	font-size: 0.92rem !important;
	font-family: inherit !important;
	width: 100% !important;
	box-shadow: none !important;
}
#takum-apex-screen input:hover,
#takum-apex-screen select:hover,
#takum-apex-screen textarea:hover {
	border-color: rgba(255,255,255,0.16) !important;
}
#takum-apex-screen input:focus,
#takum-apex-screen select:focus,
#takum-apex-screen textarea:focus {
	outline: none !important;
	border-color: #3871e0 !important;
	box-shadow: 0 0 0 3px rgba(56,113,224,0.18) !important;
}
#takum-apex-screen input::placeholder,
#takum-apex-screen textarea::placeholder {
	color: #6b7280 !important;
	opacity: 1 !important;
}
#takum-apex-screen textarea {
	min-height: 100px !important;
	resize: vertical !important;
	line-height: 1.5 !important;
}
#takum-apex-screen select {
	appearance: none !important;
	-webkit-appearance: none !important;
	-moz-appearance: none !important;
	padding-right: 44px !important;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>") !important;
	background-repeat: no-repeat !important;
	background-position: right 18px center !important;
	background-size: 12px !important;
	cursor: pointer !important;
}
#takum-apex-screen input[type="date"]::-webkit-calendar-picker-indicator {
	filter: invert(0.7) !important;
	opacity: 0.85 !important;
	cursor: pointer !important;
}
#takum-apex-screen input:-webkit-autofill {
	-webkit-box-shadow: 0 0 0 1000px #14171d inset !important;
	-webkit-text-fill-color: #ffffff !important;
}

/* Radio / checkbox */
#takum-apex-screen .takum-apex-options {
	display: grid !important;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important;
	gap: 8px !important;
}
#takum-apex-screen .takum-apex-options label {
	display: flex !important;
	align-items: flex-start !important;
	gap: 10px !important;
	background: #14171d !important;
	color: #d1d5db !important;
	border: 1px solid rgba(255,255,255,0.08) !important;
	border-radius: 10px !important;
	padding: 12px 14px !important;
	font-size: 0.9rem !important;
	cursor: pointer !important;
	line-height: 1.4 !important;
}
#takum-apex-screen .takum-apex-options label:hover {
	background: #181c24 !important;
	border-color: rgba(255,255,255,0.16) !important;
}
#takum-apex-screen .takum-apex-options input[type="radio"],
#takum-apex-screen .takum-apex-options input[type="checkbox"] {
	accent-color: #3871e0 !important;
	width: auto !important;
	padding: 0 !important;
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
}

/* Scroll wrapper */
#takum-apex-screen .takum-apex-postpurchase__scroll {
	background: transparent !important;
	border: 1px solid rgba(255,255,255,0.08) !important;
	border-radius: 14px !important;
	padding: 6px 14px 6px 6px !important;
	max-height: 60vh !important;
	min-height: 380px !important;
	overflow-y: auto !important;
	scrollbar-color: rgba(255,255,255,0.15) transparent !important;
}
#takum-apex-screen .takum-apex-postpurchase__scroll::-webkit-scrollbar { width: 10px; }
#takum-apex-screen .takum-apex-postpurchase__scroll::-webkit-scrollbar-thumb {
	background: rgba(255,255,255,0.15);
	border-radius: 999px;
	border: 2px solid transparent;
	background-clip: padding-box;
}

/* ===== Bloque "Antes de comenzar" — unificado ===== */
#takum-apex-screen .takum-apex-before-begin,
.takum-apex-form-wrap .takum-apex-before-begin,
.takum-apex-intro .takum-apex-notice {
	background: #1a1d24 !important;
	border: 1px solid rgba(255,255,255,0.08) !important;
	border-radius: 14px !important;
	padding: 22px 26px !important;
	margin: 0 0 4px !important;
}
#takum-apex-screen .takum-apex-before-begin__title,
.takum-apex-form-wrap .takum-apex-before-begin__title,
.takum-apex-intro .takum-apex-notice__title,
.takum-apex-intro .takum-apex-notice h3 {
	margin: 0 0 14px !important;
	padding: 0 !important;
	border: 0 !important;
	font-size: 1rem !important;
	font-weight: 700 !important;
	color: #ffffff !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
}
#takum-apex-screen .takum-apex-before-begin__list,
.takum-apex-form-wrap .takum-apex-before-begin__list,
.takum-apex-intro .takum-apex-notice ul {
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
	display: flex !important;
	flex-direction: column !important;
	gap: 9px !important;
}
#takum-apex-screen .takum-apex-before-begin__list li,
.takum-apex-form-wrap .takum-apex-before-begin__list li,
.takum-apex-intro .takum-apex-notice li {
	position: relative !important;
	padding: 0 0 0 20px !important;
	color: #cbd5e1 !important;
	font-size: 0.92rem !important;
	line-height: 1.55 !important;
	margin: 0 !important;
	list-style: none !important;
}
#takum-apex-screen .takum-apex-before-begin__list li::before,
.takum-apex-form-wrap .takum-apex-before-begin__list li::before,
.takum-apex-intro .takum-apex-notice li::before {
	content: "" !important;
	position: absolute !important;
	left: 4px !important;
	top: 9px !important;
	width: 6px !important;
	height: 6px !important;
	border-radius: 50% !important;
	background: #3871e0 !important;
}

/* ===== Botones de acción del post-purchase ===== */
#takum-apex-screen .takum-apex-postpurchase__actions {
	display: flex !important;
	gap: 14px !important;
	flex-wrap: wrap !important;
	align-items: center !important;
	margin-top: 18px !important;
	padding: 18px 20px !important;
	background: #1a1d24 !important;
	border: 1px solid rgba(255,255,255,0.08) !important;
	border-radius: 14px !important;
	box-shadow: none !important;
}

/* Botón primary "Enviar Cuestionario" - azul */
#takum-apex-screen button[name="apex_btn_submit"],
#takum-apex-screen .takum-apex-postpurchase__actions .takum-apex-btn--primary {
	background: #3871e0 !important;
	background-image: none !important;
	color: #ffffff !important;
	border: 2px solid #3871e0 !important;
	border-radius: 10px !important;
	padding: 13px 26px !important;
	font-size: 0.95rem !important;
	font-weight: 700 !important;
	font-family: inherit !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
	cursor: pointer !important;
	box-shadow: 0 2px 8px rgba(56,113,224,0.25) !important;
	transition: all 0.15s ease !important;
}
#takum-apex-screen button[name="apex_btn_submit"]:hover,
#takum-apex-screen .takum-apex-postpurchase__actions .takum-apex-btn--primary:hover {
	background: #2c5dc7 !important;
	border-color: #2c5dc7 !important;
	color: #ffffff !important;
	box-shadow: 0 4px 14px rgba(56,113,224,0.35) !important;
}

/* Botones secundarios "Completar más tarde" y "Ver detalles" - sutiles */
#takum-apex-screen button[name="apex_btn_later"],
#takum-apex-screen button[name="apex_btn_details"],
#takum-apex-screen .takum-apex-postpurchase__actions a.button {
	background: transparent !important;
	background-image: none !important;
	color: #d1d5db !important;
	border: 1.5px solid rgba(255,255,255,0.18) !important;
	border-radius: 10px !important;
	padding: 13px 22px !important;
	font-size: 0.92rem !important;
	font-weight: 500 !important;
	font-family: inherit !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
	cursor: pointer !important;
	box-shadow: none !important;
	text-decoration: none !important;
	transition: all 0.15s ease !important;
}
#takum-apex-screen button[name="apex_btn_later"]:hover,
#takum-apex-screen button[name="apex_btn_details"]:hover,
#takum-apex-screen .takum-apex-postpurchase__actions a.button:hover {
	background: rgba(255,255,255,0.04) !important;
	border-color: rgba(255,255,255,0.32) !important;
	color: #ffffff !important;
}

@media (max-width: 540px) {
	#takum-apex-screen .takum-apex-postpurchase__actions {
		flex-direction: column !important;
		align-items: stretch !important;
	}
	#takum-apex-screen .takum-apex-postpurchase__actions button,
	#takum-apex-screen .takum-apex-postpurchase__actions a.button {
		width: 100% !important;
		text-align: center !important;
		justify-content: center !important;
	}
}

/* File input */
#takum-apex-screen input[type="file"] {
	background: #14171d !important;
	color: #d1d5db !important;
	border: 1px dashed rgba(255,255,255,0.18) !important;
	border-radius: 10px !important;
	padding: 12px !important;
}
#takum-apex-screen .takum-apex-file-preview {
	background: rgba(56,113,224,0.08) !important;
	border-color: rgba(56,113,224,0.3) !important;
	color: #c9dafa !important;
}

/* ============================================================
 * Quitar borde del scroll wrapper y alinear con "Antes de comenzar"
 * ============================================================ */

/* Post-purchase: scroll sin borde, padding mínimo a derecha por scrollbar */
#takum-apex-screen .takum-apex-postpurchase__scroll,
.takum-apex-postpurchase .takum-apex-postpurchase__scroll {
	background: transparent !important;
	border: 0 !important;
	border-radius: 0 !important;
	padding: 0 8px 0 0 !important;
	margin: 0 !important;
	min-height: auto !important;
}

/* Mi Cuenta: igual tratamiento al scroll wrapper */
.takum-apex-form-wrap .takum-apex-form__scroll,
html body .takum-apex-form-wrap .takum-apex-form__scroll {
	background: transparent !important;
	border: 0 !important;
	border-radius: 0 !important;
	padding: 0 8px 0 0 !important;
}

/* Asegurar que las cards de sección no tengan margen lateral - así
 * quedan alineadas con el bloque "Antes de comenzar" arriba. */
#takum-apex-screen .takum-apex-section,
.takum-apex-postpurchase .takum-apex-section,
.takum-apex-form-wrap .takum-apex-section {
	margin-left: 0 !important;
	margin-right: 0 !important;
}

/* Bloque "Antes de comenzar": mismo margen lateral que las cards
 * (ambos al borde del wrapper, sin offset) */
#takum-apex-screen .takum-apex-before-begin,
.takum-apex-postpurchase .takum-apex-before-begin,
.takum-apex-form-wrap .takum-apex-before-begin {
	margin-left: 0 !important;
	margin-right: 0 !important;
	margin-bottom: 18px !important;
}

/* Scrollbar custom más sutil sin el border del contenedor */
#takum-apex-screen .takum-apex-postpurchase__scroll::-webkit-scrollbar,
.takum-apex-form-wrap .takum-apex-form__scroll::-webkit-scrollbar {
	width: 8px !important;
}
#takum-apex-screen .takum-apex-postpurchase__scroll::-webkit-scrollbar-track,
.takum-apex-form-wrap .takum-apex-form__scroll::-webkit-scrollbar-track {
	background: transparent !important;
}
#takum-apex-screen .takum-apex-postpurchase__scroll::-webkit-scrollbar-thumb,
.takum-apex-form-wrap .takum-apex-form__scroll::-webkit-scrollbar-thumb {
	background: rgba(255,255,255,0.12) !important;
	border-radius: 999px !important;
	border: 0 !important;
}
#takum-apex-screen .takum-apex-postpurchase__scroll::-webkit-scrollbar-thumb:hover,
.takum-apex-form-wrap .takum-apex-form__scroll::-webkit-scrollbar-thumb:hover {
	background: rgba(255,255,255,0.22) !important;
}

/* ============================================================
 * Badge de género (visible siempre en el form)
 * ============================================================ */
.takum-apex-gender-badge {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: rgba(56, 113, 224, 0.12);
	border: 1px solid rgba(56, 113, 224, 0.35);
	color: #cbd5e1;
	padding: 6px 14px;
	border-radius: 999px;
	font-size: 0.85rem;
	font-weight: 500;
	line-height: 1;
}
.takum-apex-gender-badge--mujer {
	background: rgba(236, 72, 153, 0.10);
	border-color: rgba(236, 72, 153, 0.35);
}
.takum-apex-gender-badge__icon {
	font-size: 1.05rem;
	line-height: 1;
}
.takum-apex-gender-badge strong { color: #ffffff; font-weight: 700; }
.takum-apex-gender-badge--mujer strong { color: #fbcfe8; }
.takum-apex-gender-badge--hombre strong { color: #c9dafa; }

/* Botón "Cambiar" (link discreto al lado del badge) */
.takum-apex-gender-badge__change-form {
	display: inline-block;
	margin: 0;
	padding: 0;
}
.takum-apex-gender-badge__change-btn {
	background: transparent !important;
	border: 0 !important;
	color: #9ca3af !important;
	cursor: pointer !important;
	font-size: 0.78rem !important;
	font-weight: 500 !important;
	padding: 0 0 0 6px !important;
	text-decoration: underline !important;
	font-family: inherit !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
	box-shadow: none !important;
	margin: 0 !important;
}
.takum-apex-gender-badge__change-btn:hover {
	color: #ffffff !important;
	background: transparent !important;
}

/* Header meta del form post-purchase */
.takum-apex-postpurchase__form-meta {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
	margin: 0 0 14px;
}

/* Campos condicionales ocultos */
.takum-apex-field.takum-apex-field--hidden,
#takum-apex-screen .takum-apex-field.takum-apex-field--hidden {
	display: none !important;
}

/* ============================================================
 * Campos condicionales: ancho completo del grid
 * ============================================================ */
.takum-apex-field[data-depends-on],
#takum-apex-screen .takum-apex-field[data-depends-on],
.takum-apex-form-wrap .takum-apex-field[data-depends-on] {
	grid-column: 1 / -1 !important;
}

/* ============================================================
 * Fix del desbordamiento del texto en opciones radio/checkbox
 * (textos largos como "MENOPAUSIA O PERIMENOPAUSIA")
 * ============================================================ */
#takum-apex-screen .takum-apex-options label,
.takum-apex-form-wrap .takum-apex-options label {
	min-height: auto !important;
	word-break: break-word !important;
	overflow-wrap: anywhere !important;
	hyphens: auto !important;
}

/* El span del texto debe poder envolver y ocupar el espacio restante */
#takum-apex-screen .takum-apex-options label > span,
.takum-apex-form-wrap .takum-apex-options label > span {
	flex: 1 1 auto !important;
	min-width: 0 !important;
	white-space: normal !important;
	display: inline-block !important;
	line-height: 1.35 !important;
	word-break: break-word !important;
	overflow-wrap: anywhere !important;
	text-transform: none !important;
}

/* Que las cards de opciones tengan auto-altura uniforme dentro del grid */
#takum-apex-screen .takum-apex-options,
.takum-apex-form-wrap .takum-apex-options {
	align-items: stretch !important;
}

/* El input radio/checkbox no debe colapsarse */
#takum-apex-screen .takum-apex-options input[type="radio"],
#takum-apex-screen .takum-apex-options input[type="checkbox"] {
	flex: 0 0 auto !important;
	margin-top: 3px !important;
}

/* ============================================================
 * Colores de marca para iconos de género ♂ ♀
 * Hombre  → azul #3871e0 (color principal de marca)
 * Mujer   → dorado #c9a872 (color secundario/accent)
 * ============================================================ */

/* Cards de selector de género (intro + post-purchase pantalla 1) */
.takum-apex-gender-card[data-gender="hombre"] .takum-apex-gender-card__icon,
.takum-apex-gender-card:has(input[value="hombre"]) .takum-apex-gender-card__icon {
	color: #3871e0 !important;
}
.takum-apex-gender-card[data-gender="mujer"] .takum-apex-gender-card__icon,
.takum-apex-gender-card:has(input[value="mujer"]) .takum-apex-gender-card__icon {
	color: #c9a872 !important;
}
.takum-apex-gender-card__icon {
	font-size: 2.4rem !important;
	line-height: 1 !important;
	display: block !important;
	margin-bottom: 8px !important;
	font-weight: 400 !important;
}

/* Badge en el form (también en colores de marca) */
.takum-apex-gender-badge--hombre {
	background: rgba(56, 113, 224, 0.12) !important;
	border-color: rgba(56, 113, 224, 0.35) !important;
}
.takum-apex-gender-badge--hombre .takum-apex-gender-badge__icon,
.takum-apex-gender-badge--hombre strong {
	color: #3871e0 !important;
}

.takum-apex-gender-badge--mujer {
	background: rgba(201, 168, 114, 0.10) !important;
	border-color: rgba(201, 168, 114, 0.40) !important;
}
.takum-apex-gender-badge--mujer .takum-apex-gender-badge__icon,
.takum-apex-gender-badge--mujer strong {
	color: #c9a872 !important;
}

/* Checkmark SVG cuando la card está seleccionada */
.takum-apex-gender-card__check {
	position: absolute;
	top: 14px;
	right: 14px;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: #3871e0;
	color: #ffffff;
	display: none;
	align-items: center;
	justify-content: center;
	box-shadow: 0 2px 6px rgba(56,113,224,0.3);
}
.takum-apex-gender-card__check svg {
	width: 14px;
	height: 14px;
	stroke: #ffffff;
}
.takum-apex-gender-card.is-checked .takum-apex-gender-card__check,
.takum-apex-gender-card:has(input:checked) .takum-apex-gender-card__check {
	display: flex !important;
}

/* Mujer seleccionada: checkmark dorado */
.takum-apex-gender-card:has(input[value="mujer"]:checked) .takum-apex-gender-card__check {
	background: #c9a872 !important;
	box-shadow: 0 2px 6px rgba(201,168,114,0.3) !important;
}

/* ============================================================
 * Texto secundario tenue del intro (Mi Cuenta - selector de género)
 * rgba(255,255,255,0.65) — color uniforme para títulos, prompts y bullets
 * ============================================================ */
body .takum-apex-intro .takum-apex-notice li {
	color: rgba(255, 255, 255, 0.65) !important;
}

body .takum-apex-intro,
body .takum-apex-intro .takum-apex-intro__title,
body .takum-apex-intro .takum-apex-intro__prompt,
body .takum-apex-intro .takum-apex-notice__title,
html body .takum-apex-intro h2,
html body .takum-apex-intro h3,
.takum-apex-intro .takum-apex-intro__title.takum-apex-intro__title,
.takum-apex-intro form .takum-apex-intro__prompt,
.takum-apex-intro .takum-apex-form .takum-apex-intro__prompt {
	color: rgba(255, 255, 255, 0.65) !important;
}