/* SAE Inscription Wizard v2 */

.sae-wizard {
	max-width: 680px;
	margin: 0 auto;
	font-family: inherit;
}

/* ── Barra de progreso (reemplaza el indicador numerado) ── */
.sae-progress-bar {
	height: 5px;
	background: #e5e7eb;
	border-radius: 3px;
	margin-bottom: 32px;
	overflow: hidden;
}
.sae-progress-bar__fill {
	height: 100%;
	background: #1d4ed8;
	border-radius: 3px;
	transition: width .35s ease;
	width: 14.28%;
}

/* ── Indicador de pasos (legacy, oculto) ── */
.sae-wizard-steps {
	display: flex;
	align-items: center;
	margin-bottom: 32px;
	overflow-x: auto;
	padding-bottom: 4px;
}

.sae-wizard-step {
	display: flex;
	align-items: center;
	flex-shrink: 0;
}

.sae-wizard-step__dot {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: #e5e7eb;
	color: #9ca3af;
	font-size: 13px;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background .2s, color .2s;
	flex-shrink: 0;
}

.sae-wizard-step__label {
	font-size: 11px;
	color: #9ca3af;
	margin-left: 6px;
	white-space: nowrap;
	display: none;
}

@media (min-width: 500px) {
	.sae-wizard-step__label { display: block; }
}

.sae-wizard-step__line {
	flex: 1;
	height: 2px;
	background: #e5e7eb;
	min-width: 16px;
	margin: 0 6px;
}

.sae-wizard-step.is-active .sae-wizard-step__dot {
	background: #1d4ed8;
	color: #fff;
}
.sae-wizard-step.is-active .sae-wizard-step__label {
	color: #1d4ed8;
	font-weight: 600;
}

.sae-wizard-step.is-done .sae-wizard-step__dot {
	background: #16a34a;
	color: #fff;
}
.sae-wizard-step.is-done .sae-wizard-step__dot::after {
	content: '✓';
}
.sae-wizard-step.is-done .sae-wizard-step__line {
	background: #16a34a;
}

/* ── Panel de paso ── */
.sae-wizard-panel {
	display: none;
	animation: saeSlideIn .2s ease;
}
.sae-wizard-panel.is-active {
	display: block;
}

@keyframes saeSlideIn {
	from { opacity: 0; transform: translateX(12px); }
	to   { opacity: 1; transform: translateX(0); }
}

.sae-wizard-panel h2 {
	font-size: 20px;
	margin: 0 0 20px;
	color: #111827;
	padding-bottom: 12px;
	border-bottom: 2px solid #1d4ed8;
}

/* ── Opciones de selección (paso 1 y 2) ── */
.sae-option-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
	gap: 12px;
	margin-bottom: 24px;
}

.sae-option-card {
	border: 2px solid #e5e7eb;
	border-radius: 10px;
	padding: 18px 16px;
	cursor: pointer;
	transition: border-color .15s, background .15s, box-shadow .15s;
	text-align: center;
	background: #fff;
}

.sae-option-card:hover {
	border-color: #93c5fd;
	box-shadow: 0 2px 8px rgba(29,78,216,.1);
}

.sae-option-card.is-selected {
	border-color: #1d4ed8;
	background: #eff6ff;
}

.sae-option-card input[type=radio] {
	display: none;
}

.sae-option-card__icon {
	font-size: 28px;
	margin-bottom: 8px;
	display: flex;
	justify-content: center;
	align-items: center;
}
.sae-option-card__icon svg {
	width: 36px;
	height: 36px;
	color: #374151;
	transition: color .15s;
}
.sae-option-card.is-selected .sae-option-card__icon svg {
	color: #1d4ed8;
}

/* ── Facturación (paso 3) ── */
.sae-billing-section {
	margin-top: 24px;
	padding-top: 20px;
	border-top: 1px solid #e5e7eb;
}
.sae-billing-section h3 {
	font-size: 14px;
	font-weight: 700;
	color: #374151;
	margin: 0 0 14px;
	text-transform: uppercase;
	letter-spacing: .04em;
}
.sae-field-row--3 {
	display: grid;
	grid-template-columns: 1fr 2fr 1.5fr;
	gap: 12px;
}
@media (max-width: 600px) {
	.sae-field-row--3 { grid-template-columns: 1fr; }
}

/* ── Iconos SVG en métodos de pago ── */
.sae-payment-option__icon svg {
	width: 22px;
	height: 22px;
	color: #6b7280;
}
.sae-payment-option.is-selected .sae-payment-option__icon svg {
	color: #1d4ed8;
}

.sae-option-card__title {
	display: block;
	font-size: 12px;
	font-weight: 700;
	color: #111827;
	margin-bottom: 4px;
	letter-spacing: .04em;
}

.sae-option-card__desc {
	display: block;
	font-size: 12px;
	color: #6b7280;
	line-height: 1.4;
}

/* ── Campos de formulario ── */
.sae-field {
	margin-bottom: 16px;
}

.sae-field label {
	display: block;
	font-size: 13px;
	font-weight: 600;
	color: #374151;
	margin-bottom: 5px;
}

.sae-field input[type=text],
.sae-field input[type=email],
.sae-field input[type=tel],
.sae-field select,
.sae-field textarea {
	width: 100%;
	padding: 10px 12px;
	border: 1.5px solid #d1d5db;
	border-radius: 7px;
	font-size: 14px;
	box-sizing: border-box;
	transition: border-color .15s;
	background: #fff;
}

.sae-field input:focus,
.sae-field select:focus,
.sae-field textarea:focus {
	outline: none;
	border-color: #1d4ed8;
	box-shadow: 0 0 0 3px rgba(29,78,216,.1);
}

.sae-field input[readonly],
.sae-field input[disabled] {
	background: #f9fafb;
	color: #6b7280;
}

.sae-field-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
}

@media (max-width: 480px) {
	.sae-field-row { grid-template-columns: 1fr; }
}

.sae-field small {
	display: block;
	font-size: 12px;
	color: #9ca3af;
	margin-top: 3px;
}

/* ── Notices inline ── */
.sae-inline-notice {
	padding: 12px 14px;
	border-radius: 7px;
	font-size: 13px;
	margin: 12px 0;
}
.sae-inline-notice--success {
	background: #f0fdf4;
	border: 1px solid #86efac;
	color: #14532d;
}
.sae-inline-notice--info {
	background: #eff6ff;
	border: 1px solid #bfdbfe;
	color: #1e3a8a;
}
.sae-inline-notice--warning {
	background: #fffbeb;
	border: 1px solid #fde68a;
	color: #92400e;
}
.sae-inline-notice--error {
	background: #fef2f2;
	border: 1px solid #fca5a5;
	color: #7f1d1d;
}

/* ── Datos de socio prefill ── */
.sae-member-prefill {
	background: #f0fdf4;
	border: 1px solid #86efac;
	border-radius: 8px;
	padding: 14px 16px;
	margin-bottom: 16px;
}
.sae-member-prefill__header {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 8px;
	font-weight: 600;
	color: #15803d;
}
.sae-member-prefill__data {
	font-size: 13px;
	color: #374151;
	line-height: 1.7;
}

/* ── Código de grupo ── */
.sae-group-code-input {
	display: flex;
	gap: 8px;
	align-items: flex-start;
	margin-top: 12px;
}
.sae-group-code-input input {
	flex: 1;
	font-family: monospace;
	font-size: 15px;
	letter-spacing: 1px;
	text-transform: uppercase;
}

/* ── Categorías ── */
.sae-categoria-list {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-bottom: 16px;
}

.sae-categoria-item {
	border: 2px solid #e5e7eb;
	border-radius: 9px;
	padding: 14px 16px;
	cursor: pointer;
	transition: border-color .15s, background .15s;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.sae-categoria-item:hover { border-color: #93c5fd; }
.sae-categoria-item.is-selected {
	border-color: #1d4ed8;
	background: #eff6ff;
}
.sae-categoria-item input[type=radio] { display: none; }

.sae-categoria-item__nombre {
	font-weight: 600;
	font-size: 15px;
	color: #111827;
}
.sae-categoria-item__precio {
	font-size: 17px;
	font-weight: 700;
	color: #1d4ed8;
	white-space: nowrap;
}
.sae-categoria-item__badges {
	display: flex;
	gap: 6px;
	margin-top: 4px;
	flex-wrap: wrap;
}

/* ── Upload de documento ── */
.sae-doc-upload {
	border: 2px dashed #d1d5db;
	border-radius: 8px;
	padding: 20px;
	text-align: center;
	transition: border-color .15s;
}
.sae-doc-upload:hover { border-color: #93c5fd; }
.sae-doc-upload.has-file { border-color: #86efac; background: #f0fdf4; }

.sae-doc-upload input[type=file] { display: none; }
.sae-doc-upload__label {
	font-weight: 600;
	font-size: 14px;
	color: #374151;
	display: block;
	margin-bottom: 4px;
}
.sae-doc-upload__hint {
	font-size: 12px;
	color: #9ca3af;
	margin-bottom: 10px;
}
.sae-doc-upload__status {
	font-size: 13px;
	margin-top: 8px;
}

/* ── Descuentos ── */
.sae-descuento-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: #fef3c7;
	border: 1px solid #fde68a;
	border-radius: 20px;
	padding: 6px 14px;
	font-size: 13px;
	font-weight: 600;
	color: #92400e;
	margin-bottom: 12px;
}

/* ── Resumen ── */
.sae-resumen-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 14px;
	margin-bottom: 20px;
}
.sae-resumen-table tr { border-bottom: 1px solid #f3f4f6; }
.sae-resumen-table td { padding: 8px 4px; }
.sae-resumen-table td:first-child { color: #6b7280; width: 40%; }
.sae-resumen-table td:last-child { font-weight: 500; }
.sae-resumen-table tr.is-total td {
	font-weight: 700;
	font-size: 16px;
	padding-top: 12px;
	border-top: 2px solid #e5e7eb;
}
.sae-resumen-table tr.is-descuento td:last-child { color: #16a34a; }

/* ── Métodos de pago ── */
.sae-payment-methods {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-bottom: 20px;
}

.sae-payment-option {
	border: 2px solid #e5e7eb;
	border-radius: 9px;
	padding: 14px 16px;
	cursor: pointer;
	display: flex;
	align-items: center;
	gap: 12px;
	transition: border-color .15s;
}
.sae-payment-option:hover { border-color: #93c5fd; }
.sae-payment-option.is-selected { border-color: #1d4ed8; background: #eff6ff; }
.sae-payment-option input[type=radio] { display: none; }
.sae-payment-option__icon { font-size: 22px; flex-shrink: 0; }
.sae-payment-option__title { font-weight: 600; font-size: 14px; }
.sae-payment-option__desc { font-size: 12px; color: #6b7280; }

/* ── Acciones ── */
.sae-wizard-actions {
	display: flex;
	justify-content: flex-end;
	gap: 10px;
	margin-top: 24px;
	flex-wrap: wrap;
}

.sae-btn {
	padding: 12px 24px;
	border-radius: 7px;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	border: none;
	transition: opacity .15s;
	text-decoration: none;
	display: inline-block;
}
.sae-btn:disabled { opacity: .6; cursor: not-allowed; }
.sae-btn--primary { background: #1d4ed8; color: #fff; }
.sae-btn--primary:hover:not(:disabled) { background: #1e40af; }
.sae-btn--secondary { background: #f3f4f6; color: #374151; border: 1px solid #d1d5db; }
.sae-btn--secondary:hover:not(:disabled) { background: #e5e7eb; }
.sae-btn--submit { width: 100%; text-align: center; font-size: 16px; padding: 14px; }

.sae-wizard-actions .sae-btn--secondary { margin-right: auto; }

/* ── Pantalla de éxito ── */
.sae-wizard-success {
	text-align: center;
	padding: 40px 20px;
}
.sae-wizard-success__icon {
	font-size: 56px;
	margin-bottom: 16px;
}
.sae-wizard-success h2 {
	font-size: 24px;
	color: #15803d;
	margin-bottom: 12px;
	border: none;
}
.sae-wizard-success p {
	color: #6b7280;
	font-size: 15px;
	max-width: 420px;
	margin: 0 auto;
}