/* app-avisos: «Tu panel en el celular» (install + new-order notice) */
.nd-band .mpa-band { font: inherit; color: #f4f4f6; padding: 5px 12px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .35); background: rgba(255, 255, 255, .06);
  cursor: pointer; white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; }
.nd-band .mpa-band::before { content: ""; width: 14px; height: 14px; background: currentColor; flex: none;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9'/%3E%3Cpath d='M10.3 21a1.94 1.94 0 0 0 3.4 0'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9'/%3E%3Cpath d='M10.3 21a1.94 1.94 0 0 0 3.4 0'/%3E%3C/svg%3E") center / contain no-repeat; }
.nd-band .mpa-band:hover { border-color: rgba(255, 255, 255, .6); }
.nd-band .mpa-band:focus-visible { outline: 2px solid #7cc4ff; outline-offset: 2px; }

/* the count on the tab button (both skins give their tab buttons position: relative) */
#tabs [data-mpa-n]::after { content: attr(data-mpa-n); position: absolute; top: -6px; right: -6px; z-index: 2; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; box-sizing: border-box;
  background: #dc2626; color: #fff; font: 700 12px/20px system-ui, sans-serif; text-align: center; box-shadow: 0 0 0 2px rgba(0, 0, 0, .25); pointer-events: none; }
/* the banner: a dark card readable over Vidrio, Rapport and any business colour. It sits at the bottom (the right
   corner on a computer), never over the «Datos de ejemplo» band and its buttons at the top */
.mpa-banner { position: fixed; z-index: 2147483000; left: 50%; bottom: calc(env(safe-area-inset-bottom, 0px) + 12px); --mpa-t: translateX(-50%); --mpa-dy: 18px; transform: var(--mpa-t);
  width: min(620px, calc(100vw - 20px)); box-sizing: border-box; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px 14px; align-items: center;
  padding: 14px 14px 14px 16px; border-radius: 18px; background: #15161a; color: #f6f6f8; border: 1px solid rgba(255, 255, 255, .14);
  box-shadow: 0 24px 60px -18px rgba(0, 0, 0, .6), inset 4px 0 0 var(--accent, #6d28d9); font: 500 15px/1.4 var(--font-body, system-ui), system-ui, sans-serif; }
.mpa-banner[data-mov="si"] { animation: mpa-in .42s cubic-bezier(.2, .9, .3, 1.2) both, mpa-pulso 1.1s ease-in-out .45s 3; }
@keyframes mpa-in { from { opacity: 0; transform: var(--mpa-t) translateY(var(--mpa-dy)) scale(.96); } }
@keyframes mpa-pulso { 50% { box-shadow: 0 24px 60px -18px rgba(0, 0, 0, .6), inset 4px 0 0 var(--accent, #6d28d9), 0 0 0 6px color-mix(in srgb, var(--accent, #6d28d9) 45%, transparent); } }
.mpa-b-ico { width: 40px; height: 40px; border-radius: 12px; background: var(--accent, #6d28d9); position: relative; }
.mpa-b-ico::after { content: ""; position: absolute; inset: 9px; background: var(--on-accent, #fff);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9'/%3E%3Cpath d='M10.3 21a1.94 1.94 0 0 0 3.4 0'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9'/%3E%3Cpath d='M10.3 21a1.94 1.94 0 0 0 3.4 0'/%3E%3C/svg%3E") center / contain no-repeat; }
.mpa-b-txt { display: grid; gap: 2px; min-width: 0; }
.mpa-b-txt b { font-size: 17px; overflow-wrap: anywhere; }
.mpa-b-txt span { color: #c9cad2; overflow-wrap: anywhere; }
.mpa-b-txt .mpa-b-mas { color: #c9cad2; font-weight: 600; font-size: 14px; }
.mpa-b-acts { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.mpa-b-btn { font: 600 14px/1.2 var(--font-body, system-ui), system-ui, sans-serif; min-height: 44px; padding: 8px 16px; border-radius: 999px; cursor: pointer;
  border: 1px solid rgba(255, 255, 255, .3); background: transparent; color: #f6f6f8; }
.mpa-b-btn.main { background: var(--accent, #6d28d9); border-color: var(--accent, #6d28d9); color: var(--on-accent, #fff); font-weight: 700; }
.mpa-b-x { margin-left: auto; width: 44px; height: 44px; border-radius: 999px; border: 0; background: rgba(255, 255, 255, .08); color: #f6f6f8; font: 400 24px/1 system-ui, sans-serif; cursor: pointer; }
.mpa-b-btn:focus-visible, .mpa-b-x:focus-visible { outline: 2px solid #7cc4ff; outline-offset: 2px; }
@media (min-width: 640px) { .mpa-banner { grid-template-columns: auto minmax(0, 1fr) auto; } .mpa-b-acts { grid-column: auto; flex-wrap: nowrap; } }
@media (min-width: 1024px) { .mpa-banner { left: auto; right: 24px; bottom: 24px; width: min(560px, calc(100vw - 48px)); --mpa-t: translate(0); } }
/* while a «Deshacer» bar is on screen (panel.js #pvUndo, or the demo's own #ndfUndo) the banner stands above it, so the
   bar and its button stay visible and tappable at any width */
html:has(:is(#pvUndo, #ndfUndo):not([hidden])) .mpa-banner { bottom: calc(env(safe-area-inset-bottom, 0px) + 92px); }
@media (prefers-reduced-motion: reduce) { .mpa-banner[data-mov] { animation: none; } }

/* the tab */
.mpa-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); align-items: start; }
.mpa-sec h3 { margin-bottom: 10px; }
.mpa-app { display: flex; gap: 14px; align-items: center; margin-bottom: 10px; }
.mpa-app b { display: block; margin-bottom: 2px; }
.mpa-ico { width: 64px; height: 64px; border-radius: 15px; flex: none; box-shadow: 0 6px 18px -8px rgba(0, 0, 0, .45); }
.mpa-ok, .mpa-pasos { margin: 0 0 8px; font-weight: 600; }
.mpa-lista { margin: 0 0 4px; padding-left: 18px; display: grid; gap: 6px; }
.mpa-hist { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.mpa-hist li { display: flex; gap: 10px; align-items: center; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid color-mix(in srgb, currentColor 12%, transparent); }
.mpa-hist li > div { min-width: 0; }
.mpa-hist p { margin: 2px 0 0; overflow-wrap: anywhere; }
.mpa-nuevo { margin-left: 8px; padding: 1px 8px; border-radius: 999px; background: #dc2626; color: #fff; font-size: 12px; font-weight: 700; }
@media (pointer: coarse), (max-width: 1023px) { .nd-band .mpa-band { min-height: 44px; } }