/* ==========================================================================
   GESTÃO FINANCEIRA ARTSY - CLEAN DESIGN SYSTEM & STYLESHEET
   Aesthetic: Modern, Minimalist, High-End Fintech (Linear / Stripe / Mercury)
   ========================================================================== */

:root {
  /* Canvas & Neutral Palette */
  --paper: #f8fafc;
  --surface: #ffffff;
  --line: #e2e8f0;
  --line-strong: #cbd5e1;
  --line-subtle: #f1f5f9;

  /* Typography / Inks */
  --ink: #0f172a;
  --ink-secondary: #334155;
  --muted: #64748b;
  --subtle: #94a3b8;

  /* Brand & Accents */
  --accent: #0f172a;
  --accent-hover: #1e293b;
  --brand-emerald: #10b981;
  --brand-emerald-dark: #059669;

  /* Status Colors */
  --green: #059669;
  --green-bg: #ecfdf5;
  --green-border: #a7f3d0;

  --amber: #d97706;
  --amber-bg: #fffbeb;
  --amber-border: #fde68a;

  --red: #dc2626;
  --red-bg: #fef2f2;
  --red-border: #fecaca;

  --blue: #2563eb;
  --blue-bg: #eff6ff;
  --blue-border: #bfdbfe;

  --indigo: #4f46e5;
  --indigo-bg: #eef2ff;
  --indigo-border: #c7d2fe;

  /* Sidebar Theme (Deep Slate) */
  --sidebar-bg: #090d16;
  --sidebar-border: rgba(255, 255, 255, 0.08);
  --sidebar-text: #94a3b8;
  --sidebar-text-active: #ffffff;
  --sidebar-item-hover: rgba(255, 255, 255, 0.05);
  --sidebar-item-active: rgba(16, 185, 129, 0.12);

  /* Shadows */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.04);
  --shadow-card: 0 1px 3px 0 rgba(0, 0, 0, 0.02), 0 1px 2px -1px rgba(0, 0, 0, 0.02);
  --shadow-card-hover: 0 4px 12px -2px rgba(15, 23, 42, 0.06);
  --shadow-dropdown: 0 10px 25px -3px rgba(15, 23, 42, 0.1), 0 4px 6px -4px rgba(15, 23, 42, 0.05);
  --shadow-modal: 0 25px 50px -12px rgba(15, 23, 42, 0.25);
}

/* Base Reset & Typography */
* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  font-size: 13.5px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, p {
  margin-top: 0;
}

h1 {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--ink);
  margin-bottom: 0;
}

h2 {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--ink);
}

h3 {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
}

.eyebrow {
  color: var(--muted);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 0 0 3px;
}

.section-description {
  color: var(--muted);
  font-size: 12px;
  margin: 2px 0 16px;
  line-height: 1.45;
}

/* ==========================================================================
   SIDEBAR NAVIGATION SYSTEM
   ========================================================================== */
.sidebar {
  position: fixed;
  width: 250px;
  inset: 0 auto 0 0;
  background: var(--sidebar-bg);
  border-right: 1px solid var(--sidebar-border);
  color: var(--sidebar-text);
  padding: 20px 14px;
  display: flex;
  flex-direction: column;
  transition: width 0.22s cubic-bezier(0.4, 0, 0.2, 1), padding 0.22s ease, transform 0.22s ease;
  z-index: 1000;
  overflow-x: hidden;
  overflow-y: auto;
}

.brand {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin: 0 4px 28px !important;
}

.brand-clickable {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  user-select: none;
  border-radius: 8px;
  padding: 4px;
  transition: opacity 0.15s ease;
}

.brand-clickable:hover {
  opacity: 0.85;
}

.brand-mark {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  color: #ffffff;
  border-radius: 8px;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  font-family: inherit;
  font-weight: 800;
  font-size: 14px;
  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3);
}

.brand-text {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #ffffff;
  white-space: nowrap;
  transition: opacity 0.18s ease;
}

.brand-text .light {
  color: #64748b;
  font-weight: 500;
}

.sidebar-toggle-btn {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #94a3b8;
  width: 26px;
  height: 26px;
  border-radius: 7px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 13px;
  font-weight: 700;
  transition: all 0.18s ease;
  flex-shrink: 0;
  line-height: 1;
}

.sidebar-toggle-btn:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.2);
}

.header-toggle-sidebar-btn {
  border: 1px solid var(--line);
  background: var(--surface);
  width: 36px;
  height: 36px;
  border-radius: 8px;
  display: inline-grid;
  place-items: center;
  color: var(--ink);
  cursor: pointer;
  font-size: 16px;
  transition: all 0.15s ease;
  box-shadow: var(--shadow-sm);
  flex-shrink: 0;
}

.header-toggle-sidebar-btn:hover {
  background: var(--line-subtle);
  border-color: var(--line-strong);
}

.nav-label {
  margin: 22px 12px 6px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #475569;
  text-transform: uppercase;
}

.nav-item {
  width: 100%;
  border: 0;
  background: none;
  color: #94a3b8;
  text-align: left;
  border-radius: 8px;
  padding: 9px 12px;
  margin: 2px 0;
  font-size: 13px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease, transform 0.1s ease;
}

.nav-item span:first-child {
  width: 20px;
  display: inline-block;
  font-size: 16px;
  text-align: center;
  flex-shrink: 0;
}

.nav-item:hover {
  background: var(--sidebar-item-hover);
  color: #f1f5f9;
}

.nav-item.active {
  background: var(--sidebar-item-active);
  color: #34d399;
  font-weight: 600;
}

.nav-text {
  transition: opacity 0.18s ease;
  white-space: nowrap;
}

.sidebar-bottom {
  border-top: 1px solid var(--sidebar-border);
  padding: 16px 8px 2px;
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
}

.company-dot {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: #1e293b;
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #f8fafc;
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 13px;
}

.company-info strong {
  display: block;
  color: #f8fafc;
  font-size: 12px;
}

.company-info small {
  display: block;
  color: #64748b;
  font-size: 11px;
}

.company-arrow {
  margin-left: auto;
  color: #64748b;
  font-size: 11px;
}

/* Sidebar Collapsed State */
body.sidebar-collapsed .sidebar {
  width: 66px !important;
  padding: 20px 8px !important;
}

body.sidebar-collapsed main {
  margin-left: 66px !important;
}

body.sidebar-collapsed .brand {
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  margin: 0 0 20px !important;
}

body.sidebar-collapsed .brand-clickable {
  justify-content: center;
  padding: 0;
}

body.sidebar-collapsed .brand-text,
body.sidebar-collapsed .nav-text,
body.sidebar-collapsed .company-info,
body.sidebar-collapsed .company-arrow {
  display: none !important;
}

body.sidebar-collapsed .nav-label {
  height: 1px;
  background: rgba(255, 255, 255, 0.08);
  margin: 10px 6px;
  text-indent: -9999px;
  overflow: hidden;
  padding: 0;
}

body.sidebar-collapsed .nav-item {
  justify-content: center;
  padding: 10px 0;
  gap: 0;
  border-radius: 8px;
}

body.sidebar-collapsed .nav-item span:first-child {
  margin: 0;
  font-size: 18px;
  width: auto;
}

body.sidebar-collapsed .sidebar-bottom {
  justify-content: center;
  padding: 12px 0 0;
}

body.sidebar-collapsed .sidebar-toggle-btn {
  width: 24px;
  height: 24px;
  font-size: 12px;
}

body.sidebar-collapsed .sidebar-toggle-btn span {
  display: inline-block;
  transform: rotate(180deg);
}

/* Sidebar Mobile Overlay */
.sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.5);
  backdrop-filter: blur(3px);
  z-index: 999;
  opacity: 0;
  transition: opacity 0.25s ease;
}

body.sidebar-mobile-open .sidebar-overlay {
  display: block;
  opacity: 1;
}

/* ==========================================================================
   MAIN LAYOUT & HEADER
   ========================================================================== */
main {
  margin-left: 250px;
  max-width: 1540px;
  padding: 18px 32px 36px;
  transition: margin-left 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}

header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

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

/* ==========================================================================
   BUTTONS & CONTROLS
   ========================================================================== */
.primary-button,
.secondary-button,
.icon-button,
.date-filter,
.filter-chip {
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.primary-button {
  border: 1px solid var(--accent);
  background: var(--accent);
  color: #ffffff;
  padding: 8px 14px;
  box-shadow: var(--shadow-sm);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.primary-button:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
  transform: translateY(-1px);
  box-shadow: 0 4px 8px -2px rgba(15, 23, 42, 0.15);
}

.primary-button.compact {
  padding: 6px 11px;
  font-size: 11.5px;
  box-shadow: none;
}

.secondary-button {
  background: var(--surface);
  border: 1px solid var(--line);
  padding: 8px 14px;
  color: var(--ink-secondary);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.secondary-button:hover {
  background: var(--line-subtle);
  border-color: var(--line-strong);
  color: var(--ink);
}

.icon-button {
  border: 1px solid var(--line);
  background: var(--surface);
  width: 34px;
  height: 34px;
  font-size: 14px;
  display: inline-grid;
  place-items: center;
  color: var(--muted);
}

.icon-button:hover {
  border-color: var(--line-strong);
  color: var(--ink);
  background: var(--line-subtle);
}

.text-button {
  background: none;
  border: 0;
  color: var(--blue);
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 6px;
  transition: background 0.15s ease;
}

.text-button:hover {
  background: var(--blue-bg);
}

/* ==========================================================================
   SEGMENTED CONTROLS & EXECUTIVE FILTERS BAR
   ========================================================================== */
.filters-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  margin: 10px 0 14px;
}

.filters {
  display: flex;
  gap: 8px;
  align-items: center;
  margin: 18px 0 16px;
  flex-wrap: wrap;
}

.period-quick-selector {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  flex-wrap: wrap;
  background: #f1f5f9;
  padding: 3px;
  border-radius: 10px;
  border: 1px solid var(--line);
}

.btn-period-quick {
  border: 0;
  background: transparent;
  color: #64748b;
  padding: 5px 11px;
  border-radius: 7px;
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}

.btn-period-quick:hover {
  color: var(--ink);
}

.btn-period-quick.active {
  background: #ffffff;
  color: var(--ink);
  font-weight: 700;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
}

.custom-date-container {
  position: relative;
  display: inline-block;
}

.btn-period-custom {
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink-secondary);
  padding: 5px 11px;
  border-radius: 7px;
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: all 0.15s ease;
}

.btn-period-custom:hover {
  border-color: var(--line-strong);
  background: var(--line-subtle);
  color: var(--ink);
}

.btn-period-custom.active {
  background: var(--green-bg);
  border-color: var(--green-border);
  color: var(--green);
}

.custom-date-popover {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 1000;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--shadow-dropdown);
  padding: 16px;
  width: 290px;
}

.popover-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 12px;
  border-bottom: 1px solid var(--line-subtle);
  padding-bottom: 6px;
}

.popover-dates {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.popover-dates label {
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.popover-dates input {
  padding: 8px 10px;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  font-size: 12px;
}

.popover-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 14px;
  padding-top: 10px;
  border-top: 1px solid var(--line-subtle);
}

.status-chips-selector {
  display: flex;
  gap: 6px;
  align-items: center;
}

.date-filter,
.filter-chip {
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink-secondary);
  padding: 7px 12px;
}

.date-filter {
  margin-right: 6px;
}

.filter-chip.compact {
  padding: 5px 9px;
  font-size: 11px;
}

.filter-chip.active {
  background: #f1f5f9;
  color: var(--ink);
  border-color: var(--line-strong);
}

.filter-chip.active-expense {
  background: var(--red-bg) !important;
  color: var(--red) !important;
  border-color: var(--red-border) !important;
}

.filter-chip.active-income {
  background: var(--green-bg) !important;
  color: var(--green) !important;
  border-color: var(--green-border) !important;
}

/* Floating Account Bar */
.account-floating-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 6px 12px;
  margin-bottom: 12px;
  box-shadow: var(--shadow-sm);
}

.account-pills-group {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
}

.btn-account-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border-radius: 8px;
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid var(--line);
  background: #f8fafc;
  color: var(--ink-secondary);
  transition: all 0.15s ease;
}

.btn-account-pill:hover {
  background: #f1f5f9;
  border-color: var(--line-strong);
  color: var(--ink);
}

.btn-account-pill.active {
  background: var(--accent);
  color: #ffffff;
  border-color: var(--accent);
  box-shadow: 0 2px 5px rgba(15, 23, 42, 0.15);
}

.btn-account-pill .pill-badge {
  font-size: 10px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.06);
  color: inherit;
}

.btn-account-pill.active .pill-badge {
  background: rgba(255, 255, 255, 0.2);
  color: #ffffff;
}

/* ==========================================================================
   CARDS & KPI METRICS (CLEAN FINTECH AESTHETIC)
   ========================================================================== */
.grid {
  display: grid;
  gap: 14px;
}

.metric-grid {
  grid-template-columns: repeat(4, 1fr);
}

.metric-grid-executive {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 14px;
}

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 16px 18px;
  box-shadow: var(--shadow-card);
  transition: all 0.15s ease;
}

/* Clean KPI Card: Remove outdated harsh top stripe, use clean elevation */
.card-kpi-highlight {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px 16px;
  box-shadow: var(--shadow-card);
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
  position: relative;
}

.card-kpi-highlight:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-card-hover);
  border-color: var(--line-strong);
}

.card-kpi-highlight::before {
  display: none !important;
}

.kpi-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
}

.kpi-title {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--muted);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.kpi-tag-status {
  font-size: 9.5px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 6px;
  background: var(--green-bg);
  color: var(--green);
  border: 1px solid var(--green-border);
}

.kpi-tag-pending {
  font-size: 9.5px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 6px;
  background: var(--amber-bg);
  color: var(--amber);
  border: 1px solid var(--amber-border);
}

.kpi-tag-info {
  font-size: 9.5px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 6px;
  background: var(--blue-bg);
  color: var(--blue);
  border: 1px solid var(--blue-border);
}

.kpi-tag-cash {
  font-size: 9.5px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 6px;
  background: #f1f5f9;
  color: #334155;
  border: 1px solid var(--line);
}

.kpi-main-val {
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -0.03em;
  margin-bottom: 2px;
  font-feature-settings: "tnum" 1, "cv05" 1;
  color: var(--ink);
}

.metric-label {
  color: var(--muted);
  font-weight: 600;
  font-size: 11px;
  margin-bottom: 6px;
}

.metric-value {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.03em;
  font-feature-settings: "tnum" 1;
}

.metric-foot,
.kpi-foot {
  font-size: 11px;
  margin-top: 4px;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 4px;
}

.text-positive, .positive { color: var(--green); }
.text-pending { color: var(--amber); }
.text-info { color: var(--blue); }
.text-negative, .negative { color: var(--red); }

.mid-grid {
  grid-template-columns: 1.35fr 0.85fr;
  margin-top: 14px;
}

.card-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.card-title h2 {
  font-size: 13.5px;
  margin: 0;
}

/* ==========================================================================
   CHARTS & FORECAST SYSTEM
   ========================================================================== */
.forecast-chart-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 16px 20px 14px;
  margin-bottom: 14px;
  box-shadow: var(--shadow-card);
  overflow: visible;
}

.forecast-chart-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 12px;
}

.forecast-timeframe-btn {
  padding: 4px 9px;
  border-radius: 6px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--muted);
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}

.forecast-timeframe-btn:hover {
  color: var(--ink);
}

.forecast-timeframe-btn.active {
  background: #ffffff;
  color: var(--ink);
  font-weight: 700;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}

.chart-svg-container {
  width: 100%;
  overflow: visible;
  position: relative;
}

.chart {
  height: 207px;
  position: relative;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: end;
  justify-content: space-around;
  padding: 0 7px;
}

.bar-group {
  height: 100%;
  width: 10%;
  display: flex;
  gap: 4px;
  align-items: end;
  justify-content: center;
  position: relative;
}

.bar {
  width: 10px;
  border-radius: 4px 4px 1px 1px;
}

.bar.in { background: #10b981; }
.bar.out { background: #f59e0b; }

.bar-group small {
  position: absolute;
  bottom: -23px;
  color: var(--muted);
  font-size: 10px;
}

.legend {
  display: flex;
  gap: 16px;
  margin-top: 32px;
  color: var(--muted);
  font-size: 11.5px;
}

.legend i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
  margin-right: 5px;
}

.legend .in { background: #10b981; }
.legend .out { background: #f59e0b; }

.chart-tooltip-floating {
  position: absolute;
  pointer-events: none;
  background: #0f172a;
  color: #ffffff;
  padding: 10px 14px;
  border-radius: 9px;
  font-family: inherit;
  font-size: 12px;
  box-shadow: var(--shadow-dropdown);
  border: 1px solid rgba(255, 255, 255, 0.15);
  z-index: 999;
  opacity: 0;
  transition: opacity 0.12s ease;
  white-space: nowrap;
}

.chart-tooltip-floating.visible {
  opacity: 1;
}

.chart-tooltip-date {
  font-size: 11px;
  font-weight: 700;
  color: #a7f3d0;
  margin-bottom: 6px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  padding-bottom: 4px;
}

.chart-tooltip-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 3px 0;
}

.chart-tooltip-label {
  color: #94a3b8;
  font-size: 11px;
}

.chart-tooltip-val {
  font-weight: 700;
  font-size: 12px;
}

.chart-bar-hoverable {
  transition: opacity 0.15s ease, filter 0.15s ease;
  cursor: pointer;
}

.chart-bar-hoverable:hover {
  opacity: 1 !important;
  filter: brightness(1.15) drop-shadow(0 0 6px rgba(16, 185, 129, 0.5));
}

.chart-point-hoverable {
  cursor: pointer;
  transition: r 0.15s ease, stroke-width 0.15s ease;
}

.chart-point-hoverable:hover {
  r: 6 !important;
  stroke-width: 2.5 !important;
  stroke: #ffffff !important;
}

/* ==========================================================================
   TABLES & DATA LISTS
   ========================================================================== */
.table-card {
  margin-top: 14px;
  padding: 0;
  overflow: hidden;
  border-radius: 12px;
}

.table-head {
  padding: 16px 18px 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

table {
  width: 100%;
  border-collapse: collapse;
}

th {
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 10.5px;
  font-weight: 700;
  text-align: left;
  padding: 10px 14px;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}

td {
  padding: 11px 14px;
  border-top: 1px solid var(--line-subtle);
  font-size: 12.5px;
  color: var(--ink-secondary);
  vertical-align: middle;
}

tbody tr:hover td {
  background: #f8fafc;
}

.tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 6px;
  background: #f1f5f9;
  color: var(--ink-secondary);
  border: 1px solid var(--line);
}

.tag.ok {
  background: var(--green-bg);
  color: var(--green);
  border-color: var(--green-border);
}

.tag.warn {
  background: var(--amber-bg);
  color: var(--amber);
  border-color: var(--amber-border);
}

.tag.danger {
  background: var(--red-bg);
  color: var(--red);
  border-color: var(--red-border);
}

/* Badges for Cashflow */
.cf-badge-inflow {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--green-bg);
  color: var(--green);
  border: 1px solid var(--green-border);
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
}

.cf-badge-outflow {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--red-bg);
  color: var(--red);
  border: 1px solid var(--red-border);
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
}

/* Dashboard Bank Items */
.dashboard-bank-item:hover {
  background: #f8fafc !important;
  border-color: var(--line-strong) !important;
  transform: translateY(-1px);
}

.bank-accounts-list::-webkit-scrollbar {
  width: 5px;
}
.bank-accounts-list::-webkit-scrollbar-track {
  background: #f1f5f9;
  border-radius: 4px;
}
.bank-accounts-list::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 4px;
}
.bank-accounts-list::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}

/* DRE & Cash Summary */
.cash-summary {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 14px;
}

.cash-summary div {
  border-radius: 10px;
  padding: 14px;
  background: #f8fafc;
  border: 1px solid var(--line);
}

.cash-summary strong {
  display: block;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-top: 4px;
}

.progress-wrap {
  margin: 14px 0 20px;
}

.progress-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 6px;
  font-size: 12px;
}

.progress {
  height: 6px;
  background: #f1f5f9;
  border-radius: 999px;
  overflow: hidden;
}

.progress b {
  display: block;
  height: 100%;
  background: var(--brand-emerald);
  border-radius: 999px;
}

.reconciliation {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

.recon-value {
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-top: 6px;
}

.dre-table td:last-child,
.dre-table th:last-child {
  text-align: right;
}

.dre-total td {
  font-weight: 700;
  background: #f8fafc;
  color: var(--ink);
}

.category-row {
  display: grid;
  grid-template-columns: 1.1fr repeat(4, 0.7fr);
  align-items: center;
  gap: 10px;
  padding: 13px 0;
  border-bottom: 1px solid var(--line-subtle);
}

.category-row b {
  font-size: 13px;
}

.category-row span {
  color: var(--muted);
  font-size: 12px;
}

.category-bar {
  height: 6px;
  background: #f1f5f9;
  border-radius: 999px;
  overflow: hidden;
}

.category-bar i {
  display: block;
  background: #d97706;
  height: 100%;
  border-radius: 999px;
}

/* ==========================================================================
   SELLER COMMERCIAL DASHBOARD & TRACKING
   ========================================================================== */
.seller-dashboard-section {
  margin: 20px 0 24px;
}

.seller-dashboard-heading {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 18px;
  margin: 0 2px 14px;
}

.seller-dashboard-heading .eyebrow {
  margin-bottom: 4px;
  color: var(--muted);
  font-size: 10px;
  letter-spacing: 0.08em;
}

.seller-dashboard-heading h2 {
  font-size: 20px;
  letter-spacing: -0.025em;
  margin: 0 0 4px;
}

.seller-dashboard-heading p:last-child {
  color: var(--muted);
  font-size: 12px;
  margin: 0;
}

.seller-dashboard-heading > .text-button {
  white-space: nowrap;
  padding: 8px 12px;
}

.seller-dashboard-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.seller-month-picker-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 3px 8px;
  box-shadow: var(--shadow-sm);
}

.seller-month-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  white-space: nowrap;
}

.seller-month-select {
  height: 28px;
  padding: 0 6px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #ffffff;
  color: var(--ink);
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 600;
  outline: none;
  cursor: pointer;
}

.seller-month-select:focus {
  border-color: var(--ink);
}

.seller-sync-global-btn {
  height: 28px;
  padding: 0 9px;
  font-size: 11px;
  font-weight: 600;
  font-family: inherit;
  border-radius: 6px;
  background: #ffffff;
  border: 1px solid var(--line);
  color: var(--ink-secondary);
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s ease;
}

.seller-sync-global-btn:hover {
  background: #f1f5f9;
  border-color: var(--line-strong);
  color: var(--ink);
}

.seller-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}

.seller-summary-card {
  min-width: 0;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 16px 18px;
  box-shadow: var(--shadow-card);
}

.seller-summary-card > span,
.seller-summary-card > small {
  display: block;
  color: var(--muted);
  font-size: 11px;
}

.seller-summary-card > strong {
  display: block;
  font-size: 21px;
  letter-spacing: -0.03em;
  margin: 6px 0 4px;
  color: var(--ink);
  font-feature-settings: "tnum" 1;
}

.seller-performance-card {
  margin-top: 0;
  box-shadow: var(--shadow-card);
  border-radius: 12px;
}

.seller-performance-card .table-head {
  padding: 16px 18px 10px;
}

.seller-performance-card .table-head h2 {
  font-size: 14px;
  margin-bottom: 4px;
}

.seller-performance-card .section-description {
  font-size: 11.5px;
  margin: 0;
}

.seller-performance-scroll {
  overflow: auto;
}

.seller-performance-table {
  min-width: 900px;
}

.seller-performance-table th {
  padding: 11px 14px;
  background: var(--paper);
  font-size: 10px;
}

.seller-performance-table td {
  padding: 12px 14px;
  font-size: 12.5px;
  vertical-align: middle;
}

.seller-performance-table th:nth-child(2),
.seller-performance-table td:nth-child(2) {
  text-align: center;
}

.seller-goal-cell {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 240px;
}

.seller-goal-input-wrap {
  display: flex;
  align-items: center;
  gap: 5px;
  height: 32px;
  flex: 1;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #ffffff;
  padding: 0 8px;
  color: var(--muted);
  font-size: 11px;
  transition: all 0.15s ease;
}

.seller-goal-input-wrap:focus-within {
  border-color: var(--ink);
  box-shadow: 0 0 0 2px rgba(15, 23, 42, 0.08);
}

.seller-goal-input-wrap input {
  border: 0;
  outline: 0;
  box-shadow: none;
  width: 100%;
  min-width: 90px;
  margin: 0;
  padding: 4px 0;
  font-size: 12px;
  font-family: inherit;
}

.seller-goal-save {
  padding: 6px 10px;
  font-size: 11px;
  white-space: nowrap;
}

.seller-goal-progress {
  display: grid;
  grid-template-columns: minmax(95px, 1fr) auto;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
}

.seller-goal-progress > div {
  height: 6px;
  border-radius: 999px;
  background: #f1f5f9;
  overflow: hidden;
}

.seller-goal-progress i {
  height: 100%;
  display: block;
  border-radius: inherit;
  background: linear-gradient(90deg, #10b981, #059669);
}

.seller-goal-progress small,
.seller-goal-missing {
  font-size: 10px;
  color: var(--muted);
}

.seller-goal-missing {
  display: block;
  margin-top: 5px;
}

.seller-empty {
  text-align: center;
  padding: 32px !important;
  color: var(--muted) !important;
}

/* ==========================================================================
   RECONCILIATION & AUDIT SYSTEM
   ========================================================================== */
.reconcile-match-btn {
  color: #b45309;
  font-weight: 600;
  font-size: 12px;
  text-decoration: underline;
  background: none;
  border: none;
  cursor: pointer;
}

.reconcile-match-btn:hover {
  color: #78350f;
}

.recon-type-btn,
.recon-status-btn {
  transition: all 0.15s ease;
}

.save-dropdown-menu {
  display: none;
  position: absolute;
  right: 0;
  top: 100%;
  margin-top: 6px;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: var(--shadow-dropdown);
  z-index: 100;
  min-width: 320px;
  padding: 8px 0;
  animation: fadeIn 0.15s ease;
}

.save-recon-action-btn {
  transition: background 0.15s ease;
}

.save-recon-action-btn:hover {
  background: #f8fafc !important;
}

.recon-selection-bar {
  position: sticky;
  top: 0;
  z-index: 10;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
  animation: slideDown 0.2s ease;
}

.recon-header-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px 20px;
  box-shadow: var(--shadow-sm);
}

.recon-summary-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 16px 20px;
  margin-bottom: 16px;
  box-shadow: var(--shadow-card);
}

.recon-account-card {
  background: linear-gradient(135deg, #f0fdf4 0%, #ecfdf5 100%);
  border: 1px solid #86efac;
  border-radius: 12px;
  padding: 14px 20px;
  margin-bottom: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

.recon-menu-dropdown {
  display: none;
  position: absolute;
  right: 0;
  top: 100%;
  margin-top: 6px;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: var(--shadow-dropdown);
  z-index: 100;
  min-width: 250px;
  padding: 6px 0;
  animation: fadeIn 0.15s ease;
}

.recon-menu-dropdown.show {
  display: block;
}

.recon-menu-item {
  width: 100%;
  text-align: left;
  padding: 9px 16px;
  border: none;
  background: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: inherit;
  font-size: 13px;
  color: var(--ink);
  transition: background 0.15s ease;
}

.recon-menu-item:hover {
  background: #f8fafc;
}

.recon-menu-item.danger {
  color: var(--red);
}

.recon-menu-item.danger:hover {
  background: var(--red-bg);
}

.session-status {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.session-status.not-started { background: #f1f5f9; color: #64748b; }
.session-status.in-progress { background: var(--blue-bg); color: var(--blue); }
.session-status.pending-review { background: var(--amber-bg); color: var(--amber); }
.session-status.closed { background: var(--green-bg); color: var(--green); }

/* ==========================================================================
   AI COPILOT & CHAT WIDGET
   ========================================================================== */
.btn-ai-sparkle {
  background: linear-gradient(135deg, #4f46e5 0%, #6366f1 100%) !important;
  color: #ffffff !important;
  border: none !important;
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.28) !important;
  transition: all 0.2s ease !important;
}

.btn-ai-sparkle:hover {
  box-shadow: 0 6px 18px rgba(99, 102, 241, 0.4) !important;
  transform: translateY(-1px);
}

.btn-ai-sparkle:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none !important;
}

.ai-badge-high {
  background: #eef2ff;
  color: #4338ca;
  border: 1px solid #c7d2fe;
  font-weight: 700;
}

.ai-badge-doubt {
  background: #fffbeb;
  color: #b45309;
  border: 1px solid #fde68a;
  font-weight: 700;
}

.ai-badge-none {
  background: #fef2f2;
  color: #b91c1c;
  border: 1px solid #fecaca;
  font-weight: 700;
}

.ai-banner-card {
  background: linear-gradient(135deg, #f8faff 0%, #eef2ff 100%);
  border: 1px solid #c7d2fe;
  border-radius: 12px;
  padding: 16px 20px;
  margin-bottom: 18px;
  box-shadow: 0 4px 16px rgba(67, 56, 202, 0.05);
  animation: fadeIn 0.2s ease;
}

.ai-chat-fab {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: linear-gradient(135deg, #4f46e5 0%, #6366f1 100%);
  color: white;
  border: none;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(99, 102, 241, 0.35);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.ai-chat-fab:hover {
  transform: scale(1.08);
  box-shadow: 0 12px 28px rgba(99, 102, 241, 0.48);
}

.ai-chat-widget {
  position: fixed;
  bottom: 90px;
  right: 24px;
  width: 440px;
  height: 580px;
  max-height: 85vh;
  background: #ffffff;
  border-radius: 16px;
  box-shadow: var(--shadow-modal);
  border: 1px solid var(--line);
  z-index: 9998;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: slideUp 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

.ai-chat-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 13px 16px;
  background: linear-gradient(135deg, #f8faff 0%, #eef2ff 100%);
  border-bottom: 1px solid #c7d2fe;
  cursor: grab;
  user-select: none;
}

.ai-chat-header:active {
  cursor: grabbing;
}

.ai-chat-widget.is-dragging {
  user-select: none;
  transition: none !important;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.32);
}

.ai-chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: #f8fafc;
}

.ai-chat-msg {
  padding: 10px 14px;
  border-radius: 12px;
  font-size: 13px;
  line-height: 1.55;
  max-width: 90%;
}

.ai-chat-msg p {
  margin: 0 0 6px;
}

.ai-chat-msg p:last-child {
  margin: 0;
}

.ai-msg {
  background: #ffffff;
  border: 1px solid var(--line);
  color: var(--ink);
  align-self: flex-start;
  border-bottom-left-radius: 4px;
  box-shadow: var(--shadow-sm);
}

.user-msg {
  background: var(--accent);
  color: #ffffff;
  align-self: flex-end;
  border-bottom-right-radius: 4px;
}

.ai-chat-input-area {
  display: flex;
  gap: 8px;
  padding: 12px 16px;
  border-top: 1px solid var(--line);
  background: #ffffff;
}

.ai-chat-typing {
  color: #6366f1;
  font-size: 12px;
  font-style: italic;
  padding: 6px 14px;
}

.chat-action-card {
  margin-top: 10px;
  background: #ffffff;
  border: 1px solid #c7d2fe;
  border-radius: 10px;
  padding: 12px 14px;
  box-shadow: 0 2px 8px rgba(67, 56, 202, 0.06);
}

.chat-action-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.chat-action-title {
  font-size: 12px;
  font-weight: 700;
  color: #1e1b4b;
}

.chat-action-subtitle {
  font-size: 11px;
  color: var(--muted);
  margin-bottom: 10px;
}

.chat-action-btn-group {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.chat-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 11px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  border: none;
  transition: all 0.15s ease;
  text-decoration: none;
}

.chat-btn-download { background: #15803d; color: white; }
.chat-btn-download:hover { background: #166534; transform: translateY(-1px); }
.chat-btn-csv { background: #0284c7; color: white; }
.chat-btn-csv:hover { background: #0369a1; transform: translateY(-1px); }
.chat-btn-view { background: #4f46e5; color: white; }
.chat-btn-view:hover { background: #4338ca; transform: translateY(-1px); }
.chat-btn-action { background: #d97706; color: white; }
.chat-btn-action:hover { background: #b45309; transform: translateY(-1px); }

/* ==========================================================================
   ARCHITECTS, RT & SALES PORTAL
   ========================================================================== */
.sales-portal-tabs { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 16px 0 12px; }
.sales-portal-source { color: var(--muted); font-size: 11px; margin: 0 0 14px; }
.search-input { max-width: 420px; margin: 0 18px 14px; }
#content table tbody tr[hidden] { display: none; }

.rt-tabs { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 16px 0 16px; }

.badge-pix {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--green-bg);
  border: 1px solid var(--green-border);
  color: var(--green);
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 11px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.badge-pix:hover {
  background: #dcfce7;
  border-color: #86efac;
}

.badge-pix .copy-icon {
  font-size: 12px;
}

.recon-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}

.recon-badge.reconciled {
  background: var(--green-bg);
  color: var(--green);
  border: 1px solid var(--green-border);
}

.recon-badge.gateway_card {
  background: var(--blue-bg);
  color: var(--blue);
  border: 1px solid var(--blue-border);
}

.recon-badge.pending {
  background: var(--amber-bg);
  color: var(--amber);
  border: 1px solid var(--amber-border);
}

.channel-tag {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 7px;
  border-radius: 5px;
  font-size: 11px;
  font-weight: 600;
  text-transform: capitalize;
}

.channel-tag.whatsapp { background: var(--green-bg); color: var(--green); border: 1px solid var(--green-border); }
.channel-tag.loja { background: var(--amber-bg); color: var(--amber); border: 1px solid var(--amber-border); }
.channel-tag.recorrente { background: var(--indigo-bg); color: var(--indigo); border: 1px solid var(--indigo-border); }
.channel-tag.site { background: #faf5ff; color: #7e22ce; border: 1px solid #e9d5ff; }
.channel-tag.instagram { background: #fdf2f8; color: #be185d; border: 1px solid #fbcfe8; }

.architect-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 14px;
  margin-top: 14px;
}

.architect-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-shadow: var(--shadow-card);
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.architect-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-card-hover);
  border-color: var(--line-strong);
}

.architect-card-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
}

.architect-card-title {
  font-weight: 700;
  font-size: 14px;
  color: var(--ink);
  line-height: 1.3;
}

.architect-card-body {
  font-size: 12px;
  color: var(--muted);
  display: flex;
  flex-direction: column;
  gap: 5px;
}

/* ==========================================================================
   DIALOGS, MODALS & INPUTS
   ========================================================================== */
dialog {
  width: 440px;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 0;
  box-shadow: var(--shadow-modal);
  background: var(--surface);
  color: var(--ink);
}

dialog::backdrop {
  background: rgba(15, 23, 42, 0.45);
  backdrop-filter: blur(4px);
}

dialog form {
  padding: 24px;
}

dialog label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-secondary);
  margin-top: 14px;
}

input, select, textarea {
  width: 100%;
  margin-top: 6px;
  padding: 9px 12px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: var(--surface);
  font-family: inherit;
  font-size: 13px;
  color: var(--ink);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

input:focus, select:focus, textarea:focus {
  border-color: var(--ink);
  outline: none;
  box-shadow: 0 0 0 3px rgba(15, 23, 42, 0.08);
}

.dialog-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.dialog-head h2 {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0;
}

.close {
  border: 0;
  background: none;
  font-size: 24px;
  cursor: pointer;
  color: var(--muted);
  line-height: 1;
  padding: 4px;
  border-radius: 6px;
  transition: all 0.15s ease;
}

.close:hover {
  color: var(--ink);
  background: #f1f5f9;
}

.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

menu {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin: 22px 0 0;
  padding: 0;
}

.date-range {
  display: flex;
  align-items: end;
  gap: 8px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 8px 10px;
}

.date-range label {
  font-size: 10px;
  font-weight: 600;
  color: var(--muted);
}

.date-range input {
  width: 135px;
  margin-top: 3px;
  padding: 7px;
  font-size: 11px;
}

.date-range .primary-button {
  padding: 8px 12px;
}

/* Toast Notifications */
.toast {
  position: fixed;
  right: 24px;
  bottom: 24px;
  background: var(--ink);
  color: #ffffff;
  padding: 12px 18px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 500;
  box-shadow: var(--shadow-dropdown);
  transform: translateY(100px);
  opacity: 0;
  transition: 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 10000;
}

.toast.show {
  transform: translateY(0);
  opacity: 1;
}

.period-summary-strip {
  display: none !important;
}

/* ==========================================================================
   ANIMATIONS & MEDIA QUERIES
   ========================================================================== */
@keyframes slideDown {
  from { transform: translateY(-10px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

@keyframes slideUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 1000px) {
  .metric-grid,
  .metric-grid-executive {
    grid-template-columns: repeat(2, 1fr);
  }
  .mid-grid {
    grid-template-columns: 1fr;
  }
  .sidebar {
    width: 210px;
  }
  main {
    margin-left: 210px;
    padding: 24px;
  }
  .reconciliation {
    grid-template-columns: 1fr 1fr;
  }
  .seller-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 768px) {
  .sidebar {
    width: 250px !important;
    transform: translateX(-100%);
    box-shadow: 10px 0 30px rgba(0, 0, 0, 0.4);
  }

  main {
    margin-left: 0 !important;
    padding: 16px 14px 24px;
  }

  body.sidebar-mobile-open .sidebar {
    transform: translateX(0);
  }

  body.sidebar-collapsed .sidebar {
    width: 250px !important;
  }

  .metric-grid,
  .metric-grid-executive,
  .reconciliation {
    grid-template-columns: 1fr;
  }

  .seller-dashboard-heading {
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
  }

  .seller-dashboard-heading h2 {
    font-size: 19px;
  }

  .seller-summary-grid {
    gap: 8px;
  }

  .seller-summary-card {
    padding: 12px;
  }

  .seller-summary-card > strong {
    font-size: 18px;
  }

  .ai-chat-widget {
    width: calc(100vw - 20px);
    right: 10px;
    bottom: 80px;
    height: 75vh;
    max-height: 75vh;
  }

  .category-row {
    grid-template-columns: 1fr 1fr;
  }

  .category-row .category-bar {
    display: none;
  }

  header {
    align-items: flex-start;
  }
}

/* =============================================================
   VISÃO GERAL (cockpit): blocos enxutos de caixa, atenção e vendas
   ============================================================= */
.cockpit {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 20px 22px;
  margin-bottom: 16px;
}
.cockpit-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.cockpit-head h2 {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  color: var(--ink);
}
.cockpit-head .eyebrow {
  margin: 0 0 2px;
  text-transform: none;
}
.cockpit-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.cockpit-select {
  font: inherit;
  font-size: 13px;
  padding: 7px 10px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
}
.cockpit-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  border: 1px solid var(--line-subtle);
  border-radius: 10px;
}
.cockpit-kpi {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 16px;
  min-width: 0;
}
.cockpit-kpi + .cockpit-kpi {
  border-left: 1px solid var(--line-subtle);
}
.cockpit-kpi > span {
  font-size: 12px;
  color: var(--muted);
}
.cockpit-kpi > strong {
  font-size: 22px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cockpit-kpi > small {
  font-size: 11.5px;
  color: var(--muted);
}
.cockpit-kpi .positive { color: var(--green); }
.cockpit-kpi .negative { color: var(--red); }
.cockpit-bar {
  height: 6px;
  background: var(--line-subtle);
  border-radius: 99px;
  overflow: hidden;
}
.cockpit-bar i {
  display: block;
  height: 100%;
  background: var(--brand-emerald);
  border-radius: 99px;
}
.cockpit-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 16px;
  font-size: 13px;
}
.cockpit-table th {
  text-align: left;
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 8px 10px;
  border-bottom: 1px solid var(--line);
}
.cockpit-table td {
  padding: 11px 10px;
  border-bottom: 1px solid var(--line-subtle);
  color: var(--ink-secondary);
  vertical-align: middle;
}
.cockpit-table tr:last-child td { border-bottom: none; }
.cockpit-table .num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.cockpit-goal {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 180px;
}
.cockpit-goal .cockpit-bar { flex: 1; }
.cockpit-goal span {
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
}
.cockpit-goal-input {
  font: inherit;
  font-size: 13px;
  width: 130px;
  padding: 6px 8px;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
}
.cockpit-muted { color: var(--subtle); }
.cockpit-attention {
  list-style: none;
  margin: 0;
  padding: 0;
}
.cockpit-attention li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 0;
  font-size: 13px;
  color: var(--ink-secondary);
  border-bottom: 1px solid var(--line-subtle);
}
.cockpit-attention li:last-child { border-bottom: none; }
.cockpit-attention li > span:nth-child(2) { flex: 1; }
.cockpit-dot { font-size: 10px; width: 12px; text-align: center; }
.cockpit-attention .is-danger .cockpit-dot { color: var(--red); }
.cockpit-attention .is-warn .cockpit-dot { color: var(--amber); }
.cockpit-attention .is-info .cockpit-dot { color: var(--subtle); }

@media (max-width: 900px) {
  .cockpit-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cockpit-kpi:nth-child(3) { border-left: none; }
  .cockpit-kpi:nth-child(n + 3) { border-top: 1px solid var(--line-subtle); }
  .cockpit-table th:nth-child(4), .cockpit-table td:nth-child(4) { display: none; }
}
.cockpit-actions .secondary-button { white-space: nowrap; }
/* O atributo hidden precisa vencer o display definido para a barra de filtros */
.filters-bar[hidden] { display: none !important; }

/* Fluxo de caixa por mês → dia → lançamento */
.cf-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cf-table tr.cf-month, .cf-table tr.cf-day { cursor: pointer; }
.cf-table tr.cf-month:hover td, .cf-table tr.cf-day:hover td { background: var(--paper); }
.cf-table tr.cf-month.is-past td { color: var(--muted); }
.cf-table tr.cf-month.is-current td { background: var(--line-subtle); }
.cf-table tr.cf-month.is-open td { border-bottom-color: var(--line); }
.cf-table tr.cf-day td { font-size: 12.5px; padding: 8px 10px; }
.cf-table tr.cf-day td:first-child { padding-left: 30px; }
.cf-caret { display: inline-block; width: 16px; color: var(--subtle); font-size: 11px; }
.cf-tag {
  font-size: 10.5px;
  font-weight: 600;
  color: var(--muted);
  background: var(--line-subtle);
  border-radius: 99px;
  padding: 1px 8px;
  margin-left: 6px;
}
.cf-table tr.is-current .cf-tag { background: var(--blue-bg); color: var(--blue); }
.cf-late { font-style: normal; font-size: 10.5px; color: var(--amber); margin-left: 6px; }
.cf-table td.positive { color: var(--green); }
.cf-table td.negative, .cf-table strong.negative { color: var(--red); }
.cf-items td { padding: 0 10px 10px 48px !important; background: var(--paper); }
.cf-items ul { list-style: none; margin: 0; padding: 0; }
.cf-items li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 0;
  border-bottom: 1px solid var(--line-subtle);
  font-size: 12.5px;
}
.cf-items li:last-child { border-bottom: none; }
.cf-items li span { display: flex; flex-direction: column; min-width: 0; }
.cf-items li small { color: var(--muted); font-size: 11.5px; }
.cf-items li b { white-space: nowrap; font-variant-numeric: tabular-nums; font-weight: 600; }
.cf-items .positive { color: var(--green); }
.cf-items .negative { color: var(--red); }
.cf-note { margin: 14px 0 0; font-size: 11.5px; color: var(--muted); }

/* Vendas */
.sp-tabs { display: flex; gap: 6px; margin: 0 0 12px; flex-wrap: wrap; }
.sp-table td small { display: block; color: var(--muted); font-size: 11.5px; margin-top: 2px; }
.sp-table .sp-row { cursor: pointer; }
.sp-table .sp-row:hover td { background: var(--paper); }
.sp-reason { color: var(--amber) !important; }
.cockpit-actions .primary-button { white-space: nowrap; }
.cockpit .search-input { display: block; width: min(360px, 100%); margin: 0 0 4px; }

/* Listas agrupadas por dia (A receber / A pagar) */
.ledger-table .ledger-day td {
  background: var(--paper);
  font-size: 11.5px;
  font-weight: 600;
  color: var(--ink-secondary);
  padding: 7px 10px;
  border-bottom: 1px solid var(--line);
}
.ledger-table .ledger-day td span + span { float: right; color: var(--muted); font-weight: 500; font-variant-numeric: tabular-nums; }
.ledger-table .ledger-row { cursor: pointer; }
.ledger-table .ledger-row:hover td { background: var(--paper); }
.ledger-table td small { display: block; color: var(--muted); font-size: 11.5px; margin-top: 2px; }
.ledger-table .negative { color: var(--red); }
.ledger-action { padding: 4px 12px; font-size: 12px; }
.ledger-more { display: block; margin: 14px auto 0; }
.ledger-empty { text-align: center; color: var(--muted); padding: 28px 12px; margin: 0; font-size: 13px; }
.ledger-toggle { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); margin-left: 8px; cursor: pointer; }
.ledger-warning {
  margin: 16px 0 0;
  padding: 10px 14px;
  border: 1px solid var(--amber-border);
  background: var(--amber-bg);
  color: #92400e;
  border-radius: 8px;
  font-size: 12.5px;
}

/* DRE e gastos: tabela por mês */
.dre-scroll { overflow-x: auto; margin-top: 16px; }
.dre-table { margin-top: 0; min-width: 760px; }
.dre-table td:first-child { white-space: nowrap; padding-right: 18px; }
.dre-table .negative { color: var(--red); }
.dre-table .dre-strong td { font-weight: 600; color: var(--ink); }
.dre-table .dre-subtotal td { background: var(--paper); color: var(--ink); font-weight: 600; }
.dre-table .dre-total td { background: var(--line-subtle); color: var(--ink); font-weight: 700; border-top: 1px solid var(--line-strong); }
.exp-bar { margin-top: 6px; max-width: 220px; height: 4px; }
.sp-tabs .ledger-toggle { display: inline-flex !important; flex-direction: row; width: auto; white-space: nowrap; }
.sp-tabs .ledger-toggle input { width: auto !important; height: auto; margin: 0; accent-color: var(--brand-emerald-dark); }

/* Conciliação: blocos dentro do cartão principal */
.sr-block { margin-top: 8px; }
.sr-block + .sr-block { margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--line-subtle); }
.sr-block h3 { margin: 0; font-size: 14px; font-weight: 700; color: var(--ink); }
.sr-desc { margin: 2px 0 8px; font-size: 12px; color: var(--muted); }
.cockpit .sr-block table { width: 100%; font-size: 12.5px; }

/* Clientes */
.cust-filters { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 16px 0 4px; }
.cust-filters .search-input { margin: 0; width: min(380px, 100%); }
.cust-count { margin-left: auto; font-size: 12px; }
.cust-actions { white-space: nowrap; }
.icon-btn {
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--muted);
  border-radius: 6px;
  width: 28px;
  height: 28px;
  cursor: pointer;
  font-size: 12px;
}
.icon-btn:hover { color: var(--ink); border-color: var(--line-strong); }
.icon-btn.btn-delete-customer:hover { color: var(--red); border-color: var(--red-border); }
.ledger-table td a { color: var(--ink-secondary); text-decoration: none; }
.ledger-table td a:hover { color: var(--blue); }
.cust-pager { display: flex; justify-content: space-between; align-items: center; margin-top: 14px; font-size: 12px; }
.cust-pager > div { display: flex; gap: 8px; align-items: center; }

/* Arquitetos & RT */
.pix-copy {
  border: 1px dashed var(--line-strong);
  background: var(--paper);
  color: var(--ink-secondary);
  border-radius: 6px;
  padding: 3px 8px;
  font: inherit;
  font-size: 11.5px;
  cursor: copy;
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pix-copy:hover { border-color: var(--brand-emerald); color: var(--green); }
.cockpit .architect-cards-grid { margin-top: 12px; }

/* Cadastros financeiros: listas em colunas */
.catalog-card ul { columns: 2; column-gap: 24px; }
.catalog-card li { break-inside: avoid; padding: 6px 2px; font-size: 12.5px; }
.catalog-card .remove-catalog { width: 20px; height: 20px; font-size: 14px; flex-shrink: 0; }
.catalog-dup { font-style: normal; font-size: 10px; color: var(--amber); background: var(--amber-bg); border-radius: 99px; padding: 1px 6px; margin-left: 4px; }
@media (max-width: 900px) { .catalog-card ul { columns: 1; } }
.cust-filters select.cockpit-select { width: auto; margin: 0; min-width: 170px; }
.cust-actions .icon-btn { color: var(--muted) !important; background: var(--surface) !important; }
.cust-actions .icon-btn.btn-delete-customer:hover { color: var(--red) !important; }
.ledger-warning a { color: inherit; font-weight: 600; }
.cockpit-actions select.cockpit-select { width: auto; margin: 0; }

/* Período de previsão */
.cockpit-date { font: inherit; font-size: 13px; padding: 6px 8px; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--surface); width: auto; margin: 0; }
.cockpit-kpi.is-link { cursor: pointer; transition: background .15s; }
.cockpit-kpi.is-link:hover { background: var(--paper); }
.cockpit-kpi.is-link small { color: var(--blue); }
.cockpit-actions .sync-status-badge { margin-right: 6px; }

/* RT: filtros e alternância lista / por arquiteto */
.rt-filters { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 4px 0 10px; }
.rt-filters .search-input { margin: 0; width: min(300px, 100%); }
.rt-filters select.cockpit-select { width: auto; margin: 0; }
.rt-view-toggle { margin-left: auto; display: inline-flex; gap: 6px; }
.ledger-table td .tag + small { display: block; }
.positive { color: var(--green); }
/* Entregas */
.ship-link { display: block; margin-top: 6px; max-width: 320px; font-size: 12px; padding: 5px 8px; }
.ship-edit { font-size: 11px; padding: 0; margin-top: 2px; }

/* Etiqueta clicável (abre o rastreio) */
.tag-button { border: 0; background: none; padding: 0; font: inherit; text-align: left; cursor: pointer; color: inherit; }
.tag-button:hover .tag { box-shadow: 0 0 0 2px var(--line-strong); }
.tag-button small { display: block; color: var(--muted); font-size: 11.5px; margin-top: 2px; }

/* Janela de rastreio */
.shipment-dialog { max-width: 720px; width: 95vw; padding: 0; border: 0; border-radius: 14px; box-shadow: 0 25px 60px #0004; }
.shipment-dialog::backdrop { background: #0f172a66; }
.shipment-dialog-body { padding: 22px 24px; max-height: 88vh; overflow-y: auto; }
.shipment-dialog .dialog-head { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 14px; }
.shipment-dialog .dialog-head h2 { font-size: 17px; margin: 0; color: var(--ink); }
.shipment-dialog .dialog-head p { margin: 3px 0 0; font-size: 12px; }
.ship-info { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 0; border: 1px solid var(--line-subtle); border-radius: 10px; margin-bottom: 14px; }
.ship-info > div { padding: 10px 14px; display: flex; flex-direction: column; gap: 2px; }
.ship-info > div + div { border-left: 1px solid var(--line-subtle); }
.ship-info span { font-size: 11.5px; color: var(--muted); }
.ship-info strong { font-size: 14px; color: var(--ink); }
.ship-info small { font-size: 11.5px; color: var(--muted); }
.ship-info .tag { align-self: flex-start; margin-top: 2px; }
.ship-block { border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; margin-bottom: 12px; }
.ship-block-head { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; }
.ship-block-head small { display: block; color: var(--muted); font-size: 11.5px; margin-top: 2px; }
.ship-actions { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 4px; }
.ship-actions .secondary-button { font-size: 12px; padding: 5px 10px; text-decoration: none; }
.ship-timeline { list-style: none; margin: 12px 0 0; padding: 0; }
.ship-timeline li { position: relative; display: flex; gap: 12px; padding: 0 0 14px 0; }
.ship-timeline li::before { content: ''; position: absolute; left: 5px; top: 14px; bottom: 0; width: 2px; background: var(--line); }
.ship-timeline li:last-child::before { display: none; }
.ship-timeline li:last-child { padding-bottom: 0; }
.ship-dot { flex-shrink: 0; width: 12px; height: 12px; margin-top: 3px; border-radius: 50%; background: var(--line-strong); }
.ship-timeline li.is-last .ship-dot { background: var(--brand-emerald); box-shadow: 0 0 0 3px var(--green-bg); }
.ship-timeline strong { font-size: 13px; color: var(--ink); font-weight: 600; }
.ship-timeline small { display: block; font-size: 11.5px; color: var(--muted); }
.ship-footer { display: flex; justify-content: flex-end; }

/* Cliente no formulário de venda: busca no cadastro */
.customer-picker { position: relative; margin-bottom: 4px; }
.customer-results {
  position: absolute; left: 0; right: 0; z-index: 20; margin-top: -6px;
  background: var(--surface); border: 1px solid var(--line-strong); border-radius: 10px;
  box-shadow: 0 12px 30px #0f172a22; max-height: 320px; overflow-y: auto;
}
.customer-option {
  display: block; width: 100%; text-align: left; border: 0; background: none; font: inherit;
  padding: 9px 14px; cursor: pointer; border-bottom: 1px solid var(--line-subtle);
}
.customer-option:last-child { border-bottom: 0; }
.customer-option:hover, .customer-option:focus { background: var(--paper); outline: none; }
.customer-option strong { display: block; font-size: 13px; color: var(--ink); }
.customer-option small { display: block; font-size: 11.5px; color: var(--muted); margin-top: 1px; }
.customer-option.is-new strong { color: var(--green); }
.customer-selected {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  border: 1px solid var(--green-border); background: var(--green-bg); border-radius: 10px; padding: 10px 14px; margin: 4px 0 12px;
}
.customer-selected strong { display: block; font-size: 13.5px; color: var(--ink); }
.customer-selected small { display: block; font-size: 11.5px; color: var(--muted); }

/* Produtos */
.cockpit-kpi strong.warning { color: #b45309; }
.product-row { cursor: pointer; }
.product-row.is-inactive td { opacity: .55; }
.product-issue { color: #b45309; }
.product-issue-box { background: #fffbeb; border: 1px solid #fde68a; color: #92400e; border-radius: 8px; padding: 8px 12px; font-size: 12.5px; margin-bottom: 12px; }
.product-form label { display: block; margin-bottom: 10px; }
.product-form textarea { width: 100%; }
.product-form-section { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin: 18px 0 8px; padding-top: 12px; border-top: 1px solid var(--line-subtle); }
.product-form-section:first-of-type { border-top: 0; padding-top: 0; margin-top: 4px; }
.product-check { display: flex !important; align-items: center; gap: 8px; font-size: 13px; }
.product-check input { width: auto; margin: 0; }
.product-fiscal-intro { background: var(--paper); border: 1px solid var(--line-subtle); border-radius: 10px; padding: 12px 16px; margin-bottom: 12px; font-size: 13px; color: var(--ink); }
.product-fiscal-intro p { margin: 0 0 6px; }
.product-picker-list { display: flex; flex-direction: column; gap: 4px; max-height: 50vh; overflow-y: auto; margin-top: 8px; }
.product-pick { font: inherit; text-align: left; background: #fff; border: 1px solid var(--line-subtle); border-radius: 8px; padding: 8px 12px; cursor: pointer; }
.product-pick:hover, .product-pick.active { border-color: var(--green); background: #f0fdf4; }
.product-pick small { display: block; color: var(--muted); font-size: 11.5px; }
.sale-items-box { border: 1px solid var(--line); border-radius: 10px; margin-bottom: 18px; overflow: hidden; }
.sale-items-head { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; background: #fafbfa; border-bottom: 1px solid var(--line); font-size: 13px; }
.sale-items-box .cockpit-table { margin: 0; }
#product-dialog .dialog-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }
.product-fiscal-intro + table .tag { white-space: nowrap; }

/* Venda: produtos vendidos */
.sale-items-editor { border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; margin: 4px 0 14px; background: #fff; }
.sale-items-editor-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; font-size: 13px; }
.sale-items-editor-head .cockpit-muted { font-size: 11.5px; }
.sale-items-scroll { overflow-x: auto; }
.sale-items-table { width: 100%; border-collapse: collapse; font-size: 12.5px; min-width: 640px; table-layout: fixed; }
.sale-items-table th { text-align: left; font-size: 11px; text-transform: uppercase; color: var(--muted); font-weight: 600; padding: 4px 4px 6px; }
.sale-items-table td { padding: 3px 4px; vertical-align: middle; }
.sale-items-table input { margin: 0; padding: 6px 8px; font-size: 12.5px; width: 100%; }
.sale-items-table th:nth-child(1) { width: auto; }
.sale-items-table th:nth-child(2), .sale-items-table th:nth-child(3) { width: 64px; }
.sale-items-table th:nth-child(4) { width: 48px; }
.sale-items-table th:nth-child(5) { width: 70px; }
.sale-items-table th:nth-child(6) { width: 78px; }
.sale-items-table th:nth-child(7) { width: 92px; }
.sale-items-table th:nth-child(8) { width: 26px; }
.sale-items-table th { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sale-items-table input { padding: 6px 6px; }
.sale-items-table .num { text-align: right; white-space: nowrap; font-weight: 600; }
.sale-items-table .qty-calc { display: block; padding: 6px 2px; color: var(--ink); white-space: nowrap; }
.sale-items-table input:disabled { background: var(--paper); color: var(--muted); }
.sale-items-table small { display: block; color: var(--muted); font-size: 11px; margin-top: 2px; }
.sale-items-table .is-invalid { border-color: #f59e0b; }
.sale-items-empty { color: var(--muted); text-align: center; padding: 10px; }
.sale-items-foot { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; margin-top: 8px; }
.sale-items-foot label { margin: 0; font-size: 12px; width: 110px; }
.sale-items-foot label input { margin-top: 3px; padding: 6px 8px; }
.sale-items-total { margin-left: auto; text-align: right; display: flex; flex-direction: column; font-size: 12px; color: var(--muted); }
.sale-items-total strong { font-size: 16px; color: var(--ink); }
.sale-items-editor.is-readonly input, .sale-items-editor.is-readonly button { pointer-events: none; opacity: .7; }
/* RT de arquiteta no registro da venda (opcional) */
.sale-rt-box { border: 1px solid var(--line); border-radius: 10px; padding: 10px 14px; margin: 0 0 14px; background: #fff; }
.sale-rt-head { font-size: 13px; margin-bottom: 6px; }
.sale-rt-head .cockpit-muted { font-size: 11.5px; margin-left: 4px; }
.sale-rt-fields { display: grid; grid-template-columns: minmax(0, 1fr) 110px 130px; gap: 12px; align-items: end; }
.sale-rt-fields label { margin: 0; font-size: 12px; }
.sale-rt-fields label input { margin-top: 3px; }
.sale-rt-value { display: flex; flex-direction: column; gap: 2px; font-size: 12px; color: var(--muted); padding-bottom: 6px; }
.sale-rt-value strong { font-size: 15px; color: #6d28d9; }
.sale-rt-note { display: block; margin-top: 6px; font-size: 11.5px; color: var(--muted); }
.sale-rt-box.is-locked { background: transparent; }
.sale-rt-fields[hidden] { display: none; }

/* Ficha da cliente: histórico de compras (vendedora) */
.cd-warn { background: #fffbeb; border: 1px solid #fde68a; color: #92400e; border-radius: 10px; padding: 10px 14px; font-size: 12.5px; margin-bottom: 14px; }
.cd-box { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 16px; margin-bottom: 14px; }
.cd-box-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 12px; font-size: 14px; }
.cd-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 12px; }
.cd-kpis > div { border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; }
.cd-kpis small { display: block; font-size: 10.5px; font-weight: 700; text-transform: uppercase; color: var(--muted); letter-spacing: .03em; }
.cd-kpis strong { display: block; font-size: 16px; color: var(--ink); margin-top: 2px; }
.cd-kpis span { font-size: 11px; color: var(--muted); }
.cd-hist { width: 100%; border-collapse: collapse; font-size: 12.5px; margin: 0; }
.cd-hist th { text-align: left; font-size: 10.5px; text-transform: uppercase; color: var(--muted); padding: 6px 10px; border-bottom: 1px solid var(--line); background: #fafafa; }
.cd-hist td { padding: 8px 10px; border-bottom: 1px solid #f1f1f1; vertical-align: top; }
.cd-hist td small { display: block; font-size: 11px; color: var(--muted); }
.cd-hist .num { text-align: right; }
.cd-hist-row { cursor: pointer; }
.cd-hist-row:hover td { background: #f8fafc; }
.cd-empty { text-align: center; color: var(--muted); font-size: 12.5px; padding: 18px; background: #f9fafb; border-radius: 8px; margin: 0; }
@media (max-width: 640px) { .cd-kpis { grid-template-columns: 1fr 1fr; } .cd-hist th:nth-child(4), .cd-hist td:nth-child(4) { display: none; } }
@media (max-width: 640px) { .sale-rt-fields { grid-template-columns: 1fr 1fr; } .sale-rt-fields label:first-child { grid-column: 1 / -1; } }

/* Orçamentos e OS */
.quote-dialog { max-width: 1040px; width: 96vw; padding: 0; border: 0; border-radius: 14px; box-shadow: 0 25px 60px #0004; }
.quote-dialog::backdrop { background: #0f172a66; }
.quote-dialog-body { padding: 20px 24px; max-height: 92vh; overflow-y: auto; }
.quote-dialog .dialog-head { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 12px; }
.quote-dialog .dialog-head h2 { font-size: 18px; margin: 0; color: var(--ink); }
.quote-dialog .dialog-head .text-button { padding: 0; font-size: inherit; }
.quote-fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.quote-fieldset[disabled] { opacity: .75; }
.quote-grid { display: grid; grid-template-columns: 2.2fr 1.2fr 1fr 1fr 1fr; gap: 10px; align-items: start; margin-bottom: 12px; }
.quote-grid label, .quote-customer > label { font-size: 12px; margin: 0; }
.quote-grid input, .quote-grid select { margin-top: 4px; }
.quote-customer { position: relative; }
.quote-customer .customer-selected { margin-top: 4px; }
.quote-customer #q-customer-search { margin-top: 4px; width: 100%; }
.quote-dialog .sale-items-table td:first-child input + input { margin-top: 4px; font-size: 11.5px; color: var(--muted); }
.quote-dialog .two-col label { font-size: 12px; }
.quote-dialog textarea { width: 100%; }
.quote-actions { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; border-top: 1px solid var(--line-subtle); margin-top: 14px; padding-top: 14px; }
.quote-actions-left, .quote-actions-right { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.approve-button { background: #166534 !important; border-color: #166534 !important; }
.quote-row { cursor: pointer; }
.quote-row-actions { white-space: nowrap; min-width: 96px; }
.quote-row-actions .icon-btn { font-size: 11px; font-weight: 700; }
.company-form { max-width: 760px; }
.company-logo-row { display: flex; gap: 16px; align-items: center; margin-bottom: 12px; }
.company-logo-preview { width: 150px; height: 70px; border: 1px dashed var(--line); border-radius: 8px; display: flex; align-items: center; justify-content: center; color: var(--muted); font-size: 12px; background: #fff; }
.company-logo-preview img { max-width: 140px; max-height: 62px; object-fit: contain; }
@media (max-width: 860px) { .quote-grid { grid-template-columns: 1fr 1fr; } .quote-customer { grid-column: 1 / -1; } }

/* OS: dados para finalizar */
.os-banner { display: flex; justify-content: space-between; align-items: center; gap: 12px; border-radius: 10px; padding: 10px 14px; margin-bottom: 12px; font-size: 13px; border: 1px solid; }
.os-banner.is-warn { background: #fffbeb; border-color: #fde68a; color: #92400e; }
.os-banner.is-ok { background: #f0fdf4; border-color: #bbf7d0; color: #166534; }
.os-banner.is-danger { background: #fef2f2; border-color: #fecaca; color: #991b1b; }
.os-stage-pill { display: block; margin-top: 4px; padding: 9px 12px; border: 1px solid var(--line-subtle); border-radius: 8px; background: var(--paper); font-size: 13px; font-weight: 600; color: var(--ink); }
.os-sections { display: grid; grid-template-columns: 1.3fr 1fr 1.1fr; gap: 12px; margin: 0 0 14px; }
.os-section { border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; background: #fff; }
.os-section h3 { margin: 0 0 8px; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.os-section h3 .product-check { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--ink); margin: 0; }
.os-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 10px; }
.os-fields label { font-size: 12px; margin: 0; }
.os-fields input, .os-fields select { margin-top: 3px; }
.os-fields small { display: block; color: var(--muted); font-size: 11px; margin-top: 3px; font-weight: 400; }
.os-wide { grid-column: 1 / -1; }
.os-rt.is-on { border-color: #c4b5fd; background: #faf5ff; }
.os-rt-value { display: flex; flex-direction: column; gap: 2px; font-size: 12px; color: var(--muted); }
.os-rt-value strong { font-size: 14px; color: #6d28d9; }
.danger-text { color: #b91c1c !important; }
@media (max-width: 980px) { .os-sections { grid-template-columns: 1fr; } }

/* Produção: quadro por etapa */
.prod-board { display: grid; grid-template-columns: repeat(auto-fill, minmax(205px, 1fr)); gap: 10px; padding-bottom: 8px; align-items: start; }
.prod-col { background: var(--paper); border: 1px solid var(--line-subtle); border-radius: 10px; padding: 8px; min-height: 160px; }
.prod-col.is-over { border-color: var(--green); background: #f0fdf4; }
.prod-col-head { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; padding: 2px 4px 8px; font-size: 12px; }
.prod-col-head span { color: var(--muted); white-space: nowrap; }
.prod-empty { text-align: center; color: var(--muted); font-size: 12px; margin: 14px 0; }
.prod-card { background: #fff; border: 1px solid var(--line); border-radius: 9px; padding: 9px 10px; margin-bottom: 8px; cursor: pointer; font-size: 12px; box-shadow: 0 1px 2px #0000000d; }
.prod-card:hover { border-color: var(--green); }
.prod-card.is-urgent { border-left: 4px solid #dc2626; }
.prod-card-top { display: flex; justify-content: space-between; align-items: center; gap: 6px; }
.prod-card-customer { font-weight: 600; color: var(--ink); margin: 3px 0 4px; }
.prod-card-items span { display: block; color: var(--muted); font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.prod-card-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.prod-card-tags .tag { font-size: 10.5px; }
.prod-card-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 6px; gap: 6px; }
.prod-card-foot small { color: var(--muted); font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.prod-card-foot .icon-btn { padding: 2px 6px; font-size: 10px; }
.prod-move { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.prod-move .search-input { flex: 1; min-width: 220px; margin: 0; }
.prod-timeline { list-style: none; padding: 0; margin: 0; border-left: 2px solid var(--line); }
.prod-timeline li { padding: 4px 0 10px 14px; position: relative; font-size: 12.5px; }
.prod-timeline li::before { content: ''; position: absolute; left: -6px; top: 8px; width: 10px; height: 10px; border-radius: 50%; background: var(--green); }
.prod-timeline li span { color: var(--muted); margin-left: 8px; font-size: 11.5px; }
.prod-timeline li p { margin: 2px 0 0; color: var(--ink); }
.prod-card-foot > span { display: flex; gap: 4px; flex-shrink: 0; }

/* OS x plataforma (pedido lançado duas vezes) */
.os-dup-box { background: #fffbeb; border: 1px solid #fde68a; border-radius: 10px; padding: 12px 14px; margin-bottom: 12px; font-size: 13px; color: #78350f; }
.os-dup-box p { margin: 2px 0 8px; }
.os-dup-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; background: #fff; border: 1px solid #fde68a; border-radius: 8px; padding: 8px 10px; margin-top: 6px; color: var(--ink); }
.os-dup-row small { display: block; color: var(--muted); font-size: 11.5px; margin-top: 2px; }
.os-dup-row > span { display: flex; gap: 6px; flex-shrink: 0; }

/* Busca de produto com nome completo */
.product-suggest { position: fixed; z-index: 10001; max-height: 340px; overflow-y: auto; background: #fff; border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 12px 32px #0f172a29; padding: 4px; }
.product-suggest .ps-option { display: block; width: 100%; text-align: left; font: inherit; background: none; border: 0; border-radius: 7px; padding: 7px 10px; cursor: pointer; color: var(--ink); }
.product-suggest .ps-option strong { display: block; font-size: 13px; font-weight: 600; white-space: normal; }
.product-suggest .ps-option small { display: block; color: var(--muted); font-size: 11.5px; }
.product-suggest .ps-option.is-active, .product-suggest .ps-option:hover { background: #f0fdf4; }
.product-suggest .ps-empty { padding: 10px; color: var(--muted); font-size: 12.5px; }
.si-picked { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; padding: 5px 8px; border: 1px solid var(--line-subtle); border-radius: 8px; background: var(--paper); }
.si-picked strong { display: block; font-size: 12.5px; font-weight: 600; color: var(--ink); white-space: normal; line-height: 1.3; }
.si-picked small { margin-top: 1px; }
.si-picked .si-change { font-size: 11px; padding: 0; flex-shrink: 0; }
.sale-items-table td:first-child .si-picked + input, .sale-items-table td:first-child .si-product + input { margin-top: 4px; }
/* Desconto em R$ ou % */
.disc-group { display: flex; margin-top: 3px; }
.disc-group input { border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; margin: 0 !important; min-width: 0; }
.disc-group select { width: auto; margin: 0 !important; border-left: 0; border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important; padding: 6px 6px; font-size: 12px; background: var(--paper); }
.sale-items-foot label { width: 140px; }
/* Endereços */
.addr-form { border: 1px dashed var(--line); border-radius: 10px; padding: 10px 12px; margin-top: 8px; background: #fff; }
.addr-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px 8px; }
.addr-grid label { font-size: 11.5px; margin: 0; }
.addr-grid input { margin-top: 2px; padding: 6px 8px; font-size: 12.5px; }
.addr-wide { grid-column: span 2; }
.addr-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 8px; }
.addr-box { border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; margin-top: 14px; }
.addr-box-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; font-size: 13px; }
.addr-row { display: flex; justify-content: space-between; gap: 10px; align-items: center; padding: 7px 0; border-top: 1px solid var(--line-subtle); font-size: 13px; }
.addr-row small { display: block; color: var(--muted); font-size: 12px; }
.addr-row > span { display: flex; gap: 10px; flex-shrink: 0; }
.os-sections { grid-template-columns: 1.15fr 1.35fr 1fr; }
.os-fields select[data-qaddr] { width: 100%; }
@media (max-width: 760px) { .addr-grid { grid-template-columns: 1fr 1fr; } }

.os-arch-field { display: flex; flex-direction: column; gap: 3px; font-size: 12px; }
.os-field-label { font-size: 12px; color: var(--ink); }
.os-arch-field small { color: var(--muted); font-size: 11px; }

/* Crédito do arquiteto */
.os-credit { background: #fff; border: 1px dashed #c4b5fd; border-radius: 8px; padding: 8px 10px; display: flex; flex-direction: column; gap: 6px; font-size: 12px; }
.os-credit strong { color: #6d28d9; }
.os-credit small { color: var(--muted); }
.os-credit label { font-size: 12px; margin: 0; }
.os-credit-buttons { display: flex; gap: 12px; flex-wrap: wrap; }
.os-credit-buttons .text-button { padding: 0; font-size: 12px; }
.arch-credit-line { display: flex; width: 100%; align-items: baseline; gap: 6px; margin-top: 8px; padding: 6px 8px; border: 1px solid var(--line-subtle); border-radius: 8px; background: var(--paper); font: inherit; font-size: 11.5px; color: var(--muted); cursor: pointer; text-align: left; }
.arch-credit-line strong { color: var(--ink); font-size: 12.5px; }
.arch-credit-line small { margin-left: auto; color: var(--blue, #2563eb); }
.arch-credit-line.has-credit { border-color: #c4b5fd; background: #faf5ff; }
.arch-credit-line.has-credit strong { color: #6d28d9; }

/* e-Rede: conferência do pagamento */
.os-rede { display: flex; flex-direction: column; gap: 4px; font-size: 12px; }
.os-rede .text-button { padding: 0; align-self: flex-start; font-size: 12px; }
.os-rede .text-button:disabled { opacity: .45; cursor: default; }
.rede-ok { color: #166534; }
.rede-bad { color: #b91c1c; }
.rede-result { border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; display: flex; flex-direction: column; gap: 3px; background: #fff; }
.rede-result.is-ok { border-color: #bbf7d0; background: #f0fdf4; }
.rede-result.is-bad { border-color: #fecaca; background: #fef2f2; }
.rede-result small { color: var(--muted); }
.rede-result .secondary-button { align-self: flex-start; margin-top: 4px; font-size: 12px; padding: 4px 10px; }

/* Rede */
.rede-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; border: 1px solid var(--line); border-radius: 10px; padding: 10px 14px; margin-bottom: 12px; font-size: 13px; }
.rede-head small { display: block; color: var(--muted); font-size: 12px; margin-top: 2px; }
.rede-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 14px; }
.rede-card { border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; }
.rede-portal { margin-bottom: 14px; }
.rede-inst-box table { margin: 0; font-size: 12.5px; }
.rede-inst-box td small { display: block; color: var(--muted); font-size: 11px; margin-top: 2px; }
.rede-portal > .rede-head { border: 0; padding: 0; margin-bottom: 10px; }
.rede-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 12px; }
.rede-kpis > div { background: var(--surface-2, #f8fafc); border-radius: 8px; padding: 8px 10px; display: flex; flex-direction: column; gap: 2px; }
.rede-kpis small { color: var(--muted); font-size: 11.5px; }
.rede-kpis strong { font-size: 16px; }
.rede-portal-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.rede-portal-tabs button { border: 1px solid var(--line); background: #fff; border-radius: 999px; padding: 5px 12px; font-size: 12.5px; cursor: pointer; color: var(--ink); }
.rede-portal-tabs button.active { background: var(--ink); color: #fff; border-color: var(--ink); }
.rede-portal .os-dup-row select { font-size: 12.5px; }
@media (max-width: 760px) { .rede-kpis { grid-template-columns: 1fr 1fr; } .rede-portal .os-dup-row { flex-direction: column; align-items: stretch; } .rede-portal .os-dup-row > span { flex-wrap: wrap; } }
.rede-card .product-form-section { margin-top: 0; padding-top: 0; border-top: 0; }
.rede-card .rede-result { margin-top: 10px; }
.rede-card .rede-result label { font-size: 12px; margin: 6px 0 0; }
.rede-card .rede-result .primary-button { align-self: flex-start; margin-top: 6px; }
.rede-rates { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 10px; margin-bottom: 6px; }
.rede-rates label { font-size: 12px; margin: 0; }
.rede-rates input { margin-top: 3px; }
@media (max-width: 900px) { .rede-grid { grid-template-columns: 1fr; } }

/* Identificar pagamento */
.tag-button .pay-id-hint { display: block; font-size: 10.5px; color: var(--muted); margin-top: 2px; text-align: left; }
.tag-button:hover .pay-id-hint { color: var(--blue, #2563eb); text-decoration: underline; }
.pay-id-label { font-size: 12px; display: block; margin-bottom: 6px; }
.pay-id-label .prod-move { margin-top: 4px; }
.pay-manual { border: 1px dashed var(--line); border-radius: 10px; padding: 8px 12px; margin-top: 10px; }
.pay-manual summary { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--ink); }
.pay-manual .rede-rates { margin-top: 10px; }
#product-dialog .rede-result .primary-button, #product-dialog .rede-result .text-button { align-self: flex-start; margin-top: 6px; }

/* Saldo por conta (Caixa) */
.bank-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 12px; }
.bank-card { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; background: #fff; }
.bank-card > span { font-size: 12px; color: var(--muted); }
.bank-card > strong { font-size: 18px; }
.bank-card > small { font-size: 11.5px; color: var(--muted); }
.bank-card .link-button { align-self: flex-start; margin-top: 4px; background: none; border: 0; padding: 0; color: #2563eb; font-size: 12px; cursor: pointer; }
.bank-card .bank-stale { color: #b45309; }
.bank-card-soft { background: var(--surface-2, #f8fafc); }
@media (max-width: 900px) { .bank-strip { grid-template-columns: 1fr 1fr; } }

/* Frete (Visão geral): detalhe por transportadora ao passar o mouse */
.freight-card { position: relative; cursor: help; outline: none; }
.freight-card .freight-me strong { color: var(--muted); }
.freight-tip { display: none; position: absolute; z-index: 30; top: calc(100% + 8px); left: 50%; transform: translateX(-50%); width: min(680px, 94vw); overflow-x: auto;
  background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 12px 32px rgba(15, 23, 42, .16); padding: 12px 14px; font-size: 12.5px; cursor: default; }
/* Só ao passar o mouse (sem ficar preso aberto depois de um clique) */
@media (hover: hover) { .freight-card:hover .freight-tip { display: block; } }
.freight-card.is-open .freight-tip { display: block; }
.freight-tip > strong { display: block; margin-bottom: 6px; font-size: 13px; }
.freight-tip table { width: 100%; border-collapse: collapse; }
.freight-tip th { text-align: left; font-size: 11px; color: var(--muted); font-weight: 600; padding: 4px 6px; border-bottom: 1px solid var(--line); }
.freight-tip td { padding: 5px 6px; border-bottom: 1px solid #f1f5f9; vertical-align: top; }
.freight-tip .num { text-align: right; white-space: nowrap; }
.freight-tip td small { display: block; color: var(--muted); font-size: 11px; }
.freight-tip tfoot td { font-weight: 700; border-bottom: 0; }
.freight-tip > small { display: block; margin-top: 8px; color: var(--muted); font-size: 11px; line-height: 1.4; }

.freight-single { display: flex; align-items: flex-end; gap: 28px; flex-wrap: wrap; border: 1px solid var(--line); border-radius: 12px; padding: 14px 18px; background: #fff; }
.freight-single > div:not(.freight-tip) { display: flex; flex-direction: column; gap: 2px; }
.freight-single span { font-size: 12px; color: var(--muted); }
.freight-main strong { font-size: 26px; }
.freight-sub strong { font-size: 16px; }
.freight-sub strong em { font-style: normal; font-size: 11px; color: var(--muted); margin-left: 2px; }
.freight-sub small { font-size: 11px; color: var(--muted); }
.freight-result.is-pos strong { color: #047857; }
.freight-result.is-neg strong { color: #b91c1c; }
.freight-check { margin-top: 10px; border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; background: #fff; font-size: 12.5px; }
.freight-check summary { cursor: pointer; font-weight: 600; color: var(--ink); }
.freight-check table { width: 100%; border-collapse: collapse; margin-top: 8px; }
.freight-check th { text-align: left; font-size: 11px; color: var(--muted); font-weight: 600; padding: 4px 6px; border-bottom: 1px solid var(--line); }
.freight-check td { padding: 6px; border-bottom: 1px solid #f1f5f9; vertical-align: top; }
.freight-check td small { display: block; color: var(--muted); font-size: 11px; }
.freight-check .num { text-align: right; white-space: nowrap; }
.freight-check > small { display: block; margin-top: 8px; color: var(--muted); font-size: 11px; line-height: 1.4; }
@media (max-width: 600px) { .freight-check { overflow-x: auto; } }

.bank-card .bank-due { color: var(--ink); }
.bank-card .bank-due strong { font-size: 12px; }

/* Saldo por conta: dois grupos com cards no mesmo formato */
.bank-groups { display: grid; grid-template-columns: 3fr 2fr; gap: 14px; margin-top: 12px; }
.bank-group-title { margin: 0 0 6px; font-size: 12px; font-weight: 700; color: var(--ink); }
.bank-group-title span { font-weight: 400; color: var(--muted); margin-left: 6px; }
.bank-groups .bank-strip { margin-top: 0; }
.bank-strip-3 { grid-template-columns: repeat(3, 1fr); }
.bank-strip-2 { grid-template-columns: repeat(2, 1fr); }
.bank-group-wide { grid-column: 1 / -1; }
.bank-card .bank-via { font-style: normal; font-size: 11px; color: var(--muted); margin-left: 4px; }

/* Antecipação: cartões com a taxa em destaque + calculadora */
.ant-card .ant-card-label { margin-top: -2px; }
.ant-lines { display: flex; flex-direction: column; gap: 2px; margin: 6px 0 4px; padding: 6px 0; border-top: 1px dashed var(--line); border-bottom: 1px dashed var(--line); font-size: 12.5px; }
.ant-lines > div { display: flex; justify-content: space-between; gap: 8px; }
.ant-lines span { color: var(--muted); }
.ant-lines b { font-weight: 600; white-space: nowrap; }
.ant-fee b, .ant-calc-out .ant-fee strong { color: #b91c1c; }
.ant-calc { margin-top: 12px; border: 1px solid var(--line); border-radius: 10px; padding: 12px; background: #fff; }
.ant-calc-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; }
.ant-calc-form label { display: flex; flex-direction: column; gap: 3px; font-size: 12px; color: var(--muted); }
.ant-calc-form select, .ant-calc-form input { font: inherit; font-size: 14px; color: var(--ink); padding: 7px 9px; border: 1px solid var(--line); border-radius: 8px; background: #fff; min-width: 0; }
.ant-calc-form input { width: 170px; font-weight: 600; text-align: right; }
.ant-calc-form .ant-calc-max { background: none; border: 0; padding: 0 0 9px; color: #2563eb; font-size: 12px; cursor: pointer; }
.ant-calc-out { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 12px; }
.ant-calc-out > div { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 10px; background: var(--surface-2, #f8fafc); }
.ant-calc-out span { font-size: 12px; color: var(--muted); }
.ant-calc-out strong { font-size: 20px; }
.ant-calc-out small { font-size: 11.5px; color: var(--muted); }
.ant-calc-out .ant-net { background: #ecfdf5; }
.ant-calc-out .ant-net strong { color: #047857; }
.ant-calc-split { margin: 10px 0 0; padding-left: 18px; font-size: 12.5px; display: flex; flex-direction: column; gap: 3px; }
.ant-calc-split small { color: var(--muted); }
.ant-calc-hint { margin: 8px 0 0; font-size: 12px; color: var(--muted); }
@media (max-width: 600px) {
  .ant-calc-form label, .ant-calc-form input, .ant-calc-form select { width: 100%; }
  .ant-calc-out { grid-template-columns: 1fr; }
}
@media (max-width: 1100px) { .bank-groups { grid-template-columns: 1fr; } }
@media (max-width: 600px) { .bank-strip-3, .bank-strip-2 { grid-template-columns: 1fr 1fr; } }

/* Celular: nenhum valor cortado. Sem JS o número quebra linha; fitMobileValues() reduz a fonte até caber numa linha */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
@media (max-width: 600px) {
  .cockpit-kpi { padding: 12px; }
  .cockpit-kpi > strong { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; }
  .cf-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cf-kpis .cockpit-kpi:nth-child(3) { grid-column: 1 / -1; border-left: none; border-top: 1px solid var(--line-subtle); }
  .cockpit-actions { flex-wrap: wrap; width: 100%; }
  .cockpit-actions > * { flex: 1 1 auto; }
  .cockpit-select { min-width: 0; max-width: 100%; }
  .cockpit-table { font-size: 12.5px; }
  .ledger-toggle, .sp-tabs .ledger-toggle { margin-left: 0; white-space: normal; max-width: 100%; }
}

/* Lançamento aberto a partir do extrato: sugestão e campos a preencher */
.tx-suggestion-note { margin: 0 0 12px; padding: 8px 10px; border-radius: 8px; background: var(--paper); color: var(--ink-secondary); font-size: 12.5px; }
.tx-open-field select { border-color: #f59e0b; background: #fffbeb; }
#transaction-form [hidden] { display: none !important; }
.tx-batch-list { list-style: none; margin: 12px 0; padding: 0; border: 1px solid var(--line-subtle); border-radius: 8px; font-size: 12.5px; }
.tx-batch-list li { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; padding: 6px 10px; }
.tx-batch-list li + li { border-top: 1px solid var(--line-subtle); }
.tx-batch-list li span:nth-child(2) { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Conciliação: seleção para cadastrar vários de uma vez */
.sr-check { width: auto; margin: 0 8px 0 0; vertical-align: middle; accent-color: var(--brand-emerald-dark); }
.sr-select-all { display: inline-flex; align-items: center; gap: 8px; margin: 8px 0; font-size: 12.5px; color: var(--ink-secondary); cursor: pointer; }
.sr-select-all input { width: auto; margin: 0; accent-color: var(--brand-emerald-dark); }
.sr-same { border: none; background: none; padding: 2px 0 0; color: var(--blue); font: inherit; font-size: 11.5px; cursor: pointer; text-decoration: underline; }
.sr-batch-bar { position: sticky; bottom: 12px; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 12px; padding: 10px 14px; border: 1px solid var(--line-strong); border-radius: 10px; background: var(--surface); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12); font-size: 13px; }
.sr-batch-bar .primary-button { margin-left: 8px; }
.sr-batch-bar[hidden] { display: none; }

/* Login e acessos */
.auth-overlay { position: fixed; inset: 0; z-index: 100000; display: flex; align-items: center; justify-content: center; padding: 16px; background: var(--paper); overflow-y: auto; }
.auth-card { display: flex; flex-direction: column; gap: 10px; width: 100%; max-width: 380px; padding: 28px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); box-shadow: 0 10px 30px rgba(15, 23, 42, 0.08); }
.auth-card h2 { margin: 6px 0 0; font-size: 20px; color: var(--ink); }
.auth-card p { margin: 0; font-size: 13px; color: var(--muted); }
.auth-card label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; font-weight: 600; color: var(--ink-secondary); }
.auth-card input { width: 100%; box-sizing: border-box; margin: 0; }
.auth-card .primary-button, .auth-card .secondary-button { justify-content: center; }
.auth-card .auth-error { min-height: 18px; color: #b91c1c; font-weight: 600; }
.auth-brand { display: flex; align-items: center; gap: 10px; font-size: 17px; color: var(--ink); }
.auth-offline { margin: 16px; padding: 12px 16px; border-radius: 10px; background: #fef2f2; color: #b91c1c; font-weight: 600; }
.user-chip { margin: auto 12px 8px; padding: 10px 12px; border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 10px; font-size: 12px; color: #f1f5f9; }
.user-chip strong, .user-chip small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-chip small { color: #94a3b8; }
.user-chip span { display: flex; gap: 10px; margin-top: 6px; }
.user-chip button { padding: 0; border: 0; background: none; font: inherit; color: #cbd5e1; text-decoration: underline; cursor: pointer; }
/* Menu recolhido: some o nome, mas o botão de sair continua (ícone ⏻) */
.user-chip .chip-compact { display: none; }
body.sidebar-collapsed .user-chip { margin: auto 0 8px; padding: 0; border: 0; text-align: center; }
body.sidebar-collapsed .user-chip > strong, body.sidebar-collapsed .user-chip > small, body.sidebar-collapsed .user-chip > span { display: none; }
body.sidebar-collapsed .user-chip .chip-compact { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 8px; text-decoration: none; font-size: 16px; color: #cbd5e1; }
body.sidebar-collapsed .user-chip .chip-compact:hover { background: rgba(255, 255, 255, 0.08); color: #fff; }
/* Celular: o menu abre sempre largo, então mostra o bloco completo mesmo com a preferência de recolhido */
@media (max-width: 768px) {
  body.sidebar-collapsed .user-chip { margin: auto 12px 8px; padding: 10px 12px; border: 1px solid rgba(255, 255, 255, 0.14); text-align: left; }
  body.sidebar-collapsed .user-chip > strong, body.sidebar-collapsed .user-chip > small { display: block; }
  body.sidebar-collapsed .user-chip > span { display: flex; }
  body.sidebar-collapsed .user-chip .chip-compact { display: none; }
}
.nav-item[hidden], .nav-label[hidden], #ai-chat-fab[hidden], #new-transaction[hidden] { display: none !important; }
.access-users td small { display: block; }
.access-banner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; padding: 12px 16px; border: 1px solid #fde68a; border-radius: 10px; background: #fffbeb; }
.access-banner.on { border-color: var(--green-border); background: var(--green-bg); }
.access-banner strong, .access-banner small { display: block; }
.access-banner small { color: var(--muted); }
.access-table td { padding: 6px 10px; }
.access-table select { margin: 0; width: 100%; max-width: 240px; }
.access-table .access-group td { padding-top: 14px; font-size: 11px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; color: var(--muted); }
.user-form { display: flex; flex-direction: column; gap: 10px; }
.user-form label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; font-weight: 600; }
.user-form label small { font-weight: 400; color: var(--muted); }
.user-exceptions summary { cursor: pointer; font-size: 13px; font-weight: 600; }

/* Aprovação de desconto */
.discount-box, .discount-queue { margin: 12px 0; padding: 12px 16px; border: 1px solid #fde68a; border-radius: 10px; background: #fffbeb; font-size: 13px; }
.discount-box { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.discount-box.refused { border-color: #fecaca; background: #fef2f2; }
.discount-box strong, .discount-box small { display: block; }
.discount-box small, .discount-row small { color: var(--muted); }
.discount-box span, .discount-row span { display: flex; gap: 8px; }
.discount-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding-top: 10px; }
.discount-row small { display: block; }
.quote-discount-hint { display: block; width: 100%; color: #b45309; font-weight: 600; }
.nav-badge { margin-left: auto; min-width: 18px; padding: 1px 6px; border-radius: 9px; background: #f59e0b; color: #1c1917; font-size: 11px; font-weight: 700; text-align: center; }

/* Minhas vendas */
.my-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.my-goal { display: flex; flex-wrap: wrap; gap: 24px; margin-top: 16px; padding: 18px 20px; border: 1px solid var(--line); border-radius: 12px; background: var(--paper); }
.my-goal-team { flex: 2 1 320px; min-width: 0; }
.my-goal-side { flex: 1 1 180px; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.my-goal span:first-child { font-size: 13px; color: var(--muted); }
.my-goal small { display: block; color: var(--muted); font-size: 12px; }
.my-goal-side strong { font-size: 22px; color: var(--ink); }
.my-goal-main { margin: 6px 0 10px; font-size: 18px; color: var(--ink); }
.my-goal-main strong { font-size: 26px; }
.my-goal-bar { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.my-goal-bar .cockpit-bar { flex: 1; }
.my-goal-bar span { font-size: 13px; font-weight: 700; color: var(--ink); }
tr.my-current td { background: var(--green-bg); font-weight: 600; }
@media (max-width: 600px) {
  .my-kpis { grid-template-columns: 1fr; }
  .my-kpis .cockpit-kpi { border: 0; border-bottom: 1px solid var(--line); }
  .my-kpis .cockpit-kpi:last-child { border-bottom: 0; }
}

/* Campo preenchido com o usuário logado */
input[readonly][title="Preenchido com o seu usuário"] { background: var(--line-subtle); color: var(--ink-secondary); cursor: not-allowed; }

/* Artes e notificações */
.nav-item[data-view="arts"][hidden] { display: none !important; }
.art-table td { vertical-align: top; }
.art-table small { display: block; }
.art-items div { font-size: 13px; }
.art-items div small { display: inline; color: var(--muted); }
.art-note { margin-top: 4px; color: #b45309; }
.art-actions { white-space: nowrap; }
.art-actions button + button { margin-left: 6px; }
.art-table select.cockpit-select { width: auto; max-width: 170px; margin: 0; }
.header-actions { position: relative; }
.notif-button { position: relative; }
.notif-badge { position: absolute; top: -5px; right: -5px; min-width: 17px; padding: 0 4px; border-radius: 9px; background: #dc2626; color: #fff; font-size: 10px; font-weight: 700; line-height: 17px; text-align: center; }
.notif-badge[hidden] { display: none; }
.notif-panel { position: absolute; top: calc(100% + 8px); right: 0; z-index: 1500; width: min(340px, calc(100vw - 32px)); max-height: 440px; overflow-y: auto; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); box-shadow: 0 12px 30px rgba(15, 23, 42, 0.14); }
.notif-panel[hidden] { display: none; }
.notif-head { position: sticky; top: 0; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--line); background: var(--surface); font-size: 13px; }
.notif-item { display: block; width: 100%; padding: 10px 14px; border: 0; border-bottom: 1px solid var(--line-subtle); background: none; font: inherit; text-align: left; cursor: pointer; }
.notif-item:hover { background: var(--paper); }
.notif-item.is-new { background: var(--green-bg); }
.notif-item strong, .notif-item span, .notif-item small { display: block; font-size: 13px; }
.notif-item span { color: var(--ink-secondary); }
.notif-item small { margin-top: 2px; color: var(--muted); font-size: 11px; }

.customer-history { display: block; margin: 2px 0 6px; color: var(--brand-emerald-dark); font-size: 12px; font-weight: 600; }
.customer-history:empty { display: none; }

#save-rt-bonus-btn[hidden], #btn-copy-rt-pix[hidden], #cust-architect-field[hidden] { display: none; }
.arch-customer { display: block; margin-top: 6px; font-size: 12px; color: var(--muted); }
#cust-architect-field small { display: block; font-weight: 400; color: var(--muted); }

/* Devolução da Produção para a arte */
.art-revision { display: block; margin-top: 6px; padding: 8px 10px; border-radius: 8px; background: var(--red-bg); border: 1px solid var(--red-border); color: var(--red); font-size: 12.5px; line-height: 1.4; }
.art-revision strong { display: block; margin-bottom: 2px; }
.art-revision small { display: block; margin-top: 4px; opacity: 0.85; }
.danger-button { color: var(--red); border-color: var(--red-border); }
.danger-button:hover { background: var(--red-bg); }

/* Relatório de vendas */
.rv-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 16px; }
.rv-block { background: var(--panel, #fff); border: 1px solid var(--line, #e5e7eb); border-radius: 12px; padding: 16px; min-width: 0; }
.rv-block h3 { margin: 0 0 10px; font-size: 15px; }
.rv-block .cockpit-table { width: 100%; }
.rv-bar-row { display: grid; grid-template-columns: 110px 1fr auto; grid-template-rows: auto auto; column-gap: 10px; align-items: center; margin-bottom: 10px; font-size: 13px; }
.rv-bar-row > span { grid-row: span 2; }
.rv-bar-row > strong { text-align: right; }
.rv-bar-row > small { grid-column: 3; text-align: right; color: var(--muted); }
.rv-bar-track { grid-row: span 2; height: 12px; background: var(--line, #eef0f3); border-radius: 6px; overflow: hidden; }
.rv-bar { height: 100%; background: var(--accent, #e07a2e); border-radius: 6px; }
.rv-bar.is-muted { background: var(--muted, #9aa3af); }
@media (max-width: 900px) { .rv-grid { grid-template-columns: 1fr; } }

/* Notas fiscais */
.nf-table td { vertical-align: top; }
.nf-table td small { display: block; color: var(--muted); }
.nf-items div { font-size: 12.5px; }
.nf-actions { white-space: nowrap; }
.nf-actions button + button { margin-left: 6px; }
.nf-review { margin-bottom: 6px; padding-bottom: 6px; border-bottom: 1px dashed var(--line, #e2e8f0); }
.nf-review small { color: var(--danger, #b91c1c) !important; }
.nf-key { font-family: monospace; font-size: 11px; word-break: break-all; }
.nf-notify { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); }

/* Impressoras HP Latex: resumo por impressora */
.print-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; margin: 0 0 12px; }
.print-stat { border: 1px solid var(--line, #e2e8f0); border-radius: 10px; padding: 10px 12px; font-size: 13px; }
.print-stat > div { display: flex; align-items: baseline; gap: 8px; margin-bottom: 4px; }
.print-stat > div small, .print-stat > small { color: var(--muted); }
.print-stat > div .text-button { margin-left: auto; }
.print-stat > small { display: block; margin-top: 2px; }

/* Tela Impressões (HP Latex por dia) */
.pr-scroll { overflow-x: auto; }
.pr-days .ledger-row { cursor: pointer; }
.pr-days .ledger-row.is-selected td { background: var(--accent-soft, #eef2ff); }
.pr-days td small, .pr-day td small { display: block; color: var(--muted); }
.pr-day td { vertical-align: top; }
.pr-doc { max-width: 380px; word-break: break-word; font-size: 12.5px; }
.pr-link { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 4px; }
.pr-link .search-input { min-width: 240px; flex: 1; margin: 0; }
.pr-done { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--muted); }
.pr-actions { display: inline-flex; gap: 6px; margin-top: 4px; }
.pr-loss { color: #b42318; font-weight: 600; }

/* Impressões: barra do relatório (período, impressora, PDF/Excel) */
.pr-report { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 14px 0 4px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; }
.pr-report label { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; }
.pr-report input[type=date], .pr-report select { padding: 5px 8px; border: 1px solid var(--line); border-radius: 8px; font: inherit; font-size: 13px; background: transparent; color: inherit; }
.pr-report-quick { display: inline-flex; gap: 8px; }

/* Impressões: filtros que valem na hora, cartões das impressoras com o rolo em uso, dia em lista */
.pr-report .pr-report-dl { margin-left: auto; display: inline-flex; gap: 6px; }
.pr-showing { flex-basis: 100%; font-size: 12.5px; color: var(--muted); }
.pr-showing b { color: var(--ink, inherit); font-weight: 600; }
.pr-printers { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 10px; margin: 10px 0 12px; }
.pr-printer { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; font-size: 13px; display: flex; flex-direction: column; gap: 4px; }
.pr-printer > small { color: var(--muted); }
.pr-printer-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.pr-printer-head small { display: block; color: var(--muted); }
.pr-printer-head > div:last-child { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.pr-roll { background: var(--line-subtle, #f1f5f9); border-radius: 8px; padding: 6px 8px; }
.pr-roll span { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.pr-roll small { display: block; color: var(--muted); }
.pr-warn { color: #b54708; }
.pr-day-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 18px 0 4px; }
.pr-day-pick, .pr-roll-pick { padding: 6px 8px; border: 1px solid var(--line); border-radius: 8px; font: inherit; font-size: 13px; background: transparent; color: inherit; max-width: 100%; }
.pr-roll-pick { font-size: 12px; max-width: 220px; }
.pr-day td small { display: block; color: var(--muted); }
.pr-target { min-width: 240px; flex: 1; padding: 6px 8px; border: 1px solid var(--line); border-radius: 8px; font: inherit; font-size: 13px; background: transparent; color: inherit; }
.pr-days td small { display: block; color: var(--muted); font-size: 11.5px; }
.pr-report select, .pr-day-pick, .pr-roll-pick { width: auto; }
.pr-report input[type=date] { width: auto; }

/* Impressões em abas: o trabalho do dia (Para ligar) na frente */
.pr-tabs { display: flex; flex-wrap: wrap; gap: 4px; border-bottom: 1px solid var(--line); margin: 14px 0 14px; }
.pr-tab { border: 0; background: transparent; padding: 10px 14px; font: inherit; font-size: 14px; font-weight: 600; color: var(--muted); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; display: inline-flex; align-items: center; gap: 6px; }
.pr-tab:hover { color: var(--ink); }
.pr-tab.active { color: var(--ink); border-bottom-color: var(--brand-emerald-dark); }
.pr-tab-n { font-size: 12px; padding: 1px 7px; border-radius: 999px; background: var(--line-subtle); color: var(--muted); }
.pr-tab-n.warn { background: var(--amber-bg); color: var(--amber); border: 1px solid var(--amber-border); }
.pr-help { background: var(--blue-bg); border: 1px solid #bfdbfe; border-radius: 10px; padding: 10px 12px; font-size: 13px; line-height: 1.5; color: var(--ink-secondary); margin: 0 0 12px; }
.pr-empty-ok { background: var(--green-bg); border: 1px solid var(--green-border); color: var(--green); border-radius: 10px; padding: 18px; font-weight: 600; text-align: center; }
.prq-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 4px 0 6px; font-size: 15px; }
.prq-day { margin: 14px 0 6px; font-size: 13px; text-transform: capitalize; color: var(--ink-secondary); }
.prq-day small { color: var(--muted); font-weight: 400; text-transform: none; margin-left: 6px; }
.prq-item { display: grid; grid-template-columns: minmax(220px, 1fr) minmax(320px, 1.6fr); gap: 10px 16px; align-items: center; border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; margin-bottom: 8px; background: var(--surface); }
.prq-info strong { display: block; font-size: 13.5px; word-break: break-word; }
.prq-info small { display: block; color: var(--muted); font-size: 12px; margin-top: 2px; }
.prq-act { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.prq-act .pr-target { min-width: 200px; flex: 1; }
.prq-sugg { border: 1px solid var(--brand-emerald-dark); background: var(--brand-emerald-dark); color: #fff; border-radius: 8px; padding: 8px 12px; font: inherit; font-size: 13px; cursor: pointer; text-align: left; }
.prq-sugg:hover { filter: brightness(1.08); }
.prq-or { font-size: 12px; color: var(--muted); }
.pr-bar { height: 6px; background: var(--line); border-radius: 999px; overflow: hidden; margin: 6px 0 2px; }
.pr-bar i { display: block; height: 100%; background: var(--brand-emerald); }
.pr-bar i.low { background: var(--red); }
.pr-summary-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin: 0 0 10px; }
.pr-summary-head > span { display: inline-flex; gap: 6px; }
@media (max-width: 760px) { .prq-item { grid-template-columns: 1fr; } }
.pr-done { white-space: nowrap; }
.pr-done input[type=checkbox] { width: auto; margin: 0; }

/* Fila "Para ligar" em tabela simples (hora | arquivo | pedido) */
.prq-table td { vertical-align: middle; }
.prq-table .prq-dayrow td { background: var(--line-subtle); font-size: 12.5px; font-weight: 600; color: var(--ink-secondary); padding-top: 6px; padding-bottom: 6px; }
.prq-time { white-space: nowrap; font-variant-numeric: tabular-nums; width: 70px; }
.prq-time small, .prq-doc small { display: block; color: var(--muted); font-size: 11.5px; }
.prq-doc { font-size: 13px; word-break: break-word; max-width: 420px; }
.prq-table .prq-act { flex-wrap: nowrap; }
.prq-links { font-size: 12.5px; color: var(--muted); white-space: nowrap; }
.prq-links .text-button { font-size: 12.5px; }
.prq-note { min-width: 140px !important; max-width: 200px; }
.prq-head span { color: var(--muted); font-size: 13px; }
.prq-head span strong { color: var(--ink); font-size: 15px; }
@media (max-width: 900px) { .prq-table .prq-act { flex-wrap: wrap; } }

/* Impressões: janela "ver pedido" antes de ligar */
.prq-view-sum { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; margin: 12px 0; }
.prq-view-sum > div { border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; }
.prq-view-sum span { display: block; font-size: 11.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; }
.prq-view-sum strong { font-size: 18px; }
.prq-view-sum small { display: block; color: var(--muted); font-size: 12px; }
.prq-view-h { margin: 10px 0 4px; font-size: 13px; }
.prq-view-jobs { margin: 0; padding-left: 18px; font-size: 12.5px; color: var(--ink-secondary); max-height: 160px; overflow: auto; }
.pr-roll-edit { float: right; font-size: 12px; text-transform: none; letter-spacing: 0; }
.pr-hist { font-size: 12.5px; color: var(--ink-secondary); }
.pr-hist summary { cursor: pointer; color: var(--muted); }
.pr-hist ul { margin: 4px 0 0; padding-left: 18px; }
.prq-view-art { border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; margin: 0 0 10px; font-size: 13px; display: flex; flex-direction: column; gap: 4px; }
.prq-view-art > div > span:first-child { display: inline-block; min-width: 170px; color: var(--muted); font-size: 12px; }
.prq-view-art small { font-size: 11.5px; }

/* Impressões: lista única (pedido + rolo na mesma linha) e rolos */
.prq-roll { width: 190px; }
.prq-roll .pr-roll-pick { max-width: 185px; }
.pr-roll-pick.is-manual { border-color: var(--blue); }
.prq-table tr.is-muted td { color: var(--muted); }
.prq-head .sp-tabs { flex-wrap: wrap; }
.pr-rolls td small { display: block; color: var(--muted); font-size: 11.5px; }
.pr-rolls .pr-bar { width: 110px; margin-left: auto; }
.pr-roll[onclick]:hover { outline: 1px solid var(--line-strong); }
.sp-comm { margin-bottom: 8px; }
.sp-comm-table { margin-bottom: 4px; }
.sp-comm-table td small { display: block; color: var(--muted); font-size: 11.5px; }
.cockpit-table td.num small { display: block; color: var(--muted); font-size: 11.5px; }

/* Impressões · aba Painel */
.pd-kpis { margin-bottom: 6px; }
.pd-kpis .cockpit-kpi.is-link { cursor: pointer; }
.pd-chart { position: relative; display: flex; align-items: flex-end; gap: 2px; height: 180px; padding: 18px 0 22px; border-bottom: 1px solid var(--line); margin-top: 6px; }
.pd-col { position: relative; flex: 1 1 0; height: 100%; display: flex; align-items: flex-end; justify-content: center; cursor: pointer; min-width: 10px; }
.pd-col i { display: block; width: 70%; max-width: 34px; background: var(--brand-emerald); border-radius: 4px 4px 0 0; opacity: .85; }
.pd-col.is-today i { background: var(--brand-emerald-dark); opacity: 1; }
.pd-col:hover i, .pd-col:focus i { opacity: 1; filter: brightness(.92); }
.pd-col small { position: absolute; bottom: -20px; font-size: 10.5px; color: var(--muted); white-space: nowrap; }
.pd-col em { position: absolute; font-style: normal; font-size: 10.5px; color: var(--ink-secondary); font-weight: 600; }
.pd-tip { display: none; position: absolute; bottom: calc(100% - 8px); z-index: 3; background: var(--ink); color: #fff; font-size: 11.5px; padding: 6px 8px; border-radius: 6px; white-space: nowrap; pointer-events: none; }
.pd-col:hover .pd-tip, .pd-col:focus .pd-tip { display: block; }
.pd-avg { position: absolute; left: 0; right: 0; border-top: 1px dashed var(--line-strong); pointer-events: none; }
.pd-avg span { position: absolute; right: 0; top: -16px; font-size: 10.5px; color: var(--muted); background: var(--surface); padding: 0 4px; }
.pd-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); gap: 4px 20px; }
.pd-grid td small { display: block; color: var(--muted); font-size: 11.5px; }
.pd-rolls { display: grid; gap: 8px; }
.pd-roll { border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; cursor: pointer; font-size: 13px; }
.pd-roll:hover { border-color: var(--line-strong); }
.pd-roll span { display: block; font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.pd-roll small { display: block; color: var(--muted); }
.pd-loss { margin: 0 0 8px; } .pd-loss strong { font-size: 20px; margin-right: 6px; } .pd-loss span { color: var(--muted); font-size: 12.5px; }
@media (max-width: 760px) { .pd-grid { grid-template-columns: 1fr; } }

/* Painel · gráfico por dia (colunas empilhadas por impressora) */
.pdc { margin-top: 4px; }
.pdc-top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-bottom: 10px; }
.pdc-top > .text-button { margin-left: auto; font-size: 12.5px; }
.pdc-legend { display: inline-flex; gap: 14px; font-size: 12.5px; color: var(--ink-secondary); }
.pdc-legend span { display: inline-flex; align-items: center; gap: 6px; }
.pdc-legend i { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }
.pdc-plot { display: grid; grid-template-columns: 44px 1fr; height: 220px; padding-bottom: 22px; }
.pdc-y { position: relative; }
.pdc-y span { position: absolute; right: 8px; transform: translateY(50%); font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pdc-area { position: relative; border-bottom: 1px solid var(--line-strong); }
.pdc-grid { position: absolute; left: 0; right: 0; border-top: 1px solid var(--line-subtle, #f1f5f9); }
.pdc-avg { position: absolute; left: 0; right: 0; border-top: 1px solid var(--subtle, #94a3b8); z-index: 1; pointer-events: none; }
.pdc-avg span { position: absolute; right: 0; bottom: 2px; font-size: 11px; color: var(--ink-secondary); background: var(--surface); padding: 0 4px; border-radius: 3px; }
.pdc-cols { position: absolute; inset: 0; display: flex; align-items: stretch; }
.pdc-col { position: relative; flex: 1 1 0; display: flex; align-items: flex-end; justify-content: center; min-width: 0; cursor: default; outline: none; }
.pdc-col[onclick] { cursor: pointer; }
.pdc-col:hover, .pdc-col:focus-visible { background: color-mix(in srgb, var(--line) 45%, transparent); }
.pdc-col.is-weekend { background: color-mix(in srgb, var(--line-subtle, #f1f5f9) 60%, transparent); }
.pdc-bar { position: relative; z-index: 2; width: 62%; max-width: 24px; display: flex; flex-direction: column-reverse; gap: 2px; }
.pdc-bar i { display: block; min-height: 1px; }
.pdc-bar i:last-child { border-radius: 4px 4px 0 0; }
.pdc-col:hover .pdc-bar i, .pdc-col:focus .pdc-bar i { filter: brightness(1.08); }
.pdc-col em { position: absolute; z-index: 2; font-style: normal; font-size: 11px; font-weight: 600; color: var(--ink); white-space: nowrap; }
.pdc-col small { position: absolute; bottom: -20px; font-size: 10.5px; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.pdc-col small.is-hidden { visibility: hidden; }
.pdc-col.is-today small { color: var(--ink); font-weight: 700; }
.pdc-tip { display: none; position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%); z-index: 5; min-width: 160px;
  background: var(--surface); color: var(--ink); border: 1px solid var(--line); box-shadow: 0 6px 18px rgba(15, 23, 42, .12); border-radius: 8px; padding: 8px 10px; font-size: 12px; pointer-events: none; }
.pdc-col:first-child .pdc-tip, .pdc-col:nth-child(2) .pdc-tip { left: 0; transform: none; }
.pdc-col:last-child .pdc-tip, .pdc-col:nth-last-child(2) .pdc-tip { left: auto; right: 0; transform: none; }
.pdc-col:hover .pdc-tip, .pdc-col:focus .pdc-tip { display: block; }
.pdc-tip strong { display: block; font-size: 15px; margin: 2px 0 4px; }
.pdc-tip-d { color: var(--muted); font-size: 11.5px; text-transform: capitalize; }
.pdc-tip-row { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.pdc-tip-row i { width: 12px; height: 2px; border-radius: 1px; display: inline-block; }
.pdc-tip-row span, .pdc-tip-n { color: var(--muted); }
.pdc-tip-n { margin-top: 4px; font-size: 11.5px; white-space: nowrap; }

/* Painel · gráfico de linha com área (uma linha por impressora) */
.pdl { margin-top: 4px; }
.pdl-top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-bottom: 10px; }
.pdl-top > .text-button { margin-left: auto; font-size: 12.5px; }
.pdl-legend { display: inline-flex; gap: 14px; font-size: 12.5px; color: var(--ink-secondary); }
.pdl-legend span { display: inline-flex; align-items: center; gap: 6px; }
.pdl-legend i { width: 14px; height: 2px; border-radius: 1px; display: inline-block; }
.pdl-plot { display: grid; grid-template-columns: 44px 1fr; height: 240px; padding: 8px 0 22px; }
.pdl-y { position: relative; }
.pdl-y span { position: absolute; right: 8px; transform: translateY(50%); font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pdl-area { position: relative; border-bottom: 1px solid var(--line-strong); }
.pdl-grid { position: absolute; left: 0; right: 0; border-top: 1px solid var(--line-subtle, #f1f5f9); }
.pdl-bands { position: absolute; inset: 0; display: flex; pointer-events: none; }
.pdl-bands i { flex: 1 1 0; } .pdl-bands i.is-weekend { background: color-mix(in srgb, var(--line-subtle, #f1f5f9) 70%, transparent); }
.pdl-avg { position: absolute; left: 0; right: 0; border-top: 1px solid var(--subtle, #94a3b8); z-index: 1; pointer-events: none; }
.pdl-avg span { position: absolute; right: 0; bottom: 2px; font-size: 11px; color: var(--ink-secondary); background: var(--surface); padding: 0 4px; border-radius: 3px; }
.pdl-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; z-index: 2; pointer-events: none; }
.pdl-end { position: absolute; z-index: 3; width: 9px; height: 9px; margin: 0 0 -4.5px -4.5px; border-radius: 50%; box-shadow: 0 0 0 2px var(--surface); pointer-events: none; }
.pdl-cols { position: absolute; inset: 0; display: flex; z-index: 4; }
.pdl-col { position: relative; flex: 1 1 0; min-width: 0; outline: none; }
.pdl-col[onclick] { cursor: pointer; }
.pdl-cross { display: none; position: absolute; top: 0; bottom: 0; left: 50%; border-left: 1px solid var(--line-strong); }
.pdl-dot { display: none; position: absolute; left: 50%; width: 10px; height: 10px; margin: 0 0 -5px -5px; border-radius: 50%; box-shadow: 0 0 0 2px var(--surface); }
.pdl-col:hover .pdl-cross, .pdl-col:focus .pdl-cross, .pdl-col:hover .pdl-dot, .pdl-col:focus .pdl-dot { display: block; }
.pdl-col small { position: absolute; bottom: -20px; left: 50%; transform: translateX(-50%); font-size: 10.5px; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.pdl-col small.is-hidden { visibility: hidden; }
.pdl-col.is-today small { color: var(--ink); font-weight: 700; }
.pdl-tip { display: none; position: absolute; top: 6px; left: calc(50% + 12px); z-index: 6; min-width: 170px;
  background: var(--surface); color: var(--ink); border: 1px solid var(--line); box-shadow: 0 6px 18px rgba(15, 23, 42, .12); border-radius: 8px; padding: 8px 10px; font-size: 12px; pointer-events: none; }
.pdl-col:nth-last-child(-n+4) .pdl-tip { left: auto; right: calc(50% + 12px); }
.pdl-col:hover .pdl-tip, .pdl-col:focus .pdl-tip { display: block; }
.pdl-tip-d { color: var(--muted); font-size: 11.5px; text-transform: capitalize; margin-bottom: 4px; }
.pdl-tip-row { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.pdl-tip-row b { font-size: 13px; }
.pdl-tip-row i { width: 12px; height: 2px; border-radius: 1px; display: inline-block; }
.pdl-tip-row span, .pdl-tip-n { color: var(--muted); }
.pdl-tip-tot { margin-top: 4px; padding-top: 4px; border-top: 1px solid var(--line-subtle, #f1f5f9); color: var(--muted); white-space: nowrap; }
.pdl-tip-tot b { color: var(--ink); }
.pdl-tip-n { margin-top: 4px; font-size: 11.5px; white-space: nowrap; }

/* Registrar venda: a vendedora não vê as partes do financeiro (cronograma, JSON, conferência, PV) */
#sale-dialog.is-seller-mode .fin-only { display: none !important; }

/* Emissão da NF-e (Focus NFe) */
.nfe-env { padding: 8px 12px; border-radius: 8px; font-size: 12.5px; margin-bottom: 12px; }
.nfe-env.warn { background: #fffbeb; border: 1px solid #fde68a; color: #92400e; }
.nfe-env.danger { background: #fef2f2; border: 1px solid #fecaca; color: #991b1b; }
.nfe-form h4 { font-size: 13px; margin: 14px 0 8px; }
.nfe-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.nfe-grid label { font-size: 12px; margin: 0; }
.nfe-items-wrap { overflow-x: auto; }
.nfe-items { font-size: 12px; margin: 0; }
.nfe-totals { display: flex; flex-wrap: wrap; gap: 16px; font-size: 12.5px; margin-top: 8px; color: var(--muted); }
.nfe-totals strong { color: var(--ink); }
.nfe-info { font-size: 12px; color: var(--muted); background: #f8fafc; border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; margin: 0; }
.nfe-missing { background: #fef2f2; border: 1px solid #fecaca; color: #991b1b; border-radius: 8px; padding: 8px 12px; font-size: 12.5px; margin-top: 12px; }
.nfe-ok { background: #f0fdf4; border: 1px solid #bbf7d0; color: #166534; border-radius: 8px; padding: 8px 12px; font-size: 12.5px; margin-top: 12px; }
.nf-files { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; font-size: 12px; }
.nf-reject { color: #991b1b; }
@media (max-width: 720px) { .nfe-grid { grid-template-columns: 1fr 1fr; } }
.nfe-nat { grid-template-columns: minmax(170px, 1.1fr) minmax(110px, .7fr) 2fr; }
.nfe-nat label small, .nfe-add label small { display: block; font-size: 11px; color: var(--muted); margin-top: 2px; }
.nfe-wide { grid-column: span 1; }
.nfe-add { grid-template-columns: 2fr 1fr; margin-top: 14px; }
.nfe-add textarea { width: 100%; font: inherit; font-size: 12.5px; border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; resize: vertical; margin-top: 4px; }
@media (max-width: 720px) { .nfe-nat, .nfe-add { grid-template-columns: 1fr; } }

/* NF-e: janela reorganizada, padrões e acompanhamento */
.nfe-card { border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; margin-bottom: 12px; background: #fff; }
.nfe-card > header { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; margin-bottom: 10px; font-size: 13.5px; }
.nfe-card.nfe-edit { border: 1.5px solid #c7d2fe; background: #f8faff; }
.nfe-hint { font-size: 11.5px; color: var(--muted); }
.nfe-badge { display: inline-block; font-size: 10.5px; font-weight: 700; color: #4338ca; background: #e0e7ff; border-radius: 6px; padding: 1px 6px; margin-left: 4px; }
.nfe-input-strong { font-weight: 700; }
.nfe-card textarea { width: 100%; box-sizing: border-box; }
.nfe-def { grid-template-columns: 2fr 1fr 1fr; }
.nfe-span2 { grid-column: span 1; }
.nf-filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; margin: 6px 0 12px; }
.nf-filters label { font-size: 12px; margin: 0; }
.nf-filters input, .nf-filters select { margin-top: 3px; }
@media (max-width: 720px) { .nfe-def { grid-template-columns: 1fr; } }
/* Janelas da NF-e mais largas (natureza da operação e textos inteiros) */
#product-dialog:has(.nfe-form) { width: min(1120px, 96vw); max-width: 1120px; }
.nfe-nat { grid-template-columns: minmax(170px, 0.9fr) minmax(220px, 1fr) minmax(320px, 2fr); }
.nfe-add { grid-template-columns: 2fr 1fr; }
.nfe-num { font-size: 13px; margin: -4px 0 12px; } .nfe-num strong { color: #1d4ed8; }