/* ============================================================
   Armonie Móveis — Design System v3.0
   Charcoal · Gold · Cream — Alto Padrão em Móveis Planejados
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

/* ── Design Tokens ──────────────────────────────────────────────── */
:root {
  /* ── Brand — Charcoal (logo "A") ── */
  --arm-charcoal:      #252220;
  --arm-charcoal-d:    #1A1917;
  --arm-charcoal-m:    #3C3835;

  /* ── Brand — Gold (barra horizontal + "MÔVEIS") ── */
  --arm-gold:          #B8975A;
  --arm-gold-lt:       #D4B278;
  --arm-gold-d:        #9A7A42;
  --arm-gold-pale:     rgba(184,151,90,.12);
  --arm-gold-glow:     rgba(184,151,90,.28);

  /* ── Semantic ── */
  --arm-primary:       var(--arm-gold);
  --arm-success-c:     #16A34A;
  --arm-warning-c:     #D97706;
  --arm-danger-c:      #DC2626;
  --arm-orange-c:      #EA580C;

  /* ── Surfaces — warm cream ── */
  --arm-bg:            #F4F1EC;
  --arm-bg-warm:       #EDE9E1;
  --arm-surface:       #FFFFFF;
  --arm-surface-warm:  #FAF8F4;
  --arm-border:        #E3DDD4;
  --arm-border-lt:     #EDE9E1;

  /* ── Text — warm dark ── */
  --arm-text:          #1C1A17;
  --arm-muted:         #726C62;
  --arm-muted-lt:      #A09890;

  /* ── Sidebar ── */
  --arm-sb-w:          240px;
  --arm-sb-bg:         #1A1917;
  --arm-sb-text:       rgba(255,255,255,.60);
  --arm-sb-hover:      rgba(255,255,255,.06);
  --arm-sb-active:     rgba(184,151,90,.18);

  /* ── Topbar ── */
  --arm-tb-h:          60px;
  --arm-tb-bg:         #FFFFFF;

  /* ── Gradients ── */
  --arm-grad-brand:    linear-gradient(135deg, #252220 0%, #3C3835 100%);
  --arm-grad-gold:     linear-gradient(135deg, #9A7A42 0%, #D4B278 100%);
  --arm-grad-ok:       linear-gradient(135deg, #166534 0%, #22C55E 100%);
  --arm-grad-warn:     linear-gradient(135deg, #92400E 0%, #F59E0B 100%);
  --arm-grad-red:      linear-gradient(135deg, #991B1B 0%, #F87171 100%);

  /* ── Shadows — warm-tinted ── */
  --arm-shadow-xs:     0 1px 3px rgba(28,26,23,.05);
  --arm-shadow-sm:     0 2px 8px rgba(28,26,23,.08), 0 1px 2px rgba(28,26,23,.04);
  --arm-shadow:        0 4px 20px rgba(28,26,23,.10), 0 1px 4px rgba(28,26,23,.06);
  --arm-shadow-lg:     0 8px 36px rgba(28,26,23,.13), 0 2px 8px rgba(28,26,23,.06);
  --arm-shadow-gold:   0 4px 20px rgba(184,151,90,.30);

  /* ── Geometry ── */
  --radius-xs:  .25rem;
  --radius-sm:  .375rem;
  --radius:     .625rem;
  --radius-lg:  .875rem;
  --radius-xl:  1.25rem;
  --transition: .18s ease;

  /* ── Legacy aliases — mantém páginas existentes funcionando ── */
  --pl-primary:    var(--arm-gold);
  --pl-secondary:  var(--arm-charcoal);
  --pl-accent:     var(--arm-gold);
  --pl-success:    var(--arm-success-c);
  --pl-warning:    var(--arm-warning-c);
  --pl-danger:     var(--arm-danger-c);
  --pl-orange:     var(--arm-orange-c);
  --pl-bg:         var(--arm-bg);
  --pl-surface:    var(--arm-surface);
  --pl-border:     var(--arm-border);
  --pl-text:       var(--arm-text);
  --pl-muted:      var(--arm-muted);
  --pl-shadow:     var(--arm-shadow-sm);
  --pl-shadow-lg:  var(--arm-shadow);
  --pl-grad-hero:  var(--arm-grad-brand);
  --pl-grad-ok:    var(--arm-grad-ok);
  --pl-grad-warn:  var(--arm-grad-warn);
  --pl-grad-red:   var(--arm-grad-red);
  /* Mapeia variáveis antigas para a nova paleta */
  --arm-teal:      var(--arm-gold);
  --arm-teal-lt:   var(--arm-gold-lt);
  --arm-navy:      var(--arm-charcoal);
  --arm-navy-deep: var(--arm-charcoal-d);
  --arm-navy-mid:  var(--arm-charcoal-m);
  --arm-bronze:    var(--arm-gold);
  --arm-bronze-lt: var(--arm-gold-lt);
  --arm-silver:    var(--arm-muted-lt);
}

/* ── Reset & Base ───────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  background: var(--arm-bg);
  color: var(--arm-text);
  min-height: 100vh;
  font-size: .9375rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
:focus-visible {
  outline: 2px solid var(--arm-gold);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}
::selection { background: rgba(184,151,90,.20); color: var(--arm-text); }
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--arm-muted-lt); border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: var(--arm-muted); }

/* ── Animations ─────────────────────────────────────────────────── */
@keyframes fadeIn   { from { opacity:0; transform:translateY(6px) } to { opacity:1; transform:none } }
@keyframes slideInL { from { transform:translateX(-8px); opacity:0 } to { transform:none; opacity:1 } }
@keyframes shimmer  {
  0%   { background-position: -200% center; }
  100% { background-position: 200% center; }
}

/* ── App Layout ─────────────────────────────────────────────────── */
.arm-layout {
  display: flex;
  min-height: 100vh;
}

/* ── Sidebar ────────────────────────────────────────────────────── */
.arm-sidebar {
  width: var(--arm-sb-w);
  background: var(--arm-sb-bg);
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0; left: 0;
  height: 100vh;
  z-index: 1040;
  transition: transform var(--transition);
  overflow-y: auto;
  overflow-x: hidden;
}
.arm-sidebar::-webkit-scrollbar { width: 3px; }
.arm-sidebar::-webkit-scrollbar-thumb { background: rgba(255,255,255,.10); }

.arm-sb-header {
  padding: 1.25rem 1rem;
  border-bottom: 1px solid rgba(184,151,90,.25);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.arm-sb-logo {
  display: block;
  width: 60px;
  height: 60px;
  object-fit: contain;
  filter: brightness(0) invert(1);
  opacity: .88;
}

.arm-sb-nav {
  flex: 1;
  padding: .75rem .625rem;
  overflow-y: auto;
  overflow-x: hidden;
}
.arm-sb-nav::-webkit-scrollbar { display: none; }

.arm-sb-section {
  font-size: .645rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: rgba(255,255,255,.28);
  padding: 1.1rem .5rem .3rem;
  user-select: none;
}
.arm-sb-section:first-of-type { padding-top: .25rem; }

/* Link simples */
.arm-sb-link {
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: .55rem .75rem;
  border-radius: var(--radius-sm);
  color: var(--arm-sb-text);
  text-decoration: none;
  font-size: .855rem;
  font-weight: 500;
  transition: background var(--transition), color var(--transition);
  margin-bottom: 2px;
  cursor: pointer;
}
.arm-sb-link:hover { background: var(--arm-sb-hover); color: rgba(255,255,255,.92); }
.arm-sb-link.active {
  background: var(--arm-sb-active);
  color: #fff;
  font-weight: 600;
  box-shadow: inset 2px 0 0 var(--arm-gold);
}
.arm-sb-link.active .arm-sb-icon { color: var(--arm-gold-lt); }

.arm-sb-icon {
  font-size: 1rem;
  width: 18px;
  flex-shrink: 0;
  text-align: center;
  color: rgba(255,255,255,.38);
  transition: color var(--transition);
}
.arm-sb-link:hover .arm-sb-icon { color: rgba(255,255,255,.72); }

/* Group toggle */
.arm-sb-group { margin-bottom: 2px; }
.arm-sb-group-toggle {
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: .55rem .75rem;
  border-radius: var(--radius-sm);
  color: var(--arm-sb-text);
  font-size: .855rem;
  font-weight: 500;
  cursor: pointer;
  transition: background var(--transition), color var(--transition);
  user-select: none;
}
.arm-sb-group-toggle:hover { background: var(--arm-sb-hover); color: rgba(255,255,255,.92); }
.arm-sb-group-toggle:hover .arm-sb-icon { color: rgba(255,255,255,.72); }
.arm-sb-group-toggle.active,
.arm-sb-group-toggle.open { color: rgba(255,255,255,.90); }
.arm-sb-group-toggle.active {
  background: var(--arm-sb-active);
  box-shadow: inset 2px 0 0 var(--arm-gold);
}
.arm-sb-group-toggle.active .arm-sb-icon { color: var(--arm-gold-lt); }

.arm-sb-chevron {
  margin-left: auto;
  font-size: .72rem;
  color: rgba(255,255,255,.28);
  transition: transform var(--transition);
}
.arm-sb-group-toggle.open .arm-sb-chevron { transform: rotate(90deg); }

.arm-sb-children {
  overflow: hidden;
  max-height: 0;
  transition: max-height .24s ease;
}
.arm-sb-children.open { max-height: 600px; }

.arm-sb-child {
  display: flex;
  align-items: center;
  gap: .55rem;
  padding: .42rem .75rem .42rem 2.25rem;
  border-radius: var(--radius-sm);
  color: rgba(255,255,255,.46);
  text-decoration: none;
  font-size: .825rem;
  font-weight: 400;
  transition: background var(--transition), color var(--transition);
  margin-bottom: 1px;
}
.arm-sb-child i { font-size: .85rem; }
.arm-sb-child:hover { color: rgba(255,255,255,.85); background: rgba(255,255,255,.05); }
.arm-sb-child.active {
  color: var(--arm-gold-lt);
  font-weight: 600;
  background: rgba(184,151,90,.08);
}

/* Sidebar footer */
.arm-sb-footer {
  padding: .875rem .875rem 1rem;
  border-top: 1px solid rgba(255,255,255,.07);
  flex-shrink: 0;
}
.arm-sb-lesine {
  display: flex;
  align-items: center;
  gap: .625rem;
  padding: .5rem .625rem;
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,.05);
}
.arm-sb-lesine img {
  width: 30px; height: 30px;
  object-fit: contain;
  border-radius: var(--radius-xs);
  flex-shrink: 0;
  background: #fff;
  padding: 2px;
}
.arm-sb-lesine-text {
  font-size: .68rem;
  color: rgba(255,255,255,.36);
  line-height: 1.3;
}
.arm-sb-lesine-text strong {
  display: block;
  font-size: .71rem;
  color: rgba(255,255,255,.56);
  font-weight: 600;
}

/* Mobile overlay */
.arm-sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.52);
  z-index: 1039;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s;
}

/* ── Content area ───────────────────────────────────────────────── */
.arm-content {
  flex: 1;
  margin-left: var(--arm-sb-w);
  min-width: 0;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* ── Topbar ─────────────────────────────────────────────────────── */
.arm-topbar {
  height: var(--arm-tb-h);
  background: var(--arm-tb-bg);
  border-bottom: 1px solid var(--arm-border);
  display: flex;
  align-items: center;
  padding: 0 1.5rem;
  gap: .875rem;
  position: sticky;
  top: 0;
  z-index: 1020;
  box-shadow: var(--arm-shadow-xs);
  flex-shrink: 0;
}
/* Fina linha dourada sob o topbar */
.arm-topbar::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(184,151,90,.35) 40%, rgba(184,151,90,.35) 60%, transparent 100%);
  pointer-events: none;
}

.arm-tb-toggle {
  display: none;
  width: 36px; height: 36px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--arm-border);
  background: none;
  color: var(--arm-muted);
  cursor: pointer;
  align-items: center; justify-content: center;
  font-size: 1rem;
  flex-shrink: 0;
  transition: all var(--transition);
}
.arm-tb-toggle:hover { background: var(--arm-bg); color: var(--arm-text); }

.arm-tb-brand {
  font-size: .85rem;
  font-weight: 600;
  color: var(--arm-muted);
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.arm-tb-right {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-left: auto;
}

.arm-tb-lesine {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .3rem .7rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--arm-border);
  background: var(--arm-bg);
}
.arm-tb-lesine img {
  height: 22px; width: auto;
  object-fit: contain;
  border-radius: 2px;
}
.arm-tb-lesine-label {
  font-size: .68rem;
  color: var(--arm-muted);
  line-height: 1.25;
  display: none;
}
.arm-tb-lesine-label strong {
  display: block;
  color: var(--arm-text);
  font-size: .7rem;
}

.arm-user-chip {
  display: flex; align-items: center; gap: .45rem;
  font-size: .84rem; font-weight: 600;
  color: var(--arm-text);
  padding: .3rem .625rem;
  border-radius: var(--radius-sm);
  background: var(--arm-bg);
  border: 1px solid var(--arm-border);
}
.arm-avatar {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--arm-grad-gold);
  display: flex; align-items: center; justify-content: center;
  font-size: .68rem; font-weight: 700; color: #fff;
  flex-shrink: 0;
}
.arm-btn-sair {
  display: flex; align-items: center; gap: .4rem;
  font-size: .82rem; font-weight: 600;
  color: var(--arm-muted);
  border: 1px solid var(--arm-border);
  border-radius: var(--radius-sm);
  padding: .3rem .75rem;
  background: none;
  text-decoration: none;
  transition: all var(--transition);
  cursor: pointer;
}
.arm-btn-sair:hover { color: var(--arm-danger-c); border-color: var(--arm-danger-c); background: rgba(220,38,38,.05); }

/* ── Main ───────────────────────────────────────────────────────── */
.arm-main {
  flex: 1;
  padding: 1.75rem 1.5rem 2.5rem;
  animation: fadeIn .22s ease;
}

/* ── Footer ─────────────────────────────────────────────────────── */
.arm-footer {
  padding: .875rem 1.5rem;
  border-top: 1px solid var(--arm-border);
  display: flex; align-items: center; gap: 1rem;
  background: var(--arm-surface);
  flex-shrink: 0;
}
.arm-footer-lesine {
  display: flex; align-items: center; gap: .625rem;
}
.arm-footer-lesine img {
  height: 26px; width: auto;
  object-fit: contain;
  border-radius: 2px;
}
.arm-footer-text {
  font-size: .73rem; color: var(--arm-muted); line-height: 1.3;
}
.arm-footer-text strong { display: block; color: var(--arm-text); font-size: .76rem; }
.arm-footer-copy {
  margin-left: auto;
  font-size: .7rem;
  color: var(--arm-muted-lt);
  white-space: nowrap;
}

/* ── Page header ────────────────────────────────────────────────── */
.page-header { margin-bottom: 1.75rem; }
.page-header h1 {
  font-size: 1.4rem; font-weight: 700;
  margin: 0; color: var(--arm-text);
  letter-spacing: -.01em;
}
.page-header .subtitle { font-size: .875rem; color: var(--arm-muted); margin-top: .2rem; }

/* ── Cards ──────────────────────────────────────────────────────── */
.pl-card {
  background: var(--arm-surface);
  border: 1px solid var(--arm-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--arm-shadow-sm);
  padding: 1.25rem;
  transition: box-shadow var(--transition);
}
.pl-card:hover { box-shadow: var(--arm-shadow); }
.pl-card-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 1rem;
  padding-bottom: .75rem;
  border-bottom: 1px solid var(--arm-border);
}
.pl-card-header h5, .pl-card-header h6 { margin: 0; font-weight: 600; color: var(--arm-text); }

/* KPI cards */
.kpi-card {
  background: var(--arm-surface);
  border: 1px solid var(--arm-border);
  border-radius: var(--radius-lg);
  padding: 1.15rem 1.25rem;
  display: flex; align-items: center; gap: 1rem;
  box-shadow: var(--arm-shadow-sm);
  transition: box-shadow var(--transition), transform var(--transition);
  text-decoration: none;
  color: inherit;
}
.kpi-card:hover { box-shadow: var(--arm-shadow); transform: translateY(-2px); color: inherit; }
.kpi-icon {
  width: 48px; height: 48px;
  border-radius: var(--radius);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.3rem; flex-shrink: 0;
}
.kpi-icon.primary { background: var(--arm-gold-pale);          color: var(--arm-gold); }
.kpi-icon.success { background: rgba(22,163,74,.10);            color: var(--arm-success-c); }
.kpi-icon.warning { background: rgba(217,119,6,.10);            color: var(--arm-warning-c); }
.kpi-icon.danger  { background: rgba(220,38,38,.10);            color: var(--arm-danger-c); }
.kpi-icon.orange  { background: rgba(234,88,12,.10);            color: var(--arm-orange-c); }
.kpi-icon.teal    { background: var(--arm-gold-pale);           color: var(--arm-gold); }
.kpi-value { font-size: 1.65rem; font-weight: 800; line-height: 1; color: var(--arm-text); letter-spacing: -.02em; }
.kpi-label { font-size: .78rem; color: var(--arm-muted); margin-top: .2rem; }

/* ── Tabelas ────────────────────────────────────────────────────── */
.pl-table { width: 100%; border-collapse: collapse; }
.pl-table thead th {
  font-size: .75rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em;
  color: var(--arm-muted);
  padding: .625rem .75rem;
  background: var(--arm-bg);
  border-bottom: 2px solid var(--arm-border);
  white-space: nowrap;
}
.pl-table tbody td {
  padding: .75rem .75rem;
  vertical-align: middle;
  border-bottom: 1px solid var(--arm-border-lt);
  font-size: .875rem;
}
.pl-table tbody tr:last-child td { border-bottom: none; }
.pl-table tbody tr:hover td { background: rgba(184,151,90,.04); }

/* ── Badges de status ───────────────────────────────────────────── */
.badge-status {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .25rem .65rem;
  border-radius: 99px;
  font-size: .73rem; font-weight: 600;
  white-space: nowrap;
}
.badge-status::before {
  content: ''; width: 6px; height: 6px;
  border-radius: 50%; background: currentColor; flex-shrink: 0;
}
.badge-rascunho  { background: #F1F5F9; color: #64748B; }
.badge-enviado   { background: #EFF6FF; color: #2563EB; }
.badge-aprovado  { background: #F0FDF4; color: #16A34A; }
.badge-recusado  { background: #FEF2F2; color: #DC2626; }
.badge-producao  { background: #FFF7ED; color: #C2410C; }
.badge-entregue  { background: #ECFDF5; color: #059669; }
.badge-pago      { background: #F0FDF4; color: #16A34A; }
.badge-pendente  { background: #FFFBEB; color: #D97706; }
.badge-vencido   { background: #FEF2F2; color: #DC2626; }
.badge-cancelado { background: #F8FAFC; color: #94A3B8; }

/* ── Botões ─────────────────────────────────────────────────────── */
.btn-pl-primary {
  background: var(--arm-grad-gold);
  color: #fff; border: none;
  font-weight: 600; font-size: .875rem;
  border-radius: var(--radius-sm);
  padding: .5rem 1.1rem;
  cursor: pointer;
  transition: opacity var(--transition), box-shadow var(--transition), transform var(--transition);
}
.btn-pl-primary:hover {
  opacity: .88; color: #fff;
  box-shadow: 0 4px 16px rgba(184,151,90,.42);
  transform: translateY(-1px);
}
.btn-pl-primary:active { transform: translateY(0); opacity: 1; }

.btn-pl-secondary {
  background: var(--arm-surface);
  color: var(--arm-text);
  border: 1px solid var(--arm-border);
  font-weight: 500; font-size: .875rem;
  border-radius: var(--radius-sm);
  padding: .5rem 1.1rem;
  cursor: pointer;
  transition: all var(--transition);
}
.btn-pl-secondary:hover { background: var(--arm-bg); border-color: #CCC6BB; color: var(--arm-text); }

/* ── Formulários ────────────────────────────────────────────────── */
.form-control, .form-select {
  border-color: var(--arm-border);
  border-radius: var(--radius-sm);
  font-size: .875rem;
  color: var(--arm-text);
  background: var(--arm-surface);
  transition: border-color var(--transition), box-shadow var(--transition);
}
.form-control:focus, .form-select:focus {
  border-color: var(--arm-gold);
  box-shadow: 0 0 0 3px rgba(184,151,90,.16);
  outline: none;
}
.form-control::placeholder { color: var(--arm-muted-lt); }
.form-label { font-size: .82rem; font-weight: 600; color: var(--arm-text); margin-bottom: .3rem; }
.input-group-text {
  background: var(--arm-bg);
  border-color: var(--arm-border);
  color: var(--arm-muted);
  font-size: .875rem;
}

/* ── Breadcrumb ─────────────────────────────────────────────────── */
.breadcrumb { margin-bottom: 0; }
.breadcrumb-item a {
  color: var(--arm-gold-d);
  text-decoration: none;
  font-weight: 500;
  transition: color var(--transition);
}
.breadcrumb-item a:hover { color: var(--arm-gold); text-decoration: underline; }
.breadcrumb-item.active { color: var(--arm-muted); }
.breadcrumb-item + .breadcrumb-item::before { color: var(--arm-muted-lt); }

/* ── Alertas ────────────────────────────────────────────────────── */
.alert { border-radius: var(--radius); font-size: .875rem; }

/* ── Paginação ──────────────────────────────────────────────────── */
.pl-pagination { display: flex; align-items: center; gap: .3rem; flex-wrap: wrap; }
.pl-pagination a, .pl-pagination span {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px;
  border-radius: var(--radius-sm);
  font-size: .8rem; font-weight: 500;
  border: 1px solid var(--arm-border);
  color: var(--arm-text);
  text-decoration: none;
  transition: all var(--transition);
}
.pl-pagination a:hover {
  background: var(--arm-gold-pale);
  border-color: var(--arm-gold);
  color: var(--arm-gold-d);
}
.pl-pagination .active {
  background: var(--arm-grad-gold);
  border-color: var(--arm-gold-d);
  color: #fff;
}
.pl-pagination .disabled { color: var(--arm-muted-lt); pointer-events: none; }

/* ── Modal ──────────────────────────────────────────────────────── */
.modal-content { border-radius: var(--radius-lg); border: 1px solid var(--arm-border); box-shadow: var(--arm-shadow-lg); }
.modal-header  { border-bottom: 1px solid var(--arm-border); padding: 1rem 1.25rem; }
.modal-footer  { border-top: 1px solid var(--arm-border); padding: .75rem 1.25rem; }

/* ── Timeline ───────────────────────────────────────────────────── */
.timeline { position: relative; padding-left: 1.5rem; }
.timeline::before {
  content: ''; position: absolute; left: 7px; top: 0; bottom: 0;
  width: 2px; background: var(--arm-border);
}
.timeline-item { position: relative; padding-bottom: 1.25rem; }
.timeline-dot {
  position: absolute; left: -1.5rem;
  width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid var(--arm-gold);
  background: var(--arm-surface); top: 3px;
}
.timeline-dot.filled { background: var(--arm-gold); }
.timeline-date { font-size: .73rem; color: var(--arm-muted); }
.timeline-text { font-size: .85rem; color: var(--arm-text); margin-top: .1rem; }

/* ── Login page ─────────────────────────────────────────────────── */
.login-wrapper {
  height: 100vh;
  display: flex;
  overflow: hidden;
}

/* Painel esquerdo — charcoal escuro */
.login-brand-panel {
  flex: 1;
  background: var(--arm-grad-brand);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: 2rem 3rem;
  color: #fff;
  position: relative;
  overflow: hidden;
}
/* Brilhos dourados sutis */
.login-brand-panel::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 20% 60%, rgba(184,151,90,.10) 0%, transparent 55%),
    radial-gradient(ellipse at 75% 20%, rgba(184,151,90,.06) 0%, transparent 45%);
  pointer-events: none;
}
/* Linha dourada na borda direita */
.login-brand-panel::after {
  content: '';
  position: absolute; right: 0; top: 12%; bottom: 12%;
  width: 1px;
  background: linear-gradient(to bottom, transparent, rgba(184,151,90,.55), transparent);
}
.login-brand-inner {
  position: relative;
  z-index: 1;
  width: 100%;
}
.login-brand-header {
  display: flex;
  align-items: center;
  gap: 1.75rem;
  margin-bottom: 2rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid rgba(184,151,90,.30);
}
.login-brand-logo {
  display: block;
  width: 200px;
  max-width: 42%;
  height: auto;
  object-fit: contain;
  filter: brightness(0) invert(1);
  opacity: .92;
  flex-shrink: 0;
}
.login-brand-tagline { flex: 1; min-width: 0; }
.login-brand-title {
  font-size: 1.8rem;
  font-weight: 800;
  margin-bottom: .35rem;
  letter-spacing: -.03em;
  line-height: 1.1;
}
.login-brand-sub {
  font-size: .88rem;
  opacity: .68;
  margin: 0;
  line-height: 1.45;
}
.login-feat-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .6rem;
}
.login-feat-item {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(184,151,90,.18);
  border-radius: var(--radius);
  padding: .6rem .7rem;
}
.login-feat-icon {
  font-size: .95rem;
  margin-top: .1rem;
  color: var(--arm-gold-lt);
  flex-shrink: 0;
}
.login-feat-text { font-size: .795rem; opacity: .78; line-height: 1.35; }

/* Painel direito */
.login-form-panel {
  width: 420px;
  min-width: 300px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow-y: auto;
  padding: 2rem 2.25rem;
  background: var(--arm-surface);
  box-shadow: -4px 0 32px rgba(0,0,0,.08);
}
.login-form-inner { width: 100%; }
.login-mobile-logo {
  display: block;
  width: 180px;
  max-width: 65%;
  height: auto;
  object-fit: contain;
  margin: 0 auto 1.5rem;
}
.login-form-title {
  font-size: 1.4rem; font-weight: 800;
  color: var(--arm-text);
  margin-bottom: .2rem;
  letter-spacing: -.02em;
}
.login-form-sub { font-size: .855rem; color: var(--arm-muted); margin-bottom: 1.5rem; }
.login-lesine-credit {
  display: flex; align-items: center; gap: .625rem;
  margin-top: 1.25rem;
  padding: .5rem .75rem;
  border-radius: var(--radius);
  background: var(--arm-bg);
  border: 1px solid var(--arm-border);
}
.login-lesine-credit img { height: 22px; width: auto; object-fit: contain; border-radius: 2px; }
.login-lesine-credit span { font-size: .72rem; color: var(--arm-muted); line-height: 1.3; }

/* ── Legacy navbar stubs ────────────────────────────────────────── */
.pl-navbar {
  background: var(--arm-surface) !important;
  border-bottom: 1px solid var(--arm-border);
  box-shadow: var(--arm-shadow-xs);
  padding: .5rem 1.25rem;
}
.pl-navbar .navbar-brand {
  font-weight: 700; font-size: 1.05rem;
  color: var(--arm-text) !important;
  display: flex; align-items: center; gap: .5rem;
}
.pl-navbar .navbar-brand .brand-icon {
  width: 32px; height: 32px;
  background: var(--arm-grad-gold);
  border-radius: .4rem;
  display: flex; align-items: center; justify-content: center;
  font-size: .9rem; color: #fff; flex-shrink: 0;
}
.pl-navbar .nav-link {
  color: var(--arm-muted) !important; font-weight: 500; font-size: .845rem;
  border-radius: var(--radius-sm); padding: .35rem .7rem !important;
  transition: color var(--transition), background var(--transition);
}
.pl-navbar .nav-link:hover,
.pl-navbar .nav-link.active { color: var(--arm-gold-d) !important; background: var(--arm-gold-pale); }
.pl-navbar .dropdown-menu {
  border: 1px solid var(--arm-border);
  border-radius: var(--radius);
  box-shadow: var(--arm-shadow);
  padding: .35rem;
}
.pl-navbar .dropdown-item {
  border-radius: var(--radius-sm); font-size: .84rem; padding: .45rem .7rem; color: var(--arm-text);
}
.pl-navbar .dropdown-item:hover { background: var(--arm-gold-pale); color: var(--arm-gold-d); }
.btn-sair {
  font-size: .82rem; font-weight: 600;
  color: var(--arm-muted) !important;
  border: 1px solid var(--arm-border);
  border-radius: var(--radius-sm);
  padding: .3rem .75rem;
  transition: all var(--transition);
  text-decoration: none;
}
.btn-sair:hover { color: var(--arm-danger-c) !important; border-color: var(--arm-danger-c); background: rgba(220,38,38,.05); }
.pl-user-chip {
  display: flex; align-items: center; gap: .45rem;
  font-size: .83rem; font-weight: 600; color: var(--arm-text);
}
.avatar-xs {
  width: 28px; height: 28px;
  background: var(--arm-grad-gold);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: .68rem; font-weight: 700; color: #fff; flex-shrink: 0;
}
.pl-main { padding: 1.75rem 1rem 2.5rem; }

/* ── Responsivo ─────────────────────────────────────────────────── */
@media (max-width: 991.98px) {
  .arm-sidebar {
    transform: translateX(-100%);
    box-shadow: none;
  }
  body.arm-sb-open .arm-sidebar {
    transform: translateX(0);
    box-shadow: 4px 0 36px rgba(0,0,0,.32);
  }
  .arm-sidebar-overlay { display: block; opacity: 0; pointer-events: none; transition: opacity .2s; }
  body.arm-sb-open .arm-sidebar-overlay { opacity: 1; pointer-events: auto; }
  .arm-content { margin-left: 0; }
  .arm-tb-toggle { display: flex; }
  .arm-main { padding: 1.25rem 1rem 2rem; }
  .arm-topbar { padding: 0 1rem; }
}

@media (max-width: 767.98px) {
  .login-wrapper      { height: auto; min-height: 100vh; overflow: auto; }
  .login-brand-panel  { display: none !important; }
  .login-form-panel   { width: 100%; box-shadow: none; min-height: 100vh; justify-content: center; }
  .kpi-value          { font-size: 1.35rem; }
  .arm-tb-lesine      { display: none; }
  .arm-footer-lesine  { display: none; }
}

@media (min-width: 992px) {
  .arm-sidebar-overlay { display: none !important; }
}

@media (min-width: 1280px) {
  .arm-tb-lesine-label { display: block; }
}