/* Micgo — panel de pedidos. Pensado primero para celular (360 px); sin fuentes externas.
   Los colores salen de micgo-marca.css (var(--mic-…)): aquí no va ningún color fijo. */

/* El atributo hidden gana siempre: una regla display (p. ej. .mic-btn) no puede anularlo. */
[hidden] {
	display: none !important;
}

.mic-panel-body,
.mic-app {
	background: var(--mic-fondo);
	color: var(--mic-texto);
	font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	font-size: 16px;
	line-height: 1.4;
	margin: 0;
}

.mic-panel-body.mic-modal-open {
	overflow: hidden;
}

.mic-app *,
.mic-login * {
	box-sizing: border-box;
}

/* Cabecera y pestañas: pegadas arriba, juntas (la cabecera mide distinto según el nombre del negocio). */
.mic-top {
	position: sticky;
	top: 0;
	z-index: 20;
}

/* Cabecera en dos niveles. Nivel 1: el negocio, centrado. Nivel 2: la persona a la izquierda y sus iconos a la derecha. */
.mic-header {
	background: var(--mic-cabecera);
	color: var(--mic-sobre-cabecera);
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 6px 12px 4px;
}

.mic-header__brand {
	min-width: 0;
	text-align: center;
}

.mic-logo {
	display: inline-block;
	height: 36px;
	max-width: 100%;
	object-fit: contain;
	vertical-align: middle;
	width: auto;
}

/* El nombre baja a dos líneas si no cabe; solo con puntos suspensivos si ni así cabe. */
.mic-header__name {
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	display: -webkit-box;
	font-size: 1.1rem;
	font-weight: 700;
	line-height: 1.25;
	overflow: hidden;
	overflow-wrap: anywhere;
	text-align: center;
}

.mic-header__bar {
	align-items: center;
	display: flex;
	gap: 8px;
	justify-content: space-between;
	min-height: 44px;
}

.mic-header__user {
	align-items: center;
	display: flex;
	flex: 1 1 auto;
	font-size: 0.9rem;
	gap: 10px;
	min-width: 0;
}

.mic-header__username {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.mic-header__acciones {
	align-items: center;
	display: flex;
	flex: 0 0 auto;
	gap: 2px;
}

.mic-header__ajustes {
	align-items: center;
	background: none;
	border: 0;
	border-radius: 8px;
	color: var(--mic-sobre-cabecera);
	cursor: pointer;
	display: inline-flex;
	flex: 0 0 auto;
	height: 44px;
	justify-content: center;
	position: relative;
	width: 44px;
}

.mic-header__ajustes:focus-visible {
	outline: 3px solid var(--mic-sobre-cabecera);
	outline-offset: -3px;
}

.mic-header__ajustes--activo,
.mic-header__ajustes[aria-pressed="true"] {
	background: var(--mic-cabecera-activo);
}

.mic-header__ajustes .mic-tab__dot {
	right: 6px;
	top: 6px;
}

.mic-link {
	color: var(--mic-sobre-cabecera);
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0 4px;
	text-decoration: underline;
}

/* Conexión y avisos */
.mic-conexion,
.mic-aviso {
	background: var(--mic-aviso);
	border-bottom: 1px solid var(--mic-aviso-borde);
	color: var(--mic-aviso-texto);
	padding: 10px 12px;
	text-align: center;
}

.mic-aviso {
	background: var(--mic-info-fondo);
	border-color: var(--mic-info-borde);
	color: var(--mic-info-texto);
}

/* Pestañas */
.mic-tabs {
	background: var(--mic-superficie);
	border-bottom: 1px solid var(--mic-borde);
	display: flex;
	overflow-x: auto;
}

.mic-tab {
	align-items: center;
	background: none;
	border: 0;
	border-bottom: 3px solid transparent;
	color: var(--mic-texto-suave);
	cursor: pointer;
	display: flex;
	flex: 1 0 auto;
	font: inherit;
	font-weight: 600;
	gap: 6px;
	justify-content: center;
	min-height: 48px;
	padding: 0 14px;
	position: relative;
	white-space: nowrap;
}

.mic-tab[hidden] {
	display: none;
}

.mic-tab--active {
	border-bottom-color: var(--mic-primario);
	color: var(--mic-texto);
}

.mic-tab__count {
	background: var(--mic-fondo-tenue);
	border-radius: 999px;
	color: var(--mic-texto);
	font-size: 0.8rem;
	min-width: 24px;
	padding: 2px 7px;
	text-align: center;
}

.mic-tab__count[data-count="0"] {
	opacity: 0.55;
}

.mic-tab__dot {
	background: var(--mic-alerta);
	border-radius: 50%;
	height: 10px;
	position: absolute;
	right: 6px;
	top: 8px;
	width: 10px;
}

.mic-tab__dot[hidden] {
	display: none;
}

/* Barra de herramientas */
.mic-toolbar {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	padding: 10px 12px 0;
}

.mic-chip {
	background: var(--mic-superficie);
	border: 1px solid var(--mic-borde);
	border-radius: 999px;
	color: var(--mic-texto);
	cursor: pointer;
	font: inherit;
	font-size: 0.9rem;
	min-height: 44px;
	padding: 0 16px;
}

.mic-chip--on {
	background: var(--mic-primario);
	border-color: var(--mic-primario);
	color: var(--mic-sobre-primario);
}

.mic-resumen {
	font-weight: 700;
	padding: 12px 12px 0;
}

/* Lista y tarjetas */
.mic-lista {
	display: grid;
	gap: 12px;
	padding: 12px;
}

.mic-vacio {
	color: var(--mic-texto-suave);
	margin: 24px 0;
	text-align: center;
}

.mic-card {
	background: var(--mic-superficie);
	border: 1px solid var(--mic-borde);
	border-left: 6px solid var(--mic-borde);
	border-radius: 8px;
	overflow: hidden;
}

.mic-card--on-hold { border-left-color: var(--mic-estado-pendiente); }
.mic-card--mic-programado { border-left-color: var(--mic-estado-programado); }
.mic-card--processing { border-left-color: var(--mic-estado-preparacion); }
.mic-card--mic-en-camino { border-left-color: var(--mic-estado-camino); }
.mic-card--mic-listo { border-left-color: var(--mic-estado-listo); }
.mic-card--completed { border-left-color: var(--mic-estado-completado); }
.mic-card--mic-rechazado { border-left-color: var(--mic-estado-rechazado); }
.mic-card--cancelled { border-left-color: var(--mic-estado-cancelado); }
.mic-card--refunded { border-left-color: var(--mic-estado-reembolsado); }

.mic-card--alerta {
	background: var(--mic-aviso);
	border-color: var(--mic-aviso-borde);
}

.mic-card__cabecera {
	align-items: center;
	background: none;
	border: 0;
	color: inherit;
	cursor: pointer;
	display: flex;
	font: inherit;
	gap: 10px;
	min-height: 44px;
	padding: 10px 12px 0;
	text-align: left;
	width: 100%;
}

.mic-card__num {
	font-size: 1.15rem;
	font-weight: 800;
}

.mic-card__hora,
.mic-elapsed,
.mic-suave {
	color: var(--mic-texto-suave);
	font-size: 0.9rem;
}

.mic-card--alerta .mic-suave,
.mic-card--alerta .mic-elapsed,
.mic-card--alerta .mic-card__hora {
	color: var(--mic-aviso-texto);
}

.mic-elapsed {
	margin-left: auto;
}

.mic-badge {
	border-radius: 4px;
	color: var(--mic-sobre-estado);
	font-size: 0.75rem;
	font-weight: 700;
	padding: 2px 8px;
}

.mic-badge--completed { background: var(--mic-estado-completado); }
.mic-badge--mic-rechazado { background: var(--mic-estado-rechazado); }
.mic-badge--cancelled { background: var(--mic-estado-cancelado); }
.mic-badge--refunded { background: var(--mic-estado-reembolsado); color: var(--mic-estado-reembolsado-texto); }

.mic-card__resumen {
	padding: 4px 12px 10px;
}

.mic-card__cliente {
	font-weight: 600;
}

.mic-card__linea {
	align-items: baseline;
	display: flex;
	gap: 10px;
	justify-content: space-between;
	margin-top: 2px;
}

/* Detalle */
.mic-card__detalle {
	border-top: 1px solid var(--mic-borde);
	display: grid;
	gap: 12px;
	padding: 12px;
}

.mic-contacto {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.mic-seccion__titulo {
	color: var(--mic-texto-suave);
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.mic-items,
.mic-extras {
	list-style: none;
	margin: 0;
	padding: 0;
}

.mic-item {
	margin-bottom: 6px;
}

.mic-item__nombre {
	font-weight: 600;
}

.mic-item__var {
	color: var(--mic-texto-suave);
	display: block;
	font-size: 0.9rem;
}

.mic-extras {
	color: var(--mic-texto-suave);
	font-size: 0.9rem;
	padding-left: 12px;
}

.mic-cobrar {
	color: var(--mic-exito-texto);
	font-size: 1.25rem;
	font-weight: 800;
}

.mic-thumb {
	background: none;
	border: 1px solid var(--mic-borde);
	border-radius: 6px;
	cursor: zoom-in;
	display: block;
	margin-top: 6px;
	padding: 0;
}

.mic-thumb img {
	border-radius: 5px;
	display: block;
	height: 96px;
	object-fit: cover;
	width: 96px;
}

/* Acciones y botones */
.mic-acciones {
	border-top: 1px solid var(--mic-borde);
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	padding: 10px 12px 12px;
}

.mic-acciones:empty {
	display: none;
}

.mic-btn {
	align-items: center;
	background: var(--mic-superficie);
	border: 1px solid var(--mic-borde-fuerte);
	border-radius: 8px;
	color: var(--mic-texto);
	cursor: pointer;
	display: inline-flex;
	font: inherit;
	font-weight: 600;
	justify-content: center;
	min-height: 44px;
	padding: 0 16px;
	text-decoration: none;
}

.mic-btn--primary {
	background: var(--mic-primario);
	border-color: var(--mic-primario);
	color: var(--mic-sobre-primario);
}

.mic-btn--danger {
	border-color: var(--mic-peligro);
	color: var(--mic-peligro);
}

.mic-modal .mic-btn--danger {
	background: var(--mic-peligro);
	color: var(--mic-sobre-peligro);
}

.mic-btn--block {
	display: flex;
	width: 100%;
}

.mic-btn[disabled] {
	cursor: wait;
	opacity: 0.6;
}

.mic-btn:focus-visible,
.mic-tab:focus-visible,
.mic-chip:focus-visible,
.mic-card__cabecera:focus-visible,
.mic-input:focus-visible {
	outline: 3px solid var(--mic-foco);
	outline-offset: 2px;
}

/* Ventanas */
.mic-modal {
	align-items: flex-end;
	background: var(--mic-velo);
	display: flex;
	inset: 0;
	justify-content: center;
	position: fixed;
	z-index: 50;
}

.mic-modal[hidden],
.mic-visor[hidden] {
	display: none;
}

.mic-modal__box {
	background: var(--mic-superficie);
	border-radius: 14px 14px 0 0;
	display: grid;
	gap: 12px;
	max-height: 90vh;
	max-width: 520px;
	overflow-y: auto;
	padding: 16px;
	width: 100%;
}

.mic-modal__title {
	font-size: 1.15rem;
	margin: 0;
}

.mic-modal__text {
	margin: 0;
}

.mic-modal__label {
	font-weight: 600;
}

.mic-modal__error {
	color: var(--mic-peligro);
	margin: 0;
}

.mic-modal__actions {
	display: flex;
	gap: 8px;
	justify-content: flex-end;
}

.mic-rapidos,
.mic-domi-lista {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.mic-domi-lista {
	flex-direction: column;
}

.mic-input {
	border: 1px solid var(--mic-borde-fuerte);
	border-radius: 8px;
	font: inherit;
	padding: 10px;
	width: 100%;
}

/* Visor del comprobante */
.mic-visor {
	background: var(--mic-visor);
	display: flex;
	flex-direction: column;
	inset: 0;
	position: fixed;
	z-index: 60;
}

.mic-visor__barra {
	background: var(--mic-visor-barra);
	display: flex;
	gap: 8px;
	justify-content: space-between;
	padding: 8px 12px;
}

.mic-visor__lienzo {
	flex: 1;
	overflow: auto;
	touch-action: pan-x pan-y pinch-zoom;
}

.mic-visor__lienzo img {
	display: block;
	margin: 0 auto;
	max-width: 100%;
}

.mic-visor__lienzo img.mic-zoom {
	max-width: none;
	width: 220%;
}

/* Login */
.mic-login {
	align-items: center;
	background: var(--mic-fondo);
	color: var(--mic-texto);
	display: flex;
	font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	justify-content: center;
	min-height: 100vh;
	padding: 16px;
}

.mic-login__box {
	background: var(--mic-superficie);
	border: 1px solid var(--mic-borde);
	border-radius: 12px;
	max-width: 380px;
	padding: 24px;
	width: 100%;
}

.mic-login__title {
	font-size: 1.4rem;
	margin: 0 0 16px;
	text-align: center;
}

.mic-login__error {
	background: var(--mic-peligro-fondo);
	border: 1px solid var(--mic-peligro);
	border-radius: 8px;
	color: var(--mic-peligro-texto);
	padding: 10px;
}

.mic-login form p {
	margin: 0 0 12px;
}

.mic-login label {
	display: block;
	font-weight: 600;
	margin-bottom: 4px;
}

.mic-login input[type="text"],
.mic-login input[type="password"] {
	border: 1px solid var(--mic-borde-fuerte);
	border-radius: 8px;
	font: inherit;
	min-height: 44px;
	padding: 8px 10px;
	width: 100%;
}

.mic-login input[type="submit"] {
	background: var(--mic-primario);
	border: 0;
	border-radius: 8px;
	color: var(--mic-sobre-primario);
	cursor: pointer;
	font: inherit;
	font-weight: 700;
	min-height: 48px;
	width: 100%;
}

@media (min-width: 720px) {
	.mic-lista {
		grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
		margin: 0 auto;
		max-width: 1200px;
	}

	.mic-modal {
		align-items: center;
	}

	.mic-modal__box {
		border-radius: 14px;
	}
}

/* Entrega fallida ("No se pudo entregar") */
.mic-card--incidencia {
	background: var(--mic-peligro-fondo);
	border-color: var(--mic-peligro);
	border-left-color: var(--mic-peligro);
}

.mic-incidencia {
	background: var(--mic-peligro);
	color: var(--mic-sobre-peligro);
	font-size: 0.95rem;
	margin: 8px 12px 0;
	padding: 8px 10px;
	border-radius: 6px;
}

.mic-incidencia .mic-elapsed {
	color: inherit;
	font-size: inherit;
	margin-left: 0;
}

/* El domiciliario ve un aviso más suave: ya reportó, solo espera. */
.mic-incidencia--espera {
	background: var(--mic-aviso);
	color: var(--mic-aviso-texto);
	border: 1px solid var(--mic-aviso-borde);
}

.mic-incidencia--espera .mic-suave {
	color: var(--mic-aviso-texto);
}

.mic-incidencia--reintento {
	background: var(--mic-primario);
	color: var(--mic-sobre-primario);
}

/* Notificaciones push */
.mic-push {
	align-items: center;
	background: var(--mic-superficie);
	border: 1px solid var(--mic-borde);
	border-radius: 8px;
	display: flex;
	flex-wrap: wrap;
	gap: 8px 12px;
	margin: 10px 12px 0;
	padding: 10px 12px;
}

.mic-push[hidden] {
	display: none;
}

.mic-push__texto {
	flex: 1 1 220px;
	margin: 0;
}

.mic-push__acciones {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

/* Cabecera: foto y nombre */
.mic-avatar {
	align-items: center;
	background: var(--mic-fondo-tenue);
	border-radius: 50%;
	color: var(--mic-texto);
	display: inline-flex;
	flex: 0 0 auto;
	font-size: 0.85rem;
	font-weight: 700;
	height: 36px;
	justify-content: center;
	overflow: hidden;
	width: 36px;
}

.mic-avatar img {
	display: block;
	height: 100%;
	object-fit: cover;
	width: 100%;
}

.mic-avatar--grande {
	font-size: 1.6rem;
	height: 96px;
	width: 96px;
}

.mic-icon {
	display: block;
}

/* Banda de aviso de notificaciones */
.mic-banda {
	align-items: center;
	background: var(--mic-info-fondo);
	border-bottom: 1px solid var(--mic-info-borde);
	color: var(--mic-info-texto);
	display: flex;
	flex-wrap: wrap;
	gap: 8px 12px;
	padding: 10px 12px;
}

.mic-banda[hidden] {
	display: none;
}

.mic-banda__texto {
	flex: 1 1 240px;
	margin: 0;
}

.mic-banda__acciones {
	display: flex;
	gap: 8px;
}

/* Tarjetas de Configuración: una por bloque de cada sección */
.mic-lista[hidden],
.mic-ajuste[hidden] {
	display: none;
}

.mic-ajuste {
	background: var(--mic-superficie);
	border: 1px solid var(--mic-borde);
	border-radius: 8px;
	display: grid;
	gap: 10px;
	padding: 14px 12px;
}

.mic-ajuste__titulo {
	font-size: 1.05rem;
	margin: 0;
}

.mic-ajuste .mic-push {
	background: none;
	border: 0;
	margin: 0;
	padding: 0;
}

.mic-switch {
	align-items: center;
	cursor: pointer;
	display: flex;
	gap: 10px;
	min-height: 44px;
}

.mic-switch[hidden] {
	display: none;
}

.mic-switch input {
	flex: 0 0 auto;
	height: 22px;
	width: 22px;
}

.mic-form {
	display: grid;
	gap: 6px;
}

.mic-campo {
	font-weight: 600;
	margin-top: 6px;
}

.mic-input[readonly] {
	background: var(--mic-fondo);
	color: var(--mic-texto-suave);
}

.mic-form .mic-suave {
	margin: 0;
}

.mic-foto {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.mic-foto__acciones {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.mic-msg {
	border-radius: 6px;
	margin: 4px 0;
	padding: 8px 10px;
}

.mic-msg[hidden] {
	display: none;
}

.mic-msg--ok {
	background: var(--mic-exito-fondo);
	color: var(--mic-exito-texto);
}

.mic-msg--error {
	background: var(--mic-peligro-fondo);
	color: var(--mic-peligro);
}

.mic-medidor {
	border-left: 6px solid var(--mic-peligro);
	font-size: 0.9rem;
	font-weight: 600;
	padding: 2px 8px;
}

.mic-medidor[hidden] {
	display: none;
}

.mic-medidor[data-score="2"] { border-left-color: var(--mic-alerta); }
.mic-medidor[data-score="3"] { border-left-color: var(--mic-medidor-bueno); }
.mic-medidor[data-score="4"] { border-left-color: var(--mic-medidor-fuerte); }

.mic-ajuste .mic-btn--danger {
	justify-self: start;
}

/* Ventana de domiciliarios: filas con foto, teléfono y botón de llamar */
.mic-domi-ahora {
	font-weight: 600;
	margin: 0;
}

.mic-domi-fila {
	align-items: center;
	display: flex;
	gap: 8px;
}

.mic-domi-fila__elegir {
	align-items: center;
	background: var(--mic-superficie);
	border: 1px solid var(--mic-borde-fuerte);
	border-radius: 8px;
	cursor: pointer;
	display: flex;
	flex: 1 1 auto;
	font: inherit;
	gap: 10px;
	min-height: 52px;
	padding: 6px 10px;
	text-align: left;
}

.mic-domi-fila__texto {
	display: grid;
}

.mic-domi-fila__nombre {
	font-weight: 600;
}

/* Historial (vista propia, como Ajustes): buscador, filtros, resumen, lista paginada */
.mic-sr {
	border: 0;
	clip: rect(0, 0, 0, 0);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}

.mic-historial {
	display: grid;
	gap: 10px;
	margin: 0 auto;
	max-width: 1200px;
	padding: 12px;
}

.mic-historial[hidden],
.mic-informes[hidden],
.mic-r-personal[hidden],
.mic-r-sub[hidden],
.mic-h-rango[hidden],
.mic-h-buscar__limpiar[hidden],
.mic-h-resumen[hidden],
.mic-h-estado[hidden],
.mic-h-paginas[hidden] {
	display: none;
}

.mic-h-buscar {
	display: block;
	position: relative;
}

.mic-h-buscar__campo {
	display: block;
}

.mic-h-buscar .mic-input {
	min-height: 48px;
	padding-right: 48px;
}

.mic-h-buscar__limpiar {
	align-items: center;
	background: none;
	border: 0;
	color: var(--mic-texto-suave);
	cursor: pointer;
	display: flex;
	font-size: 1.6rem;
	height: 44px;
	justify-content: center;
	line-height: 1;
	position: absolute;
	right: 2px;
	top: 2px;
	width: 44px;
}

.mic-h-buscar__limpiar:focus-visible {
	outline: 3px solid var(--mic-primario);
	outline-offset: -3px;
}

.mic-h-filtros-btn {
	justify-self: start;
	min-height: 44px;
}

/* Celular: los filtros se despliegan; computador: siempre a la vista, en una fila. */
.mic-h-filtros {
	display: none;
	gap: 8px;
	grid-template-columns: 1fr 1fr;
}

.mic-h-filtros--abierto {
	display: grid;
}

.mic-h-filtro {
	display: grid;
	gap: 2px;
	min-width: 0;
}

.mic-h-filtro .mic-campo {
	font-size: 0.85rem;
	margin-top: 0;
}

.mic-h-filtro .mic-input {
	min-height: 44px;
}

.mic-h-rango {
	display: grid;
	gap: 8px;
	grid-column: 1 / -1;
	grid-template-columns: 1fr 1fr;
}

.mic-h-resumen {
	padding: 4px 0 0;
}

.mic-h-estado {
	color: var(--mic-texto-suave);
	display: grid;
	gap: 8px;
	justify-items: start;
}

.mic-h-estado--error {
	color: var(--mic-peligro);
}

.mic-h-lista {
	padding: 0;
}

.mic-h-paginas {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	justify-content: space-between;
}

.mic-h-paginas__texto {
	color: var(--mic-texto-suave);
	flex: 1 1 100%;
	order: -1;
	text-align: center;
}

.mic-h-paginas .mic-btn {
	flex: 1 1 0;
	min-height: 44px;
}

.mic-h-lista .mic-badge {
	margin-left: auto;
}

.mic-h-lista[aria-busy="true"] {
	opacity: 0.55;
}

.mic-badge--on-hold { background: var(--mic-estado-pendiente); color: var(--mic-estado-pendiente-texto); }
.mic-badge--mic-programado { background: var(--mic-estado-programado); }
.mic-badge--processing { background: var(--mic-estado-preparacion); }
.mic-badge--mic-en-camino { background: var(--mic-estado-camino); }
.mic-badge--mic-listo { background: var(--mic-estado-listo); }

/* Etiqueta "Recoger en el local" de la tarjeta y del Historial */
.mic-card__listo {
	color: var(--mic-recoger-texto);
	font-weight: 600;
}

.mic-etiqueta-recoger {
	background: var(--mic-recoger-fondo);
	border: 1px solid var(--mic-recoger);
	border-radius: 999px;
	color: var(--mic-recoger-texto);
	display: inline-block;
	font-size: 0.8rem;
	font-weight: 700;
	padding: 2px 10px;
}

@media (min-width: 720px) {
	.mic-h-filtros-btn {
		display: none;
	}

	.mic-h-filtros {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	}

	.mic-h-rango {
		display: contents;
	}

	.mic-h-paginas__texto {
		flex: 1 1 auto;
		order: 0;
	}

	.mic-h-paginas .mic-btn {
		flex: 0 0 auto;
		min-width: 120px;
	}
}

/* Informes (vista propia): rango, secciones en tarjetas y barras con HTML y CSS */
.mic-informes {
	display: grid;
	gap: 10px;
	margin: 0 auto;
	max-width: 1200px;
	padding: 12px;
}

.mic-r-rango {
	display: grid;
	gap: 8px;
}

.mic-r-personal {
	display: grid;
	gap: 8px;
	grid-template-columns: 1fr 1fr;
}

.mic-r-titulo {
	font-size: 1.1rem;
	margin: 0;
}

.mic-r-sub {
	margin: 0;
}

.mic-r-grid {
	display: grid;
	gap: 12px;
}

.mic-r-grid[aria-busy="true"] {
	opacity: 0.55;
}

.mic-r-sec {
	background: var(--mic-superficie);
	border: 1px solid var(--mic-borde);
	border-radius: 8px;
	display: grid;
	gap: 10px;
	min-width: 0;
	padding: 14px 12px;
}

.mic-r-sec__titulo {
	font-size: 1.05rem;
	margin: 0;
}

.mic-r-sub-titulo {
	font-size: 0.95rem;
	margin: 6px 0 0;
}

.mic-kpis {
	display: grid;
	gap: 10px;
	grid-template-columns: 1fr 1fr;
}

.mic-kpi {
	min-width: 0;
}

.mic-kpi__valor {
	font-size: 1.35rem;
	font-weight: 800;
	overflow-wrap: anywhere;
}

.mic-kpi__etiqueta {
	color: var(--mic-texto-suave);
	font-size: 0.9rem;
}

.mic-r-tiempo {
	border-top: 1px solid var(--mic-borde);
	padding-top: 8px;
}

.mic-r-tiempo:first-of-type {
	border-top: 0;
	padding-top: 0;
}

.mic-r-tasa {
	font-weight: 600;
	margin: 0;
}

.mic-r-tabla {
	border-collapse: collapse;
	width: 100%;
}

.mic-r-tabla th,
.mic-r-tabla td {
	border-bottom: 1px solid var(--mic-borde);
	padding: 8px 4px;
	text-align: left;
}

.mic-r-tabla .mic-num {
	text-align: right;
	white-space: nowrap;
}

.mic-r-tabla thead th {
	color: var(--mic-texto-suave);
	font-size: 0.8rem;
}

.mic-r-lineas {
	display: grid;
	gap: 4px;
}

.mic-r-lineas > div {
	display: flex;
	gap: 8px;
	justify-content: space-between;
}

.mic-r-efectivo {
	display: grid;
	gap: 8px;
}

.mic-r-pedido {
	display: grid;
	gap: 8px;
}

.mic-r-pedido__fila {
	align-items: center;
	background: var(--mic-fondo);
	border: 1px solid var(--mic-borde);
	border-radius: 8px;
	color: inherit;
	cursor: pointer;
	display: flex;
	font: inherit;
	gap: 10px;
	min-height: 48px;
	padding: 6px 10px;
	text-align: left;
	width: 100%;
}

.mic-r-pedido__monto {
	font-weight: 700;
	margin-left: auto;
}

.mic-bars {
	display: grid;
	gap: 6px;
}

.mic-bar {
	align-items: center;
	display: grid;
	gap: 8px;
	grid-template-columns: minmax(70px, 34%) 1fr auto;
}

.mic-bar__nombre {
	font-size: 0.9rem;
	min-width: 0;
	overflow-wrap: anywhere;
}

.mic-bar__pista {
	background: var(--mic-fondo);
	border-radius: 4px;
	display: block;
	height: 14px;
	overflow: hidden;
}

.mic-bar__relleno {
	background: var(--mic-primario);
	border-radius: 4px;
	display: block;
	height: 100%;
}

.mic-bar__valor {
	font-size: 0.9rem;
	font-variant-numeric: tabular-nums;
	font-weight: 700;
	text-align: right;
}

@media (min-width: 900px) {
	.mic-r-grid {
		grid-template-columns: 1fr 1fr;
		align-items: start;
	}

	.mic-r-ancho {
		grid-column: 1 / -1;
	}

	.mic-r-rango {
		align-items: end;
		grid-template-columns: minmax(180px, 260px) 1fr;
	}

	.mic-kpis {
		grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	}
}

/* Cabecera en una sola fila desde 900 px: el negocio a la izquierda; la persona y sus iconos a la derecha. */
@media (min-width: 900px) {
	.mic-header {
		align-items: center;
		flex-direction: row;
		gap: 24px;
		justify-content: space-between;
		padding: 6px 16px;
	}

	.mic-header__brand {
		flex: 1 1 auto;
		text-align: left;
	}

	.mic-header__name {
		text-align: left;
	}

	.mic-header__bar {
		flex: 0 1 auto;
		gap: 20px;
	}

	.mic-header__user {
		flex: 0 1 auto;
	}

	.mic-header__username {
		max-width: 240px;
	}
}

/* Hover del botón principal (solo con puntero): el primario oscurecido. */
@media (hover: hover) {
	.mic-btn--primary:hover,
	.mic-login input[type="submit"]:hover {
		background: var(--mic-primario-oscuro);
		border-color: var(--mic-primario-oscuro);
	}
}

/* Navegación del panel (etapa 14). Celular: barra inferior fija con las páginas de la barra (Configuración sigue en el
   engranaje del header). Desde 1024 px: barra lateral con las seis y Configuración al final. */
.mic-app {
	padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px));
}

.mic-nav {
	background: var(--mic-superficie);
	border-top: 1px solid var(--mic-borde);
	bottom: 0;
	display: flex;
	left: 0;
	padding-bottom: env(safe-area-inset-bottom, 0px);
	position: fixed;
	right: 0;
	z-index: 30;
}

.mic-nav__item {
	align-items: center;
	color: var(--mic-texto-suave);
	display: flex;
	flex: 1 1 0;
	flex-direction: column;
	font-size: 0.68rem;
	font-weight: 600;
	gap: 2px;
	justify-content: center;
	min-height: 56px;
	min-width: 0;
	padding: 4px 1px;
	text-decoration: none;
}

.mic-nav__item[data-barra="0"] {
	display: none;
}

.mic-nav__item[aria-current="page"] {
	color: var(--mic-primario);
}

.mic-nav__item:focus-visible {
	outline: 3px solid var(--mic-foco);
	outline-offset: -3px;
}

.mic-nav__nombre {
	line-height: 1.2;
	white-space: nowrap;
}

.mic-nav__icono {
	display: inline-flex;
	position: relative;
}

.mic-nav__contador {
	background: var(--mic-peligro);
	border-radius: 9px;
	color: var(--mic-sobre-peligro);
	font-size: 0.7rem;
	height: 18px;
	line-height: 18px;
	min-width: 18px;
	padding: 0 4px;
	position: absolute;
	right: -14px;
	text-align: center;
	top: -6px;
}

.mic-nav__punto {
	background: var(--mic-alerta);
	border-radius: 50%;
	height: 10px;
	left: -5px;
	position: absolute;
	top: -3px;
	width: 10px;
}

.mic-nav__contador[hidden],
.mic-nav__punto[hidden] {
	display: none;
}

.mic-header__ajustes {
	text-decoration: none;
}

@media (min-width: 1024px) {
	.mic-app {
		padding-bottom: 0;
		padding-left: 224px;
	}

	.mic-nav {
		border-right: 1px solid var(--mic-borde);
		border-top: 0;
		bottom: 0;
		flex-direction: column;
		gap: 4px;
		left: 0;
		overflow-y: auto;
		padding: 12px 8px;
		right: auto;
		top: 0;
		width: 224px;
	}

	.mic-nav__item,
	.mic-nav__item[data-barra="0"] {
		border-radius: 8px;
		display: flex;
		flex: 0 0 auto;
		flex-direction: row;
		font-size: 1rem;
		gap: 12px;
		justify-content: flex-start;
		min-height: 44px;
		padding: 8px 12px;
	}

	.mic-nav__item[data-barra="0"] {
		margin-top: auto;
	}

	.mic-nav__item[aria-current="page"] {
		background: var(--mic-fondo-tenue);
	}

	/* El engranaje del header se va: Configuración queda al final de la barra lateral. */
	#mic-config-btn {
		display: none;
	}
}

/* Páginas de espera (Productos y Toppings, hasta las etapas 21 y 22) */
.mic-espera {
	display: grid;
	gap: 12px;
	justify-items: center;
	margin: 0 auto;
	max-width: 640px;
	padding: 32px 16px;
	text-align: center;
}

.mic-espera__titulo {
	margin: 0;
}

.mic-espera__texto {
	color: var(--mic-texto-suave);
	margin: 0;
}

/* Configuración: lista de secciones y formulario de la sección abierta. Celular: una cosa a la vez. */
.mic-config {
	display: grid;
	gap: 12px;
	margin: 0 auto;
	max-width: 1000px;
	padding: 12px;
}

.mic-config__titulo {
	font-size: 1.2rem;
	margin: 4px 0 8px;
}

.mic-config__menu {
	display: grid;
	gap: 8px;
}

.mic-cfg-item {
	align-items: center;
	background: var(--mic-superficie);
	border: 1px solid var(--mic-borde);
	border-radius: 8px;
	color: var(--mic-texto);
	display: flex;
	gap: 12px;
	min-height: 56px;
	padding: 10px 12px;
	position: relative;
	text-decoration: none;
}

.mic-cfg-item:focus-visible {
	outline: 3px solid var(--mic-foco);
	outline-offset: 2px;
}

.mic-cfg-item[aria-current="true"] {
	border-color: var(--mic-primario);
}

.mic-cfg-item__icono {
	color: var(--mic-texto-suave);
	display: inline-flex;
	flex: 0 0 auto;
}

.mic-cfg-item__texto {
	display: grid;
	gap: 2px;
	min-width: 0;
}

.mic-cfg-item__nombre {
	font-weight: 600;
}

.mic-cfg-item__desc {
	color: var(--mic-texto-suave);
	font-size: 0.85rem;
}

.mic-cfg-item__punto {
	right: 12px;
	top: 12px;
}

.mic-config__detalle {
	display: grid;
	gap: 12px;
	min-width: 0;
}

.mic-config__volver {
	justify-self: start;
	min-height: 44px;
}

.mic-cfg-seccion {
	display: grid;
	gap: 12px;
}

.mic-cfg-seccion[hidden],
.mic-config__menu[hidden],
.mic-config__detalle[hidden] {
	display: none;
}

.mic-cfg-seccion__titulo {
	font-size: 1.2rem;
	margin: 4px 0 0;
}

/* Celular: sin sección abierta, la lista; con una abierta, solo su formulario. */
.mic-config:not(.mic-config--detalle) .mic-config__detalle {
	display: none;
}

.mic-config--detalle .mic-config__menu {
	display: none;
}

@media (min-width: 1024px) {
	.mic-config {
		align-items: start;
		gap: 24px;
		grid-template-columns: 300px minmax(0, 1fr);
		padding: 20px;
	}

	/* Dos columnas: la lista y la sección siempre a la vista; "← Configuración" sobra. */
	.mic-config:not(.mic-config--detalle) .mic-config__detalle,
	.mic-config--detalle .mic-config__menu {
		display: grid;
	}

	.mic-config__volver {
		display: none;
	}
}

.mic-cfg-grupos {
	display: grid;
	gap: 12px;
}

.mic-cfg-grupos .mic-input {
	width: 100%;
}

/* Logo del negocio: vista previa sin recortar */
.mic-logo-prev {
	align-items: center;
	background: var(--mic-fondo);
	border: 1px solid var(--mic-borde);
	border-radius: 8px;
	display: flex;
	justify-content: center;
	min-height: 96px;
	padding: 12px;
}

.mic-logo-prev__img {
	display: block;
	max-height: 120px;
	max-width: 100%;
	object-fit: contain;
}

/* "Probar" junto a un teléfono */
.mic-cfg-probar {
	justify-self: start;
	min-height: 44px;
	text-decoration: none;
}

/* Formularios de Configuración (patrón común): campo, ayuda y error por campo */
.mic-cfg-form {
	display: grid;
	gap: 6px;
}

.mic-cfg-form .mic-ajuste {
	gap: 6px;
}

.mic-ayuda {
	color: var(--mic-texto-suave);
	font-size: 0.85rem;
	margin: 0;
}

.mic-campo-error {
	color: var(--mic-peligro);
	font-size: 0.9rem;
	font-weight: 600;
	margin: 0;
}

.mic-campo-error[hidden] {
	display: none;
}

.mic-input[aria-invalid="true"] {
	border-color: var(--mic-peligro);
}

.mic-cfg-acciones {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 8px;
}

/* Firma "Hecho con Micgo": al final de la página, sin ocupar espacio fijo en el celular. */
.mic-firma {
	color: var(--mic-texto-suave);
	font-size: 0.75rem;
	margin: 0;
	padding: 20px 12px 28px;
	text-align: center;
}

.mic-firma a {
	color: inherit;
}