/* Ajustes do sistema real sobre o design system do protótipo (design-system.css não é alterado
   além da troca da fonte). Aqui ficam regras que substituem estilos inline do protótipo. */

.dropdown-ancora { position: relative; }

.header-search .search-icon {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  width: 18px; height: 18px; color: var(--gray-400);
  display: flex; pointer-events: none;
}
.header-search .search-icon svg { width: 100%; height: 100%; }

.btn-icon > span:not([hidden]) { display: inline-flex; }
.btn-icon svg { display: block; width: 20px; height: 20px; }
.app-header .btn-icon { width: 40px; height: 40px; }
.btn-icon#sidebar-toggle { width: 40px; height: 40px; border: 1px solid var(--gray-300); background: var(--color-white); color: var(--gray-700); }
.btn-icon#sidebar-toggle:hover { background: var(--gray-100); }

.user-dropdown form { margin: 0; }

.main-area .page-content:focus { outline: none; }

.sidebar-close, .sidebar-backdrop { display: none; }
.sidebar-close[hidden], .sidebar-backdrop[hidden] { display: none; }
body.sidebar-open { overflow: hidden; }
@media (max-width: 900px) {
  .sidebar-backdrop:not([hidden]) { display: block; position: fixed; inset: 0; z-index: 201; border: 0; padding: 0; background: rgba(15, 23, 42, .55); cursor: pointer; }
  .sidebar-close { display: grid; place-items: center; margin-left: auto; border: 0; background: transparent; color: white; width: 40px; height: 40px; font-size: 28px; cursor: pointer; }
  .app-header { padding-inline: var(--space-4); gap: var(--space-2); }
  .header-search { min-width: 0; }
  .header-actions { gap: var(--space-2); }
  .page-content > *, .page-content .card { min-width: 0; max-width: 100%; }
}
@media (max-width: 480px) {
  .app-header { padding-inline: var(--space-3); }
  .header-search { flex: 1; }
  .header-search input { min-width: 0; }
  .header-actions { gap: 4px; }
  .page-content { padding: var(--space-4); }
  .toolbar .search-box { min-width: 100%; }
  .page-heading h1, .page-header h1 { overflow-wrap: anywhere; }
  .paginacao, .form-actions, .page-header { flex-wrap: wrap; }
  .notif-panel { width: min(340px, calc(100vw - 24px)); right: -48px; }
}

.clientes-pagina { max-width: 1240px; margin: 0 auto; }
.page-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 24px; }
.page-heading h1 { margin: 10px 0 4px; }
.page-heading p { margin: 0; }
.text-muted { color: var(--gray-600); }
.filtros-clientes { display: flex; align-items: end; gap: 16px; margin-bottom: 20px; padding: 20px; }
.filtros-clientes .field { flex: 1; margin: 0; }
.tabela-responsiva { overflow-x: auto; }
.tabela-responsiva table { width: 100%; border-collapse: collapse; }
.tabela-responsiva th, .tabela-responsiva td { padding: 14px 16px; border-bottom: 1px solid var(--gray-200); text-align: left; }
.tabela-responsiva th { color: var(--gray-600); font-size: 13px; }
.estado-vazio { text-align: center; padding: 48px 20px; }
.paginacao, .form-actions { display: flex; align-items: center; gap: 12px; }
.paginacao { justify-content: center; margin: 20px 0; }
.form-cliente { padding: 24px; }
.form-cliente fieldset { border: 0; border-top: 1px solid var(--gray-200); margin: 24px 0; padding: 20px 0 0; }
.form-cliente legend { padding-right: 12px; font-weight: 600; }
.required { color: var(--color-danger); }
.field-error { display: block; color: var(--color-danger); margin-top: 4px; }
.alert { padding: 12px 16px; margin: 0 0 18px; border-radius: var(--radius-md); }
.alert-sucesso { background: #e9f7ef; color: #185c37; }
.alert-info { background: #eaf2fb; color: #1e3a5f; }
.alert-erro { background: #fdecec; color: #8a1c1c; }
.dados-cliente { display: grid; grid-template-columns: minmax(150px, 1fr) 3fr; gap: 12px 20px; }
.dados-cliente dt { font-weight: 600; }.dados-cliente dd { margin: 0; }
.anotacao { border-top: 1px solid var(--gray-200); padding: 16px 0; }
.anotacao p { white-space: pre-wrap; }.anotacao small { color: var(--gray-600); }
.contato-mensagem { white-space: pre-wrap; overflow-wrap: anywhere; }
.contato-acoes form { margin: 0; }
.anotacao details { margin-top: 8px; }
.grid-modulos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 20px; }
.grid-modulos .card { padding: 20px; }
.processo-cabecalho { align-items: flex-start; }
.processo-acoes form, .movimentacao form { margin: 0; }
.abas-processo { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 0 0 20px; border-bottom: 1px solid var(--gray-200); padding-bottom: 12px; }
.abas-processo a { color: var(--color-primary); font-weight: 600; }
.texto-longo { white-space: pre-wrap; overflow-wrap: anywhere; }
.form-movimentacao { border-top: 1px solid var(--gray-200); margin: 0 0 20px; padding: 18px 0; }
.movimentacao { border-top: 1px solid var(--gray-200); padding: 16px 0; }
.movimentacao-cabecalho { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.movimentacao-cabecalho time { color: var(--gray-600); }
.movimentacao-teor { margin: 8px 0 12px; border: 1px solid var(--gray-200); border-radius: var(--radius-md); background: var(--gray-50, #f8fafc); }
.movimentacao-teor > summary { cursor: pointer; padding: 10px 14px; font-weight: 600; color: var(--color-primary); }
.movimentacao-teor[open] > summary { border-bottom: 1px solid var(--gray-200); }
.conteudo-publicacao { padding: 12px 14px; max-height: 480px; overflow: auto; overflow-wrap: anywhere; line-height: 1.6; }
.movimentacao-acoes { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.texto-nota { font-size: 0.875rem; margin: 4px 0 8px; }
.dialogo-processo { width: min(520px, calc(100vw - 32px)); max-height: min(90vh, 700px); border: 0; border-radius: var(--radius-lg); padding: 24px; box-shadow: 0 20px 60px #0003; }
.dialogo-processo::backdrop { background: #0f172a88; }
.dialogo-processo form { margin: 0; }
.dialogo-processo h2 { margin-top: 0; }
.dialogo-processo .form-actions { margin-top: 20px; }
.form-cliente [hidden], .abas-processo [hidden] { display: none; }
@media (max-width: 760px) { .filtros-clientes, .page-heading { align-items: stretch; flex-direction: column; } .field-row, .grid-modulos { grid-template-columns: 1fr; } .dados-cliente { grid-template-columns: 1fr; gap: 4px; } .dados-cliente dd { margin-bottom: 10px; } }

/* ---------- Telas de autenticação (login, primeiro acesso, recuperação) ---------- */
.auth-pagina {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  padding: var(--space-6); background: var(--gray-50);
}
.auth-cartao { width: 100%; max-width: 420px; padding: var(--space-8); }
.auth-marca {
  background: var(--color-primary); border-radius: var(--radius-md);
  padding: var(--space-4); margin-bottom: var(--space-6); text-align: center;
}
.auth-marca img { height: 40px; }
.auth-titulo { margin: 0 0 var(--space-4); }
.auth-rodape { margin-top: var(--space-5); text-align: center; font-size: 14px; }
.auth-mensagem { padding: 12px 14px; border-radius: var(--radius-md); font-size: 14px; margin-bottom: var(--space-4); }
.auth-mensagem ul { margin: 0; padding-left: 18px; }
.auth-mensagem--erro { background: #FDECEC; color: #8A1C1C; border: 1px solid #F5C2C2; }
.auth-mensagem--info { background: #EAF2FB; color: #1E3A5F; border: 1px solid #C6DAF0; }

/* ---------- Aviso de expiração da sessão (RF-008) ---------- */
.aviso-sessao[hidden] { display: none; }
.search-suggestions { position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 50; max-height: min(65vh, 520px); overflow: auto; background: #fff; border: 1px solid var(--gray-200); border-radius: var(--radius-md); box-shadow: 0 12px 28px #16283b33; padding: 8px; }
.search-suggestions.hidden { display: none; }
.search-suggestions-title { display: block; padding: 9px 10px 4px; color: var(--gray-600); font-size: 12px; text-transform: uppercase; }
.search-suggestions a { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border-radius: 6px; color: var(--gray-900); text-decoration: none; }
.search-suggestions a:hover, .search-suggestions a:focus { background: var(--gray-100); }
.search-suggestions small { color: var(--gray-600); }
.search-suggestions p { padding: 8px 10px; }
.busca-filtros { display: grid; gap: 12px; margin-bottom: 16px; }
.busca-filtros .form-actions { display: flex; flex-wrap: wrap; }
.busca-filtros input[type=search] { flex: 1; min-width: 180px; }
.busca-grupo { margin-bottom: 16px; }
.busca-grupo ul { margin: 0; padding: 0; list-style: none; }
.busca-grupo li { border-bottom: 1px solid var(--gray-100); }
.busca-grupo li a { display: flex; flex-direction: column; gap: 3px; padding: 10px 0; text-decoration: none; }
.dashboard-atalhos { display: flex; flex-wrap: wrap; gap: 8px; }
.dashboard-linha { display: flex; flex-direction: column; gap: 4px; padding: 10px 0; border-bottom: 1px solid var(--gray-100); text-decoration: none; color: inherit; }
.dashboard-linha small { color: var(--gray-600); }
.dashboard-alerta { border-left: 4px solid var(--color-danger); padding-left: 10px; }
.dashboard-financeiro { display: block; color: inherit; text-decoration: none; }
.dashboard-financeiro .finance-card { min-width: 0; }
.dashboard-financeiro .finance-value { display: block; overflow-wrap: anywhere; }