/* Identidade Nexo Jurídico: hierarquia editorial, superfícies sóbrias e cor com função. */
:root {
  --background: #f5f6f7;
  --surface: #fff;
  --surface-alt: #f8f9fa;
  --ink: #17212b;
  --muted: #5d6a76;
  --faint: #798591;
  --primary: #245c99;
  --primary-hover: #194875;
  --primary-soft: #eaf1f7;
  --border: #dfe4e8;
  --border-strong: #bfc9d1;
  --shadow: 0 20px 60px rgba(18, 33, 48, .16);
  --radius-sm: 4px;
  --radius: 5px;
  --radius-card: 7px;
  --radius-modal: 9px;
  --sidebar-width: 224px;
}

body { font-size: 13px; line-height: 1.5; }
h1 { font-size: clamp(25px, 2vw, 30px); letter-spacing: -.045em; font-weight: 650; }
h2 { letter-spacing: -.025em; }
:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }

.sidebar { background: #1d2933; color: #acbac5; }
.brand-row { height: 68px; padding-inline: 21px; border-color: rgba(255, 255, 255, .12); gap: 12px; }
.brand-mark {
  width: 35px; height: 35px; border-radius: 5px;
  background: transparent; border: 1px solid currentColor;
  color: inherit; font-size: 20px; font-weight: 750; letter-spacing: -.13em;
  padding-right: 3px;
}
.sidebar .brand-mark { background: transparent; border-color: #8298a9; color: #fff; }
.brand-word { display: flex; flex-direction: column; gap: 1px; font-size: 15px; line-height: 1; letter-spacing: .15em; font-weight: 750; }
.brand-word span { color: inherit; font-size: 9px; font-weight: 600; letter-spacing: .27em; }
.sidebar .brand-word span { color: #a9bac8; }
.sidebar-nav { padding: 23px 10px; }
.nav-label { padding-left: 12px; font-size: 10px; letter-spacing: .16em; color: #8597a5; }
.nav-item { height: 41px; border-radius: 4px; font-size: 12px; font-weight: 550; }
.nav-item.active { background: #314554; color: #fff; }
.nav-item.active::before { height: 22px; background: #8db8df; border-radius: 0; }
.nav-item:hover { background: #2b3c49; }
.sidebar-foot { border-color: rgba(255, 255, 255, .12); }
.user-card { border-radius: 4px; }
.user-card strong { font-size: 12px; }
.sidebar .avatar { background: #3a5060; color: #f4f8fa; }

.topbar { height: 64px; padding-inline: clamp(24px, 3vw, 44px); }
.breadcrumbs { font-size: 11px; letter-spacing: .01em; }
.breadcrumbs .icon { width: 13px; height: 13px; }
.breadcrumbs strong { font-weight: 650; }
.top-actions .date { text-transform: capitalize; }
.top-actions .avatar { width: 30px; height: 30px; border-radius: 5px; }
.page { padding: 31px clamp(24px, 3vw, 44px) 52px; }
.page-header { margin-bottom: 23px; align-items: end; }
.page-header p { font-size: 12px; margin-top: 5px; }

.button, .icon-button { height: 35px; box-shadow: none; font-weight: 600; font-size: 12px; }
.button:hover, .icon-button:hover { border-color: #aebcc8; background: #f7f9fa; }
.button.primary { box-shadow: none; }
.button.primary:hover { background: var(--primary-hover); }
.button:active, .icon-button:active { transform: translateY(1px); }
.input, .select, .textarea { border-color: #d7dfe5; border-radius: 5px; height: 37px; font-size: 12px; }
.textarea { height: auto; }
.input:focus, .select:focus, .textarea:focus { border-color: var(--primary); box-shadow: 0 0 0 2px rgba(36, 92, 153, .12); }
.field label { color: #33414d; font-size: 11px; font-weight: 650; }
.avatar, .avatar.tone-1, .avatar.tone-2, .avatar.tone-3, .avatar.tone-4 {
  background: #e9eef2; color: #40586b; border-radius: 5px; font-weight: 700;
}
.badge { border: 1px solid currentColor; background: transparent !important; padding: 3px 6px; font-size: 9px; font-weight: 700; letter-spacing: .055em; }
.badge::before { display: none; }
.badge.blue { color: #356b9e; }
.badge.green { color: #237250; }
.badge.amber { color: #9a6d1b; }
.badge.orange { color: #a45f31; }
.badge.red { color: #b94040; }
.badge.gray { color: #6b7884; }
.eyebrow { color: var(--primary); font-size: 10px; letter-spacing: .17em; }

.metrics {
  gap: 0; margin-bottom: 28px; border: 1px solid var(--border);
  border-radius: var(--radius-card); background: #fff; overflow: hidden;
}
.metric { min-height: 94px; border: 0; border-right: 1px solid var(--border); border-radius: 0; padding: 19px 22px; }
.metric:last-child { border-right: 0; }
.metric .label { color: #65727d; font-size: 11px; font-weight: 550; }
.metric strong { margin-top: 7px; font-size: 27px; font-weight: 630; letter-spacing: -.04em; }
.metric-icon { display: none; }
.section-toolbar { margin-bottom: 10px; }
.section-toolbar h2 { font-size: 14px; font-weight: 650; }
.section-toolbar .result-count { margin-left: 9px; font-weight: 450; }
.chips { gap: 0; flex-wrap: wrap; row-gap: 6px; margin: 0 0 15px; padding-bottom: 8px; border-bottom: 1px solid var(--border); }
.chip { border: 0; border-bottom: 2px solid transparent; border-radius: 0; padding: 9px 13px 10px; background: transparent; font-size: 11px; font-weight: 550; }
.chip:hover { color: var(--ink); background: transparent; }
.chip.active { border-color: var(--primary); color: var(--primary); background: transparent; }
.advanced-filters { border-radius: 6px; }
.lead-grid { gap: 12px; }
.lead-card { gap: 13px; min-height: 236px; border-radius: 7px; padding: 17px 18px; box-shadow: none; }
.lead-card:hover { transform: translateY(-2px); border-color: #9db4c8; box-shadow: 0 7px 20px rgba(24, 43, 58, .07); }
.lead-head-main strong { font-size: 14px; font-weight: 650; }
.lead-head-main .phone { color: #6d7983; }
.lead-service { min-height: 0; color: #263843; font-size: 12px; font-weight: 550; }
.lead-meta { border-color: #e9edf0; gap: 10px; }
.lead-meta .meta-label { color: #83909a; font-size: 9px; letter-spacing: .08em; }
.lead-meta .meta-value { color: #394a57; font-size: 11px; font-weight: 550; }
.lead-footer { border-color: #e9edf0; font-size: 10px; }
.empty { min-height: 210px; border-style: solid; background: #fff; }
.empty .empty-icon { border-radius: 5px; background: #edf2f6; }

.chat-layout { height: calc(100vh - 64px); grid-template-columns: minmax(300px, 340px) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); }
.conversation-panel { overflow-x: hidden; min-height: 0; }
.conversation-list { min-height: 0; }
.chat-main { min-height: 0; }
.chat-messages { min-height: 0; }
.conversation-head { padding: 22px 20px 13px; }
.conversation-head h1 { font-size: 23px; }
.conversation-filters { border-bottom: 1px solid var(--border); flex-wrap: wrap; overflow: visible; row-gap: 8px; }
.conversation-filters .chip { font-size: 10px; }
.conversation-item .badges { flex-wrap: wrap; }
.conversation-item { padding: 14px 20px; border-color: #ebeff1; }
.conversation-item:hover { background: #f6f8f9; }
.conversation-item.active { background: #eef3f7; box-shadow: inset 2px 0 var(--primary); }
.chat-main { background: #f5f7f8; }
.chat-header { height: 66px; }
.chat-messages { gap: 11px; }
.day-separator { background: #edf2f6; color: #5d6a76; letter-spacing: .1em; padding: 5px 11px; }
.loading-more { text-align: center; padding: 6px; margin-bottom: 4px; font-size: 11px; color: var(--muted); }
.bubble { border-radius: 8px 8px 8px 2px; }
.message.outgoing .bubble { background: #e9f1f7; border-color: #d2e0eb; border-radius: 8px 8px 2px 8px; }
.composer { padding-block: 11px; }

.panel, .settings-nav, .team-card, .integration-card, .detail-section, .document-row, .note { border-radius: 6px; }
.panel-header { padding: 17px 20px; }
.panel-header h2 { font-size: 14px; }
.settings-nav button { border-radius: 4px; }
.settings-nav button.active { background: #edf2f6; color: #234f70; }
.team-card .team-icon, .integration-card .team-icon, .security-row .team-icon, .document-row .file-icon { background: #edf2f6; color: #335f7e; border-radius: 5px; }
.table th { background: #f7f9fa; }
.table tbody tr:hover { background: #f5f8fa; }
.modal { border: 1px solid #d9e1e6; }
.modal-head { padding: 18px 22px; }
.modal-head h2 { font-size: 16px; }
.modal-head p { margin-top: 3px; }
.modal-body { padding: 20px 22px; }
.modal-foot { padding: 14px 22px; }
.lead-modal-summary .title h2 { font-size: 17px; }
.tabs { padding: 0 22px; }
.tab { font-size: 11px; padding: 12px 2px; font-weight: 650; }
.detail-section { padding: 15px; }
.detail-section h3 { font-size: 12px; }
.attach-menu { border-radius: 6px; }
.toast { background: #1d2933; border-radius: 5px; }
.input:focus-visible, .select:focus-visible, .textarea:focus-visible, .code-input:focus-visible { outline: none; }

.login-page { grid-template-columns: minmax(390px, 48%) minmax(430px, 52%); }
.login-side { background: #1d2933; padding: clamp(40px, 6vw, 88px); }
.login-side::after {
  width: auto; height: auto; inset: 0 0 0 40%; border: 0; border-radius: 0; box-shadow: none;
  background: repeating-linear-gradient(90deg, transparent 0, transparent 89px, rgba(255,255,255,.045) 90px);
}
.login-side .brand-row { position: relative; z-index: 1; }
.login-side .brand-mark { color: #fff; border-color: #8398a7; }
.login-side .brand-word { color: #fff; }
.login-side .brand-word span { color: #b5c4ce; }
.login-side-content { position: relative; z-index: 1; max-width: 530px; }
.login-kicker { display: block; margin-bottom: 21px; color: #a8bbca; font-size: 10px; font-weight: 650; letter-spacing: .19em; }
.login-side h1 { max-width: 560px; font-size: clamp(37px, 4vw, 53px); font-weight: 600; line-height: 1.08; letter-spacing: -.055em; }
.login-side p { max-width: 430px; color: #c1cbd3; line-height: 1.65; font-size: 14px; }
.login-side-rule { display: flex; flex-wrap: wrap; gap: 15px; margin-top: 53px; padding-top: 15px; border-top: 1px solid rgba(255,255,255,.25); color: #a7b9c6; font-size: 9px; font-weight: 650; letter-spacing: .07em; }
.login-side small { position: relative; z-index: 1; font-size: 10px; letter-spacing: .03em; }
.login-form-wrap { background: #fff; padding: 45px; }
.login-form { width: min(100%, 390px); }
.login-form h2 { margin: 10px 0 7px; font-size: 30px; font-weight: 650; }
.login-form > p { margin-bottom: 33px; font-size: 13px; }
.login-form .field { margin-bottom: 19px; }
.login-form .input, .login-form .select { height: 41px; font-size: 13px; }
.login-form .button.primary { height: 43px; margin-top: 11px; }
.login-form .bottom { margin-top: 20px; }
.auth-switch { margin-top: 27px; border-top: 1px solid var(--border); padding-top: 18px; }
.login-mobile-brand { display: none; }

@media (max-width: 1200px) {
  .metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .metric:nth-child(2) { border-right: 0; }
  .metric:nth-child(-n+2) { border-bottom: 1px solid var(--border); }
}
@media (max-width: 900px) {
  .login-form-wrap { flex-direction: column; }
  .login-mobile-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 38px; color: var(--ink); }
  .login-mobile-brand .brand-word span { color: var(--muted); }
}
@media (max-width: 680px) {
  .mobile-top { height: 58px; }
  .mobile-top .brand-row { gap: 9px; }
  .mobile-top .brand-word { font-size: 13px; }
  .mobile-top .brand-word span { font-size: 8px; }
  .page { padding: 24px 16px 88px; }
  .page-header { margin-bottom: 19px; }
  .page-actions { display: grid; grid-template-columns: max-content max-content minmax(0, 1fr); width: 100%; justify-content: stretch; }
  .page-actions .search-field { grid-column: 1 / -1; min-width: 0; }
  .page-actions .search-field .input { width: 100%; }
  .page-actions .button:not(.primary) { justify-self: start; }
  .page-actions .button.primary { justify-self: stretch; }
  .metrics { margin-bottom: 22px; }
  .metric { min-height: 78px; padding: 13px 15px; }
  .metric strong { font-size: 23px; }
  .lead-card { min-height: 0; }
  .chat-layout { height: calc(100dvh - 118px); }
  .chat-main { height: calc(100dvh - 58px); inset: 58px 0 0; }
  .login-form-wrap { min-height: 100vh; align-items: stretch; justify-content: center; padding: 26px; }
  .login-form { width: min(100%, 390px); margin: 0 auto; }
  .login-mobile-brand { width: min(100%, 390px); margin: 0 auto 37px; }
}