:root{
  --paper:#F1F3EE; --surface:#FFFFFF; --surface-2:#F7F8F5;
  --line:#DCE0D7; --line-strong:#C3C9BC;
  --ink:#161D19; --ink-2:#414B45; --muted:#6B756E;
  --acc:#14654F; --acc-soft:#E2EFE9; --acc-ink:#0C4A3A;
  --ok:#14654F; --ok-soft:#E2EFE9;
  --warn:#8A5A12; --warn-soft:#F6ECD9;
  --low:#9B4419; --low-soft:#F7E7DE;
  --crit:#973026; --crit-soft:#F8E4E1;
  --shadow:0 1px 2px rgba(22,29,25,.06),0 8px 24px -16px rgba(22,29,25,.35);
  --r:6px;
  --f-head:'Archivo',system-ui,sans-serif;
  --f-body:'Source Sans 3',system-ui,sans-serif;
  --f-mono:'IBM Plex Mono',ui-monospace,monospace;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --paper:#0F1412; --surface:#161C19; --surface-2:#1B2320;
    --line:#28312C; --line-strong:#3A453F;
    --ink:#E8ECE7; --ink-2:#C2CAC5; --muted:#8D978F;
    --acc:#57BF98; --acc-soft:#122C24; --acc-ink:#8FD9BC;
    --ok:#57BF98; --ok-soft:#122C24;
    --warn:#D9A55E; --warn-soft:#2C2212;
    --low:#E08A57; --low-soft:#2E1D13;
    --crit:#E58177; --crit-soft:#2E1715;
    --shadow:0 1px 2px rgba(0,0,0,.5),0 10px 30px -18px rgba(0,0,0,.9);
  }
}
:root[data-theme="dark"]{
  --paper:#0F1412; --surface:#161C19; --surface-2:#1B2320;
  --line:#28312C; --line-strong:#3A453F;
  --ink:#E8ECE7; --ink-2:#C2CAC5; --muted:#8D978F;
  --acc:#57BF98; --acc-soft:#122C24; --acc-ink:#8FD9BC;
  --ok:#57BF98; --ok-soft:#122C24;
  --warn:#D9A55E; --warn-soft:#2C2212;
  --low:#E08A57; --low-soft:#2E1D13;
  --crit:#E58177; --crit-soft:#2E1715;
  --shadow:0 1px 2px rgba(0,0,0,.5),0 10px 30px -18px rgba(0,0,0,.9);
}

*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--f-body);font-size:15px;line-height:1.45;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:var(--f-head);font-weight:700;letter-spacing:-.015em;margin:0;text-wrap:balance}
button,input,select,textarea{font:inherit;color:inherit}
a{color:var(--acc-ink)}
.mono{font-family:var(--f-mono);font-variant-numeric:tabular-nums}
.num{font-family:var(--f-mono);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.lbl{font-family:var(--f-head);font-size:11px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
[hidden]{display:none!important}

/* ---------- botones ---------- */
.btn{display:inline-flex;align-items:center;gap:7px;justify-content:center;border:1px solid var(--line-strong);background:var(--surface);color:var(--ink);
  padding:8px 14px;border-radius:var(--r);cursor:pointer;font-family:var(--f-head);font-weight:600;font-size:13.5px;transition:.14s background,.14s border-color,.14s transform}
.btn:hover{background:var(--surface-2);border-color:var(--muted)}
.btn:active{transform:translateY(1px)}
.btn.pri{background:var(--acc);border-color:var(--acc);color:#fff}
:root[data-theme="dark"] .btn.pri,:root:not([data-theme="light"]) .btn.pri{color:#06120E}
@media (prefers-color-scheme:light){:root:not([data-theme="dark"]) .btn.pri{color:#fff}}
.btn.pri:hover{filter:brightness(1.07)}
.btn.ghost{border-color:transparent;background:transparent;color:var(--ink-2)}
.btn.ghost:hover{background:var(--surface-2);color:var(--ink)}
.btn.sm{padding:5px 10px;font-size:12.5px}
.btn:disabled{opacity:.45;cursor:not-allowed}

.field{display:flex;flex-direction:column;gap:5px}
.input,select.input,textarea.input{background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--r);padding:8px 10px;width:100%}
.input::placeholder{color:var(--muted)}

/* ---------- login ---------- */
.login{min-height:100vh;display:grid;place-items:center;padding:28px}
.login-card{width:min(880px,100%);background:var(--surface);border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow);overflow:hidden;display:grid;grid-template-columns:1.05fr .95fr}
@media (max-width:760px){.login-card{grid-template-columns:1fr}}
.login-brand{padding:34px 32px;background:linear-gradient(160deg,var(--acc-soft),var(--surface-2));border-right:1px solid var(--line)}
.wordmark{font-family:var(--f-head);font-weight:700;font-size:27px;letter-spacing:-.03em;line-height:1}
.wordmark span{color:var(--acc)}
.login-form{padding:34px 32px;display:flex;flex-direction:column;gap:14px}
.demo-note{border:1px dashed var(--line-strong);border-radius:var(--r);padding:11px 13px;background:var(--surface-2);font-size:13px;color:var(--ink-2)}

/* ---------- shell ---------- */
.topbar{position:sticky;top:0;z-index:40;background:var(--surface);border-bottom:1px solid var(--line);display:flex;align-items:center;gap:18px;padding:0 18px;height:56px}
.tabs{display:flex;gap:2px;margin-left:6px;overflow-x:auto}
.tab{border:0;background:transparent;padding:8px 12px;border-radius:var(--r);cursor:pointer;font-family:var(--f-head);font-weight:600;font-size:13.5px;color:var(--muted);white-space:nowrap}
.tab:hover{color:var(--ink);background:var(--surface-2)}
.tab[aria-selected="true"]{color:var(--acc-ink);background:var(--acc-soft)}
.spacer{flex:1}
.who{display:flex;align-items:center;gap:9px;font-size:13px;color:var(--ink-2)}
.avatar{width:28px;height:28px;border-radius:50%;background:var(--acc-soft);color:var(--acc-ink);display:grid;place-items:center;font-family:var(--f-head);font-weight:700;font-size:11.5px}

.wrap{max-width:1500px;margin:0 auto;padding:18px}
.cols{display:grid;grid-template-columns:200px minmax(0,1fr) 336px;gap:16px;align-items:start}
@media (max-width:1200px){.cols{grid-template-columns:190px minmax(0,1fr)}}
@media (max-width:860px){.cols{grid-template-columns:1fr}}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:8px}
.panel-h{padding:11px 14px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:10px}
.panel-b{padding:14px}
.rail{position:sticky;top:74px}
@media (max-width:860px){.rail{position:static}}
.rail-group{padding:12px 14px;border-bottom:1px solid var(--line)}
.rail-group:last-child{border-bottom:0}
.check{display:flex;align-items:center;gap:8px;padding:3px 0;font-size:13.5px;cursor:pointer;color:var(--ink-2)}
.check:hover{color:var(--ink)}
.check input{accent-color:var(--acc);width:15px;height:15px}
.count{margin-left:auto;font-family:var(--f-mono);font-size:11.5px;color:var(--muted)}

/* ---------- tabla catálogo ---------- */
.toolbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:12px}
.search{flex:1;min-width:220px;position:relative}
.search .input{padding-left:32px}
.search svg{position:absolute;left:10px;top:50%;transform:translateY(-50%);color:var(--muted)}
.tablewrap{overflow:auto;max-height:calc(100vh - 208px);border:1px solid var(--line);border-radius:8px;background:var(--surface)}
@media (max-width:860px){.tablewrap{max-height:none}}
table{border-collapse:collapse;width:100%;min-width:700px}
thead th{position:sticky;top:0;z-index:10;background:var(--surface-2);border-bottom:1px solid var(--line-strong);
  font-family:var(--f-head);font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);text-align:left;padding:9px 12px;white-space:nowrap}
@media (max-width:860px){thead th{top:56px}}
tbody td{border-bottom:1px solid var(--line);padding:9px 10px;vertical-align:middle}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover{background:var(--surface-2)}
tbody tr.off{opacity:.55}
tbody tr.incart{background:var(--acc-soft)}
tbody tr.incart:hover{background:var(--acc-soft)}
.t-cod{font-family:var(--f-mono);font-size:12.5px;color:var(--muted)}
.cel{display:flex;gap:11px;align-items:center}
.thumb.lista{border-color:var(--acc);color:var(--acc-ink);background:var(--acc-soft)}
.thumb{width:38px;height:38px;flex:none;border-radius:5px;border:1px solid var(--line);background:var(--surface-2);
  display:grid;place-items:center;font-family:var(--f-head);font-weight:700;font-size:9.5px;letter-spacing:.02em;color:var(--muted);overflow:hidden}
.thumb img{width:100%;height:100%;object-fit:contain;border-radius:4px}
.t-desc{font-weight:600;font-size:14px;line-height:1.25}
.t-sub{font-size:12px;color:var(--muted)}
.t-price{text-align:right;font-family:var(--f-mono);font-variant-numeric:tabular-nums;font-weight:600;white-space:nowrap}
.t-pub{text-align:right;font-family:var(--f-mono);font-size:12.5px;color:var(--muted);white-space:nowrap}
/* Las dos alineaciones de columna numérica. Van sobre th y td juntos: si solo
   se alinea el encabezado, el número queda corrido respecto del título. */
th.r,td.r{text-align:right}
th.c,td.c{text-align:center}

/* El −/cantidad/+ del panel de stock, como un solo bloque que se centra
   debajo del título de la columna. */
.stk-set{display:inline-flex;align-items:center;gap:5px}
.stk-set .input{width:64px;text-align:center}
.qty{display:flex;align-items:center;gap:0;border:1px solid var(--line-strong);border-radius:var(--r);overflow:hidden;width:104px;background:var(--surface)}
.qty button{width:28px;height:30px;border:0;background:transparent;cursor:pointer;color:var(--ink-2);font-family:var(--f-mono);font-size:15px}
.qty button:hover{background:var(--surface-2);color:var(--ink)}
.qty input{width:44px;height:30px;border:0;border-left:1px solid var(--line);border-right:1px solid var(--line);text-align:center;background:transparent;font-family:var(--f-mono);font-variant-numeric:tabular-nums}
.qty input::-webkit-outer-spin-button,.qty input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.qty input[type=number]{-moz-appearance:textfield}

/* ---------- disponibilidad ---------- */
.stk{display:inline-flex;align-items:center;gap:6px;padding:2.5px 8px 2.5px 6px;border-radius:100px;font-family:var(--f-head);font-size:11.5px;font-weight:600;white-space:nowrap}
.dot{width:7px;height:7px;border-radius:50%;flex:none}
.stk.a{background:var(--ok-soft);color:var(--ok)} .stk.a .dot{background:var(--ok)}
.stk.b{background:var(--warn-soft);color:var(--warn)} .stk.b .dot{background:var(--warn)}
.stk.c{background:var(--low-soft);color:var(--low)} .stk.c .dot{background:var(--low)}
.stk.d{background:var(--surface-2);color:var(--muted);border:1px solid var(--line)} .stk.d .dot{background:var(--line-strong)}

.pill{display:inline-flex;align-items:center;gap:5px;padding:2px 8px;border-radius:100px;font-family:var(--f-head);font-size:11px;font-weight:600;letter-spacing:.02em;border:1px solid transparent}
.pill.n{background:var(--surface-2);color:var(--muted);border-color:var(--line)}
.pill.g{background:var(--ok-soft);color:var(--ok)}
.pill.w{background:var(--warn-soft);color:var(--warn)}
.pill.r{background:var(--crit-soft);color:var(--crit)}
.pill.acc{background:var(--acc-soft);color:var(--acc-ink)}

/* ---------- carrito ---------- */
.cart{position:sticky;top:74px;max-height:calc(100vh - 92px);display:flex;flex-direction:column}
@media (max-width:1200px){.cart{position:fixed;inset:auto 0 0 0;z-index:60;max-height:82vh;border-radius:10px 10px 0 0;box-shadow:var(--shadow);transform:translateY(calc(100% - 54px));transition:transform .22s ease}
  .cart.open{transform:none}
  .cart .panel-h{cursor:pointer;min-height:54px}
  .cart-tirador{display:block;position:absolute;left:50%;top:6px;transform:translateX(-50%);
    width:34px;height:3px;border-radius:2px;background:var(--line-strong)}
  .cart .panel-h{position:relative;padding-top:14px}
  .solo-movil{display:inline}}
.solo-movil{display:none}
.cart-tirador{display:none}
.cart-items{overflow-y:auto;flex:1;min-height:0}
.ci{padding:11px 14px;border-bottom:1px solid var(--line);display:grid;gap:7px}
.ci-top{display:flex;gap:10px;align-items:flex-start}
.ci-desc{font-size:13.5px;font-weight:600;line-height:1.25;flex:1}
.ci-obs{width:100%;border:1px solid var(--line);border-radius:var(--r);background:var(--surface-2);padding:5px 8px;font-size:12.5px}
.ci-obs::placeholder{color:var(--muted)}
.ci-row{display:flex;align-items:center;gap:10px}
.ci-total{margin-left:auto;flex:none;white-space:nowrap;font-family:var(--f-mono);font-weight:600;font-size:13.5px}
.ci-row .hint{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.sum{border-top:1px solid var(--line-strong);padding:12px 14px;display:grid;gap:6px;background:var(--surface-2);border-radius:0 0 8px 8px}
.sumrow{display:flex;justify-content:space-between;gap:12px;font-size:13.5px;color:var(--ink-2)}
.sumrow b{font-family:var(--f-mono);font-variant-numeric:tabular-nums;color:var(--ink);white-space:nowrap}
.sumrow>span{min-width:0}
.sumrow.dsc{color:var(--acc-ink)} .sumrow.dsc b{color:var(--acc-ink)}
.sumrow.tot{font-family:var(--f-head);font-size:17px;font-weight:700;color:var(--ink);padding-top:7px;border-top:1px solid var(--line);align-items:baseline}
.sumrow.tot b{font-size:19px}
.hint{font-size:12px;color:var(--muted);line-height:1.35}
.ladder{display:flex;gap:4px;margin-top:2px}
.rung{flex:1;text-align:center;padding:5px 2px;border:1px solid var(--line);border-radius:var(--r);font-family:var(--f-mono);font-size:11px;color:var(--muted);background:var(--surface)}
.rung.on{border-color:var(--acc);background:var(--acc-soft);color:var(--acc-ink);font-weight:600}

/* ---------- varios ---------- */
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(168px,1fr));gap:12px;margin-bottom:16px}
.tile{background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:13px 15px}
.tile .v{font-family:var(--f-head);font-size:25px;font-weight:700;letter-spacing:-.03em;font-variant-numeric:tabular-nums;line-height:1.15;margin-top:3px}
.tile .d{font-size:12px;color:var(--muted);margin-top:2px}
.tile.alert{border-color:var(--crit);background:var(--crit-soft)}
.tile.alert .v,.tile.alert .lbl{color:var(--crit)}
.empty{padding:38px 20px;text-align:center;color:var(--muted)}
.stack{display:grid;gap:12px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:640px){.grid2{grid-template-columns:1fr}}
.ord{border:1px solid var(--line);border-radius:8px;background:var(--surface);overflow:hidden}
.ord-h{display:flex;gap:12px;align-items:center;padding:11px 14px;border-bottom:1px solid var(--line);background:var(--surface-2);flex-wrap:wrap}
.ord-b{padding:12px 14px}
.line{display:flex;gap:10px;padding:5px 0;border-bottom:1px dashed var(--line);font-size:13.5px}
.line:last-child{border-bottom:0}
.line .q{font-family:var(--f-mono);color:var(--muted);width:40px;flex:none}
.line .t{margin-left:auto;font-family:var(--f-mono)}

/* Renglones de la edición del pedido: el del artículo cargado y el del
   buscador. La columna de la izquierda se ajusta a su contenido — con el
   ancho fijo de .line .q el botón Agregar se montaba sobre el código. */
.ped-desc{flex:1;min-width:0}
.ped-linea>.stk-set,.ped-linea>.ped-imp,.ped-hallado>.ped-add{flex:none}
.ped-linea>.ped-imp{text-align:right;white-space:nowrap}
.ped-hallado{align-items:center}
.ped-marca{flex:none;margin-left:auto;padding-left:10px;color:var(--muted);font-size:12px}

/* En pantalla chica la descripción se lleva el renglón entero y el
   −/cantidad/+ baja: apretado en tres columnas, el nombre del artículo
   quedaba en una tira de dos palabras. */
@media (max-width:640px){
  .ped-linea{flex-wrap:wrap}
  .ped-linea>.ped-desc{flex:1 1 100%;order:1}
  .ped-linea>.stk-set{order:2;margin-top:8px}
  .ped-linea>.ped-imp{order:3;margin-left:auto;margin-top:8px}
}
.note{border-left:3px solid var(--acc);background:var(--acc-soft);color:var(--acc-ink);padding:10px 12px;border-radius:0 var(--r) var(--r) 0;font-size:13px}
.note.warn{border-left-color:var(--crit);background:var(--crit-soft);color:var(--crit)}
.toast{position:fixed;left:50%;bottom:22px;transform:translate(-50%,20px);opacity:0;pointer-events:none;background:var(--ink);color:var(--paper);padding:10px 16px;border-radius:100px;font-size:13.5px;font-family:var(--f-head);font-weight:600;z-index:99;transition:.2s}
.toast.show{opacity:1;transform:translate(-50%,0)}
.modal-bg{position:fixed;inset:0;background:rgba(10,14,12,.55);z-index:80;display:grid;place-items:center;padding:20px}
.modal{background:var(--surface);border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow);width:min(560px,100%);max-height:88vh;overflow:auto}
.kv{display:grid;grid-template-columns:auto 1fr;gap:4px 14px;font-size:13.5px}
.kv dt{color:var(--muted)} .kv dd{margin:0;font-family:var(--f-mono)}
.split{display:flex;gap:10px;align-items:center;justify-content:space-between;flex-wrap:wrap}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}


/* ================= mobile =================
   Regla general: por debajo de 680px las tablas dejan de ser tablas
   y cada fila pasa a ser una tarjeta, usando data-l como etiqueta. */

/* iOS hace zoom al enfocar un campo de menos de 16px */
@media (max-width:860px){
  .input,select.input,textarea.input,.qty input,table input,table select{font-size:16px}
}

@media (max-width:1200px){
  /* la hoja del carrito tapa el final de la página */
  .wrap{padding-bottom:76px}
}

@media (max-width:860px){
  .wrap{padding:12px;padding-bottom:76px}
  .topbar{gap:10px;padding:0 12px}
  .tabs{margin-left:0;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .tabs::-webkit-scrollbar{display:none}
  .who span{display:none}            /* queda solo el avatar */
  .cols{gap:12px}
  /* el rail de filtros se compacta en dos columnas para no comerse la pantalla */
  .rail{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}
  .rail-group:last-child{grid-column:1/-1}
  .toolbar{gap:8px}
  .search{min-width:100%}
  .tiles{grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px}
}

@media (max-width:680px){
  .tablewrap{overflow:visible;border:0;background:transparent;max-height:none}
  .tablewrap table{min-width:0;display:block;border-collapse:separate}
  .tablewrap thead{display:none}
  .tablewrap tbody{display:block}
  .tablewrap tbody tr{display:block;background:var(--surface);border:1px solid var(--line);
    border-radius:8px;padding:10px 12px;margin-bottom:10px}
  .tablewrap tbody tr:hover{background:var(--surface)}
  .tablewrap tbody td{display:flex;align-items:center;justify-content:space-between;gap:12px;
    border:0;padding:5px 0;text-align:left;min-height:34px}
  .tablewrap tbody td[data-l]::before{content:attr(data-l);flex:none;
    font-family:var(--f-head);font-size:10.5px;font-weight:600;letter-spacing:.06em;
    text-transform:uppercase;color:var(--muted)}
  /* la primera celda (artículo, con foto y descripción) ocupa el ancho completo */
  .tablewrap tbody td:not([data-l]):first-child,
  .tablewrap tbody td.titulo{display:block;padding-bottom:8px;font-weight:600;
    border-bottom:1px dashed var(--line);margin-bottom:4px}
  .tablewrap tbody td.acciones{display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-start;
    white-space:normal!important;padding-top:9px;border-top:1px dashed var(--line);margin-top:4px}
  .tablewrap tbody td.acciones .btn{flex:1 1 auto}
  .tablewrap tbody tr.off{opacity:.6}
  .tablewrap tbody tr.incart{border-color:var(--acc);box-shadow:0 0 0 1px var(--acc) inset}
  .tablewrap .empty{border:1px solid var(--line);border-radius:8px;background:var(--surface)}

  .grid2{grid-template-columns:1fr}
  .ord-h{gap:8px}
  .ord-h .btn{flex:1 1 auto}
  .line{flex-wrap:wrap}
  .ladder{flex-wrap:wrap}
  .rung{flex:1 1 40%}

  /* los modales pasan a ser hoja inferior, más cómoda con una mano */
  .modal-bg{place-items:end center;padding:0}
  .modal{width:100%;max-height:92vh;border-radius:12px 12px 0 0;border-bottom:0}

  /* botones y campos con superficie de toque suficiente */
  .btn{min-height:38px}
  .btn.sm{min-height:34px;padding:7px 11px}
  .qty{width:118px}
  .qty button{width:34px;height:34px}
  .qty input{height:34px;width:48px}
}

/* pantallas angostas de verdad */
@media (max-width:400px){
  .rail{grid-template-columns:1fr}
  .tiles{grid-template-columns:1fr 1fr}
  .tile .v{font-size:20px}
  .c-cols{display:block}
}

/* ================= comprobante imprimible ================= */
#doc{display:none}
.comprobante{color:#111;font-size:12.5px;line-height:1.45}
.c-head{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;
  border-bottom:2px solid #111;padding-bottom:10px;margin-bottom:14px}
.c-marca{font-family:Archivo,system-ui,sans-serif;font-weight:700;font-size:26px;letter-spacing:-.5px}
.c-tit{font-family:Archivo,system-ui,sans-serif;font-weight:600;font-size:13px;text-transform:uppercase;letter-spacing:.08em}
.c-nro{font-family:'IBM Plex Mono',monospace;font-size:22px;font-weight:600}
.c-mini{font-size:11.5px;color:#444}
.c-r{text-align:right}
.c-cols{display:flex;gap:12px;margin-bottom:14px}
.c-box{flex:1;border:1px solid #ccc;border-radius:4px;padding:9px 11px}
.c-box h4{font-family:Archivo,system-ui,sans-serif;font-size:10.5px;text-transform:uppercase;
  letter-spacing:.08em;color:#666;margin:0 0 5px}
.c-tabla{width:100%;border-collapse:collapse;margin-bottom:12px}
.c-tabla th{text-align:left;font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;
  color:#666;border-bottom:1px solid #111;padding:5px 6px}
.c-tabla td{padding:5px 6px;border-bottom:1px solid #e6e6e6;vertical-align:top}
.c-cod{font-family:'IBM Plex Mono',monospace;font-size:11.5px}
.c-obs{font-size:11px;color:#555;font-style:italic}
.c-tabla tfoot td{border-bottom:0;padding:3px 6px;color:#444}
.c-tabla tfoot .c-dto td{color:#177245}
.c-tabla tfoot .c-total td{border-top:1.5px solid #111;font-weight:700;font-size:15px;color:#111;padding-top:7px}
.c-banco{font-size:11.5px;font-family:'IBM Plex Mono',monospace;padding:2px 0}
.c-pie{font-size:10.5px;color:#666;margin:10px 0 0;border-top:1px solid #e6e6e6;padding-top:7px}

@media print{
  @page{size:A4;margin:14mm}
  body.imprimiendo #root,body.imprimiendo .toast,body.imprimiendo .modal-bg{display:none!important}
  body.imprimiendo #doc{display:block}
  body{background:#fff}
  .comprobante{font-size:11.5px}
  .c-tabla tr{break-inside:avoid}
}

/* ---------- ventana del producto (se abre desde la miniatura) ---------- */
.thumb-ver{padding:0;cursor:pointer;font:inherit;font-family:var(--f-head);font-weight:700;
  font-size:9.5px;letter-spacing:.02em;color:var(--muted);transition:border-color .15s}
.thumb-ver:hover{border-color:var(--acc)}

/* El nombre del artículo también abre la ficha: es donde la gente hace clic
   por instinto, no en la miniatura. Se estila como texto —no como botón— pero
   con subrayado al pasar por encima para que se note que es clickeable. */
.t-ver{display:block;text-align:left;padding:0;border:0;background:none;cursor:pointer;
  color:inherit;font-family:inherit;text-decoration-color:transparent}
.t-ver:hover{text-decoration:underline;text-decoration-color:currentColor;color:var(--acc-ink)}

.modal.ancho{width:min(820px,100%)}

.prod-ver{display:grid;grid-template-columns:300px minmax(0,1fr);gap:22px;align-items:start}
@media (max-width:680px){.prod-ver{grid-template-columns:1fr;gap:14px}}

.prod-foto{background:var(--surface-2);border:1px solid var(--line);border-radius:8px;
  aspect-ratio:1;display:grid;place-items:center;overflow:hidden}
.prod-foto img{width:100%;height:100%;object-fit:contain}
.prod-sinfoto{text-align:center;font-family:var(--f-head);font-weight:700;color:var(--muted)}

.prod-titulo{font-size:19px;line-height:1.25;margin:2px 0 4px}
.prod-precios{display:flex;gap:24px;flex-wrap:wrap;margin-top:14px;
  padding-top:12px;border-top:1px solid var(--line)}
/* Los rótulos van en su propia línea: si no, el valor queda pegado al texto
   ("PÚBLICO SUGERIDO$415.800"). */
.prod-precios .lbl{display:block;margin-bottom:2px}
.prod-may{display:block;font-family:var(--f-mono);font-size:21px;font-weight:600;
  font-variant-numeric:tabular-nums;color:var(--ink)}
.prod-pub{display:block;font-family:var(--f-mono);font-size:15px;font-weight:600;
  font-variant-numeric:tabular-nums;color:var(--muted)}
.prod-desc{color:var(--ink-2);font-size:14px;line-height:1.55;margin:14px 0 0;
  padding-top:12px;border-top:1px solid var(--line)}

/* min-width:0 pisa el "table{min-width:700px}" global, que está pensado para
   la tabla del catálogo: sin esto la ficha desborda la ventana y aparece una
   barra de scroll horizontal, y en el teléfono se corta la foto. */
.ficha-tec{width:100%;min-width:0;border-collapse:collapse;margin-top:14px;font-size:13.5px}
.ficha-tec td{padding:7px 0;border-bottom:1px solid var(--line);vertical-align:top}
.ficha-tec td:first-child{color:var(--muted);width:44%;padding-right:12px}
.ficha-tec tr:last-child td{border-bottom:0}