/*!
 * Sils Addons — Ficha de composición en el móvil (ver composicion-ficha.js, «Móvil»).
 *
 * Pestañas «Personalizar» / «Comprar todo» bajo la foto. En Personalizar: a la izquierda,
 * una columna con las obras y su casilla ✓; a la derecha, la obra elegida en grande (con su
 * marco) y, debajo, sus datos, la compra suelta y sus opciones en filas. En Comprar todo, la
 * composición tal cual. Barra fija.
 *
 * Mismo lenguaje que el resto de la web: cajas con borde fino (1 px) y radio de 4 px; la
 * elegida, con el borde gris oscuro y la sombra suave de las opciones de la ficha de obra;
 * la casilla ✓, un cuadrado negro sólido con la marca blanca, dentro de la caja.
 *
 * Se apoya en configurador-movil.css (barra de referencia, pestañas, «Configurar», ajuste
 * de la foto) y en personaliza.css (botones de medida y barra de compra fija). Colores con
 * las variables de configurador-movil.css (--scm-*), que salen de las del sistema.
 *
 * @package SilsAddons
 */

@media (max-width: 767px) {
	.sils-cfm {
		/* Las miniaturas van de frente: el giro en perspectiva, a este tamaño, solo estorba. */
		--mf-rotacion: 0deg;
		--cfm-borde-sel: var(--scm-gris);
		--cfm-sombra-sel: 0 2px 8px color-mix(in srgb, var(--scm-negro) 7%, transparent);
		--cfm-reposo: color-mix(in srgb, var(--scm-gris) 5%, var(--scm-blanco));
	}

	/* Los botones propios: el tema y el kit pintan cualquier <button>, así que se fija todo,
	   con el foco igual que el reposo. */
	.sils-cfm :is(.sils-cfm__elegir, .sils-cfm__marca, .sils-cfm__muestra, .sils-cfm__accion, .sils-cfm__suelta),
	.sils-cfm :is(.sils-cfm__elegir, .sils-cfm__marca, .sils-cfm__muestra, .sils-cfm__accion, .sils-cfm__suelta):is(:hover, :focus, :active) {
		margin: 0;
		min-height: 0;
		box-shadow: none;
		font: inherit;
		letter-spacing: normal;
		text-transform: none;
		cursor: pointer;
	}
	.sils-cfm :is(.sils-cfm__elegir, .sils-cfm__marca, .sils-cfm__muestra, .sils-cfm__accion, .sils-cfm__suelta):focus-visible { outline: 2px solid var(--scm-negro); outline-offset: 2px; }

	/* Pestañas de modo: a partes iguales. */
	.sils-cfm .sils-cfm__modos button.sils-conf__pestana { flex: 1 1 0; justify-content: center; text-align: center; }
	.sils-cfm__vista.es-entrando { animation: sils-cfm-entra .25s ease; }

	/* ── Personalizar: columna de obras + la obra elegida ─────────────────── */
	.sils-cfm__personalizar {
		display: grid;
		grid-template-columns: 78px minmax(0, 1fr);
		gap: var(--sils-esp-xs, 12px);
		padding: 10px var(--sils-margen-seguridad, 16px) 4px;
	}
	/* La columna mide lo que la obra de su derecha y, si no caben todas, se desliza. */
	.sils-cfm .sils-cfm__columna {
		display: flex;
		flex-direction: column;
		gap: var(--sils-esp-2xs, 8px);
		height: 0;
		min-height: 100%;
		overflow-y: auto;
		overscroll-behavior-y: contain;
		scrollbar-width: none;
		padding: 1px;
	}
	.sils-cfm .sils-cfm__columna::-webkit-scrollbar { display: none; }
	.sils-cfm__pieza { position: relative; flex: 0 0 auto; }

	/* Caja de cada obra: borde fino; la elegida, como las opciones de la ficha de obra. */
	.sils-cfm button.sils-cfm__elegir,
	.sils-cfm button.sils-cfm__elegir:is(:hover, :focus, :active) {
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: var(--sils-esp-3xs, 4px);
		padding: 9px 6px 5px;
		background: var(--scm-blanco);
		color: var(--scm-texto);
		border: 1px solid var(--scm-borde);
		border-radius: var(--sils-radio, 4px);
		transition: border-color .15s ease, box-shadow .15s ease;
	}
	.sils-cfm button.sils-cfm__elegir[aria-pressed="true"] { border-color: var(--cfm-borde-sel); box-shadow: var(--cfm-sombra-sel); }
	.sils-cfm__elegir .sils-compo__mini { display: block; padding: 2px var(--sils-esp-3xs, 4px) var(--sils-esp-3xs, 4px) 2px; }
	.sils-cfm__nombre { font-size: var(--sils-txt-4xs, 11px); font-weight: 500; letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
	.sils-cfm__pieza .sils-compo__mini { transition: opacity .25s ease, filter .25s ease; }
	.sils-cfm__pieza.es-fuera .sils-compo__mini { opacity: .3; filter: grayscale(1); }
	.sils-cfm__pieza.es-fuera .sils-cfm__nombre { color: var(--scm-gris); }

	/* Casilla ✓ dentro de la caja, en su esquina: cuadrado negro sólido con la marca
	   blanca; vacía, con borde fino, si la obra está fuera. El botón es más grande que la
	   casilla, para que se acierte con el dedo. */
	.sils-cfm button.sils-cfm__marca,
	.sils-cfm button.sils-cfm__marca:is(:hover, :focus, :active) {
		position: absolute;
		top: 0;
		right: 0;
		width: 30px;
		height: 30px;
		display: grid;
		place-items: center;
		padding: 0;
		border: 0;
		border-radius: var(--sils-radio, 4px);
		background: none;
		color: var(--scm-blanco);
	}
	.sils-cfm__casilla {
		display: grid;
		place-items: center;
		width: 16px;
		height: 16px;
		border-radius: 3px;
		background: var(--scm-negro);
		border: 1px solid var(--scm-negro);
		transition: background-color .15s ease, border-color .15s ease;
	}
	.sils-cfm__casilla svg { width: 11px; height: 11px; transition: opacity .15s ease; }
	.sils-cfm .es-fuera .sils-cfm__casilla { background: var(--scm-blanco); border-color: var(--scm-gris); }
	.sils-cfm .es-fuera .sils-cfm__casilla svg { opacity: 0; }

	/* «Indicaciones», al final de la columna. */
	.sils-cfm .sils-cfm__pieza--nota button.sils-cfm__elegir { padding: 10px var(--sils-esp-3xs, 4px) var(--sils-esp-2xs, 8px); color: var(--scm-gris); }
	.sils-cfm__mas { font-size: var(--sils-txt-l, 20px); font-weight: 300; line-height: 1; color: var(--scm-texto); }
	.sils-cfm__pieza--nota .sils-cfm__nombre { white-space: normal; text-align: center; }

	/* Alto de cada miniatura. Más fuerte que la regla de escritorio
	   (.sils-cf__marco img.sils-marco__obra: alto automático y topes de 158 px). */
	.sils-cfm .sils-cfm__mini--fila .sils-cf__marco img.sils-marco__obra { width: auto; height: 46px; max-width: 58px; max-height: none; object-fit: contain; }
	.sils-cfm .sils-cfm__mini--grande .sils-cf__marco img.sils-marco__obra { width: auto; height: 118px; max-width: 250px; max-height: none; object-fit: contain; }
	.sils-cfm .sils-cfm__mini--todo .sils-cf__marco img.sils-marco__obra { width: auto; height: 50px; max-width: none; max-height: none; }

	/* ── La obra elegida ───────────────────────────────────────────────────── */
	.sils-cfm__obra { display: flex; flex-direction: column; min-width: 0; }
	.sils-cfm__escenario {
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 10px var(--sils-esp-2xs, 8px) 10px;
		background: var(--cfm-reposo);
		border-radius: var(--sils-radio, 4px);
	}
	.sils-cfm__escenario .sils-compo__mini { display: block; padding: 3px 6px 7px 3px; }
	.sils-cfm__obra.es-fuera .sils-cfm__escenario .sils-compo__mini { opacity: .3; filter: grayscale(1); }
	.sils-cfm__datos { display: flex; flex-direction: column; gap: 2px; min-width: 0; margin-top: 6px; }
	.sils-cfm__titulo-fila { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sils-esp-2xs, 8px); }
	.sils-cfm a.sils-cfm__titulo { font-size: var(--sils-txt-2xs, 14px); font-weight: 500; letter-spacing: .04em; text-transform: uppercase; color: var(--scm-negro); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
	.sils-cfm__acabado { flex: 0 0 auto; font-size: var(--sils-txt-4xs, 11px); letter-spacing: .12em; text-transform: uppercase; color: var(--scm-gris); }
	.sils-cfm__resumen { font-size: var(--sils-txt-3xs, 12px); color: var(--scm-gris); }
	.sils-cfm__compra { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin-top: 6px; }

	/* Compra suelta: el precio y la bolsa en un botón negro. */
	.sils-cfm button.sils-cfm__suelta,
	.sils-cfm button.sils-cfm__suelta:is(:hover, :focus, :active) {
		display: inline-flex;
		align-items: center;
		gap: 10px;
		min-height: 34px;
		padding: 0 var(--sils-esp-xs, 12px);
		border: 0;
		border-radius: var(--sils-radio, 4px);
		background: var(--scm-negro);
		color: var(--scm-blanco);
		font-size: var(--sils-txt-3xs, 12px);
		font-weight: 500;
		white-space: nowrap;
		transition: background-color .2s ease;
	}
	.sils-cfm button.sils-cfm__suelta:hover { background: color-mix(in srgb, var(--scm-negro) 86%, var(--scm-blanco)); }
	.sils-cfm button.sils-cfm__suelta svg { width: 15px; height: 15px; }
	.sils-cfm__raya { width: 1px; align-self: stretch; margin: var(--sils-esp-2xs, 8px) 0; background: color-mix(in srgb, var(--scm-blanco) 50%, transparent); }

	.sils-cfm button.sils-cfm__accion,
	.sils-cfm button.sils-cfm__accion:is(:hover, :focus, :active) {
		padding: 0;
		border: 0;
		border-radius: 0;
		background: none;
		color: var(--scm-gris);
		font-size: var(--sils-txt-3xs, 12px);
		text-decoration: underline;
		text-underline-offset: 3px;
		white-space: nowrap;
	}
	.sils-cfm button.sils-cfm__accion--fuerte,
	.sils-cfm button.sils-cfm__accion--fuerte:is(:hover, :focus, :active) { color: var(--scm-texto); font-weight: 500; }
	.sils-cfm__fuera { display: inline-flex; align-items: center; min-height: 34px; font-size: var(--sils-txt-3xs, 12px); color: var(--scm-gris); }

	/* Opciones en filas: el campo y lo elegido a la izquierda, la tira a la derecha. */
	.sils-cfm__opciones { margin-top: var(--sils-esp-2xs, 8px); border-top: 1px solid var(--scm-borde); }
	.sils-cfm__opcion { display: grid; grid-template-columns: 64px minmax(0, 1fr); align-items: center; gap: 6px; padding: 3px 0; border-bottom: 1px solid var(--scm-borde); }
	.sils-cfm__opcion:last-child { border-bottom: 0; }
	.sils-cfm__cap .sils-cap { display: block; font-size: var(--sils-txt-4xs, 11px); }
	.sils-cfm__valor { display: block; margin-top: 2px; font-size: var(--sils-txt-4xs, 11px); font-weight: 500; line-height: 1.25; color: var(--scm-texto); }
	.sils-cfm .sils-sel { margin: 0; }
	.sils-cfm .sils-cfm__tira {
		flex-wrap: nowrap;
		gap: 6px;
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scrollbar-width: none;
		padding: 2px;
	}
	.sils-cfm .sils-cfm__tira::-webkit-scrollbar { display: none; }
	.sils-cfm .sils-cfm__tira > * { flex: 0 0 auto; }
	.sils-cfm .sils-sel button.sils-medida { min-width: 56px; padding: 10px var(--sils-esp-2xs, 8px); }
	.sils-cfm button.sils-cfm__muestra,
	.sils-cfm button.sils-cfm__muestra:is(:hover, :focus, :active) {
		width: 36px;
		height: 36px;
		display: grid;
		place-items: center;
		padding: 0;
		background: var(--cfm-reposo);
		border: 1px solid transparent;
		border-radius: var(--sils-radio, 4px);
		transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
	}
	.sils-cfm button.sils-cfm__muestra[aria-pressed="true"] { background: var(--scm-blanco); border-color: var(--cfm-borde-sel); box-shadow: var(--cfm-sombra-sel); }
	.sils-cfm button.sils-cfm__muestra img { width: 30px; height: 30px; object-fit: cover; border-radius: 2px; }
	.sils-cfm__color { width: 22px; height: 22px; border: 1px solid color-mix(in srgb, var(--scm-negro) 10%, transparent); border-radius: 2px; }
	.sils-cfm__muestra-txt { font-size: var(--sils-txt-4xs, 11px); }
	.sils-cfm .sils-cfm__tira button:disabled { opacity: .4; cursor: default; }

	/* ── Personalización ───────────────────────────────────────────────────── */
	.sils-cfm__perso { display: flex; flex-direction: column; min-width: 0; }
	.sils-cfm .sils-cfm__nota-ayuda { margin: var(--sils-esp-3xs, 4px) 0 var(--sils-esp-2xs, 8px); font-size: var(--sils-txt-3xs, 12px); line-height: 1.35; color: var(--scm-gris); }
	.sils-cfm textarea.sils-cfm__nota {
		display: block;
		width: 100%;
		height: 140px;
		min-height: 0;
		margin: 0;
		padding: var(--sils-esp-2xs, 8px) 10px;
		border: 1px solid var(--scm-borde);
		border-radius: var(--sils-radio, 4px);
		background: var(--scm-blanco);
		color: var(--scm-texto);
		box-shadow: none;
		font: inherit;
		font-size: var(--sils-txt-s, 16px); /* con menos, el iPhone amplía la página al escribir */
		line-height: 1.35;
		resize: none;
		transition: border-color .2s ease;
	}
	.sils-cfm textarea.sils-cfm__nota:focus { outline: none; border-color: var(--scm-negro); }

	/* ── Comprar todo: la composición tal cual ─────────────────────────────── */
	.sils-cfm__todo .sils-cf__incluye { display: flex; flex-wrap: wrap; gap: var(--sils-esp-3xs, 4px) 10px; align-items: baseline; margin: 0; padding: 12px var(--sils-margen-seguridad, 16px); background: var(--cfm-reposo); border-bottom: 1px solid var(--scm-borde); font-size: var(--sils-txt-3xs, 12px); }
	.sils-cfm__lista { margin: 0; padding: 0; list-style: none; }
	.sils-cfm__linea { display: flex; align-items: center; gap: var(--sils-esp-xs, 12px); padding: 10px var(--sils-margen-seguridad, 16px); border-bottom: 1px solid var(--scm-borde); }
	.sils-cfm__linea .sils-compo__mini { display: block; padding: 3px 5px 5px 3px; }
	.sils-cfm__linea-datos { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
	.sils-cfm__linea .sils-cfm__titulo { font-size: var(--sils-txt-3xs, 12px); }
	.sils-cfm__linea .sils-cfm__resumen { font-size: var(--sils-txt-4xs, 11px); }
	.sils-cfm__linea-precio { font-size: var(--sils-txt-3xs, 12px); white-space: nowrap; }

	/* Barra fija: el botón con la bolsa. */
	.sils-cfm__barra button.sils-anadir { display: inline-flex; align-items: center; gap: var(--sils-esp-2xs, 8px); }
	.sils-cfm__barra button.sils-anadir svg { width: 15px; height: 15px; flex: 0 0 auto; }

	/* La personalización del resumen de abajo ya está en la columna de obras. */
	body.sils-cfm-activo .sils-cf__resumen .sils-res__perso { display: none; }
}

@keyframes sils-cfm-entra {
	from { opacity: 0; transform: translateY(4px); }
	to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
	.sils-cfm__vista.es-entrando { animation: none; }
	.sils-cfm button.sils-cfm__elegir,
	.sils-cfm__casilla { transition: none; }
}