/* ============================================================
   Variáveis — paleta oficial projeto-pdf
   ============================================================ */
:root {
    /* Primárias */
    --orange:          #7D856B;
    --orange-dark:     #6A7159;
    --green-dark:      #1C2E1A;
    --violet:          #7C4DFF;

    /* Sidebar */
    --sidebar-brand-bg: #1C3829;
    --sidebar-nav-bg:   #3D4040;
    --sidebar-width:    260px;

    /* Página */
    --page-bg:         #F8FAFB;
    --topbar-height:   60px;

    /* Contêineres */
    --card-bg:         #FFFFFF;
    --container-bg:    #E8E4DC;
    --alt-bg:          #F2EFE8;
    --help-bg:         #F5F3EF;

    /* Bordas */
    --border:          #C0BDB4;
    --border-alt:      #C8C4BB;

    /* Texto */
    --text-main:       #000000;
    --text-title:      #1C2E1A;
    --text-secondary:  #697151;
    --text-label:      #444444;
    --text-muted:      #6B6B6B;
    --text-icon:       #888888;
    --text-disabled:   #9E9E9E;

    /* Status */
    --status-success-bg:  #E8F5E9;
    --status-warning-bg:  #FFF9C4;
    --status-error:       #B71C1C;

    --card-shadow: 0 1px 4px rgba(0, 0, 0, .07);
}

/* ============================================================
   Breakpoints — leia antes de mexer em @media
   ============================================================
   Media queries medem o VIEWPORT, mas quase todo grid deste arquivo vive dentro
   de .hub-content, que é o viewport menos a barra lateral. Então o número na
   query não é a largura que o grid vai ter. A barra lateral mede:

     viewport >= 1100px    240px (barra cheia)
     820-1100px             64px (rail)
     < 820px                 0   (gaveta, fora do fluxo)

   Daí a conversão de "quero que isto quebre quando o conteúdo tiver C px":

     C >= 1036px      breakpoint = C + 240   (cai na faixa da barra cheia)
     756 <= C < 1036  breakpoint = C + 64    (cai na faixa do rail)
     C < 756          breakpoint = C         (cai na faixa da gaveta)

   Sobra uma janela de ~40px (viewport 1100-1140) em que um alvo de 900px não
   dispara; o preço de fechá-la é duplicar cada query com uma segunda condição,
   e não vale para 40px.

   Duas famílias ficam fora disso e não devem ser deslocadas:
   a tela de login (LoginLayout não tem barra lateral) e o interior dos modais
   (position:fixed sobre o viewport inteiro). As queries de 640px e 560px daqui
   para baixo são quase todas de modal — confira antes de somar nada. */

/* ============================================================
   Reset base
   ============================================================ */
:focus:not(:focus-visible) { outline: none; }
h1:focus { outline: none; }

html, body {
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    height: 100%;
    margin: 0;
    color: var(--text-main);
    background: var(--page-bg);
}

/* ============================================================
   Shell — sidebar fixa + área scrollável
   ============================================================ */
.app-shell {
    display: flex;
    height: 100vh;
    overflow: hidden;
}

/* ============================================================
   Sidebar
   ============================================================ */
.sidebar {
    width: var(--sidebar-width);
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    overflow-y: auto;
}

/* Brand (topo) */
.sidebar-brand {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: 1.25rem 1.5rem;
    background: var(--sidebar-brand-bg);
    font-size: 1.05rem;
    font-weight: 700;
    color: #fff;
    text-decoration: none;
    border-bottom: 1px solid rgba(255, 255, 255, .1);
    flex-shrink: 0;
}

.brand-icon {
    font-size: 1.6rem;
    color: var(--orange);
}

/* Links de navegação */
.sidebar-nav {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: .5rem 0;
    background: var(--sidebar-nav-bg);
}

.sidebar-link {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .8rem 1.5rem;
    color: rgba(255, 255, 255, .7);
    text-decoration: none;
    font-size: .9rem;
    transition: background .15s, color .15s;
    border-left: 3px solid transparent;
}

.sidebar-link:hover {
    background: rgba(255, 255, 255, .07);
    color: #fff;
    text-decoration: none;
}

.sidebar-link.active {
    background: rgba(238, 111, 16, .15);
    color: #fff;
    border-left-color: var(--orange);
}

.sidebar-link i {
    font-size: 1.1rem;
    width: 1.25rem;
    text-align: center;
    flex-shrink: 0;
}

/* ============================================================
   Main wrapper
   ============================================================ */
.main-wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--page-bg);
}

/* ============================================================
   Topbar
   ============================================================ */
.topbar {
    height: var(--topbar-height);
    background: var(--card-bg);
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 0 1.5rem;
    flex-shrink: 0;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .05);
}

.env-badge {
    display: inline-flex;
    align-items: center;
    padding: .3rem .75rem;
    border-radius: 6px;
    background: rgba(255, 193, 7, .15);
    color: #b8860b;
    border: 1px solid rgba(255, 193, 7, .4);
    font-size: .8rem;
    font-weight: 600;
}

.user-badge {
    display: flex;
    align-items: center;
    gap: .5rem;
    color: var(--text-muted);
    font-size: .875rem;
    font-weight: 500;
}

.user-badge i {
    font-size: 1.2rem;
    color: var(--text-icon);
}

/* ============================================================
   Área de conteúdo
   ============================================================ */
.page-content {
    flex: 1;
    overflow-y: auto;
    padding: 2rem;
}

/* ============================================================
   Page header
   ============================================================ */
.page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.5rem;
}

.page-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-title);
    margin: 0;
}

/* ============================================================
   Stat cards
   ============================================================ */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 1rem;
}

.stat-card {
    background: var(--card-bg);
    border-radius: 8px;
    padding: 1.25rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    box-shadow: var(--card-shadow);
    border: 1px solid var(--border);
}

.stat-icon {
    width: 3rem;
    height: 3rem;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    flex-shrink: 0;
}

/* Ícone laranja — "processados" */
.bg-primary-soft { background: #FBE8D3; }
.bg-primary-soft i { color: var(--orange) !important; }

/* Ícone amarelo — "em processamento" */
.bg-warning-soft { background: var(--status-warning-bg); }
.bg-warning-soft i { color: #9A7B00 !important; }

/* Ícone verde — "concluídos" */
.bg-success-soft { background: var(--status-success-bg); }
.bg-success-soft i { color: #2e7d32 !important; }

/* Ícone vermelho — "erros" */
.bg-danger-soft { background: #FDECEA; }
.bg-danger-soft i { color: var(--status-error) !important; }

.stat-info {
    display: flex;
    flex-direction: column;
}

.stat-value {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--text-title);
    line-height: 1;
}

.stat-label {
    font-size: .8rem;
    color: var(--text-secondary);
    margin-top: .25rem;
}

/* ============================================================
   Cards
   ============================================================ */
.card {
    background: var(--card-bg) !important;
    border: 1px solid var(--border) !important;
    box-shadow: var(--card-shadow);
    border-radius: 8px !important;
}

.card-header {
    background: var(--card-bg) !important;
    border-bottom: 1px solid var(--border) !important;
    padding: .875rem 1.25rem;
    border-radius: 8px 8px 0 0 !important;
}

.card-header h5 {
    color: var(--text-title);
}

/* Card de ajuda */
.card.card-help {
    background: var(--help-bg) !important;
    border-color: var(--border-alt) !important;
}

/* ============================================================
   Tabelas
   ============================================================ */
.table th {
    color: var(--text-label);
    font-size: .8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    border-bottom-color: var(--border) !important;
}

.table td {
    color: var(--text-main);
    vertical-align: middle;
    border-bottom-color: var(--border) !important;
}

.table-hover > tbody > tr:hover > td {
    background: var(--alt-bg);
}

/* ============================================================
   Status badges
   ============================================================ */
.badge-success    { background-color: #2e7d32 !important;   color: #fff !important; }
.badge-error      { background-color: var(--status-error) !important; color: #fff !important; }
.badge-waiting    { background-color: #9A7B00 !important;   color: #fff !important; }
.badge-processing { background-color: #4A5568 !important;   color: #fff !important; }

/* ============================================================
   Botões e links
   ============================================================ */
a, .btn-link {
    color: var(--orange-dark);
}

a:hover {
    color: var(--orange);
}

.btn-primary {
    background-color: var(--orange);
    border-color: var(--orange);
    color: #fff;
}

.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
    background-color: var(--orange-dark);
    border-color: var(--orange-dark);
    color: #fff;
}

.btn-green-dark {
    background-color: var(--green-dark);
    border-color: var(--green-dark);
    color: #fff;
}

.btn-green-dark:hover, .btn-green-dark:focus, .btn-green-dark:active {
    background-color: #142312;
    border-color: var(--green-dark);
    color: #fff;
}

.btn-outline-primary {
    color: var(--orange);
    border-color: var(--orange);
}

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

.btn-outline-secondary {
    color: var(--text-muted);
    border-color: var(--border);
}

.btn-outline-secondary:hover {
    background-color: var(--container-bg);
    border-color: var(--border);
    color: var(--text-main);
}

.btn:focus, .btn:active:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 .1rem #fff, 0 0 0 .25rem rgba(238, 111, 16, .35);
}

/* ============================================================
   Forms
   ============================================================ */
.form-label {
    font-weight: 500;
    font-size: .875rem;
    color: var(--text-label);
    margin-bottom: .35rem;
}

.form-control, .form-select {
    border-color: var(--border);
    color: var(--text-main);
}

.form-control:focus, .form-select:focus {
    border-color: var(--orange);
    box-shadow: 0 0 0 .2rem rgba(238, 111, 16, .2);
}

.form-control::placeholder {
    color: var(--text-disabled);
}

/* ============================================================
   Search box
   ============================================================ */
.search-box {
    position: relative;
    display: flex;
    align-items: center;
}

.search-box i {
    position: absolute;
    left: .75rem;
    color: var(--text-icon);
    pointer-events: none;
    z-index: 1;
}

.search-box .form-control {
    padding-left: 2.25rem;
    min-width: 220px;
}

/* ============================================================
   Alerts
   ============================================================ */
.alert-success {
    background: var(--status-success-bg);
    border-color: #a5d6a7;
    color: #1b5e20;
}

.alert-link {
    color: var(--orange-dark);
}

/* ============================================================
   Nova Requisição — segmented tab control
   ============================================================ */
.req-tabs {
    display: inline-flex;
    gap: 4px;
    background: var(--container-bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 4px;
    margin-bottom: 1.5rem;
}

.req-tab-btn {
    background: transparent;
    border: 1px solid transparent;
    border-radius: 6px;
    padding: .45rem 1.25rem;
    font-size: .875rem;
    font-weight: 500;
    color: var(--text-muted);
    cursor: pointer;
    transition: background .15s, color .15s, border-color .15s, box-shadow .15s;
    white-space: nowrap;
}

.req-tab-btn:hover:not(.active) {
    background: rgba(255, 255, 255, .5);
    color: var(--text-main);
}

.req-tab-btn.active {
    background: var(--card-bg);
    border-color: var(--border);
    color: var(--orange);
    font-weight: 600;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .1);
}

/* ============================================================
   Nova Requisição — grid de campos
   ============================================================ */
.step-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    background: var(--orange);
    color: #fff;
    font-size: .75rem;
    font-weight: 700;
    margin-right: .5rem;
}

.fields-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: .75rem;
}

.field-row {
    display: flex;
    flex-direction: column;
}

.field-name {
    font-size: .8rem;
    color: var(--text-secondary);
    margin-bottom: .2rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.card-footer {
    background: var(--alt-bg) !important;
    border-top: 1px solid var(--border) !important;
    padding: .875rem 1.25rem;
    border-radius: 0 0 8px 8px !important;
}

/* ============================================================
   Normalização
   ============================================================ */
.norm-upload-card {
    max-width: 600px;
}

/* PDF / Word file-type toggle — same segmented-pill look as .bday-view-toggle */
.norm-type-toggle {
    position: relative;
    display: inline-flex;
    gap: 4px;
    padding: 4px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--card-bg);
}
.norm-type-btn {
    position: relative;
    flex: none;
    padding: 9px 22px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: none;
    border-radius: 999px;
    background: none;
    color: #b0a898;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: color .15s, background-color .15s;
}
.norm-type-btn:hover:not(.active) { background: var(--alt-bg); color: #7a6e60; }
.norm-type-btn.active { background: var(--orange); color: #fff; }

/* Card com split layout.
   Inside HubLayout's .hub-content, below the PdfAutofiller host's dash-head + tab strip:
   56px header + ~24px top padding + ~70px dash-head + ~45px tabs + 64px bottom padding
   ≈ 270px of chrome above/below the card. */
.norm-split-card {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 270px);
    min-height: 500px;
}

.norm-split-body {
    display: flex;
    flex: 1;
    overflow: hidden;
}

/* Coluna esquerda — lista de campos */
.norm-col-fields {
    width: 46%;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.norm-col-fields .norm-table {
    flex: 1;
    overflow-y: auto;
}

/* Divisória vertical */
.norm-divider {
    width: 1px;
    background: var(--border);
    flex-shrink: 0;
}

/* Coluna direita — preview do PDF */
.norm-col-preview {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: #525659;
    overflow: hidden;
}

/* ── PDF canvas viewer ──────────────────────────────────────────────────── */
.pdf-viewer-wrap {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.pdf-viewer-toolbar {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .35rem .75rem;
    background: var(--bg-sidebar, #3D4040);
    border-bottom: 1px solid rgba(255,255,255,.1);
    flex-shrink: 0;
    color: #ccc;
}

.pdf-viewer-toolbar .text-muted {
    color: #ccc !important;
    min-width: 4rem;
    text-align: center;
}

.pdf-load-spinner {
    width: 14px !important;
    height: 14px !important;
    border-width: 2px;
    vertical-align: middle;
}

.pdf-canvas-container {
    flex: 1;
    overflow: auto;
    background: #525659;
    padding: .5rem;
    /* text-align:center + inline-block child centers when smaller than container
       but still allows scroll in both axes when zoomed beyond fit-width */
    text-align: center;
}

.pdf-canvas-wrap {
    position: relative;
    display: inline-block;
    line-height: 0;
    box-shadow: 0 2px 10px rgba(0,0,0,.4);
    text-align: left;
}

.pdf-canvas-overlay {
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
}

.pdf-toolbar-sep {
    width: 1px;
    height: 18px;
    background: rgba(255,255,255,.2);
    flex-shrink: 0;
    margin: 0 .15rem;
}

.pdf-page-label {
    min-width: 3.5rem;
    text-align: center;
}

.pdf-zoom-label {
    min-width: 3rem;
    text-align: center;
}

/* ── DOCX client-side preview (docx-preview) ───────────────────────────── */
.docx-preview-wrap {
    max-height: 70vh;
    overflow-y: auto;
    background: #525659;
    padding: 1rem;
    border-radius: 4px;
}

/* Paginação da lista */
.norm-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .75rem;
    padding: .5rem 1rem;
    border-top: 1px solid var(--border);
    background: var(--alt-bg);
    flex-shrink: 0;
}

/* Tabela de mapeamento */
.norm-table th, .norm-table td {
    vertical-align: middle;
    padding: .5rem .75rem;
    font-size: .85rem;
}

.norm-table {
    display: block;
    overflow-y: auto;
    flex: 1;
}

/* Clicking a row jumps the preview to the field's page */
.norm-row-clickable {
    cursor: pointer;
}

.norm-row-clickable input,
.norm-row-clickable button {
    cursor: auto;
}

/* The scrollable table (display:block) shrinks to its content and leaves a gap
   on the right; force the row groups to span the full column width. */
.norm-table thead,
.norm-table tbody {
    display: table;
    width: 100%;
    table-layout: fixed;
}

.norm-table thead {
    position: sticky;
    top: 0;
    background: var(--card-bg);
    z-index: 1;
}

.campo-original {
    font-family: 'Consolas', 'Cascadia Code', monospace;
    font-size: .8rem;
    color: var(--text-main);
    word-break: break-all;
}

.ocorrencia-badge {
    display: inline-block;
    margin-left: .4rem;
    font-size: .68rem;
    font-weight: 600;
    padding: .1rem .35rem;
    border-radius: 3px;
    background: var(--status-warning-bg);
    color: #9A7B00;
    vertical-align: middle;
}

.row-mapped > td {
    background-color: rgba(46, 125, 50, .06) !important;
}

.row-mapped > td:first-child {
    border-left: 3px solid #2e7d32;
}

.row-vazio > td {
    background-color: rgba(183, 28, 28, .05) !important;
    opacity: .55;
}

.row-vazio > td:first-child {
    border-left: 3px solid var(--status-error);
}

tr > td:first-child {
    border-left: 3px solid transparent;
}

.kpi-table tr > td:first-child {
    border-left: none;
}

.btn-xs {
    padding: .15rem .45rem;
    font-size: .75rem;
    line-height: 1.4;
    border-radius: 4px;
}

/* Autocomplete integrado */
.ac-wrapper {
    position: relative;
}

.ac-input.ac-open {
    border-color: var(--orange);
    border-bottom-color: var(--orange);
    border-radius: 4px 4px 0 0;
    box-shadow: 0 0 0 .2rem rgba(238, 111, 16, .2);
    z-index: 101;
    position: relative;
}

.ac-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: auto;
    min-width: 100%;
    width: max-content;
    max-width: 420px;
    background: var(--card-bg);
    border: 1px solid var(--orange);
    border-top: none;
    border-radius: 0 0 4px 4px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, .12);
    z-index: 100;
    max-height: 220px;
    overflow-y: auto;
}

.ac-section-header {
    padding: .25rem .65rem .15rem;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--text-secondary);
    background: var(--alt-bg);
    border-top: 1px solid var(--border);
    pointer-events: none;
    user-select: none;
}

.ac-section-header:first-child {
    border-top: none;
}

.ac-item {
    padding: .3rem .65rem;
    font-size: .8rem;
    font-family: 'Consolas', 'Cascadia Code', monospace;
    cursor: pointer;
    color: var(--text-main);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ac-item:hover {
    background: var(--alt-bg);
    color: var(--orange-dark);
}

.ac-item strong {
    color: var(--orange-dark);
    font-weight: 700;
}

.norm-success-card {
    max-width: 520px;
    margin: 2rem auto;
    border: 1px solid #a5d6a7 !important;
    background: var(--status-success-bg) !important;
}

.norm-success-icon {
    font-size: 3.5rem;
    color: #2e7d32;
    line-height: 1;
}

@media (max-width: 964px) {
    .norm-split-card { height: auto; min-height: unset; }
    .norm-split-body { flex-direction: column; }
    .norm-col-fields { width: 100%; }
    .norm-divider    { width: 100%; height: 1px; }
    .norm-col-preview { height: 500px; }
}

/* ============================================================
   Job Detalhe
   ============================================================ */
.job-detail-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
}

@media (max-width: 832px) {
    .job-detail-grid { grid-template-columns: 1fr; }
}

.detail-list {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: .5rem 1.25rem;
    margin: 0;
}

.detail-list dt {
    font-size: .8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--text-label);
    padding-top: .15rem;
    white-space: nowrap;
}

.detail-list dd {
    margin: 0;
    color: var(--text-main);
    font-size: .9rem;
    word-break: break-all;
}

.record-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.record-item {
    display: flex;
    align-items: center;
    padding: .65rem 1.25rem;
    border-bottom: 1px solid var(--border);
    font-size: .9rem;
    color: var(--text-main);
}

.record-item:last-child {
    border-bottom: none;
}

.record-badge {
    margin-left: auto;
    font-size: .7rem;
    font-weight: 600;
    padding: .15rem .45rem;
    border-radius: 4px;
    background: #FBE8D3;
    color: var(--orange-dark);
    letter-spacing: .04em;
}

.font-monospace {
    font-family: 'Consolas', 'Cascadia Code', monospace;
    font-size: .78rem;
}

/* Modern status pills — shared by Fila de Jobs + Job Detalhe (Hub style) */
.job-status {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11.5px;
    font-weight: 600;
    padding: 2px 9px;
    border-radius: 999px;
    border: 1px solid;
    white-space: nowrap;
    line-height: 1.5;
}
.job-status.completed  { background: #f0fdf4; border-color: #bbf7d0; color: #15803d; }
.job-status.processing { background: #fff7ed; border-color: #fed7aa; color: var(--orange-dark); }
.job-status.pending    { background: #fef9c3; border-color: #fde68a; color: #92400e; }
.job-status.failed     { background: #fef2f2; border-color: #fecaca; color: #b91c1c; }

/* Count chip (e.g. number of filled records) */
.job-count {
    display: inline-flex;
    align-items: center;
    background: #fff7ed;
    color: var(--orange-dark);
    border: 1px solid #fed7aa;
    font-size: 11px;
    font-weight: 600;
    padding: 1px 8px;
    border-radius: 999px;
}

/* ============================================================
   Blazor error UI
   ============================================================ */
#blazor-error-ui {
    background: var(--status-error);
    bottom: 0;
    color: #fff;
    display: none;
    left: 0;
    padding: .6rem 1.25rem .7rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, .2);
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: .75rem;
    top: .5rem;
}

.blazor-error-boundary {
    background: var(--status-error);
    padding: 1rem 1rem 1rem 3.7rem;
    color: #fff;
}

.blazor-error-boundary::after {
    content: "Ocorreu um erro.";
}

/* ============================================================
   Validação de formulários
   ============================================================ */
.valid.modified:not([type=checkbox]) {
    outline: 1px solid #2e7d32;
}

.invalid {
    outline: 1px solid var(--status-error);
}

.validation-message {
    color: var(--status-error);
}

.required-asterisk {
    color: #c0392b;
    font-size: 11px;
    font-weight: 700;
    margin-left: 2px;
}

.darker-border-checkbox.form-check-input {
    border-color: var(--border);
}

.form-floating > .form-control-plaintext::placeholder,
.form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder,
.form-floating > .form-control:focus::placeholder {
    text-align: start;
}

/* ============================================================
   Login page
   ============================================================ */
/* `backwards`, NOT `both` — e isto não é estilo, é o que mantém os modais acima da
   barra lateral.

   `both` inclui `forwards`, que deixa a animação "em efeito" para sempre depois de
   terminar. Enquanto uma animação de `opacity` está em efeito, o Chromium trata o
   elemento como CONTEXTO DE EMPILHAMENTO permanente — mesmo parando em opacity:1,
   que por si só não criaria nenhum. Como .fade-in está na raiz de 21 páginas e os
   modais são filhos dessa raiz, o `z-index: 1050` dos modais passava a valer apenas
   dentro dela; a raiz competia no contexto de cima com `z-index: auto` (=0) e a
   .hub-sb, com `z-index: 5`, pintava sobre a página inteira, modal incluído. Era o
   que cortava a esquerda dos modais de cliente.

   `backwards` preenche só o trecho ANTES do início (irrelevante aqui, a animação
   começa sem delay), então nada fica em efeito depois do fim e o contexto de
   empilhamento não sobrevive. Visualmente idêntico.

   Regra geral: nenhum ancestral de página deve carregar `forwards`/`both` numa
   animação de `opacity`, `transform` ou `filter` — o z-index dos modais morre ali. */
.fade-in { animation: fadeIn .25s ease-out backwards; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

.sb-logo {
    width: 28px; height: 28px;
    border-radius: 7px;
    background: var(--orange);
    display: grid; place-items: center;
    color: white;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: -.02em;
    flex-shrink: 0;
    box-shadow: 0 1px 0 rgba(255,255,255,.3) inset, 0 1px 2px rgba(234,88,12,.4);
}

.login-root {
    min-height: 100%;
    display: grid;
    grid-template-columns: 58% 42%;
    background: #fff;
    padding: 28px;
    gap: 28px;
}
@media (max-width: 880px) { .login-root { grid-template-columns: 1fr; padding: 16px; } }

.login-aside {
    position: relative;
    color: white;
    padding: 40px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    clip-path: url(#loginAsideClip);
}
@media (max-width: 880px) { .login-aside { display: none; } }

.login-aside-photo {
    position: absolute; inset: 0;
    background: url('/img/login-background.jpg') center center / cover no-repeat;
}

.login-aside-overlay {
    position: absolute; inset: 0;
    background:
        linear-gradient(180deg, rgba(10,20,15,.18) 0%, rgba(10,20,15,0) 28%, rgba(10,20,15,0) 55%, rgba(6,14,10,.55) 100%);
}

.login-aside-brand { display: flex; align-items: center; gap: 12px; position: relative; z-index: 1; }
/* A marca fica em cima da foto, então precisa da mesma sombra que o letreiro
   antigo tinha — sem ela o branco some nas partes claras da imagem. */
.login-aside-logo {
    flex-shrink: 0;
    filter: drop-shadow(0 1px 3px rgba(0,0,0,.35));
}

.login-aside-h1 {
    position: relative;
    z-index: 1;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 34px;
    font-weight: 500;
    letter-spacing: -.01em;
    line-height: 1.2;
    margin: 40px 0 0;
    max-width: 420px;
    text-shadow: 0 2px 10px rgba(0,0,0,.25);
}

.login-aside-foot {
    position: relative;
    z-index: 1;
    margin-top: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}
.login-aside-foot-text {
    font-size: 10.5px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: rgba(255,255,255,.9);
    text-shadow: 0 1px 3px rgba(0,0,0,.35);
}
.login-aside-dots {
    display: grid;
    grid-template-columns: repeat(3, 6px);
    grid-auto-rows: 6px;
    gap: 4px;
    flex-shrink: 0;
}
.login-aside-dots span { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,.9); }

.login-main {
    display: flex;
    flex-direction: column;
    padding: 12px 48px;
    min-height: 100%;
}
.login-main-top { display: flex; justify-content: flex-end; }
.login-lang-form { display: flex; gap: 2px; }
.login-lang {
    font-size: 12.5px;
    color: var(--text-muted);
    background: transparent;
    border: 1px solid var(--border);
    padding: 5px 10px;
    border-radius: 6px;
    cursor: pointer;
    font-family: inherit;
    transition: background .1s, color .1s;
}
.login-lang:hover { background: var(--alt-bg); color: var(--text-label); }
.login-lang.active { background: var(--alt-bg); color: var(--text-title); border-color: var(--border-alt); font-weight: 600; }

.login-card { margin: auto; width: 100%; max-width: 400px; padding: 8px 0; }

.login-title {
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 25px;
    font-weight: 600;
    letter-spacing: -.01em;
    margin: 0 0 14px;
    color: var(--text-title);
}
.login-sub {
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 14.5px;
    color: var(--text-secondary);
    margin: 0 0 26px;
    line-height: 1.6;
}

/* Shown when /account/login-reset sent the user back here after a sign-in that could not
   complete — informative, not an error: the next attempt normally succeeds. */
.login-notice {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin: 0 0 20px;
    padding: 11px 13px;
    border: 1px solid var(--border);
    border-left: 3px solid #8a4a35;
    border-radius: 4px;
    background: rgba(138, 74, 53, .05);
    font-size: 13px;
    line-height: 1.5;
    color: var(--text-secondary);
}
.login-notice i { color: #8a4a35; font-size: 14px; line-height: 1.4; }

.ms-btn {
    width: 100%;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    background: var(--sidebar-brand-bg, #1C3829);
    color: white;
    border: 1px solid var(--sidebar-brand-bg, #1C3829);
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    text-decoration: none;
    transition: background .12s;
    font-family: inherit;
}
.ms-btn:hover { background: #14281c; color: white; text-decoration: none; }
.ms-btn .ms-logo { width: 18px; height: 18px; flex-shrink: 0; }

.login-divider {
    display: flex; align-items: center; gap: 12px;
    margin: 20px 0;
    font-size: 10.5px;
    color: var(--text-disabled);
    text-transform: uppercase;
    letter-spacing: .1em;
}
.login-divider::before, .login-divider::after { content: ""; flex: 1; height: 1px; background: var(--border); }

.login-help { text-align: center; font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: var(--text-secondary); }
.login-help a {
    color: #8a4a35;
    text-decoration: underline;
    text-decoration-style: dotted;
    text-underline-offset: 3px;
}
.login-help a:hover { color: #6d3a29; }

.login-foot { display: flex; justify-content: space-between; align-items: center; font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: var(--text-disabled); }
.login-foot-links { display: flex; gap: 16px; }
.login-foot-links a { color: var(--text-muted); text-decoration: none; }
.login-foot-links a:hover { color: var(--text-title); }

/* ============================================================
   Topbar — auth badge, switch button e language toggle
   ============================================================ */
.topbar-end {
    display: flex;
    align-items: center;
    gap: .75rem;
}

.lang-toggle {
    display: inline-flex;
    align-items: center;
    background: var(--container-bg);
    border: 1px solid var(--border);
    border-radius: 6px;
    overflow: hidden;
    gap: 0;
}

.lang-toggle-btn {
    background: transparent;
    border: none;
    padding: .3rem .65rem;
    font-size: .75rem;
    font-weight: 600;
    color: var(--text-muted);
    cursor: pointer;
    letter-spacing: .06em;
    transition: background .15s, color .15s;
    line-height: 1;
}

.lang-toggle-btn:hover:not(.active) {
    background: rgba(255, 255, 255, .6);
    color: var(--text-main);
}

.lang-toggle-btn.active {
    background: var(--card-bg);
    color: var(--orange);
    box-shadow: inset 0 0 0 1px var(--border);
}

.topbar-sep {
    width: 1px;
    height: 20px;
    background: var(--border);
    flex-shrink: 0;
}

.btn-switch {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .35rem .8rem;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: .8rem;
    font-weight: 500;
    color: var(--text-muted);
    cursor: pointer;
    transition: background .15s, color .15s, border-color .15s;
    white-space: nowrap;
}

.btn-switch i {
    font-size: .85rem;
}

.btn-switch:hover {
    background: var(--alt-bg);
    border-color: var(--orange);
    color: var(--orange-dark);
}

/* ============================================================
   Cliente checklist (Nova Requisição — aba Alternativos)
   ============================================================ */
.cliente-checklist {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
    background: var(--card-bg);
}

.cliente-check-item {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .55rem .85rem;
    cursor: pointer;
    transition: background .12s;
    border-bottom: 1px solid var(--border);
    margin: 0;
    font-weight: normal;
}

.cliente-check-item:last-child {
    border-bottom: none;
}

.cliente-check-item:hover {
    background: var(--alt-bg);
}

.cliente-check-item input[type="checkbox"] {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    accent-color: var(--orange);
    cursor: pointer;
}

.cliente-check-name {
    font-size: .875rem;
    color: var(--text-main);
    line-height: 1.3;
}

/* Só aparece quando o mesmo cliente tem mais de uma intenção na LDA — identifica qual é a linha. */
.cliente-check-intencao {
    display: inline-block;
    margin-left: .5rem;
    padding: .05rem .4rem;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: var(--container-bg);
    font-family: 'Consolas', 'Cascadia Code', monospace;
    font-size: .72rem;
    color: var(--text-secondary);
    vertical-align: 1px;
}

.cliente-pagination {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-top: .65rem;
    flex-wrap: wrap;
}

/* ============================================================
   LDA picker (Nova Requisição — aba Alternativos)
   Searchable dropdown replacing the native <select>.
   ============================================================ */
.lda-select {
    position: relative;
}

.lda-select-trigger {
    display: flex;
    align-items: center;
    gap: .75rem;
    width: 100%;
    padding: .5rem .85rem;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    text-align: left;
    cursor: pointer;
    transition: border-color .12s, box-shadow .12s;
}

.lda-select-trigger:hover {
    border-color: var(--orange);
}

.lda-select.open .lda-select-trigger {
    border-color: var(--orange);
    box-shadow: 0 0 0 .2rem rgba(125, 133, 107, .22);
}

.lda-select-value {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: .1rem;
}

.lda-select-placeholder {
    font-size: .875rem;
    color: var(--text-muted);
}

.lda-select-name {
    font-size: .875rem;
    font-weight: 600;
    color: var(--text-main);
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lda-select-sub {
    font-size: .78rem;
    color: var(--text-muted);
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lda-select-caret {
    flex-shrink: 0;
    font-size: .8rem;
    color: var(--text-icon);
    transition: transform .15s;
}

.lda-select.open .lda-select-caret {
    transform: rotate(180deg);
    color: var(--orange);
}

/* Catches clicks outside the menu so it closes without JS interop. */
.lda-select-backdrop {
    position: fixed;
    inset: 0;
    z-index: 200;
}

.lda-select-menu {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 201;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: 0 8px 22px rgba(0, 0, 0, .14);
    overflow: hidden;
}

.lda-select-search {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .5rem .75rem;
    border-bottom: 1px solid var(--border);
    background: var(--alt-bg);
}

.lda-select-search > i {
    font-size: .8rem;
    color: var(--text-icon);
}

.lda-select-search input {
    flex: 1;
    min-width: 0;
    border: none;
    background: transparent;
    outline: none;
    font-size: .8rem;
    color: var(--text-main);
}

.lda-select-list {
    max-height: 260px;
    overflow-y: auto;
}

.lda-select-option {
    display: flex;
    align-items: center;
    gap: .75rem;
    width: 100%;
    padding: .5rem .85rem;
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--border);
    text-align: left;
    cursor: pointer;
    transition: background .12s;
}

.lda-select-option:last-child {
    border-bottom: none;
}

.lda-select-option:hover {
    background: var(--alt-bg);
}

.lda-select-option.selected {
    background: rgba(125, 133, 107, .12);
}

.lda-select-option-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: .1rem;
}

.lda-select-check {
    flex-shrink: 0;
    font-size: .95rem;
    color: var(--orange);
}

.lda-select-empty {
    padding: .75rem .85rem;
    font-size: .8rem;
    color: var(--text-muted);
}

/* ============================================================
   Hub Dashboard
   ============================================================ */

/* Skeleton shimmer */
.skel {
    background: linear-gradient(90deg, var(--alt-bg) 0%, var(--container-bg) 50%, var(--alt-bg) 100%);
    background-size: 200% 100%;
    animation: shimmer 1.4s infinite linear;
    border-radius: 4px;
}
@keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* Widget interactive: + notch, actions, drag states */
.widget-plus {
    position: absolute; top: -11px; left: -11px;
    width: 24px; height: 24px; border-radius: 50%;
    background: var(--card-bg); border: 1.5px dashed var(--border-alt);
    color: var(--text-disabled); display: grid; place-items: center;
    cursor: pointer; z-index: 3; transition: all .12s;
    font-family: inherit; padding: 0; font-size: 14px; line-height: 1;
}
.widget:hover .widget-plus { border-color: var(--border-alt); color: var(--text-muted); }
.widget-plus:hover { background: var(--orange); border-color: var(--orange); border-style: solid; color: white; transform: scale(1.08); }
.widget-actions { display: flex; align-items: center; gap: 2px; margin-top: -2px; opacity: 0; transition: opacity .12s; }
.widget:hover .widget-actions { opacity: 1; }
.widget-actions button { width: 22px; height: 22px; border: 0; background: transparent; border-radius: 4px; color: var(--text-disabled); display: grid; place-items: center; cursor: pointer; font-size: 12px; font-family: inherit; }
.widget-actions button:hover { background: var(--alt-bg); color: var(--text-label); }
.widget-actions .widget-x:hover { background: oklch(96% 0.02 25); color: var(--status-error); }
.widget-handle { cursor: grab; font-size: 14px; }
.widget-handle:active { cursor: grabbing; }
.widget.dragging { opacity: .35; transform: scale(.985); border-style: dashed; }
.widget.drag-over { border-color: var(--orange) !important; border-style: dashed !important; box-shadow: 0 0 0 3px #fff7ed; }

/* Add-widget slot */
.widget-add { border: 1.5px dashed var(--border-alt); background: transparent; border-radius: 10px; min-height: 240px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; cursor: pointer; color: var(--text-muted); font-family: inherit; padding: 16px; transition: all .12s; }
.widget-add:hover { border-color: var(--orange); background: #fff7ed; color: var(--orange-dark); }
.widget-add-icon { width: 42px; height: 42px; border-radius: 50%; background: var(--card-bg); border: 1px solid var(--border); display: grid; place-items: center; color: var(--text-muted); margin-bottom: 6px; font-size: 20px; }
.widget-add:hover .widget-add-icon { border-color: var(--orange); color: var(--orange); }
.widget-add-label { font-size: 13px; font-weight: 600; }
.widget-add-sub { font-size: 11.5px; color: var(--text-disabled); }
.widget-add:hover .widget-add-sub { color: var(--orange-dark); }

/* Picker modal */
.modal-backdrop { position: fixed; inset: 0; background: oklch(20% 0.01 60 / .42); backdrop-filter: blur(2px); z-index: 1000; display: grid; place-items: center; padding: 20px; animation: backdropIn .18s ease-out both; }
@keyframes backdropIn { from { opacity: 0; } to { opacity: 1; } }
.picker-modal { background: var(--card-bg); border: 1px solid var(--border); border-radius: 14px; box-shadow: 0 18px 60px rgba(17,24,39,.18), 0 2px 8px rgba(17,24,39,.06); width: 100%; max-width: 560px; max-height: calc(100vh - 40px); display: flex; flex-direction: column; animation: modalIn .22s cubic-bezier(.16,1,.3,1) both; }
@keyframes modalIn { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }
.picker-modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 18px 20px 14px; border-bottom: 1px solid var(--border); }
.picker-modal-head h3 { margin: 0 0 4px; font-size: 16px; font-weight: 600; letter-spacing: -.01em; color: var(--text-title); }
.picker-modal-sub { font-size: 12.5px; color: var(--text-muted); line-height: 1.45; }
.picker-modal-x { width: 28px; height: 28px; border: 1px solid var(--border); background: var(--card-bg); border-radius: 6px; color: var(--text-muted); display: grid; place-items: center; cursor: pointer; flex-shrink: 0; font-size: 16px; font-family: inherit; }
.picker-modal-x:hover { background: var(--alt-bg); color: var(--text-title); }
.picker-modal-body { padding: 14px 20px 20px; overflow-y: auto; }
.picker-group + .picker-group { margin-top: 18px; }
.picker-group-label { display: flex; align-items: center; gap: 6px; font-size: 10.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 8px; }
.picker-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.picker-card { display: flex; align-items: flex-start; gap: 10px; padding: 11px 12px; border: 1px solid var(--border); background: var(--card-bg); border-radius: 6px; text-align: left; cursor: pointer; font-family: inherit; color: inherit; transition: all .12s; }
.picker-card:hover:not(:disabled) { border-color: var(--orange); background: #fff7ed; }
.picker-card.current { border-color: var(--orange); background: #fff7ed; }
.picker-card:disabled { opacity: .5; cursor: not-allowed; }
.picker-card-icon { width: 26px; height: 26px; border-radius: 6px; background: var(--alt-bg); border: 1px solid var(--border); display: grid; place-items: center; color: var(--text-label); flex-shrink: 0; font-size: 13px; }
.picker-card.current .picker-card-icon, .picker-card:not(:disabled):hover .picker-card-icon { background: white; border-color: #fed7aa; color: var(--orange-dark); }
.picker-card-title { font-size: 13px; font-weight: 600; color: var(--text-title); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.picker-card-badge { font-size: 9.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; padding: 1px 5px; border-radius: 3px; background: var(--orange); color: white; }
.picker-card-badge.pinned { background: var(--alt-bg); color: var(--text-muted); border: 1px solid var(--border); }
.picker-card-sub { font-size: 11.5px; color: var(--text-muted); margin-top: 1px; }
.picker-empty { text-align: center; padding: 28px 16px; color: var(--text-muted); font-size: 13px; }

/* Greeting */
.dash-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 24px;
    gap: 16px;
    flex-wrap: wrap;
}
.dash-greet h1 {
    font-size: 24px;
    font-weight: 600;
    letter-spacing: -.015em;
    margin: 0 0 4px;
    color: var(--text-title);
}
.dash-greet p { margin: 0; font-size: 13.5px; color: var(--text-muted); }
.dash-greet b { color: var(--text-label); font-weight: 600; }
.dash-date {
    font-size: 12px;
    font-family: ui-monospace, monospace;
    color: var(--text-muted);
    background: var(--card-bg);
    border: 1px solid var(--border);
    padding: 6px 10px;
    border-radius: 6px;
    white-space: nowrap;
}

/* Compact dashboard header: smaller title, no subtitle/date */
.dash-head-compact { margin-bottom: 16px; }
.dash-head-end { justify-content: flex-end; }
.dash-head-compact .dash-greet h1 { font-size: 19px; margin: 0; }

/* Section title */
.section-title {
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin: 0 0 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.kpi-view-toggle { display: flex; gap: 4px; margin-left: auto; }
.kpi-view-btn {
    height: 26px;
    padding: 0 10px;
    border: 1px solid var(--border);
    border-radius: 5px;
    background: var(--card-bg);
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 500;
    cursor: pointer;
    transition: all .12s;
    font-family: inherit;
    text-transform: none;
    letter-spacing: 0;
}
.kpi-view-btn:hover { background: var(--alt-bg); border-color: var(--border-alt); color: var(--text-title); }
.kpi-view-btn.active { background: #fff7ed; border-color: #fed7aa; color: var(--orange-dark); font-weight: 600; }
.section-title .count {
    background: var(--alt-bg);
    border: 1px solid var(--border);
    color: var(--text-muted);
    padding: 0 6px;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0;
}

/* Widget grid */
.widget-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 18px;
    margin: 8px 0 36px;
}
.widget {
    position: relative;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    min-height: 240px;
    box-shadow: var(--card-shadow);
    transition: border-color .15s, box-shadow .15s;
}
.widget:hover { border-color: var(--border-alt); }
.widget-head {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 14px 14px 10px;
    border-bottom: 1px solid var(--border);
}
.widget-icon {
    width: 26px; height: 26px;
    border-radius: 6px;
    background: var(--alt-bg);
    border: 1px solid var(--border);
    display: grid; place-items: center;
    color: var(--text-label);
    flex-shrink: 0;
    font-size: 13px;
}
.widget-titles { flex: 1; min-width: 0; }
.widget-title {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--text-title);
    letter-spacing: -.005em;
    display: flex;
    align-items: center;
    gap: 8px;
}
.widget-count {
    background: #fff7ed;
    color: var(--orange-dark);
    font-size: 10.5px;
    font-weight: 600;
    padding: 1px 6px;
    border-radius: 999px;
    border: 1px solid #fed7aa;
}
.widget-subtitle { font-size: 11.5px; color: var(--text-muted); margin-top: 2px; }
.widget-body { flex: 1; padding: 4px 0; overflow: hidden; }
.widget-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    padding: 10px 14px;
    border-top: 1px solid var(--border);
    border-radius: 0 0 10px 10px;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-muted);
    cursor: pointer;
    text-decoration: none;
    transition: background .12s, color .12s;
}
.widget-foot:hover { background: var(--alt-bg); color: var(--orange-dark); text-decoration: none; }

/* Stat widget */
.w-stat { padding: 16px 16px 14px; display: flex; flex-direction: column; height: 100%; }
.w-stat-headline { font-size: 26px; font-weight: 600; letter-spacing: -.02em; color: var(--text-title); font-variant-numeric: tabular-nums; }
.w-stat-sub { font-size: 11.5px; color: var(--text-muted); margin-top: 2px; }
.w-stat-diff { font-size: 11.5px; font-weight: 600; margin-top: 8px; color: var(--text-label); }
.w-stat-diff.success { color: oklch(50% 0.12 155); }
.w-stat-diff.warn    { color: oklch(52% 0.15 50); }
.w-progress { margin-top: auto; height: 5px; border-radius: 999px; background: var(--alt-bg); overflow: hidden; }
.w-progress-bar { height: 100%; background: var(--orange); border-radius: 999px; transition: width .4s ease; }
.w-progress-label { font-size: 11px; color: var(--text-muted); margin-top: 6px; font-variant-numeric: tabular-nums; }
.w-empty { padding: 24px 14px; text-align: center; font-size: 12px; color: var(--text-disabled); }

/* Pendências */
.pend-list { display: flex; flex-direction: column; }
.pend-row {
    display: grid;
    grid-template-columns: 32px 1fr auto;
    gap: 14px;
    align-items: center;
    padding: 14px 16px;
    border-bottom: 1px solid var(--border);
    transition: background .08s;
    text-decoration: none;
    color: inherit;
}
.pend-row:last-child { border-bottom: none; }
.pend-row:hover { background: var(--alt-bg); }
.pend-icon { width: 28px; height: 28px; border-radius: 6px; display: grid; place-items: center; font-size: 13px; }
.pend-icon.warn { background: oklch(96% 0.05 70); color: oklch(48% 0.15 70); }
.pend-icon.prim { background: #fff7ed; color: var(--orange-dark); }
.pend-body { min-width: 0; }
.pend-title { font-size: 13.5px; font-weight: 500; color: var(--text-title); margin-bottom: 2px; }
.pend-title b { font-weight: 600; }
.pend-meta { font-size: 11.5px; color: var(--text-muted); display: flex; align-items: center; gap: 6px; }
.pend-meta .dot { width: 3px; height: 3px; background: var(--text-disabled); border-radius: 50%; display: inline-block; }
.pend-chev { color: var(--text-disabled); font-size: 12px; }

/* Two-column layout */
.dash-row2 {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 20px;
    align-items: flex-start;
}
@media (max-width: 1340px) { .dash-row2 { grid-template-columns: 1fr; } }

/* Activity */
.dash-activity .act-item {
    display: flex; gap: 12px; padding: 12px 16px;
    border-bottom: 1px solid var(--border);
}
.dash-activity .act-item:last-child { border-bottom: none; }
.act-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--text-disabled); margin-top: 7px; flex-shrink: 0; }
.act-dot.prim { background: var(--orange); }
.act-text { font-size: 12.5px; color: var(--text-label); line-height: 1.5; }
.act-text b { color: var(--text-title); font-weight: 600; }
.act-time { font-size: 11px; color: var(--text-disabled); margin-top: 2px; font-variant-numeric: tabular-nums; }

/* ============================================================
   Hub Layout — sidebar + topbar + content (HubLayout.razor)
   Replicates hub.css .sb / .hdr / .content / .app-root
   ============================================================ */
.hub-root {
    display: flex;
    height: 100vh;
    overflow: hidden;

    /* Several sticky offsets inside .hub-content are expressed against its top
       padding (they pin flush under the hub header by cancelling it out), so the
       padding is a variable rather than a number repeated in four places — the
       short-viewport block at the end of this section shrinks it. */
    --hub-content-pad-top: 24px;

    /* The sidebar brand and the header are deliberately the same height so the
       two top edges line up. One variable keeps them that way when the
       short-viewport block shrinks them, and — unlike two competing single-class
       rules — it leaves the rail's `height: auto` brand free to win on its own
       higher specificity. */
    --hub-brand-h: 84px;
}

/* ── Sidebar ──────────────────────────────────────────────── */
.hub-sb {
    width: 240px;
    flex-shrink: 0;
    background: var(--card-bg);
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    transition: width .18s ease;
    position: relative;
    z-index: 5;
    /* Not `hidden`: the user menu is placed at left:100% when the bar is a rail
       (see the rail block below), so clipping here would swallow it. The brand
       clips its own overflow instead, which is all the width transition needed. */
    overflow: visible;
}

/* Rail and drawer live together at the end of this section — see the comment
   there for why .hub-collapsed is not styled next to .hub-sb itself. */

.hub-sb-brand {
    height: var(--hub-brand-h);
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 16px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
    overflow: hidden;
    background:
        linear-gradient(90deg, rgba(255, 255, 255, .3) 0%, rgba(255, 255, 255, .55) 55%, rgba(255, 255, 255, .82) 100%),
        url('/img/aba-lateral.jpg') center 70% / cover no-repeat;
}
/* A marca (símbolo + letreiro) ocupa o lugar do antigo par "badge B" + texto,
   então herda o flex:1 que empurrava o botão de recolher para a direita.
   O gap vem de --h no .bh; aqui fica só o encaixe na barra. */
.hub-sb-logo {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    /* Letreiro maior e mais pesado que o padrão da marca: aqui ele é o título
       da barra, não uma assinatura discreta como no login. Com --h:42px isto
       dá ~20px de corpo, acima dos 15px do texto que estava aqui antes. */
    --fonte: 0.48;
    /* O gap padrão (0.38 * --h) afastaria demais com a marca maior. */
    gap: 10px;
}
.hub-sb-logo .palavra { font-weight: 600; }
.hub-sb-collapse {
    width: 26px; height: 26px;
    border: 1px solid transparent;
    background: transparent;
    border-radius: 5px;
    color: var(--text-muted);
    display: grid; place-items: center;
    cursor: pointer;
    transition: all .12s;
    flex-shrink: 0;
    margin-left: auto;
}
.hub-sb-collapse:hover { background: var(--alt-bg); color: var(--text-title); border-color: var(--border); }

.hub-sb-nav {
    flex: 1;
    overflow-y: auto;
    scrollbar-gutter: stable;
    padding: 12px 8px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.hub-sb-section-label {
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--text-disabled);
    padding: 12px 10px 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    /* A flex item with overflow != visible loses its content-based automatic
       min-height (drops to 0), so the flex column is free to squeeze it below
       what its own padding/line-height need — clipping its own text — whenever
       the column's total content is even a sub-pixel taller than available
       space (e.g. at certain fractional browser zoom levels). flex-shrink: 0
       keeps this item at its natural height always; .hub-sb-nav's overflow-y:
       auto handles any real overflow with a scrollbar instead. */
    flex-shrink: 0;
}
.hub-sb-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 10px;
    height: 36px;
    flex-shrink: 0;
    border-radius: 6px;
    cursor: pointer;
    color: var(--text-label);
    font-size: 13.5px;
    font-weight: 500;
    border: 1px solid transparent;
    background: transparent;
    text-align: left;
    width: 100%;
    position: relative;
    transition: background .1s, color .1s;
    text-decoration: none;
}
.hub-sb-item:hover { background: var(--alt-bg); color: var(--text-title); text-decoration: none; }
.hub-sb-item.active {
    background: #fff7ed;
    color: var(--orange-dark);
}
.hub-sb-item.active .hub-sb-item-icon { color: var(--orange); }
.hub-sb-item.active::before {
    content: ""; position: absolute; left: -8px; top: 8px; bottom: 8px;
    width: 3px; border-radius: 2px; background: var(--orange);
}
.hub-sb-item-icon {
    width: 18px; height: 18px;
    flex-shrink: 0;
    display: grid; place-items: center;
    color: var(--text-muted);
}
.hub-sb-item.active .hub-sb-item-icon { color: var(--orange); }
.hub-sb-item:hover .hub-sb-item-icon { color: var(--text-title); }
.hub-sb-nav-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* "Investimentos Alternativos" nav item uses a PNG icon — mask-image so it inherits
   the same color (default/hover/active) as the Bootstrap Icons glyphs around it. */
.nav-icon-invest {
    display: inline-block;
    width: 16px;
    height: 16px;
    -webkit-mask-image: url('img/investimento.png');
    mask-image: url('img/investimento.png');
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    background-color: currentColor;
}

/* Collapsible section toggle */
.hub-sb-section-toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    padding: 10px 10px 4px;
    background: transparent;
    border: 0;
    cursor: pointer;
    font-family: inherit;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--text-disabled);
    text-align: left;
    border-radius: 4px;
    transition: color .12s;
    flex-shrink: 0;
}
.hub-sb-section-toggle:hover { color: var(--text-muted); }
.hub-sb-section-toggle .hub-sb-nav-label { text-transform: uppercase; font-size: 10.5px; letter-spacing: .08em; }
.hub-sb-section-chev { font-size: 9px; margin-left: auto; flex-shrink: 0; transition: transform .15s; }

/* User section */
.hub-sb-user {
    flex-shrink: 0;
    border-top: 1px solid var(--border);
    padding: 10px;
    position: relative;
}
.hub-sb-user-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px;
    border-radius: 6px;
    cursor: pointer;
}
.hub-sb-user-row:hover { background: var(--alt-bg); }
.hub-sb-avatar {
    width: 30px; height: 30px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--orange) 0%, var(--orange-dark) 100%);
    color: white;
    display: grid; place-items: center;
    font-size: 11.5px;
    font-weight: 600;
    flex-shrink: 0;
    letter-spacing: .02em;
}
.hub-sb-avatar-img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; }
.hub-sb-user-meta { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.hub-sb-user-name { font-size: 13px; font-weight: 600; color: var(--text-title); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hub-sb-user-role { font-size: 11.5px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.hub-sb-user-menu {
    position: absolute;
    bottom: 100%;
    left: 10px;
    right: 10px;
    margin-bottom: 4px;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 6px;
    box-shadow: 0 4px 14px rgba(17,24,39,.10);
    padding: 4px;
    z-index: 10;
}
.hub-sb-user-menu hr { border: 0; border-top: 1px solid var(--border); margin: 4px 0; }
.hub-sb-user-menu-item {
    display: flex; align-items: center; gap: 8px;
    width: 100%; text-align: left;
    padding: 7px 8px;
    border-radius: 4px;
    border: 0; background: transparent;
    font-size: 13px;
    color: var(--text-label);
    cursor: pointer;
    text-decoration: none;
    font-family: inherit;
    white-space: nowrap;
}
.hub-sb-user-menu-item:hover { background: var(--alt-bg); color: var(--text-title); text-decoration: none; }
.hub-sb-user-menu-item.danger:hover { background: #fef2f2; color: #b91c1c; }

/* ── Main area ────────────────────────────────────────────── */
.hub-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    background: var(--page-bg);
}

.hub-hdr {
    height: var(--hub-brand-h);
    flex-shrink: 0;
    border-bottom: 1px solid var(--border);
    background:
        linear-gradient(90deg, rgba(255, 255, 255, .82) 0%, rgba(255, 255, 255, .55) 45%, rgba(255, 255, 255, .3) 100%),
        url('/img/top-bar.jpg') center 70% / cover no-repeat;
    display: flex;
    align-items: center;
    padding: 0 20px;
    gap: 16px;
}
.hub-hdr-crumb { display: flex; align-items: center; gap: 8px; min-width: 0; }
.hub-hdr-crumb-label { font-size: 14px; font-weight: 600; color: var(--text-title); }
.hub-hdr-crumb-sep { color: var(--text-disabled); font-size: 13px; }
.hub-hdr-crumb-sub { font-size: 13px; color: var(--text-muted); }
.hub-hdr-actions { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.hub-hdr-signout {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 32px;
    padding: 0 12px;
    border-radius: 6px;
    border: 1px solid var(--border);
    background: transparent;
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    transition: background .12s, color .12s, border-color .12s;
}
.hub-hdr-signout:hover {
    background: #fef2f2;
    color: #b91c1c;
    border-color: #fecaca;
    text-decoration: none;
}

.hub-content {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: var(--hub-content-pad-top) 32px 64px;
}

/* ── Sidebar: rail and drawer ─────────────────────────────────
   Browser zoom shrinks the viewport in CSS px, and the sidebar's 240px do not
   shrink with it — so it takes the largest share of the content box exactly when
   there is least to share. 150% zoom on a 1920x1080 screen leaves 1280x720; on a
   1920 panel already at 125% Windows scaling it leaves 1024x576, i.e. 784px of
   content. Three states:

     >= 1100px    full bar, collapsible to the rail by the header button
     820-1100px   forced to the 64px rail, button hidden (it would toggle nothing)
     < 820px      off-canvas drawer over the content, opened from the hub header

   The rail declarations appear twice below — once keyed on .hub-collapsed (the
   button), once on the 820-1100 band. A CSS selector cannot union a class with a
   media condition, and the alternative, reporting the viewport width to HubLayout
   over JS interop, would put a round-trip on every resize of every circuit. The
   two copies sit side by side so they are edited together.

   Both are scoped >= 820px on purpose: the drawer is always the full 240px, so
   keeping the rail out of that range leaves the drawer block with positioning
   only and nothing to undo. */
@media (min-width: 820px) {
    .hub-sb.hub-collapsed { width: 64px; }
    /* Recolhida, a barra centraliza o símbolo e o flex:1 deixaria de fazer sentido. */
    .hub-sb.hub-collapsed .hub-sb-logo { flex: none; }
    .hub-sb.hub-collapsed .hub-sb-brand { flex-direction: column; height: auto; padding: 12px 0; gap: 8px; }
    .hub-sb.hub-collapsed .hub-sb-collapse { margin: 0 auto; }
    .hub-sb.hub-collapsed .hub-sb-section-label,
    .hub-sb.hub-collapsed .hub-sb-section-toggle,
    .hub-sb.hub-collapsed .hub-sb-nav-label,
    .hub-sb.hub-collapsed .hub-sb-user-meta { display: none; }
    .hub-sb.hub-collapsed .hub-sb-item { padding: 0; justify-content: center; }
    .hub-sb.hub-collapsed .hub-sb-item.active::before { left: 0; }
    .hub-sb.hub-collapsed .hub-sb-user-row { justify-content: center; padding: 4px; }
    .hub-sb.hub-collapsed .hub-sb-user-menu {
        left: 100%; right: auto; bottom: 0;
        margin-left: 8px; margin-bottom: 0;
        width: 200px;
    }
}

@media (min-width: 820px) and (max-width: 1100px) {
    .hub-sb { width: 64px; }
    /* Above 1100px the wordmark goes away because BrandLogo renders MarkOnly, a
       C# decision the button drives. Here the width is forced by the media query,
       so the markup is the full lockup and CSS has to hide the wordmark itself —
       and --h arrives as an inline style, hence the !important. */
    .hub-sb .hub-sb-logo { flex: none; --h: 28px !important; }
    .hub-sb .hub-sb-logo .palavra { display: none; }
    .hub-sb .hub-sb-brand { flex-direction: column; height: auto; padding: 12px 0; gap: 8px; }
    /* The rail is forced at this width — the button would toggle a class that
       changes nothing, which reads as a broken control. */
    .hub-sb .hub-sb-collapse { display: none; }
    .hub-sb .hub-sb-section-label,
    .hub-sb .hub-sb-section-toggle,
    .hub-sb .hub-sb-nav-label,
    .hub-sb .hub-sb-user-meta { display: none; }
    .hub-sb .hub-sb-item { padding: 0; justify-content: center; }
    .hub-sb .hub-sb-item.active::before { left: 0; }
    .hub-sb .hub-sb-user-row { justify-content: center; padding: 4px; }
    .hub-sb .hub-sb-user-menu {
        left: 100%; right: auto; bottom: 0;
        margin-left: 8px; margin-bottom: 0;
        width: 200px;
    }
}

/* Rail tooltip. Built and positioned by js/sidebar-tooltip.js, which appends it to
   <body> — .hub-sb-nav scrolls, so a balloon at left:100% inside it would be clipped
   by the rail. It only ever opens while the rail is showing (the JS reads that off
   the hidden label), so nothing here needs a media query. */
.hub-sb-tip {
    position: fixed;
    left: 0; top: 0;
    z-index: 60;
    max-width: 240px;
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: 6px 10px;
    border-radius: 6px;
    border: 1px solid var(--border);
    background: var(--card-bg);
    box-shadow: 0 4px 14px rgba(17, 24, 39, .12);
    pointer-events: none;
    visibility: hidden;
    opacity: 0;
    transform: translateX(-4px);
    transition: opacity .12s ease, transform .12s ease;
}
.hub-sb-tip.is-open { visibility: visible; opacity: 1; transform: none; }
.hub-sb-tip-section {
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--text-disabled);
    white-space: nowrap;
}
.hub-sb-tip-section[hidden] { display: none; }
.hub-sb-tip-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-title);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Drawer chrome. Both elements are inert until the drawer breakpoint: the toggle
   is display:none, and the backdrop only renders when HubLayout has the drawer
   open, so above 820px neither is reachable. */
.hub-hdr-nav-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--card-bg);
    color: var(--text-muted);
    cursor: pointer;
    transition: color .12s, border-color .12s;
}
.hub-hdr-nav-toggle:hover { color: var(--orange-dark); border-color: var(--orange); }
.hub-sb-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 55;
    border: 0;
    padding: 0;
    background: rgba(17, 24, 39, .38);
    cursor: pointer;
}

@media (max-width: 819.98px) {
    /* Below this the rail's 64px still cost more than the icons are worth, so the
       bar leaves the flex flow entirely and the content gets the full width. */
    .hub-sb {
        position: fixed;
        top: 0; left: 0; bottom: 0;
        width: 240px;
        transform: translateX(-100%);
        transition: transform .18s ease;
        z-index: 60;
        box-shadow: 8px 0 28px rgba(17, 24, 39, .22);
    }
    .hub-root.hub-nav-open .hub-sb { transform: none; }
    .hub-root.hub-nav-open .hub-sb-backdrop { display: block; }
    .hub-hdr-nav-toggle { display: inline-flex; }
    /* Nothing to collapse when the whole bar is off-canvas. */
    .hub-sb .hub-sb-collapse { display: none; }
    .hub-hdr { padding: 0 14px; gap: 10px; }
    .hub-content { padding-left: 18px; padding-right: 18px; }
}

/* Zoom costs height as well: at 576px tall the 84px brand and 84px header are a
   third of the screen before a single row of content renders. */
@media (max-height: 700px) {
    .hub-root {
        --hub-content-pad-top: 16px;
        --hub-brand-h: 60px;
    }
    .hub-content { padding-bottom: 32px; }
}

/* ── Widget: Fila de Jobs (list melhorada) ────────────────── */
.w-job-row {
    padding: 10px 14px;
    border-bottom: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.w-job-row:last-child { border-bottom: none; }
.w-job-main {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}
.w-job-name {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-title);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    min-width: 0;
}
.w-job-badge {
    flex-shrink: 0;
    font-size: 10.5px;
    font-weight: 600;
    padding: 2px 7px;
    border-radius: 999px;
    border: 1px solid;
    white-space: nowrap;
}
.w-job-badge.active  { background: #f0fdf4; border-color: #bbf7d0; color: #15803d; }
.w-job-badge.review  { background: #fff7ed; border-color: #fed7aa; color: var(--orange-dark); }
.w-job-badge.pending { background: #fef9c3; border-color: #fde68a; color: #92400e; }
.w-job-badge         { background: var(--alt-bg); border-color: var(--border); color: var(--text-muted); }
.w-job-meta {
    font-size: 11.5px;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 5px;
}
.w-dot {
    width: 3px; height: 3px;
    border-radius: 50%;
    background: var(--text-disabled);
    flex-shrink: 0;
}

/* ── Widget: Normalização ─────────────────────────────────── */
.w-norm-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11.5px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 999px;
    border: 1px solid;
}
.w-norm-badge.norm-ok   { background: #f0fdf4; border-color: #bbf7d0; color: #15803d; }
.w-norm-badge.norm-pend { background: #fff7ed; border-color: #fed7aa; color: var(--orange-dark); }

.w-norm-empty { align-items: center; text-align: center; }
.w-norm-icon {
    width: 48px; height: 48px;
    margin: 0 auto 12px;
    background: var(--alt-bg);
    border: 1px solid var(--border);
    border-radius: 12px;
    display: grid; place-items: center;
    color: var(--text-muted);
    font-size: 20px;
}
.w-norm-actions { margin-top: auto; padding-top: 14px; }
.w-norm-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--orange);
    text-decoration: none;
    transition: color .12s;
}
.w-norm-btn:hover { color: var(--orange-dark); text-decoration: none; }
.w-norm-btn i { font-size: 11px; transition: transform .12s; }
.w-norm-btn:hover i { transform: translateX(3px); }

/* ============================================================
   KPI Page — filtros, cards, gráfico, tabela
   ============================================================ */

/* Filter bar */
.kpi-filter-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 0 14px;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--border);
    flex-wrap: wrap;
}
.kpi-filter-group {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.kpi-filter-label {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--text-muted);
    white-space: nowrap;
}
.kpi-filter-sep {
    width: 1px;
    height: 24px;
    background: var(--border);
    flex-shrink: 0;
}
.kpi-period-btns { display: flex; gap: 4px; }
.kpi-period-btn {
    height: 28px;
    padding: 0 10px;
    border: 1px solid var(--border);
    background: transparent;
    border-radius: 6px;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--text-label);
    cursor: pointer;
    transition: all .12s;
    font-family: inherit;
}
.kpi-period-btn:hover { background: var(--alt-bg); border-color: var(--border-alt); color: var(--text-title); }
.kpi-period-btn.active { background: #fff7ed; border-color: #fed7aa; color: var(--orange-dark); font-weight: 600; }
.kpi-type-btns { display: flex; gap: 4px; }
.kpi-date-input {
    height: 28px;
    padding: 0 8px;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 12.5px;
    font-family: inherit;
    color: var(--text-label);
    background: var(--card-bg);
    outline: none;
}
.kpi-date-input:focus { border-color: var(--orange); box-shadow: 0 0 0 2px #fff7ed; }
.kpi-select {
    height: 28px;
    padding: 0 24px 0 8px;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 12.5px;
    font-family: inherit;
    color: var(--text-label);
    background: var(--card-bg);
    appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'><path d='M2 4l3 3 3-3' stroke='%236B6B6B' fill='none' stroke-width='1.5' stroke-linecap='round'/></svg>");
    background-repeat: no-repeat;
    background-position: right 8px center;
    outline: none;
    cursor: pointer;
}
.kpi-select:focus { border-color: var(--orange); }
.kpi-apply-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 30px;
    padding: 0 14px;
    background: var(--orange);
    border: none;
    border-radius: 6px;
    color: white;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    margin-left: auto;
    transition: background .12s;
}
.kpi-apply-btn:hover { background: var(--orange-dark); }

/* Snapshot button — outline variant, sits next to refresh (no extra auto-margin) */
.kpi-snapshot-btn {
    margin-left: 8px;
    background: transparent;
    color: var(--orange);
    border: 1px solid var(--orange);
}
.kpi-snapshot-btn:hover { background: rgba(224,120,32,.10); }
.kpi-snapshot-btn:disabled { opacity: .55; cursor: default; }
.kpi-snapshot-ok {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-left: 10px;
    font-size: 12px;
    color: var(--green, #279e62);
}

/* Evolution (snapshots) */
.kpi-team-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 10px;
}
.kpi-team-tab {
    height: 28px;
    padding: 0 12px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--surface, #fff);
    color: var(--text-label);
    font-size: 12px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: background .12s, border-color .12s, color .12s;
}
.kpi-team-tab:hover { border-color: var(--orange); color: var(--orange); }
.kpi-team-tab.active {
    background: var(--orange);
    border-color: var(--orange);
    color: #fff;
}
.kpi-evolution-card { padding: 20px; }
.kpi-evolution-chart-wrap { height: 260px; margin-bottom: 16px; }
.kpi-evolution-table { margin-top: 4px; }

/* KPI Cards */
.kpi-cards-row {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 14px;
    margin-bottom: 8px;
}
.kpi-card {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 16px;
}
.kpi-card-icon {
    width: 40px; height: 40px;
    border-radius: 10px;
    display: grid; place-items: center;
    font-size: 18px;
    flex-shrink: 0;
}
.kpi-icon-blue   { background: #eff6ff; color: #1d4ed8; }
.kpi-icon-orange { background: #fff7ed; color: var(--orange-dark); }
.kpi-icon-green  { background: #f0fdf4; color: #15803d; }
.kpi-icon-red    { background: #fef2f2; color: #b91c1c; }
.kpi-icon-purple { background: #faf5ff; color: #7c3aed; }
.kpi-icon-brand  { background: var(--nnm-card, #f0ede6); color: var(--orange-dark); }
.kpi-card-body { min-width: 0; flex: 1; }
.kpi-card-label { font-size: 11.5px; font-weight: 600; color: var(--text-muted); margin-bottom: 4px; }
.kpi-card-value { font-size: 22px; font-weight: 700; color: var(--text-title); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.kpi-card-delta { font-size: 11px; font-weight: 500; margin-top: 4px; display: flex; align-items: center; gap: 3px; }
.kpi-card-delta.positive { color: #15803d; }
.kpi-card-delta.negative { color: #b91c1c; }
.kpi-card-sub { font-size: 11px; color: var(--text-muted); margin-top: 4px; }

/* Table */
.kpi-search {
    height: 28px;
    padding: 0 10px;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 12.5px;
    font-family: inherit;
    color: var(--text-label);
    background: var(--card-bg);
    outline: none;
    min-width: 180px;
}
.kpi-search:focus { border-color: var(--orange); box-shadow: 0 0 0 2px #fff7ed; }

.kpi-table-filter {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: var(--alt-bg);
    border: 1px solid var(--border);
    border-radius: 10px 10px 0 0;
    flex-wrap: wrap;
    margin-top: 10px;
}
.kpi-table-filter + .card { border-radius: 0 0 10px 10px; border-top: none; }

.kpi-clear-btn {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 0 10px;
    height: 28px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--card-bg);
    color: var(--text-muted);
    font-size: 12px;
    font-family: inherit;
    cursor: pointer;
    transition: color .15s, border-color .15s;
}
.kpi-clear-btn:hover { color: #ef4444; border-color: #ef4444; }

/* Faturamento (Finance) — bulk-select bar + approve/reject actions. Reuses the hub's
   established green (#2e7d32, same as .btn-task-save) and --status-error red instead of
   raw Bootstrap colors, per earlier feedback that vivid greens/reds read as too loud. */
.fat-bulk-bar { display: flex; align-items: center; gap: 12px; padding: 10px 14px; background: var(--alt-bg); border: 1px solid var(--border); border-radius: 10px; margin-bottom: 12px; flex-wrap: wrap; }
.fat-bulk-count { font-size: 13px; font-weight: 600; color: var(--text-title); }
.fat-btn-approve { background: #2e7d32; border-color: #2e7d32; color: #fff; }
.fat-btn-approve:hover:not(:disabled) { background: #25642a; border-color: #25642a; }
.fat-btn-reject { background: var(--status-error); border-color: var(--status-error); color: #fff; }
.fat-btn-reject:hover:not(:disabled) { background: #8f1515; border-color: #8f1515; }
.fat-btn-approve:disabled, .fat-btn-reject:disabled { opacity: .5; }
.fat-th-check { width: 36px; text-align: center; }
.fat-td-num { text-align: right; white-space: nowrap; }
/* `.cr-table thead th` sets text-align:left and outranks .fat-td-num on specificity, so
   the money headers sat left while their figures sat right. Re-align the header over the
   column it labels. */
.cr-table thead th.fat-td-num { text-align: right; }
.fat-row-actions { display: flex; gap: 6px; }
.fat-group-row { cursor: pointer; background: var(--alt-bg); }
.fat-group-row:hover { background: var(--border); }
.fat-group-chevron { display: inline-flex; color: var(--text-muted); margin-right: 6px; transition: transform .15s ease; }
.fat-group-chevron.expanded { transform: rotate(90deg); }
.fat-group-name { font-weight: 700; color: var(--text-title); }
.fat-group-count { font-size: 11.5px; color: var(--text-muted); margin-left: 8px; }
/* Cliente > Carteira > Mês. Each level steps in so the tree reads from the indentation
   alone, not just from the chevron. Rows get lighter as they go down: the client band is
   the heaviest, the month leaf sits on the plain card background. */
.fat-carteira-row { cursor: pointer; background: color-mix(in srgb, var(--alt-bg) 55%, transparent); }
.fat-carteira-row:hover { background: var(--alt-bg); }
.fat-indent-1 { padding-left: 26px; }
.fat-indent-2 { padding-left: 50px; }
.fat-level-name { font-weight: 600; color: var(--text-title); }
.fat-mes-name { color: var(--text-title); font-variant-numeric: tabular-nums; }
.fat-tri-cell { color: var(--text-muted); white-space: nowrap; }

/* Faturamento — CSV import toolbar, result banner, and log modals. */
.fat-import-bar { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
.fat-upload-btn { position: relative; overflow: hidden; display: inline-flex; align-items: center; gap: 6px; }
.fat-upload-btn.disabled { opacity: .6; pointer-events: none; }
.fat-upload-btn input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.fat-import-result { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.fat-log-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.fat-log-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--card-bg); flex-wrap: wrap; }
.fat-log-item-main { display: flex; flex-direction: column; gap: 2px; }
.fat-log-file { font-weight: 600; color: var(--text-title); font-size: 13.5px; }
.fat-log-date { font-size: 12px; color: var(--text-muted); }
.fat-log-item-counts { display: flex; align-items: center; gap: 10px; }
.fat-log-count-ok { font-size: 12px; font-weight: 600; color: #2e7d32; }
.fat-log-count-err { font-size: 12px; font-weight: 600; color: var(--status-error); }
.fat-log-summary { font-size: 13px; color: var(--text-label); margin-bottom: 12px; }
.fat-log-row-error { background: #fef2f2; }
.kpi-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.kpi-table thead tr { border-bottom: 1px solid var(--border); background: var(--alt-bg); }

/* A .card carrying a table straight to its edges is overflow:hidden so the table
   corners follow the card's radius. That also means a table wider than the content
   box is silently clipped — the right-hand columns become unreachable, not merely
   cramped, because .hub-content is overflow-x:hidden too and there is no scroll box
   anywhere in between. Browser zoom is what turns that from a narrow-window edge
   case into a daily one (150% on a 1920 panel already at 125% Windows scaling
   leaves ~1024 CSS px). overflow-x:auto clips exactly the same way — overflow-y
   computes to auto alongside it, so the radius still holds — but hands the user a
   scrollbar instead of hiding the data. Use it in place of style="overflow:hidden"
   on any card whose child is a table. */
.kpi-table-scroll { overflow-x: auto; }

/* ── Compliance: sticky filter bar + table header while the page (.hub-content) scrolls.
   Scoped via opt-in classes so other kpi-table usages are unaffected.
   The wrapping card must drop overflow:hidden, otherwise it becomes the sticky
   scroll container and the header would scroll away with it. */
.kpi-card-sticky { overflow: visible; }
/* Sticky pins below .hub-content's top padding, so cancel that padding out to pin the
   filter flush right under the hub header (the top bar). The padding is a variable
   because the short-viewport block in the hub layout section shrinks it. */
.kpi-table-filter.is-sticky {
    position: sticky;
    top: calc(var(--hub-content-pad-top) * -1);
    z-index: 4;
    transition: border-radius .12s ease;
}
/* `is-pinned` is toggled by js/sticky-headers.js once the bar reaches the top. */
.kpi-table-filter.is-sticky.is-pinned { border-radius: 0; }
.kpi-table--sticky thead th {
    position: sticky;
    top: calc(50px - var(--hub-content-pad-top)); /* filter-bar height, less the padding comp. */
    z-index: 3;
    background: var(--alt-bg);                 /* th needs its own bg to cover scrolled rows */
    box-shadow: inset 0 -1px 0 var(--border);  /* border-collapse drops the th border once sticky */
}

/* Compliance → Detalhamento: this table has grown too wide (13 columns) for
   .hub-content's overflow-x:hidden — without a scroll box of its own, the rightmost
   columns are silently clipped and unreachable, not just visually cramped. Self-contained
   scroll (own height + own sticky thead) instead of the page-scroll-driven sticky above,
   so both a horizontal scrollbar and a sticky header are available on narrow screens. */
.cmp-det-scroll {
    overflow: auto;
    max-height: 65vh;
}
/* Detalhamento is fixed at 10 rows/page (see _detPageSize), so it never needs a
   vertical scrollbar — only horizontal, for the 13-column width on narrow screens. */
.cmp-det-scroll--paged {
    max-height: none;
    overflow-y: visible;
}
.cmp-det-scroll thead th:first-child { border-top-left-radius: 8px; }
.cmp-det-scroll thead th:last-child { border-top-right-radius: 8px; }
.cmp-det-scroll thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--alt-bg);
    box-shadow: inset 0 -1px 0 var(--border);
}
.kpi-table th {
    padding: 10px 14px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--text-muted);
    text-align: left;
    white-space: nowrap;
}
.kpi-table th.num { text-align: right; }
.kpi-th-sortable { cursor: pointer; user-select: none; }
.kpi-th-sortable:hover { color: var(--text-title); }
.kpi-table tbody tr { border-bottom: 1px solid var(--border); transition: background .08s; cursor: default; }
.kpi-table tbody tr:last-child { border-bottom: none; }
.kpi-table tbody tr:hover { background: var(--alt-bg); }
.kpi-table td { padding: 12px 14px; }
.kpi-table td.num { text-align: right; }
.kpi-td-name { font-weight: 500; color: var(--text-title); }
.kpi-td-muted { color: var(--text-muted); font-size: 12.5px; }
.kpi-td-num { font-variant-numeric: tabular-nums; font-weight: 500; color: var(--text-title); }
.kpi-time-badge {
    display: inline-flex;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 4px;
    background: #fff7ed;
    border: 1px solid #fed7aa;
    color: var(--orange-dark);
    white-space: nowrap;
}

/* Compliance → collapsible left filter sidebar (replaces the old horizontal
   kpi-table-filter bar on this page only — other kpi-table-filter usages are untouched). */
.cmp-body {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    margin-top: 10px;
}
/* Sidebar is first in markup (so screen readers/keyboard tab order hit it
   consistently), but visually pinned to the right of the main content. */
.cmp-filter-sidebar {
    order: 2;
    flex-shrink: 0;
    width: 240px;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 12px;
    position: sticky;
    top: calc(var(--hub-content-pad-top) * -1);   /* offsets .hub-content's padding-top, same trick as .kpi-table-filter.is-sticky */
    z-index: 5;                       /* stays above chart canvases/cards behind it whenever it overlaps */
    isolation: isolate;
    box-shadow: 0 2px 10px rgba(0,0,0,.10);
    transition: width .15s ease, padding .15s ease;
}
.cmp-filter-sidebar.is-collapsed {
    width: 40px;
    padding: 12px 8px;
}
.cmp-filter-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}
.cmp-filter-sidebar.is-collapsed .cmp-filter-head { justify-content: center; }
.cmp-filter-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-title);
}
.cmp-filter-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--card-bg);
    color: var(--text-muted);
    cursor: pointer;
    flex-shrink: 0;
    transition: color .12s, border-color .12s;
}
.cmp-filter-toggle:hover { color: var(--orange-dark); border-color: var(--orange); }
.cmp-filter-body {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 12px;
    max-height: calc(100vh - 140px); /* keeps the whole sticky sidebar within the viewport as filters accumulate */
    overflow-y: auto;
    overflow-x: hidden;
}
.cmp-filter-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 6px;
    margin: -6px;
    border-radius: 6px;
    transition: background-color .15s ease;
}
.cmp-filter-group.is-active {
    background: #FBE8D3;
}
.cmp-filter-body .kpi-select,
.cmp-filter-body .kpi-search {
    width: 100%;
}
.cmp-filter-clear {
    width: 100%;
    justify-content: center;
}
.cmp-main {
    order: 1;
    flex: 1;
    min-width: 0;
}

/* ============================================================
   NNM Dashboard
   ============================================================ */
.nnm-dash {
    --nnm-card:   #f0ede6;
    --nnm-neu:    3px 3px 8px rgba(0,0,0,.09), -1px -1px 4px rgba(255,255,255,.6);
    --nnm-pos:    #4a7a2a;
    --nnm-neg:    #b04040;
    --nnm-orange: #e07820;
    --nnm-border: rgba(0,0,0,.08);
    --nnm-muted:  #b0a898;
    --nnm-text2:  #7a6e60;
}

/* ── Filter bar ── */
.nnm-filters {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 18px;
}

.nnm-sel {
    appearance: none;
    background: var(--nnm-card);
    border: none;
    border-radius: 10px;
    padding: 8px 28px 8px 12px;
    font-size: 12px;
    font-weight: 500;
    color: var(--nnm-text2);
    cursor: pointer;
    box-shadow: var(--nnm-neu);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23b0a898'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 9px center;
    min-width: 130px;
    outline: none;
}
.nnm-sel:focus { outline: 2px solid var(--nnm-orange); }

.nnm-clear-btn {
    background: var(--nnm-card);
    border: none;
    border-radius: 10px;
    padding: 8px 12px;
    color: var(--nnm-neg);
    cursor: pointer;
    font-size: 13px;
    box-shadow: var(--nnm-neu);
}
.nnm-reload-btn {
    background: var(--nnm-card, #f0ede6);
    border: none;
    border-radius: 10px;
    padding: 8px 12px;
    color: var(--nnm-orange, #e07820);
    cursor: pointer;
    font-size: 14px;
    box-shadow: var(--nnm-neu, 3px 3px 8px rgba(0,0,0,.09), -1px -1px 4px rgba(255,255,255,.6));
}
.nnm-reload-btn:disabled { opacity: .45; cursor: default; }
.nnm-count {
    font-size: 11px;
    color: var(--nnm-text2);
    margin-left: auto;
    white-space: nowrap;
}

/* ── KPI row ── */
.nnm-kpi-row {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 10px;
    margin-bottom: 12px;
}
@media (max-width: 1340px) { .nnm-kpi-row { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 700px)  { .nnm-kpi-row { grid-template-columns: repeat(2, 1fr); } }

.nnm-kpi-card {
    background: var(--nnm-card);
    border-radius: 14px;
    padding: 14px 16px;
    box-shadow: var(--nnm-neu);
    min-height: 96px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.nnm-kpi-label {
    font-size: 10px;
    font-weight: 600;
    color: var(--nnm-text2);
    letter-spacing: .02em;
    line-height: 1.3;
}
.nnm-kpi-value {
    font-size: 18px;
    font-weight: 700;
    line-height: 1.1;
    margin-top: 6px;
    color: var(--text-main);
    font-variant-numeric: tabular-nums;
}
.nnm-kpi-value.pos { color: var(--nnm-pos); }
.nnm-kpi-value.neg { color: var(--nnm-neg); }
.nnm-kpi-sub {
    font-size: 10px;
    color: var(--nnm-muted);
    margin-top: 3px;
}

/* ── Charts ── */
.nnm-charts-row {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 10px;
    margin-bottom: 12px;
}
@media (max-width: 964px) { .nnm-charts-row { grid-template-columns: 1fr; } }

.nnm-panel {
    background: var(--nnm-card);
    border-radius: 14px;
    padding: 16px 18px;
    box-shadow: var(--nnm-neu);
    /* Grid items default to min-width:auto, which floors the column at the canvas's
       current min-content width — once Chart.js grows the canvas (e.g. sidebar
       collapsed, more room), the column can never shrink back below that size, even
       after the container narrows again. min-width:0 lets the track — and the chart
       inside it — actually shrink. */
    min-width: 0;
}
.nnm-panel-lbl {
    display: block;
    font-size: 10px;
    font-weight: 600;
    color: var(--nnm-text2);
    letter-spacing: .04em;
    text-transform: uppercase;
    margin-bottom: 12px;
}
.nnm-chart-wrap {
    position: relative;
    height: 260px;
}

/* ── Compliance overview (bands: Clientes / KYC / Suitability) ── */
/* Shrinks just the risk/country/wealth trio in the KYC band — other .nnm-chart-wrap
   usages (this page's KYC-month/Vencimentos charts, other dashboards) stay at 260px. */
.cmp-chart-wrap-sm { height: 180px; }

/* País (left) spans both rows to match the combined height of risco + patrimônio (right) */
.cmp-charts-grid-2col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 10px;
    margin-bottom: 12px;
}
@media (max-width: 964px) { .cmp-charts-grid-2col { grid-template-columns: 1fr; grid-template-rows: none; } }
.cmp-chart-span-2 { grid-row: span 2; display: flex; flex-direction: column; }
.cmp-chart-wrap-full { height: auto; min-height: 0; flex: 1; }
@media (max-width: 964px) { .cmp-chart-span-2 { grid-row: auto; } .cmp-chart-wrap-full { height: 260px; flex: none; } }

.cmp-tabs {
    display: flex;
    gap: 24px;
    margin: 4px 0 20px;
    border-bottom: 1px solid rgba(0, 0, 0, .08);
}
.cmp-tab {
    background: none;
    border: none;
    padding: 10px 2px;
    font-size: 14px;
    font-weight: 600;
    color: #b0a898;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: color .15s, border-color .15s;
}
.cmp-tab:hover { color: #7a6e60; }
.cmp-tab.active {
    color: #3a3228;
    border-bottom-color: #e07820;
}

.cmp-section { margin-bottom: 22px; }
.cmp-section-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}
.cmp-section-head span {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--nnm-text2);
    white-space: nowrap;
}
.cmp-section-head::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--nnm-border);
}

/* "Documentos Regulatórios BR" — bordered container grouping several sub-bands
   (Suitability/Enquadramento/Ficha/Política), each keeping its own header/cards. */
.cmp-doc-group {
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 16px;
    border: 1px solid var(--nnm-border);
    border-radius: 12px;
}
.cmp-subsection:not(:last-child) {
    padding-bottom: 18px;
    border-bottom: 1px dashed var(--nnm-border);
}
.cmp-subsection-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}
.cmp-subsection-head span {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .04em;
    color: var(--nnm-text2);
    white-space: nowrap;
}
.cmp-subsection .cmp-cards-3,
.cmp-subsection .cmp-cards-4 {
    margin-bottom: 0;
}
.cmp-section-head .count {
    background: var(--alt-bg);
    border: 1px solid var(--border);
    color: var(--text-muted);
    padding: 0 6px;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
    white-space: nowrap;
}

.cmp-clientes {
    display: grid;
    grid-template-columns: minmax(200px, 1fr) 2.6fr;
    gap: 10px;
}
@media (max-width: 964px) { .cmp-clientes { grid-template-columns: 1fr; } }

.cmp-hero {
    background: var(--nnm-card);
    border-radius: 10px;
    padding: 12px 16px;
    box-shadow: var(--nnm-neu);
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    border-left: 3px solid var(--nnm-orange);
}
.cmp-hero-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--nnm-text2);
}
.cmp-hero-value {
    font-size: 30px;
    font-weight: 700;
    line-height: 1;
    color: var(--text-main);
    font-variant-numeric: tabular-nums;
}

.cmp-sats .nnm-kpi-card {
    padding: 10px 12px;
    min-height: 72px;
    border-radius: 10px;
}
.cmp-sats .nnm-kpi-value {
    font-size: 15px;
    margin-top: 4px;
}
.cmp-sats .nnm-kpi-sub {
    margin-top: 2px;
}

/* Cockpit > Operações > Custódias: smaller cards to fit the AuM/AuA/AuC additions
   alongside the original four without wrapping to a second row. */
.ops-kpi-row {
    grid-template-columns: repeat(7, 1fr);
}
.ops-kpi-row .nnm-kpi-card {
    padding: 10px 12px;
    min-height: 72px;
    border-radius: 10px;
}
.ops-kpi-row .nnm-kpi-value {
    font-size: 15px;
    margin-top: 4px;
}
.ops-kpi-row .nnm-kpi-sub {
    margin-top: 2px;
}
@media (max-width: 1340px) { .ops-kpi-row { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 700px)  { .ops-kpi-row { grid-template-columns: repeat(2, 1fr); } }

/* With a segment selected (AuM/AuA/AuC) the three per-segment cards are gone and only the
   original four remain. Higher specificity than the rules above, so the narrow breakpoint
   needs restating here. */
.ops-kpi-row.ops-kpi-row-4 {
    grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 700px) { .ops-kpi-row.ops-kpi-row-4 { grid-template-columns: repeat(2, 1fr); } }

.cmp-sats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(2, 1fr);
    grid-auto-flow: column;
    gap: 10px;
}
@media (max-width: 700px) {
    .cmp-sats {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: none;
        grid-auto-flow: row;
    }
}

.cmp-region-flags {
    display: flex;
    gap: 8px;
    margin-top: 2px;
}
.cmp-flag-btn {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    opacity: 1;
    filter: grayscale(0);
    transition: opacity .15s ease, filter .15s ease;
}
.cmp-flag-btn svg {
    width: 22px;
    height: 15px;
    display: block;
    border-radius: 2px;
    box-shadow: 0 0 0 1px rgba(0,0,0,.15);
}
.cmp-flag-btn.dimmed {
    opacity: .3;
    filter: grayscale(1);
}

.cmp-cards-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-bottom: 12px;
}
@media (max-width: 700px) { .cmp-cards-3 { grid-template-columns: 1fr; } }

.cmp-cards-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin-bottom: 12px;
}
@media (max-width: 1044px) { .cmp-cards-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .cmp-cards-4 { grid-template-columns: 1fr; } }

.cmp-cards-5 {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
    margin-bottom: 12px;
}
@media (max-width: 1044px) { .cmp-cards-5 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .cmp-cards-5 { grid-template-columns: 1fr; } }

/* Compliance dashboard: smaller KPI cards than the shared .nnm-kpi-card default */
.cmp-cards-3 .nnm-kpi-card,
.cmp-cards-4 .nnm-kpi-card,
.cmp-cards-5 .nnm-kpi-card,
.cmp-cards-wrap .nnm-kpi-card {
    padding: 10px 12px;
    min-height: 72px;
    border-radius: 10px;
}
.cmp-cards-3 .nnm-kpi-value,
.cmp-cards-4 .nnm-kpi-value,
.cmp-cards-5 .nnm-kpi-value,
.cmp-cards-wrap .nnm-kpi-value {
    font-size: 15px;
    margin-top: 4px;
}
.cmp-cards-3 .nnm-kpi-sub,
.cmp-cards-4 .nnm-kpi-sub,
.cmp-cards-5 .nnm-kpi-sub,
.cmp-cards-wrap .nnm-kpi-sub {
    margin-top: 2px;
}

/* Variable-count card row (e.g. Ramo de Atuação groups) — same per-card width as
   .cmp-cards-3/-4 (equal columns), but wraps to as many rows as needed instead of
   forcing a fixed grid (which leaves narrow implicit columns when count > 6). */
.cmp-cards-wrap {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 10px;
    margin-bottom: 12px;
}

/* "Caution tape" deprecation banner — hazard-stripe border around a bold warning message. */
.caution-banner {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 12px 16px;
    margin-bottom: 16px;
    background: #1a1a1a;
    color: #ffcc00;
    font-weight: 700;
    letter-spacing: .02em;
    border-radius: 6px;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-image: repeating-linear-gradient(
        45deg,
        #1a1a1a 0 14px,
        #ffcc00 14px 28px
    ) 10;
}
.caution-banner span {
    background: #1a1a1a;
    padding: 2px 14px;
}
.caution-banner i { margin-right: 8px; color: #ffcc00; }

.cmp-charts-hint {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0 0 12px;
    font-size: 11.5px;
    color: var(--nnm-text2);
}
.cmp-charts-hint .bi { color: var(--nnm-orange); }

/* ── Info popover (calculation assumptions) ── */
.info-pop {
    position: relative;
    display: inline-flex;
    vertical-align: middle;
}
.info-pop-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    padding: 0;
    border: none;
    border-radius: 999px;
    background: transparent;
    color: var(--nnm-text2);
    font-size: 13px;
    line-height: 1;
    cursor: pointer;
    transition: color .15s, background .15s;
}
.info-pop-btn:hover,
.info-pop-btn.active {
    color: var(--nnm-orange);
    background: rgba(224, 120, 32, .12);
}
.info-pop-backdrop {
    position: fixed;
    inset: 0;
    z-index: 40;
    background: transparent;
}
.info-pop-panel {
    position: absolute;
    top: calc(100% + 8px);
    z-index: 41;
    width: 320px;
    max-width: min(90vw, 440px);
    height: auto;
    max-height: min(70vh, 440px);
    /* Reset text-flow props that may be inherited from the host container
       (e.g. .cmp-section-head span sets white-space:nowrap/uppercase, which
       would leak in via the descendant selector and stop the body wrapping). */
    white-space: normal;
    text-transform: none;
    letter-spacing: normal;
    text-align: left;
    background: var(--nnm-card);
    border: 1px solid var(--nnm-border);
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .14);
    overflow: hidden;
    animation: modalIn .12s ease;
}
.info-pop-left  { left: 0; }
.info-pop-right { right: 0; }
.info-pop-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 9px 11px;
    border-bottom: 1px solid var(--nnm-border);
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--nnm-text2);
}
.info-pop-x {
    border: none;
    background: transparent;
    color: var(--nnm-muted);
    cursor: pointer;
    font-size: 12px;
    line-height: 1;
    padding: 2px;
}
.info-pop-x:hover { color: var(--text-main); }
.info-pop-body {
    padding: 11px;
    font-size: 11px;
    line-height: 1.45;
    color: var(--nnm-text2);
    max-height: min(60vh, 380px);
    overflow-y: auto;
    overflow-wrap: break-word;
}
.info-pop-body p { margin: 0 0 7px; }
.info-pop-body p:last-child { margin-bottom: 0; }
.info-pop-body strong { color: var(--text-main); font-weight: 600; }
.info-pop-stats {
    list-style: none;
    margin: 10px 0 0;
    padding: 10px 0 0;
    border-top: 1px solid var(--nnm-border);
}
.info-pop-stats li {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 3px 0;
}
.info-pop-stats li span { color: var(--nnm-text2); }
.info-pop-stats li strong {
    color: var(--text-main);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* ── Enquadramento — profile chips ── */
.enq-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.enq-chip {
    background: var(--nnm-card);
    border-radius: 999px;
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-main);
    box-shadow: var(--nnm-neu);
    border-left: 3px solid var(--nnm-orange);
}

/* ── Bottom row ── */
.nnm-bottom-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
@media (max-width: 964px) { .nnm-bottom-row { grid-template-columns: 1fr; } }

/* ── Motivos ── */
.nnm-motivos-panel { }
.nnm-motivos-scroll {
    max-height: 300px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--nnm-muted) transparent;
}
.nnm-motivo-section {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    padding-bottom: 5px;
    border-bottom: 1px solid var(--nnm-border);
    margin-bottom: 8px;
}
.nnm-motivo-section.pos { color: var(--nnm-pos); }
.nnm-motivo-section.neg { color: var(--nnm-neg); margin-top: 0; }
.nnm-motivo-section + .nnm-motivo-section,
.nnm-motivo-row ~ .nnm-motivo-section { margin-top: 14px; }

.nnm-motivo-empty {
    font-size: 11px;
    color: var(--nnm-muted);
    margin-bottom: 8px;
}
.nnm-motivo-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}
.nnm-motivo-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
}
.nnm-motivo-nome {
    flex: 1;
    font-size: 11px;
    color: var(--text-main);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.nnm-motivo-bar-wrap {
    flex: 2;
    background: rgba(0,0,0,.07);
    border-radius: 3px;
    height: 5px;
}
.nnm-motivo-bar-fill {
    height: 5px;
    border-radius: 3px;
}
.nnm-motivo-val {
    font-size: 10px;
    font-weight: 600;
    min-width: 76px;
    text-align: right;
    font-variant-numeric: tabular-nums;
}
.nnm-motivo-val.pos { color: var(--nnm-pos); }
.nnm-motivo-val.neg { color: var(--nnm-neg); }

/* ── Tabela ── */
.nnm-tabela-panel { overflow: hidden; display: flex; flex-direction: column; }
.nnm-tabela-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--nnm-border);
    margin-bottom: 0;
    flex-shrink: 0;
}
.nnm-tabela-count {
    font-weight: 400;
    color: var(--nnm-muted);
    margin-left: 8px;
}
.nnm-busca {
    background: rgba(0,0,0,.04);
    border: 1px solid var(--nnm-border);
    border-radius: 8px;
    padding: 5px 10px;
    font-size: 11px;
    color: var(--text-main);
    width: 160px;
    outline: none;
}
.nnm-busca:focus { border-color: var(--nnm-orange, #e07820); }

.nnm-tabela-scroll {
    overflow: auto;
    max-height: 300px;
    scrollbar-width: thin;
    scrollbar-color: var(--nnm-muted) transparent;
    flex: 1;
}
.nnm-table {
    width: 100%;
    border-collapse: collapse;
}
.nnm-table thead th {
    position: sticky;
    top: 0;
    background: #f8f7f4;
    padding: 9px 14px;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--nnm-muted);
    border-bottom: 1px solid var(--nnm-border);
    white-space: nowrap;
}
.nnm-th-num { text-align: right; }
.nnm-table tbody tr {
    border-bottom: 1px solid var(--nnm-border);
    transition: background .1s;
}
.nnm-table tbody tr:hover { background: rgba(0,0,0,.02); }
.nnm-table td { padding: 8px 14px; font-size: 11px; white-space: nowrap; }
.nnm-td-nome  { font-weight: 600; }
.nnm-td-muted { color: var(--nnm-text2); }
.nnm-td-num   { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.nnm-td-num.pos { color: var(--nnm-pos); }
.nnm-td-num.neg { color: var(--nnm-neg); }
.nnm-td-empty { text-align: center; color: var(--nnm-muted); padding: 20px; }

.nnm-td-nnm {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}
.nnm-td-bar {
    background: rgba(0,0,0,.08);
    border-radius: 3px;
    height: 4px;
    width: 60px;
    flex-shrink: 0;
}
.nnm-td-bar-fill {
    height: 4px;
    border-radius: 3px;
    max-width: 100%;
}
.nnm-td-bar-fill.pos { background: #7a9a52; }
.nnm-td-bar-fill.neg { background: #c06060; }

/* ── Pagination ── */
.nnm-pager {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 14px;
    border-top: 1px solid var(--nnm-border);
    flex-shrink: 0;
}
.nnm-pager-info { font-size: 11px; color: var(--nnm-muted); }
.nnm-pager-btns { display: flex; gap: 4px; }
.nnm-pager-btns button {
    background: var(--nnm-card);
    border: 1px solid var(--nnm-border);
    border-radius: 8px;
    padding: 4px 9px;
    font-size: 13px;
    cursor: pointer;
    color: var(--nnm-text2);
    box-shadow: var(--nnm-neu);
    line-height: 1;
}
.nnm-pager-btns button:disabled {
    opacity: .4;
    cursor: default;
    box-shadow: none;
}

/* ── Empty / error ── */
.nnm-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 50vh;
    gap: 12px;
    color: var(--nnm-muted);
    font-size: 13px;
}
.kpi-empty { padding: 32px; text-align: center; color: var(--text-muted); font-size: 13px; }

/* ============================================================
   Not Found (404)
   ============================================================ */
.not-found-page {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-height: 100vh;
    padding: 2rem;
    background: var(--page-bg);
}
.not-found-code {
    font-size: 88px;
    font-weight: 700;
    line-height: 1;
    color: var(--orange);
    letter-spacing: -.03em;
}
.not-found-page h1 {
    font-size: 22px;
    font-weight: 600;
    color: var(--text-title);
    margin: 12px 0 4px;
}
.not-found-page p {
    color: var(--text-muted);
    font-size: 14px;
    margin: 0 0 20px;
    max-width: 380px;
}

/* ============================================================
   Agenda
   ============================================================ */

/* Accent secundário (sálvia) para eventos de reunião — só nesta página. Todo o
   resto do redesign (espaçamento generoso, cards elevados, cantos maiores)
   também é escopado aqui via .agenda-page para não vazar para o resto do Hub,
   que continua com a densidade/paleta padrão. */
.agenda-page {
    --agenda-accent-2: #6f8c5a;
    --agenda-accent-2-dark: #5b7548;
    --agenda-accent-2-tint: #eef2ea;
    --agenda-accent-2-text: #445c34;
    --agenda-radius-lg: 20px;
    --agenda-radius-md: 14px;
    --agenda-shadow: 0 2px 10px rgba(28,46,26,.08);
}
.agenda-page .dash-head { margin-bottom: 14px; }
.agenda-page .dash-greet h1.ttl-brand { font-size: 34px; }
.agenda-page .dash-date {
    font-family: inherit;
    background: transparent;
    border: none;
    padding: 0;
    font-size: 14px;
    color: var(--text-muted);
}

.agenda-nav {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}
.agenda-legend {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
}
.agenda-legend-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    color: var(--text-secondary);
}
/* A plain dot, not an icon-in-a-circle — matches the mockup's minimal legend. */
.agenda-legend-swatch {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-flex;
    flex-shrink: 0;
}
.agenda-legend-swatch.bday { background: var(--orange); }
.agenda-legend-swatch.meeting { background: var(--agenda-accent-2); }
.agenda-legend-swatch.asset { background: var(--text-secondary); }
.agenda-legend-swatch i, .agenda-legend-swatch .asset-icon, .agenda-legend-swatch .meeting-icon-img { display: none; }
.agenda-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}
.agenda-toolbar-left { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.agenda-toolbar .bday-filters { margin-bottom: 0; }
.agenda-toolbar-search.pv-search { flex: 1 1 180px; max-width: 260px; }
.agenda-main-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 22px;
    align-items: start;
}
/* Carousel transition when the calendar period changes. Both the outgoing (previous)
   and incoming (current) period share the same grid cell so the container's height
   always matches whichever is tallest — plain position:absolute would collapse it.
   Prev/Next: the incoming period slides in from one side while the outgoing period
   slides fully out the other, like a real carousel. Switching view or jumping via
   the mini calendar has no outgoing panel — the single slide just fades in place. */
.agenda-main-calendar { overflow: hidden; }
.agenda-calendar-card {
    background: var(--card-bg);
    border-radius: var(--agenda-radius-lg);
    box-shadow: var(--agenda-shadow);
    padding: 20px 20px 12px;
}
.calendar-carousel { display: grid; }
.calendar-slide {
    grid-area: 1 / 1;
    min-width: 0;
    animation-duration: .9s;
    animation-timing-function: cubic-bezier(.22, 1, .36, 1);
    animation-fill-mode: both;
}
.cal-fade       { animation-name: calendarFadeIn; }
.cal-enter-next { animation-name: calendarEnterFromRight; z-index: 1; }
.cal-enter-prev { animation-name: calendarEnterFromLeft;  z-index: 1; }
.cal-exit-next  { animation-name: calendarExitToLeft; }
.cal-exit-prev  { animation-name: calendarExitToRight; }
@keyframes calendarFadeIn {
    from { opacity: 0; transform: translateY(4px) scale(.99); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes calendarEnterFromRight {
    from { transform: translateX(100%); }
    to   { transform: translateX(0); }
}
@keyframes calendarEnterFromLeft {
    from { transform: translateX(-100%); }
    to   { transform: translateX(0); }
}
@keyframes calendarExitToLeft {
    from { transform: translateX(0); }
    to   { transform: translateX(-100%); }
}
@keyframes calendarExitToRight {
    from { transform: translateX(0); }
    to   { transform: translateX(100%); }
}
@media (max-width: 964px) { .agenda-main-grid { grid-template-columns: 1fr; } }
/* Sidebar is a plain flex column — each item inside (next-meeting, mini-cal,
   birthdays) is its own elevated card, so there's no card-inside-a-card. */
.agenda-sidebar {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.agenda-sidebar h3 {
    margin: 0 0 12px;
    font-size: 14px;
    color: var(--text-title);
}
.upcoming-bday-item { display: flex; align-items: center; gap: 10px; padding: 8px 0; }
.upcoming-bday-item + .upcoming-bday-item { border-top: 1px solid var(--border); }
.agenda-nav-btns {
    display: flex;
    align-items: center;
    gap: 6px;
}
.agenda-nav-btn {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 999px;
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--text-secondary);
    font-size: 13px;
    transition: background .15s;
}
.agenda-nav-btn:hover { background: var(--alt-bg); }
.agenda-toolbar-right { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }

/* "Próxima reunião" — card de destaque no topo da sidebar (Semana e Dia). */
.agenda-next-meeting-card {
    background: var(--agenda-accent-2-dark);
    border-radius: var(--agenda-radius-lg);
    padding: 22px 22px 20px;
    color: #fff;
    box-shadow: var(--agenda-shadow);
}
.agenda-next-meeting-label {
    font-size: 11px;
    letter-spacing: .1em;
    text-transform: uppercase;
    opacity: .85;
}
.agenda-next-meeting-title {
    font-family: 'Arquitecta', 'Segoe UI', system-ui, sans-serif;
    font-size: 22px;
    line-height: 1.2;
    margin-top: 8px;
}
.agenda-next-meeting-time { font-size: 13px; opacity: .9; margin-top: 8px; }
.agenda-next-meeting-attendees { display: flex; align-items: center; gap: 6px; margin-top: 16px; }
.agenda-next-meeting-avatar {
    width: 30px;
    height: 30px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .25);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    color: #fff;
    flex-shrink: 0;
}
.agenda-next-meeting-join-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 16px;
    width: 100%;
    justify-content: center;
    background: #fff;
    color: var(--agenda-accent-2-dark);
    border: none;
    font-weight: 600;
}
.agenda-next-meeting-join-btn:hover {
    background: rgba(255, 255, 255, .9);
    color: var(--agenda-accent-2-dark);
}

/* "Aniversários de hoje" — card no fim da sidebar (Semana e Dia). */
.agenda-today-bdays-card {
    background: var(--card-bg);
    border-radius: var(--agenda-radius-lg);
    box-shadow: var(--agenda-shadow);
    padding: 20px;
}
.agenda-today-bdays-title { font-size: 15px; font-weight: 700; color: var(--text-title); margin: 0 0 10px; }
.agenda-today-bday-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid var(--border);
}
.agenda-today-bday-row:last-of-type { border-bottom: none; }
.agenda-today-bdays-more {
    width: 100%;
    margin-top: 10px;
    border: 1px solid var(--border);
    background: transparent;
    border-radius: 999px;
    padding: 9px;
    font-size: 13px;
    cursor: pointer;
    color: var(--text-title);
    transition: background-color .12s;
}
.agenda-today-bdays-more:hover { background: var(--alt-bg); }

/* Birthday view-mode toggle (week / day) — rounded frame with a sliding highlight
   that glides to whichever option is active. */
/* Same segmented-pill look/sizing as .agenda-page .cmp-tabs/.cmp-tab above
   (Calendário/Lembretes), so the Semana/Dia switch reads as the same kind of
   control, one level down. The sliding highlight (.bday-view-indicator) is
   unused now — each button just gets a solid fill when active, exactly like
   .agenda-page .cmp-tab.active. */
.bday-view-toggle {
    position: relative;
    display: inline-flex;
    gap: 4px;
    padding: 4px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--card-bg);
}
.bday-view-indicator { display: none; }
.bday-view-btn {
    position: relative;
    z-index: 1;
    flex: none;
    height: auto;
    padding: 9px 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 999px;
    background: none;
    color: #b0a898;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: color .15s, background-color .15s;
}
.bday-view-btn:hover:not(.active) { background: var(--alt-bg); color: #7a6e60; }
.bday-view-btn.active { background: var(--orange); color: #fff; }

/* Day view — flat list of the day's birthdays */
.bday-day-list {
    background: var(--card-bg);
    border-radius: 14px;
    padding: 8px;
}
.bday-day-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 40px 16px;
    color: var(--text-secondary);
    font-size: 13px;
}
.bday-day-empty i { font-size: 18px; color: var(--text-muted); }
.agenda-week-label {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-title);
    white-space: nowrap;
}

/* Upcoming-assets grid below the birthday calendar (today/tomorrow due dates) */
.asset-upcoming-section { margin-top: 18px; }
.asset-upcoming-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}
.asset-upcoming-card {
    flex: 1 1 220px;
    min-width: 200px;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 12px 14px;
    cursor: pointer;
    box-shadow: var(--card-shadow);
    transition: transform .12s, box-shadow .12s;
}
.asset-upcoming-card:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(28,46,26,.18);
}
.asset-upcoming-badge {
    display: inline-block;
    background: var(--green-dark);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    padding: 2px 8px;
    border-radius: 10px;
    margin-bottom: 8px;
}
.asset-upcoming-name {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--text-title);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.asset-upcoming-meta {
    font-size: 12px;
    color: var(--text-secondary);
    margin-top: 2px;
}

/* Days grid */
.agenda-days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 8px;
}
@media (max-width: 1340px) { .agenda-days { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 700px)  { .agenda-days { grid-template-columns: repeat(2, 1fr); } }

.agenda-day-block {
    background: var(--card-bg);
    border-radius: 12px;
    padding: 12px;
    border: 1px solid var(--border);
    box-shadow: var(--card-shadow);
    min-height: 100px;
}
.agenda-day-block.today {
    border-color: var(--orange);
    box-shadow: 0 0 0 2px rgba(238,111,16,.15), var(--card-shadow);
}
.agenda-day-block.agenda-day-empty {
    opacity: .55;
}

.agenda-day-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}
.agenda-day-name {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--text-secondary);
}
.agenda-day-num {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-title);
    line-height: 1;
}
.agenda-day-num.today {
    background: var(--orange);
    color: #fff;
    border-radius: 50%;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
}

.agenda-no-events {
    font-size: 11px;
    color: var(--text-muted);
    font-style: italic;
}

/* Event cards */
.agenda-event {
    background: var(--agenda-accent-2-tint, var(--alt-bg));
    border: 1px solid var(--agenda-accent-2-dark, var(--border));
    border-radius: 14px;
    padding: 10px 14px;
    margin-bottom: 8px;
    font-size: 12px;
}
.agenda-event.all-day {
    background: var(--container-bg);
    border-color: var(--border);
}
.agenda-event.clickable { cursor: pointer; }
.agenda-event.clickable:hover {
    background: rgba(111, 140, 90, .18);
}
.agenda-event.next-event {
    background: var(--agenda-accent-2-dark, var(--orange));
    box-shadow: var(--agenda-shadow, var(--card-shadow));
}
.agenda-event.next-event:hover { background: var(--agenda-accent-2-dark, var(--orange)); }
.agenda-event.next-event .agenda-event-time,
.agenda-event.next-event .agenda-event-subject,
.agenda-event.next-event .agenda-event-location { color: #fff; }
.agenda-event.past {
    opacity: .5;
}
.agenda-event.past.clickable:hover {
    background: var(--agenda-accent-2-tint, var(--alt-bg));
}
.agenda-event-time {
    color: var(--agenda-accent-2-dark, var(--text-secondary));
    font-size: 10px;
    font-weight: 600;
    margin-bottom: 2px;
    font-variant-numeric: tabular-nums;
}
.agenda-all-day-badge {
    background: var(--text-secondary);
    color: #fff;
    border-radius: 3px;
    padding: 1px 5px;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.agenda-event-subject {
    font-weight: 600;
    color: var(--text-title);
    line-height: 1.3;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.agenda-event-location {
    color: var(--text-muted);
    font-size: 10px;
    margin-top: 3px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Empty state */
.agenda-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 40vh;
    gap: 12px;
    color: var(--text-muted);
    font-size: 13px;
}

/* ============================================================
   Agenda — Client birthdays
   ============================================================ */
.bday-section {
    margin-top: 32px;
    padding-top: 24px;
    border-top: 1px solid var(--border);
}
/* When birthdays are the only content on the page, drop the divider. */
.bday-section-solo {
    margin-top: 8px;
    padding-top: 0;
    border-top: none;
}
.bday-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
    flex-wrap: wrap;
}
.bday-title {
    display: flex;
    align-items: center;
    gap: 12px;
}
.bday-head-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.bday-title i {
    font-size: 22px;
    color: var(--orange);
}
/* "Investimentos a vencer" uses a PNG icon instead of a Bootstrap Icons glyph.
   Rendered as a CSS mask (not a plain <img>) so it's recolored with our palette
   regardless of whatever colors the source PNG itself has — an <img> + filter
   trick only reliably gets you to black/white, not an arbitrary brand color. */
.asset-icon {
    display: inline-block;
    flex-shrink: 0;
    -webkit-mask-image: url('img/due-date.png');
    mask-image: url('img/due-date.png');
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    background-color: var(--green-dark);
}
.bday-title .asset-icon { width: 24px; height: 24px; }

/* "Reunião" uses a PNG icon instead of a Bootstrap Icons glyph — same mask-image
   trick as .asset-icon so it can be recolored per context. */
.meeting-icon-img {
    display: inline-block;
    flex-shrink: 0;
    -webkit-mask-image: url('img/reuniao-online.png');
    mask-image: url('img/reuniao-online.png');
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    background-color: var(--agenda-accent-2, var(--violet));
    width: 20px;
    height: 20px;
}
.agenda-legend-swatch.meeting .meeting-icon-img { width: 11px; height: 11px; background-color: #fff; }
.bday-modal-title > .meeting-icon-img { width: 26px; height: 26px; background-color: var(--agenda-accent-2, var(--violet)); }
.bday-title h2 {
    font-size: 17px;
    font-weight: 700;
    color: var(--text-title);
    margin: 0;
}
.bday-title p {
    font-size: 12px;
    color: var(--text-secondary);
    margin: 2px 0 0;
}
.bday-month-label {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-title);
    min-width: 110px;
    text-align: center;
    white-space: nowrap;
}

/* Filters — single-line pill: uppercase label + bold value + a CSS-drawn chevron,
   matching the mockup's "ADVISOR  Todos ⌄" pill instead of a stacked label/select. */
.bday-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 0;
}
.bday-filter {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 9px 30px 9px 18px;
    cursor: pointer;
}
.bday-filter-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--text-secondary);
    white-space: nowrap;
    pointer-events: none;
}
.bday-filter-value {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-title);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 160px;
    pointer-events: none;
}
/* Invisible but fully clickable — stretched over the whole pill so clicking anywhere on
   it (label text included) opens the native picker, not just the visible value text. */
.bday-filter select {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    border: none;
    background: transparent;
    font-size: 14px;
    cursor: pointer;
}
.bday-filter select:focus { outline: none; }
.bday-filter::after {
    content: "";
    position: absolute;
    right: 14px;
    top: 50%;
    width: 7px;
    height: 7px;
    border-right: 2px solid var(--text-secondary);
    border-bottom: 2px solid var(--text-secondary);
    transform: translateY(-70%) rotate(45deg);
    pointer-events: none;
}
/* Boolean filter rendered as a .bday-filter pill, so an ownership toggle ("Meus") lines up
   with the neighbouring select pills instead of sitting shorter beside them. Scoped to
   button. so the <label> pills above keep their chevron: a toggle has no picker to open,
   hence content:none and the reclaimed right padding. Active state is the app-wide orange
   chip tint. */
button.bday-filter {
    padding-right: 18px;
    font-family: inherit;
    text-align: left;
}
button.bday-filter::after { content: none; }
button.bday-filter:hover:not(:disabled) {
    background: var(--alt-bg);
    border-color: var(--border-alt);
}
button.bday-filter.active {
    background: #fff7ed;
    border-color: #fed7aa;
}
button.bday-filter.active .bday-filter-label,
button.bday-filter.active .bday-filter-value { color: var(--orange-dark); }
button.bday-filter:disabled { opacity: .5; cursor: not-allowed; }

.agenda-new-meeting-btn { margin-left: 8px; white-space: nowrap; }

/* Create-meeting form (inside .bday-modal) — Outlook-style icon rows */
.meeting-form-body { display: flex; flex-direction: column; gap: 4px; }

.meeting-title-input {
    border: none;
    border-bottom: 2px solid var(--border);
    background: transparent;
    font-size: 20px;
    font-weight: 600;
    color: var(--text-title);
    padding: 6px 2px 10px;
    margin-bottom: 12px;
    outline: none;
    transition: border-color .12s;
}
.meeting-title-input:focus { border-bottom-color: var(--agenda-accent-2, var(--violet)); }
.meeting-title-input::placeholder { color: var(--text-muted); font-weight: 400; }

.meeting-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--border);
}
.meeting-row:last-child { border-bottom: none; }
.meeting-icon {
    flex-shrink: 0;
    width: 20px;
    padding-top: 8px;
    text-align: center;
    color: var(--text-secondary);
    font-size: 15px;
}
.meeting-content { flex: 1; display: flex; flex-direction: column; gap: 8px; min-width: 0; }

.meeting-datetime { flex-direction: row; align-items: center; flex-wrap: wrap; gap: 8px; }
.meeting-datetime input[type="time"] { width: 110px; }
.meeting-time-select { width: 90px; cursor: pointer; }
.meeting-recurrence-toggle { display: flex; align-items: center; gap: 8px; cursor: pointer; font-size: 14px; color: var(--text-title); }
.meeting-recurrence-select { width: 160px; cursor: pointer; }
.meeting-time-sep { color: var(--text-muted); }

/* Attendee chips + directory search */
.attendee-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.attendee-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--alt-bg);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 3px 6px 3px 10px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-title);
}
.attendee-chip button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 0;
}
.attendee-status { font-size: 13px; }
.attendee-status.accepted  { color: #2e7d32; }
.attendee-status.declined  { color: #c62828; }
.attendee-status.tentative { color: #ef6c00; }
.attendee-status.pending   { color: var(--text-muted); }
.attendee-chip button:hover { background: var(--border); color: var(--text-title); }

.attendee-search { position: relative; }
.attendee-suggestions {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0,0,0,.18);
    z-index: 20;
    max-height: 220px;
    overflow-y: auto;
    padding: 4px;
}
.attendee-suggestion {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    border: none;
    background: transparent;
    padding: 8px;
    border-radius: 8px;
    cursor: pointer;
    text-align: left;
}
.attendee-suggestion:hover { background: var(--alt-bg); }
.attendee-suggestion-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: linear-gradient(145deg, var(--agenda-accent-2-dark, var(--violet)), var(--agenda-accent-2, #9d7bff));
    color: #fff;
    display: grid;
    place-items: center;
    font-size: 11px;
    font-weight: 700;
    flex-shrink: 0;
}
.attendee-suggestion-info { display: flex; flex-direction: column; min-width: 0; }
.attendee-suggestion-name { font-size: 13px; font-weight: 600; color: var(--text-title); }
.attendee-suggestion-email {
    font-size: 11px;
    color: var(--text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Mini calendar date-picker popover */
.meeting-date-picker { position: relative; }
.meeting-date-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 1px solid var(--border);
    background: var(--alt-bg);
    color: var(--text-title);
    border-radius: 8px;
    padding: 6px 12px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}
.meeting-date-btn:hover { background: var(--border); }
.meeting-cal-popover {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0,0,0,.18);
    z-index: 20;
    padding: 10px;
    width: 260px;
}
.meeting-cal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-title);
    margin-bottom: 8px;
}
.meeting-cal-head button {
    border: none;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 2px 6px;
}
.meeting-cal-head button:hover { color: var(--text-title); }
.mini-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.mini-cal-weekdays { margin-bottom: 4px; }
.mini-cal-weekday {
    font-size: 10px;
    font-weight: 700;
    text-align: center;
    color: var(--text-secondary);
}
.mini-cal-blank { aspect-ratio: 1 / 1; }
.mini-cal-day {
    aspect-ratio: 1 / 1;
    border: none;
    background: transparent;
    border-radius: 50%;
    font-size: 12px;
    color: var(--text-title);
    cursor: pointer;
}
.mini-cal-day:hover { background: var(--alt-bg); }
.mini-cal-day.today { color: var(--orange-dark); font-weight: 700; }
.mini-cal-day.selected { background: var(--orange); color: #fff; font-weight: 700; }
.mini-cal-day.disabled { color: var(--text-disabled); cursor: not-allowed; }
.mini-cal-day.disabled:hover { background: transparent; }
.mini-cal-day.has-dot { position: relative; }
.mini-cal-day.has-dot::after {
    content: "";
    position: absolute;
    bottom: 3px;
    left: 50%;
    transform: translateX(-50%);
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--orange);
}
.mini-cal-day.has-dot.selected::after { background: #fff; }

.mini-cal-card {
    background: var(--card-bg);
    border-radius: var(--agenda-radius-lg, 16px);
    box-shadow: var(--agenda-shadow, var(--card-shadow));
    padding: 20px;
}

.bday-modal-foot {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 20px;
    border-top: 1px solid var(--border);
}
.meeting-delete-btn { margin-right: auto; }

/* Day detail modal */
.bday-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.45);
    backdrop-filter: blur(2px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 20px;
    animation: bday-fade .15s ease;
}
@keyframes bday-fade { from { opacity: 0; } to { opacity: 1; } }
.bday-modal {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 16px;
    box-shadow: 0 20px 50px rgba(0,0,0,.30);
    width: 100%;
    max-width: 420px;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: bday-pop .18s cubic-bezier(.2,.8,.3,1.2);
}
@keyframes bday-pop { from { transform: translateY(12px) scale(.97); opacity: 0; } to { transform: none; opacity: 1; } }
.bday-modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 18px;
    border-bottom: 1px solid var(--border);
    background: linear-gradient(160deg, rgba(238,111,16,.10), transparent);
}
.bday-modal-title {
    display: flex;
    align-items: center;
    gap: 12px;
}
.bday-modal-title > i {
    font-size: 26px;
    color: var(--orange);
}
.bday-modal-title > .asset-icon { width: 28px; height: 28px; }
.bday-modal-title h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    color: var(--text-title);
}
.bday-modal-title span {
    font-size: 12px;
    color: var(--text-secondary);
}
.bday-modal-close {
    border: none;
    background: var(--alt-bg);
    color: var(--text-secondary);
    border-radius: 8px;
    width: 32px;
    height: 32px;
    cursor: pointer;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    transition: background .12s, color .12s;
}
.bday-modal-close:hover { background: var(--border); color: var(--text-title); }
.bday-modal-body {
    padding: 8px;
    overflow-y: auto;
}
.bday-modal-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 10px;
    border-radius: 10px;
}
.bday-modal-row:hover { background: var(--alt-bg); }
.bday-modal-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: linear-gradient(145deg, var(--orange), #a5ab97);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    display: grid;
    place-items: center;
    flex-shrink: 0;
}
.bday-modal-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.bday-modal-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-title);
}
.bday-modal-subject {
    font-size: 11px;
    color: var(--text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.bday-modal-row > i {
    color: var(--orange);
    font-size: 15px;
    flex-shrink: 0;
}

/* Investimentos a vencer — asset rows/avatars use the palette's violet instead of
   the birthday orange, so the two event types stay visually distinct. */
.asset-row { cursor: pointer; }
.asset-row > i { color: var(--green-dark); }
.asset-avatar {
    background: linear-gradient(145deg, var(--green-dark), var(--text-secondary));
}
.asset-avatar .asset-icon { width: 18px; height: 18px; background-color: #fff; }

/* Lançamentos futuros — mesmo padrão de linha, paleta violeta para
   diferenciar de aniversários (laranja) e ativos a vencer (verde). */
.lancamento-row { cursor: pointer; }
.lancamento-row > i { color: var(--violet); }
.lancamento-avatar {
    background: linear-gradient(145deg, #77763d, #000);
}
.lancamento-avatar i { color: #fff; font-size: 15px; }
.lancamento-row-value {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-title);
    flex-shrink: 0;
    white-space: nowrap;
}
.asset-ref-date {
    font-size: 12.5px;
    color: var(--text-secondary);
    margin: -4px 0 14px;
}
.asset-ref-date-disclaimer {
    font-size: 11.5px;
    font-style: italic;
    color: var(--text-disabled);
    margin: -4px 0 14px;
}
.asset-ref-date-modal {
    margin: 10px 18px 0;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border);
}
.asset-icon-credit {
    margin-top: 18px;
    font-size: 10.5px;
    color: var(--text-disabled);
    text-align: right;
}
.asset-icon-credit a { color: inherit; text-decoration: underline; }
.asset-back-btn {
    border: none;
    background: var(--alt-bg);
    color: var(--text-secondary);
    border-radius: 8px;
    width: 32px;
    height: 32px;
    cursor: pointer;
    display: grid;
    place-items: center;
    flex-shrink: 0;
}
.asset-back-btn:hover { background: var(--border); color: var(--text-title); }

/* Meetings day-detail modal — violet instead of the birthday orange, to match
   the meeting badge's color on the calendar. */
.event-modal .bday-modal-title > i { color: var(--agenda-accent-2, var(--violet)); }
/* Investment modal is wider than the birthday one — needs room for portfolio name +
   advisor/time + values without truncating. */
.bday-modal.asset-modal { max-width: 560px; }

/* Create-meeting modal is wider still — form on the left, day timeline on the right. */
.bday-modal.meeting-modal { max-width: 920px; }
.meeting-modal-body {
    display: flex;
    gap: 16px;
    padding: 8px;
    overflow-y: auto;
}
.meeting-form-col { flex: 1 1 320px; min-width: 0; }
.meeting-timeline-col {
    flex: 0 0 340px;
    border-left: 1px solid var(--border);
    padding-left: 16px;
    max-height: 480px;
    overflow-y: auto;
}
@media (max-width: 640px) {
    .meeting-modal-body { flex-direction: column; }
    .meeting-timeline-col { border-left: none; border-top: 1px solid var(--border); padding: 12px 0 0; }
}

.timeline-header {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-secondary);
    margin-bottom: 8px;
}
.timeline-allday { display: flex; flex-direction: column; gap: 4px; margin-bottom: 8px; }
.timeline-allday-item {
    font-size: 11px;
    color: var(--text-secondary);
    background: var(--alt-bg);
    border-radius: 6px;
    padding: 4px 6px;
}
.timeline-grid { position: relative; }
.timeline-hour-row {
    position: relative;
    height: var(--tl-row-h, 72px);
    border-top: 1px solid var(--border);
}
.timeline-hour-row:last-child { border-bottom: 1px solid var(--border); }
.timeline-hour-label {
    position: absolute;
    left: 0;
    top: -7px;
    font-size: 10px;
    color: var(--text-muted);
    width: 38px;
    text-align: right;
}
.timeline-events-layer {
    position: absolute;
    top: 0;
    left: 44px;
    right: 0;
    bottom: 0;
}
.timeline-event {
    position: absolute;
    background: var(--agenda-accent-2-tint);
    border-radius: 10px;
    padding: 3px 8px;
    font-size: 11px;
    overflow: hidden;
    line-height: 1.3;
}
.timeline-event-time { display: block; font-weight: 600; color: var(--agenda-accent-2-dark); }
.timeline-event-subject {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    color: var(--agenda-accent-2-text);
    overflow: hidden;
}
.timeline-event.timeline-draft {
    background: rgba(111,140,90,.18);
    border: 2px dashed var(--agenda-accent-2);
    z-index: 2;
}

/* "Now" marker — only shown when the timeline is displaying today. */
.timeline-now-line {
    position: absolute;
    left: 44px;
    right: 0;
    height: 2px;
    background: var(--orange);
    z-index: 4;
    pointer-events: none;
}
.timeline-now-line::before {
    content: "";
    position: absolute;
    left: -5px;
    top: -4px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--orange);
}
.timeline-now-label {
    position: absolute;
    left: -46px;
    top: -8px;
    width: 38px;
    font-size: 10px;
    font-weight: 700;
    color: var(--orange-dark);
    text-align: right;
}

/* Weekly overview, 7 day columns + shared hour gutter, week view only. No grid
   lines/table borders anywhere (that's what reads as a generic Outlook-style
   calendar) — each day is its own rounded, gapped column; hours are marked by
   a faint repeating stripe inside that column's own background, not a border. */
.wk-tl-section, .wk-tl-skel { margin-top: 0; }
.wk-tl-wrap { overflow-x: auto; }
.wk-tl-grid {
    display: grid;
    /* Mon–Fri get full-width columns; Sat/Sun (last two, week is Monday-first)
       are rendered at half width — they carry far less content on average. */
    grid-template-columns: 58px repeat(5, minmax(120px, 1fr)) repeat(2, minmax(60px, .5fr));
    grid-template-rows: auto auto 1fr;
    column-gap: 6px;
    row-gap: 6px;
    min-width: 740px;
}
.wk-tl-daycol-head {
    display: flex; flex-direction: column; align-items: center; gap: 2px;
    padding: 10px 4px 8px;
    border-radius: 12px;
    transition: background-color .15s;
}
.wk-tl-daycol-dow { font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-secondary); }
.wk-tl-daycol-num { font-size: 18px; font-weight: 700; color: var(--text-title); margin-top: 1px; }
.wk-tl-daycol-head.today { background: var(--orange); }
.wk-tl-daycol-head.today .wk-tl-daycol-dow,
.wk-tl-daycol-head.today .wk-tl-daycol-num { color: #fff; }
.wk-tl-daycol-head.weekend .wk-tl-daycol-dow,
.wk-tl-daycol-head.weekend .wk-tl-daycol-num { color: var(--text-disabled); }

/* All-day row — birthdays/maturities as small pills, centered above each day's column.
   The column gap is deliberately wider than the row gap: the two pills in a cell are
   different things (a birthday and a maturity), and at 3px they read as one control. */
.wk-tl-allday-cell {
    display: flex; flex-wrap: wrap; align-content: flex-start; justify-content: center;
    column-gap: 10px; row-gap: 4px;
    padding: 2px; min-height: 24px;
}
.wk-tl-allday-chip {
    display: inline-flex; align-items: center; gap: 3px;
    border: none; border-radius: 999px; padding: 1px 6px 1px 5px;
    font-size: 10px; font-weight: 700; color: #fff; line-height: 1.4;
    cursor: pointer; transition: transform .12s, filter .12s;
}
.wk-tl-allday-chip.bday  { background: var(--orange); }
.wk-tl-allday-chip.asset { background: var(--green-dark); }
/* Placeholder in the maturity chip's slot while that fetch is in flight. Sized to the chip
   so the all-day row keeps its height and nothing shifts when the real chip replaces it. */
.wk-tl-allday-skel { width: 30px; height: 17px; border-radius: 999px; }
.wk-tl-allday-chip i { font-size: 18px; line-height: 1; }
.wk-tl-allday-chip .asset-icon { width: 15px; height: 15px; background-color: #fff; }
.wk-tl-allday-chip:hover { filter: brightness(1.05); transform: scale(1.05); }
.wk-tl-allday-chip:active { transform: scale(.95); }

.wk-tl-hourcol { position: relative; }
.wk-tl-hour-row { height: var(--wk-tl-row-h, 48px); }
.wk-tl-daycol {
    position: relative;
    border-radius: 12px;
    background-image: repeating-linear-gradient(
        to bottom,
        transparent 0,
        transparent calc(var(--wk-tl-row-h, 48px) - 1px),
        var(--border) calc(var(--wk-tl-row-h, 48px) - 1px),
        var(--border) var(--wk-tl-row-h, 48px)
    );
}
.wk-tl-daycol.today { background-color: rgba(224,120,32,.06); }
/* Weekend columns read as "quiet" — flat muted fill, no hour-line texture —
   same idea as the mockup's dimmed Sáb/Dom placeholders. Events (if any exist
   on a weekend) still render normally on top. */
.wk-tl-daycol.weekend { background-image: none; background-color: var(--alt-bg); opacity: .7; }
.wk-tl-hour-label {
    position: relative; top: -7px; display: block; text-align: right;
    font-size: 10px; color: var(--text-muted); padding-right: 6px;
}
.wk-tl-events-layer { position: absolute; top: 0; left: 0; right: 0; bottom: 0; cursor: pointer; }
.wk-tl-event {
    position: absolute;
    background: var(--agenda-accent-2-tint);
    border: 1px solid var(--agenda-accent-2-dark, var(--border));
    box-sizing: border-box;
    border-radius: 10px;
    padding: 3px 8px;
    font-size: 12px;
    overflow: hidden;
    line-height: 1.2;
    cursor: pointer;
    transition: filter .12s, box-shadow .12s;
}
.wk-tl-event:hover { filter: brightness(.97); box-shadow: 0 0 0 1px var(--agenda-accent-2-dark, var(--border)); }
.wk-tl-event.past { opacity: .5; }
.wk-tl-event-time { display: block; font-size: 10px; font-weight: 600; color: var(--agenda-accent-2-dark); }
.wk-tl-event-subject {
    display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    color: var(--agenda-accent-2-text);
}
.wk-tl-now-line { position: absolute; left: 0; right: 0; height: 2px; background: var(--orange); z-index: 4; pointer-events: none; }
.wk-tl-now-line::before { content: ""; position: absolute; left: -3px; top: -3px; width: 8px; height: 8px; border-radius: 50%; background: var(--orange); }

@media (max-width: 640px) { .wk-tl-section, .wk-tl-skel { margin-top: 16px; } }

.asset-client-card {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 12px 10px;
    border-radius: 10px;
    border-bottom: 1px solid var(--border);
}
.asset-client-card:last-child { border-bottom: none; }
.asset-client-card-head {
    display: flex;
    align-items: center;
    gap: 10px;
}
.asset-client-value {
    margin-left: auto;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    line-height: 1.2;
    flex-shrink: 0;
}
.asset-client-value-label {
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--text-disabled);
}
.asset-client-value-amount {
    font-size: 16px;
    font-weight: 700;
    color: var(--green-dark);
}
.asset-client-portfolio {
    font-size: 12px;
    color: var(--text-muted);
    white-space: normal;
    word-break: break-word;
    padding-left: 48px; /* aligns under the name, past the avatar */
}
.asset-client-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 16px;
    font-size: 12.5px;
    color: var(--text-secondary);
    padding-left: 48px;
}
.asset-client-meta strong { color: var(--text-title); font-weight: 600; }

/* Lançamento futuro detail modal — dates in the first column, portfolio/market/movement
   type in the second, instead of one long wrapping list. */
.lancamento-detail-cols {
    display: flex;
    gap: 28px;
    padding-left: 48px;
    font-size: 12.5px;
    color: var(--text-secondary);
}
.lancamento-detail-col { display: flex; flex-direction: column; gap: 4px; }
.lancamento-detail-col strong { color: var(--text-title); font-weight: 600; }

/* List */
.bday-list {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: var(--card-shadow);
    overflow: hidden;
}
.bday-list-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: var(--text-secondary);
}
.bday-count {
    background: var(--orange);
    color: #fff;
    border-radius: 20px;
    padding: 1px 9px;
    font-size: 11px;
    font-weight: 700;
}
.bday-empty {
    padding: 24px 16px;
    text-align: center;
    color: var(--text-muted);
    font-size: 13px;
    font-style: italic;
}
.bday-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 16px;
    border-bottom: 1px solid var(--border);
}
.bday-row:last-child { border-bottom: none; }
.bday-row.today { background: rgba(238,111,16,.06); }
.bday-row-date {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 44px;
    flex-shrink: 0;
    background: var(--alt-bg);
    border-radius: 8px;
    padding: 4px 0;
}
.bday-row-day {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-title);
    line-height: 1;
}
.bday-row-mon {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--text-secondary);
}
.bday-row-name {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-title);
}
.bday-row-name i { color: var(--orange); font-size: 15px; }
.bday-today-badge {
    background: var(--orange);
    color: #fff;
    border-radius: 4px;
    padding: 2px 8px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

/* ============================================================
   KPI — Document Coverage (ficha / suitability / politica)
   ============================================================ */

.doc-filter-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 0 14px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.doc-coverage-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 16px;
    margin-bottom: 8px;
}

.doc-chart-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 20px 16px 16px;
}

.doc-chart-header {
    display: flex;
    align-items: center;
    gap: 8px;
    align-self: flex-start;
    width: 100%;
}

.doc-chart-icon {
    width: 34px; height: 34px;
    border-radius: 9px;
    display: grid; place-items: center;
    font-size: 16px;
    flex-shrink: 0;
}

.doc-chart-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-title);
    line-height: 1.25;
}

.doc-chart-canvas-wrap {
    position: relative;
    width: 100%;
    height: 160px;
}

.doc-chart-pct {
    font-size: 28px;
    font-weight: 700;
    color: var(--text-title);
    line-height: 1;
    margin-top: 2px;
}

.doc-chart-sub {
    font-size: 12px;
    color: var(--text-muted);
    text-align: center;
    line-height: 1.4;
}

.doc-chart-legend {
    display: flex;
    gap: 14px;
    font-size: 11.5px;
    color: var(--text-muted);
}

.doc-chart-legend-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    display: inline-block;
    margin-right: 4px;
    flex-shrink: 0;
    vertical-align: middle;
}

.doc-legend-has  { background: rgba(224,120,32,.85); }
.doc-legend-none { background: rgba(210,210,210,.6); }

/* ── Document status badges (table) ── */
.doc-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}
.doc-badge-ok      { background: #dcfce7; color: #166534; }
.doc-badge-pendente { background: #fff7ed; color: #9a3412; }
.doc-badge-na       { color: var(--text-muted); font-size: 13px; }
.kpi-td-center                { text-align: center; vertical-align: middle; }
.kpi-table th.kpi-td-center   { text-align: center; }
.kpi-td-right                 { text-align: right; font-variant-numeric: tabular-nums; }
.kpi-table th.kpi-td-right    { text-align: right; }
.kpi-td-num                   { text-align: center; font-variant-numeric: tabular-nums; font-size: 13px; }
.kpi-table th.kpi-td-num      { text-align: center; }

/* ── Table pager ── */
.kpi-pager {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding: 10px 16px;
    border-top: 1px solid var(--border);
    font-size: 12.5px;
    color: var(--text-muted);
}
.kpi-pager-btn {
    height: 28px;
    padding: 0 12px;
    border: 1px solid var(--border);
    background: var(--card-bg);
    border-radius: 6px;
    font-size: 12.5px;
    font-family: inherit;
    color: var(--text-label);
    cursor: pointer;
    transition: background .12s;
}
.kpi-pager-btn:hover:not(:disabled) { background: var(--alt-bg); }

/* ── Column status filters ── */
.kpi-th-with-filter {
    white-space: normal;
    vertical-align: top;
    padding-bottom: 8px;
}
.kpi-col-filter {
    display: block;
    margin: 5px auto 0;
    width: 100%;
    max-width: 88px;
    font-size: 10px;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
    padding: 2px 4px;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: var(--card-bg);
    color: var(--text-muted);
    cursor: pointer;
    font-family: inherit;
}
.kpi-col-filter:focus { outline: none; border-color: var(--accent); }
.kpi-col-filter.active { border-color: var(--accent); color: var(--text-title); background: var(--alt-bg); }
.kpi-pager-btn:disabled { opacity: .4; cursor: default; }

/* Compliance → Detalhamento por Cliente: clickable rows + consolidated client modal */
.kpi-table tbody tr.kpi-row-click { cursor: pointer; }
.kpi-table tbody tr.kpi-row-click:hover { background: var(--alt-bg); }
.cli-modal { max-width: 620px; }
.cli-sec { padding: 14px 0; border-bottom: 1px solid var(--border); }
.cli-sec:last-child { border-bottom: none; }
.cli-sec-head { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--text-title); margin-bottom: 10px; }
.cli-grid { display: grid; grid-template-columns: auto 1fr; gap: 6px 18px; align-items: baseline; }
.cli-k { font-size: 12.5px; color: var(--text-muted); }
.cli-v { font-size: 13px; color: var(--text-title); text-align: right; }
.cli-empty { font-size: 12.5px; color: var(--text-muted); font-style: italic; }

/* Enquadramento cell + modal (KPI dashboard + Compliance Overview detail tables) */
.kpi-enq-cell {
    cursor: pointer;
}

.kpi-enq-cell:hover .doc-badge,
.kpi-enq-cell:hover .doc-badge-na {
    opacity: .75;
}

.enq-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .35);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.enq-modal-card {
    background: var(--card-bg);
    border: 1px solid var(--border);
    box-shadow: 0 4px 24px rgba(0, 0, 0, .13);
    border-radius: 8px;
    padding: 20px 24px;
    min-width: 280px;
    max-width: 380px;
    width: 90%;
}

.enq-modal-header {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border);
}

.enq-modal-title {
    flex: 1;
    font-weight: 600;
    font-size: 14px;
    color: var(--text-title);
    line-height: 1.35;
}

.enq-modal-close {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-muted);
    padding: 0;
    font-size: 14px;
    line-height: 1;
    margin-top: 1px;
}

.enq-modal-close:hover {
    color: var(--text-main);
}

.enq-modal-body {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.enq-modal-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.enq-modal-label {
    font-size: 12px;
    color: var(--text-muted);
    width: 140px;
    flex-shrink: 0;
}

/* Bem acima do cap de 380px do .enq-modal-card: são cinco colunas de texto (carteira,
   cliente, custodiante, finalidade, volume) e a de cliente ainda carrega os chips de
   espólio/distrato, que a 720px empurravam o nome para duas linhas. O width:90% da base
   continua valendo, então em telas menores o modal encolhe junto com a viewport. */
.ops-carteiras-modal-card {
    max-width: 1040px;
}

/* Expanded chart: 90% of the viewport in both directions, overriding .enq-modal-card's
   380px cap. The room is the feature — it is what lets every institution be labelled. */
.ops-chart-modal-card {
    width: 90vw;
    max-width: 90vw;
    height: 90vh;
    display: flex;
    flex-direction: column;
}

/* Chart.js sizes its canvas to the parent, so the parent must be the one with the height
   and must be allowed to shrink (min-height:0) inside the flex column — without it the
   canvas grows on every resize instead of fitting. */
.ops-chart-modal-body {
    flex: 1;
    min-height: 0;
    position: relative;
}

.ops-chart-modal-body canvas { display: block; }

/* Expand affordance, and the caption that admits the chart is truncated. */
.ops-expand-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.ops-chart-truncated {
    align-self: flex-start;
    background: none;
    border: none;
    padding: 0 0 6px;
    font-size: 11px;
    color: var(--nnm-text2);
    text-decoration: underline dotted;
    text-underline-offset: 2px;
    cursor: pointer;
}

.ops-chart-truncated:hover { color: var(--orange-dark); }

.ops-carteiras-modal-card .kpi-search {
    width: 100%;
    margin-bottom: 12px;
}

.ops-row-clickable {
    cursor: pointer;
}

.ops-row-clickable:hover {
    background: rgba(237, 111, 15, .07);
}

.ops-chart-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.ops-chart-legend-actions {
    display: flex;
    gap: 6px;
}

.ops-legend-btn {
    padding: 2px 8px;
    border: 1px solid var(--border);
    border-radius: 5px;
    background: var(--card-bg);
    color: var(--text-muted);
    font-size: 11px;
    font-family: inherit;
    cursor: pointer;
}

.ops-legend-btn:hover {
    color: var(--orange);
    border-color: var(--orange);
}

.enq-modal-val {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-main);
}

/* Compliance Overview — chart segment drill-down modal (Risco/País/Patrimônio) */
.chart-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .35);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.chart-modal-card {
    background: var(--card-bg);
    border: 1px solid var(--border);
    box-shadow: 0 4px 24px rgba(0, 0, 0, .13);
    border-radius: 8px;
    padding: 20px 24px;
    min-width: 320px;
    max-width: 620px;
    width: 90%;
    max-height: 70vh;
    display: flex;
    flex-direction: column;
}

.chart-modal-header {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border);
}

.chart-modal-title {
    flex: 1;
    font-weight: 600;
    font-size: 14px;
    color: var(--text-title);
    line-height: 1.35;
}

.chart-modal-close {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-muted);
    padding: 0;
    font-size: 14px;
    line-height: 1;
    margin-top: 1px;
}

.chart-modal-close:hover { color: var(--text-main); }

.chart-modal-search { width: 100%; margin-bottom: 10px; flex-shrink: 0; }

.vencimentos-modal-tabs { margin-left: 0; margin-bottom: 10px; }

.vencimentos-periodo-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.vencimentos-chip {
    height: 24px;
    padding: 0 10px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--card-bg);
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 500;
    cursor: pointer;
}
.vencimentos-chip:hover { background: var(--alt-bg); border-color: var(--border-alt); color: var(--text-title); }
.vencimentos-chip.active { background: #fff7ed; border-color: #fed7aa; color: var(--orange-dark); font-weight: 600; }

.chart-modal-list {
    overflow-y: auto;
    flex: 1 1 auto;
    border-top: 1px solid var(--border);
}

.chart-modal-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.chart-modal-table thead th {
    position: sticky;
    top: 0;
    background: var(--card-bg);
    text-align: left;
    padding: 6px 8px;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-label);
}
.chart-modal-table tbody td {
    padding: 7px 8px;
    color: var(--text-title);
    border-bottom: 1px solid var(--border);
}
.chart-modal-table tbody tr:last-child td { border-bottom: none; }
.chart-modal-table .btn-occ-mini {
    padding: 2px 6px;
    font-size: 11px;
    line-height: 1.4;
}

.chart-modal-empty {
    padding: 24px 0;
    text-align: center;
    font-size: 12.5px;
    color: var(--text-muted);
    font-style: italic;
}

/* ============================================================
   Call Reports / Tarefas — tabela, busca, badges e modal
   (usado por Comercial/CallReports.razor e Agenda.razor)
   ============================================================ */
.dash-head-actions {
    display: flex;
    align-items: center;
    gap: 14px;
}
.pv-filters {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 18px;
}
.pv-search {
    position: relative;
    display: flex;
    align-items: center;
    flex: 1 1 280px;
    max-width: 380px;
}
.pv-search-icon {
    position: absolute;
    left: 13px;
    font-size: 14px;
    color: var(--text-muted);
    pointer-events: none;
}
.pv-search-input {
    width: 100%;
    height: 40px;
    padding: 0 38px 0 38px;
    font-size: 13.5px;
    color: var(--text-title);
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 10px;
    outline: none;
    transition: border-color .15s, box-shadow .15s, background .15s;
}
.pv-search-input::placeholder { color: var(--text-muted); }
.pv-search-input:hover { border-color: var(--text-muted); }
.pv-search-input:focus {
    border-color: var(--orange);
    box-shadow: 0 0 0 3px rgba(240, 143, 42, .15);
}
.pv-search-input::-webkit-search-cancel-button { display: none; }
.pv-search-clear {
    position: absolute;
    right: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--text-muted);
    font-size: 11px;
    cursor: pointer;
    transition: background .15s, color .15s;
}
.pv-search-clear:hover { background: var(--border); color: var(--text-title); }
.pv-count {
    margin-left: auto;
    font-size: 12px;
    color: var(--text-secondary);
    white-space: nowrap;
}
.pv-count strong { color: var(--text-title); font-weight: 700; }

.cr-card {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: var(--card-shadow);
    padding: 14px;
}
.cr-table-wrap { overflow-x: auto; }
.cr-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13.5px;
    transform: translateZ(0);
}
.cr-table thead th {
    text-align: left;
    height: 40px;
    padding: 0 14px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-label);
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}
.cr-table tbody td {
    height: 48px;
    padding: 0 14px;
    color: var(--text-title);
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
    white-space: nowrap;
}
.cr-table tbody tr:last-child td { border-bottom: none; }
.cr-table tbody tr:hover { background: var(--alt-bg); }
.cr-row-clickable { cursor: pointer; }
.cr-client {
    display: flex;
    align-items: center;
    gap: 9px;
    font-weight: 600;
    color: var(--orange);
    white-space: nowrap;
}
.cr-client-icon { font-size: 15px; }
.cr-empty {
    text-align: center;
    color: var(--text-muted);
    padding: 28px 0 !important;
}
.cr-badge {
    display: inline-block;
    font-size: 11.5px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 12px;
    white-space: nowrap;
}
/* Status colours read as a traffic light on the work still owed: blue is in hand, green is
   finished, red is late. Cancelled is deliberately neutral grey — it is a closed record,
   not a problem — which also frees red to mean overdue and nothing else. */
.cr-badge--open      { background: rgba(59, 130, 246, .14);  color: #2563eb; }
.cr-badge--done      { background: rgba(34, 197, 94, .14);   color: #16a34a; }
.cr-badge--overdue   { background: rgba(239, 68, 68, .14);   color: #dc2626; }
.cr-badge--canceled  { background: rgba(107, 107, 107, .16); color: #5f5f5f; }
.cr-badge--scheduled { background: rgba(245, 158, 11, .16);  color: #d97706; }
.cr-badge--unknown   { background: var(--border);           color: var(--text-label); }

/* Tarefas — "Salvar e fechar" on the task detail modal, same green as the done-state badge. */
.btn-task-save { background: #2e7d32; border-color: #2e7d32; color: #fff; }
.btn-task-save:hover:not(:disabled) { background: #25642a; border-color: #25642a; }
.btn-task-save:disabled { opacity: .65; }

/* Tarefas — task detail modal redesign. Scoped under .cr-status-modal (already the
   modifier this modal carries) so the shared .pv-modal-* / .form-control classes used
   by every other modal in the app are untouched. */
.cr-status-modal {
    border-radius: 18px;
    box-shadow: 0 24px 60px rgba(28,46,41,.16), 0 6px 16px rgba(28,46,41,.08);
}
.cr-status-modal .pv-modal-head { padding: 20px 24px; }
.cr-status-modal .cr-detail-head { flex-direction: row; align-items: center; gap: 12px; }
.cr-status-modal .cr-detail-client-icon {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--alt-bg);
    color: var(--orange);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
}
.cr-status-modal .cr-detail-client { font-size: 15px; font-weight: 700; color: var(--text-title); }
.cr-status-modal .pv-modal-close {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .15s ease;
}
.cr-status-modal .pv-modal-close:hover { background: var(--alt-bg); }
.cr-status-modal .pv-modal-body { padding: 22px 24px; }
.cr-status-modal .cr-detail-form { display: flex; flex-direction: column; gap: 18px; }
.cr-status-modal .cr-detail-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.cr-status-modal .form-control { border-radius: 10px; padding: 10px 12px; }
.cr-status-modal .cr-status-body {
    border-top: none;
    background: var(--alt-bg);
    border-radius: 12px;
    padding: 14px 16px;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}
.cr-status-modal .cr-status-pill { padding: 7px 26px 7px 14px; font-size: 12.5px; box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.cr-status-modal .pv-modal-foot {
    justify-content: flex-end;
    padding: 16px 24px;
    background: var(--page-bg);
    border-radius: 0 0 18px 18px;
}
@media (max-width: 640px) {
    .cr-status-modal .cr-detail-form-row { grid-template-columns: 1fr; }
}

/* Tarefas — status quick-filter pills above the Lista table (kanban already groups by
   status via columns, so these only render for the table view). */
.task-status-pills { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
.task-status-pills-label { font-size: 12px; font-weight: 600; color: var(--text-label); margin-right: 2px; }
.task-status-pill { font-family: inherit; font-size: 12.5px; font-weight: 700; padding: 7px 16px; border-radius: 999px; border: 1px solid var(--border); background: var(--card-bg); color: var(--text-label); cursor: pointer; transition: background .15s ease, border-color .15s ease, color .15s ease; }
.task-status-pill:hover { border-color: var(--orange); }
.task-status-pill.active { border-color: transparent; color: #fff; }
.task-status-pill.active.all      { background: var(--orange); }
.task-status-pill.active.open     { background: #3D5A80; }
.task-status-pill.active.done     { background: #2e7d32; }
.task-status-pill.active.canceled { background: var(--status-error); }

/* Tarefas — Kanban view (alternative to .cr-table, same TaskFiltered set). */
.task-kanban-board { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; align-items: start; }
.task-kanban-col { background: var(--alt-bg); border: 1px solid var(--border); border-radius: 14px; padding: 12px; display: flex; flex-direction: column; gap: 10px; min-height: 160px; }
.task-kanban-col-head { display: flex; align-items: center; gap: 8px; padding: 2px 4px 4px; }
.task-kanban-col-title { font-size: 13px; font-weight: 700; color: var(--text-title); flex: 1; }
.task-kanban-col-count { font-size: 11.5px; font-weight: 700; color: var(--text-secondary); background: var(--card-bg); border: 1px solid var(--border); border-radius: 999px; padding: 2px 8px; flex-shrink: 0; }
.task-kanban-list { display: flex; flex-direction: column; gap: 10px; min-height: 60px; border-radius: 10px; transition: background .12s, box-shadow .12s; }
.task-kanban-list.drag-over { background: rgba(125,133,107,.12); box-shadow: inset 0 0 0 2px var(--orange); }
.task-kanban-empty { text-align: center; color: var(--text-muted); font-size: 12.5px; padding: 20px 8px; }
.task-kanban-card { background: var(--card-bg); border: 1px solid var(--border); border-left: 3px solid transparent; border-radius: 16px; padding: 1rem; display: flex; flex-direction: column; gap: 9px; cursor: grab; box-shadow: 0 2px 10px rgba(20,20,19,.06); transition: box-shadow .15s ease, border-color .15s ease, opacity .15s ease; }
.task-kanban-card:hover { box-shadow: 0 8px 24px rgba(20,20,19,.13); border-color: var(--border-alt); }
.task-kanban-card.overdue { border-left-color: #dc2626; }
.task-kanban-card.saving { opacity: .5; pointer-events: none; }
.task-kanban-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.task-kanban-card-client { font-size: 11px; font-weight: 700; color: var(--orange); }
.task-kanban-state-badge { width: 20px; height: 20px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 11px; color: #fff; }
.task-kanban-state-badge.open      { border: 2px solid var(--border-alt); background: transparent; }
.task-kanban-state-badge.done      { background: #2e7d32; }
.task-kanban-state-badge.canceled  { background: #dc2626; }
.task-kanban-state-badge.scheduled,
.task-kanban-state-badge.unknown   { border: 2px solid var(--border-alt); background: transparent; }
.task-kanban-card-subject { font-size: 14px; font-weight: 600; color: var(--text-title); line-height: 1.4; }
.task-kanban-card-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.task-kanban-card-deadline { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 600; color: var(--text-muted); }
.task-kanban-card-deadline.overdue { color: #dc2626; }
.task-overdue-days { color: #dc2626; font-weight: 700; margin-left: 6px; white-space: nowrap; }
.task-overdue { color: #dc2626; }
.task-kanban-avatar { width: 26px; height: 26px; border-radius: 50%; background: linear-gradient(145deg, var(--orange), #a5ab97); color: #fff; font-size: 10px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }

/* Editable status badge: keeps the .cr-badge look but behaves like .bday-filter —
   an invisible <select> stretched over the pill opens the native picker on click. */
.cr-status-pill {
    position: relative;
    display: inline-flex;
    align-items: center;
    /* Fully rounded, unlike the read-only .cr-badge it builds on: an editable control should
       read as a button, and 999px is the app-wide pill convention (.bday-filter, .ops-segment). */
    border-radius: 999px;
    padding: 4px 22px 4px 12px;
    cursor: pointer;
}
.cr-status-pill > select {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    border: none;
    background: transparent;
    cursor: pointer;
}
.cr-status-pill > select:focus { outline: none; }
.cr-status-pill > select:disabled { cursor: default; }
.cr-status-pill::after {
    content: "";
    position: absolute;
    right: 8px;
    top: 50%;
    width: 5px;
    height: 5px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: translateY(-70%) rotate(45deg);
    opacity: .75;
    pointer-events: none;
}

/* ── Create modal ─────────────────────────────────────────────────────── */
.pv-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .45);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1050;
    padding: 20px;
}
.pv-modal {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, .3);
    width: 100%;
    max-width: 820px;
    max-height: calc(100vh - 40px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.pv-modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border);
}
.pv-modal-head h2 { font-size: 17px; margin: 0; color: var(--text-title); }
.pv-modal-close {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 16px;
    cursor: pointer;
}
.pv-modal-form {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}
.pv-modal-body { padding: 16px 20px; overflow-y: auto; flex: 1 1 auto; min-height: 0; }
.cr-wizard-body { min-height: 480px; }
.cr-status-modal { max-width: 560px; }
.cr-detail-head {
    display: flex;
    flex-direction: column;
    gap: 5px;
    flex: 1;
    min-width: 0;
}
.cr-detail-subject {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-title);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cr-detail-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    font-size: 12px;
    color: var(--text-muted);
}
.cr-detail-meta i { font-size: 11px; }
.cr-detail-client { color: var(--orange); font-weight: 600; }
.cr-detail-sep { color: var(--border); }
.cr-detail-resumo-wrap {
    border-top: 1px solid var(--border);
    max-height: 220px;
    overflow-y: auto;
}
.cr-detail-resumo {
    font-size: 13px;
    color: var(--text-main);
    line-height: 1.6;
    white-space: pre-wrap;
    margin: 0;
}
/* Caption beside the status pill, on one line. The caption carries its own class instead
   of styling the label element, because the label IS the pill here and would otherwise
   inherit a column layout and font that fight .cr-badge. */
.cr-status-body {
    border-top: 1px solid var(--border);
    display: flex;
    align-items: center;
    gap: 10px;
}
.cr-status-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-label);
}
.cr-form-top {
    display: grid;
    grid-template-columns: .8fr 1.2fr 1.2fr .8fr;
    gap: 12px 16px;
    margin-bottom: 14px;
}
.cr-content-panel .cr-form-top { margin-bottom: 0; }
.cr-panel-hint {
    display: flex;
    align-items: center;
    font-size: 12px;
    color: var(--text-muted);
    margin: 0 0 14px;
}
.cr-id-row { display: flex; gap: 16px; margin-bottom: 16px; }
.cr-id-row:last-child { margin-bottom: 0; }
.cr-field { display: flex; flex-direction: column; gap: 6px; }
.cr-field-kind { flex: 0 0 200px; }
.cr-field-grow { flex: 1 1 auto; min-width: 0; }
.cr-field-date { flex: 0 0 170px; }
@media (max-width: 560px) {
    .cr-id-row { flex-wrap: wrap; }
    .cr-field-kind, .cr-field-date { flex-basis: 100%; }
}
.cr-kind-toggle {
    display: flex;
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
}
.cr-kind-btn {
    flex: 1;
    padding: 7px 10px;
    font-size: 13px;
    font-weight: 600;
    background: var(--card-bg);
    color: var(--text-muted);
    border: none;
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}
.cr-kind-btn + .cr-kind-btn { border-left: 1px solid var(--border); }
.cr-kind-btn:hover:not(.selected) { background: var(--alt-bg); }
.cr-kind-btn.selected { background: var(--orange); color: #fff; }
.cr-wizard-track {
    display: flex;
    align-items: flex-start;
    margin-bottom: 20px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--border);
}
.cr-wizard-node {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
    cursor: default;
}
.cr-wizard-node.clickable { cursor: pointer; }
.cr-wizard-node.clickable:hover .cr-wizard-node-circle { box-shadow: 0 0 0 4px color-mix(in srgb, var(--orange) 18%, transparent); }
.cr-wizard-node.clickable:hover .cr-wizard-node-label { color: var(--orange); }
.cr-wizard-node-circle {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    border: 2px solid var(--border);
    background: var(--card-bg);
    color: var(--text-muted);
    transition: background .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease;
}
.cr-wizard-node-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    white-space: nowrap;
    transition: color .2s ease;
}
.cr-wizard-node.done .cr-wizard-node-circle {
    background: var(--orange);
    border-color: var(--orange);
    color: #fff;
}
.cr-wizard-node.active .cr-wizard-node-circle {
    background: var(--orange);
    border-color: var(--orange);
    color: #fff;
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--orange) 25%, transparent);
}
.cr-wizard-node.done .cr-wizard-node-label,
.cr-wizard-node.active .cr-wizard-node-label { color: var(--text-title); }
.cr-wizard-connector {
    flex: 1 1 auto;
    height: 3px;
    margin-top: 15px;
    background: var(--border);
    border-radius: 2px;
    transition: background .2s ease;
}
.cr-wizard-connector.done { background: var(--orange); }
.cr-conteudo-toggle {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 16px;
}
.cr-conteudo-option {
    position: relative;
    flex: 1 1 220px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    border: 1.5px solid var(--border);
    border-radius: 10px;
    background: var(--card-bg);
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.cr-conteudo-option input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.cr-conteudo-option:hover { border-color: var(--orange); }
.cr-conteudo-option:has(input:focus-visible) { outline: 2px solid var(--orange); outline-offset: 2px; }
.cr-conteudo-option.selected {
    border-color: var(--orange);
    background: var(--alt-bg);
    box-shadow: 0 0 0 1px var(--orange) inset;
}
.cr-conteudo-option-icon {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    background: var(--alt-bg);
    color: var(--text-muted);
    transition: background .15s ease, color .15s ease;
}
.cr-conteudo-option.selected .cr-conteudo-option-icon { background: var(--orange); color: #fff; }
.cr-conteudo-option-text { display: flex; flex-direction: column; gap: 2px; }
.cr-conteudo-option-title { font-size: 13px; font-weight: 700; color: var(--text-title); }
.cr-conteudo-option-desc { font-size: 11.5px; font-weight: 400; color: var(--text-muted); line-height: 1.4; }
.cr-content-panel {
    background: var(--alt-bg);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 14px 16px;
    margin-bottom: 14px;
}
.pv-modal-body .cr-content-panel-label {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 0;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-label);
    margin-bottom: 8px;
}
.cr-content-textarea {
    font-size: 13px;
    line-height: 1.5;
    border-radius: 8px;
    resize: vertical;
}
/* Summary length and prompt choice, sitting just above the AI trigger. Two groups side by
   side on a wide modal, stacked once they no longer fit — each one keeps its own label with
   the toggle it names, which a single wrapping row of buttons would lose. */
.cr-ai-options {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 12px;
}
.cr-ai-option-group {
    flex: 1 1 220px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.cr-ai-option-label {
    display: flex;
    align-items: center;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-label);
}
/* The custom-prompt field is a content panel like the others, only tied to the toggle above
   it — the tighter top margin keeps it reading as part of that choice. */
.cr-ai-prompt { margin-bottom: 12px; }
.cr-ai-prompt .cr-panel-hint { margin-top: 6px; }

/* The AI-summary trigger IS the panel: the whole tinted block is one button, so the click
   target is the block rather than a small control parked inside it. It is a <button>
   element, hence the font/text resets browsers apply to form controls. */
.cr-ai-panel {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    width: 100%;
    background: color-mix(in srgb, var(--orange) 6%, var(--card-bg));
    /* Transparent rather than absent: keeps the box exactly the size it was when the border
       was drawn, so nothing around it shifts. The pointer glow below is the only frame now. */
    border: 1px solid transparent;
    border-radius: 10px;
    padding: 16px;
    /* Buttons do not inherit type styles. */
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    color: var(--orange-dark);
    text-align: center;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease, opacity .15s ease;
    /* Anchors the glow ring below and positions its gradient in the panel's own space. */
    position: relative;
    isolation: isolate;
}

.cr-ai-panel i { font-size: 15px; }

.cr-ai-panel:hover:not(:disabled) {
    background: color-mix(in srgb, var(--orange) 11%, var(--card-bg));
    border-color: color-mix(in srgb, var(--orange) 65%, var(--border));
}

/* Focus has to stay visible now that the block is keyboard-reachable — the glow is
   pointer-driven and never fires for a keyboard user. */
.cr-ai-panel:focus-visible {
    outline: 2px solid var(--orange);
    outline-offset: 2px;
}

.cr-ai-panel:disabled { opacity: .55; cursor: not-allowed; }

/* Generating: still enabled, so it must NOT borrow the disabled fade — the spinner is what
   says "working", and dimming it here is exactly what made the trigger read as blocked.
   Only the cursor changes, so a second click feels acknowledged rather than dead. */
.cr-ai-panel.is-busy { cursor: progress; }

/* Pointer-following border glow (border-glow.js sets --glow-x/y/opacity).
   The ring is a radial gradient clipped to the border band by the two-layer mask trick:
   one mask covers the whole box, the other only the content box, and excluding the second
   from the first leaves just the 2px frame. A plain box-shadow could not follow the
   pointer, and an outline cannot hold a gradient.

   Two-tone: deep green at the pointer, fading out through the palette's sage before going
   transparent. The dark centre is what gives the focal point definition now that the panel
   itself has no drawn border — a single-colour ring read as washed out without it. */
.cr-ai-panel[data-border-glow]::before {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: 12px;
    padding: 2px;
    background: radial-gradient(120px circle at var(--glow-x, 50%) var(--glow-y, 50%),
                var(--green-dark) 0%,
                color-mix(in srgb, var(--green-dark) 45%, var(--orange)) 28%,
                var(--orange) 52%,
                color-mix(in srgb, var(--orange) 50%, transparent) 68%,
                transparent 80%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
            mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    opacity: var(--glow-opacity, 0);
    transition: opacity .18s ease;
    /* Decorative, and it sits outside the panel's own background box. */
    pointer-events: none;
    z-index: -1;
}

/* A disabled trigger offers nothing to reach for, so it should not invite the pointer. */
.cr-ai-panel:disabled[data-border-glow]::before { opacity: 0 !important; }

@media (prefers-reduced-motion: reduce) {
    .cr-ai-panel[data-border-glow]::before { transition: none; }
}

/* Error and result now sit below the trigger instead of inside it, so they carry their own
   spacing rather than the divider the panel used to provide. */
.cr-ai-error { margin-top: 12px; }

.cr-ai-result {
    margin-top: 14px;
    padding: 14px 16px;
    background: var(--alt-bg);
    border: 1px solid var(--border);
    border-radius: 10px;
}

/* Separates the AI block from the tasks panel that follows it. The gap is put on the panel
   rather than as a margin-bottom on the trigger because the trigger's own error and result
   sit deliberately tight below it — a margin there would push those away too.
   Three selectors, one per possible last element of the AI block (trigger alone, trigger +
   error, trigger + result): the block is a RenderFragment with no wrapper, so all of them
   are direct siblings of the panel. */
.cr-ai-panel + .cr-content-panel,
.cr-ai-error + .cr-content-panel,
.cr-ai-result + .cr-content-panel {
    margin-top: 14px;
}

/* ── Teams meeting picker (call report, "Reunião do Teams" content type) ────── */
.cr-reuniao-tools { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.cr-reuniao-janela { width: auto; font-size: 12px; }
.cr-reuniao-filtro {
    display: flex !important;
    flex-direction: row !important;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--text-muted);
    margin-bottom: 10px;
    cursor: pointer;
}
/* Bounded so a month of meetings scrolls inside the panel instead of pushing the AI trigger
   and the tasks off the modal. */
.cr-reuniao-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 260px;
    overflow-y: auto;
}
.cr-reuniao-card {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--card-bg);
    /* Buttons do not inherit type styles. */
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease;
}
.cr-reuniao-card:hover:not(:disabled) { border-color: var(--orange); }
.cr-reuniao-card:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
.cr-reuniao-card:disabled { opacity: .6; cursor: progress; }
.cr-reuniao-card.selected {
    border-color: var(--orange);
    background: var(--alt-bg);
    box-shadow: 0 0 0 1px var(--orange) inset;
}
.cr-reuniao-card-icon {
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--alt-bg);
    color: var(--text-muted);
}
.cr-reuniao-card.selected .cr-reuniao-card-icon { background: var(--orange); color: #fff; }
.cr-reuniao-card-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.cr-reuniao-card-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-title);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.cr-reuniao-card-meta {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 11.5px;
    font-weight: 400;
    color: var(--text-muted);
}
.cr-reuniao-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.cr-reuniao-badge {
    display: inline-flex;
    align-items: center;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 3px 9px;
}
/* Read-only, so it scrolls in both axes rather than reflowing a transcript's long turns. */
.cr-reuniao-preview {
    margin: 10px 0 0;
    padding: 10px 12px;
    max-height: 240px;
    overflow: auto;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 12px;
    line-height: 1.55;
    white-space: pre-wrap;
    color: var(--text-title);
}
.cr-reuniao-detalhe { display: block; margin-top: 4px; font-size: 11px; color: var(--text-muted); }

/* ── "Reuniões sem call report" panel (Comercial > Call Reports) ────────────── */
.cr-pendentes { margin-bottom: 12px; }
.cr-pendentes-head {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    background: none;
    border: none;
    padding: 0;
    /* Buttons do not inherit type styles. */
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    color: var(--text-title);
    cursor: pointer;
}
.cr-pendentes-head:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; }
.cr-pendentes-head i:first-child { color: var(--orange); }
.cr-pendentes-list { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.cr-pendentes-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 12px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--alt-bg);
}
.cr-pendentes-text { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.cr-pendentes-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-title);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.cr-pendentes-meta {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 11.5px;
    color: var(--text-muted);
}
/* Hide a meeting from the panel. Kept permanently visible rather than revealed on hover:
   the row is also reached by keyboard and on touch, where hover never happens. */
.cr-pendentes-hide {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    flex: none;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 8px;
    background: none;
    color: var(--text-muted);
    font-size: 13px;
    cursor: pointer;
    transition: color .15s ease, background .15s ease, border-color .15s ease;
}
.cr-pendentes-hide:hover {
    color: var(--text-title);
    background: var(--card-bg);
    border-color: var(--border);
}
.cr-pendentes-hide:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
.cr-pendentes-row.is-hidden { opacity: .62; }
.cr-pendentes-footer {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
}
.cr-pendentes-footer-toggle,
.cr-pendentes-restore-all {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0;
    border: none;
    background: none;
    font-size: 11.5px;
    color: var(--text-muted);
    cursor: pointer;
}
.cr-pendentes-footer-toggle:hover,
.cr-pendentes-restore-all:hover { color: var(--text-title); text-decoration: underline; }
.cr-pendentes-restore-all { margin-left: auto; }
.cr-pendentes-footer-toggle:focus-visible,
.cr-pendentes-restore-all:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; }
.pv-modal-body label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-label);
}
.cr-form-full { display: flex; flex-direction: column; gap: 4px; }
.cr-form-participantes { margin-top: 14px; }
.cr-status-tasks-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.cr-status-task-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--card-bg); }
.cr-status-task-text { flex: 1; font-size: 13px; color: var(--text-title); }
.cr-status-task-meta { font-size: 12px; color: var(--text-muted); white-space: nowrap; }
.cr-status-tasks-empty { font-size: 13px; color: var(--text-muted); margin: 0; }
.cr-form-participantes-label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-label);
    margin-bottom: 8px;
}
.cr-panel-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}
.cr-panel-count {
    font-size: 11px;
    font-weight: 700;
    color: #fff;
    background: var(--orange);
    border-radius: 999px;
    min-width: 18px;
    height: 18px;
    padding: 0 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.cr-task-list { display: flex; flex-direction: column; gap: 10px; }
.cr-task-card {
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--card-bg);
}
.cr-task-badge {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    color: var(--orange);
    background: color-mix(in srgb, var(--orange) 12%, var(--card-bg));
    border-radius: 999px;
    padding: 2px 10px;
    margin-bottom: 8px;
}
.cr-participante-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 10px;
}
.cr-participante-chip {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1.5px solid var(--border);
    border-radius: 10px;
    background: var(--card-bg);
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.cr-participante-chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.cr-participante-chip:hover { border-color: var(--orange); }
.cr-participante-chip:has(input:focus-visible) { outline: 2px solid var(--orange); outline-offset: 2px; }
.cr-participante-chip.selected {
    border-color: var(--orange);
    background: var(--alt-bg);
    box-shadow: 0 0 0 1px var(--orange) inset;
}
.cr-participante-chip-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--alt-bg);
    color: var(--text-muted);
    font-size: 14px;
    flex-shrink: 0;
    transition: background .15s ease, color .15s ease;
}
.cr-participante-chip.selected .cr-participante-chip-icon { background: var(--orange); color: #fff; }
.cr-participante-chip-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-title);
    user-select: none;
    line-height: 1.25;
}
.pv-modal-body .validation-message { font-size: 11px; color: #c0392b; font-weight: 500; }
.pv-modal-foot {
    display: flex;
    justify-content: center;
    gap: 12px;
    padding: 16px 20px;
    border-top: 1px solid var(--border);
}
@media (max-width: 640px) {
    .cr-form-top { grid-template-columns: 1fr 1fr; }
    .pv-modal-foot { flex-wrap: wrap; }
}

/* ============================================================
   Loader BrainHub — o símbolo da marca derrete num anel pulsante
   ============================================================
   Sem fundo próprio: as cores saem de variáveis, então o mesmo componente
   serve em card branco, painel cinza ou sobre o verde da marca.
   A animação é desenhada por js/bh-loader.js; aqui fica só a aparência. */

.bh {
    --h:     56px;     /* altura da marca; escala tudo */
    --fonte: 0.32;     /* corpo do logotipo em relação a --h */
    --blob: #13301F;   /* manchas do símbolo */
    --dot:  #B3B8A4;   /* pontos de apoio */
    --txt:  #13301F;   /* "BRAIN" */
    --txt2: #8E9680;   /* "HUB" */

    display: inline-flex;
    align-items: center;
    gap: calc(var(--h) * 0.38);
    background: none;
}

.bh svg  { height: var(--h); width: auto; display: block; overflow: visible; }
.bh .blob { fill: var(--blob); }
.bh .dot  { fill: var(--dot); }

.bh .palavra {
    display: flex;
    font-family: Inter, 'Segoe UI', system-ui, -apple-system, sans-serif;
    font-weight: 300;
    font-size: calc(var(--h) * var(--fonte));
    letter-spacing: 0.05em;
    line-height: 1;
    color: var(--txt);
}
.bh .palavra span { display: inline-block; }
.bh .palavra .sufixo { color: var(--txt2); }

/* Só o símbolo, sem letreiro — para carregamentos embutidos, onde o
   lockup inteiro ficaria maior que o conteúdo que ele substitui. */
.bh--so-marca { gap: 0; }

/* Sobre fundo escuro ou sobre a cor da marca. */
.bh--claro { --blob: #FFFFFF; --dot: #D7DAC9; --txt: #FFFFFF; --txt2: #D7DAC9; }

/* ── Tamanhos usados no hub ── */
.bh--sm { --h: 44px; }
.bh--lg { --h: 72px; }

/* Wrapper: centraliza o loader no espaço que o conteúdo vai ocupar.
   Não pinta fundo — o loader herda a tela em que está. */
.bv-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 0;
}

/* Carregamento embutido em painel já renderizado (lista de tarefas,
   timeline): ocupa pouca altura para não empurrar o conteúdo ao redor. */
.bv-loading--inline {
    padding: 14px 0;
}

/* Contador de aprovados na aba — pílula discreta ao lado do rótulo. */
.fat-tab-count {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 7px;
    border-radius: 10px;
    background: var(--status-success-bg);
    color: var(--text-secondary);
    font-size: 11px;
    font-weight: 600;
    line-height: 1.5;
}

/* ── Modal de reprovação: escolha do motivo ──
   Botões, não radios: a escolha carrega uma descrição de consequência
   ("vai para a fila do Back Office"), e o alvo de clique é o cartão inteiro. */
.fat-motivo-opcoes {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 18px;
}
@media (max-width: 560px) {
    .fat-motivo-opcoes { grid-template-columns: 1fr; }
}
.fat-motivo {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--card-bg);
    text-align: left;
    cursor: pointer;
    font-family: inherit;
    color: inherit;
    transition: border-color .12s, background .12s;
}
.fat-motivo:hover { background: var(--alt-bg); }
.fat-motivo.selected {
    border-color: var(--text-secondary);
    background: var(--alt-bg);
    box-shadow: 0 0 0 1px var(--text-secondary) inset;
}
.fat-motivo-titulo { font-weight: 600; font-size: 13.5px; }
.fat-motivo-desc   { font-size: 12px; color: var(--text-muted); line-height: 1.35; }

.fat-obs-label {
    display: block;
    margin-bottom: 6px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text-label);
}

/* A observação é texto livre e costuma ser curta; quebra em vez de esticar a tabela. */
.fat-obs-cell {
    max-width: 280px;
    white-space: normal;
    color: var(--text-muted);
    font-size: 12.5px;
}

.fat-tab-count--warn { background: var(--status-warning-bg); }

/* Selo de "o valor mudou depois da devolução" — na aba Aguardando ajuste.
   Fica abaixo do valor, não ao lado, para não empurrar a coluna numérica. */
.fat-valor-alterado {
    display: block;
    margin-top: 3px;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary);
    white-space: nowrap;
}
.fat-valor-alterado i { margin-right: 3px; }

/* Fila do Back Office: a divergência é a coluna que se lê primeiro. */
.fat-divergencia { font-weight: 600; }

/* Atalhos para os dois desfechos comuns da devolução. */
.fat-resposta-atalhos {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 14px;
}

/* Marca a pendente que já passou por uma devolução — sem ela, some no meio
   das que nunca saíram do Finance. */
.fat-voltou-badge {
    display: inline-block;
    margin-left: 8px;
    padding: 1px 7px;
    border-radius: 10px;
    background: var(--status-warning-bg);
    color: var(--text-secondary);
    font-size: 10.5px;
    font-weight: 600;
    white-space: nowrap;
    cursor: help;
}
.fat-voltou-badge i { margin-right: 3px; }

/* ── Letreiro do loader: onda de opacidade + escala ──
   Escopado em .bh--anim: o BrandLogo monta o mesmo letreiro e precisa ficar parado.
   É CSS puro, então o JS não toca mais nas letras a cada quadro. */
.bh--anim .palavra span {
    opacity: 0.4;
    animation: bh-letra 2s infinite;
}

/* O atraso por letra é o que faz a onda correr em vez de tudo piscar junto.
   São 8 (BRAINHUB), com folga até 10 caso o letreiro mude. */
.bh--anim .palavra span:nth-child(1)  { animation-delay: 0s;   }
.bh--anim .palavra span:nth-child(2)  { animation-delay: 0.1s; }
.bh--anim .palavra span:nth-child(3)  { animation-delay: 0.2s; }
.bh--anim .palavra span:nth-child(4)  { animation-delay: 0.3s; }
.bh--anim .palavra span:nth-child(5)  { animation-delay: 0.4s; }
.bh--anim .palavra span:nth-child(6)  { animation-delay: 0.5s; }
.bh--anim .palavra span:nth-child(7)  { animation-delay: 0.6s; }
.bh--anim .palavra span:nth-child(8)  { animation-delay: 0.7s; }
.bh--anim .palavra span:nth-child(9)  { animation-delay: 0.8s; }
.bh--anim .palavra span:nth-child(10) { animation-delay: 0.9s; }

@keyframes bh-letra {
    0%, 100% { opacity: 0.4; transform: translateY(0); }
    20%      { opacity: 1;   transform: scale(1.15); }
    40%      { opacity: 0.7; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    .bh--anim .palavra span { animation: none; opacity: 1; }
}

/* Sub-abas do Finance — as três etapas da validação, um nível abaixo das abas
   principais. Menores e sem o peso visual delas, para a hierarquia ficar óbvia. */
.cmp-subtabs {
    margin-top: 4px;
    margin-bottom: 14px;
}
.cmp-subtabs .cmp-tab {
    font-size: 12.5px;
    padding-top: 7px;
    padding-bottom: 7px;
}

/* Divergência positiva: o sistema cobra mais do que a instituição informou — o caso
   que vira cobrança indevida se passar. A negativa não é destacada de propósito. */
.fat-divergencia-alta {
    color: var(--status-error);
    font-weight: 600;
}

/* Marca a aprovação que veio do prazo, não de uma pessoa. */
.fat-auto-badge {
    display: inline-block;
    margin-left: 6px;
    font-size: 10.5px;
    font-weight: 600;
    color: var(--text-muted);
    white-space: nowrap;
    cursor: help;
}
.fat-auto-badge i { margin-right: 3px; }

/* ── Call report: unfinished-draft banner ───────────────────────────────────
   Offered at the top of the wizard when localStorage still holds a call report
   the user closed without saving (see CallReportDraftStore). */
.cr-rascunho-banner {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid var(--orange);
    border-left-width: 4px;
    border-radius: 8px;
    background: var(--alt-bg);
}
.cr-rascunho-banner > .bi { font-size: 18px; color: var(--orange); }
.cr-rascunho-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1 1 240px;
    min-width: 0;
}
.cr-rascunho-meta,
.cr-rascunho-nota {
    font-size: 12px;
    color: var(--text-muted);
}
.cr-rascunho-actions {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

/* The same draft, announced on the screen instead of inside the modal — same layout, card
   chrome instead of the inline alert. */
.cr-rascunho-aviso {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    padding: 14px 16px;
    margin-bottom: 16px;
    border-left: 4px solid var(--orange);
}
.cr-rascunho-aviso > .bi { font-size: 18px; color: var(--orange); }