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

:root {
  --brand-navy: #123b73;
  --brand-navy-dark: #09294f;
  --brand-blue-soft: #e8eef7;
  --red-700: #b7181e;
  --red-600: #d81f26;
  --red-500: #e31e24;
  --red-100: #fbe1e1;
  --red-50: #fdf3f3;
  --red-300: #f0a0a3;
  --purple-600: #7c4fd1;
  --purple-100: #eee6fb;
  --ink-900: #1b1620;
  --ink-700: #4a4550;
  --ink-500: #7a7580;
  --ink-300: #c8c3cc;
  --paper: #f3f6fa;
  --card: #ffffff;
  --line: #e9e5e0;
  --amber-600: #b4740e;
  --amber-100: #fcedd2;
  --blue-600: #2b5fad;
  --blue-100: #dee9fb;
  --green-600: #1e8e5a;
  --green-100: #dcf3e7;
  --shadow-sm: 0 1px 2px rgba(27, 22, 32, 0.05);
  --shadow-md: 0 8px 24px rgba(27, 22, 32, 0.08);
  --radius: 14px;
  /* A escala: seis tamanhos de letra, tres cantos, quatro espacamentos.
     Antes disto o arquivo tinha 26 tamanhos, 19 cantos e 20 espacamentos —
     e por isso cada tela nova saia um pouco diferente da anterior. */
  --t-micro: 11px;    /* etiqueta em maiusculas, cabecalho de tabela */
  --t-apoio: 12.5px;  /* texto de apoio, cinza, descricao de painel */
  --t-corpo: 13.5px;  /* corpo do texto e celula de tabela          */
  --t-forte: 14.5px;  /* titulo de um item dentro de uma lista      */
  --t-painel: 17px;   /* titulo de painel                           */
  --t-numero: 18px;   /* numero em destaque dentro de um cartao     */
  --r-pequeno: 8px;   /* campo, botao pequeno, etiqueta             */
  --r-pilula: 999px;  /* pilula                                     */
  --e-1: 8px; --e-2: 12px; --e-3: 16px; --e-4: 22px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: 'Inter', sans-serif;
  background: var(--paper);
  color: var(--ink-900);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { font-family: 'Sora', sans-serif; margin: 0; letter-spacing: -0.01em; }
.mono { font-family: 'JetBrains Mono', monospace; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font-family: inherit; }

.shell { display: grid; grid-template-columns: 272px 1fr; min-height: 100vh; }
.sidebar {
  background: linear-gradient(180deg, var(--brand-navy), var(--brand-navy-dark));
  color: #fff;
  padding: 28px 18px 24px;
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  z-index: 40;
}
.brand { display: flex; align-items: center; gap: 14px; min-height: 88px; margin: 0 0 22px; padding: 13px; border: 1px solid rgba(255,255,255,.12); border-radius: var(--radius); background: rgba(255,255,255,.07); overflow: visible; }
.brand > * { visibility: visible; }
.brand-mark {
  width: 58px; height: 58px; flex-shrink: 0;
  display: grid; place-items: center;
  background: #fff url('../assets/logo-helio.png') 16% 58% / 188px auto no-repeat;
  border-radius: var(--radius);
  overflow: hidden; color: transparent; font-size: 0; box-shadow: 0 8px 18px rgba(0,0,0,.16);
}
.brand-mark svg { display: none; }
.brand-text { min-width:0; }.brand-text .name { font-family: 'Sora', sans-serif; font-weight: 700; font-size: var(--t-painel); line-height: 1.28; letter-spacing:-.02em; }
.brand-text .sub { font-size: var(--t-micro); letter-spacing: 0.18em; opacity: 0.68; font-weight: 700; margin-top: 6px; white-space:nowrap; }

.nav-group { margin-top: 6px; display: flex; flex-direction: column; gap: 2px; }
.nav-item {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 14px; border-radius: var(--radius);
  font-size: var(--t-forte); font-weight: 500;
  color: rgba(255, 255, 255, 0.9);
  border: none; background: none; width: 100%; text-align: left;
  transition: background 0.15s ease, color 0.15s ease;
}
.nav-item svg { width: 19px; height: 19px; flex-shrink: 0; opacity: 0.85; }
.nav-item:hover { background: rgba(255, 255, 255, 0.1); }
.nav-item.active { background: #fff; color: var(--brand-navy); font-weight: 600; box-shadow: var(--shadow-sm); }
.nav-item.active svg { opacity: 1; }
.nav-item .badge-count {
  margin-left: auto; background: rgba(255, 255, 255, 0.22); color: #fff;
  font-size: var(--t-micro); font-weight: 700; padding: 1px 7px; border-radius: var(--radius);
}
.nav-item.active .badge-count { background: var(--red-50); color: var(--red-600); }
.sidebar-footer { margin-top: auto; padding-top: 14px; }
.sidebar-divider { height: 1px; background: rgba(255, 255, 255, 0.14); margin: 10px 6px 12px; }

.main { min-width: 0; }
.topbar { display: flex; align-items: center; justify-content: space-between; padding: 20px 36px; gap: 20px; }
.topbar-left { display: flex; align-items: center; gap: 14px; min-width: 0; flex: 1; }
.search-wrap { flex: 1; max-width: 420px; position: relative; }
.search-wrap input {
  width: 100%; padding: 10px 14px 10px 40px; border-radius: var(--radius);
  border: 1px solid var(--line); background: var(--card);
  font-size: var(--t-corpo); color: var(--ink-900); outline: none;
}
.search-wrap input:focus { border-color: var(--red-500); box-shadow: 0 0 0 3px var(--red-100); }
.search-wrap svg {
  position: absolute; left: 13px; top: 50%; transform: translateY(-50%);
  width: 16px; height: 16px; color: var(--ink-500);
}
.global-search-results { position:absolute; left:0; right:0; top:48px; z-index:55; overflow:hidden; border:1px solid var(--line); border-radius:var(--radius); background:#fff; box-shadow:0 16px 40px rgba(9,41,79,.16); }.global-search-results a { display:grid; gap:3px; border-bottom:1px solid var(--line); padding:11px 13px; }.global-search-results a:hover { background:var(--brand-blue-soft); }.global-search-results strong { font-size:var(--t-micro); }.global-search-results small { overflow:hidden; color:var(--ink-500); font-size:var(--t-micro); text-overflow:ellipsis; white-space:nowrap; }.search-kind { color:var(--brand-navy); font-size:var(--t-micro); font-weight:800; letter-spacing:.08em; }
.topbar-actions { display: flex; align-items: center; gap: 18px; flex-shrink: 0; }
.topbar-actions { position:relative; }
.icon-btn {
  width: 40px; height: 40px; border-radius: var(--radius); border: 1px solid var(--line);
  background: var(--card); display: grid; place-items: center; cursor: pointer;
  position: relative; color: var(--ink-700);
}
.icon-btn svg { width: 18px; height: 18px; }
.icon-btn .dot {
  position: absolute; top: -4px; right: -4px; background: var(--red-500); color: #fff;
  font-size: var(--t-apoio); font-weight: 700; min-width: 17px; height: 17px; border-radius: var(--radius);
  display: grid; place-items: center; border: 2px solid var(--paper); padding: 0 2px;
}
.notification-panel { position:absolute; top:50px; right:0; z-index:60; width:min(380px,calc(100vw - 30px)); overflow:hidden; border:1px solid var(--line); border-radius:var(--radius); background:#fff; box-shadow:0 18px 50px rgba(9,41,79,.18); }.notification-head { display:flex; align-items:center; justify-content:space-between; gap:12px; border-bottom:1px solid var(--line); padding:15px 16px; }.notification-head div { display:grid; gap:3px; }.notification-head small { color:var(--ink-500); }.notification-head button { border:0; background:none; color:var(--brand-navy); cursor:pointer; font-size:var(--t-apoio); font-weight:700; }.notification-list { max-height:360px; overflow:auto; }.notification-item { display:grid; grid-template-columns:9px 1fr; gap:10px; align-items:start; border-bottom:1px solid var(--line); padding:13px 16px; }.notification-item:hover { background:var(--brand-blue-soft); }.notification-item.read { opacity:.6; }.notification-item i { width:8px; height:8px; margin-top:4px; border-radius:50%; background:var(--blue-600); }.notification-item.warning i { background:var(--amber-600); }.notification-item.danger i { background:var(--red-600); }.notification-item span { display:grid; gap:4px; }.notification-item strong { font-size:var(--t-micro); }.notification-item small { color:var(--ink-500); font-size:var(--t-apoio); }.notification-footer { display:block; padding:12px; text-align:center; color:var(--brand-navy); font-size:var(--t-apoio); font-weight:800; }.notification-empty { padding:28px 16px; color:var(--ink-500); text-align:center; font-size:var(--t-micro); }
.user-chip { display: flex; align-items: center; gap: 10px; padding: 4px 8px 4px 4px; border-radius: var(--radius); }
.avatar {
  width: 38px; height: 38px; border-radius: 50%; background: var(--brand-navy); color: #fff;
  display: grid; place-items: center; font-weight: 700; font-family: 'Sora', sans-serif; font-size: var(--t-forte);
}
.user-chip .name { font-size: var(--t-corpo); font-weight: 600; }
.user-chip .role { font-size: var(--t-micro); color: var(--ink-500); }

  .content { padding: 6px 36px 48px; }
  .main .content .process-detail-header { margin-left: 0; margin-right: 0; }
  .main .content .detail-section { margin-left: 0; margin-right: 0; }
.page-head { margin-bottom: 26px; display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.page-head h1 { font-size: 26px; font-weight: 700; }
.page-head h1 .accent { color: var(--red-500); }
.page-head p { color: var(--ink-500); font-size: var(--t-forte); margin-top: 6px; }

.stat-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; margin-bottom: 26px; }
.stat-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
.stat-card {
  background: var(--card); border-radius: var(--radius); padding: 20px;
  box-shadow: var(--shadow-sm); border: 1px solid var(--line);
  border-top: 3px solid var(--stat-color, var(--red-500));
}
.stat-icon {
  width: 42px; height: 42px; border-radius: var(--radius); display: grid; place-items: center;
  background: var(--stat-bg, var(--red-50)); color: var(--stat-color, var(--red-500)); margin-bottom: 16px;
}
.stat-icon svg { width: 20px; height: 20px; }
.stat-num { font-family: 'Sora', sans-serif; font-size: 29px; font-weight: 700; line-height: 1; }
.stat-label { font-size: var(--t-corpo); color: var(--ink-500); margin-top: 5px; }
.stat-link { display: inline-flex; align-items: center; gap: 4px; font-size: var(--t-apoio); font-weight: 600; color: var(--stat-color, var(--red-500)); margin-top: 14px; }

.panels-row { display: grid; grid-template-columns: 1.7fr 1fr; gap: 20px; align-items: start; }
.panel { background: var(--card); border-radius: var(--radius); border: 1px solid var(--line); box-shadow: var(--shadow-sm); }
.panel-head { display: flex; align-items: center; justify-content: space-between; padding: 20px 22px 16px; border-bottom: 1px solid var(--line); gap: 12px; flex-wrap: wrap; }
.panel-head h2 { font-size: var(--t-painel); font-weight: 700; }
.panel-head .link { font-size: var(--t-apoio); font-weight: 600; color: var(--red-500); }
.panel-scroll { overflow-x: auto; }
.panel-tools { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.panel-tools .search-wrap { max-width: 340px; }

select.mini, .form-control {
  font-size: var(--t-corpo); border: 1px solid var(--line); border-radius: var(--r-pequeno);
  padding: 8px 12px; background: var(--paper); color: var(--ink-700); outline: none;
}
.form-control:focus, select.mini:focus { border-color: var(--red-500); box-shadow: 0 0 0 3px var(--red-100); }

table { width: 100%; border-collapse: collapse; }
thead th {
  text-align: left; font-size: var(--t-micro); letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ink-500); font-weight: 600; padding: 12px 22px; border-bottom: 1px solid var(--line);
}
tbody td { padding: 14px 22px; font-size: var(--t-corpo); border-bottom: 1px solid var(--line); color: var(--ink-700); }
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover { background: var(--paper); }
td.proc-num { font-family: 'JetBrains Mono', monospace; font-weight: 600; color: var(--ink-900); }
td.client { font-weight: 600; color: var(--ink-900); }
.ref-cell { color: var(--ink-500); }

.badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--t-apoio); font-weight: 700; padding: 5px 11px; border-radius: var(--r-pilula);
  /* "Em andamento" quebrava em duas linhas dentro da coluna estreita */
  white-space: nowrap;
}
.badge::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.badge.status-em_andamento { background: var(--blue-100); color: var(--blue-600); }
.badge.status-pendente { background: var(--amber-100); color: var(--amber-600); }
.badge.status-concluido { background: var(--green-100); color: var(--green-600); }
.badge.status-cancelado { background: var(--red-100); color: var(--red-600); }

.table-actions { display: flex; gap: 6px; }
.action-btn {
  width: 32px; height: 32px; border-radius: var(--r-pequeno); border: 1px solid var(--line);
  background: var(--card); color: var(--ink-500); cursor: pointer;
  display: grid; place-items: center;
}
.action-btn:hover { background: var(--paper); color: var(--ink-900); }
.action-btn.danger:hover { background: var(--red-50); color: var(--red-600); border-color: var(--red-100); }

.btn-primary {
  border: none; border-radius: var(--radius); background: var(--brand-navy); color: #fff;
  padding: 11px 18px; font-weight: 600; cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px; font-size: var(--t-forte);
}
.btn-primary:hover { background: var(--brand-navy-dark); }
.btn-secondary {
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--card);
  padding: 11px 18px; font-weight: 600; cursor: pointer;
}

.fin-body { padding: 20px 22px 22px; }
.fin-row { display: flex; justify-content: space-between; align-items: flex-end; padding: 14px 0; border-bottom: 1px dashed var(--line); }
.fin-row:last-of-type { border-bottom: none; }
.fin-label { font-size: var(--t-apoio); color: var(--ink-500); font-weight: 500; }
.fin-value { font-family: 'Sora', sans-serif; font-size: 20px; font-weight: 700; margin-top: 4px; }
.fin-value.receber { color: var(--red-600); }
.fin-value.recebido { color: var(--green-600); }
.alerta-item { padding: 12px 14px; border-radius: var(--radius); font-size: var(--t-corpo); margin-bottom: 8px; border: 1px solid var(--line); }
.alerta-aviso { background: var(--amber-100); color: var(--amber-600); }
.alerta-info { background: var(--blue-100); color: var(--blue-600); }
.alerta-ok { background: var(--green-100); color: var(--green-600); }
.mini-chart { margin-top: 18px; display: flex; align-items: flex-end; gap: 6px; height: 64px; }
.mini-chart .bar { flex: 1; background: var(--red-100); border-radius: 5px 5px 2px 2px; }
.mini-chart .bar.now { background: var(--red-500); }

.hamburger {
  display: none; width: 38px; height: 38px; border-radius: var(--radius);
  border: 1px solid var(--line); background: var(--card); align-items: center; justify-content: center; cursor: pointer;
}
.overlay { display: none; position: fixed; inset: 0; background: rgba(27, 22, 32, 0.35); z-index: 30; }
.overlay.show { display: block; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.empty-row td { text-align: center; color: var(--ink-500); padding: 32px 22px; }

/* Modal */
.modal-overlay {
  position: fixed; inset: 0; background: rgba(27, 22, 32, 0.45); z-index: 50;
  display: none; align-items: center; justify-content: center; padding: 20px;
}
.modal-overlay.open { display: flex; }
.modal {
  background: var(--card); border-radius: var(--radius); width: min(640px, 100%);
  max-height: 90vh; overflow-y: auto; box-shadow: var(--shadow-md);
}
.modal-head { padding: 20px 22px; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; }
.modal-head h2 { font-size: var(--t-numero); }
.modal-close { border: none; background: none; font-size: 22px; cursor: pointer; color: var(--ink-500); }
.modal-body { padding: 20px 22px; }
.modal-foot { padding: 16px 22px 22px; display: flex; justify-content: flex-end; gap: 10px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-grid .full { grid-column: 1 / -1; }
.form-group { display: flex; flex-direction: column; gap: 6px; }
.form-group label { font-size: var(--t-apoio); font-weight: 600; color: var(--ink-700); }

/* Detalhe do processo */
.process-detail-header {
  margin: 0 0 20px; background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 22px 24px; display: flex; justify-content: space-between; gap: 16px;
}
.back-link { display: inline-flex; align-items: center; gap: 8px; color: var(--ink-500); font-size: var(--t-corpo); margin-bottom: 10px; }
.back-link:hover { color: var(--red-600); }
.process-label { margin: 0; font-size: var(--t-micro); letter-spacing: 0.12em; color: var(--ink-500); font-weight: 600; }
.detail-section {
  margin: 0 0 20px; background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 22px 24px; box-shadow: var(--shadow-sm);
}
.detail-section h2 { font-size: var(--t-painel); margin-bottom: 4px; }
.detail-section > p { color: var(--ink-500); font-size: var(--t-corpo); margin: 0 0 18px; }

.timeline { display: flex; flex-direction: column; gap: 12px; margin-bottom: 16px; }
.timeline-item {
  display: grid; grid-template-columns: 110px 1fr; gap: 14px; padding: 12px 14px;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper);
}
.timeline-date { font-family: 'JetBrains Mono', monospace; font-size: var(--t-apoio); font-weight: 600; color: var(--red-600); }
.timeline-text { font-size: var(--t-forte); color: var(--ink-700); }

.etapas-table input, .etapas-table select, .etapas-table textarea {
  width: 100%; border: 1px solid var(--line); border-radius: var(--r-pequeno); padding: 8px 10px; background: #fff; font-size: var(--t-corpo);
}
.etapas-table textarea { min-height: 60px; resize: vertical; }
.etapa-duas-datas { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; min-width: 270px; }
.etapa-duas-datas label { display: grid; gap: 4px; color: var(--ink-500); font-size: var(--t-micro); font-weight: 800; text-transform: uppercase; }
.etapa-duas-datas input { min-width: 0; }

.etapas-dashboard { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin: 22px 0 18px; }
.progresso-card { flex: 1; max-width: 520px; }
.progresso-info { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 8px; font-size: var(--t-corpo); }
.progresso-info strong { color: var(--ink-900); font-size: var(--t-forte); }
.progresso-info span { color: var(--ink-500); }
.progresso-track { height: 9px; overflow: hidden; border-radius: var(--r-pilula); background: var(--red-100); }
.progresso-track span { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--red-600), #ef646a); transition: width .3s ease; }
.etapas-filtros { display: flex; flex-wrap: wrap; gap: 7px; }
.filtro-etapa { border: 1px solid var(--line); border-radius: var(--r-pilula); background: #fff; color: var(--ink-600); cursor: pointer; padding: 7px 11px; font-size: var(--t-apoio); font-weight: 700; }
.filtro-etapa.active { border-color: var(--red-600); background: var(--red-50); color: var(--red-700); }
.etapa-row { border-left: 3px solid transparent; }
.etapa-row.etapa-concluido { border-left-color: #22a06b; }
.etapa-row.etapa-concluido td { background: #f4fbf7; }
.etapa-row.etapa-pendente { border-left-color: #a1a7b3; }
.etapa-row.etapa-em_andamento { border-left-color: var(--amber-600); }
.etapa-row.etapa-em_andamento td { background: #fffbf2; }
.etapa-row.etapa-atrasada { border-left-color: var(--red-600); }
.etapa-row.etapa-atrasada td { background: #fff7f7; }
.atraso-badge { display: inline-block; margin: 6px 0 0 27px; border-radius: var(--r-pilula); background: var(--red-100); color: var(--red-700); padding: 3px 7px; font-size: var(--t-apoio); font-weight: 800; text-transform: uppercase; }
/* O nome da etapa é texto simples, sem botão de recolher — mesmo padrão das
   linhas de documento da parte 2. */
.etapa-nome { display: inline-flex; align-items: center; padding: 5px 0; text-align: left; }

.btn-add-documento { width: 28px; height: 28px; margin-left: 10px; border: 1px solid var(--line); border-radius: var(--r-pequeno); background: var(--card); color: var(--ink-700); cursor: pointer; font-size: 20px; font-weight: 700; line-height: 1; vertical-align: middle; }
.btn-add-documento:hover { background: var(--paper); color: var(--ink-900); }
.documento-row td { background: var(--paper); }
.documento-row.documento-concluido { border-left:3px solid #22a06b; }
.documento-row.documento-concluido td { background:#f4fbf7; }
.documentos-tabs { display:flex; gap:8px; margin:16px 0; }.documentos-tabs button { border:1px solid var(--line); border-radius:var(--r-pilula); background:#fff; color:var(--ink-500); padding:8px 14px; cursor:pointer; font-size:var(--t-apoio); font-weight:800; }.documentos-tabs button.active { border-color:var(--brand-navy); background:var(--brand-navy); color:#fff; }.documentos-tabs button span { display:inline-grid; place-items:center; min-width:18px; height:18px; margin-left:5px; border-radius:var(--r-pilula); background:var(--amber-100); color:var(--amber-600); font-size:var(--t-micro); }.documentos-tabs button.active span { background:#fff; color:var(--brand-navy); }
.pending-stats .stat-card:first-child { border-top:3px solid var(--amber-600); }.pending-table td:first-child { display:grid; gap:4px; }.pending-table td:first-child small { color:var(--ink-500); font-size:var(--t-micro); }.pending-missing { color:var(--red-600); font-weight:700; }.pending-table .btn-small { display:inline-flex; white-space:nowrap; }
.documento-row td:first-child { padding-left: 30px; }
/* Cada situação do processo mostra só a sua parte:
   "Documentos pendentes" (modo-pendente) -> apenas a parte 2 (Documentos);
   "Em andamento" (modo-em-andamento)     -> apenas as partes 3 (AGT) e 4 (Porto/Terminal).
   As duas nunca aparecem juntas. */
.modo-em-andamento #sec-documentos,
.modo-em-andamento #sec-finalizacao,
.modo-em-andamento #sec-finalizacao + p { display:none; }
.modo-pendente #sec-agt,
.modo-pendente #sec-porto-terminal,
.modo-pendente #sec-finalizacao,
.modo-pendente #sec-finalizacao + p { display:none; }
/* ...a menos que a usuaria tenha clicado na pastilha para abrir a parte.
   Vale so para aquela visita: recarregar volta a tela enxuta. */
.detail-section.parte-revelada,
p.parte-revelada { display: block !important; }
.documento-observacao-wrap { display: flex; align-items: flex-start; gap: 5px; }
.btn-remove-documento { flex: 0 0 auto; width: 26px; height: 26px; border: 0; border-radius: 50%; background: transparent; color: var(--red-600); cursor: pointer; font-size: 20px; line-height: 1; }
.arquivo-label { display: inline-flex; margin-top: 7px; border: 1px dashed var(--line); border-radius: var(--r-pequeno); color: var(--ink-700); cursor: pointer; padding: 5px 8px; font-size: var(--t-micro); font-weight: 700; }
.arquivo-label input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.arquivo-link { display: block; max-width: 190px; margin-top: 6px; overflow: hidden; color: var(--brand-navy); font-size: var(--t-micro); text-overflow: ellipsis; white-space: nowrap; }
.save-state { align-self: center; margin-right: 12px; color: #218358; font-size: var(--t-apoio); font-weight: 700; order: -1; }
.save-state.saving { color: var(--ink-500); }

.clientes-resumo { display: grid; grid-template-columns: repeat(2, minmax(180px, 260px)); gap: 14px; margin-bottom: 22px; }
.clientes-resumo > div { display: flex; flex-direction: column; gap: 5px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; padding: 18px 20px; box-shadow: var(--shadow-sm); }
.clientes-resumo strong { color: var(--red-700); font: 800 28px 'Sora', sans-serif; }
.clientes-resumo span { color: var(--ink-500); font-size: var(--t-apoio); }
.clientes-toolbar { gap: 20px; }
.clientes-toolbar p { margin: 5px 0 0; color: var(--ink-500); font-size: var(--t-apoio); }
.clientes-search { max-width: 280px; }
.cliente-fantasia { display: block; margin-top: 4px; color: var(--ink-500); }
.btn-toggle-cliente { color: var(--ink-500); }
.quick-process-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }.quick-process-grid>div { display:grid; gap:6px; border:1px solid var(--line); border-radius:var(--radius); background:var(--paper); padding:13px; }.quick-process-grid span { color:var(--ink-500); font-size:var(--t-apoio); }.quick-process-grid strong { font-size:var(--t-apoio); }
.empresa-filters { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:8px; }.empresa-filters select { min-width:155px; }.clientes-resumo { grid-template-columns:repeat(4,minmax(150px,1fr)); max-width:none; }.modal-wide { width:min(940px,94vw); }.empresa-detail-actions { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:18px; }.empresa-detail-stats { display:grid; grid-template-columns:repeat(5,1fr); gap:10px; margin-bottom:20px; }.empresa-detail-stats article { display:grid; gap:5px; border:1px solid var(--line); border-radius:var(--radius); background:var(--paper); padding:13px; }.empresa-detail-stats strong { color:var(--brand-navy); font:800 18px 'Sora',sans-serif; }.empresa-detail-stats span { color:var(--ink-500); font-size:var(--t-apoio); }.empresa-detail-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:18px; }.empresa-detail-grid>section,.empresa-detail-section { border:1px solid var(--line); border-radius:var(--radius); padding:16px; }.empresa-detail-grid h3,.empresa-detail-section h3 { margin-bottom:12px; font-size:var(--t-corpo); }.empresa-detail-grid p { margin:7px 0; color:var(--ink-700); font-size:var(--t-micro); line-height:1.5; }.empresa-detail-section { margin-bottom:18px; padding:0; overflow:hidden; }.empresa-detail-section h3 { padding:16px 16px 4px; }

.portal-body { min-height: 100vh; background: linear-gradient(135deg, #fdf7f5 0%, #f3f1ee 58%, #f8eeee 100%); }
.portal-header { display: flex; align-items: center; justify-content: space-between; max-width: 1180px; margin: auto; padding: 24px 28px; }
.portal-brand { display: flex; align-items: center; gap: 11px; font-family: 'Sora', sans-serif; }
.portal-brand span { display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--radius); background: var(--red-700); color: #fff; font-size: var(--t-corpo); font-weight: 800; }
.portal-main { max-width: 1180px; margin: auto; padding: 50px 28px 80px; }
.portal-login { display: grid; grid-template-columns: 1.1fr .9fr; align-items: center; gap: 70px; min-height: 620px; }
.portal-login-copy h1 { max-width: 650px; margin: 14px 0 20px; font-size: clamp(38px, 6vw, 68px); line-height: 1.04; }
.portal-login-copy p { max-width: 570px; color: var(--ink-500); font-size: var(--t-painel); line-height: 1.7; }
.portal-kicker { color: var(--red-700); font-size: var(--t-micro); font-weight: 800; letter-spacing: .16em; }
.portal-login-card { border: 1px solid var(--line); border-radius: var(--radius); background: rgba(255,255,255,.94); padding: 32px; box-shadow: 0 22px 60px rgba(93,35,39,.12); }
.portal-login-card h2 { font-size: 24px; }
.portal-login-card > p { color: var(--ink-500); line-height: 1.5; }
.portal-login-card .form-group { margin-top: 18px; }
.portal-submit { width: 100%; margin-top: 22px; }
.portal-help { text-align: center; font-size: var(--t-micro); }
.portal-login-card.login-error { border-color: var(--red-500); }
.portal-login-card.login-error .portal-help { color: var(--red-700); }
.portal-welcome { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin: 35px 0; }
.portal-welcome h1 { margin: 9px 0 4px; font-size: 38px; }
.portal-welcome p { color: var(--ink-500); }
.portal-total { display: flex; align-items: baseline; gap: 8px; border-radius: var(--radius); background: #fff; padding: 18px 22px; box-shadow: var(--shadow-sm); }
.portal-total strong { color: var(--red-700); font: 800 30px 'Sora', sans-serif; }
.portal-total span { color: var(--ink-500); font-size: var(--t-apoio); }
.portal-processos { display: grid; gap: 18px; }
.portal-processo-card { border: 1px solid var(--line); border-radius: var(--radius); background: #fff; padding: 24px; box-shadow: var(--shadow-sm); }
.portal-processo-head, .portal-progress-info { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.portal-processo-head h2 { margin-top: 4px; font-size: 24px; }
.portal-processo-head p { margin: 5px 0 0; color: var(--ink-500); }
.portal-processo-label { color: var(--red-700); font-size: var(--t-apoio); font-weight: 800; letter-spacing: .12em; }
.portal-progress-info { margin: 22px 0 8px; font-size: var(--t-apoio); }
.portal-progress-info span { color: var(--ink-500); }
.portal-processo-card details { margin-top: 20px; border-top: 1px solid var(--line); padding-top: 16px; }
.portal-processo-card summary { color: var(--red-700); cursor: pointer; font-weight: 700; }
.portal-etapas { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 18px; }
.portal-etapa { display: flex; gap: 10px; border-radius: var(--radius); background: var(--paper); padding: 12px; }
.portal-etapa > span { color: var(--ink-300); font-weight: 800; }
.portal-etapa.done > span { color: var(--green-600); }
.portal-etapa small { display: block; margin-top: 3px; color: var(--ink-500); }
.portal-processo-datas { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.portal-processo-datas span { display: flex; flex-direction: column; gap: 2px; }
.portal-processo-datas small { color: var(--ink-500); font-size: var(--t-apoio); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.portal-processo-datas strong { color: var(--ink-700); font-size: var(--t-corpo); }
.portal-processo-datas .atrasado strong { color: var(--red-700); }
.portal-processo-datas .fechado strong { color: var(--green-600); }
.portal-prazo { display: inline-block; margin-top: 5px; border-radius: var(--r-pilula); background: var(--paper); color: var(--ink-500); padding: 2px 9px; font-size: var(--t-micro); font-style: normal; }
.portal-prazo.ok { background: var(--green-100); color: var(--green-600); }
.portal-prazo.proxima { background: var(--amber-100); color: var(--amber-600); }
.portal-prazo.atrasada { background: var(--red-100); color: var(--red-700); font-weight: 700; }
.portal-etapa.atrasada { box-shadow: inset 3px 0 0 var(--red-600); }
.portal-updates { margin-top: 22px; }
.portal-updates h3 { font-size: var(--t-forte); }
.portal-updates p { color: var(--ink-700); font-size: var(--t-corpo); }
.portal-empty { border: 1px dashed var(--line); border-radius: var(--radius); background: #fff; padding: 50px; text-align: center; }
.portal-account-actions { display: flex; gap: 8px; }
.portal-tabs { display: flex; gap: 8px; margin: 0 0 22px; border-bottom: 1px solid var(--line); }
.portal-tab { border: 0; border-bottom: 3px solid transparent; background: transparent; color: var(--ink-500); cursor: pointer; padding: 12px 16px; font-weight: 800; }
.portal-tab.active { border-bottom-color: var(--red-600); color: var(--red-700); }
.portal-tab span { display: inline-grid; place-items: center; min-width: 20px; height: 20px; margin-left: 5px; border-radius: var(--r-pilula); background: var(--red-100); color: var(--red-700); font-size: var(--t-apoio); }
.portal-documentos-head { margin-bottom: 18px; }.portal-documentos-head h2 { font-size: 22px; }.portal-documentos-head p { color: var(--ink-500); }
.portal-documentos { display: grid; gap: 12px; }
.portal-documento { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 18px; border: 1px solid var(--line); border-left: 4px solid var(--amber-600); border-radius: var(--radius); background: #fff; padding: 18px; }
.portal-documento.enviado { border-left-color: var(--green-600); }
.portal-documento h3 { margin: 5px 0; font: 700 15px 'Sora', sans-serif; }.portal-documento p { margin: 0; color: var(--ink-500); font-size: var(--t-apoio); }
.portal-documento-status { text-align: right; }.doc-enviado,.doc-pendente { display: inline-flex; border-radius: var(--r-pilula); padding: 5px 8px; font-size: var(--t-apoio); font-weight: 800; }.doc-enviado { background: var(--green-100); color: var(--green-600); }.doc-pendente { background: var(--amber-100); color: var(--amber-600); }
.portal-upload { cursor: pointer; white-space: nowrap; }.portal-upload input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.senha-feedback { min-height: 18px; color: var(--red-700); font-size: var(--t-apoio); }

.finance-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 22px; }
.finance-card { display: flex; flex-direction: column; gap: 8px; min-height: 145px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; padding: 20px; box-shadow: var(--shadow-sm); }
.finance-card::before { content: ''; width: 34px; height: 4px; border-radius: var(--r-pilula); background: var(--ink-300); }
.finance-card span { margin-top: 8px; color: var(--ink-500); font-size: var(--t-apoio); font-weight: 700; }
.finance-card strong { font: 800 23px 'Sora', sans-serif; }
.finance-card small { color: var(--ink-500); }
.finance-receber::before { background: var(--red-600); }
.finance-recebido::before { background: var(--green-600); }
/* O saldo do cliente é a leitura principal da tela: verde quando há dinheiro
   dele em caixa, vermelho quando o processo já gastou mais do que ele colocou
   — é o que a legenda em cima dos cartões promete. */
.finance-fundo::before { background: var(--green-600); }
.finance-fundo.estourado::before { background: var(--red-600); }
.finance-impostos::before { background: var(--amber-600); }
.finance-despachante::before { background: var(--blue-600); }
.finance-toolbar { align-items: flex-end; gap: 20px; }
.finance-toolbar p { margin: 5px 0 0; color: var(--ink-500); font-size: var(--t-apoio); }
.finance-filters { display: flex; flex-wrap: wrap; gap: 10px; }
.finance-filters .form-control { min-width: 190px; }
.finance-note { display: block; max-width: 280px; margin-top: 4px; color: var(--ink-500); }
.finance-type { display: inline-flex; border-radius: var(--r-pilula); background: var(--paper); padding: 5px 8px; font-size: var(--t-apoio); font-weight: 800; white-space: nowrap; }
.type-pagamento_cliente { background: var(--green-100); color: var(--green-600); }
.type-imposto { background: var(--amber-100); color: var(--amber-600); }
.type-despesa_escritorio { background: var(--paper); color: var(--ink-700); border: 1px solid var(--line); }
.type-custo_cliente { background: var(--red-100); color: var(--red-700); }
.type-fatura_despachante { background: var(--blue-100); color: var(--blue-600); }
.finance-value { font-family: 'JetBrains Mono', monospace; font-weight: 700; white-space: nowrap; }
.finance-value.entrada { color: var(--green-600); }
.btn-delete-fin { color: var(--red-600); }
.finance-page-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.finance-insights { display: grid; grid-template-columns: 1.35fr .65fr; gap: 16px; margin-bottom: 22px; }
.finance-insights .panel { margin: 0; }
.finance-chart { display: flex; align-items: flex-end; justify-content: space-around; gap: 12px; min-height: 160px; padding: 18px 24px 20px; }
.chart-month { flex: 1; text-align: center; }
.chart-bars { display: flex; align-items: flex-end; justify-content: center; gap: 5px; height: 115px; border-bottom: 1px solid var(--line); }
.chart-bars span { display: block; width: 16px; border-radius: 5px 5px 0 0; }
.bar-in { background: var(--green-600); }.bar-out { background: var(--red-500); }
.chart-month small { display: block; margin-top: 7px; color: var(--ink-500); font-size: var(--t-apoio); }
.finance-alerts { display: grid; gap: 8px; padding: 14px 18px 18px; }
.finance-alert { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 8px; border-radius: var(--r-pequeno); background: var(--amber-100); color: var(--amber-600); padding: 9px; font-size: var(--t-micro); }
.finance-alert.danger { background: var(--red-100); color: var(--red-700); }
.finance-alert span { overflow: hidden; color: var(--ink-700); text-overflow: ellipsis; white-space: nowrap; }
.finance-empty { color: var(--ink-500); font-size: var(--t-apoio); }
.finance-status { display: block; width: fit-content; margin-top: 5px; border-radius: var(--r-pilula); padding: 3px 7px; font-size: var(--t-micro); font-weight: 800; text-transform: uppercase; }
.finance-status.status-pago { background: var(--green-100); color: var(--green-600); }.finance-status.status-parcial { background: var(--blue-100); color: var(--blue-600); }.finance-status.status-pendente { background: var(--amber-100); color: var(--amber-600); }.finance-status.status-vencido { background: var(--red-100); color: var(--red-700); }
.multi-currency { color: var(--ink-300); font-size: var(--t-apoio); }
.report-actions { display: flex; gap: 8px; }
.report-filter-panel { margin-bottom: 18px; }
.report-filters { display: grid; grid-template-columns: repeat(4, minmax(150px,1fr)); gap: 13px; padding: 0 22px 22px; }
.report-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin-bottom: 18px; }
.report-summary article { display: flex; flex-direction: column; gap: 6px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; padding: var(--e-4) 20px; box-shadow: var(--shadow-sm); }
.report-summary span { color: var(--ink-500); font-size: var(--t-micro); font-weight: 700; }.report-summary strong { color: var(--red-700); font: 800 clamp(17px, 1.6vw, 23px) 'Sora',sans-serif; white-space: nowrap; font-variant-numeric: tabular-nums; }
.report-summary small { color: var(--ink-500); font-size: var(--t-apoio); }
.report-filter-footer,.report-result-head,.report-table-tools,.report-pagination { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.report-filter-footer { border-top:1px solid var(--line); padding:14px 22px 18px; }
.period-presets { display:flex; flex-wrap:wrap; gap:7px; }.period-presets button { border:1px solid var(--line); border-radius:var(--r-pilula); background:#fff; padding:7px 11px; color:var(--ink-700); cursor:pointer; font:700 10px inherit; }.period-presets button:hover { border-color:var(--red-500); color:var(--red-600); }
.compare-toggle { color:var(--ink-500); font-size:var(--t-micro); font-weight:700; }
.report-insights { display:grid; grid-template-columns:1fr 1fr 1fr; gap:14px; margin-bottom:18px; }.report-insights .panel { margin:0; min-width:0; }
.report-donut-wrap { display:flex; align-items:center; gap:20px; padding:12px 22px 22px; }.report-donut { display:grid; place-items:center; width:118px; height:118px; flex:0 0 auto; border-radius:50%; background:conic-gradient(var(--red-500) 0 25%,var(--amber-600) 25% 50%,var(--green-600) 50% 75%,var(--ink-300) 75%); position:relative; }.report-donut::after { content:''; position:absolute; width:72px; height:72px; border-radius:50%; background:#fff; }.report-donut span { z-index:1; font:800 22px 'Sora',sans-serif; }.report-legend { display:grid; gap:8px; width:100%; }.report-legend div { display:flex; justify-content:space-between; gap:8px; font-size:var(--t-apoio); }.report-legend i { display:inline-block; width:8px; height:8px; margin-right:6px; border-radius:50%; }
.report-alerts,.report-ranking { display:grid; gap:8px; padding:10px 18px 20px; }.report-alert { display:flex; justify-content:space-between; gap:8px; border-radius:var(--r-pequeno); background:var(--amber-100); color:var(--ink-700); padding:10px; font-size:var(--t-apoio); }.report-alert.danger { background:var(--red-100); }.report-alert strong { color:var(--red-700); }.report-rank-row { display:grid; grid-template-columns:minmax(90px,1fr) 2fr 25px; align-items:center; gap:8px; font-size:var(--t-apoio); }.report-rank-bar { height:7px; overflow:hidden; border-radius:var(--r-pilula); background:var(--paper); }.report-rank-bar i { display:block; height:100%; border-radius:var(--r-pilula); background:var(--red-500); }
.report-table-tools { justify-content:flex-end; }.report-table-tools label { display:flex; align-items:center; gap:6px; color:var(--ink-500); font-size:var(--t-apoio); }.report-table-tools .form-control { min-width:140px; padding:8px; }.column-picker { position:relative; }.column-picker summary { border:1px solid var(--line); border-radius:var(--r-pequeno); padding:8px 11px; cursor:pointer; font-size:var(--t-apoio); font-weight:700; }.column-picker>div { position:absolute; right:0; z-index:5; display:grid; gap:7px; min-width:190px; margin-top:5px; border:1px solid var(--line); border-radius:var(--radius); background:#fff; box-shadow:var(--shadow-md); padding:12px; font-size:var(--t-apoio); }.report-pagination { padding:14px 20px; border-top:1px solid var(--line); color:var(--ink-500); font-size:var(--t-apoio); }.report-pagination div { display:flex; gap:6px; }
.report-result { margin-bottom: 30px; }
.settings-page .page-head h1 { color:var(--brand-navy-dark); }.settings-layout { display:grid; grid-template-columns:220px minmax(0,1fr); gap:20px; align-items:start; }.settings-nav { display:grid; gap:5px; position:sticky; top:20px; border:1px solid var(--line); border-radius:var(--radius); background:#fff; box-shadow:var(--shadow-sm); padding:var(--e-1); }.settings-nav button { position:relative; border:0; border-radius:var(--r-pequeno); background:transparent; color:var(--ink-700); padding:11px 13px 11px 17px; text-align:left; cursor:pointer; font-size:var(--t-corpo); font-weight:700; }.settings-nav button:hover { background:var(--brand-blue-soft); color:var(--brand-navy); }.settings-nav button.active { background:var(--brand-navy); color:#fff; box-shadow:0 5px 14px rgba(18,59,115,.18); }.settings-nav button.active::before { content:''; position:absolute; left:7px; top:50%; width:4px; height:4px; border-radius:50%; background:#fff; transform:translateY(-50%); }.settings-section { display:none; margin:0 0 20px; border-color:var(--line); border-radius:var(--radius); box-shadow:var(--shadow-sm); }.settings-section.active { display:block; }.settings-section .panel-head { padding:20px var(--e-4) var(--e-3); }.settings-section .panel-head p { max-width:590px; }.settings-form { display:grid; grid-template-columns:1fr 1fr; gap:var(--e-3); padding:4px var(--e-4) var(--e-4); }.settings-form .span-2 { grid-column:span 2; }.settings-page .form-control { background:#fff; }.settings-page .form-group label { margin-bottom:7px; color:var(--ink-700); }.settings-profile { display:flex; align-items:center; gap:13px; margin:0 24px 20px; border-radius:var(--radius); background:var(--brand-blue-soft); padding:14px; }.settings-avatar { display:grid; place-items:center; width:48px; height:48px; border-radius:50%; background:var(--brand-navy); color:#fff; font:800 17px 'Sora',sans-serif; }.settings-profile div:last-child { display:grid; gap:4px; }.settings-profile span { color:var(--ink-500); font-size:var(--t-apoio); }.settings-switches { display:grid; padding:0 24px 24px; }.settings-switches label { display:flex; align-items:center; justify-content:space-between; gap:20px; border-bottom:1px solid var(--line); padding:16px 0; }.settings-switches label:last-child { border:0; }.settings-switches span { display:grid; gap:4px; }.settings-switches small { color:var(--ink-500); }.settings-switches input { width:18px; height:18px; accent-color:var(--brand-navy); }.settings-data-actions { display:grid; gap:0; padding:0 24px; }.settings-data-actions article { display:flex; align-items:center; justify-content:space-between; gap:18px; border-bottom:1px solid var(--line); padding:18px 0; }.settings-data-actions p,.settings-security-note p { margin:5px 0 0; color:var(--ink-500); font-size:var(--t-micro); }.file-button { cursor:pointer; white-space:nowrap; }.file-button input { display:none; }.btn-secondary.danger { color:var(--red-600); border-color:var(--red-300); }.settings-security-note { margin:22px 24px 24px; border-radius:var(--radius); background:var(--amber-100); color:var(--amber-600); padding:14px; }.settings-security-note p { color:var(--ink-700); line-height:1.5; }

.settings-inline-form { display:grid; grid-template-columns:1fr 1fr 160px auto; gap:8px; margin:0 22px 14px; border-radius:var(--radius); background:var(--paper); padding:12px; }.settings-users { display:grid; padding:0 22px 10px; }.settings-users article { display:grid; grid-template-columns:auto 1fr auto auto; align-items:center; gap:12px; border-bottom:1px solid var(--line); padding:13px 0; }.settings-users article>div:nth-child(2) { display:grid; gap:4px; }.settings-users small { color:var(--ink-500); }.settings-users label { color:var(--ink-500); font-size:var(--t-apoio); }.settings-user-avatar { display:grid; place-items:center; width:34px; height:34px; border-radius:50%; background:var(--red-100); color:var(--red-700); font-weight:800; }.settings-subhead { display:grid; gap:4px; border-top:1px solid var(--line); margin:0 22px; padding:18px 0 12px; }.settings-subhead small { color:var(--ink-500); }.settings-stage-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; padding:0 22px 24px; }.settings-stage-grid label { display:flex; align-items:center; gap:9px; border:1px solid var(--line); border-radius:var(--r-pequeno); padding:10px; font-size:var(--t-micro); }.settings-stage-grid input { accent-color:var(--red-600); }

.field-help { display:block; margin-top:7px; color:var(--ink-500); font-size:var(--t-apoio); line-height:1.4; }.role-guide { margin:0 24px 24px; border:1px solid #dce5f1; border-radius:var(--radius); background:var(--brand-blue-soft); padding:15px; }.role-guide>strong { display:block; margin-bottom:10px; color:var(--brand-navy-dark); font-size:var(--t-micro); }.role-guide>div { display:flex; flex-wrap:wrap; gap:7px; }.role-guide span { border-radius:var(--r-pilula); background:#fff; color:var(--brand-navy); padding:6px 9px; font-size:var(--t-micro); font-weight:700; }

.portal-message-form { display:grid; gap:8px; margin-top:18px; border-top:1px solid var(--line); padding-top:16px; }.portal-message-form>label { font-size:var(--t-micro); font-weight:700; }.portal-message-form>div { display:grid; grid-template-columns:1fr auto; gap:8px; align-items:end; }.portal-message-form textarea { resize:vertical; }.portal-message-form small { color:var(--ink-500); font-size:var(--t-micro); }

.process-overdue { display:block; width:max-content; margin-top:4px; border-radius:var(--r-pilula); background:var(--red-100); color:var(--red-700); padding:3px 6px; font-size:var(--t-micro); font-weight:800; }

.modo-documentos-pendentes { border-color:#e9d59b; box-shadow:0 8px 24px rgba(180,116,14,.08); }.modo-documentos-pendentes #etapasDescricao { display:inline-flex; border-radius:var(--r-pilula); background:var(--amber-100); color:var(--amber-600); padding:7px 11px; font-weight:700; }.modo-documentos-pendentes .etapas-dashboard { margin-top:16px; }

.process-inactivity-alert { display:flex; align-items:center; gap:12px; max-width:620px; margin-top:15px; border:1px solid #efb1b4; border-left:5px solid var(--red-600); border-radius:var(--radius); background:var(--red-100); color:var(--red-700); padding:12px 14px; }.process-inactivity-alert[hidden] { display:none; }.process-inactivity-alert strong { white-space:nowrap; font-size:var(--t-micro); }.process-inactivity-alert span { color:var(--ink-700); font-size:var(--t-apoio); }.modo-processo-concluido { border-color:#b9dfcb; box-shadow:0 8px 24px rgba(30,142,90,.08); }.modo-processo-concluido #etapasDescricao { display:inline-flex; border-radius:var(--r-pilula); background:var(--green-100); color:var(--green-600); padding:7px 11px; font-weight:700; }

.documento-updated,.documento-client-updated { display:block; width:max-content; max-width:210px; margin-top:6px; border-radius:var(--r-pilula); background:var(--brand-blue-soft); color:var(--brand-navy); padding:4px 7px; font-size:var(--t-micro); font-weight:700; }.documento-client-updated { background:var(--green-100); color:var(--green-600); }.portal-documento-status small { display:block; margin-top:5px; color:var(--ink-500); font-size:var(--t-micro); }

.etapa-documento-updated { display:block; width:max-content; margin:7px 0 0 27px; border-radius:var(--r-pilula); background:var(--brand-blue-soft); color:var(--brand-navy); padding:4px 7px; font-size:var(--t-micro); font-weight:700; }

.status-reason { display:grid; gap:7px; max-width:620px; margin-top:14px; }.status-reason label { color:var(--red-700); font-size:var(--t-apoio); font-weight:800; }.prazo-atrasado { color:var(--red-700)!important; font-weight:800; }.prazo-proximo { color:var(--amber-600)!important; font-weight:800; }.prazo-ok { color:var(--green-600)!important; }.process-history-section { padding:0!important; }.process-history-section summary { position:relative; cursor:pointer; list-style:none; padding-right:58px; }.process-history-section summary::-webkit-details-marker { display:none; }.process-history-section summary::after { content:'Mostrar'; position:absolute; right:22px; top:50%; color:var(--brand-navy); font-size:var(--t-apoio); font-weight:800; transform:translateY(-50%); }.process-history-section[open] summary::after { content:'Ocultar'; }.process-history-section[open] summary { border-bottom:1px solid var(--line); }.process-history { display:grid; padding:0 24px 24px; }.process-history article { display:grid; grid-template-columns:14px 1fr; gap:10px; padding:12px 0; border-bottom:1px solid var(--line); }.history-dot { width:9px; height:9px; margin-top:3px; border-radius:50%; background:var(--brand-navy); box-shadow:0 0 0 4px var(--brand-blue-soft); }.process-history article>div:last-child { display:grid; gap:4px; }.process-history p { margin:0; color:var(--ink-500); font-size:var(--t-apoio); }.process-history small { color:var(--ink-500); font-size:var(--t-micro); }.documento-status { display:block; width:100%; margin-top:6px; }.portal-doc-stage { display:inline-flex; margin-top:7px; border-radius:var(--r-pilula); background:var(--brand-blue-soft); color:var(--brand-navy); padding:4px 7px; font-size:var(--t-micro); font-weight:800; }.quick-pending { color:var(--amber-600); font-weight:800; }.quick-done { color:var(--green-600); font-weight:800; }
.settings-log-toolbar { padding:0 24px 18px; }.settings-log-list { display:grid; gap:12px; padding:0 24px 24px; }.settings-log-group { overflow:hidden; border:1px solid var(--line); border-radius:var(--radius); background:#fff; }.settings-log-group>summary { display:flex; align-items:center; justify-content:space-between; gap:16px; cursor:pointer; list-style:none; padding:15px 17px; }.settings-log-group>summary::-webkit-details-marker { display:none; }.settings-log-group>summary div { display:grid; gap:4px; }.settings-log-group>summary span,.settings-log-group>summary small { color:var(--ink-500); font-size:var(--t-micro); }.settings-log-group[open]>summary { border-bottom:1px solid var(--line); background:var(--brand-blue-soft); }.settings-log-items { display:grid; padding:4px 17px 12px; }.settings-log-items article { display:grid; grid-template-columns:10px 1fr; gap:11px; border-bottom:1px solid var(--line); padding:13px 0; }.settings-log-items article:last-child { border-bottom:0; }.settings-log-items article>i { width:8px; height:8px; margin-top:4px; border-radius:50%; background:var(--brand-navy); }.settings-log-items article>div { display:grid; gap:4px; }.settings-log-items p { margin:0; color:var(--ink-500); font-size:var(--t-apoio); }.settings-log-items small { color:var(--ink-500); font-size:var(--t-micro); }.settings-log-empty { color:var(--ink-500); padding:20px; text-align:center; }

.btn-small { display:inline-flex; align-items:center; justify-content:center; min-height:32px; border:1px solid #d8dee7; border-radius:var(--r-pequeno); background:#fff; color:var(--ink-700); padding:7px 10px; cursor:pointer; font-size:var(--t-micro); font-weight:800; line-height:1; white-space:nowrap; transition:.15s ease; }.btn-small:hover { border-color:var(--brand-navy); background:var(--brand-blue-soft); color:var(--brand-navy); }.row-actions { display:flex; align-items:center; flex-wrap:wrap; gap:6px; }.btn-view-company { border-color:#bfd0e4; color:var(--brand-navy); }.btn-toggle-cliente { color:var(--red-700); }

.dashboard-quick-actions { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin:-8px 0 20px; }
.dashboard-quick-actions a { display:flex; align-items:center; gap:10px; border:1px solid #dfe5ec; border-radius:var(--radius); background:#fff; padding:11px 13px; box-shadow:var(--shadow-sm); transition:.15s ease; }
.dashboard-quick-actions a:hover { border-color:#b9cbe0; background:var(--brand-blue-soft); transform:translateY(-1px); }
.dashboard-quick-actions>a>span { display:grid; place-items:center; width:30px; height:30px; flex:0 0 auto; border-radius:var(--r-pequeno); background:var(--brand-blue-soft); color:var(--brand-navy); font-size:var(--t-forte); font-weight:800; }
.dashboard-quick-actions div { display:grid; gap:4px; }.dashboard-quick-actions strong { font-size:var(--t-forte); }.dashboard-quick-actions small { color:var(--ink-500); font-size:var(--t-micro); }
.dashboard-work-grid { display:grid; grid-template-columns:1.15fr .85fr; gap:16px; margin-bottom:16px; }
.dashboard-work-grid .panel,.dashboard-insights-grid .panel { margin:0; }.panel-head p { margin:5px 0 0; color:var(--ink-500); font-size:var(--t-apoio); }
.dashboard-priorities { display:grid; grid-template-columns:1fr 1fr; gap:8px; padding:0 18px 18px; }
.priority-item { display:grid; grid-template-columns:8px 1fr auto; align-items:center; gap:9px; border:1px solid var(--line); border-radius:var(--radius); padding:10px; }
.priority-item>span { width:8px; height:8px; border-radius:50%; background:var(--blue-600); }.priority-item.danger>span { background:var(--red-600); }.priority-item.warning>span { background:var(--amber-600); }.priority-item.success>span { background:var(--green-600); }
.priority-item div { display:grid; gap:4px; }.priority-item strong { font-size:var(--t-forte); }.priority-item small { color:var(--ink-500); font-size:var(--t-micro); }.priority-item>b { color:var(--brand-navy); font:800 17px 'Sora',sans-serif; }
.dashboard-alerts { display:grid; gap:7px; padding:0 18px 18px; }
.dashboard-insights-grid { display:grid; grid-template-columns:1.2fr .8fr 1fr; gap:16px; margin-top:16px; }
.dashboard-activity { display:grid; padding:0 18px 18px; }.dashboard-activity a { display:grid; grid-template-columns:8px 1fr auto; align-items:center; gap:9px; border-bottom:1px solid var(--line); padding:9px 0; }.dashboard-activity i { width:7px; height:7px; border-radius:50%; background:var(--brand-navy); }.dashboard-activity div { display:grid; gap:4px; }.dashboard-activity strong { font-size:var(--t-forte); }.dashboard-activity small,.dashboard-activity time { color:var(--ink-500); font-size:var(--t-micro); }
.dashboard-team { display:grid; gap:11px; padding:0 18px 20px; }.dashboard-team>div { display:grid; grid-template-columns:minmax(75px,1fr) 1.3fr 20px; align-items:center; gap:8px; font-size:var(--t-micro); }.dashboard-team>div>div { height:7px; overflow:hidden; border-radius:var(--r-pilula); background:var(--paper); }.dashboard-team i { display:block; height:100%; border-radius:var(--r-pilula); background:var(--brand-navy); }
.dashboard-month-chart { display:flex; align-items:flex-end; justify-content:space-around; gap:7px; height:150px; padding:10px 18px 18px; }.dashboard-month-chart>div { display:grid; justify-items:center; gap:6px; height:100%; flex:1; }.month-bars { display:flex; align-items:flex-end; justify-content:center; gap:3px; width:100%; height:115px; border-bottom:1px solid var(--line); }.month-bars i,.month-bars b { display:block; width:11px; border-radius:4px 4px 0 0; background:var(--brand-navy); }.month-bars b { background:var(--green-600); }.dashboard-month-chart small { color:var(--ink-500); font-size:var(--t-micro); text-transform:capitalize; }.dashboard-empty { padding:18px; color:var(--ink-500); text-align:center; font-size:var(--t-micro); }

/* Evita que grids com colunas 1fr estourem a largura da tela com texto/valores longos */
.stat-grid > *, .panels-row > *, .form-grid > *, .clientes-resumo > *, .quick-process-grid > *,
.empresa-detail-stats > *, .empresa-detail-grid > *, .finance-grid > *, .finance-insights > *,
.report-summary > *, .report-insights > *, .settings-form > *, .settings-stage-grid > *,
.report-filters > *, .dashboard-quick-actions > *, .dashboard-work-grid > *, .dashboard-priorities > *,
.dashboard-insights-grid > *, .dashboard-team > * {
  min-width: 0;
}
select.mini, .form-control { min-width: 0; }
.finance-card strong, .stat-num, .clientes-resumo strong, .report-summary strong, .empresa-detail-stats strong {
  overflow-wrap: break-word;
}

/* Tabela de etapas: colunas viram cards empilhados no mobile, sem rolagem lateral escondendo campos */
@media (max-width: 760px) {
  .etapas-table thead { display: none; }
  .etapas-table, .etapas-table tbody, .etapas-table tr, .etapas-table td { display: block; width: 100%; min-width: 0; }
  .etapas-table tr.etapa-row {
    margin-bottom: 12px; border: 1px solid var(--line); border-left: 3px solid transparent;
    border-radius: var(--radius); padding: 12px 14px; background: var(--paper);
  }
  .etapa-row.etapa-concluido { border-left-color: #22a06b; background: #f4fbf7; }
  .etapa-row.etapa-pendente { border-left-color: #a1a7b3; }
  .etapa-row.etapa-em_andamento { border-left-color: var(--amber-600); background: #fffbf2; }
  .etapa-row.etapa-atrasada { border-left-color: var(--red-600); background: #fff7f7; }
  .etapas-table td { padding: 7px 0; border-bottom: none; background: transparent !important; }
  .etapas-table td[data-label]::before {
    content: attr(data-label); display: block; margin-bottom: 5px; color: var(--ink-500);
    font-size: var(--t-apoio); font-weight: 800; text-transform: uppercase; letter-spacing: .06em;
  }
  .documento-row { margin: 0 0 10px; border: 1px solid var(--line); border-radius: var(--r-pequeno); padding: 10px 12px; background: var(--paper); }
  .documento-row.documento-concluido { border-left:3px solid #22a06b; background:#f4fbf7; }
  .documento-row td:first-child { padding-left: 0; }
}

/* A barra das cinco partes: cola no topo e serve de atalho para cada parte */
.processo-progresso {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px;
  position: sticky; top: 0; z-index: 30;
  background: var(--card); border-bottom: 1px solid var(--line);
  box-shadow: 0 6px 16px -12px rgba(9,41,79,.5);
}
/* A barra colada tapava o titulo da parte quando se descia ate ela.
   Este recuo faz o navegador parar antes, com o titulo a vista. */
.detail-section[id^="sec-"] { scroll-margin-top: 92px; }
.progresso-partes { display: flex; flex-wrap: wrap; gap: 8px; }
.progresso-parte { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); border-radius: var(--r-pilula); background: #fff; padding: 6px 12px; font-size: var(--t-apoio); font-weight: 700; color: var(--ink-500); cursor: pointer; transition: var(--transicao); }
.progresso-parte:hover { border-color: var(--brand-navy); color: var(--brand-navy); }
.progresso-parte:focus-visible { outline: 2px solid var(--brand-navy); outline-offset: 2px; }
/* Onde estou agora */
.progresso-parte-aqui { border-color: var(--brand-navy); box-shadow: 0 0 0 2px var(--brand-blue-soft); }
/* Parte que a situacao do processo escondeu: clicar abre */
.progresso-parte-oculta { border-style: dashed; opacity: .62; }
.progresso-parte-oculta:hover { opacity: 1; }
/* Um pisca-pisca curto para o olho achar onde caiu */
@keyframes parte-piscou { from { background: var(--brand-blue-soft); } to { background: transparent; } }
.parte-piscou { animation: parte-piscou 1.2s ease-out; }
@media (prefers-reduced-motion: reduce) { .parte-piscou { animation: none; } }
.progresso-parte span { display: inline-flex; width: 15px; height: 15px; align-items: center; justify-content: center; font-size: var(--t-micro); line-height: 1; }
.progresso-parte-done { border-color: #b9dfcb; background: var(--green-100); color: var(--green-600); }
.progresso-parte-partial { border-color: #f0d9a6; background: var(--amber-100); color: var(--amber-600); }
.parte-status-badge .badge { margin-left: 8px; vertical-align: middle; }
.historico-dia { margin-bottom: 22px; }.historico-dia:last-child { margin-bottom: 0; }.historico-dia h4 { margin: 0 0 8px; padding-bottom: 6px; border-bottom: 1px solid var(--line); font-size: var(--t-micro); font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-500); }.historico-dia .process-history { padding: 0; }

.toast {
  position: fixed; right: 20px; bottom: 20px; background: var(--ink-900); color: #fff;
  padding: 12px 16px; border-radius: var(--radius); box-shadow: var(--shadow-md);
  opacity: 0; transform: translateY(8px); transition: 0.2s ease; z-index: 100; font-size: var(--t-corpo);
}
.toast.show { opacity: 1; transform: none; }
.toast.error { background: var(--red-700); }

@media (max-width: 1180px) {
  .stat-grid, .stat-grid.cols-4 { grid-template-columns: repeat(2, 1fr); }
  .panels-row { grid-template-columns: 1fr; }
  .clientes-resumo, .report-filters, .report-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .empresa-detail-stats { grid-template-columns: repeat(auto-fit, minmax(122px, 1fr)); }
}
@media (max-width: 1050px) {
  .dashboard-quick-actions { grid-template-columns:1fr 1fr; }
  .dashboard-work-grid,.dashboard-insights-grid { grid-template-columns:1fr; }
}
@media (max-width: 880px) {
  .shell { grid-template-columns: 1fr; }
  .sidebar { position: fixed; left: 0; top: 0; width: 260px; transform: translateX(-100%); transition: transform 0.22s ease; }
  .sidebar.open { transform: translateX(0); }
  .hamburger { display: flex; }
  .topbar, .content, .process-detail-header, .detail-section { padding-left: 20px; padding-right: 20px; margin-left: 0; margin-right: 0; }
  .content { padding-bottom: 40px; }
  .search-wrap { display: none; }
  .page-head { flex-direction: column; }
  .form-grid { grid-template-columns: 1fr; }
  .etapas-dashboard { align-items: stretch; flex-direction: column; }
  .progresso-card { max-width: none; }
  .clientes-resumo { grid-template-columns: 1fr 1fr; }
  .clientes-toolbar { align-items: stretch; flex-direction: column; }
  .clientes-search { max-width: none; }
  .empresa-filters { justify-content:stretch; }.empresa-filters>* { flex:1 1 180px; }.empresa-detail-stats { grid-template-columns:1fr 1fr; }.empresa-detail-grid { grid-template-columns:1fr; }
  .portal-login { grid-template-columns: 1fr; gap: 30px; min-height: auto; }
  .portal-login-copy h1 { font-size: 42px; }
  .portal-welcome { align-items: flex-start; flex-direction: column; }
  .portal-etapas { grid-template-columns: 1fr; }
  .portal-documento { align-items: stretch; grid-template-columns: 1fr; }
.portal-documento-status { text-align: left; }
  .finance-grid { grid-template-columns: 1fr 1fr; }
  .finance-toolbar, .finance-filters { align-items: stretch; flex-direction: column; }
  .finance-filters .form-control { min-width: 0; }
  .finance-insights { grid-template-columns: 1fr; }
  .finance-page-actions { justify-content: flex-start; }
  .etapa-duas-datas { min-width: 250px; }
  .report-filters { grid-template-columns: 1fr 1fr; }
  .report-summary { grid-template-columns: 1fr 1fr; }
  .report-insights { grid-template-columns:1fr; }
  .settings-page .page-head { align-items:center; flex-direction:row; }.settings-layout { grid-template-columns:1fr; }.settings-nav { display:flex; gap:6px; overflow-x:auto; position:static; padding:7px; scrollbar-width:thin; }.settings-nav button { flex:0 0 auto; padding:10px 14px; text-align:center; white-space:nowrap; }.settings-nav button.active::before { display:none; }
  .report-filter-footer,.report-result-head { align-items:stretch; flex-direction:column; }
}

@media print {
  .sidebar,.topbar,.page-head .finance-page-actions,.page-head .report-actions,.report-filter-panel,.finance-filters,.btn-small,.modal-overlay { display:none!important; }
  .shell { display:block; }.content { padding:0; }.panel,.finance-card { box-shadow:none; }
}
@media (max-width: 560px) {
  .dashboard-quick-actions,.dashboard-priorities { grid-template-columns:1fr; }
  .dashboard-activity a { grid-template-columns:8px 1fr; }.dashboard-activity time { grid-column:2; }
  .settings-page .page-head { align-items:stretch; flex-direction:column; padding:18px; }.settings-page .page-head .btn-primary { width:100%; }
  .stat-grid { grid-template-columns: 1fr 1fr; }
  .user-chip .name, .user-chip .role { display: none; }
  table { min-width: 720px; }
  .panel-scroll { overflow-x: auto; }
  .report-summary { grid-template-columns:1fr; }
  .report-table-tools { align-items:stretch; flex-direction:column; width:100%; }
  .settings-form { grid-template-columns:1fr; }.settings-form .span-2 { grid-column:auto; }.settings-data-actions article { align-items:flex-start; flex-direction:column; }
  .timeline-item { grid-template-columns: 1fr; }
}
@media (max-width:560px) { .processos-page table { display:block; min-width:0; width:100%; }.processos-page thead { display:none; }.processos-page tbody,.processos-page tr,.processos-page td { display:block; width:100%; }.processos-page tbody { padding:10px; }.processos-page tr { margin-bottom:12px; border:1px solid var(--line); border-radius:var(--radius); background:#fff; box-shadow:var(--shadow-sm); padding:10px; }.processos-page td { display:grid; grid-template-columns:100px 1fr; gap:8px; border:0; padding:7px 5px; text-align:left; }.processos-page td::before { content:attr(data-label); color:var(--ink-500); font-size:var(--t-micro); font-weight:800; text-transform:uppercase; }.processos-page td[data-label="Ações"] .table-actions { justify-content:flex-start; }.processos-page .panel-scroll { overflow:visible; } }
@media (max-width:900px) { .empresas-page table { display:block; min-width:0; width:100%; }.empresas-page thead { display:none; }.empresas-page tbody,.empresas-page tr,.empresas-page td { display:block; width:100%; }.empresas-page tbody { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; padding:12px; }.empresas-page tr { display:grid; grid-template-columns:1fr 1fr; gap:0 12px; border:1px solid #dfe5ec; border-radius:var(--radius); background:#fff; box-shadow:0 6px 20px rgba(9,41,79,.06); padding:15px; }.empresas-page td { display:grid; gap:5px; border:0; padding:8px 0; overflow-wrap:anywhere; }.empresas-page td::before { content:attr(data-label); color:var(--ink-500); font-size:var(--t-micro); font-weight:800; letter-spacing:.08em; text-transform:uppercase; }.empresas-page td[data-label="Empresa"],.empresas-page td[data-label="Ações"] { grid-column:1/-1; }.empresas-page td[data-label="Empresa"] { border-bottom:1px solid var(--line); padding-bottom:12px; }.empresas-page td[data-label="Ações"] { border-top:1px solid var(--line); margin-top:6px; padding-top:12px; }.empresas-page .row-actions { display:grid; grid-template-columns:1fr 1fr 1fr; }.empresas-page .row-actions .btn-small { width:100%; }.empresas-page .panel-scroll { overflow:visible; } }
@media (max-width:620px) { .empresas-page tbody { grid-template-columns:1fr; }.empresas-page .row-actions { grid-template-columns:1fr 1fr; }.empresas-page .btn-view-company { grid-column:1/-1; } }
:focus-visible { outline: 2px solid var(--red-500); outline-offset: 2px; }

/* =====================================================================
   Realce visual e correções de layout
   ===================================================================== */

:root {
  --grad-brand: linear-gradient(135deg, var(--brand-navy) 0%, #1c56a8 55%, var(--brand-navy-dark) 100%);
  --grad-red: linear-gradient(135deg, var(--red-500) 0%, var(--red-700) 100%);
  --shadow-lift: 0 18px 40px -18px rgba(18, 59, 115, .38);
  --shadow-focus: 0 0 0 4px rgba(43, 95, 173, .16);
  --transicao: 180ms cubic-bezier(.22, .61, .36, 1);
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* ——— Cards de estatística: cor de verdade e reação ao passar o mouse ——— */
.stat-card {
  position: relative;
  overflow: hidden;
  transition: transform var(--transicao), box-shadow var(--transicao), border-color var(--transicao);
}
.stat-card::after {
  content: '';
  position: absolute;
  inset: auto -30% -55% auto;
  width: 150px; height: 150px;
  border-radius: 50%;
  background: var(--stat-bg, var(--red-50));
  opacity: .5;
  pointer-events: none;
}
.stat-card > * { position: relative; z-index: 1; }
.stat-card:hover {
  transform: translateY(-3px);
  border-color: var(--stat-color, var(--red-500));
  box-shadow: var(--shadow-lift);
}
.stat-card .stat-icon {
  background: var(--stat-bg, var(--red-50));
  color: var(--stat-color, var(--red-500));
  transition: transform var(--transicao);
}
.stat-card:hover .stat-icon { transform: scale(1.08) rotate(-4deg); }
.stat-num { font-variant-numeric: tabular-nums; }

/* ——— Painéis ——— */
.panel { transition: box-shadow var(--transicao), transform var(--transicao); }
.panel:hover { box-shadow: var(--shadow-md); }
.panel-head h2 { display: flex; align-items: center; gap: 9px; }
.panel-head h2::before {
  content: '';
  width: 4px; height: 17px;
  border-radius: var(--r-pequeno);
  background: var(--grad-red);
  flex-shrink: 0;
}

/* ——— Ações rápidas ——— */
.dashboard-quick-actions a {
  transition: transform var(--transicao), box-shadow var(--transicao), border-color var(--transicao);
}
.dashboard-quick-actions a:hover {
  transform: translateY(-2px);
  border-color: var(--brand-navy);
  box-shadow: var(--shadow-lift);
}

/* ——— Menu lateral ——— */
.nav-item { position: relative; }
.nav-item::before {
  content: '';
  position: absolute;
  left: 0; top: 50%;
  width: 3px; height: 0;
  border-radius: 0 3px 3px 0;
  background: var(--red-500);
  transform: translateY(-50%);
  transition: height var(--transicao);
}
.nav-item:hover::before { height: 55%; }
.nav-item.active::before { height: 0; }

/* ——— Botões ——— */
.btn-primary { background: var(--grad-brand); border: none; transition: transform var(--transicao), box-shadow var(--transicao), filter var(--transicao); }
.btn-primary:hover:not(:disabled) { transform: translateY(-1px); box-shadow: var(--shadow-lift); filter: saturate(1.15); }
.btn-primary:disabled { opacity: .6; cursor: progress; }
.btn-secondary { transition: border-color var(--transicao), color var(--transicao), background var(--transicao); }
.form-control:focus-visible, .btn-primary:focus-visible, .btn-secondary:focus-visible, .portal-tab:focus-visible {
  outline: 2px solid var(--brand-navy);
  outline-offset: 2px;
  box-shadow: var(--shadow-focus);
}
.form-hint { display: block; margin-top: 6px; color: var(--ink-500); font-size: var(--t-apoio); line-height: 1.45; }

/* ——— Gráficos ——— */
.mini-chart .bar {
  background: linear-gradient(180deg, var(--red-300), var(--red-100));
  transition: filter var(--transicao);
}
.mini-chart .bar:hover { filter: brightness(.94); }
.mini-chart .bar.now { background: var(--grad-red); }

.chart-legend { display: flex; gap: 16px; padding: 0 18px 4px; }
.chart-legend span { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-500); font-size: var(--t-apoio); font-weight: 600; }
.chart-legend i { width: 10px; height: 10px; border-radius: var(--r-pequeno); }
.chart-legend .serie-abertos { background: var(--blue-600); }
.chart-legend .serie-concluidos { background: var(--green-600); }

/* O gráfico ganhou uma legenda acima das barras, então a altura fixa saiu do
   contêiner e foi para a linha de barras — senão as barras se esticavam junto
   com o painel mais alto da mesma faixa. */
.dashboard-month-chart { display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; height: auto; padding: 12px 0 0; }
.dashboard-month-chart > .chart-legend { display: flex; height: auto; flex: none; }
.dashboard-month-chart > .month-bars-row {
  display: flex; flex: none;
  align-items: flex-end; justify-content: space-around;
  gap: 7px; height: 150px; padding: 0 18px 18px;
}
.dashboard-month-chart .month-bars-row > div { display: grid; justify-items: center; gap: 6px; height: 100%; flex: 1; }
.month-bars i, .month-bars b { background: var(--blue-600); transition: filter var(--transicao); }
.month-bars b { background: var(--green-600); }
.month-bars i:hover, .month-bars b:hover { filter: brightness(1.12); }

/* ——— Medidor de armazenamento (Configurações) ——— */
.storage-meter { display: grid; gap: 9px; margin-top: 18px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); padding: 18px; }
.storage-meter-head { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 6px; }
.storage-meter-head strong { font-family: 'Sora', sans-serif; font-size: var(--t-forte); }
.storage-meter-head span, .storage-meter small { color: var(--ink-500); font-size: var(--t-apoio); }
.storage-meter-track { height: 8px; border-radius: var(--r-pilula); background: var(--paper); overflow: hidden; }
.storage-meter-track i { display: block; height: 100%; border-radius: var(--r-pilula); background: var(--green-600); transition: width 420ms ease; }
.storage-meter.warning .storage-meter-track i { background: var(--amber-600); }
.storage-meter.danger .storage-meter-track i { background: var(--red-500); }
.storage-meter.danger { border-color: var(--red-300); }

/* =====================================================================
   Portal do Cliente — correção de layout
   ===================================================================== */

.portal-body {
  background:
    radial-gradient(1100px 520px at 88% -12%, rgba(227, 30, 36, .10), transparent 62%),
    radial-gradient(900px 480px at -8% 4%, rgba(18, 59, 115, .10), transparent 60%),
    linear-gradient(160deg, #fdfbfa 0%, #f4f6fa 62%, #f9f0f0 100%);
  background-attachment: fixed;
}

.portal-header {
  position: sticky;
  top: 0;
  z-index: 20;
  /* A faixa branca precisa atravessar a tela inteira, mas o conteúdo continua
     alinhado à mesma coluna de 1180px do restante da página. */
  max-width: none;
  padding: 16px max(28px, calc((100% - 1180px) / 2));
  background: rgba(255, 255, 255, .78);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(233, 229, 224, .8);
}
.portal-brand span { background: var(--grad-red); box-shadow: 0 6px 16px -6px rgba(183, 24, 30, .7); }
.portal-brand strong { font-size: var(--t-forte); }

.portal-main { padding: 40px 28px 72px; }

/* O vazio gigante vinha daqui: min-height fixo de 620px somado a
   align-items:center empurrava o conteúdo para o meio de uma página alta. */
.portal-login {
  grid-template-columns: 1.05fr .95fr;
  align-items: start;
  gap: 56px;
  min-height: 0;
  padding-top: 18px;
  animation: portal-entrada 420ms ease both;
}
.portal-login-copy h1 {
  margin: 12px 0 16px;
  font-size: clamp(30px, 3.4vw, 46px);
  line-height: 1.1;
}
.portal-login-copy p { max-width: 480px; font-size: var(--t-forte); line-height: 1.65; }

.portal-kicker {
  display: inline-block;
  margin-bottom: 4px;
  border-radius: var(--r-pilula);
  background: var(--red-50);
  padding: 5px 11px;
  border: 1px solid var(--red-100);
}

.portal-beneficios { display: grid; gap: 12px; margin: 26px 0 0; padding: 0; list-style: none; max-width: 460px; }
.portal-beneficios li { display: flex; align-items: flex-start; gap: 12px; border: 1px solid var(--line); border-radius: var(--radius); background: rgba(255, 255, 255, .72); padding: 13px 15px; }
.portal-beneficios span { display: grid; place-items: center; flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%; background: var(--green-100); color: var(--green-600); font-size: var(--t-micro); font-weight: 800; }
.portal-beneficios strong { display: block; font-family: 'Sora', sans-serif; font-size: var(--t-corpo); }
.portal-beneficios small { color: var(--ink-500); font-size: var(--t-micro); }

.portal-login-card {
  position: sticky;
  top: 96px;
  border-radius: var(--radius);
  padding: 30px;
  box-shadow: 0 26px 60px -28px rgba(18, 59, 115, .42);
}
.portal-login-card::before {
  content: '';
  display: block;
  height: 3px;
  margin: -30px -30px 22px;
  border-radius: 20px 20px 0 0;
  background: var(--grad-red);
}
.portal-submit { padding: 13px; font-size: var(--t-forte); }
.portal-help { margin-bottom: 0; line-height: 1.5; }

.portal-aviso { margin: 0 0 20px; border-radius: var(--radius); padding: 13px 16px; font-size: var(--t-corpo); font-weight: 600; animation: portal-entrada 240ms ease both; }
.portal-aviso.erro { border: 1px solid var(--red-300); background: var(--red-50); color: var(--red-700); }
.portal-aviso.ok { border: 1px solid #b6e0c9; background: var(--green-100); color: var(--green-600); }

.portal-welcome { margin: 8px 0 30px; }
.portal-welcome h1 { font-size: clamp(26px, 3vw, 34px); }
.portal-resumo { display: flex; gap: 12px; }
.portal-total { border: 1px solid var(--line); flex-direction: column; align-items: flex-start; gap: 2px; min-width: 108px; }
.portal-total strong { font-size: 26px; line-height: 1.1; }

.portal-tab { border-radius: 10px 10px 0 0; transition: color var(--transicao), background var(--transicao); }
.portal-tab:hover { background: rgba(227, 30, 36, .06); color: var(--red-700); }

.portal-processo-card { transition: transform var(--transicao), box-shadow var(--transicao); }
.portal-processo-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.portal-proxima-etapa { display: flex; align-items: center; gap: 9px; margin: 16px 0 0; }
.portal-proxima-etapa span { color: var(--ink-500); font-size: var(--t-apoio); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.portal-proxima-etapa strong { border-radius: var(--r-pilula); background: var(--brand-blue-soft); color: var(--brand-navy); padding: 5px 11px; font-size: var(--t-apoio); }
.portal-etapa { transition: background var(--transicao); }
.portal-etapa.done { background: var(--green-100); }
.portal-documento { transition: transform var(--transicao), box-shadow var(--transicao); }
.portal-documento:hover { transform: translateX(2px); box-shadow: var(--shadow-sm); }

@keyframes portal-entrada {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

@media (max-width: 900px) {
  .portal-login { grid-template-columns: 1fr; gap: 28px; }
  .portal-login-card { position: static; }
  .portal-beneficios { max-width: none; }
  .portal-resumo { width: 100%; }
  .portal-total { flex: 1; }
  .month-bars-row { padding: 0 8px 14px; }
}

/* Painéis da mesma faixa param de esticar até a altura do vizinho mais alto */
.dashboard-insights-grid, .dashboard-work-grid { align-items: start; }
.mini-chart { height: 64px; flex: none; }
.fin-body { display: flex; flex-direction: column; }

/* ---------------------------------------------------------------------
   O atributo `hidden` precisa vencer as regras de display do próprio CSS.
   Sem isto, `.portal-login { display: grid }` derrotava o `hidden` da regra
   padrão do navegador e a tela de login continuava aparecendo empilhada
   acima dos processos depois que o cliente entrava.
   --------------------------------------------------------------------- */
[hidden] { display: none !important; }

/* ---------------------------------------------------------------------
   Portal — documentos agrupados por processo
   --------------------------------------------------------------------- */

.portal-documentos { gap: 22px; }

.portal-doc-grupo {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, .72);
  padding: 6px 6px 8px;
  box-shadow: var(--shadow-sm);
}
.portal-doc-grupo.tem-pendencia { border-color: #ecd7a8; }
.portal-doc-grupo.completo { border-color: #c2e4d2; }

.portal-doc-grupo-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding: 14px 16px 12px;
}
.portal-doc-grupo-head h3 { margin: 3px 0 0; font: 700 16px 'Sora', sans-serif; }

.portal-doc-contagem {
  display: grid;
  justify-items: end;
  gap: 2px;
  border-radius: var(--radius);
  padding: 7px 13px;
  font-size: var(--t-apoio);
  font-weight: 800;
  text-align: right;
}
.portal-doc-contagem small { font-size: var(--t-apoio); font-weight: 600; opacity: .8; }
.portal-doc-contagem.pendente { background: var(--amber-100); color: var(--amber-600); }
.portal-doc-contagem.ok { background: var(--green-100); color: var(--green-600); }

.portal-doc-grupo-lista { display: grid; gap: 10px; }

/* As colunas precisam poder encolher: `1fr` sozinho não desce abaixo do
   conteúdo e um nome de arquivo comprido empurrava o cartão para fora. */
.portal-documento {
  grid-template-columns: minmax(0, 1fr) minmax(0, auto) auto;
  border-radius: var(--radius);
}
.portal-documento-info { min-width: 0; }
.portal-documento-info h3 { overflow-wrap: anywhere; }
.portal-documento-status { min-width: 0; display: grid; justify-items: end; gap: 3px; }
.portal-documento-status .arquivo-link {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--t-micro);
}
.portal-doc-stage { background: var(--paper); color: var(--ink-500); }

@media (max-width: 820px) {
  .portal-doc-grupo-head { align-items: flex-start; }
  .portal-doc-contagem { justify-items: start; text-align: left; }
  .portal-documento-status { justify-items: start; }
}

/* ---------------------------------------------------------------------
   Documentos: escolher o que vai para o Portal do Cliente
   --------------------------------------------------------------------- */

.documentos-resumo-portal {
  display: block;
  margin: 12px 0 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 11px 15px;
  font-size: var(--t-apoio);
  line-height: 1.5;
}
.documentos-resumo-portal.pendente { border-color: #ecd7a8; background: var(--amber-100); color: var(--amber-600); }
.documentos-resumo-portal.ok { border-color: #c2e4d2; background: var(--green-100); color: var(--green-600); }
.documentos-resumo-portal.neutro { background: var(--paper); color: var(--ink-500); }
.documentos-resumo-portal strong { font-weight: 800; }

.documento-solicitar {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: var(--r-pilula);
  background: var(--paper);
  padding: 6px 12px 6px 9px;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--transicao), border-color var(--transicao), color var(--transicao);
}
.documento-solicitar span { font-size: var(--t-apoio); font-weight: 800; letter-spacing: .02em; }
.documento-solicitar input { width: 15px; height: 15px; accent-color: var(--brand-navy); cursor: pointer; margin: 0; }
.documento-solicitar:has(input:checked) {
  border-color: #b9d0ee;
  background: var(--brand-blue-soft);
  color: var(--brand-navy);
}
.documento-solicitar:has(input:focus-visible) { outline: 2px solid var(--brand-navy); outline-offset: 2px; }
.documento-row.nao-solicitado td:first-child strong,
.documento-row.nao-solicitado .documento-nome { opacity: .72; }

.documento-recebido {
  display: grid;
  gap: 3px;
  margin-top: 7px;
  border-left: 3px solid var(--green-600);
  border-radius: 0 8px 8px 0;
  background: var(--green-100);
  padding: 7px 10px;
}
.arquivo-cliente {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--green-600) !important;
  font-size: var(--t-micro);
  font-weight: 700;
}

/* ——— Tela "Arquivos dos clientes" ——— */
.stat-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.page-head-actions { display: flex; gap: 9px; }
#arqTableBody .arquivo-link { display: block; max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; }
#arqTableBody td .cliente-fantasia { display: block; margin-top: 3px; color: var(--ink-500); font-size: var(--t-apoio); }

@media (max-width: 1100px) { .stat-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .stat-grid-4 { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------------
   Prazo por etapa
   --------------------------------------------------------------------- */

.etapa-prazo-wrap { display: grid; gap: 4px; min-width: 150px; }
.etapa-prazo-wrap > label { display: grid; gap: 4px; color: var(--ink-500); font-size: var(--t-micro); font-weight: 800; text-transform: uppercase; }
.etapa-prazo-aviso { font-size: var(--t-apoio); font-weight: 700; }
.etapa-prazo-aviso.atrasada { color: var(--red-700); }
.etapa-prazo-aviso.proxima { color: var(--amber-600); }
.etapa-prazo-aviso.ok { color: var(--green-600); }
.etapa-prazo-aviso.concluido { color: var(--ink-500); font-weight: 600; }
.etapa-prazo-aviso.vazio { color: var(--ink-300); font-weight: 600; }

.etapa-row.prazo-atrasada { border-left-color: var(--red-600); }
.etapa-row.prazo-atrasada td { background: #fff7f7; }
.etapa-row.prazo-proxima { border-left-color: var(--amber-600); }
.etapa-row.prazo-proxima td { background: #fffbf2; }

/* ——— Painel "Etapas travadas" no dashboard ——— */
.dashboard-etapas { display: grid; gap: 2px; padding: 6px 10px 12px; }
.etapa-alerta {
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  border-radius: var(--radius);
  padding: 11px 12px;
  transition: background var(--transicao), transform var(--transicao);
}
.etapa-alerta:hover { background: var(--paper); transform: translateX(2px); }
.etapa-alerta > i { width: 9px; height: 9px; border-radius: 50%; }
.etapa-alerta.atrasada > i { background: var(--red-500); box-shadow: 0 0 0 3px var(--red-50); }
.etapa-alerta.proxima > i { background: var(--amber-600); box-shadow: 0 0 0 3px var(--amber-100); }
.etapa-alerta > div { display: grid; gap: 2px; min-width: 0; }
.etapa-alerta strong { font-family: 'Sora', sans-serif; font-size: var(--t-corpo); }
.etapa-alerta small { color: var(--ink-500); font-size: var(--t-apoio); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.etapa-alerta .etapa-alerta-atual { color: var(--brand-navy); font-weight: 700; }
.etapa-alerta > b { border-radius: var(--r-pilula); padding: 5px 10px; font-size: var(--t-apoio); font-weight: 800; white-space: nowrap; }
.etapa-alerta.atrasada > b { background: var(--red-50); color: var(--red-700); }
.etapa-alerta.proxima > b { background: var(--amber-100); color: var(--amber-600); }

@media (max-width: 900px) { .etapa-prazo-wrap { min-width: 0; } }

/* A coluna de prazo estreitou as demais: garantir largura mínima legível */
.etapas-table .etapa-situacao { min-width: 128px; }
.etapas-table .etapa-responsavel { min-width: 118px; }
.etapa-prazo-wrap { min-width: 132px; }
.etapa-prazo-wrap > input { width: 100%; }

/* Ações e ajuda do modelo de documentos */
.documentos-acoes { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.documentos-acoes small { color: var(--ink-500); font-size: var(--t-apoio); line-height: 1.5; }

/* Editor de modelos de documentos por tipo */
.modelos-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; margin-bottom: 16px; }
.modelo-tipo { display: grid; gap: 6px; }
.modelo-tipo label { font-size: var(--t-micro); font-weight: 800; }
.modelo-tipo textarea { resize: vertical; font-size: var(--t-apoio); line-height: 1.6; }
.modelo-tipo small { color: var(--ink-500); font-size: var(--t-apoio); }

/* Aviso ao cliente */
.aviso-acoes { display: flex; flex-wrap: wrap; gap: 9px; }
.aviso-acoes .btn-secondary, .aviso-acoes .btn-primary { display: inline-flex; align-items: center; }
.aviso-acoes .desativado { opacity: .45; cursor: not-allowed; }
.aviso-contato { margin: 12px 0 0; border-radius: var(--radius); background: var(--brand-blue-soft); color: var(--brand-navy); padding: 10px 13px; font-size: var(--t-apoio); font-weight: 600; }
.aviso-contato.sem-contato { background: var(--amber-100); color: var(--amber-600); }
#avisoTexto { font-size: var(--t-corpo); line-height: 1.6; resize: vertical; }

/* Rubrica do lançamento financeiro */
.finance-rubrica { display: inline-flex; margin-top: 4px; border-radius: var(--r-pilula); background: var(--brand-blue-soft); color: var(--brand-navy); padding: 3px 8px; font-size: var(--t-micro); font-weight: 800; }

/* Grade de rubricas: um campo de valor por rubrica, na ordem da planilha */
.rubricas-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 11px; margin-top: 9px; }
.rubrica-campo { display: grid; gap: 5px; align-content: start; }
.rubrica-campo label { color: var(--ink-700); font-size: var(--t-micro); font-weight: 700; }
.rubrica-campo input { width: 100%; }
.rubrica-campo.preenchida label { color: var(--brand-navy); }
.rubrica-campo.preenchida input { border-color: var(--brand-navy); background: var(--brand-blue-soft); }
.rubricas-total { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-top: 13px; border-top: 1px solid var(--line); padding-top: 11px; font-size: var(--t-corpo); }
.rubricas-total strong { font-family: 'Sora', sans-serif; font-size: var(--t-painel); }
.rubricas-total .vazio { color: var(--ink-500); font-weight: 600; }

/* Fundo de reserva */
.finance-card.finance-fundo strong { color: var(--brand-navy); }
.finance-card.finance-fundo.estourado strong { color: var(--red-700); }

/* ——— Resumo dos cartões e legenda das cores ———
   Título e legenda numa linha só, colados, era o que ficava feio: o texto
   corria direto do "Resumo deste processo" para "Verde representa...". */
.finance-context-note {
  display: flex; flex-direction: column; gap: 3px;
  margin: 0 0 12px;
}
.finance-context-note strong {
  font-size: var(--t-corpo); font-weight: 700; color: var(--ink-700);
}
.finance-context-note span {
  font-size: var(--t-apoio); line-height: 1.45; color: var(--ink-500); max-width: 78ch;
}

/* O cartão principal — o saldo do cliente — puxa o olho primeiro */
.finance-card-principal {
  border-color: var(--brand-navy); box-shadow: var(--shadow-md);
}
.finance-card-principal strong { font-size: 26px; }

/* ——— Filtros progressivos ———
   Os dois filtros do dia a dia ficam à vista; o resto entra num bloco que
   abre e fecha, para a barra não virar uma parede de caixinhas. */
.finance-filters-progressivos { align-items: center; flex-wrap: wrap; }
.finance-more-filters { position: relative; }
.finance-more-filters > summary {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--line); border-radius: var(--radius); background: #fff;
  padding: 9px 14px; color: var(--ink-700); font-size: var(--t-corpo); font-weight: 600;
  cursor: pointer; list-style: none; white-space: nowrap;
  transition: var(--transicao);
}
.finance-more-filters > summary::-webkit-details-marker { display: none; }
.finance-more-filters > summary::after {
  content: '▾'; color: var(--ink-500); font-size: var(--t-micro); transition: transform var(--transicao);
}
.finance-more-filters[open] > summary { border-color: var(--brand-navy); color: var(--brand-navy); }
.finance-more-filters[open] > summary::after { transform: rotate(180deg); }
.finance-more-filters > summary:hover { border-color: var(--brand-navy); }
.finance-more-filters > summary:focus-visible { outline: 2px solid var(--brand-navy); outline-offset: 2px; }
.finance-more-filters > div {
  display: flex; flex-wrap: wrap; gap: 9px;
  margin-top: 9px; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--paper); padding: 12px;
}
.finance-more-filters > div .form-control { min-width: 165px; }

/* "De" e "Até" andam colados ao seu campo, como um par só */
.finance-date-filter { display: inline-flex; align-items: center; gap: 7px; }
.finance-date-filter > span { color: var(--ink-500); font-size: var(--t-apoio); font-weight: 700; }
.finance-date-filter .form-control { min-width: 150px; }

/* A busca é o filtro mais usado: precisa caber o que se digita nela */
.finance-filters-progressivos > #buscaFinanceiro { flex: 1 1 260px; min-width: 240px; }

@media (max-width: 720px) {
  .finance-more-filters { width: 100%; }
  .finance-more-filters > summary { width: 100%; justify-content: space-between; }
  .finance-more-filters > div .form-control { min-width: 0; width: 100%; }
}
.fundo-resumo { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; padding: 16px 20px 4px; }
.fundo-resumo article { display: grid; gap: 3px; border: 1px solid var(--line); border-left-width: 4px; border-radius: var(--radius); padding: 13px 15px; }
.fundo-resumo span { color: var(--ink-500); font-size: var(--t-micro); font-weight: 700; }
.fundo-resumo strong { font-family: 'Sora', sans-serif; font-size: 20px; }
.fundo-resumo .entrada { border-left-color: var(--green-600); }
.fundo-resumo .entrada strong { color: var(--green-600); }
.fundo-resumo .saida { border-left-color: var(--amber-600); }
.fundo-resumo .saida strong { color: var(--amber-600); }
.fundo-resumo .saldo { border-left-color: var(--brand-navy); background: var(--brand-blue-soft); }
.fundo-resumo .saldo strong { color: var(--brand-navy); }
.fundo-resumo .negativo { border-left-color: var(--red-600); background: var(--red-50); }
.fundo-resumo .negativo strong { color: var(--red-700); }
.saldo-negativo { color: var(--red-700); }
#painelFundo .panel-head { align-items: center; }
#fundoProcesso { max-width: 320px; }

/* A fileira de cartões do Financeiro passou a ter 5 itens com o Fundo de
   reserva: deixar a grade se ajustar em vez de forçar 4 colunas. */
.finance-grid { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
@media (max-width: 1240px) { .finance-grid { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); } }

/* Saldo do cliente no processo, dentro do formulário de lançamento */
.saldo-cliente { display: grid; gap: 7px; border: 1px solid #b9d0ee; border-radius: var(--radius); background: var(--brand-blue-soft); padding: 14px 16px; }
.saldo-cliente-linha { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.saldo-cliente-linha span { color: var(--brand-navy); font-size: var(--t-apoio); font-weight: 700; }
.saldo-cliente-linha strong { font-family: 'Sora', sans-serif; font-size: 21px; color: var(--brand-navy); }
.saldo-cliente-linha.depois { border-top: 1px dashed #b9d0ee; padding-top: 7px; }
.saldo-cliente-linha.depois strong { font-size: var(--t-numero); }
.saldo-cliente-linha strong.negativo { color: var(--red-700); }
.saldo-cliente small { color: var(--brand-navy); font-size: var(--t-apoio); opacity: .85; }
.saldo-cliente .vazio { color: var(--ink-500); font-size: var(--t-apoio); }

/* Depósito rápido no fundo */
.fundo-acoes { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.modal-estreito { max-width: 520px; }
/* O campo do fundo é entrada de dinheiro: destacar dos gastos vizinhos */
.rubrica-campo.rubrica-entrada label { color: var(--green-600); }
/* O "+" do reforço, que continua existindo no bloco de edição */
.rubrica-rotulo { display: flex; align-items: center; gap: 6px; min-height: 21px; }
.rubrica-mais {
  display: inline-flex; align-items: center; justify-content: center;
  width: 19px; height: 19px; flex: none; padding: 0;
  border: 1px solid var(--green-600); border-radius: var(--r-pequeno);
  background: var(--green-100); color: var(--green-600);
  font-size: var(--t-forte); font-weight: 800; line-height: 1; cursor: pointer;
  transition: var(--transicao);
}
.rubrica-mais:hover { background: var(--green-600); color: #fff; transform: translateY(-1px); }
.rubrica-mais:focus-visible { outline: 2px solid var(--green-600); outline-offset: 2px; }
.rubrica-campo.rubrica-entrada input:focus-visible { outline-color: var(--green-600); }
.rubrica-campo.rubrica-entrada.preenchida input { border-color: var(--green-600); background: var(--green-100); }

/* Total da grade: entrada e saída separadas */
.total-linhas { display: grid; gap: 3px; }
.total-linhas span { display: flex; align-items: baseline; gap: 8px; font-size: var(--t-apoio); font-weight: 700; }
.total-linhas strong { font-family: 'Sora', sans-serif; font-size: var(--t-forte); }
.total-entrada, .total-entrada strong { color: var(--green-600); }
.total-saida, .total-saida strong { color: var(--amber-600); }
.total-referencia, .total-referencia strong { color: var(--ink-500); }
.total-imposto, .total-imposto strong { color: var(--brand-navy); }

/* "Valor requisitado": não é dinheiro, é só o que foi cobrado do cliente */
.rubrica-campo.rubrica-referencia label { color: var(--ink-500); }
.rubrica-campo.rubrica-referencia.preenchida input { border-color: var(--ink-300); background: var(--paper); }
.finance-value.referencia { color: var(--ink-500); font-weight: 700; }
.finance-type.type-entrada { background: var(--green-100); color: var(--green-600); }
.finance-type.type-referencia { background: var(--paper); color: var(--ink-500); }

/* Um "Valor pago" só, no fim da grade: o sistema vai quitando as rubricas
   na ordem até o dinheiro acabar. Um campo por rubrica dobrava a altura do
   formulário e enchia a tela de caixas vazias. */
.grade-pago {
  display: grid; grid-template-columns: auto 170px; align-items: center;
  gap: 4px 12px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line);
}
.grade-pago label { color: var(--ink-700); font-size: var(--t-apoio); font-weight: 700; }
.grade-pago .form-hint { grid-column: 1 / -1; margin: 0; }
/* Avisos curtos embaixo de um campo: verde quando deu certo, vermelho quando não */
.form-hint.ok { color: var(--green-600); font-weight: 600; }
.form-hint.erro { color: var(--red-700); font-weight: 600; }
.saldo-cliente-linha strong.entrada { color: var(--green-600); }
.saldo-cliente-linha strong.saida { color: var(--amber-600); }
.saldo-cliente-linha:not(.depois) strong { font-size: var(--t-painel); }
.saldo-cliente small.alerta { color: var(--red-700); font-weight: 800; opacity: 1; }

/* Lançamento com várias rubricas: uma linha só, com as rubricas dentro */
.lote-rubricas { display: grid; gap: 3px; margin-top: 6px; }
.lote-rubricas span { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; border-bottom: 1px dotted var(--line); padding-bottom: 2px; font-size: var(--t-micro); color: var(--ink-500); font-variant-numeric: tabular-nums; }
.lote-rubricas span:last-child { border-bottom: 0; }
.lote-rubricas b { color: var(--ink-700); font-weight: 600; }
.linha-lote .finance-value { font-weight: 800; }

/* O depósito rápido pode ser aberto de dentro do lançamento: fica por cima */
#modalDeposito { z-index: 60; }

/* Quanto o cliente já depositou neste processo */
.rubrica-info {
  display: block; margin-top: 3px; font-size: var(--t-micro); font-weight: 700;
  color: var(--green-600);
}
.fundo-edicao {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  margin-top: 6px; padding: 11px 13px; border-radius: var(--radius);
  border: 1px solid var(--green-600); background: var(--green-100);
}
.fundo-edicao b {
  display: block; font-family: 'Sora', sans-serif; font-size: var(--t-numero);
  color: var(--green-600); font-variant-numeric: tabular-nums;
}
.fundo-edicao small { display: block; margin-top: 2px; font-size: var(--t-micro); font-weight: 600; color: var(--ink-700); }
.fundo-edicao button { flex: none; }
@media (max-width: 560px) {
  .fundo-edicao { flex-direction: column; align-items: stretch; }
  .fundo-edicao button { width: 100%; }
}

/* Lançamento em moeda estrangeira ainda sem taxa de câmbio */
.finance-note.cambio-pendente { color: var(--amber-600); font-weight: 800; }

/* ——— Conta do processo: o dinheiro do cliente e os honorários, lado a lado ——— */
.conta-processo { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; }
.conta-bloco {
  display: grid; gap: 2px; align-content: start;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: #fff; padding: 17px 19px 15px;
}
.conta-bloco h3 {
  margin: 0 0 9px; font-family: 'Sora', sans-serif; font-size: var(--t-corpo); font-weight: 700;
  display: flex; align-items: baseline; gap: 8px; color: var(--brand-navy);
}
.conta-bloco h3 em {
  font-style: normal; font-family: 'Inter', sans-serif; font-size: var(--t-micro);
  font-weight: 600; color: var(--ink-500);
}
.conta-linha {
  display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
  padding: 6px 0; font-size: var(--t-corpo);
}
.conta-linha span { color: var(--ink-700); }
.conta-linha strong { font-variant-numeric: tabular-nums; font-weight: 700; }
.conta-linha.entrada strong { color: var(--green-600); }
.conta-linha.saida strong { color: var(--amber-600); }
/* O valor cobrado é referência, não movimento: cinza e discreto */
.conta-linha.referencia { border-bottom: 1px dashed var(--line); }
.conta-linha.referencia span, .conta-linha.referencia strong { color: var(--ink-500); }
.conta-linha.referencia em { font-style: normal; font-size: var(--t-micro); opacity: .8; }
.conta-linha.alerta span, .conta-linha.alerta strong { color: var(--red-700); font-weight: 700; }
/* ——— Abas do Financeiro: um processo de cada vez, ou o geral ——— */
.finance-abas { display: flex; gap: 6px; margin-bottom: 16px; border-bottom: 1px solid var(--line); }
.finance-aba {
  border: 0; border-bottom: 3px solid transparent; background: transparent;
  color: var(--ink-500); cursor: pointer; padding: 11px 16px; font-size: var(--t-corpo); font-weight: 700;
  transition: var(--transicao);
}
.finance-aba:hover { color: var(--ink-700); }
.finance-aba.active { border-bottom-color: var(--red-600); color: var(--red-700); }
.finance-aba:focus-visible { outline: 2px solid var(--brand-navy); outline-offset: -2px; }

/* ——— Geral por empresa ——— */
/* O aviso agora é a própria descrição do painel: uma linha, sem faixa cinza */
.geral-aviso { margin: 0; max-width: 62ch; color: var(--ink-500); font-size: var(--t-apoio); line-height: 1.5; }

/* Faixa de totais — dá peso ao topo antes da tabela */
.geral-resumo {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
  border-bottom: 1px solid var(--line); background: var(--line);
}
.geral-resumo-item { background: var(--paper); padding: 12px 22px; }
.geral-resumo-item small { display: block; color: var(--ink-500); font-size: var(--t-micro); letter-spacing: .04em; text-transform: uppercase; }
.geral-resumo-item b { display: block; margin-top: 3px; color: var(--brand-navy); font-size: var(--t-painel); font-weight: 800; font-variant-numeric: tabular-nums; }
.geral-resumo-item.forte b { color: var(--red-700); }

/* Números perto do seu rótulo: as colunas de dinheiro têm largura fixa e a
   coluna da empresa fica com toda a folga que sobrar. */
.tabela-geral th.num, .tabela-geral td.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tabela-geral .col-kz { width: 132px; }
.tabela-geral .col-qtd { width: 88px; }
.tabela-geral td.vazio { color: #c3c8d4; }
.tabela-geral td.forte { color: var(--brand-navy); font-weight: 800; }

.tabela-geral .geral-empresa { cursor: pointer; }
.tabela-geral .geral-empresa:hover { background: var(--paper); }
.tabela-geral .geral-empresa.aberta { background: var(--brand-blue-soft); }
.tabela-geral .geral-empresa td { border-top: 1px solid var(--line); padding-top: 11px; padding-bottom: 11px; }
.tabela-geral .geral-empresa strong { display: block; font-weight: 700; }
.tabela-geral .geral-empresa small { display: block; color: var(--ink-500); font-size: var(--t-micro); }

.geral-nome { display: flex; align-items: center; gap: 10px; }
.geral-identidade { min-width: 0; flex: 1 1 auto; }
.geral-sigla {
  flex: none; display: grid; place-items: center; width: 30px; height: 30px;
  border-radius: 50%; background: var(--brand-blue-soft);
  color: var(--brand-navy); font-size: var(--t-micro); font-weight: 800;
}
.geral-toggle {
  flex: none; display: grid; place-items: center; width: 22px; height: 22px;
  border: 1px solid var(--line); border-radius: 50%; background: #fff;
  color: var(--ink-500); cursor: pointer; padding: 0; font-size: var(--t-corpo); line-height: 1;
  transition: var(--transicao);
}
.geral-toggle span { display: block; transition: transform .15s ease; }
.geral-empresa:hover .geral-toggle { border-color: var(--brand-navy); color: var(--brand-navy); }
.geral-empresa.aberta .geral-toggle { border-color: var(--brand-navy); background: var(--brand-navy); color: #fff; }
.geral-empresa.aberta .geral-toggle span { transform: rotate(90deg); }

/* Barrinha do quanto a empresa gastou, comparada com a que mais gastou */
.geral-barra { display: block; margin-top: 8px; width: 190px; max-width: 100%; height: 4px; border-radius: var(--r-pequeno); background: var(--line); overflow: hidden; }
.geral-barra i { display: block; height: 100%; border-radius: var(--r-pequeno); background: var(--brand-navy); opacity: .45; }

.geral-pill {
  display: inline-block; min-width: 26px; border-radius: var(--r-pilula);
  background: var(--paper); padding: 3px 9px;
  color: var(--ink-700); font-size: var(--t-apoio); font-weight: 800;
}
.tabela-geral .geral-processo td { background: #fff; border-top: 1px dashed var(--line); font-size: var(--t-corpo); }
.tabela-geral .geral-processo td:first-child { padding-left: 64px; }
.tabela-geral .geral-processo small { display: block; color: var(--ink-500); font-size: var(--t-micro); }
.tabela-geral .sobra, .empresa-detail-stats .sobra { color: var(--green-600); }
.tabela-geral .falta, .empresa-detail-stats .falta { color: var(--red-700); font-weight: 700; }
@media (max-width: 900px) {
  .geral-resumo { grid-template-columns: repeat(2, 1fr); }
  .tabela-geral .col-kz, .tabela-geral .col-qtd { width: auto; }
}

/* Detalhe da empresa: o dinheiro é de cada processo, nunca da empresa */
.empresa-nota-dinheiro {
  margin: 0 0 10px; border-left: 3px solid var(--amber-600);
  background: var(--amber-100); padding: 8px 11px;
  color: var(--ink-700); font-size: var(--t-micro); line-height: 1.45;
}
#empresaDetalheProcessos .num, #empresaDetalheProcessos + thead .num { text-align: right; }
#empresaDetalheProcessos td.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
#empresaDetalheProcessos td.sobra { color: var(--green-600); }
#empresaDetalheProcessos td.falta { color: var(--red-700); font-weight: 700; }
/* O rodapé é a soma de tudo: uma faixa fechando o painel, não uma linha solta */
.tabela-geral tbody tr:last-child td { border-bottom: 0; }
.tabela-geral tfoot td {
  border-top: 1px solid var(--line); background: var(--brand-blue-soft);
  padding: 15px 22px; color: var(--brand-navy);
  font-size: var(--t-corpo); font-weight: 800; font-variant-numeric: tabular-nums;
}
.tabela-geral tfoot td:first-child {
  color: var(--ink-500); font-size: var(--t-micro); font-weight: 800;
  letter-spacing: .06em; text-transform: uppercase;
  border-bottom-left-radius: var(--radius);
}
.tabela-geral tfoot td:last-child { border-bottom-right-radius: var(--radius); }

/* Quadro dos impostos do processo */
.conta-fecho.imposto { border-color: var(--amber-600); background: var(--amber-100); }
.conta-fecho.imposto span, .conta-fecho.imposto strong { color: var(--amber-600); }
.conta-fecho.imposto small { color: var(--ink-700); }
.conta-linha em { font-style: normal; font-size: var(--t-micro); color: var(--ink-500); }
.portal-conta-resumo .falta span, .portal-conta-resumo .falta strong { color: var(--red-700); }
.conta-linha.subtotal {
  border-top: 1px solid var(--line); margin-top: 4px; padding-top: 9px;
  font-weight: 700;
}
.conta-linha.subtotal span { color: var(--brand-navy); font-weight: 700; }
.conta-linha.subtotal strong { font-family: 'Sora', sans-serif; font-size: var(--t-forte); }
.conta-fecho {
  display: grid; gap: 2px; margin-top: 12px; padding: 13px 15px; border-radius: var(--radius);
  border: 1px solid transparent;
}
.conta-fecho span { font-size: var(--t-micro); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.conta-fecho strong { font-family: 'Sora', sans-serif; font-size: 23px; font-variant-numeric: tabular-nums; }
.conta-fecho small { font-size: var(--t-micro); font-weight: 600; color: var(--ink-700); }
.conta-fecho.sobra { border-color: var(--green-600); background: var(--green-100); }
.conta-fecho.sobra span, .conta-fecho.sobra strong { color: var(--green-600); }
.conta-fecho.falta { border-color: var(--red-600); background: var(--red-100); }
.conta-fecho.falta span, .conta-fecho.falta strong { color: var(--red-700); }
.conta-nota { display: block; margin-top: 11px; font-size: var(--t-micro); font-weight: 600; color: var(--ink-500); }

/* ——— Prestação de contas no portal do cliente ——— */
.portal-contas { display: grid; gap: 16px; }
.portal-conta {
  display: grid; gap: 15px;
  border: 1px solid var(--line); border-radius: var(--radius); background: #fff;
  padding: 20px 22px; box-shadow: var(--shadow-sm, 0 1px 2px rgba(9,41,79,.06));
}
.portal-conta > header { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 14px; }
.portal-conta > header strong { display: block; font-family: 'Sora', sans-serif; font-size: var(--t-painel); }
.portal-conta > header span { color: var(--ink-500); font-size: var(--t-apoio); }
.portal-conta-fecho { display: grid; gap: 1px; padding: 9px 14px; border-radius: var(--radius); text-align: right; }
.portal-conta-fecho span { font-size: var(--t-apoio); font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.portal-conta-fecho strong { font-family: 'Sora', sans-serif; font-size: var(--t-numero); font-variant-numeric: tabular-nums; }
.portal-conta-fecho.sobra { background: var(--green-100); }
.portal-conta-fecho.sobra span, .portal-conta-fecho.sobra strong { color: var(--green-600); }
.portal-conta-fecho.falta { background: var(--red-100); }
.portal-conta-fecho.falta span, .portal-conta-fecho.falta strong { color: var(--red-700); }
.portal-conta-resumo { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.portal-conta-resumo div {
  display: grid; gap: 2px; border: 1px solid var(--line); border-radius: var(--radius); padding: 11px 13px;
}
.portal-conta-resumo span { font-size: var(--t-micro); font-weight: 600; color: var(--ink-500); }
.portal-conta-resumo strong { font-family: 'Sora', sans-serif; font-size: var(--t-painel); font-variant-numeric: tabular-nums; }
.portal-conta-tabela { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); }
.portal-conta-tabela table { width: 100%; border-collapse: collapse; font-size: var(--t-apoio); }
.portal-conta-tabela th {
  text-align: left; padding: 9px 12px; background: var(--brand-blue-soft);
  font-size: var(--t-apoio); font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-700);
}
.portal-conta-tabela td { padding: 9px 12px; border-top: 1px solid var(--line); }
.portal-conta-tabela .valor { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.portal-conta-tabela .saldo { font-weight: 700; }
.portal-conta-tabela tr.entrada td { background: var(--green-100); }
.portal-conta-vazio, .portal-conta-nota { margin: 0; font-size: var(--t-apoio); color: var(--ink-500); }
.portal-conta-acoes { display: flex; justify-content: flex-end; }

/* Resultado do mês, embaixo do gráfico.
   Antes era uma tira de texto corrido colada nas bordas do painel: o rótulo
   sumia à esquerda e o total à direita. Agora são três blocos com o mesmo
   desenho dos cartões do resto da tela. */
/* O painel não tem recuo próprio: cada bloco traz o seu, como .finance-chart.
   Sem isto o rótulo saía cortado à esquerda e o total encostava na borda. */
.resultado-mes { border-top: 1px solid var(--line); padding: 16px 24px 20px; }
.resultado-titulo {
  margin: 0 0 10px; font-size: var(--t-apoio); font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-500);
}
.resultado-titulo em { font-style: normal; font-weight: 600; opacity: .75; }
.resultado-linha { display: grid; grid-template-columns: 1fr 1fr auto; gap: 10px; align-items: stretch; }
.resultado-item {
  display: flex; flex-direction: column; justify-content: center; gap: 3px;
  border-radius: var(--radius); background: var(--paper); padding: 10px 13px; min-width: 0;
}
.resultado-item small { color: var(--ink-500); font-size: var(--t-micro); line-height: 1.25; }
.resultado-item b {
  font-family: 'Sora', sans-serif; font-size: var(--t-forte); font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.resultado-item.entrada b { color: var(--green-600); }
.resultado-item.saida b { color: var(--amber-600); }
.resultado-item.total { background: var(--brand-blue-soft); padding-inline: 16px; }
.resultado-item.total small { color: var(--brand-navy); font-weight: 700; }
.resultado-item.total b { color: var(--brand-navy); font-size: var(--t-numero); }
.resultado-item.total.negativo { background: var(--red-100); }
.resultado-item.total.negativo small, .resultado-item.total.negativo b { color: var(--red-700); }

@media (max-width: 560px) {
  .resultado-linha { grid-template-columns: 1fr 1fr; }
  .resultado-item.total { grid-column: 1 / -1; }
}
.conta-resultado h3 em { color: var(--ink-500); }

/* Lançamento que deveria ter comprovante e não tem */
.sem-comprovante {
  display: inline-block; margin-top: 6px; padding: 2px 8px; border-radius: var(--r-pilula);
  border: 1px dashed var(--amber-600); color: var(--amber-600);
  font-size: var(--t-apoio); font-weight: 700;
}

/* "Repetir o mês passado", ao lado da dica da grade */
.btn-repetir { justify-self: start; margin-top: 8px; padding: 6px 13px; font-size: var(--t-micro); }

/* Rótulo discreto no cabeçalho de um painel (substitui selects decorativos) */
.panel-hint { color: var(--ink-500); font-size: var(--t-micro); font-weight: 600; white-space: nowrap; }
.report-summary small.alerta { color: var(--amber-600); font-weight: 700; }

/* ——— Arquivos: um bloco por empresa ——— */
.grupo-empresa td {
  background: var(--brand-blue-soft);
  border-top: 1px solid var(--line);
  padding: 10px var(--e-4);
}
.grupo-empresa strong {
  font-family: 'Sora', sans-serif; font-size: var(--t-corpo); color: var(--brand-navy);
  margin-right: 12px;
}
.grupo-empresa span {
  display: inline-block; margin-right: 9px; font-size: var(--t-apoio); font-weight: 700;
  color: var(--ink-500);
}
.grupo-empresa span.ok { color: var(--green-600); }
.grupo-empresa span.falta { color: var(--amber-600); }
.grupo-empresa + tr td { border-top: 0; }

/* ——— O processo escolhido manda na tela toda: a barra fica no topo ——— */
.barra-processo {
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px 14px;
  border: 1px solid var(--line); border-left: 4px solid var(--brand-navy);
  border-radius: var(--radius); background: #fff; padding: 13px 18px; margin-bottom: 18px;
  box-shadow: var(--shadow-sm);
}
.barra-processo label {
  font-size: var(--t-apoio); font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-500);
}
.barra-processo select {
  min-width: 260px; max-width: 100%; font-family: 'Sora', sans-serif;
  font-size: var(--t-forte); font-weight: 700;
}
.barra-processo span { color: var(--ink-500); font-size: var(--t-apoio); font-weight: 600; }
@media (max-width: 560px) {
  .barra-processo { flex-direction: column; align-items: stretch; }
  .barra-processo select { min-width: 0; }
}

/* ——— Cópia de segurança automática ——— */
.copia-auto {
  margin: 0 var(--e-4) var(--e-3);
  border: 1px solid var(--line); border-left: 4px solid var(--ink-300);
  border-radius: var(--radius); background: var(--paper); padding: var(--e-3) 18px;
}
.copia-auto.tom-ok      { border-left-color: var(--green-600); background: var(--green-100); }
.copia-auto.tom-atencao { border-left-color: var(--amber-600); background: var(--amber-100); }
.copia-auto.tom-perigo  { border-left-color: var(--red-600);   background: var(--red-100); }
.copia-auto-cabeca { display: flex; align-items: center; flex-wrap: wrap; gap: var(--e-1); }
.copia-auto-cabeca strong { font-size: var(--t-forte); }
.copia-auto-tag {
  border-radius: var(--r-pilula); background: #fff; padding: 3px 9px;
  font-size: var(--t-micro); font-weight: 800; text-transform: uppercase; letter-spacing: .05em;
}
.copia-auto.tom-ok .copia-auto-tag      { color: var(--green-600); }
.copia-auto.tom-atencao .copia-auto-tag { color: var(--amber-600); }
.copia-auto.tom-perigo .copia-auto-tag  { color: var(--red-700); }
.copia-auto p { margin: 6px 0 0; color: var(--ink-700); font-size: var(--t-apoio); line-height: 1.5; }
.copia-auto-acoes { display: flex; flex-wrap: wrap; gap: var(--e-1); margin-top: var(--e-2); }

/* O mesmo aviso, curto, no alto de qualquer tela quando a coisa está feia */
.faixa-copia {
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--e-2);
  margin-bottom: var(--e-3); border: 1px solid var(--red-300); border-left: 4px solid var(--red-600);
  border-radius: var(--radius); background: var(--red-100); padding: 12px var(--e-3);
}
.faixa-copia.tom-atencao { border-color: var(--amber-600); border-left-color: var(--amber-600); background: var(--amber-100); }
.faixa-copia strong { font-size: var(--t-corpo); }
.faixa-copia span { flex: 1; min-width: 220px; color: var(--ink-700); font-size: var(--t-apoio); }
.faixa-copia a { color: var(--brand-navy); font-size: var(--t-apoio); font-weight: 800; white-space: nowrap; }

/* O botão do dossiê, ao lado da etiqueta de situação do processo */
.detalhe-acoes { display: flex; align-items: center; gap: var(--e-2); flex-wrap: wrap; }

/* ——— Dashboard: processos que precisam de reposição ——— */
.dashboard-reposicoes { display: grid; padding: 0 18px 18px; }
.reposicao-item {
  display: flex; align-items: center; justify-content: space-between; gap: var(--e-2);
  border-bottom: 1px solid var(--line); padding: 11px 0;
}
.reposicao-item:last-of-type { border-bottom: 0; }
.reposicao-item:hover { background: var(--paper); }
.reposicao-item div { display: grid; gap: 3px; min-width: 0; }
.reposicao-item strong { font-size: var(--t-corpo); }
.reposicao-item small { color: var(--ink-500); font-size: var(--t-apoio); }
.reposicao-item b {
  color: var(--red-700); font-size: var(--t-forte); font-weight: 800;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.reposicao-total {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--e-2);
  border-top: 2px solid var(--brand-navy); margin-top: var(--e-1); padding-top: 11px;
}
.reposicao-total span { color: var(--ink-500); font-size: var(--t-apoio); }
.reposicao-total b {
  color: var(--brand-navy); font-size: var(--t-painel); font-weight: 800;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}

/* Cadastrar a empresa sem sair do Novo processo */
.nif-novo {
  display: grid; gap: 6px; margin-top: var(--e-2);
  border: 1px dashed var(--brand-navy); border-radius: var(--r-pequeno);
  background: var(--brand-blue-soft); padding: var(--e-2);
}
.nif-novo > label { color: var(--brand-navy); font-size: var(--t-micro); font-weight: 800; }
.nif-novo > div { display: flex; gap: 6px; }
.nif-novo .form-control { flex: 1; min-width: 0; background: #fff; }
.nif-novo .form-hint { color: var(--ink-500); }

/* ——— Anexar fecho: os documentos que encerram o despacho ——— */
.fecho-acoes { display: flex; align-items: center; flex-wrap: wrap; gap: var(--e-2); margin-bottom: var(--e-3); }
.fecho-botao { display: inline-flex; align-items: center; cursor: pointer; }
.fecho-botao input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.fecho-lista { display: grid; gap: var(--e-1); }
.fecho-item {
  display: grid; grid-template-columns: minmax(200px, 1.2fr) minmax(160px, 1fr) auto;
  align-items: center; gap: var(--e-2);
  border: 1px solid var(--line); border-radius: var(--r-pequeno);
  background: var(--paper); padding: 11px 13px;
}
.fecho-nome { min-width: 0; }
.fecho-nome strong { display: block; overflow: hidden; font-size: var(--t-corpo); text-overflow: ellipsis; white-space: nowrap; }
.fecho-nome small { color: var(--ink-500); font-size: var(--t-micro); }
.fecho-observacao { background: #fff; }
.fecho-botoes { display: flex; gap: 6px; }
.fecho-vazio { margin: 0; color: var(--ink-500); font-size: var(--t-apoio); font-style: italic; }
@media (max-width: 760px) { .fecho-item { grid-template-columns: 1fr; } }

/* O fecho dentro do cartão de acompanhamento do cliente.
   Ocupa as duas colunas: os documentos precisam de largura, e apertá-los numa
   coluna estreita deixava o nome do ficheiro cortado. */
.portal-etapa-fecho { grid-column: 1 / -1; }
.portal-etapa-fecho > div { width: 100%; }
.portal-fecho { display: grid; gap: var(--e-1); margin-top: var(--e-2); }
.portal-fecho-item {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--e-2);
  border: 1px solid var(--line); border-radius: var(--r-pequeno); background: #fff; padding: 12px 14px;
}
.portal-fecho-item strong { display: block; font-size: var(--t-corpo); }
.portal-fecho-item small { color: var(--ink-500); font-size: var(--t-micro); }
.portal-fecho-botoes { display: flex; gap: 6px; }

/* Empresa sem senha do portal: o cliente não consegue entrar, e isso precisa
   de ser visível na lista — senão só se descobre quando ele reclama. */
.sem-portal {
  display: block; margin-top: 5px; color: var(--amber-600);
  font-size: var(--t-micro); font-weight: 700;
}

/* ——— O que fica para o escritório (Relatórios) ———
   Reaproveita os blocos da Conta do processo, no Financeiro: é a mesma conta,
   só que somada. Duas telas a dizer o mesmo têm de se parecer. */
.escritorio-conta { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; }
.escritorio-conta .conta-bloco { margin: 0; }
.escritorio-aviso p {
  margin: 0 0 10px; font-size: var(--t-corpo); color: var(--ink-700); line-height: 1.55;
}
.escritorio-aviso p strong { color: var(--brand-navy); font-variant-numeric: tabular-nums; }
.escritorio-aviso .total-impostos {
  border-top: 1px solid var(--line); border-bottom: 0; margin-top: 4px; padding-top: 12px;
}
.escritorio-aviso .total-impostos strong { color: var(--amber-600); }

/* ——— Conversa com o cliente ———
   O mesmo balão nos dois lados: na tela do processo e no portal do cliente.
   Quem escreveu decide de que lado o balão encosta. */
.conversa-fio, .portal-conversa {
  display: flex; flex-direction: column; gap: 10px;
  max-height: 320px; overflow-y: auto;
  padding: 4px 2px; margin-bottom: 14px;
}
.portal-conversa h3 { margin: 0 0 4px; font-size: var(--t-corpo); color: var(--brand-navy); }
.conversa-balao {
  max-width: 78%; padding: 10px 14px; border-radius: 14px;
  background: var(--surface-2); border: 1px solid var(--line);
}
.conversa-balao p { margin: 0; font-size: var(--t-corpo); line-height: 1.5; white-space: pre-wrap; }
.conversa-balao small { display: block; margin-top: 6px; font-size: var(--t-micro); color: var(--ink-500); }
/* Do cliente à esquerda, do escritório à direita — quem lê está sempre do
   seu próprio lado, seja no portal, seja na tela do escritório. */
.conversa-balao.cliente { align-self: flex-start; border-bottom-left-radius: 4px; }
.conversa-balao.escritorio {
  align-self: flex-end; border-bottom-right-radius: 4px;
  background: var(--brand-navy); border-color: var(--brand-navy);
}
.conversa-balao.escritorio p, .conversa-balao.escritorio small { color: #fff; }
.conversa-balao.escritorio small { opacity: .75; }
.conversa-vazia { color: var(--ink-500); font-size: var(--t-corpo); margin: 0 0 12px; }
.conversa-conta { font-size: var(--t-micro); font-weight: 600; color: var(--ink-500); margin-left: 8px; }
.conversa-form { display: flex; gap: 10px; align-items: flex-start; }
.conversa-form textarea { flex: 1; resize: vertical; }
.conversa-form button { white-space: nowrap; }
@media (max-width: 560px) {
  .conversa-balao { max-width: 92%; }
  .conversa-form { flex-direction: column; }
  .conversa-form button { width: 100%; }
}

/* Dívida saldada: dizer que está pago vale mais do que fazer a linha da
   dívida desaparecer — sumir pode ser lido como erro. */
.conta-linha.quitado span { color: var(--green-600); font-weight: 600; }
.conta-linha.quitado strong { color: var(--green-600); }

/* "Sem prazo definido" no portal: o lugar existe, mas sem chamar a atenção
   como uma data a sério. */
.portal-processo-datas .sem-prazo strong { color: var(--ink-500); font-weight: 500; }

/* ——— Mensagem por ler ———
   O mesmo desenho nos dois lados: uma etiqueta no balão e um número na aba,
   seguindo o contador de documentos que já existia ao lado. */
.conversa-balao.nova { position: relative; border-color: var(--red-300); box-shadow: 0 0 0 3px var(--red-50); }
.conversa-balao.escritorio.nova { box-shadow: 0 0 0 3px var(--red-100); }
.conversa-nova {
  position: absolute; top: -9px; right: 10px;
  background: var(--red-600); color: #fff;
  font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  padding: 2px 7px; border-radius: var(--r-pilula);
}
.conversa-conta.por-ler { color: var(--red-600); font-weight: 700; }
.conversa-aviso {
  background: var(--red-600); color: #fff; font-size: var(--t-micro); font-weight: 700;
  padding: 1px 8px; border-radius: var(--r-pilula); margin-left: 6px;
}
.badge-chat {
  background: var(--red-600); color: #fff; font-size: var(--t-micro); font-weight: 700;
  padding: 1px 7px; border-radius: var(--r-pilula); margin-left: 4px;
}

/* ——— Lançamentos a conferir ————————————————————————————————
   O painel que aponta as cobranças sem rubrica deixadas pelo botão
   "Pagamento" antigo. Aparece só quando existe alguma. */
.suspeitos-conteudo { display: grid; gap: 12px; }
.suspeitos-nota {
  margin: 0;
  padding: 10px 12px;
  border-left: 3px solid var(--amber-600, #b45309);
  background: var(--amber-50, #fffbeb);
  border-radius: 0 6px 6px 0;
  color: var(--ink-700, #374151);
  line-height: 1.5;
}
.suspeitos-tabela { width: 100%; border-collapse: collapse; }
.suspeitos-tabela th,
.suspeitos-tabela td { padding: 8px 10px; border-bottom: 1px solid var(--line, #e5e7eb); text-align: left; }
.suspeitos-tabela .num { text-align: right; font-variant-numeric: tabular-nums; }
.suspeitos-tabela .falta { color: var(--red-600, #dc2626); font-weight: 700; }

/* Coluna "Pago pelo cliente" da tabela Geral por empresa: dinheiro que entrou,
   como o "Em caixa", mas discreto — é uma coluna de conferência, não um alerta. */
.tabela-geral .pago { color: var(--green-600); }

/* Prazo do documento no Portal do Cliente — mesma família de cores dos
   avisos de prazo das etapas, só numa linha de texto em vez de caixa. */
.portal-doc-prazo { display: block; margin-top: 2px; font-weight: 600; }
.portal-doc-prazo.vazio { color: var(--ink-500, #6b7280); font-weight: 500; }
.portal-doc-prazo.ok { color: var(--green-600); }
.portal-doc-prazo.proxima { color: var(--amber-600); }
.portal-doc-prazo.atrasada { color: var(--red-600); }
.portal-doc-prazo.concluido { color: var(--ink-500, #6b7280); font-weight: 500; }