/**
 * Menutín App — Design System 1.6.1 (scope .menutin-app-page).
 *
 * Una sola aplicación: tokens → shell (topbar/sidebar/main) → componentes.
 * Mobile-first, sin dependencias, sin selectores globales (todo con scope).
 * Los módulos NO definen estilos propios del sistema: usan estas clases.
 */

/* ==========================================================================
   1. TOKENS
   ========================================================================== */
.menutin-app-page {
	--mt-font: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--mt-mono: ui-monospace, "Cascadia Mono", Consolas, "Courier New", monospace;

	/* Tipografía */
	--mt-fs-xs: .78rem;
	--mt-fs-sm: .875rem;
	--mt-fs-md: 1rem;
	--mt-fs-lg: 1.2rem;
	--mt-fs-xl: 1.5rem;
	--mt-fs-2xl: 1.85rem;
	--mt-lh-tight: 1.25;
	--mt-lh: 1.55;

	/* Espaciado (escala 4px) */
	--mt-space-2xs: 2px;
	--mt-space-xs: 4px;
	--mt-space-sm: 8px;
	--mt-space-md: 16px;
	--mt-space-lg: 24px;
	--mt-space-xl: 32px;
	--mt-space-2xl: 48px;

	/* Radios */
	--mt-radius-xs: 6px;
	--mt-radius-sm: 8px;
	--mt-radius-md: 12px;
	--mt-radius-lg: 16px;
	--mt-radius-xl: 20px;
	--mt-radius-pill: 999px;

	/* Sombras */
	--mt-shadow-xs: 0 1px 2px rgba(16, 24, 40, .05);
	--mt-shadow-sm: 0 1px 3px rgba(16, 24, 40, .08);
	--mt-shadow-md: 0 6px 18px rgba(16, 24, 40, .10);
	--mt-shadow-lg: 0 18px 44px rgba(16, 24, 40, .18);

	/* Layout */
	--mt-container: 1280px;
	--mt-sidebar-w: 248px;
	--mt-topbar-h: 60px;

	/* Colores base */
	--mt-color-primary: #2a7d4f;
	--mt-color-primary-dark: #1f5c3a;
	--mt-color-primary-soft: #eef7f1;
	--mt-color-accent: #c1121f;
	--mt-color-ink: #1d2327;
	--mt-color-text: #1d2327;
	--mt-color-muted: #5f6b76;
	--mt-color-line: #e6e9e7;
	--mt-color-border: #e6e9e7;
	--mt-color-bg: #ffffff;
	--mt-color-surface: #ffffff;
	--mt-color-surface-hover: #f4f7f5;
	--mt-color-bg-soft: #f8faf9;
	--mt-color-surface-soft: #f8faf9;
	--mt-color-canvas: #f6f8f7;

	/* Semánticos */
	--mt-color-ok: #2a7d4f;
	--mt-color-success: #2a7d4f;
	--mt-color-warn: #b45309;
	--mt-color-warning: #b45309;
	--mt-color-err: #c1121f;
	--mt-color-danger: #c1121f;
	--mt-color-info: #1d4ed8;

	/* Aliases cortos (compatibilidad con bloques 1.6.0 y usos sueltos) */
	--mt-primary: var(--mt-color-primary);
	--mt-text: var(--mt-color-text);
	--mt-muted: var(--mt-color-muted);
	--mt-border: var(--mt-color-border);
	--mt-surface: var(--mt-color-surface);
	--mt-bg: var(--mt-color-bg-soft);
	--mt-radius: var(--mt-radius-md);
	--mt-space: var(--mt-space-md);

	/* Capas y transición */
	--mt-z-topbar: 50;
	--mt-z-drawer: 100;
	--mt-z-modal: 200;
	--mt-z-toast: 300;
	--mt-transition: 150ms ease;

	font-family: var(--mt-font);
	font-size: var(--mt-fs-md);
	line-height: var(--mt-lh);
	color: var(--mt-color-ink);
	-webkit-text-size-adjust: 100%;
}

/* Reset con scope (no global) */
.menutin-app-page *,
.menutin-app-page *::before,
.menutin-app-page *::after {
	box-sizing: border-box;
}

.menutin-app-page img,
.menutin-app-page svg {
	max-width: 100%;
}

/* ==========================================================================
   2. SHELL
   ========================================================================== */
.menutin-app-page .mt-shell {
	min-height: inherit;
	display: flex;
	flex-direction: column;
}

/* ==========================================================================
   3. TOPBAR
   ========================================================================== */
.menutin-app-page .mt-topbar {
	position: sticky;
	top: 0;
	z-index: 50;
	display: flex;
	align-items: center;
	gap: var(--mt-space-sm);
	min-height: 60px;
	padding: var(--mt-space-sm) var(--mt-space-md);
	background: var(--mt-color-surface);
	border-bottom: 1px solid var(--mt-color-border);
	color: var(--mt-color-text);
}

.menutin-app-page .mt-brand {
	display: inline-flex;
	align-items: center;
	gap: var(--mt-space-sm);
	font-weight: 800;
	font-size: var(--mt-fs-lg);
	color: var(--mt-color-text);
	text-decoration: none;
	flex: none;
}

.menutin-app-page .mt-brand-mark {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	flex: none;
	border-radius: var(--mt-radius-sm);
	background: var(--mt-color-primary);
	color: #fff;
	font-size: var(--mt-fs-md);
}

.menutin-app-page .mt-brand-name {
	display: none;
}

@media (min-width: 700px) {
	.menutin-app-page .mt-brand-name {
		display: inline;
	}
}

.menutin-app-page .mt-topbar-spacer {
	flex: 1;
	min-width: 0;
}

.menutin-app-page .mt-topbar-context {
	display: none;
	align-items: center;
	gap: var(--mt-space-sm);
	min-width: 0;
	overflow: hidden;
}

@media (min-width: 900px) {
	.menutin-app-page .mt-topbar-context {
		display: flex;
	}
}

.menutin-app-page .mt-ctxchip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	max-width: 34ch;
	padding: 4px 10px;
	border: 1px solid var(--mt-color-border);
	border-radius: var(--mt-radius-pill);
	background: var(--mt-color-surface-soft);
	font-size: var(--mt-fs-xs);
	white-space: nowrap;
	overflow: hidden;
}

.menutin-app-page .mt-ctxchip .mt-ico {
	width: 15px;
	height: 15px;
	color: var(--mt-color-primary);
	flex: none;
}

.menutin-app-page .mt-ctxchip-label {
	color: var(--mt-color-muted);
}

.menutin-app-page .mt-ctxchip strong {
	font-weight: 700;
	overflow: hidden;
	text-overflow: ellipsis;
}

.menutin-app-page .mt-chip {
	display: inline-block;
	max-width: 38vw;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	padding: 2px 10px;
	border-radius: var(--mt-radius-pill);
	background: var(--mt-color-surface-soft);
	border: 1px solid var(--mt-color-border);
	color: var(--mt-color-text);
	font-size: var(--mt-fs-xs);
	font-weight: 600;
}

.menutin-app-page .mt-chip--plan {
	background: var(--mt-color-primary-soft);
	border-color: #cfe6d8;
	color: var(--mt-color-primary-dark);
	text-transform: uppercase;
	letter-spacing: .04em;
}

.menutin-app-page .mt-topbar-actions {
	display: flex;
	align-items: center;
	gap: var(--mt-space-sm);
	flex: none;
}

/* Usuario (dropdown accesible) */
.menutin-app-page .mt-user {
	position: relative;
	display: flex;
	align-items: center;
	gap: var(--mt-space-sm);
	font-size: var(--mt-fs-sm);
}

.menutin-app-page .mt-user summary {
	display: flex;
	align-items: center;
	gap: var(--mt-space-sm);
	list-style: none;
	cursor: pointer;
	min-height: 44px;
	border-radius: var(--mt-radius-sm);
	padding: 2px 6px;
}

.menutin-app-page .mt-user summary::-webkit-details-marker {
	display: none;
}

.menutin-app-page .mt-user summary:hover {
	background: var(--mt-color-surface-hover);
}

.menutin-app-page .mt-avatar {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	flex: none;
	border-radius: 50%;
	background: var(--mt-color-primary);
	color: #fff;
	font-weight: 800;
}

.menutin-app-page .mt-caret {
	width: 0;
	height: 0;
	border-left: 4px solid transparent;
	border-right: 4px solid transparent;
	border-top: 5px solid var(--mt-color-muted);
}

.menutin-app-page .mt-user-meta {
	display: none;
	line-height: 1.2;
}

@media (min-width: 700px) {
	.menutin-app-page .mt-user-meta {
		display: block;
	}
}

.menutin-app-page .mt-user-meta strong {
	display: block;
	font-size: var(--mt-fs-sm);
}

.menutin-app-page .mt-user-meta span {
	font-size: var(--mt-fs-xs);
	color: var(--mt-color-muted);
}

.menutin-app-page .mt-user-menu {
	position: absolute;
	right: 0;
	top: calc(100% + 6px);
	z-index: 120;
	min-width: 210px;
	margin: 0;
	padding: 6px;
	list-style: none;
	background: var(--mt-color-surface);
	border: 1px solid var(--mt-color-border);
	border-radius: var(--mt-radius-md);
	box-shadow: var(--mt-shadow-md);
}

.menutin-app-page .mt-user-menu a {
	display: flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	padding: 8px 12px;
	border-radius: var(--mt-radius-sm);
	color: var(--mt-color-text);
	text-decoration: none;
	font-weight: 600;
}

.menutin-app-page .mt-user-menu a:hover {
	background: var(--mt-color-surface-hover);
}

.menutin-app-page .mt-user-menu .mt-ico {
	width: 17px;
	height: 17px;
	color: var(--mt-color-muted);
}

.menutin-app-page .mt-logout {
	color: var(--mt-color-text);
	font-size: var(--mt-fs-sm);
}

/* ==========================================================================
   4. MODEBAR (solo superadmin / avisos de contexto)
   ========================================================================== */
.menutin-app-page .mt-modebar {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--mt-space-sm);
	padding: 8px var(--mt-space-md);
	background: #fdf6e7;
	border-bottom: 1px solid #f0c98a;
	color: #7c2d12;
	font-size: var(--mt-fs-sm);
}

.menutin-app-page .mt-modebar-badge {
	display: inline-block;
	padding: 2px 10px;
	border-radius: var(--mt-radius-pill);
	background: #7c2d12;
	color: #fff;
	font-weight: 700;
	font-size: var(--mt-fs-xs);
	text-transform: uppercase;
	letter-spacing: .04em;
}

/* ==========================================================================
   5. LAYOUT · SIDEBAR · NAV · MAIN
   ========================================================================== */
.menutin-app-page .mt-layout {
	display: flex;
	flex: 1;
	min-height: 0;
}

.menutin-app-page .mt-sidebar {
	display: none;
	width: 248px;
	flex: none;
	background: var(--mt-color-surface);
	border-right: 1px solid var(--mt-color-border);
}

.menutin-app-page .mt-sidebar-scroll {
	display: flex;
	flex-direction: column;
	gap: var(--mt-space-md);
	padding: var(--mt-space-md) var(--mt-space-sm);
	overflow-y: auto;
	max-height: calc(100vh - var(--mt-topbar-h));
	position: sticky;
	top: var(--mt-topbar-h);
}

.menutin-app-page .mt-sidebar.open {
	display: block;
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	z-index: 100;
	width: min(300px, 84vw);
	overflow-y: auto;
	box-shadow: var(--mt-shadow-lg);
	animation: mt-slide-in 160ms ease-out;
}

@keyframes mt-slide-in {
	from {
		opacity: .4;
	}
	to {
		opacity: 1;
	}
}

.menutin-app-page .mt-overlay {
	display: block;
	position: fixed;
	inset: 0;
	z-index: 90;
	border: 0;
	padding: 0;
	background: rgba(16, 24, 40, .45);
	cursor: pointer;
}

.menutin-app-page .mt-overlay[hidden] {
	display: none;
}

.menutin-app-page .mt-navgroup-title {
	margin: 0 0 6px;
	padding: 0 var(--mt-space-md);
	font-size: var(--mt-fs-xs);
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: var(--mt-color-muted);
}

.menutin-app-page .mt-nav {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 2px;
}

.menutin-app-page .mt-nav a {
	display: flex;
	align-items: center;
	gap: 10px;
	min-height: 48px;
	padding: var(--mt-space-sm) var(--mt-space-md);
	border-radius: 10px;
	color: var(--mt-color-text);
	text-decoration: none;
	font-weight: 600;
	font-size: var(--mt-fs-sm);
	transition: background-color var(--mt-transition), color var(--mt-transition);
}

.menutin-app-page .mt-nav a .mt-ico {
	width: 18px;
	height: 18px;
	flex: none;
	color: var(--mt-color-muted);
}

.menutin-app-page .mt-nav a:hover {
	background: var(--mt-color-surface-hover);
}

.menutin-app-page .mt-nav a[aria-current="page"] {
	background: var(--mt-color-primary-soft);
	color: var(--mt-color-primary-dark);
	box-shadow: inset 3px 0 0 var(--mt-color-primary);
}

.menutin-app-page .mt-nav a[aria-current="page"] .mt-ico {
	color: var(--mt-color-primary);
}

.menutin-app-page .mt-nav-label {
	flex: 1;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.menutin-app-page .mt-nav-badge {
	flex: none;
	padding: 1px 8px;
	border-radius: var(--mt-radius-pill);
	background: var(--mt-color-primary);
	color: #fff;
	font-size: var(--mt-fs-xs);
	font-weight: 700;
}

.menutin-app-page .mt-main {
	flex: 1;
	min-width: 0;
	width: 100%;
	max-width: 1280px;
	margin: 0 auto;
	padding: var(--mt-space-md);
}

/* Fondo de trabajo solo en variantes de aplicación (no en páginas públicas) */
.menutin-app-page.menutin-app-admin .mt-layout,
.menutin-app-page.menutin-app-staff .mt-layout,
.menutin-app-page.menutin-app-superadmin .mt-layout {
	background: var(--mt-color-canvas);
}

.menutin-app-page .mt-bottomnav {
	position: sticky;
	bottom: 0;
	z-index: 50;
	display: flex;
	background: var(--mt-color-surface);
	border-top: 1px solid var(--mt-color-border);
	padding: var(--mt-space-xs);
	gap: 2px;
}

.menutin-app-page .mt-bottomnav a {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	text-align: center;
	color: var(--mt-color-muted);
	text-decoration: none;
	font-size: var(--mt-fs-xs);
	font-weight: 600;
	padding: 8px 2px;
	border-radius: var(--mt-radius-sm);
	min-height: 44px;
}

.menutin-app-page .mt-bottomnav a .mt-ico {
	width: 20px;
	height: 20px;
}

.menutin-app-page .mt-bottomnav a[aria-current="page"] {
	background: var(--mt-color-primary-soft);
	color: var(--mt-color-primary-dark);
}

/* ==========================================================================
   6. ENCABEZADOS (pagehead / apphead)
   ========================================================================== */
.menutin-app-page .mt-pagehead {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--mt-space-sm) var(--mt-space-md);
	margin: 0 0 var(--mt-space-md);
}

.menutin-app-page .mt-pagehead-main {
	min-width: 0;
}

.menutin-app-page .mt-pagehead-actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--mt-space-sm);
	align-items: center;
}

.menutin-app-page .mt-pagehead h1,
.menutin-app-page .mt-pagehead h2 {
	margin: 0 0 2px;
	font-size: clamp(1.5rem, 3.5vw, 1.75rem);
	line-height: var(--mt-lh-tight);
	letter-spacing: -.01em;
}

.menutin-app-page .mt-pagehead p {
	margin: 0;
	color: var(--mt-color-muted);
	font-size: var(--mt-fs-sm);
}

.menutin-app-page .mt-apphead {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--mt-space-md);
	margin: 0 0 var(--mt-space-lg);
}

.menutin-app-page .mt-apphead-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	flex: none;
	border-radius: var(--mt-radius-md);
	background: var(--mt-color-ink);
	color: #fff;
}

.menutin-app-page .mt-apphead-icon .mt-ico {
	width: 22px;
	height: 22px;
	margin: 0;
}

.menutin-app-page .mt-apphead-body {
	flex: 1;
	min-width: 180px;
}

.menutin-app-page .mt-apphead-body h1 {
	margin: 0;
	font-size: clamp(1.5rem, 3.5vw, 1.75rem);
	line-height: var(--mt-lh-tight);
	letter-spacing: -.01em;
}

.menutin-app-page .mt-apphead-body .mt-hint {
	margin: 2px 0 0;
}

.menutin-app-page .mt-apphead-action {
	display: flex;
	flex-wrap: wrap;
	gap: var(--mt-space-sm);
	align-items: center;
}

/* ==========================================================================
   7. BOTONES
   ========================================================================== */
.menutin-app-page .mt-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 44px;
	padding: 10px 18px;
	border-radius: var(--mt-radius-sm);
	border: 1px solid var(--mt-color-primary);
	background: var(--mt-color-primary);
	color: #fff;
	font-weight: 700;
	font-size: var(--mt-fs-sm);
	font-family: inherit;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: background-color var(--mt-transition), border-color var(--mt-transition), color var(--mt-transition);
}

.menutin-app-page .mt-btn .mt-ico {
	width: 17px;
	height: 17px;
	flex: none;
}

.menutin-app-page .mt-btn:hover,
.menutin-app-page .mt-btn:focus-visible {
	background: var(--mt-color-primary-dark);
	border-color: var(--mt-color-primary-dark);
	color: #fff;
}

.menutin-app-page .mt-btn--ghost {
	background: var(--mt-color-surface);
	border-color: var(--mt-color-border);
	color: var(--mt-color-text);
}

.menutin-app-page .mt-btn--ghost:hover,
.menutin-app-page .mt-btn--ghost:focus-visible {
	background: var(--mt-color-surface-hover);
	border-color: #cfd6d2;
	color: var(--mt-color-text);
}

.menutin-app-page .mt-btn--soft {
	background: var(--mt-color-primary-soft);
	border-color: var(--mt-color-primary-soft);
	color: var(--mt-color-primary-dark);
}

.menutin-app-page .mt-btn--soft:hover,
.menutin-app-page .mt-btn--soft:focus-visible {
	background: #dcefe4;
	border-color: #dcefe4;
	color: var(--mt-color-primary-dark);
}

.menutin-app-page .mt-btn--outline {
	background: transparent;
	border-color: var(--mt-color-primary);
	color: var(--mt-color-primary-dark);
}

.menutin-app-page .mt-btn--outline:hover,
.menutin-app-page .mt-btn--outline:focus-visible {
	background: var(--mt-color-primary-soft);
}

.menutin-app-page .mt-btn--danger {
	background: var(--mt-color-accent);
	border-color: var(--mt-color-accent);
	color: #fff;
}

.menutin-app-page .mt-btn--danger:hover,
.menutin-app-page .mt-btn--danger:focus-visible {
	background: #9c0e19;
	border-color: #9c0e19;
}

.menutin-app-page .mt-btn--sm {
	min-height: 38px;
	padding: 6px 14px;
	font-size: var(--mt-fs-sm);
}

.menutin-app-page .mt-btn--lg {
	min-height: 50px;
	padding: 14px 24px;
	font-size: var(--mt-fs-md);
}

.menutin-app-page .mt-btn--block {
	width: 100%;
}

.menutin-app-page .mt-btn[disabled] {
	opacity: .55;
	cursor: not-allowed;
}

.menutin-app-page .mt-iconbtn {
	padding: 8px;
	min-width: 40px;
}

.menutin-app-page .mt-iconbtn .mt-ico {
	width: 18px;
	height: 18px;
}

.menutin-app-page .mt-btn:focus-visible,
.menutin-app-page a:focus-visible,
.menutin-app-page input:focus-visible,
.menutin-app-page select:focus-visible,
.menutin-app-page textarea:focus-visible,
.menutin-app-page button:focus-visible,
.menutin-app-page summary:focus-visible {
	outline: 3px solid var(--mt-color-primary);
	outline-offset: 2px;
}

/* ==========================================================================
   8. GRIDS · CARDS · STATS
   ========================================================================== */
.menutin-app-page .mt-grid {
	display: grid;
	gap: var(--mt-space-md);
	grid-template-columns: 1fr;
}

.menutin-app-page .mt-card {
	background: var(--mt-color-surface);
	border: 1px solid var(--mt-color-border);
	border-radius: var(--mt-radius-md);
	padding: var(--mt-space-md);
	box-shadow: var(--mt-shadow-sm);
}

.menutin-app-page .mt-card h3 {
	margin: 0 0 4px;
	font-size: var(--mt-fs-sm);
	color: var(--mt-color-muted);
	font-weight: 600;
}

.menutin-app-page .mt-card--flat {
	box-shadow: none;
}

.menutin-app-page .mt-stat {
	background: var(--mt-color-surface);
	border: 1px solid var(--mt-color-border);
	border-radius: var(--mt-radius-md);
	padding: 14px 16px;
	box-shadow: var(--mt-shadow-sm);
	position: relative;
}

.menutin-app-page .mt-stat-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: var(--mt-radius-sm);
	background: var(--mt-color-bg-soft);
	color: var(--mt-color-primary);
	margin-bottom: 6px;
}

.menutin-app-page .mt-stat h3 {
	margin: 0 0 2px;
	font-size: var(--mt-fs-xs);
	text-transform: uppercase;
	letter-spacing: .04em;
	color: var(--mt-color-muted);
	font-weight: 700;
}

.menutin-app-page .mt-stat-value {
	margin: 0;
	font-size: var(--mt-fs-xl);
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: -.01em;
}

.menutin-app-page .mt-hint {
	margin: 4px 0 0;
	font-size: var(--mt-fs-sm);
	color: var(--mt-color-muted);
}

/* ==========================================================================
   9. BADGES
   ========================================================================== */
.menutin-app-page .mt-badge {
	display: inline-block;
	padding: 2px 10px;
	border-radius: var(--mt-radius-pill);
	font-size: var(--mt-fs-xs);
	font-weight: 700;
	background: #eef1f0;
	color: var(--mt-color-ink);
	white-space: nowrap;
}

.menutin-app-page .mt-badge--ok {
	background: #dcefe4;
	color: #14532d;
}

.menutin-app-page .mt-badge--warn {
	background: #fdeccd;
	color: #7c2d12;
}

.menutin-app-page .mt-badge--err {
	background: #fbe3e3;
	color: #7f1d1d;
}

.menutin-app-page .mt-badge--info {
	background: #dbe7fd;
	color: #1e3a8a;
}

.menutin-app-page .mt-badge--primary {
	background: var(--mt-color-primary-soft);
	color: var(--mt-color-primary-dark);
}

.menutin-app-page .mt-badge--neutral {
	background: #eef1f0;
	color: var(--mt-color-muted);
}

/* ==========================================================================
   10. FORMULARIOS
   ========================================================================== */
.menutin-app-page .mt-field {
	margin: 0 0 var(--mt-space-md);
}

.menutin-app-page .mt-field > label,
.menutin-app-page .mt-label {
	display: block;
	font-weight: 600;
	font-size: var(--mt-fs-sm);
	margin-bottom: 6px;
}

.menutin-app-page .mt-req {
	color: var(--mt-color-accent);
}

.menutin-app-page .mt-input,
.menutin-app-page .mt-select,
.menutin-app-page .mt-textarea {
	display: block;
	width: 100%;
	min-height: 44px;
	padding: 10px 12px;
	border: 1px solid #c3c9cd;
	border-radius: var(--mt-radius-sm);
	font-size: 16px;
	font-family: inherit;
	line-height: 1.3;
	background: var(--mt-color-surface);
	color: var(--mt-color-text);
	transition: border-color var(--mt-transition), box-shadow var(--mt-transition);
}

.menutin-app-page .mt-textarea {
	min-height: 96px;
	resize: vertical;
}

.menutin-app-page .mt-input:hover,
.menutin-app-page .mt-select:hover,
.menutin-app-page .mt-textarea:hover {
	border-color: #a9b2ae;
}

.menutin-app-page .mt-input:focus,
.menutin-app-page .mt-select:focus,
.menutin-app-page .mt-textarea:focus {
	border-color: var(--mt-color-primary);
	box-shadow: 0 0 0 3px rgba(42, 125, 79, .15);
	outline: none;
}

.menutin-app-page .mt-input[disabled],
.menutin-app-page .mt-select[disabled],
.menutin-app-page .mt-textarea[disabled] {
	background: var(--mt-color-bg-soft);
	color: var(--mt-color-muted);
	cursor: not-allowed;
}

.menutin-app-page .mt-field--err .mt-input,
.menutin-app-page .mt-field--err .mt-select,
.menutin-app-page .mt-field--err .mt-textarea {
	border-color: var(--mt-color-err);
}

.menutin-app-page .mt-field .mt-error,
.menutin-app-page .mt-error {
	color: var(--mt-color-err);
	font-size: var(--mt-fs-sm);
	margin: 4px 0 0;
}

.menutin-app-page .mt-help {
	color: var(--mt-color-muted);
	font-size: var(--mt-fs-xs);
	margin: 4px 0 0;
}

.menutin-app-page .mt-search {
	position: relative;
	margin: 0 0 var(--mt-space-md);
}

.menutin-app-page .mt-search-ico {
	position: absolute;
	left: 12px;
	top: 13px;
	display: inline-flex;
	color: var(--mt-color-muted);
	pointer-events: none;
}

.menutin-app-page .mt-search .mt-input {
	padding-left: 38px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235f6b76' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: 12px center;
}

/* ==========================================================================
   11. TABLAS
   ========================================================================== */
.menutin-app-page .mt-tablewrap {
	overflow-x: auto;
	border: 1px solid var(--mt-color-border);
	border-radius: var(--mt-radius-md);
	background: var(--mt-color-surface);
}

.menutin-app-page table.mt-table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--mt-fs-sm);
}

.menutin-app-page table.mt-table th,
.menutin-app-page table.mt-table td {
	text-align: left;
	padding: 10px 12px;
	border-bottom: 1px solid var(--mt-color-line);
	vertical-align: middle;
}

.menutin-app-page table.mt-table th {
	color: var(--mt-color-muted);
	font-weight: 700;
	font-size: var(--mt-fs-xs);
	text-transform: uppercase;
	letter-spacing: .04em;
	background: var(--mt-color-bg-soft);
}

.menutin-app-page table.mt-table tbody tr:last-child td {
	border-bottom: 0;
}

.menutin-app-page table.mt-table tbody tr:hover {
	background: var(--mt-color-surface-hover);
}

/* ==========================================================================
   12. ALERTAS · ESTADOS · CARGA
   ========================================================================== */
.menutin-app-page .mt-alert {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	border-radius: var(--mt-radius-md);
	padding: 12px 14px;
	margin: 0 0 var(--mt-space-md);
	border: 1px solid var(--mt-color-line);
	background: var(--mt-color-bg-soft);
	font-size: var(--mt-fs-sm);
}

.menutin-app-page .mt-alert-ico {
	display: inline-flex;
	flex: none;
	margin-top: 1px;
}

.menutin-app-page .mt-alert-ico .mt-ico {
	width: 17px;
	height: 17px;
}

.menutin-app-page .mt-alert--ok {
	border-color: #9fd3b4;
	background: #eef7f1;
	color: #14532d;
}

.menutin-app-page .mt-alert--warn {
	border-color: #f0c98a;
	background: #fdf6e7;
	color: #7c2d12;
}

.menutin-app-page .mt-alert--err {
	border-color: #f0a3a3;
	background: #fdf0f0;
	color: #7f1d1d;
}

.menutin-app-page .mt-alert--info {
	border-color: #a9c3f7;
	background: #eef4fe;
	color: #1e3a8a;
}

.menutin-app-page .mt-state {
	text-align: center;
	padding: var(--mt-space-xl) var(--mt-space-md);
	border: 1px dashed var(--mt-color-line);
	border-radius: var(--mt-radius-md);
	background: var(--mt-color-surface);
}

.menutin-app-page .mt-state-ico {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: var(--mt-color-bg-soft);
	color: var(--mt-color-muted);
	font-size: 1.5rem;
	line-height: 1;
}

.menutin-app-page .mt-state-ico .mt-ico {
	width: 24px;
	height: 24px;
}

.menutin-app-page .mt-state h3 {
	margin: var(--mt-space-sm) 0 4px;
	font-size: var(--mt-fs-lg);
}

.menutin-app-page .mt-state p {
	margin: 0 0 var(--mt-space-md);
	color: var(--mt-color-muted);
	font-size: var(--mt-fs-sm);
}

.menutin-app-page .mt-state-cta {
	margin: 0;
}

.menutin-app-page .mt-spinner {
	display: inline-block;
	width: 22px;
	height: 22px;
	border: 3px solid var(--mt-color-line);
	border-top-color: var(--mt-color-primary);
	border-radius: 50%;
	animation: mt-spin 1s linear infinite;
	vertical-align: middle;
}

@keyframes mt-spin {
	to {
		transform: rotate(360deg);
	}
}

.menutin-app-page .mt-skeleton {
	border-radius: var(--mt-radius-sm);
	background: linear-gradient(90deg, #eceef0 25%, #f7f8f9 50%, #eceef0 75%);
	background-size: 200% 100%;
	animation: mt-shimmer 1.2s ease-in-out infinite;
	min-height: 16px;
	margin: 0 0 8px;
}

@keyframes mt-shimmer {
	to {
		background-position: -200% 0;
	}
}

/* ==========================================================================
   13. TABS · TOOLBAR
   ========================================================================== */
.menutin-app-page .mt-tabs {
	display: flex;
	gap: 4px;
	overflow-x: auto;
	margin: 0 0 var(--mt-space-md);
	padding-bottom: 4px;
	scrollbar-width: thin;
}

.menutin-app-page .mt-tabs a {
	flex: none;
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	padding: 8px 14px;
	border-radius: var(--mt-radius-sm);
	text-decoration: none;
	color: var(--mt-color-muted);
	border: 1px solid transparent;
	font-weight: 600;
	font-size: var(--mt-fs-sm);
}

.menutin-app-page .mt-tabs a:hover {
	background: var(--mt-color-surface-hover);
	color: var(--mt-color-text);
}

.menutin-app-page .mt-tabs a[aria-current="page"] {
	background: var(--mt-color-primary-soft);
	color: var(--mt-color-primary-dark);
	border-color: #cfe6d8;
}

.menutin-app-page .mt-toolbar {
	display: flex;
	flex-wrap: wrap;
	gap: var(--mt-space-sm);
	align-items: center;
	justify-content: space-between;
	margin: 0 0 var(--mt-space-md);
}

.menutin-app-page .mt-toolbar-left,
.menutin-app-page .mt-toolbar-right {
	display: flex;
	flex-wrap: wrap;
	gap: var(--mt-space-sm);
	align-items: center;
}

/* ==========================================================================
   14. MODAL
   ========================================================================== */
.menutin-app-page .mt-modal {
	position: fixed;
	inset: 0;
	z-index: 200;
	display: none;
	align-items: flex-end;
	justify-content: center;
	background: rgba(16, 24, 40, .5);
	padding: 0;
}

.menutin-app-page .mt-modal.open {
	display: flex;
}

.menutin-app-page .mt-modal-box {
	background: var(--mt-color-surface);
	border-radius: var(--mt-radius-lg) var(--mt-radius-lg) 0 0;
	width: 100%;
	max-height: 92vh;
	overflow-y: auto;
	padding: 0;
	box-shadow: var(--mt-shadow-lg);
}

.menutin-app-page .mt-modal-head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;
	padding: 18px 20px 14px;
	border-bottom: 1px solid var(--mt-color-border);
	background: var(--mt-color-surface);
	position: sticky;
	top: 0;
}

.menutin-app-page .mt-modal-head h2 {
	margin: 0;
	font-size: var(--mt-fs-lg);
}

.menutin-app-page .mt-modal-head .mt-hint {
	margin: 2px 0 0;
}

.menutin-app-page .mt-modal-x {
	flex: none;
	width: 40px;
	height: 40px;
	border: 1px solid var(--mt-color-border);
	border-radius: var(--mt-radius-pill);
	background: var(--mt-color-surface);
	font-size: 1.3rem;
	line-height: 1;
	cursor: pointer;
}

.menutin-app-page .mt-modal-body {
	padding: 16px 20px;
}

.menutin-app-page .mt-modal-body .mt-section {
	margin-bottom: var(--mt-space-md);
}

.menutin-app-page .mt-modal-foot {
	display: flex;
	justify-content: flex-end;
	gap: 10px;
	padding: 12px 20px;
	border-top: 1px solid var(--mt-color-border);
	background: var(--mt-color-surface);
	position: sticky;
	bottom: 0;
}

/* ==========================================================================
   15. PASOS · CONEXIÓN
   ========================================================================== */
.menutin-app-page .mt-steps {
	display: flex;
	gap: 6px;
	list-style: none;
	margin: 0 0 var(--mt-space-md);
	padding: 0;
	overflow-x: auto;
}

.menutin-app-page .mt-steps li {
	flex: 1;
	min-width: 90px;
	text-align: center;
	font-size: var(--mt-fs-xs);
	font-weight: 700;
	color: var(--mt-color-muted);
	border-top: 4px solid var(--mt-color-line);
	padding-top: 6px;
}

.menutin-app-page .mt-steps li.done {
	color: var(--mt-color-ok);
	border-color: var(--mt-color-ok);
}

.menutin-app-page .mt-steps li.now {
	color: var(--mt-color-ink);
	border-color: var(--mt-color-primary);
}

.menutin-app-page .mt-conn {
	display: none;
	text-align: center;
	font-size: var(--mt-fs-sm);
	font-weight: 700;
	padding: 8px;
	background: #fbe3e3;
	color: #7f1d1d;
}

.menutin-app-page .mt-conn.show {
	display: block;
}

/* ==========================================================================
   16. MIGAS · ENLACES
   ========================================================================== */
.menutin-app-page .mt-crumbs ol {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	margin: 0 0 var(--mt-space-md);
	padding: 0;
	font-size: var(--mt-fs-sm);
	color: var(--mt-color-muted);
}

.menutin-app-page .mt-crumbs li + li::before {
	content: "›";
	margin-right: 4px;
}

.menutin-app-page .mt-crumbs a {
	color: var(--mt-color-primary);
	font-weight: 600;
	text-decoration: none;
}

.menutin-app-page .mt-crumbs a:hover {
	text-decoration: underline;
}

.menutin-app-page .mt-link {
	color: var(--mt-color-primary);
	font-weight: 600;
	font-size: var(--mt-fs-sm);
	text-decoration: none;
}

.menutin-app-page .mt-link:hover {
	text-decoration: underline;
}

/* «Cambiar plantilla» es un <button>, no un <a href="javascript:void(0)">:
   los enlaces javascript: se bloquean en WebViews y con CSP estricta. Como
   .mt-link solo define tipografía, el botón necesita despojarse de su
   apariencia nativa para no heredar el rectángulo gris del navegador. */
.menutin-app-page button.mt-link {
	background: none;
	border: 0;
	padding: 8px 2px;
	margin: 0;
	min-height: 40px;
	font-family: inherit;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

.menutin-app-page button.mt-link:focus-visible {
	outline: 2px solid var(--mt-color-primary);
	outline-offset: 2px;
}

/* ==========================================================================
   17. TOASTS
   ========================================================================== */
.menutin-app-page .mt-toasts {
	position: fixed;
	right: var(--mt-space-md);
	bottom: var(--mt-space-md);
	z-index: 300;
	display: flex;
	flex-direction: column;
	gap: 8px;
	max-width: min(360px, 90vw);
}

.menutin-app-page .mt-toast {
	background: var(--mt-color-ink);
	color: #fff;
	border-radius: var(--mt-radius-sm);
	padding: 10px 14px;
	font-size: var(--mt-fs-sm);
	font-weight: 600;
	box-shadow: var(--mt-shadow-lg);
	animation: mt-toast-in 160ms ease-out;
}

.menutin-app-page .mt-toast--ok {
	background: var(--mt-color-primary-dark);
}

.menutin-app-page .mt-toast--err {
	background: #7f1d1d;
}

@keyframes mt-toast-in {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

/* ==========================================================================
   18. ICONOS
   ========================================================================== */
.menutin-app-page .mt-ico {
	display: inline-block;
	width: 18px;
	height: 18px;
	vertical-align: middle;
	flex: none;
}

/* ==========================================================================
   19. TARJETA DE CONTEXTO (restaurante/sede del panel)
   ========================================================================== */
.menutin-app-page .mt-ctxcard {
	display: flex;
	flex-wrap: wrap;
	gap: var(--mt-space-sm);
	align-items: flex-end;
	background: var(--mt-color-surface);
	border: 1px solid var(--mt-color-border);
	border-radius: var(--mt-radius-md);
	padding: 12px 14px;
	margin: 0 0 var(--mt-space-md);
}

.menutin-app-page .mt-ctxcard .mt-field {
	flex: 1 1 180px;
	margin: 0;
	min-width: 0;
}

/* Selector de restaurante en topbar (solo opciones autorizadas). */
.menutin-app-page .mt-ctxswitch {
	position: relative;
}

.menutin-app-page .mt-ctxswitch summary {
	display: flex;
	align-items: center;
	gap: 6px;
	list-style: none;
	cursor: pointer;
	min-height: 44px;
	border: 1px solid var(--mt-color-border);
	border-radius: var(--mt-radius-sm);
	background: var(--mt-color-surface);
	padding: 4px 10px;
	font-weight: 700;
	font-size: var(--mt-fs-sm);
}

.menutin-app-page .mt-ctxswitch summary::-webkit-details-marker {
	display: none;
}

.menutin-app-page .mt-ctxswitch-menu {
	position: absolute;
	left: 0;
	top: calc(100% + 6px);
	z-index: 120;
	min-width: 220px;
	margin: 0;
	padding: 6px;
	list-style: none;
	background: var(--mt-color-surface);
	border: 1px solid var(--mt-color-border);
	border-radius: var(--mt-radius-md);
	box-shadow: var(--mt-shadow-md);
}

.menutin-app-page .mt-ctxswitch-menu button {
	display: block;
	width: 100%;
	text-align: left;
	min-height: 44px;
	padding: 8px 12px;
	border: 0;
	border-radius: var(--mt-radius-sm);
	background: transparent;
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}

.menutin-app-page .mt-ctxswitch-menu button:hover {
	background: var(--mt-color-surface-hover);
}

.menutin-app-page .mt-ctxswitch-menu button[aria-current="true"] {
	background: var(--mt-color-primary);
	color: #fff;
}

/* ==========================================================================
   20. UTILIDADES RESPONSIVE
   ========================================================================== */
.menutin-app-page .mt-only-mobile {
	display: block;
}

.menutin-app-page .mt-only-desktop {
	display: none;
}

@media (min-width: 700px) {
	.menutin-app-page .mt-grid--2 {
		grid-template-columns: repeat(2, 1fr);
	}

	.menutin-app-page .mt-grid--3 {
		grid-template-columns: repeat(2, 1fr);
	}

	.menutin-app-page .mt-main {
		padding: var(--mt-space-lg);
	}
}

@media (min-width: 1024px) {
	.menutin-app-page .mt-drawer-toggle {
		display: none;
	}

	.menutin-app-page .mt-sidebar,
	.menutin-app-page .mt-sidebar--always {
		display: block;
		position: static;
		box-shadow: none;
	}

	.menutin-app-page .mt-overlay {
		display: none;
	}

	.menutin-app-page .mt-grid--3 {
		grid-template-columns: repeat(3, 1fr);
	}

	.menutin-app-page .mt-grid--4 {
		grid-template-columns: repeat(4, 1fr);
	}

	.menutin-app-page .mt-modal {
		align-items: center;
		padding: var(--mt-space-lg);
	}

	.menutin-app-page .mt-modal-box {
		border-radius: var(--mt-radius-lg);
		max-width: 560px;
	}

	.menutin-app-page .mt-bottomnav {
		display: none;
	}

	.menutin-app-page .mt-only-mobile {
		display: none;
	}

	.menutin-app-page .mt-only-desktop {
		display: block;
	}
}

@media (max-width: 699px) {
	.menutin-app-page table.mt-table thead {
		display: none;
	}

	.menutin-app-page table.mt-table,
	.menutin-app-page table.mt-table tbody,
	.menutin-app-page table.mt-table tr,
	.menutin-app-page table.mt-table td {
		display: block;
		width: 100%;
	}

	.menutin-app-page .mt-tablewrap {
		border: 0;
		background: transparent;
		overflow: visible;
	}

	.menutin-app-page table.mt-table tr {
		border: 1px solid var(--mt-color-line);
		border-radius: var(--mt-radius-md);
		margin-bottom: var(--mt-space-sm);
		padding: var(--mt-space-sm);
		background: var(--mt-color-surface);
	}

	.menutin-app-page table.mt-table td {
		border: 0;
		padding: 4px 0;
	}

	.menutin-app-page table.mt-table td::before {
		content: attr(data-label);
		display: block;
		font-size: var(--mt-fs-xs);
		color: var(--mt-color-muted);
		font-weight: 700;
		text-transform: uppercase;
		letter-spacing: .04em;
	}
}
/* Secciones del panel (respiro consistente, sin márgenes mágicos) */
.menutin-app-page .mt-section {
	margin: 0 0 var(--mt-space-lg);
}

.menutin-app-page .mt-section > h2 {
	margin: 0 0 4px;
	font-size: var(--mt-fs-lg);
}

.menutin-app-page .mt-section > .mt-hint {
	margin-bottom: var(--mt-space-md);
}

/* Héroe de identidad */
.menutin-app-page .mt-hero {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--mt-space-sm) var(--mt-space-md);
	margin: 0 0 var(--mt-space-md);
	padding: var(--mt-space-sm) 0;
	border-bottom: 1px solid var(--mt-color-line);
	padding-bottom: var(--mt-space-md);
}

/* Variante compacta (Mi Restaurante): una fila de ~60–80px. */
.menutin-app-page .mt-hero--compact .mt-hero-avatar {
	width: 44px;
	height: 44px;
	border-radius: var(--mt-radius-sm);
}

.menutin-app-page .mt-hero--compact .mt-hero-avatar .mt-ico {
	width: 22px;
	height: 22px;
}

.menutin-app-page .mt-hero--compact .mt-hero-body h1 {
	font-size: clamp(1.25rem, 3vw, 1.6rem);
}

.menutin-app-page .mt-hero-avatar {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	flex: none;
	border-radius: var(--mt-radius-md);
	background: var(--mt-color-ink);
	color: #fff;
}

.menutin-app-page .mt-hero-avatar .mt-ico {
	width: 28px;
	height: 28px;
	margin: 0;
}

.menutin-app-page .mt-hero-body {
	flex: 1;
	min-width: 200px;
}

.menutin-app-page .mt-hero-body h1 {
	margin: 0;
	font-size: var(--mt-fs-xl);
	line-height: 1.2;
}

.menutin-app-page .mt-hero-badges {
	margin: 4px 0 0;
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.menutin-app-page .mt-hero-action {
	flex-basis: 100%;
}

@media (min-width: 700px) {
	.menutin-app-page .mt-hero-action {
		flex-basis: auto;
		margin-left: auto;
	}
}

/* Punto de estado */
.menutin-app-page .mt-dot {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-weight: 700;
	font-size: var(--mt-fs-sm);
}

.menutin-app-page .mt-dot--ok {
	color: var(--mt-color-ok);
}

.menutin-app-page .mt-dot--warn {
	color: var(--mt-color-warn);
}

.menutin-app-page .mt-dot--err {
	color: var(--mt-color-err);
}

.menutin-app-page .mt-dot--muted {
	color: var(--mt-color-muted);
}

/* Tarjeta URL destacada */
.menutin-app-page .mt-urlcard {
	border: 2px solid var(--mt-color-primary);
	border-radius: var(--mt-radius-md);
	padding: var(--mt-space-md);
	background: #fff;
	margin: 0 0 var(--mt-space-md);
}

.menutin-app-page .mt-urlcard-url {
	margin: 0 0 var(--mt-space-sm);
}

.menutin-app-page .mt-urlcard-url code {
	display: block;
	font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
	font-size: var(--mt-fs-md);
	word-break: break-all;
	background: var(--mt-color-bg-soft);
	border-radius: var(--mt-radius-sm);
	padding: 10px 12px;
}

.menutin-app-page .mt-urlcard-btns {
	display: flex;
	flex-wrap: wrap;
	gap: var(--mt-space-sm);
	margin: 0;
}

.menutin-app-page .mt-urlcard-btns .mt-btn {
	flex: 1 1 auto;
}

@media (min-width: 700px) {
	.menutin-app-page .mt-urlcard-btns .mt-btn {
		flex: none;
	}
}

/* Tarjetas de acceso */
.menutin-app-page .mt-actioncard {
	background: var(--mt-color-bg);
	border: 1px solid var(--mt-color-line);
	border-radius: var(--mt-radius-md);
	padding: var(--mt-space-md);
	box-shadow: var(--mt-shadow-sm);
}

.menutin-app-page .mt-actioncard-head {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 4px;
	font-size: var(--mt-fs-md);
}

.menutin-app-page .mt-actioncard-head .mt-ico {
	width: 22px;
	height: 22px;
	color: var(--mt-color-primary);
}

/* Lista discreta (información secundaria) */
.menutin-app-page .mt-deflist {
	margin: 0;
	padding: var(--mt-space-md);
	background: var(--mt-color-bg-soft);
	border-radius: var(--mt-radius-md);
	display: grid;
	gap: var(--mt-space-sm);
}

.menutin-app-page .mt-deflist > div {
	display: flex;
	justify-content: space-between;
	gap: var(--mt-space-md);
	font-size: var(--mt-fs-sm);
}

.menutin-app-page .mt-deflist dt {
	color: var(--mt-color-muted);
}

.menutin-app-page .mt-deflist dd {
	margin: 0;
	font-weight: 600;
	text-align: right;
}

/* Formulario en dos columnas (desktop) */
@media (min-width: 700px) {
	.menutin-app-page .mt-formgrid {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 0 var(--mt-space-md);
	}

	.menutin-app-page .mt-formgrid .mt-span {
		grid-column: 1 / -1;
	}
}

/* Resumen con avatar y columnas (referencia SaaS). */
.menutin-app-page .mt-summary {
	background: var(--mt-color-surface);
	border: 1px solid var(--mt-color-border);
	border-radius: var(--mt-radius-md);
	padding: 20px;
	box-shadow: var(--mt-shadow-sm);
	margin: 0 0 var(--mt-space-lg);
}

.menutin-app-page .mt-summary-id {
	display: flex;
	gap: var(--mt-space-md);
	align-items: center;
}

.menutin-app-page .mt-summary-avatar {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 72px;
	height: 72px;
	flex: none;
	border-radius: var(--mt-radius-md);
	background: var(--mt-color-primary-dark);
	color: #fff;
}

.menutin-app-page .mt-summary-avatar .mt-ico {
	width: 34px;
	height: 34px;
	margin: 0;
}

.menutin-app-page .mt-summary-name {
	margin: 0;
	font-size: var(--mt-fs-lg);
	font-weight: 800;
}

.menutin-app-page .mt-summary-badges {
	margin: 4px 0 0;
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.menutin-app-page .mt-summary-stats {
	display: grid;
	gap: var(--mt-space-md);
	margin-top: var(--mt-space-md);
	padding-top: var(--mt-space-md);
	border-top: 1px solid var(--mt-color-border);
}

@media (min-width: 700px) {
	.menutin-app-page .mt-summary-stats {
		grid-template-columns: repeat(3, 1fr);
	}

	.menutin-app-page .mt-summary-stats .mt-statcol + .mt-statcol {
		border-left: 1px solid var(--mt-color-border);
		padding-left: var(--mt-space-md);
	}
}

.menutin-app-page .mt-statcol-label {
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 0 0 2px;
	font-size: var(--mt-fs-sm);
	color: var(--mt-color-muted);
	font-weight: 600;
}

.menutin-app-page .mt-statcol-label .mt-ico {
	width: 18px;
	height: 18px;
	margin: 0;
}

.menutin-app-page .mt-statcol-value {
	margin: 0;
	font-size: var(--mt-fs-lg);
	font-weight: 800;
}

/* Barra resumen compacta de Mi restaurante (una fila, sin tarjeta grande). */
.menutin-app-page .mt-restbar {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	background: var(--mt-color-surface);
	border: 1px solid var(--mt-color-border);
	border-radius: var(--mt-radius-md);
	padding: 10px 14px;
	margin: 0 0 var(--mt-space-md);
	box-shadow: var(--mt-shadow-sm);
}

.menutin-app-page .mt-restbar-avatar {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	flex: none;
	border-radius: var(--mt-radius-sm);
	background: var(--mt-color-primary-dark);
	color: #fff;
}

.menutin-app-page .mt-restbar-avatar .mt-ico {
	width: 20px;
	height: 20px;
	margin: 0;
}

.menutin-app-page .mt-restbar-main {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
	min-width: 0;
	font-size: var(--mt-fs-sm);
}

.menutin-app-page .mt-restbar-sep {
	color: var(--mt-color-border);
}

/* Accesos rápidos compactos (fila de enlaces, sin tarjetas grandes). */
.menutin-app-page .mt-quicklinks {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 var(--mt-space-md);
}

.menutin-app-page .mt-quicklink {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	padding: 8px 14px;
	border: 1px solid var(--mt-color-border);
	border-radius: var(--mt-radius-pill);
	background: var(--mt-color-surface);
	color: var(--mt-color-text);
	text-decoration: none;
	font-weight: 600;
	font-size: var(--mt-fs-sm);
}

.menutin-app-page .mt-quicklink:hover {
	border-color: var(--mt-color-primary);
	color: var(--mt-color-primary);
}

.menutin-app-page .mt-quicklink .mt-ico {
	width: 18px;
	height: 18px;
	margin: 0;
	color: var(--mt-color-primary);
}

/* Tarjeta menú público (tinte verde + QR lateral). */
.menutin-app-page .mt-pubmenu {
	background: #eef7f1;
	border: 1px solid #d3e8db;
	border-radius: var(--mt-radius-md);
	padding: 20px;
	margin: 0 0 var(--mt-space-lg);
}

.menutin-app-page .mt-pubmenu-head {
	display: flex;
	gap: 10px;
	align-items: center;
	margin: 0 0 2px;
	font-size: var(--mt-fs-lg);
	font-weight: 800;
}

.menutin-app-page .mt-pubmenu-head .mt-ico {
	color: var(--mt-color-primary);
}

.menutin-app-page .mt-pubmenu-urlrow {
	display: flex;
	flex-wrap: wrap;
	gap: var(--mt-space-sm);
	align-items: stretch;
	margin: var(--mt-space-md) 0;
}

.menutin-app-page .mt-pubmenu-url {
	flex: 1 1 220px;
	display: flex;
	align-items: center;
	gap: 8px;
	background: var(--mt-color-surface);
	border: 1px solid var(--mt-color-border);
	border-radius: var(--mt-radius-sm);
	padding: 10px 12px;
	min-width: 0;
}

.menutin-app-page .mt-pubmenu-url code {
	font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
	font-size: var(--mt-fs-sm);
	word-break: break-all;
}

.menutin-app-page .mt-pubmenu-qr {
	display: flex;
	gap: var(--mt-space-md);
	align-items: center;
	margin: var(--mt-space-md) 0;
}

.menutin-app-page .mt-pubmenu-qr .menutin-qr {
	background: #fff;
	border: 1px solid var(--mt-color-border);
	border-radius: var(--mt-radius-sm);
	padding: 8px;
}

.menutin-app-page .mt-pubmenu-qr .menutin-qr svg {
	display: block;
	width: 120px;
	height: auto;
}

.menutin-app-page .mt-pubmenu-note {
	font-family: Georgia, "Times New Roman", serif;
	font-style: italic;
	color: var(--mt-color-muted);
	margin: 0;
}

.menutin-app-page details.mt-disclosure {
	border: 1px solid var(--mt-color-border);
	border-radius: var(--mt-radius-sm);
	background: var(--mt-color-surface);
	margin-top: var(--mt-space-md);
}

.menutin-app-page details.mt-disclosure > summary {
	display: flex;
	align-items: center;
	gap: 8px;
	min-height: 48px;
	padding: 8px 12px;
	cursor: pointer;
	font-weight: 700;
	list-style: none;
}

.menutin-app-page details.mt-disclosure > summary::-webkit-details-marker {
	display: none;
}

.menutin-app-page details.mt-disclosure > summary::before {
	content: "⌄";
}

.menutin-app-page details.mt-disclosure[open] > summary::before {
	content: "⌃";
}

.menutin-app-page details.mt-disclosure > summary .mt-disclosure-go {
	margin-left: auto;
	color: var(--mt-color-muted);
}

.menutin-app-page details.mt-disclosure .mt-disclosure-body {
	padding: 0 12px 12px;
}

/* Columnas contenido + lateral (info + preview). */
@media (min-width: 1024px) {
	.menutin-app-page .mt-cols-2 {
		display: grid;
		grid-template-columns: 2fr 1fr;
		gap: var(--mt-space-lg);
		align-items: start;
	}
}

/* Cuenta: título + stats. */
.menutin-app-page .mt-account {
	display: grid;
	gap: var(--mt-space-md);
	background: var(--mt-color-surface);
	border: 1px solid var(--mt-color-border);
	border-radius: var(--mt-radius-md);
	padding: 20px;
	box-shadow: var(--mt-shadow-sm);
}

@media (min-width: 700px) {
	.menutin-app-page .mt-account {
		grid-template-columns: 1fr auto;
		align-items: center;
	}

	.menutin-app-page .mt-account-stats {
		display: flex;
		gap: var(--mt-space-lg);
	}
}

.menutin-app-page .mt-account-stats .mt-statcol-value {
	font-size: var(--mt-fs-md);
}

.menutin-app-page .mt-stat-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: var(--mt-radius-sm);
	background: var(--mt-color-bg-soft);
	color: var(--mt-color-primary);
	margin-bottom: 6px;
}

/* Buscador SaaS con icono (fondo del input). */
.menutin-app-page .mt-search .mt-input {
	padding-left: 36px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235f6b76' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: 12px center;
}

/* Filtros compactos sin caja gigante. */
.menutin-app-page .mt-filters--compact {
	background: none;
	border: 0;
	padding: 0;
	box-shadow: none;
}

/* Checkbox premium tipo tarjeta seleccionable. */
.menutin-app-page .mt-checks {
	display: grid;
	gap: 8px;
}

.menutin-app-page .mt-check {
	display: flex;
	align-items: center;
	gap: 10px;
	border: 1px solid var(--mt-color-border);
	border-radius: var(--mt-radius-md);
	padding: 10px 14px;
	cursor: pointer;
	font-weight: 600;
	min-height: 48px;
}

.menutin-app-page .mt-check:has(input:checked) {
	border-color: var(--mt-color-primary);
	background: var(--mt-color-bg-soft);
}

.menutin-app-page .mt-check input {
	width: 18px;
	height: 18px;
	accent-color: var(--mt-color-primary);
	flex: none;
}

/* Segmentado Activa/Inactiva. */
.menutin-app-page .mt-label {
	display: block;
	font-weight: 600;
	margin-bottom: 6px;
}

.menutin-app-page .mt-seg {
	display: inline-flex;
	border: 1px solid var(--mt-color-border);
	border-radius: var(--mt-radius-pill);
	padding: 3px;
	gap: 3px;
}

.menutin-app-page .mt-seg-opt {
	display: inline-flex;
	cursor: pointer;
}

.menutin-app-page .mt-seg-opt input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.menutin-app-page .mt-seg-opt span {
	display: inline-block;
	padding: 8px 18px;
	border-radius: var(--mt-radius-pill);
	font-weight: 600;
	font-size: var(--mt-fs-sm);
	min-height: 40px;
}

.menutin-app-page .mt-seg-opt input:checked + span {
	background: var(--mt-color-primary);
	color: #fff;
}

.menutin-app-page .mt-seg-opt input:focus-visible + span {
	outline: 2px solid var(--mt-color-accent);
	outline-offset: 2px;
}

/* Modal premium (diálogo centrado, reutiliza .mt-modal). */
.menutin-app-page .mt-modal--premium {
	align-items: center;
	padding: var(--mt-space-md);
}

.menutin-app-page .mt-modal-overlay {
	position: absolute;
	inset: 0;
}

.menutin-app-page .mt-modal-box--premium {
	position: relative;
	border-radius: var(--mt-radius-lg);
	width: 100%;
	max-width: 720px;
	max-height: 88vh;
	display: flex;
	flex-direction: column;
	padding: 0;
	overflow: hidden;
	box-shadow: 0 24px 64px rgba(16, 24, 40, .25);
}

.menutin-app-page .mt-modal-head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;
	padding: 18px 20px 14px;
	border-bottom: 1px solid var(--mt-color-border);
	background: var(--mt-color-surface);
	flex: none;
}

.menutin-app-page .mt-modal-kicker {
	margin: 0 0 2px;
	font-size: var(--mt-fs-xs);
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: var(--mt-color-primary);
}

.menutin-app-page .mt-modal-head h2 {
	margin: 0;
	font-size: var(--mt-fs-lg);
}

.menutin-app-page .mt-modal-head .mt-hint {
	margin: 2px 0 0;
}

.menutin-app-page .mt-modal-x {
	flex: none;
	width: 40px;
	height: 40px;
	border: 1px solid var(--mt-color-border);
	border-radius: var(--mt-radius-pill);
	background: var(--mt-color-surface);
	font-size: 1.3rem;
	line-height: 1;
	cursor: pointer;
}

.menutin-app-page .mt-modal-body {
	padding: 16px 20px;
	overflow-y: auto;
	flex: 1;
	min-height: 0;
}

.menutin-app-page .mt-modal-body .mt-section {
	margin-bottom: var(--mt-space-md);
}

.menutin-app-page .mt-modal-foot {
	position: sticky;
	bottom: 0;
	display: flex;
	justify-content: flex-end;
	gap: 10px;
	padding: 12px 20px;
	border-top: 1px solid var(--mt-color-border);
	background: var(--mt-color-surface);
	flex: none;
}

@media (max-width: 640px) {
	.menutin-app-page .mt-modal--premium {
		padding: 0;
		align-items: flex-end;
	}
	.menutin-app-page .mt-modal-box--premium {
		max-width: none;
		max-height: 94vh;
		border-radius: var(--mt-radius-lg) var(--mt-radius-lg) 0 0;
	}
}
.menutin-app-page .mt-stat {
	background: var(--mt-color-surface);
	border: 1px solid var(--mt-color-border);
	border-radius: var(--mt-radius-md);
	padding: 14px 16px;
	box-shadow: var(--mt-shadow-sm);
}

.menutin-app-page .mt-stat h3 {
	margin: 0 0 2px;
	font-size: var(--mt-fs-xs);
	text-transform: uppercase;
	letter-spacing: .04em;
	color: var(--mt-color-muted);
	font-weight: 700;
}

.menutin-app-page .mt-stat-value {
	margin: 0;
	font-size: var(--mt-fs-xl);
	font-weight: 800;
	line-height: 1.2;
}

/* Lista compacta de filas (título + meta + acciones en línea). */
.menutin-app-page .mt-rowlist {
	list-style: none;
	margin: 0 0 var(--mt-space-md);
	padding: 0;
	display: grid;
	gap: 8px;
}

.menutin-app-page .mt-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 12px;
	background: var(--mt-color-surface);
	border: 1px solid var(--mt-color-border);
	border-radius: var(--mt-radius-md);
	padding: 10px 14px;
}

.menutin-app-page .mt-row-main {
	flex: 1;
	min-width: 180px;
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
}

.menutin-app-page .mt-row-actions {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	margin-left: auto;
}

.menutin-app-page .mt-row-actions .mt-btn {
	min-height: 40px;
	padding: 6px 14px;
	font-size: var(--mt-fs-sm);
}

/* Paginación compacta. */
.menutin-app-page .mt-pagination {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--mt-space-md);
	margin: var(--mt-space-md) 0;
}

/* Barra de filtros horizontal (se apila en móvil). */
.menutin-app-page .mt-filters {
	display: flex;
	flex-wrap: wrap;
	gap: var(--mt-space-sm);
	align-items: flex-end;
	background: var(--mt-color-surface);
	border: 1px solid var(--mt-color-border);
	border-radius: var(--mt-radius-md);
	padding: 12px 14px;
	margin: 0 0 var(--mt-space-md);
}

.menutin-app-page .mt-filters .mt-field {
	flex: 1 1 160px;
	margin: 0;
	min-width: 0;
}

.menutin-app-page .mt-filters .mt-filters-actions {
	display: flex;
	gap: 8px;
	align-items: center;
}

/* Buscador de direcciones (módulo sedes): sugerencias apiladas. */
.menutin-app-page .mt-suggest {
	display: grid;
	gap: 6px;
	margin-top: 8px;
}

.menutin-app-page .mt-suggest:empty {
	display: none;
}

.menutin-app-page .mt-suggest-item {
	display: block;
	width: 100%;
	text-align: left;
	background: var(--mt-color-surface);
	border: 1px solid var(--mt-color-border);
	border-radius: var(--mt-radius-md);
	padding: 10px 14px;
	font-size: var(--mt-fs-sm);
	cursor: pointer;
	min-height: 44px;
}

.menutin-app-page .mt-suggest-item:hover,
.menutin-app-page .mt-suggest-item:focus-visible {
	border-color: var(--mt-color-accent);
	outline: 2px solid var(--mt-color-accent);
	outline-offset: 1px;
}

.menutin-app-page .mt-suggest-ok {
	color: var(--mt-color-ok, #1a7f37);
	font-weight: 700;
}

/* Filas densas de sede (dashboard): identidad + meta + acciones. */
.menutin-app-page .mt-branch {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 16px;
	background: var(--mt-color-surface);
	border: 1px solid var(--mt-color-border);
	border-radius: var(--mt-radius-md);
	padding: 12px 16px;
	margin: 0 0 10px;
}

.menutin-app-page .mt-branch-main {
	flex: 1;
	min-width: 220px;
}

.menutin-app-page .mt-branch-title {
	margin: 0 0 2px;
	font-size: var(--mt-fs-md);
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
}

.menutin-app-page .mt-branch .mt-hint {
	margin: 0 0 2px;
}

.menutin-app-page .mt-branch-meta {
	margin: 0;
	font-size: var(--mt-fs-sm);
	color: var(--mt-color-muted);
}

/* Card premium de sede (1.5.12): compacta, misma información. */
.menutin-app-page .mt-branch--card {
	display: block;
	padding: 12px 16px 10px;
}

.menutin-app-page .mt-branch-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	margin-bottom: 4px;
}

.menutin-app-page .mt-branch-status {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: var(--mt-fs-xs);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: var(--mt-color-muted);
}

.menutin-app-page .mt-branch-name {
	margin: 0;
	font-size: var(--mt-fs-md);
	line-height: 1.3;
}

.menutin-app-page .mt-branch-loc {
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 4px 0 0;
	font-size: var(--mt-fs-sm);
	color: var(--mt-color-muted);
}

.menutin-app-page .mt-branch-loc .mt-ico {
	width: 15px;
	height: 15px;
	flex: none;
}

.menutin-app-page .mt-branch-chips {
	margin: 6px 0 0;
}

.menutin-app-page .mt-branch-foot {
	display: flex;
	gap: 16px;
	margin-top: 8px;
	padding-top: 8px;
	border-top: 1px solid var(--mt-color-border);
}

.menutin-app-page .mt-branch-actions {
	display: flex;
	gap: 8px;
	align-items: center;
	flex-wrap: wrap;
	margin-left: auto;
}

.menutin-app-page .mt-branch-actions .mt-btn {
	min-height: 40px;
	padding: 6px 14px;
	font-size: var(--mt-fs-sm);
}

.menutin-app-page .mt-more {
	display: inline-block;
	position: relative;
}

.menutin-app-page .mt-more summary {
	list-style: none;
	cursor: pointer;
	border: 1px solid var(--mt-color-border);
	border-radius: var(--mt-radius-md);
	padding: 6px 14px;
	font-size: var(--mt-fs-sm);
	min-height: 40px;
	display: inline-flex;
	align-items: center;
	background: var(--mt-color-surface);
}

.menutin-app-page .mt-more summary::-webkit-details-marker {
	display: none;
}

.menutin-app-page .mt-more summary::after {
	content: ' ▾';
}

.menutin-app-page .mt-more form {
	position: absolute;
	right: 0;
	top: calc(100% + 4px);
	z-index: 5;
	background: var(--mt-color-surface);
	border: 1px solid var(--mt-color-border);
	border-radius: var(--mt-radius-md);
	padding: 8px;
	box-shadow: var(--mt-shadow-sm);
}

@media (max-width: 640px) {
	.menutin-app-page .mt-branch-actions {
		margin-left: 0;
		width: 100%;
	}
	.menutin-app-page .mt-more form {
		position: static;
		box-shadow: none;
	}
}

/* Constructor de diseño (1.6.3): editor por secciones + vista previa en vivo. */
.menutin-app-page .mt-designer {
	display: grid;
	gap: var(--mt-space-lg);
	margin-top: var(--mt-space-md);
}

@media (min-width: 1024px) {
	.menutin-app-page .mt-designer {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
		align-items: start;
	}

	.menutin-app-page .mt-designer-preview {
		position: sticky;
		top: 76px;
	}
}

.menutin-app-page .mt-designer-form .mt-section {
	margin-bottom: var(--mt-space-lg);
}

.menutin-app-page .mt-designer-form .mt-section > h2 {
	padding-bottom: 6px;
	border-bottom: 1px solid var(--mt-color-border);
}

.menutin-app-page .mt-designer-save {
	position: sticky;
	bottom: 0;
	margin: var(--mt-space-md) 0 0;
	padding-top: var(--mt-space-sm);
	background: linear-gradient(180deg, rgba(255, 255, 255, 0), var(--mt-color-surface) 35%);
}

/* --- Selector de plantillas: catálogo a pantalla completa (1.7.19) -------
   Medido en el panel real: el cajón izquierdo mide 271px y la rejilla 206px,
   así que las 16 tarjetas salían a UNA por fila en PC y también en móvil
   (306px útiles no admiten dos columnas de 150px + separación). El catálogo
   se convierte en una capa del tamaño del modal de sedas: 4 columnas en PC,
   3 en tablet y 2 en móvil, con la rejilla interior propia y desplazable. */
.menutin-app-page .mt-designer-tpl-grid {
	position: fixed;
	inset: 0;
	z-index: 200;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	padding: 0;
	background: rgba(16, 24, 40, .5);
}

/* `display: flex` gana al `[hidden]` del navegador: sin esta regla el catálogo
   sale abierto al cargar y el botón «Cambiar plantilla» no esconde nada. */
.menutin-app-page .mt-designer-tpl-grid[hidden] {
	display: none;
}

.menutin-app-page .mt-designer-tpl-sheet {
	display: flex;
	flex-direction: column;
	gap: 12px;
	width: 100%;
	max-height: 92vh;
	padding: 14px 14px calc(12px + env(safe-area-inset-bottom));
	border-radius: var(--mt-radius-lg) var(--mt-radius-lg) 0 0;
	background: var(--mt-color-surface);
	box-shadow: var(--mt-shadow-lg);
}

/* El foco aterriza en la hoja (dialog), no en un control: sin outline propio. */
.menutin-app-page .mt-designer-tpl-sheet:focus {
	outline: none;
}

.menutin-app-page .mt-designer-tpl-head {
	display: flex;
	flex: 0 0 auto;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;
}

.menutin-app-page .mt-designer-tpl-title {
	margin: 0;
	font-size: var(--mt-fs-lg);
	font-weight: 800;
}

.menutin-app-page .mt-designer-tpl-head .mt-hint {
	display: block;
	margin-top: 2px;
}

.menutin-app-page .mt-designer-tpl-close {
	flex: none;
	width: 40px;
	height: 40px;
	border: 1px solid var(--mt-color-border);
	border-radius: var(--mt-radius-pill);
	background: var(--mt-color-surface);
	color: var(--mt-color-text);
	font-size: 1.3rem;
	line-height: 1;
	cursor: pointer;
}

/* La rejilla de tarjetas es el único bloque que se desplaza: la cabecera y el
   pie quedan fijos mientras se repasan las 16 plantillas. */
.menutin-app-page .mt-designer-tpl-cards {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
	min-height: 0;
	overflow-y: auto;
	padding-right: 4px;
	touch-action: pan-y;
}

.menutin-app-page .mt-designer-tpl-foot {
	display: flex;
	flex: 0 0 auto;
	justify-content: flex-end;
	gap: 8px;
	padding-top: 2px;
	border-top: 1px solid var(--mt-color-border);
}

@media (min-width: 768px) {
	.menutin-app-page .mt-designer-tpl-grid {
		align-items: center;
		padding: var(--mt-space-lg);
	}

	.menutin-app-page .mt-designer-tpl-sheet {
		width: min(940px, 100%);
		padding: 18px;
		border-radius: var(--mt-radius-lg);
		max-height: 86vh;
	}

	.menutin-app-page .mt-designer-tpl-cards {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (min-width: 1100px) {
	.menutin-app-page .mt-designer-tpl-cards {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

@media (prefers-reduced-motion: reduce) {
	.menutin-app-page .mt-tplcard {
		transition: none;
	}
}

.menutin-app-page .mt-tplcard {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 5px;
	padding: 7px;
	border: 2px solid var(--mt-color-border);
	border-radius: var(--mt-radius-md);
	background: var(--mt-color-surface);
	cursor: pointer;
	transition: border-color var(--mt-transition), box-shadow var(--mt-transition);
}

.menutin-app-page .mt-tplcard:hover {
	border-color: #cfd6d2;
}

.menutin-app-page .mt-tplcard input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.menutin-app-page .mt-tplcard:has(input:checked) {
	border-color: var(--mt-color-primary);
	box-shadow: 0 0 0 3px rgba(42, 125, 79, .15);
}

/* El radio está oculto: sin este anillo, teclado no tiene dónde mirarse. */
.menutin-app-page .mt-tplcard:has(input:focus-visible) {
	outline: 2px solid var(--mt-color-primary);
	outline-offset: 2px;
}

.menutin-app-page .mt-tplcard-name {
	display: block;
	font-weight: 700;
	font-size: var(--mt-fs-sm);
}

.menutin-app-page .mt-tplcard .mt-hint {
	font-size: var(--mt-fs-xs);
	line-height: 1.3;
}

.menutin-app-page .mt-tplcard-pick {
	display: none;
	position: absolute;
	top: 0;
	right: 0;
	padding: 2px 8px;
	border-radius: 0 var(--mt-radius-md) 0 var(--mt-radius-md);
	background: var(--mt-color-primary);
	color: #fff;
	font-size: .68rem;
	font-weight: 800;
	letter-spacing: .04em;
	text-transform: uppercase;
}

.menutin-app-page .mt-tplcard:has(input:checked) .mt-tplcard-pick {
	display: block;
}

/* La maqueta: cada bloque viene de la composición de la plantilla (hero,
   sidebar, navegación, layout y columnas) y de sus tokens, vía variables
   `--tt-*` que pone AdminDesign::tpl_thumb(). */
.menutin-app-page .mt-tplthumb {
	display: flex;
	flex-direction: column;
	gap: 3px;
	aspect-ratio: 4 / 3;
	padding: 4px;
	border: 1px solid var(--tt-b);
	border-radius: 7px;
	background: var(--tt-bg);
	overflow: hidden;
}

.menutin-app-page .mtt-hero {
	flex: 0 0 auto;
	height: 22%;
	border-radius: calc(var(--tt-r) / 3);
	background: linear-gradient(120deg, var(--tt-p), var(--tt-a));
}

.menutin-app-page .mt-tplthumb[data-hero="lg"] .mtt-hero {
	height: 38%;
}

.menutin-app-page .mt-tplthumb[data-hero="md"] .mtt-hero {
	height: 27%;
}

.menutin-app-page .mt-tplthumb[data-hero="sm"] .mtt-hero {
	height: 13%;
}

.menutin-app-page .mt-tplthumb[data-hero="none"] .mtt-hero {
	display: none;
}

.menutin-app-page .mtt-nav {
	display: flex;
	flex: 0 0 auto;
	gap: 2px;
	height: 7px;
}

.menutin-app-page .mtt-nav i {
	flex: 0 0 20%;
	border: 1px solid var(--tt-b);
	border-radius: 999px;
	background: var(--tt-s);
}

.menutin-app-page .mtt-nav i:first-child {
	border-color: var(--tt-p);
	background: var(--tt-p);
}

.menutin-app-page .mt-tplthumb[data-nav="tabs"] .mtt-nav i {
	border-radius: 3px 3px 0 0;
}

.menutin-app-page .mtt-main {
	display: flex;
	flex: 1 1 auto;
	gap: 3px;
	min-height: 0;
}

.menutin-app-page .mtt-side {
	display: none;
	flex: 0 0 22%;
	flex-direction: column;
	gap: 2px;
}

.menutin-app-page .mt-tplthumb[data-side="1"] .mtt-side {
	display: flex;
}

.menutin-app-page .mtt-side i {
	flex: 0 0 6px;
	border: 1px solid var(--tt-b);
	border-radius: 2px;
	background: var(--tt-s);
}

.menutin-app-page .mtt-cols {
	display: grid;
	flex: 1 1 auto;
	gap: 3px;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	align-content: start;
}

.menutin-app-page .mt-tplthumb[data-cols="3"] .mtt-cols {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.menutin-app-page .mt-tplthumb[data-cols="4"] .mtt-cols {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* Lista y compacta son filas, no tarjetas: la miniatura pasa a la izquierda
   y las columnas se quedan en dos, aunque el ajuste diga 3 o 4. */
.menutin-app-page .mt-tplthumb[data-layout="list"] .mtt-cols,
.menutin-app-page .mt-tplthumb[data-layout="compact"] .mtt-cols {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.menutin-app-page .mtt-item {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 3px;
	border: 1px solid var(--tt-b);
	border-radius: calc(var(--tt-r) / 3);
	background: var(--tt-s);
	overflow: hidden;
}

.menutin-app-page .mtt-img {
	display: block;
	flex: 0 0 auto;
	height: 38%;
	border-radius: 2px;
	background: linear-gradient(150deg, var(--tt-a), var(--tt-p));
}

.menutin-app-page .mtt-item i {
	display: block;
	height: 3px;
	border-radius: 2px;
	background: var(--tt-m);
	opacity: .5;
}

.menutin-app-page .mtt-item i:last-child {
	width: 46%;
	background: var(--tt-p);
	opacity: 1;
}

.menutin-app-page .mt-tplthumb[data-layout="list"] .mtt-item,
.menutin-app-page .mt-tplthumb[data-layout="compact"] .mtt-item {
	flex-direction: row;
	align-items: center;
}

.menutin-app-page .mt-tplthumb[data-layout="list"] .mtt-img,
.menutin-app-page .mt-tplthumb[data-layout="compact"] .mtt-img {
	flex: 0 0 26%;
	height: 100%;
	min-height: 10px;
}

.menutin-app-page .mt-tplthumb[data-layout="compact"] .mtt-item {
	padding: 2px;
}

.menutin-app-page .mt-tplthumb[data-card="flat"] .mtt-item {
	padding: 0;
	border-color: transparent;
	background: transparent;
}

.menutin-app-page .mt-tplthumb[data-card="elevated"] .mtt-item {
	border-color: transparent;
	box-shadow: 0 1px 2px rgba(0, 0, 0, .28);
}

.menutin-app-page .mt-tplthumb[data-card="outlined"] .mtt-item {
	border-color: var(--tt-p);
}

.menutin-app-page .mt-tplthumb[data-card="glass"] .mtt-item {
	border-color: var(--tt-m);
	background: var(--tt-m);
	opacity: .85;
}

/* En la ficha de «plantilla actual» la maqueta hace de muestra pequeña. */
.menutin-app-page .mt-designer-tpl-card .mt-tplthumb {
	flex: 0 0 76px;
	width: 76px;
}

/* Barra de la vista previa (dispositivos + abrir carta). */
.menutin-app-page .mt-designer-bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--mt-space-sm);
	margin-bottom: var(--mt-space-sm);
}

.menutin-app-page .mt-designer-devices {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.menutin-app-page .mt-designer-frame {
	display: block;
	width: 100%;
	height: 660px;
	min-height: 420px;
	max-height: 78vh;
	border: 1px solid var(--mt-color-border);
	border-radius: var(--mt-radius-lg);
	background: #fff;
	box-shadow: var(--mt-shadow-sm);
}

/* La vista previa es un <iframe srcdoc> real: así las media queries se
   evalúan contra SU ancho y Desktop/Tablet/Móvil muestran el layout de cada
   tamaño (1.6.5). */
.menutin-app-page .mt-designer-frame .menutin-tpl {
	border-radius: 0;
}

/* ================================================================
   Design Studio Workspace — 1.7.4 (3-column professional layout)
   ================================================================ */

.menutin-app-page .mt-designer-workspace {
	display: flex;
	flex-direction: column;
	gap: 0;
	margin-top: var(--mt-space-md);
	background: var(--mt-color-bg);
	border-radius: var(--mt-radius-lg);
	border: 1px solid var(--mt-color-border);
	overflow: hidden;
}

/* --- Top Bar --- */
.menutin-app-page .mt-designer-topbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--mt-space-md);
	padding: 12px 20px;
	background: var(--mt-color-surface);
	border-bottom: 1px solid var(--mt-color-border);
	flex-wrap: wrap;
}

.menutin-app-page .mt-designer-topbar-left {
	display: flex;
	align-items: center;
	gap: 10px;
	flex: none;
}

.menutin-app-page .mt-designer-topbar-left h2 {
	margin: 0;
	font-size: var(--mt-fs-lg);
	font-weight: 700;
}

.menutin-app-page .mt-designer-topbar-icon {
	width: 36px;
	height: 36px;
	border-radius: var(--mt-radius-md);
	background: var(--mt-color-primary);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
}

.menutin-app-page .mt-designer-topbar-center {
	display: flex;
	align-items: center;
	gap: 16px;
	flex: 1;
	justify-content: center;
}

.menutin-app-page .mt-designer-live-badge {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: var(--mt-fs-sm);
	color: var(--mt-color-muted);
}

.menutin-app-page .mt-status-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #22c55e;
	animation: mt-pulse 2s infinite;
}

@keyframes mt-pulse {
	0%, 100% { opacity: 1; }
	50% { opacity: .5; }
}

.menutin-app-page .mt-badge-live {
	font-size: 10px;
	font-weight: 700;
	padding: 2px 8px;
	border-radius: 10px;
	background: rgba(34, 197, 94, .12);
	color: #16a34a;
}

.menutin-app-page .mt-designer-devices {
	display: flex;
	gap: 4px;
}

.menutin-app-page .mt-btn-device {
	padding: 6px 14px;
	border: 1px solid var(--mt-color-border);
	border-radius: var(--mt-radius-md);
	background: var(--mt-color-surface);
	color: var(--mt-color-ink);
	font-size: var(--mt-fs-sm);
	font-weight: 600;
	cursor: pointer;
	transition: all .15s;
}

.menutin-app-page .mt-btn-device:hover {
	border-color: var(--mt-color-primary);
}

.menutin-app-page .mt-btn-device.active {
	background: var(--mt-color-primary);
	border-color: var(--mt-color-primary);
	color: #fff;
}

.menutin-app-page .mt-designer-topbar-right {
	display: flex;
	align-items: center;
	gap: 8px;
	flex: none;
}

.menutin-app-page .mt-btn-ghost {
	padding: 8px 16px;
	border: 1px solid var(--mt-color-border);
	border-radius: var(--mt-radius-md);
	background: transparent;
	color: var(--mt-color-ink);
	font-size: var(--mt-fs-sm);
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
	transition: all .15s;
}

.menutin-app-page .mt-btn-ghost:hover {
	background: var(--mt-color-bg);
}

.menutin-app-page .mt-btn-primary {
	padding: 8px 18px;
	border: none;
	border-radius: var(--mt-radius-md);
	background: var(--mt-color-primary);
	color: #fff;
	font-size: var(--mt-fs-sm);
	font-weight: 700;
	cursor: pointer;
	transition: opacity .15s;
}

.menutin-app-page .mt-btn-primary:hover {
	opacity: .9;
}

/* --- Main 3-column layout --- */
.menutin-app-page .mt-designer-main {
	display: grid;
	grid-template-columns: 300px 1fr 280px;
	min-height: 0;
	flex: 1;
}

/* --- Left Panel --- */
.menutin-app-page .mt-designer-left {
	background: var(--mt-color-surface);
	border-right: 1px solid var(--mt-color-border);
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

.menutin-app-page .mt-designer-tabs {
	display: flex;
	border-bottom: 1px solid var(--mt-color-border);
	background: var(--mt-color-bg);
}

.menutin-app-page .mt-designer-tab {
	flex: 1;
	padding: 12px 8px;
	border: none;
	border-bottom: 2px solid transparent;
	background: transparent;
	color: var(--mt-color-muted);
	font-size: var(--mt-fs-sm);
	font-weight: 600;
	cursor: pointer;
	transition: all .15s;
	white-space: nowrap;
}

.menutin-app-page .mt-designer-tab:hover {
	color: var(--mt-color-ink);
}

.menutin-app-page .mt-designer-tab.active {
	color: var(--mt-color-primary);
	border-bottom-color: var(--mt-color-primary);
	background: var(--mt-color-surface);
}

.menutin-app-page .mt-designer-tab-panel {
	flex: 1;
	overflow-y: auto;
	padding: 16px;
	display: none;
}

.menutin-app-page .mt-designer-tab-panel.active {
	display: block;
}

/* --- Accordion --- */
.menutin-app-page .mt-designer-accordion {
	margin-bottom: 8px;
	border: 1px solid var(--mt-color-border);
	border-radius: var(--mt-radius-md);
	background: var(--mt-color-surface);
	overflow: hidden;
}

.menutin-app-page .mt-designer-accordion-head {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	padding: 12px 14px;
	border: none;
	background: transparent;
	color: var(--mt-color-ink);
	font-size: var(--mt-fs-sm);
	font-weight: 700;
	cursor: pointer;
	text-align: left;
	transition: background .15s;
}

.menutin-app-page .mt-designer-accordion-head:hover {
	background: var(--mt-color-bg);
}

.menutin-app-page .mt-designer-accordion-head svg {
	flex: none;
	width: 18px;
	height: 18px;
	color: var(--mt-color-muted);
}

.menutin-app-page .mt-designer-accordion-head svg:last-child {
	margin-left: auto;
	transition: transform .2s;
}

.menutin-app-page .mt-designer-accordion.open .mt-designer-accordion-head svg:last-child {
	transform: rotate(180deg);
}

.menutin-app-page .mt-designer-accordion-body {
	padding: 0 14px 14px;
	display: none;
}

.menutin-app-page .mt-designer-accordion.open .mt-designer-accordion-body {
	display: block;
}

/* --- Current template card --- */
.menutin-app-page .mt-designer-tpl-current {
	margin-bottom: 12px;
}

.menutin-app-page .mt-designer-tpl-label {
	margin: 0 0 6px;
	font-size: var(--mt-fs-xs);
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--mt-color-muted);
}

.menutin-app-page .mt-designer-tpl-card {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px;
	border: 1px solid var(--mt-color-border);
	border-radius: var(--mt-radius-md);
	background: var(--mt-color-bg);
}

.menutin-app-page .mt-designer-tpl-sw {
	width: 48px;
	height: 48px;
	border-radius: var(--mt-radius-sm);
	flex: none;
}

/* --- Center Preview --- */
.menutin-app-page .mt-designer-center {
	background: var(--mt-color-bg);
	padding: 16px;
	overflow: auto;
}

.menutin-app-page .mt-designer-frame {
	display: block;
	width: 100%;
	height: 100%;
	min-height: 500px;
	border: 1px solid var(--mt-color-border);
	border-radius: var(--mt-radius-md);
	background: #fff;
}

/* --- Right Panel --- */
.menutin-app-page .mt-designer-right {
	background: var(--mt-color-surface);
	border-left: 1px solid var(--mt-color-border);
	overflow-y: auto;
	padding: 16px;
}

.menutin-app-page .mt-designer-rsection {
	margin-bottom: 20px;
}

.menutin-app-page .mt-designer-rsection h3 {
	margin: 0 0 12px;
	font-size: var(--mt-fs-sm);
	font-weight: 800;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--mt-color-muted);
}

.menutin-app-page .mt-designer-rfield {
	margin-bottom: 14px;
}

.menutin-app-page .mt-designer-rlabel {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	margin-bottom: 6px;
	font-size: var(--mt-fs-sm);
	font-weight: 600;
	color: var(--mt-color-ink);
}

.menutin-app-page .mt-designer-rvalue {
	font-size: var(--mt-fs-xs);
	font-weight: 700;
	color: var(--mt-color-muted);
}

/* Component toggle switches */
.menutin-app-page .mt-comp-toggle {
	margin-bottom: 10px;
}

.menutin-app-page .mt-comp-toggle label {
	display: flex;
	align-items: center;
	gap: 10px;
	cursor: pointer;
}

.menutin-app-page .mt-comp-toggle input {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
}

.menutin-app-page .mt-comp-toggle-track {
	position: relative;
	width: 40px;
	height: 22px;
	border-radius: 11px;
	background: #d1d5db;
	flex: none;
	transition: background .2s;
}

.menutin-app-page .mt-comp-toggle input:checked ~ .mt-comp-toggle-track {
	background: var(--mt-color-primary);
}

.menutin-app-page .mt-comp-toggle-knob {
	position: absolute;
	top: 2px;
	left: 2px;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: #fff;
	transition: transform .2s;
	box-shadow: 0 1px 3px rgba(0,0,0,.15);
}

.menutin-app-page .mt-comp-toggle input:checked ~ .mt-comp-toggle-track .mt-comp-toggle-knob {
	transform: translateX(18px);
}

.menutin-app-page .mt-comp-toggle-label {
	font-size: var(--mt-fs-sm);
	font-weight: 600;
	color: var(--mt-color-ink);
}

/* Cover picker in right panel */
.menutin-app-page .mt-designer-coverpick {
	display: flex;
	align-items: center;
	gap: 10px;
}

.menutin-app-page .mt-designer-coverpick img {
	width: 48px;
	height: 48px;
	border-radius: var(--mt-radius-sm);
	object-fit: cover;
	border: 1px solid var(--mt-color-border);
}

/* Small inputs */
.menutin-app-page .mt-input--sm {
	padding: 7px 10px;
	font-size: var(--mt-fs-sm);
}

.menutin-app-page .mt-select--sm {
	padding: 7px 10px;
	font-size: var(--mt-fs-sm);
}

/* Responsive */
@media (max-width: 1200px) {
	.menutin-app-page .mt-designer-main {
		grid-template-columns: 260px 1fr 240px;
	}
}

@media (max-width: 1024px) {
	.menutin-app-page .mt-designer-main {
		grid-template-columns: 1fr;
		grid-template-rows: auto auto auto;
	}
	.menutin-app-page .mt-designer-left,
	.menutin-app-page .mt-designer-right {
		max-height: 400px;
	}
	.menutin-app-page .mt-designer-center {
		min-height: 400px;
		order: -1;
	}
	.menutin-app-page .mt-designer-topbar-center {
		order: 3;
		width: 100%;
		justify-content: flex-start;
	}
}


/* Interruptores del editor (valor 0 explícito: se pueden apagar). */
.menutin-app-page .mt-switch {
	border: 1px solid var(--mt-color-border);
	border-radius: var(--mt-radius-md);
	padding: 10px 14px;
	margin-bottom: 8px;
}

.menutin-app-page .mt-switch label {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	cursor: pointer;
	font-size: var(--mt-fs-sm);
}

.menutin-app-page .mt-switch input[type="checkbox"] {
	width: 18px;
	height: 18px;
	margin-top: 2px;
	accent-color: var(--mt-color-primary);
	flex: none;
}

.menutin-app-page .mt-switch .mt-hint {
	display: block;
	margin: 2px 0 0;
}

.menutin-app-page .mt-pagehead h1,
.menutin-app-page .mt-apphead-body h1 {
	font-size: clamp(1.4rem, 3.5vw, 1.75rem);
}

.menutin-app-page .mt-grid {
	gap: 12px;
}

.menutin-app-page table.mt-table th,
.menutin-app-page table.mt-table td {
	padding: 8px 10px;
}

.menutin-app-page .mt-card h3 {
	font-size: var(--mt-fs-sm);
}

.menutin-app-page .mt-alert {
	padding: 10px 14px;
	margin: 0 0 var(--mt-space-md);
}

/* Mockup teléfono (decorativo + enlace real). */
.menutin-app-page .mt-phone {
	display: block;
	border: 8px solid #101418;
	border-radius: 28px;
	overflow: hidden;
	background: #fff;
	text-decoration: none;
	color: inherit;
	max-width: 300px;
	margin: 0 auto;
}

.menutin-app-page .mt-phone-bar {
	display: flex;
	gap: 6px;
	align-items: center;
	padding: 8px 12px;
	background: var(--mt-color-surface-soft);
	border-bottom: 1px solid var(--mt-color-border);
	font-size: var(--mt-fs-xs);
	font-weight: 700;
}

.menutin-app-page .mt-phone-body {
	display: grid;
	gap: 8px;
	padding: var(--mt-space-md);
}

.menutin-app-page .mt-phone-dish {
	border-radius: var(--mt-radius-md);
	background: linear-gradient(135deg, #eef7f1, #dcefe4);
	min-height: 110px;
}

.menutin-app-page .mt-line {
	display: block;
	height: 12px;
	border-radius: 6px;
	background: var(--mt-color-surface-soft);
	border: 1px solid var(--mt-color-border);
}

.menutin-app-page .mt-phone-cta {
	display: block;
	text-align: center;
	font-weight: 800;
	color: var(--mt-color-primary);
	padding: 10px;
}

/* Tablas a cards en móvil */
@media (max-width: 699px) {
	.menutin-app-page table.mt-table thead {
		display: none;
	}

	.menutin-app-page table.mt-table,
	.menutin-app-page table.mt-table tbody,
	.menutin-app-page table.mt-table tr,
	.menutin-app-page table.mt-table td {
		display: block;
		width: 100%;
	}

	.menutin-app-page table.mt-table tr {
		border: 1px solid var(--mt-color-line);
		border-radius: var(--mt-radius-md);
		margin-bottom: var(--mt-space-sm);
		padding: var(--mt-space-sm);
		background: #fff;
	}

	.menutin-app-page table.mt-table td {
		border: 0;
		padding: 4px 0;
	}

	.menutin-app-page table.mt-table td::before {
		content: attr(data-label);
		display: block;
		font-size: var(--mt-fs-xs);
		color: var(--mt-color-muted);
		font-weight: 600;
	}
}

/* Login */
.menutin-app-page .mt-loginwrap {
	max-width: 440px;
	margin: 0 auto;
}

.menutin-app-page .mt-loginbrand {
	text-align: center;
	margin-bottom: var(--mt-space-md);
}

.menutin-app-page .mt-loginbrand .mt-brand-mark {
	width: 52px;
	height: 52px;
	font-size: 1.6rem;
}

.menutin-app-page .mt-passwrap {
	position: relative;
}

.menutin-app-page .mt-passtoggle {
	position: absolute;
	right: 6px;
	top: 6px;
	min-height: 36px;
	border: 0;
	background: transparent;
	color: var(--mt-color-primary);
	font-weight: 700;
	cursor: pointer;
}

/* ==========================================================================
   1.6.0 — Gráficas (Charts), editor de mapa y trackeo público
   Todo con scope .menutin-app-page / .menutin-system-page (nada global).
   ========================================================================== */

.menutin-app-page .mt-chart,
.menutin-system-page .mt-chart {
	display: block;
	width: 100%;
	height: auto;
	max-width: 100%;
	background: var(--mt-surface, #ffffff);
	border: 1px solid var(--mt-border, #e6e9e7);
	border-radius: var(--mt-radius, 10px);
	margin: 0 0 var(--mt-space, 16px);
}

.menutin-app-page .mt-chart--spark,
.menutin-system-page .mt-chart--spark {
	border: 0;
	background: transparent;
	margin: 0;
}

/* Editor de zona sobre mapa (SVG + imagen estática del proxy). */
.menutin-app-page .mt-mapedit {
	position: relative;
	width: 100%;
	max-width: 640px;
	border: 1px solid var(--mt-border, #e6e9e7);
	border-radius: var(--mt-radius, 10px);
	overflow: hidden;
	background: var(--mt-bg, #f8faf9);
}

.menutin-app-page .mt-mapedit__img {
	display: block;
	width: 100%;
	height: auto;
}

.menutin-app-page .mt-mapedit__svg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	cursor: crosshair;
	touch-action: none;
}

.menutin-app-page .mt-mapedit__bar {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
	margin: 8px 0;
}

.menutin-app-page .mt-mapedit__hint {
	font-size: 13px;
	color: var(--mt-muted, #5b6b62);
}

/* Selector de imagen (logo/portada) con biblioteca WP. */
.menutin-app-page .mt-mediapick {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
}

.menutin-app-page .mt-mediapick__thumb {
	width: 64px;
	height: 64px;
	border-radius: 8px;
	object-fit: cover;
	border: 1px solid var(--mt-border, #e6e9e7);
	background: var(--mt-bg, #f8faf9);
}

/* Trackeo público: línea de tiempo del pedido. */
.menutin-system-page .mt-track,
.menutin-app-page .mt-track {
	max-width: 720px;
	margin: 0 auto;
}

.menutin-system-page .mt-track__steps,
.menutin-app-page .mt-track__steps {
	list-style: none;
	margin: 16px 0;
	padding: 0;
}

.menutin-system-page .mt-track__step,
.menutin-app-page .mt-track__step {
	position: relative;
	padding: 10px 0 10px 34px;
	color: var(--mt-muted, #5b6b62);
}

.menutin-system-page .mt-track__step::before,
.menutin-app-page .mt-track__step::before {
	content: '';
	position: absolute;
	left: 10px;
	top: 14px;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--mt-border, #e6e9e7);
}

.menutin-system-page .mt-track__step::after,
.menutin-app-page .mt-track__step::after {
	content: '';
	position: absolute;
	left: 14px;
	top: 24px;
	bottom: -10px;
	width: 2px;
	background: var(--mt-border, #e6e9e7);
}

.menutin-system-page .mt-track__step:last-child::after,
.menutin-app-page .mt-track__step:last-child::after {
	display: none;
}

.menutin-system-page .mt-track__step--done,
.menutin-app-page .mt-track__step--done {
	color: var(--mt-text, #1f2933);
}

.menutin-system-page .mt-track__step--done::before,
.menutin-app-page .mt-track__step--done::before {
	background: var(--mt-primary, #2a7d4f);
}

.menutin-system-page .mt-track__step--current,
.menutin-app-page .mt-track__step--current {
	color: var(--mt-text, #1f2933);
	font-weight: 600;
}

.menutin-system-page .mt-track__step--current::before,
.menutin-app-page .mt-track__step--current::before {
	background: var(--mt-primary, #2a7d4f);
	box-shadow: 0 0 0 4px rgba(42, 125, 79, 0.18);
}

.menutin-system-page .mt-track__step--cancelled::before,
.menutin-app-page .mt-track__step--cancelled::before {
	background: #c0392b;
}

/* ==========================================================================
   21. AJUSTES RESPONSIVE 1.6.2 — sin desbordamiento horizontal
   ========================================================================== */
@media (max-width: 699px) {
	/* Cabecera de módulo: la acción baja a su propia línea. */
	.menutin-app-page .mt-apphead-action,
	.menutin-app-page .mt-pagehead-actions,
	.menutin-app-page .mt-toolbar-left,
	.menutin-app-page .mt-toolbar-right {
		flex: 1 0 100%;
		min-width: 0;
	}

	.menutin-app-page .mt-apphead-action .mt-btn,
	.menutin-app-page .mt-pagehead-actions .mt-btn,
	.menutin-app-page .mt-toolbar-right .mt-btn {
		flex: 1 1 auto;
	}

	.menutin-app-page .mt-search {
		flex: 1 1 100%;
		max-width: none;
	}

	.menutin-app-page .mt-grid--4 {
		grid-template-columns: repeat(2, 1fr);
	}

	.menutin-app-page .mt-ctxcard .mt-field {
		flex: 1 1 100%;
	}

	/* Valores largos (dinero) sin romper la rejilla. */
	.menutin-app-page .mt-stat-value {
		font-size: 1.2rem;
		overflow-wrap: anywhere;
	}

	.menutin-app-page .mt-card h3,
	.menutin-app-page .mt-stat h3 {
		overflow-wrap: anywhere;
	}
}

/* Tablet: 2 columnas para rejillas de 4 (ni 1 ni 4 apretadas). */
@media (min-width: 700px) and (max-width: 1023px) {
	.menutin-app-page .mt-grid--4 {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* Toasts por encima del bottom-nav (visible hasta 1023px). */
@media (max-width: 1023px) {
	.menutin-app-page .mt-toasts {
		bottom: 76px;
	}
}

/* ==========================================================================
   22. IMPRESIÓN 1.6.2 — hoja de QR/recibos sin chrome de la app
   ========================================================================== */
@media print {
	.menutin-app-page .mt-topbar,
	.menutin-app-page .mt-modebar,
	.menutin-app-page .mt-sidebar,
	.menutin-app-page .mt-overlay,
	.menutin-app-page .mt-bottomnav,
	.menutin-app-page .mt-toasts,
	.menutin-app-page .mt-tabs,
	.menutin-app-page .mt-toolbar,
	.menutin-app-page .mt-apphead-action,
	.menutin-app-page .mt-pagehead-actions,
	.menutin-app-page .mt-row-actions,
	.menutin-app-page .mt-branch-actions {
		display: none !important;
	}

	.menutin-app-page .mt-layout,
	.menutin-app-page .mt-main {
		display: block;
		max-width: none;
		padding: 0;
		margin: 0;
		background: #fff;
	}

	.menutin-app-page .mt-card,
	.menutin-app-page .mt-row,
	.menutin-app-page .mt-branch,
	.menutin-app-page .mt-stat {
		box-shadow: none;
		break-inside: avoid;
	}
}

/* Selector de color del Design Studio (1.7.3). */
.menutin-app-page .mt-input--color {
	height: 46px;
	padding: 4px;
	cursor: pointer;
}

.menutin-app-page .mt-colorbar {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 12px;
}

.menutin-app-page .mt-colorbar-label {
	font-size: var(--mt-fs-xs, .75rem);
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--mt-color-muted);
}

.menutin-app-page .mt-swatches {
	display: inline-flex;
	gap: 4px;
}

.menutin-app-page .mt-swatches span {
	width: 26px;
	height: 26px;
	border-radius: 6px;
	border: 1px solid var(--mt-color-border);
	background: #fff;
}

.menutin-app-page .mt-palgroup {
	margin-bottom: 12px;
}

.menutin-app-page .mt-palgroup-title {
	margin: 0 0 6px;
	font-size: var(--mt-fs-xs, .75rem);
	font-weight: 800;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: var(--mt-color-muted);
}

.menutin-app-page .mt-palgrid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	gap: 8px;
}

.menutin-app-page .mt-palbtn {
	display: flex;
	align-items: center;
	gap: 9px;
	padding: 7px 10px;
	border: 1px solid var(--mt-color-border);
	border-radius: var(--mt-radius-md);
	background: var(--mt-color-surface);
	color: var(--mt-color-ink);
	font-family: inherit;
	font-size: var(--mt-fs-sm, .85rem);
	font-weight: 650;
	text-align: left;
	cursor: pointer;
	transition: border-color var(--mt-transition), box-shadow var(--mt-transition);
}

.menutin-app-page .mt-palbtn:hover {
	border-color: var(--mt-color-primary);
	box-shadow: var(--mt-shadow-sm);
}

.menutin-app-page .mt-palsw {
	display: inline-flex;
	flex: none;
	gap: 2px;
}

.menutin-app-page .mt-palsw span {
	width: 14px;
	height: 22px;
	border-radius: 3px;
}

.menutin-app-page .mt-palbtn-name {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* ================================================================
   Design Studio Workspace — reparto (1.7.4 → 1.7.13)
   El <form> envuelve los paneles izquierdo y derecho; con
   `display: contents` sus hijos entran en el flujo del `.mt-designer-main`
   y el reparto real lo hace la rejilla de la sección 24. Aquí solo queda
   el pegamento: sin las reglas de flexbox de 1.7.4 (chocaban con la rejilla
   y dejaban los paneles cortados en 420px al llegar a 1024 px).
   ================================================================ */
.menutin-app-page .mt-designer-form {
	display: contents;
}

.menutin-app-page .mt-designer-left,
.menutin-app-page .mt-designer-right,
.menutin-app-page .mt-designer-center {
	min-height: 0;
	min-width: 0;
}

/* Pestañas del panel izquierdo: que quepan las cuatro en 300px. */
.menutin-app-page .mt-designer-tabs {
	overflow: hidden;
}

.menutin-app-page .mt-designer-tab {
	flex: 1 1 0;
	min-width: 0;
	padding: 11px 4px;
	font-size: .76rem;
	letter-spacing: -.01em;
	overflow: hidden;
	text-overflow: ellipsis;
}

.menutin-app-page .mt-designer-left .mt-designer-tab-panel {
	padding: 14px 14px 24px;
}

.menutin-app-page .mt-designer-accordion-head {
	padding: 11px 12px;
	font-size: .82rem;
}

/* ================================================================
   Restaurante demo — panel global del superadmin (1.7.6)
   ================================================================ */
.menutin-app-page .mt-demo {
	border-left: 4px solid var(--mt-color-primary);
}

.menutin-app-page .mt-demo h2 {
	margin-top: 0;
}

.menutin-app-page .mt-demo-list {
	margin: 0 0 14px;
	padding-left: 20px;
	color: var(--mt-color-muted);
	font-size: var(--mt-fs-sm);
	line-height: 1.7;
}

.menutin-app-page .mt-demo-list li {
	list-style: disc;
}

.menutin-app-page .mt-demo-counts {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 20px;
	margin: 0 0 12px;
	padding: 0;
	list-style: none;
}

.menutin-app-page .mt-demo-counts li {
	font-size: var(--mt-fs-sm);
	color: var(--mt-color-muted);
}

.menutin-app-page .mt-demo-counts strong {
	display: block;
	font-size: 1.15rem;
	font-weight: 800;
	color: var(--mt-color-ink);
	line-height: 1.2;
}

/* ================================================================
   Diseño del menú — chip de restaurante y modo pantalla completa (1.7.8)
   El editor ocupa TODA la ventana: se oculta el chrome de la app (barra
   superior, aviso de superadmin, sidebar, cabecera del módulo y barra de
   contexto). Se entra y se sale con el mismo botón, o con ESC.
   ================================================================ */
.menutin-app-page .mt-designer-resto {
	display: none;
}

.menutin-app-page.mt-ds-full .mt-designer-resto {
	display: inline-flex;
	align-items: center;
	max-width: 240px;
	padding: 3px 11px;
	border: 1px solid var(--mt-color-border);
	border-radius: 999px;
	background: var(--mt-color-bg);
	color: var(--mt-color-muted);
	font-size: var(--mt-fs-xs);
	font-weight: 600;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.menutin-app-page .mt-designer-topbar-right .mt-btn-ghost,
.menutin-app-page .mt-designer-topbar-right .mt-btn-primary {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.menutin-app-page .mt-designer-topbar-right .mt-ico {
	width: 16px;
	height: 16px;
	flex: none;
}

/* --- Modo pantalla completa ------------------------------------------- */
.menutin-app-page.mt-ds-full .mt-topbar,
.menutin-app-page.mt-ds-full .mt-modebar,
.menutin-app-page.mt-ds-full .mt-sidebar,
.menutin-app-page.mt-ds-full .mt-overlay,
.menutin-app-page.mt-ds-full .mt-apphead,
.menutin-app-page.mt-ds-full .mt-ctxcard,
.menutin-app-page.mt-ds-full .mt-modhead,
.menutin-app-page.mt-ds-full .mt-bottomnav {
	display: none !important;
}

.menutin-app-page.mt-ds-full .mt-main {
	width: 100%;
	max-width: none;
	margin: 0;
	padding: 0;
}

.menutin-app-page.mt-ds-full .mt-designer-workspace {
	height: 100vh;
	height: 100dvh;
	min-height: 0;
	margin: 0;
	border: 0;
	border-radius: 0;
}

body.mt-ds-full-body {
	overflow: hidden;
}

/* --- Barra del editor: una sola fila y responsive (1.7.8) ------------- */
.menutin-app-page .mt-designer-title {
	margin: 0;
	font-size: var(--mt-fs-lg);
	font-weight: 700;
	line-height: 1.2;
	white-space: nowrap;
}

.menutin-app-page .mt-designer-topbar {
	flex-wrap: nowrap;
}

.menutin-app-page .mt-designer-topbar-left {
	min-width: 0;
	flex: 0 1 auto;
}

.menutin-app-page .mt-designer-topbar-left > * {
	flex: none;
}

.menutin-app-page .mt-designer-topbar-center {
	flex: 1 1 auto;
	min-width: 0;
	flex-wrap: nowrap;
}

.menutin-app-page .mt-designer-devices {
	flex: none;
	flex-wrap: nowrap;
}

.menutin-app-page .mt-designer-live-badge {
	min-width: 0;
	overflow: hidden;
	white-space: nowrap;
}

.menutin-app-page .mt-designer-topbar-right {
	flex: none;
	flex-wrap: nowrap;
}

/* Menos ruido a medida que se estrecha la ventana. */
@media (max-width: 1500px) {
	.menutin-app-page .mt-designer-live-text {
		display: none;
	}
}

@media (max-width: 1024px) {
	.menutin-app-page .mt-designer-topbar {
		flex-wrap: wrap;
	}
}

/* En pantalla completa el editor no debe desbordar la ventana. */
.menutin-app-page.mt-ds-full .mt-designer-workspace {
	overflow: hidden;
}

/* ================================================================
   Diseño del menú — navegación del panel (1.7.9)
   Buscador de ajustes + pestañas como rejilla 2×2 (antes se truncaban:
   «Aparien…», «Conteni…») y sub-encabezados dentro de los acordeones.
   ================================================================ */
.menutin-app-page .mt-designer-find {
	position: relative;
	padding: 10px 12px;
	border-bottom: 1px solid var(--mt-color-border);
	background: var(--mt-color-surface);
}

.menutin-app-page .mt-designer-find .mt-input {
	padding-left: 32px;
	padding-right: 30px;
}

.menutin-app-page .mt-designer-find-ico {
	position: absolute;
	left: 20px;
	top: 0;
	bottom: 0;
	display: flex;
	align-items: center;
	color: var(--mt-color-muted);
	pointer-events: none;
}

.menutin-app-page .mt-designer-find-ico .mt-ico {
	width: 15px;
	height: 15px;
}

.menutin-app-page .mt-designer-find-clear {
	position: absolute;
	right: 18px;
	top: 0;
	bottom: 0;
	margin: auto 0;
	width: 22px;
	height: 22px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--mt-color-bg);
	color: var(--mt-color-muted);
	font-size: 16px;
	line-height: 1;
	cursor: pointer;
}

.menutin-app-page .mt-designer-find-clear:hover {
	background: var(--mt-color-border);
	color: var(--mt-color-ink);
}

.menutin-app-page .mt-designer-find-empty {
	margin: 14px;
	font-size: var(--mt-fs-sm);
	color: var(--mt-color-muted);
}

.menutin-app-page .mt-designer-tabs {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 4px;
	padding: 6px;
	background: var(--mt-color-bg);
	border-bottom: 1px solid var(--mt-color-border);
}

.menutin-app-page .mt-designer-tab {
	padding: 8px 6px;
	border: 1px solid transparent;
	border-radius: var(--mt-radius-md);
	background: transparent;
	color: var(--mt-color-muted);
	font-size: .82rem;
	font-weight: 600;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.menutin-app-page .mt-designer-tab:hover {
	background: var(--mt-color-surface);
	color: var(--mt-color-ink);
}

.menutin-app-page .mt-designer-tab.active {
	background: var(--mt-color-surface);
	border-color: var(--mt-color-border);
	color: var(--mt-color-primary);
	box-shadow: var(--mt-shadow-sm);
}

.menutin-app-page .mt-designer-subhead {
	margin: 16px 0 8px;
	font-size: var(--mt-fs-xs);
	font-weight: 800;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--mt-color-muted);
}

/* `hidden` debe ganar a los `display` de las reglas de arriba (si no, la
   barra de pestañas seguía visible durante una búsqueda). */
.menutin-app-page .mt-designer-tabs[hidden],
.menutin-app-page .mt-designer-tab-panel[hidden],
.menutin-app-page .mt-designer-accordion[hidden],
.menutin-app-page .mt-designer-find-clear[hidden],
.menutin-app-page .mt-designer-find-empty[hidden] {
	display: none !important;
}

/* ================================================================
   23. PANEL 1.7.12 — refinado visual y responsive del shell
   ----------------------------------------------------------------
   Capa de ajuste sobre el sistema 1.6.x: redefine tokens y pule
   topbar, sidebar, encabezados, métricas, pestañas y tablas. Todo
   sigue con scope .menutin-app-page y sin selectores globales.

   Navegación por tramos de ancho:
     · < 768 px  → drawer + bottom-nav (móvil)
     · 768–1023  → carril de iconos de 76 px (tablet)
     · ≥ 1024 px → sidebar completa (escritorio)
   ================================================================ */

/* --- 23.1 Tokens -------------------------------------------------- */
.menutin-app-page {
	/* Lienzo más presente: separa la tarjeta blanca del fondo. */
	--mt-color-canvas: #edf1ee;
	--mt-color-surface-soft: #f7f9f8;
	--mt-color-bg-soft: #f7f9f8;
	--mt-color-border: #dfe5e1;
	--mt-color-line: #e8ece9;
	--mt-color-ink: #101a16;
	--mt-color-text: #1d2a24;
	--mt-color-muted: #64716b;

	/* Sombras en dos capas: contacto + ambiente. */
	--mt-shadow-xs: 0 1px 1px rgba(16, 24, 40, .04);
	--mt-shadow-sm: 0 1px 2px rgba(16, 24, 40, .05), 0 1px 3px rgba(16, 24, 40, .07);
	--mt-shadow-md: 0 2px 4px rgba(16, 24, 40, .04), 0 10px 24px rgba(16, 24, 40, .09);
	--mt-shadow-lg: 0 24px 60px rgba(12, 20, 16, .22);

	/* Nuevos */
	--mt-topbar-h: 64px;
	--mt-rail-w: 76px;
	--mt-ring: 0 0 0 3px rgba(42, 125, 79, .18);
	--mt-ease: cubic-bezier(.2, .8, .3, 1);
}

/* --- 23.1b Ritmo tipográfico (causa raíz) --------------------------
   system-page.css normaliza el tema de WordPress con `#menutin-app p`,
   `#menutin-app ul`, `#menutin-app h1…`. Un ID gana a cualquier número de
   clases, así que esos márgenes (1em bajo cada párrafo, .6em bajo cada
   título) aplastaban los del design system: tarjetas separadas, grupos de
   menú con 16 px de más, avisos descolgados. Se reafirma el ritmo propio con
   el mismo ID y solo sobre las piezas del panel. */
#menutin-app .mt-hint,
#menutin-app .mt-stat-value,
#menutin-app .mt-help,
#menutin-app .mt-error,
#menutin-app .mt-nav,
#menutin-app .mt-user-menu,
#menutin-app .mt-pagehead p,
#menutin-app .mt-hero-badges,
#menutin-app .mt-urlcard-btns,
#menutin-app .mt-state-cta,
#menutin-app .mt-apphead-body h1,
#menutin-app .mt-pagehead h1,
#menutin-app .mt-hero-body h1,
#menutin-app .mt-modal-head h2 {
	margin-bottom: 0;
}

/* Subtitulo de cabecera: su regla original pide 2 px, no cero. */
#menutin-app .mt-pagehead h2 {
	margin-bottom: 2px;
}

/* Excepciones al cero global. Van despues y suman el pseudo-clase, asi que
   ganan (1,2,0 > 1,1,0) y devuelven el aire que el tema quitaba. */
#menutin-app .mt-hint:not(:last-child) {
	margin-bottom: 8px;
}

#menutin-app .mt-branch .mt-hint {
	margin-bottom: 2px;
}

#menutin-app .mt-section > .mt-hint {
	margin-bottom: 14px;
}

#menutin-app .mt-navgroup-title,
#menutin-app .mt-urlcard-url,
#menutin-app .mt-card h3,
#menutin-app .mt-stat h3,
#menutin-app .mt-state h3 {
	margin-bottom: 6px;
}

#menutin-app .mt-section > h2,
#menutin-app .mt-main > h2 {
	margin-bottom: 10px;
}

#menutin-app .mt-state p {
	margin-bottom: 16px;
}

/* --- 23.2 Barra superior ------------------------------------------ */
.menutin-app-page .mt-topbar {
	min-height: var(--mt-topbar-h);
	padding: 10px 20px;
	gap: 10px;
	background: rgba(255, 255, 255, .92);
	-webkit-backdrop-filter: saturate(1.4) blur(8px);
	backdrop-filter: saturate(1.4) blur(8px);
	box-shadow: 0 8px 20px -18px rgba(16, 24, 40, .5);
}

.menutin-app-page .mt-brand {
	gap: 10px;
	font-size: 1.06rem;
	letter-spacing: -.022em;
}

.menutin-app-page .mt-brand-mark {
	width: 34px;
	height: 34px;
	border-radius: 10px;
	background: linear-gradient(150deg, #35935f, var(--mt-color-primary) 55%, #1f5c3a);
	box-shadow: 0 2px 6px rgba(42, 125, 79, .32), inset 0 1px 0 rgba(255, 255, 255, .28);
	font-weight: 800;
}

/* Botón de drawer: antes no tenía estilo propio (caía en el del navegador). */
.menutin-app-page .mt-drawer-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	flex: none;
	border: 1px solid var(--mt-color-border);
	border-radius: 10px;
	background: var(--mt-color-surface);
	color: var(--mt-color-muted);
	cursor: pointer;
	transition: background-color var(--mt-transition), color var(--mt-transition), border-color var(--mt-transition);
}

.menutin-app-page .mt-drawer-toggle:hover {
	background: var(--mt-color-surface-hover);
	border-color: #cfd8d2;
	color: var(--mt-color-ink);
}

.menutin-app-page .mt-drawer-toggle .mt-ico {
	width: 20px;
}

/* El botón solo existe mientras la navegación vive en un cajón (<768 px).
   Va aquí, después del estilo base, porque el `display: none` original de
   ≥1024 px tiene la misma especificidad y lo ganaría el estilo base. */
@media (min-width: 768px) {
	.menutin-app-page .mt-drawer-toggle {
		display: none;
	}
}

/* Con el cajon abierto, el panel (z 100) tapaba el encabezado: quedaba una
   banda blanca de 64 px arriba y el unico modo de cerrar era adivinar el
   fondo oscurecido. El encabezado sube por encima y el boton de cerrar
   vuelve a ser visible y util. */
.menutin-app-page.mt-drawer-open .mt-topbar {
	z-index: 110;
}

.menutin-app-page .mt-ctxchip {
	gap: 7px;
	padding: 5px 11px;
	background: var(--mt-color-surface);
	box-shadow: var(--mt-shadow-xs);
}

.menutin-app-page .mt-ctxchip .mt-ico {
	width: 15px;
}

.menutin-app-page .mt-ctxchip strong {
	color: var(--mt-color-ink);
}

.menutin-app-page .mt-chip--plan {
	background: linear-gradient(150deg, #e7f4ec, #d3ebdd);
	border-color: #c3e2d0;
	font-weight: 800;
}

.menutin-app-page .mt-user summary {
	padding: 3px 8px 3px 3px;
	border: 1px solid transparent;
	border-radius: var(--mt-radius-pill);
	transition: background-color var(--mt-transition), border-color var(--mt-transition);
}

.menutin-app-page .mt-user summary:hover {
	background: var(--mt-color-surface-soft);
	border-color: var(--mt-color-border);
}

.menutin-app-page .mt-user[open] summary {
	background: var(--mt-color-surface-soft);
	border-color: var(--mt-color-border);
}

.menutin-app-page .mt-avatar {
	width: 34px;
	height: 34px;
	background: linear-gradient(150deg, #35935f, #1f5c3a);
	box-shadow: 0 1px 3px rgba(42, 125, 79, .38), inset 0 1px 0 rgba(255, 255, 255, .3);
}

.menutin-app-page .mt-user-menu {
	border-radius: 14px;
	box-shadow: var(--mt-shadow-md);
	padding: 8px;
}

.menutin-app-page .mt-user-menu a {
	min-height: 40px;
	border-radius: 9px;
	font-weight: 600;
}

/* --- 23.3 Barra de contexto (superadmin) -------------------------- */
.menutin-app-page .mt-modebar {
	padding: 9px 20px;
	gap: 10px;
	background: #fff7e8;
	border-bottom: 1px solid #f1d4a5;
	color: #7c4a12;
}

.menutin-app-page .mt-modebar-badge {
	background: #9a5c14;
	box-shadow: var(--mt-shadow-xs);
}

/* --- 23.4 Barra lateral ------------------------------------------- */
.menutin-app-page .mt-sidebar {
	background: var(--mt-color-surface);
	border-right: 1px solid var(--mt-color-border);
}

.menutin-app-page .mt-sidebar-scroll {
	padding: 16px 12px 32px;
	gap: 20px;
}

.menutin-app-page .mt-navgroup-title {
	margin: 0 0 8px;
	padding: 0 10px;
	font-size: .68rem;
	letter-spacing: .09em;
	color: #8d9891;
}

.menutin-app-page .mt-nav {
	gap: 3px;
}

.menutin-app-page .mt-nav a {
	position: relative;
	min-height: 44px;
	padding: 0 12px;
	gap: 12px;
	border-radius: 10px;
	color: #3f4c46;
	font-size: .885rem;
	transition: background-color var(--mt-transition), color var(--mt-transition), box-shadow var(--mt-transition);
}

.menutin-app-page .mt-nav a .mt-ico {
	width: 19px;
	color: #7b8880;
	transition: color var(--mt-transition);
}

.menutin-app-page .mt-nav a:hover {
	background: var(--mt-color-surface-soft);
	color: var(--mt-color-ink);
}

.menutin-app-page .mt-nav a:hover .mt-ico {
	color: var(--mt-color-primary);
}

/* Activo: fondo tintado + barra lateral redondeada (sin el inset square). */
.menutin-app-page .mt-nav a[aria-current="page"] {
	background: var(--mt-color-primary-soft);
	color: var(--mt-color-primary-dark);
	font-weight: 700;
	box-shadow: none;
}

.menutin-app-page .mt-nav a[aria-current="page"]::before {
	content: "";
	position: absolute;
	left: -10px;
	top: 11px;
	bottom: 11px;
	width: 3px;
	border-radius: 0 3px 3px 0;
	background: var(--mt-color-primary);
}

.menutin-app-page .mt-nav a[aria-current="page"] .mt-ico {
	color: var(--mt-color-primary);
}

.menutin-app-page .mt-nav-badge {
	padding: 1px 7px;
	background: var(--mt-color-primary);
	box-shadow: 0 1px 2px rgba(42, 125, 79, .4);
	font-size: .7rem;
}

/* --- 23.5 Área de trabajo ----------------------------------------- */
@media (min-width: 1280px) {
	.menutin-app-page .mt-main {
		padding: var(--mt-space-xl) var(--mt-space-xl) var(--mt-space-2xl);
	}
}

/* Encabezados de bloque sueltos: antes salían con el tamaño del navegador. */
.menutin-app-page .mt-main > h2,
.menutin-app-page .mt-section > h2 {
	margin: 0 0 10px;
	font-size: 1.02rem;
	font-weight: 800;
	letter-spacing: -.012em;
	color: var(--mt-color-ink);
}

.menutin-app-page .mt-section > .mt-hint {
	margin-bottom: 14px;
}

/* --- 23.6 Cabecera de módulo -------------------------------------- */
.menutin-app-page .mt-apphead {
	gap: 14px;
	margin-bottom: 22px;
}

.menutin-app-page .mt-apphead-icon {
	width: 46px;
	height: 46px;
	border-radius: 13px;
	background: linear-gradient(155deg, #27352e, #10181a);
	box-shadow: var(--mt-shadow-sm), inset 0 1px 0 rgba(255, 255, 255, .14);
}

.menutin-app-page .mt-apphead-body h1 {
	font-weight: 800;
}

.menutin-app-page .mt-apphead-body .mt-hint {
	margin-top: 3px;
}

.menutin-app-page .mt-pagehead h1,
.menutin-app-page .mt-pagehead h2 {
	font-weight: 800;
}

/* --- 23.7 Botones -------------------------------------------------- */
.menutin-app-page .mt-btn {
	border-radius: 10px;
	box-shadow: 0 1px 2px rgba(16, 24, 40, .1);
	transition: background-color var(--mt-transition), border-color var(--mt-transition), color var(--mt-transition), box-shadow var(--mt-transition), transform var(--mt-transition);
}

.menutin-app-page .mt-btn:active {
	transform: translateY(1px);
	box-shadow: none;
}

.menutin-app-page .mt-btn--ghost,
.menutin-app-page .mt-btn--outline {
	box-shadow: var(--mt-shadow-xs);
}

.menutin-app-page .mt-btn--ghost:active,
.menutin-app-page .mt-btn--outline:active {
	box-shadow: none;
}

/* --- 23.8 Tarjetas y métricas -------------------------------------- */
.menutin-app-page .mt-card {
	border-radius: 14px;
	box-shadow: var(--mt-shadow-sm);
}

.menutin-app-page .mt-stat {
	padding: 16px 18px;
	border-color: var(--mt-color-border);
	border-radius: 14px;
	box-shadow: var(--mt-shadow-sm);
	transition: box-shadow var(--mt-transition), transform var(--mt-transition);
}

.menutin-app-page .mt-stat-icon {
	width: 34px;
	height: 34px;
	margin-bottom: 12px;
	border-radius: 10px;
	background: var(--mt-color-primary-soft);
	box-shadow: inset 0 0 0 1px rgba(42, 125, 79, .1);
}

.menutin-app-page .mt-stat h3 {
	margin-bottom: 4px;
	font-size: .7rem;
	letter-spacing: .075em;
	color: #7d8882;
}

.menutin-app-page .mt-stat-value {
	font-size: clamp(1.35rem, 1.05rem + 1.1vw, 1.7rem);
	font-weight: 800;
	letter-spacing: -.026em;
	font-variant-numeric: tabular-nums;
}

.menutin-app-page .mt-stat .mt-hint {
	font-size: .8rem;
	color: #7d8882;
}

/* --- 23.9 Pestañas: control segmentado ----------------------------- */
.menutin-app-page .mt-tabs {
	width: fit-content;
	max-width: 100%;
	gap: 2px;
	margin-bottom: 18px;
	padding: 4px;
	border: 1px solid var(--mt-color-border);
	border-radius: 13px;
	background: var(--mt-color-surface-soft);
	box-shadow: var(--mt-shadow-xs);
	scrollbar-width: none;
}

.menutin-app-page .mt-tabs::-webkit-scrollbar {
	display: none;
}

/* La tira cabe en pc pero no en el movil. Se quito la barra de scroll, asi que
   el borde derecho se desvanece para insinuar que quedan destinos. El pseudo es
   un item flex pegado con `right: 0`, por lo que queda fijo en el scrollport. */
@media (max-width: 699px) {
	.menutin-app-page .mt-tabs::after {
		content: "";
		position: sticky;
		right: 0;
		flex: none;
		width: 26px;
		margin-left: -26px;
		border-radius: 0 9px 9px 0;
		background: linear-gradient(90deg, rgba(247, 249, 248, 0), #f7f9f8);
	}
}

/* En tablet la tira tampoco cabe entera y el degradado de aviso solo se pinta
   en móvil: aquí se permite que baje a dos filas para ver las seis pestañas. */
@media (min-width: 700px) and (max-width: 899px) {
	.menutin-app-page .mt-tabs {
		width: 100%;
		overflow: visible;
		flex-wrap: wrap;
	}
}

.menutin-app-page .mt-tabs a {
	min-height: 40px;
	padding: 0 14px;
	border: 0;
	border-radius: 9px;
	color: var(--mt-color-muted);
	font-size: .86rem;
	transition: background-color var(--mt-transition), color var(--mt-transition), box-shadow var(--mt-transition);
}

.menutin-app-page .mt-tabs a:hover {
	background: rgba(255, 255, 255, .72);
	color: var(--mt-color-ink);
}

.menutin-app-page .mt-tabs a[aria-current="page"] {
	background: var(--mt-color-surface);
	color: var(--mt-color-primary-dark);
	font-weight: 700;
	box-shadow: var(--mt-shadow-sm), inset 0 0 0 1px var(--mt-color-border);
}

/* --- 23.10 Barra de herramientas y buscador ------------------------ */
/* Sin `space-between`: con pocas acciones dejaba un vacío de ~900 px entre
   el buscador y el botón. Todo el grupo se alinea a la izquierda. */
.menutin-app-page .mt-toolbar {
	gap: 12px;
	margin-bottom: 18px;
	justify-content: flex-start;
}

@media (min-width: 700px) {
	.menutin-app-page .mt-toolbar .mt-search {
		flex: 1 1 260px;
		max-width: 420px;
		min-width: 0;
		margin: 0;
	}
}

.menutin-app-page .mt-input,
.menutin-app-page .mt-select,
.menutin-app-page .mt-textarea {
	border-color: #d3dad6;
	border-radius: 10px;
}

.menutin-app-page .mt-input:focus,
.menutin-app-page .mt-select:focus,
.menutin-app-page .mt-textarea:focus {
	box-shadow: var(--mt-ring);
}

.menutin-app-page .mt-search-ico {
	top: 0;
	bottom: 0;
	height: auto;
	left: 13px;
	display: inline-flex;
	align-items: center;
	color: #8d9891;
}

.menutin-app-page .mt-search .mt-ico {
	width: 17px;
}

/* El icono ya viene del SVG: el fondo duplicado se quita. */
.menutin-app-page .mt-search .mt-input {
	padding-left: 40px;
	background-image: none;
}

/* --- 23.11 Tablas, filas, badges y alertas ------------------------- */
.menutin-app-page .mt-tablewrap {
	border-radius: 14px;
	box-shadow: var(--mt-shadow-sm);
}

.menutin-app-page table.mt-table th {
	padding: 12px 16px;
	background: var(--mt-color-surface-soft);
	border-bottom: 1px solid var(--mt-color-border);
	font-size: .68rem;
	letter-spacing: .07em;
	color: #7d8882;
}

.menutin-app-page table.mt-table td {
	padding: 13px 16px;
}

.menutin-app-page table.mt-table tbody tr {
	transition: background-color 120ms linear;
}

.menutin-app-page .mt-row {
	padding: 12px 16px;
	border-radius: 12px;
	box-shadow: var(--mt-shadow-xs);
	transition: border-color var(--mt-transition), box-shadow var(--mt-transition);
}

.menutin-app-page .mt-row:hover {
	border-color: #cbd5ce;
	box-shadow: var(--mt-shadow-sm);
}

.menutin-app-page .mt-row strong {
	font-weight: 700;
}

.menutin-app-page .mt-badge {
	padding: 3px 9px;
	font-size: .72rem;
	box-shadow: inset 0 0 0 1px rgba(16, 24, 40, .04);
}

.menutin-app-page .mt-alert {
	padding: 13px 15px;
	border-radius: 12px;
}

.menutin-app-page .mt-state {
	border-color: var(--mt-color-border);
	border-radius: 14px;
	box-shadow: var(--mt-shadow-xs);
}

/* Hoja inferior mas redonda. Solo existe por debajo de 1024: desde ahi el modal
   es tarjeta centrada y la regla original le pone radio en las 4 esquinas.
   Sin este @media la ganancia seria la nuestra, porque una consulta de medios
   no suma especificidad y esta regla va la ultima del archivo. */
@media (max-width: 1023px) {
	.menutin-app-page .mt-modal-box {
		border-radius: 18px 18px 0 0;
	}
}

/* Fichas de paleta del estudio de diseno. El carril izquierdo es estrecho y el
   nombre es el unico identificador de la paleta: "Mediterr…" no sirve. Se da
   sitio para una linea y se parte la palabra solo como ultimo recurso. */
.menutin-app-page .mt-palgrid {
	grid-template-columns: repeat( auto-fill, minmax( 170px, 1fr ) );
}
.menutin-app-page .mt-palbtn-name {
	min-width: 0;
	overflow: visible;
	text-overflow: clip;
	white-space: normal;
	overflow-wrap: break-word;
	line-height: 1.25;
}

/* --- 23.12 Bottom-nav (móvil) -------------------------------------- */
.menutin-app-page .mt-bottomnav {
	padding: 6px 8px calc(6px + env(safe-area-inset-bottom));
	gap: 4px;
	background: rgba(255, 255, 255, .96);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	box-shadow: 0 -8px 20px -16px rgba(16, 24, 40, .55);
}

.menutin-app-page .mt-bottomnav a {
	gap: 3px;
	padding: 6px 2px;
	border-radius: 12px;
	font-size: .68rem;
	color: #8d9891;
}

.menutin-app-page .mt-bottomnav a .mt-ico {
	width: 21px;
}

.menutin-app-page .mt-bottomnav a[aria-current="page"] {
	background: var(--mt-color-primary-soft);
	color: var(--mt-color-primary-dark);
	font-weight: 700;
}

/* --- 23.13 Foco visible ------------------------------------------- */
.menutin-app-page a:focus-visible,
.menutin-app-page button:focus-visible,
.menutin-app-page summary:focus-visible,
.menutin-app-page input:focus-visible,
.menutin-app-page select:focus-visible,
.menutin-app-page textarea:focus-visible {
	outline: 2px solid var(--mt-color-primary);
	outline-offset: 2px;
	box-shadow: var(--mt-ring);
}

/* --- 23.14 Tablet: carril de iconos (768–1023) --------------------- */
@media (min-width: 768px) and (max-width: 1023px) {
	.menutin-app-page .mt-sidebar {
		display: block;
		width: var(--mt-rail-w);
	}

	.menutin-app-page .mt-sidebar-scroll {
		padding: 14px 8px 24px;
		gap: 0;
	}

	/* Sin títulos de grupo: se marcan con un separador. */
	.menutin-app-page .mt-navgroup-title {
		display: none;
	}

	.menutin-app-page .mt-navgroup + .mt-navgroup {
		margin-top: 12px;
		padding-top: 12px;
		border-top: 1px solid var(--mt-color-line);
	}

	.menutin-app-page .mt-nav {
		gap: 4px;
	}

	.menutin-app-page .mt-nav a {
		justify-content: center;
		width: 48px;
		height: 48px;
		min-height: 48px;
		margin: 0 auto;
		padding: 0;
		gap: 0;
	}

	.menutin-app-page .mt-nav a .mt-ico {
		width: 22px;
	}

	/* La etiqueta sigue en el DOM (nombre accesible) y viaja a `title`. */
	.menutin-app-page .mt-nav-label {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}

	.menutin-app-page .mt-nav-badge {
		position: absolute;
		top: 1px;
		right: 1px;
		min-width: 17px;
		padding: 0 4px;
		font-size: .62rem;
		line-height: 17px;
		text-align: center;
	}

	.menutin-app-page .mt-nav a[aria-current="page"]::before {
		left: -8px;
		top: 12px;
		bottom: 12px;
	}

	/* Con carril visible no hace falta el bottom-nav. */
	.menutin-app-page .mt-bottomnav {
		display: none;
	}

	/* Si el drawer se abre (estado guardado en localStorage), se ve completo. */
	.menutin-app-page .mt-sidebar.open {
		width: 248px;
	}

	.menutin-app-page .mt-sidebar.open .mt-navgroup-title {
		display: block;
	}

	.menutin-app-page .mt-sidebar.open .mt-nav a {
		justify-content: flex-start;
		width: auto;
		height: 44px;
		min-height: 44px;
		padding: 0 12px;
		gap: 12px;
	}

	.menutin-app-page .mt-sidebar.open .mt-nav-label {
		position: static;
		width: auto;
		height: auto;
		clip-path: none;
		flex: 1;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.menutin-app-page .mt-sidebar.open .mt-nav-badge {
		position: static;
		min-width: 0;
		padding: 1px 7px;
		font-size: .7rem;
		line-height: 1.3;
	}
}

/* --- 23.15 Móvil (<700) ------------------------------------------- */
@media (max-width: 699px) {
	.menutin-app-page .mt-topbar {
		padding: 8px 14px;
	}

	.menutin-app-page .mt-apphead {
		gap: 12px;
		margin-bottom: 18px;
	}

	.menutin-app-page .mt-apphead-icon {
		width: 38px;
		height: 38px;
		border-radius: 11px;
	}

	.menutin-app-page .mt-apphead-icon .mt-ico {
		width: 19px;
	}

	.menutin-app-page .mt-apphead-body {
		min-width: 140px;
	}

	.menutin-app-page .mt-apphead-body h1 {
		font-size: 1.4rem;
	}

	/* Métricas en dos columnas: etiqueta corta, número protagonista. */
	.menutin-app-page .mt-grid,
	.menutin-app-page .mt-grid--4 {
		gap: 10px;
	}

	.menutin-app-page .mt-stat {
		padding: 12px 13px;
		border-radius: 12px;
	}

	.menutin-app-page .mt-stat-icon {
		width: 28px;
		height: 28px;
		margin-bottom: 8px;
		border-radius: 8px;
	}

	.menutin-app-page .mt-stat h3 {
		font-size: .62rem;
		letter-spacing: .06em;
	}

	.menutin-app-page .mt-stat-value {
		font-size: 1.15rem;
	}

	.menutin-app-page .mt-stat .mt-hint {
		font-size: .74rem;
	}

	.menutin-app-page .mt-tabs {
		margin-bottom: 14px;
		border-radius: 12px;
	}

	.menutin-app-page .mt-tabs a {
		min-height: 40px;
		padding: 0 12px;
		font-size: .82rem;
	}

	.menutin-app-page .mt-row {
		padding: 12px 14px;
	}

	/* Tabla → tarjeta: etiqueta a la izquierda, valor a la derecha. */
	.menutin-app-page table.mt-table td {
		display: flex;
		align-items: baseline;
		justify-content: space-between;
		gap: 16px;
		padding: 7px 0;
		border-bottom: 1px solid var(--mt-color-line);
	}

	.menutin-app-page table.mt-table td:last-child {
		border-bottom: 0;
	}

	.menutin-app-page table.mt-table td::before {
		display: block;
		flex: none;
		margin-right: auto;
		font-weight: 600;
	}

	.menutin-app-page table.mt-table tr {
		padding: 6px 14px;
		box-shadow: var(--mt-shadow-xs);
	}

	/* Avisos: a ancho completo y por encima del bottom-nav. */
	.menutin-app-page .mt-toasts {
		right: var(--mt-space-md);
		left: var(--mt-space-md);
		max-width: none;
		bottom: calc(84px + env(safe-area-inset-bottom));
	}
}

/* --- 23.16 Movimiento reducido ------------------------------------ */
@media (prefers-reduced-motion: reduce) {
	.menutin-app-page *,
	.menutin-app-page *::before,
	.menutin-app-page *::after {
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .001ms !important;
		scroll-behavior: auto !important;
	}

	.menutin-app-page .mt-btn:active {
		transform: none;
	}
}


/* ================================================================
   24. EDITOR DE DISEÑO 1.7.13 — lienzo, inspector y controles
   ----------------------------------------------------------------
   Diagnóstico medido en el banco de pruebas (nunca a ojo):
     · fitHeight() escribía un `height` inline también por debajo de
       1024 px: el layout apilado quedaba bloqueado y la barra de vistas
       se superponía al panel izquierdo (main medía 465 px con hijos de
       1300 px).
     · El lienzo medía 520 px entre dos paneles de 590 px: la vista de
       tablet (768 px) se recortaba. Ahora el iframe se escala para caber
       (JS) y el inspector se guarda en un cajón por debajo de 1600 px.
     · `.mt-designer-tab-panel` medía 2674 px de contenido en 397 px de
       ventana y las paletas salían a 1 columna.
   Reglas de la capa: scope `#menutin-app .mt-*` (un ID gana a las clases
   de system-page.css y a las reglas 1.7.4 sin ID), sin márgenes negativos
   sobre el eje vertical, sin traslaciones negativas en Y y sin alturas
   negativas: todo el desencaje se resuelve con flujo normal y rejillas.

   Tramos: ≥1600 tres columnas · 1024–1599 lienzo + inspector en cajón
   · <1024 apilado (lienzo delante). Con tres columnas en 1440 el lienzo se
   quedaba en 493px — menos cuadro que el cajón de 1280 (694px) — así que las
   tres columnas solo se sostienen a partir de 1600px.
   ================================================================ */

/* --- 24.1 Workspace ------------------------------------------------ */
#menutin-app .mt-designer-workspace {
	--ds-left: 300px;
	--ds-right: 284px;
	--ds-topbar-h: 58px;
	display: flex;
	flex-direction: column;
	height: calc(100dvh - 150px);
	min-height: 560px;
	margin-top: 0;
	background: var(--mt-color-surface);
	border: 1px solid var(--mt-color-border);
	border-radius: var(--mt-radius-lg);
	box-shadow: var(--mt-shadow-sm);
	overflow: hidden;
}

#menutin-app .mt-designer-main {
	display: grid;
	grid-template-columns: var(--ds-left) minmax(0, 1fr) var(--ds-right);
	flex: 1 1 auto;
	min-height: 0;
	background: var(--mt-color-canvas);
}

/* El editor necesita todo el ancho: con el tope de 1280px del contenido, en
   una pantalla de 1920px el lienzo medía 597px, menos que en un portátil de
   1440 (806px). Si el navegador no conoce `:has()` simplemente ignora la
   regla y el editor se queda con el ancho de siempre. */
#menutin-app:has(.mt-designer-workspace) .mt-main {
	max-width: none;
}

/* --- 24.2 Barra superior ------------------------------------------- */
/* La barra quiebra en dos filas antes que solapar: el grupo central
   dejaba de encogerse (min-width: 0) y sus botones se pintaban encima de
   las acciones en cuanto el lienzo medía menos de ~1370px. */
#menutin-app .mt-designer-topbar {
	display: flex;
	align-items: center;
	flex: 0 0 auto;
	min-height: var(--ds-topbar-h);
	gap: 12px;
	row-gap: 8px;
	padding: 8px 14px;
	background: var(--mt-color-surface);
	border-bottom: 1px solid var(--mt-color-border);
	flex-wrap: wrap;
	overflow: visible;
}

#menutin-app .mt-designer-topbar-left,
#menutin-app .mt-designer-topbar-right {
	display: flex;
	align-items: center;
	gap: 8px;
	flex: 0 0 auto;
	min-width: 0;
}

#menutin-app .mt-designer-topbar-left {
	gap: 9px;
}

#menutin-app .mt-designer-topbar-center {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	flex: 1 1 auto;
	/* min-width: auto anula el 0 de la capa 1.7.4: sin ese cero el grupo
	   central se encogía por debajo de su contenido y pintaba los botones
	   encima de las acciones de la derecha. */
	min-width: auto;
	flex-wrap: wrap;
}

#menutin-app .mt-designer-topbar-right {
	justify-content: flex-end;
	margin-left: auto;
}

#menutin-app .mt-designer-topbar-icon {
	width: 30px;
	height: 30px;
	border-radius: 9px;
}

#menutin-app .mt-designer-title {
	margin: 0;
	font-size: var(--mt-fs-md);
	font-weight: 700;
	letter-spacing: -.01em;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* El nombre del restaurante sustituye al badge de plan fijo, que afirmaba
   «BUSINESS» en todos los restaurantes sin mirar su plan real. */
#menutin-app .mt-designer-resto {
	flex: 0 0 auto;
	max-width: 190px;
	padding: 4px 10px;
	border: 1px solid var(--mt-color-border);
	border-radius: 999px;
	background: var(--mt-color-bg-soft);
	color: var(--mt-color-muted);
	font-size: var(--mt-fs-xs);
	font-weight: 600;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

#menutin-app .mt-designer-live-badge {
	display: flex;
	align-items: center;
	gap: 7px;
	flex: 0 0 auto;
	padding: 4px 10px 4px 8px;
	border: 1px solid var(--mt-color-border);
	border-radius: 999px;
	background: var(--mt-color-bg-soft);
	white-space: nowrap;
}

#menutin-app .mt-designer-live-text {
	font-size: var(--mt-fs-xs);
	font-weight: 600;
	color: var(--mt-color-muted);
}

#menutin-app .mt-designer-devices {
	display: flex;
	gap: 0;
	padding: 3px;
	border: 1px solid var(--mt-color-border);
	border-radius: 11px;
	background: var(--mt-color-bg-soft);
}

#menutin-app .mt-btn-device {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 34px;
	padding: 5px 12px;
	border: none;
	border-radius: 8px;
	background: transparent;
	color: var(--mt-color-muted);
	font-size: var(--mt-fs-xs);
	font-weight: 600;
	white-space: nowrap;
}

#menutin-app .mt-btn-device .mt-ico {
	width: 15px;
	height: 15px;
}

#menutin-app .mt-btn-device:hover {
	background: var(--mt-color-surface);
	color: var(--mt-color-ink);
	border-color: transparent;
}

#menutin-app .mt-btn-device.active {
	background: var(--mt-color-surface);
	color: var(--mt-color-primary);
	border-color: transparent;
	box-shadow: var(--mt-shadow-xs);
}

/* El botón de inspector solo existe cuando el cajón es necesario. */
#menutin-app .mt-btn-inspector {
	display: none;
	align-items: center;
	min-height: 32px;
	padding: 5px 12px;
	border: 1px solid var(--mt-color-primary);
	border-radius: 9px;
	background: transparent;
	color: var(--mt-color-primary);
	font-size: var(--mt-fs-xs);
	font-weight: 700;
	cursor: pointer;
}

#menutin-app .mt-btn-inspector.active,
#menutin-app .mt-btn-inspector:hover {
	background: var(--mt-color-primary);
	color: #fff;
}

#menutin-app .mt-btn-ghost,
#menutin-app .mt-btn-primary {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	min-height: 34px;
	padding: 6px 13px;
	font-size: var(--mt-fs-xs);
	white-space: nowrap;
}

#menutin-app .mt-btn-primary {
	font-weight: 700;
	box-shadow: var(--mt-shadow-xs);
}

#menutin-app .mt-btn-ghost .mt-ico {
	width: 15px;
	height: 15px;
}

#menutin-app .mt-btn-ghost.is-busy {
	opacity: .6;
	cursor: progress;
}

#menutin-app .mt-btn-ghost.is-busy .mt-ico {
	animation: mt-spin 1s linear infinite;
}

@keyframes mt-spin {
	to { transform: rotate(360deg); }
}

/* --- 24.3 Columnas -------------------------------------------------- */
#menutin-app .mt-designer-left {
	grid-column: 1;
	grid-row: 1;
	display: flex;
	flex-direction: column;
	min-height: 0;
	background: var(--mt-color-surface);
	border-right: 1px solid var(--mt-color-border);
	overflow: hidden;
}

#menutin-app .mt-designer-center {
	grid-column: 2;
	grid-row: 1;
	display: grid;
	grid-template-rows: minmax(0, 1fr);
	grid-template-columns: minmax(0, 1fr);
	min-width: 0;
	min-height: 0;
	padding: 18px 16px;
	background: radial-gradient(120% 120% at 50% 0%, var(--mt-color-surface-soft) 0%, var(--mt-color-canvas) 60%);
	border-right: 1px solid var(--mt-color-border);
	overflow: hidden;
}

#menutin-app .mt-designer-right {
	grid-column: 3;
	grid-row: 1;
	display: flex;
	flex-direction: column;
	min-height: 0;
	padding: 12px;
	background: var(--mt-color-surface);
	overflow-y: auto;
	overscroll-behavior: contain;
}

/* El stage es el hueco real del lienzo: JS lee su ancho/alto y coloca el
   iframe dentro con scale(), así que un tablet de 768px se ve completo en
   un hueco de 520px en lugar de recortarse. */
#menutin-app .mt-designer-stage {
	position: relative;
	width: 100%;
	height: 100%;
	min-height: 320px;
	border-radius: 14px;
	overflow: hidden;
	background: #fff;
	box-shadow: var(--mt-shadow-md);
}

/* Aviso del lienzo: la vista previa puede fallar (sesión, caché, servidor
   lento) y el editor debe decirlo encima del lienzo en vez de quedarse
   blanco. Flota sobre el iframe y no bloquea los controles del lienzo. */
#menutin-app .mt-designer-preview-warn {
	position: absolute;
	top: 10px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 5;
	max-width: calc(100% - 24px);
	padding: 8px 14px;
	border-radius: 10px;
	background: #fff4e5;
	color: #8a4b08;
	border: 1px solid #f0c48a;
	font-size: var(--mt-fs-sm, 13px);
	font-weight: 600;
	line-height: 1.35;
	box-shadow: var(--mt-shadow-sm, 0 6px 18px rgba(0, 0, 0, .12));
	text-align: center;
	pointer-events: none;
}

#menutin-app .mt-designer-preview-warn[hidden] {
	display: none;
}

#menutin-app .mt-designer-frame {
	position: absolute;
	left: 0;
	top: 0;
	transform-origin: top left;
	min-height: 0;
	max-height: none;
	border: none;
	border-radius: 0;
	background: #fff;
	display: block;
}

#menutin-app .mt-designer-frame[data-device="mobile"] {
	border-left: 1px solid var(--mt-color-border);
	border-right: 1px solid var(--mt-color-border);
}

/* --- 24.4 Panel izquierdo: buscador, pestañas y acordeones ---------- */
/* Rejilla 2×2 (1.7.9): con la fila horizontal «Aparien…» se truncaba. Aquí se
   conserva la rejilla y solo se gana altura táctil.
   flex: 0 0 auto es obligatorio: la columna izquierda es flex en columna y,
   sin él, la tira se encogía a 31px y «Estructura» y «Avanzado» quedaban
   ocultas bajo el overflow:hidden del panel. */
#menutin-app .mt-designer-tabs {
	display: grid;
	grid-template-columns: 1fr 1fr;
	flex: 0 0 auto;
	gap: 4px;
	padding: 6px;
	border-bottom: 1px solid var(--mt-color-border);
	background: var(--mt-color-bg-soft);
}

#menutin-app .mt-designer-tab {
	min-height: 42px;
	padding: 8px 8px;
	border: 1px solid transparent;
	border-radius: 10px;
	background: transparent;
	color: var(--mt-color-muted);
	font-size: var(--mt-fs-xs);
	font-weight: 600;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

#menutin-app .mt-designer-tab:hover {
	background: var(--mt-color-surface);
	color: var(--mt-color-ink);
}

#menutin-app .mt-designer-tab.active {
	background: var(--mt-color-surface);
	border-color: var(--mt-color-border);
	color: var(--mt-color-primary);
	box-shadow: var(--mt-shadow-xs);
}

#menutin-app .mt-designer-left .mt-designer-tab-panel {
	flex: 1 1 auto;
	min-height: 0;
	padding: 12px;
	overflow-y: auto;
	overscroll-behavior: contain;
}

#menutin-app .mt-designer-accordion-head {
	min-height: 44px;
	padding: 10px 12px;
	font-size: var(--mt-fs-sm);
}

#menutin-app .mt-designer-accordion-head span {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
}

#menutin-app .mt-designer-accordion-body {
	padding: 0 12px 12px;
}

/* Tarjeta de plantilla actual: nombre y categoría en dos líneas. */
#menutin-app .mt-designer-tpl-card > div {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

#menutin-app .mt-designer-tpl-card strong {
	font-size: var(--mt-fs-sm);
}

/* --- 24.5 Colores: selector + código hexadecimal -------------------- */
#menutin-app .mt-colorgrid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
	gap: 10px;
}

#menutin-app .mt-colorfield {
	display: flex;
	flex-direction: column;
	gap: 5px;
	padding: 9px 10px;
	border: 1px solid var(--mt-color-border);
	border-radius: 11px;
	background: var(--mt-color-bg-soft);
}

#menutin-app .mt-colorfield-name {
	font-size: var(--mt-fs-xs);
	font-weight: 700;
	color: var(--mt-color-muted);
	letter-spacing: .02em;
}

#menutin-app .mt-colorfield-row {
	display: flex;
	align-items: center;
	gap: 8px;
}

#menutin-app .mt-input--color {
	appearance: none;
	-webkit-appearance: none;
	flex: 0 0 auto;
	width: 44px;
	height: 36px;
	padding: 3px;
	border: 1px solid var(--mt-color-border);
	border-radius: 9px;
	background: transparent;
	box-shadow: none;
	cursor: pointer;
}

#menutin-app .mt-input--color::-webkit-color-swatch-wrapper {
	padding: 0;
}

#menutin-app .mt-input--color::-webkit-color-swatch {
	border: none;
	border-radius: 6px;
}

#menutin-app .mt-input--color::-moz-color-swatch {
	border: none;
	border-radius: 6px;
}

#menutin-app .mt-input--hex {
	flex: 1 1 auto;
	min-width: 0;
	height: 36px;
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: var(--mt-fs-xs);
	letter-spacing: .04em;
	text-transform: uppercase;
}

#menutin-app .mt-input--hex.is-invalid {
	border-color: var(--mt-color-danger);
	box-shadow: 0 0 0 3px rgba(198, 40, 40, .14);
}

#menutin-app .mt-colorbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 9px 11px;
	margin-bottom: 10px;
	border: 1px solid var(--mt-color-border);
	border-radius: 11px;
	background: var(--mt-color-bg-soft);
}

#menutin-app .mt-swatches {
	display: flex;
	gap: 3px;
	flex: 0 0 auto;
}

#menutin-app .mt-swatches span {
	width: 18px;
	height: 18px;
	border: 1px solid rgba(16, 24, 40, .26);
	border-radius: 5px;
}

/* --- 24.6 Paletas --------------------------------------------------- */
#menutin-app .mt-palgroup-title {
	margin: 12px 0 6px;
	font-size: 10px;
	font-weight: 800;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--mt-color-muted);
}

#menutin-app .mt-palgrid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
	gap: 7px;
}

#menutin-app .mt-palbtn {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 6px;
	min-height: 52px;
	padding: 8px 7px;
	border: 1px solid var(--mt-color-border);
	border-radius: 10px;
	background: var(--mt-color-surface);
	cursor: pointer;
	text-align: left;
	transition: border-color .15s, box-shadow .15s;
}

#menutin-app .mt-palbtn:hover {
	border-color: var(--mt-color-primary);
}

#menutin-app .mt-palbtn.active {
	border-color: var(--mt-color-primary);
	box-shadow: var(--mt-ring);
}

#menutin-app .mt-palbtn-name {
	max-width: 100%;
	font-size: 11px;
	font-weight: 600;
	color: var(--mt-color-ink);
	line-height: 1.25;
	letter-spacing: -.005em;
	white-space: normal;
	/* A 107px de tarjeta «Hamburguesería» se partía a mitad de palabra. */
	overflow-wrap: break-word;
}

#menutin-app .mt-palsw {
	display: flex;
	gap: 2px;
}

/* --- 24.7 Inspector ------------------------------------------------- */
#menutin-app .mt-designer-rsection {
	padding: 11px;
	margin-bottom: 10px;
	border: 1px solid var(--mt-color-border);
	border-radius: 12px;
	background: var(--mt-color-bg-soft);
}

#menutin-app .mt-designer-rsection h3 {
	margin: 0 0 9px;
	font-size: var(--mt-fs-xs);
	font-weight: 800;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--mt-color-muted);
}

#menutin-app .mt-designer-rfield {
	margin-bottom: 10px;
}

#menutin-app .mt-designer-rlabel {
	display: block;
	margin-bottom: 5px;
	font-size: var(--mt-fs-xs);
	font-weight: 600;
	color: var(--mt-color-text);
}

#menutin-app .mt-comp-toggle label {
	display: flex;
	align-items: center;
	gap: 9px;
	min-height: 38px;
	padding: 4px 2px;
}

#menutin-app .mt-comp-toggle-label {
	font-size: var(--mt-fs-xs);
	line-height: 1.25;
}

#menutin-app .mt-designer-coverpick {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
}

#menutin-app .mt-designer-coverpick img {
	width: 58px;
	height: 58px;
	flex: 0 0 auto;
	border: 1px solid var(--mt-color-border);
	border-radius: 10px;
	object-fit: cover;
	background: var(--mt-color-surface);
}

#menutin-app .mt-designer-clear {
	border: none;
	background: transparent;
	color: var(--mt-color-danger);
	font-size: var(--mt-fs-xs);
	font-weight: 600;
	cursor: pointer;
	padding: 5px 6px;
	border-radius: 7px;
	min-height: 32px;
}

#menutin-app .mt-designer-clear:hover {
	background: rgba(198, 40, 40, .08);
}

/* Atajo del inspector: muestra el valor y lleva al campo real. */
#menutin-app .mt-quickfield {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	width: 100%;
	min-height: 40px;
	padding: 7px 10px;
	margin-bottom: 6px;
	border: 1px dashed var(--mt-color-border);
	border-radius: 10px;
	background: var(--mt-color-surface);
	color: var(--mt-color-ink);
	font-size: var(--mt-fs-xs);
	text-align: left;
	cursor: pointer;
	transition: border-color .15s, background .15s;
}

#menutin-app .mt-quickfield:hover {
	border-color: var(--mt-color-primary);
	background: var(--mt-color-bg-soft);
}

#menutin-app .mt-quickfield-label {
	flex: 0 0 auto;
	font-weight: 700;
	color: var(--mt-color-muted);
}

#menutin-app .mt-quickfield-value {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-weight: 600;
}

#menutin-app .mt-quickfield-value.is-empty {
	color: var(--mt-color-muted);
	font-style: italic;
	font-weight: 500;
}

#menutin-app .mt-designer-tpl-note {
	margin: 8px 0 0;
	font-size: var(--mt-fs-xs);
	color: var(--mt-color-muted);
}

/* --- 24.8 Pestaña Avanzado: resumen de personalización -------------- */
#menutin-app .mt-designer-count {
	display: flex;
	align-items: baseline;
	gap: 7px;
	margin: 0 0 8px;
	font-size: var(--mt-fs-xs);
	color: var(--mt-color-muted);
	text-transform: uppercase;
	letter-spacing: .06em;
}

#menutin-app .mt-designer-count strong {
	font-size: 22px;
	line-height: 1;
	color: var(--mt-color-primary);
	letter-spacing: 0;
}

#menutin-app .mt-designer-none {
	margin: 0;
	font-size: var(--mt-fs-sm);
	color: var(--mt-color-muted);
	font-style: italic;
}

#menutin-app .mt-designer-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0;
	padding: 0;
	list-style: none;
}

#menutin-app .mt-designer-chips li {
	padding: 4px 9px;
	border: 1px solid var(--mt-color-border);
	border-radius: 999px;
	background: var(--mt-color-bg-soft);
	font-size: var(--mt-fs-xs);
	color: var(--mt-color-text);
}

#menutin-app .mt-designer-devices--inline {
	margin-top: 8px;
}

/* --- 24.9 Tablet y portátil 1024–1599: el inspector pasa a cajón ------- */
@media (max-width: 1599px) {
	#menutin-app .mt-designer-workspace {
		--ds-left: 272px;
	}

	/* Con el cajón abierto no caben las cuatro etiquetas de la barra: los
	   botones secundarios se quedan solo con su glifo (el title sigue dando
	   el nombre accesible) y el texto largo del estado sobra junto al chip
	   «En vivo», que ya dice lo mismo. */
	#menutin-app .mt-designer-live-text,
	#menutin-app .mt-btn-device .mt-btn-label,
	#menutin-app .mt-designer-topbar-right .mt-btn-ghost .mt-btn-label {
		display: none;
	}

	#menutin-app .mt-designer-topbar-right .mt-btn-ghost {
		padding: 6px 10px;
	}

	#menutin-app .mt-designer-main {
		position: relative;
		grid-template-columns: var(--ds-left) minmax(0, 1fr);
	}

	#menutin-app .mt-designer-center {
		grid-column: 2;
		border-right: none;
	}

	#menutin-app .mt-designer-right {
		grid-column: auto;
		grid-row: 1;
		position: absolute;
		right: 0;
		bottom: 0;
		top: 0;
		width: min(340px, 86%);
		max-width: none;
		padding: 12px;
		border-left: 1px solid var(--mt-color-border);
		box-shadow: -18px 0 40px rgba(12, 20, 16, .14);
		transform: translateX(106%);
		transition: transform .24s var(--mt-ease);
		z-index: 6;
	}

	#menutin-app .mt-designer-right.is-open {
		transform: translateX(0);
	}

	#menutin-app .mt-btn-inspector {
		display: inline-flex;
	}

	/* En tablet la barra se toca con el dedo: 32px se queda corto. */
	#menutin-app .mt-btn-device,
	#menutin-app .mt-btn-inspector {
		min-height: 38px;
		padding: 8px 13px;
	}
}

/* --- 24.10 <1024: editor apilado, lienzo delante -------------------- */
@media (max-width: 1023px) {
	#menutin-app .mt-designer-workspace {
		height: auto;
		min-height: 0;
		border-radius: var(--mt-radius-md);
	}

	#menutin-app .mt-designer-main {
		display: flex;
		flex-direction: column;
	}

	#menutin-app .mt-designer-center {
		order: -1;
		padding: 12px;
		min-height: 62vh;
		border-bottom: 1px solid var(--mt-color-border);
	}

	#menutin-app .mt-designer-left,
	#menutin-app .mt-designer-right {
		width: auto;
		max-width: none;
		max-height: none;
		position: static;
		transform: none;
		border-left: none;
		border-right: none;
		box-shadow: none;
		overflow: visible;
		z-index: auto;
	}

	#menutin-app .mt-designer-left .mt-designer-tab-panel {
		overflow: visible;
	}

	/* El panel izquierdo ocupa todo el ancho: ocho paletas de 98px era una
	   pared de muestras ilegibles. */
	#menutin-app .mt-palgrid {
		grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	}

	#menutin-app .mt-designer-topbar {
		flex-wrap: wrap;
		row-gap: 8px;
	}

	#menutin-app .mt-designer-topbar-center {
		order: 3;
		flex: 1 1 100%;
		justify-content: flex-start;
		flex-wrap: wrap;
	}

	#menutin-app .mt-designer-topbar-right {
		margin-left: auto;
	}

	/* Abajo de 1024 el inspector ya no es un cajón: es la última sección del
	   documento, así que el botón que lo abre sobra. */
	#menutin-app .mt-btn-inspector {
		display: none;
	}

	#menutin-app .mt-btn-ghost .mt-btn-label {
		display: none;
	}
}

/* --- 24.11 <=760: una rejilla de controles y objetivos táctiles ------ */
@media (max-width: 760px) {
	#menutin-app .mt-designer-title {
		font-size: var(--mt-fs-sm);
	}

	#menutin-app .mt-designer-resto {
		display: none;
	}

	#menutin-app .mt-colorgrid,
	#menutin-app .mt-palgrid {
		grid-template-columns: 1fr 1fr;
	}

	#menutin-app .mt-designer-tab {
		flex: 1 0 30%;
		min-height: 46px;
	}

	#menutin-app .mt-designer-accordion-head,
	#menutin-app .mt-comp-toggle label {
		min-height: 44px;
	}

	#menutin-app .mt-btn-device {
		min-height: 40px;
		padding: 8px 14px;
	}

	#menutin-app .mt-btn-inspector,
	#menutin-app .mt-btn-ghost,
	#menutin-app .mt-btn-primary {
		min-height: 40px;
		padding: 8px 14px;
	}
}

/* --- 24.12 Detalle: foco y movimiento -------------------------------- */
#menutin-app .mt-designer-tab:focus-visible,
#menutin-app .mt-btn-device:focus-visible,
#menutin-app .mt-palbtn:focus-visible,
#menutin-app .mt-quickfield:focus-visible,
#menutin-app .mt-btn-inspector:focus-visible {
	outline: 2px solid var(--mt-color-primary);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	#menutin-app .mt-designer-right {
		transition: none;
	}

	#menutin-app .mt-btn-ghost.is-busy .mt-ico {
		animation: none;
	}
}

/* --- 24.13 Pantalla completa ----------------------------------------
   El modo 1.7.8 quita el chrome de la app y deja el editor a 100dvh. Son
   reglas con ID + 2 clases para que ni el cajón (24.9) ni el apilado (24.10)
   les ganen por orden de aparición. */
#menutin-app .menutin-app-page.mt-ds-full .mt-designer-workspace {
	height: 100vh;
	height: 100dvh;
	min-height: 0;
	margin: 0;
	border: 0;
	border-radius: 0;
}

#menutin-app .menutin-app-page.mt-ds-full .mt-designer-center {
	padding: 12px;
}

/* El chip del restaurante solo hace falta cuando la app oculta su cabecera. */
#menutin-app .menutin-app-page.mt-ds-full .mt-designer-resto {
	display: inline-flex;
}

/* En un móvil con el editor a pantalla completa los paneles se siguen
   leyendo: el main del apilado puede recorrerlos con scroll. */
@media (max-width: 1023px) {
	#menutin-app .menutin-app-page.mt-ds-full .mt-designer-main {
		overflow-y: auto;
	}
}

/* ==========================================================================
   25. MÓDULO PEDIDOS (1.7.22)
   Franja de métricas, barra de filtros, lista por columnas y ficha del pedido
   con rail lateral. Todo vive dentro del scope .menutin-app-page.
   ========================================================================== */

/* 25.1 Franja de métricas: 4 en pc, 2 en tablet y móvil. */
.menutin-app-page .mt-stats {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--mt-space-sm);
	margin: 0 0 var(--mt-space-md);
}

.menutin-app-page .mt-stats .mt-stat {
	margin: 0;
	min-width: 0;
}

@media (max-width: 1023px) {
	.menutin-app-page .mt-stats {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* 25.2 Barra de filtros: búsqueda dominante y campos compactos. Se mantiene
   en flex (el número de campos cambia con las sedes), solo se ajustan bases. */
.menutin-app-page .mt-filters--orders .mt-field {
	margin: 0;
	min-width: 0;
	flex: 1 1 148px;
}

.menutin-app-page .mt-filters--orders .mt-field--search {
	flex: 2 1 240px;
}

.menutin-app-page .mt-filters--orders .mt-search {
	margin: 0;
}

.menutin-app-page .mt-filters--orders .mt-input,
.menutin-app-page .mt-filters--orders .mt-select {
	min-height: 40px;
	padding: 8px 10px;
	font-size: var(--mt-fs-sm);
}

.menutin-app-page .mt-filters--orders .mt-filters-actions {
	flex: 0 0 auto;
	margin-left: auto;
}

/* Cabecero de resultados: cuántos pedidos hay y qué tramo se muestra. */
.menutin-app-page .mt-listmeta {
	margin: 0 0 10px;
	font-size: var(--mt-fs-xs);
	line-height: 1.5;
	color: var(--mt-color-muted);
	font-variant-numeric: tabular-nums;
}

/* 25.3 Fila de pedidos: código | cliente | importe y estado | acciones. */
.menutin-app-page .mt-row-id {
	display: flex;
	align-items: baseline;
	gap: 8px;
	min-width: 0;
}

.menutin-app-page .mt-row-code {
	font-family: var(--mt-mono);
	font-size: var(--mt-fs-xs);
	font-weight: 700;
	letter-spacing: .02em;
	color: var(--mt-color-text);
}

.menutin-app-page .mt-row-when {
	font-size: var(--mt-fs-xs);
	color: var(--mt-color-muted);
	white-space: nowrap;
}

.menutin-app-page .mt-row-sub {
	font-size: var(--mt-fs-xs);
	color: var(--mt-color-muted);
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.menutin-app-page .mt-row-aside {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-left: auto;
	min-width: 0;
}

.menutin-app-page .mt-row-amount {
	font-variant-numeric: tabular-nums;
	font-weight: 800;
	font-size: var(--mt-fs-sm);
	white-space: nowrap;
}

.menutin-app-page .mt-row-form {
	display: inline-flex;
	margin: 0;
}

/* Prioridad real de la fila: aviso a los 10 min y retraso a los 25. */
.menutin-app-page .mt-rowlist--orders .mt-row--warn {
	border-left: 3px solid var(--mt-color-warn);
	background: #fdf9ef;
}

.menutin-app-page .mt-rowlist--orders .mt-row--err {
	border-left: 3px solid var(--mt-color-danger);
	background: #fdf3f3;
}

.menutin-app-page .mt-rowlist--orders .mt-row--ok {
	border-left: 3px solid var(--mt-color-ok);
}

.menutin-app-page .mt-rowlist--orders .mt-row--info {
	border-left: 3px solid var(--mt-color-info);
}

/* Móvil: cabecera (código + importe) arriba, cuerpo y acciones debajo. */
.menutin-app-page .mt-rowlist--orders .mt-row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	grid-template-areas:
		"id aside"
		"main main"
		"actions actions";
	gap: 4px 12px;
	align-items: start;
	padding: 12px 14px;
}

.menutin-app-page .mt-rowlist--orders .mt-row-id {
	grid-area: id;
}

.menutin-app-page .mt-rowlist--orders .mt-row-main {
	grid-area: main;
	flex-direction: column;
	align-items: flex-start;
	gap: 2px;
	min-width: 0;
}

.menutin-app-page .mt-rowlist--orders .mt-row-main > strong {
	font-size: var(--mt-fs-sm);
}

.menutin-app-page .mt-rowlist--orders .mt-row-aside {
	grid-area: aside;
	flex-direction: column;
	align-items: flex-end;
	gap: 4px;
	margin-left: 0;
}

.menutin-app-page .mt-rowlist--orders .mt-row-actions {
	grid-area: actions;
	margin-left: 0;
	justify-content: flex-start;
	padding-top: 8px;
	border-top: 1px solid var(--mt-color-line);
	width: 100%;
}

@media (min-width: 900px) {
	.menutin-app-page .mt-rowlist--orders {
		gap: 6px;
	}

	.menutin-app-page .mt-rowlist--orders .mt-row {
		grid-template-columns: 132px minmax(0, 1fr) 156px 176px;
		grid-template-areas: "id main aside actions";
		align-items: center;
		gap: 16px;
		padding: 12px 16px;
	}

	.menutin-app-page .mt-rowlist--orders .mt-row-actions {
		justify-content: flex-end;
		border-top: 0;
		padding-top: 0;
		width: auto;
	}

	.menutin-app-page .mt-rowlist--orders .mt-row:hover {
		background: var(--mt-color-surface-hover);
	}

	.menutin-app-page .mt-rowlist--orders .mt-row--warn:hover {
		background: #fbf3e2;
	}

	.menutin-app-page .mt-rowlist--orders .mt-row--err:hover {
		background: #fbe8e8;
	}
}

/* 25.4 Contador por pestaña. */
.menutin-app-page .mt-tab-count {
	margin-left: 7px;
	padding: 1px 7px;
	border-radius: var(--mt-radius-pill);
	background: var(--mt-color-surface-soft);
	border: 1px solid var(--mt-color-border);
	color: var(--mt-color-muted);
	font-size: .72rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.menutin-app-page .mt-tabs a[aria-current="page"] .mt-tab-count {
	background: var(--mt-color-primary-soft);
	border-color: #cfe6d8;
	color: var(--mt-color-primary-dark);
}

/* 25.5 Ficha del pedido 1.7.23: banda de identificación con importe y acciones. */
.menutin-app-page .mt-orderhead {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 12px;
	align-items: start;
	background: var(--mt-color-surface);
	border: 1px solid var(--mt-color-border);
	border-radius: var(--mt-radius-md);
	box-shadow: var(--mt-shadow-xs);
	padding: 14px 16px;
	margin: 0 0 var(--mt-space-md);
}

.menutin-app-page .mt-orderhead-badges {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
}

.menutin-app-page .mt-orderhead-badges .mt-badge {
	font-size: var(--mt-fs-sm);
	padding: 4px 10px;
}

.menutin-app-page .mt-orderhead-when {
	margin: 8px 0 0;
	font-size: var(--mt-fs-sm);
	color: var(--mt-color-muted);
	overflow-wrap: anywhere;
}

.menutin-app-page .mt-orderhead-amount {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.menutin-app-page .mt-orderhead-total {
	font-size: 26px;
	font-weight: 800;
	line-height: 1.15;
	font-variant-numeric: tabular-nums;
	letter-spacing: -.01em;
}

.menutin-app-page .mt-orderhead-lines {
	font-size: var(--mt-fs-sm);
	color: var(--mt-color-muted);
}

.menutin-app-page .mt-orderhead-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	padding-top: 12px;
	border-top: 1px solid var(--mt-color-line);
}

/* Anterior / siguiente dentro de la lista filtrada. */
.menutin-app-page .mt-orderpager {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-right: auto;
}

.menutin-app-page .mt-orderpager-pos {
	font-size: var(--mt-fs-xs);
	color: var(--mt-color-muted);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.menutin-app-page .mt-btn--off {
	opacity: .45;
	pointer-events: none;
}

@media (min-width: 900px) {
	.menutin-app-page .mt-orderhead {
		grid-template-columns: minmax(0, 1fr) auto;
	}

	.menutin-app-page .mt-orderhead-amount {
		text-align: right;
	}

	.menutin-app-page .mt-orderhead-actions {
		grid-column: 1 / -1;
		justify-content: flex-start;
	}
}

/* 25.5b Progreso con la fecha real de cada paso (antes era una tira sin datos). */
.menutin-app-page .mt-flow {
	background: var(--mt-color-surface);
	border: 1px solid var(--mt-color-border);
	border-radius: var(--mt-radius-md);
	padding: 14px 16px;
	margin: 0 0 var(--mt-space-md);
	overflow-x: auto;
	/* En móvil los siete pasos desbordan y hay que poder desplazarse: la barra
	   fina mantiene el gesto visible sin el tosco control con flechas. */
	scrollbar-width: thin;
	scrollbar-color: var(--mt-color-line) transparent;
}

.menutin-app-page .mt-flow--off {
	background: var(--mt-color-surface-soft);
	border-style: dashed;
}

/* Cuando los pasos no caben el strip se recorre con el teclado: tiene que
   verse dónde está. */
.menutin-app-page .mt-flow:focus-visible {
	outline: 2px solid var(--mt-color-primary);
	outline-offset: 2px;
}

/* scrollbar-width es reciente; el fallback cubre los navegadores viejos del
   mostrador, que aún pintan la barra clásica. */
.menutin-app-page .mt-flow::-webkit-scrollbar {
	height: 6px;
}

.menutin-app-page .mt-flow::-webkit-scrollbar-thumb {
	background: var(--mt-color-line);
	border-radius: 3px;
}

.menutin-app-page .mt-flow-cancel {
	margin: 0;
	font-size: var(--mt-fs-sm);
	font-weight: 600;
	color: var(--mt-color-danger);
	overflow-wrap: anywhere;
}

.menutin-app-page .mt-flow-list {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(88px, 1fr);
	gap: 4px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.menutin-app-page .mt-flow-step {
	display: grid;
	gap: 4px;
	justify-items: center;
	text-align: center;
	position: relative;
	padding: 0 6px;
}

.menutin-app-page .mt-flow-dot {
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: var(--mt-color-surface);
	box-shadow: 0 0 0 2px var(--mt-color-line);
}

.menutin-app-page .mt-flow-step--done .mt-flow-dot {
	background: var(--mt-color-primary);
	box-shadow: 0 0 0 2px var(--mt-color-primary);
}

.menutin-app-page .mt-flow-step--now .mt-flow-dot {
	background: var(--mt-color-surface);
	box-shadow: 0 0 0 2px var(--mt-color-primary);
}

.menutin-app-page .mt-flow-label {
	font-size: var(--mt-fs-xs);
	font-weight: 600;
	line-height: 1.3;
	color: var(--mt-color-muted);
}

.menutin-app-page .mt-flow-step--done .mt-flow-label,
.menutin-app-page .mt-flow-step--now .mt-flow-label {
	color: var(--mt-color-text);
}

.menutin-app-page .mt-flow-when {
	min-height: 14px;
	font-size: 11px;
	font-variant-numeric: tabular-nums;
	color: var(--mt-color-muted);
}

/* 25.5c En una columna el rail pasa delante: cambiar el estado es la acción
   principal de la ficha y no puede quedar bajo el listado de artículos. Se
   declara de base (no en max-width) para que ningún ancho se quede sin regla:
   con la ficha en dos columnas el rail vuelve a su sitio. */
.menutin-app-page .mt-orderrail {
	order: -1;
}

.menutin-app-page .mt-orderlayout {
	display: grid;
	gap: var(--mt-space-md);
	align-items: start;
}

/* Dos columnas desde 1200 y no desde 1024: medido en 1080, el cuerpo se
   quedaba en 425 px y la tabla de artículos rompía en tres líneas. */
@media (min-width: 1200px) {
	.menutin-app-page .mt-orderlayout {
		grid-template-columns: minmax(0, 1fr) 320px;
		gap: var(--mt-space-lg);
	}

	/* El rail sigue visible al recorrer la ficha; nunca tapa la topbar. */
	.menutin-app-page .mt-orderrail {
		order: 0;
		position: sticky;
		top: calc(var(--mt-topbar-h) + 20px);
	}
}

.menutin-app-page .mt-orderrail .mt-card + .mt-card {
	margin-top: var(--mt-space-md);
}

/* Un enlace de seguimiento largo no puede romper el rail de 320 px. */
.menutin-app-page .mt-orderrail code {
	display: block;
	font-family: var(--mt-mono);
	font-size: var(--mt-fs-xs);
	line-height: 1.5;
	overflow-wrap: anywhere;
	background: var(--mt-color-bg-soft);
	border: 1px solid var(--mt-color-line);
	border-radius: var(--mt-radius-xs);
	padding: 8px 10px;
}

.menutin-app-page .mt-card--actions {
	background: var(--mt-color-surface-soft);
}

.menutin-app-page .mt-card--actions .mt-btn--block + .mt-btn--block {
	margin-top: 8px;
}

.menutin-app-page .mt-form-inline {
	margin: 0;
}

/* Desglose de importes: cierra la cuenta de la ficha (subtotal + envío - descuento). */
.menutin-app-page .mt-totals {
	margin: 10px 0 var(--mt-space-lg);
	padding: 10px 14px;
	background: var(--mt-color-surface-soft);
	border: 1px solid var(--mt-color-line);
	border-radius: var(--mt-radius-md);
}

.menutin-app-page .mt-totals-row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	padding: 3px 0;
	font-size: var(--mt-fs-sm);
	color: var(--mt-color-muted);
}

.menutin-app-page .mt-totals-row span:last-child {
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
	color: var(--mt-color-text);
	font-weight: 600;
}

.menutin-app-page .mt-totals-row--total {
	margin-top: 6px;
	padding-top: 8px;
	border-top: 1px solid var(--mt-color-line);
	font-size: var(--mt-fs-md);
}

.menutin-app-page .mt-totals-row--total span {
	font-weight: 800;
	color: var(--mt-color-text);
}

/* 25.6 Pagos del pedido. */
.menutin-app-page .mt-paylist {
	list-style: none;
	margin: 0 0 var(--mt-space-lg);
	padding: 0;
	display: grid;
	gap: 8px;
}

.menutin-app-page .mt-pay {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 12px;
	background: var(--mt-color-surface);
	border: 1px solid var(--mt-color-border);
	border-radius: var(--mt-radius-md);
	padding: 10px 14px;
}

.menutin-app-page .mt-pay-name {
	font-weight: 700;
	font-size: var(--mt-fs-sm);
}

.menutin-app-page .mt-pay-amount {
	margin-left: auto;
	font-variant-numeric: tabular-nums;
	font-weight: 800;
	font-size: var(--mt-fs-sm);
	white-space: nowrap;
}

.menutin-app-page .mt-pay-ref {
	flex: 1 1 100%;
	font-family: var(--mt-mono);
	font-size: var(--mt-fs-xs);
	color: var(--mt-color-muted);
	overflow-wrap: anywhere;
}

.menutin-app-page .mt-pay-confirm {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	flex: 1 1 100%;
}

.menutin-app-page .mt-pay-confirm .mt-input {
	width: auto;
	flex: 1 1 160px;
}

@media (min-width: 900px) {
	.menutin-app-page .mt-pay-ref {
		flex: 1 1 auto;
	}

	.menutin-app-page .mt-pay-confirm {
		flex: 0 0 auto;
	}
}

/* 25.7 Mensajes de alerta: el texto ocupa la fila junto al icono. */
.menutin-app-page .mt-alert-msg {
	flex: 1;
	min-width: 0;
}

/* 25.8 Ficha 1.7.23: secciones del cuerpo, cliente y línea de tiempo. */
.menutin-app-page .mt-panel-title {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: var(--mt-space-lg) 0 10px;
	font-size: var(--mt-fs-md);
}

.menutin-app-page .mt-ordermain > .mt-panel-title:first-child {
	margin-top: 0;
}

.menutin-app-page .mt-panel-count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 22px;
	height: 22px;
	padding: 0 6px;
	border-radius: 11px;
	background: var(--mt-color-primary-soft);
	color: var(--mt-color-primary-dark);
	font-size: var(--mt-fs-xs);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

/* Cliente + entrega: dos bloques que en tablet y PC van lado a lado. */
.menutin-app-page .mt-party {
	display: grid;
	gap: var(--mt-space-md);
	margin: 0 0 var(--mt-space-md);
}

.menutin-app-page .mt-party-block {
	background: var(--mt-color-surface);
	border: 1px solid var(--mt-color-border);
	border-radius: var(--mt-radius-md);
	padding: 12px 14px;
}

.menutin-app-page .mt-party-block .mt-panel-title {
	margin-top: 0;
}

.menutin-app-page .mt-party-name {
	margin: 0;
	font-weight: 700;
}

.menutin-app-page .mt-party-phone,
.menutin-app-page .mt-party-kind,
.menutin-app-page .mt-party-addr {
	margin: 4px 0 0;
	font-size: var(--mt-fs-sm);
	color: var(--mt-color-muted);
	overflow-wrap: anywhere;
}

.menutin-app-page .mt-party-phone a {
	font-variant-numeric: tabular-nums;
	font-weight: 600;
	color: var(--mt-color-primary-dark);
	text-decoration: none;
}

.menutin-app-page .mt-order-note {
	margin: 0 0 var(--mt-space-md);
	padding: 10px 14px;
	background: var(--mt-color-surface-soft);
	border: 1px dashed var(--mt-color-border);
	border-radius: var(--mt-radius-md);
	font-size: var(--mt-fs-sm);
	overflow-wrap: anywhere;
}

/* Línea de tiempo del rail: estado, fecha, autor y motivo. */
.menutin-app-page .mt-timeline {
	list-style: none;
	margin: 0;
	padding: 0 0 0 4px;
}

.menutin-app-page .mt-tl {
	position: relative;
	padding: 0 0 14px 20px;
	border-left: 2px solid var(--mt-color-line);
}

.menutin-app-page .mt-tl:last-child {
	border-left-color: transparent;
	padding-bottom: 0;
}

.menutin-app-page .mt-tl-dot {
	position: absolute;
	left: -7px;
	top: 3px;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: var(--mt-color-surface);
	border: 2px solid var(--mt-color-primary);
}

.menutin-app-page .mt-tl-head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 4px 8px;
	margin: 0;
	font-weight: 700;
	font-size: var(--mt-fs-sm);
}

.menutin-app-page .mt-tl-when {
	font-weight: 500;
	font-size: var(--mt-fs-xs);
	color: var(--mt-color-muted);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.menutin-app-page .mt-tl-who {
	margin: 2px 0 0;
	font-size: var(--mt-fs-xs);
	color: var(--mt-color-muted);
}

.menutin-app-page .mt-tl-note {
	margin: 4px 0 0;
	padding: 6px 10px;
	background: var(--mt-color-surface);
	border: 1px solid var(--mt-color-line);
	border-radius: var(--mt-radius-xs);
	font-size: var(--mt-fs-xs);
	overflow-wrap: anywhere;
}

.menutin-app-page .mt-cancel {
	margin-top: 14px;
	padding-top: 14px;
	border-top: 1px solid var(--mt-color-line);
}

/* Cliente y entrega lado a cuando el CUERPO lo permite, no cuando el viewport
   lo finge: con el rail de 320 px el cuerpo puede tener 260 px reales detrás de
   una ventana de 1100 px. Se mide el contenedor, no la ventana. */
.menutin-app-page .mt-ordermain {
	container-type: inline-size;
}

@container (min-width: 560px) {
	.menutin-app-page .mt-party {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* 25.9 La ficha en dos columnas necesita más aire: en 1920px el contenido
   seguía topado a 1280px y dejaba hueco muerto a ambos lados. Solo la ficha,
   porque el resto del panel se lee mejor estrecho. */
@media (min-width: 1540px) {
	#menutin-app:has(.mt-orderlayout) .mt-main {
		max-width: 1400px;
	}
}

/* 25.10 Hojas de impresión de la ficha: comprobante y ticket de cocina. */
.menutin-app-page .mt-printsheet {
	display: none;
}

@media print {
	.menutin-app-page .mt-orderhead,
	.menutin-app-page .mt-flow,
	.menutin-app-page .mt-orderlayout {
		display: none !important;
	}

	/* Sin botón (Ctrl+P) se imprime el comprobante, que es lo que se entrega. */
	.menutin-app-page .mt-printsheet--receipt {
		display: block;
	}

	body[data-mt-print-sheet="kitchen"] .menutin-app-page .mt-printsheet--receipt {
		display: none;
	}

	body[data-mt-print-sheet="kitchen"] .menutin-app-page .mt-printsheet--kitchen {
		display: block;
	}

	.menutin-app-page .mt-print-inner {
		max-width: 78mm;
		margin: 0 auto;
		font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
		color: #000;
	}

	.menutin-app-page .mt-print-title {
		display: flex;
		align-items: baseline;
		justify-content: space-between;
		gap: 8px;
		margin: 0 0 2px;
		font-size: 15px;
		font-weight: 700;
		text-transform: uppercase;
	}

	.menutin-app-page .mt-print-title span {
		font-size: 16px;
	}

	.menutin-app-page .mt-print-sub,
	.menutin-app-page .mt-print-meta {
		margin: 0 0 4px;
		font-size: 11px;
	}

	.menutin-app-page .mt-print-id {
		display: flex;
		justify-content: space-between;
		gap: 8px;
		margin: 4px 0 6px;
		padding: 4px 0;
		border-top: 1px dashed #000;
		border-bottom: 1px dashed #000;
		font-size: 13px;
		font-weight: 700;
	}

	.menutin-app-page .mt-print-lines {
		width: 100%;
		border-collapse: collapse;
		font-size: 11px;
		margin: 6px 0;
	}

	.menutin-app-page .mt-print-lines th {
		text-align: left;
		border-bottom: 1px solid #000;
		padding: 2px 0;
	}

	.menutin-app-page .mt-print-lines td {
		padding: 3px 0;
		vertical-align: top;
	}

	.menutin-app-page .mt-print-qty {
		width: 3ch;
		font-weight: 700;
	}

	.menutin-app-page .mt-print-money {
		text-align: right;
		white-space: nowrap;
	}

	.menutin-app-page .mt-print-totals {
		margin-top: 6px;
		padding-top: 4px;
		border-top: 1px dashed #000;
		font-size: 11px;
	}

	.menutin-app-page .mt-print-line,
	.menutin-app-page .mt-print-total {
		display: flex;
		justify-content: space-between;
		gap: 8px;
		margin: 2px 0;
	}

	.menutin-app-page .mt-print-total {
		font-weight: 700;
	}

	.menutin-app-page .mt-print-pay,
	.menutin-app-page .mt-print-state,
	.menutin-app-page .mt-print-note {
		margin: 4px 0 0;
		font-size: 11px;
	}

	.menutin-app-page .mt-print-state {
		margin-top: 8px;
		padding-top: 4px;
		border-top: 1px dashed #000;
		text-transform: uppercase;
	}
}


/* ================================================================
   26. NAVEGACIÓN DEL PANEL 1.7.24 — compacta, organizada y sin scroll
   ----------------------------------------------------------------
   Medido en el banco antes de tocar nada (un administrador ve 16 destinos
   en 7 secciones):
     · cajón 390×844 → 1205 px de contenido en 780 visibles: desplazaba 425
     · sidebar 1440×900 → 1205 px en 836: desplazaba 369
     · sidebar 1366×768 → 1205 px en 704: desplazaba 501
     · carril 768×1024 → 986 px en 960: desplazaba 26
   Los cuatro tramos sacaban barra. Y con el cajón abierto el hijo
   .mt-sidebar-scroll seguía siendo `sticky` con `top: 64px`, así que las
   dos primeras filas (Panel e Inicio) quedaban tapadas por el encabezado:
   el agrupado perdía justo su cabecera.

   Tres decisiones:
     1. Densidad por tramo: 30 px con puntero de escritorio, 40 px en las
        superficies táctiles (cajón y carril). La capa 23.4 fijaba 44 px
        para todos los tramos; de ahí el desplazamiento en portátiles.
        30 px sigue siendo Diana válida (WCAG 2.5.8 pide 24×24).
     2. El cajón pasa a rejilla de dos columnas: 11 filas en vez de 16 y el
        destino que va solo ocupa la fila entera.
     3. Los grupos de un único destino pierden el título (modificador
        .mt-navgroup--solo que pone AppShell). «CLIENTES» sobre «Clientes»
        y «MI RESTAURANTE» sobre «Mi restaurante» eran ruido; el grupo
        'negocio' se llama ahora «Negocio» para no repetir el ítem.
   ================================================================ */

/* --- 26.1 Cejas de sección: texto + filete en la misma línea ------ */
.menutin-app-page .mt-navgroup-title {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 6px;
	padding: 0 4px;
	font-size: .6rem;
	line-height: 1.2;
	font-weight: 800;
	letter-spacing: .1em;
	color: #8d9891;
}

/* El tema de WordPress normaliza el contenido con
   `#menutin-app ul:not([class*="menutin-"]) { margin: 0 0 1em }` en
   system-page.css, que se carga DESPUES de app.css: con ID+clase (1,1,0) no le
   gana, hay que sumar una clase mas (1,2,0). Sin esto las listas de navegacion
   salian con 16 px de pie y los titulos con 9,6 — unos 130 px de aire que eran
   exactamente la barra de desplazamiento del cajon. */
#menutin-app .mt-nav.mt-nav {
	margin: 0;
	padding: 0;
}

#menutin-app .mt-navgroup-title.mt-navgroup-title {
	margin: 0 0 4px;
}

.menutin-app-page .mt-navgroup-title::after {
	content: "";
	flex: 1 1 auto;
	height: 1px;
	background: var(--mt-color-line);
}

/* Un destino no necesita titular su sección. */
.menutin-app-page .mt-navgroup--solo .mt-navgroup-title {
	display: none;
}

/* --- 26.2 Densidad de celda (por defecto = táctil, 40 px) --------- */
.menutin-app-page .mt-nav a {
	min-height: 40px;
	padding: 0 10px;
	gap: 9px;
	border-radius: 9px;
	font-size: .82rem;
}

.menutin-app-page .mt-nav a .mt-ico {
	width: 16px;
	height: 16px;
}

/* La marca de «estás aquí» pasa dentro de la celda: con la rejilla de dos
   columnas el filete exterior (left: -10px) se salía del contenedor. */
.menutin-app-page .mt-nav a[aria-current="page"]::before {
	left: 3px;
	top: 9px;
	bottom: 9px;
	width: 3px;
	border-radius: 3px;
}

.menutin-app-page .mt-nav-badge {
	min-width: 18px;
	padding: 0 6px;
	font-size: .66rem;
	line-height: 16px;
	text-align: center;
}

/* --- 26.3 Cajón (<768): arranca bajo el encabezado, en dos columnas */
/* Con el cajón abierto el encabezado se fija arriba y el panel arranca en su
   borde inferior. Si se queda en `sticky`, con la página sin desplazar el
   encabezado del tema empuja 46 px y tapa las dos primeras filas. */
.menutin-app-page.mt-drawer-open .mt-topbar {
	position: fixed;
	right: 0;
	bottom: auto;
	left: 0;
}

@media (max-width: 767px) {
	/* top: 64 y no 0: el encabezado (z 110) tapaba la primera sección. */
	.menutin-app-page .mt-sidebar.open {
		top: var(--mt-topbar-h);
		width: min(360px, 92vw);
		overflow: hidden;
	}

	.menutin-app-page .mt-sidebar.open .mt-sidebar-scroll {
		position: static;
		top: auto;
		max-height: none;
		height: 100%;
		gap: 5px;
		padding: 6px 10px calc(6px + env(safe-area-inset-bottom));
		overflow-y: auto;
		/* Vale como válvula de seguridad en pantallas de menos de 600 px
		   de alto; con 360×640, 390×667 y 390×844 el contenido entra sin barra. */
		scrollbar-width: thin;
		scrollbar-color: var(--mt-color-line) transparent;
	}

	.menutin-app-page .mt-sidebar.open .mt-nav {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 4px;
	}

	.menutin-app-page .mt-sidebar.open .mt-navgroup--solo .mt-nav {
		grid-template-columns: minmax(0, 1fr);
	}

	/* Un grupo impar (Menú/Mesas/QR, Mi restaurante/Sedes/Diseño) dejaba el hueco
	   vacío a la derecha y la columna se leía rota. El hijo de la rejilla es el
	   LI, no el enlace: hay que ensanchar el LI para que la fila quede llena. */
	.menutin-app-page .mt-sidebar.open .mt-nav li:last-child:nth-child(odd) {
		grid-column: 1 / -1;
	}

	.menutin-app-page .mt-sidebar.open .mt-nav a {
		min-height: 40px;
	}
}

/* --- 26.4 Carril de iconos (768–1023) ---------------------------- */
/* Presupuesto: la ventana peor caso del tramo es ~1000×760, donde el
   desplazador queda en 696 px. Con celda 48 y separador 24 de la capa 23.14 el
   contenido medía 942; con 40/18 seguía en 809 y salía barra. Celda de 36 px,
   separador de 10 y hueco interno de 2 dejan el carril en ~670: entran los 16
   destinos también en ventana corta de escritorio. En tablet vertical
   (768×1024) sobran 290 px. */
@media (min-width: 768px) and (max-width: 1023px) {
	.menutin-app-page .mt-navgroup-title {
		display: none;
	}

	.menutin-app-page .mt-sidebar-scroll {
		padding: 8px 8px calc(8px + env(safe-area-inset-bottom));
	}

	.menutin-app-page .mt-navgroup + .mt-navgroup {
		margin-top: 5px;
		padding-top: 5px;
	}

	.menutin-app-page .mt-nav {
		gap: 2px;
	}

	.menutin-app-page .mt-nav a {
		width: 40px;
		height: 36px;
		min-height: 36px;
	}

	.menutin-app-page .mt-nav a .mt-ico {
		width: 20px;
		height: 20px;
	}

	.menutin-app-page .mt-nav a[aria-current="page"]::before {
		top: 8px;
		bottom: 8px;
	}

	/* Si el cajón sigue abierto al rotar a tablet, recupera su forma ancha. */
	.menutin-app-page .mt-sidebar.open .mt-navgroup-title {
		display: flex;
	}

	.menutin-app-page .mt-sidebar.open .mt-nav {
		grid-template-columns: minmax(0, 1fr);
	}

	.menutin-app-page .mt-sidebar.open .mt-nav a {
		width: auto;
		height: auto;
		min-height: 40px;
	}
}

/* --- 26.5 Sidebar de escritorio (≥1024): densa y sin scroll ------- */
/* El presupuesto de altura no es el monitor grande sino el portátil de
   1280×720: alli el desplazador mide 656 px disponibles y el contenido pesado
   medía 672 — 16 px de barra. Con celda de 30 px, hueco de grupo de 6 y
   padding 10/12 el contenido queda en 618: entran los 16 destinos sin
   desplazamiento también en 1366×768 (704 disponibles). */
@media (min-width: 1024px) {
	.menutin-app-page .mt-sidebar-scroll {
		gap: 6px;
		padding: 10px 10px 12px;
		scrollbar-width: thin;
		scrollbar-color: var(--mt-color-line) transparent;
	}

	.menutin-app-page .mt-nav {
		gap: 2px;
	}

	.menutin-app-page .mt-nav a {
		min-height: 30px;
		padding: 0 10px;
		gap: 10px;
		font-size: .815rem;
	}

	.menutin-app-page .mt-nav a[aria-current="page"]::before {
		top: 7px;
		bottom: 7px;
	}
}

/* ================================================================
   27. MÓDULO PEDIDOS 1.7.25 — cabecera con contexto, KPIs con delta,
   tabla profesional de 9 columnas con barra de estado, menú ⋮, chips
   de filtros y paginación numerada.
   ----------------------------------------------------------------
   Todo queda acotado a .menutin-app-page y, en la tabla, a
   .mt-table--rich: el resto de módulos sigue con Ui::rowlist y con las
   reglas de tabla de 1.6/1.7.12. Las reglas nuevas suben a (0,3,0) para
   poder ganarle al normalizador de system-page.css, que llega después.
   ================================================================ */

/* --- 27.0 Utilidad: texto solo para lector de pantalla ------------ */
/* El caption de la tabla y el «quitar este filtro» de las chips necesitan
   existir en el DOM sin ocupar píxeles; con display:none dejarían de leerse. */
.menutin-app-page .mt-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* --- 27.1 Cabecera del módulo: título a la izquierda, contexto a la derecha -- */
.menutin-app-page .mt-modhead {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 360px);
	gap: 10px 20px;
	align-items: start;
	margin: 0 0 var(--mt-space-md);
}

/* El apphead ya trae su caja; dentro de la cabecera mixta se le quita el
   margen propio para que las dos columnas arranquen en la misma línea. */
.menutin-app-page .mt-modhead .mt-apphead {
	margin: 0;
}

.menutin-app-page .mt-modhead-side {
	display: flex;
	flex-direction: column;
	gap: var(--mt-space-sm);
	align-items: stretch;
}

.menutin-app-page .mt-modhead-side .mt-ctxcard {
	margin: 0;
}

@media (max-width: 1099px) {
	.menutin-app-page .mt-modhead {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* --- 27.2 Tarjeta de contexto (la del panel) ---------------------- */
.menutin-app-page .mt-ctxcard-fields {
	display: flex;
	flex: 1 1 100%;
	flex-wrap: wrap;
	gap: var(--mt-space-sm);
}

.menutin-app-page .mt-ctxcard-label {
	flex: 1 1 100%;
	margin: 0;
	font-size: var(--mt-fs-xs);
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--mt-color-muted);
}

.menutin-app-page .mt-ctxcard-ro-value {
	flex: 1 1 100%;
	margin: 0;
	font-size: var(--mt-fs-md);
	font-weight: 700;
	color: var(--mt-color-ink);
}

/* Un solo restaurante y una sola sede: no hay nada que elegir, así que la
   tarjeta se muestra como dato, no como formulario. */
.menutin-app-page .mt-ctxcard--ro {
	align-items: center;
}

.menutin-app-page .mt-ctxcard--ro .mt-ctxcard-foot {
	flex: 1 1 100%;
}

.menutin-app-page .mt-ctxcard-foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--mt-space-sm);
	flex: 1 1 100%;
}

.menutin-app-page .mt-ctxcard-hint {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	min-width: 0;
	margin: 0;
	font-size: var(--mt-fs-xs);
	color: var(--mt-color-muted);
}

.menutin-app-page .mt-ctxcard-hint .mt-ico {
	width: 14px;
	height: 14px;
	flex: none;
}

/* --- 27.3 KPIs: alerta de pendientes y comparación con ayer ------- */
/* El warn no es un color más: avisa de que hay pedidos sin aceptar. */
.menutin-app-page .mt-stat--warn {
	border-color: #f2d3a5;
	background: linear-gradient(180deg, #fffaf2, var(--mt-color-surface));
}

.menutin-app-page .mt-stat-delta {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	margin: 4px 0 0;
	font-size: var(--mt-fs-xs);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	color: var(--mt-color-muted);
}

.menutin-app-page .mt-stat-delta--up {
	color: var(--mt-color-ok);
}

.menutin-app-page .mt-stat-delta--down {
	color: var(--mt-color-err);
}

.menutin-app-page .mt-stat-delta--flat {
	font-weight: 600;
}

/* --- 27.4 Tabla rica: densidad, cabecera fija y barra de estado --- */
.menutin-app-page .mt-table--rich {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	font-size: var(--mt-fs-sm);
}

.menutin-app-page .mt-table--rich thead th.mt-col {
	position: sticky;
	top: 0;
	z-index: 3;
	padding: 9px 12px;
	background: var(--mt-color-surface-soft);
	border-bottom: 1px solid var(--mt-color-border);
	font-size: var(--mt-fs-xs);
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--mt-color-muted);
	text-align: left;
	white-space: nowrap;
}

.menutin-app-page .mt-table--rich td.mt-cell {
	padding: 11px 12px;
	border-bottom: 1px solid var(--mt-color-line);
	vertical-align: middle;
	background: var(--mt-color-surface);
}

.menutin-app-page .mt-table--rich .mt-cell--right,
.menutin-app-page .mt-table--rich .mt-col--right {
	text-align: right;
}

.menutin-app-page .mt-table--rich .mt-cell--center,
.menutin-app-page .mt-table--rich .mt-col--center {
	text-align: center;
}

/* Anchos fijos en las columnas cortas: así «Cliente» se lleva el espacio que
   queda y el listado no baila entre páginas. */
.menutin-app-page .mt-table--rich .mt-col--code { width: 122px; }
.menutin-app-page .mt-table--rich .mt-col--when { width: 116px; }
.menutin-app-page .mt-table--rich .mt-col--delivery { width: 148px; }
.menutin-app-page .mt-table--rich .mt-col--payment { width: 156px; }
.menutin-app-page .mt-table--rich .mt-col--items { width: 124px; }
.menutin-app-page .mt-table--rich .mt-col--total { width: 108px; }
.menutin-app-page .mt-table--rich .mt-col--status { width: 168px; }
.menutin-app-page .mt-table--rich .mt-col--act { width: 214px; }

/* Barra de color por estado: la variable la pone el selector de estado y la
   consume el borde izquierdo de la primera celda. El estado además se LEE (el
   badge lleva texto + icono), el color solo refuerza. */
.menutin-app-page .mt-table--rich .mt-trow {
	--mt-bar: var(--mt-color-line);
}

.menutin-app-page .mt-table--rich .mt-trow[data-mt-status="new"] { --mt-bar: #f59e0b; }
.menutin-app-page .mt-table--rich .mt-trow[data-mt-status="confirmed"] { --mt-bar: #2563eb; }
.menutin-app-page .mt-table--rich .mt-trow[data-mt-status="in_kitchen"] { --mt-bar: #7c3aed; }
.menutin-app-page .mt-table--rich .mt-trow[data-mt-status="preparing"] { --mt-bar: #0891b2; }
.menutin-app-page .mt-table--rich .mt-trow[data-mt-status="ready"] { --mt-bar: #2a7d4f; }
.menutin-app-page .mt-table--rich .mt-trow[data-mt-status="ready_pickup"] { --mt-bar: #2a7d4f; }
.menutin-app-page .mt-table--rich .mt-trow[data-mt-status="on_the_way"] { --mt-bar: #0e7490; }
.menutin-app-page .mt-table--rich .mt-trow[data-mt-status="delivered"] { --mt-bar: #4b5563; }
.menutin-app-page .mt-table--rich .mt-trow[data-mt-status="cancelled"] { --mt-bar: #c1121f; }

.menutin-app-page .mt-table--rich .mt-cell--code {
	border-left: 3px solid var(--mt-bar);
}

.menutin-app-page .mt-table--rich .mt-trow:hover .mt-cell {
	background: var(--mt-color-surface-hover);
}

/* Fila recién entrada por tiempo real: resaltado que se apaga solo. */
@keyframes mt-row-in {
	from { background: #fff7e0; }
	to { background: var(--mt-color-surface); }
}

.menutin-app-page .mt-table--rich .mt-trow.mt-trow--new .mt-cell {
	animation: mt-row-in 2.4s ease-out 1;
}

/* --- 27.5 Celdas -------------------------------------------------- */
.menutin-app-page .mt-cell-code {
	display: block;
	font-family: var(--mt-mono);
	font-size: var(--mt-fs-sm);
	font-weight: 700;
	color: var(--mt-color-ink);
	white-space: nowrap;
}

.menutin-app-page .mt-cell-main {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-width: 0;
	overflow-wrap: anywhere;
	font-weight: 600;
	color: var(--mt-color-text);
}

.menutin-app-page .mt-cell-main .mt-ico {
	width: 15px;
	height: 15px;
	flex: none;
	color: var(--mt-color-muted);
}

.menutin-app-page .mt-cell-sub {
	display: block;
	margin-top: 2px;
	overflow-wrap: anywhere;
	font-size: var(--mt-fs-xs);
	color: var(--mt-color-muted);
}

.menutin-app-page .mt-cell-note {
	display: block;
	margin-top: 3px;
	/* 18ch y no 32ch: la nota del cliente era el contenido que estiraba la
	   columna «Cliente» hasta 230 px y empujaba «Acciones» fuera de la caja. */
	max-width: 18ch;
	font-size: var(--mt-fs-xs);
	color: var(--mt-color-warn);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.menutin-app-page .mt-cell-total {
	font-variant-numeric: tabular-nums;
	font-weight: 700;
	color: var(--mt-color-ink);
}

.menutin-app-page .mt-cell-na {
	font-size: var(--mt-fs-xs);
	color: var(--mt-color-muted);
}

.menutin-app-page .mt-cell-when {
	font-variant-numeric: tabular-nums;
	color: var(--mt-color-muted);
}

.menutin-app-page .mt-cell-when--warn {
	font-weight: 700;
	color: var(--mt-color-warn);
}

.menutin-app-page .mt-cell-when--late {
	font-weight: 700;
	color: var(--mt-color-err);
}

/* Pastilla con icono: estado legible sin depender del color. */
.menutin-app-page .mt-badge--ico {
	display: inline-flex;
	align-items: center;
	gap: 5px;
}

.menutin-app-page .mt-badge--ico .mt-ico {
	width: 13px;
	height: 13px;
	flex: none;
}

/* --- 27.6 Acciones de fila ---------------------------------------- */
.menutin-app-page .mt-rowacts {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-end;
	gap: 6px;
}

.menutin-app-page .mt-rowacts .mt-row-form {
	display: inline-flex;
	margin: 0;
}

.menutin-app-page .mt-rowmenu {
	position: relative;
	display: inline-flex;
}

.menutin-app-page .mt-rowmenu > summary {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border: 1px solid var(--mt-color-border);
	border-radius: var(--mt-radius-sm);
	background: var(--mt-color-surface);
	color: var(--mt-color-muted);
	font-size: 1rem;
	line-height: 1;
	cursor: pointer;
	list-style: none;
}

.menutin-app-page .mt-rowmenu > summary::-webkit-details-marker {
	display: none;
}

.menutin-app-page .mt-rowmenu > summary:hover {
	background: var(--mt-color-surface-hover);
	color: var(--mt-color-ink);
}

.menutin-app-page .mt-rowmenu > summary:focus-visible {
	outline: 2px solid var(--mt-color-primary);
	outline-offset: 2px;
}

.menutin-app-page .mt-rowmenu-body {
	position: absolute;
	right: 0;
	top: calc(100% + 5px);
	z-index: 70;
	display: flex;
	flex-direction: column;
	gap: 6px;
	width: 260px;
	max-width: 78vw;
	padding: 8px;
	border: 1px solid var(--mt-color-border);
	border-radius: var(--mt-radius-md);
	background: var(--mt-color-surface);
	box-shadow: var(--mt-shadow-md);
	text-align: left;
}

/* La última fila está pegada al borde inferior del contenedor con scroll
   horizontal: el menú sale hacia arriba para no cortarse. */
.menutin-app-page .mt-trow:last-child .mt-rowmenu-body {
	top: auto;
	bottom: calc(100% + 5px);
}

.menutin-app-page .mt-rowmenu-item .mt-btn,
.menutin-app-page .mt-rowmenu-link {
	justify-content: flex-start;
}

.menutin-app-page .mt-rowmenu-link {
	display: flex;
	align-items: center;
	min-height: 34px;
	padding: 0 10px;
	border: 1px solid var(--mt-color-border);
	border-radius: var(--mt-radius-sm);
	font-size: var(--mt-fs-sm);
	font-weight: 600;
	color: var(--mt-color-text);
	text-decoration: none;
}

.menutin-app-page .mt-rowmenu-link:hover {
	background: var(--mt-color-surface-hover);
}

/* Cancelar es la única acción destructiva de la fila y lleva el motivo
   obligatorio visible dentro del mismo menú: el required del input ES la
   confirmación, sin ventana emergente. */
.menutin-app-page .mt-rowmenu-cancel {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin: 0;
	padding: 8px;
	border: 1px solid #f3d3d3;
	border-radius: var(--mt-radius-sm);
	background: #fff7f7;
}

.menutin-app-page .mt-rowmenu-cancel .mt-field {
	margin: 0;
}

.menutin-app-page .mt-rowmenu-cancel .mt-field-label {
	display: block;
	margin-bottom: 4px;
	font-size: var(--mt-fs-xs);
	font-weight: 700;
	color: var(--mt-color-err);
}

.menutin-app-page .mt-rowmenu-cancel .mt-input {
	min-height: 34px;
	padding: 6px 8px;
	font-size: var(--mt-fs-sm);
}

/* Con el contenedor en scroll horizontal el menú saldría recortado, así que
   desde 1024 se deja desbordar. La tabla no puede ser más ancha que su caja:
   las dos bandas de abajo (tarjetas <1024 y siete columnas 1024–1299) y el
   `overflow-wrap` de las celdas de texto lo garantizan. Si aun así desbordara,
   con `visible` el contenido sobrante se recorta y «Acciones» queda fuera de
   alcance, que es justo lo que estas bandas evitan. */
@media (min-width: 1024px) {
	.menutin-app-page .mt-tablewrap:has(.mt-table--rich) {
		overflow: visible;
	}
}

/* Banda media (1024–1299): con las medidas de 29.2 la caja aquí es más estrecha
   de lo que se creía, así que esta regla y la primera banda de 29.2 trabajan
   juntas: salen «Recibido», «Artículos», «Entrega» y «Pago» y quedan cinco
   columnas. Lo retirado sigue estando en la ficha del cajón; por debajo de
   1024 mandan las tarjetas, que conservan todas las etiquetas. */
@media (min-width: 1024px) and (max-width: 1299px) {
	.menutin-app-page .mt-table--rich .mt-col--when,
	.menutin-app-page .mt-table--rich .mt-col--items,
	.menutin-app-page .mt-table--rich .mt-cell--when,
	.menutin-app-page .mt-table--rich .mt-cell--items {
		display: none;
	}
}

/* --- 27.7 Chips de filtros activos ------------------------------- */
.menutin-app-page .mt-chips {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	margin: -6px 0 var(--mt-space-md);
}

.menutin-app-page .mt-chips-label {
	font-size: var(--mt-fs-xs);
	font-weight: 700;
	letter-spacing: .03em;
	text-transform: uppercase;
	color: var(--mt-color-muted);
}

.menutin-app-page .mt-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 28px;
	padding: 0 9px;
	border: 1px solid #cfe0d6;
	border-radius: var(--mt-radius-pill);
	background: var(--mt-color-primary-soft);
	font-size: var(--mt-fs-xs);
	font-weight: 600;
	color: var(--mt-color-primary-dark);
	text-decoration: none;
}

.menutin-app-page .mt-chip:hover {
	background: #e2f0e8;
}

.menutin-app-page .mt-chip-x {
	font-size: .95rem;
	line-height: 1;
	opacity: .7;
}

.menutin-app-page .mt-chip--clear {
	border-color: var(--mt-color-border);
	background: var(--mt-color-surface);
	color: var(--mt-color-muted);
}

.menutin-app-page .mt-chip--clear:hover {
	background: var(--mt-color-surface-hover);
	color: var(--mt-color-ink);
}

/* --- 27.8 Paginación numerada ------------------------------------ */
.menutin-app-page .mt-pagebtn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 34px;
	min-height: 34px;
	padding: 0 8px;
	border: 1px solid var(--mt-color-border);
	border-radius: var(--mt-radius-sm);
	background: var(--mt-color-surface);
	font-size: var(--mt-fs-sm);
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	color: var(--mt-color-text);
	text-decoration: none;
}

.menutin-app-page .mt-pagebtn:hover {
	background: var(--mt-color-surface-hover);
}

.menutin-app-page .mt-pagebtn--now {
	border-color: var(--mt-color-primary);
	background: var(--mt-color-primary);
	color: #fff;
}

.menutin-app-page .mt-pagegap {
	padding: 0 2px;
	color: var(--mt-color-muted);
}

/* --- 27.9 Pestañas con icono y recuento -------------------------- */
.menutin-app-page .mt-tabs a .mt-ico {
	width: 15px;
	height: 15px;
	margin-right: 6px;
	flex: none;
}

.menutin-app-page .mt-tab-count {
	margin-left: 6px;
	padding: 1px 7px;
	border-radius: var(--mt-radius-pill);
	background: rgba(29, 35, 39, .07);
	font-size: var(--mt-fs-xs);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	color: var(--mt-color-muted);
}

.menutin-app-page .mt-tabs a[aria-current="page"] .mt-tab-count {
	background: var(--mt-color-primary-soft);
	color: var(--mt-color-primary-dark);
}

/* --- 27.10 Filas → tarjetas (≤1023) ------------------------------ */
/* El corte pasa de 899 a 1023: entre 900 y 1023 la caja del panel mide
   759–807 px y las nueve columnas pedían 1095, así que «Estado» y «Acciones»
   se salían del área visible y no se podía llegar a ellas. Cada celda conserva
   su etiqueta, así que no se pierde ningún dato (código, hora, cliente,
   entrega, pago, artículos, total, estado, acciones). */
@media (max-width: 1023px) {
	.menutin-app-page .mt-table--rich .mt-col {
		display: none;
	}

	.menutin-app-page .mt-table--rich,
	.menutin-app-page .mt-table--rich tbody {
		display: block;
		width: 100%;
	}

	.menutin-app-page .mt-table--rich .mt-trow {
		display: block;
		margin-bottom: 10px;
		padding: 4px 12px 8px;
		border: 1px solid var(--mt-color-border);
		border-left: 3px solid var(--mt-bar);
		border-radius: var(--mt-radius-md);
		background: var(--mt-color-surface);
	}

	.menutin-app-page .mt-table--rich .mt-cell {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 14px;
		padding: 5px 0;
		border-bottom: 0;
		background: transparent;
		text-align: left;
	}

	.menutin-app-page .mt-table--rich .mt-cell::before {
		content: attr(data-label);
		flex: none;
		font-size: var(--mt-fs-xs);
		font-weight: 700;
		letter-spacing: .03em;
		text-transform: uppercase;
		color: var(--mt-color-muted);
	}

	/* Cabecera de la tarjeta: código + estado a la vista, sin etiqueta. */
	.menutin-app-page .mt-table--rich .mt-cell--code {
		border-left: 0;
		padding-top: 8px;
	}

	.menutin-app-page .mt-table--rich .mt-cell--code::before {
		content: none;
	}

	.menutin-app-page .mt-table--rich .mt-cell--code .mt-cell-code {
		font-size: var(--mt-fs-md);
	}

	.menutin-app-page .mt-table--rich .mt-cell--status {
		padding-bottom: 6px;
	}

	.menutin-app-page .mt-table--rich .mt-cell--status::before {
		content: none;
	}

	.menutin-app-page .mt-table--rich .mt-cell--actions {
		padding-top: 8px;
		padding-bottom: 8px;
		margin: 0 -12px;
		border-top: 1px solid var(--mt-color-line);
	}

	.menutin-app-page .mt-table--rich .mt-cell--actions::before {
		content: none;
	}

	/* Dentro de la tarjeta el menú ya no flota: se despliega en el propio flujo
	   y no depende del scroll del contenedor. */
	.menutin-app-page .mt-rowmenu {
		position: static;
		flex: 1 1 100%;
		order: 3;
	}

	.menutin-app-page .mt-rowmenu > summary {
		width: 34px;
	}

	.menutin-app-page .mt-rowmenu-body {
		position: static;
		width: 100%;
		max-width: none;
		margin-top: 6px;
		border: 0;
		box-shadow: none;
		background: var(--mt-color-bg-soft);
	}

	.menutin-app-page .mt-trow:last-child .mt-rowmenu-body {
		top: auto;
		bottom: auto;
	}
}

/* --- 27.11 Estados de espera del listado -------------------------- */
/* El tiempo real deja de consultar con la pestaña oculta; si vuelve y falló,
   la fila entera no se pierde: se avisa arriba y se ofrece reintentar. */
.menutin-app-page .mt-livebar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: 0 0 var(--mt-space-sm);
	padding: 7px 11px;
	border: 1px solid var(--mt-color-border);
	border-radius: var(--mt-radius-sm);
	background: var(--mt-color-bg-soft);
	font-size: var(--mt-fs-xs);
	color: var(--mt-color-muted);
}

.menutin-app-page .mt-livebar--err {
	border-color: #f3d3d3;
	background: #fff7f7;
	color: var(--mt-color-err);
}

.menutin-app-page .mt-livebar-dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--mt-color-ok);
	flex: none;
}

.menutin-app-page .mt-livebar--off .mt-livebar-dot {
	background: var(--mt-color-muted);
}

/* Esqueleto de fila mientras llega la primera respuesta del sondeo. */
@keyframes mt-skel {
	0% { opacity: .55; }
	50% { opacity: 1; }
	100% { opacity: .55; }
}

.menutin-app-page .mt-skel {
	display: block;
	height: 12px;
	border-radius: var(--mt-radius-xs);
	background: var(--mt-color-line);
	animation: mt-skel 1.2s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
	.menutin-app-page .mt-skel,
	.menutin-app-page .mt-table--rich .mt-trow.mt-trow--new .mt-cell {
		animation: none;
	}
}

/* --- 27.12 Cajón lateral del pedido ------------------------------- */
/* Es el modal de siempre (app.js lo abre, lo cierra con Escape y devuelve el
   foco), pero anclado a la derecha y a pantalla completa: la ficha se ve sin
   abandonar el listado. */
.menutin-app-page .mt-modal--drawer {
	align-items: stretch;
	justify-content: flex-end;
	padding: 0;
}

.menutin-app-page .mt-modal--drawer .mt-modal-box {
	display: flex;
	flex-direction: column;
	width: min(880px, 96vw);
	/* La tarjeta centrada se topa a 560 px desde 1024 px de ancho; el cajón se
	   limita solo con el min() de arriba, así que aquí ese tope estorba. */
	max-width: none;
	height: 100%;
	max-height: 100vh;
	overflow: hidden;
	border-radius: 0;
}

.menutin-app-page .mt-modal--drawer .mt-modal-body {
	flex: 1 1 auto;
	overflow-y: auto;
	padding: 16px 20px 28px;
	-webkit-overflow-scrolling: touch;
}

/* Dentro del cajón no cabe el par de columnas de la ficha: el rail (acciones,
   actividad, seguimiento) pasa debajo en una sola columna. */
.menutin-app-page .mt-modal--drawer .mt-orderlayout {
	display: block;
}

.menutin-app-page .mt-modal--drawer .mt-orderrail {
	margin-top: var(--mt-space-md);
	position: static;
}

@media (max-width: 719px) {
	/* En móvil el cajón ocupa todo el ancho. 100% y no 100vw: el viewport
	   incluye la barra de scroll y el item flex se encogía contra el contenedor
	   de todos modos, dejando 15 px de hueco a la derecha. */
	.menutin-app-page .mt-modal--drawer .mt-modal-box {
		width: 100%;
	}
}

.menutin-app-page .mt-panelnote {
	margin: 0 0 var(--mt-space-sm);
}

.menutin-app-page .mt-skelgroup {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 6px 0 16px;
}

/* --- 27.13 Barra «en vivo» del listado ---------------------------- */
.menutin-app-page .mt-livebar--on .mt-livebar-dot {
	background: var(--mt-color-ok);
}

.menutin-app-page .mt-livebar--err .mt-livebar-dot {
	background: var(--mt-color-err);
}

.menutin-app-page .mt-livebar-txt {
	flex: 1 1 auto;
	min-width: 120px;
}

.menutin-app-page .mt-livebar-btn {
	min-height: 26px;
	padding: 2px 9px;
	border: 1px solid var(--mt-color-border);
	border-radius: var(--mt-radius-pill);
	background: var(--mt-color-surface);
	color: var(--mt-color-text);
	font-size: var(--mt-fs-xs);
	font-weight: 600;
	cursor: pointer;
}

.menutin-app-page .mt-livebar-btn:hover {
	background: var(--mt-color-surface-hover);
}

.menutin-app-page .mt-livebar-btn[aria-pressed="true"] {
	border-color: var(--mt-color-primary);
	color: var(--mt-color-primary);
}

/* ================================================================
   28. CABECERA Y KPIs DE PEDIDOS 1.7.26 — menos franja superior,
   tarjetas más bajas y pestañas que no parten palabras.
   ----------------------------------------------------------------
   Medidas en el banco con los 29 pedidos del tenant demo antes de
   tocar nada: la franja de cabecera medía 234 px en 1792 y 304 px en
   1024 (una fila suelta de 38 px era el botón «Exportar CSV») y cada
   KPI 229 px. `scrollWidth - clientWidth` daba 0 en los cuatro anchos,
   así que no había desbordes: sobraba aire.

   Los `<p>` y `<h3>` del módulo llevan prefijo `#menutin-app` porque
   system-page.css, que se carga después, los normaliza con ID+clase
   (1,1,1) a `margin: 0 0 1em`: sin ese prefijo los 51,5 px de pies de
   los cuatro renglones del KPI y los 16 px del pie de la tarjeta
   seguían ahí. Mismo recurso que el de 26.
   ================================================================ */

/* --- 28.1 Cabecera: dos bloques centrados, sin fila suelta -------- */
/* «Exportar CSV» pasa al pie de la tarjeta de contexto (Ui::context_card
   con `foot`), así que la columna derecha es un solo bloque. */
.menutin-app-page .mt-modhead {
	grid-template-columns: minmax(0, 1fr) minmax(0, 324px);
	gap: 6px 16px;
	align-items: center;
	margin-bottom: 12px;
}

/* El 900-1099px de 27.1 tiraba la tarjeta debajo del título porque medía
   188 px; compactada cabe en dos columnas y la franja no se duplica. */
@media (min-width: 900px) and (max-width: 1099px) {
	.menutin-app-page .mt-modhead {
		grid-template-columns: minmax(0, 1fr) minmax(0, 288px);
	}
}

/* Y por debajo de 600 vuelve una columna: la media query de 27.1 ya no vale,
   que esta capa llega después con la misma especificidad y le gana sin
   preguntar el ancho. Con 324 px de tarjeta el título se quedaba en 18 px. */
@media (max-width: 599px) {
	.menutin-app-page .mt-modhead {
		grid-template-columns: minmax(0, 1fr);
	}

	/* Y el pie de la tarjeta recupera el botón alto: 30 px vale con puntero,
	   no con el dedo (la densidad táctil del panel es 40 px). */
	#menutin-app .mt-ctxcard .mt-btn--sm {
		min-height: 38px;
		padding: 8px 14px;
	}
}

/* --- 28.2 Tarjeta de contexto: los dos campos, en una línea ------- */
.menutin-app-page .mt-ctxcard {
	padding: 9px 12px;
	gap: 7px;
	border-radius: 12px;
	align-items: center;
}

/* 27.2 apilaba etiqueta+selector en dos filas (188 px de tarjeta). Con
   auto-fit un solo campo sigue ocupando la línea entera. */
.menutin-app-page .mt-ctxcard-fields {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 116px, 1fr ) );
	gap: 7px 8px;
}

.menutin-app-page .mt-ctxcard-fields .mt-field > label {
	margin-bottom: 3px;
	font-size: var(--mt-fs-xs);
}

.menutin-app-page .mt-ctxcard-fields .mt-select {
	min-height: 32px;
	padding: 4px 26px 4px 9px;
	font-size: var(--mt-fs-sm);
}

/* Sin ID no se gana el pie: el botón de 38 px era el renglón entero. */
#menutin-app .mt-ctxcard .mt-btn--sm {
	min-height: 30px;
	padding: 4px 11px;
	font-size: var(--mt-fs-xs);
}

.menutin-app-page .mt-ctxcard-actions {
	display: flex;
	align-items: center;
	gap: 6px;
	flex: none;
}

#menutin-app .mt-ctxcard .mt-ctxcard-foot {
	margin: 0;
}

/* El «Viendo: …» es largo de verdad (el nombre del restaurante manda), así
   que en tarjetas por debajo de ~470 px pide dos renglones: se permiten,
   pero no se le añade margen de pie. */
.menutin-app-page .mt-ctxcard-hint {
	flex: 1 1 auto;
	min-width: 0;
	line-height: 1.35;
}

/* Lectura (un solo restaurante y una sola sede): etiqueta y valor en la
   misma línea para que la tarjeta baje de dos filas de bloques a dos renglones. */
.menutin-app-page .mt-ctxcard--ro .mt-ctxcard-fields .mt-field {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 2px 6px;
	min-width: 0;
}

.menutin-app-page .mt-ctxcard--ro .mt-ctxcard-label {
	flex: 0 1 auto;
}

.menutin-app-page .mt-ctxcard--ro .mt-ctxcard-ro-value {
	flex: 0 1 auto;
	font-size: var(--mt-fs-sm);
	overflow-wrap: anywhere;
}

/* --- 28.3 KPIs: cuatro renglones en vez de seis ------------------- */
/* El icono comparte línea con la etiqueta y el bloque entero baja de
   229 px a ~110 px, que es lo que pedía la captura. */
.menutin-app-page .mt-stats--orders {
	margin-bottom: 12px;
}

.menutin-app-page .mt-stats--orders .mt-stat {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	column-gap: 9px;
	row-gap: 1px;
	align-content: center;
	padding: 10px 13px;
	border-radius: 12px;
}

.menutin-app-page .mt-stats--orders .mt-stat-icon {
	width: 26px;
	height: 26px;
	margin: 0;
	border-radius: 8px;
	grid-column: 1;
	grid-row: 1;
}

.menutin-app-page .mt-stats--orders .mt-stat-icon .mt-ico {
	width: 15px;
	height: 15px;
}

#menutin-app .mt-stats--orders .mt-stat h3 {
	grid-column: 2;
	grid-row: 1;
	align-self: center;
	margin: 0;
	line-height: 1.25;
}

#menutin-app .mt-stats--orders .mt-stat-value {
	grid-column: 1 / -1;
	grid-row: 2;
	margin: 2px 0 0;
	font-size: 1.22rem;
}

#menutin-app .mt-stats--orders .mt-stat-delta {
	grid-column: 1 / -1;
	grid-row: 3;
	margin: 0;
}

/* Sin delta la fila 3 queda vacía y no suma alto; la pista siempre cierra. */
#menutin-app .mt-stats--orders .mt-stat .mt-hint {
	grid-column: 1 / -1;
	grid-row: 4;
	margin: 0;
	line-height: 1.35;
}

/* El corte de 25.1 pasaba a dos columnas en 1023, pero con la tarjeta baja
   cuatro caben desde 880 px de viewport (776 de contenido = 188 por tarjeta):
   una fila de 130 gana a dos filas de 113 = 234. */
@media (min-width: 880px) {
	#menutin-app .mt-stats.mt-stats--orders {
		grid-template-columns: repeat( 4, minmax( 0, 1fr ) );
	}
}

/* --- 28.4 Pestañas: etiqueta entera en una línea ------------------ */
/* Faltaba `white-space`: la tira reparte el ancho y la palabra se cortaba
   donde cabía («Todo s», «Nuevo s», «Listo s»). Con nowrap la tira
   disponible es la que ya tenía (overflow-x: auto en base y 23.9). */
.menutin-app-page .mt-tabs a {
	white-space: nowrap;
	min-height: 36px;
	padding: 0 12px;
	font-size: .84rem;
}

.menutin-app-page .mt-tabs {
	gap: 2px;
	padding: 3px;
	margin-bottom: 12px;
	border-radius: 11px;
}

.menutin-app-page .mt-tabs a .mt-tab-count {
	margin-left: 5px;
	padding: 0 6px;
}

.menutin-app-page .mt-tabs a .mt-ico {
	width: 14px;
	height: 14px;
	margin-right: 5px;
}

/* Con la etiqueta entera las seis pestañas piden 792 px y el panel da
   726-774 en ese tramo: en vez de dejar «Cancelados» fuera de la vista se
   aprieta la pastilla. Solo en Pedidos, que es la tira de seis destinos; la
   regla sube a (1,2,1) para ganarle a 23.9 sin depender de la media query. */
@media (min-width: 900px) and (max-width: 1129px) {
	.menutin-app-page #mt-orders-tabs .mt-tabs a {
		padding: 0 9px;
		font-size: .8rem;
	}

	.menutin-app-page #mt-orders-tabs .mt-tabs a .mt-ico {
		width: 13px;
		height: 13px;
		margin-right: 4px;
	}

	.menutin-app-page #mt-orders-tabs .mt-tabs a .mt-tab-count {
		margin-left: 4px;
		padding: 0 5px;
	}
}

/* ================================================================
   29. LISTA DE PEDIDOS 1.7.27 — cada pedido es una banda separada y
   ningún dato se parte a media palabra.
   ----------------------------------------------------------------
   La 27 montó las nueve columnas y la 28 compactó la cabecera, pero la
   lista se seguía leyendo como una hoja continua: las filas solo se
   tocaban por un hilo de 1 px y cada celda se partía donde cabía
   («30077788 / 99», «Mar / ta», «30/09/2026 / 02:26»). La causa no era
   el gusto sino el aritmética: con layout automático la tabla reparte
   primero los anchos fijos de ocho columnas y «Cliente» —la única sin
   ancho declarado— recogía lo que sobraba, 140 px de 1111.

   Dos cambios de fondo:
   * `table-layout: fixed` con los ocho anchos medidos celda a celda en
     el banco (sonda de DOM: `scrollWidth` de cada celda clonada dentro
     de `.menutin-app-page`). «Cliente» sigue elástica; lo que no cabe
     sale con puntos y su valor entero está en el `title`, no partido en
     dos renglones.
   * El hueco entre bandas es un `border-bottom` transparente de 7 px con
     `background-clip: padding-box`, no `border-spacing`. Con
     border-spacing el hueco se cuela también bajo la cabecera fija y al
     hacer scroll aparece una raya del fondo de la página.

   Como 29 llega después de 27 en el fichero, todo lo que 27.10 anula en
   el modo tarjetas (≤1023) vuelve a anularse aquí en 29.8: una media
   query anterior no gana a una regla base posterior.
   ================================================================ */

/* --- 29.1 Anchos de columna, los que piden los datos -------------- */
/* Medidos celda a celda en el banco con el contenido más ancho real de cada
   una: «BUR-000032» (81), «hace 12 min» (78), «Domicilio»+icono (89),
   «Mercado Pago»+icono (125), «2 artículos» (74), «$32.500» (59), la pastilla
   «Listo para recoger» (132) y «Ver / En camino / ⋮» (170). A cada uno se le
   suman los 20 px de padding y los 4 de la barra de estado. */
.menutin-app-page .mt-table--rich.mt-table--orders {
	table-layout: fixed;
}

.menutin-app-page .mt-table--rich .mt-col--code { width: 108px; }
.menutin-app-page .mt-table--rich .mt-col--when { width: 98px; }
.menutin-app-page .mt-table--rich .mt-col--delivery { width: 112px; }
.menutin-app-page .mt-table--rich .mt-col--payment { width: 146px; }
.menutin-app-page .mt-table--rich .mt-col--items { width: 94px; }
.menutin-app-page .mt-table--rich .mt-col--total { width: 82px; }
.menutin-app-page .mt-table--rich .mt-col--status { width: 154px; }
.menutin-app-page .mt-table--rich .mt-col--act { width: 190px; }

/* --- 29.2 Bandas de columnas, con la caja que mide el panel ------- */
/* Con `table-layout: fixed` el ancho deja de ser una sugerencia: si las ocho
   columnas fijas piden más de lo que mide la caja, «Cliente» —la única
   elástica— se va a 0 px. Y la caja del panel NO crece con la ventana: mide
   974 px a 1024 (el sidebar va fuera de lienzo), cae a 747 px a 1060 (el
   sidebar de 248 px entra en flujo) y vuelve a 1111 px a 1440. Estas cuatro
   bandas salen de restar 150 px mínimos de cliente a esa curva medida:

     1024–1299 (caja 747–974)  → 5 columnas   (fijos 534 + 150 = 684 ≤ 747)
     1300–1399 (caja 971–1040) → 7 columnas   (fijos 792 + 150 = 942 ≤ 971)
     1400–1519 (caja 1071–1170)→ 8 columnas   (fijos 890 + 150 = 1040 ≤ 1071)
     ≥1520     (caja 1171…)    → 9 columnas   (fijos 984 + 150 = 1134 ≤ 1171)

   Lo que se retira sigue estando: en el cajón de la ficha y en el CSV. */
@media (min-width: 1024px) and (max-width: 1299px) {
	.menutin-app-page .mt-table--rich .mt-col--delivery,
	.menutin-app-page .mt-table--rich .mt-cell--delivery,
	.menutin-app-page .mt-table--rich .mt-col--payment,
	.menutin-app-page .mt-table--rich .mt-cell--payment {
		display: none;
	}
}

@media (min-width: 1300px) and (max-width: 1399px) {
	.menutin-app-page .mt-table--rich .mt-col--when,
	.menutin-app-page .mt-table--rich .mt-cell--when,
	.menutin-app-page .mt-table--rich .mt-col--items,
	.menutin-app-page .mt-table--rich .mt-cell--items {
		display: none;
	}
}

@media (min-width: 1400px) and (max-width: 1519px) {
	.menutin-app-page .mt-table--rich .mt-col--items,
	.menutin-app-page .mt-table--rich .mt-cell--items {
		display: none;
	}
}

/* --- 29.3 La banda: fondo propio, borde fino y 7 px de aire ------- */
.menutin-app-page .mt-table--rich td.mt-cell {
	padding: 9px 10px 10px;
	border-bottom: 7px solid transparent;
	background: var(--mt-color-surface);
	background-clip: padding-box;
	box-shadow: inset 0 1px 0 var(--mt-color-border), inset 0 -1px 0 var(--mt-color-border);
}

.menutin-app-page .mt-table--rich td.mt-cell:first-child {
	border-radius: 10px 0 0 10px;
}

.menutin-app-page .mt-table--rich td.mt-cell:last-child {
	border-radius: 0 10px 10px 0;
	box-shadow: inset 0 1px 0 var(--mt-color-border), inset 0 -1px 0 var(--mt-color-border), inset -1px 0 0 var(--mt-color-border);
}

/* La barra de estado es el borde de la banda, no una raya pegada a la
   anterior: al separar las filas se veía como una cinta continua. */
.menutin-app-page .mt-table--rich td.mt-cell--code {
	border-left: 4px solid var(--mt-bar);
}

.menutin-app-page .mt-table--rich thead th.mt-col {
	padding: 8px 10px;
}

/* --- 29.4 Una línea por dato -------------------------------------- */
/* `overflow-wrap: anywhere` era el que permitía partir el teléfono: además de
   romper, reducía el min-content de la columna y el layout automático le daba
   aún menos sitio. Ahora la línea es entera y lo que sobra se trunca. */
.menutin-app-page .mt-table--rich .mt-cell-main {
	display: block;
	max-width: 100%;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow-wrap: normal;
}

.menutin-app-page .mt-table--rich .mt-cell-main .mt-ico {
	vertical-align: -3px;
	margin-right: 6px;
}

.menutin-app-page .mt-table--rich .mt-cell-sub {
	max-width: 100%;
	margin-top: 1px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow-wrap: normal;
}

.menutin-app-page .mt-table--rich .mt-cell-note {
	max-width: 100%;
	margin-top: 2px;
	line-height: 17px;
}

/* Ritmo común: primera línea 20 px y segunda 17 px en toda la tabla, para que
   las bandas de una misma pestaña midan lo mismo aunque cada celda lleve uno o
   dos renglones. */
.menutin-app-page .mt-table--rich .mt-cell-main,
.menutin-app-page .mt-table--rich .mt-cell-code,
.menutin-app-page .mt-table--rich .mt-cell-total,
.menutin-app-page .mt-table--rich .mt-cell-na {
	line-height: 20px;
}

.menutin-app-page .mt-table--rich .mt-cell-sub {
	line-height: 17px;
}

.menutin-app-page .mt-table--rich .mt-cell-sub .mt-badge {
	padding: 1px 8px;
	line-height: 15px;
}

.menutin-app-page .mt-table--rich .mt-cell-code,
.menutin-app-page .mt-table--rich .mt-cell-total {
	display: block;
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* --- 29.5 «Recibido»: la hora arriba y el «cuándo» debajo --------- */
.menutin-app-page .mt-table--rich .mt-cell-when {
	display: block;
	max-width: 100%;
	overflow: hidden;
}

.menutin-app-page .mt-table--rich .mt-when-time {
	display: block;
	font-size: var(--mt-fs-sm);
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	line-height: 20px;
	color: var(--mt-color-text);
}

.menutin-app-page .mt-table--rich .mt-when-ago {
	display: block;
	overflow: hidden;
	font-size: var(--mt-fs-xs);
	line-height: 17px;
	text-overflow: ellipsis;
	white-space: nowrap;
	color: var(--mt-color-muted);
}

.menutin-app-page .mt-table--rich .mt-cell-when--warn .mt-when-time {
	color: var(--mt-color-warn);
}

.menutin-app-page .mt-table--rich .mt-cell-when--late .mt-when-time {
	color: var(--mt-color-err);
}

/* --- 29.6 Acciones: la fila de botones no dobla sobre sí misma ---- */
/* Con 214 px declarados y 159 medidos, «Ver / En camino / ⋮» cabía justo y el
   menú se salía del hueco. Bajando el botón de fila a 30 px entran los tres
   sin que la banda crezca; en el modo tarjetas (29.8) vuelven a los 38 px de
   puntero cómodo. */
@media (min-width: 1024px) {
	.menutin-app-page .mt-table--rich .mt-rowacts {
		flex-wrap: nowrap;
		gap: 5px;
	}

	.menutin-app-page .mt-table--rich .mt-rowacts .mt-btn--sm {
		min-height: 30px;
		padding: 0 9px;
		font-size: .82rem;
	}

	.menutin-app-page .mt-table--rich .mt-rowacts .mt-rowmenu > summary {
		width: 30px;
		height: 30px;
	}
}

/* --- 29.7 La banda activa se ve ---------------------------------- */
.menutin-app-page .mt-table--rich .mt-trow:focus-within .mt-cell {
	background: var(--mt-color-surface-hover);
}

/* --- 29.8 ≤1023: la fila ya es tarjeta, el hueco no le sirve ------ */
@media (max-width: 1023px) {
	.menutin-app-page .mt-table--rich td.mt-cell {
		padding: 5px 0;
		border-bottom: 0;
		border-left: 0;
		border-radius: 0;
		background: transparent;
		box-shadow: none;
	}

	/* El radio de la banda son reglas `:first-child`/`:last-child` (0,4,1): con
	   la misma especificidad que 27.10 no las gana un reset de `td.mt-cell` a
	   secas, y la tarjeta del tr (12 px) se quedaba con un canto de 10 px por
	   dentro. Se anulan aquí, que es donde mandan las tarjetas. */
	.menutin-app-page .mt-table--rich td.mt-cell:first-child,
	.menutin-app-page .mt-table--rich td.mt-cell:last-child {
		border-radius: 0;
	}
}

/* ==========================================================================
   30. IMPRESIÓN DEL TICKET 1.7.28 — solo la hoja elegida, en papel de 80 mm
   ========================================================================== */

/* Hasta hoy el cajón imprimía el panel entero: nueve hojas Carta medidas en el
   PDF de Chrome. La capa 22 tapaba el chrome, pero la lista, los KPIs y la ficha
   seguían en el flujo. Con una hoja de ticket en el DOM se oculta todo salvo la
   cadena que la sostiene, así que en el papel sale el ticket y nada más.

   El mando es `#menutin-app:has(.mt-printsheet)`: los demás módulos (la hoja de
   QR de Mesas) no tienen hoja de ticket, no casan aquí y se siguen imprimiendo
   igual. En el PDF el @page lo inyecta app.js con el alto del ticket. */
@media print {
	#menutin-app:has(.mt-printsheet) #mt-main > :not(.mt-printsheet):not(.mt-modal--drawer),
	#menutin-app:has(.mt-printsheet) .mt-modal--drawer .mt-modal-head,
	#menutin-app:has(.mt-printsheet) .mt-modal--drawer .mt-modal-foot,
	#menutin-app:has(.mt-printsheet) .mt-modal--drawer [data-mt-drawer-hint],
	#menutin-app:has(.mt-printsheet) .mt-modal--drawer .mt-panelbody > :not(.mt-printsheet) {
		display: none !important;
	}

	/* El cajón deja de estar fijado a la ventana y suelta el scroll: la hoja pasa
	   al principio del papel en vez de flotar sobre un panel ya invisible. */
	#menutin-app:has(.mt-printsheet) .mt-modal--drawer,
	#menutin-app:has(.mt-printsheet) .mt-modal--drawer .mt-modal-box,
	#menutin-app:has(.mt-printsheet) .mt-modal--drawer .mt-modal-body {
		position: static;
		inset: auto;
		display: block;
		width: auto;
		max-width: none;
		height: auto;
		max-height: none;
		overflow: visible;
		padding: 0;
		margin: 0;
		border: 0;
		border-radius: 0;
		background: transparent;
		box-shadow: none;
	}

	/* La hoja no se parte: con el alto calculado sobre el contenido cabe entera,
	   y si un pedido larguísimo la desborda es preferible eso a un ticket
	   cortado por la mitad. */
	.menutin-app-page .mt-printsheet {
		break-inside: avoid;
		page-break-inside: avoid;
	}
}