:root {
  color-scheme: dark;
  --bg: #0f172a;
  --page: #0b1220;
  --surface: #111827;
  --surface-2: #1a2436;
  --surface-3: #212d42;
  --border: rgba(255, 255, 255, 0.08);
  --text-primary: #f8fafc;
  --text-secondary: #cbd5e1;
  --text-muted: #8896ab;

  --brand-a: #2563eb;
  --brand-b: #14b8a6;
  --brand-c: #9085e9;

  --role-video: #3987e5;
  --role-social: #d95926;

  --good: #22c55e;
  --warning: #fab219;
  --critical: #e6584f;

  /* paleta categórica (validada pra fundo escuro) usada nos gráficos e badges */
  --series-1: #3987e5;
  --series-2: #d95926;
  --series-3: #199e70;
  --series-4: #c98500;
  --series-5: #d55181;
  --series-6: #4fbf4f;
  --series-7: #9085e9;
  --series-8: #e66767;

  --radius: 18px;
  --radius-sm: 12px;
  --radius-lg: 22px;
  --shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
  --shadow-soft: 0 4px 16px rgba(0, 0, 0, 0.22);
  --shadow-glow: 0 0 0 1px rgba(37, 99, 235, 0.12), 0 12px 32px rgba(20, 184, 166, 0.08);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);

  --lime: #b8ff4d;
  --lime-ink: #0c1a05;
  --sidebar-w: 240px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background:
    radial-gradient(1100px 520px at 12% -8%, rgba(37, 99, 235, 0.10), transparent 60%),
    radial-gradient(900px 460px at 95% 0%, rgba(20, 184, 166, 0.08), transparent 55%),
    var(--page);
  background-attachment: fixed;
  color: var(--text-primary);
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.hidden { display: none !important; }

.app-shell {
  max-width: 1600px;
  margin: 0 auto;
  padding: 24px 20px 60px;
}

/* Animação leve ao trocar de aba / revelar detalhes */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
.tab-fade-in { animation: fadeInUp 0.38s var(--ease) both; }

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Scrollbar mais fina e discreta */
* { scrollbar-width: thin; scrollbar-color: var(--surface-3) transparent; }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-thumb { background: var(--surface-3); border-radius: 999px; }
*::-webkit-scrollbar-track { background: transparent; }

/* Login */
.auth-card {
  max-width: 380px;
  margin: 8vh auto 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px;
  box-shadow: var(--shadow);
}
.brand { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; }
.brand-mark {
  width: 44px; height: 44px; border-radius: 12px;
  background: linear-gradient(135deg, var(--brand-a), var(--brand-b));
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 15px; color: #fff; flex-shrink: 0;
}
.brand-logo { height: 48px; width: auto; flex-shrink: 0; }
.brand h1 { margin: 0; font-size: 18px; }
.brand p { margin: 2px 0 0; font-size: 12px; color: var(--text-muted); }

.topbar-brand { display: flex; align-items: center; gap: 12px; }
.topbar-logo { height: 32px; width: auto; flex-shrink: 0; }

.stack { display: flex; flex-direction: column; gap: 14px; }
.stack label, dialog label {
  display: flex; flex-direction: column; gap: 6px;
  font-size: 12px; font-weight: 600; color: var(--text-secondary);
}
input, select, textarea {
  font-family: inherit;
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text-primary);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  font-size: 14px;
  outline: none;
}
input:focus, select:focus, textarea:focus { border-color: var(--brand-b); }
textarea { resize: vertical; font-family: inherit; }

.remember-row { flex-direction: row !important; align-items: center; gap: 8px !important; font-weight: 500; }
.remember-row input { width: auto; }
.remember-row input[type="radio"] { width: auto; }

.repeat-box {
  display: flex; flex-direction: column; gap: 4px;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 12px 14px; margin: 4px 0 2px;
}

.login-hint { text-align: center; font-size: 12px; color: var(--text-muted); margin-top: 16px; }
.forgot-link { display: block; margin: 14px auto 0; background: none; border: none; }
.config-warning {
  max-width: 640px; margin: 0 auto 18px; background: rgba(250, 178, 25, 0.12);
  border: 1px solid var(--warning); color: var(--warning); border-radius: var(--radius-sm);
  padding: 12px 16px; font-size: 13px; line-height: 1.5;
}
.config-warning code { background: rgba(255,255,255,0.08); padding: 1px 5px; border-radius: 4px; }
.howto-list { margin: 0; padding-left: 20px; font-size: 13px; color: var(--text-secondary); display: flex; flex-direction: column; gap: 8px; }
.howto-list li { line-height: 1.4; }

button { font-family: inherit; cursor: pointer; }
.btn {
  border: none; border-radius: var(--radius-sm);
  padding: 10px 16px; font-size: 14px; font-weight: 600;
  transition: filter 0.15s var(--ease), background 0.15s var(--ease), transform 0.15s var(--ease), box-shadow 0.15s var(--ease);
}
.btn:active { transform: scale(0.97); }
.btn.primary { background: linear-gradient(135deg, var(--brand-a), var(--brand-b)); color: #fff; box-shadow: 0 6px 16px rgba(37, 99, 235, 0.28); }
.btn.primary:hover { filter: brightness(1.08); transform: translateY(-1px); box-shadow: 0 10px 22px rgba(37, 99, 235, 0.35); }
.btn.secondary { background: var(--surface-3); color: var(--text-primary); border: 1px solid var(--border); }
.btn.secondary:hover { background: var(--surface-2); transform: translateY(-1px); }
.btn.ghost { background: transparent; color: var(--text-secondary); border: 1px solid var(--border); }
.btn.ghost:hover { background: var(--surface-2); color: var(--text-primary); }
.btn.danger { background: transparent; color: var(--critical); border: 1px solid var(--critical); }
.btn.danger:hover { background: rgba(230, 88, 79, 0.12); }
.btn.good { background: transparent; color: var(--good); border: 1px solid var(--good); }
.btn.good:hover { background: rgba(34, 197, 94, 0.12); }
.btn.warning { background: transparent; color: var(--warning); border: 1px solid var(--warning); }
.btn.warning:hover { background: rgba(250, 178, 25, 0.12); }
.btn.xl { padding: 16px; font-size: 16px; width: 100%; }
.btn.full { width: 100%; }
.btn.small { padding: 6px 12px; font-size: 12.5px; white-space: nowrap; }
.icon-btn {
  background: transparent; border: none; color: var(--text-muted);
  font-size: 20px; line-height: 1; padding: 4px 8px; border-radius: 8px;
  transition: background 0.15s var(--ease), color 0.15s var(--ease);
}
.icon-btn:hover { background: var(--surface-2); color: var(--text-primary); }

.icon-toggle-btn { display: inline-flex; align-items: center; gap: 7px; }
.icon-toggle-btn svg { flex-shrink: 0; }

/* Admin tabs */
.admin-tabs {
  display: flex; gap: 6px; margin-bottom: 18px;
  border-bottom: 1px solid var(--border); padding-bottom: 0;
  overflow-x: auto;
}
.admin-tab {
  background: transparent; border: none; color: var(--text-muted);
  font-size: 14px; font-weight: 700; padding: 10px 4px; margin-right: 18px;
  border-bottom: 2px solid transparent; border-radius: 0; white-space: nowrap;
  transition: color 0.15s var(--ease), border-color 0.2s var(--ease);
}
.admin-tab:hover { color: var(--text-primary); background: transparent; }
.admin-tab.active { color: var(--text-primary); border-bottom-color: var(--brand-b); }

.section-actions {
  display: flex; justify-content: flex-end; gap: 8px; margin-bottom: 16px; flex-wrap: wrap;
}

/* Topbar */
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 20px; gap: 12px; flex-wrap: wrap;
}
.eyebrow { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--brand-b); font-weight: 700; }
.topbar h2 { margin: 2px 0 0; font-size: 20px; }
.topbar-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* Cards */
.card {
  background: linear-gradient(180deg, var(--surface) 0%, rgba(17, 24, 39, 0.7) 100%);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  margin-bottom: 18px;
  box-shadow: var(--shadow-soft);
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.card-title-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-bottom: 14px; flex-wrap: wrap;
}
/* Rodada 2 (densidade/tipografia): o titulo nao pode mais ser espremido
   pelo botao de acao ao lado (ex.: "Ver todos"/"Ver detalhes") -- o wrapper
   do titulo cresce e quebra normalmente, o botao nunca encolhe. */
.card-title-row > *:first-child { min-width: 0; flex: 1 1 auto; }
.card-title-row > button,
.card-title-row > a.link-btn,
.card-title-row select { flex-shrink: 0; }
.card-title-row h3 { margin: 0; font-size: 15px; letter-spacing: -0.01em; line-height: 1.3; }
.muted { color: var(--text-muted); font-size: 12px; }

/* Cartão de gráfico */
.chart-card { position: relative; }
.chart-wrap { position: relative; width: 100%; }
.chart-legend { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 14px; }
.chart-legend-item { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--text-secondary); }
.chart-legend-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.chart-empty { text-align: center; color: var(--text-muted); font-size: 13px; padding: 30px 0; }

.hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; }
.hero-grid > * { min-width: 0; }
@media (max-width: 720px) { .hero-grid { grid-template-columns: minmax(0, 1fr); } }

.urgent-card { display: flex; flex-direction: column; gap: 8px; }
.urgent-task { padding: 10px 0; }
.urgent-task .ut-title { font-size: 17px; font-weight: 700; margin-bottom: 6px; }
.urgent-task .ut-meta { font-size: 13px; color: var(--text-secondary); }
.urgent-task .ut-empty { color: var(--text-muted); font-size: 14px; padding: 12px 0; }

.metrics-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); gap: 12px;
}
.metric-tile {
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 14px 16px;
  transition: transform 0.18s var(--ease), border-color 0.18s var(--ease), background 0.18s var(--ease);
}
.metric-tile:hover { transform: translateY(-2px); border-color: rgba(255,255,255,0.16); background: var(--surface-3); }
.metric-tile.clickable { cursor: pointer; }
.prontidao-list { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; font-size: 13px; }
.prontidao-item { display: flex; align-items: center; gap: 6px; color: var(--text-muted); }
.prontidao-item.ok { color: var(--good); }

.notif-bell-wrap { position: relative; display: inline-flex; }
.notif-bell-btn { position: relative; }
.notif-badge {
  position: absolute; top: 2px; right: 2px;
  background: var(--critical); color: #fff;
  font-size: 10px; font-weight: 700; line-height: 1;
  min-width: 16px; height: 16px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center; padding: 0 3px;
}
.notif-panel {
  /* AUDITORIA GLOBAL DE UX/RESPONSIVIDADE: width fixo sem clamp de
     viewport podia vazar pra fora da tela em telas muito estreitas
     (~320-360px) -- mesmo padrão já correto em .client-workspace-menu-panel,
     replicado aqui. */
  position: absolute; top: calc(100% + 8px); right: 0; width: 320px; max-width: min(320px, 92vw); max-height: 420px;
  overflow-y: auto; background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius-sm); box-shadow: var(--shadow); z-index: 60;
}
.notif-panel-header {
  padding: 12px 14px; font-weight: 600; font-size: 13px; color: var(--text-primary);
  border-bottom: 1px solid var(--border);
}
.notif-panel-list { padding: 6px; display: flex; flex-direction: column; gap: 4px; }
.notif-item {
  display: flex; flex-direction: column; gap: 2px; padding: 8px 10px;
  border-radius: var(--radius-sm); cursor: pointer; text-align: left;
  width: 100%; background: transparent; border: none; color: inherit; font: inherit;
}
.notif-item:hover { background: var(--surface-3); }
.notif-item-title { font-size: 13px; font-weight: 600; color: var(--text-primary); }
.notif-item-sub { font-size: 12px; color: var(--text-muted); }
.notif-empty { padding: 20px 14px; text-align: center; color: var(--text-muted); font-size: 13px; }

.metric-tile .value { font-size: 23px; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; transition: filter 0.15s var(--ease); }
.metric-tile .label { font-size: 11px; color: var(--text-muted); margin-top: 3px; }
.metric-tile.alert .value { color: var(--critical); }
.metric-tile.ok .value { color: var(--good); }
.values-hidden .metric-tile .value,
.values-hidden .value-money,
.values-hidden .money-inline,
.values-hidden .cc-value,
.values-hidden .gc-values,
.values-hidden .cs-value,
.values-hidden .caixa-hero .value,
.values-hidden .stat-tile-body .value,
.values-hidden .chart-wrap canvas { filter: blur(7px); user-select: none; transition: filter 0.2s var(--ease); }
.money-inline { font-variant-numeric: tabular-nums; font-weight: 700; }

/* Stat tiles com ícone — visualização mais rica no topo dos dashboards */
.stat-tile-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 18px; }
.stat-tile {
  display: flex; align-items: center; gap: 12px;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 14px 16px;
  transition: transform 0.18s var(--ease), border-color 0.18s var(--ease), background 0.18s var(--ease);
}
.stat-tile:hover { transform: translateY(-2px); border-color: rgba(255,255,255,0.16); background: var(--surface-3); }
.stat-tile.clickable { cursor: pointer; }
.stat-tile-icon {
  width: 38px; height: 38px; border-radius: 10px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(57, 135, 229, 0.15); color: var(--role-video);
}
.stat-tile-icon svg { width: 19px; height: 19px; }
.stat-tile.ok .stat-tile-icon { background: rgba(34, 197, 94, 0.15); color: var(--good); }
.stat-tile.alert .stat-tile-icon { background: rgba(230, 88, 79, 0.15); color: var(--critical); }
.stat-tile.warning .stat-tile-icon { background: rgba(250, 178, 25, 0.15); color: var(--warning); }
.stat-tile-body .value { font-size: 20px; font-weight: 800; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; transition: filter 0.15s var(--ease); }
.stat-tile-body .label { font-size: 11px; color: var(--text-muted); margin-top: 2px; }

/* Duas colunas de gráficos lado a lado */
.charts-row { display: grid; grid-template-columns: 1.3fr 1fr; gap: 18px; }
@media (max-width: 900px) { .charts-row { grid-template-columns: 1fr; } }

/* Área de trabalho do funcionário: menu lateral + conteúdo em abas */
.emp-shell { display: flex; align-items: flex-start; gap: 22px; }
.emp-sidebar {
  width: 216px; flex-shrink: 0; position: sticky; top: 20px;
  display: flex; flex-direction: column; gap: 20px;
  background: linear-gradient(180deg, var(--surface) 0%, rgba(17, 24, 39, 0.7) 100%);
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 16px 12px; box-shadow: var(--shadow-soft);
  transition: width 0.2s var(--ease);
}
.emp-sidebar.collapsed { width: 62px; }
.emp-sidebar.collapsed .emp-nav-label,
.emp-sidebar.collapsed .emp-nav-link span,
.emp-sidebar.collapsed .emp-nav-logout span,
.emp-sidebar.collapsed .emp-sidebar-logo { display: none; }
.emp-sidebar-brand { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 4px; }
.emp-sidebar-logo { height: 26px; width: auto; }
.emp-sidebar-toggle {
  background: transparent; border: 1px solid var(--border); color: var(--text-muted);
  border-radius: 8px; width: 26px; height: 26px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.15s var(--ease), color 0.15s var(--ease), transform 0.2s var(--ease);
}
.emp-sidebar-toggle:hover { background: var(--surface-2); color: var(--text-primary); }
.emp-sidebar.collapsed .emp-sidebar-toggle svg { transform: rotate(180deg); }
.emp-nav { display: flex; flex-direction: column; gap: 16px; }
.emp-nav-group { display: flex; flex-direction: column; gap: 2px; }
.emp-nav-label { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.07em; color: var(--text-muted); font-weight: 700; padding: 0 10px; margin-bottom: 5px; white-space: nowrap; }
.emp-nav-link {
  display: flex; align-items: center; gap: 10px;
  background: transparent; border: none; border-left: 2px solid transparent;
  border-radius: 9px; padding: 9px 10px; color: var(--text-secondary);
  font-size: 13px; font-weight: 600; text-align: left; white-space: nowrap;
  transition: background 0.15s var(--ease), color 0.15s var(--ease), border-color 0.15s var(--ease);
}
.emp-nav-link svg { width: 17px; height: 17px; flex-shrink: 0; }
.emp-nav-link:hover { background: var(--surface-2); color: var(--text-primary); }
.emp-nav-link.active { background: rgba(37, 99, 235, 0.14); color: var(--text-primary); border-left-color: var(--brand-b); }
.emp-nav-logout {
  display: flex; align-items: center; gap: 10px;
  background: transparent; border: 1px solid var(--border); border-radius: 9px;
  padding: 9px 10px; color: var(--text-muted); font-size: 13px; font-weight: 600;
  margin-top: auto; white-space: nowrap;
  transition: background 0.15s var(--ease), color 0.15s var(--ease), border-color 0.15s var(--ease);
}
.emp-nav-logout svg { width: 17px; height: 17px; flex-shrink: 0; }
.emp-nav-logout:hover { background: rgba(230, 88, 79, 0.12); color: var(--critical); border-color: rgba(230, 88, 79, 0.4); }

.emp-main { flex: 1; min-width: 0; }
.emp-topbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 20px; flex-wrap: wrap; }
.emp-topbar h2 { margin: 0 0 3px; font-size: 21px; letter-spacing: -0.01em; }
.emp-topbar-right { display: flex; align-items: center; gap: 12px; }
.emp-avatar {
  width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(135deg, var(--brand-a), var(--brand-b)); color: #fff;
  display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 13px;
}

.emp-next-card { display: flex; flex-direction: column; }

/* RODADA "Home do Izaias": bloco HOJE -- mesmo acabamento premium
   (--view-*) já usado na Central de Produção, escopado só a #empHojeGrid
   (não mexe em .metric-tile genérico, compartilhado com outras telas). */
#empHojeGrid.metrics-grid { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; margin-top: 4px; }
#empHojeGrid .metric-tile {
  background: linear-gradient(180deg, var(--view-surface-elevated) 0%, var(--view-surface) 100%);
  border: 1px solid var(--view-border); border-radius: var(--view-radius-sm);
}
#empHojeGrid .metric-tile .label { color: var(--view-muted); }
#empHojeGrid .metric-tile .value { overflow-wrap: break-word; font-size: 17px; line-height: 1.25; }
.emp-hoje-pendencia { margin: 10px 0 0; font-size: 12.5px; color: var(--view-warning); font-weight: 600; }
.emp-next-title { font-size: 18px; font-weight: 800; letter-spacing: -0.01em; }
.emp-next-meta { font-size: 12.5px; color: var(--text-secondary); display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; margin-top: 6px; max-width: 100%; }
.emp-next-meta span { overflow-wrap: anywhere; }
.emp-next-meta .overdue { color: var(--critical); font-weight: 700; }
.emp-next-fields { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 14px; margin-top: 8px; font-size: 12.5px; }

/* Dashboard V2 do Editor de Vídeo (rodada "Dashboard V2 do Izaias",
   07/09/2026). Reaproveita .stat-tile-grid/.dash-toggle-chip/.hero-grid/
   .emp-next-* já existentes -- só o essencial de layout novo aqui. */
.v2-proxima-top { display: flex; align-items: flex-start; gap: 12px; min-width: 0; }
.v2-proxima-top > div { min-width: 0; flex: 1 1 auto; }
.v2-fila-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.v2-hero-grid { align-items: stretch; }

/* BLOCO 4 (autônomo noturno): "Minha fila" recolhível -- só o cabeçalho
   ganha cursor/hover, o resto do card (abas/lista) mantém o layout normal. */
.v2-fila-header { cursor: pointer; user-select: none; }
.v2-fila-header:hover .v2-fila-chevron { opacity: 1; }
.v2-fila-header:focus-visible { outline: 2px solid var(--view-cyan); outline-offset: 2px; border-radius: var(--radius-sm); }
.v2-fila-contagem { font-size: 12px; white-space: nowrap; }
.v2-fila-chevron { display: inline-block; opacity: .7; transition: transform 0.15s var(--ease); flex-shrink: 0; }
.v2-fila-chevron.v2-fila-chevron-aberto { transform: rotate(180deg); }

/* Indicadores do topo -- rodada de refinamento visual (07/09/2026):
   diferenciação por categoria via acento de borda + ícone + glow MUITO
   sutil (box-shadow), nunca preenchendo o card inteiro (pedido explícito
   "não transformar em neon"). Escopado a #v2Indicadores pra não afetar
   .stat-tile em nenhuma outra tela do sistema. */
#v2Indicadores { grid-template-columns: repeat(5, minmax(0, 1fr)); }
#v2Indicadores .stat-tile { border-left: 3px solid transparent; }
#v2Indicadores .stat-tile-body .value { font-size: 22px; }
#v2Indicadores .v2-ind-urgentes { border-left-color: var(--critical); box-shadow: 0 2px 14px -8px rgba(230, 88, 79, 0.55); }
#v2Indicadores .v2-ind-urgentes .stat-tile-icon { background: rgba(230, 88, 79, 0.16); color: var(--critical); }
#v2Indicadores .v2-ind-alta { border-left-color: var(--warning); box-shadow: 0 2px 14px -8px rgba(250, 178, 25, 0.5); }
#v2Indicadores .v2-ind-alta .stat-tile-icon { background: rgba(250, 178, 25, 0.16); color: var(--warning); }
#v2Indicadores .v2-ind-producao { border-left-color: #3b82f6; box-shadow: 0 2px 14px -8px rgba(59, 130, 246, 0.5); }
#v2Indicadores .v2-ind-producao .stat-tile-icon { background: rgba(59, 130, 246, 0.16); color: #60a5fa; }
#v2Indicadores .v2-ind-ajustes { border-left-color: #a855f7; box-shadow: 0 2px 14px -8px rgba(168, 85, 247, 0.45); }
#v2Indicadores .v2-ind-ajustes .stat-tile-icon { background: rgba(168, 85, 247, 0.16); color: #c084fc; }
#v2Indicadores .v2-ind-aguardando { border-left-color: #64748b; }
#v2Indicadores .v2-ind-aguardando .stat-tile-icon { background: rgba(100, 116, 139, 0.18); color: #94a3b8; }
/* Grid: 5 colunas em desktop largo; 3+2 em largura intermediária;
   2+2+1 menor; 2 (nunca menos, cabe sem overflow) no mobile mais estreito
   que o sistema suporta hoje. */
@media (max-width: 1280px) { #v2Indicadores { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 860px) { #v2Indicadores { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Próxima entrega -- um pouco mais de destaque que os demais cards,
   sem aumentar exageradamente. */
.v2-proxima-card { border-color: rgba(255, 255, 255, 0.14); background: linear-gradient(165deg, var(--surface-3) 0%, var(--surface) 65%); }
.v2-proxima-card .emp-next-title { font-size: 21px; }
.v2-proxima-card .emp-next-motivo { font-size: 13px; font-weight: 600; }
.v2-proxima-card #v2ProximaAbrirBtn { padding: 10px 22px; font-size: 14.5px; }

/* Minha fila (V2) -- avatar do cliente reaproveitando clienteAvatarHtml,
   e hierarquia de leitura: cliente/produção em destaque, prazo+status
   como metadado secundário compacto. */
.v2-fila-row { display: flex; align-items: center; gap: 10px; }
.v2-fila-row .client-card-avatar { width: 30px; height: 30px; flex-shrink: 0; }
.v2-fila-row-body { min-width: 0; flex: 1 1 auto; }
.emp-next-prazo { font-variant-numeric: tabular-nums; color: var(--text-secondary); }
.emp-next-prazo.atrasada { color: var(--critical); font-weight: 700; }

@media (max-width: 860px) {
  .emp-shell { flex-direction: column; }
  .emp-sidebar { width: 100%; position: static; flex-direction: row; align-items: center; gap: 10px; overflow-x: auto; padding: 10px; }
  .emp-sidebar.collapsed { width: 100%; }
  .emp-sidebar-toggle { display: none; }
  .emp-nav { flex-direction: row; gap: 6px; }
  .emp-nav-group { flex-direction: row; gap: 4px; }
  .emp-nav-label { display: none; }
  .emp-nav-link { border-left: none; border-bottom: 2px solid transparent; white-space: nowrap; }
  .emp-nav-link.active { border-left-color: transparent; border-bottom-color: var(--brand-b); }
  .emp-nav-link span, .emp-nav-logout span { display: none; }
  .emp-nav-logout { margin-top: 0; flex-shrink: 0; }
}

.dash-greeting { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.dash-greeting h2 { margin: 0; font-size: 22px; letter-spacing: -0.01em; }
.dash-greeting .muted { font-size: 13px; text-transform: capitalize; }

.caixa-hero {
  background: linear-gradient(135deg, rgba(37, 99, 235, 0.16), rgba(20, 184, 166, 0.10));
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 20px 24px; margin-bottom: 18px;
  display: flex; flex-direction: column; gap: 6px;
  box-shadow: var(--shadow-soft);
}
.caixa-hero .value { font-size: 34px; font-weight: 800; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; transition: filter 0.15s var(--ease); }
.caixa-hero .value.alert { color: var(--critical); }

.tag-receita { background: var(--good); }
.tag-despesa { background: var(--critical); }
.tag-equipe { background: var(--role-video); }
.value-money { font-variant-numeric: tabular-nums; font-weight: 700; }
.value-money.negative { color: var(--critical); }
.value-money.positive { color: var(--good); }
.status-pill {
  display: inline-flex; align-items: center; font-size: 11px; font-weight: 700;
  padding: 2px 9px; border-radius: 999px;
}
.status-pill.pago { background: rgba(34,197,94,0.15); color: var(--good); }
.status-pill.pendente { background: rgba(250,178,25,0.15); color: var(--warning); }
.status-pill.parcial { background: rgba(59,130,246,0.15); color: #3b82f6; }
.status-pill.vencida { background: rgba(230,88,79,0.15); color: var(--critical); }

.admin-metrics { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); margin-bottom: 18px; }

.badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 999px;
}
.badge.neutral { background: var(--surface-3); color: var(--text-secondary); }

/* Team actions / filters */
.team-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.team-actions select, .team-actions input { font-size: 13px; padding: 8px 10px; }
#searchBox { min-width: 180px; }

/* Kanban board */
.board {
  display: flex; gap: 14px; overflow-x: auto; padding-bottom: 6px;
}
.column {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  width: 260px; min-width: 260px; flex-shrink: 0;
  display: flex; flex-direction: column; max-height: 560px;
}
.column.drag-over { outline: 2px dashed var(--brand-b); outline-offset: -4px; }
.column-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 12px; border-bottom: 1px solid var(--border);
  cursor: pointer; user-select: none;
}
.column-header:hover { background: rgba(255,255,255,0.03); }
.column-title { font-size: 12px; font-weight: 700; display: flex; align-items: center; gap: 7px; }
.column-dot { width: 8px; height: 8px; border-radius: 50%; }
.col-afazer .column-dot { background: var(--text-muted); }
.col-andamento .column-dot { background: var(--brand-a); }
.col-enviado-aprovacao .column-dot { background: var(--warning); }
.col-aprovado .column-dot { background: var(--brand-b); }
.col-aguardando-agendar .column-dot { background: var(--brand-c); }
.col-concluido .column-dot { background: var(--good); }
.column-header-right { display: flex; align-items: center; gap: 8px; }
.column-count { font-size: 11px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.column-caret { font-size: 10px; color: var(--text-muted); transition: transform 0.15s var(--ease); }
.column.expanded .column-caret { transform: rotate(90deg); }

.card-list { padding: 10px; display: flex; flex-direction: column; gap: 9px; overflow-y: auto; flex: 1; }
.empty-col { padding: 18px 8px; text-align: center; color: var(--text-muted); font-size: 12px; }

.task-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 10px; padding: 11px; cursor: grab; display: flex;
  flex-direction: column; gap: 7px;
  transition: transform 0.15s var(--ease), box-shadow 0.15s var(--ease), border-color 0.15s var(--ease);
}
.task-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-soft); border-color: rgba(255,255,255,0.14); }
.task-card:active { cursor: grabbing; }
.task-card.dragging { opacity: 0.4; }
.tc-top { display: flex; justify-content: space-between; gap: 6px; align-items: flex-start; }
.tc-title { font-size: 13px; font-weight: 700; line-height: 1.3; }
.tc-meta { font-size: 11.5px; color: var(--text-secondary); }

.tag {
  display: inline-flex; align-items: center; font-size: 10.5px; font-weight: 700;
  padding: 2px 8px; border-radius: 999px; color: #fff; white-space: nowrap; flex-shrink: 0;
}
.tag-video { background: var(--role-video); }
.tag-social { background: var(--role-social); }
.tag-outro { background: #7c6fe0; }
.tag-avulso { background: var(--series-4); }

.priority { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700; }
.priority-dot { width: 7px; height: 7px; border-radius: 50%; }
.priority-alta .priority-dot { background: var(--critical); }
.priority-alta { color: var(--critical); }
.priority-media .priority-dot { background: var(--warning); }
.priority-media { color: var(--text-secondary); }
.priority-baixa .priority-dot { background: var(--good); }
.priority-baixa { color: var(--good); }

.tc-bottom {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 11px; color: var(--text-muted); border-top: 1px solid var(--border); padding-top: 7px;
}
.prazo { font-variant-numeric: tabular-nums; }
.prazo.atrasada { color: var(--critical); font-weight: 700; }

/* Tables */
.table-wrap { overflow-x: auto; }

/* AUDITORIA GLOBAL DE UX/RESPONSIVIDADE: utilitária reaproveitável --
   qualquer tabela larga (não só Ponto) pode usar esta classe pra fixar a
   1ª coluna durante o scroll horizontal, sem remover nenhuma coluna nem
   ação. Fundo sólido explícito (não transparente): sem isso, o conteúdo
   das outras colunas apareceria por baixo da coluna fixa ao rolar. */
.table-sticky-first th:first-child,
.table-sticky-first td:first-child {
  position: sticky; left: 0; z-index: 1;
  background: var(--view-surface);
}
.table-sticky-first th:first-child { z-index: 2; }
.table-sticky-first tbody tr:hover td:first-child { background: var(--surface-2); }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th, td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--border); white-space: nowrap; }
th { color: var(--text-muted); font-weight: 600; font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.03em; }
tbody tr:hover { background: var(--surface-2); }
.link-btn { color: var(--brand-b); background: none; border: none; font-size: 12px; font-weight: 700; cursor: pointer; }

/* Admin grid */
.admin-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 18px; }
@media (max-width: 820px) { .admin-grid { grid-template-columns: 1fr; } }

.employee-list { display: flex; flex-direction: column; gap: 8px; }
.employee-row {
  display: flex; align-items: center; justify-content: space-between;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 10px 12px; cursor: pointer;
  transition: background 0.15s var(--ease), transform 0.15s var(--ease), border-color 0.15s var(--ease);
}
.employee-row:hover { background: var(--surface-3); transform: translateX(2px); border-color: rgba(255,255,255,0.14); }
.employee-row .er-name { font-weight: 700; font-size: 13.5px; }
.employee-row .er-meta { font-size: 11.5px; color: var(--text-muted); margin-top: 2px; }

.filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.report-summary { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }

/* Dialogs */
dialog {
  border: none; border-radius: var(--radius); padding: 0;
  background: var(--surface); color: var(--text-primary);
  max-width: 460px; width: 92vw;
}
dialog::backdrop { background: rgba(2, 6, 23, 0.65); }
.dialog-card { padding: 20px; display: flex; flex-direction: column; gap: 12px; }
/* AUDITORIA GLOBAL DE UX/RESPONSIVIDADE: item de grid sem min-width:0 não
   encolhe abaixo do min-content do próprio conteúdo -- mesmo bug já
   corrigido em .admin-main (flex) e .prod-cal-* (grid) nesta rodada.
   Aqui quem estourava era um <input type="date"> (largura intrínseca
   nativa do navegador, não encolhe sozinho) dentro de .two-cols em
   #taskDialog -- único dialog, de 46, que ainda tinha overflow real
   depois da regra global do <dialog>. */
.two-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.two-cols > * { min-width: 0; }
@media (max-width: 480px) { .two-cols { grid-template-columns: 1fr; } }
/* AUDITORIA GLOBAL DE UX/RESPONSIVIDADE: flex-wrap generalizado pra
   TODOS os dialogs (era só #prodTaskDialog, ver correção anterior mais
   abaixo agora redundante) -- qualquer rodapé de ações que não caiba
   numa linha só QUEBRA, nunca fica escondido pelo overflow-x:hidden da
   regra base do <dialog>. */
.dialog-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.dialog-actions.split-actions { justify-content: space-between; }
.dialog-actions.split-actions > div { display: flex; gap: 8px; }

/* [ACHADO EM QA REAL -- redesign visual da Central de Produção] O rodapé
   do #prodTaskDialog (modal administrativo do Gestor) tem até ~8 botões
   de ação (Excluir/Duplicar/Enviar p/ Aprovação/Aprovar/Solicitar ajuste/
   Cancelar/Salvar) numa fileira `flex` sem `flex-wrap`. Em telas menores
   que ~1000px isso já ultrapassava a largura do modal; o dialog{
   overflow-y:auto } (ver mais abaixo) tornava esse excesso um scroll
   lateral -- feio, mas pelo menos o botão "Salvar" continuava alcançável
   arrastando a barra. A correção de overflow-x:hidden do #prodTaskDialog
   (rodada anterior) tornou esse excesso simplesmente invisível, sem
   scroll -- ou seja, escondeu um bug real em vez de corrigi-lo. Causa
   raiz de verdade: a fileira de botões precisa quebrar linha. */
#prodTaskDialog .dialog-actions { flex-wrap: wrap; }

.comments-list { display: flex; flex-direction: column; gap: 8px; max-height: 140px; overflow-y: auto; margin-bottom: 8px; }
.comment-item { background: var(--surface-2); border-radius: 8px; padding: 8px 10px; font-size: 12.5px; }
.comment-item .c-meta { color: var(--text-muted); font-size: 10.5px; margin-top: 3px; }
.comment-add-row { display: flex; gap: 8px; }
.comment-add-row input { flex: 1; }

/* ================================================================
   CLIENTES -- mesma linguagem visual do Dashboard (tokens --view-*),
   prompt master autônomo "VIEW GESTOR — CLIENTES + CLIENT COCKPIT".
   Fase 1/3/17: cabeçalho, métricas, abas Ativos/Arquivados e cards
   premium. Não cria um segundo sistema visual -- reaproveita os MESMOS
   tokens/raios/sombras/estados já aprovados no Dashboard.
   ================================================================ */
#adminClientsSection .clients-header {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 16px; margin-bottom: 18px; flex-wrap: wrap;
}
#adminClientsSection .clients-header-main h2 {
  margin: 0; font-size: 26px; font-family: "Sora", "Plus Jakarta Sans", sans-serif;
}
#adminClientsSection .clients-header-subtitle { margin: 4px 0 0; font-size: 13px; color: var(--view-muted); }

.clients-metrics-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 16px;
}
@media (max-width: 900px) { .clients-metrics-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .clients-metrics-grid { grid-template-columns: 1fr; } }

.clients-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin-bottom: 16px;
}
.clients-tabs { display: flex; gap: 8px; }
.clients-toolbar-filters { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-left: auto; }
.clients-search {
  background: rgba(4, 9, 20, 0.5); border: 1px solid var(--view-border-strong);
  border-radius: 999px; padding: 8px 16px; font-size: 12.5px; min-width: 220px;
}
.clients-type-filter {
  background: rgba(4, 9, 20, 0.5); border: 1px solid var(--view-border-strong);
  border-radius: 999px; padding: 8px 14px; font-weight: 600; font-size: 12.5px;
}

/* Clients */
.client-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.client-card {
  background: linear-gradient(180deg, var(--view-surface-elevated) 0%, var(--view-surface) 100%);
  border: 1px solid var(--view-border);
  border-radius: var(--view-radius-sm);
  box-shadow: var(--view-shadow);
  padding: 16px; cursor: pointer;
  display: flex; flex-direction: column; gap: 12px;
  transition: transform 0.18s var(--ease), border-color 0.18s var(--ease), box-shadow 0.2s var(--ease);
}
.client-card:hover { transform: translateY(-2px); border-color: var(--view-border-strong); box-shadow: var(--view-shadow), 0 0 22px rgba(34, 211, 238, 0.07); }
.client-card-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.client-card-name { font-weight: 700; font-size: 16px; color: var(--view-text); }
.client-card-type { font-size: 11px; color: var(--view-muted); margin-top: 2px; }
.client-card-revenue {
  display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; row-gap: 4px;
  padding: 10px 12px; background: rgba(4, 9, 20, 0.34); border: 1px solid var(--view-border);
  border-radius: var(--view-radius-sm);
}
.client-card-revenue-label { font-size: 11px; color: var(--view-muted); font-weight: 600; }
.client-card-revenue-value { font-size: 17px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--view-text); }
.client-card-footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.client-card-op { font-size: 11.5px; font-weight: 600; }
.client-card-op.ok { color: var(--view-green); }
.client-card-op.alert { color: var(--view-danger); }
.client-card-op.muted { color: var(--view-muted); }
.client-card-enter {
  font-size: 12px; font-weight: 700; color: var(--view-cyan); white-space: nowrap;
  display: inline-flex; align-items: center; padding: 4px 9px; margin: -4px -9px -4px 0;
  border-radius: 999px; transition: background 0.15s var(--ease), color 0.15s var(--ease);
}
.client-card:hover .client-card-enter,
.client-card:focus-visible .client-card-enter { background: rgba(34, 211, 238, 0.14); color: #7fe6f7; }
.client-card-reactivate { font-size: 12px; font-weight: 700; white-space: nowrap; }
.client-card-arquivado { opacity: 0.86; }
.client-card-arquivado:hover { opacity: 1; }
.client-card-meta { font-size: 11px; margin-top: -2px; }
/* [5] Próxima entrega: rótulo + valor em 2 linhas (mesma lógica visual de
   Receita/mês) -- destaque de cor/peso quando atrasada/hoje/amanhã, SEM
   animação. Sem próxima entrega, o bloco inteiro nem é gerado (nenhum
   espaço reservado à toa). */
.client-card-proxima-entrega { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.client-card-proxima-entrega-label { font-size: 11px; color: var(--view-muted); font-weight: 600; }
/* RODADA "REFINAMENTO FINAL CLIENTES": título do material nunca quebra em
   várias linhas nem aumenta o card -- trunca com reticências (o valor
   completo continua acessível via title= no elemento pai). */
.client-card-proxima-entrega-value {
  font-size: 12.5px; color: var(--view-text); font-weight: 600;
  display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.client-card-proxima-entrega.atrasada .client-card-proxima-entrega-label,
.client-card-proxima-entrega.atrasada .client-card-proxima-entrega-value { color: var(--view-danger); font-weight: 800; }
.client-card-proxima-entrega.hoje .client-card-proxima-entrega-label,
.client-card-proxima-entrega.hoje .client-card-proxima-entrega-value { color: var(--view-warning); font-weight: 700; }
/* [8] Prioridade do card: faixa discreta na borda esquerda -- nunca um
   badge novo. Só some quando não há nenhum sinal real de atenção. */
.client-card-prioridade { border-left: 3px solid var(--view-danger); }
.client-card-empty { grid-column: 1 / -1; text-align: center; padding: 30px 14px; border: 1px dashed var(--view-border); border-radius: var(--view-radius-sm); }

/* FASE 2B (prompt master noturno, sprint de UX Clientes/Cockpit): cards
   mais ricos -- logo/iniciais, segmento, saúde e próxima entrega.
   Nenhum token novo, só os --view-* já existentes. */
.client-avatar {
  width: 40px; height: 40px; border-radius: 10px; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
  background: var(--view-surface-hi); border: 1px solid var(--view-border);
  font-size: 13px; font-weight: 700; color: var(--view-muted);
}
.client-avatar img { width: 100%; height: 100%; object-fit: cover; }
/* [RODADA "estado de carregamento limpo"] enquanto a signed URL da logo
   ainda está sendo resolvida (data-logo-state="loading", só nos cards de
   Clientes -- .client-card-avatar), fundo neutro do próprio sistema (o
   MESMO --view-surface-hi de base do .client-avatar, nunca herda o
   preto/branco/azul do logoDisplayConfig ainda -- ver
   aplicarEstilosLogoPendentesNoEscopo) + um shimmer BEM discreto, nunca
   chamativo. [data-logo-state="error"] não precisa de estilo novo -- o
   fallback de iniciais já usa o mesmo fundo padrão de sempre. */
.client-card-avatar[data-logo-state="loading"] { position: relative; overflow: hidden; }
.client-card-avatar[data-logo-state="loading"]::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.16), transparent);
  transform: translateX(-100%);
  animation: clientLogoLoadingShimmer 1.6s ease-in-out infinite;
}
@keyframes clientLogoLoadingShimmer { to { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) {
  .client-card-avatar[data-logo-state="loading"]::after { animation: none; }
}
.client-card-identity { display: flex; align-items: flex-start; gap: 10px; min-width: 0; }
.client-card-heading { min-width: 0; }
.client-card-heading .client-card-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.client-card-segmento { font-size: 11px; color: var(--view-cyan); margin-top: 2px; opacity: 0.85; }
.client-card-saude-row { display: flex; }
.client-card-saude { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 600; }
.client-card-saude-dot { width: 6px; height: 6px; border-radius: 50%; display: inline-block; }
.client-card-saude.boa { color: var(--view-green); }
.client-card-saude.boa .client-card-saude-dot { background: var(--view-green); }
.client-card-saude.atencao { color: var(--view-warning); }
.client-card-saude.atencao .client-card-saude-dot { background: var(--view-warning); }
.client-card-saude.critica { color: var(--view-danger); }
.client-card-saude.critica .client-card-saude-dot { background: var(--view-danger); }
/* SPRINT "REFINAMENTO CARDS CLIENTES" (rodada card): 4ª faixa (Urgente,
   0-29) -- clientScore mantém a MESMA polaridade (quanto MENOR, pior);
   só a apresentação ganhou um degrau extra além de "critica", um tom mais
   forte que --view-danger pra marcar o nível mais severo. */
.client-card-saude.urgente { color: #dc2626; font-weight: 700; }
.client-card-saude.urgente .client-card-saude-dot { background: #dc2626; }

/* Preview do logo no cadastro do cliente (mesma classe .client-avatar,
   só um pouco maior para facilitar a conferência antes de salvar). */
.client-logo-preview-row { display: flex; align-items: center; gap: 10px; margin: -6px 0 4px; }
.client-logo-preview-row .client-avatar { width: 48px; height: 48px; font-size: 15px; }

/* SPRINT "UPLOAD DA LOGO DO CLIENTE" (fechamento, 06/09/2026): área própria
   de identidade visual do cliente dentro do modal Editar cliente --
   reaproveita os tokens --view-* já existentes, mesma linguagem visual dos
   cards e do header do Cockpit (nenhuma cor nova). */
.client-logo-editor {
  display: flex; align-items: flex-start; gap: 14px;
  background: rgba(4, 9, 20, 0.35); border: 1px solid var(--view-border);
  border-radius: var(--view-radius-sm); padding: 14px; margin: -2px 0 4px;
}
.client-logo-editor-avatar { width: 64px; height: 64px; font-size: 19px; flex-shrink: 0; }
.client-logo-editor-actions { min-width: 0; flex: 1; }
.client-logo-editor-title { font-weight: 700; font-size: 13px; color: var(--view-text); margin-bottom: 2px; }
.client-logo-editor-hint { margin: 0 0 8px; }
.client-logo-editor-buttons { display: flex; flex-wrap: wrap; gap: 8px; }
.client-logo-editor-buttons .btn.small { padding: 7px 14px; font-size: 12.5px; }
.client-logo-editor-error {
  margin: 8px 0 0; font-size: 12px; font-weight: 600; color: var(--view-danger);
  background: rgba(248, 113, 113, 0.08); border: 1px solid rgba(248, 113, 113, 0.25);
  border-radius: var(--view-radius-sm); padding: 6px 10px;
}
.client-logo-editor-advanced { margin-top: 10px; }
.client-logo-editor-advanced summary { cursor: pointer; user-select: none; }
.client-logo-editor-advanced summary:focus-visible { outline: 2px solid var(--view-cyan); outline-offset: 2px; }

/* Card "Publicação de teste no Instagram" (App Review) -- área de
   selecionar/arrastar foto ou vídeo do computador. Reaproveita os mesmos
   tokens de borda/superfície do resto do sistema, nada novo. */
.meta-media-dropzone {
  border: 1px dashed var(--border); border-radius: var(--view-radius-sm, 10px);
  padding: 16px; text-align: center; background: var(--surface-2);
}
.meta-media-dropzone.is-dragover { border-color: var(--accent, #6c8cff); background: var(--surface-3); }
.client-logo-editor-advanced label { margin-top: 8px; }

/* SPRINT "EDITOR DE LOGO" (evolução sobre o upload real): dialog próprio,
   maior, seguindo o MESMO padrão já usado pelo #prodWizardDialog (maior
   especificidade por #id, escopado, sem afetar os demais ~40 dialogs do
   sistema). Mesma linguagem visual (tokens --view-*, .btn/.icon-btn já
   existentes) -- nenhum visual genérico à parte. */
#clientLogoEditorDialog:not([open]) { display: none !important; }
#clientLogoEditorDialog[open] {
  max-width: min(94vw, 1160px); width: min(94vw, 1160px);
  max-height: 90vh;
  display: flex; flex-direction: column;
  overflow: hidden; padding: 0; border: none; background: transparent;
}
.logo-editor-card {
  display: flex; flex-direction: column; gap: 14px;
  max-height: 90vh; overflow: hidden;
  padding: 20px 22px 16px;
}
.logo-editor-subtitle { margin: 2px 0 0; max-width: 62ch; }
.logo-editor-body {
  display: grid; grid-template-columns: 1fr 1.35fr 1fr; gap: 16px;
  overflow-y: auto; min-height: 0; padding: 2px;
}
.logo-editor-col {
  display: flex; flex-direction: column; gap: 8px;
  background: rgba(4, 9, 20, 0.35); border: 1px solid var(--view-border);
  border-radius: var(--view-radius-sm); padding: 12px;
}
.logo-editor-col-title { font-weight: 700; font-size: 12.5px; color: var(--view-muted); text-transform: uppercase; letter-spacing: 0.03em; }
.logo-editor-col-title-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.logo-editor-zoom { display: flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700; color: var(--view-text); }
.logo-editor-zoom .icon-btn { width: 26px; height: 26px; }
.logo-editor-zoom span { min-width: 38px; text-align: center; font-variant-numeric: tabular-nums; }

.logo-editor-checker {
  width: 100%; position: relative; border-radius: var(--view-radius-sm);
  border: 1px solid var(--view-border); overflow: hidden;
  background-image:
    linear-gradient(45deg, #2a2f3a 25%, transparent 25%), linear-gradient(-45deg, #2a2f3a 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #2a2f3a 75%), linear-gradient(-45deg, transparent 75%, #2a2f3a 75%);
  background-size: 16px 16px; background-position: 0 0, 0 8px, 8px -8px, -8px 0;
  background-color: #1b1f29;
}
.logo-editor-checker::before { content: ""; display: block; padding-top: 100%; }
.logo-editor-checker img { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); max-width: 88%; max-height: 88%; object-fit: contain; }

.logo-editor-stage {
  width: 100%; position: relative; border-radius: var(--view-radius-sm);
  border: 1px solid var(--view-border); overflow: hidden;
  cursor: grab; touch-action: none; background: var(--view-blue);
}
.logo-editor-stage::before { content: ""; display: block; padding-top: 100%; }
.logo-editor-stage:active { cursor: grabbing; }
.logo-editor-stage img { position: absolute; top: 50%; left: 50%; width: 100%; height: 100%; object-fit: contain; transform: translate(-50%, -50%); pointer-events: none; }
.logo-editor-stage-safe {
  position: absolute; inset: 10%; border: 1px dashed rgba(255, 255, 255, 0.35); border-radius: 8px; pointer-events: none;
}
/* CORREÇÃO DE QA -- REDIMENSIONAMENTO DIRETO (item 1/2): caixa de
   seleção em volta dos LIMITES VISUAIS da imagem (nunca a mesma linha da
   área segura acima -- estilo bem diferente de propósito, pra nunca
   confundir "tamanho da imagem" com "tamanho da área segura"). */
.logo-editor-selection {
  position: absolute; border: 1px dashed var(--view-cyan); box-sizing: border-box; pointer-events: none;
}
.logo-editor-handle {
  position: absolute; width: 12px; height: 12px; margin: -6px 0 0 -6px;
  background: var(--view-cyan); border: 2px solid #fff; border-radius: 3px;
  pointer-events: auto; cursor: nwse-resize; touch-action: none;
}
.logo-editor-handle[data-handle="nw"] { top: 0; left: 0; }
.logo-editor-handle[data-handle="ne"] { top: 0; left: 100%; cursor: nesw-resize; }
.logo-editor-handle[data-handle="sw"] { top: 100%; left: 0; cursor: nesw-resize; }
.logo-editor-handle[data-handle="se"] { top: 100%; left: 100%; }
.logo-editor-tools { display: flex; flex-wrap: wrap; gap: 6px; }
.logo-editor-tool {
  flex: 1 1 0; min-width: 64px; padding: 7px 6px; font-size: 11.5px; font-weight: 700;
  background: var(--view-surface-hi); color: var(--view-muted); border: 1px solid var(--view-border);
  border-radius: var(--view-radius-sm); cursor: pointer; text-align: center;
}
.logo-editor-tool:hover { color: var(--view-text); border-color: var(--view-cyan); }
.logo-editor-tool.active { color: var(--view-cyan); border-color: var(--view-cyan); background: rgba(34, 211, 238, 0.1); }

.logo-editor-swatches { display: flex; gap: 8px; flex-wrap: wrap; }
.logo-editor-swatch {
  flex: 1 1 0; min-width: 70px; height: 40px; border-radius: var(--view-radius-sm);
  border: 2px solid var(--view-border); cursor: pointer; font-size: 11px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; text-align: center; padding: 4px;
}
.logo-editor-swatch[data-bg="sistema"] { background: var(--view-blue); color: #fff; }
.logo-editor-swatch[data-bg="branco"] { background: #ffffff; color: #111; }
.logo-editor-swatch[data-bg="preto"] { background: #000000; color: #fff; }
.logo-editor-swatch.active { border-color: var(--view-cyan); box-shadow: 0 0 0 2px rgba(34, 211, 238, 0.35); }

.logo-editor-preview-title { font-weight: 700; font-size: 12.5px; color: var(--view-muted); text-transform: uppercase; letter-spacing: 0.03em; margin-top: 4px; }
.logo-editor-preview-avatar { width: 96px; height: 96px; font-size: 26px; align-self: center; }

@media (max-width: 900px) {
  .logo-editor-body { grid-template-columns: 1fr; overflow-y: auto; }
  #clientLogoEditorDialog[open] { max-height: 94vh; }
}

/* SPRINT "FECHAR CARDS INTELIGENTES" -- altura consistente (regra 17): o
   grid ja estica os cards da mesma linha pra mesma altura (align-items
   stretch, default do CSS Grid); faltava so ancorar o rodape embaixo pra
   nao sobrar espaco solto no meio dos cards com menos conteudo opcional. */
.client-card { min-height: 268px; }
.client-card-footer { margin-top: auto; }

/* Elementos internos acionaveis do card (produções abertas / receita /
   próxima entrega) -- indicação discreta de que existe uma ação própria,
   nunca um botão grande e ruidoso (regra "hover/indicação de ação"). O
   clique neles NUNCA deve também disparar o card pai (ver
   ativarNavCockpit/checagem em renderClients()). */
.client-card-op.clickable,
.client-card-meta.clickable,
.client-card-proxima-entrega.clickable {
  cursor: pointer;
  border-radius: var(--view-radius-sm);
  padding: 2px 4px; margin: -2px -4px;
  transition: background-color 0.15s var(--ease), color 0.15s var(--ease);
}
.client-card-op.clickable:hover,
.client-card-meta.clickable:hover,
.client-card-proxima-entrega.clickable:hover { background: rgba(34, 211, 238, 0.08); }
.client-card-op.clickable:focus-visible,
.client-card-meta.clickable:focus-visible,
.client-card-proxima-entrega.clickable:focus-visible,
.client-card:focus-visible {
  outline: 2px solid var(--view-cyan); outline-offset: 2px;
}
.client-card-op.clickable::after,
.client-card-meta.clickable::after,
.client-card-proxima-entrega.clickable::after { content: " ›"; opacity: 0.6; margin-left: 4px; }
.client-card-indicators { display: flex; flex-wrap: wrap; gap: 4px 10px; }

/* Financeiro contextual -- filtros aplicados sempre visiveis (regra
   "FILTRO VISIVEL AO CHEGAR"), nunca um filtro escondido em memoria. */
.active-filters-row { display: flex; flex-wrap: wrap; gap: 8px; margin: -4px 0 4px; }
.active-filter-chip {
  display: inline-flex; align-items: center; gap: 4px;
  background: rgba(34, 211, 238, 0.08); border: 1px solid var(--view-border-strong);
  border-radius: 999px; padding: 4px 6px 4px 10px; font-size: 12px; color: var(--view-text);
}
.active-filter-chip-clear {
  background: none; border: none; color: var(--view-muted); cursor: pointer;
  font-size: 14px; line-height: 1; padding: 2px 4px; border-radius: 50%;
}
.active-filter-chip-clear:hover { color: var(--view-text); background: rgba(255, 255, 255, 0.08); }
.active-filter-chip-clear:focus-visible { outline: 2px solid var(--view-cyan); outline-offset: 1px; }

/* SPRINT "CARDS INTELIGENTES E ACIONÁVEIS": indicação discreta de que um
   tile/linha tem uma ação real ao clicar -- reaproveita .clickable (já
   existente em .stat-tile/.metric-tile) e estende pra .employee-row. */
.stat-tile.clickable:focus-visible,
.employee-row.clickable:focus-visible { outline: 2px solid var(--view-cyan); outline-offset: 2px; }
.employee-row.clickable { cursor: pointer; }

.status-badge {
  display: inline-flex; align-items: center; font-size: 10.5px; font-weight: 700;
  padding: 2px 9px; border-radius: 999px; white-space: nowrap;
}
.status-badge.Ativo { background: rgba(34,197,94,0.15); color: var(--good); }
.status-badge.Pausado { background: rgba(250,178,25,0.15); color: var(--warning); }
.status-badge.Inativo, .status-badge.Encerrado, .status-badge.Cancelado, .status-badge.Quitada { background: rgba(255,255,255,0.08); color: var(--text-muted); }
.status-badge.em_producao { background: rgba(255,255,255,0.08); color: var(--text-muted); }
.status-badge.revisao { background: rgba(250,178,25,0.15); color: var(--warning); }
.status-badge.aprovado { background: rgba(34,197,94,0.15); color: var(--good); }
.status-badge.entregue { background: rgba(57,135,229,0.15); color: var(--role-video); }
.status-badge.concluido { background: rgba(144,133,233,0.18); color: var(--brand-c); }

.agenda-info { display: flex; flex-direction: column; gap: 6px; background: var(--surface-2); border-radius: var(--radius-sm); padding: 10px 12px; }
.ai-row { display: flex; justify-content: space-between; gap: 10px; font-size: 12.5px; }
.ai-row strong { font-weight: 700; text-align: right; }
.link-chip { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.link-chip a { color: var(--brand-b); font-size: 12px; word-break: break-all; }
.link-chip button { color: var(--critical); background: none; border: none; cursor: pointer; font-size: 16px; line-height: 1; flex-shrink: 0; }

.dt-add-row { display: flex; gap: 8px; flex-wrap: wrap; }
.dt-add-row #newDeliveryTypeInput { flex: 2; min-width: 160px; }
.dt-add-row #newDeliveryTypeValor { flex: 1; min-width: 100px; }

.dash-toggle-row { display: flex; gap: 8px; flex-wrap: wrap; }
.dash-toggle-chip {
  background: var(--surface-2); border: 1px solid var(--border); color: var(--text-secondary);
  font-size: 12.5px; font-weight: 600; padding: 7px 14px; border-radius: 999px; cursor: pointer;
}
.dash-toggle-chip:hover { background: var(--surface-3); }
.dash-toggle-chip.active { background: var(--brand-b); border-color: var(--brand-b); color: #fff; }

.section-sep {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--text-muted); border-top: 1px solid var(--border); padding-top: 12px; margin-top: 2px;
}
.client-summary-box {
  background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 10px 12px; display: grid; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); gap: 8px;
  font-size: 12px;
}
.client-summary-box .cs-label { color: var(--text-muted); font-size: 10.5px; }
.client-summary-box .cs-value { font-weight: 700; font-variant-numeric: tabular-nums; }

/* Goals */
.goals-list { display: flex; flex-direction: column; gap: 12px; }
.goal-card {
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 12px 14px; cursor: pointer;
  transition: background 0.15s var(--ease), transform 0.15s var(--ease);
}
.goal-card:hover { background: var(--surface-3); transform: translateY(-1px); }
.goal-card .gc-top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; gap: 8px; }
.goal-card .gc-name { font-weight: 700; font-size: 13.5px; }
.goal-card .gc-values { font-size: 12px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.goal-bar { height: 8px; border-radius: 999px; background: var(--surface-3); overflow: hidden; }
.goal-bar-fill { height: 100%; background: linear-gradient(90deg, var(--brand-a), var(--brand-b)); border-radius: 999px; transition: width 0.5s var(--ease); }
.goal-card .gc-pct { font-size: 11px; color: var(--text-muted); margin-top: 6px; text-align: right; }

/* Debts / cards rows */
.employee-row.scope-Pessoal { border-left: 3px solid var(--role-social); }
.employee-row.scope-Empresa { border-left: 3px solid var(--role-video); }

/* Nova Tarefa (produção) */
/* Sem overflow-x explícito, a regra base "dialog{ overflow-y:auto }" faz o
   eixo X computar para auto também (comportamento de spec, não escolha de
   design) -- é a mesma causa raiz já corrigida em #configOperacionalDialog
   e .ed-dialog. #prodTaskDialog (modal administrativo do Gestor, único
   consumidor real de .wide) ainda não tinha essa correção. Auditado: não
   há elemento com largura fixa maior que o dialog dentro dele -- isto
   fecha a causa raiz, não esconde conteúdo quebrado. */
dialog.wide { max-width: 760px; overflow-x: hidden; }
.resp-list { display:flex; flex-direction:column; gap:2px; max-height:170px; overflow-y:auto; border:1px solid var(--border); border-radius:var(--radius-sm); padding:6px 10px; background:var(--surface-2); }
.resp-row { display:flex; align-items:center; gap:10px; padding:6px 0; font-size:13px; border-bottom:1px solid var(--border); }
.resp-row:last-child { border-bottom: none; }
.resp-row input[type="checkbox"], .resp-row input[type="radio"] { width:auto; }
.resp-row .resp-name { flex:1; }
.resp-row .resp-principal-label { font-size:10.5px; color:var(--text-muted); display:flex; align-items:center; gap:4px; white-space:nowrap; }

.priority-normal .priority-dot { background: var(--text-muted); }
.priority-normal { color: var(--text-secondary); }
.priority-urgente .priority-dot { background: var(--critical); box-shadow: 0 0 0 3px rgba(230,88,79,0.18); }
.priority-urgente { color: var(--critical); font-weight: 800; }

.prod-status-pill { display:inline-flex; align-items:center; gap:5px; font-size:10.5px; font-weight:700; padding:3px 9px; border-radius:999px; white-space:nowrap; }
.prod-status-dot { width:7px; height:7px; border-radius:50%; flex-shrink:0; }
.st-c1 { background: rgba(57,135,229,0.15); color: var(--series-1); } .st-c1 .prod-status-dot, .st-c1.column-dot { background: var(--series-1); }
.st-c2 { background: rgba(217,89,38,0.15); color: var(--series-2); } .st-c2 .prod-status-dot, .st-c2.column-dot { background: var(--series-2); }
.st-c3 { background: rgba(25,158,112,0.15); color: var(--series-3); } .st-c3 .prod-status-dot, .st-c3.column-dot { background: var(--series-3); }
.st-c4 { background: rgba(201,133,0,0.15); color: var(--series-4); } .st-c4 .prod-status-dot, .st-c4.column-dot { background: var(--series-4); }
.st-c5 { background: rgba(213,81,129,0.15); color: var(--series-5); } .st-c5 .prod-status-dot, .st-c5.column-dot { background: var(--series-5); }
.st-c6 { background: rgba(79,191,79,0.15); color: var(--series-6); } .st-c6 .prod-status-dot, .st-c6.column-dot { background: var(--series-6); }
.st-c7 { background: rgba(144,133,233,0.15); color: var(--series-7); } .st-c7 .prod-status-dot, .st-c7.column-dot { background: var(--series-7); }
.st-c8 { background: rgba(230,103,103,0.15); color: var(--series-8); } .st-c8 .prod-status-dot, .st-c8.column-dot { background: var(--series-8); }

.prod-code { font-size:11px; color:var(--text-muted); font-weight:700; font-variant-numeric:tabular-nums; }

.checklist-list { display:flex; flex-direction:column; gap:6px; margin-bottom:8px; }
.checklist-item { display:flex; align-items:center; gap:8px; background:var(--surface-2); border-radius:8px; padding:7px 10px; font-size:13px; }
.checklist-item input[type="checkbox"] { width:auto; flex-shrink:0; }
.checklist-item .ci-text { flex:1; }
.checklist-item.done .ci-text { text-decoration: line-through; color: var(--text-muted); }
.checklist-item button { background:none; border:none; color:var(--critical); cursor:pointer; font-size:15px; line-height:1; flex-shrink:0; }
.checklist-add-row { display:flex; gap:8px; margin-bottom:8px; }
.checklist-add-row input { flex:1; }
.checklist-progress-row { display:flex; align-items:center; gap:10px; font-size:11.5px; color:var(--text-muted); margin-bottom:4px; }

.ref-row, .version-row { background:var(--surface-2); border-radius:8px; padding:8px 10px; font-size:12.5px; display:flex; justify-content:space-between; align-items:flex-start; gap:8px; margin-bottom:6px; }
.ref-row .ref-info, .version-row .v-info { flex:1; }
.ref-row a, .version-row a { color: var(--brand-b); word-break: break-all; }
.ref-row button, .version-row button { background:none; border:none; color:var(--critical); cursor:pointer; font-size:15px; line-height:1; flex-shrink:0; }
.add-row-inline { display:grid; grid-template-columns: 1fr 1fr; gap:8px; margin-bottom:8px; }
.add-row-inline .full-span { grid-column: 1 / -1; }
.btn.full { display:block; text-align:center; }

/* LINKS AMIGÁVEIS DE APROVAÇÃO (09/09/2026): .btn já cobre <button>, mas um
   <a> precisa também de text-decoration:none -- reusa .btn.secondary/.full
   inteiros, só complementa o que falta pra parecer/comportar exatamente
   como os outros botões do painel (nenhuma cor/tamanho/raio novo). */
.fallback-manual-open-link { text-decoration: none; }

.dep-quick-actions { display:flex; gap:8px; flex-wrap:wrap; margin-top:2px; margin-bottom:2px; }

.prod-card .tc-code { font-size:10px; color: var(--text-muted); font-weight:700; }

/* Logo real do cliente no card do Kanban de Produção (reaproveita
   .client-avatar/.client-card-avatar -- mesma infraestrutura de
   cache/loading/erro dos cards de Clientes). .prod-card-avatar só ajusta
   o tamanho para caber numa linha de metadado compacta do card. */
.prod-card .tc-meta { display: flex; align-items: center; gap: 7px; }
.prod-card .tc-meta-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.prod-card-avatar.client-avatar { width: 20px; height: 20px; border-radius: 6px; font-size: 9px; flex: 0 0 auto; }

/* =====================================================================
   REDESIGN VISUAL -- Central de Produção (#adminProductionSection).
   Só esta tela. Reusa os tokens --view-* já construídos para o Dashboard
   (mesma direção "dark premium" da referência aprovada) -- ver o bloco
   ":root { --view-* }" mais abaixo neste arquivo. Nenhuma cor nova
   inventada, nenhuma lib externa. Tudo escopado por #id (nunca a classe
   genérica sem prefixo), porque .metric-tile/.board/.dash-toggle-row/
   .team-actions são compartilhadas com Dashboard/Equipe/Agendamento/
   Financeiro -- redesenhar a classe genérica vazaria pra telas fora do
   escopo desta rodada.
   ===================================================================== */

/* ---- Cabeçalho ---- */
.prod-hub-title-row { align-items: flex-start; }
.prod-hub-heading { display: flex; align-items: flex-start; gap: 12px; min-width: 0; }
.prod-hub-icon {
  flex: 0 0 auto; width: 38px; height: 38px; border-radius: 11px;
  display: flex; align-items: center; justify-content: center; font-size: 18px;
  background: linear-gradient(135deg, rgba(34, 211, 238, 0.22), rgba(59, 130, 246, 0.18));
  border: 1px solid var(--view-border-strong);
}
.prod-hub-actions { display: flex; align-items: center; gap: 8px; }

/* Menu "mais ações" -- <details>/<summary> nativo, sem JS novo de estado */
.prod-actions-menu { position: relative; }
.prod-actions-menu summary {
  list-style: none; cursor: pointer; width: 38px; height: 38px; border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 700;
  color: var(--view-muted); background: var(--view-surface-hi); border: 1px solid var(--view-border);
  transition: border-color 0.15s var(--ease), color 0.15s var(--ease);
}
.prod-actions-menu summary::-webkit-details-marker { display: none; }
.prod-actions-menu summary:hover { color: var(--view-text); border-color: var(--view-border-strong); }
.prod-actions-menu[open] summary { color: var(--view-cyan); border-color: rgba(34, 211, 238, 0.4); }
.prod-actions-menu-list {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 40; min-width: 210px;
  background: linear-gradient(180deg, var(--view-surface-elevated) 0%, var(--view-surface) 100%);
  border: 1px solid var(--view-border); border-radius: var(--view-radius-sm); box-shadow: var(--view-shadow);
  padding: 6px; display: flex; flex-direction: column; gap: 2px;
}
.prod-actions-menu-item {
  text-align: left; background: none; border: none; color: var(--view-text);
  font-size: 13px; padding: 9px 10px; border-radius: 8px; cursor: pointer;
  display: flex; align-items: center; gap: 8px; font-family: inherit;
}
.prod-actions-menu-item:hover { background: var(--view-surface-hi); }

/* ---- Indicadores (#prodMetrics) ---- */
#prodMetrics.metrics-grid { gap: 10px; }
#prodMetrics .metric-tile {
  background: linear-gradient(180deg, var(--view-surface-elevated) 0%, var(--view-surface) 100%);
  border: 1px solid var(--view-border); border-radius: var(--view-radius-sm);
  padding: 13px 15px; box-shadow: 0 10px 24px rgba(1, 5, 14, 0.28);
  border-left: 3px solid var(--view-border-strong);
}
#prodMetrics .metric-tile:hover { border-color: var(--view-border-strong); background: var(--view-surface-hi); }
#prodMetrics .metric-tile.alert { border-left-color: var(--view-danger); }
#prodMetrics .metric-tile.ok { border-left-color: var(--view-green); }
#prodMetrics .metric-tile .value { font-family: "Sora", "Plus Jakarta Sans", sans-serif; }
#prodMetrics .metric-tile .label { color: var(--view-muted); }

/* ---- Filtros (#adminProductionSection .prod-filters-row) ---- */
.prod-filters-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 14px; }
.prod-filters-search {
  flex: 1 1 240px; min-width: 180px; max-width: 100%; display: flex; align-items: center; gap: 8px;
  background: var(--view-surface-hi); border: 1px solid var(--view-border); border-radius: 999px;
  padding: 8px 14px;
}
.prod-filters-search-icon { font-size: 13px; opacity: 0.7; flex-shrink: 0; }
.prod-filters-search input {
  border: none; background: none; outline: none; color: var(--view-text);
  font-size: 13px; width: 100%; padding: 0;
}
/* CORREÇÃO RESPONSIVIDADE MOBILE (10/09/2026, achado real -- ver print):
   "flex: 0 0 auto" nunca deixava o select encolher -- um <select> assume a
   largura INTRÍNSECA do texto da opção SELECIONADA (não do placeholder
   curto "Todos os..."), então escolher um cliente/responsável com nome
   longo forçava o próprio elemento a ficar mais largo que a tela inteira,
   empurrando ".prod-filters-row" (e a página toda) pra um scroll horizontal
   -- reproduzido de verdade em 375px (docWidth foi de 375 para 460px só
   trocando a opção selecionada). "flex: 0 1 auto" mantém o comportamento
   ATUAL no desktop (grow:0 -- nunca estica além do conteúdo quando sobra
   espaço) e só passa a permitir encolher (shrink:1, já era o default antes
   do "0 0" ter zerado) quando o espaço realmente aperta. "min-width: 0"
   é necessário além do shrink:1 -- sem isso, o mínimo automático de um
   flex item ainda respeita o min-content do <select> em vários navegadores,
   que pode continuar largo demais. "max-width: 100%" é o backstop: mesmo
   que o cálculo de flex falhe por algum motivo, o select nunca ultrapassa
   a largura disponível da própria linha. overflow/text-overflow fazem o
   texto da opção comprida truncar com "…" em vez de estourar a caixa.
   Nenhuma mudança nesta regra afeta desktop (nunca há aperto de espaço lá,
   shrink:1 nunca entra em ação). */
.prod-filters-row select {
  background: var(--view-surface-hi); border: 1px solid var(--view-border); color: var(--view-text);
  border-radius: var(--radius-sm); font-size: 12.5px; padding: 8px 10px;
  flex: 0 1 auto; min-width: 0; max-width: 100%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.prod-filters-more { position: relative; flex: 0 0 auto; }
.prod-filters-more summary {
  list-style: none; cursor: pointer; font-size: 12.5px; font-weight: 600; color: var(--view-text);
  background: var(--view-surface-hi); border: 1px solid var(--view-border); border-radius: var(--radius-sm);
  padding: 8px 12px; display: flex; align-items: center; gap: 6px;
}
.prod-filters-more summary::-webkit-details-marker { display: none; }
.prod-filters-more summary::after { content: "▾"; font-size: 9px; opacity: 0.7; }
.prod-filters-more[open] summary { border-color: var(--view-border-strong); color: var(--view-cyan); }
.prod-filters-more-list {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 40; min-width: 220px;
  background: linear-gradient(180deg, var(--view-surface-elevated) 0%, var(--view-surface) 100%);
  border: 1px solid var(--view-border); border-radius: var(--view-radius-sm); box-shadow: var(--view-shadow);
  padding: 12px; display: flex; flex-direction: column; gap: 10px;
}
.prod-filters-more-list label { display: flex; flex-direction: column; gap: 4px; font-size: 11.5px; color: var(--view-muted); }
.prod-filters-more-list select { width: 100%; max-width: 100%; }
.prod-filters-clear { flex: 0 0 auto; font-size: 12px; }

/* ---- Toggle de visualização (#prodViewToggles) ---- */
.prod-view-toggles { margin-bottom: 14px; }
#prodViewToggles.dash-toggle-row .dash-toggle-chip {
  background: var(--view-surface-hi); border: 1px solid var(--view-border); color: var(--view-muted);
}
#prodViewToggles.dash-toggle-row .dash-toggle-chip:hover { color: var(--view-text); }
#prodViewToggles.dash-toggle-row .dash-toggle-chip.active {
  background: linear-gradient(90deg, var(--view-cyan), var(--view-blue));
  color: #04131d; border-color: transparent; font-weight: 700;
}

/* ---- Kanban (#prodBoard) ---- */
#prodViewKanban { padding: 14px; }
#prodBoard { gap: 12px; }
#prodBoard .column {
  background: linear-gradient(180deg, var(--view-surface-elevated) 0%, var(--view-surface) 100%);
  border: 1px solid var(--view-border); border-radius: var(--view-radius-sm);
  width: 270px; min-width: 270px;
}
#prodBoard .column-header { border-bottom: 1px solid var(--view-border); padding: 12px 13px; }
#prodBoard .column-title { color: var(--view-text); font-size: 12.5px; letter-spacing: 0.01em; }
#prodBoard .column-count {
  background: var(--view-surface-hi); border-radius: 999px; padding: 1px 7px; color: var(--view-muted);
}
#prodBoard .card-list { padding: 10px; gap: 8px; }
#prodBoard .empty-col { color: var(--view-muted); }

/* Card de produção -- logo + título + meta, clicável (o card inteiro já
   abre a produção, ver o listener existente em renderProdBoard). */
#prodBoard .task-card.prod-card {
  background: var(--view-surface); border: 1px solid var(--view-border); border-radius: 12px;
  padding: 12px; gap: 8px;
}
#prodBoard .task-card.prod-card:hover {
  border-color: rgba(34, 211, 238, 0.35); box-shadow: 0 10px 26px rgba(1, 5, 14, 0.35), 0 0 0 1px rgba(34, 211, 238, 0.08);
}
#prodBoard .tc-title { color: var(--view-text); }
#prodBoard .tc-bottom { border-top-color: var(--view-border); color: var(--view-muted); }

/* ---- Lista (#prodViewLista) -- continua importante para consulta
   detalhada (item 10 do pedido: não remover, só deixar de parecer
   planilha antiga). Só espaçamento/leitura/hover -- renderProdList()
   continua gerando exatamente as mesmas linhas/colunas. ---- */
#prodViewLista { padding: 6px; }
#prodViewLista table { border-collapse: separate; border-spacing: 0; }
#prodViewLista th {
  color: var(--view-muted); background: var(--view-surface); position: sticky; top: 0; z-index: 1;
  padding: 12px 14px; border-bottom: 1px solid var(--view-border-strong);
}
#prodViewLista td { padding: 12px 14px; border-bottom: 1px solid var(--view-border); color: var(--view-text); }
#prodViewLista tbody tr { transition: background 0.12s var(--ease); }
#prodViewLista tbody tr:hover { background: var(--view-surface-hi); }
#prodViewLista tbody tr:last-child td { border-bottom: none; }

/* ---- Por colaborador (#prodByEmployeeList) ---- */
#prodByEmployeeList.employee-list { gap: 10px; }
#prodByEmployeeList .employee-row {
  background: linear-gradient(180deg, var(--view-surface-elevated) 0%, var(--view-surface) 100%);
  border: 1px solid var(--view-border); border-radius: var(--view-radius-sm);
}
#prodByEmployeeList .employee-row:hover { border-color: var(--view-border-strong); background: var(--view-surface-hi); transform: translateX(2px); }

/* ---- Responsividade (item 13 do pedido): nenhum scroll horizontal da
   TELA inteira. O Kanban pode rolar dentro da própria área (.board já
   tem overflow-x:auto, comportamento existente, preservado); cabeçalho,
   filtros e modais nunca. ---- */
.prod-hub-heading > div { min-width: 0; }
.prod-hub-heading h3,
.prod-hub-heading .muted { overflow-wrap: break-word; }
.prod-hub-actions { flex-shrink: 0; }
.prod-actions-menu-list,
.prod-filters-more-list { max-width: calc(100vw - 32px); }

@media (max-width: 900px) {
  .prod-hub-title-row { align-items: flex-start; }
  .prod-hub-actions { width: 100%; justify-content: flex-end; }
  #prodMetrics.metrics-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .prod-filters-search { flex-basis: 100%; }
  .prod-filters-row select { flex: 1 1 auto; }
  /* CORREÇÃO RESPONSIVIDADE MOBILE (10/09/2026): ".prod-filters-more-list"
     abria ancorado em "right: 0" relativo ao próprio <details> -- em telas
     estreitas, o gatilho "Filtros" pode acabar em QUALQUER ponto horizontal
     da linha (depende de quantos selects couberam antes de quebrar), e um
     painel de min-width:220px ancorado num ponto imprevisível do gatilho
     sempre arrisca sair da tela pra um lado ou pro outro -- reproduzido de
     verdade nos dois sentidos: "right:0" cortava pela ESQUERDA (X
     negativo), e a primeira tentativa de correção ("left:0") só moveu o
     mesmo problema pra DIREITA. A causa real é depender da posição do
     gatilho; a correção real é parar de depender dela -- "position: fixed"
     ancorado direto na viewport (16px de cada lado, perto do rodapé) nunca
     depende de onde "Filtros" está na linha, então nunca sai da tela,
     não importa quantos itens vieram antes dele. Só entra nesta media
     query (mobile) -- desktop continua exatamente como era (right:0,
     ancorado no gatilho, sempre com espaço de sobra). */
  .prod-filters-more-list {
    position: fixed; left: 16px; right: 16px; top: auto; bottom: 16px;
    width: auto; min-width: 0; max-width: none; max-height: 70vh; overflow-y: auto;
  }
  #prodMetrics.metrics-grid { grid-template-columns: 1fr; }
  #prodBoard .column { width: 240px; min-width: 240px; }
}

/* Toast */
/* BUG FIX (validação real, Bloco 2): #toast agora usa popover="manual"
   (ver index.html) para entrar no "top layer" do navegador — a mesma camada
   de um <dialog> aberto, que nenhum z-index normal supera. margin:0 e
   inset:auto aqui sobrescrevem os estilos padrão que o navegador aplica a
   elementos [popover] (que às vezes centralizam com margin:auto), para que
   o posicionamento fixed/bottom/left/transform abaixo continue valendo
   exatamente como antes — só a camada de empilhamento mudou. */
.toast {
  position: fixed; inset: auto; margin: 0;
  bottom: 22px; left: 50%; transform: translateX(-50%);
  background: var(--surface-3); border: 1px solid var(--border);
  padding: 12px 18px; border-radius: 10px; font-size: 13px; z-index: 80;
  box-shadow: var(--shadow);
}
.toast.error { border-color: var(--critical); color: var(--critical); }
.toast.success { border-color: var(--good); color: var(--good); }

/* ---------- Ponto (registro de jornada) ---------- */
.badge.good { background: rgba(34,197,94,0.15); color: var(--good); }
.badge.warning { background: rgba(250,178,25,0.15); color: var(--warning); }
.badge.critical { background: rgba(230,88,79,0.15); color: var(--critical); }

.clock-card { align-items: center; text-align: center; gap: 6px; }
.clock-card .live-clock {
  font-size: 42px; font-weight: 800; letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums; margin: 6px 0 2px;
}
.clock-card .next-action { font-size: 13px; color: var(--text-secondary); margin-bottom: 14px; }
.clock-card .btn.xl { max-width: 320px; }
.clock-card .microcopy { font-size: 11px; color: var(--text-muted); margin: 12px 0 0; line-height: 1.5; }

.timeline { display: flex; flex-direction: column; gap: 0; }
.timeline-item {
  display: flex; align-items: center; gap: 12px; padding: 10px 2px;
  border-bottom: 1px solid var(--border);
}
.timeline-item:last-child { border-bottom: none; }
.timeline-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--surface-3); flex-shrink: 0; }
.timeline-item.done .timeline-dot { background: var(--good); }
.timeline-item.pending .timeline-dot { background: var(--text-muted); opacity: 0.4; }
.timeline-label { flex: 1; font-size: 13px; color: var(--text-secondary); }
.timeline-time { font-weight: 700; font-variant-numeric: tabular-nums; font-size: 13.5px; }
.timeline-item.pending .timeline-time { color: var(--text-muted); font-weight: 500; }
.timeline-empty { color: var(--text-muted); font-size: 13px; padding: 10px 2px; }

.geo-status {
  font-size: 12px; color: var(--text-muted); background: var(--surface-2);
  border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px 12px;
  display: flex; align-items: center; gap: 8px;
}
.geo-status.ok { color: var(--good); }
.geo-status.error { color: var(--warning); }

.manual-warning {
  font-size: 11.5px; color: var(--warning); background: rgba(250,178,25,0.08);
  border: 1px solid rgba(250,178,25,0.25); border-radius: var(--radius-sm); padding: 8px 10px;
}

.schedule-row .er-meta span { margin-right: 10px; }

.btn:disabled { opacity: 0.45; cursor: not-allowed; filter: none; transform: none; box-shadow: none; }


.pw-wrap {
  position: relative;
  display: flex;
  align-items: center;
}
.pw-wrap input {
  flex: 1;
  padding-right: 36px;
}
.pw-toggle {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  padding: 4px;
  opacity: 0.6;
}
.pw-toggle:hover {
  opacity: 1;
}


/* ---------- Compromissos: calendário ---------- */
.compromisso-cal-nav { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
.compromisso-cal-nav input[type="month"] { flex: 1; min-width: 140px; }
.compromisso-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.compromisso-cal-weekday { font-size: 10.5px; font-weight: 700; text-transform: uppercase; color: var(--text-muted); text-align: center; padding-bottom: 4px; }
.compromisso-cal-day {
  background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm);
  min-height: 64px; padding: 6px; cursor: pointer; display: flex; flex-direction: column; gap: 4px;
  transition: background 0.15s var(--ease), border-color 0.15s var(--ease), transform 0.15s var(--ease);
}
.compromisso-cal-day:hover { background: var(--surface-3); transform: translateY(-1px); }
.compromisso-cal-day.outside { opacity: 0.35; cursor: default; pointer-events: none; }
.compromisso-cal-day.today { border-color: var(--brand-b); box-shadow: 0 0 0 1px var(--brand-b); }
.compromisso-cal-day-num { font-size: 12px; font-weight: 700; }
.compromisso-cal-dots { display: flex; flex-wrap: wrap; gap: 3px; }
.compromisso-cal-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.compromisso-cal-dot.empresa { background: var(--role-video); }
.compromisso-cal-dot.pessoal { background: var(--role-social); }
.compromisso-cal-more { font-size: 9.5px; color: var(--text-muted); }
@media (max-width: 640px) {
  .compromisso-cal-day { min-height: 44px; }
  .compromisso-cal-day-num { font-size: 11px; }
}

.status-badge.ok { background: rgba(34, 197, 94, 0.15); color: var(--good); }
.status-badge.alert { background: rgba(230, 88, 79, 0.15); color: var(--critical); }

/* WHATSAPP CONTROLADO -- Acessos do Editor (Bloco C): painel de autorização
   operacional do Gestor. Reusa .card/.dash-toggle-chip/.status-badge/
   .employee-row já existentes -- as classes abaixo só cobrem o que é
   específico desta área (cards de solicitação/acesso com múltiplos campos +
   ações, linha de candidato clicável no modal de vínculo). */
.status-badge.pendente { background: rgba(250, 178, 25, 0.15); color: var(--warning); }
.status-badge.rejeitado, .status-badge.revogado { background: rgba(230, 88, 79, 0.15); color: var(--critical); }
.status-badge.finalizado { background: rgba(255, 255, 255, 0.08); color: var(--text-muted); }

.waa-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.waa-list { display: flex; flex-direction: column; gap: 10px; }
.waa-card {
  background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 14px 16px; display: flex; flex-direction: column; gap: 8px;
}
.waa-card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.waa-card-title { font-weight: 700; font-size: 13.5px; }
.waa-card-meta { display: flex; flex-direction: column; gap: 2px; font-size: 12px; color: var(--text-muted); }
.waa-card-meta strong { color: var(--text-primary); font-weight: 600; }
.waa-card-motivo { font-size: 12.5px; background: var(--surface-3); border-radius: var(--radius-sm); padding: 8px 10px; overflow-wrap: anywhere; }
.waa-card-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.waa-empty, .waa-loading { padding: 24px 12px; text-align: center; color: var(--text-muted); font-size: 13px; }
.waa-error { padding: 24px 12px; text-align: center; color: var(--critical); font-size: 13px; }
.waa-candidato-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 10px 12px; cursor: pointer; transition: background 0.15s var(--ease), border-color 0.15s var(--ease);
}
.waa-candidato-row:hover { background: var(--surface-3); }
.waa-candidato-row.selected { border-color: var(--view-cyan); background: var(--surface-3); }
.waa-vinculo-existente { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px 12px; font-size: 12.5px; }
#waAcessoCandidatosList { display: flex; flex-direction: column; gap: 8px; max-height: 260px; overflow-y: auto; }
@media (max-width: 640px) {
  .waa-card-head { flex-direction: column; align-items: flex-start; }
}


/* ================================================================
   SIDEBAR / TOPBAR — redesenho visual (etapa 1)
   Reestiliza .admin-tabs/.admin-tab (mesmas classes usadas pelo JS
   de troca de aba) para virarem uma sidebar vertical. Nao remove
   nem duplica logica: so muda a apresentacao.
   ================================================================ */

#adminView {
  display: flex;
  align-items: flex-start;
  gap: 22px;
}

.app-sidebar {
  flex: none;
  width: var(--sidebar-w);
  position: sticky;
  top: 20px;
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, var(--surface) 0%, rgba(17, 24, 39, 0.75) 100%);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 16px 12px;
  box-shadow: var(--shadow-soft);
  max-height: calc(100vh - 40px);
}

.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 8px 16px;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--border);
}
.sidebar-logo { width: 30px; height: 30px; object-fit: contain; flex: none; }
.sidebar-brand-text { min-width: 0; display: flex; flex-direction: column; }
.sidebar-brand-name {
  font-family: "Sora", "Plus Jakarta Sans", sans-serif;
  font-weight: 700; font-size: 15px; letter-spacing: 0.01em; color: var(--text-primary);
}
.sidebar-brand-role {
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--brand-b); margin-top: 1px;
}

.sidebar-nav { flex: 1; overflow-y: auto; padding: 2px 2px 4px; }

.sidebar-group-title {
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--text-muted); padding: 14px 10px 7px;
}
.sidebar-group-title:first-child { padding-top: 4px; }

/* override das regras antigas de .admin-tabs / .admin-tab (barra horizontal) */
.admin-tabs {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
  margin-bottom: 0 !important;
  border-bottom: none !important;
  padding-bottom: 0 !important;
  overflow-x: visible !important;
}
.admin-tab {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  color: var(--text-secondary) !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  padding: 9px 10px !important;
  margin-right: 0 !important;
  border-radius: 11px !important;
  white-space: nowrap;
  text-align: left;
  transition: background 0.16s var(--ease), color 0.16s var(--ease), border-color 0.16s var(--ease) !important;
}
.admin-tab svg { width: 17px; height: 17px; flex: none; opacity: 0.85; }
.admin-tab:hover { background: var(--surface-2) !important; color: var(--text-primary) !important; }
.admin-tab.active {
  background: linear-gradient(90deg, rgba(37, 99, 235, 0.18), rgba(20, 184, 166, 0.07)) !important;
  color: #fff !important;
  border-color: rgba(37, 99, 235, 0.35) !important;
}
/* Corrige conflito de cascata de 03/09/2026: ".admin-tab { display: flex !important }"
   (acima) e ".hidden { display: none !important }" (topo do arquivo) têm a mesma
   especificidade (uma classe) -- como ".admin-tab" vem depois no arquivo, ele
   sempre vencia, e qualquer <button class="admin-tab hidden"> continuava visível.
   Essa regra tem 2 classes (especificidade maior), então sempre vence, em
   qualquer ordem. Corrige a causa raiz; o menu do Meta Reviewer já não depende
   mais disso (os itens proibidos são removidos do DOM, não só escondidos), mas
   é a forma correta de qualquer outro código que já use/venha a usar
   ".admin-tab.hidden" funcionar de verdade. */
.admin-tab.hidden { display: none !important; }

.sidebar-footer {
  border-top: 1px solid var(--border);
  padding-top: 10px;
  margin-top: 6px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.sidebar-footer .btn { justify-content: flex-start; width: 100%; }

.admin-main { flex: 1; min-width: 0; }

.admin-topbar {
  display: flex; align-items: center; justify-content: flex-end; gap: 8px;
  margin-bottom: 18px;
}

@media (max-width: 980px) {
  #adminView { flex-direction: column; }
  .app-sidebar { width: 100%; position: relative; top: 0; max-height: none; }
  /* [ACHADO EM QA REAL -- redesign visual da Central de Produção] Em
     #adminView{flex-direction:column}, .admin-main (flex:1, min-width:0)
     ainda assim crescia até o min-content da tela ativa em vez de ocupar
     100% da largura -- min-width:0 só neutraliza o tamanho minimo
     automatico no eixo PRINCIPAL do flex (aqui, vertical); no eixo
     cruzado (largura), um item "stretch" sem largura propria ainda
     respeita o conteudo intrinseco quando ele tem overflow:visible. A
     Central de Producao expos isso porque sua tabela (th/td com
     white-space:nowrap, regra ja existente) e bem mais larga que 375px;
     o Dashboard nunca tinha conteudo largo o bastante pra revelar o
     mesmo bug. Correcao real (testada ao vivo): largura explicita de
     100% no breakpoint mobile -- nao e um ajuste da Central de Producao
     em si, e o container do shell administrativo (usado por TODAS as
     telas) que faltava essa regra. Fora disso, nenhuma outra propriedade
     do shell foi tocada. */
  .admin-main { width: 100%; }
}

/* ============ Redesign etapa 2: Dashboard do gestor ============ */

.dash-greeting h2,
.card-title-row h3,
.caixa-hero .value,
.stat-tile-body .value,
.metric-tile .value {
  font-family: "Sora", "Plus Jakarta Sans", sans-serif;
}

.dash-row { margin-bottom: 18px; }

.dash-agenda-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.dash-agenda-row .card { margin-bottom: 0; }

@media (max-width: 980px) {
  .dash-agenda-row { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .dash-agenda-row { grid-template-columns: 1fr; }
}

.hero-grid.dash-row { margin-bottom: 18px; }

.situacao-card {
  border: 1px solid rgba(250, 178, 25, 0.3);
  background: linear-gradient(180deg, rgba(250, 178, 25, 0.08), rgba(17, 24, 39, 0.5));
  border-radius: var(--radius-lg);
  padding: 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.situacao-card .sit-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: var(--warning);
  text-transform: uppercase;
}
.situacao-card .sit-badge svg { width: 14px; height: 14px; }
.situacao-card h3 { margin: 2px 0 0; font-size: 15px; font-family: "Sora", "Plus Jakarta Sans", sans-serif; }
.situacao-card p { margin: 0; font-size: 12.5px; color: var(--text-secondary); line-height: 1.55; }
.situacao-card .ai-hint {
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--border);
  font-size: 11.5px;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 6px;
}
.situacao-card .ai-hint svg { width: 13px; height: 13px; flex-shrink: 0; }

/* microinteração: leve elevação ao passar o mouse nos cards do dashboard */
#adminDashboardSection .dash-agenda-row .card,
#adminDashboardSection .caixa-hero,
#adminDashboardSection .situacao-card {
  transition: transform 0.18s var(--ease), border-color 0.18s var(--ease), box-shadow 0.18s var(--ease);
}
#adminDashboardSection .dash-agenda-row .card:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 255, 255, 0.16);
  box-shadow: var(--shadow);
}

.dash-toggle-chip:hover {
  border-color: rgba(255, 255, 255, 0.18);
  color: var(--text-primary);
  transform: translateY(-1px);
}

/* ============ Redesign etapa 4: modais (dialog) premium ============ */

/* AUDITORIA GLOBAL DE UX/RESPONSIVIDADE -- regra central para os 46
   dialogs do sistema: sem overflow-x explícito, o eixo X computa pra
   "auto" por spec sempre que overflow-y é definido (max-height acima) --
   causa raiz do scroll horizontal em modal, documentada e corrigida
   individualmente em alguns dialogs nas últimas sessões
   (#configOperacionalDialog, .ed-dialog, dialog.wide). Esta regra fecha
   TODOS os outros de uma vez. Sozinha ela NÃO basta -- precisa vir
   acompanhada de flex-wrap nas fileiras internas (.dialog-actions/
   .filters, logo abaixo), senão em vez de eliminar o overflow ela só
   esconde conteúdo que deveria quebrar linha (foi exatamente o que
   aconteceu com o rodapé do #prodTaskDialog numa sessão anterior, corrigido
   lá e agora generalizado aqui). Verificação obrigatória depois desta
   mudança: scrollWidth <= clientWidth em cada dialog, não presumir. */
dialog {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, var(--surface-2) 0%, var(--surface) 100%);
  box-shadow: var(--shadow);
  max-height: 88vh;
  overflow-y: auto;
  overflow-x: hidden;
}

dialog::backdrop {
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

@keyframes dialogPop {
  from { opacity: 0; transform: scale(0.96) translateY(6px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}
dialog[open] {
  animation: dialogPop 0.2s var(--ease);
}
@media (prefers-reduced-motion: reduce) {
  dialog[open] { animation: none; }
}

.dialog-card {
  padding: 22px 24px;
}

.dialog-card h3 {
  font-family: "Sora", "Plus Jakarta Sans", sans-serif;
  font-size: 17px;
  letter-spacing: -0.01em;
  margin: 0 0 2px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}

input, select, textarea {
  transition: border-color 0.15s var(--ease), box-shadow 0.15s var(--ease);
}
input:focus, select:focus, textarea:focus {
  box-shadow: 0 0 0 3px rgba(20, 184, 166, 0.15);
}

.dialog-actions {
  padding-top: 14px;
  border-top: 1px solid var(--border);
}

/* ============ Redesign etapa 5: página Financeiro ============ */

#adminFinanceSection .table-wrap {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  max-height: 560px;
  overflow-y: auto;
}

#adminFinanceSection .table-wrap table {
  border-collapse: separate;
  border-spacing: 0;
}

#adminFinanceSection .table-wrap th {
  position: sticky;
  top: 0;
  background: var(--surface-2);
  z-index: 1;
  box-shadow: inset 0 -1px 0 var(--border);
}

#adminFinanceSection .table-wrap th,
#adminFinanceSection .table-wrap td {
  padding: 11px 12px;
}

#adminFinanceSection .table-wrap table td:nth-child(5),
#adminFinanceSection .table-wrap table th:nth-child(5) {
  text-align: right;
}

#adminFinanceSection .table-wrap table td:nth-child(7),
#adminFinanceSection .table-wrap table th:nth-child(7) {
  text-align: center;
}

/* ================================================================================
   MÓDULO: PROPOSTAS E CONTRATOS
   ================================================================================ */

.status-pill.neutral { background: var(--surface-3); color: var(--text-secondary); }
.status-pill.atrasado { background: rgba(230, 88, 79, 0.15); color: var(--critical); }

.btn-sm { padding: 6px 12px; font-size: 12.5px; }

.empty-state {
  padding: 28px 16px; text-align: center; border: 1px dashed var(--border);
  border-radius: var(--radius-sm);
}

.modelos-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px;
}
.modelo-card { margin-bottom: 0; }
.modelo-desc {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; min-height: 32px;
}
.modelo-card-actions { display: flex; justify-content: flex-end; margin-top: 12px; }

.var-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.var-chip {
  background: var(--surface-2); border: 1px solid var(--border); color: var(--text-secondary);
  font-size: 11.5px; font-weight: 600; padding: 4px 10px; border-radius: 999px;
  cursor: pointer; transition: background 0.15s var(--ease), color 0.15s var(--ease), border-color 0.15s var(--ease);
}
.var-chip:hover { background: var(--surface-3); color: var(--text-primary); border-color: var(--brand-a); }

.modelo-conteudo-input {
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 12.5px; line-height: 1.6;
}

#contractWizardDialog { max-width: 620px; }
#contractWizardDialog .dialog-card { max-height: 84vh; overflow-y: auto; }

.cw-steps { display: flex; justify-content: space-between; gap: 6px; margin-bottom: 4px; }
.cw-step-dot {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px;
  font-size: 11px; font-weight: 700; color: var(--text-muted);
  padding-bottom: 8px; border-bottom: 2px solid var(--border);
}
.cw-step-dot em { font-style: normal; font-weight: 600; font-size: 10.5px; letter-spacing: 0.02em; text-transform: uppercase; }
.cw-step-dot.active { color: var(--text-primary); border-color: var(--brand-a); }
.cw-step-dot.done { color: var(--good); border-color: var(--good); }

.cw-fields-box { display: flex; flex-direction: column; gap: 12px; }

.cw-missing-warning {
  margin: 0 0 14px; background: rgba(230, 88, 79, 0.12);
  border: 1px solid var(--critical); color: var(--critical); border-radius: var(--radius-sm);
  padding: 12px 16px; font-size: 13px; line-height: 1.5;
}
.cw-missing-warning strong { display: block; margin-bottom: 6px; }
.cw-missing-warning ul { margin: 0; padding-left: 20px; }

.cw-label-row { display: flex; align-items: center; gap: 6px; }
.cw-derived-tag {
  display: inline-flex; align-items: center; padding: 1px 6px; border-radius: 999px;
  background: rgba(250, 178, 25, 0.15); color: var(--warning); font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.03em;
}
.cw-recalc-hint {
  font-size: 11px; font-weight: 500; color: var(--warning);
}
.cw-recalc-hint .cw-recalc-link { color: var(--warning); text-decoration: underline; cursor: pointer; }

.version-status-badge {
  display: inline-flex; align-items: center; padding: 1px 6px; border-radius: 999px;
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em;
}
.version-status-badge.vsb-em_revisao { background: rgba(250, 178, 25, 0.15); color: var(--warning); }
.version-status-badge.vsb-aprovado { background: rgba(34, 197, 94, 0.15); color: var(--good); }
.version-status-badge.vsb-ajustes { background: rgba(230, 88, 79, 0.15); color: var(--critical); }
.version-status-badge.vsb-ativo { background: rgba(148, 163, 184, 0.15); color: var(--text-secondary); }
.version-status-badge.vsb-aguardando_exclusao { background: rgba(230, 88, 79, 0.15); color: var(--critical); }
.version-status-badge.vsb-protegido { background: rgba(34, 197, 94, 0.15); color: var(--good); }
.version-status-badge.vsb-manter { background: rgba(59, 130, 246, 0.15); color: #3b82f6; }
.version-status-badge.vsb-excluido { background: rgba(148, 163, 184, 0.15); color: var(--text-secondary); }
.media-mgr-actions .link-btn { margin-right: 6px; }
.version-status-select {
  font-size: 11px; padding: 2px 6px; border-radius: 6px;
  background: var(--surface-2); border: 1px solid var(--border); color: var(--text-secondary);
}

.cw-preview-box {
  background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 16px; max-height: 50vh; overflow-y: auto;
}
#cwPreviewContent {
  margin: 0; white-space: pre-wrap; word-break: break-word;
  font-family: inherit; font-size: 13px; line-height: 1.7; color: var(--text-secondary);
}

.client-contracts-title { margin-top: 6px; }
.client-contracts-title h4 { margin: 0; font-size: 13px; }
.client-contracts-list { display: flex; flex-direction: column; gap: 8px; }
.client-contract-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 10px 12px; cursor: pointer; transition: border-color 0.15s var(--ease);
}
.client-contract-row:hover { border-color: var(--brand-a); }
.client-contract-row-right { display: flex; align-items: center; gap: 10px; }

/* Propostas — assistente de IA */
.label-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.label-row label { margin-bottom: 0; }
.ia-panel {
  margin-top: 10px; padding: 12px; background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius-sm); display: flex; flex-direction: column; gap: 10px;
}
.ia-panel-actions { display: flex; align-items: center; justify-content: flex-end; gap: 10px; }
.ia-panel-actions .muted { margin-right: auto; font-size: 12px; }
.ia-error { color: var(--critical); font-size: 12px; }
.ia-success { color: var(--good); font-size: 12px; }


/* FASE 3: Aprovacao externa de cliente */
.ca-card { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 16px; margin-top: 18px; display: flex; flex-direction: column; gap: 10px; }
.ca-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: 14px; }
.ca-actions { display: flex; gap: 10px; margin-top: 18px; }
.ca-actions .btn { flex: 1; }
#caAdjustBox { margin-top: 12px; display: flex; flex-direction: column; gap: 8px; }
#caAdjustBox textarea { width: 100%; resize: vertical; }
.ca-done { margin-top: 18px; padding: 14px; border-radius: var(--radius-sm); background: var(--surface-2); border: 1px solid var(--border); font-weight: 600; }
.ca-done.ia-success { color: var(--good); }
.ca-done.ia-error { color: var(--critical); }


/* Contratos FASE 2: Gerador Inteligente (preenchimento por IA) */
.cw-ia-box { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 12px; margin-bottom: 14px; display: flex; flex-direction: column; gap: 8px; }
.cw-ia-box textarea { width: 100%; resize: vertical; }
.cw-ia-box .btn { align-self: flex-start; }

/* FASE 7 (R2) — upload de midia na secao Versoes da Central de Producao */
.prod-upload-box { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px 12px; margin: 8px 0; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.prod-upload-progress-wrap { display: flex; align-items: center; gap: 10px; flex: 1 1 220px; min-width: 200px; }
.prod-upload-progress-bar { flex: 1 1 auto; height: 8px; border-radius: 999px; background: var(--surface-3, rgba(255,255,255,0.08)); overflow: hidden; }
.prod-upload-progress-fill { height: 100%; width: 0%; background: var(--accent, #6c8cff); transition: width 0.15s ease; }
.prod-upload-box .muted { font-size: 12px; }

/* =============================================================================
   FASE 10A — BLOCO 4: Calendário + Pendentes p/ Agendar + Agendamento em
   Massa + alertas compactos, todos dentro da Central de Agendamento. Reusa
   os tokens de cor já existentes (--good/--warning/--critical, .badge.*) —
   nenhuma cor nova foi inventada. Ajustes de UX (Parte 5 do Bloco 4): sem
   scroll horizontal na página (conteúdo largo rola só dentro do próprio
   contêiner), botões de ação sempre visíveis (dialog-actions com sticky no
   rodapé do modal), espaçamento por gap (não margin solto), texto longo
   quebrando corretamente, mobile/tablet sem overflow lateral.
   ============================================================================= */

/* ---------- Calendário ---------- */
.ag-cal-nav { display: flex; align-items: center; gap: 10px; margin: 10px 0 14px; }
.ag-cal-nav strong { font-size: 15px; min-width: 160px; text-align: center; text-transform: capitalize; }

/* BUGFIX (validação visual real, pós-Bloco 4): "repeat(7, 1fr)" na prática
   equivale a "repeat(7, minmax(auto, 1fr))" — cada coluna tem um mínimo
   baseado no min-content do que está dentro dela ANTES do 1fr distribuir o
   espaço livre. Como os chips usavam white-space:nowrap sem min-width:0 em
   nenhum ponto da cadeia (.ag-cal-day > .ag-cal-items > .ag-cal-item >
   .ag-cal-item-txt), um chip com texto longo (cliente + tema) em qualquer
   semana daquela coluna elevava o mínimo da coluna inteira, roubando espaço
   das colunas vizinhas — exatamente o efeito relatado (algumas colunas bem
   mais largas, outras espremidas, variando com o conteúdo real do mês, não
   com um padrão fixo). Corrigido com "minmax(0, 1fr)" (garante as 7 colunas
   genuinamente iguais) + min-width:0 em cada elo da cadeia flex, para que
   truncamento (ellipsis) aconteça DENTRO do chip em vez de empurrar a
   coluna. */
.ag-cal-weekdays { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; margin-bottom: 6px; }
.ag-cal-weekday { text-align: center; font-size: 11px; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; color: var(--text-muted); padding: 4px 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.ag-cal-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.ag-cal-day {
  min-height: 92px; min-width: 0; border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface-2); padding: 6px; display: flex; flex-direction: column; gap: 4px;
  cursor: pointer; overflow: hidden; transition: border-color 0.15s var(--ease), background 0.15s var(--ease);
}
.ag-cal-day:hover { border-color: var(--brand-b); }
.ag-cal-day-out { opacity: 0.4; }
.ag-cal-day-today { border-color: var(--brand-b); box-shadow: 0 0 0 1px var(--brand-b) inset; }
.ag-cal-daynum { font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; flex: 0 0 auto; }

.ag-cal-items { display: flex; flex-direction: column; gap: 3px; min-width: 0; overflow: hidden; }
.ag-cal-item {
  display: flex; align-items: center; gap: 5px; font-size: 11px; line-height: 1.3;
  padding: 2px 4px; border-radius: 5px; background: var(--surface-3); cursor: pointer;
  min-width: 0; overflow: hidden;
}
.ag-cal-item:hover { background: var(--surface-1, rgba(255,255,255,0.06)); }
.ag-cal-item-hora { font-variant-numeric: tabular-nums; font-weight: 700; flex: 0 0 auto; }
.ag-cal-item-txt { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.ag-cal-item-dot { flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.ag-cal-item-dot.good { background: var(--good); }
.ag-cal-item-dot.warning { background: var(--warning); }
.ag-cal-item-dot.critical { background: var(--critical); }
.ag-cal-item-dot.neutral { background: var(--text-muted); }

.ag-cal-more { font-size: 11px; color: var(--brand-b); cursor: pointer; padding: 1px 4px; }
.ag-cal-more:hover { text-decoration: underline; }

.ag-cal-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin-top: 12px; font-size: 12px; color: var(--text-muted); }
.ag-cal-legend .ag-cal-item-dot { margin-left: 8px; }
.ag-cal-legend .ag-cal-item-dot:first-child { margin-left: 0; }

.ag-cal-day-item:hover { border-color: var(--brand-b); }

/* ---------- Alertas compactos (contadores discretos, nunca um dashboard) ---------- */
.ag-alerts-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.ag-alerts-row:empty { margin-top: 0; }
.ag-alert-chip {
  display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600;
  padding: 5px 10px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface-2);
}
.ag-alert-chip.warning { color: var(--warning); border-color: rgba(250,178,25,0.35); background: rgba(250,178,25,0.1); }
.ag-alert-chip.critical { color: var(--critical); border-color: rgba(230,88,79,0.35); background: rgba(230,88,79,0.1); }
.ag-alert-chip.good { color: var(--good); border-color: rgba(34,197,94,0.35); background: rgba(34,197,94,0.1); }

/* ---------- Pendentes para agendar ---------- */
.ag-pendentes-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.ag-pendente-card { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 14px; display: flex; flex-direction: column; gap: 6px; }
.ag-pendente-card .muted { font-size: 12px; overflow-wrap: anywhere; }
.ag-pendente-card strong { overflow-wrap: anywhere; }
.ag-pendente-card .ag-pendente-criar-btn { margin-top: 8px; align-self: flex-start; }

/* ---------- Agendamento em massa ---------- */
/* BUGFIX (QA real do Bloco 4 — overflow horizontal no modal de massa):
   a classe .ag-massa-dialog fica no .dialog-card INTERNO, mas a regra base
   de <dialog> (acima, max-width: 460px; width: 92vw) trava o PRÓPRIO dialog
   em 460px — o card interno pedia min(720px, 92vw) DENTRO de um contêiner
   de 460px, estourando ~260px para fora (corte à esquerda + scrollbar
   horizontal, exatamente o sintoma reportado). No breakpoint <=640px era
   pior ainda: card interno de 96vw dentro de dialog de 92vw (4vw de
   overflow garantido em qualquer tela). Correção: a largura real vai para o
   ELEMENTO <dialog> (#agCentralMassaDialog), o card interno só preenche
   100% do contêiner, e os campos ganham min-width:0/width:100% para nunca
   estourarem as colunas do grid (mesmo padrão minmax(0/min(...),1fr) já
   usado na correção do grid do Calendário). */
#agCentralMassaDialog { max-width: min(720px, 92vw); width: min(720px, 92vw); }
.ag-massa-dialog { width: auto; max-width: 100%; overflow-x: hidden; max-height: 88vh; overflow-y: auto; }
.ag-massa-blocos { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.ag-massa-bloco { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 12px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.ag-massa-bloco-head { display: flex; align-items: center; justify-content: space-between; }
.ag-massa-bloco-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr)); gap: 10px; }
.ag-massa-bloco-grid label,
.ag-massa-bloco > label { font-size: 12px; color: var(--text-muted); display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ag-massa-bloco input,
.ag-massa-bloco select,
.ag-massa-bloco textarea { width: 100%; min-width: 0; }
.ag-massa-bloco textarea { resize: vertical; min-height: 44px; }
.ag-massa-remover.hidden { display: none; }
.ag-massa-actions { border-top: none; padding-top: 0; justify-content: flex-start; }

/* ---------- chip-check (checkbox de plataforma nos blocos de massa) ---------- */
.chip-check {
  display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 500;
  padding: 4px 9px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface-3);
  cursor: pointer; color: var(--text-secondary);
}
.chip-check input { width: auto; margin: 0; }

/* ============ Calendário da Central de Produção (auditoria de UX/
   responsividade) ============
   Migrado de app.js (era um <style> injetado via JS, sem nenhum
   breakpoint -- causa raiz do overflow horizontal em telas estreitas).
   Mesma técnica já validada em .ag-cal-* (Central de Agendamento):
   minmax(0,1fr) no grid + min-width:0 em toda a cadeia flex + ellipsis
   real no texto do chip. Cores/tamanhos em desktop mantidos IDÊNTICOS
   aos valores que já estavam na string injetada -- só a estrutura de
   sizing (minmax/min-width) e os breakpoints são novos. */
.prod-cal-header { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.prod-cal-header h3 { flex: 1; text-align: center; margin: 0; font-size: 16px; color: var(--view-text); }
.prod-cal-nav-btn {
  background: var(--view-surface-hi); border: 1px solid var(--view-border); color: var(--view-text);
  border-radius: var(--radius-sm); width: 32px; height: 32px; font-size: 18px; cursor: pointer;
}
.prod-cal-nav-btn:hover { background: var(--view-surface-elevated); border-color: var(--view-border-strong); }
.prod-cal-today-btn {
  background: var(--view-surface-hi); border: 1px solid var(--view-border); color: var(--view-muted);
  border-radius: var(--radius-sm); padding: 6px 12px; font-size: 12px; cursor: pointer;
}
.prod-cal-today-btn:hover { background: var(--view-surface-elevated); }
.prod-cal-weekdays { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; margin-bottom: 6px; }
.prod-cal-weekday {
  text-align: center; font-size: 11px; font-weight: 700; color: var(--view-muted);
  text-transform: uppercase; letter-spacing: 0.4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.prod-cal-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.prod-cal-day {
  min-height: 92px; min-width: 0;
  background: linear-gradient(180deg, var(--view-surface-elevated) 0%, var(--view-surface) 100%);
  border: 1px solid var(--view-border); border-radius: var(--radius-sm);
  padding: 6px; display: flex; flex-direction: column; gap: 4px; overflow: hidden;
}
.prod-cal-day-out { background: transparent; border-color: transparent; }
.prod-cal-day-today { border-color: var(--view-cyan); box-shadow: inset 0 0 0 1px var(--view-cyan); }
.prod-cal-daynum { font-size: 11px; font-weight: 700; color: var(--view-muted); flex: 0 0 auto; }
.prod-cal-tasks { display: flex; flex-direction: column; gap: 3px; overflow-y: auto; overflow-x: hidden; min-width: 0; min-height: 0; }
.prod-cal-task-chip {
  display: flex; align-items: center; gap: 4px; background: var(--view-surface-hi);
  border-radius: 4px; padding: 2px 5px; font-size: 10px; cursor: pointer; min-width: 0;
}
.prod-cal-task-chip:hover { background: var(--view-surface-elevated); outline: 1px solid var(--view-border-strong); }
.prod-cal-chip-text { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--view-text); }
.prod-cal-dot { width: 6px; height: 6px; border-radius: 50%; flex: 0 0 auto; }
.prod-cal-dot-ok { background: var(--good); }
.prod-cal-dot-pending { background: var(--warning); }
.prod-cal-dot-neutral { background: var(--view-muted); }
.prod-cal-hora { color: var(--view-muted); margin-left: auto; flex: 0 0 auto; }

@media (max-width: 900px) {
  .prod-cal-day { min-height: 76px; }
}
@media (max-width: 640px) {
  .prod-cal-header h3 { font-size: 13px; }
  .prod-cal-weekday { font-size: 9px; }
  .prod-cal-days, .prod-cal-weekdays { gap: 3px; }
  .prod-cal-day { min-height: 58px; padding: 4px; border-radius: 6px; }
  .prod-cal-daynum { font-size: 10px; }
  /* mesma técnica de .ag-cal-item em telas muito estreitas: chip vira só
     um ponto colorido (o clique continua abrindo a produção normalmente,
     só o texto some -- consistente com o "modo pontinho" já aprovado no
     calendário de Agendamento). */
  .prod-cal-task-chip { padding: 0; background: none; justify-content: center; }
  .prod-cal-chip-text, .prod-cal-hora { display: none; }
  .prod-cal-dot { margin: 1px auto; }
}

/* ---------- Responsividade (Bloco 4 — Parte 5): tablet/mobile sem overflow lateral ---------- */
@media (max-width: 900px) {
  .ag-cal-day { min-height: 76px; }
  .ag-pendentes-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
}

@media (max-width: 640px) {
  .ag-cal-nav strong { min-width: 0; flex: 1; }
  .ag-cal-weekday { font-size: 9px; }
  .ag-cal-days, .ag-cal-weekdays { gap: 3px; }
  .ag-cal-day { min-height: 58px; padding: 4px; border-radius: 6px; }
  .ag-cal-daynum { font-size: 10px; }
  .ag-cal-item { font-size: 0; padding: 0; background: none; display: flex; justify-content: center; }
  .ag-cal-item-hora, .ag-cal-item-txt { display: none; }
  .ag-cal-item-dot { width: 6px; height: 6px; margin: 1px auto; }
  .ag-cal-more { font-size: 9px; text-align: center; }
  .ag-pendentes-grid { grid-template-columns: 1fr; }
  /* BUGFIX (overflow do modal de massa): a largura vai para o ELEMENTO
     <dialog>, nunca para o card interno (ver nota na regra base). Grid em
     1 coluna em telas pequenas — 2 colunas só quando há espaço real
     (o auto-fit da regra base cuida disso em larguras maiores). */
  #agCentralMassaDialog { width: 96vw; max-width: 96vw; }
  .ag-massa-bloco-grid { grid-template-columns: 1fr; }
}

/* ---------- Central de WhatsApp ---------- */
/* Reformulação visual (rodada 2): a Central passa a ocupar praticamente
   toda a área útil depois da sidebar principal, com a lista de conversas
   estreita e a conversa aberta dominando o espaço -- layout de inbox
   profissional, não dois cards pequenos flutuando no meio da página.
   Nenhuma lógica de dados/envio/polling foi tocada aqui, só apresentação. */

/* Exceção pontual ao container global (.app-shell tem max-width:1600px,
   pensado pra telas de formulário/dashboard) -- só quando a Central de
   WhatsApp está aberta (classe ligada por goToAdminTab() em app.js),
   a área útil deixa de ser limitada, mantendo apenas o padding lateral
   já existente do .app-shell como margem consistente. Não afeta nenhuma
   outra tela. */
body.wa-central-active .app-shell { max-width: none; }

.wa-central-subtitle { margin: -4px 0 14px; }

#adminWhatsappSection {
  display: flex;
  flex-direction: column;
  min-height: 0;
  /* Reserva o espaço ocupado acima (padding do .app-shell + topbar do
     admin) pra Central aproveitar o resto da altura da viewport, sem
     terminar no meio da página nem sobrar um vão enorme embaixo. */
  height: calc(100vh - 132px);
  min-height: 560px;
}

.wa-central-layout {
  display: grid;
  /* Lista de conversas estreita (entre 320 e 360px) + conversa aberta
     dominando todo o espaço restante -- não são dois painéis do mesmo
     tamanho, a conversa é a área principal. */
  grid-template-columns: minmax(320px, 360px) minmax(0, 1fr);
  gap: 16px;
  flex: 1;
  min-height: 0;
}

.wa-conv-list-pane {
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.wa-conv-list-header { padding: 14px; border-bottom: 1px solid var(--border); flex: 0 0 auto; }
.wa-conv-list-header .input {
  width: 100%; box-sizing: border-box; background: var(--surface-3); border: 1px solid var(--border);
  border-radius: var(--radius-sm); color: var(--text-primary); padding: 10px 14px; font-size: 13px;
  transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.wa-conv-list-header .input:focus {
  outline: none; border-color: var(--brand-b); box-shadow: 0 0 0 3px rgba(20, 184, 166, 0.15);
}
.wa-conv-list { flex: 1; min-height: 0; overflow-y: auto; }
.wa-conv-row {
  display: flex; align-items: center; gap: 10px; padding: 10px 14px; cursor: pointer;
  border-bottom: 1px solid var(--border); transition: background .15s var(--ease);
}
.wa-conv-row:last-child { border-bottom: none; }
.wa-conv-row:hover { background: var(--surface-3); }
.wa-conv-row.active { background: var(--surface-3); box-shadow: inset 3px 0 0 var(--brand-b); }
.wa-conv-row-avatar {
  width: 36px; height: 36px; border-radius: 50%; flex: 0 0 36px;
  background: linear-gradient(135deg, var(--brand-b), var(--brand-a));
  color: #fff; display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 600; text-transform: uppercase;
}
.wa-conv-row-body { min-width: 0; flex: 1; }
.wa-conv-row-nome { font-size: 13.5px; font-weight: 650; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wa-conv-row-preview { font-size: 12.5px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
.wa-conv-row-preview.outbound::before { content: "Você: "; color: var(--text-muted); }
.wa-conv-row-meta { font-size: 10.5px; color: var(--text-muted); flex: 0 0 auto; align-self: flex-start; margin-top: 2px; }

.wa-chat-pane {
  min-width: 0; min-height: 0; display: flex; flex-direction: column;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius);
  overflow: hidden;
}
.wa-chat-empty { flex: 1; display: flex; align-items: center; justify-content: center; text-align: center; padding: 24px; }
.wa-chat-active { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.wa-chat-header {
  display: flex; align-items: center; gap: 11px; padding: 12px 20px;
  border-bottom: 1px solid var(--border); flex: 0 0 auto;
}
.wa-chat-back-btn { display: none; padding: 6px 10px; }
.wa-chat-header-avatar {
  width: 34px; height: 34px; border-radius: 50%; flex: 0 0 34px;
  background: linear-gradient(135deg, var(--brand-b), var(--brand-a));
  color: #fff; display: flex; align-items: center; justify-content: center;
  font-size: 12.5px; font-weight: 600; text-transform: uppercase;
}
.wa-chat-header-info { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.wa-chat-header-nome { font-size: 15px; font-weight: 650; color: var(--text-primary); }
.wa-chat-header-tel { font-size: 12px; color: var(--text-muted); }
.wa-chat-messages {
  flex: 1; min-height: 0; overflow-y: auto; padding: 20px 24px; display: flex; flex-direction: column; gap: 3px;
  background: var(--page);
}
.wa-msg-row { display: flex; }
.wa-msg-row.inbound { justify-content: flex-start; }
.wa-msg-row.outbound { justify-content: flex-end; }
/* Só o início de um novo "bloco" (troca de remetente, ou depois de um
   separador de dia -- classe ligada em waCentralRenderMensagens(), em
   app.js) ganha respiro extra; mensagens seguidas do mesmo lado ficam
   coladas (gap de 3px acima, herdado do container). */
.wa-msg-row--novo-bloco { margin-top: 8px; }
.wa-msg-bubble {
  max-width: 64%; padding: 8px 12px; border-radius: 14px; font-size: 13.5px; line-height: 1.45;
  white-space: pre-wrap; word-break: break-word; position: relative;
}
.wa-msg-row.inbound .wa-msg-bubble { background: var(--surface-3); color: var(--text-primary); border-bottom-left-radius: 4px; }
.wa-msg-row.outbound .wa-msg-bubble { background: linear-gradient(135deg, var(--brand-b), #0f9c86); color: #fff; border-bottom-right-radius: 4px; }
.wa-msg-meta { display: block; margin-top: 3px; font-size: 10.5px; opacity: .75; text-align: right; }
.wa-msg-bubble.wa-msg-failed { outline: 1px solid var(--critical); }
.wa-msg-day-sep {
  align-self: center; text-align: center; font-size: 10px; font-weight: 600; letter-spacing: .03em;
  text-transform: uppercase; color: var(--text-muted); background: var(--surface-2);
  border-radius: 999px; padding: 3px 11px; margin: 10px 0 4px;
}

.wa-window-banner {
  flex: 0 0 auto; padding: 10px 20px; font-size: 12px; color: var(--warning);
  background: rgba(250, 178, 25, 0.1); border-top: 1px solid var(--border);
}
.wa-chat-input-row {
  flex: 0 0 auto; display: flex; gap: 12px; padding: 16px 20px; border-top: 1px solid var(--border);
  align-items: flex-end; background: var(--surface-2);
}
.wa-chat-textarea {
  flex: 1; resize: none; min-height: 42px; max-height: 140px; background: var(--surface-3); color: var(--text-primary);
  border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 11px 14px; font: inherit; font-size: 13.5px;
  transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.wa-chat-textarea:focus {
  outline: none; border-color: var(--brand-b); box-shadow: 0 0 0 3px rgba(20, 184, 166, 0.15);
}
.wa-send-btn { flex: 0 0 auto; padding: 11px 18px; align-self: flex-end; display: inline-flex; align-items: center; gap: 7px; }
.wa-send-btn svg { flex: none; }
.wa-chat-input-row.disabled .wa-chat-textarea,
.wa-chat-input-row .wa-chat-textarea:disabled { opacity: .6; }

/* Tablet: ainda duas colunas, mas a lista de conversas fica mais estreita
   pra dar mais espaço pra conversa (não esmagar as duas colunas). */
@media (max-width: 1180px) and (min-width: 769px) {
  .wa-central-layout { grid-template-columns: minmax(260px, 300px) minmax(0, 1fr); gap: 12px; }
}

/* Mobile: uma coluna por vez -- lista de conversas OU conversa aberta em
   tela cheia, com botão de voltar (mesmo comportamento de antes, só que
   agora a partir de 768px em vez de 900px, pra deixar mais espaço pro
   layout de tablet em duas colunas). */
@media (max-width: 768px) {
  #adminWhatsappSection { height: calc(100vh - 108px); min-height: 460px; }
  .wa-central-layout { grid-template-columns: 1fr; position: relative; }
  .wa-conv-list-pane { width: 100%; }
  .wa-chat-pane { display: none; position: absolute; inset: 0; }
  .wa-central-layout.wa-mobile-chat-open .wa-conv-list-pane { display: none; }
  .wa-central-layout.wa-mobile-chat-open .wa-chat-pane { display: flex; }
  .wa-chat-back-btn { display: inline-flex; }
  .wa-msg-bubble { max-width: 82%; }
}

/* ---------- Central de WhatsApp: mesclagem supervisionada de contatos
   (menu "..." no cabecalho da conversa + modal de mesclar/desfazer) ---------- */
.wa-chat-header-actions { position: relative; margin-left: auto; flex: 0 0 auto; }
.wa-chat-menu-btn { font-size: 18px; padding: 6px 10px; }
.wa-chat-menu-dropdown {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 20;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm);
  box-shadow: 0 8px 24px rgba(0,0,0,.18); min-width: 190px; padding: 6px; display: flex; flex-direction: column; gap: 2px;
}
.wa-chat-menu-item {
  background: transparent; border: none; text-align: left; padding: 8px 10px; border-radius: 6px;
  font-size: 13px; color: var(--text-primary); cursor: pointer;
  transition: background .15s var(--ease);
}
.wa-chat-menu-item:hover { background: var(--surface-3); }

#waMesclarDialog { max-width: 460px; }
.wa-mesclar-dialog { gap: 14px; }
.wa-mesclar-label { display: block; font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--text-muted); margin-bottom: 6px; }
.wa-mesclar-contato-card {
  background: var(--surface-3); border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 10px 12px; display: flex; flex-direction: column; gap: 2px;
}
.wa-mesclar-contato-nome { font-size: 13.5px; font-weight: 650; color: var(--text-primary); }
.wa-mesclar-contato-tel { font-size: 12px; color: var(--text-muted); }
.wa-mesclar-resultados { display: flex; flex-direction: column; gap: 4px; max-height: 180px; overflow-y: auto; }
.wa-mesclar-resultado-item {
  display: flex; flex-direction: column; gap: 1px; text-align: left; background: transparent;
  border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 8px 10px; cursor: pointer;
  transition: background .15s var(--ease), border-color .15s var(--ease);
}
.wa-mesclar-resultado-item:hover { background: var(--surface-3); border-color: var(--brand-a); }
.wa-mesclar-resultado-nome { font-size: 13px; font-weight: 600; color: var(--text-primary); }
.wa-mesclar-resultado-tel { font-size: 11.5px; color: var(--text-muted); }
.wa-mesclar-comparacao { display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px; align-items: center; }
.wa-mesclar-vs { font-size: 14px; font-weight: 700; color: var(--text-muted); }
.wa-mesclar-tag {
  display: inline-block; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
  color: var(--brand-b); margin-bottom: 4px;
}
.wa-mesclar-numero-futuro { font-size: 12.5px; }
.wa-mesclar-aviso {
  font-size: 12px; color: var(--text-secondary); background: var(--surface-3);
  border-radius: var(--radius-sm); padding: 9px 11px; margin: 0;
}

/* =============================================================================
   CLIENT COCKPIT (FASE B, prompt master noturno) -- classes ADITIVAS, usadas
   so pela nova experiencia Clientes -> Cliente X. Reaproveita os tokens
   globais (--surface, --border, --brand-*, --radius*, --shadow*) -- nenhum
   valor solto, nenhum CSS de tela antiga foi alterado.
   ============================================================================= */
.client-cockpit { display: flex; flex-direction: column; gap: 14px; }
.cockpit-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 20px; }
.cockpit-header-left { display: flex; align-items: center; gap: 14px; min-width: 0; }
.cockpit-header-right { display: flex; gap: 8px; flex-shrink: 0; }
.cockpit-kicker { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--view-cyan); font-weight: 700; }
.cockpit-name { margin: 2px 0 4px; font-size: 25px; font-family: "Sora", "Plus Jakarta Sans", sans-serif; line-height: 1.15; text-wrap: balance; color: var(--view-text); }
.cockpit-meta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 12.5px; color: var(--text-secondary); }
.cockpit-nav { display: flex; flex-wrap: wrap; gap: 6px; padding: 6px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.cockpit-nav-btn { appearance: none; border: 1px solid transparent; background: transparent; color: var(--text-secondary); padding: 9px 16px; border-radius: var(--radius-sm); font: inherit; font-size: 13px; font-weight: 600; white-space: nowrap; cursor: pointer; transition: background 160ms var(--ease), color 160ms var(--ease), box-shadow 160ms var(--ease); }
.cockpit-nav-btn:hover { background: var(--surface-2); color: var(--text-primary); }
.cockpit-nav-btn.active { background: linear-gradient(90deg, var(--view-cyan), var(--view-blue)); color: #04131d; border-color: transparent; font-weight: 800; box-shadow: 0 6px 18px rgba(34, 211, 238, 0.28); }
.cockpit-nav-btn .cockpit-nav-count { display: inline-block; min-width: 18px; margin-left: 6px; padding: 0 6px; border-radius: 999px; background: rgba(255, 255, 255, 0.08); font-size: 11px; line-height: 18px; text-align: center; color: var(--text-secondary); }
.cockpit-nav-btn.soon { opacity: 0.6; }
.cockpit-nav-btn:focus-visible { outline: 2px solid var(--brand-b); outline-offset: 2px; }
.cockpit-panel { display: flex; flex-direction: column; gap: 14px; }
.cockpit-grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 14px; }
.cockpit-ia-card { background: linear-gradient(160deg, rgba(20, 184, 166, 0.06), transparent 60%), var(--surface); }
.cockpit-empty { padding: 22px 8px; text-align: center; color: var(--text-muted); font-size: 13.5px; }
.cockpit-empty strong { display: block; color: var(--text-secondary); margin-bottom: 4px; }
.cockpit-row-status { font-size: 11px; padding: 2px 8px; border-radius: 999px; background: rgba(255, 255, 255, 0.06); color: var(--text-secondary); white-space: nowrap; }
/* Conteúdo (Task E, Fase 2) -- mecânica portada da VIEW 2.0 (Semanal/Mensal/
   Feed), mas com os tokens/componentes do sistema principal (--surface-2,
   --border, --text-muted, .badge), nunca CSS v2-* cru. */
.cockpit-conteudo-semana { display: flex; flex-wrap: wrap; gap: 10px; }
.cockpit-conteudo-dia { flex: 1 1 130px; min-width: 130px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; padding: 10px; }
.cockpit-conteudo-dia.hoje { border-color: var(--brand-b); }
.cockpit-conteudo-dia-head { font-size: 11px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.03em; margin-bottom: 6px; }
.cockpit-conteudo-dia-item { font-size: 12.5px; padding: 4px 0; border-top: 1px solid var(--border); overflow-wrap: anywhere; }
.cockpit-conteudo-dia-item:first-of-type { border-top: none; }
.cockpit-conteudo-feed { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); grid-auto-rows: 120px; gap: 10px; }
.cockpit-conteudo-feed-cell { position: relative; height: 100%; border-radius: 10px; overflow: hidden; background: var(--surface-2); border: 1px solid var(--border); cursor: pointer; }
.cockpit-conteudo-feed-cell img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cockpit-conteudo-feed-ph { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; height: 100%; padding: 8px; text-align: center; font-size: 11.5px; color: var(--text-muted); }
.cockpit-conteudo-feed-tag { position: absolute; left: 6px; bottom: 6px; }
#cockpitConteudoBody tr[data-ag-id] { cursor: pointer; }
/* SPRINT "HEADER DO CLIENT COCKPIT" (fechamento, 06/09/2026) -- lapidação
   do topo do Cockpit: identidade do cliente (logo maior, segmento, saúde),
   ações reorganizadas por hierarquia (principal/secundária/terciária) e
   preparação visual do Portal do Cliente. Reaproveita os tokens --view-* já
   existentes; nenhum redesenho do restante do Cockpit. */
.client-workspace-header { align-items: flex-start; flex-wrap: wrap; }
.client-workspace-brand { align-items: center; }
.client-workspace-logo { width: 52px; height: 52px; font-size: 17px; flex-shrink: 0; }
.client-workspace-meta-wrap { min-width: 0; }
.cockpit-meta-segmento { font-size: 12.5px; }
.cockpit-meta-secondary { font-size: 11.5px; margin-top: 2px; }
.client-workspace-actions { flex-wrap: wrap; align-items: center; justify-content: flex-end; row-gap: 8px; }
.client-workspace-pdf-select { max-width: 220px; }

.client-workspace-portal-btn {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(34, 211, 238, 0.1); color: var(--view-cyan);
  border: 1px solid var(--view-cyan); font-weight: 700;
}
.client-workspace-portal-btn:hover { background: rgba(34, 211, 238, 0.18); }
.client-workspace-portal-tag {
  font-size: 10px; font-weight: 700; letter-spacing: 0.04em;
  background: rgba(4, 9, 20, 0.55); color: var(--view-muted);
  border-radius: 999px; padding: 2px 8px;
}

.client-workspace-menu { position: relative; }
.client-workspace-menu-btn { font-weight: 800; letter-spacing: 0.08em; padding: 8px 12px; }
.client-workspace-menu-panel {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 30;
  display: flex; flex-direction: column; min-width: 220px; max-width: min(280px, 92vw);
  background: var(--view-surface-elevated); border: 1px solid var(--view-border-strong);
  border-radius: var(--view-radius-sm); box-shadow: var(--view-shadow); padding: 6px; gap: 2px;
}
.client-workspace-menu-item {
  display: block; width: 100%; text-align: left; background: none; border: none;
  color: var(--view-text); font: inherit; font-size: 13px; padding: 9px 10px;
  border-radius: var(--view-radius-sm); cursor: pointer; text-decoration: none;
}
.client-workspace-menu-item:hover { background: rgba(255, 255, 255, 0.06); }
.client-workspace-menu-item:focus-visible { outline: 2px solid var(--view-cyan); outline-offset: -2px; }
.client-workspace-menu-item.warning { color: var(--view-warning); }

.cockpit-portal-list { margin: 8px 0; padding-left: 18px; font-size: 13px; color: var(--view-text); }
.cockpit-portal-list li { margin: 4px 0; }
.cockpit-portal-status {
  margin-top: 10px; font-size: 12px; font-weight: 600; color: var(--view-muted);
  background: rgba(255, 255, 255, 0.04); border: 1px solid var(--view-border);
  border-radius: var(--view-radius-sm); padding: 8px 10px; text-align: center;
}

@media (max-width: 720px) {
  .cockpit-header { flex-direction: column; align-items: stretch; }
  .cockpit-header-right { justify-content: flex-end; }
  .cockpit-name { font-size: 19px; }
  .client-workspace-actions { justify-content: flex-start; }
  .client-workspace-pdf-select { max-width: 100%; flex: 1 1 160px; }
  .client-workspace-menu-panel { right: 0; left: auto; }
}

/* ---- Central criativa (FASE C) -- classes aditivas .cc-* e Modo captacao .mc-* ---- */
.cc-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.cc-chip { appearance: none; border: 1px solid var(--border); background: var(--surface); color: var(--text-secondary); padding: 6px 12px; border-radius: 999px; font: inherit; font-size: 12.5px; cursor: pointer; }
.cc-chip.active { background: linear-gradient(135deg, rgba(37, 99, 235, 0.22), rgba(20, 184, 166, 0.16)); color: var(--text-primary); border-color: rgba(37, 99, 235, 0.35); }
/* CONFIGURAÇÃO OPERACIONAL 2.0 (Bloco 2): dialog própria, 7 etapas. Reusa
   .cc-chip (navegação), .dialog-card, .table, .muted -- nenhum token novo.
   AUDITORIA PÓS-FASE (QA visual): a largura tem que ser controlada no
   elemento <dialog> em si (é ele que o navegador centraliza e limita no
   top layer -- mesmo padrão de #contractWizardDialog/dialog.wide), nunca
   no <form class="dialog-card co-dialog"> que fica DENTRO dele. Antes, o
   max-width:760px estava só no form; o <dialog> continuava preso no
   max-width:460px genérico (regra base "dialog{}"), então o form ficava
   mais largo que a caixa que o contém -- disso vinham TODOS os sintomas
   do QA: modal estreito, conteúdo cortado à esquerda, etapas fora da
   tela, "Entregas e volumes" espremido e o scroll horizontal (o
   overflow-y:auto da regra base "dialog{}" vira overflow-x:auto também,
   por spec, quando o eixo X não é controlado -- daí o scroll lateral). */
#configOperacionalDialog {
  max-width: min(1100px, 92vw);
  width: min(1100px, 92vw);
  overflow-x: hidden; /* nunca a dialog inteira com scroll lateral */
}
@media (max-width: 720px) {
  /* Tablet/mobile: a própria unidade vw já reduz a largura
     proporcionalmente; aqui só damos um pouco mais de respiro nas bordas
     e deixamos o layout virar vertical (grids .co-* já quebram em 640px). */
  #configOperacionalDialog { width: 94vw; max-width: 94vw; }
}
.co-dialog {
  /* Preenche 100% da largura que a #configOperacionalDialog definir --
     nunca mais define a própria largura (senão volta a brigar com o pai). */
  width: 100%;
  max-width: 100%;
}
.co-subtitulo { margin: 2px 0 0; font-size: 12.5px; }
.co-nav { margin-top: 2px; }
.co-passo { min-height: 180px; display: flex; flex-direction: column; gap: 10px; }
.co-resumo { display: grid; grid-template-columns: 140px 1fr; gap: 6px 14px; margin: 0; font-size: 13.5px; }
.co-resumo dt { color: var(--text-secondary); font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; padding-top: 2px; }
.co-resumo dd { margin: 0; }
.co-campo { display: flex; flex-direction: column; gap: 4px; max-width: 480px; }
.co-nota, .co-vazio { font-size: 12.5px; margin: 0; }
.co-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.co-chips-label { font-size: 11.5px; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.04em; margin-right: 4px; }
.co-chip { font-size: 12px; padding: 3px 9px; border-radius: 7px; border: 1px solid var(--border); }
.co-chip.on { color: var(--text-primary); border-color: rgba(52, 211, 153, 0.45); }
.co-chip.off { color: var(--text-secondary); text-decoration: line-through; }
.co-tabela { font-size: 12.5px; }
.co-lista { margin: 0; padding-left: 18px; font-size: 13.5px; }
.co-notas { margin: 0; padding: 10px 14px; border-left: 3px solid var(--border); font-size: 13.5px; white-space: pre-wrap; }
.co-passo-nav { display: flex; gap: 6px; }
/* Bloco 3: editores de Serviços e Entregas */
.co-servicos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 14px; }
@media (max-width: 640px) { .co-servicos { grid-template-columns: 1fr; } }
.co-servico { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 13px; padding: 4px 0; border-bottom: 1px solid var(--border); }
.co-servico select { max-width: 160px; }
.co-servico.on > span { color: var(--text-primary); font-weight: 600; }
.co-servico.off > span { color: var(--text-secondary); text-decoration: line-through; }
.co-grupo { display: flex; flex-direction: column; gap: 8px; padding: 10px 0; border-top: 1px solid var(--border); }
.co-grupo-titulo { margin: 0; font-size: 13.5px; }
.co-entrega { display: grid; grid-template-columns: 110px 130px 1fr; gap: 8px 10px; align-items: end; padding: 8px 10px; border: 1px solid var(--border); border-radius: 10px; font-size: 12.5px; }
.co-entrega label { display: flex; flex-direction: column; gap: 3px; }
.co-ent-dias { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.co-dia { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; }
.co-ent-obs { grid-column: 1 / 3; }
.co-ent-remover { justify-self: end; }
@media (max-width: 640px) { .co-entrega { grid-template-columns: 1fr 1fr; } .co-ent-obs { grid-column: 1 / -1; } }
/* Bloco 5: barra de modelos/presets */
.co-presets { display: flex; flex-direction: column; gap: 8px; padding: 8px 10px; border: 1px dashed var(--border); border-radius: 10px; font-size: 12.5px; }
.co-presets-linha { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.co-presets-linha select { max-width: 220px; }
.co-preset-form { display: flex; flex-direction: column; gap: 6px; }
.co-preset-form label { display: flex; flex-direction: column; gap: 3px; max-width: 480px; }
.co-preset-origem { font-size: 12px; }
/* Bloco 7: Inteligência (notas) */
/* UX 3.0: barra "Configurar por" (Manual | Ler contrato | Usar modelo).
   Substitui a barra de MODELOS que antes ficava aberta nas 7 etapas: só o
   modo escolhido abre painel, e Manual (padrão) não abre nenhum. */
.co-modos { display: flex; flex-direction: column; gap: 6px; padding: 8px 10px; border: 1px dashed var(--border); border-radius: 10px; font-size: 12.5px; }
.co-modos-linha { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.co-modo-ajuda { margin: 0; }
.co-modo-painel { display: flex; flex-direction: column; gap: 8px; padding-top: 6px; border-top: 1px solid var(--border); }
.co-modo-linha { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.co-modo-linha select { max-width: 260px; }
.co-cmp { display: flex; flex-direction: column; gap: 8px; }
.co-cmp-resumo { display: flex; flex-wrap: wrap; gap: 6px; }
.co-cmp-tabela { width: 100%; }
.co-cmp-tabela td, .co-cmp-tabela th { padding: 5px 8px; }
.co-sit-conflito { color: var(--critical); }
.co-sit-nova { color: var(--text-primary); }
.co-sit-igual, .co-sit-preenchivel { color: var(--text-secondary); }

.co-int-campos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 14px; }
.co-int-campo { max-width: none; }
@media (max-width: 640px) { .co-int-campos { grid-template-columns: 1fr; } }

.co-notas-campo { max-width: none; }
.co-notas-campo textarea { resize: vertical; min-height: 120px; font: inherit; }
/* Bloco 6: Rotinas (preparação) */
.co-rotinas-titulo { margin-top: 10px; display: flex; align-items: center; gap: 8px; }
.co-rotina { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px 10px; align-items: end; padding: 8px 10px; border: 1px solid var(--border); border-radius: 10px; font-size: 12.5px; }
.co-rotina label { display: flex; flex-direction: column; gap: 3px; }
.co-rot-nome { grid-column: 1 / 3; }
.co-rotina .co-ent-dias { grid-column: 1 / -1; }
.co-rot-aprov { flex-direction: row !important; align-items: center; }
.co-rot-obs { grid-column: 1 / 4; }
@media (max-width: 640px) { .co-rotina { grid-template-columns: 1fr 1fr; } .co-rot-nome, .co-rot-obs { grid-column: 1 / -1; } }
/* Bloco 4: Responsabilidades e Regras */
/* UX 3.0: ações rápidas de Serviços (discretas, uma linha) e blocos
   visualmente separados na etapa Rotina operacional. */
.co-acoes-rapidas { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.co-bloco { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; }
.co-bloco + .co-bloco { margin-top: 4px; }
.co-bloco > .co-grupo-titulo { margin: 0; }
.co-desabilitado { opacity: 0.55; }
.co-resp-vazia .co-resp-etapa { color: var(--text-secondary); }
.co-rot-servico { grid-column: 1 / 3; }

.co-resps { display: flex; flex-direction: column; }
.co-resp { display: grid; grid-template-columns: 1fr 140px auto; gap: 8px 12px; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--border); font-size: 13px; }
.co-resp-etapa { color: var(--text-primary); }
.co-regra { display: grid; grid-template-columns: 170px 1fr; gap: 8px 10px; align-items: end; padding: 8px 10px; border: 1px solid var(--border); border-radius: 10px; font-size: 12.5px; }
.co-regra label { display: flex; flex-direction: column; gap: 3px; }
.co-regra .co-ent-dias { grid-column: 1 / -1; }
@media (max-width: 640px) { .co-resp { grid-template-columns: 1fr 1fr; } .co-regra { grid-template-columns: 1fr; } }
.cc-item { border-top: 1px solid var(--border); }
.cc-item:first-of-type { border-top: 0; }
.cc-item-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 4px; cursor: pointer; }
.cc-item-head:hover { background: rgba(255, 255, 255, 0.02); }
.cc-caret { color: var(--text-muted); font-size: 12px; width: 14px; text-align: center; }
.cc-item-body { padding: 4px 4px 14px; display: flex; flex-direction: column; gap: 8px; }
.cc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; }
.cc-field { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--text-muted); }
.cc-field input, .cc-field select, .cc-field textarea { width: 100%; background: var(--surface-2); color: var(--text-primary); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 8px 10px; font: inherit; font-size: 13px; }
.cc-field textarea { resize: vertical; }
.cc-sub { margin: 8px 0 0; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); }
.cc-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
.cc-check { display: flex; align-items: center; gap: 8px; padding: 6px 0; font-size: 13.5px; }
.mc-overlay { position: fixed; inset: 0; z-index: 9000; background: var(--page); overflow-y: auto; -webkit-overflow-scrolling: touch; }
.mc-lock { overflow: hidden; }
.mc-shell { max-width: 720px; margin: 0 auto; padding: 14px 14px 90px; display: flex; flex-direction: column; gap: 12px; }
.mc-top { display: flex; justify-content: space-between; align-items: center; }
.mc-header h2 { margin: 2px 0 4px; font-size: 22px; }
.mc-item { padding: 10px 14px; }
.mc-check { display: grid; grid-template-columns: 1fr; gap: 6px; margin-top: 6px; }
.mc-check-item { display: flex; align-items: center; gap: 12px; padding: 12px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-2); font-size: 15px; cursor: pointer; min-height: 48px; }
.mc-check-item input { width: 22px; height: 22px; accent-color: var(--brand-b); }
.mc-check-item.done { border-color: rgba(34, 197, 94, 0.45); background: rgba(34, 197, 94, 0.08); }
.mc-res { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.mc-footer { position: fixed; left: 0; right: 0; bottom: 0; padding: 12px 14px calc(12px + env(safe-area-inset-bottom)); background: linear-gradient(to top, var(--page) 70%, transparent); display: flex; justify-content: center; }
.mc-footer .btn { min-width: 260px; min-height: 48px; font-size: 15px; }
.mc-resumo { padding: 14px; }
@media (min-width: 560px) { .mc-check { grid-template-columns: 1fr 1fr; } }

/* ---- Dashboard: seletor de visao + graficos compactos (FASE A) ---- */
.dash-view-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: -6px 0 14px; }
.dash-view-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.dash-chart-details summary { list-style: none; }
.dash-chart-details summary::-webkit-details-marker { display: none; }
.dash-chart-details[open] summary .cc-caret { transform: rotate(90deg); }
.dash-chart-details:not([open]) { padding-bottom: 14px; }
.dash-view-hidden { display: none !important; }

/* ================================================================
   CORRECAO VISUAL OBRIGATORIA — DASHBOARD VIEW GESTOR (05/09/2026)
   Reformulacao real do Design System aplicada SOMENTE ao Dashboard
   e a sidebar/header globais. Nao mexe em Central de Producao,
   Agendamento (fluxo/FSM), Central Criativa, Contratos, Cockpit,
   Gerenciador de IA, Estrategia nem PDF -- so aparencia, reaproveita
   os mesmos ids/atributos que o app.js ja usa. Baseado na referencia
   visual aprovada: dark premium, navy profundo, ciano/azul de destaque,
   glow discreto, profundidade real entre camadas.
   ================================================================ */

:root {
  /* tokens do novo design system -- somam aos tokens antigos (nada foi
     removido), para o resto do app que ainda usa --surface/--border etc
     continuar funcionando sem mudanca nenhuma. */
  --view-bg: #060b16;
  --view-bg-2: #0a1120;
  --view-surface: #0d1526;
  --view-surface-elevated: #121b30;
  --view-surface-hi: #17223b;
  --view-border: rgba(148, 178, 224, 0.14);
  --view-border-strong: rgba(148, 178, 224, 0.26);
  --view-cyan: #22d3ee;
  --view-blue: #3b82f6;
  --view-green: #34d399;
  --view-danger: #f2685f;
  --view-warning: #f5b544;
  --view-text: #f3f6fb;
  --view-muted: #8ea0bf;
  --view-radius: 18px;
  --view-radius-sm: 12px;
  --view-shadow: 0 18px 44px rgba(1, 5, 14, 0.55);
  --view-glow: 0 0 0 1px rgba(34, 211, 238, 0.14), 0 0 40px rgba(59, 130, 246, 0.18);
}

/* Fundo global mais profundo (camada FUNDO da hierarquia visual) */
html, body {
  background:
    radial-gradient(1200px 620px at 8% -10%, rgba(34, 211, 238, 0.09), transparent 58%),
    radial-gradient(1000px 560px at 100% -6%, rgba(59, 130, 246, 0.11), transparent 55%),
    radial-gradient(900px 700px at 50% 120%, rgba(15, 23, 42, 0.6), transparent 60%),
    var(--view-bg);
  background-attachment: fixed;
}

/* ---------------- SIDEBAR premium ---------------- */
.app-sidebar {
  background: linear-gradient(180deg, var(--view-surface-elevated) 0%, var(--view-bg-2) 100%);
  border: 1px solid var(--view-border);
  box-shadow: var(--view-shadow), 6px 0 40px rgba(34, 211, 238, 0.05);
  padding: 18px 12px;
  position: relative;
}
.app-sidebar::after {
  content: "";
  position: absolute; top: 10%; right: 0; bottom: 10%; width: 1px;
  background: linear-gradient(180deg, transparent, rgba(34, 211, 238, 0.28), transparent);
  filter: blur(0.5px);
}
.sidebar-brand {
  border-bottom: 1px solid var(--view-border);
  padding: 4px 8px 18px;
  gap: 12px;
}
.sidebar-logo {
  width: 34px; height: 34px;
  filter: drop-shadow(0 0 14px rgba(34, 211, 238, 0.45));
}
.sidebar-brand-name {
  font-size: 17px;
  letter-spacing: 0.02em;
  background: linear-gradient(90deg, #fff, var(--view-cyan));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.sidebar-brand-role {
  color: var(--view-cyan);
  letter-spacing: 0.1em;
}
.sidebar-group-title {
  color: var(--view-muted);
  position: relative;
  padding-left: 12px;
}
.sidebar-group-title::before {
  content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 4px; height: 4px; border-radius: 50%; background: var(--view-border-strong);
}
.admin-tab {
  color: var(--view-muted) !important;
  border-radius: 12px !important;
  position: relative;
}
.admin-tab svg { opacity: 0.75; transition: opacity 0.16s var(--ease); }
.admin-tab:hover {
  background: rgba(148, 178, 224, 0.08) !important;
  color: var(--view-text) !important;
}
.admin-tab:hover svg { opacity: 1; }
.admin-tab.active {
  background: linear-gradient(90deg, rgba(34, 211, 238, 0.20), rgba(59, 130, 246, 0.07)) !important;
  color: #fff !important;
  border-color: rgba(34, 211, 238, 0.42) !important;
  box-shadow: inset 0 0 0 1px rgba(34, 211, 238, 0.14), 0 0 26px rgba(34, 211, 238, 0.18);
}
.admin-tab.active::before {
  content: ""; position: absolute; left: -12px; top: 8px; bottom: 8px; width: 3px;
  border-radius: 3px; background: linear-gradient(180deg, var(--view-cyan), var(--view-blue));
}
.admin-tab.active svg { opacity: 1; color: var(--view-cyan); }

/* ---------------- HEADER / SAUDACAO ---------------- */
.dash-greeting { align-items: flex-end; margin-bottom: 20px; }
.dash-greeting-main { display: flex; flex-direction: column; gap: 3px; }
.dash-greeting h2 {
  font-size: 25px;
  font-family: "Sora", "Plus Jakarta Sans", sans-serif;
}
.dash-greeting-subtitle { margin: 0; font-size: 13px; color: var(--view-muted); }
.dash-greeting .muted { text-align: right; line-height: 1.4; }

/* ---------------- SEGMENTED CONTROL premium ---------------- */
.dash-view-bar {
  background: linear-gradient(135deg, var(--view-surface) 0%, var(--view-surface-elevated) 100%);
  border: 1px solid var(--view-border);
  border-radius: var(--view-radius);
  padding: 14px 18px;
  box-shadow: var(--view-shadow);
  justify-content: space-between;
}
.dash-view-bar-label { display: flex; align-items: center; gap: 12px; font-size: 13px; }
.dash-view-bar-label strong { display: block; font-size: 13.5px; color: var(--view-text); }
.dash-view-bar-hint { display: block; font-size: 11.5px; margin-top: 1px; }
.dash-view-bar-icon {
  width: 34px; height: 34px; border-radius: 10px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(34, 211, 238, 0.12); color: var(--view-cyan);
}
.dash-view-bar-icon svg { width: 18px; height: 18px; }
.dash-view-chips {
  display: flex; gap: 4px; padding: 4px;
  background: rgba(4, 9, 20, 0.55); border: 1px solid var(--view-border);
  border-radius: 999px;
}
.dash-view-chips .cc-chip {
  border: none; background: transparent; color: var(--view-muted);
  padding: 8px 16px; border-radius: 999px; font-weight: 700; font-size: 12.5px;
  transition: background 0.18s var(--ease), color 0.18s var(--ease), box-shadow 0.18s var(--ease);
}
.dash-view-chips .cc-chip:hover { color: var(--view-text); }
.dash-view-chips .cc-chip.active {
  background: linear-gradient(90deg, var(--view-cyan), var(--view-blue));
  color: #04131d; box-shadow: 0 6px 18px rgba(34, 211, 238, 0.28);
}

/* RODADA "Dashboard principal": KPIs de produção/clientes, mesmo
   acabamento premium já usado na Central de Produção (#prodMetrics),
   escopado só a #dashProducaoKpis. */
#dashProducaoKpis.metrics-grid { gap: 10px; }
#dashProducaoKpis .metric-tile {
  background: linear-gradient(180deg, var(--view-surface-elevated) 0%, var(--view-surface) 100%);
  border: 1px solid var(--view-border); border-radius: var(--view-radius-sm);
  padding: 13px 15px; border-left: 3px solid var(--view-border-strong);
}
#dashProducaoKpis .metric-tile:hover { border-color: var(--view-border-strong); background: var(--view-surface-hi); }
#dashProducaoKpis .metric-tile.alert { border-left-color: var(--view-danger); }
#dashProducaoKpis .metric-tile .label { color: var(--view-muted); }

/* Clientes: mesmas abas premium do Dashboard (Ativos/Arquivados), mesmo
   componente/tokens de ".dash-view-chips" -- não cria um segundo estilo. */
.clients-tabs {
  padding: 4px; background: rgba(4, 9, 20, 0.55); border: 1px solid var(--view-border);
  border-radius: 999px;
}
.clients-tabs .cc-chip {
  border: none; background: transparent; color: var(--view-muted);
  padding: 8px 16px; border-radius: 999px; font-weight: 700; font-size: 12.5px;
  transition: background 0.18s var(--ease), color 0.18s var(--ease), box-shadow 0.18s var(--ease);
}
.clients-tabs .cc-chip:hover { color: var(--view-text); }
.clients-tabs .cc-chip.active {
  background: linear-gradient(90deg, var(--view-cyan), var(--view-blue));
  color: #04131d; box-shadow: 0 6px 18px rgba(34, 211, 238, 0.28);
}

/* ---------------- CARD base: profundidade real ---------------- */
.card {
  background: linear-gradient(180deg, var(--view-surface-elevated) 0%, var(--view-surface) 100%);
  border: 1px solid var(--view-border);
  box-shadow: var(--view-shadow);
  position: relative;
}
.card:hover { border-color: var(--view-border-strong); }
.card-title-row h3 { font-family: "Sora", "Plus Jakarta Sans", sans-serif; font-size: 15.5px; }

/* ---------------- ATENCAO AGORA premium ---------------- */
#dashAtencaoAgoraCard {
  background: linear-gradient(135deg, rgba(242, 104, 95, 0.14) 0%, var(--view-surface-elevated) 55%);
  border: 1px solid rgba(242, 104, 95, 0.32);
  box-shadow: 0 18px 44px rgba(1, 5, 14, 0.55), 0 0 26px rgba(242, 104, 95, 0.08);
}
#dashAtencaoAgoraCard .card-title-row h3 {
  display: flex; align-items: center; gap: 8px;
}
#dashAtencaoAgoraCard .card-title-row h3::before {
  content: "";
  width: 30px; height: 30px; border-radius: 9px; flex-shrink: 0;
  background: rgba(242, 104, 95, 0.16);
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f2685f' stroke-width='2'%3E%3Cpath d='M12 9v4M12 17h.01'/%3E%3Cpath d='M10.3 3.9L1.8 18a2 2 0 001.7 3h17a2 2 0 001.7-3L13.7 3.9a2 2 0 00-3.4 0z'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: center; background-size: 17px;
}
#dashAtencaoAgoraList {
  display: flex; flex-direction: row; flex-wrap: wrap; gap: 10px;
}
#dashAtencaoAgoraList .employee-row {
  flex: 1 1 260px;
  background: rgba(4, 9, 20, 0.42);
  border: 1px solid rgba(242, 104, 95, 0.22);
  border-radius: var(--view-radius-sm);
  padding: 12px 14px;
  cursor: pointer;
  transition: transform 0.16s var(--ease), border-color 0.16s var(--ease), background 0.16s var(--ease);
}
#dashAtencaoAgoraList .employee-row:hover {
  transform: translateY(-2px);
  background: rgba(4, 9, 20, 0.6);
  border-color: rgba(242, 104, 95, 0.4);
}
#dashAtencaoAgoraList .er-name { font-weight: 700; font-size: 13.5px; }
#dashAtencaoAgoraList .er-meta { font-size: 12px; color: var(--view-muted); margin-top: 2px; }
#dashAtencaoAgoraList .badge.warning { background: rgba(245, 181, 68, 0.16); color: var(--view-warning); }
#dashAtencaoAgoraList .badge.critical { background: rgba(242, 104, 95, 0.18); color: var(--view-danger); }

/* Rodada 2: com muitos alertas o bloco ficava enorme -- so os 3 mais graves
   aparecem por padrao (a ordenacao por gravidade continua vindo pronta de
   montarAtencaoAgora/dashboard-atencao-agora.js, aqui so escondemos o
   excesso); "Ver mais (N)" revela o resto sem recarregar nada. */
#dashAtencaoAgoraList .dash-atencao-extra.hidden { display: none !important; }
.dash-atencao-vermais {
  flex: 1 1 100%;
  background: rgba(148, 178, 224, 0.08);
  border: 1px dashed var(--view-border-strong);
  border-radius: var(--view-radius-sm);
  color: var(--view-text); font-weight: 700; font-size: 12.5px;
  padding: 10px 14px; cursor: pointer;
  transition: background 0.16s var(--ease), border-color 0.16s var(--ease);
}
.dash-atencao-vermais:hover { background: rgba(148, 178, 224, 0.14); border-color: var(--view-cyan); }

/* ---------------- OPERACAO DO DIA — 3 cards equivalentes (rodada 2) ----------------
   align-items:start em vez de stretch: um card vazio nao e mais esticado ate
   a altura do card cheio ao lado -- cada um assume a altura do seu conteudo. */
.dash-agenda-row { align-items: start; }
.dash-agenda-row .card, .dash-agenda-row > .dash-queue-card {
  display: flex; flex-direction: column; min-height: 168px;
}
.dash-agenda-row .employee-list { flex: 1; }
.dash-agenda-row .employee-list:has(> p.muted:only-child) {
  display: flex; align-items: center; justify-content: center;
}
/* card com conteudo vazio (so o <p class="muted">): fica compacto, sem
   sobra de espaco -- nao força mais 260px so pra ficar igual aos outros. */
.dash-agenda-row .card:has(.employee-list > p.muted:only-child),
.dash-agenda-row .dash-queue-card:has(.dash-queue-panels.q-none) {
  min-height: 0;
}
.dash-agenda-row p.muted {
  text-align: center; padding: 14px 10px; margin: 0; font-size: 12px;
  border: 1px dashed var(--view-border); border-radius: var(--view-radius-sm);
}

/* ---------------- FILA — Agendamentos e aprovações (2 paineis) ----------------
   Rodada 2 (correcao visual): a divisao 50/50 fixa causava painel vazio
   ocupando metade do cartao e o badge saindo do container. Agora a divisao
   e decidida via classe calculada em app.js/syncDashQueuePanelsLayout()
   (0 logica de negocio, so olha se cada lista tem .employee-row real):
   q-both = 2 colunas · q-approve-only/q-schedule-only = painel unico 100%
   · q-none = estado vazio compacto (so o painel de aprovacao, sem duplicar
   a mensagem). Sem a classe (JS antigo/desligado) cai no fallback 2 colunas
   de sempre, nunca quebra. */
.dash-queue-card { grid-column: span 1; }
.dash-queue-panels {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px; flex: 1; min-width: 0;
}
.dash-queue-panels.q-approve-only,
.dash-queue-panels.q-schedule-only,
.dash-queue-panels.q-none { grid-template-columns: 1fr; }
.dash-queue-panels.q-approve-only .dash-queue-panel:nth-child(2),
.dash-queue-panels.q-schedule-only .dash-queue-panel:nth-child(1),
.dash-queue-panels.q-none .dash-queue-panel:nth-child(2) { display: none; }
.dash-queue-panel {
  background: rgba(4, 9, 20, 0.38);
  border: 1px solid var(--view-border);
  border-radius: var(--view-radius-sm);
  padding: 14px;
  display: flex; flex-direction: column; min-width: 0; max-width: 100%;
  overflow: hidden;
}
.dash-queue-panel-head {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 700; color: var(--view-text);
  text-transform: uppercase; letter-spacing: 0.04em;
  margin-bottom: 12px;
}
.dash-queue-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.dash-queue-dot-approve { background: var(--view-green); box-shadow: 0 0 8px rgba(52, 211, 153, 0.6); }
.dash-queue-dot-schedule { background: var(--view-cyan); box-shadow: 0 0 8px rgba(34, 211, 238, 0.6); }
.dash-queue-panel .employee-list { flex: 1; min-width: 0; }

/* item seguro dentro do painel: min-width:0 evita que o texto empurre o
   badge pra fora; badge nunca ultrapassa a largura disponivel; titulo
   quebra em ate 2 linhas em vez de comprimir/gerar overflow horizontal. */
.dash-queue-panel .employee-list .employee-row,
.dash-agenda-row .employee-list .employee-row {
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 6px 10px;
  row-gap: 4px;
}
.dash-queue-panel .employee-list .employee-row > div:first-child,
.dash-agenda-row .employee-list .employee-row > div:first-child {
  min-width: 0;
  flex: 1 1 140px;
}
.dash-queue-panel .employee-list .er-name,
.dash-agenda-row .employee-list .er-name {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
  line-height: 1.35;
}
.dash-queue-panel .employee-list .er-meta,
.dash-agenda-row .employee-list .er-meta { overflow-wrap: anywhere; }
.dash-queue-panel .employee-list .tag,
.dash-queue-panel .employee-list .badge,
.dash-agenda-row .employee-list .tag,
.dash-agenda-row .employee-list .badge {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  flex-shrink: 0;
  margin-left: auto;
}

/* numeracao discreta da fila (1/2/3) -- so cosmetico, a ordem/corte ja vem
   pronta de agendamento-fila-dashboard.js; aqui so rotula visualmente. */
#dashAgendamentosList, #dashAgendaPendenteList { counter-reset: dash-queue-pos; }
#dashAgendamentosList .employee-row, #dashAgendaPendenteList .employee-row {
  counter-increment: dash-queue-pos;
  position: relative;
  padding-left: 36px;
}
#dashAgendamentosList .employee-row::before, #dashAgendaPendenteList .employee-row::before {
  content: counter(dash-queue-pos);
  position: absolute; left: 8px; top: 8px;
  width: 24px; height: 24px; border-radius: 50%;
  background: rgba(34, 211, 238, 0.14); color: var(--view-cyan);
  font-size: 12px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 12px rgba(34, 211, 238, 0.18);
}
@media (max-width: 720px) { .dash-queue-panels { grid-template-columns: 1fr; } }

/* ---------------- RESUMO FINANCEIRO premium ---------------- */
/* Rodada 5 (alta fidelidade): Financeiro vira o container PROTAGONISTA da
   Visão Geral -- borda ciano mais presente + glow proprio, maior que o
   dos demais cards, sem alterar nenhum valor/calculo/query. */
.dash-finance-summary {
  padding: 24px 26px;
  border-color: rgba(34, 211, 238, 0.22);
  box-shadow: var(--view-shadow), 0 0 50px rgba(34, 211, 238, 0.10), inset 0 0 0 1px rgba(34, 211, 238, 0.06);
}
.dash-finance-summary-head { margin-bottom: 18px; }
.dash-finance-summary-title { display: flex; align-items: center; gap: 12px; }
.dash-finance-summary-icon {
  width: 38px; height: 38px; border-radius: 11px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, rgba(34, 211, 238, 0.18), rgba(59, 130, 246, 0.10));
  color: var(--view-cyan);
}
.dash-finance-summary-icon svg { width: 19px; height: 19px; }
.dash-finance-summary-title h3 { margin: 0; font-size: 16px; }
.dash-finance-summary-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.dash-period-select {
  background: rgba(4, 9, 20, 0.5); border: 1px solid var(--view-border-strong);
  border-radius: 999px; padding: 8px 14px; font-weight: 600; font-size: 12.5px;
  max-width: 190px;
}
.dash-finance-summary .link-btn {
  color: var(--view-cyan); font-weight: 700; font-size: 12.5px; white-space: nowrap;
}

/* Ajuste no seletor de período: popover compacto do intervalo "Personalizado"
   -- mesma identidade premium do resto do Resumo financeiro (cartão escuro,
   borda ciano sutil), nasce oculto e some de novo ao Cancelar/Aplicar. */
.dash-period-custom {
  display: flex; align-items: flex-end; flex-wrap: wrap; gap: 12px;
  margin: 12px 0 4px;
  padding: 12px 14px;
  background: rgba(4, 9, 20, 0.4);
  border: 1px solid rgba(34, 211, 238, 0.22);
  border-radius: var(--view-radius-sm);
}
.dash-period-custom-field {
  display: flex; flex-direction: column; gap: 4px;
  font-size: 11px; color: var(--view-muted); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.04em;
}
.dash-period-custom-field input {
  background: rgba(4, 9, 20, 0.5); border: 1px solid var(--view-border-strong);
  border-radius: var(--view-radius-sm); padding: 7px 10px;
  color: var(--view-text); font-size: 12.5px; font-weight: 600;
  color-scheme: dark;
}
.dash-period-custom-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.dash-period-custom-actions .btn { padding: 7px 16px; font-size: 12.5px; }
.dash-period-custom-error {
  flex: 1 1 100%;
  font-size: 12px; color: var(--view-danger); font-weight: 600;
}
@media (max-width: 640px) {
  .dash-period-custom { flex-direction: column; align-items: stretch; }
  .dash-period-custom-actions { margin-left: 0; justify-content: flex-end; }
}

/* Ajuste final (rodada 3, 05/09/2026): Caixa não é mais um hero-card
   isolado -- vira um card equivalente aos outros 3 indicadores principais
   (Receita/Despesas/Resultado), todos no mesmo grid de 4 colunas. As
   regras antigas de ".stat-tile-grid > .stat-tile:nth-child(...)" foram
   REMOVIDAS daqui porque elas nunca deveriam ter sido globais: como
   ".stat-tile-grid" também é usada em Cockpit/Gerenciador de IA/Saída das
   Dívidas/Resumo do funcionário, aquela regra forçava 3 colunas e a
   colorização dos "3 primeiros" em telas que não são o Resumo financeiro
   do Dashboard. Essas telas voltam ao grid auto-fit de sempre (definição
   original em ".stat-tile-grid" no topo do arquivo); o Resumo financeiro
   agora tem seu próprio sistema, todo escopado. */
.dash-finance-main-grid {
  display: grid;
  /* AUDITORIA GLOBAL DE UX/RESPONSIVIDADE: 1fr puro não encolhe abaixo do
     min-content de cada .stat-tile (valor + label + ícone) -- mesmo bug
     de grid já corrigido nesta rodada em .prod-cal-day e .two-cols
     (achado real em QA ao vivo, 1024px: 4 tiles ficavam maiores que o
     espaço disponível). minmax(0,1fr) permite o grid respeitar a largura
     real disponível. */
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 10px;
}
/* #dashStatTilesMain: só um passa-através -- os 3 .stat-tile que o JS
   escreve dentro dele viram itens diretos deste grid de 4 colunas, ao lado
   do card de Caixa (que já é markup estático, primeiro item do grid). */
.dash-finance-main-grid-contents { display: contents; }

.dash-finance-main-grid .stat-tile,
.dash-finance-tile {
  background: linear-gradient(160deg, var(--view-surface-hi) 0%, var(--view-surface) 100%);
  border: 1px solid var(--view-border);
  border-radius: var(--view-radius-sm);
  padding: 14px 16px;
  display: flex; align-items: center; gap: 12px;
  position: relative;
  transition: transform 0.18s var(--ease), border-color 0.18s var(--ease), background 0.18s var(--ease);
}
.dash-finance-main-grid .stat-tile:hover,
.dash-finance-tile:hover { border-color: var(--view-border-strong); background: var(--view-surface-hi); transform: translateY(-2px); }
.dash-finance-main-grid .stat-tile-icon,
.dash-finance-tile .stat-tile-icon { width: 38px; height: 38px; border-radius: 11px; flex-shrink: 0; }
.dash-finance-main-grid .stat-tile-body,
.dash-finance-tile .stat-tile-body { min-width: 0; }
.dash-finance-main-grid .stat-tile-body .value,
.dash-finance-tile .stat-tile-body .value { font-size: 21px; }
.dash-finance-main-grid .stat-tile-body .label,
.dash-finance-tile .stat-tile-body .label { font-size: 11px; }
/* cores: Receita = verde/ciano (herda .ok), Resultado conforme sinal
   (herda .ok/.alert do JS), Caixa = azul/ciano (própria); só Despesas
   precisa de uma regra própria pq o JS não passa classe pra ela. */
.dash-finance-main-grid-contents .stat-tile:nth-child(2) .stat-tile-icon {
  background: rgba(242, 104, 95, 0.14); color: var(--view-danger);
}
.dash-finance-tile-caixa .stat-tile-icon { background: rgba(59, 130, 246, 0.16); color: var(--view-blue); }
.dash-finance-tile-caixa { cursor: default; }
/* Rodada 5: borda contextual por indicador (Receita/Resultado herdam
   .ok/.alert do JS de sempre; Despesas e Caixa ganham regra propria) +
   glow no icone, pra reforcar a hierarquia sem inventar percentuais. */
.dash-finance-main-grid .stat-tile.ok,
.dash-finance-tile.ok { border-color: rgba(52, 211, 153, 0.24); }
.dash-finance-main-grid .stat-tile.alert,
.dash-finance-tile.alert { border-color: rgba(242, 104, 95, 0.24); }
.dash-finance-main-grid-contents .stat-tile:nth-child(2) { border-color: rgba(242, 104, 95, 0.24); }
.dash-finance-tile-caixa { border-color: rgba(59, 130, 246, 0.24); }
.dash-finance-main-grid .stat-tile.ok .stat-tile-icon,
.dash-finance-tile.ok .stat-tile-icon { box-shadow: 0 0 16px rgba(52, 211, 153, 0.35); }
.dash-finance-main-grid .stat-tile.alert .stat-tile-icon,
.dash-finance-tile.alert .stat-tile-icon { box-shadow: 0 0 16px rgba(242, 104, 95, 0.35); }
.dash-finance-main-grid-contents .stat-tile:nth-child(2) .stat-tile-icon { box-shadow: 0 0 16px rgba(242, 104, 95, 0.3); }
.dash-finance-tile-caixa .stat-tile-icon { box-shadow: 0 0 16px rgba(59, 130, 246, 0.3); }
.dash-finance-main-grid .stat-tile,
.dash-finance-tile { gap: 14px; padding: 16px 18px; }
.dash-finance-tile-adjust {
  position: absolute; top: 10px; right: 10px;
  width: 26px; height: 26px; border-radius: 8px; border: none;
  background: rgba(148, 178, 224, 0.08); color: var(--view-muted);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  transition: background 0.16s var(--ease), color 0.16s var(--ease);
}
.dash-finance-tile-adjust svg { width: 13px; height: 13px; }
.dash-finance-tile-adjust:hover { background: rgba(34, 211, 238, 0.14); color: var(--view-cyan); }
.dash-finance-summary .value.alert { color: var(--view-danger); }

@media (max-width: 900px) { .dash-finance-main-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .dash-finance-main-grid { grid-template-columns: 1fr; } }

/* Indicadores secundários (Clientes ativos/Tarefas atrasadas/Metas): faixa
   compacta de chips inline, não cards -- reduz bastante a altura total do
   Resumo financeiro. Mesmos valores/classes de alerta de sempre. */
.dash-finance-secondary-strip {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 6px 16px; padding: 10px 2px 0;
}
.dash-stat-chip {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12.5px; color: var(--view-muted);
}
.dash-stat-chip:not(:first-child) { padding-left: 16px; border-left: 1px solid var(--view-border); }
.dash-stat-chip-icon {
  width: 22px; height: 22px; border-radius: 7px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(148, 178, 224, 0.10); color: var(--view-muted);
}
.dash-stat-chip-icon svg { width: 12px; height: 12px; }
.dash-stat-chip-value {
  font-weight: 800; font-size: 13.5px; color: var(--view-text);
  font-variant-numeric: tabular-nums;
}
.dash-stat-chip-label { white-space: nowrap; }
.dash-stat-chip.alert .dash-stat-chip-value { color: var(--view-danger); }
.dash-stat-chip.alert .dash-stat-chip-icon { background: rgba(242, 104, 95, 0.14); color: var(--view-danger); }
.dash-stat-chip.ok .dash-stat-chip-value { color: var(--view-green); }
@media (max-width: 480px) {
  .dash-stat-chip:not(:first-child) { padding-left: 0; border-left: none; }
}

/* ---------------- VIEW IA card ---------------- */
.dash-view-ia-card {
  display: flex; align-items: flex-start; gap: 16px;
  background: linear-gradient(135deg, rgba(144, 133, 233, 0.12) 0%, var(--view-surface-elevated) 60%);
  border: 1px solid rgba(144, 133, 233, 0.28);
}
.dash-view-ia-icon {
  width: 40px; height: 40px; border-radius: 12px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(144, 133, 233, 0.16); color: #a89bf2;
}
.dash-view-ia-icon svg { width: 20px; height: 20px; }
.dash-view-ia-body .sit-badge {
  display: inline-flex; font-size: 10.5px; font-weight: 800; letter-spacing: 0.05em;
  text-transform: uppercase; color: #a89bf2; background: rgba(144, 133, 233, 0.14);
  padding: 3px 9px; border-radius: 999px; margin-bottom: 6px;
}
.dash-view-ia-body h3 { margin: 0 0 6px; font-size: 15px; font-family: "Sora", "Plus Jakarta Sans", sans-serif; }
.dash-view-ia-body p { margin: 0; font-size: 12.5px; color: var(--text-secondary); line-height: 1.55; }

/* ---------------- GRAFICOS compactos/expandidos premium ---------------- */
.dash-chart-details {
  padding: 16px 20px;
  transition: box-shadow 0.2s var(--ease), border-color 0.2s var(--ease);
}
.dash-chart-details summary {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 0;
}
.dash-chart-details:not([open]) summary { margin-bottom: 0; }
.dash-chart-details .cc-caret {
  display: flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 8px;
  background: rgba(148, 178, 224, 0.08); color: var(--view-muted);
  transition: transform 0.2s var(--ease), background 0.2s var(--ease), color 0.2s var(--ease);
}
.dash-chart-details[open] {
  border-color: var(--view-border-strong);
  box-shadow: var(--view-shadow), 0 0 30px rgba(34, 211, 238, 0.09);
}
.dash-chart-details[open] .cc-caret { background: rgba(34, 211, 238, 0.14); color: var(--view-cyan); }
.dash-chart-details[open] .chart-wrap { animation: dashChartOpen 0.24s var(--ease) both; }
@keyframes dashChartOpen { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }

/* ---------------- Drawer "Ver analises detalhadas" ---------------- */
.dash-more-details { padding: 0; overflow: hidden; }
.dash-more-trigger {
  display: flex; align-items: center; gap: 12px; cursor: pointer;
  padding: 16px 20px; list-style: none;
}
.dash-more-trigger::-webkit-details-marker { display: none; }
.dash-more-trigger-icon {
  width: 32px; height: 32px; border-radius: 9px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(148, 178, 224, 0.08); color: var(--view-muted);
}
.dash-more-trigger-icon svg { width: 16px; height: 16px; }
.dash-more-trigger-text { flex: 1; display: flex; flex-direction: column; gap: 1px; }
.dash-more-trigger-text strong { font-size: 13.5px; }
.dash-more-details .cc-caret { transition: transform 0.2s var(--ease); }
.dash-more-details[open] .cc-caret { transform: rotate(90deg); }
.dash-more-details .dash-toggle-row {
  padding: 0 20px 18px; border-top: 1px solid var(--view-border); margin-top: 0; padding-top: 14px;
}

/* ---------------- microinteracoes globais do dashboard ---------------- */
#adminDashboardSection .card,
#adminDashboardSection .stat-tile,
#adminDashboardSection .dash-queue-panel {
  transition: transform 0.18s var(--ease), border-color 0.18s var(--ease), box-shadow 0.2s var(--ease), background 0.18s var(--ease);
}
#adminDashboardSection .dash-agenda-row .card:hover,
#adminDashboardSection .dash-queue-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--view-shadow), 0 0 20px rgba(34, 211, 238, 0.05);
}

@media (prefers-reduced-motion: reduce) {
  #adminDashboardSection .card,
  #adminDashboardSection .stat-tile,
  #adminDashboardSection .dash-queue-panel,
  .dash-chart-details .chart-wrap { transition: none !important; animation: none !important; }
}

/* ---------------- responsividade fina ---------------- */
@media (max-width: 640px) {
  .dash-finance-summary { padding: 18px; }
  .dash-view-bar { flex-direction: column; align-items: stretch; }
  .dash-view-chips { justify-content: stretch; }
  .dash-view-chips .cc-chip { flex: 1; text-align: center; }
  .dash-greeting { flex-direction: column; align-items: flex-start; }
  .dash-greeting .muted { text-align: left; }
}

/* ================================================================
   REFORMULAÇÃO VISUAL FINAL — Dashboard (rodada 4, 05/09/2026)
   Fidelidade de alta precisão à referência aprovada pelo usuário.
   Composição/hierarquia/densidade copiadas da imagem; todos os dados
   continuam vindo das mesmas funções/queries de sempre.
   ================================================================ */

/* ---------------- fundo global mais rico (só CSS, sem imagem pesada) ---------------- */
body::before {
  content: "";
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    repeating-linear-gradient(115deg, rgba(34, 211, 238, 0.07) 0px, rgba(34, 211, 238, 0.07) 1px, transparent 1px, transparent 130px),
    radial-gradient(1000px 560px at 85% -10%, rgba(34, 211, 238, 0.13), transparent 60%),
    radial-gradient(760px 460px at -5% 10%, rgba(59, 130, 246, 0.12), transparent 55%),
    radial-gradient(600px 380px at 50% 100%, rgba(34, 211, 238, 0.05), transparent 60%);
  filter: blur(0.3px);
}
.app-shell { position: relative; z-index: 1; }

/* ---------------- sidebar: marca maior, card do usuário no rodapé ---------------- */
.sidebar-logo { width: 42px; height: 42px; }
.sidebar-brand-name { font-size: 20.5px; }
.sidebar-brand-role { font-size: 11px; letter-spacing: 0.14em; }
.sidebar-user {
  display: flex; align-items: center; gap: 10px;
  margin-top: 12px; padding: 12px;
  background: linear-gradient(160deg, var(--view-surface-hi) 0%, var(--view-surface) 100%);
  border: 1px solid var(--view-border-strong);
  border-radius: var(--view-radius-sm);
  box-shadow: 0 0 0 1px rgba(34, 211, 238, 0.05), 0 10px 24px rgba(1, 5, 14, 0.4);
}
.sidebar-user-avatar {
  width: 34px; height: 34px; border-radius: 10px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, rgba(34, 211, 238, 0.22), rgba(59, 130, 246, 0.14));
  color: var(--view-cyan); font-weight: 800; font-size: 14px;
  border: 1px solid rgba(34, 211, 238, 0.3);
}
.sidebar-user-text { min-width: 0; display: flex; flex-direction: column; }
.sidebar-user-name { font-size: 13px; font-weight: 700; color: var(--view-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-user-role { font-size: 11px; color: var(--view-muted); }

/* ---------------- header: mais presença ---------------- */
.dash-greeting h2 { font-size: 28px; }

/* ---------------- Atenção agora: título+ícone à esquerda, alertas à direita, mesma linha ---------------- */
.dash-atencao-agora-card { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.dash-atencao-agora-head { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; }
.dash-atencao-agora-head h3 { margin: 0; font-size: 16px; color: var(--view-danger); }
.dash-atencao-agora-icon {
  width: 48px; height: 48px; border-radius: 13px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(242, 104, 95, 0.18); color: var(--view-danger);
  border: 1px solid rgba(242, 104, 95, 0.4);
  box-shadow: 0 0 20px rgba(242, 104, 95, 0.22);
}
.dash-atencao-agora-icon svg { width: 24px; height: 24px; }
#dashAtencaoAgoraList { flex: 1 1 320px; margin: 0; }
#dashAtencaoAgoraList .employee-row { position: relative; padding-right: 34px; }
#dashAtencaoAgoraList .employee-row::after {
  content: "›"; position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  font-size: 18px; font-weight: 800; color: var(--view-muted);
}

/* ---------------- Compromissos: faixa compacta, some quando os dois lados estão vazios ---------------- */
.dash-compact-agenda { display: flex; align-items: stretch; gap: 0; padding: 14px 20px; }
.dash-compact-agenda-group { flex: 1 1 0; min-width: 0; }
.dash-compact-agenda-divider { width: 1px; background: var(--view-border); margin: 0 20px; flex-shrink: 0; }
.dash-compact-agenda-label {
  display: flex; align-items: baseline; gap: 8px; margin-bottom: 8px;
  font-size: 13px; font-weight: 700; color: var(--view-text);
}
.dash-compact-agenda .employee-list { display: flex; flex-direction: column; gap: 6px; max-height: 168px; overflow-y: auto; }
.dash-compact-agenda .employee-list .employee-row { padding: 8px 10px; }
/* estado vazio: cada grupo vazio some; se os dois estiverem vazios, o
   cartão inteiro some -- nunca ocupa espaço "sem compromisso". */
.dash-compact-agenda-group:has(> .employee-list > p.muted:only-child) { display: none; }
.dash-compact-agenda:has(#dashCompromissosHojeGroup .employee-list > p.muted:only-child):has(#dashCompromissosAmanhaGroup .employee-list > p.muted:only-child) { display: none; }
/* se um dos dois grupos some (vazio), o divisor que ficaria "sozinho" some junto */
.dash-compact-agenda-group:has(> .employee-list > p.muted:only-child) + .dash-compact-agenda-divider { display: none; }
@media (max-width: 720px) {
  .dash-compact-agenda { flex-direction: column; }
  .dash-compact-agenda-divider { display: none; width: auto; height: 1px; margin: 14px 0; }
}

/* ---------------- Resumo financeiro: ordem visual Receita/Despesas/Caixa/Resultado ---------------- */
.dash-finance-main-grid-contents .stat-tile:nth-child(1) { order: 1; }
.dash-finance-main-grid-contents .stat-tile:nth-child(2) { order: 2; }
.dash-finance-tile-caixa { order: 3; }
.dash-finance-main-grid-contents .stat-tile:nth-child(3) { order: 4; }
.dash-finance-tile-icon-lg,
.dash-finance-main-grid .stat-tile-icon,
.dash-finance-tile .stat-tile-icon { width: 42px; height: 42px; }
.dash-finance-main-grid .stat-tile-body .value,
.dash-finance-tile .stat-tile-body .value { font-size: 23px; }

/* gráficos agora moram dentro do cartão do Resumo financeiro: sub-cards
   mais discretos (sem sombra/borda duplicada competindo com o container
   pai), pra parecer uma composição só, como na referência. */
.dash-finance-charts-row { margin-top: 14px; }
.dash-finance-charts-row .chart-card {
  background: rgba(4, 9, 20, 0.34);
  box-shadow: none;
  border-color: var(--view-border);
}
.dash-finance-charts-row .chart-card[open] { border-color: rgba(34, 211, 238, 0.3); }

/* ---------------- VIEW IA: tira discreta de uma linha ---------------- */
.dash-view-ia-strip {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 16px; margin-bottom: 18px;
  background: rgba(144, 133, 233, 0.07);
  border: 1px solid rgba(144, 133, 233, 0.22);
  border-radius: var(--view-radius-sm);
  font-size: 12px; color: var(--view-muted);
}
.dash-view-ia-strip-icon {
  width: 24px; height: 24px; border-radius: 7px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(144, 133, 233, 0.16); color: #a89bf2;
}
.dash-view-ia-strip-icon svg { width: 13px; height: 13px; }
.dash-view-ia-strip-text strong { color: #a89bf2; }

/* ---------------- fila (Agendamentos e aprovações): chevron nas linhas ---------------- */
.dash-queue-panel .employee-list .employee-row { position: relative; padding-right: 26px; }
.dash-queue-panel .employee-list .employee-row::after {
  content: "›"; position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  font-size: 16px; font-weight: 800; color: var(--view-muted);
}

/* ===== WIZARD "Nova produção" (retomada -- criação por etapas + em massa) ===== */
/* CORREÇÃO PRIORITÁRIA (flash do modal no boot): as regras abaixo faziam
   `#prodWizardDialog { display:flex; ... }` SEM condicionar a `[open]`.
   Um seletor de ID (#prodWizardDialog) tem mais especificidade que a regra
   nativa do navegador `dialog:not([open]) { display:none }`, então esse
   `display:flex` incondicional VENCIA a regra nativa e o dialog ficava
   visível (fora do "top layer", no fluxo normal do documento) mesmo sem o
   atributo `open` -- daí o flash de "Nova produção" durante o boot, antes
   do JS terminar de montar o Dashboard. Causa raiz confirmada: nenhum outro
   <dialog> do sistema tem essa regra (só este), e o único showModal() do
   Wizard fica dentro de abrirWizardProducao(), disparado só pelo clique em
   "+ Nova produção" -- nunca no boot. Correção: mover todo o layout flex
   pra `#prodWizardDialog[open]` (só existe display:flex quando o dialog
   está de fato aberto) + reforço explícito e escopado (não-global, pra não
   arriscar os outros ~40 dialogs do sistema que já funcionam corretamente
   com o comportamento nativo). */
#prodWizardDialog:not([open]) { display: none !important; }
#prodWizardDialog[open] {
  max-width: min(90vw, 860px); width: min(90vw, 860px);
  max-height: 88vh;
  display: flex; flex-direction: column;
  overflow: hidden;
}
#prodWizardDialog .dialog-card {
  flex: 1 1 auto; min-height: 0; overflow: hidden;
  display: flex; flex-direction: column; gap: 8px;
  padding: 16px 20px 14px;
}
#prodWizardDialog .card-title-row { flex: 0 0 auto; margin-bottom: 0; }
#prodWizardDialog .dialog-card h3 { padding-bottom: 8px; }
#prodWizardDialog .prod-wizard-stepper { flex: 0 0 auto; margin: 6px 0 8px; }
#prodWizardDialog .prod-wizard-lote-bar { flex: 0 0 auto; margin-bottom: 6px; }
/* única área que pode ganhar scroll interno -- e só em caso extremo
   (viewport muito baixa, zoom alto). No desktop comum o conteúdo cabe e
   este overflow nunca chega a ativar. */
#prodWizardDialog .prod-wizard-step-body {
  flex: 1 1 auto; min-height: 0; overflow-y: auto; gap: 8px;
}
#prodWizardDialog #wzResumoLote { flex: 0 0 auto; margin-top: 6px; }
#prodWizardDialog .dialog-actions {
  flex: 0 0 auto; margin-top: 0; padding-top: 10px;
}
.prod-wizard-locked {
  display: flex; align-items: center; min-height: 36px; padding: 6px 10px;
  background: rgba(34, 211, 238, 0.08); border: 1px solid var(--view-border);
  border-radius: var(--view-radius-sm); color: var(--view-text); font-weight: 700; font-size: 13.5px;
}
.prod-wizard-stepper { display: flex; gap: 8px; margin: 12px 0 14px; }
.prod-wizard-step {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 8px 6px; border-radius: var(--view-radius-sm); border: 1px solid var(--view-border);
  background: var(--view-surface); cursor: pointer; color: var(--view-muted);
}
.prod-wizard-step-n { font-weight: 800; font-size: 13px; }
.prod-wizard-step-label { font-size: 10.5px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; }
.prod-wizard-step.active {
  border-color: var(--view-cyan); color: var(--view-text);
  background: linear-gradient(180deg, rgba(34, 211, 238, 0.14), rgba(37, 99, 235, 0.08));
  box-shadow: 0 0 14px rgba(34, 211, 238, 0.18);
}
.prod-wizard-step.done { border-color: rgba(34, 197, 94, 0.4); color: var(--view-green); }
.prod-wizard-step-body { display: flex; flex-direction: column; gap: 10px; }
.prod-wizard-lote-bar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px;
  padding: 8px 10px; background: rgba(4, 9, 20, 0.34); border: 1px solid var(--view-border);
  border-radius: var(--view-radius-sm);
}
.prod-wizard-lote-blocos { display: flex; gap: 6px; flex-wrap: wrap; }
.prod-wizard-bloco-chip {
  display: flex; align-items: center; gap: 6px; padding: 4px 8px; border-radius: 999px;
  border: 1px solid var(--view-border); background: var(--view-surface); font-size: 12px; cursor: pointer;
}
.prod-wizard-bloco-chip.active { border-color: var(--view-cyan); color: var(--view-cyan); }
.prod-wizard-bloco-chip.invalido { border-color: rgba(239, 68, 68, 0.5); color: var(--view-danger); }
.prod-wizard-bloco-chip button { border: none; background: none; color: inherit; cursor: pointer; font-weight: 800; padding: 0 2px; }
.prod-wizard-resumo {
  margin-top: 12px; padding: 12px; border: 1px solid var(--view-border-strong); border-radius: var(--view-radius-sm);
  background: rgba(34, 211, 238, 0.06); font-size: 13px; line-height: 1.7;
}
.prod-wizard-capa-empty {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 14px 14px; border: 1px dashed var(--view-border-strong); border-radius: var(--view-radius-sm);
  background: rgba(4, 9, 20, 0.28); min-height: 56px;
}
/* Etapa 2 (Conteúdo): quando já existe capa, mostra uma MINIATURA compacta
   (clicável) + nome do arquivo + Trocar/Ampliar/Remover -- a imagem GRANDE
   só aparece sob demanda, dentro do lightbox reutilizável (ver bloco
   ".prod-wizard-capa-thumb-btn" mais abaixo). */
.prod-wizard-capa-filled-info {
  display: flex; align-items: center; gap: 12px; padding: 10px 12px;
  border: 1px solid var(--view-border); border-radius: var(--view-radius-sm); background: var(--view-surface);
  min-height: 56px;
}
.prod-wizard-capa-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.prod-wizard-capa-empty .btn,
.prod-wizard-capa-actions .btn { padding: 9px 16px; font-size: 13px; }
.prod-wizard-capa-lightbox { max-width: min(90vw, 720px); padding: 16px; }
.prod-wizard-capa-lightbox img { max-width: 100%; max-height: 70vh; display: block; margin: 0 auto; border-radius: var(--view-radius-sm); }

/* Refinamento "capa compacta + ampliar dentro do wizard" -- a Etapa 2
   volta a ser uma única coluna (nada de coluna direita grande permanente
   nem box 9:16 sempre reservado). A capa mostra uma MINIATURA compacta
   (clicável); o "grande" só aparece sob demanda, dentro do lightbox
   reutilizável (abrirMediaLightbox/#mediaLightboxDialog) -- infra mantida,
   só mudou a UX padrão (miniatura por padrão, grande só quando o usuário
   pede). Isso também já deixa preparado pro futuro vídeo (mesmo padrão:
   miniatura/player compacto -> clique -> grande dentro do VIEW). */
.prod-wizard-capa-thumb-btn {
  flex: 0 0 auto; width: 84px; height: 84px; padding: 0;
  border: 1px solid var(--view-border); border-radius: var(--view-radius-sm);
  background: rgba(4, 9, 20, 0.5); cursor: zoom-in; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.prod-wizard-capa-thumb-btn img {
  width: 100%; height: 100%; object-fit: contain; display: block; border-radius: inherit;
}
.prod-wizard-capa-filled-meta { display: flex; flex-direction: column; gap: 6px; flex: 1; min-width: 0; }
.prod-wizard-capa-filled-meta > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 640px) {
  #prodWizardDialog[open] { width: 96vw; }
  .prod-wizard-stepper { gap: 4px; }
  .prod-wizard-step-label { display: none; }
}

/* CONSTRUTOR DE LOTE 2.0 (Client Cockpit) -- calendário clicável, atalhos
   aditivos, cards de material. Reaproveita os tokens --view-* já
   existentes (mesma linguagem visual do resto do VIEW), nenhuma cor nova
   inventada. */
.cliente-lote-materiais { display: flex; flex-direction: column; gap: 8px; }
.cliente-lote-material-card {
  display: flex; align-items: center; gap: 12px; padding: 10px 12px;
  background: rgba(4, 9, 20, 0.34); border: 1px solid var(--view-border);
  border-radius: var(--view-radius-sm);
}
.cliente-lote-material-card.selecionado { border-color: var(--view-cyan); box-shadow: 0 0 0 1px var(--view-cyan) inset; }
.cliente-lote-material-thumb { width: 56px; height: 56px; border-radius: 10px; object-fit: cover; flex: 0 0 auto; }
.cliente-lote-material-thumb-empty {
  display: flex; align-items: center; justify-content: center; text-align: center;
  font-size: 10px; color: var(--view-muted); background: var(--view-surface-hi);
}
.cliente-lote-material-info { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.cliente-lote-material-info strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.cliente-lote-plataformas { display: flex; gap: 10px; flex-wrap: wrap; }
.cliente-lote-capa-preview { display: flex; align-items: center; }
.cliente-lote-capa-thumb { max-width: 120px; max-height: 120px; border-radius: var(--view-radius-sm); object-fit: cover; }

.cliente-lote-atalhos { display: flex; gap: 6px; flex-wrap: wrap; }
.cliente-lote-dias-personalizados { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; padding: 8px 0; }

.cliente-lote-mes-nav { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 6px 0; font-size: 14px; }

.cliente-lote-calendario {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px;
}
.cliente-lote-dia-header { text-align: center; font-size: 11px; font-weight: 700; color: var(--view-muted); padding: 4px 0; text-transform: uppercase; letter-spacing: 0.04em; }
.cliente-lote-dia {
  height: 38px; border-radius: 10px; border: 1px solid var(--view-border);
  background: rgba(4, 9, 20, 0.34); color: var(--view-text); font-weight: 600;
  font-variant-numeric: tabular-nums; cursor: pointer; position: relative;
}
.cliente-lote-dia:hover { border-color: var(--view-border-strong); }
.cliente-lote-dia.vazio { background: none; border: none; cursor: default; }
.cliente-lote-dia.hoje { border-color: var(--view-cyan); }
.cliente-lote-dia.selecionado { background: linear-gradient(180deg, var(--view-cyan), var(--view-blue)); color: #04131d; border-color: transparent; }
.cliente-lote-dia.tem-agendamento::after {
  content: ''; position: absolute; bottom: 4px; left: 50%; transform: translateX(-50%);
  width: 4px; height: 4px; border-radius: 50%; background: var(--view-warning);
}
.cliente-lote-dia.selecionado.tem-agendamento::after { background: #04131d; box-shadow: 0 0 0 1px var(--view-warning); }

/* AJUSTE DE QA (item 11): tom único em vez de gradiente forte -- com até
   30/31 dias marcados de uma vez (ex.: "Todos os dias"), o gradiente
   original ficava visualmente pesado. Mantém cyan/blue do design system,
   só reduz a intensidade. */
.cliente-lote-dia.selecionado { background: var(--view-cyan); color: #04131d; border-color: transparent; }

/* AJUSTE DE QA (item 8): linha dos atalhos + botão "Limpar seleção". */
.cliente-lote-atalhos-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }

/* AJUSTE DE QA (item 4): seção MÍDIA clara (preview + Drive), reaproveitando
   o mesmo cartão neutro já usado pelos cards de material. */
.cliente-lote-midia { }
.cliente-lote-midia-card {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 10px 12px;
  background: rgba(4, 9, 20, 0.34); border: 1px solid var(--view-border);
  border-radius: var(--view-radius-sm);
}
.cliente-lote-midia-card .cliente-lote-capa-thumb { max-width: 90px; max-height: 90px; }

@media (max-width: 640px) {
  .cliente-lote-material-thumb { width: 44px; height: 44px; }
}

/* ================================================================
   EQUIPE 2.0 (Bloco 4) -- classes aditivas .eq-*. Reusa os mesmos
   tokens e componentes do resto do app (.cc-chip, .badge, .btn,
   .card, --border/--surface/--text-*). Mobile primeiro na área do
   colaborador: o ponto vai ser batido no celular, então nada de
   tabela horizontal ali -- tudo em cartões que empilham.
   ================================================================ */
.eq-conteudo { display: flex; flex-direction: column; gap: 12px; margin-top: 10px; }
.eq-subtitulo { margin: 2px 0 0; font-size: 12.5px; }
.eq-abas, .eq-subabas, .eq-periodos { margin-top: 4px; }

/* FINANCEIRO CENTRAL (Bloco 1, 12/09/2026): casca de sub-abas da aba
   Financeiro -- reaproveita .cc-chip/.card/.metric-tile, nenhum token novo.
   .fin-panel só existe pra agrupar; a visibilidade continua sendo .hidden. */
.fin-shell .fin-nav { margin-top: 10px; }
.fin-panel { display: flex; flex-direction: column; gap: 14px; margin-top: 14px; }
.fin-panel > .section-actions:first-child { margin-top: 0; }
.fin-placeholder .muted { display: block; margin-top: 4px; line-height: 1.45; }
.fin-visao-grid { margin-top: 14px; }
.fin-visao-bloco { margin-top: 16px; }
.fin-visao-bloco .card-title-row { margin-bottom: 8px; }
.metric-tile.alert .value { color: var(--critical); }
.fin-periodo { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; }
/* Visão Geral (12/09/2026): tiles responsivos, valor nunca cortado. */
#finPanel-visao .metrics-grid { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
#finPanel-visao .metric-tile .value { overflow-wrap: anywhere; font-size: 18px; line-height: 1.25; }
#finPanel-visao .metric-tile .label { white-space: normal; }
#finPanel-visao .employee-row.clickable { cursor: pointer; }
#finPanel-visao .card-title-row .btn.ghost { flex-shrink: 0; }
/* Dívidas (Bloco 5): estratégia escolhida no comparativo do plano de saída. */
#finDividasPlano .metric-tile.active { border-color: var(--brand-a); }
#finDividasPlano .metric-tile .value { font-size: 17px; overflow-wrap: anywhere; }
.fin-periodo select { min-width: 110px; }
/* Bloco 4: resumo de cartões tem 6 tiles -- valor menor pra caber inteiro. */
#cardsSummary .metric-tile .value { overflow-wrap: break-word; font-size: 17px; line-height: 1.25; }
.eq-nota, .eq-vazio { font-size: 12.5px; margin: 0; }
.eq-semdados { font-style: italic; cursor: help; }
.eq-alerta { color: var(--critical); }
.eq-alerta-box { margin: 0; padding: 8px 10px; border: 1px solid var(--border); border-left: 3px solid var(--warning, var(--critical)); border-radius: 8px; font-size: 12.5px; }

.eq-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; }
.eq-card { display: flex; flex-direction: column; gap: 6px; text-align: left; padding: 12px 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); color: inherit; font: inherit; cursor: pointer; }
.eq-card:hover { border-color: var(--brand-a, var(--border)); }
.eq-card-topo { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.eq-card-nome { font-weight: 700; font-size: 14px; }
.eq-card-funcao { color: var(--text-secondary); font-size: 12.5px; }
.eq-card-metricas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 10px; margin-top: 4px; font-size: 12px; }
.eq-card-metricas span { display: flex; flex-direction: column; }
.eq-card-metricas em { font-style: normal; color: var(--text-muted); font-size: 11px; }

.eq-metricas { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.eq-metrica { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; }
.eq-metrica-rot { color: var(--text-muted); font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; }
.eq-metrica-val { font-size: 15px; font-weight: 600; }

.eq-bloco { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; }
.eq-bloco-titulo { margin: 6px 0 0; font-size: 13.5px; display: flex; align-items: center; gap: 8px; }
.eq-detalhe-topo { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; }
.eq-detalhe-nome { margin: 0; font-size: 16px; }
.eq-corpo { display: flex; flex-direction: column; gap: 12px; }
.eq-acoes { display: flex; flex-wrap: wrap; gap: 6px; }
.eq-form { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; border: 1px dashed var(--border); border-radius: 10px; }
.eq-campo { display: flex; flex-direction: column; gap: 4px; max-width: 420px; font-size: 12.5px; }

.eq-timeline { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.eq-timeline li { display: flex; gap: 10px; align-items: baseline; padding: 6px 8px; border-left: 2px solid var(--border); font-size: 13px; }
.eq-tl-hora { font-variant-numeric: tabular-nums; font-weight: 600; min-width: 52px; }
.eq-tl-txt { color: var(--text-secondary); }

.eq-cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.eq-cal-dia { display: flex; flex-direction: column; gap: 2px; padding: 6px 4px; border: 1px solid var(--border); border-radius: 8px; font-size: 11px; min-height: 46px; }
.eq-cal-num { font-weight: 700; font-variant-numeric: tabular-nums; }
.eq-cal-tipo { color: var(--text-muted); font-size: 10.5px; }
.eq-cal-feriado, .eq-cal-folga, .eq-cal-ferias, .eq-cal-atestado { background: var(--surface-2); }
.eq-cal-ausencia { border-color: var(--critical); }
.eq-cal-extraordinario { border-style: dashed; }
.eq-cal-naoUtil { opacity: 0.55; }
.eq-cal-legenda { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.eq-cal-leg { font-size: 11px; padding: 3px 8px; border: 1px solid var(--border); border-radius: 999px; }

.eq-ocorrencias { display: flex; flex-direction: column; gap: 8px; }
.eq-oc { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; }
.eq-oc-pendente { border-left: 3px solid var(--critical); }
.eq-oc-linha { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 12.5px; }
.eq-oc-quem { font-weight: 600; }
.eq-oc-data, .eq-oc-tipo { color: var(--text-secondary); }
.eq-oc-texto { margin: 0; font-size: 13px; }
.eq-acoes-decisao { gap: 4px; }

.eq-auditoria { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; }
.eq-auditoria li { padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; }
.eq-aud-data { color: var(--text-muted); font-variant-numeric: tabular-nums; }
.eq-aud-de { text-decoration: line-through; color: var(--text-secondary); }
.eq-aud-para { font-weight: 700; }
.eq-aud-motivo { color: var(--text-secondary); margin-top: 2px; }

/* Dashboard do mes (fase 4): blocos com significado + selo de origem do dado.
   O selo e informacao, nao enfeite -- diz se o numero foi medido, calculado,
   estimado pelo Gestor, ou se ainda nao tem base. */
.eq-bloco-dash { gap: 10px; }
.eq-resumo-titulo { margin: 10px 0 2px; font-size: 14px; }

/* Pagamentos da competencia: N parcelas por mes. Cada cartao e um pagamento,
   e o cancelado continua visivel (apagar deixaria a competencia sem
   explicacao para a diferenca) -- so que apagado. */
.eq-pag { display: flex; flex-direction: column; gap: 6px; padding: 10px; border: 1px solid var(--border); border-radius: 10px; }
.eq-pag + .eq-pag { margin-top: 8px; }
.eq-pag-cancelado { opacity: .55; }
.eq-pag-hist { margin-top: 4px; font-size: 11.5px; }
.eq-pag-resumo { margin-top: 10px; }

/* Provisoes configuraveis: uma linha por componente, com o nome a esquerda e
   os campos de calculo ao lado. Nenhum valor vem preenchido. */
.eq-prov-linha { display: grid; grid-template-columns: minmax(140px, 1fr) repeat(4, minmax(110px, 1fr)); gap: 8px; align-items: end; padding: 8px 0; border-bottom: 1px solid var(--border); }
.eq-prov-linha:last-child { border-bottom: 0; }
.eq-prov-nome { font-weight: 600; font-size: 12.5px; padding-bottom: 6px; }

/* Producao: filtros no topo, lista clicavel e detalhe com timeline. */
.eq-prod-filtros { display: flex; flex-wrap: wrap; gap: 10px; align-items: end; margin-bottom: 10px; }
.eq-prod-filtros .eq-campo { min-width: 180px; }
.eq-prod-lista { display: flex; flex-direction: column; gap: 8px; }
.eq-prod-item { display: flex; flex-direction: column; gap: 4px; text-align: left; width: 100%; padding: 10px; border: 1px solid var(--border); border-radius: 10px; background: transparent; cursor: pointer; font: inherit; color: inherit; }
.eq-prod-item:hover, .eq-prod-item:focus-visible { border-color: var(--accent, var(--border)); }
.eq-prod-titulo { font-weight: 600; font-size: 13px; }
.eq-prod-meta { font-size: 12px; color: var(--text-secondary); }
.eq-prod-nums { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 8px; margin-top: 4px; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.eq-prod-nums em { display: block; font-style: normal; font-size: 11px; color: var(--text-muted); }
@media (max-width: 900px) { .eq-prov-linha { grid-template-columns: 1fr 1fr; } .eq-prov-nome { grid-column: 1 / -1; } }
.eq-bloco-subtitulo { margin: 8px 0 0; font-size: 12.5px; color: var(--text-secondary); }
.eq-selo-real, .eq-selo-derivado { background: var(--surface-2, transparent); }
.eq-selo-estimativa { border-color: var(--warning, var(--border)); color: var(--warning, inherit); }
.eq-nav-competencia { align-items: center; gap: 8px; }
.eq-nav-competencia .co-chip { font-variant-numeric: tabular-nums; }

/* "Ainda sem base": o indicador que nao existe nao some (ninguem descobriria
   que falta) e nao vira zero (todo mundo decidiria errado). Fica aqui, com o
   motivo e o caminho. */
.eq-bloco-semdados { border-style: dashed; }
.eq-lacunas { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; font-size: 12.5px; }
.eq-lacunas li { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; }
.eq-lacunas li span { color: var(--text-secondary); }
.eq-lacunas li em { color: var(--text-muted); font-style: normal; }

/* Mobile: área do colaborador tem que caber num celular, sem rolagem
   lateral -- cartões empilham e o calendário vira 7 colunas estreitas. */
@media (max-width: 640px) {
  .eq-cards { grid-template-columns: 1fr; }
  .eq-card-metricas { grid-template-columns: 1fr 1fr; }
  .eq-metricas { grid-template-columns: 1fr 1fr; }
  .eq-cal-dia { min-height: 38px; font-size: 10px; }
  .eq-acoes .btn { flex: 1 1 auto; }
}
@media (max-width: 400px) {
  .eq-metricas { grid-template-columns: 1fr; }
}

/* Equipe 2.0 -- formulário de custo (Gestor-only) e memória de cálculo. */
.eq-form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; }
.eq-campo-largo { max-width: none; }
.eq-campo-largo textarea { resize: vertical; font: inherit; }
.eq-dica { font-size: 11px; }
.eq-outro { display: grid; grid-template-columns: 1fr 140px auto; gap: 8px; align-items: end; padding: 8px 0; border-bottom: 1px solid var(--border); }
.eq-memoria { list-style: none; margin: 0 0 10px; padding: 0; font-size: 13px; }
.eq-memoria li { display: flex; justify-content: space-between; gap: 12px; padding: 6px 8px; border-bottom: 1px solid var(--border); }
.eq-memoria li b { font-variant-numeric: tabular-nums; }
.eq-memoria-total { border-bottom: none; border-top: 2px solid var(--border); font-weight: 700; }
@media (max-width: 640px) {
  .eq-form-grid { grid-template-columns: 1fr; }
  .eq-outro { grid-template-columns: 1fr 1fr; }
}

/* AREA DE TRABALHO DO EDITOR. Nao e formulario: e uma tela de execucao. Poucos
   blocos, hierarquia forte, a proxima acao sempre visivel.
   LARGURA (10/09/2026, "ajuste destacado"): 680px ficava apertado pra caber
   a linha de duas colunas (ação + card do último ajuste) no desktop sem
   forçar quebras de texto ruins -- 860px dá espaço real sem virar um modal
   "cheio de sobra" (min() com 94vw continua garantindo que nunca estoura em
   telas menores que isso, e o breakpoint de 560px abaixo já reduz .ed-topo/
   .ed-ajuste-row pra uma coluna só antes de qualquer aperto). */
.ed-dialog { max-width: min(860px, 94vw); width: min(860px, 94vw); border: 1px solid var(--border); border-radius: 14px; padding: 0; overflow-x: hidden; }
.ed-wrap { display: flex; flex-direction: column; gap: 14px; padding: 18px; max-height: 88vh; overflow-y: auto; overflow-x: hidden; }
.ed-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.ed-head-identity { display: flex; align-items: flex-start; gap: 10px; min-width: 0; }
.ed-cliente-avatar.client-avatar { width: 32px; height: 32px; border-radius: 9px; font-size: 12px; flex: 0 0 auto; margin-top: 1px; }
.ed-cliente { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-secondary); }
.ed-titulo { margin: 2px 0 0; font-size: 20px; line-height: 1.2; overflow-wrap: anywhere; }
.ed-sub { font-size: 12.5px; color: var(--text-secondary); }
.ed-topo { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ed-bloco-prazo, .ed-bloco-status { display: flex; flex-direction: column; gap: 3px; padding: 10px; border: 1px solid var(--border); border-radius: 10px; }
.ed-rot { font-size: 11px; letter-spacing: .05em; text-transform: uppercase; color: var(--text-muted); }
.ed-prazo { font-size: 16px; font-weight: 700; overflow-wrap: anywhere; }
.ed-tom-critico { color: var(--critical); }
.ed-tom-alerta { color: var(--warning, var(--critical)); }
.ed-status { font-size: 15px; font-weight: 600; overflow-wrap: anywhere; }
.ed-status-ativo::before { content: "● "; color: var(--good, var(--brand-b)); }
.ed-esperando { margin: 0; padding: 10px; border: 1px dashed var(--border); border-radius: 10px; font-size: 13px; color: var(--text-secondary); }

/* ÚLTIMO AJUSTE SOLICITADO (10/09/2026): o ajuste é a informação mais
   importante da tela quando a produção está em "Ajustes solicitados" --
   antes só existia misturado dentro do histórico bruto. Duas colunas no
   desktop (LEFT ~45%: ação "Retomar produção" / RIGHT ~55%: card do
   ajuste); no mobile (ver media query abaixo) empilha coluna única com o
   card ANTES do botão, e a ordem de todo o wrap muda pra colocar esse bloco
   logo no topo (antes até de Prazo/Status). */
.ed-ajuste-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 14px; align-items: stretch; }
.ed-ajuste-col-acao { display: flex; align-items: flex-start; }
.ed-ajuste-col-acao .btn { width: 100%; }
.ed-ajuste-card {
  background: linear-gradient(180deg, rgba(250, 178, 25, 0.10) 0%, rgba(250, 178, 25, 0.03) 100%);
  border: 1px solid rgba(250, 178, 25, 0.35); border-radius: 12px; padding: 14px 16px;
  display: flex; flex-direction: column; gap: 6px;
}
.ed-ajuste-titulo { font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--warning); }
.ed-ajuste-autor { font-size: 14.5px; font-weight: 700; }
.ed-ajuste-data { font-size: 12px; color: var(--text-secondary); }
/* TEXTO LONGO (item 5): sem ellipsis, sem limite de altura -- o card cresce
   verticalmente o quanto precisar; overflow-wrap garante quebra mesmo sem
   espaços (link/palavra colada). */
.ed-ajuste-texto {
  margin: 4px 0 0; padding: 0 0 0 10px; border-left: 3px solid rgba(250, 178, 25, 0.45);
  font-size: 14px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; font-style: normal;
}
.ed-ajuste-versao { display: flex; flex-direction: column; gap: 2px; margin-top: 4px; font-size: 12px; }
.ed-ajuste-versao span:last-child { font-family: ui-monospace, monospace; color: var(--text-secondary); overflow-wrap: anywhere; }
/* METADADO SECUNDÁRIO (item 6): nunca dentro da mensagem principal -- linha
   pequena e discreta, separada do texto do ajuste. */
.ed-ajuste-meta { margin-top: 2px; font-size: 10.5px; color: var(--text-muted); }
.ed-ajuste-sem-observacao { margin: 4px 0 0; font-size: 13.5px; font-style: italic; color: var(--text-secondary); }

.ed-sec h4 { margin: 0 0 6px; font-size: 13px; }
.ed-mat { display: flex; flex-direction: column; gap: 2px; padding: 8px 0; border-bottom: 1px solid var(--border); }
.ed-mat:last-child { border-bottom: 0; }
.ed-mat p { margin: 0; font-size: 13.5px; overflow-wrap: anywhere; white-space: pre-wrap; }
.ed-ck { display: flex; gap: 8px; align-items: flex-start; padding: 5px 0; font-size: 13.5px; overflow-wrap: anywhere; }
.ed-acoes { display: flex; flex-wrap: wrap; gap: 8px; }
.ed-acoes .btn { flex: 1 1 auto; min-width: 150px; }
.ed-secundario { display: flex; gap: 14px; flex-wrap: wrap; }
.ed-historico, .ed-entrega { border-top: 1px solid var(--border); padding-top: 12px; }
/* HISTÓRICO EM CARDS DISCRETOS (item 7, 10/09/2026): virou contexto
   secundário -- o ajuste em si já tem destaque próprio acima (.ed-ajuste-card).
   Cada entrada em linha própria (data/hora formatada + texto), sem estilo de
   lista "crua". */
.ed-hist { display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; }
.ed-hist-item { display: flex; flex-direction: column; gap: 2px; padding: 7px 9px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-2); }
.ed-hist-data { font-size: 10.5px; color: var(--text-muted); }
.ed-hist-texto { overflow-wrap: anywhere; }
.ed-entrega h4 { margin: 0 0 8px; font-size: 14px; }
.ed-progresso { height: 6px; border-radius: 4px; background: var(--border); overflow: hidden; }
.ed-progresso-fill { height: 100%; width: 0; background: var(--good, var(--brand-b)); transition: width .2s; }
.ed-erro { margin: 6px 0 0; font-size: 12.5px; color: var(--critical); overflow-wrap: anywhere; }
@media (max-width: 560px) {
  .ed-topo { grid-template-columns: 1fr; }
  .ed-acoes .btn { min-width: 0; width: 100%; }
  /* MOBILE (item 8, 10/09/2026): não tenta manter duas colunas -- empilha,
     e a ORDEM muda pra "Último ajuste solicitado -> Retomar produção ->
     Prazo/status -> Histórico" (mais importante primeiro). Só afeta a
     ordem VISUAL (propriedade "order" do flex) -- a ordem real do DOM/
     leitores de tela continua a mesma, sem duplicar markup. Fora deste
     bloco de ajuste, os outros filhos de .ed-wrap mantêm a ordem natural
     (nenhum "order" explícito = 0, entre o ajuste que sobe e o resto que
     desce). */
  .ed-head { order: -3; }
  .ed-ajuste-row { grid-template-columns: 1fr; order: -2; }
  .ed-ajuste-col-card { order: 1; }
  .ed-ajuste-col-acao { order: 2; }
  .ed-topo { order: -1; }
}

/* Home do Editor: proxima entrega com o motivo da prioridade a vista. */
.emp-next-motivo { margin-top: 8px; font-size: 13.5px; font-weight: 600; overflow-wrap: anywhere; }
.emp-next-motivo.overdue { color: var(--critical); }
.emp-next-status { margin-top: 2px; font-size: 12.5px; color: var(--text-secondary); }

/* =============================================================================
   VIEW APPROVAL EXPERIENCE (10/09/2026) -- camada de motion/identidade visual.
   Duas partes, ambas escopadas por seletor pra nunca vazar pra outro lugar do
   shell administrativo (sidebar/topbar reusam .brand/.brand-logo em várias
   telas -- animar essas classes globalmente teria animado a logo da sidebar
   toda vez que ela renderiza):
   1) #loginView -- entrada do login, só dispara quando a seção sai de
      .hidden (showView("login"), que só acontece na resolução real do
      Firebase Auth -- nunca em navegação interna entre módulos, ver app.js).
   2) .vae-* -- componentes reutilizados pela aprovação pública do CLIENTE
      (renderClientApprovalContent, dentro de #clientApprovalView) -- mesma
      linguagem visual da página isolada aprovacao-view-publica.html, mas
      aqui como classes (aquela página é autocontida, com seu próprio
      <style>; não dá pra compartilhar arquivo sem quebrar seu isolamento
      deliberado do shell administrativo).
   ============================================================================= */
@keyframes vaeLogoIn { from { opacity: 0; transform: scale(0.85) translateY(-6px); } to { opacity: 1; transform: scale(1) translateY(0); } }
@keyframes vaeFadeUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes vaeStageIn { from { opacity: 0; transform: scale(0.97) translateY(6px); } to { opacity: 1; transform: scale(1) translateY(0); } }
@keyframes vaeSheetIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes vaeSpin { to { --vae-angle: 360deg; } }
@keyframes vaeShimmer { 0% { left: -60%; } 100% { left: 130%; } }
@keyframes vaeBreathe { 0%, 100% { opacity: 0.85; transform: scale(1); } 50% { opacity: 1; transform: scale(1.02); } }
@property --vae-angle { syntax: '<angle>'; initial-value: 0deg; inherits: false; }

#loginView .brand-logo { animation: vaeLogoIn 0.55s var(--ease) both; filter: drop-shadow(0 0 16px rgba(20,184,166,0.30)); }
#loginView .brand h1, #loginView .brand p { opacity: 0; animation: vaeFadeUp 0.5s var(--ease) both; animation-delay: 0.22s; }
#loginView .brand p { animation-delay: 0.32s; }
#loginView #loginForm { opacity: 0; animation: vaeFadeUp 0.5s var(--ease) both; animation-delay: 0.46s; }
#loginView #forgotPasswordBtn, #loginView .login-hint { opacity: 0; animation: vaeFadeUp 0.5s var(--ease) both; animation-delay: 0.58s; }

/* REFINO (10/09/2026): mesmo bug/ajuste feito em aprovacao-view-publica.html
   -- .vae-bg-fixed é position:fixed (fora do fluxo, não afeta o
   .clientApprovalView normal/bloco), então aqui nunca existiu o problema de
   "linha em vez de coluna" da página standalone. O que existia aqui era
   outra coisa: DUAS marcas VIEW competindo dentro do mesmo estado --
   .vae-mini-brand (logo 16px + texto) por dentro do stage E, logo abaixo, o
   bloco antigo <div class="brand"> (de antes da VIEW Approval Experience)
   dentro do próprio conteúdo de renderClientApprovalContent. Removidos os
   dois; agora existe uma ÚNICA logo por estado: grande na intro
   (.vae-logo-view-intro) e reduzida-mas-única acima do card
   (.vae-stage-brand/.vae-logo-view-stage), mesmo padrão da página
   standalone. */
.vae-bg-fixed { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; transition: opacity 0.5s ease; }
.vae-bg-fixed .vae-bg-grid {
  position: absolute; inset: -1px;
  background-image: linear-gradient(rgba(148,197,255,0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(148,197,255,0.06) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: radial-gradient(650px 500px at 50% 25%, #000 40%, transparent 78%);
  transition: opacity 0.5s ease;
}
.vae-bg-fixed .vae-bg-glow { position: absolute; width: 560px; height: 560px; border-radius: 50%; top: -200px; left: 50%; transform: translateX(-50%); background: radial-gradient(circle, rgba(45,212,191,0.16), rgba(37,99,235,0.06) 55%, transparent 75%); transition: opacity 0.5s ease; }
.vae-bg-fixed.vae-dimmed .vae-bg-grid, .vae-bg-fixed.vae-dimmed .vae-bg-glow { opacity: 0.45; }

.vae-intro { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; padding: 18px 12px 30px; max-width: 480px; margin: 0 auto; }
.vae-intro.vae-gone { display: none; }
/* Item 1/2 (mesma regra da página standalone): logo VIEW é o elemento
   principal da abertura -- escala por largura, nunca um height fixo
   minúsculo; fonte única /assets/logo-view.png, proporção intacta. */
.vae-logo-view-intro { width: clamp(190px, 50vw, 320px); height: auto; object-fit: contain; animation: vaeLogoIn 0.6s var(--ease) both; filter: drop-shadow(0 0 24px rgba(20,184,166,0.4)); }
.vae-stagger { opacity: 0; animation: vaeFadeUp 0.5s var(--ease) both; }
.vae-stagger[data-vae="1"] { animation-delay: .16s; }
.vae-stagger[data-vae="2"] { animation-delay: .32s; }
.vae-stagger[data-vae="3"] { animation-delay: .48s; }
.vae-stagger[data-vae="4"] { animation-delay: .62s; }
.vae-eyebrow-intro { color: var(--text-secondary); font-size: 13px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; margin: 0; }
.vae-cliente-logo-wrap { width: clamp(68px, 18vw, 92px); height: clamp(68px, 18vw, 92px); border-radius: 18px; background: var(--surface-2); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; overflow: hidden; margin-top: 6px; }
.vae-cliente-logo-wrap img { width: 100%; height: 100%; object-fit: contain; }
.vae-cliente-logo-fallback { font-size: 19px; font-weight: 800; color: var(--text-primary); }
.vae-cliente-nome-intro { color: var(--text-primary); font-size: 16px; font-weight: 800; margin: 0; }
.vae-sub-intro { color: var(--text-muted); font-size: 13.5px; margin: 0 0 4px; }

.vae-shiny-btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  width: auto; max-width: min(100%, 320px); margin: 4px auto 0;
  padding: 15px 24px; border-radius: 999px; border: none; cursor: pointer;
  font-size: 15px; font-weight: 800; color: #04131d; white-space: nowrap;
  background: linear-gradient(135deg, var(--view-cyan, #2dd4bf), var(--view-blue, #2563eb));
  box-shadow: 0 10px 30px rgba(45,212,191,0.28), 0 0 0 1px rgba(255,255,255,0.18) inset;
  isolation: isolate; overflow: hidden;
  transition: transform 0.15s ease, box-shadow 0.2s ease;
}
.vae-shiny-btn::before {
  content: ""; position: absolute; inset: -2px; border-radius: 999px; z-index: -1;
  background: conic-gradient(from var(--vae-angle, 0deg), rgba(255,255,255,0) 0%, rgba(255,255,255,0.9) 8%, rgba(45,212,191,0) 24%);
  animation: vaeSpin 2.6s linear infinite;
}
.vae-shiny-btn::after {
  content: ""; position: absolute; top: 0; left: -60%; width: 40%; height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,0.55), transparent);
  animation: vaeShimmer 2.8s ease-in-out infinite;
}
.vae-shiny-btn:hover { transform: translateY(-1px); box-shadow: 0 14px 36px rgba(45,212,191,0.38), 0 0 0 1px rgba(255,255,255,0.28) inset; }
.vae-shiny-btn:active { transform: translateY(0) scale(0.98); }
.vae-shiny-btn:focus-visible { outline: 2px solid rgba(255,255,255,0.75); outline-offset: 3px; }
.vae-shiny-btn .vae-arrow { transition: transform 0.2s ease; }
.vae-shiny-btn:hover .vae-arrow { transform: translateX(3px); }

.vae-stage { display: flex; flex-direction: column; align-items: center; animation: vaeStageIn 0.5s var(--ease) both; }
.vae-stage.vae-hidden { display: none; }

/* Marca reduzida, ÚNICA, acima do card -- substitui .vae-mini-brand (que
   ficava duplicada por dentro do stage, junto com o <div class="brand">
   antigo de dentro do conteúdo). Mesma composição da página standalone. */
.vae-stage-brand { display: flex; flex-direction: column; align-items: center; gap: 6px; margin-bottom: 16px; animation: vaeFadeUp 0.45s var(--ease) both; animation-delay: .1s; }
/* BUG REAL ENCONTRADO (11/09/2026, homologação visual desta task): esta
   regra nunca existia aqui -- só na página standalone (aprovacao-view-
   publica.html). Sem ela, .vae-hidden em #vaeStageBrand não tinha efeito
   nenhum (a classe existe no HTML gerado, mas nenhum CSS a aplicava),
   então o selo reduzido + badge "Área de aprovação do cliente" apareciam
   ANTES da intro ser dispensada, duplicando a marca na tela inicial. */
.vae-stage-brand.vae-hidden { display: none; }
.vae-logo-view-stage { width: clamp(92px, 20vw, 130px); height: auto; object-fit: contain; animation: vaeBreathe 6s ease-in-out infinite; filter: drop-shadow(0 0 12px rgba(20,184,166,0.32)); }
/* DISTINÇÃO VISUAL (11/09/2026, item 2): selo discreto que identifica esta
   como a área do CLIENTE -- fica visível em TODO estado pós-intro (nunca
   só na entrada), pra nunca deixar a tela parecer a aprovação interna da
   VIEW (aprovacao-view-publica.html, que não tem -- nem deve ganhar --
   este selo). Cor neutra/discreta -- a identidade VIEW (logo acima)
   continua sendo a marca principal, isto é só um rótulo de contexto. */
.vae-client-badge { font-size: 10.5px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px; padding: 4px 12px; }
.vae-eyebrow-client { color: var(--text-primary) !important; }

.vae-success-anim { animation: vaeFadeUp 0.4s var(--ease) both; }
.vae-adjust-open:not(.hidden) { animation: vaeSheetIn 0.3s var(--ease) both; }

.vae-footer { position: relative; text-align: center; padding: 26px 12px 6px; max-width: 480px; margin: 0 auto; }
.vae-footer-line { height: 1px; background: linear-gradient(90deg, transparent, var(--border), transparent); margin-bottom: 14px; }
.vae-footer-word { font-size: 11px; font-weight: 800; letter-spacing: 0.12em; color: var(--text-muted); text-transform: uppercase; margin: 0; }
.vae-footer-sub { font-size: 11px; color: var(--text-muted); margin: 3px 0 0; opacity: 0.75; }

@media (max-width: 480px) {
  .vae-adjust-sheet-mobile { position: fixed; left: 0; right: 0; bottom: 0; border-radius: 18px 18px 0 0; box-shadow: 0 -12px 30px rgba(0,0,0,0.35); z-index: 20; }
}

@media (prefers-reduced-motion: reduce) {
  #loginView .brand-logo, #loginView .brand h1, #loginView .brand p, #loginView #loginForm, #loginView #forgotPasswordBtn, #loginView .login-hint,
  .vae-logo-view-intro, .vae-stagger, .vae-stage, .vae-stage-brand, .vae-success-anim, .vae-adjust-open:not(.hidden), .vae-logo-view-stage {
    animation: none !important; opacity: 1 !important; transform: none !important;
  }
  .vae-shiny-btn::before, .vae-shiny-btn::after { animation: none !important; }
  .vae-bg-fixed, .vae-bg-fixed .vae-bg-grid, .vae-bg-fixed .vae-bg-glow { transition: none !important; }
}

/* ============ FINANCEIRO > VISÃO GERAL -- refinamento visual (14/09/2026) ============
   Só hierarquia/leitura: 4 KPIs principais, indicadores secundários compactos,
   painel de caixa livre, régua de projeção sem biblioteca, ação prioritária em
   destaque, conciliação como alerta compacto, listas curtas. Nenhum token novo:
   reaproveita os tokens de surface, border, texto, good, critical, warning,
   brand e radius já existentes. Vermelho só em risco real (.alert). */
.fin-head { align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.fin-shell .fin-periodo { margin-top: 10px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding-top: 10px; border-top: 1px solid var(--border); font-size: 12.5px; }
.fin-shell .fin-periodo select { padding: 6px 10px; font-size: 12.5px; }
.fin-shell .fin-periodo .btn { padding: 6px 12px; font-size: 12.5px; }
.fin-shell .fin-nav { margin-top: 12px; flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; -webkit-overflow-scrolling: touch; }
.fin-shell .fin-nav .cc-chip { white-space: nowrap; padding: 5px 11px; font-size: 12px; background: transparent; border-color: transparent; color: var(--text-muted); }
.fin-shell .fin-nav .cc-chip:hover { color: var(--text-secondary); background: var(--surface-2); }
.fin-shell .fin-nav .cc-chip.active { color: var(--text-primary); background: var(--surface-2); border-color: var(--border); }

/* KPIs principais */
.fin-kpi-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.fin-kpi { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 16px 18px; min-height: 110px; display: flex; flex-direction: column; justify-content: center; transition: border-color 0.18s var(--ease), background 0.18s var(--ease); }
.fin-kpi.clickable { cursor: pointer; }
.fin-kpi.clickable:hover { border-color: rgba(255,255,255,0.16); background: var(--surface-3); }
.fin-kpi-label { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); font-weight: 600; }
.fin-kpi-value { font-family: "Sora", "Plus Jakarta Sans", sans-serif; font-size: 26px; font-weight: 800; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; margin-top: 6px; line-height: 1.1; }
.fin-kpi-ctx { font-size: 11.5px; color: var(--text-muted); margin-top: 6px; line-height: 1.4; }
.fin-kpi.alert .fin-kpi-value { color: var(--critical); }

/* Indicadores secundários */
.fin-kpi-sec { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.fin-mini { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 9px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: transparent; font-size: 12.5px; }
.fin-mini.clickable { cursor: pointer; }
.fin-mini.clickable:hover { background: var(--surface-2); }
.fin-mini-label { color: var(--text-muted); }
.fin-mini-value { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.fin-mini-value .muted, .fin-kpi-value .muted { margin-left: 4px; font-weight: 500; font-size: 0.85em; }
.fin-mini.alert .fin-mini-value { color: var(--critical); }

/* Caixa livre + projeção lado a lado */
.fin-visao-duo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 14px; }
.fin-visao-duo .card { margin: 0; }
.fin-visao-duo .fin-visao-bloco { margin-top: 0; }
.fin-caixa-hero { padding: 10px 0 14px; border-bottom: 1px solid var(--border); }
.fin-caixa-valor { font-family: "Sora", "Plus Jakarta Sans", sans-serif; font-size: 34px; font-weight: 800; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; line-height: 1.05; margin-top: 4px; }
.fin-caixa-hero.alert .fin-caixa-valor { color: var(--critical); }
.fin-caixa-detalhe { display: flex; flex-direction: column; }
.fin-caixa-linha { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 9px 0; border-bottom: 1px dashed var(--border); font-size: 13px; color: var(--text-secondary); }
.fin-caixa-linha:last-child { border-bottom: 0; }
.fin-caixa-linha strong { font-variant-numeric: tabular-nums; color: var(--text-primary); white-space: nowrap; }
.fin-caixa-linha.alert strong { color: var(--critical); }
.fin-caixa-linha.clickable { cursor: pointer; }
.fin-caixa-linha.clickable:hover span { color: var(--text-primary); }

/* Régua de projeção */
.fin-timeline { position: relative; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; padding: 18px 0 4px; }
.fin-timeline-track { position: absolute; left: 8%; right: 8%; top: 24px; height: 2px; background: linear-gradient(90deg, var(--brand-b), var(--brand-a)); opacity: 0.55; border-radius: 2px; }
.fin-tl-ponto { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 2px; min-width: 0; }
.fin-tl-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--brand-b); border: 2px solid var(--surface); box-shadow: 0 0 0 2px var(--brand-b); margin-bottom: 6px; }
.fin-tl-ponto.alert .fin-tl-dot { background: var(--critical); box-shadow: 0 0 0 2px var(--critical); }
.fin-tl-rotulo { font-size: 11px; font-weight: 700; color: var(--text-secondary); }
.fin-tl-data { font-size: 10.5px; color: var(--text-muted); }
.fin-tl-valor { font-size: 12.5px; font-variant-numeric: tabular-nums; margin-top: 2px; white-space: nowrap; }
.fin-tl-ponto.alert .fin-tl-valor { color: var(--critical); }
.fin-proj-aviso { margin: 10px 0 0; font-size: 12px; }
.fin-proj-aviso.alert { color: var(--warning); }

/* Ação prioritária */
.fin-acao-card { margin: 0; border-color: rgba(37, 99, 235, 0.28); background: linear-gradient(135deg, rgba(37, 99, 235, 0.10), rgba(20, 184, 166, 0.06)), var(--surface); }
.fin-acao-principal { display: flex; align-items: center; gap: 14px; padding: 6px 0 4px; }
.fin-acao-ordem { font-family: "Sora", "Plus Jakarta Sans", sans-serif; font-size: 22px; font-weight: 800; color: var(--brand-b); flex-shrink: 0; }
.fin-acao-principal.atencao .fin-acao-ordem { color: var(--warning); }
.fin-acao-corpo { flex: 1 1 auto; min-width: 0; }
.fin-acao-titulo { font-weight: 700; font-size: 15px; }
.fin-acao-detalhe { font-size: 12.5px; color: var(--text-muted); margin-top: 3px; line-height: 1.4; }
.fin-acao-lado { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.fin-acoes .fin-acao-sec { margin-top: 8px; }

/* Conciliação compacta + listas curtas */
.fin-visao-trio { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 0; }
.fin-visao-trio .card { margin: 0; }
.fin-concil-alerta { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border-radius: var(--radius-sm); border: 1px solid rgba(230, 88, 79, 0.28); background: rgba(230, 88, 79, 0.06); }
.fin-lista-curta .employee-row { padding: 8px 10px; }
.fin-mais { margin: 6px 0 0; font-size: 11.5px; }

@media (max-width: 1100px) {
  .fin-kpi-grid, .fin-kpi-sec { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fin-visao-duo { grid-template-columns: 1fr; }
  .fin-visao-trio { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .fin-kpi { min-height: 0; padding: 14px; }
  .fin-kpi-value { font-size: 20px; white-space: nowrap; }
  .fin-kpi-sec { grid-template-columns: 1fr; }
  .fin-caixa-valor { font-size: 28px; }
  .fin-timeline { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 16px; }
  .fin-timeline-track { display: none; }
  .fin-acao-principal { flex-wrap: wrap; }
  .fin-acao-lado { width: 100%; justify-content: flex-end; }
}

/* ============ FINANCEIRO > IMPORTAR EXTRATO -- conferência inteligente (14/09/2026) ============
   Só tokens existentes. Central de trabalho: resumo, busca, chips, filtros,
   grupos recolhíveis, cards de movimentação com sugestão/confiança, ações em
   massa com preview, painel de IA. Sem tabela larga: mobile em cards. */
.fin-imp-topo-acoes { display: flex; gap: 8px; flex-wrap: wrap; }
.fin-imp-resumo { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin-top: 8px; }
.fin-imp-resumo .fin-kpi { min-height: 0; padding: 12px 14px; }
.fin-imp-resumo .fin-kpi-value { font-size: 20px; }
.fin-imp-analise { margin-top: 12px; padding: 14px 16px; border-radius: var(--radius-sm); border: 1px solid rgba(37, 99, 235, 0.28); background: linear-gradient(135deg, rgba(37, 99, 235, 0.10), rgba(20, 184, 166, 0.06)); font-size: 13px; line-height: 1.5; white-space: pre-line; }
.fin-imp-analise .fin-imp-analise-meta { display: block; margin-top: 8px; font-size: 11.5px; color: var(--text-muted); white-space: normal; }
.fin-imp-busca { margin-top: 12px; }
.fin-imp-busca input { width: 100%; box-sizing: border-box; }
.fin-imp-chips { margin-top: 10px; }
.fin-imp-filtros { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: end; margin-top: 10px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); }
.fin-imp-filtros label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; }
.fin-imp-filtros input, .fin-imp-filtros select { padding: 6px 8px; font-size: 12.5px; }
.fin-imp-filtros .fin-imp-faixa { display: flex; gap: 6px; }
.fin-imp-filtros .fin-imp-faixa input { width: 90px; }
.fin-imp-conta { font-size: 12.5px; font-weight: 600; padding: 6px 0; }
.fin-imp-massa { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; margin-top: 12px; padding: 10px 12px; border-radius: var(--radius-sm); background: var(--surface-2); border: 1px solid var(--border); }
.fin-imp-massa-check { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; }
.fin-imp-massa-acoes { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.fin-imp-massa-acoes input[type="text"] { max-width: 150px; padding: 6px 8px; font-size: 12.5px; }
.fin-imp-massa-acoes select { padding: 6px 8px; font-size: 12.5px; }
.fin-imp-grupos { margin-top: 12px; display: flex; flex-direction: column; gap: 10px; }
.fin-imp-grupo { border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; }
.fin-imp-grupo-cab { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px; background: var(--surface-2); border: 0; color: var(--text-primary); font: inherit; font-weight: 700; font-size: 13px; cursor: pointer; text-align: left; }
.fin-imp-grupo-cab .fin-imp-grupo-qtd { font-size: 12px; font-weight: 600; color: var(--text-muted); background: var(--surface-3); border-radius: 999px; padding: 2px 9px; }
.fin-imp-grupo-cab .fin-imp-grupo-seta { transition: transform 0.18s var(--ease); color: var(--text-muted); }
.fin-imp-grupo.aberto .fin-imp-grupo-seta { transform: rotate(90deg); }
.fin-imp-grupo.atencao .fin-imp-grupo-cab { border-left: 3px solid var(--warning); }
.fin-imp-grupo.duplicidade .fin-imp-grupo-cab { border-left: 3px solid var(--critical); }
.fin-imp-grupo.correspondencia .fin-imp-grupo-cab { border-left: 3px solid var(--brand-b); }
.fin-imp-grupo.transferencia .fin-imp-grupo-cab { border-left: 3px solid var(--brand-c); }
.fin-imp-grupo-corpo { display: flex; flex-direction: column; gap: 8px; padding: 10px; }
.fin-imp-grupo:not(.aberto) .fin-imp-grupo-corpo { display: none; }
.fin-imp-mov { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 12px; align-items: start; padding: 10px 12px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--surface); }
.fin-imp-mov.selecionada { border-color: rgba(20, 184, 166, 0.45); background: rgba(20, 184, 166, 0.05); }
.fin-imp-mov.ignorada { opacity: 0.55; }
.fin-imp-data { text-align: center; font-size: 11px; font-weight: 700; color: var(--text-muted); line-height: 1.2; padding-top: 2px; }
.fin-imp-data strong { display: block; font-size: 16px; color: var(--text-primary); }
.fin-imp-corpo { min-width: 0; }
.fin-imp-titulo { font-weight: 700; font-size: 13.5px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.fin-imp-titulo .status-badge { font-size: 10px; }
.fin-imp-sub { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.fin-imp-sug { margin-top: 6px; font-size: 12.5px; display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; }
.fin-imp-sug .fin-imp-sug-rotulo { color: var(--text-muted); }
.fin-imp-sug .fin-imp-sug-valor { font-weight: 600; }
.fin-imp-conf { font-size: 11px; font-weight: 700; padding: 1px 7px; border-radius: 999px; background: rgba(255,255,255,0.08); color: var(--text-secondary); }
.fin-imp-conf.alta { background: rgba(34, 197, 94, 0.15); color: var(--good); }
.fin-imp-conf.media { background: rgba(250, 178, 25, 0.15); color: var(--warning); }
.fin-imp-conf.baixa { background: rgba(230, 88, 79, 0.15); color: var(--critical); }
.fin-imp-motivo { font-size: 11.5px; color: var(--text-muted); margin-top: 2px; }
.fin-imp-flags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.fin-imp-flag { font-size: 10.5px; padding: 2px 7px; border-radius: 999px; border: 1px solid var(--border); color: var(--text-secondary); }
.fin-imp-flag.dup { border-color: rgba(230, 88, 79, 0.4); color: var(--critical); }
.fin-imp-flag.transf { border-color: rgba(144, 133, 233, 0.5); color: var(--brand-c); }
.fin-imp-lado { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; max-width: min(44%, 300px); }
.fin-imp-valor { font-family: "Sora", "Plus Jakarta Sans", sans-serif; font-weight: 800; font-size: 15px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.fin-imp-valor.entrada { color: var(--good); }
.fin-imp-acoes { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.fin-imp-acoes .btn.small { padding: 4px 10px; font-size: 12px; }
.fin-imp-rodape { justify-content: space-between; align-items: center; margin-top: 12px; }
.fin-imp-vazio { padding: 14px; text-align: center; }
.fin-imp-ia-dialog { max-width: 520px; width: min(520px, 96vw); }
.fin-imp-ia-card { max-height: 86vh; }
.fin-imp-ia-historico { display: flex; flex-direction: column; gap: 10px; overflow-y: auto; max-height: 48vh; padding-right: 2px; }
.fin-imp-ia-msg { padding: 10px 12px; border-radius: var(--radius-sm); font-size: 13px; line-height: 1.5; white-space: pre-line; }
.fin-imp-ia-msg.pergunta { background: var(--surface-2); align-self: flex-end; max-width: 92%; }
.fin-imp-ia-msg.resposta { background: rgba(37, 99, 235, 0.10); border: 1px solid rgba(37, 99, 235, 0.25); }
.fin-imp-ia-msg .fin-imp-ia-refs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; white-space: normal; }
.fin-imp-ia-form { display: flex; gap: 8px; }
.fin-imp-ia-form input { flex: 1 1 auto; min-width: 0; }
.fin-imp-destaque { outline: 2px solid var(--brand-b); outline-offset: 2px; }
#finImportarDetalheCorpo .fin-imp-original { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; padding: 10px; border-radius: var(--radius-sm); background: var(--surface-2); border: 1px solid var(--border); word-break: break-word; white-space: pre-wrap; }
#finImportarDetalheCorpo dl { display: grid; grid-template-columns: max-content 1fr; gap: 6px 12px; font-size: 13px; margin: 10px 0 0; }
#finImportarDetalheCorpo dt { color: var(--text-muted); }
#finImportarPreviewCorpo .fin-imp-prev-total { font-family: "Sora", "Plus Jakarta Sans", sans-serif; font-size: 22px; font-weight: 800; margin: 4px 0 10px; }
#finImportarPreviewCorpo .fin-imp-prev-cat { display: flex; justify-content: space-between; padding: 6px 0; border-bottom: 1px dashed var(--border); font-size: 13px; }

@media (max-width: 1100px) { .fin-imp-resumo { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 900px) {
  .fin-imp-mov { grid-template-columns: 48px minmax(0, 1fr); }
  .fin-imp-lado { grid-column: 1 / -1; max-width: none; flex-direction: row; justify-content: space-between; align-items: center; flex-wrap: wrap; }
  .fin-imp-acoes { justify-content: flex-start; }
}
@media (max-width: 640px) {
  .fin-imp-resumo { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fin-imp-resumo .fin-kpi-value { font-size: 17px; white-space: normal; word-break: break-word; }
  .fin-imp-topo-acoes { width: 100%; }
  .fin-imp-topo-acoes .btn { flex: 1 1 auto; }
  .fin-imp-filtros label { flex: 1 1 45%; }
  .fin-imp-filtros .fin-imp-faixa input { width: 100%; }
  .fin-imp-massa-acoes { width: 100%; }
  .fin-imp-massa-acoes input[type="text"], .fin-imp-massa-acoes select { max-width: none; flex: 1 1 100%; }
  .fin-imp-mov { grid-template-columns: 48px minmax(0, 1fr); }
  .fin-imp-lado { grid-column: 1 / -1; flex-direction: row; justify-content: space-between; align-items: center; }
  .fin-imp-ia-dialog { width: 100vw; max-width: 100vw; margin: 0; }
}

/* ============ ÁREA DO EDITOR > MINHAS PRODUÇÕES -- Lista + Kanban (14/09/2026) ============
   Reaproveita .board/.column/.task-card/.prod-card do Kanban do Gestor. O board do
   Editor não arrasta (RBAC), rola horizontalmente dentro da própria área no mobile. */
.emp-prod-filtro-sec { display: flex; justify-content: flex-end; margin-bottom: 12px; }
.emp-prod-filtro-sec label { display: flex; align-items: center; gap: 8px; font-size: 12px; }
.emp-prod-filtro-sec select { padding: 6px 8px; font-size: 12.5px; }
.emp-prod-board .column { max-height: 70vh; }
.prod-card.sem-arrasto { cursor: pointer; }
.prod-card.sem-arrasto:active { cursor: pointer; }
.prod-card .tc-status { margin: 2px 0 4px; }
.prod-pausa-info { margin-top: 4px; font-size: 11px; color: var(--warning); line-height: 1.35; }
@media (max-width: 640px) {
  #empProdViewToggles { width: 100%; }
  #empProdViewToggles .dash-toggle-chip { flex: 1 1 auto; text-align: center; }
  .emp-prod-filtro-sec { justify-content: stretch; }
  .emp-prod-filtro-sec label { width: 100%; }
  .emp-prod-filtro-sec select { flex: 1 1 auto; min-width: 0; }
  .emp-prod-board .column { width: 82vw; min-width: 82vw; max-height: 60vh; }
}

/* ============ PONTO -- jornada oficial por dia, status por fatos (14/09/2026) ============ */
.ponto-jornada-hoje { display: flex; flex-direction: column; gap: 2px; margin: 6px 0 10px; font-size: 13px; }
.ponto-jornada-hoje .ponto-jornada-rotulo { font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); }
.ponto-jornada-hoje strong { font-size: 15px; }
.ponto-hist-lista { display: flex; flex-direction: column; gap: 8px; }
.ponto-hist-dia { display: grid; grid-template-columns: 110px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); }
.ponto-hist-data { display: flex; flex-direction: column; font-size: 12px; color: var(--text-muted); }
.ponto-hist-data strong { font-size: 14px; color: var(--text-primary); }
.ponto-hist-corpo { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px 12px; font-size: 12.5px; }
.ponto-hist-corpo > div { min-width: 0; overflow-wrap: anywhere; }
.ponto-hist-rotulo { display: block; font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); }
.ponto-hist-status { display: flex; flex-direction: column; gap: 4px; align-items: flex-end; }
.ponto-auditoria { display: flex; flex-direction: column; gap: 4px; margin-top: 10px; font-size: 12px; }
.ponto-auditoria-item { padding: 6px 8px; border-radius: var(--radius-sm); background: var(--surface-2); border: 1px solid var(--border); }
.ponto-jornada-card { max-width: 720px; }
.ponto-jornada-acoes-rapidas { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; margin: 8px 0; font-size: 12px; }
.ponto-jornada-dias { display: flex; flex-direction: column; gap: 6px; }
.ponto-jornada-dia { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 8px 12px; align-items: center; padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); }
.ponto-jornada-dia.off { opacity: 0.55; }
.ponto-jornada-dia.off .ponto-jornada-periodos { display: none; }
.ponto-jornada-dia-nome { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 13px; }
.ponto-jornada-periodos { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.ponto-jornada-periodo { display: flex; align-items: center; gap: 6px; font-size: 12.5px; }
.ponto-jornada-periodo input[type="time"] { padding: 4px 6px; font-size: 12.5px; width: auto; }
.ponto-jornada-periodo .muted { font-size: 11px; white-space: nowrap; }
.ponto-jornada-vigencias { display: flex; flex-direction: column; gap: 4px; margin-top: 10px; font-size: 12px; }
.ponto-jornada-vig { padding: 6px 8px; border-radius: var(--radius-sm); background: var(--surface-2); border: 1px solid var(--border); }
.ponto-jornada-linha { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.ponto-jornada-resumo { display: flex; flex-wrap: wrap; gap: 4px 6px; font-size: 11.5px; align-items: center; }
.ponto-jornada-chip { padding: 2px 7px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface-2); white-space: nowrap; }
.ponto-jornada-chip.off { opacity: 0.5; }
.schedule-row .btn.small { padding: 5px 10px; font-size: 12px; white-space: nowrap; }
@media (max-width: 640px) {
  .ponto-hist-dia { grid-template-columns: 1fr; }
  .ponto-hist-corpo { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ponto-hist-status { flex-direction: row; flex-wrap: wrap; align-items: center; }
  .ponto-jornada-dia { grid-template-columns: 1fr; }
  .ponto-jornada-periodo { flex-wrap: wrap; }
  .ponto-jornada-card { width: 100vw; max-width: 100vw; }
}

/* ============ IMPORTAR EXTRATO -- conferência redesenhada (14/09/2026, "bater o olho e entender") ============
   Valor e nome fortes, descrição bancária bruta secundária e recolhida. Cores: verde moderado
   pra entradas/confirmado, amarelo pra atenção, vermelho só saída/erro, neutro pra estrutura. */
.fin-imp-sintese { margin-top: 10px; padding: 10px 14px; border-radius: var(--radius-sm); background: var(--surface-2); border: 1px solid var(--border); font-size: 13px; line-height: 1.5; }
.fin-imp-sintese .fin-imp-sintese-num { display: inline-flex; gap: 6px; align-items: baseline; margin-right: 14px; }
.fin-imp-sintese .fin-imp-sintese-num b { font-family: "Sora", "Plus Jakarta Sans", sans-serif; font-size: 15px; }
.fin-imp-sintese .fin-imp-sintese-frase { display: block; margin-top: 4px; color: var(--text-secondary); }
.fin-imp-sintese .link-btn { font-size: 12px; }
.fin-imp-agrupar { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 10px; font-size: 12px; }
.fin-imp-grupo-cab .fin-imp-grupo-total { margin-left: auto; font-family: "Sora", "Plus Jakarta Sans", sans-serif; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.fin-imp-grupo-cab .fin-imp-grupo-sub { font-weight: 500; font-size: 11.5px; color: var(--text-muted); margin-left: 8px; }
.fin-imp-grupo-acoes { display: flex; justify-content: flex-end; padding: 6px 10px 0; }
.fin-imp-grupo.categoria .fin-imp-grupo-cab { border-left: 3px solid var(--border); }
/* card compacto */
.fin-imp-mov2 { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 10px 12px; align-items: center; padding: 9px 12px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--surface); }
.fin-imp-mov2.selecionada { border-color: rgba(34, 197, 94, 0.45); background: rgba(34, 197, 94, 0.05); }
.fin-imp-mov2.ignorada { opacity: 0.55; }
.fin-imp-mov2.atencao { border-left: 3px solid var(--warning); }
.fin-imp-meio { width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 10.5px; font-weight: 800; letter-spacing: 0.03em; background: var(--surface-2); color: var(--text-secondary); border: 1px solid var(--border); text-align: center; line-height: 1.1; }
.fin-imp-meio.entrada { color: var(--good); border-color: rgba(34, 197, 94, 0.35); }
.fin-imp-nome { font-weight: 700; font-size: 14px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.fin-imp-nome .import-check { margin: 0; }
.fin-imp-nome .fin-imp-badge { font-size: 10px; font-weight: 700; padding: 1px 7px; border-radius: 999px; border: 1px solid var(--border); color: var(--text-muted); }
.fin-imp-nome .fin-imp-badge.ok { color: var(--good); border-color: rgba(34, 197, 94, 0.4); }
.fin-imp-nome .fin-imp-badge.aviso { color: var(--warning); border-color: rgba(250, 178, 25, 0.5); }
.fin-imp-linha2 { font-size: 12px; color: var(--text-muted); margin-top: 2px; display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; }
.fin-imp-linha2 .fin-imp-cat { color: var(--text-primary); font-weight: 600; }
.fin-imp-linha2 .fin-imp-cat.sug::before { content: "→ "; color: var(--text-muted); font-weight: 400; }
.fin-imp-linha2 .fin-imp-conf { font-size: 10.5px; }
.fin-imp-linha2 .fin-imp-nova { font-size: 10.5px; color: var(--warning); }
.fin-imp-linha3 { font-size: 11.5px; color: var(--warning); margin-top: 2px; }
.fin-imp-original2 { margin-top: 4px; font-size: 11px; }
.fin-imp-original2 summary { cursor: pointer; color: var(--text-muted); list-style: none; }
.fin-imp-original2 summary::before { content: "▸ "; }
.fin-imp-original2[open] summary::before { content: "▾ "; }
.fin-imp-original2 pre { margin: 4px 0 0; white-space: pre-wrap; word-break: break-word; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; color: var(--text-muted); background: var(--surface-2); padding: 6px 8px; border-radius: 6px; }
.fin-imp-direita { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; max-width: min(46%, 320px); }
.fin-imp-valor2 { font-family: "Sora", "Plus Jakarta Sans", sans-serif; font-weight: 800; font-size: 17px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.fin-imp-valor2.entrada { color: var(--good); }
.fin-imp-acoes2 { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.fin-imp-acoes2 .btn.small { padding: 4px 10px; font-size: 12px; }
.fin-imp-acoes2 .link-btn { font-size: 12px; }
@media (max-width: 640px) {
  .fin-imp-mov2 { grid-template-columns: 36px minmax(0, 1fr); }
  .fin-imp-meio { width: 36px; height: 36px; font-size: 9.5px; }
  .fin-imp-direita { grid-column: 1 / -1; flex-direction: row; justify-content: space-between; align-items: center; max-width: none; }
  .fin-imp-agrupar .dash-toggle-chip { flex: 1 1 45%; text-align: center; }
  .fin-imp-grupo-cab { flex-wrap: wrap; }
}

/* ============ FATURAS DE CARTÃO + GIRO + CAIXA (14/09/2026) ============ */
.fin-cartoes-tabs { margin-bottom: 12px; }
.fin-cartoes-tab > .card + .card { margin-top: 12px; }
#cardsDividaResumo { margin: 10px 0 12px; }
.fin-fatura-linha { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 8px 14px; align-items: center; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); cursor: pointer; }
.fin-fatura-linha:hover { background: var(--surface-2); }
.fin-fatura-linha .fin-fatura-nome { font-weight: 700; font-size: 13.5px; }
.fin-fatura-linha .fin-fatura-meta { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.fin-fatura-linha .fin-fatura-valor { font-family: "Sora", "Plus Jakarta Sans", sans-serif; font-weight: 800; font-size: 15px; font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; }
.fin-fatura-linha .fin-fatura-valor small { display: block; font-weight: 500; font-size: 11px; color: var(--text-muted); }
.fin-fatura-status { font-size: 10.5px; font-weight: 700; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--border); color: var(--text-secondary); white-space: nowrap; }
.fin-fatura-status.aberta { color: var(--brand-b); border-color: rgba(37, 99, 235, 0.4); }
.fin-fatura-status.fechada { color: var(--warning); border-color: rgba(250, 178, 25, 0.5); }
.fin-fatura-status.parcial { color: var(--warning); border-color: rgba(250, 178, 25, 0.5); }
.fin-fatura-status.paga { color: var(--good); border-color: rgba(34, 197, 94, 0.4); }
.fin-fatura-status.vencida { color: var(--critical); border-color: rgba(230, 88, 79, 0.5); }
.fin-fatura-status.futura { opacity: 0.7; }
.fin-fatura-card { max-width: 720px; }
.fin-fatura-impacto { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; margin-top: 10px; }
.fin-fatura-impacto .fin-imp-item { padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-2); font-size: 12px; }
.fin-fatura-impacto .fin-imp-item strong { display: block; font-size: 14px; margin-top: 2px; font-variant-numeric: tabular-nums; }
.fin-fatura-impacto .fin-imp-item.obrigacao { border-color: rgba(250, 178, 25, 0.5); }
.fin-fatura-impacto .fin-imp-item.negativo strong { color: var(--critical); }
.fin-fatura-ajustes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; align-items: end; }
.fin-fatura-ajustes label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; }
.fin-fatura-ajustes input { padding: 6px 8px; font-size: 12.5px; }
.fin-fatura-ajustes .fin-fatura-ajustes-largo { grid-column: 1 / span 3; }
.fin-faturas-card .fin-faturas-resumo { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: baseline; margin-bottom: 8px; font-size: 13px; }
.fin-faturas-card .fin-faturas-resumo b { font-family: "Sora", "Plus Jakarta Sans", sans-serif; font-size: 15px; }
.fin-faturas-card .fin-faturas-proxima { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-2); font-size: 12.5px; }
.fin-faturas-card .fin-faturas-proxima strong { font-variant-numeric: tabular-nums; }
.fin-caixa-linha.projetado strong { color: var(--brand-b); }
.fin-caixa-aviso { margin-top: 8px; font-size: 12px; color: var(--warning); line-height: 1.4; }
.fin-cartoes-historico { display: flex; flex-direction: column; gap: 10px; }
.fin-cartoes-historico .fin-hist-cartao h4 { margin: 0 0 6px; font-size: 13px; }
.fin-cartoes-historico table { width: 100%; border-collapse: collapse; font-size: 12px; }
.fin-cartoes-historico th, .fin-cartoes-historico td { padding: 6px 8px; border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; }
.fin-cartoes-historico td.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.fin-giro-status { font-size: 10.5px; font-weight: 700; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--border); margin-left: 6px; }
.fin-giro-status.planejada { color: var(--brand-b); border-color: rgba(37, 99, 235, 0.4); }
.fin-giro-status.cancelada { opacity: 0.6; text-decoration: line-through; }
@media (max-width: 640px) {
  .fin-fatura-linha { grid-template-columns: minmax(0, 1fr) auto; }
  .fin-fatura-linha .fin-fatura-status-wrap { grid-column: 1 / -1; }
  .fin-fatura-ajustes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fin-fatura-ajustes .fin-fatura-ajustes-largo { grid-column: 1 / -1; }
  .fin-cartoes-tabs .dash-toggle-chip { flex: 1 1 45%; text-align: center; }
  .fin-cartoes-historico { overflow-x: auto; }
  #finVisaoProjecaoModo { width: 100%; }
  #finVisaoProjecaoModo .dash-toggle-chip { flex: 1 1 45%; text-align: center; }
}
/* histórico por cartão: a tabela larga rola dentro do próprio card, nunca empurra a página (fin-panel é flex) */
.fin-cartoes-tab, .fin-cartoes-tab .card, .fin-cartoes-historico, .fin-hist-cartao { min-width: 0; max-width: 100%; }
.fin-hist-cartao .table-wrap { overflow-x: auto; max-width: 100%; }
.fin-cartoes-historico { width: 0; min-width: 100%; } /* impede a tabela larga de esticar o container (grid/flex) */

/* Fechamento operacional de cartões (14/09/2026): posição do cartão, saldo
   de abertura e conferência de fatura importada. */
.fin-posicao-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px;
  margin-top: 6px;
}
.fin-posicao-tile {
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 10px 12px;
}
.fin-posicao-value { font-size: 18px; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.fin-posicao-label { font-size: 10.5px; color: var(--text-muted); margin-top: 2px; }
.fin-posicao-tile.alert .fin-posicao-value { color: var(--critical); }
.fin-posicao-tile.ok .fin-posicao-value { color: var(--good); }

/* FATURA: reorganização visual (14/09/2026) -- separa CARTÃO / FATURA ATUAL /
   PRÓXIMAS FATURAS em blocos distintos, em vez de uma grade única confusa. */
.fin-sub-head {
  font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--text-muted); margin: 10px 0 4px;
}
.fin-sub-head:first-child { margin-top: 0; }
.fin-posicao-bloco { margin-bottom: 4px; }
.fin-tecnico-details { margin-top: 10px; }
.fin-tecnico-details summary {
  cursor: pointer; font-size: 11px; color: var(--text-muted); font-weight: 600;
  list-style: none; display: flex; align-items: center; gap: 4px;
}
.fin-tecnico-details summary::-webkit-details-marker { display: none; }
.fin-tecnico-details summary::before { content: "▸"; font-size: 9px; }
.fin-tecnico-details[open] summary::before { content: "▾"; }
.fin-tecnico-details .fin-posicao-grid { margin-top: 8px; }