/* =====================================================================
   Xingu Atlas — CSS de override (NOSSO arquivo, não é do template)

   Carregado DEPOIS do material-dashboard.css, então por cascata/especificidade
   ele sobrescreve o estilo do template sem precisar editar o template.

   PALETA DA MARCA (Xingu Atlas). O accent PRIMÁRIO do Material (originalmente
   rosa #e91e63) foi trocado pelo TEAL da marca; a sidebar escura, pelo NAVY.
     - primário (teal):  #0C7278 (= rgb 12,114,120). Gradiente: aqua -> teal.
     - navy (marca):     #0E223E — sidebar, superfícies escuras, títulos.
   Verde/vermelho SEMÂNTICOS (sucesso/erro) continuam vindo do tema.

   Dica: se um dia mudar a cor da marca, troque os valores abaixo (ou use as
   variáveis --atlas-* logo a seguir).
   ===================================================================== */

/* Variáveis da identidade Xingu Atlas (disponíveis pra estilos futuros). */
:root {
    --atlas-navy: #0E223E;
    --atlas-teal: #0C7278;
    --atlas-aqua: #5EA6A6;
    --atlas-blue-gray: #6E7B8A;
    --atlas-light-gray: #D2D6DA;
    --atlas-graphite: #2D323B;
    --atlas-white: #F8F9F9;
}

/* ---- Sidebar / superfícies escuras: cinza do tema -> NAVY da marca ---- */
.bg-gradient-dark {
    background-image: linear-gradient(195deg, #1B3B5F 0%, #0E223E 100%) !important;
}

/* ---- Gradiente primário (botões cheios, item ativo do menu, badges,
        ícones de card, swatch "primary" do painel de config) ---- */
.bg-gradient-primary {
    background-image: linear-gradient(195deg, #5EA6A6 0%, #0C7278 100%) !important;
}

/* ---- Cor sólida primária ---- */
.bg-primary {
    background-color: #0C7278 !important;
}

/* ---- Texto primário (links e rótulos que usavam rosa) ---- */
.text-primary {
    color: #0C7278 !important;
}

/* ---- Texto com gradiente (ícones/números "text-gradient text-primary").
        O template já faz o recorte no texto; aqui só trocamos a cor. ---- */
.text-primary.text-gradient,
.text-gradient.text-primary {
    background-image: linear-gradient(310deg, #5EA6A6 0%, #0C7278 100%) !important;
}

/* ---- Sombra primária (cards/ícones com "shadow-primary") ---- */
.shadow-primary {
    box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.14),
                0 7px 10px -5px rgba(12, 114, 120, 0.4) !important;
}

/* ---- Botão preenchido primário: sombra e estados ---- */
.btn.bg-gradient-primary {
    box-shadow: 0 3px 3px 0 rgba(12, 114, 120, 0.15),
                0 3px 1px -2px rgba(12, 114, 120, 0.2),
                0 1px 5px 0 rgba(12, 114, 120, 0.15) !important;
}
.btn.bg-gradient-primary:hover {
    box-shadow: 0 14px 26px -12px rgba(12, 114, 120, 0.4),
                0 4px 23px 0 rgba(0, 0, 0, 0.12),
                0 8px 10px -5px rgba(12, 114, 120, 0.2) !important;
}

/* ---- Botão contornado primário (ex.: "Documentação", "Construtor Online") ---- */
.btn-outline-primary {
    color: #0C7278 !important;
    border-color: #0C7278 !important;
}
.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active,
.btn-outline-primary.active {
    background-color: #0C7278 !important;
    border-color: #0C7278 !important;
    color: #fff !important;
}

/* ---- Item ativo da barra lateral (reforço da sombra em laranja) ---- */
.sidenav .navbar-nav .nav-link.active {
    box-shadow: 0 3px 5px 0 rgba(12, 114, 120, 0.2) !important;
}

/* ---- Checkboxes e switches marcados (ficavam rosa quando ligados) ---- */
.form-check-input:checked {
    background-color: #0C7278 !important;
    border-color: #0C7278 !important;
}

/* ---- Campos de texto em foco (rótulo e borda do input-group-outline) ---- */
.input-group-outline.is-focused .form-label,
.input-group-outline .form-control:focus ~ .form-label {
    color: #0C7278 !important;
}
.input-group-outline.is-focused .form-control,
.input-group-outline .form-control:focus {
    border-color: #0C7278 !important;
}

/* ---- Paginação (usada nas tabelas Livewire do Bloco C em diante) ---- */
.pagination .page-item.active .page-link,
.pagination.pagination-primary .page-item.active .page-link {
    background-image: linear-gradient(195deg, #5EA6A6 0%, #0C7278 100%) !important;
    border: none !important;
    color: #fff !important;
}

/* =====================================================================
   Sincronização com o Upper (componente global App\Livewire\Sincronizacao)
   ===================================================================== */

/* Alpine: esconde elementos com x-cloak até o Alpine inicializar (evita
   "flash" da modal/fab no carregamento). */
[x-cloak] { display: none !important; }

/* =====================================================================
   Seta (caret) dos submenus da barra lateral
   O material-dashboard.css desenha a seta via ::after com a fonte
   'Font Awesome 5 Free' (content "\f107"). Este projeto NÃO carrega o FA5
   (usa o kit do FA6 + Material Icons), então a família não existe e a seta
   vira um quadrado de "erro". Aqui trocamos pra Material Icons Round (já
   carregado). A rotação em [aria-expanded="true"] continua vindo do template.
   ===================================================================== */
.navbar-vertical .navbar-nav .nav-link[data-bs-toggle="collapse"]::after {
    font-family: 'Material Icons Round' !important;
    font-weight: normal !important;
    content: 'expand_more' !important;
}

/* =====================================================================
   Checkbox de seleção (tabela de Produtos)
   O tema deixa .form-check-input invisível fora do wrapper .form-check
   (appearance:none sem borda). Aqui usamos a caixa NATIVA do navegador,
   sempre visível, com a cor da marca no check.
   ===================================================================== */
.selecao-check {
    -webkit-appearance: auto !important;
    appearance: auto !important;
    width: 16px;
    height: 16px;
    opacity: 1 !important;
    cursor: pointer;
    accent-color: #0C7278;
    flex-shrink: 0;
    margin-top: 0;
}

/* Overlay da modal de sincronização (não usa o modal do Bootstrap pra ter
   controle total via Alpine e conviver bem com o Livewire). */
.sync-overlay {
    position: fixed;
    inset: 0;
    z-index: 1080;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}
.sync-card {
    width: 100%;
    max-width: 520px;
    border-radius: 1rem;
}

/* Mini-widget flutuante (canto inferior direito) quando a modal está fechada. */
.sync-fab {
    position: fixed;
    right: 1.5rem;
    bottom: 1.5rem;
    z-index: 1040;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    border: none;
    border-radius: 2rem;
    padding: 0.6rem 1.1rem 0.6rem 0.75rem;
    color: #fff;
    background-image: linear-gradient(195deg, #5EA6A6 0%, #0C7278 100%);
    box-shadow: 0 6px 18px -4px rgba(0, 0, 0, 0.35);
    cursor: pointer;
    transition: transform 0.15s ease;
}
.sync-fab:hover { transform: translateY(-2px); }
.sync-fab.is-done  { background-image: linear-gradient(195deg, #66BB6A 0%, #43A047 100%); }
.sync-fab.is-error { background-image: linear-gradient(195deg, #EF5350 0%, #E53935 100%); }

/* "Bolinha" com a % dentro do fab. */
.sync-fab-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.25);
    font-weight: 700;
    font-size: 0.8rem;
}
/* Anel girando (indeterminado) enquanto sincroniza. */
.sync-spin {
    width: 1rem;
    height: 1rem;
    border: 2px solid rgba(255, 255, 255, 0.5);
    border-top-color: #fff;
    border-radius: 50%;
    animation: sync-spin 0.8s linear infinite;
}
@keyframes sync-spin { to { transform: rotate(360deg); } }

/* ==================== NÉVOA GLOBAL DE CARREGAMENTO ==================== */
/* Um único overlay para o sistema inteiro (ver public/js/app-loading.js).
   Fica escondido por padrão e ganha .ativo enquanto houver requisição em voo. */
.app-loading {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: none;
    /* A névoa AVISA, e não bloqueia (AC-1829). Ela cobre a tela inteira em toda
       requisição de digitação/seleção — inclusive a busca de cliente do documento, que é
       wire:model.live.debounce.400ms. Sem esta linha ela intercepta o clique: medido no
       navegador, com a névoa ativa o elemento sob o ponto do primeiro cliente da lista
       era ELA, não o botão. O sintoma em produção era "depois de muito clicar consigo
       selecionar algum". */
    pointer-events: none;
    align-items: center;
    justify-content: center;
    background: rgba(14, 34, 62, 0.32); /* navy da marca */
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}
.app-loading.ativo {
    display: flex;
}
.app-loading-spinner {
    width: 2.75rem;
    height: 2.75rem;
    border: 3px solid rgba(255, 255, 255, 0.35);
    border-top-color: #5EA6A6; /* aqua da marca */
    border-radius: 50%;
    animation: app-loading-giro 0.7s linear infinite;
}
@keyframes app-loading-giro { to { transform: rotate(360deg); } }

/* Sem animação para quem pediu menos movimento: a névoa continua, o giro não. */
@media (prefers-reduced-motion: reduce) {
    .app-loading-spinner { animation: none; border-top-color: #5EA6A6; }
}

/* ==================== AGENDA ==================== */
.agenda-pagina { width: 100%; max-width: 100%; overflow-x: clip; }
/* Drawer lateral de detalhe/criação de atividade (Alpine + Livewire, mesmo padrão
   da modal de sync: controle total sem depender do offcanvas do Bootstrap). */
.agenda-drawer-overlay {
    position: fixed;
    inset: 0;
    z-index: 1080;
    background: rgba(0, 0, 0, 0.4);
}
.agenda-drawer {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 1081;
    width: 100%;
    max-width: 420px;
    height: 100%;
    background: #fff;
    box-shadow: -8px 0 24px rgba(0, 0, 0, 0.15);
    padding: 1.5rem;
    /* Cabeçalho fixo + corpo rolável + barra de ações fixa. */
    display: flex;
    flex-direction: column;
}
/* O corpo é a única parte que rola — e só na vertical.
   O .row do Bootstrap tem margem lateral NEGATIVA (metade da gutter); dentro de
   um painel com padding isso estoura ~12px para cada lado e cria barra de rolagem
   horizontal. Prender o eixo X aqui resolve para todos os .row e dl.row do painel
   sem mexer nas gutters. */
.agenda-sheet-corpo {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    min-height: 0;
    overscroll-behavior: contain;
}
/* O próprio painel também não rola para o lado. */
.agenda-drawer,
.agenda-submodal { overflow-x: hidden; }
/* Cinto de segurança: conteúdo largo (texto sem espaço, URL, observação colada)
   quebra em vez de empurrar a largura do painel. */
.agenda-drawer, .agenda-drawer dd, .agenda-drawer dt,
.agenda-submodal { overflow-wrap: anywhere; }
.agenda-sheet-acoes {
    flex: 0 0 auto;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding-top: 0.85rem;
    margin-top: 0.85rem;
    border-top: 1px solid var(--atlas-light-gray);
}
body.agenda-sheet-aberta { overflow: hidden; }
.agenda-btn-icone {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.75rem;
    min-height: 2.75rem;
}
/* Botão de transição: cor do estado de destino, com texto — nunca só cor. */
.agenda-btn-transicao {
    background: var(--estado-cor);
    color: #fff;
    border: none;
    font-weight: 600;
}
.agenda-btn-transicao:hover { color: #fff; filter: brightness(1.08); }

/* Pílula de atividade nas vistas semana/mês. */
.agenda-chip { line-height: 1.2; overflow: hidden; }
.agenda-mes-cel { min-width: 0; }
.text-xxs { font-size: 0.65rem; }

/* ---- Barra de dias e seletor de vista (celular) ---- */
.agenda-barra-topo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.6rem;
}
.agenda-dia-titulo { display: flex; align-items: baseline; gap: 0.6rem; min-width: 0; }
.agenda-dia-mes {
    font-size: 1rem;
    font-weight: 600;
    color: var(--atlas-navy);
    /* Sem `capitalize`: ele maiusculiza CADA palavra, e "qui, 27 de ago" virava
       "Qui, 27 De Ago". Quem levanta a primeira letra é o Blade. */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.agenda-btn-hoje {
    border: 1px solid var(--atlas-light-gray);
    background: #fff;
    color: var(--atlas-teal);
    font-size: 0.7rem;
    font-weight: 600;
    padding: 0.15rem 0.5rem;
    border-radius: 0.3rem;
}
/* Segmented control: substitui os 4 botões da toolbar do FullCalendar. */
.agenda-vistas {
    display: inline-flex;
    background: #eceff1;
    border-radius: 0.4rem;
    padding: 2px;
    flex: 0 0 auto;
}
.agenda-vistas button {
    border: none;
    background: transparent;
    color: var(--atlas-graphite);
    font-size: 0.72rem;
    font-weight: 600;
    padding: 0.3rem 0.6rem;
    border-radius: 0.3rem;
}
.agenda-vistas button.ativo { background: #fff; color: var(--atlas-teal); box-shadow: 0 1px 2px rgba(0,0,0,.12); }

.agenda-filtros,
.agenda-filtros-controles { min-width: 0; max-width: 100%; }
.agenda-filtros-controles {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}
/* `.agenda-btn-filtros` (o cabeçalho do acordeão de filtros) saiu junto com o
   acordeão — quem abre os filtros agora é `.agenda-btn-filtros-icone`, na barra
   do dia, e o conteúdo vira folha sobreposta. */

.agenda-tira {
    display: flex;
    gap: 0.35rem;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    padding-bottom: 0.25rem;
    -webkit-overflow-scrolling: touch;
}
.agenda-tira::-webkit-scrollbar { display: none; }
.agenda-tira-dia {
    flex: 0 0 auto;
    scroll-snap-align: center;
    width: 3rem;
    padding: 0.4rem 0;
    border: 1px solid transparent;
    border-radius: 0.55rem;
    background: #fff;
    color: var(--atlas-graphite);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
}
.agenda-tira-semana { font-size: 0.62rem; text-transform: uppercase; opacity: 0.7; }
.agenda-tira-numero { font-size: 1rem; font-weight: 600; line-height: 1.1; }
/* CARGA do dia. Substitui o ponto de 4px, que dizia "tem algo" e obrigava a abrir o
   dia para descobrir se era uma visita ou seis. O traço ocupa o mesmo espaço do
   número, então o dia vazio não faz a tira pular de altura. */
.agenda-tira-carga {
    font-size: 0.62rem;
    font-weight: 700;
    line-height: 0.9rem;
    min-width: 1rem;
    height: 0.9rem;
    border-radius: 1rem;
    background: #f5f6f7;
    color: #c6cbd0;
}
.agenda-tira-carga.tem { background: #eff1f3; color: var(--atlas-blue-gray); }
.agenda-tira-dia.hoje { border-color: var(--atlas-aqua); }
.agenda-tira-dia.ativo { background: var(--atlas-teal); color: #fff; border-color: var(--atlas-teal); }
.agenda-tira-dia.ativo .agenda-tira-carga { background: rgba(255,255,255,.25); color: #fff; }
.agenda-tira-dia.ativo .agenda-tira-carga.tem { background: #fff; color: var(--atlas-teal); }

/* ---- Chip de vencidas ---- */
.agenda-chip-vencidas {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    border: 1px solid var(--atlas-light-gray);
    background: #fff;
    color: var(--atlas-graphite);
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.3rem 0.7rem;
    border-radius: 2rem;
}
.agenda-chip-vencidas .agenda-chip-contador {
    background: #f4433520;
    color: #c62828;
    border-radius: 1rem;
    padding: 0 0.4rem;
    font-size: 0.7rem;
}
.agenda-chip-vencidas.ativo { background: #f44335; border-color: #f44335; color: #fff; }
.agenda-chip-vencidas.ativo .agenda-chip-contador { background: rgba(255,255,255,.25); color: #fff; }

/* ---- Cards da lista do dia ---- */
.agenda-titulo-vencidas { color: #c62828; font-weight: 600; }
.agenda-card {
    display: flex;
    align-items: stretch;
    background: #fff;
    border: 1px solid var(--atlas-light-gray);
    border-left: 4px solid var(--estado-cor);
    border-radius: 0.5rem;
    margin-bottom: 0.5rem;
    overflow: hidden;
}
.agenda-card-corpo {
    flex: 1 1 auto;
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
    text-align: left;
    background: none;
    border: none;
    padding: 0.7rem 0.75rem;
    min-width: 0;
}
.agenda-card-hora {
    flex: 0 0 3rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1.15;
}
.agenda-hora { font-size: 1.05rem; font-weight: 600; color: var(--atlas-navy); }
.agenda-hora-fim,
.agenda-hora-vazia { font-size: 0.68rem; color: var(--atlas-blue-gray); }
.agenda-card-texto { min-width: 0; flex: 1 1 auto; }
.agenda-card-cliente {
    display: block;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--atlas-navy);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.agenda-card-sub {
    display: block;
    font-size: 0.75rem;
    color: var(--atlas-blue-gray);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.agenda-card-selos { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-top: 0.35rem; }
/* Estado sempre em texto, além da cor da borda (16.1). */
.agenda-selo-estado {
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: var(--estado-cor);
}
.agenda-selo-estado-grande {
    display: inline-block;
    font-size: 0.7rem;
    background: var(--estado-cor);
    color: #fff;
    padding: 0.15rem 0.5rem;
    border-radius: 0.3rem;
}
.agenda-selo {
    font-size: 0.63rem;
    font-weight: 600;
    padding: 0.05rem 0.35rem;
    border-radius: 0.25rem;
}
.agenda-selo-alta { background: #fdecea; color: #c62828; }
.agenda-selo-aviso { background: #fff4e0; color: #8a5a00; }
/* Selos de contexto do estado: dizem o quanto/por quê, não o quê. */
.agenda-selo-andamento { background: #e8f0fe; color: #1a73e8; }
.agenda-selo-venda { background: #e8f5e9; color: #2e7d32; }
.agenda-selo-motivo { background: #eff1f3; color: var(--atlas-blue-gray); }

/* AÇÃO SEGUINTE — faixa no rodapé do card, não botão encostado à direita.
   Encostada, ela cabia em 0.72rem e espremia quando o nome do cliente era longo;
   aqui ocupa a largura toda com 2.75rem de altura, que é alvo de polegar. O card
   fica ~46px mais alto: menos cards por tela, em troca de acertar o toque andando. */
.agenda-card-acoes {
    display: flex;
    gap: 1px;
    background: #edf0f2;
    border-top: 1px solid #edf0f2;
}
.agenda-btn-acao {
    flex: 1 1 0;
    min-height: 2.75rem;
    background: #fff;
    border: none;
    color: var(--atlas-teal);
    font-weight: 600;
    font-size: 0.85rem;
    padding: 0.35rem 0.7rem;
    white-space: nowrap;
}
.agenda-btn-acao:hover { background: var(--atlas-teal); color: #fff; }
/* Fechar visita é a única ação que ENCERRA — vai cheia, para não ser confundida
   com "iniciar" no meio de uma lista de cards parecidos. */
.agenda-btn-acao-forte { background: var(--estado-cor, var(--atlas-teal)); color: #fff; }
.agenda-btn-acao-forte:hover { color: #fff; filter: brightness(1.08); }
/* Reagendar/Justificar são a saída, não o caminho: pesam menos que a ação normal. */
.agenda-btn-acao-fraco { color: var(--atlas-blue-gray); font-size: 0.8rem; }
.agenda-btn-acao-fraco:hover { background: var(--atlas-blue-gray); color: #fff; }
.agenda-card-acoes-secundaria .agenda-btn-acao { min-height: 2.5rem; }

/* ---- Grupos da lista do dia (manhã / tarde / sem hora) ---- */
.agenda-grupo + .agenda-grupo { margin-top: 1rem; }
.agenda-grupo-titulo {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--atlas-blue-gray);
}
.agenda-grupo-linha { flex: 1 1 auto; height: 1px; background: var(--atlas-light-gray); opacity: 0.7; }
.agenda-grupo-contador { font-variant-numeric: tabular-nums; }

/* Quadradinho de cor da legenda / lista de não agendadas. */
.agenda-legenda-cor {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 2px;
    flex: 0 0 auto;
}

/* ---- Cabeçalho do celular: FICA PRESO no topo ----
   A lista do dia é mais alta que a tela. Rolando até a quarta visita, o dia aberto,
   o "Hoje" e as vistas saíam de cena — justamente os controles de quem se perdeu.
   `top: 0` basta porque a topbar do app já rola junto com a página. */
.agenda-cabecalho-mobile {
    position: sticky;
    top: 0;
    z-index: 1020;
    margin: 0 -0.75rem 0.75rem;
    /* 1.25rem, e não os 0.75rem do gutter do tema: a faixa sangra de ponta a
       ponta, e com o recuo do container o título encostava na borda branca — o
       dia à esquerda e o seletor de vista à direita ficavam a 12px da tela. Os
       8px de diferença para os cards de baixo são de propósito; cabeçalho que
       ocupa a largura inteira precisa de mais ar que o corpo. */
    padding: 0.6rem 1.25rem 0;
    background: #fff;
    border-bottom: 1px solid #e6e9ec;
}
/* Linha fina de carregamento: no celular o spinner do cabeçalho interno não existe
   (ele é d-none), então trocar de dia não dava retorno nenhum (P-012). */
.agenda-carregando {
    height: 2px;
    margin: 0 -0.75rem;
    background: linear-gradient(90deg, transparent, var(--atlas-teal), transparent);
    background-size: 40% 100%;
    background-repeat: no-repeat;
    animation: agenda-carregando 1s linear infinite;
}
@keyframes agenda-carregando {
    from { background-position: -40% 0; }
    to { background-position: 140% 0; }
}
@media (prefers-reduced-motion: reduce) {
    .agenda-carregando { animation: none; background-size: 100% 100%; opacity: 0.6; }
}

/* ---- Barra do dia: resumo, exceções e a porta dos filtros ---- */
.agenda-barra-dia {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0;
}
.agenda-barra-dia-info {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex: 1 1 auto;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
}
.agenda-barra-dia-info::-webkit-scrollbar { display: none; }
.agenda-barra-dia-divisor {
    flex: 0 0 auto;
    width: 1px;
    height: 1rem;
    background: var(--atlas-light-gray);
}
.agenda-resumo { font-size: 0.75rem; white-space: nowrap; color: var(--atlas-navy); }
.agenda-resumo-feitas { color: var(--atlas-blue-gray); font-weight: 400; }
/* Botão de filtros: ícone com o CONTADOR de recortes aplicados. Sem o número, a
   lista aparece recortada e nada na tela conta por quê. */
.agenda-btn-filtros-icone {
    position: relative;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    min-height: 2.25rem;
    border: 1px solid var(--atlas-light-gray);
    border-radius: 0.5rem;
    background: #fff;
    color: var(--atlas-navy);
}
.agenda-btn-filtros-icone .material-icons { font-size: 1.15rem; }
.agenda-filtros-contador {
    position: absolute;
    top: -0.35rem;
    right: -0.35rem;
    min-width: 1rem;
    height: 1rem;
    line-height: 1rem;
    border-radius: 1rem;
    background: var(--atlas-teal);
    color: #fff;
    font-size: 0.62rem;
    font-weight: 700;
    border: 2px solid #fff;
}

/* ---- Folha de filtros (celular) ----
   Sobreposta, não acordeão: o acordeão empurrava a lista para baixo, então abrir os
   filtros custava a visita que se estava olhando. Mesmo padrão do drawer de detalhe. */
.agenda-filtros-overlay {
    position: fixed;
    inset: 0;
    z-index: 1078;
    background: rgba(14, 34, 62, 0.45);
}
.agenda-filtros-folha {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1079;
    max-height: 88vh;
    max-height: 88dvh;
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 1rem 1rem 0 0;
    box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.2);
    padding: 0.75rem 1.1rem calc(0.9rem + env(safe-area-inset-bottom, 0px));
}
.agenda-filtros-folha::before {
    content: '';
    display: block;
    width: 2.5rem;
    height: 4px;
    border-radius: 2px;
    background: var(--atlas-light-gray);
    margin: 0 auto 0.6rem;
    flex: 0 0 auto;
}
.agenda-filtros-folha-topo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex: 0 0 auto;
}
.agenda-filtros-folha-titulo { font-size: 1.05rem; font-weight: 600; color: var(--atlas-navy); }
.agenda-filtros-folha-corpo {
    flex: 1 1 auto;
    overflow-y: auto;
    overscroll-behavior: contain;
    min-height: 0;
    padding-top: 0.5rem;
}
.agenda-filtros-grupo + .agenda-filtros-grupo { margin-top: 1rem; }
.agenda-filtros-rotulo {
    display: block;
    margin-bottom: 0.4rem;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--atlas-blue-gray);
}
.agenda-escopo-segmentado { display: flex; gap: 3px; background: #eceff1; border-radius: 0.6rem; padding: 3px; }
.agenda-escopo-segmentado button {
    flex: 1 1 0;
    min-height: 2.75rem;
    border: none;
    border-radius: 0.45rem;
    background: transparent;
    color: var(--atlas-graphite);
    font-size: 0.8rem;
    font-weight: 600;
}
.agenda-escopo-segmentado button.ativo { background: var(--atlas-teal); color: #fff; }
.agenda-filtros-folha-ok { flex: 0 0 auto; margin-top: 0.85rem; min-height: 3rem; }

/* ---- Coluna do dia no desktop ----
   A lista do dia existia só no celular; no desktop era preciso abrir evento por
   evento para saber o andamento. Mesmo partial, para as duas não divergirem. */
.agenda-coluna-dia { height: 100%; }
.agenda-coluna-dia-corpo { max-height: 34rem; overflow-y: auto; overscroll-behavior: contain; }

/* ---- Sobreposta do fechamento (empilha acima do drawer/bottom sheet) ---- */
.agenda-submodal-overlay {
    position: fixed;
    inset: 0;
    z-index: 1090;
    background: rgba(14, 34, 62, 0.45);
}
.agenda-submodal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1091;
    width: min(520px, calc(100vw - 2rem));
    max-height: 88vh;
    background: #fff;
    border-radius: 0.75rem;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
}
@media (max-width: 767.98px) {
    .agenda-cabecalho-interno { display: none !important; }
    .agenda-barra-topo { align-items: stretch; }
    .agenda-btn-hoje,
    .agenda-vistas button,
    .agenda-sheet-acoes .btn,
    .agenda-btn-acao,
    .agenda-chip-vencidas { min-height: 2.75rem; }
    .agenda-card-corpo { min-height: 2.75rem; }

    /* No celular também sobe de baixo, como a folha principal. */
    .agenda-submodal {
        top: auto;
        bottom: 0;
        left: 0;
        transform: none;
        width: 100%;
        max-width: 100%;
        max-height: 92vh;
        border-radius: 1rem 1rem 0 0;
        padding: 1rem 1.1rem calc(0.9rem + env(safe-area-inset-bottom, 0px));
    }
}

/* ---- Histórico de transições no detalhe ---- */
.agenda-historico { list-style: none; padding: 0; margin: 0.5rem 0 0; }
.agenda-historico li {
    display: flex;
    gap: 0.6rem;
    padding: 0.4rem 0;
    border-left: 2px solid var(--atlas-light-gray);
    padding-left: 0.7rem;
    margin-left: 0.2rem;
}
.agenda-historico-quando {
    flex: 0 0 4.5rem;
    font-size: 0.72rem;
    color: var(--atlas-blue-gray);
    padding-top: 1px;
}

/* ---- Topbar responsiva ---- */
.navbar-main {
    position: relative;
    z-index: 9998;
}
.atlas-topbar {
    align-items: center;
    display: grid;
    gap: 0.5rem;
    grid-template-columns: 44px minmax(0, 1fr) 44px;
}
.atlas-topbar__menu {
    grid-column: 1;
    justify-self: start;
    min-height: 44px;
    min-width: 44px;
}
.atlas-topbar__menu #iconNavbarSidenav {
    align-items: center;
    display: flex;
    height: 44px;
    justify-content: center;
    width: 44px;
}
.atlas-topbar__identidade {
    grid-column: 2;
    min-width: 0;
    overflow: hidden;
}
.atlas-topbar__identidade .breadcrumb {
    flex-wrap: nowrap;
    margin-right: 0 !important;
    min-width: 0;
    overflow: hidden;
}
.atlas-topbar__identidade .breadcrumb-item,
.atlas-topbar__identidade h6 {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.atlas-topbar__acoes {
    display: flex !important;
    flex-basis: auto;
    grid-column: 3;
    justify-content: flex-end;
    min-width: 44px;
    overflow: visible;
}
.atlas-topbar__acoes .navbar-nav {
    align-items: center;
    flex-direction: row;
    overflow: visible;
}

/* ---- Sino de notificações ---- */
.sino-wrapper {
    min-height: 44px;
    min-width: 44px;
    overflow: visible;
    position: relative;
}
.sino-botao {
    align-items: center;
    color: var(--atlas-teal) !important;
    display: inline-flex;
    height: 44px;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    overflow: visible !important;
    position: relative;
    width: 44px;
}
.sino-botao .material-icons {
    font-size: 30px;
    line-height: 1;
}
.sino-contador {
    position: absolute;
    top: 0;
    right: -2px;
    min-width: 1.2rem;
    height: 1.2rem;
    padding: 0 0.25rem;
    border-radius: 1rem;
    background: #f44335;
    color: #fff;
    font-size: 0.63rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    z-index: 1;
}
.sino-painel {
    position: absolute;
    right: 0;
    top: calc(100% + 0.5rem);
    z-index: 9999;
    width: min(29rem, calc(100vw - 1rem));
    max-height: min(42rem, calc(100vh - 5rem));
    overflow-y: auto;
    background: #fff;
    border-radius: 0.6rem;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.18);
}
.sino-filtros { display: flex; gap: .35rem; overflow-x: auto; }
.sino-filtros button {
    background: #f0f2f5;
    border: 0;
    border-radius: 999px;
    color: #59667a;
    flex: 0 0 auto;
    font-size: .7rem;
    font-weight: 600;
    padding: .35rem .65rem;
}
.sino-filtros button.is-active { background: var(--atlas-navy); color: #fff; }
.sino-push { background: #fbfcfd; }
.sino-lista { max-height: 24rem; overflow-y: auto; }
.sino-item {
    --sino-cor: #fbc02d;
    align-items: stretch;
    border-bottom: 1px solid #f0f2f5;
    border-left: 4px solid var(--sino-cor);
    display: flex;
    min-height: 5.25rem;
    position: relative;
}
.sino-item:hover { background: #f8f9fa; }
.sino-item.nao-lida { background: color-mix(in srgb, var(--sino-cor) 7%, white); }
.sino-item--sucesso { --sino-cor: #43a047; }
.sino-item--aviso { --sino-cor: #fbc02d; }
.sino-item--importante { --sino-cor: #fb8c00; }
.sino-item--critica { --sino-cor: #e53935; }
.sino-item--mensagem { --sino-cor: #1e88e5; }
.sino-item__conteudo {
    align-items: flex-start;
    color: inherit;
    display: flex;
    flex: 1 1 auto;
    gap: .55rem;
    min-width: 0;
    padding: .65rem .35rem .65rem .7rem;
    text-decoration: none;
}
.sino-item__icone { color: var(--sino-cor); font-size: 1.15rem; margin-top: .15rem; }
.sino-item__nivel { color: var(--sino-cor); display: block; font-size: .62rem; font-weight: 700; text-transform: uppercase; }
.sino-item__fechar {
    align-self: flex-start;
    background: transparent;
    border: 0;
    color: #59667a;
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1;
    margin: .35rem .35rem 0 0;
    min-height: 2.25rem;
    min-width: 2.25rem;
}
.sino-item__fechar:hover { color: #e53935; }

@media (max-width: 575.98px) {
    .sino-painel { position: fixed; right: .5rem; top: 4.25rem; }
}

/* ---- Push já ativo NESTE aparelho ----
   Quem liga a classe .push-ativo na raiz é o pwa.js, consultando o navegador
   (pushManager.getSubscription) — não o servidor. É regra de CSS, e não só
   el.hidden, porque o painel do sino é renderizado pelo Livewire depois do boot
   e a cada re-render: um botão recriado voltaria a aparecer.
   [data-push-always] (o botão do Perfil) é a exceção deliberada — ele fica
   visível sempre, para existir um caminho fixo de reativação. */
.push-ativo [data-push-enable]:not([data-push-always]) { display: none !important; }

/* ---- Fechar o menu lateral no celular ----
   O X é o #iconSidenav do template, e ele mora em layouts/app.blade.php DEPOIS do
   </main>. Os dois lugares mais óbvios estão bloqueados, cada um por um motivo
   medido na prática:
     · dentro da <aside>  -> ela tem overflow-y:auto, e overflow num eixo tira o
       `visible` do outro, então recorta na horizontal e o botão some;
     · entre a </aside> e o <main> -> quebra `.sidenav.fixed-start + .main-content`,
       que é quem dá a margem esquerda do conteúdo no desktop, e o menu cobre a tela.
   Fora dali, `fixed` volta a valer contra a TELA: o meio da vertical é top:50%, e a
   borda direita do menu aberto cai em 16.625rem (15.625rem de largura + 1rem de
   margem), então 17.125rem deixa meia-rem de respiro. */
.atlas-menu-fechar { display: none; }

@media (max-width: 1199.98px) {
    body.g-sidenav-pinned .atlas-menu-fechar {
        align-items: center;
        background: #e53935;
        border: 0;
        border-radius: 50%;
        box-shadow: 0 4px 12px rgba(0, 0, 0, .28);
        color: #fff;
        display: flex;
        height: 2.75rem;
        justify-content: center;
        left: 17.125rem;
        min-height: 44px;
        min-width: 44px;
        padding: 0;
        position: fixed;
        top: 50%;
        transform: translateY(-50%);
        width: 2.75rem;
        z-index: 1050;
    }
    .atlas-menu-fechar .material-icons { font-size: 26px; line-height: 1; }
}

@media (min-width: 1200px) {
    .atlas-topbar { display: flex; }
    .atlas-topbar__identidade { flex: 1 1 auto; }
    .atlas-topbar__acoes { margin-left: auto; }
}

/* Botão flutuante de nova atividade (celular). */
.agenda-fab {
    position: fixed;
    right: 1rem;
    bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
    z-index: 1050;
    width: 3.25rem;
    height: 3.25rem;
    border: none;
    border-radius: 50%;
    background: var(--atlas-teal);
    color: #fff;
    box-shadow: 0 6px 16px rgba(12, 114, 120, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* O FullCalendar nunca deve estourar a largura do card (causa scroll horizontal
   e "quebra" o layout, principalmente no celular). */
.fc { max-width: 100%; }
.fc .fc-toolbar.fc-header-toolbar { flex-wrap: wrap; gap: 0.5rem; }

/* A legenda vira uma tira rolável em vez de empilhar em várias linhas. */
.agenda-legenda { overflow-x: auto; }

/* ==================== CAMPOS DE DATA/HORA ==================== */
/* O Material Dashboard aplica `appearance: none` em TODO .form-control. Em campo
   de data/hora isso quebra o seletor nativo: no iOS o toque não abre o picker e no
   Chrome o ícone de calendário some, deixando o campo sem nada para tocar. Aqui a
   aparência nativa é devolvida só para esses tipos, com área de toque decente.
   Vale para agenda, fechamento, orçamentos e vendas. */
.form-control[type="date"],
.form-control[type="datetime-local"],
.form-control[type="time"],
.form-control[type="month"] {
    -webkit-appearance: auto;
    appearance: auto;
    min-height: 2.75rem;
}
.form-control[type="date"]::-webkit-calendar-picker-indicator,
.form-control[type="datetime-local"]::-webkit-calendar-picker-indicator,
.form-control[type="time"]::-webkit-calendar-picker-indicator,
.form-control[type="month"]::-webkit-calendar-picker-indicator {
    opacity: 1;
    cursor: pointer;
    padding: 0.35rem;
}
/* iOS achata o valor quando a altura não é explícita. */
.form-control::-webkit-date-and-time-value { text-align: left; min-height: 1.5rem; }

/* ---- Ajustes de mobile ---- */
@media (max-width: 767.98px) {
    /* Toolbar do calendário em coluna, sem espremer os botões. */
    .fc .fc-toolbar.fc-header-toolbar {
        flex-direction: column;
        align-items: stretch;
    }
    .fc .fc-toolbar-title { font-size: 1.1rem; text-align: center; }
    .fc .fc-button { padding: 0.3rem 0.55rem; font-size: 0.8rem; }
    /* 4 vistas + prev/next/hoje: os botões quebram linha em vez de estourar a tela. */
    .fc .fc-toolbar-chunk { display: flex; justify-content: center; flex-wrap: wrap; gap: 0.25rem; }
    .fc .fc-button-group { flex-wrap: wrap; }

    /* Linhas da lista com área de toque decente. */
    .fc .fc-list-event td { padding: 0.65rem 0.5rem; }

    /* Filtros: um por linha, dentro da folha. Espremidos lado a lado eles cortam o
       texto da opção, e no celular há uma coluna só de largura útil. */
    .agenda-filtros { align-items: center !important; }
    .agenda-filtros-controles {
        display: flex;
        flex: 1 0 100%;
        width: 100%;
        flex-direction: column;
        align-items: stretch;
    }
    .agenda-filtros-controles .form-select,
    .agenda-filtros-controles .btn { max-width: 100% !important; width: 100%; min-height: 2.75rem; }
    .agenda-lista-mobile { padding-bottom: calc(4.5rem + env(safe-area-inset-bottom, 0px)); }
    .agenda-conteudo-principal { padding-bottom: calc(4.5rem + env(safe-area-inset-bottom, 0px)); }
    .agenda-gps-cabecalho { flex-wrap: wrap; gap: 0.25rem 0.5rem; }
    .agenda-gps-cabecalho .form-label { flex: 1 1 13rem; min-width: 0; }
    .agenda-gps-tentar {
        flex: 0 0 auto;
        min-height: 2.75rem;
        padding: 0.25rem 0.5rem !important;
        white-space: nowrap;
    }

    /* Legenda: não quebra linha, rola na horizontal. */
    .agenda-legenda { flex-wrap: nowrap !important; white-space: nowrap; }

    /* No celular o drawer lateral vira BOTTOM SHEET: sobe de baixo, ocupa no máximo
       92% da altura e mantém as ações no rodapé, ao alcance do polegar. Entrar pela
       direita e obrigar a rolar até o meio para achar os botões era o pior do
       layout antigo. */
    .agenda-drawer {
        top: auto;
        bottom: 0;
        left: 0;
        right: 0;
        max-width: 100%;
        height: auto;
        max-height: 92vh;
        max-height: 92dvh;
        border-radius: 1rem 1rem 0 0;
        box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.2);
        padding: 0.75rem 1.1rem calc(0.9rem + env(safe-area-inset-bottom, 0px));
    }
    /* Alça de arrastar — sinaliza que a folha é fechável. */
    .agenda-drawer::before {
        content: '';
        display: block;
        width: 2.5rem;
        height: 4px;
        border-radius: 2px;
        background: var(--atlas-light-gray);
        margin: 0 auto 0.75rem;
        flex: 0 0 auto;
    }
    .agenda-sheet-acoes { padding-bottom: 0.15rem; }
    /* Ações empilhadas ocupam a largura toda: alvo de toque cheio. */
    .agenda-sheet-acoes .btn { flex: 1 1 auto; }

    .fc .fc-dayGridMonth-view .fc-daygrid-event-harness { display: inline-block; }
    .fc .fc-dayGridMonth-view .fc-daygrid-event {
        display: inline-block;
        width: 1rem;
        height: 1rem;
        min-height: 0;
        margin: 1px 2px;
        padding: 0;
        border-radius: 50%;
        vertical-align: middle;
    }
    .fc .fc-dayGridMonth-view .fc-event-main,
    .fc .fc-dayGridMonth-view .fc-event-time,
    .fc .fc-dayGridMonth-view .fc-event-title { font-size: 0; line-height: 0; }
}

/* =========================================================================
   Modal: travar o scroll do FUNDO quando QUALQUER modal está aberto.
   Quem rola aqui é a JANELA (html/body) — `.main-content` só tem max-height,
   sem overflow, então não é o scroller. O `.modal-open` do Bootstrap trava só o
   body e não cobre os modais MANUAIS (`.modal.show.d-block`, sem Bootstrap JS).
   `.modal.show` é o marcador comum aos dois tipos; `:has()` roda no Chrome.
   ========================================================================= */
html:has(.modal.show), body:has(.modal.show) { overflow: hidden !important; }
/* Reforço: impede o scroll de "vazar" do modal para o fundo ao chegar no fim. */
.modal, .modal-dialog-scrollable .modal-body { overscroll-behavior: contain; }

/* =========================================================================
   Z-index dos modais ACIMA da sidenav do template (.sidenav é z-index:9999).
   Sem isso a barra lateral fica por cima do modal (borda esquerda escondida).
   Vale para modais Bootstrap E manuais (.modal.show.d-block) e o backdrop.
   ========================================================================= */
.modal { z-index: 10001 !important; }
.modal-backdrop { z-index: 10000 !important; }

/* =========================================================================
   ROLAGEM HORIZONTAL DAS TABELAS

   Duas dores resolvidas:
   1. A barra nativa é fininha demais (e no Windows/macOS costuma sumir até
      você rolar), então ninguém percebia que a tabela continuava para o lado.
   2. Em tabela longa a barra fica lá embaixo, fora da tela: para rolar de
      lado era preciso descer até o fim primeiro.

   O tabela-rolavel.js injeta uma barra ESPELHO em cima e outra no rodapé; a
   de baixo é sticky, então acompanha a tela enquanto a tabela estiver visível.
   Ambas rolam a tabela e são roladas por ela.
   ========================================================================= */
.table-responsive {
    scrollbar-width: auto;                    /* Firefox: não usar a fina */
    scrollbar-color: #0C7278 #e9ecef;         /* teal da marca sobre trilho claro */
}

.table-responsive::-webkit-scrollbar,
.tr-barra::-webkit-scrollbar {
    height: 14px;
}

.table-responsive::-webkit-scrollbar-track,
.tr-barra::-webkit-scrollbar-track {
    background: #e9ecef;
    border-radius: 8px;
}

.table-responsive::-webkit-scrollbar-thumb,
.tr-barra::-webkit-scrollbar-thumb {
    background: #0C7278;
    border-radius: 8px;
    border: 3px solid #e9ecef;                /* afina visualmente sem perder área de clique */
}

.table-responsive::-webkit-scrollbar-thumb:hover,
.tr-barra::-webkit-scrollbar-thumb:hover {
    background: #0E223E;                      /* navy da marca */
}

/* Barra espelho: só a barra, sem conteúdo. */
.tr-barra {
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: auto;
    scrollbar-color: #0C7278 #e9ecef;
}

.tr-barra > div { height: 1px; }

.tr-barra--topo { margin-bottom: 4px; }

/* A de baixo gruda no rodapé da janela enquanto a tabela estiver na tela.
   Precisa de fundo próprio: ela flutua por cima das linhas. */
.tr-barra--rodape {
    position: sticky;
    bottom: 0;
    z-index: 3;
    background: #fff;
    padding-top: 4px;
    box-shadow: 0 -6px 10px -8px rgba(0, 0, 0, .35);
}

/* Com a barra espelho no rodapé, a nativa da tabela vira ruído duplicado.
   Só quando as espelho estão no ar (tr-com-barras): sem isso, tabela sem
   transbordo ficaria sem rolagem alguma. */
.tr-com-barras > .table-responsive {
    scrollbar-width: none;
}

.tr-com-barras > .table-responsive::-webkit-scrollbar {
    height: 0;
}

/* ── Zebra de tabela ───────────────────────────────────────────────────────
   Alterna SÓ o fundo das linhas. A .table-striped do tema também reescreve
   --bs-table-striped-color, o que apagaria as cores de texto e dos badges das
   células (nome do cliente viraria cinza). Aqui a cor do texto fica intacta.
   O :hover do tema continua vencendo, porque é mais específico. */
.table-zebra > tbody > tr:nth-of-type(odd) > td {
    background-color: rgba(12, 114, 120, .045);   /* teal da marca, bem diluído */
}

/* ── Linha clicável e linha selecionada ───────────────────────────────────
   Na lista de Clientes a linha inteira é o alvo: clicar abre a modal com os
   dados e as ações do cliente. A seleção sobrevive ao fechar a modal, então
   precisa ser visível sem apagar nada: mexe SÓ no fundo (mesma razão que fez a
   tabela usar .table-zebra em vez de .table-striped). Tem a mesma
   especificidade da regra da zebra acima e vence por vir depois. */
.linha-clicavel {
    cursor: pointer;
}

.table-zebra > tbody > tr.linha-selecionada > td {
    background-color: rgba(12, 114, 120, .14);
}

.table-zebra > tbody > tr.linha-selecionada > td:first-child {
    box-shadow: inset 3px 0 0 rgba(12, 114, 120, .9);
}
/* Radar de Visitas: prioridade, escopo e ação sem esconder o contexto comercial. */
.radar-visoes,
.radar-abas {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.radar-kpi {
    min-height: 146px;
    padding: 1rem;
    position: relative;
    transition: transform .15s ease, box-shadow .15s ease;
}

.radar-kpi:hover,
.radar-kpi.is-active {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, .12);
}

.radar-kpi.is-active { outline: 2px solid var(--bs-primary); }
.radar-kpi__icone { position: absolute; right: 1rem; top: 1rem; opacity: .55; }
.radar-kpi__valor { color: #344767; font-size: 1.75rem; font-weight: 700; line-height: 1; margin-top: .5rem; }
.radar-kpi__rotulo { color: #344767; font-size: .875rem; font-weight: 700; margin-top: .55rem; }
.radar-kpi__ajuda { color: #7b809a; font-size: .72rem; margin-top: .25rem; }
.radar-kpi--danger { border-top: 3px solid #f44335 !important; }
.radar-kpi--warning { border-top: 3px solid #fb8c00 !important; }
.radar-kpi--info { border-top: 3px solid #1a73e8 !important; }
.radar-kpi--success { border-top: 3px solid #4caf50 !important; }

.radar-aba {
    background: transparent;
    border: 0;
    border-bottom: 2px solid transparent;
    color: #7b809a;
    font-size: .8rem;
    font-weight: 600;
    padding: .6rem .35rem;
}

.radar-aba span:first-of-type {
    background: #f0f2f5;
    border-radius: 999px;
    font-size: .68rem;
    margin-left: .25rem;
    padding: .1rem .4rem;
}

.radar-aba.is-active { border-color: #e91e63; color: #344767; }
.radar-cliente { border-bottom: 1px solid #f0f2f5; padding: 1rem 1.25rem; }
.radar-cliente:last-child { border-bottom: 0; }
.radar-cliente-principal { align-items: center; display: grid; gap: 1rem; grid-template-columns: minmax(260px, 1fr) minmax(180px, .45fr) auto; }
.radar-cliente-identidade h6 { color: #344767; }
.radar-proxima-acao { align-items: flex-start; display: flex; flex-direction: column; gap: .45rem; }
.radar-cliente-acoes { display: flex; flex-wrap: wrap; gap: .4rem; justify-content: flex-end; }
.radar-global-filtros .form-select { min-width: 145px; width: auto; }
.radar-global-indicador { background: #f8f9fa; border: 1px solid #eceff1; border-radius: .65rem; min-height: 116px; padding: .85rem; }
.radar-global-indicador:not(.is-static):hover { border-color: #e91e63; }
.radar-global-indicador span,
.radar-global-indicador small { color: #7b809a; display: block; font-size: .72rem; }
.radar-global-indicador strong { color: #344767; display: block; font-size: 1.65rem; margin: .3rem 0; }
.radar-funil { display: grid; gap: .5rem; grid-template-columns: repeat(5, 1fr); }
.radar-funil div { background: linear-gradient(135deg, #f8f9fa, #fff); border-left: 3px solid #e91e63; border-radius: .4rem; padding: .65rem; }
.radar-funil span { color: #7b809a; display: block; font-size: .68rem; }
.radar-funil strong { color: #344767; font-size: 1.2rem; }
.radar-carga-grupo { background: #f8f9fa; border: 1px solid #eceff1; border-radius: .65rem; padding: .9rem; }
.radar-carga-peso { color: #344767; font-size: 1.45rem; font-weight: 700; margin: .65rem 0 .25rem; }
.radar-carga-peso small { color: #7b809a; font-size: .7rem; font-weight: 500; }

/* Abas do Radar seguem o mesmo pill ativo usado em Clientes. O script do tema
   injeta `.moving-tab`, mas o Livewire troca os botões sem recalcular sua largura;
   no Radar o estado ativo já é desenhado pelo próprio nav-link. */
.radar-nav {
    background: #f0f2f5;
    border-radius: .75rem;
    gap: .2rem;
    padding: .25rem;
}
.radar-nav > .moving-tab { display: none !important; }
.radar-nav .nav-item { min-width: 0; }
.radar-nav .nav-link {
    border-radius: .55rem;
    min-height: 42px;
    position: relative;
    width: 100%;
    z-index: 1;
}
.radar-nav--categorias .nav-item { flex: 1 1 150px; }
.radar-nav--escopo .nav-item { flex: 1 1 auto; }

/* Card KPI no fluxo normal: preserva os ícones Creative Tim inteiros e evita
   o recorte causado pelo cabeçalho com margem negativa. */
.radar-stat-card { min-height: 138px; overflow: hidden; }
.radar-stat-card.is-active { outline: 2px solid #e91e63; }
.radar-stat-action {
    appearance: none;
    background: transparent;
    border: 0;
    border-radius: inherit;
    color: inherit;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    font: inherit;
    padding: 0;
}
.radar-stat-action .card-footer { margin-top: auto; width: 100%; }
.radar-stat-icon {
    flex: 0 0 64px;
    margin: 0 !important;
    position: relative !important;
}

@media (max-width: 991.98px) {
    .radar-cliente-principal { grid-template-columns: 1fr; }
    .radar-cliente-acoes { justify-content: flex-start; }
    .radar-funil { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 575.98px) {
    .radar-visoes { width: 100%; }
    .radar-visoes .btn { flex: 1 1 auto; }
    .radar-kpi { min-height: 132px; padding: .85rem; }
    .radar-cliente { padding: 1rem; }
    .radar-cliente-acoes .btn,
    .radar-proxima-acao .btn { width: 100%; }
    .radar-nav--escopo { width: 100%; }
}

/* ==========================================================================
   Fechar modal no celular — AC-1061
   ==========================================================================

   O `.btn-close` do Bootstrap tem 1em x 1em mais 0,25em de padding: cerca de
   24 px de alvo. É pouco mais da metade dos 44 px que um dedo acerta com
   confiabilidade, e errar o alvo acerta o conteúdo atrás — o que se sente como
   "a modal não fecha", não como "eu errei o botão".

   Cresce só a ÁREA QUE RESPONDE AO TOQUE, nunca o ícone: um X grande ao lado de
   um título pequeno fica desproporcional, e o problema nunca foi enxergar o
   botão. `background-size` fixa o desenho no tamanho original, já que o
   Bootstrap desenha o X como imagem de fundo e ele acompanharia a caixa.

   Margem negativa compensa o padding novo para o cabeçalho não crescer junto —
   sem ela, todo cabeçalho de modal do sistema ganharia 20 px de altura. */
.modal-header .btn-close {
    min-width: 44px;
    min-height: 44px;
    padding: 0;
    background-size: 12px 12px;
    background-position: center;
    margin: -0.5rem -0.5rem -0.5rem auto;
    /* O X do Material Dashboard é BRANCO (fill=#fff no SVG do tema) — sobre o cabeçalho
       branco das modais ele era invisível, não "claro demais" (AC-2202, pedido do dono
       do produto em 01/09/2026: "precisa estar visível, canto superior direito").
       `invert(1)` vira o desenho preto; nenhuma modal do sistema tem cabeçalho escuro
       (conferido em 02/09/2026), então a inversão vale para todas. */
    filter: invert(1);
    opacity: .75;
}

.modal-header .btn-close:hover,
.modal-header .btn-close:focus {
    opacity: 1;
}

/* O MESMO alvo para a submodal da agenda, que nao e uma modal do Bootstrap.

   Ela e um overlay proprio (`agenda-submodal`), entao o seletor acima nunca a alcancou: o X
   estava la desde sempre, com ~24px de area. Levantamento de 31/08/2026: era a UNICA saida de
   modal do sistema fora da regra -- as outras 35 ja herdavam o alvo pelo `.modal-header`. */
.agenda-submodal-fechar {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: -0.5rem -0.5rem -0.5rem auto;
}

/* =====================================================================
   TELAS DE LANÇAMENTO EM SEÇÕES (telas-de-lancamento-em-secoes, T-656)

   Vale para a tela de orçamento/venda e para o cadastro de cliente. Um bloco só,
   reusado pelas duas: as duas telas têm o mesmo problema (formulário longo que não diz
   onde você está) e a mesma solução, e dois blocos divergiriam no primeiro ajuste.

   Só usa os tokens que o app já tem — teal #0C7278, navy #0E223E, cinza #7b809a,
   borda #d2d6da, raio .75rem do card e a sombra do Material Dashboard.

   ⚠ Mexeu aqui? Bumpe o `?v=` do custom.css em layouts/app.blade.php. O cache-bust é
   manual: sem o bump, quem já usou o sistema recebe o CSS velho e a tela sai quebrada.
   ===================================================================== */

/* ---- Cabeçalho da tela ---- */
.lanc-cabecalho {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 18px;
}
.lanc-titulo {
    font-size: 1.5rem;
    font-weight: 400;
    color: #344767;
    margin: 0;
}
.lanc-subtitulo {
    margin: 4px 0 0;
    font-size: .8125rem;
    color: #7b809a;
    max-width: 62ch;
}

/* O SELO diz qual documento vai nascer. Orçamento é teal; venda é navy.
   Até aqui só o título separava os dois, e título é a parte da tela que menos se lê —
   mas só um deles grava no Upper e entra na fila do financeiro (AC-1486). */
.lanc-selo {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 14px;
    border-radius: 999px;
    color: #fff;
    font-size: .6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .4px;
    white-space: nowrap;
    height: fit-content;
}
.lanc-selo .material-icons { font-size: 14px; }
.lanc-selo-orcamento {
    background-image: linear-gradient(195deg, #5EA6A6 0%, #0C7278 100%);
    box-shadow: 0 4px 20px 0 rgba(0, 0, 0, .14), 0 7px 10px -5px rgba(12, 114, 120, .4);
}
.lanc-selo-venda {
    background-image: linear-gradient(195deg, #1B3B5F 0%, #0E223E 100%);
    box-shadow: 0 4px 20px 0 rgba(0, 0, 0, .14), 0 7px 10px -5px rgba(14, 34, 62, .4);
}

/* ---- Duas colunas ---- */
.lanc-cols {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 336px;
    gap: 20px;
    align-items: start;
}
.lanc-coluna {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}
.lanc-resumo {
    display: flex;
    flex-direction: column;
    gap: 12px;
    position: sticky;
    top: 16px;
}

/* No computador a barra é só um agrupamento: `display: contents` devolve os filhos ao
   flex da coluna, e aí o `order` coloca "o que falta" entre o total e o botão — que é a
   ordem em que se lê. No celular ela volta a ser caixa, e gruda no rodapé. */
@media (min-width: 992px) {
    .resumo-barra { display: contents; }
    .resumo-numeros { order: 1; }
    .resumo-falta   { order: 2; }
    .resumo-upper   { order: 3; }
    .resumo-acoes   { order: 4; }
}

/* ---- Seção dobrável ---- */
.secao {
    background: #fff;
    border-radius: .75rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -1px rgba(0, 0, 0, .06);
    overflow: hidden;
}
.secao-cabecalho {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 13px 16px;
    background: none;
    border: none;
    border-bottom: 1px solid transparent;
    text-align: left;
    cursor: pointer;
    transition: background .15s ease;
}
.secao-cabecalho:hover { background: #fbfcfc; }
.secao-cabecalho:focus-visible {
    outline: 2px solid #0C7278;
    outline-offset: -2px;
}
.secao-aberta .secao-cabecalho { border-bottom-color: #eef0f2; }

.secao-numero {
    width: 26px;
    height: 26px;
    flex: 0 0 auto;
    border-radius: 8px;
    background: #f8f9fa;
    color: #344767;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .75rem;
    font-weight: 700;
}
.secao-completa .secao-numero {
    background-image: linear-gradient(195deg, #5EA6A6 0%, #0C7278 100%);
    color: #fff;
}

.secao-titulo {
    flex: 1;
    min-width: 0;
}
.secao-titulo strong {
    display: block;
    font-size: .875rem;
    font-weight: 500;
    color: #344767;
    line-height: 1.3;
}
/* O resumo da seção FECHADA. `text-overflow` e não quebra de linha: o cabeçalho precisa
   ter altura previsível, senão a tela pula a cada abrir e fechar. */
.secao-resumo {
    display: block;
    font-size: .71875rem;
    color: #7b809a;
    margin-top: 1px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.secao-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: .65rem;
    font-weight: 700;
    white-space: nowrap;
}
.secao-pill .material-icons { font-size: 13px; }
/* Uma cor por estado, em toda a tela. Verde de "completo" em dois tons, ou âmbar
   servindo ora de aviso ora de pendência, faz o olho parar de distinguir. */
.secao-pill-ok       { background: rgba(76, 175, 80, .12);  color: #2e7d32; }
.secao-pill-falta    { background: rgba(251, 140, 0, .14);  color: #b45f00; }
.secao-pill-atencao  { background: rgba(26, 115, 232, .11); color: #1558c0; }
.secao-pill-opcional { background: #f1f3f5;                 color: #7b809a; }

.secao-seta {
    color: #7b809a;
    transition: transform .18s ease;
}
.secao-aberta .secao-seta { transform: rotate(180deg); }
.secao-corpo { padding: 16px; }

/* ---- Resumo fixo ---- */
.resumo-caixa {
    background: #fff;
    border-radius: .75rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -1px rgba(0, 0, 0, .06);
    padding: 16px;
}
.resumo-titulo {
    font-size: .65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .6px;
    color: #7b809a;
    margin-bottom: 10px;
}
.resumo-linha {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    font-size: .78125rem;
    padding: 3px 0;
    color: #7b809a;
}
.resumo-linha b {
    font-weight: 500;
    color: #344767;
    font-variant-numeric: tabular-nums;
}
.resumo-risco {
    height: 1px;
    background: #eceff1;
    border: 0;
    margin: 9px 0;
    opacity: 1;
}
.resumo-total {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
}
.resumo-total span {
    font-size: .75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .4px;
    color: #344767;
}
.resumo-total b {
    font-size: 1.4375rem;
    font-weight: 700;
    color: #344767;
    font-variant-numeric: tabular-nums;
    letter-spacing: -.5px;
}

/* A COMISSÃO. Continua tingida porque é o número que muda a decisão de quem monta — vender
   acima da tabela aumenta este valor, e é isso que a feature comissao-no-documento tornou
   visível. Sem destaque, ela viraria mais uma linha de total.

   UMA LINHA desde 19/09/2026 (AC-2813): era uma caixa com título, valor em 1,25rem e um
   parágrafo de ajuda. O dono do produto apontou o resumo como o que mais enchia a tela; a
   ajuda foi para o `title`, e o valor ficou do tamanho de um número que se confere, não de
   um que se anuncia. */
.resumo-comissao {
    display: flex;
    align-items: center;
    gap: 7px;
    background: rgba(12, 114, 120, .09);
    border: 1px solid rgba(12, 114, 120, .22);
    border-radius: .5rem;
    padding: 7px 10px;
    margin-top: 12px;
    color: #08575c;
}
.resumo-comissao .material-icons { font-size: 15px; }
.resumo-comissao-rotulo { font-size: .78125rem; font-weight: 500; }
.resumo-comissao-pct {
    background: #0C7278;
    color: #fff;
    border-radius: 999px;
    padding: 1px 7px;
    font-size: .65rem;
    font-weight: 700;
    white-space: nowrap;
}
.resumo-comissao > b {
    margin-left: auto;
    font-size: .9375rem;
    font-weight: 700;
    color: #08575c;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* O total e o botão de expandir dividem uma linha. O botão e a linha de apoio são só do
   celular (AC-2812): no computador a coluna inteira já está à vista. */
.resumo-total-linha { display: flex; align-items: center; gap: 8px; }
.resumo-total-linha .resumo-total { flex: 1 1 auto; min-width: 0; }
.resumo-expandir,
.resumo-apoio { display: none; }

.resumo-etiquetas {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 12px;
}
.resumo-etiquetas span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: .65rem;
    color: #7b809a;
    background: #f8f9fa;
    border-radius: 6px;
    padding: 4px 8px;
}
.resumo-etiquetas .material-icons { font-size: 13px; }

.resumo-acoes {
    display: flex;
    flex-direction: column;
    gap: 9px;
}
.resumo-acoes .btn { margin-bottom: 0; }

/* ---- Situação no Upper ---- */
.selo-upper {
    display: flex;
    gap: 9px;
    padding: 11px;
    border-radius: .5rem;
    border: 1px solid;
    font-size: .71875rem;
    line-height: 1.45;
}
.selo-upper strong { display: block; }
.selo-upper .material-icons { font-size: 18px; flex: 0 0 auto; }
.selo-upper-ok {
    background: rgba(76, 175, 80, .08);
    border-color: rgba(76, 175, 80, .35);
    color: #2e7d32;
}
.selo-upper-fora {
    background: rgba(244, 67, 53, .07);
    border-color: rgba(244, 67, 53, .35);
    color: #b3261e;
}

/* ---- O que falta ---- */
.falta-lista {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 7px;
}
.falta-linha {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: .75rem;
    line-height: 1.35;
}
.falta-linha .material-icons { font-size: 15px; flex: 0 0 auto; }
/* Bloqueia (o backend recusa) em âmbar; avisa (o backend aceita, mas o número sai
   estimado) em azul. A mesma cor para os dois faria o representante desistir de gravar
   uma cotação que o sistema aceitaria sem reclamar. */
.falta-bloqueia { color: #8a4b00; font-weight: 500; }
.falta-avisa    { color: #1558c0; }
.falta-ok       { color: #2e7d32; }

/* ---- Controle segmentado (canal, modalidade, tipo de pessoa) ---- */
.segmentado { display: flex; gap: 6px; }
.segmentado-opcao {
    flex: 1;
    min-height: 40px;
    padding: 6px 10px;
    border: 1px solid #d2d6da;
    background: #fff;
    border-radius: .375rem;
    color: #7b809a;
    font-size: .78125rem;
    font-weight: 500;
    line-height: 1.2;
    cursor: pointer;
    transition: .15s ease;
}
.segmentado-opcao:hover:not(:disabled):not(.segmentado-ativo) {
    border-color: #5EA6A6;
    color: #0C7278;
}
.segmentado-ativo {
    background-image: linear-gradient(195deg, #5EA6A6 0%, #0C7278 100%);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 3px 3px 0 rgba(12, 114, 120, .15);
}
.segmentado-opcao:disabled {
    opacity: .42;
    cursor: not-allowed;
    background: #f8f9fa;
}

/* ---- Cliente escolhido ---- */
.cliente-escolhido {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border: 1px solid #e6e9ec;
    border-radius: .5rem;
    background: #f8f9fa;
}
.cliente-avatar {
    width: 38px;
    height: 38px;
    flex: 0 0 auto;
    border-radius: 10px;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    background-image: linear-gradient(195deg, #1B3B5F 0%, #0E223E 100%);
}
.cliente-dados { flex: 1; min-width: 0; }
.cliente-dados strong {
    display: block;
    font-size: .875rem;
    font-weight: 500;
    color: #344767;
}
.cliente-dados span { font-size: .71875rem; color: #7b809a; }

/* ---- Etiquetas da cotação ---- */
.etiquetas-cotacao {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}
.etiquetas-cotacao span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: .6875rem;
    color: #7b809a;
    background: #f8f9fa;
    border-radius: 6px;
    padding: 5px 9px;
}
.etiquetas-cotacao .material-icons { font-size: 14px; }
.etiquetas-cotacao .etiqueta-info { color: #1558c0; background: rgba(26, 115, 232, .08); }

.caixa-aprovacao {
    border: 1px solid rgba(251, 140, 0, .45);
    background: rgba(251, 140, 0, .05);
    border-radius: .5rem;
    padding: 13px;
    margin-top: 14px;
}

/* =====================================================================
   O CELULAR (AC-1488, AC-1489)

   O representante lança do campo. Aqui a tabela de oito colunas — que rolava para o
   lado com o cliente na frente — vira cartão, e o resumo desce para um rodapé preso.
   ===================================================================== */
@media (max-width: 991.98px) {
    .lanc-cols {
        grid-template-columns: minmax(0, 1fr);
        /* Espaço para a barra presa não cobrir o fim do formulário. Medida em
           29/08/2026: 123 px no documento e 145 px no cadastro (que tem a barra de
           progresso). 168 dá folga para o texto do botão quebrar em duas linhas. */
        padding-bottom: 168px;
    }

    /* A BARRA presa no rodapé.

       `fixed`, e NÃO `sticky`. O `sticky bottom` só segura o elemento quando a rolagem
       já chegou nele — antes disso ele fica onde estava, e aqui isso era 2.579 px abaixo
       do topo: o total e o botão só apareciam depois de rolar a tela inteira, que é
       exatamente o defeito que esta barra existe para corrigir. Medido em 29/08/2026.

       z-index abaixo do 1060 das modais: a barra não pode cobrir a modal da visita. */
    .lanc-resumo { position: static; }
    .resumo-barra {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1030;
        background: #fff;
        box-shadow: 0 -4px 16px rgba(0, 0, 0, .12);
        border-top: 1px solid #e6e9ec;
        padding: 8px 12px calc(8px + env(safe-area-inset-bottom, 0px));
    }
    .resumo-barra .resumo-caixa {
        box-shadow: none;
        border-radius: 0;
        padding: 0;
    }

    /* FECHADA, a barra mostra o que decide: o total, uma linha de apoio (subtotal · frete ·
       comissão) e as ações. As linhas completas, a comissão em destaque e as etiquetas
       continuam existindo — a um toque, no botão de expandir (AC-2812, AC-2814).

       Até 19/09/2026 subtotal e frete simplesmente não apareciam no celular ("continuam na
       seção de produtos", dizia o comentário — e não continuavam: o rodapé de totais da grade
       só é renderizado no fechamento da visita). */
    .resumo-barra .resumo-linha,
    .resumo-barra .resumo-titulo,
    .resumo-barra .resumo-etiquetas,
    .resumo-barra .resumo-risco,
    .resumo-barra .resumo-comissao { display: none; }

    .resumo-barra .resumo-numeros { margin-bottom: 7px; }
    .resumo-barra .resumo-total { flex-direction: column; align-items: flex-start; gap: 0; }
    .resumo-barra .resumo-total span { font-size: .625rem; }
    .resumo-barra .resumo-total b { font-size: 1.25rem; line-height: 1.15; }

    .resumo-barra .resumo-expandir {
        display: flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 44px;
        width: 44px;
        height: 44px;
        padding: 0;
        border: 1px solid #d2d6da;
        border-radius: .5rem;
        background: #fff;
        color: #344767;
    }
    .resumo-barra .resumo-apoio {
        display: block;
        margin: 2px 0 0;
        font-size: .6875rem;
        line-height: 1.35;
        color: #67748e;
        font-variant-numeric: tabular-nums;
    }
    .resumo-barra .resumo-apoio span { color: #344767; font-weight: 500; white-space: nowrap; }

    /* ABERTA: tudo o que o computador mostra, na mesma ordem. A linha de apoio sai — ela
       repetiria o que acabou de aparecer logo acima. */
    .resumo-barra.resumo-aberta .resumo-linha { display: flex; }
    .resumo-barra.resumo-aberta .resumo-risco { display: block; }
    .resumo-barra.resumo-aberta .resumo-etiquetas { display: flex; }
    .resumo-barra.resumo-aberta .resumo-comissao { display: flex; margin-top: 8px; }
    .resumo-barra.resumo-aberta .resumo-apoio { display: none; }
    /* Aberta, a barra pode crescer — mas nunca a ponto de esconder as próprias ações. */
    .resumo-barra.resumo-aberta { max-height: 80vh; overflow-y: auto; }

    /* O QUE CRESCE COM O CARRINHO só aparece com a barra aberta (AC-2815): a caixa "Preço por
       unidade, com frete" tem uma linha por produto, e o histórico uma por ação. Numa barra
       PRESA ao rodapé, cinco produtos eram uns 200 px de tela a menos para o formulário. No
       computador a regra não existe: lá a coluna tem a altura que precisar. */
    .resumo-barra .resumo-so-aberta { display: none; }
    .resumo-barra.resumo-aberta .resumo-so-aberta { display: block; margin-bottom: 7px; }

    /* Os botões em LINHA: no rodapé, empilhá-los comeria metade da tela.

       ⚠ MAS A LINHA PRECISA QUEBRAR (04/09/2026). A regra nasceu para a tela de EDIÇÃO,
       onde as ações são duas — Salvar e Voltar. Em LEITURA são até cinco (gerar venda,
       enviar para novo ajuste, PDF, editar, voltar), mais os parágrafos de ajuda e de erro,
       que também são filhos deste flex. Com `flex: 1` e sem `flex-wrap`, os sete dividiam a
       largura do telefone e cada rótulo quebrava UMA LETRA POR LINHA — botões de 40 px de
       largura com o texto na vertical. Relatado com print pelo dono do produto.

       `min-width` é o que faz a quebra acontecer de verdade: sem ele, `flex-shrink` continua
       espremendo os itens abaixo do conteúdo e a linha nunca quebra, por mais botões que
       haja. 8,5rem cabe duas por linha num telefone de 320 px (2 × 136 + 7 de gap = 279,
       dentro dos 296 úteis) e força a terceira para baixo.

       A PRIMEIRA ação ocupa a linha inteira: ela é sempre a principal — Salvar na edição,
       Gerar venda na leitura — e dividir a largura dela com uma ação secundária é o que faz
       a pessoa errar o alvo com o polegar. */
    .resumo-barra .resumo-acoes { flex-direction: row; flex-wrap: wrap; gap: 7px; }
    .resumo-barra .resumo-acoes .btn {
        flex: 1 1 calc(50% - 3.5px);
        min-width: 8.5rem;
        padding-left: 8px;
        padding-right: 8px;
    }
    .resumo-barra .resumo-acoes .btn:first-child { flex-basis: 100%; }

    /* Ajuda e erro são filhos deste mesmo flex. Sem isto eles viram uma coluna de texto
       vertical entre os botões — é o que aparece no print, ao lado dos botões espremidos. */
    .resumo-barra .resumo-acoes > p { flex: 1 1 100%; margin-bottom: 0; }

    /* EM EDIÇÃO as ações são duas — Salvar e Cancelar —, e dividem UMA linha (AC-2816).

       A regra de cima ("a primeira ocupa a linha inteira") nasceu para a LEITURA, que chega a
       cinco ações, e continua valendo lá. Aqui ela custava uma linha de 46 px de barra presa
       para um botão que a pessoa quase nunca toca. O Salvar fica mais largo — é o alvo do
       polegar —, e se entrar uma terceira ação (gerar venda) a linha quebra sozinha.
       Estas regras vêm DEPOIS da de cima de propósito: a especificidade é a mesma. */
    .resumo-barra .resumo-acoes-edicao .btn { flex: 1 1 6rem; min-width: 6rem; }
    .resumo-barra .resumo-acoes-edicao .btn:first-child { flex-basis: 6rem; }
    .resumo-barra .resumo-acoes-edicao .btn.resumo-acao-principal { flex: 2 1 9rem; }
}

/* ==========================================================================
   OS ITENS DO DOCUMENTO EM CARDS (AC-2800, AC-2801)
   ==========================================================================

   Até 18/09/2026 aqui morava o CSS que EMPILHAVA a tabela `.grade-itens` abaixo de 768 px
   (AC-1488): `display: block` em tr/td e o rótulo vindo de `attr(data-rotulo)`. No celular
   o representante ainda arrastava a tela para o lado, e o dono do produto pediu o card das
   listagens, no computador também. A tabela saiu do markup; isto é o card.

   Mesmo vocabulário do `.cartao-documento` (raio, sombra, `.cartao-rotulo`) — quem conhece
   a listagem reconhece o produto.

   UMA marcação para os dois tamanhos: o que muda é só a grade dos seis valores.
   Celular: duas colunas, em três linhas que se leem como frases —
       quantidade | valor unitário
       frete/un   | frete total
       subtotal   | TOTAL
   A ordem do DOM é a do computador (subtotal antes do frete total); no celular o `order`
   junta os dois fretes na mesma linha. */
.lista-de-itens { display: flex; flex-direction: column; gap: 10px; }

.cartao-item {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
    padding: 11px 13px;
    border: 1px solid #eceff1;
    border-radius: .75rem;
    background: #fff;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -1px rgba(0, 0, 0, .06);
}

.cartao-item-topo { display: flex; align-items: flex-start; gap: 8px; }
.cartao-item-identidade {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 6px;
}
.cartao-item-nome { font-size: .875rem; font-weight: 700; line-height: 1.25; color: #344767; overflow-wrap: anywhere; }
.cartao-item-unidade { font-size: .75rem; color: #67748e; }

/* O X: 44 px de alvo em qualquer tela (é ação destrutiva — errar o alvo aqui custa um
   produto), puxado para o canto para o ícone alinhar com a borda do card. */
.cartao-item-remover {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    margin: -8px -8px 0 0;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}
.cartao-item-remover .material-icons { font-size: 1.35rem; }

/* A coluna da quantidade é a mais larga: num telefone de 320 px sobram 258 px para a grade,
   e o − CAMPO + precisa de 150 (44 + 62 + 44) para o número de cinco dígitos caber. */
.cartao-item-campos {
    display: grid;
    grid-template-columns: minmax(150px, 1.15fr) minmax(0, 1fr);
    gap: 10px 12px;
}
.cartao-item-campo { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cartao-item-valor { font-size: .875rem; font-weight: 600; color: #344767; font-variant-numeric: tabular-nums; }
.cartao-item-total { font-size: 1rem; font-weight: 700; }
button.cartao-item-valor { color: #0C7278; text-transform: none; letter-spacing: 0; }

.campo-unitario,
.campo-frete-total,
.campo-total { align-items: flex-end; text-align: right; }
.campo-frete-total { order: 1; }
.campo-subtotal { order: 2; }
.campo-total { order: 3; }
.campo-subtotal,
.campo-total { border-top: 1px dashed #eceff1; padding-top: 8px; }
/* O tracejado é UM risco, não dois: sem isto o vão entre as colunas corta a linha ao meio. */
.campo-subtotal { margin-right: -12px; padding-right: 12px; }
.campo-frete-entrada { max-width: 140px; }

@media (min-width: 992px) {
    .cartao-item-campos {
        grid-template-columns: 170px repeat(5, minmax(0, 1fr));
        align-items: start;
    }
    .campo-frete-total,
    .campo-subtotal,
    .campo-total { order: 0; border-top: 0; padding-top: 0; }
    .campo-subtotal { margin-right: 0; padding-right: 0; }
    .campo-unitario,
    .campo-frete-total { align-items: flex-start; text-align: left; }
}

/* ---- − CAMPO + (AC-2803) ----
   Os dois botões têm 44 px em QUALQUER tela: no computador eles também são o caminho mais
   curto, e um alvo que encolhe no mouse vira um alvo que se erra no notebook com toque. */
.passo-quantidade {
    display: flex;
    align-items: stretch;
    height: 44px;
    max-width: 200px;
    border: 1px solid #d2d6da;
    border-radius: .5rem;
    overflow: hidden;
    background: #fff;
}
.passo-botao {
    flex: 0 0 44px;
    padding: 0;
    border: 0;
    background: #f0f2f5;
    color: #344767;
    display: flex;
    align-items: center;
    justify-content: center;
}
.passo-botao:hover { background: #e6e9ed; }
.passo-botao:active { background: #d9dde3; }
.passo-botao .material-icons { font-size: 1.25rem; }

/* ---- A QUANTIDADE CABE NO CAMPO (AC-1831) ----
   A regra nasceu na tabela, onde a redistribuição de colunas espremia o campo até cortar o
   número de 6 dígitos. No card quem garante o espaço é o `min-width` do próprio campo, que
   o flex respeita. E as setinhas do type=number continuam de fora: comem ~20 px de dentro
   do campo (no Firefox ficam sempre visíveis) — quem digita quantidade digita o número, e
   para andar de um em um existem os botões. */
.passo-quantidade .passo-campo {
    flex: 1 1 auto;
    width: 62px;
    min-width: 62px;
    height: 100%;
    padding: 0 4px;
    border: 0 !important;
    border-radius: 0;
    background: #fff;
    text-align: center;
    font-size: 1rem;
    font-weight: 700;
    color: #344767;
}
.passo-quantidade input[type="number"] {
    -moz-appearance: textfield;
    appearance: textfield;
}
.passo-quantidade input[type="number"]::-webkit-outer-spin-button,
.passo-quantidade input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* A próxima compra: rótulo, data, atalhos e "aplicar a todos" numa faixa que quebra. */
.cartao-item-recompra {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 8px;
    padding-top: 8px;
    border-top: 1px dashed #eceff1;
}
.cartao-item-data { width: auto; max-width: 150px; }
.chips-recompra { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.chips-recompra .btn { min-height: 32px; }
@media (max-width: 767.98px) {
    .chips-recompra .btn { min-height: 36px; min-width: 44px; }
}

/* ---- A JANELA "QUAL A QUANTIDADE?" (AC-2807) ----
   Estreita de propósito: é uma pergunta de um campo só. No celular ela ocupa a largura útil;
   no computador, 380 px no centro — a mesma janela nos dois. O − CAMPO + é o do card, maior:
   aqui ele é a única coisa que a pessoa veio fazer. */
.modal-quantidade { max-width: 380px; }
@media (max-width: 575.98px) {
    .modal-quantidade { max-width: none; margin-left: 16px; margin-right: 16px; }
}
.passo-quantidade-grande { height: 56px; max-width: none; border-radius: .625rem; }
.passo-quantidade-grande .passo-botao { flex-basis: 64px; }
.passo-quantidade-grande .passo-botao .material-icons { font-size: 1.6rem; }
.passo-quantidade-grande .passo-campo { font-size: 1.6rem; }
.modal-quantidade-acoes { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.modal-quantidade-acoes > .btn { margin: 0; min-height: 46px; }

/* O contador de pendências da barra do celular (AC-2908). No computador não existe: a
   lista está na coluna, à vista. */
.resumo-bloqueios { display: none; }
@media (max-width: 991.98px) {
    .resumo-barra .resumo-bloqueios {
        display: flex;
        align-items: center;
        gap: 6px;
        width: 100%;
        min-height: 36px;
        margin-top: 6px;
        padding: 5px 9px;
        border: 1px solid rgba(214, 61, 57, .35);
        border-radius: .5rem;
        background: #FDECEA;
        color: #B71C1C;
        font-size: .6875rem;
        font-weight: 700;
        text-align: left;
    }
    .resumo-barra .resumo-bloqueios .material-icons { font-size: 15px; }
}

/* ---- A PENDÊNCIA LEVA AO LUGAR DELA (AC-2907), E O ERRO VEM PARA O TOPO (AC-2905) ---- */

/* O botão herda a linha: a lista continua sendo uma lista, e o alvo é a linha inteira. */
.falta-ir {
    display: flex;
    align-items: flex-start;
    gap: inherit;
    width: 100%;
    min-height: 32px;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}
.falta-ir:hover { text-decoration: underline; }
.falta-linha .falta-ir .material-icons { flex: 0 0 auto; }
@media (max-width: 991.98px) {
    .falta-ir { min-height: 40px; }
}

/* O RESPIRO acima do campo que a tela rola até o topo. Mora aqui, e não num cálculo no JS:
   `scrollIntoView` mira a borda, e um campo colado no alto parece cortado. 16 px dá o ar de
   "chegou", e no celular sobe para 20 — lá o polegar cobre parte da tela. */
.secao, .form-control, .form-select, textarea, .parametro-campo { scroll-margin-top: 16px; }
@media (max-width: 991.98px) {
    .secao, .form-control, .form-select, textarea { scroll-margin-top: 20px; }
}

/* Alvo de toque de 44 px no celular (AC-1489). No computador não muda nada: mouse
   acerta 30 px, dedo não. */
@media (max-width: 767.98px) {
    .alvo-toque,
    .segmentado-opcao,
    .secao-cabecalho {
        min-height: 44px;
    }
    .resumo-acoes .btn { min-height: 46px; }
}

/* ---- Peças do cadastro de cliente (T-655) ------------------------------------------ */

/* A dica de rodapé de campo/seção. Um só nome para o que antes era `text-xs
   text-secondary` repetido em vinte lugares com espaçamentos diferentes. */
.hint-secao {
    font-size: .65rem;
    color: #7b809a;
    line-height: 1.45;
    margin: 6px 0 0;
}

.aviso-secao {
    display: flex;
    gap: 9px;
    padding: 11px 13px;
    border-radius: .5rem;
    font-size: .75rem;
    line-height: 1.45;
}
.aviso-secao .material-icons { font-size: 18px; flex: 0 0 auto; }
.aviso-secao-tint {
    background: rgba(12, 114, 120, .07);
    color: #0a5a5f;
    border-left: 3px solid #0C7278;
}

/* As quatro referências: caixas curtas lado a lado, em vez de quatro textareas altas
   empilhadas. O conteúdo continua TEXTO LIVRE de propósito (US-364) — o representante
   escreve do jeito que já manda na planilha, e quem liga é o financeiro. */
.caixa-referencia {
    border: 1px solid #e6e9ec;
    border-radius: .5rem;
    padding: 11px;
    height: 100%;
}
.caixa-referencia strong {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: .71875rem;
    font-weight: 500;
    color: #344767;
    margin-bottom: 7px;
}
.caixa-referencia .material-icons { font-size: 15px; color: #7b809a; }

/* Os documentos: área com ESTADO VISÍVEL, em vez de quatro input[type=file] crus.
   Anexado vira borda sólida verde; pendente continua tracejado. */
.caixa-anexo {
    display: flex;
    gap: 11px;
    border: 1.5px dashed #d2d6da;
    border-radius: .5rem;
    padding: 12px;
    background: #fff;
    height: 100%;
    transition: .18s ease;
}
.caixa-anexo:hover { border-color: #5EA6A6; }
.anexo-marca {
    width: 34px;
    height: 34px;
    flex: 0 0 auto;
    border-radius: 9px;
    background: #f8f9fa;
    color: #7b809a;
    display: flex;
    align-items: center;
    justify-content: center;
}
.anexo-marca .material-icons { font-size: 18px; }
.anexo-corpo { flex: 1; min-width: 0; }
.anexo-corpo strong {
    display: block;
    font-size: .75rem;
    font-weight: 500;
    color: #344767;
}
.anexo-corpo > span {
    display: block;
    font-size: .625rem;
    color: #7b809a;
    line-height: 1.4;
    margin-top: 1px;
}
.caixa-anexo-ok {
    border-style: solid;
    border-color: rgba(76, 175, 80, .55);
    background: rgba(76, 175, 80, .05);
}
.caixa-anexo-ok .anexo-marca { background: rgba(76, 175, 80, .16); color: #2e7d32; }
.caixa-anexo-ok .anexo-corpo strong { color: #2e7d32; }
/* A declaração de IR: é ela que sustenta o limite de crédito, e é o documento que o
   financeiro mais procura (AC-1113). Destaque em tudo não destacaria nada. */
.caixa-anexo-chave { border-color: rgba(12, 114, 120, .5); background: rgba(12, 114, 120, .03); }
.caixa-anexo-chave .anexo-marca {
    background-image: linear-gradient(195deg, #5EA6A6 0%, #0C7278 100%);
    color: #fff;
}
.caixa-anexo-chave.caixa-anexo-ok { border-color: rgba(76, 175, 80, .55); background: rgba(76, 175, 80, .05); }
.caixa-anexo-chave.caixa-anexo-ok .anexo-marca {
    background-image: none;
    background-color: rgba(76, 175, 80, .16);
    color: #2e7d32;
}
.anexo-estrela { font-size: 14px !important; color: #0C7278; vertical-align: -2px; }

/* A barra de progresso do que a análise pede. */
.barra-progresso {
    height: 7px;
    border-radius: 999px;
    background: #eceff1;
    overflow: hidden;
    margin: 9px 0 0;
}
.barra-progresso i {
    display: block;
    height: 100%;
    border-radius: 999px;
    background-image: linear-gradient(90deg, #5EA6A6 0%, #0C7278 100%);
    transition: width .3s ease;
}

/* No celular a barra do cadastro mostra o progresso e o botão — o resto flui. */
@media (max-width: 991.98px) {
    .resumo-barra .barra-progresso { margin-top: 6px; }
    .resumo-barra .hint-secao { display: none; }
}

/* ---- A LISTA ROLÁVEL DE RESULTADOS (AC-2598) ----
   Vale para a busca de CLIENTE e para a de PRODUTO: as duas são uma `.list-group` com
   teto de altura, e é o par teto + `.list-group` que produz o defeito.

   ⚠ `.list-group` do Bootstrap é `display: flex; flex-direction: column`. Item de flex
   nasce com `flex-shrink: 1`, então, assim que a soma das linhas passa do teto, o flex
   ESPREME cada linha em vez de deixar a lista rolar. Medido no navegador a 375 px em
   09/09/2026: as linhas ficavam com 44 px (o piso do `.alvo-toque`) enquanto o conteúdo
   pedia 49, 55 e 75 px — e o texto que não cabia caía por cima da linha de baixo. No PC
   não aparecia porque a linha é de 2 linhas de texto e as seis cabiam nos 280 px.

   Por isso o `flex: 0 0 auto` está aqui, na classe da lista, e não na regra da linha do
   cliente: quem esquecer de aplicá-la na próxima lista rolável reencontra o mesmo
   defeito, e ele não dá erro em lugar nenhum — só fica feio no celular de quem vende.

   A lista de resultados da busca de cliente mostra seis linhas à vista no PC (pedido do
   dono do produto em 29/08/2026): cada linha tem ~46 px com o alvo de toque, então
   280 px mostra seis e deixa a sétima meio cortada — que é o que faz a pessoa perceber
   que rola. */
.lista-busca-rolavel {
    max-height: 280px;
    overflow-y: auto;
}
.lista-busca-rolavel > .list-group-item { flex: 0 0 auto; }

/* Linha do resultado: dados à esquerda, o botão "Escolher" à direita (AC-1830). */
.linha-busca-cliente {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    cursor: pointer;
}
.linha-busca-cliente-dados { min-width: 0; }

/* ---- A MESMA LISTA NO CELULAR (AC-2599, AC-2601) ----
   Lado a lado, em 375 px, sobram ~200 px para os dados: o nome do cliente vira uma coluna
   de 3 e 4 linhas e o rótulo do botão quebra em `ESCO/LHER`. Empilhar devolve a largura
   toda ao nome e dá ao botão um alvo que não se erra com o dedo.

   O teto vira `60vh` porque a linha empilhada tem ~110 px: os 280 px do PC mostrariam
   duas linhas e meia. Proporcional à tela serve ao telefone de 640 px e ao de 900 px com
   uma regra só — e, com o teclado aberto, a lista encolhe junto em vez de empurrar o
   campo de busca para fora da tela. */
@media (max-width: 767.98px) {
    .lista-busca-rolavel { max-height: 60vh; }

    .linha-busca-cliente {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }
    .linha-busca-cliente .btn {
        width: 100%;
        white-space: nowrap;
    }
}



/* ==========================================================================
   OLHINHO: esconder os valores da tela (AC-2000, AC-2002)
   ==========================================================================

   Mascara de APRESENTACAO, nunca controle de acesso: o valor continua no HTML. Isto protege
   contra o olhar de quem passa ao lado -- que e o caso descrito ("deixar o pc aberto sem
   mostrar seus numeros") -- e nao contra quem abre o inspetor.

   `blur` e nao `display:none` de proposito: a linha nao muda de tamanho quando o valor some,
   entao a tabela nao "pula" ao ligar e desligar. Uma tela que se reorganiza a cada toque faz
   a pessoa perder o lugar onde estava lendo.

   `user-select: none` impede que o valor saia num Ctrl+C acidental enquanto esta escondido --
   copiar as escondidas seria a forma mais boba de furar a mascara.

   A classe vive no <html> porque o que precisa ser mascarado inclui as modais, que o Bootstrap
   teleporta para o fim do <body>. */
.valores-ocultos .valor-sensivel {
    /* O borrao ACOMPANHA o tamanho da letra, e nao e um numero fixo de pixels.

       7px fixos escondiam bem um numero de tabela e nao escondiam nada no valor de venda
       do dia, que chega a ~76px: borrao menor que a espessura do traco so deixa o numero
       com aparencia de fora de foco -- e continua legivel do outro lado da sala, que e
       exatamente contra quem esta mascara existe.

       `em` resolve contra o font-size do proprio elemento, entao o borrao cresce junto.
       O piso em px segura o caso oposto: texto miudo, onde a fracao daria quase nada. */
    /* Revisto em 02/09/2026 (AC-2203): 14px/0.4em ainda deixava adivinhar os digitos
       de numeros grandes. O pedido e "impossivel de ler" — o raio subiu para o tamanho
       do proprio corpo da letra, que dissolve o traco por completo. */
    filter: blur(max(24px, 1em));
    user-select: none;
    pointer-events: none;
}

/* Quem prefere menos movimento nao ganha transicao, mas ganha a mascara igual. */
@media (prefers-reduced-motion: no-preference) {
    .valor-sensivel {
        transition: filter .15s ease-in-out;
    }
}

/* ---- Atualizar no app instalado (US-708) ----
   O botão só existe no PWA `standalone`: no navegador comum o gesto de puxar já é do
   próprio navegador. A visibilidade é DAQUI, não do JS (ASM-1097). ---- */
.atlas-atualizar {
    align-items: center;
    background: transparent;
    border: 0;
    color: var(--atlas-teal);
    cursor: pointer;
    display: none;
    height: 44px;
    justify-content: center;
    margin: 0;
    padding: 0;
    width: 44px;
}
.atlas-atualizar .material-icons { font-size: 22px; }
@media (display-mode: standalone) {
    .atlas-atualizar { display: inline-flex; }
}

/* O indicador do gesto de puxar (AC-2433): desce com o dedo, fica "pronto" a partir de
   80px e gira enquanto a página recarrega. Só o JS o cria, e só no iPhone instalado. */
.atlas-puxar {
    --atlas-puxar: 0px;
    align-items: center;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .18);
    color: var(--atlas-teal);
    display: flex;
    height: 40px;
    justify-content: center;
    left: 50%;
    opacity: 0;
    pointer-events: none;
    position: fixed;
    top: 0;
    transform: translate(-50%, calc(var(--atlas-puxar) - 48px));
    transition: opacity .15s ease;
    width: 40px;
    z-index: 1090;
}
.atlas-puxar--visivel { opacity: .85; }
.atlas-puxar--pronto { opacity: 1; }
.atlas-puxar--pronto .material-icons { transform: rotate(180deg); transition: transform .2s ease; }
.atlas-puxar--girando .material-icons { animation: atlas-puxar-girar 1s linear infinite; }
@keyframes atlas-puxar-girar {
    to { transform: rotate(360deg); }
}

/* =============================================================================
   Modal "Composição do valor do item" — os parâmetros da linha (US-723, US-724)

   Três regras, e cada uma conserta um problema concreto:

   1. LARGURA FIXA do campo. A modal alinha ~20 pares rótulo/valor em duas colunas;
      com o input em largura automática, cada linha ganha uma largura diferente e a
      coluna de números deixa de ser uma coluna. 7,5rem cabe "999.999,9999".

   2. BORDA no input. O .form-control do Material Dashboard nasce SEM borda — dentro
      de uma modal cinza o campo fica invisível. É o mesmo conserto do carrinho.

   3. O CAMPO EM CONFLITO em vermelho. Quando o recálculo é recusado por cadeado
      (AC-2461), a frase nomeia os campos; a borda mostra QUAL deles na tela, que é
      o que a pessoa procura para clicar no cadeado.

   O `.parametro-sem-cadeado` reserva a largura do botão do cadeado nos campos que
   não o têm, para os inputs não dançarem de linha para linha.
   ============================================================================= */
.parametro-campo {
    width: 7.5rem;
    flex: 0 0 7.5rem;
}

.parametro-campo .form-control {
    border: 1px solid #d2d6da;
}

.parametro-campo.parametro-em-conflito .form-control {
    border-color: #ea0606;
    background-color: #fff5f5;
}

/* ---- A COMPOSIÇÃO DO VALOR, REFEITA (19/09/2026 — parametros-do-item-lucro-visivel) ----

   A COR É O SINAL (AC-2832..AC-2834): vermelho negativo, verde positivo, azul neutro — e azul
   também para o que não é lucro nem prejuízo (preço, base, totais). As três cores passam em
   contraste AA sobre branco E sobre o fundo tingido do próprio destaque; as `text-success` e
   `text-danger` do tema não passam em texto de 12 px, e é por isso que não são elas. */
.resultado-negativo { color: #B71C1C !important; }
.resultado-positivo { color: #1B5E20 !important; }
.resultado-neutro { color: #0D4A8F !important; }

/* O destaque: três blocos, o do lucro em reais mais largo. No celular, preço e % lado a lado e
   o lucro embaixo, na largura toda. */
.parametros-destaque {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}
.parametros-tile {
    min-width: 0;
    padding: 10px 12px;
    border-radius: .625rem;
    background: #E8F1FB;
}
.parametros-tile.resultado-negativo { background: #FDECEA; }
.parametros-tile.resultado-positivo { background: #E8F5E9; }
.parametros-tile-largo { grid-column: 1 / -1; }
.parametros-tile p { margin: 0; color: inherit; }
.parametros-tile-rotulo {
    font-size: .625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
}
.parametros-tile-valor {
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -.3px;
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
}
.parametros-tile-apoio { font-size: .6875rem; line-height: 1.4; }
.parametros-tile-dupla { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 992px) {
    .parametros-destaque { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.5fr); gap: 12px; }
    .parametros-tile-largo { grid-column: auto; }
    .parametros-tile-valor { font-size: 1.5rem; }
}

.parametros-bloco-titulo {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0 0 8px;
    font-size: .625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: #67748e;
}
.parametros-bloco-titulo .material-icons { font-size: 15px; }
.parametros-bloco-editavel { color: #0C7278; }

/* Uma linha de campo: rótulo à esquerda, campo e cadeado à direita. */
.parametro-linha {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-height: 40px;
    margin-bottom: 2px;
}
/* Linha que só se LÊ não é alvo de toque: fica da altura do texto. */
.parametro-linha.parametro-linha-leitura { min-height: 0; padding: 3px 0; margin-bottom: 0; }
.parametro-rotulo { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; min-width: 0; }
.parametro-recalculado {
    padding: 1px 7px;
    border-radius: 999px;
    background: #E8F1FB;
    color: #0D4A8F;
    font-size: .5625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .4px;
}
.parametro-apoio {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    padding-right: calc(40px + .25rem);
    font-size: .75rem;
    color: #67748e;
    font-variant-numeric: tabular-nums;
}
.parametro-so-leitura { font-variant-numeric: tabular-nums; }

/* Campo de cadeado fechado: cinza, e com cara de quem não aceita digitação. */
.parametro-campo.parametro-travado .form-control,
.parametro-campo.parametro-travado .input-group-text { background-color: #f0f2f5; color: #4a5670; }
.parametro-campo .form-control { font-weight: 700; }

/* O CADEADO é botão de verdade: 40 px no computador, 44 no celular. Fechado, azul-marinho cheio
   — o estado tem de se ler sem depender só do desenho do ícone. */
.parametro-cadeado {
    flex: 0 0 40px;
    width: 40px;
    height: 36px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #aeb5c0;
    border-radius: .5rem;
    background: #fff;
    color: #67748e;
}
.parametro-cadeado .material-icons { font-size: 1.05rem; }
.parametro-cadeado-fechado { border-color: #0E223E; background: #0E223E; color: #fff; }
.parametro-sem-cadeado { display: inline-block; width: 40px; }

/* Como o lucro se forma: a conta, uma linha por parcela. */
.parametros-conta { border: 1px solid #e9ecef; border-radius: .625rem; padding: 4px 12px; }
.parametros-conta-linha {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 10px;
    padding: 5px 0;
    border-top: 1px solid #f0f2f5;
    font-size: .75rem;
    font-variant-numeric: tabular-nums;
}
.parametros-conta-linha:first-child { border-top: 0; }
.parametros-conta-linha > span:last-child { white-space: nowrap; }
.parametros-conta-forte { font-weight: 700; border-top-color: #d2d6da; }
.parametros-conta-operador { display: inline-block; width: 1em; font-weight: 700; color: #344767; }

@media (max-width: 767.98px) {
    .parametro-linha { min-height: 48px; }
    .parametro-linha.parametro-linha-leitura { min-height: 0; }
    .parametro-cadeado { flex-basis: 44px; width: 44px; height: 44px; }
    .parametro-sem-cadeado { width: 44px; }
    .parametro-apoio { padding-right: calc(44px + .25rem); }
    .parametro-campo .form-control { min-height: 44px; font-size: .9375rem; }
}

/* O preço da grade vira botão quando a diretoria pode abrir a composição (AC-2457).
   Continua parecendo um preço — sublinhado pontilhado, não azul de link: a coluna é de
   números, e um link azul no meio dela leria como "outra coisa". */
.preco-com-parametros {
    text-decoration: underline dotted;
    text-underline-offset: 3px;
}

.preco-com-parametros:hover {
    text-decoration: underline solid;
}

/* =============================================================================
   `hidden` PRECISA esconder — e não escondia (06/09/2026)

   O tema traz `[hidden] { display: none !important }` na LINHA 540 do
   material-dashboard.css, e `.d-flex { display: flex !important }` na LINHA 8529.
   Especificidade igual (0,1,0), os dois `!important`: quem vem depois ganha. Qualquer
   elemento com `hidden` MAIS um utilitário de display do Bootstrap fica visível para
   sempre.

   O que isso custou: o banner do rascunho do documento (decisão 269) aparecia em TODA
   tela de lançamento, mesmo sem rascunho nenhum e com a hora em branco, e nem
   "Restaurar" nem "Descartar" faziam nada — sem rascunho o script nem chega a ligar os
   botões, e o `hidden = true` do handler também não escondia. Três sintomas, uma causa.

   Este arquivo é carregado DEPOIS do tema (linha 50 do layout, contra a 46), então a
   mesma regra aqui vence pela ordem — e passa a valer para todo `hidden` do sistema,
   que é como o atributo deveria ter se comportado desde sempre.

   Há teste guardando esta regra: sem ela, todo `hidden` do app volta a não esconder, e
   o defeito seria mudo de novo.
   ============================================================================= */
[hidden] {
    display: none !important;
}

/* ---- A BARRA DE COMANDO DAS LISTAGENS (spec listagens-barra-de-comando) ----

   Vendas e Orçamentos, no celular. Nada aqui é cor, fonte ou raio novo: tudo
   sai do que já está definido acima (teal #0C7278, aqua, navy, o raio .75rem e
   a sombra do .card do Material Dashboard).

   O piso de toque é o mesmo que o resto do arquivo já impõe: 44px em campo e
   botão, 40px no chip e no segmentado. */

.barra-comando { display: flex; flex-direction: column; gap: 8px; padding-bottom: 4px; }

/* O escopo, que antes só se trocava abrindo o menu lateral. */
.barra-escopo { display: flex; gap: 3px; background: #eceff1; border-radius: 0.6rem; padding: 3px; }
.barra-escopo button {
    flex: 1 1 0;
    min-height: 40px;
    border: 0;
    border-radius: 0.45rem;
    background: transparent;
    color: var(--atlas-graphite);
    font-size: 0.8rem;
    font-weight: 600;
    padding: 0 6px;
    white-space: nowrap;
}
.barra-escopo button.ativo { background: var(--atlas-teal); color: #fff; }

.barra-linha { display: flex; gap: 8px; align-items: center; }

.barra-busca {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    height: 44px;
    padding: 0 12px;
    border: 1px solid var(--atlas-light-gray);
    border-radius: 0.6rem;
    background: #fff;
    margin: 0;
}
.barra-busca .material-icons { font-size: 1.2rem; color: var(--atlas-blue-gray); }
.barra-busca-campo {
    flex: 1 1 auto;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    font-size: 0.875rem;
    color: #344767;
}
/* O X nativo do type=search some: ele fica em cima do texto em telas estreitas,
   e quem limpa a busca é o chip do trilho. */
.barra-busca-campo::-webkit-search-cancel-button { display: none; }

.barra-botao {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid var(--atlas-light-gray);
    border-radius: 0.6rem;
    background: #fff;
    color: var(--atlas-blue-gray);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}
.barra-botao.tem {
    border-color: var(--atlas-teal);
    background: rgba(12, 114, 120, 0.08);
    color: var(--atlas-teal);
}
.barra-botao .material-icons { font-size: 1.35rem; }
.barra-contador {
    position: absolute;
    top: -7px;
    right: -7px;
    min-width: 19px;
    height: 19px;
    padding: 0 5px;
    border: 2px solid #fff;
    border-radius: 10px;
    background: var(--atlas-teal);
    color: #fff;
    font-size: 0.65rem;
    font-weight: 700;
    line-height: 15px;
    text-align: center;
}

/* O trilho rola na horizontal em vez de quebrar linha: é o que mantém a altura
   da barra constante quando entra o primeiro filtro (AC-2526). */
.barra-trilho {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    scrollbar-width: none;
    margin: 0 -0.5rem;
    padding: 1px 0.5rem 3px;
}
.barra-trilho::-webkit-scrollbar { display: none; }
.barra-chip {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 40px;
    padding: 0 13px;
    border: 1px solid var(--atlas-light-gray);
    border-radius: 20px;
    background: #fff;
    color: var(--atlas-graphite);
    font-size: 0.75rem;
    font-weight: 500;
    white-space: nowrap;
}
.barra-chip.ativo {
    background: rgba(12, 114, 120, 0.1);
    border-color: var(--atlas-teal);
    color: var(--atlas-teal);
    font-weight: 600;
}
.barra-chip .material-icons { font-size: 0.95rem; }
.barra-chip-limpar { border-style: dashed; color: var(--atlas-blue-gray); }

.barra-resumo { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.barra-resumo-valor { font-size: 0.875rem; font-weight: 700; color: var(--atlas-teal); }
.barra-resumo-valor.sem { font-size: 0.78rem; font-weight: 600; color: #7b809a; }
.barra-resumo-qtd { font-size: 0.7rem; color: #7b809a; }
.barra-resumo-nota { font-size: 0.65rem; color: #7b809a; text-align: right; line-height: 1.35; }

/* ---- A folha de baixo: filtros e ordenação ---- */
.folha-veu { position: fixed; inset: 0; z-index: 1080; background: rgba(14, 34, 62, 0.45); }
.folha {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1081;
    display: flex;
    flex-direction: column;
    max-height: 80vh;
    background: #fff;
    border-radius: 1rem 1rem 0 0;
    box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.25);
}
.folha-puxador { flex: 0 0 auto; width: 40px; height: 4px; margin: 8px auto 2px; border-radius: 2px; background: var(--atlas-light-gray); }
.folha-topo { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; padding: 6px 16px 10px; }
.folha-fechar {
    width: 36px; height: 36px; padding: 0; border: 0; background: transparent;
    color: var(--atlas-blue-gray); display: flex; align-items: center; justify-content: center;
}
.folha-corpo { flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; padding: 0 16px 12px; }
.folha-ao-vivo { font-size: 0.7rem; color: #7b809a; line-height: 1.45; margin: 0 0 12px; }
.folha-corpo .form-control,
.folha-corpo .btn { min-height: 44px; }

.folha-pe {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    gap: 9px;
    padding: 10px 16px calc(16px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid #f0f2f5;
    background: #fff;
}
.folha-botoes { display: flex; gap: 10px; align-items: center; }
/* O resultado ao vivo. Com o filtro aplicando na hora, é AQUI que o retorno do
   servidor aparece — a névoa global não pode cobrir a folha (ver
   app-loading.js), ou cada toque apagaria a tela debaixo do polegar. */
.folha-resultado { display: flex; align-items: center; gap: 8px; min-height: 22px; font-size: 0.78rem; color: #344767; }
.folha-girando {
    display: none;
    flex: 0 0 auto;
    width: 14px;
    height: 14px;
    border: 2px solid var(--atlas-light-gray);
    border-top-color: var(--atlas-aqua);
    border-radius: 50%;
    animation: folha-gira 0.7s linear infinite;
}
@keyframes folha-gira { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .folha-girando { animation: none; } }

.folha-limpar {
    height: 46px; padding: 0 14px; border: 0; background: transparent;
    color: var(--atlas-blue-gray); font-size: 0.8rem; font-weight: 600; white-space: nowrap;
}
.folha-confirmar {
    flex: 1 1 auto;
    height: 46px;
    border: 0;
    border-radius: 0.6rem;
    color: #fff;
    background-image: linear-gradient(195deg, #5EA6A6 0%, #0C7278 100%);
    font-size: 0.875rem;
    font-weight: 700;
}
.folha-opcao {
    width: 100%;
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 8px;
    padding: 0 12px;
    border: 1px solid var(--atlas-light-gray);
    border-radius: 0.6rem;
    background: #fff;
    color: #344767;
    font-size: 0.85rem;
    text-align: left;
}
.folha-opcao.ativo { border-color: var(--atlas-teal); background: rgba(12, 114, 120, 0.08); color: var(--atlas-teal); font-weight: 600; }
.folha-opcao-direcao { display: inline-flex; align-items: center; gap: 4px; font-size: 0.7rem; }
.folha-opcao-direcao .material-icons { font-size: 0.95rem; }
.folha-dica { font-size: 0.7rem; color: #7b809a; margin: 2px 0 0; }

/* ---- Continuar a lista sem acertar número de página ---- */
.botao-carregar-mais {
    width: 100%;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border: 1px solid var(--atlas-light-gray);
    border-radius: 0.6rem;
    background: #fff;
    color: var(--atlas-teal);
    font-size: 0.8rem;
    font-weight: 700;
}
.botao-carregar-mais[disabled] { opacity: 0.6; }
.botao-carregar-mais .material-icons { font-size: 1.15rem; }
.fim-da-lista { text-align: center; font-size: 0.7rem; color: #7b809a; margin: 10px 0 0; }

/* ---- A LISTA DE CARTÕES (spec listagens-em-cartao) ----

   A tabela de Vendas e de Orçamentos saiu (AC-2705). Cada documento é um cartão
   com cinco zonas — código, identidade, quando/como, selos e valor — mais o
   rodapé "Inserido via". O markup é um só (partials/cartao-do-documento); o
   que muda é o arranjo:

     · abaixo de 768px: empilhado, cliente e valor na primeira faixa (o cartão
       do celular aprovado em 11/09/2026);
     · modo LINHA: as cinco zonas lado a lado, um documento por linha;
     · modo GRADE: três cartões por linha, cada um como uma ficha.

   Nada aqui é cor, fonte ou raio novo: teal/aqua da marca, o raio .75rem e a
   sombra do .card do Material Dashboard.

   A regra que escondia o representante no recorte próprio (AC-2539) saiu: o
   dono do produto pediu o nome sempre, logo abaixo do cliente (AC-2702). */

.lista-de-cartoes { display: flex; flex-direction: column; gap: 8px; padding: 0 0.75rem; }

.cartao-documento {
    display: flex;
    flex-direction: column;
    gap: 7px;
    min-width: 0;
    padding: 11px 13px;
    border-radius: 0.75rem;
    background: #fff;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    transition: transform .15s ease, box-shadow .15s ease;
}
.cartao-documento:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}
@media (prefers-reduced-motion: reduce) { .cartao-documento, .cartao-documento:hover { transition: none; transform: none; } }

/* `min-width: 0` NÃO é enfeite: item de grade nasce com `min-width: auto`, que o
   proíbe de encolher abaixo do próprio conteúdo — um nome comprido empurraria a
   zona para fora do cartão em vez de quebrar linha. */
.cartao-zona { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.cartao-campo { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; min-width: 0; overflow-wrap: anywhere; }
.cartao-rotulo { font-size: 0.65rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; color: #7b809a; }
.cartao-texto { font-size: 0.75rem; font-weight: 600; color: #7b809a; }
.cartao-codigo-numero { font-size: 0.75rem; font-weight: 700; color: #344767; }
.cartao-cliente { margin: 0; font-size: 0.875rem; font-weight: 600; line-height: 1.25; color: #344767; overflow-wrap: anywhere; }
.cartao-icone { display: none; font-size: 0.95rem; color: var(--atlas-blue-gray); }

.cartao-representante { display: flex; align-items: center; gap: 8px; min-width: 0; }
.cartao-representante-texto { display: flex; flex-direction: column; min-width: 0; }
.cartao-representante-nome { font-size: 0.8rem; font-weight: 600; line-height: 1.25; color: #344767; overflow-wrap: anywhere; }
.cartao-avatar {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.3px;
    color: #fff;
    background-image: linear-gradient(195deg, #5EA6A6 0%, #0C7278 100%);
}
.cartao-avatar.vazio { background: #fff; border: 1.5px dashed #FB8C00; color: #FB8C00; }
.cartao-avatar .material-icons { font-size: 0.85rem; }

.cartao-selos { flex-direction: row; flex-wrap: wrap; align-items: flex-start; gap: 4px; }
.cartao-selos .celula-selos { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
/* O badge do Bootstrap é `nowrap`: na tabela nunca doeu, porque ela rolava para o
   lado. No cartão ele encosta na borda. */
.cartao-documento .badge { white-space: normal; text-align: left; max-width: 100%; }

.cartao-valor-numero { font-size: 0.9rem; font-weight: 700; color: #344767; white-space: nowrap; }
.cartao-frete { font-size: 0.65rem; color: #7b809a; white-space: nowrap; }
.cartao-rodape { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 6px; }

.lista-vazia { margin: 0; padding: 1.5rem 0; text-align: center; font-size: 0.875rem; color: #7b809a; }

/* ---- Abaixo de 768px: o cartão do celular ---- */
@media (max-width: 767.98px) {
    .cartao-documento {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: start;
        gap: 7px 10px;
    }
    /* Cliente e valor na primeira faixa, lado a lado: são as duas coisas que se
       procura. Quem cede espaço é o cliente (`minmax(0, 1fr)`); o valor não quebra. */
    .cartao-identidade { grid-column: 1; grid-row: 1; }
    .cartao-valor { grid-column: 2; grid-row: 1; align-items: flex-end; text-align: right; }
    .cartao-codigo { grid-column: 1 / -1; grid-row: 2; }
    .cartao-quando { grid-column: 1 / -1; grid-row: 3; flex-direction: row; flex-wrap: wrap; gap: 2px 14px; }
    .cartao-selos { grid-column: 1 / -1; grid-row: 4; }
    .cartao-rodape { grid-column: 1 / -1; grid-row: 5; }
}

/* ---- A partir de 768px: os comandos e os dois modos ---- */
@media (min-width: 768px) {
    .lista-de-cartoes { padding: 0 1rem; }
    .cartao-icone { display: inline-block; }
    .cartao-rotulo-campo { display: none; }

    /* Modo LINHA: cinco zonas lado a lado; o rodapé fica embaixo do código. */
    .modo-linha .cartao-documento {
        display: grid;
        grid-template-columns: 150px minmax(0, 1.4fr) 180px minmax(0, 1fr) 160px;
        grid-template-areas:
            "codigo identidade quando selos valor"
            "rodape identidade quando selos valor";
        align-items: center;
        gap: 6px 16px;
        padding: 12px 20px;
    }
    .modo-linha .cartao-codigo { grid-area: codigo; align-self: end; }
    .modo-linha .cartao-rodape { grid-area: rodape; align-self: start; }
    .modo-linha .cartao-identidade { grid-area: identidade; }
    .modo-linha .cartao-quando { grid-area: quando; }
    .modo-linha .cartao-selos { grid-area: selos; align-content: center; }
    .modo-linha .cartao-valor { grid-area: valor; align-items: flex-end; text-align: right; }

    /* Modo GRADE: três fichas por linha. */
    .modo-grade { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
    .modo-grade .cartao-documento {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas:
            "codigo valor"
            "identidade identidade"
            "quando quando"
            "selos selos"
            "rodape rodape";
        align-items: start;
        gap: 10px 12px;
        padding: 14px 16px 12px;
    }
    .modo-grade .cartao-codigo { grid-area: codigo; }
    .modo-grade .cartao-valor { grid-area: valor; align-items: flex-end; text-align: right; }
    .modo-grade .cartao-identidade { grid-area: identidade; }
    .modo-grade .cartao-quando { grid-area: quando; flex-direction: row; flex-wrap: wrap; gap: 6px 16px; padding-top: 10px; border-top: 1px solid #f0f2f5; }
    .modo-grade .cartao-selos { grid-area: selos; }
    .modo-grade .cartao-rodape { grid-area: rodape; padding-top: 10px; border-top: 1px solid #f0f2f5; }
    .modo-grade .cartao-cliente { font-size: 0.9375rem; }
    .modo-grade .cartao-valor-numero { font-size: 1rem; }
    .modo-grade .cartao-avatar { width: 24px; height: 24px; }
}

/* Os comandos da lista no computador: ordenar por chips e o modo linha/grade. */
.lista-comandos {
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin: 0 1rem 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid #f0f2f5;
}
.lista-ordenar { display: flex; align-items: center; gap: 6px; }
.lista-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 32px;
    padding: 0 12px;
    border: 1px solid var(--atlas-light-gray);
    border-radius: 16px;
    background: #fff;
    color: var(--atlas-graphite);
    font-size: 0.75rem;
    font-weight: 500;
    white-space: nowrap;
}
.lista-chip.ativo { background: rgba(12, 114, 120, 0.1); border-color: var(--atlas-teal); color: var(--atlas-teal); font-weight: 600; }
.lista-chip .material-icons { font-size: 0.9rem; }
.lista-visao { display: flex; align-items: center; gap: 12px; }
.lista-modos { display: flex; gap: 4px; }
.lista-modo {
    width: 32px;
    height: 32px;
    padding: 0;
    border: 1px solid var(--atlas-light-gray);
    border-radius: 0.5rem;
    background: #fff;
    color: var(--atlas-blue-gray);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.lista-modo.ativo { border-color: var(--atlas-teal); background: rgba(12, 114, 120, 0.08); color: var(--atlas-teal); }
.lista-modo .material-icons { font-size: 1.1rem; }
.lista-chip[disabled], .lista-modo[disabled] { opacity: 0.6; }


/* ---- A LISTAGEM DE CLIENTES EM CARTÃO (spec clientes-em-cartao) ----

   A tabela de 10 colunas saiu (AC-2718). Cada cliente é um cartão com cinco
   zonas — identidade, onde/contato, atendido por, compra e valor —, e o CSS o
   arruma de três jeitos: empilhado no celular, cinco colunas no modo linha,
   ficha no modo grade. As classes de zona, rótulo, avatar e valor são as do
   cartão de documento (acima): as três listagens se leem igual.

   O contêiner é `.cartao-do-cliente`, e não `.cartao-cliente`: esta última já
   é o NOME do cliente dentro do cartão de documento, e a mesma classe nos dois
   faria o estilo do nome cair sobre o cartão inteiro. */

.cartao-do-cliente {
    display: flex;
    flex-direction: column;
    gap: 7px;
    min-width: 0;
    padding: 11px 13px;
    border-radius: 0.75rem;
    background: #fff;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    transition: transform .15s ease, box-shadow .15s ease;
}
.cartao-do-cliente:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}
@media (prefers-reduced-motion: reduce) { .cartao-do-cliente, .cartao-do-cliente:hover { transition: none; transform: none; } }
/* O cliente da modal aberta continua marcado, como a linha da tabela ficava. */
.cartao-do-cliente.linha-selecionada { background: rgba(12, 114, 120, .10); box-shadow: 0 0 0 1px var(--atlas-teal) inset; }

/* No cartão de cliente o ícone SEMPRE aparece e nomeia o campo (cidade, telefone,
   data, período); o rótulo escrito fica só onde o ícone não basta. */
.cartao-do-cliente .cartao-icone { display: inline-block; }
.cartao-do-cliente .cartao-rotulo-campo { display: none; }

.cartao-fantasia { margin: 0; font-size: 0.75rem; color: #7b809a; line-height: 1.3; overflow-wrap: anywhere; }
.cartao-selos-identidade { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.cartao-onde, .cartao-compra { gap: 4px; }
.cartao-dias { font-size: 0.75rem; font-weight: 700; color: #344767; }
.cartao-texto-fraco { font-weight: 400; }
.cartao-valor-nota { font-size: 0.65rem; color: #7b809a; white-space: nowrap; }

/* As abas viram uma faixa rolável no celular (AC-2716): abaixo de 576px o
   `nav-fill flex-column` empilhava seis linhas entre a pessoa e a lista. */
.abas-rolaveis { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-left: -1.5rem; margin-right: -1.5rem; padding: 0 1.5rem 4px; }
.abas-rolaveis::-webkit-scrollbar { display: none; }
.abas-rolaveis .nav-item { flex: 0 0 auto; }
.abas-rolaveis .nav-link { white-space: nowrap; min-height: 40px; display: inline-flex; align-items: center; }

/* O segmentado de escopo no computador (AC-2740): o mesmo da barra, sozinho. */
.escopo-computador { max-width: 420px; }

/* O trilho de chips no computador (AC-2725, AC-2739): quebra linha em vez de
   rolar, e os chips têm o tamanho da linha de comandos (32px). */
.trilho-computador { margin-top: 12px; }
.barra-trilho-compacto { flex-wrap: wrap; overflow: visible; margin: 0; padding: 0; }
.barra-trilho-compacto .barra-chip { height: 32px; padding: 0 12px; border-radius: 16px; }

/* ---- Abaixo de 768px: o cartão do celular ---- */
@media (max-width: 767.98px) {
    .cartao-do-cliente {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: start;
        gap: 7px 10px;
    }
    .cartao-do-cliente .cartao-identidade { grid-column: 1; grid-row: 1; }
    .cartao-do-cliente .cartao-valor { grid-column: 2; grid-row: 1; align-items: flex-end; text-align: right; }
    .cartao-do-cliente .cartao-onde { grid-column: 1 / -1; grid-row: 2; flex-direction: row; flex-wrap: wrap; gap: 2px 14px; }
    .cartao-do-cliente .cartao-atendido { grid-column: 1 / -1; grid-row: 3; }
    .cartao-do-cliente .cartao-compra { grid-column: 1 / -1; grid-row: 4; flex-direction: row; flex-wrap: wrap; gap: 4px 14px; }
}

/* ---- A partir de 768px: os dois modos ---- */
@media (min-width: 768px) {
    .abas-rolaveis { overflow: visible; margin-left: 0; margin-right: 0; padding: 0; }
    .abas-rolaveis .nav-item { flex: 1 1 0; }
    .abas-rolaveis .nav-link { width: 100%; justify-content: center; }

    /* Modo LINHA: cinco zonas lado a lado. */
    .modo-linha .cartao-do-cliente {
        display: grid;
        grid-template-columns: minmax(0, 1.5fr) 210px 190px 260px 160px;
        grid-template-areas: "identidade onde atendido compra valor";
        align-items: center;
        gap: 6px 16px;
        padding: 12px 20px;
    }
    .modo-linha .cartao-do-cliente .cartao-identidade { grid-area: identidade; }
    .modo-linha .cartao-do-cliente .cartao-onde { grid-area: onde; }
    .modo-linha .cartao-do-cliente .cartao-atendido { grid-area: atendido; }
    .modo-linha .cartao-do-cliente .cartao-compra { grid-area: compra; }
    .modo-linha .cartao-do-cliente .cartao-valor { grid-area: valor; align-items: flex-end; text-align: right; }

    /* Modo GRADE: três fichas por linha. */
    .modo-grade .cartao-do-cliente {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas:
            "identidade valor"
            "onde onde"
            "atendido atendido"
            "compra compra";
        align-items: start;
        gap: 10px 12px;
        padding: 14px 16px 12px;
    }
    .modo-grade .cartao-do-cliente .cartao-identidade { grid-area: identidade; }
    .modo-grade .cartao-do-cliente .cartao-valor { grid-area: valor; align-items: flex-end; text-align: right; }
    .modo-grade .cartao-do-cliente .cartao-onde { grid-area: onde; flex-direction: row; flex-wrap: wrap; gap: 6px 16px; padding-top: 10px; border-top: 1px solid #f0f2f5; }
    .modo-grade .cartao-do-cliente .cartao-atendido { grid-area: atendido; }
    .modo-grade .cartao-do-cliente .cartao-compra { grid-area: compra; flex-direction: row; flex-wrap: wrap; gap: 6px 16px; }
    .modo-grade .cartao-do-cliente .cartao-valor-numero { font-size: 1rem; }
}

/* =====================================================================
   SELETOR EM CARTÕES DA REGIÃO GEOGRÁFICA (spec regiao-geografica-nos-filtros)
   O mesmo componente nas listas de clientes, vendas e orçamentos, no computador
   e na folha de filtros do celular. Cabe em 375px sem rolagem horizontal: a grade
   usa min(100%, …) e o painel nunca passa da largura da tela.
   ===================================================================== */
.seletor-rg { position: relative; min-width: 0; }
.seletor-rg__botao {
    display: flex; align-items: center; gap: 8px; width: 100%; text-align: left;
    cursor: pointer; min-height: 34px; overflow: hidden;
}
.seletor-rg__botao:disabled { cursor: not-allowed; opacity: .75; }
.seletor-rg__escolhida { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.seletor-rg__seta { font-size: 18px; color: var(--atlas-blue-gray); margin-left: auto; }
.seletor-rg__codigo {
    display: inline-block; flex: 0 0 auto; padding: 2px 8px; border-radius: 6px;
    background: var(--atlas-teal); color: #fff; font-size: .72rem; font-weight: 700;
    letter-spacing: .04em; line-height: 1.4;
}
.seletor-rg__painel {
    position: absolute; z-index: 1050; top: calc(100% + 6px); left: 0;
    width: min(640px, calc(100vw - 32px)); max-height: 420px; overflow-y: auto;
    padding: 12px; background: #fff; border: 1px solid var(--atlas-light-gray);
    border-radius: 12px; box-shadow: 0 12px 32px rgba(14, 34, 62, .16);
}
.seletor-rg__painel.a-direita { left: auto; right: 0; }
.seletor-rg__busca { margin-bottom: 10px; }
.seletor-rg__grade {
    display: grid; gap: 8px;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 180px), 1fr));
}
.seletor-rg__cartao {
    display: flex; flex-direction: column; gap: 4px; min-width: 0; text-align: left;
    padding: 10px 12px; background: var(--atlas-white); border: 1px solid var(--atlas-light-gray);
    border-radius: 10px; cursor: pointer; transition: border-color .15s, box-shadow .15s, background .15s;
}
.seletor-rg__cartao:hover, .seletor-rg__cartao:focus-visible {
    border-color: var(--atlas-aqua); box-shadow: 0 2px 10px rgba(12, 114, 120, .14); outline: none;
}
.seletor-rg__cartao.is-ativo { border-color: var(--atlas-teal); background: rgba(94, 166, 166, .12); box-shadow: inset 0 0 0 1px var(--atlas-teal); }
.seletor-rg__cartao--todas { justify-content: center; }
.seletor-rg__topo { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.seletor-rg__total { font-size: .68rem; color: var(--atlas-blue-gray); white-space: nowrap; }
.seletor-rg__nome { font-size: .85rem; font-weight: 700; color: var(--atlas-navy); line-height: 1.25; overflow-wrap: anywhere; }
.seletor-rg__cidades { font-size: .72rem; color: var(--atlas-graphite); line-height: 1.35; overflow-wrap: anywhere; }
.seletor-rg__cidades em { font-style: normal; color: var(--atlas-teal); font-weight: 600; white-space: nowrap; }
.seletor-rg__vazio { margin: 8px 0 0; font-size: .78rem; color: var(--atlas-blue-gray); }

/* Na folha de filtros do celular o painel entra no fluxo, em vez de flutuar. */
@media (max-width: 767.98px) {
    .seletor-rg__painel { position: static; width: 100%; max-height: none; margin-top: 8px; box-shadow: none; }
}

/* =====================================================================
   A BARRA DO LOTE da lista de clientes (spec mover-clientes-em-lote) e a
   caixinha do cartão. A barra fica grudada acima da lista para continuar à
   mão depois de rolar; no celular ela quebra em duas linhas.
   ===================================================================== */
.barra-do-lote {
    position: sticky; top: 8px; z-index: 5; margin-bottom: 12px;
    padding: 10px 12px; border: 1px solid var(--atlas-teal); border-radius: 12px;
    background: var(--atlas-white); box-shadow: 0 6px 18px rgba(14, 34, 62, .12);
}
.barra-do-lote-linha { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.barra-do-lote-contagem { font-size: .8rem; font-weight: 700; color: var(--atlas-navy); }
.barra-do-lote-motivo { flex: 1 1 200px; min-width: 0; max-width: 320px; }
.barra-do-lote-recusados { margin: 8px 0 0; padding-left: 18px; font-size: .75rem; color: var(--atlas-graphite); }
.barra-do-lote-recusados li { margin-bottom: 2px; }

/* A CAIXINHA DO CARTÃO.
   Posicionada no canto, e não como célula: `modo-linha` e `modo-grade` são grades com
   áreas nomeadas fixas, e um filho sem área nomeada cai numa linha implícita, fora da
   vista. O `com-selecao` no cartão é quem abre a margem para ela. Alvo de 20px, com folga
   em volta para o dedo. */
.cartao-do-cliente { position: relative; }
.cartao-selecao {
    position: absolute; top: 10px; left: 10px; z-index: 2;
    display: flex; align-items: center; padding: 4px;
}
.cartao-selecao .form-check-input {
    /* `appearance: auto` de propósito: o tema desenha o checkbox como um círculo
       clarinho, que na lista some no meio do cartão (visto em 22/09/2026). A caixa
       NATIVA é reconhecível de imediato — e `accent-color` a pinta com a cor da marca. */
    appearance: auto; -webkit-appearance: checkbox;
    width: 20px; height: 20px; margin: 0; cursor: pointer;
    accent-color: var(--atlas-teal);
    border-radius: 4px; box-shadow: none;
}
.cartao-do-cliente.com-selecao { padding-left: 42px; }
.modo-linha .cartao-do-cliente.com-selecao { padding-left: 46px; }
@media (max-width: 767.98px) {
    /* No celular o cartão é empilhado e o topo à esquerda é o nome: a caixinha vai para a
       direita, onde não disputa espaço com ele. */
    .cartao-selecao { left: auto; right: 10px; }
    .cartao-do-cliente.com-selecao { padding-left: 13px; padding-right: 44px; }
}
.barra-do-lote-resultado { margin: 8px 0 0; font-size: .78rem; font-weight: 600; color: var(--atlas-teal); }

/* =====================================================================
   OS FILTROS DE ORÇAMENTOS E VENDAS (spec filtros-de-orcamentos-e-vendas).

   A barra do computador (busca, Período, Representantes, Região, Canal e
   "Mais filtros"), o painel "Mais filtros", o grupo de escolha — um markup só
   para o painel, o menu Canal e a folha do celular — e a lista de
   representantes, que serve ao menu do computador e à segunda folha.

   Mesma língua visual do trilho de chips e da barra de comando do celular:
   teal para o que está valendo, cinza-claro para o resto, alvos de 44px na
   folha (AC-3420).
   ===================================================================== */

/* ---- A barra do computador ---- */
.barra-filtros__linha { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.barra-filtros__busca {
    flex: 1 1 240px; min-width: 200px; height: 40px; margin: 0;
    display: flex; align-items: center; gap: 8px; padding: 0 12px;
    border: 1px solid var(--atlas-light-gray); border-radius: 10px; background: #fff;
}
.barra-filtros__busca .material-icons { font-size: 1.15rem; color: var(--atlas-blue-gray); }
.barra-filtros__busca input {
    flex: 1 1 auto; min-width: 0; border: 0; outline: 0; background: transparent;
    font-size: .875rem; color: #344767;
}
.barra-filtros__menu { position: relative; }
.barra-filtros__botao {
    height: 40px; max-width: 260px; display: inline-flex; align-items: center; gap: 6px;
    padding: 0 12px; border: 1px solid var(--atlas-light-gray); border-radius: 10px;
    background: #fff; color: #344767; font-size: .85rem; font-weight: 500;
    white-space: nowrap; cursor: pointer;
}
.barra-filtros__botao span { overflow: hidden; text-overflow: ellipsis; }
.barra-filtros__botao .material-icons { font-size: 1.1rem; color: var(--atlas-blue-gray); }
.barra-filtros__botao.is-ativo {
    border-color: var(--atlas-teal); background: rgba(12, 114, 120, .08);
    color: var(--atlas-teal); font-weight: 600;
}
.barra-filtros__botao.is-ativo .material-icons { color: var(--atlas-teal); }
.barra-filtros__botao .barra-filtros__seta { font-size: 1rem; }
.barra-filtros__botao:focus-visible,
.barra-filtros__limpar:focus-visible,
.barra-filtros__pronto:focus-visible,
.grupo-opcoes__opcao:focus-visible { outline: 2px solid var(--atlas-teal); outline-offset: 2px; }
.barra-filtros__limpar {
    height: 40px; padding: 0 10px; border: 0; background: transparent;
    color: var(--atlas-blue-gray); font-size: .8rem; cursor: pointer;
}
.barra-filtros__limpar:hover { color: var(--atlas-teal); text-decoration: underline; }
.barra-filtros__pop {
    position: absolute; z-index: 1050; top: calc(100% + 6px); left: 0;
    width: min(420px, calc(100vw - 32px)); padding: 12px;
    background: #fff; border: 1px solid var(--atlas-light-gray); border-radius: 12px;
    box-shadow: 0 12px 32px rgba(14, 34, 62, .16);
}
.barra-filtros__pop--curto { width: auto; min-width: 240px; }
.barra-filtros__pop--representantes { width: min(400px, calc(100vw - 32px)); padding: 0; overflow: hidden; }
.barra-filtros__pe {
    display: flex; align-items: center; gap: 10px; padding: 10px 12px;
    border-top: 1px solid #eceff3; background: #fafbfc;
    font-size: .75rem; color: var(--atlas-blue-gray);
}
.barra-filtros__pe > span { flex: 1 1 auto; }
.barra-filtros__pronto {
    height: 34px; padding: 0 16px; border: 0; border-radius: 8px;
    background: var(--atlas-teal); color: #fff; font-size: .8rem; font-weight: 600; cursor: pointer;
}
/* Região: o seletor em cartões de sempre, com a cara dos botões da barra. */
.barra-filtros__regiao { width: 220px; }
.barra-filtros__regiao .seletor-rg__botao {
    height: 40px; padding: 0 12px; border: 1px solid var(--atlas-light-gray) !important;
    border-radius: 10px; background: #fff;
}

/* ---- O painel "Mais filtros" ---- */
.painel-mais { margin-top: 12px; border: 1px solid var(--atlas-light-gray); border-radius: 12px; background: #fafbfc; }
.painel-mais .campos-de-filtro--mais {
    display: grid; gap: 18px 24px; padding: 16px 18px;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr));
}
.painel-mais__pe { display: flex; align-items: center; gap: 12px; padding: 10px 18px; border-top: 1px solid #e6e9ee; }
.painel-mais__resultado { flex: 1 1 auto; font-size: .8rem; color: var(--atlas-blue-gray); }

/* ---- Um grupo de escolha: rótulo, opções em chip, dica ---- */
.grupo-opcoes { display: flex; flex-direction: column; gap: 8px; min-width: 0; margin: 0; }
.grupo-opcoes__rotulo {
    font-size: .68rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #5f6b7a;
}
.grupo-opcoes__lista { display: flex; flex-wrap: wrap; gap: 6px; }
.grupo-opcoes__opcao {
    min-height: 34px; padding: 0 12px; border: 1px solid var(--atlas-light-gray); border-radius: 17px;
    background: #fff; color: #344767; font-size: .8rem; font-weight: 500; white-space: nowrap; cursor: pointer;
}
.grupo-opcoes__opcao:hover { border-color: var(--atlas-aqua); }
.grupo-opcoes__opcao.is-ativo {
    border-color: var(--atlas-teal); background: rgba(12, 114, 120, .1); color: var(--atlas-teal); font-weight: 600;
}
.grupo-opcoes__opcao[disabled] { opacity: .6; }
.grupo-opcoes__dica { font-size: .7rem; color: var(--atlas-blue-gray); }
.grupo-opcoes__par { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.grupo-opcoes__campo { display: flex; flex-direction: column; gap: 4px; margin: 0; font-size: .72rem; color: var(--atlas-blue-gray); }
.grupo-opcoes .form-control {
    height: 36px; padding: 0 10px; border: 1px solid var(--atlas-light-gray) !important;
    border-radius: 8px; background: #fff; font-size: .8rem;
}

/* ---- A linha "Representantes" da folha do celular ---- */
.linha-representantes {
    display: flex; align-items: center; gap: 10px; width: 100%; min-height: 52px;
    padding: 8px 10px 8px 12px; border: 1px solid var(--atlas-light-gray); border-radius: 12px;
    background: #fff; color: #344767; text-align: left; cursor: pointer;
}
.linha-representantes.is-ativo { border-color: var(--atlas-teal); background: rgba(12, 114, 120, .08); }
.linha-representantes .material-icons { color: var(--atlas-teal); }
.linha-representantes__texto {
    flex: 1 1 auto; min-width: 0; font-size: .875rem; font-weight: 600;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Na folha do celular: um grupo embaixo do outro, e alvo de 44px (AC-3420). */
.folha-corpo .campos-de-filtro { display: flex; flex-direction: column; gap: 20px; }
.folha-corpo .grupo-opcoes__opcao { min-height: 44px; padding: 0 14px; border-radius: 22px; font-size: .85rem; }
.folha-corpo .grupo-opcoes .form-control { height: 44px; }
.folha--alta { max-height: 92vh; }

/* ---- A lista de representantes (menu do computador e segunda folha) ---- */
.seletor-reps { display: flex; flex-direction: column; min-width: 0; }
.seletor-reps__topo { display: flex; flex-direction: column; gap: 10px; padding: 12px; }
.seletor-reps__busca {
    display: flex; align-items: center; gap: 8px; height: 40px; margin: 0; padding: 0 12px;
    border: 1px solid var(--atlas-teal); border-radius: 10px; background: #fff;
}
.seletor-reps__busca .material-icons { font-size: 1.1rem; color: var(--atlas-blue-gray); }
.seletor-reps__busca input {
    flex: 1 1 auto; min-width: 0; border: 0; outline: 0; background: transparent; font-size: .875rem; color: #344767;
}
.seletor-reps__atalhos { display: flex; align-items: center; gap: 6px; }
.seletor-reps__atalho {
    height: 30px; padding: 0 12px; border: 1px solid var(--atlas-light-gray); border-radius: 15px;
    background: #fff; color: #344767; font-size: .8rem; cursor: pointer;
}
.seletor-reps__inativos {
    display: flex; align-items: center; gap: 6px; margin: 0 0 0 auto;
    font-size: .8rem; color: var(--atlas-blue-gray); cursor: pointer;
}
.seletor-reps__inativos input { accent-color: var(--atlas-teal); }
.seletor-reps__lista { max-height: 352px; overflow-y: auto; border-top: 1px solid #eceff3; padding-bottom: 6px; }
.seletor-reps__cabeca { display: flex; align-items: center; gap: 8px; padding: 12px 14px 4px; }
.seletor-reps__nome-grupo {
    flex: 1 1 auto; min-width: 0; font-size: .68rem; font-weight: 700; letter-spacing: .04em;
    text-transform: uppercase; color: #5f6b7a;
}
.seletor-reps__contagem { font-size: .72rem; color: var(--atlas-blue-gray); white-space: nowrap; }
.seletor-reps__acao-grupo {
    padding: 4px 2px; border: 0; background: transparent; color: var(--atlas-teal);
    font-size: .75rem; font-weight: 600; white-space: nowrap; cursor: pointer;
}
.seletor-reps__linha { display: flex; align-items: center; gap: 10px; min-height: 40px; margin: 0; padding: 0 14px; cursor: pointer; }
.seletor-reps__linha:hover { background: rgba(12, 114, 120, .04); }
.seletor-reps__linha.is-marcado { background: rgba(12, 114, 120, .07); }
.seletor-reps__linha input { flex: 0 0 auto; width: 16px; height: 16px; margin: 0; accent-color: var(--atlas-teal); }
.seletor-reps__avatar {
    flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%; background: #e1eeef; color: var(--atlas-teal);
    font-size: .6rem; font-weight: 700; display: inline-flex; align-items: center; justify-content: center;
}
.seletor-reps__nome {
    flex: 1 1 auto; min-width: 0; font-size: .85rem; color: #344767;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.seletor-reps__linha.is-marcado .seletor-reps__nome { font-weight: 600; }
.seletor-reps__inativo { flex: 0 0 auto; padding: 2px 6px; border-radius: 6px; background: #eceff3; color: #4a5563; font-size: .68rem; }
.seletor-reps__qtd {
    flex: 0 0 auto; min-width: 22px; text-align: right; font-size: .75rem;
    color: var(--atlas-blue-gray); font-variant-numeric: tabular-nums;
}
.seletor-reps__vazio { margin: 0; padding: 18px 14px; font-size: .8rem; color: var(--atlas-blue-gray); }

/* Na segunda folha do celular a lista ocupa a folha inteira, com linhas de 52px. */
.seletor-reps--celular .seletor-reps__topo { padding: 0 0 10px; }
.seletor-reps--celular .seletor-reps__busca { height: 44px; }
.seletor-reps--celular .seletor-reps__atalho { height: 40px; padding: 0 16px; border-radius: 20px; }
.seletor-reps--celular .seletor-reps__lista { max-height: none; overflow: visible; margin: 0 -16px; }
.seletor-reps--celular .seletor-reps__linha { min-height: 52px; padding: 0 16px; gap: 12px; }
.seletor-reps--celular .seletor-reps__linha input { width: 20px; height: 20px; }
.seletor-reps--celular .seletor-reps__avatar { width: 32px; height: 32px; font-size: .7rem; }
.seletor-reps--celular .seletor-reps__nome { font-size: .95rem; white-space: normal; }

/* =====================================================================
   A TELA DE PRODUTOS EM CARTÃO (spec produtos-em-cartoes-com-vendas-do-periodo)

   A tabela de catálogo saiu (AC-3530). Cada produto é um cartão com cinco zonas —
   identidade, vendido, participação, preço e faturamento —, arrumado de três jeitos:
   empilhado no celular, lado a lado no modo linha, ficha no modo grade. As classes de
   rótulo e de número são as dos cartões de documento e de cliente: as listas se leem
   igual. As zonas têm prefixo `produto-` para não herdar as regras de posição das zonas
   `cartao-identidade`/`cartao-valor`, que valem para qualquer elemento no celular.
   ===================================================================== */

.produtos-resumo {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr));
    gap: 12px;
    margin-bottom: 16px;
}
.produtos-resumo__cartao {
    display: flex; flex-direction: column; gap: 6px; min-width: 0;
    padding: 14px 16px; border-radius: 0.75rem; background: #fff;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}
.produtos-resumo__topo { display: flex; align-items: center; gap: 10px; font-size: 0.75rem; color: #67748e; }
.produtos-resumo__icone {
    flex: 0 0 auto; width: 36px; height: 36px; border-radius: 9px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--atlas-teal); color: #fff;
}
.produtos-resumo__icone .material-icons { font-size: 1.15rem; }
.produtos-resumo__numero { font-size: 1.3rem; font-weight: 700; color: #344767; line-height: 1.2; overflow-wrap: anywhere; }
.produtos-resumo__nota { font-size: 0.75rem; color: #67748e; }

.produtos-so-suas {
    display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px;
    border-radius: 18px; background: rgba(94, 166, 166, 0.16); color: #0a5c61;
    font-size: 0.8rem; font-weight: 500;
}
.produtos-so-suas .material-icons { font-size: 1rem; }
.produtos-variedade { width: auto; max-width: 220px; height: 40px; }

.produtos-periodo { width: min(440px, calc(100vw - 48px)); }
.produtos-periodo__grade { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }

.lista-de-produtos { padding: 0; }
.lista-comandos--produtos { margin: 0 0 12px; }
.lista-comandos--produtos .lista-ordenar { flex-wrap: wrap; }
.lista-comandos--produtos .lista-visao { flex-wrap: wrap; }

.cartao-do-produto {
    position: relative;
    display: flex; flex-direction: column; gap: 10px; min-width: 0;
    padding: 12px 14px; border-radius: 0.75rem; background: #fff;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}
/* Quem não vendeu no período fica no fim, esmaecido (AC-3540). */
.cartao-do-produto.sem-venda { opacity: 0.62; }
.cartao-do-produto.com-selecao { padding-left: 46px; }

.produto-nome { margin: 0; font-size: 0.875rem; font-weight: 700; line-height: 1.3; color: #344767; overflow-wrap: anywhere; }
.produto-selos { display: flex; flex-wrap: wrap; gap: 4px 6px; align-items: center; }
.produto-selo {
    font-size: 0.68rem; font-weight: 700; line-height: 1.4; padding: 2px 7px; border-radius: 6px;
    background: rgba(94, 166, 166, 0.16); color: #0a5c61;
}
.produto-selo--curva-a { background: var(--atlas-navy); color: #fff; }
.produto-selo--curva-b { background: #dfe3e8; color: #344767; }
.produto-selo--curva-c { background: #f0f2f5; color: #67748e; }
.produto-selo--formula { background: #e8f1fb; color: #1a5fb4; }
.produto-selo--sem-peso,
.produto-selo--sem-unidade { background: #fff; border: 1px solid #B45309; color: #8a4207; }
.produto-meta { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 0.75rem; color: #67748e; }
.produto-meta .material-icons { font-size: 0.95rem; vertical-align: -3px; }
.produto-catalogo { font-size: 0.72rem; color: #67748e; overflow-wrap: anywhere; }
.produto-acoes { display: flex; flex-wrap: wrap; gap: 2px; margin-left: -8px; }

.produto-numero { font-size: 1rem; font-weight: 700; color: #344767; white-space: nowrap; }
.produto-numero--menor { font-size: 0.875rem; }
.produto-sub { font-size: 0.75rem; color: #67748e; }
.produto-sub--alerta { color: #8a4207; }

.produto-barra { display: grid; grid-template-columns: 78px minmax(0, 1fr) 46px; align-items: center; gap: 8px; font-size: 0.7rem; color: #67748e; }
.produto-barra__trilho { position: relative; display: block; height: 6px; border-radius: 3px; background: #e9ecef; overflow: hidden; }
.produto-barra__cheio { position: absolute; top: 0; bottom: 0; left: 0; border-radius: 3px; background: var(--atlas-teal); }
.produto-barra__cheio--t { background: var(--atlas-aqua); }
.produto-barra__valor { text-align: right; font-size: 0.75rem; font-weight: 700; color: #344767; }

.produto-variacao { display: inline-flex; align-items: center; gap: 2px; font-size: 0.75rem; font-weight: 700; }
.produto-variacao .material-icons { font-size: 1rem; }
.produto-variacao--sobe { color: #2E7D32; }
.produto-variacao--desce { color: #C62828; }
.produto-variacao--novo { color: var(--atlas-teal); }
.produto-variacao--nada { color: #67748e; }

/* ---- Abaixo de 768px: uma coluna, faturamento ao lado do nome ---- */
@media (max-width: 767.98px) {
    .cartao-do-produto {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: start;
        gap: 10px 12px;
    }
    .cartao-do-produto.so-catalogo { display: flex; }
    .cartao-do-produto .produto-identidade { grid-column: 1; grid-row: 1; }
    .cartao-do-produto .produto-faturamento { grid-column: 2; grid-row: 1; align-items: flex-end; text-align: right; }
    .cartao-do-produto .produto-vendido { grid-column: 1; grid-row: 2; }
    .cartao-do-produto .produto-preco { grid-column: 2; grid-row: 2; align-items: flex-end; text-align: right; }
    .cartao-do-produto .produto-participacao { grid-column: 1 / -1; grid-row: 3; }
    .cartao-do-produto.com-selecao { padding-left: 14px; padding-right: 44px; }
    .produtos-variedade { max-width: none; flex: 1 1 100%; }
}

/* ---- A partir de 768px: os dois modos ----
   Três faixas, medidas na prévia de 25/09/2026: com cinco zonas lado a lado, abaixo de
   ~1400px de tela (o menu lateral come 250px) o nome do produto ficava numa coluna de uma
   letra. Por isso, entre 768px e 1399px o modo linha põe a identidade em cima e os quatro
   números embaixo; as cinco zonas lado a lado só a partir de 1400px. */
@media (min-width: 768px) {
    /* As abas rolam em vez de estourar: são sete na Nutrição. */
    .produtos-abas.abas-rolaveis { overflow-x: auto; }
    .produtos-abas.abas-rolaveis .nav-item { flex: 0 0 auto; }

    .modo-linha .cartao-do-produto {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr);
        grid-template-areas:
            "identidade identidade identidade identidade"
            "vendido participacao preco faturamento";
        align-items: center;
        gap: 10px 16px;
        padding: 12px 20px;
    }
    .modo-linha .cartao-do-produto.com-selecao { padding-left: 46px; }
    .modo-linha .cartao-do-produto.so-catalogo { display: flex; }
    .modo-linha .produto-identidade { grid-area: identidade; }
    .modo-linha .produto-vendido { grid-area: vendido; padding-top: 10px; border-top: 1px solid #f0f2f5; }
    .modo-linha .produto-participacao { grid-area: participacao; padding-top: 10px; border-top: 1px solid #f0f2f5; }
    .modo-linha .produto-preco { grid-area: preco; padding-top: 10px; border-top: 1px solid #f0f2f5; }
    .modo-linha .produto-faturamento { grid-area: faturamento; align-items: flex-end; text-align: right; padding-top: 10px; border-top: 1px solid #f0f2f5; }

    .modo-grade.lista-de-produtos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
    .modo-grade .cartao-do-produto {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        grid-template-areas:
            "identidade identidade"
            "vendido faturamento"
            "participacao participacao"
            "preco preco";
        align-items: start;
        gap: 10px 12px;
        padding: 14px 16px;
    }
    .modo-grade .cartao-do-produto.so-catalogo { display: flex; }
    .modo-grade .produto-identidade { grid-area: identidade; }
    .modo-grade .produto-vendido { grid-area: vendido; }
    .modo-grade .produto-faturamento { grid-area: faturamento; align-items: flex-end; text-align: right; }
    .modo-grade .produto-participacao { grid-area: participacao; padding-top: 10px; border-top: 1px solid #f0f2f5; }
    .modo-grade .produto-preco { grid-area: preco; }
}

@media (min-width: 1200px) {
    .modo-grade.lista-de-produtos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* A partir de 1400px, as cinco zonas numa linha só. */
@media (min-width: 1400px) {
    .modo-linha .cartao-do-produto {
        grid-template-columns: minmax(260px, 1fr) 120px 210px 150px 160px;
        grid-template-areas: "identidade vendido participacao preco faturamento";
        gap: 6px 16px;
    }
    .modo-linha .produto-vendido,
    .modo-linha .produto-participacao,
    .modo-linha .produto-preco,
    .modo-linha .produto-faturamento { padding-top: 0; border-top: 0; }
}