/* =====================================================================
   Sistema POS Universal · hoja de estilos
   Light, minimalista, densidad alta. Optimizada para escritorio y táctil.
   ===================================================================== */

:root{
  --bg:#f6f7f9;
  --surface:#ffffff;
  --surface-2:#f8fafc;
  --surface-3:#f1f5f9;
  --border:#e5e8ec;
  --border-strong:#cbd5e1;

  --text:#0f172a;
  --text-2:#475569;
  --text-3:#94a3b8;

  --brand:#343434;
  --brand-dark:#1a1a1a;
  --brand-soft:#f1f1f1;
  --brand-border:#d1d1d1;

  --ok:#16a34a;      --ok-soft:#f0fdf4;   --ok-border:#bbf7d0;
  --warn:#d97706;    --warn-soft:#fffbeb; --warn-border:#fde68a;
  --danger:#dc2626;  --danger-soft:#fef2f2;--danger-border:#fecaca;
  --info:#0891b2;    --info-soft:#ecfeff;

  --radius:12px;
  --radius-sm:9px;
  --radius-lg:16px;
  --shadow-sm:0 1px 2px rgba(15,23,42,.05);
  --shadow:0 2px 8px rgba(15,23,42,.07);
  --shadow-lg:0 12px 32px rgba(15,23,42,.14);  --sidebar-w-expanded:236px;
  --sidebar-w-collapsed:70px;
  --sidebar-w:var(--sidebar-w-expanded);
  --header-h:58px;
  --font:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  --mono:ui-monospace,'SF Mono',Menlo,Consolas,'Liberation Mono',monospace;
}

html.sidebar-collapsed{
  --sidebar-w:var(--sidebar-w-collapsed);
}

*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}
body{overflow-x:hidden}
body{
  margin:0;background:var(--bg);color:var(--text);
  font-family:var(--font);font-size:14px;line-height:1.5;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
a{color:var(--brand);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3,h4{margin:0;font-weight:640;letter-spacing:-.011em;line-height:1.25}
p{margin:0 0 .75rem}
hr{border:0;border-top:1px solid var(--border);margin:1.25rem 0}
::selection{background:#dbeafe}

/* Scrollbars discretos */
*::-webkit-scrollbar{width:10px;height:10px}
*::-webkit-scrollbar-track{background:transparent}
*::-webkit-scrollbar-thumb{background:#d3d9e0;border-radius:99px;border:2px solid var(--bg)}
*::-webkit-scrollbar-thumb:hover{background:#b6bfca}

/* ====================================================== ESTRUCTURA */
.app{display:flex;min-height:100vh}

.sidebar{
  width:var(--sidebar-w);flex:0 0 var(--sidebar-w);
  background:#ffffff;border-right:1px solid #e2e8f0;
  display:flex;flex-direction:column;position:fixed;inset:0 auto 0 0;z-index:60;
  box-shadow: 1px 0 10px rgba(0,0,0,.02);
  transition:width .2s ease;
}
.sidebar:has(.management-flyout-wrapper.open){
  overflow:visible !important;
}
.sidebar-brand{
  height:var(--header-h);display:flex;align-items:center;gap:.6rem;
  padding:0 1.25rem;flex:0 0 auto;position:relative;
}
.sidebar-toggle-btn{
  margin-left:auto;background:transparent;border:0;cursor:pointer;
  color:var(--text-3);border-radius:6px;padding:3px;display:flex;
  align-items:center;justify-content:center;transition:background .15s,color .15s;
}
.sidebar-toggle-btn:hover{background:var(--surface-3);color:var(--text)}
.sidebar-toggle-btn .material-symbols-outlined{font-size:20px;transition:transform .2s ease}
html.sidebar-collapsed .sidebar-toggle-btn .material-symbols-outlined{transform:rotate(180deg)}

.brand-mark{
  width:31px;height:31px;border-radius:99px;background:var(--brand);color:#fff;
  display:grid;place-items:center;font-weight:700;font-size:.72rem;letter-spacing:.02em;flex:0 0 auto;
}
/* Con logo cargado el cuadro cede el sitio a la imagen: ancho libre y alto fijo,
   para que un logo apaisado no quede reducido a una banda dentro de un cuadrado. */
.brand-mark.has-logo{
  width:auto;max-width:118px;height:34px;background:transparent;border-radius:6px;
  padding:0;display:block;
}
.brand-mark.has-logo img{height:100%;width:auto;max-width:118px;object-fit:contain;display:block}
/* Sin nombre al lado, el logo dispone de todo el ancho de la cabecera. */
.sidebar-brand.only-logo{justify-content:flex-start}
.sidebar-brand.only-logo .brand-mark.has-logo,
.sidebar-brand.only-logo .brand-mark.has-logo img{max-width:172px;height:38px}
.brand-text{min-width:0}.brand-text b{display:block;font-size:.86rem;font-weight:650;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.brand-text span{display:block;font-size:.68rem;color:var(--text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.nav{flex:1;padding:.5rem .75rem 1rem}
.nav-group{margin-bottom:.35rem}
.nav-label{
  font-size:.66rem;text-transform:uppercase;letter-spacing:.07em;color:var(--text-3);
  font-weight:640;padding:.85rem .55rem .35rem;display:block;
}

/* Menú flyout / tooltip para GESTIÓN (estilo WordPress) */
.management-flyout-wrapper{position:relative;margin-top:.4rem;margin-bottom:.35rem}
.nav-management-btn{
  width:100%;display:flex;align-items:center;gap:.6rem;padding:.55rem .7rem;border-radius:var(--radius-sm);
  color:var(--text-2);font-size:.845rem;font-weight:520;background:transparent;border:0;cursor:pointer;
  font:inherit;text-align:left;transition:background .12s,color .12s;
}
.nav-management-btn:hover{background:var(--surface-3);color:var(--text)}
.nav-management-btn.active,.management-flyout-wrapper.is-active .nav-management-btn{
  background:var(--brand-soft);color:var(--brand-dark);font-weight:600;
}
.nav-management-btn .ico{width:20px;height:20px;font-size:20px;display:inline-flex;align-items:center;justify-content:center;flex:0 0 20px;opacity:.85}
.nav-management-btn.active .ico,.management-flyout-wrapper.is-active .nav-management-btn .ico{opacity:1;color:var(--brand-dark)}
.nav-management-btn .flyout-arrow{margin-left:auto;font-size:18px;opacity:.6;transition:transform .15s ease}
.management-flyout-wrapper.open .nav-management-btn .flyout-arrow{transform:rotate(90deg);opacity:1}

.management-flyout-menu{
  display:none;position:absolute;left:calc(100% + 8px);bottom:-10px;z-index:99999;
  width:220px;max-height:calc(100vh - 40px);overflow-y:auto;background:#ffffff;
  border:1px solid var(--border,#e2e8f0);border-radius:var(--radius,8px);
  box-shadow:0 10px 25px -5px rgba(15,23,42,.18), 0 4px 6px -2px rgba(15,23,42,.08);
  padding:.4rem 0;animation:flyoutPop .15s ease-out;
}
.management-flyout-wrapper.open .management-flyout-menu{display:block}
@keyframes flyoutPop{from{opacity:0;transform:translateX(-6px)}to{opacity:1;transform:none}}

.management-flyout-menu .flyout-header{
  padding:.4rem .85rem .25rem;font-size:.65rem;font-weight:700;letter-spacing:.08em;
  color:var(--text-3);text-transform:uppercase;border-bottom:1px solid var(--border,#f1f5f9);margin-bottom:.3rem;
  position:sticky;top:0;background:#ffffff;z-index:1;
}
.management-flyout-menu .flyout-item{
  display:flex;align-items:center;gap:.6rem;padding:.48rem .85rem;color:var(--text-2,#475569);
  font-size:.83rem;font-weight:500;text-decoration:none;transition:all .12s ease;
}
.management-flyout-menu .flyout-item:hover{background:var(--surface-3,#f1f5f9);color:var(--text,#0f172a);text-decoration:none}
.management-flyout-menu .flyout-item.active{background:var(--brand-soft,#eff6ff);color:var(--brand-dark,#1e40af);font-weight:600}
.management-flyout-menu .flyout-item .ico{font-size:18px;width:18px;height:18px;display:inline-flex;align-items:center;justify-content:center;opacity:.8}
.management-flyout-menu .flyout-item.active .ico{opacity:1;color:var(--brand-dark,#1e40af)}

.nav a{
  display:flex;align-items:center;gap:.6rem;padding:.55rem .7rem;border-radius:var(--radius-sm);
  color:var(--text-2);font-size:.845rem;font-weight:520;text-decoration:none;margin-bottom:2px;
  transition:background .12s,color .12s;
}
.nav a:hover{background:var(--surface-3);color:var(--text);text-decoration:none}
.nav a.active{background:var(--brand-soft);color:var(--brand-dark);font-weight:600}
.nav a .ico{width:20px;height:20px;font-size:20px;display:inline-flex;align-items:center;justify-content:center;flex:0 0 20px;opacity:.85}
.nav a.active .ico{opacity:1;color:var(--brand-dark)}
.nav a .count{
  margin-left:auto;font-size:.68rem;font-weight:640;padding:.05rem .38rem;border-radius:99px;
  background:var(--danger-soft);color:var(--danger);
}
.nav a .shortcut-hint{
  margin-left:auto;font-size:.65rem;font-family:var(--mono);background:var(--surface-3);
  border:1px solid var(--border);color:var(--text-3);padding:.05rem .3rem;border-radius:4px;
}

/* POS Hero Button Item con Color de Marca Personalizado */
.nav a.nav-pos-hero{
  background:var(--brand-soft);border:1px solid var(--brand-border);color:var(--brand-dark);
  padding:.6rem .75rem;margin-top:.2rem;margin-bottom:.6rem;
  border-radius:var(--radius-sm);display:flex;align-items:center;gap:.65rem;
  font-weight:650;transition:all .15s ease;box-shadow:0 1px 3px rgba(15,23,42,.04);
}
.nav a.nav-pos-hero:hover{
  background:var(--brand-soft);border-color:var(--brand);color:var(--brand-dark);text-decoration:none;
  transform:translateY(-1px);filter:brightness(0.97);
}
.nav a.nav-pos-hero.active{
  background:var(--brand);border-color:var(--brand-dark);color:var(--brand-ink,#fff);
  box-shadow:0 3px 10px var(--brand-ring);
}
.nav a.nav-pos-hero .ico{
  font-size:22px;width:22px;height:22px;color:var(--brand-dark);opacity:1;
}
.nav a.nav-pos-hero.active .ico{
  color:var(--brand-ink,#fff);
}
.nav a.nav-pos-hero .pos-hero-text{
  display:flex;flex-direction:column;line-height:1.15;flex:1;min-width:0;
}
.nav a.nav-pos-hero .pos-hero-label{
  font-size:.88rem;font-weight:700;letter-spacing:-.01em;
}
.nav a.nav-pos-hero .pos-hero-sub{
  font-size:.68rem;opacity:.85;font-weight:500;
}
.nav a.nav-pos-hero .pos-hero-kbd{
  font-family:var(--mono);font-size:.65rem;padding:.1rem .35rem;border-radius:4px;
  background:rgba(255,255,255,.75);border:1px solid var(--brand-border);color:var(--brand-dark);
  font-weight:600;margin-left:auto;
}
.nav a.nav-pos-hero.active .pos-hero-kbd{
  background:rgba(0,0,0,.18);border-color:rgba(255,255,255,.3);color:var(--brand-ink,#fff);
}

/* Indicador de caja en pie de sidebar */
.sidebar-foot{padding:.75rem;flex:0 0 auto}
.sidebar-cash-box{
  background:#f8fafc;border:1px solid #e2e8f0;border-radius:var(--radius-sm);
  padding:.6rem .75rem;margin-bottom:.6rem;display:flex;flex-direction:column;gap:.2rem;
  transition:all .15s ease;
}
.sidebar-cash-box.open{
  background:#f0fdf4;border-color:#bbf7d0;
}
.sidebar-cash-box.closed{
  background:#fffbeb;border-color:#fde68a;
}
.cash-status-header{
  display:flex;align-items:center;gap:.35rem;font-size:.7rem;font-weight:650;
  text-transform:uppercase;letter-spacing:.03em;
}
.sidebar-cash-box.open .cash-status-header{color:#15803d}
.sidebar-cash-box.closed .cash-status-header{color:#b45309}
.cash-dot{font-size:.68rem;line-height:1}
.sidebar-cash-box.open .cash-dot{color:#16a34a}
.sidebar-cash-box.closed .cash-dot{color:#d97706}
.cash-amount{font-size:1rem;font-weight:700;color:#0f172a;letter-spacing:-.02em;line-height:1.2;margin-top:.1rem}
.cash-subtext{font-size:.68rem;color:#64748b;line-height:1.25}
.cash-action-link{
  font-size:.74rem;font-weight:600;color:#dc2626;text-decoration:none;
  display:inline-flex;align-items:center;gap:.2rem;margin-top:.15rem;
}
.cash-action-link:hover{text-decoration:underline;color:#b91c1c}

.user-chip{display:flex;align-items:center;gap:.55rem;padding:.5rem .6rem;border-radius:var(--radius-sm);background:#f8fafc;border:1px solid #e2e8f0}
.user-chip:hover{background:#f1f5f9}
.avatar{
  width:29px;height:29px;border-radius:50%;background:var(--brand-soft);color:var(--brand-dark);
  display:grid;place-items:center;font-size:.72rem;font-weight:660;flex:0 0 auto;
}
.user-chip .meta{min-width:0;flex:1}
.user-chip .meta b{display:block;font-size:.79rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.user-chip .meta span{display:block;font-size:.68rem;color:var(--text-3)}

/* ESTILOS DEL SIDEBAR COLAPSADO */
html.sidebar-collapsed .brand-text,
html.sidebar-collapsed .nav-label,
html.sidebar-collapsed .flyout-arrow {
  display:none !important;
}
html.sidebar-collapsed .sidebar-brand{
  padding:0 .4rem;
  justify-content:center;
  gap:.35rem;
}
html.sidebar-collapsed .sidebar-brand .sidebar-toggle-btn{
  margin-left:0;
}
html.sidebar-collapsed .sidebar-brand.only-logo .brand-mark.has-logo,
html.sidebar-collapsed .sidebar-brand .brand-mark.has-logo{max-width:32px;overflow:hidden}

html.sidebar-collapsed .nav{padding:.5rem .4rem 1rem}
html.sidebar-collapsed .nav-accordion-btn{
  height:1px;padding:0;margin:.65rem .25rem;background:var(--border);border-radius:99px;border:0;cursor:default;
}
html.sidebar-collapsed .nav-accordion-btn span{display:none !important}
html.sidebar-collapsed .nav-accordion-content{display:block !important}

html.sidebar-collapsed .nav a:not(.flyout-item),
html.sidebar-collapsed .nav-management-btn {
  justify-content:center;padding:.6rem 0;gap:0;position:relative;
}
html.sidebar-collapsed .nav a:not(.flyout-item) span:not(.ico),
html.sidebar-collapsed .nav-management-btn span:not(.ico),
html.sidebar-collapsed .nav a:not(.flyout-item) .shortcut-hint,
html.sidebar-collapsed .nav a:not(.flyout-item) .count,
html.sidebar-collapsed .nav a:not(.flyout-item) .pos-hero-text,
html.sidebar-collapsed .nav a:not(.flyout-item) .pos-hero-kbd{display:none !important}

html.sidebar-collapsed .management-flyout-menu .flyout-item {
  justify-content:flex-start !important;
  padding:.48rem .85rem !important;
  gap:.6rem !important;
}
html.sidebar-collapsed .management-flyout-menu .flyout-item span {
  display:inline !important;
}

html.sidebar-collapsed .nav a.nav-pos-hero{
  padding:.65rem 0;justify-content:center;margin-top:.2rem;margin-bottom:.6rem;
}
html.sidebar-collapsed .nav a.nav-pos-hero .ico{font-size:22px;width:22px;height:22px}

html.sidebar-collapsed .sidebar-foot{padding:.5rem .4rem}
html.sidebar-collapsed .branch-pick{display:none !important}

html.sidebar-collapsed .sidebar-cash-box{
  padding:.5rem 0;align-items:center;justify-content:center;text-decoration:none;
}
html.sidebar-collapsed .sidebar-cash-box .cash-amount,
html.sidebar-collapsed .sidebar-cash-box .cash-subtext,
html.sidebar-collapsed .sidebar-cash-box .cash-action-link,
html.sidebar-collapsed .sidebar-cash-box .cash-status-title{display:none !important}
html.sidebar-collapsed .sidebar-cash-box .cash-status-header{margin:0}
html.sidebar-collapsed .sidebar-cash-box .cash-dot{font-size:1rem}

html.sidebar-collapsed .user-chip{padding:.4rem 0;justify-content:center}
html.sidebar-collapsed .user-chip .meta,
html.sidebar-collapsed .user-chip .btn-icon{display:none !important}

.main{flex:1;min-width:0;margin-left:var(--sidebar-w);display:flex;flex-direction:column;transition:margin-left .2s ease}

.header{
  height:var(--header-h);flex:0 0 auto;background:transparent;
  display:flex;align-items:center;gap:1rem;
  padding:8px 1.5rem 0 1.5rem;z-index:50;
}
.header h1{font-size:1rem;font-weight:640;white-space:nowrap}
.header .sub{font-size:.75rem;color:var(--text-3);margin-left:-.6rem}
.branch-pick select{height:33px;min-height:33px;font-size:.82rem;padding:.2rem 1.7rem .2rem .55rem;max-width:190px}
.header-actions{margin-left:auto;display:flex;align-items:center;gap:.5rem}

.global-search{position:relative;flex:1;max-width:420px}
.global-search input[type=search]{
  width:100%;height:35px;padding:0 .75rem 0 2.1rem;border:1px solid var(--border);
  border-radius:var(--radius-sm);background:var(--surface-2);font:inherit;font-size:.845rem;
}
.global-search input[type=search]:focus{outline:none;background:#fff;border-color:var(--brand);box-shadow:0 0 0 3px rgba(37,99,235,.1)}
.global-search .gs-ico{position:absolute;left:.65rem;top:50%;transform:translateY(-50%);color:var(--text-3);pointer-events:none}
.global-search kbd{position:absolute;right:.5rem;top:50%;transform:translateY(-50%)}
.gs-results{
  position:absolute;top:calc(100% + 6px);left:0;right:0;background:#fff;border:1px solid var(--border);
  border-radius:var(--radius);box-shadow:var(--shadow-lg);max-height:60vh;overflow-y:auto;z-index:80;display:none;
}
.gs-results.open{display:block}
.gs-section{font-size:.66rem;text-transform:uppercase;letter-spacing:.06em;color:var(--text-3);font-weight:640;padding:.6rem .8rem .25rem}
.gs-item{display:flex;align-items:center;gap:.6rem;padding:.5rem .8rem;cursor:pointer;font-size:.85rem}
.gs-item:hover,.gs-item.sel{background:var(--brand-soft)}
.gs-item .t{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gs-item .m{font-size:.74rem;color:var(--text-3);font-family:var(--mono)}

kbd{
  font-family:var(--mono);font-size:.68rem;padding:.1rem .32rem;border-radius:5px;
  background:var(--surface-3);border:1px solid var(--border);color:var(--text-2);
}

.content{flex:1;min-width:0;padding:1.25rem 2rem 3rem;max-width:100%;width:100%}
/* La cadena de contenedores debe poder encogerse; si no, el contenido ancho
   (una tabla, un encabezado largo) estira la página en lugar de desplazarse. */
.card,.stack,.grid,.page-head,.filters,.table-wrap{min-width:0}
.table-wrap{max-width:100%}
.page-head{display:flex;align-items:flex-start;gap:1rem;flex-wrap:wrap;margin-bottom:1.1rem}
.page-head h2{font-size:1.15rem}
.page-head .desc{font-size:.83rem;color:var(--text-3);margin-top:.15rem}
.page-head .spacer{flex:1}

/* ====================================================== COMPONENTES */
.card{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  box-shadow:var(--shadow-sm);margin-bottom:1rem;
}
.card-head{
  display:flex;align-items:center;gap:.75rem;padding:.85rem 1.05rem;border-bottom:1px solid var(--border);
}
.card-head h3{font-size:.9rem;font-weight:620}
.card-head .spacer{flex:1}
.card-head .desc{font-size:.75rem;color:var(--text-3)}
.card-body{padding:1.05rem}
.card-body.tight{padding:.65rem}
.card-foot{padding:.8rem 1.05rem;border-top:1px solid var(--border);background:var(--surface-2);border-radius:0 0 var(--radius) var(--radius)}

.grid{display:grid;gap:1rem}
.g2{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.g4{grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.g5{grid-template-columns:repeat(auto-fit,minmax(165px,1fr))}
.g6{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.row{display:flex;gap:.6rem;align-items:center;flex-wrap:wrap}
.row.end{justify-content:flex-end}
.stack{display:flex;flex-direction:column;gap:.85rem}

/* Tarjetas de indicador */
.stat{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  padding:.95rem 1.05rem;box-shadow:var(--shadow-sm);
}
.stat .label{font-size:.72rem;color:var(--text-3);font-weight:600;text-transform:uppercase;letter-spacing:.04em}
.stat .value{font-size:1.55rem;font-weight:680;letter-spacing:-.025em;margin:.2rem 0 .1rem;line-height:1.15}
.stat .value.sm{font-size:1.2rem}
.stat .foot{font-size:.75rem;color:var(--text-3);display:flex;align-items:center;gap:.35rem}
.stat.accent{border-color:var(--brand-border);background:linear-gradient(180deg,var(--brand-soft),#fff)}
.delta{font-weight:640;font-size:.75rem}
.delta.up{color:var(--ok)}
.delta.down{color:var(--danger)}

/* Botones */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.4rem;
  padding:.5rem .9rem;min-height:35px;border-radius:var(--radius-sm);border:1px solid transparent;
  background:var(--brand);color:#fff;font:inherit;font-size:.845rem;font-weight:600;
  cursor:pointer;text-decoration:none;white-space:nowrap;transition:background .12s,box-shadow .12s,opacity .12s;
}
.btn:hover{background:var(--brand-dark);text-decoration:none;color:#fff}
.btn:active{transform:translateY(.5px)}
.btn:disabled,.btn[disabled]{opacity:.5;cursor:not-allowed}
.btn.ghost{background:var(--surface);border-color:var(--border-strong);color:var(--text-2)}
.btn.ghost:hover{background:var(--surface-2);color:var(--text)}
.btn.subtle{background:var(--surface-3);color:var(--text-2)}
.btn.subtle:hover{background:#e6eaef;color:var(--text)}
.btn.danger{background:var(--danger)}
.btn.danger:hover{background:#b91c1c}
.btn.ok{background:var(--ok)}
.btn.ok:hover{background:#15803d}
.btn.sm{padding:.3rem .6rem;min-height:29px;font-size:.79rem}
.btn.lg{padding:.75rem 1.4rem;min-height:46px;font-size:.95rem;border-radius:var(--radius)}
.btn.block{width:100%}
.btn-icon{
  width:34px;height:34px;min-height:34px;padding:0;border-radius:8px;
  background:#ffffff;border:1px solid #cbd5e1;color:var(--text-2);
  display:inline-flex;align-items:center;justify-content:center;
  cursor:pointer;text-decoration:none;transition:all .15s ease;
}
.btn-icon:hover{background:var(--brand-soft,#f1f5f9) !important;color:var(--brand-dark,var(--brand,#0f172a)) !important;border-color:var(--brand-border,#cbd5e1) !important}
.btn-icon.danger:hover{background:var(--danger-soft,#fef2f2) !important;color:var(--danger,#dc2626) !important;border-color:var(--danger-border,#fecaca) !important}

/* Formularios */
.field{margin-bottom:.85rem}
.field label,.label{display:block;font-size:.775rem;font-weight:620;color:var(--text-2);margin-bottom:.3rem}
.field .hint{font-size:.73rem;color:var(--text-3);margin-top:.25rem}
input[type=text],input[type=number],input[type=password],input[type=email],input[type=date],
input[type=datetime-local],input[type=tel],input[type=search],input[type=file],select,textarea{
  width:100%;padding:.5rem .65rem;min-height:35px;border:1px solid var(--border-strong);
  border-radius:var(--radius-sm);font:inherit;font-size:.86rem;background:#fff;color:var(--text);
}
textarea{min-height:76px;resize:vertical}
select{cursor:pointer;appearance:none;
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='3'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .6rem center;padding-right:1.9rem;
}
input:focus,select:focus,textarea:focus{
  outline:none;border-color:var(--brand);box-shadow:0 0 0 3px rgba(37,99,235,.12);
}
input:disabled,select:disabled,textarea:disabled{background:var(--surface-3);color:var(--text-3);cursor:not-allowed}
input.right,td.right,th.right{text-align:right}
.check{display:flex;align-items:center;gap:.5rem;font-size:.85rem;font-weight:500;cursor:pointer;margin-bottom:.4rem}
.check input{width:16px;height:16px;min-height:0;accent-color:var(--brand);cursor:pointer;flex:0 0 auto}
.money-input{font-family:var(--mono);text-align:right;font-weight:600}

/* Tablas */
.table-wrap{overflow-x:auto;border-radius:var(--radius)}
table.data{width:100%;border-collapse:collapse;font-size:.845rem}
table.data th{
  text-align:left;font-size:.69rem;text-transform:uppercase;letter-spacing:.05em;font-weight:660;
  color:var(--text-3);padding:.6rem .8rem;background:var(--surface-2);
  border-bottom:1px solid var(--border);white-space:nowrap;position:sticky;top:0;z-index:2;
}
table.data td{padding:.6rem .8rem;border-bottom:1px solid var(--border);vertical-align:middle}
table.data tbody tr:hover{background:var(--surface-2)}
table.data tbody tr:last-child td{border-bottom:0}
table.data td.num,table.data th.num{text-align:right;font-family:var(--mono);font-size:.82rem;white-space:nowrap}
table.data .muted{color:var(--text-3);font-size:.78rem}
table.data .strong{font-weight:600}
table.compact td,table.compact th{padding:.42rem .6rem}
.t-title{display:block;font-weight:580;line-height:1.3}
.t-sub{display:block;font-size:.73rem;color:var(--text-3);font-family:var(--mono)}
/* Segunda línea de texto corriente (nombres, métodos de pago), no de códigos. */
.t-sub.txt{font-family:inherit;line-height:1.3}
/* Celda que recorta en vez de partir el nombre en cuatro renglones.
   El texto completo queda en el title de la celda. */
.cell-clip{max-width:260px}
.cell-clip .t-title,.cell-clip .t-sub{
  display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%;
}

.empty{padding:3rem 1.5rem;text-align:center;color:var(--text-3)}
.empty .ico{opacity:.35;margin-bottom:.6rem}
.empty b{display:block;color:var(--text-2);font-size:.92rem;margin-bottom:.2rem}
.empty p{font-size:.83rem;margin:0}

/* Badges */
.badge{
  display:inline-flex;align-items:center;gap:.28rem;font-size:.71rem;font-weight:640;
  padding:.16rem .48rem;border-radius:6px;background:var(--surface-3);color:var(--text-2);
  border:1px solid transparent;white-space:nowrap;line-height:1.5;
}
.badge.ok{background:var(--ok-soft);color:#15803d;border-color:var(--ok-border)}
.badge.warn{background:var(--warn-soft);color:#92400e;border-color:var(--warn-border)}
.badge.danger{background:var(--danger-soft);color:#991b1b;border-color:var(--danger-border)}
.badge.info{background:var(--brand-soft);color:var(--brand-dark);border-color:var(--brand-border)}
.badge.dot::before{content:'';width:5px;height:5px;border-radius:50%;background:currentColor}

/* Alertas */
.alert{padding:.75rem .95rem;border-radius:var(--radius-sm);font-size:.85rem;border:1px solid;margin-bottom:1rem}
.alert.info{background:var(--brand-soft);border-color:var(--brand-border);color:#1e40af}
.alert.ok{background:var(--ok-soft);border-color:var(--ok-border);color:#166534}
.alert.warn{background:var(--warn-soft);border-color:var(--warn-border);color:#92400e}
.alert.danger{background:var(--danger-soft);border-color:var(--danger-border);color:#991b1b}
.alert b{font-weight:640}
/* Aviso de saldo pendiente: el mensaje a la izquierda y la acción de cobrar a
   la derecha, para que se vea que hay algo que hacer y no sólo algo que leer. */
.due-banner{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.due-banner .due-text{min-width:0}
.due-banner .btn{flex:0 0 auto}
.due-banner .due-late{font-weight:640}

/* Filtros */
.filters{
  display:flex;gap:.55rem;flex-wrap:wrap;align-items:flex-end;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  padding:.8rem .9rem;margin-bottom:1rem;box-shadow:var(--shadow-sm);
}
.filters .f{min-width:135px}
.filters .f.grow{flex:1;min-width:210px}
.filters label{font-size:.7rem;text-transform:uppercase;letter-spacing:.04em;color:var(--text-3);font-weight:640;margin-bottom:.25rem;display:block}
/* El pliegue de los filtros es cosa del teléfono (bloque móvil). */
.filters .filtros-toggle,.filters .filtros-chips{display:none}

/* Filtros de reportes: dos filas con papeles distintos. Arriba el rango que se
   está mirando y lo que se puede hacer con él; abajo los atajos de periodo.
   Todo en una sola fila elástica dejaba los atajos partidos entre los campos y
   los botones, sin quedar alineados con nada. */
.filters-report{display:block;padding:0}
.fr-main{display:flex;gap:.55rem;align-items:flex-end;flex-wrap:wrap;padding:.75rem .9rem}
.fr-main .f{min-width:150px}
.fr-main .fr-sep{flex:1;min-width:.5rem}
.fr-quick{
  display:flex;gap:.3rem;align-items:center;flex-wrap:wrap;
  padding:.55rem .9rem;border-top:1px solid var(--border);background:var(--surface-2);
  border-radius:0 0 var(--radius) var(--radius);
}
.fr-label{
  font-size:.7rem;text-transform:uppercase;letter-spacing:.04em;
  color:var(--text-3);font-weight:640;margin-right:.4rem;
}
.fr-quick .chip{background:var(--surface)}
.fr-quick .chip:hover{background:var(--surface-3)}
.fr-quick .chip.on{background:var(--brand);border-color:var(--brand);color:#fff}

/* Pestañas de los reportes (reports/_nav.php): una por informe, la actual
   resaltada. En el teléfono se deslizan en una sola línea y el borde derecho
   se desvanece para avisar que hay más. */
.rep-nav{
  display:flex;flex-wrap:wrap;gap:.25rem;margin:0 0 1rem;padding:.25rem;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-sm);
}
.rep-tab{
  display:inline-flex;align-items:center;padding:.5rem .95rem;border-radius:var(--radius-sm);
  color:var(--text-2);font-weight:600;font-size:.86rem;text-decoration:none;white-space:nowrap;
}
.rep-tab:hover{background:var(--surface-2);color:var(--text);text-decoration:none}
.rep-tab[aria-current="page"]{background:var(--brand-soft);color:var(--brand-dark)}
@media (max-width:640px){
  .rep-nav{
    flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding-right:2rem;
    -webkit-mask-image:linear-gradient(to right,#000 85%,transparent);
    mask-image:linear-gradient(to right,#000 85%,transparent);
  }
  .rep-nav::-webkit-scrollbar{display:none}
  .rep-tab{min-height:40px;flex:0 0 auto}
}

@media (max-width:640px){
  /* En móvil mandan las fechas: ancho completo y el resto debajo. Los atajos
     se deslizan en una sola línea en vez de ocupar media pantalla. */
  .fr-main{padding:.7rem .75rem;gap:.5rem}
  /* Desde y Hasta lado a lado, y Aplicar, Exportar e Imprimir juntos debajo:
     uno por línea eran cinco renglones —330 px— antes de la primera cifra.
     (Con .filters-report delante para ganarle a «.filters .f», que va después.) */
  .filters-report .fr-main .f{flex:1 1 40%;min-width:0}
  .filters-report .fr-main .f input{width:100%;min-width:0}
  .fr-main .fr-sep{display:none}
  .filters-report .fr-main .btn{flex:1 1 25%;min-width:0;justify-content:center;padding-left:.4rem;padding-right:.4rem}
  .fr-quick{padding:.55rem .75rem;overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none}
  .fr-quick::-webkit-scrollbar{display:none}
  .fr-quick .chip,.fr-label{flex:0 0 auto}
}

/* Paginación */
.pager{display:flex;align-items:center;gap:.35rem;justify-content:center;padding:1rem 0;flex-wrap:wrap}
.pager a,.pager span{
  min-width:33px;height:33px;padding:0 .55rem;display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--border);border-radius:var(--radius-sm);font-size:.82rem;color:var(--text-2);
  background:var(--surface);text-decoration:none;
}
.pager a:hover{background:var(--surface-2);text-decoration:none}
.pager .on{background:var(--brand);border-color:var(--brand);color:#fff;font-weight:640}
.pager .gap{border:0;background:none}
.pager-info{font-size:.78rem;color:var(--text-3);margin-right:auto}

/* Modales */
.modal-backdrop{
  position:fixed;inset:0;background:rgba(15,23,42,.42);backdrop-filter:blur(2px);
  z-index:100;display:none;align-items:flex-start;justify-content:center;padding:4vh 1rem;overflow-y:auto;
}
.modal-backdrop.open{display:flex}
.modal{
  background:#fff;border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);width:100%;max-width:540px;
  animation:pop .16s ease-out;margin:auto 0;
}
.modal.lg{max-width:860px}
.modal.xl{max-width:1120px}
@keyframes pop{from{opacity:0;transform:translateY(-8px) scale(.985)}to{opacity:1;transform:none}}
.modal-head{display:flex;align-items:center;gap:.75rem;padding:1rem 1.15rem;border-bottom:1px solid var(--border)}
.modal-head h3{font-size:.98rem;font-weight:640;flex:1}
.modal-body{padding:1.15rem;max-height:70vh;overflow-y:auto}
.modal-foot{display:flex;gap:.55rem;justify-content:flex-end;padding:.9rem 1.15rem;border-top:1px solid var(--border);background:var(--surface-2);border-radius:0 0 var(--radius-lg) var(--radius-lg)}

/* Toasts */
.toasts{position:fixed;bottom:1.1rem;right:1.1rem;z-index:200;display:flex;flex-direction:column;gap:.5rem;max-width:390px}
.toast{
  display:flex;align-items:flex-start;gap:.6rem;background:#fff;border:1px solid var(--border);
  border-left:3px solid var(--brand);border-radius:var(--radius-sm);padding:.7rem .85rem;
  box-shadow:var(--shadow-lg);font-size:.85rem;animation:slidein .18s ease-out;
}
@keyframes slidein{from{opacity:0;transform:translateX(18px)}to{opacity:1;transform:none}}
.toast.ok{border-left-color:var(--ok)}
.toast.error{border-left-color:var(--danger)}
.toast.warn{border-left-color:var(--warn)}
.toast .msg{flex:1}
.toast .x{cursor:pointer;color:var(--text-3);line-height:1;font-size:1.05rem;background:none;border:0;padding:0}
.toast.hide{opacity:0;transform:translateX(18px);transition:.2s}

/* Estados de stock */
.stock{font-family:var(--mono);font-weight:640;font-size:.82rem}
.stock.ok{color:var(--ok)}
.stock.warn{color:var(--warn)}
.stock.low{color:#ea580c}
.stock.out{color:var(--danger)}
.stock.negative{color:#fff;background:var(--danger);padding:.05rem .35rem;border-radius:5px}

/* Miniaturas */
.thumb{
  width:38px;height:38px;border-radius:8px;object-fit:cover;background:var(--surface-3);
  border:1px solid var(--border);flex:0 0 auto;
}
.thumb-ph{
  width:38px;height:38px;border-radius:8px;background:var(--surface-3);border:1px solid var(--border);
  display:grid;place-items:center;color:var(--text-3);font-size:.62rem;font-weight:700;flex:0 0 auto;
}

/* Barras de progreso simples para reportes */
.bar{height:6px;background:var(--surface-3);border-radius:99px;overflow:hidden;min-width:60px}
.bar > i{display:block;height:100%;background:var(--brand);border-radius:99px}
.bar.ok > i{background:var(--ok)}
.bar.warn > i{background:var(--warn)}

/* Tabs */
.tabs{display:flex;gap:.15rem;border-bottom:1px solid var(--border);margin-bottom:1.1rem;overflow-x:auto}
.tabs a{
  padding:.55rem .85rem;font-size:.85rem;font-weight:580;color:var(--text-2);
  border-bottom:2px solid transparent;text-decoration:none;white-space:nowrap;
}
.tabs a:hover{color:var(--text);text-decoration:none}
.tabs a.on{color:var(--brand-dark);border-bottom-color:var(--brand);font-weight:640}

/* Utilidades */
.muted{color:var(--text-3)}
.mono{font-family:var(--mono)}
.right{text-align:right}
.center{text-align:center}
.nowrap{white-space:nowrap}
.mb0{margin-bottom:0}.mb1{margin-bottom:.5rem}.mb2{margin-bottom:1rem}
/* Faltaba .mb3 y varias vistas ya lo usaban: la separación que pedían nunca
   se aplicaba y los bloques quedaban pegados al siguiente. */
.mb3{margin-bottom:1.5rem}.mb4{margin-bottom:2rem}
.fs-sm{font-size:.79rem}.fs-xs{font-size:.72rem}
.fw6{font-weight:620}
.hide{display:none !important}
.flex1{flex:1}
.gap-sm{gap:.35rem}

/* ====================================================== PUNTO DE VENTA */
.pos{
  display:grid;grid-template-columns:minmax(0,1fr) 372px;gap:0;
  height:calc(100vh - var(--header-h));overflow:hidden;
}
/* min-height:0 es imprescindible: sin él la columna crece con su contenido,
   .pos recorta el excedente y el panel interior nunca llega a desplazarse. */
.pos-left{
  display:flex;flex-direction:column;min-width:0;min-height:0;
  border-right:1px solid #e2e8f0;background:#f8fafc;
}

/* BUSCADOR DEL CATÁLOGO */
.pos-search{
  padding:.75rem 1rem;background:#ffffff;border-bottom:1px solid #e2e8f0;flex:0 0 auto;
}
.pos-search .sbox{position:relative;width:100%}
.pos-search input{
  height:44px;font-size:.92rem;padding-left:2.5rem;padding-right:2.8rem;
  border-radius:10px;border:1px solid #cbd5e1;background:#ffffff;
  color:#0f172a;outline:none;transition:all .15s ease;width:100%;
}
.pos-search input:focus{
  border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-ring);background:#ffffff;
}
.pos-search .sico{
  position:absolute;left:.85rem;top:50%;transform:translateY(-50%);
  color:#64748b;display:flex;align-items:center;pointer-events:none;
}
.pos-search .shint{
  position:absolute;right:.75rem;top:50%;transform:translateY(-50%);
  background:#f1f5f9;border:1px solid #cbd5e1;color:#475569;
  font-family:var(--mono);font-size:.7rem;font-weight:700;padding:2px 6px;border-radius:5px;
}

/* Escáner con la cámara. El botón junto al buscador sólo aparece en
   pantallas táctiles: en el mostrador hay lector de código de barras. */
.pos-search{display:flex;align-items:center;gap:.5rem}
.pos-search .sbox{flex:1 1 auto;min-width:0}
.cam-btn{display:none}
@media (max-width:980px), (pointer:coarse){
  .cam-btn{
    display:inline-flex;align-items:center;justify-content:center;flex:0 0 48px;width:48px;height:44px;
    border:1px solid #cbd5e1;border-radius:10px;background:#ffffff;color:var(--brand);cursor:pointer;
  }
  .cam-btn:active{background:var(--brand-soft)}
  .cam-btn .material-symbols-outlined{font-size:26px}
}
body.cam-abierta{overflow:hidden}
.cam-scan{position:fixed;inset:0;z-index:150;background:#000;overflow:hidden}
.cam-scan video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* El marco oscurece todo lo demás con una sombra enorme: la vista va a él. */
.cam-marco{
  position:absolute;left:8%;right:8%;top:34%;height:24%;border:3px solid rgba(255,255,255,.92);
  border-radius:16px;box-shadow:0 0 0 100vmax rgba(0,0,0,.5);
}
.cam-linea{
  position:absolute;left:5%;right:5%;top:50%;height:2px;background:#ef4444;
  box-shadow:0 0 10px #ef4444;animation:camLinea 1.5s ease-in-out infinite alternate;
}
@keyframes camLinea{from{top:12%}to{top:88%}}
.cam-top{
  position:absolute;left:0;right:0;top:0;z-index:1;display:flex;align-items:center;justify-content:space-between;
  gap:.75rem;padding:calc(.7rem + env(safe-area-inset-top)) .8rem .7rem;
}
.cam-titulo{color:#fff;font-weight:650;font-size:1rem;text-shadow:0 1px 3px rgba(0,0,0,.6)}
.cam-ico{
  display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;flex:0 0 48px;
  border:0;border-radius:99px;background:rgba(0,0,0,.5);color:#fff;cursor:pointer;
}
.cam-ico[hidden]{display:none}
.cam-ico[aria-pressed="true"]{background:#fbbf24;color:#111827}
.cam-top::after{content:"";flex:0 0 48px}
.cam-top:has(.cam-ico[data-cam="luz"]:not([hidden]))::after{content:none}
.cam-pie{
  position:absolute;left:0;right:0;bottom:0;z-index:1;display:flex;flex-direction:column;align-items:center;
  gap:.8rem;padding:1rem 1rem calc(1.3rem + env(safe-area-inset-bottom));
}
.cam-estado{
  max-width:100%;padding:.6rem 1.1rem;border-radius:99px;background:rgba(0,0,0,.62);
  color:#fff;font-size:.92rem;font-weight:560;text-align:center;
}
.cam-estado[data-tipo="bien"]{background:#16a34a}
.cam-estado[data-tipo="mal"]{background:#b45309}
.cam-listo{
  min-width:62%;min-height:50px;border:0;border-radius:12px;background:#ffffff;color:#0f172a;
  font:700 1rem var(--font);cursor:pointer;
}

/* CATEGORÍAS TABS / CHIPS */
.pos-cats{
  display:flex;gap:.4rem;padding:.6rem 1rem;overflow-x:auto;
  background:#ffffff;border-bottom:1px solid #e2e8f0;flex:0 0 auto;
  scrollbar-width:thin;
}
.pos-cats::-webkit-scrollbar{height:4px}
.pos-cats::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:99px}

.chip{
  padding:.35rem .8rem;border-radius:99px;border:1px solid #e2e8f0;background:#ffffff;
  font-size:.78rem;font-weight:600;color:#475569;cursor:pointer;white-space:nowrap;
  transition:all .12s ease;user-select:none;display:inline-flex;align-items:center;gap:4px;
}
.chip:hover{background:#f1f5f9;color:#0f172a;border-color:#cbd5e1}
.chip.on{
  background:#0f172a;border-color:#0f172a;color:#ffffff;font-weight:700;
  box-shadow:0 1px 3px rgba(15,23,42,0.12);
}
.chip .n{
  font-size:.7rem;opacity:.75;background:rgba(0,0,0,0.06);
  padding:1px 6px;border-radius:99px;font-weight:700;
}
.chip.on .n{background:rgba(255,255,255,0.2);color:#ffffff;opacity:1}

/* CATÁLOGO DE PRODUCTOS */
.pos-products{
  flex:1;min-height:0;overflow-y:auto;padding:.9rem 1rem 2rem;
  overscroll-behavior:contain;
}

/* GRID RESPONSIVE DE 4 A 5 COLUMNAS */
.pgrid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(165px, 1fr));
  gap:.75rem;
}

/* TARJETA DE PRODUCTO COMPACTA Y FUNCIONAL POS */
.pcard{
  background:#ffffff;border:1px solid #e2e8f0;border-radius:10px;
  overflow:hidden;cursor:pointer;transition:all .15s ease;
  display:flex;flex-direction:column;text-align:left;padding:0;
  font:inherit;height:100%;min-height:165px;position:relative;
  box-shadow:0 1px 2px rgba(15,23,42,0.03);
}
.pcard:hover{
  border-color:var(--brand);box-shadow:0 4px 12px rgba(15,23,42,0.08);
  transform:translateY(-1px);
}
.pcard:active{transform:none}
.pcard.disabled{opacity:.5;cursor:not-allowed}
.pcard.disabled:hover{border-color:#e2e8f0;box-shadow:none;transform:none}

/* ÁREA DE IMAGEN: cuadrada, del ancho de la tarjeta. Una franja de 70 px
   recortaba la foto del producto hasta dejarla irreconocible. La foto se ve
   entera (contain) sobre blanco: un celular fotografiado a lo alto no pierde
   ni la parte de arriba ni la de abajo. */
.pcard .img{
  aspect-ratio:1 / 1;width:100%;background:#ffffff;display:flex;align-items:center;justify-content:center;
  color:#64748b;overflow:hidden;position:relative;border-bottom:1px solid #f1f5f9;
  flex:0 0 auto;
}
.pcard .img img{width:100%;height:100%;object-fit:contain}
.pcard .img .img-placeholder .material-symbols-outlined{font-size:34px !important}

/* PLACEHOLDER PROFESIONAL */
.pcard .img .img-placeholder{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  color:#94a3b8;width:100%;height:100%;background:linear-gradient(180deg,#f8fafc,#f1f5f9);
}
.pcard .img .ph-initial{
  font-size:.95rem;font-weight:800;color:#64748b;letter-spacing:.05em;
}

/* BADGES SOBRE LA IMAGEN */
.pcard .pcard-badge{
  position:absolute;top:5px;right:5px;font-size:9px;font-weight:700;
  padding:1px 5px;border-radius:4px;letter-spacing:.02em;box-shadow:0 1px 2px rgba(0,0,0,0.1);
}
.pcard .pcard-badge.info{background:#eff6ff;color:#1d4ed8;border:1px solid #bfdbfe}

/* INFORMACIÓN DEL PRODUCTO */
.pcard .info{
  padding:.5rem .65rem;display:flex;flex-direction:column;gap:.1rem;flex:1;
}
.pcard .nm{
  font-size:.8rem;font-weight:650;line-height:1.2;color:#0f172a;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;max-height:2.4em;margin-bottom:0;
}
.pcard .sk{
  font-size:.66rem;color:#64748b;font-family:var(--mono);font-weight:500;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px;
}
.pcard .bt{
  display:flex;align-items:center;justify-content:space-between;gap:.35rem;
  margin-top:auto;padding-top:.25rem;border-top:1px dashed #f1f5f9;
}
.pcard .pr{
  font-size:.9rem;font-weight:800;color:#0f172a;letter-spacing:-.01em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.pcard .btn-add-ico{
  width:26px;height:26px;border-radius:6px;background:var(--brand);
  color:var(--brand-ink,#ffffff);display:flex;align-items:center;justify-content:center;
  flex-shrink:0;transition:transform .12s ease,background .12s ease;
}
.pcard:hover .btn-add-ico{
  transform:scale(1.08);
}
.pcard.disabled .btn-add-ico{
  background:#e2e8f0;color:#94a3b8;
}

.pos-right{display:flex;flex-direction:column;background:var(--surface);min-width:0;min-height:0}
.pos-customer{padding:.7rem .9rem;border-bottom:1px solid var(--border);display:flex;gap:.45rem;align-items:center;flex:0 0 auto}
.pos-customer select{flex:1}

.pos-meta{display:grid;grid-template-columns:1fr 1fr;gap:.45rem;padding:.6rem .9rem;
  border-bottom:1px solid var(--border);background:var(--surface-2);flex:0 0 auto}
.pos-meta label{display:block;min-width:0}
.pos-meta label span{display:block;font-size:.68rem;color:var(--text-3);font-weight:620;margin-bottom:.15rem}
.pos-meta select{height:32px;min-height:32px;font-size:.8rem;padding:.2rem .5rem}
.pos-cart{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain}
.cart-empty{padding:2.5rem 1.25rem;text-align:center;color:var(--text-3);font-size:.85rem}
.cart-empty .big{font-size:2rem;opacity:.25;margin-bottom:.5rem}
.citem{padding:.6rem .9rem;border-bottom:1px solid var(--border);display:flex;flex-direction:column;gap:.4rem}
.citem:hover{background:var(--surface-2)}
.citem .top{display:flex;gap:.5rem;align-items:flex-start}
.citem .nm{flex:1;font-size:.82rem;font-weight:580;line-height:1.3;min-width:0}
.citem .nm small{display:block;font-family:var(--mono);font-size:.67rem;color:var(--text-3);font-weight:400}
.citem .tot{font-size:.85rem;font-weight:660;font-family:var(--mono);white-space:nowrap}
.citem .bot{display:flex;align-items:center;gap:.4rem}
.qty-ctl{display:flex;align-items:center;border:1px solid var(--border);border-radius:7px;overflow:hidden;background:#fff}
.qty-ctl button{
  width:27px;height:27px;border:0;background:var(--surface-2);color:var(--text-2);
  font-size:.95rem;cursor:pointer;display:grid;place-items:center;line-height:1;
}
.qty-ctl button:hover{background:var(--surface-3);color:var(--text)}
.qty-ctl input{
  width:44px;height:27px;min-height:0;border:0;border-left:1px solid var(--border);border-right:1px solid var(--border);
  text-align:center;font-family:var(--mono);font-size:.79rem;font-weight:600;border-radius:0;padding:0;
}
.qty-ctl input:focus{box-shadow:none;background:var(--brand-soft)}
.citem .price-in{width:88px;height:27px;min-height:0;font-family:var(--mono);font-size:.78rem;text-align:right;padding:0 .35rem}
.citem .disc-in{width:74px;height:27px;min-height:0;font-family:var(--mono);font-size:.78rem;text-align:right;padding:0 .35rem}

.pos-summary{border-top:1px solid var(--border);background:var(--surface-2);padding:.8rem .9rem;flex:0 0 auto}
.srow{display:flex;justify-content:space-between;align-items:baseline;font-size:.83rem;padding:.16rem 0;color:var(--text-2)}
.srow.total{
  font-size:1.28rem;font-weight:700;color:var(--text);letter-spacing:-.025em;
  border-top:1px solid var(--border);margin-top:.45rem;padding-top:.55rem;
}
.srow .v{font-family:var(--mono);font-weight:620}
.pos-actions{display:flex;gap:.5rem;padding:.7rem .9rem .9rem;background:var(--surface-2);flex:0 0 auto}

/* Panel de cobro */
.pay-m{
  padding:.6rem .5rem;border:1px solid var(--border);border-radius:var(--radius-sm);background:#fff;
  font-size:.79rem;font-weight:600;color:var(--text-2);cursor:pointer;text-align:center;transition:.12s;
}
.pay-m:hover{border-color:var(--brand-border);background:var(--brand-soft)}
.pay-m.on{border-color:var(--brand);background:var(--brand-soft);color:var(--brand-dark);box-shadow:0 0 0 2px rgba(37,99,235,.1)}
.pay-line{display:flex;gap:.45rem;align-items:center;margin-bottom:.45rem}
.pay-line select{width:150px}
.quick-cash{display:flex;gap:.35rem;flex-wrap:wrap;margin:.5rem 0 1rem}
.quick-cash button{
  padding:.35rem .65rem;border:1px solid var(--border);border-radius:99px;background:#fff;
  font:inherit;font-size:.78rem;font-weight:600;font-family:var(--mono);cursor:pointer;color:var(--text-2);
}
.quick-cash button:hover{background:var(--brand-soft);border-color:var(--brand-border);color:var(--brand-dark)}
/* ------------------------------------------------- MODAL DE COBRO
   Todo debe caber sin desplazar: el cajero tiene que ver el total, el cambio y
   el botón de confirmar de un vistazo. Lo único que se desplaza es la lista de
   productos, y sólo cuando la venta es larga. Las medidas van en vh para que
   en una pantalla baja se encoja la lista en vez de aparecer una barra. */
#modalCheckout .checkout-grid{gap:1rem}
#modalCheckout .label{margin-bottom:.25rem}
#modalCheckout .pay-summary{padding:.5rem .7rem}
#modalCheckout .change-box{padding:.5rem .7rem}
#modalCheckout .change-box b{font-size:1.15rem}
#modalCheckout .quick-cash{margin:.35rem 0 0;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
#modalCheckout .quick-cash::-webkit-scrollbar{display:none}
#modalCheckout .quick-cash button{padding:.3rem .6rem;font-size:.76rem;white-space:nowrap;flex:1 1 auto}
#modalCheckout .checkout-tail{display:flex;align-items:center;gap:.6rem;margin-top:.5rem;flex-wrap:wrap}
#modalCheckout .checkout-tail .check{margin:0;flex:0 0 auto}
#modalCheckout .checkout-tail input[type=text]{flex:1;min-width:9rem}

/* Resumen de lo que se está cobrando. */
.checkout-items{border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--surface);
  max-height:min(15rem, 34vh);overflow-y:auto}
.checkout-items .co-item{display:flex;align-items:flex-start;gap:.6rem;padding:.5rem .65rem;border-bottom:1px solid var(--border)}
.checkout-items .co-item:last-child{border-bottom:0}
.checkout-items .co-qty{flex:0 0 auto;min-width:2.1rem;height:1.5rem;display:grid;place-items:center;padding:0 .35rem;
  background:var(--brand-soft);color:var(--brand-dark);border-radius:var(--radius-sm);
  font-family:var(--mono);font-size:.78rem;font-weight:700}
.checkout-items .co-name{flex:1;min-width:0;font-size:.82rem;font-weight:600;line-height:1.3;color:var(--text)}
.checkout-items .co-meta{font-size:.72rem;font-weight:400;color:var(--muted);margin-top:.1rem}
.checkout-items .co-amount{flex:0 0 auto;text-align:right;font-family:var(--mono);font-size:.82rem;font-weight:700;color:var(--text)}
.checkout-items .co-amount .co-disc{display:block;font-size:.68rem;font-weight:600;color:#16a34a}
.checkout-items .co-empty{padding:1rem;text-align:center;color:var(--muted);font-size:.82rem}
.pay-summary{background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius-sm);padding:.8rem .9rem}
.pay-summary .srow.total{font-size:1.1rem}
.change-box{
  margin-top:.7rem;padding:.75rem .9rem;border-radius:var(--radius-sm);
  background:var(--ok-soft);border:1px solid var(--ok-border);
  display:flex;justify-content:space-between;align-items:baseline;
}
.change-box b{font-size:1.25rem;font-family:var(--mono);color:#15803d;letter-spacing:-.02em}
.change-box.due{background:var(--warn-soft);border-color:var(--warn-border)}
.change-box.due b{color:#92400e}

/* ====================================================== LOGIN */
.login-wrap{min-height:100vh;display:grid;place-items:center;padding:1.5rem;background:linear-gradient(180deg,#f1f5f9,#e2e8f0)}
.login-card{width:100%;max-width:378px;background:#fff;border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);padding:2rem 1.75rem}
.login-card .brand-mark{width:46px;height:46px;border-radius:13px;font-size:.9rem;margin:0 auto .9rem}
.login-card .brand-mark.has-logo{width:auto;max-width:210px;height:64px;border-radius:0;margin:0 auto 1.1rem}
.login-card .brand-mark.has-logo img{max-width:210px;margin:0 auto}
.login-card h1{text-align:center;font-size:1.12rem;margin-bottom:.2rem}
.login-card .sub{text-align:center;color:var(--text-3);font-size:.82rem;margin-bottom:1.5rem}

/* ====================================================== IMPRESIÓN IMPRESORAS TÉRMICAS */
.ticket {
  width: 80mm;
  max-width: 80mm;
  margin: 0 auto;
  padding: 4mm 3mm;
  background: #fff;
  color: #000;
  font-family: 'Consolas', 'Courier New', monospace, var(--mono);
  font-size: 10.5px;
  line-height: 1.35;
  box-sizing: border-box;
}
.ticket .th { text-align: center; margin-bottom: 2.5mm; }
.ticket .th h1 { font-size: 13.5px; font-weight: 700; margin: 0 0 1mm 0; line-height: 1.2; }
.ticket .th p { margin: 0; font-size: 9.5px; line-height: 1.25; }
.ticket .sep { border-top: 1px dashed #000; margin: 2mm 0; }
.ticket table { width: 100%; border-collapse: collapse; font-size: 10px; table-layout: fixed; }
.ticket table th { text-align: left; border-bottom: 1px solid #000; padding: 1mm 0; font-size: 9.5px; text-transform: uppercase; }
.ticket table td { padding: 0.8mm 0; vertical-align: top; word-break: break-word; overflow-wrap: break-word; }
.ticket .r { text-align: right; }
.ticket .c { text-align: center; }
.ticket .tot { display: flex; justify-content: space-between; font-size: 10.5px; padding: 0.4mm 0; }
.ticket .tot.big { font-size: 13px; font-weight: 700; border-top: 1px solid #000; margin-top: 1.5mm; padding-top: 1.5mm; }
.ticket .ft { text-align: center; font-size: 9.5px; margin-top: 2.5mm; }

/* Tirilla de compra 58mm (Rollos térmicos de 57.5mm - 58mm) */
.ticket.size-58mm {
  width: 58mm;
  max-width: 58mm;
  padding: 2mm 1.5mm;
  box-sizing: border-box;
  font-size: 8.5px;
  line-height: 1.25;
  overflow: visible;
}
.ticket.size-58mm .th { margin-bottom: 1.5mm; }
.ticket.size-58mm .th h1 { font-size: 11px; margin-bottom: 0.3mm; }
.ticket.size-58mm .th p { font-size: 8px; line-height: 1.15; }
.ticket.size-58mm .sep { margin: 1.2mm 0; border-top: 1px dashed #000; }
.ticket.size-58mm .tot { font-size: 8.5px; padding: 0.3mm 0; align-items: flex-start; }
.ticket.size-58mm .tot > span:first-child { color: #000; padding-right: 1mm; }
.ticket.size-58mm .tot > span:last-child,
.ticket.size-58mm .tot > b:last-child { text-align: right; overflow-wrap: anywhere; margin-left: auto; }
.ticket.size-58mm .tot.big { font-size: 11px; margin-top: 1mm; padding-top: 1mm; }
.ticket.size-58mm table { font-size: 8px; table-layout: fixed; }
.ticket.size-58mm table th { font-size: 7.5px; padding: 0.5mm 0; }
.ticket.size-58mm table td { padding: 0.5mm 0; word-break: break-word; overflow-wrap: break-word; }
.ticket.size-58mm .ft { margin-top: 1.5mm; font-size: 7.5px; }

.ticket .p-info { display: flex; flex-direction: column; min-width: 0; padding-right: 1mm; }
.ticket .p-ref { font-size: 8px; color: #333; margin-top: 0.2mm; word-break: break-word; }
.ticket .p-amt { white-space: nowrap; font-weight: 600; margin-left: auto; }
.ticket .t-notes { font-size: 8.5px; line-height: 1.2; color: #000; margin: 0; word-break: break-word; }

.print-bar{position:sticky;top:0;background:var(--surface);border-bottom:1px solid var(--border);padding:.75rem 1rem;display:flex;gap:.5rem;justify-content:center;z-index:10}

/* ====================================================== ETIQUETAS DE ENVÍO (FIJA 62x100mm) */
.shipping-label{
  margin:0 auto;padding:2mm 2.5mm;background:#fff;color:#000;
  font-family:var(--font);font-size:9.5px;line-height:1.2;
  border:1.5px solid #000;box-sizing:border-box;
}
.shipping-label.size-58mm{width:62mm;height:100mm;max-height:100mm;padding:2.5mm 3mm;font-size:8.5px;border-width:1px;box-sizing:border-box;overflow:hidden}
.shipping-label.size-80mm{width:80mm;padding:2mm 2.5mm;font-size:9px;border-width:1.2px}
.shipping-label.doc-letter{width:210mm;max-width:100%;padding:8mm;font-size:11px;border-width:2px}

.shipping-label .ship-header{
  display:flex;justify-content:space-between;align-items:center;
  border-bottom:1.2px solid #000;padding-bottom:0.8mm;margin-bottom:1mm;
}
.shipping-label .ship-tag{font-weight:800;letter-spacing:.03em;font-size:9px;background:#000;color:#fff;padding:1px 4px;border-radius:2px}
.shipping-label.size-58mm .ship-tag{font-size:7.5px;padding:1px 3px}
.shipping-label .ship-code{font-weight:800;font-size:10.5px;font-family:var(--mono)}

.shipping-label .ship-box{border:1px solid #000;padding:1.2mm 1.8mm;margin-bottom:1mm;border-radius:2px}
.shipping-label .ship-dest{background:#fafafa;border-width:1.2px}
.shipping-label .ship-title{font-size:8px;font-weight:800;display:flex;align-items:center;gap:3px;margin-bottom:0.6mm;border-bottom:1px solid #ddd;padding-bottom:0.4mm;text-transform:uppercase}
.shipping-label.size-58mm .ship-title{font-size:7.5px}
.shipping-label .ship-title .material-symbols-outlined{font-size:12px}
.shipping-label .ship-name{font-size:11px;font-weight:800;margin-bottom:0.4mm;color:#000}
.shipping-label.size-58mm .ship-name{font-size:9.5px}
.shipping-label .ship-biz{font-size:9.5px;font-weight:700}
.shipping-label .ship-field{margin-top:0.2mm;font-size:8px}
.shipping-label.size-58mm .ship-field{font-size:7.5px}

.shipping-label .ship-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.5mm;font-size:8px}
.shipping-label.size-58mm .ship-grid{display:flex;justify-content:space-between;gap:1mm;font-size:7.5px}
.shipping-label .ship-grid .lbl{display:block;font-size:7px;opacity:.75;font-weight:700}
.shipping-label .ship-notes{margin-top:0.8mm;padding-top:0.8mm;border-top:1px dashed #ccc;font-size:7.5px}

.shipping-label .ship-barcode{text-align:center;margin-top:1mm;padding-top:0.8mm;border-top:1px solid #000}
.shipping-label .ship-barcode .bars{font-family:var(--mono);font-size:12px;letter-spacing:1px;font-weight:800}
.shipping-label.size-58mm .ship-barcode .bars{font-size:9.5px;letter-spacing:0.5px}
.shipping-label .ship-barcode .code-txt{font-size:8px;font-family:var(--mono);font-weight:700;margin-top:1px}

/* Pestañas dentro de una tarjeta: agrupan bloques que juntos harían la
   página demasiado larga. */
.tabset{display:flex;gap:.15rem;flex-wrap:wrap;margin:0}
.tabset button{
  background:transparent;border:0;border-bottom:2px solid transparent;
  padding:.5rem .8rem;font:inherit;font-size:.85rem;font-weight:600;
  color:var(--text-3);cursor:pointer;white-space:nowrap;border-radius:0;min-height:0;
}
.tabset button:hover{color:var(--text-2)}
.tabset button.on{color:var(--brand-dark);border-bottom-color:var(--brand)}
.card-head.tabbed{padding:0 1.05rem;gap:.25rem;flex-wrap:wrap}
.card-head.tabbed .tabset{margin-bottom:-1px}

/* Selector de color de marca (Ajustes › Empresa) */
.brand-pick{display:flex;align-items:center;gap:.4rem;flex-wrap:wrap}
.brand-pick input[type=color]{
  width:42px;height:35px;min-height:35px;padding:2px;cursor:pointer;
  border:1px solid var(--border-strong);border-radius:var(--radius-sm);background:#fff;
}
.brand-pick input[type=text]{width:92px;font-family:var(--mono);font-size:.8rem;text-transform:lowercase}
.brand-pick .swatch{
  width:24px;height:24px;border-radius:7px;border:1px solid rgba(15,23,42,.15);
  cursor:pointer;padding:0;transition:transform .1s;
}
.brand-pick .swatch:hover{transform:scale(1.12)}

/* ------------------------------------ COMPROBANTE TAMAÑO CARTA
   Las variables --b* las inyecta la vista con el color de marca. */
.doc{
  --b:#2563eb; --b-soft:#dce7fb; --b-line:#9dbaf3; --b-ink:#111111;
  width:210mm;max-width:100%;margin:1rem auto;padding:11mm;
  background:#fff;color:#000;font-family:var(--font);font-size:11px;line-height:1.45;
  border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);
}
.doc *{box-sizing:border-box}

/* Encabezado en tres zonas: identidad, datos del negocio e identificación del
   documento. La casilla del consecutivo vivía en una fila propia y dejaba dos
   franjas vacías; aquí ocupa la columna derecha y ahorra ~25 mm de alto. */
.doc-head{
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;
  gap:0 6mm;margin-bottom:5mm;padding-bottom:3mm;border-bottom:1px solid var(--b-line);
}
.doc-logo{justify-self:start}
.doc-logo img{max-height:22mm;max-width:46mm;object-fit:contain;display:block}
.doc-biz{min-width:0;text-align:center}
.doc-biz h1{font-size:18px;font-weight:800;letter-spacing:.04em;margin:0 0 1mm;text-transform:uppercase;line-height:1.15}
.doc-biz p{margin:0;font-size:10px;font-weight:700;line-height:1.45}
/* Sin logo el nombre se alinea a la izquierda: centrarlo dejaría un hueco. */
.doc-head > .doc-biz:first-child{text-align:left}

.doc-stamp{border-collapse:collapse;margin:0;justify-self:end;min-width:62mm;text-align:center;table-layout:fixed}
.doc-stamp th,.doc-stamp td{border:1px solid var(--b-line);padding:1.3mm 3mm;font-size:10px;font-weight:700;white-space:nowrap}
.doc-stamp .hd th{background:var(--b-soft);color:var(--b-ink);font-weight:800;letter-spacing:.03em}

.doc-void{border:1.5px solid var(--danger);color:var(--danger);text-align:center;
  font-weight:800;letter-spacing:.12em;padding:2mm;margin-bottom:5mm;font-size:13px}

/* El aviso de venta por canal: el mismo peso visual que el de anulada, porque
   lo que dice es igual de importante para quien tiene el papel en la mano. */
.doc-canal{border:1.2px solid #b45309;color:#b45309;text-align:center;
  font-weight:700;letter-spacing:.04em;padding:2mm;margin-bottom:5mm;font-size:11px;line-height:1.5}

.doc-party{display:grid;grid-template-columns:1fr 1fr;gap:0 10mm;margin-bottom:4mm}
.doc-party dl{display:grid;grid-template-columns:24mm 1fr;gap:1.1mm 3mm;margin:0}
.doc-party dt{font-weight:800;letter-spacing:.02em;white-space:nowrap}
.doc-party dd{margin:0;min-height:4.2mm;border-bottom:1px solid #d8d8d8;overflow-wrap:anywhere}

.doc-items{width:100%;border-collapse:collapse;table-layout:fixed}
.doc-items th{background:var(--b-soft);color:var(--b-ink);border:1px solid var(--b-line);
  padding:1.9mm 2mm;font-size:11px;font-weight:800;letter-spacing:.03em;text-align:center}
.doc-items td{border:1px solid var(--b-line);padding:1.5mm 2mm;font-size:11px;
  vertical-align:top;height:6.4mm;overflow-wrap:anywhere}
.doc-items td.c{text-align:center}
.doc-items td.m{text-align:right;white-space:nowrap}
.doc-items .sku{display:block;font-size:9px;color:#555;font-weight:400}
.doc-items tr.empty td{color:#888}
.doc .cur{float:left;color:#444;font-weight:400}

.doc-foot{display:grid;grid-template-columns:62% 38%;align-items:start}
.doc-totals{border-collapse:collapse;width:100%;table-layout:fixed}
.doc-totals th{background:var(--b-soft);color:var(--b-ink);border:1px solid var(--b-line);
  padding:1.7mm 3mm;text-align:left;font-weight:800;font-size:11px;letter-spacing:.03em}
.doc-totals td{border:1px solid var(--b-line);padding:1.7mm 3mm;text-align:right;
  font-weight:700;white-space:nowrap}
.doc-totals .grand th,.doc-totals .grand td{font-size:12.5px}

.doc-notes{padding:4mm 8mm 0 0}
.doc-notes .lbl{margin:0 0 2mm;font-weight:800;letter-spacing:.02em}
.doc-notes .txt{margin:0 0 2mm;font-size:10.5px}
.doc-notes .rule{border-bottom:1px solid #d8d8d8;height:5mm}
.doc-pay{margin-top:4mm;font-size:10.5px}
.doc-pay div{display:flex;justify-content:space-between;gap:4mm;padding:.6mm 0;border-bottom:1px dotted #ccc}
.doc-pay .due{font-weight:800;border-bottom:0;margin-top:1mm}

.doc-note{margin-top:6mm;border:1px solid var(--b-line);background:var(--b-soft);color:var(--b-ink);
  padding:3mm 5mm;font-size:10.5px;font-weight:700;text-align:center;line-height:1.55}
.doc-legal{margin:3mm 0 0;text-align:center;font-size:9px;color:#555}

@media print{
  html,body{background:#fff;margin:0 !important;padding:0 !important;height:auto !important;width:100% !important}
  .sidebar,.header,.print-bar,.toasts,.no-print{display:none !important}
  .main{margin-left:0 !important;padding:0 !important}
  .content{padding:0 !important;max-width:none !important}
  .ticket,.shipping-label{margin:0 auto !important;padding:0;break-inside:avoid;page-break-inside:avoid}
  .ticket.size-58mm{width:54mm !important;max-width:54mm !important;height:auto !important;max-height:none !important;padding:1mm 1mm !important;box-sizing:border-box !important}
  .shipping-label.size-58mm{width:54mm !important;max-width:54mm !important;height:100mm !important;max-height:100mm !important;padding:2mm 2mm !important;box-sizing:border-box !important;overflow:hidden !important}
  .ticket.size-80mm,.ticket:not(.size-58mm){width:76mm !important;max-width:76mm !important;padding:2mm 1.5mm !important;box-sizing:border-box !important}
  .shipping-label.size-80mm{max-width:80mm;padding:4mm 3mm 5mm 3mm !important}
  .doc{width:auto;margin:0;padding:0;border:0;border-radius:0;box-shadow:none;font-size:10.5px}
  /* sin esto el navegador descarta los fondos de color de las cabeceras */
  .doc-items th,.doc-totals th,.doc-stamp .hd th,.doc-note{
    -webkit-print-color-adjust:exact;print-color-adjust:exact
  }
  .doc-items tr,.doc-stamp tr,.doc-totals tr{break-inside:avoid}
  .doc-foot,.doc-note{break-inside:avoid}
  .card{border:0;box-shadow:none}
  table.data th{background:#fff;color:#000;border-bottom:1px solid #000}
  a{color:#000;text-decoration:none}
  @page{margin:0 !important;size:auto}
}

/* ====================================================== RESPONSIVO */
@media (max-width:1180px){
  .pos{grid-template-columns:minmax(0,1fr) 330px}
}
@media (max-width:980px){
  :root{--sidebar-w:0px}
  .sidebar{transform:translateX(-100%);transition:transform .2s;width:250px;flex-basis:250px;box-shadow:var(--shadow-lg)}
  .sidebar.open{transform:none}
  .main{margin-left:0}
  .menu-toggle{display:inline-flex !important}
  .content{padding:1rem}
  .pos{grid-template-columns:1fr;height:auto;overflow:visible}
  .pos-left{border-right:0;border-bottom:1px solid var(--border)}
  .pos-right{position:sticky;bottom:0}
  .global-search{max-width:none}
}
.menu-toggle{display:none}

/* Barra superior del teléfono (layout/app.php): el botón del menú, el nombre
   del negocio y el atajo a vender. Sólo existe bajo 980 px. */
.mbar{display:none}
@media (max-width:980px){
  .mbar{
    display:flex;align-items:center;gap:.5rem;position:sticky;top:0;z-index:50;
    height:52px;padding:0 .5rem;background:var(--surface);
    border-bottom:1px solid var(--border);box-shadow:var(--shadow-sm);
  }
  .mbar-btn{
    display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;
    width:42px;height:42px;border:0;border-radius:10px;background:transparent;
    color:var(--text);cursor:pointer;text-decoration:none;
  }
  .mbar-btn:hover,.mbar-btn:active{background:var(--surface-2);text-decoration:none}
  .mbar-btn .material-symbols-outlined{font-size:24px}
  .mbar-pos{color:var(--brand)}
  .mbar-brand{
    display:flex;align-items:center;gap:.5rem;flex:1 1 auto;min-width:0;
    color:var(--text);text-decoration:none;
  }
  .mbar-brand:hover{text-decoration:none}
  .mbar-brand .brand-mark,.mbar-brand .brand-mark img{height:28px;width:auto;max-width:28px;flex:0 0 auto}
  .mbar-brand b{font-size:.92rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  /* Plegar la barra es cosa del escritorio: en el teléfono el menú se abre
     entero o no se abre. */
  .sidebar-toggle-btn{display:none}
  /* En una pantalla baja el menú no cabía entero y lo de abajo —la caja, la
     sucursal, salir— quedaba cortado sin forma de llegar: se desplaza. */
  .sidebar,.sidebar:has(.management-flyout-wrapper.open){overflow-y:auto !important;overscroll-behavior:contain}
  /* «Gestión» se abría como panel flotante a la derecha de la barra, fuera de
     una pantalla de 375 px. Aquí se despliega en su sitio, debajo del botón. */
  .management-flyout-menu{
    position:static;width:auto;max-height:none;overflow:visible;margin:.15rem 0 .35rem 1.4rem;
    border:0;border-left:2px solid var(--border);border-radius:0;box-shadow:none;padding:0;animation:none;
  }
  .management-flyout-menu .flyout-header{display:none}
  /* Sin teclado, «F2» no le dice nada a nadie. */
  .nav .shortcut-hint,.nav .pos-hero-kbd{display:none}
  .management-flyout-menu .flyout-item{padding:.6rem .75rem}
}
/* ------------------------------------------ Barra de acciones tipo app
   La arma POS.barraApp() sólo en el teléfono (≤640 px), con los botones de la
   cabecera: ícono y palabra corta, la principal en el color de la marca y el
   resto en «Más». Fuera del teléfono estas piezas no existen. */
.app-bar{
  position:fixed;left:0;right:0;bottom:0;z-index:50;display:flex;align-items:stretch;gap:2px;
  background:var(--surface);border-top:1px solid var(--border);box-shadow:0 -4px 16px rgba(15,23,42,.08);
  padding:.3rem .3rem calc(.3rem + env(safe-area-inset-bottom));
}
.app-bar > *{flex:1 1 0;min-width:0}
.app-bar > form{display:flex;margin:0}
.app-bar-item{
  flex:1 1 0;width:100%;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  min-height:54px;margin:0;padding:.35rem .15rem;border:0;border-radius:10px;background:transparent;
  color:var(--text-2);font:600 .7rem/1.15 var(--font);text-decoration:none;cursor:pointer;
}
.app-bar-item:hover,.app-bar-item:active{background:var(--surface-2);text-decoration:none;color:var(--text)}
.app-bar-item .material-symbols-outlined{font-size:23px;line-height:1}
.app-bar-item svg{width:21px;height:21px}
.app-bar-txt{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* La principal, como la pestaña activa de una app: el color de la marca y
   su ícono sobre una píldora suave. */
.app-bar-item.principal{color:var(--brand)}
.app-bar-item.principal .material-symbols-outlined{background:var(--brand-soft);border-radius:99px;padding:3px 16px}
.app-bar-mas[aria-expanded="true"]{color:var(--brand)}
/* Que la barra no tape lo último de la página, ni los avisos. */
body.con-app-bar .content{padding-bottom:calc(86px + env(safe-area-inset-bottom))}
body.con-app-bar .toasts{bottom:calc(78px + env(safe-area-inset-bottom))}
/* Con el teclado abierto la barra se subiría encima de lo que se escribe. */
body.con-app-bar:has(.content :is(input,textarea,select):focus) .app-bar{display:none}

.app-sheet-veil{position:fixed;inset:0;z-index:51;background:rgba(15,23,42,.4)}
.app-sheet{
  position:fixed;left:0;right:0;bottom:0;z-index:52;max-height:80vh;overflow-y:auto;
  background:var(--surface);border-radius:16px 16px 0 0;box-shadow:0 -10px 30px rgba(15,23,42,.22);
  padding:.35rem .6rem calc(.75rem + env(safe-area-inset-bottom));
}
.app-sheet-handle{width:42px;height:4px;border-radius:99px;background:var(--border-strong);margin:.4rem auto .6rem}
.app-sheet > form{margin:0}
.app-sheet-item{
  display:flex;align-items:center;gap:.8rem;width:100%;min-height:50px;margin:0;padding:.6rem .8rem;
  border:0;border-radius:10px;background:transparent;color:var(--text);
  font:560 .93rem/1.3 var(--font);text-align:left;text-decoration:none;cursor:pointer;
}
.app-sheet-item:hover,.app-sheet-item:active{background:var(--surface-2);text-decoration:none}
.app-sheet-item .material-symbols-outlined{font-size:22px;color:var(--text-3)}
.app-sheet-item svg{width:20px;height:20px}
.app-sheet-item.peligro,.app-sheet-item.peligro .material-symbols-outlined{color:var(--danger)}

/* «Volver» como flecha junto al título. */
.ph-con-volver{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:.3rem;align-items:start}
.ph-con-volver > .ph-volver{grid-row:1 / span 4}
.ph-volver{
  display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;
  margin:-.5rem 0 0 -.55rem;border-radius:10px;color:var(--text);text-decoration:none;
}
.ph-volver:hover{background:var(--surface-2);text-decoration:none}

/* Resumen de venta plegable (sólo móvil) */
.pos-bar,.pos-sheet-handle,.pos-sheet-veil{display:none}

/* Velo tras la barra lateral abierta en móvil */
.sidebar-veil{
  position:fixed;inset:0;background:rgba(15,23,42,.45);z-index:55;
  opacity:0;pointer-events:none;transition:opacity .2s;
}
.sidebar-veil.on{opacity:1;pointer-events:auto}

@media (max-width:640px){
  /* El encabezado envuelve en lugar de estirar el documento: sus hijos
     sumaban más de 600px y ensanchaban la página entera. */
  .header{
    height:auto;min-height:var(--header-h);flex-wrap:wrap;
    padding:.5rem .8rem;gap:.5rem;row-gap:.5rem;
  }
  .header > *{min-width:0}
  .header h1{font-size:.95rem;flex:1}
  .header .sub{display:none}
  /* La búsqueda global vive de un atajo de teclado: en el teléfono estorba. */
  .global-search{display:none}
  .branch-pick{order:5;flex:1 1 100%}
  .branch-pick select{max-width:none;width:100%}
  .header-actions .btn kbd{display:none}

  .content{padding:.85rem}

  /* El encabezado de página: el título arriba, la acción principal a lo ancho
     y las secundarias juntas en una fila compacta que envuelve. Antes cada
     botón ocupaba su propia línea y en Ventas los cuatro se comían media
     pantalla antes de llegar a un solo dato. */
  .page-head{
    flex-direction:row;flex-wrap:wrap;align-items:stretch;gap:.45rem;margin-bottom:.85rem;
  }
  .page-head h2{font-size:1.05rem}
  .page-head .spacer{display:none}
  .page-head > div:not(.spacer){flex:1 1 100%}
  .page-head > div:first-child{order:-2;margin-bottom:.15rem}
  .page-head > .btn{flex:1 1 auto;width:auto;justify-content:center;font-size:.8rem;padding:.45rem .7rem;min-height:38px}
  /* La principal sube bajo el título. No la pestaña activa de un selector
     («Por día / Por mes»): ésa se queda en su sitio, entre sus hermanas. */
  .page-head > .btn:not(.ghost):not(.subtle):not(.danger):not([aria-current]){order:-1;flex-basis:100%;font-size:.86rem;min-height:42px}
  /* Un formulario que sólo es un botón («Reconstruir stock») es una acción más
     de la fila; uno con campos —los filtros del Panel— va entero. */
  .page-head > form{flex:1 1 100%;display:block}
  .page-head > form:not(:has(select,input:not([type=hidden]),textarea)){flex:1 1 auto;width:auto}
  .page-head form .btn{width:100%}

  /* Barra de acciones del encabezado superior */
  .header-actions{flex:0 0 auto;margin-left:auto}
  .header-actions .btn{padding:.5rem .75rem;white-space:nowrap}

  /* Una sola columna: en 390px cualquier minmax parte la retícula. */
  .grid.g2,.grid.g3,.grid.g4,.grid.g6{grid-template-columns:1fr !important}
  .grid{gap:.75rem}
  .stat .value{font-size:1.25rem}

  /* Salvo los indicadores: una cifra con su etiqueta cabe en media pantalla, y
     de uno en uno los cinco de Ventas llenaban la primera pantalla. Van de dos
     en dos; lo que no es indicador —los filtros de Devoluciones— toma su
     propia fila, y el último indicador, si queda solo, también. */
  .grid:has(> .stat){grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:.55rem}
  .grid:has(> .stat) > :not(.stat){grid-column:1 / -1}
  .grid:has(> .stat) > .stat:last-child:nth-child(odd){grid-column:1 / -1}
  .grid > .stat{padding:.7rem .75rem;min-width:0}
  .grid > .stat .value{font-size:1.08rem;overflow-wrap:anywhere}
  .grid > .stat .foot{flex-wrap:wrap;font-size:.72rem}

  /* Filtros a pantalla completa, uno por línea */
  .filters{padding:.7rem}
  .filters .f,.filters .f.grow{min-width:0;flex:1 1 100%}
  .filters .btn{flex:1 1 100%}

  /* Plegados: el buscador y el botón «Filtros» en una fila, lo aplicado en
     chips debajo y el resto guardado hasta que se pida. Lo arma
     POS.filtrosPlegables() en app.js. */
  .filters.plegable{row-gap:.5rem}
  .filters.plegable:not(.abierto) > :not(.f-fija):not(.filtros-toggle):not(.filtros-chips){display:none}
  .filters.plegable .f-fija{flex:1 1 0}
  .filters .filtros-toggle{display:inline-flex;flex:0 0 auto;align-self:flex-end;min-height:38px;gap:.3rem}
  .filters.plegable:not(:has(.f-fija)) .filtros-toggle{flex:1 1 auto}
  .filters.plegable.abierto .filtros-toggle{background:var(--brand-soft);border-color:var(--brand-border)}
  .filtros-n{
    display:inline-grid;place-items:center;min-width:1.2rem;height:1.2rem;padding:0 .3rem;
    border-radius:99px;background:var(--brand);color:#fff;font-size:.7rem;font-weight:700;
  }
  .filters .filtros-chips{display:flex;flex:1 1 100%;flex-wrap:wrap;gap:.35rem}
  .filtros-chips .chip{font-size:.75rem;padding:.3rem .65rem;white-space:normal;text-align:left}
  .filtros-chips .filtros-limpiar{color:var(--danger);text-decoration:none}

  /* Los datos se desplazan dentro de su caja, nunca la página. Sólo las tablas
     que siguen siendo tabla —los informes, con muchas columnas de cifras—: el
     resto se convierte en tarjetas justo debajo. Antes esta regla obligaba a
     TODA tabla a medir 640 px en una pantalla de 375, y eso escondía el valor,
     el estado y los botones fuera de la vista. */
  .table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}

  /* ---------------------------------------------- Tablas de informe
     Antes medían 640 px a la fuerza: una tabla de cuatro columnas («Método,
     Operaciones, Total, %») que cabía entera también obligaba a deslizar. Ahora
     miden lo que piden sus datos —las cifras no se parten, los textos tienen
     un mínimo legible— y sólo se deslizan cuando de verdad no caben. */
  table.data:not(.cards){min-width:100%;width:auto}
  table.no-cards th,table.no-cards td.num{white-space:nowrap}
  table.no-cards th,table.no-cards td{padding:.5rem .6rem}
  table.no-cards th{letter-spacing:.02em}
  table.no-cards td:not(.num):not(.c){min-width:7rem}
  table.no-cards td.muted.mono:first-child{min-width:0}

  /* La columna que dice de quién es la fila se queda quieta al deslizar
     (la marca POS.tablasDeslizables); una sombra aparece cuando ya hay
     columnas escondidas debajo de ella. */
  table.no-cards .td-fija{position:sticky;left:var(--fija-izq,0);z-index:1;background:var(--surface)}
  table.no-cards th.td-fija{z-index:3;background:var(--surface-2)}
  table.no-cards tbody tr:hover .td-fija{background:var(--surface-2)}
  table.no-cards td.td-fija-ult{max-width:9.5rem;white-space:normal}
  .wrap-desliza.desplazada .td-fija-ult::after{
    content:"";position:absolute;top:0;bottom:0;right:-8px;width:8px;pointer-events:none;
    background:linear-gradient(to right,rgba(15,23,42,.13),transparent);
  }
  /* El borde derecho se desvanece mientras quede algo por ver a ese lado. */
  .wrap-desliza.hay-mas{
    -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 2.2rem),rgba(0,0,0,.25));
    mask-image:linear-gradient(to right,#000 calc(100% - 2.2rem),rgba(0,0,0,.25));
  }

  /* ---------------------------------------------- Filas como tarjetas
     Las marca POS.tarjetas() en app.js: título de columna en cada celda, la
     primera como título de la tarjeta y la de acciones al pie. Los !important
     están para ganarle a los estilos en línea que traen algunas vistas; sólo
     viven dentro de este bloque, así que en escritorio no pesan. */
  .table-wrap.wrap-cards{overflow:visible !important;border-radius:0 !important;border:0 !important}
  table.data.cards,table.table.cards{min-width:0 !important;width:100% !important;border:0}
  table.cards thead{display:none}
  table.cards,table.cards tbody,table.cards tr,table.cards td{display:block;width:100%}
  table.cards tbody tr{
    background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);
    padding:.4rem .8rem .55rem;margin:0 0 .6rem;box-shadow:var(--shadow-sm);
  }
  table.cards tbody tr:hover{background:var(--surface)}
  table.cards tbody tr:last-child{margin-bottom:0}
  .card > .table-wrap.wrap-cards,.card > .wrap-cards{padding:.6rem}

  table.cards td{
    padding:.28rem 0 !important;border:0 !important;min-width:0;
    text-align:right !important;white-space:normal !important;max-width:none !important;
    font-size:.86rem;
  }
  /* La etiqueta a la izquierda y el valor a la derecha, en el mismo renglón. */
  table.cards td::before{
    content:attr(data-label);float:left;margin-right:.75rem;max-width:48%;
    text-align:left;font:600 .7rem/1.6 var(--font);letter-spacing:.03em;
    text-transform:uppercase;color:var(--text-3);
  }
  table.cards td::after{content:"";display:table;clear:both}
  table.cards td[data-label=""]::before{content:none}
  table.cards td:empty{display:none}

  /* El título: la primera columna, sin etiqueta y a lo ancho. */
  table.cards td.td-titulo{
    text-align:left !important;padding:.3rem 0 .5rem !important;margin-bottom:.2rem;
    border-bottom:1px solid var(--border) !important;font-size:.9rem;
  }
  table.cards td.td-titulo::before{content:none}
  table.cards td.td-media{float:left;width:auto !important;padding:.3rem .65rem .3rem 0 !important;border:0 !important}
  table.cards td.td-media::before,table.cards td.td-media::after{content:none}
  table.cards td.td-media + td.td-titulo{overflow:hidden;width:auto !important;min-height:48px}
  table.cards td.td-media + td.td-titulo + td{clear:both}

  /* Las acciones al pie, siempre a la vista y con tamaño de dedo. */
  table.cards td.td-acciones{
    display:flex;flex-wrap:wrap;gap:.45rem;justify-content:flex-start;align-items:center;
    text-align:left !important;margin-top:.35rem;padding-top:.6rem !important;
    border-top:1px solid var(--border) !important;
  }
  table.cards td.td-acciones::before,table.cards td.td-acciones::after{content:none}
  table.cards td.td-acciones .btn,table.cards td.td-acciones .btn-icon,
  table.cards td.td-acciones > a,table.cards td.td-acciones > button{min-height:38px;min-width:38px}
  table.cards td.td-acciones form{display:inline-flex;margin:0}

  /* Una fila que abarca toda la tabla —«no hay registros»— va entera. */
  table.cards td[colspan]{text-align:center !important}
  table.cards td[colspan]::before{content:none}

  /* En la tarjeta cabe el nombre completo: recortarlo ya no hace falta. */
  table.cards .cell-clip{max-width:none !important}
  table.cards .cell-clip .t-title,table.cards .cell-clip .t-sub{white-space:normal;overflow:visible}
  table.cards td.num{font-size:.86rem}

  /* Pestañas de las fichas (cliente, producto, usuarios): se reparten el
     ancho y parten el texto en dos líneas en vez de empujar la tercera fuera
     de la pantalla. «3. Observaciones & Notas» quedaba a medias en 375 px. */
  .tabs-bar{gap:.25rem !important}
  .tabs-bar > button{
    flex:1 1 0;min-width:0;padding:.6rem .35rem !important;
    font-size:.78rem;line-height:1.25;white-space:normal;text-align:center;
  }

  /* Los atajos de periodo de los informes se deslizan, pero nada lo decía:
     «Este mes» y «Mes anterior» vivían fuera de la pantalla sin que nadie lo
     supiera. El borde derecho se desvanece para avisar que hay más. */
  .fr-quick{
    -webkit-mask-image:linear-gradient(to right,#000 82%,transparent);
    mask-image:linear-gradient(to right,#000 82%,transparent);
    padding-right:2.2rem !important;
  }

  /* Modales a pantalla casi completa: en móvil una ventana pequeña no sirve */
  .modal{max-width:100%;width:100%;max-height:92vh;border-radius:var(--radius) var(--radius) 0 0;margin-top:auto}
  .modal-backdrop{align-items:flex-end;padding:0}
  .modal-body{max-height:70vh}
  .modal-foot{flex-direction:column-reverse}
  .modal-foot .btn{width:100%}

  /* Objetivos táctiles cómodos */
  .btn{min-height:42px}
  .btn.sm{min-height:34px}
  input,select,textarea{min-height:42px;font-size:16px}   /* 16px evita el zoom de iOS */

  /* -------------------------------------------------- PUNTO DE VENTA
     El catálogo ocupa la pantalla; el resumen de la venta se pliega en una
     barra inferior y se despliega como hoja al tocarla. Antes el panel
     completo se superponía al catálogo y no dejaba trabajar. */
  .main{height:auto !important;overflow:visible !important}
  .pos{height:auto !important}
  .pos{grid-template-columns:1fr}
  .pos-products{max-height:none}
  .pgrid{grid-template-columns:repeat(auto-fill,minmax(128px,1fr));gap:.5rem}
  .pos-left{padding-bottom:76px}          /* hueco para la barra fija */

  .pos-right{
    position:fixed;left:0;right:0;bottom:0;top:auto;z-index:70;
    max-height:86vh;border-radius:var(--radius-lg) var(--radius-lg) 0 0;
    box-shadow:0 -10px 30px rgba(15,23,42,.22);
    transform:translateY(110%);transition:transform .25s ease;
  }
  .pos-right.open{transform:none}
  .pos-cart{max-height:44vh}

  .pos-sheet-handle{
    display:block;width:100%;border:0;background:transparent;padding:.55rem 0 .35rem;cursor:pointer;
  }
  .pos-sheet-handle span{
    display:block;width:42px;height:4px;border-radius:99px;background:var(--border-strong);margin:0 auto;
  }

  .pos-sheet-veil{
    display:block;position:fixed;inset:0;background:rgba(15,23,42,.45);z-index:69;
    opacity:0;pointer-events:none;transition:opacity .25s;
  }
  .pos-sheet-veil.on{opacity:1;pointer-events:auto}

  /* Barra plegada: cuántos productos, cuánto suma y cómo abrir */
  .pos-bar{
    display:flex;position:fixed;left:0;right:0;bottom:0;z-index:60;align-items:center;gap:.7rem;
    padding:.75rem 1rem;border:0;border-top:1px solid var(--border);
    background:var(--surface);box-shadow:0 -4px 16px rgba(15,23,42,.1);
    font:inherit;color:var(--text);cursor:pointer;min-height:64px;
  }
  .pos-bar .cnt{font-size:.8rem;color:var(--text-3);white-space:nowrap}
  .pos-bar .tot{flex:1;text-align:right;font-size:1.15rem;font-weight:700;letter-spacing:-.02em}
  .pos-bar .go{
    background:var(--brand);color:var(--brand-ink,#fff);border-radius:var(--radius-sm);
    padding:.5rem .8rem;font-size:.85rem;font-weight:640;white-space:nowrap;
  }
  .pos-bar.hidden{display:none}

  /* Controles del POS a medida de dedo (40 px). El − / + de la cantidad medía
     20×22 y los tres iconos de cada línea 24 px, a 4 px uno del otro: en el
     teléfono se acertaba al vecino. Los tamaños vienen en línea desde pos.js,
     de ahí los !important, que sólo viven en este bloque. */
  .citem{padding:.6rem .75rem !important}
  .citem .qty-pill{height:40px !important;border-radius:8px !important}
  .citem .qty-pill .qty-btn{width:40px !important;height:40px !important;font-size:1.05rem !important}
  .citem .qty-pill input{width:46px !important;height:40px !important;min-height:0;font-size:16px !important}
  .citem-acts{gap:6px !important}
  .citem-acts .btn{width:40px !important;height:40px !important;min-height:40px;border-radius:8px !important}
  .citem-acts .btn .material-symbols-outlined{font-size:18px !important}
  .citem-acts .btn[data-act="disc"]{font-size:.85rem !important}
  /* Cliente nuevo, descuento global y notas: 42 px, como el selector de al lado. */
  .pos-right [data-modal="modalQuickCustomer"].icon-only,#btnGlobalDiscount,#btnSaleNotes{
    width:42px !important;height:42px !important;flex:0 0 42px;
  }
  /* Categorías del catálogo: de 27 a 40 px de alto. */
  .pos-cats .chip{min-height:40px;padding:.45rem .9rem}
  /* El tirador de la hoja: una raya de 4 px dentro de un blanco de 18. */
  .pos-sheet-handle{padding:.95rem 0 .75rem;min-height:40px}

  /* Cobro. Los billetes rápidos («Exacto, 10K, 20K…») medían 29 px de alto
     y son lo que más toca un cajero; el valor, «Agregar otro método», la
     casilla de crédito y la × de cerrar también quedaban por debajo de 40. */
  #modalCheckout .quick-cash button{min-height:40px;padding-top:.5rem;padding-bottom:.5rem}
  #modalCheckout .pay-line select,#modalCheckout .pay-line input{height:44px;min-height:44px}
  #modalCheckout .pay-line .btn-icon{width:40px;height:40px;min-height:40px;flex:0 0 40px}
  #btnAddPayment{min-height:40px}
  #modalCheckout .checkout-tail .check{min-height:40px;display:inline-flex;align-items:center;gap:.5rem}
  #modalCheckout .checkout-tail .check input{width:22px;height:22px}
  #modalCheckout .checkout-tail input[type=text]{height:42px;min-height:42px}
  .modal-head .btn-icon{width:40px;height:40px;min-height:40px;flex:0 0 40px}

  /* ------------------------------------------ Letra mínima: 12 px
     En escritorio, 11 px se lee a un palmo de la pantalla; en un teléfono a
     pleno sol no. Aquí nada baja de 12 px. Primero las piezas compartidas
     que medían entre 10 y 11,7 px: subtítulos, insignias, etiquetas de los
     indicadores, títulos de tabla, el SKU de las tarjetas del POS… */
  .t-sub,.badge,.fs-xs,.hint,.stat .label,.stat .foot,.grid > .stat .foot,.kpi-label,
  table.data th,.filters label,.fr-label,.tl-when,.task-detail,.chip .n,.avatar,
  .app-bar-txt,.pcard .sk,.thumb-ph,table.cards td::before,
  .field .hint,.content .tl-when,.content .task-detail,.checkout-items .co-meta{font-size:12px}
  /* Sin teclado, «F3» junto al buscador del POS tampoco dice nada. */
  .pos-search .shint{display:none}
  /* …y luego los tamaños escritos en línea en las vistas y en pos.js (9, 10,
     10,5, 11 px…). Sólo dentro de la aplicación: las plantillas de impresión
     (tirilla, etiquetas) son documentos con su propia medida y no se tocan. */
  :is(.content,.app-bar,.app-sheet,.modal) :is(
    [style*="font-size:9px"],[style*="font-size:9.5px"],[style*="font-size:10px"],[style*="font-size:10.5px"],
    [style*="font-size:11px"],[style*="font-size:11.5px"],[style*="font-size: 10px"],[style*="font-size: 11px"],
    [style*="font-size:0.6rem"],[style*="font-size:.6rem"],[style*="font-size:.66rem"],[style*="font-size:0.66rem"],
    [style*="font-size:0.68rem"],[style*="font-size:.68rem"],[style*="font-size:0.7rem"],[style*="font-size:.7rem"],
    [style*="font-size:0.72rem"],[style*="font-size:.72rem"],[style*="font-size:0.73rem"],[style*="font-size:.73rem"]
  ){font-size:12px !important}

  /* Documentos impresos: que se puedan leer en el teléfono */
  .doc{width:100%;padding:4mm;font-size:10px}
  .doc-head{grid-template-columns:1fr;text-align:center;gap:2mm}
  .doc-logo{justify-self:center}
  .doc-party{grid-template-columns:1fr;gap:0}
  .doc-stamp,.doc-totals{width:100%}
  .doc-foot{grid-template-columns:1fr;gap:3mm}
  .doc-notes{padding-right:0}
}

@media (max-width:400px){
  .pgrid{grid-template-columns:repeat(2,1fr)}
}

/* ------------------------------------------------- Panel lateral de filtros
   Vive dentro del formulario del panel, así que "Aplicar" es un submit normal.
   En escritorio entra por la derecha; en móvil ocupa la pantalla, porque un
   panel de 380px en un teléfono deja el contenido en una rendija. */
.drawer-overlay{
  position:fixed;inset:0;z-index:1200;background:rgba(15,23,42,.38);
  opacity:0;transition:opacity .18s ease;
}
.drawer-overlay.open{opacity:1}
.drawer{
  position:fixed;top:0;right:0;bottom:0;z-index:1201;width:min(380px,100%);
  display:flex;flex-direction:column;background:var(--surface,#fff);
  border-left:1px solid var(--border);box-shadow:-8px 0 24px -12px rgba(15,23,42,.25);
  transform:translateX(100%);transition:transform .18s ease;
}
.drawer.open{transform:translateX(0)}
/* `display:flex` de la regla anterior le gana al `[hidden]` del navegador, y el
   panel se quedaba presente interceptando clics del encabezado aunque no se
   viera. Hay que apagarlo a mano. */
.drawer[hidden],.drawer-overlay[hidden]{display:none}
.drawer-head{
  display:flex;align-items:center;justify-content:space-between;gap:.75rem;
  padding:1rem 1.15rem;border-bottom:1px solid var(--border);flex:0 0 auto;
}
.drawer-head h3{margin:0;font-size:.98rem;font-weight:700}
.drawer-body{padding:1.15rem;overflow-y:auto;flex:1 1 auto}
.drawer-group{margin-bottom:1.35rem}
.drawer-group-title{
  display:block;font-size:.69rem;text-transform:uppercase;letter-spacing:.05em;
  font-weight:660;color:var(--text-3);margin-bottom:.55rem;
}
.drawer-field{margin-bottom:.7rem}
.drawer-field label{display:block;font-size:.75rem;font-weight:600;color:var(--text-2);margin-bottom:.25rem}
.drawer-field select{width:100%;height:36px;font-size:.82rem}
.drawer-note{
  margin:0;font-size:.75rem;line-height:1.45;color:var(--text-3);
  padding:.65rem .75rem;background:var(--surface-2);border-radius:var(--radius-sm);
}
.drawer-foot{
  display:flex;gap:.6rem;padding:.9rem 1.15rem;border-top:1px solid var(--border);flex:0 0 auto;
}
.drawer-foot .btn{flex:1;justify-content:center}
@media (max-width:640px){
  .drawer{width:100%;border-left:0}
}

/* Selector de métrica de la gráfica */
.metric-switch{display:inline-flex;gap:2px;padding:2px;background:var(--surface-2);border-radius:7px}
.metric-btn{
  border:0;background:transparent;cursor:pointer;padding:.3rem .7rem;border-radius:5px;
  font-size:.75rem;font-weight:640;color:var(--text-2);font-family:inherit;
}
.metric-btn:hover{color:var(--text)}
.metric-btn.on{background:var(--brand);color:var(--brand-ink)}

/* --------------------------------------------------- Tabs del análisis
   Mismo lenguaje que el selector de métrica de la gráfica: un control
   segmentado, no una fila de botones sueltos que se leen como acciones. */
.dash-tabs{display:inline-flex;gap:2px;padding:2px;background:var(--surface-2);border-radius:7px;flex-wrap:wrap}
.dash-tab-btn{
  border:0;background:transparent;cursor:pointer;padding:.34rem .75rem;border-radius:5px;
  font-size:.78rem;font-weight:640;color:var(--text-2);font-family:inherit;white-space:nowrap;
}
.dash-tab-btn:hover{color:var(--text)}
.dash-tab-btn.active{background:var(--brand);color:var(--brand-ink)}

/* Los paneles del análisis traen sus tablas a ras del borde de la tarjeta, así
   que el aviso de la matriz y las notas al pie necesitan su propio margen. */
.dash-pane > p{margin:0;padding:.7rem 1.05rem}
.dash-pane > .table-wrap + p{border-top:1px solid var(--border)}
/* Las tablas de los paneles van a ras del borde de la tarjeta: se les alinea
   la primera y la última columna con el resto del contenido. */
.dash-pane table.data th:first-child,.dash-pane table.data td:first-child{padding-left:1.05rem}
.dash-pane table.data th:last-child,.dash-pane table.data td:last-child{padding-right:1.05rem}

/* ------------------------------------------------------- Tarjetas KPI del panel
   El pie iba pegado a la cifra: `.stat .value` deja 1,6px abajo y el `mt1` no
   alcanzaba a separarlos. Se les da su propio ritmo en vez de repetir estilos
   en línea en cada tarjeta. */
.stat.kpi{background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:.95rem 1rem}
.stat.kpi .kpi-label{display:flex;align-items:center;justify-content:space-between;gap:.5rem}
.stat.kpi .value{margin:.45rem 0 0}
.stat.kpi .kpi-foot{
  display:flex;align-items:center;justify-content:space-between;gap:.5rem;flex-wrap:wrap;
  margin-top:.4rem;font-size:.75rem;color:var(--text-3);line-height:1.35;
}

/* ------------------------------------------------------- Qué atender hoy
   Cada línea es un enlace al sitio donde se resuelve, ya filtrado: el punto de
   color dice la gravedad y el importe a la derecha dice cuánta plata mueve. */
.task-list{display:flex;flex-direction:column}
.task{
  display:flex;align-items:center;gap:.7rem;padding:.7rem 1.05rem;text-decoration:none;
  color:inherit;border-bottom:1px solid var(--border);transition:background .12s ease;
}
.task:last-child{border-bottom:0}
.task:hover{background:var(--surface-2)}
.task-dot{width:8px;height:8px;border-radius:50%;flex:0 0 auto;background:var(--text-3)}
.task-dot.danger{background:var(--danger)}
.task-dot.warn{background:var(--warn)}
.task-dot.info{background:var(--brand)}
.task-body{display:flex;flex-direction:column;min-width:0;flex:1}
.task-title{font-size:.83rem;font-weight:600;line-height:1.3;color:var(--text)}
.task-detail{font-size:.73rem;color:var(--text-3);line-height:1.35;margin-top:.1rem}
.task-amount{font-family:var(--mono);font-size:.8rem;font-weight:640;white-space:nowrap}
.task-arrow{font-size:18px;color:var(--text-3);flex:0 0 auto}
.task:hover .task-arrow{color:var(--brand)}

/* ------------------------------------------------------ Gráfica de barras
   El ancho de columna lo fija la vista según cuántos puntos haya (--bar-max):
   con tres columnas anchas se lee mejor que con tres hilos pegados a la
   izquierda, y con treinta hace falta lo contrario. Las columnas se centran
   para que un periodo corto no deje media tarjeta vacía. */
.chart-bars{
  display:flex;align-items:flex-end;justify-content:center;gap:clamp(6px,1.2vw,18px);
  height:170px;padding-top:6px;overflow-x:auto;
}
.chart-bars.with-values{height:190px}
.chart-col{
  flex:1 1 0;min-width:24px;max-width:var(--bar-max,64px);height:100%;
  display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:5px;
}
/* Actual y anterior comparten base: la de comparación queda detrás, más baja
   en la pila visual, para que la lectura principal siga siendo la del periodo
   en curso. */
.chart-stack{position:relative;width:100%;flex:1;display:flex;align-items:flex-end;gap:3px}
.chart-bar{border-radius:5px 5px 0 0;transition:height .25s ease,background .15s ease;min-height:0}
.chart-bar.now{flex:2;background:var(--brand-soft);border:1px solid var(--brand-border)}
.chart-bar.prev{flex:1;background:var(--surface-3);border:1px solid var(--border)}
.chart-col:hover .chart-bar.now,.chart-col.today .chart-bar.now{background:var(--brand);border-color:var(--brand)}
.chart-label{font-size:.66rem;font-weight:600;color:var(--text-3);white-space:nowrap}
.chart-value{
  font-size:.68rem;font-weight:660;color:var(--text-2);white-space:nowrap;
  font-family:var(--mono);min-height:1em;
}
.chart-legend{
  display:flex;gap:1.1rem;flex-wrap:wrap;margin-bottom:.55rem;
  font-size:.72rem;color:var(--text-3);
}
.chart-legend .swatch{
  display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:.3rem;
  vertical-align:-1px;
}
.chart-legend .swatch.now{background:var(--brand-soft);border:1px solid var(--brand-border)}
.chart-legend .swatch.prev{background:var(--surface-3);border:1px solid var(--border)}

/* ------------------------------------------------ Cómo va el día, en una línea
   Una sola frase que se lee en tres segundos, antes de las tarjetas. El color
   sale de los estados semánticos, no de la marca: aquí «va bien» y «va mal»
   significan algo, y no deben depender del color que eligió cada empresa. */
.headline{
  display:flex;align-items:center;gap:.6rem;margin-bottom:1rem;
  padding:.75rem 1rem;border:1px solid var(--border);border-left-width:4px;
  border-radius:var(--radius-sm);background:var(--surface);font-size:.95rem;line-height:1.4;
}
.headline.up{border-left-color:var(--ok);background:var(--ok-soft)}
.headline.down{border-left-color:var(--warn);background:var(--warn-soft)}
.headline-ico{font-size:22px;flex:0 0 auto;color:var(--text-3)}
.headline.up .headline-ico{color:var(--ok)}
.headline.down .headline-ico{color:var(--warn)}
.headline-nota{color:var(--text-3);font-size:.82rem}

/* ------------------------------------------------------- Vistas guardadas
   Una fila de atajos: el nombre abre la vista, la equis la borra. Cada equis
   es su propio formulario porque el de filtros es un GET y el HTML no admite
   formularios anidados. */
.saved-views{
  display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;margin-bottom:1rem;
}
.saved-views-title{
  font-size:.69rem;font-weight:700;color:var(--text-3);
  text-transform:uppercase;letter-spacing:.05em;
}
.saved-view{
  display:inline-flex;align-items:center;gap:.15rem;
  background:var(--brand-soft);border:1px solid var(--brand-border);
  border-radius:14px;padding:.15rem .3rem .15rem .65rem;
}
.saved-view a{
  font-size:.75rem;font-weight:640;color:var(--brand-dark,var(--brand));text-decoration:none;
}
.saved-view a:hover{text-decoration:underline}
.saved-view form{display:inline-flex;margin:0}
.saved-view button{
  border:0;background:none;cursor:pointer;padding:0 .1rem;display:inline-flex;
  align-items:center;color:var(--text-3);
}
.saved-view button:hover{color:var(--danger)}
.saved-view button .material-symbols-outlined{font-size:14px}
.saved-views-form{display:inline-flex;align-items:center;gap:.4rem;margin:0}
.saved-views-form input[type=text]{
  height:28px;font-size:.75rem;padding:0 .55rem;width:200px;
  border:1px solid var(--border);border-radius:6px;
}

/* ------------------------------------------------- Devoluciones: clasificar
   Condición y destino son dos decisiones, y van juntas en la celda para que se
   lean como una sola: «llegó así → va allí». La observación y el aviso
   aparecen sólo cuando el destino los pide. */
.ret-cell{display:flex;flex-direction:column;gap:.35rem}
.ret-cell select,.ret-cell input{width:100%;height:32px;font-size:.78rem}
.ret-warn{
  font-size:.7rem;line-height:1.35;color:#92400e;background:var(--warn-soft);
  border-radius:5px;padding:.3rem .45rem;
}
.ret-summary{
  margin-top:.9rem;padding-top:.75rem;border-top:1px dashed var(--border);
}
.ret-summary-title{
  display:block;font-size:.69rem;font-weight:700;color:var(--text-3);
  text-transform:uppercase;letter-spacing:.05em;margin-bottom:.4rem;
}
.ret-alerts{margin-top:.7rem}
.ret-alerts p{
  margin:0 0 .35rem;font-size:.75rem;line-height:1.4;color:#92400e;
  background:var(--warn-soft);border-radius:6px;padding:.45rem .6rem;
}
.ret-alerts p:last-child{margin-bottom:0}

/* ------------------------------------------------ Trazabilidad de una devolución
   La línea de tiempo no se guarda: se arma con lo que cada paso ya dejó
   escrito, así que aquí sólo hace falta darle forma de secuencia. */
.timeline{list-style:none;margin:0;padding:0 0 0 1.1rem;border-left:2px solid var(--border)}
.timeline li{position:relative;padding:0 0 1rem 1rem}
.timeline li:last-child{padding-bottom:0}
.timeline li::before{
  content:'';position:absolute;left:-1.42rem;top:.35rem;width:9px;height:9px;
  border-radius:50%;background:var(--brand);border:2px solid var(--surface);
}
.tl-when{display:block;font-size:.7rem;color:var(--text-3);font-family:var(--mono)}
.tl-what{display:block;font-size:.83rem;font-weight:620;line-height:1.35}
.tl-who{display:block;font-size:.75rem;color:var(--text-3);line-height:1.4}

/* ------------------------------------------- Datos del canal externo (POS)
   Sólo se muestran cuando el vendedor elegido es un canal. Los importes vienen
   del informe del marketplace y los totales de abajo se recalculan solos: aquí
   no hay ningún porcentaje configurado, se calcula por operación. */
.channel-box{
  border:1px solid var(--brand-border);border-radius:var(--radius-sm);
  background:var(--brand-soft);padding:.65rem;margin-top:.5rem;
}
.channel-head{display:flex;align-items:center;gap:.4rem;margin-bottom:.45rem;font-size:.82rem}
.channel-head .material-symbols-outlined{font-size:18px;color:var(--brand)}
.channel-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(128px,1fr));
  gap:.4rem;margin-bottom:.4rem;
}
/* De la etiqueta sola no se deduce el signo: «Descuentos y bonificaciones»
   suena a resta y es plata a favor. El grupo lo dice con el signo y con un
   color de apoyo, no sólo con el color: quien no lo distinga sigue viendo
   el + o el menos. */
.channel-group{margin-bottom:.4rem}
.channel-group-title{
  display:flex;align-items:center;gap:.3rem;margin-bottom:.2rem;
  font-size:.66rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;
}
.channel-group-title .sign{
  display:inline-grid;place-items:center;width:15px;height:15px;border-radius:99px;
  font-size:.7rem;font-weight:800;line-height:1;
}
.channel-group.ingreso .channel-group-title{color:#15803d}
.channel-group.ingreso .sign{background:var(--ok-soft);color:#15803d}
.channel-group.ingreso .channel-grid .field input{border-left:2px solid var(--ok-border)}
.channel-group.ingreso .channel-grid .field .sg{color:#15803d}
.channel-group.deduccion .channel-group-title{color:#b45309}
.channel-group.deduccion .sign{background:var(--warn-soft);color:#b45309}
.channel-group.deduccion .channel-grid .field input{border-left:2px solid var(--warn-border)}
.channel-group.deduccion .channel-grid .field .sg{color:#b45309}
/* El signo delante de cada etiqueta: dice si ese importe suma o resta sin
   depender del color. */
.channel-grid .field .sg{font-weight:800;margin-right:.25rem}
.channel-grid .field label{font-size:.68rem;font-weight:600;color:var(--text-2);margin-bottom:.15rem;display:block}
.channel-grid .field input{height:30px;font-size:.78rem;width:100%}
.channel-totals{
  border-top:1px dashed var(--brand-border);background:var(--surface);
  border-radius:6px;padding:.45rem .6rem;
}
.channel-totals #chDeducibles{color:#b45309}
.channel-totals #chNeto{color:#15803d}
.channel-note{
  margin:.4rem 0 0;font-size:.7rem;line-height:1.35;color:var(--text-3);
}
.channel-note.warn{color:#92400e;background:var(--warn-soft);border-radius:5px;padding:.4rem .55rem}