/* ===========================================================
   COLORES DE SINAXIS — cambiá estos hex por los oficiales.
   =========================================================== */
:root{
  /* Colores de marca Sinaxis: navy #0d1b35, naranja #e85d3f, blanco. */
  --bg:#0a1428; --surface:#0d1b35; --surface-2:#15294c; --surface-3:#1e375f;
  --border:#263a62; --text:#eef1f7; --text-dim:#8a97b2;
  --field-bg:#1b3159;   /* fondo de los campos de filtro (se aclara en tema claro) */
  --primary:#e85d3f; --primary-600:#d24d31; --accent:#e85d3f;
  --success:#3f9d6b; --danger:#c8443b; --warning:#cf922f;
  --tile-bg:#233457; --tile-fg:#e9edf5;   /* miniatura de producto (inicial) */
  --radius:11px; --radius-sm:8px;
  /* Tipografía: solo 2 fuentes en toda la app. */
  --font:'Barlow Condensed', sans-serif;        /* principal */
  --font-2:'Barlow', sans-serif;                /* secundaria (textos chicos/grises) */
}

/* Tema claro: papel cálido (nada de blanco puro), tinta pizarra, naranja de marca. */
:root[data-theme="light"]{
  --bg:#e9e7e1; --surface:#f7f5f0; --surface-2:#eeeae2; --surface-3:#e3ded4;
  --border:#d7d1c6; --text:#1e2a33; --text-dim:#5c6470;
  --field-bg:#fdfdfb;   /* campos de filtro en blanco en tema claro */
  --tile-bg:#d7ccb8; --tile-fg:#2a3742;   /* miniatura más marcada que el fondo cálido */
}
*{ box-sizing:border-box; margin:0; padding:0; }
html,body{ height:100%; }
body{
  font-family:var(--font);
  background:var(--bg); color:var(--text); display:flex; height:100vh; overflow:hidden;
  -webkit-font-smoothing:antialiased; letter-spacing:.2px;
}
::-webkit-scrollbar{ width:9px; height:9px; }
::-webkit-scrollbar-thumb{ background:var(--border); border-radius:9px; }

/* ---------- Sidebar ---------- */
.sidebar{ width:230px; flex-shrink:0; background:var(--surface); border-right:1px solid var(--border);
  display:flex; flex-direction:column; padding:16px 12px; }
.brand{ display:flex; align-items:center; gap:11px; padding:6px 8px 18px; }
.brand .logo{ width:38px; height:38px; border-radius:11px;
  background:var(--primary); display:grid; place-items:center;
  font-weight:800; font-size:18px; color:#fff; }
.brand h1{ font-size:18px; font-weight:700; line-height:1.1; letter-spacing:.5px; }
.brand span{ font-size:10.5px; color:var(--text-dim); text-transform:uppercase; letter-spacing:.5px; }

/* Logo (cambia según tema claro/oscuro) */
.brand-icon{ width:40px; height:40px; display:block; flex-shrink:0; }
.brand-icon-light{ display:none; }
:root[data-theme="light"] .brand-icon-light{ display:block; }
:root[data-theme="light"] .brand-icon-dark{ display:none; }
.login-brand .brand-icon{ width:56px; height:56px; }
/* La lista de navegación ocupa el alto disponible y scrollea sola: así el footer
   (perfil, atajos, tema) queda siempre fijo abajo aunque se abran varios grupos. */
.nav{ flex:1 1 auto; min-height:0; overflow-y:auto; overflow-x:hidden; }
.nav-label{ font-size:10px; text-transform:uppercase; letter-spacing:.09em; color:var(--text-dim); padding:14px 10px 6px; }
.nav a{ position:relative; display:flex; align-items:center; gap:11px; padding:9px 11px; border-radius:var(--radius-sm);
  color:var(--text-dim); text-decoration:none; font-size:13.5px; font-weight:500; margin-bottom:2px; cursor:pointer; transition:.15s; }
.nav a svg{ width:17px; height:17px; flex-shrink:0; transition:.15s; }
.nav a:hover{ background:var(--surface-2); color:var(--text); }
/* Ítem activo: sin resaltado de fondo. Ícono naranja y relleno + línea vertical a la derecha. */
.nav a.active{ background:none; box-shadow:none; color:var(--primary); font-weight:700; }
.nav a.active svg{ color:var(--primary); fill:var(--primary); stroke:var(--primary); }
.nav a.active::after, .nav-sublink.active::after{
  content:''; position:absolute; right:-12px; top:5px; bottom:5px; width:3px;
  background:var(--primary); border-radius:3px 0 0 3px; }

/* Íconos por máscara: el archivo PNG define la forma, el color lo pone el CSS (currentColor). */
.nav-ico{ width:19px; height:19px; flex-shrink:0; display:inline-block; background-color:currentColor;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-position:center; mask-position:center;
  -webkit-mask-size:contain; mask-size:contain; transition:.15s; }
.ico-logout{ width:18px; height:18px; -webkit-mask-image:url('/assets/icons/logout.png'); mask-image:url('/assets/icons/logout.png'); }
/* grupos desplegables */
.nav-group{ margin-bottom:2px; }
.nav-group-head{ width:100%; display:flex; align-items:center; gap:11px; padding:9px 11px; border:none;
  background:none; color:var(--text-dim); font-size:13.5px; font-weight:500; cursor:pointer;
  border-radius:var(--radius-sm); font-family:inherit; }
.nav-group-head:hover{ background:var(--surface-2); color:var(--text); }
.nav-group-head svg{ width:17px; height:17px; flex-shrink:0; }
.nav-group-head .chev{ margin-left:auto; width:14px; height:14px; transition:transform .2s; }
.nav-group.open > .nav-group-head .chev{ transform:rotate(90deg); }
.nav-group.open > .nav-group-head{ color:var(--text); }
.nav-sub{ display:none; margin:2px 0 6px 10px; padding-left:12px; border-left:1px solid var(--border); }
.nav-group.open > .nav-sub{ display:block; }
.nav-sublink{ position:relative; display:flex; align-items:center; padding:8px 11px; border-radius:var(--radius-sm);
  color:var(--text-dim); text-decoration:none; font-size:13px; font-weight:500; margin-bottom:1px; transition:.15s; }
.nav-sublink:hover{ background:var(--surface-2); color:var(--text); }
.nav-sublink.active{ background:none; box-shadow:none; color:var(--primary); font-weight:700; }
/* El grupo que contiene la sección activa muestra su ícono en naranja y relleno. */
.nav-group.has-active > .nav-group-head{ color:var(--primary); }
.nav-group.has-active > .nav-group-head svg{ color:var(--primary); fill:var(--primary); stroke:var(--primary); }
.soon-tag{ margin-left:auto; font-style:normal; font-size:9px; text-transform:uppercase; letter-spacing:.05em;
  background:var(--surface-3); color:var(--text-dim); padding:2px 6px; border-radius:999px; }

/* placeholder "próximamente" */
.soon{ padding:40px 24px; }
.soon-card{ max-width:440px; margin:0 auto; text-align:center; background:var(--surface);
  border:1px solid var(--border); border-radius:var(--radius); padding:40px 28px; }
.soon-ic{ font-size:40px; margin-bottom:12px; }
.soon-card h3{ font-size:17px; margin-bottom:8px; }
.soon-card p{ color:var(--text-dim); font-size:13.5px; line-height:1.5; }

.sidebar-footer{ flex-shrink:0; margin-top:8px; padding-top:8px; border-top:1px solid var(--border); }
.theme-toggle{ width:100%; display:flex; align-items:center; justify-content:center; gap:8px;
  background:var(--surface-2); border:1px solid var(--border); color:var(--text-dim);
  padding:9px; border-radius:var(--radius-sm); font-size:12.5px; font-weight:600; cursor:pointer;
  margin-bottom:10px; font-family:inherit; transition:.15s; }
.theme-toggle:hover{ color:var(--text); background:var(--surface-3); }
.trial{ background:var(--primary); border-radius:var(--radius-sm);
  padding:12px; text-align:center; font-size:12.5px; font-weight:600; cursor:pointer; margin-bottom:12px; }
.user{ display:flex; align-items:center; gap:10px; padding:8px; border-radius:var(--radius-sm); background:var(--surface-2); cursor:pointer; transition:.15s; }
.user:hover{ background:var(--surface-3); }
.user .av{ width:34px; height:34px; border-radius:9px; background:var(--primary); flex-shrink:0;
  background-size:cover; background-position:center; }
.user small{ display:block; color:var(--text-dim); font-size:12px; }
.user b{ font-size:14px; }
.user .user-info{ flex:1; min-width:0; }
.user .user-info b{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:block; }
/* Distintivo de rol */
/* Distintivo de rol: misma etiqueta rectangular que los estados, con punto de color por rol. */
.user-info .role-badge{ display:inline-flex; align-items:center; gap:6px; margin-top:4px; padding:3px 8px;
  border-radius:5px; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.05em;
  background:var(--surface-3); border:1px solid var(--border); color:var(--text); }
.role-badge::before{ content:''; width:6px; height:6px; border-radius:50%; background:var(--role-color, var(--text-dim)); flex:none; }
.role-superadmin{ --role-color:var(--primary); }
.role-administrador{ --role-color:#5b7fb0; }
.role-encargado{ --role-color:#5f8a7d; }
.role-cajero{ --role-color:var(--text-dim); }
.logout-btn{ background:none; border:none; color:var(--text-dim); font-size:16px; cursor:pointer; padding:4px 6px; border-radius:8px; }
.logout-btn:hover{ background:var(--surface-3); color:var(--danger); }

/* ---------- Pantalla de login (split) ---------- */
.login-screen{ position:fixed; inset:0; z-index:100; display:none; }   /* app.js la muestra con flex */
.login-aside{ flex:1; position:relative; overflow:hidden;
  background:#0d1b35;
  display:flex; align-items:center; justify-content:center; }
.login-illus{ width:100%; display:flex; align-items:center; justify-content:center; }
.login-illus svg{ width:min(72%, 440px); height:auto; }

.login-main{ flex:1; background:var(--bg); display:flex; align-items:center; justify-content:center; padding:24px; }
.login-box{ width:340px; max-width:100%; }
.login-brand{ display:flex; align-items:center; gap:12px; justify-content:center; margin-bottom:4px; }
.login-brand .logo{ width:44px; height:44px; border-radius:12px; background:var(--primary);
  display:grid; place-items:center; font-weight:800; font-size:22px; color:#fff; }
.login-brand h1{ font-size:24px; font-weight:800; }
.login-welcome{ text-align:center; font-size:20px; font-weight:700; color:var(--text); margin:8px 0 28px; }

#loginForm{ display:flex; flex-direction:column; gap:16px; }
#loginForm label{ display:flex; flex-direction:column; gap:6px; font-size:13px; color:var(--text-dim); font-weight:500; }
#loginForm input{ width:100%; background:var(--surface-2); border:1px solid var(--border); color:var(--text);
  padding:12px 13px; border-radius:10px; font-size:14px; }
#loginForm input:focus{ outline:none; border-color:var(--primary); }
.pass-wrap{ position:relative; }
.pass-wrap input{ padding-right:42px; }
.pass-eye{ position:absolute; right:6px; top:50%; transform:translateY(-50%); background:none; border:none;
  color:var(--text-dim); cursor:pointer; font-size:16px; padding:6px 8px; border-radius:8px; line-height:1; }
.pass-eye:hover{ color:var(--text); }
.login-error{ color:var(--danger); font-size:12.5px; min-height:16px; }
.login-submit{ width:100%; justify-content:center; padding:13px; font-size:15px; margin-top:4px; }

@media (max-width: 820px){ .login-aside{ display:none; } }

/* ---------- Layout ---------- */
.main{ flex:1; display:flex; flex-direction:column; min-width:0; }
.demo-banner{ background:var(--primary); color:#fff; font-size:12.5px;
  text-align:center; padding:7px 16px; font-weight:500; }
.content{ flex:1; min-height:0; overflow:auto; display:flex; flex-direction:column; }

/* ---------- Página admin (tabla) ---------- */
.page-head{ display:flex; justify-content:space-between; align-items:center; padding:22px 24px 14px; }
.page-head h2{ font-size:21px; font-weight:700; }
.card-table{ margin:0 24px 24px; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); overflow:auto; }
.tbl{ width:100%; border-collapse:collapse; font-size:13px; }
.tbl th{ text-align:left; color:var(--text-dim); font-weight:600; padding:11px 14px; border-bottom:1px solid var(--border);
  white-space:nowrap; background:var(--surface); position:sticky; top:0; }
.tbl td{ padding:12px 14px; border-bottom:1px solid var(--border); vertical-align:middle; }
.tbl tbody tr:last-child td{ border-bottom:none; }
.tbl tbody tr:hover{ background:var(--surface-2); }
.tbl small{ color:var(--text-dim); }
.cell-note{ max-width:200px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:var(--text-dim); }
.tbl a{ color:var(--primary); text-decoration:none; font-weight:600; }
.tbl a:hover{ text-decoration:underline; }
.empty-row{ text-align:center; color:var(--text-dim); padding:44px !important; }
/* Celda de acciones: NO usar display:flex en el <td> (rompe la fila de la tabla).
   Los botones son inline-block y envuelven solos; el espaciado va por margen. */
.actions{ white-space:normal; }
.actions .btn{ margin:2px 5px 2px 0; vertical-align:middle; }
/* Etiqueta de estado: tag rectangular con punto, en versalitas (no el "pill" pastel genérico). */
.pill{ display:inline-flex; align-items:center; gap:6px; font-size:10.5px; font-weight:700;
  text-transform:uppercase; letter-spacing:.05em; padding:3px 8px; border-radius:4px;
  background:var(--surface-2); border:1px solid var(--border); color:var(--text-dim); line-height:1.4; }
.pill::before{ content:''; width:6px; height:6px; border-radius:50%; background:currentColor; flex:none; }
.pill.ok{ color:var(--success); }
.pill.warn{ color:var(--warning); }
.pill.off{ color:var(--danger); }
.pill.neutral{ color:var(--text-dim); }
.pill.neutral::before{ display:none; }   /* neutro sin punto */
.page-foot{ padding:0 24px 24px; }
.pager{ display:flex; align-items:center; gap:14px; }
.pager span{ font-size:12.5px; color:var(--text-dim); }
.loading, .error-box{ padding:48px 24px; color:var(--text-dim); text-align:center; }
.error-box{ color:var(--warning); }

/* ---------- Botones ---------- */
.btn{ border:1px solid var(--border); background:var(--surface-2); color:var(--text); padding:8px 14px;
  border-radius:var(--radius-sm); font-size:13px; font-weight:600; cursor:pointer; transition:.15s;
  display:inline-flex; align-items:center; gap:6px; }
.btn:hover{ background:var(--surface-3); }
.btn.primary{ background:var(--primary); border-color:var(--primary); color:#fff; }
.btn.primary:hover{ background:var(--primary-600); }
.btn.sm{ padding:5px 10px; font-size:12px; }
.btn.danger{ border-color:rgba(239,68,68,.5); color:var(--danger); }
.btn.danger:hover{ background:var(--danger); color:#fff; border-color:var(--danger); }
.btn:disabled{ opacity:.5; cursor:not-allowed; }

/* ---------- Modal ---------- */
.modal{ position:fixed; inset:0; background:rgba(0,0,0,.55); display:none; align-items:center; justify-content:center; z-index:60; }
.modal.show{ display:flex; }
.modal.stacked{ z-index:65; }   /* modal apilado por encima del actual */
.modal-card{ background:var(--surface); border:1px solid var(--border); border-radius:16px; width:520px; max-width:94vw; max-height:90vh; overflow:auto; }
.modal-head{ display:flex; justify-content:space-between; align-items:center; padding:18px 20px; border-bottom:1px solid var(--border); }
.modal-head h3{ font-size:21px; font-weight:700; }
.modal-x{ background:none; border:none; color:var(--text-dim); font-size:22px; cursor:pointer; }
.modal-body{ padding:18px 20px; display:flex; flex-direction:column; gap:14px; }
.modal-body label{ display:flex; flex-direction:column; gap:6px; font-size:15px; font-weight:600; color:var(--text); }
.modal-body input, .modal-body select, .modal-body textarea{ background:var(--surface-2); border:1px solid var(--border);
  color:var(--text); padding:12px 13px; border-radius:10px; font-size:17px; font-family:inherit; }
.modal-body label.chk{ flex-direction:row; align-items:center; gap:9px; color:var(--text); font-size:16px; }
.modal-body label.chk input{ width:auto; }
.modal-actions{ display:flex; justify-content:flex-end; gap:10px; margin-top:6px; }
.ps-add{ display:flex; gap:8px; margin-top:12px; }
.ps-add select{ flex:1; min-width:0; background:var(--surface-2); border:1px solid var(--border); color:var(--text); padding:10px 12px; border-radius:8px; font-size:16px; }
.ps-add input{ width:110px; background:var(--surface-2); border:1px solid var(--border); color:var(--text); padding:10px 12px; border-radius:8px; font-size:16px; }

/* ---------- Toast ---------- */
.toast{ position:fixed; bottom:24px; left:50%; transform:translateX(-50%) translateY(20px);
  background:var(--success); color:#fff; padding:12px 22px; border-radius:12px; font-weight:600; font-size:14px;
  opacity:0; transition:.3s; pointer-events:none; z-index:70; max-width:80vw; text-align:center; }
.toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }

/* ---------- POS ---------- */
.pos{ flex:1; display:flex; min-height:0; }
.pos-catalog{ flex:1; display:flex; flex-direction:column; min-width:0; }
.pos-toolbar{ padding:16px 20px 8px; }
.search{ position:relative; max-width:360px; }
.search input{ width:100%; background:var(--surface-2); border:1px solid var(--border); color:var(--text);
  padding:9px 12px 9px 34px; border-radius:var(--radius-sm); font-size:13px; }
.search svg{ position:absolute; left:11px; top:9px; width:15px; height:15px; color:var(--text-dim); }
.grid{ flex:1; overflow-y:auto; padding:12px 20px 24px; display:grid;
  grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:14px; align-content:start; }
.card{ background:var(--surface-2); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden;
  cursor:pointer; transition:.15s; display:flex; flex-direction:column; }
.card:hover{ border-color:var(--primary); }
.card .thumb{ height:96px; display:grid; place-items:center; font-size:34px;
  background:var(--surface-2); }
.card .body{ padding:11px 12px 13px; display:flex; flex-direction:column; gap:6px; }
.card .name{ font-size:13.5px; font-weight:600; line-height:1.25; }
.card .meta{ display:flex; justify-content:space-between; align-items:center; }
.card .inv{ font-size:11.5px; color:var(--text-dim); }
.card .inv.zero, .card .inv.neg{ color:var(--danger); font-weight:800; }
/* Sin stock: se resalta toda la tarjeta (borde + tinte rojo suave) */
.card:has(.inv.zero), .card:has(.inv.neg){
  border-color:var(--danger);
  background:color-mix(in srgb, var(--danger) 9%, var(--surface));
}
.card:has(.inv.zero) .thumb, .card:has(.inv.neg) .thumb{
  background:color-mix(in srgb, var(--danger) 14%, var(--surface)) !important;
}
.card .price{ font-size:16px; font-weight:800; }
.pos-sale{ width:330px; flex-shrink:0; background:var(--surface); border-left:1px solid var(--border); display:flex; flex-direction:column; }
.sale-head{ padding:16px 18px 12px; border-bottom:1px solid var(--border); }
.sale-head h2{ font-size:15px; } .sale-head small{ color:var(--accent); font-size:11px; }
.sale-config{ padding:10px 18px; border-bottom:1px solid var(--border); display:flex; flex-direction:column; gap:9px; }
.sale-config label{ display:flex; flex-direction:column; gap:4px; font-size:11px; color:var(--text-dim); }
.sale-config select, .sale-config input{ background:var(--surface-2); border:1px solid var(--border); color:var(--text);
  padding:11px 12px; border-radius:8px; font-size:16px; font-family:inherit; }
.sale-config .cust-row{ display:flex; gap:6px; }
.sale-config .cust-row input{ flex:1; min-width:0; }
.sale-config .cust-row .btn{ flex-shrink:0; padding:6px 11px; }
.sale-config .pay-row{ display:flex; gap:9px; }
.sale-config .pay-row label{ flex:1; }
.detail-note{ margin:8px 0; }
.detail-note span{ font-size:11px; color:var(--text-dim); }
.detail-note p{ font-size:13px; background:var(--surface-2); border:1px solid var(--border); border-radius:8px; padding:8px 10px; margin-top:3px; }
.items{ flex:1; overflow-y:auto; padding:8px 18px; }
.pos-empty{ text-align:center; color:var(--text-dim); font-size:13px; padding:48px 20px; }
.line{ display:flex; align-items:center; gap:10px; padding:10px 0; border-bottom:1px solid var(--border); }
.line .li-name{ flex:1; min-width:0; } .line .li-name b{ font-size:13px; display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.line .li-name span{ font-size:11.5px; color:var(--text-dim); }
.qty{ display:flex; align-items:center; gap:7px; }
.qty button{ width:24px; height:24px; border-radius:7px; border:1px solid var(--border); background:var(--surface-2); color:var(--text); font-size:15px; cursor:pointer; line-height:1; }
.qty b{ min-width:18px; text-align:center; font-size:13px; }
.li-total{ width:74px; text-align:right; font-weight:700; font-size:13px; }
.summary{ border-top:1px solid var(--border); padding:14px 18px; }
.summary .row{ display:flex; justify-content:space-between; align-items:center; font-size:13px; margin-bottom:9px; color:var(--text-dim); }
.summary .disc{ width:100px; background:var(--surface-2); border:1px solid var(--border); color:var(--text); padding:5px 8px; border-radius:7px; font-size:12.5px; text-align:right; }
.total-row{ display:flex; justify-content:space-between; align-items:baseline; margin:6px 0 14px; }
.total-row span{ font-size:13px; color:var(--text-dim); text-transform:uppercase; letter-spacing:.05em; }
.total-row b{ font-size:26px; font-weight:800; color:var(--accent); }
.tk-check{ display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--text-dim); margin-bottom:10px; cursor:pointer; }
.tk-check input{ width:auto; }
.cfg-form{ display:flex; flex-direction:column; gap:16px; }
.cfg-fields{ display:flex; flex-direction:column; gap:12px; }   /* espaciado de campos dentro de cada panel */
.cfg-form label{ display:flex; flex-direction:column; gap:5px; font-size:12px; color:var(--text-dim); }
.cfg-form input{ background:var(--surface-2); border:1px solid var(--border); color:var(--text); padding:9px 11px; border-radius:9px; font-size:13.5px; }
.cfg-row{ display:flex; gap:12px; }
.cfg-row label{ flex:1; min-width:0; }
.cfg-form button{ align-self:flex-start; margin-top:4px; }
.cfg-tax{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; padding:10px 0; border-top:1px solid var(--border); }
.cfg-check{ flex-direction:row !important; align-items:center; gap:8px; color:var(--text) !important; font-size:14px !important; }
.cfg-tax-rate{ flex-direction:row !important; align-items:center; gap:8px; }
.cfg-tax-rate input{ width:90px; }
/* Configuración: dos columnas (datos del comercio | recargos) */
.cfg-grid{ display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); gap:16px; align-items:start; }
.cfg-grid .panel{ max-width:none; width:100%; }
@media (max-width:900px){ .cfg-grid{ grid-template-columns:1fr; } }
/* Sacar las flechas (spinners) de los inputs numéricos en toda la app */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button{ -webkit-appearance:none; appearance:none; margin:0; }
input[type=number]{ -moz-appearance:textfield; appearance:textfield; }
.cfg-hint{ font-size:14.5px; color:var(--text-dim); margin:0 0 12px; line-height:1.55; }
.cfg-inline{ display:flex; align-items:flex-end; gap:12px; margin-top:12px; flex-wrap:wrap; }
.cfg-inline label{ display:flex; flex-direction:column; gap:5px; font-size:12px; color:var(--text-dim); }
.cfg-inline input{ background:var(--surface-2); border:1px solid var(--border); color:var(--text); padding:9px 11px; border-radius:9px; font-size:13.5px; width:120px; }
.plans-tbl{ width:100%; }
.plan-inp{ background:var(--surface-2); border:1px solid var(--border); color:var(--text); padding:8px 10px; border-radius:9px; font-size:13.5px; width:110px; text-align:right; }
.plan-inp:focus{ outline:none; border-color:var(--accent); }
/* Modal hoja de etiquetas */
.lbl-list{ max-height:340px; overflow:auto; border:1px solid var(--border); border-radius:10px; }
.lbl-row{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:8px 12px; border-bottom:1px solid var(--border); }
.lbl-row:last-child{ border-bottom:0; }
.lbl-row-name{ font-size:15.5px; }
.lbl-qty{ width:90px; text-align:right; background:var(--surface-2); border:1px solid var(--border); color:var(--text); padding:8px 10px; border-radius:8px; font-size:16px; }
.lbl-qty:disabled{ opacity:.4; }
.lbl-fields{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-bottom:12px; font-size:15.5px; }
.lbl-fields label{ display:flex; align-items:center; gap:5px; cursor:pointer; }
.lbl-bulk{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:12px; font-size:15px; color:var(--text-dim); }
.lbl-bulk input{ width:80px; text-align:right; background:var(--surface-2); border:1px solid var(--border); color:var(--text); padding:6px 9px; border-radius:8px; font-size:13px; }
.finalize{ width:100%; padding:14px; border:none; border-radius:var(--radius);
  background:var(--primary); color:#fff; font-size:16px; font-weight:700; cursor:pointer; transition:.15s; }
.finalize:hover{ background:var(--primary-600); } .finalize:disabled{ opacity:.45; cursor:not-allowed; }

/* ---------- Dashboard ---------- */
.dash{ padding:0 24px 24px; }
.kpi-row{ display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:14px; margin-bottom:16px; }
.kpi-card{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:16px 18px; }
.kpi-card span{ font-size:11.5px; color:var(--text-dim); text-transform:uppercase; letter-spacing:.05em; }
.kpi-card b{ display:block; font-size:26px; font-weight:800; margin:6px 0 2px; }
.kpi-card small{ color:var(--text-dim); font-size:12px; }
.kpi-card.ok b{ color:var(--success); }
.kpi-card.warn b{ color:var(--warning); }
.dash-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:14px; margin-bottom:16px; }
.panel{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:16px 18px; overflow:hidden; }
.panel.wide{ grid-column:span 2; }
.panel h3{ font-size:14px; margin-bottom:12px; }
.panel h3 small{ color:var(--text-dim); font-weight:400; }
.panel .tbl{ font-size:12.5px; }
.chart-box{ position:relative; height:260px; }
.chart-empty{ height:100%; display:grid; place-items:center; color:var(--text-dim); font-size:13px; text-align:center; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
.mobile-topbar{ display:none; align-items:center; gap:12px; padding:10px 14px;
  border-bottom:1px solid var(--border); background:var(--surface); }
.hamburger{ background:none; border:1px solid var(--border); color:var(--text); font-size:18px;
  border-radius:8px; padding:3px 11px; cursor:pointer; line-height:1.4; }
.mobile-brand{ font-weight:800; font-size:17px; letter-spacing:.5px; }
.nav-backdrop{ display:none; }

@media (max-width: 900px){
  .mobile-topbar{ display:flex; }
  .sidebar{ position:fixed; top:0; left:0; height:100%; z-index:200;
    transform:translateX(-100%); transition:transform .25s ease; }
  body.nav-open .sidebar{ transform:translateX(0); }
  .nav-backdrop{ display:block; position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:150;
    opacity:0; pointer-events:none; transition:opacity .25s; }
  body.nav-open .nav-backdrop{ opacity:1; pointer-events:auto; }
  .main{ width:100%; min-width:0; }

  /* POS: se apila (catálogo arriba, venta abajo) */
  .pos{ flex-direction:column; }
  .pos-catalog{ min-height:0; }
  .pos-sale{ width:100%; border-left:none; border-top:1px solid var(--border); max-height:48vh; }
  .grid{ grid-template-columns:repeat(auto-fill,minmax(130px,1fr)); }

  /* Encabezados y filtros de las secciones */
  .page-head{ flex-wrap:wrap; gap:10px; padding:16px 16px 12px; }
  .filters-row{ flex-wrap:wrap; width:100%; }
  .filter-input{ min-width:0; flex:1 1 140px; }
  .card-table{ margin:0 16px 18px; }

  /* Dashboard */
  .dash{ padding:0 16px 18px; }
  .kpi-row{ grid-template-columns:repeat(2,1fr); }
  .dash-grid{ grid-template-columns:1fr; }
  .panel.wide{ grid-column:auto; }

  /* Filtros y tablas: menos margen y tablas anchas con scroll horizontal propio */
  .filters-bar{ padding:0 16px 12px; }
  .panel{ overflow-x:auto; }
  .panel-body{ overflow-x:auto; }
  .panel-body .tbl{ min-width:520px; }   /* fuerza scroll en vez de romper el layout */

  /* Toolbar del POS: que envuelva si no entra */
  .pos-toolbar{ flex-wrap:wrap; }
  .pos-toolbar .search{ max-width:none; flex:1 1 100%; order:-1; }
  .pos-tools{ margin-left:0; }
}

@media (max-width: 560px){
  .page-head h2{ font-size:18px; }
  .grid{ grid-template-columns:repeat(auto-fill,minmax(110px,1fr)); gap:10px; padding:12px 14px 20px; }
  .modal-card{ width:100%; border-radius:16px 16px 0 0; align-self:flex-end; max-height:92vh; }
  .modal{ align-items:flex-end; }
  .kpi-row{ grid-template-columns:1fr; }

  /* Tablas más compactas para que quepan mejor */
  .tbl th, .tbl td{ padding:9px 10px; font-size:12.5px; }
  .card-table{ margin:0 12px 16px; }
  .demo-banner{ font-size:11px; padding:6px 12px; }

  /* Fechas de filtro a lo ancho completo */
  .fdate{ flex:1 1 100%; }
  .fdate .fd{ width:100%; }

  /* Acciones de tabla en móvil: botones compactos (siguen envolviendo solos) */
  .btn.sm{ padding:6px 9px; }
}

/* ---------- POS: toolbar, vista lista, botones ícono ---------- */
.pos-toolbar{ display:flex; align-items:center; gap:10px; padding:16px 20px 8px; }
.pos-toolbar .search{ flex:1; max-width:340px; }
.pos-tools{ display:flex; gap:8px; margin-left:auto; }
.btn.icon{ padding:8px; }
.btn.icon svg{ width:16px; height:16px; display:block; }
.btn.active{ background:var(--primary); border-color:var(--primary); color:#fff; }
.sale-head{ display:flex; justify-content:space-between; align-items:center; }
.sale-head-actions{ display:flex; gap:6px; }

.list{ flex:1; overflow-y:auto; padding:10px 20px 24px; display:flex; flex-direction:column; gap:6px; }
.lrow{ display:flex; align-items:center; gap:14px; padding:11px 13px; border:1px solid var(--border);
  border-radius:10px; background:var(--surface-2); cursor:pointer; transition:.15s; }
.lrow:hover{ border-color:var(--primary); transform:translateX(2px); }
.lrow .ln{ flex:1; font-size:16.5px; font-weight:600; }
.lrow .li{ font-size:14px; color:var(--text-dim); }
.lrow .li.zero{ color:var(--warning); } .lrow .li.neg{ color:var(--danger); }
.lrow .lp{ font-weight:800; font-size:18px; width:110px; text-align:right; }

/* ---------- Filtros de listado ---------- */
.filters-row{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
/* Filtros resaltados: campo en blanco dentro de su box, con borde marcado. */
.filter-input{ background:var(--field-bg); border:1.5px solid var(--border); color:var(--text);
  padding:11px 13px; border-radius:var(--radius-sm); font-size:15px; min-width:170px; }
.filter-input:focus{ outline:none; border-color:var(--primary); }
.filters-bar{ padding:0 24px 14px; }
.fdate{ display:flex; align-items:center; gap:6px; font-size:12.5px; font-weight:700; letter-spacing:.04em;
  text-transform:uppercase; color:var(--text-dim); }
.fdate .fd{ min-width:0; width:150px; text-transform:uppercase; }

/* ---------- Detalle (modal de solo lectura) ---------- */
.detail-meta{ display:flex; gap:18px; flex-wrap:wrap; margin-bottom:6px; }
.detail-meta div{ display:flex; flex-direction:column; }
.detail-meta span{ font-size:11px; color:var(--text-dim); }
.detail-meta b{ font-size:13.5px; }
.detail-h{ font-size:12px; text-transform:uppercase; letter-spacing:.06em; color:var(--text-dim); margin:8px 0 2px; }
.tbl.mini{ font-size:12.5px; }
.tbl.mini th{ padding:7px 9px; position:static; }
.tbl.mini td{ padding:7px 9px; }
.detail-total{ display:flex; justify-content:space-between; font-size:13px; color:var(--text-dim); margin-top:6px; }
.detail-total b{ color:var(--text); }
.detail-total.big{ font-size:16px; margin-top:8px; }
.detail-total.big b{ color:var(--accent); font-size:20px; }

/* ===========================================================
   ACCESIBILIDAD — contraste, tipografía más grande, foco visible.
   =========================================================== */

/* Más contraste en el texto tenue (secundario). */
:root{ --text-dim:#c3ccdd; }                    /* oscuro: más claro = más contraste */
:root[data-theme="light"]{ --text-dim:#535a54; } /* claro: gris cálido con buen contraste */

/* Base de lectura más grande. */
body{ font-size:17.5px; }

/* Navegación */
.nav a, .nav-group-head, .nav-sublink{ font-size:16.5px; }
.nav-label{ font-size:12.5px; }

/* Tablas y celdas */
.tbl th{ font-size:14px; }
.tbl td{ font-size:16.5px; }
.tbl.mini th, .tbl.mini td{ font-size:15px; }

/* Botones, inputs y filtros */
.btn{ font-size:16px; }
.btn.sm{ font-size:15px; }
.filter-input, .cfg-form input, .cfg-inline input, input, select, textarea, .cfg-form label{ font-size:16.5px; }

/* Encabezados de página y KPIs */
.page-head h2{ font-size:26px; }
.panel h3{ font-size:19px; }
.kpi-card span{ font-size:15px; }
.kpi-card b{ font-size:36px; }
.kpi-card small{ font-size:15px; }
.chart-box{ height:300px; }
.chart-legend{ display:flex; flex-wrap:wrap; justify-content:center; gap:14px; margin-top:10px; }
.chart-legend .lg-item{ display:flex; align-items:center; gap:7px; font-size:15px; color:var(--text); }
.chart-legend .lg-item i{ width:14px; height:14px; border-radius:4px; display:inline-block; flex-shrink:0; }
.pill{ font-size:13px; }
.pager span{ font-size:15px; }
.detail-total{ font-size:15px; }

/* POS: tarjetas de producto y totales más legibles */
.summary .row{ font-size:16.5px; }
.summary .total-row{ font-size:20px; }
.card .name{ font-size:16px; }
.card .price{ font-size:19px; }
.card .inv, .card .card-cat{ font-size:13px; }
.pos-chip{ font-size:15px; }
.line .li-name b{ font-size:15px; }
.line .li-name span{ font-size:13px; }
.sale-config label{ font-size:13px; }

/* Fuente secundaria (Barlow) para textos chicos / de apoyo. Todo lo demás usa la principal. */
small,
.nav-label, .soon-tag,
.kpi-card span, .kpi-card small,
.card .card-cat, .card .inv,
.cfg-hint,
.pager span,
.brand span,
.sale-config label, .cfg-form label, .cfg-inline label, .lbl-fields, .lbl-bulk, .lbl-row-name,
.line .li-name span,
.detail-meta span, .detail-total span, .detail-note span,
.cell-note{
  font-family:var(--font-2);
}

/* Foco visible para navegación por teclado (accesibilidad). */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible{
  outline:3px solid var(--primary);
  outline-offset:2px;
  border-radius:6px;
}

/* Overlay de atajos de teclado */
.sc-help h4{ font-size:13px; text-transform:uppercase; letter-spacing:.05em; color:var(--text-dim); margin:14px 0 6px; }
.sc-help h4:first-child{ margin-top:0; }
.sc-tbl{ width:100%; border-collapse:collapse; }
.sc-tbl td{ padding:5px 6px; font-size:14px; border-bottom:1px solid var(--border); }
.sc-tbl td:first-child{ white-space:nowrap; width:1%; }
kbd{ display:inline-block; background:var(--surface-2); border:1px solid var(--border);
  border-bottom-width:2px; border-radius:6px; padding:1px 7px; font-family:inherit;
  font-size:13px; font-weight:700; color:var(--text); }

/* ---------- Modal de cobro (medio de pago al finalizar) ---------- */
.pay-modal{ max-width:640px; width:94vw; }
.pay-total{ text-align:center; margin-bottom:22px; }
.pay-total span{ display:block; font-size:13px; letter-spacing:.14em; color:var(--text-dim); font-weight:700; }
.pay-total b{ display:block; font-size:48px; font-weight:800; margin-top:2px; line-height:1.05; }
.pay-total small{ display:block; font-size:16.5px; font-weight:700; color:var(--text); margin-top:8px; }
.pay-methods{ display:grid; grid-template-columns:repeat(2,1fr); gap:14px; }
.pay-card{ border:1.5px solid var(--border); background:var(--surface); color:var(--text); font-family:inherit;
  border-radius:14px; padding:22px 10px; font-size:17px; font-weight:700; cursor:pointer; transition:.12s;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; min-height:104px; }
.pay-card:hover{ border-color:var(--primary); }
.pay-card.active{ border-color:var(--primary); background:rgba(232,93,63,.08); color:var(--primary); }
.pay-ico{ width:34px; height:34px; background-color:currentColor; display:inline-block;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat; -webkit-mask-position:center; mask-position:center;
  -webkit-mask-size:contain; mask-size:contain; }
.pay-field{ display:flex; flex-direction:column; gap:6px; margin-top:16px; font-size:14px; color:var(--text-dim); }
.pay-field select, .pay-field input{ background:var(--surface-2); border:1px solid var(--border); color:var(--text);
  padding:13px 13px; border-radius:10px; font-size:19px; font-weight:700; font-family:inherit; }
.pay-vuelto{ margin-top:10px; font-size:22px; font-weight:800; text-align:right; }
/* Botones predictivos de "con cuánto paga" (efectivo) */
.pay-quick-label{ margin-top:18px; font-size:14px; font-weight:700; color:var(--text-dim); }
.pay-quick{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:8px; }
.pay-qbtn{ border:1.5px solid var(--border); background:var(--surface); color:var(--text); font-family:inherit;
  border-radius:12px; padding:18px 8px; font-size:20px; font-weight:800; cursor:pointer; transition:.12s; }
.pay-qbtn:hover{ border-color:var(--primary); }
.pay-qbtn.active{ border-color:var(--primary); background:rgba(232,93,63,.08); color:var(--primary); }
.pay-modal .modal-actions .btn{ font-size:16px; padding:12px 22px; }
.pay-modal #payConfirm{ font-size:18px; }
@media (max-width:560px){ .pay-methods{ grid-template-columns:repeat(2,1fr); } .pay-quick{ grid-template-columns:repeat(3,1fr); } .pay-total b{ font-size:40px; } }

/* ---------- Modal del ticket (preview + imprimir, dentro de la app) ---------- */
.ticket-modal{ max-width:340px; }
.ticket-preview{ display:flex; justify-content:center; padding:8px 0 4px; }
.ticket-preview iframe{ width:264px; height:60vh; max-height:520px; border:1px solid var(--border);
  border-radius:8px; background:#fff; }

/* Barra de acciones del encabezado (export/import + botón primario) */
.head-actions{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-left:auto; }

/* Campo de imagen en el modal */
.img-field{ display:flex; align-items:center; gap:12px; }
.img-prev{ width:72px; height:72px; border-radius:10px; border:1px solid var(--border); background:var(--surface-2);
  display:grid; place-items:center; overflow:hidden; flex-shrink:0; }
.img-prev img{ width:100%; height:100%; object-fit:cover; }
.img-prev span{ font-size:11px; color:var(--text-dim); text-align:center; }
.img-actions{ display:flex; flex-direction:column; gap:6px; }
.img-actions .img-input{ font-size:13px; color:var(--text-dim); }

/* Miniatura en la tabla de productos */
.p-namecell{ display:flex; align-items:center; gap:10px; }
.p-thumb{ width:34px; height:34px; border-radius:8px; object-fit:cover; border:1px solid var(--border); flex-shrink:0; }
.p-thumb-empty{ width:34px; height:34px; border-radius:8px; background:var(--surface-2); border:1px solid var(--border); flex-shrink:0; display:inline-block; }
.p-thumb-broken{ background:var(--surface-2); }   /* imagen que no cargó: queda como recuadro vacío */

/* Foto en la tarjeta del POS */
.card .thumb .thumb-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }

/* Autocompletado de cliente (desplegable propio) */
.autocomplete{ position:relative; flex:1; min-width:0; }
.autocomplete input{ width:100%; }
.ac-list{ display:none; position:absolute; top:calc(100% + 4px); left:0; right:0; z-index:40;
  background:var(--surface); border:1px solid var(--border); border-radius:10px; overflow:hidden; max-height:260px; overflow-y:auto; }
.ac-item{ padding:11px 13px; font-size:16px; cursor:pointer; border-bottom:1px solid var(--border);
  display:flex; justify-content:space-between; align-items:center; gap:10px; }
.ac-item:last-child{ border-bottom:0; }
.ac-item:hover{ background:var(--surface-2); }
.ac-item small{ color:var(--text-dim); font-size:13px; }
.ac-item.active{ background:var(--surface-2); }
.ac-item.sel{ font-weight:700; }
.ac-item.ss-empty{ cursor:default; color:var(--text-dim); justify-content:flex-start; }
.ac-item.ss-empty:hover{ background:transparent; }

/* Select con búsqueda (todos los desplegables escribibles) */
/* Campo con botón "+" al lado (ej. proveedor en alta de producto) */
.field-with-add{ display:flex; gap:8px; align-items:stretch; }
.field-with-add > .ss-wrap, .field-with-add > select{ flex:1 1 auto; min-width:0; }
.field-with-add > .btn{ flex:none; padding:8px 15px; font-size:18px; line-height:1; }

.ss-wrap{ position:relative; display:flex; min-width:0; }
.ss-wrap > select{ display:none !important; }
.ss-input{ width:100%; min-width:0; cursor:text; }
.filters-row .ss-wrap{ flex:1 1 160px; }
.ss-list{ max-height:280px; }

/* Campo de contraseña con botón ver/ocultar + texto de ayuda */
.pw-field{ position:relative; display:flex; align-items:center; }
.pw-field input{ flex:1; width:100%; padding-right:70px; }
.pw-toggle{ position:absolute; right:6px; top:50%; transform:translateY(-50%); background:transparent;
  border:0; color:var(--primary); cursor:pointer; font-size:13px; font-weight:700; padding:6px 8px; }
.field-hint{ color:var(--text-dim); font-size:12.5px; font-weight:500; margin-top:2px; }

/* Foco de teclado (flechas) en el modal de cobro (tarjetas, valores rápidos, botón) */
.kbd-focus{ outline:3px solid var(--primary); outline-offset:2px; }

/* Selectores de caja en el POS */
.pos-cajas{ display:flex; gap:8px; align-items:end; }
.pos-cajas label{ flex:1 1 0; min-width:0; display:flex; flex-direction:column; justify-content:flex-end; }
.pos-cajas select{ width:100%; }

@media (max-width:560px){ .pay-methods{ grid-template-columns:repeat(2,1fr); } }

/* ===========================================================
   REDISEÑO POS — estilo tarjetas claras (inspirado en la referencia).
   =========================================================== */
.pos-catalog{ background:var(--bg); }
.pos-toolbar{ padding:18px 22px 10px; }
.pos-toolbar .search{ background:var(--surface); border:1px solid var(--border); border-radius:999px; }

/* Chips de categoría */
.pos-cats{ display:flex; gap:9px; overflow-x:auto; padding:6px 22px 10px; scrollbar-width:thin; }
.pos-chip{ flex-shrink:0; border:1px solid var(--border); background:var(--surface); color:var(--text);
  padding:11px 22px; border-radius:999px; font-size:17px; font-weight:600; cursor:pointer;
  font-family:inherit; white-space:nowrap; transition:.15s; }
.pos-chip:hover{ border-color:var(--primary); }
.pos-chip.active{ background:var(--primary); border-color:var(--primary); color:#fff; }

/* Grilla de tarjetas */
.grid{ padding:14px 22px 26px; gap:16px; grid-template-columns:repeat(auto-fill,minmax(196px,1fr)); }
.card{ background:var(--surface); border:1px solid var(--border); border-radius:12px; overflow:hidden;
  transition:.16s; cursor:pointer; }
.card:hover{ border-color:var(--primary); }
.card .thumb{ position:relative; height:128px; display:grid; place-items:center; }
.card .thumb .thumb-ini{ font-size:48px; font-weight:800; opacity:.85; }
.card .thumb .add-btn{ position:absolute; top:8px; right:8px; width:28px; height:28px; border-radius:9px;
  background:var(--surface); color:var(--primary); display:flex; align-items:center; justify-content:center;
  font-size:20px; font-weight:700; line-height:1; padding:0; border:1px solid var(--border); }
.card:hover .thumb .add-btn{ background:var(--primary); color:#fff; }
.card .body{ padding:14px 15px 16px; display:flex; flex-direction:column; gap:4px; }
.card .name{ font-size:18px; font-weight:700; line-height:1.25; color:var(--text); }
.card .card-cat{ font-size:14px; color:var(--text-dim); }
.card .meta{ display:flex; justify-content:space-between; align-items:center; margin-top:6px; }
.card .inv{ font-size:15px; color:var(--text-dim); }
.card .price{ font-size:22px; font-weight:800; color:var(--primary); }

/* Vista lista: miniatura con inicial */
.lthumb{ width:34px; height:34px; border-radius:9px; display:grid; place-items:center; font-weight:800; font-size:15px; flex-shrink:0; }

/* Panel de pedido */
.pos-sale{ width:348px; }
.sale-head h2{ font-size:17px; font-weight:700; }
.line .li-thumb{ width:38px; height:38px; border-radius:10px; display:grid; place-items:center; font-weight:800; font-size:16px; flex-shrink:0; }
.line .li-total{ font-weight:800; }
.summary .total-row{ display:flex; justify-content:space-between; align-items:center; padding-top:12px; margin-top:4px; border-top:1px dashed var(--border); font-weight:800; }
.finalize{ border-radius:14px; font-weight:800; }

@media (max-width:1024px){ .pos-sale{ width:100%; } }
@media (max-width:560px){
  /* POS en celular: una tarjeta por fila, horizontal (miniatura + nombre + precio).
     Más legible y fácil de tocar que la grilla de bloques grandes. */
  .grid{ grid-template-columns:1fr; gap:8px; padding:12px 14px 22px; }
  .card{ display:flex; flex-direction:row; align-items:stretch; min-height:60px; }
  .card .thumb{ width:60px; height:auto; min-height:60px; flex:none; }
  .card .thumb .thumb-ini{ font-size:26px; }
  .card .thumb .add-btn{ width:26px; height:26px; top:6px; right:6px; font-size:15px; }
  .card .body{ flex:1; min-width:0; justify-content:center; padding:8px 12px; gap:3px; }
  .card .name{ font-size:15px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .card .card-cat{ display:none; }
  .card .meta{ margin-top:0; }
  .card .inv{ font-size:12.5px; }
  .card .price{ font-size:17px; }
}