/* modo-cocina: the full-screen board (kitchen, packing, front desk). Its own dark, high-contrast look: it is read from
   a distance on a tablet, the same with Vidrio, Rapport and any business colour (the colour only marks the buttons). */
/* the row of tools under the orders' toolbar (the same rule in each panel module that adds a button to it) */
.mp-herr { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 12px 0; }
.mp-herr .ndf-tag { order: 9; }
@media (pointer: coarse), (max-width: 1023px) { .mp-herr .ndf-btn { min-height: 44px; } }

html.mco-on, html.mco-on body { overflow: hidden; }
.mco { position: fixed; inset: 0; z-index: 2147482000; display: flex; flex-direction: column; gap: 12px; overflow: auto; overscroll-behavior: contain;
  padding: max(14px, env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) max(16px, env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
  background: #0e0f12; color: #f5f5f7; font: 500 16px/1.4 var(--font-body, system-ui), system-ui, sans-serif; color-scheme: dark; }
.mco[data-mov="si"] { animation: mco-in .22s ease-out both; }
@keyframes mco-in { from { opacity: 0; transform: scale(.985); } }
.mco-head { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; justify-content: space-between; }
.mco-tit { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: baseline; min-width: 0; }
.mco-tit h2 { margin: 0; font: 800 clamp(22px, 3vw, 32px)/1.1 var(--font-display, var(--font-body, system-ui)), system-ui, sans-serif; letter-spacing: -.01em; }
.mco-tit > span:not(.ndf-tag) { color: #c4c5cc; font-weight: 600; }
.mco-reloj { font: 800 clamp(20px, 2.6vw, 28px)/1 system-ui, sans-serif; font-variant-numeric: tabular-nums; color: #fff; }
.mco-tit .ndf-tag { align-self: center; }
.mco-hacts { display: flex; flex-wrap: wrap; gap: 8px; }
.mco-vivo { margin: 0; min-height: 1.4em; color: #fde68a; font-weight: 700; }
.mco-vivo:empty { min-height: 0; }
.mco-cols { display: grid; gap: 14px; grid-template-columns: repeat(var(--mco-n, 3), minmax(0, 1fr)); align-items: start; flex: 1; }
.mco-cols[data-n="2"] { --mco-n: 2; }
.mco-cols[data-n="3"] { --mco-n: 3; }
.mco-col { min-width: 0; background: #17181c; border: 1px solid #2a2b31; border-radius: 18px; padding: 12px; }
.mco-col h3 { margin: 0 0 10px; display: flex; align-items: center; justify-content: space-between; gap: 8px; font: 800 clamp(17px, 1.8vw, 21px)/1.2 var(--font-body, system-ui), system-ui, sans-serif; }
.mco-n { min-width: 34px; height: 34px; padding: 0 10px; border-radius: 999px; background: #2a2b31; display: inline-grid; place-items: center; font-size: 17px; font-variant-numeric: tabular-nums; }
.mco-col[data-col="0"] h3 { color: #fde68a; }
.mco-col[data-col="1"] h3 { color: #93c5fd; }
.mco-col[data-col="2"] h3 { color: #86efac; }
.mco-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.mco-card { background: #1f2025; border: 2px solid #31323a; border-radius: 16px; padding: 14px; display: grid; gap: 10px; }
.mco-card[data-tono="tarde"] { border-color: #f87171; }
.mco-card[data-tono="pronto"] { border-color: #fbbf24; }
.mco-card.nuevo { border-color: #fde68a; box-shadow: 0 0 0 4px rgba(253, 230, 138, .35); }
.mco[data-mov="si"] .mco-card.nuevo { animation: mco-flash .9s ease-in-out 4; }
@keyframes mco-flash { 50% { background: #3b3420; box-shadow: 0 0 0 8px rgba(253, 230, 138, .5); } }
.mco-top { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; justify-content: space-between; }
.mco-code { font: 800 clamp(18px, 1.7vw, 22px)/1.1 ui-monospace, "SF Mono", Consolas, monospace; letter-spacing: .02em; }
.mco-t { display: grid; justify-items: end; text-align: right; color: #c4c5cc; font-size: 14px; }
.mco-t strong { color: #fff; font-size: 17px; font-variant-numeric: tabular-nums; }
.mco-t[data-tono="tarde"] strong { color: #fca5a5; }
.mco-t[data-tono="pronto"] strong { color: #fcd34d; }
.mco-items { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font: 700 clamp(19px, 1.9vw, 24px)/1.25 var(--font-body, system-ui), system-ui, sans-serif; overflow-wrap: anywhere; }
.mco-q { display: inline-block; min-width: 2.2ch; color: #fde68a; font-variant-numeric: tabular-nums; }
.mco-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.mco-chips span { padding: 3px 10px; border-radius: 999px; background: #2a2b31; color: #e4e4ea; font-size: 14px; font-weight: 600; }
.mco-acts { display: flex; flex-wrap: wrap; gap: 8px; }
.mco-btn { flex: 1 1 auto; min-height: 56px; padding: 10px 20px; border-radius: 14px; border: 2px solid var(--accent, #6d28d9); background: var(--accent, #6d28d9);
  color: var(--on-accent, #fff); font: 800 18px/1.15 var(--font-body, system-ui), system-ui, sans-serif; cursor: pointer; touch-action: manipulation; }
.mco-btn.sec { background: transparent; border-color: #4a4b53; color: #f5f5f7; font-weight: 700; }
.mco-head .mco-btn { flex: none; min-height: 48px; font-size: 16px; }
.mco-btn:focus-visible { outline: 3px solid #7cc4ff; outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) { .mco-btn:hover { filter: brightness(1.08); } .mco-btn.sec:hover { border-color: #8a8b93; } }
.mco-vacio { margin: 6px 2px; color: #c4c5cc; font-size: 16px; }
.mco-undo { position: sticky; bottom: 0; margin-top: auto; align-self: center; display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; justify-content: center;
  padding: 10px 12px 10px 18px; border-radius: 16px; background: #f5f5f7; color: #111114; font-weight: 700; box-shadow: 0 16px 40px -12px rgba(0, 0, 0, .7); }
.mco-undo[hidden] { display: none; }
.mco-undo .mco-btn.sec { min-height: 44px; flex: none; border-color: #111114; color: #111114; font-size: 15px; padding: 8px 16px; }
@media (max-width: 899px) { .mco-cols, .mco-cols[data-n] { grid-template-columns: minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) { .mco[data-mov], .mco-card.nuevo { animation: none !important; } }
@media (max-width: 479px) { .mco-top { flex-direction: column; align-items: flex-start; } .mco-t { justify-items: start; text-align: left; } }