/* ============ RESET ============ */
*,*::before,*::after{box-sizing:border-box;}
:root{
  /* Leído desde JS (ver syncViewportHeight): en iOS, window.visualViewport.height
     NO incluye la franja reservada para el "home indicator" (safe-area-inset-bottom)
     — sin corregirlo, --app-vh queda ~34pt corto del alto real de la pantalla, y
     ese sobrante queda como fondo de <body> sin cubrir (se nota debajo de
     cualquier barra fija pegada al fondo, como el pie de página del celular). */
  --ios-safe-bottom: env(safe-area-inset-bottom);
  /* Alto real del pie de página en celular (medido por JS, ver
     syncChatTopbarHeight) — .chat-grid lo resta junto con
     --chat-topbar-h para que el campo de escribir quede arriba del pie
     de página en vez de tapado por él. 0 en escritorio (el pie de
     página ni siquiera se muestra ahí). */
  --chat-bottom-nav-h: 0px;
}
/* OJO con este overflow-x: por la regla de la spec CSS Overflow, poner
   overflow-x:hidden en un elemento SIN tocar overflow-y hace que el
   navegador compute overflow-y como "auto" solo (nunca se pidió, pero
   pasa igual) — si esto pasaba en <html> Y en <body> a la vez, quedaban
   DOS contenedores de scroll anidados con overflow establecido, y en la
   PWA instalada de iOS eso hacía que .bottom-nav (position:fixed) quedara
   efectivamente recortado a los límites de <body> en vez de ir hasta el
   borde real de la pantalla — el pie de página nunca llegaba abajo del
   todo, y agregarle más padding solo empujaba los íconos más arriba
   (el padding también quedaba adentro del mismo recorte). La solución:
   que SOLO <html> establezca overflow-x:hidden; <body> se queda con su
   overflow por defecto (visible en ambos ejes) — <html> ya alcanza para
   evitar cualquier scroll horizontal de la página entera. */
html{height:100%;overflow-x:hidden;}
body{height:100%;}
html{
  -webkit-text-size-adjust:100%;text-size-adjust:100%;
  -webkit-tap-highlight-color:transparent;
  /* "contain" solo evita que el rebote elástico se escape hacia otro
     elemento (ej. seguir arrastrando la página detrás de un modal) — el
     rebote EN SÍ (el "resorte" al llegar arriba/abajo del todo, típico de
     iOS) sigue mostrándose igual. "none" saca ambas cosas: sin rebote y
     sin que se escape, para que la página se sienta como una app nativa
     en vez de una página web normal. */
  overscroll-behavior-y:none;
  /* Reserva SIEMPRE el ancho de la barra de scroll (en escritorio), esté o
     no visible. Sin esto, al abrir cualquier modal (html.modal-open pone
     overflow:hidden abajo) la barra de scroll desaparece de golpe y todo
     el contenido de fondo se corre esos ~15px hacia la derecha — ese
     salto/reflow del contenido de fondo es lo que se alcanza a ver por un
     instante detrás del modal mientras su fondo oscuro recién está
     apareciendo (fadeIn). En celular (scroll superpuesto, sin ancho
     propio) esta propiedad no cambia nada. */
  scrollbar-gutter:stable;
}
/* Respaldo para navegadores sin scrollbar-gutter (ej. Safari viejo): fuerza
   la barra de scroll siempre visible en vez de "auto", para que igual quede
   reservado su ancho de forma constante. */
@supports not (scrollbar-gutter: stable){
  html{ overflow-y:scroll; }
}
html.modal-open{overflow:hidden;}
/* En el Chat, el card ya ocupa la pantalla completa y tiene su propio
   scroll interno (.chat-msgs) — la PÁGINA no debería poder hacer scroll
   nunca ahí. Si queda aunque sea 1px de overflow (redondeo de subpíxeles
   entre el alto medido por JS y el layout real), Safari/iOS lo usa como
   excusa para desplazar toda la pantalla hacia arriba al enfocar el
   campo de escribir y abrir el teclado — bloquear el scroll acá evita
   que eso pueda pasar, sin importar el redondeo. */
html.chat-open{overflow:hidden;}
/* (Antes hubo acá una regla que le daba overflow:auto a <body> en Chat,
   para absorber el redondeo de subpíxeles de .chat-grid sin que se
   notara — se sacó porque generaba un tironeo de scroll constante: el
   overflow de <body> se activaba y desactivaba en un ciclo con el
   ajuste automático del viewport de iOS. En vez de "darle un colchón
   con scroll a algo que puede desbordar", ahora .chat-grid directamente
   se mide un poco más chico de lo justo (ver CHAT_HEIGHT_SAFETY_PX en
   syncChatTopbarHeight) para que NUNCA llegue a desbordar — sin
   necesitar ningún scroll de respaldo. */
body{margin:0;}
ul{list-style:none;margin:0;padding:0;}
button{font:inherit;color:inherit;}
input,select,textarea{font:inherit;color:inherit;}
a{color:inherit;text-decoration:none;}
h1,h2,h3,h4,p{margin:0;}
/* "Sensación de app": sin el flash gris nativo al tocar (ya hay estados
   :hover/:active propios), sin el menú de copiar/compartir al mantener
   presionado un botón, y sin selección de texto accidental en los
   controles de navegación (SÍ se puede seleccionar texto normal, como
   descripciones o folios, en cualquier otra parte). */
button,.btn,.icon-btn,.sb-link,.tab,.rt-toggle-btn,.feed-item,
tbody tr.tr-clickable,.chat-ch-item,.et-tab-btn{
  touch-action:manipulation;-webkit-touch-callout:none;
}
button,.btn,.icon-btn,.sb-link,.tab{
  -webkit-user-select:none;user-select:none;
}
button{cursor:pointer;}
::-webkit-scrollbar{width:10px;height:10px;}
::-webkit-scrollbar-thumb{background:var(--border-strong);border-radius:8px;}
::-webkit-scrollbar-track{background:transparent;}

/* ============ TOKENS ============ */
:root{
  --bg:#eef2f5;
  --bg-2:#e3e9ee;
  --surface:#ffffff;
  --surface-2:#f6f9fb;
  --border:#d8e1e8;
  --border-strong:#b7c5d0;
  --text:#131c24;
  --text-muted:#55697a;
  --text-faint:#8698a7;
  --accent:#0c6478;
  --accent-strong:#084a59;
  --accent-soft:#e1f1f4;
  --accent-contrast:#ffffff;
  --success:#157a4a;
  --success-soft:#e2f6ea;
  --warning:#a3590a;
  --warning-soft:#fdf0dd;
  --danger:#b3261e;
  --danger-soft:#fbe6e4;
  --info:#2563a8;
  --info-soft:#e3edf9;
  --shadow-sm:0 1px 2px rgba(19,28,36,.08);
  --shadow:0 1px 2px rgba(19,28,36,.06), 0 10px 28px -14px rgba(19,28,36,.24);
  --shadow-lg:0 20px 60px -20px rgba(19,28,36,.35);
  --radius-sm:6px;
  --radius:10px;
  --radius-lg:18px;
  --font-display:'Manrope',system-ui,sans-serif;
  --font-body:'IBM Plex Sans',system-ui,sans-serif;
  --font-mono:'IBM Plex Mono',ui-monospace,'SFMono-Regular',monospace;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0e1620;
    --bg-2:#0a1119;
    --surface:#152029;
    --surface-2:#1a2731;
    --border:#293a46;
    --border-strong:#3b4f5c;
    --text:#e7edf2;
    --text-muted:#9db0bf;
    --text-faint:#6d818f;
    --accent:#3aacc7;
    --accent-strong:#65c6de;
    --accent-soft:#123540;
    --accent-contrast:#06222b;
    --success:#3fbd82;
    --success-soft:#11331f;
    --warning:#e2a23f;
    --warning-soft:#3a2a10;
    --danger:#ef6b62;
    --danger-soft:#3a1815;
    --info:#6ba6e0;
    --info-soft:#14273c;
    --shadow-sm:0 1px 2px rgba(0,0,0,.4);
    --shadow:0 1px 2px rgba(0,0,0,.3), 0 10px 28px -14px rgba(0,0,0,.6);
    --shadow-lg:0 20px 60px -20px rgba(0,0,0,.7);
  }
}
:root[data-theme="dark"]{
  --bg:#0e1620;
  --bg-2:#0a1119;
  --surface:#152029;
  --surface-2:#1a2731;
  --border:#293a46;
  --border-strong:#3b4f5c;
  --text:#e7edf2;
  --text-muted:#9db0bf;
  --text-faint:#6d818f;
  --accent:#3aacc7;
  --accent-strong:#65c6de;
  --accent-soft:#123540;
  --accent-contrast:#06222b;
  --success:#3fbd82;
  --success-soft:#11331f;
  --warning:#e2a23f;
  --warning-soft:#3a2a10;
  --danger:#ef6b62;
  --danger-soft:#3a1815;
  --info:#6ba6e0;
  --info-soft:#14273c;
  --shadow-sm:0 1px 2px rgba(0,0,0,.4);
  --shadow:0 1px 2px rgba(0,0,0,.3), 0 10px 28px -14px rgba(0,0,0,.6);
  --shadow-lg:0 20px 60px -20px rgba(0,0,0,.7);
}

body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  font-size:14px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
.icon{display:inline-block;vertical-align:middle;flex-shrink:0;}
.mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums;}
h1,h2,h3,h4{font-family:var(--font-display);text-wrap:balance;letter-spacing:-.01em;}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important;transition-duration:.001ms !important;}
}

/* ============ LOGIN ============ */
.auth-wrap{
  /* 100vh a secas no sirve en Safari/iOS: no se ajusta cuando la barra de
     direcciones se esconde/aparece al hacer scroll, así que el alto
     "real" cambia todo el tiempo y el navegador reacomoda/repinta el
     layout una y otra vez — eso es el temblor/parpadeo al hacer scroll.
     Mismo arreglo ya probado en el Chat: 100dvh como respaldo moderno, y
     --app-vh (medido por JS con visualViewport, ver syncViewportHeight())
     como el más preciso, al ser la última regla. */
  min-height:100vh;
  min-height:100dvh;
  min-height:var(--app-vh, 100dvh);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:32px 20px;
  background:
    radial-gradient(1100px 560px at 12% -10%, rgba(58,172,199,.18), transparent 60%),
    radial-gradient(900px 480px at 100% 110%, rgba(8,74,89,.35), transparent 55%),
    linear-gradient(160deg, #08222b 0%, #0c313d 45%, #0a1b22 100%);
}
.auth-card{
  width:100%;max-width:960px;
  background:var(--surface);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg);
  display:grid;
  grid-template-columns:1.05fr 1fr;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.08);
}
.auth-side{
  background:linear-gradient(165deg,var(--accent-strong),#0a1b22 120%);
  color:#eaf6f9;
  padding:44px 40px;
  display:flex;flex-direction:column;justify-content:space-between;
  gap:28px;
}
.auth-brand{display:flex;align-items:center;gap:12px;}
.auth-brand .mark{
  width:44px;height:44px;border-radius:12px;background:rgba(255,255,255,.14);
  display:flex;align-items:center;justify-content:center;
}
.auth-brand b{font-family:var(--font-display);font-size:19px;font-weight:800;letter-spacing:.01em;}
.auth-brand span{display:block;font-size:11.5px;color:rgba(234,246,249,.7);letter-spacing:.06em;text-transform:uppercase;}
.auth-side h1{font-size:27px;font-weight:800;line-height:1.25;color:#fff;max-width:22ch;}
.auth-side p.lead{color:rgba(234,246,249,.82);font-size:14px;max-width:34ch;}
.auth-feats{display:flex;flex-direction:column;gap:14px;}
.auth-feats li{display:flex;gap:12px;align-items:flex-start;font-size:13px;color:rgba(234,246,249,.9);}
.auth-feats .icon{color:#8fe0f0;margin-top:1px;}
.auth-foot{font-size:11.5px;color:rgba(234,246,249,.55);}
.auth-form{padding:44px 40px;display:flex;flex-direction:column;gap:20px;justify-content:center;}
.auth-form h2{font-size:21px;font-weight:800;}
.auth-form .sub{color:var(--text-muted);font-size:13px;margin-top:4px;}
.field{display:flex;flex-direction:column;gap:6px;}
.field label{font-size:12.5px;font-weight:600;color:var(--text-muted);}
.field .input-icon{position:relative;}
.field .input-icon .icon{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--text-faint);}
.field .input-icon input{padding-left:38px;}
input[type=text],input[type=password],input[type=number],input[type=date],input[type=month],input[type=search],select,textarea{
  width:100%;
  border:1px solid var(--border-strong);
  background:var(--surface);
  color:var(--text);
  border-radius:var(--radius-sm);
  padding:10px 12px;
  font-size:13.5px;
  outline:none;
  transition:border-color .12s, box-shadow .12s;
  /* Sin esto, el <input type="month"> (filtro de fecha de Facturas) usaba
     la apariencia nativa clara del navegador SIEMPRE, sin importar el
     fondo/texto de arriba — en tema oscuro se veía como un recuadro
     blanco desentonando con el resto. color-scheme le avisa al propio
     control nativo (calendario, flechitas) en qué tema pintarse. */
  color-scheme: light dark;
}
textarea{resize:vertical;min-height:64px;}
/* Campos de fecha en iPhone/iPad: Safari les da un ancho mínimo propio
   (el del control nativo) que ignora el width:100% de arriba — el campo
   quedaba más ancho que el formulario, se salía por la derecha y el modal
   entero se podía desplazar de lado ("la pantalla se mueve" al llenar
   Nueva Factura). min-width:0/max-width:100% lo encierran en su columna;
   la apariencia nativa se quita solo en iOS (-webkit-touch-callout existe
   únicamente ahí), para no tocar el selector de calendario de escritorio
   ni de Android. */
input[type=date],input[type=month],input[type=time],input[type=datetime-local]{min-width:0;max-width:100%;}
@supports (-webkit-touch-callout: none){
  input[type=date],input[type=month],input[type=time],input[type=datetime-local]{
    -webkit-appearance:none;appearance:none;display:block;min-height:42px;text-align:left;
  }
  input::-webkit-date-and-time-value{text-align:left;}
}
input:focus,select:focus,textarea:focus,button:focus-visible,a:focus-visible{
  border-color:var(--accent);
  box-shadow:0 0 0 3px var(--accent-soft);
}
input[readonly]:not([data-kp-ro]){background:var(--surface-2);color:var(--text-muted);cursor:default;}
input[readonly]:not([data-kp-ro]):focus{border-color:var(--border-strong);box-shadow:none;}
.auth-error{
  background:var(--danger-soft);color:var(--danger);border-radius:var(--radius-sm);
  padding:10px 12px;font-size:12.5px;display:flex;gap:8px;align-items:center;
}
.demo-users{border-top:1px dashed var(--border);padding-top:14px;margin-top:2px;}
.demo-users summary{cursor:pointer;font-size:12.5px;color:var(--accent-strong);font-weight:600;list-style:none;display:flex;align-items:center;gap:6px;}
.demo-users summary::-webkit-details-marker{display:none;}
.demo-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px 14px;margin-top:10px;}
.demo-grid div{font-size:11.5px;color:var(--text-muted);display:flex;justify-content:space-between;gap:8px;padding:5px 8px;background:var(--surface-2);border-radius:6px;}
.demo-grid b{color:var(--text);font-family:var(--font-mono);}

/* ============ BUTTONS ============ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:9px 15px;border-radius:var(--radius-sm);font-size:13.5px;font-weight:600;
  border:1px solid transparent;background:var(--surface-2);color:var(--text);
  transition:filter .12s, background .12s, border-color .12s; white-space:nowrap;
}
.btn:hover{filter:brightness(0.97);}
.btn:disabled{opacity:.5;cursor:not-allowed;filter:none;}
:root[data-theme="dark"] .btn:hover, @media (prefers-color-scheme:dark){.btn:hover{filter:brightness(1.15);}}
.btn-primary{background:var(--accent);color:var(--accent-contrast);}
.btn-primary:hover{background:var(--accent-strong);}
.btn-outline{background:transparent;border-color:var(--border-strong);}
.btn-ghost{background:transparent;}
.btn-danger{background:var(--danger-soft);color:var(--danger);}
.btn-sm{padding:6px 11px;font-size:12.5px;border-radius:8px;}
/* Celular: un botón con texto largo (ej. «Carrito de Compra (30) · Generar OC») nunca puede ser más ancho que su fila: pasa a dos líneas */
@media (max-width:640px){
  .btn{max-width:100%;}
  .flex-gap>.btn,.card-head .btn{white-space:normal;text-align:center;line-height:1.25;}
}
.btn-icon{padding:8px;border-radius:8px;}
.btn-block{width:100%;}
.btn:disabled{opacity:.5;cursor:not-allowed;}

/* ============ SHELL ============ */
.shell{display:flex;min-height:100vh;min-height:100dvh;min-height:var(--app-vh, 100dvh);}
.sidebar{
  width:250px;flex-shrink:0;background:var(--surface);border-right:1px solid var(--border);
  display:flex;flex-direction:column;position:sticky;top:0;
  /* Mismo arreglo que .shell/.auth-wrap arriba: 100vh puro tiembla al
     hacer scroll en Safari/iOS porque no sigue el alto real cuando la
     barra de direcciones se esconde/aparece. */
  height:100vh;height:100dvh;height:var(--app-vh, 100dvh);
  z-index:20;
}
.sb-backdrop{display:none;}
/* Pie de página tipo app nativa (solo celular, ver @media 860px): oculto
   por defecto en escritorio, donde el menú lateral ya está siempre a la
   vista. */
.bottom-nav{display:none;}
/* Con el teclado abierto se oculta (ver syncViewportHeight/keyboard-open):
   no hace falta la media query acá porque en escritorio .bottom-nav ya
   está oculto de por sí — esta regla nunca tiene nada que hacer ahí. */
html.keyboard-open .bottom-nav{display:none;}
/* Oculta un <input type="file"> visualmente SIN sacarlo del todo del
   renderizado — display:none en algunas versiones de Safari/iOS puede
   hacer que el <label> que lo envuelve no logre "abrirlo" de forma
   confiable al tocarlo (sobre todo dentro de un modal insertado por
   innerHTML). Esta técnica (0x0px, fuera de la vista, sin display:none)
   es la misma que se usa para ocultar contenido solo visualmente sin
   perder la interacción nativa del navegador con el elemento. */
.file-input-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}
.sb-brand{display:flex;align-items:center;gap:11px;padding:18px 18px 14px;}
.sb-brand .mark{width:36px;height:36px;border-radius:10px;background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.sb-brand b{font-family:var(--font-display);font-weight:800;font-size:15.5px;}
.sb-brand span{display:block;font-size:10.5px;color:var(--text-faint);letter-spacing:.05em;text-transform:uppercase;}
.sb-brand .sb-version{font-size:9px;opacity:.55;letter-spacing:0;text-transform:none;margin-top:1px;}
.sb-brand-actions{margin-left:auto;flex-shrink:0;display:flex;gap:2px;}
.sb-reorder-btn{width:28px;height:28px;padding:0;}
.sb-nav{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:6px 12px 12px;}
.sb-reorder-hint{font-size:11.5px;color:var(--text-faint);display:flex;align-items:center;gap:6px;padding:6px 10px 10px;}


/* Menú lateral oculto en escritorio: se abre como cajón encima del contenido */
.sb-collapse-btn{display:none;font-size:14px;font-weight:700;color:var(--text-faint);}
@media (min-width: 861px){
  .sb-collapse-btn{display:inline-flex;}
  body.sb-collapsed .sidebar{position:fixed;left:0;top:0;bottom:0;transform:translateX(-100%);transition:transform .18s ease;box-shadow:var(--shadow-lg);z-index:30;}
  body.sb-collapsed .sidebar.open{transform:translateX(0);}
  body.sb-collapsed .sb-backdrop{display:block;position:fixed;inset:0;background:rgba(9,15,20,.35);z-index:29;opacity:0;pointer-events:none;transition:opacity .18s ease;}
  body.sb-collapsed .sb-backdrop.open{opacity:1;pointer-events:auto;}
  body.sb-collapsed .menu-toggle{display:flex;}
  body.sb-collapsed .sb-collapse-btn{display:none;}
  #qdock .qd-menu{border:1px solid var(--border);background:var(--surface-2);border-radius:10px;width:38px;height:38px;flex-shrink:0;cursor:pointer;font-size:17px;color:var(--text-muted);display:none;}
  body.sb-collapsed #qdock .qd-menu{display:inline-flex;align-items:center;justify-content:center;}
  #qdock .qd-chip[draggable=true],#qdock .qd-act[draggable=true]{cursor:grab;}
  #qdock .qd-dragging{opacity:.35;}
  #qdock .qd-over{outline:2px solid var(--accent);outline-offset:1px;}
}
/* ============ BARRA INFERIOR (buscador global + accesos) — solo escritorio ============ */
#qdock{display:none;}
@media (min-width: 861px){
  body.qdock-on .main-col{padding-bottom:70px;}
  body.qdock-on #qdock{display:flex;}
  #qdock{position:fixed;bottom:12px;z-index:18;align-items:center;gap:10px;flex-wrap:nowrap;background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:8px 12px;box-shadow:var(--shadow);}
  #qdock .qd-search{flex:1 1 150px;min-width:130px;white-space:nowrap;display:flex;align-items:center;gap:8px;background:var(--surface-2);border:1px solid var(--border);border-radius:10px;padding:9px 12px;color:var(--text-faint);font-size:13.5px;cursor:text;text-align:left;}
  #qdock .qd-search kbd,.qp-kbd{white-space:nowrap;margin-left:auto;font:inherit;font-size:11px;border:1px solid var(--border);border-radius:5px;padding:1px 6px;background:var(--surface);color:var(--text-muted);}
  #qdock .qd-sep{width:1px;height:28px;background:var(--border);flex-shrink:0;}
  #qdock .qd-chips{display:flex;gap:6px;overflow:hidden;flex:0 1 auto;min-width:0;}
  #qdock .btn{white-space:nowrap;flex-shrink:0;}
  #qdock .qd-chip{border:1px solid var(--border);background:var(--surface-2);border-radius:99px;padding:6px 12px;font-size:12.5px;color:var(--text-muted);white-space:nowrap;font-weight:600;cursor:pointer;}
  #qdock .qd-act{border:1px solid var(--border);background:var(--surface);border-radius:99px;padding:6px 13px;font-size:12.5px;color:var(--accent-strong);white-space:nowrap;font-weight:700;cursor:pointer;display:inline-flex;align-items:center;gap:5px;}
  #qdock .qd-act:hover{background:var(--accent-soft);}
  #qdock .qd-chip:hover,#qdock .qd-chip.active{background:var(--accent-soft);color:var(--accent-strong);border-color:transparent;}
  #qdock .qd-edit{border:none;background:none;color:var(--text-faint);cursor:pointer;padding:6px;border-radius:8px;font-size:15px;}
  #qdock .qd-edit:hover{background:var(--surface-2);color:var(--text);}
}
.qp-ov{position:fixed;inset:0;z-index:140;background:rgba(10,17,25,.45);display:flex;align-items:flex-start;justify-content:center;padding:12vh 12px 12px;}
.qp-box{width:100%;max-width:580px;background:var(--surface);border:1px solid var(--border);border-radius:14px;box-shadow:var(--shadow-lg);overflow:hidden;display:flex;flex-direction:column;max-height:70vh;}
.qp-in{display:flex;align-items:center;gap:8px;padding:12px 14px;border-bottom:1px solid var(--border);}
.qp-in input{flex:1;border:none;outline:none;background:none;font-size:15px;color:var(--text);min-width:0;}
.qp-list{overflow-y:auto;padding:6px;}
.qp-h{font-size:10.5px;text-transform:uppercase;letter-spacing:.07em;color:var(--text-faint);font-weight:700;padding:10px 10px 4px;}
.qp-row{display:flex;justify-content:space-between;gap:10px;align-items:center;padding:9px 10px;border-radius:8px;font-size:14px;cursor:pointer;}
.qp-row small{color:var(--text-faint);font-size:12px;white-space:nowrap;}
.qp-row.on{background:var(--accent-soft);color:var(--accent-strong);}
.qp-empty{padding:22px;text-align:center;color:var(--text-faint);font-size:13.5px;}
.qp-foot{border-top:1px solid var(--border);padding:7px 12px;font-size:11.5px;color:var(--text-faint);display:flex;gap:14px;}
.qe-pop{position:fixed;z-index:141;background:var(--surface);border:1px solid var(--border);border-radius:12px;box-shadow:var(--shadow-lg);padding:10px;width:320px;max-height:70vh;overflow:auto;}
.qe-row{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:5px 4px;font-size:13.5px;border-radius:6px;}
.qe-row:hover{background:var(--surface-2);}
.qe-btns{display:flex;gap:2px;flex-shrink:0;}
.qe-btns button{border:none;background:none;color:var(--text-muted);cursor:pointer;width:26px;height:26px;border-radius:6px;font-size:12px;}
.qe-btns button:hover:not(:disabled){background:var(--accent-soft);color:var(--accent-strong);}
.qe-btns button:disabled{opacity:.3;cursor:default;}
.qe-none{font-size:12.5px;color:var(--text-faint);margin:4px;}
.qe-foot{border-top:1px solid var(--border);margin-top:10px;padding-top:8px;text-align:right;}
.qe-pop h4{margin:2px 4px 8px;font-size:13px;}
.qe-pop label{display:flex;gap:8px;align-items:center;padding:6px 4px;font-size:13.5px;cursor:pointer;}
.sb-group-toggle{display:flex;align-items:center;justify-content:space-between;cursor:pointer;user-select:none;}
.sb-group-toggle:hover{color:var(--text-muted);}
.sb-chev{font-size:11px;transition:transform .15s;}
.sb-group-toggle.closed .sb-chev{transform:rotate(-90deg);}
.sb-group-label{font-size:10.5px;text-transform:uppercase;letter-spacing:.07em;color:var(--text-faint);font-weight:700;padding:14px 10px 6px;}
.sb-link-row{display:flex;align-items:center;gap:2px;margin-bottom:2px;}
.sb-link-row .sb-link{flex:1;margin-bottom:0;}
.sb-link-row.sb-dragging{opacity:.45;}
.sb-drag-handle{display:flex;align-items:center;justify-content:center;width:22px;height:34px;flex-shrink:0;color:var(--text-faint);cursor:grab;touch-action:none;border-radius:6px;}
.sb-drag-handle:hover{background:var(--surface-2);color:var(--text-muted);}
.sb-drag-handle:active{cursor:grabbing;}
.sb-link{
  display:flex;align-items:center;gap:11px;padding:9px 10px;border-radius:8px;color:var(--text-muted);
  font-size:13.3px;font-weight:600;margin-bottom:2px;position:relative;
}
.sb-link .icon{color:var(--text-faint);}
.sb-link:hover{background:var(--surface-2);color:var(--text);}
.sb-link.active{background:var(--accent-soft);color:var(--accent-strong);}
.sb-link.active .icon{color:var(--accent-strong);}
.sb-link .badge-dot{margin-left:auto;background:var(--danger);color:#fff;border-radius:99px;font-size:10.5px;font-weight:700;padding:1px 6px;}
.sb-user{border-top:1px solid var(--border);padding:12px;display:flex;align-items:center;gap:10px;}
.sb-user .avatar{width:34px;height:34px;border-radius:9px;background:var(--surface-2);color:var(--accent-strong);display:flex;align-items:center;justify-content:center;font-weight:800;font-family:var(--font-display);flex-shrink:0;overflow:hidden;cursor:pointer;padding:0;border:none;}
.sb-user .who{flex:1;min-width:0;}
.sb-user .who b{display:block;font-size:12.8px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.sb-user .who span{font-size:11px;color:var(--text-faint);}

/* Pie de página (bottom-nav): reglas de layout acá, visibilidad/posición
   fija se resuelven en @media (max-width:860px) más abajo — así en
   escritorio ni siquiera se calcula el position:fixed. */
.bn-item{
  flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  padding:7px 4px 6px;color:var(--text-faint);font-size:10.5px;font-weight:600;position:relative;
}
/* Los 4 de siempre (Chat/Catálogo/Facturas/Ajustes) usan una etiqueta
   corta a propósito, pero "Editar accesos" en Ajustes permite elegir
   CUALQUIER pestaña — algunas con nombres bastante más largos ("Permisos
   (Root)", "Órdenes de Compra") que no entran en un botón de 4 columnas. */
.bn-item span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.bn-item .icon{color:var(--text-faint);}
.bn-item.active{color:var(--accent-strong);}
.bn-item.active .icon{color:var(--accent-strong);}
.bn-item .badge-dot{position:absolute;top:2px;right:calc(50% - 20px);background:var(--danger);color:#fff;border-radius:99px;font-size:9.5px;font-weight:700;padding:1px 5px;}

.main-col{flex:1;min-width:0;display:flex;flex-direction:column;}
.topbar{
  position:sticky;top:0;z-index:10;background:var(--bg);
  display:flex;align-items:center;gap:14px;padding:16px 26px;border-bottom:1px solid var(--border);
  /* Sin backdrop-filter: el fondo (--bg) es opaco, así que el desenfoque
     no se veía nunca, pero obligaba al navegador a recalcularlo en cada
     cuadro de scroll (tirones en celulares de gama baja). */
}
.topbar h1{font-size:19px;font-weight:800;}
.topbar .crumbs{font-size:12px;color:var(--text-faint);}
.topbar-spacer{flex:1;}
.icon-btn{position:relative;width:36px;height:36px;border-radius:9px;background:var(--surface);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;color:var(--text-muted);}
.icon-btn .dot{position:absolute;top:-3px;right:-3px;background:var(--danger);color:#fff;font-size:10px;font-weight:700;border-radius:99px;min-width:16px;height:16px;display:flex;align-items:center;justify-content:center;padding:0 3px;border:2px solid var(--bg);}
.menu-toggle{display:none;}
/* overflow-x:hidden acá además de en <html> (ver arriba): una segunda
   red de contención — si algún elemento suelto adentro de una pantalla
   llega a ser un poco más ancho de lo que debería (ej. un botón que no
   se ajusta bien en un celular angosto), que quede recortado ACÁ, en vez
   de forzar todo el documento a ser más ancho que la pantalla y generar
   ese desplazamiento horizontal raro al arrastrar. */
/* Sin ancho máximo: antes max-width:1400px dejaba una franja vacía a la
   derecha en monitores anchos (ej. 1920px) y la barra de scroll de .view
   quedaba a mitad de pantalla en vez de en el borde. */
.view{padding:22px 26px 60px;overflow-x:hidden;}
/* El Chat ya maneja su propio layout completo de arriba a abajo (el
   campo de escribir es lo último dentro de .chat-grid) — el padding
   inferior de .view (pensado para que el contenido normal no quede tapado
   por el navegador al hacer scroll) le sobra acá, y en celular quedaba
   como un espacio muerto entre el campo de escribir y el teclado. */
.view.view-chat{padding-bottom:0;}

/* ============ CARDS / KPI ============ */
/* Paneles y tarjetas KPI más compactos (menos padding/tamaño de letra) a
   propósito, tanto en escritorio como en celular: con muchos paneles uno
   debajo del otro (Panel General, Control de Facturas), el tamaño grande
   original obligaba a bajar mucho para ver todo. */
.grid{display:grid;gap:12px;}
.kpi-row{grid-template-columns:repeat(4,1fr);margin-bottom:12px;}
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-sm);}
.card-pad{padding:14px 16px;}
.card-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid var(--border);gap:12px;}
.card-head h3{font-size:14px;font-weight:700;}
.card-head p{font-size:11.5px;color:var(--text-faint);margin-top:2px;}
/* Las descripciones de funcionamiento bajo el título de cada tarjeta ("Filtra el catálogo
   por…", "Registra la recepción de…") se ocultan en todas las pestañas: ocupaban espacio y
   no muestran ningún dato. */
.card-head p{display:none;}
/* Igual con el texto fijo "Elige de la lista o escribe para buscar." sobre las listas de Ingresos/Salidas. */
.mt-2 > .helper-text:has(+ .suggest-list){display:none;}
.kpi{padding:12px 14px;display:flex;flex-direction:column;gap:5px;}
.kpi .top{display:flex;align-items:center;justify-content:space-between;}
.kpi .lbl{font-size:11px;color:var(--text-muted);font-weight:600;}
.kpi .ic{width:26px;height:26px;border-radius:8px;display:flex;align-items:center;justify-content:center;}
.kpi .val{font-family:var(--font-display);font-size:20px;font-weight:800;}
.kpi .sub{font-size:10.5px;color:var(--text-faint);}
.tone-accent{background:var(--accent-soft);color:var(--accent-strong);}
.tone-success{background:var(--success-soft);color:var(--success);}
.tone-warning{background:var(--warning-soft);color:var(--warning);}
.tone-danger{background:var(--danger-soft);color:var(--danger);}
.tone-info{background:var(--info-soft);color:var(--info);}

/* ============ BADGES / PILLS ============ */
.pill{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:99px;font-size:11.5px;font-weight:700;}
/* ---- Agenda de compras ---- */
.ag-chip{display:flex;align-items:center;gap:12px;background:var(--surface-2);border:1px solid var(--border);border-radius:14px;padding:6px 10px 6px 10px;color:var(--text);text-align:left;min-width:0;max-width:100%;cursor:pointer;}
.ag-chip:hover{border-color:var(--border-strong);}
.ag-chip:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
.ag-ring{width:34px;height:34px;flex:0 0 auto;color:var(--text);}
.ag-chip-t{display:flex;flex-direction:column;min-width:0;line-height:1.2;}
.ag-chip-t b{font-size:13px;font-weight:700;}
.ag-chip-t span{font-size:11.5px;color:var(--text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:260px;}
.ag-chip-t span b{font-size:11.5px;}
.ag-warn{color:var(--warning);} .ag-late{color:var(--danger);}
.ag-week{display:none;gap:3px;padding-left:12px;border-left:1px solid var(--border);}
@media (min-width:1561px){ .ag-week{display:flex;} }   /* la semana de un vistazo solo donde sobra ancho; en el resto está la pestaña «Semana» */
.ag-wd{width:26px;text-align:center;border-radius:8px;padding:3px 0 4px;}
.ag-wd i{display:block;font-style:normal;font-size:10.5px;font-weight:700;color:var(--text-faint);}
.ag-wd s{display:flex;justify-content:center;gap:2px;margin-top:3px;height:5px;text-decoration:none;}
.ag-wd u, .ag-ev:before{width:5px;height:5px;border-radius:50%;background:var(--text-faint);display:block;text-decoration:none;}
.ag-wd u.ok{background:var(--success);} .ag-wd u.pend{background:var(--warning);} .ag-wd u.late{background:var(--danger);}
.ag-wd.today{background:var(--bg-2);} .ag-wd.today i{color:var(--text);}
.ag-chip > svg.icon{color:var(--text-faint);flex:0 0 auto;}
.ag-kicker{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text-faint);}
.ag-seg{display:flex;background:var(--bg-2);border-radius:10px;padding:2px;margin-bottom:14px;}
.ag-seg button{flex:1;padding:8px 6px;font-size:13px;font-weight:600;color:var(--text-muted);border-radius:8px;background:none;border:0;cursor:pointer;}
.ag-seg button.on{background:var(--surface);color:var(--text);box-shadow:var(--shadow-sm);}
.ag-list{border:1px solid var(--border);border-radius:14px;overflow:hidden;}
.ag-it{display:grid;grid-template-columns:52px minmax(0,1fr) auto;gap:12px;align-items:center;padding:13px 14px;border-bottom:1px solid var(--border);}
.ag-it:last-child{border-bottom:0;}
.ag-hr{font-family:var(--mono,ui-monospace,monospace);font-size:14px;font-weight:700;}
.ag-hr small{display:block;font-family:inherit;font-size:10.5px;font-weight:500;color:var(--text-faint);margin-top:1px;}
.ag-nm{font-size:14.5px;font-weight:700;overflow-wrap:anywhere;}
.ag-mt{font-size:12px;color:var(--text-muted);margin-top:2px;}
.ag-it.late .ag-mt{color:var(--danger);}
.ag-prog{height:3px;background:var(--bg-2);border-radius:2px;margin-top:8px;overflow:hidden;} .ag-prog b{display:block;height:100%;background:var(--warning);border-radius:2px;}
.ag-acts{display:flex;gap:8px;flex-wrap:wrap;margin-top:9px;}
.ag-foot{margin-top:12px;}
.ag-wnav{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:10px;} .ag-wnav > b{font-size:13.5px;} .ag-sum{margin-left:auto;font-size:12.5px;color:var(--text-muted);}
.ag-wlist{border:1px solid var(--border);border-radius:14px;overflow:hidden;}
.ag-wrow{display:grid;grid-template-columns:104px minmax(0,1fr);gap:10px;padding:10px 14px;border-bottom:1px solid var(--border);align-items:center;}
.ag-wrow:last-child{border-bottom:0;} .ag-wrow.today{background:var(--surface-2);}
.ag-wday b{display:block;font-size:13px;} .ag-wday small{font-size:11px;color:var(--text-faint);}
.ag-wev{display:flex;gap:6px;flex-wrap:wrap;} .ag-none{font-size:12px;color:var(--text-faint);}
.ag-ev{display:inline-flex;flex-direction:column;border-radius:9px;padding:5px 9px;background:var(--bg-2);border-left:3px solid var(--text-faint);min-width:0;}
.ag-ev:before{display:none;}
.ag-ev b{font-size:12px;overflow-wrap:anywhere;} .ag-ev small{font-size:10.5px;color:var(--text-muted);}
.ag-ev.ok{border-left-color:var(--success);background:var(--success-soft);} .ag-ev.pend{border-left-color:var(--warning);background:var(--warning-soft);} .ag-ev.late{border-left-color:var(--danger);background:var(--danger-soft);}
.ag-plist{border:1px solid var(--border);border-radius:14px;overflow:hidden;}
.ag-prow{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:12px;align-items:center;padding:10px 14px;border-bottom:1px solid var(--border);}
.ag-prow:last-child{border-bottom:0;}
.ag-pname{font-size:13.5px;font-weight:600;color:var(--text-muted);overflow-wrap:anywhere;} .ag-prow.on .ag-pname{color:var(--text);font-weight:700;}
.ag-days{display:flex;gap:4px;}
.ag-d{width:30px;height:30px;border-radius:50%;border:1.5px solid var(--border-strong);background:none;color:var(--text-muted);font-size:11.5px;font-weight:700;cursor:pointer;padding:0;}
.ag-d.on{background:var(--accent);border-color:var(--accent);color:var(--accent-contrast);}
.ag-d:disabled{cursor:default;opacity:.7;}
.ag-d:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
.ag-lim{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--text-faint);font-weight:600;margin:0;}
.ag-lim input{width:auto;min-width:104px;padding:6px 8px;font-size:13px;}
.ag-prow:not(.on) .ag-lim{opacity:.55;}
@media (max-width:640px){
  .ag-chip{order:3;width:100%;} .ag-chip-t{flex:1;} .ag-chip-t span{max-width:none;white-space:normal;}
  .ag-it{grid-template-columns:46px minmax(0,1fr);} .ag-it > .pill{grid-column:2;justify-self:start;}
  .ag-wrow{grid-template-columns:86px minmax(0,1fr);}
  .ag-prow{grid-template-columns:minmax(0,1fr) auto;} .ag-prow .ag-pname{grid-column:1 / -1;} .ag-d{width:32px;height:32px;}
}
@media (max-width:380px){ .ag-prow{grid-template-columns:1fr;} }
.pill-success{background:var(--success-soft);color:var(--success);}
.pill-warning{background:var(--warning-soft);color:var(--warning);}
.pill-danger{background:var(--danger-soft);color:var(--danger);}
.pill-info{background:var(--info-soft);color:var(--info);}
.pill-neutral{background:var(--surface-2);color:var(--text-muted);}
.dept-chip{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;}
.dept-dot{width:9px;height:9px;border-radius:99px;flex-shrink:0;}
/* Root: el nombre del departamento del encabezado es el selector (no hay un campo aparte). */
.dept-pick{width:auto;max-width:100%;min-width:0;font:inherit;font-size:14px;font-weight:700;color:var(--text);background-color:transparent;border:1px solid var(--border-strong);border-radius:var(--radius-sm);padding:5px 30px 5px 10px;cursor:pointer;-webkit-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 9px center;}

/* ============ FEED (Movimientos Recientes del Panel General) ============
   Una línea por movimiento (ícono + título/detalle + hora) en vez de una
   fila de tabla completa: mucho más compacto para un vistazo rápido. Cada
   ítem se puede pulsar para desplegar fecha completa, artículos y nota. */
.feed-list{display:flex;flex-direction:column;}
.feed-item{display:flex;align-items:flex-start;gap:10px;padding:10px 20px;border-bottom:1px solid var(--border);cursor:pointer;}
.feed-ic,.feed-time{margin-top:1px;}
.feed-item:last-child{border-bottom:none;}
.feed-item:hover{background:var(--surface-2);}
.feed-ic{width:32px;height:32px;border-radius:9px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.feed-main{flex:1;min-width:0;}
.feed-title{font-size:13px;font-weight:700;}
.feed-title .mono{font-weight:600;font-size:11px;}
.feed-sub{font-size:11.5px;color:var(--text-faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.feed-time{display:flex;flex-direction:column;align-items:flex-end;gap:3px;font-size:11px;color:var(--text-faint);flex-shrink:0;white-space:nowrap;}
.feed-time svg{transition:transform .15s ease;}
.feed-item.expanded .feed-time svg{transform:rotate(180deg);}
.feed-detail{display:none;margin-top:8px;padding-top:8px;border-top:1px dashed var(--border);}
.feed-item.expanded .feed-detail{display:block;}
.feed-detail-row{display:flex;justify-content:space-between;gap:10px;font-size:11.5px;padding:3px 0;}
.feed-detail-row>span:first-child{color:var(--text-faint);}

/* ============ TABLE ============ */
.table-wrap{overflow-x:auto;max-width:100%;}
.sg-wrap{margin-top:14px;border-top:1px solid var(--border);padding-top:12px;}
.sg-wrap.sg-menu{margin-top:0;border-top:0;padding-top:0;}
.sg-wrap.sg-menu .sg-body{margin-top:0;}
.sg-bar{display:flex;align-items:center;gap:8px;width:100%;text-align:left;background:var(--surface-2,#f3f3ef);border:1.5px solid var(--border-strong,#bbb);border-radius:10px;padding:11px 12px;cursor:pointer;font:inherit;color:inherit;}
.sg-bar b{flex:1;font-size:13.5px;}
.sg-bar .sg-chev{transition:transform .15s;display:inline-flex;}
.sg-bar.open .sg-chev{transform:rotate(180deg);}
.sg-body{margin-top:10px;}
.sg-tools{display:flex;gap:6px;align-items:center;margin-bottom:6px;}
.sg-tools .searchbox{flex:1;min-width:0;}
.sg-small{border:1.5px solid var(--border-strong,#bbb);border-radius:10px;max-height:168px;overflow-y:auto;overscroll-behavior:contain;}
.sg-row{display:flex;align-items:center;gap:8px;padding:8px 10px;border-bottom:1px solid var(--border);}
.sg-row:last-of-type{border-bottom:0;}
.sg-row .sg-meta{flex:1;min-width:0;}
.sg-row .sg-meta b{font-size:13px;display:block;}
.sg-row .sg-meta span{font-size:11px;color:var(--text-faint,#777);}
/* Stock del artículo resaltado (ventana «Insumos» del Menú): verde con stock, ámbar en el mínimo o bajo él, rojo sin stock. */
.sg-row .sg-meta .sg-stk{display:inline-block;margin-left:4px;padding:1px 9px;border-radius:99px;font-size:12px;font-weight:800;font-style:normal;white-space:nowrap;}
.sg-row .sg-meta .sg-stk.ok,.stk-badge.ok,.fa-main.ok{background:var(--success-soft);color:var(--success);}
.sg-row .sg-meta .sg-stk.low,.stk-badge.low,.fa-main.low{background:var(--warning-soft);color:var(--warning);}
.sg-row .sg-meta .sg-stk.out,.stk-badge.out,.fa-main.out{background:var(--danger-soft);color:var(--danger);}
.stk-badge.req{background:var(--info-soft);color:var(--info);}
/* Stock disponible: etiqueta a la derecha de cada artículo, con el número grande y de color
   (verde con stock · ámbar en o bajo el mínimo · rojo sin stock). Misma etiqueta en Ingresos,
   Salidas, Solicitudes y Mi Departamento. */
.stk-badge{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;flex-shrink:0;min-width:56px;padding:5px 11px;border-radius:12px;line-height:1.1;text-align:center;font-style:normal;white-space:nowrap;}
.stk-badge small{font-size:9.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;opacity:.85;}
.stk-badge b{font-size:19px;font-weight:800;}
.cib-info .stk-badge,.stk-inline .stk-badge{flex-direction:row;align-items:baseline;gap:6px;min-width:0;margin-top:5px;padding:2px 11px;border-radius:99px;}
.cib-info .stk-badge small,.stk-inline .stk-badge small{font-size:10px;}
.cib-info .stk-badge b,.stk-inline .stk-badge b{display:inline;font-size:15px;font-weight:800;overflow:visible;}
.stk-inline .stk-badge{margin-top:0;}
/* Ventana «Ingresa la cantidad»: Stock actual → Nuevo en dos etiquetas de color (si los números son largos bajan de línea en vez de apretar los botones -/+). */
.cqp-mid{flex:1 1 130px;min-width:0;max-width:210px;}
.cqp-preview{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:4px 6px;margin:4px 0 6px;}
.cqp-preview .stk-badge{min-width:0;padding:4px 10px;border-radius:12px;}
.cqp-preview .stk-badge b{font-size:18px;}
.cqp-arrow{font-weight:800;color:var(--text-muted);}
.sg-none{padding:14px 10px;text-align:center;}
.sg-custom{margin-top:6px;}
.sg-count{margin-top:12px;font-size:12px;font-weight:700;display:flex;align-items:center;gap:6px;}
.sg-big{border:1.5px solid var(--border-strong,#bbb);border-radius:10px;min-height:112px;margin-top:6px;max-height:300px;overflow:auto;overscroll-behavior:contain;}
.sg-big table{width:100%;}
.sg-big .sg-empty{text-align:center;padding:38px 12px;}
.sg-big td,.sg-big th{padding:8px 6px;}
.sg-big input[type=number]{width:58px;text-align:center;padding:6px 4px;}
.sg-big select{width:84px;min-width:0;padding:6px 4px;}

table{width:100%;border-collapse:collapse;font-size:13px;}
thead th{
  text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--text-faint);
  font-weight:700;padding:10px 14px;border-bottom:1px solid var(--border);white-space:nowrap;background:var(--surface-2);
}
tbody td{padding:11px 14px;border-bottom:1px solid var(--border);vertical-align:middle;}
tbody tr:last-child td{border-bottom:none;}
tbody tr:hover{background:var(--surface-2);}
tbody tr.tr-clickable{cursor:pointer;}
td.num,th.num{text-align:right;font-family:var(--font-mono);}
.row-actions{display:flex;gap:6px;justify-content:flex-end;}
.rt-toggle-row{display:none;}
.rt-digest{display:none;}
/* Lista de precios de un proveedor: la DESCRIPCIÓN es lo que se lee primero (en celular pasa a ser el título de la tarjeta y el código queda debajo). */
.prov-cat-table td .prov-desc{font-weight:700;color:var(--text);}
.empty-state{padding:48px 20px;text-align:center;color:var(--text-faint);}
.empty-state .icon{margin-bottom:10px;color:var(--text-faint);}
/* Variante compacta para paneles chicos (ej. los gráficos de Control de
   Facturas sin datos): el "Sin datos" grande de .empty-state está pensado
   para reemplazar una tabla entera — dentro de un panel de gráfico ya
   angosto, ese mismo tamaño se ve gigante y desproporcionado, más aún
   apilando varios uno debajo del otro en celular. */
.empty-state-sm{padding:14px 10px;text-align:center;color:var(--text-faint);font-size:12.5px;}
.empty-state-sm .icon{margin-bottom:4px;color:var(--text-faint);}
.empty-state h4{color:var(--text-muted);margin-bottom:4px;}

/* ============ TABS ============ */
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--border);margin-bottom:18px;flex-wrap:wrap;}
.tab{padding:10px 14px;font-size:13px;font-weight:600;color:var(--text-muted);border-bottom:2px solid transparent;margin-bottom:-1px;}
.tab.active{color:var(--accent-strong);border-color:var(--accent);}
.tab:hover{color:var(--text);}

/* ============ CART / OPERATION LAYOUT ============ */
.op-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:18px;align-items:start;}
/* Los ítems de un grid, igual que los de un flex, por defecto NO se
   achican más allá del ancho mínimo de su contenido (min-width:auto) —
   un botón de texto largo sin espacio para partirse (white-space:nowrap)
   adentro de una tarjeta acá podía forzar TODA la columna (y con ella,
   toda la página en celular) a quedar más ancha que la pantalla, sin que
   ningún ajuste adentro de la tarjeta (flex-wrap, etc.) pudiera arreglarlo
   — el cuello de botella estaba acá afuera, no adentro. */
.op-grid > *{min-width:0;}
.dash-bottom-grid{display:grid;grid-template-columns:1.5fr 1fr;gap:12px;align-items:start;}
/* Movimientos Recientes / Alertas de Stock / Más Consumidos: alto máximo
   con scroll propio, para que estas tarjetas del Panel General no crezcan
   sin límite (y empujen el resto de la página hacia abajo) cuando hay
   varios ítems — se navega la lista adentro, no toda la pantalla. */
.dash-scroll-list{max-height:320px;overflow-y:auto;overscroll-behavior:contain;}
/* Oculto por defecto (escritorio, donde el scroll de arriba ya alcanza) —
   se muestra en celular vía @media max-width:720px, ver ahí. */
.dash-see-all{display:none;}
.searchbox{position:relative;}
.searchbox .icon{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--text-faint);}
.searchbox input{padding-left:36px;}
/* .filter-clearable: mismo botoncito "x" que .searchbox, pero sin el
   ícono de lupa a la izquierda — para filtros sueltos (ej. los de "Ver
   Facturas": texto, mes, fecha) que necesitan limpiarse rápido con un
   toque en vez de borrar el campo a mano. */
.filter-clearable{position:relative;}
.searchbox .clear-btn,.filter-clearable .clear-btn{
  position:absolute;right:8px;top:50%;transform:translateY(-50%);
  width:22px;height:22px;border-radius:99px;border:none;padding:0;
  background:var(--surface-2);color:var(--text-faint);display:flex;
  align-items:center;justify-content:center;cursor:pointer;
}
.btn.camera-scan-btn{width:40px;height:40px;border-radius:10px;border:1px solid var(--border);background:var(--accent-soft);color:var(--accent);padding:0;}
.btn.camera-scan-btn:hover:not(:disabled){background:var(--accent-soft);filter:brightness(.95);}
.searchbox:has(> .scan-btn){margin-right:48px;}
.searchbox .scan-btn{position:absolute;right:-46px;top:0;bottom:0;margin:auto 0;width:40px;height:40px;border-radius:10px;border:1px solid var(--border);padding:0;background:var(--accent-soft);color:var(--accent);display:flex;align-items:center;justify-content:center;cursor:pointer;}
.searchbox .clear-btn:hover,.filter-clearable .clear-btn:hover{background:var(--border);}
.searchbox input.has-clear,.filter-clearable input.has-clear,.filter-clearable select.has-clear{padding-right:34px;}
.suggest-list{margin-top:8px;border:1px solid var(--border);border-radius:var(--radius-sm);max-height:280px;overflow-y:auto;}
/* Ver el comentario junto a suggestListHtml (opts.tall): sin techo fijo de
   280px, para que la lista ocupe el espacio disponible en vez de quedar en
   su propio recuadro chico con un hueco vacío debajo (ver
   syncListPanelHeight(), que mide en vivo dónde empieza la lista de verdad
   y hasta dónde puede llegar, para no dejar hueco ni pasarse). Misma regla
   en escritorio y celular: en escritorio --list-fill-bottom-h siempre da
   0px (.bottom-nav vive con display:none ahí, ver más abajo), así que acá
   la lista simplemente llega hasta el borde de abajo de la pantalla; en
   celular además reemplaza al pie de página fijo (ver @media max-width:640px,
   donde además se oculta el carrito de al lado — la lista de acá nunca
   cambia el carrito, solo su propio alto). */
.suggest-list.suggest-list-tall{
  max-height:none;
  height:calc(var(--app-vh, 100dvh) - var(--list-fill-top, 0px) - var(--list-fill-bottom-h, 0px) - 12px);
  overflow-y:auto;
}
.suggest-item{display:flex;align-items:center;gap:12px;padding:10px 12px;border-bottom:1px solid var(--border);}
.suggest-item:last-child{border-bottom:none;}
.suggest-item:hover{background:var(--surface-2);}
.suggest-item.tr-clickable{cursor:pointer;}
.suggest-item .meta{flex:1;min-width:0;}
.suggest-item .meta b{display:block;font-size:13px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.suggest-item .meta span{font-size:11.5px;color:var(--text-faint);font-family:var(--font-mono);}
/* Buscador de Artículos (Panel General): stock de Almacén General + desglose
   por departamento en cada resultado (ver dashboardArticleSuggestHtml).
   Base (celular / ventana angosta): tarjeta — foto, nombre y estado arriba y
   debajo "chips" con el stock de cada lugar (los departamentos en 0 se
   ocultan para no llenar la pantalla). En un contenedor ancho (ver
   @container más abajo) pasa a tabla alineada con encabezado fijo. Si el
   navegador no soporta @container, se queda en tarjeta: siempre legible. */
#dashboardArticleSuggest{container-type:inline-size;container-name:dashsug;}
.dash-art{flex-wrap:wrap;row-gap:6px;}
.dash-art .meta{flex:1 1 130px;}
.dash-art .meta span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.dash-art > .pill{order:2;}
.dash-stk{order:3;flex:1 0 100%;display:flex;flex-wrap:wrap;gap:6px;padding-left:50px;}
.dash-stk-c{display:inline-flex;align-items:center;gap:6px;padding:2px 9px;border:1px solid var(--border);border-radius:99px;background:var(--surface-2);font-size:12px;line-height:1.35;white-space:nowrap;}
.dash-stk-c i{display:inline-flex;align-items:center;gap:5px;font-style:normal;color:var(--text-faint);max-width:130px;min-width:0;}
.dash-stk-c .dl{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;}
.dash-stk-c b{font-weight:700;color:var(--text);}
.dash-stk-c.is-main{background:var(--accent-soft);border-color:transparent;}
.dash-stk-c.is-main i{color:var(--accent);font-weight:600;}
.dash-stk-c.is-zero b{color:var(--text-faint);font-weight:500;}
.dash-stk-c.is-main.is-zero b{color:var(--danger);font-weight:700;}
.dash-art .dash-stk-c.is-zero:not(.is-main){display:none;}
.dash-stk-none{font-size:11.5px;color:var(--text-faint);align-self:center;}
.dash-art-head{display:none;}
@container dashsug (min-width:720px){
  .dash-w-s .dash-art-head,.dash-w-s .dash-art{display:grid;grid-template-columns:38px minmax(150px,1fr) minmax(0,2.4fr) 88px;column-gap:12px;align-items:center;}
  .dash-w-s .dash-stk{display:grid;grid-template-columns:minmax(88px,1.4fr) repeat(var(--nd),minmax(52px,1fr));gap:0 8px;padding-left:0;flex:none;order:0;}
  .dash-w-s .dash-stk-c{display:block;text-align:center;border:0;background:none;border-radius:0;padding:0;font-size:13.5px;min-width:0;}
  .dash-w-s .dash-art .dash-stk-c i{display:none;}
  .dash-w-s .dash-art .dash-stk-c.is-zero:not(.is-main){display:block;}
  .dash-w-s .dash-art .dash-stk-c.is-main b{font-size:15px;}
  .dash-w-s .dash-stk-none{display:none;}
  .dash-w-s .dash-art > .pill{order:0;justify-self:end;}
  .dash-w-s .dash-art-head{position:sticky;top:0;z-index:2;padding:8px 12px;background:var(--surface-2);border-bottom:1px solid var(--border);font-size:11.5px;font-weight:700;color:var(--text-faint);}
  .dash-w-s .dash-art-head .dash-stk-c{background:none;}
  .dash-w-s .dash-art-head .dash-stk-c i{display:flex;justify-content:center;max-width:none;color:var(--text-faint);font-size:11px;}
  .dash-w-s .dash-art-head .dash-stk-c.is-main i{color:var(--accent);}
  .dash-w-s .dash-head-est{text-align:right;}
}
@container dashsug (min-width:960px){
  .dash-w-l .dash-art-head,.dash-w-l .dash-art{display:grid;grid-template-columns:38px minmax(150px,1fr) minmax(0,3.2fr) 88px;column-gap:12px;align-items:center;}
  .dash-w-l .dash-stk{display:grid;grid-template-columns:minmax(88px,1.4fr) repeat(var(--nd),minmax(52px,1fr));gap:0 8px;padding-left:0;flex:none;order:0;}
  .dash-w-l .dash-stk-c{display:block;text-align:center;border:0;background:none;border-radius:0;padding:0;font-size:13.5px;min-width:0;}
  .dash-w-l .dash-art .dash-stk-c i{display:none;}
  .dash-w-l .dash-art .dash-stk-c.is-zero:not(.is-main){display:block;}
  .dash-w-l .dash-art .dash-stk-c.is-main b{font-size:15px;}
  .dash-w-l .dash-stk-none{display:none;}
  .dash-w-l .dash-art > .pill{order:0;justify-self:end;}
  .dash-w-l .dash-art-head{position:sticky;top:0;z-index:2;padding:8px 12px;background:var(--surface-2);border-bottom:1px solid var(--border);font-size:11.5px;font-weight:700;color:var(--text-faint);}
  .dash-w-l .dash-art-head .dash-stk-c{background:none;}
  .dash-w-l .dash-art-head .dash-stk-c i{display:flex;justify-content:center;max-width:none;color:var(--text-faint);font-size:11px;}
  .dash-w-l .dash-art-head .dash-stk-c.is-main i{color:var(--accent);}
  .dash-w-l .dash-head-est{text-align:right;}
}
/* Campo "falso" que se ve como un input/select normal pero abre una lista
   de sugerencias (.suggest-list.floating) al tocarlo, en vez del <select>
   nativo — usado por el selector de Estado de Control de Facturas para
   poder mostrar una descripción de cada opción, no solo su nombre. */
.fake-select{width:100%;border:1px solid var(--border-strong);background:var(--surface);color:var(--text);border-radius:var(--radius-sm);padding:9px 12px;font-size:13.5px;cursor:pointer;}
.fake-select:hover,.fake-select:focus{border-color:var(--accent);outline:none;}
.fake-select .sub{display:block;font-size:11px;color:var(--text-faint);font-weight:400;margin-top:2px;}
.suggest-list.floating{display:none;position:absolute;left:0;right:0;top:calc(100% + 4px);z-index:40;background:var(--surface);box-shadow:0 10px 28px rgba(0,0,0,.16);margin-top:0;}
.suggest-list.floating.open{display:block;}
.suggest-list.floating .suggest-item{cursor:pointer;}
.cart-panel{position:sticky;top:78px;}
/* Botón flotante "Ver carrito" (Ingreso/Salida/Consumo/Mi Pedido): oculto
   por defecto — solo se muestra en celular (ver @media max-width:640px),
   reemplazando ahí al carrito de arriba. */
.cart-float-btn{display:none;}
/* Sin esto, un carrito con muchos ítems crecía sin límite y empujaba todo
   el resto de la página (y el "Total unidades"/botón de confirmar) cada
   vez más abajo. Con scroll propio, el carrito queda contenido en un alto
   razonable y el resto de la tarjeta (total, botón) siempre visible. */
.cart-items{display:flex;flex-direction:column;max-height:380px;overflow-y:auto;padding-right:4px;}
.cart-item{display:flex;align-items:center;gap:10px;padding:12px 0;border-bottom:1px solid var(--border);}
.cart-item:last-child{border-bottom:none;}
.cart-item .meta{flex:1;min-width:0;}
.cart-item .meta b{display:block;font-size:12.8px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.cart-item .meta span{font-size:11px;color:var(--text-faint);}
.cart-item input{width:64px;text-align:center;padding:6px 4px;}
/* Sin flechas arriba/abajo en los campos de cantidad: quedan vacíos a
   propósito para que la cantidad siempre se escriba a mano, y las
   flechitas nativas del navegador estorban más de lo que ayudan ahí. */
.qty-input::-webkit-inner-spin-button,
.qty-input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0;}
.qty-input{-moz-appearance:textfield;appearance:textfield;}
.cart-empty{padding:30px 10px;text-align:center;color:var(--text-faint);font-size:13px;}
.cart-total-row{display:flex;justify-content:space-between;padding-top:12px;margin-top:6px;border-top:1px solid var(--border);font-weight:700;font-size:13.5px;}
.max-hint{font-size:10.5px;color:var(--text-faint);}
.max-hint.over{color:var(--danger);font-weight:700;}
/* Tarjeta grande del carrito (Ingreso/Salida, estilo BoxHero): foto +
   stepper -/número/+ táctil en vez de solo un campo de texto chico — pensado
   para tocar con el dedo, no para escribir con precisión de mouse. */
.cart-item-big{display:flex;align-items:center;gap:10px;padding:12px 0;border-bottom:1px solid var(--border);}
.cart-item-big:last-child{border-bottom:none;}
.cib-info{flex:1;min-width:0;}
.cib-info b{display:block;font-size:13px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.cib-info span{font-size:11px;color:var(--text-faint);}
/* Botones -/+ de la ventanita "Ingresa la cantidad" (ver
   cartQtyPromptModal) — la fila del carrito en sí ya no tiene stepper,
   solo el número tocable (.cib-qty-link) de abajo. */
.cib-step-btn{flex-shrink:0;border:none;background:var(--surface-2);color:var(--text);display:flex;align-items:center;justify-content:center;cursor:pointer;}
.cib-step-btn:hover{background:var(--accent-soft);color:var(--accent-strong);}
.cib-step-btn:active{background:var(--accent);color:var(--accent-contrast);}
/* Resumen arriba de la lista del carrito ("N artículos · N unidades"),
   estilo BoxHero — ver cartRowsHtmlBig. */
.cib-summary{display:flex;justify-content:space-between;align-items:baseline;padding-bottom:10px;margin-bottom:10px;border-bottom:1px solid var(--border);font-size:12px;color:var(--text-faint);}
.cib-summary b{color:var(--text);font-size:12.5px;}
/* Cantidad como número grande y tocable (en vez de un campo de texto):
   tocarlo reabre la ventanita "Ingresa la cantidad" ya con este valor
   cargado, para corregirlo ahí — ver 'cart-add-prompt'. */
.cib-qty-link{flex-shrink:0;background:none;border:none;color:var(--accent);font-weight:800;font-size:17px;padding:4px 6px;cursor:pointer;font-family:inherit;}
.cib-qty-link:hover{text-decoration:underline;}
.cib-remove{flex-shrink:0;}
/* Escaneo con cámara (ver cameraScanCreate): el <video> (y el <canvas> de
   respaldo de lectura) viven adentro de #cameraScanBox — se fuerza a llenar
   todo el recuadro. */
#cameraScanBox video, #cameraScanBox canvas{width:100% !important;height:100% !important;object-fit:cover;}
/* Visor propio (cameraScanCreate): el <video> llena todo el recuadro; la
   guía marca la franja donde se lee (el resto se oscurece un poco). */
#cameraScanBox{overflow:hidden;}
#cameraScanBox video{position:absolute;inset:0;display:block;}
.cam-guide{position:absolute;border:2px solid rgba(255,255,255,.92);border-radius:12px;box-shadow:0 0 0 999px rgba(0,0,0,.36);pointer-events:none;}
#cameraScanBox.cam-flash::after{content:'';position:absolute;inset:0;background:#fff;opacity:.4;pointer-events:none;}
.cam-fallback{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:24px;text-align:center;color:#fff;}
.cam-fallback p{margin:0;font-size:14px;line-height:1.4;color:#e7edf2;}
.cam-photo-input{position:absolute;left:-9999px;width:1px;height:1px;opacity:0;}
/* Selector Automático / Solo con botón: reutiliza .tabs/.tab; al ser <button>
   hay que quitarle el borde y el fondo propios del navegador. */
.tabs.cam-mode{margin:12px 0 0;}
.tabs.cam-mode button.tab{border:0;background:transparent;color:var(--text);font-family:inherit;}
.tabs.cam-mode button.tab.active{background:var(--seg-on, var(--surface));}
.cam-capture{margin-top:10px;}

/* Escáner de documentos (ver docScanOpen): capa propia por encima del
   modal de la factura (z-index 150: sobre .modal-backdrop=100, bajo los
   toasts=200) — NO usa openModal() porque eso reemplazaría el formulario
   de la factura a medio llenar. */
.docscan{position:fixed;inset:0;z-index:150;background:#0b1117;color:#e7edf2;display:flex;flex-direction:column;animation:fadeIn .15s ease;}
.docscan-head{display:flex;align-items:center;gap:10px;padding:12px 14px;padding-top:max(12px, env(safe-area-inset-top));border-bottom:1px solid rgba(255,255,255,.08);}
.docscan-head h3{flex:1;font-size:15px;font-weight:700;margin:0;}
.docscan-head .sub{display:block;font-size:12px;font-weight:500;color:#9fb0bd;margin-top:2px;}
.docscan-x{background:transparent;border:1px solid rgba(255,255,255,.18);color:#e7edf2;width:36px;height:36px;border-radius:9px;display:flex;align-items:center;justify-content:center;cursor:pointer;}
.docscan-stage{position:relative;flex:1 1 auto;min-height:0;overflow:hidden;touch-action:none;display:flex;align-items:center;justify-content:center;padding:18px;}
.docscan-frame{position:relative;box-shadow:0 6px 30px rgba(0,0,0,.5);}
.docscan-frame canvas{display:block;width:100%;height:100%;}
.docscan-frame svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;}
.docscan-poly{fill:rgba(58,172,199,.16);stroke:#3aacc7;stroke-linejoin:round;}
.docscan-handle{fill:#fff;stroke:#3aacc7;cursor:grab;}
.docscan-hit{fill:transparent;cursor:grab;touch-action:none;}
.docscan-busy{position:absolute;inset:0;display:none;align-items:center;justify-content:center;background:rgba(11,17,23,.72);font-size:14px;font-weight:600;gap:10px;z-index:2;}
.docscan-busy.on{display:flex;}
.docscan-spin{width:22px;height:22px;border-radius:50%;border:3px solid rgba(255,255,255,.25);border-top-color:#3aacc7;animation:docscanSpin .8s linear infinite;}
@keyframes docscanSpin{to{transform:rotate(360deg);}}
.docscan-modes{display:flex;justify-content:center;gap:6px;padding:10px 14px 0;flex-wrap:wrap;}
.docscan-modes[hidden]{display:none;}
.docscan-mode{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);color:#cfdbe3;border-radius:99px;padding:7px 14px;font-size:13px;font-weight:600;cursor:pointer;font-family:inherit;}
.docscan-mode.active{background:#3aacc7;border-color:#3aacc7;color:#07222a;}
.docscan-foot{display:flex;gap:8px;padding:12px 14px;padding-bottom:max(12px, env(safe-area-inset-bottom));flex-wrap:wrap;justify-content:flex-end;}
.docscan-foot .btn{min-height:42px;}
.docscan-foot .grow{flex:1;}
.docscan-btn-ghost{background:transparent;border:1px solid rgba(255,255,255,.2);color:#e7edf2;border-radius:9px;padding:9px 14px;font-weight:600;font-size:13.5px;cursor:pointer;display:inline-flex;align-items:center;gap:7px;font-family:inherit;}
.docscan-btn-main{background:#3aacc7;border:1px solid #3aacc7;color:#07222a;border-radius:9px;padding:9px 16px;font-weight:700;font-size:13.5px;cursor:pointer;display:inline-flex;align-items:center;gap:7px;font-family:inherit;}
.docscan-btn-ghost:disabled,.docscan-btn-main:disabled{opacity:.5;cursor:not-allowed;}

/* ============ FORM GRID / MODAL ============ */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.form-grid .span2{grid-column:1/-1;}
/* Filtros secundarios colapsables — patrón genérico (usado en Catálogo de
   Productos y en el modal "Ver Facturas"): en celular, los filtros que no
   sean el buscador de texto principal arrancan ocultos detrás de "Más
   filtros" en vez de quedar siempre visibles y apilados (cada uno con su
   etiqueta), que empujaba el contenido de verdad (la lista/tabla) varias
   pantallas más abajo o hacía que el modal cambiara de alto de golpe al
   abrirse. En escritorio no cambia nada: el botón queda oculto y
   .extra-filters con display:contents dispensa sus campos directo en el
   mismo grid/flex de siempre, como si nunca hubieran estado envueltos en
   un div aparte. */
.more-filters-toggle{display:none;}
.extra-filters{display:contents;}
@media (max-width:720px){
  /* Ancho completo (no fit-content) para que quede como una fila prolija
     debajo del buscador, igual de ancha que él, en vez de un botón chico
     desalineado colgando en la esquina. Cuando está abierto, los campos
     de adentro quedan agrupados en su propia tarjetita (fondo + borde
     redondeado) para que se note que son "más filtros" y no un batiburrillo
     de campos sueltos al mismo nivel que el buscador. */
  .more-filters-toggle{display:flex;width:100%;margin-top:2px;}
  /* width:100% acá es la parte que faltaba: .extra-filters es UN solo
     elemento dentro de la fila flex de afuera (buscador + botón + esto),
     y sin ancho propio explícito un flex item toma el ancho de su
     contenido, no el de la fila — por eso los campos de adentro (con
     min-width:140px cada uno) quedaban angostos y descolgados a la
     izquierda en vez de ocupar todo el ancho de la tarjetita. */
  .extra-filters{display:none;flex-direction:column;gap:12px;margin-top:10px;padding:12px;background:var(--surface-2);border-radius:var(--radius-sm);width:100%;}
  .extra-filters.open{display:flex;}
  .extra-filters .field{width:100%;}
  .extra-filters .field label{color:var(--text-faint);}
}
.modal-backdrop{position:fixed;inset:0;background:rgba(9,15,20,.55);display:flex;align-items:center;justify-content:center;z-index:100;padding:20px;animation:fadeIn .15s ease;}
@keyframes fadeIn{from{opacity:0;}to{opacity:1;}}
.modal-panel{background:var(--surface);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);width:100%;max-width:560px;max-height:90vh;display:flex;flex-direction:column;}
/* 880px (antes 760px): con tablas de más columnas (ej. Facturas con Fecha
   Recepción + Fecha Pago separadas) 760px se quedaba corto y el contenido
   se veía cortado/apretado en escritorio. Todos los modales "wide"
   comparten esta clase, así que de paso les da más aire a todos. */
.modal-panel.wide{max-width:880px;}
/* .xwide: para el modal de "Ver Facturas" puntualmente (openModal la pasa
   como segundo argumento en vez de `true`) — necesita más lugar todavía,
   con 3 filtros en una fila y una tabla de 7 columnas, así que en vez de
   agrandar TODOS los modales "wide" de la app (afectaría formularios que
   ya se ven bien más angostos), esta clase aparte solo ensancha el de
   Facturas. También sube el alto máximo, para que quepan más filas sin
   tener que hacer scroll tan seguido. */
.modal-panel.xwide{max-width:1100px;max-height:94vh;}
.modal-head{display:flex;align-items:center;justify-content:space-between;padding:18px 22px;border-bottom:1px solid var(--border);flex-shrink:0;}
.modal-head h3{font-size:16px;font-weight:800;}
/* min-width:0 es la parte clave para tablas anchas dentro del modal (ej.
   Buscador de Artículos, listado de Facturas): sin esto, un <div> hijo de
   un contenedor flex por defecto no se achica más allá del ancho mínimo
   de SU contenido — y una tabla ancha "empuja" al modal-body a crecer en
   vez de mostrar su propio scroll horizontal, cortando las columnas de
   más a la derecha en vez de dejarlas scrollear. */
/* overflow-x:hidden: aunque algún elemento quede más ancho que el modal,
   el contenido no se puede arrastrar de lado (en iPhone eso se sentía como
   que "la pantalla se mueve" al llenar un formulario). */
.modal-body{padding:20px 22px;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;min-height:0;min-width:0;}
/* Revisar solicitud: UN solo scroll (el del cuerpo de la hoja). Antes la lista
   de artículos tenía su propio scroll interno (max-height:55dvh + overflow-y)
   dentro del scroll del cuerpo: en iPhone el dedo quedaba "atrapado" en la
   lista de arriba y no se podía llegar a la lista de sugerencia ni a las
   firmas de abajo (doble scroll). Ahora todo el contenido corre junto y solo
   los botones de abajo (.modal-foot) quedan fijos. */
.req-review-body{display:flex;flex-direction:column;}
.req-review-body > *{flex-shrink:0;}
/* En celular, la regla general de .table-wrap (más abajo, @media 640px) le da
   a TODA tabla su propio scroll vertical (max-height + overflow-y:auto). Dentro
   de estas dos hojas (revisar solicitud / detalle de solicitud) eso era el
   segundo scroll: la lista de artículos corre con la hoja, no por separado. */
@media (max-width:640px){
  .req-review-body .table-wrap,.req-view-body .table-wrap{max-height:none;min-height:0;overflow:visible;}
}
.modal-foot{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:10px;padding:16px 22px;border-top:1px solid var(--border);flex-shrink:0;}
/* Pies con botones en dos columnas: las columnas no pueden ser más anchas que la pantalla (antes se salían por la izquierda en celular) */
.modal-foot .btn{min-width:0;}
.modal-foot[style*="grid-template-columns"]{grid-template-columns:repeat(2,minmax(0,1fr)) !important;}
@media (max-width:480px){
  .modal-foot{padding:14px;gap:8px;}
  .modal-foot .btn{padding-left:10px;padding-right:10px;white-space:normal;line-height:1.2;}
}
/* Cuando el modal envuelve su contenido en <form> (formularios de alta/edición),
   el form debe comportarse como el propio contenedor flex column para que
   modal-body pueda encogerse y hacer scroll interno sin empujar modal-foot
   (y su botón de enviar) fuera del viewport en formularios largos. */
.modal-panel > form{display:flex;flex-direction:column;min-height:0;flex:1 1 auto;}
.modal-panel > form .modal-body{flex:1 1 auto;}
/* Modal "Ver Facturas": antes la lista de facturas escalaba el modal-body
   ENTERO (pestañas + buscador + filtros + tabla, todo junto) como un solo
   bloque que se desplazaba de una — con muchas facturas, para ver las de
   más abajo había que perder de vista las pestañas/filtros de arriba, y
   se sentía como si "toda la pantalla" se estirara hacia abajo en vez de
   quedar una lista acotada con scroll propio. Ahora el listado tiene su
   propia altura máxima y su propio scroll: las pestañas, el buscador y
   los filtros quedan siempre visibles arriba, fijos, sin desplazarse
   junto con las filas. */
#facturasListResults{max-height:46vh;overflow-y:auto;overscroll-behavior:contain;}

/* ============ TOAST ============
   Avisos al centro de la pantalla (estilo app nativa, como BoxHero):
   cápsula oscura semitransparente, círculo de color con el ícono del tipo
   de aviso y texto blanco en negrita. pointer-events:none: el aviso nunca
   tapa un botón — los toques pasan a lo que está debajo. Por encima de los
   modales (z-index 100/120). */
.toast-host{
  position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);
  display:flex;flex-direction:column;align-items:center;gap:10px;z-index:300;
  width:max-content;max-width:min(90vw, 440px);pointer-events:none;
}
.toast{
  background:rgba(58,62,72,.9);color:#fff;
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  box-shadow:0 10px 30px rgba(0,0,0,.28);border-radius:18px;
  padding:14px 20px 14px 14px;font-size:14.5px;font-weight:700;line-height:1.35;
  display:flex;align-items:center;gap:12px;max-width:100%;
  animation:toastIn .2s ease;
}
.toast-ic{
  flex-shrink:0;width:30px;height:30px;border-radius:99px;display:flex;align-items:center;justify-content:center;
  background:var(--accent);color:#fff;
}
.toast.success .toast-ic{background:#22b35e;}
.toast.warning .toast-ic{background:#e0a100;}
.toast.danger .toast-ic{background:#e04848;}
.toast-ic svg{stroke-width:2.6;}
@keyframes toastIn{from{transform:scale(.92);opacity:0;}to{transform:scale(1);opacity:1;}}

/* ============ AVISO DE ACTUALIZACIÓN DISPONIBLE (PWA) ============
   A diferencia del toast (se autodestruye solo), este aviso se queda
   fijo hasta que el usuario lo cierra o actualiza — perder de vista un
   "hay una versión nueva" sin poder volver a actuar sería peor que no
   avisar. Barra delgada de ancho completo pegada arriba (como el aviso
   de actualización de un navegador), en vez de una tarjeta flotante
   grande: en celular una tarjeta centrada con texto largo + botón +
   cerrar se veía enorme (el texto no cabía en una línea y la tarjeta
   crecía mucho). Con una barra fina y el texto en una sola línea con
   "…" si no cabe, ocupa lo mínimo en cualquier tamaño de pantalla. */
.update-banner{
  position:fixed;left:12px;right:12px;bottom:calc(16px + env(safe-area-inset-bottom));z-index:300;
  max-width:420px;margin:0 auto;
  background:#131c24;color:#fff;border-radius:16px;padding:14px 14px 12px;
  box-shadow:0 12px 32px rgba(0,0,0,.35);animation:slideUp .22s ease;
}
.update-banner[hidden]{display:none;}
.update-banner .ub-row{display:flex;gap:12px;align-items:flex-start;}
.update-banner .ub-ic{width:36px;height:36px;border-radius:10px;background:var(--accent);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.update-banner .ub-title{font-weight:700;font-size:14px;}
.update-banner .ub-sub{font-size:12.5px;color:#c4d1da;margin-top:3px;line-height:1.4;}
.update-banner .ub-actions{display:flex;gap:8px;margin-top:12px;}
.update-banner .ub-now{flex:1;min-height:44px;border:0;border-radius:10px;background:#fff;color:var(--accent-strong);font-weight:700;font-size:14px;cursor:pointer;}
.update-banner .ub-later{min-height:44px;padding:0 16px;border:1px solid #3b4d5a;border-radius:10px;background:transparent;color:#fff;font-size:14px;cursor:pointer;}
.update-banner .ub-hint{font-size:11.5px;color:#9db0bd;margin-top:8px;}
@keyframes slideUp{from{transform:translateY(24px);opacity:0;}to{transform:translateY(0);opacity:1;}}
@keyframes slideDown{from{transform:translateY(-100%);opacity:0;}to{transform:translateY(0);opacity:1;}}

/* ============ CHAT ============ */
/* height: usa --chat-topbar-h (medido por JS, ver syncChatTopbarHeight)
   en vez del "100vh - 170px" fijo de antes — ese 170px era un supuesto
   que solo calzaba con una configuración puntual de barra del navegador;
   con zoom del navegador arriba de 100%, la PWA de escritorio instalada
   en una ventana baja, o letra más grande del sistema, "100vh - 170px"
   quedaba más chico que min-height (460px), el chat se salía de la
   pantalla, y como la página no tiene scroll propio en esta vista
   (html.chat-open), no había forma de llegar al campo de escribir.
   min-height baja de 460 a 320: sigue siendo un piso razonable para un
   chat vacío, pero ya no gana tan fácil contra el alto real disponible. */
.chat-grid{display:grid;grid-template-columns:250px 1fr;gap:0;border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;background:var(--surface);height:calc(var(--app-vh, 100vh) - var(--chat-topbar-h, 170px));min-height:320px;}
.chat-channels{border-right:1px solid var(--border);overflow-y:auto;overscroll-behavior:contain;background:var(--surface-2);}
.chat-ch-item{display:flex;align-items:center;gap:10px;padding:12px 14px;border-bottom:1px solid var(--border);cursor:pointer;}
.chat-unread-badge{flex-shrink:0;min-width:19px;height:19px;padding:0 5px;border-radius:10px;background:var(--danger,#b3261e);color:#fff;font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;line-height:1;}
.chat-ch-item:hover{background:var(--surface);}
.chat-ch-item.active{background:var(--accent-soft);}
.chat-ch-item .name{font-size:13px;font-weight:700;}
.chat-ch-item .preview{font-size:11px;color:var(--text-faint);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:150px;}
.chat-main{display:flex;flex-direction:column;min-height:0;}
.chat-head{padding:14px 18px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:10px;}
/* Oculto en escritorio (ya está la lista de canales de siempre a la
   izquierda) — @media max-width:980px lo muestra, justo cuando
   .chat-channels desaparece. */
.chat-channel-switch{display:none;margin-left:auto;flex-shrink:0;}
.chat-msgs{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:18px;display:flex;flex-direction:column;gap:14px;}
.msg{display:flex;gap:10px;max-width:74%;}
.msg .avatar{width:30px;height:30px;border-radius:9px;background:var(--surface-2);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:11.5px;color:var(--accent-strong);flex-shrink:0;overflow:hidden;}
.msg .bubble{background:var(--surface-2);border-radius:12px;padding:9px 13px;}
.msg .bubble .who{font-size:11.5px;font-weight:700;margin-bottom:2px;color:var(--accent-strong);}
.msg .bubble .txt{font-size:13px;white-space:pre-wrap;word-break:break-word;}
.msg-meta{display:flex;align-items:center;gap:8px;margin-top:4px;}
.msg .time{font-size:10px;color:var(--text-faint);}
.msg.me{margin-left:auto;flex-direction:row-reverse;}
.msg.me .bubble{background:var(--accent);color:#fff;}
.msg.me .bubble .who{color:rgba(255,255,255,.8);}
.msg.me .msg-meta{flex-direction:row-reverse;}
.msg-reply-btn{background:none;border:none;padding:0;font-size:10px;color:var(--text-faint);cursor:pointer;display:flex;align-items:center;gap:3px;}
.msg-reply-btn:hover{color:var(--accent-strong);}
.msg-reply-quote{border-left:3px solid var(--accent);background:rgba(0,0,0,.05);border-radius:6px;padding:4px 8px;margin-bottom:6px;font-size:11.5px;cursor:pointer;max-width:100%;}
.msg-reply-quote b{display:block;font-size:11px;color:var(--accent-strong);}
.msg-reply-quote span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text-muted);}
.msg.me .msg-reply-quote{background:rgba(255,255,255,.15);}
.msg.me .msg-reply-quote b{color:#fff;}
.msg.me .msg-reply-quote span{color:rgba(255,255,255,.85);}
.msg-highlight{animation:msgHighlight 1.6s ease;}
@keyframes msgHighlight{0%,100%{background:none;}20%{background:var(--accent-soft);border-radius:12px;}}
.msg-attach-img{display:block;max-width:220px;max-height:220px;border-radius:8px;margin-bottom:6px;object-fit:cover;}
.msg-attach-img-link{display:inline-block;}
.msg-attach-file{display:flex;align-items:center;gap:6px;background:rgba(0,0,0,.06);border-radius:8px;padding:6px 10px;margin-bottom:6px;font-size:12px;text-decoration:none;color:inherit;}
.msg.me .msg-attach-file{background:rgba(255,255,255,.15);}
/* Barra de escribir estilo WhatsApp/iMessage: una "píldora" redondeada con
   el texto y los íconos de emoji/adjuntar/cámara adentro, y el botón de
   enviar como círculo aparte a la derecha — en vez de la fila plana de
   antes (todo en línea recta, sin distinguir "esto es el campo de texto"
   de "esto son botones sueltos"). */
.chat-input{display:flex;gap:8px;align-items:center;padding:10px 14px;border-top:1px solid var(--border);}
.chat-input-pill{
  flex:1;min-width:0;display:flex;align-items:center;gap:2px;
  background:var(--surface-2);border-radius:24px;padding:3px 4px 3px 6px;
  transition:box-shadow .12s;
}
.chat-input-pill:focus-within{box-shadow:0 0 0 2px var(--accent-soft);}
.chat-input-pill input[name="text"]{
  flex:1;min-width:0;border:none;background:transparent;padding:9px 6px;
}
.chat-input-pill input[name="text"]:focus{border-color:transparent;box-shadow:none;}
.chat-input-pill .btn-icon{width:34px;height:34px;padding:0;border-radius:50%;flex-shrink:0;}
.chat-send-btn{width:42px;height:42px;padding:0;border-radius:50%;flex-shrink:0;}
.chat-reply-bar,.chat-attach-bar{display:flex;align-items:center;gap:10px;padding:8px 18px;border-top:1px solid var(--border);background:var(--surface-2);}
.chat-reply-bar-body{display:flex;align-items:center;gap:8px;flex:1;min-width:0;color:var(--text-muted);}
.chat-reply-bar-body div{min-width:0;}
.chat-reply-bar-body b{display:block;font-size:11.5px;color:var(--accent-strong);}
.chat-reply-bar-body span{display:block;font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.chat-attach-bar{font-size:12px;}
.chat-attach-bar img{width:36px;height:36px;object-fit:cover;border-radius:6px;}
.chat-attach-bar-file{width:36px;height:36px;border-radius:6px;background:var(--surface);display:flex;align-items:center;justify-content:center;color:var(--text-muted);}
.chat-attach-bar-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
/* Cuadrícula estilo WhatsApp: celdas cuadradas parejas (aspect-ratio) que
   se acomodan solas según el ancho disponible, con emojis grandes y un
   objetivo táctil generoso — antes eran botones chicos en una fila que
   se envolvía, difíciles de tocar bien en el celular. */
.chat-emoji-picker{
  display:grid;grid-template-columns:repeat(auto-fill, minmax(42px, 1fr));gap:2px;
  padding:10px 14px;border-top:1px solid var(--border);
  max-height:240px;overflow-y:auto;background:var(--surface-2);
}
.chat-emoji-btn{
  background:none;border:none;font-size:26px;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center;aspect-ratio:1/1;border-radius:8px;
}
.chat-emoji-btn:hover,.chat-emoji-btn:active{background:var(--surface);}
@media (max-width:520px){
  .chat-emoji-picker{grid-template-columns:repeat(auto-fill, minmax(38px, 1fr));max-height:220px;}
  .chat-emoji-btn{font-size:24px;}
}

/* ============ PERMISOS POR USUARIO ============ */
/* Una fila por permiso, con un solo switch (el del usuario elegido en el
   selector de arriba) — ya no hace falta comparar columnas de rol contra
   rol, así que un simple flex con la etiqueta a la izquierda y el switch a
   la derecha alcanza igual en escritorio y en celular. */
.perm-matrix{border:1px solid var(--border);border-radius:var(--radius-sm);overflow:hidden;}
.perm-group-title{background:var(--surface-2);font-weight:700;font-size:11.5px;text-transform:uppercase;letter-spacing:.04em;color:var(--text-muted);padding:9px 14px;}
.perm-row{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:11px 14px;border-bottom:1px solid var(--border);}
.perm-row:last-child{border-bottom:none;}
.perm-row-label{font-size:13px;}

/* ============ REPORTES: DISTRIBUCIÓN DE PRODUCTOS ============ */
/* Grid propio (no <table>) porque la cantidad de columnas depende de
   cuántos departamentos haya — grid-template-columns se manda inline por
   fila (ver reportDistribucion). En celular se apila en una sola columna:
   cada valor (Almacén, cada departamento, Total) muestra su etiqueta al
   lado con ::before + attr(data-lbl), igual que ya hace el mecanismo
   genérico de tablas responsivas (data-label), pero a mano porque acá no
   hay un <table> real del que colgarse. */
.dist-matrix{border:1px solid var(--border);border-radius:var(--radius-sm);overflow:hidden;}
.dist-row{display:grid;align-items:center;gap:8px;padding:10px 14px;border-bottom:1px solid var(--border);}
.dist-row:last-child{border-bottom:none;}
.dist-head{background:var(--surface-2);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;color:var(--text-faint);}
.dist-row .num{text-align:right;font-family:var(--font-mono);font-variant-numeric:tabular-nums;}
.dist-row .dist-total{font-weight:800;}
/* Reportes y Kardex (y Distribución de Productos, que usa el mismo
   envoltorio aunque ahora vive en su propia pestaña de Almacén Principal):
   antes una tabla larga (Inventario General, Historial, el Kardex de un
   artículo con muchos movimientos) estiraba la página entera para verla
   completa, perdiendo de vista las pestañas/encabezado de arriba — mismo
   problema que ya se corrigió en el modal "Ver Facturas". Acá cada
   tabla/grid queda acotada a su propio alto con su propio scroll, y el
   encabezado (thead / fila de departamentos de Distribución) queda fijo
   arriba de ESE recuadro mientras se hace scroll, para no perder de vista
   qué columna es cuál con muchas filas o muchos departamentos. Va scopeado
   a .reportes-body a propósito, para no afectar ninguna otra tabla de la
   app (Usuarios, Facturas, etc.) que no tiene este problema. */
.reportes-body .table-wrap,.reportes-body .dist-matrix{max-height:56vh;overflow-y:auto;overscroll-behavior:contain;}
.reportes-body .table-wrap thead th{position:sticky;top:0;z-index:1;}
.reportes-body .dist-head{position:sticky;top:0;z-index:1;}
@media (max-width:720px){
  .reportes-body .table-wrap,.reportes-body .dist-matrix{max-height:60vh;}
  .dist-head{display:none;}
  /* auto 1fr (no 1fr solo): la foto y el nombre comparten la primera fila
     de la tarjeta lado a lado (columna 1 y 2), y cada valor (Almacén
     Principal, cada departamento, Total) se estira a lo ancho de AMBAS
     columnas debajo, apilado con su etiqueta al lado. */
  .dist-row{grid-template-columns:auto 1fr !important;align-items:center;gap:4px 10px;padding:12px 14px;}
  .dist-photo{grid-row:1;grid-column:1;}
  .dist-label{grid-row:1;grid-column:2;}
  .dist-row .num{grid-column:1 / -1;display:flex;justify-content:space-between;text-align:left;}
  .dist-row .num::before{content:attr(data-lbl);color:var(--text-faint);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;}
}

/* Agrandado de 38x22 a 48x28: el tamaño chico era difícil de tocar bien en
   celular (bajo el mínimo recomendado de ~44px de área táctil), sobre todo
   en la Matriz de Permisos, donde hay varios switches juntos y cerca uno
   del otro por fila. */
.switch{position:relative;display:inline-block;width:48px;height:28px;flex-shrink:0;}
.switch input{opacity:0;width:0;height:0;}
.switch .slider{position:absolute;inset:0;background:var(--border-strong);border-radius:99px;transition:.15s;}
.switch .slider::before{content:"";position:absolute;width:22px;height:22px;left:3px;top:3px;background:#fff;border-radius:99px;transition:.15s;}
.switch input:checked + .slider{background:var(--success);}
.switch input:checked + .slider::before{transform:translateX(20px);}
.settings-toggle{display:flex;align-items:center;justify-content:space-between;padding:13px 0;border-bottom:1px solid var(--border);}
.settings-toggle:last-child{border-bottom:none;}
.settings-toggle .lbl b{display:block;font-size:13px;font-weight:700;}
.settings-toggle .lbl span{font-size:12px;color:var(--text-faint);}

/* ============ BARCHART (dashboard) ============ */
/* La 3ra columna (monto) va en "auto" (no un px fijo) porque un monto
   formateado como "$1.234.567" no entraba en un ancho fijo angosto y se
   salía visualmente de la tarjeta, sobre todo en celular. */
.hbar-row{display:grid;grid-template-columns:150px 1fr auto;align-items:center;gap:8px;padding:4px 0;font-size:12px;}
.hbar-track{background:var(--surface-2);border-radius:6px;height:10px;overflow:hidden;}
.hbar-fill{height:100%;background:var(--accent);border-radius:6px;}
.hbar-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text-muted);}
.hbar-row .num{white-space:nowrap;}
/* Listas de barras sin tope de cantidad (Totales por Proveedor, Por Tipo
   de Pago): quedan contenidas con su propio scroll para que la tarjeta no
   crezca sin límite a medida que se suman proveedores/tipos de pago. */
.hbar-scroll{max-height:260px;overflow-y:auto;padding-right:4px;}

/* Control de Facturas: filtro mes a mes y distribución en dos columnas */
.fact-grid{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:12px;align-items:start;margin-bottom:12px;}
.fact-grid.single{grid-template-columns:minmax(0,1fr);}
.fact-side{display:grid;gap:12px;}
.fact-prov-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 12px;margin-bottom:8px;}
.fact-prov-head h4{margin:0;}
.fact-total{font-size:12.5px;color:var(--text-muted);font-weight:600;}
.fact-sub{font-size:11.5px;font-weight:600;color:var(--text-faint);margin-left:6px;}
.fact-mchips{display:flex;gap:6px;overflow-x:auto;padding:2px 0 10px;scrollbar-width:thin;}
.fact-mchip{flex-shrink:0;border:1px solid var(--border);background:var(--surface-2);color:var(--text-muted);border-radius:99px;padding:5px 12px;font-size:12.5px;font-weight:600;cursor:pointer;white-space:nowrap;}
.fact-mchip:hover{background:var(--accent-soft);color:var(--accent-strong);}
.fact-mchip.on{background:var(--accent);border-color:var(--accent);color:var(--accent-contrast);}
.fact-mrow{cursor:pointer;border-radius:8px;padding:0 6px;margin:0 -6px;}
.fact-mrow:hover{background:var(--surface-2);}
.fact-mrow.on{background:var(--accent-soft);}
.fact-prov-scroll{max-height:min(420px, calc(100vh - 470px));min-height:180px;}
@media (max-width:980px){.fact-grid{grid-template-columns:minmax(0,1fr);}.fact-prov-scroll{max-height:320px;}}
.fact-actions{margin-bottom:12px;}

/* Comparativo de gastos (pantalla completa) */
.fcmp-ov{position:fixed;inset:0;z-index:150;background:var(--bg);display:flex;flex-direction:column;padding-top:env(safe-area-inset-top);}
.fcmp-head{display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px;padding:12px 18px;background:var(--surface);border-bottom:1px solid var(--border);flex-shrink:0;}
.fcmp-head h3{font-size:16px;margin:0;}
.fcmp-body{flex:1 1 auto;min-height:0;overflow-y:auto;padding:16px 18px calc(24px + env(safe-area-inset-bottom));display:grid;gap:14px;align-content:start;}
.fcmp-kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;}
.fcmp-k{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:12px 14px;}
.fcmp-k>span{font-size:11.5px;color:var(--text-muted);font-weight:700;text-transform:uppercase;letter-spacing:.04em;}
.fcmp-k>b{display:block;font-family:var(--font-display);font-size:24px;margin:4px 0;}
.fcmp-k ul{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:5px;font-size:13px;}
.fcmp-k small{color:var(--text-faint);}
.fcmp-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:14px 16px;min-width:0;}
.fcmp-card h4{margin:0 0 4px;font-size:14px;}
.fcmp-note{font-size:12px;color:var(--text-faint);margin:0 0 10px;}
.fcmp-ch-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px;}
.fcmp-chips{display:flex;gap:6px;}
.fcmp-legend{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px;}
.fcmp-lg{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--border);background:var(--surface-2);color:var(--text-faint);border-radius:99px;padding:4px 11px;font-size:12.5px;font-weight:600;cursor:pointer;}
.fcmp-lg i{width:10px;height:10px;border-radius:50%;display:inline-block;opacity:.45;}
.fcmp-lg.on{color:var(--text);background:var(--surface);border-color:var(--border-strong);}
.fcmp-lg.on i{opacity:1;}
.fcmp-svg{width:100%;height:auto;display:block;}
.fcmp-tw{overflow-x:auto;}
.fcmp-t{width:100%;border-collapse:collapse;font-size:13px;min-width:640px;}
.fcmp-t th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--text-faint);padding:8px 10px;border-bottom:1px solid var(--border);white-space:nowrap;}
.fcmp-t td{padding:8px 10px;border-bottom:1px solid var(--border);white-space:nowrap;}
.fcmp-t td.num{font-family:var(--font-mono);text-align:right;}
.fcmp-t th:nth-child(2),.fcmp-t th:nth-child(3),.fcmp-t th:nth-child(5){text-align:right;}
.fcmp-tot td{font-weight:800;border-bottom:0;background:var(--surface-2);}
.fcmp-dot{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:8px;}
.fcmp-up{color:var(--danger);font-weight:700;}
.fcmp-down{color:var(--success);font-weight:700;}
.fcmp-flat{color:var(--text-faint);}
@media (max-width:760px){
  .fcmp-kpis{grid-template-columns:1fr;}
  .fcmp-head{padding:10px 12px;}
  .fcmp-body{padding:12px 12px calc(24px + env(safe-area-inset-bottom));}
}

.fcmp-mgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px;}
.fcmp-mc{border:1px solid var(--border);border-radius:var(--radius-sm,10px);padding:10px 12px;background:var(--surface);min-width:0;}
.fcmp-mn{font-weight:700;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.fcmp-mv{font-family:var(--font-display);font-size:17px;margin:2px 0 6px;}
.fcmp-mv small{font-family:var(--font-body,inherit);font-size:11.5px;display:block;}
.fcmp-ms{display:flex;justify-content:space-between;font-size:10.5px;color:var(--text-faint);margin-top:3px;}

.fcmp-pick{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.fcmp-pick label{font-weight:700;font-size:13px;}
.fcmp-sel{min-width:220px;max-width:100%;padding:9px 12px;border:1px solid var(--border-strong);border-radius:var(--radius-sm,10px);background:var(--surface);font-size:15px;font-weight:600;}
.fcmp-two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;align-items:start;}
.fcmp-one-kpi{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:6px 0 8px;}
.fcmp-one-kpi>div>span{font-size:11px;color:var(--text-muted);font-weight:700;text-transform:uppercase;letter-spacing:.04em;display:block;}
.fcmp-one-kpi b{display:block;font-family:var(--font-display);font-size:19px;margin:2px 0;}
.fcmp-one-kpi small{color:var(--text-faint);font-size:11.5px;}
.fcmp-mm{display:grid;gap:3px;font-size:12.5px;margin-top:3px;}
@media (max-width:1000px){.fcmp-two{grid-template-columns:1fr;}}
@media (max-width:560px){.fcmp-one-kpi{grid-template-columns:1fr 1fr;}.fcmp-one-kpi>div:last-child{grid-column:1/-1;}}

.fcmp-filters{display:flex;flex-wrap:wrap;gap:12px 16px;align-items:flex-end;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:12px 14px;}
.fcmp-filters label{display:grid;gap:4px;font-size:11.5px;font-weight:700;color:var(--text-muted);text-transform:uppercase;letter-spacing:.04em;flex:1 1 200px;min-width:0;}
.fcmp-filters .fcmp-sel{min-width:0;width:100%;text-transform:none;letter-spacing:0;}
.fcmp-lgn{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:12px;color:var(--text-muted);margin:4px 0 2px;}
.fcmp-lgn span{display:inline-flex;align-items:center;gap:6px;}
.fcmp-lgn i{width:12px;height:12px;border-radius:3px;display:inline-block;}
.fcmp-lgn i.dash{height:0;width:16px;border-top:2px dashed #6b7785;border-radius:0;}
.fcmp-ins{font-size:13px;line-height:1.5;color:var(--text-muted);background:var(--surface-2);border-radius:8px;padding:9px 12px;margin:6px 0 10px;}
.fcmp-ins b{color:var(--text);}
.fcmp-tip{position:fixed;z-index:400;display:none;pointer-events:none;background:#14202b;color:#fff;font-size:12px;line-height:1.5;padding:8px 11px;border-radius:8px;white-space:pre-line;box-shadow:0 6px 20px rgba(0,0,0,.25);max-width:260px;}
.fcmp-two{grid-template-columns:repeat(2,minmax(0,1fr));}
@media (max-width:1180px){.fcmp-two{grid-template-columns:1fr;}}

/* ============ MISC ============ */
.helper-text{font-size:11.5px;color:var(--text-faint);}
.divider{height:1px;background:var(--border);margin:16px 0;}
.flex{display:flex;}
.flex-between{display:flex;align-items:center;justify-content:space-between;}
/* flex-wrap: sin esto, un grupo con varios botones (ej. Importar Masivo +
   Nuevo Artículo + Carrito de Compra en Catálogo de Productos) se salía
   del ancho de la pantalla en celular en vez de acomodarse en más de una
   fila — y como nada arriba lo recortaba, esa única fila más ancha que la
   pantalla empujaba TODA la página a poder desplazarse hacia los costados,
   cortando el borde izquierdo de todo lo demás (título, filtros, la
   lista de productos) hasta que se volviera a desplazar manualmente de
   vuelta. */
.flex-gap{display:flex;flex-wrap:wrap;align-items:center;gap:8px;}
.mt-2{margin-top:8px;}
.mb-2{margin-bottom:8px;}
.text-muted{color:var(--text-muted);}
.text-faint{color:var(--text-faint);}
.text-danger{color:var(--danger);}
.text-success{color:var(--success);}
.avatar-lg{width:52px;height:52px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:800;font-size:19px;color:#fff;flex-shrink:0;overflow:hidden;}
.avatar-xl{width:96px;height:96px;border-radius:20px;display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:800;font-size:32px;color:#fff;background:var(--accent-soft);flex-shrink:0;overflow:hidden;}
/* transform:translateZ(0) fuerza a Chrome/Edge a pintar esta caja en su
   propia capa de GPU en vez de compartir la del contenedor. Sin esto, las
   fotos (recortadas en una esquina redondeada vía overflow:hidden) podían
   desaparecer por completo con el zoom del navegador en 100%/90%/etc. y
   solo reaparecer al 200% — un bug conocido de Chrome al recortar
   contenido con esquinas redondeadas en ciertos niveles de zoom. */
.photo-box{border-radius:var(--radius);border:1px solid var(--border);background:var(--surface-2);display:flex;align-items:center;justify-content:center;overflow:hidden;flex-shrink:0;color:var(--text-faint);transform:translateZ(0);}
.photo-box img{width:100%;height:100%;object-fit:cover;display:block;border-radius:inherit;}
.photo-box-sm{width:38px;height:38px;border-radius:8px;}
.photo-box-md{width:104px;height:104px;}
.photo-box-lg{width:120px;height:120px;}
.field-def-row{display:flex;align-items:center;gap:10px;padding:11px 0;border-bottom:1px solid var(--border);}
.field-def-row:last-child{border-bottom:none;}
/* Importación masiva: lista de filas de la vista previa (igual de legible en celular y en escritorio) */
.imp-list{display:flex;flex-direction:column;border:1px solid var(--border);border-radius:12px;overflow:hidden;}
.imp-row{display:grid;grid-template-columns:30px minmax(0,1fr) auto;gap:0 10px;align-items:start;padding:10px 12px;border-bottom:1px solid var(--border);}
.imp-row:last-child{border-bottom:none;}
.imp-row.is-error{box-shadow:inset 3px 0 0 var(--danger);}
.imp-n{font-size:11px;color:var(--text-faint);font-variant-numeric:tabular-nums;padding-top:2px;}
.imp-main{min-width:0;}
.imp-desc{font-size:13.5px;font-weight:600;line-height:1.3;overflow-wrap:anywhere;}
.imp-codes{font-size:11.5px;color:var(--text-faint);font-family:var(--font-mono);overflow-wrap:anywhere;margin-top:1px;}
.imp-detail{font-size:12px;color:var(--text-muted);margin-top:3px;line-height:1.5;overflow-wrap:anywhere;}
.imp-note{font-size:11px;color:var(--text-faint);margin-top:2px;line-height:1.4;}
.imp-side{display:flex;flex-direction:column;align-items:flex-end;gap:3px;text-align:right;}
.imp-qty{font-size:13px;font-weight:700;font-variant-numeric:tabular-nums;}
/* Los filtros (Todos / Nuevos / A actualizar / Sin cambios / Errores) bajan de línea en vez de esconder «Errores» fuera de la pantalla */
.tabs.imp-tabs{flex-wrap:wrap;overflow:visible;}
.imp-opt{display:flex;align-items:flex-start;gap:10px;cursor:pointer;margin:0;}
.imp-opt input[type=checkbox]{width:auto;flex:none;margin:2px 0 0;}
.imp-opt span{flex:1;min-width:0;font-size:13px;line-height:1.45;}
.imp-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:8px;}
/* Inventario físico: lista de inventarios y planilla de conteo (Sistema · Físico · Diferencia · Estado) */
.inv-body{padding:14px 16px;}
.inv-list{display:flex;flex-direction:column;border:1px solid var(--border);border-radius:12px;overflow:hidden;}
.inv-item{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding:12px 14px;border-bottom:1px solid var(--border);cursor:pointer;}
.inv-item:last-child{border-bottom:none;}
.inv-item:hover{background:var(--surface-2);}
.inv-item-main{display:flex;flex-direction:column;gap:2px;min-width:0;}
.inv-item-main b{font-size:14px;line-height:1.3;overflow-wrap:anywhere;}
.inv-item-sub{font-size:12px;color:var(--text-muted);overflow-wrap:anywhere;}
.inv-item-meta{font-size:11.5px;color:var(--text-faint);}
.inv-item-side{display:flex;flex-direction:column;align-items:flex-end;gap:3px;font-size:12px;color:var(--text-muted);text-align:right;flex-shrink:0;}
/* Cuadros de totales dentro del resumen plegable (.kpi-wrap): 3 por fila en escritorio, 6 si hay mucho ancho, 2 en celular. */
.inv-card .kpi-row{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-bottom:12px;}
@media (min-width:1180px){.inv-card .kpi-row{grid-template-columns:repeat(6,minmax(0,1fr));}}
@media (max-width:860px){.inv-card .kpi-row{grid-template-columns:repeat(2,minmax(0,1fr));margin-bottom:8px;}}
.inv-head{flex-direction:column;align-items:stretch;gap:6px;}
/* Celular: la regla «una sola tarjeta llena el alto de la pantalla» (pensada para tablas con scroll propio) hacía que la tarjeta del
   inventario midiera solo lo que mide la pantalla y el resto de la lista se saliera por debajo, sobre el fondo de la página: en modo
   oscuro se veían DOS colores (tarjeta gris arriba, negro abajo). Aquí la tarjeta crece con su lista y es la pantalla la que se desplaza. */
@media (max-width:860px){.main-col > .view:not(.view-chat) > .card.inv-card:only-child:not(.inv-full),.main-col > .view:not(.view-chat) > .card.inv-lcard:only-child{flex:0 0 auto;min-height:auto;}}
.inv-card{--inv-bar-h:61px;}   /* = 8 + botón 44 + 8 + borde 1: es el alto REAL de la barra; la fila de búsqueda/filtros de pantalla completa se pega justo debajo con este valor */
/* Barra de arriba (Inventarios · pantalla completa · actualizar · editar · eliminar): queda fija al bajar por la lista. */
.inv-bar{position:sticky;top:calc(-1 * var(--view-pt,12px));z-index:6;display:flex;align-items:center;justify-content:space-between;gap:8px;box-sizing:border-box;height:var(--inv-bar-h);padding:8px 16px;background:var(--surface);border-bottom:1px solid var(--border);border-radius:var(--radius) var(--radius) 0 0;}
@media (max-width:860px){.inv-card{--inv-bar-h:57px;}.inv-bar{padding:6px 11px;}}   /* 6 + 44 + 6 + 1 */
.inv-full .inv-bar{top:0;border-radius:0;padding-left:max(16px,calc((100% - 1100px)/2 + 16px));padding-right:max(16px,calc((100% - 1100px)/2 + 16px));}
.inv-head-btns{display:flex;gap:8px;flex-wrap:nowrap;flex:0 0 auto;}
.inv-head-title h3{margin-top:2px;}
.inv-toolbar .inv-actions{flex-wrap:nowrap;}
.inv-toolbar .inv-actions>.btn{flex:0 0 auto;}
.inv-toolbar .inv-search{flex:1 1 auto;min-width:0;}
html:has(.inv-card.inv-full){overflow:hidden;scrollbar-gutter:auto;}
.inv-manage{margin-bottom:8px;}
.inv-manage:empty{display:none;}
.inv-toolbar{margin-bottom:10px;}
.inv-toolbar .inv-actions{margin-bottom:8px;}
/* Pantalla completa: la tarjeta cubre toda la pantalla (por debajo de las ventanas y avisos); escanear, buscar y filtros quedan fijos arriba al bajar por la lista. */
.inv-card.inv-full{position:fixed;inset:0;z-index:60;margin:0;border:0;border-radius:0;box-shadow:none;display:flex;flex-direction:column;background:var(--surface);padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom);}
.inv-card.inv-full>.inv-scroll{flex:1 1 auto !important;min-height:0 !important;}  /* gana a «.card:only-child > *{flex-shrink:0}» de la vista */
.inv-full .inv-scroll{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;}
.inv-full .inv-scroll>.card-head,.inv-full .inv-scroll>.inv-body{width:100%;max-width:1100px;margin-left:auto;margin-right:auto;box-sizing:border-box;}
.inv-full .inv-head{padding-top:10px;padding-bottom:8px;}
.inv-full .inv-banner,.inv-full .inv-meta-sec{display:none;}
.inv-full .inv-toolbar{position:sticky;top:var(--inv-bar-h);z-index:5;background:var(--surface);margin:0 -16px 8px;padding:8px 16px 6px;border-bottom:1px solid var(--border);}
.inv-full .inv-toolbar .imp-tabs{flex-wrap:nowrap;overflow-x:auto;}
.inv-full .inv-toolbar .imp-tabs .tab{flex:0 0 auto;white-space:nowrap;}
.inv-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(128px,1fr));gap:8px;margin-bottom:12px;}
.inv-stat{border:1px solid var(--border);border-radius:12px;background:var(--surface-2);}
.inv-stat-v{font-size:22px;font-weight:800;font-variant-numeric:tabular-nums;line-height:1.1;}
.inv-stat-l{font-size:12px;font-weight:700;margin-top:3px;}
.inv-stat-s{font-size:11px;color:var(--text-faint);margin-top:1px;}
.inv-stat.is-ok .inv-stat-v{color:var(--success);}
.inv-stat.is-bad .inv-stat-v{color:var(--danger);}
.inv-stat.is-warn .inv-stat-v{color:var(--warning);}
.inv-actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:12px;}
.inv-search{flex:1 1 220px;min-width:0;}
.inv-head .inv-back{padding:5px 10px;font-size:12px;}
.inv-note{margin-top:4px;font-size:12.5px;color:var(--text-muted);overflow-wrap:anywhere;}
.inv-meta-line{margin-top:3px;font-size:12px;line-height:1.4;color:var(--text-muted);overflow-wrap:anywhere;}
.inv-meta-line b{color:var(--text);font-weight:600;}
.inv-rows{border-radius:12px;}
.inv-row{display:grid;grid-template-columns:minmax(0,1fr) 84px 150px 92px 100px;gap:0 10px;align-items:center;padding:9px 12px;border-bottom:1px solid var(--border);}
.inv-row:last-child{border-bottom:none;}
.inv-row.is-falta{box-shadow:inset 3px 0 0 var(--danger);}
.inv-row.is-sobra{box-shadow:inset 3px 0 0 var(--warning);}
.inv-row.is-ok{box-shadow:inset 3px 0 0 var(--success);}
.inv-main-ph{display:flex;align-items:center;gap:10px;min-width:0;}
.inv-main-t{flex:1 1 auto;min-width:0;}
.photo-box-inv{width:46px;height:46px;border-radius:9px;}
.inv-desc{font-size:13.5px;font-weight:600;line-height:1.3;overflow-wrap:anywhere;}
.inv-meta{font-size:11.5px;color:var(--text-faint);font-family:var(--font-mono);overflow-wrap:anywhere;margin-top:1px;}
.inv-cell{display:flex;flex-direction:column;gap:1px;min-width:0;}
.inv-cell b{font-variant-numeric:tabular-nums;}
.inv-lbl{display:none;font-size:10px;text-transform:uppercase;letter-spacing:.05em;color:var(--text-faint);font-weight:700;}
.inv-sys,.inv-dif,.inv-st{align-items:flex-end;text-align:right;}
.inv-cnt-in{display:flex;gap:6px;align-items:center;justify-content:flex-end;}
.inv-qty{width:84px;text-align:center;font-weight:700;font-variant-numeric:tabular-nums;}
.inv-qty.is-failed{border-color:var(--danger);}
.inv-same{width:34px;height:34px;padding:0;flex:none;}
.inv-d{font-size:14px;}
.inv-d.neg{color:var(--danger);}
.inv-d.pos{color:var(--warning);}
.inv-err{font-size:11.5px;color:var(--danger);margin-top:2px;line-height:1.35;}
.inv-saving{font-size:11.5px;color:var(--text-faint);margin-top:2px;}
.inv-cats{max-height:42vh;overflow:auto;border:1px solid var(--border);border-radius:10px;padding:2px 10px;}
.inv-adj-list{margin:0 0 10px 18px;padding:0;line-height:1.55;font-size:13.5px;}
.inv-adj-sub{margin-top:-4px;}
.inv-adj-dest{margin:4px 0 10px;}
.inv-adj-rows{max-height:230px;overflow:auto;border:1px solid var(--border);border-radius:10px;}
.inv-adj-row{display:flex;align-items:center;gap:8px;padding:8px 10px;border-bottom:1px solid var(--border);font-size:13px;}
.inv-adj-row:last-child{border-bottom:0;}
.inv-adj-name{flex:1 1 auto;min-width:0;overflow-wrap:anywhere;line-height:1.3;}
.inv-adj-q{flex:0 0 auto;font-weight:700;color:var(--danger);white-space:nowrap;}
.inv-adj-sel{width:100%;min-width:0;}
.inv-adj-row .inv-adj-sel{flex:0 0 46%;max-width:230px;width:auto;}
@media (max-width:520px){.inv-adj-row{flex-wrap:wrap;}.inv-adj-row .inv-adj-name{flex:1 1 60%;}.inv-adj-row .inv-adj-sel{flex:1 1 100%;max-width:none;}}
@media (max-width:760px){
  .inv-row{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px 8px;padding:10px 12px;}
  .inv-main{grid-area:1/1/2/3;}
  .inv-row > .inv-st{grid-area:1/3/2/4;align-items:flex-end;justify-content:flex-start;}
  .inv-sys{grid-area:2/1/3/2;}
  .inv-cnt{grid-area:2/2/3/3;}
  .inv-dif{grid-area:2/3/3/4;}
  .inv-lbl{display:block;}
  .inv-sys,.inv-dif{align-items:flex-start;text-align:left;}
  .inv-cnt-in{justify-content:flex-start;}
  .inv-qty{width:100%;max-width:96px;}
  .inv-body{padding:12px;}
  .inv-full .inv-toolbar{margin:0 -12px 8px;padding:8px 12px 6px;}
  .inv-item{flex-direction:column;gap:6px;}
  .inv-item-side{align-items:flex-start;text-align:left;}
}

@media (max-width: 980px){
  .op-grid{grid-template-columns:1fr;}
  .dash-bottom-grid{grid-template-columns:1fr;}
  .cart-panel{position:static;}
  .cart-items{max-height:300px;}
  .kpi-row{grid-template-columns:1fr 1fr;}
  /* height:auto (en vez de calc(100vh - 170px)) dejaba que chat-msgs no
     tuviera límite de alto: en vez de hacer scroll interno, la página
     entera crecía con cada mensaje y el campo para escribir terminaba
     lejos, abajo de todo. Con un alto fijo relativo al viewport, el chat
     vuelve a comportarse como un chat: mensajes con scroll propio y el
     campo de escribir siempre a la vista. dvh (con vh como respaldo en
     navegadores viejos) además se ajusta solo cuando aparece el teclado.

     Antes esto era un 70vh fijo y dejaba un espacio vacío grande abajo (el
     campo de escribir quedaba a media pantalla, no pegado abajo como en
     WhatsApp). --chat-topbar-h lo mide JS (syncChatTopbarHeight(), llamada
     desde render()) con el alto REAL del topbar en este dispositivo —
     cambia según el notch/tamaño de letra — así el chat ocupa exactamente
     lo que sobra de pantalla, sin espacio muerto.

     OJO: dvh solo no alcanzó en la práctica (Safari/iOS es poco confiable
     con esta unidad, sobre todo instalada como app) — --app-vh lo mide JS
     con window.visualViewport.height (syncViewportHeight(), pensado
     justamente para esto) y gana por ser la última regla; dvh queda solo
     de respaldo para el primer instante antes de que corra el JS. */
  /* min-height baja de 420 a 280: con el teclado abierto en un celular
     chico, el alto disponible real (visualViewport) puede rondar los
     200-260px — con el piso en 420px, min-height le ganaba a la cuenta
     de arriba, el chat quedaba MÁS ALTO que lo visible, y como la página
     no puede hacer scroll acá (html.chat-open), el campo de escribir
     quedaba tapado por el teclado sin ninguna forma de alcanzarlo. */
  .chat-grid{grid-template-columns:1fr;height:calc(100vh - var(--chat-topbar-h, 130px) - var(--chat-bottom-nav-h, 0px));height:calc(100dvh - var(--chat-topbar-h, 130px) - var(--chat-bottom-nav-h, 0px));height:calc(var(--app-vh, 100dvh) - var(--chat-topbar-h, 130px) - var(--chat-bottom-nav-h, 0px));min-height:280px;}
  .chat-channels{display:none;}
  .chat-channel-switch{display:inline-flex;}
  /* El padding inferior normal del campo de escribir (14px) deja un
     poquito de aire de más justo antes del teclado — en celular se ve
     mejor más pegado. */
  .chat-input{padding-bottom:8px;}
}
@media (max-width: 860px){
  .sidebar{
    position:fixed;left:0;top:0;bottom:0;transform:translateX(-100%);transition:transform .18s ease;
    box-shadow:var(--shadow-lg);padding-bottom:env(safe-area-inset-bottom);
  }
  .sidebar.open{transform:translateX(0);}
  /* Fondo oscuro detrás del menú: sin esto, la única forma de cerrar el
     menú en celular era tocar una pestaña (navegar a algún lado) — no
     había manera de simplemente cerrarlo y quedarse donde ya estabas. */
  .sb-backdrop{
    display:block;position:fixed;inset:0;background:rgba(9,15,20,.45);z-index:19;
    opacity:0;pointer-events:none;transition:opacity .18s ease;
  }
  .sb-backdrop.open{opacity:1;pointer-events:auto;}
  .menu-toggle{display:flex;}
  .form-grid{grid-template-columns:1fr;}
  .kpi-row{grid-template-columns:1fr 1fr;}
  .view{padding:16px 14px 50px;}
  /* ===== CELULAR: PÁGINA BLOQUEADA (igual que escritorio) =====
     El documento NUNCA se mueve: encabezado arriba y pie de página (accesos
     directos) abajo quedan fijos. Solo scrollea el contenido de la pestaña
     (.view) y, dentro de ella, cada tabla/lista con su propio scroll
     (.table-wrap, .suggest-list-tall, .cart-items...). Con el documento
     bloqueado, iOS ya no tiene página que "paniar" y el pie no se descuadra. */
  /* La página NO se bloquea tocando html/body (en la PWA de iPhone eso acortaba
     la pantalla y dejaba una franja vacía bajo el pie, algo que la v22 no tenía).
     html/body quedan EXACTAMENTE como en la v22; lo que se fija es .shell
     (position:fixed a pantalla completa, la misma referencia que usa el pie), y
     solo scrollea el contenido interno (.view y sus tablas/listas). */
  .shell{position:fixed;top:0;left:0;right:0;bottom:0;height:auto;min-height:0;}
  /* Con el teclado abierto (iPhone no achica la pantalla, solo la parte visible):
     la app se ajusta al alto VISIBLE para que el campo de escribir (Chat, buscadores)
     quede justo arriba del teclado, igual que en la v22. */
  /* iOS 26 (PWA instalada con barra de estado translúcida) deja una franja sin dibujar
     abajo; por eso la barra de estado es "black" (ver <meta> arriba) y el pie flotante
     guarda siempre al menos 20px del borde. */
  html.keyboard-open .shell{bottom:auto;height:var(--app-vh, 100%);}
  html.kb-compact:not(.chat-open) .shell{top:var(--app-vt, 0px);}
  /* Igual que en el Chat (html.chat-open): mientras se escribe en un buscador la página no tiene scroll propio, así iOS
     no la usa de excusa para desplazar toda la pantalla (se veía en el video: al arrastrar la lista con el teclado abierto
     subía la pantalla completa, escondía encabezado y buscador y dejaba un hueco negro abajo). */
  html.kb-compact:not(.chat-open){overflow:hidden;}
  .main-col{min-height:0;height:100%;}
  .topbar{position:relative;flex-shrink:0;}
  .view{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;}
  /* Deja lugar abajo para que el pie de página fijo no tape el final del
     contenido — la vista de Chat queda afuera a propósito: ahí el pie de
     página SIGUE visible, pero .chat-grid ya resta su alto directamente
     (ver --chat-bottom-nav-h / syncChatTopbarHeight), así que no hace
     falta este padding genérico también ahí. */
  .view:not(.view-chat){padding-bottom:calc(50px + 58px + env(safe-area-inset-bottom));}
  .topbar{padding:12px 14px;padding-top:calc(22px + env(safe-area-inset-top));}
  .sb-brand{padding-top:calc(18px + env(safe-area-inset-top));}
  /* Safari/Chrome de celular hacen zoom automático a toda la página al
     enfocar un campo con letra menor a 16px (para que se pueda leer lo
     que escribes) — eso es lo que se sentía como "la página hace zoom
     sola al abrir el teclado". Con 16px el navegador no necesita zoom. */
  input[type=text],input[type=password],input[type=number],input[type=date],input[type=month],input[type=search],select,textarea{
    font-size:16px;
  }
  /* Objetivo táctil más generoso (recomendación de ~40-44px) para los
     botones de solo ícono — en escritorio se quedan compactos. */
  .icon-btn{width:40px;height:40px;}
  .btn-icon{padding:10px;}
  /* Pie de página flotante tipo cápsula (estilo Instagram): no va pegado al borde,
     queda suspendido sobre la barrita del iPhone con márgenes a los lados. Solo
     íconos (el nombre queda para lectores de pantalla y en el title); el activo
     lleva una cápsula más clara alrededor. */
  .bottom-nav{
    display:flex;align-items:stretch;position:fixed;z-index:15;
    left:max(12px, env(safe-area-inset-left));right:max(12px, env(safe-area-inset-right));
    /* Más abajo, como Instagram: justo sobre la barrita del iPhone (zona segura - 12px). */
    /* Mínimo 20px del borde: en el ícono instalado por perfil iOS informa zona segura 0 y la
       cápsula quedaba pegada a las esquinas redondeadas de la pantalla (subida ~2 mm). */
    bottom:max(calc(env(safe-area-inset-bottom) - 12px), 20px);
    height:60px;padding:6px;gap:4px;border-radius:999px;
    background:var(--surface);
    background:color-mix(in srgb, var(--surface) 84%, transparent);
    -webkit-backdrop-filter:blur(22px) saturate(170%);backdrop-filter:blur(22px) saturate(170%);
    border:1px solid var(--border);
    border:1px solid color-mix(in srgb, var(--text) 12%, transparent);
    box-shadow:0 10px 28px rgba(0,0,0,.30), 0 2px 6px rgba(0,0,0,.12);
  }
  .bottom-nav .bn-item{padding:0;gap:0;border-radius:999px;transition:background .18s ease, transform .12s ease;}
  .bottom-nav .bn-item span{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}
  .bottom-nav .bn-item .icon{width:25px;height:25px;color:var(--text);opacity:.78;}
  .bottom-nav .bn-item.active{background:var(--surface-2);background:color-mix(in srgb, var(--text) 13%, transparent);}
  .bottom-nav .bn-item.active .icon{color:var(--text);opacity:1;}
  .bottom-nav .bn-item:active{transform:scale(.93);}
  .bottom-nav .bn-item .badge-dot{top:5px;right:calc(50% - 24px);}
}
/* ============ ESCRITORIO: SIN SCROLL DE PÁGINA ============
   Antes .shell solo tenía min-height:100vh: si el contenido de una vista
   era más alto que la pantalla, TODA la página (html/body) hacía scroll —
   la barra lateral y el encabezado quedaban "pegados" arriba solo porque
   son sticky, pero el scroll real era el del documento entero. Acá se
   convierte a un layout de altura fija (alto = pantalla), con SOLO .view
   (el contenido de la pestaña actual) como zona con scroll propio — igual
   al patrón que ya se usaba en celular para Chat y para las listas de
   Ingreso/Salida/Consumo/Solicitud (html.chat-open / .suggest-list-tall),
   aplicado ahora a TODA vista de escritorio. Los scroll internos que ya
   existían (tablas: .table-wrap; Panel General: .dash-scroll-list; el
   carrito: .cart-items; etc.) no se tocan acá — siguen siendo cajas con su
   propio overflow-y:auto anidadas adentro de .view, así que su scroll
   propio sigue funcionando exactamente igual que antes. */
@media (min-width: 861px){
  html,body{overflow:hidden;}
  .shell{height:100vh;height:100dvh;height:var(--app-vh, 100dvh);}
  .view{flex:1;min-height:0;overflow-y:auto;}
  /* El "top:78px" de siempre reservaba el alto del encabezado para cuando
     el que hacía scroll era la página entera (el carrito tenía que dejarle
     lugar al encabezado sticky de arriba). Ahora el encabezado quedó AFUERA
     de la zona con scroll (.view) — el carrito solo necesita pegarse al
     borde de arriba de .view, no dejar un hueco de más por el encabezado. */
  .cart-panel{top:12px;}
  /* El panel del carrito (Ingreso/Salida/Consumo/Mi Pedido) se ajusta al
     alto de la ventana: la lista de artículos toma el espacio que quede y
     hace scroll adentro, y el motivo/nota y el botón Confirmar quedan
     siempre a la vista. Antes la lista tenía un alto fijo (380px) y el
     panel entero podía pasarse del borde de abajo, dejando el botón
     Confirmar fuera de la pantalla en ventanas bajas (PWA de escritorio). */
  /* height (no solo max-height): el panel ocupa siempre todo el alto
     disponible, igual que la columna de la izquierda — aunque el carrito
     esté vacío o tenga pocos artículos, no queda un hueco vacío debajo. */
  .cart-panel{display:flex;flex-direction:column;height:calc(var(--app-vh, 100dvh) - var(--topbar-h, 80px) - 24px);}
  .cart-panel > .card-head{flex-shrink:0;}
  .cart-panel > .card-pad{display:flex;flex-direction:column;flex:1 1 auto;min-height:0;overflow-y:auto;}
  .cart-panel > .card-pad > *{flex-shrink:0;}
  .cart-panel > .card-pad > .cart-items{flex:1 1 auto;min-height:96px;max-height:none;}
  .cart-panel > .card-pad > .cart-empty{flex:1 1 auto;display:flex;flex-direction:column;align-items:center;justify-content:center;}
  /* La lista termina donde empiezan motivo/nota: estos quedan abajo del todo. */
  .cart-panel > .card-pad > .cart-items + .divider,.cart-panel > .card-pad > .cart-empty + .divider{margin-top:auto;}
}
/* ============ CELULAR: LA VENTANA ENCAJA ENTRE ENCABEZADO Y PIE ============
   La zona de contenido (.view) termina justo donde empieza el pie de página
   (separación mínima de 8px). Las pestañas con una sola
   tarjeta grande (Catálogo, Usuarios, Proveedores...) llenan ese alto y el
   scroll queda DENTRO de su tabla; solo las pantallas largas por naturaleza
   (Panel General, Ajustes, Permisos) siguen desplazándose dentro de .view. */
@media (max-width: 860px){
  .main-col:has(> .view:not(.view-chat)){padding-bottom:calc(var(--nav-h, calc(68px + env(safe-area-inset-bottom))) + 8px);}
  .main-col > .view:not(.view-chat){padding-bottom:0;display:flex;flex-direction:column;}
  .main-col > .view:not(.view-chat) > .card:only-child{margin-bottom:0;}
  .main-col > .view:not(.view-chat) > *{flex-shrink:0;}
  .main-col > .view:not(.view-chat) > .card:only-child{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;}
  .main-col > .view:not(.view-chat) > .card:only-child > *{flex-shrink:0;}
  .main-col > .view:not(.view-chat) > .card:only-child > .table-wrap{flex:1 1 auto;min-height:120px;max-height:none;}
  /* Control de Facturas: los totales (barras) scrollean DENTRO de su zona; resumen arriba y
     "Nueva Factura / Ver Facturas" abajo quedan siempre a la vista, sin scroll externo. */
  .main-col > .view:not(.view-chat) > .fact-charts{flex:1 1 auto;min-height:110px;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;}
  .main-col > .view:not(.view-chat) > .fact-charts > :last-child{margin-bottom:0;}
  /* Panel General en celular: buscador y métricas quedan fijos arriba y las tarjetas de abajo
     (Movimientos, Alertas, Más consumidos) scrollean DENTRO de su zona, sin scroll externo. */
  .main-col > .view:not(.view-chat) > .dash-fill{flex:1 1 auto;min-height:90px;display:block;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;}
  .main-col > .view:not(.view-chat) > .dash-fill > .card{margin-bottom:8px;}
  .main-col > .view:not(.view-chat) > .dash-fill > .card:last-child{margin-bottom:0;}
  /* Título de tarjeta igual al del encabezado (ej. "Catálogo de Productos" dos veces): se
     oculta; si la tarjeta no tiene botones en esa franja, se oculta la franja entera. La
     marca la pone markDuplicateCardTitles() en cada render. */
  .card-head.dup-title h3{display:none;}
  .card-head.dup-title.no-actions{display:none;}
  .card-head.dup-title:has(> .searchbox) > div:first-child{display:none;}
  /* ===== MODO ESCRITURA (teclado abierto en un buscador o en el Chat) =====
     Con el teclado arriba queda poco alto visible: se ocultan títulos, descripciones,
     botones y textos de ayuda de la tarjeta para que la lista de resultados use ese
     espacio. El encabezado (menú ☰ + título) NO se achica en las pestañas normales —
     achicarlo ganaba solo ~14px y se veía como si el menú se hubiera reducido o
     cortado—; solo en el Chat se compacta. Solo mientras el campo tiene el foco; al
     cerrar el teclado todo vuelve a aparecer. No afecta a los modales. */
  html.kb-compact.chat-open .main-col > .topbar{padding-top:calc(6px + env(safe-area-inset-top));padding-bottom:6px;gap:10px;}
  html.kb-compact.chat-open .main-col > .topbar .crumbs{display:none;}
  html.kb-compact.chat-open .main-col > .topbar h1{font-size:15px;}
  html.kb-compact.chat-open .main-col > .topbar .btn-icon,
  html.kb-compact.chat-open .main-col > .topbar .icon-btn{width:34px;height:34px;padding:6px;}
  html.kb-compact .view{padding-top:8px;}
  /* Con el teclado abierto el pie de página está oculto: no reservar su espacio abajo. */
  html.keyboard-open .main-col:has(> .view:not(.view-chat)){padding-bottom:8px;}
  /* (kb-compact la pone/saca JS con un pequeño retraso al soltar el campo: así, al tocar
     un artículo de la lista, la pantalla no se reacomoda a mitad del toque.) */
  html.kb-compact .view > .card:has(.searchbox) > .card-head:not(:has(.searchbox)),
  html.kb-compact .view > .op-grid > .card:has(.searchbox) > .card-head:not(:has(.searchbox)){display:none;}
  html.kb-compact .view .mt-2 > .helper-text:has(+ .suggest-list){display:none;}
  html.kb-compact .view .op-grid .field.mb-2 > label{display:none;}
  html.kb-compact .view .form-grid > .field > label,
  html.kb-compact .view .more-filters-toggle{display:none;}
  /* Ingresos / Salidas / Solicitudes: la tarjeta de la lista llena el alto y la lista scrollea adentro */
  .main-col > .view:not(.view-chat) > .op-grid{flex:1 1 auto;min-height:0;min-width:0;display:flex;flex-direction:column;align-items:stretch;margin-bottom:0;}
  .main-col > .view:not(.view-chat) > .op-grid > .card{min-width:0;max-width:100%;}
  .main-col > .view:not(.view-chat) > .op-grid > .card:not(.cart-panel){flex:1 1 auto;min-height:0;display:flex;flex-direction:column;margin-bottom:0;}
  .main-col > .view:not(.view-chat) > .op-grid > .card:not(.cart-panel) > .card-pad{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;}
  .main-col > .view:not(.view-chat) > .op-grid > .card:not(.cart-panel) > .card-pad > :last-child{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;}
  .main-col > .view:not(.view-chat) > .op-grid .suggest-list.suggest-list-tall{flex:1 1 auto;height:auto;min-height:80px;}
  /* Chat: llena exactamente el espacio entre el encabezado y el pie (flex, sin
     depender de --app-vh que en iPhone queda corto). Con el teclado abierto el
     pie se oculta y el chat usa todo el alto. */
  .main-col:has(> .view-chat){padding-bottom:calc(var(--nav-h, calc(68px + env(safe-area-inset-bottom))) + 8px);}
  html.keyboard-open .main-col:has(> .view-chat){padding-bottom:0;}
  .main-col > .view.view-chat{display:flex;flex-direction:column;}
  .main-col > .view.view-chat > .chat-grid{flex:1 1 auto;height:auto;min-height:280px;}
  .main-col > .view:not(.view-chat) > .card:only-child > .card-pad:last-child{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;}
}
/* Ingresos / Salidas / Solicitudes en escritorio (dos columnas, >980px):
   la pantalla NO hace scroll. La grilla (.op-grid) llena justo el alto
   libre de .view y las dos columnas se estiran a ese alto: a la izquierda
   la lista de artículos, al derecho el carrito, cada una con su propio
   scroll interno. Antes quedaba un scroll sobrante de ~63px (el margen de
   abajo de .view + la lista de la izquierda pasándose del borde) y al
   moverlo el carrito "no quedaba fijo". */
@media (min-width: 981px){
  .view:has(> .op-grid){display:flex;flex-direction:column;padding-bottom:14px;}
  .view:has(> .op-grid) > *{flex-shrink:0;}
  .view > .op-grid{flex:1 1 auto;min-height:0;align-items:stretch;}
  .view > .op-grid > .card{display:flex;flex-direction:column;min-height:0;}
  .view > .op-grid > .card > .card-pad{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;}
  .view > .op-grid > .card:not(.cart-panel) > .card-pad > :last-child{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;}
  .view > .op-grid .suggest-list.suggest-list-tall{flex:1 1 auto;height:auto;min-height:80px;}
  .view > .op-grid > .cart-panel{height:auto;position:static;}
}
@media (max-width: 520px){
  /* Contenido más "compacto" en celular chico: paneles pegados a los
     bordes y KPIs en cuadrícula 2x2 (como una app de estadísticas), en
     vez de tarjetas apiladas de a una que obligaban a bajar mucho para
     ver el resto del Panel General. */
  .view{padding:12px 10px 46px;}
  .view:not(.view-chat){padding-bottom:calc(46px + 58px + env(safe-area-inset-bottom));}
  /* Esta regla pisaba el padding-top con la muesca/notch que se agregó
     arriba (@media 860px): al ser más específica (pantalla más chica,
     que es literalmente cualquier celular) ganaba y volvía a dejar el
     título tapado por la cámara/notch. Hay que repetir el cálculo acá
     también, no alcanza con ponerlo una sola vez arriba. */
  .topbar{padding:10px 12px;padding-top:calc(20px + env(safe-area-inset-top));gap:10px;}
  .topbar h1{font-size:16.5px;}
  .grid{gap:8px;}
  .dash-bottom-grid{gap:8px;}
  .kpi-row{grid-template-columns:1fr 1fr;gap:8px;margin-bottom:8px;}
  .kpi{padding:9px 10px;gap:3px;}
  .kpi .ic{width:22px;height:22px;}
  .kpi .lbl{font-size:10px;}
  .kpi .val{font-size:16.5px;}
  .kpi .sub{font-size:9.5px;}
  .card-pad{padding:9px;}
  .card-head{padding:9px 11px;}
  .card-head h3{font-size:12.5px;}
  .hbar-row{grid-template-columns:90px 1fr auto;gap:5px;padding:2px 0;font-size:10.5px;}
  .hbar-scroll{max-height:200px;}
  .feed-item{padding:7px 12px;gap:7px;}
  .feed-ic{width:24px;height:24px;}
  .feed-title{font-size:12px;}
  .feed-sub{font-size:10.5px;}
  .auth-side{display:none;}
  .auth-card{grid-template-columns:1fr;}
}

/* ============ MODAL Y TOAST EN CELULAR ============
   El modal pasa a ser una "hoja" que sube desde abajo y ocupa todo el
   ancho (patrón típico de apps nativas), con una barrita decorativa
   arriba a modo de agarradera. El toast pasa de una tarjeta angosta
   pegada a la esquina a un aviso de ancho completo pegado abajo, más
   fácil de leer con una mano. */
@media (max-width: 640px){
  .modal-backdrop{padding:0;align-items:flex-end;}
  .modal-panel,.modal-panel.wide,.modal-panel.xwide{
    max-width:100%;width:100%;border-radius:var(--radius-lg) var(--radius-lg) 0 0;
    max-height:92vh;max-height:92dvh;
    padding-bottom:env(safe-area-inset-bottom);
  }
  .modal-head{position:relative;padding-top:22px;}
  .modal-head::before{
    content:"";position:absolute;top:8px;left:50%;transform:translateX(-50%);
    width:36px;height:4px;border-radius:99px;background:var(--border-strong);
  }
  /* Excepción a la "hoja parcial" de arriba: algunos paneles (notificaciones,
     y los carritos — Carrito de Compra, Editar Orden de Compra, Editar
     Solicitud, todos abiertos con openModal(html,'...fullscreen')) conviene
     que ocupen la pantalla ENTERA en vez de quedar al 92%, para ver mejor
     los artículos y no tener que buscar el botón de confirmar más abajo.
     Ya no es una "hoja que se puede cerrar arrastrando" (no tiene de dónde
     seguir subiendo), así que también se le quita la agarradera. */
  .modal-panel.fullscreen{
    height:100vh; height:100dvh; max-height:100vh; max-height:100dvh;
    border-radius:0;
    padding-top:env(safe-area-inset-top);
  }
  .modal-panel.fullscreen .modal-head{padding-top:14px;}
  .modal-panel.fullscreen .modal-head::before{display:none;}
  /* .modal-body normalmente solo ocupa lo que su contenido necesita (así
     está bien en un modal chico); acá en cambio hace falta que ESTIRE para
     llenar todo el alto que .fullscreen le reserva a la pantalla — si no,
     con pocos artículos en el carrito el pie con el botón de confirmar
     quedaba pegado a la mitad de la pantalla en vez de abajo del todo. */
  .modal-panel.fullscreen .modal-body{flex:1 1 auto;min-height:0;}
  /* Carrito de Ingreso/Salida/Consumo/Mi Pedido: en vez de quedar siempre
     visible debajo del buscador (empujando todo hacia abajo en una
     pantalla angosta), se oculta y se reemplaza por un botón chico arriba
     de todo, junto al resto de los botones del encabezado de la tarjeta
     (ver cartFloatBtnHtml) — tocarlo abre el mismo carrito a pantalla
     completa (ver cartExpandModal/'cart-expand-open'), con el botón de
     confirmar siempre a la vista. Para agregar más artículos hay que
     cerrarlo y volver al buscador, igual que en cualquier app de compras. */
  .cart-panel{display:none;}
  .cart-float-btn{display:inline-flex;}
  /* Ingreso/Salida/Consumo/Solicitudes: en vez de que toda la pantalla
     haga scroll junto (encabezado, buscador Y lista), el encabezado y el
     buscador quedan fijos donde están y SOLO la lista se desplaza para
     adentro, llegando exactamente hasta el pie de página. La altura en sí
     (calc con --list-fill-top/--list-fill-bottom-h) ya se define arriba,
     junto a .suggest-list-tall base — es la misma regla que en escritorio,
     acá simplemente --list-fill-bottom-h deja de ser 0 porque el pie de
     página pasa a mostrarse. Mismo punto de corte que las dos reglas de
     arriba (.cart-panel/.cart-float-btn): recién acá desaparece la
     SEGUNDA tarjeta ("Carrito de..."), así que recién acá tiene sentido
     que la lista de la primera ocupe toda la pantalla. */
}

/* ============ TABLAS EN CELULAR: TARJETAS EN VEZ DE SCROLL HORIZONTAL ============
   Cada <tr> pasa a ser una tarjeta apilada; cada <td> muestra el título de
   su columna arriba del valor, tomado de data-label (ver
   applyResponsiveTableLabels() en el motor de renderizado). En escritorio
   la tabla se ve exactamente igual que siempre. */
@media (max-width: 720px){
  /* Pestañas (Reportes y Kardex, Órdenes de Compra, Solicitudes, Control
     de Facturas, detalle de Departamento, etc.): en escritorio el
     flex-wrap las acomoda bien porque hay ancho de sobra, pero en celular
     varias pestañas de nombre largo (ej. las 5 de Reportes y Kardex)
     terminaban partidas en 2-3 filas desparejas — desordenado y difícil
     de escanear. En vez de partirse, ahora quedan en UNA sola fila que se
     desliza horizontalmente (patrón típico de apps: Gmail, Play Store,
     etc.), sin barra de scroll visible, cada pestaña con su ancho justo.*/
  .tabs{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;margin-bottom:14px;}
  .tabs::-webkit-scrollbar{display:none;}
  .tab{padding:9px 12px;font-size:12.5px;white-space:nowrap;flex-shrink:0;}
  /* Panel General en celular: en vez del scroll interno de escritorio
     (útil ahí porque se navega con mouse/rueda), estas tarjetas muestran
     su vista previa completa (ya viene acotada a pocos ítems desde JS) y
     un botón "Ver todo" para ir al listado completo — un scroll adentro
     de otro scroll (el de la página) se siente incómodo en celular. */
  .dash-scroll-list{max-height:none;overflow-y:visible;}
  .dash-see-all{display:inline-flex;}
  .table-wrap{overflow-x:visible;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
    max-height:calc(var(--app-vh, 100dvh) - var(--topbar-h, 80px) - 58px - env(safe-area-inset-bottom) - 130px);min-height:160px;}
  .table-wrap table{display:block;}
  .table-wrap thead{display:none;}
  .table-wrap tbody{display:block;}
  .table-wrap tbody tr{
    display:block;border:1px solid var(--border);border-radius:var(--radius-sm);
    padding:2px 10px;margin-bottom:7px;background:var(--surface);font-size:12.5px;
  }
  .table-wrap tbody tr:last-child{margin-bottom:0;}
  .table-wrap tbody td{
    display:flex;flex-direction:column;align-items:flex-start;gap:1px;
    padding:6px 0;border-bottom:1px solid var(--border);white-space:normal;
  }
  .table-wrap tbody td:last-child{border-bottom:none;}
  .table-wrap tbody td.num{align-items:flex-end;}
  .table-wrap tbody td::before{
    content:attr(data-label);font-size:9.5px;font-weight:700;text-transform:uppercase;
    letter-spacing:.04em;color:var(--text-faint);
  }
  .table-wrap tbody td[data-label=""]::before{content:none;}
  .table-wrap tbody td[data-label=""]{padding-top:2px;}
  .table-wrap .row-actions{justify-content:flex-start;flex-wrap:wrap;}
  .table-wrap .row-actions .btn-icon{width:34px;height:34px;min-width:34px;padding:0;}
  .table-wrap .row-actions .btn-icon svg{width:16px;height:16px;}
  /* Filas divisoras de una sola celda de ancho completo (ej. encabezado de
     grupo en Permisos): sin tarjeta ni etiqueta, solo el texto tal cual. */
  .table-wrap tbody tr:has(>td[colspan]:only-child){
    border:none;background:transparent;padding:10px 2px 2px;margin-bottom:0;border-radius:0;
  }
  .table-wrap tbody tr:has(>td[colspan]:only-child) td{
    display:block;padding:2px 0;border-bottom:none;
  }
  /* Tarjeta de lista: arriba el renglón "digest" (foto/folio/nombre +
     estado); debajo, TODOS los demás datos (.rt-detail) siempre visibles,
     compactos y seguidos en la misma línea ("ETIQUETA valor · ETIQUETA
     valor", pasan a la línea siguiente solo si no caben). Antes quedaban
     escondidos detrás de un botón "Ver más" en cada fila: había que tocar
     artículo por artículo para ver (o escribir, ej. "Recibir ahora") un
     dato. */
  .table-wrap tbody tr.rt-collapsible{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:14px;padding-bottom:6px;}
  /* min-width:0: sin esto, un renglón que no se parte (el subtítulo del
     digest usa white-space:nowrap + "…") hacía que la celda midiera lo que
     su texto completo y estiraba la tarjeta más allá del ancho de la
     pantalla, con scroll horizontal (ej. listado de Facturas). */
  .table-wrap tbody tr.rt-collapsible > td{flex:0 0 100%;min-width:0;max-width:100%;}
  .table-wrap tbody tr.rt-collapsible td.rt-digest{border-bottom:none;padding-bottom:2px;}
  .table-wrap tbody tr.rt-collapsible td.rt-detail{
    display:inline-flex !important;flex:0 1 auto;flex-direction:row;align-items:baseline;gap:4px;
    padding:2px 0;border-bottom:none;font-size:12px;max-width:100%;
  }
  .table-wrap tbody tr.rt-collapsible td.rt-detail::before{font-size:9px;}
  .table-wrap tbody tr.rt-collapsible td.rt-detail input{width:78px;padding:5px 6px;}
  .table-wrap tbody tr.rt-collapsible td .row-actions{margin-top:4px;}
  /* Las celdas resumen que ya se juntaron en el renglón "digest" (ver
     abajo) se ocultan para no repetir su contenido dos veces. */
  .table-wrap tbody tr.rt-collapsible td.rt-digested{display:none;}
  /* Renglón "digest": foto/ícono + título/subtítulo + estado en una sola
     línea, igual que el feed de Movimientos Recientes del Panel General. */
  .table-wrap tbody tr.rt-collapsible td.rt-digest{
    display:flex !important;flex-direction:row;align-items:center;gap:8px;
  }
  .rt-digest-thumb{flex-shrink:0;}
  .rt-digest-thumb .photo-box-sm{width:30px;height:30px;}
  .rt-digest-main{flex:1;min-width:0;}
  .rt-digest-title{font-size:12.5px;font-weight:700;line-height:1.3;}
  .rt-digest-sub{font-size:10.5px;color:var(--text-faint);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .rt-digest-trail{flex-shrink:0;}
  .prov-cat-table .rt-digest-title{font-size:14px;line-height:1.3;}
  .prov-cat-table .rt-digest-sub{font-family:var(--font-mono);font-size:11.5px;color:var(--text-muted);}
  .rt-toggle-btn{
    display:inline-flex;align-items:center;gap:5px;background:none;border:none;padding:5px 0;
    color:var(--accent-strong);font-size:11.5px;font-weight:700;cursor:pointer;font-family:inherit;
  }
  .rt-toggle-btn svg{transition:transform .15s ease;}


  /* Carrito más compacto: menos alto por línea para que haya que bajar
     menos con muchos ítems agregados (mismo pedido del usuario que las
     tablas de arriba). */
  .cart-item{padding:8px 0;gap:8px;}
  .cart-item .meta b{font-size:12px;}
  .cart-item .meta span{font-size:10px;}
  .cart-empty{padding:20px 10px;font-size:12px;}
}

/* ============ IMPRESIÓN / EXPORTAR PDF (solicitudes) ============ */
#printArea{display:none;}
@media print{
  body > *:not(#printArea){display:none !important;}
  #printArea{display:block !important;}
  @page{margin:16mm;}
}
.print-doc{font-family:var(--font-body),system-ui,sans-serif;color:#111;background:#fff;max-width:720px;margin:0 auto;}
.print-head{display:flex;justify-content:space-between;align-items:flex-start;border-bottom:2px solid #111;padding-bottom:14px;margin-bottom:18px;}
.print-head h1{font-family:var(--font-display),system-ui,sans-serif;font-size:20px;margin:0 0 2px;}
.print-head p{margin:0;color:#555;font-size:13px;}
.print-folio{text-align:right;}
.print-folio b{display:block;font-family:var(--font-mono),monospace;font-size:18px;}
.print-folio span{font-size:11px;color:#555;}
.print-meta{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:14px;}
.print-meta div{border:1px solid #ddd;border-radius:6px;padding:8px 10px;}
.print-meta span{display:block;font-size:10.5px;text-transform:uppercase;letter-spacing:.04em;color:#777;margin-bottom:3px;}
.print-meta b{font-size:13px;}
.print-status{display:inline-block;font-size:11px;font-weight:700;padding:3px 10px;border-radius:99px;border:1px solid #999;margin-bottom:14px;}
.print-note{font-size:12.5px;color:#333;background:#f6f6f6;border-radius:6px;padding:8px 10px;margin-bottom:14px;}
.print-table{width:100%;border-collapse:collapse;margin-bottom:16px;}
/* Fondo y color PROPIOS: el PDF se arma desde la pantalla y el estilo global de «thead th» usa el fondo del tema; en tema oscuro quedaba
   una franja negra con letras gris oscuro que no se leían. El documento siempre es blanco, así que su encabezado también. */
.print-table th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.03em;color:#222;background:#eef1f4;border-bottom:2px solid #111;padding:6px 8px;}
.print-table td{font-size:12.5px;padding:7px 8px;border-bottom:1px solid #ddd;}
.print-table td.num, .print-table th.num{text-align:right;}
.print-resolved{font-size:12px;color:#555;margin-bottom:24px;}
.print-foot{font-size:10.5px;color:#999;text-align:center;border-top:1px solid #ddd;padding-top:10px;}
/* Solicitud (PDF compartido e impresión): versión compacta. Filas y letras más
   chicas para que pocos artículos no terminen en varias páginas. */
.print-doc.print-compact .print-head{padding-bottom:8px;margin-bottom:10px;}
.print-doc.print-compact .print-head h1{font-size:17px;}
.print-doc.print-compact .print-head p{font-size:11.5px;}
.print-doc.print-compact .print-folio b{font-size:16px;}
.print-doc.print-compact .print-meta{gap:8px;margin-bottom:8px;}
.print-doc.print-compact .print-meta div{padding:5px 8px;}
.print-doc.print-compact .print-meta span{font-size:9.5px;margin-bottom:1px;}
.print-doc.print-compact .print-meta b{font-size:12px;}
.print-doc.print-compact .print-status{font-size:10.5px;padding:2px 9px;margin-bottom:8px;}
.print-doc.print-compact .print-note{font-size:11.5px;padding:5px 9px;margin-bottom:8px;}
.print-doc.print-compact .print-table{margin-bottom:8px;}
.print-doc.print-compact .print-table th{font-size:10px;padding:4px 6px;}
.print-doc.print-compact .print-table td{font-size:12px;padding:3px 6px;line-height:1.25;}
.print-doc.print-compact .print-resolved{font-size:11px;margin-bottom:8px;}
.print-doc.print-compact .print-foot{font-size:9.5px;padding-top:6px;}
.print-photo-page{page-break-before:always;display:flex;align-items:center;justify-content:center;min-height:90vh;padding:20px;}
.print-photo-page img{max-width:100%;max-height:100%;object-fit:contain;}

/* ============================================================
   IMPRESIÓN DE ETIQUETAS (Brother QL-810)
   Todo aquí va prefijado por #etiquetasRoot a propósito: este panel viene
   de una herramienta aparte que se integró a Viejo Samus, con su propio
   lenguaje visual (tipografía, colores, tamaños de botón). Escoparlo bajo
   ese id evita que sus reglas (algunas con los mismos nombres de clase que
   ya usa el resto de la app, ej. .tabs, .btn-primary) se filtren o
   choquen con el estilo del resto del sistema — building bloque por
   bloque, cada regla solo aplica dentro de esta pestaña.
   ============================================================ */
#etiquetasRoot{
  --et-ink:#16323A; --et-steel:#EEF1F1; --et-panel:#FFFFFF; --et-line:#D7DEDE;
  --et-teal:#2E6E71; --et-teal-dark:#1E4E50; --et-amber:#F2B705; --et-amber-dark:#C99200;
  --et-rose:#B23A2F; --et-violet:#6B4FA0; --et-muted:#6B7A7C;
  --et-input-bg:#FBFCFC; --et-chip-bg:#FFFFFF; --et-hover-row:#FAFBFB;
  --et-danger-bg:#FBEEEC; --et-danger-border:#F2D9D4; --et-danger-hover:#F6DDD7;
  --et-violet-bg:#F2EEFA; --et-violet-border:#E2D8F2; --et-violet-hover:#E9E0F6;
  --et-canvas-mat-1:#E4E9E9; --et-canvas-mat-2:#EAEEEE;
  font-family:'Inter',system-ui,sans-serif; color:var(--et-ink); display:block;
}
/* Esta pestaña traía su propia paleta fija (arriba) sin ninguna versión
   oscura: en modo claro se veía igual que el resto de la app por
   coincidencia de tonos, pero con el dispositivo en modo oscuro quedaba
   como una isla blanca en medio de una app oscura. Se le agrega acá el
   mismo mecanismo de modo oscuro que usa el resto del sistema (ver
   ":root" más arriba): automático según el sistema operativo, y manual si
   la persona lo fuerza desde Ajustes (data-theme="dark"/"light"). A
   propósito NO se toca el color de ".et-label-canvas" (el "papel" blanco
   de la etiqueta en sí, con su texto en negro) ni lo que se dibuja arriba
   suyo: esa parte simula la etiqueta física real que sale impresa, que es
   blanca sin importar el tema de la app — cambiarla sería mostrar una
   vista previa que no coincide con lo que realmente imprime. */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) #etiquetasRoot{
    --et-ink:#e7edf2; --et-steel:#1a2731; --et-panel:#152029; --et-line:#293a46;
    --et-teal:#4fb8c4; --et-teal-dark:#8fd6de; --et-amber:#f2b705; --et-amber-dark:#d9a300;
    --et-rose:#ef6b62; --et-violet:#a78bfa; --et-muted:#9db0bf;
    --et-input-bg:#101a22; --et-chip-bg:#20303b; --et-hover-row:#1c2830;
    --et-danger-bg:#3a1815; --et-danger-border:#5a2620; --et-danger-hover:#4a1f1a;
    --et-violet-bg:#241c38; --et-violet-border:#3a2c54; --et-violet-hover:#2c2244;
    --et-canvas-mat-1:#0a1119; --et-canvas-mat-2:#111c25;
  }
}
:root[data-theme="dark"] #etiquetasRoot{
  --et-ink:#e7edf2; --et-steel:#1a2731; --et-panel:#152029; --et-line:#293a46;
  --et-teal:#4fb8c4; --et-teal-dark:#8fd6de; --et-amber:#f2b705; --et-amber-dark:#d9a300;
  --et-rose:#ef6b62; --et-violet:#a78bfa; --et-muted:#9db0bf;
  --et-input-bg:#101a22; --et-chip-bg:#20303b; --et-hover-row:#1c2830;
  --et-danger-bg:#3a1815; --et-danger-border:#5a2620; --et-danger-hover:#4a1f1a;
  --et-violet-bg:#241c38; --et-violet-border:#3a2c54; --et-violet-hover:#2c2244;
  --et-canvas-mat-1:#0a1119; --et-canvas-mat-2:#111c25;
}
#etiquetasRoot *{box-sizing:border-box;}
#etiquetasRoot svg.icon{flex-shrink:0; display:inline-block; vertical-align:middle;}
#etiquetasRoot .et-tabs{display:flex; flex-wrap:wrap; gap:2px; background:var(--et-panel); border-bottom:1px solid var(--et-line); margin-bottom:16px; border-radius:8px 8px 0 0; overflow-x:auto;}
#etiquetasRoot .et-tab-btn{background:transparent; color:var(--et-muted); border:none; border-bottom:2px solid transparent; padding:12px 15px; font-family:'Space Grotesk',sans-serif; font-size:13.5px; font-weight:600; cursor:pointer; display:inline-flex; align-items:center; gap:7px; border-radius:6px 6px 0 0; white-space:nowrap;}
#etiquetasRoot .et-tab-btn:hover{color:var(--et-teal-dark); background:var(--et-steel);}
#etiquetasRoot .et-tab-btn.active{color:var(--et-teal-dark); border-bottom-color:var(--et-teal);}
#etiquetasRoot .et-tab-content{display:none;}
#etiquetasRoot .et-tab-content.active{display:block;}
#etiquetasRoot .et-app{display:flex; gap:20px; align-items:flex-start; flex-wrap:wrap;}
#etiquetasRoot .et-panel{background:var(--et-panel); border:1px solid var(--et-line); border-radius:10px; padding:20px 22px 24px; box-shadow:0 1px 2px rgba(22,50,58,.05), 0 6px 20px rgba(22,50,58,.05);}
#etiquetasRoot .et-form-panel{flex:1 1 340px; min-width:min(320px, 100%);}
#etiquetasRoot .et-preview-panel{flex:2 1 480px; min-width:min(360px, 100%);}
#etiquetasRoot .et-design-options-panel{flex:1 1 360px; min-width:min(340px, 100%);}
#etiquetasRoot .et-design-canvas-panel{flex:2 1 560px; min-width:min(400px, 100%);}
#etiquetasRoot .et-db-panel{flex:1 1 100%; min-width:0;}
#etiquetasRoot .et-table-scroll{overflow-x:auto; -webkit-overflow-scrolling:touch; margin-top:10px; border-radius:8px;}
#etiquetasRoot .et-table-scroll table{margin-top:0;}
/* Escritorio, pestaña "Base de datos": la pantalla queda fija (pestañas,
   título, barra de importación y títulos de columna) y solo las filas del
   catálogo hacen scroll, con la tabla ajustada al alto de la ventana; el
   formulario "Agregar producto" queda abajo, siempre a la vista. */
@media (min-width: 861px){
  .view:has(> #etiquetasRoot #etTab-basedatos.active){display:flex;flex-direction:column;padding-bottom:14px;}
  .view > #etiquetasRoot:has(#etTab-basedatos.active){flex:1 1 auto;min-height:0;display:flex;flex-direction:column;}
  #etiquetasRoot:has(#etTab-basedatos.active) > .et-tabs{flex-shrink:0;}
  #etiquetasRoot #etTab-basedatos.active{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;}
  /* nowrap: con flex-wrap (el valor general de .et-app) cada línea toma
     el alto de su contenido completo y la tabla no se ajusta a la ventana. */
  #etiquetasRoot #etTab-basedatos > .et-app{flex:1 1 auto;min-height:0;align-items:stretch;flex-wrap:nowrap;}
  #etiquetasRoot #etTab-basedatos .et-db-panel{display:flex;flex-direction:column;min-height:0;flex:1 1 auto;}
  #etiquetasRoot #etTab-basedatos .et-db-panel > *{flex-shrink:0;}
  #etiquetasRoot #etTab-basedatos .et-db-panel > .et-table-scroll{flex:1 1 auto;min-height:120px;overflow:auto;}
  /* overflow:visible: la tabla trae overflow:hidden (esquinas redondeadas)
     y eso hacía que los títulos quedaran "pegados" a la propia tabla en vez
     de al área con scroll — se iban con las filas. */
  #etiquetasRoot #etTab-basedatos .et-table-scroll table{overflow:visible;}
  #etiquetasRoot #etTab-basedatos .et-table-scroll thead th{position:sticky;top:0;z-index:2;background:var(--et-steel);}
}
#etiquetasRoot h2{font-family:'Space Grotesk',sans-serif; font-size:15px; margin:0 0 16px; display:flex; align-items:center; gap:9px; padding-bottom:12px; border-bottom:1px solid var(--et-line);}
#etiquetasRoot h2 .h2-icon{display:flex; align-items:center; justify-content:center; width:26px; height:26px; border-radius:7px; background:var(--et-steel); color:var(--et-teal-dark); flex-shrink:0;}
#etiquetasRoot label{display:block; font-size:12px; font-weight:600; color:var(--et-teal-dark); margin:12px 0 4px; text-transform:uppercase; letter-spacing:.4px;}
#etiquetasRoot input,#etiquetasRoot select{width:100%; padding:8px 10px; border:1px solid var(--et-line); border-radius:6px; font-family:'IBM Plex Mono',monospace; font-size:13.5px; background:var(--et-input-bg); color:var(--et-ink);}
#etiquetasRoot input:focus,#etiquetasRoot select:focus{outline:none; border-color:var(--et-teal); box-shadow:0 0 0 3px rgba(46,110,113,.14);}
#etiquetasRoot input[readonly]{background:var(--et-steel); color:var(--et-muted); cursor:default;}
#etiquetasRoot input[readonly]:focus{border-color:var(--et-line); box-shadow:none;}
#etiquetasRoot .et-row2{display:grid;grid-template-columns:1fr 1fr;gap:0 12px;}
#etiquetasRoot .et-autocomplete{position:relative;}
#etiquetasRoot .et-suggest-list{position:absolute; left:0; right:0; top:calc(100% + 4px); background:var(--et-panel); border:1px solid var(--et-line); border-radius:8px; box-shadow:0 10px 28px rgba(22,50,58,.18); max-height:280px; overflow-y:auto; z-index:40; display:none;}
#etiquetasRoot .et-suggest-list.open{display:block;}
#etiquetasRoot .et-suggest-item{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:9px 12px; cursor:pointer; border-bottom:1px solid var(--et-line);}
#etiquetasRoot .et-suggest-item:last-child{border-bottom:none;}
#etiquetasRoot .et-suggest-item:hover, #etiquetasRoot .et-suggest-item.active{background:var(--et-steel);}
#etiquetasRoot .et-suggest-main{display:flex; flex-direction:column; gap:2px; min-width:0;}
#etiquetasRoot .et-suggest-desc{font-family:'Inter',sans-serif; font-size:13px; font-weight:600; color:var(--et-ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
/* Color de texto fijo (no themeable) a propósito: este resaltado de
   búsqueda siempre es amarillo claro, así que necesita texto oscuro
   encima sin importar si el resto de la pestaña está en modo oscuro. */
#etiquetasRoot .et-suggest-desc mark{background:#FCE8A8; color:#16323A; border-radius:2px; padding:0 1px;}
#etiquetasRoot .et-suggest-meta{font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--et-muted);}
#etiquetasRoot .et-suggest-badge{flex-shrink:0; font-family:'Inter',sans-serif; font-size:10.5px; font-weight:600; color:var(--et-teal-dark); background:var(--et-steel); border-radius:5px; padding:3px 7px; text-transform:uppercase; letter-spacing:.3px;}
#etiquetasRoot .et-suggest-empty{padding:14px 12px; font-size:12.5px; color:var(--et-muted); text-align:center;}
#etiquetasRoot .et-actions{margin-top:16px;display:flex;gap:10px;flex-wrap:wrap;}
#etiquetasRoot button{font-family:'Inter'; font-weight:600; font-size:13px; border:none; border-radius:8px; padding:10px 16px; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; gap:7px; box-shadow:0 1px 2px rgba(22,50,58,.05);}
#etiquetasRoot button:disabled{opacity:.6; cursor:not-allowed;}
#etiquetasRoot .et-btn-primary{background:var(--et-amber); color:var(--et-ink); box-shadow:0 2px 8px rgba(242,183,5,.35);}
#etiquetasRoot .et-btn-primary:hover{background:var(--et-amber-dark);}
#etiquetasRoot .et-btn-secondary{background:var(--et-panel); color:var(--et-teal-dark); border:1px solid var(--et-line);}
#etiquetasRoot .et-btn-secondary:hover{background:var(--et-steel); border-color:#C3CDCD;}
#etiquetasRoot .et-btn-danger{background:var(--et-danger-bg); color:var(--et-rose); border:1px solid var(--et-danger-border);}
#etiquetasRoot .et-btn-danger:hover{background:var(--et-danger-hover);}
#etiquetasRoot .et-btn-violet{background:var(--et-violet-bg); color:var(--et-violet); border:1px solid var(--et-violet-border);}
#etiquetasRoot .et-btn-violet:hover{background:var(--et-violet-hover);}
#etiquetasRoot .et-icon-btn{width:30px; height:30px; padding:0; border-radius:7px; flex-shrink:0;}
#etiquetasRoot table{width:100%; border-collapse:collapse; margin-top:10px; font-size:12px; border-radius:8px; overflow:hidden;}
#etiquetasRoot thead tr{background:var(--et-steel);}
#etiquetasRoot th,#etiquetasRoot td{border-bottom:1px solid var(--et-line); padding:9px 8px; text-align:left;}
#etiquetasRoot th{color:var(--et-muted); font-weight:700; text-transform:uppercase; font-size:10.5px; letter-spacing:.4px;}
#etiquetasRoot tbody tr:hover{background:var(--et-hover-row);}
#etiquetasRoot tbody tr:last-child td{border-bottom:none;}
#etiquetasRoot td{font-family:'IBM Plex Mono',monospace; font-size:12px;}
#etiquetasRoot td:last-child{display:flex; gap:6px; justify-content:flex-end; align-items:center; font-family:'Inter';}
#etiquetasRoot .et-add-product{display:grid; grid-template-columns:1fr 1fr; gap:0 10px; margin-top:14px;}
#etiquetasRoot .et-add-product.et-add-hidden{display:none;}
#etiquetasRoot .et-import-actions{display:flex; flex-wrap:wrap; gap:8px;}
#etiquetasRoot .et-import-bar .et-import-text{flex:1 1 320px;}
#etiquetasRoot .et-import-bar{position:relative;}
#etiquetasRoot input.file-input-hidden{width:1px; min-width:0; padding:0;}
#etiquetasRoot .et-import-actions button{width:auto; margin:0;}
#etiquetasRoot .et-add-product .full{grid-column:1/3; display:flex; gap:8px; flex-wrap:wrap;}
#etiquetasRoot .et-add-product .full button{flex:1;}
#etiquetasRoot .et-import-bar{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px; padding:12px 14px; background:var(--et-steel); border-radius:8px; margin-bottom:14px;}
#etiquetasRoot .et-import-bar .et-import-text{font-size:12.5px; color:var(--et-ink);}
#etiquetasRoot .et-import-bar .et-import-text .hint{display:block; font-weight:400; color:var(--et-muted); font-size:11.5px; margin-top:2px;}
#etiquetasRoot .et-design-controls{display:flex; flex-wrap:wrap; gap:10px 16px; align-items:flex-end; margin-bottom:14px;}
#etiquetasRoot .et-design-controls .et-field-group{min-width:120px;}
#etiquetasRoot .et-design-controls .et-field-group.grow{flex:1;}
#etiquetasRoot .et-toggles{display:flex; flex-wrap:wrap; gap:8px 10px; margin-bottom:16px; padding:10px 12px; background:var(--et-steel); border-radius:8px; font-size:12px;}
#etiquetasRoot .et-toggles label{display:flex; align-items:center; gap:5px; text-transform:none; font-weight:500; color:var(--et-ink); margin:0;}
#etiquetasRoot .et-toggles input[type=checkbox]{width:auto;}
#etiquetasRoot .et-toggles .et-field-chip{cursor:grab; padding:5px 10px 5px 6px; background:var(--et-chip-bg); border:1px solid var(--et-line); border-radius:7px;}
#etiquetasRoot .et-toggles .et-field-chip:hover{box-shadow:0 2px 6px rgba(22,50,58,.12); border-color:#C3CDCD;}
#etiquetasRoot .et-toggles .et-field-chip:active{cursor:grabbing;}
#etiquetasRoot .et-toggles .et-field-chip.dragging{opacity:.4;}
#etiquetasRoot .et-toggles .et-field-chip .grip{color:var(--et-muted); display:flex;}
#etiquetasRoot .et-label-canvas.drag-over{outline:2px dashed var(--et-teal); outline-offset:5px;}
/* Vista previa como ventana en celular (ver etWireUI). En escritorio el botón y el
   fondo no existen visualmente: la vista previa sigue al lado del formulario. */
#etiquetasRoot .et-preview-open-btn,#etiquetasRoot .et-preview-close-btn,#etiquetasRoot .et-preview-backdrop{display:none;}
#etiquetasRoot .et-canvas-wrap{display:flex; justify-content:center; padding:40px 30px; background:repeating-linear-gradient(45deg, var(--et-canvas-mat-1), var(--et-canvas-mat-1) 8px, var(--et-canvas-mat-2) 8px, var(--et-canvas-mat-2) 16px); border-radius:10px; overflow:auto;}
#etiquetasRoot .et-label-canvas{position:relative; background:#fff; box-shadow:0 4px 18px rgba(22,50,58,.18); border:1px dashed #B9C4C4;}
#etiquetasRoot .et-label-canvas::before{content:""; position:absolute; top:-9px; left:0; right:0; height:6px; background-image:radial-gradient(circle, #C7D0D0 2px, transparent 2.2px); background-size:14px 6px; background-repeat:repeat-x;}
#etiquetasRoot .et-elem{position:absolute; cursor:grab; user-select:none; box-sizing:border-box; overflow:hidden; touch-action:none;}
#etiquetasRoot .et-elem.dragging{cursor:grabbing; opacity:.85; z-index:20;}
#etiquetasRoot .et-elem.selected{outline:1.5px solid var(--et-teal); outline-offset:2px; z-index:15;}
#etiquetasRoot .et-elem-content{width:100%; height:100%; display:flex; align-items:center; font-family:'IBM Plex Mono',monospace; color:#111; line-height:1.15; white-space:normal; overflow:hidden;}
#etiquetasRoot .et-elem-content svg{width:100%; height:100%;}
#etiquetasRoot .et-field-tag{position:absolute; top:-16px; left:0; font-family:'Inter'; font-size:8.5px; font-weight:600; color:var(--et-teal); background:#fff; padding:0 3px; white-space:nowrap; display:none;}
#etiquetasRoot .et-elem.selected .et-field-tag{display:block;}
#etiquetasRoot .et-frame-el{background:transparent; cursor:grab;}
#etiquetasRoot .et-frame-el.selected .et-field-tag{color:var(--et-violet);}
#etiquetasRoot .et-handle{position:absolute; display:none;}
#etiquetasRoot .et-elem.selected .et-handle{display:block;}
#etiquetasRoot .et-resize-handle{width:14px; height:14px; right:-7px; bottom:-7px; background:var(--et-amber); border:2px solid #fff; border-radius:4px; cursor:nwse-resize; box-shadow:0 2px 5px rgba(0,0,0,.25); z-index:30; touch-action:none;}
#etiquetasRoot .et-rotate-handle{width:12px; height:12px; left:50%; top:-26px; margin-left:-6px; background:var(--et-teal); border:2px solid #fff; border-radius:50%; cursor:grab; box-shadow:0 2px 5px rgba(0,0,0,.25); z-index:30; touch-action:none;}
#etiquetasRoot .et-rotate-stem{position:absolute; left:50%; top:-16px; width:1px; height:16px; background:#B9C4C4; margin-left:0;}
/* Alineador: líneas imantadas que aparecen mientras se arrastra un cuadro,
   si su borde/centro queda cerca del borde/centro de otro cuadro, marco, o
   del propio lienzo — para poder alinear márgenes y distancias a ojo sin
   tener que ir probando número por número en los campos. */
#etiquetasRoot .et-guide{position:absolute; background:var(--et-rose); pointer-events:none; z-index:40; display:none;}
#etiquetasRoot .et-guide.visible{display:block;}
#etiquetasRoot .et-guide-v{width:1px; top:0; bottom:0;}
#etiquetasRoot .et-guide-h{height:1px; left:0; right:0;}
#etiquetasRoot .et-selected-panel{margin-top:14px; padding:12px 14px; background:var(--et-steel); border-radius:8px; font-size:12px; display:none; flex-wrap:wrap; align-items:center; gap:10px 16px;}
#etiquetasRoot .et-selected-panel.visible{display:flex;}
#etiquetasRoot .et-selected-panel .grp{display:flex; align-items:center; gap:6px;}
#etiquetasRoot .et-selected-panel input[type=range]{width:110px;}
#etiquetasRoot .et-selected-panel input[type=number]{width:70px; padding:5px 7px;}
#etiquetasRoot .et-selected-panel input[type=color]{width:34px; height:28px; padding:2px; border:1px solid var(--et-line); border-radius:5px;}
#etiquetasRoot .et-selected-panel select{width:auto; padding:5px 7px;}
#etiquetasRoot .et-selected-panel .name{font-weight:700; font-family:'Space Grotesk';}
@media (max-width:640px){
  #etiquetasRoot input,#etiquetasRoot select{font-size:16px;}
  #etiquetasRoot .et-app{gap:12px;}
  #etiquetasRoot .et-panel{padding:16px 14px 18px;}
  #etiquetasRoot .et-row2{grid-template-columns:1fr;}
  #etiquetasRoot .et-design-controls{gap:10px 12px;}
  #etiquetasRoot .et-selected-panel{gap:8px 12px;}
  #etiquetasRoot .et-import-bar{flex-direction:column; align-items:stretch;}
  #etiquetasRoot .et-import-bar button{justify-content:center;}
  #etiquetasRoot .et-import-actions button{flex:1 1 auto;}
  #etiquetasRoot .et-import-bar .et-import-text{flex:none;}
  #etiquetasRoot .et-add-product{grid-template-columns:1fr;}
  #etiquetasRoot .et-add-product .full{grid-column:1;}
  #etiquetasRoot .et-canvas-wrap{padding:20px 14px;}
}
@media (max-width:860px){
  #etiquetasRoot .et-preview-open-btn{display:inline-flex;align-items:center;gap:6px;margin-left:auto;padding:6px 12px;border-radius:999px;border:1px solid var(--et-line);background:var(--et-steel);color:var(--et-teal-dark);font:600 12.5px 'Space Grotesk',sans-serif;cursor:pointer;white-space:nowrap;}
  #etiquetasRoot .et-preview-panel{display:none;}
  #etiquetasRoot.et-preview-open .et-preview-backdrop{display:block;position:fixed;inset:0;background:rgba(9,15,20,.55);z-index:60;animation:fadeIn .15s ease;}
  #etiquetasRoot.et-preview-open .et-preview-panel{display:block;position:fixed;left:0;right:0;bottom:0;z-index:61;max-height:88%;overflow:auto;margin:0;border-radius:16px 16px 0 0;padding-bottom:calc(18px + env(safe-area-inset-bottom));box-shadow:0 -10px 30px rgba(0,0,0,.35);}
  #etiquetasRoot .et-preview-close-btn{margin-left:auto;align-items:center;justify-content:center;width:34px;height:34px;border-radius:9px;border:1px solid var(--et-line);background:var(--et-steel);color:var(--et-ink);cursor:pointer;}
  #etiquetasRoot.et-preview-open .et-preview-close-btn{display:inline-flex;}
  /* Formulario compacto para que entre sin desplazar la pantalla. */
  #etiquetasRoot .et-tabs{flex-wrap:nowrap;margin-bottom:10px;scrollbar-width:none;}
  #etiquetasRoot .et-tabs::-webkit-scrollbar{display:none;}
  #etiquetasRoot .et-tab-btn{padding:10px 12px;flex-shrink:0;}
  #etiquetasRoot #etTab-pantalla .et-form-panel{padding:12px 14px 14px;}
  #etiquetasRoot #etTab-pantalla .et-form-panel h2{margin-bottom:6px;padding-bottom:8px;}
  #etiquetasRoot #etTab-pantalla .et-row2{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 10px;}
  #etiquetasRoot #etTab-pantalla .et-row2 > div{min-width:0;}
  #etiquetasRoot #etTab-pantalla .et-row2 input{min-width:0;max-width:100%;}
  #etiquetasRoot #etTab-pantalla .et-form-panel label{margin:8px 0 3px;font-size:11px;}
  #etiquetasRoot #etTab-pantalla .et-actions{margin-top:12px;}
  #etiquetasRoot #etTab-pantalla .et-actions > *{flex:1 1 0;justify-content:center;}
}
/* Celulares de pantalla más baja (iPhone 13/SE y similares): un poco más compacto para
   que el formulario siga entrando sin desplazar. */
@media (max-width:860px) and (max-height:760px){
  #etiquetasRoot .et-tab-btn{padding:8px 11px;}
  #etiquetasRoot .et-tabs{margin-bottom:6px;}
  #etiquetasRoot #etTab-pantalla .et-form-panel{padding:10px 12px 12px;}
  #etiquetasRoot #etTab-pantalla .et-form-panel h2{margin-bottom:4px;padding-bottom:6px;}
  #etiquetasRoot #etTab-pantalla .et-form-panel label{margin:6px 0 2px;}
  #etiquetasRoot #etTab-pantalla .et-form-panel input{padding:6px 9px;}
  #etiquetasRoot #etTab-pantalla .et-actions{margin-top:10px;}
  #etiquetasRoot #etTab-pantalla .et-actions > *{padding-top:9px;padding-bottom:9px;}
}
/* Historial de movimientos de un artículo (ver productHistoryBodyHtml) */
.hist-filters{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:8px;}
.hist-filters .hist-f-wide{grid-column:1 / -1;}
/* Filtros plegables del historial (mismo mecanismo que Catálogo y Facturas,
   ver .more-filters-toggle/.extra-filters): en celular quedan detrás de
   «Mostrar filtros»; en escritorio siguen a la vista, repartidos en la misma
   grilla de siempre. Abiertos en celular van de a dos por fila (Tipo ocupa
   toda la fila) en vez de apilados uno por uno. */
/* Tabla del historial en escritorio: con la columna «Saldo anterior» las 8
   columnas se pelean el ancho; menos relleno lateral y encabezados numéricos
   que bajan de línea («Saldo / anterior») dejan lugar al Detalle. */
@media (min-width:721px){
  .hist-table th,.hist-table td{padding-left:8px;padding-right:8px;}
  .hist-table th.num{white-space:normal;line-height:1.25;}
  .hist-table td:nth-child(4){min-width:170px;}
}
.hist-filters .more-filters-toggle{grid-column:1 / -1;}
@media (max-width:720px){
  .hist-filters .extra-filters{grid-column:1 / -1;}
  .hist-filters .extra-filters.open{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px;}
  .hist-filters .extra-filters .field{min-width:0;}
  .hist-filters .extra-filters .field select,.hist-filters .extra-filters .field input{min-width:0;width:100%;}
  .hist-filters .extra-filters .hist-f-full{grid-column:1 / -1;}
}
.hist-totals{display:flex;flex-wrap:wrap;align-items:center;gap:6px 16px;font-size:12.5px;color:var(--text-muted);padding:8px 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border);}
/* Fila del carrito de compra: todo en una línea (ver compraCartRowsHtml) */
.oc-line{display:flex;gap:6px;align-items:center;padding:10px 0;border-bottom:1px solid var(--border);}
.oc-line-head{font-size:10.5px;color:var(--text-faint);padding:0 0 4px;}
.oc-line-name{flex:1;min-width:0;}
.oc-line-name b{display:block;font-size:12.5px;line-height:1.25;overflow-wrap:anywhere;}
.oc-line-name span{font-size:10.5px;color:var(--text-faint);}
/* "input.oc-line-*" (no solo la clase): la regla global
   input[type=text]{width:100%} pesa más que una clase sola y los estiraba
   a todo el ancho de la fila. */
.oc-line-qty,.oc-line input.oc-line-qty{width:52px;flex-shrink:0;text-align:center;}
.oc-line-cost,.oc-line input.oc-line-cost{width:84px;flex-shrink:0;text-align:center;}
.oc-line input.oc-line-qty,.oc-line input.oc-line-cost{padding:6px 4px;}
.oc-line-sub{width:74px;flex-shrink:0;text-align:right;font-size:12px;}
.oc-line-act{width:34px;flex-shrink:0;display:flex;justify-content:center;}
/* Columnas numéricas de solo lectura (detalle de la orden, ver ocViewModal) */
.oc-line-n{width:44px;flex-shrink:0;text-align:right;font-size:12px;}
.oc-line-money{width:70px;flex-shrink:0;text-align:right;font-size:12px;}
/* Panel General en escritorio (dos o más columnas, >980px): sin scroll de
   página. Buscador y métricas arriba; la parte de abajo (.dash-fill) llena
   justo el alto que queda y cada tarjeta hace scroll por dentro. */
@media (min-width: 981px){
  .view:has(> .dash-fill){display:flex;flex-direction:column;padding-bottom:14px;}
  .view:has(> .dash-fill) > *{flex-shrink:0;}
  .view > .dash-fill{flex:1 1 auto;min-height:0;align-items:stretch;}
  .dash-fill{grid-template-columns:repeat(auto-fit, minmax(0, 1fr));}
  .dash-fill > .card{display:flex;flex-direction:column;min-height:0;}
  .dash-fill > .card > .card-head{flex-shrink:0;}
  .dash-fill > .card > .dash-scroll-list{flex:1 1 auto;min-height:0;max-height:none;}
}
/* Botón "Escanear con cámara" solo en equipos táctiles (celular/tablet):
   en un computador (mouse = hover + puntero fino) no hay cámara trasera
   para escanear — ahí se usa el buscador o un lector USB/Bluetooth. Se
   decide por el tipo de puntero, no por el ancho: una tablet en
   horizontal (ancho de escritorio) igual conserva la cámara. La misma regla
   cubre el ícono de escanear de los buscadores (.scan-btn) y «Escanear» de la
   barra rápida (.qd-act[data-qd="scan"]): en el computador no llevan cámara. */
@media (hover: hover) and (pointer: fine){ .camera-scan-btn,.scan-btn,.qd-act[data-qd="scan"]{display:none !important;} }
/* Análisis de Compras */
@media (max-width: 720px){ .analisis-desktop-only{display:none !important;} .analisis-btn-label{display:none;} }
/* Escritorio: la pantalla queda fija — encabezado, botones, pestañas,
   métricas, buscador y títulos de columna no se mueven; solo las filas de
   la tabla hacen scroll (la tabla toma todo el alto que quede libre). */
@media (min-width: 861px){
  .view:has(> .analisis-card){display:flex;flex-direction:column;padding-bottom:14px;}
  .view:has(> .analisis-card) > *{flex-shrink:0;}
  .view > .analisis-card{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;}
  .analisis-card > .card-head{flex-shrink:0;}
  .analisis-card > .card-pad{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;}
  .analisis-card > .card-pad > *{flex-shrink:0;}
  .analisis-card > .card-pad > .table-wrap{flex:1 1 auto;min-height:140px;overflow:auto;}
  .analisis-card > .card-pad > .table-wrap thead th{position:sticky;top:0;z-index:2;}
  /* Búsqueda (catálogo + listas sin vincular): igual que la tabla, solo
     las tarjetas hacen scroll dentro del recuadro. */
  .analisis-card > .card-pad > .an-par{flex:1 1 auto;min-height:140px;overflow-y:auto;overscroll-behavior:contain;padding-bottom:4px;}
  /* Sin scroll horizontal: la tabla se ajusta al ancho disponible (títulos
     en dos líneas, celdas más compactas, los textos largos se parten y los
     botones de acción bajan de línea si hace falta). */
  /* overflow-x:auto solo como último recurso (ventanas muy angostas): con
     los ajustes de abajo la tabla cabe y no aparece barra horizontal. */
  .analisis-card > .card-pad > .table-wrap{overflow-x:auto;}
  .an-table th{white-space:normal;padding:8px 10px;vertical-align:bottom;line-height:1.25;}
  .an-table td{padding:8px 10px;overflow-wrap:anywhere;}
  .an-table .row-actions{flex-wrap:wrap;gap:4px;}
  .an-table input.qty-input{width:64px !important;}
  .an-table .pill{white-space:normal;text-align:center;}
}
/* Ventanas de escritorio angostas: se ocultan la columna "Código" del
   proveedor (el código de barra y el SKU siguen a la vista) y los íconos
   Editar/Eliminar — todo sigue disponible tocando la fila (detalle). */
@media (min-width: 861px) and (max-width: 1279px){
  .an-table .an-opt{display:none;}
}
/* Ventanas todavía más angostas (menú lateral + tabla de 9 columnas no
   caben): misma tarjeta compacta que en celular (.an-mcard) en vez de la
   tabla; tocarla abre el detalle con todo. Sin scroll horizontal. */
@media (min-width: 721px) and (max-width: 1099px){
  .an-table thead{display:none;}
  .an-table tbody td{display:none !important;}
  .an-table tbody td.an-mcard{display:table-cell !important;padding:10px 12px;}
}
.an-table .an-mcard{display:none;}
/* Búsqueda en paralelo de Análisis de Compras (ver analisisSearchSectionsHtml) */
.an-par{display:grid;grid-template-columns:1fr;gap:6px;}
@media (min-width: 981px){ .an-par{grid-template-columns:1fr 1fr;gap:16px;align-items:start;} }
.an-sec{display:flex;align-items:center;gap:8px;margin:6px 2px 8px;font-size:11.5px;font-weight:800;letter-spacing:.4px;text-transform:uppercase;color:var(--text-faint);}
.an-sec-n{background:var(--surface-2);border:1px solid var(--border);border-radius:99px;padding:0 7px;font-size:11px;letter-spacing:0;}
.an-cat{border:1px solid var(--accent);border-radius:12px;overflow:hidden;margin-bottom:10px;background:var(--surface);}
.an-cat-head{display:flex;gap:10px;align-items:center;padding:10px 12px;background:var(--surface-2);}
.an-cat-title{font-size:13.5px;font-weight:700;line-height:1.3;}
.an-cat-meta,.an-pv-meta{font-size:11px;color:var(--text-faint);margin-top:2px;}
.an-cat-sub{font-size:11px;color:var(--text-faint);padding:7px 12px;border-top:1px solid var(--border);}
.an-cat-sub-act{display:flex;align-items:center;justify-content:space-between;gap:10px;padding-top:6px;padding-bottom:6px;}
.an-cat-sub-act > span{flex:1;min-width:0;line-height:1.35;}
.an-cat-sub-act .btn{flex-shrink:0;}
.an-pv{display:flex;align-items:center;gap:10px;padding:9px 12px;border-top:1px solid var(--border);}
.an-pv-hit{background:var(--accent-soft);}
.an-pv-main{flex:1;min-width:0;}
.an-pv-name{font-size:12.5px;display:flex;align-items:center;gap:6px;flex-wrap:wrap;}
.an-pv-cost{text-align:right;flex-shrink:0;}
.an-pv-cost span{display:block;font-size:9.5px;color:var(--text-faint);text-transform:uppercase;letter-spacing:.3px;}
.an-pv-cost b{font-size:14px;}
.an-cat-foot{display:flex;gap:8px;align-items:center;padding:9px 12px;border-top:1px solid var(--border);}
.an-cat-foot .qty-input{width:76px;flex-shrink:0;}
.an-cat-foot .btn{flex:1;justify-content:center;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.an-un{border:1px solid var(--border);border-radius:12px;padding:10px 12px;margin-bottom:8px;background:var(--surface);}
.an-un-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:3px;font-size:13px;}
.an-un-lbl{font-size:11px;color:var(--text-faint);}
.an-un-acts{display:flex;gap:6px;margin-top:9px;}
.an-un-acts .btn:first-child{flex:1;justify-content:center;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.an-empty{border:1px dashed var(--border);border-radius:12px;padding:12px;text-align:center;color:var(--text-faint);font-size:12.5px;margin-bottom:8px;}
.an-lk{display:inline-flex;align-items:center;gap:3px;font-size:10.5px;font-weight:700;border-radius:99px;padding:1px 7px;white-space:nowrap;vertical-align:middle;}
.an-lk-ok{background:var(--success-soft, rgba(46,160,110,.16));color:var(--success, #2e9e6e);}
.an-lk-bc{background:var(--info-soft, rgba(80,140,220,.16));color:var(--info, #3f7fd6);}
.an-lk-no{background:var(--warning-soft, rgba(240,170,40,.18));color:var(--warning, #b7791f);}
.an-box{border:1px solid var(--border);border-radius:12px;padding:12px;background:var(--surface-2);}
.an-sug{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--border);}
.an-sug-t{font-size:13px;display:block;line-height:1.3;}
.an-pct{font:700 12px var(--font-mono);border-radius:8px;padding:3px 7px;background:var(--success-soft, rgba(46,160,110,.16));color:var(--success, #2e9e6e);flex-shrink:0;}
.an-pct.mid{background:var(--warning-soft, rgba(240,170,40,.18));color:var(--warning, #b7791f);}
.an-pct.low{background:var(--surface-2);color:var(--text-faint);}
.an-card{display:flex;align-items:center;gap:8px;}
.an-card-main{flex:1;min-width:0;}
.an-card-title{font-size:13px;font-weight:700;line-height:1.3;}
.an-card-sub{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;font-size:12.5px;margin-top:3px;}
.an-card-sub b{font-size:13px;}
.an-card-meta{font-size:11px;color:var(--text-faint);margin-top:2px;}
.an-card > svg{flex-shrink:0;color:var(--text-faint);}
@media (max-width: 720px){
  .an-table tbody td{display:none !important;}
  .an-table tbody td.an-mcard{display:block !important;border-bottom:none;padding:8px 0;}
  .an-table tbody tr.analisis-best-row{border-color:var(--success);}
  .an-table tbody tr.analisis-best-row td{background:transparent;}
}
.kpi-clickable{cursor:pointer;transition:border-color .12s, box-shadow .12s;}
.kpi-clickable:hover{border-color:var(--accent);}
.kpi-active{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft);}
.analisis-swap{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:10px 14px;border-radius:10px;background:var(--warning-soft);border:1px solid var(--warning);color:var(--text);}
.analisis-swap > svg{color:var(--warning);flex-shrink:0;}
.analisis-best{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;padding:10px 14px;border-radius:10px;background:var(--success-soft);color:var(--text);border:1px solid var(--border);}
tr.analisis-best-row td{background:var(--success-soft);}
/* Coincidencia con lo buscado: primero y resaltado (ver analisisGroupedRows). */
tr.analisis-match-row td{background:var(--accent-soft);}
tr.analisis-match-row td:nth-child(2){box-shadow:inset 3px 0 0 var(--accent);}
.analisis-match-legend{display:inline-block;width:10px;height:10px;border-radius:3px;background:var(--accent-soft);border:2px solid var(--accent);vertical-align:-1px;}
@media (max-width: 720px){
  .an-table tbody tr.analisis-match-row{border:2px solid var(--accent);background:var(--accent-soft);}
  .an-table tbody tr.analisis-match-row td{background:transparent;box-shadow:none;}
}

.unit-pick-list{display:flex;flex-direction:column;gap:6px;max-height:55vh;overflow-y:auto;}
.unit-pick-row{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;min-height:46px;padding:10px 14px;border:1px solid var(--border);border-radius:10px;background:transparent;color:inherit;font:inherit;font-size:15px;text-align:left;cursor:pointer;}
.unit-pick-row:hover,.unit-pick-row:active{background:var(--accent-soft);}
.unit-pick-row.selected{border-color:var(--accent);font-weight:600;}
.unit-pick-create{justify-content:flex-start;color:var(--accent);border-style:dashed;}

.sig-pad{display:block;width:100%;height:150px;border:1.5px dashed var(--border-strong);border-radius:10px;background:#fff;touch-action:none;cursor:crosshair;}
.sig-block{margin-top:16px;}
.sign-status{margin-top:12px;display:flex;flex-direction:column;gap:8px;}
.sign-line{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--border);border-radius:10px;background:var(--surface-2);}
.sign-line.ok{border-color:var(--success);background:var(--success-soft);}
.sign-ic{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--surface);color:var(--text-muted);flex:none;}
.sign-line.ok .sign-ic{background:var(--success);color:#fff;}
.sign-summary{margin-top:10px;padding:10px 12px;border:1px solid var(--border);border-radius:10px;background:var(--surface-2);}
.barcode-card{margin:14px 0 4px;padding:12px 14px 10px;background:#fff;border:1px solid var(--border);border-radius:12px;text-align:center;box-shadow:0 1px 2px rgba(0,0,0,.06);}
.barcode-card-label{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:#6b7785;margin-bottom:6px;font-weight:600;}
.barcode-svg{display:block;width:100%;max-width:280px;height:auto;margin:0 auto;}
/* Catálogo de Productos: stock de Almacén grande y con el color de su estado + chips de stock por ubicación.
   En celular cada artículo es UNA fila compacta (foto · descripción · SKU y ubicaciones · stock de Almacén);
   la tabla (data-rt-off) no se convierte en tarjeta con el resto de los datos: están en la ficha. */
.cat-table td.cat-stk{text-align:center;}
.cat-table .cat-bar{font-size:11.5px;margin-top:2px;}
.cat-table .cat-meta{font-size:11.5px;color:var(--text-faint);margin-top:2px;font-weight:400;}
.cat-table .stk-badge{min-width:58px;padding:0 8px;}
.cat-table .stk-badge small{max-width:120px;overflow:hidden;text-overflow:ellipsis;font-size:9px;}
.cat-table .stk-badge small.stk-foot{opacity:.8;letter-spacing:.02em;}
.cat-table .stk-badge b{font-size:20px;}
@media (min-width:721px){ .cat-table td.cat-name{min-width:210px;} .cat-table tbody td{padding-top:6px;padding-bottom:6px;} }
.cat-table .loc-chips{flex-wrap:wrap;gap:4px;max-width:220px;}
.cat-table .loc-chips .dept-dot{display:none;}
.cat-table .loc-chips .dash-stk-c{flex-shrink:0;padding:0 7px;font-size:11.5px;gap:4px;max-width:104px;}
.cat-table .loc-chips .dash-stk-c i{max-width:64px;}
@media (max-width:720px){
  .cat-table tbody tr{display:grid;grid-template-columns:40px auto minmax(0,1fr) auto;grid-template-areas:"ph name name stk" "ph sku locs stk";column-gap:9px;row-gap:3px;align-items:center;padding:6px 10px;}
  .cat-table tbody td{display:block;padding:0;border:0;min-width:0;}
  .cat-table tbody td::before{content:none;}
  .cat-table td.cat-ph{grid-area:ph;}
  .cat-table td.cat-ph .photo-box{width:40px;height:40px;}
  .cat-table td.cat-name{grid-area:name;font-size:13px;line-height:1.25;}
  .cat-table td.cat-name b{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
  .cat-table td.cat-sku{grid-area:sku;font-size:10px;color:var(--text-faint);}
  .cat-table .cat-bar,.cat-table .cat-meta{display:none;}
  .cat-table td.cat-locs{grid-area:locs;overflow:hidden;}
  .cat-table td.cat-stk{grid-area:stk;}
  .cat-table .stk-badge{min-width:62px;padding:3px 9px;}
  .cat-table .stk-badge small{font-size:9px;max-width:78px;}
  .cat-table .stk-badge b{font-size:20px;}
  .cat-table td.cat-est{display:none;}
  /* Si los chips no caben en la línea, el último se desvanece (en vez de cortarse en seco) */
  .cat-table .loc-chips{flex-wrap:nowrap;max-width:none;overflow:hidden;-webkit-mask-image:linear-gradient(to right,#000 88%,transparent);mask-image:linear-gradient(to right,#000 88%,transparent);}
  .cat-table .loc-chips .dash-stk-c{font-size:10.5px;}
}
/* Ficha del artículo (compacta): foto + datos arriba, código con su número, stock en tarjetas y botones con nombre */
.photo-box-fa{width:84px;height:84px;}
.fa-body{padding:14px 16px 12px;display:flex;flex-direction:column;gap:12px;}
.fa-hero{display:flex;gap:12px;align-items:flex-start;}
.fa-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px;}
.fa-name{font-size:16px;line-height:1.2;font-weight:800;margin:0;overflow-wrap:anywhere;}
.fa-chips{display:flex;flex-wrap:wrap;gap:5px;align-items:center;}
.fa-chips .mono{font-size:11px;}
.fa-prov{font-size:12px;color:var(--text-muted);display:flex;align-items:center;gap:5px;min-width:0;}
.fa-prov b{color:var(--text);font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.fa-code{display:flex;align-items:center;gap:10px;width:100%;padding:9px 12px;border:1px solid var(--border-strong,var(--border));border-radius:12px;background:var(--surface-2);color:var(--text);cursor:pointer;text-align:left;font:inherit;}
.fa-code:hover{border-color:var(--accent);}
.fa-code .ic{color:var(--text-muted);flex-shrink:0;display:flex;}
.fa-code-num{flex:1;min-width:0;font-size:16px;font-weight:700;letter-spacing:.03em;overflow-wrap:anywhere;}
.fa-code-hint{display:flex;align-items:center;gap:2px;font-size:11px;font-weight:700;color:var(--accent);white-space:nowrap;flex-shrink:0;}
.fa-stock{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:8px;}
.fa-main{border-radius:14px;padding:10px 12px;display:flex;flex-direction:column;justify-content:center;gap:3px;min-width:0;}
.fa-main small{font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;opacity:.85;}
.fa-main .n{font-family:var(--font-display);font-size:30px;font-weight:800;line-height:1;overflow-wrap:anywhere;}
.fa-st{white-space:nowrap;display:inline-flex;align-items:center;gap:3px;}
.fa-main .u{font-size:11.5px;font-weight:700;opacity:.9;display:flex;align-items:center;gap:4px;flex-wrap:wrap;}
.fa-minis{display:grid;grid-template-columns:repeat(var(--cm,3),minmax(0,1fr));gap:8px;}
@media (min-width:600px){ .fa-minis{grid-template-columns:repeat(var(--cd,5),minmax(0,1fr));} }
.fa-mini{border:1px solid var(--border);border-radius:12px;padding:8px 2px;text-align:center;background:var(--surface);display:flex;flex-direction:column;justify-content:center;gap:2px;min-width:0;}
.fa-mini small{font-size:9px;font-weight:800;letter-spacing:.03em;text-transform:uppercase;color:var(--text-muted);}
.fa-mini b{font-size:18px;font-weight:800;line-height:1.1;}
.fa-sec-tot{display:flex;justify-content:space-between;align-items:baseline;gap:8px;flex-wrap:wrap;}
.fa-sec-tot span+span{text-transform:none;letter-spacing:0;font-weight:600;}
.fa-sec-tot b{color:var(--text);font-weight:800;}
.fa-sec-t{font-size:11px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--text-muted);margin-bottom:6px;}
.loc-chips{display:flex;flex-wrap:wrap;gap:6px;min-width:0;}
.fa-body .loc-chips .dash-stk-c{padding:4px 11px;font-size:12.5px;}
.fa-cf{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:8px 14px;}
.fa-cf > div{min-width:0;}
.fa-cf small{display:block;font-size:11px;color:var(--text-faint);}
.fa-cf b{font-size:13.5px;overflow-wrap:anywhere;}
.modal-foot.fa-actions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;padding:12px 14px;}
.modal-foot .fa-act{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-height:54px;padding:8px 4px;border-radius:12px;font-size:12px;font-weight:700;line-height:1.15;text-align:center;}
.modal-foot .fa-act-main{background:var(--accent-soft);border-color:transparent;color:var(--accent-strong,var(--accent));}
/* Visor del código (al tocar el número en la ficha): imagen grande del código, el número y la X para cerrar */
.fa-code-layer{z-index:125;background:rgba(5,9,13,.88);align-items:center;justify-content:center;padding:20px;}
.fa-code-layer .modal-panel{max-width:420px;border-radius:20px;}
.fa-code-layer .modal-head::before{display:none;}
.fa-code-body{display:flex;flex-direction:column;align-items:center;gap:12px;padding:18px 18px 22px;text-align:center;}
.fa-code-body .barcode-card{width:100%;margin:0;padding:18px 14px 14px;}
.fa-code-body .barcode-svg{max-width:360px;}


/* Historial de precios */
.ph-filters{display:grid;grid-template-columns:minmax(160px,1.1fr) minmax(220px,1.8fr) 1fr 1fr auto;gap:10px;align-items:end;}
.ph-filters .field{margin:0;min-width:0;}
.ph-filters select{width:100%;}
.ph-seg{display:inline-flex;border:1px solid var(--border-strong);border-radius:var(--radius-sm);overflow:hidden;}
.ph-seg button{border:0;background:var(--surface);color:var(--text-muted);padding:9px 13px;font:inherit;font-size:13px;cursor:pointer;white-space:nowrap;}
.ph-seg button.on{background:var(--accent);color:var(--accent-contrast);font-weight:600;}
.an-fseg{flex-shrink:0;}
.an-purge{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:9px 12px;border:1px solid var(--border);border-radius:12px;background:var(--surface-2);font-size:13px;color:var(--text-muted);}
.an-purge > svg{color:var(--danger);flex-shrink:0;}
.an-fseg button{padding:8px 12px;font-size:12.5px;}
.an-fseg button + button{border-left:1px solid var(--border);}
.an-fseg-n{display:inline-block;min-width:18px;padding:1px 6px;margin-left:3px;border-radius:999px;background:var(--surface-2);color:var(--text-muted);font-size:11px;font-weight:600;text-align:center;}
.an-fseg button.on .an-fseg-n{background:rgba(255,255,255,.22);color:inherit;}
@media (max-width: 720px){
  .an-fseg{display:flex;width:100%;}
  .an-fseg button{flex:1 1 0;min-width:0;min-height:36px;padding:6px 4px;font-size:12px;white-space:normal;line-height:1.2;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:2px 5px;}
  .an-fseg-n{margin-left:0;}
}
.ph-chart-card{border:1px solid var(--border);border-radius:var(--radius);padding:14px 14px 6px;background:var(--surface);--ph1:#2563a8;--ph2:#d9822b;--ph3:#16897a;--ph4:#8e44ad;--ph5:#c2417b;--ph6:#7a6a3a;}
.ph-prov-row{--ph1:#2563a8;--ph2:#d9822b;--ph3:#16897a;--ph4:#8e44ad;--ph5:#c2417b;--ph6:#7a6a3a;}
:root[data-theme="dark"] .ph-chart-card,:root[data-theme="dark"] .ph-prov-row{--ph1:#6ba6e0;--ph2:#f0a24f;--ph3:#3cc4b0;--ph4:#c08bdc;--ph5:#ec7bab;--ph6:#c9b66a;}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .ph-chart-card,:root:not([data-theme="light"]) .ph-prov-row{--ph1:#6ba6e0;--ph2:#f0a24f;--ph3:#3cc4b0;--ph4:#c08bdc;--ph5:#ec7bab;--ph6:#c9b66a;}}
.ph-chart-head{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:6px;}
.ph-svg{width:100%;height:auto;display:block;overflow:visible;}
.ph-grid{stroke:var(--border);stroke-width:1;}
.ph-zero{stroke:var(--text-faint);stroke-dasharray:4 3;}
.ph-tick{fill:var(--text-faint);font-size:11px;font-family:var(--font-mono);}
.ph-line{fill:none;stroke-width:2.4;stroke-linejoin:round;stroke-linecap:round;}
.ph-range{stroke-width:2;opacity:.45;}
.ph-dot{stroke:var(--surface);stroke-width:1.5;}
.ph-dot-flat{opacity:.55;}
.ph-dot-open{fill:var(--surface);stroke-width:2;}
.ph-prov-row{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:10px;}
.ph-prov{display:flex;flex-direction:column;gap:5px;text-align:left;border:1px solid var(--border);background:var(--surface);border-radius:var(--radius);padding:11px 13px;cursor:pointer;font:inherit;color:var(--text);}
.ph-prov:hover{border-color:var(--border-strong);}
.ph-prov.off{opacity:.45;}
.ph-prov-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.ph-prov-head i{width:11px;height:11px;border-radius:50%;display:inline-block;flex:none;}
.ph-prov-flow{display:flex;align-items:baseline;gap:7px;flex-wrap:wrap;font-family:var(--font-mono);font-size:13.5px;}
.ph-arrow{color:var(--text-faint);}
.ph-chg{font-size:12px;font-weight:700;padding:1px 7px;border-radius:99px;}
.ph-prov-meta{font-size:11.5px;color:var(--text-muted);}
.ph-up{color:var(--danger);}.ph-down{color:var(--success);}.ph-flat{color:var(--text-muted);}
.ph-chg.ph-up{background:var(--danger-soft);}.ph-chg.ph-down{background:var(--success-soft);}.ph-chg.ph-flat{background:var(--surface-2);}
.ph-dot-sm{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:7px;}
.ph-table td,.ph-table th{white-space:nowrap;}
@media (max-width:700px){.ph-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 -6px;padding-bottom:6px;}.ph-svg{min-width:620px;}}
@media (max-width:900px){.ph-filters{grid-template-columns:1fr 1fr;}.ph-f-search,.ph-f-art{grid-column:1/-1;}}
/* ============================================================
   PLANIFICACIÓN DE ACTIVIDADES (v2026101359)
   ============================================================ */
.pl-wrap{display:flex;flex-direction:column;gap:14px;min-width:0;}
.pl-row{display:flex;gap:10px;flex-wrap:wrap;align-items:center;min-width:0;}
.pl-grow{flex:1 1 150px;min-width:0;}
.pl-sp{flex:1 1 0;min-width:0;}
.pl-day-title{font-family:var(--font-display);font-size:20px;font-weight:800;}
.pl-day-title::first-letter{text-transform:uppercase;}
.pl-seg{display:inline-flex;border:1px solid var(--border-strong);border-radius:8px;overflow:hidden;background:var(--surface);}
.pl-seg button{border:0;background:none;padding:7px 12px;cursor:pointer;color:var(--text-muted);font-weight:600;font-size:13px;}
.pl-seg button+button{border-left:1px solid var(--border-strong);}
.pl-seg button[aria-pressed="true"]{background:var(--text);color:var(--surface);}
.pl-strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px;}
.pl-mini{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:10px 12px;display:flex;flex-direction:column;gap:2px;min-width:0;}
.pl-mini span{font-size:11.5px;color:var(--text-muted);font-weight:600;}
.pl-mini b{font-family:var(--font-display);font-size:24px;line-height:1.15;font-weight:800;}
.pl-mini.good b{color:var(--success);} .pl-mini.bad b{color:var(--danger);} .pl-mini.pend b{color:var(--text-muted);}
.pl-bar{display:flex;height:10px;border-radius:99px;overflow:hidden;gap:2px;background:var(--surface-2);}
.pl-bar i{display:block;height:100%;}
.pl-bar .g{background:var(--success);} .pl-bar .b{background:var(--danger);} .pl-bar .p{background:var(--text-faint);}
.pl-sug{display:flex;gap:6px;flex-wrap:wrap;}
.pl-chip{display:inline-flex;align-items:center;gap:5px;font-size:12px;border:1px solid var(--border-strong);border-radius:99px;padding:2px 9px;color:var(--text-muted);background:var(--surface);max-width:100%;}
.pl-chip.alta{border-color:var(--text-muted);color:var(--text);font-weight:700;}
.pl-chip.mono{font-family:var(--font-mono);font-size:11.5px;}
button.pl-chip{cursor:pointer;background:var(--surface-2);}
button.pl-chip:hover{border-color:var(--accent);color:var(--text);}
.pl-group-h{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:10px 16px;background:var(--surface-2);border-top:1px solid var(--border);border-bottom:1px solid var(--border);font-family:var(--font-display);font-weight:800;font-size:15px;}
.pl-group-h:first-child{border-top:0;}
.pl-group-h small{font-family:var(--font-body);font-weight:500;color:var(--text-faint);font-size:12px;}
.pl-act{display:grid;grid-template-columns:1fr auto;gap:8px 16px;padding:12px 16px;border-bottom:1px solid var(--border);align-items:start;}
.pl-act:last-child{border-bottom:0;}
.pl-act .t{font-weight:600;overflow-wrap:anywhere;display:flex;align-items:flex-start;gap:10px;}
.pl-code{display:inline-block;font-family:var(--font-mono,ui-monospace,monospace);font-size:12px;font-weight:700;letter-spacing:.02em;color:var(--accent);background:var(--accent-soft,rgba(12,100,120,.12));border-radius:6px;padding:3px 8px;white-space:nowrap;}
.pl-cat-tbl .c-k{width:1%;white-space:nowrap;}
.pl-cb-opt .pl-code{margin-right:10px;flex:none;}
.pl-num{flex:none;display:inline-flex;align-items:center;justify-content:center;min-width:28px;height:28px;padding:0 9px;border-radius:99px;background:var(--accent);color:#fff;font-weight:800;font-size:13px;line-height:1;font-variant-numeric:tabular-nums;}
/* Actividades en dos bloques (columnas) para verlas mejor */
.pl-actgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;padding:10px 14px 14px;}
.pl-actgrid .pl-act,.pl-actgrid .pl-act:last-child{border:1px solid var(--border);border-radius:12px;background:var(--surface);}
.pl-actgrid .pl-act.has-note{grid-template-columns:minmax(0,1fr) auto;}
.pl-actgrid .pl-act.has-note .pl-note{grid-column:1/-1;order:3;}
@media (max-width:900px){.pl-actgrid{grid-template-columns:minmax(0,1fr);}}
/* Celular: la tarjeta se apila (nombre y chips arriba, nota, y abajo estado y botones) */
@media (max-width:640px){
  .pl-actgrid{padding:8px 10px 12px;}
  .pl-actgrid .pl-act,.pl-actgrid .pl-act.has-note{grid-template-columns:minmax(0,1fr);}
  .pl-actgrid .pl-act.has-note .pl-note{grid-column:auto;order:0;}
  .pl-actgrid .pl-act>.pl-row,.pl-actgrid .pl-act>.pl-tri{justify-self:start;}
}
.pl-act .d{color:var(--text-muted);font-size:13px;overflow-wrap:anywhere;}
.pl-meta{display:flex;gap:6px;flex-wrap:wrap;margin-top:5px;align-items:center;}
.pl-status{display:inline-flex;align-items:center;gap:6px;font-weight:700;font-size:12.5px;border-radius:99px;padding:3px 10px 3px 8px;}
.pl-status.pendiente{background:var(--surface-2);color:var(--text-muted);}
.pl-status.lograda{background:var(--success-soft);color:var(--success);}
.pl-status.no_lograda{background:var(--danger-soft);color:var(--danger);}
.pl-tri{display:inline-flex;border:1px solid var(--border-strong);border-radius:8px;overflow:hidden;background:var(--surface);}
.pl-tri button{border:0;background:none;padding:7px 11px;cursor:pointer;font-weight:600;font-size:12.5px;display:flex;align-items:center;gap:6px;color:var(--text-muted);}
.pl-tri button+button{border-left:1px solid var(--border-strong);}
.pl-tri button:hover{background:var(--surface-2);}
.pl-tri button[aria-pressed="true"].pendiente{background:var(--surface-2);color:var(--text);}
.pl-tri button[aria-pressed="true"].lograda{background:var(--success-soft);color:var(--success);}
.pl-tri button[aria-pressed="true"].no_lograda{background:var(--danger-soft);color:var(--danger);}
.pl-reason{grid-column:1/-1;background:var(--surface-2);border:1px solid var(--danger);border-radius:var(--radius);padding:12px;display:grid;gap:10px;}
.pl-why{grid-column:1/-1;color:var(--danger);font-size:13px;background:var(--danger-soft);border-radius:6px;padding:7px 10px;overflow-wrap:anywhere;}
.pl-tier{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;border-radius:99px;padding:2px 9px;}
.pl-tier i{width:8px;height:8px;border-radius:50%;display:inline-block;}
.pl-tier.good{background:var(--success-soft);color:var(--success);} .pl-tier.good i{background:var(--success);}
.pl-tier.warn{background:var(--warning-soft);color:var(--warning);} .pl-tier.warn i{background:var(--warning);}
.pl-tier.bad{background:var(--danger-soft);color:var(--danger);} .pl-tier.bad i{background:var(--danger);}
.pl-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px;}
.pl-kpi{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:12px 14px;min-width:0;}
.pl-kpi span{display:block;font-size:11.5px;color:var(--text-muted);font-weight:600;}
.pl-kpi b{font-family:var(--font-display);font-size:28px;font-weight:800;line-height:1.15;}
.pl-kpi small{display:block;color:var(--text-faint);font-size:11.5px;margin-top:2px;}
.pl-grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,440px),1fr));gap:14px;}
.pl-chart{position:relative;min-width:0;}
.pl-chart svg{display:block;width:100%;height:auto;overflow:visible;}
.pl-chart .ax text{font-size:11px;fill:var(--text-faint);font-family:var(--font-body);}
.pl-chart .lb{font-size:12px;fill:var(--text-muted);font-family:var(--font-body);}
.pl-chart .vl{font-size:12px;fill:var(--text);font-weight:600;font-family:var(--font-body);}
.pl-legend{display:flex;gap:14px;flex-wrap:wrap;font-size:12px;color:var(--text-muted);margin-bottom:8px;}
.pl-legend span{display:inline-flex;align-items:center;gap:6px;}
.pl-sw{width:11px;height:11px;border-radius:3px;display:inline-block;}
.pl-tip{position:fixed;z-index:3000;pointer-events:none;background:var(--text);color:var(--surface);border-radius:8px;padding:7px 10px;font-size:12.5px;line-height:1.45;max-width:240px;box-shadow:var(--shadow-lg);}
.pl-tip[hidden]{display:none;}
.pl-days{display:flex;gap:6px;flex-wrap:wrap;}
.pl-days label{display:inline-flex;align-items:center;gap:5px;border:1px solid var(--border-strong);border-radius:99px;padding:3px 10px;cursor:pointer;font-size:13px;}
.pl-cat-item{display:flex;gap:10px;align-items:flex-start;padding:10px 0;border-bottom:1px solid var(--border);}
.pl-cat-item:last-child{border-bottom:0;}
.pl-subform{background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius);padding:12px;display:grid;gap:12px;}
.pl-hint{font-size:12px;color:var(--text-faint);}
.pl-warn{color:var(--warning);font-size:12px;font-weight:600;}
.pl-sup-table{min-width:560px;}
@media (max-width:560px){
  .pl-act{grid-template-columns:1fr;}
  .pl-day-title{font-size:17px;}
}

.pl-wrap .tabs button.tab{border:0;border-bottom:2px solid transparent;background:none;border-radius:0;}
.pl-wrap .tabs button.tab.active{border-bottom-color:var(--accent);}
.pl-wrap input[type=time],[data-pl-modal] input[type=time],.pl-ov input[type=time]{width:100%;border:1px solid var(--border-strong);background:var(--surface);color:var(--text);border-radius:var(--radius-sm);padding:10px 12px;font-size:13.5px;outline:none;font-family:inherit;}
.pl-wrap input[type=time]:focus,[data-pl-modal] input[type=time]:focus,.pl-ov input[type=time]:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft);}

/* modal del catálogo: el panel hace scroll, la lista tiene su propio scroll */
[data-pl-modal]{display:flex;flex-direction:column;min-height:0;min-width:0;flex:1 1 auto;}
[data-pl-modal] .modal-body>*{flex-shrink:0;min-width:0;}
.pl-cat-list{max-height:min(260px,34vh);overflow-y:auto;overscroll-behavior:contain;border:1px solid var(--border);border-radius:var(--radius);padding:0 12px;}
.pl-cat-list .empty-state-sm{padding:14px 0;}
.pl-subform .form-grid{min-width:0;}
.pl-subform input,.pl-subform select{max-width:100%;min-width:0;}
@media (max-width:560px){ [data-pl-modal] .form-grid{grid-template-columns:1fr;} }

.pl-timing{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;grid-column:1/-1;}
@media (max-width:560px){ .pl-timing{grid-template-columns:1fr 1fr;} .pl-timing .field:last-child{grid-column:1/-1;} }
.pl-wrap input[type=number],[data-pl-modal] input[type=number]{width:100%;border:1px solid var(--border-strong);background:var(--surface);color:var(--text);border-radius:var(--radius-sm);padding:10px 12px;font-size:13.5px;outline:none;font-family:inherit;}
.pl-wrap input[type=number]:focus,[data-pl-modal] input[type=number]:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft);}

/* ---------- Jornada laboral ---------- */
.pl-wrap{--k1:#2a78d6;--k1s:#e5effb;--k2:#6250d6;--k2s:#ece9fb;--k3:#eb6834;--k3s:#fdeee7;}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .pl-wrap{--k1:#3987e5;--k1s:#15283d;--k2:#9085e9;--k2s:#211d3d;--k3:#d95926;--k3s:#33201a;}}
:root[data-theme="dark"] .pl-wrap{--k1:#3987e5;--k1s:#15283d;--k2:#9085e9;--k2s:#211d3d;--k3:#d95926;--k3s:#33201a;}
.pl-cap{display:grid;gap:14px;margin-top:14px;grid-column:1/-1;}
.pl-meter{display:flex;height:16px;border-radius:99px;overflow:hidden;background:var(--surface-2);border:1px solid var(--border);}
.pl-meter i{display:block;height:100%;}
.pl-meter .u{background:var(--accent);} .pl-meter .u.warn{background:var(--warning);} .pl-meter .u.bad{background:var(--danger);}
.pl-meter .f{background:var(--accent-soft);}
.pl-legend .pl-sw.k1{background:var(--k1);} .pl-legend .pl-sw.k2{background:var(--k2);} .pl-legend .pl-sw.k3{background:var(--k3);}
.pl-legend .pl-sw.off{background:var(--text-faint);}
.pl-shift .pl-sw.k1{background:var(--k1);} .pl-shift .pl-sw.k2{background:var(--k2);} .pl-shift .pl-sw.k3{background:var(--k3);}
.pl-issue{border-radius:8px;padding:9px 12px;font-size:13px;display:flex;gap:10px;align-items:flex-start;flex-wrap:wrap;}
.pl-issue.soft{background:var(--warning-soft);color:var(--warning);}
.pl-issue.hard{background:var(--danger-soft);color:var(--danger);}
.pl-issue.ok{background:var(--success-soft);color:var(--success);}
.pl-issue ul{margin:0 0 4px;padding-left:18px;}
.btn.btn-warning{background:var(--warning);border-color:var(--warning);color:#1b1300;}
.btn[disabled]{opacity:.5;cursor:not-allowed;}
.pl-tl{position:relative;height:74px;margin-top:6px;}
.pl-tl .axis{position:absolute;left:0;right:0;top:34px;height:28px;background:var(--surface-2);border:1px solid var(--border);border-radius:6px;}
.pl-tl .tick{position:absolute;top:62px;transform:translateX(-50%);font-family:var(--font-mono);font-size:10.5px;color:var(--text-faint);white-space:nowrap;}
.pl-tl .grid{position:absolute;top:34px;height:28px;width:1px;background:var(--border);}
.pl-tl .blk{position:absolute;top:36px;height:24px;border-radius:5px;background:var(--accent);color:var(--surface);font-size:11px;padding:3px 6px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;border:1px solid var(--surface);}
.pl-tl .blk[data-drag]{cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none;transition:box-shadow .12s;}
.pl-tl .blk[data-drag]:hover{box-shadow:0 0 0 2px var(--accent-soft);}
.pl-tl .blk[data-drag]:focus-visible{outline:2px solid var(--text);outline-offset:1px;}
.pl-tl .blk.drag{cursor:grabbing;z-index:5;box-shadow:0 8px 18px rgba(0,0,0,.35);transition:none;opacity:.94;}
.pl-tl .blk.drop{outline:2px dashed var(--text);outline-offset:2px;}
.pl-tl .blk.closed{opacity:.55;}
.pl-dragh{margin-top:18px;font-size:12px;}
.pl-tl .blk.cand{background:repeating-linear-gradient(135deg,var(--warning),var(--warning) 5px,var(--warning-soft) 5px,var(--warning-soft) 10px);color:var(--text);}
.pl-tl .blk.cand.bad{background:repeating-linear-gradient(135deg,var(--danger),var(--danger) 5px,var(--danger-soft) 5px,var(--danger-soft) 10px);}
.pl-tl .mid{position:absolute;top:22px;bottom:0;border-left:2px dashed var(--k2);}
.pl-tl .midl{position:absolute;top:2px;transform:translateX(-50%);font-size:11px;color:var(--k2);font-weight:600;white-space:nowrap;}
.pl-scroll{overflow-x:auto;}
table.pl-wk{border-collapse:separate;border-spacing:0;width:100%;min-width:820px;}
table.pl-wk th,table.pl-wk td{padding:8px;border-bottom:1px solid var(--border);vertical-align:top;text-align:left;}
table.pl-wk thead th{font-family:var(--font-display);font-size:14px;font-weight:700;background:var(--surface-2);}
table.pl-wk thead th small{display:block;font-family:var(--font-body);font-weight:400;color:var(--text-faint);font-size:11.5px;}
table.pl-wk thead th.today{box-shadow:inset 0 -3px 0 var(--accent);}
table.pl-wk th.person{min-width:150px;width:170px;}
table.pl-wk td.person b{display:block;}
table.pl-wk td.person span{color:var(--text-faint);font-size:12px;}
.pl-cell{display:flex;flex-direction:column;gap:2px;width:100%;min-height:58px;text-align:left;border:1px solid var(--border-strong);border-radius:8px;padding:6px 8px;background:var(--surface);cursor:pointer;position:relative;}
.pl-cell:hover:not(:disabled){border-color:var(--text-muted);}
.pl-cell:disabled{cursor:default;}
.pl-cell[aria-pressed="true"]{outline:2px solid var(--accent);outline-offset:1px;}
.pl-cell b{font-size:12.5px;font-weight:700;line-height:1.2;}
.pl-cell .h{font-family:var(--font-mono);font-size:11.5px;}
.pl-cell .n{font-size:11.5px;color:var(--text-muted);}
.pl-cell.k1{background:var(--k1s);border-color:transparent;} .pl-cell.k1 b{color:var(--k1);}
.pl-cell.k2{background:var(--k2s);border-color:transparent;} .pl-cell.k2 b{color:var(--k2);}
.pl-cell.k3{background:var(--k3s);border-color:transparent;} .pl-cell.k3 b{color:var(--k3);}
.pl-cell.off{background:repeating-linear-gradient(135deg,var(--surface-2),var(--surface-2) 6px,var(--surface) 6px,var(--surface) 12px);justify-content:center;}
.pl-cell.off b{color:var(--text-faint);font-weight:500;}
.pl-cell .ov{position:absolute;top:6px;right:6px;width:8px;height:8px;border-radius:50%;background:var(--warning);}
.pl-editor{border:1px solid var(--border-strong);border-radius:10px;background:var(--surface-2);padding:14px;display:grid;gap:12px;}
.pl-ed-t{font-family:var(--font-display);font-size:16px;}
.pl-pick{display:flex;gap:8px;flex-wrap:wrap;}
.pl-pick button{border:1px solid var(--border-strong);background:var(--surface);border-radius:8px;padding:8px 12px;cursor:pointer;text-align:left;min-width:150px;}
.pl-pick button b{display:block;font-size:13px;}
.pl-pick button span{font-family:var(--font-mono);font-size:11.5px;color:var(--text-muted);}
.pl-pick button[aria-pressed="true"]{outline:2px solid var(--accent);outline-offset:1px;background:var(--accent-soft);}
.pl-shifts{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:12px;}
.pl-shift{border:1px solid var(--border);border-radius:10px;padding:14px;background:var(--surface);display:flex;flex-direction:column;gap:8px;min-width:0;}
.pl-shift h4{margin:0;font-family:var(--font-display);font-size:16px;display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.pl-calc{display:grid;grid-template-columns:1fr auto;gap:2px 12px;font-size:13px;}
.pl-calc span:nth-child(odd){color:var(--text-muted);}
.pl-calc span:nth-child(even){font-family:var(--font-mono);text-align:right;}
.pl-calc .tot{font-weight:700;border-top:1px solid var(--border);padding-top:4px;margin-top:2px;color:var(--text);}
.pl-ubar{display:grid;grid-template-columns:200px 1fr 210px;gap:12px;align-items:center;padding:10px 16px;border-bottom:1px solid var(--border);}
.pl-ubar:last-of-type{border-bottom:0;}
.pl-ubar b{display:block;}
.pl-ubar .val{text-align:right;font-family:var(--font-mono);font-size:12.5px;}
@media (max-width:640px){.pl-ubar{grid-template-columns:1fr;gap:6px}.pl-ubar .val{text-align:left}}
.pl-wrap .card-head select{width:auto;max-width:100%;}

/* ---------- buscador de actividades ---------- */
.pl-combo{position:relative;}
.pl-combo input{padding-right:40px;}
.pl-cb-btn{position:absolute;right:4px;top:4px;width:32px;height:32px;border:0;background:none;color:var(--text-muted);border-radius:6px;cursor:pointer;display:grid;place-items:center;}
.pl-cb-btn:hover{background:var(--surface-2);color:var(--text);}
.pl-cb-list{position:absolute;left:0;right:0;top:calc(100% + 4px);z-index:40;max-height:min(340px,50vh);overflow-y:auto;overscroll-behavior:contain;background:var(--surface);border:1px solid var(--border-strong);border-radius:10px;box-shadow:var(--shadow-lg);padding:4px;}
.pl-cb-list[hidden]{display:none;}
.pl-cb-grp{padding:8px 10px 4px;font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:var(--text-faint);font-weight:700;}
.pl-cb-opt{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:8px;cursor:pointer;}
.pl-cb-opt.on,.pl-cb-opt:hover{background:var(--accent-soft);}
.pl-cb-main{display:flex;flex-direction:column;min-width:0;flex:1;}
.pl-cb-main b{font-weight:600;overflow-wrap:anywhere;}
.pl-cb-main mark{background:var(--warning-soft);color:inherit;border-radius:3px;padding:0 1px;}
.pl-cb-sub{font-size:12px;color:var(--text-muted);font-family:var(--font-mono);}
.pl-cb-fit{font-size:11.5px;font-weight:700;border-radius:99px;padding:2px 9px;white-space:nowrap;}
.pl-cb-fit.ok{background:var(--success-soft);color:var(--success);}
.pl-cb-fit.no{background:var(--warning-soft);color:var(--warning);}
.pl-cb-empty{display:flex;flex-direction:column;gap:6px;align-items:flex-start;padding:12px;color:var(--text-muted);font-size:13px;}
.pl-cb-empty b{color:var(--text);}
.pl-cb-foot{border-top:1px solid var(--border);margin-top:4px;padding:8px 6px 4px;}

.pl-filters{display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px 14px;padding:12px 16px;border-bottom:1px solid var(--border);background:var(--surface-2,transparent);}
.pl-fl{display:grid;gap:4px;min-width:150px;flex:0 1 200px;}
.pl-fl span{font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--text-muted,var(--text));opacity:.75;}
.pl-fl select,.pl-fl input{width:100%;}
/* Registro: filtros en una sola barra y tabla con scroll propio (encabezado fijo) */
.pl-regbar .pl-fl{flex:1 1 150px;max-width:230px;}
.pl-regscroll{overflow:auto;overscroll-behavior:contain;max-height:max(280px, calc(100vh - 330px));max-height:max(280px, calc(100dvh - 330px));}
.pl-regscroll thead th{position:sticky;top:0;z-index:2;background:var(--surface-2,var(--surface));box-shadow:0 1px 0 var(--border);}
.pl-regscroll .pl-th-n{width:1%;}
.pl-regscroll td .pl-num{min-width:26px;height:26px;}
.pl-fl-count{margin-left:auto;font-size:12.5px;opacity:.75;align-self:center;}
@media(max-width:600px){.pl-fl{flex:1 1 calc(50% - 8px);min-width:0}.pl-fl-count{margin-left:0;flex-basis:100%}}

.pl-wrap input[type=time],.pl-wrap input[type=date],[data-pl-modal] input[type=time],.pl-ov input[type=time]{cursor:pointer}
.pl-wrap input[type=time]::-webkit-calendar-picker-indicator,.pl-wrap input[type=date]::-webkit-calendar-picker-indicator{cursor:pointer;opacity:.8}


.pl-act.has-note{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr) auto;}
.pl-note{padding:8px 12px;border:1px solid var(--border);border-left:3px solid var(--accent);background:var(--surface-2,rgba(127,127,127,.08));border-radius:8px;font-size:13.5px;line-height:1.45;overflow-wrap:anywhere;white-space:pre-wrap;align-self:stretch;}
.pl-note b{display:block;font-size:11px;letter-spacing:.05em;text-transform:uppercase;opacity:.7;margin-bottom:2px;}
@media (max-width:900px){.pl-act.has-note{grid-template-columns:1fr auto;}.pl-act.has-note .pl-note{grid-column:1/-1;order:3;}}
@media (max-width:560px){.pl-act.has-note{grid-template-columns:1fr;}.pl-act.has-note .pl-note{order:0;}}

/* catálogo: tabla + ventana de formulario */
.pl-cat-bar{display:flex;flex-wrap:wrap;gap:10px 12px;align-items:flex-end;}
.pl-cat-bar .field{min-width:150px;}
.pl-cat-bar h4{margin:0;align-self:center;}
.pl-cat-list{max-height:min(380px,48vh);padding:0;}
.pl-tw{overflow-x:auto;}
.pl-cat-tbl{border-collapse:collapse;width:100%;min-width:620px;font-size:13.5px;}
.pl-cat-tbl th{position:sticky;top:0;background:var(--surface-2);font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--text-muted);text-align:left;padding:8px 12px;border-bottom:1px solid var(--border);}
.pl-cat-tbl td{padding:9px 12px;border-bottom:1px solid var(--border);vertical-align:top;}
.pl-cat-tbl tr:last-child td{border-bottom:0;}
.pl-cat-tbl .nw{white-space:nowrap;}
.pl-cat-tbl.simple{min-width:0;}
.pl-ov{position:fixed;inset:0;z-index:3000;background:rgba(9,15,20,.6);display:grid;place-items:center;padding:16px;}
.pl-ovbox{background:var(--surface);color:var(--text);border:1px solid var(--border);border-radius:14px;width:min(640px,100%);max-height:calc(100% - 8px);display:flex;flex-direction:column;box-shadow:0 24px 60px rgba(0,0,0,.35);min-height:0;}
.pl-ovform{display:flex;flex-direction:column;min-height:0;max-height:100%;}
.pl-ovform .modal-body{overflow:auto;display:grid;gap:14px;min-height:0;}
.pl-ovsub{display:block;font-weight:400;font-size:12.5px;color:var(--text-muted);}
.pl-ovfoot{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap;padding:12px 18px;border-top:1px solid var(--border);}
.pl-delp{margin:0 0 10px;line-height:1.45;}
.pl-gaplist{list-style:none;margin:0;padding:0;display:grid;gap:8px;max-height:min(46vh,320px);overflow:auto;}
.pl-gaplist li{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 12px;padding:9px 12px;border:1px solid var(--border);border-radius:var(--radius-sm,10px);background:var(--surface-2);}
.pl-gaplist li>b{min-width:0;overflow-wrap:anywhere;}
.pl-gaprow{display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap;color:var(--text-muted);}
.pl-chip.pl-new{border-color:var(--accent);color:var(--text);font-weight:700;background:var(--accent-soft);}
@media (max-width:480px){#pl-del-ov .pl-ovfoot .btn{flex:1 1 100%;justify-content:center;}#pl-del-ov .pl-ovfoot .btn-primary{order:-1;}}

button.pl-pickrow{width:100%;text-align:left;font:inherit;color:inherit;background:transparent;border:0;border-bottom:1px solid var(--border);cursor:pointer;}
button.pl-pickrow:hover{background:var(--surface-2);}
button.pl-pickrow.on{background:var(--accent-soft);box-shadow:inset 3px 0 0 var(--accent);}
button.pl-pickrow:focus-visible{outline:2px solid var(--accent);outline-offset:-2px;}
.pl-pickrow .val{text-align:right;}
.pl-over{color:var(--danger);}

/* Planificación: disponibilidad a la izquierda, formulario a la derecha */
.pl-split{display:grid;grid-template-columns:minmax(0,1fr);gap:14px;align-items:start;}
.pl-team .card-head{padding:10px 14px;gap:8px;}
.pl-team .card-head h3{font-size:14px;}
.pl-team-filter{display:flex;gap:8px;padding:8px 12px;border-bottom:1px solid var(--border);}
.pl-team-filter select{width:auto;max-width:45%;}
.pl-team-filter input{flex:1;min-width:0;}
.pl-team-filter select,.pl-team-filter input{padding:6px 9px;font-size:13px;}
.pl-team-list{max-height:220px;overflow-y:auto;overscroll-behavior:contain;}
.pl-team-foot{padding:8px 14px;font-size:12px;border-top:1px solid var(--border);}
.pl-trow{display:grid;gap:5px;width:100%;text-align:left;font:inherit;color:inherit;background:transparent;border:0;border-bottom:1px solid var(--border);padding:9px 14px;cursor:pointer;}
.pl-trow:last-child{border-bottom:0;}
.pl-trow:hover{background:var(--surface-2);}
.pl-trow.on{background:var(--accent-soft);box-shadow:inset 3px 0 0 var(--accent);}
.pl-trow:focus-visible{outline:2px solid var(--accent);outline-offset:-2px;}
.pl-trow-top{display:flex;justify-content:space-between;gap:8px;align-items:baseline;}
.pl-trow-name{overflow-wrap:anywhere;}
.pl-trow-val{white-space:nowrap;font-size:12.5px;}
.pl-trow-sub{font-size:11.5px;}
.pl-meter.slim{display:block;height:6px;}
@media (min-width:1180px){
  .pl-split{grid-template-columns:340px minmax(0,1fr);}
  .pl-side{position:sticky;top:0;}
  .pl-team-list{max-height:calc(100vh - 330px);min-height:180px;}
}
/* formulario compacto: cabe sin bajar la pantalla */
.pl-compactform .form-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px 12px;}
.pl-compactform .form-grid .span2{grid-column:1/-1;}
.pl-compactform textarea{min-height:0;}
.pl-compactform .pl-timing{gap:12px;}
.pl-compactform .pl-cap{margin-top:10px;gap:10px;}
.pl-compactform .pl-kpis{gap:8px;}
.pl-compactform .pl-kpi{padding:8px 10px;}
.pl-compactform .pl-kpi b{font-size:18px;}
.pl-compactform .pl-legend{display:none;}
.pl-compactform .pl-tl{transform-origin:top;}
@media (max-width:640px){
  .pl-compactform .form-grid{grid-template-columns:1fr 1fr;}
  .pl-compactform .form-grid>.field:not(.span2){grid-column:auto;}
  .pl-compactform .pl-kpi small{display:none;}
}
.pl-compactform{padding-block:12px;}
.pl-compactform textarea{height:44px;resize:vertical;}
.pl-compactform .pl-kpi small{display:none;}
.pl-compactform .pl-kpi{padding:6px 10px;}
.pl-compactform .pl-kpi b{font-size:17px;}
.pl-compactform .pl-cap{gap:8px;margin-top:8px;}
.pl-compactform .pl-tl{height:62px;margin-top:2px;}
.pl-compactform .pl-cap h4,.pl-compactform .pl-cap .pl-tlh{margin:0;font-size:13px;}
.pl-compactform .pl-issue{padding:7px 10px;}
.pl-compactform .pl-row[style]{margin-top:10px !important;}
.pl-compactform .field label{margin-bottom:2px;}
/* Catálogo: ventana de tamaño fijo; solo la lista se desplaza */
[data-pl-modal]{height:min(640px,calc(100vh - 96px));height:min(640px,calc(100dvh - 96px));}
[data-pl-modal] .modal-body{flex:1 1 auto;min-height:0;overflow:hidden;}
[data-pl-modal] .pl-cat-list{flex:1 1 auto;max-height:none;min-height:120px;}
[data-pl-modal] .pl-cat-tbl th{z-index:1;}
/* Catálogo en celular: cada fila pasa a ser una tarjeta */
@media (max-width:640px){
  .pl-cat-tbl{min-width:0;display:block;}
  .pl-cat-tbl thead{display:none;}
  .pl-cat-tbl tbody{display:block;}
  .pl-cat-tbl tr{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 10px;padding:10px 12px;border-bottom:1px solid var(--border);}
  .pl-cat-tbl tr:last-child{border-bottom:0;}
  .pl-cat-tbl td{display:block;padding:0;border:0;}
  .pl-cat-tbl .c-t{grid-column:1;grid-row:1;}
  .pl-cat-tbl .c-a{grid-column:2;grid-row:1 / span 3;align-self:start;}
  .pl-cat-tbl .c-h{grid-column:1;grid-row:2;font-size:12.5px;white-space:normal;}
  .pl-cat-tbl .c-r{grid-column:1;grid-row:3;font-size:12.5px;color:var(--text-muted);}
  .pl-cat-tbl .c-p{grid-column:1;grid-row:4;font-size:12px;color:var(--text-muted);}
  .pl-cat-tbl.simple .c-k{grid-column:1;grid-row:1;}
  .pl-cat-tbl.simple .c-t{grid-column:1;grid-row:2;}
  .pl-cat-tbl.simple .c-a{grid-row:1 / span 2;}
  .pl-tw{overflow-x:visible;}
}

/* ---- ajustes de celular ---- */
@media (max-width:640px){
  .pl-wrap td>.pl-hint{margin-left:6px;}
  .pl-cat-tbl td>.pl-hint{margin-left:0;}
  .pl-compactform .form-grid>.field.pl-f-user{grid-column:1 / -1;}
  .pl-regbar{padding:10px 12px;gap:8px 10px;}
  .pl-regbar .pl-fl{flex:1 1 calc(50% - 6px);min-width:0;max-width:none;}
  .pl-regbar .pl-fl input,.pl-regbar .pl-fl select{min-width:0;}
  .pl-regbar .pl-fl-count{flex-basis:100%;}
  .pl-regscroll tbody td .pl-hint{font-weight:400;margin-left:0;}
  .pl-regscroll tbody td.pl-empty{display:none;}
  /* Registro en celular: cada fila es una tarjeta compacta (número, fecha, actividad, persona, estado) */
  .pl-regscroll tbody tr{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:3px 10px;align-items:start;padding:10px 12px;}
  .pl-regscroll tbody td{display:block;padding:0;border:0;min-width:0;}
  .pl-regscroll tbody td:nth-child(1){grid-column:1;grid-row:1 / span 2;}
  .pl-regscroll tbody td:nth-child(2){grid-column:2;grid-row:1;font-size:12.5px;color:var(--text-muted);}
  .pl-regscroll tbody td:nth-child(3){grid-column:2;grid-row:3;}
  .pl-regscroll tbody td:nth-child(4){grid-column:2;grid-row:2;font-weight:600;}
  .pl-regscroll tbody td:nth-child(5){grid-column:2;grid-row:4;}
  .pl-regscroll tbody td:nth-child(6){grid-column:2;grid-row:5;}
  .pl-regscroll tbody td:nth-child(7){grid-column:3;grid-row:1 / span 2;}
  /* grilla semanal: persona fija a la izquierda y días más angostos */
  table.pl-wk{min-width:640px;}
  table.pl-wk th.person{min-width:92px;width:92px;position:sticky;left:0;z-index:2;background:var(--surface-2);}
  table.pl-wk td.person{position:sticky;left:0;z-index:1;background:var(--surface);padding:8px 6px;box-shadow:1px 0 0 var(--border);}
  table.pl-wk td.person b{font-size:13px;overflow-wrap:anywhere;}
  table.pl-wk td.person span{font-size:11px;}
  table.pl-wk th,table.pl-wk td{padding:6px 4px;}
  table.pl-wk thead th{font-size:12.5px;}
  .pl-cell{min-height:50px;padding:5px 6px;font-size:12px;}
}

.pl-sepx{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:pre;}

.pl-suplist{display:grid;}
.pl-suprow{display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;padding:12px 16px;border-bottom:1px solid var(--border);}
.pl-suprow>b{min-width:130px;}
.pl-supchk{display:flex;flex-wrap:wrap;gap:8px 16px;}
.pl-supchk label{display:flex;align-items:center;gap:6px;cursor:pointer;}
@media (max-width:640px){
  .pl-compactform .pl-kpis{grid-template-columns:repeat(3,minmax(0,1fr));}
  .pl-compactform .pl-kpi b{font-size:14px;}
  .pl-compactform .pl-kpi span{font-size:10.5px;}
}

.pl-legend{align-items:center;}
.pl-legend-btn{margin-left:auto;}
@media (max-width:640px){.pl-legend-btn{margin-left:0;width:100%;}}

.pl-fbar{display:flex;align-items:center;gap:10px;padding:10px 16px;border-bottom:1px solid var(--border);flex-wrap:wrap;}
.pl-fbar .pl-fl-count{margin-left:auto;font-size:12.5px;opacity:.75;}
.pl-actscroll{overflow-y:auto;overscroll-behavior:contain;max-height:max(240px, calc(100vh - 600px));max-height:max(240px, calc(100dvh - 600px));}
@media (max-width:640px){
  .pl-fbar{padding:8px 12px;flex-wrap:nowrap;gap:8px;}
  .pl-fbar .pl-fl-count{white-space:nowrap;font-size:12px;}
  .pl-actscroll{max-height:max(220px, calc(100dvh - 500px));}
  .pl-strip{grid-template-columns:repeat(3,1fr);gap:6px;}
  .pl-strip .pl-mini{padding:6px 8px;}
  .pl-strip .pl-mini span{font-size:10.5px;}
  .pl-strip .pl-mini b{font-size:18px;}
}

/* Actividades del día en pantalla completa */
.pl-daycard.pl-full{position:fixed;inset:0;z-index:120;margin:0;border-radius:0;border:none;display:flex;flex-direction:column;background:var(--surface);padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom);}
.pl-daycard.pl-full .card-head{flex-shrink:0;}
.pl-daycard.pl-full .pl-actscroll{flex:1 1 auto;min-height:0;max-height:none;}
html.pl-day-full{overflow:hidden;}

.pl-fullx{display:none;}
.pl-daycard.pl-full{padding-top:calc(22px + env(safe-area-inset-top));}
.pl-daycard.pl-full .card-head{flex-wrap:nowrap;gap:8px;}
.pl-daycard.pl-full .card-head h3{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.pl-daycard.pl-full .card-head [data-pl=day-full]:not(.pl-fullx){flex-shrink:0;white-space:nowrap;}
@media (max-width:640px){
  .pl-daycard.pl-full .card-head .pl-hint{display:none;}
  .pl-daycard.pl-full .card-head{padding-right:14px;}
  .pl-fullx{display:flex;align-items:center;justify-content:center;position:fixed;right:16px;bottom:calc(18px + env(safe-area-inset-bottom));z-index:130;width:52px;height:52px;border-radius:50%;border:none;background:var(--accent);color:var(--accent-contrast,#fff);font-size:22px;font-weight:700;box-shadow:var(--shadow-lg);cursor:pointer;}
}

/* En pantalla completa se oculta el pie de accesos directos (celular) para que no tape nada */
body:has(.pl-daycard.pl-full) .bottom-nav{display:none !important;}
body:has(.pl-daycard.pl-full) #qdock{display:none !important;}
.pl-fullx{z-index:200 !important;}
.pl-daycard.pl-full{z-index:190;}

/* Tiempo disponible: plegable en pantallas angostas para que el formulario quepa */
.pl-team-tg{display:none;}
@media (max-width:1179px){
  .pl-team-tg{display:inline-flex;}
  .pl-team .pl-team-body{display:none;}
  .pl-team.open .pl-team-body{display:block;}
  .pl-team .card-head{border-bottom:0;}
  .pl-team.open .card-head{border-bottom:1px solid var(--border);}
}
@media (max-width:640px){
  .pl-team .card-head .pl-seg{display:none;}
  .pl-team.open .card-head .pl-seg{display:inline-flex;}
  .pl-team .card-head .pl-hint{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:46vw;}
}

/* ============ TEMA CLÍNICO (v2026101381) ============
   Solo apariencia: tipografía (Inter), bordes y radios. No cambia ninguna
   función, dato ni estructura.
   v2026101473: los COLORES del modo claro y oscuro vuelven a ser los originales del sistema
   (bloque TOKENS de arriba, igual que en RESPALDO-DISENO-ANTERIOR-v2026101374). Aquí ya no se
   redefine ningún color. */
:root{
  --shadow-sm:0 1px 2px rgba(16,24,40,.06);
  --shadow:0 1px 2px rgba(16,24,40,.06), 0 8px 24px -12px rgba(16,24,40,.18);
  --shadow-lg:0 20px 48px -16px rgba(16,24,40,.35);
  --radius-sm:8px;--radius:12px;--radius-lg:16px;
  --font-display:'Inter',system-ui,sans-serif;
  --font-body:'Inter',system-ui,sans-serif;
  --font-mono:'IBM Plex Mono',ui-monospace,'SFMono-Regular',monospace;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --shadow-sm:0 1px 2px rgba(0,0,0,.4);--shadow:0 1px 2px rgba(0,0,0,.3), 0 10px 28px -14px rgba(0,0,0,.6);
    --shadow-lg:0 20px 60px -20px rgba(0,0,0,.7);
  }
}
:root[data-theme="dark"]{
  --shadow-sm:0 1px 2px rgba(0,0,0,.4);--shadow:0 1px 2px rgba(0,0,0,.3), 0 10px 28px -14px rgba(0,0,0,.6);
  --shadow-lg:0 20px 60px -20px rgba(0,0,0,.7);
}
body{font-size:14.5px;}
h1,h2,h3,h4{font-weight:700;letter-spacing:-.015em;}
.topbar h1{font-size:21px;font-weight:700;}
.card{border-radius:14px;}
.kpi .lbl{text-transform:uppercase;letter-spacing:.06em;font-size:11px;}
.kpi .val{font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums;}
.btn{border-radius:10px;font-weight:600;}
.btn-sm{border-radius:8px;}
input[type=text],input[type=password],input[type=number],input[type=date],input[type=month],input[type=search],select,textarea{
  border-radius:10px;border-color:var(--border-strong);
}
input:focus,select:focus,textarea:focus{border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-soft);}
.suggest-list{border-radius:12px;}
.suggest-list.floating{box-shadow:0 16px 36px rgba(16,24,40,.18);}
.suggest-item{min-height:48px;}
.pill{font-weight:600;}
thead th{letter-spacing:.06em;}
.tab.active{color:var(--accent-strong);border-color:var(--accent);}
.modal-panel{border-radius:16px;}
/* «Ingresa la cantidad» después de leer un código con la cámara (Ingresos, Salidas, Mi Departamento y
   Solicitudes usan esta misma capa): tarjeta centrada sobre un fondo oscuro que tapa la cámara pausada,
   en vez de una hoja desde abajo que dejaba a la vista la imagen congelada y el texto «Scanner paused». */
#cqpCameraLayer{background:rgba(5,9,13,.95);align-items:center;justify-content:center;padding:20px;}
#cqpCameraLayer .modal-panel{width:100%;max-width:420px;max-height:90vh;max-height:90dvh;border-radius:20px;padding-bottom:0;}
#cqpCameraLayer .modal-head{padding-top:16px;}
#cqpCameraLayer .modal-head::before{display:none;}
.update-banner{border-radius:16px;}
.msg.me .bubble{background:var(--accent);color:#fff;}
@media (max-width:860px){
  .bottom-nav .bn-item.active{background:color-mix(in srgb, var(--accent) 16%, transparent);}
  .bottom-nav .bn-item.active .icon{color:var(--accent-strong);}
}

:root{--ink:var(--border);}

/* Resumen (KPIs) plegable en celular */
.kpi-wrap .kpi-toggle{display:none;}
@media (max-width:860px){
  .kpi-wrap{margin-bottom:8px;}
  .kpi-wrap .kpi-toggle{display:flex;align-items:center;gap:8px;width:100%;min-height:56px;padding:6px 10px 6px 12px;background:var(--surface);color:var(--text);border:2px solid var(--ink);border-radius:var(--radius);text-align:left;}
  .kpi-wrap .kpi-mini{flex:1;min-width:0;display:flex;justify-content:space-between;gap:6px;}
  .kpi-wrap .kpi-mini-i{display:flex;flex-direction:column;min-width:0;flex:0 1 auto;}
  .kpi-wrap .kpi-mini-i b{font-family:var(--font-display);font-size:18px;font-weight:800;line-height:1.1;letter-spacing:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .kpi-wrap .kpi-mini-i b .kpi-u{font-size:10px;font-weight:700;color:var(--text-muted);letter-spacing:.02em;}
  .kpi-wrap .kpi-mini-i i{font-style:normal;font-size:9.5px;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:.02em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .kpi-wrap .kpi-mini-i.is-danger b{color:var(--danger);}
  .kpi-wrap .kpi-title{display:none;flex:1;font-family:var(--font-display);font-size:17px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;}
  .kpi-wrap .kpi-chev{flex-shrink:0;transition:transform .15s ease;}
  .kpi-wrap[data-open="0"] .kpi-row{display:none;}
  .kpi-wrap[data-open="1"] .kpi-mini{display:none;}
  .kpi-wrap[data-open="1"] .kpi-title{display:block;}
  .kpi-wrap[data-open="1"] .kpi-chev{transform:rotate(180deg);}
  .kpi-wrap[data-open="1"] .kpi-row{margin-top:8px;}
}

.btn.btn-warning{background:#f5b94a;border-color:#f5b94a;color:#1b1300;}
.kpi-wrap .kpi-toggle{border-width:1px !important;border-color:var(--border) !important;}
@media (max-width:860px){
  .kpi-wrap .kpi-toggle{border:1px solid var(--border);border-radius:14px;}
  .kpi-wrap .kpi-title{font-family:var(--font-display);text-transform:none;letter-spacing:-.01em;font-size:16px;font-weight:700;}
  .kpi-wrap .kpi-mini-i b{font-weight:700;font-variant-numeric:tabular-nums;}
}

/* El menú lateral oculto (fuera de pantalla en celular) no debe proyectar sombra hacia adentro. */
.sidebar:not(.open){box-shadow:none !important;}
@media (max-width:860px){
  .sidebar.open{box-shadow:var(--shadow-lg);}
}

/* Actividades del día: semana + chips de día + resumen (mismo diseño del Menú Semanal) */
.pl-weekbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:10px;}
.pl-weekbar .btn-icon{min-width:44px;min-height:44px;font-size:20px;line-height:1;}
.pl-weeklbl{display:flex;flex-direction:column;min-width:110px;text-align:center;}
.pl-weeklbl b{font-size:16px;color:var(--text);}
.pl-weeklbl span{font-size:12px;color:var(--text-muted);}
.pl-days{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px;margin-bottom:10px;}
.pl-dchip{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;min-height:60px;padding:6px 2px;border:1.5px solid var(--border-strong);border-radius:var(--radius);background:var(--surface);color:var(--text);cursor:pointer;font-family:inherit;}
.pl-dchip span{font-size:11px;font-weight:700;color:var(--text-muted);letter-spacing:.04em;}
.pl-dchip b{font-size:19px;line-height:1.1;}
.pl-dchip.today span{color:var(--accent-strong);}
.pl-dchip.active{background:var(--accent);border-color:var(--accent);color:var(--accent-contrast);}
.pl-dchip.active span{color:var(--accent-contrast);opacity:.85;}
.pl-dot{width:8px;height:8px;border-radius:50%;display:block;margin-top:2px;background:var(--border-strong);}
.pl-dot.ok{background:var(--success);}.pl-dot.camino{background:var(--info);}.pl-dot.falta{background:var(--danger);}
.pl-dot.none{background:transparent;border:1.5px solid var(--border-strong);box-sizing:border-box;}
.pl-dchip.active .pl-dot.none{border-color:var(--accent-contrast);}
.pl-dchip.active .pl-dot{box-shadow:0 0 0 2px var(--accent-contrast);}
.pl-sumcard{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));text-align:center;gap:4px;padding:12px 6px;margin-bottom:10px;border:1.5px solid var(--border-strong);border-radius:var(--radius);background:var(--surface);}
.pl-sumcard span{display:block;font-size:12px;color:var(--text-muted);}
.pl-sumcard b{display:block;font-size:24px;line-height:1.25;}
.pl-sumcard b.good{color:var(--success);}.pl-sumcard b.warn{color:var(--warning);}.pl-sumcard b.bad{color:var(--danger);}
.pl-dayhead{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;margin:14px 0 8px;}
.pl-dayhead h3{margin:0;font-size:20px;}
@media (max-width:640px){.pl-days{gap:4px;}.pl-dchip{min-height:58px;}.pl-sumcard b{font-size:22px;}}

.pl-jmobile{display:none;}
@media (max-width:720px){.pl-jmobile{display:block;}.pl-jtable{display:none;}.pl-only-pc{display:none;}}
@media (min-width:721px){.pl-only-m{display:none;}}
.pl-jrow{display:flex;justify-content:space-between;align-items:center;gap:10px;width:100%;padding:12px 14px;border:0;border-bottom:1px solid var(--border);background:var(--surface);text-align:left;cursor:pointer;font-family:inherit;color:var(--text);}
.pl-jrow:last-child{border-bottom:0;}
.pl-jrow[aria-pressed="true"]{background:var(--accent-soft);}
.pl-jrow b{font-size:16px;display:block;}.pl-jrow small{font-size:12.5px;color:var(--text-muted);}
.pl-jrow .rt{text-align:right;flex-shrink:0;}
.pl-jtag{display:inline-block;padding:3px 9px;border-radius:8px;font-weight:800;font-size:12px;background:var(--surface-2);color:var(--text-muted);}
.pl-jtag.k1{background:var(--k1s);color:var(--k1);}.pl-jtag.k2{background:var(--k2s);color:var(--k2);}.pl-jtag.k3{background:var(--k3s);color:var(--k3);}

/* Pestañas de Planificación: una sola fila (sin bajar de línea); si no caben, se desliza hacia el costado */
.pl-wrap>.tabs{flex-wrap:nowrap !important;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-webkit-overflow-scrolling:touch;gap:2px;}
.pl-wrap>.tabs::-webkit-scrollbar{display:none;}
@media (min-width:1120px){.pl-wrap>.tabs{overflow:visible;}}
@media (max-width:1119px){.pl-wrap>.tabs .tab{margin-bottom:0 !important;}}
.pl-wrap>.tabs .tab{flex:0 0 auto;white-space:nowrap;padding:10px 12px !important;font-size:13px !important;letter-spacing:.02em !important;}

/* Revisar solicitud (celular): Disp. Almacén | Solicitado | Despachar en 3 columnas (mismo reparto 1 : 1 : 1,25), así los campos quedan alineados en vertical.
   Cada columna nunca mide menos que su cifra (max-content): antes, con columnas minmax(0,…), una cifra larga (ej. 37.927,79) se montaba sobre la columna de al lado y quedaba cortada.
   Si aun así no caben las tres en una línea (cifras enormes en pantallas muy angostas), «Despachar» baja a la línea siguiente en vez de salirse de la ventana. */
.req-review-body .table-wrap tbody tr.rt-collapsible{display:flex !important;flex-wrap:wrap;column-gap:10px;align-items:flex-start;}
.req-review-body .table-wrap tbody tr.rt-collapsible > td.rt-digest{flex:0 0 100%;}
.req-review-body .table-wrap tbody tr.rt-collapsible > td.rt-detail{display:flex !important;flex-direction:column;align-items:flex-start;gap:3px;font-size:14px;padding:4px 0;flex:1 1 calc((100% - 21px) / 3.25);min-width:max-content;max-width:100%;}
.req-review-body .table-wrap tbody tr.rt-collapsible > td.rt-detail:last-child{flex:1.25 1 calc((100% - 21px) * 1.25 / 3.25);min-width:86px;}
.req-review-body .table-wrap tbody tr.rt-collapsible > td.rt-detail::before{display:block;font-size:9.5px;}
.req-review-body .table-wrap tbody tr.rt-collapsible > td.rt-detail input{width:100% !important;max-width:110px;}
.req-sug-list{border:1px solid var(--border-strong);border-radius:var(--radius);background:var(--surface);}
.req-sug-row{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:10px 14px;border-top:1px solid var(--border);font-size:13.5px;}
.req-sug-row:first-child{border-top:0;}
.req-sug-row b{font-size:13px;}.req-sug-row span{white-space:nowrap;font-weight:700;}
/* Botón «Sugerencia» en el encabezado de la solicitud (revisar / detalle): abre la lista en una capa. */
.modal-head .req-sug-btn{margin-left:auto;margin-right:8px;flex-shrink:0;white-space:nowrap;gap:6px;}
.modal-head .req-sug-btn .n{font-weight:800;}
/* En celular solo ícono + cantidad (el título de «Revisar Solicitud REQ-xxxx» es largo y se partiría en dos líneas). */
@media (max-width:640px){ .modal-head .req-sug-btn .lbl{display:none;} }

/* Solicitudes de Artículos: las pestañas caben en una fila en celular (Nueva Solicitud | Mis Solicitudes | Historial) */
.tabs.req-tabs{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;}
.tabs.req-tabs::-webkit-scrollbar{display:none;}
.tabs.req-tabs .tab{flex:0 0 auto;white-space:nowrap;}
@media (max-width:560px){.tabs.req-tabs{gap:0;}.tabs.req-tabs .tab{flex:1 1 auto;text-align:center;padding:10px 6px !important;font-size:11.5px !important;letter-spacing:.01em !important;}}
.pl-act.pl-flash{animation:plFlash 1.2s ease-in-out 4;outline:2px solid var(--primary, #2563eb);outline-offset:2px;border-radius:10px;}
@keyframes plFlash{0%,100%{background:transparent}50%{background:rgba(37,99,235,.18)}}

/* Panel General · Buscador de Artículos con búsqueda/filtro activo — o mientras se escribe en el campo
   (modo escritura del celular): el buscador y el filtro de Estado quedan fijos y SOLO scrollea la lista de
   sugerencias (sin doble scroll). La tarjeta llena el alto de .view y la lista llena lo que queda hasta el
   pie (celular) o el borde de abajo (escritorio) — mismo criterio que la lista de Ingresos/Salidas/Solicitudes.
   Al escribir (teclado abierto) el resto del Panel (Resumen, Alertas, Movimientos) se oculta mientras dura el
   modo escritura: no cabe en el alto que deja el teclado y era lo que obligaba a un segundo scroll por fuera
   (la pantalla subía y escondía el buscador). Al soltar el campo vuelve todo. Sin eso nada de esto aplica y el
   Panel sigue desplazándose normal. */
.dash-art-wrap > .suggest-list{max-height:60vh;}
.main-col > .view:not(.view-chat) > .card.dash-buscando,
html.kb-compact .main-col > .view:not(.view-chat) > .card.dash-buscador{display:flex;flex-direction:column;flex:1 1 auto;min-height:0;margin-bottom:0 !important;}
.main-col > .view:not(.view-chat) > .card.dash-buscando > *,
html.kb-compact .main-col > .view:not(.view-chat) > .card.dash-buscador > *{flex-shrink:0;}
.main-col > .view:not(.view-chat) > .card.dash-buscando > .card-pad,
html.kb-compact .main-col > .view:not(.view-chat) > .card.dash-buscador > .card-pad{flex:1 1 auto;min-height:0;overflow:hidden;display:flex;flex-direction:column;}
.card.dash-buscando > .card-pad > .flex-gap,
html.kb-compact .card.dash-buscador > .card-pad > .flex-gap{flex-shrink:0;}
.card.dash-buscando > .card-pad > #dashboardArticleSuggest,
html.kb-compact .card.dash-buscador > .card-pad > #dashboardArticleSuggest{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;}
.card.dash-buscando #dashboardArticleSuggest > .dash-art-wrap,
html.kb-compact .card.dash-buscador #dashboardArticleSuggest > .dash-art-wrap{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;}
.card.dash-buscando #dashboardArticleSuggest > .dash-art-wrap > .suggest-list,
html.kb-compact .card.dash-buscador #dashboardArticleSuggest > .dash-art-wrap > .suggest-list{flex:1 1 auto;min-height:80px;max-height:none;}
@media (max-width: 860px){
  html.kb-compact .main-col > .view:not(.view-chat) > .card.dash-buscador ~ *{display:none;}
}
@media (min-width: 861px){
  .view:has(> .card.dash-buscando){display:flex;flex-direction:column;padding-bottom:14px;}
}

/* Monto Total (Control de Facturas): etiqueta «CLP» fija a la derecha dentro del campo. */
.money-wrap{position:relative;}
.money-wrap > input{padding-right:54px;}
.money-wrap > .money-cur{position:absolute;right:14px;top:50%;transform:translateY(-50%);font:600 12px/1 var(--font-body,system-ui);letter-spacing:.06em;color:var(--text-faint);pointer-events:none;}

/* Teclado numérico propio (celular) — ver «TECLADO NUMÉRICO PROPIO» en el JS. Va pegado abajo; la ventana abierta
   (tarjeta flotante, separada del teclado) y el resto de la pantalla quedan encima (--kp-h = alto del teclado). */
.kp-pad[hidden]{display:none;}
.kp-pad{position:fixed;left:0;right:0;bottom:0;z-index:200;background:var(--surface);border-top:1px solid var(--border);
  border-radius:20px 20px 0 0;padding:6px 10px calc(10px + env(safe-area-inset-bottom,0px));box-shadow:0 -10px 28px rgba(0,0,0,.22);
  user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;touch-action:manipulation;animation:kpUp .16s ease-out;}
@keyframes kpUp{from{transform:translateY(24px);opacity:.4}to{transform:none;opacity:1}}
.kp-top{display:flex;justify-content:space-between;align-items:baseline;gap:10px;min-height:30px;padding:4px 6px 6px;font:600 14px/1.25 var(--font-body,system-ui);color:var(--text-muted);}
.kp-top .kp-expr{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.kp-top .kp-res{flex-shrink:0;color:var(--text);font-size:16px;font-weight:700;}
.kp-top.hint .kp-expr{font-weight:500;font-size:12.5px;color:var(--text-faint);}
.kp-top.err .kp-expr{color:var(--danger);font-weight:600;}
.kp-grid{display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(5,46px);gap:8px;}
.kp-key{appearance:none;-webkit-appearance:none;margin:0;padding:0;border:1px solid var(--border);background:var(--surface-2);color:var(--text);
  border-radius:13px;font:600 23px/1 var(--font-body,system-ui);display:flex;align-items:center;justify-content:center;cursor:pointer;
  -webkit-tap-highlight-color:transparent;transition:filter .06s;}
.kp-key:active{filter:brightness(1.22);}
.kp-key.fn{font-size:16px;color:var(--text-muted);}
.kp-key.op{background:color-mix(in srgb,var(--accent) 16%,var(--surface-2));color:var(--accent);font-size:26px;border-color:color-mix(in srgb,var(--accent) 30%,var(--border));}
.kp-key.op.on{background:var(--accent);color:var(--accent-contrast,#fff);}
.kp-key.go{grid-column:4;grid-row:4 / span 2;background:var(--accent);border-color:transparent;color:var(--accent-contrast,#fff);flex-direction:column;gap:6px;font-size:15px;}
.kp-key.go.dis{opacity:.42;cursor:default;filter:none;}
.kp-key.dis:not(.go){opacity:.3;cursor:default;}
.kp-key.zero{grid-column:1 / span 2;}
.kp-key.z3{font-size:19px;letter-spacing:.5px;}
@media (max-height:700px){ .kp-grid{grid-template-rows:repeat(5,42px);gap:6px;} .kp-key{font-size:21px;} }
/* Con el teclado propio abierto, la ventana pasa a ser una TARJETA FLOTANTE (esquinas redondeadas, margen a los lados), centrada en
   el espacio libre y SEPARADA del teclado: entre ambos se ve el fondo oscuro, como con el teclado del sistema. --kp-h = alto del teclado. */
html.kp-open .modal-backdrop{bottom:var(--kp-h,0px);align-items:center;justify-content:center;
  padding:calc(12px + env(safe-area-inset-top,0px)) 12px 14px;}
html.kp-open .modal-panel,html.kp-open .modal-panel.wide,html.kp-open .modal-panel.xwide,html.kp-open .modal-panel.fullscreen{
  border-radius:20px;box-shadow:0 14px 40px rgba(0,0,0,.35);padding-top:0;padding-bottom:0;
  max-height:calc(100vh - var(--kp-h,0px) - 26px - env(safe-area-inset-top,0px));
  max-height:calc(100dvh - var(--kp-h,0px) - 26px - env(safe-area-inset-top,0px));}
html.kp-open .modal-panel.fullscreen{height:calc(100vh - var(--kp-h,0px) - 26px - env(safe-area-inset-top,0px));height:calc(100dvh - var(--kp-h,0px) - 26px - env(safe-area-inset-top,0px));}
html.kp-open .modal-head,html.kp-open .modal-panel.fullscreen .modal-head{padding-top:16px;}
html.kp-open .modal-head::before{display:none;}
/* «Ingresa la cantidad»: el botón Aplicar del teclado reemplaza al de la ventana (que quedaría tapado igual); la X sigue cancelando. */
html.kp-open .modal-panel:has([data-action="cqp-input"]) .modal-foot{display:none;}
/* ============================================================
   MENÚ SEMANAL (v2026101557) — usa solo los tokens del tema
   ============================================================ */
.mn-wrap{width:100%;max-width:980px;min-width:0;box-sizing:border-box;margin:0 auto;display:flex;flex-direction:column;gap:12px;}
.mn-wrap > *{min-width:0;max-width:100%;box-sizing:border-box;}
.mn-wrap .tabs{margin-bottom:4px;}
.mn-weekbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.mn-weekbar .btn-icon{min-width:44px;min-height:44px;font-size:20px;line-height:1;}
.mn-weeklbl{display:flex;flex-direction:column;min-width:110px;text-align:center;}
.mn-weeklbl b{font-size:16px;color:var(--text);}
.mn-weeklbl span{font-size:12px;color:var(--text-muted);}
.mn-copybtn{margin-left:auto;}
.mn-tabs{overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none;}
.mn-tabs::-webkit-scrollbar{display:none;}
.mn-tabs .tab{white-space:nowrap;min-height:44px;}
.mn-days{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px;}
.mn-day{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;min-height:60px;padding:6px 2px;
  border:1.5px solid var(--border-strong);border-radius:var(--radius);background:var(--surface);color:var(--text);cursor:pointer;font-family:inherit;}
.mn-day span{font-size:11px;font-weight:700;color:var(--text-muted);letter-spacing:.04em;}
.mn-day b{font-size:19px;line-height:1.1;}
.mn-day.today span{color:var(--accent-strong);}
.mn-day.active{background:var(--accent);border-color:var(--accent);color:var(--accent-contrast);}
.mn-day.active span{color:var(--accent-contrast);opacity:.85;}
.mn-dot{width:8px;height:8px;border-radius:50%;display:block;margin-top:2px;background:var(--border-strong);}
.mn-dot.ok,.mn-dot.done{background:var(--success);}
.mn-dot.justo{background:var(--warning);}
.mn-dot.camino{background:var(--info);}
.mn-dot.falta{background:var(--danger);}
.mn-dot.none{background:transparent;border:1.5px solid var(--border-strong);box-sizing:border-box;}
.mn-day.active .mn-dot.none{border-color:var(--accent-contrast);}
.mn-day.active .mn-dot{box-shadow:0 0 0 2px var(--accent-contrast);}
.mn-dayhead{display:flex;align-items:center;justify-content:flex-start;gap:8px;flex-wrap:wrap;margin-top:4px;}
.mn-dayhead h3{margin:0;font-size:18px;}
.mn-chip{white-space:nowrap;flex-shrink:0;}
.mn-dayhead .mn-chip{margin-left:auto;}
/* Botón «Insumos» junto a la fecha (ventana de insumos manuales del día). */
.mn-insbtn{gap:6px;white-space:nowrap;flex-shrink:0;}
.mn-insbtn .n{font-weight:800;}
.mn-insro{border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;background:var(--surface);}
.mn-insro-row{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:12px 14px;}
.mn-insro-row+.mn-insro-row{border-top:1px solid var(--border);}
.mn-insro-row b{min-width:0;overflow-wrap:anywhere;}
.mn-insro-row .mono{white-space:nowrap;font-weight:700;}
.mn-slot{display:flex;flex-direction:column;gap:6px;}
.mn-slottitle{font-size:13px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted);margin-top:6px;}
.mn-list{background:var(--surface);border:1.5px solid var(--border-strong);border-radius:var(--radius);overflow:hidden;}
.mn-plate{display:flex;align-items:center;gap:12px;width:100%;text-align:left;padding:12px 14px;background:transparent;border:0;border-top:1px solid var(--border);color:var(--text);cursor:pointer;font-family:inherit;min-height:56px;}
.mn-plate:first-child{border-top:0;}
.mn-plate:hover{background:var(--surface-2);}
.mn-plate-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;}
.mn-plate-main b{font-size:15.5px;}
.mn-plate-main span{font-size:12.5px;color:var(--text-muted);}
.mn-plate-main em{font-style:normal;font-size:12.5px;font-weight:600;color:var(--warning);}
.mn-plate-main em.bad{color:var(--danger);}
.mn-empty{padding:12px 14px;border:1.5px dashed var(--border-strong);border-radius:var(--radius);color:var(--text-muted);font-size:13px;background:var(--surface);}
.mn-addbtn{min-height:48px;justify-content:center;}
.mn-hint a{text-decoration:underline;font-weight:700;}
.mn-intro{margin:0;}
.mn-h4{margin:14px 0 6px;font-size:14px;text-transform:uppercase;letter-spacing:.05em;color:var(--text);}
.mn-sub{margin:2px 0 0;font-size:12.5px;color:var(--text-muted);}
.mn-statusline{margin-bottom:8px;}
.mn-note{padding:10px 12px;border-radius:var(--radius);font-size:13px;margin:8px 0;border:1.5px solid var(--border-strong);background:var(--surface-2);}
.mn-note.ok{background:var(--success-soft);color:var(--success);border-color:var(--success);}
.mn-note.bad{background:var(--danger-soft);color:var(--danger);border-color:var(--danger);}
.mn-stepper{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;padding:10px 12px;background:var(--surface-2);border:1.5px solid var(--border);border-radius:var(--radius);margin-bottom:10px;}
.mn-stepper > span{font-size:13px;font-weight:700;}
.mn-stepper > div{display:flex;align-items:center;gap:6px;}
.mn-stepper .btn-icon{min-width:44px;min-height:44px;font-weight:700;}
.mn-stepper input{width:72px;min-height:44px;text-align:center;font-size:20px;font-weight:800;border:1.5px solid var(--border-strong);border-radius:var(--radius-sm);background:var(--surface);color:var(--text);}
.mn-bigq{font-size:26px;}
.mn-kpis{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:6px 0;}
.mn-kpi{background:var(--surface);border:1.5px solid var(--border-strong);border-radius:var(--radius);padding:10px 12px;display:flex;flex-direction:column;gap:2px;}
.mn-kpi span{font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--text-muted);}
.mn-kpi b{font-size:26px;line-height:1.1;}
.mn-kpi.bad{background:var(--danger-soft);}
.mn-kpi.bad b{color:var(--danger);}
.mn-ings{border:1.5px solid var(--border-strong);border-radius:var(--radius);overflow:hidden;background:var(--surface);}
.mn-ing{display:flex;align-items:center;gap:10px;padding:10px 12px;border-top:1px solid var(--border);}
.mn-ing:first-child{border-top:0;}
.mn-ing > div{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;}
.mn-ing b{font-size:14.5px;}
.mn-ing span{font-size:12px;color:var(--text-muted);}
.mn-ing span.bad,.mn-plate-main em.bad,.mn-pick .bad,.mn-recmain .bad{color:var(--danger);font-weight:600;}
.mn-ing span.ok2,.mn-pick .ok2,.mn-recmain .ok2{color:var(--success);font-weight:600;}
.mn-ing.falta{background:var(--danger-soft);}
.mn-recnote{margin-top:8px;}
.mn-foot{flex-wrap:wrap;}
.mn-foot .btn{min-height:44px;}
.btn-danger-outline{color:var(--danger);border-color:var(--danger);}
.mn-sum{display:flex;gap:6px;flex-wrap:wrap;}
.mn-slist{background:var(--surface);border:1.5px solid var(--border-strong);border-radius:var(--radius);overflow:hidden;}
.mn-srow{display:flex;align-items:center;gap:12px;padding:11px 14px;border-top:1px solid var(--border);}
.mn-srow:first-child{border-top:0;}
.mn-srow.falta{background:var(--danger-soft);}
.mn-sday{width:64px;flex-shrink:0;font-size:15px;}
.mn-sinfo{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;}
.mn-sinfo span{font-size:13px;color:var(--text-muted);}
.mn-sinfo em{font-style:normal;font-size:12.5px;color:var(--warning);font-weight:600;}
.mn-srow.falta .mn-sinfo em{color:var(--danger);}
.mn-tops{display:flex;flex-direction:column;gap:10px;background:var(--surface);border:1.5px solid var(--border-strong);border-radius:var(--radius);padding:12px 14px;}
.mn-toptxt{display:flex;flex-direction:column;gap:1px;}
.mn-toptxt b{font-size:14px;}
.mn-toptxt span{font-size:12px;color:var(--text-muted);}
.mn-bar{height:12px;border-radius:99px;background:var(--bg-2);border:1.5px solid var(--border-strong);display:flex;overflow:hidden;margin-top:5px;}
.mn-bar i{display:block;height:100%;}
.mn-bar i.ok,.mn-legend i.ok{background:var(--success);}
.mn-bar i.cam,.mn-legend i.cam{background:var(--info);}
.mn-legend{display:flex;gap:14px;font-size:12px;color:var(--text-muted);}
.mn-legend i{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:4px;}
.mn-actions{display:flex;gap:8px;flex-wrap:wrap;}
.mn-actions .btn{min-height:46px;}
.mn-group{background:var(--surface);border:1.5px solid var(--border-strong);border-radius:var(--radius);overflow:hidden;}
.mn-grouphead{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 14px;background:var(--surface-2);border-bottom:1.5px solid var(--border-strong);}
.mn-grouphead .btn{min-height:40px;}
.mn-buy{display:flex;align-items:center;gap:12px;padding:11px 14px;border-top:1px solid var(--border);cursor:pointer;}
.mn-grouphead + .mn-buy{border-top:0;}
.mn-buy input[type=checkbox]{width:22px;height:22px;flex-shrink:0;accent-color:var(--accent);}
.mn-buy.off{opacity:.55;}
.mn-buy.covered{cursor:default;}
.mn-buytxt{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px;}
.mn-buytxt b{font-size:14.5px;}
.mn-buytxt span{font-size:12px;color:var(--text-muted);}
.mn-buyq{display:flex;flex-direction:column;align-items:flex-end;text-align:right;}
.mn-buyq b{font-size:16px;white-space:nowrap;}
.mn-buyq span{font-size:12px;color:var(--text-muted);}
.mn-rtools{display:flex;gap:8px;flex-wrap:wrap;align-items:center;}
.mn-rtools input{flex:1;min-width:160px;min-height:44px;}
.mn-rtools select{min-height:44px;}
.mn-rtools .btn{min-height:44px;}
.mn-reclist{display:flex;flex-direction:column;gap:8px;}
.mn-rec{display:flex;align-items:stretch;gap:8px;background:var(--surface);border:1.5px solid var(--border-strong);border-radius:var(--radius);}
.mn-rec.arch{opacity:.7;}
.mn-recmain{flex:1;min-width:0;text-align:left;background:transparent;border:0;padding:12px 14px;display:flex;flex-direction:column;gap:2px;cursor:pointer;color:var(--text);font-family:inherit;}
.mn-recmain b{font-size:15.5px;}
.mn-recmain span{font-size:12.5px;color:var(--text-muted);}
.mn-recact{display:flex;align-items:center;padding-right:10px;}
.mn-archtoggle{align-self:flex-start;min-height:40px;}
.mn-picks{display:flex;flex-direction:column;gap:6px;margin:10px 0;max-height:46vh;overflow:auto;}
.mn-pick{display:flex;align-items:center;gap:10px;text-align:left;width:100%;padding:10px 12px;background:var(--surface);border:1.5px solid var(--border-strong);border-radius:var(--radius);color:var(--text);cursor:pointer;font-family:inherit;min-height:56px;}
.mn-pick > div{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px;}
.mn-pick b{font-size:15px;}
.mn-pick span{font-size:12px;color:var(--text-muted);}
.mn-pick.sel{border-color:var(--accent);background:var(--accent-soft);}
.mn-pick:disabled{opacity:.5;cursor:not-allowed;}
.mn-portions{max-width:180px;}
.mn-ris{display:flex;flex-direction:column;gap:12px;margin-bottom:10px;}
.mn-ri{display:grid;grid-template-columns:minmax(0,2.4fr) minmax(0,1fr) minmax(0,1fr);gap:10px;align-items:end;padding:12px;border:1.5px solid var(--border);border-radius:var(--radius);background:var(--surface-2);}
.mn-ri .field{margin:0;}
.mn-ri-hint,.mn-ri-sub,.mn-ri-subbtn{grid-column:1 / -1;}
.mn-ri-hint{font-size:12px;color:var(--text-muted);}
.mn-ri-subbtn{justify-self:start;}
.mn-ri-top{display:flex;align-items:flex-end;gap:8px;min-width:0;}
.mn-ri-top .mn-ri-prod{flex:1;min-width:0;}
.mn-ri-del{flex-shrink:0;min-width:44px;min-height:44px;color:var(--danger);}
.mn-copyopts{display:flex;flex-direction:column;gap:8px;margin-top:10px;}
.mn-copyopts .btn{min-height:48px;justify-content:center;}
.mn-ul{margin:8px 0 8px 18px;padding:0;font-size:13.5px;line-height:1.5;}
@media (max-width:860px){
  .mn-wrap{gap:10px;}
  .mn-days{gap:4px;}
  .mn-day{min-height:58px;}
  .mn-copybtn{margin-left:0;}
  .mn-ri{grid-template-columns:minmax(0,1fr) minmax(0,1fr);}
  .mn-ri-top{grid-column:1 / -1;}
  .mn-kpi b{font-size:22px;}
  .mn-grouphead{flex-wrap:wrap;}
}

/* La lupa/ícono de los buscadores y campos con ícono no debe pisar el texto escrito
   (el diseño Industrial redefine el padding de los inputs y lo anulaba). */
.searchbox input[type=text],.searchbox input[type=search],.searchbox input:not([type]){padding-left:40px;}
.searchbox input.has-clear,.filter-clearable input.has-clear{padding-right:36px;}
.field .input-icon input[type=text],.field .input-icon input[type=password]{padding-left:40px;}

/* Stock de la semana: cabecera + notas por plato, separadas y legibles */
.mn-srow{display:flex;flex-direction:column;align-items:stretch;gap:10px;padding:11px 14px;}
.mn-shead{display:flex;align-items:center;gap:12px;}
.mn-sinfo{flex:1;min-width:0;display:block;}
.mn-sinfo span{display:block;}
.mn-notes{display:flex;flex-direction:column;gap:6px;}
.mn-note{display:flex;flex-direction:column;gap:2px;padding:8px 12px;border-left:3px solid var(--border-strong,var(--border));background:var(--surface-2);border-radius:6px;}
.mn-note b{font-size:13px;font-weight:700;color:var(--text);}
.mn-note span{font-size:12.5px;line-height:1.4;color:var(--text-muted);white-space:normal;}
.mn-note.info{border-left-color:var(--info,var(--accent));}
.mn-note.warn{border-left-color:var(--warning);}
.mn-note.bad{border-left-color:var(--danger);background:var(--danger-soft);}
.mn-note.bad span{color:var(--danger);}
.mn-plate-main em{display:block;margin-top:6px;padding:6px 10px;border-left:3px solid var(--warning);background:var(--surface-2);border-radius:6px;font-weight:500;font-size:12.5px;line-height:1.4;color:var(--text-muted);}
.mn-plate-main em.bad{border-left-color:var(--danger);background:var(--danger-soft);color:var(--danger);}
.mn-ing > div > span + span{margin-top:3px;}

/* Notas plegables: se ve el plato y el detalle aparece al tocarlo */
.mn-notes{gap:6px;}
.mn-note{padding:0;gap:0;overflow:hidden;}
.mn-note-h{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;padding:9px 12px;background:transparent;border:0;color:var(--text);font-family:inherit;text-align:left;cursor:pointer;}
.mn-note-h b{font-size:13.5px;}
.mn-note-c{width:8px;height:8px;border-right:2px solid var(--text-muted);border-bottom:2px solid var(--text-muted);transform:rotate(45deg);margin:-3px 4px 0 0;flex-shrink:0;transition:transform .15s;}
.mn-note.open .mn-note-c{transform:rotate(-135deg);margin-top:3px;}
.mn-note > span{display:none;padding:0 12px 10px;}
.mn-note.open > span{display:block;}

/* Importar platos */
.mn-implist{display:flex;flex-direction:column;gap:8px;margin-top:8px;max-height:46vh;overflow:auto;}
.mn-impitem{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;padding:10px 12px;border:1px solid var(--border);border-left:3px solid var(--success);border-radius:8px;background:var(--surface);}
.mn-impitem.bad{border-left-color:var(--danger);background:var(--danger-soft);}
.mn-impitem > div{min-width:0;display:flex;flex-direction:column;gap:2px;}
.mn-impitem span{font-size:12.5px;color:var(--text-muted);}
.mn-impitem em{font-style:normal;font-size:12.5px;color:var(--danger);}

/* ---- importación POS (xlsx) ---- */
.mn-impcats{display:flex;flex-direction:column;gap:6px;margin:8px 0 14px}
.mn-impcat{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 10px;border:1px solid var(--border,#d9dde3);border-radius:8px;background:var(--surface,#fff)}
.mn-impcat label{display:flex;align-items:center;gap:8px;flex:1 1 auto;min-width:0;font-weight:600}
.mn-impcat label span{opacity:.6;font-weight:400}
.mn-impcat select{flex:0 0 140px;width:140px;min-width:0}
.mn-impmap{display:flex;flex-direction:column;gap:8px;margin:8px 0 14px}
.mn-impmaprow{display:flex;flex-direction:column;gap:6px;padding:8px 10px;border:1px solid var(--border,#d9dde3);border-radius:8px;background:var(--surface,#fff)}
.mn-impmaprow b,.mn-impmaprow>div>span{display:block}
.mn-impmaprow>div>span{font-size:.85em;opacity:.7;margin-top:2px}
.mn-impmaprow input,.mn-impmaprow select{width:100%;min-width:0}
.mn-impcont{display:grid;grid-template-columns:auto 1fr 96px;gap:8px;align-items:center}
.mn-impcont span{white-space:nowrap}
.mn-impchk{display:flex;align-items:center;gap:8px;margin:6px 0}
.mn-ri-controw{display:grid;grid-template-columns:1fr 96px;gap:8px}

/* fila del plato: código | plato (centro) | porciones + estado */
.mn-plate{display:grid;grid-template-columns:84px minmax(0,1fr) auto;align-items:center;gap:12px}
.mn-plate-code{font-size:12.5px;font-weight:700;letter-spacing:.02em;color:var(--text-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mn-plate-main{align-items:center;text-align:center}
.mn-plate-main em{text-align:left;align-self:stretch}
.mn-plate-right{display:flex;align-items:center;justify-content:flex-end;gap:10px;white-space:nowrap}
.mn-plate-por{font-size:12.5px;color:var(--text-muted)}
.mn-plate-por b{font-size:15.5px;color:var(--text)}
@media (max-width:520px){.mn-plate{grid-template-columns:56px minmax(0,1fr) auto;gap:8px;padding:12px 10px}.mn-plate-code{font-size:11px}.mn-plate-right{flex-direction:column;align-items:flex-end;gap:4px}.mn-plate-main{align-items:flex-start;text-align:left}}
/* selector «Agregar al menú»: texto con más aire */
.mn-pick{padding:10px 14px;line-height:1.35}
.mn-pick>div{display:flex;flex-direction:column;gap:3px;min-width:0}
.mn-pick span{line-height:1.35}

/* ===== Menú: diseño B (días · detalle · resumen) ===== */
.mn-wrap.mn-wide{max-width:1600px}
.mn-b{display:flex;flex-direction:column;gap:12px}
.mn-bsum{display:flex;flex-direction:row;gap:8px;order:-1}
.mn-bsumcard{flex:1;display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:0;background:var(--surface);border:1.5px solid var(--border-strong);border-radius:var(--radius);padding:8px 10px;min-width:0}
.mn-bsumcard .mn-slottitle{display:none}
.mn-bk{display:flex;flex-direction:column;align-items:center;font-size:11px;color:var(--text-muted);padding:2px 0}
.mn-bk b{font-size:17px;color:var(--text)}
.mn-bk b.bad{color:var(--danger)}.mn-bk b.ok{color:var(--success)}
.mn-bsumcard:nth-child(2){display:none}
.mn-bsumbtn{width:100%;justify-content:center}
.mn-dayfull{display:none;font-style:normal}
.mn-slots{display:flex;flex-direction:column;gap:12px}
.mn-slotcard .mn-slottitle{display:flex;justify-content:space-between;align-items:baseline}
.mn-slottitle em{font-style:normal;font-weight:600;letter-spacing:0;text-transform:none;font-size:12px}
@media (min-width:1000px){
  .mn-b{display:grid;grid-template-columns:230px minmax(0,1fr) 320px;gap:20px;align-items:start}
  .mn-bdays{display:flex;flex-direction:column;gap:8px;grid-column:1;grid-row:1}
  .mn-bdays .mn-day{flex-direction:row;justify-content:space-between;align-items:center;gap:10px;min-height:54px;padding:10px 14px;text-align:left}
  .mn-bdays .mn-day span,.mn-bdays .mn-day b{display:none}
  .mn-bdays .mn-dayfull{display:block;font-weight:800;font-size:15px;flex:1}
  .mn-bdays .mn-dot{margin:0}
  .mn-bmain{grid-column:2;grid-row:1;min-width:0}
  .mn-bsum{grid-column:3;grid-row:1;order:0;flex-direction:column;gap:14px}
  .mn-bsumcard{padding:14px 16px;grid-auto-flow:row}
  .mn-bsumcard .mn-slottitle{display:block;margin:0 0 6px}
  .mn-bsumcard:nth-child(2){display:grid}
  .mn-bk{flex-direction:row;justify-content:space-between;align-items:center;font-size:14px;padding:10px 0;border-top:1px solid var(--border)}
  .mn-bsumcard .mn-slottitle+.mn-bk{border-top:0}
  .mn-bk b{font-size:18px}
  .mn-bsumbtn{margin-top:10px}
  .mn-dayhead{margin-bottom:12px}.mn-dayhead h3{font-size:24px}
  .mn-slots{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:start}
  .mn-slotcard{background:var(--surface);border:1.5px solid var(--border-strong);border-radius:var(--radius);padding:14px 16px}
  .mn-slotcard .mn-list{border:0;border-radius:0}
  .mn-slotcard .mn-slottitle{margin-top:0}
  .mn-slotcard .mn-plate{padding:14px 4px}
}
@media (min-width:1000px) and (max-width:1250px){.mn-b{grid-template-columns:200px minmax(0,1fr) 260px;gap:14px}.mn-slots{grid-template-columns:1fr}}

.mn-bdays{order:-2}
.mn-slotcard{container-type:inline-size}
.mn-slotcard .mn-plate-main{align-items:flex-start;text-align:left}
@container (min-width:600px){.mn-slotcard .mn-plate-main{align-items:center;text-align:center}}
@media (min-width:1000px){.mn-slotcard .mn-plate{grid-template-columns:64px minmax(0,1fr) auto}}
.mn-bsumcard .mn-bk{border:0;background:transparent;border-radius:0;box-shadow:none;text-transform:none;letter-spacing:0}

/* Recetas: barra de filtros compacta y lista con scroll propio (la pantalla no se desplaza) */
.mn-rtools input[type=search]{flex:1 1 240px;width:auto}
.mn-rtools select{width:auto;flex:0 0 auto;min-width:150px;max-width:260px}
.mn-recscroll{display:flex;flex-direction:column;gap:10px;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;max-height:calc(100vh - 430px);max-height:calc(100dvh - 430px);min-height:260px;padding:2px 6px 8px 2px;margin-right:-6px}
@media (max-width:700px){.mn-recscroll{max-height:calc(100dvh - 400px);min-height:220px}}
@media (max-width:700px){
  .mn-rtools{gap:6px}
  .mn-rtools input[type=search]{flex:1 1 100%}
  .mn-rtools select{flex:1 1 0;min-width:0;max-width:none}
  .mn-rtools .btn{flex:1 1 0;min-width:0;padding:6px 6px;font-size:11.5px;line-height:1.15;text-align:center;justify-content:center;white-space:normal}
  .mn-rtools .btn svg{display:none}
  .mn-recscroll{max-height:calc(100dvh - 430px)}
}
@media (max-width:700px){
  .mn-rtools select{flex:1 1 calc(50% - 6px)}
  .mn-rtools .btn{flex:1 1 calc(33% - 6px);font-size:10.5px;letter-spacing:0;padding:4px 3px;overflow:hidden}
  .mn-recscroll{max-height:calc(100dvh - 400px)}
}

/* ---- listas de sugerencias propias ---- */
.mn-cb{position:fixed;z-index:100000;overflow-y:auto;overscroll-behavior:contain;background:var(--surface,#fff);color:var(--text,#111);border:1.5px solid var(--border-strong,#555);border-radius:10px;box-shadow:0 14px 34px rgba(0,0,0,.28);padding:4px}
.mn-cb[hidden]{display:none}
.mn-cb-i{display:grid;grid-template-columns:1fr auto;gap:2px 10px;align-items:baseline;width:100%;text-align:left;background:transparent;border:0;border-radius:7px;padding:9px 11px;cursor:pointer;color:inherit;font:inherit;min-height:44px}
.mn-cb-i:hover,.mn-cb-i.on{background:var(--surface-2,#f1f1ec)}
.mn-cb-i.on{outline:2px solid var(--accent,#f5c400);outline-offset:-2px}
.mn-cb-i[disabled]{opacity:.5;cursor:not-allowed}
.mn-cb-n{font-weight:700;font-size:14.5px;line-height:1.25;min-width:0;overflow-wrap:anywhere}
.mn-cb-n mark{background:var(--accent-soft,#fff1a6);color:inherit;border-radius:3px;padding:0 1px}
.mn-cb-s{grid-column:1 / -1;font-size:12px;color:var(--text-muted,#666)}
.mn-cb-t{font-size:11px;font-weight:800;padding:2px 7px;border-radius:5px;background:var(--surface-2,#eee);color:var(--text-muted,#666);white-space:nowrap}
.mn-cb-t.bad{background:var(--danger-soft,#fbdcd9);color:var(--danger,#b3261e)}
.mn-cb-empty,.mn-cb-more{padding:12px;font-size:13px;color:var(--text-muted,#666)}

/* ---- pestañas del Menú: legibles en claro y oscuro (sin el gris por defecto del botón) ---- */
.mn-tabs .tab{background:transparent;border:0;border-bottom:3px solid transparent;border-radius:0;color:var(--text-muted);box-shadow:none;padding:10px 16px;margin-bottom:-1px}
.mn-tabs .tab:hover{background:var(--surface-2);color:var(--text)}
.mn-tabs .tab.active{background:var(--accent-soft,transparent);color:var(--text);border-bottom-color:var(--cta,var(--accent))}
.mn-tabs .tab:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}

/* ---- fila del plato en bloques angostos: nombre a todo el ancho, porciones/estado a la derecha ---- */
@container (max-width:540px){
  .mn-slotcard .mn-plate{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"code right" "main right";row-gap:2px;padding:12px 4px}
  .mn-slotcard .mn-plate-code{grid-area:code;align-self:end}
  .mn-slotcard .mn-plate-main{grid-area:main;align-self:start}
  .mn-slotcard .mn-plate-right{grid-area:right;flex-direction:column;align-items:flex-end;gap:4px}
}
/* DISEÑO ESTILO APPLE — capa de estilos al FINAL de la hoja: no cambia ninguna función, dato ni estructura de la app. Para volver al diseño anterior basta quitar este bloque. */
:root{--font-display:-apple-system,BlinkMacSystemFont,'SF Pro Display','Inter',system-ui,sans-serif;--font-body:-apple-system,BlinkMacSystemFont,'SF Pro Text','Inter',system-ui,sans-serif;--radius-sm:8px;--radius:12px;--radius-lg:20px;--shadow-sm:none;--shadow:none;--shadow-lg:0 20px 60px -20px rgba(0,0,0,.45);--bg:#F2F2F7;--bg-2:#E5E5EA;--surface:#FFFFFF;--surface-2:#F7F7FA;--border:#DCDCE0;--border-strong:#C6C6CC;--text:#111113;--text-muted:#55555A;--text-faint:#67676C;--accent:#0066CC;--accent-strong:#004C9E;--accent-soft:#E5F0FF;--accent-contrast:#FFFFFF;--accent-fill:#0071E3;--success:#1B7330;--success-soft:#E3F5E7;--success-fill:#1B7330;--warning:#964E00;--warning-soft:#FFF0D9;--danger:#C4001A;--danger-soft:#FFE4E6;--danger-fill:#D70015;--info:#0066CC;--info-soft:#E5F0FF;--fill:rgba(118,118,128,.12);--seg-on:#FFFFFF;}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--shadow-lg:0 20px 60px -20px rgba(0,0,0,.7);--bg:#000000;--bg-2:#000000;--surface:#1C1C1E;--surface-2:#2C2C2E;--border:#38383A;--border-strong:#48484A;--text:#F5F5F7;--text-muted:#AEAEB2;--text-faint:#98989D;--accent:#409CFF;--accent-strong:#6CB0FF;--accent-soft:#0B2B4F;--accent-contrast:#FFFFFF;--accent-fill:#0071E3;--success:#30D158;--success-soft:#0E3320;--success-fill:#248A3D;--warning:#FF9F0A;--warning-soft:#3A2607;--danger:#FF6961;--danger-soft:#3F1512;--danger-fill:#D32F25;--info:#409CFF;--info-soft:#0B2B4F;--fill:rgba(118,118,128,.28);--seg-on:#636366;}}
:root[data-theme="dark"]{--shadow-lg:0 20px 60px -20px rgba(0,0,0,.7);--bg:#000000;--bg-2:#000000;--surface:#1C1C1E;--surface-2:#2C2C2E;--border:#38383A;--border-strong:#48484A;--text:#F5F5F7;--text-muted:#AEAEB2;--text-faint:#98989D;--accent:#409CFF;--accent-strong:#6CB0FF;--accent-soft:#0B2B4F;--accent-contrast:#FFFFFF;--accent-fill:#0071E3;--success:#30D158;--success-soft:#0E3320;--success-fill:#248A3D;--warning:#FF9F0A;--warning-soft:#3A2607;--danger:#FF6961;--danger-soft:#3F1512;--danger-fill:#D32F25;--info:#409CFF;--info-soft:#0B2B4F;--fill:rgba(118,118,128,.28);--seg-on:#636366;}

/* Listas desplegables (select) y controles nativos: se pintan en el MISMO tema que la app aunque el sistema esté en otro, y cada opción lleva fondo y texto propios (con el relleno translúcido de los campos el desplegable salía blanco con letras claras y no se leía) */
:root{color-scheme:light;}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){color-scheme:dark;}}
:root[data-theme="dark"]{color-scheme:dark;}
:root input,:root select,:root textarea{color-scheme:light;}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) input,:root:not([data-theme="light"]) select,:root:not([data-theme="light"]) textarea{color-scheme:dark;}}
:root[data-theme="dark"] input,:root[data-theme="dark"] select,:root[data-theme="dark"] textarea{color-scheme:dark;}
select option,select optgroup{background-color:var(--surface-2);color:var(--text);}
select option:disabled{color:var(--text-faint);}
/* Etiquetas en minúscula normal (sin MAYÚSCULAS forzadas) */
.kpi .lbl,.stk-badge small,.fa-main small,.fa-mini small,.sb-group-label,.sb-brand span,.auth-brand span,.mn-h4,.mn-kpi span,.mn-slottitle,.perm-group-title,.kpi-wrap .kpi-title,.kpi-wrap .kpi-mini-i i,.table-wrap tbody td::before,.dist-head,.dist-row .num::before,.barcode-card-label,.an-sec,.fa-sec-t,.qp-h,.pl-cb-grp,.pl-fl span,.fcmp-filters label,.fcmp-k>span,.fcmp-one-kpi>div>span,.an-pv-cost span,thead th,.fcmp-t th,.pl-cat-tbl th{text-transform:none !important;letter-spacing:0 !important;}
.icon-btn .dot,.chat-unread-badge{font-family:var(--font-body);}

body{font-size:15.5px;letter-spacing:-.011em;font-weight:400;}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:700;letter-spacing:-.022em;}
.topbar{background:var(--bg);border-bottom:0;padding-top:calc(14px + env(safe-area-inset-top, 0px));padding-bottom:8px;}
.topbar h1{font-size:26px;font-weight:700;letter-spacing:-.034em;line-height:1.1;}
.topbar .crumbs{font-size:13px;color:var(--text-faint);font-weight:400;}
.icon-btn,.menu-toggle{width:38px;height:38px;border-radius:50%;border:0;background:var(--fill);color:var(--accent);}
.card{border-radius:14px;border:0;box-shadow:none;background:var(--surface);}
.card-head{border-bottom:.5px solid var(--border);padding:14px 16px;}
.card-head h3{font-size:17px;font-weight:600;letter-spacing:-.02em;}
.btn{border-radius:12px;font-weight:600;min-height:44px;border:0;letter-spacing:-.01em;}
.btn-sm{min-height:34px;border-radius:10px;}
.btn-primary{background:var(--accent-fill);color:var(--accent-contrast);}
.btn-primary:hover{background:var(--accent-fill);filter:brightness(.92);}
.btn:not(.btn-primary):not(.btn-danger):not(.btn-icon){background:var(--accent-soft);color:var(--accent);border:0;}
input[type=text],input[type=password],input[type=number],input[type=date],input[type=month],input[type=search],select,textarea{border-radius:12px;border:0;background:var(--fill);min-height:44px;font-size:16px;}
input::placeholder{color:var(--text-faint);}
.qty-input,input.qty-input{background:var(--surface) !important;box-shadow:inset 0 0 0 1.5px var(--border-strong);}
.qty-input:focus{box-shadow:inset 0 0 0 2px var(--accent),0 0 0 3px color-mix(in srgb,var(--accent) 30%,transparent);}
input:focus,select:focus,textarea:focus{box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 35%,transparent);}
.field label{font-size:13px;font-weight:500;color:var(--text-muted);}
.searchbox .scan-btn{border:0;background:var(--accent-soft);color:var(--accent);border-radius:12px;}
/* pestañas como control segmentado de iOS */
.tabs{background:var(--fill);border-radius:10px;padding:2px;border-bottom:0;gap:2px;margin-bottom:14px;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;}
.tabs::-webkit-scrollbar{display:none;}
.tabs .tab,.tabs .tab.active{border-bottom:0 !important;}
.tab{border-radius:8px;border-bottom:0;margin:0;padding:7px 12px;font-size:13px;font-weight:500;color:var(--text);white-space:nowrap;flex:1 0 auto;text-align:center;}
.tab.active{background:var(--seg-on);color:var(--text);font-weight:600;box-shadow:0 3px 8px rgba(0,0,0,.12),0 1px 1px rgba(0,0,0,.04);}
.stk-badge{border-radius:10px;}
.stk-badge b{font-weight:600;letter-spacing:-.02em;font-variant-numeric:tabular-nums;}
.stk-badge small,.cat-table .stk-badge small.stk-foot{font-weight:600;opacity:1;}
.fa-main .u,.fa-main .fa-st{opacity:1;}
.pl-dchip.active span,.mn-day.active span,.fa-main small,.fa-mini small{opacity:1;}
.mn-day.active{border-color:var(--accent-fill);}
.msg.me .bubble .who{color:#fff;}
.dash-stk-c .dl{color:var(--text-muted);}
.pill{font-weight:600;border-radius:99px;}
.kpi .val{font-weight:700;letter-spacing:-.035em;}
.kpi .ic{border-radius:50%;}
.dash-stk-c{background:var(--fill);border:0;border-radius:99px;}
.dash-stk-c.is-main{background:var(--accent-soft);}
.suggest-item{border-bottom:.5px solid var(--border);}
.suggest-item .meta b,.cat-name{font-weight:600;letter-spacing:-.015em;}
.modal-panel{border-radius:16px;}
@media (max-width:860px){.modal-panel{border-radius:16px 16px 0 0;}}
.modal-head h3{font-size:17px;font-weight:600;}
.mn-day{border-radius:12px;border:0;background:var(--surface);}
.mn-day.active{background:var(--accent-fill);color:var(--accent-contrast);}
.mn-day.active span{color:var(--accent-contrast);}
.mn-dayhead h3{font-size:21px;}
.fact-mchip{border-radius:99px;}
.hbar,.hbar>*{border-radius:99px;}
/* barra lateral estilo macOS */
.sidebar{background:color-mix(in srgb,var(--surface) 55%,var(--bg-2));border-right:.5px solid var(--border-strong);box-shadow:none;}
.sb-brand b{font-weight:700;letter-spacing:-.02em;}
.sb-brand .mark{border-radius:10px;}
.sb-group-label{font-weight:600;color:var(--text-faint);}
.sb-link{border-radius:8px;font-weight:500;font-size:14px;color:var(--text);padding:7px 10px;}
.sb-link .icon{color:var(--accent);}
.sb-link:hover{background:var(--fill);}
.sb-link.active{background:var(--accent-soft);color:var(--accent);font-weight:600;}
.sb-link.active .icon{color:var(--accent);}
/* barra de pestañas inferior de iPhone: casi opaca (sin desenfoque: el backdrop-filter sobre una lista que se desplaza obliga al iPhone a recalcular el desenfoque en cada cuadro y puede dejar la app pegada), pegada abajo, con nombre */
@media (max-width:860px){
  .bottom-nav{left:0;right:0;bottom:0;height:calc(54px + env(safe-area-inset-bottom));padding:4px 6px env(safe-area-inset-bottom);gap:0;border-radius:0;border:0;border-top:.5px solid var(--border-strong);box-shadow:none;background:color-mix(in srgb,var(--surface) 96%,transparent);backdrop-filter:none;-webkit-backdrop-filter:none;}
  .bottom-nav .bn-item{border-radius:0;padding:2px 0 0;gap:2px;justify-content:flex-start;}
  .bottom-nav .bn-item > span:not(.badge-dot){position:static;width:auto;height:auto;margin:0;clip:auto;clip-path:none;overflow:hidden;font-size:10px;font-weight:500;line-height:1.1;color:var(--text-faint);}
  .bottom-nav .bn-item .icon{width:25px;height:25px;color:var(--text-faint);opacity:1;}
  .bottom-nav .bn-item.active{background:transparent;}
  .bottom-nav .bn-item.active > span:not(.badge-dot),.bottom-nav .bn-item.active .icon{color:var(--accent);}
  .bottom-nav .bn-item .badge-dot{top:2px;right:calc(50% - 26px);color:#fff;font-size:10px;min-width:17px;text-align:center;}
  .bottom-nav .bn-item:active{transform:none;opacity:.6;}
}
.auth-wrap{background:var(--bg);}
.auth-card{border-radius:22px;border:0;box-shadow:none;}
.auth-side{background:linear-gradient(160deg,#0062CC,#4B3FB8);}
.auth-feats .icon{color:#CFE5FF;}
.auth-form h2{font-size:26px;font-weight:700;letter-spacing:-.03em;}

/* Rellenos con texto blanco: se usan colores más firmes para que el texto se lea bien (también en modo oscuro) */
.sb-brand .mark,.update-banner .ub-ic,.toast-ic,.msg.me .bubble,.fact-mchip.on,.ph-seg button.on,.pl-num,.pl-dchip.active,.pl-fullx,.cib-step-btn:active{background:var(--accent-fill);}
.fact-mchip.on,.pl-dchip.active{border-color:var(--accent-fill);}
.sb-link .badge-dot,.bn-item .badge-dot,.icon-btn .dot,.chat-unread-badge{background:var(--danger-fill);}
.sign-line.ok .sign-ic{background:var(--success-fill);}
/* Escáner de facturas (sobre fondo oscuro): azul del diseño */
.docscan-poly{fill:rgba(64,156,255,.16);stroke:#409CFF;}
.docscan-handle{stroke:#409CFF;}
.docscan-spin{border-top-color:#409CFF;}
.docscan-mode.active,.docscan-btn-main{background:#409CFF;border-color:#409CFF;color:#001B3A;}

/* ============================================================
   PROMOCIONES MENSUALES (v2026101559) — pestaña de Planificación.
   Calendario como la planilla del local: banda verde con el número del
   día, franja de la semana y tarjeta de color con la promoción.
   ============================================================ */
:root{
  --pr-num:#8ce35a; --pr-num-ink:#1f4a07; --pr-band:#47706f; --pr-head:#3f4f1f; --pr-head2:#47706f; --pr-head-ink:#ffffff;
  --pr-crema:#f6ead8; --pr-crema-ink:#5f4119; --pr-oro:#ecc25a; --pr-oro-ink:#4d3600;
  --pr-rosa:#e6c3bd; --pr-rosa-ink:#62291f; --pr-menta:#dcebd6; --pr-menta-ink:#28531f;
  --pr-lima:#a6ea7d; --pr-lima-ink:#1d4507; --pr-lila:#ddd3f0; --pr-lila-ink:#3f2b70;
  --pr-naranja:#f7c79a; --pr-naranja-ink:#5a2d05; --pr-coral:#f4a9a0; --pr-coral-ink:#5e1a12; --pr-fucsia:#f2bde0; --pr-fucsia-ink:#5c1747; --pr-cielo:#cfe6f7; --pr-cielo-ink:#11405f; --pr-azul:#a9c4f5; --pr-azul-ink:#142f66; --pr-turquesa:#b3e5df; --pr-turquesa-ink:#0f4a44; --pr-oliva:#dcdcb0; --pr-oliva-ink:#44440f; --pr-gris:#e4e4e7; --pr-gris-ink:#2f3036;
  --pr-closed:#d93a2b; --pr-closed-ink:#ffffff;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --pr-num:#2f5a17; --pr-num-ink:#c4f5a3; --pr-band:#2b4746; --pr-head:#2c3816; --pr-head2:#2b4746; --pr-head-ink:#e3efe0;
    --pr-crema:#3a3020; --pr-crema-ink:#f0d9b0; --pr-oro:#4a3a10; --pr-oro-ink:#f5d27a;
    --pr-rosa:#432a27; --pr-rosa-ink:#f2c2ba; --pr-menta:#20331d; --pr-menta-ink:#bfe3b3;
    --pr-lima:#24420f; --pr-lima-ink:#b8f28f; --pr-lila:#2e2645; --pr-lila-ink:#d6c8f7;
  --pr-naranja:#4a2c12; --pr-naranja-ink:#fbc993; --pr-coral:#5c2019; --pr-coral-ink:#f8b3aa; --pr-fucsia:#43203a; --pr-fucsia-ink:#f3bfe3; --pr-cielo:#1a3347; --pr-cielo-ink:#b9dcf6; --pr-azul:#1d2b52; --pr-azul-ink:#b8cdfa; --pr-turquesa:#153d39; --pr-turquesa-ink:#a8e6de; --pr-oliva:#373c12; --pr-oliva-ink:#e0e0a8; --pr-gris:#2c2d31; --pr-gris-ink:#dedee3;
    --pr-closed:#7a2019; --pr-closed-ink:#ffd9d5;
  }
}
:root[data-theme="dark"]{
  --pr-num:#2f5a17; --pr-num-ink:#c4f5a3; --pr-band:#2b4746; --pr-head:#2c3816; --pr-head2:#2b4746; --pr-head-ink:#e3efe0;
  --pr-crema:#3a3020; --pr-crema-ink:#f0d9b0; --pr-oro:#4a3a10; --pr-oro-ink:#f5d27a;
  --pr-rosa:#432a27; --pr-rosa-ink:#f2c2ba; --pr-menta:#20331d; --pr-menta-ink:#bfe3b3;
  --pr-lima:#24420f; --pr-lima-ink:#b8f28f; --pr-lila:#2e2645; --pr-lila-ink:#d6c8f7;
  --pr-naranja:#4a2c12; --pr-naranja-ink:#fbc993; --pr-coral:#5c2019; --pr-coral-ink:#f8b3aa; --pr-fucsia:#43203a; --pr-fucsia-ink:#f3bfe3; --pr-cielo:#1a3347; --pr-cielo-ink:#b9dcf6; --pr-azul:#1d2b52; --pr-azul-ink:#b8cdfa; --pr-turquesa:#153d39; --pr-turquesa-ink:#a8e6de; --pr-oliva:#373c12; --pr-oliva-ink:#e0e0a8; --pr-gris:#2c2d31; --pr-gris-ink:#dedee3;
  --pr-closed:#7a2019; --pr-closed-ink:#ffd9d5;
}
.pr-wrap{display:flex;flex-direction:column;gap:14px;min-width:0;}
.pr-bar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between;}
.pr-mnav{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.pr-flip{transform:rotate(180deg);}
.pr-y{font-weight:800;font-size:13px;background:var(--pr-band);color:var(--pr-head-ink);padding:5px 10px;border-radius:8px;font-variant-numeric:tabular-nums;}
.pr-m{margin:0;font-size:26px;font-weight:800;letter-spacing:.02em;text-transform:uppercase;color:var(--text);min-width:170px;}
.pr-layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:16px;align-items:start;}
@media (max-width:1180px){.pr-layout{grid-template-columns:minmax(0,1fr);}}
.pr-main{display:flex;flex-direction:column;gap:10px;min-width:0;}

/* calendario */
.pr-cal{border:1px solid var(--border);border-radius:12px;overflow:hidden;background:var(--surface);}
.pr-head,.pr-week{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));}
.pr-head div{background:var(--pr-head);color:var(--pr-head-ink);font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:6px 8px;}
.pr-head div:nth-child(n+5){background:var(--pr-head2);}
.pr-day{position:relative;min-height:132px;display:flex;flex-direction:column;background:var(--surface);color:var(--text);border:0;border-top:1px solid var(--border);border-right:1px solid var(--border);border-radius:0;padding:0;margin:0;text-align:left;font:inherit;min-width:0;}
.pr-week .pr-day:last-child{border-right:0;}
button.pr-day{cursor:pointer;}
button.pr-day:hover{box-shadow:inset 0 0 0 2px var(--accent);z-index:1;}
button.pr-day:focus-visible{outline:2px solid var(--accent);outline-offset:-2px;z-index:2;}
.pr-day.pr-out{background:var(--surface-2);}
.pr-num{display:flex;align-items:center;justify-content:flex-end;gap:6px;background:var(--accent-soft);color:var(--accent-strong);padding:2px 8px;font-variant-numeric:tabular-nums;}
.pr-num b{font-size:16px;font-weight:800;}
.pr-wd{display:none;}
.pr-hoy{margin-right:auto;font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;}
.pr-today .pr-num{background:var(--accent-fill,var(--accent));color:#fff;}
.pr-stripe{height:8px;background:var(--pr-band);flex-shrink:0;}
.pr-body{flex:1;display:flex;flex-direction:column;gap:3px;padding:7px 8px 8px;font-size:12px;line-height:1.35;min-width:0;overflow-wrap:anywhere;}
.pr-past .pr-body{opacity:.78;}
.pr-drink{font-weight:700;text-transform:uppercase;}
.pr-drink small{font-weight:600;text-transform:none;font-size:11.5px;}
.pr-deal{font-weight:600;}
.pr-hh{text-transform:uppercase;font-size:11.5px;}
.pr-hl{font-weight:800;text-transform:uppercase;}
.pr-closed{margin-top:auto;font-weight:700;text-transform:uppercase;font-size:12px;}
.pr-add{margin:auto;display:inline-flex;align-items:center;gap:4px;color:var(--text-faint);font-size:12px;opacity:0;transition:opacity .12s ease;}
button.pr-day:hover .pr-add,button.pr-day:focus-visible .pr-add{opacity:1;}
@media (hover:none){.pr-add{opacity:.75;}}
.pr-t-crema .pr-body{background:var(--pr-crema);color:var(--pr-crema-ink);}
.pr-t-oro .pr-body{background:var(--pr-oro);color:var(--pr-oro-ink);}
.pr-t-rosa .pr-body{background:var(--pr-rosa);color:var(--pr-rosa-ink);}
.pr-t-menta .pr-body{background:var(--pr-menta);color:var(--pr-menta-ink);}
.pr-t-lima .pr-body{background:var(--pr-lima);color:var(--pr-lima-ink);}
.pr-t-lila .pr-body{background:var(--pr-lila);color:var(--pr-lila-ink);}
.pr-t-naranja .pr-body{background:var(--pr-naranja);color:var(--pr-naranja-ink);}
.pr-t-coral .pr-body{background:var(--pr-coral);color:var(--pr-coral-ink);}
.pr-t-fucsia .pr-body{background:var(--pr-fucsia);color:var(--pr-fucsia-ink);}
.pr-t-cielo .pr-body{background:var(--pr-cielo);color:var(--pr-cielo-ink);}
.pr-t-azul .pr-body{background:var(--pr-azul);color:var(--pr-azul-ink);}
.pr-t-turquesa .pr-body{background:var(--pr-turquesa);color:var(--pr-turquesa-ink);}
.pr-t-oliva .pr-body{background:var(--pr-oliva);color:var(--pr-oliva-ink);}
.pr-t-gris .pr-body{background:var(--pr-gris);color:var(--pr-gris-ink);}
.pr-is-closed .pr-body{background:var(--pr-closed);color:var(--pr-closed-ink);}
.pr-legend{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center;font-size:12px;color:var(--text-muted);}
.pr-legend>span{display:inline-flex;align-items:center;gap:6px;}
.pr-legend i{width:12px;height:12px;border-radius:3px;display:inline-block;}
.pr-sw-num{background:var(--accent-soft);box-shadow:inset 0 0 0 1px var(--border-strong);}.pr-sw-today{background:var(--accent-fill,var(--accent));}.pr-sw-closed{background:var(--pr-closed);}
@media (prefers-reduced-motion:reduce){.pr-add{transition:none;}}

/* celular: agenda de días en lista */
@media (max-width:760px){
  .pr-head{display:none;}
  .pr-week{grid-template-columns:1fr;}
  .pr-day{flex-direction:row;min-height:64px;border-right:0;}
  .pr-day.pr-out{display:none;}
  .pr-num{flex-direction:column;justify-content:center;gap:0;width:58px;flex-shrink:0;padding:8px 4px;}
  .pr-num b{font-size:20px;}
  .pr-wd{display:block;font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;}
  .pr-hoy{margin:0 0 1px;font-size:9px;}
  .pr-stripe{width:6px;height:auto;}
  .pr-add{opacity:1;margin:auto 0;}
  .pr-m{min-width:0;font-size:22px;}
}

/* panel lateral */
.pr-side{display:flex;flex-direction:column;gap:14px;min-width:0;}
.pr-panel{padding:14px;display:flex;flex-direction:column;gap:12px;}
.pr-panel h4{margin:0;font-size:14px;}
.pr-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;text-align:center;}
.pr-stats div{background:var(--surface-2);border-radius:8px;padding:8px 2px;display:flex;flex-direction:column;}
.pr-stats b{font-size:18px;font-variant-numeric:tabular-nums;}
.pr-stats span{font-size:10.5px;color:var(--text-muted);}
.pr-today-line{margin:0;font-size:13px;}
.pr-srow{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:13px;cursor:pointer;}
.pr-srow>span:first-child{display:flex;flex-direction:column;gap:2px;min-width:0;}
.pr-srow b{font-weight:600;}
.pr-srow input[type=time]{width:110px;flex-shrink:0;}
.pr-switch{position:relative;width:40px;height:24px;flex-shrink:0;display:inline-block;}
.pr-switch input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer;z-index:1;}
.pr-switch span{position:absolute;inset:0;background:var(--border-strong);border-radius:99px;transition:background .15s ease;}
.pr-switch span::after{content:"";position:absolute;left:3px;top:3px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.25);transition:transform .15s ease;}
.pr-switch input:checked+span{background:var(--accent);}
.pr-switch input:checked+span::after{transform:translateX(16px);}
.pr-switch input:focus-visible+span{outline:2px solid var(--accent);outline-offset:2px;}
@media (prefers-reduced-motion:reduce){.pr-switch span,.pr-switch span::after{transition:none;}}
.pr-ppl summary{cursor:pointer;font-size:13px;}
.pr-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px;}
.pr-phone{background:var(--surface-2);border:1px solid var(--border);border-radius:14px;padding:10px;}
.pr-notif{background:var(--surface);border-radius:12px;box-shadow:var(--shadow-sm);padding:10px 12px;display:flex;gap:10px;font-size:12.5px;align-items:flex-start;}
.pr-notif>div{min-width:0;flex:1;}
.pr-notif p{margin:2px 0 0;overflow-wrap:anywhere;}
.pr-app{width:26px;height:26px;border-radius:7px;background:var(--accent-fill,var(--accent));color:#fff;display:grid;place-items:center;flex-shrink:0;}
.pr-nt{display:flex;justify-content:space-between;gap:8px;font-weight:600;}
.pr-nt span:last-child{color:var(--text-muted);font-weight:500;font-variant-numeric:tabular-nums;}

/* modal del día */
.pr-ovbox{width:min(780px,100%);}
.pr-mgrid{display:grid;grid-template-columns:minmax(0,1fr) 220px;gap:18px;align-items:start;}
@media (max-width:680px){.pr-mgrid{grid-template-columns:minmax(0,1fr);}.pr-pcol{order:-1;}}
.pr-form{display:flex;flex-direction:column;gap:14px;min-width:0;}
.pr-lbl{font-size:12.5px;font-weight:600;color:var(--text-muted);}
.pr-seg{flex-wrap:wrap;align-self:flex-start;}
.pr-group{border:1px solid var(--border);border-radius:12px;padding:10px 12px 12px;margin:0;display:flex;flex-direction:column;gap:12px;background:var(--surface-2);min-width:0;}
.pr-group legend{font-weight:700;font-size:13px;padding:0 4px;}
.pr-leg-row{display:flex;align-items:center;gap:10px;}
.pr-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;}
.pr-pair input[type=time],.pr-srow input[type=time]{border:1px solid var(--border-strong);background:var(--surface);color:var(--text);border-radius:10px;padding:9px 10px;font:inherit;}
.pr-combo .pl-cb-list{max-height:min(280px,40vh);}
.pr-combo .pl-cb-opt{justify-content:space-between;}
.pr-swatches{display:flex;gap:8px;flex-wrap:wrap;}
.pr-swb{width:32px;height:32px;border-radius:50%;border:2px solid var(--surface);box-shadow:0 0 0 1px var(--border-strong);padding:0;cursor:pointer;display:grid;place-items:center;}
.pr-swb span{width:100%;height:100%;border-radius:50%;}
.pr-swb.pr-t-crema span{background:var(--pr-crema);}.pr-swb.pr-t-oro span{background:var(--pr-oro);}.pr-swb.pr-t-rosa span{background:var(--pr-rosa);}
.pr-swb.pr-t-menta span{background:var(--pr-menta);}.pr-swb.pr-t-lima span{background:var(--pr-lima);}.pr-swb.pr-t-lila span{background:var(--pr-lila);}
.pr-swb.pr-t-naranja span{background:var(--pr-naranja);}.pr-swb.pr-t-coral span{background:var(--pr-coral);}.pr-swb.pr-t-fucsia span{background:var(--pr-fucsia);}.pr-swb.pr-t-cielo span{background:var(--pr-cielo);}.pr-swb.pr-t-azul span{background:var(--pr-azul);}.pr-swb.pr-t-turquesa span{background:var(--pr-turquesa);}.pr-swb.pr-t-oliva span{background:var(--pr-oliva);}.pr-swb.pr-t-gris span{background:var(--pr-gris);}
.pr-swb[aria-pressed="true"]{box-shadow:0 0 0 3px var(--accent);}
.pr-check{display:flex;gap:10px;align-items:flex-start;font-size:13px;cursor:pointer;}
.pr-check input{margin-top:3px;accent-color:var(--accent);width:18px;height:18px;flex-shrink:0;}
.pr-check>span{display:flex;flex-direction:column;gap:2px;}
.pr-pcol{display:flex;flex-direction:column;gap:8px;min-width:0;}
.pr-pcol .pr-day{min-height:140px;border:1px solid var(--border);border-radius:10px;overflow:hidden;}
@media (max-width:760px){.pr-pcol .pr-day{min-height:64px;}}
.pl-ovfoot .btn.pr-delbtn{margin-right:auto;color:var(--danger);background:var(--danger-soft);}
.pr-askdel{align-items:center;}
.pr-askdel>span{margin-right:auto;font-weight:600;}

/* base de tragos */
.pr-drop{display:flex;flex-direction:column;gap:8px;align-items:flex-start;border:2px dashed var(--border-strong);border-radius:12px;padding:16px;cursor:pointer;}
.pr-drop b{display:inline-flex;align-items:center;gap:8px;}
.pr-impprev{display:flex;flex-direction:column;gap:10px;}
.pr-tblwrap{max-height:min(320px,45vh);overflow:auto;border:1px solid var(--border);border-radius:10px;}
.pr-tbl{width:100%;border-collapse:collapse;font-size:13px;}
.pr-tbl th,.pr-tbl td{text-align:left;padding:6px 10px;border-bottom:1px solid var(--border);}
.pr-tbl th{position:sticky;top:0;background:var(--surface);font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--text-faint);}
.pr-st-new{color:var(--success);font-weight:600;}
.pr-st-upd{color:var(--warning);font-weight:600;}
.pr-addrow{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) auto;gap:10px;align-items:end;}
@media (max-width:560px){.pr-addrow{grid-template-columns:minmax(0,1fr);}}
.pr-dhead{justify-content:space-between;}
.pr-dhead input{max-width:200px;}
.pr-dlist{display:flex;flex-direction:column;max-height:min(300px,40vh);overflow:auto;border:1px solid var(--border);border-radius:10px;}
.pr-dlist .pl-hint{padding:12px;margin:0;}
.pr-drow{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:6px 6px 6px 12px;border-bottom:1px solid var(--border);font-size:13px;}
.pr-drow:last-child{border-bottom:0;}
.pr-drow>span:first-child{min-width:0;overflow-wrap:anywhere;}
.pr-delq{display:inline-flex;align-items:center;gap:6px;flex-shrink:0;font-size:12px;}

/* aviso «Promo de hoy» al abrir la app */
.pr-banner{display:flex;align-items:center;gap:12px;background:var(--accent-fill,var(--accent));color:#fff;border-radius:14px;padding:12px 14px;margin-bottom:14px;box-shadow:var(--shadow);}
.pr-banner-ico{width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.2);display:grid;place-items:center;flex-shrink:0;}
.pr-banner-t{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1;}
.pr-banner-t b{font-size:14.5px;}
.pr-banner-t span{font-size:13px;opacity:.95;overflow-wrap:anywhere;}
.pr-banner .pr-banner-go{background:rgba(255,255,255,.95);color:var(--accent-strong);border:0;flex-shrink:0;}
.pr-banner .pr-banner-x{background:transparent;color:#fff;border:0;flex-shrink:0;}
.nt-banner .nt-time{font-weight:500;opacity:.85;font-size:12.5px;}
.nt-banner .pr-banner-t span{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.nt-banner .nt-more{background:rgba(255,255,255,.18);color:#fff;border:0;flex-shrink:0;}
.nt-banner + .pr-banner{margin-top:-6px;}
@media (max-width:560px){.nt-banner .nt-more{margin-left:48px;}.nt-banner .nt-more + .pr-banner-go{margin-left:0;}.nt-banner .pr-banner-x{margin-left:auto;}}
@media (max-width:560px){.pr-banner{flex-wrap:wrap;}.pr-banner-t{flex-basis:calc(100% - 100px);}.pr-banner .pr-banner-go{margin-left:48px;}}
.pr-conflict{display:flex;flex-direction:column;gap:4px;align-items:flex-start;background:var(--warning-soft);color:var(--text);border:1px solid var(--warning);border-radius:12px;padding:10px 12px;font-size:13px;}
.pr-conflict b{color:var(--warning);}
.pr-conflict .btn{margin-top:4px;}

/* ============================================================
   v2026101571 · Lista de sugerencias completa (celular y escritorio)
   ============================================================ */
/* El texto fijo «Elige de la lista…» sigue oculto aunque ahora lo siga el contador. */
.mt-2 > .helper-text:has(+ .suggest-count){display:none;}
.suggest-count{font-size:12px;color:var(--text-faint);padding:2px 4px 8px;}
.suggest-more{display:block;width:100%;min-height:44px;padding:12px;border:0;background:transparent;color:var(--accent);font:inherit;font-size:13px;font-weight:600;cursor:pointer;}
.suggest-more:hover{background:var(--accent-soft);}

/* ============================================================
   v2026101571 · CELULAR: búsqueda a pantalla completa (como BoxHero)
   El buscador de Ingresos, Salidas, Mi Departamento, Nueva Solicitud y
   Panel General pasa a ser un botón; al tocarlo se abre .msearch, que
   tapa toda la pantalla (con el alto visible real: --app-vh/--app-vt,
   así no queda nada detrás del teclado) y SOLO scrollea la lista.
   ============================================================ */
.msearch-trigger{flex:1;min-width:0;display:flex;align-items:center;gap:10px;height:44px;padding:0 14px;
  border:1px solid var(--border);border-radius:12px;background:var(--surface);color:var(--text-faint);
  font:inherit;font-size:15px;text-align:left;cursor:pointer;}
.msearch-trigger > span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.msearch-trigger.has-q{color:var(--text);}
.msearch-trigger:active{background:var(--accent-soft);}

.msearch{position:fixed;left:0;right:0;top:var(--app-vt,0px);height:100vh;height:var(--app-vh,100dvh);z-index:70;
  display:flex;flex-direction:column;background:var(--bg);padding-top:env(safe-area-inset-top);
  animation:fadeIn .12s ease;}
html:has(.msearch){overflow:hidden;}
/* v2026101573: la capa vive en #msearchHost (hijo de <body>, fuera de la app). Mientras está abierta, la app de
   atrás (.shell: encabezado, pestaña y pie) se esconde del todo: en el iPhone el encabezado quedaba ENCIMA de
   la capa y tapaba la ✕, sin forma de salir. Las ventanas (cantidad, carrito, escáner) van en <body> y sí se ven. */
html:has(#msearchHost .msearch) .shell{visibility:hidden;}
#msearchHost .msearch{z-index:90;}
.msearch-bar{display:flex;align-items:center;gap:6px;padding:10px 12px 8px 4px;flex-shrink:0;}
.msearch-x{flex-shrink:0;width:44px;height:44px;border:0;border-radius:12px;background:transparent;color:var(--text);
  display:flex;align-items:center;justify-content:center;cursor:pointer;}
.msearch-x:active{background:var(--border);}
.msearch-box{flex:1;min-width:0;}
.msearch-box input{width:100%;height:44px;font-size:16px;border-radius:12px;}   /* 16px: iPhone no hace zoom al enfocar */
.msearch-bar .camera-scan-btn{width:44px;height:44px;border-radius:12px;}
.msearch-info{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:32px;padding:0 14px 8px;flex-shrink:0;
  font-size:13px;font-weight:600;color:var(--text-muted);}
.msearch-info:empty{display:none;}
.msearch-dest{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.msearch-list{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
  padding:0 10px calc(16px + env(safe-area-inset-bottom));}
.msearch-list .suggest-list{max-height:none;margin-top:0;background:var(--surface);}
/* La lista «tall» de la pantalla calcula su alto contra la página (--list-fill-top); dentro de la capa no:
   ahí crece entera y el único scroll es el de .msearch-list. */
.msearch .msearch-list .suggest-list,
.msearch .msearch-list .suggest-list.suggest-list-tall{height:auto !important;max-height:none !important;min-height:0;overflow:visible !important;flex:none !important;}
.msearch-list > .helper-text.mb-2{display:none;}   /* «Elige de la lista…» (el aviso «Sin resultados» sí se ve) */
.msearch-list .dash-art-wrap > .suggest-list{max-height:none;}
.msearch-list .suggest-item{min-height:60px;}
.msearch-list .suggest-item .meta b{white-space:normal;}

/* Destino de Salidas (celular): botón que abre la hoja "Seleccionar destino" en vez del <select>. */
.dest-trigger{width:100%;display:flex;align-items:center;gap:10px;height:44px;padding:0 12px;
  border:1px solid var(--border);border-radius:12px;background:var(--surface);color:var(--text);
  font:inherit;font-size:15px;font-weight:600;text-align:left;cursor:pointer;}
.dest-trigger .dest-trigger-txt{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.dest-trigger.is-empty{color:var(--text-faint);font-weight:500;}
.dest-trigger .dept-dot{width:10px;height:10px;flex-shrink:0;}
.dest-trigger:active{background:var(--accent-soft);}

/* Hoja "Seleccionar destino": filas grandes para el dedo, con la elegida marcada. */
.modal-panel.bsheet{max-width:480px;will-change:transform;}
.modal-panel.bsheet .modal-head{touch-action:none;}
.bsheet-list{display:flex;flex-direction:column;padding-bottom:8px;}
.bsheet-row{display:flex;align-items:center;gap:12px;width:100%;min-height:52px;padding:10px 6px;border:0;border-bottom:1px solid var(--border);
  background:transparent;color:var(--text);font:inherit;text-align:left;cursor:pointer;}
.bsheet-row:last-child{border-bottom:0;}
.bsheet-row:active{background:var(--accent-soft);}
.bsheet-row .dept-dot{width:12px;height:12px;flex-shrink:0;margin:0 4px;}
.bsheet-ic{display:flex;color:var(--text-faint);}
.bsheet-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;}
.bsheet-txt b{font-size:15px;font-weight:600;}
.bsheet-txt small{font-size:12px;color:var(--text-faint);}
.bsheet-row.is-sel .bsheet-txt b{color:var(--accent);}
.bsheet-check{display:flex;color:var(--accent);}

@media (prefers-reduced-motion: reduce){
  .msearch{animation:none;}
  .modal-panel.bsheet{transition:none !important;}
}

/* v2026101573 — Hoja genérica para elegir (celular): Destino, Departamento (Root), Proveedor y
   Motivo de la salida. Va en su propia capa sobre cualquier ventana abierta (z-index 120:
   sobre el Carrito de Compra a pantalla completa, bajo el teclado numérico y los avisos). */
.sp-backdrop{z-index:120;}
.sp-panel{max-width:480px;}
.sp-panel .modal-head{touch-action:none;}
@media (max-width: 640px){
  .sp-panel{animation:slideUp .2s ease;}
}
/* Selector de departamento en el encabezado de Mi Departamento (Root): versión compacta. */
.dest-trigger.dest-trigger-inline{width:auto;max-width:100%;height:38px;font-size:14px;}
@media (prefers-reduced-motion: reduce){
  .sp-panel{animation:none;transition:none !important;}
}
.dept-chip .dest-trigger-inline > .dept-dot{display:none;}

/* v2026101573 · iPhone: con la búsqueda a pantalla completa o una hoja abierta, la página de atrás no rebota. */
html:has(#msearchHost .msearch), html:has(#msearchHost .msearch) body,
html:has(#spLayer), html:has(#spLayer) body{overscroll-behavior:none;}
.msearch-list{overscroll-behavior-y:contain;}
.dash-art-wrap .suggest-more{grid-column:1 / -1;}

/* v2026101579 · Ficha del artículo: pestañas Detalles / Inventario, ubicaciones e historial por ubicación */
.fa-body > *{flex-shrink:0;}
.fa-seg{display:flex;border-bottom:1px solid var(--border);}
.fa-seg-b{flex:1;padding:11px 8px;background:transparent;border:0;border-bottom:2px solid transparent;margin-bottom:-1px;color:var(--text-muted);font:inherit;font-size:14.5px;font-weight:700;cursor:pointer;}
.fa-seg-b.active{color:var(--accent-strong);border-bottom-color:var(--accent);}
.fa-inv-tools{display:flex;gap:8px;align-items:center;}
.fa-chip{border:1px solid var(--border-strong);background:var(--surface);color:var(--text);border-radius:999px;padding:7px 13px;font:inherit;font-size:13px;font-weight:600;cursor:pointer;white-space:nowrap;display:inline-flex;align-items:center;gap:4px;}
.fa-chip.is-on{background:var(--accent-soft);border-color:var(--accent);color:var(--accent-strong);}
.fa-loc-list{border:1px solid var(--border);border-radius:12px;overflow:hidden;background:var(--surface);}
.fa-loc-row{display:flex;align-items:center;gap:10px;width:100%;padding:13px 14px;background:transparent;border:0;border-bottom:1px solid var(--border);color:var(--text);font:inherit;text-align:left;cursor:pointer;min-height:48px;}
.fa-loc-row:last-child{border-bottom:0;}
.fa-loc-row:active{background:var(--accent-soft);}
.fa-loc-row > svg{color:var(--text-faint);flex:0 0 auto;}
.fa-loc-ic{display:inline-flex;color:var(--accent-strong);}
.fa-loc-name{flex:1;min-width:0;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.fa-loc-qty{font-size:15px;font-weight:800;}
.fa-loc-qty.is-low{color:var(--danger);}
.fa-loc-row.is-zero .fa-loc-qty,.fa-loc-row.is-zero .fa-loc-name{color:var(--text-faint);}
.fa-loc-total{display:flex;align-items:baseline;gap:6px;padding:2px 4px;color:var(--text-muted);font-size:13px;}
.fa-loc-total span{flex:1;}
.fa-loc-total b{font-size:16px;color:var(--text);}
.fa-kv{border:1px solid var(--border);border-radius:12px;overflow:hidden;background:var(--surface);}
.fa-kv-r{display:flex;justify-content:space-between;gap:12px;padding:11px 14px;border-bottom:1px solid var(--border);font-size:14px;}
.fa-kv-r:last-child{border-bottom:0;}
.fa-kv-r small{color:var(--text-muted);font-size:13px;}
.fa-kv-r b{text-align:right;font-weight:600;}
.fa-loc-head{display:flex;align-items:center;gap:12px;padding:12px 14px;border:1px solid var(--border);border-radius:12px;background:var(--surface);}
.fa-loc-head small{display:block;}
.fa-loc-head-n{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.fa-loc-head-q{text-align:right;}
.fa-loc-head-q b{display:block;font-size:22px;line-height:1.1;}
.fa-loc-head-q small{color:var(--text-muted);}
.fa-mv-list{border:1px solid var(--border);border-radius:12px;overflow:hidden;background:var(--surface);}
.fa-mv{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:10px;align-items:start;padding:11px 14px;border-bottom:1px solid var(--border);}
.fa-mv:last-child{border-bottom:0;}
.fa-mv-ic{width:30px;height:30px;border-radius:9px;display:inline-flex;align-items:center;justify-content:center;}
.fa-mv-ic.is-in{background:var(--success-soft);color:var(--success);}
.fa-mv-ic.is-out{background:var(--danger-soft);color:var(--danger);}
.fa-mv-main{display:flex;flex-direction:column;gap:1px;min-width:0;}
.fa-mv-main b{font-size:14px;}
.fa-mv-main small{font-size:12.5px;color:var(--text-muted);overflow-wrap:anywhere;}
.fa-mv-main small.text-faint{color:var(--text-faint);}
.fa-mv-q{text-align:right;display:flex;flex-direction:column;}
.fa-mv-q b{font-size:15px;}
.fa-mv-q b.is-in{color:var(--success);}
.fa-mv-q b.is-out{color:var(--danger);}
.fa-mv-q small{color:var(--text-muted);font-size:12px;}
.modal-foot .fa-act-move{grid-column:1 / -1;flex-direction:row;min-height:48px;font-size:14.5px;}