/* Planificador de distribución camper (planos a escala). Solo lo propio. */

/* Escritorio: controles | plano. Móvil: uno debajo de otro. */
@media (min-width: 900px) {
	.rvh[data-rvh="planificador"] .rvh-pl { grid-template-columns: minmax(0, 330px) minmax(0, 1fr); align-items: start; }
}
.rvh[data-rvh="planificador"] .rvh-pl__main { display: grid; gap: var(--rv-space-4); min-width: 0; }

/* Medidas a mano */
.rvh-pl__manual {
	border: 1px solid var(--rv-line);
	border-radius: var(--rv-radius);
	background: var(--rv-bg-soft);
}
.rvh-pl__manual > summary {
	display: flex;
	align-items: center;
	min-height: 48px;
	padding: 0 var(--rv-space-4);
	font-size: var(--rv-text-sm);
	font-weight: 600;
	color: var(--rv-ink);
	cursor: pointer;
	list-style: none;
}
.rvh-pl__manual > summary::-webkit-details-marker { display: none; }
.rvh-pl__manual > summary::after {
	content: "";
	margin-left: auto;
	width: 8px;
	height: 8px;
	border-right: 2px solid var(--rv-muted);
	border-bottom: 2px solid var(--rv-muted);
	transform: rotate(45deg);
	transition: transform var(--rv-duration) var(--rv-ease);
}
.rvh-pl__manual[open] > summary::after { transform: rotate(-135deg); }
.rvh-pl__manual > .rvh-pl__grid,
.rvh-pl__manual > .rvh-hint { padding: 0 var(--rv-space-4) var(--rv-space-4); }

.rvh-pl__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--rv-space-4) var(--rv-space-3); }
.rvh-pl__grid .rvh-label { font-size: var(--rv-text-xs); line-height: 1.3; }
.rvh-pl__grid .rvh-field { align-content: start; }
.rvh-pl__grid .rvh-field .rvh-label { min-height: 2.6em; display: flex; align-items: flex-end; }
.rvh-pl__full { grid-column: 1 / -1; }
.rvh-pl__full .rvh-label { min-height: 0 !important; }
.rvh[data-rvh="planificador"] .rvh-pl__grid .rvh-input input { font-size: var(--rv-text-base); padding: 0 var(--rv-space-3); }
.rvh[data-rvh="planificador"] .rvh-input select { padding-right: var(--rv-space-3); }

/* Móvil: los botones de añadir y los ejemplos, en una fila que se desliza, para que el plano quede cerca */
@media (max-width: 899px) {
	.rvh[data-rvh="planificador"] .rvh-pl__row {
		flex-wrap: nowrap;
		overflow-x: auto;
		margin: 0 calc(-1 * var(--rvh-gap));
		padding: 2px var(--rvh-gap) 6px;
		scroll-padding: 0 var(--rvh-gap);
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--rvh-gap), #000 calc(100% - var(--rvh-gap)), transparent 100%);
		mask-image: linear-gradient(90deg, transparent 0, #000 var(--rvh-gap), #000 calc(100% - var(--rvh-gap)), transparent 100%);
	}
	.rvh[data-rvh="planificador"] .rvh-pl__row::-webkit-scrollbar { display: none; }
	.rvh[data-rvh="planificador"] .rvh-pl__row .rvh-chip { flex: 0 0 auto; white-space: nowrap; }
	.rvh[data-rvh="planificador"] .rvh-pl__side { gap: var(--rv-space-4); }
}
.rvh-pl__add .rvh-chip span { font-weight: 700; color: var(--rv-accent-dark); margin-right: 2px; }

/* ---------- Plano ---------- */
.rvh-pl__planwrap {
	position: relative;
	display: flex;
	justify-content: center;
	padding: var(--rv-space-3);
	background: #fff;
	border: 1px solid var(--rv-line);
	border-radius: var(--rv-radius);
	box-shadow: var(--rv-shadow-xs);
	overflow: hidden;
}
.rvh-pl__svg { display: block; max-width: 100%; height: auto; font-family: var(--rv-font-sans); user-select: none; -webkit-user-select: none; }
.rvh-pl__empty {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: min(80%, 22rem);
	margin: 0;
	padding: var(--rv-space-3) var(--rv-space-4);
	background: rgba(255, 255, 255, 0.92);
	border: 1px solid var(--rv-line);
	border-radius: var(--rv-radius);
	font-size: var(--rv-text-sm);
	color: var(--rv-muted);
	text-align: center;
	text-wrap: pretty;
	pointer-events: none;
}

.rvh-pl__suelo { stroke: none; }
.rvh-pl__borde { fill: none; stroke: var(--rv-ink); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.rvh-pl__cab { fill: var(--rv-bg-soft); stroke: #C9CFD6; stroke-width: 1; vector-effect: non-scaling-stroke; }
.rvh-pl__rueda { stroke: #AEB6BF; stroke-width: 1; vector-effect: non-scaling-stroke; }
.rvh-pl__lbl { fill: var(--rv-muted); font-weight: 600; }
.rvh-pl__cotas line { stroke: var(--rv-muted); stroke-width: 1; vector-effect: non-scaling-stroke; }
.rvh-pl__cota { fill: var(--rv-ink); font-weight: 600; font-variant-numeric: tabular-nums; }
/* Cota secundaria («entre ruedas»): más suave que las generales, pero ≥ 4,5:1 sobre blanco (#5F6B78 ≈ 5,4:1) */
.rvh-pl__cota--suave { fill: #5F6B78; font-weight: 500; }

/* Muebles */
.rvh-pl__mod { cursor: grab; touch-action: none; outline: none; }
.rvh-pl__mod.is-drag { cursor: grabbing; }
.rvh-pl__r { stroke: #8C96A1; stroke-width: 1; vector-effect: non-scaling-stroke; transition: stroke var(--rv-duration) var(--rv-ease); }
.rvh-pl__n { fill: var(--rv-ink); font-weight: 600; pointer-events: none; }
.rvh-pl__d { fill: var(--rv-text); font-variant-numeric: tabular-nums; pointer-events: none; }
.rvh-pl__mod--cama .rvh-pl__r { fill: #EFE6D8; }
.rvh-pl__mod--cocina .rvh-pl__r { fill: #E2E8EF; }
.rvh-pl__mod--nevera .rvh-pl__r { fill: #DCE9F0; }
.rvh-pl__mod--armario .rvh-pl__r { fill: #ECE7F1; }
.rvh-pl__mod--banco .rvh-pl__r { fill: #F3E9DC; }
.rvh-pl__mod--bano .rvh-pl__r { fill: #E0EEF0; }
.rvh-pl__mod--agua .rvh-pl__r { fill: #D9E8F6; }
.rvh-pl__mod:hover .rvh-pl__r { stroke: var(--rv-ink); }
.rvh-pl__mod.is-sel .rvh-pl__r,
.rvh-pl__mod:focus-visible .rvh-pl__r { stroke: var(--rv-accent-dark); stroke-width: 3; }
.rvh-pl__mod:focus-visible .rvh-pl__r { stroke-dasharray: 6 3; }
.rvh-pl__mod.is-mal .rvh-pl__r { fill: #F9DCD4; stroke: var(--rv-deal); stroke-width: 2; }
.rvh-pl__mod.is-mal.is-sel .rvh-pl__r { stroke-width: 3; }
.rvh-pl__ext { fill: rgba(239, 230, 216, 0.45); stroke: #B9A88C; stroke-width: 1; stroke-dasharray: 5 4; vector-effect: non-scaling-stroke; pointer-events: none; }

.rvh-pl__ruedas rect { fill: none; stroke: #7D8792; stroke-width: 1.2; stroke-dasharray: 3 3; vector-effect: non-scaling-stroke; }
.rvh-pl__pasillo line { stroke: var(--rv-ink); stroke-width: 1.5; stroke-dasharray: 4 3; vector-effect: non-scaling-stroke; }
.rvh-pl__pasillo rect { fill: var(--rv-ink); }
.rvh-pl__pasillo-t { fill: #fff; font-weight: 700; font-variant-numeric: tabular-nums; }
.rvh-pl__pasillo.is-mal line { stroke: var(--rv-deal-dark); }
.rvh-pl__pasillo.is-mal rect { fill: var(--rv-deal-dark); }

/* Editor del mueble seleccionado */
.rvh-pl__editor {
	display: grid;
	gap: var(--rv-space-3);
	padding: var(--rv-space-4);
	background: var(--rv-bg-soft);
	border: 1px solid var(--rv-line);
	border-radius: var(--rv-radius);
}
.rvh-pl__editor[hidden] { display: none; }
.rvh-pl__edhead { display: flex; align-items: center; justify-content: space-between; gap: var(--rv-space-3); }
.rvh .rvh-pl__edhead strong { color: var(--rv-ink); font-size: var(--rv-text-base); }
.rvh-pl__edacc { gap: var(--rv-space-2); }
.rvh[data-rvh="planificador"] .rvh-pl__editor .rvh-btn { min-height: 44px; padding: 0 var(--rv-space-4); }
.rvh[data-rvh="planificador"] .rvh-btn.rvh-pl__del { color: var(--rv-deal-dark); }
.rvh[data-rvh="planificador"] .rvh-btn.rvh-pl__del:hover { color: var(--rv-deal-dark) !important; border-color: var(--rv-deal); }
.rvh-pl__grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.rvh-pl__grid--4 .rvh-field .rvh-label { min-height: 0; }
@media (max-width: 560px) {
	.rvh-pl__grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.rvh-pl__avisos { display: grid; gap: var(--rv-space-2); }
.rvh-pl__avisos:empty { display: none; }
.rvh-pl__lista { display: none; }
.rvh-pl__sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; margin: -1px; }
.rvh[data-rvh="planificador"] .rvh-result .rvh-big__alt { flex-basis: 100%; }
.rvh[data-rvh="planificador"] .rvh-stats dd { white-space: normal; }

/* ---------- Impresión: solo el plano con sus cotas y la lista de muebles ---------- */
@media print {
	.rvh-pl-hide { display: none !important; }
	.rvh[data-rvh="planificador"] { border: 0; }
	.rvh[data-rvh="planificador"] .rvh-pl { display: block; padding: 0; }
	.rvh-pl__planwrap { border: 0; box-shadow: none; padding: 0; }
	.rvh-pl__empty, .rvh-pl__undo { display: none !important; }
	.rvh-pl__mod.is-sel .rvh-pl__r { stroke: #8C96A1; stroke-width: 1; }
	.rvh[data-rvh="planificador"] .rvh-result { break-inside: avoid; border: 1px solid #ccc; }
	.rvh-pl__lista { display: block; break-inside: avoid; }
	.rvh-pl__lista-t { font-size: 14px; margin: 0 0 6px; }
	.rvh[data-rvh="planificador"] .rvh__head { padding-top: 0; }
	.rvh-pl__svg { width: 100% !important; height: auto !important; max-height: 105mm; }
	.rvh[data-rvh="planificador"] .rvh-pl__main { display: grid !important; grid-template-columns: 1fr 1fr; gap: 10px 16px; align-items: start; }
	.rvh-pl__planwrap { grid-column: 1 / -1; }
	.rvh-pl__lista .rvh-table th, .rvh-pl__lista .rvh-table td { padding: 4px 6px; font-size: 11px; }
	.rvh[data-rvh="planificador"] .rvh-result { padding: 10px 14px; gap: 6px; font-size: 11px; }
	.rvh[data-rvh="planificador"] .rvh-big__num { font-size: 28px; }
	.rvh[data-rvh="planificador"] .rvh-stats > div { padding: 3px 0; font-size: 11px; }
	.rvh[data-rvh="planificador"] .rvh-note, .rvh[data-rvh="planificador"] .rvh-alert { padding: 4px 8px; font-size: 11px; }
	.rvh[data-rvh="planificador"] .rvh__foot { font-size: 9px; padding: 6px 0; }
	.rvh-pl__svg, .rvh-pl__r, .rvh-pl__rueda, .rvh-pl__pasillo rect { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* ---------- Orden de los controles ---------- */
.rvh-pl__ajuste { display: grid; gap: var(--rv-space-5); }

/* Ayuda del plano: la de dedo en pantallas táctiles (.is-tactil, lo pone el JS), la de ratón y teclado en el resto */
.rvh-pl__ayuda--tactil { display: none; }
.rvh[data-rvh="planificador"].is-tactil .rvh-pl__ayuda--tactil { display: inline; }
.rvh[data-rvh="planificador"].is-tactil .rvh-pl__ayuda--raton { display: none; }

/* Distribuciones típicas que no caben en esta furgo: se ven, pero apagadas y con su motivo debajo */
.rvh.rvh.rvh .rvh-chip.is-off { border-style: dashed; color: var(--rv-muted); background: var(--rv-bg-soft); cursor: not-allowed; }
@media (hover: hover) { .rvh.rvh.rvh button.rvh-chip.is-off:hover { box-shadow: none; border-color: var(--rv-line); color: var(--rv-muted) !important; } }
.rvh-pl__motivo.is-aviso { color: var(--rv-ink); animation: rvh-pl-aviso 900ms var(--rv-ease); }
@keyframes rvh-pl-aviso { 0%, 40% { background: #FBF5EE; } 100% { background: transparent; } }
@media (prefers-reduced-motion: reduce) { .rvh-pl__motivo.is-aviso { animation: none; } }

/* Resultado con muebles que se solapan o no caben: el titular lo dice (texto, no solo color) */
.rvh[data-rvh="planificador"] .rvh-result.is-mal .rvh-big__num { color: var(--rv-deal-dark); }
.rvh[data-rvh="planificador"] .rvh-result.is-mal .rvh-big__alt { flex-basis: auto; color: var(--rv-ink); font-size: var(--rv-text-lg); font-weight: 600; }

/* ---------- Deshacer: aviso fijo abajo durante 8 s ---------- */
.rvh-pl__undo {
	position: fixed;
	left: 50%;
	bottom: calc(var(--rv-space-3) + env(safe-area-inset-bottom, 0px));
	z-index: var(--rv-z-sticky);
	transform: translateX(-50%);
	width: min(30rem, calc(100vw - 2 * var(--rv-space-3)));
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--rv-space-3);
	padding: var(--rv-space-2) var(--rv-space-2) var(--rv-space-2) var(--rv-space-4);
	background: var(--rv-ink);
	color: #fff;
	border-radius: var(--rv-radius-pill);
	box-shadow: var(--rv-shadow-lg);
	font-size: var(--rv-text-sm);
	animation: rvh-pl-sube var(--rv-duration-md) var(--rv-ease);
}
.rvh-pl__undo p { margin: 0; color: #fff; line-height: 1.35; }
.rvh .rvh-pl__undo-btn {
	flex: 0 0 auto;
	min-height: 44px;
	padding: 0 var(--rv-space-5);
	border: 0;
	border-radius: var(--rv-radius-pill);
	background: #fff;
	color: var(--rv-ink);
	font-weight: 700;
	font-size: var(--rv-text-sm);
	cursor: pointer;
}
.rvh.rvh.rvh button.rvh-pl__undo-btn:hover { color: var(--rv-ink) !important; }
@keyframes rvh-pl-sube { from { transform: translate(-50%, 140%); } to { transform: translate(-50%, 0); } }
@media (prefers-reduced-motion: reduce) { .rvh-pl__undo { animation: none; } }
/* Mientras se ve el aviso de deshacer o se edita un mueble, la barra de resultado se aparta */
.rvh[data-rvh="planificador"].is-deshacer .rvh-mini.is-on,
.rvh[data-rvh="planificador"].is-editando .rvh-mini.is-on { visibility: hidden; transform: translateY(160%); }

/* ---------- Móvil: el editor del mueble es una hoja fija abajo y el plano sigue a la vista ---------- */
@media (max-width: 899px) {
	.rvh[data-rvh="planificador"] .rvh-pl__editor {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: var(--rv-z-sticky);
		max-height: 52vh;
		overflow: auto;
		overscroll-behavior: contain;
		gap: var(--rv-space-3);
		padding: var(--rv-space-3) var(--rv-space-4) calc(var(--rv-space-4) + env(safe-area-inset-bottom, 0px));
		background: #fff;
		border: 0;
		border-top: 1px solid var(--rv-line);
		border-radius: var(--rv-radius-lg) var(--rv-radius-lg) 0 0;
		box-shadow: 0 -8px 28px rgba(26, 43, 60, 0.18);
		animation: rvh-pl-hoja var(--rv-duration-md) var(--rv-ease);
	}
	.rvh[data-rvh="planificador"] .rvh-pl__editor::before { content: ""; display: block; width: 40px; height: 4px; margin: 0 auto; border-radius: 2px; background: var(--rv-line); }
	.rvh[data-rvh="planificador"] .rvh-pl__editor [data-k="ed-hint"] { display: none; }
	.rvh[data-rvh="planificador"] .rvh-pl__edacc { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.rvh[data-rvh="planificador"] .rvh-pl__edacc .rvh-btn { padding: 0 var(--rv-space-2); }
	.rvh[data-rvh="planificador"] .rvh-pl__editor .rvh-label { min-height: 0; }
	/* Hueco abajo para poder ver el final del plano por encima de la hoja */
	.rvh[data-rvh="planificador"].is-editando { padding-bottom: var(--rvh-pl-hoja, 320px); }
}
@keyframes rvh-pl-hoja { from { transform: translateY(100%); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) { .rvh[data-rvh="planificador"] .rvh-pl__editor { animation: none; } }

/* Tabla de medidas de la página: la columna de fuente puede partir línea */
.rvh-table td.rvh-pl-fuente { white-space: normal; text-align: left; min-width: 12rem; font-size: var(--rv-text-xs); color: var(--rv-muted); }