/**
 * Configurador de opciones en la ficha de producto de WooCommerce.
 *
 * Todo cuelga de `.sims-cfg` y cada regla repite el prefijo a propósito: los
 * temas estilizan exactamente lo que usamos —inputs, labels, legends— y en un
 * empate de especificidad gana la hoja que carga después, que es la del tema.
 * Con Divi se pagó esa lección en el sprint anterior.
 *
 * Colores: `--sims-cfg-primary` y `--sims-cfg-accent` los inyecta el plugin
 * desde la apariencia configurada, así la web y la app llevan la misma marca.
 * Sin fuentes propias: hereda la del tema, que es lo que el cliente eligió.
 */

:root {
	--sims-cfg-primary: #0a7a4b;
	--sims-cfg-accent: #e1a93b;
	--sims-cfg-text: #1f1d1a;
	--sims-cfg-muted: #6b6560;
	--sims-cfg-border: #e3ded6;
	--sims-cfg-surface: #ffffff;
	--sims-cfg-danger: #c0392b;
	--sims-cfg-radius: 12px;
}

.sims-cfg,
.sims-cfg * {
	box-sizing: border-box;
}

.sims-cfg {
	display: block;
	margin: 0 0 20px;
	color: var(--sims-cfg-text);
	line-height: 1.4;
}

.sims-cfg .sims-cfg__data {
	display: none;
}

.sims-cfg .sims-cfg__heading {
	margin: 0 0 12px;
	padding: 0;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--sims-cfg-text);
}

.sims-cfg .sims-cfg__closed {
	margin: 0 0 14px;
	padding: 12px 14px;
	border-radius: var(--sims-cfg-radius);
	background: #fdecec;
	color: #8a1f14;
	font-size: 14px;
	font-weight: 600;
}

/* ---------------------------------------------------------------- *
 * Grupo
 * ---------------------------------------------------------------- */

.sims-cfg .sims-cfg__group {
	margin: 0 0 12px;
	padding: 12px 14px 10px;
	min-width: 0;
	border: 1px solid var(--sims-cfg-border);
	border-radius: var(--sims-cfg-radius);
	background: var(--sims-cfg-surface);
}

.sims-cfg .sims-cfg__group--incomplete {
	border-color: rgba(192, 57, 43, 0.35);
}

/* `float: left` saca al legend de su papel nativo de «título sobre el borde»
   y lo deja como una cabecera normal dentro de la tarjeta, que es como la app
   dibuja el grupo. Sin esto el título parte el marco y el chip flota fuera. */
.sims-cfg .sims-cfg__legend {
	display: flex;
	align-items: center;
	gap: 10px;
	float: left;
	width: 100%;
	margin: 0 0 4px;
	padding: 0;
	font-size: inherit;
	cursor: default;
	user-select: none;
}

.sims-cfg .sims-cfg__group::after {
	content: "";
	display: block;
	clear: both;
}

.sims-cfg .sims-cfg__desc,
.sims-cfg .sims-cfg__options,
.sims-cfg .sims-cfg__hint,
.sims-cfg .sims-cfg__summary {
	clear: both;
}

.sims-cfg .sims-cfg__legend[role="button"] {
	cursor: pointer;
}

.sims-cfg .sims-cfg__legend:focus-visible {
	outline: 2px solid var(--sims-cfg-primary);
	outline-offset: 2px;
	border-radius: 6px;
}

.sims-cfg .sims-cfg__legend-text {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.sims-cfg .sims-cfg__title {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--sims-cfg-text);
}

.sims-cfg .sims-cfg__rule,
.sims-cfg .sims-cfg__desc {
	font-size: 13px;
	color: var(--sims-cfg-muted);
}

.sims-cfg .sims-cfg__desc {
	margin: 6px 0 4px;
}

/* Chip de estado: mismo vocabulario que la app. */
.sims-cfg .sims-cfg__chip {
	flex-shrink: 0;
	padding: 4px 10px;
	border-radius: 999px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	line-height: 1.2;
	white-space: nowrap;
}

.sims-cfg .sims-cfg__chip--required {
	background: #fdecec;
	color: #8a1f14;
}

.sims-cfg .sims-cfg__chip--done {
	background: #e7f3ec; /* respaldo para navegadores sin color-mix */
	background: color-mix(in srgb, var(--sims-cfg-primary) 14%, white);
	color: var(--sims-cfg-primary);
}

.sims-cfg .sims-cfg__chip--optional {
	background: #f1efeb;
	color: var(--sims-cfg-muted);
}

@keyframes sims-cfg-shake {
	10%, 90% { transform: translateX(-1px); }
	20%, 80% { transform: translateX(2px); }
	30%, 50%, 70% { transform: translateX(-4px); }
	40%, 60% { transform: translateX(4px); }
}

.sims-cfg .sims-cfg__chip--shake {
	animation: sims-cfg-shake 0.5s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}

/* ---------------------------------------------------------------- *
 * Opciones
 * ---------------------------------------------------------------- */

.sims-cfg .sims-cfg__options {
	display: flex;
	flex-direction: column;
	margin-top: 8px;
}

.sims-cfg .sims-cfg__option {
	display: flex;
	align-items: center;
	gap: 12px;
	min-height: 44px;
	margin: 0;
	padding: 6px 4px;
	border-top: 1px solid var(--sims-cfg-border);
	font-size: 15px;
	font-weight: 400;
	color: var(--sims-cfg-text);
	cursor: pointer;
}

.sims-cfg .sims-cfg__option:first-child {
	border-top: 0;
}

/* Inputs nativos, visibles y del tamaño de un dedo. Varios temas los
   esconden o los estiran; aquí se reafirma todo lo que un tema pueda tocar. */
.sims-cfg .sims-cfg__option .sims-cfg__input {
	appearance: auto;
	-webkit-appearance: auto;
	position: static;
	display: inline-block;
	width: 20px;
	height: 20px;
	margin: 0;
	padding: 0;
	flex-shrink: 0;
	opacity: 1;
	visibility: visible;
	accent-color: var(--sims-cfg-primary);
	cursor: pointer;
}

.sims-cfg .sims-cfg__option .sims-cfg__input:focus-visible {
	outline: 2px solid var(--sims-cfg-primary);
	outline-offset: 2px;
}

.sims-cfg .sims-cfg__option-label {
	flex: 1;
	min-width: 0;
}

.sims-cfg .sims-cfg__option-price {
	flex-shrink: 0;
	font-size: 14px;
	font-weight: 600;
	color: var(--sims-cfg-primary);
	white-space: nowrap;
}

.sims-cfg .sims-cfg__option--off,
.sims-cfg .sims-cfg__option--blocked {
	color: var(--sims-cfg-muted);
	cursor: not-allowed;
}

.sims-cfg .sims-cfg__option--off .sims-cfg__option-label {
	text-decoration: line-through;
}

.sims-cfg .sims-cfg__option--off .sims-cfg__option-price {
	color: var(--sims-cfg-danger);
	font-weight: 700;
	font-size: 12px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.sims-cfg .sims-cfg__hint {
	margin: 6px 0 0;
	font-size: 13px;
	color: var(--sims-cfg-muted);
}

/* Plegado: el resumen ocupa el lugar de las opciones. */
.sims-cfg .sims-cfg__summary {
	display: none;
	margin: 6px 0 0;
	font-size: 14px;
	color: var(--sims-cfg-muted);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.sims-cfg .sims-cfg__group--collapsed .sims-cfg__options,
.sims-cfg .sims-cfg__group--collapsed .sims-cfg__desc,
.sims-cfg .sims-cfg__group--collapsed .sims-cfg__hint {
	display: none;
}

.sims-cfg .sims-cfg__group--collapsed .sims-cfg__summary {
	display: block;
}

/* ---------------------------------------------------------------- *
 * Nota, total y motivo del bloqueo
 * ---------------------------------------------------------------- */

.sims-cfg .sims-cfg__note {
	position: relative;
	margin: 0 0 14px;
}

.sims-cfg .sims-cfg__note-label {
	display: block;
	margin: 0 0 6px;
	font-size: 13px;
	font-weight: 700;
	color: var(--sims-cfg-text);
}

.sims-cfg .sims-cfg__note-field {
	display: block;
	width: 100%;
	min-height: 64px;
	margin: 0;
	padding: 10px 12px;
	border: 1px solid var(--sims-cfg-border);
	border-radius: var(--sims-cfg-radius);
	background: var(--sims-cfg-surface);
	font: inherit;
	font-size: 15px;
	color: var(--sims-cfg-text);
	resize: vertical;
}

.sims-cfg .sims-cfg__note-field:focus {
	outline: 2px solid var(--sims-cfg-primary);
	outline-offset: 0;
	border-color: var(--sims-cfg-primary);
}

.sims-cfg .sims-cfg__note-counter {
	display: block;
	margin-top: 4px;
	text-align: right;
	font-size: 12px;
	color: var(--sims-cfg-muted);
}

.sims-cfg .sims-cfg__total {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	margin: 0 0 8px;
	padding: 12px 14px;
	border-radius: var(--sims-cfg-radius);
	background: #f2f8f4;
	background: color-mix(in srgb, var(--sims-cfg-primary) 8%, white);
}

.sims-cfg .sims-cfg__total-label {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--sims-cfg-muted);
}

.sims-cfg .sims-cfg__total-value {
	font-size: 22px;
	font-weight: 700;
	color: var(--sims-cfg-primary);
}

.sims-cfg .sims-cfg__total-value .woocommerce-Price-amount {
	font-size: inherit;
	font-weight: inherit;
	color: inherit;
}

.sims-cfg .sims-cfg__reason {
	margin: 0 0 10px;
	font-size: 13px;
	font-weight: 600;
	color: var(--sims-cfg-danger);
}

/* El botón de WooCommerce sigue siendo el del tema; solo se atenúa mientras
   falte algo obligatorio. No se deshabilita: un botón deshabilitado no puede
   explicar qué falta, y este sí (sacude el grupo y lo enfoca). */
form.cart .single_add_to_cart_button.sims-cfg-blocked {
	opacity: 0.55;
	cursor: not-allowed;
}

/* Con configurador, el botón va a ancho completo debajo de la cantidad, como
   el CTA de la app. No es solo estética: Divi (y no es el único) agranda el
   botón al pasar el ratón —más relleno y un icono—, y con el total dentro del
   texto («Agregar al carrito · L350.00») ya no cabía junto al selector de
   cantidad: bajaba de línea, el cursor dejaba de estar encima, volvía a subir,
   y así en bucle. El botón huía del ratón y no se podía pulsar. A ancho
   completo el crecimiento del hover queda dentro de su propia caja.
   La clase la pone el JS; `:has()` cubre el caso sin JavaScript. */
form.cart.sims-cfg-form .single_add_to_cart_button,
form.cart:has(.sims-cfg) .single_add_to_cart_button {
	display: block;
	float: none;
	clear: both;
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
	margin: 12px 0 0;
	text-align: center;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

form.cart.sims-cfg-form .quantity,
form.cart:has(.sims-cfg) .quantity {
	float: none;
	display: inline-flex;
	margin: 0;
}

@media (prefers-reduced-motion: reduce) {
	.sims-cfg .sims-cfg__chip--shake {
		animation: none;
	}
}