/* Multi-Tiendas: estilos propios (Bootstrap 5 + bootstrap-icons provistos por el plugin).
   Bootstrap primero: aquí solo queda lo que BS no expresa. Sistema de temas
   [data-mt-theme] sobre el wrapper .mt-page (fuente de diseño: views/mockups/assets/theme.css). */

/* ---- Tokens de tema + presets -------------------------------------------- */
[data-mt-theme] {
	--mt-primary: #2f7d4e;
	--mt-on-primary: #ffffff;
	--mt-bg: #f4f8f5;
	--mt-surface: #ffffff;
	--mt-text: #1c2b23;
	--mt-muted: #64796d;
	--mt-border: #dbe6de;

	/* Estados (constantes, no dependen del tema) */
	--mt-success: #1e7e34;
	--mt-warning: #b45309;
	--mt-danger: #c22a2a;
}

[data-mt-theme="ocre"] { /* Cálido / comida, bazar */
	--mt-primary: #b45309;
	--mt-on-primary: #ffffff;
	--mt-bg: #faf6ef;
	--mt-surface: #ffffff;
	--mt-text: #2a2018;
	--mt-muted: #8a7a66;
	--mt-border: #eadfce;
}

[data-mt-theme="indigo"] { /* Moderno / servicios, tecnología */
	--mt-primary: #4f46e5;
	--mt-on-primary: #ffffff;
	--mt-bg: #f5f5fb;
	--mt-surface: #ffffff;
	--mt-text: #211f3d;
	--mt-muted: #73718f;
	--mt-border: #e2e0f2;
}

[data-mt-theme="lima"] { /* Verde claro / fresco */
	--mt-primary: #43a05f;
	--mt-on-primary: #ffffff;
	--mt-bg: #f2f9f4;
	--mt-surface: #ffffff;
	--mt-text: #1d2b23;
	--mt-muted: #617c6e;
	--mt-border: #d6e6da;
}

[data-mt-theme="cielo"] { /* Celeste / azul claro */
	--mt-primary: #3f8fd6;
	--mt-on-primary: #ffffff;
	--mt-bg: #f2f7fb;
	--mt-surface: #ffffff;
	--mt-text: #1c2733;
	--mt-muted: #5f7182;
	--mt-border: #d3e2ef;
}

[data-mt-theme="noche"] { /* Azul profundo */
	--mt-primary: #1f4e9c;
	--mt-on-primary: #ffffff;
	--mt-bg: #f1f4fa;
	--mt-surface: #ffffff;
	--mt-text: #1b2430;
	--mt-muted: #5c6b80;
	--mt-border: #ccd8ea;
}

[data-mt-theme="perla"] { /* Gris claro */
	--mt-primary: #7d8b99;
	--mt-on-primary: #ffffff;
	--mt-bg: #f6f7f8;
	--mt-surface: #ffffff;
	--mt-text: #23282d;
	--mt-muted: #6a737d;
	--mt-border: #dde1e5;
}

[data-mt-theme="grafito"] { /* Gris oscuro */
	--mt-primary: #47505b;
	--mt-on-primary: #ffffff;
	--mt-bg: #f4f5f6;
	--mt-surface: #ffffff;
	--mt-text: #20252a;
	--mt-muted: #5e6771;
	--mt-border: #d3d8dd;
}

[data-mt-theme="soleado"] { /* Amarillo cálido (texto sobre marca oscuro) */
	--mt-primary: #e9a10c;
	--mt-on-primary: #2b2007;
	--mt-bg: #fbf6ea;
	--mt-surface: #ffffff;
	--mt-text: #2a2415;
	--mt-muted: #83765a;
	--mt-border: #ecdfc0;
}

[data-mt-theme="coral"] { /* Rojo claro / coral */
	--mt-primary: #e0655c;
	--mt-on-primary: #ffffff;
	--mt-bg: #faf3f2;
	--mt-surface: #ffffff;
	--mt-text: #2b1e1d;
	--mt-muted: #7d6a68;
	--mt-border: #ecd9d7;
}

[data-mt-theme="granate"] { /* Rojo profundo */
	--mt-primary: #b02a2a;
	--mt-on-primary: #ffffff;
	--mt-bg: #faf3f3;
	--mt-surface: #ffffff;
	--mt-text: #261c1c;
	--mt-muted: #6e5a5a;
	--mt-border: #e3d4d4;
}

/* ---- Base .mt-page + re-encasque Bootstrap al tema ------------------------ */
.mt-body {
	min-height: 100vh;
	background-color: #f8f9fa;
}

.mt-page { background-color: var(--mt-bg); color: var(--mt-text); min-height: 100vh; }

.mt-page a { color: var(--mt-primary); }
.mt-page a:hover { color: var(--mt-primary); opacity: .85; }

/* Botones semánticos de Bootstrap (btn-primary, btn-success, btn-danger, ...): quedan SIN
   modificar — estilo estándar de Bootstrap en todas las secciones. El tema pinta SOLO
   btn-theme / btn-outline-theme (arriba/abajo). Overrides legacy de .btn-primary/.btn-outline-primary eliminados (T2026/09/12#2). */

/* Botones personalizados del tema (btn-theme / btn-outline-theme): el sistema de temas
   pinta SOLO estos; los botones Bootstrap restantes hacen lo suyo (clases lógicas para
   acciones destructivas/semánticas). La forma/tamaño sigue por `btn`, `btn-sm`, etc.
   Completos por ESTADO (base/hover/focus/activo/deshabilitado) y con especificidad
   .btn.btn-* : ninguna regla de Bootstrap (.btn:hover c/ variables sin definir →
   transparente) ni reglas locales les pisan el color. */
.mt-page .btn.btn-theme {
	background-color: var(--mt-primary);
	border-color: var(--mt-primary);
	color: var(--mt-on-primary);
}
.mt-page .btn.btn-theme:hover,
.mt-page .btn.btn-theme:focus,
.mt-page .btn.btn-theme:active { filter: brightness(.94); background-color: var(--mt-primary); border-color: var(--mt-primary); color: var(--mt-on-primary); }

.mt-page .btn.btn-outline-theme {
	background-color: transparent;
	border-color: var(--mt-primary);
	color: var(--mt-primary);
}
.mt-page .btn.btn-outline-theme:hover,
.mt-page .btn.btn-outline-theme:focus,
.mt-page .btn.btn-outline-theme:active { background-color: var(--mt-primary); border-color: var(--mt-primary); color: var(--mt-on-primary); }

.mt-page .btn.btn-theme:disabled { pointer-events: none; opacity: .65; background-color: var(--mt-primary); border-color: var(--mt-primary); color: var(--mt-on-primary); }
.mt-page .btn.btn-outline-theme:disabled { pointer-events: none; opacity: .65; background-color: transparent; border-color: var(--mt-primary); color: var(--mt-primary); }

/* Texto de acento en marca (no existe como util BS: color por variable). */
.mt-page .text-brand { color: var(--mt-primary) !important; }

/* Controles de formulario: foco y anillo en marca. */
.mt-page .form-control:focus,
.mt-page .form-select:focus {
	border-color: var(--mt-primary);
	box-shadow: 0 0 0 .25rem color-mix(in srgb, var(--mt-primary) 25%, transparent);
}

/* Tarjetas de Bootstrap sobre fondo del tema. */
.mt-page .card { background-color: var(--mt-surface); border-color: var(--mt-border); }

/* Modal casi-pantalla completa en mobile (forms de gestión / lead). */
@media (max-width: 575.98px) {
	.mt-modal-fullscreen .modal-dialog { max-width: none; }
	.mt-modal-fullscreen .modal-content { border-radius: 0; min-height: 100dvh; }
}

/* Stepper de cantidad (− input +). Reutilizado en tarjeta, overlay y carrito. */
.mt-qty { display: inline-flex; align-items: center; gap: .25rem; }
.mt-qty button {
	width: 26px; height: 26px; padding: 0; border-radius: .375rem; flex: 0 0 auto;
	border: 1px solid var(--mt-border); background: var(--mt-surface); color: var(--mt-text);
	font-size: .95rem; line-height: 1; display: inline-flex; align-items: center; justify-content: center;
}
.mt-qty button:hover { background-color: rgba(0,0,0,.06); }
.mt-qty input[type=number] {
	width: 2.5rem; text-align: center; border: 1px solid var(--mt-border);
	border-radius: .375rem; padding: .18rem .1rem; background: var(--mt-surface); color: var(--mt-text);
	font-size: .9rem; font-weight: 600; -moz-appearance: textfield; appearance: textfield;
}
.mt-qty input::-webkit-outer-spin-button,
.mt-qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* ---- /tiendas/ (home · listado de tiendas + CTA lead) --------------------- */

/* Barra superior de la landing (sin tema): fondo blanco + borde estándar Bootstrap. */
.mt-home-hero { background-color: #fff; border-bottom: 1px solid var(--bs-border-color, #dee2e6); }

/* Thumbnail de tienda (72px; BS no da tamaños fijos a contenedores).
   Por defecto con tokens Bootstrap "subtle" (fondo azul claro + borde/texto énfasis); dentro de [data-mt-theme] (showcase/paneles) toma el tema. */
.mt-store-thumb {
	width: 72px; height: 72px; border-radius: .6rem; object-fit: cover; flex: 0 0 auto;
	background-color: var(--bs-primary-bg-subtle, #cfe2ff); border: 1px solid var(--bs-primary-border-subtle, #9ec5f8);
	display: inline-flex; align-items: center; justify-content: center; color: var(--bs-primary-text-emphasis, #052c65); font-size: 2rem;
}
[data-mt-theme] .mt-store-thumb { background-color: var(--mt-bg); border-color: var(--mt-border); color: var(--mt-muted); }
.mt-store-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: inherit; }

/* La tarjeta de tienda ES un <a class="card"> (BS): hereda el color y sin subrayado. */
#mt-home-list a.card { color: inherit; text-decoration: none; }

.mt-not-found,
.mt-placeholder {
	max-width: 720px;
	margin: 4rem auto;
	padding: 2.5rem;
	text-align: center;
	background-color: #fff;
	border-radius: .5rem;
	box-shadow: 0 0 0 1px rgba(0, 0, 0, .05);
}

.mt-not-found h1 {
	font-size: 1.75rem;
	margin-bottom: .75rem;
}

/* Vista pública de tienda (/tiendas/{slug}/) */

.mt-store-nav { background-color: var(--mt-surface); border-bottom: 1px solid var(--mt-border); }
.mt-store-nav .navbar-brand { color: inherit; text-decoration: none; }

/* Hamburguesa SIN borde ni anillo (BS5 pinta borde + box-shadow :focus). */
.mt-store-nav .navbar-toggler { border: 0; outline: none; box-shadow: none !important; }

/* Mobile (<992px): la hamburguesa queda a la derecha de la fila 1 (tras la marca). */
@media (max-width: 991.98px) { .mt-store-nav .navbar-toggler { margin-left: auto; } }

/* Logo de la marca (42px) y nombre con truncado. */
.mt-store-brand-img {
	width: 42px; height: 42px; object-fit: cover; flex: 0 0 auto;
	border-radius: .5rem; background-color: var(--mt-bg); color: var(--mt-muted); font-size: 1.3rem;
	display: inline-flex; align-items: center; justify-content: center;
}
.mt-store-brand-img img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: inherit; }
.mt-store-brand-name { max-width: 46vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Buscador de la navbar con fondo del tema. */
.mt-nav-search .form-control { background-color: var(--mt-bg); color: var(--mt-text); border-color: var(--mt-border); }

/* Panel de categorías: mobile = lista vertical (util BS flex-column).
   Desktop = FILA de chips que usa el ancho libre de la navbar. */
.mt-cat-item {
	display: flex; align-items: center; gap: .5rem; width: 100%; text-align: left;
	padding: .45rem .6rem; border-radius: .5rem; color: var(--mt-text); border: 0; background: none;
}
.mt-cat-item:hover, .mt-cat-item.active { background-color: rgba(0,0,0,.05); }
.mt-cat-item.active { font-weight: 700; color: var(--mt-primary); }

/* Thumb de categoría en el menú (28px). */
.mt-cat-thumb {
	width: 28px; height: 28px; object-fit: cover; flex: 0 0 auto;
	border-radius: .35rem; background-color: var(--mt-bg); color: var(--mt-muted); font-size: .9rem;
	display: inline-flex; align-items: center; justify-content: center;
}
.mt-cat-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: inherit; }

/* El sitio (wp_clasificados) carga SU bootstrap DESPUES del nuestro: sus utils con
   !important (ej. .flex-column) ganan por orden de cascada si la especificidad es
   igual -> estas reglas van scoped a .mt-store-view para tenerla mayor SIEMPRE. */
@media (min-width: 992px) {
	/* Distribución fija tipo col-2 / col-6 / col-2 / col-2:
	   marca (17%) + categorías (50%) + buscador (17%) + acciones (17%). */
	.mt-store-view .navbar-brand { flex: 0 0 17%; min-width: 0; }
	.mt-store-view .navbar-brand .mt-store-brand-name { max-width: none; flex: 1 1 auto; min-width: 0; }
	.mt-store-view .mt-cats-panel { flex: 0 0 50%; }
	.mt-store-view .mt-nav-search { flex: 0 0 17%; }
	.mt-store-view .mt-nav-actions { flex: 0 0 17%; }
	.mt-store-view .mt-cats-menu { display: flex !important; flex-direction: row !important; flex-wrap: wrap; align-items: center; gap: .35rem; padding-top: 0; }
	.mt-store-view .mt-cat-item {
		width: auto !important; text-align: left; padding: .4rem .7rem !important; white-space: nowrap; color: var(--mt-text);
		border-radius: .6rem; border: 1px solid var(--mt-border) !important; background: none !important; font-weight: 600;
	}
	.mt-store-view .mt-cat-item.active { background-color: var(--mt-primary) !important; color: var(--mt-on-primary); border-color: var(--mt-primary); }
}

/* El navbar sticky no debe quedar debajo de la barra admin de WP (logged in). */
@media screen and (max-width: 782px) { body:has(#wpadminbar) .mt-store-view .navbar.mt-store-nav { top: 46px; } }
@media screen and (min-width: 783px) { body:has(#wpadminbar) .mt-store-view .navbar.mt-store-nav { top: 32px; } }

/* Navbar pintado con el color principal del tema (checkbox en /gestion/). */
[data-mt-nav="1"] .mt-store-nav { background-color: var(--mt-primary); border-bottom-color: rgba(0, 0, 0, .2); }

/* La hamburguesa de BS es un SVG blanco fijo; en soleado (primary claro) se oscurece. */
[data-mt-theme="soleado"][data-mt-nav="1"] .navbar-toggler-icon { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(43,32,7,.6)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"); }
[data-mt-nav="1"] .mt-store-nav .navbar-brand h1 { color: var(--mt-on-primary) !important; }
[data-mt-nav="1"] .mt-store-nav .mt-store-brand-img { background-color: rgba(255, 255, 255, .18); color: var(--mt-on-primary) !important; }
[data-mt-nav="1"] .mt-store-nav .navbar-toggler { color: var(--mt-on-primary); }

/* Chips de categorías sobre el navbar pintado (gana la especificidad mayor). */
[data-mt-nav="1"] .mt-store-nav .mt-cat-item { color: var(--mt-on-primary) !important; border-color: rgba(255, 255, 255, .4) !important; }
[data-mt-nav="1"] .mt-store-nav .mt-cat-item:hover { background-color: rgba(255, 255, 255, .12); }
[data-mt-nav="1"] .mt-store-nav .mt-cats-menu .mt-cat-item.active { background-color: rgba(255, 255, 255, .22) !important; border-color: rgba(255, 255, 255, .45) !important; color: var(--mt-on-primary) !important; }
[data-mt-nav="1"] .mt-store-nav .mt-cat-thumb { background-color: transparent; color: var(--mt-on-primary) !important; }

/* Buscador sobre el navbar pintado. */
[data-mt-nav="1"] .mt-store-nav .mt-nav-search .form-control { background-color: rgba(255, 255, 255, .16); border-color: rgba(255, 255, 255, .4); color: var(--mt-on-primary) !important; }
[data-mt-nav="1"] .mt-store-nav .mt-nav-search .form-control::placeholder { color: rgba(255, 255, 255, .75); opacity: 1; }

/* Botones de acción sobre el navbar pintado: píldora clara fija (fondo surface + borde gris),
   iconos en el color del tema. En soleado el primary (amarillo claro) no se leería sobre blanco,
   así que ahí se mantiene el icono oscuro. */
[data-mt-nav="1"] .mt-store-nav .mt-nav-actions .btn { background-color: var(--mt-surface) !important; color: var(--mt-primary) !important; border-color: rgba(0, 0, 0, .15) !important; }
[data-mt-nav="1"] .mt-store-nav .mt-nav-actions .btn:hover,
[data-mt-nav="1"] .mt-store-nav .mt-nav-actions .btn:focus { background-color: rgba(255, 255, 255, .85) !important; color: var(--mt-primary) !important; border-color: rgba(0, 0, 0, .3) !important; }
[data-mt-theme="soleado"][data-mt-nav="1"] .mt-store-nav .mt-nav-actions .btn { color: var(--mt-text) !important; }
[data-mt-theme="soleado"][data-mt-nav="1"] .mt-store-nav .mt-nav-actions .btn:hover,
[data-mt-theme="soleado"][data-mt-nav="1"] .mt-store-nav .mt-nav-actions .btn:focus { color: var(--mt-text) !important; }

/* Mini-preview de /gestion/: la barra simulada sigue el flag data-mt-nav. */
[data-mt-nav="1"] .mt-preview-nav { background-color: var(--mt-primary) !important; border-bottom-color: rgba(0, 0, 0, .2); color: var(--mt-on-primary) !important; }
[data-mt-nav="1"] .mt-preview-dot { background-color: var(--mt-on-primary) !important; }
[data-mt-nav="1"] .mt-preview-icon { color: var(--mt-on-primary) !important; }

/* Banner "cerrada ahora" (alert BS + borde izquierdo grueso). */
.mt-closed-banner { border-left-width: .25rem; }

/* Grilla compacta: 2 por fila mobile base, flexible desktop. */
.mt-products-grid { display: grid; gap: .75rem; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 576px) { .mt-products-grid { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); } }

/* Tarjeta compacta: binding de tema + hover. */
.mt-product-card {
	position: relative; display: flex; flex-direction: column; overflow: hidden;
	background-color: var(--mt-surface); border: 1px solid var(--mt-border); border-radius: .7rem;
	transition: box-shadow .15s ease, transform .15s ease;
}
.mt-product-card:hover { box-shadow: 0 .4rem 1rem rgba(0,0,0,.12); transform: translateY(-2px); }

/* Estado "ya en el carrito" sobre la tarjeta (marcador). */
.mt-product-card.is-in-cart { border-color: var(--mt-success); box-shadow: 0 0 0 2px color-mix(in srgb, var(--mt-success) 55%, transparent); }

/* Media cuadrada clicable (aspect-ratio no es util BS). Icono = placeholder. */
.mt-product-media { position: relative; aspect-ratio: 1/1; background-color: var(--mt-bg); color: var(--mt-muted); overflow: hidden; }
.mt-product-media img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Zona clicable (foto+título) -> overlay ampliado. */
.mt-product-open { cursor: pointer; user-select: none; }

/* Título compacto con clamp a 2 líneas. */
.mt-product-title {
	font-size: .92rem; font-weight: 600; margin: 0;
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* Badge "Agotado" bajo el título (el flex column lo acomoda). */
.mt-sold-out-badge { align-self: flex-start; }

/* ---- Overlay producto AMPLIADO (prácticamente viewport completo) -------- */
.mt-product-overlay-backdrop { position: fixed; inset: 0; z-index: 1060; background: rgba(17,24,39,.62); display: none; }
.mt-product-overlay-backdrop.show { display: block; }

.mt-product-overlay { position: fixed; inset: 0; z-index: 1061; display: none; overflow: auto; background-color: var(--mt-surface); color: var(--mt-text); }
.mt-product-overlay.show { display: block; }

/* Desktop: el contenido del overlay se limita a ~50% (no ser tan grande). */
@media (min-width: 992px) { .mt-product-overlay .container { max-width: 50%; } }

/* Scroll horizontal de imágenes (snap) si el producto tiene >1. */
.mt-ov-gallery { display: flex; gap: .5rem; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; padding-bottom: .25rem; scrollbar-width: thin; }
.mt-ov-img { flex: 0 0 min(78vw, 460px); aspect-ratio: 1/1; scroll-snap-align: center; background-color: var(--mt-bg); color: var(--mt-muted); font-size: 2.5rem; display: flex; align-items: center; justify-content: center; }
.mt-ov-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (min-width: 768px) { .mt-ov-gallery .mt-ov-img { flex-basis: min(420px, 45vw); } }

/* Descripción completa (scroll vertical propio). */
.mt-ov-desc { max-height: 32vh; overflow: auto; white-space: pre-line; color: var(--mt-text); line-height: 1.55; }

/* Drawer carrito: ancho y botón quitar de línea. */
.offcanvas.mt-cart-drawer { width: 380px; max-width: 94vw; }

.mt-line-remove { border: 0; background: none; color: var(--mt-muted); cursor: pointer; line-height: 1; padding: .15rem; flex: 0 0 auto; }
.mt-line-remove:hover { color: var(--mt-danger); }

.mt-cbu-block span.d-block {
	white-space: pre-wrap;
	word-break: break-word;
}

/* Panel de gestión */

.mt-thumb-placeholder {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: .375rem;
	background-color: #e9ecef;
	color: #adb5bd;
	font-size: 1.25rem;
	flex-shrink: 0;
}

.mt-variant-row > div {
	flex: 1 1 auto;
	min-width: 130px;
}

#mtg-product-form,
#tab-categorias .card,
#tab-ajustes .card {
	width: 100%;
}

/* Bloque de texto de filas de listado (producto/categoría): trunca sin romper el flex. */
.mtg-list-body { min-width: 0; }

/* Editor de tema: paleta del botón-preset (tamaños fijos que BS no da). */
.mt-palette { display: flex; gap: .3rem; margin-bottom: .4rem; }
.mt-palette > span { width: 18px; height: 18px; border-radius: .35rem; flex: 0 0 auto; }

/* Preset activo (anillo de marca). */
.mt-page .mt-theme-opt.active {
	border-color: var(--mt-primary);
	box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--mt-primary) 45%, transparent);
}

/* Grilla compacta del editor (11 presets): botones chicos que no ocupan el ancho. */
.mtg-theme-grid { display: grid; gap: .5rem; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 576px) { .mtg-theme-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 992px) { .mtg-theme-grid { grid-template-columns: repeat(4, 1fr); } }
.mtg-theme-grid .mt-theme-opt { padding: .45rem .5rem; font-size: .8rem; line-height: 1.15; }
.mtg-theme-grid .mt-palette { gap: .25rem; margin-bottom: .35rem; }
.mtg-theme-grid .mt-palette > span { width: 14px; height: 14px; border-radius: .3rem; }

/* Panel de pedidos */

/* Chip de filtro: btn BS + borde/fondo del tema; activo = btn-primary (tema). */
.mt-order-chip { background-color: var(--mt-surface); border: 1px solid var(--mt-border); }

/* Contador dentro del chip (se re-pinta solo al cambiar estado). */
.mt-chip-count { font-size: .8em; font-weight: 700; padding: .1rem .45rem; border-radius: 999px; background-color: rgba(0,0,0,.08); color: inherit; }
.mt-order-chip.active .mt-chip-count { background-color: rgba(255,255,255,.3); }

/* Badge de estado (tarjetas mobile): colores sólidos Bootstrap + texto blanco para contraste (T2026/09/12#2). */
.mt-st { font-size: .75rem; font-weight: 600; padding: .25rem .55rem; border-radius: 999px; display: inline-flex; align-items: center; gap: .3rem; }
.mt-st-pendiente_pago   { background: #ffc107; color: #fff; } /* warning */
.mt-st-pago_recibido    { background: #0d6efd; color: #fff; } /* primary */
.mt-st-despachado       { background: #6c757d; color: #fff; } /* secondary */
.mt-st-entregado        { background: #198754; color: #fff; } /* success */
/* T2026/09/12#6: estado terminal de cancelación. */
.mt-st-cancelado         { background: #dc3545; color: #fff; } /* danger */

/* T2026/09/12#6: pedidos cancelados sobresaltados (fila desktop + tarjeta mobile). */
#mtp-tbody tr[data-estado="cancelado"] > td { background-color: #fbf2f2; color: #7c5a5a; }
.mt-order-card[data-estado="cancelado"] { border-left: 4px solid #e0b3b3; background-color: #fbf6f6; }

/* Stepper visual de estados (pipeline; se muestra en el modal "Ver"). */
.mt-stepper { display: flex; align-items: center; gap: .25rem; flex-wrap: wrap; }
.mt-step { font-size: .78rem; padding: .3rem .55rem; border-radius: .4rem 0 0 .4rem; background: #f1f3f5; color: #6b7280; white-space: nowrap; }
.mt-step:last-child { border-radius: 0 .4rem .4rem 0; }
.mt-step.is-done { background-color: var(--mt-success); color: #fff; }
.mt-step.is-current { background-color: var(--mt-primary); color: var(--mt-on-primary); font-weight: 700; }

/* Mobile: la tabla se convierte en tarjetas (mismos datos). */
@media (max-width: 767.98px) {
	.mt-orders-table thead { display: none; }
	.mt-orders-table, .mt-orders-table tbody, .mt-orders-table tr, .mt-orders-table td { display: block; width: 100%; }
	.mt-order-card > div { display: flex; justify-content: space-between; gap: .5rem; padding: .2rem 0; border-bottom: 1px dashed var(--mt-border); }
	.mt-order-card > div:last-child { border-bottom: 0; }
}

/* Panel de administración global */

.mta-lead-msg {
	white-space: pre-line;
	word-break: break-word;
	max-width: 320px;
}

.mt-admin .list-group-item img,
#tab-tiendas img {
	border-radius: .375rem;
	object-fit: cover;
}

/* Galerias de imagenes (pública / privada) */

.mt-gal-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.mt-gal-tile {
	position: relative;
	width: 104px;
	padding: 6px;
	background-color: #fff;
	border: 1px solid #dee2e6;
	border-radius: .5rem;
	text-align: center;
	cursor: pointer;
}

.mt-gal-tile img {
	width: 92px;
	height: 92px;
	object-fit: cover;
	border-radius: .375rem;
	display: block;
	margin: 0 auto;
}

.mt-gal-tile.selected {
	outline: 3px solid var(--bs-primary);
	outline-offset: -1px;
}

.mt-gal-label {
	display: block;
	margin-top: 4px;
	font-size: .75rem;
	color: #6c757d;
	overflow-wrap: anywhere;
}

.mt-gal-delete {
	position: absolute;
	top: -10px;
	right: -8px;
	z-index: 2;
}

.mt-gal-scroll {
	max-height: 420px;
	overflow-y: auto;
}

/* Carrito / checkout / comprobante: miniaturas y líneas de producto */

.mt-cart-thumb {
	flex-shrink: 0;
	width: 46px;
	height: 46px;
	border-radius: .5rem;
	overflow: hidden;
	background-color: var(--mt-bg);
	color: var(--mt-muted);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 1.2rem;
}

.mt-cart-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.mt-cart-thumb-lg {
	width: 56px;
	height: 56px;
	font-size: 1.4rem;
}

/* Pantalla post-pedido (comprobante) */

.mt-receipt-item-body {
	min-width: 0;
}

.mt-receipt-thumb {
	flex-shrink: 0;
	width: 48px;
	height: 48px;
	object-fit: cover;
	border-radius: .375rem;
}

/* Estados del pedido (stepper) */

.mt-order-status .mt-step-current {
	color: var(--bs-primary);
	font-weight: 600;
}

.mt-order-status .mt-step-done {
	color: var(--bs-success);
}

.mt-order-status .mt-step-pending {
	color: #adb5bd;
}

/* ---- MOCKUP 01 V2 · /tiendas/ como LANDING DE VENTA + SHOWCASE ----------- */

html { scroll-behavior: smooth; }
#abrir-tienda { scroll-margin-top: .75rem; }

/* Ventana tipo navegador. */
.mt-frame { position: relative; width: 100%; border: 1px solid var(--mt-border); border-radius: .8rem; overflow: hidden; background-color: var(--mt-surface); box-shadow: 0 1rem 2.5rem rgba(17,24,39,.16); }
.mt-chrome { display: flex; align-items: center; gap: .4rem; padding: .45rem .6rem; border-bottom: 1px solid var(--mt-border); background-color: var(--mt-surface); }
.mt-dot { width: 10px; height: 10px; border-radius: 999px; background-color: rgba(0,0,0,.22); flex: 0 0 auto; }
.mt-url { margin-left: .4rem; font-size: .72rem; color: var(--mt-muted); background-color: var(--mt-bg); border: 1px solid var(--mt-border); border-radius: 999px; padding: .15rem .6rem; white-space: nowrap; overflow: hidden; }

/* Stage + pantallas. Altura del stage la ajusta el script (BASE_H × scale). */
.mt-stage { position: relative; overflow: hidden; height: 380px; background-color: var(--mt-bg); }
.mt-screen { position: absolute; top: 0; left: 0; width: 860px; height: 700px; transform-origin: top left; transform: scale(var(--mt-scale,1)); opacity: 0; pointer-events: none; transition: opacity .35s ease; background-color: var(--mt-bg); color: var(--mt-text); }
.mt-screen.is-active { opacity: 1; }

/* "Modal" estático DENTRO de una pantalla (S2): escala con la pantalla. */
.mt-modal-shade { position: absolute; inset: 0; background-color: rgba(17,24,39,.6); pointer-events: none; }
.mt-modal-static { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; }
/* Modal estático del showcase S2: sin wrapper .modal los vars --bs-modal-* de
   Bootstrap no resuelven y .modal-content queda transparente. Fondo/borde explícitos. */
.mt-modal-static .modal-content { background-color: var(--mt-surface); border: 1px solid var(--mt-border); }

/* Callouts (hermanos del stage → NO escalan). Posiciones por inline style. */
.mt-callout { position: absolute; z-index: 20; display: inline-flex; align-items: center; gap: .35rem; padding: .4rem .8rem; border-radius: 999px; background-color: var(--mt-primary); color: var(--mt-on-primary); font-size: .8rem; font-weight: 600; box-shadow: 0 .4rem 1rem rgba(17,24,39,.25); opacity: 0; pointer-events: none; transition: opacity .3s ease .15s; }
.mt-callout.is-on { opacity: 1; }

/* Thumb de producto en pantalla S2 (48px, distinto de mt-thumb-placeholder). */
.mt-thumb {
	width: 48px; height: 48px; border-radius: .5rem; object-fit: cover; flex: 0 0 auto;
	background-color: var(--mt-bg); color: var(--mt-muted); font-size: 1.3rem;
	display: inline-flex; align-items: center; justify-content: center;
}
.mt-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Ventana sticky (desktop) + ritmo de scroll para las secciones de texto. */
@media (min-width: 992px) {
	.mt-frame-sticky {
		position: sticky;
		top: clamp(6rem, calc((100vh - 500px) / 2), 30rem);
	}
	.mt-showcase .mt-feat { min-height: 56vh; display: flex; flex-direction: column; justify-content: center; }
}

/* ---- T1: feedback visual al agregar al carrito ----------------------------------- */

/* Pulso del botón de carrito en cada agregado (mobile y desktop). */
@keyframes mt-bump {
	0%   { transform: scale(1); }
	50%  { transform: scale(1.25); }
	100% { transform: scale(1); }
}

.mt-cart-open.mt-bump { animation: mt-bump .6s ease; }

/* Toast "agregado al carrito" (mobile): z por encima del offcanvas de Bootstrap (1045). */
.mt-add-toast { position: fixed; bottom: 1rem; left: 50%; transform: translateX(-50%); z-index: 1080; }

/* ---- Impresión del detalle básico de pedido ------------------------------------ */

/* En pantalla el bloque del comprobante queda oculto; solo sale al imprimir. */
.mt-print-area { display: none; }

@media print {
	/* display:none (no visibility): lo que no va al papel NO ocupa espacio en el
	   layout, así la impresión no genera páginas extra vacías. */

	body { margin: 0 !important; }
	.mt-body, .mt-page { min-height: 0 !important; }

	/* Página del comprobante: nav y todo lo que rodea al bloque de impresión. */
	.mt-store-view nav { display: none !important; }
	.mt-receipt-card .card-body > :not(.mt-print-area) { display: none !important; }
	.mt-print-area { display: block !important; }

	/* Modal "Ver" del panel de pedidos: solo el modal, sin footer ni X. */
	.mt-pedidos-view > :not(#mtp-detail-modal) { display: none !important; }
	#mtp-detail-modal { position: static !important; overflow: visible !important; margin: 0 !important; }
	#mtp-detail-modal .modal-dialog { margin: 0 !important; max-width: none !important; }
	#mtp-detail-modal .modal-footer, #mtp-detail-modal .btn-close { display: none !important; }
}