/**
 * Eidos Forms — Estilos públicos
 *
 * Branding Eidos: Teal #37bff0, Orange #ec6608, Navy #0d1b2a, Green #93c01f
 *
 * Defensas:
 * - Mega Main Menu suele inyectar `height: 30px !important` a selects.
 *   Forzamos altura propia con !important dentro del wrapper.
 * - Se respeta tipografía heredada del tema; solo overrideamos lo necesario.
 */

/* [v3.8.77] Fix responsive del layout cards: en móvil el grid pasa a UNA columna
   real (1fr) y cada campo ocupa el ancho completo. El bug anterior dejaba el
   grid en 6 columnas con los campos en "span 1", metiéndolos en 1/6 del ancho
   y corriendo todo el form hacia la izquierda. */
@media ( max-width: 768px ) {
	.eidos-form-wrapper.eidos-form-layout-cards .eidos-form-fields {
		display: grid !important;
		grid-template-columns: 1fr !important;
		width: 100%;
	}
	.eidos-form-wrapper.eidos-form-layout-cards .eidos-field {
		grid-column: 1 / -1 !important;
		width: auto !important;
	}
}

.eidos-form-wrapper {
	max-width: 100%;
	margin: 0 0 24px;
	font-size: 15px;
	line-height: 1.5;
	color: #2c3338;
	box-sizing: border-box;
}

.eidos-form-wrapper *,
.eidos-form-wrapper *::before,
.eidos-form-wrapper *::after {
	box-sizing: border-box;
}

/* [v3.8.42] Título del formulario (toggle opcional desde settings). */
.eidos-form-title {
	margin: 0 0 12px;
	font-size: 24px;
	font-weight: 600;
	color: #0d1b2a;
	line-height: 1.3;
}

.eidos-form-description {
	margin-bottom: 16px;
	color: #50575e;
}

.eidos-form-error {
	padding: 12px 16px;
	background: #fdecea;
	border-left: 4px solid #d63638;
	color: #8a1f21;
	border-radius: 3px;
}

/* -------- Layout de campos -------- */
.eidos-form-fields {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	margin-bottom: 16px;
}

.eidos-field {
	display: block;
	width: 100%;
}

/* v3.8.19: el wrapper de campos hidden debe estar completamente oculto.
   Sin esto, temas que estilizan todos los .eidos-field con fondo/borde hacen
   que aparezcan cajas vacías visibles. */
.eidos-field-hidden {
	display: none !important;
}

.eidos-field-width-full { width: 100%; }
.eidos-field-width-half { width: calc( 50% - 8px ); }
.eidos-field-width-third { width: calc( 33.333% - 11px ); }
.eidos-field-width-twothirds { width: calc( 66.666% - 5px ); }

@media ( max-width: 600px ) {
	.eidos-field-width-half,
	.eidos-field-width-third,
	.eidos-field-width-twothirds {
		width: 100%;
	}
}

/* -------- Labels -------- */
.eidos-field-label {
	display: block;
	margin-bottom: 6px;
	font-weight: 600;
	color: #0d1b2a;
	font-size: 14px;
}

.eidos-field-required-mark {
	color: #ec6608;
	margin-left: 2px;
}

.eidos-field-help {
	margin-top: 4px;
	font-size: 12px;
	color: #50575e;
	line-height: 1.4;
}

.eidos-field-error {
	margin-top: 6px;
	font-size: 13px;
	color: #d63638;
	min-height: 0;
	transition: all 0.15s;
}

.eidos-field-error:not(:empty) {
	padding: 4px 8px;
	background: #fdecea;
	border-radius: 3px;
	border-left: 3px solid #d63638;
}

/* -------- Inputs -------- */
.eidos-form-wrapper input[type="text"],
.eidos-form-wrapper input[type="email"],
.eidos-form-wrapper input[type="tel"],
.eidos-form-wrapper input[type="url"],
.eidos-form-wrapper input[type="number"],
.eidos-form-wrapper input[type="date"],
.eidos-form-wrapper textarea,
.eidos-form-wrapper select {
	width: 100%;
	padding: 10px 12px;
	border: 1px solid #c3c4c7;
	border-radius: 4px;
	background: #fff;
	font-size: 15px;
	font-family: inherit;
	color: #2c3338;
	transition: border-color 0.15s, box-shadow 0.15s;
	height: auto !important; /* defensa contra Mega Main Menu */
	min-height: 42px;
	line-height: 1.4;
}

.eidos-form-wrapper textarea {
	min-height: 100px;
	resize: vertical;
}

.eidos-form-wrapper input:focus,
.eidos-form-wrapper textarea:focus,
.eidos-form-wrapper select:focus {
	outline: none;
	border-color: #37bff0;
	box-shadow: 0 0 0 3px rgba(55,191,240,0.2);
}

.eidos-form-wrapper input:disabled,
.eidos-form-wrapper textarea:disabled,
.eidos-form-wrapper select:disabled,
.eidos-form-wrapper input[readonly],
.eidos-form-wrapper textarea[readonly] {
	background: #f6f7f7;
	color: #50575e;
	cursor: not-allowed;
}

/* Estado de error en el input */
.eidos-field.has-error input,
.eidos-field.has-error textarea,
.eidos-field.has-error select {
	border-color: #d63638;
	background: #fff8f8;
}

.eidos-field.has-error input:focus,
.eidos-field.has-error textarea:focus,
.eidos-field.has-error select:focus {
	box-shadow: 0 0 0 3px rgba(214,54,56,0.2);
}

/* -------- Radio / Checkbox -------- */
.eidos-field-options {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.eidos-field-option {
	display: flex;
	align-items: center;
	gap: 8px;
	cursor: pointer;
	padding: 6px 4px;
	font-size: 14px;
	font-weight: 400;
	color: #2c3338;
}

.eidos-field-option input[type="radio"],
.eidos-field-option input[type="checkbox"] {
	margin: 0;
	width: 16px;
	height: 16px;
	flex-shrink: 0;
	accent-color: #37bff0;
}

.eidos-field-consent {
	display: flex;
	align-items: center;
	gap: 10px;
	cursor: pointer;
	padding: 8px;
	background: #f8f9fa;
	border: 1px solid #e1e2e4;
	border-radius: 4px;
	font-size: 13px;
	line-height: 1.5;
	color: #2c3338;
}

/* Si el span del consent contiene texto largo (que se rompe en varias líneas),
 * volvemos a alinear desde arriba para que el checkbox no quede flotando al
 * medio del bloque de texto. */
.eidos-field-consent > span {
	flex: 1;
}

.eidos-field-consent input[type="checkbox"] {
	margin: 0;
	flex-shrink: 0;
	accent-color: #37bff0;
	width: 16px;
	height: 16px;
}

/* Bloque de Texto del consentimiento (TyC largos) cuando se usa junto a la Etiqueta. */
.eidos-field-consent-text {
	font-size: 13px;
	line-height: 1.6;
	color: #2c3338;
	margin-bottom: 8px;
	padding: 10px 12px;
	background: #f8f9fa;
	border: 1px solid #e1e2e4;
	border-radius: 4px;
	max-height: 200px;
	overflow-y: auto;
}

/* -------- Section title -------- */
.eidos-field-section-title {
	font-size: 18px;
	color: #0d1b2a;
	margin: 16px 0 4px;
	padding-bottom: 8px;
	border-bottom: 2px solid #37bff0;
}

.eidos-field-section-subtitle {
	font-size: 14px;
	color: #50575e;
	margin: 0 0 12px;
}

/* [v3.8.67] Campo HTML en cards: centrar el contenido verticalmente. La card
   puede quedar más alta que el texto (grid stretch, vecinos más altos), así que
   se usa flex para centrar en vez de depender de que la altura calce justo. */
.eidos-form-layout-cards .eidos-field-html {
	display: flex;
	flex-direction: column;
	justify-content: center;
}

/* [v3.8.68] El tema (Visual Composer / vcwb-font-manager) aplica márgenes al <p>
   con alta especificidad (body.vcwb...entry-content p) que desplazan el texto
   dentro de la card. Se anulan primer/último margen con !important para ganarle. */
.eidos-field-html-content > *:first-child { margin-top: 0 !important; }
.eidos-field-html-content > *:last-child { margin-bottom: 0 !important; }
.eidos-field-html-content p { margin-top: 0; margin-bottom: 0; }

.eidos-field-html-content {
	color: #2c3338;
	font-size: 14px;
	line-height: 1.5;
}

/* -------- Submit button -------- */
.eidos-form-actions {
	margin-top: 20px;
}

.eidos-form-submit {
	background: #ec6608;
	color: #fff;
	border: none;
	border-radius: 4px;
	padding: 12px 28px;
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.15s;
	font-family: inherit;
	letter-spacing: 0.3px;
	min-height: 46px;
}

.eidos-form-submit:hover:not(:disabled) {
	background: #d35a05;
	transform: translateY(-1px);
	box-shadow: 0 4px 12px rgba(236,102,8,0.3);
}

.eidos-form-submit:active:not(:disabled) {
	transform: translateY(0);
}

.eidos-form-submit:disabled {
	background: #999;
	cursor: not-allowed;
	opacity: 0.7;
}

/* -------- Mensajes de éxito / error globales -------- */
.eidos-form-messages {
	margin-bottom: 12px;
}

.eidos-form-messages:empty {
	display: none;
}

.eidos-form-messages .eidos-message-success {
	padding: 14px 18px;
	background: #f3f9e6;
	border-left: 4px solid #93c01f;
	border-radius: 3px;
	color: #4a6d12;
}

.eidos-form-messages .eidos-message-error {
	padding: 14px 18px;
	background: #fdecea;
	border-left: 4px solid #d63638;
	border-radius: 3px;
	color: #8a1f21;
}

/* Form en estado de envío */
.eidos-form.is-submitting {
	opacity: 0.7;
	pointer-events: none;
}

/* ============================================================
   MULTI-STEP / MULTI-PAGE
   ============================================================ */

.eidos-form-progress {
	margin-bottom: 24px;
}

.eidos-form-progress-bar {
	background: #e1e2e4;
	border-radius: 999px;
	height: 8px;
	overflow: hidden;
	margin-bottom: 8px;
}

.eidos-form-progress-fill {
	height: 100%;
	background: linear-gradient( 90deg, #37bff0 0%, #93c01f 100% );
	border-radius: 999px;
	transition: width 0.4s ease;
}

.eidos-form-progress-text {
	font-size: 12px;
	color: #50575e;
	text-align: right;
	font-weight: 500;
}

.eidos-form-progress-text .eidos-current-page {
	font-weight: 700;
	color: #ec6608;
}

.eidos-form-page {
	transition: opacity 0.2s ease;
}

.eidos-form-page:not(.is-active) {
	display: none;
}

.eidos-form-actions {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
	align-items: center;
}

.eidos-form-prev {
	background: transparent;
	color: #50575e;
	border: 1px solid #c3c4c7;
	border-radius: 4px;
	padding: 12px 24px;
	font-size: 15px;
	font-weight: 500;
	cursor: pointer;
	transition: all 0.15s;
	font-family: inherit;
	min-height: 46px;
}

.eidos-form-prev:hover {
	background: #f6f7f7;
	border-color: #50575e;
}

.eidos-form-next {
	background: #37bff0;
	color: #0d1b2a;
	border: none;
	border-radius: 4px;
	padding: 12px 28px;
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.15s;
	font-family: inherit;
	min-height: 46px;
}

.eidos-form-next:hover {
	background: #2aa8d8;
	transform: translateY(-1px);
	box-shadow: 0 4px 12px rgba(55, 191, 240, 0.3);
}

/* Conditional logic visibility */
.eidos-field-conditional-hidden {
	display: none !important;
}

/* ============================================================
   BLOQUE 2 — Campos avanzados
   ============================================================ */

/* Composite fields (Name, Address) */
.eidos-composite {
	display: grid;
	gap: 12px;
	grid-template-columns: 1fr 1fr;
}

.eidos-composite-name {
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
}

.eidos-composite-address .eidos-composite-part-full {
	grid-column: 1 / -1;
}

.eidos-composite-part label {
	display: block;
	font-size: 12px;
	color: #50575e;
	margin-bottom: 4px;
	font-weight: 500;
}

.eidos-composite-part input {
	width: 100%;
	box-sizing: border-box;
}

/* List field */
.eidos-list-field {
	overflow-x: auto;
}

.eidos-list-table {
	width: 100%;
	border-collapse: collapse;
}

.eidos-list-table thead {
	background: #f6f7f7;
}

.eidos-list-table th,
.eidos-list-table td {
	padding: 8px;
	border: 1px solid #e1e2e4;
	vertical-align: middle;
}

.eidos-list-table th {
	font-size: 12px;
	font-weight: 600;
	color: #0d1b2a;
	text-align: left;
}

.eidos-list-table input[type="text"] {
	width: 100%;
	box-sizing: border-box;
	margin: 0;
	border: 1px solid #c3c4c7;
	padding: 6px 8px;
}

.eidos-list-actions {
	white-space: nowrap;
	width: 80px;
	text-align: center;
}

.eidos-list-add,
.eidos-list-remove {
	width: 28px;
	height: 28px;
	border: 1px solid #c3c4c7;
	background: #fff;
	border-radius: 4px;
	cursor: pointer;
	font-size: 16px;
	font-weight: 700;
	line-height: 1;
	color: #50575e;
	transition: all 0.15s;
}

.eidos-list-add:hover {
	border-color: #93c01f;
	color: #93c01f;
}

.eidos-list-remove:hover {
	border-color: #a00;
	color: #a00;
}

/* File upload */
.eidos-file-field {
	border: 2px dashed #c3c4c7;
	border-radius: 6px;
	padding: 16px;
	background: #fafafa;
	transition: border-color 0.15s;
}

.eidos-file-field:hover {
	border-color: #37bff0;
}

.eidos-file-input {
	display: block;
	width: 100%;
	margin-bottom: 12px;
}

.eidos-file-list {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.eidos-file-item {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 12px;
	background: #fff;
	border: 1px solid #e1e2e4;
	border-radius: 4px;
	font-size: 13px;
}

.eidos-file-item.is-uploading {
	background: #e8f4fb;
	border-color: #37bff0;
}

.eidos-file-item.has-error {
	background: #fdecea;
	border-color: #a00;
}

.eidos-file-name {
	flex: 1;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.eidos-file-progress {
	color: #37bff0;
	font-weight: 600;
}

.eidos-file-error {
	color: #a00;
	font-size: 12px;
}

.eidos-file-remove {
	width: 24px;
	height: 24px;
	border: none;
	background: transparent;
	color: #a00;
	cursor: pointer;
	font-size: 18px;
	line-height: 1;
	border-radius: 4px;
	transition: background 0.15s;
}

.eidos-file-remove:hover {
	background: #fdecea;
}

/* Image choice */
.eidos-image-choice {
	display: grid;
	gap: 12px;
}

.eidos-image-choice-cols-2 { grid-template-columns: repeat(2, 1fr); }
.eidos-image-choice-cols-3 { grid-template-columns: repeat(3, 1fr); }
.eidos-image-choice-cols-4 { grid-template-columns: repeat(4, 1fr); }
.eidos-image-choice-cols-5 { grid-template-columns: repeat(5, 1fr); }
.eidos-image-choice-cols-6 { grid-template-columns: repeat(6, 1fr); }

@media ( max-width: 600px ) {
	.eidos-image-choice-cols-3,
	.eidos-image-choice-cols-4,
	.eidos-image-choice-cols-5,
	.eidos-image-choice-cols-6 {
		grid-template-columns: repeat(2, 1fr);
	}
}

.eidos-image-choice-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	padding: 10px;
	border: 2px solid #e1e2e4;
	border-radius: 6px;
	cursor: pointer;
	transition: all 0.15s;
	text-align: center;
}

.eidos-image-choice-item:hover {
	border-color: #37bff0;
	background: #f6fcff;
}

.eidos-image-choice-item.is-selected {
	border-color: #ec6608;
	background: #fff7ec;
}

.eidos-image-choice-item input[type="checkbox"],
.eidos-image-choice-item input[type="radio"] {
	display: none;
}

.eidos-image-choice-item img {
	width: 100%;
	height: auto;
	max-height: 120px;
	object-fit: cover;
	border-radius: 3px;
}

.eidos-image-placeholder {
	width: 60px;
	height: 60px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #f0f0f1;
	color: #888;
	font-size: 24px;
	border-radius: 4px;
}

.eidos-image-choice-label {
	font-size: 12px;
	color: #0d1b2a;
	font-weight: 500;
}

/* Calculation */
.eidos-calc-wrapper {
	display: flex;
	align-items: center;
	gap: 6px;
}

.eidos-calc-prefix,
.eidos-calc-suffix {
	color: #50575e;
	font-weight: 600;
}

.eidos-calc-display {
	background: #f6f7f7 !important;
	font-weight: 600;
	color: #0d1b2a;
	cursor: not-allowed;
}

/* Captcha placeholder */
.eidos-captcha-placeholder {
	background: #f0f0f1;
	border: 1px dashed #c3c4c7;
	padding: 14px;
	border-radius: 4px;
	text-align: center;
	color: #888;
	font-size: 12px;
}

/* Chained selects */
.eidos-chained-select {
	display: grid;
	gap: 12px;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.eidos-chained-level label {
	display: block;
	font-size: 12px;
	color: #50575e;
	margin-bottom: 4px;
	font-weight: 500;
}

.eidos-chained-level select {
	width: 100%;
}

/* ============================================================
   BLOQUE 5 — Íconos en opciones (checkbox/radio)
   ============================================================ */

.eidos-field-option {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.eidos-option-icon {
	display: inline-block;
	vertical-align: middle;
	width: 20px;
	height: 20px;
	line-height: 20px;
	text-align: center;
	font-size: 16px;
	color: #ec6608;
	flex-shrink: 0;
}

.eidos-option-icon.dashicons {
	font-size: 18px;
}

.eidos-option-icon-emoji {
	font-size: 18px;
}

.eidos-option-icon-img {
	width: 20px;
	height: 20px;
	object-fit: contain;
	vertical-align: middle;
	border-radius: 3px;
	flex-shrink: 0;
}

/* Captcha placeholder cuando no está configurado */
.eidos-captcha-unconfigured .eidos-captcha-placeholder {
	padding: 12px 16px;
	background: #fdecea;
	border-left: 3px solid #a00;
	color: #a00;
	font-size: 13px;
}

/* ============================================================
   v1.8.0 — Bloque 8.1: Inteligencia de campos
   ============================================================ */

/* Unique ID display */
.eidos-unique-id-display {
	background: #f6f8fa !important;
	color: #6b7280 !important;
	font-style: italic;
	cursor: not-allowed;
}

/* Populate Anything — estado de carga */
.eidos-field.is-populating {
	opacity: 0.65;
	pointer-events: none;
	position: relative;
}
.eidos-field.is-populating::after {
	content: '';
	position: absolute;
	top: 50%;
	right: 12px;
	width: 14px;
	height: 14px;
	border: 2px solid #e5e7eb;
	border-top-color: #ec6608;
	border-radius: 50%;
	animation: eidosSpin 0.8s linear infinite;
}
@keyframes eidosSpin {
	to { transform: rotate(360deg); }
}

/* Word Count counter */
.eidos-word-counter {
	font-size: 11px;
	color: #6b7280;
	margin-top: 4px;
	text-align: right;
}
.eidos-word-counter.is-over {
	color: #dc2626;
	font-weight: 500;
}
.eidos-word-counter.is-under {
	color: #ec6608;
}
.eidos-word-counter.is-ok {
	color: #16a34a;
}

/* [v3.8.56] Límite de caracteres compartido: advertencia inline + panel flotante */
.eidos-shared-chars-warning {
	margin-top: 6px;
	padding: 10px 12px;
	background: #fef2f2;
	border: 1px solid #fecaca;
	border-left: 3px solid #dc2626;
	border-radius: 5px;
	color: #991b1b;
	font-size: 13px;
	line-height: 1.45;
}

.eidos-scl-panel {
	position: fixed;
	right: 16px;
	bottom: 16px;
	z-index: 99998;
	width: 272px;
	background: #fff;
	border: 1px solid #d1d5db;
	border-radius: 12px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14);
	font-size: 13px;
	line-height: 1.4;
	color: #1f2937;
	display: none;
}
.eidos-scl-panel.is-visible {
	display: block;
}
.eidos-scl-panel.is-collapsed {
	width: auto;
	border-radius: 999px;
}

/* Pastilla (estado minimizado) */
.eidos-scl-pill {
	display: none;
	align-items: center;
	gap: 8px;
	padding: 8px 14px;
	background: transparent;
	border: none;
	cursor: pointer;
	font: inherit;
	color: inherit;
	font-weight: 600;
	white-space: nowrap;
}
.eidos-scl-panel.is-collapsed .eidos-scl-pill {
	display: flex;
}
.eidos-scl-panel.is-collapsed .eidos-scl-body {
	display: none;
}
.eidos-scl-dot {
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: #16a34a;
	flex-shrink: 0;
}
.eidos-scl-panel.is-near .eidos-scl-dot { background: #f59e0b; }
.eidos-scl-panel.is-limit .eidos-scl-dot { background: #dc2626; }
.eidos-scl-chevron {
	font-size: 10px;
	color: #9ca3af;
}

/* Cuerpo expandido */
.eidos-scl-body {
	padding: 12px 16px 14px;
}
.eidos-scl-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 8px;
}
.eidos-scl-title {
	font-size: 12px;
	font-weight: 600;
	color: #6b7280;
	text-transform: uppercase;
	letter-spacing: 0.3px;
}
.eidos-scl-toggle {
	background: transparent;
	border: none;
	cursor: pointer;
	color: #9ca3af;
	font-size: 11px;
	padding: 2px 4px;
	line-height: 1;
}
.eidos-scl-total {
	display: flex;
	align-items: baseline;
	gap: 5px;
}
.eidos-scl-num {
	font-size: 22px;
	font-weight: 700;
	color: #111827;
}
.eidos-scl-max {
	font-size: 13px;
	color: #6b7280;
}
.eidos-scl-bar {
	height: 6px;
	background: #f3f4f6;
	border-radius: 3px;
	margin: 8px 0 4px;
	overflow: hidden;
}
.eidos-scl-bar-fill {
	height: 100%;
	width: 0;
	border-radius: 3px;
	background: #16a34a;
	transition: width 0.15s ease, background 0.15s ease;
}
.eidos-scl-panel.is-near .eidos-scl-bar-fill { background: #f59e0b; }
.eidos-scl-panel.is-limit .eidos-scl-bar-fill { background: #dc2626; }
.eidos-scl-remaining {
	margin: 0 0 10px;
	font-size: 12px;
	color: #16a34a;
}
.eidos-scl-panel.is-near .eidos-scl-remaining { color: #b45309; }
.eidos-scl-panel.is-limit .eidos-scl-remaining {
	color: #dc2626;
	font-weight: 600;
}

/* Desglose por campo */
.eidos-scl-rows {
	border-top: 1px solid #e5e7eb;
	padding-top: 8px;
	font-size: 12px;
	max-height: 40vh;
	overflow-y: auto;
	overflow-x: hidden;
}
.eidos-scl-row {
	display: flex;
	justify-content: space-between;
	gap: 10px;
	padding: 3px 4px;
	border-radius: 4px;
	color: #4b5563;
}
.eidos-scl-row-label {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	min-width: 0;
}
.eidos-scl-row-count {
	flex-shrink: 0;
}
.eidos-scl-row.is-empty,
.eidos-scl-row-base {
	color: #9ca3af;
}
.eidos-scl-row.is-active {
	background: #eff6ff;
	color: #1d4ed8;
	font-weight: 600;
}

/* Móvil: anclado abajo a lo ancho */
@media (max-width: 782px) {
	.eidos-scl-panel {
		left: 12px;
		right: 12px;
		bottom: 12px;
		width: auto;
	}
	.eidos-scl-panel.is-collapsed {
		left: 50%;
		right: auto;
		transform: translateX(-50%);
	}
	.eidos-scl-rows {
		max-height: 28vh;
	}
}

/* Choice (limit checkboxes) counter */
.eidos-choice-counter {
	font-size: 11px;
	color: #6b7280;
	margin-top: 6px;
}
.eidos-choice-counter.is-over {
	color: #dc2626;
	font-weight: 500;
}

/* ============================================================
   v1.9.0 — Bloques 8.2-8.5
   ============================================================ */

/* TOS box */
.eidos-tos-box {
	max-height: 200px;
	overflow-y: auto;
	border: 1px solid #e5e7eb;
	background: #fafaf9;
	padding: 12px;
	border-radius: 6px;
	margin-bottom: 8px;
	font-size: 13px;
	line-height: 1.5;
}
.eidos-tos-require-scroll {
	border-color: #ec6608;
	background: #fff7ed;
}
.eidos-tos-require-scroll.is-read {
	border-color: #93c01f;
	background: #f7fbe9;
}
.eidos-tos-label { display: flex; align-items: center; gap: 8px; cursor: pointer; }

/* Booking slots */
.eidos-booking-slots { display: flex; flex-direction: column; gap: 6px; }
.eidos-booking-slot {
	display: flex; align-items: center; gap: 10px;
	padding: 10px 12px; border: 1px solid #e5e7eb; border-radius: 6px;
	background: #fff; cursor: pointer; transition: all 0.12s;
}
.eidos-booking-slot:hover { border-color: #ec6608; background: #fff7ed; }
.eidos-booking-slot input[type="radio"]:checked + strong { color: #ec6608; }
.eidos-booking-remaining { color: #6b7280; font-size: 12px; margin-left: auto; }
.eidos-booking-empty { color: #9ca3af; padding: 12px; background: #fafaf9; border-radius: 6px; }

/* Nested form */
.eidos-nested-form {
	border: 1px solid #e5e7eb; border-radius: 7px; padding: 12px;
	background: #fafaf9;
}
.eidos-nested-row {
	background: #fff; border: 1px solid #f0f0ee; border-radius: 6px;
	padding: 12px; margin-bottom: 8px;
}
.eidos-nested-row-header {
	display: flex; justify-content: space-between; align-items: center;
	margin-bottom: 10px; padding-bottom: 8px; border-bottom: 1px solid #f0f0ee;
}
.eidos-nested-row-header strong { font-size: 13px; color: #ec6608; }
.eidos-nested-remove {
	background: #fee2e2; border: none; color: #dc2626; width: 24px; height: 24px;
	border-radius: 4px; cursor: pointer; font-size: 16px; line-height: 1;
}
.eidos-nested-remove:hover { background: #dc2626; color: #fff; }
.eidos-nested-field { margin-bottom: 8px; }
.eidos-nested-field label { display: block; font-size: 11px; color: #6b7280; margin-bottom: 4px; }
.eidos-nested-add {
	background: #fff; border: 1px dashed #d1d5db; color: #6b7280;
	padding: 8px 14px; border-radius: 5px; cursor: pointer; width: 100%;
	font-size: 12px; transition: all 0.12s;
}
.eidos-nested-add:hover { border-color: #ec6608; color: #ec6608; border-style: solid; }

/* Preview Submission overlay */
.eidos-preview-overlay {
	position: fixed; inset: 0; background: rgba(13, 27, 42, 0.5);
	display: flex; align-items: center; justify-content: center;
	z-index: 99999; padding: 20px;
}
.eidos-preview-modal {
	background: #fff; border-radius: 10px; padding: 24px;
	max-width: 600px; width: 100%; max-height: 85vh; overflow-y: auto;
	box-shadow: 0 20px 60px rgba(0,0,0,0.25);
}
.eidos-preview-modal h3 { margin: 0 0 16px; font-size: 18px; color: #0d1b2a; }
.eidos-preview-content { margin: 0 0 20px; display: grid; grid-template-columns: 1fr 2fr; gap: 8px 16px; }
.eidos-preview-content dt { font-weight: 500; color: #6b7280; font-size: 13px; }
.eidos-preview-content dd { margin: 0; color: #0d1b2a; font-size: 13px; }
.eidos-preview-actions { display: flex; gap: 8px; justify-content: flex-end; }
.eidos-preview-edit, .eidos-preview-confirm {
	padding: 10px 18px; border-radius: 6px; cursor: pointer;
	font-size: 13px; font-weight: 500; border: none;
}
.eidos-preview-edit { background: #fff; border: 1px solid #e5e7eb; color: #6b7280; }
.eidos-preview-edit:hover { background: #fafaf9; }
.eidos-preview-confirm { background: #ec6608; color: #fff; }
.eidos-preview-confirm:hover { background: #d4570a; }

/* Page Transitions */
.eidos-form-page { transition: opacity 0.25s ease, transform 0.25s ease; }
.eidos-page-transition-fade .eidos-form-page[hidden],
.eidos-page-transition-fade .eidos-form-page[style*="display: none"] {
	display: none !important;
}
.eidos-page-transition-fade .eidos-form-page { opacity: 1; }
.eidos-page-transition-slide .eidos-form-page {
	transform: translateX(0);
}

/* Email validation feedback */
.eidos-email-validation {
	font-size: 11px;
	margin-top: 4px;
	min-height: 14px;
}
/* [v3.8.65] Mientras no hay mensaje, el feedback no ocupa alto: así el campo
   email mide igual que los demás en el layout cards. */
.eidos-email-validation:empty {
	margin-top: 0;
	min-height: 0;
}
.eidos-email-validation.is-checking { color: #6b7280; }
.eidos-email-validation.is-valid { color: #16a34a; }
.eidos-email-validation.is-invalid { color: #dc2626; }

/* ============================================================
   v1.9.3 — Layouts y field icons
   ============================================================ */

/* Field icon (al lado del label) */
.eidos-form-wrapper .eidos-field-icon {
	display: inline-block;
	vertical-align: middle;
	margin-right: 6px;
	color: #6b7280;
}
.eidos-form-wrapper .eidos-field-icon-dashicon {
	font-size: 16px !important;
	width: 16px !important;
	height: 16px !important;
	line-height: 16px !important;
}
.eidos-form-wrapper .eidos-field-icon-img {
	width: 16px;
	height: 16px;
	object-fit: contain;
	vertical-align: middle;
}
.eidos-form-wrapper .eidos-field-icon-emoji {
	font-size: 14px;
	line-height: 1;
}

/* ============================================================
   Layout A — Auto-fit grid (recomendado)
   ============================================================ */
.eidos-form-layout-auto_grid .eidos-form-fields {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 14px 16px;
	margin-bottom: 16px;
}

/* Reset del flex anterior cuando es grid */
.eidos-form-layout-auto_grid .eidos-field {
	width: auto !important;
	min-width: 0;
}

/* En grid, las widths ahora son spans de columnas */
.eidos-form-layout-auto_grid .eidos-field-width-full { grid-column: span 6; }
.eidos-form-layout-auto_grid .eidos-field-width-twothirds { grid-column: span 4; }
.eidos-form-layout-auto_grid .eidos-field-width-half { grid-column: span 3; }
.eidos-form-layout-auto_grid .eidos-field-width-third { grid-column: span 2; }

@media ( max-width: 768px ) {
	.eidos-form-layout-auto_grid .eidos-form-fields {
		grid-template-columns: 1fr;
	}
	.eidos-form-layout-auto_grid .eidos-field-width-full,
	.eidos-form-layout-auto_grid .eidos-field-width-twothirds,
	.eidos-form-layout-auto_grid .eidos-field-width-half,
	.eidos-form-layout-auto_grid .eidos-field-width-third {
		grid-column: span 1;
	}
}

/* ============================================================
   Layout B — Cards con borde (estilo Stripe Checkout)
   ============================================================ */
.eidos-form-layout-cards .eidos-form-fields {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 12px;
	margin-bottom: 16px;
}

.eidos-form-layout-cards .eidos-field {
	width: auto !important;
	min-width: 0;
	background: #fff;
	border: 1px solid #e5e7eb;
	border-radius: 7px;
	padding: 10px 12px;
	transition: border-color 0.15s, box-shadow 0.15s;
}

.eidos-form-layout-cards .eidos-field:focus-within {
	border-color: #ec6608;
	box-shadow: 0 0 0 3px rgba(236, 102, 8, 0.12);
}

.eidos-form-layout-cards .eidos-field-width-full { grid-column: span 6; }
.eidos-form-layout-cards .eidos-field-width-twothirds { grid-column: span 4; }
.eidos-form-layout-cards .eidos-field-width-half { grid-column: span 3; }
.eidos-form-layout-cards .eidos-field-width-third { grid-column: span 2; }

/* En cards, los labels son chicos y grises arriba */
.eidos-form-layout-cards .eidos-field-label {
	font-size: 11px !important;
	color: #6b7280 !important;
	font-weight: 500 !important;
	margin-bottom: 4px !important;
	text-transform: uppercase;
	letter-spacing: 0.3px;
}

.eidos-form-layout-cards .eidos-field-required-mark {
	color: #ec6608;
}

/* En cards, los inputs son sin borde (la card hace de borde) */
.eidos-form-layout-cards .eidos-field-input input[type="text"],
.eidos-form-layout-cards .eidos-field-input input[type="email"],
.eidos-form-layout-cards .eidos-field-input input[type="tel"],
.eidos-form-layout-cards .eidos-field-input input[type="url"],
.eidos-form-layout-cards .eidos-field-input input[type="number"],
.eidos-form-layout-cards .eidos-field-input input[type="date"],
.eidos-form-layout-cards .eidos-field-input input[type="datetime-local"],
.eidos-form-layout-cards .eidos-field-input input[type="time"],
.eidos-form-layout-cards .eidos-field-input input[type="password"],
.eidos-form-layout-cards .eidos-field-input select,
.eidos-form-layout-cards .eidos-field-input textarea {
	border: none !important;
	padding: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	font-size: 14px !important;
	min-height: 24px !important;
}

.eidos-form-layout-cards .eidos-field-input input:focus,
.eidos-form-layout-cards .eidos-field-input select:focus,
.eidos-form-layout-cards .eidos-field-input textarea:focus {
	outline: none !important;
}

/* Help text dentro de cards */
.eidos-form-layout-cards .eidos-field-help {
	font-size: 11px;
	color: #9ca3af;
	margin-top: 6px;
}

@media ( max-width: 768px ) {
	.eidos-form-layout-cards .eidos-form-fields {
		grid-template-columns: 1fr;
	}
	.eidos-form-layout-cards .eidos-field-width-full,
	.eidos-form-layout-cards .eidos-field-width-twothirds,
	.eidos-form-layout-cards .eidos-field-width-half,
	.eidos-form-layout-cards .eidos-field-width-third {
		grid-column: span 1;
	}
}

/* ============================================================
   v1.9.5 — Defensa contra Mega Main Menu y otros plugins agresivos
   ============================================================ */

/* SVG inline icons: inmunes a CSS de terceros */
.eidos-form-wrapper .eidos-field-icon-svg {
	display: inline-flex !important;
	align-items: center !important;
	vertical-align: middle !important;
	margin-right: 6px !important;
	color: #6b7280 !important;
	width: 16px !important;
	height: 16px !important;
	min-width: 16px !important;
	min-height: 16px !important;
	flex-shrink: 0 !important;
}
.eidos-form-wrapper .eidos-svg-icon {
	width: 16px !important;
	height: 16px !important;
	min-width: 16px !important;
	min-height: 16px !important;
	display: inline-block !important;
	vertical-align: middle !important;
	flex-shrink: 0 !important;
}

/* Fix Mega Main Menu: pisa height de selects en frontend.
 * El plugin aplica height/line-height/font-size con !important a todos los select
 * dentro de #wpbody (admin) Y dentro del contenido (frontend).
 *
 * v3.8.23: cambiamos `appearance: menulist` por `appearance: none`. La regla
 * vieja forzaba la flecha NATIVA del navegador a mostrarse, y al mismo tiempo
 * inyectábamos una flecha SVG custom como background-image, quedando dos flechas
 * superpuestas. Con `appearance: none` se oculta la nativa y queda solo la SVG. */
*[class*="mega_main"] .eidos-form-wrapper select,
.eidos-form-wrapper select.eidos-defensive-select,
body .eidos-form-wrapper select {
	height: auto !important;
	min-height: 38px !important;
	line-height: 1.5 !important;
	font-size: 14px !important;
	padding: 8px 32px 8px 12px !important;
	-webkit-appearance: none !important;
	-moz-appearance: none !important;
	appearance: none !important;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23787c82' d='M6 8L0 0h12z'/%3E%3C/svg%3E") !important;
	background-repeat: no-repeat !important;
	background-position: right 12px center !important;
	background-size: 10px 6px !important;
	background-color: #fff !important;
	border: 1px solid #d1d5db !important;
	border-radius: 6px !important;
	cursor: pointer !important;
	box-sizing: border-box !important;
}

/* Select foco: borde Eidos */
*[class*="mega_main"] .eidos-form-wrapper select:focus,
body .eidos-form-wrapper select:focus {
	border-color: #ec6608 !important;
	outline: none !important;
	box-shadow: 0 0 0 3px rgba(236, 102, 8, 0.12) !important;
}

/* Select dentro de cards layout: sin borde propio (la card hace de borde) */
.eidos-form-layout-cards .eidos-field-input select {
	border: none !important;
	padding: 0 24px 0 0 !important;
	background-position: right 0 center !important;
	box-shadow: none !important;
	min-height: 24px !important;
}
.eidos-form-layout-cards .eidos-field-input select:focus {
	box-shadow: none !important;
}

/* ============================================================
   v1.9.6 — Layouts de checkboxes/radios
   ============================================================ */

/* Stacked: comportamiento default (uno abajo del otro) — ya está cubierto arriba. */

/* Inline: lado a lado, con wrap si no entran. */
.eidos-form-wrapper .eidos-choices-layout-inline {
	flex-direction: row !important;
	flex-wrap: wrap !important;
	gap: 6px 16px !important;
}
.eidos-form-wrapper .eidos-choices-layout-inline .eidos-field-option {
	flex: 0 0 auto !important;
	margin: 0 !important;
}

/* Grid auto-fit: se acomodan según el espacio disponible. */
.eidos-form-wrapper .eidos-choices-layout-grid {
	display: grid !important;
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)) !important;
	gap: 6px 12px !important;
}
.eidos-form-wrapper .eidos-choices-layout-grid .eidos-field-option {
	margin: 0 !important;
}

@media ( max-width: 600px ) {
	.eidos-form-wrapper .eidos-choices-layout-inline,
	.eidos-form-wrapper .eidos-choices-layout-grid {
		flex-direction: column !important;
		grid-template-columns: 1fr !important;
	}
}

/* ============================================================
   v1.9.7 — Íconos SVG en opciones (radio/checkbox)
   ============================================================ */

.eidos-form-wrapper .eidos-option-icon-svg {
	display: inline-flex !important;
	align-items: center !important;
	vertical-align: middle !important;
	color: #6b7280 !important;
	width: 18px !important;
	height: 18px !important;
	min-width: 18px !important;
	min-height: 18px !important;
	flex-shrink: 0 !important;
	margin-right: 4px !important;
}
.eidos-form-wrapper .eidos-option-icon-svg svg {
	width: 18px !important;
	height: 18px !important;
}

/* ============================================================
   v1.9.8 — Layout Cards: checkboxes/radios como pills
   ============================================================
   Solo aplica cuando el form usa form_layout = "cards".
   Los inputs nativos quedan invisibles pero accesibles (sr-only),
   y el label se transforma en pill clickeable.
   ============================================================ */

/* Contenedor de opciones en cards: en línea con wrap por default */
.eidos-form-layout-cards .eidos-field-options-checkbox,
.eidos-form-layout-cards .eidos-field-options-radio {
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: wrap !important;
	gap: 6px !important;
}

/* Si el campo eligió "stacked" mantenemos columna, pero igual con pills */
.eidos-form-layout-cards .eidos-choices-layout-stacked {
	flex-direction: column !important;
	align-items: flex-start !important;
}

/* Si eligió "grid", grid auto-fit con pills */
.eidos-form-layout-cards .eidos-choices-layout-grid {
	display: grid !important;
	grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)) !important;
	gap: 6px !important;
}

/* Esconder input nativo (accesible para lectores de pantalla) */
.eidos-form-layout-cards .eidos-field-options-checkbox .eidos-field-option input[type="checkbox"],
.eidos-form-layout-cards .eidos-field-options-radio .eidos-field-option input[type="radio"] {
	position: absolute !important;
	opacity: 0 !important;
	pointer-events: none !important;
	width: 1px !important;
	height: 1px !important;
	margin: -1px !important;
}

/* Label como pill (estado base: no seleccionado) */
.eidos-form-layout-cards .eidos-field-options-checkbox .eidos-field-option,
.eidos-form-layout-cards .eidos-field-options-radio .eidos-field-option {
	display: inline-flex !important;
	align-items: center !important;
	gap: 6px !important;
	padding: 6px 14px !important;
	background: #fafaf9 !important;
	color: #6b7280 !important;
	border: 1px solid #e5e7eb !important;
	border-radius: 999px !important;
	font-size: 13px !important;
	font-weight: 500 !important;
	cursor: pointer !important;
	transition: all 0.12s ease !important;
	user-select: none !important;
	margin: 0 !important;
	line-height: 1.4 !important;
}

/* Hover */
.eidos-form-layout-cards .eidos-field-options-checkbox .eidos-field-option:hover,
.eidos-form-layout-cards .eidos-field-options-radio .eidos-field-option:hover {
	border-color: #fed7aa !important;
	background: #fff7ed !important;
	color: #9a3412 !important;
}

/* Seleccionado: pill naranja Eidos */
.eidos-form-layout-cards .eidos-field-options-checkbox .eidos-field-option:has(input[type="checkbox"]:checked),
.eidos-form-layout-cards .eidos-field-options-radio .eidos-field-option:has(input[type="radio"]:checked) {
	background: #fff7ed !important;
	color: #ec6608 !important;
	border-color: #fed7aa !important;
	font-weight: 500 !important;
}

/* Foco (navegación por teclado): outline naranja */
.eidos-form-layout-cards .eidos-field-options-checkbox .eidos-field-option:focus-within,
.eidos-form-layout-cards .eidos-field-options-radio .eidos-field-option:focus-within {
	box-shadow: 0 0 0 3px rgba(236, 102, 8, 0.18) !important;
	outline: none !important;
}

/* Disabled */
.eidos-form-layout-cards .eidos-field-options-checkbox .eidos-field-option:has(input:disabled),
.eidos-form-layout-cards .eidos-field-options-radio .eidos-field-option:has(input:disabled) {
	opacity: 0.5 !important;
	cursor: not-allowed !important;
}

/* Pseudo-elemento "✓" antes del texto cuando está chequeado */
.eidos-form-layout-cards .eidos-field-options-checkbox .eidos-field-option:has(input[type="checkbox"]:checked)::before,
.eidos-form-layout-cards .eidos-field-options-radio .eidos-field-option:has(input[type="radio"]:checked)::before {
	content: "✓";
	display: inline-block;
	font-weight: 700;
	font-size: 13px;
	margin-right: -2px;
}

/* En layout cards, el campo de checkbox/radio tiene padding distinto del card */
.eidos-form-layout-cards .eidos-field.eidos-field-checkbox,
.eidos-form-layout-cards .eidos-field.eidos-field-radio {
	padding: 12px 14px !important;
}

/* El SVG de ícono dentro del pill se ajusta al color */
.eidos-form-layout-cards .eidos-field-options-checkbox .eidos-field-option .eidos-option-icon-svg svg,
.eidos-form-layout-cards .eidos-field-options-radio .eidos-field-option .eidos-option-icon-svg svg {
	width: 14px !important;
	height: 14px !important;
}

/* Fallback para navegadores sin :has() (browsers viejos): mostrar como checkbox normal */
@supports not selector(:has(*)) {
	.eidos-form-layout-cards .eidos-field-options-checkbox .eidos-field-option input[type="checkbox"],
	.eidos-form-layout-cards .eidos-field-options-radio .eidos-field-option input[type="radio"] {
		position: static !important;
		opacity: 1 !important;
		width: 16px !important;
		height: 16px !important;
		margin: 0 !important;
		pointer-events: auto !important;
	}
	.eidos-form-layout-cards .eidos-field-options-checkbox .eidos-field-option,
	.eidos-form-layout-cards .eidos-field-options-radio .eidos-field-option {
		background: transparent !important;
		border: none !important;
		padding: 4px !important;
		border-radius: 0 !important;
	}
}

/* ============================================================
   v1.9.9 — Personalización del botón Enviar
   ============================================================ */

/* Alineaciones del contenedor de acciones */
.eidos-form-wrapper .eidos-submit-align-left {
	display: flex;
	justify-content: flex-start;
	gap: 10px;
}
.eidos-form-wrapper .eidos-submit-align-center {
	display: flex;
	justify-content: center;
	gap: 10px;
}
.eidos-form-wrapper .eidos-submit-align-right {
	display: flex;
	justify-content: flex-end;
	gap: 10px;
}
.eidos-form-wrapper .eidos-submit-align-full {
	display: block;
}
.eidos-form-wrapper .eidos-submit-align-full .eidos-form-submit {
	width: 100% !important;
}

/* Tamaños */
.eidos-form-wrapper .eidos-form-submit.eidos-submit-size-small {
	padding: 8px 18px !important;
	font-size: 13px !important;
}
.eidos-form-wrapper .eidos-form-submit.eidos-submit-size-normal {
	padding: 12px 28px !important;
	font-size: 14px !important;
}
.eidos-form-wrapper .eidos-form-submit.eidos-submit-size-large {
	padding: 16px 36px !important;
	font-size: 16px !important;
}

/* Colores presets Eidos */
.eidos-form-wrapper .eidos-form-submit.eidos-submit-color-orange {
	background-color: #ec6608 !important;
	border-color: #ec6608 !important;
	color: #fff !important;
}
.eidos-form-wrapper .eidos-form-submit.eidos-submit-color-orange:hover {
	background-color: #d4570a !important;
	border-color: #d4570a !important;
}

.eidos-form-wrapper .eidos-form-submit.eidos-submit-color-teal {
	background-color: #37bff0 !important;
	border-color: #37bff0 !important;
	color: #fff !important;
}
.eidos-form-wrapper .eidos-form-submit.eidos-submit-color-teal:hover {
	background-color: #2da5d2 !important;
	border-color: #2da5d2 !important;
}

.eidos-form-wrapper .eidos-form-submit.eidos-submit-color-green {
	background-color: #93c01f !important;
	border-color: #93c01f !important;
	color: #fff !important;
}
.eidos-form-wrapper .eidos-form-submit.eidos-submit-color-green:hover {
	background-color: #7ca21a !important;
	border-color: #7ca21a !important;
}

.eidos-form-wrapper .eidos-form-submit.eidos-submit-color-navy {
	background-color: #0d1b2a !important;
	border-color: #0d1b2a !important;
	color: #fff !important;
}
.eidos-form-wrapper .eidos-form-submit.eidos-submit-color-navy:hover {
	background-color: #1a2a3a !important;
	border-color: #1a2a3a !important;
}

.eidos-form-wrapper .eidos-form-submit.eidos-submit-color-dark {
	background-color: #1f2937 !important;
	border-color: #1f2937 !important;
	color: #fff !important;
}
.eidos-form-wrapper .eidos-form-submit.eidos-submit-color-dark:hover {
	background-color: #111827 !important;
	border-color: #111827 !important;
}

.eidos-form-wrapper .eidos-form-submit.eidos-submit-color-gray {
	background-color: #6b7280 !important;
	border-color: #6b7280 !important;
	color: #fff !important;
}
.eidos-form-wrapper .eidos-form-submit.eidos-submit-color-gray:hover {
	background-color: #4b5563 !important;
	border-color: #4b5563 !important;
}

/* Custom hex: el inline style del PHP pisa el background, pero garantizamos color del texto */
.eidos-form-wrapper .eidos-form-submit.eidos-submit-color-custom {
	color: #fff !important;
}

/* Estado disabled (durante submitting) */
.eidos-form-wrapper .eidos-form-submit:disabled,
.eidos-form-wrapper .eidos-form-submit.is-submitting {
	opacity: 0.7 !important;
	cursor: not-allowed !important;
}

/* ========================================
 * v3.2.0 — Modal y Banner de confirmación
 * ======================================== */

/* Modal: overlay full-screen */
.eidos-confirmation-modal {
	position: fixed;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(13, 27, 42, 0.55);
	backdrop-filter: blur(2px);
	z-index: 999999;
	opacity: 0;
	transition: opacity 0.2s ease;
	padding: 16px;
	box-sizing: border-box;
}
.eidos-confirmation-modal.is-open {
	opacity: 1;
}
.eidos-confirmation-modal.is-closing {
	opacity: 0;
}

.eidos-confirmation-modal__dialog {
	background: #fff;
	border-radius: 12px;
	box-shadow: 0 24px 60px rgba(0, 0, 0, 0.25);
	max-width: 520px;
	width: 100%;
	padding: 32px 28px 24px;
	position: relative;
	transform: scale(0.96);
	transition: transform 0.2s ease;
	overflow: hidden;
}
.eidos-confirmation-modal.is-open .eidos-confirmation-modal__dialog {
	transform: scale(1);
}

.eidos-confirmation-modal__close {
	position: absolute;
	top: 12px;
	right: 12px;
	width: 32px;
	height: 32px;
	border: 0;
	background: transparent;
	color: #6b7280;
	font-size: 24px;
	line-height: 1;
	cursor: pointer;
	border-radius: 6px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	transition: background 0.15s, color 0.15s;
}
.eidos-confirmation-modal__close:hover {
	background: #f3f4f6;
	color: #0d1b2a;
}
.eidos-confirmation-modal__close:focus {
	outline: 2px solid #93c01f;
	outline-offset: 2px;
}

.eidos-confirmation-modal__body {
	color: #0d1b2a;
	font-size: 16px;
	line-height: 1.6;
	padding: 8px 8px 16px;
	text-align: center;
}
.eidos-confirmation-modal__body p {
	margin: 0 0 12px;
}
.eidos-confirmation-modal__body p:last-child {
	margin-bottom: 0;
}

/* Barra de progreso para autocierre */
.eidos-confirmation-modal__progress {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: #f3f4f6;
}
.eidos-confirmation-modal__progress-bar {
	height: 100%;
	width: 100%;
	background: linear-gradient(90deg, #93c01f, #37bff0);
}

/* Banner: arriba o abajo del form */
.eidos-confirmation-banner {
	background: #f7fbe9;
	border: 1px solid #93c01f;
	border-left-width: 4px;
	border-radius: 6px;
	padding: 16px 20px;
	margin: 16px 0;
	color: #2d3a14;
	font-size: 15px;
	line-height: 1.5;
	opacity: 0;
	transform: translateY(-8px);
	transition: opacity 0.3s ease, transform 0.3s ease;
}
.eidos-confirmation-banner.is-open {
	opacity: 1;
	transform: translateY(0);
}
.eidos-confirmation-banner p {
	margin: 0 0 8px;
}
.eidos-confirmation-banner p:last-child {
	margin-bottom: 0;
}

/* ============================================================
   [v3.6.0] PASSWORD FIELDS
   Toggle ver/ocultar, indicador de fortaleza, y wrapper.
============================================================ */
.eidos-password-wrapper {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.eidos-password-wrapper input[type="password"],
.eidos-password-wrapper input[type="text"] {
    width: 100%;
}

.eidos-password-toggle {
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 16px;
    padding: 4px;
    color: #555;
    line-height: 1;
}

.eidos-password-toggle:hover {
    color: #000;
}

.eidos-password-strength-meter {
    margin-top: 4px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
}

.eidos-password-strength-bar {
    height: 4px;
    background: #e0e0e0;
    border-radius: 2px;
    flex: 1;
    transition: width 0.2s ease, background 0.2s ease;
    width: 0;
}

.eidos-password-strength-label {
    flex: 0 0 auto;
    font-weight: 500;
    min-width: 75px;
    text-align: right;
}

/* En mobile el meter pasa a stack vertical */
@media (max-width: 480px) {
    .eidos-password-strength-meter {
        flex-direction: column;
        align-items: stretch;
        gap: 4px;
    }
    .eidos-password-strength-label {
        text-align: left;
        min-width: 0;
    }
}

/* ============================================================
   [v3.8.43] Month field con ícono de calendario + picker custom
   ============================================================ */

.eidos-month-field {
	position: relative;
	display: block;
	width: 100%;
}

.eidos-month-field input[data-eidos-month-input="1"] {
	width: 100%;
	padding-right: 40px !important; /* espacio para el ícono */
	box-sizing: border-box;
}

.eidos-month-trigger {
	position: absolute;
	right: 8px;
	top: 50%;
	transform: translateY(-50%);
	background: transparent;
	border: none;
	padding: 6px;
	cursor: pointer;
	color: #ec6608;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 4px;
	transition: background 0.15s, color 0.15s;
}

.eidos-month-trigger:hover {
	background: rgba(236, 102, 8, 0.1);
}

.eidos-month-trigger:focus {
	outline: 2px solid #ec6608;
	outline-offset: 1px;
}

/* Panel del picker */
.eidos-month-picker-panel {
	position: absolute;
	top: calc(100% + 6px);
	left: 0;
	right: 0;
	z-index: 50;
	background: #fff7ed;
	border: 1.5px solid #ec6608;
	border-radius: 8px;
	padding: 14px;
	box-shadow: 0 4px 16px rgba(236, 102, 8, 0.15);
}

.eidos-month-picker-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 12px;
}

.eidos-month-picker-nav {
	background: transparent;
	border: none;
	padding: 6px 10px;
	cursor: pointer;
	color: #ec6608;
	display: flex;
	align-items: center;
	border-radius: 4px;
	transition: background 0.15s;
}

.eidos-month-picker-nav:hover:not(:disabled) {
	background: rgba(236, 102, 8, 0.12);
}

.eidos-month-picker-nav:disabled {
	color: #d3d1c7;
	cursor: not-allowed;
}

.eidos-month-picker-year {
	font-size: 15px;
	font-weight: 500;
	color: #0d1b2a;
	letter-spacing: 0.2px;
}

.eidos-month-picker-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 6px;
}

.eidos-month-picker-month {
	background: transparent;
	border: none;
	padding: 10px 4px;
	font-size: 13px;
	color: #0d1b2a;
	border-radius: 5px;
	cursor: pointer;
	transition: background 0.15s, color 0.15s;
	font-family: inherit;
}

.eidos-month-picker-month:hover {
	background: rgba(236, 102, 8, 0.12);
}

.eidos-month-picker-month.is-selected {
	background: #ec6608;
	color: #fff;
	font-weight: 500;
}

.eidos-month-picker-month.is-selected:hover {
	background: #d65706;
}

/* [v3.8.49] Mes deshabilitado (fechas pasadas con disable_past activo). */
.eidos-month-picker-month.is-disabled,
.eidos-month-picker-month[disabled] {
	color: #c8c4b8;
	cursor: not-allowed;
	background: transparent;
}

.eidos-month-picker-month.is-disabled:hover,
.eidos-month-picker-month[disabled]:hover {
	background: transparent;
}

/* [v3.8.55] Editor enriquecido en párrafos (TinyMCE en el frontend) */
.eidos-field .wp-editor-wrap,
.eidos-field .mce-tinymce {
	width: 100% !important;
}
.eidos-field .mce-tinymce {
	border-radius: 6px;
	overflow: hidden;
	box-shadow: none;
	border: 1px solid #d1d5db;
}
.eidos-field .mce-top-part::before {
	box-shadow: none;
}
/* [v3.8.72] TinyMCE calcula anchos internos en px que pueden no coincidir con
   la card (se veía descentrado, sobre todo en móvil). Forzamos que todos los
   contenedores internos respeten el ancho disponible. */
.eidos-field .mce-container,
.eidos-field .mce-container-body,
.eidos-field .mce-panel,
.eidos-field .mce-toolbar-grp,
.eidos-field .mce-edit-area,
.eidos-field .mce-statusbar {
	width: 100% !important;
	max-width: 100% !important;
	box-sizing: border-box !important;
}
.eidos-field .mce-edit-area iframe {
	width: 100% !important;
}

/* [v3.8.58] Grupo repetible */
.eidos-repeater-row {
	background: #fff;
	border: 1px solid #e5e7eb;
	border-radius: 8px;
	padding: 12px 14px;
	margin-bottom: 10px;
}
.eidos-repeater-row-head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 8px;
}
.eidos-repeater-row-title {
	font-size: 12px;
	font-weight: 600;
	color: #6b7280;
	/* [v3.9.10] Sin text-transform: el título se muestra tal cual se escribe en
	   el editor ("Co-autor 1", no "CO-AUTOR 1"). Si se quiere en mayúsculas,
	   se tipea en mayúsculas en el campo "Etiqueta del ítem". */
	letter-spacing: 0.3px;
}
.eidos-repeater-remove {
	background: transparent;
	border: none;
	cursor: pointer;
	color: #dc2626;
	font-size: 12px;
	padding: 2px 4px;
}
.eidos-repeater-remove:hover {
	text-decoration: underline;
}
.eidos-repeater-grid {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 8px 10px;
}
.eidos-repeater-sub {
	grid-column: span 6;
	min-width: 0;
}
.eidos-sub-width-half { grid-column: span 3; }
.eidos-sub-width-third { grid-column: span 2; }
.eidos-repeater-sub-label {
	display: block;
	font-size: 12px;
	color: #6b7280;
	margin-bottom: 3px;
}
.eidos-repeater-sub input,
.eidos-repeater-sub select,
.eidos-repeater-sub textarea {
	width: 100%;
}
.eidos-repeater-sub-options {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 14px;
	padding-top: 4px;
}
.eidos-repeater-sub-option {
	font-size: 13px;
	font-weight: 400;
	display: inline-flex;
	align-items: center;
	gap: 5px;
}
.eidos-repeater-footer {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 10px;
}
.eidos-repeater-add {
	background: #fff;
	border: 1px solid #d1d5db;
	border-radius: 6px;
	padding: 8px 14px;
	font-size: 13px;
	font-weight: 500;
	cursor: pointer;
	color: #1f2937;
}
.eidos-repeater-add:hover {
	background: #f9fafb;
}
.eidos-repeater-add:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}
.eidos-repeater-count {
	font-size: 12px;
	color: #9ca3af;
}
@media (max-width: 600px) {
	.eidos-sub-width-half,
	.eidos-sub-width-third {
		grid-column: span 6;
	}
}

/* [v3.8.60] En layout cards los inputs van sin borde (la card hace de borde),
   pero dentro de un grupo repetible todos los subcampos comparten UNA card:
   ahí cada input necesita delimitación propia. */
.eidos-form-layout-cards .eidos-field-input .eidos-repeater input[type="text"],
.eidos-form-layout-cards .eidos-field-input .eidos-repeater input[type="email"],
.eidos-form-layout-cards .eidos-field-input .eidos-repeater input[type="tel"],
.eidos-form-layout-cards .eidos-field-input .eidos-repeater input[type="url"],
.eidos-form-layout-cards .eidos-field-input .eidos-repeater input[type="number"],
.eidos-form-layout-cards .eidos-field-input .eidos-repeater input[type="date"],
.eidos-form-layout-cards .eidos-field-input .eidos-repeater select,
.eidos-form-layout-cards .eidos-field-input .eidos-repeater textarea {
	border: 1px solid #d5d7da !important;
	background: #fafafa !important;
	padding: 8px 12px !important;
	border-radius: 6px !important;
	min-height: 38px !important;
	font-size: 14px !important;
	box-shadow: none !important;
}
.eidos-form-layout-cards .eidos-field-input .eidos-repeater textarea {
	min-height: 70px !important;
}
.eidos-form-layout-cards .eidos-field-input .eidos-repeater input:focus,
.eidos-form-layout-cards .eidos-field-input .eidos-repeater select:focus,
.eidos-form-layout-cards .eidos-field-input .eidos-repeater textarea:focus {
	border-color: #ec6608 !important;
	background: #fff !important;
	outline: none !important;
}
/* La fila del bloque también gana un fondo apenas distinto para separarse de la card */
.eidos-form-layout-cards .eidos-repeater-row {
	background: #fff;
	border-color: #e0e2e5;
}

/* [v3.8.61] Selects en layout cards: sin borde como el resto, pero con
   apariencia intencional (chevron propio, área clickeable completa). */
.eidos-form-layout-cards .eidos-field-input select {
	appearance: none !important;
	-webkit-appearance: none !important;
	-moz-appearance: none !important;
	background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5L6 8l3.5-3.5' fill='none' stroke='%236b7280' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E") !important;
	background-repeat: no-repeat !important;
	background-position: right 4px center !important;
	background-size: 12px !important;
	padding: 4px 26px 4px 0 !important;
	min-height: 30px !important;
	width: 100%;
	cursor: pointer;
	color: #2c3338 !important;
}
.eidos-form-layout-cards .eidos-field-input select:hover {
	background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5L6 8l3.5-3.5' fill='none' stroke='%232c3338' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E") !important;
}
/* Dentro del repetidor el select tiene borde propio: recuperar padding interno
   y posicionar el chevron dentro de la caja. */
.eidos-form-layout-cards .eidos-field-input .eidos-repeater select {
	padding: 8px 30px 8px 12px !important;
	background-position: right 10px center !important;
	min-height: 38px !important;
}

/* [v3.8.63] Punto 2: las cards se ajustan a su contenido en vez de estirarse
   a la altura de la card más alta de la fila. */
.eidos-form-layout-cards .eidos-form-fields {
	align-items: start;
}

/* [v3.8.63] Dropdown propio (reemplaza al select nativo en layout cards).
   Mismo estilo cerrado y abierto, borde siempre visible, abre hacia abajo. */
.eidos-nselect {
	position: relative;
	width: 100%;
}
.eidos-nselect select.eidos-nselect-native {
	display: none !important;
}
.eidos-nselect-toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	width: 100%;
	min-height: 42px;
	padding: 10px 12px;
	background: #fff;
	border: 1px solid #cfd2d6;
	border-radius: 6px;
	font-size: 15px;
	font-family: inherit;
	color: #2c3338;
	text-align: left;
	cursor: pointer;
	transition: border-color 0.15s, box-shadow 0.15s;
}
.eidos-nselect-toggle:hover {
	border-color: #9ca3af;
}
.eidos-nselect-toggle:focus,
.eidos-nselect-toggle.is-open {
	outline: none;
	border-color: #ec6608;
	box-shadow: 0 0 0 3px rgba(236, 102, 8, 0.12);
}
.eidos-nselect-toggle.is-placeholder .eidos-nselect-label {
	color: #9ca3af;
}
.eidos-nselect-label {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.eidos-nselect-chevron {
	flex-shrink: 0;
	color: #6b7280;
	transition: transform 0.15s;
}
.eidos-nselect-toggle.is-open .eidos-nselect-chevron {
	transform: rotate(180deg);
}

.eidos-nselect-menu {
	display: none;
	position: absolute;
	top: calc(100% + 6px);
	left: 0;
	right: 0;
	z-index: 99997;
	background: #fff;
	border: 1px solid #d5d7da;
	border-radius: 8px;
	box-shadow: 0 10px 28px rgba(0, 0, 0, 0.14);
	max-height: 280px;
	overflow-y: auto;
}
.eidos-nselect-menu.is-open {
	display: block;
}
.eidos-nselect-search {
	position: sticky;
	top: 0;
	background: #fff;
	padding: 8px;
	border-bottom: 1px solid #f0f0f1;
}
.eidos-nselect-search input {
	width: 100%;
	padding: 7px 10px !important;
	border: 1px solid #d5d7da !important;
	border-radius: 5px !important;
	font-size: 13px !important;
	min-height: 0 !important;
	background: #fafafa !important;
}
.eidos-nselect-option {
	padding: 9px 12px;
	font-size: 14px;
	color: #2c3338;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
}
.eidos-nselect-option.is-active {
	background: #f5f6f7;
}
.eidos-nselect-option.is-selected {
	color: #ec6608;
	font-weight: 600;
}
.eidos-nselect-option.is-selected::after {
	content: "✓";
	font-size: 13px;
	flex-shrink: 0;
}
.eidos-nselect-option.is-disabled {
	color: #c3c4c7;
	cursor: not-allowed;
}

/* [v3.8.64] En cards los inputs van sin borde, así que el texto de ayuda podía
   confundirse con el área de escritura. Se separa con fondo gris claro. */
.eidos-form-layout-cards .eidos-field-help {
	background: #f4f5f6;
	border-radius: 5px;
	padding: 7px 10px;
	margin-top: 10px;
	font-size: 12px !important;
	line-height: 1.45;
	color: #6b7280 !important;
}

/* [v3.8.71] Texto de ayuda de subcampo del repetidor */
.eidos-repeater-sub-help {
	display: block;
	font-size: 11px;
	color: #9ca3af;
	margin-top: 3px;
	line-height: 1.4;
}

/* [v3.8.71] Save & Continue */
/* [v3.8.72] Save & Continue: mismo tamaño/tipografía que el botón Enviar.
   Por defecto es "ghost" (borde, sin relleno); con color configurado se rellena. */
.eidos-form-save-continue {
	padding: 12px 28px;
	font-size: 15px;
	font-weight: 600;
	min-height: 46px;
	border-radius: 4px;
	cursor: pointer;
	font-family: inherit;
	letter-spacing: 0.3px;
	transition: all 0.15s;
	background: transparent;
	border: 1px solid #d1d5db;
	color: #4b5563;
}
.eidos-form-save-continue:hover:not(:disabled) {
	border-color: #9ca3af;
	background: #f9fafb;
}
.eidos-form-save-continue:disabled {
	opacity: 0.6;
	cursor: default;
}
/* Con color de fondo configurado (estilo relleno como Enviar) */
.eidos-form-save-continue.has-bg {
	border: none;
	color: #fff;
}
.eidos-form-save-continue.has-bg:hover:not(:disabled) {
	transform: translateY(-1px);
	box-shadow: 0 4px 12px rgba(0,0,0,0.18);
	background: inherit;
}
.eidos-resume-banner {
	background: #ecfdf5;
	border: 1px solid #a7f3d0;
	border-left: 3px solid #10b981;
	border-radius: 6px;
	padding: 10px 14px;
	margin-bottom: 14px;
	color: #065f46;
	font-size: 14px;
}

.eidos-sc-overlay {
	position: fixed;
	inset: 0;
	background: rgba(17, 24, 39, 0.55);
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
}
.eidos-sc-modal {
	background: #fff;
	border-radius: 12px;
	box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
	max-width: 460px;
	width: 100%;
	padding: 24px;
	position: relative;
}
.eidos-sc-close {
	position: absolute;
	top: 12px;
	right: 12px;
	background: transparent;
	border: none;
	font-size: 16px;
	color: #9ca3af;
	cursor: pointer;
	padding: 4px 8px;
}
.eidos-sc-title {
	margin: 0 0 8px;
	font-size: 18px;
	color: #111827;
}
.eidos-sc-text {
	margin: 0 0 8px;
	font-size: 14px;
	color: #4b5563;
}
.eidos-sc-linkrow {
	display: flex;
	gap: 8px;
	margin-bottom: 8px;
}
.eidos-sc-link,
.eidos-sc-email {
	flex: 1;
	padding: 9px 12px;
	border: 1px solid #d1d5db;
	border-radius: 6px;
	font-size: 13px;
	min-width: 0;
}
.eidos-sc-copy,
.eidos-sc-send {
	background: #ec6608;
	color: #fff;
	border: none;
	border-radius: 6px;
	padding: 9px 16px;
	font-size: 13px;
	font-weight: 500;
	cursor: pointer;
	white-space: nowrap;
}
.eidos-sc-copy:hover,
.eidos-sc-send:hover { background: #d55a06; }
.eidos-sc-emailrow {
	margin-top: 16px;
	padding-top: 16px;
	border-top: 1px solid #f0f0f1;
}
.eidos-sc-emailmsg {
	font-size: 12px;
	display: block;
	margin-top: 4px;
}
.eidos-sc-emailmsg.is-ok { color: #16a34a; }
.eidos-sc-emailmsg.is-error { color: #dc2626; }

/* =========================================================================
 * [v3.9.0] Cupos por opción
 * ========================================================================= */

/* Leyenda bajo el campo cuando hay opciones agotadas */
.eidos-quota-legend {
	display: flex;
	gap: 8px;
	align-items: flex-start;
	margin-top: 8px;
	padding: 10px 12px;
	background: #fff8f3;
	border: 1px solid #f8ddc9;
	border-radius: 6px;
	font-size: 13px;
	line-height: 1.45;
	color: #8a4b12;
}
.eidos-quota-legend::before {
	content: "ⓘ";
	flex-shrink: 0;
	font-style: normal;
}
.eidos-quota-legend p { margin: 0; }

/* Opción agotada (modo "deshabilitada"): radio/checkbox */
.eidos-field-option.eidos-option-exhausted {
	opacity: 0.55;
	cursor: not-allowed;
}
.eidos-field-option.eidos-option-exhausted input {
	cursor: not-allowed;
}

/* =========================================================================
 * [v3.9.13] Estilo de las opciones (choices_style)
 *
 * Eje independiente de la disposición (choices_layout):
 *   Card + Grilla    → cards parejas, tipo Stripe
 *   Card + Apiladas  → lista de filas de ancho completo
 *   Pill (default)   → lo de siempre; los forms existentes no cambian
 *
 * Especificidad: en el layout "cards" del formulario los pills están
 * forzados con !important sobre 3 clases; estas reglas suman una cuarta
 * (la de estilo, en el MISMO contenedor) para poder ganarles.
 * ========================================================================= */

/* ---------- Card: contenedor ---------- */
/* En pill, "grid" usa columnas de 120px (alcanzan para una etiqueta corta).
   Las cards llevan texto largo envuelto adentro: necesitan más ancho. */
.eidos-form-wrapper .eidos-choices-style-card.eidos-choices-layout-grid,
.eidos-form-wrapper .eidos-choices-style-card-check.eidos-choices-layout-grid,
.eidos-form-layout-cards .eidos-field-options.eidos-choices-style-card.eidos-choices-layout-grid,
.eidos-form-layout-cards .eidos-field-options.eidos-choices-style-card-check.eidos-choices-layout-grid {
	display: grid !important;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important;
	gap: 8px !important;
}

/* Apiladas + card = filas de ancho completo (una debajo de otra) */
.eidos-form-wrapper .eidos-choices-style-card.eidos-choices-layout-stacked,
.eidos-form-wrapper .eidos-choices-style-card-check.eidos-choices-layout-stacked,
.eidos-form-layout-cards .eidos-field-options.eidos-choices-style-card.eidos-choices-layout-stacked,
.eidos-form-layout-cards .eidos-field-options.eidos-choices-style-card-check.eidos-choices-layout-stacked {
	display: grid !important;
	grid-template-columns: 1fr !important;
	gap: 6px !important;
	align-items: stretch !important;
}

/* ---------- Card: cada opción ---------- */
.eidos-form-wrapper .eidos-field-options.eidos-choices-style-card .eidos-field-option,
.eidos-form-wrapper .eidos-field-options.eidos-choices-style-card-check .eidos-field-option {
	display: flex !important;
	align-items: flex-start !important;
	gap: 9px !important;
	padding: 11px 12px !important;
	background: #fff !important;
	color: #2c3338 !important;
	border: 1px solid #e5e7eb !important;
	border-radius: 8px !important;
	font-size: 13.5px !important;
	font-weight: 400 !important;
	line-height: 1.4 !important;
	text-align: left !important;
	cursor: pointer !important;
	margin: 0 !important;
	transition: border-color 0.12s ease, background 0.12s ease !important;
}

.eidos-form-wrapper .eidos-field-options.eidos-choices-style-card .eidos-field-option:hover,
.eidos-form-wrapper .eidos-field-options.eidos-choices-style-card-check .eidos-field-option:hover {
	border-color: #9ca3af !important;
	background: #fff !important;
	color: #2c3338 !important;
}

/* Seleccionada: borde + anillo naranja Eidos (el color del evento lo pisa
   Abstracts con su propio tinte, ya pasado por color_legible). */
.eidos-form-wrapper .eidos-field-options.eidos-choices-style-card .eidos-field-option:has(input:checked),
.eidos-form-wrapper .eidos-field-options.eidos-choices-style-card-check .eidos-field-option:has(input:checked) {
	border-color: #ec6608 !important;
	background: #fff7ed !important;
	color: #0d1b2a !important;
	font-weight: 500 !important;
	box-shadow: 0 0 0 1px #ec6608 !important;
}

.eidos-form-wrapper .eidos-field-options.eidos-choices-style-card .eidos-field-option:focus-within,
.eidos-form-wrapper .eidos-field-options.eidos-choices-style-card-check .eidos-field-option:focus-within {
	box-shadow: 0 0 0 3px rgba(236, 102, 8, 0.18) !important;
	outline: none !important;
}

/* ---------- Card con radio/checkbox VISIBLE ----------
   El layout "cards" esconde el input nativo para el pill; en este estilo lo
   traemos de vuelta, que es lo que comunica si es de elección única o múltiple. */
.eidos-form-layout-cards .eidos-field-options.eidos-choices-style-card .eidos-field-option input[type="radio"],
.eidos-form-layout-cards .eidos-field-options.eidos-choices-style-card .eidos-field-option input[type="checkbox"],
.eidos-form-wrapper .eidos-field-options.eidos-choices-style-card .eidos-field-option input[type="radio"],
.eidos-form-wrapper .eidos-field-options.eidos-choices-style-card .eidos-field-option input[type="checkbox"] {
	position: static !important;
	opacity: 1 !important;
	pointer-events: auto !important;
	width: 15px !important;
	height: 15px !important;
	margin: 2px 0 0 !important;
	flex-shrink: 0 !important;
	accent-color: #ec6608 !important;
}

/* ---------- Card con tilde en la esquina ---------- */
.eidos-form-wrapper .eidos-field-options.eidos-choices-style-card-check .eidos-field-option {
	position: relative !important;
	padding-right: 34px !important;
	align-items: center !important;
	min-height: 62px !important;
}

/* El input sigue escondido (accesible para lectores de pantalla) */
.eidos-form-wrapper .eidos-field-options.eidos-choices-style-card-check .eidos-field-option input[type="radio"],
.eidos-form-wrapper .eidos-field-options.eidos-choices-style-card-check .eidos-field-option input[type="checkbox"] {
	position: absolute !important;
	opacity: 0 !important;
	pointer-events: none !important;
	width: 1px !important;
	height: 1px !important;
	margin: -1px !important;
}

.eidos-form-wrapper .eidos-field-options.eidos-choices-style-card-check .eidos-field-option:has(input:checked)::after {
	content: "✓";
	position: absolute;
	top: 9px;
	right: 9px;
	width: 17px;
	height: 17px;
	border-radius: 50%;
	background: #ec6608;
	color: #fff;
	font-size: 10px;
	line-height: 17px;
	text-align: center;
	font-weight: 700;
}

/* ---------- Pill + Grilla: columnas parejas ----------
   Con etiquetas largas el pill se estira según el texto y las filas quedan
   dentadas. En grilla, columnas de igual ancho y alto mínimo parejo. */
.eidos-form-wrapper .eidos-field-options.eidos-choices-style-pill.eidos-choices-layout-grid .eidos-field-option,
.eidos-form-layout-cards .eidos-field-options.eidos-choices-style-pill.eidos-choices-layout-grid .eidos-field-option {
	justify-content: center !important;
	text-align: center !important;
	min-height: 42px !important;
}

/* ---------- Mobile: las cards nunca se parten en columnas angostas ---------- */
@media (max-width: 600px) {
	.eidos-form-wrapper .eidos-choices-style-card.eidos-choices-layout-grid,
	.eidos-form-wrapper .eidos-choices-style-card-check.eidos-choices-layout-grid,
	.eidos-form-layout-cards .eidos-field-options.eidos-choices-style-card.eidos-choices-layout-grid,
	.eidos-form-layout-cards .eidos-field-options.eidos-choices-style-card-check.eidos-choices-layout-grid {
		grid-template-columns: 1fr !important;
	}
}

/* =========================================================================
 * [v3.9.17] Contador de caracteres por campo
 * Mismo lenguaje visual que el contador de palabras. Se queda neutro casi
 * todo el tiempo (contar caracteres no es una meta a cumplir, como sí lo es
 * un mínimo de palabras): avisa en ámbar cerca del tope y en rojo al pasarse.
 * ========================================================================= */
.eidos-char-counter {
	font-size: 11px;
	color: #9ca3af;
	margin-top: 4px;
	text-align: right;
}
.eidos-char-counter.is-near {
	color: #ec6608;
}
.eidos-char-counter.is-over {
	color: #dc2626;
	font-weight: 500;
}

/* =========================================================================
 * [v3.9.18] Bajada por opción (radio / checkbox)
 *
 * Se muestra SOLO en los estilos "card": en un pill compacto de una línea no
 * entra. El markup se emite igual siempre, así cambiar de estilo no pierde el
 * texto ya cargado.
 * ========================================================================= */

.eidos-option-desc {
	display: block;
	margin-top: 3px;
	font-size: 12px;
	font-weight: 400;
	line-height: 1.35;
	color: #6b7280;
}

/* En pill (el default) no se muestra. */
.eidos-field-options.eidos-choices-style-pill .eidos-option-desc {
	display: none;
}

/* El bloque de texto ocupa el ancho restante y alinea a la izquierda: con
   bajada, centrar el texto (como hace el pill) sería ilegible. */
.eidos-field-options.eidos-choices-style-card .eidos-option-text,
.eidos-field-options.eidos-choices-style-card-check .eidos-option-text {
	display: block;
	flex: 1 1 auto;
	min-width: 0;
	text-align: left;
}

/* Con bajada, la card se alinea arriba aunque el estilo sea card-check
   (que centra verticalmente cuando la opción es de una sola línea). */
.eidos-field-options.eidos-choices-style-card-check .eidos-field-option:has(.eidos-option-desc) {
	align-items: flex-start !important;
}

/* Seleccionada: el label se destaca, la bajada se mantiene secundaria. */
.eidos-field-options.eidos-choices-style-card .eidos-field-option:has(input:checked) .eidos-option-desc,
.eidos-field-options.eidos-choices-style-card-check .eidos-field-option:has(input:checked) .eidos-option-desc {
	color: #4b5563;
	font-weight: 400 !important;
}