/* Fuentes (cargadas en App.razor): Archivo / Hanken Grotesk / JetBrains Mono. */

html, body {
    font-family: "Hanken Grotesk", system-ui, "Helvetica Neue", sans-serif;
    margin: 0;
    padding: 0;
    height: 100%;
}

h1:focus, h2:focus { outline: none; }

/* Datos, códigos de ticket e IDs en monoespaciada con cifras tabulares. */
.mk-mono {
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-feature-settings: "tnum" 1;
    letter-spacing: -0.01em;
}

/* ── AppBar ───────────────────────────────────────────────── */
.mk-appbar {
    background: var(--mk-ink) !important;
    border-bottom: 1px solid rgba(255,255,255,0.08) !important;
}

.mk-wordmark {
    font-family: "Archivo", system-ui, sans-serif;
    font-weight: 800;
    letter-spacing: 3px;
    line-height: 1;
    display: inline-block;
}

.mk-user-chip {
    color: rgba(255,255,255,0.85) !important;
    font-size: 0.8rem;
}

/* ── Drawer ───────────────────────────────────────────────── */
.mk-drawer {
    background: var(--mk-ink) !important;
    border-right: none !important;
}

.mk-drawer-logo {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 16px 12px;
}

.mk-drawer-divider {
    height: 1px;
    background: rgba(255,255,255,0.08);
    margin: 4px 16px 8px;
    flex-shrink: 0;
}

.mk-drawer .mud-drawer-content { overflow-x: hidden !important; }
.mk-drawer .mud-drawer-content > * { flex-shrink: 0; }

.mk-drawer .mud-nav-menu,
.mk-drawer .mud-nav-menu > ul {
    padding: 0 !important;
    margin: 0 !important;
    list-style: none;
    overflow-x: hidden !important;
}

.mk-drawer .mud-nav-link {
    color: var(--mk-mist) !important;
    border-radius: 8px !important;
    margin: 1px 8px !important;
    padding: 8px 12px !important;
    font-size: 0.875rem;
    min-width: 0;
    transition: all 0.18s ease;
}

.mk-drawer .mud-nav-link .mud-nav-link-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mk-drawer .mud-nav-link:hover {
    background: rgba(var(--mk-brand-rgb),0.28) !important;
    color: #fff !important;
}

.mk-drawer .mud-nav-link.active {
    background: rgba(var(--mk-brand-rgb),0.42) !important;
    color: #fff !important;
    font-weight: 600;
}

.mk-drawer .mud-nav-link .mud-icon-root {
    color: inherit !important;
    font-size: 1.15rem !important;
}

/* Cabeceras de grupo = etiquetas de sección. */
.mk-drawer .mud-nav-group .mud-nav-group-header {
    color: var(--mk-mist) !important;
    border-radius: 8px !important;
    margin: 10px 8px 2px !important;
    font-family: var(--mk-font-mono) !important;
    font-size: 0.66rem !important;
    font-weight: 500 !important;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    opacity: 0.85;
}

.mk-drawer .mud-nav-group .mud-nav-group-header:hover {
    background: rgba(var(--mk-brand-rgb),0.16) !important;
    color: #fff !important;
}

.mk-drawer .mud-nav-group .mud-collapse-container .mud-nav-link {
    margin-left: 16px !important;
    border-left: 1px solid rgba(255,255,255,0.06);
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}

/* ── Contenido ────────────────────────────────────────────── */
.mk-main-content { background: var(--mk-base) !important; }

.mk-page-wrapper {
    padding: 24px;
    min-height: calc(100vh - 64px);
}

@media (max-width: 960px) {
    .mk-page-wrapper { padding: 12px; }
}

.mud-card {
    border-radius: var(--mk-radius-lg) !important;
    box-shadow: var(--mk-shadow-sm) !important;
    border: 1px solid var(--mk-border);
}

/* Encabezado de página: título + acciones a la derecha. */
.mk-page-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

.mk-kicker {
    font-family: var(--mk-font-mono);
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--mk-muted);
}

/* Barra de ocupación de una opción del menú (cupo consumido). */
.mk-stock-bar {
    height: 8px;
    border-radius: var(--mk-radius-pill);
    background: var(--mk-divider);
    overflow: hidden;
}

.mk-stock-fill {
    height: 100%;
    background: var(--mk-brand);
    transition: width .35s ease;
}

.mk-stock-fill.is-full { background: var(--mk-clay); }
.mk-stock-fill.is-high { background: var(--mk-warning); }

/* Error global de Blazor (plantilla). */
#blazor-error-ui {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1001;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}

/* Opción de un selector con su explicación debajo (las reglas del ticket, sobre todo).
   Son decisiones que alguien toma una vez y no vuelve a mirar en meses: tres palabras
   sueltas obligan a adivinar, y adivinar mal configura mal a una empresa entera. */
.mk-opcion { display: flex; flex-direction: column; gap: 2px; padding: 4px 0; white-space: normal; }
.mk-opcion-titulo { font-weight: 600; line-height: 1.25; }
.mk-opcion-detalle { font-size: .78rem; line-height: 1.35; color: var(--mk-muted); }
.mud-list-item .mk-opcion { max-width: 520px; }

/* El mismo selector dentro de una tabla: cerrado muestra solo el nombre, y la explicación sale
   al abrirlo. La lista se dibuja fuera del selector (en el proveedor de popovers), así que esto
   no la toca. Con la explicación a la vista, cada fila crecía tres líneas para repetir algo
   que quien administra ya sabe. */
.mk-select-solo-titulo .mk-opcion { padding: 0; }
.mk-select-solo-titulo .mk-opcion-titulo { font-weight: inherit; }
.mk-select-solo-titulo .mk-opcion-detalle { display: none; }

/* Opciones de un grupo en vertical. El Class de MudRadioGroup cae en el contenedor de afuera,
   así que apilarlas desde ahí no hace nada: hay que tomar el radiogroup, que es quien tiene a
   las opciones como hijas. Dos opciones con texto largo en una línea se leen como una frase
   corrida. */
.mk-radio-vertical .mud-radio-group {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
}

/* --- Marca --- */
.mk-marca { width: auto; display: block; }

/* --- Lista de inscritos --- */

/* «Para llevar» cambia lo que hace la cocina con el plato: tiene que verse de lejos, no
   adivinarse en un ícono gris. */
.mk-llevar {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--mk-clay);
  color: #fff;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .06em;
  white-space: nowrap;
}

/* Lo que la persona pidió al anotarse. Se lee o se sirve mal el plato, así que va con el
   mismo peso que su nombre y no como una nota al pie. */
.mk-observacion {
  margin-top: 3px;
  padding: 2px 8px;
  border-left: 3px solid var(--mk-clay);
  background: rgba(194, 65, 12, .07);
  border-radius: 0 4px 4px 0;
  font-size: .82rem;
  color: var(--mk-ink);
  display: inline-block;
}

/* Separador de empresa: ordenar por empresa sin una línea que las separe se ve igual que no
   ordenar nada. */
.mk-grupo td {
  background: var(--mk-divider);
  font-weight: 700;
  font-size: .78rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding-top: 10px !important;
  padding-bottom: 6px !important;
}

.mk-grupo-cuenta {
  float: right;
  font-family: var(--mk-font-mono);
  font-weight: 500;
  opacity: .6;
}

/* Los números de la pantalla en vivo: alineados a la derecha, que es como se comparan. */
.mk-num { text-align: right; }

/* Los seis números del día, en fila y con espacio de sobra: se leen de un vistazo desde un
   par de metros, que es la distancia real a la que se mira esta pantalla. */
.mk-numeros {
  display: flex;
  flex-wrap: wrap;
  gap: 28px 44px;
}

.mk-numero {
  font-family: var(--mk-font-mono);
  font-size: 2.1rem;
  font-weight: 700;
  line-height: 1.1;
}

/* El número de opción: en Makki los platos se nombran así («hoy la 1 es cazuela»), por eso
   se lee antes que el nombre y no como un dato secundario. */
.mk-opcion-num {
  display: inline-block;
  padding: 3px 10px;
  border-radius: var(--mk-radius-pill);
  background: rgba(var(--mk-brand-rgb), .10);
  color: var(--mk-brand);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* ── La barra de la semana ────────────────────────────── */
.mk-semana-barra {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding: 10px 14px;
  margin-bottom: 14px;
  border: 1px solid var(--mk-border);
  border-radius: var(--mk-radius-md);
  background: #fff;
}

.mk-semana-titulo { text-align: center; min-width: 168px; }

.mk-semana-num {
  font-family: var(--mk-font-display);
  font-size: 1.15rem;
  font-weight: 800;
  line-height: 1.1;
  color: var(--mk-ink);
}

.mk-semana-rango {
  font-size: .78rem;
  letter-spacing: .04em;
  color: var(--mk-muted);
  font-variant-numeric: tabular-nums;
}

.mk-semana-dato { font-size: .85rem; color: var(--mk-muted); }
.mk-semana-dato span { font-weight: 800; color: var(--mk-ink); }

/* ── Fotos de los platos ──────────────────────────────── */
/* La vista previa del diálogo: un cuadro fijo, para que el diálogo no salte de alto al elegir
   una foto, y recortada como se verá en el link del menú. */
.mk-plato-foto {
  flex: none;
  width: 96px;
  height: 96px;
  border-radius: var(--mk-radius-md);
  border: 1px solid var(--mk-border);
  background: var(--mk-base);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mk-plato-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* La miniatura de la grilla. La celda va angosta: sin foto, la columna casi no ocupa. */
.mk-plato-mini-celda { width: 52px; padding-right: 0 !important; }
.mk-plato-mini {
  display: block;
  width: 36px;
  height: 36px;
  object-fit: cover;
  border-radius: var(--mk-radius-sm);
  background: var(--mk-base);
}

/* ── Vender: el stock en vivo y la venta ─────────────────── */

/* Ancha como «Entregar»: las tarjetas y, al costado, lo vendido hoy. En una pantalla angosta lo
   vendido baja al final. */
.mk-vender { max-width: 1320px; margin: 0 auto; }

.mk-vender-cuerpo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 16px;
  align-items: start;
}

/* En el PC chico del mostrador (1280, 1366) lo vendido cede ancho: las tarjetas son lo que se mira. */
@media (max-width: 1400px) {
  .mk-vender-cuerpo { grid-template-columns: minmax(0, 1fr) 280px; }
}

@media (max-width: 1100px) {
  .mk-vender-cuerpo { grid-template-columns: minmax(0, 1fr); }
}

/* «En vivo»: el punto late mientras los números llegan; si dejan de llegar, se apaga en ámbar. */
.mk-envivo {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: .82rem;
  color: var(--mk-muted);
  white-space: nowrap;
}

.mk-envivo-texto {
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--mk-success);
}

.mk-envivo-punto {
  position: relative;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--mk-success);
}

.mk-envivo-punto::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--mk-success);
  animation: mk-envivo-late 1.6s ease-out infinite;
}

@keyframes mk-envivo-late {
  from { transform: scale(1); opacity: .6; }
  to { transform: scale(2.8); opacity: 0; }
}

.mk-envivo.is-viejo .mk-envivo-punto,
.mk-envivo.is-viejo .mk-envivo-punto::after { background: var(--mk-warning); animation: none; }
.mk-envivo.is-viejo .mk-envivo-texto { color: #b45309; }

/* En la caja: «En vivo», el stock de Bsale y «Actualizar», en una sola barra. */
.mk-envivo.is-barra {
  gap: 8px; padding: 2px 3px 2px 10px; border: 1px solid var(--mud-palette-lines-default);
  border-radius: var(--mk-radius-pill); background: var(--mud-palette-surface); font-size: 12px;
}
.mk-envivo-estado { display: inline-flex; align-items: center; gap: 6px; }
.mk-envivo-stock-viejo { color: #b45309; font-weight: 600; }
.mk-envivo-leer {
  display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px; cursor: pointer;
  border: 0; border-radius: var(--mk-radius-pill); background: rgba(var(--mk-brand-rgb), .07);
  color: var(--mk-ink); font: inherit; font-size: 12px; font-weight: 600;
}
.mk-envivo-leer:hover:not(:disabled) { background: rgba(var(--mk-brand-rgb), .14); }
.mk-envivo-leer:disabled { opacity: .6; cursor: default; }
.mk-envivo-leer:focus-visible { outline: 2px solid var(--mud-palette-primary); outline-offset: 1px; }
.mk-envivo-leer .mud-icon-root { font-size: 15px; }

/* Un local: su nombre, lo que hace la caja ahí, el estado de la minuta y sus seis números. */
.mk-vender-unidad {
  padding: 16px 18px 18px;
  background: var(--mk-white);
  border: 1px solid var(--mk-border);
  border-radius: var(--mk-radius-md);
}
.mk-vender-unidad + .mk-vender-unidad { margin-top: 16px; }

.mk-vender-unidad-cabeza {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 6px 12px;
}

.mk-vender-unidad-nombre {
  font-family: var(--mk-font-display);
  font-size: 1.2rem;
  font-weight: 800;
  line-height: 1.2;
  color: var(--mk-ink);
}
.mk-vender-unidad-que { font-size: .85rem; color: var(--mk-muted); }

.mk-vender-estado {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: var(--mk-radius-pill);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}
.mk-vender-estado::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
}
.mk-vender-estado.is-publicada { background: rgba(20, 108, 78, .12); color: var(--mk-success); }
.mk-vender-estado.is-cerradas { background: rgba(31, 111, 139, .12); color: var(--mk-info); }
.mk-vender-estado.is-borrador { background: rgba(224, 160, 48, .18); color: #8a5a00; }
.mk-vender-estado.is-apagada { background: var(--mk-divider); color: var(--mk-muted); }

/* Los seis números en una línea: lo que se mira en la venta son las tarjetas. Lo pendiente va
   en arcilla solo si hay algo. */
.mk-caja-cifras { font-size: .82rem; color: var(--mk-muted); }
.mk-caja-cifras span { white-space: nowrap; }
.mk-caja-cifras b { font-family: var(--mk-font-mono); font-weight: 700; color: var(--mk-ink); }
.mk-caja-cifras b.is-pendiente { color: var(--mk-clay); }
.mk-vender-cifras { margin-top: 8px; font-size: .88rem; }

.mk-vender-nota { margin-top: 12px; font-size: .9rem; color: var(--mk-muted); }

/* Lo que se vende, como tarjetas grandes que se tocan. La grilla se acomoda sola al ancho: tres
   o cuatro por fila en el PC del mostrador, una o dos en una pantalla angosta. */
.mk-vtarjetas {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 12px;
  margin-top: 14px;
}

/* El color va con lo que queda: el número, la barra y el estado de abajo. Normal en verde,
   pocos en ámbar y agotada apagada. */
.mk-vtarjeta {
  --mk-nivel: var(--mk-success);
  --mk-nivel-barra: var(--mk-brand);
  position: relative;
  appearance: none;
  font: inherit;
  text-align: left;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: stretch;      /* el botón trae todo centrado */
  gap: 6px;
  min-height: 160px;
  padding: 14px 16px;
  border: 1px solid var(--mk-border);
  border-radius: var(--mk-radius-md);
  background: var(--mk-white);
  color: var(--mk-ink);
  box-shadow: var(--mk-shadow-sm);
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}

/* Lo de adentro va encima del destello. */
.mk-vtarjeta > :not(.mk-vtarjeta-destello) { position: relative; }

.mk-vtarjeta:hover:not(:disabled) { border-color: var(--mk-brand-lite); box-shadow: var(--mk-shadow-md); }
.mk-vtarjeta:focus-visible { outline: 3px solid rgba(var(--mk-brand-rgb), .35); outline-offset: 2px; }

.mk-vtarjeta.is-pocos {
  --mk-nivel: #b45309;
  --mk-nivel-barra: var(--mk-warning);
  border-color: rgba(224, 160, 48, .75);
  background: #fffaf0;
}

/* Sin cupo: apagada y sin clic. Se queda en su lugar para que se vea qué se acabó. */
.mk-vtarjeta.is-agotado {
  --mk-nivel: var(--mk-muted);
  --mk-nivel-barra: var(--mk-mist);
  cursor: default;
  background: var(--mk-base);
  color: var(--mk-muted);
  box-shadow: none;
  border-style: dashed;
  opacity: .7;
}

/* La elegida: el borde más grueso se come el padding para que la tarjeta no salte de tamaño. */
.mk-vtarjeta.is-elegida {
  border: 2px solid var(--mk-brand);
  padding: 13px 15px;
  background: rgba(var(--mk-brand-rgb), .06);
}

/* Arriba, una sola línea: la opción a la izquierda (si la unidad numera) y cómo está a la
   derecha. Debajo el nombre, siempre de dos líneas de alto: con nombres cortos y largos, la cabeza
   mide lo mismo en todas. */
.mk-vtarjeta-arriba { display: flex; align-items: center; gap: 8px; min-width: 0; min-height: 24px; }
.mk-vtarjeta-arriba .mk-op { min-width: 0; padding: 3px 8px; font-size: 12px; }

.mk-vtarjeta-nombre {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.5em;
  font-weight: 700;
  font-size: 1.05rem;
  line-height: 1.25;
  overflow-wrap: anywhere;
}
.mk-vtarjeta-precio { font-weight: 700; font-size: 1rem; color: var(--mk-muted); }

/* El número, «disponibles» y lo que cambió, en una sola línea: si «−1» bajara a la siguiente, el
   número de esa tarjeta subiría respecto de las del lado. Lo que no cabe es «disponibles». */
.mk-vtarjeta-cifra { display: flex; align-items: baseline; gap: 0 8px; min-width: 0; margin-top: auto; }
.mk-vtarjeta-numero {
  display: inline-block;
  font-family: var(--mk-font-display);
  font-size: 52px;
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--mk-nivel);
  transform-origin: left bottom;
}
.mk-vtarjeta.is-normal .mk-vtarjeta-numero { color: var(--mk-ink); }
.mk-vtarjeta-quedan {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: .9rem;
  color: var(--mk-muted);
}
.mk-vtarjeta-numero-caja,
.mk-vtarjeta-delta-caja { flex: none; }

.mk-vtarjeta-barra { display: block; margin-top: 4px; }   /* es un span: adentro de un botón no va un div */
.mk-vtarjeta-barra .mk-stock-fill { display: block; background: var(--mk-nivel-barra); }

/* Una sola línea siempre: cuando el estado iba acá y no cabía, el pie crecía y subía el número. */
.mk-vtarjeta-pie {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: .8rem;
  color: var(--mk-muted);
}

/* Cómo está, arriba a la derecha y del color de lo que queda: se busca siempre en la misma esquina. */
.mk-vtarjeta-estado {
  flex: none;
  margin-left: auto;
  padding: 2px 8px;
  border-radius: var(--mk-radius-pill);
  background: rgba(20, 108, 78, .12);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .06em;
  line-height: 1.4;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--mk-nivel);
}
.mk-vtarjeta.is-pocos .mk-vtarjeta-estado { background: rgba(224, 160, 48, .22); }
.mk-vtarjeta.is-agotado .mk-vtarjeta-estado { background: var(--mk-divider); }

/* Compactas, cuando la unidad tiene muchas opciones: más por fila y más bajas. Arriba el nombre
   en una línea y el precio; cómo está lo dice la palabra al lado del número («quedan pocos»), que
   la etiqueta de arriba no le dejaba lugar al nombre. El número sigue siendo lo más grande. */
.mk-vtarjetas.is-compactas { grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)); gap: 10px; }
.mk-vtarjetas.is-compactas .mk-vtarjeta { min-height: 0; gap: 4px; padding: 10px 12px; }
.mk-vtarjetas.is-compactas .mk-vtarjeta.is-elegida { padding: 9px 11px; }
.mk-vtarjetas.is-compactas .mk-vtarjeta-nombre { -webkit-line-clamp: 1; min-height: 1.25em; font-size: .95rem; }
.mk-vtarjeta-arriba .mk-vtarjeta-nombre {
  display: block;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.mk-vtarjeta-arriba .mk-vtarjeta-precio { flex: none; margin-left: auto; font-size: .85rem; }
.mk-vtarjeta-quedan.is-nivel {
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--mk-nivel);
}
.mk-vtarjetas.is-compactas .mk-vtarjeta-numero { font-size: 36px; }
.mk-vtarjetas.is-compactas .mk-vtarjeta-quedan:not(.is-nivel) { font-size: .82rem; }
.mk-vtarjetas.is-compactas .mk-vtarjeta-barra { margin-top: 2px; }

/* Lo que cambió en vivo. Cada cambio es un elemento nuevo (su clave es la vez del cambio): la
   animación parte de cero con cada uno y no se repite cuando la pantalla solo se vuelve a dibujar. */
.mk-vtarjeta-destello {
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  pointer-events: none;
  animation: mk-destello 1.8s ease-out forwards;
}

@keyframes mk-destello {
  0% { background: rgba(255, 210, 90, .55); box-shadow: 0 0 0 0 rgba(224, 160, 48, .7); }
  60% { box-shadow: 0 0 0 10px rgba(224, 160, 48, 0); }
  100% { background: rgba(255, 210, 90, 0); box-shadow: 0 0 0 10px rgba(224, 160, 48, 0); }
}

.mk-vtarjeta-numero.is-nuevo { animation: mk-salto .7s cubic-bezier(.2, .9, .3, 1.3); }

@keyframes mk-salto {
  0% { transform: scale(1.3); color: var(--mk-clay); }
  100% { transform: scale(1); }
}

/* Cuánto cambió, al lado del número: se queda unos segundos y se va. */
.mk-vtarjeta-delta {
  display: inline-block;
  padding: 2px 8px;
  border-radius: var(--mk-radius-pill);
  font-size: 14px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  animation: mk-delta 4s ease-out forwards;
}
.mk-vtarjeta-delta.is-baja { background: rgba(194, 65, 12, .14); color: var(--mk-clay); }
.mk-vtarjeta-delta.is-sube { background: rgba(20, 108, 78, .14); color: var(--mk-success); }

@keyframes mk-delta {
  0% { opacity: 0; transform: translateY(6px); }
  10% { opacity: 1; transform: none; }
  75% { opacity: 1; }
  100% { opacity: 0; visibility: hidden; }
}

@media (prefers-reduced-motion: reduce) {
  .mk-envivo-punto::after { animation: none; }
  .mk-vtarjeta-numero.is-nuevo { animation: none; }
  .mk-vtarjeta-destello { animation-duration: 3s; }
}

/* El paso de venta, debajo de las tarjetas de su unidad: lo elegido y el nombre a la izquierda,
   lo que respondió la venta a la derecha, para que el nombre no se mueva. Angosto, uno debajo
   del otro. */
.mk-vpaso {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
  margin-top: 14px;
  padding: 14px 16px;
  border: 1px solid var(--mk-border);
  border-left: 3px solid var(--mk-brand);
  border-radius: var(--mk-radius-md);
  background: var(--mk-base);
  scroll-margin: 16px;
}
.mk-vpaso.is-solo { grid-template-columns: minmax(0, 1fr); }

@media (max-width: 900px) {
  .mk-vpaso { grid-template-columns: minmax(0, 1fr); }
}

.mk-vpaso-producto { font-weight: 700; font-size: 1.1rem; }
.mk-vpaso-quedan { margin: 2px 0 10px; font-size: .9rem; color: var(--mk-muted); }
.mk-vpaso-quedan b { font-family: var(--mk-font-mono); color: var(--mk-ink); }
.mk-vpaso-agotada { margin: 2px 0 10px; font-weight: 700; color: var(--mk-clay); }
.mk-vpaso-nombre { margin: 0 !important; }
.mk-vpaso-nombre input { font-size: 1.1rem !important; }

.mk-vpaso-botones {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 10px;
  margin-top: 10px;
}
.mk-vpaso-teclas { font-size: .78rem; color: var(--mk-muted); }

/* Lo que respondió la venta: grande y de color, se lee de reojo. */
.mk-vresultado {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px 16px;
  border-radius: var(--mk-radius-md);
  animation: mk-veredicto-entra .12s ease-out;
}
.mk-vresultado-icono { flex: none; font-size: 40px !important; width: 40px !important; height: 40px !important; }
.mk-vresultado-titulo {
  font-family: var(--mk-font-display);
  font-size: 26px;
  font-weight: 800;
  line-height: 1.15;
}
.mk-vresultado-dato { margin-top: 4px; font-size: 15px; overflow-wrap: anywhere; }

.mk-vresultado.is-bien { background: var(--mk-success); color: #fff; }
.mk-vresultado.is-bien .mk-vresultado-icono { color: #fff; }
.mk-vresultado.is-aviso { background: #fdf3e1; border: 1px solid rgba(224, 160, 48, .6); color: var(--mk-ink); }
.mk-vresultado.is-aviso .mk-vresultado-icono,
.mk-vresultado.is-aviso .mk-vresultado-titulo { color: #b45309; }
.mk-vresultado.is-mal { background: #fbeceb; border: 1px solid rgba(192, 57, 43, .45); color: var(--mk-ink); }
.mk-vresultado.is-mal .mk-vresultado-icono,
.mk-vresultado.is-mal .mk-vresultado-titulo { color: var(--mk-danger); }

.mk-vresultado-espera {
  padding: 18px 16px;
  border: 1px dashed var(--mk-border);
  border-radius: var(--mk-radius-md);
  text-align: center;
  font-size: .88rem;
  color: var(--mk-muted);
}

/* El código de una venta del casino. Se le muestra o se le dicta a quien compró, que con él
   pasa a la fila: tiene que leerse desde el otro lado del mostrador. */
.mk-caja-codigo {
  text-align: center;
  padding: 16px;
  border: 2px solid var(--mk-brand);
  border-radius: var(--mk-radius-md);
  background: var(--mk-white);
}
.mk-caja-codigo-numero {
  font-size: 3rem;
  font-weight: 800;
  letter-spacing: .08em;
  line-height: 1.1;
  color: var(--mk-brand);
}
.mk-vresultado-codigo { animation: mk-veredicto-entra .12s ease-out; }
.mk-vresultado-fila { font-size: 1.15rem; font-weight: 800; }

/* Lo vendido hoy, al costado. Se queda a la vista al bajar por las tarjetas, con su propia
   barra si no cabe. */
.mk-vventas {
  position: sticky;
  top: calc(var(--mud-appbar-height, 64px) + 16px);
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - var(--mud-appbar-height, 64px) - 32px);
  background: var(--mk-white);
  border: 1px solid var(--mk-border);
  border-radius: var(--mk-radius-md);
  overflow: hidden;
}

@media (max-width: 1100px) {
  .mk-vventas { position: static; max-height: none; }
}

.mk-vventas-cabeza {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 14px;
  border-bottom: 1px solid var(--mk-divider);
  font-size: 15px;
  font-weight: 700;
}
.mk-vventas-cuenta { display: inline-flex; align-items: center; gap: 6px; }
.mk-vventas-anuladas { font-size: 12px; font-weight: 600; color: var(--mk-muted); }

.mk-vventas-lista { overflow-y: auto; }
.mk-vventas-vacia { padding: 24px 14px; text-align: center; font-size: .88rem; color: var(--mk-muted); }
.mk-vventas-mas { padding: 8px 14px; font-size: .8rem; color: var(--mk-muted); text-align: center; }

.mk-vventa { padding: 8px 14px; border-bottom: 1px solid var(--mk-divider); font-size: 13px; }

.mk-vventa-linea { display: flex; align-items: baseline; gap: 8px; }
.mk-vventa-hora { flex: none; width: 2.8rem; color: var(--mk-muted); }
.mk-vventa-nombre { flex: 1 1 auto; min-width: 0; font-weight: 600; overflow-wrap: anywhere; }
.mk-vventa-sub { padding-left: calc(2.8rem + 8px); color: var(--mk-muted); overflow-wrap: anywhere; }

.mk-vventa-nota {
  flex: none;
  padding: 1px 8px;
  border-radius: var(--mk-radius-pill);
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}
.mk-vventa-nota.is-entregada { background: rgba(20, 108, 78, .12); color: var(--mk-success); }
.mk-vventa-nota.is-fila { background: rgba(var(--mk-brand-rgb), .1); color: var(--mk-brand); }
.mk-vventa-nota.is-pendiente { background: rgba(194, 65, 12, .14); color: var(--mk-clay); }
.mk-vventa-nota.is-anulada { background: var(--mk-divider); color: var(--mk-muted); text-decoration: line-through; }

/* La venta que acaba de entrar, de esta caja o de otra: se enciende y se apaga sola. */
.mk-vventa.is-nueva { animation: mk-vventa-nueva 2.5s ease-out; }

@keyframes mk-vventa-nueva {
  from { background: rgba(255, 210, 90, .5); }
  to { background: transparent; }
}

/* ── Entregar: la fila de la tablet en la caja ────────────── */

/* Las medidas y los colores son los de la tablet (Material 3): las mismas pastillas, la misma
   etiqueta de opción y la misma respuesta a pantalla completa, para que quien pasa de la fila
   al mostrador no tenga que aprender otra pantalla. Más ancha que la venta: la lista y el
   detalle por plato van lado a lado en el PC. */
.mk-entrega { max-width: 1320px; margin: 0 auto; }

.mk-entrega-acciones {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 16px;
}

/* Los seis números de la portada de la tablet: cajas de ancho fijo, en fila. */
.mk-cifras-dia {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 16px;
}

.mk-cifra {
  width: 120px;
  padding: 10px 12px;
  background: var(--mk-white);
  border: 1px solid var(--mk-border);
  border-radius: 10px;
}

.mk-cifra-titulo {
  font-size: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: rgba(0, 0, 0, .54);
  white-space: nowrap;
}

.mk-cifra-valor {
  font-family: var(--mk-font-display);
  font-size: 30px;
  font-weight: 700;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
  color: rgba(0, 0, 0, .87);
}

.mk-cifra.is-servidos .mk-cifra-valor { color: var(--mk-brand); }
.mk-cifra.is-llevar .mk-cifra-valor { color: var(--mk-clay); }

/* Por servir, destacado: el borde de dos se come el padding para no cambiar de tamaño. */
.mk-cifra.is-destacada { border: 2px solid var(--mk-clay); padding: 9px 11px; }
.mk-cifra.is-destacada .mk-cifra-valor { color: var(--mk-clay); }

/* La lista y, al lado, el detalle por plato. En una pantalla angosta el detalle baja. */
.mk-entrega-cuerpo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 16px;
  align-items: start;
}

/* En el PC chico del mostrador (1280, 1366), «Por plato» cede ancho: la lista es lo que se usa. */
@media (max-width: 1400px) {
  .mk-entrega-cuerpo { grid-template-columns: minmax(0, 1fr) 280px; }
}

@media (max-width: 1100px) {
  .mk-entrega-cuerpo { grid-template-columns: minmax(0, 1fr); }
}

.mk-entrega-lista {
  background: var(--mk-white);
  border: 1px solid var(--mk-border);
  border-radius: var(--mk-radius-md);
  overflow: hidden;
}

/* Contenedor de las barras de abajo: se achican según el ancho de la lista, no el de la ventana. */
.mk-entrega-herramientas { padding: 12px 12px 4px; container-type: inline-size; }

/* El buscador con letra grande: lo que dejó el lector tiene que leerse sin acercarse. */
.mk-entrega-buscador input { font-size: 1.25rem !important; }

/* Las barras de orden y de filtros: botones segmentados de Material 3, compactos y sin marca
   de elegido. Cada barra en una sola línea, como en la tablet: si no cabe se desliza, no se
   parte en dos renglones. */
.mk-seg-barra {
  margin-top: 8px;
  overflow-x: auto;
  scrollbar-width: thin;
}

.mk-seg {
  display: inline-flex;
  border: 1px solid #79747e;
  border-radius: var(--mk-radius-pill);
  overflow: hidden;
  background: var(--mk-white);
  vertical-align: top;
}

.mk-seg-btn {
  appearance: none;
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .1px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  padding: 0 14px;
  border: 0;
  border-left: 1px solid #79747e;
  background: transparent;
  color: var(--mk-ink);
  white-space: nowrap;
  cursor: pointer;
  transition: background .15s ease;
}

.mk-seg-btn:first-child { border-left: 0; }
.mk-seg-btn:hover { background: rgba(var(--mk-brand-rgb), .06); }
.mk-seg-btn:focus-visible { outline: 3px solid rgba(var(--mk-brand-rgb), .35); outline-offset: -3px; }
.mk-seg-btn.is-activo { background: rgba(var(--mk-brand-rgb), .12); color: var(--mk-ink); }
.mk-seg-filtros .mk-seg-btn { font-size: 13.5px; }

@media (max-width: 600px) {
  .mk-seg-btn { padding: 0 10px; }
  .mk-seg-filtros .mk-seg-btn { font-size: 12.5px; }
}

/* Las barras de la lista se achican antes de cortarse, como la de la tablet (que se escala para
   caber): primero el aire, después la letra. «Todos» cortado sin aviso, a 1280, era peor. El
   deslizar de .mk-seg-barra queda solo para lo que ni así cabe. */
@container (max-width: 700px) {
  .mk-seg-filtros .mk-seg-btn { padding: 0 10px; gap: 5px; }
}
@container (max-width: 600px) {
  .mk-seg-btn { padding: 0 9px; }
  .mk-seg-filtros .mk-seg-btn { font-size: 12.5px; padding: 0 8px; }
}
@container (max-width: 500px) {
  .mk-seg-btn { font-size: 13px; padding: 0 7px; }
  .mk-seg-filtros .mk-seg-btn { font-size: 11.5px; padding: 0 6px; gap: 4px; }
  .mk-seg-filtros .mk-seg-cuenta { padding: 1px 4px; font-size: 11px; }
}

/* La cuenta de cada filtro en su propia burbuja: pegada al texto se leía como parte del nombre. */
.mk-seg-cuenta {
  padding: 1px 6px;
  border-radius: var(--mk-radius-pill);
  background: rgba(var(--mk-brand-rgb), .078);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.25;
  font-variant-numeric: tabular-nums;
}

/* Los locales, cuando la caja sirve más de uno. */
.mk-entrega-locales { margin-bottom: 14px; }

.mk-entrega-aviso {
  margin-top: 8px;
  padding: 8px 14px;
  background: #fdf6e7;
  font-size: 12px;
  border-bottom: 1px solid var(--mk-divider);
}

.mk-entrega-herramientas + .mk-entrega-vacia,
.mk-entrega-herramientas + .mk-fila,
.mk-entrega-herramientas + .mk-entrega-grupo { margin-top: 8px; border-top: 1px solid var(--mk-divider); }

.mk-entrega-vacia {
  padding: 48px 16px;
  text-align: center;
  color: var(--mk-muted);
}

/* El encabezado de una empresa en «Por empresa»: dónde empieza cada una y cuántos son. */
.mk-entrega-grupo {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 14px;
  background: #edf0ea;
  font-size: 13px;
  font-weight: 700;
}
.mk-entrega-grupo .mk-mono { font-weight: 400; }

/* Una persona: el ListTile de la tablet. Nombre arriba, datos debajo y, a la derecha, la opción
   con su color pegada al botón, que es la esquina que se mira. */
.mk-fila {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 72px;
  padding: 8px 16px;
}
.mk-fila + .mk-fila { border-top: 1px solid var(--mk-divider); }

.mk-fila-texto { flex: 1 1 auto; min-width: 0; }

.mk-fila-titulo {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 0;
  font-size: 16px;
}

.mk-fila-nombre { font-weight: 600; color: rgba(0, 0, 0, .87); overflow-wrap: anywhere; }
.mk-fila.is-servido .mk-fila-nombre { text-decoration: line-through; }
.mk-fila.is-anulado .mk-fila-nombre { text-decoration: line-through; color: rgba(0, 0, 0, .45); }

.mk-fila-sub { font-size: 14px; color: #49454f; overflow-wrap: anywhere; }
.mk-fila-sub .mk-mono { font-size: 13px; }

.mk-fila-derecha {
  flex: none;
  display: flex;
  align-items: center;
  gap: 10px;
}

/* La acción, de ancho fijo (el de «Marcar»): con el botón, el ícono o la nota, las etiquetas
   de opción quedan en la misma columna. */
.mk-fila-accion {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 96px;
}

.mk-fila-icono { font-size: 28px !important; }
.mk-fila-nota { font-size: 13px; color: var(--mk-muted); text-align: center; }

/* Las pastillas de la tablet: suaves, con el texto del color. La de la lista de inscritos de
   la web (.mk-llevar) es otra, sólida. */
.mk-pill {
  display: inline-block;
  padding: 2px 8px;
  border-radius: var(--mk-radius-pill);
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}
.mk-pill-llevar { margin-right: 8px; background: rgba(194, 65, 12, .14); color: #c2410c; }
.mk-pill-nocancelado { margin-left: 6px; background: rgba(180, 83, 9, .14); color: #b45309; }

/* La opción con su color, que se repite cada cinco: morado, terracota, verde, azul y burdeo.
   Bien distintos entre sí, no una gama: la diferencia tiene que notarse de reojo. */
.mk-op {
  --mk-op-rgb: 55, 43, 98;
  display: inline-block;
  max-width: 220px;
  padding: 6px 10px;
  border: 1px solid rgba(var(--mk-op-rgb), .55);
  border-radius: 8px;
  background: rgba(var(--mk-op-rgb), .12);
  color: rgb(var(--mk-op-rgb));
  font-size: 13px;
  font-weight: 800;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mk-op-1 { --mk-op-rgb: 55, 43, 98; }
.mk-op-2 { --mk-op-rgb: 194, 65, 12; }
.mk-op-3 { --mk-op-rgb: 20, 108, 78; }
.mk-op-4 { --mk-op-rgb: 31, 111, 139; }
.mk-op-5 { --mk-op-rgb: 140, 35, 24; }

/* «Marcar»: el botón relleno de Material 3, en píldora y de 40 de alto. */
.mk-marcar {
  appearance: none;
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .1px;
  height: 40px;
  padding: 0 24px;
  border: 0;
  border-radius: 20px;
  background: var(--mk-brand);
  color: #fff;
  cursor: pointer;
  transition: background .15s ease, box-shadow .15s ease;
}
.mk-marcar:hover:not(:disabled) { background: var(--mk-brand-dark); box-shadow: var(--mk-shadow-sm); }
.mk-marcar:focus-visible { outline: 3px solid rgba(var(--mk-brand-rgb), .35); outline-offset: 2px; }
.mk-marcar:disabled { opacity: .5; cursor: default; }

/* El detalle por plato de la portada de la tablet. */
.mk-entrega-platos-titulo { font-size: 15px; font-weight: 700; margin: 0 0 8px; }

.mk-plato {
  margin-bottom: 12px;
  padding: 12px;
  background: var(--mk-white);
  border: 1px solid var(--mk-border);
  border-radius: 10px;
}

.mk-plato-cabeza { display: flex; align-items: center; gap: 8px; min-width: 0; }
.mk-plato-nombre { font-size: 15px; font-weight: 700; min-width: 0; overflow-wrap: anywhere; }
.mk-plato-barra { height: 7px; margin-top: 8px; }
.mk-plato-barra .mk-stock-fill { background: #3b2d52; }
.mk-plato-barra .mk-stock-fill.is-full { background: var(--mk-clay); }

.mk-plato-datos {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  margin-top: 8px;
  font-size: 13px;
  color: rgba(0, 0, 0, .54);
}
.mk-plato-datos b { font-size: 15px; font-weight: 700; color: rgba(0, 0, 0, .87); font-variant-numeric: tabular-nums; }

/* La respuesta al leer un código: el color entero debajo de la barra de arriba, como la
   pantalla del lector de la tablet. Por encima del menú lateral y debajo de los avisos. */
.mk-veredicto {
  position: fixed;
  top: var(--mud-appbar-height, 64px);
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1250;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow-y: auto;
  color: #fff;
  animation: mk-veredicto-entra .12s ease-out;
}
.mk-veredicto-bien { background: var(--mk-success); }
.mk-veredicto-aviso { background: var(--mk-clay); }
.mk-veredicto-mal { background: var(--mk-danger); }

@keyframes mk-veredicto-entra { from { opacity: 0; } to { opacity: 1; } }

.mk-veredicto-cuerpo {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 720px;
  padding: 24px;
  text-align: center;
}

.mk-veredicto-icono { font-size: 84px !important; width: 84px !important; height: 84px !important; color: #fff; }
.mk-veredicto-titulo {
  margin-top: 12px;
  font-family: var(--mk-font-display);
  font-size: 30px;
  font-weight: 800;
  line-height: 1.15;
}
.mk-veredicto-explicacion { margin-top: 12px; font-size: 16px; }
.mk-veredicto-nombre { margin-top: 18px; font-size: 22px; overflow-wrap: anywhere; }
.mk-veredicto-dato { font-size: 16px; color: rgba(255, 255, 255, .7); }
.mk-veredicto-hora { margin-top: 8px; }
.mk-veredicto-observacion { margin-top: 10px; font-size: 15px; }

/* Lo que respondió «Marcar»: el aviso de la tablet, abajo al centro, oscuro y de una línea. */
.mk-entrega-toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  z-index: 1400;
  transform: translateX(-50%);
  max-width: min(560px, calc(100vw - 32px));
  padding: 14px 20px;
  border-radius: 8px;
  background: #322f35;
  color: #f5eff7;
  font-size: 15px;
  line-height: 1.35;
  box-shadow: var(--mk-shadow-md);
  animation: mk-toast-entra .18s ease-out;
}

@keyframes mk-toast-entra {
  from { opacity: 0; transform: translate(-50%, 12px); }
  to { opacity: 1; transform: translate(-50%, 0); }
}

/* Lo que se cobra en el mostrador por algo con precio (la cafetería): precio, ticket y, más
   grande, lo que queda por cobrar (CobroLinea). Solo se muestra: la venta se hace en Bsale.
   El total va en su propia píldora para que se encuentre de reojo entre los otros dos montos. */
.mk-cobro {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 8px;
  font-variant-numeric: tabular-nums;
}
.mk-cobro-sep { color: var(--mk-muted); }
.mk-cobro-nota { color: var(--mk-muted); }
.mk-cobro-total {
  padding: 2px 10px;
  border-radius: var(--mk-radius-pill);
  background: var(--mk-brand);
  color: #fff;
  font-weight: 800;
  white-space: nowrap;
}

/* En la pregunta de «Marcar»: es lo que se mira antes de confirmar. */
.mk-cobro-dialogo {
  margin-top: 14px;
  padding: 10px 14px;
  border-left: 3px solid var(--mk-brand);
  border-radius: var(--mk-radius-sm);
  background: rgba(var(--mk-brand-rgb), .06);
  font-size: 17px;
}
.mk-cobro-dialogo .mk-cobro-total { font-size: 20px; }

/* En la respuesta grande del lector: blanco sobre el verde, del tamaño del nombre, y el total
   en blanco con letra verde, que es lo primero que se ve. */
.mk-cobro-grande {
  justify-content: center;
  margin: 14px 0 6px;
  font-size: 22px;
  color: #fff;
}
.mk-cobro-grande .mk-cobro-sep,
.mk-cobro-grande .mk-cobro-nota { color: rgba(255, 255, 255, .8); }
.mk-cobro-grande .mk-cobro-total {
  padding: 4px 16px;
  background: #fff;
  color: var(--mk-success);
  font-size: 30px;
}

/* En lo que respondió «Entregarle esa» (Vender), sobre el verde de «Entregado». */
.mk-cobro-resultado { margin-top: 8px; font-size: 16px; }
.mk-cobro-resultado .mk-cobro-sep,
.mk-cobro-resultado .mk-cobro-nota { color: rgba(255, 255, 255, .8); }
.mk-cobro-resultado .mk-cobro-total { background: #fff; color: var(--mk-success); font-size: 18px; }

/* En el paso de venta: con ticket y sin él, bajo el producto. */
.mk-cobro-venta { margin: 6px 0 2px; font-size: 1rem; }
.mk-cobro-venta .mk-cobro-total { font-size: 1.15rem; }
.mk-cobro-venta b { font-weight: 800; }

/* Con qué ticket se hace la cuenta, si alguna empresa tiene uno que vale distinto. */
.mk-cobro-ticket {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 10px;
  margin: 6px 0 2px;
}
.mk-cobro-ticket-titulo { font-size: .85rem; color: var(--mk-muted); }
.mk-cobro-ticket .mk-seg { max-width: 100%; overflow-x: auto; }

/* El cobro de la caja (CobroPanel): con qué ticket, la cuenta y cómo paga el resto. Botones
   grandes y separados, no una barra: se tocan rápido y con el mouse de reojo. */
.mk-cobrar { display: flex; flex-direction: column; gap: 10px; margin: 8px 0 4px; }
.mk-cobrar-fila { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; }
.mk-cobrar-titulo { min-width: 64px; font-size: .85rem; color: var(--mk-muted); }
.mk-cobrar-opciones { display: flex; flex-wrap: wrap; gap: 6px; }
.mk-cobrar-op {
  appearance: none;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 38px;
  padding: 0 14px;
  border: 1px solid #79747e;
  border-radius: var(--mk-radius-pill);
  background: var(--mk-white);
  color: var(--mk-ink);
  cursor: pointer;
  transition: background .15s ease;
}
.mk-cobrar-op:hover { background: rgba(var(--mk-brand-rgb), .06); }
.mk-cobrar-op:focus-visible { outline: 3px solid rgba(var(--mk-brand-rgb), .35); outline-offset: 1px; }
.mk-cobrar-op.is-activo { background: var(--mk-brand); border-color: var(--mk-brand); color: #fff; }
.mk-cobrar-op.is-activo .mk-seg-cuenta { background: rgba(255, 255, 255, .22); }
.mk-cobrar-op:disabled { opacity: .5; cursor: default; }
.mk-cobrar-cantidad { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; }
.mk-cobrar-cantidad button {
  width: 32px; height: 32px; border-radius: 50%; border: 1px solid #79747e;
  background: var(--mk-white); color: var(--mk-ink); font-size: 18px; line-height: 1; cursor: pointer;
}
.mk-cobrar-cantidad button:disabled { opacity: .4; cursor: default; }
.mk-cobrar-fijo { font-weight: 700; }
.mk-cobrar-cuenta { font-size: 1.05rem; }
.mk-cobrar-cuenta .mk-cobro-total { font-size: 1.2rem; }
.mk-cobrar-docs { font-size: .8rem; color: var(--mk-muted); }

/* En la pregunta de «Cobrar y entregar»: el producto y su precio, arriba del cobro. */
.mk-cobro-producto { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 4px; font-size: 1.05rem; font-weight: 700; }

/* Lo que se emitió al cobrar, bajo la respuesta de la venta, con el botón para imprimir. */
.mk-cobro-docs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-top: 8px; font-size: .9rem; }
.mk-cobro-docs .mk-cobro-docs-texto { font-variant-numeric: tabular-nums; }

/* «cobrar $2.200» en la fila de «Entregar»: chico, pero del color de la marca para que se distinga del resto. */
.mk-fila-cobro { font-weight: 700; color: var(--mk-brand); white-space: nowrap; }

/* ---- Caja · Cafetería (CajaCafeteria.razor): todo en una pantalla ----
   Tres columnas del alto de la pantalla: a la izquierda lo que se agrega (buscador, pestañas y la
   lista, que es lo único que se desliza), al medio el carro y a la derecha el cobro, con «Cobrar»
   siempre a la vista (pedido del usuario, 01-11-2026). Una sola escala de letra (12 · 14 · 16 · 22)
   y un mismo alto y borde para los controles, para que todo se vea parejo. */
.mk-pos {
  /* Compacta (pedido del usuario, 03-11-2026: la pantalla de la caja es chica): 11 · 13 · 15 · 19. */
  --pos-xs: 11px; --pos-md: 13px; --pos-lg: 15px; --pos-xl: 19px;
  --pos-control: 32px; --pos-radio: 7px; --pos-borde: #d9d6de;
  display: flex; flex-direction: column; gap: 8px;
  height: calc(100dvh - var(--mud-appbar-height, 64px) - 40px); min-height: 500px;
  font-size: var(--pos-md);
  container-type: inline-size;
}
.mk-pos .mud-button-root { text-transform: none; letter-spacing: 0; }
.mk-pos .mud-input { font-size: var(--pos-md); }
.mk-pos .mk-entrega-buscador input { font-size: 14px !important; }
/* Los campos de MudBlazor crecen (flex: 1 1 auto): en las columnas de alto fijo empujaban la lista hacia abajo. */
.mk-pos-carro .mud-input-control, .mk-pos-cobro .mud-input-control { flex: none; }

.mk-pos-cabeza { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 8px 16px; flex-wrap: wrap; }
.mk-pos-cabeza-titulo { display: flex; align-items: baseline; gap: 6px 12px; flex-wrap: wrap; min-width: 0; }
.mk-pos-cabeza-nombre { font-size: var(--pos-xl); font-weight: 800; line-height: 1.1; }
.mk-pos-cabeza-local { color: var(--mk-muted); }
.mk-pos-previa {
  align-self: center; display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px;
  border: 1px solid var(--mud-palette-info); border-radius: var(--mk-radius-pill);
  color: var(--mud-palette-info); font-size: var(--pos-xs); font-weight: 600;
}
.mk-pos-previa .mud-icon-root { font-size: 16px; }

@media (prefers-reduced-motion: no-preference) {
  .mk-girando { animation: mk-girar 0.9s linear infinite; }
}
@keyframes mk-girar { to { transform: rotate(360deg); } }

.mk-pos-cuerpo {
  flex: 1; min-height: 0; display: grid; gap: 10px;
  grid-template-columns: minmax(0, 1fr) 290px 300px;
  grid-template-areas: "catalogo carro cobro";
}
/* Con borradores: sus pestañas en una columna angosta, pegadas al carro (el carro se angosta un poco). */
.mk-pos-cuerpo.con-borradores {
  grid-template-columns: minmax(0, 1fr) 62px 268px 300px;
  grid-template-areas: "catalogo borradores carro cobro";
}
.mk-pos-catalogo { grid-area: catalogo; min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.mk-pos-cabecera { flex: none; }
.mk-pos-buscador { margin-bottom: 4px; }
.mk-pos-desliza { flex: 1; min-height: 0; overflow-y: auto; padding: 2px 4px 8px 2px; scrollbar-width: thin; }
.mk-pos-carro { grid-area: carro; }
.mk-pos-cobro { grid-area: cobro; }
.mk-pos-carro, .mk-pos-cobro {
  min-width: 0; min-height: 0; display: flex; flex-direction: column; gap: 6px; padding: 10px;
  border: 1px solid var(--mk-border); border-radius: 10px; background: var(--mk-white);
}
/* Según el ancho que le queda a la caja (con el menú abierto es menos): primero se angostan el carro
   y el cobro; si aun así no cabe, el carro va arriba y el cobro abajo, a la derecha. */
@container (max-width: 1250px) {
  .mk-pos-pestana { padding-left: 9px; padding-right: 9px; }
  .mk-pos-cuerpo { grid-template-columns: minmax(0, 1fr) 250px 270px; }
  .mk-pos-cuerpo.con-borradores { grid-template-columns: minmax(0, 1fr) 58px 236px 270px; }
}
@container (max-width: 960px) {
  .mk-pos-cuerpo {
    grid-template-columns: minmax(0, 1fr) 340px;
    grid-template-rows: minmax(0, 2fr) minmax(0, 3fr);
    grid-template-areas: "catalogo carro" "catalogo cobro";
  }
  .mk-pos-cuerpo.con-borradores {
    grid-template-columns: minmax(0, 1fr) 58px 290px;
    grid-template-areas: "catalogo borradores carro" "catalogo . cobro";
  }
}
/* En pantallas chicas todo va en una columna y se baja con la página. */
@media (max-width: 900px) {
  .mk-pos { height: auto; min-height: 0; }
  .mk-pos-cuerpo, .mk-pos-cuerpo.con-borradores { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-template-areas: "catalogo" "borradores" "carro" "cobro"; }
  .mk-pos-desliza, .mk-pos-lineas, .mk-pos-pasos { overflow: visible; }
}

/* Las pestañas en dos niveles (pedido del usuario, 03-11-2026: «doble fila de pestañas, más orgánico»):
   la activa, blanca, se pega a la franja de abajo; en «Productos» la franja trae las categorías. */
/* En una línea (si no caben, se deslizan); el pixel de abajo es donde la activa tapa el borde de la franja. */
.mk-pos-pestanas {
  display: flex; align-items: flex-end; gap: 2px; padding: 0 2px 1px; margin-bottom: -1px;
  overflow-x: auto; scrollbar-width: none;
}
.mk-pos-pestana {
  appearance: none; font: inherit; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  padding: 6px 12px; border: 1px solid transparent; border-bottom: 0; border-radius: 9px 9px 0 0;
  background: transparent; color: var(--mk-muted); font-weight: 700; font-size: var(--pos-md);
}
.mk-pos-pestana:hover { color: var(--mk-ink); background: rgba(var(--mk-brand-rgb), .05); }
.mk-pos-pestana:focus-visible { outline: 2px solid var(--mud-palette-primary); outline-offset: -2px; }
.mk-pos-pestana.is-activa {
  position: relative; z-index: 1; margin-bottom: -1px; padding-bottom: 7px;
  border-color: var(--mk-border); background: var(--mk-white); color: var(--mk-ink);
  box-shadow: inset 0 3px 0 var(--mk-brand);
}
.mk-pos-franja {
  display: flex; gap: 2px; padding: 4px; margin-bottom: 8px; overflow-x: auto; scrollbar-width: none;
  border: 1px solid var(--mk-border); border-radius: 0 10px 10px 10px; background: var(--mk-white);
}
.mk-pos-franja.is-vacia { padding: 0; border-width: 1px 0 0; border-radius: 0; background: none; margin-bottom: 6px; }

/* Reservas por entregar: una lista tranquila, una persona por fila. */
.mk-pos-reservas { display: flex; flex-direction: column; border: 1px solid var(--mk-border); border-radius: var(--pos-radio); background: var(--mk-white); }
.mk-pos-reserva {
  display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) auto; align-items: center; gap: 12px;
  padding: 7px 10px; border-bottom: 1px solid var(--mk-border);
}
.mk-pos-reserva:last-child { border-bottom: 0; }
.mk-pos-reserva.is-elegida { background: rgba(var(--mk-brand-rgb), .07); }
.mk-pos-reserva-quien { display: flex; flex-direction: column; min-width: 0; }
.mk-pos-reserva-nombre { font-weight: 700; overflow-wrap: anywhere; }
.mk-pos-reserva-dato { font-size: var(--pos-xs); color: var(--mk-muted); overflow-wrap: anywhere; }
.mk-pos-reserva-plato { overflow-wrap: anywhere; }
.mk-pos-reserva-acciones { display: flex; align-items: center; gap: 6px; }

/* Las categorías: pestañas chicas dentro de la franja, sin cuentas; si no caben, se deslizan. */
.mk-pos-categoria {
  appearance: none; font: inherit; cursor: pointer; flex: 0 0 auto; white-space: nowrap;
  height: 26px; padding: 0 10px; border: 0; border-radius: 7px;
  background: transparent; color: var(--mk-muted); font-size: var(--pos-md); font-weight: 600;
}
.mk-pos-categoria:hover { background: rgba(var(--mk-brand-rgb), .06); color: var(--mk-ink); }
.mk-pos-categoria:focus-visible { outline: 2px solid var(--mud-palette-primary); outline-offset: -2px; }
.mk-pos-categoria.is-activa { background: rgba(var(--mk-brand-rgb), .11); color: var(--mk-ink); font-weight: 700; }

/* Los productos: el nombre y el precio, del mismo tamaño; el stock solo si avisa algo. */
.mk-pos-productos { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 6px; }
.mk-pos-producto {
  appearance: none; font: inherit; text-align: left; cursor: pointer;
  display: flex; flex-direction: column; justify-content: space-between; align-items: stretch; gap: 4px; min-height: 60px;
  padding: 7px 9px; border: 1px solid var(--mk-border); border-radius: 8px;
  background: var(--mk-white); color: var(--mk-ink); transition: border-color .12s ease, box-shadow .12s ease, transform .06s ease;
}
.mk-pos-producto:hover { border-color: rgba(var(--mk-brand-rgb), .55); box-shadow: 0 2px 8px rgba(0, 0, 0, .06); }
.mk-pos-producto:active { transform: scale(.98); }
.mk-pos-producto:disabled { cursor: default; }
.mk-pos-producto.is-sin { opacity: .55; }
/* El nombre entero, sin «…»: la cajera tiene que poder leerlo todo (pedido del usuario, 01-11-2026). */
.mk-pos-producto-nombre { font-size: var(--pos-md); font-weight: 600; line-height: 1.2; overflow-wrap: anywhere; }
.mk-pos-producto-pie { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 2px 6px; }
.mk-pos-producto-precio { font-size: var(--pos-md); font-weight: 800; font-variant-numeric: tabular-nums; }
/* El stock va siempre: gris; con 3 o menos, ámbar. */
.mk-pos-producto-stock { font-size: var(--pos-xs); color: var(--mk-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.mk-pos-producto-stock.is-poco { color: #b45309; font-weight: 700; }
.mk-pos-producto-stock.is-reservado { color: #1d4ed8; font-weight: 700; }
/* Tiene reservas por entregar: al tocarlo se pregunta si es de alguien que reservó. */
.mk-pos-producto-reservas {
  align-self: flex-start; font-size: var(--pos-xs); font-weight: 700; color: #1d4ed8;
  background: rgba(29, 78, 216, .08); border-radius: var(--mk-radius-pill); padding: 1px 8px;
}
.mk-pos-producto.is-sin .mk-pos-producto-reservas { opacity: 1; }

/* Venta y borradores: pestañas verticales pegadas al borde izquierdo del carro (pedido del usuario,
   03-11-2026). La activa, blanca, se funde con el carro; las otras dejan ver su borde. */
.mk-pos-borradores {
  grid-area: borradores; position: relative; z-index: 1; margin-right: -11px; padding-top: 10px;
  display: flex; flex-direction: column; gap: 4px; min-height: 0;
}
.mk-pos-borradores.is-muchos { overflow-y: auto; scrollbar-width: none; }
.mk-pos-borrador {
  appearance: none; font: inherit; cursor: pointer; flex: none;
  display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 6px 3px 6px 4px;
  border: 1px solid var(--mk-border); border-right: 0; border-radius: 10px 0 0 10px;
  background: #f3f1f6; color: var(--mk-muted); box-shadow: inset -1px 0 0 var(--mk-border);
  text-align: center; line-height: 1.15;
}
.mk-pos-borrador:hover:not(:disabled) { color: var(--mk-ink); background: #ebe8f0; }
.mk-pos-borrador:disabled { cursor: default; }
.mk-pos-borrador:focus-visible { outline: 2px solid var(--mud-palette-primary); outline-offset: -2px; }
.mk-pos-borrador.is-activa { background: var(--mk-white); color: var(--mk-ink); box-shadow: inset 3px 0 0 var(--mk-brand); }
.mk-pos-borrador .mud-icon-root { font-size: 18px; }
.mk-pos-borrador-que { font-size: 10px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.mk-pos-borrador-n { font-size: 17px; font-weight: 800; }
.mk-pos-borrador-quien { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10.5px; }
.mk-pos-borrador-total { font-size: 10.5px; font-variant-numeric: tabular-nums; }
.mk-pos-borrador.is-nuevo { border-style: dashed; background: transparent; box-shadow: none; color: var(--mud-palette-primary); margin-right: 1px; }
.mk-pos-borrador.is-nuevo:hover:not(:disabled) { background: rgba(var(--mk-brand-rgb), .06); }
.mk-pos-borrador-nota { margin-top: -4px; font-size: var(--pos-xs); color: var(--mk-muted); }
.mk-pos-boton.is-peligro { color: #b91c1c; border-color: #b91c1c; }
@media (max-width: 900px) {
  .mk-pos-borradores { flex-direction: row; flex-wrap: wrap; margin: 0; padding: 0; }
  .mk-pos-borrador { border-right: 1px solid var(--mk-border); border-radius: 10px; box-shadow: none; min-width: 64px; }
}

/* La pregunta «¿Es de alguien que reservó?»: una fila por persona, tocable entera. */
.mk-pregunta-texto { margin: 0 0 10px; }
.mk-pregunta-lista { display: grid; gap: 8px; }
.mk-pregunta-persona {
  display: grid; gap: 2px; text-align: left; padding: 10px 12px; cursor: pointer; font: inherit;
  border: 1px solid var(--mud-palette-lines-default); border-radius: 10px;
  background: var(--mud-palette-surface); color: var(--mud-palette-text-primary);
}
.mk-pregunta-persona:hover:not(:disabled) { border-color: var(--mud-palette-primary); }
.mk-pregunta-persona:focus-visible { outline: 2px solid var(--mud-palette-primary); outline-offset: 2px; }
.mk-pregunta-nombre { font-weight: 700; }
.mk-pregunta-dato { font-size: 13px; color: var(--mk-muted); }
.mk-pregunta-nota { margin: 12px 0 0; color: #b45309; font-weight: 600; }
.mk-pos-vacio { padding: 12px 2px; color: var(--mk-muted); display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }

/* Lo que se repite en el carro y el cobro: títulos, notas, botones chicos y la X de quitar. */
/* Si el título y los botones no caben en una línea (el carro mide ~240 px en la pantalla de la caja), los botones
   bajan a la línea siguiente, a la derecha: nunca se salen del carro ni pisan la columna de al lado (10-11-2026). */
.mk-pos-columna-cabeza { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 8px; min-height: var(--pos-control); }
.mk-pos-columna-cabeza > .mk-pos-titulo { white-space: nowrap; }
/* «Comanda» y «Descartar», juntos a la derecha de la cabeza del borrador. */
.mk-pos-columna-acciones { display: inline-flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; margin-left: auto; }
/* Un poco más justos que los otros botones chicos, para que los dos quepan en una línea en el carro angosto. */
.mk-pos-columna-acciones .mk-pos-boton { padding: 0 8px; gap: 4px; }
.mk-pos-titulo {
  display: flex; align-items: center; gap: 8px;
  font-size: var(--pos-xs); font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--mk-muted);
}
.mk-pos-paso-n {
  display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%;
  background: var(--mk-brand); color: #fff; font-size: 11px; letter-spacing: 0;
}
.mk-pos-subtitulo { font-size: var(--pos-xs); font-weight: 700; color: var(--mk-muted); }
.mk-pos-nota { font-size: var(--pos-xs); line-height: 1.4; color: var(--mk-muted); }
.mk-pos-boton {
  appearance: none; font: inherit; font-size: var(--pos-md); font-weight: 600; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 32px; padding: 0 12px;
  border: 1px solid var(--pos-borde); border-radius: var(--pos-radio); background: var(--mk-white); color: var(--mk-ink);
}
.mk-pos-boton:hover:not(:disabled) { background: rgba(var(--mk-brand-rgb), .06); }
.mk-pos-boton:disabled { color: var(--mk-muted); opacity: .5; cursor: default; }
.mk-pos-boton .mud-icon-root { font-size: 18px; }
.mk-pos-quitar {
  appearance: none; display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 28px; height: 28px; padding: 0; border: 0; border-radius: var(--pos-radio);
  background: transparent; color: var(--mk-muted); cursor: pointer;
}
.mk-pos-quitar:hover:not(:disabled) { background: rgba(0, 0, 0, .06); color: var(--mk-ink); }
.mk-pos-quitar .mud-icon-root { font-size: 18px; }

/* La cantidad: un solo control, «− 3 +», del mismo alto y borde, para el carro y los tickets. */
.mk-pos-cant {
  display: inline-flex; align-items: stretch; flex: none; height: 32px;
  border: 1px solid var(--pos-borde); border-radius: var(--pos-radio); background: var(--mk-white); overflow: hidden;
}
.mk-pos-cant button {
  appearance: none; display: inline-flex; align-items: center; justify-content: center;
  width: 32px; padding: 0; border: 0; background: transparent; color: var(--mk-ink); cursor: pointer;
}
.mk-pos-cant button:hover:not(:disabled) { background: rgba(var(--mk-brand-rgb), .08); }
.mk-pos-cant button:disabled { color: var(--mk-muted); opacity: .4; cursor: default; }
.mk-pos-cant .mud-icon-root { font-size: 18px; }
.mk-pos-cant-n {
  display: inline-flex; align-items: center; justify-content: center; min-width: 34px; padding: 0 4px;
  border-left: 1px solid var(--pos-borde); border-right: 1px solid var(--pos-borde);
  font-size: var(--pos-md); font-weight: 700; font-variant-numeric: tabular-nums;
}
.mk-pos-cant.is-fija .mk-pos-cant-n { border: 0; color: var(--mk-muted); }

/* El carro: cada línea en dos renglones (el nombre entero; abajo la cantidad y el monto). */
.mk-pos-de { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; padding: 8px 10px;
  border-left: 4px solid var(--mk-brand); background: rgba(var(--mk-brand-rgb), .06); border-radius: var(--pos-radio); }
.mk-pos-de-nombre { font-weight: 700; }
.mk-pos-de-dato { font-size: var(--pos-xs); color: var(--mk-muted); }
.mk-pos-lineas { flex: 1; min-height: 0; overflow-y: auto; margin: 0 -4px; padding: 0 4px; scrollbar-width: thin; }
.mk-pos-linea { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 4px 8px; padding: 6px 0; border-bottom: 1px solid var(--mk-border); }
.mk-pos-linea-nombre { font-weight: 600; line-height: 1.2; padding-top: 3px; }
.mk-pos-linea-pie { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; }
.mk-pos-linea-unitario { font-size: var(--pos-xs); color: var(--mk-muted); font-variant-numeric: tabular-nums; }
.mk-pos-linea-total { margin-left: auto; font-weight: 700; }
.mk-pos-etiqueta { display: inline-block; margin-left: 4px; padding: 0 6px; border-radius: var(--mk-radius-pill); background: rgba(var(--mk-brand-rgb), .12); font-size: 11px; font-weight: 700; vertical-align: 1px; }
.mk-pos-etiqueta.is-descuento { background: rgba(196, 75, 43, .14); color: #a33a1f; }
.mk-pos-linea-antes { text-decoration: line-through; color: var(--mk-muted, #888); font-size: 12px; margin-right: 6px; }
.mk-pos-total { flex: none; display: flex; justify-content: space-between; align-items: baseline; padding-top: 6px; border-top: 1px solid var(--mk-border); font-weight: 700; }
.mk-pos-total b { font-size: 16px; }

/* El cobro: los tres pasos se deslizan si no caben; el pie con «Cobrar» no se mueve. */
.mk-pos-pasos { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; margin: 0 -4px; padding: 0 4px 4px; scrollbar-width: thin; }
.mk-pos-paso { display: flex; flex-direction: column; gap: 6px; }
.mk-pos-ticket {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 8px;
  padding: 5px 4px 5px 10px; border-radius: var(--pos-radio); background: rgba(var(--mk-brand-rgb), .06);
}
.mk-pos-ticket-de { display: flex; flex-direction: column; min-width: 0; }
.mk-pos-ticket-empresa { font-weight: 700; overflow-wrap: anywhere; }
.mk-pos-ticket-valor { font-size: var(--pos-xs); color: var(--mk-muted); font-variant-numeric: tabular-nums; }
.mk-pos-empresa-op { display: flex; align-items: baseline; gap: 8px; width: 100%; min-width: 0; font-size: 12.5px; line-height: 1.3; }
.mk-pos-empresa-nombre { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mk-pos-empresa-rut { flex: none; font-size: 10.5px; color: var(--mk-muted); font-variant-numeric: tabular-nums; }
/* La lista de empresas: filas bajas, para que quepan varias en la pantalla chica de la caja. */
.mk-pos-empresa-pop .mud-list-item { padding-top: 4px; padding-bottom: 4px; min-height: 0; }
.mk-pos-empresa-pop .mud-list-item-text { margin: 0; }
.mk-pos-cuenta { display: flex; flex-direction: column; gap: 4px; }
.mk-pos-cuenta-fila { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.mk-pos-cuenta-fila > span:first-child { min-width: 0; overflow-wrap: anywhere; }
.mk-pos-cuenta-fila.is-paga { margin-top: 2px; padding-top: 5px; border-top: 1px dashed var(--pos-borde); font-size: var(--pos-lg); font-weight: 800; }
.mk-pos-cuenta-fila.is-paga .mk-mono { font-size: var(--pos-xl); }
.mk-pos-sobra { padding: 6px 10px; border-radius: var(--pos-radio); background: #fdf3e1; border: 1px solid rgba(224, 160, 48, .6); font-size: var(--pos-xs); }
.mk-pos-medios { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; }
.mk-pos-medios.is-tres { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mk-pos-medios.is-billetes { grid-template-columns: repeat(auto-fit, minmax(68px, 1fr)); gap: 6px; }
.mk-pos-medio {
  appearance: none; font: inherit; font-size: var(--pos-md); font-weight: 600; cursor: pointer;
  height: var(--pos-control); padding: 0 8px; border: 1px solid var(--pos-borde); border-radius: var(--pos-radio);
  background: var(--mk-white); color: var(--mk-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-variant-numeric: tabular-nums; transition: background .12s ease;
}
.mk-pos-medio:hover:not(:disabled) { background: rgba(var(--mk-brand-rgb), .06); }
/* El elegido se ve igual con el mouse encima (antes el hover lo dejaba blanco sobre casi blanco). */
.mk-pos-medio.is-activo, .mk-pos-medio.is-activo:hover:not(:disabled) { background: var(--mk-brand); border-color: var(--mk-brand); color: #fff; }
.mk-pos-medio:disabled { opacity: .5; cursor: default; }
.mk-pos-enlace { align-self: flex-start; appearance: none; font: inherit; font-size: var(--pos-xs); padding: 0; border: 0; background: none;
  color: var(--mk-brand); text-decoration: underline; cursor: pointer; }
.mk-pos-enlace:disabled { opacity: .5; cursor: default; }
.mk-pos-vuelto { display: flex; justify-content: space-between; align-items: baseline; font-weight: 700; color: var(--mk-success); }
.mk-pos-vuelto b { font-size: 18px; }
.mk-pos-vuelto.is-falta { color: var(--mk-danger); }
.mk-pos-cobro-pie { flex: none; display: flex; flex-direction: column; gap: 6px; padding-top: 6px; border-top: 1px solid var(--mk-border); }
.mk-pos .mk-pos-cobrar { height: 42px; font-size: var(--pos-lg); font-weight: 700; border-radius: 9px; }
.mk-pos-resultado { padding: 7px 10px; }
.mk-pos-hoy {
  appearance: none; font: inherit; font-size: var(--pos-xs); cursor: pointer; display: flex; justify-content: space-between; align-items: center;
  padding: 2px 0; border: 0; background: transparent; color: var(--mk-muted);
}
.mk-pos-resumen { display: flex; flex-direction: column; gap: 2px; max-height: 28vh; overflow-y: auto; font-size: var(--pos-xs); }
.mk-pos-resumen-fila { display: flex; justify-content: space-between; gap: 8px; }
.mk-pos-resumen-fila.is-sub { padding-left: 12px; color: var(--mk-muted); }

/* Mientras «Cobrar» cuenta los diez segundos, lo demás no se toca: solo «Cancelar» o «Confirmar». */
.mk-pos-cuerpo.is-confirmando .mk-pos-catalogo,
.mk-pos-cuerpo.is-confirmando .mk-pos-carro,
.mk-pos-cuerpo.is-confirmando .mk-pos-borradores,
.mk-pos-cuerpo.is-confirmando .mk-pos-pasos { pointer-events: none; opacity: .55; transition: opacity .15s ease; }
.mk-pos-confirmar { display: flex; flex-direction: column; gap: 8px; }
.mk-pos-confirmar-barra { height: 6px; border-radius: 3px; background: rgba(var(--mk-brand-rgb), .12); overflow: hidden; }
.mk-pos-confirmar-barra span { display: block; height: 100%; background: var(--mk-brand); animation: mk-pos-cuenta 10s linear forwards; }
@keyframes mk-pos-cuenta { from { width: 100%; } to { width: 0%; } }
.mk-pos-confirmar-botones { display: grid; grid-template-columns: 1fr 2fr; gap: 8px; }
.mk-pos-confirmar-botones .mk-pos-boton { height: 42px; border-radius: 9px; }
.mk-pos-ensayo-listo { border: 1px solid var(--mud-palette-info); border-radius: 10px; }

/* Cobrando en Bsale (10-11-2026): una fila por documento con su paso, y el reloj. */
.mk-cobrando { display: flex; flex-direction: column; gap: 4px; padding: 8px 10px; border: 1px solid rgba(var(--mk-brand-rgb), .35);
  border-radius: 10px; background: rgba(var(--mk-brand-rgb), .05); font-size: var(--pos-md); }
.mk-cobrando-titulo { display: flex; align-items: center; gap: 8px; font-weight: 800; }
.mk-cobrando-reloj { margin-left: auto; color: var(--mk-muted); font-weight: 600; }
.mk-cobrando-fila { display: flex; justify-content: space-between; gap: 8px; }
.mk-cobrando-fila > span:last-child { text-align: right; color: var(--mk-muted); }
.mk-cobrando-fila.is-bien > span:last-child { color: var(--mk-success); font-weight: 700; }
.mk-cobrando-fila.is-aviso > span:last-child { color: #b45309; font-weight: 700; }
.mk-cobrando-fila.is-mal > span:last-child { color: var(--mk-danger); font-weight: 700; }
.mk-cobrando-fila.is-anulado > span:last-child { font-style: italic; }
.mk-cobrando-aviso { margin-top: 2px; font-size: var(--pos-xs); font-weight: 700; color: var(--mk-danger); }

/* El ensayo (CajaCafeteria, modo Ensayo): lo que habría hecho la venta, en Bsale y en Makki. */
.mk-ensayo .mud-button-root { text-transform: none; letter-spacing: 0; }
.mk-ensayo-titulo { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-weight: 800; }
.mk-ensayo-titulo .mk-pos-previa { font-size: 12px; }
.mk-ensayo-seccion { margin: 6px 0 8px; font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--mk-muted); }
.mk-ensayo-doc { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; margin-bottom: 12px; border: 1px solid var(--mk-border); border-radius: 10px; }
.mk-ensayo-doc-cabeza { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-size: 16px; }
.mk-ensayo-tipo { font-size: 12px; color: var(--mk-muted); }
.mk-ensayo-dato { font-size: 13px; color: var(--mk-muted); }
.mk-ensayo-lineas { width: 100%; border-collapse: collapse; font-size: 13px; }
.mk-ensayo-lineas th { text-align: left; font-weight: 700; color: var(--mk-muted); border-bottom: 1px solid var(--mk-border); padding: 4px 6px; }
.mk-ensayo-lineas td { padding: 4px 6px; border-bottom: 1px solid var(--mk-border); }
.mk-ensayo-lineas .text-right { text-align: right; }
.mk-ensayo-aviso { display: flex; gap: 6px; align-items: flex-start; padding: 6px 10px; border-radius: 8px; background: #fdf3e1; border: 1px solid rgba(224, 160, 48, .6); font-size: 13px; }
.mk-ensayo-aviso .mud-icon-root { font-size: 18px; color: #b45309; flex: none; }
.mk-ensayo-pedido summary { cursor: pointer; font-size: 13px; color: var(--mk-brand); }
.mk-ensayo-pedido pre { margin: 6px 0 0; padding: 10px; max-height: 280px; overflow: auto; border-radius: 8px; background: #f6f5f8; font-size: 12px; }
.mk-ensayo-reparto { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; font-size: 13px; color: var(--mk-muted); }
.mk-ensayo-cuerpo { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 20px; align-items: start; }
@media (max-width: 900px) { .mk-ensayo-cuerpo { grid-template-columns: minmax(0, 1fr); } }
.mk-ensayo-voucher { position: sticky; top: 0; }
.mk-ensayo-voucher iframe { display: block; width: 100%; height: min(70vh, 640px); border: 1px solid var(--mk-border); border-radius: 10px; background: #fff; }
.mk-ensayo-acciones { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 4px; font-size: 14px; }

/* Pestaña «Ventas»: las ventas del día, con sus documentos, para reimprimir y anular. */
.mk-pos-ventas-cabeza { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }
.mk-pos-ventas-dia { font-weight: 800; min-width: 70px; text-align: center; }
.mk-pos-ventas { display: flex; flex-direction: column; border: 1px solid var(--mk-border); border-radius: var(--mk-radius-sm); background: var(--mk-white); }
.mk-pos-venta { display: flex; flex-direction: column; gap: 3px; padding: 10px 14px; border-bottom: 1px solid var(--mk-border); }
.mk-pos-venta:last-child { border-bottom: 0; }
.mk-pos-venta.is-anulada { background: rgba(0, 0, 0, .025); }
.mk-pos-venta.is-anulada .mk-pos-venta-quien, .mk-pos-venta.is-anulada b { text-decoration: line-through; color: var(--mk-muted); }
.mk-pos-venta-linea { display: flex; align-items: baseline; gap: 10px; }
.mk-pos-venta-hora { color: var(--mk-muted); font-size: .85rem; }
.mk-pos-venta-quien { flex: 1; font-weight: 700; min-width: 0; overflow-wrap: anywhere; }
.mk-pos-venta-dato { font-size: .82rem; color: var(--mk-muted); display: flex; flex-wrap: wrap; gap: 4px 6px; }
.mk-pos-doc { padding: 1px 8px; border-radius: var(--mk-radius-pill); background: rgba(var(--mk-brand-rgb), .07); color: var(--mk-ink); font-variant-numeric: tabular-nums; }
.mk-pos-doc.is-anulado { text-decoration: line-through; color: var(--mk-muted); }
.mk-pos-venta-anulada { font-size: .82rem; color: var(--mk-danger); }
.mk-pos-venta-acciones { display: flex; gap: 4px; margin-left: -8px; }
.mk-pos-anular { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; padding: 10px 12px;
  border: 1px solid rgba(192, 57, 43, .35); border-radius: var(--mk-radius-sm); background: #fbeceb; }
.mk-pos-anular-titulo { font-weight: 800; }

/* Boleta o factura, arriba del cobro; con factura, la empresa debajo. */
.mk-pos-documento { display: flex; flex-direction: column; gap: 6px; }
.mk-pos-documento-fila { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.mk-seg-chico { border-color: var(--pos-borde); }
.mk-seg-chico .mk-seg-btn { min-height: 24px; padding: 0 11px; font-size: 12px; font-weight: 600; border-left-color: var(--pos-borde); }
.mk-seg-chico .mk-seg-btn.is-activo { background: var(--mk-brand); color: #fff; }
.mk-seg-chico .mk-seg-btn:disabled { cursor: default; }

/* Bitácora: lo enviado y lo respondido, lado a lado y con scroll propio (04-11-2026). */
.mk-bitacora-json { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 10px; }
.mk-bitacora-json pre {
  margin: 4px 0 0; padding: 8px 10px; max-height: 360px; overflow: auto; white-space: pre-wrap; word-break: break-word;
  font-size: 12px; line-height: 1.35; background: rgba(var(--mk-brand-rgb), .04); border: 1px solid var(--mk-border); border-radius: 6px;
}