:root {
    --cor-fundo: #f3f5f8;
    --cor-fundo-suave: #eef1f4;
    --cor-texto: #1f2937;
    --cor-texto-suave: #6b7280;
    --cor-borda: #e5e7eb;
    --cor-primaria: #003049;
    --cor-primaria-rgb: 0, 48, 73;
    --cor-primaria-hover: #01415d;
    --cor-superficie: #ffffff;
    --cor-sidebar: #0a2436;
    --cor-sidebar-texto: #a9bccb;
    --cor-sidebar-texto-ativo: #ffffff;
    --cor-sidebar-hover: #123249;
    --cor-acento: #0f9b8e;
    --cor-acento-rgb: 15, 155, 142;
    --cor-perigo: #b3261e;
    --cor-perigo-fundo: #fdecea;
    --cor-perigo-hover: #f8d7d4;
    --cor-sucesso: #1e7e34;
    --cor-sucesso-fundo: #e6f4ea;
    --cor-info: #174ea6;
    --cor-info-fundo: #e8f0fe;
    --cor-atencao: #a9720a;
    --cor-atencao-fundo: #fdf3e0;
    --sombra: 0 1px 2px rgba(15, 23, 42, 0.06), 0 1px 8px rgba(15, 23, 42, 0.06);
    --raio: 12px;
    --raio-pequeno: 8px;
    /* Largura atual da sidebar — usada pra centralizar modais na área de
       conteúdo (sem contar o menu), não na tela inteira. Acompanha os mesmos
       estados de largura já usados em `.layout`/`.sidebar`. */
    --largura-sidebar: 240px;
}

html.sidebar-minimizada {
    --largura-sidebar: 76px;
}

[data-tema="escuro"] {
    --cor-fundo: #101826;
    --cor-fundo-suave: #212f45;
    --cor-texto: #e2e8f0;
    --cor-texto-suave: #93a2b8;
    --cor-borda: #2a3648;
    --cor-primaria: #5b9bd5;
    --cor-primaria-rgb: 91, 155, 213;
    --cor-primaria-hover: #7db4e0;
    --cor-superficie: #182234;
    --cor-sidebar: #0a1220;
    --cor-sidebar-hover: #1a2536;
    --cor-acento: #2dd4bf;
    --cor-acento-rgb: 45, 212, 191;
    --cor-perigo: #f87171;
    --cor-perigo-fundo: #452028;
    --cor-perigo-hover: #5a2a33;
    --cor-sucesso: #4ade80;
    --cor-sucesso-fundo: #1c3a2a;
    --cor-info: #60a5fa;
    --cor-info-fundo: #1c2f4a;
    --cor-atencao: #fbbf24;
    --cor-atencao-fundo: #3a2e12;
    --sombra: 0 1px 2px rgba(0, 0, 0, 0.35), 0 4px 14px rgba(0, 0, 0, 0.3);
}

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

html {
    overflow-x: hidden;
}

body {
    font-family: "Segoe UI", system-ui, sans-serif;
    color: var(--cor-texto);
    background-color: var(--cor-fundo);
    overflow-x: hidden;
    /* Rede de segurança pra celular: se algum elemento interno (ex: um grid
       com largura mínima de coluna maior que a tela) forçar um pouco de
       overflow horizontal, isso trava a página inteira nesse tamanho em vez
       de deixar o navegador mobile "abrir" a viewport inteira pra caber o
       conteúdo — o que faz a página inteira aparecer espremida à esquerda
       com uma faixa em branco enorme à direita. */
    max-width: 100vw;
}

/* ---------- Scrollbars discretas ---------- */

* {
    scrollbar-width: thin;
    scrollbar-color: var(--cor-texto-suave) transparent;
}

*::-webkit-scrollbar {
    width: 7px;
    height: 7px;
}

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

*::-webkit-scrollbar-thumb {
    background-color: var(--cor-texto-suave);
    border-radius: 999px;
}

*::-webkit-scrollbar-thumb:hover {
    background-color: var(--cor-texto);
}

a {
    color: inherit;
}

.icone {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

/* ---------- Layout geral ---------- */

.layout {
    display: grid;
    grid-template-columns: 240px 1fr;
    height: 100vh;
    transition: grid-template-columns 0.15s ease;
}

.layout--publico {
    grid-template-columns: 1fr;
}

html.sidebar-minimizada .layout {
    grid-template-columns: 76px 1fr;
}

.area-principal {
    display: flex;
    flex-direction: column;
    min-width: 0;
    height: 100vh;
    overflow: hidden;
}

.conteudo {
    padding: 2rem;
    max-width: 1180px;
    width: 100%;
    margin: 0 auto;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    /* É esta div (não o <html>) que rola nesse layout de app-shell (altura
       fixa em 100vh) — por isso o `scrollbar-gutter` do <html> não tinha
       efeito nenhum. Reserva o espaço da barra de rolagem sempre, pra ela não
       aparecer/sumir conforme a altura do conteúdo muda e dar um salto na
       largura útil da página. */
    scrollbar-gutter: stable;
}

html.sidebar-minimizada .conteudo {
    max-width: none;
}

.layout--publico .conteudo {
    max-width: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    min-height: 100vh;
    padding: 1.5rem;
    background:
        radial-gradient(circle at 12% 8%, rgba(var(--cor-primaria-rgb), 0.16), transparent 42%),
        radial-gradient(circle at 88% 92%, rgba(var(--cor-acento-rgb), 0.14), transparent 42%),
        var(--cor-fundo);
}

/* Login: em vez do card centralizado (usado nas outras telas públicas —
   esqueci a senha, conectar TV), a tela toda vira duas colunas: marca à
   esquerda, formulário à direita. Reseta o padding/centralização/fundo do
   `.layout--publico .conteudo` genérico pra virar um grid full-bleed. */
.layout--publico .conteudo--login {
    max-width: none;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: stretch;
    gap: 0;
    padding: 0;
    background: var(--cor-fundo);
}

.login-marca {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3rem;
    overflow: hidden;
    background: linear-gradient(155deg, var(--cor-primaria) 0%, #011c2b 100%);
}

.login-marca::before {
    content: "";
    position: absolute;
    inset: -15%;
    background: radial-gradient(circle at 25% 20%, rgba(var(--cor-acento-rgb), 0.35), transparent 55%);
    pointer-events: none;
}

.login-marca__conteudo {
    position: relative;
    max-width: 380px;
}

.login-marca__logo {
    height: 42px;
    filter: brightness(0) invert(1);
    margin-bottom: 2.5rem;
}

.login-marca__frase {
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.45;
    color: #fff;
}

.login-marca__rodape {
    position: relative;
    margin-top: 2rem;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.65);
}

.login-formulario {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
}

@media (max-width: 860px) {
    .layout--publico .conteudo--login {
        grid-template-columns: minmax(0, 1fr);
    }

    .login-marca {
        display: none;
    }
}

.conteudo-centralizado {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: calc(100vh - 200px);
}

/* ---------- Sidebar ---------- */

.sidebar {
    background-color: var(--cor-sidebar);
    color: var(--cor-sidebar-texto);
    display: flex;
    flex-direction: column;
    padding: 1.25rem 0.9rem;
    position: sticky;
    top: 0;
    height: 100vh;
}

.sidebar__marca {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.5rem 0.6rem 1.5rem;
}

.sidebar__logo {
    height: 34px;
    filter: brightness(0) invert(1);
}

.sidebar__toggle {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    color: var(--cor-sidebar-texto);
    cursor: pointer;
    padding: 0.4rem;
    border-radius: var(--raio-pequeno);
}

.sidebar__toggle:hover {
    background-color: var(--cor-sidebar-hover);
    color: var(--cor-sidebar-texto-ativo);
}

.sidebar__toggle .icone {
    width: 20px;
    height: 20px;
}

.sidebar__nav {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    flex: 1;
}

.sidebar__link {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.65rem 0.8rem;
    border-radius: var(--raio-pequeno);
    text-decoration: none;
    font-weight: 500;
    font-size: 0.92rem;
    color: var(--cor-sidebar-texto);
    transition: background-color 0.15s ease, color 0.15s ease;
    white-space: nowrap;
    overflow: hidden;
}

.sidebar__link:hover {
    background-color: var(--cor-sidebar-hover);
    color: var(--cor-sidebar-texto-ativo);
}

.sidebar__link.is-ativo {
    background-color: var(--cor-primaria);
    color: var(--cor-sidebar-texto-ativo);
}

/* ---------- Sidebar minimizada (só ícones) ---------- */

html.sidebar-minimizada .sidebar {
    padding-left: 0.4rem;
    padding-right: 0.4rem;
}

html.sidebar-minimizada .sidebar__marca {
    justify-content: center;
}

html.sidebar-minimizada .sidebar__logo {
    display: none;
}

html.sidebar-minimizada .sidebar__link {
    justify-content: center;
    padding: 0.65rem;
}

html.sidebar-minimizada .sidebar__link span {
    display: none;
}

/* ---------- Sidebar em overlay (celular) — ver bloco @media no fim do
   arquivo. Escondido/sem efeito em telas largas. ---------- */

.sidebar__backdrop {
    position: fixed;
    inset: 0;
    background-color: rgba(15, 23, 42, 0.45);
    z-index: 55;
}

.sidebar__backdrop[hidden] {
    display: none;
}

/* ---------- Topbar ---------- */

.topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.75rem 2rem;
    background-color: var(--cor-superficie);
    border-bottom: 1px solid var(--cor-borda);
    flex-shrink: 0;
}

.topbar__menu-mobile {
    display: none;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.4rem;
    border-radius: var(--raio-pequeno);
    color: var(--cor-texto-suave);
}

.topbar__menu-mobile:hover {
    background-color: var(--cor-fundo-suave);
    color: var(--cor-primaria);
}

.topbar__esquerda {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    min-width: 0;
    flex: 1;
    flex-wrap: wrap;
}

.topbar__esquerda:empty {
    display: none;
}

.topbar__usuario {
    display: flex;
    align-items: center;
    gap: 0.65rem;
}

.topbar__usuario-info {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.menu-usuario {
    position: relative;
}

.menu-usuario__botao {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: none;
    border: none;
    padding: 0.35rem 0.5rem;
    border-radius: var(--raio-pequeno);
    font: inherit;
    color: inherit;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.menu-usuario__botao:hover {
    background-color: var(--cor-fundo);
}

.menu-usuario__botao .icone {
    width: 16px;
    height: 16px;
    color: var(--cor-texto-suave);
    transform: rotate(90deg);
    transition: transform 0.15s ease;
}

.menu-usuario__botao[aria-expanded="true"] .icone {
    transform: rotate(-90deg);
}

.menu-usuario__painel {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 20;
    min-width: 190px;
    display: flex;
    flex-direction: column;
    background-color: var(--cor-superficie);
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio-pequeno);
    box-shadow: var(--sombra);
    padding: 0.4rem;
}

.menu-usuario__painel[hidden] {
    display: none;
}

.menu-usuario__opcao {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    width: 100%;
    padding: 0.55rem 0.6rem;
    border-radius: var(--raio-pequeno);
    background: none;
    border: none;
    text-decoration: none;
    text-align: left;
    color: var(--cor-texto);
    font-family: inherit;
    font-size: 0.88rem;
    font-weight: 500;
    cursor: pointer;
}

.menu-usuario__opcao:hover {
    background-color: var(--cor-fundo);
}

.menu-usuario__opcao--interruptor {
    justify-content: space-between;
}

.menu-usuario__opcao-rotulo {
    display: flex;
    align-items: center;
    gap: 0.65rem;
}

.interruptor {
    position: relative;
    display: inline-block;
    width: 36px;
    height: 21px;
    border-radius: 999px;
    background-color: var(--cor-borda);
    flex-shrink: 0;
    transition: background-color 0.15s ease;
}

.interruptor__bolinha {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 17px;
    height: 17px;
    border-radius: 50%;
    background-color: #fff;
    transition: transform 0.15s ease;
}

.menu-usuario__opcao--interruptor[aria-checked="true"] .interruptor {
    background-color: var(--cor-primaria);
}

.menu-usuario__opcao--interruptor[aria-checked="true"] .interruptor__bolinha {
    transform: translateX(15px);
}

.topbar__usuario-info small {
    color: var(--cor-texto-suave);
    font-size: 0.75rem;
}

.avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background-color: var(--cor-primaria);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.9rem;
}

/* ---------- Cabeçalho de página ---------- */

.acoes-pagina {
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-bottom: 1.5rem;
}

.acoes-pagina--entre {
    justify-content: space-between;
    align-items: center;
}

.acoes-pagina--entre .filtros-barra {
    margin-bottom: 0;
}

/* ---------- Cartão ---------- */

.cartao {
    background-color: var(--cor-superficie);
    border-radius: var(--raio);
    box-shadow: var(--sombra);
    overflow: hidden;
}

/* ---------- Indicador de carregamento (spinner) sobre um cartão ---------- */

.carregando-overlay {
    position: absolute;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    background-color: color-mix(in srgb, var(--cor-superficie) 75%, transparent);
    z-index: 5;
}

.carregando-overlay.is-visivel {
    display: flex;
}

.carregando-spinner {
    width: 28px;
    height: 28px;
    border: 3px solid var(--cor-borda);
    border-top-color: var(--cor-primaria);
    border-radius: 50%;
    animation: carregando-girar 0.7s linear infinite;
}

@keyframes carregando-girar {
    to { transform: rotate(360deg); }
}

.cartao--formulario {
    padding: 1.75rem;
    max-width: 640px;
    margin: 0 auto;
}

/* Variante mais larga pra formulários com campos em 2 colunas (ex: nova
   oportunidade) — 640px sobra pouco quando os campos ficam lado a lado. */
.cartao--formulario-largo {
    max-width: 880px;
}

.cartao--preenchido {
    padding: 1.75rem;
}

.cartao--preenchido h2 {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    font-size: 1.15rem;
    margin-bottom: 1rem;
}

.cartao--preenchido h3 {
    font-size: 0.95rem;
    margin: 1.25rem 0 0.75rem;
}

.cartao--preenchido p {
    margin-bottom: 0.9rem;
}

.cartao--preenchido .tabela {
    margin-bottom: 0.9rem;
}

.auth-card {
    max-width: 400px;
    width: 100%;
    padding: 2.5rem;
    background: var(--cor-superficie);
    border-radius: var(--raio);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06), 0 16px 40px rgba(15, 23, 42, 0.12);
    border: 1px solid var(--cor-borda);
}

.auth-card__marca {
    display: flex;
    justify-content: center;
    margin-bottom: 1.75rem;
}

.auth-card__marca img {
    height: 44px;
}

.auth-card h2 {
    margin-bottom: 0.35rem;
    font-size: 1.3rem;
    text-align: center;
}

.auth-card__subtitulo {
    margin-bottom: 1.75rem;
    font-size: 0.85rem;
    color: var(--cor-texto-suave);
    text-align: center;
}

.auth-card form {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.auth-card .campo {
    margin-bottom: 1rem;
}

.auth-card__rodape {
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--cor-borda);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
}

.auth-card__rodape a {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--cor-primaria);
    text-decoration: none;
}

.auth-card__rodape a:hover {
    text-decoration: underline;
}

.campo-com-icone {
    position: relative;
    width: 100%;
}

.campo-com-icone .icone {
    position: absolute;
    left: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--cor-texto-suave);
    pointer-events: none;
}

.campo-com-icone input.input {
    width: 100%;
    padding-left: 2.5rem;
}

.campo-com-icone--senha input.input {
    padding-right: 2.5rem;
}

.campo-com-icone__alternar {
    position: absolute;
    right: 0.4rem;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    background: none;
    border: none;
    padding: 0.35rem;
    border-radius: 6px;
    cursor: pointer;
    color: var(--cor-texto-suave);
}

.campo-com-icone__alternar .icone {
    position: static;
    transform: none;
}

.campo-com-icone__alternar:hover {
    color: var(--cor-primaria);
    background-color: var(--cor-fundo-suave);
}

.requisitos-senha {
    margin-bottom: 1.1rem;
    padding: 0.85rem 1rem;
    background-color: var(--cor-fundo-suave);
    border-radius: var(--raio-pequeno);
}

.requisitos-senha__titulo {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--cor-texto-suave);
    margin-bottom: 0.5rem;
}

.requisitos-senha ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.requisitos-senha li {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    color: var(--cor-texto-suave);
    transition: color 0.15s ease;
}

.requisitos-senha li::before {
    content: "○";
    font-size: 0.75rem;
    color: var(--cor-texto-suave);
}

.requisitos-senha li.requisito--ok {
    color: var(--cor-sucesso);
}

.requisitos-senha li.requisito--ok::before {
    content: "✓";
    font-weight: 700;
    color: var(--cor-sucesso);
}

/* ---------- Grid de cartões (painel administração) ---------- */

.grade-cartoes {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1rem;
}

.cartao-link {
    background-color: var(--cor-superficie);
    border-radius: var(--raio);
    box-shadow: var(--sombra);
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    text-decoration: none;
    color: var(--cor-texto);
    transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.cartao-link:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.12);
}

.cartao-link__icone {
    width: 42px;
    height: 42px;
    border-radius: var(--raio-pequeno);
    background-color: rgba(var(--cor-primaria-rgb), 0.08);
    color: var(--cor-primaria);
    display: flex;
    align-items: center;
    justify-content: center;
}

.cartao-link__icone .icone {
    width: 22px;
    height: 22px;
}

.cartao-link strong {
    font-size: 0.98rem;
}

.cartao-link small {
    color: var(--cor-texto-suave);
}

/* ---------- Formulários ---------- */

.campo {
    margin-bottom: 1.1rem;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.campo--checkbox {
    flex-direction: row;
    align-items: center;
}

.campo__linha-botao {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.campo__linha-botao .input {
    flex: 1;
    min-width: 0;
}

.campo__linha-botao .botao {
    flex-shrink: 0;
    white-space: nowrap;
}

.campo label {
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--cor-texto-suave);
}

.input,
select.input,
textarea.input {
    padding: 0.55rem 0.7rem;
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio-pequeno);
    font-size: 0.95rem;
    background-color: var(--cor-superficie);
    color: var(--cor-texto);
}

/* Seta customizada nos <select> nativos, pra ficar igual à seta "▾" do
   select-buscavel (Cliente/Contato/Vendedor/Franquia) em vez da seta padrão
   do navegador — sem isso os dois tipos de campo ficam com aparência
   diferente lado a lado no mesmo formulário. Não se aplica a select[multiple]
   (ex: Segmentos do cliente), que é uma lista, não um dropdown. */
select.input:not([multiple]) {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding-right: 2rem;
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 10px 6px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M0 0L5 6L10 0Z' fill='%236b7280'/%3E%3C/svg%3E");
}

[data-tema="escuro"] select.input:not([multiple]) {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M0 0L5 6L10 0Z' fill='%2393a2b8'/%3E%3C/svg%3E");
}

.input:focus,
select.input:focus {
    outline: none;
    border-color: var(--cor-primaria);
    box-shadow: 0 0 0 3px rgba(var(--cor-primaria-rgb), 0.12);
}

.lista-permissoes__acoes {
    display: flex;
    gap: 0.9rem;
    margin-bottom: 0.5rem;
}

.lista-permissoes {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio-pequeno);
    overflow: hidden;
}

.lista-permissoes__opcao {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    padding: 0.65rem 0.8rem;
    cursor: pointer;
    border-bottom: 1px solid var(--cor-borda);
}

.lista-permissoes__opcao:last-child {
    border-bottom: none;
}

.lista-permissoes__opcao:hover {
    background-color: var(--cor-fundo-suave);
}

.lista-permissoes__opcao input {
    margin-top: 0.25rem;
    cursor: pointer;
    flex-shrink: 0;
}

.lista-permissoes__opcao strong {
    font-size: 0.88rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.lista-permissoes__opcao small {
    font-size: 0.78rem;
    display: block;
    margin-top: 0.15rem;
}

/* ---------- Lista de checkboxes genérica (ex: funis de um estágio) ---------- */

.lista-checkboxes {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio-pequeno);
    padding: 0.6rem;
}

.lista-checkboxes__opcao {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.4rem 0.7rem;
    border: 1px solid var(--cor-borda);
    border-radius: 999px;
    cursor: pointer;
    font-size: 0.86rem;
}

.lista-checkboxes__opcao:hover {
    background-color: var(--cor-fundo-suave);
}

.lista-checkboxes__opcao input {
    cursor: pointer;
}

.lista-checkboxes__opcao:has(input:checked) {
    background-color: var(--cor-primaria);
    border-color: var(--cor-primaria);
    color: #fff;
}

.form-acoes {
    display: flex;
    gap: 0.6rem;
}

.lista-reordenavel {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.lista-reordenavel__item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.6rem 0.9rem;
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio-pequeno);
    background-color: var(--cor-fundo);
    cursor: grab;
}

.lista-reordenavel__item--arrastando {
    opacity: 0.4;
}

.lista-reordenavel__alca {
    display: flex;
    color: var(--cor-texto-suave);
}

.lista-reordenavel__alca .icone {
    width: 18px;
    height: 18px;
}

.lista-reordenavel__nome {
    flex: 1;
    font-weight: 600;
}

.campo__erros {
    list-style: none;
    color: var(--cor-perigo);
    font-size: 0.82rem;
}

/* ---------- Botões ---------- */

.botao {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1.1rem;
    background-color: var(--cor-primaria);
    color: #fff;
    border: none;
    border-radius: var(--raio-pequeno);
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: background-color 0.15s ease;
}

.botao:hover {
    background-color: var(--cor-primaria-hover);
}

.botao--secundario {
    background-color: transparent;
    color: var(--cor-primaria);
    border: 1px solid var(--cor-borda);
}

.botao--secundario:hover {
    background-color: rgba(var(--cor-primaria-rgb), 0.06);
}

.botao--perigo {
    background-color: var(--cor-perigo-fundo);
    color: var(--cor-perigo);
}

.botao--perigo:hover {
    background-color: var(--cor-perigo-hover);
}

.botao--icone {
    padding: 0.4rem;
    background-color: transparent;
    color: var(--cor-texto-suave);
}

.botao--icone:hover {
    background-color: var(--cor-fundo);
    color: var(--cor-primaria);
}

.botao--pequeno {
    padding: 0.4rem 0.75rem;
    font-size: 0.82rem;
    gap: 0.35rem;
}

.botao--bloco {
    width: 100%;
    justify-content: center;
}

.botao--pequeno .icone {
    width: 16px;
    height: 16px;
}

.botao--desabilitado {
    opacity: 0.45;
    pointer-events: none;
}

/* ---------- Filtros do funil de vendas ---------- */

.filtros-barra {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-bottom: 1.5rem;
    flex-shrink: 0;
}

.filtros-barra--direita {
    justify-content: flex-end;
}

.pagina-funil {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
}

.filtro-pill {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.3rem 0.3rem 0.3rem 0.9rem;
    background-color: var(--cor-superficie);
    border: 1px solid var(--cor-borda);
    border-radius: 999px;
}

.filtro-pill label {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--cor-texto-suave);
    white-space: nowrap;
}

.filtro-pill select,
.filtro-pill input {
    border: none;
    background-color: var(--cor-fundo);
    border-radius: 999px;
    padding: 0.35rem 0.7rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--cor-primaria);
    cursor: pointer;
}

.filtro-pill select {
    min-width: 160px;
    max-width: 220px;
    width: 220px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

.filtro-pill input[type="text"],
.filtro-pill input[type="search"] {
    width: 160px;
    cursor: text;
}

.filtro-pill input[type="date"] {
    width: 132px;
    cursor: text;
}

.filtro-pill__separador {
    color: var(--cor-texto-suave);
    font-size: 0.8rem;
}

.filtro-pill select:focus,
.filtro-pill input:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(var(--cor-primaria-rgb), 0.12);
}

/* Cabeçalho do funil de vendas: pill do funil mais estreita (não precisa dos
   220px padrão, o nome do funil é curto), toggle de vista reduzido, e as
   ações secundárias (exportar/classificar/descartadas) viram um cluster de
   ícones com tooltip, separado dos controles principais por uma linha —
   evita o topo virar uma fileira de botões grandes e grudados. */
.topbar__esquerda .filtro-pill select {
    width: auto;
    min-width: 130px;
    max-width: 180px;
}

.topbar__esquerda .periodo-opcao {
    padding: 0.32rem 0.6rem;
}

.topbar__esquerda .periodo-opcao .icone {
    width: 16px;
    height: 16px;
}

.topbar__acoes {
    display: flex;
    align-items: center;
    gap: 0.15rem;
    padding-left: 0.6rem;
    border-left: 1px solid var(--cor-borda);
}

/* Dropdown de seleção múltipla (ex.: vendedores) */

.filtro-suspenso {
    position: relative;
}

.filtro-suspenso__botao {
    font: inherit;
    color: var(--cor-texto);
}

.filtro-suspenso__contagem {
    background-color: rgba(var(--cor-primaria-rgb), 0.1);
    color: var(--cor-primaria);
    border-radius: 999px;
    padding: 0.15rem 0.6rem;
    font-size: 0.76rem;
    font-weight: 700;
}

.filtro-suspenso__painel {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    z-index: 20;
    min-width: 240px;
    background-color: var(--cor-superficie);
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio-pequeno);
    box-shadow: var(--sombra);
    padding: 0.6rem;
}

.filtro-suspenso__painel--direita {
    left: auto;
    right: 0;
    min-width: 210px;
}

.filtro-suspenso__acoes {
    display: flex;
    gap: 0.9rem;
    padding-bottom: 0.5rem;
    margin-bottom: 0.4rem;
    border-bottom: 1px solid var(--cor-borda);
}

.filtro-suspenso__lista {
    display: flex;
    flex-direction: column;
    max-height: 220px;
    overflow-y: auto;
}

.filtro-suspenso__opcao {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.4rem 0.5rem;
    border-radius: var(--raio-pequeno);
    font-size: 0.85rem;
    cursor: pointer;
}

.filtro-suspenso__opcao:hover {
    background-color: var(--cor-fundo);
}

.filtro-suspenso__opcao input {
    cursor: pointer;
}

#config-colunas-metas .filtro-suspenso__painel--direita {
    min-width: 300px;
}

/* Árvore de período (ano > trimestre > mês) do filtro de data dos dashboards */

.arvore-periodo {
    position: relative;
}

.arvore-periodo__botao {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    width: 180px;
    cursor: pointer;
    text-align: left;
}

.arvore-periodo__seta {
    color: var(--cor-texto-suave);
    font-size: 0.7rem;
    flex-shrink: 0;
}

.arvore-periodo__painel {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    z-index: 20;
    width: 260px;
    background-color: var(--cor-superficie);
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio-pequeno);
    box-shadow: var(--sombra);
    padding: 0.6rem;
}

.arvore-periodo__acoes {
    display: flex;
    justify-content: flex-end;
    padding-bottom: 0.4rem;
    margin-bottom: 0.4rem;
    border-bottom: 1px solid var(--cor-borda);
}

.arvore-periodo__lista {
    max-height: 280px;
    overflow-y: auto;
}

.arvore-periodo__no {
    font-size: 0.85rem;
}

.arvore-periodo__linha {
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

.arvore-periodo__expandir {
    border: none;
    background: transparent;
    color: var(--cor-texto-suave);
    cursor: pointer;
    width: 1.1rem;
    flex-shrink: 0;
    font-size: 0.7rem;
    padding: 0.2rem 0;
}

.arvore-periodo__item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.3rem 0.3rem;
    border-radius: var(--raio-pequeno);
    cursor: pointer;
    flex: 1;
}

.arvore-periodo__item:hover {
    background-color: var(--cor-fundo);
}

.arvore-periodo__item input {
    cursor: pointer;
}

.arvore-periodo__item--ano {
    font-weight: 600;
}

.arvore-periodo__filhos {
    margin-left: 1.4rem;
    padding-left: 0.4rem;
    border-left: 1px dashed var(--cor-borda);
}

.arvore-periodo__item--mes {
    font-size: 0.8rem;
}

/* Dropdown de seleção múltipla plana (Categoria/Unidade/Franquia/Vendedor dos
   dashboards) — mesmo padrão visual da árvore de período, sem hierarquia. */

.filtro-multiplo {
    position: relative;
}

.filtro-multiplo__botao {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    width: 180px;
    cursor: pointer;
    text-align: left;
}

.filtro-multiplo__seta {
    color: var(--cor-texto-suave);
    font-size: 0.7rem;
    flex-shrink: 0;
}

.filtro-multiplo__painel {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    z-index: 20;
    width: 240px;
    background-color: var(--cor-superficie);
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio-pequeno);
    box-shadow: var(--sombra);
    padding: 0.6rem;
}

/* Variante usada como campo de formulário de verdade (ex: Segmentos do
   cliente) em vez da barra compacta de filtro dos dashboards — botão e
   painel acompanham a largura do campo em vez de um tamanho fixo. */
.filtro-multiplo--campo .filtro-multiplo__botao {
    width: 100%;
}

.filtro-multiplo--campo .filtro-multiplo__painel {
    width: 100%;
}

/* Chips dos itens marcados (ex: Segmentos do cliente) — cada um com um "×"
   pra desmarcar sem precisar abrir o painel de novo. Fica vazio (sem altura
   extra) quando não há nada selecionado. */
.filtro-multiplo__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.filtro-multiplo__chips:not(:empty) {
    margin-top: 0.5rem;
}

.filtro-multiplo__chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.3rem 0.4rem 0.3rem 0.7rem;
    background-color: var(--cor-fundo-suave);
    border: 1px solid var(--cor-borda);
    border-radius: 999px;
    font-size: 0.8rem;
    color: var(--cor-texto);
}

.filtro-multiplo__chip-remover {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border: none;
    border-radius: 50%;
    background: none;
    color: var(--cor-texto-suave);
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
    padding: 0;
}

.filtro-multiplo__chip-remover:hover {
    background-color: var(--cor-borda);
    color: var(--cor-texto);
}

.filtro-multiplo__busca {
    width: 100%;
    margin-bottom: 0.5rem;
    font-size: 0.85rem;
    padding: 0.4rem 0.6rem;
}

.filtro-multiplo__acoes {
    display: flex;
    justify-content: flex-end;
    padding-bottom: 0.4rem;
    margin-bottom: 0.4rem;
    border-bottom: 1px solid var(--cor-borda);
}

.filtro-multiplo__lista {
    max-height: 240px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

.filtro-multiplo__vazio {
    padding: 0.5rem 0.3rem;
    font-size: 0.85rem;
}

.filtro-multiplo__item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0.3rem;
    border-radius: var(--raio-pequeno);
    cursor: pointer;
    font-size: 0.85rem;
}

.filtro-multiplo__item:hover {
    background-color: var(--cor-fundo);
}

.filtro-multiplo__item input {
    cursor: pointer;
}

/* Precisa vir depois de .filtro-multiplo__item (que define display:flex) pra
   ganhar no empate de especificidade e realmente esconder o item filtrado. */
.filtro-multiplo__item--oculto {
    display: none;
}

/* Select buscável (Cliente/Contato/Vendedor/Franquia do formulário de
   oportunidade) — mesmo padrão visual do filtro-multiplo, mas de seleção
   única: o <select> nativo continua no DOM (é ele que vai no submit do
   form), só fica escondido atrás do botão/painel. */

.select-buscavel {
    position: relative;
}

.select-buscavel select {
    display: none;
}

.select-buscavel__botao {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    width: 100%;
    cursor: pointer;
    text-align: left;
}

.select-buscavel__seta {
    color: var(--cor-texto-suave);
    font-size: 0.7rem;
    flex-shrink: 0;
}

.select-buscavel__painel {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    z-index: 20;
    background-color: var(--cor-superficie);
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio-pequeno);
    box-shadow: var(--sombra);
    padding: 0.6rem;
}

.select-buscavel__busca {
    width: 100%;
    margin-bottom: 0.5rem;
    font-size: 0.85rem;
    padding: 0.4rem 0.6rem;
}

.select-buscavel__lista {
    max-height: 240px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

.select-buscavel__vazio {
    padding: 0.5rem 0.3rem;
    font-size: 0.85rem;
}

.select-buscavel__item {
    padding: 0.35rem 0.5rem;
    border-radius: var(--raio-pequeno);
    cursor: pointer;
    font-size: 0.85rem;
}

.select-buscavel__item:hover {
    background-color: var(--cor-fundo);
}

.select-buscavel__item--selecionado {
    background-color: rgba(var(--cor-primaria-rgb), 0.1);
    color: var(--cor-primaria);
    font-weight: 600;
}

/* Precisa vir depois de .select-buscavel__item (que define padding/display
   normal) pra ganhar no empate de especificidade e esconder o item filtrado. */
.select-buscavel__item--oculto {
    display: none;
}

#lista-colunas-metas {
    max-height: 260px;
    overflow-y: auto;
    padding-right: 0.2rem;
}

#lista-colunas-metas .lista-reordenavel__nome {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    font-weight: normal;
    cursor: pointer;
}

/* ---------- Tabela ---------- */

.tabela-scroll {
    overflow-x: auto;
    cursor: grab;
}

.tabela-scroll--arrastando {
    cursor: grabbing;
    user-select: none;
}

.tabela-scroll .tabela {
    width: max-content;
    min-width: 100%;
}

.tabela-scroll .tabela th,
.tabela-scroll .tabela td {
    white-space: nowrap;
}

.tabela {
    width: 100%;
    border-collapse: collapse;
}

.tabela th {
    text-align: left;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--cor-texto-suave);
    background-color: var(--cor-fundo-suave);
    padding: 0.85rem 1.1rem;
    border-bottom: 1px solid var(--cor-borda);
}

.tabela td {
    padding: 0.8rem 1.1rem;
    border-bottom: 1px solid var(--cor-borda);
    font-size: 0.92rem;
}

.tabela tbody tr:last-child td {
    border-bottom: none;
}

.tabela-detalhe__link-titulo {
    font-size: 0.85rem;
}

.tabela tbody tr:hover {
    background-color: var(--cor-fundo-suave);
}

.tabela tbody tr.linha-desmarcada {
    opacity: 0.45;
}

.tabela__nome-clicavel {
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    color: inherit;
    text-align: left;
    cursor: pointer;
}

.tabela__nome-clicavel:hover {
    color: var(--cor-primaria);
    text-decoration: underline;
}

.tabela .coluna-acoes {
    text-align: right;
    white-space: nowrap;
}

.tabela-scroll .tabela th.coluna-acoes,
.tabela-scroll .tabela td.coluna-acoes {
    position: sticky;
    right: 0;
    z-index: 1;
}

.tabela-scroll .tabela th.coluna-acoes {
    background-color: var(--cor-fundo-suave);
}

.tabela-scroll .tabela td.coluna-acoes {
    background-color: var(--cor-superficie);
    box-shadow: -6px 0 6px -6px rgba(0, 0, 0, 0.2);
}

.tabela-scroll .tabela tbody tr:hover td.coluna-acoes {
    background-color: var(--cor-fundo-suave);
}

.paginacao {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    margin-top: 1.25rem;
    flex-wrap: wrap;
}

.paginacao__paginas {
    display: flex;
    align-items: center;
    gap: 0.15rem;
}

.paginacao__pagina {
    min-width: 2rem;
    padding: 0.35rem 0.5rem;
    text-align: center;
    border-radius: var(--raio-pequeno);
    font-size: 0.85rem;
    color: var(--cor-texto);
    border: none;
    background: none;
    font-family: inherit;
    cursor: pointer;
}

.paginacao__pagina:hover {
    background-color: var(--cor-fundo-suave);
}

.paginacao__pagina.is-ativa {
    background-color: var(--cor-primaria);
    color: #fff;
    font-weight: 700;
}

.paginacao__reticencias {
    padding: 0 0.25rem;
    color: var(--cor-texto-suave);
}

.tabela th[data-ordenar] {
    cursor: pointer;
    user-select: none;
}

.tabela th[data-ordenar]:hover {
    color: var(--cor-texto);
}

.tabela th[data-ordenar]::after {
    content: "";
    display: inline-block;
    width: 0.7em;
}

.tabela th[data-ordenar].tabela__th--asc::after {
    content: "▲";
    font-size: 0.65em;
    margin-left: 0.3em;
}

.tabela th[data-ordenar].tabela__th--desc::after {
    content: "▼";
    font-size: 0.65em;
    margin-left: 0.3em;
}

/* ---------- Grupos de itens da oportunidade (Software/Serviço x recorrência) ---------- */

.grupo-itens {
    border-bottom: 1px solid var(--cor-borda);
}

.grupo-itens:last-child {
    border-bottom: none;
}

.grupo-itens__cabecalho {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    cursor: pointer;
    list-style: none;
}

.grupo-itens__cabecalho::-webkit-details-marker {
    display: none;
}

.grupo-itens__cabecalho:hover {
    background-color: var(--cor-fundo-suave);
}

.grupo-itens__titulo {
    font-weight: 600;
}

.grupo-itens__resumo {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.grupo-itens__resumo .badge {
    min-width: 4.25rem;
    justify-content: center;
}

.grupo-itens__resumo strong {
    min-width: 7.5rem;
    text-align: right;
}

/* ---------- Badges ---------- */

.badge {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.65rem;
    border-radius: 999px;
    font-size: 0.76rem;
    font-weight: 600;
}

.badge--neutro {
    background-color: var(--cor-fundo-suave);
    color: var(--cor-texto-suave);
}

.badge--sucesso {
    background-color: var(--cor-sucesso-fundo);
    color: var(--cor-sucesso);
}

.badge--perigo {
    background-color: var(--cor-perigo-fundo);
    color: var(--cor-perigo);
}

.badge--atencao {
    background-color: var(--cor-atencao-fundo);
    color: var(--cor-atencao);
}

.badge--info {
    background-color: var(--cor-info-fundo);
    color: var(--cor-info);
}

.badge--acento {
    background-color: rgba(15, 155, 142, 0.12);
    color: var(--cor-acento);
}

/* ---------- Avisos (callouts) ---------- */

.aviso {
    display: flex;
    gap: 0.65rem;
    align-items: flex-start;
    padding: 0.85rem 1rem;
    border-radius: var(--raio-pequeno);
    font-size: 0.88rem;
    line-height: 1.5;
    margin-bottom: 1.1rem;
}

.aviso .icone {
    flex-shrink: 0;
    margin-top: 0.1rem;
}

.aviso--perigo {
    background-color: var(--cor-perigo-fundo);
    color: var(--cor-perigo);
}

.aviso--info {
    background-color: var(--cor-info-fundo);
    color: var(--cor-info);
}

.aviso p {
    margin: 0;
}

.aviso p + p {
    margin-top: 0.5rem;
}

/* ---------- Comissão (Prospecção) ---------- */

.chips-faixas {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 0.6rem;
}

.estado-vazio {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 2.5rem 1rem;
    text-align: center;
    color: var(--cor-texto-suave);
}

.estado-vazio .icone {
    width: 32px;
    height: 32px;
    opacity: 0.5;
}

.grade-2-colunas {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 1rem;
}

.grade-2-colunas .campo {
    margin-bottom: 1.1rem;
}

/* Wrapper pra um campo (ou grupo de campos, ex: select + link de atalho
   embaixo) ocupar as duas colunas — título da oportunidade, cliente com o
   atalho de "Cadastrar novo cliente" embaixo, etc. */
.grade-2-colunas .campo-largura-total {
    grid-column: 1 / -1;
}

@media (max-width: 560px) {
    .grade-2-colunas {
        grid-template-columns: 1fr;
    }
}

code {
    background-color: var(--cor-fundo-suave);
    padding: 0.15rem 0.4rem;
    border-radius: 4px;
    font-size: 0.85em;
    font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
}

/* ---------- Listas simples ---------- */

.lista-links {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 1rem;
}

.lista-links a {
    color: var(--cor-primaria);
    font-weight: 600;
    text-decoration: none;
}

/* ---------- Mensagens flash (notificações toast) ---------- */

.flash-messages {
    list-style: none;
    position: fixed;
    top: 1.25rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 300;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    width: 100%;
    max-width: 420px;
    padding: 0 1rem;
    pointer-events: none;
}

.flash {
    pointer-events: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border-radius: var(--raio-pequeno);
    font-size: 0.9rem;
    box-shadow: var(--sombra);
    animation: flash-entrada 0.2s ease;
}

.flash--saindo {
    animation: flash-saida 0.2s ease forwards;
}

@keyframes flash-entrada {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes flash-saida {
    from {
        opacity: 1;
        transform: translateY(0);
    }
    to {
        opacity: 0;
        transform: translateY(-10px);
    }
}

.flash__fechar {
    flex-shrink: 0;
    background: none;
    border: none;
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
    color: inherit;
    opacity: 0.7;
    padding: 0;
}

.flash__fechar:hover {
    opacity: 1;
}

.flash--error {
    background-color: var(--cor-perigo-fundo);
    color: var(--cor-perigo);
}

.flash--success {
    background-color: var(--cor-sucesso-fundo);
    color: var(--cor-sucesso);
}

.flash--info {
    background-color: var(--cor-info-fundo);
    color: var(--cor-info);
}

/* ---------- Dashboards ---------- */

.filtros-dashboard {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    align-items: flex-end;
    padding: 0.85rem 1rem;
    margin-bottom: 1.5rem;
    /* .cartao aplica overflow:hidden pra arredondar cantos, mas isso corta o
       painel suspenso da árvore de período — que precisa vazar pra fora do
       card pra aparecer por cima do resto do dashboard. */
    overflow: visible;
}

.filtros-dashboard .campo {
    margin-bottom: 0;
    min-width: 110px;
}

.filtros-dashboard .campo label {
    font-size: 0.7rem;
}

.filtros-dashboard .input {
    font-size: 0.8rem;
    padding: 0.45rem 0.55rem;
}

.filtros-dashboard .botao {
    font-size: 0.8rem;
    padding: 0.5rem 0.9rem;
}

/* Variante mais enxuta do filtros-dashboard — mesma ideia (um único cartão
   com todos os campos), só que menor: campos com largura fixa e reduzida,
   pra caber ao lado de um botão de ação na mesma linha sem tomar a tela
   toda (ex: listagem de Prospecção). */
.filtros-dashboard--compacta {
    padding: 0.5rem 0.65rem;
    gap: 0.5rem;
}

.filtros-dashboard--compacta .campo {
    min-width: 0;
}

.filtros-dashboard--compacta .campo label {
    font-size: 0.66rem;
}

.filtros-dashboard--compacta select.input,
.filtros-dashboard--compacta input.input {
    width: 130px;
    font-size: 0.78rem;
    padding: 0.35rem 0.5rem;
}

.filtros-dashboard--compacta select.input:not([multiple]) {
    padding-right: 1.6rem;
    background-position: right 0.5rem center;
}

.filtros-dashboard--compacta .botao {
    font-size: 0.78rem;
    padding: 0.4rem 0.7rem;
}

/* Ação secundária colada num campo logo acima (ex: "Cadastrar novo cliente"
   abaixo do select de Cliente) — puxa pra cima pra ficar perto do campo a
   que se refere, em vez do espaçamento padrão entre campos. */
.campo--acao-inline {
    margin-top: -0.75rem;
    margin-bottom: 1rem;
}

.link-acao {
    background: none;
    border: none;
    padding: 0;
    font-size: 0.76rem;
    font-weight: 600;
    color: var(--cor-primaria);
    cursor: pointer;
    text-decoration: underline;
}

.link-acao:hover {
    color: var(--cor-primaria-hover);
}

.grade-kpis {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.kpi {
    padding: 1.1rem 1.25rem;
    display: flex;
    flex-direction: column;
    cursor: help;
    gap: 0.4rem;
}

/* Só os cards com detalhamento clicável (`data-kpi-id`, ver dashboards_comum.js)
   ganham o afordance de clique — os cards de KPI sem esse atributo (ex: o
   "Meta do time"/"Realizado do time" da aba de Vendedores & Metas) continuam
   só com o tooltip nativo do `title`. */
.kpi[data-kpi-id] {
    cursor: pointer;
    transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.kpi[data-kpi-id]:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.12);
}

.kpi-detalhe__colunas {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem;
}

.kpi-detalhe__colunas h4 {
    margin-bottom: 0.5rem;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--cor-texto-suave);
}

@media (max-width: 720px) {
    .kpi-detalhe__colunas {
        grid-template-columns: 1fr;
    }
}

.kpi__rotulo {
    font-size: 0.75rem;
    color: var(--cor-texto-suave);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.kpi__valor {
    font-size: 1.35rem;
    font-weight: 700;
}

.kpi__valor.risco-alto {
    color: var(--cor-perigo);
}

.kpi__valor.atencao {
    color: var(--cor-atencao);
}

.kpi__valor.saudavel {
    color: var(--cor-sucesso);
}

.kpi__detalhe {
    font-size: 0.8rem;
    color: var(--cor-texto-suave);
}

.celula-classificada {
    font-weight: 700;
}

.linha-total td {
    font-weight: 700;
    background-color: var(--cor-fundo-suave);
    border-top: 2px solid var(--cor-borda);
}

.celula-classificada.risco-alto {
    color: var(--cor-perigo);
}

.celula-classificada.atencao {
    color: var(--cor-atencao);
}

.celula-classificada.saudavel {
    color: var(--cor-sucesso);
}

.secao-filtrada {
    background-color: var(--cor-superficie);
    border-radius: var(--raio);
    box-shadow: var(--sombra);
    padding: 1.25rem;
    margin-bottom: 1.5rem;
}

.secao-filtrada .kpi,
.secao-filtrada .grafico-cartao {
    background-color: var(--cor-fundo-suave);
    box-shadow: none;
}

.secao-filtrada .filtros-dashboard {
    background-color: var(--cor-fundo-suave);
    box-shadow: none;
}

.rotulo-filtro-proprio {
    font-size: 0.72rem;
    font-weight: 500;
    color: var(--cor-texto-suave);
}

.evolucao-faturamento {
    padding: 1.25rem;
    margin-bottom: 1.5rem;
}

.evolucao-faturamento__cabecalho {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.evolucao-faturamento__cabecalho h2 {
    font-size: 1.05rem;
}

.evolucao-faturamento__canvas {
    position: relative;
    height: 380px;
}

.grade-graficos__cabecalho {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 0.5rem;
}

.grade-graficos__cabecalho--meta {
    /* Só tem o botão de configurar colunas aqui dentro — com
       justify-content:space-between um filho só cola na ponta esquerda,
       ficando colado na borda do conteúdo e abrindo o painel suspenso
       (que se estende pra esquerda do botão) por baixo do menu lateral. */
    justify-content: flex-end;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.grade-graficos__cabecalho--meta .tipo-receita-seletor {
    margin-top: 0;
}

.grade-graficos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 1.25rem;
    margin-bottom: 1.5rem;
}

.grade-graficos--1-coluna {
    /* `minmax(0, 1fr)`, não `1fr` puro: uma coluna `1fr` sozinha tem mínimo
       implícito "auto" (baseado no conteúdo) — uma tabela larga inserida
       dentro da grade (o painel de detalhamento, ao clicar num gráfico)
       "estoura" essa coluna pro tamanho do conteúdo, arrastando o card do
       gráfico junto (mesma coluna). Com mínimo 0, o conteúdo largo rola por
       dentro (`.tabela-scroll`) em vez de alargar a grade inteira. */
    grid-template-columns: minmax(0, 1fr);
}

.grade-graficos--2-colunas {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.grafico-cartao--largura-total {
    grid-column: 1 / -1;
}

/* ---------- Detalhamento inline de gráfico (clique → oportunidades) ---------- */

.grafico-detalhe {
    background-color: var(--cor-superficie);
    border-radius: var(--raio);
    box-shadow: var(--sombra);
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    /* Quando nasce dentro de uma `.grade-graficos` (irmão de um cartão da mesma
       linha), precisa ocupar as colunas todas para não virar uma célula estreita
       do grid — quando nasce fora do grid (fallback sem `.grade-graficos`), esta
       regra não tem efeito nenhum. */
    grid-column: 1 / -1;
}

.grafico-detalhe__cabecalho {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1.1rem;
}

.grafico-detalhe__resumo {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.grafico-detalhe__titulo {
    font-size: 1.05rem;
    font-weight: 600;
}

.grafico-detalhe__acoes {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.grafico-detalhe__total {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--cor-primaria);
}

@media (max-width: 960px) {
    .grade-graficos--2-colunas {
        grid-template-columns: 1fr;
    }
}

.grafico-cartao {
    padding: 1.25rem;
}

.grafico-cartao[draggable="true"] {
    cursor: grab;
}

.grafico-cartao--arrastando {
    opacity: 0.4;
}

.grafico-cartao--alvo {
    outline: 2px dashed var(--cor-primaria);
    outline-offset: -2px;
}

.grafico-cartao h3 {
    font-size: 0.92rem;
    margin-bottom: 0.85rem;
    color: var(--cor-texto-suave);
    font-weight: 600;
}

.grafico-cartao__cabecalho {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.85rem;
}

.grafico-cartao__cabecalho h3 {
    margin-bottom: 0;
}

.grafico-cartao__titulo {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.grafico-cartao__titulo h3,
.grafico-cartao__titulo h2 {
    margin-bottom: 0;
}

.grafico-cartao > .grafico-cartao__titulo {
    justify-content: space-between;
    margin-bottom: 0.85rem;
}

.grafico-cartao__titulo .botao--icone {
    padding: 0.3rem;
    flex-shrink: 0;
}

.grafico-cartao__titulo .botao--icone .icone {
    width: 16px;
    height: 16px;
}

.grafico-cartao__acoes {
    display: flex;
    align-items: center;
    gap: 0.2rem;
    flex-shrink: 0;
}

.grafico-cartao__cabecalho .periodo-seletor {
    padding: 0.15rem;
}

.grafico-cartao__cabecalho .periodo-opcao {
    padding: 0.3rem 0.6rem;
    font-size: 0.74rem;
}

.grafico-cartao__canvas {
    position: relative;
    height: 330px;
}

.lista-atingimento {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    height: 330px;
    overflow-y: auto;
    padding-right: 0.4rem;
}

.lista-atingimento__vazio {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

.atingimento-linha {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    flex-shrink: 0;
    cursor: pointer;
    padding: 0.3rem;
    margin: -0.3rem;
    border-radius: 6px;
}

.atingimento-linha:hover {
    background-color: var(--cor-fundo-suave);
}

.atingimento-linha__cabecalho {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.5rem;
    font-size: 0.82rem;
}

.atingimento-linha__nome {
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.atingimento-linha__percentual {
    font-weight: 700;
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
}

.atingimento-linha__trilha {
    position: relative;
    height: 8px;
    border-radius: 999px;
    background-color: var(--cor-borda);
    overflow: hidden;
}

.atingimento-linha__barra {
    position: absolute;
    inset: 0;
    width: 0%;
    border-radius: 999px;
    background-color: var(--cor-sucesso);
    transition: width 0.4s ease;
}

.atingimento-linha__barra.atencao {
    background-color: var(--cor-atencao);
}

.atingimento-linha__barra.risco-alto {
    background-color: var(--cor-perigo);
}

.atingimento-linha__detalhe {
    font-size: 0.72rem;
    color: var(--cor-texto-suave);
}

/* Variante sem scroll interno nem afordance de clique, pra listas curtas e
   só de leitura (ex: resumo do cliente) — a versão base é pensada pra
   listas longas e clicáveis dos dashboards. */
.lista-atingimento--estatica {
    height: auto;
    overflow: visible;
    padding-right: 0;
}

.atingimento-linha--estatica {
    cursor: default;
    margin: 0;
    padding: 0;
}

.atingimento-linha--estatica:hover {
    background-color: transparent;
}

.funil-piramide {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 330px;
    padding: 0.5rem 0;
}

.funil-piramide__linha {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
    cursor: pointer;
    border-radius: 6px;
}

.funil-piramide__linha:hover {
    background-color: var(--cor-fundo-suave);
}

.funil-piramide--somente-leitura .funil-piramide__linha {
    cursor: default;
}

.funil-piramide--somente-leitura .funil-piramide__linha:hover {
    background-color: transparent;
}

.funil-piramide__barra {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 32px;
    border-radius: 4px;
    clip-path: polygon(6% 0, 94% 0, 100% 100%, 0% 100%);
    background: linear-gradient(90deg, color-mix(in srgb, var(--cor-barra) 68%, white), var(--cor-barra));
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
    transition: width 0.3s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.funil-piramide__linha:hover .funil-piramide__barra {
    box-shadow: 0 4px 10px color-mix(in srgb, var(--cor-barra) 45%, transparent);
    transform: translateY(-1px);
}

.funil-piramide__quantidade {
    color: #fff;
    font-weight: 700;
    font-size: 0.85rem;
}

.funil-piramide__rotulo {
    font-size: 0.78rem;
    color: var(--cor-texto);
    text-align: center;
}

.comparativo-periodos {
    padding: 1.25rem;
    margin-bottom: 1.5rem;
}

.comparativo-periodos__cabecalho {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 1.1rem;
}

.comparativo-periodos__cabecalho h2 {
    font-size: 1.05rem;
}

.comparativo-periodos__controles {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.periodo-seletor {
    display: inline-flex;
    background-color: var(--cor-fundo-suave);
    border-radius: 999px;
    padding: 0.2rem;
    gap: 0.15rem;
}

.periodo-opcao {
    border: none;
    background: transparent;
    padding: 0.4rem 0.9rem;
    border-radius: 999px;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--cor-texto-suave);
    cursor: pointer;
}

.periodo-opcao.is-ativo {
    background-color: var(--cor-primaria);
    color: #fff;
}

.tipo-receita-seletor {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 1.25rem;
}

.tipo-receita-seletor .periodo-opcao {
    background-color: var(--cor-fundo-suave);
    border: 1px solid var(--cor-borda);
}

.tipo-receita-seletor .periodo-opcao.is-ativo {
    background-color: var(--cor-primaria);
    border-color: var(--cor-primaria);
    color: #fff;
}


.grade-comparativo {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
}

@media (max-width: 960px) {
    .grade-comparativo {
        grid-template-columns: 1fr;
    }
}

.cartao-comparativo {
    background-color: var(--cor-fundo-suave);
    border-radius: var(--raio-pequeno);
    padding: 1.25rem;
}

.cartao-comparativo h3 {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 0.3rem;
}

.cartao-comparativo__cabecalho {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.3rem;
}

.cartao-comparativo__cabecalho h3 {
    margin-bottom: 0;
}

.cartao-comparativo__cabecalho .botao--icone {
    padding: 0.2rem;
    flex-shrink: 0;
}

.cartao-comparativo__cabecalho .botao--icone .icone {
    width: 14px;
    height: 14px;
}

.cartao-comparativo--novos h3 span,
.cartao-comparativo--novos .cartao-comparativo__valor {
    color: var(--cor-info);
}

.cartao-comparativo--ganhos h3 span,
.cartao-comparativo--ganhos .cartao-comparativo__valor {
    color: var(--cor-sucesso);
}

.cartao-comparativo--perdidos h3 span,
.cartao-comparativo--perdidos .cartao-comparativo__valor {
    color: var(--cor-perigo);
}

.cartao-comparativo__periodo {
    font-size: 0.78rem;
    color: var(--cor-texto-suave);
    margin-bottom: 0.35rem;
}

.cartao-comparativo__valor {
    font-size: 1.7rem;
    font-weight: 700;
}

.cartao-comparativo__variacao {
    font-size: 0.85rem;
    font-weight: 700;
    margin-top: 0.2rem;
}

.cartao-comparativo__ticket {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.82rem;
    color: var(--cor-texto-suave);
    margin: 0.5rem 0 1rem;
}

.variacao-positiva {
    color: var(--cor-sucesso);
}

.variacao-negativa {
    color: var(--cor-perigo);
}

.cartao-comparativo__grafico {
    position: relative;
    height: 230px;
}

.abas {
    display: flex;
    gap: 0.25rem;
    border-bottom: 1px solid var(--cor-borda);
    margin-bottom: 1.5rem;
}

.aba {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.7rem 1.1rem;
    border: none;
    background: none;
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--cor-texto-suave);
    cursor: pointer;
    text-decoration: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
}

.aba:hover {
    color: var(--cor-primaria);
}

.aba.is-ativa {
    color: var(--cor-primaria);
    border-bottom-color: var(--cor-primaria);
}

.painel-aba[hidden] {
    display: none;
}

.secao-abas--formulario {
    max-width: 760px;
    margin: 0 auto;
}

.secao-abas--formulario .cartao {
    margin-bottom: 1rem;
}

/* ---------- Funil de vendas (kanban) ---------- */

.funil {
    display: flex;
    gap: 0;
    overflow-x: auto;
    padding-bottom: 1rem;
    align-items: stretch;
    flex: 1;
    min-height: 0;
    position: relative;
}

.funil[hidden] {
    display: none;
}

.funil__tabela-wrapper {
    flex: 1;
    min-height: 0;
    overflow: auto;
}

.funil__tabela-wrapper[hidden] {
    display: none;
}

.funil__coluna {
    background-color: var(--cor-fundo-suave);
    border-radius: var(--raio);
    min-width: 280px;
    max-width: 280px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    border-top: 3px solid transparent;
}

.funil__coluna--ganho {
    background-color: var(--cor-sucesso-fundo);
    border-top-color: var(--cor-sucesso);
}

.funil__coluna--ganho .funil__coluna-total {
    color: var(--cor-sucesso);
}

.funil__coluna--perdido {
    background-color: var(--cor-perigo-fundo);
    border-top-color: var(--cor-perigo);
}

.funil__coluna--perdido .funil__coluna-total {
    color: var(--cor-perigo);
}

.funil__coluna--carencia {
    background-color: var(--cor-atencao-fundo);
    border-top-color: var(--cor-atencao);
}

.funil__coluna--carencia .funil__coluna-total {
    color: var(--cor-atencao);
}

.funil__coluna-cabecalho {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.9rem 1rem 0.3rem;
    font-size: 0.92rem;
}

.funil__coluna-titulo {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.funil__coluna-cabecalho .botao--icone {
    padding: 0.25rem;
}

.funil__coluna-cabecalho .botao--icone .icone {
    width: 16px;
    height: 16px;
}

/* Botão de nova oportunidade, só na coluna inicial do funil — destacado dos
   demais ícones do cabeçalho (que são neutros/transparentes) pra chamar mais
   atenção como o principal ponto de entrada pra criar uma oportunidade. */
.funil__coluna-cabecalho .funil__botao-novo {
    background-color: var(--cor-acento);
    color: #fff;
    padding: 0.35rem;
    border-radius: 999px;
    box-shadow: 0 2px 6px rgba(var(--cor-primaria-rgb), 0.3);
    transition: transform 0.15s ease, filter 0.15s ease;
}

.funil__coluna-cabecalho .funil__botao-novo:hover {
    background-color: var(--cor-acento);
    filter: brightness(1.12);
    color: #fff;
    transform: scale(1.1);
}

.funil__coluna-cabecalho .funil__botao-novo .icone {
    width: 18px;
    height: 18px;
}

.funil__coluna-contagem {
    background-color: rgba(var(--cor-primaria-rgb), 0.1);
    color: var(--cor-primaria);
    border-radius: 999px;
    padding: 0.1rem 0.55rem;
    font-size: 0.76rem;
    font-weight: 700;
}

.funil__coluna-total-linha {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.4rem;
    padding: 0 1rem 0.75rem;
}

.funil__coluna-total {
    padding: 0;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--cor-acento);
}

.funil__coluna-detalhar {
    padding: 0.15rem;
    color: var(--cor-texto-suave);
    flex-shrink: 0;
}

.funil__coluna-detalhar:hover {
    color: var(--cor-acento);
}

.funil__coluna-detalhar .icone {
    width: 14px;
    height: 14px;
}

.funil__lista {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    padding: 0 0.75rem 0.75rem;
    overflow-y: auto;
    flex: 1;
    min-height: 80px;
    border-radius: 0 0 var(--raio) var(--raio);
    transition: background-color 0.15s ease;
}

.funil__lista--sobre {
    background-color: rgba(var(--cor-primaria-rgb), 0.1);
}

.funil__card {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    background-color: var(--cor-superficie);
    border-radius: var(--raio-pequeno);
    padding: 0.75rem 0.85rem;
    box-shadow: var(--sombra);
    text-decoration: none;
    color: var(--cor-texto);
    cursor: grab;
}

.funil__card:active {
    cursor: grabbing;
}

.funil__card--arrastando {
    opacity: 0.4;
}

/* Card/linha da oportunidade aberta no painel lateral (ver oportunidade_modal.js) */
.funil__card--selecionado {
    outline: 2px solid var(--cor-primaria);
    outline-offset: -2px;
}

.funil__linha--selecionada {
    background-color: rgba(var(--cor-primaria-rgb), 0.08);
}

/* Oportunidade em aberto (nem Ganha, nem Perdida) com a data de fechamento
   prevista já vencida — ver `Oportunidade.esta_atrasada`. */
.funil__card--atrasada {
    border-left: 3px solid var(--cor-perigo);
}

.funil__linha--atrasada {
    border-left: 3px solid var(--cor-perigo);
}

.funil__card-atrasada-texto {
    color: var(--cor-perigo);
    font-weight: 700;
}

.funil__card strong {
    font-size: 0.9rem;
}

.funil__card-cabecalho {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.4rem;
}

.funil__card-rodape {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 0.4rem;
}

.funil__card-icone-acao {
    flex-shrink: 0;
    background: none;
    border: none;
    padding: 0.1rem;
    margin: -0.1rem -0.15rem 0 0;
    color: var(--cor-texto-suave);
    cursor: pointer;
    border-radius: var(--raio-pequeno);
}

.funil__card-icone-acao .icone {
    width: 16px;
    height: 16px;
}

.funil__card-icone-acao:hover {
    background-color: var(--cor-fundo);
    color: var(--cor-primaria);
}

.funil__card-excluir:hover {
    color: var(--cor-perigo);
}

.funil__card-meta {
    font-size: 0.72rem;
    color: var(--cor-texto-suave);
}

.funil__card-cliente {
    font-size: 0.78rem;
    color: var(--cor-texto-suave);
}

.funil__card-valor {
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--cor-primaria);
}

.funil__card-vendedor {
    font-size: 0.74rem;
    color: var(--cor-texto-suave);
}

/* ---------- Linha do tempo (aba Histórico da oportunidade) ---------- */

/* A lista rola dentro da própria altura fixa (não da altura do modal
   inteiro) — assim o campo de comentário logo abaixo dela nunca é
   "empurrado" pra fora da tela nem depende de position:sticky (que exige
   uma cadeia de ancestrais sem overflow/altura conflitante, frágil demais
   aqui dentro do painel lateral). */
.linha-tempo {
    display: flex;
    flex-direction: column;
    max-height: 42vh;
    overflow-y: auto;
    margin-bottom: 0.75rem;
    padding-right: 0.25rem;
}

.linha-tempo-comentario {
    flex-shrink: 0;
    padding: 1rem;
}

.linha-tempo-comentario textarea {
    min-height: 2.2rem;
}

.linha-tempo__item {
    display: flex;
    gap: 0.75rem;
    position: relative;
    padding-bottom: 1.25rem;
}

.linha-tempo__item:not(:last-child)::before {
    content: "";
    position: absolute;
    left: 5px;
    top: 16px;
    bottom: 0;
    width: 2px;
    background-color: var(--cor-borda);
}

.linha-tempo__marcador {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: var(--cor-acento);
    margin-top: 4px;
    flex-shrink: 0;
    z-index: 1;
}

.linha-tempo__item--comentario .linha-tempo__marcador {
    background-color: var(--cor-primaria);
}

.linha-tempo__item--produto_adicionado .linha-tempo__marcador {
    background-color: var(--cor-sucesso);
}

.linha-tempo__item--produto_removido .linha-tempo__marcador {
    background-color: var(--cor-perigo);
}

.linha-tempo__item--produto_alterado .linha-tempo__marcador {
    background-color: var(--cor-atencao);
}

.linha-tempo__item--atividade_adicionada .linha-tempo__marcador {
    background-color: var(--cor-texto-suave);
}

.linha-tempo__item--data_fechamento_alterada .linha-tempo__marcador,
.linha-tempo__item--probabilidade_alterada .linha-tempo__marcador {
    background-color: var(--cor-atencao);
}

.linha-tempo__conteudo {
    flex: 1;
    min-width: 0;
}

.linha-tempo__cabecalho {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
    flex-wrap: wrap;
    font-size: 0.9rem;
}

.linha-tempo__data {
    font-size: 0.75rem;
    color: var(--cor-texto-suave);
    white-space: nowrap;
}

.linha-tempo__texto {
    margin-top: 0.35rem;
    white-space: pre-wrap;
    font-size: 0.88rem;
}

/* Badge linkando pra oportunidade de origem — só aparece no resumo do
   cliente, onde a linha do tempo mistura eventos de várias oportunidades. */
.linha-tempo__origem {
    display: inline-block;
    margin-top: 0.35rem;
    text-decoration: none;
}

.linha-tempo__origem:hover {
    filter: brightness(0.95);
}

/* ---------- Painel lateral de oportunidade ---------- */
/* Sem fundo escurecido nem bloqueio de clique: o resto da tela (o funil por
   trás) continua totalmente utilizável com o painel aberto — arrastar card,
   trocar de aba, aplicar filtro etc. Só o container teria "inset: 0" pra
   posicionar o painel encostado na borda direita, então ele leva
   pointer-events: none e só o painel em si (a única coisa visível) reativa
   com pointer-events: auto. */

.modal-oportunidade {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: flex;
    align-items: stretch;
    justify-content: flex-end;
    pointer-events: none;
}

.modal-oportunidade[hidden] {
    display: none;
}

.modal-oportunidade__fundo {
    display: none;
}

.modal-oportunidade__painel {
    position: relative;
    pointer-events: auto;
    background-color: var(--cor-fundo);
    border-radius: var(--raio) 0 0 var(--raio);
    box-shadow: var(--sombra);
    width: 100%;
    max-width: 560px;
    height: 100%;
    max-height: 100vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transform: translateX(100%);
    transition: transform 0.2s ease;
}

.modal-oportunidade--aberto .modal-oportunidade__painel {
    transform: translateX(0);
}

.modal-oportunidade__fechar {
    position: absolute;
    top: 0.75rem;
    right: 0.9rem;
    background: none;
    border: none;
    font-size: 1.6rem;
    line-height: 1;
    color: var(--cor-texto-suave);
    cursor: pointer;
    padding: 0.2rem 0.5rem;
    border-radius: var(--raio-pequeno);
    z-index: 1;
}

.modal-oportunidade__fechar:hover {
    background-color: var(--cor-borda);
    color: var(--cor-texto);
}

.modal-oportunidade__conteudo {
    padding: 1.75rem;
    overflow-y: auto;
    flex: 1;
    min-height: 0;
}

.modal-oportunidade__conteudo .acoes-pagina {
    margin-top: 0;
}

.modal-oportunidade__conteudo [data-acao-salvar-cancelar] {
    display: none;
}

.modal-oportunidade__rodape {
    padding: 1rem 1.75rem;
    border-top: 1px solid var(--cor-borda);
    background-color: var(--cor-superficie);
    flex-shrink: 0;
}

.modal-oportunidade__rodape[hidden] {
    display: none;
}

.modal-oportunidade__rodape-acoes {
    display: flex;
    justify-content: flex-end;
    gap: 0.6rem;
}

/* Comentário movido pro rodapé (ver oportunidade_modal.js) quando a aba
   Histórico está ativa — perde a aparência de cartão flutuante, já que
   aqui ele é o próprio rodapé fixo do painel. */
[data-rodape-historico] .linha-tempo-comentario {
    box-shadow: none;
    border-radius: 0;
    padding: 0;
    background-color: transparent;
}

[data-rodape-historico] .linha-tempo-comentario .campo {
    margin-bottom: 0.6rem;
}

[data-rodape-historico]:not([hidden]) {
    margin-bottom: 0.85rem;
    padding-bottom: 0.85rem;
    border-bottom: 1px solid var(--cor-borda);
}

.modal-oportunidade__conteudo [data-acao-timeline] {
    display: none;
}

/* ---------- Modais secundários (novo produto, nova atividade...) ---------- */

.modal-secundario {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    /* Centraliza na área de conteúdo (à direita da sidebar), não na tela
       inteira — senão o modal fica visualmente puxado pro menu lateral. */
    left: var(--largura-sidebar);
    z-index: 110;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 6vh 1.5rem;
}

.modal-secundario[hidden] {
    display: none;
}

.modal-secundario__fundo {
    position: absolute;
    inset: 0;
    background-color: rgba(15, 23, 42, 0.45);
}

.modal-secundario__painel {
    position: relative;
    background-color: var(--cor-fundo);
    border-radius: var(--raio);
    box-shadow: var(--sombra);
    width: 100%;
    max-width: 460px;
    max-height: 88vh;
    overflow-y: auto;
    padding: 1.75rem;
}

.modal-secundario__painel h3 {
    margin-bottom: 1rem;
}

.modal-secundario__painel--largo {
    max-width: 900px;
}

/* ---------- Seleção de produtos em lote (modal "Novo produto") ---------- */
/* Cada produto é uma linha (checkbox + nome à esquerda, campos à direita, na
   mesma linha) pra caber o máximo de produtos possível numa tela só — só
   cresce em altura pra virar 2 linhas quando o texto não cabe (nome comprido
   + poucos px de largura), nunca por design. */

.lista-selecao-produtos {
    margin-bottom: 1rem;
}

.selecao-produto-grupo {
    margin-bottom: 0.9rem;
}

.selecao-produto-grupo__titulo {
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--cor-texto-suave);
    margin-bottom: 0.4rem;
}

.selecao-produto {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem 0.75rem;
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio-pequeno);
    padding: 0.45rem 0.7rem;
    margin-bottom: 0.4rem;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.selecao-produto--marcado {
    border-color: var(--cor-primaria);
    background-color: rgba(var(--cor-primaria-rgb), 0.05);
}

.selecao-produto__cabecalho {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    font-weight: 600;
    flex: 0 0 200px;
    min-width: 0;
}

.selecao-produto__cabecalho span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.selecao-produto__campos {
    display: flex;
    flex-wrap: wrap;
    flex: 1 1 320px;
    gap: 0.5rem;
}

.selecao-produto__campos .input {
    flex: 1 1 110px;
    min-width: 90px;
    padding: 0.4rem 0.6rem;
    font-size: 0.88rem;
}

/* Descrição cresce mais que Valor/Qtd. horas quando sobra espaço; quando não
   sobra (produto com os três campos, Qtd. horas incluída), os campos quebram
   linha em vez de forçar o card — e a aba/modal — a rolar na horizontal. */
.selecao-produto__campos input[name^="descricao__"] {
    flex: 2 1 160px;
}

/* ---------- Utilitários ---------- */

.texto-suave {
    color: var(--cor-texto-suave);
}

.secao {
    margin-top: 2rem;
}

.secao h2,
.secao h3 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.05rem;
    margin-bottom: 1rem;
}

/* ==========================================================================
   Celular (≤768px) — segunda convenção de responsividade do projeto, além
   do @media (max-width: 960px) já usado nos grids de dashboard (esse aqui
   trata do shell da aplicação e do Funil de Vendas).
   ========================================================================== */

@media (max-width: 768px) {
    /* ---------- Shell: sidebar vira menu hambúrguer em overlay ---------- */

    :root,
    html.sidebar-minimizada {
        /* Sidebar não ocupa espaço no grid nesse breakpoint (vira overlay
           por cima do conteúdo) — modal-secundario passa a centralizar na
           tela inteira. */
        --largura-sidebar: 0px;
    }

    .topbar__menu-mobile {
        display: inline-flex;
    }

    .topbar__usuario-info {
        display: none;
    }

    .layout,
    html.sidebar-minimizada .layout {
        grid-template-columns: 1fr;
    }

    .conteudo {
        padding: 1rem;
    }

    /* Grids que usam um piso de largura de coluna (minmax) maior que a tela
       de um celular — sem isso, o grid força a coluna a ficar mais larga
       que o viewport, o que empurra a página inteira (sidebar, topbar, tudo)
       pra um layout largo demais, exibido espremido no canto esquerdo da
       tela em vez de ocupar a largura certa. */
    .grade-graficos,
    .grade-kpis,
    .grade-cartoes {
        grid-template-columns: 1fr;
    }

    .sidebar {
        position: fixed;
        inset: 0 auto 0 0;
        width: 240px;
        z-index: 60;
        transform: translateX(-100%);
        transition: transform 0.2s ease;
    }

    .sidebar.is-aberta-mobile {
        transform: translateX(0);
    }

    /* A sidebar "minimizada" é uma preferência manual de desktop persistida
       no localStorage — nesse breakpoint o overlay sempre deve abrir por
       inteiro, com os textos, então essas regras são neutralizadas aqui. */
    html.sidebar-minimizada .sidebar {
        width: 240px;
        padding: 1.25rem 0.9rem;
    }

    html.sidebar-minimizada .sidebar__marca {
        justify-content: space-between;
    }

    html.sidebar-minimizada .sidebar__logo {
        display: block;
    }

    html.sidebar-minimizada .sidebar__link {
        justify-content: flex-start;
        padding: 0.65rem 0.8rem;
    }

    html.sidebar-minimizada .sidebar__link span {
        display: inline;
    }

    /* ---------- Funil de Vendas ---------- */

    .funil {
        scroll-snap-type: x mandatory;
    }

    .funil__coluna {
        min-width: 82vw;
        max-width: 82vw;
        scroll-snap-align: start;
    }

    .modal-oportunidade {
        padding: 3vh 0.75rem;
    }

    /* Régua de abas dos formulários (Cliente/Oportunidade, inclusive dentro
       do modal de oportunidade): em vez de cortar/espremer com 3 abas numa
       tela estreita, rola horizontalmente. */
    .abas {
        overflow-x: auto;
        flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch;
    }
}