/* Prontu — componentes y pantallas. Solo variables de tokens.css; prefijo pr-. */

/* Base */
body { margin: 0; font-family: var(--font-sans); background: var(--fondo); color: var(--tinta); -webkit-font-smoothing: antialiased; }
a { color: var(--enlace); text-underline-offset: 3px; }
a:hover { color: var(--tinta); text-decoration-thickness: 2px; }
.pr-icon { flex: none; display: block; }
.pr-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.pr-hidden { display: none; }
.pr-inline-form { display: inline; margin: 0; }
.pr-noscroll { overflow: hidden; }
.pr-mark { flex: none; }
.pr-mark-fondo { fill: var(--tinta); }
.pr-mark-asta { fill: var(--fondo); }
.pr-mark-boton { fill: var(--coral); }
.pr-logo { display: inline-flex; align-items: center; gap: var(--space-2); }
.pr-logo-word { font-family: var(--font-display); font-weight: 800; font-size: 26px; letter-spacing: -0.03em; line-height: 1; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0s !important; transition-delay: 0s !important; animation-duration: 0s !important; }
}

/* Button */
.pr-btn { font: inherit; font-weight: 700; line-height: 20px; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); box-sizing: border-box;
  border: 2px solid var(--tinta); border-radius: var(--radius-md); background: var(--fondo-elevado); color: var(--tinta); cursor: pointer; white-space: nowrap; text-decoration: none;
  box-shadow: var(--sombra-pop); transition: transform .12s cubic-bezier(.34,1.56,.64,1), box-shadow .12s; }
.pr-btn:hover { color: var(--tinta); }
.pr-btn-md { min-height: 48px; padding: 0 var(--space-6); font-size: 16px; }
.pr-btn-sm { min-height: 44px; padding: 0 var(--space-4); font-size: 14px; }
.pr-btn-lg { min-height: 60px; padding: 0 var(--space-8); font-size: 18px; }
.pr-btn-full { width: 100%; }
.pr-btn-primario, .pr-btn-primario:hover { background: var(--tinta); color: var(--fondo); border-color: var(--tinta); box-shadow: var(--sombra-coral); }
.pr-btn-fantasma { background: transparent; border-color: transparent; box-shadow: none; text-decoration: underline; text-underline-offset: 3px; }
.pr-btn:hover:not(:disabled) { transform: translateY(-1px); }
.pr-btn-fantasma:hover:not(:disabled) { transform: none; text-decoration-thickness: 2px; }
.pr-btn:active:not(:disabled) { transform: translateY(4px); box-shadow: 0 0 0 0 transparent; }
.pr-btn-fantasma:active:not(:disabled) { transform: none; }
.pr-btn:disabled { opacity: .45; cursor: not-allowed; }
.pr-btn:focus-visible, .pr-cobrar-btn:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; }

/* Input */
.pr-field { display: grid; gap: var(--space-2); align-content: start; }
.pr-field-label { font-size: 14px; line-height: 18px; font-weight: 700; }
.pr-input { font: inherit; font-size: 16px; min-height: 48px; padding: 0 var(--space-4); border: 2px solid var(--tinta); border-radius: var(--radius-md);
  background: var(--fondo-elevado); color: var(--tinta); box-sizing: border-box; width: 100%; }
select.pr-input { appearance: none; padding-right: var(--space-12); cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 22px) 50%, calc(100% - 16px) 50%; background-size: 6px 6px; background-repeat: no-repeat; }
.pr-input::placeholder { color: var(--tinta-suave); }
.pr-input:focus { outline: 2px solid var(--foco); outline-offset: 2px; }
.pr-input-mono { font-family: var(--font-mono); letter-spacing: .02em; }
.pr-field-msg { font-size: 13px; line-height: 18px; color: var(--tinta-suave); }
.pr-field-error .pr-input { border-color: var(--alerta); }
.pr-field-msg-error { color: var(--alerta); font-weight: 500; }
.pr-field-msg-error::before { content: "⚠ "; }

/* Badge */
.pr-badge { display: inline-flex; align-items: center; gap: var(--space-1); height: 24px; padding: 0 var(--space-3); border-radius: var(--radius-pill);
  font-size: 13px; font-weight: 700; line-height: 1; white-space: nowrap; background: var(--linea); color: var(--tinta); }
.pr-badge-exito { background: var(--exito-suave); color: var(--exito); }
.pr-badge-promo { background: var(--coral-suave); color: var(--coral-texto); }
.pr-badge-alerta { background: transparent; color: var(--alerta); box-shadow: inset 0 0 0 2px var(--alerta); }
.pr-badge-marca { background: var(--coral); color: var(--sobre-coral); }

/* ProductCard */
.pr-card { display: grid; gap: var(--space-2); padding: var(--space-4); border: 2px solid var(--tinta); border-radius: var(--radius-md);
  background: var(--fondo-elevado); box-shadow: var(--sombra-pop); width: 260px; box-sizing: border-box; }
.pr-card-top { display: flex; justify-content: space-between; align-items: start; gap: var(--space-2); }
.pr-card-name { margin: 0; min-width: 0; font-size: 18px; line-height: 24px; font-weight: 700; }
.pr-card-code { font-family: var(--font-mono); font-size: 12px; line-height: 16px; color: var(--tinta-suave); }
.pr-card-bottom { display: flex; justify-content: space-between; align-items: end; gap: var(--space-2); margin-top: var(--space-2); }
.pr-card-prices { display: grid; }
.pr-card-old { font-size: 13px; color: var(--tinta-suave); }
.pr-card-price { font-family: var(--font-display); font-size: 26px; line-height: 28px; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pr-card-price-promo { color: var(--coral-texto); }
.pr-card-stock { font-size: 13px; font-weight: 500; color: var(--tinta-suave); }
.pr-card-out { box-shadow: none; border-style: dashed; }
.pr-card-out .pr-card-price { color: var(--tinta-suave); }

/* PosTile: tarjeta de la grilla de la caja. Toda la tarjeta es el botón; sombra de tinta, nunca coral. */
.pr-pos-tile-form { display: grid; margin: 0; }
.pr-pos-tile { font: inherit; text-align: left; display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-1); width: 100%; min-height: 104px; box-sizing: border-box;
  padding: var(--space-3); border: 2px solid var(--tinta); border-radius: var(--radius-md); background: var(--fondo-elevado); color: var(--tinta);
  box-shadow: var(--sombra-pop); cursor: pointer; transition: transform .12s cubic-bezier(.34,1.56,.64,1), box-shadow .12s; }
.pr-pos-tile:hover { transform: translateY(-1px); }
.pr-pos-tile:active { transform: translateY(4px); box-shadow: 0 0 0 0 transparent; }
.pr-pos-tile:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; }
.pr-pos-tile-name { font-size: 14px; line-height: 18px; font-weight: 700; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pr-pos-tile-price { margin-top: auto; font-family: var(--font-display); font-size: 22px; line-height: 26px; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pr-pos-tile-stock { font-size: 12px; line-height: 16px; font-weight: 700; color: var(--tinta-suave); }

/* CobrarBar */
.pr-cobrar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-3) var(--space-3) var(--space-3) var(--space-6);
  background: var(--tinta); color: var(--fondo); border-radius: var(--radius-lg); max-width: 520px; }
.pr-cobrar-info { display: grid; min-width: 0; }
/* "Ver ticket · N": solo en el celular, donde abre el ticket como hoja. */
.pr-cobrar-toggle { display: none; font: inherit; text-align: left; align-content: center; min-height: 64px;
  margin: calc(-1 * var(--space-2)) 0 calc(-1 * var(--space-2)) calc(-1 * var(--space-3)); padding: var(--space-2) var(--space-3); border: 0;
  border-radius: var(--radius-md); background: transparent; color: var(--fondo); cursor: pointer; }
.pr-cobrar-toggle .pr-cobrar-label { display: inline-flex; align-items: center; gap: var(--space-1); opacity: 1; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.pr-cobrar-toggle:focus-visible { outline: 2px solid var(--fondo); outline-offset: 2px; }
.pr-cobrar-toggle-open, .pr-ticket-open .pr-cobrar-toggle-closed { display: none; }
.pr-ticket-open .pr-cobrar-toggle-open { display: inline; }
/* Ticket vacío: no hay hoja para abrir; queda como una etiqueta más. */
.pr-cobrar-toggle:disabled { cursor: default; }
.pr-cobrar-toggle:disabled .pr-cobrar-label { opacity: .75; font-weight: 500; text-decoration: none; }
.pr-cobrar-toggle:disabled .pr-icon { display: none; }
.pr-ticket-close, .pr-ticket-scrim { display: none; }
.pr-ticket-close { align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: var(--radius-md); background: transparent; color: var(--tinta); cursor: pointer; }
.pr-ticket-close:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; }
.pr-cobrar-label { font-size: 13px; line-height: 18px; font-weight: 500; color: var(--fondo); opacity: .75; }
.pr-cobrar-total { font-family: var(--font-display); font-size: 40px; line-height: 44px; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pr-cobrar-btn { font: inherit; font-size: 20px; font-weight: 800; display: inline-flex; align-items: center; gap: var(--space-3);
  min-height: 64px; padding: 0 var(--space-8) 0 var(--space-6); border: 2px solid var(--sobre-coral); border-radius: var(--radius-md); background: var(--coral); color: var(--sobre-coral);
  cursor: pointer; transition: transform .12s cubic-bezier(.34,1.56,.64,1); }
.pr-cobrar-btn:active:not(:disabled) { transform: scale(.96); }
/* Sin productos, Cobrar no se prende: el coral aparece recién cuando hay algo para cobrar. */
.pr-cobrar-btn:disabled { background: transparent; color: var(--fondo); border-color: currentColor; opacity: .45; cursor: not-allowed; }
.pr-speed { display: grid; gap: 4px; justify-items: end; }
.pr-speed i { display: block; height: 4px; border-radius: var(--radius-pill); background: currentColor; }
.pr-speed i:first-child { width: 14px; } .pr-speed i:last-child { width: 9px; }

/* Avisos (flash y errores) */
.pr-flash { display: flex; align-items: center; gap: var(--space-2); margin: 0; padding: var(--space-3) var(--space-4); border: 2px solid var(--tinta); border-radius: var(--radius-md);
  background: var(--fondo-elevado); font-weight: 500; }
.pr-flash-alerta { border-color: var(--alerta); color: var(--alerta); }
.pr-flash-exito { border-color: var(--exito); color: var(--exito); background: var(--exito-suave); }
.pr-flash svg { flex: none; }

/* ───────────────────────── App: sidebar común + contenido ───────────────────────── */
.pr-app { --sidebar-w: 240px; --page-max: 1160px; min-height: 100vh; min-height: 100dvh; }
.pr-main { min-width: 0; display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; }

.pr-sidebar { display: flex; flex-direction: column; gap: var(--space-4); box-sizing: border-box; padding: var(--space-4) var(--space-3);
  background: var(--fondo-elevado); border-right: 2px solid var(--linea); overflow-y: auto; overscroll-behavior: contain; }
.pr-sidebar-head { display: flex; align-items: center; gap: var(--space-2); padding: 0 var(--space-1); }
.pr-sidebar-brand { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 44px; margin-right: auto; border-radius: var(--radius-sm); color: var(--tinta); text-decoration: none; }
.pr-sidebar-brand:hover { color: var(--tinta); }
.pr-sidebar-brand .pr-logo-word { font-size: 24px; }
.pr-appbar-menu, .pr-sidebar-close, .pr-rail-toggle { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0;
  border: 2px solid transparent; border-radius: var(--radius-md); background: transparent; color: var(--tinta); cursor: pointer; }
.pr-appbar-menu { border-color: var(--tinta); background: var(--fondo-elevado); }
.pr-sidebar-close:hover, .pr-rail-toggle:hover { background: var(--fondo); }
.pr-appbar-menu:focus-visible, .pr-sidebar-close:focus-visible, .pr-rail-toggle:focus-visible, .pr-sidebar-brand:focus-visible, .pr-nav-item:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; }
.pr-rail-toggle .pr-rail-open { display: none; }
.pr-nav { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-1); }
/* Módulos del menú: título chico arriba de cada grupo; el grupo del pie (Ajustes) baja hasta el usuario. */
.pr-nav-groups { flex: 1 0 auto; display: flex; flex-direction: column; gap: var(--space-4); }
.pr-nav-group { display: grid; gap: var(--space-1); }
.pr-nav-group-bottom { margin-top: auto; }
.pr-nav-heading { margin: 0; padding: 0 var(--space-3); font-size: 12px; line-height: 16px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--tinta-suave); }
.pr-nav-form { display: grid; margin: 0; }
.pr-nav-item { position: relative; display: flex; align-items: center; gap: var(--space-3); width: 100%; min-height: 48px; box-sizing: border-box; padding: 0 var(--space-3);
  border: 0; border-radius: var(--radius-md); background: transparent; color: var(--tinta); font: inherit; font-size: 15px; font-weight: 700; line-height: 20px;
  text-align: left; text-decoration: none; cursor: pointer; }
.pr-nav-item:hover { background: var(--fondo); color: var(--tinta); }
.pr-nav-item[aria-current="page"], .pr-nav-item[aria-current="page"]:hover { background: var(--tinta); color: var(--fondo); }
.pr-nav-item[aria-current="page"]::before { content: ""; position: absolute; left: calc(-1 * var(--space-3)); top: 10px; bottom: 10px; width: 4px;
  border-radius: 0 var(--radius-pill) var(--radius-pill) 0; background: var(--tinta); }
.pr-nav-short { display: none; }
.pr-nav-quiet { font-weight: 500; }
.pr-sidebar-foot { margin-top: auto; display: grid; gap: var(--space-2); padding-top: var(--space-3); border-top: 2px solid var(--linea); }
.pr-who { display: flex; align-items: center; gap: var(--space-3); min-width: 0; padding: var(--space-1) var(--space-2); }
.pr-avatar { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%;
  background: var(--tinta); color: var(--fondo); font-family: var(--font-display); font-weight: 800; font-size: 16px; line-height: 1; }
.pr-who-text { display: grid; min-width: 0; }
.pr-who-name { font-size: 15px; line-height: 20px; }
.pr-who-where { font-size: 13px; line-height: 18px; color: var(--tinta-suave); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pr-scrim { display: none; }

@media (min-width: 1024px) {
  .pr-app { display: grid; grid-template-columns: var(--sidebar-w) minmax(0, 1fr); }
  .pr-sidebar { position: sticky; top: 0; height: 100vh; height: 100dvh; }
  .pr-appbar-menu, .pr-sidebar-close { display: none; }

  /* Riel de la caja: 72px, ícono con la palabra corta abajo. El atributo data-rail-caja lo pone un script
     en el head antes de pintar, así el riel expandido no parpadea al cargar. */
  :root:not([data-rail-caja="abierto"]) .pr-app-rail { --sidebar-w: 72px; }
  :root:not([data-rail-caja="abierto"]) .pr-app-rail .pr-sidebar { padding: var(--space-3) var(--space-1); gap: var(--space-3); }
  :root:not([data-rail-caja="abierto"]) .pr-app-rail .pr-sidebar-head { flex-direction: column; padding: 0; gap: var(--space-2); }
  :root:not([data-rail-caja="abierto"]) .pr-app-rail .pr-sidebar-brand { margin: 0; }
  :root:not([data-rail-caja="abierto"]) .pr-app-rail .pr-sidebar-brand .pr-logo-word { display: none; }
  :root:not([data-rail-caja="abierto"]) .pr-app-rail .pr-rail-toggle .pr-rail-open { display: block; }
  :root:not([data-rail-caja="abierto"]) .pr-app-rail .pr-rail-toggle .pr-rail-close { display: none; }
  :root:not([data-rail-caja="abierto"]) .pr-app-rail .pr-nav-item { flex-direction: column; justify-content: center; gap: 4px; min-height: 60px; padding: var(--space-2) 2px; font-size: 11px; line-height: 14px; text-align: center; }
  :root:not([data-rail-caja="abierto"]) .pr-app-rail .pr-nav-item:has(.pr-nav-short) .pr-nav-label { display: none; }
  :root:not([data-rail-caja="abierto"]) .pr-app-rail .pr-nav-short { display: block; }
  /* En el riel el título no entra: queda una rayita entre módulos (el nombre lo siguen leyendo los lectores de pantalla). */
  :root:not([data-rail-caja="abierto"]) .pr-app-rail .pr-nav-groups { gap: var(--space-2); }
  :root:not([data-rail-caja="abierto"]) .pr-app-rail .pr-nav-heading { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  :root:not([data-rail-caja="abierto"]) .pr-app-rail .pr-nav-group + .pr-nav-group::before { content: ""; justify-self: center; width: 32px; height: 2px; margin-bottom: var(--space-1); border-radius: var(--radius-pill); background: var(--linea); }
  :root:not([data-rail-caja="abierto"]) .pr-app-rail .pr-nav-item[aria-current="page"]::before { left: calc(-1 * var(--space-1)); top: var(--space-4); bottom: var(--space-4); }
  :root:not([data-rail-caja="abierto"]) .pr-app-rail .pr-who { justify-content: center; padding: 0; }
  :root:not([data-rail-caja="abierto"]) .pr-app-rail .pr-who-text { display: none; }
}

@media (max-width: 1023.98px) {
  .pr-sidebar { position: fixed; z-index: 40; top: 0; bottom: 0; left: 0; width: min(300px, 86vw); visibility: hidden; transform: translateX(-104%);
    border-right: 2px solid var(--tinta); transition: transform .22s cubic-bezier(.2,.8,.2,1), visibility 0s linear .22s; }
  .pr-drawer-open .pr-sidebar { visibility: visible; transform: none; transition: transform .22s cubic-bezier(.2,.8,.2,1); }
  .pr-scrim { display: block; position: fixed; inset: 0; z-index: 39; background: var(--velo); opacity: 0; visibility: hidden; transition: opacity .2s, visibility 0s linear .2s; }
  .pr-drawer-open .pr-scrim { opacity: 1; visibility: visible; transition: opacity .2s; }
  .pr-rail-toggle { display: none; }
}

/* Barra de arriba (dueño): en el celular es la barra con la hamburguesa; en la PC, el título de la página. */
.pr-appbar { display: flex; align-items: center; gap: var(--space-3); box-sizing: border-box; }
.pr-appbar-title { margin: 0; min-width: 0; font-family: var(--font-display); font-weight: 800; letter-spacing: -.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pr-appbar-end { margin-left: auto; display: flex; align-items: center; gap: var(--space-2); }
@media (max-width: 1023.98px) {
  .pr-appbar { position: sticky; top: 0; z-index: 20; min-height: 64px; padding: var(--space-2) var(--space-4); background: var(--fondo); border-bottom: 2px solid var(--linea); }
  .pr-appbar-title { font-size: 22px; line-height: 28px; }
}
@media (min-width: 1024px) {
  .pr-appbar { width: 100%; max-width: var(--page-max); margin: 0 auto; padding: var(--space-8) var(--space-8) 0; }
  .pr-appbar-title { font-size: 36px; line-height: 44px; }
}

/* Contenido de las pantallas del dueño. */
.pr-page { width: 100%; max-width: var(--page-max); margin: 0 auto; box-sizing: border-box; display: grid; align-content: start; gap: var(--space-6);
  padding: var(--space-4) var(--space-4) var(--space-12); }
@media (min-width: 768px) { .pr-page { padding: var(--space-6) var(--space-6) var(--space-12); } }
@media (min-width: 1024px) { .pr-page { padding: var(--space-6) var(--space-8) var(--space-12); } }
.pr-cols { display: grid; gap: var(--space-6); align-items: start; }
@media (min-width: 1024px) {
  .pr-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Hoy: sucursales y avisos uno arriba del otro hasta que la columna angosta entra (nombre, vendedor y total). */
  .pr-cols-wide-end { grid-template-columns: minmax(0, 1fr); }
}
@media (min-width: 1200px) { .pr-cols-wide-end { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); } }

/* Secciones, títulos chicos y barras de herramientas */
.pr-section { display: grid; gap: var(--space-3); align-content: start; min-width: 0; }
.pr-section-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); min-height: 32px; }
.pr-section-title, .pr-kicker { margin: 0; font-size: 12px; line-height: 16px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--tinta-suave); }
.pr-count { display: inline-flex; align-items: center; justify-content: center; min-width: 24px; height: 24px; padding: 0 var(--space-2); box-sizing: border-box;
  border-radius: var(--radius-pill); background: var(--tinta); color: var(--fondo); font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; }
.pr-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.pr-toolbar > .pr-search { flex: 1 1 280px; }
.pr-toolbar-actions { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); margin-left: auto; }
.pr-toolbar > .pr-chips { flex: 0 1 auto; }
.pr-search { position: relative; display: flex; align-items: center; margin: 0; }
.pr-search .pr-icon { position: absolute; left: var(--space-4); color: var(--tinta-suave); pointer-events: none; }
.pr-search .pr-input { padding-left: 48px; }
.pr-auth-link { font-weight: 500; min-height: 44px; display: inline-flex; align-items: center; justify-self: start; }
.pr-empty-state { display: grid; justify-items: center; gap: var(--space-3); padding: var(--space-12) var(--space-6); text-align: center; border: 2px dashed var(--linea); border-radius: var(--radius-lg); }
.pr-empty-state p { margin: 0; color: var(--tinta-suave); font-weight: 500; }

.pr-section-stack { display: grid; gap: var(--space-6); align-content: start; min-width: 0; }
.pr-avatar-sm { width: 28px; height: 28px; font-size: 13px; }
.pr-avatar-lg { width: 56px; height: 56px; font-size: 26px; }
.pr-pay-form { display: grid; margin: 0; }
.pr-num-plain { font-variant-numeric: tabular-nums; }
.pr-row-action { display: flex; justify-content: flex-end; min-width: 96px; }

/* Panel: tarjeta grande (formularios, resúmenes). */
.pr-panel { display: grid; gap: var(--space-4); align-content: start; padding: var(--space-6); background: var(--fondo-elevado); border: 2px solid var(--tinta); border-radius: var(--radius-lg); min-width: 0; }
.pr-form-panel { max-width: 640px; }
.pr-form-grid { display: grid; gap: var(--space-4); }
@media (min-width: 768px) { .pr-form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pr-form-grid > .pr-span-2 { grid-column: 1 / -1; } }
.pr-price-form { display: grid; gap: var(--space-4); }
@media (min-width: 768px) {
  .pr-price-form { grid-template-columns: minmax(0, 1fr) 260px auto; align-items: start; }
  .pr-price-form > .pr-btn { margin-top: 26px; }
}
.pr-form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-6); padding-top: var(--space-2); }
.pr-auth-form { display: grid; gap: var(--space-4); margin: 0; }
.pr-fieldset { display: grid; gap: var(--space-4); margin: 0; padding: var(--space-4); border: 2px solid var(--linea); border-radius: var(--radius-md); min-width: 0; }
.pr-fieldset legend { padding: 0 var(--space-2); }
.pr-fieldset-title { font-weight: 700; }
.pr-location { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.pr-location-status { display: inline-flex; align-items: center; gap: var(--space-2); font-weight: 500; }
.pr-location-status[hidden] { display: none; }
.pr-location-taken { color: var(--exito); }
.pr-location .pr-flash-alerta { border: 0; }
.pr-check { display: flex; align-items: center; gap: var(--space-3); min-height: 44px; font-weight: 700; }
.pr-check input { width: 24px; height: 24px; margin: 0; accent-color: var(--tinta); }

/* Filas: listas compactas dentro de una caja con contorno. */
.pr-rows { background: var(--fondo-elevado); border: 2px solid var(--tinta); border-radius: var(--radius-md); overflow: hidden; }
.pr-row { display: flex; align-items: center; gap: var(--space-3); min-height: 56px; box-sizing: border-box; padding: var(--space-2) var(--space-4); border-top: 1px solid var(--linea); color: var(--tinta); text-decoration: none; }
.pr-row:first-child { border-top: 0; }
a.pr-row:hover { background: var(--fondo); color: var(--tinta); }
.pr-row-name { flex: 1; min-width: 0; font-weight: 700; overflow-wrap: anywhere; }
.pr-row-main { display: flex; align-items: center; align-self: stretch; color: var(--tinta); text-decoration: none; }
.pr-row-main:hover { text-decoration: underline; }
.pr-row-sub { padding-left: var(--space-8); font-size: 15px; }
.pr-row-sub .pr-row-name { font-weight: 500; }
.pr-row-link { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.pr-row.pr-row-link { display: flex; gap: var(--space-2); }
.pr-row-off .pr-row-name { color: var(--tinta-suave); text-decoration: line-through; }
.pr-row-chev { flex: none; display: inline-flex; color: var(--tinta-suave); }
.pr-row .pr-btn-fantasma, .pr-row .pr-btn-sm { min-height: 44px; }
.pr-row form { display: flex; margin: 0; }
.pr-row-price, .pr-num { font-variant-numeric: tabular-nums; font-weight: 700; white-space: nowrap; }
.pr-cell-sub { font-size: 14px; color: var(--tinta-suave); }
.pr-row-code { font-family: var(--font-mono); font-size: 12px; color: var(--tinta-suave); }
.pr-rows-head { display: none; }
.pr-row-done .pr-row-name { color: var(--tinta-suave); }
.pr-row-done .pr-check-done { display: inline-flex; }

/* Tabla de datos: columnas alineadas, montos a la derecha. En el celular cada fila se apila. */
.pr-table-box { background: var(--fondo-elevado); border: 2px solid var(--tinta); border-radius: var(--radius-md); overflow: hidden; }
.pr-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.pr-table th { padding: var(--space-3) var(--space-4); border-bottom: 2px solid var(--linea); text-align: left; white-space: nowrap;
  font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--tinta-suave); }
.pr-table td { padding: var(--space-2) var(--space-4); height: 40px; border-top: 1px solid var(--linea); vertical-align: middle; }
.pr-table tbody tr:first-child td { border-top: 0; }
.pr-table .pr-num, .pr-table th.pr-num { text-align: right; }
.pr-table td.pr-num-soft { font-weight: 500; color: var(--tinta-suave); }
.pr-table .pr-cell-actions { width: 1%; white-space: nowrap; text-align: right; }
.pr-table .pr-cell-actions form { display: inline-flex; margin: 0; }
.pr-cell-product { display: grid; gap: 2px; min-width: 0; }
.pr-cell-product .pr-row-name { flex: none; }
@media (min-width: 768px) { .pr-show-sm { display: none !important; } }
@media (max-width: 767.98px) { .pr-hide-sm { display: none !important; } .pr-row-action { min-width: 84px; } }
@media (max-width: 767.98px) {
  .pr-table-stack thead { display: none; }
  .pr-table-stack, .pr-table-stack tbody { display: block; }
  .pr-table-stack tr { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-3); padding: var(--space-3) var(--space-4); border-top: 1px solid var(--linea); }
  .pr-table-stack tbody tr:first-child { border-top: 0; }
  .pr-table-stack td { display: block; height: auto; padding: 0; border: 0; }
  .pr-table-stack .pr-cell-grow { flex: 1 1 0; min-width: 0; }
  .pr-table-stack .pr-hide-sm { display: none; }
  .pr-table-stack .pr-cell-actions { width: auto; }
  .pr-table-stack .pr-cell-actions .pr-btn { padding: 0 var(--space-1); }
  .pr-table-stack td[data-label]::before { content: attr(data-label) " "; font-weight: 500; color: var(--tinta-suave); }
  .pr-table-stack td.pr-num[data-label] { order: 4; font-size: 14px; }
}

/* Selector de sucursal */
.pr-select { position: relative; }
.pr-select-pill { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 44px; padding: 0 var(--space-3) 0 var(--space-4); border: 2px solid var(--tinta); border-radius: var(--radius-pill);
  font-weight: 700; background: var(--fondo-elevado); color: var(--tinta); cursor: pointer; list-style: none; box-sizing: border-box; }
.pr-select-pill::-webkit-details-marker { display: none; }
.pr-select[open] .pr-select-pill .pr-icon { transform: rotate(180deg); }
.pr-menu { position: absolute; right: 0; top: calc(100% + var(--space-2)); z-index: 25; min-width: 200px; overflow: hidden; background: var(--fondo-elevado);
  border: 2px solid var(--tinta); border-radius: var(--radius-md); box-shadow: var(--sombra-pop); }
.pr-menu-item { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); min-height: 48px; padding: 0 var(--space-4); font-weight: 700; color: var(--tinta); text-decoration: none; border-top: 1px solid var(--linea); }
.pr-menu-item:first-child { border-top: 0; }
.pr-menu-item:hover { background: var(--fondo); color: var(--tinta); }

/* ───────────────────────── Hoy (dueño) ───────────────────────── */
.pr-today { display: grid; gap: var(--space-3); }
.pr-hero { display: grid; align-content: center; gap: var(--space-2); padding: var(--space-4) var(--space-6) var(--space-6); background: var(--tinta); color: var(--fondo); border-radius: var(--radius-lg);
  container-type: inline-size; }
.pr-hero .pr-kicker { color: var(--fondo); opacity: .75; }
.pr-big { font-family: var(--font-display); font-weight: 800; font-size: 44px; line-height: 1; letter-spacing: -.03em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pr-hero .pr-badge { justify-self: start; background: var(--fondo-elevado); color: var(--tinta); }
.pr-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(104px, 1fr)); gap: var(--space-2); }
.pr-tile { display: grid; align-content: center; gap: var(--space-1); padding: var(--space-3); background: var(--fondo-elevado); border: 2px solid var(--tinta); border-radius: var(--radius-md); min-width: 0; }
.pr-tile-k { font-size: 13px; line-height: 16px; font-weight: 700; color: var(--tinta-suave); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pr-tile-v { font-family: var(--font-display); font-weight: 800; font-size: 18px; line-height: 22px; letter-spacing: -.02em; font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (min-width: 768px) {
  .pr-today { grid-template-columns: minmax(280px, 1fr) minmax(0, 1.6fr); gap: var(--space-4); }
  /* El total achica con la tarjeta: "$ 1.260.800" entra entero aunque la columna sea angosta. */
  .pr-big { font-size: min(56px, 18cqi); }
  .pr-hero { padding: var(--space-6); }
  .pr-tiles { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--space-3); }
  .pr-tile { padding: var(--space-4); }
  .pr-tile-v { font-size: 26px; line-height: 30px; }
}
.pr-store-row .pr-row-name { font-size: 16px; }
.pr-alert { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; align-items: center; gap: var(--space-3); }
.pr-alert-icon { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; flex-shrink: 0; box-sizing: border-box;
  border: 2px solid var(--tinta); border-radius: 10px; }
.pr-alert-main { display: grid; gap: 2px; min-width: 0; }
.pr-alert-main .pr-row-name { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 20px; }
.pr-alert-meta { display: flex; align-items: baseline; min-width: 0; font-size: 14px; line-height: 20px; }
.pr-alert-store { min-width: 0; color: var(--tinta-suave); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pr-alert-store + .pr-alert-value::before { content: "·"; margin: 0 6px; color: var(--tinta-suave); font-weight: 500; }
.pr-alert-sep { margin: 0 2px; } /* " · " con espacios: el mismo aire que el punto antes del monto */
.pr-alert-value { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Ids de órdenes de Mercado Pago: lo único en mono, en su propia línea. */
.pr-alert-code { line-height: 16px; overflow-wrap: anywhere; }
.pr-alert-actions { display: flex; align-items: center; gap: var(--space-1); }
.pr-alert-actions .pr-btn-sm { padding: 0 var(--space-2); }
@media (max-width: 1023.98px) { .pr-alert-actions:has(> :nth-child(2)) { flex-direction: column; align-items: flex-end; gap: 0; } }
/* Sin monto aparte (el de un pago a revisar va en la frase): el título no se corta. */
.pr-alert:not(:has(.pr-alert-value)) .pr-alert-main .pr-row-name { display: block; -webkit-line-clamp: none; overflow: visible; }
/* Una acción larga ("Ya la devolví en Mercado Pago"): las acciones van en su propia línea, debajo del aviso. */
@media (max-width: 1023.98px) {
  .pr-alert.pr-alert-wide { grid-template-columns: 32px minmax(0, 1fr); }
  .pr-alert.pr-alert-wide .pr-alert-actions { grid-column: 2; flex-direction: row; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-3); }
}
/* En la PC: el nombre arriba y la sucursal abajo; el monto en su columna, alineado a la derecha. */
@media (min-width: 1024px) {
  .pr-alert { grid-template-columns: 32px minmax(0, 1fr) 104px 168px; row-gap: 0;
    grid-template-areas: "icon title value actions" "icon store value actions" "icon code value actions"; }
  .pr-alert-main, .pr-alert-meta { display: contents; }
  .pr-alert-icon { grid-area: icon; }
  .pr-alert-main .pr-row-name { grid-area: title; align-self: end; -webkit-line-clamp: 1; }
  .pr-alert-main:not(:has(.pr-alert-store)) .pr-row-name { grid-row: 1 / span 2; align-self: center; }
  .pr-alert-store { grid-area: store; align-self: start; font-size: 14px; line-height: 20px; }
  .pr-alert-store + .pr-alert-value::before { content: none; }
  .pr-alert-value { grid-area: value; text-align: right; font-size: 15px; }
  .pr-alert-code { grid-area: code; align-self: start; }
  .pr-alert-actions { grid-area: actions; justify-content: flex-end; }
  .pr-alert:not(:has(.pr-alert-value)) :is(.pr-row-name, .pr-alert-store, .pr-alert-code) { grid-column: title-start / value-end; }
  .pr-alert.pr-alert-wide { grid-template-areas: "icon title value ." "icon store value ." "icon code value ." ". actions actions actions"; }
  .pr-alert.pr-alert-wide .pr-alert-actions { padding-top: var(--space-1); }
}

/* Primeros pasos */
.pr-onboarding { display: grid; gap: var(--space-3); }
.pr-onboarding .pr-row { min-height: 52px; }
.pr-check-done { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; flex-shrink: 0; border-radius: 50%; background: var(--exito-suave); color: var(--exito); }

/* ───────────────────────── Listas del dueño y de la caja ───────────────────────── */
@media (min-width: 768px) {
  .pr-rows-head { display: grid; gap: var(--space-3); padding: 0 var(--space-4) 0 calc(var(--space-4) + 2px); font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--tinta-suave); }
  .pr-rows-head .pr-num { text-align: right; }
  .pr-list-receipts .pr-row, .pr-list-receipts .pr-rows-head { display: grid; grid-template-columns: 140px minmax(0, 1fr) minmax(0, 1fr) 96px 120px 20px; }
  .pr-list-sales .pr-row, .pr-list-sales .pr-rows-head { display: grid; grid-template-columns: 80px minmax(0, 1fr) minmax(0, 1fr) 120px 96px 20px; }
  .pr-list-receipts .pr-row .pr-num, .pr-list-sales .pr-row .pr-num { text-align: right; }
}
@media (max-width: 767.98px) {
  .pr-list-receipts .pr-row, .pr-list-sales .pr-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; grid-auto-flow: dense; column-gap: var(--space-3); row-gap: 0; }
  .pr-list-receipts .pr-row > :nth-child(1), .pr-list-sales .pr-row > :nth-child(1) { grid-column: 1; }
  .pr-list-receipts .pr-row > .pr-cell-sub, .pr-list-sales .pr-row > .pr-cell-sub { grid-column: 1; font-size: 13px; }
  .pr-list-receipts .pr-row > .pr-cell-sub + .pr-cell-sub, .pr-list-sales .pr-row > .pr-cell-sub + .pr-cell-sub { display: none; }
  .pr-list-receipts .pr-row > .pr-num, .pr-list-sales .pr-row > .pr-num { grid-column: 2; grid-row: 1 / span 2; }
  .pr-list-receipts .pr-row > .pr-cell-badge, .pr-list-sales .pr-row > .pr-cell-badge { grid-column: 3; grid-row: 1 / span 2; }
  .pr-list-receipts .pr-row > .pr-row-chev, .pr-list-sales .pr-row > .pr-row-chev, .pr-list-receipts .pr-row > .pr-num { display: none; }
}
.pr-cell-badge { display: flex; justify-content: flex-end; }
@media (min-width: 768px) { .pr-cell-badge { justify-content: flex-start; } }
@media (min-width: 768px) {
  .pr-list-users .pr-row { display: grid; grid-template-columns: 28px minmax(0, 1fr) 160px 100px 112px; }
  .pr-list-users .pr-row > .pr-badge { justify-self: start; }
}
.pr-list-sales .pr-row-off .pr-num { color: var(--tinta-suave); text-decoration: line-through; }

/* Ingreso de mercadería */
.pr-receipt-add { display: grid; gap: var(--space-3); padding: var(--space-4); }
.pr-receipt-add form { display: contents; }
@media (min-width: 768px) { .pr-receipt-add { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; align-items: end; padding: var(--space-4) var(--space-6) var(--space-6); } }
.pr-receipt-item { flex-wrap: wrap; row-gap: var(--space-2); }
.pr-list-receipt-draft .pr-receipt-item .pr-row-name { flex: 1 1 100%; }
.pr-receipt-cost { display: flex; }
.pr-stepper { display: inline-flex; align-items: center; gap: var(--space-1); }
.pr-stepper form { display: flex; margin: 0; }
.pr-stepper .pr-num { min-width: 40px; text-align: center; font-size: 17px; }
.pr-stepper .pr-btn { width: 44px; padding: 0; font-size: 20px; box-shadow: none; }
.pr-input-cost { width: 8rem; min-height: 44px; }
@media (max-width: 767.98px) {
  /* Celular: nombre y Quitar arriba; cantidad y costo abajo. */
  .pr-list-receipt-draft .pr-receipt-item { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "name name remove" "qty cost cost"; }
  .pr-list-receipt-draft .pr-receipt-item .pr-row-name { grid-area: name; }
  .pr-list-receipt-draft .pr-receipt-item .pr-stepper { grid-area: qty; }
  .pr-list-receipt-draft .pr-receipt-item .pr-receipt-cost { grid-area: cost; justify-self: start; }
  .pr-list-receipt-draft .pr-receipt-item .pr-receipt-remove { grid-area: remove; }
  .pr-receipt-item .pr-btn-fantasma { padding: 0 var(--space-2); }
}
@media (min-width: 768px) {
  .pr-list-receipt-items .pr-row, .pr-list-receipt-items .pr-rows-head { display: grid; grid-template-columns: minmax(0, 1fr) 120px; align-items: center; }
  .pr-list-receipt-items .pr-row > .pr-num { text-align: right; }
  .pr-list-receipt-draft .pr-row, .pr-list-receipt-draft .pr-rows-head { grid-template-columns: minmax(0, 1fr) 156px 8rem 88px; }
  .pr-list-receipt-draft .pr-receipt-item .pr-row-name { flex: none; }
  .pr-list-receipt-draft .pr-rows-head .pr-num { text-align: center; }
  .pr-list-receipt-draft .pr-row form:last-child { justify-content: flex-end; }
}

/* Turno (dueño) y resumen de cierre */
.pr-summary { display: grid; gap: var(--space-4); }
.pr-summary-card { display: flex; flex-direction: column; padding: var(--space-2) var(--space-4) var(--space-3); background: var(--fondo-elevado); border: 2px solid var(--tinta); border-radius: var(--radius-md); min-width: 0; }
.pr-summary-card > .pr-kicker { padding: var(--space-3) 0 var(--space-2); }
.pr-summary-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); min-height: 44px; border-top: 1px solid var(--linea); font-variant-numeric: tabular-nums; }
.pr-summary-card > .pr-kicker + .pr-summary-row { border-top: 0; }
.pr-summary-row strong { font-size: 17px; white-space: nowrap; }
.pr-summary-row-soft { color: var(--tinta-suave); }
.pr-summary-row-soft > span:last-child { white-space: nowrap; }
/* El total va abajo de la tarjeta: si la tarjeta se estira para emparejar con la vecina, el aire queda arriba del total. */
.pr-summary-row-total { margin-top: auto; border-top: 2px solid var(--tinta); }
.pr-summary-row-total strong { font-family: var(--font-display); font-weight: 800; font-size: 24px; letter-spacing: -.02em; }
.pr-summary-label { font-weight: 500; }
.pr-summary-diff { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--alerta); background: none; border: 0; padding: 0; }
.pr-summary-meta { display: block; font-size: 13px; color: var(--tinta-suave); }
.pr-summary-empty { margin: 0; padding: var(--space-3) 0; color: var(--tinta-suave); }
@media (min-width: 768px) {
  .pr-shift-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; }
  .pr-shift-cards .pr-summary-card-wide { grid-column: 1 / -1; }
}
.pr-shift-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4) var(--space-8); padding: var(--space-4) var(--space-6); }
.pr-shift-title { display: flex; align-items: center; gap: var(--space-3); }
.pr-shift-action { margin-left: auto; }
.pr-facts { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-8); margin: 0; }
.pr-facts div { display: grid; gap: 2px; }
.pr-facts dt { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--tinta-suave); }
.pr-facts dd { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; }
@media (max-width: 767.98px) {
  .pr-shift-head { padding: var(--space-4); }
  .pr-shift-action { margin-left: 0; }
}

/* ───────────────────────── Entrada (login, PIN, dispositivos) ───────────────────────── */
body:has(> .pr-auth) { min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; }
.pr-auth { width: 100%; max-width: 440px; box-sizing: border-box; display: grid; gap: var(--space-6); padding: var(--space-8) var(--space-4); }
.pr-auth-title { margin: 0; font-family: var(--font-display); font-weight: 800; font-size: 32px; line-height: 36px; letter-spacing: -.02em; }
.pr-auth-head { display: grid; gap: var(--space-2); }
.pr-auth-sub { margin: 0; color: var(--tinta-suave); font-weight: 500; }
.pr-auth-list { display: grid; gap: var(--space-3); }
.pr-auth-links { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0 var(--space-4); }
.pr-auth-hint { margin: 0; color: var(--tinta-suave); text-align: center; }
.pr-pin { font-family: var(--font-mono); font-size: 28px; letter-spacing: .5em; text-align: center; min-height: 64px; }
.pr-people { display: grid; grid-template-columns: repeat(auto-fill, minmax(116px, 1fr)); gap: var(--space-3); }
.pr-person { font: inherit; display: grid; justify-items: center; align-content: center; gap: var(--space-2); width: 100%; min-height: 120px; box-sizing: border-box; padding: var(--space-4) var(--space-2);
  border: 2px solid var(--tinta); border-radius: var(--radius-md); background: var(--fondo-elevado); color: var(--tinta); box-shadow: var(--sombra-pop); cursor: pointer;
  font-size: 17px; font-weight: 700; transition: transform .12s cubic-bezier(.34,1.56,.64,1), box-shadow .12s; }
.pr-person::before { content: attr(data-initial); display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 50%;
  background: var(--tinta); color: var(--fondo); font-family: var(--font-display); font-weight: 800; font-size: 22px; }
.pr-person:hover { transform: translateY(-1px); }
.pr-person:active { transform: translateY(4px); box-shadow: 0 0 0 0 transparent; }
.pr-person:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; }
.pr-people form { display: grid; margin: 0; }
.pr-pin-who { display: flex; align-items: center; gap: var(--space-3); }
@media (min-width: 768px) {
  .pr-auth { max-width: 480px; margin: var(--space-8) auto; padding: var(--space-8); background: var(--fondo-elevado); border: 2px solid var(--tinta); border-radius: var(--radius-lg); box-shadow: var(--sombra-panel); }
  .pr-auth-wide { max-width: 560px; }
}

/* ───────────────────────── Caja (layout pos) ───────────────────────── */
.pr-pos-topbar { display: flex; align-items: center; gap: var(--space-3); min-height: 60px; box-sizing: border-box; padding: var(--space-2) var(--space-4);
  border-bottom: 2px solid var(--linea); background: var(--fondo-elevado); }
.pr-pos-where { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--space-2); min-width: 0; }
.pr-pos-store { font-weight: 700; font-size: 17px; }
.pr-pos-muted { color: var(--tinta-suave); font-size: 14px; }
@media (max-width: 1023.98px) { .pr-pos-topbar { position: sticky; top: 0; z-index: 20; } }
.pr-pos-body { flex: 1; display: grid; align-content: start; gap: var(--space-4); width: 100%; max-width: 960px; margin: 0 auto; padding: var(--space-6) var(--space-4) var(--space-12); box-sizing: border-box; }
@media (min-width: 1024px) { .pr-pos-body { padding: var(--space-8) var(--space-8) var(--space-12); } }
.pr-pos-title, .pr-page-title { margin: 0; font-family: var(--font-display); font-weight: 800; font-size: 28px; line-height: 32px; letter-spacing: -.02em; }
.pr-pos-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); }

/* Hoja: una tarea por pantalla (cobro, abrir, retirar, cerrar caja). En la tablet es una tarjeta centrada. */
.pr-sheet { display: grid; gap: var(--space-4); align-content: start; width: 100%; max-width: 460px; margin: 0 auto; box-sizing: border-box; }
.pr-sheet-head { display: grid; gap: var(--space-1); }
@media (min-width: 768px) {
  .pr-sheet { padding: var(--space-6); background: var(--fondo); border: 2px solid var(--tinta); border-radius: var(--radius-lg); }
  .pr-pos-body:has(> .pr-sheet) { align-content: center; }
}

/* Caja: grilla de productos + ticket (opción A). */
.pr-pos-body:has(.pr-pos-split) { max-width: none; padding: 0; gap: 0; }
.pr-pos-body:has(.pr-pos-split) > .pr-flash { margin: var(--space-3) var(--space-4) 0; }
.pr-pos-split { display: grid; grid-template-columns: minmax(0, 1fr); }
.pr-pos-main { display: grid; align-content: start; gap: var(--space-3); padding: var(--space-4); min-width: 0; }
.pr-pos-top { display: grid; gap: var(--space-2); }
.pr-pos-search { position: relative; display: flex; align-items: center; margin: 0; }
.pr-pos-search .pr-icon { position: absolute; left: var(--space-4); color: var(--tinta-suave); pointer-events: none; }
.pr-pos-search-input { width: 100%; min-height: 56px; padding-left: 48px; padding-right: 64px; box-sizing: border-box; font-size: 17px; }
.pr-kbd { position: absolute; right: var(--space-3); font-family: var(--font-mono); font-size: 12px; color: var(--tinta-suave); border: 1px solid var(--linea); border-radius: 6px; padding: 2px 6px; }
#products { display: grid; gap: var(--space-3); align-content: start; }
.pr-chips { display: flex; gap: var(--space-2); overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.pr-chips::-webkit-scrollbar { display: none; }
.pr-chip { flex: none; display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--space-4); box-sizing: border-box; border: 2px solid var(--tinta); border-radius: var(--radius-pill);
  background: var(--fondo-elevado); color: var(--tinta); font-size: 14px; font-weight: 700; text-decoration: none; white-space: nowrap; }
.pr-chip:hover { color: var(--tinta); background: var(--fondo); }
.pr-chip-on, .pr-chip-on:hover { background: var(--tinta); color: var(--fondo); }
.pr-pos-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: var(--space-3); padding-bottom: var(--space-2); }
.pr-pos-empty { margin: 0; color: var(--tinta-suave); }
.pr-ticket { display: flex; flex-direction: column; background: var(--fondo-elevado); min-width: 0; }
.pr-ticket-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); padding: var(--space-4) var(--space-4) var(--space-3); }
.pr-ticket-title { margin: 0; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--tinta-suave); }
.pr-ticket-lines { flex: 1; }
.pr-ticket-empty { display: grid; justify-items: center; align-content: center; gap: var(--space-3); height: 100%; min-height: 160px; margin: 0; padding: var(--space-6); box-sizing: border-box;
  color: var(--tinta-suave); font-weight: 500; text-align: center; }
.pr-ticket-empty .pr-icon { width: 40px; height: 40px; }
.pr-ticket-line { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-4); border-top: 1px solid var(--linea); }
.pr-ticket-name { flex: 1; min-width: 0; font-weight: 700; font-size: 15px; line-height: 20px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pr-ticket-price { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pr-ticket-foot { padding: var(--space-3); }
.pr-ticket-foot .pr-cobrar { max-width: none; }
.pr-qty { display: inline-flex; align-items: center; gap: var(--space-1); }
.pr-qty em { font-style: normal; font-weight: 700; min-width: 28px; text-align: center; font-variant-numeric: tabular-nums; }
.pr-qty-btn { width: 44px; min-height: 44px; padding: 0; font-size: 20px; box-shadow: none; }
@media (max-width: 767.98px) {
  /* En el celular el ticket es una hoja fija abajo: cerrada muestra solo la barra de Cobrar
     ("Ver ticket · N"); abierta suma las líneas con − / + arriba de la barra. */
  .pr-pos-body:has(.pr-pos-split) { padding-bottom: 112px; }
  .pr-ticket { position: fixed; z-index: 30; left: 0; right: 0; bottom: 0; max-height: 85vh; max-height: 85dvh; background: var(--fondo); border-top: 2px solid var(--linea); }
  .pr-ticket-head, .pr-ticket-lines { display: none; }
  .pr-ticket-foot { padding: var(--space-2) var(--space-3) calc(var(--space-3) + env(safe-area-inset-bottom)); }
  .pr-ticket-open .pr-ticket { background: var(--fondo-elevado); border: 2px solid var(--tinta); border-bottom: 0; border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
  .pr-ticket-open .pr-ticket-head { display: flex; padding: var(--space-2) var(--space-2) var(--space-2) var(--space-4); }
  .pr-ticket-open .pr-ticket-lines { display: block; flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
  .pr-ticket-close { display: inline-flex; }
  .pr-ticket-scrim { display: block; position: fixed; inset: 0; z-index: 29; background: var(--velo); opacity: 0; visibility: hidden; transition: opacity .2s, visibility 0s linear .2s; }
  .pr-ticket-open .pr-ticket-scrim { opacity: 1; visibility: visible; transition: opacity .2s; }
  .pr-cobrar:has(.pr-cobrar-toggle) > div.pr-cobrar-info { display: none; }
  .pr-cobrar-toggle { display: grid; }
  .pr-ticket-open .pr-cobrar-toggle .pr-icon { transform: rotate(180deg); }
  .pr-kbd { display: none; }
  .pr-pos-search-input { padding-right: var(--space-4); }
  .pr-pos-main .pr-chips { margin: 0 calc(-1 * var(--space-4)); padding: 0 var(--space-4) 2px; scroll-padding: 0 var(--space-4); }
  .pr-toolbar-actions { margin-left: calc(-1 * var(--space-4)); }
  .pr-ticket-empty { min-height: 0; padding: var(--space-4); }
  .pr-ticket-empty .pr-icon { display: none; }
  .pr-pos-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pr-cobrar-total { font-size: 32px; line-height: 36px; }
  .pr-cobrar { padding-left: var(--space-4); }
  .pr-cobrar-btn { padding: 0 var(--space-6) 0 var(--space-4); }
}
@media (min-width: 768px) {
  .pr-pos:has(.pr-pos-split) { height: 100vh; height: 100dvh; min-height: 0; }
  .pr-pos-body:has(.pr-pos-split) { display: flex; flex-direction: column; min-height: 0; }
  .pr-pos-split { flex: 1; min-height: 0; grid-template-columns: minmax(0, 1fr) clamp(320px, 36vw, 420px); }
  .pr-pos-main { overflow-y: auto; border-right: 2px solid var(--linea); }
  .pr-ticket { min-height: 0; container: ticket / inline-size; }
  .pr-ticket-lines { min-height: 0; overflow-y: auto; }
  /* Si el total no entra al lado de Cobrar, Cobrar baja a su propia fila, a todo el ancho
     (el total crece 999 veces más que Cobrar: en la misma fila Cobrar queda de su tamaño). */
  .pr-ticket .pr-cobrar { flex-wrap: wrap; row-gap: var(--space-2); }
  .pr-ticket .pr-cobrar > div.pr-cobrar-info { flex: 999 0 auto; }
  .pr-ticket .pr-cobrar > form { flex: 1 0 auto; display: flex; }
  .pr-ticket .pr-cobrar-btn { flex: 1; justify-content: center; }
}
/* Ticket angosto (tablet chica, o la PC con el menú abierto): cantidad y total arriba, Cobrar a todo el ancho abajo. */
@container ticket (max-width: 379.98px) {
  .pr-ticket .pr-cobrar { padding: var(--space-3) var(--space-3) var(--space-3) var(--space-4); }
  .pr-ticket .pr-cobrar > div.pr-cobrar-info { flex-basis: 100%; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
    column-gap: var(--space-3); padding-right: var(--space-1); }
  .pr-ticket .pr-cobrar-total { font-size: 32px; line-height: 36px; }
}

/* Cobrar: medios de pago, efectivo con vuelto y pantalla Cobrado. */
.pr-pay-back { display: inline-flex; align-items: center; gap: var(--space-2); justify-self: start; min-height: 44px; font-weight: 700; color: var(--tinta); text-decoration: underline; text-underline-offset: 3px; }
.pr-pay-total-label { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--tinta-suave); }
.pr-pay-total { font-family: var(--font-display); font-weight: 800; font-size: 48px; line-height: 52px; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.pr-pay-question { margin: 0; font-size: 18px; line-height: 24px; font-weight: 700; }
.pr-pay-list { display: grid; gap: var(--space-3); }
.pr-pay { font: inherit; font-weight: 700; display: flex; align-items: center; width: 100%; box-sizing: border-box; min-height: 60px; padding: 0 var(--space-4); font-size: 17px;
  border: 2px solid var(--tinta); border-radius: var(--radius-md); background: var(--fondo-elevado); color: var(--tinta); text-decoration: none; cursor: pointer; box-shadow: var(--sombra-pop); }
.pr-pay:hover { color: var(--tinta); }
.pr-pay:active { transform: translateY(3px); box-shadow: none; }
.pr-pay:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; }
.pr-pay-on, .pr-pay-on:hover { background: var(--tinta); color: var(--fondo); }
/* Cobro con QR: pantalla de espera */
.pr-pay-back-button { appearance: none; background: none; border: 0; padding: 0; font: inherit; font-weight: 700; cursor: pointer; }
.pr-wait { justify-items: stretch; }
.pr-wait-qr { justify-self: center; width: 96px; height: 96px; box-sizing: border-box; border: 2px solid var(--tinta); border-radius: var(--radius-md); display: grid; grid-template-columns: repeat(5, 1fr); gap: 3px; padding: var(--space-2); }
.pr-wait-qr i { background: var(--tinta); border-radius: 2px; }
.pr-wait-qr i:nth-child(3n) { background: transparent; }
.pr-wait-point { justify-self: center; width: 64px; height: 96px; box-sizing: border-box; border: 2px solid var(--tinta); border-radius: var(--radius-md); display: grid; align-content: start; padding: var(--space-2); }
.pr-wait-point i { display: block; height: 32px; border: 2px solid var(--tinta); border-radius: 6px; background: var(--fondo); }
.pr-wait-ask { margin: 0; text-align: center; font-size: 18px; line-height: 24px; font-weight: 700; }
.pr-wait-state { margin: 0; display: flex; align-items: center; justify-content: center; gap: var(--space-3); font-weight: 700; }
.pr-wait-speed { display: grid; gap: 3px; justify-items: end; color: var(--tinta-suave); }
.pr-wait-speed i { display: block; height: 4px; border-radius: 999px; background: currentColor; animation: pr-wait-pulse 1.2s ease-in-out infinite; }
.pr-wait-speed i:first-child { width: 14px; }
.pr-wait-speed i:last-child { width: 9px; animation-delay: .3s; }
@keyframes pr-wait-pulse { 0%, 100% { opacity: .35; transform: translateX(4px); } 50% { opacity: 1; transform: translateX(0); } }
.pr-wait-note { margin: 0; text-align: center; font-size: 12px; line-height: 16px; color: var(--tinta-suave); }
.pr-wait-sim { display: grid; gap: var(--space-2); border-top: 2px dashed var(--linea); padding-top: var(--space-3); }
.pr-pay-bills { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.pr-pay-bills .pr-pay { justify-content: center; font-variant-numeric: tabular-nums; }
.pr-pay-other { display: grid; gap: var(--space-2); }
.pr-pay-other-label { font-weight: 700; }
.pr-pay-other-row { display: flex; gap: var(--space-2); }
.pr-pay-other-input { flex: 1; min-width: 0; }
.pr-pay-change { border-radius: var(--radius-md); background: var(--exito-suave); color: var(--exito); padding: var(--space-3) var(--space-4); font-weight: 700; }
.pr-pay-change strong { display: block; font-family: var(--font-display); font-weight: 800; font-size: 36px; line-height: 40px; letter-spacing: -.02em; color: var(--tinta); font-variant-numeric: tabular-nums; }
.pr-done { display: grid; justify-items: center; gap: var(--space-3); max-width: 460px; width: 100%; margin: 0 auto; padding: var(--space-8) var(--space-6); box-sizing: border-box;
  background: var(--exito-suave); border-radius: var(--radius-lg); text-align: center; }
@media (min-width: 768px) { .pr-done, .pr-voided { border: 2px solid var(--tinta); } .pr-pos-body:has(> .pr-done), .pr-pos-body:has(> .pr-voided) { align-content: center; } }
.pr-done-check { width: 72px; height: 72px; border-radius: 50%; background: var(--exito); color: var(--fondo-elevado); display: flex; align-items: center; justify-content: center; }
.pr-done-total, .pr-voided-total { font-family: var(--font-display); font-weight: 800; font-size: 52px; line-height: 56px; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.pr-done-method { margin: 0; font-weight: 700; color: var(--exito); }
.pr-done-change { width: 100%; box-sizing: border-box; background: var(--fondo-elevado); text-align: left; }
.pr-done-next { margin-top: var(--space-4); }
/* Volver a Últimas ventas: arriba a la izquierda del panel, como en las otras pantallas de una tarea. */
.pr-done-back { justify-self: start; margin: calc(-1 * var(--space-4)) 0 0 calc(-1 * var(--space-3)); padding: 0 var(--space-2); }
/* Venta anulada: panel neutro (el verde es solo para confirmar). */
.pr-voided { display: grid; justify-items: center; gap: var(--space-3); max-width: 460px; width: 100%; margin: 0 auto; padding: var(--space-8) var(--space-6); box-sizing: border-box;
  background: var(--fondo-elevado); border-radius: var(--radius-lg); text-align: center; }
.pr-voided-total { color: var(--tinta-suave); text-decoration: line-through; text-decoration-thickness: 3px; }
.pr-voided-meta { margin: 0; font-weight: 700; color: var(--tinta-suave); }

/* Ajustes › Mercado Pago */
.pr-mp-status { margin: 0; font-weight: 700; }
.pr-mp-note { color: var(--tinta-suave); font-size: 14px; }
.pr-mp-register { flex-wrap: wrap; gap: var(--space-2); }
.pr-mp-confirm { max-width: 420px; }
.pr-mp-actions { display: flex; gap: var(--space-3); flex-wrap: wrap; }

/* Ajustes › Mercado Pago en el celular: el nombre de la caja ocupa su renglón y lo demás baja. */
@media (max-width: 600px) {
  .pr-mp-register { padding-left: var(--space-4); }
  .pr-mp-register .pr-row-name { flex: 1 1 100%; }
  .pr-mp-register .pr-mp-hint { flex: 1 1 100%; }
}

/* QR simulado para imprimir (demo). */
.pr-qr-print { display: grid; justify-items: center; gap: var(--space-4); padding: var(--space-8) var(--space-4); text-align: center; }
.pr-qr-print-glyph { width: 240px; height: 240px; }
.pr-qr-print-title { margin: 0; font-family: var(--font-display); font-size: 24px; line-height: 28px; }
@media print { .pr-qr-print-action { display: none; } }

/* ───────────────────────── Landing (/ sin sesión) ───────────────────────── */
/* Movimiento: el rebote de la marca (cubic-bezier(.34,1.56,.64,1)). Las entradas se escalonan con --i. */
.pr-landing { --rebote: cubic-bezier(.34,1.56,.64,1); --suave: cubic-bezier(.22,1,.36,1); overflow-x: clip; }
.pr-landing-wrap { max-width: 1240px; margin: 0 auto; padding-inline: var(--space-4); box-sizing: border-box; }
.pr-landing-sentinel { height: 1px; }
.pr-landing-top { position: sticky; top: 0; z-index: 10; border-bottom: 2px solid transparent; transition: background-color .2s, border-color .2s; }
.pr-landing-top.is-scrolled { background: color-mix(in srgb, var(--fondo) 86%, transparent); border-bottom-color: var(--linea);
  -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4); }
.pr-landing-top-in { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding-block: var(--space-4); }
.pr-landing-brand { display: inline-flex; min-height: 44px; align-items: center; color: var(--tinta); text-decoration: none; }
.pr-landing-nav { display: flex; align-items: center; gap: var(--space-2) var(--space-6); }
.pr-landing-nav-link { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--space-2); font-size: 16px; font-weight: 500; color: var(--tinta); text-decoration: none; }
.pr-landing-nav-link:hover { text-decoration: underline; }
.pr-landing-brand .pr-mark-boton { transform-origin: 52px 41px; transition: transform .3s var(--rebote); }
.pr-landing-brand:hover .pr-mark-boton { transform: scale(.82); }

.pr-landing-hero { display: grid; gap: var(--space-12); align-items: center; padding: var(--space-8) 0 var(--space-12); }
.pr-landing-hero-copy { display: grid; gap: var(--space-6); justify-items: start; }
.pr-landing-kicker { margin: 0; font-size: 13px; line-height: 18px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--tinta-suave); }
.pr-landing-title { margin: 0; font-family: var(--font-display); font-weight: 800; font-size: clamp(60px, 10.5vw, 136px); line-height: .88; letter-spacing: -.045em; }
.pr-landing-title span { display: inline-block; }
.pr-landing-lead { margin: 0; max-width: 40ch; font-size: clamp(18px, 1.8vw, 22px); line-height: 1.5; color: var(--tinta); font-weight: 500; }
.pr-landing-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-6); margin-top: var(--space-2); }
.pr-landing-checks { list-style: none; margin: var(--space-4) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-6); }
.pr-landing-checks li { display: inline-flex; align-items: center; gap: var(--space-2); font-size: 15px; font-weight: 500; }
.pr-landing-check { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: var(--tinta); color: var(--fondo); }
/* Entrada del hero al cargar: sube de a una pieza. */
.pr-landing-in { animation: pr-landing-rise .55s var(--rebote) both; animation-delay: calc(var(--i, 0) * 70ms + 80ms); }
@keyframes pr-landing-rise { from { opacity: 0; transform: translateY(.5em); } }

/* Muestra de la caja: no es interactiva. Las líneas de velocidad (tres, como máximo) van detrás. */
.pr-landing-demo { position: relative; margin: 0; min-width: 0; animation: pr-landing-pop .7s var(--rebote) .35s both; }
@keyframes pr-landing-pop { from { opacity: 0; translate: 0 32px; scale: .96; } }
.pr-landing-lines { position: absolute; left: calc(-1 * var(--space-8)); top: 14%; display: grid; gap: var(--space-3); justify-items: start; rotate: -6deg; }
.pr-landing-lines i { display: block; height: 16px; border-radius: var(--radius-pill); background: var(--tinta); transform-origin: right center;
  animation: pr-landing-whoosh .6s var(--rebote) both; }
.pr-landing-lines i:nth-child(1) { width: 88px; margin-left: var(--space-3); animation-delay: .55s; }
.pr-landing-lines i:nth-child(2) { width: 52px; margin-left: var(--space-12); animation-delay: .62s; }
.pr-landing-lines i:nth-child(3) { width: 96px; animation-delay: .69s; }
@keyframes pr-landing-whoosh { from { opacity: 0; translate: -48px 0; } }
.is-charging .pr-landing-lines i { animation: pr-landing-streak .42s var(--suave); }
.is-charging .pr-landing-lines i:nth-child(2) { animation-delay: .04s; }
.is-charging .pr-landing-lines i:nth-child(3) { animation-delay: .08s; }
@keyframes pr-landing-streak { 45% { transform: translateX(-20px) scaleX(1.6); } }

/* Pantalla de muestra: contorno grueso, sombra dura grande y apenas girada (el mouse la endereza hacia él). */
.pr-landing-screen { position: relative; display: grid; gap: var(--space-4); margin: 0 var(--space-4) 0 var(--space-12); padding: var(--space-6); background: var(--fondo-elevado);
  border: 3px solid var(--tinta); border-radius: var(--radius-lg); box-shadow: 12px 14px 0 0 var(--tinta);
  transform: perspective(1400px) rotateX(var(--rx, 3deg)) rotateY(var(--ry, -8deg)) rotate(1deg); transition: transform .5s var(--suave); }
/* Buscador: el lector tipea el código acá, como en la caja. */
.pr-landing-search { display: flex; align-items: center; gap: var(--space-2); min-height: 44px; padding: 0 var(--space-3); border: 2px solid var(--tinta); border-radius: var(--radius-md); color: var(--tinta); }
.pr-landing-search-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--font-mono); font-size: 15px; letter-spacing: .02em; }
.pr-landing-search-text.is-empty { font-family: var(--font-sans); letter-spacing: 0; color: var(--tinta-suave); }
/* Cursor del buscador (la caja arranca con el foco ahí): antes del texto de ayuda, después del código. */
.pr-landing-caret { order: 2; flex: none; width: 2px; height: 20px; margin-inline: -3px; background: var(--tinta); animation: pr-landing-blink 1s steps(1) infinite; }
.pr-landing-search:has(.is-empty) .pr-landing-caret { order: 0; }
@keyframes pr-landing-blink { 50% { opacity: 0; } }

/* Visor: el producto entra desde la derecha, el láser lo barre y sale hacia el ticket. */
.pr-landing-stage { position: relative; height: 156px; overflow: hidden; border-radius: var(--radius-md); background: var(--fondo); }
.pr-landing-scan { position: absolute; left: 50%; top: 50%; translate: -50% -50%; width: min(236px, 76%); box-sizing: border-box; display: grid; gap: var(--space-1); padding: var(--space-3);
  background: var(--fondo-elevado); border: 2px solid var(--tinta); border-radius: var(--radius-md); box-shadow: var(--sombra-pop);
  opacity: 0; transform: translateX(150%) rotate(4deg); transition: transform .3s cubic-bezier(.55,0,.75,.3), opacity .25s; }
.pr-landing-scan.is-in { opacity: 1; transform: none; transition: transform .45s var(--rebote), opacity .2s; }
.pr-landing-scan.is-out { opacity: 0; transform: translate(-30%, 90%) scale(.7) rotate(-3deg); }
.pr-landing-scan.is-reset { transition: none; }
.is-read .pr-landing-scan.is-in { animation: pr-landing-read .3s var(--rebote); }
@keyframes pr-landing-read { 40% { scale: 1.05; } }
.pr-landing-scan-top { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-2); }
.pr-landing-scan-top span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; line-height: 18px; font-weight: 700; }
.pr-landing-scan-top strong { font-family: var(--font-display); font-size: 18px; line-height: 22px; letter-spacing: -.02em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pr-landing-scan .pr-barcode { display: block; width: 100%; color: var(--tinta); }
.pr-landing-scan-code { font-family: var(--font-mono); font-size: 12px; line-height: 16px; letter-spacing: .12em; text-align: center; color: var(--tinta-suave); }
/* Esquinas del visor y el láser (coral: es el momento de la acción, y Cobrar todavía está apagado). */
.pr-landing-frame { position: absolute; left: 50%; top: 50%; translate: -50% -50%; z-index: 1; width: min(268px, 88%); height: 140px; pointer-events: none; transition: scale .2s var(--rebote); }
.pr-landing-frame i { position: absolute; width: 22px; height: 22px; border: 0 solid var(--tinta); }
.pr-landing-frame i:nth-child(1) { left: 0; top: 0; border-width: 3px 0 0 3px; border-top-left-radius: var(--radius-sm); }
.pr-landing-frame i:nth-child(2) { right: 0; top: 0; border-width: 3px 3px 0 0; border-top-right-radius: var(--radius-sm); }
.pr-landing-frame i:nth-child(3) { left: 0; bottom: 0; border-width: 0 0 3px 3px; border-bottom-left-radius: var(--radius-sm); }
.pr-landing-frame i:nth-child(4) { right: 0; bottom: 0; border-width: 0 3px 3px 0; border-bottom-right-radius: var(--radius-sm); }
.is-read .pr-landing-frame { scale: .96; }
.pr-landing-beam { position: absolute; left: var(--space-2); right: var(--space-2); top: 14%; height: 3px; border-radius: var(--radius-pill); background: var(--coral);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--coral) 28%, transparent); opacity: 0; }
/* En reposo (caja vacía): el láser late en el medio y las esquinas respiran. */
.is-empty .pr-landing-stage:not(.is-scanning) .pr-landing-beam { top: 50%; animation: pr-landing-idle 1.6s ease-in-out infinite; }
.is-empty .pr-landing-stage:not(.is-scanning):not(.is-read) .pr-landing-frame { animation: pr-landing-breathe 1.6s ease-in-out infinite; }
@keyframes pr-landing-idle { 0%, 100% { opacity: .2; } 50% { opacity: .9; } }
@keyframes pr-landing-breathe { 50% { scale: 1.035; } }
.is-scanning .pr-landing-beam { animation: pr-landing-sweep .52s ease-in-out; }
@keyframes pr-landing-sweep { 0% { top: 14%; opacity: 1; } 50% { top: 84%; } 100% { top: 14%; opacity: 1; } }
/* Ticket vacío: un recuadro punteado que dice qué hacer; se va con el primer producto. */
.pr-landing-ticket-wrap { position: relative; }
.pr-landing-empty { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: var(--space-3); padding: var(--space-3);
  border: 2px dashed var(--linea); border-radius: var(--radius-md); color: var(--tinta-suave); font-size: 13px; line-height: 18px;
  opacity: 0; visibility: hidden; scale: .97; transition: opacity .2s, scale .2s, visibility 0s .2s; }
.pr-landing-empty strong { display: block; font-size: 15px; line-height: 20px; color: var(--tinta); }
.is-empty .pr-landing-empty { opacity: 1; visibility: visible; scale: 1; transition: opacity .3s .1s, scale .4s var(--rebote) .1s, visibility 0s; }
/* Tres renglones de alto fijo: el ticket se arma sin que la pantalla salte. */
.pr-landing-ticket { list-style: none; margin: 0; padding: 0; display: grid; align-content: start; grid-auto-rows: 40px; min-height: 120px; }
.pr-landing-ticket li { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); border-bottom: 2px solid var(--linea); font-size: 15px; font-weight: 500; }
.pr-landing-ticket li span:last-child { font-weight: 700; font-variant-numeric: tabular-nums; }
.pr-landing-ticket li.is-new { animation: pr-landing-line .4s var(--rebote) both; }
@keyframes pr-landing-line { from { opacity: 0; transform: translateX(-16px); } }
.pr-landing-screen .is-bump { animation: pr-landing-bump .3s var(--rebote); }
.pr-landing-ticket li.is-bump span:last-child { animation: pr-landing-bump .3s var(--rebote); }
.pr-landing-ticket li.is-bump { animation: none; }
@keyframes pr-landing-bump { 40% { transform: scale(1.12); } }
.pr-landing-screen .pr-cobrar { max-width: none; padding-left: var(--space-4); }
.pr-landing-screen .pr-cobrar-total { display: inline-block; justify-self: start; transform-origin: left center; font-size: 32px; line-height: 36px; }
.pr-landing-screen .pr-cobrar-btn { cursor: default; min-height: 56px; padding: 0 var(--space-6) 0 var(--space-4); font-size: 18px;
  transition: transform .12s var(--rebote), background-color .25s, color .25s, border-color .25s, opacity .25s; }
.pr-landing-screen .pr-cobrar-btn.is-pressed { transform: scale(.94); }
.pr-landing-screen .pr-cobrar-btn.is-off { background: transparent; color: var(--fondo); border-color: currentColor; opacity: .45; }

/* Cobrado: la confirmación, como en la caja (el verde es solo para esto). Estalla, muestra el vuelto y Seguir se
   llena solo; al terminar, la confirmación sube y abajo espera la caja vacía. */
.pr-landing-paid { position: absolute; inset: 0; z-index: 1; display: grid; place-content: center; justify-items: center; gap: var(--space-2); padding: var(--space-6); text-align: center;
  overflow: hidden; background: var(--fondo-elevado); border-radius: calc(var(--radius-lg) - 3px); opacity: 0; visibility: hidden; transform: translateY(16px) scale(.98);
  transition: opacity .25s, transform .45s var(--rebote), visibility 0s .45s; }
.is-paid .pr-landing-paid { opacity: 1; visibility: visible; transform: none; transition: opacity .2s, transform .45s var(--rebote), visibility 0s; }
.is-paid-out .pr-landing-paid { opacity: 0; visibility: visible; transform: translateY(-28px) scale(.98); transition: opacity .3s, transform .4s var(--suave), visibility 0s .4s; }
.pr-landing-paid-mark { position: relative; display: grid; place-items: center; margin: var(--space-2) 0 var(--space-4); }
.is-paid .pr-done-check { animation: pr-landing-check .5s var(--rebote) .05s both; }
@keyframes pr-landing-check { from { transform: scale(.4); } }
.pr-landing-paid .pr-icon path { stroke-dasharray: 24; }
.is-paid .pr-landing-paid .pr-icon path { animation: pr-landing-draw .35s var(--suave) .22s both; }
@keyframes pr-landing-draw { from { stroke-dashoffset: 24; } }
/* Estallido: ocho píldoras que salen del check (las líneas de velocidad de la marca, en ronda). */
.pr-landing-burst i { position: absolute; left: 50%; top: 50%; width: 6px; height: 14px; margin: -7px 0 0 -3px; border-radius: var(--radius-pill); background: var(--exito); opacity: 0; }
.pr-landing-burst i:nth-child(even) { background: var(--tinta); height: 10px; margin-top: -5px; }
.pr-landing-burst i:nth-child(1) { --a: 0deg; } .pr-landing-burst i:nth-child(2) { --a: 45deg; } .pr-landing-burst i:nth-child(3) { --a: 90deg; } .pr-landing-burst i:nth-child(4) { --a: 135deg; }
.pr-landing-burst i:nth-child(5) { --a: 180deg; } .pr-landing-burst i:nth-child(6) { --a: 225deg; } .pr-landing-burst i:nth-child(7) { --a: 270deg; } .pr-landing-burst i:nth-child(8) { --a: 315deg; }
.is-paid .pr-landing-burst i { animation: pr-landing-burst .75s var(--suave) .18s both; }
@keyframes pr-landing-burst {
  from { opacity: 1; transform: rotate(var(--a)) translateY(-34px) scaleY(.3); }
  60% { opacity: 1; }
  to { opacity: 0; transform: rotate(var(--a)) translateY(-60px) scaleY(1); }
}
.pr-landing-paid-total { font-family: var(--font-display); font-weight: 800; font-size: 48px; line-height: 1; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.pr-landing-paid-label { font-weight: 700; color: var(--exito); }
.pr-landing-paid-change { display: grid; grid-template-columns: 1fr 1fr; width: min(100%, 300px); box-sizing: border-box; margin-top: var(--space-2); padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md); background: var(--exito-suave); color: var(--exito); font-size: 13px; font-weight: 700; text-align: left; }
.pr-landing-paid-change > span + span { padding-left: var(--space-4); border-left: 2px solid color-mix(in srgb, var(--exito) 25%, transparent); }
.pr-landing-paid-change strong { display: block; font-family: var(--font-display); font-weight: 800; font-size: 26px; line-height: 30px; letter-spacing: -.02em; color: var(--tinta); font-variant-numeric: tabular-nums; }
.pr-landing-paid-meta { font-size: 13px; color: var(--tinta-suave); font-weight: 500; }
.pr-landing-paid-meta span { font-family: var(--font-mono); color: var(--tinta); }
/* Seguir se llena solo, como el auto-avance de la caja. */
.pr-landing-paid-next { position: relative; z-index: 0; overflow: hidden; width: min(100%, 300px); margin-top: var(--space-2); cursor: default; }
.pr-landing-paid-next::before { content: ""; position: absolute; inset: 0; z-index: -1; background: color-mix(in srgb, var(--fondo) 24%, transparent); transform-origin: left center; transform: scaleX(0); }
.is-paid .pr-landing-paid-next::before { animation: pr-landing-fill 2.8s linear .55s both; }
@keyframes pr-landing-fill { to { transform: scaleX(1); } }
.is-paid .pr-landing-paid > :not(.pr-landing-paid-mark) { animation: pr-landing-rise .4s var(--rebote) both; }
.is-paid .pr-landing-paid > .pr-landing-paid-total { animation-delay: .1s; }
.is-paid .pr-landing-paid > .pr-landing-paid-label { animation-delay: .16s; }
.is-paid .pr-landing-paid > .pr-landing-paid-change { animation-delay: .22s; }
.is-paid .pr-landing-paid > .pr-landing-paid-meta { animation-delay: .28s; }
.is-paid .pr-landing-paid > .pr-landing-paid-next { animation-delay: .34s; }

/* Lo que entra al bajar (landing_controller agrega pr-reveal solo con JS y sin movimiento reducido). */
.pr-reveal { opacity: 0; transform: translateY(28px); transition: opacity .45s var(--suave), transform .6s var(--rebote); transition-delay: calc(var(--i, 0) * 80ms); }
.pr-reveal.is-in { opacity: 1; transform: none; }
.pr-landing-cta.pr-reveal { transform: translateY(28px) scale(.97); }
.pr-landing-cta.pr-reveal.is-in { transform: none; }

.pr-landing-section { display: grid; gap: var(--space-6); padding: var(--space-12) 0; border-top: 2px solid var(--linea); }
.pr-landing-h2 { margin: 0; font-family: var(--font-display); font-weight: 800; font-size: clamp(30px, 6vw, 44px); line-height: 1.05; letter-spacing: -.03em; max-width: 20ch; }
.pr-landing-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-4); }
/* Al pasar el mouse la tarjeta se levanta con la sombra de la marca (translate, así no pisa la entrada). */
.pr-landing-step { display: grid; gap: var(--space-2); align-content: start; padding: var(--space-6); background: var(--fondo-elevado); border: 2px solid var(--tinta); border-radius: var(--radius-lg);
  box-shadow: 0 0 0 0 var(--tinta); transition: translate .2s var(--rebote), box-shadow .2s; }
.pr-landing-step.pr-reveal { transition: opacity .45s var(--suave) calc(var(--i, 0) * 80ms), transform .6s var(--rebote) calc(var(--i, 0) * 80ms), translate .2s var(--rebote), box-shadow .2s; }
.pr-landing-step:hover { translate: 0 -4px; box-shadow: var(--sombra-pop); }
.pr-landing-step-n { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: var(--tinta); color: var(--fondo);
  font-family: var(--font-display); font-weight: 800; font-size: 20px; }
.pr-landing-step h3, .pr-landing-feature h3 { margin: var(--space-2) 0 0; font-size: 20px; line-height: 26px; font-weight: 700; }
.pr-landing-step p, .pr-landing-feature p { margin: 0; color: var(--tinta-suave); line-height: 24px; }
.pr-landing-features { display: grid; gap: var(--space-6) var(--space-8); }
.pr-landing-feature { display: grid; gap: var(--space-1); align-content: start; }
.pr-landing-feature .pr-icon { transition: transform .3s var(--rebote); }
.pr-landing-feature:hover .pr-icon { transform: translateY(-3px) rotate(-8deg); }
.pr-landing-rubros { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-3); }
.pr-landing-rubros li { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--space-6); border: 2px solid var(--tinta); border-radius: var(--radius-pill);
  font-size: 17px; font-weight: 700; }
.pr-landing-rubros li:last-child { border-style: dashed; }
.pr-landing-rubros li.pr-reveal { transform: translateY(20px) scale(.9); }
.pr-landing-rubros li.pr-reveal.is-in { transform: none; }
.pr-landing-cta { display: grid; gap: var(--space-6); justify-items: start; margin: var(--space-4) 0 var(--space-12); padding: var(--space-8) var(--space-6);
  background: var(--tinta); color: var(--fondo); border-radius: var(--radius-lg); }
.pr-landing-cta-sub { margin: calc(-1 * var(--space-3)) 0 0; font-size: 18px; font-weight: 500; opacity: .8; }
.pr-landing-cta-title { margin: 0; font-family: var(--font-display); font-weight: 800; font-size: clamp(32px, 7vw, 56px); line-height: 1; letter-spacing: -.03em; }
.pr-landing-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-6) 0 var(--space-8);
  border-top: 2px solid var(--linea); color: var(--tinta-suave); font-size: 14px; }
.pr-landing-foot .pr-logo-word { font-size: 18px; color: var(--tinta); }
@media (min-width: 768px) {
  .pr-landing-wrap { padding-inline: var(--space-8); }
  .pr-landing-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pr-landing-features { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pr-landing-cta { padding: var(--space-12); }
}
@media (min-width: 1024px) {
  .pr-landing-hero { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: var(--space-8); padding: var(--space-12) 0 calc(var(--space-12) * 2); }
  .pr-landing-features { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 479.98px) {
  .pr-landing-lines { left: 0; }
  .pr-landing-screen { margin-left: var(--space-8); padding: var(--space-4); }
  .pr-landing-nav { gap: var(--space-2); }
  .pr-landing-checks { flex-direction: column; }
  .pr-landing-actions .pr-btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .pr-landing *, .pr-landing *::before, .pr-landing *::after { animation: none !important; }
}