/* ============================================================
   Valorize 2.0 — Design system
   Editorial / corporate / refined.
   Fontes externas: Outfit + JetBrains Mono (carregadas no layout).
   ============================================================ */

:root {
    /* — Paleta — derivada do logo (azul-marinho + azul Valorize) — */
    --vlr-ink:           #0B1A33; /* texto principal, navbar */
    --vlr-ink-soft:      #1E2C44;
    --vlr-primary:       #1E5BBE; /* CTA, links, foco */
    --vlr-primary-hover: #194CA0;
    --vlr-primary-soft:  #E5EEFB; /* fundo de chip/badge primary */
    --vlr-accent:        #4DA3FF;

    --vlr-bg:            #F4F6FB; /* fundo geral — leve tom azul */
    --vlr-bg-soft:       #FAFBFE;
    --vlr-surface:       #FFFFFF;
    --vlr-surface-2:     #F8FAFC; /* heads de tabela */

    --vlr-border:        #E5EAF2;
    --vlr-border-soft:   #EEF1F6;
    --vlr-muted:         #64748B;
    --vlr-muted-soft:    #94A3B8;

    /* Cores semânticas — versões editoriais (não Bootstrap default) */
    --vlr-success:       #047857;
    --vlr-success-soft:  #DCFCE7;
    --vlr-warning:       #B45309;
    --vlr-warning-soft:  #FEF3C7;
    --vlr-danger:        #BE123C;
    --vlr-danger-soft:   #FFE4E6;
    --vlr-pend:          #C2410C; /* pendência: laranja escuro */
    --vlr-pend-soft:     #FFEDD5;
    --vlr-pend-soft-2:   #FFF7ED;

    /* Tipografia */
    --vlr-font-ui:   'Outfit', system-ui, -apple-system, "Segoe UI", sans-serif;
    --vlr-font-mono: 'JetBrains Mono', "SFMono-Regular", "Menlo", monospace;

    /* Forma */
    --vlr-radius:    12px;
    --vlr-radius-sm: 8px;
    --vlr-radius-lg: 16px;

    /* Sombras — quase imperceptíveis (estilo editorial) */
    --vlr-shadow-xs: 0 1px 2px rgba(11, 26, 51, .04), 0 1px 1px rgba(11, 26, 51, .03);
    --vlr-shadow-sm: 0 2px 4px rgba(11, 26, 51, .04), 0 4px 16px rgba(11, 26, 51, .04);
    --vlr-shadow-md: 0 6px 16px rgba(11, 26, 51, .06), 0 12px 32px rgba(11, 26, 51, .06);

    /* Easing */
    --vlr-ease: cubic-bezier(.4, 0, .2, 1);
}

/* ============================================================
   Base
   ============================================================ */

html { scroll-behavior: smooth; }

body {
    background: var(--vlr-bg);
    color: var(--vlr-ink);
    font-family: var(--vlr-font-ui);
    font-feature-settings: 'ss01';
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-size: 0.9375rem; /* 15px — base levemente menor para densidade editorial */
    line-height: 1.55;
}

/* Headings com tracking refinado */
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--vlr-font-ui);
    font-weight: 600;
    letter-spacing: -0.015em;
    color: var(--vlr-ink);
}
h1, .h1 { font-weight: 700; letter-spacing: -0.025em; }

/* Números (monetários, KPIs) — tabular mono */
.num, .total, .display-counter, .kpi h2, .kpi h3, .kpi h4 {
    font-family: var(--vlr-font-mono);
    font-feature-settings: 'tnum' on, 'lnum' on;
    letter-spacing: -0.02em;
    white-space: nowrap;   /* evita "R$" quebrar do valor quando a célula é estreita */
}

/* Links de texto */
a { color: var(--vlr-primary); text-decoration: none; transition: color .15s var(--vlr-ease); }
a:hover { color: var(--vlr-primary-hover); }

/* ============================================================
   Navbar
   ============================================================ */

.navbar {
    background: var(--vlr-ink) !important;
    padding: 0.35rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    box-shadow: 0 1px 0 rgba(11, 26, 51, .08);
}
.navbar .container { padding: 0 1.5rem; }

.navbar-brand { padding: 0; margin-right: 2rem; }

.navbar-nav .nav-link {
    position: relative;
    font-weight: 500;
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.72) !important;
    padding: 0.5rem 0.875rem !important;
    transition: color .15s var(--vlr-ease);
}
.navbar-nav .nav-link:hover,
.navbar-nav .nav-link.active { color: #fff !important; }

.navbar-nav .nav-link::after {
    content: '';
    position: absolute;
    left: 0.875rem; right: 0.875rem; bottom: 2px;
    height: 1px;
    background: var(--vlr-accent);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .25s var(--vlr-ease);
}
.navbar-nav .nav-link:hover::after { transform: scaleX(1); }

/* Avatar circular com iniciais (substitui apenas o nome) */
.navbar-user-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.8125rem;
    font-weight: 500;
    padding-right: 0.75rem;
}
.navbar-user-avatar {
    width: 28px; height: 28px;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--vlr-primary) 0%, var(--vlr-accent) 100%);
    color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 0.75rem; font-weight: 700;
    letter-spacing: -0.01em;
}

/* ============================================================
   Logo
   ============================================================ */

.logo-valorize { display: block; height: auto; }
.logo-valorize.logo-login   { max-width: 180px; margin: 0 auto 1.5rem; }
.logo-valorize.logo-navbar  { height: 22px; width: auto; filter: brightness(0) invert(1); }
.logo-valorize.logo-espelho { max-width: 120px; }

/* ============================================================
   Cards
   ============================================================ */

.card {
    border: 1px solid var(--vlr-border);
    border-radius: var(--vlr-radius);
    box-shadow: var(--vlr-shadow-xs);
    background: var(--vlr-surface);
}
.card-header {
    background: var(--vlr-surface-2);
    border-bottom: 1px solid var(--vlr-border);
    /* 1px a menos que o raio do card: o fundo do header não invade a borda
       de 1px do card (senão o contorno superior "falha" no hover c/ transform). */
    border-top-left-radius: calc(var(--vlr-radius) - 1px);
    border-top-right-radius: calc(var(--vlr-radius) - 1px);
    padding: 0.875rem 1.25rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--vlr-ink);
    letter-spacing: -0.005em;
}
.card-header.bg-light { background: var(--vlr-surface-2) !important; }
.card-body { padding: 1.5rem; }
.card-body.p-3 { padding: 1.125rem !important; }

/* ============================================================
   Tabelas — visual editorial
   ============================================================ */

.table {
    margin-bottom: 0;
    color: var(--vlr-ink);
    font-size: 0.875rem;
}
.table > thead > tr > th,
.table .table-light > tr > th {
    background-color: var(--vlr-surface-2) !important;
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--vlr-muted);
    font-weight: 600;
    border-bottom: 1px solid var(--vlr-border);
    padding: 0.875rem 0.75rem;
    white-space: nowrap;
}
.table > tbody > tr > td {
    padding: 0.875rem 0.75rem;
    border-bottom: 1px solid var(--vlr-border-soft);
    vertical-align: middle;
}
.table > tbody > tr:last-child > td { border-bottom: none; }
.table > tbody > tr:hover > td { background-color: var(--vlr-bg-soft); }

.table-sm > tbody > tr > td,
.table-sm > thead > tr > th { padding: 0.5rem 0.625rem; }

/* Valores monetários nas colunas .text-end (apenas as CÉLULAS de valor — o
   :not(th) evita pegar os TÍTULOS .text-end do cabeçalho, que devem manter a
   fonte/tamanho padrão dos demais títulos). */
td.text-end:not(.actions),
.table .text-end:not(.actions):not(th) {
    font-family: var(--vlr-font-mono);
    font-feature-settings: 'tnum' on, 'lnum' on;
    font-size: 0.8125rem;
    letter-spacing: -0.01em;
}
td.text-end.actions, td .btn { font-family: var(--vlr-font-ui); }

/* ============================================================
   Status pills — preenchidas, refinadas
   ============================================================ */

.badge {
    font-family: var(--vlr-font-ui);
    font-weight: 500;
    font-size: 0.6875rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 0.4em 0.75em;
    border-radius: 999px;
    border: 1px solid transparent;
}
.badge.bg-primary   { background: var(--vlr-primary-soft) !important; color: var(--vlr-primary) !important; border-color: rgba(30, 91, 190, 0.2); }
.badge.bg-success   { background: var(--vlr-success-soft) !important; color: var(--vlr-success) !important; border-color: rgba(4, 120, 87, 0.18); }
.badge.bg-warning   { background: var(--vlr-warning-soft) !important; color: var(--vlr-warning) !important; border-color: rgba(180, 83, 9, 0.18); }
.badge.bg-danger    { background: var(--vlr-danger-soft) !important; color: var(--vlr-danger) !important; border-color: rgba(190, 18, 60, 0.18); }
.badge.bg-secondary { background: #F1F5F9 !important; color: var(--vlr-muted) !important; border-color: var(--vlr-border); }
.badge.bg-dark      { background: var(--vlr-ink) !important; color: #fff !important; }

.badge-status-aberto-pend {
    background: var(--vlr-pend-soft) !important;
    color: var(--vlr-pend) !important;
    border-color: rgba(194, 65, 12, 0.22) !important;
    font-weight: 600;
}

/* ============================================================
   KPIs (dashboard, lote detalhe)
   ============================================================ */

.kpi {
    border-radius: var(--vlr-radius);
    padding: 1.5rem;
    position: relative;
    overflow: hidden;
    color: #fff;
    box-shadow: var(--vlr-shadow-sm);
}
.kpi small { font-size: 0.6875rem; letter-spacing: 0.1em; opacity: 0.78; font-weight: 500; }
.kpi h2, .kpi h3, .kpi h4 { color: #fff; margin-top: 0.25rem; }
.kpi.bg-primary {
    background: linear-gradient(135deg, var(--vlr-primary) 0%, var(--vlr-ink) 100%) !important;
}
.kpi.bg-dark {
    background: linear-gradient(135deg, var(--vlr-ink) 0%, #050D1F 100%) !important;
}
.kpi::after {
    content: '';
    position: absolute; top: -40%; right: -15%;
    width: 220px; height: 220px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.12) 0%, transparent 70%);
    pointer-events: none;
}

/* Cabeçalho do KPI: badge de ícone + rótulo */
.kpi-head { display: flex; align-items: center; gap: 0.6rem; }
.kpi-head .small { line-height: 1.1; }
.kpi-ico {
    width: 2.15rem; height: 2.15rem; flex: none;
    display: grid; place-items: center;
    border-radius: 10px; font-size: 0.95rem; line-height: 1;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.03);
}
.kpi-ico--success { background: var(--vlr-success-soft); color: var(--vlr-success); }
.kpi-ico--danger  { background: var(--vlr-danger-soft);  color: var(--vlr-danger); }
.kpi-ico--warning { background: var(--vlr-warning-soft); color: var(--vlr-warning); }
.kpi-ico--primary { background: var(--vlr-primary-soft); color: var(--vlr-primary); }

/* ============================================================
   Botões — refinamento sutil
   ============================================================ */

.btn {
    font-family: var(--vlr-font-ui);
    font-weight: 500;
    letter-spacing: 0.005em;
    border-radius: var(--vlr-radius-sm);
    padding: 0.5rem 1rem;
    transition: all .15s var(--vlr-ease);
}
.btn-sm { padding: 0.375rem 0.75rem; font-size: 0.8125rem; }
.btn.fw-bold { letter-spacing: 0.04em; font-weight: 600; }

.btn-primary {
    background: var(--vlr-primary);
    border-color: var(--vlr-primary);
    color: #fff;
    box-shadow: 0 1px 0 rgba(11, 26, 51, .08), inset 0 1px 0 rgba(255, 255, 255, .12);
}
.btn-primary:hover {
    background: var(--vlr-primary-hover);
    border-color: var(--vlr-primary-hover);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(30, 91, 190, .25), inset 0 1px 0 rgba(255, 255, 255, .12);
}
.btn-primary:active { transform: translateY(0); }

.btn-outline-dark {
    color: var(--vlr-ink);
    border-color: var(--vlr-border);
    background: var(--vlr-surface);
}
.btn-outline-dark:hover {
    background: var(--vlr-ink);
    border-color: var(--vlr-ink);
    color: #fff;
}

.btn-outline-primary {
    color: var(--vlr-primary);
    border-color: var(--vlr-border);
    background: var(--vlr-surface);
}
.btn-outline-primary:hover {
    background: var(--vlr-primary);
    border-color: var(--vlr-primary);
    color: #fff;
}

.btn-outline-danger { color: var(--vlr-danger); border-color: var(--vlr-border); background: var(--vlr-surface); }
.btn-outline-danger:hover { background: var(--vlr-danger); border-color: var(--vlr-danger); color: #fff; }

.btn-outline-warning { color: var(--vlr-warning); border-color: var(--vlr-border); background: var(--vlr-surface); }
.btn-outline-warning:hover { background: var(--vlr-warning); border-color: var(--vlr-warning); color: #fff; }

.btn-outline-success { color: var(--vlr-success); border-color: var(--vlr-border); background: var(--vlr-surface); }
.btn-outline-success:hover { background: var(--vlr-success); border-color: var(--vlr-success); color: #fff; }

.btn-outline-light { border-color: rgba(255, 255, 255, 0.25); color: rgba(255, 255, 255, 0.85); }
.btn-outline-light:hover { background: rgba(255, 255, 255, 0.12); color: #fff; border-color: rgba(255, 255, 255, 0.35); }

.btn-success {
    background: var(--vlr-success);
    border-color: var(--vlr-success);
    color: #fff;
}
.btn-success:hover { background: #036046; border-color: #036046; transform: translateY(-1px); }

.btn-warning {
    background: var(--vlr-pend);
    border-color: var(--vlr-pend);
    color: #fff;
}
.btn-warning:hover { background: #9A3412; border-color: #9A3412; color: #fff; transform: translateY(-1px); }

.btn-link {
    color: var(--vlr-muted);
    text-decoration: none;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
}
.btn-link:hover { color: var(--vlr-ink); }

/* ============================================================
   Forms
   ============================================================ */

.form-label {
    color: var(--vlr-muted);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
    margin-bottom: 0.375rem;
}
.form-label.fw-bold { font-weight: 600; }

.form-control, .form-select {
    border-color: var(--vlr-border);
    border-radius: var(--vlr-radius-sm);
    color: var(--vlr-ink);
    font-size: 0.875rem;
    padding: 0.5rem 0.75rem;
    transition: border-color .15s var(--vlr-ease), box-shadow .15s var(--vlr-ease);
    background-color: var(--vlr-surface);
}
/* Mantém espaço para a setinha do select (evita texto sobreposto) */
.form-select { padding-right: 2.25rem; }
.form-control:focus, .form-select:focus {
    border-color: var(--vlr-primary);
    box-shadow: 0 0 0 3px rgba(30, 91, 190, 0.12);
    background-color: var(--vlr-surface);
    color: var(--vlr-ink);
}
.form-control::placeholder { color: var(--vlr-muted-soft); }
.form-control-sm, .form-select-sm { font-size: 0.8125rem; padding: 0.4rem 0.625rem; }
.form-select-sm { padding-right: 2rem; }

.invalid-feedback { font-size: 0.75rem; color: var(--vlr-danger); }
.is-invalid { border-color: var(--vlr-danger) !important; }

.form-text { color: var(--vlr-muted-soft); font-size: 0.75rem; }

/* Checkbox refinado */
.form-check-input:checked {
    background-color: var(--vlr-primary);
    border-color: var(--vlr-primary);
}
.form-check-input:focus {
    box-shadow: 0 0 0 3px rgba(30, 91, 190, 0.15);
    border-color: var(--vlr-primary);
}

/* ============================================================
   Alertas
   ============================================================ */

.alert {
    border-radius: var(--vlr-radius);
    border-width: 1px;
    border-style: solid;
    padding: 0.875rem 1.125rem;
    font-size: 0.875rem;
}
.alert-success { background: var(--vlr-success-soft); border-color: rgba(4, 120, 87, 0.2); color: #064E3B; }
.alert-danger  { background: var(--vlr-danger-soft); border-color: rgba(190, 18, 60, 0.2); color: #881337; }
.alert-warning { background: var(--vlr-warning-soft); border-color: rgba(180, 83, 9, 0.2); color: #78350F; }
.alert-info    { background: var(--vlr-primary-soft); border-color: rgba(30, 91, 190, 0.2); color: var(--vlr-primary-hover); }

/* Tarifa em R$ 0,00 = "ainda não configurado" — destaca em warning suave
   para o operador notar antes de salvar. Aplica-se ao wrapper
   .valor-input (input + prefixo R$) usado no modal de motorista da tela
   do lote e no form de motorista. A classe is-zero é colocada via JS. */
.valor-input.is-zero .input-group-text,
.valor-input.is-zero .form-control {
    background: var(--vlr-warning-soft);
    border-color: rgba(180, 83, 9, .35);
    color: #78350F;
}
.valor-input.is-zero .form-control:focus {
    box-shadow: 0 0 0 .2rem rgba(180, 83, 9, .15);
    border-color: rgba(180, 83, 9, .6);
}

/* Pendência hero (lote detalhe + tela de pendências) */
.alert-pendencia {
    background: linear-gradient(135deg, var(--vlr-pend-soft-2) 0%, var(--vlr-pend-soft) 100%);
    border: 1px solid rgba(194, 65, 12, 0.2);
    border-left: 4px solid var(--vlr-pend);
    border-radius: var(--vlr-radius);
    color: var(--vlr-ink);
}
.alert-pendencia .display-counter {
    font-family: var(--vlr-font-mono);
    font-feature-settings: 'tnum' on;
    font-size: 2.75rem;
    font-weight: 700;
    color: var(--vlr-pend);
    line-height: 1;
    letter-spacing: -0.04em;
}

/* ============================================================
   Pendência grupo — cards
   ============================================================ */

.pend-grupo .card-header {
    background: linear-gradient(180deg, var(--vlr-pend-soft-2) 0%, #FFFBEB 100%) !important;
    border-bottom: 1px solid rgba(194, 65, 12, 0.18);
}
.pend-grupo .pend-counter {
    font-family: var(--vlr-font-mono);
    font-feature-settings: 'tnum' on;
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--vlr-pend);
    letter-spacing: -0.02em;
    margin-right: 0.5rem;
}

/* Tabs refinadas */
.nav-tabs {
    border-bottom: 1px solid var(--vlr-border);
    margin-bottom: 0;
}
.nav-tabs .nav-link {
    color: var(--vlr-muted);
    border: none;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    font-size: 0.8125rem;
    font-weight: 500;
    padding: 0.625rem 1rem;
    margin-bottom: -1px;
    transition: all .15s var(--vlr-ease);
}
.nav-tabs .nav-link:hover { color: var(--vlr-ink); border-color: transparent; }
.nav-tabs .nav-link.active {
    color: var(--vlr-primary);
    background: transparent;
    border-bottom-color: var(--vlr-primary);
}
.tab-content.border { border-color: var(--vlr-border) !important; background: var(--vlr-surface); border-radius: 0 0 var(--vlr-radius-sm) var(--vlr-radius-sm); }

/* ============================================================
   Utilitários de tabela
   ============================================================ */

.cell-arquivo  { max-width: 280px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cell-periodo  { white-space: nowrap; font-variant-numeric: tabular-nums; line-height: 1.15; }
.cell-periodo .periodo-fim { opacity: .75; }
.cell-truncate { max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Previsão de Pagamento: célula clicável com visual de texto (mesmo
   espírito de .cell-pix em /lotes/{id}). O <input type="date">
   permanece no DOM pra ancorar o seletor nativo (showPicker), mas
   é visualmente escondido sem usar display:none (que bloquearia o
   picker em alguns browsers). */
.cell-previsao { cursor: pointer; font-variant-numeric: tabular-nums; line-height: 1.15; }
.cell-previsao:hover { background-color: var(--vlr-primary-soft, #E5EEFB); }
.cell-previsao .previsao-data { font-weight: 500; }
.cell-previsao .vazio { color: var(--vlr-muted-soft); font-style: italic; font-size: .8rem; }
.cell-previsao .previsao-dias-linha { font-size: .72rem; margin-top: 2px; line-height: 1.1; }
.cell-previsao.cell-previsao-erro { outline: 1px solid var(--bs-danger); }
.previsao-input-hidden {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0,0,0,0);
    white-space: nowrap; border: 0;
    opacity: 0;
}

code, .font-monospace { font-family: var(--vlr-font-mono); font-size: 0.8125rem; }
code { background: var(--vlr-surface-2); border: 1px solid var(--vlr-border-soft); padding: 0.125rem 0.375rem; border-radius: 4px; color: var(--vlr-ink-soft); }

/* ============================================================
   Layout principal — espaçamento
   ============================================================ */

main.container { padding-top: 1.75rem; padding-bottom: 3rem; max-width: 1280px; }

/* Page header padronizado */
.page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.25rem;
    gap: 1rem;
}
.page-header h4 { margin: 0; font-weight: 700; letter-spacing: -0.02em; }
.page-header small { color: var(--vlr-muted); display: block; margin-top: 2px; font-size: 0.8125rem; }

/* ============================================================
   Login screen — fundo com pattern de pontos sutil
   ============================================================ */

@keyframes fade-up {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ===== Login: split hero (marca) + formulário ===== */
body.is-login { background: var(--vlr-bg); min-height: 100vh; overflow-x: hidden; }
.login-split { display: grid; grid-template-columns: .76fr 1.05fr; min-height: 100vh; }

/* Painel de marca (direita) */
.login-hero {
    position: relative; overflow: hidden;
    display: flex; flex-direction: column; justify-content: space-between;
    padding: 3rem 3.25rem; color: #fff;
    background: linear-gradient(150deg, #0B1A33 0%, #143C7E 45%, #1E5BBE 100%);
}
.login-hero::before {
    content: ''; position: absolute; inset: 0; z-index: 0; opacity: .55;
    background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,.10) 1px, transparent 0);
    background-size: 26px 26px;
}
.login-hero-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.lh-orb { position: absolute; border-radius: 50%; filter: blur(10px); opacity: .5; }
.lh-orb-1 { width: 340px; height: 340px; top: -80px; right: -60px;
    background: radial-gradient(circle, rgba(77,163,255,.55), transparent 65%); animation: lh-drift 15s ease-in-out infinite; }
.lh-orb-2 { width: 260px; height: 260px; bottom: -60px; left: -40px;
    background: radial-gradient(circle, rgba(20,60,126,.65), transparent 65%); animation: lh-drift 19s ease-in-out infinite reverse; }
.lh-float { position: absolute; color: rgba(255,255,255,.13); font-size: 2.2rem; animation: lh-float 9s ease-in-out infinite; }
.lh-float-1 { top: 24%; left: 16%; font-size: 2.8rem; }
.lh-float-2 { top: 64%; left: 24%; animation-delay: 1.2s; }
.lh-float-3 { top: 36%; right: 20%; animation-delay: .6s; }
.lh-float-4 { bottom: 20%; right: 28%; font-size: 2.5rem; animation-delay: 1.8s; }
@keyframes lh-float { 0%,100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-16px) rotate(3deg); } }
@keyframes lh-drift { 0%,100% { transform: translate(0,0); } 50% { transform: translate(22px,18px); } }

.login-hero-brand { position: relative; z-index: 1; display: flex; align-items: center; gap: .7rem; font-weight: 700; font-size: 1.15rem; }
.login-hero-mark { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px; background: rgba(255,255,255,.14); }
.login-hero-badge { margin-left: .25rem; padding: .2rem .6rem; border-radius: 999px; font-size: .68rem; font-weight: 600;
    letter-spacing: .03em; text-transform: uppercase; color: #cfe4ff; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.18); }
.login-hero-content { position: relative; z-index: 1; max-width: 460px; margin: auto 0; }
.login-hero-title { font-size: clamp(1.8rem, 3vw, 2.6rem); font-weight: 800; line-height: 1.12; margin: 0 0 .9rem; }
.login-hero-sub { color: rgba(255,255,255,.82); font-size: 1.02rem; line-height: 1.55; margin-bottom: 1.8rem; }
.login-hero-feats { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .7rem; }
.login-hero-feats li { display: flex; align-items: center; gap: .7rem; color: rgba(255,255,255,.9); font-size: .95rem; }
.login-hero-feats i { width: 30px; height: 30px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 8px; background: rgba(255,255,255,.12); color: #9fd0ff; font-size: .8rem; }
.login-hero-foot { position: relative; z-index: 1; font-size: .78rem; color: rgba(255,255,255,.55); letter-spacing: .04em; }

/* Painel do formulário (direita) */
.login-panel { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.1rem; padding: 2.5rem 1.5rem; }
.login-card {
    width: 100%; max-width: 384px;
    background: var(--vlr-surface); border: 1px solid var(--vlr-border);
    border-radius: var(--vlr-radius-lg);
    box-shadow: 0 24px 60px -24px rgba(11,26,51,.22), 0 8px 16px -6px rgba(11,26,51,.06);
    padding: 2.25rem 2rem; animation: fade-up .45s var(--vlr-ease);
}
.login-card-head { text-align: center; margin-bottom: 1.5rem; }
.login-logo { max-width: 132px; margin: 0 auto .9rem; display: block; }
.login-title { font-size: 1.4rem; font-weight: 800; color: var(--vlr-ink); margin: 0 0 .25rem; }
.login-subtitle { color: var(--vlr-muted); font-size: .9rem; margin: 0; }

.login-alert { display: flex; align-items: center; gap: .5rem; background: var(--vlr-danger-soft); color: var(--vlr-danger);
    border-radius: var(--vlr-radius-sm); padding: .6rem .8rem; font-size: .85rem; margin-bottom: 1rem; }

.login-form { display: flex; flex-direction: column; gap: 1rem; }
.login-field { display: flex; flex-direction: column; gap: .35rem; }
.login-field-label { font-size: .8rem; font-weight: 600; color: var(--vlr-ink-soft); }
.login-input { position: relative; display: flex; align-items: center; }
.login-input > i { position: absolute; left: .85rem; color: var(--vlr-muted-soft); font-size: .9rem; pointer-events: none; }
.login-input input { width: 100%; padding: .7rem .85rem .7rem 2.35rem; border: 1px solid var(--vlr-border);
    border-radius: var(--vlr-radius-sm); font-size: .95rem; color: var(--vlr-ink); background: var(--vlr-surface-2);
    transition: border-color .15s, background .15s, box-shadow .15s; }
.login-input input:focus { outline: none; border-color: var(--vlr-primary); background: #fff; box-shadow: 0 0 0 3px var(--vlr-primary-soft); }
.login-eye { position: absolute; right: .5rem; border: 0; background: transparent; color: var(--vlr-muted-soft); padding: .4rem; cursor: pointer; border-radius: 6px; }
.login-eye:hover { color: var(--vlr-primary); }

.login-btn { margin-top: .4rem; display: flex; align-items: center; justify-content: center; gap: .6rem; width: 100%;
    padding: .8rem; border: 0; border-radius: var(--vlr-radius-sm); font-weight: 700; font-size: .98rem; color: #fff; cursor: pointer;
    background: linear-gradient(135deg, var(--vlr-primary) 0%, #2f74e0 100%);
    box-shadow: 0 10px 24px -8px rgba(30,91,190,.6); transition: transform .12s, box-shadow .12s, filter .12s; }
.login-btn:hover { transform: translateY(-1px); box-shadow: 0 14px 30px -8px rgba(30,91,190,.7); filter: brightness(1.03); }
.login-btn:active { transform: translateY(0); }
.login-btn i { transition: transform .15s; }
.login-btn:hover i { transform: translateX(3px); }

/* Divisor "ou" entre o login por senha e o botão do Google. */
.login-sep { display: flex; align-items: center; gap: .8rem; margin: 1rem 0; color: var(--vlr-muted-soft); font-size: .8rem; }
.login-sep::before, .login-sep::after { content: ""; flex: 1; height: 1px; background: var(--vlr-border, rgba(0,0,0,.1)); }

/* Botão "Entrar com Google": neutro (branco), padrão de marca do Google. */
.login-btn-google { margin-top: .2rem; display: flex; align-items: center; justify-content: center; gap: .7rem; width: 100%;
    padding: .8rem; border: 1px solid var(--vlr-border, rgba(0,0,0,.12)); border-radius: var(--vlr-radius-sm);
    font-weight: 600; font-size: .95rem; color: #3c4043; text-decoration: none; background: #fff;
    box-shadow: 0 6px 16px -10px rgba(0,0,0,.4); transition: transform .12s, box-shadow .12s, filter .12s; }
.login-btn-google:hover { transform: translateY(-1px); box-shadow: 0 12px 24px -10px rgba(0,0,0,.45); filter: brightness(.99); }
.login-btn-google:active { transform: translateY(0); }

.login-foot { color: var(--vlr-muted-soft); font-size: .78rem; }

/* Em telas estreitas, esconde o painel de marca e mostra só o formulário */
@media (max-width: 900px) {
    .login-split { grid-template-columns: 1fr; }
    .login-hero { display: none; }
    .login-panel { min-height: 100vh; }
}

/* ============================================================
   Espelho do motorista
   ============================================================ */

/* Cards de totais com altura igualada — cada col é flex para que o div
   interno ocupe a altura toda do row. Sem isso, o card de "Entregas"
   cresce mais quando há quebra por tipo embaixo (Flash Moove). */
.espelho-totais > [class*="col-"] { display: flex; }
.espelho-totais [class*="col-"] > div {
    border: 1px solid var(--vlr-border);
    border-radius: var(--vlr-radius);
    padding: 1rem;
    text-align: center;
    flex: 1 1 auto;
}

/* Etapas do lote em /lotes (semáforo discreto do fluxo operacional). */
.etapa-badge {
    font-weight: 500;
    padding: .25em .55em;
    font-size: .7rem;
    letter-spacing: .01em;
    border: 1px solid transparent;
    cursor: default;
    white-space: nowrap;
}
.etapa-cadastro   { background: #fff; color: var(--vlr-warning, #B45309); border-color: rgba(180,83,9,.35); }
.etapa-pix        { background: #fff; color: var(--vlr-warning, #B45309); border-color: rgba(180,83,9,.35); }
.etapa-pagamentos { background: #fff; color: var(--vlr-primary, #1E5BBE); border-color: rgba(30,91,190,.35); }
.etapa-concluido  { background: #fff; color: var(--vlr-success, #047857); border-color: rgba(4,120,87,.35); }

/* Stepper de 4 etapas na coluna "Etapa" da listagem de lotes.
   Bolinhas conectadas por linha; "done" preenchidas em cinza-escuro,
   "current" colorida + leve glow, "future" vazias com borda cinza. */
/* Paleta sóbria — apenas três tons:
   - future  : cinza claro (slate-300) com fundo branco — "ainda não"
   - done    : cinza escuro (slate-600) preenchido — "já passou"
   - current : azul primary com glow LEVE — "aqui estou"
   Concluído (etapa final) usa verde sutil pra reforçar "ok, fim".
   O nome da etapa fica no label embaixo (cor única, peso 600). */
.lote-stepper {
    display: inline-flex;
    align-items: center;
    gap: 0;
    line-height: 1;
}
.lote-stepper .step {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #fff;
    border: 1.5px solid #CBD5E1;
    box-sizing: border-box;
    flex: 0 0 auto;
}
.lote-stepper .conn {
    width: 14px;
    height: 2px;
    background: #CBD5E1;
    flex: 0 0 auto;
}
.lote-stepper .step.done {
    background: #64748B;                 /* slate-500 — feito, sem chamar atenção */
    border-color: #64748B;
}
.lote-stepper .conn.done { background: #64748B; }
.lote-stepper .step.current {
    width: 12px;
    height: 12px;
    border-width: 2px;
    background: var(--vlr-primary, #1E5BBE);
    border-color: var(--vlr-primary, #1E5BBE);
    box-shadow: 0 0 0 3px rgba(30,91,190,.14);
}
.lote-stepper .step.current.is-concluido {
    background: var(--vlr-success, #047857);
    border-color: var(--vlr-success, #047857);
    box-shadow: 0 0 0 3px rgba(4,120,87,.14);
}

.lote-stepper-label {
    margin-top: 4px;
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .01em;
    line-height: 1.1;
    color: var(--vlr-ink-soft, #1E2C44);
}
.lote-stepper-label.is-concluido { color: var(--vlr-success, #047857); }

/* Linha de lote soft-deleted: esmaecida, sem nada de destrutivo
   no DOM — só sinal visual de que aquela linha está fora do fluxo
   normal e só apareceu por causa do toggle "Mostrar excluídos". */
tr.row-deleted { background: rgba(0,0,0,.02); }
tr.row-deleted td { opacity: .65; }
tr.row-deleted td .badge,
tr.row-deleted td .btn { opacity: 1; }

/* Cabeçalho padronizado da tabela /lotes — fonte uniforme, uppercase
   discreto e peso semibold, igualando o look-and-feel entre colunas. */
.table-lotes-head th {
    font-size: .7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--vlr-muted, #64748B);
    padding: 10px 8px;
}
/* Coluna Nome: nowrap pra não quebrar a linha, mas com truncate
   quando o nome for muito longo (raro — geralmente cabe). */
.table-lotes .cell-lote-nome {
    max-width: 320px;
    overflow: hidden;
    text-overflow: ellipsis;
}
.table-lotes .cell-lote-nome a.abrir-edit-nome {
    cursor: pointer;
}
.table-lotes .cell-lote-nome a.abrir-edit-nome:hover {
    color: var(--vlr-primary, #1E5BBE);
    text-decoration: underline !important;
}
.table-lotes .cell-lote-nome .download-arquivo:hover {
    color: var(--vlr-primary, #1E5BBE);
}
/* Unidade / Transportadora: nomes longos não podem esticar a tabela e
   forçar scroll horizontal no .table-responsive. Cap com truncamento por
   linha (cada div vira ellipsis), espelhando o tratamento da coluna Lote. */
.table-lotes .cell-lote-uni { min-width: 150px; max-width: 230px; }
.table-lotes .cell-lote-uni > div {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Badge chamativa de pendência de pagamento no botão "Pgto" da listagem
   de lotes — vermelho sólido pra puxar o olhar do operador. O botão em
   si fica btn-outline-primary mesmo, só a bolinha do contador muda. */
.badge-pend-alerta {
    background: #DC2626;    /* red-600 — alto contraste, foge da paleta soft */
    color: #fff !important;
    font-weight: 700;
    box-shadow: 0 0 0 2px rgba(220, 38, 38, .18);
}
.espelho-totais .total-bruto { color: var(--vlr-ink); }
.espelho-totais .total-liquido {
    background: linear-gradient(135deg, var(--vlr-success-soft) 0%, #BBF7D0 100%);
    border-color: rgba(4, 120, 87, 0.35);
    color: var(--vlr-success);
}
.espelho-totais .total-liquido small,
.espelho-totais .total-liquido .num { color: var(--vlr-success); }

/* Extrato detalhado: a tabela ocupa 100% da largura por padrão (.table).
   Ajustamos Pedido / T / Valor pra se encolherem até o conteúdo (width:1%
   + nowrap é o truque conhecido pra "shrink-to-fit" em colunas de tabela).
   Toda a folga sobra pra "Entregue em" — assim Pedido fica colado em T. */
.extrato-detalhado .col-pedido,
.extrato-detalhado .col-tipo,
.extrato-detalhado .col-valor {
    width: 1%;
    white-space: nowrap;
}
.extrato-detalhado .col-tipo {
    text-align: center;
    font-weight: 600;
    font-family: var(--bs-font-monospace, monospace);
}

/* Badges do header do espelho público (motorista/transportadora/período)
   precisam quebrar linha em telas estreitas — nomes longos como
   "ALEXSANDRO MOROSINI REIS" estouravam a viewport do celular.
   - `min-width: 0` é OBRIGATÓRIO em flex items pra eles encolherem
     abaixo do tamanho do conteúdo (default do flexbox é manter intrínseco).
   - `overflow-wrap: anywhere` é mais agressivo que word-break: break-word
     e garante quebra mesmo em palavras únicas muito longas.
   - Em telas estreitas, cada badge ocupa a linha inteira pra não brigar
     com os vizinhos. */
.espelho-badges { width: 100%; }
.espelho-badges .badge {
    white-space: normal;
    word-break: break-word;
    overflow-wrap: anywhere;
    text-align: left;
    max-width: 100%;
    min-width: 0;
}
@media (max-width: 575.98px) {
    .espelho-badges .badge {
        flex: 1 1 100%;
        font-size: .95rem;
    }
}

/* ============================================================
   Print (espelho)
   ============================================================ */

@media print {
    .no-print, nav, .alert, button { display: none !important; }
    body { background: #fff; }
    .card { box-shadow: none; border: 1px solid #ddd; }
    .logo-valorize.logo-espelho { filter: none; max-width: 100px; }
}

/* ============================================================
   Detalhes pequenos
   ============================================================ */

.text-muted { color: var(--vlr-muted) !important; }

/* Scroll bar refinada (webkit) */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--vlr-bg); }
::-webkit-scrollbar-thumb { background: #CBD5E1; border-radius: 5px; border: 2px solid var(--vlr-bg); }
::-webkit-scrollbar-thumb:hover { background: var(--vlr-muted-soft); }

/* Selection */
::selection { background: var(--vlr-primary); color: #fff; }

/* Dot de cor por transportadora (ajuda a achar batendo o olho). Discreto. */
.transp-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 6px;
    vertical-align: middle;
    flex: 0 0 auto;
}

/* ============================================================
   BPO Valorize — grid editável de contas + KPIs
   ============================================================ */
.table-grid { font-size: .85rem; }
.table-grid th {
    background: var(--vlr-surface-2);
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--vlr-muted);
    white-space: nowrap;
}
.table-grid td { padding: .25rem .35rem; vertical-align: middle; }
.cell-input, .cell-select {
    border: 1px solid transparent;
    background: transparent;
    width: 100%;
    padding: .2rem .35rem;
    border-radius: var(--vlr-radius-sm);
    font-size: .85rem;
    color: var(--vlr-ink);
    transition: border-color .12s var(--vlr-ease), background .12s var(--vlr-ease);
}
.cell-input:hover, .cell-select:hover { border-color: var(--vlr-border); }
.cell-input:focus, .cell-select:focus {
    outline: none;
    border-color: var(--vlr-primary);
    background: #fff;
    box-shadow: 0 0 0 2px var(--vlr-primary-soft);
}
.cell-money { font-family: var(--vlr-font-mono); }
.cell-saving { background: var(--vlr-warning-soft) !important; }
.cell-ok { background: var(--vlr-success-soft) !important; }
.cell-erro { border-color: var(--vlr-danger) !important; background: var(--vlr-danger-soft) !important; }

.row-pend > td:first-child { box-shadow: inset 3px 0 0 var(--vlr-pend); }
.row-pend { background: var(--vlr-pend-soft-2); }
.row-pend-badge { background: var(--vlr-pend-soft-2); box-shadow: inset 3px 0 0 var(--vlr-pend); }

/* ====================================================================
   Revisão de importação — visual de extrato bancário (.stmt-*).
   ==================================================================== */
/* Resumo no topo: arquivo + totais (entradas verde, saídas vermelho, saldo). */
.stmt-resumo {
    display: flex; flex-wrap: wrap; gap: 1rem;
    align-items: center; justify-content: space-between;
    padding: .85rem 1.1rem;
}
.stmt-resumo-arquivo { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.stmt-resumo-totais { display: flex; gap: 1.5rem; align-items: center; }
.stmt-tot { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.25; min-width: 116px; }
.stmt-tot-lab { display: inline-flex; align-items: center; gap: 4px; font-size: .68rem; text-transform: uppercase; letter-spacing: .04em; color: var(--vlr-muted); font-weight: 600; }
.stmt-tot-val { font-family: var(--vlr-font-mono); font-weight: 700; font-size: 1.1rem; letter-spacing: -.01em; }
.stmt-tot--ent .stmt-tot-val { color: var(--vlr-success); }
.stmt-tot--sai .stmt-tot-val { color: var(--vlr-danger); }
.stmt-tot--saldo { padding-left: 1.5rem; border-left: 1px solid var(--vlr-border); }

/* Tabela do extrato — compacta, estilo extrato bancário. */
.stmt-table { font-size: .9rem; }
.stmt-table > thead > tr > th {
    background: var(--vlr-surface-2);
    font-size: .68rem; text-transform: uppercase; letter-spacing: .04em;
    color: var(--vlr-muted); font-weight: 600; white-space: nowrap;
    padding: .45rem .6rem; border-bottom: 1px solid var(--vlr-border);
}
.stmt-table > tbody > tr > td {
    padding: .25rem .6rem; vertical-align: middle;
    border-top: 1px solid var(--vlr-border-soft);
}
.stmt-row:hover { background: var(--vlr-bg-soft); }

.stmt-col-banco { width: 1%; white-space: nowrap; }
.stmt-banco { white-space: nowrap; }
.stmt-col-data  { width: 112px; }
.stmt-col-valor { width: 182px; }
.stmt-col-saldo { width: 130px; }
.stmt-col-acao  { width: 34px; }

/* Fallback da coluna Banco quando a fonte não é um banco reconhecido. */
.banco-logo--vazio {
    width: 24px; height: 24px; border-radius: 6px;
    align-items: center; justify-content: center;
    background: var(--vlr-surface-2); border: 1px solid var(--vlr-border);
    color: var(--vlr-muted-soft); font-size: .7rem; line-height: 1;
}

/* Data: sem ícone de calendário (limpo); editável ao clicar. */
.stmt-date {
    color: var(--vlr-muted); font-size: .82rem;
    font-family: var(--vlr-font-mono);
}
.stmt-date::-webkit-calendar-picker-indicator { display: none; -webkit-appearance: none; }
.stmt-date::-webkit-inner-spin-button { display: none; }

/* Descrição + linha de meta (categoria · fonte · parcela), compacta. */
.stmt-desc-input { font-weight: 600; }
.stmt-meta {
    display: flex; align-items: center; flex-wrap: wrap; gap: .1rem .25rem;
    padding: 0 .35rem; line-height: 1.1;
}
.stmt-meta-sep, .stmt-meta-dot { color: var(--vlr-muted-soft); font-size: .72rem; }
.stmt-meta-dot { margin: 0 .15rem; }

/* Selects da meta: aparência de texto (sem a seta nativa). */
.stmt-tag {
    appearance: none; -webkit-appearance: none; -moz-appearance: none;
    border: 1px solid transparent; background: transparent;
    padding: 0 .15rem; border-radius: var(--vlr-radius-sm);
    font-size: .76rem; color: var(--vlr-muted); cursor: pointer;
    width: auto; max-width: 150px; text-overflow: ellipsis;
}
.stmt-tag:hover { color: var(--vlr-ink); border-color: var(--vlr-border); }
.stmt-tag:focus { outline: none; color: var(--vlr-ink); border-color: var(--vlr-primary); background: #fff; }
.stmt-tag-fonte { color: var(--vlr-muted-soft); }
/* Select de centro de custo (módulo opcional) na célula de descrição. */
.stmt-cc-select { color: var(--vlr-muted-soft); max-width: 170px; }
.stmt-cc-txt .badge { font-weight: 500; }

/* Busca ao vivo do extrato (filtra por descrição/valor enquanto digita). */
.stmt-busca {
    display: flex; align-items: center; justify-content: flex-end; gap: .75rem;
    padding: .75rem 1rem; border-bottom: 1px solid var(--vlr-border);
}
.stmt-busca-box { position: relative; display: inline-flex; align-items: center; }
.stmt-busca-ic {
    position: absolute; left: .6rem;
    color: var(--vlr-muted-soft); font-size: .85rem; pointer-events: none;
}
.stmt-busca-input {
    width: 320px; max-width: 100%;
    padding: .4rem .6rem .4rem 2rem;
    border: 1px solid var(--vlr-border); border-radius: var(--vlr-radius-sm);
    background: #fff; font-size: .88rem; color: var(--vlr-ink);
}
.stmt-busca-input:focus { outline: none; border-color: var(--vlr-primary); }
.stmt-busca-vazio { font-size: .82rem; color: var(--vlr-muted); }

/* Coluna Fonte (entre data e descrição). */
.stmt-col-fonte { width: 1%; white-space: nowrap; }
.stmt-fonte { white-space: nowrap; }
.stmt-fonte-txt { font-size: .8rem; color: var(--vlr-muted); white-space: nowrap; }
/* Origem (cartão/pagamento de fatura): badge compacto na linha de meta da leitura.
   A escolha da origem é global por importação (tela de revisão), não por linha. */
.stmt-origem-badge { font-size: .6rem; font-weight: 600; padding: .12rem .35rem; vertical-align: middle; }

/* Categoria no modo leitura: "Grupo › Subgrupo" como um texto só.
   O grupo ganha um fundo leve (cor estável por grupo) para diferenciar. */
.stmt-cat-txt { font-size: .76rem; color: var(--vlr-muted); }
.stmt-cat-grupo {
    display: inline-block; padding: .05rem .4rem;
    border-radius: 999px; font-weight: 600; line-height: 1.4;
}
.stmt-cat-sub { color: var(--vlr-muted); margin-left: .1rem; }
.stmt-cat-edit { display: inline-flex; align-items: center; gap: .15rem; }

/* Coluna Parcela (à esquerda do valor): "Parcela X de Y", alinhada à direita. */
.stmt-col-parc { width: 1%; white-space: nowrap; }
.stmt-parc-col { white-space: nowrap; }
.stmt-parc-txt { font-size: .78rem; color: var(--vlr-muted); display: inline-flex; flex-direction: column; align-items: center; line-height: 1.15; }
.stmt-parc-lbl { font-size: .68rem; text-transform: uppercase; letter-spacing: .02em; opacity: .8; }
.stmt-parc-nums { font-weight: 600; }
.stmt-parc-edit {
    display: inline-flex; flex-direction: column; align-items: center; gap: .1rem;
    font-size: .76rem; color: var(--vlr-muted); white-space: nowrap; line-height: 1.15;
}
.stmt-parc-edit-nums { display: inline-flex; align-items: center; gap: .25rem; }
.stmt-parc-num {
    width: 2.4rem !important; padding: 0 .1rem !important;
    text-align: center; font-size: .76rem;
}

/* ===== Edição por linha: leitura por padrão, edita só pelo lápis (.is-editing) ===== */
/* Alterna texto (leitura) × campos (edição). */
.stmt-row:not(.is-editing) .ed-only { display: none; }
.stmt-row.is-editing .ro-only { display: none; }
/* Modo leitura: os campos soltos (data, descrição, valor) viram texto sem interação. */
.stmt-row:not(.is-editing) .cell-input { pointer-events: none; }
.stmt-row:not(.is-editing) .cell-input:hover { border-color: transparent; background: transparent; }
/* Natureza vira só indicador (ícone), sem cara de botão clicável. */
.stmt-row:not(.is-editing) .natz-cur { pointer-events: none; border-color: transparent; background: transparent; }

/* Saldo acumulado (extrato). */
.stmt-saldo-val { font-family: var(--vlr-font-mono); font-weight: 600; color: var(--vlr-ink); }
.stmt-saldo-val.is-neg { color: var(--vlr-danger); }

/* Editar (lápis) e excluir (lixeira): aparecem no hover da linha (mesma lógica). */
.stmt-edit { opacity: 0; transition: opacity .12s var(--vlr-ease), color .12s var(--vlr-ease); }
.stmt-row:hover .stmt-edit, .stmt-edit:focus, .stmt-edit.is-active { opacity: 1; }
.stmt-edit.is-active { color: var(--vlr-primary) !important; }
.stmt-del { opacity: 0; transition: opacity .12s var(--vlr-ease); }
.stmt-row:hover .stmt-del, .stmt-del:focus { opacity: 1; }

/* Valor: alinhado à direita; o sinal "-" (embutido) acompanha a cor da natureza.
   A seta de natureza fica à direita do valor; clicar abre o menu de opções. */
.stmt-valor { white-space: nowrap; }
.stmt-valor-wrap { display: flex; align-items: center; gap: .3rem; justify-content: flex-end; }
.stmt-money { font-family: var(--vlr-font-mono); font-weight: 600; text-align: right; flex: 1; min-width: 4.5rem; }
.stmt-row.natz-saida   .stmt-money { color: var(--vlr-danger); }
.stmt-row.natz-entrada .stmt-money { color: var(--vlr-success); }
.stmt-row.natz-transferencia .stmt-money { color: var(--vlr-ink); }

/* Picker de natureza: só a seta atual; clique abre as opções. */
.natz-pick { position: relative; flex-shrink: 0; }
.natz-cur {
    width: 26px; height: 26px; border-radius: 50%;
    border: 1px solid var(--vlr-border); background: var(--vlr-surface);
    cursor: pointer; font-size: .72rem;
    display: inline-flex; align-items: center; justify-content: center;
    transition: all .12s var(--vlr-ease);
}
.natz-cur:hover { border-color: var(--vlr-muted); }
.natz-cur--entrada       { color: var(--vlr-success); background: var(--vlr-success-soft); border-color: var(--vlr-success); }
.natz-cur--saida         { color: var(--vlr-danger);  background: var(--vlr-danger-soft);  border-color: var(--vlr-danger); }
.natz-cur--transferencia { color: var(--vlr-ink);     background: var(--vlr-bg);           border-color: var(--vlr-muted); }

.natz-menu {
    position: absolute; right: 0; top: calc(100% + 4px); z-index: 30;
    background: var(--vlr-surface); border: 1px solid var(--vlr-border);
    border-radius: var(--vlr-radius); box-shadow: var(--vlr-shadow-md);
    padding: 4px; min-width: 150px; display: flex; flex-direction: column; gap: 2px;
}
.natz-menu[hidden] { display: none; }
.natz-menu--up { top: auto; bottom: calc(100% + 4px); }
.natz-opt {
    display: flex; align-items: center; gap: 8px;
    border: 0; background: transparent; cursor: pointer;
    padding: 6px 8px; border-radius: 6px; font-size: .82rem; color: var(--vlr-ink);
    text-align: left; white-space: nowrap;
}
.natz-opt i { width: 14px; text-align: center; }
.natz-opt:hover { background: var(--vlr-bg-soft); }
.natz-opt--entrada i       { color: var(--vlr-success); }
.natz-opt--saida i         { color: var(--vlr-danger); }
.natz-opt--transferencia i { color: var(--vlr-muted); }
.natz-opt.is-active { font-weight: 700; background: var(--vlr-bg-soft); }

/* Separador e item "Transferência" (marcador adicional) no menu de natureza. */
.natz-sep { height: 1px; background: var(--vlr-border); margin: 3px 2px; }
.natz-opt--transf i { color: var(--vlr-primary); }
.natz-opt--transf.is-active { background: var(--vlr-primary-soft); font-weight: 700; color: var(--vlr-primary); }

/* Marcador ⇄ ao lado do valor quando o lançamento é uma transferência. */
.stmt-transf-mark { color: var(--vlr-primary); font-size: .72rem; flex-shrink: 0; }

/* Pendente: com (quase) tudo pendente após a importação, o fundo creme em
   todas as linhas polui. No extrato fica só o tracinho lateral na 1ª coluna. */
.stmt-row.row-pend { background: transparent; }
.stmt-row.row-pend:hover { background: var(--vlr-bg-soft); }

/* Revisão: as pendentes (falta classificar) precisam saltar aos olhos —
   fundo levemente tingido + destaque lateral mais forte que o tracinho padrão. */
.stmt-table--revisao .stmt-row.row-pend { background: var(--vlr-pend-soft-2); }
.stmt-table--revisao .stmt-row.row-pend:hover { background: var(--vlr-pend-soft); }
.stmt-table--revisao .stmt-row.row-pend > td:first-child { box-shadow: inset 4px 0 0 var(--vlr-pend); }

@media (max-width: 640px) {
    .stmt-resumo-totais { gap: 1rem; }
    .stmt-tot--saldo { padding-left: 1rem; }
}

/* ====================================================================
   Revisão rápida (.stmt-table--revisao): barra fixa, combobox de
   categoria e chips de atalho. Otimiza o fluxo de categorização.
   ==================================================================== */
/* Barra fixa logo abaixo da topbar (56px): voltar + título à esquerda,
   progresso + Aprovar à direita. Acompanha a rolagem para o Aprovar ficar sempre à vista. */
.stmt-bar {
    position: sticky; top: 56px; z-index: 1010;
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: .5rem 1rem;
    background: var(--vlr-surface); border: 1px solid var(--vlr-border);
    border-radius: var(--vlr-radius); margin-bottom: 1rem; padding: .55rem .85rem;
    box-shadow: var(--vlr-shadow-sm);
}
.stmt-bar-left  { display: flex; align-items: center; gap: .75rem; }
.stmt-bar-right { display: flex; align-items: center; gap: .85rem; }
.stmt-bar-titulo { font-size: 1.15rem; font-weight: 700; }
.stmt-bar-prog { font-size: .85rem; color: var(--vlr-muted); white-space: nowrap; }
.stmt-bar-prog strong { color: var(--vlr-pend); font-size: 1rem; }

/* Linhas da revisão: mais altas e com alvos de clique generosos. */
.stmt-table--revisao > tbody > tr > td { padding-top: .5rem; padding-bottom: .5rem; }
.stmt-table--revisao .cell-input,
.stmt-table--revisao .cell-select { padding: .25rem .45rem; }
.stmt-table--revisao .stmt-desc-input { font-size: .92rem; }

/* Na revisão o combobox de texto fica oculto. A categorização depende do estado:
   - PENDENTE (falta classificar): mostra os chips coloridos (escolher grupo→subgrupo).
   - CLASSIFICADA: mostra só o badge colorido limpo (como antes); clicar nele reabre
     os chips para trocar (.cat-reedit). */
.stmt-table--revisao .stmt-cat-edit { display: none; }
/* Classificada → badge visível, chips ocultos. */
.stmt-table--revisao .stmt-row:not(.row-pend) .stmt-cat-txt { display: inline-flex; align-items: center; gap: .2rem; cursor: pointer; }
.stmt-table--revisao .stmt-row:not(.row-pend) .cat-chips { display: none; }
/* Pendente → chips visíveis, badge "—" oculto. */
.stmt-table--revisao .stmt-row.row-pend .stmt-cat-txt { display: none; }
.stmt-table--revisao .stmt-row.row-pend .cat-chips { display: flex; }
/* Re-editando uma classificada (clicou no badge) → volta a mostrar os chips. */
.stmt-table--revisao .stmt-row.cat-reedit:not(.row-pend) .stmt-cat-txt { display: none; }
.stmt-table--revisao .stmt-row.cat-reedit:not(.row-pend) .cat-chips { display: flex; }

/* ===== Destacar linha (conferir/corrigir depois) ===== */
/* Destaque leve tipo marca-texto (amarelo) + barra âmbar à esquerda: salta aos
   olhos numa varredura rápida, sem competir com o laranja de "pendente". A flag
   fica discreta por padrão, some/aparece no hover; quando a linha está destacada
   fica sempre visível e âmbar. Especificidade com .stmt-table para vencer a cor
   de fundo de row-pend quando a linha for pendente E destacada ao mesmo tempo. */
.stmt-destacar { opacity: 0; color: var(--vlr-muted-soft); transition: opacity .12s var(--vlr-ease), color .12s var(--vlr-ease); }
.stmt-row:hover .stmt-destacar, .stmt-destacar:focus { opacity: .5; }
.stmt-destacar:hover { opacity: 1 !important; color: #CA8A04; }
.stmt-destacar.is-on { opacity: 1; color: #CA8A04; }

.stmt-table .stmt-row.is-destacado > td { background: #FEF08A; }
.stmt-table .stmt-row.is-destacado:hover > td { background: #FDE047; }
.stmt-table .stmt-row.is-destacado > td:first-child { box-shadow: inset 4px 0 0 #CA8A04; }

/* Combobox de categoria: campo único, buscável (substitui os 2 selects). */
.cat-box {
    display: inline-flex; align-items: center; gap: .3rem;
    border: 1px solid var(--vlr-border); border-radius: var(--vlr-radius-sm);
    background: var(--vlr-surface); padding: .1rem .45rem;
    max-width: 280px; transition: border-color .12s var(--vlr-ease), box-shadow .12s var(--vlr-ease);
}
.cat-box:focus-within { border-color: var(--vlr-primary); box-shadow: 0 0 0 2px var(--vlr-primary-soft); }
.cat-box.is-vazio { border-color: var(--vlr-pend); background: var(--vlr-pend-soft-2); }
.cat-ic { color: var(--vlr-muted-soft); font-size: .72rem; flex-shrink: 0; }
.cat-box.is-vazio .cat-ic { color: var(--vlr-pend); }
.cat-input {
    border: 0; background: transparent; outline: none;
    font-size: .82rem; color: var(--vlr-ink); font-weight: 600;
    width: 13rem; max-width: 100%; padding: .15rem 0;
}
.cat-input::placeholder { color: var(--vlr-pend); font-weight: 600; }

/* Chips de categoria em 2 níveis: grupos coloridos → subgrupos do grupo.
   A cor (matiz por grupo, via estilo inline do JS) ajuda a bater o olho. */
.cat-chips { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; padding: .35rem .35rem 0; }
.cat-chip {
    border: 1px solid var(--vlr-border); background: var(--vlr-surface-2);
    border-radius: 999px; padding: .16rem .6rem;
    font-size: .74rem; font-weight: 600; color: var(--vlr-ink);
    cursor: pointer; white-space: nowrap; line-height: 1.45;
    display: inline-flex; align-items: center; gap: .3rem;
    transition: filter .12s var(--vlr-ease), box-shadow .12s var(--vlr-ease);
}
.cat-chip:hover { filter: brightness(.95); box-shadow: var(--vlr-shadow-sm); }
.cat-chip--sub { font-weight: 500; }
.cat-chip--voltar { padding: .16rem .5rem; color: var(--vlr-muted); }
.cat-chip--lab { cursor: default; font-weight: 700; }
.cat-chip--lab:hover { filter: none; box-shadow: none; }

/* Rótulo "Categorizar:" antes dos chips (pendente) — sinaliza ação a fazer. */
.cat-prompt {
    display: inline-flex; align-items: center; gap: .25rem;
    font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
    color: var(--vlr-pend); margin-right: .1rem; white-space: nowrap;
}

/* ✓ verde antes da categoria já definida — distingue de cara do estado pendente. */
.stmt-cat-ok { color: var(--vlr-success); margin-right: .25rem; font-size: .8rem; }

/* Painel compartilhado do combobox (posicionado por JS, fora da tabela). */
.cat-panel {
    position: absolute; z-index: 1100;
    background: var(--vlr-surface); border: 1px solid var(--vlr-border);
    border-radius: var(--vlr-radius); box-shadow: var(--vlr-shadow-md);
    padding: 4px; max-height: 320px; overflow-y: auto; min-width: 260px;
}
.cat-panel[hidden] { display: none; }
.cat-opt {
    display: flex; align-items: center; gap: 7px; width: 100%;
    border: 0; background: transparent; cursor: pointer; text-align: left;
    padding: 7px 9px; border-radius: 6px; font-size: .85rem; color: var(--vlr-ink);
}
.cat-opt:hover, .cat-opt.is-active { background: var(--vlr-primary-soft); }
.cat-opt-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.cat-opt-g { font-weight: 600; }
.cat-opt-sep { color: var(--vlr-muted-soft); }
.cat-opt-s { color: var(--vlr-muted); }
.cat-panel-vazio { padding: 10px 12px; font-size: .82rem; color: var(--vlr-muted); }

.kpi .card-body { padding: 1.1rem 1.25rem; }
.kpi h3 { font-size: 1.5rem; letter-spacing: -.02em; }

/* ============================================================
   BPO Valorize — barra de contexto do cliente (escopo visual)
   ============================================================ */
.cliente-bar {
    background: linear-gradient(90deg, var(--vlr-primary) 0%, var(--vlr-primary-hover) 100%);
    color: #fff;
    box-shadow: var(--vlr-shadow-sm);
    position: sticky; top: 0; z-index: 1020;
}
.cliente-bar-inner {
    display: flex; align-items: center; gap: 18px;
    padding: 10px 0; flex-wrap: wrap;
}
.cliente-bar-id { display: flex; align-items: center; gap: 12px; }
.cliente-bar-avatar {
    width: 40px; height: 40px; border-radius: 10px;
    background: rgba(255,255,255,.18); color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 1.1rem; flex-shrink: 0;
}
.cliente-bar-nome { display: flex; flex-direction: column; line-height: 1.15; }
.cliente-bar-label {
    font-size: .68rem; text-transform: uppercase; letter-spacing: .08em;
    opacity: .8;
}
.cliente-bar-nome strong { font-size: 1.05rem; font-weight: 700; letter-spacing: -.01em; }

.cliente-bar-nav {
    list-style: none; display: flex; gap: 4px; margin: 0 auto 0 12px; padding: 0;
    flex-wrap: wrap;
}
.cliente-bar-nav a {
    display: inline-block; padding: 7px 14px; border-radius: 8px;
    color: rgba(255,255,255,.85); font-weight: 500; font-size: .9rem;
    text-decoration: none; transition: background .12s var(--vlr-ease), color .12s var(--vlr-ease);
}
.cliente-bar-nav a:hover { background: rgba(255,255,255,.12); color: #fff; }
.cliente-bar-nav a.active { background: #fff; color: var(--vlr-primary); font-weight: 600; }

.cliente-bar-trocar { border-color: rgba(255,255,255,.5); }
.cliente-bar-trocar:hover { background: rgba(255,255,255,.15); border-color: #fff; }

/* Busca de cliente */
.cliente-busca-wrap { max-width: 1040px; margin: 8px auto 0; }
.cliente-result { cursor: pointer; }
/* Colunas empilhadas de cards (resultados da busca + favoritos) */
.cliente-fav-stack { display: flex; flex-direction: column; gap: .7rem; }
.acesso-lista { max-height: 320px; overflow-y: auto; }

@media (max-width: 640px) {
    .cliente-bar-nav { width: 100%; margin: 6px 0 0; order: 3; }
    .cliente-bar-trocar { margin-left: auto; }
}

/* ============================================================
   BPO Valorize — densidade do conteúdo (fontes menores)
   ============================================================ */
main.container { padding-top: 1.25rem; }
main h1, main .h1 { font-size: 1.35rem; font-weight: 700; }
main h2, main .h2 { font-size: 1.15rem; }
main h5, main .h5 { font-size: 1rem; }
main h6, main .h6 { font-size: .82rem; }
main p { font-size: .88rem; }
main .card-body { font-size: .9rem; }
.kpi h3 { font-size: 1.25rem; }
.cliente-busca-wrap h1 { font-size: 1.3rem; }

/* Navbar mais baixa: enxuga também os elementos internos que definem a altura. */
.navbar-nav .nav-link { padding: 0.25rem 0.75rem !important; }
.navbar-user-avatar { width: 24px; height: 24px; font-size: .7rem; }
.navbar .btn-sm { padding: 0.2rem 0.6rem; font-size: .8rem; }

/* Card destacado pela navegação de teclado (↑/↓) — anel de foco da marca */
.cliente-fav-card.kbd-active {
    border-color: var(--vlr-primary);
    box-shadow: 0 0 0 3px var(--vlr-primary-soft);
}

/* Botão-estrela de favoritar (lista de busca + cards) */
.cliente-fav-star {
    border: 0; background: transparent; cursor: pointer;
    padding: .25rem; line-height: 1; font-size: 1rem;
    color: var(--vlr-muted-soft);
    transition: color .15s var(--vlr-ease), transform .15s var(--vlr-ease);
}
.cliente-fav-star:hover { transform: scale(1.15); }
.cliente-fav-star.text-warning { color: #F59E0B; }
.cliente-fav-star.text-muted { color: var(--vlr-muted-soft); }
.cliente-fav-star.text-muted:hover { color: #F59E0B; }

/* ============================================================
   Favoritos — cards branded (grid abaixo da busca)
   ============================================================ */
#cli-favoritos > .text-uppercase { letter-spacing: .06em; font-weight: 600; }

.cliente-fav-card {
    display: flex; align-items: center; gap: .85rem;
    height: 100%;
    padding: .8rem .9rem;
    background: var(--vlr-surface);
    border: 1px solid var(--vlr-border);
    border-radius: var(--vlr-radius);
    box-shadow: var(--vlr-shadow-xs);
    cursor: pointer;
    transition: transform .18s var(--vlr-ease), box-shadow .18s var(--vlr-ease), border-color .18s var(--vlr-ease);
}
.cliente-fav-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--vlr-shadow-md);
    border-color: var(--vlr-primary);
}

.cliente-fav-avatar {
    flex: 0 0 auto;
    width: 42px; height: 42px;
    display: grid; place-items: center;
    border-radius: var(--vlr-radius-sm);
    background: linear-gradient(135deg, var(--vlr-primary) 0%, var(--vlr-accent) 100%);
    color: #fff; font-weight: 700; font-size: .9rem; letter-spacing: .02em;
    box-shadow: 0 4px 10px rgba(30, 91, 190, .25);
}

.cliente-fav-body { min-width: 0; flex: 1 1 auto; }
.cliente-fav-nome {
    font-weight: 600; color: var(--vlr-ink); font-size: .92rem; line-height: 1.25;
    /* quebra em até 2 linhas em vez de cortar — o nome precisa aparecer inteiro */
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
    overflow: hidden; overflow-wrap: anywhere;
}
.cliente-fav-doc {
    margin-top: .1rem;
    font-family: var(--vlr-font-mono); font-size: .76rem; color: var(--vlr-muted);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cliente-fav-doc.vazio { font-family: var(--vlr-font-ui); font-style: italic; color: var(--vlr-muted-soft); }

.cliente-fav-acoes { flex: 0 0 auto; display: flex; align-items: center; gap: .1rem; }
.cliente-fav-edit {
    display: inline-grid; place-items: center;
    width: 28px; height: 28px; border-radius: 7px;
    color: var(--vlr-muted-soft); font-size: .78rem;
    transition: color .15s var(--vlr-ease), background .15s var(--vlr-ease);
}
.cliente-fav-edit:hover { color: var(--vlr-primary); background: var(--vlr-primary-soft); }

.cliente-fav-go {
    flex: 0 0 auto; color: var(--vlr-muted-soft); font-size: .82rem;
    transition: color .18s var(--vlr-ease), transform .18s var(--vlr-ease);
}
.cliente-fav-card:hover .cliente-fav-go { color: var(--vlr-primary); transform: translateX(3px); }

/* Chips de acesso a clientes (form de usuário) */
.acesso-chip {
    background: var(--vlr-primary-soft); color: var(--vlr-primary);
    font-weight: 500; font-size: .82rem; padding: .4rem .6rem;
    display: inline-flex; align-items: center; gap: .4rem;
}
.acesso-remove {
    border: 0; background: transparent; color: var(--vlr-primary);
    font-size: 1.05rem; line-height: 1; cursor: pointer; padding: 0;
}
.acesso-remove:hover { color: var(--vlr-danger); }
#acesso-sugestoes .list-group-item { cursor: pointer; }

/* Dropzone de upload (drag & drop de PDF) */
.dropzone {
    display: block;
    width: 100%;
    margin: 0;
    border: 2px dashed var(--vlr-border);
    border-radius: var(--vlr-radius);
    background: var(--vlr-surface-2);
    padding: 2rem 1rem;
    text-align: center;
    cursor: pointer;
    transition: border-color .15s var(--vlr-ease), background .15s var(--vlr-ease);
}
.dropzone:hover { border-color: var(--vlr-accent); background: var(--vlr-bg-soft); }
.dropzone.is-dragover {
    border-color: var(--vlr-primary);
    background: var(--vlr-primary-soft);
}
.dropzone.has-file {
    border-style: solid;
    border-color: var(--vlr-success);
    background: var(--vlr-success-soft);
}
.dropzone-icon { font-size: 2.1rem; color: var(--vlr-primary); margin-bottom: .5rem; }
.dropzone.is-dragover .dropzone-icon { color: var(--vlr-primary-hover); }
.dropzone-text { color: var(--vlr-ink); }
.dropzone-hint { color: var(--vlr-muted); font-size: .85rem; margin-top: .25rem; }
.dropzone-file {
    display: inline-flex; align-items: center; gap: .5rem;
    font-weight: 500; color: var(--vlr-ink);
}
.dropzone-file i.fa-file-pdf { color: var(--vlr-danger); font-size: 1.2rem; }

/* Lista de arquivos selecionados para importar */
.file-list { list-style: none; margin: .75rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.file-item {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 10px; border: 1px solid var(--vlr-border);
    border-radius: var(--vlr-radius); background: var(--vlr-surface-2);
}
.file-ic { color: var(--vlr-danger); font-size: 1.15rem; flex-shrink: 0; }
.file-meta { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.file-name { font-weight: 500; color: var(--vlr-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-sub { font-size: .78rem; color: var(--vlr-muted); }
.file-status { font-size: .78rem; font-weight: 600; white-space: nowrap; flex-shrink: 0; }
.file-status-check { color: var(--vlr-muted); }
.file-status-ok    { color: var(--vlr-success); }
.file-status-dup   { color: var(--vlr-warning); }
.file-remove {
    border: 0; background: transparent; color: var(--vlr-muted);
    font-size: 1.25rem; line-height: 1; cursor: pointer; padding: 0 4px; flex-shrink: 0;
    transition: color .15s var(--vlr-ease);
}
.file-remove:hover { color: var(--vlr-danger); }

/* Loader: lista de arquivos analisados (uma linha por PDF) */
.loader-files {
    list-style: none; margin: 14px 0 0; padding: 4px 0 0; text-align: left;
    max-height: 220px; overflow-y: auto; border-top: 1px solid var(--vlr-border-soft);
}
.loader-files:empty { border-top: 0; margin: 0; }
.loader-file {
    display: flex; align-items: center; gap: 12px;
    padding: 9px 4px; color: var(--vlr-muted-soft); font-weight: 500; font-size: .9rem;
    border-bottom: 1px solid var(--vlr-border-soft);
    transition: color .2s var(--vlr-ease);
}
.loader-file:last-child { border-bottom: 0; }
.loader-file-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.loader-file .loader-ic {
    width: 20px; height: 20px; border-radius: 999px; flex-shrink: 0;
    border: 2px solid var(--vlr-border); position: relative;
    transition: all .2s var(--vlr-ease);
}
.loader-file.active { color: var(--vlr-ink); }
.loader-file.active .loader-ic {
    border-color: var(--vlr-primary); border-top-color: transparent;
    animation: loaderSpin .7s linear infinite;
}
.loader-file.done { color: var(--vlr-ink); }
.loader-file.done .loader-ic {
    border-color: var(--vlr-success); background: var(--vlr-success); animation: none;
}
.loader-file.done .loader-ic::after {
    content: ''; position: absolute; left: 5px; top: 2px;
    width: 5px; height: 9px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.loader-file.fail { color: var(--vlr-danger); }
.loader-file.fail .loader-ic {
    border-color: var(--vlr-danger); background: var(--vlr-danger); animation: none;
}
.loader-file.fail .loader-ic::after {
    content: '!'; position: absolute; inset: 0; color: #fff;
    font-size: .7rem; font-weight: 700; display: flex; align-items: center; justify-content: center;
}

/* ============================================================
   BPO Valorize — Layout lateral (sidebar / Monday-style)
   Ativado por <body class="layout-sidebar">. Reversível via
   .env UI_LAYOUT=topbar.
   ============================================================ */
.layout-sidebar { background: var(--vlr-bg); }

.sidebar {
    position: fixed; top: 0; left: 0;
    width: 252px; height: 100vh;
    background: linear-gradient(180deg, #0B1A33 0%, #14233F 100%);
    color: #fff;
    display: flex; flex-direction: column;
    padding: 16px 12px;
    z-index: 1040;
    overflow-y: auto;
    border-right: 1px solid rgba(255,255,255,.05);
}
.sidebar-brand {
    display: flex; align-items: center; gap: 10px;
    padding: 6px 8px 16px;
    border-bottom: 1px solid rgba(255,255,255,.07); margin-bottom: 12px;
}
.sidebar-brand-logo { display: inline-flex; flex: 0 0 auto; }
.sidebar-brand-info { display: flex; flex-direction: column; min-width: 0; line-height: 1.15; }
.sidebar-brand-main { text-decoration: none; color: #fff; }
.sidebar-logo { height: 24px; width: auto; filter: brightness(0) invert(1); }
.sidebar-brand-text { font-weight: 700; letter-spacing: .01em; font-size: 1rem; }
.sidebar-version {
    margin-top: 2px;
    font-size: .72rem; letter-spacing: .02em;
    color: rgba(255,255,255,.45); text-decoration: none;
    transition: color .15s var(--vlr-ease);
}
.sidebar-version:hover { color: rgba(255,255,255,.9); text-decoration: underline; }

/* ============================================================
   Página de Novidades (CHANGELOG renderizado)
   ============================================================ */
.changelog-wrap { max-width: 820px; }
.changelog-body > *:first-child { margin-top: 0; }
.changelog-body h2 {
    font-size: 1rem; font-weight: 700; color: var(--vlr-primary);
    margin: 1.6rem 0 .7rem; padding-bottom: .3rem;
    border-bottom: 1px solid var(--vlr-border);
}
.changelog-body ul { padding-left: 1.15rem; margin: 0 0 .6rem; }
.changelog-body li { margin-bottom: .45rem; font-size: .9rem; line-height: 1.45; }
.changelog-body li strong { color: var(--vlr-ink); }
.changelog-body p { font-size: .88rem; color: var(--vlr-muted); }
.changelog-body hr { display: none; }

.sidebar-nav { display: flex; flex-direction: column; gap: 4px; }

.sidebar-client {
    display: flex; align-items: center; gap: 10px;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: var(--vlr-radius); padding: 10px; margin-bottom: 10px;
}
.sidebar-client-avatar {
    width: 36px; height: 36px; border-radius: 9px; flex-shrink: 0;
    background: linear-gradient(135deg, var(--vlr-primary), var(--vlr-accent));
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 1rem;
}
.sidebar-client-info { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.sidebar-client-label { font-size: .62rem; text-transform: uppercase; letter-spacing: .1em; opacity: .65; }
.sidebar-client-name { font-weight: 600; font-size: .92rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar-client-switch {
    flex-shrink: 0; width: 30px; height: 30px; border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    color: rgba(255,255,255,.7); background: rgba(255,255,255,.06);
    transition: all .15s var(--vlr-ease);
}
.sidebar-client-switch:hover { background: var(--vlr-primary); color: #fff; transform: rotate(180deg); }

.sidebar-section-label {
    font-size: .64rem; text-transform: uppercase; letter-spacing: .12em;
    color: rgba(255,255,255,.4); margin: 16px 10px 6px;
}
.sidebar-section-label--cliente {
    display: flex; align-items: center; gap: 6px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    color: rgba(255,255,255,.55);
}
.sidebar-cliente-dot { font-size: .42rem; color: var(--vlr-accent); flex-shrink: 0; }
.sidebar-group { display: flex; flex-direction: column; gap: 2px; }

.sidebar-link {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 12px; border-radius: var(--vlr-radius-sm);
    color: rgba(255,255,255,.74); text-decoration: none;
    font-weight: 500; font-size: .9rem;
    transition: background .14s var(--vlr-ease), color .14s var(--vlr-ease);
    position: relative;
}
.sidebar-link i { width: 18px; text-align: center; font-size: .95rem; opacity: .9; }
.sidebar-link:hover { background: rgba(255,255,255,.08); color: #fff; }
.sidebar-link.active { background: var(--vlr-primary); color: #fff; box-shadow: 0 4px 12px rgba(30,91,190,.35); }
.sidebar-link.active i { opacity: 1; }

/* Contador de tarefas pendentes no item "Tarefas".
   Cor por prazo: vermelho = atrasada, amarelo = vencendo (≤3 dias), azul = no prazo. */
.sidebar-count {
    min-width: 20px; height: 20px; padding: 0 6px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 999px; font-size: .72rem; font-weight: 700; line-height: 1;
    background: var(--vlr-primary); color: #fff;
}
.sidebar-count--atraso   { background: var(--vlr-danger);  color: #fff; }
.sidebar-count--vencendo { background: var(--vlr-warning); color: #fff; }
.sidebar-count--ok       { background: var(--vlr-primary); color: #fff; }
.sidebar-link.active .sidebar-count { background: rgba(255,255,255,.92); color: var(--vlr-ink); }

/* Submenu expansível da sidebar (ex.: "Classificação") */
.sidebar-sub { display: flex; flex-direction: column; gap: 2px; }
.sidebar-sub-toggle { width: 100%; border: 0; background: transparent; cursor: pointer; font: inherit; text-align: left; }
.sidebar-sub-caret { font-size: .7rem !important; opacity: .6; transition: transform .16s var(--vlr-ease); }
.sidebar-sub.is-open .sidebar-sub-caret { transform: rotate(180deg); }
.sidebar-sub-items {
    display: grid; grid-template-rows: 0fr;
    transition: grid-template-rows .18s var(--vlr-ease);
}
.sidebar-sub.is-open .sidebar-sub-items { grid-template-rows: 1fr; }
/* Wrapper único: o truque de colapso com grid 0fr↔1fr só zera a linha quando há
   um só filho no grid. Com vários <a> diretos, os itens sobram em linhas
   implícitas (auto) e não recolhem — daí o wrapper interno. */
.sidebar-sub-items-inner {
    min-height: 0; overflow: hidden;
    display: flex; flex-direction: column; gap: 2px;
}
.sidebar-sub-link { margin-left: 14px; padding-left: 12px; border-left: 1px solid rgba(255,255,255,.12); border-radius: 0 var(--vlr-radius-sm) var(--vlr-radius-sm) 0; }

/* Botão "sair do cliente" (form) — herda o visual do switch */
.sidebar-client-switch-form { margin: 0; display: inline-flex; flex-shrink: 0; }
button.sidebar-client-switch { border: 0; cursor: pointer; font: inherit; }

/* Marca d'água: menu do cliente desabilitado até um cliente ser selecionado */
.sidebar-link.is-watermark {
    opacity: .38;
    filter: grayscale(1);
    cursor: not-allowed;
    pointer-events: none;
    user-select: none;
}
.sidebar-client--vazio .sidebar-client-avatar {
    background: rgba(255,255,255,.06); color: rgba(255,255,255,.5);
}
.sidebar-client--vazio .sidebar-client-name { color: rgba(255,255,255,.5); font-style: italic; }

/* Shell + conteúdo */
.app-shell { margin-left: 252px; min-height: 100vh; display: flex; flex-direction: column; }
.content-area { padding: 1.5rem 1.75rem; flex: 1; width: 100%; max-width: 1440px; }

/* Topbar slim */
.topbar {
    position: sticky; top: 0; z-index: 1020;
    height: 56px; background: rgba(255,255,255,.85); backdrop-filter: saturate(180%) blur(8px);
    border-bottom: 1px solid var(--vlr-border);
    display: flex; align-items: center; gap: 14px; padding: 0 1.5rem;
}
.topbar-toggle { display: none; border: 0; background: transparent; font-size: 1.2rem; color: var(--vlr-ink); }
.topbar-context { font-weight: 600; color: var(--vlr-ink); letter-spacing: -.01em; }
.topbar-right { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.topbar-user {
    display: inline-flex; align-items: center; gap: 8px; text-decoration: none;
    color: var(--vlr-ink); font-size: .85rem; font-weight: 500;
    padding: 4px 10px 4px 4px; border-radius: 999px; transition: background .15s var(--vlr-ease);
}
.topbar-user:hover, .topbar-user.active { background: var(--vlr-primary-soft); color: var(--vlr-primary); }
.topbar-avatar {
    width: 30px; height: 30px; border-radius: 999px;
    background: linear-gradient(135deg, var(--vlr-primary), var(--vlr-accent)); color: #fff;
    display: inline-flex; align-items: center; justify-content: center; font-size: .75rem; font-weight: 700;
}
/* Trocar/selecionar cliente — na topbar, ao lado do nome do cliente. */
.topbar-switch-form { margin: 0; display: inline-flex; }
.topbar-switch {
    display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
    border: 1px solid currentColor; background: transparent; color: inherit; font: inherit;
    font-size: .72rem; font-weight: 600; line-height: 1; text-decoration: none;
    padding: 4px 10px; border-radius: 999px; opacity: .7;
    transition: opacity .15s var(--vlr-ease), background .15s var(--vlr-ease), color .15s var(--vlr-ease);
}
.topbar-switch:hover { opacity: 1; background: currentColor; }
.topbar-switch:hover .topbar-switch-txt, .topbar-switch:hover i { color: #fff; }
@media (max-width: 575.98px) { .topbar-switch-txt { display: none; } }

/* Efeitos leves nos cards do conteúdo */
.layout-sidebar .kpi {
    position: relative; overflow: hidden;
    transition: transform .16s var(--vlr-ease), box-shadow .16s var(--vlr-ease);
}
.layout-sidebar .kpi::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
    background: linear-gradient(90deg, var(--vlr-primary), var(--vlr-accent));
    opacity: .9;
}
.layout-sidebar .kpi:hover { transform: translateY(-3px); box-shadow: var(--vlr-shadow-md); }
/* Barra de acento no topo, colorida por natureza do KPI */
.layout-sidebar .kpi--success::before { background: linear-gradient(90deg, var(--vlr-success), #10B981); }
.layout-sidebar .kpi--danger::before  { background: linear-gradient(90deg, var(--vlr-danger), #FB7185); }
.layout-sidebar .kpi--warning::before { background: linear-gradient(90deg, var(--vlr-warning), #F59E0B); }
.layout-sidebar .kpi--primary::before { background: linear-gradient(90deg, var(--vlr-primary), var(--vlr-accent)); }

/* Backdrop do menu mobile */
.sidebar-backdrop {
    position: fixed; inset: 0; background: rgba(11,26,51,.45); z-index: 1035;
    opacity: 0; visibility: hidden; transition: opacity .2s var(--vlr-ease);
}

/* Responsivo: sidebar off-canvas */
@media (max-width: 991.98px) {
    .sidebar { transform: translateX(-100%); transition: transform .25s var(--vlr-ease); }
    .app-shell { margin-left: 0; }
    .topbar-toggle { display: inline-flex; }
    body.sidebar-open .sidebar { transform: translateX(0); }
    body.sidebar-open .sidebar-backdrop { opacity: 1; visibility: visible; }
}

/* ============================================================
   Categorias — board estilo monday (grupos / subgrupos)
   ============================================================ */
.cat-empty {
    border: 1px dashed var(--vlr-border);
    border-radius: var(--vlr-radius);
    padding: 1.5rem; text-align: center; background: var(--vlr-surface-2);
}

.cat-grupo {
    background: var(--vlr-surface);
    border: 1px solid var(--vlr-border);
    border-left: 4px solid var(--vlr-muted-soft);   /* cor sobrescrita por natureza */
    border-radius: var(--vlr-radius);
    box-shadow: var(--vlr-shadow-xs);
    margin-bottom: .75rem;
    overflow: hidden;
}
.cat-grupo[data-natureza="entrada"]       { border-left-color: var(--vlr-success); }
.cat-grupo[data-natureza="saida"]         { border-left-color: var(--vlr-danger); }
.cat-grupo[data-natureza="transferencia"] { border-left-color: var(--vlr-muted); }
.cat-grupo.is-inativo { opacity: .6; }

.cat-grupo-head {
    display: flex; align-items: center; gap: .5rem;
    padding: .6rem .85rem;
    background: var(--vlr-surface-2);
    border-bottom: 1px solid var(--vlr-border-soft);
}
.cat-grupo-nome { font-weight: 600; color: var(--vlr-ink); letter-spacing: -.01em; }
.cat-count { color: var(--vlr-muted); font-size: .78rem; }
.cat-grupo.is-inativo .cat-grupo-nome { text-decoration: line-through; }

.cat-collapse {
    border: 0; background: transparent; color: var(--vlr-muted);
    cursor: pointer; padding: 0 .25rem; line-height: 1;
}
.cat-collapse i { transition: transform .18s var(--vlr-ease); }
.cat-grupo.is-collapsed .cat-collapse i { transform: rotate(-90deg); }
.cat-grupo.is-collapsed .cat-grupo-body { display: none; }

.cat-grupo-body { padding: .25rem .5rem .5rem; }

.cat-sub-row {
    display: flex; align-items: center; gap: .5rem;
    padding: .4rem .35rem; border-radius: var(--vlr-radius-sm);
    transition: background .12s var(--vlr-ease);
}
.cat-sub-row:hover { background: var(--vlr-bg-soft); }
.cat-sub-icon { color: var(--vlr-muted-soft); font-size: .7rem; }
.cat-sub-nome { color: var(--vlr-ink); }
.cat-sub-row.is-inativo .cat-sub-nome { text-decoration: line-through; color: var(--vlr-muted); }

/* Ações (toggle/excluir) — discretas, aparecem no hover da linha */
.cat-actions { display: inline-flex; align-items: center; gap: .15rem; }
.cat-act { margin: 0; display: inline; }
.cat-act-btn {
    border: 0; background: transparent; cursor: pointer;
    padding: .15rem .35rem; line-height: 1; color: var(--vlr-muted);
    border-radius: var(--vlr-radius-sm);
    opacity: .35; transition: opacity .12s var(--vlr-ease), background .12s var(--vlr-ease), color .12s;
}
.cat-sub-row:hover .cat-act-btn,
.cat-grupo-head:hover .cat-act-btn,
.cat-fonte-row:hover .cat-act-btn { opacity: 1; }
.cat-act-btn:hover { background: var(--vlr-surface-2); }
.cat-act-del:hover { color: var(--vlr-danger); background: var(--vlr-danger-soft); }

/* Linhas de adicionar (subgrupo dentro do grupo / novo grupo) */
.cat-add-row, .cat-novo-grupo {
    display: flex; align-items: center; gap: .5rem;
    padding: .4rem .35rem; margin: 0;
}
.cat-add-row { border-top: 1px dashed var(--vlr-border-soft); margin-top: .25rem; padding-top: .55rem; }
.cat-add-icon { color: var(--vlr-muted-soft); font-size: .8rem; }
.cat-add-input { flex: 1 1 auto; }
.cat-add-nat { max-width: 150px; }
.cat-novo-grupo {
    border: 1px dashed var(--vlr-border);
    border-radius: var(--vlr-radius);
    background: var(--vlr-surface-2);
    padding: .6rem .85rem; margin-top: .5rem;
}
.cat-novo-grupo input[name="nome"] { flex: 1 1 auto; }

/* ============================================================
   BPO Valorize — Loader de importação (etapas/checks)
   ============================================================ */
.import-loader {
    position: fixed; inset: 0; z-index: 2000;
    background: rgba(11,26,51,.55); backdrop-filter: blur(4px);
    display: none; align-items: center; justify-content: center; padding: 16px;
}
.import-loader.ativo { display: flex; animation: loaderFade .2s var(--vlr-ease); }
@keyframes loaderFade { from { opacity: 0; } to { opacity: 1; } }

.import-loader-card {
    background: #fff; border-radius: var(--vlr-radius-lg);
    box-shadow: var(--vlr-shadow-md); padding: 30px 32px 26px;
    width: 100%; max-width: 440px; text-align: center;
}
.import-loader-title { font-weight: 700; font-size: 1.18rem; margin: 0 0 4px; }
.import-loader-sub {
    margin: 0 auto 18px; max-width: 320px;
    font-size: .86rem; color: var(--vlr-muted); line-height: 1.5;
}
.import-loader-spinner {
    width: 56px; height: 56px; margin: 0 auto 16px;
    border-radius: 16px; display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, var(--vlr-primary), var(--vlr-accent)); color: #fff;
    font-size: 1.4rem; box-shadow: 0 8px 20px rgba(30,91,190,.35);
    animation: loaderPulse 1.4s ease-in-out infinite;
}
@keyframes loaderPulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.08); } }

.loader-steps { list-style: none; margin: 0; padding: 0; text-align: left; }
.loader-step {
    display: flex; align-items: center; gap: 12px;
    padding: 9px 6px; color: var(--vlr-muted-soft); font-weight: 500; font-size: .92rem;
    transition: color .2s var(--vlr-ease);
}
.loader-step .loader-ic {
    width: 22px; height: 22px; border-radius: 999px; flex-shrink: 0;
    border: 2px solid var(--vlr-border); position: relative;
    transition: all .2s var(--vlr-ease);
}
/* etapa em andamento: spinner girando */
.loader-step.active { color: var(--vlr-ink); }
.loader-step.active .loader-ic {
    border-color: var(--vlr-primary); border-top-color: transparent;
    animation: loaderSpin .7s linear infinite;
}
/* etapa concluída: check verde */
.loader-step.done { color: var(--vlr-ink); }
.loader-step.done .loader-ic {
    border-color: var(--vlr-success); background: var(--vlr-success);
    animation: none;
}
.loader-step.done .loader-ic::after {
    content: ''; position: absolute; left: 6px; top: 2px;
    width: 5px; height: 10px; border: solid #fff; border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
@keyframes loaderSpin { to { transform: rotate(360deg); } }

/* Loader: tempo decorrido + frases rotativas */
.import-loader-timer {
    display: inline-block; margin-bottom: 16px;
    font-family: var(--vlr-font-mono); font-size: .8rem; font-weight: 600;
    color: var(--vlr-primary); background: var(--vlr-primary-soft);
    padding: 3px 10px; border-radius: 999px;
}
.loader-frase {
    margin: 16px 0 0; min-height: 1.3em;
    font-size: .85rem; color: var(--vlr-muted); font-style: italic;
}
.loader-frase.frase-in { animation: fraseIn .4s var(--vlr-ease); }
@keyframes fraseIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }

/* ============================================================
   BPO Valorize — Categorias agrupadas por natureza
   ============================================================ */
.cat-natureza { margin-bottom: 1.5rem; }
.cat-natureza-head {
    display: flex; align-items: center; gap: 10px;
    font-size: .72rem; font-weight: 700; letter-spacing: .1em;
    text-transform: uppercase; color: var(--vlr-muted);
    padding: 4px 2px 8px; margin-bottom: 6px;
    border-bottom: 2px solid var(--vlr-border);
}
.cat-natureza-dot { width: 9px; height: 9px; border-radius: 999px; flex-shrink: 0; }
.cat-natureza-count {
    margin-left: auto; font-size: .68rem; font-weight: 600; letter-spacing: .04em;
    color: var(--vlr-muted-soft); text-transform: none;
}
.cat-natureza--entrada       .cat-natureza-dot { background: var(--vlr-success); }
.cat-natureza--entrada       .cat-natureza-head { color: var(--vlr-success); border-color: var(--vlr-success-soft); }
.cat-natureza--saida         .cat-natureza-dot { background: var(--vlr-danger); }
.cat-natureza--saida         .cat-natureza-head { color: var(--vlr-danger); border-color: var(--vlr-danger-soft); }
.cat-natureza--transferencia .cat-natureza-dot { background: var(--vlr-muted); }
.cat-natureza--transferencia .cat-natureza-head { color: var(--vlr-muted); border-color: var(--vlr-border); }

/* Barra de cor à esquerda do grupo conforme a natureza da seção */
.cat-natureza--entrada       .cat-grupo { border-left: 3px solid var(--vlr-success); }
.cat-natureza--saida         .cat-grupo { border-left: 3px solid var(--vlr-danger); }
.cat-natureza--transferencia .cat-grupo { border-left: 3px solid var(--vlr-muted-soft); }

/* Adicionar grupo — estilo Monday (discreto, botão aparece ao focar/digitar) */
.cat-add-grupo {
    display: flex; align-items: center; gap: 9px;
    padding: 7px 10px; margin: 4px 0 2px;
    border-radius: var(--vlr-radius-sm);
    border: 1px solid transparent;
    transition: background .15s var(--vlr-ease), border-color .15s var(--vlr-ease), box-shadow .15s var(--vlr-ease);
}
.cat-add-grupo:hover { background: var(--vlr-surface-2); }
.cat-add-grupo:focus-within { background: #fff; border-color: var(--vlr-border); box-shadow: var(--vlr-shadow-xs); }
.cat-add-grupo-ic {
    width: 22px; height: 22px; border-radius: 6px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    background: var(--vlr-primary-soft); color: var(--vlr-primary); font-size: .72rem;
}
.cat-add-grupo-input {
    flex: 1 1 auto; border: 0; background: transparent; outline: none;
    font-size: .88rem; font-weight: 500; color: var(--vlr-ink); padding: 4px 0; min-width: 0;
}
.cat-add-grupo-input::placeholder { color: var(--vlr-muted); font-weight: 500; }
.cat-add-grupo-btn {
    flex-shrink: 0; opacity: 0; transform: translateX(4px); pointer-events: none;
    transition: opacity .15s var(--vlr-ease), transform .15s var(--vlr-ease);
}
.cat-add-grupo:focus-within .cat-add-grupo-btn,
.cat-add-grupo-input:not(:placeholder-shown) ~ .cat-add-grupo-btn {
    opacity: 1; transform: none; pointer-events: auto;
}

/* ====================================================================
   Anotações — mural de cards estilo "Keep notes".
   ==================================================================== */
.anota-board { --anota-bg: var(--vlr-surface); }

/* Paleta de cores dos cards (fundo + borda suave). */
.anota--default  { --c-bg: var(--vlr-surface);  --c-bd: var(--vlr-border); }
.anota--amarelo  { --c-bg: #FEF9C3;  --c-bd: #FDE68A; }
.anota--laranja  { --c-bg: #FFEDD5;  --c-bd: #FED7AA; }
.anota--vermelho { --c-bg: #FFE4E6;  --c-bd: #FECDD3; }
.anota--verde    { --c-bg: #DCFCE7;  --c-bd: #BBF7D0; }
.anota--azul     { --c-bg: #DBEAFE;  --c-bd: #BFDBFE; }
.anota--roxo     { --c-bg: #EDE9FE;  --c-bd: #DDD6FE; }
.anota--rosa     { --c-bg: #FCE7F3;  --c-bd: #FBCFE8; }
.anota--cinza    { --c-bg: #F1F5F9;  --c-bd: #E2E8F0; }

/* Bolinhas do seletor de cor (mesma paleta, só o fundo). */
.anota-cor--default  { background: var(--vlr-surface); }
.anota-cor--amarelo  { background: #FEF08A; }
.anota-cor--laranja  { background: #FDBA74; }
.anota-cor--vermelho { background: #FDA4AF; }
.anota-cor--verde    { background: #86EFAC; }
.anota-cor--azul     { background: #93C5FD; }
.anota-cor--roxo     { background: #C4B5FD; }
.anota-cor--rosa     { background: #F9A8D4; }
.anota-cor--cinza    { background: #CBD5E1; }

/* ---- Compositor ---- */
.anota-novo {
    max-width: 640px;
    margin: 0 auto 1.75rem;
    background: var(--vlr-surface);
    border: 1px solid var(--vlr-border);
    border-radius: var(--vlr-radius);
    box-shadow: var(--vlr-shadow-sm);
    padding: .6rem .85rem;
    transition: box-shadow .15s var(--vlr-ease);
}
.anota-novo.is-aberto { box-shadow: var(--vlr-shadow-md); }
.anota-novo-titulo,
.anota-novo-conteudo,
.anota-titulo,
.anota-conteudo {
    width: 100%;
    border: 0;
    background: transparent;
    outline: none;
    color: var(--vlr-ink);
    font-family: var(--vlr-font-ui);
    resize: none;
}
.anota-novo-titulo,
.anota-titulo { font-weight: 600; font-size: .98rem; margin-bottom: .25rem; }
.anota-novo-titulo::placeholder,
.anota-titulo::placeholder { font-weight: 600; color: var(--vlr-muted-soft); }
.anota-novo-conteudo,
.anota-conteudo { font-size: .9rem; line-height: 1.45; overflow: hidden; min-height: 1.4rem; }
.anota-novo-titulo,
.anota-novo-conteudo { display: block; }
/* No compositor, o conteúdo extra só aparece ao focar. */
.anota-novo:not(.is-aberto) .anota-novo-titulo,
.anota-novo:not(.is-aberto) .anota-novo-foot { display: none; }
.anota-novo-foot,
.anota-foot {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-top: .5rem;
}
.anota-novo-foot { padding-top: .25rem; }

/* ---- Seletor de cores ---- */
/* nowrap + min-width:0: as 9 cores ficam sempre numa linha só (o card tem
   largura fixa e 18px×9 estourava, jogando a última cor para baixo). */
.anota-cores { display: flex; flex-wrap: nowrap; gap: .25rem; flex: 1; min-width: 0; }
.anota-cor {
    width: 16px; height: 16px;
    flex: 0 0 16px;
    border-radius: 50%;
    border: 1px solid rgba(11,26,51,.15);
    padding: 0; cursor: pointer;
    transition: transform .1s var(--vlr-ease);
}
.anota-cor:hover { transform: scale(1.18); }
.anota-cor.is-sel { box-shadow: 0 0 0 2px var(--vlr-surface), 0 0 0 4px var(--vlr-primary); }

/* ---- Mural (grade que encaixa — cards de largura fixa que quebram linha) ---- */
.anota-grid {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 1rem;
}
.anota {
    position: relative;
    flex: 0 0 248px;
    width: 248px;
    display: flex;
    flex-direction: column;
    background: var(--c-bg);
    border: 1px solid var(--c-bd);
    border-radius: var(--vlr-radius);
    box-shadow: var(--vlr-shadow-xs);
    padding: .75rem .85rem .6rem;
    transition: box-shadow .15s var(--vlr-ease), transform .1s var(--vlr-ease), opacity .12s var(--vlr-ease);
}
@media (max-width: 380px) {
    .anota { flex-basis: 100%; width: 100%; }
}
.anota:hover { box-shadow: var(--vlr-shadow-md); }
.anota.is-fixado { box-shadow: var(--vlr-shadow-sm); }
/* Card sendo arrastado: discreto, indica que está "solto". */
.anota.is-dragging { opacity: .45; box-shadow: var(--vlr-shadow-md); }

/* Alça de arrastar (canto superior esquerdo, aparece no hover). */
.anota-handle {
    position: absolute;
    top: .4rem; left: .3rem;
    width: 22px; height: 26px;
    border: 0; border-radius: var(--vlr-radius-sm);
    background: transparent;
    color: var(--vlr-muted-soft);
    cursor: grab;
    opacity: 0;
    transition: opacity .15s var(--vlr-ease), color .15s var(--vlr-ease);
}
.anota:hover .anota-handle { opacity: 1; }
.anota-handle:hover { color: var(--vlr-ink); }
.anota-handle:active { cursor: grabbing; }

/* Footer (cores + lixeira) aparece no hover/foco para não poluir. */
.anota-foot { opacity: 0; transition: opacity .15s var(--vlr-ease); }
.anota:hover .anota-foot,
.anota:focus-within .anota-foot { opacity: 1; }

.anota-pin {
    position: absolute;
    top: .4rem; right: .4rem;
    width: 26px; height: 26px;
    border: 0; border-radius: 50%;
    background: transparent;
    color: var(--vlr-muted-soft);
    cursor: pointer;
    opacity: 0;
    transition: opacity .15s var(--vlr-ease), color .15s var(--vlr-ease), background .15s var(--vlr-ease);
}
.anota:hover .anota-pin,
.anota.is-fixado .anota-pin { opacity: 1; }
.anota-pin:hover { background: rgba(11,26,51,.06); color: var(--vlr-ink); }
.anota.is-fixado .anota-pin { color: var(--vlr-primary); transform: rotate(45deg); }

/* O título reserva espaço para não passar por baixo da alça (esq) e do pin (dir). */
.anota-titulo { padding-left: 1.3rem; padding-right: 1.6rem; }
/* O compositor não tem alça — sem recuo à esquerda. */
.anota-novo-titulo { padding-left: 0; }

.anota-del {
    border: 0; background: transparent;
    color: var(--vlr-muted);
    width: 28px; height: 28px;
    border-radius: var(--vlr-radius-sm);
    cursor: pointer;
    transition: color .15s var(--vlr-ease), background .15s var(--vlr-ease);
}
.anota-del:hover { color: var(--vlr-danger); background: rgba(190,18,60,.08); }

.anota-saved {
    position: absolute;
    bottom: .5rem; right: .6rem;
    font-size: .7rem;
    color: var(--vlr-success);
    opacity: 0;
    transition: opacity .2s var(--vlr-ease);
    pointer-events: none;
}
.anota-saved.show { opacity: 1; }

.anota-vazio {
    flex: 0 0 100%;
    width: 100%;
    text-align: center;
    padding: 3rem 1rem;
}
.anota-vazio i { font-size: 2.2rem; opacity: .35; display: block; margin-bottom: .6rem; }

/* ============================================================
   BPO Valorize — Lançamentos por natureza na lista de importações
   ============================================================ */
.imp-natz { display: inline-flex; gap: 6px; justify-content: center; }
.imp-natz-i {
    display: inline-flex; align-items: center; gap: 4px;
    font-family: var(--vlr-font-mono); font-weight: 600; font-size: .82rem;
    padding: 2px 8px; border-radius: 999px;
}
.imp-natz-i i { font-size: .7rem; }
.imp-natz-ent { color: var(--vlr-success); background: var(--vlr-success-soft); }
.imp-natz-sai { color: var(--vlr-danger);  background: var(--vlr-danger-soft); }
.imp-natz-tra { color: var(--vlr-muted);   background: var(--vlr-bg); }
.imp-natz-i.is-zero { opacity: .35; }
.imp-natz-total { font-size: .68rem; color: var(--vlr-muted-soft); margin-top: 3px; }
.banco-logo { display: inline-flex; flex: 0 0 auto; line-height: 0; }
.banco-logo svg { border-radius: 6px; box-shadow: 0 1px 2px rgba(0,0,0,.18); }

/* Faixa de meses (1–12) do período da importação */
.periodo-strip { display: inline-flex; gap: 2px; }
.periodo-mes {
    width: 17px; height: 18px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: .62rem; font-weight: 700;
    border-radius: 4px;
    color: var(--vlr-muted-soft); background: var(--vlr-bg);
}
.periodo-mes.on { color: #fff; background: var(--vlr-primary); }

/* Barra superior tingida por cliente (cor leve via hash do nome) */
.topbar--cliente { transition: background .25s var(--vlr-ease); border-bottom-width: 1px; }
.topbar-context { display: inline-flex; align-items: center; gap: 8px; }
.topbar-context-dot {
    width: 9px; height: 9px; border-radius: 999px; flex-shrink: 0;
    box-shadow: 0 0 0 3px rgba(255,255,255,.6);
}

/* Administração fixada no rodapé da sidebar (estilo Monday) */
.sidebar-nav { flex: 1 1 auto; }
.sidebar-admin {
    margin-top: auto;
    padding-top: 10px;
    border-top: 1px solid rgba(255,255,255,.08);
}

/* ============================================================
   BPO Valorize — formulário de lançamento (Nova/Editar conta)
   ============================================================ */
.form-secao {
    font-size: .7rem; text-transform: uppercase; letter-spacing: .08em;
    color: var(--vlr-muted); font-weight: 700;
    margin: 1.4rem 0 .35rem; padding-bottom: .4rem;
    border-bottom: 1px solid var(--vlr-border-soft);
}
.conta-tipo .btn { font-weight: 600; padding-top: .55rem; padding-bottom: .55rem; }
.conta-tipo .btn i { opacity: .85; }

/* ============================================================
   BPO Valorize — grid de lançamentos (leitura/edição por linha)
   ============================================================ */
.text-ink { color: var(--vlr-ink) !important; }
table.table-contas tr:not(.is-editing) .grid-edit { display: none; }
table.table-contas tr.is-editing .grid-disp { display: none; }
table.table-contas tr.is-editing > td { background: var(--vlr-primary-soft); vertical-align: top; }
table.table-contas .grid-disp { display: inline-block; }
.cg-editar { color: var(--vlr-muted); }
.cg-editar:hover { color: var(--vlr-primary); }
.cg-parc-edit { display: inline-flex; align-items: center; gap: 6px; justify-content: flex-end; }
.cg-parc-edit input { width: 62px; text-align: center; }
.cg-parc-sep { color: var(--vlr-muted); font-size: .8rem; }

/* Grupo › Subgrupo (leitura): grupo com fundo leve (cor estável por grupo). */
.cg-grupo-chip { display: inline-block; padding: .05rem .4rem; border-radius: 999px; font-weight: 600; line-height: 1.4; }
.cg-sub { color: var(--vlr-muted); margin-left: .1rem; }

/* ============================================================
   BPO Valorize — Análise da IA (chat)
   ============================================================ */
.analise-chat { display: flex; flex-direction: column; overflow: visible; }
.analise-msgs { padding: 1.1rem 1.25rem; display: flex; flex-direction: column; gap: 14px; min-height: 200px; }
.analise-vazio { margin: auto; text-align: center; color: var(--vlr-muted); padding: 2rem 1rem; }
.analise-vazio-ic { font-size: 2rem; color: var(--vlr-primary); opacity: .5; display: block; margin-bottom: .6rem; }

.analise-msg { display: flex; flex-direction: column; max-width: 86%; }
.analise-msg.eu { align-self: flex-end; align-items: flex-end; }
.analise-msg.ia { align-self: flex-start; align-items: flex-start; }
.analise-bolha {
    padding: .7rem .95rem; border-radius: 14px; font-size: .9rem; line-height: 1.5;
    box-shadow: var(--vlr-shadow-xs); word-wrap: break-word;
}
.analise-msg.eu .analise-bolha { background: var(--vlr-primary); color: #fff; border-bottom-right-radius: 4px; }
.analise-msg.ia .analise-bolha { background: var(--vlr-surface-2); color: var(--vlr-ink); border: 1px solid var(--vlr-border); border-bottom-left-radius: 4px; }
.analise-bolha > :first-child { margin-top: 0; }
.analise-bolha > :last-child { margin-bottom: 0; }
.analise-bolha h1, .analise-bolha h2, .analise-bolha h3 { font-size: 1rem; margin: .6rem 0 .35rem; }
.analise-bolha ul, .analise-bolha ol { padding-left: 1.2rem; margin: .35rem 0; }
.analise-bolha table { width: 100%; border-collapse: collapse; margin: .5rem 0; font-size: .85rem; }
.analise-bolha th, .analise-bolha td { border: 1px solid var(--vlr-border); padding: .3rem .5rem; text-align: left; }
.analise-bolha code { background: rgba(11,26,51,.06); padding: 1px 5px; border-radius: 5px; font-size: .85em; }

.analise-meta { display: flex; gap: 12px; align-items: center; margin-top: 4px; font-size: .72rem; color: var(--vlr-muted-soft); }
.analise-copiar { border: 0; background: transparent; color: var(--vlr-muted); font-size: .72rem; cursor: pointer; padding: 0; }
.analise-copiar:hover { color: var(--vlr-primary); }

/* indicador "digitando" */
.analise-pensando { display: inline-flex; gap: 4px; }
.analise-pensando span { width: 7px; height: 7px; border-radius: 999px; background: var(--vlr-muted-soft); animation: anaBlink 1.2s infinite; }
.analise-pensando span:nth-child(2) { animation-delay: .2s; }
.analise-pensando span:nth-child(3) { animation-delay: .4s; }
@keyframes anaBlink { 0%,60%,100% { opacity: .25; } 30% { opacity: 1; } }

.analise-presets { display: flex; flex-wrap: wrap; gap: 7px; padding: .6rem 1rem .2rem; }
.analise-chip {
    border: 1px solid var(--vlr-border); background: var(--vlr-surface); color: var(--vlr-ink);
    border-radius: 999px; padding: 5px 12px; font-size: .78rem; cursor: pointer;
    transition: all .12s var(--vlr-ease);
}
.analise-chip:hover { background: var(--vlr-primary-soft); border-color: var(--vlr-primary); color: var(--vlr-primary); }

.analise-composer { position: sticky; bottom: 0; z-index: 6; background: var(--vlr-surface); border-top: 1px solid var(--vlr-border); border-bottom-left-radius: var(--vlr-radius); border-bottom-right-radius: var(--vlr-radius); box-shadow: 0 -6px 16px rgba(11,26,51,.05); }
.analise-input { display: flex; gap: 8px; padding: .75rem 1rem; align-items: flex-end; }
.analise-input textarea { resize: none; max-height: 160px; }
.analise-input .btn { flex-shrink: 0; }

/* Análise da IA — ocupa a largura inteira (sem fundo cinza nas laterais) */
.content-area--chat { max-width: none; padding-left: 0; padding-right: 0; }
.content-area--chat .analise-topo { padding: 0 1.75rem; }
.content-area--chat .analise-chat {
    border-left: 0; border-right: 0; border-radius: 0;
    box-shadow: none; margin-bottom: 0;
}
.content-area--chat .analise-composer {
    border-bottom-left-radius: 0; border-bottom-right-radius: 0;
}

/* ============================================================
   Análise da IA — layout 2 colunas (chat + painel) e tipografia
   (sobrescreve os estilos full-bleed anteriores)
   ============================================================ */
.analise-layout { display: flex; gap: 1.5rem; max-width: 1160px; margin: 0 auto; align-items: flex-start; }
.analise-main { flex: 1 1 auto; min-width: 0; max-width: 800px; }
.analise-aside { flex: 0 0 288px; position: sticky; top: 76px; }
.analise-aside-card { padding: 0; overflow: hidden; }
.analise-aside-titulo {
    padding: .85rem 1rem; font-weight: 600; font-size: .82rem; color: var(--vlr-ink);
    border-bottom: 1px solid var(--vlr-border); background: var(--vlr-surface-2);
}
.analise-presets { display: flex; flex-direction: column; gap: 6px; padding: .55rem; }
.analise-chip {
    display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%;
    text-align: left; border: 1px solid var(--vlr-border); background: var(--vlr-surface);
    border-radius: 10px; padding: 10px 12px; font-size: .83rem; line-height: 1.35;
    color: var(--vlr-ink); cursor: pointer; transition: all .12s var(--vlr-ease);
}
.analise-chip i { color: var(--vlr-muted-soft); font-size: .78rem; flex-shrink: 0; }
.analise-chip:hover { border-color: var(--vlr-primary); background: var(--vlr-primary-soft); color: var(--vlr-primary); }
.analise-chip:hover i { color: var(--vlr-primary); }

/* Card do chat: rolagem da página; input fixo no rodapé da coluna. */
.analise-chat { display: flex; flex-direction: column; overflow: visible; }
.analise-input {
    position: sticky; bottom: 0; z-index: 6;
    display: flex; gap: 8px; padding: .75rem 1rem; align-items: flex-end;
    background: var(--vlr-surface); border-top: 1px solid var(--vlr-border);
    border-bottom-left-radius: var(--vlr-radius); border-bottom-right-radius: var(--vlr-radius);
    box-shadow: 0 -6px 16px rgba(11,26,51,.04);
}

/* Mensagens: IA pode usar a largura toda da coluna. */
.analise-msg.ia { max-width: 100%; }
.analise-msg.eu { max-width: 80%; }
.analise-msg.ia .analise-bolha {
    background: #fff; border: 1px solid var(--vlr-border); color: var(--vlr-ink);
}

/* Tipografia do conteúdo (markdown) — mais legível. */
.analise-bolha { font-size: .9rem; line-height: 1.62; }
.analise-bolha > :first-child { margin-top: 0 !important; }
.analise-bolha > :last-child { margin-bottom: 0 !important; }
.analise-bolha h1, .analise-bolha h2, .analise-bolha h3, .analise-bolha h4 {
    font-size: .98rem; font-weight: 700; letter-spacing: -.01em; color: var(--vlr-ink);
    margin: .95rem 0 .4rem;
}
.analise-bolha p { margin: .5rem 0; }
.analise-bolha ul, .analise-bolha ol { margin: .4rem 0; padding-left: 1.25rem; }
.analise-bolha li { margin: .22rem 0; }
.analise-bolha li::marker { color: var(--vlr-muted-soft); }
.analise-bolha strong { font-weight: 600; color: var(--vlr-ink); }
.analise-bolha hr { margin: .85rem 0; border: 0; border-top: 1px solid var(--vlr-border); }
.analise-bolha code { background: rgba(11,26,51,.05); padding: 1px 6px; border-radius: 5px; font-size: .85em; }

@media (max-width: 991.98px) {
    .analise-layout { flex-direction: column; }
    .analise-aside { position: static; flex-basis: auto; width: 100%; }
    .analise-main { max-width: none; }
}

/* ===== Drill-down do dashboard (Grupo → Subgrupo → Fonte) ===== */
.drill-table .drill-row { cursor: pointer; transition: background-color .12s ease; }
.drill-table .drill-row:hover { background: var(--vlr-primary-soft, rgba(30,91,190,.06)); }
.drill-table .drill-row.is-active { background: var(--vlr-primary-soft, rgba(30,91,190,.10)); font-weight: 600; }
.drill-table .drill-caret { width: 1.2rem; text-align: center; opacity: .35; }
.drill-table .drill-row.is-active .drill-caret { opacity: .9; }

/* Grupos clicáveis: seleção única — o ativo fica destacado. */
.drill-table .drill-grupo-row { cursor: pointer; transition: background-color .12s ease; }
.drill-table .drill-grupo-row:hover { background: var(--vlr-primary-soft, rgba(30,91,190,.06)); }
.drill-table .drill-grupo-row.is-active { background: var(--vlr-primary-soft, rgba(30,91,190,.10)); font-weight: 600; }

/* Colunas roláveis com altura FIXA (~1 página): evita a tela "dançar" ao
   trocar a seleção — os quadros não crescem/encolhem com o conteúdo. */
.drill-scroll { height: 72vh; min-height: 384px; overflow-y: auto; }
.drill-scroll .drill-table thead th { position: sticky; top: 0; background: #fff; z-index: 1; }

/* Lançamentos do subgrupo: descrição em 1 linha (com reticências), valor sem quebra. */
.drill-contas { table-layout: fixed; width: 100%; }
.drill-contas .drill-conta-val { width: 7rem; white-space: nowrap; }
.drill-contas .drill-conta-desc { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ====================================================================
   Agenda de Pagamentos — quadro de 3 colunas (substitui a planilha).
   ==================================================================== */
.agenda-board {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    align-items: start;
}
@media (max-width: 992px) { .agenda-board { grid-template-columns: 1fr; } }

.agenda-col { margin-bottom: 0; }
.agenda-col-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-weight: 600;
    padding: 0.5rem 0.75rem;
}
.agenda-col-total { font-family: var(--vlr-font-mono); font-weight: 700; }
/* Ícones SVG inline do quadro (ver board.php): altura 1em, largura pela razão
   do viewBox (como o Font Awesome), cor herdada via fill=currentColor. */
.ag-ico { height: 1em; width: auto; vertical-align: -0.125em; flex: 0 0 auto; }
.agenda-col--pago      .agenda-col-head { color: var(--vlr-success); }
.agenda-col--aprovacao .agenda-col-head { color: var(--vlr-warning); }
.agenda-col--futuro    .agenda-col-head { color: var(--vlr-primary); }
.agenda-col > .card-body { padding: 0.6rem; }
.agenda-col-body { display: flex; flex-direction: column; gap: 0.35rem; max-height: 68vh; overflow-y: auto; }
/* Ao exportar imagem: solta a rolagem para o print pegar todos os itens. */
.agenda-board.is-exporting .agenda-col-body { max-height: none; overflow: visible; }
/* A serialização em SVG (html-to-image) recalcula larguras dos flex com
   min-width:0 e acaba truncando nomes ("l…") e quebrando os cabeçalhos em duas
   linhas. Na imagem queremos tudo inteiro: desliga o corte/ellipsis. */
.agenda-board.is-exporting .agenda-col-head > span { white-space: nowrap; }
.agenda-board.is-exporting .agenda-item-desc { overflow: visible; }
.agenda-board.is-exporting .agenda-item-nome {
    overflow: visible;
    text-overflow: clip;
    max-width: none;
    white-space: nowrap;
}

.agenda-chart-wrap { height: 180px; margin-bottom: 0.75rem; }

.agenda-week { margin-bottom: 0.35rem; }
.agenda-week-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--vlr-muted);
    border-bottom: 1px solid var(--vlr-border);
    padding: 0.35rem 0;
    margin-bottom: 0.4rem;
}
.agenda-week-head .num { font-family: var(--vlr-font-mono); }
.agenda-week-foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--vlr-muted);
    border-top: 1px solid var(--vlr-border);
    padding: 0.25rem 0;
    margin-top: 0.25rem;
}
.agenda-week-foot .num { font-family: var(--vlr-font-mono); }

.agenda-item {
    border: 1px solid var(--vlr-border);
    border-radius: var(--vlr-radius-sm);
    padding: 0.3rem 0.55rem;
    background: var(--vlr-surface);
    font-size: 0.85rem;
}
.agenda-item.is-sem-valor { border-color: var(--vlr-warning); background: var(--vlr-warning-soft); }

/* Item pendente VENCIDO: vermelho fraco (atraso real) ou amarelo (venceu no
   fim de semana que acabou de passar — paga-se no próximo dia útil). */
.agenda-item.is-vencido { border-color: var(--vlr-danger); background: var(--vlr-danger-soft); }
.agenda-item.is-vencido-fds { border-color: var(--vlr-warning); background: var(--vlr-warning-soft); }
.agenda-venc-badge {
    flex: 0 0 auto;
    align-self: center;
    padding: 0.02rem 0.34rem;
    border-radius: 999px;
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    line-height: 1.3;
    white-space: nowrap;
}
.agenda-item.is-vencido .agenda-venc-badge { background: var(--vlr-danger); color: #fff; }
.agenda-item.is-vencido-fds .agenda-venc-badge { background: var(--vlr-warning); color: #fff; }

/* Linha única: data — descrição — valor. */
.agenda-item-row { display: flex; align-items: center; gap: 0.5rem; }
.agenda-item-venc { font-size: 0.72rem; font-weight: 600; color: var(--vlr-muted); flex: 0 0 auto; white-space: nowrap; }
.agenda-item-desc { display: flex; align-items: center; gap: 0.35rem; min-width: 0; flex: 1 1 auto; overflow: hidden; }
.agenda-item-nome { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.agenda-item-grupo { font-size: 0.7rem; color: var(--vlr-muted); white-space: nowrap; flex: 0 0 auto; }
.agenda-item-valor { white-space: nowrap; flex: 0 0 auto; margin-left: auto; }
/* Valor em monospace no mesmo tamanho da descrição e sem negrito forte: a
   mono renderiza mais larga/pesada que a sans, então iguala-se o peso visual
   para o número não "dominar" o card. */
.agenda-item-valor .num { font-family: var(--vlr-font-mono); font-size: 0.85em; font-weight: 500; }
.agenda-valor-grp { width: 8.5rem; }
.agenda-valor { font-family: var(--vlr-font-mono); text-align: right; }

/* Sinal de "pré-aprovado": apenas um check amarelo. */
.agenda-check-preaprovado { color: var(--vlr-warning); flex: 0 0 auto; margin-right: .35rem; }

/* Data: texto por padrão; campo de edição só no modo de edição (botão de lápis). */
.agenda-item .agenda-data { display: none; width: auto; max-width: 8.5rem; padding: 0.05rem 0.3rem; font-size: 0.72rem; }
.agenda-item.is-editing .agenda-venc-txt { display: none; }
.agenda-item.is-editing .agenda-data { display: inline-block; }
.agenda-item.is-editing .agenda-editar { color: var(--vlr-primary); }

.agenda-badge-preaprovado {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--vlr-success);
    background: var(--vlr-success-soft);
    border-radius: 999px;
    padding: 0.1rem 0.5rem;
    width: fit-content;
}

.agenda-status-btns {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
    margin-top: 0.5rem;
}
.agenda-status-btns .btn { --bs-btn-padding-y: 0.15rem; --bs-btn-padding-x: 0.5rem; font-size: 0.75rem; }

/* Edição aparece só ao passar o mouse (ou focar) — visual limpo por padrão. */
.agenda-item .agenda-status-btns {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    margin-top: 0;
    transition: opacity .12s ease, max-height .12s ease, margin-top .12s ease;
}
.agenda-item:hover .agenda-status-btns,
.agenda-item:focus-within .agenda-status-btns,
.agenda-item.is-editing .agenda-status-btns {
    max-height: 4rem;
    opacity: 1;
    margin-top: 0.5rem;
}
/* Valor: texto por padrão (sem corte); campo de edição só no modo de edição. */
.agenda-item .agenda-valor-grp { display: none; }
.agenda-item.is-editing .agenda-valor-txt { display: none; }
.agenda-item.is-editing .agenda-valor-grp { display: flex; }

/* ====================================================================
   Coluna do meio: card "Em aprovação" em cima + projeção logo abaixo, FORA
   do card. Dois blocos (corrente e investimento). Corrente/investido são
   editáveis — parecem texto e viram campo ao passar o mouse. Todas as linhas
   têm o mesmo layout [rótulo] · [R$] [número] em coluna de largura fixa, então
   "R$" e os números alinham entre si (editáveis ou calculados).
   ==================================================================== */
.agenda-col-mid { display: flex; flex-direction: column; }

/* Destaque leve: o resumo é um "cálculo da conta do cliente", não parte do
   card de aprovação. Fundo suave + borda + faixa lateral primária o separam
   visualmente sem competir com os três quadros. */
.agenda-saldos {
    margin-top: 1rem;
    padding: 0.7rem 0.85rem;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    background: var(--vlr-bg-soft);
    border: 1px solid var(--vlr-border);
    border-left: 3px solid var(--vlr-primary);
    border-radius: var(--vlr-radius);
}
.agenda-saldos-titulo {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--vlr-primary);
    border-bottom: 1px solid var(--vlr-border-soft);
    padding-bottom: 0.5rem;
}
.agenda-saldos-titulo .ag-ico { font-size: 0.85em; }
.agenda-saldos-bloco { display: flex; flex-direction: column; gap: 0.1rem; }
.agenda-saldo-linha {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    font-size: 0.85rem;
    line-height: 1.9;
}
.agenda-saldo-rot { color: var(--vlr-muted); }
.agenda-saldo-total {
    border-top: 1px solid var(--vlr-border);
    margin-top: 0.15rem;
    padding-top: 0.15rem;
}

/* Coluna de valor: largura fixa → R$ (à esquerda) e número (à direita)
   coincidem em todas as linhas. A moldura de 1px é sempre reservada
   (transparente) p/ não haver "pulo" ao passar o mouse. */
.agenda-saldo-val {
    display: inline-flex;
    align-items: baseline;
    gap: 0.4rem;
    width: 10rem;
    box-sizing: border-box;
    border: 1px solid transparent;
    border-radius: var(--vlr-radius-sm);
    padding: 0.05rem 0.4rem;
}
.agenda-saldo-cur { color: var(--vlr-muted); font-family: var(--vlr-font-mono); }
.agenda-saldo-num {
    flex: 1 1 auto;
    min-width: 0;
    text-align: right;
    font-family: var(--vlr-font-mono);
    font-weight: 600;
    color: inherit;
}
/* Input editável idêntico ao texto; só a moldura aparece no hover/foco. */
input.agenda-saldo-num { border: none; background: transparent; padding: 0; }
input.agenda-saldo-num:focus { outline: none; }
input.agenda-saldo-num::placeholder { color: var(--vlr-muted); font-weight: 400; }
.agenda-saldo-edit { cursor: text; transition: border-color .12s ease, background-color .12s ease; }
.agenda-saldo-edit:hover,
.agenda-saldo-edit:focus-within {
    border-color: var(--vlr-border);
    background: var(--vlr-surface);
}

/* ====================================================================
   Despesas recorrentes — grade editável estilo Monday (autosave inline).
   ==================================================================== */
.rec-grid td, .rec-grid th { vertical-align: middle; }
.rec-grid td { padding: .35rem .5rem; }
/* Campos "limpos" (sem moldura) até passar o mouse ou focar — sensação de planilha. */
.rec-grid .form-control, .rec-grid .form-select { border-color: transparent; background: transparent; box-shadow: none; }
.rec-grid tr:hover .form-control, .rec-grid tr:hover .form-select { border-color: var(--vlr-border); }
.rec-grid .form-control:focus, .rec-grid .form-select:focus { border-color: var(--vlr-primary); background: #fff; box-shadow: 0 0 0 2px var(--vlr-primary-soft); }
.rec-grid .input-group-text { background: transparent; border-color: transparent; padding-inline: .3rem; color: var(--vlr-muted); }
.rec-check-cell { width: 1.05rem; height: 1.05rem; margin: 0; cursor: pointer; vertical-align: middle; }
.rec-inativa { opacity: .5; }
/* Linha de inserção destacada. */
.rec-add-row td { border-top: 2px solid var(--vlr-primary); background: var(--vlr-primary-soft); }
.rec-add-row .form-control, .rec-add-row .form-select { background: #fff; border-color: var(--vlr-border); }

/* Painel "Lançamentos por mês" (revisão de extrato): seleção de quais meses
   manter, para um mês-calendário não ficar repartido entre duas importações. */
.stmt-meses { padding: 1rem 1.15rem; }
.stmt-meses-head { margin-bottom: .85rem; }
.stmt-meses-titulo { font-size: 1.02rem; font-weight: 700; margin-bottom: .15rem; }
.stmt-meses-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: .6rem;
}
.stmt-mes {
    display: flex; flex-direction: column; gap: .4rem;
    position: relative;
    border: 1.5px solid var(--vlr-border);
    border-radius: .6rem;
    padding: .6rem .7rem .6rem 2rem;
    cursor: pointer;
    background: #fff;
    transition: border-color .12s, background .12s, opacity .12s;
}
.stmt-mes [data-mes-chk] {
    position: absolute; top: .65rem; left: .65rem;
    width: 1.05rem; height: 1.05rem; margin: 0; cursor: pointer;
}
.stmt-mes-top { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; }
.stmt-mes-nome { font-weight: 700; }
.stmt-mes-qtd { font-size: .8rem; color: var(--vlr-muted); white-space: nowrap; }
.stmt-mes-flag .badge { font-weight: 600; }
.stmt-mes.is-on  { border-color: var(--vlr-primary); background: var(--vlr-primary-soft); }
.stmt-mes.is-off { opacity: .6; background: var(--vlr-bg, #f6f7f9); }
.stmt-mes.is-off .stmt-mes-nome { text-decoration: line-through; }
.stmt-meses-foot {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    margin-top: .9rem; flex-wrap: wrap;
}

/* Filtros da lista de lançamentos (contas/index): grid responsiva, realce do
   que está filtrando e resumo de caixa numa faixa limpa acima da tabela. */
.filtros-head {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: .65rem;
}
.filtros-titulo { font-weight: 700; font-size: .9rem; color: var(--vlr-muted); }
.filtros-limpar { font-size: .85rem; text-decoration: none; }
.filtros-limpar:hover { text-decoration: underline; }
.filtros-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: .55rem .75rem;
}
.filtro-campo { min-width: 0; }
.filtro-campo .form-label { font-weight: 600; color: var(--vlr-muted); }
/* Grade de busca: botão Buscar alinhado à base da linha, ao lado dos campos. */
.filtros-grid--busca { align-items: end; }
.filtro-campo--acao { display: flex; align-items: flex-end; }
.filtro-sub { font-size: .75rem; margin-top: .15rem; line-height: 1.2; }
.filtro-sub a { text-decoration: none; }
.filtro-sub a:hover { text-decoration: underline; }
.filtros-bar .filtro-on {
    border-color: var(--vlr-primary) !important;
    background: var(--vlr-primary-soft);
    font-weight: 600;
}
.contas-resumo {
    display: flex; align-items: center; justify-content: space-between;
    gap: 1rem; flex-wrap: wrap; margin-bottom: .75rem; padding-inline: .15rem;
}
.contas-resumo-count { font-weight: 600; color: var(--vlr-muted); }
.contas-resumo-tot { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }

/* ====================================================================
   Início (home) — grade de cards por cliente, cada um no estilo da coluna
   "Em aprovação" da agenda (cabeçalho com nome + total, lista de
   lançamentos a vencer dentro). O card inteiro abre a agenda do cliente.
   ==================================================================== */
.home-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
    gap: 1rem;
    align-items: start;
}
.home-card-wrap {
    display: block;
    color: inherit;
    text-decoration: none;
}
.home-card-wrap:hover { color: inherit; }
/* Header sem fundo próprio: em DPI/zoom fracionário o fundo do header
   arredonda para o pixel físico e "sangra" sobre a borda de 1px do card,
   apagando o contorno superior no hover (confirmado no teste A×F).
   O card branco por baixo torna a mudança imperceptível. */
.home-card-wrap .card-header { background: transparent; }
.home-card-wrap > .agenda-col {
    height: 100%;
    /* `top` em vez de `transform: translateY`: transform rasteriza o card numa
       camada composta e, em zoom/DPI fracionário, a borda horizontal de 1px do
       topo se dilui na reamostragem (contorno "falha" no hover). `top` repinta
       no fluxo normal, com a borda encaixada em pixels inteiros. */
    position: relative;
    top: 0;
    transition: top .15s var(--vlr-ease), box-shadow .15s var(--vlr-ease), border-color .15s var(--vlr-ease);
}
.home-card-wrap:hover > .agenda-col {
    top: -2px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
    border-color: var(--vlr-warning);
}
/* Clientes sem nada a vencer: cartão neutro e esmaecido. */
.home-card-wrap > .agenda-col.home-card--ok { opacity: 0.78; }
.home-card--ok .agenda-col-head { color: var(--vlr-muted) !important; }
.home-card-wrap:hover > .agenda-col.home-card--ok { border-color: var(--vlr-border); }

.home-card-cliente {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.home-card-caption {
    font-size: 0.68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--vlr-muted);
    margin-bottom: 0.6rem;
}
.home-card-foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.78rem;
    color: var(--vlr-muted);
    border-top: 1px solid var(--vlr-border);
    margin-top: 0.6rem;
    padding-top: 0.5rem;
}
.home-card-link { color: var(--vlr-primary); font-weight: 600; white-space: nowrap; }

/* ============================================================
   Plano de Ação — cabeçalho editável + checklist + progresso
   ============================================================ */

/* Barra de progresso (reutilizada no dashboard e na visão geral) */
.pa-progresso { display: flex; align-items: center; gap: 0.6rem; }
.pa-progresso-bar {
    flex: 1 1 auto;
    height: 8px;
    background: var(--vlr-border);
    border-radius: 999px;
    overflow: hidden;
}
.pa-progresso-fill {
    display: block;
    height: 100%;
    background: var(--vlr-primary);
    border-radius: 999px;
    transition: width .3s var(--vlr-ease);
}
.pa-progresso-txt { font-size: 0.82rem; color: var(--vlr-muted); white-space: nowrap; }

/* Cabeçalho do plano */
.pa-plano .card-body { display: flex; flex-direction: column; gap: 0.5rem; }
.pa-plano-head { display: flex; align-items: flex-start; gap: 0.75rem; }
.pa-titulo {
    flex: 1 1 auto;
    border: none;
    background: transparent;
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--vlr-ink);
    padding: 0.15rem 0.25rem;
    border-radius: var(--vlr-radius-sm);
}
.pa-titulo:focus { outline: none; background: var(--vlr-surface-2); }
.pa-plano-acoes { display: flex; gap: 0.35rem; flex-shrink: 0; }
.pa-label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--vlr-muted); margin-top: 0.4rem; }
.pa-objetivo {
    width: 100%;
    border: 1px solid var(--vlr-border);
    background: var(--vlr-surface-2);
    border-radius: var(--vlr-radius-sm);
    padding: 0.5rem 0.65rem;
    font-size: 0.95rem;
    color: var(--vlr-ink);
    resize: none;
    overflow: hidden;
}
.pa-objetivo:focus { outline: none; border-color: var(--vlr-primary); background: var(--vlr-surface); }
.pa-prazos { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 1rem; margin-top: 0.5rem; }
.pa-prazo { display: flex; flex-direction: column; gap: 0.15rem; font-size: 0.75rem; color: var(--vlr-muted); }
.pa-prazo span { text-transform: uppercase; letter-spacing: .04em; }
.pa-data {
    border: 1px solid var(--vlr-border);
    border-radius: var(--vlr-radius-sm);
    padding: 0.3rem 0.5rem;
    font-size: 0.9rem;
    color: var(--vlr-ink);
}
.pa-data:focus { outline: none; border-color: var(--vlr-primary); }
.pa-atraso {
    color: var(--vlr-danger);
    background: var(--vlr-danger-soft);
    border-radius: 999px;
    padding: 0.2rem 0.6rem;
    font-size: 0.78rem;
    font-weight: 600;
}

/* Checklist */
.pa-lista { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.35rem; }
.pa-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--vlr-surface);
    border: 1px solid var(--vlr-border);
    border-radius: var(--vlr-radius-sm);
    padding: 0.4rem 0.6rem;
    box-shadow: var(--vlr-shadow-xs);
}
.pa-item.is-dragging { opacity: .5; }
.pa-item.is-feito .pa-desc { text-decoration: line-through; color: var(--vlr-muted); }
.pa-handle { border: none; background: transparent; color: var(--vlr-muted-soft); cursor: grab; padding: 0.2rem; }
.pa-handle:active { cursor: grabbing; }
.pa-check { border: none; background: transparent; color: var(--vlr-muted); font-size: 1.15rem; padding: 0.1rem 0.2rem; cursor: pointer; }
.pa-item.is-feito .pa-check { color: var(--vlr-success); }
.pa-desc {
    flex: 1 1 auto;
    border: none;
    background: transparent;
    font-size: 0.95rem;
    color: var(--vlr-ink);
    padding: 0.2rem 0.25rem;
    border-radius: var(--vlr-radius-sm);
}
.pa-desc:focus { outline: none; background: var(--vlr-surface-2); }
.pa-del { border: none; background: transparent; color: var(--vlr-muted-soft); padding: 0.2rem; cursor: pointer; }
.pa-del:hover { color: var(--vlr-danger); }
.pa-vazio { text-align: center; padding: 1.5rem; }
.pa-vazio i { font-size: 1.5rem; display: block; margin-bottom: 0.4rem; opacity: .5; }
.pa-novo-item { display: flex; gap: 0.5rem; margin-top: 0.75rem; }
.pa-novo-item input { flex: 1 1 auto; }

/* Histórico */
.pa-historico summary { cursor: pointer; font-weight: 600; color: var(--vlr-ink-soft); }
.pa-historico-lista { margin-top: 0.75rem; display: flex; flex-direction: column; gap: 0.4rem; }
.pa-hist-item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.4rem 0.6rem;
    border: 1px solid var(--vlr-border);
    border-radius: var(--vlr-radius-sm);
    background: var(--vlr-surface);
}
.pa-hist-titulo { flex: 1 1 auto; }
.pa-hist-data { font-size: 0.8rem; white-space: nowrap; }
.pa-hist-status { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; padding: 0.15rem 0.5rem; border-radius: 999px; }
.pa-hist-status--concluido { color: var(--vlr-success); background: var(--vlr-success-soft); }
.pa-hist-status--arquivado { color: var(--vlr-muted); background: var(--vlr-surface-2); }

/* Card do plano no Dashboard */
.pa-dash-card { transition: box-shadow .15s var(--vlr-ease); }
.pa-dash-card:hover { box-shadow: var(--vlr-shadow-md); }
.pa-dash-card--atraso { border-left: 3px solid var(--vlr-danger); }

/* Visão geral entre clientes */
.pa-geral-card { height: 100%; position: relative; top: 0; transition: box-shadow .15s var(--vlr-ease), top .15s var(--vlr-ease); }
.home-card-wrap:hover .pa-geral-card { box-shadow: var(--vlr-shadow-md); top: -2px; }
.pa-geral-card--atraso { border-top: 3px solid var(--vlr-danger); }
.pa-geral-card--sem { opacity: .8; }
.pa-geral-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.pa-geral-cliente { font-weight: 700; color: var(--vlr-ink); }
.pa-geral-pct { font-weight: 700; color: var(--vlr-primary); }
.pa-geral-titulo { font-weight: 600; margin-bottom: 0.5rem; color: var(--vlr-ink-soft); }
.pa-geral-meta { display: flex; justify-content: space-between; gap: 0.5rem; font-size: 0.8rem; flex-wrap: wrap; }

/* Card de criação (estado vazio / novo plano) */
.pa-novo-card { max-width: 640px; }

/* Lista de planos (página inicial do módulo) */
.pa-planos { display: flex; flex-direction: column; gap: 0.6rem; }
.pa-plano-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.85rem 1rem;
    background: var(--vlr-surface);
    border: 1px solid var(--vlr-border);
    border-radius: var(--vlr-radius);
    box-shadow: var(--vlr-shadow-xs);
    text-decoration: none;
    color: inherit;
    transition: box-shadow .15s var(--vlr-ease), transform .15s var(--vlr-ease);
}
.pa-plano-row:hover { box-shadow: var(--vlr-shadow-md); transform: translateY(-1px); color: inherit; }
.pa-plano-row-main { flex: 1 1 auto; min-width: 0; }
.pa-plano-row-titulo { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.pa-plano-row-nome { font-weight: 700; color: var(--vlr-ink); }
.pa-plano-row-datas { font-size: 0.82rem; margin-top: 0.2rem; }
.pa-plano-row-prog { flex: 0 0 210px; max-width: 210px; }
.pa-plano-row-seta { color: var(--vlr-muted-soft); }
@media (max-width: 640px) {
    .pa-plano-row-prog { flex-basis: 120px; }
    .pa-plano-row-seta { display: none; }
}

/* Badges de status */
.pa-badge {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
    padding: 0.12rem 0.5rem;
    border-radius: 999px;
    white-space: nowrap;
}
.pa-badge--ativo { color: var(--vlr-primary); background: var(--vlr-primary-soft); }
.pa-badge--concluido { color: var(--vlr-success); background: var(--vlr-success-soft); }
.pa-badge--arquivado { color: var(--vlr-muted); background: var(--vlr-surface-2); }
.pa-badge--atraso { color: var(--vlr-danger); background: var(--vlr-danger-soft); }

/* Data limite por item (board) */
.pa-item-data {
    flex: 0 0 auto;
    width: 8.5rem;
    border: 1px solid var(--vlr-border);
    border-radius: var(--vlr-radius-sm);
    padding: 0.25rem 0.4rem;
    font-size: 0.82rem;
    color: var(--vlr-muted);
}
.pa-item-data:focus { outline: none; border-color: var(--vlr-primary); }
.pa-item-data.is-atrasado { color: var(--vlr-danger); border-color: var(--vlr-danger); background: var(--vlr-danger-soft); }
.pa-novo-item-data { flex: 0 0 auto; width: 9rem; }
@media (max-width: 640px) {
    .pa-item { flex-wrap: wrap; }
    .pa-item-data { width: 100%; }
}

/* Construtor de checklist na tela de criação */
.pa-nb-lista { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.4rem; }
.pa-nb-item { display: flex; align-items: center; gap: 0.5rem; }
.pa-nb-bullet { color: var(--vlr-muted-soft); }
.pa-nb-item input[name="itens[]"] { flex: 1 1 auto; }
.pa-nb-data { flex: 0 0 auto; width: 9rem; }
.pa-nb-vazio { text-align: center; padding: 1rem; }
.pa-nb-vazio i { font-size: 1.4rem; display: block; margin-bottom: 0.35rem; opacity: .5; }

/* ====================================================================
   Tarefas — quadro Kanban + página de detalhe
   ==================================================================== */

/* Cores de prioridade (dot, borda-lateral do card, chips): Normal, Alta, Urgente. */
.prio-normal  { --prio: var(--vlr-primary); }
.prio-alta    { --prio: var(--vlr-pend); }
.prio-urgente { --prio: var(--vlr-danger); }

/* Cores de status (chips do detalhe), iguais às colunas do Kanban. */
.st-aberta       { --prio: var(--vlr-primary); }
.st-em_andamento { --prio: var(--vlr-pend); }
.st-concluida    { --prio: var(--vlr-success); }

/* Prioridade por 1 clique (chips) no compositor */
.prio-picker { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.prio-chip {
    border: 1.5px solid var(--prio); color: var(--prio); background: transparent;
    border-radius: 999px; padding: 0.28rem 0.9rem;
    font-size: 0.82rem; font-weight: 600; cursor: pointer; line-height: 1.2;
    transition: background .12s var(--vlr-ease), color .12s var(--vlr-ease), box-shadow .12s var(--vlr-ease);
}
.prio-chip:hover { background: color-mix(in srgb, var(--prio) 12%, transparent); }
.prio-chip.is-sel { background: var(--prio); color: #fff; box-shadow: 0 2px 6px color-mix(in srgb, var(--prio) 40%, transparent); }

.tarefas-head h1 { font-size: 1.5rem; }

/* Toast efêmero (ex.: "Tarefa criada") */
.vlr-toast {
    position: fixed; left: 50%; bottom: 28px; transform: translate(-50%, 12px);
    background: var(--vlr-ink); color: #fff;
    padding: 0.7rem 1.2rem; border-radius: 999px; font-weight: 600; font-size: 0.9rem;
    box-shadow: var(--vlr-shadow-md); z-index: 1080;
    opacity: 0; pointer-events: none; transition: opacity .25s var(--vlr-ease), transform .25s var(--vlr-ease);
}
.vlr-toast.is-on { opacity: 1; transform: translate(-50%, 0); }
.vlr-toast i { color: #4ADE80; }

/* ---- Compositor de nova tarefa ---- */
.tarefa-novo {
    background: var(--vlr-surface);
    border: 1px solid var(--vlr-border);
    border-radius: var(--vlr-radius);
    box-shadow: var(--vlr-shadow-sm);
    padding: 1rem;
    margin-bottom: 1rem;
}
.tarefa-novo-grid { display: flex; flex-direction: column; gap: 0.6rem; }
.tarefa-novo-assunto { font-weight: 600; }
.tarefa-novo-desc { min-height: 8.5rem; resize: vertical; }
/* Campos secundários mais estreitos (não esticam por toda a largura). */
.tarefa-novo-campos {
    display: flex; flex-wrap: wrap; gap: 0.6rem 0.9rem;
}
.tarefa-novo-campos label { flex: 0 1 190px; }
.tarefa-novo-campos label,
.tarefa-prop {
    display: flex; flex-direction: column; gap: 0.2rem;
    font-size: 0.78rem; color: var(--vlr-muted); font-weight: 600;
}
.tarefa-novo-acoes { display: flex; align-items: center; gap: 0.5rem; }

/* ---- Filtros ---- */
.tarefas-filtros {
    display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1rem;
}
.tarefas-busca { width: auto; min-width: 220px; flex: 1 1 220px; max-width: 340px; }
.tarefas-filtros .form-select { width: auto; min-width: 150px; }

/* ---- Quadro ---- */
.kanban {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    align-items: start;
}
@media (max-width: 900px) { .kanban { grid-template-columns: 1fr; } }

.kanban-col {
    background: var(--vlr-bg-soft);
    border: 1px solid var(--vlr-border);
    border-radius: var(--vlr-radius);
    padding: 0.6rem;
    min-height: 120px;
}
.kanban-col-head {
    display: flex; align-items: center; gap: 0.5rem;
    font-weight: 700; font-size: 0.9rem; color: var(--vlr-ink);
    padding: 0.25rem 0.4rem 0.6rem;
    border-bottom: 2px solid var(--vlr-border);
    margin-bottom: 0.6rem;
}
.kanban-col-head i { opacity: .7; }
.kanban-aberta       i { color: var(--vlr-primary); }
.kanban-em_andamento i { color: var(--vlr-pend); }
.kanban-concluida    i { color: var(--vlr-success); }
.kanban-count {
    margin-left: auto;
    background: var(--vlr-border);
    color: var(--vlr-ink-soft);
    border-radius: 999px;
    padding: 0 0.5rem; font-size: 0.78rem; font-weight: 700;
}
.kanban-drop { display: flex; flex-direction: column; gap: 0.6rem; min-height: 60px; }

/* ---- Card ---- */
.tarefa-card {
    background: var(--vlr-surface);
    border: 1px solid var(--vlr-border);
    border-left: 3px solid var(--prio, var(--vlr-border));
    border-radius: var(--vlr-radius-sm);
    box-shadow: var(--vlr-shadow-xs);
    transition: box-shadow .15s var(--vlr-ease), transform .15s var(--vlr-ease);
    cursor: grab;
}
.tarefa-card:hover { box-shadow: var(--vlr-shadow-sm); transform: translateY(-1px); }
.tarefa-card.is-dragging { opacity: .5; }
.tarefa-card-link { display: block; padding: 0.7rem 0.8rem; color: inherit; text-decoration: none; }

/* Cabeçalho: ticket + cliente (esq.) + prioridade (dir.) */
.tarefa-card-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.4rem; }
.tarefa-head-left { display: inline-flex; align-items: center; gap: 0.4rem; min-width: 0; }
.tarefa-ticket {
    flex: 0 0 auto;
    font-size: 0.72rem; font-weight: 700; color: var(--vlr-muted);
    font-variant-numeric: tabular-nums; letter-spacing: .01em;
}
/* Cliente no topo, ao lado do ticket */
.tarefa-cliente-top {
    display: inline-flex; align-items: center; gap: 0.3rem; min-width: 0;
    font-size: 0.74rem; font-weight: 600; color: var(--vlr-primary);
}
.tarefa-cliente-top i { flex: 0 0 auto; font-size: 0.64rem; opacity: .8; }
.tarefa-cliente-top::before { content: "·"; color: var(--vlr-muted-soft); font-weight: 400; }
.tarefa-cliente-nome { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.prio-tag {
    flex: 0 0 auto;
    display: inline-flex; align-items: center; gap: 0.35rem;
    font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
    color: var(--prio, var(--vlr-muted)); background: color-mix(in srgb, var(--prio) 12%, transparent);
    border-radius: 999px; padding: 0.14rem 0.55rem;
}
.prio-dot { flex: 0 0 auto; width: 7px; height: 7px; border-radius: 50%; background: var(--prio, var(--vlr-muted-soft)); }

.tarefa-card-assunto { font-weight: 600; line-height: 1.3; color: var(--vlr-ink); display: block; }

/* Datas: abertura e prazo, rotuladas para não confundir */
.tarefa-datas { display: flex; flex-wrap: wrap; align-items: center; gap: 0.2rem 0.9rem; margin-top: 0.55rem; }
.tarefa-datas:empty { display: none; }
.tarefa-data { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.73rem; color: var(--vlr-muted); white-space: nowrap; }
.tarefa-data i { font-size: 0.66rem; opacity: .85; }
.tarefa-restante { font-weight: 700; }
.tarefa-data.is-prazo.is-vencido { color: var(--vlr-danger); font-weight: 700; }
.tarefa-data.is-prazo.is-urgente { color: var(--vlr-pend); font-weight: 700; }

/* Destaque do card conforme o prazo */
.tarefa-card.is-urgente {
    border-color: color-mix(in srgb, var(--vlr-pend) 35%, var(--vlr-border));
    border-left-color: var(--vlr-pend);
    background: var(--vlr-pend-soft-2);
}
.tarefa-card.is-atrasado {
    border-color: color-mix(in srgb, var(--vlr-danger) 40%, var(--vlr-border));
    border-left-color: var(--vlr-danger);
    background: color-mix(in srgb, var(--vlr-danger-soft) 45%, var(--vlr-surface));
}

/* Rodapé: responsável (nome inteiro, esq.) + contadores (dir.) */
.tarefa-card-foot {
    display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
    margin-top: 0.7rem; padding-top: 0.55rem;
    border-top: 1px solid var(--vlr-border);
}
.tarefa-resp { display: inline-flex; align-items: center; gap: 0.4rem; min-width: 0; }
.tarefa-resp-nome {
    font-size: 0.78rem; font-weight: 600; color: var(--vlr-ink);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tarefa-resp--vazio .tarefa-resp-nome { color: var(--vlr-muted); font-weight: 500; }
.tarefa-foot-right { display: inline-flex; align-items: center; gap: 0.55rem; flex: 0 0 auto; }
.tarefa-foot-ic { display: inline-flex; align-items: center; gap: 0.2rem; color: var(--vlr-muted); font-size: 0.74rem; }

/* Avatar (iniciais) */
.tarefa-avatar {
    flex: 0 0 auto;
    width: 24px; height: 24px; border-radius: 50%;
    background: var(--vlr-primary); color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 0.66rem; font-weight: 700;
}
.tarefa-avatar--vazio { background: var(--vlr-border); color: var(--vlr-muted); }

.tarefas-vazio, .tarefa-feed .tarefa-evento { color: var(--vlr-muted); }
.tarefas-vazio { text-align: center; padding: 2.5rem 1rem; }
.tarefas-vazio i { font-size: 2rem; display: block; margin-bottom: 0.6rem; opacity: .4; }

/* ---- Miniaturas de anexo no compositor ---- */
.tarefa-anexos-preview { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.tarefa-anexos-preview:empty { display: none; }
.tarefa-anexo-chip {
    position: relative;
    display: inline-flex; align-items: center; gap: 0.35rem;
    background: var(--vlr-bg); border: 1px solid var(--vlr-border);
    border-radius: var(--vlr-radius-sm); padding: 0.25rem 0.5rem;
    font-size: 0.75rem; max-width: 200px;
}
.tarefa-anexo-chip img { width: 28px; height: 28px; object-fit: cover; border-radius: 4px; }
.tarefa-anexo-chip-nome { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tarefa-anexo-chip-x {
    border: 0; background: transparent; color: var(--vlr-muted);
    font-size: 1.1rem; line-height: 1; cursor: pointer; padding: 0 0.1rem;
}
.tarefa-anexo-chip-x:hover { color: var(--vlr-danger); }

/* ==================== Página de detalhe ==================== */
.tarefa-ver-grid { display: grid; grid-template-columns: 1fr 320px; gap: 1.25rem; align-items: start; }
@media (max-width: 800px) { .tarefa-ver-grid { grid-template-columns: 1fr; } }

.tarefa-ver-assunto {
    width: 100%;
    font-size: 1.35rem; font-weight: 700; color: var(--vlr-ink);
    border: 1px solid transparent; border-radius: var(--vlr-radius-sm);
    padding: 0.35rem 0.5rem; margin: -0.35rem -0.5rem 0.75rem; background: transparent;
}
.tarefa-ver-assunto:hover { border-color: var(--vlr-border-soft); }
.tarefa-ver-assunto:focus { border-color: var(--vlr-primary); background: var(--vlr-surface); outline: none; }
.tarefa-ver-label { font-size: 0.78rem; font-weight: 600; color: var(--vlr-muted); display: block; margin-bottom: 0.25rem; }
.tarefa-ver-sec { font-size: 1rem; font-weight: 700; margin: 1.5rem 0 0.75rem; color: var(--vlr-ink); }

/* Anexos exibidos (feed / abertura) */
.tarefa-anexos { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.5rem; }
.tarefa-anexo-img img {
    max-width: 180px; max-height: 140px; border-radius: var(--vlr-radius-sm);
    border: 1px solid var(--vlr-border); display: block;
}
.tarefa-anexo-file {
    display: inline-flex; align-items: center; gap: 0.4rem;
    background: var(--vlr-bg); border: 1px solid var(--vlr-border);
    border-radius: var(--vlr-radius-sm); padding: 0.35rem 0.6rem;
    font-size: 0.8rem; color: var(--vlr-ink-soft); text-decoration: none; max-width: 240px;
}
.tarefa-anexo-file:hover { border-color: var(--vlr-primary); color: var(--vlr-primary); }
.tarefa-anexo-file span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Feed de atividades */
.tarefa-feed { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 1rem; }
.tarefa-coment { display: flex; gap: 0.6rem; }
.tarefa-coment-corpo {
    flex: 1 1 auto; background: var(--vlr-surface);
    border: 1px solid var(--vlr-border); border-radius: var(--vlr-radius);
    padding: 0.6rem 0.8rem;
}
.tarefa-coment-head { display: flex; align-items: baseline; gap: 0.5rem; margin-bottom: 0.25rem; }
.tarefa-coment-head strong { font-size: 0.85rem; color: var(--vlr-ink); }
.tarefa-coment-head time { font-size: 0.72rem; color: var(--vlr-muted-soft); }
.tarefa-coment-texto { font-size: 0.88rem; color: var(--vlr-ink-soft); white-space: pre-wrap; word-break: break-word; }
.tarefa-evento {
    display: flex; align-items: center; gap: 0.5rem;
    margin-left: calc(26px + 0.6rem); /* alinha ao corpo dos comentários (avatar + gap) */
    background: var(--vlr-surface-2);
    border: 1px solid var(--vlr-border-soft); border-radius: var(--vlr-radius);
    padding: 0.4rem 0.8rem;
    font-size: 0.78rem; color: var(--vlr-muted);
}
.tarefa-evento i { opacity: .6; }
.tarefa-evento time { margin-left: auto; color: var(--vlr-muted-soft); }

/* Compositor de comentário */
.tarefa-comentar {
    margin-top: 1rem; background: var(--vlr-bg-soft);
    border: 1px solid var(--vlr-border); border-radius: var(--vlr-radius); padding: 0.75rem;
}
.tarefa-comentar-acoes { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.5rem; }

/* Barra lateral de propriedades */
.tarefa-ver-side {
    display: flex; flex-direction: column; gap: 0.75rem;
    background: var(--vlr-surface); border: 1px solid var(--vlr-border);
    border-radius: var(--vlr-radius); padding: 1rem; position: relative;
}
/* Pickers (prioridade/status) na lateral do detalhe (chips compactos) */
.tarefa-prop .prio-picker { margin-top: 0.15rem; }
.tarefa-prop .prio-chip { padding: 0.24rem 0.65rem; font-size: 0.78rem; white-space: nowrap; }
/* Status: mantém os 3 botões numa única linha (rótulos maiores). */
.tarefa-prop [data-status-edit] { flex-wrap: nowrap; }
.tarefa-prop-meta { border-top: 1px solid var(--vlr-border-soft); padding-top: 0.6rem; font-size: 0.76rem; color: var(--vlr-muted); }
.tarefa-ver-saved {
    position: absolute; top: 0.6rem; right: 0.8rem;
    font-size: 0.72rem; color: var(--vlr-success); opacity: 0; transition: opacity .2s var(--vlr-ease);
}
.tarefa-ver-saved.is-on { opacity: 1; }