/* =============================================================================
   home.css · Dashboard /menu — REDISEÑO v4 "NOIR OPERATIVO"
   -----------------------------------------------------------------------------
   ORDEN DE FRANJAS (contrato, ver CLAUDE.md):
     F0 overlays (MnAviso)  · F1 identidad · F2 cinta de estado · F3a CTA única
     F3b 3 acciones · F4 TurnoStrip · F5 Bandeja · F6a buscador · F6b áreas
     F7 tip.  RIEL sticky en paralelo (atajos · ranking · portal · operativos).
   EL ESPACIO ENTRE F1 Y F3a ESTÁ SELLADO: ahí solo entra la Cinta.

   PRESUPUESTOS (ley; un parche que los viola se rechaza en review):
     · UNA acción primaria (NUEVA VENTA): único relleno rojo con gradiente.
     · DOS rojos y se acabó, distinguidos por FORMA: gradiente en tile (CTA) vs
       relleno plano en banda ancha (P0 facturación, siempre arriba de la CTA).
       P1-P4 NO llevan relleno: superficie --s2 + hairline + punto de 6px.
     · Severidad por OPACIDAD y POSICIÓN, nunca por matiz. Prohibidos: violeta,
       verde, ámbar, rojo-naranja y dorado brillante. --gold vive SOLO en la
       pill de turno.
     · 5 alturas de fila: 96 (CTA) · 72 (tile del riel) · 56 (acción secundaria,
       buscador, header) · 44 (fila de cinta/bandeja) · 36 (fila operativa).
     · 2 radios: --r 14px (cards y tiles) · --r-sm 10px (chips y filas).
     · UNA sola animación idle en toda la página: el punto del chip P0 (2s), y
       solo si es la ÚNICA alerta de la cinta.
       EXCEPCIÓN ÚNICA Y ARGUMENTADA (v5, 2026-07-26): el shimmer del `.mn-skel`.
       El propósito de la regla es que nada perpetuo le compita la atención a la
       alerta; el skeleton no compite con nada porque mientras está en pantalla
       TODAVÍA NO HAY contenido (ni chip P0, que también depende de los datos), y
       se muere solo cuando llegan. Un skeleton estático se lee como una caja
       rota. Si aparece una tercera animación infinita, se rechaza.
     · Movimiento que OCURRE UNA VEZ y termina (entrada escalonada de franjas,
       press/hover) NO cuenta contra el presupuesto de idle: a los 400ms no está
       y por definición no puede competir por la atención. Ver bloque "v5".
     · Ningún bloque supera 240px sin scroll interno o colapso.
   ============================================================================= */

/* -----------------------------------------------------------------------------
   TOKENS · UN SOLO BLOQUE DE DECLARACIÓN.
   `.mn-aviso` comparte el selector a propósito: los avisos flotantes viven
   FUERA de `.mn-home` (position:fixed) y sin esto quedaban sin fondo ni radio
   (bug real del flash de "venta confirmada" previo al rediseño).
   -------------------------------------------------------------------------- */
.mn-home,
.mn-aviso {
  --ink:        #08090c;   /* lienzo */
  --ink-2:      #0c0e12;   /* lienzo sutil */
  --s1:         #0f1116;   /* card */
  --s2:         #141821;   /* tile elevado */
  --s3:         #1b202b;   /* hover */
  --line:       rgba(255, 255, 255, .065);
  --line-2:     rgba(255, 255, 255, .12);
  --txt:        #f4f6fa;   /* blanco (cuernos del toro) */
  --txt-2:      #c2c9d6;
  --muted:      #828b9a;
  --faint:      #565f6e;
  --red:        #e11d3a;   /* rojo vivo (acento/hover) */
  --red-core:   #c8102e;   /* rojo de marca */
  --red-deep:   #7d0a1c;
  --red-soft:   rgba(225, 29, 58, .11);
  --red-softer: rgba(225, 29, 58, .055);
  --red-line:   rgba(225, 29, 58, .32);
  --red-glow:   rgba(200, 16, 46, .45);
  --gold:       #e8b873;   /* dorado tenue · SOLO la pill de turno */

  --r:    14px;
  --r-sm: 10px;
  --ease: 160ms cubic-bezier(.4, 0, .2, 1);
}

.mn-home {
  max-width: 1720px;
  margin: 0 auto;
  padding: 16px 20px 18px;
  color: var(--txt);
  font-family: var(--ff, "Inter", system-ui, -apple-system, sans-serif);
  -webkit-font-smoothing: antialiased;
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - 104px);
  position: relative;
}
/* Aura roja ultra-tenue arriba — profundidad de marca, no decoración chillona */
.mn-home::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 340px;
  background: radial-gradient(120% 100% at 50% -40%, rgba(200, 16, 46, .10), transparent 70%);
  pointer-events: none;
  z-index: 0;
}
.mn-home > * { position: relative; z-index: 1; }

.mn-home a:focus-visible,
.mn-home button:focus-visible,
.mn-home summary:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

/* =================================================================
   F1 · IDENTIDAD — 56px, UNA línea, el bloque nº1 de la página.
   ================================================================= */
.mn-head {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 56px;
  margin: 0 0 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}
.mn-head-logo {
  flex-shrink: 0;
  width: 40px; height: 40px;
  object-fit: contain;
  padding: 3px;
  border-radius: var(--r-sm);
  background:
    radial-gradient(circle at 50% 30%, rgba(200, 16, 46, .18), transparent 60%),
    #0a0b0e;
  border: 1px solid var(--line-2);
  display: block;
}
.mn-head-text { min-width: 0; display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.mn-head-title {
  font-size: 22px;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -.02em;
  color: var(--txt);
}
.mn-head-sub {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 13.5px;
  color: var(--muted);
}
/* ítem 68 :: la hora, al lado de la fecha. font-variant-numeric para que HH:mm
   no salte de ancho cada vez que el JS la tickea (los dígitos proporcionales
   hacen que el texto de al lado "respire" cada 30s, que en una fila de una
   sola línea se nota como un tembleque). */
.mn-hora-viva {
  font-variant-numeric: tabular-nums;
  color: var(--txt);
  font-weight: 700;
}
.mn-turno-pill {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border-radius: 999px;
  background: transparent;
  color: var(--gold);
  border: 1px solid rgba(232, 184, 115, .32);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

/* =================================================================
   F2 · CINTA DE ESTADO — 0px sin filas · 44px con chips · 72px con P0.
   ================================================================= */
.mn-cinta { display: flex; flex-direction: column; gap: 8px; margin: 0 0 12px; }

/* --- P0: la ÚNICA banda de relleno rojo plano de la página --- */
.mn-cinta-p0 {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 72px;
  padding: 12px 16px;
  border-radius: var(--r);
  background: var(--red-core);
  border: 1px solid var(--red);
  color: #fff;
}
.mn-cinta-p0-ico { font-size: 20px; line-height: 1; flex-shrink: 0; }
.mn-cinta-p0 .mn-cinta-dot { background: #fff; }
.mn-cinta-p0-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.mn-cinta-p0-tit { font-size: 15px; font-weight: 800; letter-spacing: .01em; }
.mn-cinta-p0-sub { font-size: 11px; color: rgba(255, 255, 255, .82); line-height: 1.4; }
.mn-cinta-p0-btn {
  flex-shrink: 0;
  padding: 8px 14px;
  border-radius: var(--r-sm);
  border: 1px solid rgba(255, 255, 255, .6);
  background: rgba(255, 255, 255, .14);
  color: #fff;
  font-family: inherit;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background var(--ease);
}
.mn-cinta-p0-btn:hover { background: rgba(255, 255, 255, .26); }
.mn-cinta-p0-btn:disabled { opacity: .6; cursor: wait; }

/* --- P1..P4: filas de 44px, sin relleno. Severidad = opacidad + posición --- */
.mn-cinta-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.mn-cinta-chip {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 44px;
  padding: 0 14px;
  border-radius: var(--r-sm);
  text-decoration: none;
  font-size: 13.5px;
  color: var(--txt-2);
  background: var(--s2);
  border: 1px solid var(--line);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color var(--ease), background var(--ease), color var(--ease);
}
.mn-cinta-chip:hover { border-color: var(--red-line); background: var(--s3); color: var(--txt); }
.mn-cinta-chip-ico { font-size: 15px; line-height: 1; flex-shrink: 0; }
.mn-cinta-chip-num { font-weight: 800; color: var(--txt); font-variant-numeric: tabular-nums; }
.mn-cinta-chip-sub { color: var(--faint); }
.mn-cinta-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--red);
  flex-shrink: 0;
}
.mn-cinta-dot--p1, .mn-cinta-dot--p2 { opacity: .7; }
.mn-cinta-dot--p3, .mn-cinta-dot--p4 { opacity: .4; }
/* LA ÚNICA ANIMACIÓN IDLE DE LA PÁGINA — y solo si P0 está solo en la cinta */
.mn-cinta-dot--solo { animation: mnDot 2s ease-in-out infinite; }
@keyframes mnDot { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }

/* Botón "+N" y detalle expandible in-place (top-10 de stock) */
.mn-cinta-mas {
  all: unset;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 14px;
  border-radius: var(--r-sm);
  border: 1px dashed var(--line-2);
  color: var(--muted);
  font-size: 13.5px;
  cursor: pointer;
  transition: color var(--ease), border-color var(--ease);
}
.mn-cinta-mas:hover { color: var(--txt); border-color: var(--red-line); }
.mn-cinta-detalle {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 240px;
  overflow-y: auto;
  padding: 8px;
  border-radius: var(--r-sm);
  background: var(--s1);
  border: 1px solid var(--line);
}
.mn-cinta-detalle-row {
  display: grid;
  grid-template-columns: 84px 1fr auto;
  gap: 10px;
  align-items: center;
  min-height: 36px;
  padding: 0 10px;
  border-radius: var(--r-sm);
  text-decoration: none;
  color: var(--txt-2);
  font-size: 13.5px;
  transition: background var(--ease), color var(--ease);
}
.mn-cinta-detalle-row:hover { background: var(--s3); color: var(--txt); }
.mn-cinta-detalle-cod { color: var(--faint); font-family: ui-monospace, monospace; font-size: 11px; }
.mn-cinta-detalle-nom { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mn-cinta-detalle-val { font-weight: 800; font-variant-numeric: tabular-nums; }

/* Estado "TODO EN ORDEN": el home tiene que DECIR que está todo bien.
   La ausencia de información se lee como "no cargó", no como "sin novedad". */
.mn-cinta-ok {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 0 14px;
  border-radius: var(--r-sm);
  background: var(--ink-2);
  border: 1px dashed var(--line);
  color: var(--muted);
  font-size: 13.5px;
}
.mn-cinta-ok-ico { color: var(--txt-2); }
.mn-cinta-ok-when { margin-left: auto; color: var(--faint); font-size: 11px; }

/* Skeletons de carga (contrato de arranque: 4 franjas, nunca 4 cajas vacías) */
.mn-skel {
  border-radius: var(--r-sm);
  background: var(--s2);
  border: 1px solid var(--line);
  opacity: .5;
}
.mn-skel--cinta { height: 44px; }

/* =================================================================
   LAYOUT · 2 columnas (main fluido + riel sticky de 326px)
   ================================================================= */
.mn-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 326px;
  grid-template-rows: minmax(0, 1fr);
  gap: 18px;
  align-items: stretch;
  flex: 1 1 auto;
}
.mn-main { min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.mn-aside {
  position: sticky;
  top: 12px;
  align-self: start;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* =================================================================
   CARD · superficie negra + hairline. La firma minimalista.
   ================================================================= */
.mn-card {
  background: var(--s1);
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  box-shadow: 0 8px 30px -18px rgba(0, 0, 0, .8);
}
.mn-card-hd {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 56px;
  padding: 0 16px;
  background: transparent;
  color: var(--txt-2);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .15em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--line);
}
.mn-card-hd-ico {
  font-size: 15px;
  line-height: 1;
  flex-shrink: 0;
  width: 26px; height: 26px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--r-sm);
  background: var(--red-soft);
  border: 1px solid var(--red-line);
}
.mn-card-hd-title {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mn-card-hd-count { color: var(--faint); font-weight: 800; letter-spacing: .02em; }
.mn-card-bd { padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; }

/* Headers clickeables — API ÚNICA de colapso (data-mn-collapse) */
.mn-card-hd.mn-sec-toggle,
.mn-card-hd.mn-ops-head { cursor: pointer; user-select: none; transition: background var(--ease), color var(--ease); }
.mn-card-hd.mn-sec-toggle:hover,
.mn-card-hd.mn-ops-head:hover { background: var(--red-softer); color: var(--txt); }
.mn-card-hd .mn-sec-chevron { color: var(--muted); font-size: 11px; transition: transform var(--ease), color var(--ease); }
.mn-card-hd:hover .mn-sec-chevron { color: var(--red); }
.mn-card-hd.is-collapsed .mn-sec-chevron { transform: rotate(-90deg); }

/* =================================================================
   F3a · CTA ÚNICA (NUEVA VENTA) — 96px, ancho completo, gradiente rojo.
   F3b · 3 acciones secundarias de 56px, superficie neutra, sin color.
   ================================================================= */
.mn-hero-row { display: block; width: 100%; }
.mn-hero {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 96px;
  padding: 14px 22px;
  border-radius: var(--r);
  text-decoration: none;
  color: var(--txt);
  border: 1px solid var(--line-2);
  background: var(--s2);
  transition: transform var(--ease), border-color var(--ease), background var(--ease), box-shadow var(--ease);
}
.mn-hero > * { position: relative; z-index: 1; }
.mn-hero:hover {
  transform: translateY(-2px);
  border-color: var(--red-line);
  background: var(--s3);
  box-shadow: 0 14px 34px -20px rgba(0, 0, 0, .9);
}
.mn-hero-ico {
  flex-shrink: 0;
  width: 46px; height: 46px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--r-sm);
  font-size: 28px;
  line-height: 1;
  background: rgba(255, 255, 255, .16);
  border: 1px solid rgba(255, 255, 255, .28);
}
.mn-hero-text { min-width: 0; display: flex; flex-direction: column; justify-content: center; }
.mn-hero-h1 { font-size: 20px; font-weight: 900; letter-spacing: .02em; line-height: 1.1; text-transform: uppercase; }
.mn-hero-h2 { font-size: 13.5px; color: var(--muted); margin-top: 3px; }
.mn-hero-arrow { flex-shrink: 0; margin-left: auto; font-size: 20px; color: var(--faint); transition: transform var(--ease), color var(--ease); }
.mn-hero:hover .mn-hero-arrow { transform: translateX(4px); color: var(--red); }

/* La CTA: el único rojo con GRADIENTE del tablero */
.mn-hero--primary {
  background: linear-gradient(135deg, var(--red) 0%, var(--red-core) 52%, var(--red-deep) 100%);
  border-color: rgba(255, 255, 255, .14);
  color: #fff;
  box-shadow: 0 14px 38px -16px var(--red-glow);
}
.mn-hero--primary .mn-hero-h2 { color: rgba(255, 255, 255, .82); }
.mn-hero--primary .mn-hero-arrow { color: rgba(255, 255, 255, .8); }
.mn-hero--primary:hover { border-color: rgba(255, 255, 255, .22); box-shadow: 0 20px 48px -14px var(--red-glow); }
.mn-hero--primary:hover .mn-hero-arrow { color: #fff; }
.mn-hero--wide { width: 100%; }

/* --- F3b · 3 tiles neutros de 56px --- */
.mn-acciones-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
/* OJO: el wrapper NO puede llevar transform/overflow/filter/contain — adentro
   vive el overlay position:fixed de ConsultaPrecioModal y se re-parentaría. */
.mn-acc-tile { display: flex; min-width: 0; }
.mn-acc {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 56px;
  padding: 0 14px;
  border-radius: var(--r-sm);
  text-decoration: none;
  color: var(--txt);
  background: var(--s2);
  border: 1px solid var(--line);
  transition: border-color var(--ease), background var(--ease);
}
.mn-acc:hover { border-color: var(--red-line); background: var(--s3); }
.mn-acc-ico { font-size: 20px; line-height: 1; flex-shrink: 0; }
.mn-acc-txt { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; font-weight: 800; }

/* ConsultaPrecioModal (<button.cp-trigger>) reestilado a tile secundario */
.mn-acc-tile .cp-trigger {
  all: unset;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 56px;
  padding: 0 14px;
  border-radius: var(--r-sm);
  cursor: pointer;
  border: 1px solid var(--line);
  background: var(--s2);
  color: var(--txt);
  font-family: inherit;
  transition: border-color var(--ease), background var(--ease);
}
.mn-acc-tile .cp-trigger:hover { border-color: var(--red-line); background: var(--s3); }
.mn-acc-tile .cp-trigger:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
.mn-acc-tile .cp-trigger-ico { width: auto; height: auto; font-size: 20px; line-height: 1; background: transparent; border: 0; padding: 0; margin: 0; }
.mn-acc-tile .cp-trigger-txt { font-size: 15px; font-weight: 800; margin: 0; letter-spacing: 0; }
.mn-acc-tile .cp-trigger-sub { display: none; }

/* =================================================================
   F4 · TURNO STRIP — altura FIJA, 4 tiles, mismo layout para todo rol.
   PROHIBIDO cualquier estado de alerta acá: las alertas viven en la cinta.
   ================================================================= */
.mn-turnostrip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  height: 140px;
}
.mn-turnostrip--dos { grid-template-columns: repeat(2, 1fr); }
.mn-ts-tile {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  min-width: 0;
  padding: 0 16px;
  border-radius: var(--r);
  text-decoration: none;
  color: var(--txt);
  background: var(--s2);
  border: 1px solid var(--line);
  transition: border-color var(--ease), background var(--ease);
}
a.mn-ts-tile:hover { border-color: var(--red-line); background: var(--s3); }
.mn-ts-lbl { font-size: 11px; color: var(--muted); font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.mn-ts-val {
  font-size: 30px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mn-ts-val--txt { font-size: 15px; font-weight: 800; line-height: 1.25; white-space: normal; }
.mn-ts-sub { font-size: 11px; color: var(--faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mn-ts-bar { height: 4px; border-radius: 999px; background: rgba(255, 255, 255, .07); overflow: hidden; }
.mn-ts-bar > i { display: block; height: 100%; border-radius: 999px; background: var(--red-core); }

/* =================================================================
   F4b · LOS TRES COPROTAGONISTAS — cronograma · inventario · compras.
   -----------------------------------------------------------------
   Pedido del dueño (2026-08-01): "agregá los botones que hicimos para
   escritorio, que haya paridad ahí". Ver la ENMIENDA AL CONTRATO en
   Pages/Menu.razor: no son alertas (cinta), no son cola (bandeja) y no
   son novedad (riel), así que el contrato se amplía en vez de forzarlos.

   ⚠️ CÓMO ESTO NO ROMPE LOS PRESUPUESTOS:
     · CERO RELLENO ROJO. Los dos rojos siguen siendo el gradiente de la
       CTA y la banda plana de P0. Lo urgente se marca EXACTAMENTE como
       los chips P1-P4: superficie --s2, hairline --red-line y un punto
       de 6px. Nada de fondo, nada de matiz nuevo.
     · SEVERIDAD POR OPACIDAD Y PESO, NUNCA POR MATIZ. La línea de estado
       NO tiene verde ni ámbar (están prohibidos): "todo al día" va en
       --faint, "hay algo" en --txt-2 y "urge" en --txt con peso. En el
       celular esas mismas tres situaciones sí van con color porque MNX
       tiene otra paleta — la FRASE es la misma (CoproCopy), el matiz no.
     · CERO ANIMACIÓN IDLE. Entrada: la hereda de `.mn-main > *`, que
       ocurre una vez y termina. Hover/press: respuesta al dedo, ídem.
     · 2 radios (--r tarjeta, --r-sm chips) y alturas del contrato (44 en
       el encabezado, 28 en los chips de paso).

   ⚠️ LA BARRA SE ANIMA CON scaleX Y EL VALOR ENTRA POR `transform` INLINE
   desde el servidor, ya formateado en cultura INVARIANTE (CoproCopy.Fraccion).
   Con la coma decimal de es-AR, `scaleX(0,7)` no lo parsea ningún navegador y
   la barra se queda en cero sin un solo error en la consola.
   ================================================================= */
/* ⚠️ `auto-fit` + minmax, NO `repeat(3, 1fr)`: con tres columnas fijas, en una
   ventana angosta cada tarjeta queda en ~190px y ahí entra el título y nada
   más — o sea vuelve a ser una baldosa con otro tamaño, que es justo lo que
   estos botones no son. Con auto-fit pasa sola a 2 y a 1 columna, y como son
   TRES ítems nunca se abre una cuarta columna vacía (auto-fit las colapsa). */
.mn-copros {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px;
  align-items: start;
}
.mn-copro {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  padding: 14px 16px 15px;
  border-radius: var(--r);
  text-decoration: none;
  color: var(--txt);
  background: var(--s2);
  border: 1px solid var(--line);
  transition: transform 140ms var(--ease), border-color var(--ease), background var(--ease);
}
.mn-copro:hover { border-color: var(--red-line); background: var(--s3); transform: translateY(-1px); }
.mn-copro:active { transform: scale(.985); }
/* URGENTE = hay algo parado esperando a una persona. Hairline + punto, como
   los chips de la cinta. Sin pulso: un cartel que late durante un turno de
   ocho horas se vuelve ruido a los diez minutos. */
.mn-copro.is-urg { border-color: var(--red-line); }
.mn-copro.is-urg .mn-copro-tit::after {
  content: "";
  display: inline-block;
  width: 6px; height: 6px;
  margin-left: 8px;
  border-radius: 50%;
  background: var(--red);
  vertical-align: middle;
}

.mn-copro-hd { display: flex; align-items: center; gap: 12px; min-height: 44px; }
.mn-copro-ico {
  flex: 0 0 auto;
  width: 36px; height: 36px;
  border-radius: var(--r-sm);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 18px; line-height: 1;
  background: var(--red-softer);
}
.mn-copro-tt { flex: 1 1 auto; min-width: 0; }
.mn-copro-tit { display: block; font-size: 15px; font-weight: 800; line-height: 1.2; }
/* Dos líneas y corta: el estado es una frase de una oreja, no un párrafo.
   Sin el clamp, "Lo próximo 14:00 · Reponer la góndola de bebidas de la
   fiambrería" desbalancea las tres tarjetas de la fila. */
.mn-copro-est {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-top: 3px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--txt-2);
}
.mn-copro-est.ok { color: var(--faint); }
.mn-copro-est.avisa { color: var(--txt-2); }
.mn-copro-est.urge { color: var(--txt); font-weight: 800; }
.mn-copro-ir { flex: 0 0 auto; color: var(--faint); font-size: 14px; line-height: 1; }

.mn-copro-bar { height: 4px; border-radius: 999px; background: rgba(255, 255, 255, .07); overflow: hidden; }
.mn-copro-bar > i {
  display: block; height: 100%; width: 100%; border-radius: 999px;
  background: var(--red-core);
  transform-origin: left center;
  transition: transform 420ms cubic-bezier(.05, .7, .1, 1);
}

.mn-copro-pasos { display: flex; flex-wrap: wrap; gap: 6px; }
.mn-copro-paso {
  display: inline-flex; align-items: center; gap: 5px;
  min-height: 28px;
  padding: 0 9px;
  border-radius: var(--r-sm);
  background: var(--s1);
  border: 1px solid var(--line);
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
}
.mn-copro-paso b { color: var(--txt); font-weight: 800; font-variant-numeric: tabular-nums; }
/* "Vivo" = todavía espera a alguien. Se marca con el hairline, no con relleno. */
.mn-copro-paso.is-vivo { border-color: var(--red-line); color: var(--txt-2); }
.mn-copro-paso.is-ok b { color: var(--txt-2); }
/* La consecuencia de dejarlo así. Un número sin consecuencia no mueve a nadie. */
.mn-copro-por { font-size: 12px; line-height: 1.4; color: var(--faint); }

/* =================================================================
   F5 · BANDEJA DE TRABAJO — 0px en reposo, máx 240px con scroll propio.
   NUNCA empuja el resto de la página.
   ================================================================= */
.mn-bandeja {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 240px;
  overflow-y: auto;
}
.mn-bandeja[hidden] { display: none; }
.mn-bandeja-sec { display: flex; flex-direction: column; gap: 6px; }
.mn-bandeja-hd {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 36px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--muted);
}
.mn-bandeja-hd-num { color: var(--txt); font-variant-numeric: tabular-nums; }
.mn-bandeja-mute {
  all: unset;
  margin-left: auto;
  padding: 4px 8px;
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
  color: var(--muted);
  font-size: 13.5px;
  cursor: pointer;
  transition: color var(--ease), border-color var(--ease);
}
.mn-bandeja-mute:hover { color: var(--txt); border-color: var(--red-line); }

/* --- fila de pedido web (44px) --- */
.mn-pw {
  border-radius: var(--r-sm);
  background: var(--s2);
  border: 1px solid var(--line);
  overflow: hidden;
}
.mn-pw > summary {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 0 12px;
  cursor: pointer;
  list-style: none;
  font-size: 13.5px;
  color: var(--txt-2);
}
.mn-pw > summary::-webkit-details-marker { display: none; }
.mn-pw > summary:hover { background: var(--s3); color: var(--txt); }
.mn-pw-cod { font-weight: 800; color: var(--txt); font-family: ui-monospace, monospace; flex-shrink: 0; }
.mn-pw-age { color: var(--faint); font-size: 11px; flex-shrink: 0; }
/* El HORARIO PEDIDO va en la fila visible: es el campo que define el orden de
   trabajo. Adentro del <details> el pedido de las 20:00 y el "lo antes posible"
   se leen idénticos. */
.mn-pw-hora {
  flex-shrink: 0;
  padding: 2px 9px;
  border-radius: 999px;
  border: 1px solid var(--line-2);
  color: var(--txt);
  font-size: 11px;
  font-weight: 800;
}
.mn-pw-cli { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mn-pw-total { font-weight: 800; color: var(--txt); font-variant-numeric: tabular-nums; flex-shrink: 0; }
.mn-pw-acts { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.mn-pw-btn {
  display: inline-flex;
  align-items: center;
  padding: 6px 11px;
  border-radius: var(--r-sm);
  text-decoration: none;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  border: 1px solid var(--red-line);
  background: var(--red-soft);
  color: var(--txt);
  transition: background var(--ease);
}
.mn-pw-btn:hover { background: var(--s3); }
.mn-pw-btn--sec { border-color: var(--line-2); background: transparent; color: var(--txt-2); }
.mn-pw-det {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 12px;
  border-top: 1px solid var(--line);
  font-size: 13.5px;
  color: var(--txt-2);
}
.mn-pw-datos { display: flex; flex-wrap: wrap; gap: 4px 14px; }
.mn-pw-items { display: flex; flex-direction: column; gap: 1px; padding-left: 10px; border-left: 2px solid var(--line-2); color: var(--muted); }
.mn-pw-mas { color: var(--faint); }

/* --- fila del radar de asignación --- */
.mn-bandeja-row {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 0 12px;
  border-radius: var(--r-sm);
  text-decoration: none;
  background: var(--s2);
  border: 1px solid var(--line);
  color: var(--txt-2);
  font-size: 13.5px;
  transition: border-color var(--ease), background var(--ease), color var(--ease);
}
.mn-bandeja-row:hover { border-color: var(--red-line); background: var(--s3); color: var(--txt); }
.mn-bandeja-row-ico { font-size: 15px; line-height: 1; flex-shrink: 0; }
.mn-bandeja-row-txt { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mn-bandeja-row-go { color: var(--faint); flex-shrink: 0; }

/* =================================================================
   F6a · BUSCADOR (56px) — mismo evento que Ctrl+K del BuscadorGlobal.
   ================================================================= */
.mn-buscador-hero {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 56px;
  padding: 0 18px;
  background: var(--s2);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  cursor: pointer;
  user-select: none;
  transition: border-color var(--ease), background var(--ease);
}
.mn-buscador-hero:hover,
.mn-buscador-hero:focus-visible { background: var(--s3); border-color: var(--red-line); outline: none; }
.mn-bh-ico { font-size: 20px; flex-shrink: 0; }
.mn-bh-txt { flex: 1; color: var(--muted); font-size: 15px; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mn-bh-kbd { display: inline-flex; gap: 4px; flex-shrink: 0; }
.mn-bh-kbd kbd {
  background: var(--red-soft);
  border: 1px solid var(--red-line);
  border-radius: 6px; padding: 2px 7px;
  font-size: 11px; font-weight: 800;
  color: var(--txt);
  font-family: ui-monospace, monospace;
}

/* =================================================================
   F6b · EXPLORÁ POR ÁREA — única superficie de descubrimiento del main.
   ================================================================= */
.mn-card--areas { display: flex; flex-direction: column; }
.mn-card--areas:not(:has(.mn-areas.is-collapsed)) { flex: 1 1 auto; }
.mn-card--areas .mn-areas { flex: 1 1 auto; }
.mn-areas {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 10px;
  padding: 14px 16px;
  transition: max-height 200ms var(--ease), opacity 200ms, padding 200ms;
  max-height: 2000px;
  opacity: 1;
  align-content: stretch;
}
.mn-areas.is-collapsed { max-height: 0; padding-top: 0; padding-bottom: 0; overflow: hidden; opacity: 0; pointer-events: none; }
.mn-area {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: 84px;
  max-height: 150px;
  padding: 14px 16px;
  border-radius: var(--r);
  text-decoration: none;
  color: var(--txt);
  background: var(--s2);
  border: 1px solid var(--line);
  overflow: hidden;
  transition: transform var(--ease), border-color var(--ease), background var(--ease);
}
.mn-area::after {
  content: "→";
  position: absolute; top: 13px; right: 14px;
  font-size: 15px; color: var(--faint);
  opacity: 0; transform: translateX(-4px);
  transition: opacity var(--ease), transform var(--ease), color var(--ease);
}
.mn-area:hover { transform: translateY(-2px); border-color: var(--red-line); background: var(--s3); }
.mn-area:hover::after { opacity: 1; transform: translateX(0); color: var(--red); }
.mn-area-ico {
  font-size: 20px; line-height: 1; margin-bottom: 3px;
  width: 34px; height: 34px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--r-sm);
  background: var(--red-soft); border: 1px solid var(--red-line);
}
.mn-area-tit { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 800; line-height: 1.2; }
.mn-area-sub { font-size: 11px; color: var(--muted); line-height: 1.35; }
.mn-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; padding: 1px 7px;
  border-radius: 999px;
  background: var(--red-core); color: #fff;
  font-size: 11px; font-weight: 800; line-height: 1.4;
}

/* =================================================================
   TODO EL SISTEMA — se conserva SOLO por la línea "🔒 Con permiso: …",
   que es la única superficie donde el candado enseña una capacidad que
   existe pero no está habilitada. Arranca COLAPSADO (antes ocupaba
   ~510px abiertos por default) y usa la misma API de colapso.
   ================================================================= */
.mn-card--sistema .mn-sis {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 10px; padding: 12px;
  transition: max-height 200ms var(--ease), opacity 200ms, padding 200ms;
  max-height: 3000px; opacity: 1;
}
.mn-card--sistema .mn-sis.is-collapsed { max-height: 0; padding-top: 0; padding-bottom: 0; overflow: hidden; opacity: 0; pointer-events: none; }
.mn-sis-sec { background: var(--s2); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 12px 14px; }
.mn-sis-hd { display: flex; align-items: baseline; gap: 8px; margin-bottom: 9px; }
.mn-sis-hd b { font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.mn-sis-count { font-size: 11px; font-weight: 800; padding: 1px 7px; border-radius: 999px; background: var(--s3); color: var(--faint); }
.mn-sis-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.mn-sis-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 11px; border-radius: var(--r-sm); text-decoration: none;
  font-size: 13.5px; color: var(--txt-2);
  background: var(--s1); border: 1px solid var(--line);
  transition: border-color var(--ease), color var(--ease);
}
.mn-sis-chip:hover { border-color: var(--red-line); color: var(--txt); }
.mn-sis-chip .nuevo {
  font-size: 11px; font-weight: 800;
  color: var(--red);
  border: 1px solid var(--red-line);
  padding: 0 5px; border-radius: 6px;
}
.mn-sis-lock {
  margin-top: 9px; padding-top: 8px;
  border-top: 1px dashed var(--line);
  font-size: 11px; color: var(--faint); line-height: 1.5;
  cursor: help;
}

/* =================================================================
   F7 · TIP — 40px, una línea, cierre visual. Conserva los atajos
   F1-F4 porque los bindings existen de verdad (_Host.cshtml) y este
   es su ÚNICA superficie de descubrimiento.
   ================================================================= */
.mn-footer-tip {
  display: flex;
  align-items: center;
  margin-top: auto;
  gap: 10px;
  min-height: 40px;
  padding: 8px 16px;
  border-radius: var(--r-sm);
  border: 1px dashed var(--line);
  background: var(--ink-2);
  font-size: 11px;
  color: var(--muted);
  line-height: 1.55;
}
.mn-footer-tip-ico { flex-shrink: 0; }
.mn-footer-tip kbd {
  background: var(--s2); color: var(--txt-2);
  padding: 1px 6px; border-radius: 6px;
  border: 1px solid var(--line);
  font-family: ui-monospace, monospace; font-size: 11px; font-weight: 800; margin: 0 1px;
}
.mn-footer-tip a { color: var(--red); font-weight: 800; text-decoration: none; }
.mn-footer-tip a:hover { text-decoration: underline; }
.mn-footer-tip-mapa { margin-left: auto; flex-shrink: 0; }

/* =================================================================
   RIEL · tiles de 72px (ranking / portal) + operativos de 36px.
   Todo lo que sea INFO / NOVEDAD / GAMIFICACIÓN entra acá como tile.
   ================================================================= */
.mn-riel-tile {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 72px;
  padding: 0 14px;
  border-radius: var(--r);
  text-decoration: none;
  background: var(--s1);
  border: 1px solid var(--line);
  color: var(--txt);
  transition: border-color var(--ease), background var(--ease);
}
.mn-riel-tile:hover { border-color: var(--red-line); background: var(--s2); }
.mn-riel-ico { font-size: 20px; line-height: 1; flex-shrink: 0; }
.mn-riel-img { width: 38px; height: 38px; flex-shrink: 0; border-radius: var(--r-sm); object-fit: contain; background: #fff; padding: 2px; }
.mn-riel-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.mn-riel-lbl { font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.mn-riel-tit { font-size: 15px; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mn-riel-sub { font-size: 11px; color: var(--faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mn-riel-num { font-size: 30px; font-weight: 900; line-height: 1; font-variant-numeric: tabular-nums; flex-shrink: 0; }
.mn-riel-nav { display: flex; flex-direction: column; gap: 2px; flex-shrink: 0; }
.mn-riel-navbtn {
  all: unset;
  width: 22px; height: 20px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 6px;
  border: 1px solid var(--line);
  color: var(--muted);
  font-size: 11px;
  cursor: pointer;
  transition: color var(--ease), border-color var(--ease);
}
.mn-riel-navbtn:hover { color: var(--txt); border-color: var(--red-line); }
/* Portal con recomendación climática URGENTE: sube de tono sin cambiar de matiz */
.mn-riel-tile--urg { border-color: var(--red-line); }

.mn-ops-head { cursor: pointer; user-select: none; }
.mn-ops-list {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 6px 8px 8px;
  overflow: hidden;
  transition: max-height 200ms var(--ease), opacity 200ms, padding 200ms;
  max-height: 1200px;
  opacity: 1;
}
.mn-ops-list.is-collapsed { max-height: 0; padding-top: 0; padding-bottom: 0; opacity: 0; }
.mn-op {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 36px;
  padding: 0 9px;
  border-radius: var(--r-sm);
  text-decoration: none;
  color: var(--txt-2);
  font-size: 13.5px;
  border-left: 2px solid transparent;
  transition: background var(--ease), color var(--ease), border-color var(--ease), padding-left var(--ease);
}
.mn-op:hover { background: var(--red-softer); color: var(--txt); border-left-color: var(--red); padding-left: 12px; }
.mn-op-ico { font-size: 15px; width: 18px; text-align: center; flex-shrink: 0; }
.mn-op-lbl { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mn-op-badge {
  min-width: 16px; padding: 0 6px; border-radius: 999px;
  background: var(--s3); color: var(--txt);
  font-size: 11px; font-weight: 800; text-align: center;
}
.mn-op-badge--danger { background: var(--red-core); color: #fff; }
.mn-op-badge--warning { background: var(--s3); color: var(--txt-2); }
.mn-op-tag {
  background: transparent; color: var(--red);
  font-size: 11px; font-weight: 800; padding: 0 6px;
  border: 1px solid var(--red-line); border-radius: 6px;
}

/* =================================================================
   F0 · AVISO FLOTANTE (venta confirmada / toast) — uno por vez.
   ================================================================= */
.mn-aviso {
  position: fixed;
  top: 14px; left: 50%; transform: translateX(-50%);
  z-index: var(--z-toast, 130);
  display: flex; align-items: center; gap: 12px;
  max-width: min(560px, 94vw);
  min-height: 44px;
  padding: 10px 16px;
  border-radius: var(--r);
  background: var(--s1);
  border: 1px solid var(--red-line);
  box-shadow: 0 24px 60px -20px rgba(0, 0, 0, .9);
  cursor: pointer;
  color: var(--txt);
  font-size: 13.5px;
}
.mn-aviso-ico { font-size: 22px; line-height: 1; flex-shrink: 0; }
.mn-aviso-txt { flex: 1; min-width: 0; }
.mn-aviso-tit { font-size: 15px; font-weight: 800; color: var(--txt); }
.mn-aviso-sub { font-size: 11px; color: var(--muted); }
.mn-aviso-btn {
  text-decoration: none; font-size: 11px; font-weight: 800;
  letter-spacing: .08em; text-transform: uppercase;
  color: #fff; background: var(--red-core);
  padding: 7px 12px; border-radius: var(--r-sm);
  border: 1px solid var(--red-line);
  flex-shrink: 0;
}
.mn-aviso-x { background: transparent; border: 0; color: var(--faint); font-size: 15px; cursor: pointer; flex-shrink: 0; }
.mn-aviso-x:hover { color: var(--txt); }

/* =================================================================
   SUPER-ADAPTATIVO · 4K → teléfono
   ================================================================= */
@media (min-width: 1700px) { .mn-grid { grid-template-columns: minmax(0, 1fr) 346px; } }
@media (max-width: 1320px) { .mn-grid { grid-template-columns: minmax(0, 1fr) 304px; } }
@media (max-width: 1120px) {
  .mn-grid { grid-template-columns: minmax(0, 1fr) 284px; }
  .mn-areas { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
}
@media (max-width: 960px) {
  /* Sin "Todo el sistema" abierto en el medio, el riel cae justo después de
     Explorá por área (~700px de scroll, no ~2000px). */
  .mn-home { min-height: 0; display: block; }
  .mn-grid { grid-template-columns: 1fr; display: flex; flex-direction: column; }
  .mn-aside { position: static; }
  .mn-card--areas, .mn-card--areas:not(:has(.mn-areas.is-collapsed)) { flex: 0 0 auto; }
  .mn-card--areas .mn-areas { flex: 0 0 auto; }
  .mn-areas { align-content: start; }
  .mn-area { max-height: none; }
  .mn-footer-tip { margin-top: 12px; }
  .mn-ops-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 4px; }
}
@media (max-width: 760px) { .mn-bh-kbd { display: none; } }
@media (max-width: 640px) {
  .mn-home { padding: 12px; }
  .mn-acciones-3 { grid-template-columns: 1fr; }
  .mn-turnostrip { grid-template-columns: 1fr 1fr; height: auto; }
  .mn-ts-tile { min-height: 72px; padding: 12px 14px; }
  /* `.mn-copros` NO se redeclara acá: el auto-fit ya cae solo a 1 columna. Una
     segunda declaración del mismo selector es exactamente cómo mnx.css terminó
     con reglas muertas que nadie sabía por qué no hacían nada. */
  .mn-footer-tip { display: none; }
  .mn-areas { grid-template-columns: 1fr; }
  .mn-ops-list { grid-template-columns: 1fr 1fr; }
  .mn-pw-acts .mn-pw-btn--sec { display: none; }
}
@media (max-width: 420px) {
  .mn-ops-list { grid-template-columns: 1fr; }
  .mn-head-title { font-size: 20px; }
}

/* =============================================================================
   v5 · PULIDO  —  excelencia visual sin romper el contrato NOIR OPERATIVO
   -----------------------------------------------------------------------------
   La regla de "UNA sola animación idle en toda la página" SIGUE EN PIE y no se
   toca: el único movimiento perpetuo es el punto del chip P0. Esa regla existe
   porque el movimiento que no para compite con la alerta que sí importa.
   Lo que NO prohíbe —y es donde entra todo lo de acá— es el movimiento que
   OCURRE UNA VEZ y termina: la página que se arma al entrar, y la respuesta al
   dedo o al mouse. Eso no compite con nada porque a los 400ms ya no está.

   Criterio para cada regla de abajo: si no ayuda a ENTENDER algo (qué llegó
   primero, qué es tocable, qué se abrió, qué cambió), no va.
   ============================================================================= */

/* ── 5.1 · La página se ARMA, no aparece de golpe ──────────────────────────
   Las franjas entran en el orden del contrato (F1→F7). No es decoración: el
   escalonado le enseña al ojo la jerarquía de la pantalla en el primer segundo
   —primero lo urgente, después lo importante, al final lo explorable— y es
   justo el orden en el que conviene leerla.

   SEGURIDAD: `both` deja el estado final fijo, y con prefers-reduced-motion
   (o si la animación no corre) el elemento queda en su estilo normal, que es
   VISIBLE. Nada acá puede esconder contenido. */
@keyframes mnEntra {
  from { opacity: 0; transform: translateY(9px); }
  to   { opacity: 1; transform: none; }
}
/* Sin desplazamiento: para los contenedores que envuelven overlays fixed. */
@keyframes mnEntraSuave {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ⚠️ REGLA HEREDADA QUE HAY QUE RESPETAR: `.mn-acc-tile` no puede llevar
   transform —adentro vive el overlay position:fixed de ConsultaPrecioModal y
   un transform en cualquier ANCESTRO lo convierte en su bloque contenedor, así
   que el modal se re-parentaría—. Por eso el nivel de afuera (.mn-home > *,
   que incluye a .mn-grid) y la fila de acciones entran SOLO con opacidad.
   El translateY queda para las franjas que no envuelven ningún overlay. */
.mn-home > *,
.mn-acciones-3 {
  animation: mnEntraSuave 380ms cubic-bezier(.05, .7, .1, 1) both;
}
.mn-main > * {
  animation: mnEntra 380ms cubic-bezier(.05, .7, .1, 1) both;
}
.mn-main > .mn-acciones-3 {
  animation: mnEntraSuave 380ms cubic-bezier(.05, .7, .1, 1) both;
}
/* Cascada corta: 45ms entre franjas. Más lento se siente perezoso en una
   pantalla que el vendedor abre cien veces por turno. */
.mn-main > *:nth-child(1) { animation-delay: 30ms; }
.mn-main > *:nth-child(2) { animation-delay: 75ms; }
.mn-main > *:nth-child(3) { animation-delay: 120ms; }
.mn-main > *:nth-child(4) { animation-delay: 165ms; }
.mn-main > *:nth-child(5) { animation-delay: 210ms; }
.mn-main > *:nth-child(n+6) { animation-delay: 250ms; }
/* El riel entra apenas después que el main: primero lo que hacés, después lo
   que mirás. */
.mn-riel > * { animation: mnEntra 380ms cubic-bezier(.05, .7, .1, 1) both; animation-delay: 190ms; }

/* ── 5.2 · El colapso, honesto ─────────────────────────────────────────────
   Estaba con `max-height: 2000px` y transición de 200ms. El contenido real
   mide ~400px, así que la altura llegaba a destino en el primer 20% del tiempo:
   la sección se abría de golpe y después esperaba 160ms sin hacer nada. Se
   leía como un salto, no como una apertura.
   La percepción de "abrirse" la carga la opacidad y el desplazamiento, que sí
   recorren todo su rango; a max-height le bajamos el techo a algo realista y
   le damos una curva que desacelera. */
.mn-areas, .mn-card--sistema .mn-sis, .mn-ops-list {
  transition: max-height 260ms cubic-bezier(.05, .7, .1, 1),
              opacity 200ms ease,
              transform 260ms cubic-bezier(.05, .7, .1, 1),
              padding 200ms ease;
  transform: none;
}
.mn-areas.is-collapsed,
.mn-card--sistema .mn-sis.is-collapsed,
.mn-ops-list.is-collapsed { transform: translateY(-6px); }

/* Chevron con curva propia: gira con un toque de resorte, como una perilla
   real. Es el único feedback de "esto se abre y se cierra". */
.mn-card-hd .mn-sec-chevron { transition: transform 280ms cubic-bezier(.3, 1.2, .55, 1), color var(--ease); }

/* ── 5.3 · Respuesta al dedo ───────────────────────────────────────────────
   Había hover pero NO había estado presionado. En una pantalla táctil (varios
   la usan en tablet) el hover no existe: sin :active no hay ninguna
   confirmación de que el toque entró, y el usuario toca dos veces. */
.mn-hero, .mn-acc, .mn-area, .mn-sis-chip, .mn-buscador-hero, .mn-cinta-chip {
  transition: transform 140ms var(--ease), border-color var(--ease),
              background var(--ease), box-shadow 180ms var(--ease);
}
.mn-hero:active, .mn-acc:active, .mn-area:active,
.mn-sis-chip:active, .mn-buscador-hero:active { transform: scale(.985); }
/* La CTA es más grande: escalarla entera se siente barato, se hunde apenas. */
.mn-hero--primary:active { transform: translateY(1px) scale(.995); }

/* ── 5.4 · El hover que informa ────────────────────────────────────────────
   Un realce de 1px hacia arriba dice "esto se puede tocar" mejor que un cambio
   de color, y no gasta ninguno de los dos rojos del presupuesto. */
.mn-area:hover, .mn-acc:hover, .mn-buscador-hero:hover { transform: translateY(-1px); }

/* ── 5.5 · Toda la plata y todos los conteos, tabulares ────────────────────
   Un número que cambia (ventas del turno, pendientes, contador de la cinta) no
   puede mover de lugar lo que tiene al lado. Con cifras tabulares el ancho es
   constante y el número deja de "bailar" al actualizarse. */
.mn-home .tnum,
.mn-turnostrip [class*="valor"], .mn-turnostrip b,
.mn-cinta-chip b, .mn-sis-count, .mn-area .mn-area-badge {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* ── 5.6 · Skeleton que respira ────────────────────────────────────────────
   El skeleton es la única excepción razonable al "una sola idle": mientras
   está en pantalla NO hay contenido con el que competir, y desaparece solo
   cuando llegan los datos. Sin movimiento se lee como una caja rota. */
@keyframes mnSkel { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }
.mn-skel {
  background: linear-gradient(90deg, var(--s1) 25%, var(--s2) 37%, var(--s1) 63%);
  background-size: 400% 100%;
  animation: mnSkel 1.4s ease infinite;
}

/* ── 5.7 · Encabezados de sección: más aire, mismo peso ────────────────────
   El título de una sección y el contenido estaban al mismo nivel de contraste,
   así que la pantalla se leía como una lista larga en vez de bloques. Subir el
   tracking y bajar el color separa sin agregar líneas ni cajas. */
.mn-card-hd-title { letter-spacing: .04em; }
.mn-card-hd { transition: background var(--ease), color var(--ease); }

/* ── 5.8 · Foco de teclado sobre lo nuevo ─────────────────────────────────
   El home ya tenía focus-visible; se extiende a las superficies que se
   volvieron interactivas. Hay teclado bluetooth en los mostradores. */
.mn-home [role="button"]:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; border-radius: var(--r-sm); }

/* =================================================================
   MOTION REDUCIDA
   ================================================================= */
@media (prefers-reduced-motion: reduce) {
  .mn-home *, .mn-home *::before, .mn-home *::after,
  .mn-aviso, .mn-aviso * { animation: none !important; transition: none !important; }
  /* Sin animación de entrada el elemento usa su estilo normal, que es visible.
     Se deja explícito para que ningún parche futuro lo dé vuelta. */
  .mn-home > *, .mn-main > *, .mn-riel > * { opacity: 1 !important; transform: none !important; }
}