.db-model-page {
	--db-text: #18202a;
	--db-muted: #687384;
	--db-border: #e4e8ee;
	--db-surface: #ffffff;
	--db-soft: #f5f7fa;
	--db-soft-2: #edf2f7;
	--db-accent: #1570ef;
	--db-accent-soft: #e7f0ff;
	--db-success: #16794c;
	--db-danger: #cb3a31;
	color: var(--db-text);
	padding: clamp(28px, 5vw, 64px) 20px 72px;
}

.db-model-page * {
	box-sizing: border-box;
}

.db-model-shell {
	width: min(1240px, 100%);
	margin: 0 auto;
}

.db-breadcrumb {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
	font-size: 14px;
	color: var(--db-muted);
	margin-bottom: 28px;
}

.db-breadcrumb a {
	color: inherit;
	text-decoration: none;
}

.db-breadcrumb a:hover {
	color: var(--db-accent);
}

.db-model-header {
	display: flex;
	justify-content: space-between;
	gap: 24px;
	align-items: end;
	margin-bottom: 28px;
}

.db-model-header h1 {
	font-size: clamp(32px, 5vw, 54px);
	line-height: 1.04;
	letter-spacing: -0.035em;
	margin: 4px 0 10px;
}

.db-eyebrow,
.db-section-kicker {
	margin: 0;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--db-accent);
}

.db-model-code {
	margin: 0;
	color: var(--db-muted);
}

.db-model-grid {
	display: grid;
	grid-template-columns: minmax(0, 1.7fr) minmax(320px, .85fr);
	gap: 22px;
	align-items: start;
}

.db-viewer-card,
.db-part-card,
.db-model-description {
	background: var(--db-surface);
	border: 1px solid var(--db-border);
	border-radius: 22px;
}

.db-viewer-card {
	overflow: hidden;
}

.db-card-heading {
	padding: 22px 24px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	border-bottom: 1px solid var(--db-border);
}

.db-card-heading h2,
.db-part-card h2,
.db-model-description h2 {
	margin: 5px 0 0;
	font-size: 22px;
	letter-spacing: -.02em;
}

.db-status-badge {
	display: inline-flex;
	align-items: center;
	min-height: 32px;
	padding: 6px 10px;
	border-radius: 999px;
	background: #eaf7f0;
	color: var(--db-success);
	font-size: 12px;
	font-weight: 800;
	white-space: nowrap;
}

.db-viewer-stage {
	padding: 22px;
	background:
		linear-gradient(var(--db-border) 1px, transparent 1px),
		linear-gradient(90deg, var(--db-border) 1px, transparent 1px),
		var(--db-soft);
	background-size: 32px 32px;
}

.db-viewer-help {
	display: inline-flex;
	gap: 8px;
	flex-wrap: wrap;
	align-items: center;
	padding: 10px 14px;
	border-radius: 999px;
	background: var(--db-surface);
	border: 1px solid var(--db-border);
	font-size: 14px;
	color: var(--db-muted);
	margin-bottom: 18px;
}

.db-exploded-svg {
	width: 100%;
	height: auto;
	display: block;
}

.db-link {
	fill: none;
	stroke: #b9c4d6;
	stroke-width: 4;
	stroke-linecap: round;
	stroke-dasharray: 10 12;
}

.db-node {
	cursor: pointer;
	outline: none;
}

.db-node rect,
.db-node circle {
	fill: var(--db-surface);
	stroke: #c5cfdd;
	stroke-width: 4;
	filter: url(#shadow);
	transition: transform .15s ease, fill .15s ease, stroke .15s ease;
}

.db-node text {
	fill: #1a2232;
	font-size: 24px;
	font-weight: 800;
	text-anchor: middle;
	font-family: inherit;
	pointer-events: none;
}

.db-node:hover rect,
.db-node:hover circle,
.db-node:focus rect,
.db-node:focus circle,
.db-node.is-active rect,
.db-node.is-active circle {
	fill: var(--db-accent-soft);
	stroke: var(--db-accent);
	transform: translateY(-2px);
}

.db-part-card {
	padding: 24px;
	position: sticky;
	top: 24px;
}

.db-part-card > p:not(.db-section-kicker) {
	color: var(--db-muted);
	line-height: 1.65;
}

.db-data-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 10px;
	margin: 24px 0;
}

.db-data-item {
	padding: 14px 12px;
	border: 1px solid var(--db-border);
	border-radius: 14px;
	background: var(--db-soft);
}

.db-label {
	display: block;
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .08em;
	color: var(--db-muted);
	margin-bottom: 6px;
}

.db-data-item strong {
	font-size: 16px;
	line-height: 1.3;
}

.db-compatibilities {
	margin: 18px 0 26px;
}

.db-compatibilities ul {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 10px;
}

.db-compatibilities li {
	position: relative;
	padding-left: 22px;
	color: var(--db-text);
}

.db-compatibilities li::before {
	content: '✓';
	position: absolute;
	left: 0;
	top: 0;
	color: var(--db-success);
	font-weight: 800;
}

.db-cta {
	width: 100%;
	min-height: 52px;
	border: 0;
	border-radius: 12px;
	font: inherit;
	font-weight: 800;
	background: #d9dee6;
	color: #7a8492;
	cursor: not-allowed;
}

.db-model-description {
	margin-top: 22px;
	padding: 28px;
}

.db-prose {
	color: var(--db-muted);
	line-height: 1.75;
}

@media (max-width: 1024px) {
	.db-data-grid {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 860px) {
	.db-model-grid {
		grid-template-columns: 1fr;
	}

	.db-part-card {
		position: static;
	}

	.db-viewer-stage {
		padding: 16px;
	}

	.db-node text {
		font-size: 20px;
	}
}

@media (max-width: 560px) {
	.db-model-page {
		padding-inline: 14px;
		padding-top: 22px;
	}

	.db-card-heading,
	.db-part-card,
	.db-model-description {
		padding: 18px;
	}

	.db-card-heading {
		align-items: flex-start;
	}

	.db-status-badge {
		font-size: 11px;
	}

	.db-viewer-stage {
		background-size: 24px 24px;
	}

	.db-viewer-help {
		border-radius: 16px;
		line-height: 1.45;
	}

	.db-node text {
		font-size: 16px;
	}
}


/* v0.3: despiece real + hotspots */
.db-viewer-stage--real { padding: 18px; }
.db-real-diagram { position: relative; width: 100%; background: #fff; border: 1px solid var(--db-border); border-radius: 18px; overflow: hidden; }
.db-real-diagram > img { display: block; width: 100%; height: auto; max-height: 760px; object-fit: contain; }
.db-real-hotspots { position: absolute; inset: 0; pointer-events: none; }
.db-hotspot { position: absolute; width: 42px; height: 42px; margin: -21px 0 0 -21px; border-radius: 999px; border: 3px solid #fff; background: var(--db-accent); color: #fff; box-shadow: 0 8px 22px rgba(21,112,239,.28); display: grid; place-items: center; font: inherit; font-weight: 900; cursor: pointer; pointer-events: auto; transition: transform .15s ease, box-shadow .15s ease, background .15s ease; }
.db-hotspot span { pointer-events: none; }
.db-hotspot:hover, .db-hotspot:focus-visible, .db-hotspot.is-active { transform: scale(1.16); box-shadow: 0 10px 26px rgba(21,112,239,.38); outline: none; }
.db-hotspot.is-active { background: #0d4fb8; }
@media (max-width: 560px) { .db-hotspot { width: 36px; height: 36px; margin: -18px 0 0 -18px; font-size: 13px; } }


/* v0.4 — vínculo automático con WooCommerce por SKU */
.db-product-preview {
	position: relative;
	display: grid;
	grid-template-columns: 84px minmax(0, 1fr);
	gap: 12px;
	align-items: center;
	margin: 14px 0 18px;
	padding: 10px;
	border: 1px solid var(--db-border);
	border-radius: 16px;
	background: var(--db-soft);
}
.db-product-preview[hidden] { display: none; }
.db-product-preview img {
	width: 84px;
	height: 84px;
	object-fit: contain;
	border-radius: 12px;
	background: #fff;
	border: 1px solid var(--db-border);
}
.db-linked-badge {
	justify-self: start;
	display: inline-flex;
	align-items: center;
	min-height: 30px;
	padding: 5px 10px;
	border-radius: 999px;
	background: #eaf7f0;
	color: var(--db-success);
	font-size: 12px;
	font-weight: 800;
}
.db-data-item--price strong {
	font-size: 19px;
	color: var(--db-text);
}
.db-data-item--price strong .amount {
	font-size: inherit;
}
.db-cta {
	display: flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	text-align: center;
	padding: 12px 16px;
	background: var(--db-accent);
	color: #fff;
	cursor: pointer;
	transition: opacity .15s ease, transform .15s ease;
}
.db-cta:hover { color:#fff; opacity:.92; transform:translateY(-1px); }
.db-cta.is-disabled {
	background: #d9dee6;
	color: #7a8492;
	cursor: not-allowed;
	pointer-events: auto;
	transform: none;
}


/* v0.4.1 — ficha comercial más limpia */
.db-part-head {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: 16px;
	align-items: center;
	margin: 14px 0 8px;
}
.db-part-title-wrap { min-width: 0; }
.db-part-title-wrap h2 {
	margin: 0;
	font-size: clamp(24px, 2vw, 30px);
	line-height: 1.05;
	letter-spacing: -.025em;
}
.db-product-preview {
	display: block;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
}
.db-product-preview img {
	width: 92px;
	height: 92px;
	object-fit: contain;
	border-radius: 16px;
	background: #fff;
	border: 1px solid var(--db-border);
}
.db-product-name {
	margin: 7px 0 0 !important;
	color: var(--db-muted) !important;
	font-size: 14px;
	font-weight: 650;
	line-height: 1.4 !important;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.db-product-name[hidden] { display:none; }
.db-part-description {
	margin: 14px 0 0;
	font-size: 14px;
}
.db-part-description[hidden] { display:none; }
.db-price-block {
	margin: 24px 0 12px;
	padding: 18px;
	border-radius: 16px;
	background: var(--db-soft);
	border: 1px solid var(--db-border);
}
.db-price-block > strong {
	display: block;
	font-size: clamp(25px, 2.8vw, 34px);
	line-height: 1.12;
	letter-spacing: -.025em;
	overflow-wrap: anywhere;
	color: var(--db-text);
}
.db-price-block .amount,
.db-price-block .woocommerce-Price-amount {
	font-size: inherit;
	font-weight: 850;
}
.db-price-block del,
.db-price-block ins {
	display: inline-block;
}
.db-price-block small,
.db-price-block .tax_label {
	display: block;
	margin-top: 7px;
	font-size: 13px;
	line-height: 1.4;
	font-weight: 500;
	color: var(--db-muted);
}
.db-secondary-data {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 10px;
	margin: 0 0 22px;
}
.db-secondary-data .db-data-item {
	min-width: 0;
}
.db-secondary-data .db-data-item strong {
	display: block;
	overflow-wrap: anywhere;
}
.db-stock-value {
	position: relative;
	padding-left: 16px;
}
.db-stock-value::before {
	content: '';
	position: absolute;
	left: 0;
	top: .42em;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #8b95a5;
}
.db-stock-value[data-stock-state="instock"]::before { background:#18945c; }
.db-stock-value[data-stock-state="outofstock"]::before { background:#d63b32; }
.db-stock-value[data-stock-state="onbackorder"]::before { background:#d28b13; }
.db-stock-value[data-stock-state="instock"] { color:#116b44; }
.db-stock-value[data-stock-state="outofstock"] { color:#a72b25; }
.db-stock-value[data-stock-state="onbackorder"] { color:#895a0d; }
.db-compatibilities {
	padding-top: 4px;
	border-top: 1px solid var(--db-border);
}
.db-cta {
	margin-top: 4px;
	min-height: 54px;
	border-radius: 14px;
	font-size: 15px;
}
@media (max-width: 560px) {
	.db-part-head { grid-template-columns: 72px minmax(0,1fr); gap:12px; }
	.db-product-preview img { width:72px; height:72px; border-radius:12px; }
	.db-part-title-wrap h2 { font-size:24px; }
	.db-product-name { -webkit-line-clamp: 2; }
	.db-price-block { margin-top:18px; padding:16px; }
	.db-price-block > strong { font-size:28px; }
	.db-secondary-data { grid-template-columns:1fr 1fr; }
}

/* v0.5 - una posición puede ofrecer múltiples repuestos */
.db-position-title{display:flex;align-items:center;gap:10px;margin:6px 0 8px}.db-position-title h2{margin:0}
.db-position-number{display:inline-grid;place-items:center;min-width:38px;height:38px;padding:0 8px;border-radius:999px;background:var(--db-accent);color:#fff;font-weight:900;font-size:16px}
.db-part-intro{margin:0 0 18px;color:var(--db-muted);line-height:1.55}
.db-product-options{display:grid;gap:14px}.db-option-card{border:1px solid var(--db-border);border-radius:18px;padding:14px;background:#fff}.db-option-card.is-unlinked{background:var(--db-soft)}
.db-option-top{display:grid;grid-template-columns:76px minmax(0,1fr);gap:12px;align-items:center}.db-option-top>img{width:76px;height:76px;object-fit:contain;border:1px solid var(--db-border);border-radius:12px;background:#fff}.db-option-info{min-width:0}.db-option-info h3{font-size:16px;line-height:1.3;margin:5px 0;overflow-wrap:anywhere}.db-option-type{display:inline-flex;align-items:center;min-height:25px;padding:3px 8px;border-radius:999px;background:var(--db-accent-soft);color:var(--db-accent);font-size:11px;font-weight:900;text-transform:uppercase;letter-spacing:.06em}.db-option-sku{font-size:12px;color:var(--db-muted);margin:0}
.db-option-meta{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(110px,.7fr);gap:10px;margin:12px 0}.db-option-price,.db-option-stock{padding:11px 12px;border-radius:12px;background:var(--db-soft);border:1px solid var(--db-border)}.db-option-price strong{display:block;font-size:20px;line-height:1.2}.db-option-stock strong{display:block;font-size:14px}.db-option-stock.is-in strong{color:var(--db-success)}.db-option-stock.is-out strong{color:var(--db-danger)}.db-option-stock.is-backorder strong{color:#9a6700}
.db-option-description,.db-option-compat{font-size:13px;line-height:1.5;color:var(--db-muted);margin:10px 0}.db-option-compat{padding-top:9px;border-top:1px solid var(--db-border)}
.db-option-cta{display:flex;align-items:center;justify-content:center;min-height:46px;padding:10px 14px;border-radius:11px;background:var(--db-accent);color:#fff!important;text-decoration:none;font-weight:800;text-align:center}.db-option-cta.is-disabled{background:#d9dee6;color:#7a8492!important;cursor:not-allowed}.db-empty-options{padding:18px;border:1px dashed var(--db-border);border-radius:14px;background:var(--db-soft);color:var(--db-muted);text-align:center}
@media(max-width:560px){.db-option-meta{grid-template-columns:1fr}.db-option-top{grid-template-columns:64px minmax(0,1fr)}.db-option-top>img{width:64px;height:64px}}

/* v0.6 - opción recomendada */
.db-option-card.is-recommended{border-color:#72aee6;box-shadow:0 0 0 1px rgba(21,112,239,.15);background:#fbfdff}
.db-option-badges{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.db-option-recommended{display:inline-flex;align-items:center;min-height:25px;padding:3px 8px;border-radius:999px;background:#eaf7f0;color:var(--db-success);font-size:11px;font-weight:900;text-transform:uppercase;letter-spacing:.06em}

/* v1.0 — identificación de familia/variante */
.db-model-family{margin:0 0 6px;color:var(--db-muted);font-size:14px}.db-model-identifiers{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:10px;color:var(--db-muted);font-size:14px}.db-model-identifiers strong{color:var(--db-text)}.db-model-revision{max-width:780px;margin:12px 0 0;padding:10px 12px;border-left:3px solid var(--db-accent);background:#f7faff;color:var(--db-muted);font-size:14px;line-height:1.55}
.db-variant-switcher{margin:0 0 22px;padding:20px;border:1px solid var(--db-border);border-radius:20px;background:#fbfcfe}.db-variant-switcher-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,.9fr);gap:18px;align-items:start}.db-variant-switcher-head h2{margin:4px 0 0;font-size:22px;letter-spacing:-.02em}.db-variant-switcher-head>p{margin:0;color:var(--db-muted);font-size:14px;line-height:1.6}.db-variant-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px;margin-top:16px}.db-variant-choice{display:flex;align-items:center;justify-content:space-between;gap:12px;min-width:0;padding:12px 13px;border:1px solid var(--db-border);border-radius:12px;background:#fff;color:var(--db-text);text-decoration:none}.db-variant-choice:hover{border-color:#b8cdf5;color:var(--db-text)}.db-variant-choice.is-current{border-color:var(--db-accent);background:var(--db-accent-soft)}.db-variant-choice>span{display:grid;min-width:0;gap:3px}.db-variant-choice strong{font-size:14px}.db-variant-choice small{overflow:hidden;color:var(--db-muted);font-size:11px;text-overflow:ellipsis;white-space:nowrap}.db-variant-choice>b{flex:none;color:var(--db-accent);font-size:11px;text-transform:uppercase;letter-spacing:.04em}
@media(max-width:700px){.db-variant-switcher{padding:16px}.db-variant-switcher-head{grid-template-columns:1fr}.db-variant-list{grid-template-columns:1fr}}


/* v1.0.1 — identificación y estado de variante */
.db-model-identification{max-width:820px;margin:14px 0 0;padding:14px 16px;border:1px solid #cfe0ff;border-radius:14px;background:#f5f9ff}.db-model-identification strong{display:block;margin-bottom:4px;color:#0d5bd4;font-size:12px;text-transform:uppercase;letter-spacing:.07em}.db-model-identification p{margin:0;color:var(--db-text);font-size:14px;line-height:1.55}.db-status-badge.is-partial{background:#fff6df;color:#8a5b00}.db-status-badge.is-preparing{background:#f1f3f6;color:#687384}.db-status-badge.is-complete{background:#eaf7f0;color:var(--db-success)}.db-variant-choice em{font-style:normal}.db-variant-choice-status{display:block;margin-top:3px;font-size:11px;font-weight:800}.db-variant-choice-status.is-complete{color:var(--db-success)}.db-variant-choice-status.is-partial{color:#9a6700}.db-variant-choice-status.is-preparing{color:#737e8d}.db-variant-choice-identification{display:block;margin-top:4px;color:var(--db-muted);font-size:11px;line-height:1.35;white-space:normal}.db-diagram-preparing{min-height:430px;display:grid;place-items:center;align-content:center;gap:10px;padding:30px;text-align:center;color:var(--db-muted)}.db-diagram-preparing>span{width:72px;height:72px;display:grid;place-items:center;border:1px solid var(--db-border);border-radius:18px;background:#fff;font-size:30px}.db-diagram-preparing h3{margin:4px 0 0;color:var(--db-text);font-size:22px}.db-diagram-preparing p{max-width:560px;margin:0;line-height:1.6}
@media(max-width:560px){.db-model-identification{padding:12px 13px}.db-diagram-preparing{min-height:300px;padding:22px 16px}}