/* =====================================================================
   Xingu Finance — 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. É o mesmo
   arquivo, com a mesma função, que o Atlas mantém em public/css/custom.css.

   O ARQUIVO TEM DUAS PARTES, e a diferença entre elas importa na hora de mexer:

   1. A PALETA (primeiro bloco): o que é do Finance — índigo no lugar do rosa do
      Material. Muda aqui, e só aqui, quando a marca mudar.

   2. O RESTO: as correções de layout que o Atlas acumulou em produção — topbar
      que cabe no celular, X do menu, modais acima do menu, campos de data no
      iOS, barras de rolagem das tabelas, névoa de carregamento. É CÓPIA
      RASTREADA do custom.css do Atlas em 07/09/2026, com a paleta trocada e o
      prefixo `atlas-` virando `finance-`. Correção feita no Atlas NÃO chega aqui
      sozinha: quem sincronizar de novo compara com o custom.css do Atlas a
      partir daquela data e traz só o que é genérico — regra de tela do Atlas
      (agenda, radar, cadastro de cliente, olhinho) fica lá. É a mesma dívida que
      o Hermes registrou como DT-006.

   Cache: o layout carrega este arquivo com `?v=` no href. Bump manual ao editar.

   PALETA DA MARCA (Xingu Finance). O accent PRIMÁRIO do Material (originalmente
   rosa #e91e63) foi trocado pelo ÍNDIGO; a sidebar escura, pelo índigo profundo.
     - primário (índigo):  #2F3E9E. Gradiente: claro (#6B79D6) -> índigo.
     - índigo profundo:    #1B1F3B — sidebar, superfícies escuras, títulos.
   Verde/vermelho SEMÂNTICOS (sucesso/erro) continuam vindo do tema.

   ⚠ SUPOSIÇÃO, não decisão: o índigo foi escolhido em 07/09/2026 só para não
   colidir com o teal do Atlas, o vermelho do Hermes e o verde do Orion. Não veio
   de um kit de identidade. Trocar é editar os valores deste bloco.
   ===================================================================== */

/* Variáveis da identidade Xingu Finance. */
:root {
    --finance-indigo-deep: #1B1F3B;
    --finance-indigo: #2F3E9E;
    --finance-indigo-light: #6B79D6;
    --finance-blue-gray: #6E7B8A;
    --finance-light-gray: #D2D6DA;
    --finance-graphite: #2D323B;
    --finance-white: #F8F9F9;
}

/* ---- Sidebar / superfícies escuras: cinza do tema -> NAVY da marca ---- */
.bg-gradient-dark {
    background-image: linear-gradient(195deg, #333A6B 0%, #1B1F3B 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, #6B79D6 0%, #2F3E9E 100%) !important;
}

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

/* ---- Texto primário (links e rótulos que usavam rosa) ---- */
.text-primary {
    color: #2F3E9E !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, #6B79D6 0%, #2F3E9E 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: #2F3E9E !important;
    border-color: #2F3E9E !important;
}
.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active,
.btn-outline-primary.active {
    background-color: #2F3E9E !important;
    border-color: #2F3E9E !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: #2F3E9E !important;
    border-color: #2F3E9E !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: #2F3E9E !important;
}
.input-group-outline.is-focused .form-control,
.input-group-outline .form-control:focus {
    border-color: #2F3E9E !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, #6B79D6 0%, #2F3E9E 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: #2F3E9E;
    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, #6B79D6 0%, #2F3E9E 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: #6B79D6; /* 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: #6B79D6; }
}

/* ==================== 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(--finance-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(--finance-indigo-deep);
    /* 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(--finance-light-gray);
    background: #fff;
    color: var(--finance-indigo);
    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(--finance-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(--finance-indigo); 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(--finance-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(--finance-blue-gray); }
.agenda-tira-dia.hoje { border-color: var(--finance-indigo-light); }
.agenda-tira-dia.ativo { background: var(--finance-indigo); color: #fff; border-color: var(--finance-indigo); }
.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(--finance-indigo); }

/* ---- Chip de vencidas ---- */
.agenda-chip-vencidas {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    border: 1px solid var(--finance-light-gray);
    background: #fff;
    color: var(--finance-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(--finance-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(--finance-indigo-deep); }
.agenda-hora-fim,
.agenda-hora-vazia { font-size: 0.68rem; color: var(--finance-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(--finance-indigo-deep);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.agenda-card-sub {
    display: block;
    font-size: 0.75rem;
    color: var(--finance-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(--finance-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(--finance-indigo);
    font-weight: 600;
    font-size: 0.85rem;
    padding: 0.35rem 0.7rem;
    white-space: nowrap;
}
.agenda-btn-acao:hover { background: var(--finance-indigo); 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(--finance-indigo)); 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(--finance-blue-gray); font-size: 0.8rem; }
.agenda-btn-acao-fraco:hover { background: var(--finance-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(--finance-blue-gray);
}
.agenda-grupo-linha { flex: 1 1 auto; height: 1px; background: var(--finance-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(--finance-indigo), 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(--finance-light-gray);
}
.agenda-resumo { font-size: 0.75rem; white-space: nowrap; color: var(--finance-indigo-deep); }
.agenda-resumo-feitas { color: var(--finance-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(--finance-light-gray);
    border-radius: 0.5rem;
    background: #fff;
    color: var(--finance-indigo-deep);
}
.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(--finance-indigo);
    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(--finance-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(--finance-indigo-deep); }
.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(--finance-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(--finance-graphite);
    font-size: 0.8rem;
    font-weight: 600;
}
.agenda-escopo-segmentado button.ativo { background: var(--finance-indigo); 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(--finance-light-gray);
    padding-left: 0.7rem;
    margin-left: 0.2rem;
}
.agenda-historico-quando {
    flex: 0 0 4.5rem;
    font-size: 0.72rem;
    color: var(--finance-blue-gray);
    padding-top: 1px;
}

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

@media (max-width: 1199.98px) {
    body.g-sidenav-pinned .finance-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;
    }
    .finance-menu-fechar .material-icons { font-size: 26px; line-height: 1; }
}

@media (min-width: 1200px) {
    .finance-topbar { display: flex; }
    .finance-topbar__identidade { flex: 1 1 auto; }
    .finance-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(--finance-indigo);
    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(--finance-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: #2F3E9E #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: #2F3E9E;
    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: #1B1F3B;                      /* navy da marca */
}

/* Barra espelho: só a barra, sem conteúdo. */
.tr-barra {
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: auto;
    scrollbar-color: #2F3E9E #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 #2F3E9E, navy #1B1F3B, 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, #6B79D6 0%, #2F3E9E 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, #333A6B 0%, #1B1F3B 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 #2F3E9E;
    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, #6B79D6 0%, #2F3E9E 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. Ganha caixa própria 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, ele viraria mais uma linha de total. */
.resumo-comissao {
    background-image: linear-gradient(195deg, rgba(94, 166, 166, .14) 0%, rgba(12, 114, 120, .12) 100%);
    border: 1px solid rgba(12, 114, 120, .22);
    border-radius: .5rem;
    padding: 12px;
    margin-top: 14px;
}
.resumo-comissao-topo {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: .65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: #2F3E9E;
    margin-bottom: 6px;
}
.resumo-comissao-topo .material-icons { font-size: 14px; }
.resumo-comissao-pct {
    margin-left: auto;
    background: #2F3E9E;
    color: #fff;
    border-radius: 999px;
    padding: 2px 8px;
    letter-spacing: 0;
}
.resumo-comissao > b {
    display: block;
    font-size: 1.25rem;
    font-weight: 700;
    color: #08575c;
    font-variant-numeric: tabular-nums;
}
.resumo-comissao p {
    margin: 7px 0 0;
    font-size: .625rem;
    line-height: 1.45;
    color: #0a5a5f;
    opacity: .9;
}

.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: #6B79D6;
    color: #2F3E9E;
}
.segmentado-ativo {
    background-image: linear-gradient(195deg, #6B79D6 0%, #2F3E9E 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, #333A6B 0%, #1B1F3B 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;
    }

    /* Dentro da barra fica só o que decide: o total, a comissão e as ações. As parciais
       (subtotal, sem frete, frete) continuam na seção de produtos, a um toque de
       distância — encher o rodapé de linhas comeria a tela do formulário. */
    .resumo-barra .resumo-linha,
    .resumo-barra .resumo-titulo,
    .resumo-barra .resumo-etiquetas,
    .resumo-barra .resumo-risco,
    .resumo-barra .resumo-comissao p,
    .resumo-barra .resumo-comissao-topo .material-icons { display: none; }

    /* Total e comissão lado a lado, numa linha só. */
    .resumo-barra .resumo-numeros {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-bottom: 8px;
    }
    .resumo-barra .resumo-total { flex: 1; 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-comissao {
        margin-top: 0;
        padding: 5px 9px;
        text-align: right;
    }
    .resumo-barra .resumo-comissao-topo { margin-bottom: 0; font-size: .5625rem; gap: 4px; }
    .resumo-barra .resumo-comissao-pct { margin-left: 4px; padding: 1px 6px; }
    .resumo-barra .resumo-comissao > b { font-size: .9375rem; }

    /* 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; }
}

/* O cartão do item (AC-1488). O `data-rotulo` de cada célula vira o nome do campo:
   sem ele o cartão seria uma pilha de números sem dizer qual é qual. */
@media (max-width: 767.98px) {
    .grade-itens thead { display: none; }
    .grade-itens,
    .grade-itens tbody,
    .grade-itens tr,
    .grade-itens td { display: block; width: 100%; }

    .grade-itens tr.linha-item {
        border: 1px solid #e9ecef;
        border-radius: .5rem;
        padding: 11px;
        margin-bottom: 9px;
        background: #fff;
        position: relative;
    }
    .grade-itens tr.linha-item td {
        border: 0;
        padding: 4px 0;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        text-align: right;
    }
    .grade-itens tr.linha-item td[data-rotulo]::before {
        content: attr(data-rotulo);
        font-size: .65rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .4px;
        color: #7b809a;
        text-align: left;
        flex: 0 0 auto;
    }
    /* A primeira célula é a identidade do produto: ocupa a linha inteira e vira o topo
       do cartão. */
    .grade-itens tr.linha-item td:first-child {
        display: block;
        text-align: left;
        padding-bottom: 8px;
        margin-bottom: 6px;
        border-bottom: 1px dashed #eceff1;
        padding-right: 36px;
    }
    .grade-itens tr.linha-item td.celula-total {
        border-top: 1px dashed #eceff1;
        margin-top: 6px;
        padding-top: 8px;
    }
    /* O X de remover vai para o canto do cartão, fora do empilhamento. */
    .grade-itens tr.linha-item td.celula-remover {
        position: absolute;
        top: 6px;
        right: 6px;
        width: auto;
        padding: 0;
    }
    .grade-itens tr.linha-item td input { max-width: 140px; margin-left: auto; }

    /* Linha vazia ("nenhum produto adicionado"): sem cartão, sem rótulos. */
    .grade-itens tbody tr:not(.linha-item) td { text-align: center; }
}

/* 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 #2F3E9E;
}

/* 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: #6B79D6; }
.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, #6B79D6 0%, #2F3E9E 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: #2F3E9E; 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, #6B79D6 0%, #2F3E9E 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 de resultados da busca de cliente: seis linhas à vista (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-cliente {
    max-height: 280px;
    overflow-y: 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 QUANTIDADE CABE NO CAMPO (AC-1831) ----
   A grade é de layout automático: o `width` do <th> é sugestão, não regra, e quem paga a
   redistribuição é a coluna cujo conteúdo não "pede" largura — a do input. Medido em
   1030px de área útil (o que sobra de 1366 com o menu lateral): a coluna caía para 76,3px,
   o campo para 60,3px, e o número de 6 dígitos era cortado (scrollWidth 78 > clientWidth 58)
   enquanto as colunas de dinheiro ficavam com 121px. Por isso `min-width`, que a
   redistribuição respeita, e não `width`. */
.grade-itens .celula-quantidade { min-width: 104px; }
.grade-itens .celula-quantidade .form-control { min-width: 88px; }
/* As setinhas do type=number comem ~20px de dentro do campo (e no Firefox ficam sempre
   visíveis). Quem digita quantidade digita o número. */
.grade-itens input[type="number"] {
    -moz-appearance: textfield;
    appearance: textfield;
}
.grade-itens input[type="number"]::-webkit-outer-spin-button,
.grade-itens input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}


/* ==========================================================================
   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). ---- */
.finance-atualizar {
    align-items: center;
    background: transparent;
    border: 0;
    color: var(--finance-indigo);
    cursor: pointer;
    display: none;
    height: 44px;
    justify-content: center;
    margin: 0;
    padding: 0;
    width: 44px;
}
.finance-atualizar .material-icons { font-size: 22px; }
@media (display-mode: standalone) {
    .finance-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. */
.finance-puxar {
    --finance-puxar: 0px;
    align-items: center;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .18);
    color: var(--finance-indigo);
    display: flex;
    height: 40px;
    justify-content: center;
    left: 50%;
    opacity: 0;
    pointer-events: none;
    position: fixed;
    top: 0;
    transform: translate(-50%, calc(var(--finance-puxar) - 48px));
    transition: opacity .15s ease;
    width: 40px;
    z-index: 1090;
}
.finance-puxar--visivel { opacity: .85; }
.finance-puxar--pronto { opacity: 1; }
.finance-puxar--pronto .material-icons { transform: rotate(180deg); transition: transform .2s ease; }
.finance-puxar--girando .material-icons { animation: finance-puxar-girar 1s linear infinite; }
@keyframes finance-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;
}

.parametro-sem-cadeado {
    display: inline-block;
    width: 1.25rem;
}

/* 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;
}