/* Alpine.js: oculta elementos x-cloak antes da inicialização */
[x-cloak] { display: none !important; }

/* ─────────────────────────────────────────────────────────────
   DESIGN TOKENS — Otica Flow (DESIGN.md)
───────────────────────────────────────────────────────────── */
:root {
  /* Cores */
  --of-primary:          #0b5f84;
  --of-primary-dark:     #07435d;
  --of-primary-light:    #e6f4f9;
  --of-primary-fg:       #FFFFFF;
  --of-background:       #F8FAFC;
  --of-surface:          #FFFFFF;
  --of-border:           #E2E8F0;
  --of-text-primary:     #1E293B;
  --of-text-secondary:   #64748B;
  --of-text-disabled:    #CBD5E1;
  --of-success:          #10B981;
  --of-success-light:    #D1FAE5;
  --of-warning:          #F59E0B;
  --of-warning-light:    #FEF3C7;
  --of-danger:           #EF4444;
  --of-danger-light:     #FEE2E2;
  --of-info:             #0EA5E9;
  --of-info-light:       #E0F2FE;

  /* Acento âmbar — contextos de produto/frame */
  --of-accent:           #B45309;
  --of-accent-light:     #FEF3C7;

  /* Sidebar escura */
  --of-sidebar-bg:       #031a28;
  --of-sidebar-text:     rgba(174, 215, 232, 0.75);
  --of-sidebar-text-active: #FFFFFF;
  --of-sidebar-group-color: rgba(174, 215, 232, 0.35);
  --of-sidebar-active-bg:   rgba(11, 95, 132, 0.38);
  --of-sidebar-active-border: #5baec8;
  --of-sidebar-hover-bg:    rgba(255, 255, 255, 0.06);
  --of-sidebar-border-color: rgba(255, 255, 255, 0.07);

  /* Layout */
  --of-navbar-h:         56px;
  --of-sidebar-w:        220px;
  --of-sidebar-w-sm:     64px;
  --of-content-pad:      24px;

  /* Elevação (3 camadas — depth mais pronunciado) */
  --of-shadow-1:
    0 1px 2px  rgba(4, 26, 40, 0.05),
    0 8px 18px rgba(4, 26, 40, 0.06),
    0 18px 38px rgba(4, 26, 40, 0.04);
  --of-shadow-2:
    0 2px 4px  rgba(4, 26, 40, 0.06),
    0 12px 26px rgba(4, 26, 40, 0.09),
    0 26px 44px rgba(4, 26, 40, 0.07);
  --of-shadow-3:         0 10px 40px rgba(0, 0, 0, 0.15);

  /* Fonte de dados / números */
  --of-font-display: 'DM Mono', 'Menlo', 'Monaco', 'Courier New', monospace;

  /* Bootstrap overrides */
  --bs-font-sans-serif:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --bs-body-font-size:   0.9375rem;
  --bs-body-color:       #1E293B;
  --bs-body-bg:          #F8FAFC;
  --bs-border-color:     #E2E8F0;
  --bs-border-radius:    6px;
  --bs-border-radius-lg: 8px;
  --bs-border-radius-xl: 12px;
  --bs-primary:          #0b5f84;
  --bs-primary-rgb:      11, 95, 132;
  --bs-link-color:       #0b5f84;
  --bs-link-hover-color: #07435d;
}

/* ─────────────────────────────────────────────────────────────
   TYPOGRAPHY
───────────────────────────────────────────────────────────── */
body {
  font-family: var(--bs-font-sans-serif);
  font-size: 0.9375rem;
  color: var(--of-text-primary);
  background-color: var(--of-background);
  line-height: 1.5;
}

/* Labels de formulário e cabeçalhos de coluna */
.of-label {
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--of-text-secondary);
}

/* ─────────────────────────────────────────────────────────────
   LAYOUT — Navbar + Sidebar + Main
───────────────────────────────────────────────────────────── */

/* ── Navbar ── */
.of-navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--of-navbar-h);
  background: var(--of-surface);
  border-bottom: 1px solid var(--of-border);
  display: flex;
  align-items: center;
  padding: 0 20px;
  z-index: 1030;
  justify-content: space-between;
  box-shadow: none;
}

.of-navbar-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 1rem;
  font-weight: 700;
  color: var(--of-primary);
  text-decoration: none;
}

.of-navbar-brand:hover { color: var(--of-primary-dark); }

.of-brand-icon {
  width: 28px;
  height: 28px;
  background: var(--of-primary);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.of-navbar-tenant {
  font-size: 0.8125rem;
  color: var(--of-text-secondary);
  margin-left: 16px;
  padding-left: 16px;
  border-left: 1px solid var(--of-border);
}

.of-navbar-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

.of-navbar-user {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--of-text-primary);
}

.of-role-badge {
  background: var(--of-primary-light);
  color: var(--of-primary-dark);
  font-size: 0.6875rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.of-navbar-logout {
  font-size: 0.8125rem;
  color: var(--of-text-secondary);
  padding: 4px 10px;
  border: 1px solid var(--of-border);
  border-radius: 6px;
  cursor: pointer;
  background: transparent;
  text-decoration: none;
  line-height: 1.4;
}

.of-navbar-logout:hover {
  color: var(--of-text-primary);
  background: var(--of-background);
}

/* ── Sidebar ── */
.of-sidebar {
  position: fixed;
  top: var(--of-navbar-h);
  left: 0;
  width: var(--of-sidebar-w);
  height: calc(100vh - var(--of-navbar-h));
  background: var(--of-sidebar-bg);
  border-right: none;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 8px 0 24px;
  z-index: 900;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.12) transparent;
}

.of-sidebar::-webkit-scrollbar { width: 3px; }
.of-sidebar::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 2px; }

.of-sidebar-group {
  font-size: 0.625rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--of-sidebar-group-color);
  padding: 18px 16px 4px;
  display: block;
}

.of-nav-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--of-sidebar-text);
  cursor: pointer;
  border-left: 2px solid transparent;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.12s, color 0.12s;
  border-radius: 0;
}

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

.of-nav-item.active {
  background: var(--of-sidebar-active-bg);
  color: var(--of-sidebar-text-active);
  border-left-color: var(--of-sidebar-active-border);
  font-weight: 600;
}

.of-nav-item i {
  font-size: 17px;
  flex-shrink: 0;
  opacity: 0.7;
  width: 18px;
  text-align: center;
}

.of-nav-item.active i { opacity: 1; color: #7ecce0; }
.of-nav-item:hover i  { opacity: 1; }

.of-nav-toggle {
  cursor: pointer;
  user-select: none;
}

.of-nav-toggle .of-nav-chevron {
  margin-left: auto;
  font-size: 11px;
  opacity: 0.4;
  transition: transform 0.2s;
}

.of-nav-toggle[aria-expanded="true"] .of-nav-chevron {
  transform: rotate(180deg);
  opacity: 0.6;
}

.of-nav-toggle.active,
.of-nav-toggle.parent-active {
  color: #FFFFFF;
  font-weight: 600;
}

.of-nav-subitem {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 16px 7px 40px;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--of-sidebar-text);
  text-decoration: none;
  border-left: 2px solid transparent;
  white-space: nowrap;
  transition: background 0.12s, color 0.12s;
}

.of-nav-subitem:hover {
  background: var(--of-sidebar-hover-bg);
  color: #FFFFFF;
}

.of-nav-subitem.active {
  background: var(--of-sidebar-active-bg);
  color: var(--of-sidebar-text-active);
  border-left-color: var(--of-sidebar-active-border);
  font-weight: 600;
}

.of-nav-subitem i {
  font-size: 14px;
  flex-shrink: 0;
  opacity: 0.6;
  width: 15px;
  text-align: center;
}

.of-nav-subitem.active i { opacity: 1; color: #7ecce0; }
.of-nav-subitem:hover i  { opacity: 1; }

.of-nav-lock {
  margin-left: auto;
  font-size: 11px;
  opacity: 0.35;
}

/* ── Main content ── */
.of-main {
  margin-left: var(--of-sidebar-w);
  margin-top: var(--of-navbar-h);
  padding: var(--of-content-pad);
  min-height: calc(100vh - var(--of-navbar-h));
}

/* ─────────────────────────────────────────────────────────────
   CARDS
───────────────────────────────────────────────────────────── */
.of-card {
  background: var(--of-surface);
  border-radius: 8px;
  box-shadow: var(--of-shadow-1);
  border: none;
}

.of-card:hover { box-shadow: var(--of-shadow-2); }

/* Bootstrap card override */
.card {
  border: none;
  box-shadow: var(--of-shadow-1);
  border-radius: 8px;
}

.card-header {
  background: transparent;
  border-bottom: 1px solid var(--of-border);
}

/* ─────────────────────────────────────────────────────────────
   METRIC CARDS (Dashboard)
───────────────────────────────────────────────────────────── */
.of-metric-card {
  background: var(--of-surface);
  border-radius: 12px;
  box-shadow: var(--of-shadow-1);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  border: none;
  transition: box-shadow 0.22s, transform 0.22s;
  animation: kpiReveal 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: var(--kpi-delay, 0ms);
}

.of-metric-card:hover { box-shadow: var(--of-shadow-2); transform: translateY(-3px); }
.of-metric-card.border-warning { border-left: 3px solid var(--of-warning) !important; }
.of-metric-card.border-success { border-left: 3px solid var(--of-success) !important; }
.of-metric-card.border-danger  { border-left: 3px solid var(--of-danger) !important; }

.of-metric-header { display: flex; align-items: flex-start; justify-content: space-between; }

.of-metric-icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 18px;
}

.of-metric-icon.bg-primary-light { background: var(--of-primary-light); color: var(--of-primary); }
.of-metric-icon.bg-success-light { background: var(--of-success-light); color: var(--of-success); }
.of-metric-icon.bg-warning-light { background: var(--of-warning-light); color: var(--of-warning); }
.of-metric-icon.bg-info-light    { background: var(--of-info-light);    color: var(--of-info); }
.of-metric-icon.bg-danger-light  { background: var(--of-danger-light);  color: var(--of-danger); }

.of-metric-label {
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--of-text-secondary);
  margin-bottom: 4px;
}

.of-metric-value {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--of-text-primary);
  line-height: 1.2;
  font-family: var(--of-font-display);
  font-variant-numeric: tabular-nums;
}

.of-metric-value.text-success { color: var(--of-success) !important; }
.of-metric-value.text-warning { color: var(--of-warning) !important; }
.of-metric-value.text-danger  { color: var(--of-danger) !important; }

.of-metric-sub {
  font-size: 0.8125rem;
  color: var(--of-text-secondary);
}

.of-metric-divider {
  border: none;
  border-top: 1px solid var(--of-border);
  margin: 0;
}

/* ─────────────────────────────────────────────────────────────
   STATUS BADGES (DESIGN.md > Badges de Status)
───────────────────────────────────────────────────────────── */
.badge-os-aguardando { background: #FEF3C7 !important; color: #92400E !important; }
.badge-os-enviada    { background: #E0F2FE !important; color: #075985 !important; }
.badge-os-producao   { background: var(--of-primary-light) !important; color: var(--of-primary-dark) !important; }
.badge-os-pronta     { background: var(--of-success-light) !important; color: #065F46 !important; }
.badge-os-entregue   { background: #F1F5F9 !important; color: var(--of-text-secondary) !important; }
.badge-os-cancelada  { background: #F1F5F9 !important; color: #94A3B8 !important; }

/* ─────────────────────────────────────────────────────────────
   ALERTS / INADIMPLÊNCIA BLOCK
───────────────────────────────────────────────────────────── */
.of-alert-overdue {
  background: var(--of-danger-light);
  border: 1px solid var(--of-danger);
  border-radius: 8px;
  padding: 12px 16px;
}

/* ─────────────────────────────────────────────────────────────
   ESTOQUE BANNERS
───────────────────────────────────────────────────────────── */
.of-stock-banner-low {
  background: var(--of-warning-light);
  border-left: 4px solid var(--of-warning);
  border-radius: 6px;
  padding: 10px 14px;
  font-size: 0.8125rem;
  display: flex;
  align-items: center;
  gap: 8px;
  color: #92400E;
}

.of-stock-banner-zero {
  background: var(--of-danger-light);
  border-left: 4px solid var(--of-danger);
  border-radius: 6px;
  padding: 10px 14px;
  font-size: 0.8125rem;
  display: flex;
  align-items: center;
  gap: 8px;
  color: #991B1B;
}

/* ─────────────────────────────────────────────────────────────
   FOCUS RING (WCAG AA)
───────────────────────────────────────────────────────────── */
:focus-visible {
  outline: 2px solid var(--of-primary);
  outline-offset: 2px;
}

/* ─────────────────────────────────────────────────────────────
   BOOTSTRAP OVERRIDES
───────────────────────────────────────────────────────────── */
.btn-primary {
  background-color: var(--of-primary);
  border-color: var(--of-primary);
}

.btn-primary:hover,
.btn-primary:focus {
  background-color: var(--of-primary-dark);
  border-color: var(--of-primary-dark);
}

.btn-outline-primary {
  color: var(--of-primary);
  border-color: var(--of-primary);
}

.btn-outline-primary:hover {
  background-color: var(--of-primary);
  border-color: var(--of-primary);
}

.nav-tabs .nav-link.active {
  color: var(--of-primary-dark);
  border-bottom-color: var(--of-primary);
  font-weight: 600;
}

.nav-tabs .nav-link {
  color: var(--of-text-secondary);
}

.nav-tabs .nav-link:hover {
  color: var(--of-primary);
}

.table > :not(caption) > * > * {
  font-size: 0.875rem;
}

/* Flash messages */
.alert { border-radius: 8px; }

/* Page header */
.of-page-header {
  margin-bottom: 24px;
}

.of-page-title {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--of-text-primary);
  margin: 0;
}

.of-page-subtitle {
  font-size: 0.875rem;
  color: var(--of-text-secondary);
  margin-top: 2px;
}

/* Quick actions card (Dashboard) */
.of-quick-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 8px;
  border: 1px solid var(--of-border);
  background: var(--of-surface);
  cursor: pointer;
  text-decoration: none;
  transition: box-shadow 0.1s, border-color 0.1s;
  color: var(--of-text-primary);
}

.of-quick-btn:hover {
  box-shadow: var(--of-shadow-2);
  border-color: var(--of-primary-light);
  color: var(--of-text-primary);
}

.of-quick-btn-icon {
  width: 36px;
  height: 36px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 16px;
}

.of-quick-btn-label {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--of-text-primary);
  line-height: 1.2;
}

.of-quick-btn-sub {
  font-size: 0.75rem;
  color: var(--of-text-secondary);
}

.of-quick-btn-icon.bg-primary-light { background: var(--of-primary-light); color: var(--of-primary); }
.of-quick-btn-icon.bg-success-light { background: var(--of-success-light); color: var(--of-success); }
.of-quick-btn-icon.bg-warning-light { background: var(--of-warning-light); color: var(--of-warning); }
.of-quick-btn-icon.bg-info-light    { background: var(--of-info-light);    color: var(--of-info); }
.of-quick-btn-icon.bg-danger-light  { background: var(--of-danger-light);  color: var(--of-danger); }

/* Product type placeholder icons */
.of-product-placeholder {
  width: 80px;
  height: 80px;
  border-radius: 8px;
  background: var(--of-primary-light);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.of-product-placeholder i {
  font-size: 36px;
  color: var(--of-primary);
}

/* ─────────────────────────────────────────────────────────────
   HUB DO CLIENTE — Ficha (DESIGN.md > Hub Screen 4 Zonas)
───────────────────────────────────────────────────────────── */

/* Avatar com iniciais */
.of-client-avatar {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--of-primary-light);
  color: var(--of-primary-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.375rem;
  font-weight: 700;
  flex-shrink: 0;
  letter-spacing: -1px;
  user-select: none;
}

/* KPIs na Zona 1 */
.of-kpi-label {
  font-size: 0.6875rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--of-text-secondary);
  margin-bottom: 3px;
}

.of-kpi-value {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--of-text-primary);
  line-height: 1.2;
  font-family: var(--of-font-display);
  font-variant-numeric: tabular-nums;
}

.of-kpi-value.is-danger   { color: var(--of-danger); }
.of-kpi-value.is-success  { color: var(--of-success); }
.of-kpi-value.is-warning  { color: var(--of-warning); }

.of-kpi-sub {
  font-size: 0.75rem;
  color: var(--of-text-secondary);
  margin-top: 1px;
}

/* Campos de dados na Zona 3 */
.of-info-label {
  font-size: 0.75rem;
  color: var(--of-text-secondary);
  margin-bottom: 2px;
  display: block;
}

.of-info-value {
  font-size: 0.9375rem;
  color: var(--of-text-primary);
  font-weight: 500;
}

.of-info-value a { color: var(--of-primary); text-decoration: none; }
.of-info-value a:hover { text-decoration: underline; }
.of-info-value.muted { color: var(--of-text-secondary); font-style: italic; font-weight: 400; }

/* Boxes de crediário */
.of-cred-box {
  background: var(--of-background);
  border: 1px solid var(--of-border);
  border-radius: 6px;
  padding: 10px 12px;
}

.of-cred-box.is-danger {
  background: var(--of-danger-light);
  border-color: var(--of-danger);
}

.of-cred-box.is-warning {
  background: var(--of-warning-light);
  border-color: var(--of-warning);
}

.of-cred-box .of-cbox-label {
  font-size: 0.6875rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--of-text-secondary);
  margin-bottom: 4px;
  display: block;
}

.of-cred-box.is-danger .of-cbox-label { color: #991B1B; }

.of-cred-box .of-cbox-value {
  font-size: 1rem;
  font-weight: 700;
  color: var(--of-text-primary);
  font-family: var(--of-font-display);
  font-variant-numeric: tabular-nums;
}

.of-cred-box.is-danger .of-cbox-value { color: var(--of-danger); }

/* Box do avalista */
.of-avalista-box {
  background: var(--of-background);
  border: 1px solid var(--of-border);
  border-radius: 6px;
  padding: 12px 14px;
  margin-top: 12px;
}

.of-avalista-box .of-avl-title {
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--of-text-secondary);
  margin-bottom: 6px;
  display: block;
}

/* Chip de cliente identificado no PDV */
.of-client-chip {
  background: var(--of-primary-light);
}

/* Linha vencida na tabela de crediário (texto + cor + badge) */
.of-row-overdue td {
  background: var(--of-danger-light) !important;
}
.of-row-overdue td:first-child {
  border-left: 3px solid var(--of-danger);
}

/* ─────────────────────────────────────────────────────────────
   ROW ACTION MENU — dropdown ⋯ nas listagens
───────────────────────────────────────────────────────────── */
.of-row-menu .dropdown-toggle::after {
  display: none;
}
.of-row-menu .dropdown-toggle {
  padding: 0.25rem 0.5rem;
  line-height: 1;
}

/* ─────────────────────────────────────────────────────────────
   RECEITUÁRIO PAD — Componente assinatura do domínio óptico
   Usado na ficha de OS para exibir prescrição como pad real
───────────────────────────────────────────────────────────── */
.of-rx-pad {
  border: 1px solid var(--of-border);
  border-radius: 8px;
  overflow: hidden;
  background: var(--of-surface);
}

.of-rx-pad-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  background: var(--of-background);
  border-bottom: 1px solid var(--of-border);
}

.of-rx-pad-title {
  font-size: 0.625rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--of-text-secondary);
}

.of-rx-pad-meta {
  font-size: 0.75rem;
  color: var(--of-text-secondary);
}

.of-rx-pad-grid {
  display: grid;
  grid-template-columns: 80px repeat(6, 1fr);
  border-top: none;
}

.of-rx-pad-col-head {
  font-size: 0.625rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--of-text-secondary);
  text-align: center;
  padding: 8px 6px 6px;
  background: var(--of-background);
  border-bottom: 1px solid var(--of-border);
}

.of-rx-pad-col-head:first-child {
  text-align: left;
  padding-left: 16px;
}

.of-rx-pad-row-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--of-text-primary);
  padding: 10px 6px 10px 16px;
  display: flex;
  align-items: center;
  letter-spacing: 0.03em;
  border-bottom: 1px solid var(--of-border);
}

.of-rx-pad-cell {
  font-family: var(--of-font-display);
  font-size: 0.9375rem;
  font-weight: 400;
  color: var(--of-text-primary);
  text-align: center;
  padding: 10px 6px;
  border-left: 1px solid var(--of-border);
  border-bottom: 1px solid var(--of-border);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Remove borda inferior da última linha (7 colunas: 1 label + 6 dados) */
.of-rx-pad-grid > *:nth-last-child(-n+7) { border-bottom: none; }
.of-rx-pad-cell.is-empty { color: var(--of-text-disabled); font-family: inherit; font-size: 0.875rem; }

/* ─────────────────────────────────────────────────────────────
   RESPONSIVE — Tablet landscape (768–1023px): sidebar colapsada
───────────────────────────────────────────────────────────── */
@media (min-width: 768px) and (max-width: 1023px) {
  .of-sidebar {
    width: var(--of-sidebar-w-sm);
  }

  .of-sidebar-group {
    display: none;
  }

  .of-nav-item {
    padding: 13px 0;
    justify-content: center;
    gap: 0;
    border-left: none;
    border-right: 2px solid transparent;
  }

  .of-nav-item.active {
    border-left: none;
    border-right-color: var(--of-sidebar-active-border);
  }

  .of-nav-item i {
    width: auto;
  }

  .of-nav-label {
    display: none;
  }

  .of-nav-subitem {
    padding: 10px 0;
    justify-content: center;
    gap: 0;
  }

  .of-nav-subitem i {
    width: auto;
  }

  .of-main {
    margin-left: var(--of-sidebar-w-sm);
  }
}

/* ─────────────────────────────────────────────────────────────
   UTILITÁRIOS DE FONTE
───────────────────────────────────────────────────────────── */

/* Classe utilitária para qualquer valor numérico/financeiro */
.of-mono {
  font-family: var(--of-font-display);
  font-variant-numeric: tabular-nums;
}

/* ─────────────────────────────────────────────────────────────
   ANIMAÇÕES
───────────────────────────────────────────────────────────── */

/* Reveal escalonado para cards de dashboard */
@keyframes kpiReveal {
  from { opacity: 0; transform: scale(0.985) translateY(12px); }
  to   { opacity: 1; transform: scale(1)     translateY(0); }
}

/* Módulos: fade ao trocar de seção */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; }
}