/* PDV Total — operational workspace
   This layer intentionally stays isolated from the public homepage and POS station. */

.app-body {
  /* Mesma armadilha do caixa: o :root do styles.css declara `color-scheme:
     dark` para a home escura, e a retaguarda e' clara. Sem esta linha, todo
     campo sem `color` explicito era desenhado com texto branco sobre branco
     — invisivel para quem digita. */
  color-scheme: light;
  --app-ink: #102a2c;
  --app-green: #08756c;
  --app-green-dark: #075d57;
  --app-mint: #dff2ed;
  --app-paper: #f6f7f3;
  --app-warm: #f4efe5;
  --app-line: #d9e2df;
  --app-orange: #e7633c;
  margin: 0;
  background: var(--app-paper);
  color: var(--app-ink);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* O reset existe para o controle não usar a fonte do SISTEMA — e só isso.
   Ele não pode carregar o TAMANHO junto: este arquivo carrega depois do
   styles.css e empata em especificidade com as regras de componente, então
   "font: inherit" apagava o tamanho de todo campo e botão da retaguarda.
   Um campo dentro de um rótulo de 8px virava um campo de 8px, e o dono
   digitava o nome da funcionária em letra de bula. (Mesma armadilha já
   paga no PDV com .cx-body input.) */
.app-body button,
.app-body select,
.app-body input,
.app-body textarea { font-family: inherit; font-weight: inherit; }

.app-body button,
.app-body a { -webkit-tap-highlight-color: transparent; }
.app-body :is(a, button, input, select, textarea, summary):focus-visible {
  outline: 3px solid var(--app-orange);
  outline-offset: 2px;
}

.pdv-brand-mark {
  position: relative;
  display: inline-block;
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  overflow: hidden;
  border-radius: 6px;
  background: var(--app-green);
}

.pdv-brand-mark i {
  position: absolute;
  left: 9px;
  width: 25px;
  height: 4px;
  transform: skewX(-29deg);
  border-radius: 1px;
  background: #fff;
}

.pdv-brand-mark i:nth-child(1) { top: 9px; }
.pdv-brand-mark i:nth-child(2) { top: 17px; width: 19px; }
.pdv-brand-mark i:nth-child(3) { top: 25px; width: 13px; }

/* Protected access */
.app-body > .public-page {
  position: relative;
  display: grid;
  width: 100%;
  min-height: 100vh;
  margin: 0;
  padding: 0;
  place-items: center;
  overflow: hidden;
  background:
    linear-gradient(112deg, rgba(7, 93, 87, .97) 0 45%, rgba(16, 42, 44, .98) 45% 100%);
}

.app-body > .public-page::before {
  position: absolute;
  inset: 0 50% 0 0;
  background:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 42px 42px;
  content: "";
  mask-image: linear-gradient(to bottom right, #000, transparent 78%);
}

.app-access-bar {
  position: absolute;
  z-index: 2;
  inset: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 26px 34px;
  border: 0;
  background: transparent;
}

.app-access-brand {
  display: flex;
  align-items: center;
  gap: 11px;
  color: #fff;
  text-decoration: none;
}

.app-access-brand .pdv-brand-mark { background: #fff; }
.app-access-brand .pdv-brand-mark i { background: var(--app-green); }
.app-access-brand > span:last-child { display: flex; flex-direction: column; }
.app-access-brand strong { font-size: 1.0625rem; letter-spacing: -.02em; }
.app-access-brand small { margin-top: 1px; color: rgba(255,255,255,.62); font-size: 0.5625rem; letter-spacing: .04em; }
.app-access-bar .environment {
  padding: 8px 12px;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 4px;
  color: rgba(255,255,255,.78);
  font-size: 0.625rem;
  font-weight: 750;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.app-body .app-access-panel {
  position: relative;
  z-index: 1;
  display: flex;
  width: min(470px, calc(100% - 36px));
  min-height: 230px;
  align-items: flex-start;
  justify-content: center;
  gap: 26px;
  margin: 70px 0 0 40%;
  padding: 40px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 8px;
  background: #fff;
  color: var(--app-ink);
  box-shadow: 0 30px 90px rgba(0,0,0,.24);
}

.app-access-panel h2 { margin: 8px 0 10px; color: var(--app-ink); font-size: 1.875rem; letter-spacing: -.035em; }
.app-access-panel p:not(.eyebrow) { max-width: 330px; margin: 0; color: #60716f; font-size: 0.8125rem; line-height: 1.55; }
.app-access-panel .eyebrow { color: var(--app-green); }

/* Tela do código num terminal de estoque, cozinha ou gerência. É a mesma
   cena do balcão: ninguém digita e-mail nem senha na máquina da loja. O
   campo é grande de propósito — dedo de quem está trabalhando, não mouse. */
.app-body .terminal-pin-panel { flex-direction: column; align-items: stretch; gap: 18px; }
.terminal-pin-form { display: grid; gap: 12px; }
.terminal-pin-form label {
  display: grid;
  gap: 6px;
  color: #667975;
  font-size: 0.625rem;
  font-weight: 850;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.terminal-pin-form input {
  /* Campo grande estoura o cartão sozinho: o input tem largura intrínseca
     de 20 caracteres na fonte dele, e item de grid não encolhe abaixo do
     min-content sem isto. */
  width: 100%;
  min-width: 0;
  height: 62px;
  padding: 0 16px;
  border: 1px solid #cfdad7;
  border-radius: 6px;
  background: #fff;
  color: var(--app-ink);
  font-size: 2.125rem;
  font-weight: 800;
  letter-spacing: .34em;
  text-align: center;
}
.terminal-pin-form input:focus-visible {
  border-color: var(--app-green);
  outline: 3px solid rgba(8,117,108,.14);
}
.terminal-pin-form .primary-button { min-height: 52px; font-size: 0.8125rem; }
/* Chave de política: o rótulo inteiro é área de clique, porque quem liga
   isso está decidindo se a equipe vai precisar de celular para trabalhar. */
.team-switch {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid #dbe4ea;
  border-radius: 9px;
  background: #fff;
  color: var(--app-ink);
  font-size: 0.8125rem;
  cursor: pointer;
}
.team-switch input { width: 18px; height: 18px; accent-color: var(--app-green); }

.terminal-pin-erro {
  margin: 0;
  padding: 10px 12px;
  border: 1px solid #fca5a5;
  border-radius: 6px;
  background: #fef2f2;
  color: #b91c1c;
  font-size: 0.8125rem;
}
.app-access-panel .primary-button {
  min-height: 44px;
  margin-top: 22px;
  padding: 0 19px;
  border-color: var(--app-green);
  border-radius: 4px;
  background: var(--app-green);
  color: #fff;
  white-space: nowrap;
}
.app-access-panel .primary-button:hover { background: var(--app-green-dark); }

/* Signed-in application shell */
.app-body .erp-shell { min-height: 100vh; background: var(--app-paper); color: var(--app-ink); }

.app-body .erp-sidebar {
  width: 236px;
  padding: 0;
  border-right: 1px solid rgba(255,255,255,.08);
  background: var(--app-ink);
  color: #e9f2ef;
  box-shadow: none;
}

.app-body .sidebar-brand {
  display: flex;
  min-height: 72px;
  align-items: center;
  gap: 10px;
  padding: 0 19px;
  border-bottom: 1px solid rgba(255,255,255,.09);
  color: #fff;
  text-decoration: none;
}

.app-body .sidebar-brand .pdv-brand-mark { width: 34px; height: 34px; background: var(--app-green); }
.app-body .sidebar-brand .pdv-brand-mark i { left: 8px; width: 22px; height: 3px; }
.app-body .sidebar-brand .pdv-brand-mark i:nth-child(1) { top: 8px; }
.app-body .sidebar-brand .pdv-brand-mark i:nth-child(2) { top: 16px; width: 17px; }
.app-body .sidebar-brand .pdv-brand-mark i:nth-child(3) { top: 24px; width: 12px; }
.sidebar-wordmark { display: flex; flex-direction: column; }
.app-body .sidebar-wordmark strong { color: #fff; font-size: 1rem; letter-spacing: -.02em; }
.app-body .sidebar-wordmark small { margin-top: 1px; color: rgba(255,255,255,.6); font-size: 0.625rem; font-weight: 600; letter-spacing: .035em; }

.sidebar-open-pos {
  position: relative;
  display: flex;
  min-height: 65px;
  flex-direction: column;
  justify-content: center;
  margin: 14px 12px 7px;
  padding: 11px 48px 11px 14px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 6px;
  background: var(--app-green);
  color: #fff;
  text-decoration: none;
}

.sidebar-open-pos:hover { background: #09877c; }
.sidebar-open-pos span { color: #a9ddd7; font-size: 0.5rem; font-weight: 850; letter-spacing: .12em; }
.sidebar-open-pos strong { margin-top: 3px; font-size: 0.875rem; }
.sidebar-open-pos > i {
  position: absolute;
  right: 12px;
  display: grid;
  width: 26px;
  height: 26px;
  place-items: center;
  border: 1px solid rgba(255,255,255,.3);
  border-bottom-width: 2px;
  border-radius: 4px;
  background: rgba(0,0,0,.12);
  color: #fff;
  font: normal 700 13px/1 inherit;
}

.app-body .module-nav { padding: 0 10px 12px; scrollbar-color: rgba(255,255,255,.16) transparent; }
.app-body .nav-section-label { margin: 18px 10px 6px; color: #66807d; font-size: 0.5rem; letter-spacing: .15em; }
.app-body .nav-item {
  min-height: 38px;
  grid-template-columns: 25px 1fr auto;
  gap: 8px;
  margin: 1px 0;
  padding: 5px 9px;
  border: 0;
  border-left: 2px solid transparent;
  border-radius: 3px;
  color: #9fb1ae;
  font-size: 0.6875rem;
  font-weight: 650;
}

.app-body .nav-item:hover { background: rgba(255,255,255,.055); color: #fff; }
.app-body .nav-item.is-active { border-left-color: #55b6a9; background: rgba(223,242,237,.09); color: #fff; }
.app-body .nav-item-pdv { display: none; }
.app-body .nav-icon {
  width: 23px;
  height: 23px;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 3px;
  background: transparent;
  color: #79938f;
  font-size: 0.4375rem;
}
.app-body .nav-item.is-active .nav-icon { border-color: rgba(85,182,169,.34); background: #174440; color: #b5e5df; }
.app-body .blocked-badge { padding: 3px 4px; border-radius: 2px; background: rgba(231,99,60,.14); color: #f3a68f !important; font-size: 0.375rem !important; }

.app-body .sidebar-foot { margin: 0 12px; padding: 13px 6px 15px; border-color: rgba(255,255,255,.09); }
.app-body .sidebar-foot strong { color: #b6c6c3; font-size: 0.5625rem; }
.app-body .sidebar-foot div span { color: #6d8581; font-size: 0.5rem; }
.app-body .secure-pulse { width: 7px; height: 7px; background: #5ac6a3; box-shadow: 0 0 0 4px rgba(90,198,163,.1); }

.app-body .erp-main { min-height: 100vh; margin-left: 236px; background: var(--app-paper); }
.app-body .workspace-topbar {
  position: sticky;
  z-index: 15;
  top: 0;
  min-height: 64px;
  padding: 8px 24px;
  border-bottom: 1px solid var(--app-line);
  background: rgba(255,255,255,.96);
  color: var(--app-ink);
  backdrop-filter: blur(12px);
}

.app-body .context-pickers { gap: 6px; }
.app-body .context-pickers label { color: #758683; font-size: 0.4375rem; letter-spacing: .1em; }
.app-body .context-pickers select {
  min-width: 120px;
  max-width: 190px;
  margin-top: 1px;
  color: var(--app-ink);
  font-size: 0.6875rem;
  font-weight: 760;
}
.app-body .picker-separator { color: #bdc9c6; }
.operation-online { display: flex; align-items: center; gap: 7px; color: #647875; font-size: 0.5625rem; font-weight: 700; }
.operation-online span { width: 7px; height: 7px; border-radius: 50%; background: #35a97b; box-shadow: 0 0 0 3px rgba(53,169,123,.11); }
.app-body .user-area { margin-left: auto; gap: 8px; }
.app-body .user-avatar { width: 31px; height: 31px; border-radius: 4px; background: var(--app-mint); color: var(--app-green); font-size: 0.5rem; }
.app-body .user-copy { min-width: 100px; }
.app-body .user-copy strong { color: var(--app-ink); font-size: 0.625rem; }
.app-body .user-copy span { color: #869592; font-size: 0.5rem; }
.app-body .logout-button { border-color: var(--app-line); border-radius: 4px; color: #617370; font-size: 0.5625rem; }

.app-body .workspace-content { width: min(1320px, calc(100% - 44px)); padding: 26px 0 52px; color: var(--app-ink); }
.app-body .workspace-heading { align-items: stretch; }
.app-body .workspace-heading > div { align-self: center; }
.app-body .workspace-heading h1 { color: var(--app-ink); font-size: clamp(1.5625rem, 3vw, 2.25rem); letter-spacing: -.035em; }
.app-body .workspace-heading p:not(.eyebrow) { margin-top: 7px; color: #687b78; font-size: 0.75rem; }
.app-body .workspace-heading .eyebrow { margin-bottom: 7px; color: var(--app-green); font-size: 0.5rem; letter-spacing: .13em; }

.heading-pos-action {
  display: flex;
  width: min(330px, 34vw);
  min-height: 92px;
  flex-direction: column;
  justify-content: center;
  padding: 15px 52px 15px 18px;
  border: 0;
  border-left: 5px solid var(--app-orange);
  border-radius: 4px;
  background: var(--app-ink);
  color: #fff;
  text-decoration: none;
  box-shadow: 0 8px 25px rgba(16,42,44,.13);
}
.heading-pos-action:hover { background: #173638; }
.heading-pos-action span { color: #78c8bd; font-size: 0.4375rem; font-weight: 850; letter-spacing: .14em; }
.heading-pos-action strong { margin-top: 5px; font-size: 0.9375rem; }
.heading-pos-action small { margin-top: 5px; color: #9cb0ad; font-size: 0.5625rem; }
.heading-pos-action b { color: #fff; font-size: 0.75rem; }

.app-body .dashboard-status { margin: 15px 0 10px; border-radius: 3px; font-size: 0.625rem; }
.app-body .metric-grid { grid-template-columns: 1.25fr repeat(4, 1fr); gap: 8px; }
.app-body .metric-card {
  position: relative;
  min-height: 105px;
  padding: 16px;
  overflow: hidden;
  border: 1px solid var(--app-line);
  border-radius: 4px;
  background: #fff;
  box-shadow: none;
}
.app-body .metric-card::before { position: absolute; inset: 0 0 auto; height: 2px; background: #c4d5d1; content: ""; }
.app-body .metric-card > span { color: #6e807d; font-size: 0.5rem; letter-spacing: .08em; }
.app-body .metric-card > strong { margin: 12px 0 3px; color: var(--app-ink); font-size: clamp(1.25rem, 2vw, 1.6875rem); }
.app-body .metric-card small { color: #8b9996; font-size: 0.5rem; }
.app-body .metric-primary { border-color: #bddbd4; background: linear-gradient(120deg, #fff, #f1f9f6); }
.app-body .metric-primary::before { background: var(--app-green); }
.app-body .metric-primary > strong { color: var(--app-green-dark); }

.operation-shortcuts {
  display: flex;
  min-height: 48px;
  align-items: center;
  gap: 0;
  margin-top: 8px;
  padding: 0 12px;
  border: 1px solid var(--app-line);
  border-radius: 4px;
  background: #fff;
}
.operation-shortcuts > span { margin-right: 12px; color: #82918e; font-size: 0.5rem; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; }
.operation-shortcuts button {
  min-height: 30px;
  padding: 0 13px;
  border: 0;
  border-left: 1px solid #e5ebe9;
  background: transparent;
  color: #435a57;
  font-size: 0.5625rem;
  font-weight: 700;
}
.operation-shortcuts button:hover { color: var(--app-green); }
.operation-shortcuts b { margin-right: 5px; color: var(--app-green); }

.app-body .dashboard-grid { grid-template-columns: 1.15fr .85fr; gap: 8px; margin-top: 8px; }
.app-body .dashboard-card,
.app-body .catalog-view:not(.pdv) .dashboard-card {
  padding: 18px;
  border: 1px solid var(--app-line);
  border-radius: 4px;
  background: #fff;
  color: var(--app-ink);
  box-shadow: none;
}
.app-body .first-steps { grid-row: span 2; }
.app-body .card-heading { padding-bottom: 12px; border-bottom: 1px solid #e8edeb; }
.app-body .card-heading span { color: #7c8e8b; font-size: 0.4375rem; letter-spacing: .13em; }
.app-body .card-heading h2 { margin-top: 4px; color: var(--app-ink); font-size: 0.9375rem; }
.app-body .card-heading > strong { color: var(--app-green); }
.app-body .status-chip { border-radius: 3px; background: var(--app-mint); color: var(--app-green-dark) !important; font-size: 0.4375rem !important; }
.app-body .first-steps-list { margin-top: 4px; }
.app-body .first-steps-list li { padding: 14px 0; border-bottom: 1px solid #edf0ee; }
.app-body .first-steps-list li:last-child { border-bottom: 0; }
.app-body .first-step-link { color: var(--app-ink); font-size: 0.6875rem; }
.app-body .first-step-link:hover { color: var(--app-green); }
.app-body .first-steps-list li > span { color: #7b8b88; font-size: 0.5625rem; }
.app-body .organization-body { margin: 16px 0; }
.app-body .company-monogram { width: 40px; height: 40px; border-radius: 4px; background: var(--app-mint); color: var(--app-green); font-size: 0.6875rem; }
.app-body .organization-body strong { color: var(--app-ink); font-size: 0.6875rem; }
.app-body .organization-body span { color: #758683; font-size: 0.5625rem; }
.app-body .context-proof { padding: 11px; border-radius: 3px; background: #f2f6f4; }
.app-body .context-proof p { color: #71817e; font-size: 0.5625rem; }
.app-body .context-proof strong { color: #405653; }

/* POS command center: inspired by real checkout terminals, not SaaS dashboards. */
.command-center-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  padding: 0 0 17px;
  border-bottom: 1px solid var(--app-line);
}
.command-center-head h1 { margin: 0; color: var(--app-ink); font-size: clamp(1.5rem, 3vw, 2.125rem); letter-spacing: -.035em; }
.command-center-head p:not(.eyebrow) { margin: 6px 0 0; color: #687b78; font-size: 0.6875rem; }
.command-center-head .eyebrow { margin: 0 0 6px; color: var(--app-green); font-size: 0.4375rem; font-weight: 850; letter-spacing: .15em; }
.command-head-state {
  display: grid;
  min-width: 190px;
  grid-template-columns: 8px 1fr;
  gap: 2px 9px;
  padding: 10px 13px;
  border: 1px solid #c9d8d4;
  border-radius: 3px;
  background: #fff;
}
.command-head-state .state-light { grid-row: span 2; width: 8px; height: 8px; margin-top: 4px; border-radius: 50%; background: #31ad7b; box-shadow: 0 0 0 3px rgba(49,173,123,.1); }
.command-head-state strong { color: #344b47; font-size: 0.5625rem; }
.command-head-state small { color: #7c8c89; font-size: 0.5rem; }

.pos-workbench {
  display: grid;
  min-height: 410px;
  grid-template-columns: minmax(0, 1.6fr) minmax(280px, .72fr);
  border: 1px solid #cbd7d4;
  border-radius: 4px;
  background: #fff;
  box-shadow: 0 10px 30px rgba(16,42,44,.06);
}
.sale-command-panel { display: flex; min-width: 0; flex-direction: column; padding: 25px; border-right: 1px solid #cbd7d4; }
.sale-command-title { display: flex; align-items: center; gap: 12px; }
.sale-command-title .command-number {
  display: grid;
  width: 37px;
  height: 37px;
  place-items: center;
  border: 1px solid #bdd1cc;
  border-radius: 3px;
  background: #eff6f3;
  color: var(--app-green);
  font-size: 0.5625rem;
  font-weight: 900;
}
.sale-command-title > div { display: flex; min-width: 0; flex-direction: column; }
.sale-command-title small { color: #758783; font-size: 0.4375rem; font-weight: 850; letter-spacing: .14em; }
.sale-command-title h2 { margin: 3px 0 0; color: var(--app-ink); font-size: 1.1875rem; letter-spacing: -.02em; }
.terminal-badge { margin-left: auto; padding: 5px 7px; border: 1px solid #cad8d5; border-radius: 3px; color: #758783; font-size: 0.4375rem; font-weight: 900; letter-spacing: .12em; }
.sale-command-copy { max-width: 580px; margin: 14px 0 17px; color: #687a77; font-size: 0.625rem; line-height: 1.5; }

.product-entry-command {
  display: grid;
  min-height: 76px;
  grid-template-columns: 43px 1fr 28px;
  align-items: center;
  gap: 13px;
  padding: 0 16px;
  border: 2px solid var(--app-green);
  border-radius: 4px;
  background: #f5fbf8;
  color: var(--app-ink);
  text-decoration: none;
}
.product-entry-command:hover { border-color: #099186; background: #eff9f5; }
.product-entry-command kbd {
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  border: 1px solid #9fbdb6;
  border-bottom-width: 3px;
  border-radius: 4px;
  background: #fff;
  color: var(--app-green-dark);
  font: 850 10px/1 inherit;
}
.product-entry-command > span { display: flex; min-width: 0; flex-direction: column; }
.product-entry-command small { color: var(--app-green); font-size: 0.4375rem; font-weight: 850; letter-spacing: .12em; }
.product-entry-command strong { margin-top: 4px; font-size: 0.8125rem; }
.product-entry-command > b { color: var(--app-green); font-size: 1.3125rem; }

.today-register {
  display: grid;
  grid-template-columns: 1.3fr .7fr;
  margin-top: 14px;
  border: 1px solid #d9e2df;
  border-radius: 3px;
  background: #f7f9f7;
}
.today-register > span { display: flex; min-height: 76px; flex-direction: column; justify-content: center; padding: 12px 17px; border-right: 1px solid #d9e2df; }
.today-register > span:last-child { border-right: 0; }
.today-register small { color: #7b8c88; font-size: 0.4375rem; font-weight: 850; letter-spacing: .12em; }
.today-register strong { margin-top: 6px; color: var(--app-ink); font-size: clamp(1.1875rem, 2.2vw, 1.75rem); letter-spacing: -.04em; }
.today-register > span:last-child strong { font-size: 0.875rem; letter-spacing: 0; }

.register-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-top: auto; padding-top: 14px; }
.register-actions button,
.register-actions a {
  display: grid;
  min-height: 58px;
  grid-template-columns: 34px 1fr;
  align-items: center;
  gap: 10px;
  padding: 8px 11px;
  border: 1px solid #d1dcda;
  border-radius: 3px;
  background: #fff;
  color: #344b48;
  text-align: left;
  text-decoration: none;
}
.register-actions button:hover,
.register-actions a:hover { border-color: #9dbab4; background: #f6faf8; }
.register-actions kbd { display: grid; width: 31px; height: 31px; place-items: center; border: 1px solid #cad7d4; border-bottom-width: 2px; border-radius: 3px; color: #697d79; font: 800 8px/1 inherit; }
.register-actions span { display: flex; flex-direction: column; }
.register-actions strong { font-size: 0.5625rem; }
.register-actions small { margin-top: 3px; color: #84928f; font-size: 0.4375rem; }

.shift-summary { display: flex; min-width: 0; flex-direction: column; padding: 22px; background: #f3f5f1; }
.shift-summary > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding-bottom: 16px; border-bottom: 1px solid #d6dfdc; }
.shift-summary header small { color: #748581; font-size: 0.4375rem; font-weight: 850; letter-spacing: .13em; }
.shift-summary h2 { margin: 4px 0 0; color: var(--app-ink); font-size: 0.9375rem; }
.shift-live { padding: 4px 6px; border-radius: 2px; background: var(--app-mint); color: var(--app-green-dark); font-size: 0.375rem; font-weight: 900; letter-spacing: .1em; }
.cash-state-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; padding: 18px 0; border-bottom: 1px solid #d6dfdc; }
.cash-state-row > span { display: flex; flex-direction: column; }
.cash-state-row small { color: #778884; font-size: 0.4375rem; font-weight: 800; }
.cash-state-row strong { margin-top: 5px; color: var(--app-green-dark); font-size: 1.375rem; letter-spacing: -.03em; }
.shift-values { margin: 0; }
.shift-values div { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 15px 0; border-bottom: 1px solid #d6dfdc; }
.shift-values dt { color: #687b77; font-size: 0.5625rem; }
.shift-values dd { margin: 0; color: var(--app-ink); font-size: 0.75rem; font-weight: 800; }
.shift-report { min-height: 40px; margin-top: auto; border: 1px solid #bfcdc9; border-radius: 3px; background: transparent; color: #465c58; font-size: 0.5rem; font-weight: 750; }
.shift-report:hover { border-color: var(--app-green); color: var(--app-green); }
.shift-report span { margin-right: 6px; color: var(--app-green); }

.function-pad {
  display: grid;
  min-height: auto;
  grid-template-columns: 104px repeat(4, 1fr);
  gap: 0;
  margin-top: 8px;
  padding: 0;
  overflow: hidden;
}
.function-pad > span { display: grid; margin: 0; padding: 0 14px; place-items: center start; background: var(--app-ink); color: #afc1bd; }
.function-pad button {
  display: grid;
  min-height: 62px;
  grid-template-columns: 27px 1fr;
  align-items: center;
  gap: 9px;
  padding: 8px 13px;
  border: 0;
  border-left: 1px solid #dfe6e4;
  background: #fff;
  color: var(--app-ink);
  text-align: left;
}
.function-pad button:hover { background: #f0f7f4; color: var(--app-green); }
.function-pad button > b { display: grid; width: 25px; height: 25px; place-items: center; border: 1px solid #cbd8d5; border-radius: 3px; color: var(--app-green); font-size: 0.4375rem; }
.function-pad button > span { display: flex; flex-direction: column; }
.function-pad strong { font-size: 0.5625rem; }
.function-pad small { margin-top: 3px; color: #84938f; font-size: 0.4375rem; }
.terminal-support-grid { grid-template-columns: 1fr 1fr 1fr !important; }
.terminal-support-grid .first-steps { grid-row: auto; }
.terminal-support-grid .first-steps-list li { padding: 9px 0; }
.terminal-support-grid .first-steps-list li > span { display: none; }
.terminal-support-grid .team-card { min-width: 0; }

/* Dense, consistent management modules */
.app-body .catalog-view > .workspace-heading { margin-bottom: 12px; padding-bottom: 15px; border-bottom: 1px solid var(--app-line); }
.app-body .catalog-view .workspace-heading h1 { font-size: 1.625rem; }
.app-body .cad-tabs {
  gap: 0;
  margin: 10px 0;
  padding: 0 10px;
  border: 1px solid var(--app-line);
  border-radius: 4px;
  background: #fff;
}
.app-body .cad-tab {
  min-height: 42px;
  padding: 0 14px;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  background: transparent;
  color: #687a77;
  font-size: 0.5625rem;
}
.app-body .cad-tab.is-active { border-bottom-color: var(--app-green); background: transparent; color: var(--app-green-dark); }
.app-body .form-grid,
.app-body .catalog-form { border-radius: 3px; background: #f3f6f4; }
.app-body .form-grid label,
.app-body .catalog-form label { color: #667975; font-size: 0.5rem; }
.app-body .form-grid input,
.app-body .form-grid select,
.app-body .form-grid textarea,
.app-body .catalog-form input,
.app-body .catalog-form select {
  border-color: #cfdad7;
  border-radius: 3px;
  background: #fff;
  color: var(--app-ink);
}
.app-body .form-grid input:focus,
.app-body .form-grid select:focus,
.app-body .catalog-form input:focus,
.app-body .catalog-form select:focus { border-color: var(--app-green); outline: 2px solid rgba(8,117,108,.11); }
.app-body .primary-button,
.app-body .catalog-submit,
.app-body .row-action {
  border-color: var(--app-green);
  border-radius: 3px;
  background: var(--app-green);
}
/* Ação destrutiva não pode vestir a cor da marca: desligar gente e tirar
   uma máquina de operação são as duas coisas que o dono precisa reconhecer
   antes de clicar. Vem DEPOIS do bloco acima de propósito. */
.app-body .team-remove,
.app-body .terminal-remover {
  border-color: #fca5a5;
  background: #fef2f2;
  color: #b91c1c;
}
.app-body .team-remove:hover,
.app-body .terminal-remover:hover { background: #fee2e2; }
.app-body .secondary-button { border-radius: 3px; }
.app-body table { border-color: var(--app-line); }
.app-body th { background: #eef3f1; color: #526764; font-size: 0.5rem; letter-spacing: .07em; }
.app-body td { color: #344b48; font-size: 0.625rem; }
.app-body tr:hover td { background: #f7faf8; }

@media (max-width: 1120px) {
  .app-body .metric-grid { grid-template-columns: repeat(3, 1fr); }
  .app-body .metric-primary { grid-column: span 1; }
  .operation-shortcuts { flex-wrap: wrap; padding: 8px 12px; }
  .pos-workbench { grid-template-columns: minmax(0, 1.35fr) minmax(250px, .65fr); }
  .function-pad { grid-template-columns: repeat(4, 1fr); }
  .function-pad > span { grid-column: 1 / -1; min-height: 30px; }
  .terminal-support-grid { grid-template-columns: 1fr 1fr !important; }
  .terminal-support-grid .first-steps { grid-column: 1 / -1; }
}

@media (max-width: 780px) {
  .app-body .erp-sidebar { width: 236px; box-shadow: 18px 0 50px rgba(16,42,44,.2); }
  .app-body .erp-main { margin-left: 0; }
  .app-body .workspace-topbar { padding: 8px 12px; }
  .app-body .mobile-menu { display: block; color: var(--app-ink); }
  .operation-online { display: none; }
  .app-body .context-pickers select { min-width: 0; }
  .app-body .workspace-content { width: min(100% - 24px, 700px); padding-top: 20px; }
  .app-body .workspace-heading { flex-direction: column; }
  .heading-pos-action { width: 100%; min-height: 82px; }
  .app-body .metric-grid { grid-template-columns: repeat(2, 1fr); }
  .app-body .dashboard-grid { grid-template-columns: 1fr; }
  .app-body .first-steps { grid-row: auto; }
  .operation-shortcuts > span { width: 100%; margin: 0 0 4px 4px; }
  .operation-shortcuts button { flex: 1 1 45%; text-align: left; }
  .command-center-head { align-items: flex-start; flex-direction: column; }
  .command-head-state { width: 100%; }
  .pos-workbench { grid-template-columns: 1fr; }
  .sale-command-panel { border-right: 0; border-bottom: 1px solid #cbd7d4; }
  .shift-summary { min-height: 350px; }
  .function-pad { display: grid; padding: 0; }
  .function-pad button { min-width: 0; }
  .terminal-support-grid { grid-template-columns: 1fr !important; }
  .terminal-support-grid .first-steps { grid-column: auto; }
  .app-body .app-access-panel { margin-left: 0; }
  .app-body > .public-page::before { inset: 0; }
}

@media (max-width: 520px) {
  .app-access-bar { padding: 18px; }
  .app-access-bar .environment { display: none; }
  .app-body .app-access-panel { min-height: auto; flex-direction: column; margin-top: 52px; padding: 28px 24px; }
  .app-access-panel h2 { font-size: 1.5625rem; }
  .app-access-panel .primary-button { width: 100%; }
  .app-body .context-pickers { min-width: 0; }
  .app-body .context-pickers label { max-width: 46%; }
  .app-body .logout-button { padding-inline: 7px; }
  .app-body .metric-grid { grid-template-columns: 1fr 1fr; }
  .app-body .metric-card { min-height: 96px; padding: 14px; }
  .app-body .metric-card > strong { font-size: 1.1875rem; }
  .operation-shortcuts button { flex-basis: 100%; border-left: 0; border-top: 1px solid #e5ebe9; }
  .sale-command-panel { padding: 18px; }
  .product-entry-command { min-height: 70px; grid-template-columns: 40px 1fr 20px; padding: 0 12px; }
  .product-entry-command strong { font-size: 0.6875rem; }
  .register-actions { grid-template-columns: 1fr; }
  .function-pad { grid-template-columns: 1fr 1fr; }
  .function-pad > span { grid-column: 1 / -1; }
  .function-pad button { flex: none; border-top: 1px solid #dfe6e4; }
}

/* Menu superior consolidado: a navegação principal permanece visível em toda
   a retaguarda e segue o padrão de sistemas comerciais de uso intensivo. */
.app-body .erp-shell {
  display: grid;
  grid-template-rows: auto 1fr;
  grid-template-columns: minmax(0, 1fr);
}
.app-body .erp-sidebar {
  position: sticky;
  inset: 0 0 auto;
  z-index: 70;
  display: grid;
  width: 100%;
  height: 64px;
  grid-template-columns: auto auto minmax(0, 1fr);
  align-items: stretch;
  padding: 0;
  transform: none;
  border: 0;
  border-bottom: 1px solid rgba(0,0,0,.18);
  background: var(--app-green);
  background: color-mix(in srgb, var(--app-green) 62%, #171f24);
  box-shadow: 0 2px 8px rgba(16,42,44,.2);
  transition: none;
}
.app-body .erp-sidebar.is-open { transform: none; }
.app-body .sidebar-brand {
  min-width: 190px;
  min-height: 64px;
  padding: 0 16px;
  border: 0;
  border-right: 1px solid rgba(255,255,255,.16);
}
.tenant-brand-logo {
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  object-fit: contain;
  border-radius: 5px;
  background: #fff;
  padding: 3px;
}
.app-body .sidebar-wordmark strong { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app-body .sidebar-wordmark small { color: rgba(255,255,255,.65); }
.app-body .sidebar-open-pos {
  min-width: 116px;
  min-height: 64px;
  justify-content: center;
  margin: 0;
  padding: 8px 34px 8px 13px;
  border: 0;
  border-right: 1px solid rgba(255,255,255,.15);
  border-radius: 0;
  background: var(--app-orange);
}
.app-body .sidebar-open-pos:hover { background: var(--brand-accent-dark, #c85712); }
.app-body .sidebar-open-pos span { color: rgba(255,255,255,.74); }
.app-body .sidebar-open-pos strong { font-size: 0.75rem; }
.app-body .sidebar-open-pos > i { right: 7px; width: 22px; height: 22px; }
.app-body .module-nav {
  display: flex;
  min-width: 0;
  align-items: stretch;
  gap: 0;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 0;
  scrollbar-width: thin;
}
.app-body .module-nav .nav-section-label,
.app-body .sidebar-foot,
.app-body .module-nav [data-advanced-toggle] { display: none !important; }
.app-body .module-nav .nav-item {
  display: inline-flex;
  min-width: max-content;
  min-height: 64px;
  align-items: center;
  grid-template-columns: none;
  gap: 6px;
  margin: 0;
  padding: 0 16px;
  border: 0;
  border-bottom: 3px solid transparent;
  border-radius: 0;
  background: transparent;
  color: rgba(255,255,255,.86);
  /* Era 0.625rem (10px) com peso 750: pequeno E gritado ao mesmo tempo.
     Letra de leitura, peso de descanso; o ativo é que engrossa. */
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: .01em;
  white-space: nowrap;
}
.app-body .module-nav .nav-item:hover { background: rgba(255,255,255,.08); }
.app-body .module-nav .nav-item:focus-visible { outline: 3px solid #fff; outline-offset: -4px; }
.app-body .module-nav .nav-item.is-active {
  border: 0;
  border-bottom: 3px solid var(--app-orange);
  background: rgba(255,255,255,.10);
  color: #fff;
  font-weight: 700;
}
.app-body .module-nav .nav-icon { display: none; }
/* O trilho do menu: o nav rola por dentro; as setas ficam por cima das
   bordas e só existem quando há módulo escondido daquele lado. */
.app-body .nav-rolagem { position: relative; display: flex; min-width: 0; align-items: stretch; }
.app-body .nav-rolagem .module-nav { flex: 1; min-width: 0; scrollbar-width: none; }
.app-body .nav-seta {
  position: absolute; top: 0; bottom: 0; width: 40px; z-index: 3;
  display: grid; place-items: center; border: 0; cursor: pointer;
  color: #fff; font-size: 1.5rem; font-weight: 700; padding: 0 0 6px;
}
.app-body .nav-seta[hidden] { display: none; }
.app-body .nav-seta-tras { left: 0; background: linear-gradient(90deg, color-mix(in srgb, var(--app-green) 58%, #171f24) 55%, transparent); }
.app-body .nav-seta-frente { right: 0; background: linear-gradient(270deg, color-mix(in srgb, var(--app-green) 58%, #171f24) 55%, transparent); }
.app-body .nav-seta:hover { color: #ffd9b0; }
/* Monitor 1024x768 (4:3 de balcão): o cabeçalho encolhe para o menu
   respirar — só o logo, e o botão do PDV curto. */
@media (max-width: 1180px) {
  .app-body .sidebar-brand { min-width: 58px; padding-inline: 10px; }
  .app-body .sidebar-wordmark { display: none; }
  .app-body .sidebar-open-pos { min-width: 100px; }
}
.app-body .erp-main { min-width: 0; min-height: calc(100vh - 64px); margin: 0; }
.app-body .workspace-topbar {
  top: 64px;
  min-height: 48px;
  grid-template-columns: minmax(110px, 1fr) auto minmax(180px, 1fr);
  grid-template-rows: 48px;
  padding: 0 18px;
  border-bottom: 1px solid var(--app-line);
  background: #fff;
  color: var(--app-ink);
  box-shadow: 0 1px 4px rgba(16,42,44,.08);
}
.workspace-brand { display: none; }
.topbar-screen-title { justify-self: start; color: var(--app-ink); font-size: 0.8125rem; }
.app-body .context-pickers {
  grid-column: 2;
  grid-row: 1;
  justify-content: center;
  margin: 0;
  padding: 0;
  background: transparent;
}
.app-body .context-pickers label { color: #748582; }
.app-body .context-pickers select { color: var(--app-ink); }
.topbar-actions { grid-column: 3; grid-row: 1; }
.topbar-actions .operation-online { color: #647875; }
.topbar-actions .operation-online span { background: #35a97b; }
.topbar-actions .user-avatar { border: 0; background: var(--app-mint); color: var(--app-green); }
.topbar-actions .user-copy strong { color: var(--app-ink); }
.topbar-actions .user-copy span { color: #869592; }
.topbar-actions .logout-button { border-color: var(--app-line); color: #617370; }
.app-body .mobile-menu { display: none; }

.workspace-keyboard-bar {
  display: flex;
  min-height: 28px;
  align-items: center;
  justify-content: center;
  gap: 13px;
  margin: -16px -16px 14px;
  padding: 4px 12px;
  border-bottom: 1px solid #dce4e1;
  background: #edf2f0;
  color: #647471;
  font-size: 0.5rem;
  white-space: nowrap;
}
.workspace-keyboard-bar span { display: inline-flex; align-items: center; gap: 3px; }
.workspace-keyboard-bar kbd { border: 1px solid #bdc9c6; border-bottom-width: 2px; border-radius: 3px; background: #fff; padding: 2px 5px; color: #354d49; font: 800 7px inherit; }

.branding-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.branding-card { padding: 18px; border: 1px solid var(--app-line); border-radius: 5px; background: #fff; }
.branding-card .card-heading { margin-bottom: 16px; }
.branding-logo-row { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 16px; }
.branding-logo-preview { position: relative; display: grid; min-height: 120px; place-items: center; overflow: hidden; border: 1px dashed #b8c8c4; border-radius: 5px; background: #f2f5f3; color: #91a09d; font-size: 0.6875rem; font-weight: 850; }
.branding-logo-preview img { position: absolute; inset: 8px; width: calc(100% - 16px); height: calc(100% - 16px); object-fit: contain; }
.branding-logo-fields, .branding-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.branding-logo-fields label:first-child { grid-column: 1 / -1; }
.branding-form label { display: grid; gap: 5px; color: #526863; font-size: 0.625rem; font-weight: 750; }
.branding-form input:not([type="checkbox"]), .branding-form select { width: 100%; min-width: 0; height: 40px; border: 1px solid #bdcbc7; border-radius: 4px; background: #fff; padding: 0 10px; color: var(--app-ink); }
.branding-form input:focus-visible, .branding-form select:focus-visible { border-color: var(--app-green); outline: 3px solid color-mix(in srgb, var(--app-green) 18%, transparent); }
.branding-form input[type="file"] { padding: 8px; font-size: 0.5625rem; }
.branding-remove { align-self: end; height: 40px; border: 1px solid #d8b9b6; border-radius: 4px; background: #fff8f7; color: #9c4640; font-size: 0.625rem; font-weight: 750; }
.branding-colors { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.branding-colors input[type="color"] { padding: 4px; cursor: pointer; }
.branding-note { margin: 13px 0 0; color: #758783; font-size: 0.625rem; line-height: 1.5; }
/* Nota que explica um formulário logo abaixo: precisa de respiro e de
   um corpo legível, sem gritar mais que o título que a antecede. As
   notas antigas (Configurações, Fiscal) seguem no tamanho delas. */
.team-section-note { margin: 4px 0 12px; font-size: 0.8125rem; font-weight: 400; line-height: 1.5; color: #7a8997; }
.branding-check { display: flex !important; grid-template-columns: none; align-items: center; gap: 10px !important; margin-bottom: 14px; padding: 12px; border: 1px solid #d5e1dd; border-radius: 4px; background: #f5f9f7; }
.branding-check input { width: 18px; height: 18px; accent-color: var(--app-green); }
.branding-check span { display: grid; gap: 2px; }
.branding-check strong { color: var(--app-ink); font-size: 0.6875rem; }
.branding-check small { color: #758783; font-size: 0.5625rem; }
.branding-savebar { position: sticky; bottom: 0; grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 13px 16px; border: 1px solid #cbd8d4; border-radius: 5px; background: #fff; box-shadow: 0 -6px 20px rgba(16,42,44,.08); color: #637672; font-size: 0.625rem; }
.branding-savebar button { min-width: 190px; min-height: 42px; }
.fiscal-heading { margin-top: 34px; }
.context-team-link { align-self: flex-start; border: 1px solid #bdcbc7; background: #fff; border-radius: 5px; padding: 8px 14px; font-weight: 700; color: var(--app-green); cursor: pointer; }
.context-team-link:hover { border-color: var(--app-green); }
.team-download { display: inline-block; text-decoration: none; text-align: center; margin: 6px 0 14px; }
.team-qr { width: 200px; height: 200px; border: 8px solid #fff; border-radius: 8px; box-shadow: 0 2px 12px rgba(16, 42, 44, .14); flex: none; }
.team-pairing-box { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; margin-top: 14px; }
.team-pairing-info { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.team-pairing-info code { font-size: 1.1875rem; letter-spacing: .16em; background: #eef4f2; padding: 4px 10px; border-radius: 6px; align-self: flex-start; }
.team-pairing-info a { word-break: break-all; font-size: 0.75rem; color: var(--app-green); }
.team-pairing-info small { color: #637672; max-width: 420px; }
.fiscal-missing { margin: 0; padding-left: 20px; display: grid; gap: 6px; color: #4a5b57; font-size: 0.8125rem; }
[data-fiscal-readiness] { margin-bottom: 16px; }

@media (max-width: 1000px) {
  .app-body .sidebar-brand { min-width: 58px; padding-inline: 10px; }
  .app-body .sidebar-wordmark { display: none; }
  .app-body .sidebar-open-pos { min-width: 100px; }
  .branding-form { grid-template-columns: 1fr; }
  .branding-savebar { grid-column: 1; }
}
@media (max-width: 700px) {
  .app-body .erp-sidebar { grid-template-columns: auto minmax(0, 1fr); }
  .app-body .sidebar-open-pos { display: none; }
  .app-body .workspace-topbar { grid-template-columns: 1fr auto; }
  .app-body .context-pickers { grid-column: 1; justify-content: flex-start; }
  .topbar-screen-title { display: none; }
  .topbar-actions { grid-column: 2; }
  .workspace-keyboard-bar { justify-content: flex-start; overflow-x: auto; }
  .branding-logo-row { grid-template-columns: 1fr; }
  .branding-logo-preview { min-height: 100px; }
  .branding-fields, .branding-logo-fields { grid-template-columns: 1fr; }
  .branding-logo-fields label:first-child { grid-column: 1; }
}

/* --------------------------------------------------------------------------
   Terminal launcher — menu inicial inspirado em estações reais de PDV.
   These late rules deliberately replace the dashboard/sidebar composition.
   -------------------------------------------------------------------------- */
.app-body .erp-sidebar {
  z-index: 70;
  width: 246px;
  transform: translateX(-100%);
  transition: transform .18s ease;
  box-shadow: 18px 0 55px rgba(4, 27, 29, .22);
}
.app-body .erp-sidebar.is-open { transform: translateX(0); }
.app-body .erp-main { margin-left: 0; }

.app-body .workspace-topbar {
  display: grid;
  min-height: 88px;
  grid-template-columns: minmax(180px, 1fr) auto minmax(180px, 1fr);
  grid-template-rows: 59px 29px;
  gap: 0 16px;
  padding: 0 22px;
  border: 0;
  background: var(--app-green);
  color: #fff;
  box-shadow: 0 2px 8px rgba(16,42,44,.16);
  backdrop-filter: none;
}
.workspace-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #fff;
  text-decoration: none;
}
.workspace-brand .pdv-brand-mark { width: 33px; height: 33px; background: #fff; }
.workspace-brand .pdv-brand-mark i { left: 8px; width: 21px; height: 3px; background: var(--app-green); }
.workspace-brand .pdv-brand-mark i:nth-child(1) { top: 8px; }
.workspace-brand .pdv-brand-mark i:nth-child(2) { top: 16px; width: 17px; }
.workspace-brand .pdv-brand-mark i:nth-child(3) { top: 24px; width: 12px; }
.workspace-brand > span:last-child { display: flex; flex-direction: column; }
.workspace-brand strong { font-size: 0.9375rem; letter-spacing: -.02em; }
.workspace-brand small { margin-top: 1px; color: rgba(255,255,255,.65); font-size: 0.5rem; }
.topbar-screen-title { align-self: center; color: #fff; font-size: 0.75rem; font-weight: 700; }
.topbar-actions { display: flex; align-items: center; justify-content: flex-end; gap: 10px; }
.topbar-actions .operation-online { color: rgba(255,255,255,.78); }
.topbar-actions .operation-online span { background: #8ce0bd; box-shadow: none; }
.topbar-actions .user-avatar { border: 1px solid rgba(255,255,255,.26); background: rgba(255,255,255,.14); color: #fff; }
.topbar-actions .user-copy strong { color: #fff; }
.topbar-actions .user-copy span { color: rgba(255,255,255,.6); }
.topbar-actions .logout-button { border-color: rgba(255,255,255,.22); background: transparent; color: #fff; }
.app-body .mobile-menu {
  display: block;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 0;
  border-radius: 3px;
  background: rgba(0,0,0,.09);
  color: #fff;
  font-size: 1.4375rem;
}
.app-body .context-pickers {
  display: flex;
  grid-column: 1 / -1;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin: 0 -22px;
  padding: 0 15px;
  background: var(--app-green-dark);
}
.app-body .context-pickers label { display: flex; align-items: center; gap: 5px; color: rgba(255,255,255,.66); font-size: 0.4375rem; }
.app-body .context-pickers select {
  min-width: 80px;
  max-width: 250px;
  margin: 0;
  padding: 0 4px;
  border: 0;
  background: transparent;
  color: #fff;
  font-size: 0.5625rem;
}
.app-body .context-pickers select option { color: var(--app-ink); }
.app-body .picker-separator { color: rgba(255,255,255,.32); }

.app-body .workspace-content { width: min(1360px, calc(100% - 32px)); padding: 16px 0 45px; }
.launcher-view { position: relative; }
.launcher-view .dashboard-status { margin: 0 0 8px; }
.launcher-symbols { position: absolute; width: 0; height: 0; overflow: hidden; }
.launcher-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 3px;
  padding: 3px;
  border: 1px solid #d8dcda;
  border-radius: 5px;
  background: #fff;
}
.launcher-tile {
  position: relative;
  display: flex;
  min-width: 0;
  min-height: 156px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 4px;
  padding: 16px 10px 14px;
  border: 1px solid #e2e8ec;
  border-radius: 14px;
  background: #fff;
  color: #1d302f;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(16, 42, 44, .05);
  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease;
}
/* O TECLADO é cidadão de primeira classe aqui: foco visível tem o mesmo
   realce do hover E um anel forte — quem navega por setas vê onde está. */
.launcher-tile:hover,
.launcher-tile:focus-visible {
  z-index: 1;
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--app-green) 45%, #e2e8ec);
  box-shadow: 0 10px 24px rgba(16, 42, 44, .13);
}
.launcher-tile:focus-visible { outline: 3px solid var(--app-orange); outline-offset: 2px; }
.launcher-tile:active { transform: translateY(-1px); }
@media (prefers-reduced-motion: reduce) {
  .launcher-tile, .launcher-tile:hover, .launcher-tile:focus-visible { transform: none; transition: none; }
}
.launcher-tile svg {
  box-sizing: content-box;
  width: 44px;
  height: 44px;
  padding: 10px;
  border-radius: 16px;
  background: color-mix(in srgb, var(--app-green) 9%, #fff);
  fill: none;
  stroke: var(--app-green);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: background .14s ease;
}
.launcher-tile:hover svg, .launcher-tile:focus-visible svg {
  background: color-mix(in srgb, var(--app-green) 16%, #fff);
}
.launcher-tile strong { margin-top: 4px; font-size: 0.9375rem; letter-spacing: -.015em; }
.launcher-tile small { overflow: hidden; color: #788482; font-size: 0.6875rem; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
/* A VENDA é o gesto nº 1 da loja: o tile dela veste a cor viva. */
.launcher-sale { border-color: transparent; background: linear-gradient(150deg, color-mix(in srgb, var(--app-green) 88%, #10231f), color-mix(in srgb, var(--app-green) 62%, #10231f)); color: #fff; }
.launcher-sale small { color: rgba(255, 255, 255, .72); }
.launcher-sale svg { background: rgba(255, 255, 255, .14); stroke: #fff; }
.launcher-sale:hover svg, .launcher-sale:focus-visible svg { background: rgba(255, 255, 255, .22); }
.launcher-sale:hover, .launcher-sale:focus-visible { border-color: transparent; }
.launcher-tile[data-shortcut]::after {
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 3px 7px;
  border-radius: 6px;
  background: rgba(16, 42, 44, .78);
  color: #fff;
  content: attr(data-shortcut);
  font-size: 0.5625rem;
  font-weight: 800;
  letter-spacing: .04em;
}

/* O PLACAR DO DIA: cinco cartoes, numeros grandes tabulares, o dinheiro de
   hoje com a cor da casa. Era uma regua com rotulos de 6px. */
/* Grade fluida: com o Financeiro vetado para um assinante, os cartões
   A RECEBER/A PAGAR somem — e a fileira fecha sem buraco. */
.launcher-status {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}
.launcher-status > .stat-cartao {
  display: flex; min-height: 76px; min-width: 0; flex-direction: column; justify-content: center;
  padding: 12px 16px;
  border: 1px solid #e2e8ec;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(16, 42, 44, .05);
}
.launcher-status > .stat-cartao:first-child { border-left: 4px solid var(--app-green); }
.launcher-status small { color: #7d8987; font-size: 0.625rem; font-weight: 750; letter-spacing: .09em; }
.launcher-status strong { margin-top: 4px; overflow: hidden; color: var(--app-ink); font-size: 1.25rem; letter-spacing: -.02em; font-variant-numeric: tabular-nums; text-overflow: ellipsis; white-space: nowrap; }
.launcher-status em { margin-top: 2px; overflow: hidden; color: #879390; font-size: 0.6875rem; font-style: normal; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 900px) { .launcher-status { grid-template-columns: 1fr 1fr; } }

.launcher-context {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  margin-top: 8px;
  padding: 11px 13px;
  border: 1px solid #d5ddda;
  border-radius: 4px;
  background: #fff;
}
.launcher-context .company-monogram { width: 36px; height: 36px; }
.launcher-context > div { display: flex; min-width: 0; flex-direction: column; }
.launcher-context > div small { color: #84918e; font-size: 0.375rem; font-weight: 850; letter-spacing: .1em; }
.launcher-context > div strong { margin-top: 3px; overflow: hidden; font-size: 0.625rem; text-overflow: ellipsis; white-space: nowrap; }
.launcher-context > div span,
.launcher-context > div em { color: #7a8986; font-size: 0.5rem; font-style: normal; }
.launcher-context details { position: relative; }
.launcher-context summary { padding: 7px 10px; border: 1px solid #d4ddda; border-radius: 3px; color: #526763; font-size: 0.5rem; font-weight: 750; cursor: pointer; }
.launcher-context details > div { min-width: 280px; margin-top: 8px; padding: 12px; border: 1px solid #d4ddda; border-radius: 3px; background: #fff; }
.keyboard-help {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 5px;
  margin: 9px 0 0;
  color: #6f7e7b;
  font-size: 0.4375rem;
}
.keyboard-help kbd {
  display: inline-flex;
  min-height: 19px;
  align-items: center;
  padding: 0 6px;
  border: 1px solid #c5d0cd;
  border-bottom-width: 2px;
  border-radius: 3px;
  background: #fff;
  color: #38504c;
  font: 800 7px/1 inherit;
}

@media (max-width: 1100px) {
  .launcher-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .launcher-tile { min-height: 145px; }
}

@media (max-width: 780px) {
  .app-body .workspace-topbar { grid-template-columns: 1fr auto; padding: 0 12px; }
  .workspace-brand > span:last-child { display: none; }
  .topbar-screen-title { display: none; }
  .topbar-actions { grid-column: 2; }
  .topbar-actions .operation-online,
  .topbar-actions .user-copy { display: none; }
  .app-body .context-pickers { margin-inline: -12px; }
  .app-body .workspace-content { width: min(100% - 18px, 700px); padding-top: 9px; }
  .launcher-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .launcher-tile { min-height: 132px; }
  .launcher-status { grid-template-columns: repeat(2, 1fr); }
  .launcher-status > .stat-cartao { border-bottom: 1px solid #e0e6e4; }
  .launcher-status > .stat-cartao:nth-child(2n) { border-right: 0; }
  .launcher-context { grid-template-columns: 38px 1fr; }
  .launcher-context details { grid-column: 1 / -1; }
}

@media (max-width: 520px) {
  .app-body .workspace-topbar { min-height: 84px; grid-template-rows: 55px 29px; }
  .topbar-actions .user-avatar { display: none; }
  .topbar-actions .logout-button { padding-inline: 7px; }
  .launcher-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .launcher-tile { min-height: 128px; padding-inline: 6px; }
  .launcher-tile svg { width: 46px; height: 46px; }
  .launcher-tile strong { font-size: 0.8125rem; }
  .launcher-tile small { max-width: 100%; font-size: 0.4375rem; }
  .launcher-context details > div { min-width: 0; }
}

/* --------------------------------------------------------------------------
   Cabeçalho operacional real.

   A navegação superior não reutiliza mais o painel lateral legado. Isso evita
   que regras responsivas da antiga sidebar desloquem ou recortem o cabeçalho.
   -------------------------------------------------------------------------- */
.app-body .erp-header {
  position: sticky;
  z-index: 70;
  top: 0;
  display: grid;
  width: 100%;
  height: 64px;
  grid-template-columns: auto auto minmax(0, 1fr);
  align-items: stretch;
  overflow: hidden;
  border-bottom: 1px solid rgba(0, 0, 0, .2);
  /* A cor da loja continua mandando, mas ACALMADA: misturada com um tom
     profundo, qualquer marca berrante vira barra sobria — e a cor viva fica
     para o item ativo e o botao do PDV ("agressivo", o dono, 2026-08-26). */
  background: var(--app-green);
  background: color-mix(in srgb, var(--app-green) 58%, #171f24);
  color: #fff;
  box-shadow: 0 2px 8px rgba(16, 42, 44, .18);
}

.app-body .erp-header .sidebar-brand {
  min-width: 194px;
  min-height: 64px;
  padding: 0 16px;
  border: 0;
  border-right: 1px solid rgba(255, 255, 255, .16);
}

.app-body .erp-header .sidebar-wordmark strong {
  max-width: 230px;
  overflow: hidden;
  color: #fff;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.app-body .erp-header .sidebar-wordmark small { color: rgba(255, 255, 255, .68); }
.app-body .erp-header .tenant-brand-logo {
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  padding: 3px;
  border-radius: 5px;
  background: #fff;
  object-fit: contain;
}

.app-body .erp-header .sidebar-open-pos {
  min-width: 124px;
  min-height: 64px;
  justify-content: center;
  margin: 0;
  padding: 7px 36px 7px 13px;
  border: 0;
  border-right: 1px solid rgba(255, 255, 255, .18);
  border-radius: 0;
  background: var(--app-orange);
}

.app-body .erp-header .sidebar-open-pos:hover { background: var(--brand-accent-dark, #c85712); }
.app-body .erp-header .sidebar-open-pos span { color: rgba(255, 255, 255, .78); }
.app-body .erp-header .sidebar-open-pos strong { font-size: 0.75rem; }
.app-body .erp-header .sidebar-open-pos > i { right: 8px; width: 22px; height: 22px; }

.app-body .erp-header .module-nav {
  display: flex;
  min-width: 0;
  align-items: stretch;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 0;
  scrollbar-width: thin;
}

.app-body .erp-header .module-nav .nav-section-label,
.app-body .erp-header .module-nav [data-advanced-toggle] { display: none !important; }

.app-body .erp-header .module-nav .nav-item {
  display: inline-flex;
  min-width: max-content;
  min-height: 64px;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 0 13px;
  border: 0;
  border-bottom: 3px solid transparent;
  border-radius: 0;
  background: transparent;
  color: rgba(255, 255, 255, .88);
  /* Era 10px com peso 750 — pequeno E gritado. Letra de leitura, peso de
     descanso; o ativo e' que engrossa. */
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: .01em;
  white-space: nowrap;
}

.app-body .erp-header .module-nav .nav-item:hover { background: rgba(255, 255, 255, .09); color: #fff; }
.app-body .erp-header .module-nav .nav-item:focus-visible { outline: 3px solid #fff; outline-offset: -4px; }
.app-body .erp-header .module-nav .nav-item.is-active {
  border: 0;
  border-bottom: 3px solid var(--app-orange);
  background: rgba(255, 255, 255, .11);
  color: #fff;
  font-weight: 700;
}
.app-body .erp-header .module-nav .nav-icon { display: none; }

.app-body .erp-main { min-width: 0; min-height: calc(100vh - 64px); margin: 0; }
.app-body .workspace-topbar {
  top: 64px;
  display: grid;
  min-height: 42px;
  grid-template-columns: minmax(80px, 1fr) auto minmax(180px, 1fr);
  grid-template-rows: 42px;
  gap: 12px;
  padding: 0 18px;
  border: 0;
  border-bottom: 1px solid var(--app-line);
  background: #fff;
  color: var(--app-ink);
  box-shadow: 0 1px 4px rgba(16, 42, 44, .07);
}

.app-body .workspace-brand { display: none; }
.app-body .topbar-screen-title { grid-column: 1; align-self: center; justify-self: start; color: var(--app-ink); font-size: 0.75rem; }
.app-body .context-pickers {
  display: flex;
  grid-column: 2;
  grid-row: 1;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 0;
  padding: 0;
  background: transparent;
}
.app-body .context-pickers label { display: flex; align-items: center; gap: 5px; color: #748582; }
.app-body .context-pickers select { min-width: 80px; max-width: 250px; margin: 0; color: var(--app-ink); }
.app-body .picker-separator { color: #bdc9c6; }
.app-body .topbar-actions { grid-column: 3; grid-row: 1; color: var(--app-ink); }
.app-body .topbar-actions .operation-online { color: #647875; }
.app-body .topbar-actions .operation-online span { background: #35a97b; }
.app-body .topbar-actions .user-avatar { border: 0; background: var(--app-mint); color: var(--app-green); }
.app-body .topbar-actions .user-copy strong { color: var(--app-ink); }
.app-body .topbar-actions .user-copy span { color: #869592; }
.app-body .topbar-actions .logout-button { border-color: var(--app-line); background: #fff; color: #617370; }
.app-body .mobile-menu { display: none; }

@media (max-width: 1000px) {
  .app-body .erp-header .sidebar-brand { min-width: 58px; padding-inline: 10px; }
  .app-body .erp-header .sidebar-wordmark { display: none; }
  .app-body .erp-header .sidebar-open-pos { min-width: 104px; }
}

@media (max-width: 700px) {
  .app-body .erp-header { grid-template-columns: auto minmax(0, 1fr); }
  .app-body .erp-header .sidebar-open-pos { display: none; }
  .app-body .workspace-topbar { grid-template-columns: minmax(0, 1fr) auto; padding: 0 10px; }
  .app-body .topbar-screen-title { display: none; }
  .app-body .context-pickers { grid-column: 1; justify-content: flex-start; overflow: hidden; }
  .app-body .topbar-actions { grid-column: 2; }
  .app-body .topbar-actions .operation-online,
  .app-body .topbar-actions .user-copy { display: none; }
  .app-body .mobile-menu { display: block; }
}

@media (max-width: 520px) {
  .app-body .workspace-topbar { min-height: 42px; grid-template-rows: 42px; }
  .app-body .topbar-actions .user-avatar { display: none; }
}

/* ---- RELATÓRIOS -------------------------------------------------------
   Números grandes onde a decisão acontece, e a barra do dia comparada com
   o maior do período: o pico salta aos olhos sem biblioteca de gráfico. */
.rel-periodo { display: flex; gap: 6px; flex-wrap: wrap; }
.rel-periodo button {
  min-height: 34px; padding: 0 14px; border: 1px solid var(--app-line);
  border-radius: 999px; background: #fff; color: #526764;
  font-size: 0.75rem; font-weight: 750;
}
.rel-periodo button.is-active { border-color: var(--app-green); background: var(--app-green); color: #fff; }

.rel-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin: 14px 0 18px; }
.rel-card {
  display: grid; gap: 2px; padding: 16px 18px;
  border: 1px solid var(--app-line); border-radius: 10px; background: #fff;
}
.rel-card span { color: #7a8997; font-size: 0.5625rem; font-weight: 850; letter-spacing: .09em; }
.rel-card strong { color: var(--app-ink); font-size: 1.625rem; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.rel-card small { color: #8795a2; font-size: 0.6875rem; }

.rel-grid { grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); }
.rel-largo { grid-column: 1 / -1; }

.rel-zona { min-height: 120px; }

/* --- O KIT DE GRÁFICOS (graficos.js) ----------------------------------
   Colunas em HTML e a barra é um <svg> vazio com height="NN%" no ATRIBUTO:
   o CSP (style-src 'self') bloqueia style inline — foi assim que as barras
   antigas viveram meses em zero — mas atributo de SVG ele não alcança.
   As cores moram AQUI, por classe. */
.gf-vertical { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 2px; align-items: end; height: 220px; }
.gf-col { display: flex; height: 100%; min-width: 0; flex-direction: column; align-items: center; }
.gf-col .gf-valor { height: 15px; color: var(--app-ink); font-size: 0.625rem; font-weight: 750; font-variant-numeric: tabular-nums; white-space: nowrap; }
.gf-zona { display: flex; width: 100%; flex: 1; align-items: flex-end; justify-content: center; border-bottom: 1px solid #e3eae7; }
.gf-pilar {
  display: block;
  width: min(72%, 46px);
  border-radius: 5px 5px 0 0;
  background: linear-gradient(180deg, color-mix(in srgb, var(--app-green) 88%, #fff), var(--app-green));
}
.gf-pilar-zero { min-height: 2px; background: #e6ecea; }
.gf-col .gf-rotulo { margin-top: 5px; height: 13px; color: #8795a2; font-size: 0.625rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.gf-col .gf-sub { height: 12px; color: #a5b1ad; font-size: 0.5625rem; text-transform: capitalize; white-space: nowrap; }

/* Ranking: nome + valor em cima, trilho SVG embaixo. */
.gf-ranking { display: grid; gap: 11px; }
.gf-ranking-linha { display: grid; gap: 4px; }
.gf-ranking-topo { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.gf-ranking-topo span { overflow: hidden; max-width: 100%; flex: 1 1 auto; color: var(--app-ink); font-size: 0.8125rem; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.gf-ranking-topo b { color: var(--app-ink); font-size: 0.8125rem; font-variant-numeric: tabular-nums; }
.gf-ranking-topo small { width: 100%; color: #8795a2; font-size: 0.6875rem; }
.gf-trilho { display: block; width: 100%; height: 8px; }
.gf-trilho .gf-fundo { fill: #eef3f1; }
.gf-trilho .gf-feito { fill: var(--app-green); }

/* Rosca: cada fatia é um anel com stroke-dasharray (circunferência = 100).
   As oito cores servem fatia (stroke) e ponto da legenda (background) pela
   mesma variável. */
.gf-rosca { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.gf-rosca-svg { width: 122px; flex: 0 0 122px; }
.gf-fatia-0 { --gf-cor: var(--app-green); }
.gf-fatia-1 { --gf-cor: #2f8fd6; }
.gf-fatia-2 { --gf-cor: var(--app-orange); }
.gf-fatia-3 { --gf-cor: #8a63c9; }
.gf-fatia-4 { --gf-cor: #d65a8e; }
.gf-fatia-5 { --gf-cor: #b8a437; }
.gf-fatia-6 { --gf-cor: #48b0a2; }
.gf-fatia-7 { --gf-cor: #97a3ac; }
circle.gf-fatia { stroke: var(--gf-cor); }
.gf-rosca-centro { fill: var(--app-ink); font-size: 4.4px; font-weight: 750; }
/* Cada item da legenda tem DUAS linhas — nome com a fatia em cima, valor
   embaixo: numa linha só, "Dinheiro · 28%" + "R$ 1.421,40" disputavam a
   largura do cartão e o nome perdia ("Din…"). */
.gf-legenda { display: grid; min-width: 150px; flex: 1; gap: 9px; }
.gf-legenda-item { display: grid; align-items: baseline; grid-template-columns: 9px minmax(0, 1fr); gap: 1px 8px; }
.gf-ponto { width: 9px; height: 9px; align-self: center; border-radius: 3px; background: var(--gf-cor); }
.gf-legenda-item span { overflow: hidden; color: var(--app-ink); font-size: 0.75rem; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.gf-legenda-item b { grid-column: 2; color: #5d6f6b; font-size: 0.75rem; font-weight: 500; font-variant-numeric: tabular-nums; }

.rel-lista { display: grid; gap: 6px; }
.rel-linha {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 8px 14px; padding: 10px 12px; border: 1px solid var(--app-line);
  border-radius: 9px; background: #fff;
}
.rel-linha-info { flex: 1 1 210px; min-width: 0; display: grid; gap: 1px; }
.rel-linha-info strong { color: var(--app-ink); font-size: 0.8125rem; }
.rel-linha-info span { color: #8795a2; font-size: 0.6875rem; }
.rel-linha-valor { display: grid; text-align: right; }
.rel-linha-valor strong { color: var(--app-ink); font-size: 0.9375rem; font-variant-numeric: tabular-nums; }
.rel-linha-valor span { color: #8795a2; font-size: 0.6875rem; }
/* Diferença de caixa e conta vencida não podem passar despercebidas. */
.rel-linha.rel-atencao { border-color: #f0c98a; background: #fff8ec; }
.rel-linha.rel-atencao .rel-linha-valor span { color: #8a5a10; font-weight: 700; }
.rel-subtitulo { margin: 10px 0 2px; color: #667975; font-size: 0.5625rem; font-weight: 850; letter-spacing: .09em; text-transform: uppercase; }
.rel-vazio { margin: 0; padding: 12px 2px; color: #8795a2; font-size: 0.75rem; }
/* Venda por venda de um turno, no relatório do caixa (com Corrigir). */
.rel-turno-abrir { justify-self: start; margin: -2px 0 6px; border: 1px solid #c9d6db; border-radius: 8px; background: #fff; color: #33505a; padding: 6px 12px; font: inherit; font-size: 0.8125rem; font-weight: 700; cursor: pointer; }
.rel-turno-abrir:focus-visible { outline: 2px solid #0f766e; outline-offset: 2px; }
.rel-turno-vendas { display: grid; gap: 8px; margin: 0 0 12px; }

/* --- Cadastros: categorias -------------------------------------------- */
/* A lista precisa ser lida em diagonal: nome grande, quantos produtos logo
   abaixo e as duas ações sempre no mesmo lugar da linha. */
.cat-explica { margin: 0 0 14px; color: #7a8997; font-size: 0.75rem; max-width: 78ch; }
.cat-form {
  display: flex; flex-wrap: wrap; align-items: end; gap: 10px;
  padding: 12px 14px; border: 1px solid var(--app-line); border-left: 4px solid var(--app-green);
  border-radius: 10px; background: #f8fafb;
}
.cat-form label { display: grid; gap: 5px; flex: 1 1 260px; color: #7a8997; font-size: 0.6875rem; font-weight: 750; }
.cat-form input { height: 38px; border: 1px solid #b9c7cc; border-radius: 7px; padding: 0 10px; background: #fff; color: var(--app-ink); font-size: 0.875rem; font-weight: 600; }
.cat-form button { height: 38px; padding: 0 18px; border: 0; border-radius: 7px; background: var(--app-green); color: #fff; font-weight: 800; cursor: pointer; }
.cat-filtro { display: flex; align-items: center; gap: 7px; margin: 14px 0 8px; color: #7a8997; font-size: 0.75rem; font-weight: 700; }
.cat-filtro input { width: 15px; height: 15px; }
.cat-lista { display: grid; gap: 7px; }
.cat-linha {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px;
  padding: 11px 13px; border: 1px solid var(--app-line); border-radius: 9px; background: #fff;
}
.cat-info { display: grid; gap: 2px; min-width: 0; flex: 1 1 240px; }
.cat-info strong { color: var(--app-ink); font-size: 0.875rem; }
.cat-info span { color: #7a8997; font-size: 0.6875rem; }
.cat-acoes { display: flex; gap: 7px; margin-left: auto; }
.cat-acao {
  height: 32px; padding: 0 13px; border: 1px solid #b9c7cc; border-radius: 7px;
  background: #fff; color: var(--app-ink); font-size: 0.75rem; font-weight: 800; cursor: pointer;
}
.cat-acao:hover { border-color: var(--app-green); color: var(--app-green-dark); }
.cat-acao.cat-primaria { border-color: var(--app-green); background: var(--app-green); color: #fff; }
/* Arquivada continua visível e legível — só perde o destaque de quem está
   valendo hoje. Some da lista seria esconder o histórico da loja. */
.cat-linha.cat-arquivada { background: #f6f8f9; border-style: dashed; }
.cat-linha.cat-arquivada .cat-info strong { color: #7a8997; }
.cat-linha.cat-editando { border-color: var(--app-green); background: #f4fbf8; }
.cat-linha.cat-editando input {
  flex: 1 1 240px; height: 36px; border: 1px solid var(--app-green); border-radius: 7px;
  padding: 0 10px; background: #fff; color: var(--app-ink); font-size: 0.875rem; font-weight: 700;
}
.cat-aviso { color: #7a8997; font-size: 0.6875rem; flex: 0 1 auto; }
.cat-vazio { margin: 0; padding: 14px 2px; color: #8795a2; font-size: 0.75rem; }

/* O menu e a grade ficam invisíveis até o servidor dizer o que esta empresa
   comprou e o que este papel abre. Mostrar tudo e apagar depois faz os
   módulos piscarem debaixo do cursor — e num link lento dá tempo de clicar
   num módulo que a empresa não tem. Ocupa o lugar (visibility, não display)
   para a página não pular quando aparecer. */
.app-body [data-modules-pending] { visibility: hidden; }

/* --- Financeiro: as baixas de um título ---------------------------------
   Abrem dentro da linha, porque a pergunta "quem pagou o quê" só faz
   sentido colada ao título. O estorno mora aqui: ele existia no servidor
   desde sempre e não tinha botão, porque não havia como VER a baixa. */
/* `.catalog-row > div` força coluna e largura mínima em TODO filho direto;
   por isso o painel precisa vencer com a mesma especificidade. Sem isto ele
   era espremido no eixo dos botões e as baixas saíam empilhadas por cima
   deles — o PNG da bancada mostrou antes de ir para o ar. */
.app-body .catalog-row > .fin-baixas {
  flex: 1 0 100%; display: grid; gap: 6px; margin-top: 10px;
  padding-top: 10px; border-top: 1px dashed var(--app-line);
}
.app-body .fin-baixa {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 8px 12px; padding: 9px 11px; border: 1px solid var(--app-line);
  border-radius: 8px; background: #fff;
}
.app-body .fin-baixa > div { display: grid; gap: 2px; min-width: 0; }
.app-body .fin-baixa strong {
  overflow: visible; white-space: normal; font-size: 0.8125rem; color: var(--app-ink);
}
/* `.catalog-row small` desenha pastilha verde: aqui é texto de apoio. */
.app-body .fin-baixa small {
  flex: 0 1 auto; padding: 0; border-radius: 0; background: none;
  color: #7a8997; font-size: 0.6875rem; font-weight: 500;
}
.app-body .fin-baixa-nota { color: #94a3b8; }
.app-body .fin-baixa-vazio { margin: 0; padding: 6px 2px; font-size: 0.75rem; color: #8795a2; }

/* A dica de bloco nas Compras: uma frase que explica o caminho. */
.compra-dica { margin: -4px 0 12px; color: #6b7a76; font-size: 0.75rem; line-height: 1.5; }

/* O pedido multi-item de Vendas: uma linha por item, com o × para tirar.
   Dentro da grade do .catalog-form, as linhas ocupam a LARGURA INTEIRA —
   sem isto elas caem numa coluna e viram lascas. */
.so-form .so-linhas, .so-form [data-so-mais-linha] { grid-column: 1 / -1; }
.so-form [data-so-mais-linha] { justify-self: start; }
.so-linhas { display: grid; gap: 8px; }
.so-linha { display: grid; align-items: center; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) 74px 90px auto; gap: 6px; }
.so-linha select, .so-linha input {
  min-height: 38px; min-width: 0; padding: 0 8px; border: 1px solid var(--app-line);
  border-radius: 8px; background: #fff; font-size: 0.8125rem;
}
.so-linha input { font-variant-numeric: tabular-nums; }
.so-due-rotulo input {
  min-height: 30px; padding: 0 6px; border: 1px solid var(--app-line);
  border-radius: 7px; background: #fff; font-size: 0.75rem;
}
@media (max-width: 760px) { .so-linha { grid-template-columns: 1fr 1fr; } }

/* --- O LIVRO CAIXA: data, frase, entrada/saída com cor e saldo por linha. */
.fin-previsto {
  margin: -6px 0 14px; padding: 10px 14px; border: 1px solid #e2e8ec;
  border-radius: 10px; background: #fff; color: #52616d;
  font-size: 0.8125rem; font-weight: 600; font-variant-numeric: tabular-nums;
}
.fin-previsto.fin-previsto-alerta { border-color: #f0c98a; background: #fff8ec; color: #7a5410; }
.fin-livro { display: grid; }
.fin-livro-nota { margin: 0 0 6px; color: #8795a2; font-size: 0.6875rem; }
.fin-mov {
  display: flex; align-items: center; justify-content: space-between; gap: 10px 16px;
  padding: 9px 10px; border-bottom: 1px solid #eef2f1;
}
.fin-mov:nth-child(even) { background: #fafcfb; }
.fin-mov:last-child { border-bottom: 0; }
.fin-mov-info { display: grid; min-width: 0; gap: 1px; }
.fin-mov-info strong { overflow: hidden; color: var(--app-ink); font-size: 0.8125rem; text-overflow: ellipsis; white-space: nowrap; }
.fin-mov-info small { color: #8795a2; font-size: 0.6875rem; }
.fin-mov-valor { display: grid; flex: 0 0 auto; gap: 1px; text-align: right; }
.fin-mov-valor strong { font-size: 0.875rem; font-variant-numeric: tabular-nums; }
.fin-mov-valor small { color: #8795a2; font-size: 0.6875rem; font-variant-numeric: tabular-nums; }
.fin-entrada { color: #157a4e; }
.fin-saida { color: #b3423a; }

/* Conta vencida GRITA na lista; a linha inteira veste o alerta. */
.app-body .catalog-row.fin-vencida { border-color: #eebbb4; background: #fdf3f2; }
.app-body .fin-acao-principal { border-color: var(--app-green); color: var(--app-green); font-weight: 700; }

/* A baixa rápida da própria linha: valor, método, caixa, confirmar. */
.app-body .catalog-row > .fin-baixa-rapida {
  flex: 1 0 100%; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px;
  padding-top: 10px; border-top: 1px dashed var(--app-line);
}
.fin-baixa-rapida input, .fin-baixa-rapida select {
  min-height: 38px; padding: 0 10px; border: 1px solid var(--app-line);
  border-radius: 8px; background: #fff; font-size: 0.8125rem;
}
.fin-baixa-rapida input { width: 110px; font-variant-numeric: tabular-nums; }
.fin-baixa-rapida button {
  min-height: 38px; padding: 0 16px; border: 0; border-radius: 8px;
  background: var(--app-green); color: #fff; font-size: 0.8125rem; font-weight: 700;
}

/* ---------------------------------------------------------------------------
   O GUIA DO RAMO.

   É a primeira coisa que um cliente novo abre, e ele abre em pé, com pressa,
   provavelmente antes de a loja encher. Então: passo numerado grande o
   bastante para achar de longe, vídeo do tamanho de um vídeo (e não de um
   selo), e texto num comprimento que se lê — nunca ocupando a largura toda da
   tela, que é onde a linha fica longa demais e o olho se perde na volta.
--------------------------------------------------------------------------- */
.guia-view .guia-passos { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 18px; }

.guia-passo {
  background: #fff; border: 1px solid #e4eaef; border-radius: 14px;
  padding: 22px 24px 24px; box-shadow: 0 1px 2px rgba(16, 32, 44, .04);
}

.guia-cabeca { display: flex; gap: 16px; align-items: flex-start; }

/* O número é o que a pessoa procura quando volta ao guia depois de sair no
   meio: "eu estava no três". Por isso ele é grande e tem cor. */
.guia-numero {
  flex: 0 0 auto; width: 42px; height: 42px; border-radius: 50%;
  background: #0f766e; color: #fff; font-size: 1.25rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  font-variant-numeric: tabular-nums;
}
.guia-cabeca h2 { margin: 4px 0 2px; font-size: 1.3125rem; line-height: 1.2; color: #16232e; }
.guia-resumo { margin: 0; color: #5d6b78; font-size: 0.875rem; line-height: 1.45; }

/* Texto e vídeo lado a lado no monitor da loja; empilhados no celular de quem
   está conferindo o estoque com o aparelho na mão. */
.guia-conteudo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 24px; margin-top: 18px; }
@media (max-width: 900px) { .guia-conteudo { grid-template-columns: 1fr; } }

.guia-corpo { color: #26333f; font-size: 0.9375rem; line-height: 1.62; max-width: 62ch; }
.guia-corpo p { margin: 0 0 12px; }
.guia-corpo ul { margin: 0 0 12px; padding-left: 20px; }
.guia-corpo li { margin-bottom: 7px; }
.guia-corpo strong { color: #0f4c47; }

/* O aviso é o que impede o erro seguinte. Ele tem de interromper a leitura —
   se ficar igual ao resto do texto, é pulado. */
.guia-aviso {
  border-left: 3px solid #d99a2b; background: #fdf7ec;
  padding: 11px 14px; border-radius: 0 8px 8px 0; margin: 0 0 12px;
  font-size: 0.875rem; line-height: 1.5; color: #5b4a2a;
}

.guia-video { margin: 0; }
.guia-video video {
  width: 100%; border-radius: 10px; border: 1px solid #dbe3e9; background: #16232e;
  display: block;
}
.guia-video figcaption { margin-top: 8px; font-size: 0.75rem; color: #7a8997; }

/* CAIXA ALTA SEM ESTILO INLINE.
   Isto era `style="text-transform:uppercase"` no campo do código do terminal,
   e o cabeçalho serve `style-src 'self'`: o Chrome bloqueava e escrevia uma
   linha de aviso no console a cada carregamento da tela. O dono reportou três
   vezes. Atributo de estilo não passa por CSP — classe passa. */
[data-caixa-alta] { text-transform: uppercase; }

/* -- Os 14 da banca da Inicio (2026-08-26) --------------------------------- */
/* 5) o placar navega: botao com cara de cartao, foco de teclado visivel */
.stat-cartao { font: inherit; text-align: left; cursor: pointer; transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease; }
.stat-cartao:hover, .stat-cartao:focus-visible { transform: translateY(-2px); border-color: color-mix(in srgb, var(--app-green) 45%, #e2e8ec); box-shadow: 0 8px 20px rgba(16, 42, 44, .12); }
.stat-cartao:focus-visible { outline: 3px solid var(--app-orange); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .stat-cartao, .stat-cartao:hover, .stat-cartao:focus-visible { transform: none; transition: none; } }
/* 10) zerado desbota */
.stat-cartao[data-zerada="1"] { opacity: .55; }
/* 6) na Inicio, a barra de atalhos do topo some — o rodape do lancador ja diz */
body[data-tela="inicio"] .workspace-keyboard-bar { display: none; }
/* 7) a listra de rolagem sob o menu nao aparece sem precisar */
.app-body .erp-header .module-nav { scrollbar-width: none; }
.app-body .erp-header .module-nav::-webkit-scrollbar { display: none; }
/* 3) contexto em UMA linha: informacao a esquerda, acoes juntas a direita */
.launcher-context { display: flex; align-items: center; gap: 14px; }
.launcher-context > div { margin: 0; }
.launcher-context .context-team-link { margin: 0; }
/* o primeiro botao empurra o bloco de acoes para a direita — o monograma e o
   texto ficam juntos a esquerda */
.launcher-context .context-team-link:first-of-type { margin-left: auto; }
/* 8) familias de cor por zona — a grade ganha leitura */
.launcher-tile[data-familia="dinheiro"] svg { background: #e9f5ef; stroke: #22704b; }
.launcher-tile[data-familia="operacao"] svg { background: #f6efe4; stroke: #8a6420; }
.launcher-tile[data-familia="pessoas"] svg { background: #f0eef8; stroke: #5b4b96; }
.launcher-tile[data-familia="relatorio"] svg { background: #eef4fb; stroke: #2c5d9c; }
.launcher-tile[data-familia="canal"] svg { background: #e8f4f6; stroke: #1f6e7e; }
/* 9) o Caixa (F10) com meia-enfase: entre o heroi Venda e os comuns */
.launcher-tile[data-shortcut="F10"] { border-color: color-mix(in srgb, var(--app-green) 35%, #e2e8ec); }

/* O Excluir da listagem: presente, mas sem gritar mais que o Editar. */
.prod-excluir { border-color: #d8b4b0; color: #a1453d; }
.prod-excluir:hover { border-color: #a1453d; background: #fdf3f2; }

/* O "Conectando…" que demora explica por quê: o título em negrito, a
   explicação em peso normal (28/09/2026). */
[data-auth-pending-texto] { font-weight: 500; color: #3b5058; }