/*
 * CSS do sistema. Nenhuma view tem <style> (docs/01-convencoes.md).
 * O tema fica em mazer/; aqui só o que é nosso.
 *
 * Barra lateral escura no azul-petróleo da marca, menu compacto e fundo cinza
 * claro. A cor da marca é provisória até o produto ter identidade própria.
 */

:root {
    --cor-marca: #1f2e40;
    --cor-marca-escura: #162331;
    --cor-marca-hover: #08042f;
    --largura-menu: 192px;
    --largura-menu-recolhido: 64px;
}

/*
 * O tema Mazer pede `font-family: Nunito` sem alternativa, e a Nunito nao esta
 * no projeto — nao ha arquivo dela em mazer/ nem Google Fonts no cabecalho.
 * Sem isto o navegador cai na fonte padrao dele, que e serifada.
 */
body {
    background-color: #e9ecef;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
        Arial, "Noto Sans", sans-serif;
}

/* ==========================================================================
   Barra lateral
   ========================================================================== */

#sidebar,
.sidebar-wrapper {
    background-color: var(--cor-marca);
    color: #fff;
    width: var(--largura-menu);
}

#main {
    margin-left: var(--largura-menu);
}

/*
 * O Mazer reserva muito espaço em cima: `padding: 2rem` no cabeçalho da
 * barra e `margin-top: 2rem` no menu. Somados, empurravam o primeiro item
 * quase 100px para baixo, com a logo perdida no meio.
 */
/*
 * O tema põe `.sidebar-wrapper .sidebar-header { padding: 2rem 2rem 1rem;
 * font-size: 2rem }`: com duas classes, ganhava do `.sidebar-header` daqui e
 * sobrava espaço vazio em volta da logo. A logo fica `block` para a linha de
 * 2rem do texto não somar altura embaixo dela.
 */
.sidebar-wrapper .sidebar-header {
    padding: 0.6rem 0.75rem 0.4rem;
    font-size: 1rem;
}

.sidebar-wrapper .sidebar-header .sidebar-marca img {
    display: block;
    margin: 0 auto;
}

/* O tema separa cada item por 0.5rem e dá 0.7rem de folga ao link. */
.sidebar-wrapper .menu .sidebar-item {
    margin-top: 0.1rem;
}

.sidebar-wrapper .menu .sidebar-link {
    padding-top: 0.45rem;
    padding-bottom: 0.45rem;
}

/* A seta do grupo encostada na borda direita e no meio da linha (o tema a
   deixava a 15px da borda e presa a 12px do topo). A referência é o próprio
   link, e não o item — o item cresce quando o grupo abre. */
.sidebar-wrapper .menu .sidebar-item.has-sub > .sidebar-link {
    position: relative;
}

.sidebar-wrapper .menu .sidebar-item.has-sub .sidebar-link:after {
    right: 2px;
    top: 50%;
    transform: translateY(-50%);
    line-height: 0;
}

/* O menu rola com a roda do mouse e o toque, mas sem a barra de rolagem
   aparecendo ao lado. */
.sidebar-wrapper {
    scrollbar-width: none;
}

.sidebar-wrapper::-webkit-scrollbar {
    display: none;
}

/*
 * O tema fixa `.sidebar-wrapper .sidebar-header img { height: 1.2rem }`. São
 * duas classes mais o elemento, então `.sidebar-marca img` **perde no
 * desempate** e a altura ficava travada em ~19px — com a largura nova, a logo
 * saía esticada de lado. O seletor daqui precisa alcançar a mesma altura.
 */
.sidebar-wrapper .sidebar-header .sidebar-marca img {
    height: auto;
    max-height: none;
    width: 100%;
    max-width: 150px;
}

.sidebar-wrapper .menu {
    margin-top: 0.25rem;
    padding-left: 0;
    padding-right: 0;
}

.sidebar-menu {
    padding-top: 0;
}


/*
 * A barra é estreita de propósito: o espaço é do conteúdo. Os nomes mais longos
 * do menu — "Personalização do sistema", "Cidades por usuário" — ainda cabem em
 * uma linha nesta medida.
 */
.sidebar-wrapper .menu .sidebar-link {
    font-size: 0.85rem;
    padding-left: 0.7rem;
    padding-right: 0.4rem;
}

.sidebar-wrapper .menu .sidebar-link span {
    color: #e1e1e1;
}

.sidebar-wrapper .menu .sidebar-link i {
    color: #9fb4cc;
    font-size: 1rem;
}

.sidebar-wrapper .menu .sidebar-link:hover {
    background-color: var(--cor-marca-hover);
}

.sidebar-wrapper .menu .sidebar-link:hover span,
.sidebar-wrapper .menu .sidebar-link:hover i {
    color: #fff;
}

.sidebar-item.active > .sidebar-link {
    background-color: rgba(255, 255, 255, 0.12);
}

.sidebar-item.active > .sidebar-link span,
.sidebar-item.active > .sidebar-link i {
    color: #fff;
}

.sidebar-wrapper .menu .submenu {
    background-color: transparent;
    padding-left: 0;
}

.sidebar-wrapper .menu .submenu .submenu-item a {
    color: #bfcbd9 !important;
    font-size: 0.8rem;
    padding: 0.35rem 0.6rem 0.35rem 1.35rem;
}

.sidebar-wrapper .menu .submenu .submenu-item a:hover {
    background-color: var(--cor-marca-hover);
    color: #fff !important;
    margin-left: 0.3rem;
}

/* Recolhido: sobra só o ícone. */
#sidebar:not(.active) {
    width: var(--largura-menu-recolhido);
}

#sidebar:not(.active) .sidebar-menu span,
#sidebar:not(.active) .submenu {
    display: none;
}

@media (max-width: 1199px) {
    #sidebar {
        left: calc(var(--largura-menu) * -1);
    }

    #sidebar.active {
        left: 0;
    }

    #main {
        margin-left: 0;
    }
}

/* ==========================================================================
   Título de página, cartão e botão da marca
   ========================================================================== */

.page-title h3 {
    color: var(--cor-marca);
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.card-header {
    font-size: 0.95rem;
    font-weight: 600;
    padding: 0.6rem 1rem;
}

/* Cabeçalho do modal de confirmação em ação comum (data-confirmacao-estilo="neutro"). */
.bg-marca {
    background-color: var(--cor-marca);
}

/* O Mazer pinta todo título com cor escura própria; no cabeçalho colorido do
   modal ele sumia no fundo. */
.modal-header.text-white .modal-title {
    color: #fff;
}

.btn-marca {
    background-color: var(--cor-marca);
    border-color: var(--cor-marca);
    color: #fff;
}

.btn-marca:hover,
.btn-marca:focus {
    background-color: var(--cor-marca-escura);
    border-color: var(--cor-marca-escura);
    color: #fff;
}

::placeholder {
    color: #bbb !important;
    opacity: 1;
}
/* Nome e empresa empilhados no canto da barra de cima. */
.barra-usuario {
    display: inline-flex;
    flex-direction: column;
    line-height: 1.2;
    text-align: right;
}

.barra-usuario-link {
    font-size: 0.82rem;
}

.barra-usuario-nome {
    font-weight: 600;
    color: #fff;
}

.barra-usuario-empresa {
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.7);
}

.btn[disabled] {
    cursor: wait;
}

/* ---------------------------------------------------------------------------
   Telas de fora do sistema: login e repasse. Cartão centrado sobre fundo
   escuro, no mesmo desenho do projeto de referência.
   --------------------------------------------------------------------------- */
.tela-publica {
    background-color: #1f2e40;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tela-publica-cartao-area {
    width: 100%;
    max-width: 420px;
    padding: 15px;
}

/* Página de erro (errors/500). */
.pagina-erro-icone {
    color: #c9a227;
    font-size: 2.75rem;
}

/*
 * Autocadastro: o formulário tem endereço e não cabe nos 420px do login. Campos
 * grandes (form-control-lg) e blocos separados por título, para quem nunca usou
 * o sistema; a página rola até o botão.
 */
.tela-publica-cartao-area-larga {
    max-width: 860px;
}

.formulario-autocadastro .form-label {
    font-weight: 600;
}

.formulario-autocadastro-titulo {
    color: #1f2e40;
    font-size: 1.05rem;
    font-weight: 600;
    border-bottom: 1px solid #e3e6ea;
    padding-bottom: 0.5rem;
    margin: 1.75rem 0 1rem;
}

.formulario-autocadastro-titulo:first-of-type {
    margin-top: 0;
}

.tela-publica-logo {
    display: block;
    margin: 0 auto 0.75rem;
    max-height: 64px;
    max-width: 220px;
}

.tela-publica-marca {
    color: #ffffff;
    font-size: 1.6rem;
    font-weight: 600;
    letter-spacing: 0.5px;
}

.tela-publica-cartao {
    border: none;
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
    margin-bottom: 1rem;
}

.tela-publica-titulo {
    color: #1f2e40;
    font-size: 1.4rem;
    font-weight: 600;
    margin-bottom: 1.25rem;
    text-align: center;
}

/* Quando há subtítulo, o espaço embaixo do título é dele. */
.tela-publica-titulo:has(+ .tela-publica-subtitulo) {
    margin-bottom: 0.25rem;
}

.tela-publica-subtitulo {
    text-align: center;
    color: #6c757d;
    font-size: 0.9rem;
    margin-bottom: 1.5rem;
}

.tela-publica-rodape {
    color: rgba(255, 255, 255, 0.75);
    font-size: 0.9rem;
    text-align: center;
    margin: 0;
}

/*
 * O link do Bootstrap é azul-escuro, e sobre este fundo escuro ele sumia: era
 * o "Criar conta grátis" que ninguém achava.
 */
.tela-publica-rodape a {
    color: #ffffff;
    font-weight: 600;
    text-decoration: underline;
}

.tela-publica-rodape a:hover,
.tela-publica-rodape a:focus {
    color: #ffffff;
    text-decoration: none;
}

.tela-publica-rodape-separador {
    color: rgba(255, 255, 255, 0.4);
    margin: 0 0.4rem;
}

/*
 * Campo de senha com o olho de conferir dentro dele. O botão fica sobreposto à
 * direita, para não roubar largura do campo.
 */
.campo-com-olho {
    position: relative;
}

.campo-com-olho .form-control {
    padding-right: 2.75rem;
}

.campo-olho {
    background: none;
    border: 0;
    color: #6c757d;
    cursor: pointer;
    line-height: 1;
    padding: 0.25rem 0.5rem;
    position: absolute;
    right: 0.35rem;
    top: 50%;
    transform: translateY(-50%);
}

.campo-olho:hover,
.campo-olho:focus {
    color: var(--cor-marca);
}

/*
 * Espaçamento do corpo. O Mazer usa `padding: 2rem` no `#main` e 2rem de
 * margem embaixo do bloco de título; numa tela de trabalho isso é altura
 * perdida antes de aparecer o primeiro dado.
 */
#main {
    padding: 1.25rem 1.5rem;
}

#main > header {
    margin-bottom: 0.5rem !important;
}

#main > header .navbar {
    padding-top: 0;
    padding-bottom: 0;
}

.page-heading {
    margin-bottom: 1rem;
}

.page-title {
    margin-bottom: 0.75rem;
}

/* Rodapé numa linha só, à esquerda. */
.rodape {
    border-top: 1px solid #dee2e6;
    color: #6c757d;
    font-size: 0.8rem;
    margin-top: 1rem;
    padding: 0.6rem 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ==========================================================================
   Barra de cima
   ========================================================================== */

/*
 * A barra é uma faixa só, colada no topo, como no sistema antigo. O tema dá
 * `padding: 2rem` ao conteúdo, e somado à folga da navbar sobravam quase 90px
 * de nada antes do título da página.
 */
#main {
    padding: 0 1.5rem 1.5rem;
}

/*
 * O Mazer fixa `.navbar { height: 90px }`. Altura fixa ganha de `min-height`,
 * então sem o `height: auto` a barra nunca encolhe.
 */
.barra-superior {
    background-color: var(--cor-marca);
    margin: 0 -1.5rem 1rem;
    padding: 0.25rem 1.5rem;
    height: auto;
    min-height: 44px;
}

.barra-superior .nav-link {
    color: rgba(255, 255, 255, 0.85);
    padding: 0.15rem 0.5rem;
    font-size: 1rem;
    position: relative;
}

.barra-superior .nav-link:hover,
.barra-superior .nav-link:focus {
    color: #fff;
}

.barra-superior .badge {
    position: absolute;
    top: -0.15rem;
    right: 0;
    font-size: 0.6rem;
    padding: 0.2em 0.4em;
}

/* A seta do dropdown ao lado do ícone só faz o ícone parecer torto. */
.barra-superior .sem-seta::after {
    display: none;
}

.barra-menu {
    color: rgba(255, 255, 255, 0.85);
    font-size: 1.4rem;
}

.page-heading {
    margin-bottom: 1.25rem;
}


/* ---------------------------------------------------------------------------
   Card "Etapas de desenvolvimento" (início do administrador)
   --------------------------------------------------------------------------- */
.etapa-progresso {
    height: 0.5rem;
}

.etapa-legenda {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    font-size: 0.85rem;
    color: #6c757d;
}

.etapa-fase {
    margin: 1.5rem 0 0.25rem;
    color: var(--cor-marca);
}

.etapa-modulo {
    margin-bottom: 0.75rem;
    font-size: 0.85rem;
    color: #6c757d;
}

.etapa {
    padding: 0.75rem 1rem;
    margin-bottom: 0.5rem;
    border: 1px solid #e9ecef;
    border-left-width: 4px;
    border-radius: 0.375rem;
}

.etapa-concluida {
    border-left-color: #198754;
}

.etapa-em_desenvolvimento {
    border-left-color: #0d6efd;
    background-color: #f5f9ff;
}

.etapa-futura {
    border-left-color: #ced4da;
}

.etapa-cabecalho {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
}

.etapa-cabecalho .badge {
    margin-left: auto;
}

.etapa-descricao {
    margin: 0.35rem 0 0.25rem;
    color: #495057;
}

.etapa-item {
    margin-bottom: 0;
    padding-left: 1.25rem;
    font-size: 0.875rem;
    color: #6c757d;
}

/* ---------------------------------------------------------------------------
   Mapa do projeto (início do administrador): abas, decisões e perguntas
   --------------------------------------------------------------------------- */
.mapa-aba {
    border-bottom: 0;
}

.mapa-aba .nav-link {
    color: #6c757d;
}

.mapa-aba .nav-link.active {
    color: var(--cor-marca);
    font-weight: 600;
}

.mapa-tema {
    margin: 1.25rem 0 0.5rem;
    color: var(--cor-marca);
}

.mapa-tema:first-child {
    margin-top: 0;
}

.mapa-decisao {
    margin-bottom: 0;
    padding-left: 1.25rem;
    color: #495057;
}

.mapa-decisao li {
    margin-bottom: 0.25rem;
}

.pergunta {
    padding: 0.75rem 1rem;
    margin-bottom: 0.5rem;
    border: 1px solid #e9ecef;
    border-left: 4px solid #ffc107;
    border-radius: 0.375rem;
}

.pergunta-cabecalho {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.pergunta-texto {
    margin: 0.4rem 0 0.25rem;
    font-weight: 600;
    color: #343a40;
}

.pergunta-contexto {
    margin-bottom: 0.25rem;
    font-size: 0.875rem;
    color: #6c757d;
}

.pergunta-opcao {
    margin: 0.25rem 0;
    padding-left: 0;
    list-style: none;
    font-size: 0.9rem;
    color: #495057;
}

.pergunta-atual {
    margin: 0.35rem 0 0;
    font-size: 0.85rem;
    font-style: italic;
    color: #6c757d;
}

/* ---------------------------------------------------------------------------
   Aba "Organização do sistema" (início do administrador, config/organizacao.php)
   --------------------------------------------------------------------------- */
.perfil {
    height: 100%;
    padding: 0.75rem 1rem;
    border: 1px solid #e9ecef;
    border-top: 4px solid var(--cor-marca);
    border-radius: 0.375rem;
}

.perfil-cabecalho {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.perfil-cabecalho .bi {
    font-size: 1.5rem;
    color: var(--cor-marca);
}

.perfil-resumo {
    margin: 0.5rem 0;
    color: #495057;
}

.perfil-grupo {
    margin: 0.5rem 0 0.15rem;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    color: #6c757d;
}

.perfil-item {
    margin-bottom: 0;
    padding-left: 1.25rem;
    font-size: 0.875rem;
    color: #495057;
}

/*
 * Aviso em texto (ex.: CNPJ com situação diferente de ATIVA na Receita). O
 * `text-warning` do Bootstrap é amarelo claro e some no fundo branco.
 */
.texto-aviso {
    color: #8a6100;
    font-weight: 600;
}

/* ---------------------------------------------------------------------------
   Catálogo de produtos (M1.1.8)
   --------------------------------------------------------------------------- */
.produto-coluna-capa {
    width: 64px;
}

/* Miniatura da capa na lista: tamanho fixo, a imagem recortada sem deformar. */
.produto-miniatura {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    object-fit: cover;
    border-radius: 0.25rem;
    border: 1px solid #e9ecef;
}

.produto-sem-imagem {
    background: #f8f9fa;
    color: #adb5bd;
    font-size: 1.25rem;
}

.produto-galeria {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 0.75rem;
}

.produto-galeria-item {
    display: block;
    min-width: 0;
}

.produto-galeria-item img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 0.375rem;
    border: 1px solid #e9ecef;
}

/* A descrição é texto livre: as quebras de linha digitadas aparecem na ficha. */
.produto-descricao {
    white-space: pre-line;
}

/* Texto livre só para ler (ex.: área de atuação na consulta): as quebras de linha digitadas aparecem. */
.texto-livre {
    white-space: pre-line;
}

/*
 * Card de alerta da tela inicial (M1.2.1), no estilo dos cards do CRM: número
 * grande e título (texto embaixo só quando é importante), com a borda da
 * esquerda na cor do alerta.
 * Laranja quando há pendência; cinza quando está em dia.
 */
.cartao-alerta {
    display: block;
    height: 100%;
    padding: 12px 16px;
    background: #fff;
    border: 1px solid #eee;
    border-left-width: 8px;
    border-radius: 10px;
    font-size: 0.9rem;
    color: #000;
    text-decoration: none;
}

a.cartao-alerta:hover {
    color: #000;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.cartao-alerta-numero {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1;
    text-align: center;
    margin-bottom: 0.25rem;
}

.cartao-alerta-aviso {
    border-left-color: #f0ad4e;
}

.cartao-alerta-aviso .cartao-alerta-numero {
    color: #f0ad4e;
}

.cartao-alerta-em-dia {
    border-left-color: #ced4da;
}

.cartao-alerta-em-dia .cartao-alerta-numero {
    color: #adb5bd;
}

/* Cards do resumo das oportunidades do mês (decisão 94): só leitura, sem link. */
.cartao-alerta-total {
    border-left-color: #1f2e40;
}

.cartao-alerta-total .cartao-alerta-numero {
    color: #1f2e40;
}

.cartao-alerta-andamento {
    border-left-color: #428bca;
}

.cartao-alerta-andamento .cartao-alerta-numero {
    color: #428bca;
}

.cartao-alerta-ganha {
    border-left-color: #5cb85c;
}

.cartao-alerta-ganha .cartao-alerta-numero {
    color: #5cb85c;
}

.cartao-alerta-perdida {
    border-left-color: #d9534f;
}

.cartao-alerta-perdida .cartao-alerta-numero {
    color: #d9534f;
}

/* ---------------------------------------------------------------------------
   Site do produtor (M1.2.2): layouts/site, menu em cima e rodapé, sem o menu
   lateral, como o mockup do produtor. Logo e cores ainda vão mudar (M1.6):
   as cores do site estão só nestas variáveis. Por ora, o padrão da Thonus:
   o azul do sistema e o laranja do logo.
   --------------------------------------------------------------------------- */
:root {
    --site-principal: var(--cor-marca);
    --site-principal-escura: var(--cor-marca-escura);
    --site-destaque: #f39200;
    --site-destaque-escura: #d67f00;
    --site-fundo: #f3f4f6;
    --site-cartao: #fff;
    --site-texto: #1f2933;
    --site-texto-suave: #6b7280;
    --site-linha: #e3e6ea;
}

body.site {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    /* Os painéis fora da tela (gaveta, filtros) não podem criar rolagem para o lado. */
    overflow-x: clip;
    background: var(--site-fundo);
    color: var(--site-texto);
}

.site-topo {
    position: sticky;
    top: 0;
    z-index: 1030;
    background: #fff;
    border-bottom: 1px solid var(--site-linha);
}

.site-topo-linha {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    min-height: 72px;
}

.site-marca img {
    display: block;
    height: 44px;
    width: auto;
}

.site-busca {
    display: flex;
    flex: 1;
    max-width: 560px;
}

.site-busca input {
    flex: 1;
    min-width: 0;
    padding: 0.6rem 1rem;
    border: 1px solid var(--site-linha);
    border-right: 0;
    border-radius: 8px 0 0 8px;
    background: #fff;
    font-size: 0.95rem;
}

.site-busca input:focus {
    outline: none;
    border-color: var(--site-destaque);
}

.site-busca button {
    padding: 0 1.1rem;
    border: 0;
    border-radius: 0 8px 8px 0;
    background: var(--site-destaque);
    color: #fff;
    font-weight: 700;
}

.site-busca button:hover {
    background: var(--site-destaque-escura);
}

.site-busca button span {
    margin-left: 0.4rem;
}

.site-menu {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    margin-left: auto;
}

.site-menu-link {
    padding: 0.5rem 0.75rem;
    border-radius: 8px;
    color: var(--site-texto);
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

.site-menu-link:hover,
.site-menu-ativo {
    color: var(--site-principal);
    background: var(--site-fundo);
}

.site-menu-usuario {
    margin-left: 0.35rem;
}

/* No computador, o menu é em texto; o ícone só aparece no celular. */
.site-menu-icone {
    display: none;
}

.site-previa {
    padding: 0.3rem 0.7rem;
    border-radius: 999px;
    background: #e8f1fb;
    color: #1d5fa8;
    font-size: 0.8rem;
    font-weight: 700;
}

.site-botao-pedido {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    margin-left: 0.5rem;
    padding: 0.55rem 1rem;
    border-radius: 8px;
    background: var(--site-principal);
    color: #fff;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}

.site-botao-pedido:hover {
    background: var(--site-principal-escura);
    color: #fff;
}

.site-contador {
    min-width: 1.5rem;
    padding: 0.1rem 0.45rem;
    border-radius: 999px;
    background: var(--site-destaque);
    color: #fff;
    font-size: 0.8rem;
    text-align: center;
}

/* Celular: a busca desce para uma linha própria; o menu fica só com ícones e o pedido. */
@media (max-width: 767px) {
    .site-topo-linha {
        flex-wrap: wrap;
        gap: 0.5rem 0.75rem;
        padding-top: 0.6rem;
        padding-bottom: 0.6rem;
    }

    .site-marca img {
        height: 34px;
    }

    .site-busca {
        order: 3;
        flex-basis: 100%;
        max-width: none;
    }

    .site-busca button span,
    .site-menu-usuario,
    .site-menu-texto,
    .site-botao-pedido-texto {
        display: none;
    }

    .site-menu-icone {
        display: inline;
        font-size: 1.2rem;
    }

    .site-menu-link {
        padding: 0.4rem 0.5rem;
    }

    .site-botao-pedido {
        margin-left: 0.25rem;
        padding: 0.5rem 0.75rem;
    }

    .vitrine-banner {
        padding: 1.25rem 0;
    }

    .vitrine-banner h1 {
        font-size: 1.5rem;
    }
}

/* Título das telas sem faixa própria (pedido, Meus pedidos, Meus dados...). */
.site-titulo {
    padding: 1.75rem 0 0.5rem;
}

.site-titulo-linha {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
}

.site-titulo h1 {
    margin: 0;
    font-size: 1.75rem;
    font-weight: 800;
    color: var(--site-texto);
}

.site-titulo p {
    margin: 0.35rem 0 0;
    color: var(--site-texto-suave);
}

.site-conteudo {
    flex: 1;
    padding: 1.5rem 0 3rem;
}

.site-rodape {
    padding: 2.5rem 0 1.25rem;
    background: var(--site-principal);
    color: rgba(255, 255, 255, 0.75);
}

.site-rodape-grade {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 2rem;
}

@media (max-width: 767px) {
    .site-rodape-grade {
        grid-template-columns: minmax(0, 1fr);
    }
}

.site-rodape-marca {
    margin-bottom: 0.5rem;
    font-size: 1.35rem;
    font-weight: 800;
    color: #fff;
}

.site-rodape h2 {
    margin-bottom: 0.75rem;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #fff;
}

.site-rodape ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.site-rodape li {
    margin-bottom: 0.4rem;
}

.site-rodape a {
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
}

.site-rodape a:hover {
    color: #fff;
    text-decoration: underline;
}

.site-rodape-base {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.5rem;
    margin-top: 2rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    font-size: 0.85rem;
}

/* Vitrine: faixa de destaque, faixa das indústrias, categorias e cards. */
.vitrine-banner {
    padding: 2rem 0;
    background: var(--site-principal);
    color: #fff;
}

.vitrine-banner-linha {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
}

.vitrine-banner h1 {
    margin: 0;
    font-size: 2rem;
    font-weight: 800;
    line-height: 1.15;
    color: #fff;
}

.vitrine-banner h1 span {
    color: var(--site-destaque);
}

.vitrine-banner p {
    margin: 0.5rem 0 0;
    color: rgba(255, 255, 255, 0.8);
}

.vitrine-banner-numero {
    display: flex;
    gap: 2rem;
}

.vitrine-banner-numero b {
    display: block;
    font-size: 1.75rem;
    font-weight: 800;
    line-height: 1;
}

.vitrine-banner-numero span {
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.7);
}

/*
 * Barra lateral de filtros, como nos marketplaces: linhas e indústrias, todas
 * visíveis, com o número de produtos. No celular vira um painel que abre pelo
 * botão "Filtrar" (#filtros), só com CSS, como a gaveta do pedido.
 */
.vitrine-corpo {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    gap: 1.5rem;
    align-items: start;
}

.vitrine-filtros {
    position: sticky;
    top: 88px;
    max-height: calc(100vh - 104px);
    overflow-y: auto;
    padding: 1rem 0.75rem;
    border: 1px solid var(--site-linha);
    border-radius: 12px;
    background: #fff;
}

.vitrine-filtro-grupo + .vitrine-filtro-grupo {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--site-linha);
}

.vitrine-filtro-grupo h2 {
    margin: 0 0 0.4rem 0.5rem;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--site-texto-suave);
}

.vitrine-filtro-grupo ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.vitrine-filtro-grupo a {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.4rem 0.5rem;
    border-left: 3px solid transparent;
    border-radius: 6px;
    color: var(--site-texto);
    font-size: 0.92rem;
    text-decoration: none;
}

.vitrine-filtro-grupo a:hover {
    background: var(--site-fundo);
    color: var(--site-principal);
}

.vitrine-filtro-grupo a.vitrine-filtro-ativo {
    border-left-color: var(--site-destaque);
    background: var(--site-fundo);
    color: var(--site-principal);
    font-weight: 700;
}

.vitrine-filtro-total {
    color: var(--site-texto-suave);
    font-size: 0.85rem;
    font-weight: 400;
}

/* Só no celular: o título do painel, o botão que fecha e o "Ver N produtos". */
.vitrine-filtros-topo,
.vitrine-filtros-ver,
.vitrine-filtros-sombra,
.vitrine-botao-filtrar {
    display: none;
}

.vitrine-filtro-em-uso {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin: -0.25rem 0 1rem;
}

.vitrine-filtro-em-uso a {
    padding: 0.3rem 0.75rem;
    border: 1px solid var(--site-linha);
    border-radius: 999px;
    background: #fff;
    color: var(--site-texto);
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
}

.vitrine-filtro-em-uso a:hover {
    border-color: var(--site-principal);
}

.vitrine-filtro-em-uso a.vitrine-filtro-limpar {
    border: 0;
    background: none;
    color: var(--site-texto-suave);
    font-weight: 400;
    text-decoration: underline;
}

@media (max-width: 991px) {
    .vitrine-corpo {
        display: block;
    }

    /* Escondido com transform e visibility (e não com left negativo): abrir #filtros não faz a página rolar para o lado. */
    .vitrine-filtros {
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        z-index: 1050;
        width: 320px;
        max-width: 90%;
        max-height: none;
        border-radius: 0;
        transform: translateX(-105%);
        visibility: hidden;
        transition: transform 0.25s ease, visibility 0.25s;
    }

    .vitrine-filtros:target {
        transform: none;
        visibility: visible;
    }

    .vitrine-filtros:target + .vitrine-filtros-sombra {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 1040;
        background: rgba(0, 0, 0, 0.45);
    }

    .vitrine-filtros-topo {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin: -1rem -0.75rem 1rem;
        padding: 1rem 1.25rem;
        background: var(--site-principal);
        color: #fff;
        font-weight: 700;
    }

    .vitrine-filtros-topo a {
        color: #fff;
        font-size: 1.3rem;
    }

    .vitrine-filtros-ver {
        display: block;
        margin-top: 1.25rem;
        padding: 0.7rem 1rem;
        border-radius: 8px;
        background: var(--site-destaque);
        color: #fff;
        font-weight: 700;
        text-align: center;
        text-decoration: none;
    }

    .vitrine-botao-filtrar {
        display: inline-flex;
        align-items: center;
        padding: 0.4rem 0.9rem;
        border: 1px solid var(--site-linha);
        border-radius: 8px;
        background: #fff;
        color: var(--site-texto);
        font-weight: 600;
        text-decoration: none;
    }
}

.vitrine-secao {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.vitrine-secao h2 {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--site-texto);
}

.vitrine-secao h2 span {
    color: var(--site-destaque);
}

.vitrine-secao-total {
    color: var(--site-texto-suave);
}

.vitrine-vazia {
    padding: 3rem 1rem;
    border-radius: 12px;
    background: #fff;
    color: var(--site-texto-suave);
    text-align: center;
}

/* 3 colunas; 2 com a tela média (a barra lateral ocupa espaço) e no tablet; 1 no celular. */
.vitrine-grade {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.5rem;
}

@media (max-width: 1199px) {
    .vitrine-grade {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 575px) {
    .vitrine-grade {
        grid-template-columns: minmax(0, 1fr);
    }
}

.vitrine-card {
    display: flex;
    flex-direction: column;
    background: var(--site-cartao);
    border: 1px solid var(--site-linha);
    border-radius: 12px;
    overflow: hidden;
    transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.vitrine-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08);
}

/* A caixa da foto tem altura fixa (4:3) e a imagem se ajusta dentro dela, sem deformar nem esticar o card. */
.vitrine-card-foto {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 4 / 3;
    background: #fff;
    border-bottom: 1px solid var(--site-linha);
    overflow: hidden;
}

.vitrine-card-foto img {
    position: absolute;
    inset: 0.75rem;
    width: calc(100% - 1.5rem);
    height: calc(100% - 1.5rem);
    object-fit: contain;
}

.vitrine-sem-foto {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    color: #b0b7c0;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.vitrine-sem-foto i {
    font-size: 2.5rem;
}

.vitrine-card-texto {
    flex: 1;
    padding: 1rem 1.25rem 0.75rem;
}

.vitrine-card-industria {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--site-texto-suave);
}

.vitrine-card-nome {
    display: block;
    margin: 0.25rem 0 0.75rem;
    font-size: 1.2rem;
    font-weight: 800;
    line-height: 1.25;
    color: var(--site-texto);
    text-decoration: none;
}

.vitrine-card-nome:hover {
    color: var(--site-principal);
}

/* Os dados em linhas, rótulo à esquerda e valor à direita, como as especificações do mockup. */
.vitrine-card-dado {
    margin: 0 0 0.75rem;
    border-top: 1px solid var(--site-linha);
}

.vitrine-card-dado div {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.4rem 0;
    font-size: 0.9rem;
}

.vitrine-card-dado dt {
    font-weight: 400;
    color: var(--site-texto-suave);
}

.vitrine-card-dado dd {
    margin: 0;
    font-weight: 700;
    text-align: right;
}

.vitrine-card-preco {
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--site-principal);
}

.vitrine-card-aviso {
    margin-top: 0.4rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: #8a6100;
}

.vitrine-card-acao {
    padding: 0 1.25rem 1.25rem;
}

.vitrine-botao-adicionar {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 0;
    border-radius: 8px;
    background: var(--site-destaque);
    color: #fff;
    font-weight: 700;
}

.vitrine-botao-adicionar:hover {
    background: var(--site-destaque-escura);
}

.vitrine-botao-adicionar:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.vitrine-no-pedido {
    margin-bottom: 0.35rem;
    font-size: 0.85rem;
    font-weight: 700;
    color: #2e7d32;
}

/* No card e na página do produto, o − [n] + tem a altura do botão "Adicionar". */
.vitrine-card-acao .pedido-quantidade,
.vitrine-produto-acao .pedido-quantidade {
    height: 46px;
}

.vitrine-card-acao .pedido-quantidade button,
.vitrine-produto-acao .pedido-quantidade button {
    width: 56px;
    font-size: 1.25rem;
}

/* Página do produto. */
.vitrine-trilha {
    padding-top: 1.25rem;
    color: var(--site-texto-suave);
    font-size: 0.9rem;
}

.vitrine-trilha a {
    color: var(--site-texto-suave);
}

.vitrine-trilha span {
    margin: 0 0.35rem;
}

.vitrine-produto {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: 2rem;
    align-items: start;
}

@media (max-width: 991px) {
    .vitrine-produto {
        grid-template-columns: minmax(0, 1fr);
    }
}

.vitrine-produto-foto {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 4 / 3;
    border: 1px solid var(--site-linha);
    border-radius: 12px;
    background: #fff;
    overflow: hidden;
}

.vitrine-produto-foto img {
    position: absolute;
    inset: 1rem;
    width: calc(100% - 2rem);
    height: calc(100% - 2rem);
    object-fit: contain;
}

.vitrine-produto-miniaturas {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
    gap: 0.75rem;
    margin-top: 0.75rem;
}

.vitrine-produto-miniaturas img {
    width: 100%;
    aspect-ratio: 4 / 3;
    border: 1px solid var(--site-linha);
    border-radius: 8px;
    background: #fff;
    object-fit: contain;
}

.vitrine-produto-painel {
    padding: 1.5rem;
    border: 1px solid var(--site-linha);
    border-radius: 12px;
    background: #fff;
}

.vitrine-produto-nome {
    margin: 0.25rem 0 1rem;
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--site-texto);
}

.vitrine-produto-acao {
    margin-top: 1.25rem;
}

.vitrine-produto-texto {
    margin-top: 2rem;
    padding: 1.5rem;
    border: 1px solid var(--site-linha);
    border-radius: 12px;
    background: #fff;
}

.vitrine-produto-texto h2 {
    margin-bottom: 0.75rem;
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--site-texto);
}

.vitrine-produto-texto h2:not(:first-child) {
    margin-top: 1.5rem;
}

/* O − [n] +: os três controles numa caixa só. */
.pedido-quantidade {
    display: flex;
    align-items: stretch;
    border: 1px solid #ced4da;
    border-radius: 0.375rem;
    overflow: hidden;
    background: #fff;
}

.pedido-quantidade form {
    display: flex;
    margin: 0;
}

.pedido-quantidade form:nth-child(2) {
    flex: 1;
}

.pedido-quantidade button {
    width: 40px;
    border: 0;
    background: #f1f3f5;
    color: var(--cor-marca);
    font-size: 1rem;
}

.pedido-quantidade button:hover {
    background: #e2e6ea;
}

.pedido-quantidade input {
    width: 100%;
    min-width: 0;
    border: 0;
    text-align: center;
    font-weight: 700;
    -moz-appearance: textfield;
}

.pedido-quantidade input::-webkit-inner-spin-button,
.pedido-quantidade input::-webkit-outer-spin-button {
    -webkit-appearance: none;
}

.pedido-contador[hidden],
.pedido-barra-celular[hidden] {
    display: none !important;
}

/* Gaveta lateral "Meu pedido" */
.pedido-gaveta {
    position: fixed;
    top: 0;
    right: -440px;
    z-index: 1050;
    display: flex;
    flex-direction: column;
    width: 420px;
    max-width: 100%;
    height: 100%;
    background: #fff;
    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.18);
    transition: right 0.25s ease;
}

.pedido-gaveta:target {
    right: 0;
}

.pedido-sombra {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1040;
    background: rgba(0, 0, 0, 0.45);
}

.pedido-gaveta:target + .pedido-sombra {
    display: block;
}

.pedido-gaveta-topo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    background: var(--cor-marca);
    color: #fff;
}

.pedido-gaveta-topo h2 {
    margin: 0;
    font-size: 1.15rem;
    color: #fff;
}

.pedido-gaveta-topo a {
    color: #fff;
    font-size: 1.2rem;
}

.pedido-gaveta-conteudo {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-height: 0;
}

.pedido-gaveta-corpo {
    flex: 1;
    overflow-y: auto;
    padding: 0.5rem 1.25rem;
}

.pedido-gaveta-industria {
    margin: 0.75rem 0 0.25rem;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #6c757d;
}

.pedido-gaveta-vazia {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 3rem 0;
    color: #6c757d;
}

.pedido-gaveta-vazia i {
    font-size: 2rem;
}

.pedido-gaveta-rodape {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1rem 1.25rem;
    border-top: 1px solid #e9ecef;
}

.pedido-continuar {
    text-align: center;
    color: #6c757d;
}

.pedido-item {
    display: flex;
    gap: 0.75rem;
    padding: 0.6rem 0;
    border-bottom: 1px solid #f1f3f5;
}

.pedido-item-imagem {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border: 1px solid #e9ecef;
    border-radius: 0.375rem;
    background: #f8f9fa;
    color: #adb5bd;
    overflow: hidden;
}

.pedido-item-imagem img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.pedido-item-informacao {
    flex: 1;
    min-width: 0;
}

.pedido-item-nome {
    margin-bottom: 0.35rem;
    font-weight: 600;
}

.pedido-item-linha {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.pedido-item-linha .pedido-quantidade {
    width: 140px;
}

.pedido-item-linha form {
    margin: 0;
}

.pedido-item-remover {
    border: 0;
    background: none;
    color: #d9534f;
    font-size: 1.05rem;
}

/* Barra do celular: o pedido sempre à mão. */
.pedido-barra-celular {
    display: none;
}

@media (max-width: 767px) {
    .pedido-barra-celular {
        position: fixed;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 1030;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0.75rem 1rem;
        background: var(--cor-marca);
        color: #fff;
    }

    .pedido-barra-celular a {
        padding: 0.45rem 1rem;
        border-radius: 0.375rem;
        background: #fff;
        color: var(--cor-marca);
        font-weight: 700;
        text-decoration: none;
    }

    /* A barra não pode cobrir o fim da página. */
    .vitrine-grade {
        margin-bottom: 4rem;
    }
}

/* Tela "Meu pedido": um produto por linha; no celular, os campos descem. */
.pedido-linha {
    display: grid;
    grid-template-columns: 56px minmax(0, 2fr) 120px minmax(0, 3fr) auto;
    align-items: end;
    gap: 0.75rem;
    padding: 0.75rem 0;
    border-bottom: 1px solid #f1f3f5;
}

.pedido-linha:last-child {
    border-bottom: 0;
}

.pedido-linha-nome {
    align-self: center;
}

.pedido-linha-indisponivel .pedido-linha-nome {
    color: #6c757d;
}

@media (max-width: 767px) {
    .pedido-linha {
        grid-template-columns: 56px minmax(0, 1fr) auto;
    }

    .pedido-linha-quantidade,
    .pedido-linha-observacao {
        grid-column: 1 / -1;
    }

    .pedido-linha-remover {
        grid-row: 1;
        grid-column: 3;
        align-self: center;
    }
}

/* Aviso rápido depois de gravar sem recarregar a página; some sozinho. */
.aviso-rapido {
    position: fixed;
    bottom: 24px;
    left: 50%;
    z-index: 1060;
    padding: 0.7rem 1.25rem;
    border-radius: 24px;
    background: rgba(38, 38, 38, 0.94);
    color: #fff;
    font-size: 0.875rem;
    pointer-events: none;
    transform: translateX(-50%);
    animation: aviso-rapido-some 0.3s ease 2s forwards;
}

@keyframes aviso-rapido-some {
    to {
        opacity: 0;
        visibility: hidden;
    }
}

/* Orçamento (M1.2.3): colunas estreitas para quantidade e valores, sem apertar o produto. */
.tabela-orcamento-item {
    min-width: 720px;
}

.tabela-orcamento-item .coluna-quantidade {
    width: 120px;
}

.tabela-orcamento-item .coluna-valor {
    width: 160px;
}

/* Impressão do orçamento: folha branca, sem menu; o navegador salva em PDF. */
body.impressao {
    background: #fff;
    color: #212529;
}

.impressao-pagina {
    max-width: 900px;
    margin: 0 auto;
    padding: 24px 16px;
}

.impressao-acao {
    margin-bottom: 24px;
    text-align: right;
}

.impressao-cabecalho {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    padding-bottom: 16px;
    margin-bottom: 16px;
    border-bottom: 2px solid #1f2e40;
}

.impressao-logo {
    max-height: 56px;
    max-width: 200px;
}

.impressao-titulo {
    font-size: 1.4rem;
    margin-bottom: 4px;
}

.impressao-rotulo {
    font-size: 0.75rem;
    text-transform: uppercase;
    color: #6c757d;
}

.impressao-rodape {
    margin-top: 24px;
    font-size: 0.8rem;
    color: #6c757d;
}

@media print {
    .impressao-pagina {
        max-width: none;
        padding: 0;
    }
}

/* ---------------------------------------------------------------------------
   Funil (M1.2.7): uma linha por etapa, todas da mesma altura, como uma
   planilha. À esquerda a etapa na cor da fase, no meio até 10 cards pequenos
   (também na cor da fase) que rolam para o lado dentro da linha, e à direita
   o "Ver na lista", sempre à vista.
   --------------------------------------------------------------------------- */
.card.funil-quadro {
    overflow: hidden;
}

.funil-linha {
    display: flex;
    align-items: stretch;
    height: 4rem;
    border-bottom: 1px solid #e3e6ea;
}

.funil-linha:last-child {
    border-bottom: 0;
}

.funil-etapa {
    flex: 0 0 15rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0 0.75rem;
    min-width: 0;
    font-size: 0.85rem;
}

.funil-etapa-nome {
    overflow: hidden;
    font-weight: 700;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.funil-marca {
    display: inline-block;
    min-width: 1.6rem;
    margin-right: 0.25rem;
    padding: 0 0.3rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.55);
    text-align: center;
}

.funil-etapa-total {
    white-space: nowrap;
}

.funil-linha-vazia .funil-etapa-total {
    opacity: 0.6;
}

.funil-faixa {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    min-width: 0;
    padding: 0 0.5rem;
    overflow-x: auto;
    overflow-y: hidden;
}

.funil-card {
    position: relative;
    flex: 0 0 11rem;
    padding: 0.3rem 0.5rem;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 6px;
    font-size: 0.75rem;
    line-height: 1.3;
}

.funil-card:hover {
    filter: brightness(0.95);
}

.funil-card a {
    color: inherit;
}

/* O nome do produtor abre o histórico dele; fica por cima do link do card inteiro (stretched-link). */
.funil-card-produtor {
    position: relative;
    z-index: 2;
    display: block;
    overflow: hidden;
    font-weight: 700;
    text-transform: uppercase;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.funil-card-detalhe {
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    text-decoration: none;
}

.funil-mais {
    flex: 0 0 auto;
    padding: 0.3rem 0.6rem;
    border: 1px dashed #adb5bd;
    border-radius: 6px;
    font-size: 0.75rem;
    white-space: nowrap;
}

.funil-acao {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    padding: 0 0.75rem;
}

/* No celular, a etapa mais estreita: a faixa de cards continua rolando para o lado. */
@media (max-width: 767.98px) {
    .funil-etapa {
        flex-basis: 8.5rem;
        padding: 0 0.5rem;
        font-size: 0.75rem;
    }

    .funil-acao {
        padding: 0 0.4rem;
    }
}

/* ---------------------------------------------------------------------------
   Cores das fases do negócio (M1.2.7): uma cor por grupo de etapas
   (Oportunidade::LISTA_FASE), na lista, no funil e nos selos, com a legenda
   em oportunidade/legenda. Cores claras com texto escuro nas fases em
   andamento; verde e cinza cheios para concluído e cancelado.
   --------------------------------------------------------------------------- */
.etapa-cor-registro { background: #e9ecef; color: #495057; }
.etapa-cor-orcamento { background: #cfe2ff; color: #084298; }
.etapa-cor-negociacao { background: #e2d9f3; color: #59359a; }
.etapa-cor-fechamento { background: #ffe5d0; color: #984c0c; }
.etapa-cor-entrega { background: #c9f0e4; color: #0d6e54; }
.etapa-cor-concluida { background: #198754; color: #fff; }
.etapa-cor-cancelada { background: #6c757d; color: #fff; }

/*
   A primeira coluna da lista: o número da etapa na cor da fase, com o nome no
   title. A tabela do Bootstrap pinta toda célula (e escurece no hover): aqui a
   cor da fase vence, com o seletor mais forte e sem a sombra do hover.
*/
.etapa-celula {
    width: 2.75rem;
    font-weight: 700;
    text-align: center;
}

.table > tbody > tr > td.etapa-celula { box-shadow: none; }
.table > tbody > tr > td.etapa-cor-registro { background-color: #e9ecef; color: #495057; }
.table > tbody > tr > td.etapa-cor-orcamento { background-color: #cfe2ff; color: #084298; }
.table > tbody > tr > td.etapa-cor-negociacao { background-color: #e2d9f3; color: #59359a; }
.table > tbody > tr > td.etapa-cor-fechamento { background-color: #ffe5d0; color: #984c0c; }
.table > tbody > tr > td.etapa-cor-entrega { background-color: #c9f0e4; color: #0d6e54; }
.table > tbody > tr > td.etapa-cor-concluida { background-color: #198754; color: #fff; }
.table > tbody > tr > td.etapa-cor-cancelada { background-color: #6c757d; color: #fff; }

.etapa-legenda-item {
    display: inline-block;
    margin: 0 0.35rem 0.35rem 0;
    padding: 0.2rem 0.6rem;
    border-radius: 4px;
    font-size: 0.8rem;
}

/* ---------------------------------------------------------------------------
   "Sua vez" e "Próximo passo" (M1.2.7): aviso claro, legível em qualquer tema
   (o alert-primary do Mazer fica azul-escuro com o link escuro).
   --------------------------------------------------------------------------- */
.aviso-vez {
    background: #eef4ff;
    border: 1px solid #c5d6fb;
    border-left: 6px solid #435ebe;
    color: #1f2e40;
}

.aviso-vez a:not(.btn) {
    color: #1d4ed8;
    font-weight: 600;
    text-decoration: underline;
}