/* ───── TOKENS / TEMAS ───── */
  :root{
    --font-display:"Trebuchet MS","Avenir Next","Segoe UI",system-ui,sans-serif;
    --font-body:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
    --font-num:ui-monospace,"Cascadia Mono","SF Mono","Segoe UI Mono",Consolas,"Roboto Mono",monospace;

    --bg:#F4EFF6;
    --surface:#FBF9FD;
    --surface-2:#EDE6F2;
    --line:#D9D0E1;
    --line-strong:#C3B7CE;
    --ink:#2C2233;
    --ink-2:#5C5166;
    --ink-3:#8C8096;

    --primary:#5B0E77;
    --primary-deep:#460B5B;
    --on-primary:#FFFFFF;
    --primary-ink:#FFFFFF;
    --accent:#A419D7;

    --ok:#3A6F20;   --ok-bg:#EDF5E0;
    --warn:#A97013; --warn-bg:#F8EED3;
    --danger:#A9312E; --danger-bg:#F8E3E1;
    --info:#6B4B9B;  --info-bg:#ECE4F6;
    --blue:#1B5E8C;  --blue-bg:#E1EEF7;

    --focus:#8B16B6;
    --shadow:0 1px 2px rgba(44,34,51,.08),0 6px 18px -12px rgba(44,34,51,.25);
    --radius:10px;
    --toast-bg:#3A2F44; --toast-fg:#FFFFFF;
    --accent-glow:#C14DF7; --accent-glow-ink:#1E0727; --accent-glow-deep:#C963F8;
  }
  @media (prefers-color-scheme: dark){
    :root:not([data-theme]){ color-scheme:dark;
      --bg:#17131E;
      --surface:#201B29;
      --surface-2:#2B2436;
      --line:#3A3247;
      --line-strong:#4A3F5C;
      --ink:#EFE9F3;
      --ink-2:#BCB0C8;
      --ink-3:#91849C;

      --primary:#C076DB;
      --primary-deep:#B264CE;
      --primary-ink:#17131E;
      --accent:#C173DE;

      --ok:#77C851;   --ok-bg:#1D2E15;
      --warn:#E2B54F; --warn-bg:#322815;
      --danger:#F2A29B; --danger-bg:#3B2321;
      --info:#C7A5E0;  --info-bg:#2B2038;
      --blue:#6FB4E8;  --blue-bg:#1B2B38;

      --focus:#CE87E8;
      --shadow:0 1px 2px rgba(0,0,0,.4),0 8px 22px -14px rgba(0,0,0,.5);
      --toast-bg:#43384E; --toast-fg:#FFFFFF;
      --accent-glow:#CD7DF2; --accent-glow-ink:#1B0722; --accent-glow-deep:#D490F4;
    }
  }
  html[data-theme="dark"]{ color-scheme:dark;
    --bg:#17131E;--surface:#201B29;--surface-2:#2B2436;--line:#3A3247;--line-strong:#4A3F5C;
    --ink:#F2E9F3;--ink-2:#B6B0C8;--ink-3:#8E829C;
    --primary:#C076DB;--primary-deep:#B264CE;--primary-ink:#17131E;
    --accent:#C173DE;
    --ok:#77C851;--ok-bg:#1D2E15;--warn:#E2B54F;--warn-bg:#3B2815;--danger:#F2B2AB;--danger-bg:#3C2321;--info:#C3A5E0;--info-bg:#2B2038;--blue:#6FB4E8;--blue-bg:#1B2B38;
    --focus:#CE87E8;
    --shadow:0 1px 2px rgba(0,0,0,.4),0 8px 22px -14px rgba(0,0,0,.5);
    --toast-bg:#43384E; --toast-fg:#FFFFFF;
    --accent-glow:#CD7DF2; --accent-glow-ink:#1B0722; --accent-glow-deep:#D490F4;
  }
  html[data-theme="light"]{ color-scheme:light;
    --bg:#F4F0F6; --surface:#FBFAFD; --surface-2:#EDE6F2; --line:#D9D0E1; --line-strong:#C3B7CE;
    --ink:#2C2233;--ink-2:#5C5266;--ink-3:#8C8096;
    --primary:#5B0E77;--primary-deep:#460B5B;--primary-ink:#FFFFFF;
    --accent:#A419D7;
    --ok:#3A6F20;--ok-bg:#EDF5E0;--warn:#A97013;--warn-bg:#F8EED3;--danger:#B3262D;--danger-bg:#F8E3E1;--info:#6B4B9B;--info-bg:#ECE4F6;--blue:#1B5E8C;--blue-bg:#E1EEF7;
    --focus:#8B16B6;
    --shadow:0 1px 2px rgba(44,34,51,.08),0 6px 18px -12px rgba(44,34,51,.25);
    --toast-bg:#3A2F44; --toast-fg:#FFFFFF;
    --accent-glow:#C14DF7; --accent-glow-ink:#1E0727; --accent-glow-deep:#C963F8;
  }

  /* ─── base ─── */
  *{ box-sizing:border-box; }
  html,body{ margin:0; height:100%; }
  body{
    font-family:var(--font-body); color:var(--ink); background:var(--bg);
    font-size:15px; line-height:1.45; -webkit-font-smoothing:antialiased;
  }
  h1,h2,h3,h4{ font-family:var(--font-display); font-weight:700; color:var(--ink); margin:0; }
  button{ font:inherit; }
  .num, td.num, th.num, code{ font-family:var(--font-num); font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1; }
  :focus{ outline:none }
  :focus-visible{ outline:2px solid var(--focus); outline-offset:2px; border-radius:4px; }
  ::placeholder{ color:var(--ink-3); opacity:1; }
  @media (prefers-reduced-motion: reduce){
    *,*::before,*::after{ animation:none !important; transition:none !important; }
  }

  /* ─── barra do topo ─── */
  .appbar{
    display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:16px;
    padding:10px 18px; position:sticky; top:0; z-index:30;
    background:var(--surface); border-bottom:1px solid var(--line);
  }
  .brand{ display:flex; align-items:center; gap:10px; }
  .brand-mark{
    width:28px;height:28px;border-radius:8px;flex:0 0 auto;
    background:radial-gradient(circle at 34% 32%, rgba(255,255,255,.95) 0 2.4px, transparent 3px),
               radial-gradient(circle at 66% 40%, rgba(255,255,255,.75) 0 2.4px, transparent 3px),
               linear-gradient(135deg,var(--primary) 0%,var(--primary-deep) 100%);
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.25);
  }
  .brand-name{ font-family:var(--font-display); font-weight:700; font-size:17px; letter-spacing:.2px; }
  .brand-sub{ font-size:11.5px; color:var(--ink-2); font-weight:500; margin-top:-2px; }
  .appbar-ctrl{ display:flex; gap:10px; align-items:center; }
  .iconbtn{
    display:inline-flex; align-items:center; justify-content:center; gap:6px;
    min-height:42px; padding:0 14px; border-radius:8px; cursor:pointer;
    background:transparent; border:1px solid var(--line-strong); color:var(--ink);
    font-weight:600; font-size:13px; transition:background .15s, border-color .15s;
  }
  .iconbtn:hover{ background:var(--surface-2); }
  .iconbtn svg{ width:15px;height:15px; }

  main{ max-width:1180px; margin:0 auto; padding:18px 18px 60px; }
  .view{ display:none; }
  .view.active{ display:block; }

  /* ─── cabeçalho de área ─── */
  .view-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin:6px 0 16px; flex-wrap:wrap; }
  .view-title{ font-size:23px; }
  .view-desc{ color:var(--ink-2); font-size:13.5px; margin-top:2px; max-width:64ch; }
  .view-actions{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; }

  /* ─── botões (toque grande) ─── */
  .btn{
    display:inline-flex; align-items:center; gap:8px; cursor:pointer; font:inherit;
    font-weight:700; font-size:14px; padding:12px 16px; border-radius:var(--radius);
    border:1px solid transparent; transition:background .15s, box-shadow .15s, transform .05s;
  }
  .btn svg{ width:15px; height:15px; }
  .btn:active{ transform:translateY(1px); }
  .btn:disabled{ opacity:.45; cursor:not-allowed; box-shadow:none; transform:none; }
  .btn-primary{ background:var(--primary); color:var(--primary-ink); box-shadow:var(--shadow); }
  .btn-primary:hover{ background:var(--primary-deep); }
  .btn-glow{ background:var(--accent-glow); color:var(--accent-glow-ink); box-shadow:var(--shadow); }
  .btn-glow:hover{ background:var(--accent-glow-deep); }
  .btn-line{ background:transparent; border-color:var(--line-strong); color:var(--ink); }
  .btn-line:hover{ background:var(--surface-2); }
  .btn-ghost{ background:transparent; color:var(--primary); padding:8px 12px; }
  .btn-ghost:hover{ background:var(--surface-2); }
  .btn-danger{ background:var(--danger-bg); color:var(--danger); border-color:var(--danger); }
  .btn-danger:hover{ background:var(--danger); color:var(--danger-bg); }
  .btn-sm{ padding:8px 12px; font-size:13px; }

  /* ─── cards / KPIs ─── */
  .grid{ display:grid; gap:14px; }
  .grid-stats{ grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); }
  .grid-dois{ grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); }
  .card{
    background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
    box-shadow:var(--shadow); padding:16px;
  }
  .card-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:10px; flex-wrap:wrap; }
  .card-title{ font-family:var(--font-body); font-weight:800; font-size:12.5px; text-transform:uppercase; letter-spacing:.6px; color:var(--ink-2); }
  .kpi{ display:flex; flex-direction:column; gap:2px; }
  .kpi .label{ font-size:12px; color:var(--ink-2); font-weight:600; }
  .kpi .value{ font-family:var(--font-num); font-variant-numeric:tabular-nums; font-size:28px; font-weight:700; color:var(--ink); letter-spacing:-.5px; }
  .kpi .foot{ font-size:12px; color:var(--ink-3); }
  .kpis{ display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:10px; }
  .kmini{ padding:10px 12px; background:var(--surface-2); border-radius:8px; }
  .kmini .lbl{ font-size:11px; color:var(--ink-2); font-weight:600; }
  .kmini .vl{ font-family:var(--font-num); font-variant-numeric:tabular-nums; font-weight:700; font-size:18px; }
  .kmini .vl small{ font-size:11px; color:var(--ink-3); font-weight:500; }

  /* ─── pills / status ─── */
  .pill{
    display:inline-flex; align-items:center; gap:6px; padding:4px 10px; border-radius:999px;
    font-size:11.5px; font-weight:700; letter-spacing:.2px; white-space:nowrap;
  }
  .pill::before{ content:""; width:6px; height:6px; border-radius:50%; background:currentColor; }
  .pill--ok{ background:var(--ok-bg); color:var(--ok); }
  .pill--warn{ background:var(--warn-bg); color:var(--warn); }
  tr.linha-inativa td{ opacity:.55; } /* insumo inativado (INS-3) — visível, mas com destaque reduzido */
  .pill--danger{ background:var(--danger-bg); color:var(--danger); }
  .pill--info{ background:var(--info-bg); color:var(--info); }
  .pill--blue{ background:var(--blue-bg); color:var(--blue); }
  .pill--neutral{ background:var(--surface-2); color:var(--ink-2); }

  /* ─── tabelas ─── */
  .table-scroll{ overflow-x:auto; margin-inline:-4px; }
  table.data{ width:100%; border-collapse:collapse; font-size:13.5px; min-width:520px; }
  .data th{
    text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:.5px;
    color:var(--ink-2); font-weight:700; padding:8px 10px; border-bottom:1px solid var(--line-strong); white-space:nowrap;
  }
  .data td{ padding:10px 12px; border-bottom:1px solid var(--line); vertical-align:middle; }
  .data tbody tr{ transition:background .12s; }
  .data tbody tr:hover{ background:var(--surface-2); }
  .data td.num, .data th.num{ text-align:right; font-variant-numeric:tabular-nums; }
  .data tfoot td{ font-weight:700; border-top:2px solid var(--line-strong); background:var(--surface-2); }
  .data td.ref{ color:var(--ink-2); }

  /* ─── busca / lista de dias ─── */
  .search{
    display:flex; align-items:center; gap:8px; padding:10px 12px;
    border:1px solid var(--line-strong); border-radius:9px; background:var(--surface);
    min-width:min(340px,100%);
  }
  .search svg{ width:15px; height:15px; color:var(--ink-3); flex:0 0 auto; }
  .search input{ border:none; background:transparent; font:inherit; color:var(--ink); width:100%; padding:0; }
  .search input:focus{ outline:none; }
  .dia-card{ }
  .dia-card-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:10px; cursor:pointer; }
  .dia-card-title{ font-family:var(--font-display); font-size:16px; font-weight:700; }
  .dia-card-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:8px 14px; margin-top:10px; font-size:13.5px; }
  .dia-card-grid .lbl{ display:block; font-size:11px; color:var(--ink-3); font-weight:700; text-transform:uppercase; letter-spacing:.4px; margin-bottom:1px; }
  .dia-card-grid b{ color:var(--ink); }
  .dia-card-foot{ display:flex; justify-content:space-between; align-items:center; gap:10px; margin-top:10px; padding-top:10px; border-top:1px dashed var(--line); flex-wrap:wrap; }

  /* ─── formulário ─── */
  .form-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:12px; align-items:start; }
  .form-grid-2col{ display:grid; grid-template-columns:1fr 1fr; gap:12px; align-items:start; }
  .field{ display:flex; flex-direction:column; gap:5px; }
  .field label{ font-size:12.5px; font-weight:700; color:var(--ink-2); }
  .field input, .field select{
    font:inherit; padding:10px 12px; border:1px solid var(--line-strong); border-radius:8px;
    background:var(--surface); color:var(--ink); font-size:14.5px; width:100%;
  }
  .stack{ display:flex; flex-direction:column; gap:14px; }
  .hidden{ display:none !important; }
  .num-input{ width:110px; text-align:right; font-family:var(--font-num); font-variant-numeric:tabular-nums; padding:8px 10px; border:1px solid var(--line-strong); border-radius:7px; background:var(--surface); color:var(--ink); font-size:14px; }
  .txt-input{ width:100%; min-width:140px; font:inherit; padding:8px 10px; border:1px solid var(--line-strong); border-radius:7px; background:var(--surface); color:var(--ink); font-size:14px; } /* nome de insumo editável (INS-rename) */

  .rec-ig{ display:flex; gap:8px; align-items:center; margin-bottom:8px; flex-wrap:wrap; }
  .rec-ig select{ flex:1; min-width:0; }
  .rec-ig .num-input{ width:120px; flex-shrink:0; }
  .rec-ig .rec-prev{ flex-basis:100%; font-size:11px; color:var(--ink-3); } /* prévia da proporção por kg (REC-2) */
  .sec-subtitle{ display:flex; align-items:center; gap:8px; margin:14px 0 8px; font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--primary); } /* cabeçalho de subseção Métricas/Custos (MET-1) */
  .sec-subtitle::after{ content:''; flex:1; height:1px; background:var(--line); }
  .col-metric{ color:var(--ink-3); font-style:italic; } /* coluna métrica (sem R$) nas tabelas de custo (MET-1) */
  .kpi-sub{ font-size:11px; font-weight:400; letter-spacing:0; text-transform:none; color:var(--ink-3); margin-top:2px; } /* detalhamento por tamanho no KPI (MET-2) */

  .hint{ font-size:12px; color:var(--ink-3); }
  .toast{
    position:fixed; left:50%; bottom:22px; transform:translateX(-50%) translateY(120%);
    background:var(--toast-bg); color:var(--toast-fg); padding:12px 20px; border-radius:10px; font-size:14px; font-weight:600;
    box-shadow:var(--shadow); transition:transform .25s ease; z-index:60; max-width:88vw;
  }
  .toast.show{ transform:translateX(-50%) translateY(0); }

  /* ─── tela de login (decorativa — sem validação real, TROP-5) ─── */
  .login{
    position:fixed; inset:0; z-index:50; display:flex; align-items:center; justify-content:center;
    padding:20px; background:linear-gradient(160deg,#5B0E77 0%,#460B5B 130%);
  }
  .login-card{
    width:100%; max-width:360px; background:#FFFFFF; color:#2C2233; color-scheme:light;
    border-radius:14px; padding:30px 26px 26px; display:flex; flex-direction:column; gap:14px;
    box-shadow:0 24px 60px -22px rgba(0,0,0,.5);
  }
  .login-logo{ width:100%; max-width:225px; margin:0 auto 4px; }
  .login-sub{ text-align:center; font-size:12.5px; font-weight:600; color:#5C5166; margin-bottom:4px; letter-spacing:.3px; }
  .login-card .field label{ color:#2C2233; }
  .login-card input{
    font:inherit; padding:11px 12px; border:1px solid #C3B7CE; border-radius:8px;
    font-size:15px; width:100%; background:#FFFDFF; color:#2C2233;
  }
  .login-card input:focus{ outline:none; border-color:#5B0E77; }
  .login-card input:focus-visible{ outline:2px solid var(--focus); outline-offset:2px; }

  /* ─── grade de blocos de navegação (TROP-21 — blocos grandes no lugar das abas) ─── */
  .greet{
    display:flex; align-items:center; justify-content:center; gap:4px;
    padding:12px 18px 0; font-size:13px; font-weight:500; color:var(--ink-2);
  }
  .greet b{ color:var(--ink); font-weight:700; }
  .tab-grid{
    display:grid; grid-template-columns:repeat(5, minmax(0,1fr)); gap:10px;
    padding:14px 18px; background:var(--surface); border-bottom:1px solid var(--line);
  }
  .tab-block{
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:7px;
    background:var(--surface); border:1px solid var(--line); border-radius:12px;
    padding:16px 8px; cursor:pointer; font:inherit;
    color:var(--ink-2); transition:border-color .15s, background .15s, color .15s;
  }
  .tab-block svg{ width:26px; height:26px; color:var(--primary); }
  .tab-block .tab-lbl{ font-size:13.5px; font-weight:700; text-align:center; }
  .tab-block:hover{ border-color:var(--line-strong); color:var(--ink); }
  .tab-block.active{ border-color:var(--primary); color:var(--primary); background:var(--surface-2); }

  /* ─── grade de blocos de seção do dia (TROP-22 — hub em vez de rolagem única) ─── */
  .hub-grid{
    display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:10px;
    margin:14px 0 4px;
  }
  .hub-block{
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:7px;
    background:var(--surface); border:1px solid var(--line); border-radius:12px;
    padding:18px 10px 14px; cursor:pointer; font:inherit;
    color:var(--ink-2); transition:border-color .15s, background .15s, color .15s;
  }
  .hub-block svg{ width:27px; height:27px; color:var(--primary); }
  .hub-block .hub-lbl{ font-size:13.5px; font-weight:700; text-align:center; }
  .hub-st{ display:inline-flex; align-items:center; gap:5px; font-size:11.5px; font-weight:700; margin-top:2px; }
  .hub-st svg{ width:13px; height:13px; }
  .hub-block:hover{ border-color:var(--line-strong); color:var(--ink); }
  .hub-block.preenchida .hub-st{ color:var(--ok); }
  .hub-block.vazia .hub-st{ color:var(--ink-3); }
  .secao-card .card-head{ flex-wrap:wrap; }
  .secao-card .card-head .btn{ margin-left:auto; }


  /* ─── seletor de agrupamento (dia/mês/lote) ─── */
  .seg{ display:inline-flex; border:1px solid var(--line-strong); border-radius:9px; overflow:hidden; background:var(--surface); }
  .seg-btn{
    font:inherit; font-size:13px; font-weight:700; color:var(--ink-2);
    background:transparent; border:none; cursor:pointer; padding:8px 16px; border-left:1px solid var(--line);
  }
  .seg-btn:first-child{ border-left:none; }
  .seg-btn:hover{ color:var(--ink); }
  .seg-btn.active{ background:var(--primary); color:var(--primary-ink); }

  /* ─── chips de responsável (Equipe) ─── */
  .chipzone{ display:flex; flex-wrap:wrap; gap:6px; min-height:36px; align-items:center; }
  /* ".field input{ width:100% }" (seletor descendente, mais acima no arquivo)
     também pega qualquer checkbox/radio aninhado dentro de um .field — caso
     do checkbox de "Tipo de produto" (Pesagem em Esteira), que fica dentro de
     .chipzone dentro de .field. width:100% num input dentro de um label flex
     cujo próprio tamanho depende do conteúdo é uma dependência circular que
     Chromium e WebKit resolvem de jeitos diferentes (só quebra no Safari/iOS
     real, nunca no Chrome nem no modo inspecionar). Esta regra tem
     especificidade MAIOR que ".field input" (2 classes vs. 1 classe + tipo),
     então vence sempre, não depende de ordem no arquivo. */
  .chipzone input[type="checkbox"], .chipzone input[type="radio"]{ width:auto; flex:0 0 auto; }
  .chip{
    display:inline-flex; align-items:center; gap:6px; padding:5px 10px; border-radius:999px;
    background:var(--surface-2); border:1px solid var(--line); font-size:12.5px; font-weight:600;
  }
  .chip button{
    border:none; background:none; color:var(--ink-3); cursor:pointer; font-size:14px; padding:0 3px; line-height:1;
  }
  .chip button:hover{ color:var(--danger); }
  .addperson{ display:flex; gap:6px; align-items:center; min-width:0; }
  .addperson select{ flex:1; min-width:0; }

  /* ─── bloco de batidas (formulário) ─── */
  .batida{ border:1px solid var(--line); border-radius:10px; padding:12px; background:var(--surface); }
  .batida-head{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; justify-content:space-between; margin-bottom:10px; }
  .batida-title{ font-family:var(--font-display); font-weight:700; font-size:14.5px; color:var(--primary); }
  .batida-head select{ padding:8px 10px; border:1px solid var(--line-strong); border-radius:7px; background:var(--surface); color:var(--ink); font:inherit; font-size:13.5px; max-width:230px; }
  .batida-head .num-input{ width:150px; }
  .bt-row{ display:grid; grid-template-columns:1.5fr 1fr 1fr; gap:8px; align-items:center; padding:6px 0; border-bottom:1px dashed var(--line); }
  .bt-row-4{ grid-template-columns:1fr 1fr 1fr auto; } /* Resultado: embalagem · lote · qtd · remover (4 colunas) — sem style inline p/ a media query poder colapsar */
  .bt-row:last-child{ border-bottom:none; }
  .bt-row .bt-ig{ font-size:13.5px; font-weight:600; }
  .bt-row input, .bt-row select{
    font:inherit; font-family:var(--font-num); font-variant-numeric:tabular-nums;
    width:100%; padding:8px 10px; text-align:right; font-size:14px;
    border:1px solid var(--line-strong); border-radius:7px; background:var(--surface); color:var(--ink);
  }
  .bt-row .bt-lote{ text-align:left; }
  .bt-row--sem-lote{ grid-template-columns:1.5fr 1fr; } /* ingrediente sem lote (ex.: Água) — BAT-1 */
  .bt-ref{ font-size:11.5px; color:var(--ink-3); font-weight:500; }
  .addrow{
    display:inline-flex; align-items:center; gap:6px; margin-top:10px;
    font-size:13px; font-weight:700; color:var(--primary);
    background:none; border:1px dashed var(--line-strong); border-radius:8px; padding:8px 12px; cursor:pointer;
  }
  .addrow:hover{ background:var(--surface-2); }
  .addrow svg{ width:14px; height:14px; }

  /* ─── linha de custo (resumo) ─── */
  .linha-custo{ display:flex; flex-wrap:wrap; gap:8px 18px; font-size:13.5px; color:var(--ink-2); background:var(--surface-2); border-radius:8px; padding:10px 12px; }
  .linha-custo b{ color:var(--ink); font-family:var(--font-num); }
  .aviso{
    display:flex; gap:10px; align-items:flex-start; font-size:13px; color:var(--warn);
    background:var(--warn-bg); border:1px solid var(--line-strong); border-radius:8px; padding:10px 12px; margin-bottom:12px;
  }

  @media (max-width: 860px){
    .appbar{ grid-template-columns:auto auto; padding:8px 12px; }
    .view-head{ align-items:flex-start; flex-direction:column; }
    .data{ font-size:13.2px; }
  }
  @media (max-width: 560px){
    body{ font-size:14.5px; }
    main{ padding:14px 12px 70px; }
    .brand-sub{ display:none; }
    .kpi .value{ font-size:24px; }
    .tab-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); padding:12px; gap:8px; }
    .tab-block{ padding:13px 8px; }
    .hub-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); gap:8px; }
    .hub-block{ padding:14px 8px 12px; }
    .form-grid-2col{ grid-template-columns:1fr; }
    .login-card{ padding:24px 20px 22px; }
    .view-actions{ width:100%; }
    .view-actions .search{ flex:1; }
    .bt-row{ grid-template-columns:1fr 1fr; }
    .bt-row .bt-ig{ grid-column:1/-1; }
    .bt-row--sem-lote{ grid-template-columns:1fr; } /* BAT-1 */
    .bt-row-4{ grid-template-columns:1fr 1fr; } /* Resultado no mobile: 2 colunas, sem scroll horizontal */
    .bt-row-4 .bt-r-emb{ grid-column:1/-1; } /* embalagem (1º campo) ocupa a linha toda, como .bt-ig nas batidas */
    .kmini-full{ grid-column:1/-1; } /* KPI "Embalagens envasadas" ocupa a linha toda no mobile (legenda por tamanho mais larga que os demais cards) */
  }

  /* ─── telas estreitas (≤640px): sem tabela larga, sem rolagem horizontal ───
     No desktop estas regras não existem — as tabelas continuam como estão.
     Padrão .tbl-cards: toda tabela larga vira um card por linha (labels via data-label). */
  @media (max-width: 640px){
    .table-scroll{ overflow-x:visible; margin-inline:0; }

    table.data.tbl-cards, .tbl-cards tbody, .tbl-cards tfoot{ display:block; width:100%; min-width:0; }
    .tbl-cards thead{ display:none; }
    .tbl-cards tbody tr, .tbl-cards tfoot tr{
      display:block; border:1px solid var(--line); border-radius:10px; background:var(--surface);
      margin-bottom:8px; padding:6px 12px; box-shadow:var(--shadow);
    }
    .tbl-cards tbody tr:hover{ background:var(--surface); }
    .tbl-cards td{
      display:flex; justify-content:space-between; align-items:center; gap:12px;
      border:none; border-bottom:1px dashed var(--line); padding:7px 2px; text-align:right;
    }
    .tbl-cards td::before{
      content:attr(data-label); font-size:12px; font-weight:600; color:var(--ink-2); text-align:left;
    }
    .tbl-cards tbody tr td:first-child{
      display:block; font-weight:800; font-size:14.5px; color:var(--ink);
      border-bottom:2px solid var(--line-strong); padding:5px 2px 7px;
    }
    .tbl-cards tbody tr td:first-child::before{ content:none; }
    .tbl-cards td:last-child{ border-bottom:none; }
    .tbl-cards tfoot tr{ padding:8px 12px; }
    .tbl-cards tfoot td{ display:none; border:none; }
    .tbl-cards tfoot td.keep{ display:flex; font-size:13px; }

    /* Célula "Componentes" (Insumos, embalagem em edição): chips + select +
       botão não cabem espremidos ao lado do label na mesma linha como as
       outras células (texto/número curto) — vira coluna cheia (label em
       cima, controles embaixo) em vez do padrão space-between horizontal.
       Sem isso, o <select> força a célula pra fora da viewport mesmo com
       min-width:0 em cascata (célula real: 626px de scrollWidth em 390px
       de tela). */
    .tbl-cards td.td-componentes{
      flex-direction:column; align-items:stretch; text-align:left; gap:6px;
    }
  }

  /* ─── impressão (Exportar PDF — Pesagem em Esteira) ─── */
  @media print {
    body *{ visibility:hidden; }
    #pesPrintArea, #pesPrintArea *{ visibility:visible; }
    #pesPrintArea{ position:absolute; left:0; top:0; width:100%; padding:20px; }
    .no-print{ display:none !important; }
  }

  /* ─── modal do teclado numérico grande (Pesagem em Esteira) ─── */
  .modal-overlay{
    position:fixed; inset:0; z-index:55; display:flex; align-items:center; justify-content:center;
    padding:16px; background:rgba(23,19,30,.55);
  }
  .modal-teclado{
    width:100%; max-width:380px; background:var(--surface); border-radius:16px;
    padding:18px; display:flex; flex-direction:column; gap:12px; box-shadow:var(--shadow);
  }
  .modal-teclado-head{ display:flex; align-items:center; justify-content:space-between; }
  .modal-teclado-title{ font-family:var(--font-display); font-weight:700; font-size:16px; color:var(--ink); }
  .seg-esteiras{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); width:100%; }
  .seg-esteiras .seg-btn{ padding:10px 4px; text-align:center; }
  .teclado-preview{
    text-align:center; font-family:var(--font-num); font-size:34px; font-weight:700; color:var(--ink);
    background:var(--surface-2); border-radius:12px; padding:14px 8px; letter-spacing:.5px;
  }
  .teclado-grid{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:10px; }
  /* touch-action:manipulation em botões de toque rápido repetido (teclado
     numérico) — remove a espera de ~300ms que o Safari/iOS usa por padrão
     pra checar se o toque é o início de um double-tap-to-zoom. Cliente
     reportou lentidão ("2s por tecla") só no iPhone real — isso não some o
     atraso sozinho (2s é grande demais pra explicar só com isso), mas é uma
     correção segura e sem efeito colateral enquanto se investiga a causa
     completa com dado real de dispositivo (Safari Web Inspector). */
  .seg-esteiras .seg-btn{ touch-action:manipulation; }
  .teclado-btn{
    touch-action:manipulation;
    font:inherit; font-size:24px; font-weight:700; color:var(--ink);
    background:var(--surface-2); border:1px solid var(--line); border-radius:12px;
    padding:18px 0; cursor:pointer; display:flex; align-items:center; justify-content:center;
  }
  .teclado-btn:hover{ border-color:var(--line-strong); }
  .teclado-btn svg{ width:22px; height:22px; }
  .teclado-btn--acao{ color:var(--danger); }
  .teclado-btn--ok{ background:var(--primary); border-color:var(--primary); color:var(--primary-ink); }
  .teclado-btn--ok:hover{ background:var(--primary-deep); }
  .teclado-btn--ok:disabled{ background:var(--surface-2); border-color:var(--line); color:var(--ink-3); cursor:not-allowed; }

  /* ─── desktop (>640px): coluna Ação da tabela de Insumos sempre visível ───
     A #insTable tem 7 colunas e rola na horizontal (.table-scroll) quando não
     cabe na tela — a coluna Ação (última: Editar/Inativar/Excluir, e
     Salvar/Cancelar em edição) ficava fora da viewport à direita, e o usuário
     não achava o Salvar ao editar embalagem com componentes (a célula
     Componentes em edição é a mais larga da tabela). Sticky só aqui: demais
     tabelas, mobile (cards ≤640px) e impressão intactos. */
  @media (min-width: 641px){
    #insTable th:last-child, #insTable td:last-child{
      position:sticky; right:0; z-index:2;
      background:var(--surface);
      box-shadow:-8px 0 8px -8px rgba(0,0,0,.25);
    }
    #insTable thead th:last-child{ z-index:3; }
    #insTable tbody tr:hover td:last-child{ background:var(--surface-2); }
  }