/**
 * Menutín System Page — shell app fullscreen (SOLO body.menutin-system-page).
 * Nada de este archivo afecta al resto del sitio: todos los selectores
 * cuelgan de body.menutin-system-page o #menutin-app. Sin resets globales.
 */
body.menutin-system-page {
	margin: 0 !important;
	padding: 0 !important;
	background: #ffffff;
	color: #1d2327;
}

/* Defensa secundaria (la Admin Bar se retira por filtro WP): si algún
   plugin la inyecta igual, no deja hueco ni se muestra en System Pages. */
body.menutin-system-page.admin-bar {
	margin-top: 0 !important;
	padding-top: 0 !important;
}

body.menutin-system-page #wpadminbar {
	display: none !important;
}

/* `100vw` mide el viewport **incluida** la barra de scroll vertical, así que en
   cuanto la página tiene scroll el shell quedaba 15–17 px más ancho que el
   hueco real: barra de scroll horizontal falsa y 16 px recortados a la derecha
   (medido en WordPress real a 728 px de ancho útil). El `body` de una System
   Page ya va a sangre, así que `100%` da el mismo full-bleed sin desbordar. */
body.menutin-system-page.menutin-app-mode #menutin-app {
	width: 100%;
	max-width: 100vw;
	min-height: 100vh;
}

/* Causa raíz del espacio superior (1.5.11): este padding exterior
   separaba el shell del borde del viewport (hasta 32px arriba del
   topbar). El shell llega a los bordes (padding 0); el aire interior
   vive en .mt-main (app.css), que se conserva intacto. */
#menutin-app {
	box-sizing: border-box;
	width: 100%;
	max-width: none;
	min-height: 100vh;
	margin: 0;
	padding: 0;
	overflow-x: clip;
	background: #ffffff;
}

#menutin-app *,
#menutin-app *::before,
#menutin-app *::after {
	box-sizing: border-box;
}

/* Normalización con scope: el theme no impone tipografías ni fondos aquí.
   Los bloques van partidos en dos: lo que borra el barro del theme (fondo,
   padding, sangría de lista) se aplica a todo, y lo que fija medidas de
   diseño solo a lo que el theme escribe. Un selector con ID gana a
   cualquier número de clases, así que dejar el margen y el `line-height`
   también para los elementos `menutin-` era pisar la carta: la descripción
   de cada ficha arrastraba 1em de margen y el nombre ,6em. */
#menutin-app h1,
#menutin-app h2,
#menutin-app h3,
#menutin-app h4 {
	padding: 0;
	background: none;
}

#menutin-app p,
#menutin-app ul,
#menutin-app ol,
#menutin-app figure {
	padding: 0;
}

#menutin-app h1:not([class*="menutin-"]),
#menutin-app h2:not([class*="menutin-"]),
#menutin-app h3:not([class*="menutin-"]),
#menutin-app h4:not([class*="menutin-"]) {
	margin: 0 0 .6em;
	line-height: 1.25;
}

#menutin-app p:not([class*="menutin-"]),
#menutin-app ul:not([class*="menutin-"]),
#menutin-app ol:not([class*="menutin-"]),
#menutin-app figure:not([class*="menutin-"]) {
	margin: 0 0 1em;
}

#menutin-app ul,
#menutin-app ol {
	list-style-position: inside;
}

#menutin-app img,
#menutin-app svg,
#menutin-app video {
	max-width: 100%;
}

/* `height: auto` con ID impedía que una miniatura llenara el alto de su
   celda (la franja gris bajo la foto en la ficha de fila móvil). Mismo
   criterio: recorta el desborde del theme, no la hoja de diseño. */
#menutin-app img:not([class*="menutin-"]),
#menutin-app svg:not([class*="menutin-"]),
#menutin-app video:not([class*="menutin-"]) {
	height: auto;
}

#menutin-app a {
	word-break: break-word;
}

#menutin-app table {
	width: 100%;
	border-collapse: collapse;
}

#menutin-app button,
#menutin-app input,
#menutin-app select,
#menutin-app textarea {
	font: inherit;
	max-width: 100%;
}

#menutin-app input[type="text"],
#menutin-app input[type="tel"],
#menutin-app input[type="email"],
#menutin-app input[type="number"],
#menutin-app select,
#menutin-app textarea {
	width: 100%;
	font-size: 16px; /* evita zoom automático en iOS */
}

/*
 * La carta define su propio ancho con --mt-wrap (1440px en la composición
 * de referencia). Antes había aquí un tope fijo de 860px con selector de ID
 * que GANABA a la regla de la plantilla y dejaba la carta estrecha y
 * descuadrada respecto a la portada. El ancho lo decide la plantilla.
 */
#menutin-app .menutin-menu {
	max-width: var(--mt-wrap, 1140px);
}

/* POS y KDS: a una columna en pantallas estrechas. */
#menutin-app .menutin-pos-main {
	display: grid;
	grid-template-columns: 1fr;
	gap: 16px;
}

#menutin-app .menutin-kds-cols {
	display: grid;
	grid-template-columns: 1fr;
	gap: 16px;
}

@media (min-width: 900px) {
	#menutin-app .menutin-pos-main {
		grid-template-columns: 2fr 1fr;
	}

	#menutin-app .menutin-kds-cols {
		grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	}
}

/* Checkout: carrito y formulario apilados sin desbordar. */
#menutin-app .menutin-checkout,
#menutin-app .menutin-checkout-form,
#menutin-app .menutin-pos-cart {
	min-width: 0;
}

/* El riel de categorías del POS es tan ancho como la suma de sus chips, y el
   tablero del KDS puede llevar direcciones largas: sin `min-width:0` la
   columna 1fr nunca baja de ese mínimo y el panel desborda en móvil. */
#menutin-app .menutin-pos-main > *,
#menutin-app .menutin-kds-cols > * {
	min-width: 0;
}

/* Tarjetas del superadmin: rejilla adaptable sin desbordar. */
#menutin-app .menutin-cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: 12px;
}