/*!
 * Sils Addons — Formato por medida (ver includes/Front/Formato.php y formato.js).
 *
 * Colores con las variables del sistema (--sils-*), con su valor de respaldo.
 *
 * @package SilsAddons
 */

/* La obra toma la forma de la medida. En una medida de su formato (hasta un 6 % de
   diferencia) la cubre y se recorta lo poco que sobra, centrado; con «Ajustar», la llena
   entera, estirada o encogida (--sils-formato-ajuste: fill); con «Centrar», entera y sin
   deformar (contain), y lo que sobra, en blanco. Las variables y la clase las pone
   formato.js en la galería; sin ellas, la imagen conserva su formato. Las fotos de
   ambiente no cambian nunca. */
.sils-galeria__marco:not(.es-ambiente) img.sils-galeria__obra[data-sils-formato] {
	aspect-ratio: var(--sils-formato, auto);
	object-fit: var(--sils-formato-ajuste, cover);
	object-position: 50% 50%;
}
.sils-galeria.es-centrada .sils-galeria__marco:not(.es-ambiente) img.sils-galeria__obra[data-sils-formato] {
	background-color: var(--sils-blanco, #FFFFFF);
}

/* ── Aviso «Vista aproximada», en el configurador ───────────────────────
   Una fila con filete a la izquierda (sin caja redondeada), bajo la adaptación. */
.sils-sel p.sils-formato-aviso {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 10px;
	margin: 14px 0 0;
	padding: var(--sils-esp-2xs, 8px) var(--sils-esp-xs, 12px);
	border-left: 2px solid var(--sils-texto);
	background: var(--sils-reposo);
	color: var(--sils-texto);
	font-size: var(--sils-txt-3xs, 12px);
	line-height: 1.3;
	animation: sils-formato-entra .3s ease;
}
.sils-formato-aviso__texto { font-weight: 500; letter-spacing: .02em; }
/* El kit y el tema pintan cualquier <button>: se fija todo, con el foco igual que el reposo. */
.sils-sel p.sils-formato-aviso button.sils-formato-aviso__ir,
.sils-sel p.sils-formato-aviso button.sils-formato-aviso__ir:is(:hover, :focus, :active) {
	margin: 0 0 0 auto;
	padding: 0;
	min-height: 0;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	color: var(--sils-texto);
	font: inherit;
	font-weight: 500;
	letter-spacing: inherit;
	text-transform: none;
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}
.sils-sel p.sils-formato-aviso button.sils-formato-aviso__ir:hover { color: var(--sils-gris); }
.sils-sel p.sils-formato-aviso button.sils-formato-aviso__ir:focus-visible { outline: 2px solid var(--sils-texto); outline-offset: 2px; }
@keyframes sils-formato-entra { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
	.sils-sel p.sils-formato-aviso { animation: none; }
}

/* ── Orientación (medida no cuadrada) y adaptación (medida fuera del formato) ── */
.sils-sel .sils-orientacion,
.sils-sel .sils-adaptacion { margin-top: var(--sils-esp-s, 16px); }