/* ═══════════════════════════════════════════════════
   Polo Wear — Garten Shopping
   Metáfora: etiqueta de roupa. Ilhós, fita, papel.
   ═══════════════════════════════════════════════════ */
:root{
  --marinho:#1B2A41;
  --tinta:#101820;
  --marfim:#F5F2EA;
  --papel:#FFFFFF;
  --linha:#E2DDD1;
  --verde:#2E6B4F;
  --ambar:#C8842B;
  --cinza:#6E7681;
  --vermelho:#9B2C2C;
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body,#root{height:100%}
body{
  background:var(--marfim);
  color:var(--tinta);
  font-family:'Inter',system-ui,sans-serif;
  font-size:16px;
  overscroll-behavior-y:contain;
}
.boot{display:grid;place-items:center;height:100vh;color:var(--cinza);font-size:14px}
.app{max-width:560px;margin:0 auto;min-height:100%;display:flex;flex-direction:column;
  background:var(--marfim);box-shadow:0 0 0 1px var(--linha)}

/* ── Cabeçalho ── */
.top{
  background:var(--marinho);color:var(--marfim);
  padding:18px 18px 15px;
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  position:relative;overflow:hidden;
}
/* marca d'água: os jogadores, discretos, no canto */
.top::after{
  content:"";position:absolute;right:-18px;top:50%;transform:translateY(-50%);
  width:104px;height:104px;
  background:url(logo-mark.png) center/contain no-repeat;
  opacity:.10;pointer-events:none;
}
.brand{display:flex;flex-direction:column;gap:6px;min-width:0;z-index:1}
.lockup{height:21px;width:auto;max-width:62vw;display:block}
.brandStore{
  font-family:'Archivo',sans-serif;font-weight:600;
  font-size:9.5px;letter-spacing:.17em;text-transform:uppercase;
  color:#93A1B3;padding-left:2px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.today{text-align:right;flex-shrink:0;z-index:1}
.todayLabel{display:block;font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:#7E8B9C}
.todayDate{display:block;font-size:13px;font-variant-numeric:tabular-nums;margin-top:2px}

/* ── Abas ── */
.tabs{display:flex;background:var(--marinho);border-top:1px solid rgba(255,255,255,.08)}
.tab{
  flex:1;background:none;border:none;cursor:pointer;
  padding:13px 0 12px;color:#8592A3;
  font-family:'Archivo',sans-serif;font-weight:600;
  font-size:12px;letter-spacing:.13em;text-transform:uppercase;
  border-bottom:3px solid transparent;transition:color .15s,border-color .15s;
}
.tab.on{color:var(--marfim);border-bottom-color:var(--ambar)}
.tab:focus-visible{outline:2px solid var(--ambar);outline-offset:-4px}

.body{flex:1;padding:16px 14px 28px;display:flex;flex-direction:column;gap:12px}
.empty{color:var(--cinza);text-align:center;padding:48px 20px;font-size:14px;line-height:1.6}

/* ══ A ETIQUETA — elemento-assinatura ══ */
.tag{
  position:relative;background:var(--papel);
  border:1px solid var(--linha);border-radius:4px;
  padding:16px 16px 14px 24px;
  transition:border-color .2s,box-shadow .2s;
}
.fita{position:absolute;left:0;top:0;bottom:0;width:8px;border-radius:4px 0 0 4px}
.tagVez{border-color:var(--verde);box-shadow:0 2px 0 var(--verde)}
.tagBusy{border-color:var(--ambar);background:#FFFDF8}
.tagFlash{animation:pulse .55s ease}
@keyframes pulse{0%,100%{box-shadow:0 2px 0 var(--verde)}45%{box-shadow:0 0 0 4px rgba(46,107,79,.18)}}

.tagHead{display:flex;align-items:center;gap:12px}
.grommet{
  position:absolute;left:24px;top:-1px;width:1px;height:0;
}
.pos{
  width:38px;height:38px;flex-shrink:0;
  display:grid;place-items:center;
  border:1.5px solid var(--linha);border-radius:50%;
  font-family:'Archivo',sans-serif;font-weight:800;font-size:16px;
  color:var(--cinza);background:var(--marfim);
  font-variant-numeric:tabular-nums;
}
.tagVez .pos{border-color:var(--verde);color:var(--verde)}
.tagBusy .pos{border-color:var(--ambar);color:var(--ambar);background:#FFF8EC}

.who{flex:1;min-width:0}
.nome{
  display:block;font-family:'Archivo',sans-serif;font-weight:700;
  font-size:16px;letter-spacing:.01em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.meta{display:flex;flex-wrap:wrap;align-items:center;gap:7px;
  font-size:11.5px;color:var(--cinza);margin-top:3px;font-variant-numeric:tabular-nums}
.vez{background:var(--verde);color:#fff;font-size:9px;font-weight:700;
  letter-spacing:.1em;padding:2px 6px;border-radius:2px}
.busy{background:#FBEFD9;color:#8A5A15;font-size:9.5px;font-weight:700;
  letter-spacing:.06em;padding:2px 6px;border-radius:2px;text-transform:uppercase}

.reorder{display:flex;flex-direction:column;gap:3px;flex-shrink:0}
.arrow{
  width:32px;height:24px;border:1px solid var(--linha);background:var(--marfim);
  border-radius:3px;cursor:pointer;color:var(--cinza);font-size:9px;line-height:1;
  display:grid;place-items:center;
}
.arrow:disabled{opacity:.28;cursor:default}
.arrow:not(:disabled):active{background:var(--linha)}

/* clientes abertos */
.clientes{display:flex;flex-direction:column;gap:8px;margin-top:14px}
.cliente{background:#FDF9F1;border:1px solid #EFE3CC;border-radius:3px;padding:10px 11px}
.cliHead{display:flex;align-items:baseline;gap:9px;margin-bottom:9px}
.cliNum{font-family:'Archivo',sans-serif;font-weight:700;font-size:11px;
  letter-spacing:.09em;text-transform:uppercase;color:#8A5A15}
.cliTime{font-size:11px;color:var(--cinza);font-variant-numeric:tabular-nums}
.cliBtns{display:grid;grid-template-columns:1fr 1fr 1fr;gap:6px}
.b{
  border:1px solid;border-radius:3px;cursor:pointer;padding:11px 4px;
  font-family:'Archivo',sans-serif;font-weight:700;font-size:11.5px;
  letter-spacing:.03em;background:var(--papel);
}
.b.conv{border-color:var(--verde);color:var(--verde)}
.b.conv:active{background:var(--verde);color:#fff}
.b.nao{border-color:var(--vermelho);color:var(--vermelho)}
.b.nao:active{background:var(--vermelho);color:#fff}
.b.sem{border-color:var(--ambar);color:#8A5A15}
.b.sem:active{background:var(--ambar);color:#fff}

.tagFoot{display:flex;gap:8px;margin-top:13px}
.atender{
  flex:1;background:var(--marinho);color:var(--marfim);border:none;border-radius:3px;
  padding:13px;cursor:pointer;
  font-family:'Archivo',sans-serif;font-weight:700;font-size:12.5px;
  letter-spacing:.06em;text-transform:uppercase;
}
.atender:active{background:#2A3D58}
.undo{width:46px;border:1px solid var(--linha);background:var(--papel);
  border-radius:3px;cursor:pointer;color:var(--cinza);font-size:16px}
.undo:active{background:var(--linha)}

.dots{display:flex;flex-wrap:wrap;gap:4px;margin-top:11px;padding-top:11px;border-top:1px dashed var(--linha)}
.dot{width:8px;height:8px;border-radius:50%;display:block}
.d-conv{background:var(--verde)}
.d-naoconv{background:#D6CFC2}
.d-semitem{background:var(--ambar)}

/* ── Resumo ── */
.segs{display:flex;border:1px solid var(--linha);border-radius:3px;overflow:hidden;background:var(--papel)}
.seg{flex:1;border:none;background:none;cursor:pointer;padding:11px 0;
  font-family:'Archivo',sans-serif;font-weight:600;font-size:12px;
  letter-spacing:.09em;text-transform:uppercase;color:var(--cinza)}
.seg.on{background:var(--marinho);color:var(--marfim)}

.chips{display:flex;gap:6px;overflow-x:auto;padding-bottom:2px;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chip{white-space:nowrap;border:1px solid var(--linha);background:var(--papel);
  border-radius:3px;padding:7px 12px;font-size:12px;cursor:pointer;color:var(--cinza);
  font-variant-numeric:tabular-nums}
.chip.on{border-color:var(--marinho);color:var(--marinho);font-weight:600}
.fiscalNote{font-size:11.5px;color:var(--cinza);text-align:center;letter-spacing:.02em}

.kpis{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.kpi{background:var(--papel);border:1px solid var(--linha);border-radius:3px;padding:13px 14px}
.kLab{display:block;font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--cinza)}
.kVal{display:block;font-family:'Archivo',sans-serif;font-weight:800;font-size:30px;
  margin-top:3px;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.green{color:var(--verde)} .amber{color:var(--ambar)}

.tab2{width:100%;border-collapse:collapse;background:var(--papel);
  border:1px solid var(--linha);border-radius:3px;font-variant-numeric:tabular-nums}
.tab2 th{font-family:'Archivo',sans-serif;font-size:9.5px;letter-spacing:.11em;
  text-transform:uppercase;color:var(--cinza);text-align:left;font-weight:600;
  padding:10px 11px;border-bottom:1px solid var(--linha)}
.tab2 td{padding:12px 11px;border-bottom:1px solid #F0ECE3;font-size:14px}
.tab2 tr:last-child td{border-bottom:none}
.tdNome{font-weight:600}
.empty2{color:var(--cinza);text-align:center;padding:26px !important;font-size:13px}

.exports{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:4px}
.exp{border:1px solid var(--marinho);background:var(--papel);color:var(--marinho);
  border-radius:3px;padding:13px;cursor:pointer;
  font-family:'Archivo',sans-serif;font-weight:700;font-size:11.5px;
  letter-spacing:.07em;text-transform:uppercase}
.exp:active{background:var(--marinho);color:var(--marfim)}

/* ── Equipe ── */
.eqTop{display:flex;justify-content:space-between;align-items:center}
.eqCount{font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--cinza)}
.add{background:var(--marinho);color:var(--marfim);border:none;border-radius:3px;
  padding:10px 16px;cursor:pointer;
  font-family:'Archivo',sans-serif;font-weight:700;font-size:11.5px;
  letter-spacing:.07em;text-transform:uppercase}
.addRow,.editRow{display:flex;gap:8px}
.inp{flex:1;border:1px solid var(--linha);border-radius:3px;padding:11px 12px;
  font-family:'Inter',sans-serif;font-size:15px;background:var(--papel);color:var(--tinta)}
.inp:focus{outline:2px solid var(--marinho);outline-offset:-1px;border-color:var(--marinho)}

.pessoa{position:relative;background:var(--papel);border:1px solid var(--linha);
  border-radius:4px;padding:15px 15px 14px 24px}
.pHead{margin-bottom:12px}
.pNome{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.link{background:none;border:none;color:var(--cinza);font-size:11.5px;cursor:pointer;
  text-decoration:underline;text-underline-offset:2px;padding:0;font-family:inherit}
.statusRow{display:flex;gap:6px;flex-wrap:wrap}
.st{border:1.5px solid var(--linha);background:var(--marfim);color:var(--cinza);
  border-radius:3px;padding:7px 13px;font-size:12px;cursor:pointer;
  font-family:'Archivo',sans-serif;font-weight:600}
.st.on{background:var(--papel);font-weight:700}
.hint{font-size:11px;color:var(--cinza);margin-top:9px;line-height:1.5}

.del{margin-top:13px;background:none;border:1px solid #E6D3D3;color:#A05252;
  border-radius:3px;padding:8px 13px;font-size:12px;cursor:pointer;font-family:inherit}
.del.yes{background:var(--vermelho);border-color:var(--vermelho);color:#fff;font-weight:600;margin:0}
.delRow{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-top:13px;font-size:13px}

.foot{padding:16px;text-align:center;font-size:10.5px;letter-spacing:.06em;
  color:var(--cinza);text-transform:uppercase;border-top:1px solid var(--linha)}

@media (prefers-reduced-motion:reduce){*{animation:none !important;transition:none !important}}
@media (max-width:360px){ .cliBtns{grid-template-columns:1fr 1fr} .b.sem{grid-column:1/-1} }

/* ── Tela de senha ── */
.login{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:14px;padding:40px 28px;background:var(--marinho);min-height:100vh;
}
.loginLogo{height:34px;width:auto;max-width:70vw;margin-bottom:2px}
.loginStore{
  font-family:'Archivo',sans-serif;font-weight:600;font-size:11px;
  letter-spacing:.22em;text-transform:uppercase;color:#93A1B3;margin-bottom:18px;
}
.loginInp{
  width:100%;max-width:280px;text-align:center;font-size:16px;
  background:var(--papel);border:1px solid #33445c;
}
.loginInp:focus{outline:2px solid var(--ambar);outline-offset:-1px;border-color:var(--ambar)}
.loginErro{color:#E7A0A0;font-size:12.5px;margin-top:-4px}
.loginBtn{
  width:100%;max-width:280px;background:var(--ambar);color:#1B140A;border:none;
  border-radius:3px;padding:14px;cursor:pointer;
  font-family:'Archivo',sans-serif;font-weight:700;font-size:13px;
  letter-spacing:.08em;text-transform:uppercase;
}
.loginBtn:disabled{opacity:.6;cursor:default}
.loginNota{color:#6E7C8E;font-size:11px;margin-top:6px;letter-spacing:.02em}




/* barra de aviso de conexão (Fase 1) */
.neterr{background:var(--vermelho);color:#fff;font-size:13px;font-weight:600;
  text-align:center;padding:8px 14px;cursor:pointer;letter-spacing:.02em}

/* login e sessão (Fase 2) */
.login{display:flex;align-items:center;justify-content:center;min-height:100vh;padding:24px;box-sizing:border-box}
.loginCard{width:100%;max-width:320px;display:flex;flex-direction:column;gap:12px;
  background:var(--papel);border:1px solid var(--linha);border-radius:16px;
  padding:30px 24px;box-shadow:0 10px 34px rgba(16,24,32,.10)}
.loginLogo{width:56px;height:56px;object-fit:contain;align-self:center}
.loginTitle{font-family:'Archivo',sans-serif;font-size:19px;color:var(--tinta);
  text-align:center;margin:2px 0 8px}
.loginInput{width:100%;padding:13px 14px;border:1px solid var(--linha);border-radius:10px;
  font-size:16px;font-family:inherit;color:var(--tinta);background:var(--papel);box-sizing:border-box}
.loginInput:focus{outline:none;border-color:var(--marinho)}
.loginErro{color:var(--vermelho);font-size:13px;margin:0;text-align:center}
.loginBtn{padding:13px;border:none;border-radius:10px;background:var(--marinho);color:#fff;
  font-weight:700;font-size:15px;cursor:pointer;font-family:inherit}
.loginBtn:disabled{opacity:.5;cursor:default}
.logout{background:none;border:none;color:inherit;text-decoration:underline;cursor:pointer;font:inherit;padding:0}
.footRole{text-transform:capitalize}