/* ============================================================
   SellerNet — Styleguide & Design System
   Identidade: azul-marinho (#062B5C) · azul (#1976D2)
               verde (#55C928) · fundo (#F5F7FA)
   ============================================================ */

/* ============ 1. Design tokens ============ */
:root {

  /* Cores da identidade */
  --sn-navy: #062B5C;
  --sn-navy-800: #082F66;
  --sn-navy-700: #0D3A78;
  --sn-navy-soft: rgba(6, 43, 92, 0.06);
  --sn-blue: #1976D2;
  --sn-blue-600: #1565C0;
  --sn-blue-soft: rgba(25, 118, 210, 0.10);
  --sn-green: #55C928;
  --sn-green-600: #46AE1E;
  --sn-green-700: #3D9219;
  --sn-green-soft: rgba(85, 201, 40, 0.12);
  --sn-green-subtle: #F1FAEA;
  --sn-white: #FFFFFF;
  --sn-bg: #F5F7FA;
  --sn-text: #1E293B;
  --sn-text-secondary: #64748B;
  --sn-border: #E6EAF0;
  --sn-border-strong: #CBD5E1;
  --sn-muted: #F1F5F9;
  --sn-table-head: #F8FAFC;
  /* Estados semânticos */
  --sn-success-text: #3D8B1D;
  --sn-success-subtle: #F1FAEA;
  --sn-danger: #DC2626;
  --sn-danger-soft: #FEF2F2;
  --sn-warning: #B45309;
  --sn-warning-soft: #FFFBEB;
  --sn-info: #1976D2;
  --sn-info-soft: #E3F2FD;
  /* Formas e elevação */
  --sn-radius-sm: 8px;
  --sn-radius: 12px;
  --sn-radius-lg: 16px;
  --sn-shadow-sm: 0 1px 2px rgba(30, 41, 59, 0.05);
  --sn-shadow: 0 1px 2px rgba(30, 41, 59, 0.04), 0 6px 24px rgba(30, 41, 59, 0.06);
  --sn-shadow-lg: 0 10px 32px rgba(6, 43, 92, 0.12);
  /* Compatibilidade Bootstrap */
  --bs-body-font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --bs-primary: var(--sn-green);
  --bs-primary-rgb: 85, 201, 40;
  --bs-primary-bg-subtle: var(--sn-green-subtle);
  --bs-primary-border-subtle: #C8EBB0;
  --bs-primary-text-emphasis: var(--sn-success-text);
  --bs-success: var(--sn-green);
  --bs-success-rgb: 85, 201, 40;
  --bs-success-bg-subtle: var(--sn-green-subtle);
  --bs-success-border-subtle: #C8EBB0;
  --bs-success-text-emphasis: var(--sn-success-text);
  --bs-info: var(--sn-blue);
  --bs-info-rgb: 25, 118, 210;
  --bs-info-bg-subtle: var(--sn-info-soft);
  --bs-info-border-subtle: #A9D3F0;
  --bs-danger: var(--sn-danger);
  --bs-danger-rgb: 220, 38, 38;
  --bs-danger-bg-subtle: var(--sn-danger-soft);
  --bs-danger-border-subtle: #F5B5B5;
  --bs-warning: #F59E0B;
  --bs-warning-rgb: 245, 158, 11;
  --bs-warning-bg-subtle: var(--sn-warning-soft);
  --bs-warning-border-subtle: #FDE68A;
  --bs-warning-text-emphasis: var(--sn-warning);
  --bs-secondary: #64748B;
  --bs-secondary-rgb: 100, 116, 139;
  --bs-secondary-bg-subtle: #F1F5F9;
  --bs-secondary-border-subtle: #CBD5E1;
  --bs-light: #F8FAFC;
  --bs-light-rgb: 248, 250, 252;
  --bs-dark: #062B5C;
  --bs-dark-rgb: 6, 43, 92;
  --bs-white: #FFFFFF;
  --bs-white-rgb: 255, 255, 255;
  --bs-body-bg: var(--sn-bg);
  --bs-body-bg-rgb: 245, 247, 250;
  --bs-body-color: var(--sn-text);
  --bs-body-color-rgb: 30, 41, 59;
  --bs-secondary-color: var(--sn-text-secondary);
  --bs-link-color: var(--sn-blue);
  --bs-link-color-rgb: 25, 118, 210;
  --bs-link-hover-color: var(--sn-blue-600);
  --bs-link-hover-color-rgb: 21, 101, 192;
  --bs-border-radius: var(--sn-radius-sm);
  --bs-border-radius-sm: 6px;
  --bs-border-radius-lg: var(--sn-radius);
  --bs-border-radius-xl: var(--sn-radius-lg);
  --bs-focus-ring-color: rgba(25, 118, 210, 0.25);
  --bs-form-invalid-color: var(--sn-danger);

}

/* ============ 2. Base ============ */
html, body {

  background-color: var(--sn-bg);
  color: var(--sn-text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;

}

body {

  font-size: 0.9375rem;

}

a {

  color: var(--sn-blue);
  text-decoration: none;
  transition: color 0.15s ease-in-out;

}

a:hover {

  color: var(--sn-blue-600);

}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {

  color: var(--sn-text);
  font-weight: 700;
  letter-spacing: -0.015em;

}

.text-muted, .text-secondary {

  color: var(--sn-text-secondary) !important;

}

.text-primary {

  color: var(--sn-navy) !important;

}

.text-danger {

  color: var(--sn-danger) !important;

}

/* Scrollbar discreta */
::-webkit-scrollbar {

  width: 10px; height: 10px;

}

::-webkit-scrollbar-thumb {

  background: #CBD5E1; border-radius: 999px; border: 2px solid transparent; background-clip: content-box;

}

::-webkit-scrollbar-track {

  background: transparent;

}

/* ============ 3. Botões ============ */
.btn {

  border-radius: var(--sn-radius-sm);
  font-weight: 600;
  padding: 0.55rem 1.1rem;
  font-size: 0.9375rem;
  transition: all 0.15s ease-in-out;
  --bs-btn-focus-shadow-rgb: 25, 118, 210;

}

.btn:focus-visible {

  box-shadow: 0 0 0 0.2rem var(--bs-focus-ring-color);

}

/* Primário: ação principal em verde (sutil, sem dominar a interface) */
.btn-primary {

  --bs-btn-bg: var(--sn-green);
  --bs-btn-border-color: var(--sn-green);
  --bs-btn-color: var(--sn-white);
  --bs-btn-hover-bg: var(--sn-green-600);
  --bs-btn-hover-border-color: var(--sn-green-600);
  --bs-btn-hover-color: var(--sn-white);
  --bs-btn-active-bg: var(--sn-green-700);
  --bs-btn-active-border-color: var(--sn-green-700);
  --bs-btn-active-color: var(--sn-white);
  --bs-btn-disabled-bg: var(--sn-green-soft);
  --bs-btn-disabled-border-color: var(--sn-green-soft);
  --bs-btn-disabled-color: var(--sn-success-text);
  box-shadow: 0 1px 2px rgba(61, 146, 25, 0.25);

}

/* Secundário: branco, borda neutra, texto azul-marinho */
.btn-outline-secondary {

  --bs-btn-color: var(--sn-navy);
  --bs-btn-border-color: var(--sn-border-strong);
  --bs-btn-bg: var(--sn-white);
  --bs-btn-hover-bg: var(--sn-muted);
  --bs-btn-hover-border-color: var(--sn-border-strong);
  --bs-btn-hover-color: var(--sn-navy);
  --bs-btn-active-bg: var(--sn-muted);
  --bs-btn-active-border-color: var(--sn-border-strong);
  --bs-btn-active-color: var(--sn-navy);

}

.btn-secondary {

  --bs-btn-bg: var(--sn-muted);
  --bs-btn-border-color: var(--sn-muted);
  --bs-btn-color: var(--sn-text);
  --bs-btn-hover-bg: #E2E8F0;
  --bs-btn-hover-border-color: #E2E8F0;
  --bs-btn-hover-color: var(--sn-text);

}

/* Outline primário: informações/ações de intensidade média em azul */
.btn-outline-primary {

  --bs-btn-color: var(--sn-blue);
  --bs-btn-border-color: var(--sn-blue);
  --bs-btn-hover-bg: var(--sn-blue);
  --bs-btn-hover-border-color: var(--sn-blue);
  --bs-btn-hover-color: var(--sn-white);
  --bs-btn-active-bg: var(--sn-blue-600);
  --bs-btn-active-border-color: var(--sn-blue-600);
  --bs-btn-active-color: var(--sn-white);

}

/* Ações de sucesso (sincronizar, conferir) em contorno verde */
.btn-outline-success {

  --bs-btn-color: var(--sn-success-text);
  --bs-btn-border-color: #8FCF7A;
  --bs-btn-hover-bg: var(--sn-green);
  --bs-btn-hover-border-color: var(--sn-green);
  --bs-btn-hover-color: var(--sn-white);
  --bs-btn-active-bg: var(--sn-green-600);
  --bs-btn-active-border-color: var(--sn-green-600);
  --bs-btn-active-color: var(--sn-white);

}

.btn-outline-danger {

  --bs-btn-color: var(--sn-danger);
  --bs-btn-border-color: #F2A9A9;
  --bs-btn-hover-bg: var(--sn-danger);
  --bs-btn-hover-border-color: var(--sn-danger);
  --bs-btn-hover-color: var(--sn-white);

}

.btn-danger {

  --bs-btn-bg: var(--sn-danger);
  --bs-btn-border-color: var(--sn-danger);
  --bs-btn-hover-bg: #B91C1C;
  --bs-btn-hover-border-color: #B91C1C;
  --bs-btn-color: var(--sn-white);

}

.btn-warning {

  --bs-btn-bg: #F59E0B;
  --bs-btn-border-color: #F59E0B;
  --bs-btn-color: #78350F;
  --bs-btn-hover-bg: #D97706;
  --bs-btn-hover-border-color: #D97706;
  --bs-btn-hover-color: var(--sn-white);

}

.btn-info {

  --bs-btn-bg: var(--sn-blue);
  --bs-btn-border-color: var(--sn-blue);
  --bs-btn-color: var(--sn-white);
  --bs-btn-hover-bg: var(--sn-blue-600);
  --bs-btn-hover-border-color: var(--sn-blue-600);
  --bs-btn-hover-color: var(--sn-white);

}

.btn-outline-info {

  --bs-btn-color: var(--sn-blue);
  --bs-btn-border-color: var(--sn-blue);
  --bs-btn-hover-bg: var(--sn-blue-soft);
  --bs-btn-hover-border-color: var(--sn-blue);
  --bs-btn-hover-color: var(--sn-blue);

}

.btn-link {

  color: var(--sn-blue); font-weight: 600;

}

.btn-link:hover {

  color: var(--sn-blue-600);

}

/* ============ 5. Formulários ============ */
.form-control, .form-select {

  border-color: var(--sn-border-strong);
  border-radius: var(--sn-radius-sm);
  padding: 0.55rem 0.85rem;
  font-size: 0.9375rem;
  color: var(--sn-text);
  background-color: var(--sn-white);
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;

}

.form-control:focus, .form-select:focus {

  border-color: var(--sn-blue);
  box-shadow: 0 0 0 0.2rem rgba(25, 118, 210, 0.15);

}

.form-control::placeholder {

  color: #94A3B8;

}

.form-control:disabled, .form-select:disabled {

  background-color: var(--sn-muted);

}

.form-control-lg {

  border-radius: var(--sn-radius-sm); padding: 0.7rem 1rem;

}

.form-label {

  color: var(--sn-text); font-weight: 600; font-size: 0.9rem; margin-bottom: 0.45rem;

}

.form-text {

  color: var(--sn-text-secondary); font-size: 0.85rem;

}

.form-check-input {

  border-color: var(--sn-border-strong);

}

.form-check-input:checked {

  background-color: var(--sn-green);
  border-color: var(--sn-green);

}

.form-check-input:focus {

  border-color: var(--sn-blue); box-shadow: 0 0 0 0.2rem rgba(25, 118, 210, 0.15);

}

.invalid-feedback, .invalid-tooltip {

  color: var(--sn-danger);

}

.valid-feedback, .valid-tooltip {

  color: var(--sn-success-text);

}

.field_with_errors .form-control {

  border-color: var(--sn-danger);

}

.field_with_errors .form-control:focus {

  box-shadow: 0 0 0 0.2rem rgba(220, 38, 38, 0.15);

}

/* ============ 6. Tabelas ============ */
.table {

  --bs-table-color: var(--sn-text);
  --bs-table-bg: var(--sn-white);
  --bs-table-border-color: var(--sn-border);
  vertical-align: middle;

}

.table > :not(caption) > * > * {

  border-color: var(--sn-border);

}

.table-hover > tbody > tr:hover {

  background-color: var(--sn-table-head);

}

.table-borderless {

  --bs-table-border-color: transparent;

}

.table > tbody.table-group-divider {

  border-bottom: 1px solid var(--sn-border);

}

.table th {

  font-weight: 600;

}

/* Cabeçalho de tabela SellerNet */
.sn-table-head {

  color: var(--sn-text-secondary);
  background-color: var(--sn-table-head);
  border-bottom: 1px solid var(--sn-border);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-size: 0.72rem;

}

.sn-table-head th {

  padding: 0.85rem 1rem;

}

.sn-code {

  background-color: var(--sn-muted);
  border: 1px solid var(--sn-border);
  padding: 2px 8px;
  border-radius: 6px;
  font-size: 0.85em;
  color: var(--sn-navy);

}

pre {

  border-radius: var(--sn-radius); border: 1px solid var(--sn-border);

}

/* ============ 7. Badges ============ */
.badge {

  border-radius: 999px; font-weight: 600; padding: 0.35em 0.75em;

}

/* Badges com fundo claro (estado discreto) */
.sn-badge {

  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  border-radius: 999px;
  padding: 0.32em 0.8em;
  font-weight: 600;
  font-size: 0.78em;
  border: 1px solid transparent;

}

.sn-badge .badge-dot {

  width: 0.5em; height: 0.5em;
  border-radius: 50%;
  background-color: currentColor;

}

.badge-success, .status-conferido, .sn-badge.badge-success {

  background-color: var(--sn-success-subtle);
  color: var(--sn-success-text);
  border-color: #D8F0C8;

}

.badge-danger, .status-divergencia, .sn-badge.badge-danger {

  background-color: var(--sn-danger-soft);
  color: var(--sn-danger);
  border-color: #F6C6C6;

}

.badge-warning, .status-aguardando_recebimento, .sn-badge.badge-warning {

  background-color: var(--sn-warning-soft);
  color: var(--sn-warning);
  border-color: #FDE68A;

}

.badge-info, .status-processando, .sn-badge.badge-info {

  background-color: var(--sn-info-soft);
  color: var(--sn-navy);
  border-color: #BCD9F2;

}

.badge-secondary, .sn-badge.badge-secondary {

  background-color: #F1F5F9;
  color: var(--sn-text-secondary);
  border-color: var(--sn-border-strong);

}

/* ============ 9. Estrutura do app ============ */
.sn-app {

  min-height: 100vh;
  display: grid;
  grid-template-columns: 268px 1fr;

}

/* ---------- Sidebar ---------- */
.sn-sidebar {

  background-color: var(--sn-navy);
  color: var(--sn-white);
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  z-index: 1030;

}

.sn-sidebar-header {

  padding: 1.25rem 1.25rem 1rem;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);

}

.sn-logo {

  line-height: 0;

}

.sn-logo-img {

  width: 38px; height: 38px;
  border-radius: 10px;
  object-fit: cover;
  background: var(--sn-white);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);

}

.sn-brand-name {

  color: var(--sn-white);
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: -0.01em;
  line-height: 1.1;

}

.sn-brand-tag {

  display: block;
  font-size: 0.68rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.5);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-top: 2px;

}

.sn-sidebar-nav {

  padding: 0.85rem 0.9rem; flex-grow: 1;

}

.sn-nav-group {

  margin-bottom: 0.5rem;

}

.sn-nav-title {

  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.42);
  padding: 0.5rem 0.8rem 0.4rem;
  margin: 0;

}

.sn-nav-link {

  display: flex;
  align-items: center;
  gap: 0.7rem;
  color: rgba(255, 255, 255, 0.72);
  border-radius: 10px;
  padding: 0.62rem 0.8rem;
  margin-bottom: 0.2rem;
  font-weight: 500;
  font-size: 0.92rem;
  position: relative;
  transition: all 0.15s ease-in-out;

}

/* ---------- Sidebar mobile (offcanvas) ---------- */
.sn-sidebar-mobile.offcanvas {

  background-color: var(--sn-navy);
  color: var(--sn-white);
  width: 290px;
  border: none;

}

.sn-sidebar-mobile .offcanvas-header {

  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding: 1.15rem 1.25rem;

}

.sn-sidebar-mobile .offcanvas-body {

  padding: 1rem 1.1rem;

}

.sn-sidebar-mnav {

  display: flex;
  align-items: center;
  gap: 0.7rem;
  color: rgba(255, 255, 255, 0.75);
  padding: 0.7rem 0.9rem;
  border-radius: 10px;
  font-size: 0.92rem;
  font-weight: 500;
  margin-bottom: 0.25rem;
  position: relative;
  transition: all 0.15s ease-in-out;

}

.sn-sidebar-mnav i {

  width: 1.2rem; text-align: center; font-size: 1.05rem;

}

.sn-sidebar-mnav:hover {

  color: var(--sn-white); background-color: rgba(255, 255, 255, 0.07);

}

.sn-sidebar-mnav.active {

  background-color: rgba(255, 255, 255, 0.1);
  color: var(--sn-white);
  font-weight: 600;

}

.sn-sidebar-mnav.active i {

  color: var(--sn-green);

}

.sn-sidebar-mnav.active::before {

  content: "";
  position: absolute;
  left: -1.1rem;
  top: 50%;
  transform: translateY(-50%);
  width: 3.5px;
  height: 20px;
  border-radius: 0 4px 4px 0;
  background-color: var(--sn-green);

}

/* ============ 10. Dashboard ============ */

/* Saudação */
.sn-greeter {

  margin-bottom: 1.75rem;

}

.sn-greeter-title {

  font-size: clamp(1.35rem, 3vw, 1.7rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--sn-text);
  margin-bottom: 0.25rem;

}

.sn-greeter-title .sn-greeter-name {

  color: var(--sn-navy);

}

.sn-greeter-sub {

  color: var(--sn-text-secondary); margin-bottom: 0; font-size: 0.95rem;

}

/* KPI cards */
.sn-kpi {

  background-color: var(--sn-white);
  border: 1px solid var(--sn-border);
  border-radius: var(--sn-radius);
  box-shadow: var(--sn-shadow-sm);
  padding: 1.15rem 1.3rem;
  transition: box-shadow 0.15s ease, transform 0.15s ease, border-color 0.15s ease;

}

.sn-kpi:hover {

  box-shadow: var(--sn-shadow); transform: translateY(-2px); border-color: var(--sn-border-strong);

}

.sn-kpi-label {

  color: var(--sn-text-secondary); font-size: 0.8rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.02em;

}

.sn-kpi-icon {

  width: 2.5rem; height: 2.5rem;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  flex: 0 0 auto;

}

.sn-kpi-value {

  font-size: 1.75rem; font-weight: 800; color: var(--sn-text); letter-spacing: -0.02em; line-height: 1.15; font-variant-numeric: tabular-nums;

}

.sn-kpi-footer {

  color: var(--sn-text-secondary); font-size: 0.8rem;

}

/* Variação (delta) */
.sn-delta {

  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  border-radius: 999px;
  padding: 0.15rem 0.6rem;
  font-size: 0.78rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;

}

.sn-delta--up {

  background-color: var(--sn-success-subtle); color: var(--sn-success-text);

}

.sn-delta--down {

  background-color: var(--sn-danger-soft); color: var(--sn-danger);

}

.sn-delta--flat {

  background-color: var(--sn-muted); color: var(--sn-text-secondary);

}

/* ============ 11. Ícones de página ============ */
.sn-page-icon {

  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.6rem; height: 2.6rem;
  border-radius: 12px;
  background: var(--sn-navy-soft);
  color: var(--sn-navy);
  font-size: 1.15rem;

}

.sn-page-head {

  margin-bottom: 1.75rem;

}

.sn-page-head h1 {

  font-size: 1.35rem; margin: 0;

}

.sn-page-head p {

  color: var(--sn-text-secondary); margin: 0; font-size: 0.9rem;

}

/* ============ 12. Autenticação (split-screen) ============ */
.sn-auth {

  min-height: 100vh;
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  background-color: var(--sn-bg);

}

.sn-auth-hero {

  position: relative;
  background-color: var(--sn-navy);
  background-image:
  radial-gradient(ellipse 90% 65% at 20% -10%, rgba(25, 118, 210, 0.28) 0%, rgba(6, 43, 92, 0) 60%),
  radial-gradient(ellipse 70% 55% at 100% 110%, rgba(85, 201, 40, 0.18) 0%, rgba(6, 43, 92, 0) 55%);
  color: var(--sn-white);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 3.5rem 4rem;
  overflow: hidden;

}

.sn-auth-hero-brand {

  position: relative;
  z-index: 1;
  display: flex; align-items: center; gap: 0.8rem;

}

.sn-auth-hero-brand img {

  width: 44px; height: 44px;
  border-radius: 12px;
  object-fit: cover;
  background: var(--sn-white);

}

.sn-auth-hero-brand .sn-brand-name {

  font-size: 1.35rem;

}

.sn-auth-hero-content {

  position: relative;
  z-index: 1;
  max-width: 460px;

}

.sn-auth-hero h2 {

  color: var(--sn-white);
  font-size: clamp(1.9rem, 4vw, 2.6rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin-bottom: 1rem;

}

.sn-auth-hero h2 .sn-accent {

  color: var(--sn-green);

}

.sn-auth-hero p {

  color: rgba(255, 255, 255, 0.72); font-size: 1.05rem; max-width: 420px;

}

.sn-auth-mascote {

  position: absolute;
  right: -24px;
  bottom: -24px;
  width: 260px;
  height: 260px;
  object-fit: contain;
  filter: drop-shadow(0 24px 48px rgba(0, 0, 0, 0.35));
  opacity: 0.95;
  z-index: 0;
  pointer-events: none;

}

.sn-auth-hero-foot {

  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 1.25rem;
  color: rgba(255, 255, 255, 0.55);
  font-size: 0.8rem;

}

.sn-auth-hero-foot-trust {

  display: flex; align-items: center; gap: 0.5rem;

}

.sn-auth-hero-foot-trust i {

  color: var(--sn-green); font-size: 0.9rem;

}

.sn-auth-panel {

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 3rem 2rem;

}

.sn-auth-wrap {

  width: 100%; max-width: 400px;

}

.sn-auth-panel .sn-auth-mobile-logo {

  display: none;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
  margin-bottom: 1.5rem;

}

.sn-auth-panel .sn-auth-mobile-logo img {

  width: 40px; height: 40px; border-radius: 10px; object-fit: cover;

}

.sn-auth-panel .sn-auth-mobile-logo span {

  font-size: 1.3rem; font-weight: 800; color: var(--sn-navy); letter-spacing: -0.01em;

}

.auth-heading {

  margin-bottom: 1.5rem; text-align: center;

}

.auth-heading h1 {

  font-size: 1.5rem; margin-bottom: 0.3rem;

}

.auth-heading p {

  color: var(--sn-text-secondary); font-size: 0.92rem; margin: 0;

}

.sn-auth-card {

  background-color: var(--sn-white);
  border: 1px solid var(--sn-border);
  border-radius: var(--sn-radius-lg);
  /* ============ Fim do styleguide ============ */
  box-shadow: var(--sn-shadow);
  padding: 2rem;

}

/* ============ 15. Telas específicas ============ */
body.sn-bg-navy {

  background-color: var(--sn-navy);

}

/* ZPL */
.zpl-output-text {

  background: var(--sn-navy-800);
  color: var(--sn-green);
  border-radius: var(--sn-radius);
  padding: 1rem 1.25rem;
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  border: 1px solid #0D3A78;

}

.zpl-output-preview {

  color: var(--sn-text);
  border: 2px dashed var(--sn-border-strong);
  border-radius: var(--sn-radius);
  padding: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 200px;
  background-color: var(--sn-white);

}

textarea.zpl-textarea {

  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 0.85rem;

}

/* Semáforo de conferência */
.badgex {

  font-size: 0.8rem; padding: 0.35em 0.6em; border-radius: 4px;

}

/* ---------- Tabelas responsivas + cartões no mobile ---------- */
.table-responsive {

  border: 1px solid var(--sn-border);
  border-radius: var(--sn-radius);
  background: var(--sn-white);
  box-shadow: var(--sn-shadow-sm);
  overflow: hidden;

}

.table-responsive .table {

  margin-bottom: 0;

}

.table-responsive thead th {

  white-space: nowrap;

}

/* ============ 16. Utilidades ============ */
.sn-text-secondary {

  color: var(--sn-text-secondary);

}

.fs-fine {

  font-size: 0.82rem;

}

.fw-600 {

  font-weight: 600;

}

.fw-700 {

  font-weight: 700;

}

.sn-monospace {

  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;

}

.tabular {

  font-variant-numeric: tabular-nums;

}

.sn-break-word {

  word-break: break-word; overflow-wrap: anywhere;

}

.link-muted {

  color: var(--sn-text-secondary);

}

.link-muted:hover {

  color: var(--sn-navy);

}

.sn-icon-chip {

  width: 2.2rem; height: 2.2rem;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  background: var(--sn-muted);
  color: var(--sn-navy);

}

.divider-h {

  border-top: 1px solid var(--sn-border); margin: 0.75rem 0;

}

/* ============ 17. Responsividade ============ */
@media (max-width: 1399.98px) {
  .sn-auth-hero {
    padding: 3rem 2.5rem;
  }
  .sn-auth-mascote {
    width: 200px;
    height: 200px;
    right: -16px;
    bottom: -16px;
  }
  .sn-auth-hero-content {
    max-width: 380px;
  }
}

@media (max-width: 1199.98px) {
  .sn-app {
    grid-template-columns: 240px 1fr;
  }
  .sn-sidebar-header {
    padding: 1.1rem 1rem;
  }
  .sn-content, .sn-topbar {
    padding-left: 1.5rem; padding-right: 1.5rem;
  }
  .sn-auth-hero {
    padding: 2.5rem 1.75rem;
  }
  .sn-auth-mascote {
    width: 150px;
    height: 150px;
    right: -12px;
    bottom: -12px;
  }
  .sn-auth-hero-content {
    max-width: 320px;
  }
}

@media (max-width: 991.98px) {
  .sn-app {
    grid-template-columns: 1fr;
  }
  .sn-sidebar {
    display: none;
  }
  .sn-menu-btn {
    display: inline-flex;
  }
  .sn-topbar {
    padding: 0.65rem 1.25rem;
  }
  .sn-user-detail {
    display: none;
  }
  .sn-user-shell {
    padding: 0.35rem; border-radius: 50%;
  }
  .sn-user-shell .caret {
    display: none;
  }
  .sn-auth {
    grid-template-columns: 1fr;
  }
  .sn-auth-hero {
    display: none;
  }
  .sn-auth-panel .sn-auth-mobile-logo {
    display: inline-flex;
  }
  .sn-auth-panel {
    padding: 2.5rem 1.5rem;
  }
  .auth-heading {
    text-align: left;
  }
  .sn-auth-card {
    box-shadow: var(--sn-shadow-sm);
  }
  .sn-kpi-value {
    font-size: 1.5rem;
  }
}

@media (max-width: 767.98px) {
  .sn-content {
    padding: 1.25rem 1rem 2.5rem;
  }
  .sn-greeter-title {
    font-size: 1.3rem;
  }
  .sn-topbar-title {
    font-size: 0.95rem;
  }
  .sn-page-head h1 {
    font-size: 1.2rem;
  }
  .card-body {
    padding: 1.1rem;
  }
  .filter-section {
    padding: 1rem;
  }
  /* Botões full-width quando empilhados */
  .d-flex.gap-2 > .btn {
    white-space: nowrap;
  }
}

/* ============ 18. Ajustes p/ campos de leitura (status leitura) ============ */
.kpi-item-metrico {

  color: var(--sn-navy); font-weight: 800;

}

.sn-auth-card .form-label {

  font-weight: 600;

}

/* ============ 13. Empty states ============ */
.sn-empty {

  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 3rem 1.5rem;

}

.sn-empty-img {

  width: 120px; height: 120px;
  object-fit: contain;
  margin-bottom: 1.25rem;
  opacity: 0.95;

}

.sn-empty h3 {

  font-size: 1.1rem; margin-bottom: 0.4rem;

}

.sn-empty p {

  color: var(--sn-text-secondary); max-width: 400px; margin-bottom: 1.25rem; font-size: 0.92rem;

}

/* ============ 14. Filtros (seções) ============ */
.filter-section {

  background-color: var(--sn-white);
  border: 1px solid var(--sn-border);
  border-radius: var(--sn-radius);
  padding: 1.25rem 1.35rem;
  box-shadow: var(--sn-shadow-sm);

}

.sn-nav-link i {

  font-size: 1.05rem; width: 1.2rem; text-align: center;

}

.sn-nav-link:hover {

  color: var(--sn-white);
  background-color: rgba(255, 255, 255, 0.07);

}

.sn-nav-link.active {

  background-color: rgba(255, 255, 255, 0.1);
  color: var(--sn-white);
  font-weight: 600;

}

.sn-nav-link.active i {

  color: var(--sn-green);

}

.sn-nav-link.active::before {

  content: "";
  position: absolute;
  left: -0.9rem;
  top: 50%;
  transform: translateY(-50%);
  width: 3.5px;
  height: 22px;
  border-radius: 0 4px 4px 0;
  background-color: var(--sn-green);

}

.sn-sidebar-footer {

  padding: 0.9rem 1.25rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: rgba(255, 255, 255, 0.45);
  font-size: 0.78rem;

}

/* Marca (usada tbm no login e offcanvas) */
.sn-brand {

  display: flex; align-items: center; gap: 0.7rem; text-decoration: none;

}

/* ---------- Main + Topbar ---------- */
.sn-main {

  display: flex; flex-direction: column; min-height: 100vh; min-width: 0;

}

.sn-topbar {

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.7rem 2rem;
  background-color: var(--sn-white);
  border-bottom: 1px solid var(--sn-border);
  position: sticky;
  top: 0;
  z-index: 1020;

}

.sn-topbar-left {

  display: flex; align-items: center; gap: 0.8rem; min-width: 0;

}

.sn-topbar-title {

  margin: 0; font-size: 1rem; font-weight: 700; color: var(--sn-text);

}

.sn-topbar-sub {

  display: block;
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--sn-text-secondary);

}

/* Botão hambúrguer (mobile) */
.sn-menu-btn {

  display: none;
  border: 1px solid var(--sn-border);
  background: var(--sn-white);
  color: var(--sn-navy);
  border-radius: 9px;
  width: 38px; height: 38px;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  transition: background 0.15s ease;

}

.sn-menu-btn:hover {

  background: var(--sn-muted);

}

/* Menu do usuário */
.sn-user-menu {

  display: flex; align-items: center; gap: 0.6rem;

}

.sn-avatar {

  width: 36px; height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--sn-navy) 0%, #0D3A78 100%);
  color: var(--sn-white);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.02em;
  user-select: none;

}

.sn-avatar--green {

  background: linear-gradient(135deg, var(--sn-green) 0%, var(--sn-green-600) 100%);

}

.sn-user-name {

  font-weight: 600; font-size: 0.9rem; color: var(--sn-text); line-height: 1.1;

}

.sn-user-role {

  display: block; font-size: 0.72rem; color: var(--sn-text-secondary); font-weight: 400;

}

.sn-user-shell {

  display: flex;
  align-items: center;
  gap: 0.65rem;
  border: 1px solid var(--sn-border);
  border-radius: 999px;
  padding: 0.3rem 0.8rem 0.3rem 0.35rem;
  background: var(--sn-white);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;

}

.sn-user-shell:hover {

  border-color: var(--sn-border-strong); box-shadow: var(--sn-shadow-sm);

}

.sn-user-shell::after {

  display: none;

}

.sn-user-shell .caret {

  color: var(--sn-text-secondary); font-size: 0.7rem;

}

.sn-user-shell .caret {

  color: var(--sn-text-secondary); font-size: 0.7rem; transition: transform 0.15s ease;

}

.sn-user-shell[aria-expanded="true"] .caret {

  transform: rotate(180deg);

}

.sn-user-detail {

  display: flex; flex-direction: column; line-height: 1.15;

}

/* Dropdown refinado */
.dropdown-menu {

  border: 1px solid var(--sn-border);
  border-radius: var(--sn-radius);
  box-shadow: var(--sn-shadow);
  padding: 0.4rem;
  font-size: 0.9rem;

}

.dropdown-item {

  border-radius: 8px; padding: 0.5rem 0.75rem; font-weight: 500; color: var(--sn-text);

}

.dropdown-item i {

  width: 1.15rem;

}

.dropdown-item:hover, .dropdown-item:focus {

  background-color: var(--sn-muted); color: var(--sn-navy);

}

.dropdown-item.text-danger:hover {

  color: var(--sn-danger) !important; background-color: var(--sn-danger-soft);

}

.dropdown-divider {

  margin: 0.4rem 0;

}

.sn-content {

  padding: 1.75rem 2rem 3rem; max-width: 1400px; width: 100%; margin: 0 auto;

}

.status-resolvida {

  background-color: var(--sn-success-subtle);
  color: var(--sn-success-text);
  border-color: #D8F0C8;

}

.badge-soft-success {

  background-color: var(--sn-success-subtle); color: var(--sn-success-text); border-color: #D8F0C8;

}

.badge-soft-danger {

  background-color: var(--sn-danger-soft); color: var(--sn-danger); border-color: #F6C6C6;

}

.badge-soft-warning {

  background-color: var(--sn-warning-soft); color: var(--sn-warning); border-color: #FDE68A;

}

.badge-soft-resolvida {

  background-color: var(--sn-success-subtle);
  color: var(--sn-success-text);
  border-color: #D8F0C8;

}

.badge-dot.bg-resolvida {

  background-color: var(--sn-success-text);

}

/* ============ 8. Alerts ============ */
.alert {

  border-radius: var(--sn-radius);
  border: 1px solid transparent;
  font-size: 0.9375rem;
  padding: 0.85rem 1.1rem;

}

.alert-success {

  background-color: var(--sn-success-subtle); color: #2E6B12; border-color: #D8F0C8;

}

.alert-danger {

  background-color: var(--sn-danger-soft); color: var(--sn-danger); border-color: #F6C6C6;

}

.alert-warning {

  background-color: var(--sn-warning-soft); color: var(--sn-warning); border-color: #FDE68A;

}

.alert-info {

  background-color: var(--sn-info-soft); color: var(--sn-navy); border-color: #BCD9F2;

}

.btn-sm {

  border-radius: 7px; padding: 0.4rem 0.8rem; font-size: 0.85rem;

}

.btn-lg {

  border-radius: var(--sn-radius); padding: 0.75rem 1.5rem; font-size: 1rem;

}

/* ============ 4. Cards ============ */
.card {

  border: 1px solid var(--sn-border);
  border-radius: var(--sn-radius);
  box-shadow: var(--sn-shadow-sm);
  background-color: var(--sn-white);

}

.card-header {

  background-color: var(--sn-white);
  border-bottom: 1px solid var(--sn-border);
  font-weight: 600;
  color: var(--sn-text);
  padding: 1rem 1.25rem;
  border-radius: var(--sn-radius) var(--sn-radius) 0 0 !important;

}

.card-body {

  padding: 1.5rem;

}

.card-footer {

  background-color: var(--sn-white);
  border-top: 1px solid var(--sn-border);
  border-radius: 0 0 var(--sn-radius) var(--sn-radius) !important;

}

.card-header.bg-primary, .card-header.bg-primary.text-white {

  background-color: var(--sn-navy) !important;
  border-color: var(--sn-navy) !important;
  color: var(--sn-white) !important;

}

.card-header.bg-success, .card-header.bg-success.text-white {

  background-color: var(--sn-success-subtle) !important;
  border-color: #D8F0C8 !important;
  color: var(--sn-success-text) !important;

}

.card-header.bg-warning.text-dark {

  background-color: var(--sn-warning-soft) !important; border-color: #FDE68A !important;

}

/* Listas dentro de cards com toque moderno */
.list-group-item {

  border-color: var(--sn-border);
  color: var(--sn-text);
  padding: 0.85rem 1rem;

}

.list-group-item-action:hover {

  background-color: var(--sn-table-head);
  color: var(--sn-navy);

}

.btn-primary:hover {

  box-shadow: 0 4px 12px rgba(85, 201, 40, 0.3); transform: translateY(-1px);

}

/* Sucesso: mantém o verde da marca para conquistas/confirmações */
.btn-success {

  --bs-btn-bg: var(--sn-green);
  --bs-btn-border-color: var(--sn-green);
  --bs-btn-color: var(--sn-white);
  --bs-btn-hover-bg: var(--sn-green-600);
  --bs-btn-hover-border-color: var(--sn-green-600);
  --bs-btn-hover-color: var(--sn-white);
  --bs-btn-active-bg: var(--sn-green-700);
  --bs-btn-active-border-color: var(--sn-green-700);
  --bs-btn-disabled-bg: var(--sn-green-soft);
  --bs-btn-disabled-border-color: var(--sn-green-soft);
  --bs-btn-disabled-color: var(--sn-success-text);

}

/* ============ ZPL Converter ============ */
.zpl-hero-title {

  font-size: 1.9rem;
  font-weight: 800;
  color: var(--sn-navy);
  letter-spacing: -0.02em;

}

.zpl-hero-subtitle {

  color: var(--sn-text-secondary); font-size: 1rem;

}

.zpl-card {

  border-radius: var(--sn-radius-lg); box-shadow: var(--sn-shadow-sm);

}

.zpl-dropzone {

  border: 2px dashed var(--sn-border-strong);
  border-radius: var(--sn-radius-lg);
  background: var(--sn-table-head);
  padding: 2.5rem 1.5rem;
  text-align: center;
  transition: border-color 0.2s ease, background 0.2s ease;
  cursor: pointer;

}

.zpl-dropzone:hover, .zpl-dropzone.dragover {

  border-color: var(--sn-green);
  background: var(--sn-success-subtle);

}

.zpl-drop-icon {

  font-size: 2.6rem; color: var(--sn-green-600); display: block; margin-bottom: 0.75rem;

}

.zpl-drop-title {

  font-weight: 600; color: var(--sn-text); margin-bottom: 0.25rem;

}

.zpl-drop-sub, .zpl-drop-info {

  color: var(--sn-text-secondary);

}

.zpl-drop-btn {

  margin-top: 1rem;

}

.zpl-file-list {

  margin-top: 1rem;

}

.zpl-file-list li {

  display: flex; justify-content: space-between; align-items: center; gap: 0.5rem;
  background: var(--sn-white); border: 1px solid var(--sn-border); border-radius: 10px;
  padding: 0.5rem 0.8rem; margin-bottom: 0.4rem; font-size: 0.875rem;

}

.zpl-status {

  font-size: 0.875rem; color: var(--sn-text-secondary);

}

.zpl-progress {

  height: 8px; background-color: var(--sn-table-head);

}

.zpl-progress .progress-bar {

  background-color: var(--sn-green) !important;

}

.zpl-progress-text, .zpl-progress-pct {

  font-size: 0.875rem; color: var(--sn-text-secondary);

}

.zpl-process-btn {

  border-radius: var(--sn-radius); font-weight: 600;

}

.zpl-mode {

  display: flex; gap: 0.5rem; flex-wrap: wrap;

}

.zpl-mode .btn {

  border-radius: var(--sn-radius);

}

.zpl-mode .btn-check:checked + .btn {

  background-color: var(--sn-navy);
  border-color: var(--sn-navy);
  color: var(--sn-white);

}

/* Badges Bootstrap herdadas (bg-*) com tom do design system */
.badge.bg-info {

  background-color: var(--sn-info-soft) !important; color: var(--sn-navy);

}

.badge.bg-warning {

  background-color: var(--sn-warning-soft) !important; color: var(--sn-warning);

}

.badge.bg-success {

  background-color: var(--sn-success-subtle) !important; color: var(--sn-success-text);

}