/* =========================================================
   CostoPyme v2 — styles.css
   ========================================================= */

/* ─── Variables ─────────────────────────────────────────── */
:root {
  --p:          #D97706;
  --p-dark:     #B45309;
  --p-hover:    #92400E;
  --p-light:    #FEF3C7;
  --p-ring:     rgba(217,119,6,.2);

  --green:      #15803D;
  --green-bg:   #DCFCE7;
  --green-b:    #86EFAC;
  --yellow:     #92400E;
  --yellow-bg:  #FEF3C7;
  --yellow-b:   #FCD34D;
  --orange:     #C2410C;
  --orange-bg:  #FFEDD5;
  --orange-b:   #FDBA74;
  --red:        #B91C1C;
  --red-bg:     #FEE2E2;
  --red-b:      #FCA5A5;
  --blue:       #1D4ED8;
  --blue-bg:    #DBEAFE;
  --blue-b:     #93C5FD;

  --bg:         #F8FAFB;
  --surface:    #FFFFFF;
  --surface-2:  #F9FAFB;
  --surface-3:  #F3F4F6;
  --border:     #E5E7EB;
  --border-2:   #D1D5DB;
  --shadow-c:   rgba(17,24,39,.07);

  --text:       #111827;
  --text-2:     #374151;
  --text-3:     #6B7280;
  --text-4:     #9CA3AF;
  --text-inv:   #FFFFFF;

  --sb:         #1C2A20;
  --sb-text:    #9DB8A7;
  --sb-active:  #FBBF24;
  --sb-w:       252px;
  --hdr-h:      60px;

  --r-sm:  5px;
  --r:     9px;
  --r-lg:  14px;
  --r-xl:  20px;
  --r-full:999px;

  --sh-sm: 0 1px 2px var(--shadow-c);
  --sh:    0 2px 8px var(--shadow-c), 0 1px 2px var(--shadow-c);
  --sh-md: 0 4px 16px var(--shadow-c), 0 2px 4px var(--shadow-c);
  --sh-lg: 0 12px 32px rgba(17,24,39,.12), 0 4px 8px var(--shadow-c);
  --sh-xl: 0 24px 48px rgba(17,24,39,.16);

  --font: 'Segoe UI', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --mono: 'Consolas', 'SF Mono', monospace;
  --tr: 140ms ease;
}

/* Dark mode */
[data-theme="dark"] {
  --bg:       #0D1117;
  --surface:  #161B22;
  --surface-2:#1C2128;
  --surface-3:#21262D;
  --border:   #30363D;
  --border-2: #444C56;
  --shadow-c: rgba(0,0,0,.3);
  --text:     #F0F6FC;
  --text-2:   #C9D1D9;
  --text-3:   #8B949E;
  --text-4:   #6E7681;
  --sb:       #0D1117;
}

/* ─── Reset ─────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:15px;-webkit-text-size-adjust:100%}
body{
  font-family:var(--font);background:var(--bg);color:var(--text);
  min-height:100vh;display:grid;
  grid-template-columns:var(--sb-w) 1fr;
  grid-template-rows:var(--hdr-h) 1fr;
  grid-template-areas:"sidebar header" "sidebar main";
}
a{color:inherit;text-decoration:none}
button{cursor:pointer;font-family:var(--font);border:none;background:none;color:inherit}
input,select,textarea{font-family:var(--font);color:var(--text)}
ul,ol{list-style:none}

/* ─── Sidebar ────────────────────────────────────────────── */
#sidebar{
  grid-area:sidebar;background:var(--sb);color:var(--sb-text);
  display:flex;flex-direction:column;
  height:100vh;position:sticky;top:0;
  overflow-y:auto;overflow-x:hidden;z-index:100;
}
.sb-logo{
  display:flex;align-items:center;gap:10px;
  padding:18px 18px 16px;
  border-bottom:1px solid rgba(255,255,255,.06);
}
.sb-logo-icon{font-size:26px;line-height:1;flex-shrink:0}
.sb-logo-name{font-size:17px;font-weight:800;color:#fff;letter-spacing:-.3px}
.sb-logo-sub{font-size:10px;color:#6B8A76;display:block;margin-top:1px}

.sb-nav{flex:1;padding:10px 0}
.nav-item{
  display:flex;align-items:center;gap:11px;
  padding:10px 18px;font-size:13.5px;font-weight:500;
  color:var(--sb-text);transition:all var(--tr);cursor:pointer;
  border-right:3px solid transparent;position:relative;
  white-space:nowrap;
}
.nav-item:hover{background:rgba(255,255,255,.06);color:#E5E7EB}
.nav-item.active{
  background:rgba(251,191,36,.1);color:var(--sb-active);
  border-right-color:var(--sb-active);
}
.nav-icon{font-size:16px;flex-shrink:0;width:20px;text-align:center}

.sb-section{
  font-size:10px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;
  color:#3D5A49;padding:10px 18px 4px;
}
.sb-sep{height:1px;background:rgba(255,255,255,.05);margin:6px 14px}
.sb-footer{
  padding:12px 18px;border-top:1px solid rgba(255,255,255,.05);
  font-size:11px;color:#3D5A49;line-height:1.6;
}
.sb-mode-badge{
  display:inline-block;padding:1px 7px;border-radius:var(--r-full);
  font-size:10px;font-weight:700;background:rgba(251,191,36,.15);color:var(--sb-active);
  margin-top:4px;
}

/* ─── Header ─────────────────────────────────────────────── */
#topbar{
  grid-area:header;background:var(--surface);
  border-bottom:1px solid var(--border);
  display:flex;align-items:center;gap:12px;padding:0 22px;
  position:sticky;top:0;z-index:90;box-shadow:var(--sh-sm);
}
#page-title{font-size:16px;font-weight:800;flex:1;letter-spacing:-.2px}
.hdr-biz{
  font-size:12px;color:var(--text-3);
  max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}

/* Mode toggle */
.mode-wrap{display:flex;align-items:center;gap:9px;padding:5px 12px;
  border:1px solid var(--border);border-radius:var(--r-full);
  background:var(--surface-2);cursor:pointer;transition:border-color var(--tr)}
.mode-wrap:hover{border-color:var(--border-2)}
.mode-lbl{font-size:11px;color:var(--text-3);font-weight:600}
.mode-opts{display:flex;align-items:center;gap:6px}
.mode-opt{font-size:12px;font-weight:700;color:var(--text-4);transition:color var(--tr);cursor:pointer}
.mode-opt.on{color:var(--p)}
.switch{position:relative;display:inline-block;width:36px;height:20px}
.switch input{opacity:0;width:0;height:0}
.sw-sl{
  position:absolute;inset:0;background:#CBD5E1;border-radius:var(--r-full);
  transition:background var(--tr);cursor:pointer;
}
.sw-sl::before{
  content:'';position:absolute;width:14px;height:14px;
  left:3px;top:3px;background:#fff;border-radius:50%;
  transition:transform var(--tr);box-shadow:0 1px 3px rgba(0,0,0,.2);
}
.switch input:checked+.sw-sl{background:var(--p)}
.switch input:checked+.sw-sl::before{transform:translateX(16px)}

/* Theme button */
.btn-theme{
  width:34px;height:34px;border-radius:var(--r);
  display:flex;align-items:center;justify-content:center;font-size:17px;
  background:var(--surface-2);border:1px solid var(--border);
  transition:all var(--tr);
}
.btn-theme:hover{background:var(--surface-3);border-color:var(--border-2)}

/* ─── Main ───────────────────────────────────────────────── */
#main-content{grid-area:main;padding:24px;overflow-y:auto;min-height:0}
.view{display:none}
.view.active{display:block;animation:fadeIn .18s ease}
@keyframes fadeIn{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}

/* ─── Typography ─────────────────────────────────────────── */
.page-head{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:22px;gap:12px}
.page-ttl{font-size:22px;font-weight:900;letter-spacing:-.4px;color:var(--text)}
.page-sub{font-size:13px;color:var(--text-3);margin-top:3px}
.sec-ttl{font-size:13px;font-weight:700;color:var(--text-2);text-transform:uppercase;letter-spacing:.5px;margin-bottom:12px}

/* ─── Cards ──────────────────────────────────────────────── */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);box-shadow:var(--sh-sm)}
.card-p{padding:20px}
.card-hdr{
  padding:14px 18px 12px;border-bottom:1px solid var(--border);
  display:flex;align-items:center;justify-content:space-between;gap:10px;
}
.card-body{padding:14px 18px 18px}
.card-ftr{
  padding:10px 18px;border-top:1px solid var(--border);
  background:var(--surface-2);border-radius:0 0 var(--r) var(--r);
  font-size:12px;color:var(--text-3);
}

/* KPI grid */
.kpi-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px;margin-bottom:22px}
.kpi{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r);
  padding:16px 18px;box-shadow:var(--sh-sm);position:relative;overflow:hidden;
}
.kpi::after{
  content:'';position:absolute;inset:0;border-radius:var(--r);
  background:linear-gradient(135deg,rgba(255,255,255,0) 60%,rgba(255,255,255,.04));
}
.kpi-lbl{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--text-3);margin-bottom:6px;padding-right:32px}
.kpi-val{font-size:28px;font-weight:900;line-height:1;font-variant-numeric:tabular-nums;padding-right:32px}
.kpi-sub{font-size:12px;color:var(--text-4);margin-top:5px}
.kpi-ico{position:absolute;right:14px;top:14px;font-size:22px;opacity:.3}
.kpi.g .kpi-val{color:var(--green)} .kpi.g .kpi-ico{opacity:.5;filter:drop-shadow(0 0 6px #15803D40)}
.kpi.o .kpi-val{color:var(--p)}
.kpi.r .kpi-val{color:var(--red)}
.kpi.b .kpi-val{color:var(--blue)}
.kpi.y .kpi-val{color:var(--yellow)}

/* Recipe cards */
.recipe-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(268px,1fr));gap:14px}
.recipe-card{
  background:var(--surface);border:1px solid var(--border);
  border-left:4px solid var(--border);border-radius:var(--r);
  padding:16px;box-shadow:var(--sh-sm);transition:box-shadow var(--tr),transform var(--tr);
  display:flex;flex-direction:column;
}
.recipe-card:hover{box-shadow:var(--sh-md);transform:translateY(-1px)}
.rc-green{border-left-color:var(--green)}
.rc-yellow{border-left-color:#D97706}
.rc-orange{border-left-color:var(--orange)}
.rc-red{border-left-color:var(--red)}

.rc-name{font-size:14.5px;font-weight:800;color:var(--text);margin-bottom:3px;display:flex;justify-content:space-between;align-items:flex-start;gap:6px}
.rc-meta{font-size:12px;color:var(--text-4);margin-bottom:12px}
.rc-row{display:flex;justify-content:space-between;align-items:center;padding:5px 0;border-bottom:1px solid var(--border);font-size:13px}
.rc-row:last-of-type{border-bottom:none}
.rc-lbl{color:var(--text-3)}
.rc-val{font-weight:700;font-variant-numeric:tabular-nums}
.rc-val.g{color:var(--green)} .rc-val.o{color:var(--p)} .rc-val.r{color:var(--red)}

/* Margin health bar */
.mhb{height:4px;background:var(--border);border-radius:var(--r-full);margin:10px 0;overflow:hidden}
.mhb-fill{height:100%;border-radius:var(--r-full);transition:width .5s ease}
.mhb-fill.green{background:linear-gradient(90deg,var(--green),#4ADE80)}
.mhb-fill.yellow{background:linear-gradient(90deg,#D97706,#FCD34D)}
.mhb-fill.orange{background:linear-gradient(90deg,var(--orange),var(--p))}
.mhb-fill.red{background:linear-gradient(90deg,var(--red),#F87171)}

.rc-actions{display:flex;gap:6px;margin-top:12px;padding-top:10px;border-top:1px solid var(--border)}

/* Badges */
.badge{
  display:inline-flex;align-items:center;font-size:11px;font-weight:700;
  padding:2px 8px;border-radius:var(--r-full);white-space:nowrap;
}
.badge.green {background:var(--green-bg); color:var(--green);  border:1px solid var(--green-b)}
.badge.yellow{background:var(--yellow-bg);color:var(--yellow); border:1px solid var(--yellow-b)}
.badge.orange{background:var(--orange-bg);color:var(--orange); border:1px solid var(--orange-b)}
.badge.red   {background:var(--red-bg);   color:var(--red);    border:1px solid var(--red-b)}
.badge.blue  {background:var(--blue-bg);  color:var(--blue);   border:1px solid var(--blue-b)}
.badge.gray  {background:var(--surface-3);color:var(--text-3); border:1px solid var(--border)}

/* ─── Buttons ────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  padding:8px 16px;border-radius:var(--r-sm);font-size:13px;font-weight:600;
  transition:all var(--tr);white-space:nowrap;line-height:1.4;
}
.btn:focus-visible{outline:2px solid var(--p);outline-offset:2px}
.btn:disabled{opacity:.45;pointer-events:none}
.btn-xs{padding:4px 10px;font-size:11px;border-radius:4px}
.btn-sm{padding:6px 12px;font-size:12px}
.btn-lg{padding:11px 24px;font-size:14.5px;border-radius:var(--r)}
.btn-full{width:100%}
.btn-icon{padding:7px;border-radius:var(--r-sm)}

.btn-primary{background:var(--p);color:#fff;box-shadow:0 1px 3px rgba(217,119,6,.35)}
.btn-primary:hover{background:var(--p-dark)}
.btn-primary:active{background:var(--p-hover);transform:scale(.98)}

.btn-success{background:var(--green);color:#fff}
.btn-success:hover{filter:brightness(.9)}

.btn-sec{background:var(--surface);border:1px solid var(--border);color:var(--text-2)}
.btn-sec:hover{background:var(--surface-3);border-color:var(--border-2)}

.btn-ghost{color:var(--text-3)}
.btn-ghost:hover{background:var(--surface-3);color:var(--text)}

.btn-danger{background:var(--red-bg);color:var(--red);border:1px solid var(--red-b)}
.btn-danger:hover{background:var(--red);color:#fff;border-color:var(--red)}

.btn-outline{border:1.5px solid var(--p);color:var(--p);background:transparent}
.btn-outline:hover{background:var(--p-light)}

/* ─── Forms ──────────────────────────────────────────────── */
.fg{margin-bottom:14px}
.fg:last-child{margin-bottom:0}
.flabel{
  display:flex;align-items:center;gap:6px;
  font-size:12.5px;font-weight:700;color:var(--text-2);margin-bottom:5px;
}
.flabel-hint{font-size:11px;font-weight:400;color:var(--text-4)}
.fc{
  width:100%;padding:9px 12px;border:1.5px solid var(--border);border-radius:var(--r-sm);
  font-size:13.5px;color:var(--text);background:var(--surface);
  transition:border-color var(--tr),box-shadow var(--tr);outline:none;
  -webkit-appearance:none;
}
.fc:focus{border-color:var(--p);box-shadow:0 0 0 3px var(--p-ring)}
.fc::placeholder{color:var(--text-4)}
.fc.error{border-color:var(--red);box-shadow:0 0 0 3px rgba(185,28,28,.12)}
select.fc{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 11px center;padding-right:30px;
}
textarea.fc{resize:vertical;min-height:72px}
.fhint{font-size:11px;color:var(--text-4);margin-top:4px;line-height:1.4}
.ferr{font-size:11px;color:var(--red);margin-top:3px;display:none}
.fc.error+.ferr{display:block}

.frow{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.frow3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px}
.finline{display:flex;gap:8px;align-items:flex-end}
.finline .fg{margin-bottom:0;flex:1}

/* Slider */
.range-wrap{display:flex;align-items:center;gap:10px}
input[type="range"]{
  -webkit-appearance:none;flex:1;height:5px;border-radius:var(--r-full);
  background:linear-gradient(to right,var(--p) 0%,var(--p) var(--pct,40%),var(--border) var(--pct,40%),var(--border) 100%);
  outline:none;cursor:pointer;
}
input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none;width:18px;height:18px;border-radius:50%;
  background:var(--p);border:2px solid #fff;box-shadow:0 1px 4px rgba(0,0,0,.25);transition:transform var(--tr);
}
input[type="range"]::-webkit-slider-thumb:hover{transform:scale(1.2)}
.range-val{font-size:14px;font-weight:800;color:var(--p);min-width:44px;text-align:right;font-variant-numeric:tabular-nums}

/* Toggle checkbox */
.toggle-label{display:flex;align-items:center;gap:8px;cursor:pointer;font-size:13px;font-weight:600;color:var(--text-2);user-select:none}
input[type="checkbox"].cbox{width:16px;height:16px;accent-color:var(--p);cursor:pointer;border-radius:3px}

/* ─── Tables ─────────────────────────────────────────────── */
.table-wrap{overflow-x:auto;border-radius:var(--r)}
table{width:100%;border-collapse:collapse;font-size:13.5px}
thead th{
  padding:10px 14px;text-align:left;font-size:11px;font-weight:700;
  color:var(--text-3);text-transform:uppercase;letter-spacing:.5px;
  background:var(--surface-2);border-bottom:2px solid var(--border);white-space:nowrap;
}
thead th.th-r{text-align:right}
tbody td{padding:11px 14px;border-bottom:1px solid var(--border);vertical-align:middle}
tbody tr:last-child td{border-bottom:none}
tbody tr:hover td{background:var(--surface-2)}
.td-name{font-weight:700}
.td-mono{font-family:var(--mono);font-size:13px}
.td-muted{color:var(--text-4);font-size:12px}
.td-r{text-align:right}
.td-acts{text-align:right;white-space:nowrap}

/* Inline editable cell */
.td-edit-wrap{display:flex;align-items:center;gap:4px}
.td-edit-val{cursor:pointer;padding:2px 6px;border-radius:4px;transition:background var(--tr)}
.td-edit-val:hover{background:var(--surface-3)}

/* ─── Ingredient row (recipe form) ──────────────────────── */
.ing-list{display:flex;flex-direction:column;gap:7px;margin-bottom:8px}
.ing-row{
  display:grid;grid-template-columns:1fr 90px 84px 30px;gap:6px;align-items:center;
  background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r-sm);padding:7px 9px;
}
.ing-row-cost{font-size:11px;color:var(--text-4);font-family:var(--mono);margin-top:2px}

/* ─── Breakdown ──────────────────────────────────────────── */
.bkd{background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r-sm);overflow:hidden}
.bkd-row{
  display:flex;justify-content:space-between;align-items:center;
  padding:9px 14px;border-bottom:1px solid var(--border);font-size:13px;
}
.bkd-row:last-child{border-bottom:none}
.bkd-row.total{background:var(--surface);font-size:14px;font-weight:700;padding:11px 14px;border-top:2px solid var(--border-2)}
.bkd-row.hl{background:var(--p-light)}
.bkd-lbl{color:var(--text-3)}
.bkd-val{font-weight:600;font-variant-numeric:tabular-nums}
.bkd-val.g{color:var(--green)} .bkd-val.o{color:var(--p)} .bkd-val.r{color:var(--red)}

/* ─── Alerts ─────────────────────────────────────────────── */
.alert{
  display:flex;align-items:flex-start;gap:10px;padding:11px 14px;
  border-radius:var(--r-sm);font-size:13px;line-height:1.5;margin-bottom:10px;
}
.alert:last-child{margin-bottom:0}
.alert-ico{font-size:15px;flex-shrink:0;margin-top:.1em}
.alert-txt strong{display:block;font-weight:700;margin-bottom:1px}
.alert.info   {background:var(--blue-bg);  color:var(--blue);  border-left:3px solid var(--blue-b)}
.alert.success{background:var(--green-bg); color:var(--green); border-left:3px solid var(--green-b)}
.alert.warning{background:var(--yellow-bg);color:var(--yellow);border-left:3px solid var(--yellow-b)}
.alert.danger {background:var(--red-bg);   color:var(--red);   border-left:3px solid var(--red-b)}

/* ─── Modal ──────────────────────────────────────────────── */
#modal-overlay{
  position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:1000;
  display:flex;align-items:flex-start;justify-content:center;
  padding:40px 20px;overflow-y:auto;
  opacity:0;pointer-events:none;transition:opacity .2s ease;
}
#modal-overlay.open{opacity:1;pointer-events:auto}
#modal-box{
  background:var(--surface);border-radius:var(--r-lg);width:100%;max-width:640px;
  box-shadow:var(--sh-xl);display:flex;flex-direction:column;
  max-height:calc(100vh - 80px);
  transform:translateY(12px) scale(.99);
  transition:transform .22s ease;
}
#modal-overlay.open #modal-box{transform:none}
.modal-hdr{
  padding:16px 20px 13px;border-bottom:1px solid var(--border);
  display:flex;align-items:center;justify-content:space-between;flex-shrink:0;
}
.modal-ttl{font-size:15.5px;font-weight:800;letter-spacing:-.2px}
.modal-close-btn{
  width:28px;height:28px;display:flex;align-items:center;justify-content:center;
  border-radius:var(--r-sm);color:var(--text-4);font-size:18px;transition:all var(--tr);
}
.modal-close-btn:hover{background:var(--surface-3);color:var(--text)}
.modal-body{padding:18px 20px;overflow-y:auto;flex:1}
.modal-ftr{
  padding:12px 20px;border-top:1px solid var(--border);
  display:flex;justify-content:flex-end;gap:8px;flex-shrink:0;
  background:var(--surface-2);border-radius:0 0 var(--r-lg) var(--r-lg);
}

/* Large modal */
.modal-lg #modal-box{max-width:780px}

/* ─── Tabs ───────────────────────────────────────────────── */
.tabs{display:flex;border-bottom:2px solid var(--border);margin-bottom:18px;gap:0;overflow-x:auto}
.tab-btn{
  padding:8px 16px;font-size:13px;font-weight:600;color:var(--text-4);
  border-bottom:2.5px solid transparent;margin-bottom:-2px;transition:all var(--tr);white-space:nowrap;
}
.tab-btn:hover{color:var(--text-2)}
.tab-btn.on{color:var(--p);border-bottom-color:var(--p)}
.tab-panel{display:none}
.tab-panel.on{display:block}

/* ─── Toasts ─────────────────────────────────────────────── */
#toast-wrap{
  position:fixed;bottom:20px;right:20px;z-index:2000;
  display:flex;flex-direction:column-reverse;gap:8px;pointer-events:none;
}
.toast{
  display:flex;align-items:center;gap:9px;padding:10px 15px;border-radius:var(--r);
  font-size:13px;font-weight:600;color:#fff;box-shadow:var(--sh-lg);
  pointer-events:auto;min-width:200px;max-width:340px;
  animation:toastIn .2s ease;
}
@keyframes toastIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.toast.success{background:var(--green)}
.toast.error  {background:var(--red)}
.toast.info   {background:var(--blue)}
.toast.warning{background:#92400E}
.toast-ico{font-size:15px}

/* ─── Express view ───────────────────────────────────────── */
.ex-result{
  background:linear-gradient(135deg,var(--p) 0%,var(--p-dark) 100%);
  color:#fff;border-radius:var(--r-lg);padding:24px;text-align:center;
}
.ex-price{font-size:46px;font-weight:900;letter-spacing:-1.5px;line-height:1}
.ex-plbl{font-size:12px;opacity:.75;margin-bottom:2px}
.ex-psub{font-size:12.5px;opacity:.7;margin-top:6px}
.ex-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:16px}
.ex-mini{background:rgba(255,255,255,.15);border-radius:var(--r-sm);padding:10px}
.ex-mini-val{font-size:19px;font-weight:900;line-height:1}
.ex-mini-lbl{font-size:11px;opacity:.7;margin-top:3px}

/* Reverse result */
.rv-result{
  background:linear-gradient(135deg,var(--blue) 0%,#1E40AF 100%);
  color:#fff;border-radius:var(--r-lg);padding:22px;text-align:center;
}
.rv-pct{font-size:44px;font-weight:900;letter-spacing:-1px;line-height:1}

/* ─── Matrix table ───────────────────────────────────────── */
.matrix-table{width:100%;border-collapse:collapse;font-size:12.5px}
.matrix-table th{
  padding:8px 10px;text-align:center;font-size:11px;font-weight:700;
  color:var(--text-3);text-transform:uppercase;letter-spacing:.4px;
  background:var(--surface-2);border-bottom:2px solid var(--border);
}
.matrix-table th:first-child{text-align:left}
.matrix-table td{padding:9px 10px;text-align:center;border-bottom:1px solid var(--border);font-variant-numeric:tabular-nums}
.matrix-table td:first-child{font-weight:700;text-align:left;color:var(--text-2)}
.matrix-table tr:last-child td{border-bottom:none}
.matrix-table tr:hover td{background:var(--surface-2)}
.matrix-best{background:var(--green-bg)!important;color:var(--green);font-weight:800}
.matrix-lbl{display:block;font-size:10px;color:var(--text-4);margin-top:2px}

/* ─── Proyector ──────────────────────────────────────────── */
.proy-hero{
  background:linear-gradient(135deg,#1D4ED8,#1E40AF);
  color:#fff;border-radius:var(--r-lg);padding:22px;text-align:center;
}
.proy-gain{font-size:38px;font-weight:900;letter-spacing:-1px;line-height:1}

/* ─── Reports ────────────────────────────────────────────── */
.report-bar-wrap{display:flex;align-items:center;gap:8px}
.report-bar-bg{flex:1;height:7px;background:var(--border);border-radius:var(--r-full);overflow:hidden}
.report-bar-fill{height:100%;border-radius:var(--r-full);transition:width .5s .1s ease}
.report-bar-fill.green {background:linear-gradient(90deg,var(--green),#4ADE80)}
.report-bar-fill.yellow{background:linear-gradient(90deg,#D97706,#FCD34D)}
.report-bar-fill.orange{background:linear-gradient(90deg,var(--orange),var(--p))}
.report-bar-fill.red   {background:linear-gradient(90deg,var(--red),#F87171)}

/* ─── Impact bars ────────────────────────────────────────── */
.impact-row{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.impact-name{font-size:12px;font-weight:600;color:var(--text-2);min-width:130px;max-width:130px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.impact-bar-bg{flex:1;height:6px;background:var(--border);border-radius:var(--r-full);overflow:hidden}
.impact-bar-fill{height:100%;border-radius:var(--r-full);background:linear-gradient(90deg,var(--p-dark),var(--p))}
.impact-pct{font-size:11px;font-weight:700;color:var(--text-3);min-width:38px;text-align:right;font-variant-numeric:tabular-nums}

/* ─── Simulador ──────────────────────────────────────────── */
.sim-comp{display:grid;grid-template-columns:1fr 36px 1fr;gap:14px;align-items:start}
.sim-vs{font-size:22px;font-weight:900;color:var(--text-4);display:flex;align-items:center;justify-content:center;padding-top:44px}
.sim-col-lbl{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--text-3);margin-bottom:8px;display:flex;align-items:center;gap:6px}
.diff-up{color:var(--red);font-size:11px;font-weight:700}
.diff-dn{color:var(--green);font-size:11px;font-weight:700}
.diff-eq{color:var(--text-4);font-size:11px}

/* ─── Empty state ────────────────────────────────────────── */
.empty{display:flex;flex-direction:column;align-items:center;text-align:center;padding:52px 32px;color:var(--text-3)}
.empty-ico{font-size:52px;margin-bottom:14px;line-height:1}
.empty-ttl{font-size:15px;font-weight:700;color:var(--text-2);margin-bottom:6px}
.empty-txt{font-size:13px;line-height:1.6;max-width:300px;margin-bottom:20px}

/* ─── Sort/filter bar ────────────────────────────────────── */
.filter-bar{
  display:flex;align-items:center;gap:8px;margin-bottom:16px;flex-wrap:wrap;
}
.filter-pill{
  padding:5px 12px;font-size:12px;font-weight:600;
  border:1.5px solid var(--border);border-radius:var(--r-full);color:var(--text-3);
  background:var(--surface);transition:all var(--tr);cursor:pointer;
}
.filter-pill:hover{border-color:var(--border-2);color:var(--text)}
.filter-pill.on{border-color:var(--p);color:var(--p);background:var(--p-light)}
.filter-search{
  flex:1;min-width:180px;padding:6px 12px;
  border:1.5px solid var(--border);border-radius:var(--r-full);font-size:13px;
  background:var(--surface);outline:none;transition:border-color var(--tr);
}
.filter-search:focus{border-color:var(--p)}

/* ─── Welcome ────────────────────────────────────────────── */
#welcome-screen{
  position:fixed;inset:0;background:rgba(0,0,0,.6);
  backdrop-filter:blur(4px);z-index:3000;
  display:flex;align-items:center;justify-content:center;padding:20px;
}
.welcome-box{
  background:var(--surface);border-radius:var(--r-xl);padding:36px 40px;
  max-width:500px;width:100%;box-shadow:var(--sh-xl);text-align:center;
}
.welcome-emoji{font-size:56px;line-height:1;margin-bottom:14px}
.welcome-ttl{font-size:26px;font-weight:900;letter-spacing:-.5px;margin-bottom:8px}
.welcome-sub{color:var(--text-3);font-size:14px;line-height:1.6;margin-bottom:28px}
.welcome-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;margin-bottom:24px}
.wt-btn{
  display:flex;flex-direction:column;align-items:center;gap:7px;padding:14px 8px;
  border:2px solid var(--border);border-radius:var(--r);font-size:12px;font-weight:600;
  color:var(--text-3);cursor:pointer;transition:all var(--tr);background:var(--surface);
}
.wt-btn:hover,.wt-btn.on{border-color:var(--p);color:var(--p);background:var(--p-light)}
.wt-emoji{font-size:24px}

/* ─── Misc ───────────────────────────────────────────────── */
.sep{height:1px;background:var(--border);margin:14px 0}
.tag{display:inline-flex;align-items:center;font-size:11px;font-weight:600;padding:2px 8px;border-radius:var(--r-full);background:var(--surface-3);color:var(--text-3);border:1px solid var(--border)}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.mb-6{margin-bottom:6px} .mb-10{margin-bottom:10px} .mb-14{margin-bottom:14px}
.mb-18{margin-bottom:18px} .mb-22{margin-bottom:22px} .mb-28{margin-bottom:28px}
.mt-6{margin-top:6px} .mt-10{margin-top:10px} .mt-14{margin-top:14px}
.mt-18{margin-top:18px} .mt-22{margin-top:22px} .mt-28{margin-top:28px}
.flex{display:flex} .flex-c{display:flex;align-items:center}
.jb{justify-content:space-between} .gap-6{gap:6px} .gap-8{gap:8px} .gap-10{gap:10px} .gap-12{gap:12px}
.text-sm{font-size:12px} .text-xs{font-size:11px} .text-g{color:var(--green)} .text-r{color:var(--red)} .text-p{color:var(--p)} .text-muted{color:var(--text-3)} .text-right{text-align:right}
.font-bold{font-weight:700} .font-black{font-weight:900}

/* Advanced-only / simple-only visibility */
body.mode-simple  .adv-only{display:none!important}
body.mode-avanzado .simple-only{display:none!important}

/* ═══════════════════════════════════════════════════════════
   MÓVIL / ANDROID — Diseño nativo completo
   Regla de oro: todo tappable mínimo 48×48dp
   ═══════════════════════════════════════════════════════════ */
@media (max-width:768px){

  /* ─── Variables móvil ────────────────────────────────────── */
  :root{
    --hdr-h:     56px;
    --nav-h:     66px;
    --font:      'Segoe UI', system-ui, -apple-system, sans-serif;
  }
  html{ font-size: 16px }   /* base 16px — legibilidad Android */

  /* ─── Layout mobile: todo fixed, sin grid ───────────────── */
  body{
    display: block;
    height: 100vh;
    overflow: hidden;
  }

  /* ─── Barra de navegación inferior (fixed real) ──────────── */
  #sidebar{
    position: fixed;
    top: auto !important;   /* cancela el top:0 del CSS base */
    bottom: 0; left: 0; right: 0;
    height: var(--nav-h);
    width: 100%;
    flex-direction: row;
    align-items: stretch;
    overflow: hidden;
    border-top: 1.5px solid rgba(255,255,255,.14);
    box-shadow: 0 -4px 16px rgba(0,0,0,.4);
    z-index: 200;
    padding-bottom: env(safe-area-inset-bottom, 0);
  }
  .sb-logo,.sb-footer,.sb-sep,.sb-section{ display:none }

  .sb-nav{
    display: flex;
    flex-direction: row;
    flex: 1;
    padding: 0;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .sb-nav::-webkit-scrollbar{ display:none }

  .nav-item{
    flex-direction: column;
    gap: 3px;
    padding: 8px 10px 6px;
    border-right: none;
    flex: 0 0 auto;
    justify-content: center;
    align-items: center;
    min-width: 72px;
    min-height: var(--nav-h);
    text-align: center;
    border-bottom: 3px solid transparent;
    transition: all .14s ease;
  }
  .nav-item span:last-child{
    font-size: 10px;
    font-weight: 700;
    line-height: 1.1;
    color: var(--sb-text);
    transition: color .14s;
    white-space: nowrap;
  }
  .nav-item:hover span:last-child,
  .nav-item.active span:last-child{ color: var(--sb-active) }
  .nav-item.active{
    border-right: none;
    border-bottom: 3px solid var(--sb-active);
    background: rgba(251,191,36,.1);
  }
  .nav-icon{
    font-size: 24px;   /* grande y claro */
    width: auto;
    line-height: 1;
  }

  /* ─── Topbar (fixed arriba) ─────────────────────────────── */
  #topbar{
    position: fixed !important;
    top: 0 !important; left: 0; right: 0;
    height: var(--hdr-h);
    padding: 0 12px;
    gap: 6px;
    z-index: 150;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    box-shadow: var(--sh-sm);
    display: flex;
    align-items: center;
  }
  #page-title{
    font-size: 16px;
    font-weight: 900;
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .hdr-biz{ display:none }
  /* Ocultar búsqueda en topbar para dar espacio al switch+tema */
  .gsearch-wrap{ display:none !important }

  /* Búsqueda: sólo ícono en mobile, se expande al tocar */
  .gsearch-wrap{ position:relative }
  .gsearch{
    width: 40px;
    height: 40px;
    padding: 0 0 0 36px;
    font-size: 0;              /* ocultar texto */
    border-radius: 50%;
    background: transparent;
    border-color: transparent;
    box-shadow: none;
    transition: all .22s ease;
  }
  .gsearch:focus{
    width: 170px;
    height: 38px;
    font-size: 14px;
    padding: 8px 12px 8px 34px;
    border-radius: var(--r-full);
    background: var(--surface-2);
    border-color: var(--p);
    box-shadow: 0 0 0 3px var(--p-ring);
  }
  .gsearch-ico{ font-size: 18px; left: 10px }
  .gsearch-dd{ min-width: 280px; right: 0; left: auto }

  /* Modo toggle: mostrar switch + etiquetas cortas */
  .mode-lbl{ display:none }
  .mode-wrap{
    display: flex;
    align-items: center;
    padding: 5px 10px;
    gap: 5px;
    border-radius: var(--r-full);
    flex-shrink: 0;
  }
  .mode-opts{ gap: 5px }
  #mode-lbl-s,#mode-lbl-a{
    display: inline;
    font-size: 11px;
    font-weight: 700;
  }
  .switch{ width: 36px; height: 20px; flex-shrink: 0 }
  .sw-sl::before{ width: 14px; height: 14px; top: 3px; left: 3px }
  .switch input:checked+.sw-sl::before{ transform:translateX(16px) }

  /* Botón tema */
  .btn-theme{
    width: 40px; height: 40px;
    font-size: 20px;
    flex-shrink: 0;
  }

  /* ─── Área principal (fixed entre topbar y nav) ─────────── */
  #main-content{
    position: fixed;
    top: var(--hdr-h);
    bottom: var(--nav-h);
    left: 0; right: 0;
    padding: 16px 14px 12px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }

  /* ─── Tipografía ─────────────────────────────────────────── */
  .page-ttl{ font-size: 22px; font-weight: 900 }
  .page-sub{ font-size: 14px }
  .sec-ttl{ font-size: 12px }
  .page-head{
    flex-direction: column;
    gap: 12px;
    align-items: flex-start;
    margin-bottom: 18px;
  }
  .page-head > div:last-child{ width: 100% }
  .page-head .btn-primary,.page-head .btn-sec{
    width: 100%;
    justify-content: center;
  }

  /* ─── KPIs ──────────────────────────────────────────────── */
  .kpi-grid{
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 18px;
  }
  .kpi{ padding: 14px 12px }
  .kpi-val{ font-size: 26px; padding-right: 30px }
  .kpi-lbl{ font-size: 10px; padding-right: 30px }
  .kpi-sub{ font-size: 11px }
  .kpi-ico{ font-size: 20px; top: 10px; right: 10px; opacity:.25 }

  /* ─── Botones: mínimo 48dp (estándar Android) ────────────── */
  .btn{
    min-height: 48px;
    padding: 10px 18px;
    font-size: 14px;
    border-radius: var(--r);
    gap: 8px;
  }
  .btn-sm{  min-height: 44px; padding: 10px 14px; font-size: 13px }
  .btn-xs{  min-height: 40px; padding: 8px 13px;  font-size: 12px }
  .btn-lg{  min-height: 54px; font-size: 15px }
  .btn-full{ min-height: 54px; width: 100% }
  .btn-icon{ min-height: 48px; min-width: 48px; padding: 12px; border-radius: var(--r) }

  /* ─── Formularios — entradas grandes para dedos ──────────── */
  .fc{
    padding: 13px 14px;
    font-size: 16px;        /* CRITICAL: < 16px dispara zoom en iOS, mejor igual en Android */
    border-radius: var(--r-sm);
    min-height: 48px;
  }
  select.fc{ font-size: 16px; min-height: 48px; padding-right: 38px }
  textarea.fc{ font-size: 16px; min-height: 96px }
  .frow,.frow3{ grid-template-columns: 1fr; gap: 12px }
  .flabel{ font-size: 13px; margin-bottom: 6px }
  .fhint{ font-size: 12px }
  .ferr{ font-size: 12px }
  .finline{ gap: 10px }
  .finline .fc{ min-height: 48px }

  /* Sliders más gruesos y fáciles de arrastrar */
  input[type="range"]{ height: 8px }
  input[type="range"]::-webkit-slider-thumb{ width: 26px; height: 26px }
  .range-val{ font-size: 16px; min-width: 52px }

  /* ─── Recipe grid ────────────────────────────────────────── */
  .recipe-grid{ grid-template-columns: 1fr; gap: 12px }
  .recipe-card{ padding: 16px }
  .rc-name{ font-size: 15px }
  .rc-meta{ font-size: 13px }
  .rc-row{ font-size: 14px; padding: 9px 0 }
  .rc-val{ font-size: 14px }
  .rc-actions{
    display: grid;
    grid-template-columns: 1fr 1fr auto auto auto;
    gap: 8px;
    margin-top: 14px;
    padding-top: 12px;
  }
  .rc-actions .btn-sec,.rc-actions .btn-outline{
    flex: 1;
    min-height: 44px;
    font-size: 13px;
  }
  .rc-actions .btn-icon{ min-height: 44px; min-width: 44px }

  /* ─── Tablas ─────────────────────────────────────────────── */
  .table-wrap{ -webkit-overflow-scrolling:touch; border-radius: var(--r-sm) }
  table{ font-size: 13.5px }
  thead th{ padding: 10px 12px; font-size: 10px }
  tbody td{ padding: 13px 12px }
  .td-acts .btn-sm{ min-height: 40px }
  .td-acts .btn-xs{ min-height: 38px }

  /* ─── Ingredient row (form de receta) ────────────────────── */
  .ing-row{
    grid-template-columns: 1fr 88px 76px 50px;
    gap: 7px;
    padding: 10px;
  }
  .ing-row .fc{ padding: 10px 10px; font-size: 14px; min-height: 44px }
  .ing-del{ min-height: 46px; min-width: 46px; font-size: 18px }

  /* ─── Modal: bottom sheet ────────────────────────────────── */
  #modal-overlay{
    align-items: flex-end;
    padding: 0;
  }
  #modal-box{
    border-radius: 20px 20px 0 0;
    max-height: 94vh;
    width: 100%;
    max-width: 100%;
    padding-bottom: env(safe-area-inset-bottom, 0);
  }
  .modal-hdr{
    padding: 16px 18px 14px;
    /* "pastilla" drag indicator */
    background: var(--surface);
  }
  .modal-hdr::before{
    content: '';
    display: block;
    width: 40px; height: 4px;
    background: var(--border-2);
    border-radius: 2px;
    margin: 0 auto 14px;
  }
  .modal-ttl{ font-size: 16px }
  .modal-body{ padding: 16px 18px; font-size: 14px }
  .modal-ftr{
    padding: 14px 18px;
    flex-wrap: wrap;
    gap: 10px;
  }
  .modal-ftr .btn{ flex: 1; min-width: 120px }

  /* ─── Tabs del modal ─────────────────────────────────────── */
  .tab-btn{ padding: 10px 14px; font-size: 13px }

  /* ─── Breakdown (desglose de costos) ─────────────────────── */
  .bkd-row{ padding: 12px 14px; font-size: 14px }
  .bkd-row.total{ font-size: 15px; padding: 14px 14px }
  .bkd-lbl{ font-size: 13px }
  .bkd-val{ font-size: 14px }

  /* ─── Alertas ────────────────────────────────────────────── */
  .alert{ font-size: 13.5px; padding: 13px 14px; line-height: 1.5 }
  .alert-ico{ font-size: 17px }

  /* ─── Badges ─────────────────────────────────────────────── */
  .badge{ font-size: 11px; padding: 3px 9px }

  /* ─── Express view ───────────────────────────────────────── */
  .ex-price{ font-size: 40px; letter-spacing: -1px }
  .ex-grid{ grid-template-columns: 1fr 1fr; gap: 8px }
  .ex-mini-val{ font-size: 18px }
  .ex-mini-lbl{ font-size: 12px }

  /* ─── Simulador ──────────────────────────────────────────── */
  .sim-comp{ grid-template-columns: 1fr; gap: 14px }
  .sim-vs{ display: none }

  /* ─── Filter bar ─────────────────────────────────────────── */
  .filter-bar{ gap: 8px; flex-wrap: wrap }
  .filter-pill{ min-height: 40px; padding: 8px 14px; font-size: 13px }
  .filter-search{ min-height: 44px; font-size: 15px; flex: 1 }
  .cat-chips{ gap: 8px }
  .cat-chip{ min-height: 40px; font-size: 13px; padding: 8px 16px }

  /* ─── View toggle (cards / lista) ────────────────────────── */
  .vtbtn{ width: 40px; height: 40px; font-size: 18px }

  /* ─── Quick edit (precio inline) ────────────────────────── */
  .qe-val{ font-size: 14px; padding: 6px 9px }
  .qe-input{ font-size: 15px; width: 110px; padding: 6px 9px }

  /* ─── Welcome ────────────────────────────────────────────── */
  .welcome-grid{ grid-template-columns: 1fr 1fr; gap: 10px }
  .welcome-box{ padding: 28px 20px; border-radius: var(--r-xl) }
  .welcome-ttl{ font-size: 22px }
  .welcome-sub{ font-size: 14px }
  .wt-btn{ padding: 14px 8px; font-size: 12px }

  /* ─── Matrix table ───────────────────────────────────────── */
  .matrix-table{ font-size: 12px }
  .matrix-table th,.matrix-table td{ padding: 8px 8px }

  /* ─── Dashboard chart ────────────────────────────────────── */
  .dash-chart-wrap{ padding: 14px 14px 12px }

  /* ─── Separadores y espaciado ────────────────────────────── */
  .mb-22{ margin-bottom: 16px }
  .mt-22{ margin-top: 16px }

  /* ─── Configuración: columnas → una sola ─────────────────── */
  #view-configuracion [style*="grid-template-columns:1fr 1fr"]{
    display: flex !important;
    flex-direction: column !important;
  }
  #view-express [style*="grid-template-columns:1fr 1fr"]{
    grid-template-columns: 1fr !important;
  }

  /* Scrollbars invisibles en toda la app */
  *{ scrollbar-width: none }
  *::-webkit-scrollbar{ display:none }
}

/* ─── Pantallas muy pequeñas (< 380px, ej. Galaxy A) ────────── */
@media (max-width:380px){
  html{ font-size: 15px }
  :root{ --nav-h: 62px }
  .kpi-val{ font-size: 23px }
  .nav-icon{ font-size: 22px }
  .nav-item span:last-child{ font-size: 9px }
  .page-ttl{ font-size: 20px }
  .ex-price{ font-size: 36px }
  .ing-row{ grid-template-columns: 1fr 82px 72px 46px }
  .btn{ min-height: 46px; padding: 9px 14px }
  .fc{ padding: 11px 12px; min-height: 46px }
}

/* ─── Global Search ─────────────────────────────────────── */
.gsearch-wrap{position:relative;display:flex;align-items:center}
.gsearch{
  width:200px;padding:7px 12px 7px 32px;
  border:1.5px solid var(--border);border-radius:var(--r-full);
  font-size:13px;background:var(--surface-2);outline:none;
  transition:all .2s ease;color:var(--text);
}
.gsearch:focus{border-color:var(--p);background:var(--surface);width:260px;box-shadow:0 0 0 3px var(--p-ring)}
.gsearch-ico{position:absolute;left:9px;font-size:13px;pointer-events:none;color:var(--text-4)}
.gsearch-dd{
  position:absolute;top:calc(100% + 6px);left:0;min-width:300px;
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r);box-shadow:var(--sh-lg);z-index:500;overflow:hidden;
}
.gsearch-item{
  display:flex;align-items:center;gap:10px;
  padding:10px 14px;cursor:pointer;font-size:13px;
  border-bottom:1px solid var(--border);transition:background var(--tr);
}
.gsearch-item:last-child{border-bottom:none}
.gsearch-item:hover,.gsearch-item:focus{background:var(--surface-2)}
.gsearch-item-type{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;color:var(--text-4)}
.gsearch-item-name{font-weight:600}
.gsearch-empty{padding:16px;text-align:center;color:var(--text-4);font-size:13px}

/* ─── Dashboard Chart ────────────────────────────────────── */
.dash-chart-wrap{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);box-shadow:var(--sh-sm);padding:16px 18px 14px;margin-bottom:22px}
#margin-chart{width:100%!important;display:block}

/* ─── KPI extra ──────────────────────────────────────────── */
.kpi.b .kpi-val{color:var(--blue)}

/* ─── Recipe list/table toggle ───────────────────────────── */
.view-toggle{display:flex;gap:4px}
.vtbtn{
  width:34px;height:34px;display:flex;align-items:center;justify-content:center;
  border-radius:var(--r-sm);font-size:16px;border:1.5px solid var(--border);
  background:var(--surface);color:var(--text-3);transition:all var(--tr);cursor:pointer;
}
.vtbtn.on{border-color:var(--p);color:var(--p);background:var(--p-light)}
.rec-list td .badge{font-size:9px}

/* ─── Category filter chips ──────────────────────────────── */
.cat-chips{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px}
.cat-chip{
  display:inline-flex;align-items:center;gap:5px;padding:5px 13px;
  border:1.5px solid var(--border);border-radius:var(--r-full);
  font-size:12px;font-weight:600;color:var(--text-3);background:var(--surface);
  cursor:pointer;transition:all var(--tr);white-space:nowrap;
}
.cat-chip:hover{border-color:var(--border-2);color:var(--text)}
.cat-chip.on{border-color:var(--p);color:var(--p);background:var(--p-light)}

/* ─── Sortable table header ──────────────────────────────── */
.th-sort{cursor:pointer;user-select:none;white-space:nowrap}
.th-sort:hover{color:var(--p)}
.sort-ico{opacity:.35;font-size:10px;margin-left:3px}
.th-sort.asc .sort-ico::after{content:'↑';color:var(--p);opacity:1}
.th-sort.desc .sort-ico::after{content:'↓';color:var(--p);opacity:1}
.th-sort .sort-ico::after{content:'↕'}

/* ─── Inline quick-edit price ────────────────────────────── */
.qe-wrap{display:inline-flex;align-items:center;gap:4px}
.qe-val{
  font-family:var(--mono);font-weight:700;font-variant-numeric:tabular-nums;
  cursor:pointer;padding:3px 7px;border-radius:4px;
  border:1.5px solid transparent;transition:all var(--tr);font-size:13px;
}
.qe-val:hover{background:var(--p-light);border-color:var(--p);color:var(--p)}
.qe-input{
  font-family:var(--mono);font-weight:700;font-size:13px;
  width:96px;padding:3px 7px;border:1.5px solid var(--p);border-radius:4px;
  background:var(--surface);outline:none;color:var(--text);
  box-shadow:0 0 0 3px var(--p-ring);
}
.qe-hint{font-size:10px;color:var(--text-4)}

/* ─── CSV / print buttons ────────────────────────────────── */
.btn-csv{background:var(--green-bg);color:var(--green);border:1px solid var(--green-b)}
.btn-csv:hover{background:var(--green);color:#fff;border-color:var(--green)}
.btn-print{background:var(--blue-bg);color:var(--blue);border:1px solid var(--blue-b)}
.btn-print:hover{background:var(--blue);color:#fff;border-color:var(--blue)}

/* ─── Print styles (imprimir receta) ─────────────────────── */
@media print{
  #sidebar,#topbar,#toast-wrap,.modal-ftr,.btn,.filter-bar,.rc-actions,.no-print{display:none!important}
  body{display:block!important;background:#fff;color:#000;font-size:12px}
  #main-content{padding:0!important}
  .view{display:none!important}
  #modal-overlay{position:static!important;background:none!important;padding:0!important;opacity:1!important;pointer-events:auto!important}
  #modal-box{box-shadow:none!important;max-height:none!important;border:none!important}
  .modal-hdr{border-bottom:2px solid #000!important}
  .bkd{border:1px solid #ccc!important}
  .bkd-row{border-bottom:1px solid #eee!important}
  .card{break-inside:avoid;box-shadow:none;border:1px solid #ddd}
}

/* ─── Scrollbar ──────────────────────────────────────────── */
::-webkit-scrollbar{width:5px;height:5px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--border);border-radius:var(--r-full)}
::-webkit-scrollbar-thumb:hover{background:var(--border-2)}

/* ─── Print ──────────────────────────────────────────────── */
@media print{
  #sidebar,#topbar,#toast-wrap,#modal-overlay,.btn,.filter-bar{display:none!important}
  body{display:block;background:#fff;color:#000}
  #main-content{padding:0}
  .view{display:block!important}
  .recipe-grid{grid-template-columns:1fr 1fr}
  .card{break-inside:avoid;box-shadow:none;border:1px solid #ddd}
}