/* Design Tokens */
:root {
    /* O portal é light-only por design. "only light" desliga o auto-dark do
       Chrome/WebView Android (Force Dark), que escurece páginas sem
       color-scheme declarado — inclusive na IMPRESSÃO (relatório saía com
       fundo preto em celular com tema escuro). Par com a <meta name=
       "color-scheme"> no App.razor. */
    color-scheme: only light;

    --color-sidebar-bg: #0F1E33;
    --color-sidebar-hover: #1E3A5F;
    --color-primary: #2563EB;
    --color-primary-hover: #1D4ED8;
    --color-success: #10B981;
    --color-warning: #F59E0B;
    --color-danger: #F43F5E;
    --color-surface: #FFFFFF;
    --color-background: #F5F7FA;
    --color-border: #EEF0F3;
    --color-text-primary: #1E293B;
    --color-text-secondary: #64748B;
    --color-text-muted: #94A3B8;

    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 12px;

    --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    font-family: var(--font-family);
    background-color: var(--color-background);
    color: var(--color-text-primary);
}

.app-snackbar-host,
.app-snackbar-host.mud-snackbar-location-top-left {
    position: fixed !important;
    top: 16px;
    left: calc(260px + 16px);
    right: auto;
    margin: 0 !important;
    z-index: 1400;
    pointer-events: none;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.app-snackbar-host .mud-snackbar {
    min-width: 320px;
    max-width: 420px;
    background: transparent;
    opacity: 1;
    border-radius: 12px;
    box-shadow: 0 14px 28px rgba(15, 23, 42, 0.18);
    pointer-events: auto;
}

.app-snackbar-host .mud-alert {
    align-items: flex-start;
    border-radius: 12px;
    border: 1px solid transparent;
}

.app-snackbar-host .mud-alert-icon {
    margin-top: 2px;
    font-size: 12px;
}

.app-snackbar-host .mud-alert-message {
    font-size: 13px;
    line-height: 1.45;
}

.app-snackbar-host .mud-alert-filled-success {
    background: #ECFDF5 !important;
    border-color: #A7F3D0;
    color: #065F46;
}

.app-snackbar-host .mud-alert-filled-error {
    background: #FEF2F2 !important;
    border-color: #FECACA;
    color: #991B1B;
}

.app-snackbar-host .mud-alert-filled-warning,
.app-snackbar-host .mud-alert-filled-info {
    background: #FFFBEB !important;
    border-color: #FDE68A;
    color: #92400E;
}

.app-snackbar-host .mud-alert-filled-success .mud-alert-icon,
.app-snackbar-host .mud-alert-filled-error .mud-alert-icon,
.app-snackbar-host .mud-alert-filled-warning .mud-alert-icon,
.app-snackbar-host .mud-alert-filled-info .mud-alert-icon,
.app-snackbar-host .mud-alert-filled-success .mud-button-root,
.app-snackbar-host .mud-alert-filled-error .mud-button-root,
.app-snackbar-host .mud-alert-filled-warning .mud-button-root,
.app-snackbar-host .mud-alert-filled-info .mud-button-root {
    color: inherit;
}

.app-snackbar-host .mud-snackbar-close-button {
    align-self: flex-start;
}

/* Layout Principal */
.acelerador-layout {
    display: flex;
    height: 100vh;
    overflow: hidden;
}

/* Sidebar */
.acelerador-sidebar {
    width: 260px;
    background-color: var(--color-sidebar-bg);
    color: #ffffff;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    height: 100%;
    border-right: 1px solid rgba(255, 255, 255, 0.05);
    overflow-y: auto;
}

.sidebar-logo {
    height: 68px;
    padding: 16px 20px;
    display: flex;
    align-items: center;
    gap: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.sidebar-logo--svg {
    padding: 11px 20px;
    display: block;
}

.sidebar-logo-text h3 {
    font-size: 14px;
    font-weight: 600;
    margin: 0;
    line-height: 1.2;
}

.sidebar-logo-text p {
    font-size: 11px;
    color: #94a3b8;
    margin: 0;
    line-height: 1.2;
}

.sidebar-search {
    padding: 16px;
}

.sidebar-menu {
    flex: 1;
    overflow-y: auto;
    padding: 12px 0;
}

.sidebar-menu :deep(.mud-nav-menu) {
    width: 100%;
}

.sidebar-menu :deep(.mud-nav-item) {
    color: #cbd5e1;
    font-size: 14px;
    padding-left: 12px;
    padding-right: 12px;
}

.sidebar-menu :deep(.mud-nav-item:hover) {
    background-color: var(--color-sidebar-hover);
    color: #ffffff;
}

.sidebar-menu :deep(.mud-nav-item.active) {
    background-color: var(--color-primary);
    color: #ffffff;
}

.sidebar-user {
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    padding: 12px;
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
}

.sidebar-user-info {
    flex: 1;
    min-width: 0;
}

.sidebar-user-name {
    font-size: 14px;
    font-weight: 500;
    color: #ffffff;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sidebar-user-role {
    font-size: 12px;
    color: #94a3b8;
    margin: 0;
}

/* Main Content */
.acelerador-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* TopBar */
.acelerador-topbar {
    height: 68px;
    background-color: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 32px;
    gap: 24px;
    flex-shrink: 0;
}

.topbar-breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
}

.topbar-breadcrumb-item {
    color: var(--color-text-secondary);
}

.topbar-breadcrumb-current {
    color: var(--color-text-primary);
    font-weight: 500;
}

.topbar-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Content Area
   Sem padding e sem scroll próprio: cada página controla seu próprio
   respiro e seu próprio container de scroll. Padrão "fluid" — permite
   páginas como o Kanban encostarem o scroll na borda da viewport. */
.acelerador-content {
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

/* Cada página filha direta de .acelerador-content é um flex item que
   ocupa todo o espaço. As páginas são responsáveis por seu próprio
   scroll e padding interno. */
.acelerador-content > * {
    flex: 1;
    min-height: 0;
}

/* =============================================================================
   Padrão de layout "fluid" — barra de scroll encostada nas bordas da viewport
   =============================================================================

   Este é o PADRÃO do portal. Use em qualquer página nova.

   Estrutura HTML recomendada:

     <div class="page-fluid">
         <header class="page-fluid__header">
             <!-- toolbar, filtros, breadcrumb, etc. -->
         </header>
         <section class="page-fluid__content">
             <!-- conteúdo que rola (cards, tabela, board, etc.) -->
         </section>
     </div>

   Comportamento:
   - .page-fluid     : flex column ocupando 100% da altura disponível, sem padding.
   - __header        : altura fixa (flex-shrink: 0), com margem-direita pra não
                       encostar na borda — preserva o respiro visual da toolbar.
   - __content       : flex: 1, overflow: auto. Único container de scroll
                       (vertical E horizontal). A barra fica nas bordas da
                       viewport — visual idêntico ao Azure DevOps Boards.

   Para casos onde a página precisa só de scroll vertical e padding tradicional
   (Dashboard, formulários, etc.), o pattern padrão também funciona — o
   overflow horizontal só aparece se o conteúdo exceder a largura.
   ============================================================================ */

.page-fluid {
    height: 100%;
    min-height: 0;
    display: flex;
    flex-direction: column;
    background: #F5F7FA;
}

.page-fluid__header {
    flex-shrink: 0;
    margin: 24px 24px 0 24px;
}

.page-fluid__content {
    flex: 1;
    min-height: 0;
    overflow: auto;
    padding: 16px 0 8px 24px;
}

/* Dashboard */
.dashboard-container {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 32px;
    overflow-y: auto;
    height: 100%;
    min-height: 0;
}

.dashboard-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.dashboard-header-actions {
    display: flex;
    gap: 12px;
}

.kpi-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.kpi-label {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--color-text-secondary);
    letter-spacing: 0.5px;
}

.kpi-value {
    font-size: 28px;
    font-weight: 700;
    margin: 8px 0;
}

.quick-action {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    height: auto !important;
    padding: 12px !important;
    text-align: left;
}

.quick-action div small {
    font-size: 12px;
    color: var(--color-text-secondary);
    margin-top: 4px;
}

/* Kanban — todos os estilos vivem em Components/Pages/KanbanGestor.razor.css
   (CSS scoped). Não duplicar regras .kanban-* aqui no app.css global: regras
   globais com mesma especificidade vencem o scoped e criam scroll containers
   fantasmas (overflow-x: auto promove overflow-y a auto, quebrando sticky). */

/* Login Page */
.login-page {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    /* dvh centraliza no espaço visível real do mobile (100vh inclui a área
       da barra de URL do Android e empurra o centro pra baixo). */
    min-height: 100dvh;
    background-color: #F5F7FA;
    padding: 20px;
}

/* Mobile: card mais enxuto e fonte 16px nos campos (evita o zoom automático
   do navegador ao focar). O layout em si já é fluido — só retoques. */
@media (max-width: 600px) {
    .login-page { padding: 12px; }
    .login-card { padding: 24px 18px; }
    .login-card .form-control {
        font-size: 16px;
        min-height: 44px;
    }
    .login-card .btn-block { min-height: 48px; }
}

.login-card {
    width: 100%;
    max-width: 420px;
    background: white;
    border-radius: var(--radius-lg);
    padding: 40px;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08);
    border: 1px solid var(--color-border);
}

.login-header {
    text-align: center;
    margin-bottom: 32px;
}

.login-header h2 {
    font-size: 28px;
    font-weight: 700;
    margin: 0 0 8px 0;
    color: #1E293B;
}

.login-header p {
    font-size: 13px;
    color: #64748B;
    margin: 0;
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: #1E293B;
    margin-bottom: 6px;
}

.form-group.checkbox label {
    display: flex;
    align-items: center;
    font-size: 13px;
    margin-bottom: 0;
}

.form-group.checkbox input[type="checkbox"] {
    margin-right: 8px;
}

.form-control {
    width: 100%;
    padding: 11px 12px;
    border: 1px solid #E2E8F0;
    border-radius: var(--radius-md);
    font-size: 14px;
    font-family: var(--font-family);
    background: white;
    color: #1E293B;
    transition: border-color 0.2s ease;
}

.form-control:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.form-control:disabled {
    background-color: #F8FAFC;
    color: #94A3B8;
}

.password-input-wrapper {
    position: relative;
    display: block;
}

.password-input-wrapper .password-input {
    padding-right: 42px;
}

.password-toggle {
    position: absolute;
    top: 50%;
    right: 6px;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: var(--radius-md);
    color: #64748B;
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    transition: color 0.15s ease, background-color 0.15s ease;
}

.password-toggle:hover:not(:disabled) {
    color: #1E293B;
    background-color: #F1F5F9;
}

.password-toggle:active:not(:disabled) {
    color: var(--color-primary);
    background-color: #E2E8F0;
}

.password-toggle:focus {
    outline: none;
}

.password-toggle:disabled {
    cursor: not-allowed;
    opacity: 0.5;
}

.password-toggle svg {
    pointer-events: none;
}

.btn-block {
    width: 100%;
    padding: 11px 16px;
    margin-top: 24px;
}

.alert {
    padding: 12px 14px;
    border-radius: var(--radius-md);
    margin-bottom: 16px;
    font-size: 13px;
}

.alert-danger {
    background-color: #FEE2E2;
    color: #7F1D1D;
    border: 1px solid #FECACA;
}

.alert-success {
    background-color: #ECFDF5;
    color: #065F46;
    border: 1px solid #D1FAE5;
}

.login-footer-text {
    text-align: center;
    margin-top: 24px;
    font-size: 13px;
}

.login-footer-text a {
    color: var(--color-primary);
    text-decoration: none;
}

.login-footer-text a:hover {
    text-decoration: underline;
}

/* Aceite das Políticas de Uso no login. Discreto: menor e mais apagado que o
   resto do rodapé — é aviso de consentimento, não chamada pra ação. O gatilho é
   <button> (abre modal, não navega), então precisa anular o visual de botão e
   herdar o de link. */
.login-policy {
    margin-top: 16px;
    font-size: 11.5px;
    line-height: 1.5;
    color: #94A3B8;
}

.login-policy__link {
    padding: 0;
    border: none;
    background: none;
    font: inherit;
    color: var(--color-primary);
    text-decoration: underline;
    cursor: pointer;
}

.login-policy__link:hover { opacity: 0.8; }

/* Botão de suporte via WhatsApp na tela de login — pílula escura com
   ícone em círculo verde. Anula o estilo de link do .login-footer-text. */
.login-support-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    padding: 6px 18px 6px 6px;
    background-color: #0B1A2E;
    border-radius: 999px;
    color: #fff !important;
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    transition: background 0.15s, transform 0.15s;
}

.login-support-btn:hover {
    background-color: #14304F;
    text-decoration: none !important;
}

.login-support-btn__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    flex-shrink: 0;
    background-color: #25D366; /* verde oficial WhatsApp */
    border-radius: 50%;
    color: #fff;
}

.login-support-btn__icon svg {
    width: 15px;
    height: 15px;
}

.blank-layout {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    background-color: #F5F7FA;
}

/* Loading State */
.loading-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 20px;
    gap: 16px;
}

/* Animations */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.lead-card {
    animation: fadeIn 0.3s ease;
}

.lead-card.leaving {
    opacity: 0;
    transform: scale(0.9);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.lead-card.entering {
    opacity: 0;
    transform: translateY(-10px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.lead-card.entering.active {
    opacity: 1;
    transform: translateY(0);
}

/* Scrollbar */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: #d1d5db;
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: #9ca3af;
}

/* Responsive */
@media (max-width: 960px) {
    .acelerador-sidebar {
        width: 200px;
    }

    .kanban-board {
        gap: 12px;
    }

    .kanban-column {
        min-width: 260px;
    }

    .dashboard-header {
        flex-direction: column;
        gap: 16px;
    }

    .dashboard-header-actions {
        width: 100%;
    }

    .dashboard-header-actions button {
        flex: 1;
    }
}

/* A topbar e o backdrop do menu mobile só existem em ≤600px — ocultos por
   padrão; o @media abaixo os revela. */
.mobile-topbar,
.sidebar-backdrop {
    display: none;
}

@media (max-width: 600px) {
    .app-snackbar-host,
    .app-snackbar-host.mud-snackbar-location-top-left {
        top: 16px;
        left: 16px;
        right: 16px;
    }

    .app-snackbar-host .mud-snackbar {
        min-width: 0;
        max-width: none;
        width: 100%;
    }

    /* ---- Menu mobile (drawer off-canvas) ----
       Em ≤600px a sidebar sai do fluxo e vira um painel que desliza da
       esquerda. Uma topbar fina com o hambúrguer abre/fecha o menu. */

    /* Topbar mobile fixa no topo — reserva espaço via padding no .acelerador-main */
    .mobile-topbar {
        display: flex;
        align-items: center;
        gap: 12px;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        height: 52px;
        padding: 0 12px;
        background-color: var(--color-sidebar-bg);
        color: #fff;
        border-bottom: 1px solid rgba(255, 255, 255, 0.06);
        z-index: 1090;
    }

    .mobile-topbar-toggle {
        background: transparent;
        border: 0;
        color: #fff;
        font-size: 22px;
        line-height: 1;
        padding: 8px 10px;
        cursor: pointer;
        border-radius: 8px;
    }

    .mobile-topbar-toggle:active {
        background: rgba(255, 255, 255, 0.1);
    }

    .mobile-topbar-title {
        font-size: 16px;
        font-weight: 700;
        letter-spacing: -0.5px;
    }

    .mobile-topbar-title-accent {
        color: #00C4D4;
        font-weight: 800;
    }

    /* O layout segue em coluna lógica: a sidebar é overlay, o main ocupa tudo */
    .acelerador-main {
        padding-top: 52px; /* espaço pra topbar fixa */
    }

    /* Sidebar como drawer: fora da tela por padrão, desliza ao abrir */
    .acelerador-sidebar {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        width: 280px;
        max-width: 85vw;
        height: 100%;
        z-index: 1150;
        transform: translateX(-100%);
        transition: transform 0.25s ease;
        box-shadow: 2px 0 16px rgba(0, 0, 0, 0.35);
    }

    .acelerador-sidebar--mobile-open {
        transform: translateX(0);
    }

    /* No drawer o botão de recolher (« ») não faz sentido — é desktop-only */
    .sidebar-collapse-btn {
        display: none;
    }

    /* Backdrop: cobre o conteúdo quando o drawer está aberto */
    .sidebar-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.45);
        z-index: 1140;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.25s ease, visibility 0.25s ease;
    }

    .sidebar-backdrop--open {
        opacity: 1;
        visibility: visible;
    }

    .acelerador-content {
        padding: 16px;
    }

    .kanban-column {
        min-width: 240px;
    }

    /* ---- Menu mobile em GRADE de botões (cara de app) ----
       Drawer em largura total; itens viram botões grandes com o ícone em
       cima e o rótulo embaixo, 3 por linha. O título do grupo atravessa a
       linha inteira. */
    .acelerador-sidebar {
        width: 100vw;
        max-width: 100vw;
    }

    .sidebar-search { display: none; }

    .sidebar-menu { padding: 12px 14px; }

    .nav-group,
    .nav-section {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
        padding: 0;
        margin: 0 0 6px;
    }

    .nav-group-title {
        grid-column: 1 / -1;
        padding: 14px 2px 6px;
    }

    .nav-link {
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 10px;
        min-height: 92px;
        padding: 12px 6px;
        background: rgba(255, 255, 255, 0.05);
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 14px;
        text-align: center;
    }

    .nav-link:active {
        background: var(--color-sidebar-hover);
    }

    .nav-link__icon { font-size: 30px; line-height: 1; }

    .nav-link__label {
        font-size: 12px;
        line-height: 1.25;
        color: #cbd5e1;
    }

    /* Botão Discador na grade — é <button>, então zera o chrome nativo.
       Seletores com .acelerador-sidebar pra vencer o display:none base
       (que vem depois no arquivo). */
    .acelerador-sidebar .nav-section--dialer-mobile { display: grid; }
    .acelerador-sidebar .nav-link--dialer-mobile {
        display: flex;
        cursor: pointer;
        font-family: inherit;
        color: #cbd5e1;
    }

    /* Dev tools: item único também vira botão de grade (herda .nav-link). */
    .nav-section--dev {
        border-top: 1px solid rgba(255, 255, 255, 0.06);
        padding-top: 10px;
        margin-top: 8px;
    }

    /* ---- Discador em tela cheia dentro do drawer ----
       O iframe fica SEMPRE montado no rodapé da sidebar (sessão Callix).
       Fechado: host colapsa a 0 (sem display:none — evita qualquer
       recomputação agressiva do iframe). Aberto: host vira o corpo do
       drawer e o resto some; "Voltar ao menu" em cima. */
    .acelerador-sidebar:not(.acelerador-sidebar--dialer-open) .discador-iframe-host {
        height: 0 !important;
        min-height: 0;
        overflow: hidden;
        border-top: 0;
    }

    .acelerador-sidebar--dialer-open .sidebar-menu,
    .acelerador-sidebar--dialer-open .sidebar-support,
    .acelerador-sidebar--dialer-open .sidebar-user-wrapper {
        display: none;
    }

    .acelerador-sidebar--dialer-open .discador-iframe-host {
        flex: 1 1 auto;
        height: auto !important;
        min-height: 0;
    }

    /* O toggle compacto do iframe não faz sentido em tela cheia. */
    .acelerador-sidebar--dialer-open .discador-iframe-toggle { display: none; }

    .acelerador-sidebar--dialer-open .mobile-dialer-back {
        display: flex;
        align-items: center;
        gap: 10px;
        min-height: 48px;
        padding: 0 16px;
        background: transparent;
        border: 0;
        border-top: 1px solid rgba(255, 255, 255, 0.08);
        color: #fff;
        font-size: 14px;
        font-weight: 600;
        font-family: inherit;
        cursor: pointer;
        text-align: left;
    }
}

/* Form Styles */
input[type="text"],
input[type="email"],
input[type="password"],
select {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    font-size: 14px;
    font-family: var(--font-family);
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
select:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

input[type="checkbox"] {
    margin-right: 8px;
    cursor: pointer;
}

/* Buttons */
.btn {
    padding: 10px 16px;
    border: none;
    border-radius: var(--radius-md);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: var(--font-family);
}

.btn-primary {
    background-color: var(--color-primary);
    color: white;
}

.btn-primary:hover {
    background-color: var(--color-primary-hover);
}

.btn-outline {
    background-color: transparent;
    border: 1px solid var(--color-border);
    color: var(--color-text-primary);
}

.btn-outline:hover {
    background-color: var(--color-background);
}

.btn-lg {
    padding: 12px 20px;
    font-size: 16px;
}

/* Alerts */
.alert {
    padding: 12px 16px;
    border-radius: var(--radius-md);
    margin: 16px 0;
}

.alert-danger {
    background-color: #FEE2E2;
    color: #991B1B;
    border: 1px solid #FECACA;
}

.alert-success {
    background-color: #ECFDF5;
    color: #065F46;
    border: 1px solid #D1FAE5;
}

/* Sidebar additions */
.sidebar-search-input {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background-color: rgba(255, 255, 255, 0.05);
    color: white;
    border-radius: 6px;
    font-size: 13px;
}

.sidebar-search-input::placeholder {
    color: rgba(255, 255, 255, 0.5);
}

.nav-section {
    padding: 8px 0;
}

.nav-group {
    margin-top: 16px;
}

.nav-group-title {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.5);
    padding: 8px 12px;
    letter-spacing: 0.5px;
}

.nav-link {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    color: #cbd5e1;
    text-decoration: none;
    font-size: 13px;
    border-radius: 6px;
    transition: all 0.2s ease;
}

.nav-link:hover {
    background-color: var(--color-sidebar-hover);
    color: white;
}

.user-avatar {
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, var(--color-primary), #8B5CF6);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 12px;
    flex-shrink: 0;
}

/* TopBar additions */
.topbar-btn {
    background: none;
    border: none;
    font-size: 16px;
    cursor: pointer;
    padding: 8px;
}

.topbar-btn-support {
    background-color: var(--color-success);
    color: white;
    padding: 8px 16px;
    border-radius: var(--radius-md);
}

.topbar-breadcrumb-sep {
    color: var(--color-text-secondary);
    margin: 0 8px;
}

/* Dashboard additions */
.kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 16px;
}

.kpi-card {
    background: white;
    padding: 20px;
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border);
}

.quick-actions-card {
    background: white;
    padding: 20px;
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border);
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.card-header h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
}

.quick-actions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
}

.quick-action-btn {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border: 1px solid var(--color-border);
    background: white;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: left;
}

.quick-action-btn:hover {
    border-color: var(--color-primary);
    background-color: #F0F9FF;
}

.quick-action-btn strong {
    font-size: 13px;
    display: block;
}

.quick-action-btn small {
    font-size: 11px;
    color: var(--color-text-secondary);
    display: block;
}

/* Kanban additions */
.capacity-card {
    display: flex;
    align-items: center;
    gap: 12px;
    background: white;
    padding: 12px 16px;
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
}

/* Utility classes */
.mb-4 {
    margin-bottom: 16px;
}

.mt-6 {
    margin-top: 24px;
}

.ml-2 {
    margin-left: 8px;
}

.text-center {
    text-align: center;
}

.text-left {
    text-align: left;
}

.w-100 {
    width: 100%;
}

/* Loading Spinner */
.loading-spinner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 24px;
    min-height: 200px;
}

.spinner {
    width: 40px;
    height: 40px;
    border: 4px solid var(--color-border);
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

.spinner--xs {
    width: 14px;
    height: 14px;
    border-width: 2px;
}

/* Skeleton/spinner local — usado dentro de cada seção da Consulta CNPJ
   pelo componente <SectionLoading>. */
.section-loading {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 12px;
    color: var(--color-text-muted, #64748b);
    font-size: 13px;
    background: var(--color-surface-soft, #f8fafc);
    border: 1px dashed var(--color-border, #e2e8f0);
    border-radius: 6px;
    min-height: 48px;
}

.section-loading__label {
    font-style: italic;
}

.section-error {
    padding: 12px;
    color: #991b1b;
    font-size: 13px;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 6px;
}

/* Placeholder pulsante pra texto curto (nome de empresa, CNPJ, etc.) */
.skeleton-line {
    display: inline-block;
    background: linear-gradient(90deg, #e2e8f0 0%, #f1f5f9 50%, #e2e8f0 100%);
    background-size: 200% 100%;
    border-radius: 4px;
    animation: skeleton-shimmer 1.4s ease-in-out infinite;
    height: 1em;
    vertical-align: middle;
}

@keyframes skeleton-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* =========================================================
   Consulta CNPJ — estilos globais
   Movidos de Components/Pages/ConsultaCnpj.razor.css pra
   permitir reuso dos componentes (HeaderEmpresa, *Tab) dentro
   da modal de detalhes (ConsultaCnpjModal) no Kanban.
   ========================================================= */

/* ---- Container e estados ---- */
.cnpj-page {
    padding: 24px 32px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    background: #F5F7FA;
    height: 100%;
    min-height: 0;
    overflow-y: auto;
}

.cnpj-page .card,
.modal__body--cnpj .card {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(15,23,42,0.04), 0 1px 2px rgba(15,23,42,0.06);
    border: 1px solid #EEF0F3;
    padding: 20px;
}

.cnpj-empty {
    text-align: center;
    padding: 64px 24px;
}

.cnpj-empty h3 { font-size: 16px; font-weight: 600; margin-top: 12px; color: #0F172A; }
.cnpj-empty p { color: #64748B; font-size: 13px; margin-top: 6px; max-width: 420px; margin-left: auto; margin-right: auto; }
.cnpj-empty-icon { color: #CBD5E1; }

.cnpj-error {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    background: #FEF2F2;
    border-color: #FECACA;
    color: #B91C1C;
}
.cnpj-error-title { font-weight: 600; }
.cnpj-error-msg { font-size: 13px; margin-top: 2px; opacity: 0.9; }

/* ---- Search bar ---- */
.cnpj-search-card { padding: 14px 16px; }
.cnpj-search-bar { display: flex; gap: 12px; align-items: center; }
.cnpj-pill {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 12px;
    background: #DBEAFE; color: #1D4ED8;
    border-radius: 8px; font-size: 12px; font-weight: 500;
}
.cnpj-input-wrap { position: relative; flex: 1; }
.cnpj-input-icon {
    position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
    color: #94A3B8;
}
.cnpj-input {
    width: 100%;
    padding: 8px 12px 8px 36px;
    border: 1px solid #E2E8F0; border-radius: 8px;
    font-size: 14px; outline: none;
    background: #fff;
}
.cnpj-input:focus { border-color: #3B82F6; }

/* ---- Botões (scopados aos containers de Consulta CNPJ pra não
        vazar para outras páginas que já têm seu .btn próprio) ---- */
.cnpj-page .btn,
.modal--cnpj .btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 14px; border-radius: 8px;
    font-size: 13px; font-weight: 500;
    cursor: pointer; border: 1px solid transparent;
    transition: background-color 0.15s ease;
}
.cnpj-page .btn:disabled,
.modal--cnpj .btn:disabled { opacity: 0.5; cursor: not-allowed; }
.cnpj-page .btn--primary,
.modal--cnpj .btn--primary { background: #2563EB; color: #fff; }
.cnpj-page .btn--primary:hover:not(:disabled),
.modal--cnpj .btn--primary:hover:not(:disabled) { background: #1D4ED8; }
.cnpj-page .btn--secondary,
.modal--cnpj .btn--secondary { background: #fff; border-color: #E2E8F0; color: #334155; }
.cnpj-page .btn--secondary:hover,
.modal--cnpj .btn--secondary:hover { background: #F8FAFC; }

.btn-icon {
    padding: 8px; border-radius: 8px;
    border: 1px solid #E2E8F0; background: #fff;
    color: #475569; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
}
.btn-icon:hover { background: #F8FAFC; }
.btn-icon:disabled {
    opacity: .5;
    cursor: not-allowed;
    /* sem pointer-events, o hover cai no wrapper (.btn-icon-wrap) e o tooltip
       "Carregando dados" aparece mesmo com o botão desabilitado. */
    pointer-events: none;
}
.btn-icon-wrap { display: inline-flex; cursor: not-allowed; }

/* Botão Relatório Villela — leve destaque no tom ciano da marca, pra diferenciar
   da fileira de ícones neutros (a ação de impressão "principal"). */
.btn-icon--report {
    color: #0F7B8A;
    border-color: #7FE0EA;
    background: #ECFCFE;
}
.btn-icon--report:hover:not(:disabled) {
    background: #D6F6FB;
    border-color: #00C4D4;
    color: #0A6675;
}

/* Menu "Mais ações" (3 pontos) — abriga o layout de impressão padrão (antigo). */
.cnpj-more { position: relative; display: inline-flex; }
.cnpj-more__backdrop { position: fixed; inset: 0; z-index: 40; background: transparent; }
.cnpj-more__menu {
    position: absolute; top: calc(100% + 6px); left: 0; z-index: 41;
    min-width: 220px; padding: 6px;
    background: #fff; border: 1px solid #E2E8F0; border-radius: 10px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, .12);
}
.cnpj-more__item {
    width: 100%; display: flex; align-items: center; gap: 10px;
    padding: 8px 10px; border: none; border-radius: 8px;
    background: transparent; color: #334155; cursor: pointer;
    font-size: 13px; text-align: left;
}
.cnpj-more__item:hover { background: #F1F5F9; }
.cnpj-more__item:disabled { opacity: .5; cursor: not-allowed; }
.btn-ghost {
    color: #475569; padding: 6px 10px; border-radius: 6px;
    background: transparent; border: none; cursor: pointer;
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 13px;
}
.btn-ghost:hover { background: #F1F5F9; }

.cnpj-link {
    color: #2563EB; font-size: 13px; font-weight: 500;
    background: none; border: none; cursor: pointer;
    display: inline-flex; align-items: center; gap: 4px;
}
.cnpj-link:hover { color: #1D4ED8; }

/* ---- Header empresa ---- */
.cnpj-header { padding: 24px; }

/* Hint do modal de confirmação de movimentação de etapa. */
.cnpj-confirm__hint {
    font-size: 12px;
    color: #64748B;
    margin-top: 8px;
}

/* Stepper de etapas no header empresa — chips horizontais alinhados com o
   resto da barra de ações. A "dot" colorida vem da cor de cada etapa em
   KanbanColumn.GetDefault. */

/* Wrapper do stepper: no desktop é display:contents (os chips continuam
   filhos diretos do flex da barra de ações — layout inalterado). No mobile
   (≤600px) vira um trilho horizontal com scroll próprio. */
.cnpj-stage-rail { display: contents; }

/* Âncora dos fades/chevrons de affordance de scroll (AppScrollHint). No
   desktop é display:contents — zero efeito no layout; no mobile vira o box
   posicionado que segura os gradientes nas bordas do trilho. */
.hscroll-wrap { display: contents; }

.stage-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}
.stage-btn__dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}
.stage-btn--past {
    opacity: 0.55;
}
.stage-btn--current {
    /* btn--primary já dá o destaque; .current só serve como hook semântico. */
}

/* Tarja vermelha no topo do header quando o lead está em atendimento por
   outro usuário. Some assim que ContatoFranqueado.Id == LoggedUserId
   (ou quando não há franqueado). */
.cnpj-other-user-banner {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    background: #FEF2F2;
    border: 1px solid #FECACA;
    border-left: 4px solid #DC2626;
    color: #7F1D1D;
    padding: 12px 14px;
    border-radius: 8px;
    margin: -8px -8px 16px -8px;
    font-size: 13px;
    line-height: 1.5;
}
.cnpj-other-user-banner > svg { flex-shrink: 0; margin-top: 2px; color: #DC2626; }
.cnpj-other-user-banner__body {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.cnpj-other-user-banner__body strong { color: #7F1D1D; font-weight: 600; }

/* Tarja de blacklist ("Não Perturbe") — availability respondeu 409. Vermelho
   mais forte que a tarja de "em atendimento por outro": ali o lead existe e é
   de alguém; aqui a empresa não pode ser prospectada por ninguém. É a primeira
   coisa do header e, nesse estado, quase a única — ações, KPIs e abas somem. */
.cnpj-blacklist-banner {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    background: #FEF2F2;
    border: 1px solid #FCA5A5;
    border-left: 5px solid #B91C1C;
    color: #7F1D1D;
    padding: 12px 16px;
    border-radius: 8px;
    margin: -8px -8px 16px -8px;
    font-size: 14px;
    line-height: 1.45;
}
.cnpj-blacklist-banner > svg { flex-shrink: 0; margin-top: 2px; color: #B91C1C; }
.cnpj-blacklist-banner__body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.cnpj-blacklist-banner__body strong { color: #7F1D1D; font-weight: 700; }
.cnpj-blacklist-banner__body span { font-size: 13px; color: #991B1B; }

/* Tarja "lead disponível para captura" — tom azul positivo (não é aviso).
   Mensagem à esquerda, botão CAPTURAR LEAD à direita. */
.cnpj-capture-banner {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #EFF6FF;
    border: 1px solid #BFDBFE;
    border-left: 4px solid #2563EB;
    color: #1E3A8A;
    padding: 12px 14px;
    border-radius: 8px;
    margin: -8px -8px 16px -8px;
    font-size: 13px;
    line-height: 1.5;
}
.cnpj-capture-banner > svg { flex-shrink: 0; color: #2563EB; }
.cnpj-capture-banner__body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}
.cnpj-capture-banner__body strong { color: #1E3A8A; font-weight: 600; }
.cnpj-capture-btn { flex-shrink: 0; white-space: nowrap; }

/* Tarja "Cliente Villela Brasil" — destaque laranja forte no topo do header
   da Consulta CNPJ quando o lead já é cliente ativo (clienteVillela=true).
   Propositalmente mais saturada que as tarjas de aviso: precisa saltar aos
   olhos do operador antes de qualquer ação. */
.cnpj-villela-banner {
    display: flex;
    align-items: center;
    gap: 10px;
    background: linear-gradient(90deg, #EA580C 0%, #F97316 100%);
    border-left: 5px solid #9A3412;
    color: #FFFFFF;
    padding: 12px 16px;
    border-radius: 8px;
    margin: -8px -8px 16px -8px;
    font-size: 14px;
    line-height: 1.4;
    font-weight: 500;
    box-shadow: 0 2px 10px rgba(234, 88, 12, 0.30);
}
.cnpj-villela-banner > svg { flex-shrink: 0; color: #FFFFFF; }
.cnpj-villela-banner strong { font-weight: 700; }

.cnpj-header-row {
    display: flex; gap: 14px; align-items: flex-start;
    width: 100%; min-width: 0;
}
.cnpj-header-content { flex: 1; min-width: 0; }

/* QR Code do header — fica no canto direito do cnpj-header-row.
   Click expande 3x ancorado no canto superior direito (transform-origin),
   simulando "cresce a partir daqui" sem virar modal centralizado. */
.lead-qr-wrap {
    position: relative;
    display: inline-block;
    flex-shrink: 0;
}

.lead-qr {
    display: block;
    border-radius: 8px;
    border: 1px solid #E2E8F0;
    background: #fff;
    padding: 4px;
    cursor: zoom-in;
    transform-origin: top right;
    transition: transform 180ms ease, box-shadow 180ms ease;
    position: relative;
    z-index: 1;
}

.lead-qr-wrap--expanded .lead-qr {
    transform: scale(3);
    cursor: zoom-out;
    box-shadow: 0 20px 50px rgba(15, 23, 42, 0.35);
    /* Sobe acima do conteúdo do modal hospedeiro. O modal-backdrop fica
       em z=1200 no root; aqui basta valor alto dentro do contexto local
       (o stacking ctx do .modal). */
    z-index: 50;
}

/* Modo colapsável (cards do Kanban): ícone pequeno igual ao botão de
   detalhes do card. O posicionamento (abaixo do detalhes) é dado pelo
   container do card (.lcard__qr-slot). */
.lead-qr-trigger {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #F1F5F9;
    border: 1px solid #E2E8F0;
    border-radius: 6px;
    color: #2563EB;
    cursor: pointer;
    padding: 0;
    transition: background .12s, color .12s, transform .12s;
}
.lead-qr-trigger:hover {
    background: #2563EB;
    color: #fff;
    border-color: #2563EB;
    transform: scale(1.08);
}
.lead-qr-trigger:active { transform: scale(0.95); }

/* Na visão em Lista, o ícone de QR aparece no hover da linha, igual ao botão
   de detalhes. Regra global (não scoped) porque o .lead-qr-trigger é renderizado
   pelo componente filho LeadQrCode e não carrega o atributo de escopo do Kanban.
   O QR aberto (.lead-qr-wrap) não é afetado — permanece visível. */
.leads-table .lead-qr-trigger {
    opacity: 0;
    transition: opacity .12s;
}
.leads-table tbody tr:hover .lead-qr-trigger {
    opacity: 1;
}

/* QR aberto no card: usa o MESMO estado expandido dos detalhes
   (.lead-qr-wrap--expanded .lead-qr → scale(3), com origem top-right da regra
   base). A classe --pop só adiciona a animação de entrada, crescendo do canto
   superior direito (onde estava o ícone) até o scale(3) final. */
.lead-qr-wrap--pop .lead-qr {
    animation: leadQrPop 180ms ease-out;
}
@keyframes leadQrPop {
    from { transform: scale(0.2); opacity: 0; }
    to   { transform: scale(3);   opacity: 1; }
}

/* Enquanto o QR está aberto, eleva o card hospedeiro acima dos vizinhos —
   cada .lcard cria stacking context próprio (transform), então sem isso o
   card de baixo cobriria a parte inferior do popover. z-index 1 basta pra
   passar à frente dos cards (z auto) e fica abaixo do header sticky (z 2).
   Regra global (não scoped) pra o :has() enxergar o .lead-qr-wrap--pop que
   vem do componente filho LeadQrCode. */
.lcard:has(.lead-qr-wrap--pop) {
    z-index: 1;
}
.cnpj-logo {
    width: 44px; height: 44px;
    border-radius: 10px;
    background: linear-gradient(135deg, #3B82F6, #8B5CF6);
    color: #fff; font-weight: 600; font-size: 14px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.cnpj-name-line {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    margin-bottom: 8px;
}
.cnpj-name-line h1 {
    font-size: 19px; font-weight: 600; color: #0F172A;
    line-height: 1.3; margin: 0;
}
.cnpj-meta-line {
    display: flex; align-items: center; flex-wrap: wrap;
    gap: 6px 20px;
    font-size: 13px; color: #64748B;
}
.cnpj-meta-line span {
    display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
}
.cnpj-update-line {
    display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
    font-size: 11px; color: #94A3B8; margin-top: 10px;
}
.cnpj-update-line b { color: #475569; font-weight: 500; }

.cnpj-actions-bar {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    margin-top: 18px; padding-top: 16px;
    border-top: 1px solid #EEF0F3;
}
.cnpj-spacer { flex: 1; }

/* ---- KPIs ---- */
.cnpj-kpi-row {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px;
    margin-top: 24px;
}
.kpi { padding: 16px; border-radius: 8px; border: 1px solid; }
.kpi-rose   { background: #FEF2F2; border-color: #FECACA; color: #B91C1C; }
.kpi-green  { background: #F0FDF4; border-color: #BBF7D0; color: #15803D; }
.kpi-blue   { background: #EFF6FF; border-color: #BFDBFE; color: #1D4ED8; }
.kpi-purple { background: #F5F3FF; border-color: #DDD6FE; color: #6D28D9; }
.kpi-label {
    font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em;
    font-weight: 500; margin-bottom: 6px;
    display: flex; align-items: center; gap: 6px;
}
.kpi-value { font-size: 22px; font-weight: 600; line-height: 1.2; }
.kpi-value small { font-size: 13px; font-weight: 400; opacity: 0.8; margin-left: 4px; }
.kpi-hint { font-size: 11px; opacity: 0.85; margin-top: 4px; }

/* ---- Tabs ---- */
.cnpj-tabs {
    margin-top: 24px; border-bottom: 1px solid #E2E8F0;
    display: flex; gap: 24px;
}
.cnpj-tab {
    padding: 0 0 12px; background: none; border: none; cursor: pointer;
    font-size: 14px; font-weight: 500; color: #64748B;
    border-bottom: 2px solid transparent;
    display: inline-flex; align-items: center; gap: 6px;
}
.cnpj-tab:hover { color: #1E293B; }
.cnpj-tab.active { color: #2563EB; border-bottom-color: #2563EB; }
.tab-count {
    background: #F1F5F9; color: #475569;
    padding: 1px 6px; border-radius: 4px; font-size: 11px;
}

/* Abas "Ficha" e lupa (busca) — só existem no layout mobile da página
   Consulta CNPJ (o CSS mobile as revela lá). No desktop e no modal do
   Kanban ficam ocultas. */
.cnpj-tab--ficha,
.cnpj-tab--busca { display: none; }

/* Balão "Abrir no app" — só existe no mobile (≤600px revela). No desktop a
   função é do QR Code do header, que continua como sempre. */
.lead-app-fab { display: none; }

/* No touch as setas de scroll das bordas (HScrollEdges) não fazem sentido —
   o gesto é o swipe — e roubam espaço da viewport estreita. */
@media (max-width: 600px) {
    .scroll-edge { display: none !important; }
}

/* Aba Processos Judiciais — destaque azul-claro entre as demais abas. */
.cnpj-tab--processos {
    color: #0284C7; background: #E0F2FE;
    border-radius: 8px 8px 0 0;
    padding: 6px 12px 10px;
}
.cnpj-tab--processos:hover { color: #0369A1; }
.cnpj-tab--processos.active {
    color: #0369A1; border-bottom-color: #0EA5E9;
}
.ico-recupera { color: #0EA5E9; }

/* Aba Calculadora TAX — mesma família visual da de Processos Judiciais, em
   verde, pra separar "consulta de dados" de "ferramenta de simulação". */
.cnpj-tab--calctax {
    color: #059669; background: #D1FAE5;
    border-radius: 8px 8px 0 0;
    padding: 6px 12px 10px;
}
.cnpj-tab--calctax:hover { color: #047857; }
.cnpj-tab--calctax.active {
    color: #047857; border-bottom-color: #10B981;
}
.ico-calc-tax { color: #10B981; }

/* ---- Aba Calculadora TAX ---- */

.calc-tax__btn-externo { white-space: nowrap; }

/* O iframe precisa de altura explícita: o pai é um card dentro de um container
   de scroll, então percentual não resolve. min() dá tela cheia no desktop sem
   estourar em monitor alto; min-height segura o mínimo útil no notebook. */
.calc-tax__frame-wrap {
    height: min(72vh, 900px);
    min-height: 420px;
    border: 1px solid #E2E8F0;
    border-radius: 8px;
    overflow: hidden;
    background: #F8FAFC;
}
.calc-tax__frame {
    width: 100%; height: 100%;
    border: 0; display: block;
}

@media (max-width: 600px) {
    .calc-tax__frame-wrap { height: 65vh; min-height: 320px; }
    .calc-tax__head { flex-direction: column; align-items: stretch; }
    .calc-tax__btn-externo { justify-content: center; }
}

/* ---- Aba Processos Judiciais ---- */

/* Botão do Diagnóstico Financeiro: primário de propósito (é a saída principal
   da aba pro relatório completo), e não some no header do card. */
.pj-btn-diagnostico { white-space: nowrap; }

/* Linha inteira é o alvo do clique que abre/fecha o histórico. */
.cnpj-tbl--processos .pj-row { cursor: pointer; }
.cnpj-tbl--processos .pj-row:hover { background: #F8FAFC; }
.cnpj-tbl--processos .pj-row--aberta { background: #F1F5F9; }

.pj-col-caret { width: 28px; text-align: center; }
.pj-col-partes { min-width: 220px; }

/* Não há chevron no sprite — a seta "arrow-right" gira 90° quando abre. */
.pj-caret { color: #94A3B8; transition: transform .15s ease; }
.pj-caret--aberta { transform: rotate(90deg); }

/* Placeholder da coluna "último movimento", que chega depois da tabela. */
.pj-skeleton {
    display: inline-block; width: 68px; height: 10px;
    border-radius: 4px; background: #E2E8F0;
    animation: pj-pulse 1.2s ease-in-out infinite;
}
@keyframes pj-pulse { 0%, 100% { opacity: 1 } 50% { opacity: .45 } }

.pj-row-hist > td { background: #F8FAFC; padding: 0; }
.pj-hist { padding: 12px 16px 14px 40px; }
.pj-hist__titulo {
    display: flex; align-items: center; gap: 6px;
    font-size: 12px; font-weight: 600; color: #334155;
    margin-bottom: 8px;
}
.pj-hist__lista { list-style: none; margin: 0; padding: 0; }
.pj-hist__lista li {
    display: flex; gap: 10px; align-items: baseline;
    padding: 5px 0; border-bottom: 1px solid #E2E8F0;
    font-size: 12px;
}
.pj-hist__lista li:last-child { border-bottom: 0; }
.pj-hist__data { flex: 0 0 82px; color: #64748B; font-variant-numeric: tabular-nums; }
.pj-hist__desc { color: #1E293B; }
.pj-btn-mais { margin-top: 8px; }

.pj-paginacao {
    display: flex; align-items: center; justify-content: flex-end;
    gap: 10px; margin-top: 12px;
}

/* ---- Tags ---- */
.cnpj-header .tag,
.cnpj-page .tag,
.modal--cnpj .tag {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 2px 8px; border-radius: 6px;
    font-size: 11px; font-weight: 500;
}
.tag-green  { background: #DCFCE7; color: #166534; }
.tag-amber  { background: #FEF3C7; color: #92400E; }
.tag-blue   { background: #DBEAFE; color: #1D4ED8; }
.tag-rose   { background: #FEE2E2; color: #B91C1C; }
.tag-slate  { background: #F1F5F9; color: #475569; }
.tag-purple { background: #EDE9FE; color: #6D28D9; }

.status-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.status-dot-green { background: #16A34A; }
.status-dot-slate { background: #CBD5E1; }

/* ---- Avatar ---- */
.cnpj-avatar {
    background: linear-gradient(135deg, #3B82F6, #8B5CF6);
    color: #fff; font-weight: 600; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.avatar-sm { width: 24px; height: 24px; font-size: 10px; }

/* ---- Grid layout ---- */
.cnpj-grid-3 {
    display: grid; grid-template-columns: 2fr 1fr; gap: 20px;
}
.cnpj-col-main, .cnpj-col-side, .cnpj-col-stack {
    display: flex; flex-direction: column; gap: 20px;
}

/* ---- Card headings ---- */
.cnpj-card-header {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 12px; margin-bottom: 12px;
}
.cnpj-card-title {
    font-size: 14px; font-weight: 600; color: #0F172A;
    display: inline-flex; align-items: center; gap: 8px;
    margin: 0;
}
.cnpj-card-subtitle { font-size: 12px; color: #64748B; margin-top: 2px; }
.ico-blue { color: #2563EB; }
.ico-amber { color: #D97706; }
.ico-rose { color: #F43F5E; }

/* ---- Diagnóstico financeiro ---- */
.cnpj-diag-grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;
}
.diag-cell {
    padding: 14px; border: 1px solid #E2E8F0; border-radius: 8px;
}
.diag-cell .label { font-size: 12px; color: #64748B; margin-bottom: 4px; }
.diag-cell .value { font-size: 17px; font-weight: 600; color: #0F172A; }
.diag-cell .hint { font-size: 11px; color: #94A3B8; margin-top: 2px; }

.cnpj-bar-track {
    height: 10px; background: #F1F5F9;
    border-radius: 999px; overflow: hidden; display: flex;
}
.bar-blue  { background: #3B82F6; }
.bar-amber { background: #F59E0B; }
.bar-rose  { background: #F43F5E; }
.cnpj-legend {
    display: flex; gap: 16px; margin-top: 12px;
    font-size: 12px; color: #475569; flex-wrap: wrap;
}
.cnpj-legend > div { display: flex; align-items: center; gap: 6px; }

/* ---- Info grid ---- */
.cnpj-info-grid {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 14px 28px; font-size: 13px;
}
.cnpj-info-grid-3 { grid-template-columns: repeat(3, 1fr); }
.info-cell .label { font-size: 12px; color: #64748B; margin-bottom: 4px; }
.info-cell .value { color: #0F172A; font-weight: 500; display: flex; align-items: center; gap: 6px; }

/* ---- Contatos ---- */
.cnpj-contact-row {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 12px; border: 1px solid #E2E8F0; border-radius: 8px;
    margin-bottom: 8px;
}
.cnpj-contact-row:hover { background: #F8FAFC; }
.contact-left { display: flex; align-items: center; gap: 12px; }
.contact-circle {
    width: 36px; height: 36px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.circle-blue { background: #DBEAFE; color: #2563EB; }
.circle-purple { background: #EDE9FE; color: #7C3AED; }
.contact-name { font-weight: 500; font-size: 13px; color: #1E293B; display: flex; align-items: center; }
.contact-sub { font-size: 12px; color: #64748B; }
.contact-actions { display: flex; gap: 4px; }
.contact-actions button,
.contact-actions a {
    padding: 8px; border-radius: 6px; color: #64748B;
    background: none; border: none; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    text-decoration: none;
}
.contact-actions button:hover:not(:disabled),
.contact-actions a:hover { background: #fff; }
.contact-actions button:disabled { opacity: .4; cursor: not-allowed; }
.contact-actions .green { color: #16A34A; }

.cnpj-group-label {
    margin: 14px 4px 8px;
    font-size: 11px; color: #64748B; font-weight: 500;
    letter-spacing: 0.05em; text-transform: uppercase;
}
.cnpj-group-label small { color: #94A3B8; text-transform: none; letter-spacing: 0; font-size: 11px; }

.cnpj-empty-state {
    padding: 28px; text-align: center;
    border: 2px dashed #E2E8F0; border-radius: 8px;
}
.cnpj-empty-state svg { color: #CBD5E1; margin-bottom: 8px; }
.cnpj-empty-state p { font-size: 13px; color: #64748B; margin: 0; }

.cnpj-email-row {
    display: flex; align-items: center; gap: 8px;
    padding: 10px 12px; border: 1px solid #E2E8F0; border-radius: 8px;
    color: #2563EB; font-size: 13px; text-decoration: none;
}
.cnpj-email-row:hover { background: #F8FAFC; }

/* ---- Tabela ---- */
.cnpj-tbl-wrap { border: 1px solid #E2E8F0; border-radius: 8px; overflow: hidden; }
.cnpj-tbl { width: 100%; font-size: 13px; border-collapse: collapse; }
.cnpj-tbl thead { background: #F8FAFC; color: #475569; }
.cnpj-tbl thead th {
    text-align: left; font-weight: 500; padding: 10px 14px;
    font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em;
}
.cnpj-tbl thead th.center { text-align: center; }
.cnpj-tbl thead th.right { text-align: right; }
.cnpj-tbl tbody tr { border-top: 1px solid #F1F5F9; }
.cnpj-tbl tbody tr:first-child { border-top: none; }
.cnpj-tbl tbody tr:hover { background: #F8FAFC; }
.cnpj-tbl tbody tr.current { background: #EFF6FF; }
.cnpj-tbl tbody tr.current:hover { background: #DBEAFE; }
.cnpj-tbl tbody td { padding: 10px 14px; vertical-align: top; }
.cnpj-tbl td.mono { font-family: ui-monospace, "SF Mono", Monaco, Consolas, monospace; font-size: 12px; color: #334155; }
.cnpj-tbl td.center { text-align: center; }
.cnpj-tbl td.right { text-align: right; }
.badge-current {
    background: #2563EB; color: #fff;
    padding: 1px 6px; border-radius: 4px;
    font-size: 10px; margin-left: 4px;
}

/* ---- Timeline ---- */
.cnpj-timeline {
    position: relative; padding-left: 22px;
    display: flex; flex-direction: column; gap: 16px;
}
.cnpj-timeline::before {
    content: ''; position: absolute;
    left: 9px; top: 4px; bottom: 4px;
    width: 1px; background: #E2E8F0;
}
.tl-item { position: relative; }
.tl-dot {
    position: absolute; left: -18px; top: 4px;
    width: 16px; height: 16px; border-radius: 50%;
}
.tl-blue   { background: #3B82F6; box-shadow: 0 0 0 4px #DBEAFE; }
.tl-amber  { background: #F59E0B; box-shadow: 0 0 0 4px #FEF3C7; }
.tl-green  { background: #22C55E; box-shadow: 0 0 0 4px #DCFCE7; }
.tl-slate  { background: #94A3B8; box-shadow: 0 0 0 4px #F1F5F9; }
.tl-time { font-size: 12px; color: #64748B; margin-bottom: 2px; }
.tl-text { font-size: 13px; color: #1E293B; }
.tl-text b { font-weight: 600; }
.tl-observation {
    margin-top: 6px; padding: 8px 10px;
    background: #F8FAFC; border-radius: 6px;
    font-size: 12px; color: #475569; font-style: italic;
}

/* ---- Sócios card ---- */
.cnpj-socio-card {
    border: 1px solid #E2E8F0; border-radius: 8px; padding: 14px;
}
.cnpj-socio-card:hover { background: #F8FAFC; }

/* ---- Banner ---- */
.cnpj-banner {
    display: flex; align-items: center; gap: 8px;
    padding: 10px 12px; border-radius: 8px;
    font-size: 13px;
}
.cnpj-banner-amber { background: #FEF3C7; color: #92400E; }

/* ---- Resumo lateral ---- */
.cnpj-summary { display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
.cnpj-summary .cnpj-row-between { padding: 4px 0; }

/* ---- Helpers ---- */
.cnpj-row-between { display: flex; align-items: center; justify-content: space-between; }
.cnpj-text-xs { font-size: 11px; }
.cnpj-text-muted { color: #64748B; }
.cnpj-font-medium { font-weight: 500; }
.cnpj-hr { height: 1px; background: #E2E8F0; margin: 8px 0; }

/* ---- Ícones ---- */
.cnpj-icon {
    display: inline-block;
    stroke: currentColor;
    fill: none;
    flex-shrink: 0;
    vertical-align: middle;
}

/* ---- Responsivo ---- */
@media (max-width: 1100px) {
    .cnpj-kpi-row { grid-template-columns: repeat(2, 1fr); }
    .cnpj-grid-3 { grid-template-columns: 1fr; }
    .cnpj-info-grid-3 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 700px) {
    .cnpj-page { padding: 16px; }
    .cnpj-info-grid, .cnpj-info-grid-3, .cnpj-diag-grid { grid-template-columns: 1fr; }
    .cnpj-name-line h1 { font-size: 17px; }
    .cnpj-spacer { display: none; }
}

/* ── Mobile (≤600px): cara de app na tela de detalhes do lead ─────────────
   Mesmo breakpoint do drawer/topbar mobile. Tudo dentro da media query —
   desktop segue intocado. Vale pra página /consulta-cnpj e pro modal do
   Kanban (mesmo HeaderEmpresa). O padding lateral dos cards vira 14px; os
   trilhos com scroll (stepper e abas) usam margem negativa de -14px pra
   correr edge-to-edge dentro do card. */
@media (max-width: 600px) {
    /* Respiro externo reduzido — menos área cinza, mais conteúdo. Os cards
       mantêm borda e cantos (a pedido: só as bordas EXTERNAS encolhem). */
    .cnpj-page {
        padding: 8px 6px 20px;
        gap: 8px;
    }

    /* ── Abas no topo da janela (só na página; o modal do Kanban mantém as
       abas dentro do card). Com lead carregado (--has-lead), o wrapper das
       abas sai do card e fixa logo abaixo da topbar mobile (52px); o padding
       do topo da página compensa a altura da barra. A área acima das abas
       (busca + header) vira o conteúdo da aba "Ficha": nas demais abas ela
       colapsa via CSS. ── */
    .cnpj-page--has-lead { padding-top: 56px; }
    .cnpj-page--has-lead .hscroll-wrap--tabs {
        position: fixed;
        top: 52px;
        left: 0;
        right: 0;
        margin: 0;
        background: #fff;
        border-bottom: 1px solid #E2E8F0;
        box-shadow: 0 2px 6px rgba(15, 23, 42, 0.06);
        z-index: 1080;
    }
    .cnpj-page .cnpj-tab--ficha { display: inline-flex; }
    /* Aba-lupa (busca): só ícone, com alvo de toque decente. */
    .cnpj-page .cnpj-tab--busca {
        display: inline-flex;
        min-width: 40px;
        justify-content: center;
    }

    /* A busca vive na aba-lupa: com lead carregado, só aparece nela. (Sem
       lead ainda não há abas — a busca aparece normal no topo da página.) */
    .cnpj-page--has-lead:not(.cnpj-page--busca) .cnpj-search-card { display: none; }

    /* Fora da aba Ficha: some o corpo do header (as abas — únicas filhas
       .hscroll-wrap--tabs — ficam, fixas no topo). O card do header colapsa
       pra não sobrar uma casca vazia. */
    .cnpj-page--has-lead:not(.cnpj-page--ficha) .cnpj-header > :not(.hscroll-wrap--tabs) { display: none; }
    .cnpj-page--has-lead:not(.cnpj-page--ficha) .cnpj-header {
        padding: 0;
        border: 0;
        background: transparent;
        box-shadow: none;
        margin: 0;
    }
    .cnpj-page .card,
    .modal__body--cnpj .card {
        padding: 16px 14px;
        border-radius: 10px;
    }

    /* Busca empilhada: input largura total (fonte 16px evita zoom automático
       ao focar), botão Consultar full-width abaixo. O pill "CNPJ" é
       redundante com o placeholder — some. */
    .cnpj-pill { display: none; }
    .cnpj-search-bar { flex-wrap: wrap; gap: 10px; }
    .cnpj-input-wrap { flex: 1 1 100%; }
    .cnpj-input {
        padding-top: 12px;
        padding-bottom: 12px;
        font-size: 16px;
    }
    .cnpj-search-bar > .btn {
        flex: 1 1 100%;
        justify-content: center;
        min-height: 44px;
    }

    /* QR Code fora do mobile — a ação Compartilhar cobre o caso (o QR existe
       justamente pra levar o lead PRO celular). */
    .lead-qr-wrap { display: none; }

    /* Balão "Abrir no app" — assume a função do QR no celular. Canto
       inferior ESQUERDO (o direito é do assistente), acima do conteúdo mas
       abaixo do drawer/backdrop do menu (1140). A seta do ícone ganha um
       pulso sutil pra chamar o olho sem irritar. */
    .lead-app-fab {
        display: flex;
        align-items: center;
        justify-content: center;
        position: fixed;
        left: 12px;
        bottom: calc(16px + env(safe-area-inset-bottom, 0px));
        width: 52px;
        height: 52px;
        border-radius: 50%;
        border: none;
        background: linear-gradient(135deg, #2563EB 0%, #1D4ED8 100%);
        color: #fff;
        box-shadow: 0 4px 14px rgba(37, 99, 235, 0.40);
        cursor: pointer;
        z-index: 1095;
    }
    .lead-app-fab:active {
        transform: scale(0.94);
        box-shadow: 0 2px 8px rgba(37, 99, 235, 0.35);
    }

    /* Identidade: meta-dados empilhados, uma informação por linha. */
    .cnpj-header-row { gap: 10px; }
    .cnpj-meta-line {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }
    /* Empilhado, cada item pode quebrar linha (CNAE costuma ser longo). */
    .cnpj-meta-line span {
        white-space: normal;
        align-items: flex-start;
    }
    .cnpj-meta-line span svg { margin-top: 2px; }

    /* Barra de ações: ícones com alvo de toque de 44px na primeira linha;
       o stepper desce pra linha de baixo como trilho horizontal com scroll
       (scrollbar escondida, chips sem quebra). */
    .cnpj-actions-bar { gap: 10px; }
    .cnpj-page .btn-icon,
    .modal--cnpj .btn-icon {
        min-width: 44px;
        min-height: 44px;
    }

    /* Âncora dos fades de scroll: box real no mobile. As margens negativas
       (edge-to-edge no card) moram aqui; o trilho interno só faz o scroll. */
    .hscroll-wrap {
        display: block;
        position: relative;
        min-width: 0;
    }
    .cnpj-actions-bar > .hscroll-wrap {
        flex: 1 1 100%;
        margin: 0 -14px;
    }

    /* Fades com chevron nas bordas — só aparecem quando o AppScrollHint marca
       que há conteúdo escondido daquele lado (--left/--right). O chevron
       direito pulsa duas vezes ao surgir, pra chamar o olho. */
    .hscroll-wrap::before,
    .hscroll-wrap::after {
        position: absolute;
        top: 0;
        bottom: 0;
        width: 34px;
        display: flex;
        align-items: center;
        font-size: 20px;
        line-height: 1;
        color: #64748B;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.18s ease;
        z-index: 2;
    }
    .hscroll-wrap::before {
        content: '‹';
        left: 0;
        justify-content: flex-start;
        padding-left: 4px;
        background: linear-gradient(90deg, #fff 25%, rgba(255, 255, 255, 0));
    }
    .hscroll-wrap::after {
        content: '›';
        right: 0;
        justify-content: flex-end;
        padding-right: 4px;
        background: linear-gradient(270deg, #fff 25%, rgba(255, 255, 255, 0));
    }
    .hscroll-wrap--left::before { opacity: 1; }
    .hscroll-wrap--right::after {
        opacity: 1;
        animation: hscroll-nudge 1.4s ease-in-out 2;
    }

    .cnpj-stage-rail {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        gap: 8px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x proximity;
        scrollbar-width: none;
        padding: 2px 14px;
    }
    .cnpj-stage-rail::-webkit-scrollbar { display: none; }
    .stage-btn {
        flex-shrink: 0;
        min-height: 40px;
        scroll-snap-align: start;
    }

    /* KPIs 2×2 compactos. */
    .cnpj-kpi-row {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        margin-top: 16px;
    }
    .kpi { padding: 12px; }
    .kpi-value { font-size: 18px; }

    /* Abas: trilho horizontal com scroll (padrão de app), sem quebra e sem
       scrollbar visível. Edge-to-edge dentro do card do header — a margem
       negativa fica no wrapper (âncora dos fades). */
    .hscroll-wrap--tabs { margin: 16px -14px 0; }
    .cnpj-tabs {
        flex-wrap: nowrap;
        gap: 18px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        margin: 0;
        padding: 0 14px;
    }
    .cnpj-tabs::-webkit-scrollbar { display: none; }
    .cnpj-tab {
        flex-shrink: 0;
        min-height: 44px;
        align-items: flex-end;
        white-space: nowrap;
    }
}

/* Pulso do chevron de scroll (mobile) — fora da media query porque keyframes
   não podem ser aninhados nela em todos os browsers antigos; inofensivo. */
@keyframes hscroll-nudge {
    0%, 100% { transform: translateX(0); }
    50%      { transform: translateX(4px); }
}

/* ── Botões de scroll horizontal nas bordas (global) ──────────────────────
   Usados por <HScrollEdges> em qualquer página com overflow-x.
   Aparecem fixados nas bordas da janela, centralizados verticalmente.       */
.scroll-edge {
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    z-index: 200;

    width: 34px;
    height: 72px;
    display: flex;
    align-items: center;
    justify-content: center;

    background: rgba(255, 255, 255, 0.90);
    border: 1px solid #E2E8F0;
    color: #475569;
    cursor: pointer;
    padding: 0;

    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    box-shadow: 0 2px 10px rgba(15, 23, 42, 0.10);

    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease, background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.scroll-edge--left  { left: 0;  border-radius: 0 10px 10px 0; border-left: none; }
.scroll-edge--right { right: 0; border-radius: 10px 0 0 10px; border-right: none; }

.scroll-edge--visible {
    opacity: 1;
    pointer-events: auto;
}

.scroll-edge:hover {
    background: rgba(37, 99, 235, 0.92);
    color: #fff;
    border-color: #2563EB;
    box-shadow: 0 4px 18px rgba(37, 99, 235, 0.28);
}

.scroll-edge:active {
    background: #1D4ED8;
    color: #fff;
}

/* ──────────────────────────────────────────────────────────────────────
   Sidebar retrátil
   Botão «/» no header recolhe a barra pra um trilho só de ícones.
   Recolhido: ícones maiores e centralizados, textos viram tooltip no hover,
   usuário fica só com as iniciais e o discador vira um ícone de telefone.
   O comportamento de recolher é gated em min-width:601px pra não conflitar
   com o layout mobile (barra inferior).
   ────────────────────────────────────────────────────────────────────── */

/* ---- Base (vale sempre) ---- */
.acelerador-sidebar {
    transition: width 0.18s ease;
}

/* Header vira linha flex: logo ocupa o espaço, botão de recolher à direita */
.sidebar-logo--svg {
    display: flex;
    align-items: center;
    gap: 8px;
}

.sidebar-logo-full {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
}

.sidebar-collapse-btn {
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.06);
    color: #cbd5e1;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.sidebar-collapse-btn:hover {
    background: var(--color-sidebar-hover);
    color: #fff;
}

/* Ícone do item de menu — base; cresce no modo recolhido */
.nav-link__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    line-height: 1;
}

.sidebar-search {
    display: flex;
    align-items: center;
}

.sidebar-search-input {
    flex: 1;
}

/* Suporte via WhatsApp — logo abaixo da busca */
.sidebar-support {
    padding: 0 16px 8px;
}

/* Virou <button> (abre a modal de canais) — daí font-family/text-align/cursor,
   que o <a> herdava de graça. */
.sidebar-support-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 8px 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background-color: rgba(255, 255, 255, 0.05);
    border-radius: 6px;
    color: #cbd5e1;
    font-size: 13px;
    font-family: inherit;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.sidebar-support-btn:hover {
    background: var(--color-sidebar-hover);
    color: #fff;
}

.sidebar-support-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    color: #25D366; /* verde oficial WhatsApp */
}

/* Atalhos que só aparecem quando recolhido */
.sidebar-search-mini,
.sidebar-dialer-mini {
    display: none;
}

/* Elementos exclusivos do menu mobile (grade + discador em tela cheia) —
   o bloco ≤600px os revela nos estados certos (com seletor mais específico,
   já que estas regras-base vêm DEPOIS do bloco mobile no arquivo). */
.nav-section--dialer-mobile,
.nav-link--dialer-mobile,
.mobile-dialer-back {
    display: none;
}

/* ---- Estado recolhido (somente desktop/tablet) ---- */
@media (min-width: 601px) {
    .acelerador-sidebar--collapsed {
        width: 68px;
    }

    /* Header: esconde a logo, centraliza o botão */
    .acelerador-sidebar--collapsed .sidebar-logo--svg {
        justify-content: center;
        padding: 11px 0;
    }
    .acelerador-sidebar--collapsed .sidebar-logo-full {
        display: none;
    }

    /* Busca: troca o input pelo ícone de lupa (clicar expande) */
    .acelerador-sidebar--collapsed .sidebar-search {
        justify-content: center;
        padding: 8px;
    }
    .acelerador-sidebar--collapsed .sidebar-search-input {
        display: none;
    }
    .acelerador-sidebar--collapsed .sidebar-search-mini {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        background: rgba(255, 255, 255, 0.05);
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 8px;
        color: #cbd5e1;
        font-size: 16px;
        cursor: pointer;
    }
    .acelerador-sidebar--collapsed .sidebar-search-mini:hover {
        background: var(--color-sidebar-hover);
        color: #fff;
    }

    /* Suporte: só o ícone do WhatsApp, centralizado (link continua ativo) */
    .acelerador-sidebar--collapsed .sidebar-support {
        padding: 0 8px 8px;
    }
    .acelerador-sidebar--collapsed .sidebar-support-btn {
        justify-content: center;
        padding: 10px 0;
    }
    .acelerador-sidebar--collapsed .sidebar-support-label {
        display: none;
    }
    .acelerador-sidebar--collapsed .sidebar-support-icon {
        width: 20px;
        height: 20px;
    }

    /* Títulos de grupo somem; vira um divisor sutil entre grupos */
    .acelerador-sidebar--collapsed .nav-group-title {
        display: none;
    }
    .acelerador-sidebar--collapsed .nav-group {
        margin-top: 8px;
        padding-top: 8px;
        border-top: 1px solid rgba(255, 255, 255, 0.06);
    }

    /* Links: só ícone, centralizado e maior */
    .acelerador-sidebar--collapsed .nav-link {
        justify-content: center;
        padding: 10px 0;
        margin: 2px 8px;
        position: relative;
    }
    .acelerador-sidebar--collapsed .nav-link__label,
    .acelerador-sidebar--collapsed .nav-link__ext {
        display: none;
    }
    .acelerador-sidebar--collapsed .nav-link__icon {
        font-size: 20px;
    }

    /* Nome do item no hover: usamos o atributo title nativo (no .razor), que
       o navegador desenha por cima de tudo. Tooltip via ::after era recortado
       pelo overflow do trilho (overflow-y:auto força overflow-x:auto). */

    /* Usuário: só o avatar com as iniciais */
    .acelerador-sidebar--collapsed .sidebar-user {
        justify-content: center;
        padding: 12px 0;
        position: relative;
    }
    .acelerador-sidebar--collapsed .sidebar-user-info,
    .acelerador-sidebar--collapsed .sidebar-user-chevron {
        display: none;
    }
    /* Popup "Sair" abre em overlay (position:fixed) pra escapar do overflow
       do trilho — senão é recortado e gera scroll horizontal. Ancorado logo à
       direita do trilho, na altura do avatar do usuário. */
    .acelerador-sidebar--collapsed .sidebar-user-menu {
        position: fixed;
        left: 72px;
        bottom: 70px;
        right: auto;
        top: auto;
        min-width: 160px;
        z-index: 1300;
    }

    /* Discador: esconde o iframe e mostra um ícone de telefone */
    .acelerador-sidebar--collapsed .discador-iframe-host {
        display: none;
    }
    .acelerador-sidebar--collapsed .sidebar-dialer-mini {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        margin: 8px auto;
        border-radius: 50%;
        background: var(--color-success);
        color: #fff;
        border: 0;
        font-size: 20px;
        cursor: pointer;
        box-shadow: 0 2px 8px rgba(16, 185, 129, 0.4);
        /* Mesmo princípio do .discador-iframe-host: fica acessível com
           a .modal-backdrop (z=1200) aberta pra o operador conseguir
           expandir o discador durante uma modal. */
        position: relative;
        z-index: 1300;
    }
    .acelerador-sidebar--collapsed .sidebar-dialer-mini:hover {
        filter: brightness(1.05);
    }
}

/* Marca do portal no impresso — oculta na tela, revelada no @media print. */
.cnpj-print-brand {
    display: none;
}

/* Marca Villela do relatório — oculta na tela, revelada no @media print. */
.cnpj-report-brand {
    display: none;
}

/* ──────────────────────────────────────────────────────────────────────
   Layout de impressão (detalhes da empresa / dossiê do lead)
   Acionado pelo botão Imprimir: o componente entra em "modo dossiê"
   (renderiza todas as abas) e marca o container com .cnpj-print-target.
   Aqui isolamos esse alvo — escondendo todo o resto via visibility — pra
   imprimir só o conteúdo, tanto na página /consulta-cnpj quanto no modal.
   ────────────────────────────────────────────────────────────────────── */
@media print {
    @page { margin: 12mm; }

    /* Relatório Villela: página nomeada com margem 0. Sem margem, o navegador
       não tem onde imprimir o header/footer dele (URL, data, nº de página), e
       eles somem. O respiro vai como padding interno do documento (abaixo).
       Escopo só no relatório — o dossiê Acelerador segue com a @page padrão. */
    @page villela-report { margin: 0; }

    html, body {
        background: #fff !important;
        height: auto !important;
    }

    /* Esconde o cromo do app (sem reservar espaço) */
    .acelerador-sidebar,
    .acelerador-topbar,
    .app-snackbar-host,
    .discador-iframe-host,
    .scroll-edge {
        display: none !important;
    }

    /* Containers do layout voltam a fluir */
    .acelerador-layout,
    .acelerador-main,
    .acelerador-content {
        display: block !important;
        height: auto !important;
        min-height: 0 !important;
        overflow: visible !important;
    }

    /* Colapsa o conteúdo de páginas que possam estar atrás de um modal,
       pra não gerar páginas em branco no impresso. */
    .kanban-page,
    .dashboard-container,
    .page-fluid {
        display: none !important;
    }

    /* Isola o alvo de impressão onde quer que ele esteja no DOM */
    body * {
        visibility: hidden !important;
    }
    .cnpj-print-target,
    .cnpj-print-target *,
    .cnpj-report-target,
    .cnpj-report-target * {
        visibility: visible !important;
    }
    /* Fluxo normal (não absolute) pra o dossiê paginar corretamente em
       múltiplas páginas. O cromo e o conteúdo de fundo já estão em display:none,
       então o alvo flui a partir do topo. */
    .cnpj-print-target,
    .cnpj-report-target {
        display: block !important;
        width: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
        /* Fundo branco no impresso — sem o cinza (#F5F7FA) do .cnpj-page que o
           print-color-adjust:exact forçaria a sair no papel. */
        background: #fff !important;
    }

    /* Neutraliza a moldura do modal pra o conteúdo cair limpo no papel */
    .modal-backdrop {
        position: static !important;
        inset: auto !important;
        display: block !important;
        padding: 0 !important;
        background: none !important;
        animation: none !important;
    }
    .modal,
    .modal.modal--cnpj {
        display: block !important;
        width: auto !important;
        max-width: none !important;
        min-height: 0 !important;
        max-height: none !important;
        box-shadow: none !important;
        border-radius: 0 !important;
        animation: none !important;
    }
    .modal__body--cnpj {
        overflow: visible !important;
        padding: 0 !important;
        background: #fff !important;
    }

    /* Esconde controles/UI que não fazem parte do documento */
    .cnpj-actions-bar,
    .cnpj-tabs,
    .cnpj-search-card,
    .cnpj-empty,
    .cnpj-error,
    .cnpj-other-user-banner,
    .modal__head,
    .modal__foot,
    .modal__close {
        display: none !important;
    }

    /* Cabeçalho do impresso: logo à esquerda + URL da ficha à direita */
    .cnpj-print-brand {
        display: flex !important;
        justify-content: space-between;
        align-items: center;
        gap: 16px;
        margin: 0 0 14px 0;
        padding: 0 0 10px 0;
        border-bottom: 1px solid #E2E8F0;
    }
    .cnpj-print-brand__logo {
        width: 180px;
        height: auto;
        flex-shrink: 0;
    }
    .cnpj-print-brand__url {
        font-size: 11px;
        color: #475569;
        word-break: break-all;
        line-height: 1.4;
        text-align: right;
    }

    /* Dossiê: block (não flex) pra paginar limpo; espaçamento via margin.
       break-inside evita cortar blocos pequenos no meio de uma página. */
    .cnpj-print-dossier {
        display: block !important;
    }
    .cnpj-print-dossier > * {
        margin-bottom: 16px;
    }
    .cnpj-print-dossier .card,
    .cnpj-kpi-row .kpi {
        break-inside: avoid;
    }

    /* Garante que cores de KPIs/tags saiam na impressão */
    .cnpj-print-target,
    .cnpj-report-target {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    /* ── Relatório Villela ──────────────────────────────────────────────
       Cabeçalho de marca Villela: logo à esquerda + site/endereço em destaque
       à direita (no lugar da URL do Aguia). */
    .cnpj-report-brand {
        display: flex !important;
        justify-content: space-between;
        align-items: center;
        gap: 16px;
        margin: 0 0 14px 0;
        padding: 0 0 12px 0;
        border-bottom: 2px solid #0F1E33;
    }
    .cnpj-report-brand__logo {
        width: 190px;
        height: auto;
        flex-shrink: 0;
        object-fit: contain;
    }
    .cnpj-report-brand__contato {
        display: flex;
        flex-direction: column;
        gap: 2px;
        font-size: 11px;
        color: #334155;
        line-height: 1.45;
        text-align: right;
    }
    .cnpj-report-brand__site {
        font-size: 13px;
        font-weight: 700;
        color: #0F1E33;
        text-decoration: none;
    }

    /* Corpo: block pra paginar limpo; espaçamento via margin. */
    .cnpj-report-dossier {
        display: block !important;
    }
    .cnpj-report-corpo > * {
        margin-bottom: 16px;
    }
    .cnpj-report-corpo .card {
        break-inside: avoid;
    }

    /* Endereço + Sócios lado a lado (dados da empresa). */
    .cnpj-report-top {
        display: grid !important;
        grid-template-columns: 1fr 1fr;
        gap: 16px;
        align-items: start;
        margin-bottom: 16px;
    }
    .cnpj-report-top > * {
        margin-bottom: 0;
    }

    /* Aplica a @page nomeada (margem 0) na RAIZ durante a impressão do relatório
       (classe ligada via JS só nesse print), suprimindo o header/footer do
       navegador. Aplicar na raiz — e não num container interno — evita a página
       em branco que o Chrome insere quando o `page:` troca de tipo no meio do
       fluxo. Não afeta o dossiê Acelerador (impressão separada, sem a classe). */
    html.cnpj-report-printing,
    html.cnpj-report-printing body {
        page: villela-report;
    }

    /* Documento do relatório em <table>: o <thead> (marca Villela) repete no
       topo de cada página impressa e reserva o espaço automaticamente.
       Como a @page tem margem 0, o respiro (12mm) vai como padding das células:
       o thead dá topo+laterais em cada página; o tbody dá laterais+rodapé. */
    .cnpj-report-doc {
        width: 100% !important;
        border-collapse: collapse !important;
        table-layout: fixed;
    }
    .cnpj-report-doc__head {
        display: table-header-group !important; /* repete no topo de cada página */
    }
    .cnpj-report-doc__foot {
        display: table-footer-group !important; /* repete no rodapé de cada página */
    }
    .cnpj-report-doc > thead > tr > td,
    .cnpj-report-doc > tbody > tr > td,
    .cnpj-report-doc > tfoot > tr > td {
        border: 0 !important;
        vertical-align: top;
    }
    .cnpj-report-doc > thead > tr > td {
        padding: 12mm 12mm 0 12mm !important;
    }
    .cnpj-report-doc > tbody > tr > td {
        padding: 0 12mm 0 12mm !important;
    }
    .cnpj-report-doc > tfoot > tr > td {
        padding: 0 12mm !important;
    }
    .cnpj-report-doc__foot-spacer {
        height: 12mm;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    /* Logo AceleradorAGUIA como marca d'água no rodapé de cada página. */
    .cnpj-report-watermark {
        height: auto;
        opacity: 0.18;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
}

/* Só na TELA (flash de pré-impressão): a tabela do relatório não deve impor
   layout de tabela ao conteúdo. Em @media print ela continua tabela de verdade,
   senão o <thead> não repetiria nas páginas. */
@media screen {
    .cnpj-report-doc,
    .cnpj-report-doc > thead,
    .cnpj-report-doc > tbody,
    .cnpj-report-doc > tfoot,
    .cnpj-report-doc > thead > tr,
    .cnpj-report-doc > tbody > tr,
    .cnpj-report-doc > tfoot > tr,
    .cnpj-report-doc > thead > tr > td,
    .cnpj-report-doc > tbody > tr > td,
    .cnpj-report-doc > tfoot > tr > td {
        display: block;
        width: 100%;
    }
    /* O espaçador de rodapé não deve aparecer na tela (flash de pré-impressão). */
    .cnpj-report-doc__foot-spacer {
        display: none;
    }
}

/* ──────────────────────────────────────────────────────────────────────
   Modal de reconexão do circuit Blazor (App.razor #components-reconnect-modal)
   O blazor.web.js só alterna classes de estado no elemento:
   components-reconnect-show (reconectando), -failed (desistiu) e
   -rejected (servidor de pé, circuit antigo morto — restart/deploy).
   ────────────────────────────────────────────────────────────────────── */
#components-reconnect-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 3000; /* acima de .modal-backdrop (1200) e do mini-dialer (1300) */
    align-items: center;
    justify-content: center;
    padding: 24px;
    /* Véu translúcido — a tela do usuário continua visível por trás.
       SEM backdrop-filter: em mobile o blur em overlay fixed tem bugs de
       compositing conhecidos (renderiza como fundo branco opaco). */
    background: rgba(15, 30, 51, 0.45);
}
#components-reconnect-modal.components-reconnect-failed,
#components-reconnect-modal.components-reconnect-rejected {
    display: flex;
}

/* Estado "reconectando": carência de 4s ANTES de aparecer. Blips rápidos
   (voltar pra aba no celular, wifi piscando) reconectam em 1-2s — a classe
   sai antes do delay e o overlay nem chega a ser visto. Deploy/restart de
   verdade passa da carência e mostra normalmente. failed/rejected seguem
   imediatos (ali não há o que esperar). */
#components-reconnect-modal.components-reconnect-show {
    display: flex;
    opacity: 0;
    animation: rc-grace-in 0.25s ease-out forwards;
    animation-delay: 4s;
}

@keyframes rc-grace-in {
    to { opacity: 1; }
}
.reconnect-modal__card {
    background: #fff;
    border-radius: 16px;
    padding: 28px 32px 24px;
    max-width: 400px;
    text-align: center;
    box-shadow: 0 20px 50px rgba(15, 30, 51, 0.35);
}
.reconnect-modal__msg {
    display: none;
    margin: 12px 0 0;
    font-size: 15px;
    line-height: 1.55;
    color: #334155;
}
.reconnect-modal__msg strong {
    color: #0F1E33;
}
.reconnect-modal__msg a {
    color: #2563EB;
    font-weight: 600;
}
#components-reconnect-modal.components-reconnect-show .reconnect-modal__msg--show,
#components-reconnect-modal.components-reconnect-failed .reconnect-modal__msg--failed,
#components-reconnect-modal.components-reconnect-rejected .reconnect-modal__msg--rejected {
    display: block;
}

/* Mascote sorteado por aparição: o script do App.razor põe/tira a classe
   rc-mascots--cat no container quando o modal passa de oculto pra visível,
   e o sorteado fica até o modal fechar. Sem a classe (fallback se o JS não
   rodar): cachorro. */
.rc-mascots {
    position: relative;
    width: 150px;
    height: 120px;
    margin: 0 auto;
}
.rc-mascot {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}
.rc-mascot--cat { display: none; }
.rc-mascots--cat .rc-mascot--dog { display: none; }
.rc-mascots--cat .rc-mascot--cat { display: block; }

/* Cachorrinho: soluço no corpo, cabeça pendendo, orelhas murchas, rabinho
   abanando devagar e lágrimas caindo. transform-box: fill-box pra origem da
   rotação ser o próprio elemento SVG (sem isso a origem é o viewBox todo). */
.rc-dog {
    animation: rc-sob 2.4s ease-in-out infinite;
}
.rc-head {
    transform-box: fill-box;
    transform-origin: 50% 90%;
    animation: rc-head-tilt 3.6s ease-in-out infinite;
}
.rc-ear {
    transform-box: fill-box;
}
.rc-ear--l {
    transform-origin: top right;
    animation: rc-ear 2.4s ease-in-out infinite;
}
.rc-ear--r {
    transform-origin: top left;
    animation: rc-ear 2.4s ease-in-out infinite reverse;
}
.rc-tail {
    transform-box: fill-box;
    transform-origin: left bottom;
    animation: rc-tail 1.8s ease-in-out infinite;
}
.rc-tear {
    animation: rc-tear-fall 1.6s ease-in infinite;
}
.rc-tear--2 {
    animation-delay: 0.8s;
}
/* Gatinho entediado: deitado, rabinho em pé balançando, pata dá o tapinha
   e a bolinha rola pra longe e volta (translate + rotate no mesmo ciclo de
   2.8s da pata, pro tapa coincidir com a saída da bola). */
.rc-cat-tail {
    transform-box: fill-box;
    transform-origin: right bottom; /* base do rabo (encosta no corpo) */
    animation: rc-cat-tail 3s ease-in-out infinite;
}
.rc-cat-paw {
    transform-box: fill-box;
    transform-origin: left center;
    animation: rc-paw-tap 2.8s ease-in-out infinite;
}
.rc-ball {
    transform-box: fill-box;
    transform-origin: center;
    animation: rc-ball-roll 2.8s ease-in-out infinite;
}
@keyframes rc-cat-tail {
    0%, 100% { transform: rotate(0deg); }
    50% { transform: rotate(7deg); }
}
@keyframes rc-paw-tap {
    0%, 12%, 100% { transform: rotate(0deg); }
    5% { transform: rotate(-16deg); }
}
/* 34px de percurso ÷ circunferência da bola (2π·9 ≈ 56,5) ≈ 216° de giro —
   rotação casada com o deslocamento pra bola rolar sem "patinar". */
@keyframes rc-ball-roll {
    0%, 7% { transform: translateX(0) rotate(0deg); }
    40%, 55% { transform: translateX(34px) rotate(216deg); }
    100% { transform: translateX(0) rotate(0deg); }
}

.rc-dots span {
    animation: rc-dot 1.2s infinite;
}
.rc-dots span:nth-child(2) { animation-delay: 0.2s; }
.rc-dots span:nth-child(3) { animation-delay: 0.4s; }

@keyframes rc-sob {
    0%, 32%, 100% { transform: translateY(0); }
    8% { transform: translateY(-2px); }
    16% { transform: translateY(0); }
    24% { transform: translateY(-1px); }
}
@keyframes rc-head-tilt {
    0%, 100% { transform: rotate(0deg); }
    50% { transform: rotate(-3deg); }
}
@keyframes rc-ear {
    0%, 100% { transform: rotate(0deg); }
    50% { transform: rotate(5deg); }
}
@keyframes rc-tail {
    0%, 100% { transform: rotate(0deg); }
    50% { transform: rotate(-10deg); }
}
@keyframes rc-tear-fall {
    0% { transform: translateY(0); opacity: 0; }
    15%, 75% { opacity: 1; }
    100% { transform: translateY(26px); opacity: 0; }
}
@keyframes rc-dot {
    0%, 60%, 100% { opacity: 0.25; }
    30% { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .rc-dog, .rc-head, .rc-ear--l, .rc-ear--r, .rc-tail, .rc-tear, .rc-dots span,
    .rc-cat-tail, .rc-cat-paw, .rc-ball {
        animation: none;
    }
    .rc-tear {
        opacity: 0;
    }
}

/* ══════════════════════════════════════════════════════════════════════════
   RELATÓRIO VILLELA — dashboard em modal (substitui o layout de impressão).
   rv-*  = visualizador (overlay/barra/zoom). rvr-* = canvas do relatório, de
   largura FIXA (1000px), apenas escalado pra caber na tela. Classes com prefixo
   próprio pra não colidir com o resto do app. O export (PDF/impressão) usa um
   clone offscreen desse canvas — ver js/report.js.
   ══════════════════════════════════════════════════════════════════════════ */
.rv-overlay{position:fixed;inset:0;z-index:1350;background:rgba(6,20,34,.62);display:flex;flex-direction:column}
.rv-bar{flex:0 0 auto;background:#0b1f33;color:#fff;display:flex;align-items:center;gap:12px;padding:12px 18px;box-shadow:0 4px 16px -6px rgba(0,0,0,.5)}
.rv-bar__title{font-weight:600;font-size:14px;display:flex;align-items:center;gap:9px}
.rv-bar__title small{opacity:.6;font-weight:400;font-size:12px}
.rv-bar__sp{flex:1}
.rv-zoom{display:flex;align-items:center;gap:6px;background:rgba(255,255,255,.08);border-radius:9px;padding:4px}
.rv-zoom button{width:28px;height:28px;border:none;border-radius:7px;background:none;color:#cfe0ec;cursor:pointer;font-size:16px;font-weight:700;display:grid;place-items:center;font-family:inherit}
.rv-zoom button:hover{background:rgba(255,255,255,.12)}
.rv-zoom span{font-size:12px;color:#9fb6c7;min-width:42px;text-align:center;font-variant-numeric:tabular-nums}
.rv-act{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border:none;border-radius:11px;font-size:13px;font-weight:700;cursor:pointer;font-family:inherit}
.rv-act svg{width:16px;height:16px}
.rv-act--ghost{background:rgba(255,255,255,.1);color:#fff}
.rv-act--ghost:hover{background:rgba(255,255,255,.18)}
.rv-act--primary{background:#17a5b0;color:#fff}
.rv-act--primary:hover{filter:brightness(1.06)}
.rv-close{width:34px;height:34px;border:none;border-radius:9px;background:rgba(255,255,255,.08);color:#fff;cursor:pointer;display:grid;place-items:center}
.rv-close:hover{background:rgba(255,255,255,.16)}
.rv-close svg{width:18px;height:18px}
.rv-stage{flex:1;overflow:auto;padding:26px;display:flex;justify-content:center;align-items:flex-start}
.rv-inner{transform-origin:top center;transition:transform .12s}
/* Loading do stage — relatório só monta com todas as fontes retornadas */
.rv-loading{align-self:center;background:#fff;border-radius:16px;padding:34px 44px;text-align:center;box-shadow:0 10px 40px rgba(0,0,0,.35)}
.rv-loading .sp{width:34px;height:34px;margin:0 auto 14px;border-radius:50%;border:3px solid #e4ebf1;border-top-color:#17a5b0;animation:spin .8s linear infinite}
.rv-loading .tx{font-weight:700;font-size:15px;color:#0b2a4a}
.rv-loading .sub{margin-top:4px;font-size:11.5px;color:#5b7286}

/* ---- canvas fixo (1000px) ---- */
.rvr-doc{width:1000px;background:#fff;color:#0e2233;overflow:hidden;position:relative;font-family:'Inter',system-ui,sans-serif;line-height:1.4}
.rvr-doc *{box-sizing:border-box}
.rvr-doc .tabnum{font-variant-numeric:tabular-nums}
.rvr-secn{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:6px;background:#17a5b0;color:#fff;font-size:11px;font-weight:700}
.rvr-sech{display:flex;align-items:center;gap:9px;font-weight:600;font-size:13px;letter-spacing:.3px;text-transform:uppercase;color:#0b2a4a}

/* HERO */
.rvr-hero{display:grid;grid-template-columns:355px 1fr}
.rvr-idcol{background:linear-gradient(165deg,#0b2a4a 0%,#0e3559 60%,#123f68 100%);color:#fff;padding:20px 26px 18px;position:relative;overflow:hidden}
.rvr-logo{display:block;height:44px;width:auto;position:relative;z-index:1}
.rvr-idcol h1{font-weight:700;font-size:19px;line-height:1.12;margin:12px 0 6px;position:relative;z-index:1}
.rvr-idcol h1 .ac{color:#3fd0dc}
.rvr-lead{font-size:10.5px;line-height:1.45;color:#bcd2e0;position:relative;z-index:1}
.rvr-idb{margin-top:13px;position:relative;z-index:1}
.rvr-idb .t{font-size:9.5px;letter-spacing:1.5px;text-transform:uppercase;color:#6fb6c2;font-weight:700;margin-bottom:7px;padding-bottom:5px;border-bottom:1px solid rgba(255,255,255,.14)}
.rvr-idrow{display:flex;gap:9px;margin-bottom:6px;font-size:11px;line-height:1.3}
.rvr-idrow svg{width:13px;height:13px;color:#3fd0dc;flex:0 0 auto;margin-top:1px}
.rvr-idrow .k{color:#8fb0c3;display:block;font-size:9px;text-transform:uppercase;letter-spacing:.5px}
.rvr-idrow .v{color:#fff;font-weight:600}
.rvr-total{margin-top:13px;background:rgba(255,255,255,.06);border:1px solid rgba(63,208,220,.35);border-radius:12px;padding:11px 14px;position:relative;z-index:1;display:flex;align-items:center;gap:11px}
.rvr-total .bag{width:32px;height:32px;border-radius:9px;background:#3fd0dc;color:#0b2a4a;display:grid;place-items:center;flex:0 0 auto}
.rvr-total .k{font-size:9px;letter-spacing:1px;text-transform:uppercase;color:#9ed6dd}
.rvr-total .v{font-weight:700;font-size:21px;color:#fff;letter-spacing:-.5px}
.rvr-execol{padding:17px 22px}
.rvr-ec-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:9px}
.rvr-ec{border:1px solid #e4ebf1;border-radius:12px;overflow:hidden;background:#fff}
.rvr-ec .cap{font-size:9.5px;letter-spacing:.8px;text-transform:uppercase;font-weight:700;color:#fff;padding:5px 12px;text-align:center}
.rvr-ec .bd{padding:9px 12px;text-align:center;background:#fff}
.rvr-ec .v{font-weight:700;font-size:18px;letter-spacing:-.5px}
.rvr-ec .d{font-size:9.5px;color:#5b7286;margin-top:2px;line-height:1.25}
.rvr-ec.red .cap{background:#c0392b}.rvr-ec.red .v{color:#c0392b}
.rvr-ec.orange .cap{background:#e08a3c}.rvr-ec.orange .v{color:#e08a3c}
.rvr-ec.green .cap{background:#2e9e5b}.rvr-ec.green .v{color:#2e9e5b}
.rvr-ec.navy .cap{background:#0b2a4a}.rvr-ec.navy .v{color:#0b2a4a}
.rvr-ec.teal .cap{background:#17a5b0}.rvr-ec.teal .v{color:#0e7d87}
/* Faixa Recupere.IA no resumo executivo: total de processos + score */
.rvr-ria-row{margin-top:12px;display:grid;grid-template-columns:1fr 1.7fr;gap:12px}
.rvr-ria-proc .bd .v.big{font-size:32px;line-height:1.1;margin-top:6px}
.rvr-ria-score .bd .d{max-width:280px;margin-left:auto;margin-right:auto}
.rvr-gauge{position:relative;width:120px;margin:0 auto}
.rvr-gauge svg{display:block;width:100%}
.rvr-gauge .num{position:absolute;left:0;right:0;bottom:-2px;text-align:center;font-weight:700;font-size:19px;color:#0b2a4a;letter-spacing:-.5px}

/* BODY */
.rvr-body{padding:22px 24px;display:grid;grid-template-columns:1fr 1fr;gap:18px}
/* Só um painel visível (Diagnóstico OU Esfera zerado) → ocupa a largura toda. */
.rvr-body--single{grid-template-columns:1fr}
.rvr-panel{border:1px solid #e4ebf1;border-radius:14px;padding:15px 16px}
.rvr-panel .rvr-sech{margin-bottom:12px}
.rvr-panel .sub{font-size:11px;color:#5b7286;margin:-8px 0 12px}
.rvr-diag{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}
.rvr-cell{border:1px solid #e4ebf1;border-radius:11px;padding:12px}
.rvr-cell .label{font-size:10.5px;color:#5b7286;font-weight:600}
.rvr-cell .value{font-weight:700;font-size:16px;margin-top:6px;color:#0e2233}
.rvr-cell .hint{font-size:10px;color:#5b7286;margin-top:2px}
.rvr-bar{margin-top:8px;height:9px;border-radius:6px;overflow:hidden;display:flex;background:#eef2f5}
.rvr-bar>div{height:100%}
.rvr-legend{display:flex;flex-wrap:wrap;gap:12px;margin-top:8px;font-size:10.5px;color:#5b7286}
.rvr-legend .dot{display:inline-block;width:8px;height:8px;border-radius:3px;margin-right:5px;vertical-align:middle}
.rvr-esfera .er{display:flex;justify-content:space-between;align-items:center;padding:9px 0;border-bottom:1px solid #e4ebf1;font-size:12px}
.rvr-esfera .er:last-child{border-bottom:none}
.rvr-esfera .er .n{color:#0e2233;font-weight:600;display:flex;align-items:center;gap:8px}
.rvr-esfera .er .n .sq{width:9px;height:9px;border-radius:3px}
.rvr-esfera .er .v{font-weight:700;font-variant-numeric:tabular-nums}
.rvr-ttotal{margin-top:12px;background:#0b2a4a;color:#fff;border-radius:10px;padding:12px 15px;display:flex;justify-content:space-between;align-items:center}
.rvr-ttotal .k{font-size:11px;opacity:.8}
.rvr-ttotal .v{font-weight:700;font-size:18px;color:#3fd0dc}

/* SEÇÃO 4/5 — Parcelamentos e Sócios (largura total; Parcelamentos é o único
   bloco paginável — ver paginação em js/report.js). */
.rvr-parc{padding:0 24px 22px}
.rvr-socios{padding:0 24px 24px}
.rvr-socios-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 22px;margin-top:6px}
.rvr-tbl{width:100%;border-collapse:collapse;font-size:10px}
.rvr-tbl th{background:#17a5b0;color:#fff;font-weight:600;font-size:9px;letter-spacing:.3px;text-transform:uppercase;padding:7px 7px;text-align:left}
.rvr-tbl td{padding:7px 7px;border-bottom:1px solid #e4ebf1;color:#0e2233}
.rvr-tbl tr:last-child td{border-bottom:none}
.rvr-tbl td.r,.rvr-tbl th.r{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.rvr-pill{display:inline-block;font-size:9px;font-weight:700;padding:2px 7px;border-radius:999px;text-transform:uppercase;letter-spacing:.3px}
.rvr-pill.def{background:#e7f6ee;color:#1c7a44}
.rvr-pill.enc{background:#eef2f5;color:#5b7286}
.rvr-pill.wait{background:#fdf3e3;color:#a86a1c}
.rvr-pill.res{background:#fdeceb;color:#b23b30}
.rvr-socio{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid #e4ebf1}
.rvr-socio:last-child{border-bottom:none}
.rvr-socio .av{width:28px;height:28px;border-radius:8px;background:#eaf4f6;color:#0e7d87;display:grid;place-items:center;flex:0 0 auto;font-weight:700;font-size:12px}
.rvr-socio{align-items:flex-start}
.rvr-socio .info{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.rvr-socio .info .nm{font-size:12px;font-weight:600;color:#0e2233;line-height:1.25;overflow-wrap:anywhere}
.rvr-socio .info .sub{font-size:10px;color:#5b7286;font-variant-numeric:tabular-nums;line-height:1.2;overflow-wrap:anywhere;margin:0}
.rvr-socio .hot{font-size:8.5px;font-weight:700;background:#fdeceb;color:#b23b30;border-radius:999px;padding:2px 7px;text-transform:uppercase}

/* Processos embutidos no vão da coluna direita do hero (Resumo Executivo).
   Grid compacto de 3 caixas ocupando o espaço abaixo dos contadores. */
.rvr-hproc{display:grid;grid-template-columns:1.15fr 1fr 1fr;gap:10px;margin-top:12px;align-items:start}
.rvr-hproc .rvr-panel{padding:11px 12px}
.rvr-hproc .rvr-sech{font-size:10.5px;margin-bottom:8px;gap:7px}
.rvr-hproc .rvr-secn{width:17px;height:17px;font-size:10px}
.rvr-hproc .rvr-risk .rr{padding:5px 0;font-size:10px}
.rvr-hproc .rvr-risk .rr .n{font-size:9px;gap:6px}
.rvr-hproc .rvr-risk .rr .n svg{width:11px;height:11px}
/* Ameaças default (sem dados da API): frases em vez de palavras-chave com número. */
.rvr-hproc .rvr-risk--default .rr{align-items:flex-start}
.rvr-hproc .rvr-risk--default .rr .n{text-transform:none;letter-spacing:0;font-weight:500;line-height:1.3;align-items:flex-start}
.rvr-hproc .rvr-risk--default .rr .n svg{margin-top:1px}
.rvr-hproc .rvr-proc-total{padding:8px 11px}
.rvr-hproc .rvr-proc-total .v{font-size:15px}
.rvr-hproc .rvr-proc-h{margin:9px 0 2px;padding:4px 9px}
.rvr-hproc .rvr-proclist .pr{padding:5px 2px;font-size:10.5px}

/* BODY 3 — processos e ameaças (Recupere.IA) */
.rvr-body3{padding:0 24px 24px;display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:18px}
.rvr-risk .rr{display:flex;justify-content:space-between;align-items:center;padding:8px 0;border-bottom:1px solid #e4ebf1;font-size:11.5px}
.rvr-risk .rr:last-child{border-bottom:none}
.rvr-risk .rr .n{color:#0e2233;font-weight:600;display:flex;align-items:center;gap:8px;text-transform:uppercase;letter-spacing:.3px;font-size:10.5px}
.rvr-risk .rr .n svg{width:13px;height:13px;color:#c0392b;flex:0 0 auto}
.rvr-risk .rr .v{font-weight:700;color:#c0392b}
.rvr-proc-total{background:#0b2a4a;color:#fff;border-radius:10px;padding:10px 14px;display:flex;justify-content:space-between;align-items:center}
.rvr-proc-total .k{font-size:10px;letter-spacing:.6px;text-transform:uppercase;font-weight:700;opacity:.85}
.rvr-proc-total .v{font-weight:700;font-size:17px;color:#3fd0dc}
.rvr-proc-h{margin:12px 0 2px;font-size:9.5px;letter-spacing:.8px;text-transform:uppercase;font-weight:700;color:#fff;background:#17a5b0;border-radius:6px;padding:5px 10px}
.rvr-proclist .pr{display:flex;justify-content:space-between;align-items:center;padding:7px 2px;border-bottom:1px solid #e4ebf1;font-size:11.5px}
.rvr-proclist .pr:last-child{border-bottom:none}
.rvr-proclist .pr .n{color:#0e2233;font-weight:600}
.rvr-proclist .pr .v{font-weight:700;color:#0b2a4a}

/* FOOTER */
.rvr-foot{background:linear-gradient(150deg,#0b2a4a,#0e3559);color:#fff;padding:24px 26px 20px}
.rvr-fgrid{display:grid;grid-template-columns:1.5fr 1.1fr;gap:26px}
.rvr-foot h4{font-size:11px;letter-spacing:1px;text-transform:uppercase;color:#3fd0dc;font-weight:700;margin-bottom:10px;display:flex;align-items:center;gap:7px}
.rvr-foot h4 svg{width:14px;height:14px}
.rvr-foot p{font-size:11.5px;line-height:1.6;color:#cbdae6}
.rvr-why{list-style:none;margin:0;padding:0}
.rvr-why li{display:flex;gap:8px;font-size:11.5px;line-height:1.45;color:#cbdae6;margin-bottom:7px}
.rvr-why li svg{width:14px;height:14px;color:#3fd0dc;flex:0 0 auto;margin-top:2px}
.rvr-fbar{margin-top:18px;padding-top:16px;border-top:1px solid rgba(255,255,255,.14);display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.rvr-fbar .rvr-logo{height:38px}
.rvr-fbar .sp{flex:1}
.rvr-fcontact{display:flex;gap:22px;flex-wrap:wrap}
.rvr-fcontact .ci{font-size:11.5px;color:#e6eef5;display:flex;align-items:center;gap:7px}
.rvr-fcontact .ci svg{width:14px;height:14px;color:#3fd0dc}
.rvr-disc{background:#081f34;color:#7f9bb1;font-size:8.5px;line-height:1.5;padding:9px 26px;text-align:center}

/* ---- Paginação (folhas A4) ----
   O relatório de fluxo (.rvr-doc) é o material-fonte; o js/report.js mede seus
   blocos e os distribui em folhas .rvr-page de altura A4 fixa (1000×1414 =
   proporção 210×297mm). As mesmas folhas alimentam a prévia no modal, o PDF e a
   impressão — layout único, três saídas idênticas. Parcelamentos é o único bloco
   que quebra entre folhas; o restante é atômico. Cada folha carrega o rodapé
   corrido (.rvr-runfoot); o hero só aparece na folha 1. */
.rvr-pages{display:flex;flex-direction:column;align-items:center;gap:22px;background:transparent}
.rvr-page{position:relative;width:1000px;height:1414px;background:#fff;overflow:hidden;box-shadow:0 6px 26px rgba(6,20,34,.28)}
.rvr-page__content{display:flex;flex-direction:column;min-height:100%}
/* Rodapé de fim do relatório (Conclusão + disclaimer) colado na base da última folha. */
.rvr-endfoot{margin-top:auto}
/* Rodapé corrido, fixo na base de cada folha */
.rvr-runfoot{position:absolute;left:0;right:0;bottom:0;height:34px;background:#081f34;color:#8fb0c3;display:flex;align-items:center;gap:14px;padding:0 26px;font-size:9px}
.rvr-runfoot__logo{height:16px;width:auto;opacity:.9;flex:0 0 auto}
.rvr-runfoot__c{color:#7f9bb1;letter-spacing:.2px}
.rvr-runfoot__sp{flex:1}
.rvr-runfoot__pg{color:#9ed6dd;font-variant-numeric:tabular-nums;letter-spacing:.3px}

/* Responsivo: só o fluxo (barra do modal). As folhas do relatório são sempre
   1000px de largura, apenas escaladas pra caber (fit via js/report.js). */
@media (max-width: 720px) {
    .rv-stage{padding:12px}
    .rv-bar{gap:7px;padding:9px 11px;flex-wrap:wrap}
    .rv-bar__title{font-size:13px}
    .rv-bar__title small{display:none}
    .rv-act .lbl{display:none}
    .rv-act{padding:10px 12px}
    .rv-zoom{padding:3px}
    .rv-zoom span{min-width:36px}
}
@media (max-width: 400px) {
    .rv-bar__title .ttl{display:none}
}