/* ============================================================
   Sigloss Envíos Cuba — frontend
   Paleta heredable: si el tema define las variables --sig-*,
   se usan esas. Si no, caen a los valores de marca.
   ============================================================ */

.sec-selector,
.sec-barra,
.sec-tabla-wrap,
.sec-modal {
	--sec-oro:        var(--sig-oro, #D4A017);
	--sec-oro-claro:  var(--sig-oro-claro, #F2CE6B);
	--sec-oro-hondo:  var(--sig-oro-hondo, #8F6B0A);
	--sec-grafito:    var(--sig-grafito, #23262B);
	--sec-gris:       var(--sig-gris, #949494);
	--sec-borde:      var(--sig-gris-suave, #E7E4DE);
	--sec-crema:      var(--sig-crema, #FAF8F3);
	--sec-verde:      var(--sig-verde, #2E9E5B);
	--sec-rojo:       var(--sig-mandarina, #EF5B34);
	--sec-radio:      var(--sig-radio, 14px);
	--sec-radio-s:    var(--sig-radio-s, 9px);
	box-sizing: border-box;
}

.sec-selector *,
.sec-barra *,
.sec-modal * {
	box-sizing: border-box;
}

/* ---------------- Selector ---------------- */

.sec-selector {
	background: #fff;
	border: 1px solid var(--sec-borde);
	border-radius: var(--sec-radio);
	padding: 28px;
	max-width: 480px;
	box-shadow: 0 1px 2px rgba(20,22,26,.04), 0 12px 32px -18px rgba(20,22,26,.22);
	color: var(--sec-grafito);
	line-height: 1.55;
}

.sec-selector__cabecera {
	margin-bottom: 22px;
}

.sec-selector__titulo {
	margin: 0 0 6px;
	font-size: 1.5rem;
	line-height: 1.2;
	color: var(--sec-grafito);
	font-weight: 600;
}

.sec-selector__sub {
	margin: 0;
	font-size: .92rem;
	color: #6B7078;
	line-height: 1.5;
}

.sec-campo {
	margin-bottom: 16px;
}

.sec-campo__label {
	display: block;
	font-size: .72rem;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: #7A7F87;
	margin-bottom: 7px;
}

.sec-campo__control {
	position: relative;
}

.sec-selector select {
	width: 100%;
	padding: 13px 40px 13px 14px;
	border: 1px solid var(--sec-borde);
	border-radius: var(--sec-radio-s);
	background-color: #fff;
	font: inherit;
	font-size: 1rem;
	line-height: 1.3;
	color: var(--sec-grafito);
	appearance: none;
	-webkit-appearance: none;
	cursor: pointer;
	transition: border-color .15s ease;
}

.sec-campo__control::after {
	content: "";
	position: absolute;
	right: 16px;
	top: 50%;
	width: 8px;
	height: 8px;
	border-right: 2px solid var(--sec-gris);
	border-bottom: 2px solid var(--sec-gris);
	transform: translateY(-70%) rotate(45deg);
	pointer-events: none;
}

.sec-selector select:hover {
	border-color: var(--sec-oro);
}

.sec-selector select:focus {
	outline: 2px solid var(--sec-oro);
	outline-offset: 1px;
	border-color: var(--sec-oro);
}

.sec-selector select:disabled {
	background-color: #F4F2ED;
	color: #A9AEB5;
	cursor: not-allowed;
}

.sec-selector select:disabled + .sec-campo__control::after {
	opacity: .4;
}

/* ---------------- Resultado ---------------- */

.sec-selector__resultado {
	margin: 20px 0 4px;
	padding-top: 18px;
	border-top: 1px dashed var(--sec-borde);
}

.sec-almacen {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 13px 14px;
	border-radius: var(--sec-radio-s);
	background: rgba(212,160,23,.10);
	border: 1px solid rgba(212,160,23,.26);
}

.sec-almacen__texto strong {
	display: block;
	font-size: .95rem;
	line-height: 1.3;
}

.sec-almacen__texto small {
	display: block;
	color: #6B7078;
	font-size: .82rem;
	margin-top: 2px;
}

.sec-cod {
	display: inline-block;
	font-family: 'IBM Plex Mono', ui-monospace, Menlo, Consolas, monospace;
	font-size: .74rem;
	font-weight: 600;
	background: var(--sec-grafito);
	color: var(--sec-oro-claro);
	padding: 5px 9px;
	border-radius: 6px;
	white-space: nowrap;
	letter-spacing: .02em;
}

.sec-datos {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
	margin-top: 12px;
}

.sec-dato {
	background: var(--sec-crema);
	border-radius: var(--sec-radio-s);
	padding: 11px 13px;
}

.sec-dato span {
	display: block;
	font-size: .66rem;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: #7A7F87;
	margin-bottom: 3px;
}

.sec-dato b {
	font-size: 1.1rem;
	font-weight: 600;
	line-height: 1.2;
}

/* ---------------- Botón ---------------- */

.sec-boton {
	display: block;
	width: 100%;
	margin-top: 20px;
	padding: 15px 24px;
	border: 0;
	border-radius: 30px;
	background: var(--sec-oro);
	color: #14161A;
	font: inherit;
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.2;
	cursor: pointer;
	transition: background-color .18s ease, opacity .18s ease;
}

.sec-boton:hover:not(:disabled) {
	background: var(--sec-oro-claro);
}

.sec-boton:disabled {
	opacity: .5;
	cursor: not-allowed;
}

.sec-selector__nota {
	margin: 16px 0 0;
	font-size: .78rem;
	color: #8A9098;
	line-height: 1.5;
}

.sec-aviso-error {
	margin-top: 14px;
	padding: 11px 13px;
	border-radius: var(--sec-radio-s);
	background: rgba(239,91,52,.09);
	border: 1px solid rgba(239,91,52,.25);
	color: #B03A19;
	font-size: .88rem;
}

/* ---------------- Variante compacta (cabecera / barra lateral) ---------------- */

.sec-selector--compacto {
	max-width: 100%;
	padding: 18px;
	box-shadow: none;
}

.sec-selector--compacto .sec-selector__titulo { font-size: 1.15rem; }
.sec-selector--compacto .sec-selector__campos {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
}
.sec-selector--compacto .sec-campo { margin-bottom: 0; }
.sec-selector--compacto .sec-boton { margin-top: 14px; }

/* ---------------- Barra de destino ---------------- */

.sec-barra {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
	padding: 12px 18px;
	background: var(--sec-crema);
	border: 1px solid var(--sec-borde);
	border-radius: var(--sec-radio-s);
	font-size: .92rem;
	color: var(--sec-grafito);
}

.sec-barra--vacia {
	background: rgba(212,160,23,.09);
	border-color: rgba(212,160,23,.3);
}

.sec-barra__icono { font-size: 1.05rem; line-height: 1; }
.sec-barra__texto { flex: 1 1 auto; }
.sec-barra__texto strong { font-weight: 600; }

.sec-barra__meta {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin-left: 10px;
	font-size: .82rem;
	color: #6B7078;
}

.sec-barra__boton {
	border: 1px solid var(--sec-grafito);
	background: transparent;
	color: var(--sec-grafito);
	border-radius: 30px;
	padding: 7px 16px;
	font: inherit;
	font-size: .84rem;
	font-weight: 600;
	cursor: pointer;
	transition: background-color .15s ease, color .15s ease;
}

.sec-barra__boton:hover {
	background: var(--sec-grafito);
	color: #fff;
}

/* ---------------- Modal ---------------- */

.sec-modal {
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	background: rgba(20,22,26,.55);
	backdrop-filter: blur(2px);
}

.sec-modal[hidden] { display: none; }

.sec-modal__caja {
	position: relative;
	width: 100%;
	max-width: 460px;
	max-height: 90vh;
	overflow-y: auto;
	animation: sec-aparecer .22s ease;
}

.sec-modal__cerrar {
	position: absolute;
	top: 14px;
	right: 14px;
	z-index: 2;
	width: 32px;
	height: 32px;
	border: 0;
	border-radius: 50%;
	background: rgba(0,0,0,.06);
	color: var(--sec-grafito);
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
}

.sec-modal__cerrar:hover { background: rgba(0,0,0,.12); }

@keyframes sec-aparecer {
	from { opacity: 0; transform: translateY(12px); }
	to   { opacity: 1; transform: none; }
}

/* ---------------- Ficha de producto ---------------- */

.sec-disponible,
.sec-no-disponible {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 9px 13px;
	border-radius: var(--sec-radio-s);
	font-size: .88rem;
	margin: 12px 0;
}

.sec-disponible {
	background: rgba(46,158,91,.09);
	color: #1E6B3D;
	border: 1px solid rgba(46,158,91,.22);
}

.sec-no-disponible {
	background: rgba(239,91,52,.09);
	color: #B03A19;
	border: 1px solid rgba(239,91,52,.25);
}

/* ---------------- Tabla de tarifas ---------------- */

.sec-tabla-wrap { overflow-x: auto; }

.sec-tabla {
	width: 100%;
	border-collapse: collapse;
	font-size: .94rem;
}

.sec-tabla th {
	text-align: left;
	background: var(--sec-crema);
	padding: 12px 14px;
	font-size: .74rem;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: #5B6068;
	border-bottom: 1px solid var(--sec-borde);
}

.sec-tabla td {
	padding: 12px 14px;
	border-bottom: 1px solid var(--sec-borde);
	vertical-align: middle;
}

.sec-tabla tbody tr:hover { background: rgba(212,160,23,.05); }

/* ---------------- Carrito y checkout ---------------- */

.sec-fila-almacen .sec-cod { margin-right: 8px; }
.sec-fila-almacen small { display: block; color: #6B7078; margin-top: 3px; }

/* ---------------- Móvil ---------------- */

@media (max-width: 600px) {
	.sec-selector { padding: 20px; }
	.sec-selector__titulo { font-size: 1.3rem; }
	.sec-selector--compacto .sec-selector__campos { grid-template-columns: 1fr; }
	.sec-datos { grid-template-columns: 1fr; }
	.sec-barra { font-size: .86rem; }
	.sec-barra__meta { margin-left: 0; display: block; margin-top: 4px; }

	.sec-tabla thead { display: none; }
	.sec-tabla, .sec-tabla tbody, .sec-tabla tr, .sec-tabla td { display: block; width: 100%; }
	.sec-tabla tr {
		border: 1px solid var(--sec-borde);
		border-radius: var(--sec-radio-s);
		margin-bottom: 12px;
		padding: 6px 0;
	}
	.sec-tabla td {
		border: 0;
		display: flex;
		justify-content: space-between;
		gap: 14px;
		padding: 7px 14px;
	}
	.sec-tabla td::before {
		content: attr(data-th);
		font-size: .72rem;
		text-transform: uppercase;
		letter-spacing: .06em;
		color: #7A7F87;
		font-weight: 600;
	}
}

@media (prefers-reduced-motion: reduce) {
	.sec-modal__caja { animation: none; }
	.sec-boton, .sec-barra__boton, .sec-selector select { transition: none; }
}

/* ============================================================
   PUERTA DE ENTRADA — ventana obligatoria
   ============================================================ */

body.sec-bloqueado {
	overflow: hidden;
}

.sec-modal--obligatorio {
	background: rgba(20, 22, 26, .78);
	backdrop-filter: blur(4px);
}

.sec-modal--obligatorio .sec-modal__caja {
	max-width: 480px;
}

.sec-puerta__intro {
	text-align: center;
	color: #fff;
	margin-bottom: 18px;
}

.sec-puerta__icono {
	display: block;
	font-size: 1.7rem;
	line-height: 1;
	margin-bottom: 10px;
}

.sec-puerta__intro p {
	margin: 0 0 6px;
	font-family: 'Outfit', system-ui, sans-serif;
	font-size: 1.25rem;
	font-weight: 600;
	line-height: 1.3;
	color: #fff;
}

.sec-puerta__intro small {
	display: block;
	font-size: .88rem;
	line-height: 1.5;
	color: #C9CDD3;
	max-width: 40ch;
	margin: 0 auto;
}

.sec-puerta__salida {
	text-align: center;
	margin: 16px 0 0;
}

.sec-puerta__salida a {
	font-size: .86rem;
	color: #C9CDD3;
	text-decoration: none;
	border-bottom: 1px solid rgba(255, 255, 255, .3);
	padding-bottom: 2px;
}

.sec-puerta__salida a:hover {
	color: #F2CE6B;
	border-bottom-color: #F2CE6B;
}

@media (max-width: 600px) {
	.sec-puerta__intro p { font-size: 1.1rem; }
	.sec-modal--obligatorio { padding: 14px; }
}

/* ============================================================
   INSIGNIA FLOTANTE — destino actual
   ============================================================ */

.sec-insignia {
	position: fixed;
	z-index: 9998;
	max-width: calc(100vw - 32px);
	animation: sec-insignia-entra .35s ease .4s both;
}

.sec-insignia--abajo-izquierda { bottom: 20px; left: 20px; }
.sec-insignia--abajo-derecha   { bottom: 20px; right: 20px; }
.sec-insignia--arriba-derecha  { top: 96px;    right: 20px; }
.sec-insignia--arriba-izquierda{ top: 96px;    left: 20px; }

@keyframes sec-insignia-entra {
	from { opacity: 0; transform: translateY(14px); }
	to   { opacity: 1; transform: none; }
}

.sec-insignia__caja {
	display: flex;
	align-items: center;
	gap: 11px;
	padding: 10px 16px 10px 13px;
	border: 1px solid var(--sig-gris-suave, #E7E4DE);
	border-radius: 40px;
	background: #fff;
	box-shadow: 0 4px 10px rgba(20,22,26,.06), 0 14px 34px -16px rgba(20,22,26,.34);
	cursor: pointer;
	font: inherit;
	text-align: left;
	color: var(--sig-grafito, #23262B);
	transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}

.sec-insignia__caja:hover {
	border-color: var(--sig-oro, #D4A017);
	transform: translateY(-2px);
	box-shadow: 0 6px 14px rgba(20,22,26,.08), 0 18px 40px -18px rgba(20,22,26,.42);
}

.sec-insignia__caja:focus-visible {
	outline: 3px solid var(--sig-oro, #D4A017);
	outline-offset: 3px;
}

.sec-insignia__pin {
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	flex: none;
	border-radius: 50%;
	background: rgba(212,160,23,.14);
	color: var(--sig-oro-hondo, #8F6B0A);
}

.sec-insignia__pin svg { width: 18px; height: 18px; display: block; }

.sec-insignia__texto {
	display: flex;
	flex-direction: column;
	min-width: 0;
	line-height: 1.25;
}

.sec-insignia__texto small {
	font-size: .66rem;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: #8A9098;
	font-weight: 600;
}

.sec-insignia__texto strong {
	font-size: .93rem;
	font-weight: 600;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 21ch;
}

.sec-insignia__cod {
	font-family: 'IBM Plex Mono', ui-monospace, Menlo, Consolas, monospace;
	font-size: .68rem;
	font-weight: 600;
	background: var(--sig-grafito, #23262B);
	color: var(--sig-oro-claro, #F2CE6B);
	padding: 4px 8px;
	border-radius: 5px;
	flex: none;
}

.sec-insignia__cambiar {
	font-size: .8rem;
	font-weight: 600;
	color: var(--sig-oro-hondo, #8F6B0A);
	border-left: 1px solid var(--sig-gris-suave, #E7E4DE);
	padding-left: 12px;
	flex: none;
}

/* ---- Móvil: solo el pin y el lugar, sin adornos ---- */
@media (max-width: 640px) {
	.sec-insignia--abajo-izquierda,
	.sec-insignia--abajo-derecha { bottom: 14px; }
	.sec-insignia--abajo-izquierda { left: 14px; }
	.sec-insignia--abajo-derecha   { right: 14px; }
	.sec-insignia--arriba-derecha,
	.sec-insignia--arriba-izquierda { top: 76px; }

	.sec-insignia__caja { padding: 8px 14px 8px 10px; gap: 9px; }
	.sec-insignia__pin { width: 30px; height: 30px; }
	.sec-insignia__pin svg { width: 16px; height: 16px; }
	.sec-insignia__texto small { display: none; }
	.sec-insignia__texto strong { font-size: .86rem; max-width: 15ch; }
	.sec-insignia__cod,
	.sec-insignia__cambiar { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	.sec-insignia { animation: none; }
	.sec-insignia__caja { transition: none; }
	.sec-insignia__caja:hover { transform: none; }
}

/* Se aparta cuando la puerta de entrada está abierta */
body.sec-bloqueado .sec-insignia { display: none; }

/* ============================================================
   ARMADOR DE PEDIDOS
   ============================================================ */

.sec-armador {
	--sec-oro:       var(--sig-oro, #D4A017);
	--sec-oro-claro: var(--sig-oro-claro, #F2CE6B);
	--sec-oro-hondo: var(--sig-oro-hondo, #8F6B0A);
	--sec-grafito:   var(--sig-grafito, #23262B);
	--sec-turquesa:  var(--sig-turquesa-hondo, #0A6F69);
	--sec-borde:     var(--sig-gris-suave, #E7E4DE);
	--sec-crema:     var(--sig-crema, #FAF8F3);
	--sec-gris:      #6B7078;

	background: #fff;
	border: 1px solid var(--sec-borde);
	border-radius: 18px;
	padding: 28px;
	max-width: 520px;
	box-shadow: 0 1px 2px rgba(20,22,26,.04), 0 16px 40px -26px rgba(20,22,26,.3);
	color: var(--sec-grafito);
	line-height: 1.6;
}

.sec-armador * { box-sizing: border-box; }

/* ---- Disposición en dos columnas: formulario | resultado ---- */
.sec-armador--dos-col {
	max-width: 1080px;
	display: grid;
	grid-template-columns: minmax(0, 420px) minmax(0, 1fr);
	gap: 34px;
	align-items: start;
}

.sec-armador__col { min-width: 0; }

/* La columna del resultado se separa con una línea vertical suave */
.sec-armador--dos-col .sec-armador__col--res {
	border-left: 1px solid var(--sec-borde);
	padding-left: 34px;
}

/* En dos columnas, el resultado ya no lleva el borde superior punteado */
.sec-armador--dos-col .sec-armador__resultado {
	margin-top: 0;
	padding-top: 0;
	border-top: 0;
}

/* Estado vacío: mensaje mientras no se ha armado nada */
.sec-armador__vacio {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	min-height: 260px;
	padding: 24px;
	border: 1px dashed var(--sec-borde);
	border-radius: 14px;
	background: var(--sec-crema);
	color: var(--sec-gris);
}
.sec-armador__vacio-icono { font-size: 2.4rem; margin-bottom: 10px; opacity: .8; }
.sec-armador__vacio p { margin: 0; font-size: .92rem; max-width: 32ch; }

/* En una sola columna (móvil o cuando no hay --dos-col) el resultado
   vuelve a ir debajo con su separación de siempre. */
@media (max-width: 860px) {
	.sec-armador--dos-col {
		grid-template-columns: 1fr;
		gap: 0;
		max-width: 520px;
	}
	.sec-armador--dos-col .sec-armador__col--res {
		border-left: 0;
		padding-left: 0;
		margin-top: 22px;
		padding-top: 20px;
		border-top: 1px dashed var(--sec-borde);
	}
	.sec-armador__vacio { display: none; } /* en móvil no hace falta el placeholder */
}

.sec-armador__cab { margin-bottom: 20px; }

.sec-armador__cab h3 {
	margin: 0 0 6px;
	font-family: 'Outfit', system-ui, sans-serif;
	font-size: 1.45rem;
	font-weight: 600;
	letter-spacing: -.02em;
}

.sec-armador__cab p { margin: 0; font-size: .93rem; color: var(--sec-gris); }

/* ---- Destino / aviso ---- */

.sec-armador__destino {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 11px 14px;
	margin-bottom: 18px;
	border-radius: 10px;
	background: rgba(212,160,23,.10);
	border: 1px solid rgba(212,160,23,.26);
	font-size: .9rem;
}

.sec-armador__aviso {
	padding: 14px;
	margin-bottom: 18px;
	border-radius: 10px;
	background: rgba(14,156,147,.09);
	border: 1px solid rgba(14,156,147,.26);
	font-size: .9rem;
	color: var(--sec-turquesa);
}

.sec-armador__enlace {
	display: inline-block;
	margin-top: 8px;
	border: 0;
	background: none;
	padding: 0;
	font: inherit;
	font-weight: 600;
	color: var(--sec-turquesa);
	text-decoration: underline;
	cursor: pointer;
}

/* ---- Presupuesto ---- */

.sec-armador__campo { margin-bottom: 18px; }

.sec-armador__campo label {
	display: block;
	margin-bottom: 8px;
	font-size: .72rem;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: #7A7F87;
}

.sec-armador__input {
	display: flex;
	align-items: center;
	border: 1px solid var(--sec-borde);
	border-radius: 12px;
	overflow: hidden;
	transition: border-color .15s ease, box-shadow .15s ease;
}

.sec-armador__input:focus-within {
	border-color: var(--sec-oro);
	box-shadow: 0 0 0 3px rgba(212,160,23,.18);
}

.sec-armador__input span {
	padding: 0 4px 0 16px;
	font-family: 'Outfit', sans-serif;
	font-size: 1.6rem;
	font-weight: 600;
	color: var(--sec-oro-hondo);
}

.sec-armador__input input {
	flex: 1;
	border: 0 !important;
	outline: none !important;
	box-shadow: none !important;
	background: transparent;
	padding: 14px 16px 14px 4px;
	font-family: 'Outfit', sans-serif;
	font-size: 1.6rem;
	font-weight: 600;
	color: var(--sec-grafito);
	width: 100%;
}

.sec-armador__campo small {
	display: block;
	margin-top: 7px;
	font-size: .8rem;
	color: #8A9098;
}

/* ---- Resultado ---- */

.sec-armador__resultado {
	margin-top: 22px;
	padding-top: 20px;
	border-top: 1px dashed var(--sec-borde);
}

.sec-armador__resumen {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
	margin-bottom: 14px;
	font-size: .88rem;
	color: var(--sec-gris);
}

.sec-armador__otra {
	border: 1px solid var(--sec-borde);
	background: #fff;
	border-radius: 30px;
	padding: 7px 15px;
	font: inherit;
	font-size: .82rem;
	font-weight: 600;
	color: var(--sec-grafito);
	cursor: pointer;
	transition: border-color .15s ease, background-color .15s ease;
}

.sec-armador__otra:hover { border-color: var(--sec-oro); background: var(--sec-crema); }

.sec-armador__lista {
	list-style: none;
	margin: 0 0 18px;
	padding: 0;
	max-height: 340px;
	overflow-y: auto;
}

.sec-armador__lista li {
	display: grid;
	grid-template-columns: 52px 1fr auto;
	gap: 12px;
	align-items: center;
	padding: 10px 0;
	border-bottom: 1px solid #F1EFEA;
}

.sec-armador__lista li:last-child { border-bottom: 0; }

.sec-armador__lista img {
	width: 52px;
	height: 52px;
	object-fit: cover;
	border-radius: 9px;
	background: var(--sec-crema);
	display: block;
}

.sec-armador__nombre { font-size: .92rem; font-weight: 500; line-height: 1.35; }
.sec-armador__unidad { display: block; font-size: .8rem; color: #8A9098; margin-top: 2px; }
.sec-armador__importe { font-family: 'Outfit', sans-serif; font-weight: 600; white-space: nowrap; }

/* ---- Totales ---- */

.sec-armador__totales {
	background: var(--sec-crema);
	border-radius: 12px;
	padding: 14px 16px;
	margin-bottom: 16px;
}

.sec-armador__totales > div {
	display: flex;
	justify-content: space-between;
	gap: 14px;
	padding: 5px 0;
	font-size: .92rem;
	color: var(--sec-gris);
}

.sec-armador__total {
	margin-top: 6px;
	padding-top: 12px !important;
	border-top: 1px solid var(--sec-borde);
	font-family: 'Outfit', sans-serif;
	font-size: 1.15rem !important;
	font-weight: 600;
	color: var(--sec-grafito) !important;
}

.sec-armador__nota {
	margin: 12px 0 0;
	text-align: center;
	font-size: .8rem;
	color: #8A9098;
}

.sec-armador__error {
	margin-top: 16px;
	padding: 12px 14px;
	border-radius: 10px;
	background: rgba(239,91,52,.09);
	border: 1px solid rgba(239,91,52,.25);
	color: #B03A19;
	font-size: .9rem;
}

@media (max-width: 520px) {
	.sec-armador { padding: 20px; }
	.sec-armador__input input,
	.sec-armador__input span { font-size: 1.35rem; }
	.sec-armador__lista { max-height: none; }
}

/* Franja de destino sobre el catálogo de la tienda */
.sec-barra-tienda { margin: 0 0 26px; clear: both; }

/* ============================================================
   SELECTOR EN ESTADO CONFIRMADO
   Cuando el visitante ya eligió destino, el bloque de la portada
   deja de preguntar y le confirma la zona.
   ============================================================ */

.sec-selector--listo { text-align: center; }

.sec-listo__marca {
	display: grid;
	place-items: center;
	width: 56px;
	height: 56px;
	margin: 0 auto 16px;
	border-radius: 50%;
	background: rgba(46, 158, 91, .12);
	color: #2E9E5B;
}

.sec-listo__marca svg { width: 28px; height: 28px; display: block; }

.sec-listo__titulo {
	margin: 0 0 4px;
	font-family: 'Outfit', system-ui, sans-serif;
	font-size: 1.05rem;
	font-weight: 500;
	color: #7A7F87;
}

.sec-listo__lugar {
	margin: 0 0 20px;
	font-family: 'Outfit', system-ui, sans-serif;
	font-size: clamp(1.4rem, 3vw, 1.8rem);
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -.02em;
	color: var(--sec-grafito, #23262B);
}

.sec-selector--listo .sec-almacen { text-align: left; }
.sec-selector--listo .sec-datos { margin-bottom: 4px; }

.sec-listo__ir { text-decoration: none; }

.sec-listo__cambiar {
	display: block;
	width: 100%;
	margin-top: 12px;
	padding: 10px;
	border: 0;
	background: none;
	font: inherit;
	font-size: .88rem;
	font-weight: 600;
	color: var(--sec-oro-hondo, #8F6B0A);
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}

.sec-listo__cambiar:hover { color: var(--sec-grafito, #23262B); }

/* El desplegable abierto debe quedar por encima del botón de confirmar */
.sec-selector .sec-campo { position: relative; z-index: 2; }
.sec-selector .sec-boton { position: relative; z-index: 1; }


/* El botón de confirmar debe estar siempre por encima y ser pulsable:
   dentro de la ventana emergente el clic no llegaba a él. */
.sec-selector .sec-guardar {
	position: relative;
	z-index: 5;
	pointer-events: auto;
}

.sec-modal .sec-selector { position: relative; z-index: 1; }

/* El botón de confirmar ahora es un enlace: se comporta igual. */
a.sec-boton {
	display: block;
	text-align: center;
	text-decoration: none;
	color: #14161A !important;
}

a.sec-boton:hover { color: #14161A !important; }

.sec-boton--inactivo {
	opacity: .5;
	pointer-events: none;
	cursor: not-allowed;
}

/* ============================================================
   ARMADOR — CASILLAS DE CATEGORÍA (añadido)
   Añadir al final de public/assets/sigloss-envios.css del plugin,
   o al CSS del tema hijo. Usa las variables de marca del plugin
   con respaldo por si se pega en el tema.
   ============================================================ */

.sec-armador__cats { margin-bottom: 4px; }

.sec-armador__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 8px 0 6px;
}

.sec-armador__chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border: 1px solid var(--sec-borde, #E7E4DE);
    border-radius: 999px;
    background: #fff;
    cursor: pointer;
    font-size: .9rem;
    font-weight: 600;
    color: var(--sec-grafito, #23262B);
    transition: background-color .15s ease, border-color .15s ease, color .15s ease, opacity .15s ease;
    user-select: none;
}

/* Oculta la casilla nativa: el "chip" entero es el control */
.sec-armador__chip input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.sec-armador__chip:hover {
    border-color: var(--sec-oro, #D4A017);
}

/* Marcada: se enciende en oro */
.sec-armador__chip input:checked + span {
    color: #14161A;
}
.sec-armador__chip:has(input:checked) {
    background: var(--sec-oro, #D4A017);
    border-color: var(--sec-oro, #D4A017);
    color: #14161A;
}

/* Deshabilitada (ya hay 3 marcadas): se atenúa */
.sec-armador__chip:has(input:disabled) {
    opacity: .4;
    cursor: not-allowed;
}

/* Respaldo para navegadores sin :has() — al menos la marca se nota
   por el contorno de foco del checkbox accesible */
.sec-armador__chip input:focus-visible + span {
    outline: 2px solid var(--sec-oro, #D4A017);
    outline-offset: 3px;
    border-radius: 4px;
}

/* ============================================================
   ARMADOR — SUBCATEGORÍAS DESPLEGABLES (añadido)
   Al marcar un padre, se despliegan sus hijas debajo.
   ============================================================ */

/* Los chips ahora se organizan por grupos (padre + sus hijas) */
.sec-armador__chips {
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
}

.sec-armador__grupo {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* El chip del padre y las hijas conviven en el mismo grupo */
.sec-armador__grupo > .sec-armador__chip { flex: 0 0 auto; }

/* Contenedor de subcategorías: ocupa toda la fila, debajo del padre */
.sec-armador__subchips {
    flex: 1 0 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 4px 0 6px 18px;
    padding-left: 14px;
    border-left: 2px solid var(--sec-borde, #E7E4DE);
}

.sec-armador__subchips[hidden] { display: none; }

/* Chips hija: más pequeños y en tono turquesa cuando se marcan,
   para distinguirlos visualmente del padre (dorado) */
.sec-armador__chip--hija {
    padding: 5px 12px;
    font-size: .82rem;
}
.sec-armador__chip--hija:has(input:checked) {
    background: var(--sec-turquesa, #0A6F69);
    border-color: var(--sec-turquesa, #0A6F69);
    color: #fff;
}
.sec-armador__chip--hija input:checked + span { color: #fff; }

/* Pista visual de que un padre tiene subcategorías: pequeño signo */
.sec-armador__grupo.tiene-hijas > .sec-armador__chip > span::after {
    content: " ▾";
    font-size: .7em;
    opacity: .6;
}