/* =====================================================================
   MCF Jurídico — Redesign 2026 (estilo Atlas AI + Elera)
   Carregado DEPOIS de style.css: redefine tokens e sobrescreve o visual
   dos componentes compartilhados. Tema claro é o padrão; escuro opcional.
   ===================================================================== */

/* ── TOKENS (CLARO) ─────────────────────────────────────── */
:root,
[data-theme="light"] {
  --bg:        #F6F6F3;
  --bg2:       #FFFFFF;
  --bg3:       #EFEFEA;
  --bg4:       #F1F1ED;
  --card:      #FFFFFF;
  --card2:     #F6F6F3;
  --border:    #E8E8E3;
  --border2:   #D6D6CF;
  --text:      #16171A;
  --text2:     #3D4045;
  --text3:     #6A6D72;
  --muted:     #6A6D72;
  --white:     #16171A;

  /* acento: verde-limão (fundo) + verde-escuro (texto/ícone) */
  --lime:      #C8F169;
  --lime-soft: #EEF9D6;
  --lime-line: #CFEA9A;
  --ink:       #16171A;
  --gold:      #4D7C0F;
  --gold2:     #3F6A0B;
  --gold-hover:#3F6A0B;
  --gold-bg:   #EEF9D6;
  --gold-dim:  #EEF9D6;

  --blue:      #2457C5;
  --blue-mid:  #2457C5;
  --blue-lt:   #2457C5;
  --blue-dim:  #E7EEFB;
  --green:     #1F6B36;
  --success:   #1F6B36;
  --green-dim: #E6F4EA;
  --yellow:    #8A5A00;
  --warn:      #8A5A00;
  --orange:    #A14A0F;
  --yellow-dim:#FCF1D9;
  --red:       #B42318;
  --danger:    #B42318;
  --red-dim:   #FDE8E6;
  --purple:    #5B2C9E;

  --sidebar-w: 248px;
  --radius:    10px;
  --radius-lg: 14px;
  --shadow:    0 1px 2px rgba(22,23,26,.04), 0 8px 24px rgba(22,23,26,.06);
  --shadow-md: 0 2px 6px rgba(22,23,26,.06), 0 12px 32px rgba(22,23,26,.08);
  --font-display:'Geist', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body:   'Geist', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:   'Geist Mono', 'SFMono-Regular', Consolas, monospace;
}

/* ── TOKENS (ESCURO) ────────────────────────────────────── */
[data-theme="dark"] {
  --bg:        #111213;
  --bg2:       #18191B;
  --bg3:       #0C0D0E;
  --bg4:       #222326;
  --card:      #18191B;
  --card2:     #1E1F22;
  --border:    #2A2C2F;
  --border2:   #3A3C40;
  --text:      #F2F2EE;
  --text2:     #C4C6CA;
  --text3:     #9A9DA2;
  --muted:     #9A9DA2;
  --white:     #F2F2EE;

  --lime:      #C8F169;
  --lime-soft: rgba(200,241,105,.12);
  --lime-line: rgba(200,241,105,.28);
  --ink:       #F2F2EE;
  --gold:      #C8F169;
  --gold2:     #B5E04F;
  --gold-hover:#B5E04F;
  --gold-bg:   rgba(200,241,105,.12);
  --gold-dim:  rgba(200,241,105,.12);

  --blue:      #7FA8F5;
  --blue-mid:  #7FA8F5;
  --blue-lt:   #9BBCF8;
  --blue-dim:  rgba(127,168,245,.14);
  --green:     #7BD88F;
  --success:   #7BD88F;
  --green-dim: rgba(123,216,143,.14);
  --yellow:    #F0C35A;
  --warn:      #F0C35A;
  --orange:    #F29A5B;
  --yellow-dim:rgba(240,195,90,.14);
  --red:       #F2867D;
  --danger:    #F2867D;
  --red-dim:   rgba(242,134,125,.14);
  --purple:    #C3A2F5;

  --shadow:    0 8px 24px rgba(0,0,0,.35);
  --shadow-md: 0 12px 32px rgba(0,0,0,.45);
}

/* ── BASE ───────────────────────────────────────────────── */
html, body { background: var(--bg); color: var(--text); font-family: var(--font-body); letter-spacing: -0.003em; }
::selection { background: var(--lime); color: #16171A; }
*:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border2); }
h1,h2,h3,h4 { letter-spacing: -0.01em; }

/* ── BOTÕES ─────────────────────────────────────────────── */
.btn { border-radius: var(--radius); font-weight: 500; padding: 9px 16px; min-height: 38px; }
.btn-sm { min-height: 32px; padding: 6px 12px; }
.btn-primary,
.btn-gold { background: #16171A; color: #FFFFFF; border-color: #16171A; font-weight: 600; }
.btn-primary:not(:disabled):hover,
.btn-gold:not(:disabled):hover { background: #2B2D31; border-color: #2B2D31; }
[data-theme="dark"] .btn-primary,
[data-theme="dark"] .btn-gold { background: var(--lime); color: #16171A; border-color: var(--lime); }
[data-theme="dark"] .btn-primary:not(:disabled):hover,
[data-theme="dark"] .btn-gold:not(:disabled):hover { background: #B5E04F; border-color: #B5E04F; }
.btn-secondary, .btn-ghost { background: var(--card); color: var(--text); border-color: var(--border); }
.btn-secondary:not(:disabled):hover, .btn-ghost:not(:disabled):hover { background: var(--bg4); border-color: var(--border2); color: var(--text); }
.btn-danger { background: var(--red-dim); color: var(--danger); border-color: transparent; }
.btn-success { background: var(--green-dim); color: var(--success); border-color: transparent; }
.btn-lime { background: var(--lime); color: #16171A; border-color: var(--lime); font-weight: 600; }
.btn-lime:not(:disabled):hover { background: #B5E04F; border-color: #B5E04F; }
.btn-link { color: var(--blue); font-weight: 500; font-size: 13px; }
.btn-icon { border-radius: 8px; }

/* ── FORMULÁRIOS ────────────────────────────────────────── */
.form-group label { font-size: 12px; color: var(--text2); font-weight: 500; }
.form-group input, .form-group select, .form-group textarea,
.toolbar input[type="text"], .toolbar input[type="date"], .toolbar select, .search-input,
[data-theme="light"] .form-group input, [data-theme="light"] .form-group select, [data-theme="light"] .form-group textarea,
[data-theme="light"] .toolbar input, [data-theme="light"] .toolbar select, [data-theme="light"] .search-input {
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); color: var(--text);
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus,
.toolbar input:focus, .toolbar select:focus, .search-input:focus {
  border-color: var(--gold); box-shadow: 0 0 0 3px var(--lime-soft);
}

/* ── LOGIN ──────────────────────────────────────────────── */
.login-screen, [data-theme="light"] .login-screen { background: var(--bg); }
.login-card, [data-theme="light"] .login-card { background: var(--card); border-color: var(--border); border-radius: 18px; box-shadow: var(--shadow-md); }
.login-logo-img { filter: none; width: 64px; height: 64px; }
.login-brand h1 { font-size: 22px; letter-spacing: -0.02em; }
.login-brand p { color: var(--text3); letter-spacing: .04em; }

/* ── LAYOUT / SIDEBAR ───────────────────────────────────── */
.app-layout { background: var(--bg); }
.sidebar, [data-theme="light"] .sidebar { background: var(--bg2); border-right: 1px solid var(--border); }
.sidebar-brand { height: 64px; min-height: 64px; padding: 0 18px; border-bottom: 0; gap: 10px; }
.brand-logo-img { height: 30px; width: 30px; border-radius: 9px; object-fit: cover; }
.brand-title { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; }
.brand-sub { color: var(--text3); font-weight: 500; letter-spacing: .02em; text-transform: none; font-size: 11px; }
.sidebar-nav { padding: 6px 12px 12px; }
.nav-section + .nav-section { margin-top: 14px; }
.nav-section-label { font-size: 11px; font-weight: 500; letter-spacing: .06em; color: var(--text3); padding: 0 10px; margin-bottom: 4px; }
.nav-item { padding: 9px 10px; border-radius: var(--radius); color: var(--text2); font-size: 14px; font-weight: 500; }
.nav-item .nav-icon, .nav-item svg.nav-icon { width: 17px; height: 17px; stroke-width: 1.75; }
.nav-item:hover, [data-theme="light"] .nav-item:hover { background: var(--bg4); color: var(--text); }
.nav-item.active, [data-theme="light"] .nav-item.active { background: var(--lime); color: #16171A; font-weight: 600; }
.fin-badge { background: var(--bg4); color: var(--text2); font-weight: 600; font-size: 11px; padding: 1px 7px; }
.nav-item.active .fin-badge { background: #16171A; color: var(--lime); }
.nav-badge { margin-left: auto; font-size: 11px; font-weight: 600; padding: 1px 7px; border-radius: 999px; background: var(--red-dim); color: var(--danger); }

.sidebar-footer { border-top: 1px solid var(--border); }
.sf-user { padding: 12px 14px; }
.sidebar-user-avatar { border-radius: 50%; background: var(--lime-soft); border: 0; color: var(--gold); box-shadow: none; }
.user-perfil { color: var(--success); text-transform: none; letter-spacing: 0; opacity: 1; display: flex; align-items: center; gap: 6px; }
.user-perfil::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: #3FB950; flex-shrink: 0; }
.sf-btns { opacity: 1; }

/* ── TOPBAR ─────────────────────────────────────────────── */
.topbar, [data-theme="light"] .topbar { height: 72px; min-height: 72px; background: var(--bg2); border-bottom: 1px solid var(--border); padding: 0 28px; }
.topbar-heading { display: flex; flex-direction: column; min-width: 0; }
.topbar-title { font-size: 19px; font-weight: 600; letter-spacing: -0.015em; }
.topbar-sub { font-size: 13px; color: var(--text3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar-actions { gap: 10px; }
.topbar-search { display: flex; align-items: center; gap: 8px; height: 40px; width: 280px; padding: 0 12px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg); color: var(--text3); }
.topbar-search input { border: 0; outline: none; background: transparent; color: var(--text); font-size: 13px; flex: 1; min-width: 0; }
.topbar-search input::placeholder { color: var(--text3); }
.topbar-search kbd { font: 500 11px var(--font-body); border: 1px solid var(--border2); border-radius: 6px; padding: 1px 6px; color: var(--text3); }
.topbar-search svg { width: 16px; height: 16px; flex-shrink: 0; }
.topbar-chip { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: 999px; font-size: 13px; font-weight: 500; white-space: nowrap; }
.topbar-chip.warn { background: var(--yellow-dim); color: var(--yellow); }
.topbar-chip.warn::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.btn-alerta, .btn-theme-toggle, [data-theme="light"] .btn-theme-toggle {
  width: 40px; height: 40px; border-radius: var(--radius); border: 1px solid var(--border); background: var(--card); color: var(--text2);
}
.btn-alerta svg, .btn-theme-toggle svg { width: 17px; height: 17px; stroke-width: 1.75; }
.btn-alerta:hover, .btn-theme-toggle:hover { background: var(--bg4); color: var(--text); }
.btn-ia { display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 14px; border-radius: var(--radius); border: 0; background: #16171A; color: #FFFFFF; font-weight: 600; font-size: 13px; }
.btn-ia svg { width: 15px; height: 15px; color: var(--lime); }
.btn-ia:hover { background: #2B2D31; }
[data-theme="dark"] .btn-ia { background: var(--lime); color: #16171A; }
[data-theme="dark"] .btn-ia svg { color: #16171A; }
.topbar-user-avatar { width: 36px; height: 36px; background: var(--lime-soft); border: 0; color: var(--gold); }
.alerta-count { background: var(--danger); }

/* ── CONTEÚDO ───────────────────────────────────────────── */
.main-content, [data-theme="light"] .main-content { background: var(--bg); padding: 24px 28px; }
.page-title, .page-header h2 { font-size: 20px; font-weight: 600; letter-spacing: -0.015em; }
.page-tabs { border-bottom: 0; gap: 8px; flex-wrap: wrap; }
.tab-btn { border: 1px solid var(--border); border-radius: 999px; padding: 7px 14px; margin: 0; background: var(--card); color: var(--text2); font-size: 13px; }
.tab-btn:hover { color: var(--text); background: var(--bg4); }
.tab-btn.active { background: #16171A; color: #FFFFFF; border-color: #16171A; }
[data-theme="dark"] .tab-btn.active { background: var(--lime); color: #16171A; border-color: var(--lime); }

/* ── CARDS ──────────────────────────────────────────────── */
.card, .kpi-card, .chart-card, .table-wrapper, .detail-section, .kanban-col,
.agendamento-card, .ag-card, .template-card,
[data-theme="light"] .card, [data-theme="light"] .kpi-card, [data-theme="light"] .chart-card,
[data-theme="light"] .table-wrapper, [data-theme="light"] .detail-section, [data-theme="light"] .kanban-col {
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg);
}
.card::before, .kpi-card::before { display: none; }
.card { min-height: 0; padding: 18px; justify-content: flex-start; }
.card-label, .kpi-label { text-transform: none; letter-spacing: 0; font-size: 12px; font-weight: 500; color: var(--text3); }
.card-value, .kpi-value { font-size: 24px; font-weight: 600; letter-spacing: -0.02em; }
.card-header { border-bottom: 1px solid var(--border); }
.card-header h3, .chart-card h3 { font-size: 15px; font-weight: 600; color: var(--text); }
.card-icon-wrap, .kpi-icon { border-radius: 50%; border: 1px solid var(--border); background: transparent !important; color: var(--text2) !important; }

/* ── TABELAS ────────────────────────────────────────────── */
.table-wrapper { overflow-x: auto; }
.table-header { padding: 16px 18px; border-bottom: 0; }
.table-title { text-transform: none; letter-spacing: 0; font-size: 15px; font-weight: 600; color: var(--text); }
thead, [data-theme="light"] thead { background: transparent; }
th { text-transform: none; letter-spacing: 0; font-size: 12px; font-weight: 500; color: var(--text3); border-bottom: 1px solid var(--border); padding: 10px 16px; }
td, [data-theme="light"] td { border-top: 1px solid var(--border); padding: 12px 16px; }
tbody tr:first-child td { border-top: 0; }
tr:hover td, [data-theme="light"] tr:hover td { background: var(--bg); }
tfoot td { background: var(--bg); }

/* ── BADGES ─────────────────────────────────────────────── */
.badge { border: 0 !important; padding: 3px 9px; font-weight: 600; font-size: 11px; border-radius: 999px; }
.badge-area, .badge-empresarial, .badge-Empresarial, .badge-constitucional, .badge-Constitucional { background: var(--lime-soft); color: var(--gold); }

/* ── KANBAN ─────────────────────────────────────────────── */
.kanban-col, [data-theme="light"] .kanban-col { background: var(--bg3); border-color: transparent; }
.kanban-col-header, [data-theme="light"] .kanban-col-header { background: transparent; border-bottom: 0; }
.kanban-col-title { text-transform: none; letter-spacing: 0; font-size: 14px; color: var(--text); }
.kanban-card, [data-theme="light"] .kanban-card { background: var(--card); border: 1px solid var(--border); border-radius: 12px; }

/* ── MODAL / TOAST / ALERTAS ────────────────────────────── */
.modal-overlay { background: rgba(22,23,26,.45); backdrop-filter: blur(2px); }
.modal, [data-theme="light"] .modal { background: var(--card); border-color: var(--border); border-radius: 18px; box-shadow: var(--shadow-md); }
.modal-header, [data-theme="light"] .modal-header { background: var(--card); border-bottom: 1px solid var(--border); }
.toast { background: var(--card); color: var(--text); border-color: var(--border); box-shadow: var(--shadow-md); border-radius: 12px; }
.toast-success { border-left: 0; box-shadow: inset 3px 0 0 #3FB950, var(--shadow-md); }
.toast-error { box-shadow: inset 3px 0 0 var(--danger), var(--shadow-md); }
.toast-info { box-shadow: inset 3px 0 0 var(--blue), var(--shadow-md); }
.alertas-panel, [data-theme="light"] .alertas-panel { top: 80px; right: 24px; width: 340px; background: var(--card); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); }
.alertas-header, [data-theme="light"] .alertas-header { background: var(--card); }
.alertas-header h4 { text-transform: none; letter-spacing: 0; font-size: 14px; }
.alerta-item.nao-lido { background: var(--lime-soft); }
.spinner { border-top-color: var(--gold); }

/* =====================================================================
   PAINEL (dashboard) — componentes novos
   ===================================================================== */
.dash { display: flex; flex-direction: column; gap: 18px; }
.dash-banner { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; background: var(--lime-soft); border: 1px solid var(--lime-line); border-radius: var(--radius-lg); padding: 14px 16px; }
.dash-banner-icon { width: 36px; height: 36px; border-radius: 10px; background: var(--lime); color: #16171A; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.dash-banner-icon svg { width: 18px; height: 18px; }
.dash-banner-text { flex: 1 1 320px; min-width: 0; }
.dash-banner-title { font-size: 14px; font-weight: 600; color: var(--text); }
.dash-banner-sub { font-size: 13px; color: var(--text2); }

.kpi-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.kpi { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 16px; display: flex; align-items: center; gap: 14px; text-align: left; color: inherit; font: inherit; width: 100%; }
button.kpi { cursor: pointer; transition: border-color .15s, box-shadow .15s; }
button.kpi:hover { border-color: var(--border2); box-shadow: var(--shadow); }
.kpi-ic { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; color: var(--text2); flex-shrink: 0; }
.kpi-ic svg { width: 18px; height: 18px; stroke-width: 1.75; }
.kpi-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.kpi-lbl { font-size: 12px; color: var(--text3); }
.kpi { align-items: flex-start; }
.kpi-val { font-size: 22px; font-weight: 600; letter-spacing: -0.02em; color: var(--text); white-space: nowrap; }
.kpi-pill { margin-top: 6px; }

.pill { display: inline-flex; align-items: center; font-size: 12px; font-weight: 600; padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
.pill-green { background: var(--green-dim); color: var(--success); }
.pill-red { background: var(--red-dim); color: var(--danger); }
.pill-amber { background: var(--yellow-dim); color: var(--warn); }
.pill-blue { background: var(--blue-dim); color: var(--blue); }
.pill-gray { background: var(--bg4); color: var(--text2); }
.pill-count { font-size: 12px; font-weight: 500; background: var(--bg4); color: var(--text2); border-radius: 999px; padding: 2px 8px; }

.dash-row { display: flex; flex-wrap: wrap; gap: 18px; align-items: stretch; }
.panel { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 18px; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.panel-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.panel-head h3 { margin: 0; font-size: 15px; font-weight: 600; color: var(--text); }
.panel-head .spacer { flex: 1; }
.panel-meta { font-size: 12px; color: var(--text3); }
.panel-wide { flex: 999 1 520px; }
.panel-side { flex: 1 1 320px; }
.panel-third { flex: 1 1 290px; }
.panel-scroll { overflow-x: auto; }
.panel table { min-width: 560px; }
.panel th:first-child, .panel td:first-child { padding-left: 4px; }
.panel th:last-child, .panel td:last-child { padding-right: 4px; }
.panel tr:hover td { background: transparent; }
.panel tbody tr { cursor: pointer; }
.panel tbody tr:hover td { background: var(--bg); }

.who { display: flex; align-items: center; gap: 10px; min-width: 0; }
.av { width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 600; flex-shrink: 0; }
.av-1 { background: #E9F8C9; color: #2C4A0E; }
.av-2 { background: #FCE3D3; color: #8A3B0F; }
.av-3 { background: #E3ECFB; color: #1E4BA8; }
.av-4 { background: #EFE6FB; color: #5B2C9E; }
[data-theme="dark"] .av-1 { background: rgba(200,241,105,.16); color: #D9F59A; }
[data-theme="dark"] .av-2 { background: rgba(242,154,91,.16); color: #F6BC91; }
[data-theme="dark"] .av-3 { background: rgba(127,168,245,.16); color: #AFC8F8; }
[data-theme="dark"] .av-4 { background: rgba(195,162,245,.16); color: #D6C1F8; }
.who-name { font-weight: 500; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.who-sub { font-size: 12px; color: var(--text3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.num { font-variant-numeric: tabular-nums; }

.stat-trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; text-align: center; }
.stat-trio > div { background: var(--bg); border-radius: 10px; padding: 10px 6px; }
.stat-trio b { display: block; font-size: 16px; font-weight: 600; color: var(--text); }
.stat-trio span { font-size: 11px; color: var(--text3); }

.bars { display: flex; align-items: flex-end; gap: 8px; height: 170px; border-bottom: 1px solid var(--border); padding-top: 8px; }
.bars .bar { flex: 1 1 0; max-width: 34px; margin: 0 auto; border-radius: 8px 8px 3px 3px; background: var(--bg3); min-height: 4px; position: relative; }
.bars .bar.hi { background: var(--lime); }
.bars-x { display: flex; justify-content: space-between; font-size: 11px; color: var(--text3); }
.bars-x span { flex: 1; text-align: center; }

.cal-dark { background: #1B1C1E; color: #F2F2EE; border: 0; }
[data-theme="dark"] .cal-dark { background: #0C0D0E; border: 1px solid var(--border); }
.cal-dark .panel-head h3 { color: #F2F2EE; }
.cal-dark .panel-meta { color: var(--lime); }
.cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; font-size: 11px; color: #A9ABAF; text-align: center; }
.cal-grid .d { height: 30px; width: 30px; margin: 0 auto; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #8E9095; }
.cal-grid .d.m { background: #3A3C40; color: #F2F2EE; }
.cal-grid .d.t { background: var(--lime); color: #16171A; font-weight: 600; }
.cal-next { display: flex; gap: 12px; align-items: center; padding: 8px 0; border-top: 1px solid #2E3034; }
.cal-next-date { width: 40px; text-align: center; flex-shrink: 0; }
.cal-next-date b { display: block; font-size: 17px; font-weight: 600; }
.cal-next-date span { font-size: 11px; color: #A9ABAF; }
.cal-next-title { font-size: 13px; font-weight: 500; }
.cal-next-sub { font-size: 12px; color: #A9ABAF; }

.bubbles { position: relative; height: 170px; }
.bubble { position: absolute; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 600; text-align: center; line-height: 1.1; }
.legend { display: flex; flex-wrap: wrap; gap: 14px; font-size: 12px; color: var(--text2); }
.legend i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; }

.task-row { display: flex; align-items: center; gap: 12px; padding: 9px 0; border-top: 1px solid var(--border); }
.task-row:first-of-type { border-top: 0; }
.task-main { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.task-title { font-size: 13px; font-weight: 500; color: var(--text); }
.task-sub { font-size: 12px; color: var(--text3); }
.empty-mini { font-size: 13px; color: var(--text3); padding: 18px 0; text-align: center; }

/* ── RESPONSIVO ─────────────────────────────────────────── */
@media (max-width: 900px) {
  .topbar-search, .topbar-chip { display: none; }
  .main-content { padding: 18px 16px; }
  .topbar { padding: 0 16px; }
}

/* ── Cadastro rápido de cliente dentro do formulário de processo ── */
.novo-cli-box { background: var(--lime-soft); border: 1px solid var(--lime-line); border-radius: 12px; padding: 14px 14px 12px; margin: -4px 0 16px; }
.novo-cli-head { display: flex; flex-direction: column; gap: 2px; margin-bottom: 12px; }
.novo-cli-head strong { font-size: 13px; color: var(--text); }
.novo-cli-head span { font-size: 12px; color: var(--text2); }
.novo-cli-box .form-group { margin-bottom: 10px; }
.novo-cli-box input { background: var(--card) !important; }
#btn-toggle-novo-cli { padding: 0; font-size: 12px; line-height: inherit; }

/* ── Perfis e sigilo ── */
.check-sigilo { display: flex !important; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--card); cursor: pointer; margin: 0 !important; color: var(--text) !important; font-size: 13px !important; }
.check-sigilo input { width: 16px !important; height: 16px; margin-top: 2px; accent-color: #16171A; flex-shrink: 0; }
.check-sigilo small { color: var(--text3); font-weight: 400; }
.check-sigilo.is-disabled { opacity: .6; cursor: not-allowed; }
.tag-sigilo { display: inline-flex; align-items: center; font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 999px; background: var(--bg4); color: var(--text2); margin-right: 4px; white-space: nowrap; }
.perfis-legenda { margin-top: 12px; display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--text2); background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 14px; }

/* ── Equipe: status, remover, inativos ─────────────────────────────── */
.linha-inativa td { color: var(--text3); }
.linha-inativa td:first-child { text-decoration: none; }
.switch-ativo { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; user-select: none; }
.switch-ativo input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.switch-trilho { width: 38px; height: 22px; border-radius: 999px; background: var(--bg4); border: 1px solid var(--border); position: relative; transition: background .15s; flex-shrink: 0; }
.switch-bola { position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.25); transition: transform .15s; }
.switch-ativo input:checked + .switch-trilho { background: var(--success); border-color: var(--success); }
.switch-ativo input:checked + .switch-trilho .switch-bola { transform: translateX(16px); }
.switch-ativo input:focus-visible + .switch-trilho { outline: 2px solid var(--accent, #a3e635); outline-offset: 2px; }
.switch-txt { font-size: 13px; font-weight: 500; }
.switch-ativo input:checked ~ .switch-txt { color: var(--success); }
.switch-ativo input:not(:checked) ~ .switch-txt { color: var(--danger); }
.btn-remover-usuario { width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; border: 1px solid var(--border); background: transparent; color: var(--text2); cursor: pointer; transition: background .15s, color .15s, border-color .15s; }
.btn-remover-usuario:hover, .btn-remover-usuario:focus-visible { background: var(--red-dim); color: var(--danger); border-color: var(--danger); }

/* ── Troca de senha obrigatória (primeiro acesso) ──────────────────── */
.troca-senha-overlay { position: fixed; inset: 0; z-index: 2000; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(10,12,10,.55); backdrop-filter: blur(6px); }
.troca-senha-card { width: 100%; max-width: 420px; background: var(--card, var(--bg2)); color: var(--text); border: 1px solid var(--border); border-radius: 18px; padding: 28px; box-shadow: 0 20px 60px rgba(0,0,0,.3); }
.troca-senha-card h2 { margin: 12px 0 6px; font-size: 20px; }
.troca-senha-card p { margin: 0 0 18px; color: var(--text2); font-size: 14px; line-height: 1.5; }
.troca-senha-icone { width: 48px; height: 48px; border-radius: 14px; display: flex; align-items: center; justify-content: center; background: var(--green-dim); color: var(--success); }
.troca-senha-erro { background: var(--red-dim); color: var(--danger); font-size: 13px; padding: 8px 10px; border-radius: 8px; margin-bottom: 12px; }

/* ── Recuperação de senha (tela de login) ──────────────────────────── */
.link-esqueci { display: inline-block; margin-top: 8px; font-size: 13px; color: var(--text2); text-decoration: none; }
.link-esqueci:hover, .link-esqueci:focus-visible { color: var(--text); text-decoration: underline; }
.login-subtitulo { font-size: 18px; margin: 0 0 6px; text-align: left; }
.login-explica { font-size: 13.5px; color: var(--text2); line-height: 1.5; margin: 0 0 16px; }
.form-sucesso { color: var(--success); font-size: 13px; padding: 10px 14px; background: var(--green-dim); border-radius: 10px; margin-bottom: 12px; line-height: 1.45; }
/* senha provisória gerada pelo admin */
.senha-gerada { display: flex; gap: 8px; align-items: center; margin: 14px 0 6px; }
.senha-gerada code { flex: 1; font-size: 20px; letter-spacing: .08em; padding: 12px 14px; border-radius: 10px; background: var(--bg3, var(--bg2)); border: 1px solid var(--border); user-select: all; }
.btn-icone-equipe { width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; border: 1px solid var(--border); background: transparent; color: var(--text2); cursor: pointer; margin-right: 6px; transition: background .15s, color .15s, border-color .15s; }
.btn-icone-equipe:hover, .btn-icone-equipe:focus-visible { background: var(--bg3, var(--bg2)); color: var(--text); border-color: var(--text3); }