/* Frontend del configurador */

.ctm-front .ctm-h3{ font-size:1.125rem; font-weight:600; color:#0f172a; margin:0 0 .35rem; }
.ctm-front .ctm-sub{ font-size:.875rem; color:#64748b; margin:0 0 1rem; }

.ctm-front .ctm-input{
	width:100%;padding:.65rem .85rem;border:1px solid #cbd5e1;border-radius:.5rem;
	font-size:.95rem;background:#fff;color:#0f172a;
}
.ctm-front .ctm-input:focus{outline:2px solid #3b82f6;outline-offset:1px;border-color:#3b82f6;}

.ctm-front .ctm-btn{
	display:inline-flex;align-items:center;gap:.4rem;padding:.6rem 1.1rem;
	border-radius:.5rem;font-size:.95rem;font-weight:500;cursor:pointer;border:1px solid transparent;
}
.ctm-front .ctm-btn-primary{background:#2563eb;color:#fff;}
.ctm-front .ctm-btn-primary:hover{background:#1d4ed8;}
.ctm-front .ctm-btn-ghost{background:transparent;color:#334155;border-color:#cbd5e1;}
.ctm-front .ctm-btn-ghost:hover{background:#f1f5f9;}
.ctm-front .ctm-btn[disabled]{opacity:.5;cursor:not-allowed;}

.ctm-front .ctm-steps{
	list-style:none;margin:0;padding:0;
	display:flex;flex-wrap:nowrap;
}
.ctm-front .ctm-step{
	flex:1 1 0;min-width:0;padding:.85rem .5rem;color:#94a3b8;border-bottom:3px solid transparent;
	text-align:center;font-weight:500;font-size:.875rem;
	user-select:none;transition:color .15s,background .15s;
	display:inline-flex;align-items:baseline;gap:.3rem;justify-content:center;
	white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.ctm-front .ctm-step .ctm-step-n{font-weight:700;}
.ctm-front .ctm-step .ctm-step-n::after{content:".";}
.ctm-front .ctm-step .ctm-step-t{font-weight:500;}
.ctm-front .ctm-step.is-done{color:#0f172a;border-color:#cbd5e1;cursor:pointer;}
.ctm-front .ctm-step.is-done:hover{background:#f1f5f9;}
.ctm-front .ctm-step.is-clickable{cursor:pointer;color:#475569;}
.ctm-front .ctm-step.is-active{color:#2563eb;border-color:#2563eb;background:#fff;cursor:default;}
.ctm-front .ctm-step[aria-disabled="true"]{cursor:not-allowed;}

.ctm-front .ctm-panel{display:none;}
.ctm-front .ctm-panel.is-active{display:block;animation:ctmFade .25s ease;}
@keyframes ctmFade{from{opacity:0;transform:translateY(4px);}to{opacity:1;transform:none;}}

.ctm-front .ctm-card-grid{
	display:grid;gap:.75rem;
	grid-template-columns:repeat(auto-fill,minmax(160px,1fr));
}
.ctm-front .ctm-option{
	cursor:pointer;border:1px solid #e2e8f0;border-radius:.75rem;padding:.85rem;
	background:#fff;text-align:center;transition:.15s;display:flex;flex-direction:column;gap:.25rem;
}
.ctm-front .ctm-option:hover{border-color:#94a3b8;}
.ctm-front .ctm-option.is-selected{
	border-color:#2563eb;background:#eff6ff;
	box-shadow:0 0 0 2px rgba(37,99,235,.15);
}
.ctm-front .ctm-option .ctm-option-title{font-weight:600;color:#0f172a;font-size:.95rem;}
.ctm-front .ctm-option .ctm-option-meta{color:#64748b;font-size:.8rem;}
.ctm-front .ctm-option .ctm-option-swatch{
	width:32px;height:32px;border-radius:50%;border:1px solid #cbd5e1;margin:0 auto .25rem;
}

.ctm-front .ctm-acc-row{
	display:flex;align-items:center;gap:.75rem;padding:.5rem .75rem;
	border:1px solid #e2e8f0;border-radius:.5rem;background:#fff;
}
.ctm-front .ctm-acc-row input[type="number"]{width:80px;}
.ctm-front .ctm-acc-row .ctm-acc-name{flex:1;font-weight:500;}
.ctm-front .ctm-acc-row .ctm-acc-price{color:#64748b;font-size:.85rem;}

/* Barra de navegación: Atrás · mensaje · Siguiente — justo bajo el stepper */
.ctm-front .ctm-nav{
	display:flex;align-items:center;gap:1rem;
	margin-bottom:1.5rem;padding-bottom:1rem;border-bottom:1px solid #e2e8f0;
}
.ctm-front .ctm-nav-right{display:flex;gap:.5rem;margin-left:auto;}
.ctm-front .ctm-nav-msg{
	flex:1;text-align:center;font-size:.9rem;font-weight:500;color:#475569;
	min-height:1.2em;opacity:0;transition:opacity .2s ease;line-height:1.3;
}
.ctm-front .ctm-nav-msg.is-show{opacity:1;}
.ctm-front .ctm-nav-msg.is-error{color:#dc2626;}
@media (max-width:640px){
	.ctm-front .ctm-nav{flex-wrap:wrap;}
	.ctm-front .ctm-nav-msg{order:3;flex:1 0 100%;text-align:center;margin-top:.5rem;}
}

.ctm-front .ctm-manual-quote{
	background:#fffbeb;border:1px solid #fde68a;color:#854d0e;
	border-radius:.5rem;padding:1rem 1.25rem;text-align:center;
}
.ctm-front .ctm-manual-quote strong{display:block;font-size:1.05rem;margin-bottom:.4rem;color:#713f12;}
.ctm-front .ctm-manual-quote p{margin:.25rem 0;line-height:1.4;font-size:.9rem;}

@media (max-width:640px){
	.ctm-front .ctm-steps{overflow-x:auto;}
	.ctm-front .ctm-step{
		flex-direction:column;align-items:center;gap:.15rem;
		padding:.5rem .35rem;line-height:1.1;overflow:visible;
	}
	.ctm-front .ctm-step .ctm-step-n{font-size:1.25rem;font-weight:700;}
	.ctm-front .ctm-step .ctm-step-n::after{content:none;}
	.ctm-front .ctm-step .ctm-step-t{font-size:.65rem;text-transform:uppercase;letter-spacing:.02em;font-weight:500;}
	.ctm-front .ctm-card-grid{grid-template-columns:repeat(2,1fr);}
}

/* ========== Mini-utilidades Tailwind embebidas (sin compilar) ========== */
.ctm-front .tw-flex{display:flex;}
.ctm-front .tw-inline-flex{display:inline-flex;}
.ctm-front .tw-grid{display:grid;}
.ctm-front .tw-block{display:block;}
.ctm-front .tw-hidden{display:none !important;}
.ctm-front .tw-flex-col{flex-direction:column;}
.ctm-front .tw-items-center{align-items:center;}
.ctm-front .tw-items-start{align-items:flex-start;}
.ctm-front .tw-justify-between{justify-content:space-between;}
.ctm-front .tw-justify-end{justify-content:flex-end;}
.ctm-front .tw-justify-center{justify-content:center;}
.ctm-front .tw-text-center{text-align:center;}
.ctm-front .tw-text-right{text-align:right;}
.ctm-front .tw-text-left{text-align:left;}
.ctm-front .tw-whitespace-nowrap{white-space:nowrap;}
.ctm-front .tw-overflow-x-auto{overflow-x:auto;}
.ctm-front .tw-overflow-hidden{overflow:hidden;}
.ctm-front .tw-w-full{width:100%;}
.ctm-front .tw-max-w-4xl{max-width:56rem;}
.ctm-front .tw-max-w-6xl{max-width:72rem;}
.ctm-front .tw-max-w-7xl{max-width:80rem;}
.ctm-front .tw-mx-auto{margin-left:auto;margin-right:auto;}
.ctm-front .tw-gap-1{gap:.25rem;}
.ctm-front .tw-gap-2{gap:.5rem;}
.ctm-front .tw-gap-3{gap:.75rem;}
.ctm-front .tw-gap-4{gap:1rem;}
.ctm-front .tw-p-4{padding:1rem;}
.ctm-front .tw-p-5{padding:1.25rem;}
.ctm-front .tw-py-1{padding-top:.25rem;padding-bottom:.25rem;}
.ctm-front .tw-pt-2{padding-top:.5rem;}
.ctm-front .tw-pt-3{padding-top:.75rem;}
.ctm-front .tw-mt-1{margin-top:.25rem;}
.ctm-front .tw-mt-2{margin-top:.5rem;}
.ctm-front .tw-mt-3{margin-top:.75rem;}
.ctm-front .tw-mt-4{margin-top:1rem;}
.ctm-front .tw-mt-6{margin-top:1.5rem;}
.ctm-front .tw-mb-2{margin-bottom:.5rem;}
.ctm-front .tw-mb-3{margin-bottom:.75rem;}
.ctm-front .tw-mb-4{margin-bottom:1rem;}
.ctm-front .tw-text-xs{font-size:.75rem;line-height:1.4;}
.ctm-front .tw-text-sm{font-size:.875rem;line-height:1.45;}
.ctm-front .tw-text-base{font-size:1rem;}
.ctm-front .tw-text-lg{font-size:1.125rem;}
.ctm-front .tw-text-xl{font-size:1.25rem;}
.ctm-front .tw-text-2xl{font-size:1.5rem;line-height:1.2;}
.ctm-front .tw-font-medium{font-weight:500;}
.ctm-front .tw-font-semibold{font-weight:600;}
.ctm-front .tw-font-bold{font-weight:700;}
.ctm-front .tw-rounded{border-radius:.25rem;}
.ctm-front .tw-rounded-lg{border-radius:.5rem;}
.ctm-front .tw-rounded-2xl{border-radius:1rem;}
.ctm-front .tw-border{border:1px solid #e2e8f0;}
.ctm-front .tw-border-slate-200{border-color:#e2e8f0;}
.ctm-front .tw-border-emerald-200{border-color:#a7f3d0;}
.ctm-front .tw-bg-slate-50{background:#f8fafc;}
.ctm-front .tw-bg-slate-900{background:#0f172a;}
.ctm-front .tw-bg-emerald-50{background:#ecfdf5;}
.ctm-front .tw-bg-white{background:#fff;}
.ctm-front .tw-text-slate-300{color:#cbd5e1;}
.ctm-front .tw-text-slate-500{color:#64748b;}
.ctm-front .tw-text-slate-600{color:#475569;}
.ctm-front .tw-text-slate-700{color:#334155;}
.ctm-front .tw-text-slate-800{color:#1e293b;}
.ctm-front .tw-text-emerald-800{color:#065f46;}
.ctm-front .tw-text-red-600{color:#dc2626;}
.ctm-front .tw-text-white{color:#fff;}
.ctm-front .tw-shadow-lg{box-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1);}

@media (min-width:640px){
	.ctm-front .sm\:tw-p-7{padding:1.75rem;}
	.ctm-front .sm\:tw-text-2xl{font-size:1.5rem;}
	.ctm-front .sm\:tw-grid-cols-2{grid-template-columns:repeat(2, minmax(0, 1fr));}
	.ctm-front .sm\:tw-text-sm{font-size:.875rem;}
}
.ctm-front .tw-grid-cols-1{grid-template-columns:1fr;}