/* Nexus: CÓPIA RASTREADA do public/css/custom.css do Hermes em 10/10/2026 (spec
   login-e-console-da-diretoria), com o prefixo hermes- trocado por nexus-. A paleta é a da
   casa (vermelho e grafite da Xingu). O texto abaixo é o cabeçalho original do Hermes. */

/* =====================================================================
   Xingu Nexus — 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 Hermes — vermelho e grafite no lugar
      do rosa do Material. Muda aqui, e só aqui, quando a marca mudar.

   2. O BLOCO GENÉRICO DO ATLAS (a partir de "Copiado do Atlas"): as correções de
      layout que o Atlas acumulou em produção — topbar que cabe no celular, sino,
      X do menu, modais acima do menu, X das modais visível, campos de data no
      iOS, barras de rolagem das tabelas, névoa de carregamento. É CÓPIA
      RASTREADA da revisão 49e6be78 do Atlas (05/09/2026, spec
      `layout-alinhado-ao-atlas`), com a paleta trocada e o prefixo `atlas-`
      virando `hermes-`. Correção feita no Atlas NÃO chega aqui sozinha (DT-006):
      quem sincronizar de novo compara com o custom.css do Atlas a partir daquela
      revisão e traz só o que é genérico — regra de tela do Atlas (agenda, radar,
      lançamento em seções, cadastro de cliente, olhinho) fica lá.

   Cache: o layout carrega este arquivo com `?v=` igual à data de modificação
   (filemtime), então toda edição muda a URL sozinha. Não há bump manual.

   PALETA DA MARCA (Xingu Nexus). O accent PRIMÁRIO do Material (originalmente
   rosa #e91e63) foi trocado pelo VERMELHO da marca; a sidebar escura, pelo
   GRAFITE.
     - primário (vermelho): #B10F23 (= rgb 177,15,35). Gradiente: vivo -> profundo.
     - grafite (marca):     #252A34 — sidebar, superfícies escuras, títulos.
   Verde/vermelho SEMÂNTICOS (sucesso/erro) continuam vindo do tema. Atenção: o
   vermelho da MARCA e o vermelho de ERRO convivem nesta tela. Por isso o erro de
   formulário nunca é só cor — vem com texto ao lado do campo — e o contador do
   sino usa o vermelho de ALERTA do tema (#f44335), não o da marca.
   ===================================================================== */

/* Variáveis da identidade Xingu Nexus (kit de identidade, 25/08/2026). */
:root {
    --nexus-red-deep: #B10F23;
    --nexus-red: #E1172D;
    --nexus-coral: #FF4B45;
    --nexus-coral-soft: #E99A8F;
    --nexus-blue-gray: #6E7B8A;
    --nexus-graphite: #252A34;
    --nexus-light-gray: #D2D6DA;
    --nexus-white: #F8F9F9;
}

/* ---- Sidebar / superfícies escuras: cinza do tema -> GRAFITE da marca ---- */
.bg-gradient-dark {
    background-image: linear-gradient(195deg, #3A4152 0%, #252A34 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, #E1172D 0%, #B10F23 100%) !important;
}

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

/* ---- Texto primário (links e rótulos que usavam rosa) ---- */
.text-primary {
    color: #B10F23 !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, #FF4B45 0%, #B10F23 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(177, 15, 35, 0.4) !important;
}

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

/* ---- Botão contornado primário ---- */
.btn-outline-primary {
    color: #B10F23 !important;
    border-color: #B10F23 !important;
}
.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active,
.btn-outline-primary.active {
    background-color: #B10F23 !important;
    border-color: #B10F23 !important;
    color: #fff !important;
}

/* ---- Item ativo da barra lateral ---- */
.sidenav .navbar-nav .nav-link.active {
    box-shadow: 0 3px 5px 0 rgba(177, 15, 35, 0.2) !important;
}

/* ---- Checkboxes e switches marcados (ficavam rosa quando ligados) ---- */
.form-check-input:checked {
    background-color: #B10F23 !important;
    border-color: #B10F23 !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: #B10F23 !important;
}
.input-group-outline.is-focused .form-control,
.input-group-outline .form-control:focus {
    border-color: #B10F23 !important;
}

/* ---- Paginação ---- */
.pagination .page-item.active .page-link,
.pagination.pagination-primary .page-item.active .page-link {
    background-image: linear-gradient(195deg, #E1172D 0%, #B10F23 100%) !important;
    border: none !important;
    color: #fff !important;
}

/* =====================================================================
   Tela de acesso

   O Atlas usa uma foto do Unsplash como fundo do login. Aqui o fundo é um
   gradiente da própria paleta: uma imagem hospedada fora significa uma
   requisição a terceiro na ÚNICA tela que todo mundo abre, inclusive quem
   ainda não autenticou — e uma tela de login que depende de CDN alheio é uma
   tela de login que fica cinza quando o CDN cai.
   ===================================================================== */
.nexus-acesso-fundo {
    background-image: linear-gradient(195deg, #3A4152 0%, #252A34 60%, #14171D 100%);
}

/* =====================================================================
   =====================================================================
   COPIADO DO ATLAS — bloco genérico (revisão 49e6be78, 05/09/2026)

   Daqui para baixo é a cópia rastreada descrita no cabeçalho. A ordem dos
   blocos segue a do arquivo de origem, para a próxima sincronização ser um
   diff e não uma caça.
   =====================================================================
   ===================================================================== */

/* Alpine: esconde elementos com x-cloak até o Alpine inicializar (evita
   "flash" de modal/painel 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"). O Hermes NÃO carrega Font Awesome
   nenhum (o Atlas carrega o kit do FA6, que também não tem essa família),
   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;
}

/* ==================== 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. Ela cobre a tela inteira em toda requisição
       de digitação/seleção. Sem esta linha ela intercepta o clique: medido no
       Atlas, com a névoa ativa o elemento sob o ponto do primeiro resultado de
       uma busca era ELA, não o botão. O sintoma era "depois de muito clicar
       consigo selecionar algum". */
    pointer-events: none;
    align-items: center;
    justify-content: center;
    background: rgba(37, 42, 52, 0.32); /* grafite 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: #E1172D; /* vermelho vivo 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: #E1172D; }
}

/* ---- Topbar responsiva ---- */
.navbar-main {
    position: relative;
    z-index: 9998;
}
.nexus-topbar {
    align-items: center;
    display: grid;
    gap: 0.5rem;
    grid-template-columns: 44px minmax(0, 1fr) 44px;
}
.nexus-topbar__menu {
    grid-column: 1;
    justify-self: start;
    min-height: 44px;
    min-width: 44px;
}
.nexus-topbar__menu #iconNavbarSidenav {
    align-items: center;
    display: flex;
    height: 44px;
    justify-content: center;
    width: 44px;
}
.nexus-topbar__identidade {
    grid-column: 2;
    min-width: 0;
    overflow: hidden;
}
.nexus-topbar__identidade .breadcrumb {
    flex-wrap: nowrap;
    margin-right: 0 !important;
    min-width: 0;
    overflow: hidden;
}
.nexus-topbar__identidade .breadcrumb-item,
.nexus-topbar__identidade h6 {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* `display: flex !important` é o que impede o `.collapse` do Bootstrap de
   esconder as ações abaixo de 992px — era assim que o sino sumia no celular. */
.nexus-topbar__acoes {
    display: flex !important;
    flex-basis: auto;
    grid-column: 3;
    justify-content: flex-end;
    min-width: 44px;
    overflow: visible;
}
.nexus-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;
}
/* O sino é GRAFITE, e não o vermelho primário como o teal é no Atlas: aqui o
   vermelho da marca ao lado do contador vermelho de alerta viraria dois alertas
   no mesmo canto, e o sino passaria a gritar sem ter nada a dizer. */
.sino-botao {
    align-items: center;
    color: var(--nexus-graphite) !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-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; }

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

/* ---- 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 (no Atlas):
     · 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.

   Escondido fora de `g-sidenav-pinned`: o botão só existe com o menu aberto. Era o
   defeito relatado em 05/09/2026 — o botão de plugin do template ficava no canto
   inferior da tela o tempo todo, com o menu fechado. */
.nexus-menu-fechar { display: none; }

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

@media (min-width: 1200px) {
    .nexus-topbar { display: flex; }
    .nexus-topbar__identidade { flex: 1 1 auto; }
    .nexus-topbar__acoes { margin-left: 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. */
.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; }

/* =========================================================================
   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.
   O script do layout faz o mesmo em JS, para não depender de `:has()`.
   ========================================================================= */
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; }

/* =========================================================================
   Fechar modal no celular

   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. `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.

   O X do Material Dashboard é BRANCO (fill=#fff no SVG do tema) — sobre o
   cabeçalho branco das modais ele era invisível. `invert(1)` vira o desenho
   preto; nenhuma modal do Hermes tem cabeçalho escuro.
   ========================================================================= */
.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;
    filter: invert(1);
    opacity: .75;
}

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

/* =========================================================================
   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: #B10F23 #e9ecef;         /* vermelho 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: #B10F23;
    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: #252A34;                      /* grafite da marca */
}

/* Barra espelho: só a barra, sem conteúdo. */
.tr-barra {
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: auto;
    scrollbar-color: #B10F23 #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. Aqui a cor do texto fica intacta. */
.table-zebra > tbody > tr:nth-of-type(odd) > td {
    background-color: rgba(177, 15, 35, .045);   /* vermelho da marca, bem diluído */
}

/* ── Linha clicável e linha selecionada ─────────────────────────────────── */
.linha-clicavel {
    cursor: pointer;
}

.table-zebra > tbody > tr.linha-selecionada > td {
    background-color: rgba(177, 15, 35, .14);
}

.table-zebra > tbody > tr.linha-selecionada > td:first-child {
    box-shadow: inset 3px 0 0 rgba(177, 15, 35, .9);
}