/* ============================================================

/* ============================================================
   MODO OSCURO
   ============================================================
   Va ACA y no en `_shared/ui/css/base.css` a proposito: base.css lo comparten
   `ayuda` e `intranet`, y un bloque oscuro alli les llega a las tres sin que
   nadie lo haya pedido. Cuando las tres lo quieran, se sube.

   Se redefinen TOKENS, no reglas. El resto de la hoja ya usa var(--c-*), asi
   que cambiando estas doce lineas cambia toda la aplicacion.

   Tres estados, y el orden importa:
     1. `:root` (arriba, el bloque claro de base.css)  -> claro por defecto
     2. `prefers-color-scheme: dark` SIN eleccion      -> sigue al sistema
     3. `[data-tema]`                                  -> gana la persona

   El naranja NO cambia: `#e0611c` sobre `#141312` mantiene contraste, y es
   acento, no relleno. Los grises son CALIDOS, no azulados, que es lo que
   distingue esta paleta de un modo oscuro generico.
   ============================================================ */

@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    --c-bg:        #141312;
    --c-surface:   #1f1d1b;
    --c-surface-2: #2a2724;
    --c-border:    #332f2b;
    --c-border-strong: #423d38;
    --c-text:      #f2eeea;
    --c-text-soft: #a8a29c;
    --c-muted:     #8a847e;

    --c-primary-100: #3a2318;

    /* Los avisos: el fondo se oscurece y el texto se aclara, o quedan
       ilegibles --texto oscuro sobre fondo oscuro--. */
    --c-success:   #6ee7b7;  --c-success-bg: #10312a;
    --c-warning:   #fbbf77;  --c-warning-bg: #33260f;
    --c-danger:    #fca5a5;  --c-danger-bg:  #381c1c;
    --c-info:      #93c5fd;  --c-info-bg:    #10283a;

    --c-sidebar-bg:        #1a1817;
    --c-sidebar-text:      #b8b2ac;
    --c-sidebar-strong:    #f2eeea;
    --c-sidebar-border:    #332f2b;
    --c-sidebar-hover:     #2a2724;
    --c-sidebar-active-bg: #3a2318;
    --c-sidebar-active-fg: #f19a5f;

    --c-velo: rgba(0, 0, 0, .6);

    --shadow-sm: 0 1px 2px rgba(0,0,0,.4), 0 1px 3px rgba(0,0,0,.3);
    --shadow:    0 4px 16px rgba(0,0,0,.45);
    --shadow-lg: 0 18px 50px rgba(0,0,0,.6);
  }
}

:root[data-tema="oscuro"] {
  --c-bg:        #141312;
  --c-surface:   #1f1d1b;
  --c-surface-2: #2a2724;
  --c-border:    #332f2b;
  --c-border-strong: #423d38;
  --c-text:      #f2eeea;
  --c-text-soft: #a8a29c;
  --c-muted:     #8a847e;

  --c-primary-100: #3a2318;

  --c-success:   #6ee7b7;  --c-success-bg: #10312a;
  --c-warning:   #fbbf77;  --c-warning-bg: #33260f;
  --c-danger:    #fca5a5;  --c-danger-bg:  #381c1c;
  --c-info:      #93c5fd;  --c-info-bg:    #10283a;

  --c-sidebar-bg:        #1a1817;
  --c-sidebar-text:      #b8b2ac;
  --c-sidebar-strong:    #f2eeea;
  --c-sidebar-border:    #332f2b;
  --c-sidebar-hover:     #2a2724;
  --c-sidebar-active-bg: #3a2318;
  --c-sidebar-active-fg: #f19a5f;

  --c-velo: rgba(0, 0, 0, .6);

  --shadow-sm: 0 1px 2px rgba(0,0,0,.4), 0 1px 3px rgba(0,0,0,.3);
  --shadow:    0 4px 16px rgba(0,0,0,.45);
  --shadow-lg: 0 18px 50px rgba(0,0,0,.6);
}

/* Las filas alternadas del catalogo en lista aclaran con negro sobre claro y
   tienen que ACLARAR con blanco sobre oscuro, o desaparecen. */
:root[data-tema="oscuro"] .art-fila:nth-child(even) { background: rgba(255, 255, 255, .025); }
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) .art-fila:nth-child(even) { background: rgba(255, 255, 255, .025); }
}

/* EL COMPROBANTE NO LLEVA MODO OSCURO. Se imprime en papel blanco, y sus
   #000/#fff son correctos: mas abajo estan escritos a mano justamente por eso.
   Esta regla lo deja explicito para el que venga a "arreglar" esos colores. */
:root[data-tema="oscuro"] .comprobante { color-scheme: light; }
   Cliente web de pedidos — estilos propios.

   Paleta SoleCenter: gris cálido + naranja.
   Tipografía nítida y moderna (Plus Jakarta Sans / Inter).
   Logo oficial corporativo.
   ============================================================ */

body {
  background: var(--c-bg);
  color: var(--c-text);
  margin: 0;
  font-family: 'Plus Jakarta Sans', 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

.cargando {
  display: grid;
  place-items: center;
  min-height: 100vh;
  color: var(--c-muted);
}

/* ---- Pantallas de acceso (login, invitación) ---- */

.acceso-layout {
  min-height: 100vh;
  display: flex;
  background: var(--c-surface);
}

.acceso-form-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 2.5rem 3rem;
  max-width: 32rem;
  margin: 0 auto;
  box-sizing: border-box;
  background: var(--c-surface);
}

.acceso-hero-wrap {
  flex: 1.2;
  background: linear-gradient(145deg, #1f1b18 0%, #2b241e 45%, #c24e14 130%);
  padding: 3.5rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  overflow: hidden;
  color: #ffffff;
  box-sizing: border-box;
}

.acceso-hero-wrap::before {
  content: '';
  position: absolute;
  width: 480px;
  height: 480px;
  background: radial-gradient(circle, rgba(224, 97, 28, 0.42) 0%, rgba(224, 97, 28, 0) 70%);
  top: -100px;
  right: -100px;
  border-radius: 50%;
  pointer-events: none;
}

.acceso-hero-wrap::after {
  content: '';
  position: absolute;
  width: 380px;
  height: 380px;
  background: radial-gradient(circle, rgba(251, 146, 60, 0.22) 0%, rgba(251, 146, 60, 0) 70%);
  bottom: -60px;
  left: 5%;
  border-radius: 50%;
  pointer-events: none;
}

.acceso-header-brand {
  display: flex;
  align-items: center;
  gap: .75rem;
}

.acceso-brand-logo {
  width: 36px;
  height: 36px;
  object-fit: contain;
  flex-shrink: 0;
}

.acceso-brand-title {
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--c-text);
  letter-spacing: -0.02em;
}
.acceso-brand-title span {
  color: var(--c-primary);
}

.acceso-card-body {
  margin: 2.5rem 0;
}

.acceso__titulo {
  font-size: 1.65rem;
  font-weight: 800;
  color: var(--c-text);
  letter-spacing: -0.02em;
  margin: 0 0 .5rem;
}

.acceso__sub {
  color: var(--c-text-soft);
  font-size: .95rem;
  line-height: 1.45;
  margin: 0 0 1.5rem;
}

.campo {
  display: block;
  margin-bottom: 1.15rem;
}
.campo > span {
  display: block;
  font-size: .85rem;
  font-weight: 600;
  color: var(--c-text);
  margin-bottom: .4rem;
}
.campo-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}
.campo-input-wrap svg.input-icon {
  position: absolute;
  left: .85rem;
  color: var(--c-muted);
  pointer-events: none;
  transition: color .2s;
}
.campo-input-wrap input,
.campo-input-wrap select {
  padding-left: 2.45rem !important;
}
.campo-input-wrap:focus-within svg.input-icon {
  color: var(--c-primary);
}

.campo input, .campo select {
  width: 100%;
  box-sizing: border-box;
  padding: .75rem .85rem;
  font-size: 1rem;
  font-family: inherit;
  border: 1.5px solid var(--c-border);
  border-radius: 10px;
  background: var(--c-bg);
  color: var(--c-text);
  transition: all .2s cubic-bezier(0.16, 1, 0.3, 1);
}
.campo input:focus, .campo select:focus {
  outline: none;
  background: var(--c-surface);
  border-color: var(--c-primary);
  box-shadow: 0 0 0 3.5px var(--c-primary-100);
}

.btn-pwd-toggle {
  position: absolute;
  right: .75rem;
  background: transparent;
  border: 0;
  color: var(--c-muted);
  cursor: pointer;
  padding: .35rem;
  display: grid;
  place-items: center;
}
.btn-pwd-toggle:hover { color: var(--c-text); }

.boton {
  width: 100%;
  padding: .85rem 1.25rem;
  font-size: 1rem;
  font-weight: 700;
  font-family: inherit;
  color: #fff;
  background: linear-gradient(135deg, var(--c-primary) 0%, var(--c-primary-600) 100%);
  border: 0;
  border-radius: 10px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  box-shadow: 0 6px 18px rgba(224, 97, 28, 0.28);
  transition: all .2s cubic-bezier(0.16, 1, 0.3, 1);
}
.boton:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(224, 97, 28, 0.38);
  filter: brightness(1.04);
}
.boton:active { transform: translateY(0); }
.boton[disabled] { opacity: .65; cursor: default; transform: none; box-shadow: none; }

.boton--suave {
  background: var(--c-surface);
  color: var(--c-text);
  border: 1px solid var(--c-border-strong);
  width: auto;
  padding: .45rem .85rem;
  font-size: .85rem;
  font-weight: 500;
  box-shadow: none;
  border-radius: 8px;
}
.boton--suave:hover {
  background: var(--c-surface-2);
  transform: none;
  filter: none;
  box-shadow: none;
}

.acceso-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: .82rem;
  color: var(--c-muted);
  border-top: 1px solid var(--c-border);
  padding-top: 1.25rem;
}
.acceso-footer a {
  color: var(--c-text-soft);
  text-decoration: none;
  font-weight: 500;
}
.acceso-footer a:hover { color: var(--c-primary); }

.acceso-seguridad {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .75rem .9rem;
  border-radius: 8px;
  background: var(--c-surface-2);
  border: 1px dashed var(--c-border-strong);
  margin-top: 1.25rem;
  font-size: .8rem;
  color: var(--c-text-soft);
}
.acceso-seguridad svg {
  color: var(--c-success);
  flex-shrink: 0;
}

/* Panel Hero y tarjetas flotantes */
.hero-content {
  position: relative;
  z-index: 2;
  max-width: 28rem;
}
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.18);
  padding: .35rem .85rem;
  border-radius: 999px;
  font-size: .8rem;
  font-weight: 600;
  margin-bottom: 1.25rem;
}
.hero-title {
  font-size: 2.1rem;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.025em;
  margin: 0 0 1rem;
}
.hero-desc {
  font-size: .98rem;
  line-height: 1.6;
  color: #dedbd6;
  margin: 0 0 2rem;
}
.hero-cards {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.hero-card {
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  padding: 1rem 1.15rem;
  border-radius: 14px;
  display: flex;
  align-items: center;
  gap: 1rem;
}
.hero-card-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--c-primary);
  display: grid;
  place-items: center;
  color: #fff;
  flex-shrink: 0;
}
.hero-card-icon--green { background: var(--c-success); }
.hero-card-text h4 { margin: 0 0 .15rem; font-size: .92rem; font-weight: 700; }
.hero-card-text p { margin: 0; font-size: .8rem; color: #cfcbc5; }

/* El aviso de sesión desplazada */
.aviso {
  padding: .75rem .95rem;
  border-radius: 10px;
  font-size: .88rem;
  margin-bottom: 1.25rem;
  line-height: 1.45;
  display: flex;
  align-items: center;
  gap: .6rem;
}
.aviso--alerta { background: var(--c-warning-bg); color: var(--c-warning); border: 1px solid rgba(133, 79, 11, 0.2); }
.aviso--error  { background: var(--c-danger-bg);  color: var(--c-danger); border: 1px solid rgba(163, 45, 45, 0.2); }
.aviso--ok     { background: var(--c-success-bg); color: var(--c-success); border: 1px solid rgba(15, 110, 86, 0.2); }

@media (max-width: 54rem) {
  .acceso-hero-wrap { display: none; }
  .acceso-form-wrap { padding: 2rem 1.5rem; max-width: 26rem; }
}

/* ============================================================
   LA APLICACIÓN

   Pensada para un teléfono sostenido con una mano, y que además funcione bien
   en una notebook. Antes era al revés: 981 líneas de escritorio con dos media
   queries de parche, y un vendedor parado en un mostrador tenía que hacer zoom
   para tocar un botón.

   Los tres cortes:
     - hasta 48rem  -> teléfono: menú en cajón, tablas como tarjetas,
                       carrito como hoja que sube desde abajo.
     - 48 a 64rem   -> tablet: menú colapsado a íconos, dos columnas.
     - más de 64rem -> escritorio.
   ============================================================ */

body.sin-scroll,
body.menu-abierto { overflow: hidden; }

/**
 * `hidden` tiene que ganar siempre.
 *
 * `base.css` no lo define y el `display:none` que trae el navegador por
 * omisión lo pisa CUALQUIER regla que fije `display` — le pasó al contador del
 * carrito, que es `display:grid` y se veía como un "0" naranja al lado de
 * "Nuevo pedido" aunque el JavaScript le pusiera `hidden`. Es de los errores
 * que no dan ningún síntoma más que "quedó algo raro en pantalla".
 */
[hidden] { display: none !important; }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.app-shell {
  display: flex;
  min-height: 100vh;
  min-height: 100dvh;
}

.app-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

/* ---------------------------------------------------------- Menú lateral -- */

.menu {
  width: 15.5rem;
  flex-shrink: 0;
  background: var(--c-sidebar-bg);
  border-right: 1px solid var(--c-sidebar-border);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100dvh;
  transition: width .18s cubic-bezier(0.16, 1, 0.3, 1);
}

.menu__cabecera {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: 1rem 1rem .85rem;
  border-bottom: 1px solid var(--c-sidebar-border);
  min-height: 3.5rem;
  box-sizing: border-box;
}
.menu__logo { width: 28px; height: 28px; object-fit: contain; flex-shrink: 0; }
.menu__marca {
  font-weight: 800;
  font-size: 1rem;
  color: var(--c-sidebar-strong);
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.menu__marca span { color: var(--c-primary); }

/* El botón de cerrar sólo existe en el cajón del teléfono. */
.menu__cerrar {
  display: none;
  margin-left: auto;
  background: none;
  border: 0;
  color: var(--c-text-soft);
  cursor: pointer;
  padding: .5rem;
  border-radius: 8px;
}
.menu__cerrar:hover { background: var(--c-sidebar-hover); }

.menu__nav {
  flex: 1;
  overflow-y: auto;
  padding: .75rem .6rem;
  display: flex;
  flex-direction: column;
  gap: .35rem;
}

.menu__grupo { display: flex; flex-direction: column; gap: 2px; }
.menu__grupo + .menu__grupo { margin-top: .85rem; }

.menu__grupo-titulo {
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--c-muted);
  padding: .35rem .7rem .2rem;
  white-space: nowrap;
}

.menu__item {
  display: flex;
  align-items: center;
  gap: .7rem;
  width: 100%;
  min-height: 2.6rem;
  padding: .5rem .7rem;
  border: 0;
  border-radius: 9px;
  background: none;
  color: var(--c-sidebar-text);
  font: inherit;
  font-size: .9rem;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  box-sizing: border-box;
  transition: background .15s, color .15s;
}
.menu__item:hover { background: var(--c-sidebar-hover); color: var(--c-sidebar-strong); }
.menu__item:focus-visible {
  outline: 2px solid var(--c-primary);
  outline-offset: -2px;
}
.menu__item--activo {
  background: var(--c-sidebar-active-bg);
  color: var(--c-sidebar-active-fg);
}

.menu__icono {
  display: grid;
  place-items: center;
  width: 1.35rem;
  flex-shrink: 0;
}
.menu__texto { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.menu__badge {
  background: var(--c-primary);
  color: #fff;
  font-size: .7rem;
  font-weight: 800;
  min-width: 1.25rem;
  height: 1.25rem;
  border-radius: 999px;
  display: grid;
  place-items: center;
  padding: 0 .3rem;
  flex-shrink: 0;
}

.menu__pie {
  border-top: 1px solid var(--c-sidebar-border);
  padding: .75rem .6rem;
  display: flex;
  flex-direction: column;
  gap: .45rem;
}
.menu__usuario {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .35rem .55rem .6rem;
  min-width: 0;
}
.menu__usuario-datos { min-width: 0; }
.menu__usuario-nombre {
  font-size: .85rem;
  font-weight: 700;
  color: var(--c-sidebar-strong);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.menu__usuario-rol { font-size: .75rem; color: var(--c-muted); }

.menu__salir, .menu__colapsar, .menu__instalar {
  width: 100%;
  justify-content: flex-start;
  gap: .7rem;
  min-height: 2.4rem;
}

/* --- Colapsado a íconos (escritorio y tablet) --- */
.menu--colapsado { width: 4.1rem; }
.menu--colapsado .menu__marca,
.menu--colapsado .menu__texto,
.menu--colapsado .menu__grupo-titulo,
.menu--colapsado .menu__usuario-datos { display: none; }
.menu--colapsado .menu__item,
.menu--colapsado .menu__salir,
.menu--colapsado .menu__instalar,
.menu--colapsado .menu__colapsar { justify-content: center; padding-left: .5rem; padding-right: .5rem; }
.menu--colapsado .menu__usuario { justify-content: center; padding-left: 0; padding-right: 0; }
.menu--colapsado .menu__grupo + .menu__grupo {
  margin-top: .5rem;
  padding-top: .5rem;
  border-top: 1px solid var(--c-sidebar-border);
}
.menu--colapsado .menu__badge {
  position: absolute;
  transform: translate(.85rem, -.85rem);
}
.menu--colapsado .menu__item { position: relative; }

.menu-overlay {
  position: fixed;
  inset: 0;
  background: var(--c-velo);
  z-index: 30;
}

/* ------------------------------------------------------ Barra superior --- */

.barra {
  display: flex;
  align-items: center;
  gap: .85rem;
  padding: .7rem 1.25rem;
  background: var(--c-surface);
  border-bottom: 1px solid var(--c-border);
  position: sticky;
  top: 0;
  z-index: 20;
  min-height: 3.5rem;
  box-sizing: border-box;
}

.barra__hamburguesa {
  display: none;
  background: none;
  border: 0;
  color: var(--c-text);
  cursor: pointer;
  padding: .5rem;
  margin-left: -.5rem;
  border-radius: 8px;
}
.barra__hamburguesa:hover { background: var(--c-surface-2); }

.barra__titulo {
  font-weight: 800;
  font-size: 1.05rem;
  letter-spacing: -0.01em;
  color: var(--c-text);
}
.barra__sep { flex: 1; }

.barra__cuenta-pill {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  background: var(--c-surface-2);
  border: 1px solid var(--c-border);
  padding: .3rem .7rem;
  border-radius: 999px;
  font-size: .8rem;
  font-weight: 600;
  color: var(--c-text-soft);
  max-width: 14rem;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.barra__cuenta-pill .dot-live {
  width: 7px; height: 7px;
  background: var(--c-success);
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 0 0 2px rgba(15, 110, 86, 0.2);
}

/* ------------------------------------------------------------- La hoja --- */

.hoja {
  flex: 1;
  padding: 1.5rem;
  box-sizing: border-box;
}
.hoja h2 {
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  margin: 0 0 .35rem;
  color: var(--c-text);
}
.hoja h3 {
  font-size: 1rem;
  font-weight: 800;
  margin: 0 0 .6rem;
  color: var(--c-text);
}
.hoja h4 {
  font-size: .9rem;
  font-weight: 800;
  margin: 1.35rem 0 .5rem;
  color: var(--c-text);
}
.hoja p.ayuda {
  color: var(--c-text-soft);
  font-size: .88rem;
  line-height: 1.5;
  margin: 0 0 1.25rem;
}
.ayuda-inline {
  font-size: .78rem;
  color: var(--c-muted);
  font-weight: 500;
}

.col-angosta { max-width: 40rem; margin: 0 auto; }

/* ------------------------------------------- Mis pedidos: filtros de estado
   Chips en vez de un desplegable: el vendedor ve de un vistazo cuántos tiene
   rechazados sin abrir nada, que es el número que le importa. */
/* Los permisos de un vendedor, debajo de su fila. */
.permisos-fila {
  display: flex;
  flex-wrap: wrap;
  gap: .25rem 1.1rem;
  padding: .55rem .9rem .7rem;
  border-top: 1px solid var(--c-border);
}
.permiso {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: .85rem;
  color: var(--c-text-soft);
  cursor: pointer;
}
.permiso input { accent-color: var(--c-primary); }
.permiso input:disabled + span { opacity: .5; }

/* Cada dirección que necesita localidad, en su propio bloque. */
.loc-bloque + .loc-bloque {
  margin-top: 1rem;
  padding-top: .9rem;
  border-top: 1px solid var(--c-border);
}
.loc-bloque h4 { margin: 0 0 .2rem; font-size: .95rem; }

.filtros-estado {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin: .9rem 0 .2rem;
}
.chip-estado {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .35rem .7rem;
  font: inherit;
  font-size: .85rem;
  color: var(--c-text-soft);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: 999px;
  cursor: pointer;
}
.chip-estado--activo {
  color: #fff;
  background: var(--c-primary);
  border-color: var(--c-primary);
}
.chip-estado__n {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.chip-estado:not(.chip-estado--activo) .chip-estado__n { color: var(--c-text); }

/* La fecha "desde/hasta" con su rótulo al lado, sin ocupar un renglón entero. */
.campo-en-linea {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
}
.campo-en-linea .campo-simple { width: auto; }

.ficha-ped__cab {
  display: flex;
  align-items: center;
  gap: .6rem;
  flex-wrap: wrap;
  margin-bottom: .5rem;
}
.col-media   { max-width: 56rem; margin: 0 auto; }

.estado-vacio {
  text-align: center;
  padding: 2rem 1rem;
  color: var(--c-muted);
  font-size: .88rem;
  background: var(--c-surface);
  border: 1px dashed var(--c-border-strong);
  border-radius: 12px;
}

.separador {
  height: 1px;
  background: var(--c-border);
  margin: 1.15rem 0;
}

.fila-acciones {
  display: flex;
  align-items: center;
  gap: .65rem;
  flex-wrap: wrap;
  margin: 1rem 0;
}

.enlace {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: var(--c-primary-600);
  font-weight: 600;
  cursor: pointer;
  text-align: left;
}
.enlace:hover { text-decoration: underline; }

/* --------------------------------------------------------- Componentes --- */

.tarjeta {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: 12px;
  padding: 1rem 1.15rem;
  margin-bottom: .65rem;
}
.tarjeta__fila {
  display: flex;
  align-items: center;
  gap: .85rem;
  flex-wrap: wrap;
}
.tarjeta__ppal { font-weight: 700; font-size: .95rem; color: var(--c-text); }
.tarjeta__meta { color: var(--c-text-soft); font-size: .82rem; line-height: 1.45; }
.tarjeta__acciones { display: flex; gap: .4rem; flex-wrap: wrap; }
.tarjeta__cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: .85rem;
}

.avatar {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--c-primary-100);
  color: var(--c-primary-600);
  font-weight: 800;
  font-size: .82rem;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.avatar--grande { width: 52px; height: 52px; font-size: 1.1rem; border-radius: 14px; }
.avatar--apagado { background: var(--c-surface-2); color: var(--c-muted); }

.etiqueta {
  font-size: .74rem;
  font-weight: 600;
  padding: .2rem .55rem;
  border-radius: 999px;
  background: var(--c-surface-2);
  color: var(--c-text-soft);
  white-space: nowrap;
  display: inline-block;
}
.etiqueta--activa   { background: var(--c-success-bg); color: var(--c-success); }
.etiqueta--esta     { background: var(--c-primary-100); color: var(--c-primary-600); }
.etiqueta--apagada  { background: var(--c-surface-2); color: var(--c-muted); }
.etiqueta--pendiente{ background: var(--c-warning-bg); color: var(--c-warning); }
.etiqueta--roja     { background: var(--c-danger-bg); color: var(--c-danger); }

.boton--acento {
  border-color: var(--c-primary);
  color: var(--c-primary-600);
  font-weight: 700;
}
.boton--acento:hover { background: var(--c-primary-100); }

.btn-icono {
  background: none;
  border: 0;
  color: var(--c-muted);
  cursor: pointer;
  padding: .45rem;
  border-radius: 8px;
  display: grid;
  place-items: center;
}
.btn-icono:hover { background: var(--c-surface-2); color: var(--c-text); }
.btn-icono--peligro:hover { background: var(--c-danger-bg); color: var(--c-danger); }

.campo-simple {
  width: 100%;
  box-sizing: border-box;
  padding: .6rem .7rem;
  border: 1px solid var(--c-border-strong);
  border-radius: 8px;
  font-family: inherit;
  font-size: .88rem;
  background: var(--c-surface);
  color: var(--c-text);
}
.etiqueta-campo {
  display: block;
  font-size: .8rem;
  font-weight: 700;
  margin-bottom: .3rem;
  color: var(--c-text);
}

.sin-precio { font-size: .8rem; font-weight: 600; color: var(--c-muted); }
.renglon-alerta { color: var(--c-danger); font-weight: 700; font-size: .78rem; }
strong.ok { color: var(--c-success); }
strong.no { color: var(--c-muted); }

.aviso {
  padding: .8rem 1rem;
  border-radius: 10px;
  font-size: .88rem;
  margin-bottom: 1.25rem;
  line-height: 1.45;
  display: flex;
  align-items: center;
  gap: .6rem;
}
.aviso--alerta { background: var(--c-warning-bg); color: var(--c-warning); }
.aviso--error  { background: var(--c-danger-bg);  color: var(--c-danger); }
.aviso--ok     { background: var(--c-success-bg); color: var(--c-success); }

.asientos {
  display: flex;
  align-items: baseline;
  gap: .65rem;
  flex-wrap: wrap;
  margin-bottom: 1.25rem;
  background: var(--c-surface);
  padding: 1rem 1.25rem;
  border: 1px solid var(--c-border);
  border-radius: 12px;
}
.asientos b { font-size: 1.5rem; color: var(--c-primary); }
.asientos span { color: var(--c-text-soft); font-size: .9rem; font-weight: 500; }
.asientos--lleno b { color: var(--c-danger); }

.grilla-alta { display: grid; grid-template-columns: 1fr 1fr; gap: 0 .75rem; }

/* ------------------------------------------------------------- Filtros --- */

.filtros {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: .75rem;
  margin-bottom: .85rem;
}
.campo--filtro { margin-bottom: 0; }
.campo--filtro input, .campo--filtro select { padding: .6rem .75rem; font-size: .9rem; }

.interruptores {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
  padding: .65rem .85rem;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: 10px;
}
.interruptor {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: .85rem;
  color: var(--c-text);
  cursor: pointer;
  min-height: 2rem;
}
.interruptor input { width: 1.1rem; height: 1.1rem; accent-color: var(--c-primary); cursor: pointer; }

.desplegable {
  background: var(--c-surface);
  border: 1px solid var(--c-border-strong);
  border-radius: 10px;
  max-height: 15rem;
  overflow-y: auto;
  margin-bottom: .85rem;
}
.desplegable__item {
  display: block;
  width: 100%;
  text-align: left;
  padding: .65rem .85rem;
  border: 0;
  border-bottom: 1px solid var(--c-border);
  background: none;
  font: inherit;
  font-size: .85rem;
  cursor: pointer;
}
.desplegable__item:last-child { border-bottom: 0; }
.desplegable__item:hover { background: var(--c-surface-2); }
.desplegable__vacio { padding: .75rem .85rem; font-size: .82rem; color: var(--c-muted); }

/* -------------------------------------------------------------- Tablas --- */

.tabla-wrap {
  width: 100%;
  overflow-x: auto;
  border: 1px solid var(--c-border);
  border-radius: 10px;
  background: var(--c-surface);

  /* `position: relative` NO es decorativo: sin él, un descendiente con
     `position: absolute` —el `.sr-only` de la última columna, y el `thead`
     escondido de la versión en tarjetas— se sale del contenedor que tiene el
     `overflow-x` y arrastra a TODA la página al scroll horizontal. Medido:
     el documento se desplazaba 284px al costado en una tabla de siete
     columnas. Un `overflow` sólo recorta a sus descendientes posicionados si
     él mismo está posicionado. */
  position: relative;
}

.tabla {
  width: 100%;
  border-collapse: collapse;
  font-size: .85rem;
  text-align: left;
}
.tabla th {
  background: var(--c-surface-2);
  padding: .65rem .9rem;
  font-size: .76rem;
  font-weight: 700;
  color: var(--c-text-soft);
  border-bottom: 1px solid var(--c-border);
  white-space: nowrap;
}
.tabla td {
  padding: .7rem .9rem;
  border-bottom: 1px solid var(--c-border);
  color: var(--c-text);
  vertical-align: top;
}
.tabla tr:last-child td { border-bottom: 0; }
.tabla code { font-size: .8rem; background: var(--c-surface-2); padding: 1px 5px; border-radius: 4px; }

.fila-destacada td { background: var(--c-primary-100); }

.th-ordenable { cursor: pointer; user-select: none; }
.th-ordenable:hover { color: var(--c-text); background: var(--c-border); }
.th-ordenable--activa { color: var(--c-primary-600); }
.th-ordenable:focus-visible { outline: 2px solid var(--c-primary); outline-offset: -2px; }

.lista-limpia { list-style: none; margin: 0; padding: 0; }
.lista-limpia li { padding: .5rem 0; border-bottom: 1px solid var(--c-border); }
.lista-limpia li:last-child { border-bottom: 0; }

.datos {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .4rem .85rem;
  margin: 0;
  font-size: .85rem;
}
.datos dt { color: var(--c-text-soft); font-weight: 600; }
.datos dd { margin: 0; color: var(--c-text); word-break: break-word; }
.datos--dos { grid-template-columns: auto 1fr auto 1fr; }

/* --------------------------------------------------------- Panel inicio -- */

.dashboard-wrap { display: flex; flex-direction: column; gap: 1.35rem; }

.dashboard-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--c-border);
}

.dashboard-accesos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: .85rem;
}

.acceso-card {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: 12px;
  padding: 1rem 1.15rem;
  display: flex;
  align-items: center;
  gap: .9rem;
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: var(--c-text);
  min-height: 3.75rem;
  transition: border-color .18s, transform .18s;
}
.acceso-card:hover { transform: translateY(-2px); border-color: var(--c-primary); }
.acceso-card:focus-visible { outline: 2px solid var(--c-primary); outline-offset: 2px; }
.acceso-card__icon {
  width: 42px; height: 42px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  background: var(--c-primary-100);
  color: var(--c-primary-600);
}
.acceso-card__info { flex: 1; min-width: 0; }
.acceso-card__titulo { display: block; font-size: .95rem; font-weight: 700; }
.acceso-card__texto { display: block; font-size: .8rem; color: var(--c-text-soft); line-height: 1.35; }

.metricas-grilla {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: .85rem;
}
.metrica-card {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: 12px;
  padding: 1.05rem 1.15rem;
}
.metrica-card--alerta { border-color: var(--c-warning); }
.metrica-card__titulo {
  font-size: .78rem;
  color: var(--c-text-soft);
  font-weight: 700;
  display: block;
  margin-bottom: .35rem;
}
.metrica-card__valor {
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--c-text);
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}
.metrica-card__sub {
  font-size: .78rem;
  color: var(--c-muted);
  margin-top: .3rem;
  display: block;
  line-height: 1.4;
}

/* ---------------------------------------------------- Ficha de cliente --- */

.ficha { max-width: 62rem; margin: 0 auto; }
.ficha__cabecera {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.15rem;
}
.ficha__destacados {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: .85rem;
  margin-bottom: 1rem;
}
.ficha__cuerpo {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
  gap: .85rem;
  align-items: start;
}

.ficha-art__titulo { margin: 0 0 .6rem; font-size: 1.1rem; font-weight: 800; }
.ficha-art__etiquetas { display: flex; gap: .35rem; flex-wrap: wrap; margin-bottom: 1rem; }

/* ------------------------------------------------------------ Catálogo --- */

.catalogo__cabecera { margin-bottom: 1rem; }

/* ------------------------------------------------- Carga del pedido ------ */

.pedido-pos-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 23rem;
  gap: 1.25rem;
  align-items: start;
}
.catalogo-col { display: flex; flex-direction: column; gap: 1rem; min-width: 0; }

.tarjeta-hero-cli {
  background: var(--c-surface);
  border: 1.5px solid var(--c-border);
  border-radius: 14px;
  padding: 1rem 1.15rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.tarjeta-hero-cli__ident { display: flex; align-items: center; gap: .85rem; min-width: 0; }
.tarjeta-hero-cli__avatar {
  width: 44px; height: 44px;
  border-radius: 12px;
  background: var(--c-primary-100);
  color: var(--c-primary-600);
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 1.05rem;
  flex-shrink: 0;
}
.tarjeta-hero-cli__nombre { font-weight: 800; font-size: 1.02rem; color: var(--c-text); }

.buscador-art { padding: .85rem 1rem; margin-bottom: 0; }

.productos-grilla {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: .8rem;
}

/* ---------------------------------------------- Catálogo en lista (tarea 10)
   En ficha entran seis artículos por pantalla y en lista veinte. El vendedor
   que carga veinte renglones pasa el día haciendo scroll. */
.articulos-lista {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--c-border);
  border-radius: var(--radio, 10px);
  overflow: hidden;
  background: var(--c-surface);
}

.art-fila {
  display: grid;
  grid-template-columns: auto 1fr auto auto auto;
  align-items: center;
  gap: .75rem;
  padding: .5rem .7rem;
  border-bottom: 1px solid var(--c-border);
}
.art-fila:last-child { border-bottom: 0; }
.art-fila:nth-child(even) { background: rgba(0, 0, 0, .015); }
.art-fila--no { opacity: .55; }

.art-fila__ident { min-width: 0; }
.art-fila__desc {
  font-weight: 600;
  line-height: 1.25;
  /* Una descripción larga no puede empujar el precio fuera de la pantalla. */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.art-fila__meta {
  display: flex;
  align-items: center;
  gap: .45rem;
  margin-top: .15rem;
  font-size: .78rem;
  color: var(--c-text-soft);
}
.art-fila__cod { font-family: var(--mono, ui-monospace, monospace); }

.art-fila__stock { text-align: right; }

.art-fila__precio {
  text-align: right;
  font-weight: 700;
  white-space: nowrap;
}
.art-fila__lista {
  font-size: .75rem;
  font-weight: 400;
  color: var(--c-text-soft);
}

.art-fila__accion,
.producto-card__accion {
  display: flex;
  align-items: center;
  gap: .4rem;
}

.art-fila__motivo {
  grid-column: 1 / -1;
  font-size: .78rem;
  color: var(--c-text-soft);
}

/* El campo de cantidad (tarea 9): angosto, porque al lado va el botón. */
.cant-art {
  width: 3.75rem;
  padding: .35rem .4rem;
  text-align: center;
  font: inherit;
  font-weight: 600;
  color: var(--c-text);
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: 8px;
}
.cant-art:disabled { opacity: .5; }

/* El conmutador lista / fichas. */
.conmutador {
  display: inline-flex;
  border: 1px solid var(--c-border);
  border-radius: 8px;
  overflow: hidden;
}
.conmutador__op {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .45rem .6rem;
  font: inherit;
  font-size: .85rem;
  color: var(--c-text-soft);
  background: transparent;
  border: 0;
  cursor: pointer;
}
.conmutador__op[aria-pressed="true"] {
  color: #fff;
  background: var(--c-primary);
}
.producto-card {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: 12px;
  padding: .9rem 1rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: .5rem;
}
.producto-card--no { background: var(--c-surface-2); }
.producto-card__cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
}
.producto-card__cod {
  font-size: .73rem;
  font-weight: 700;
  color: var(--c-muted);
  text-transform: uppercase;
}
.producto-card__titulo {
  font-size: .9rem;
  font-weight: 700;
  color: var(--c-text);
  margin: .25rem 0 .5rem;
  line-height: 1.35;
}
.producto-card__etiquetas { display: flex; gap: .3rem; flex-wrap: wrap; }
.producto-card__footer {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: .5rem;
  padding-top: .7rem;
  border-top: 1px dashed var(--c-border);
}
.producto-card__precio { font-size: 1.1rem; font-weight: 800; color: var(--c-text); }
.producto-card__equiv { font-size: .75rem; color: var(--c-muted); }
.producto-card__motivo {
  font-size: .75rem;
  color: var(--c-text-soft);
  background: var(--c-surface);
  border-radius: 6px;
  padding: .35rem .5rem;
  line-height: 1.35;
}

/* -------------------------------------------------------------- Carrito -- */

.carrito-sidebar {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 4.5rem;
  max-height: calc(100vh - 6rem);
  overflow: hidden;
}
.carrito-sidebar__head {
  padding: .85rem 1.15rem;
  border-bottom: 1px solid var(--c-border);
  background: var(--c-surface-2);
  display: flex;
  align-items: center;
  gap: .6rem;
}
.carrito-sidebar__head h3 {
  font-size: .98rem;
  font-weight: 800;
  margin: 0;
  display: flex;
  align-items: center;
  gap: .5rem;
  flex: 1;
}
.carrito-cerrar {
  display: none;
  background: none;
  border: 0;
  color: var(--c-text-soft);
  cursor: pointer;
  padding: .4rem;
  border-radius: 8px;
}
.carrito-sidebar__body {
  padding: 1rem 1.15rem;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  flex: 1;
}

.entrega-box {
  background: var(--c-surface-2);
  border: 1px solid var(--c-border);
  border-radius: 10px;
  padding: .8rem;
}
.entrega-box label {
  display: flex;
  align-items: center;
  gap: .3rem;
  font-size: .8rem;
  font-weight: 700;
  color: var(--c-text);
  margin-bottom: .35rem;
}
.entrega-box select {
  width: 100%;
  box-sizing: border-box;
  padding: .55rem .65rem;
  border: 1px solid var(--c-border-strong);
  border-radius: 8px;
  font-family: inherit;
  font-size: .85rem;
  background: var(--c-surface);
  color: var(--c-text);
}
.entrega-box__preview {
  margin-top: .45rem;
  font-size: .76rem;
  color: var(--c-text-soft);
  background: var(--c-surface);
  padding: .45rem .6rem;
  border-radius: 6px;
  line-height: 1.35;
}

.carrito-lista { display: flex; flex-direction: column; gap: .6rem; }
.carrito-item {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding-bottom: .6rem;
  border-bottom: 1px solid var(--c-border);
}
.carrito-item:last-child { border-bottom: 0; padding-bottom: 0; }
.carrito-item--alerta { background: var(--c-danger-bg); border-radius: 8px; padding: .5rem; }
.carrito-item__info { flex: 1; min-width: 0; }
.carrito-item__desc {
  font-size: .84rem;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.carrito-item__meta { font-size: .74rem; color: var(--c-text-soft); }
.carrito-item__total {
  font-weight: 800;
  font-size: .86rem;
  min-width: 4.5rem;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.cant-control { display: flex; align-items: center; gap: .15rem; flex-shrink: 0; }
.btn-cant {
  width: 2rem;
  height: 2rem;
  border: 1px solid var(--c-border-strong);
  background: var(--c-surface);
  color: var(--c-text);
  border-radius: 7px;
  font-size: 1rem;
  font-weight: 800;
  cursor: pointer;
  display: grid;
  place-items: center;
  padding: 0;
}
.btn-cant:hover { background: var(--c-surface-2); }
.cant-control input {
  width: 3rem;
  text-align: center;
  padding: .3rem .1rem;
  border: 1px solid var(--c-border-strong);
  border-radius: 7px;
  font-family: inherit;
  font-weight: 700;
  font-size: .85rem;
  box-sizing: border-box;
  -moz-appearance: textfield;
}
.cant-control input::-webkit-outer-spin-button,
.cant-control input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.carrito-sidebar__foot {
  padding: .95rem 1.15rem;
  border-top: 1px solid var(--c-border);
  background: var(--c-surface-2);
}
.resumen-fila {
  display: flex;
  justify-content: space-between;
  font-size: .84rem;
  color: var(--c-text-soft);
  margin-bottom: .25rem;
}
.resumen-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 1rem;
  font-weight: 800;
  color: var(--c-text);
  margin-top: .45rem;
  padding-top: .45rem;
  border-top: 1px dashed var(--c-border-strong);
}
.resumen-total__num {
  font-size: 1.3rem;
  color: var(--c-primary);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.resumen-conversion {
  font-size: .78rem;
  color: var(--c-text-soft);
  text-align: right;
  margin-top: .2rem;
  min-height: 1rem;
}

/* La barra de abajo con el total: sólo en pantallas chicas. */
.carrito-barra {
  display: none;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 25;
  background: var(--c-surface);
  border-top: 1px solid var(--c-border-strong);
  padding: .7rem 1rem;
  padding-bottom: calc(.7rem + env(safe-area-inset-bottom));
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  box-shadow: 0 -4px 18px rgba(0,0,0,.08);
}
.carrito-barra__total {
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--c-text);
  font-variant-numeric: tabular-nums;
}
.carrito-barra__sub { font-size: .76rem; color: var(--c-text-soft); }

/* ============================================================
   TERRENO — escáner, estado de la red y compartir

   Las tres cosas que hacen que esto sirva parado en un mostrador.
   ============================================================ */

/* ------------------------------------------------------------- Escáner --- */

.buscador-art__fila {
  display: flex;
  align-items: stretch;
  gap: .5rem;
}

.btn-escaner {
  flex-shrink: 0;
  width: 2.9rem;
  border: 1.5px solid var(--c-primary);
  background: var(--c-primary-100);
  color: var(--c-primary-600);
  border-radius: 10px;
  cursor: pointer;
  display: grid;
  place-items: center;
  padding: 0;
}
.btn-escaner:hover { background: var(--c-primary); color: #fff; }
.btn-escaner:focus-visible { outline: 2px solid var(--c-primary); outline-offset: 2px; }

.escaner__marco {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  background: #16130f;
  border-radius: 12px;
  overflow: hidden;
}
.escaner__marco video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* La mira no lee nada —el detector mira el cuadro entero— pero le dice a la
   persona dónde poner el código, y con eso acierta a la primera. */
.escaner__mira {
  position: absolute;
  left: 8%;
  right: 8%;
  top: 50%;
  height: 26%;
  transform: translateY(-50%);
  border: 2px solid rgba(255, 255, 255, .9);
  border-radius: 8px;
  box-shadow: 0 0 0 100vmax rgba(0, 0, 0, .35);
  pointer-events: none;
}

.escaner .ayuda { margin: .85rem 0 .25rem; }

/* ------------------------------------------------------ Estado de la red -- */

.estado-red {
  display: flex;
  align-items: center;
  gap: .65rem;
  flex-wrap: wrap;
  padding: .6rem 1.25rem;
  font-size: .85rem;
  line-height: 1.4;
  border-bottom: 1px solid var(--c-border);
}
.estado-red__texto { flex: 1; min-width: 12rem; }
.estado-red__punto {
  width: 9px; height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
  background: currentColor;
}
.estado-red--sin    { background: var(--c-warning-bg); color: var(--c-warning); }
.estado-red--espera { background: var(--c-info-bg);    color: var(--c-info); }
.estado-red--mal    { background: var(--c-danger-bg);  color: var(--c-danger); }

/* ------------------------------------------- La respuesta del ERP --------- */

.estado-doc {
  display: flex;
  align-items: flex-start;
  gap: .7rem;
  padding: .85rem 1rem;
  border-radius: 10px;
  font-size: .9rem;
  line-height: 1.45;
  border: 1px solid var(--c-border);
  background: var(--c-surface);
}
.estado-doc--espera { background: var(--c-surface-2); color: var(--c-text-soft); }
.estado-doc--ok     { background: var(--c-success-bg); color: var(--c-success); border-color: transparent; }
.estado-doc--mal    { background: var(--c-danger-bg);  color: var(--c-danger);  border-color: transparent; }
.estado-doc svg { flex-shrink: 0; margin-top: .1rem; }
.estado-doc .ayuda-inline { color: inherit; opacity: .8; }

/* El motivo del ERP llega con un renglón por causa, separados por saltos de
   línea. `pre-line` los respeta: aplastarlos en un párrafo hace que tres
   motivos distintos se lean como una sola frase larga y confusa. */
.motivo-erp {
  white-space: pre-line;
  margin-top: .5rem;
  padding: .6rem .75rem;
  background: var(--c-surface);
  border-radius: 8px;
  color: var(--c-text);
  font-size: .86rem;
}

/* ------------------------------------------------------------ Descuentos -- */

.tachado {
  text-decoration: line-through;
  color: var(--c-muted);
}

.producto-card__lista {
  display: flex;
  align-items: center;
  gap: .35rem;
  font-size: .78rem;
  margin-top: .15rem;
}

.resumen-fila--bonif {
  color: var(--c-success);
  font-weight: 600;
}

.comprobante__bonif {
  margin-top: 10px;
  text-align: right;
  font-size: 12px;
  color: #444;
}

/* --------------------------------------------- Lo que cambió en el pedido -- */

.cambio-precio {
  display: flex;
  align-items: baseline;
  gap: .5rem;
  flex-wrap: wrap;
  margin: .3rem 0;
  font-size: .95rem;
}
.cambio-precio__antes {
  color: var(--c-muted);
  text-decoration: line-through;
}
.cambio-precio__ahora { color: var(--c-text); }

/* -------------------------------------------------------------- Compartir - */

.compartir-fila {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
  margin-top: .7rem;
}
.compartir-fila .boton--suave { flex: 1; min-width: 8rem; }

/* --------------------------------------------------------- El comprobante -- */

/* Sólo existe mientras se imprime: se crea, se imprime y se borra. */
.comprobante { display: none; }

/* ============================================================
   TABLET — el menú arranca colapsado y el pedido pasa a una columna
   ============================================================ */

@media (max-width: 64rem) {
  .pedido-pos-layout { grid-template-columns: 1fr; }
  .carrito-sidebar { position: static; max-height: none; }
  .datos--dos { grid-template-columns: auto 1fr; }
}

/* ============================================================
   TELÉFONO (hasta 48rem)

   Un vendedor usa esto parado y con una mano: objetivos de 44px, menú en
   cajón, tablas como tarjetas y el carrito como hoja con el total siempre a
   la vista.
   ============================================================ */

@media (max-width: 48rem) {

  /* --- El menú es un cajón que entra desde el borde --- */
  .menu {
    position: fixed;
    top: 0; left: 0; bottom: 0;
    z-index: 40;
    width: 17rem;
    height: 100%;
    transform: translateX(-100%);
    transition: transform .22s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 4px 0 24px rgba(0,0,0,.12);
  }
  .menu--abierto { transform: none; }
  /* En el cajón nunca va colapsado: no hay razón para íconos sin texto
     cuando el ancho lo pone el cajón, no la pantalla. */
  .menu--colapsado { width: 17rem; }
  .menu--colapsado .menu__marca,
  .menu--colapsado .menu__texto,
  .menu--colapsado .menu__grupo-titulo,
  .menu--colapsado .menu__usuario-datos { display: revert; }
  .menu--colapsado .menu__item,
  .menu--colapsado .menu__salir,
  .menu--colapsado .menu__instalar,
  .menu--colapsado .menu__colapsar { justify-content: flex-start; padding-left: .7rem; padding-right: .7rem; }
  .menu--colapsado .menu__usuario { justify-content: flex-start; padding-left: .55rem; }
  .menu--colapsado .menu__badge { position: static; transform: none; }
  .menu--colapsado .menu__grupo + .menu__grupo { border-top: 0; margin-top: .85rem; padding-top: 0; }
  .menu__colapsar { display: none; }
  .menu__cerrar { display: grid; }
  .barra__hamburguesa { display: grid; }

  .menu__item { min-height: 2.9rem; font-size: .95rem; }

  /* --- Objetivos táctiles ---
     2,75rem son 44px, que es el mínimo con el que un dedo acierta a la
     primera. Se midieron los que quedaban por debajo: el botón de abrir y el
     de cerrar el menú (36px) y las casillas de los interruptores (18px). */
  .boton, .boton--suave, .btn-cant, .btn-icono, .desplegable__item,
  .barra__hamburguesa, .menu__cerrar, .carrito-cerrar {
    min-height: 2.75rem;
  }
  .barra__hamburguesa, .menu__cerrar, .carrito-cerrar { min-width: 2.75rem; }

  /* En la casilla el objetivo real es la etiqueta entera, no el cuadradito. */
  .interruptor { min-height: 2.75rem; width: 100%; }
  .interruptor input { width: 1.35rem; height: 1.35rem; }
  .interruptores { gap: 0 1.25rem; }
  .btn-cant { width: 2.75rem; }
  .cant-control input { width: 3.4rem; height: 2.75rem; font-size: 1rem; }
  .campo input, .campo select, .campo--filtro input, .campo--filtro select, .campo-simple {
    min-height: 2.75rem;
    /* 16px o más: menos que eso hace que iOS haga zoom al enfocar el campo, y
       la pantalla queda corrida hasta que se sale a mano. */
    font-size: 1rem;
  }

  .hoja { padding: 1rem; padding-bottom: 6rem; }
  .barra { padding: .6rem 1rem; }
  .barra__cuenta-pill { max-width: 9rem; }

  .filtros { grid-template-columns: 1fr; }
  .grilla-alta { grid-template-columns: 1fr; }
  .productos-grilla { grid-template-columns: 1fr; }

  /* En un teléfono cinco columnas no entran: la identificación ocupa el ancho
     y el precio con la acción bajan a un renglón propio. */
  .art-fila { grid-template-columns: auto 1fr auto; row-gap: .45rem; }
  .art-fila__precio { grid-column: 2 / 4; text-align: left; }
  .art-fila__accion { grid-column: 2 / 4; justify-content: flex-start; }
  .conmutador__op span { display: none; }
  .ficha__cuerpo { grid-template-columns: 1fr; }

  .tarjeta__acciones { width: 100%; }
  .tarjeta__acciones .boton--suave { flex: 1; }

  /* El renglón del carrito pasa a dos líneas: la descripción arriba, entera, y
     los controles abajo. En una sola línea de 375px la descripción quedaba en
     "TCW06…", que no le dice nada a nadie — y es justo el dato que el vendedor
     lee para confirmar que agregó lo que quería. */
  .carrito-item { flex-wrap: wrap; row-gap: .5rem; }
  .carrito-item__info { flex: 1 0 100%; }
  .carrito-item__desc { white-space: normal; }
  .carrito-item__total { flex: 1; }

  .btn-escaner { width: 3.2rem; min-height: 2.75rem; }
  .estado-red { padding: .6rem 1rem; }
  .compartir-fila .boton--suave { flex: 1 1 100%; }

  /* --- Las tablas se vuelven tarjetas ---
     Una tabla de siete columnas en 375px o se corta o obliga a arrastrar en
     horizontal para leer un renglón. Cada fila pasa a ser una tarjeta y cada
     celda lleva su rótulo, que es el `data-etiqueta` que pone el JavaScript. */
  .tabla--tarjetas { display: block; }
  .tabla--tarjetas thead {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }
  .tabla--tarjetas tbody, .tabla--tarjetas tr, .tabla--tarjetas td { display: block; width: 100%; box-sizing: border-box; }
  .tabla--tarjetas tr {
    border-bottom: 1px solid var(--c-border);
    padding: .5rem .25rem;
  }
  .tabla--tarjetas tr:last-child { border-bottom: 0; }
  .tabla--tarjetas td {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    border: 0;
    padding: .3rem .75rem;
    text-align: left !important;
  }
  .tabla--tarjetas td::before {
    content: attr(data-etiqueta);
    font-size: .74rem;
    font-weight: 700;
    color: var(--c-muted);
    flex-shrink: 0;
  }
  /* Una celda sin rótulo (la de los botones) ocupa todo el ancho. */
  .tabla--tarjetas td[data-etiqueta=""]::before { content: none; }
  .tabla-wrap { overflow-x: visible; }

  /* --- El carrito es una hoja que sube desde abajo --- */
  .carrito-sidebar {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    /* `top: auto` explícito: la regla de escritorio deja `top: 4.5rem` para el
       `position: sticky`, y con `position: fixed` un `top` Y un `bottom` a la
       vez anclan la caja ARRIBA. La hoja quedaba flotando a 25px del borde
       inferior del teléfono. */
    top: auto;
    z-index: 45;
    border-radius: 16px 16px 0 0;
    max-height: 88vh;
    max-height: 88dvh;
    transform: translateY(101%);
    transition: transform .22s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 -8px 30px rgba(0,0,0,.18);
  }
  .carrito-sidebar.abierto { transform: none; }
  .carrito-cerrar { display: grid; }
  .carrito-barra { display: flex; }
  .carrito-barra[hidden] { display: none; }
}

/* ============================================================
   IMPRESIÓN — para la lista de precios
   ============================================================ */

/* ============================================================
   EL COMPROBANTE IMPRESO

   No se genera un PDF con una biblioteca: el navegador ya sabe hacerlo desde
   "Imprimir → Guardar como PDF", en escritorio y en teléfono. Cuando
   `body.imprimiendo` está puesto, se esconde TODA la aplicación y queda sólo
   la hoja.
   ============================================================ */

@media print {
  body.imprimiendo > *:not(.comprobante) { display: none !important; }
  body.imprimiendo .comprobante { display: block !important; }
}

.comprobante {
  font-family: Arial, Helvetica, sans-serif;
  color: #000;
  padding: 0;
}
.comprobante__cab {
  display: flex;
  align-items: center;
  gap: 12px;
  border-bottom: 2px solid #000;
  padding-bottom: 10px;
  margin-bottom: 14px;
}
.comprobante__cab img { width: 40px; height: 40px; object-fit: contain; }
.comprobante__cab h1 { font-size: 18px; margin: 0; }
.comprobante__fecha { margin-left: auto; text-align: right; font-size: 12px; }
/* La banda que separa un presupuesto de un comprobante. Va en negro sobre
   blanco como el resto de la hoja: un comprobante se imprime en blanco, y un
   fondo de color se pierde en la fotocopia. */
.comprobante__aviso {
  margin-bottom: 12px;
  padding: 6px 8px;
  border: 2px solid #000;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .02em;
  text-align: center;
}

.comprobante__cli { margin-bottom: 12px; font-size: 13px; }
.comprobante__tabla { width: 100%; border-collapse: collapse; font-size: 12px; }
.comprobante__tabla th {
  text-align: left;
  border-bottom: 1px solid #000;
  padding: 5px 6px;
  font-size: 11px;
  text-transform: uppercase;
}
.comprobante__tabla td { padding: 5px 6px; border-bottom: 1px solid #ddd; }
.comprobante__total {
  margin-top: 14px;
  text-align: right;
  font-size: 16px;
  font-weight: bold;
}
.comprobante__equiv { font-size: 11px; font-weight: normal; color: #444; }
.comprobante__obs { font-size: 12px; margin-top: 12px; }
.comprobante__pie {
  margin-top: 20px;
  padding-top: 8px;
  border-top: 1px solid #ccc;
  font-size: 10px;
  color: #555;
}

@media print {
  body { background: #fff; color: #000; }
  .menu, .menu-overlay, .barra, .filtros, .interruptores, .fila-acciones,
  .carrito-barra, .dashboard-accesos, .boton, .estado-red,
  .compartir-fila { display: none !important; }
  .app-shell { display: block; }
  .hoja { padding: 0 !important; }
  .tarjeta { border: 0 !important; padding: 0 !important; }
  .tabla-wrap { border: 1px solid #ccc !important; overflow: visible !important; }
  .tabla th { background: #f0f0f0 !important; color: #000 !important; }
  .tabla--tarjetas { display: table !important; }
  .tabla--tarjetas thead { position: static !important; width: auto !important; height: auto !important; clip: auto !important; }
  .tabla--tarjetas tbody { display: table-row-group !important; }
  .tabla--tarjetas tr { display: table-row !important; }
  .tabla--tarjetas td { display: table-cell !important; }
  .tabla--tarjetas td::before { content: none !important; }
}

/* Mayúsculas en los campos comerciales: es como se carga en el ERP. */
#b-cli, #b-art, #obs, #bc-cli, #cat-busca, #lp-busca-cli, #lp-dest-nombre {
  text-transform: uppercase;
}
#b-cli::placeholder, #b-art::placeholder, #bc-cli::placeholder,
#cat-busca::placeholder, #lp-busca-cli::placeholder, #lp-dest-nombre::placeholder {
  text-transform: none;
}


/* ============================================================
   Instalar la aplicación (ver `app-instalar.js`)
   ============================================================ */

/* El botón del pie del menú lleva el naranja: es la única acción del menú que
   propone algo en vez de navegar, y sin el color se pierde entre Salir y
   Contraer, que es donde nadie lo iba a buscar. */
.menu__instalar {
  color: var(--c-primary-600);
  background: var(--c-sidebar-active-bg);
  border-color: transparent;
}
.menu__instalar:hover { background: var(--c-primary-100); }

/* La invitación de abajo.
   `fixed` y no dentro de `#hoja`: cada vista reescribe la hoja entera y la
   invitación desaparecería al navegar, justo cuando la persona está mirando la
   aplicación por primera vez.
   El `env(safe-area-inset-bottom)` es por la barra del iPhone, que si no tapa
   los botones. */
.instalar-invita {
  position: fixed;
  z-index: 60;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
  width: min(34rem, calc(100vw - 1.6rem));
  display: flex;
  align-items: center;
  gap: .9rem;
  padding: .85rem 1rem;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  animation: instalar-entra .25s ease-out;
}
@keyframes instalar-entra {
  from { opacity: 0; transform: translate(-50%, 1rem); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .instalar-invita { animation: none; }
}

.instalar-invita__logo { width: 40px; height: 40px; flex-shrink: 0; }

.instalar-invita__texto { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .15rem; }
.instalar-invita__texto strong { font-size: .95rem; color: var(--c-text); }
.instalar-invita__texto span { font-size: .82rem; color: var(--c-text-soft); line-height: 1.35; }

.instalar-invita__botones { display: flex; gap: .5rem; flex-shrink: 0; }

/* En un teléfono los botones no entran al lado del texto: van abajo, a lo
   ancho, que además es donde llega el pulgar. */
@media (max-width: 560px) {
  .instalar-invita { flex-wrap: wrap; }
  .instalar-invita__botones { width: 100%; }
  .instalar-invita__botones .boton { flex: 1; justify-content: center; }
}

/* Los pasos de iOS. */
.instalar-pasos { margin: .5rem 0 1rem; padding-left: 1.2rem; line-height: 1.7; color: var(--c-text); }
.instalar-pasos li { margin-bottom: .3rem; }
.instalar-ico {
  display: inline-flex;
  vertical-align: -.25em;
  padding: .1rem .25rem;
  border: 1px solid var(--c-border-strong);
  border-radius: 5px;
  color: var(--c-info);
}