/* ======================================================================
   SpeedAssure — Design System (tokens centralizados)
   Fonte de verdade: reference/styles.css do handoff de design.
   Todos os valores OKLCH são mantidos — .NET 10 roda em browsers modernos.
   ====================================================================== */

/* ── Fontes ─────────────────────────────────────────────────────────── */
/* (carregadas via <link> no App.razor) */

/* ── Tokens base — tema claro (:root) ──────────────────────────────── */
:root {
  /* Marca — Nova Identidade Visual SpeedAssure */
  --ink:           #122539;                 /* navy do escudo — títulos */
  --ink-soft:      #262F38;                 /* texto principal */
  --brand:         #26689B;                 /* azul petróleo — marca */
  --brand-strong:  #0C4A7A;                 /* petróleo escuro — gradiente */
  --accent:        #24BA78;                 /* verde esmeralda — ação principal */
  --accent-deep:   #03915A;                 /* esmeralda profundo — hover */

  /* Neutros frios — Tema Claro */
  --bg:            #EEF3F7;                 /* fundo geral */
  --canvas:        #EEF3F7;                 /* canvas */
  --surface:       #FFFFFF;                 /* cartões / painéis */
  --surface-2:     #F8FAFD;                 /* realce sutil */
  --border:        #DFE4E8;                 /* bordas */
  --border-soft:   #F8FAFD;                 /* bordas suaves */
  --text:          #262F38;                 /* texto principal */
  --text-2:        #5C646D;                 /* texto secundário */
  --text-3:        #838A92;                 /* texto terciário */

  /* Semânticas — Estados */
  --danger:        #D74745;                 /* erro / perigo */
  --warn:          #E69825;                 /* alerta (âmbar) */
  --warn-deep:     #A75C00;                 /* alerta escuro */

  /* Tints — Transparências */
  --accent-rgbtint: rgba(36, 186, 120, 0.12);  /* verde esmeralda com 12% opacidade */
  --brand-tint:     rgba(38, 104, 155, 0.10);  /* azul petróleo com 10% opacidade */

  /* Raios */
  --r-xs: 8px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 26px;

  /* Sombras — baseadas no Navy */
  --shadow-xs: 0 1px 2px rgba(18, 37, 57, 0.06);
  --shadow-sm: 0 2px 8px rgba(18, 37, 57, 0.07),
               0 1px 2px rgba(18, 37, 57, 0.05);
  --shadow-md: 0 10px 28px -8px rgba(18, 37, 57, 0.18),
               0 2px 6px       rgba(18, 37, 57, 0.06);
  --shadow-lg: 0 24px 60px -16px rgba(18, 37, 57, 0.30);

  /* Espaçamento — densidade confortável (padrão) */
  --pad:     26px;
  --row-pad: 11px;
  --gap:     18px;

  /* Sidebar */
  --sidebar-w: 268px;
  --rail-w:    76px;

  /* Tipografia */
  --font-display: 'Space Grotesk', system-ui, sans-serif;
  --font-ui:      'Hanken Grotesk', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, monospace;

  /* Transição */
  --ease: cubic-bezier(.22, .61, .36, 1);
}

/* ── Densidade compacta ─────────────────────────────────────────────── */
[data-density="compacta"] {
  --pad:     18px;
  --row-pad: 8px;
  --gap:     13px;
}

/* ── Tema escuro ────────────────────────────────────────────────────── */
[data-theme="escuro"] {
  --bg:          #081019;                   /* fundo geral escuro */
  --canvas:      #081019;                   /* canvas escuro */
  --surface:     #161F28;                   /* cartões escuro */
  --surface-2:   #1A2330;                   /* superfície secundária escura */
  --border:      #2B343D;                   /* bordas escuro */
  --border-soft: #252E36;                   /* bordas suaves escuro */
  --text:        #FFFFFF;                   /* texto principal (branco no escuro) */
  --text-2:      #B3BCC7;                   /* texto secundário escuro */
  --text-3:      #7A8592;                   /* texto terciário escuro */
  --ink:         #FFFFFF;                   /* ink principal (branco) */
  --ink-soft:    #B3BCC7;                   /* ink suave */
  --shadow-sm:   0 2px 8px rgba(0, 0, 0, 0.28);
  --shadow-md:   0 14px 34px -10px rgba(0, 0, 0, 0.5);
  --shadow-lg:   0 30px 70px -18px rgba(0, 0, 0, 0.62);
  --brand-tint:      rgba(38, 104, 155, 0.18);
  --accent-rgbtint:  rgba(36, 186, 120, 0.18);
}

/* ── Reset e base ───────────────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body { height: 100%; }

body {
  font-family: var(--font-ui);
  background: var(--canvas);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  font-size: 14px;
  line-height: 1.5;
  overscroll-behavior-x: none;
}

::selection {
  background: oklch(0.70 0.155 158 / 0.30);  /* accent com 30% — bem visível */
  color: var(--ink);
}

button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 20px;
  border: 3px solid transparent;
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--text-3);
  background-clip: padding-box;
}

/* ── Utilitários de tipografia ──────────────────────────────────────── */
.mono {
  font-family: var(--font-mono);
  font-feature-settings: "tnum" 1;
}

.eyebrow {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text-3);
}

/* ── Ícone SVG inline ───────────────────────────────────────────────── */
.ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
  flex-shrink: 0;
}
.ico svg { width: 1em; height: 1em; stroke-width: 1.9; display: block; }

/* ======================================================================
   SHELL
   ====================================================================== */
.sa-app {
  display: flex;
  height: 100vh;
  overflow: hidden;
  padding: 14px;
  gap: 14px;
  background:
    radial-gradient(1200px 600px at -10% -10%, var(--brand-tint), transparent 60%),
    var(--canvas);
}
[data-nav="classico"] .sa-app { padding: 0; gap: 0; }

/* ── Sidebar ────────────────────────────────────────────────────────── */
.sa-sb {
  width: var(--sidebar-w);
  flex-shrink: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: width .32s var(--ease);
  position: relative;
}
[data-nav="classico"] .sa-sb {
  border-radius: 0;
  border-width: 0 1px 0 0;
  box-shadow: none;
}
.sa-sb.collapsed { width: var(--rail-w); }

/* Cabeçalho sidebar */
.sa-sb-head {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 18px 18px 16px;
  min-height: 72px;
}
.sa-sb-logo {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: 11px;
  background: linear-gradient(150deg, var(--ink), var(--brand-strong));
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.sa-sb-logo img { width: 30px; height: 30px; object-fit: contain; }

.sa-sb-brand {
  display: flex;
  flex-direction: column;
  line-height: 1.05;
  overflow: hidden;
  white-space: nowrap;
  flex: 1;
}
.sa-sb-brand b {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  color: var(--ink);
  letter-spacing: -.01em;
}
.sa-sb-brand b span { color: var(--accent-deep); }
.sa-sb-brand small {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-top: 3px;
}

.sa-sb-collapse {
  margin-left: auto;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-3);
  font-size: 17px;
  transition: .16s var(--ease);
  flex-shrink: 0;
}
.sa-sb-collapse:hover { background: var(--surface-2); color: var(--ink); }
.sa-sb.collapsed .sa-sb-brand,
.sa-sb.collapsed .sa-sb-collapse { display: none; }
.sa-sb.collapsed .sa-sb-head { justify-content: center; padding: 18px 0 16px; }

/* Seletor de empresa */
.sa-biz {
  margin: 0 14px 6px;
  padding: 9px 11px;
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--surface-2);
  cursor: pointer;
  transition: .16s var(--ease);
}
.sa-biz:hover { border-color: var(--accent); }
.sa-biz-avatar {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  flex-shrink: 0;
  background: linear-gradient(140deg, var(--accent), var(--accent-deep));
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 12px;
}
.sa-biz-info { overflow: hidden; line-height: 1.2; flex: 1; }
.sa-biz-info b {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}
.sa-biz-info small { font-size: 10.5px; color: var(--text-3); }
.sa-biz .sa-biz-chevron { color: var(--text-3); font-size: 15px; }
.sa-sb.collapsed .sa-biz { justify-content: center; padding: 9px 0; margin: 0 12px 6px; }
.sa-sb.collapsed .sa-biz-info,
.sa-sb.collapsed .sa-biz .sa-biz-chevron { display: none; }

/* Nav scroll */
.sa-sb-nav {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 8px 14px 14px;
}
.sa-sb.collapsed .sa-sb-nav { padding: 8px 12px 14px; }

/* Favoritos / grupo rápido */
.sa-quick { margin: 2px 0 6px; }
.sa-sb.collapsed .sa-quick { display: none; }

/* Seções */
.sa-nav-section { margin-top: 14px; }
.sa-nav-section:first-child { margin-top: 4px; }

.sa-nav-sec-head {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 6px 10px;
  border-radius: 8px;
  color: var(--text-3);
  transition: .16s var(--ease);
  background: none;
  border: none;
  cursor: pointer;
}
.sa-nav-sec-head:hover { color: var(--ink); }
.sa-nav-sec-head .sa-sec-lbl {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  flex: 1;
  text-align: left;
}
.sa-nav-sec-head .sa-sec-chev {
  font-size: 14px;
  transition: transform .26s var(--ease);
  display: inline-flex;
  align-items: center;
}
.sa-nav-section.open .sa-nav-sec-head .sa-sec-chev { transform: rotate(90deg); }
.sa-sb.collapsed .sa-nav-sec-head { justify-content: center; padding: 6px 0; }
.sa-sb.collapsed .sa-nav-sec-head .sa-sec-lbl,
.sa-sb.collapsed .sa-nav-sec-head .sa-sec-chev { display: none; }
.sa-sb.collapsed .sa-nav-sec-head::after {
  content: "";
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: var(--border);
}

/* Items da nav */
.sa-nav-items {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows .28s var(--ease), opacity .2s var(--ease);
  overflow: hidden;
}
.sa-nav-section:not(.open) .sa-nav-items {
  grid-template-rows: 0fr;
  opacity: 0;
}
.sa-nav-items > div {
  overflow: hidden;
  min-height: 0;
  padding-top: 3px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.sa-nav-link {
  position: relative;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 11px;
  border-radius: var(--r-sm);
  color: var(--text-2);
  font-size: 13.5px;
  font-weight: 500;
  width: 100%;
  text-align: left;
  transition: .15s var(--ease);
  white-space: nowrap;
  text-decoration: none;
  background: none;
  border: none;
  cursor: pointer;
}
.sa-nav-link .sa-nl-ico {
  font-size: 18px;
  width: 20px;
  text-align: center;
  flex-shrink: 0;
  color: var(--text-3);
  transition: .15s var(--ease);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.sa-nav-link .sa-nl-lbl { flex: 1; overflow: hidden; text-overflow: ellipsis; }
.sa-nav-link:hover { background: var(--surface-2); color: var(--ink); }
.sa-nav-link:hover .sa-nl-ico { color: var(--ink-soft); }

.sa-nav-badge {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  padding: 1px 7px;
  border-radius: 20px;
  background: var(--accent-rgbtint);
  color: var(--accent-deep);
}
.sa-nav-badge.warn {
  background: oklch(0.74 0.15 70 / .16);
  color: var(--warn-deep);
}

/* Item ativo */
.sa-nav-link.active {
  background: var(--brand-tint);
  color: var(--ink);
  font-weight: 600;
}
.sa-nav-link.active .sa-nl-ico { color: var(--accent-deep); }
.sa-nav-link.active::before {
  content: "";
  position: absolute;
  left: -14px;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 21px;
  border-radius: 0 4px 4px 0;
  background: linear-gradient(var(--accent), var(--accent-deep));
}

/* Rail (collapsed) */
.sa-sb.collapsed .sa-nav-link { justify-content: center; padding: 10px 0; }
.sa-sb.collapsed .sa-nav-link .sa-nl-lbl,
.sa-sb.collapsed .sa-nav-link .sa-nav-badge { display: none; }
.sa-sb.collapsed .sa-nav-link.active::before { left: -12px; }
.sa-sb.collapsed .sa-nav-link[data-tip]:hover::after {
  content: attr(data-tip);
  position: absolute;
  left: calc(100% + 14px);
  top: 50%;
  transform: translateY(-50%);
  background: var(--ink);
  color: #fff;
  font-size: 12px;
  font-weight: 500;
  padding: 6px 11px;
  border-radius: 8px;
  white-space: nowrap;
  z-index: 60;
  box-shadow: var(--shadow-md);
  pointer-events: none;
}

/* Rodapé sidebar */
.sa-sb-foot {
  padding: 12px 14px 14px;
  border-top: 1px solid var(--border-soft);
  display: flex;
  align-items: center;
  gap: 10px;
}
.sa-sb-foot .sa-uava {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  flex-shrink: 0;
  background: linear-gradient(140deg, var(--brand), var(--brand-strong));
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 13px;
}
.sa-sb-foot .sa-uinfo { flex: 1; overflow: hidden; line-height: 1.25; }
.sa-sb-foot .sa-uinfo b {
  font-size: 12.5px;
  color: var(--ink);
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sa-sb-foot .sa-uinfo small { font-size: 10.5px; color: var(--text-3); }
.sa-sb-foot .sa-out {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-3);
  font-size: 17px;
  transition: .15s var(--ease);
  background: none;
  border: none;
  cursor: pointer;
}
.sa-sb-foot .sa-out:hover {
  background: oklch(0.60 0.18 25 / .12);
  color: var(--danger);
}
.sa-sb.collapsed .sa-sb-foot { justify-content: center; }
.sa-sb.collapsed .sa-sb-foot .sa-uinfo,
.sa-sb.collapsed .sa-sb-foot .sa-out { display: none; }

/* Versão */
.sa-sb-version {
  padding: 4px 18px 14px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  color: var(--text-2);       /* mais escuro que text-3 → mais visível */
  letter-spacing: .06em;
  flex-shrink: 0;             /* garante que não seja espremido */
}
.sa-sb.collapsed .sa-sb-version { display: none; }

/* ── Scrim mobile ───────────────────────────────────────────────────── */
.sa-scrim { display: none; }

/* ======================================================================
   MAIN (cartão direito)
   ====================================================================== */
.sa-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
[data-nav="classico"] .sa-main {
  border-radius: 0;
  border-width: 0;
  box-shadow: none;
}

/* ── Topbar ─────────────────────────────────────────────────────────── */
.sa-topbar {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px var(--pad);
  border-bottom: 1px solid var(--border-soft);
  background: color-mix(in oklch, var(--surface) 86%, transparent);
  backdrop-filter: saturate(1.2) blur(6px);
  position: sticky;
  top: 0;
  z-index: 20;
  flex-shrink: 0;
}

.sa-tb-title { display: flex; flex-direction: column; line-height: 1.12; }
.sa-tb-title h1 {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -.01em;
}
.sa-tb-title .sa-crumb {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .08em;
  color: var(--text-3);
  text-transform: uppercase;
  margin-bottom: 2px;
}

.sa-tb-search {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 10px;
  width: min(360px, 38vw);
  padding: 9px 13px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  color: var(--text-3);
  transition: .18s var(--ease);
  cursor: text;
}
.sa-tb-search:hover { border-color: var(--accent); }
.sa-tb-search .sa-tb-ph { flex: 1; font-size: 13px; }
.sa-tb-search kbd {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--text-2);
  background: var(--surface);
  border: 1px solid var(--border);
  border-bottom-width: 2px;
  border-radius: 6px;
  padding: 2px 7px;
}

.sa-tb-actions { display: flex; align-items: center; gap: 8px; }

.sa-icon-btn {
  width: 38px;
  height: 38px;
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-2);
  font-size: 18px;
  border: 1px solid transparent;
  transition: .15s var(--ease);
  position: relative;
  background: none;
  cursor: pointer;
}
.sa-icon-btn:hover {
  background: var(--surface-2);
  color: var(--ink);
  border-color: var(--border);
}
.sa-icon-btn .sa-dot {
  position: absolute;
  top: 9px;
  right: 9px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  border: 2px solid var(--surface);
}

/* Chip de perfil */
.sa-role-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 7px 7px 12px;
  border: 1px solid var(--border);
  border-radius: 30px;
  background: var(--surface-2);
  font-size: 12.5px;
  color: var(--text);
  transition: .15s var(--ease);
  cursor: pointer;
  background: none;
}
.sa-role-chip:hover { border-color: var(--accent); }
.sa-role-chip .sa-dotc {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
}
.sa-role-chip b { font-weight: 600; color: var(--ink); }
.sa-role-chip .sa-ravatar {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: linear-gradient(140deg, var(--brand), var(--brand-strong));
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 600;
}

/* Dropdown do chip */
.sa-menu-pop {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 50;
  min-width: 230px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-lg);
  padding: 6px;
  animation: sa-pop .16s var(--ease);
}
@keyframes sa-pop {
  from { opacity: 0; transform: translateY(-6px) scale(.98); }
  to   { opacity: 1; transform: none; }
}
.sa-menu-pop .sa-mp-lbl { padding: 8px 10px 5px; font-size: 11px; color: var(--text-3); }
.sa-menu-pop button {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: left;
  padding: 9px 10px;
  border-radius: 9px;
  font-size: 13px;
  color: var(--text);
  transition: .12s var(--ease);
  background: none;
  border: none;
  cursor: pointer;
}
.sa-menu-pop button:hover { background: var(--surface-2); }
.sa-menu-pop button.sel { background: var(--brand-tint); color: var(--ink); font-weight: 600; }

/* Botão menu (mobile) */
.sa-menu-toggle {
  display: none;
  width: 38px;
  height: 38px;
  border-radius: 11px;
  align-items: center;
  justify-content: center;
  color: var(--text-2);
  font-size: 22px;
  background: none;
  border: none;
  cursor: pointer;
}
.sa-menu-toggle:hover { background: var(--surface-2); color: var(--ink); }

/* Aviso de vencimento */
.sa-venc-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px var(--pad);
  background: oklch(0.74 0.15 70 / .14);
  border-bottom: 1px solid oklch(0.74 0.15 70 / .3);
  font-size: 13px;
  color: var(--warn-deep);
}
.sa-venc-banner button {
  font-size: 18px;
  color: var(--warn-deep);
  opacity: .6;
  line-height: 1;
  background: none;
  border: none;
  cursor: pointer;
}
.sa-venc-banner button:hover { opacity: 1; }

/* ── Conteúdo ───────────────────────────────────────────────────────── */
.sa-content {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: var(--pad);
  background: var(--canvas);
}
[data-nav="classico"] .sa-content { background: var(--bg); }

/* PDV full-page: cancela o padding do sa-content para o grid ocupar 100%
   :has() suportado em Chrome 105+, Firefox 121+, Safari 15.4+ */
.sa-content:has(.sa-pdv) {
  padding: 0;
  overflow: hidden;
}

/* ======================================================================
   COMMAND PALETTE
   ====================================================================== */
.sa-cmd-back {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: oklch(0.20 0.03 250 / 0.42);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 13vh;
  animation: sa-fade .14s var(--ease);
}
@keyframes sa-fade { from { opacity: 0; } to { opacity: 1; } }

.sa-cmd {
  width: min(620px, 92vw);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  animation: sa-cmdin .2s var(--ease);
}
@keyframes sa-cmdin {
  from { opacity: 0; transform: translateY(-12px) scale(.98); }
  to   { opacity: 1; transform: none; }
}

.sa-cmd-input {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 17px 20px;
  border-bottom: 1px solid var(--border-soft);
}
.sa-cmd-input .sa-cmd-ico { font-size: 20px; color: var(--text-3); }
.sa-cmd-input input {
  flex: 1;
  border: none;
  outline: none;
  background: none;
  font-family: var(--font-ui);
  font-size: 16px;
  color: var(--text);
}
.sa-cmd-input input::placeholder { color: var(--text-3); }
.sa-cmd-input kbd {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-3);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 3px 8px;
}

.sa-cmd-list { max-height: 54vh; overflow-y: auto; overflow-x: hidden; padding: 8px; }
.sa-cmd-grp {
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-3);
  padding: 10px 12px 6px;
}
.sa-cmd-item {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 11px 13px;
  border-radius: 11px;
  cursor: pointer;
  transition: .1s var(--ease);
}
.sa-cmd-item .sa-ci {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: var(--surface-2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  color: var(--text-2);
  flex-shrink: 0;
}
.sa-cmd-item .sa-ct { flex: 1; }
.sa-cmd-item .sa-ct b  { font-size: 13.5px; font-weight: 600; color: var(--ink); display: block; }
.sa-cmd-item .sa-ct small { font-size: 11.5px; color: var(--text-3); }
.sa-cmd-item .sa-cs {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-3);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 2px 7px;
}
.sa-cmd-item.cur { background: var(--brand-tint); }
.sa-cmd-item.cur .sa-ci { background: var(--accent); color: #fff; }
.sa-cmd-item.cur .sa-ct small { color: var(--ink-soft); }
.sa-cmd-empty { padding: 38px 20px; text-align: center; color: var(--text-3); font-size: 13px; }
.sa-cmd-foot {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 11px 18px;
  border-top: 1px solid var(--border-soft);
  background: var(--surface-2);
}
.sa-cmd-foot span { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--text-3); }
.sa-cmd-foot kbd {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-2);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 2px 6px;
  min-width: 18px;
  text-align: center;
}

/* ======================================================================
   DASHBOARD
   ====================================================================== */
.sa-page-intro {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 22px;
  flex-wrap: wrap;
}
.sa-page-intro h2 {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -.015em;
}
.sa-page-intro p { color: var(--text-2); font-size: 13.5px; margin-top: 3px; }

/* Segmented control */
.sa-seg {
  display: flex;
  gap: 3px;
  padding: 3px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
}
.sa-seg button {
  padding: 7px 14px;
  border-radius: 9px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text-2);
  transition: .14s var(--ease);
  background: none;
  border: none;
  cursor: pointer;
}
.sa-seg button.on { background: var(--ink); color: #fff; font-weight: 600; }
[data-theme="escuro"] .sa-seg button.on { background: var(--accent-deep); }

/* KPIs */
.sa-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--gap);
  margin-bottom: var(--gap);
}
.sa-kpi {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 18px;
  position: relative;
  overflow: hidden;
  transition: .2s var(--ease);
}
.sa-kpi:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.sa-kpi-top { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.sa-kpi-ic {
  width: 38px;
  height: 38px;
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 19px;
}
.sa-kpi-ic.g { background: var(--accent-rgbtint); color: var(--accent-deep); }
.sa-kpi-ic.b { background: var(--brand-tint); color: var(--brand); }
.sa-kpi-ic.o { background: oklch(0.74 0.15 70 / .16); color: var(--warn-deep); }
.sa-kpi-ic.p { background: oklch(0.62 0.16 300 / .14); color: oklch(0.52 0.16 300); }
.sa-kpi .sa-kpi-lbl { font-size: 12px; color: var(--text-2); font-weight: 500; flex: 1; }
.sa-kpi .sa-kpi-val {
  font-family: var(--font-mono);
  font-size: 27px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -.02em;
  line-height: 1;
}
.sa-kpi .sa-kpi-val small { font-size: 15px; color: var(--text-3); font-weight: 500; }
.sa-kpi-foot { display: flex; align-items: center; gap: 7px; margin-top: 11px; }
.sa-trend {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 20px;
}
.sa-trend.up { background: var(--accent-rgbtint); color: var(--accent-deep); }
.sa-trend.down { background: oklch(0.60 0.18 25 / .13); color: var(--danger); }
.sa-kpi-foot span { font-size: 11.5px; color: var(--text-3); }
.sa-spark {
  position: absolute;
  right: 14px;
  bottom: 14px;
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 26px;
  opacity: .85;
}
.sa-spark i {
  width: 4px;
  border-radius: 2px;
  background: linear-gradient(var(--accent), var(--accent-deep));
  display: block;
}

/* Grid 2 colunas painéis */
.sa-grid-2 {
  display: grid;
  grid-template-columns: 1.55fr 1fr;
  gap: var(--gap);
  margin-bottom: var(--gap);
}
.sa-grid-2-equal {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap);
  margin-bottom: var(--gap);
}

/* Painel genérico */
.sa-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 20px;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.sa-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
  gap: 10px;
}
.sa-panel-head h3 {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
}
.sa-panel-head .sa-link {
  font-size: 12px;
  color: var(--accent-deep);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  text-decoration: none;
  background: none;
  border: none;
  cursor: pointer;
}
.sa-panel-head .sa-link:hover { text-decoration: underline; }

/* Gráfico de barras */
.sa-chart {
  display: flex;
  align-items: flex-end;
  gap: 9px;
  height: 190px;
  padding-top: 8px;
}
.sa-chart .sa-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  height: 100%;
  justify-content: flex-end;
}
.sa-chart .sa-bar {
  width: 100%;
  max-width: 30px;
  border-radius: 7px 7px 3px 3px;
  background: linear-gradient(var(--accent), var(--accent-deep));
  transition: height .5s var(--ease);
}
.sa-chart .sa-bar.mut { background: var(--border); }
.sa-chart .sa-bar:hover { filter: brightness(1.05); }
.sa-chart .sa-xl {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-3);
}

/* Linhas de lista */
.sa-lrow {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: var(--row-pad) 0;
  border-bottom: 1px solid var(--border-soft);
}
.sa-lrow:last-child { border-bottom: none; }
.sa-lrow .sa-rk {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-3);
  width: 18px;
}
.sa-lrow .sa-nm { flex: 1; font-size: 13px; font-weight: 500; color: var(--ink); }
.sa-lrow .sa-nm small { display: block; font-weight: 400; color: var(--text-3); font-size: 11px; }
.sa-lrow .sa-qt { font-family: var(--font-mono); font-size: 12.5px; color: var(--text-2); }
.sa-lrow .sa-vl { font-family: var(--font-mono); font-size: 13px; font-weight: 600; color: var(--ink); }
.sa-lbar { height: 5px; border-radius: 3px; background: var(--border-soft); margin-top: 5px; overflow: hidden; }
.sa-lbar i { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, var(--accent), var(--accent-deep)); }
.sa-lbar.warn i { background: linear-gradient(90deg, var(--warn), var(--warn-deep)); }

/* Tabela */
.sa-tbl { width: 100%; border-collapse: collapse; }
.sa-tbl th {
  text-align: left;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-3);
  padding: 0 12px 11px;
  border-bottom: 1px solid var(--border);
}
.sa-tbl td {
  padding: 12px;
  border-bottom: 1px solid var(--border-soft);
  font-size: 13px;
  color: var(--text);
}
.sa-tbl tr:last-child td { border-bottom: none; }
.sa-tbl tbody tr { transition: .12s var(--ease); }
.sa-tbl tbody tr:hover { background: var(--surface-2); }
.sa-tbl .sa-cell-id { display: flex; align-items: center; gap: 9px; }
.sa-tbl .sa-cell-av {
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: var(--brand-tint);
  color: var(--brand);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 11px;
}

/* Pílulas de status */
.sa-pill {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 20px;
}
.sa-pill.ok   { background: var(--accent-rgbtint); color: var(--accent-deep); }
.sa-pill.pend { background: oklch(0.74 0.15 70 / .16); color: var(--warn-deep); }
.sa-pill.fis  { background: var(--brand-tint); color: var(--brand); }

/* ======================================================================
   PDV
   ====================================================================== */
.sa-pdv {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: var(--gap);
  height: 100%;
  min-height: 0;
}
.sa-pdv-left { display: flex; flex-direction: column; min-height: 0; min-width: 0; }

.sa-pdv-find {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 220px;
  padding: 11px 15px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  color: var(--text-3);
  margin-bottom: 14px;
}
.sa-pdv-find input {
  border: none;
  outline: none;
  background: none;
  flex: 1;
  font-family: var(--font-ui);
  font-size: 14px;
  color: var(--text);
}
.sa-pdv-find input::placeholder { color: var(--text-3); }
.sa-pdv-find .sa-find-ico { font-size: 18px; }

/* Abas de categoria */
.sa-cat-tabs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 4px;
  margin-bottom: 14px;
  scrollbar-width: none;
}
.sa-cat-tabs::-webkit-scrollbar { display: none; }
.sa-cat-tab {
  padding: 8px 16px;
  border-radius: 30px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-2);
  background: var(--surface);
  border: 1px solid var(--border);
  white-space: nowrap;
  transition: .15s var(--ease);
  cursor: pointer;
}
.sa-cat-tab:hover { border-color: var(--accent); }
.sa-cat-tab.on { background: var(--ink); color: #fff; border-color: var(--ink); font-weight: 600; }
[data-theme="escuro"] .sa-cat-tab.on { background: var(--accent-deep); border-color: var(--accent-deep); }

/* Grade de produtos */
.sa-pdv-grid {
  flex: 1;
  overflow-y: auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px;
  align-content: start;
  padding-right: 4px;
}

/* Tile de produto */
.sa-ptile {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 14px;
  cursor: pointer;
  transition: .16s var(--ease);
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-align: left;
  min-height: 128px;
  position: relative;
  width: 100%;
}
.sa-ptile:hover { border-color: var(--accent); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.sa-ptile:active { transform: scale(.97); }
.sa-ptile-ic {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: var(--brand-tint);
  color: var(--brand);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 21px;
}
.sa-ptile-nm { font-size: 13.5px; font-weight: 600; color: var(--ink); line-height: 1.25; flex: 1; }
.sa-ptile-pr { font-family: var(--font-mono); font-size: 15px; font-weight: 600; color: var(--ink); }
.sa-ptile-pr small { font-size: 11px; color: var(--text-3); font-weight: 500; }
.sa-ptile-low {
  position: absolute;
  top: 10px;
  right: 10px;
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 20px;
  background: oklch(0.74 0.15 70 / .18);
  color: var(--warn-deep);
}

/* Carrinho */
.sa-cart {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}
.sa-cart-head {
  padding: 16px 18px;
  border-bottom: 1px solid var(--border-soft);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}
.sa-cart-head h3 {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: 8px;
}
.sa-cart-head .sa-clr {
  font-size: 12px;
  color: var(--text-3);
  display: flex;
  align-items: center;
  gap: 4px;
  background: none;
  border: none;
  cursor: pointer;
}
.sa-cart-head .sa-clr:hover { color: var(--danger); }

.sa-cart-cli {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 18px;
  border-bottom: 1px solid var(--border-soft);
  color: var(--text-2);
  font-size: 13px;
  cursor: pointer;
  background: none;
  border-left: none;
  border-right: none;
  border-top: none;
  width: 100%;
  text-align: left;
}
.sa-cart-cli:hover { background: var(--surface-2); }

.sa-cart-items { flex: 1; overflow-y: auto; padding: 6px 0; }

.sa-citem {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 11px 18px;
}
.sa-citem-nm { flex: 1; min-width: 0; }
.sa-citem-nm b { font-size: 13px; font-weight: 600; color: var(--ink); display: block; line-height: 1.3; }
.sa-citem-nm small { font-family: var(--font-mono); font-size: 11px; color: var(--text-3); }

.sa-qty {
  display: flex;
  align-items: center;
  gap: 0;
  border: 1px solid var(--border);
  border-radius: 9px;
  overflow: hidden;
}
.sa-qty button {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-2);
  font-size: 15px;
  transition: .12s var(--ease);
  background: none;
  border: none;
  cursor: pointer;
}
.sa-qty button:hover { background: var(--accent); color: #fff; }
.sa-qty span {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  min-width: 26px;
  text-align: center;
  color: var(--ink);
}
.sa-citem-tot {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  min-width: 62px;
  text-align: right;
}

.sa-cart-empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: var(--text-3);
  padding: 40px;
  text-align: center;
}
.sa-cart-empty .sa-cart-empty-ico { font-size: 46px; opacity: .4; }

.sa-cart-foot {
  border-top: 1px solid var(--border-soft);
  padding: 16px 18px;
  background: var(--surface-2);
  flex-shrink: 0;
}
.sa-cart-line {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  color: var(--text-2);
  margin-bottom: 7px;
}
.sa-cart-line.total { margin: 12px 0 14px; }
.sa-cart-line.total b { font-family: var(--font-display); font-size: 14px; color: var(--ink); }
.sa-cart-line.total .sa-amt {
  font-family: var(--font-mono);
  font-size: 26px;
  font-weight: 700;
  color: var(--ink);
}

.sa-pay-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.sa-pay-btn {
  padding: 13px;
  border-radius: var(--r-md);
  font-size: 13px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  transition: .15s var(--ease);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
}
.sa-pay-btn:hover { border-color: var(--accent); }
.sa-pay-btn.main {
  grid-column: 1 / -1;
  background: linear-gradient(120deg, var(--accent), var(--accent-deep));
  color: #fff;
  border: none;
  padding: 15px;
  font-size: 15px;
}
.sa-pay-btn.main:hover { filter: brightness(1.05); }
.sa-pay-btn.main:disabled { opacity: .5; cursor: not-allowed; filter: none; }

/* ======================================================================
   PRODUTOS (listagem)
   ====================================================================== */
.sa-btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 18px;
  border-radius: var(--r-md);
  white-space: nowrap;
  font-size: 13.5px;
  font-weight: 600;
  color: #fff;
  background: linear-gradient(120deg, var(--accent), var(--accent-deep));
  box-shadow: var(--shadow-sm);
  transition: .15s var(--ease);
  border: none;
  cursor: pointer;
  text-decoration: none;
}
.sa-btn-primary:hover { filter: brightness(1.05); box-shadow: var(--shadow-md); color: #fff; }

.sa-list-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}
.sa-list-find {
  display: flex;
  align-items: center;
  gap: 9px;
  flex: 1;
  min-width: 200px;
  max-width: 380px;
  padding: 10px 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  color: var(--text-3);
}
.sa-list-find input {
  border: none;
  outline: none;
  background: none;
  flex: 1;
  font-family: var(--font-ui);
  font-size: 13.5px;
  color: var(--text);
}
.sa-list-find input::placeholder { color: var(--text-3); }

.sa-prod-tbl-wrap {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.sa-prod-tbl { width: 100%; border-collapse: collapse; }
.sa-prod-tbl th {
  text-align: left;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-3);
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  background: var(--surface-2);
}
.sa-prod-tbl td {
  padding: 13px 18px;
  border-bottom: 1px solid var(--border-soft);
  font-size: 13.5px;
  color: var(--text);
}
.sa-prod-tbl tr:last-child td { border-bottom: none; }
.sa-prod-tbl tbody tr { transition: .12s var(--ease); cursor: pointer; }
.sa-prod-tbl tbody tr:hover { background: var(--surface-2); }

.sa-prod-cell { display: flex; align-items: center; gap: 12px; }
.sa-prod-cell .sa-pic {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: var(--brand-tint);
  color: var(--brand);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}
.sa-prod-cell b { font-size: 13.5px; font-weight: 600; color: var(--ink); display: block; }
.sa-prod-cell small { font-family: var(--font-mono); font-size: 11px; color: var(--text-3); }

.sa-stk { font-family: var(--font-mono); font-size: 12.5px; font-weight: 600; }
.sa-stk.ok2 { color: var(--accent-deep); }
.sa-stk.low { color: var(--warn-deep); }

.sa-row-act { display: flex; gap: 6px; justify-content: flex-end; }
.sa-row-act button {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-3);
  font-size: 16px;
  transition: .12s var(--ease);
  background: none;
  border: none;
  cursor: pointer;
}
.sa-row-act button:hover { background: var(--surface-2); color: var(--ink); }

/* Badge categoria */
.sa-cat-badge {
  font-size: 11.5px;
  font-weight: 500;
  padding: 3px 10px;
  border-radius: 20px;
  background: var(--brand-tint);
  color: var(--brand);
}

/* ======================================================================
   RESPONSIVO
   ====================================================================== */
@media (max-width: 1100px) {
  .sa-kpi-grid { grid-template-columns: repeat(2, 1fr); }
  .sa-grid-2 { grid-template-columns: 1fr; }
}

@media (max-width: 840px) {
  .sa-app { padding: 0; gap: 0; }
  .sa-sb {
    position: fixed;
    top: 0; left: 0; bottom: 0;
    z-index: 300;
    border-radius: 0 var(--r-lg) var(--r-lg) 0;
    transform: translateX(-100%);
    transition: transform .3s var(--ease);
  }
  .sa-sb.mobile-open { transform: none; }
  .sa-main { border-radius: 0; border: none; }
  .sa-scrim.show {
    display: block;
    position: fixed;
    inset: 0;
    background: oklch(0.2 0.03 250 / .45);
    z-index: 250;
  }
  .sa-tb-search { display: none; }
  .sa-menu-toggle { display: flex !important; }
}

@media (max-width: 1000px) {
  .sa-pdv { grid-template-columns: 1fr; }
  .sa-cart { max-height: 420px; }
}

@media (max-width: 600px) {
  .sa-kpi-grid { grid-template-columns: 1fr; }
  .sa-grid-2-equal { grid-template-columns: 1fr; }
}

/* ── Módulo Notas Fiscais (NF-e / NFC-e) ──────────────────────────────── */
.sa-nf-layout { display: grid; grid-template-columns: 1fr 380px; gap: 1.25rem; align-items: start; }
.sa-nf-produtos-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: .75rem; }

.sa-nf-produto-card {
  background: var(--sa-card); border: 1px solid var(--sa-border); border-radius: .625rem;
  padding: .875rem; cursor: pointer; transition: border-color .15s, box-shadow .15s;
}
.sa-nf-produto-card:hover { border-color: var(--sa-primary); box-shadow: 0 0 0 3px oklch(0.68 0.18 158 / .12); }
.sa-nf-produto-card.selected { border-color: var(--sa-primary); background: oklch(0.68 0.18 158 / .06); }

.sa-nf-painel {
  background: var(--sa-card); border: 1px solid var(--sa-border); border-radius: .75rem;
  display: flex; flex-direction: column; position: sticky; top: 1rem; max-height: calc(100vh - 7rem); overflow: hidden;
}
.sa-nf-painel-header { padding: 1rem 1.25rem; border-bottom: 1px solid var(--sa-border); display: flex; align-items: center; gap: .5rem; }
.sa-nf-painel-body { flex: 1; overflow-y: auto; padding: .75rem 1.25rem; }
.sa-nf-painel-footer { padding: .875rem 1.25rem; border-top: 1px solid var(--sa-border); background: var(--sa-bg); }

.sa-nf-item-row {
  display: flex; align-items: center; gap: .5rem; padding: .5rem 0;
  border-bottom: 1px solid var(--sa-border);
}
.sa-nf-item-row:last-child { border-bottom: none; }
.sa-nf-item-qty { display: flex; align-items: center; gap: .25rem; }
.sa-nf-item-qty button { width: 24px; height: 24px; border-radius: .25rem; border: 1px solid var(--sa-border); background: var(--sa-bg); cursor: pointer; font-size: .8rem; display: flex; align-items: center; justify-content: center; }
.sa-nf-item-qty input { width: 40px; text-align: center; border: 1px solid var(--sa-border); border-radius: .25rem; padding: .2rem; font-size: .85rem; }

.sa-nf-status-badge {
  display: inline-flex; align-items: center; gap: .3rem; padding: .2rem .6rem;
  border-radius: 999px; font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .03em;
}
.sa-nf-status-rascunho   { background: oklch(0.92 0.02 250); color: oklch(0.35 0.1 250); }
.sa-nf-status-pendente   { background: oklch(0.95 0.08 80);  color: oklch(0.45 0.12 80); }
.sa-nf-status-autorizada { background: oklch(0.93 0.1 158);  color: oklch(0.35 0.15 158); }
.sa-nf-status-rejeitada  { background: oklch(0.94 0.1 25);   color: oklch(0.4 0.18 25); }
.sa-nf-status-cancelada  { background: oklch(0.92 0.04 250); color: oklch(0.4 0.08 250); }
.sa-nf-status-denegada   { background: oklch(0.93 0.08 300); color: oklch(0.4 0.14 300); }

.sa-nf-tabela { width: 100%; border-collapse: collapse; }
.sa-nf-tabela th { font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--sa-text-muted); padding: .5rem .75rem; border-bottom: 1px solid var(--sa-border); white-space: nowrap; }
.sa-nf-tabela td { padding: .625rem .75rem; border-bottom: 1px solid var(--sa-border); font-size: .875rem; }
.sa-nf-tabela tr:last-child td { border-bottom: none; }
.sa-nf-tabela tr:hover td { background: var(--sa-bg); }

.sa-nf-total-row { display: flex; justify-content: space-between; align-items: center; padding: .35rem 0; font-size: .875rem; }
.sa-nf-total-row.destaque { font-weight: 700; font-size: 1rem; color: var(--sa-primary); border-top: 1px solid var(--sa-border); padding-top: .5rem; margin-top: .25rem; }

@media (max-width: 1100px) {
  .sa-nf-layout { grid-template-columns: 1fr; }
  .sa-nf-painel { position: static; max-height: none; }
}

/* ======================================================================
   DESIGN SYSTEM — shared primitives (used by fiscal + other pages)
   ====================================================================== */

/* status pill */
.pill{ font-family:var(--font-mono); font-size:10.5px; font-weight:600; padding:3px 10px; border-radius:20px; }
.pill.ok{ background:var(--accent-rgbtint); color:var(--accent-deep); }
.pill.pend{ background:oklch(0.74 0.15 70 /.16); color:var(--warn-deep); }
.pill.fis{ background:var(--brand-tint); color:var(--brand); }
.pill.err{ background:oklch(0.60 0.18 25 /.13); color:var(--danger); }
.pill.canc{ background:var(--border-soft); color:var(--text-2); }
.pill.draft{ background:oklch(0.62 0.16 300 /.13); color:oklch(0.52 0.16 300); }
.pill.ico{ display:inline-flex; align-items:center; gap:5px; }
.pill.ico .ico{ font-size:13px; }

/* context dropdown */
.menu-pop{ position:absolute; top:calc(100% + 8px); right:0; z-index:50; min-width:230px; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-md); box-shadow:var(--shadow-lg); padding:6px; animation:pop .16s var(--ease); }
@keyframes pop{ from{ opacity:0; transform:translateY(-6px) scale(.98); } to{ opacity:1; transform:none; } }
.menu-pop button{ display:flex; align-items:center; gap:10px; width:100%; text-align:left; padding:9px 10px; border-radius:9px; font-size:13px; color:var(--text); transition:.12s var(--ease); }
.menu-pop button:hover{ background:var(--surface-2); }
.menu-pop button i, .menu-pop button .mico{ font-size:16px; color:var(--text-3); width:18px; text-align:center; }
.menu-pop button.danger{ color:var(--danger); }
.menu-pop button.danger:hover{ background:oklch(0.60 0.18 25 /.10); }
.menu-pop button.danger .mico{ color:var(--danger); }
.menu-pop .mp-div{ height:1px; background:var(--border-soft); margin:5px 8px; }

/* page intro / seg */
.page-intro{ display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:22px; flex-wrap:wrap; }
.page-intro h2{ font-family:var(--font-display); font-size:24px; font-weight:600; color:var(--ink); letter-spacing:-.015em; }
.page-intro p{ color:var(--text-2); font-size:13.5px; margin-top:3px; }
.seg{ display:flex; gap:3px; padding:3px; background:var(--surface); border:1px solid var(--border); border-radius:12px; }
.seg button{ padding:7px 14px; border-radius:9px; font-size:12.5px; font-weight:500; color:var(--text-2); transition:.14s var(--ease); }
.seg button.on{ background:var(--ink); color:#fff; font-weight:600; }
[data-theme="escuro"] .seg button.on{ background:var(--accent-deep); }

/* list toolbar / table */
.list-toolbar{ display:flex; align-items:center; gap:12px; margin-bottom:18px; flex-wrap:wrap; }
.list-find{ display:flex; align-items:center; gap:9px; flex:1; min-width:200px; max-width:380px; padding:10px 14px; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-md); color:var(--text-3); }
.list-find:focus-within{ border-color:var(--accent); }
.list-find input{ border:none; outline:none; background:none; flex:1; font-family:var(--font-ui); font-size:13.5px; color:var(--text); }
.prod-tbl-wrap{ background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); overflow:hidden; }
.prod-tbl{ width:100%; border-collapse:collapse; }
.prod-tbl th{ text-align:left; font-family:var(--font-mono); font-size:10px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--text-3); padding:14px 18px; border-bottom:1px solid var(--border); background:var(--surface-2); }
.prod-tbl td{ padding:13px 18px; border-bottom:1px solid var(--border-soft); font-size:13.5px; color:var(--text); vertical-align:middle; }
.prod-tbl tr:last-child td{ border-bottom:none; }
.prod-tbl tbody tr{ transition:.12s var(--ease); cursor:default; }
.prod-tbl tbody tr:hover{ background:var(--surface-2); }

/* ======================================================================
   FISCAL — Notas (NFe/NFCe): listagem + emissão
   ====================================================================== */

.fiscal-stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--gap); margin-bottom:var(--gap); }
.fstat{ background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); padding:15px 16px; display:flex; align-items:center; gap:13px; }
.fstat .fic{ width:42px;height:42px;border-radius:12px;display:flex;align-items:center;justify-content:center;flex-shrink:0; }
.fstat .fic.g{ background:var(--accent-rgbtint); color:var(--accent-deep); }
.fstat .fic.o{ background:oklch(0.74 0.15 70 /.16); color:var(--warn-deep); }
.fstat .fic.r{ background:oklch(0.60 0.18 25 /.13); color:var(--danger); }
.fstat .fic.b{ background:var(--brand-tint); color:var(--brand); }
.fstat .fmeta{ line-height:1.15; min-width:0; }
.fstat .fmeta b{ font-family:var(--font-mono); font-size:21px; font-weight:600; color:var(--ink); display:block; letter-spacing:-.02em; }
.fstat .fmeta b small{ font-size:12px; color:var(--text-3); font-weight:500; }
.fstat .fmeta span{ font-size:11.5px; color:var(--text-2); }

.modelo{ display:flex; flex-direction:column; gap:3px; }
.modelo .mb{ font-family:var(--font-mono); font-size:10px; font-weight:600; padding:2px 8px; border-radius:6px; width:fit-content; letter-spacing:.03em; }
.modelo .mb.nfe{ background:var(--brand-tint); color:var(--brand); }
.modelo .mb.nfce{ background:var(--accent-rgbtint); color:var(--accent-deep); }
.modelo .mn{ font-family:var(--font-mono); font-size:13px; color:var(--ink); font-weight:600; }
.modelo .ms{ font-family:var(--font-mono); font-size:10.5px; color:var(--text-3); }

.dest-cell b{ font-size:13.5px; font-weight:600; color:var(--ink); display:block; line-height:1.3; }
.dest-cell small{ font-family:var(--font-mono); font-size:11px; color:var(--text-3); }
.dest-cell .anon{ color:var(--text-3); font-weight:500; font-size:12.5px; display:inline-flex; align-items:center; gap:6px; }

.nf-when b{ font-size:13px; color:var(--text); font-weight:500; display:block; }
.nf-when small{ font-family:var(--font-mono); font-size:10.5px; color:var(--text-3); }

.nf-act{ display:flex; align-items:center; gap:7px; justify-content:flex-end; }
.nf-act-wrap{ position:relative; }
.btn-sm{ display:inline-flex; align-items:center; gap:6px; padding:7px 12px; border-radius:9px; font-size:12.5px; font-weight:600; border:1px solid var(--border); background:var(--surface); color:var(--ink); transition:.13s var(--ease); white-space:nowrap; cursor:pointer; }
.btn-sm:hover{ border-color:var(--accent); color:var(--accent-deep); }
.btn-more{ width:34px;height:34px;border-radius:9px;display:flex;align-items:center;justify-content:center;color:var(--text-3);transition:.12s var(--ease); border:1px solid transparent; flex-shrink:0; cursor:pointer; background:none; }
.btn-more:hover{ background:var(--surface-2); color:var(--ink); border-color:var(--border); }

/* emissão */
.emit{ display:flex; flex-direction:column; min-height:100%; }
.emit-head{ display:flex; align-items:center; gap:14px; margin-bottom:20px; }
.emit-back{ width:42px;height:42px;border-radius:12px;border:1px solid var(--border);background:var(--surface);display:flex;align-items:center;justify-content:center;color:var(--text-2);transition:.14s var(--ease); flex-shrink:0; cursor:pointer; }
.emit-back:hover{ border-color:var(--accent); color:var(--accent-deep); }
.emit-head .eh-t{ flex:1; min-width:0; }
.emit-head h2{ font-family:var(--font-display); font-size:23px; font-weight:600; color:var(--ink); letter-spacing:-.015em; }
.emit-head p{ color:var(--text-2); font-size:13px; margin-top:2px; }
.emit-body{ display:grid; grid-template-columns:1fr 410px; gap:var(--gap); align-items:start; }
.emit-left{ min-width:0; }
.emit-find{ display:flex; align-items:center; gap:11px; padding:14px 16px; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-md); color:var(--text-3); transition:.16s var(--ease); }
.emit-find:focus-within{ border-color:var(--accent); }
.emit-find input{ border:none;outline:none;background:none;flex:1;font-family:var(--font-ui);font-size:14.5px;color:var(--text); }
.emit-hint{ font-size:12px; color:var(--text-3); margin:9px 2px 16px; display:flex; align-items:center; gap:7px; }
.fp-count{ font-family:var(--font-mono); font-size:11px; color:var(--text-3); margin:0 2px 10px; text-transform:uppercase; letter-spacing:.08em; }
.fp-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(335px,1fr)); gap:12px; }
.fp-card{ display:flex; gap:14px; padding:14px; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-md); transition:.15s var(--ease); }
.fp-card:hover{ box-shadow:var(--shadow-sm); }
.fp-card.in{ border-color:var(--accent); box-shadow:0 0 0 1px var(--accent) inset; }
.fp-thumb{ width:76px;height:76px;border-radius:12px;flex-shrink:0;background:var(--brand-tint);color:var(--brand);display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative; }
.fp-thumb img{ width:100%;height:100%;object-fit:cover; }
.fp-thumb .fp-incheck{ position:absolute; top:-7px; right:-7px; width:22px;height:22px;border-radius:50%;background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;font-size:13px;border:2px solid var(--surface); }
.fp-body{ flex:1; min-width:0; display:flex; flex-direction:column; gap:7px; }
.fp-desc{ font-size:13.5px; font-weight:600; color:var(--ink); line-height:1.32; }
.fp-meta{ display:flex; flex-wrap:wrap; gap:3px 12px; }
.fp-meta span{ font-family:var(--font-mono); font-size:10.5px; color:var(--text-3); white-space:nowrap; }
.fp-meta span b{ color:var(--text-2); font-weight:600; }
.fp-bottom{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:auto; padding-top:2px; }
.fp-price{ font-family:var(--font-mono); font-size:15.5px; font-weight:600; color:var(--ink); }
.fp-price small{ font-size:11px; color:var(--text-3); font-weight:500; }
.qty-inp{ display:flex; align-items:center; border:1px solid var(--border); border-radius:10px; overflow:hidden; background:var(--surface); }
.qty-inp button{ width:34px;height:36px;display:flex;align-items:center;justify-content:center;color:var(--text-2);transition:.12s var(--ease); cursor:pointer; background:none; border:none; }
.qty-inp button:hover{ background:var(--accent); color:#fff; }
.qty-inp button:disabled{ opacity:.4; cursor:not-allowed; }
.qty-inp button:disabled:hover{ background:none; color:var(--text-2); }
.qty-inp input{ width:48px; height:36px; border:none; outline:none; background:none; text-align:center; font-family:var(--font-mono); font-size:14px; font-weight:600; color:var(--ink); -moz-appearance:textfield; }
.qty-inp input::-webkit-outer-spin-button,.qty-inp input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.qty-inp.sm button{ width:28px;height:30px; }
.qty-inp.sm input{ width:38px;height:30px;font-size:12.5px; }

/* doc panel */
.doc-panel{ background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); position:sticky; top:0; display:flex; flex-direction:column; max-height:calc(100vh - 122px); overflow:hidden; box-shadow:var(--shadow-sm); }
.doc-h{ padding:16px 18px; border-bottom:1px solid var(--border-soft); display:flex; align-items:center; justify-content:space-between; }
.doc-h h3{ font-family:var(--font-display); font-size:15px; font-weight:600; color:var(--ink); display:flex; align-items:center; gap:8px; }
.doc-h .clr{ font-size:12px; color:var(--text-3); display:flex; align-items:center; gap:4px; cursor:pointer; background:none; border:none; }
.doc-h .clr:hover{ color:var(--danger); }
.doc-items{ overflow-y:auto; overflow-x:hidden; padding:6px 0; flex:1; min-height:90px; }
.ditem{ display:flex; align-items:center; gap:11px; padding:10px 18px; }
.ditem-nm{ flex:1; min-width:0; }
.ditem-nm b{ font-size:12.5px; font-weight:600; color:var(--ink); display:block; line-height:1.3; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ditem-nm small{ font-family:var(--font-mono); font-size:10.5px; color:var(--text-3); }
.ditem-tot{ font-family:var(--font-mono); font-size:12.5px; font-weight:600; color:var(--ink); min-width:66px; text-align:right; }
.doc-empty{ padding:36px 22px; text-align:center; color:var(--text-3); font-size:12.5px; display:flex; flex-direction:column; align-items:center; gap:11px; }
.doc-foot{ border-top:1px solid var(--border-soft); padding:16px 18px; background:var(--surface-2); overflow-y:auto; }

/* doc type selector */
.doc-type-lbl{ font-family:var(--font-mono); font-size:10px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--text-3); margin-bottom:8px; display:flex; align-items:center; gap:6px; }
.doc-type{ display:grid; grid-template-columns:1fr 1fr; gap:9px; margin-bottom:15px; }
.dt-opt{ border:1.5px solid var(--border); border-radius:var(--r-md); padding:11px 26px 11px 12px; text-align:left; transition:.14s var(--ease); background:var(--surface); position:relative; cursor:pointer; }
.dt-opt:hover{ border-color:var(--accent); }
.dt-opt.on{ border-color:var(--accent); background:var(--accent-rgbtint); }
.dt-opt b{ display:flex; align-items:center; gap:7px; font-family:var(--font-display); font-size:14px; color:var(--ink); white-space:nowrap; }
.dt-opt small{ display:block; font-size:10.5px; color:var(--text-2); margin-top:4px; line-height:1.3; }
.dt-opt.on small{ color:var(--ink-soft); }
.dt-opt .dt-check{ position:absolute; top:9px; right:9px; color:var(--accent-deep); font-size:16px; opacity:0; transition:.14s var(--ease); }
.dt-opt.on .dt-check{ opacity:1; }

/* destinatário */
.dest-box{ border:1px solid var(--border); border-radius:var(--r-md); padding:12px; margin-bottom:15px; background:var(--surface); }
.dest-lbl{ font-family:var(--font-mono); font-size:10px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--text-3); margin-bottom:9px; display:flex; align-items:center; justify-content:space-between; }
.dest-lbl .req{ color:var(--danger); letter-spacing:0; }
.dest-lbl .opt{ color:var(--text-3); letter-spacing:0; font-weight:500; text-transform:none; }
.dest-row{ display:flex; align-items:center; gap:10px; }
.dest-row .di{ width:38px;height:38px;border-radius:10px;background:var(--brand-tint);color:var(--brand);display:flex;align-items:center;justify-content:center;flex-shrink:0; }
.dest-row .dinfo{ flex:1; min-width:0; }
.dest-row .dinfo b{ font-size:13px; color:var(--ink); display:block; line-height:1.3; }
.dest-row .dinfo small{ font-size:11px; color:var(--text-3); font-family:var(--font-mono); }
.dest-row .dx{ width:30px;height:30px;border-radius:8px;display:flex;align-items:center;justify-content:center;color:var(--text-3); cursor:pointer; background:none; border:none; }
.dest-row .dx:hover{ background:var(--surface-2); color:var(--danger); }
.dest-pick{ width:100%; display:flex; align-items:center; gap:9px; padding:11px 12px; border:1px dashed var(--border); border-radius:10px; color:var(--text-2); font-size:13px; transition:.14s var(--ease); cursor:pointer; background:none; text-align:left; }
.dest-pick:hover{ border-color:var(--accent); color:var(--accent-deep); }
.dest-pick.required{ border-color:oklch(0.60 0.18 25 /.45); color:var(--text); }
.dest-pick .pchev{ margin-left:auto; color:var(--text-3); }
.dest-list{ margin-top:8px; border:1px solid var(--border); border-radius:10px; overflow:hidden; }
.dest-search{ display:flex; align-items:center; gap:8px; padding:9px 11px; border-bottom:1px solid var(--border-soft); color:var(--text-3); }
.dest-search input{ border:none;outline:none;background:none;flex:1;font-family:var(--font-ui);font-size:12.5px;color:var(--text); }
.dest-opt{ display:flex; align-items:center; gap:10px; width:100%; padding:9px 11px; text-align:left; transition:.12s var(--ease); border-bottom:1px solid var(--border-soft); cursor:pointer; background:none; border-left:none; border-right:none; border-top:none; }
.dest-opt:last-child{ border-bottom:none; }
.dest-opt:hover{ background:var(--surface-2); }
.dest-opt .da{ width:30px;height:30px;border-radius:8px;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:600;font-size:11px;background:var(--brand-tint);color:var(--brand); }
.dest-opt .dn{ flex:1; min-width:0; }
.dest-opt .dn b{ font-size:12.5px; color:var(--ink); display:block; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.dest-opt .dn small{ font-size:10.5px; color:var(--text-3); font-family:var(--font-mono); }
.dest-note{ font-size:11px; color:var(--text-3); margin-top:9px; display:flex; align-items:flex-start; gap:6px; line-height:1.4; }
.cpf-toggle{ display:inline-flex; align-items:center; gap:6px; font-size:12px; color:var(--accent-deep); font-weight:600; margin-top:4px; cursor:pointer; background:none; border:none; }
.cpf-toggle:hover{ text-decoration:underline; }
.cpf-input{ display:flex; align-items:center; gap:8px; margin-top:9px; padding:9px 11px; border:1px solid var(--border); border-radius:9px; }
.cpf-input input{ border:none;outline:none;background:none;flex:1;font-family:var(--font-mono);font-size:13px;color:var(--text); }

.doc-field{ margin-bottom:14px; }
.doc-field label{ font-family:var(--font-mono); font-size:10px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--text-3); display:block; margin-bottom:7px; }
.doc-select{ width:100%; padding:11px 12px; border:1px solid var(--border); border-radius:10px; background:var(--surface); font-family:var(--font-ui); font-size:13px; color:var(--text); cursor:pointer; }
.doc-select:focus{ outline:none; border-color:var(--accent); }
.doc-line{ display:flex; justify-content:space-between; align-items:center; font-size:13px; color:var(--text-2); margin-bottom:7px; }
.doc-line .mono{ color:var(--ink); font-weight:500; }
.doc-line.total{ margin:13px 0 15px; }
.doc-line.total b{ font-family:var(--font-display); font-size:14px; color:var(--ink); }
.doc-line.total .amt{ font-family:var(--font-mono); font-size:25px; font-weight:700; color:var(--ink); letter-spacing:-.02em; }

.btn-emit{ width:100%; padding:15px; border-radius:var(--r-md); font-size:15px; font-weight:600; color:#fff; display:flex; align-items:center; justify-content:center; gap:8px; background:linear-gradient(120deg,var(--accent),var(--accent-deep)); transition:.15s var(--ease); box-shadow:var(--shadow-sm); cursor:pointer; border:none; }
.btn-emit:hover{ filter:brightness(1.05); box-shadow:var(--shadow-md); }
.btn-emit:disabled{ opacity:.5; cursor:not-allowed; filter:none; box-shadow:none; }
.emit-warn{ font-size:11.5px; color:var(--warn-deep); margin-top:9px; display:flex; align-items:center; gap:6px; justify-content:center; }

/* NF-e accordions */
.nfe-extra-lbl{ font-family:var(--font-mono); font-size:10px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--text-3); margin-bottom:8px; display:flex; align-items:center; gap:6px; }
.nfe-extra{ margin-bottom:15px; border:1px solid var(--border); border-radius:var(--r-md); overflow:hidden; }
.acc{ border-bottom:1px solid var(--border-soft); }
.acc:last-child{ border-bottom:none; }
.acc-head{ display:flex; align-items:center; gap:10px; width:100%; padding:11px 12px; text-align:left; transition:.12s var(--ease); background:var(--surface); cursor:pointer; border:none; }
.acc-head:hover{ background:var(--surface-2); }
.acc-head .ai{ width:28px;height:28px;border-radius:8px;background:var(--brand-tint);color:var(--brand);display:flex;align-items:center;justify-content:center;flex-shrink:0; }
.acc-head .at{ flex:1; min-width:0; }
.acc-head .at b{ font-size:12.5px; font-weight:600; color:var(--ink); display:block; line-height:1.2; }
.acc-head .at small{ font-size:10.5px; color:var(--text-3); font-family:var(--font-mono); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:block; margin-top:2px; }
.acc-head .ac{ color:var(--text-3); transition:transform .24s var(--ease); flex-shrink:0; }
.acc.open .acc-head .ac{ transform:rotate(180deg); }
.acc-body{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .26s var(--ease); }
.acc.open .acc-body{ grid-template-rows:1fr; }
.acc-body > div{ overflow:hidden; min-height:0; }
.acc-inner{ padding:2px 12px 13px; }
.doc-grid2{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.doc-input{ width:100%; padding:10px 12px; border:1px solid var(--border); border-radius:9px; background:var(--surface); font-family:var(--font-ui); font-size:13px; color:var(--text); }
.doc-input:focus{ outline:none; border-color:var(--accent); }
.doc-input.mono{ font-family:var(--font-mono); }
textarea.doc-input{ resize:vertical; min-height:58px; line-height:1.4; }
.fld{ margin-bottom:11px; }
.fld:last-child{ margin-bottom:0; }
.fld label{ font-family:var(--font-mono); font-size:9.5px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--text-3); display:block; margin-bottom:5px; }

/* toast */
.toast-wrap{ position:fixed; right:20px; bottom:20px; z-index:400; display:flex; flex-direction:column; gap:10px; pointer-events:none; }
.toast{ display:flex; align-items:center; gap:11px; padding:13px 16px; background:var(--ink); color:#fff; border-radius:var(--r-md); box-shadow:var(--shadow-lg); font-size:13px; font-weight:500; animation:toastin .26s var(--ease); min-width:250px; max-width:370px; pointer-events:auto; }
[data-theme="escuro"] .toast{ background:var(--surface-2); border:1px solid var(--border); color:var(--text); }
.toast.ok .ico{ color:oklch(0.78 0.15 158); }
.toast.err .ico{ color:oklch(0.72 0.16 25); }
.toast.info .ico{ color:oklch(0.74 0.12 232); }
@keyframes toastin{ from{ opacity:0; transform:translateY(12px) scale(.97);} to{opacity:1;transform:none;} }

/* NFC-e consumer display (no customer) */
.nfc-anon{ display:flex; flex-direction:column; gap:6px; }
.nfc-anon-row{ display:flex; align-items:center; gap:10px; }
.nfc-anon-row .na-ic{ width:36px;height:36px;border-radius:9px;background:var(--surface-2);color:var(--text-3);display:flex;align-items:center;justify-content:center;flex-shrink:0; }
.nfc-anon-row .na-info{ flex:1; min-width:0; }
.nfc-anon-row .na-info b{ font-size:12.5px; color:var(--ink); display:block; }
.nfc-anon-row .na-info small{ font-size:11px; color:var(--text-3); font-family:var(--font-mono); }
.nfc-cpf-link{ display:inline-flex; align-items:center; gap:6px; font-size:12px; color:var(--accent-deep); font-weight:600; margin-top:2px; cursor:pointer; background:none; border:none; padding:0; }
.nfc-cpf-link:hover{ text-decoration:underline; }
.dest-note{ font-size:11px; color:var(--text-3); margin-top:8px; display:flex; align-items:flex-start; gap:5px; line-height:1.4; }

/* doc panel item row — 2-line format */
.ditem-info{ flex:1; min-width:0; }
.ditem-info b{ font-size:12px; font-weight:600; color:var(--ink); display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; line-height:1.3; }
.ditem-info small{ font-family:var(--font-mono); font-size:10.5px; color:var(--text-3); }
.ditem-stepper{ flex-shrink:0; }
.ditem-val{ font-family:var(--font-mono); font-size:12px; font-weight:600; color:var(--ink); min-width:50px; text-align:right; }

/* doc total section */
.doc-total-section{ border-top:1px solid var(--border-soft); margin:10px 0 4px; padding-top:10px; }
.doc-total-row{ display:flex; justify-content:space-between; font-size:12.5px; color:var(--text-2); margin-bottom:4px; }
.doc-total-row .mono{ font-family:var(--font-mono); color:var(--text); font-weight:500; }
.doc-grand{ display:flex; justify-content:space-between; align-items:baseline; margin-top:8px; }
.doc-grand b{ font-size:13px; color:var(--ink); font-weight:600; }
.doc-grand .grand-val{ font-family:var(--font-mono); font-size:22px; font-weight:700; color:var(--ink); letter-spacing:-.02em; }

/* Identificar destinatário — dropdown style */
.dest-id-btn{ width:100%; display:flex; align-items:center; gap:10px; padding:11px 12px; border:1.5px solid var(--border); border-radius:10px; background:var(--surface); text-align:left; cursor:pointer; transition:.14s var(--ease); }
.dest-id-btn:hover{ border-color:var(--accent); }
.dest-id-btn.required{ border-color:oklch(0.60 0.18 25 /.5); }
.dest-id-btn .di-label{ flex:1; font-size:13px; color:var(--text-2); }
.dest-id-btn.required .di-label{ color:var(--text); }
.dest-id-btn .di-chev{ color:var(--text-3); transition:transform .22s var(--ease); }
.dest-id-btn.open .di-chev{ transform:rotate(180deg); }

/* Client picker inline */
.dest-picker-list{ border:1px solid var(--border); border-radius:10px; overflow:hidden; margin-top:6px; }
.dest-picker-search{ display:flex; align-items:center; gap:8px; padding:9px 11px; border-bottom:1px solid var(--border-soft); }
.dest-picker-search input{ border:none; outline:none; background:none; flex:1; font-family:var(--font-ui); font-size:12.5px; color:var(--text); }
.dest-picker-item{ display:flex; align-items:center; gap:10px; width:100%; padding:9px 11px; text-align:left; background:none; border:none; border-bottom:1px solid var(--border-soft); cursor:pointer; transition:.12s var(--ease); }
.dest-picker-item:last-child{ border-bottom:none; }
.dest-picker-item:hover{ background:var(--surface-2); }
.dest-picker-item .dp-av{ width:30px;height:30px;border-radius:8px;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:700;font-size:11px;background:var(--brand-tint);color:var(--brand); }
.dest-picker-item .dp-info{ flex:1; min-width:0; }
.dest-picker-item .dp-info b{ font-size:12.5px; color:var(--ink); display:block; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dest-picker-item .dp-info small{ font-size:10.5px; color:var(--text-3); font-family:var(--font-mono); }
.dest-picker-item.add-new{ color:var(--accent-deep); font-weight:600; font-size:12.5px; gap:8px; }

/* NF-e accordion rows (compact) */
.nfe-acc-row{ display:flex; align-items:center; gap:11px; width:100%; padding:11px 14px; background:none; border:none; border-bottom:1px solid var(--border-soft); cursor:pointer; transition:.12s var(--ease); text-align:left; }
.nfe-acc-row:last-child{ border-bottom:none; }
.nfe-acc-row:hover{ background:var(--surface-2); }
.nfe-acc-row .nar-ic{ width:28px;height:28px;border-radius:8px;background:var(--brand-tint);color:var(--brand);display:flex;align-items:center;justify-content:center;flex-shrink:0; }
.nfe-acc-row .nar-txt{ flex:1; min-width:0; }
.nfe-acc-row .nar-txt b{ font-size:12.5px; font-weight:600; color:var(--ink); display:block; }
.nfe-acc-row .nar-txt small{ font-size:10.5px; color:var(--text-3); font-family:var(--font-mono); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:block; }
.nfe-acc-row .nar-chev{ color:var(--text-3); transition:transform .24s var(--ease); flex-shrink:0; }
.nfe-acc-row.open .nar-chev{ transform:rotate(180deg); }
.nfe-acc-body{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .26s var(--ease); background:var(--surface-2); }
.nfe-acc-body.open{ grid-template-rows:1fr; }
.nfe-acc-body > div{ overflow:hidden; min-height:0; }
.nfe-acc-inner{ padding:10px 14px 14px; border-bottom:1px solid var(--border-soft); }

/* emit warn */
.emit-warn-msg{ font-size:11.5px; color:var(--warn-deep); margin-top:8px; display:flex; align-items:center; gap:6px; justify-content:center; text-align:center; }

@media(max-width:1040px){
  .emit-body{ grid-template-columns:1fr; }
  .doc-panel{ position:static; max-height:none; }
}
@media(max-width:760px){
  .fiscal-stats{ grid-template-columns:repeat(2,1fr); }
  .fp-grid{ grid-template-columns:1fr; }
}