/* ============================================================
   DESIGN TOKENS — "Apple Premium"
   Paleta: chrome escuro (#0F172A) + canvas claro + accent laranja.
   Tipografia: SF Pro Display via system-fonts.
   ============================================================ */
:root {
  /* —— ACCENTS / brand —— */
  --brand:        #0F172A;   /* chrome dark — usado em sidebar/header/btns primários */
  --brand-dark:   #020617;
  --brand-light:  rgba(15, 23, 42, 0.06);
  --accent:       #FF9F0A;   /* iOS orange — call-to-action */
  --accent-soft:  rgba(255, 159, 10, 0.14);
  --teal:         #30D158;   /* iOS green */
  --teal-light:   rgba(48, 209, 88, 0.12);
  --amber:        #FFD60A;   /* iOS yellow */
  --amber-light:  rgba(255, 214, 10, 0.14);
  --red:          #FF453A;   /* iOS red */
  --red-light:    rgba(255, 69, 58, 0.12);
  --green:        #30D158;
  --green-light:  rgba(48, 209, 88, 0.12);
  --purple:       #BF5AF2;   /* iOS purple */
  --purple-light: rgba(191, 90, 242, 0.14);

  /* —— BACKGROUNDS —— */
  --bg:           #F5F5F7;   /* Apple's canvas */
  --surface:      #FFFFFF;
  --surface-2:    #F2F2F7;   /* iOS systemGray6 */

  /* —— HAIRLINES (separators à Apple) —— */
  --border:       rgba(60, 60, 67, 0.12);
  --border-strong:rgba(60, 60, 67, 0.22);
  --border-light: rgba(60, 60, 67, 0.06);

  /* —— TEXTO —— */
  --text-1:       #1D1D1F;   /* Apple "near-black" */
  --text-2:       #424245;
  --text-3:       #6E6E73;
  --text-4:       #86868B;

  /* —— LAYOUT —— */
  --sidebar-w:    260px;
  --header-h:     64px;

  /* —— BORDER RADIUS (scale) —— */
  --radius-sm:    10px;
  --radius:       14px;
  --radius-lg:    18px;
  --radius-xl:    22px;
  --r-xs:         8px;
  --r-sm:         10px;
  --r-md:         14px;
  --r-lg:         18px;
  --r-xl:         22px;
  --r-pill:       999px;

  /* —— SPACING SCALE —— */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-7: 28px; --sp-8: 32px;
  --sp-10: 40px; --sp-12: 48px; --sp-14: 56px; --sp-16: 64px;

  /* —— ELEVATION (sombras Apple — leves) —— */
  --shadow-sm:    0 1px 2px rgba(0,0,0,.04);
  --shadow:       0 4px 12px rgba(0,0,0,.05), 0 1px 3px rgba(0,0,0,.04);
  --shadow-lg:    0 12px 32px rgba(0,0,0,.08), 0 4px 12px rgba(0,0,0,.04);
  --shadow-brand: 0 4px 14px rgba(255, 159, 10, 0.22);
  --shadow-dark:  0 8px 28px rgba(0,0,0,.36);

  /* —— EASING (Apple style) —— */
  --ease-out:     cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:  cubic-bezier(0.42, 0, 0.58, 1);
  --transition:   200ms var(--ease-out);

  /* —— TYPOGRAPHY —— */
  --font:         -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", system-ui, sans-serif;
  --font-mono:    ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

[data-theme="dark"] {
  --bg:           #0F172A;
  --surface:      #1E293B;
  --surface-2:    #243047;
  --border:       #334155;
  --border-light: #1E293B;
  --text-1:       #F1F5F9;
  --text-2:       #CBD5E1;
  --text-3:       #94A3B8;
  --text-4:       #64748B;
  --brand-light:  rgba(0,120,212,.15);
  --teal-light:   rgba(0,178,148,.12);
  --amber-light:  rgba(255,140,0,.12);
  --red-light:    rgba(209,52,56,.12);
  --green-light:  rgba(16,124,16,.12);
  --purple-light: rgba(123,47,190,.12);
  --shadow-sm:    0 1px 3px rgba(0,0,0,.3);
  --shadow:       0 4px 12px rgba(0,0,0,.4);
  --shadow-lg:    0 10px 30px rgba(0,0,0,.5);
}

/* ============================================================
   RESET & BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

/* ============================================================
   ANIMAÇÕES — vida ao portal
   ============================================================ */
@keyframes vumbaFadeUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes vumbaFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes vumbaScaleIn {
  from { opacity: 0; transform: scale(.92); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes vumbaSlideRight {
  from { opacity: 0; transform: translateX(-12px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes vumbaShimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

/* Reveal on scroll */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .6s cubic-bezier(.2,.7,.2,1), transform .6s cubic-bezier(.2,.7,.2,1);
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Page transition — fade + 4px slide ao estilo iOS */
.page { animation: appleFadeIn .28s var(--ease-out); }
.page.active { animation: applePageIn .32s var(--ease-out); }
@keyframes applePageIn {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes appleFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ===== HIERARQUIA EMOCIONAL ===== */
/* Princípio: o que é PARA LER fica quieto. O que é PARA CLICAR mexe-se. */

/* Cards base — todos têm transição mas leve */
.card, .kpi-card, .announce-card, .dir-card, .quick-action, .announce-item, .request-item {
  transition: transform .2s cubic-bezier(.2,.7,.2,1), box-shadow .2s cubic-bezier(.2,.7,.2,1), border-color .2s, background .15s;
}

/* Card neutro (informação) — apenas sombra cresce no hover, sem deslocamento */
.card:hover {
  box-shadow: 0 6px 18px rgba(0,0,0,.06);
}

/* KPI cards clicáveis (têm onclick) — hover lift forte para sinalizar acção */
.kpi-card[onclick]:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(0,120,212,.14);
  cursor: pointer;
}
/* KPI cards sem onclick (read-only) — apenas sombra subtil */
.kpi-card:not([onclick]):hover {
  box-shadow: 0 4px 12px rgba(0,0,0,.05);
}

/* QUICK ACTIONS — são SEMPRE para clicar, comportamento alto-impacto */
.quick-action {
  cursor: pointer;
  position: relative;
}
.quick-action:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(0,120,212,.22);
}
.quick-action:active {
  transform: translateY(-1px);
}

/* CARTÕES DE ANÚNCIO / DIRETÓRIO — clicáveis, hover forte */
.announce-card:hover, .dir-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(0,0,0,.1);
}

/* LINHAS DE LISTA (Pedidos Recentes, Anúncios resumidos) — leve highlight, sem deslocamento */
.announce-item:hover, .request-item:hover {
  background: var(--surface-2);
}

/* Modal entrada animada */
[id$="Modal"][style*="display:flex"] > div,
[id$="Modal"][style*="display: flex"] > div {
  animation: vumbaScaleIn .25s cubic-bezier(.2,.7,.2,1);
}

/* KPI valores animam quando entram */
.kpi-value {
  transition: color .2s;
}

/* Welcome banner — estático (é INFORMAÇÃO, não acção). Sem animação parasita. */
/* (vumbaBreath removido propositadamente) */

/* Botões com micro-feedback */
.btn, button.btn-primary, button.btn-secondary {
  transition: transform .15s, box-shadow .15s, background .2s;
}
.btn:active, button.btn-primary:active, button.btn-secondary:active {
  transform: scale(.97);
}

/* Skeleton shimmer para loading */
.skeleton {
  background: linear-gradient(90deg, var(--surface-2) 0%, rgba(255,255,255,.6) 50%, var(--surface-2) 100%);
  background-size: 200% 100%;
  animation: vumbaShimmer 1.4s linear infinite;
  border-radius: 6px;
}

/* Nav items — leve highlight ao hover */
.nav-item {
  transition: background .2s, padding-left .2s, color .2s;
}
.nav-item:hover:not(.active) {
  padding-left: 18px;
}

/* Badges pulsam levemente quando aparecem */
@keyframes vumbaBadgePulse {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.12); }
  100% { transform: scale(1); }
}
.nav-badge {
  animation: vumbaBadgePulse 1.4s ease-in-out infinite;
}

/* Tabela hover row */
.data-table tbody tr {
  transition: background .15s;
}
.data-table tbody tr:hover {
  background: var(--surface-2);
}

/* ============================================================
   DESIGN EMOCIONAL — Read vs Click hierarchy
   ============================================================ */

/* ===== TIPOGRAFIA — VALOR > LABEL ===== */
.kpi-value {
  font-size: 30px !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em;
  line-height: 1 !important;
}
.kpi-label {
  font-size: 11.5px !important;
  font-weight: 500 !important;
  color: var(--text-3) !important;
  text-transform: uppercase;
  letter-spacing: .4px;
  margin-top: 4px;
}

/* Section headers — fortes mas calmos */
.section-header h3 {
  font-size: 15px !important;
  font-weight: 700 !important;
  letter-spacing: -0.005em;
}
/* "Ver todos →" — link com gap animado no hover */
.section-header a, .btn-text {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--text-1) !important;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: gap .2s var(--ease-out), opacity .15s;
  opacity: 1 !important;
  letter-spacing: -0.005em;
}
.section-header a:hover, .btn-text:hover {
  gap: 8px;
  opacity: 0.7 !important;
}

/* ===== BOTÕES — Apple Premium ===== */
/* Primário: pill preta (chrome dark), lift no hover */
.btn-primary, button[type="submit"]:not(.dir-action-btn) {
  background: #0F172A !important;
  color: #FFFFFF !important;
  border: none !important;
  font-weight: 600 !important;
  letter-spacing: -0.005em;
  box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 4px 12px rgba(15,23,42,.18) !important;
  transition: transform var(--transition), opacity var(--transition), box-shadow var(--transition), background var(--transition) !important;
  position: relative;
}
.btn-primary:hover, button[type="submit"]:not(.dir-action-btn):hover {
  background: #1E293B !important;
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0,0,0,.06), 0 8px 20px rgba(15,23,42,.22) !important;
}
.btn-primary:active, button[type="submit"]:not(.dir-action-btn):active {
  transform: translateY(0);
}

/* Secundário: superfície branca com hairline */
.btn-secondary {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  color: var(--text-1) !important;
  font-weight: 600;
  transition: background var(--transition), border-color var(--transition);
}
.btn-secondary:hover {
  background: var(--surface-2) !important;
  border-color: var(--border-strong) !important;
  color: var(--text-1) !important;
}

/* ===== LISTAS DE LEITURA — calmas ===== */
/* Tabela: hover de linha apenas com background, sem deslocamento */
.data-table tbody tr {
  transition: background .12s;
}
.data-table tbody tr:hover {
  background: var(--surface-2);
}

/* Empty states — calmos, com personalidade */
.data-table td[colspan] {
  font-size: 13px;
  color: var(--text-3);
  font-style: italic;
}

/* ===== CTAs INLINE — botões pequenos nas tabelas/cards ===== */
/* Aprovar = verde forte (positivo); Rejeitar = vermelho suave; Ver = azul */
.data-table button {
  font-weight: 700 !important;
  letter-spacing: 0.01em;
  transition: transform .12s, box-shadow .15s, filter .15s;
}
.data-table button:hover {
  transform: translateY(-1px);
  filter: brightness(1.05);
}

/* ===== FORM LABELS / VALUES ===== */
/* Label = quieto. Input = onde a atenção deve ir */
label {
  font-weight: 600;
  color: var(--text-2);
}
input:not([type=checkbox]):not([type=radio]):focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: rgba(255,159,10,.65) !important;
  box-shadow: 0 0 0 3px rgba(255,159,10,.18);
}

/* ===== FILTER CHIPS ===== */
.filter-chip {
  transition: all .15s;
}
.filter-chip:not(.active):hover {
  background: var(--surface-2) !important;
  color: var(--text-1);
}
.filter-chip.active {
  /* Activo chama atenção — mais peso */
  font-weight: 700 !important;
  box-shadow: 0 2px 8px rgba(0,120,212,.2);
}

/* ===== BADGES VERMELHOS — urgência ===== */
.nav-badge {
  font-weight: 800;
}

/* ============================================================
   ESPAÇO DA EQUIPA — Estilo rede social (FB/Instagram-grade)
   ============================================================ */

/* Heart pop quando se dá like (Instagram-style) */
@keyframes heartPop {
  0%   { transform: scale(1); }
  25%  { transform: scale(1.45); }
  50%  { transform: scale(.85); }
  75%  { transform: scale(1.15); }
  100% { transform: scale(1); }
}
.heart-pop { animation: heartPop .55s cubic-bezier(.34,1.56,.64,1); }

/* Heart flutuante (double-tap em foto) */
@keyframes heartFloat {
  0%   { opacity: 0; transform: translate(-50%,-50%) scale(.3); }
  20%  { opacity: 1; transform: translate(-50%,-50%) scale(1.3); }
  60%  { opacity: 1; transform: translate(-50%,-50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%,-80%) scale(.95); }
}
.heart-float {
  position: absolute; left:50%; top:50%; pointer-events:none;
  font-size: 90px; filter: drop-shadow(0 4px 20px rgba(220,53,69,.5));
  animation: heartFloat .9s cubic-bezier(.34,1.56,.64,1) forwards;
  z-index: 10;
}

/* Composer inline — compacto (versão Director-friendly) */
.mural-composer {
  background: white;
  border: 1px solid var(--border-light);
  border-radius: 10px;
  padding: 8px 12px;
  display: flex; align-items: center; gap: 10px;
  cursor: text;
  transition: border-color .15s, box-shadow .15s;
}
.mural-composer:hover {
  border-color: var(--border);
  box-shadow: 0 2px 8px rgba(0,0,0,.04);
}
.mural-composer-input {
  flex: 1; min-width: 0;
  font-size: 13px; color: var(--text-3);
  padding: 7px 12px;
  background: var(--surface-2);
  border-radius: 16px;
  transition: background .15s;
}
.mural-composer:hover .mural-composer-input { background: #f0f4f8; color: var(--text-2); }

.mural-composer-actions {
  display: flex; gap: 2px; padding-top: 6px;
  border-top: 1px solid var(--border-light);
  margin-top: 8px;
}
.mural-composer-action {
  flex: 1;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 6px;
  border-radius: 6px;
  background: transparent; border: none; cursor: pointer;
  font-size: 11.5px; font-weight: 600; color: var(--text-3);
  transition: background .15s;
}
.mural-composer-action:hover { background: var(--surface-2); }
.mural-composer-action .ico { font-size: 14px; }

/* Post card — mais Instagram-like */
.mural-post {
  background: white;
  border: 1px solid var(--border-light);
  border-radius: 14px;
  overflow: hidden;
  transition: box-shadow .2s;
}
.mural-post:hover { box-shadow: 0 6px 20px rgba(0,0,0,.06); }

/* Like button — versão compacta (Director quis menos destaque) */
.like-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 10px;
  background: transparent; border: none;
  border-radius: 8px;
  cursor: pointer;
  font-size: 12.5px; font-weight: 600;
  transition: background .15s, color .15s;
}
.like-btn:hover { background: var(--surface-2); }
.like-btn .heart { font-size: 15px; transition: transform .15s; }
.like-btn.liked { color: #dc3545; }
.like-btn:not(.liked) { color: var(--text-2); }

/* Action bar do post — mais compacta */
.mural-actions {
  display: flex; align-items: center; gap: 2px;
  padding: 2px 6px;
  border-top: 1px solid var(--border-light);
}
.mural-actions button {
  flex: 1;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 7px;
  background: transparent; border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 12.5px; font-weight: 600; color: var(--text-2);
  transition: background .15s, color .15s;
}
.mural-actions button:hover { background: var(--surface-2); }

/* Social proof — avatares empilhados dos likers */
.likers-stack {
  display: inline-flex; align-items: center; gap: 0;
  margin-right: 8px;
}
.likers-stack img, .likers-stack .ini {
  width: 22px; height: 22px; border-radius: 50%;
  border: 2px solid white; object-fit: cover;
  margin-left: -6px; flex-shrink: 0;
  background: #0F172A;
  color: white; font-size: 9px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.likers-stack > :first-child { margin-left: 0; }

/* Foto única — tamanho contido (reduzido após feedback do Director) */
.mural-photo-single {
  display: block;
  width: 100%;
  max-width: 380px;       /* nunca mais larga que isto */
  max-height: 280px;      /* nunca mais alta que isto */
  object-fit: cover;
  background: #000;
  cursor: zoom-in;
  transition: filter .2s;
  border-radius: 8px;
  margin: 4px 16px;       /* respiração lateral em vez de full-bleed */
}
.mural-photo-single:hover { filter: brightness(.96); }

/* Grid de fotos — compacto */
.mural-grid {
  display: grid;
  gap: 2px;
  background: #000;
  max-width: 420px;        /* limita largura total */
  margin: 4px 16px;
  border-radius: 8px;
  overflow: hidden;
}
.mural-grid > div { position: relative; overflow: hidden; cursor: zoom-in; background: var(--surface-2); }
.mural-grid img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s; }
.mural-grid > div:hover img { transform: scale(1.04); }

/* Variantes do grid — proporções compactas */
.mural-grid-2 { grid-template-columns: 1fr 1fr; aspect-ratio: 2/1; max-height: 200px; }
.mural-grid-3 { grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; aspect-ratio: 3/2; max-height: 240px; }
.mural-grid-3 > div:first-child { grid-row: 1 / span 2; }
.mural-grid-4 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; aspect-ratio: 1/1; max-height: 260px; }
.mural-grid-5 { grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 1fr 1fr; aspect-ratio: 3/2; max-height: 240px; }
.mural-grid-5 > div:nth-child(1), .mural-grid-5 > div:nth-child(2) { grid-row: 1; grid-column: span 1; }
.mural-grid-5 > div:nth-child(1) { grid-column: 1 / span 2; }
.mural-grid-5 > div:nth-child(2) { grid-column: 3; }

/* Overlay "+N" no último tile quando excede */
.mural-grid-more {
  position: absolute; inset: 0;
  background: rgba(0,0,0,.55); color: white;
  display: flex; align-items: center; justify-content: center;
  font-size: 28px; font-weight: 800;
  letter-spacing: -.02em;
  transition: background .2s;
}
.mural-grid > div:hover .mural-grid-more { background: rgba(0,0,0,.7); }

/* Comment bubble — Facebook-style */
.comment-row { display: flex; gap: 8px; align-items: flex-start; }
.comment-bubble {
  background: var(--surface-2);
  border-radius: 16px;
  padding: 8px 14px;
  font-size: 13.5px; line-height: 1.45;
  color: var(--text-1);
  max-width: 100%;
}
.comment-bubble strong { font-size: 12.5px; font-weight: 700; display: block; margin-bottom: 1px; }
.comment-meta {
  font-size: 11px; color: var(--text-4); padding: 2px 14px 0;
  display: flex; gap: 12px;
}
.comment-meta button { background: none; border: none; cursor: pointer; color: var(--text-4); font-weight: 600; font-size: 11px; padding: 0; }
.comment-meta button:hover { color: var(--brand); text-decoration: underline; }

/* ============================================================
   ACESSIBILIDADE — Foco visível + skip link
   ============================================================ */

/* Skip link — saltar para conteúdo principal (visível ao Tab) */
.skip-link {
  position: absolute;
  top: -100px;
  left: 8px;
  background: var(--brand);
  color: white;
  padding: 10px 18px;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 700;
  font-size: 14px;
  z-index: 100000;
  transition: top .15s;
}
/* :focus-visible (não :focus) → aparece SÓ quando o foco vem do teclado (Tab),
   nunca em cliques, reloads ou foco programático (#mainContent no URL). */
.skip-link:focus-visible {
  top: 8px;
  outline: 3px solid #ffd700;
  outline-offset: 2px;
}

/* Foco visível em TODOS os elementos interactivos quando navegado por teclado.
   :focus-visible só aplica quando o utilizador chegou por teclado (Tab), não rato. */
button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible,
[role="button"]:focus-visible {
  outline: 3px solid var(--brand);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Cards/divs clicáveis precisam de tabindex="0" e role="button" no HTML
   para serem alcançáveis por teclado. Estilo de foco aplicado acima. */

/* Modais — quando abrem, garantir contraste forte ao redor */
[role="dialog"]:focus { outline: none; }

/* Reduzir motion para quem prefere */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}
body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text-1);
  min-height: 100vh;
  display: flex;
  transition: background var(--transition), color var(--transition);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  letter-spacing: -0.005em;
}
/* Hierarquia tipográfica Apple — letter-spacing equilibrado para Windows/ClearType */
h1, h2, h3, h4, h5, h6 { letter-spacing: -0.018em; font-weight: 600; }
h1 { letter-spacing: -0.02em; }
/* Números tabulares onde houver dados (KPIs, tabelas) */
.kpi-value, .data-table td, .data-table th { font-variant-numeric: tabular-nums; }

a { color: inherit; text-decoration: none; }
button { cursor: pointer; font-family: var(--font); border: none; background: none; letter-spacing: inherit; }
input, select, textarea { font-family: var(--font); letter-spacing: inherit; }

/* ============================================================
   SCROLLBAR
   ============================================================ */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-4); }

/* ============================================================
   SIDEBAR
   ============================================================ */
.sidebar {
  position: fixed;
  left: 0; top: 0; bottom: 0;
  width: var(--sidebar-w);
  background: #0F172A;                    /* chrome dark (Apple Premium) */
  border-right: 1px solid rgba(255,255,255,.06);
  display: flex;
  flex-direction: column;
  z-index: 200;
  transition: transform var(--transition);
}
.sidebar-logo {
  height: var(--header-h);
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 var(--sp-5);
  border-bottom: 1px solid rgba(255,255,255,.06);
  flex-shrink: 0;
}
.logo-mark {
  width: 36px; height: 36px;
  background: transparent;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  color: #0F172A;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: -.5px;
  flex-shrink: 0;
  box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 4px 12px rgba(0,0,0,.18);
  overflow: hidden;
  padding: 0;
}
.logo-mark img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 10px; }
.logo-text { line-height: 1.2; min-width: 0; overflow: hidden; }
.logo-text strong { display: block; font-size: 13.5px; font-weight: 600; color: #FFFFFF; letter-spacing: -0.015em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.logo-text span { font-size: 10px; color: rgba(255,255,255,.62); font-weight: 400; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }

.sidebar-nav { flex: 1; overflow-y: auto; padding: var(--sp-3) 0; }
.nav-section { margin-bottom: var(--sp-1); }
.nav-label {
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: rgba(255,255,255,.58);   /* WCAG AA: 6.5:1 sobre #0F172A */
  padding: var(--sp-4) var(--sp-5) 6px;
}
.nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 14px;
  margin: 2px var(--sp-2);
  border-radius: var(--r-sm);
  color: rgba(255,255,255,.78);   /* WCAG AAA: 10:1 sobre #0F172A */
  font-size: 13.5px;
  font-weight: 500;
  cursor: pointer;
  transition: background var(--transition), color var(--transition);
  position: relative;
  letter-spacing: -0.005em;
}
.nav-item:hover { background: rgba(255,255,255,.06); color: #FFFFFF; }
.nav-item.active {
  background: rgba(255,255,255,.08);      /* neutral wash — accent reservado para pendente/focus */
  color: #FFFFFF;
}
.nav-item.active .nav-icon { color: #FFFFFF; }
.nav-item.active::before {
  content: "";
  position: absolute;
  left: -2px; top: 8px; bottom: 8px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: #FFFFFF;
}
.nav-icon {
  width: 18px; height: 18px;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  opacity: .9;
}
.nav-badge {
  margin-left: auto;
  background: var(--red);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: var(--r-pill);
  min-width: 18px;
  text-align: center;
}

.sidebar-footer {
  padding: var(--sp-3);
  border-top: 1px solid rgba(255,255,255,.06);
}
.user-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: background var(--transition);
}
.user-card:hover { background: rgba(255,255,255,.06); }
.avatar {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: rgba(255,255,255,.10);
  display: flex; align-items: center; justify-content: center;
  color: #FFFFFF;
  font-size: 12px;
  font-weight: 600;
  flex-shrink: 0;
  box-shadow: 0 0 0 1px rgba(255,255,255,.08);
}
.avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.user-info { flex: 1; min-width: 0; }
.user-info strong { display: block; font-size: 12.5px; font-weight: 600; color: #FFFFFF; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: -0.005em; }
.user-info span { font-size: 11px; color: rgba(255,255,255,.62); }

.sidebar-logout {
  width: 100%;
  margin-top: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 9px 12px;
  border: none;
  background: transparent;
  color: rgba(255,255,255,.55);
  border-radius: var(--r-sm);
  font-size: 12.5px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: background var(--transition), color var(--transition);
}
.sidebar-logout-ico { flex-shrink: 0; }
.sidebar-logout:hover { background: rgba(255,69,58,.12); color: var(--red); }
[data-theme="light"] .sidebar-logout { color: #3D6A87; }
[data-theme="light"] .sidebar-logout:hover { background: rgba(255,69,58,.10); color: var(--red); }

/* ============================================================
   HEADER
   ============================================================ */
.header {
  position: fixed;
  top: 0;
  left: var(--sidebar-w);
  right: 0;
  height: var(--header-h);
  background: #0F172A;                    /* sólido — blur removido na Fase 5 (não resolvia problema real) */
  border-bottom: 1px solid rgba(255,255,255,.06);
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 var(--sp-6);
  z-index: 100;
  transition: left var(--transition);
  color: #FFFFFF;
}
.header-title { flex: 1; }
.header-title h1 { font-size: 16px; font-weight: 600; color: #FFFFFF; letter-spacing: -0.015em; }
.header-title p { font-size: 12px; color: rgba(255,255,255,.65); margin-top: 1px; letter-spacing: -0.005em; }
.header-actions { display: flex; align-items: center; gap: 8px; }

.search-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--r-sm);
  padding: 7px 14px;
  width: 240px;
  transition: background var(--transition), border-color var(--transition), box-shadow var(--transition);
}
.search-bar:focus-within {
  border-color: rgba(255,255,255,.18);
  background: rgba(255,255,255,.10);
  box-shadow: 0 0 0 3px rgba(255,159,10,.18);
}
.search-bar input {
  border: none;
  background: none;
  font-size: 13.5px;
  color: #FFFFFF;
  outline: none;
  width: 100%;
}
.search-bar input::placeholder { color: rgba(255,255,255,.58); }

.icon-btn {
  width: 36px; height: 36px;
  border-radius: var(--r-sm);
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,.78);
  transition: background var(--transition), color var(--transition);
  position: relative;
}
.icon-btn:hover { background: rgba(255,255,255,.08); color: #FFFFFF; }
.notif-dot {
  position: absolute;
  top: 7px; right: 7px;
  width: 8px; height: 8px;
  background: #FF453A;                    /* iOS red — notificação urgente, separa de focus(laranja)/pendente(amarelo) */
  border-radius: 50%;
  border: 2px solid #0F172A;
}

/* Toggle de tema removido — portal é sempre chrome dark (Fase 5A-v2) */
.theme-toggle { display: none !important; }

/* ============================================================
   MAIN LAYOUT
   ============================================================ */
.main {
  margin-left: var(--sidebar-w);
  margin-top: var(--header-h);
  flex: 1;
  min-height: calc(100vh - var(--header-h));
  transition: margin-left var(--transition);
}
.page { display: none; padding: var(--sp-7) var(--sp-7) var(--sp-10); max-width: 1400px; }
.page.active { display: block; }

/* ============================================================
   MODAIS — sistema unificado Apple-style (Fase 5)
   Design system reutilizável: use estas classes em novos modais
   em vez de styles inline. Padrão:
     .modal-shell > .modal-shell-dialog >
        .modal-shell-header + .modal-shell-body + .modal-shell-actions
   ============================================================ */

/* Overlay — fundo escurecido + blur subtil + centra o dialog */
.modal-shell {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0, 0, 0, .55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  animation: appleFadeIn .2s var(--ease-out);
}
.modal-shell-dialog {
  background: var(--surface);
  border-radius: var(--r-xl);
  max-width: 560px;
  width: 100%;
  max-height: 92vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 24px 64px rgba(0,0,0,.32), 0 8px 24px rgba(0,0,0,.18);
  animation: applePageIn .26s var(--ease-out);
}
.modal-shell-header {
  background: #0F172A;
  color: #FFFFFF;
  padding: 20px var(--sp-6);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-shrink: 0;
}
.modal-shell-header h2,
.modal-shell-header h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: #FFFFFF;
}
.modal-shell-subtitle {
  font-size: 12px;
  color: rgba(255,255,255,.62);
  margin-top: 2px;
  letter-spacing: -0.005em;
}
.modal-shell-close {
  background: rgba(255,255,255,.10);
  border: none;
  color: #FFFFFF;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--transition);
  font-family: inherit;
  flex-shrink: 0;
}
.modal-shell-close:hover { background: rgba(255,255,255,.18); }
.modal-shell-body {
  padding: var(--sp-6);
  overflow-y: auto;
  flex: 1;
  color: var(--text-1);
  letter-spacing: -0.005em;
}
.modal-shell-actions {
  padding: var(--sp-4) var(--sp-6);
  background: var(--surface-2);
  border-top: 1px solid var(--border-light);
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  flex-wrap: wrap;
  flex-shrink: 0;
}
@media (max-width: 640px) {
  .modal-shell { padding: 0; align-items: flex-end; }
  .modal-shell-dialog {
    max-width: 100%;
    border-radius: 22px 22px 0 0;
    max-height: 92vh;
    animation: bottomSheetIn .42s cubic-bezier(0.32, 0.72, 0, 1) both;
  }
}

/* Overlay GENÉRICO para modais inline antigos (mantém compat até serem migrados) */
[id$="Modal"],
[id$="modal"] { backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }

/* Header com gradient brand/teal ANTIGO → substituir por chrome dark
   Sobrescreve inline `style="background:linear-gradient(135deg,#0078D4,#00B294)"` aplicado a divs nos modais */
.modal-header,
[id*="ModalTitle"],
[id*="modalTitle"],
div[style*="linear-gradient"][style*="0078D4"][style*="00B294"],
div[style*="linear-gradient"][style*="0078D4"][style*="0789bb"] {
  background: #0F172A !important;
  color: #FFFFFF !important;
}

/* Botões dentro de modais com fundo branco → tipografia + radius coerentes */
div[style*="background:rgba(0,0,0,.6)"] button {
  letter-spacing: -0.005em;
  font-family: var(--font);
}

/* ============================================================
   CARDS & SURFACES — hairlines + sombras subtis (Apple style)
   ============================================================ */
.card {
  background: var(--surface);
  border: 1px solid var(--border-light);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition), transform var(--transition), border-color var(--transition);
}
.card-hover:hover {
  border-color: var(--border);
  box-shadow: var(--shadow);
  transform: translateY(-1px);
}

/* ============================================================
   WELCOME BAR — Minimum operational (Fase 5A-v2 — minimalismo radical)
   A saudação é label. A ação domina. Identidade e temperatura vivem no header.
   Padding total ~28px. Banner deixou de ser hero para ser barra de status.
   ============================================================ */
.welcome-banner {
  position: relative;
  background: #0F172A;
  color: #FFFFFF;
  border-radius: var(--r-md);
  padding: 12px 22px 14px;
  margin-bottom: var(--sp-4);
  overflow: hidden;
  animation: welcomeBannerFadeIn .35s var(--ease-out) both;
  letter-spacing: -0.005em;
}
/* Linha 1: saudação + sincronização (texto fino, alinhado) */
.welcome-line {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 8px;
}
/* Glows removidos na Fase 5A-v2 — banner deixou de ser hero. Sólido limpo. */
@keyframes welcomeBannerFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* (legacy) — welcome-content era o grid que continha identidade. Já não usado. */
.welcome-content { position: relative; z-index: 1; }
.welcome-left { min-width: 0; flex: 1; }

/* Greeting — saudação como label discreta (era hero, agora 13.5px regular) */
.welcome-greeting {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.2;
  font-weight: 500;
  letter-spacing: -0.005em;
  color: rgba(255,255,255,.86);
  display: inline-flex;
  gap: 4px;
}
.welcome-greeting-prefix {
  font-weight: 400;
  color: rgba(255,255,255,.6);
  margin-right: 0;
}
.welcome-greeting-name { color: #FFFFFF; font-weight: 600; }

/* Action card — minimalista (foco principal do banner agora) */
.welcome-action {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 0;
  padding: 7px 6px 7px 12px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--r-sm);
  font-size: 13.5px;
  color: rgba(255,255,255,.94);
  font-weight: 500;
  transition: background var(--transition), border-color var(--transition);
}
.welcome-action.welcome-action-empty { display: none; }
.welcome-action:hover { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.12); }
.welcome-action .dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
}
.welcome-action.has-pending .dot {
  background: #FFD60A;                    /* iOS yellow — semântica de "atenção" */
  box-shadow: 0 0 0 4px rgba(255,214,10,.18);
}
.welcome-action.all-clear .dot {
  background: #30D158;
  box-shadow: 0 0 0 4px rgba(48,209,88,.18);
}
.welcome-action .text { letter-spacing: -0.005em; }
.welcome-action .text strong { color: #FFFFFF; font-weight: 600; }
.welcome-action .cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: 2px;
  padding: 6px 14px;
  background: #FFFFFF;
  color: #0F172A;
  border: none;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  letter-spacing: -0.005em;
  transition: transform var(--transition), box-shadow var(--transition), opacity var(--transition);
}
.welcome-action .cta:hover {
  opacity: .94;
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(0,0,0,.18);
}
.welcome-action .cta:active { transform: translateY(0); }

/* Separador inline entre saudação e status */
.welcome-meta-sep {
  color: rgba(255,255,255,.28);
  font-size: 11px;
}
/* Status operacional na mesma linha da saudação */
.welcome-status {
  margin: 0;
  font-size: 12.5px;
  color: rgba(255,255,255,.55);
  font-weight: 400;
  letter-spacing: 0;
}
.welcome-status:empty { display: none; }
.welcome-status:empty + .welcome-meta-sep,
.welcome-meta-sep + .welcome-status:empty { display: none; }

/* Identidade legacy do welcome banner — REMOVIDA na Fase 5A (movida para o header) */
.welcome-identity { display: none !important; }

/* ============================================================
   HEADER IDENTITY — Fase 5A
   Foto pequena + ✓ Nome + Cargo, no canto superior direito.
   Visto antes do nome (valida identidade, não cargo).
   ============================================================ */
.header-identity {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 8px 4px 4px;
  text-decoration: none;
  color: #FFFFFF;
  border-radius: 999px;
  margin-left: 6px;
  transition: background var(--transition);
  max-width: 220px;
}
.header-identity:hover { background: rgba(255,255,255,.06); }
.header-identity-photo {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: rgba(255,255,255,.10);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px;
  font-weight: 600;
  color: #FFFFFF;
  flex-shrink: 0;
  overflow: hidden;
  box-shadow: 0 0 0 1px rgba(255,255,255,.08);
}
.header-identity-photo img {
  width: 100%; height: 100%;
  border-radius: 50%;
  object-fit: cover;
}
.header-identity-text {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
  min-width: 0;
}
.header-identity-name {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: #FFFFFF;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 160px;
}
.header-identity-check {
  color: #30D158;    /* iOS green — validação */
  flex-shrink: 0;
}
.header-identity-role {
  font-size: 10.5px;
  color: rgba(255,255,255,.6);
  font-weight: 500;
  letter-spacing: -0.005em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 160px;
}
/* Em mobile, esconder texto — só foto */
@media (max-width: 640px) {
  .header-identity { max-width: 40px; padding: 4px; }
  .header-identity-text { display: none; }
}

/* Mantém compatibilidade com markup antigo caso ainda exista nalguma página */
.welcome-meta { display: none; }

/* Weather pill — chip discreto de localização + temperatura */
.weather-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 30px;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
  color: rgba(255, 255, 255, 0.94);
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s;
  border: none;
  font-family: inherit;
}
.weather-pill:hover { background: rgba(255, 255, 255, 0.24); }
.weather-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #ffb84d;
  box-shadow: 0 0 0 4px rgba(255, 184, 77, 0.18);
  flex-shrink: 0;
}

/* Weather widget — UMA cidade, design minimalista */
.weather-strip {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.weather-single {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px 5px 10px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.08);
  color: #FFFFFF;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.2;
  border: 1px solid rgba(255, 255, 255, 0.10);
  cursor: pointer;
  font-family: inherit;
  letter-spacing: -0.005em;
  transition: background var(--transition), border-color var(--transition);
}
.weather-single:hover { background: rgba(255, 255, 255, 0.14); border-color: rgba(255, 255, 255, 0.16); }
.weather-single .city { font-weight: 500; opacity: 0.92; }
.weather-single .temp { font-weight: 700; font-variant-numeric: tabular-nums; }
.weather-single .icon { font-size: 14px; line-height: 1; }
.weather-single.weather-loading { opacity: 0.65; font-weight: 500; cursor: default; }

/* Weather no HEADER — chip minúsculo: APENAS temperatura (sem ícone, sem cidade) */
.header .weather-strip {
  display: inline-flex !important;
  align-items: center;
  flex-shrink: 0;
}
/* Placeholder discreto enquanto o JS não responde */
.header .weather-strip:empty::before {
  content: "—°";
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  font-size: 12.5px;
  font-weight: 600;
  color: rgba(255,255,255,.55);
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 999px;
  min-height: 28px;
  font-variant-numeric: tabular-nums;
}
.header .weather-single {
  padding: 4px 12px;
  font-size: 13px;
  gap: 0;
  min-height: 28px;
}
.header .weather-single .city,
.header .weather-single .icon { display: none; }
.header .weather-single .temp { font-weight: 700; font-variant-numeric: tabular-nums; }
.header .weather-fresh { display: none; }

/* Focus rings consistentes (acessibilidade) — laranja Apple, 3px halo */
:focus { outline: none; }
button:focus-visible,
a:focus-visible,
[role="button"]:focus-visible,
[tabindex]:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(255, 159, 10, 0.32);
  transition: box-shadow .12s var(--ease-out);
}
/* Inputs e selects nativos já têm focus ring laranja em :focus (definido acima) */

/* Microinterações globais — botões reagem ao premir */
button:active:not(:disabled) { transform: translateY(.5px); }
.weather-fresh {
  font-size: 11.5px;
  color: rgba(255,255,255,.6);
  letter-spacing: -0.005em;
}

/* Popover do picker — Apple-style com glass effect */
.weather-picker {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 220px;
  background: rgba(28, 28, 32, 0.92);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: var(--r-md);
  box-shadow: 0 16px 40px rgba(0,0,0,.45), 0 2px 8px rgba(0,0,0,.20);
  padding: 6px;
  z-index: 1000;
  animation: weatherPickerIn .16s var(--ease-out);
}
@keyframes weatherPickerIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.weather-picker-header {
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: rgba(255,255,255,.6);
  padding: 8px 12px 6px;
}
.weather-picker-sep {
  height: 1px;
  background: rgba(255,255,255,.08);
  margin: 4px 8px;
}
.weather-picker-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 12px;
  background: transparent;
  border: none;
  border-radius: 8px;
  color: rgba(255,255,255,.88);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  letter-spacing: -0.005em;
  transition: background var(--transition);
}
.weather-picker-item:hover { background: rgba(255,255,255,.06); color: #FFFFFF; }
.weather-picker-item.active { color: #FFFFFF; font-weight: 600; }
.weather-picker-item .dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: transparent;
  border: 1.5px solid rgba(255,255,255,.30);
  flex-shrink: 0;
  transition: background var(--transition), border-color var(--transition);
}
.weather-picker-item.active .dot { background: var(--accent); border-color: var(--accent); }

/* Status box no topo do picker — mostra cidade actual + fonte + coords */
.weather-picker-status {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 10px;
  padding: 10px 12px;
  margin-bottom: 6px;
}
.weather-picker-status-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 3px 0;
  font-size: 12px;
}
.weather-picker-status-row .lbl {
  color: rgba(255,255,255,.5);
  font-weight: 500;
  letter-spacing: -0.005em;
}
.weather-picker-status-row .val,
.weather-picker-status-row strong {
  color: rgba(255,255,255,.92);
  font-weight: 600;
  text-align: right;
  letter-spacing: -0.005em;
  max-width: 60%;
  word-break: break-word;
}

/* Avatar legacy do welcome — REMOVIDO (movido para .header-identity-photo) */
.welcome-avatar { display: none !important; }

@media (max-width: 720px) {
  .welcome-banner { padding: 18px 20px 16px; border-radius: var(--r-md); }
}

/* —— LEGACY: classes do design anterior, neutralizadas. ——
   Mantidas como no-op caso ainda exista markup antigo nalguma página. */
.welcome-banner h1 { margin: 0; line-height: 1.08; font-weight: 600; letter-spacing: -0.02em; color: #FFFFFF; }
.welcome-banner h1 .greeting { font-weight: 400; opacity: .62; margin-right: 4px; }
.welcome-banner h1 #welcomeName { font-weight: 600; }
.pending-line, .pending-icon, .pending-line.has-pending .pending-icon, .pending-line.all-clear .pending-icon { all: revert; }
.pending-action { background: #FFFFFF; color: #0F172A; border: none; border-radius: 10px; padding: 6px 14px; font-weight: 600; font-size: 13.5px; cursor: pointer; font-family: inherit; }
.process-note { display: none; }
.welcome-profile, .profile-avatar, .profile-text, .profile-label, .welcome-right { display: revert; }
.welcome-main { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-10); }
.avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }

/* KPI GRID */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-4);
  margin-bottom: var(--sp-6);
}
.kpi-card {
  background: var(--surface);
  border: 1px solid var(--border-light);
  border-radius: var(--r-lg);
  padding: var(--sp-5);
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: box-shadow var(--transition), transform var(--transition), border-color var(--transition);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
}
.kpi-card:hover { box-shadow: var(--shadow); transform: translateY(-1px); border-color: var(--border); }
.kpi-header { display: flex; align-items: center; justify-content: space-between; }
.kpi-icon {
  width: 36px; height: 36px;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px;
  color: var(--text-2);
  background: var(--surface-2);
}
.kpi-icon.blue   { background: rgba(10,132,255,.10);  color: #0A84FF; }
.kpi-icon.teal   { background: rgba(48,209,88,.12);   color: #30D158; }
.kpi-icon.amber  { background: rgba(255,159,10,.14);  color: #FF9F0A; }
.kpi-icon.purple { background: rgba(191,90,242,.12);  color: #BF5AF2; }
.kpi-icon.green  { background: rgba(48,209,88,.12);   color: #30D158; }
.kpi-icon.red    { background: rgba(255,69,58,.12);   color: #FF453A; }
.kpi-trend {
  font-size: 11px;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: var(--r-pill);
  letter-spacing: -0.005em;
}
.kpi-trend.up      { background: rgba(48,209,88,.12); color: #248A3D; }
.kpi-trend.down    { background: rgba(255,69,58,.12); color: #B91C1C; }
.kpi-trend.neutral { background: var(--surface-2);    color: var(--text-3); }
.kpi-value {
  font-size: 34px;
  font-weight: 600;
  color: var(--text-1);
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.kpi-label {
  font-size: 12.5px;
  color: var(--text-3);
  font-weight: 500;
  letter-spacing: -0.005em;
}
.kpi-bar {
  height: 4px;
  background: var(--border-light);
  border-radius: 99px;
  overflow: hidden;
}
.kpi-bar-fill {
  height: 100%;
  border-radius: 99px;
  transition: width .6s ease;
}

/* KPIs minimalistas — consulta-pagamentos (info secundaria, ocupa pouquissimo espaco) */
#page-consulta-pagamentos .kpi-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  margin-bottom: 12px !important;
}
#page-consulta-pagamentos .kpi-card {
  padding: 4px 10px;
  gap: 6px;
  flex-direction: row;
  align-items: baseline;
  background: var(--surface-2);
  border: none;
  box-shadow: none;
  border-radius: var(--r-pill);
  cursor: default;
  flex: 0 0 auto;
  animation: none;
}
#page-consulta-pagamentos .kpi-card:hover {
  transform: none;
  box-shadow: none;
}
/* Esconder icones e etiquetas coloridas — ruido visual */
#page-consulta-pagamentos .kpi-icon,
#page-consulta-pagamentos .kpi-trend,
#page-consulta-pagamentos .kpi-bar { display: none; }
#page-consulta-pagamentos .kpi-header {
  margin: 0;
  padding: 0;
  display: contents;
}
#page-consulta-pagamentos .kpi-value {
  font-size: 13px !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  order: 1;
}
#page-consulta-pagamentos .kpi-label {
  font-size: 10px !important;
  font-weight: 500 !important;
  text-transform: uppercase;
  letter-spacing: .3px;
  color: var(--text-3);
  white-space: nowrap;
  order: 2;
}
/* Tabela densa estilo Excel — ver muitas linhas de uma vez */
#page-consulta-pagamentos { max-width: none; }
#page-consulta-pagamentos .data-table { font-size: 12.5px; }
#page-consulta-pagamentos .data-table tbody td { padding: 3px 10px !important; line-height: 1.3; }
#page-consulta-pagamentos .data-table thead th { padding: 7px 10px !important; }
/* truncar texto longo (nome de fornecedor/descricao) numa unica linha */
#page-consulta-pagamentos .data-table td .cell-trunc {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.main { min-width: 0; overflow-x: hidden; }

/* DASHBOARD GRID */
.dash-grid {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 20px;
  margin-bottom: 24px;
}
.dash-grid-full {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

/* QUICK ACTIONS */
.quick-actions {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 24px;
}
.quick-action {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
  cursor: pointer;
  transition: all var(--transition);
  box-shadow: var(--shadow-sm);
}
.quick-action:hover { box-shadow: var(--shadow); transform: translateY(-2px); border-color: var(--brand); }
.quick-action-icon {
  width: 48px; height: 48px;
  border-radius: var(--radius);
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
}
.quick-action span { font-size: 12.5px; font-weight: 600; color: var(--text-2); }

/* SECTION HEADER */
.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}
.section-header h3 { font-size: 16px; font-weight: 600; color: var(--text-1); letter-spacing: -0.015em; }
.section-header a, .btn-text {
  font-size: 13px;
  color: var(--text-1);
  font-weight: 600;
  cursor: pointer;
  letter-spacing: -0.005em;
  border-bottom: 1px solid transparent;
  transition: opacity var(--transition), border-color var(--transition);
}
.section-header a:hover, .btn-text:hover { opacity: .7; }

/* REQUESTS LIST */
.request-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid var(--border-light);
}
.request-item:last-child { border-bottom: none; }
.request-icon {
  width: 38px; height: 38px;
  border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
}
.request-info { flex: 1; min-width: 0; }
.request-info strong { font-size: 13px; font-weight: 600; display: block; color: var(--text-1); }
.request-info span { font-size: 11.5px; color: var(--text-3); }
.status-badge {
  font-size: 11px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: var(--r-pill);
  white-space: nowrap;
  letter-spacing: -0.005em;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.status-badge.pending    { background: rgba(255,159,10,.14); color: #B45309; }
.status-badge.approved   { background: rgba(48,209,88,.14);  color: #228B3D; }
.status-badge.rejected   { background: rgba(255,69,58,.14);  color: #C82E26; }
.status-badge.processing { background: rgba(10,132,255,.12); color: #0A6BD0; }

/* ANNOUNCEMENTS CARD */
.announce-item {
  display: flex;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid var(--border-light);
  cursor: pointer;
}
.announce-item:last-child { border-bottom: none; }
.announce-item:hover .announce-title { color: var(--text-1); opacity: .75; }
.announce-thumb {
  width: 52px; height: 52px;
  border-radius: var(--radius-sm);
  object-fit: cover;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
}
.announce-body { flex: 1; min-width: 0; }
.announce-tag {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent);
  margin-bottom: 3px;
}
.announce-title { font-size: 13px; font-weight: 600; color: var(--text-1); margin-bottom: 3px; transition: color var(--transition); }
.announce-date { font-size: 11px; color: var(--text-4); }

/* BIRTHDAYS */
.birthday-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border-light);
}
.birthday-item:last-child { border-bottom: none; }
.birthday-avatar {
  width: 36px; height: 36px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 600;
  color: #fff;
  flex-shrink: 0;
}
.birthday-info { flex: 1; }
.birthday-info strong { font-size: 13px; font-weight: 600; display: block; }
.birthday-info span { font-size: 11.5px; color: var(--text-3); }
.birthday-date {
  font-size: 11.5px;
  font-weight: 600;
  color: #B45309;
  background: rgba(255,159,10,.14);
  padding: 3px 9px;
  border-radius: var(--r-pill);
  letter-spacing: -0.005em;
}

/* CALENDAR MINI */
.mini-calendar { padding: 4px; }
.cal-header { display: flex; align-items: center; justify-content: space-between; padding: 8px 4px 12px; }
.cal-header h4 { font-size: 13.5px; font-weight: 700; }
.cal-nav { display: flex; gap: 4px; }
.cal-nav button {
  width: 28px; height: 28px;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--text-3);
  font-size: 14px;
  display: flex; align-items: center; justify-content: center;
  transition: all var(--transition);
}
.cal-nav button:hover { background: var(--surface-2); color: var(--text-1); }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.cal-day-name { text-align: center; font-size: 10px; font-weight: 600; color: var(--text-4); padding: 4px 0; text-transform: uppercase; }
.cal-day {
  text-align: center;
  font-size: 12px;
  padding: 6px 4px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all var(--transition);
  color: var(--text-2);
}
.cal-day:hover { background: var(--surface-2); }
.cal-day.today { background: #0F172A; color: #FFFFFF; font-weight: 600; }
.cal-day.has-event { position: relative; }
.cal-day.has-event::after {
  content: '';
  position: absolute;
  bottom: 2px; left: 50%;
  transform: translateX(-50%);
  width: 4px; height: 4px;
  background: var(--accent);
  border-radius: 50%;
}
.cal-day.other-month { color: var(--text-4); }
.cal-day.event-day { background: rgba(15,23,42,.05); color: var(--text-1); font-weight: 600; }

/* ============================================================
   PAGE: FORMS (FÉRIAS, FOLGAS, HORAS EXTRAS)
   ============================================================ */
.form-layout {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 24px;
}
.form-card { padding: 28px; }
.form-title { font-size: 18px; font-weight: 700; color: var(--text-1); margin-bottom: 4px; }
.form-subtitle { font-size: 13px; color: var(--text-3); margin-bottom: 28px; }

.form-row { display: grid; gap: 16px; margin-bottom: 20px; }
.form-row.cols-2 { grid-template-columns: 1fr 1fr; }
.form-row.cols-3 { grid-template-columns: 1fr 1fr 1fr; }

.form-group { display: flex; flex-direction: column; gap: 6px; }
.form-label { font-size: 12.5px; font-weight: 600; color: var(--text-2); letter-spacing: -0.005em; }
.form-label .req { color: var(--red); margin-left: 2px; }

.form-input {
  height: 42px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 0 14px;
  font-size: 14px;
  color: var(--text-1);
  outline: none;
  transition: border-color var(--transition), box-shadow var(--transition), background var(--transition);
  width: 100%;
  font-family: inherit;
  letter-spacing: -0.005em;
}
.form-input:focus { border-color: rgba(255,159,10,.65); box-shadow: 0 0 0 3px rgba(255,159,10,.18); }
.form-input::placeholder { color: var(--text-4); }

.form-select {
  height: 42px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 0 38px 0 14px;
  font-size: 14px;
  color: var(--text-1);
  outline: none;
  transition: border-color var(--transition), box-shadow var(--transition), background var(--transition);
  width: 100%;
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236E6E73' stroke-width='2.2' stroke-linecap='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  font-family: inherit;
  letter-spacing: -0.005em;
}
.form-select:focus { border-color: rgba(255,159,10,.65); box-shadow: 0 0 0 3px rgba(255,159,10,.18); }

.form-textarea {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 12px 14px;
  font-size: 14px;
  color: var(--text-1);
  outline: none;
  transition: border-color var(--transition), box-shadow var(--transition);
  width: 100%;
  resize: vertical;
  min-height: 100px;
  font-family: inherit;
  letter-spacing: -0.005em;
  line-height: 1.5;
}
.form-textarea:focus { border-color: rgba(255,159,10,.65); box-shadow: 0 0 0 3px rgba(255,159,10,.18); }
.form-textarea::placeholder { color: var(--text-4); }

.upload-area {
  border: 1.5px dashed var(--border-strong);
  border-radius: var(--r-md);
  padding: 28px;
  text-align: center;
  cursor: pointer;
  transition: border-color var(--transition), background var(--transition);
  background: var(--surface);
}
.upload-area:hover { border-color: var(--accent); background: rgba(255,159,10,.04); }
.upload-area .upload-icon { font-size: 28px; margin-bottom: 8px; }
.upload-area p { font-size: 13px; color: var(--text-3); }
.upload-area strong { color: var(--text-1); }

.form-divider { border: none; border-top: 1px solid var(--border-light); margin: 24px 0; }

/* DAYS COUNTER — neutro Apple */
.days-counter {
  background: var(--surface-2);
  border: 1px solid var(--border-light);
  border-radius: var(--r-md);
  padding: 20px;
  text-align: center;
  margin-bottom: 20px;
}
.days-number {
  font-size: 48px;
  font-weight: 600;
  color: var(--text-1);
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.days-label {
  font-size: 12px;
  color: var(--text-3);
  font-weight: 500;
  margin-top: 4px;
  letter-spacing: -0.005em;
}

/* TIMELINE */
.timeline { padding: 4px 0; }
.timeline-item { display: flex; gap: 12px; padding: 0 0 20px; position: relative; }
.timeline-item:last-child { padding-bottom: 0; }
.timeline-item::before {
  content: '';
  position: absolute;
  left: 15px; top: 32px;
  width: 2px;
  bottom: 0;
  background: var(--border);
}
.timeline-item:last-child::before { display: none; }
.timeline-dot {
  width: 32px; height: 32px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}
.timeline-content { flex: 1; padding-top: 4px; }
.timeline-content strong { font-size: 13px; font-weight: 600; display: block; color: var(--text-1); }
.timeline-content span { font-size: 11.5px; color: var(--text-3); }

/* SIDEBAR INFO CARD */
.info-card { padding: 20px; margin-bottom: 16px; }
.info-card h4 { font-size: 13px; font-weight: 700; color: var(--text-1); margin-bottom: 14px; }
.info-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid var(--border-light);
}
.info-row:last-child { border-bottom: none; }
.info-row span:first-child { font-size: 12.5px; color: var(--text-3); }
.info-row span:last-child { font-size: 13px; font-weight: 600; color: var(--text-1); }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border-radius: 10px;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  transition: transform var(--transition), opacity var(--transition), background var(--transition), box-shadow var(--transition);
  border: 1px solid transparent;
  white-space: nowrap;
  letter-spacing: -0.005em;
  font-family: inherit;
}
/* Botão primário Apple: pill preta (chrome dark) com lift no hover */
.btn-primary {
  background: #0F172A;
  color: #FFFFFF;
  box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 4px 12px rgba(15,23,42,.18);
}
.btn-primary:hover  { background: #1E293B; transform: translateY(-1px); box-shadow: 0 2px 4px rgba(0,0,0,.06), 0 8px 20px rgba(15,23,42,.22); }
.btn-primary:active { transform: translateY(0); }
.btn-secondary {
  background: var(--surface);
  color: var(--text-1);
  border-color: var(--border);
  box-shadow: var(--shadow-sm);
}
.btn-secondary:hover { background: var(--surface-2); border-color: var(--border-strong); }
.btn-ghost {
  background: transparent;
  color: var(--text-2);
}
.btn-ghost:hover { background: var(--surface-2); color: var(--text-1); }
.btn-danger {
  background: var(--red);
  color: #fff;
  box-shadow: 0 4px 14px rgba(255,69,58,.22);
}
.btn-danger:hover { background: #E53935; transform: translateY(-1px); }
.btn-success {
  background: var(--green);
  color: #fff;
  box-shadow: 0 4px 14px rgba(48,209,88,.22);
}
.btn-sm { padding: 7px 14px; font-size: 12.5px; border-radius: 8px; }
.btn-lg { padding: 13px 26px; font-size: 15px; border-radius: 12px; }

.form-actions { display: flex; gap: 12px; justify-content: flex-end; padding-top: 8px; }

/* ============================================================
   PAGE: HISTÓRICO (TABLE)
   ============================================================ */
.filter-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}
.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: var(--r-pill);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid var(--border);
  color: var(--text-2);
  background: var(--surface);
  transition: background var(--transition), border-color var(--transition), color var(--transition);
  letter-spacing: -0.005em;
  font-family: inherit;
}
.filter-chip:hover { background: var(--surface-2); border-color: var(--border-strong); color: var(--text-1); }
.filter-chip.active { background: #0F172A; color: #FFFFFF; border-color: #0F172A; }

.data-table { width: 100%; border-collapse: collapse; }
.data-table th {
  text-align: left;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-3);
  padding: 14px 20px;
  border-bottom: 1px solid var(--border-light);
  white-space: nowrap;
}
.data-table td {
  padding: 14px 20px;
  font-size: 13.5px;
  color: var(--text-1);
  border-bottom: 1px solid var(--border-light);
  letter-spacing: -0.005em;
}
.data-table tr:last-child td { border-bottom: none; }
.data-table tr:hover td { background: var(--surface-2); }

/* ============================================================
   PAGE: ANÚNCIOS
   ============================================================ */
.announce-hero {
  background: #0F172A;
  border-radius: var(--r-xl);
  padding: 32px;
  color: #fff;
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  gap: 24px;
  position: relative;
  overflow: hidden;
}
.announce-hero::before {
  content: '📢';
  position: absolute;
  right: 32px;
  font-size: 80px;
  opacity: .15;
}
.announce-hero-content { flex: 1; }
.announce-hero span { font-size: 12px; opacity: .8; display: block; margin-bottom: 6px; }
.announce-hero h2 { font-size: 22px; font-weight: 700; margin-bottom: 6px; }
.announce-hero p { font-size: 13.5px; opacity: .8; }

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

/* Diretório */
.dir-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
}
.dir-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px;
  display: flex;
  gap: 14px;
  align-items: center;
  transition: all var(--transition);
  box-shadow: var(--shadow-sm);
}
.dir-card:hover { transform: translateY(-1px); box-shadow: 0 8px 24px rgba(0,0,0,.06); border-color: var(--border-strong); }
.dir-photo {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #0F172A;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 700;
  flex-shrink: 0;
  overflow: hidden;
  position: relative;
}
.dir-photo img { width: 100%; height: 100%; object-fit: cover; }
.dir-info { flex: 1; min-width: 0; }
.dir-name { font-weight: 700; font-size: 14.5px; color: var(--text-1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dir-role { font-size: 12.5px; color: var(--text-3); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dir-sector { font-size: 11.5px; color: var(--text-4); margin-top: 4px; display: inline-block; padding: 2px 8px; background: var(--surface-2); border-radius: 10px; }
.dir-actions { display: flex; gap: 6px; margin-top: 10px; }
.dir-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 10px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 11.5px;
  color: var(--text-2);
  text-decoration: none;
  transition: all .15s;
  cursor: pointer;
  font-family: inherit;
}
.dir-action-btn:hover { background: var(--surface-2); color: var(--text-1); border-color: var(--border-strong); }

/* Próximas Acções */
.acao-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: var(--surface-2);
  border-radius: 10px;
  border-left: 4px solid var(--brand);
  cursor: pointer;
  transition: all .15s;
}
.acao-item:hover { background: var(--brand-light); transform: translateX(2px); }
.acao-icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}
.acao-body { flex: 1; min-width: 0; }
.acao-title { font-weight: 600; font-size: 13.5px; color: var(--text-1); }
.acao-meta { font-size: 11.5px; color: var(--text-3); margin-top: 2px; }
.acao-arrow { color: var(--text-4); font-size: 16px; }
.announce-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  cursor: pointer;
  transition: all var(--transition);
  box-shadow: var(--shadow-sm);
}
.announce-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-3px); }
.announce-card-banner {
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 48px;
  position: relative;
  overflow: hidden;
}
.announce-card-body { padding: 18px; }
.announce-card-tag {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .6px;
  margin-bottom: 6px;
}
.announce-card-title { font-size: 14px; font-weight: 700; color: var(--text-1); margin-bottom: 6px; line-height: 1.4; }
.announce-card-text { font-size: 12.5px; color: var(--text-3); line-height: 1.5; margin-bottom: 12px; }
.announce-card-footer { display: flex; align-items: center; justify-content: space-between; }
.announce-card-footer span { font-size: 11.5px; color: var(--text-4); }

/* ============================================================
   PAGE: HORAS EXTRAS – ANALYTICS
   ============================================================ */
.analytics-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 16px;
  margin-bottom: 24px;
}
.chart-bar-container { padding: 20px; }
.chart-bars {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  height: 120px;
  margin-top: 16px;
}
.chart-bar-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  height: 100%;
  justify-content: flex-end;
}
.chart-bar {
  width: 100%;
  border-radius: 6px 6px 0 0;
  transition: height .6s ease;
  min-height: 4px;
  cursor: pointer;
}
.chart-bar:hover { filter: brightness(1.1); }
.chart-bar-label { font-size: 10px; color: var(--text-4); font-weight: 500; }
.chart-bar-val { font-size: 10px; color: var(--text-3); font-weight: 600; }

/* ============================================================
   MOBILE MENU TOGGLE
   ============================================================ */
.mobile-toggle {
  display: none;
  width: 36px; height: 36px;
  border-radius: var(--radius-sm);
  align-items: center; justify-content: center;
  color: var(--text-3);
  cursor: pointer;
  transition: all var(--transition);
}
.mobile-toggle:hover { background: var(--surface-2); }

.overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.4);
  z-index: 150;
  backdrop-filter: blur(2px);
}

/* ============================================================
   NOTIFICATIONS PANEL
   ============================================================ */
.notif-panel {
  position: fixed;
  top: var(--header-h);
  right: 0;
  width: 360px;
  height: calc(100vh - var(--header-h));
  background: var(--surface);
  border-left: 1px solid var(--border);
  z-index: 300;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform var(--transition);
  box-shadow: var(--shadow-lg);
}
.notif-panel.open { transform: translateX(0); }
.notif-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.notif-panel-header h3 { font-size: 15px; font-weight: 700; }
.notif-list { flex: 1; overflow-y: auto; }
.notif-item {
  display: flex;
  gap: 12px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border-light);
  cursor: pointer;
  transition: background var(--transition);
  position: relative;
}
.notif-item:hover { background: var(--surface-2); }
.notif-item.unread::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--accent);
  border-radius: 0 2px 2px 0;
}
.notif-item-icon {
  width: 38px; height: 38px;
  border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
}
.notif-item-body { flex: 1; }
.notif-item-body strong { font-size: 13px; font-weight: 600; display: block; color: var(--text-1); margin-bottom: 2px; }
.notif-item-body p { font-size: 12px; color: var(--text-3); line-height: 1.4; }
.notif-item-body time { font-size: 11px; color: var(--text-4); display: block; margin-top: 4px; }

/* ============================================================
   EMPTY STATE
   ============================================================ */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--sp-12) var(--sp-5);
  text-align: center;
  color: var(--text-3);
  position: relative;
}
.empty-state::before {
  /* Toque de identidade Vumba: gota subtil em azul-água */
  content: "";
  width: 48px; height: 48px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, rgba(0,120,212,.16), rgba(0,178,148,.10) 60%, transparent 70%);
  margin-bottom: var(--sp-5);
}
.empty-state .empty-icon { font-size: 32px; margin-bottom: var(--sp-4); opacity: .7; }
.empty-state h4 {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-1);
  margin-bottom: 6px;
  letter-spacing: -0.015em;
}
.empty-state p {
  font-size: 13px;
  max-width: 320px;
  line-height: 1.5;
  letter-spacing: -0.005em;
  color: var(--text-3);
}

/* ============================================================
   PROGRESS / STEPS
   ============================================================ */
.steps {
  display: flex;
  align-items: center;
  gap: 0;
  margin-bottom: 28px;
}
.step {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
}
.step:last-child { flex: none; }
.step-dot {
  width: 28px; height: 28px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px;
  font-weight: 700;
  border: 2px solid var(--border);
  background: var(--surface);
  color: var(--text-4);
  flex-shrink: 0;
  transition: all var(--transition);
}
.step.done .step-dot { background: var(--green); border-color: var(--green); color: #fff; }
.step.active .step-dot { background: #0F172A; border-color: #0F172A; color: #fff; }
.step-label { font-size: 12px; font-weight: 500; color: var(--text-4); white-space: nowrap; letter-spacing: -0.005em; }
.step.active .step-label { color: var(--text-1); font-weight: 600; }
.step.done .step-label { color: var(--green); }
.step-line { flex: 1; height: 2px; background: var(--border-light); margin: 0 4px; }
.step.done + .step .step-line,
.step-line.done { background: var(--green); }

/* ============================================================
   TOOLTIP
   ============================================================ */
[data-tooltip] { position: relative; }
[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--text-1);
  color: var(--surface);
  font-size: 11.5px;
  font-weight: 500;
  padding: 5px 10px;
  border-radius: 6px;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity .15s;
  z-index: 999;
}
[data-tooltip]:hover::after { opacity: 1; }

/* ============================================================
   RESPONSIVE — Mobile-first sweep (Fase 4D)
   Safe areas, drawer iOS rubber-band, touch targets ≥44px, bottom sheets.
   ============================================================ */

/* Safe area insets — notch iPhone, gesture bar Android */
@supports (padding-top: env(safe-area-inset-top)) {
  .header { padding-top: env(safe-area-inset-top); height: calc(var(--header-h) + env(safe-area-inset-top)); }
  .main   { padding-bottom: env(safe-area-inset-bottom); }
  .sidebar { padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom); }
}

/* Sidebar drawer — transition iOS rubber-band + viewport dvh em mobile */
.sidebar {
  transition: transform .42s cubic-bezier(0.32, 0.72, 0, 1);
}
@supports (height: 100dvh) {
  /* dvh = dynamic viewport height — resolve o problema da address bar do iOS Safari */
  .sidebar { height: 100dvh; }
  .modal-shell { height: 100dvh; }
  [id="loginOverlay"] { height: 100dvh !important; }
}

@media (max-width: 1024px) {
  .kpi-grid { grid-template-columns: repeat(2, 1fr); }
  .dash-grid { grid-template-columns: 1fr; }
  .announce-grid { grid-template-columns: repeat(2, 1fr); }
  .analytics-grid { grid-template-columns: 1fr 1fr; }
  .form-layout { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  :root { --sidebar-w: 300px; }   /* mais largo no drawer p/ touch confortável */
  .sidebar { transform: translateX(-100%); box-shadow: 0 24px 60px rgba(0,0,0,.42); }
  .sidebar.open { transform: translateX(0); }
  .overlay.open { display: block; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); background: rgba(0,0,0,.4); }
  .header { left: 0; padding: 0 16px; }
  .mobile-toggle { display: flex; }
  .main { margin-left: 0; padding: 0; }
  .page { padding: 16px 16px 80px; }   /* extra bottom para safe area + CTAs fixos */
  .kpi-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .quick-actions { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .quick-action { padding: 14px 8px; min-height: 64px; }
  .quick-action-icon { width: 40px; height: 40px; font-size: 18px; }
  .announce-grid { grid-template-columns: 1fr; }
  .analytics-grid { grid-template-columns: 1fr; }
  .form-row.cols-2 { grid-template-columns: 1fr; }
  .form-row.cols-3 { grid-template-columns: 1fr; }
  .welcome-banner { padding: 22px; }
  .welcome-right { display: none; }
  .search-bar { display: none; }
  .notif-panel { width: 100%; }
  .steps { overflow-x: auto; }
  .header-title p { display: none; }
  /* Touch targets ≥ 44×44px (Apple HIG / WCAG 2.5.5) */
  .nav-item { min-height: 44px; padding: 10px 14px; }
  .btn, button.btn-primary, button.btn-secondary { min-height: 44px; }
  .form-input, .form-select { height: 46px; }
  .icon-btn { min-width: 44px; min-height: 44px; }
  .filter-chip { min-height: 36px; padding: 9px 14px; }
  /* Welcome banner: tipografia mais compacta em mobile */
  .welcome-greeting { font-size: 26px; }
  .welcome-action { font-size: 14px; padding: 10px 6px 10px 14px; }
  .welcome-action .cta { padding: 8px 14px; font-size: 13px; min-height: 36px; }
  /* Diário de visitas: empilhar Data+Vendedor em telefone para evitar sobreposição */
  .cobranca-row-data-vend { grid-template-columns: 1fr !important; }
}

/* BOTTOM SHEETS — modais subir do fundo em mobile (iOS-style) */
@media (max-width: 640px) {
  /* Overlay genérico de modais: alinhar no fundo, sem padding lateral */
  [id$="Modal"][style*="position:fixed"],
  [id$="modal"][style*="position:fixed"] {
    align-items: flex-end !important;
    padding: 0 !important;
  }
  /* O painel interior (1º div filho do overlay) ganha aspeto de bottom sheet */
  [id$="Modal"][style*="position:fixed"] > div:first-child,
  [id$="modal"][style*="position:fixed"] > div:first-child {
    width: 100% !important;
    max-width: 100% !important;
    max-height: 92vh !important;
    border-radius: 22px 22px 0 0 !important;
    animation: bottomSheetIn .42s cubic-bezier(0.32, 0.72, 0, 1) both;
    padding-bottom: env(safe-area-inset-bottom) !important;
  }
}
@keyframes bottomSheetIn {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}

/* Bottom sheet grabber — indicador visual de "puxar" (estilo iOS) */
@media (max-width: 640px) {
  [id$="Modal"][style*="position:fixed"] > div:first-child::before,
  [id$="modal"][style*="position:fixed"] > div:first-child::before {
    content: "";
    position: absolute;
    top: 8px; left: 50%;
    transform: translateX(-50%);
    width: 36px; height: 4px;
    border-radius: 2px;
    background: rgba(0,0,0,.18);
    z-index: 10;
    pointer-events: none;
  }
}

/* ============================================================
   ANIMATIONS
   ============================================================ */
@keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes slideIn { from { opacity: 0; transform: translateX(12px); } to { opacity: 1; transform: translateX(0); } }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .5; } }
@keyframes spin { to { transform: rotate(360deg); } }

.page.active { animation: fadeIn .25s ease; }
.kpi-card { animation: fadeIn .3s ease both; }
.kpi-card:nth-child(1) { animation-delay: .05s; }
.kpi-card:nth-child(2) { animation-delay: .10s; }
.kpi-card:nth-child(3) { animation-delay: .15s; }
.kpi-card:nth-child(4) { animation-delay: .20s; }

/* ============================================================
   DARK MODE FORM INPUTS
   ============================================================ */
[data-theme="dark"] .form-input,
[data-theme="dark"] .form-select,
[data-theme="dark"] .form-textarea {
  background: var(--surface-2);
  color: var(--text-1);
}
[data-theme="dark"] .form-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2394A3B8' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
}
[data-theme="dark"] .data-table tr:hover td { background: var(--surface-2); }
[data-theme="dark"] .upload-area { background: var(--surface-2); }
  /* (Bloco de animações do chat removido — função de chat eliminada do portal) */

/* ============================================================
   COMMAND PALETTE — Assistente Operacional
   Inspirado em Apple Spotlight / Raycast / Linear Cmd Menu
   ============================================================ */

/* (Trigger no header não precisa de marker — usa o estilo base de .search-bar) */

/* Body lock quando palette aberta */
body.cmdp-locked { overflow: hidden; }

/* Overlay */
.cmdp-overlay {
  position: fixed; inset: 0;
  z-index: 10000;
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding-top: clamp(60px, 12vh, 120px);
}
.cmdp-overlay.open { display: flex; }

.cmdp-backdrop {
  position: absolute; inset: 0;
  background: rgba(15, 23, 42, 0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  animation: cmdpFadeIn 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes cmdpFadeIn { from { opacity: 0; } to { opacity: 1; } }

/* Painel central — Apple Spotlight look */
.cmdp-panel {
  position: relative;
  width: min(680px, calc(100vw - 32px));
  max-height: min(620px, calc(100vh - 200px));
  background: var(--surface-1, #FFFFFF);
  border: 1px solid var(--border, rgba(0,0,0,.08));
  border-radius: 16px;
  box-shadow:
    0 20px 60px rgba(0, 0, 0, 0.25),
    0 8px 24px rgba(0, 0, 0, 0.12),
    inset 0 0 0 1px rgba(255, 255, 255, 0.5);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  animation: cmdpRise 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes cmdpRise {
  from { opacity: 0; transform: translateY(8px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0)   scale(1); }
}

/* Input row */
.cmdp-input-row {
  display: flex; align-items: center; gap: 10px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--border-light, rgba(0,0,0,.06));
  background: var(--surface-1, #FFFFFF);
}
.cmdp-input-icon { color: var(--text-3, #6B7280); flex-shrink: 0; }
#cmdpInput {
  flex: 1;
  border: none;
  background: none;
  outline: none;
  font-size: 17px;
  font-weight: 500;
  color: var(--text-1, #1D1D1F);
  letter-spacing: -0.01em;
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', system-ui, sans-serif;
  padding: 2px 0;
}
#cmdpInput::placeholder { color: var(--text-3, #9CA3AF); font-weight: 400; }
.cmdp-close {
  background: var(--surface-2, #F3F4F6);
  border: 1px solid var(--border-light, rgba(0,0,0,.08));
  color: var(--text-2, #4B5563);
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.4px;
  padding: 4px 8px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s ease;
}
.cmdp-close:hover { background: var(--surface-3, #E5E7EB); color: var(--text-1, #1D1D1F); }

/* Body */
.cmdp-body {
  flex: 1;
  overflow-y: auto;
  padding: 12px 8px 16px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
.cmdp-body::-webkit-scrollbar { width: 8px; }
.cmdp-body::-webkit-scrollbar-track { background: transparent; }
.cmdp-body::-webkit-scrollbar-thumb { background: var(--border, rgba(0,0,0,.12)); border-radius: 4px; }
.cmdp-body::-webkit-scrollbar-thumb:hover { background: var(--border-strong, rgba(0,0,0,.20)); }

.cmdp-greeting {
  font-size: 18px;
  font-weight: 600;
  color: var(--text-1, #1D1D1F);
  letter-spacing: -0.015em;
  padding: 6px 12px 14px;
}

.cmdp-section-title {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--text-3, #9CA3AF);
  padding: 14px 12px 6px;
}

.cmdp-list { display: flex; flex-direction: column; gap: 1px; padding: 0 2px; }

.cmdp-row {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  cursor: pointer;
  user-select: none;
  transition: background 0.12s ease;
  outline: none;
}
.cmdp-row.selected,
.cmdp-row:hover {
  background: var(--accent-soft, rgba(255, 159, 10, 0.12));
}
.cmdp-row.selected .cmdp-row-enter { opacity: 1; transform: translateX(0); }

.cmdp-row-icon {
  width: 36px; height: 36px;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--surface-2, #F3F4F6);
  border-radius: 9px;
  font-size: 18px;
  line-height: 1;
}
.cmdp-row.selected .cmdp-row-icon { background: rgba(255, 159, 10, 0.20); }

.cmdp-row-text {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; gap: 2px;
}
.cmdp-row-label {
  font-size: 14px; font-weight: 600;
  color: var(--text-1, #1D1D1F);
  letter-spacing: -0.005em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cmdp-row-sub {
  font-size: 12.5px;
  color: var(--text-3, #6B7280);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cmdp-row-meta {
  flex-shrink: 0;
  font-size: 12px; font-weight: 600;
  padding: 3px 8px;
  border-radius: 6px;
  background: var(--surface-2, #F3F4F6);
  color: var(--text-2, #4B5563);
  font-variant-numeric: tabular-nums;
}
.cmdp-meta-urgent   { background: rgba(255, 69, 58, 0.12);  color: #C81E1E; }
.cmdp-meta-warn     { background: rgba(255, 214, 10, 0.16); color: #92400E; }
.cmdp-meta-success  { background: rgba(48, 209, 88, 0.14);  color: #047857; }

.cmdp-row-enter {
  font-size: 13px;
  color: var(--text-3, #9CA3AF);
  opacity: 0;
  transform: translateX(-6px);
  transition: all 0.15s ease;
  flex-shrink: 0;
}

/* Quick actions grid */
.cmdp-quick {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  padding: 4px 4px;
}
.cmdp-quick-btn {
  display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
  padding: 12px 14px;
  background: var(--surface-1, #FFFFFF);
  border: 1px solid var(--border-light, rgba(0,0,0,.08));
  border-radius: 10px;
  cursor: pointer;
  text-align: left;
  transition: all 0.15s cubic-bezier(0.16, 1, 0.3, 1);
}
.cmdp-quick-btn:hover {
  background: var(--accent-soft, rgba(255, 159, 10, 0.10));
  border-color: var(--accent, #FF9F0A);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(255, 159, 10, 0.12);
}
.cmdp-quick-icon { font-size: 18px; }
.cmdp-quick-label {
  font-size: 13px; font-weight: 600;
  color: var(--text-1, #1D1D1F);
  letter-spacing: -0.005em;
}
.cmdp-quick-sub {
  font-size: 11.5px;
  color: var(--text-3, #6B7280);
  letter-spacing: -0.002em;
}

/* Sugestões "Tente perguntar:" chips */
.cmdp-examples {
  display: flex; flex-wrap: wrap; gap: 6px;
  padding: 4px;
}
.cmdp-example-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 10px;
  background: var(--surface-2, #F3F4F6);
  border: 1px solid var(--border-light, rgba(0,0,0,.06));
  border-radius: 14px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text-2, #4B5563);
  cursor: pointer;
  transition: all 0.15s ease;
}
.cmdp-example-chip:hover {
  background: var(--accent-soft, rgba(255, 159, 10, 0.10));
  border-color: var(--accent, #FF9F0A);
  color: var(--text-1, #1D1D1F);
}
.cmdp-example-search { font-size: 10px; opacity: 0.55; }

/* No results */
.cmdp-no-results { padding: 40px 24px; text-align: center; }
.cmdp-no-results-icon { font-size: 32px; opacity: 0.4; margin-bottom: 8px; }
.cmdp-no-results-text { font-size: 14px; color: var(--text-2, #4B5563); margin-bottom: 4px; }
.cmdp-no-results-hint { font-size: 12.5px; color: var(--text-3, #9CA3AF); }

/* Foot */
.cmdp-foot {
  display: flex; align-items: center; gap: 14px;
  padding: 10px 16px;
  border-top: 1px solid var(--border-light, rgba(0,0,0,.06));
  background: var(--surface-2, #FAFAFA);
  font-size: 11px;
  color: var(--text-3, #9CA3AF);
}
.cmdp-foot-hint { display: inline-flex; align-items: center; gap: 4px; }
.cmdp-foot-hint kbd {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px;
  padding: 0 4px;
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, sans-serif;
  font-size: 10.5px; font-weight: 600;
  background: var(--surface-1, #FFFFFF);
  border: 1px solid var(--border, rgba(0,0,0,.10));
  border-radius: 4px;
  color: var(--text-2, #4B5563);
  box-shadow: 0 1px 0 rgba(0,0,0,.04);
}
.cmdp-foot-spacer { flex: 1; }
.cmdp-foot-count { font-weight: 600; color: var(--text-2, #4B5563); }

/* DARK THEME */
[data-theme="dark"] .cmdp-panel {
  background: #1C1C1E;
  border-color: rgba(255,255,255,.08);
  box-shadow: 0 20px 60px rgba(0,0,0,.45), 0 8px 24px rgba(0,0,0,.28),
              inset 0 0 0 1px rgba(255,255,255,.06);
}
[data-theme="dark"] .cmdp-input-row { background: #1C1C1E; border-bottom-color: rgba(255,255,255,.06); }
[data-theme="dark"] #cmdpInput { color: #F1F5F9; }
[data-theme="dark"] #cmdpInput::placeholder { color: rgba(241,245,249,.45); }
[data-theme="dark"] .cmdp-close { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.10); color: rgba(241,245,249,.78); }
[data-theme="dark"] .cmdp-close:hover { background: rgba(255,255,255,.14); color: #F1F5F9; }
[data-theme="dark"] .cmdp-row.selected,
[data-theme="dark"] .cmdp-row:hover { background: rgba(255,159,10,.14); }
[data-theme="dark"] .cmdp-row-icon { background: rgba(255,255,255,.06); }
[data-theme="dark"] .cmdp-row.selected .cmdp-row-icon { background: rgba(255,159,10,.22); }
[data-theme="dark"] .cmdp-row-label { color: #F1F5F9; }
[data-theme="dark"] .cmdp-row-sub { color: rgba(241,245,249,.55); }
[data-theme="dark"] .cmdp-row-meta { background: rgba(255,255,255,.06); color: rgba(241,245,249,.75); }
[data-theme="dark"] .cmdp-meta-urgent  { background: rgba(255,69,58,.20);  color: #FCA5A5; }
[data-theme="dark"] .cmdp-meta-warn    { background: rgba(255,214,10,.18); color: #FDE68A; }
[data-theme="dark"] .cmdp-meta-success { background: rgba(48,209,88,.20);  color: #6EE7B7; }
[data-theme="dark"] .cmdp-greeting { color: #F1F5F9; }
[data-theme="dark"] .cmdp-section-title { color: rgba(241,245,249,.45); }
[data-theme="dark"] .cmdp-quick-btn { background: #2C2C2E; border-color: rgba(255,255,255,.06); }
[data-theme="dark"] .cmdp-quick-btn:hover { background: rgba(255,159,10,.10); border-color: rgba(255,159,10,.40); }
[data-theme="dark"] .cmdp-quick-label { color: #F1F5F9; }
[data-theme="dark"] .cmdp-quick-sub { color: rgba(241,245,249,.55); }
[data-theme="dark"] .cmdp-example-chip { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.08); color: rgba(241,245,249,.75); }
[data-theme="dark"] .cmdp-example-chip:hover { background: rgba(255,159,10,.12); border-color: rgba(255,159,10,.40); color: #F1F5F9; }
[data-theme="dark"] .cmdp-foot { background: #18181A; border-top-color: rgba(255,255,255,.06); color: rgba(241,245,249,.45); }
[data-theme="dark"] .cmdp-foot-hint kbd { background: #2C2C2E; border-color: rgba(255,255,255,.10); color: rgba(241,245,249,.75); }
[data-theme="dark"] .cmdp-foot-count { color: rgba(241,245,249,.75); }
[data-theme="dark"] .cmdp-no-results-text { color: rgba(241,245,249,.65); }
[data-theme="dark"] .cmdp-no-results-hint { color: rgba(241,245,249,.45); }

/* MOBILE — bottom sheet */
@media (max-width: 640px) {
  .cmdp-overlay { padding-top: 0; align-items: stretch; }
  .cmdp-backdrop { backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
  .cmdp-panel {
    width: 100%;
    max-height: 100dvh;
    border-radius: 0;
    border: none;
    animation: cmdpRiseMobile 0.22s cubic-bezier(0.32, 0.72, 0, 1);
  }
  @keyframes cmdpRiseMobile {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  .cmdp-input-row { padding: 14px 14px; padding-top: max(14px, env(safe-area-inset-top)); }
  #cmdpInput { font-size: 16px; }   /* iOS — evita zoom no focus */
  .cmdp-quick { grid-template-columns: 1fr; }
  .cmdp-foot { padding-bottom: max(10px, env(safe-area-inset-bottom)); }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .cmdp-backdrop, .cmdp-panel { animation: none; }
  .cmdp-row, .cmdp-quick-btn, .cmdp-example-chip, .cmdp-close { transition: none; }
}

/* ============================================================
   PENDENTES CLIENTES — Resumo Executivo por Núcleo
   Substitui o KPI vazio "Documentos do Cliente" por uma vista
   de dívida total agregada por núcleo (6 depósitos de vendas).
   Independente do filtro de cliente.
   ============================================================ */
.pend-cli-resumo-card { padding: 20px 22px 18px; }
.pend-cli-resumo-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.pend-cli-resumo-title {
  margin: 0;
  font-size: 16px; font-weight: 700;
  color: var(--text-1, #1D1D1F);
  letter-spacing: -0.015em;
}
.pend-cli-resumo-sub {
  margin: 4px 0 0;
  font-size: 12.5px;
  color: var(--text-3, #6B7280);
}
.pend-cli-resumo-totalbox {
  display: flex; flex-direction: column; align-items: flex-end;
  padding: 10px 16px;
  background: rgba(255,159,10,0.10);
  border: 1px solid rgba(255,159,10,0.28);
  border-radius: 10px;
  min-width: 200px;
}
.pend-cli-resumo-totallbl {
  font-size: 10.5px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.6px;
  color: var(--text-3, #6B7280);
}
.pend-cli-resumo-totalvl {
  font-size: 22px; font-weight: 700;
  color: var(--text-1, #1D1D1F);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  margin-top: 2px;
}

.pend-cli-resumo-tablewrap {
  overflow-x: auto;
  border-radius: 10px;
  border: 1px solid var(--border-light, rgba(0,0,0,.06));
}
.pend-cli-resumo-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.pend-cli-resumo-table thead th {
  text-align: right;
  padding: 10px 14px;
  font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.5px;
  color: var(--text-3, #6B7280);
  background: var(--surface-2, #FAFAFA);
  border-bottom: 1px solid var(--border-light, rgba(0,0,0,.08));
  white-space: nowrap;
}
.pend-cli-resumo-table thead th.lbl { text-align: left; }
.pend-cli-resumo-table thead th.total { color: var(--accent, #FF9F0A); }

.pend-cli-resumo-table tbody td {
  padding: 11px 14px;
  border-bottom: 1px solid var(--border-light, rgba(0,0,0,.04));
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
  color: var(--text-1, #1D1D1F);
}
.pend-cli-resumo-table tbody td.lbl {
  text-align: left;
  font-weight: 600;
  display: flex; align-items: center; gap: 8px;
}
.pend-cli-resumo-table tbody td.total {
  font-weight: 700;
  color: var(--text-1, #1D1D1F);
}

.pend-cli-resumo-table tbody tr:hover td {
  background: rgba(255,159,10,0.04);
}
.pend-cli-resumo-row--naoCat td { color: var(--text-3, #6B7280); font-style: italic; }

.pend-cli-resumo-dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--text-3, #9CA3AF);
  flex-shrink: 0;
}
.pend-cli-resumo-dot[data-nucleo="maputo"]  { background: #0A84FF; }   /* iOS blue */
.pend-cli-resumo-dot[data-nucleo="fábrica"] { background: #FF9F0A; }   /* accent  */
.pend-cli-resumo-dot[data-nucleo="beira"]   { background: #30D158; }   /* iOS green */
.pend-cli-resumo-dot[data-nucleo="chimoio"] { background: #BF5AF2; }   /* iOS purple */
.pend-cli-resumo-dot[data-nucleo="manica"]  { background: #FF453A; }   /* iOS red — sede */
.pend-cli-resumo-dot[data-nucleo="pura"]    { background: #FFD60A; }   /* iOS yellow */

.pend-cli-resumo-nucleo { font-weight: 600; }
.pend-cli-resumo-codigo {
  font-size: 11px; font-weight: 500;
  color: var(--text-3, #9CA3AF);
  background: var(--surface-2, #F3F4F6);
  padding: 1px 6px;
  border-radius: 4px;
  font-variant-numeric: tabular-nums;
}

.pend-cli-resumo-totalGeral td {
  padding: 12px 14px;
  background: var(--surface-2, #FAFAFA);
  border-top: 2px solid var(--border, rgba(0,0,0,.12));
  border-bottom: none;
  font-weight: 700;
  font-size: 13.5px;
  color: var(--text-1, #1D1D1F);
}
.pend-cli-resumo-totalGeral td.total {
  color: var(--accent, #FF9F0A);
  font-size: 14.5px;
}

/* DARK */
[data-theme="dark"] .pend-cli-resumo-table thead th { background: rgba(255,255,255,.03); border-bottom-color: rgba(255,255,255,.08); }
[data-theme="dark"] .pend-cli-resumo-table tbody td { color: #F1F5F9; border-bottom-color: rgba(255,255,255,.04); }
[data-theme="dark"] .pend-cli-resumo-table tbody tr:hover td { background: rgba(255,159,10,.06); }
[data-theme="dark"] .pend-cli-resumo-codigo { background: rgba(255,255,255,.06); color: rgba(241,245,249,.55); }
[data-theme="dark"] .pend-cli-resumo-totalGeral td { background: rgba(255,255,255,.04); border-top-color: rgba(255,255,255,.14); color: #F1F5F9; }
[data-theme="dark"] .pend-cli-resumo-totalbox { background: rgba(255,159,10,.10); border-color: rgba(255,159,10,.35); }
[data-theme="dark"] .pend-cli-resumo-totalvl { color: #F1F5F9; }

/* AVISO — falta coluna "Conta" no Excel */
.pend-cli-resumo-aviso {
  background: rgba(255, 214, 10, 0.10);
  border: 1px solid rgba(255, 214, 10, 0.35);
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 12.5px;
  color: var(--text-1, #1D1D1F);
  margin-bottom: 12px;
  line-height: 1.5;
}
[data-theme="dark"] .pend-cli-resumo-aviso { background: rgba(255,214,10,.08); border-color: rgba(255,214,10,.30); color: #FDE68A; }

/* LINHA DE NÚCLEO — clicável, com chevron */
.pend-cli-resumo-row { cursor: pointer; transition: background 0.12s ease; }
.pend-cli-resumo-row:focus-visible { outline: 2px solid var(--accent, #FF9F0A); outline-offset: -2px; }
.pend-cli-resumo-chev {
  display: inline-block;
  width: 14px;
  font-size: 11px;
  color: var(--text-3, #9CA3AF);
  transition: transform 0.18s cubic-bezier(0.16, 1, 0.3, 1);
  margin-right: 4px;
  transform-origin: center;
}
.pend-cli-resumo-row--expanded { background: rgba(255, 159, 10, 0.05); }
.pend-cli-resumo-row--expanded .pend-cli-resumo-chev { transform: rotate(90deg); color: var(--accent, #FF9F0A); }
.pend-cli-resumo-meta {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-3, #9CA3AF);
  margin-left: 4px;
}

/* DRILLDOWN — sub-tabela expandida */
.pend-cli-resumo-drill-row.hidden { display: none; }
.pend-cli-resumo-drill-cell {
  padding: 0 !important;
  background: var(--surface-2, #FAFAFA);
  border-bottom: 1px solid var(--border-light, rgba(0,0,0,.04));
}
.pend-cli-resumo-drill-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  padding: 10px 18px 6px;
  border-bottom: 1px solid var(--border-light, rgba(0,0,0,.04));
}
.pend-cli-resumo-drill-title {
  font-size: 11.5px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.5px;
  color: var(--text-3, #6B7280);
}
.pend-cli-resumo-drill-count {
  font-size: 11.5px;
  color: var(--text-3, #9CA3AF);
  font-variant-numeric: tabular-nums;
}
.pend-cli-resumo-drill-tablewrap { overflow-x: auto; }
.pend-cli-resumo-drill-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
}
.pend-cli-resumo-drill-table th {
  text-align: right;
  padding: 7px 14px;
  font-size: 10.5px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.4px;
  color: var(--text-3, #9CA3AF);
  white-space: nowrap;
}
.pend-cli-resumo-drill-table th.lbl { text-align: left; padding-left: 28px; }
.pend-cli-resumo-drill-table th.total { color: var(--accent, #FF9F0A); }
.pend-cli-resumo-drill-table tbody td {
  padding: 8px 14px;
  border-top: 1px solid var(--border-light, rgba(0,0,0,.04));
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--text-1, #1D1D1F);
}
.pend-cli-resumo-drill-table tbody td.lbl {
  text-align: left;
  padding-left: 28px;
  font-weight: 500;
}
.pend-cli-resumo-drill-table tbody td.total { font-weight: 700; }
.pend-cli-resumo-drill-cli {
  cursor: pointer;
  transition: background 0.12s ease;
}
.pend-cli-resumo-drill-cli:hover td,
.pend-cli-resumo-drill-cli:focus-visible td {
  background: rgba(255, 159, 10, 0.08);
}
.pend-cli-resumo-drill-cli:focus-visible { outline: none; }
.pend-cli-resumo-drill-cli:focus-visible td:first-child { outline: 2px solid var(--accent, #FF9F0A); outline-offset: -3px; }
.pend-cli-resumo-drill-arrow {
  display: inline-block;
  color: var(--text-3, #9CA3AF);
  margin-right: 6px;
  font-size: 12px;
}
.pend-cli-resumo-drill-empty {
  padding: 18px;
  text-align: center;
  color: var(--text-3, #9CA3AF);
  font-size: 12.5px;
}
.pend-cli-resumo-drill-foot {
  padding: 8px 14px;
  text-align: center;
  font-size: 11px;
  color: var(--text-3, #9CA3AF);
  font-style: italic;
  border-top: 1px solid var(--border-light, rgba(0,0,0,.04));
}

[data-theme="dark"] .pend-cli-resumo-drill-cell { background: rgba(255,255,255,.02); }
[data-theme="dark"] .pend-cli-resumo-drill-head { border-bottom-color: rgba(255,255,255,.04); }
[data-theme="dark"] .pend-cli-resumo-drill-table tbody td { color: #F1F5F9; border-top-color: rgba(255,255,255,.04); }
[data-theme="dark"] .pend-cli-resumo-drill-cli:hover td { background: rgba(255,159,10,.06); }
[data-theme="dark"] .pend-cli-resumo-drill-foot { border-top-color: rgba(255,255,255,.04); }
[data-theme="dark"] .pend-cli-resumo-row--expanded { background: rgba(255,159,10,.04); }

/* Mobile — manter legível, scroll horizontal */
@media (max-width: 640px) {
  .pend-cli-resumo-totalbox { width: 100%; align-items: flex-start; min-width: 0; }
  .pend-cli-resumo-table { font-size: 12.5px; min-width: 560px; }
  .pend-cli-resumo-table thead th, .pend-cli-resumo-table tbody td { padding: 9px 10px; }
  .pend-cli-resumo-drill-table { min-width: 560px; }
}

/* ============================================================
   LIGHT THEME — Vumba Brand Colors
   Cor base: azul água viva da montanha principal do logo (#0099CC)
   ============================================================ */
[data-theme="light"] {
  --brand:         #0099CC;  /* azul montanha Vumba — cor viva, não pálida */
  --brand-dark:    #007DAA;
  --brand-light:   rgba(0, 153, 204, 0.10);
  --teal:          #00B4A0;
  --teal-light:    rgba(0, 180, 160, 0.12);
  --bg:            #EBF5FC;
  --surface:       #FFFFFF;
  --surface-2:     #D5EBF7;
  --border:        rgba(0, 153, 204, 0.16);
  --border-strong: rgba(0, 153, 204, 0.28);
  --border-light:  rgba(0, 153, 204, 0.08);
  --text-1:        #0D1F2D;
  --text-2:        #1E3D55;
  --text-3:        #3D6A87;
  --text-4:        #6D9BB8;
  --shadow-sm:     0 1px 2px rgba(0,0,0,.05);
  --shadow:        0 4px 12px rgba(0,153,204,.10), 0 1px 3px rgba(0,0,0,.04);
  --shadow-lg:     0 12px 32px rgba(0,153,204,.14), 0 4px 12px rgba(0,0,0,.05);
}

/* Sidebar — branca com acentos Vumba */
[data-theme="light"] .sidebar {
  background: #FFFFFF !important;
  border-right: 1px solid rgba(0,153,204,.14);
}
[data-theme="light"] .sidebar-logo { border-bottom-color: rgba(0,153,204,.12); }
[data-theme="light"] .logo-text strong { color: #0D1F2D; }
[data-theme="light"] .logo-text span { color: #3D6A87; }
[data-theme="light"] .nav-label { color: #6D9BB8; }
[data-theme="light"] .nav-item { color: #1E3D55; }
[data-theme="light"] .nav-item:hover:not(.active) { background: rgba(0,153,204,.08); color: #0099CC; }
[data-theme="light"] .nav-item.active { background: rgba(0,153,204,.12); color: #0099CC; }
[data-theme="light"] .nav-item.active .nav-icon { color: #0099CC; }
[data-theme="light"] .nav-item.active::before { background: #0099CC; }
[data-theme="light"] .user-card:hover { background: rgba(0,153,204,.07); }
[data-theme="light"] .user-info strong { color: #0D1F2D; }
[data-theme="light"] .user-info span { color: #3D6A87; }
[data-theme="light"] .avatar { background: rgba(0,153,204,.14); color: #0099CC; box-shadow: 0 0 0 1px rgba(0,153,204,.18); }
[data-theme="light"] .sidebar-footer { border-top-color: rgba(0,153,204,.12); }

/* Header fixo — branco com acentos Vumba */
[data-theme="light"] .header {
  background: #FFFFFF !important;
  border-bottom: 1px solid rgba(0,153,204,.12) !important;
  color: #0D1F2D !important;
}
[data-theme="light"] .header-title h1 { color: #0D1F2D !important; }
[data-theme="light"] .header-title p { color: #3D6A87 !important; }
[data-theme="light"] .mobile-toggle { color: #1E3D55; }
[data-theme="light"] .icon-btn { color: #1E3D55; }
[data-theme="light"] .icon-btn:hover { background: rgba(0,153,204,.09); color: #0099CC; }
[data-theme="light"] .search-bar {
  background: rgba(0,153,204,.06);
  border-color: rgba(0,153,204,.14);
}
[data-theme="light"] .search-bar input { color: #0D1F2D; }
[data-theme="light"] .search-bar input::placeholder { color: #6D9BB8; }
[data-theme="light"] .search-bar:focus-within {
  border-color: rgba(0,153,204,.40);
  background: rgba(0,153,204,.09);
  box-shadow: 0 0 0 3px rgba(0,153,204,.14);
}
[data-theme="light"] .notif-dot { border-color: #FFFFFF; }
[data-theme="light"] .header-identity { color: #0D1F2D; }
[data-theme="light"] .header-identity:hover { background: rgba(0,153,204,.07); }
[data-theme="light"] .header-identity-name { color: #0D1F2D; }
[data-theme="light"] .header-identity-role { color: #3D6A87; }
[data-theme="light"] .header-identity-check { stroke: #0099CC; }

/* Temperatura no header — chip visível em fundo branco */
[data-theme="light"] .header .weather-strip:empty::before {
  color: rgba(0,99,153,.70) !important;
  background: rgba(0,153,204,.08) !important;
  border-color: rgba(0,153,204,.18) !important;
}
[data-theme="light"] .header .weather-single {
  background: rgba(0,153,204,.08);
  border: 1px solid rgba(0,153,204,.18);
  border-radius: 999px;
  color: #0D1F2D !important;
}

/* Welcome banner — claro, tons Vumba, texto escuro */
[data-theme="light"] .welcome-banner {
  background: #FFFFFF !important;
  border: 1px solid rgba(0,153,204,.18) !important;
  border-left: 4px solid #0099CC !important;
  color: #0D1F2D !important;
}
[data-theme="light"] .welcome-greeting { color: #1E3D55 !important; }
[data-theme="light"] .welcome-greeting-prefix { color: #3D6A87 !important; }
[data-theme="light"] .welcome-greeting-name { color: #0099CC !important; }
[data-theme="light"] .welcome-status { color: #3D6A87 !important; }
[data-theme="light"] .welcome-meta-sep { color: #6D9BB8 !important; }
[data-theme="light"] .welcome-action {
  background: rgba(0,153,204,.09) !important;
  border-color: rgba(0,153,204,.22) !important;
  color: #1E3D55 !important;
}
[data-theme="light"] .welcome-action:hover {
  background: rgba(0,153,204,.14) !important;
  border-color: rgba(0,153,204,.32) !important;
}
[data-theme="light"] .welcome-action .text strong { color: #0099CC !important; }
[data-theme="light"] .welcome-action .cta {
  background: #0099CC !important;
  color: #FFFFFF !important;
}

/* Modal header */
[data-theme="light"] .modal-shell-header { background: #0099CC; }

/* Botão primário — azul montanha Vumba */
[data-theme="light"] .btn-primary,
[data-theme="light"] button[type="submit"]:not(.dir-action-btn) {
  background: #0099CC !important;
  box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 4px 12px rgba(0,153,204,.26) !important;
}
[data-theme="light"] .btn-primary:hover,
[data-theme="light"] button[type="submit"]:not(.dir-action-btn):hover {
  background: #007DAA !important;
  box-shadow: 0 2px 4px rgba(0,0,0,.06), 0 8px 20px rgba(0,153,204,.32) !important;
}

/* Focus nos inputs */
[data-theme="light"] input:not([type=checkbox]):not([type=radio]):focus,
[data-theme="light"] textarea:focus,
[data-theme="light"] select:focus {
  border-color: rgba(0,153,204,.55) !important;
  box-shadow: 0 0 0 3px rgba(0,153,204,.16);
}

/* Hover cards */
[data-theme="light"] .kpi-card[onclick]:hover { box-shadow: 0 12px 28px rgba(0,153,204,.18); }
[data-theme="light"] .quick-action:hover { box-shadow: 0 12px 28px rgba(0,153,204,.24); }
[data-theme="light"] .filter-chip.active { box-shadow: 0 2px 8px rgba(0,153,204,.24); }

/* Notificações panel */
[data-theme="light"] .notif-panel {
  background: #FFFFFF;
  border-left: 1px solid rgba(0,153,204,.14);
}

/* Toggle icon: mostra Lua em light (para ir para dark), Sol em dark (para ir para light) */
[data-theme="light"] .theme-toggle-btn .icon-sun  { display: none; }
[data-theme="light"] .theme-toggle-btn .icon-moon { display: block; }
[data-theme="dark"]  .theme-toggle-btn .icon-sun  { display: block; }
[data-theme="dark"]  .theme-toggle-btn .icon-moon { display: none; }

/* ============================================================
   EDITAR COLABORADORES (admin)
   ============================================================ */
.edit-colab-alerta {
  background: rgba(255, 214, 10, 0.12);
  border: 1px solid rgba(255, 214, 10, 0.40);
  color: var(--text-1);
  padding: 12px 16px;
  border-radius: 10px;
  margin-bottom: 14px;
  font-size: 13.5px;
  display: flex; align-items: center; gap: 10px;
  flex-wrap: wrap;
}
.edit-colab-alerta-btn {
  margin-left: auto;
  padding: 5px 12px;
  background: var(--text-1);
  color: white;
  border: none;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.edit-colab-alerta-btn:hover { opacity: 0.85; }

.edit-colab-filter-btn {
  padding: 10px 14px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-2);
  transition: all 0.15s ease;
}
.edit-colab-filter-btn:hover { background: var(--border-light); }
.edit-colab-filter-btn.active {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
}

.edit-colab-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
}
.edit-colab-table thead th {
  padding: 12px 16px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-3);
  white-space: nowrap;
}
.edit-colab-table tbody td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-light);
  color: var(--text-1);
  vertical-align: middle;
}
.edit-colab-table tbody tr:hover td { background: rgba(255, 159, 10, 0.04); }
.edit-colab-table tbody tr:last-child td { border-bottom: none; }

.edit-colab-row--incompleto td {
  background: rgba(255, 214, 10, 0.06);
}
.edit-colab-row--incompleto:hover td { background: rgba(255, 214, 10, 0.10); }

.edit-colab-badge {
  display: inline-block;
  padding: 2px 7px;
  background: #FFD60A;
  color: #1D1D1F;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.4px;
  margin-right: 6px;
  vertical-align: middle;
}

.edit-colab-vazio {
  color: #B45309;
  font-size: 12px;
  font-style: italic;
}
[data-theme="dark"] .edit-colab-vazio { color: #FDE68A; }

.edit-colab-btn {
  padding: 6px 12px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  cursor: pointer;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-1);
  transition: all 0.15s ease;
}
.edit-colab-btn:hover { background: var(--accent); color: white; border-color: var(--accent); }

/* MODAL */
.edit-colab-modal {
  position: fixed; inset: 0;
  z-index: 10000;
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding-top: clamp(40px, 8vh, 80px);
}
.edit-colab-modal.open { display: flex; }
.edit-colab-modal-backdrop {
  position: absolute; inset: 0;
  background: rgba(15, 23, 42, 0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.edit-colab-modal-panel {
  position: relative;
  width: min(560px, calc(100vw - 32px));
  max-height: calc(100vh - 120px);
  background: var(--surface);
  border-radius: 16px;
  box-shadow: 0 24px 60px rgba(0,0,0,.28), 0 8px 20px rgba(0,0,0,.16);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  animation: editColabRise 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes editColabRise {
  from { opacity: 0; transform: translateY(10px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.edit-colab-modal-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
  padding: 18px 22px;
  border-bottom: 1px solid var(--border-light);
}
.edit-colab-modal-close {
  width: 30px; height: 30px;
  background: var(--surface-2);
  border: 1px solid var(--border-light);
  border-radius: 8px;
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  color: var(--text-2);
  flex-shrink: 0;
}
.edit-colab-modal-close:hover { background: var(--border-light); color: var(--text-1); }
.edit-colab-modal-body {
  padding: 18px 22px;
  overflow-y: auto;
}
.edit-colab-modal-foot {
  display: flex; gap: 10px; justify-content: flex-end;
  padding-top: 14px;
  border-top: 1px solid var(--border-light);
  margin-top: 6px;
}
.edit-colab-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-2);
  margin-bottom: 6px;
}
.edit-colab-input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 14px;
  background: var(--surface);
  color: var(--text-1);
  box-sizing: border-box;
}
.edit-colab-input:focus { outline: 2px solid var(--accent); outline-offset: -1px; border-color: var(--accent); }
.edit-colab-hint {
  margin-top: 4px;
  font-size: 11.5px;
  color: var(--text-3);
}
.edit-colab-btn-secondary {
  padding: 10px 18px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-2);
}
.edit-colab-btn-secondary:hover { background: var(--border-light); }
.edit-colab-btn-primary {
  padding: 10px 22px;
  background: var(--accent);
  color: white;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 700;
  box-shadow: 0 2px 8px rgba(255, 159, 10, 0.25);
}
.edit-colab-btn-primary:hover { filter: brightness(1.05); }
.edit-colab-btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }

body.edit-colab-locked { overflow: hidden; }

@media (max-width: 640px) {
  .edit-colab-table { font-size: 12.5px; min-width: 720px; }
  .edit-colab-table thead th, .edit-colab-table tbody td { padding: 9px 10px; }
  .edit-colab-modal-panel { width: 100%; border-radius: 0; max-height: 100dvh; }
  .edit-colab-modal { padding-top: 0; align-items: stretch; }
  .edit-colab-modal-body { padding: 14px 16px; }
}

/* ============================================================
   NOVO CLIENTE / POTENCIAL (Cobrança Fase 3)
   ============================================================ */
.novo-cli-trigger {
  padding: 10px 14px;
  background: var(--accent);
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(255, 159, 10, 0.20);
  transition: all 0.15s ease;
}
.novo-cli-trigger:hover { filter: brightness(1.05); transform: translateY(-1px); }
.novo-cli-trigger:active { transform: translateY(0); }

/* MODAL */
.novo-cli-modal {
  position: fixed; inset: 0;
  z-index: 10000;
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding-top: clamp(40px, 8vh, 80px);
}
.novo-cli-modal.open { display: flex; }
.novo-cli-modal-backdrop {
  position: absolute; inset: 0;
  background: rgba(15, 23, 42, 0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.novo-cli-modal-panel {
  position: relative;
  width: min(480px, calc(100vw - 32px));
  max-height: calc(100vh - 120px);
  background: var(--surface);
  border-radius: 16px;
  box-shadow: 0 24px 60px rgba(0,0,0,.28), 0 8px 20px rgba(0,0,0,.16);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  animation: novoCliRise 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes novoCliRise {
  from { opacity: 0; transform: translateY(10px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.novo-cli-modal-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
  padding: 18px 22px;
  border-bottom: 1px solid var(--border-light);
}
.novo-cli-modal-close {
  width: 30px; height: 30px;
  background: var(--surface-2);
  border: 1px solid var(--border-light);
  border-radius: 8px;
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  color: var(--text-2);
  flex-shrink: 0;
}
.novo-cli-modal-close:hover { background: var(--border-light); color: var(--text-1); }
.novo-cli-modal-body {
  padding: 18px 22px;
  overflow-y: auto;
}
.novo-cli-modal-foot {
  display: flex; gap: 10px; justify-content: flex-end;
  padding-top: 14px;
  border-top: 1px solid var(--border-light);
  margin-top: 6px;
}
.novo-cli-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-2);
  margin-bottom: 6px;
}
.novo-cli-input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 14px;
  background: var(--surface);
  color: var(--text-1);
  box-sizing: border-box;
}
.novo-cli-input:focus { outline: 2px solid var(--accent); outline-offset: -1px; border-color: var(--accent); }
.novo-cli-hint {
  margin-top: 4px;
  font-size: 11.5px;
  color: var(--text-3);
}
.novo-cli-btn-secondary {
  padding: 10px 18px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-2);
}
.novo-cli-btn-secondary:hover { background: var(--border-light); }
.novo-cli-btn-primary {
  padding: 10px 22px;
  background: var(--accent);
  color: white;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 700;
  box-shadow: 0 2px 8px rgba(255, 159, 10, 0.25);
}
.novo-cli-btn-primary:hover { filter: brightness(1.05); }
.novo-cli-btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }

body.novo-cli-locked { overflow: hidden; }

@media (max-width: 640px) {
  .novo-cli-modal-panel { width: 100%; border-radius: 0; max-height: 100dvh; }
  .novo-cli-modal { padding-top: 0; align-items: stretch; }
  .novo-cli-modal-body { padding: 14px 16px; }
  .novo-cli-trigger { padding: 10px 12px; font-size: 12.5px; }
}

/* Warning para schema incompleto no modal Novo Cliente */
.novo-cli-warning {
  background: rgba(255, 214, 10, 0.12);
  border: 1px solid rgba(255, 214, 10, 0.40);
  color: var(--text-1);
  padding: 10px 14px;
  border-radius: 8px;
  margin-bottom: 14px;
  font-size: 12.5px;
  line-height: 1.5;
}
[data-theme="dark"] .novo-cli-warning {
  background: rgba(255, 214, 10, 0.08);
  border-color: rgba(255, 214, 10, 0.30);
  color: #FDE68A;
}

/* ============================================================
   COBRANÇA — Toggle Tipo de visita (Cliente existente vs Novo)
   ============================================================ */
.cobranca-segment-control {
  display: inline-flex;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 3px;
  gap: 2px;
  width: 100%;
  max-width: 480px;
}
.cobranca-segment-btn {
  flex: 1;
  padding: 9px 14px;
  background: transparent;
  border: none;
  border-radius: 7px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-2);
  cursor: pointer;
  transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1);
  white-space: nowrap;
}
.cobranca-segment-btn:hover:not(.active) { background: rgba(0,0,0,.04); color: var(--text-1); }
.cobranca-segment-btn.active {
  background: var(--surface);
  color: var(--text-1);
  box-shadow: 0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
}
[data-theme="dark"] .cobranca-segment-btn:hover:not(.active) { background: rgba(255,255,255,.04); }
[data-theme="dark"] .cobranca-segment-btn.active {
  background: rgba(255,255,255,.10);
  box-shadow: 0 1px 3px rgba(0,0,0,.4);
}
@media (max-width: 640px) {
  .cobranca-segment-btn { padding: 9px 8px; font-size: 12.5px; }
}

/* Esconder secções específicas de cliente existente quando o vendedor está
   a registar visita a NOVO/POTENCIAL cliente. */
.cobranca-modo-novo .cobranca-existente-only { display: none !important; }

/* ============================================================
   ASSISTENTE POR PASSOS — Diário de Visitas (mobile-first)
   ============================================================ */
.cob-wizard { padding: 0; overflow: hidden; }

.cob-head {
  padding: 16px 18px 14px;
  border-bottom: 1px solid var(--border-light);
  background: var(--surface-1);
}
.cob-head-title { margin: 0 0 12px; font-size: 17px; }

.cob-pills {
  display: flex;
  gap: 6px;
  margin-bottom: 12px;
}
.cob-pill {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  background: transparent;
  border: none;
  padding: 4px 2px;
  cursor: pointer;
  min-width: 0;
}
.cob-pill-num {
  width: 26px; height: 26px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  border: 2px solid var(--border);
  background: var(--surface);
  color: var(--text-3);
  font-size: 13px; font-weight: 800;
  transition: all .18s ease;
}
.cob-pill-lbl {
  font-size: 11.5px; font-weight: 600; color: var(--text-3);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
  transition: color .18s ease;
}
.cob-pill.active .cob-pill-num {
  border-color: var(--brand);
  background: var(--brand);
  color: #fff;
  box-shadow: 0 2px 8px rgba(0,120,212,.28);
}
.cob-pill.active .cob-pill-lbl { color: var(--text-1); font-weight: 700; }
.cob-pill.done .cob-pill-num {
  border-color: #10b981;
  background: #10b981;
  color: #fff;
}
.cob-pill.done .cob-pill-lbl { color: var(--text-2); }

.cob-track {
  height: 4px; border-radius: 4px; background: var(--surface-2); overflow: hidden;
}
.cob-track-fill {
  height: 100%; width: 0%; background: var(--brand);
  border-radius: 4px; transition: width .35s cubic-bezier(0.16,1,0.3,1);
}

.cob-body { padding: 18px; }
.cob-step-hint {
  margin: 0 0 16px; font-size: 13px; color: var(--text-3); line-height: 1.5;
}

.cob-step-warn {
  background: #fef3c7; border-left: 3px solid #f59e0b; color: #78350F;
  padding: 12px 14px; border-radius: 0 8px 8px 0; margin: 0 18px 4px;
  font-size: 13.5px; line-height: 1.5; font-weight: 600;
}

.cob-nav {
  display: flex; gap: 10px; align-items: center;
  padding: 14px 18px;
  border-top: 1px solid var(--border-light);
  background: var(--surface);
  position: sticky; bottom: 0;
}
.cob-nav-btn {
  padding: 13px 18px; border-radius: 10px; cursor: pointer;
  font-size: 15px; font-weight: 700; border: 1px solid transparent;
  min-height: 48px;
}
.cob-nav-prev {
  background: var(--surface-2); border-color: var(--border); color: var(--text-2);
  flex: 0 0 auto;
}
.cob-nav-next, .cob-nav-submit { flex: 1; color: #fff; border: none; }
.cob-nav-next { background: var(--brand); }
.cob-nav-submit[disabled] { cursor: not-allowed; }

/* Grelhas do formulário: empilhar em ecrãs estreitos (telemóvel).
   Os campos usam grid inline — sobrepomos só no mobile. */
@media (max-width: 560px) {
  .cob-body .cob-step > div[style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
  .cob-body .cob-step div[style*="repeat(4,1fr)"] { grid-template-columns: 1fr 1fr !important; }
  /* 16px evita o zoom automático do iOS ao focar um campo */
  .cob-body input, .cob-body select, .cob-body textarea { font-size: 16px !important; }
  .cob-head-title { font-size: 16px; }
  .cob-body { padding: 16px 14px; }
  .cob-nav { padding: 12px 14px; }
}
@media (max-width: 420px) {
  .cob-pill-lbl { display: none; }
}

/* Badge "POTENCIAL" no Relatório de Visitas — vermelho, destacado */
.relvis-badge-potencial {
  display: inline-block;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .4px;
  background: rgba(255, 69, 58, 0.14);
  color: #C81E1E;
  border: 1px solid rgba(255, 69, 58, 0.30);
  padding: 2px 8px;
  border-radius: 6px;
  vertical-align: middle;
  white-space: nowrap;
  text-transform: uppercase;
}
[data-theme="dark"] .relvis-badge-potencial {
  background: rgba(255, 69, 58, 0.22);
  color: #FCA5A5;
  border-color: rgba(255, 69, 58, 0.40);
}

/* ============================================================
   Autocomplete (type-ahead) reutilizável — attachAutocomplete()
   Substitui os <datalist> nativos. Visual igual ao campo fornecedor.
   ============================================================ */
.ac-results {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  margin-top: 4px;
  background: var(--surface-1, #fff);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
  max-height: 280px;
  overflow-y: auto;
  z-index: 50;
}
.ac-item {
  padding: 10px 14px;
  cursor: pointer;
  border-bottom: 1px solid var(--border-light);
  transition: background .15s;
}
.ac-item:last-child { border-bottom: none; }
.ac-item:hover { background: var(--surface-2); }
.ac-item-label { font-weight: 600; color: var(--text-1); font-size: 13.5px; }
.ac-item-sub { font-size: 11.5px; color: var(--text-3); margin-top: 2px; }
.ac-empty { padding: 14px; color: var(--text-3); font-size: 13px; }

/* ============================================================
   EXPERIENCE IMPROVEMENTS (UX/UI) ADDITIONS
   ============================================================ */

/* 1. Leaflet Map container styling */
#cobrancaMap {
  width: 100%;
  max-width: 480px;
  background-color: var(--surface-2, #f3f4f6);
}

/* 2. Vacation/Absence Calendar Preview Grid */
.calendar-preview-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
  margin-top: 14px;
  padding: 12px;
  background: var(--surface-2, #f9fafb);
  border: 1px solid var(--border-light, #e5e7eb);
  border-radius: 12px;
}
[data-theme="dark"] .calendar-preview-grid {
  background: rgba(255,255,255,0.03);
  border-color: rgba(255,255,255,0.08);
}

/* 3. Sync Dot Pulse Animation */
@keyframes sync-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}
.sync-dot {
  animation: sync-pulse 1.8s infinite ease-in-out;
}

/* 4. Mic button active styling & voice record pulse */
@keyframes mic-record-pulse {
  0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(220, 53, 69, 0.4); }
  70% { transform: scale(1.1); box-shadow: 0 0 0 8px rgba(220, 53, 69, 0); }
  100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(220, 53, 69, 0); }
}
.cmdp-mic-active {
  animation: mic-record-pulse 1.4s infinite ease-in-out;
  border-radius: 50%;
}

/* ============================================================
   COLLAPSIBLE NAVIGATION SECTIONS & SALESPERSON UI OPTIMIZATION
   ============================================================ */

.nav-section.collapsible .nav-label {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  user-select: none;
  transition: color var(--transition, 0.2s);
}
.nav-section.collapsible .nav-label:hover {
  color: #FFFFFF !important;
}
[data-theme="light"] .nav-section.collapsible .nav-label:hover {
  color: var(--brand, #0099CC) !important;
}
.nav-section.collapsible .nav-label::after {
  content: "▼";
  font-size: 8px;
  margin-left: 8px;
  opacity: 0.6;
  transition: transform 0.20s cubic-bezier(0.16, 1, 0.3, 1);
}
.nav-section.collapsible.collapsed .nav-label::after {
  transform: rotate(-90deg);
}
.nav-section.collapsible.collapsed .nav-section-content {
  display: none !important;
}

/* Avoid scrolls on mobile for salesperson role by hiding secondary cards */
@media (max-width: 768px) {
  .is-vendedor .mobile-hide-vendedor {
    display: none !important;
  }
}


/* ============================================================
   PAINEL DE DECISÃO do Dashboard — Redesign 2A
   Usa apenas tokens reais (claro + escuro).
   ============================================================ */
.dash-panel { display:flex; flex-direction:column; gap:16px; }

/* Cabeçalho + seletor de período */
.dash-headrow { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.dash-title { font-size:18px; font-weight:800; color:var(--text-1); letter-spacing:-0.01em; }
.dash-sub { font-size:12px; color:var(--text-3); margin-top:2px; }
.dash-tabs { margin-left:auto; display:flex; background:var(--surface-2); border:1px solid var(--border); border-radius:11px; padding:3px; }
.dash-tab { padding:6px 14px; border-radius:8px; cursor:pointer; font-weight:600; font-size:12px; color:var(--text-3); user-select:none; transition:background .15s,color .15s; }
.dash-tab:hover { color:var(--text-1); }
.dash-tab-active { background:var(--surface); color:var(--text-1); box-shadow:var(--shadow-sm); }
.dash-export { background:var(--surface); border:1px solid var(--border-strong); color:var(--text-2); font-weight:600; font-size:13px; font-family:inherit; padding:8px 14px; border-radius:9px; cursor:pointer; }
.dash-export:hover { border-color:var(--brand); color:var(--brand); }

/* Faixa de atenção */
.dash-attention { display:flex; align-items:center; gap:12px; background:var(--accent-soft); border:1px solid var(--accent); border-radius:var(--radius); padding:12px 16px; }
.dash-attention-dot { width:8px; height:8px; border-radius:50%; background:var(--accent); flex:none; }
.dash-attention-txt { font-size:13px; color:var(--text-1); }
.dash-attention-link { margin-left:auto; font-size:13px; font-weight:700; color:var(--accent); cursor:pointer; white-space:nowrap; }
.dash-attention-link:hover { text-decoration:underline; }

/* Fila de KPIs */
.dash-kpis { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.dash-kpi { background:var(--surface); border:1px solid var(--border); border-radius:15px; padding:16px; box-shadow:var(--shadow-sm); transition:transform .15s, box-shadow .15s; }
.dash-kpi[onclick]:hover { transform:translateY(-2px); box-shadow:var(--shadow); }
.dash-kpi-head { display:flex; justify-content:space-between; align-items:center; gap:8px; }
.dash-kpi-label { font-size:12px; color:var(--text-3); font-weight:600; }
.dash-kpi-val { display:flex; align-items:flex-end; gap:8px; margin-top:6px; }
.dash-kpi-num { font-size:30px; font-weight:800; line-height:1; color:var(--text-1); font-family:var(--font-mono); }
.dash-kpi-unit { font-size:11px; color:var(--text-3); padding-bottom:3px; }

/* Pills de tendência/estado */
.dash-pill { font-size:11px; font-weight:700; padding:2px 8px; border-radius:20px; white-space:nowrap; }
.dash-pill-up { background:var(--green-light); color:var(--green); }
.dash-pill-down { background:var(--red-light); color:var(--red); }
.dash-pill-neutral { background:var(--surface-2); color:var(--text-3); }
.dash-pill-warn { background:var(--accent-soft); color:var(--accent); }
.dash-pill-brand { background:var(--brand-light); color:var(--brand); }

/* Barra de composição (pedidos por estado) */
.dash-compbar { display:flex; gap:5px; margin-top:14px; }
.dash-compbar-seg { height:7px; border-radius:4px; }
.dash-cb-pend { background:var(--accent); }
.dash-cb-pago { background:var(--brand); }
.dash-cb-out { background:var(--border); }

/* Mini-barras (clientes em atraso) */
.dash-minibars { display:flex; align-items:flex-end; gap:6px; height:34px; margin-top:10px; }
.dash-mb { flex:1; border-radius:3px; min-height:6px; }
.dash-mb-y { background:var(--amber); }
.dash-mb-a { background:var(--accent); }
.dash-mb-r { background:var(--red); }

/* Barra de progresso (visitas) */
.dash-progress { height:8px; border-radius:5px; background:var(--surface-2); margin-top:16px; overflow:hidden; }
.dash-progress-fill { height:100%; background:var(--brand); border-radius:5px; transition:width .4s; }

/* Grelha inferior */
.dash-lower { display:grid; grid-template-columns:1.7fr 1fr; gap:16px; }
.dash-lower-left { display:flex; flex-direction:column; gap:16px; }
.dash-lower-right { display:flex; flex-direction:column; gap:16px; }
.dash-card { background:var(--surface); border:1px solid var(--border); border-radius:16px; padding:18px 20px; box-shadow:var(--shadow-sm); }
.dash-card-head { display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:6px; flex-wrap:wrap; }
.dash-card-title { font-size:14px; font-weight:700; color:var(--text-1); }
.dash-muted { color:var(--text-3); font-weight:500; }

/* Gráfico de barras */
.dash-chart-total { font-size:13px; font-weight:700; color:var(--green); }
.dash-chart-legend { display:flex; gap:16px; font-size:11px; color:var(--text-3); margin-bottom:14px; }
.dash-lg-recv { color:var(--brand); }
.dash-chart-plot { position:relative; height:190px; }
.dash-chart-avgline { position:absolute; left:0; right:0; border-top:1px dashed var(--border-strong); }
.dash-bars { display:flex; align-items:flex-end; gap:8px; height:100%; }
.dash-bar { flex:1; background:var(--surface-2); border-radius:4px 4px 0 0; transition:height .4s; }
.dash-bar-max { background:var(--brand); }
.dash-chart-x { display:flex; justify-content:space-between; font-size:10px; color:var(--text-4); margin-top:8px; }

/* Antiguidade da dívida */
.dash-aging { display:flex; flex-direction:column; gap:12px; margin-top:14px; }
.dash-aging-top { display:flex; justify-content:space-between; font-size:12px; margin-bottom:5px; }
.dash-aging-val { font-weight:700; color:var(--text-1); font-family:var(--font-mono); }
.dash-aging-track { height:7px; border-radius:4px; background:var(--surface-2); }
.dash-aging-fill { height:100%; border-radius:4px; }
.dash-aging-y { background:var(--amber); }
.dash-aging-a { background:var(--accent); }
.dash-aging-r { background:var(--red); }

/* Plano de trabalho */
.dash-plan-list { display:flex; flex-direction:column; gap:10px; margin-top:14px; }
.dash-plan-row { display:flex; align-items:flex-start; gap:10px; cursor:pointer; }
.dash-plan-dot { flex:0 0 8px; width:8px; height:8px; border-radius:50%; background:var(--amber); margin-top:5px; }
.dash-plan-dot.dash-plan-done { background:var(--green); }
.dash-plan-body { flex:1; min-width:0; }
.dash-plan-name { font-size:13px; font-weight:600; color:var(--text-1); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dash-plan-sub { font-size:12px; color:var(--text-3); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dash-plan-more { font-size:12px; color:var(--text-3); margin-top:8px; text-align:center; }

/* Meta de visitas */
.dash-visitas { flex:1; }
.dash-visitas-body { display:flex; align-items:center; gap:16px; }
.dash-visitas-pct { font-size:36px; font-weight:800; line-height:1; color:var(--text-1); font-family:var(--font-mono); }
.dash-visitas-pct span { font-size:18px; }
.dash-visitas-list { flex:1; display:flex; flex-direction:column; gap:8px; font-size:12px; }
.dash-visitas-list > div { display:flex; justify-content:space-between; }
.dash-visitas-list > div > span:last-child { font-weight:700; color:var(--text-1); }

/* Atalhos (preserva navegação do menu) */
.dash-section-title { font-size:12px; font-weight:700; letter-spacing:.6px; text-transform:uppercase; color:var(--text-3); margin-top:6px; }
.dash-shortcuts { display:grid; grid-template-columns:repeat(auto-fill, minmax(150px,1fr)); gap:10px; }
.dash-shortcut { display:flex; align-items:center; gap:10px; background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:12px 14px; cursor:pointer; font-family:inherit; font-size:13px; font-weight:600; color:var(--text-1); text-align:left; min-height:44px; transition:transform .15s, box-shadow .15s, border-color .15s; }
.dash-shortcut:hover { transform:translateY(-2px); box-shadow:var(--shadow); border-color:var(--brand); }
.dash-shortcut-ico { font-size:18px; line-height:1; }

/* Responsivo */
@media (max-width:900px) {
  .dash-kpis { grid-template-columns:repeat(2,1fr); }
  .dash-lower { grid-template-columns:1fr; }
}
@media (max-width:560px) {
  .dash-kpis { grid-template-columns:1fr; }
  .dash-tabs { margin-left:0; width:100%; justify-content:space-between; }
  .dash-export { flex:1; }
}

/* ============================================================
   PAINEL DE DECISÃO — FASE 2: experiência MOBILE (campo)
   Ref.: "Vendas Mobile.dc.html". Ativa em ≤640px (via JS branch).
   ============================================================ */
.dash-m { display:flex; flex-direction:column; gap:14px; }
.dash-m-stats { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.dash-m-stat { background:var(--surface); border:1px solid var(--border); border-radius:16px; padding:14px; box-shadow:var(--shadow-sm); }
.dash-m-stat-lbl { font-size:12px; color:var(--text-3); font-weight:600; }
.dash-m-stat-num { font-size:26px; font-weight:800; margin-top:2px; color:var(--text-1); font-family:var(--font-mono); }
.dash-m-stat-num span { font-size:15px; color:var(--text-3); font-family:var(--font-mono); }
.dash-m-stat-sub { font-size:11px; color:var(--text-3); font-weight:600; margin-top:10px; }
.dash-m-danger { color:var(--red); }
.dash-m-stat-track { height:6px; border-radius:4px; background:var(--surface-2); margin-top:10px; overflow:hidden; }
.dash-m-stat-track > div { height:100%; background:var(--brand); border-radius:4px; }

/* Ações rápidas (inclui Pedir pagamento) */
.dash-m-actions { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.dash-m-action { display:flex; flex-direction:column; align-items:center; gap:6px; background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:14px 8px; cursor:pointer; font-family:inherit; color:var(--text-1); min-height:76px; justify-content:center; transition:transform .15s, box-shadow .15s, border-color .15s; }
.dash-m-action:active { transform:scale(.97); }
.dash-m-action:hover { border-color:var(--brand); box-shadow:var(--shadow); }
.dash-m-action-ico { font-size:22px; line-height:1; }
.dash-m-action-lbl { font-size:11.5px; font-weight:600; text-align:center; line-height:1.2; }

/* Secção + listas */
.dash-m-head { display:flex; align-items:center; margin:6px 2px 0; }
.dash-m-head > span:first-child { font-size:15px; font-weight:800; color:var(--text-1); }
.dash-m-link { margin-left:auto; font-size:12px; color:var(--brand); font-weight:600; cursor:pointer; }
.dash-m-list { background:var(--surface); border:1px solid var(--border); border-radius:16px; overflow:hidden; }
.dash-m-row { display:flex; align-items:center; gap:13px; padding:14px 16px; border-bottom:1px solid var(--border-light); cursor:pointer; }
.dash-m-row:last-child { border-bottom:none; }
.dash-m-row:active { background:var(--surface-2); }
.dash-m-row-badge { width:36px; height:36px; border-radius:11px; background:var(--brand-light); color:var(--brand); display:flex; align-items:center; justify-content:center; font-weight:800; flex:none; }
.dash-m-row-body { flex:1; min-width:0; }
.dash-m-row-title { font-weight:700; font-size:14px; color:var(--text-1); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.dash-m-row-sub { font-size:12px; color:var(--text-3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.dash-m-row-chev { color:var(--text-4); font-size:20px; }

/* Metas */
.dash-m-card { background:var(--surface); border:1px solid var(--border); border-radius:16px; padding:16px; display:flex; flex-direction:column; gap:14px; }
.dash-m-goal-top { display:flex; justify-content:space-between; font-size:13px; margin-bottom:6px; color:var(--text-2); }
.dash-m-goal-top strong { color:var(--text-1); font-family:var(--font-mono); }
.dash-m-goal-track { height:8px; border-radius:5px; background:var(--surface-2); overflow:hidden; }
.dash-m-goal-fill { height:100%; border-radius:5px; }
.dash-m-fill-brand { background:var(--brand); }
.dash-m-fill-green { background:var(--green); }

/* Fase 2 mobile — 3 alvos grandes de ação (início orientado à ação) */
.dash-m-targets { display:flex; flex-direction:column; gap:12px; }
.dash-m-target { display:flex; align-items:center; gap:14px; width:100%; text-align:left; background:var(--surface); border:1px solid var(--border); border-radius:16px; padding:18px; cursor:pointer; font-family:inherit; color:var(--text-1); min-height:76px; transition:transform .15s, box-shadow .15s, border-color .15s; }
.dash-m-target:active { transform:scale(.98); }
.dash-m-target:hover { box-shadow:var(--shadow); border-color:var(--brand); }
.dash-m-target-ico { width:44px; height:44px; border-radius:12px; background:var(--brand-light); display:flex; align-items:center; justify-content:center; font-size:20px; flex:none; }
.dash-m-target-body { flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.dash-m-target-lbl { font-size:16px; font-weight:800; }
.dash-m-target-sub { font-size:12px; color:var(--text-3); }
.dash-m-target-chev { color:var(--text-4); font-size:22px; }
/* Alvo primário — destaque em gradiente da marca */
.dash-m-target-primary { background:linear-gradient(150deg, var(--brand-dark), var(--brand)); border-color:transparent; color:#fff; box-shadow:var(--shadow); }
.dash-m-target-primary .dash-m-target-ico { background:rgba(255,255,255,.18); }
.dash-m-target-primary .dash-m-target-sub { color:rgba(255,255,255,.82); }
.dash-m-target-primary .dash-m-target-chev { color:rgba(255,255,255,.7); }

/* ============================================================
   FASE 2 offline-first — faixa de estado + modal de Sincronização
   ============================================================ */
/* Faixa de estado na home mobile */
.dash-outbox-strip { display:none; align-items:center; gap:12px; border-radius:var(--radius); padding:12px 16px; font-size:13px; }
.dash-outbox-offline { background:var(--accent-soft); border:1px solid var(--accent); color:var(--text-1); }
.dash-outbox-pending { background:var(--brand-light); border:1px solid var(--brand); color:var(--text-1); }
.dash-outbox-dot { width:8px; height:8px; border-radius:50%; flex:none; }
.dash-outbox-offline .dash-outbox-dot { background:var(--accent); }
.dash-outbox-pending .dash-outbox-dot { background:var(--brand); }
.dash-outbox-txt { flex:1; min-width:0; }
.dash-outbox-link { font-weight:700; cursor:pointer; white-space:nowrap; }
.dash-outbox-offline .dash-outbox-link { color:var(--accent); }
.dash-outbox-pending .dash-outbox-link { color:var(--brand); }
.dash-outbox-link:hover { text-decoration:underline; }

/* Modal de Sincronização */
.sync-modal-overlay { display:none; position:fixed; inset:0; z-index:10001; background:rgba(15,42,68,.4); align-items:center; justify-content:center; padding:20px; }
.sync-modal { width:440px; max-width:100%; max-height:86vh; background:var(--surface); border:1px solid var(--border); border-radius:20px; box-shadow:var(--shadow-lg); display:flex; flex-direction:column; overflow:hidden; }
.sync-modal-head { display:flex; align-items:center; padding:18px 20px; border-bottom:1px solid var(--border-light); }
.sync-modal-title { font-size:17px; font-weight:800; color:var(--text-1); }
.sync-modal-close { margin-left:auto; cursor:pointer; color:var(--text-3); font-size:18px; line-height:1; }
.sync-modal-status { padding:10px 20px; font-size:13px; font-weight:600; border-bottom:1px solid var(--border-light); }
.sync-modal-status.is-online { color:var(--green); }
.sync-modal-status.is-offline { color:var(--accent); }
.sync-modal-list { flex:1; overflow:auto; padding:8px 0; }
.sync-row { display:flex; align-items:center; gap:12px; padding:12px 20px; border-bottom:1px solid var(--border-light); }
.sync-row:last-child { border-bottom:none; }
.sync-row-dot { width:9px; height:9px; border-radius:50%; flex:none; }
.sync-dot-pend { background:var(--accent); }
.sync-row-body { flex:1; min-width:0; }
.sync-row-title { font-size:14px; font-weight:700; color:var(--text-1); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sync-row-sub { font-size:12px; color:var(--text-3); }
.sync-row-badge { font-size:11px; font-weight:700; color:var(--accent); background:var(--accent-soft); padding:3px 9px; border-radius:20px; white-space:nowrap; }
.sync-empty { padding:28px 20px; text-align:center; color:var(--text-3); font-size:14px; }
.sync-modal-foot { padding:16px 20px; border-top:1px solid var(--border-light); }
.sync-foot-hint { font-size:12.5px; color:var(--text-3); text-align:center; }
.sync-btn-primary { width:100%; border:none; background:var(--brand); color:#fff; font-weight:700; font-size:14px; font-family:inherit; padding:13px; border-radius:12px; cursor:pointer; }
.sync-btn-primary:hover { background:var(--brand-dark); }
.sync-btn-secondary { width:100%; border:1px solid var(--border-strong); background:var(--surface); color:var(--text-2); font-weight:600; font-size:14px; font-family:inherit; padding:12px; border-radius:12px; cursor:pointer; }