/* Metacrilato Configurador — VERSIÓN MÓVIL (27-09-2026). Ver movil-config.js.
   Alturas y tamaños en Apariencia → Móvil (--mc-movil-*).
   Todo bajo @media (max-width: 1024px) y body.mc-cfg-pagina (lo pone el JS
   solo en las páginas con configurador). Colores y medidas: Apariencia. */

/* Piezas del móvil: ocultas en escritorio (el aviso del cargo solo va en el desglose del móvil; en escritorio ya sale en su sitio). */
.mc-cfg-mat, .mc-cfg-velo, .mc-cfg-piezas, .mc-cfg-total-chev, .mc-cfg-cargo-aviso { display: none; }

@media (max-width: 1024px) {

	/* ---- Cabecera: se esconde al bajar (solo en configuradores) ---- */
	body.mc-cfg-pagina .mc-mhead { transition: transform .2s ease; }
	body.mc-cfg-pagina.mc-cab-oculta .mc-mhead { transform: translateY(-100%); }
	/* 27-09-2026 (Daniel): la barra de navegación se queda; la del total va
	   justo encima de ella. */
	body.mc-cfg-pagina { padding-bottom: calc(var(--mc-movil-boton-carrito, 52px) + 16px + var(--mc-movil-barra, 50px) + env(safe-area-inset-bottom, 0px)) !important; }

	/* ---- Franja del material ---- */
	body.mc-cfg-pagina .mc-cfg-mat {
		display: flex; align-items: center; gap: 10px;
		position: fixed; left: 0; right: 0; top: var(--mc-cfg-top, 0px); z-index: 998;
		height: var(--mc-movil-cabecera, 56px); padding: 0 14px 0 12px; box-sizing: border-box; cursor: pointer;
		background: var(--mc-fondo, #fff);
		border-bottom: 1px solid var(--mc-borde, #e2e8f0);
		box-shadow: 0 2px 8px rgba(0,0,0,.05);
		transform: translateY(-120%); visibility: hidden;
		transition: transform .2s ease, top .2s ease, visibility 0s linear .2s;
	}
	body.mc-cfg-pagina.mc-cfg-mat-on .mc-cfg-mat {
		transform: none; visibility: visible;
		transition: transform .2s ease, top .2s ease, visibility 0s;
	}
	.mc-cfg-mat-thumb {
		position: relative; flex: 0 0 var(--mc-movil-miniatura, 40px); width: var(--mc-movil-miniatura, 40px); height: var(--mc-movil-miniatura, 40px);
		border-radius: var(--mc-radio-bento, 8px); overflow: hidden;
		background: var(--mc-fondo-suave, #f8fafc);
	}
	.mc-cfg-mat-txt { flex: 1 1 auto; min-width: 0; line-height: 1.25; }
	.mc-cfg-mat-l1 { display: flex; align-items: baseline; gap: 6px; min-width: 0; font-size: 15px; font-weight: var(--mc-peso-fuerte, 600); color: var(--mc-texto, #0f172a); }
	.mc-cfg-mat-nombre { flex: 0 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
	.mc-cfg-mat-cambiar { flex: 0 0 auto; font-size: 13px; font-weight: var(--mc-peso-fuerte, 600); color: var(--mc-enlace, #2563eb); text-decoration: underline; }
	.mc-cfg-mat-ir { flex: 0 0 auto; font-size: 18px; line-height: 1; color: var(--mc-texto-2, #64748b); }
	.mc-cfg-mat-l2 { font-size: 13px; color: var(--mc-texto-2, #64748b); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

	body.mc-cfg-pagina .mc-cfg-chev {
		display: inline-flex; align-items: center; justify-content: center;
		flex: 0 0 40px; width: 40px; height: 40px; padding: 0; margin: 0;
		background: none !important; border: 0 !important; box-shadow: none !important;
		color: var(--mc-texto, #0f172a) !important; font-size: 20px; line-height: 1; cursor: pointer;
		-webkit-tap-highlight-color: transparent;
	}
	/* Flecha y «+» dibujados con CSS (27-09-2026: sin la fuente Phosphor). */
	.mc-cfg-caret { display: inline-block; position: relative; width: 1em; height: 1em; }
	.mc-cfg-caret::before {
		content: ""; position: absolute; left: 50%; top: 58%; width: .42em; height: .42em;
		border-left: 2px solid currentColor; border-top: 2px solid currentColor;
		transform: translate(-50%, -50%) rotate(45deg);
	}
	.mc-cfg-mas { display: inline-block; position: relative; width: .8em; height: .8em; }
	.mc-cfg-mas::before, .mc-cfg-mas::after {
		content: ""; position: absolute; left: 50%; top: 50%; background: currentColor; border-radius: 1px;
		transform: translate(-50%, -50%);
	}
	.mc-cfg-mas::before { width: 100%; height: 2px; }
	.mc-cfg-mas::after { width: 2px; height: 100%; }
	.mc-cfg-chev i { transition: transform .2s ease; }
	.mc-cfg-chev[aria-expanded="true"] i { transform: rotate(180deg); }

	body.mc-cfg-pagina .mc-cfg-velo:not([hidden]) {
		display: block; position: fixed; inset: 0; z-index: 996;
		background: rgba(15,23,42,.35);
	}

	/* ---- Tira de piezas / planchas (con 2 o más) ---- */
	body.mc-cfg-pagina.mc-cfg-varias .mc-cfg-piezas {
		display: flex; gap: 8px; align-items: center;
		position: sticky; top: var(--mc-cfg-piezas-top, 0px); z-index: 995;
		margin: 0 -4px 10px; padding: 8px 4px;
		overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: none;
		background: var(--mc-fondo-suave, #f8fafc);
		transition: top .2s ease;
	}
	.mc-cfg-piezas::-webkit-scrollbar { display: none; }
	body.mc-cfg-pagina .mc-cfg-pieza {
		flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px;
		height: var(--mc-movil-pildora, 34px); padding: 0 12px; margin: 0;
		border: 1px solid var(--mc-borde-campo, #cbd5e1); border-radius: calc(var(--mc-movil-pildora, 34px) / 2);
		background: var(--mc-fondo, #fff); color: var(--mc-texto, #0f172a);
		font-family: inherit; font-size: 14px; font-weight: var(--mc-peso-titulo, 500);
		white-space: nowrap; cursor: pointer; box-shadow: none;
		opacity: .72; -webkit-tap-highlight-color: transparent;
	}
	body.mc-cfg-pagina .mc-cfg-pieza.is-activa { opacity: 1; box-shadow: 0 0 0 2px var(--mc-texto, #0f172a); }
	.mc-cfg-pieza-n { font-weight: var(--mc-peso-fuerte, 600); }
	.mc-cfg-pieza-n::after { content: "·"; margin-left: 6px; opacity: .6; }
	body.mc-cfg-pagina .mc-cfg-pieza-mas {
		opacity: 1; width: var(--mc-movil-pildora, 34px); padding: 0; justify-content: center;
		background: var(--mc-boton, #2c2c2e) !important; color: var(--mc-boton-texto, #fff) !important; border-color: transparent !important;
		font-size: 18px;
	}

	/* ---- Acordeón: solo la pieza activa, en dos líneas ---- */
	body.mc-cfg-pagina.mc-cfg-varias #pieces-accordion-container > .piece-accordion-item:not(.active),
	body.mc-cfg-pagina.mc-cfg-varias #planchas-accordion-container > .plancha-accordion-item:not(.active) { display: none !important; }
	body.mc-cfg-pagina .piece-chevron, body.mc-cfg-pagina .plancha-chevron { display: none !important; }
	body.mc-cfg-pagina .piece-accordion-header,
	body.mc-cfg-pagina .plancha-accordion-header { flex-wrap: wrap !important; row-gap: 2px; }
	body.mc-cfg-pagina .piece-details-text,
	body.mc-cfg-pagina .plancha-summary-text {
		display: block !important; order: 10; flex: 0 0 100% !important; width: 100%;
		margin: 0 !important; padding: 0 !important;
		font-size: 12px !important; line-height: 1.35; color: var(--mc-texto-2, #64748b) !important;
		white-space: normal !important;
	}
	body.mc-cfg-pagina .piece-header-price,
	body.mc-cfg-pagina .plancha-price-badge { white-space: nowrap !important; font-size: 14px !important; }
	body.mc-cfg-pagina .piece-header-right,
	body.mc-cfg-pagina .plancha-header-right { margin-left: auto; flex-wrap: nowrap; }

	/* ---- Barra del total (la columna 3 hecha barra) ---- */
	body.mc-cfg-pagina .metacrilato-config-col-3 {
		position: fixed !important; left: 0; right: 0; bottom: calc(var(--mc-movil-barra, 50px) + env(safe-area-inset-bottom, 0px)); z-index: 999;
		width: auto !important; max-width: none !important; margin: 0 !important;
		padding: 0 !important;
		background: var(--mc-fondo, #fff);
		border-top: 1px solid var(--mc-borde, #e2e8f0);
		box-shadow: 0 -4px 14px rgba(0,0,0,.06);
		max-height: 65vh; overflow-y: auto;
	}
	body.mc-cfg-pagina .col-3-buy-card {
		display: grid !important; grid-template-columns: 40px 1fr auto; align-items: end;
		column-gap: 6px; padding: 8px 12px 8px 6px !important; margin: 0 !important;
		background: none !important; border: 0 !important; box-shadow: none !important;
	}
	body.mc-cfg-pagina .mc-cfg-total-chev { grid-column: 1; align-self: end; margin-bottom: 4px; }
	body.mc-cfg-pagina .col-3-buy-card > .metacrilato-bento-block,
	body.mc-cfg-pagina .col-3-buy-card > .bento-buy-premium {
		grid-column: 2; min-width: 0; margin: 0 !important; padding: 0 !important;
		background: none !important; border: 0 !important; box-shadow: none !important;
	}
	body.mc-cfg-pagina .col-3-buy-card .price-box { display: flex; flex-direction: column; padding: 0 !important; margin: 0 !important; background: none !important; border: 0 !important; box-shadow: none !important; }
	body.mc-cfg-pagina .col-3-buy-card #total-bento-inner {
		order: 20; display: flex !important; flex-direction: row !important; justify-content: flex-start !important;
		align-items: baseline !important; text-align: left !important; flex-wrap: wrap; gap: 0 6px;
		padding: 0 !important; margin: 0 !important; background: none !important; border: 0 !important; box-shadow: none !important;
		min-height: 44px; align-content: center;
	}
	body.mc-cfg-pagina #total-label-line { font-size: 13px !important; margin: 0 !important; white-space: nowrap; width: auto !important; flex: 0 0 auto !important; }
	body.mc-cfg-pagina #final-price { display: inline-flex !important; align-items: baseline; gap: 4px; margin: 0 !important; white-space: nowrap; }
	body.mc-cfg-pagina #final-price .total-price-text { font-size: var(--mc-movil-total, 20px) !important; }
	body.mc-cfg-pagina #final-price .total-sufijo { font-size: 11px !important; }
	body.mc-cfg-pagina .metacrilato-config-col-3:not(.mc-cfg-total-abierto) #final-price-sin-iva,
	body.mc-cfg-pagina .metacrilato-config-col-3:not(.mc-cfg-total-abierto) #calculation-details,
	body.mc-cfg-pagina .metacrilato-config-col-3:not(.mc-cfg-total-abierto) .section-shipping,
	body.mc-cfg-pagina .metacrilato-config-col-3:not(.mc-cfg-total-abierto) .metacrilato-shipping-warning,
	body.mc-cfg-pagina .metacrilato-config-col-3:not(.mc-cfg-total-abierto) .col-3-buy-card > :not(.mc-cfg-total-chev):not(.bento-buy-premium):not(.metacrilato-buy-block-wrapper) { display: none !important; }
	body.mc-cfg-pagina .mc-cfg-total-abierto #final-price-sin-iva { order: 21; flex-basis: 100%; }
	body.mc-cfg-pagina .mc-cfg-total-abierto #calculation-details { order: 10; margin: 4px 0 8px !important; }
	body.mc-cfg-pagina .mc-cfg-total-abierto .section-shipping { order: 11; margin: 0 0 8px !important; }
	body.mc-cfg-pagina .mc-cfg-total-abierto .metacrilato-shipping-warning { padding: 0 12px 8px; }

	body.mc-cfg-pagina .metacrilato-buy-block-wrapper {
		grid-column: 3; align-self: end; display: flex !important; align-items: center;
		margin: 0 !important; padding: 0 !important; background: none !important;
	}
	body.mc-cfg-pagina .metacrilato-buy-block-wrapper .quantity { display: none !important; }
	body.mc-cfg-pagina .col-3-buy-card .single_add_to_cart_button {
		width: var(--mc-movil-boton-carrito, 52px) !important; height: var(--mc-movil-boton-carrito, 52px) !important; min-width: 0 !important; padding: 0 !important; margin: 0 !important;
		border-radius: 50% !important; display: inline-flex !important; align-items: center; justify-content: center;
	}
	body.mc-cfg-pagina .col-3-buy-card .single_add_to_cart_button .apb-text { display: none !important; }
	/* Icono: el del botón de escritorio (Configurador Settings), a tamaño móvil. */
	body.mc-cfg-pagina .col-3-buy-card .single_add_to_cart_button .apb-icon {
		display: block !important; width: var(--mc-movil-icono-carrito, 26px) !important; height: var(--mc-movil-icono-carrito, 26px) !important;
		padding: 0 !important; margin: 0 !important; flex: 0 0 auto;
		-webkit-mask-size: contain !important; mask-size: contain !important;
		-webkit-mask-origin: border-box !important; mask-origin: border-box !important;
		-webkit-mask-clip: border-box !important; mask-clip: border-box !important;
	}
	body.mc-cfg-pagina .col-3-buy-card .single_add_to_cart_button { gap: 0 !important; justify-content: center !important; }

	/* «Consultar disponibilidad»: debajo de los grosores, sin montarse. */
	body.mc-cfg-pagina .bento-thickness { flex-wrap: wrap !important; }
	body.mc-cfg-pagina .metacrilato-theme .bento-thickness .mc-consulta-aviso,
	body.mc-cfg-pagina .metacrilato-theme .mc-consulta-aviso {
		position: static !important; transform: none !important; right: auto !important; top: auto !important;
		flex: 0 0 100% !important; width: 100% !important; justify-content: flex-start !important;
		margin: 10px 0 0 !important;
		padding: 0 12px 0 var(--mc-cfg-consulta-izq, 16px) !important; box-sizing: border-box !important;
	}

	/* Aviso del cargo dentro del desglose (solo abierto). */
	body.mc-cfg-pagina .metacrilato-config-col-3:not(.mc-cfg-total-abierto) .mc-cfg-cargo-aviso { display: none !important; }
	body.mc-cfg-pagina .mc-cfg-total-abierto .mc-cfg-cargo-aviso:not([hidden]) {
		display: flex; gap: 8px; align-items: flex-start;
		margin: 12px 12px 0; padding: 12px 14px;
		border-radius: var(--mc-radio-bento, 8px);
		background: var(--mc-fondo-suave, #f8fafc); border: 1px solid var(--mc-borde, #e2e8f0);
		font-size: 13px; line-height: 1.45; color: var(--mc-texto, #0f172a);
	}
	.mc-cfg-cargo-dot { flex: 0 0 8px; width: 8px; height: 8px; margin-top: 6px; border-radius: 50%; background: var(--mc-enlace, #2563eb); }

	/* ---- Planchas: filas del despiece dentro del bento (27-09-2026) ---- */
	body.mc-cfg-pagina .plancha-piece-row { gap: 6px !important; }
	body.mc-cfg-pagina .plancha-piece-label { width: auto !important; flex: 0 0 auto; }
	body.mc-cfg-pagina .plancha-piece-inputs { min-width: 0; gap: 4px !important; }
	body.mc-cfg-pagina .plancha-piece-input-num { width: auto !important; flex: 1 1 0; min-width: 0; }
	body.mc-cfg-pagina .plancha-piece-input-qty { width: 46px !important; flex: 0 0 46px; }
	body.mc-cfg-pagina .btn-delete-plancha-piece { margin-left: 0 !important; padding: 0 !important; }

	/* ---- Avisos (ahorro, dimensiones) encima del subtotal, apilados ---- */
	body.mc-cfg-pagina .piece-price-row,
	body.mc-cfg-pagina .plancha-price-row { flex-direction: column !important; gap: 10px !important; }
	body.mc-cfg-pagina .piece-price-row > .metacrilato-bento-block,
	body.mc-cfg-pagina .plancha-price-row > .metacrilato-bento-block {
		max-width: none !important; width: 100% !important; flex: 0 0 auto !important; box-sizing: border-box;
	}
	body.mc-cfg-pagina .piece-price-row > .piece-calculation-details,
	body.mc-cfg-pagina .plancha-price-row > .plancha-dimension-alert,
	body.mc-cfg-pagina .plancha-price-row > .plancha-savings-alert-container { order: -1; }
	body.mc-cfg-pagina .plancha-price-row:not(.has-alert) > .plancha-dimension-alert:empty { display: none !important; }
	body.mc-cfg-pagina .piece-calculation-details *,
	body.mc-cfg-pagina .plancha-dimension-alert *,
	body.mc-cfg-pagina .plancha-savings-alert-container * { text-align: left !important; }

	/* ---- Visor ampliado: menos márgenes ---- */
	#mc-visor-modal { padding: 6px !important; }
	#mc-visor-modal .mc-visor-modal-panel { padding: 30px 8px 8px !important; max-width: 100vw !important; max-height: 100vh !important; box-sizing: border-box; }
	/* Ancho = el mayor que cabe a lo ancho y a lo alto con la proporción de la
	   plancha (30 + 8 px de relleno vertical, 16 px horizontal, 12 px de margen). */
	#mc-visor-modal .mc-visor-modal-panel.mc-visor-movil {
		width: min(calc(100vw - 12px), calc((100vh - 12px - 38px) * var(--mc-visor-r, 1.5) + 16px)) !important;
		width: min(calc(100vw - 12px), calc((100dvh - 12px - 38px) * var(--mc-visor-r, 1.5) + 16px)) !important;
	}
	@media (orientation: landscape) {
		#mc-visor-modal .mc-visor-modal-panel.mc-visor-movil { padding: 8px 36px 8px 8px !important; }
		#mc-visor-modal .mc-visor-modal-panel.mc-visor-movil {
			width: min(calc(100vw - 12px), calc((100vh - 12px - 16px) * var(--mc-visor-r, 1.5) + 44px)) !important;
			width: min(calc(100vw - 12px), calc((100dvh - 12px - 16px) * var(--mc-visor-r, 1.5) + 44px)) !important;
		}
	}
	#mc-visor-modal .mc-visor-modal-close { top: 2px !important; right: 6px !important; }
}