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

   Carregado DEPOIS do material-dashboard.css e do paleta-pulso.css, então por
   cascata/especificidade ele sobrescreve o estilo do template sem precisar
   editá-lo. É 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 MARCA DO Pulso (primeiro bloco): o template Creative Tim pintado com o kit
      "Grafite e Lima" (spec `identidade-visual-do-pulso`, 06/11/2026). As CORES não
      moram aqui: moram no `paleta-pulso.css`, cópia fiel do kit em
      `../identidade-visual/pulso/`, com os tokens fixos `--pulso-*` e os de tema
      `--t-*` (claro e escuro). Este bloco só os aplica ao Material. Marca nova =
      kit novo copiado por cima do paleta-pulso.css; os valores com hex aqui são os
      degradês que o kit descreve no LEIAME ("onde cada coisa entra no app").

   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 `pulso-`. Correção feita no Atlas NÃO chega aqui sozinha:
      quem sincronizar de novo compara com o custom.css do Atlas a partir daquela
      revisão e traz só o que é genérico.

   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 (resumo; os valores estão no paleta-pulso.css):
     - primário de interface: MUSGO #3D7A0B (branco sobre ele 5,3:1). O lima puro
       #7CC413 não dá leitura sobre branco (2:1): é cor de marca, não de texto.
     - grafite #14161A: menu lateral, superfícies escuras, títulos.
     - lima claro #C6F25A / #D4F77A -> #A3E635: destaque (item ativo do menu, botão
       do acesso), sempre com texto grafite por cima.
   Vermelho fica só para ALERTA: o contador do sino, o X do menu, a faixa da senha
   master e o erro de formulário (que nunca é só cor — vem com texto).
   ===================================================================== */

/* ---- A fonte do kit no lugar do Roboto (Q-012) ----
   O template lê a família de --bs-font-sans-serif / --bs-body-font-family e, no
   corpo do cartão, de uma regra própria com o Roboto escrito à mão. */
:root {
    --bs-font-sans-serif: var(--pulso-fonte);
    --bs-body-font-family: var(--pulso-fonte);
    --bs-body-color: var(--t-texto-2);
    --bs-body-bg: var(--t-fundo);
    /* O primário do Bootstrap, de onde abas, links, botão-link, paginação, lista e
       barra de progresso tiram o rosa do template. */
    --bs-primary: #3D7A0B;
    --bs-primary-rgb: 61, 122, 11;
    --bs-link-color: #3D7A0B;
    --bs-link-color-rgb: 61, 122, 11;
    --bs-link-hover-color: #2F5E0C;
    --bs-link-hover-color-rgb: 47, 94, 12;
}
.btn-link {
    --bs-btn-color: #3D7A0B;
    --bs-btn-hover-color: #2F5E0C;
    --bs-btn-active-color: #2F5E0C;
    color: var(--t-primaria);
}
.btn-link:hover, .btn-link:focus { color: var(--t-primaria-hover); }
.pagination {
    --bs-pagination-color: #3D7A0B;
    --bs-pagination-hover-color: #2F5E0C;
    --bs-pagination-focus-color: #2F5E0C;
    --bs-pagination-active-bg: #3D7A0B;
    --bs-pagination-active-border-color: #3D7A0B;
}
.progress { --bs-progress-bar-bg: #3D7A0B; }
.list-group { --bs-list-group-active-bg: #3D7A0B; --bs-list-group-active-border-color: #3D7A0B; }
/* A aba ativa em grafite; as outras no musgo dos links. */
.nav-tabs .nav-link { color: var(--t-primaria); font-weight: var(--pulso-peso-medio); }
.nav-tabs .nav-link.active { color: var(--t-texto); font-weight: var(--pulso-peso-semi); }
body,
.card .card-body,
.text-sans-serif {
    font-family: var(--pulso-fonte) !important;
}
body {
    color: var(--t-texto-2);
    -webkit-font-smoothing: antialiased;
}
/* O template põe o parágrafo em 300, peso que a Plus Jakarta não carrega aqui. */
p { font-weight: var(--pulso-peso-regular); }
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    color: var(--t-texto);
    letter-spacing: -0.01em;
}
/* Números que alinham na coluna: valores de tabela e indicadores. */
table, .table, .num, .font-tabular {
    font-variant-numeric: tabular-nums;
}

/* ---- Fundo da página: a névoa do kit no lugar do cinza do template ---- */
body.bg-gray-200 {
    background-color: var(--t-fundo) !important;
}

/* ---- Superfícies escuras: GRAFITE da marca ---- */
.bg-gradient-dark {
    background-image: linear-gradient(195deg, #2A2E36 0%, #14161A 100%) !important;
}

/* ---- Primário do Material (o rosa do template) -> MUSGO ----
   Degradê do musgo ao lima-800: o branco tem contraste AA nas duas pontas. */
.bg-gradient-primary {
    background-image: linear-gradient(195deg, #3D7A0B 0%, #2F5E0C 100%) !important;
}
.bg-primary {
    background-color: var(--pulso-musgo) !important;
}
.text-primary {
    color: var(--t-primaria) !important;
}
.text-primary.text-gradient,
.text-gradient.text-primary {
    background-image: linear-gradient(310deg, #7CC413 0%, #3D7A0B 100%) !important;
}
.shadow-primary {
    box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.14),
                0 7px 10px -5px rgba(61, 122, 11, 0.4) !important;
}
.btn.bg-gradient-primary {
    box-shadow: 0 3px 3px 0 rgba(61, 122, 11, 0.15),
                0 3px 1px -2px rgba(61, 122, 11, 0.2),
                0 1px 5px 0 rgba(61, 122, 11, 0.15) !important;
}
.btn.bg-gradient-primary:hover {
    box-shadow: 0 14px 26px -12px rgba(61, 122, 11, 0.4),
                0 4px 23px 0 rgba(0, 0, 0, 0.12),
                0 8px 10px -5px rgba(61, 122, 11, 0.2) !important;
}
.btn-outline-primary {
    color: var(--pulso-musgo) !important;
    border-color: var(--pulso-musgo) !important;
}
.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active,
.btn-outline-primary.active {
    background-color: var(--pulso-musgo) !important;
    border-color: var(--pulso-musgo) !important;
    color: #fff !important;
}
.form-check-input:checked {
    background-color: var(--pulso-musgo) !important;
    border-color: var(--pulso-musgo) !important;
}
.input-group-outline.is-focused .form-label,
.input-group-outline .form-control:focus ~ .form-label {
    color: var(--pulso-musgo) !important;
}
.input-group-outline.is-focused .form-control,
.input-group-outline .form-control:focus {
    border-color: var(--pulso-musgo) !important;
}
.pagination .page-item.active .page-link,
.pagination.pagination-primary .page-item.active .page-link {
    background-image: linear-gradient(195deg, #3D7A0B 0%, #2F5E0C 100%) !important;
    border: none !important;
    color: #fff !important;
}
a { color: var(--t-primaria); }
:focus-visible { outline: none; box-shadow: var(--pulso-anel) !important; }

/* ---- Botões: sem a caixa alta do Material, como no guia ---- */
.btn {
    border-radius: var(--pulso-raio-sm);
    font-weight: var(--pulso-peso-semi);
    letter-spacing: 0;
    text-transform: none;
}

/* ---- Semânticas do kit nos selos e textos do template ----
   Os fundos são os tons AA do tema claro, com texto branco por cima. */
.bg-gradient-success { background-image: linear-gradient(195deg, #23924B 0%, #1C7A3E 100%) !important; }
.bg-gradient-warning { background-image: linear-gradient(195deg, #A86A0A 0%, #935A06 100%) !important; }
.bg-gradient-danger  { background-image: linear-gradient(195deg, #DC2626 0%, #C81E1E 100%) !important; }
.bg-gradient-info    { background-image: linear-gradient(195deg, #2B74D6 0%, #1D63C4 100%) !important; }
.bg-gradient-secondary { background-image: linear-gradient(195deg, #6B7380 0%, #57606C 100%) !important; }
.text-success { color: var(--t-positivo) !important; }
.text-warning { color: var(--t-alerta) !important; }
.text-danger  { color: var(--t-negativo) !important; }
.text-info    { color: var(--t-info) !important; }

/* =====================================================================
   Menu lateral (Q-009): grafite com o brilho musgo do guia, a assinatura
   horizontal negativa no topo e o item ativo em lima claro.
   ===================================================================== */
.sidenav.bg-gradient-dark {
    background-image:
        radial-gradient(120% 60% at 0% 100%, rgba(61, 122, 11, 0.30), transparent 60%),
        radial-gradient(90% 40% at 100% 0%, rgba(198, 242, 90, 0.08), transparent 70%),
        linear-gradient(195deg, #2A2E36 0%, #14161A 100%) !important;
    box-shadow: var(--pulso-sombra-elevada);
}
.sidenav .sidenav-header {
    display: flex;
    align-items: center;
    padding: 1.25rem 1.375rem 1rem;
}
/* O template limita a imagem da marca a 2rem (`.navbar-vertical .navbar-brand img`). */
.sidenav .pulso-menu-marca img {
    max-height: none !important;
    display: block;
    height: 3.25rem;
    width: auto;
    max-width: 100%;
}
.sidenav .navbar-nav .nav-link {
    border-radius: 0.875rem;
    font-weight: var(--pulso-peso-medio);
    transition: background var(--pulso-dur-rapida) var(--pulso-curva-padrao),
                color var(--pulso-dur-rapida) var(--pulso-curva-padrao);
}
.sidenav .navbar-nav .nav-link:not(.active):not([aria-disabled="true"]):hover {
    background: rgba(255, 255, 255, 0.07);
}
/* Só a tela atual: lima claro com texto e ícone grafite (12:1). A classe
   `bg-gradient-primary` fica no HTML (o teste da tela atual a procura); quem
   decide a cor é este seletor, mais específico que o primário musgo. */
.sidenav .navbar-nav .nav-link.active.bg-gradient-primary {
    background-image: linear-gradient(195deg, #D4F77A 0%, #A3E635 100%) !important;
    box-shadow: var(--pulso-sombra-lima) !important;
    color: var(--pulso-grafite) !important;
    font-weight: var(--pulso-peso-forte);
}
.sidenav .navbar-nav .nav-link.active.bg-gradient-primary .text-white,
.sidenav .navbar-nav .nav-link.active.bg-gradient-primary .material-icons,
.sidenav .navbar-nav .nav-link.active.bg-gradient-primary .nav-link-text {
    color: var(--pulso-grafite) !important;
}

/* =====================================================================
   Topo de vidro: preso no alto, translúcido, como no guia.

   O `.main-content` do template vem com `max-height: 100vh`; com ele, o
   `sticky` do topo só valeria na primeira tela de rolagem (o pai acaba ali).
   Quem rola é a janela (`js/guarda-rolagem-do-tema.js`), então tirar o teto do
   `.main-content` não muda a rolagem: só deixa o topo acompanhar a página.
   ===================================================================== */
.main-content.max-height-vh-100 {
    max-height: none !important;
}
#navbarBlur.navbar-main {
    position: sticky !important;
    top: 0.75rem;
    margin-top: 0.75rem;
    background: var(--t-vidro) !important;
    -webkit-backdrop-filter: blur(var(--t-vidro-blur)) saturate(1.4);
    backdrop-filter: blur(var(--t-vidro-blur)) saturate(1.4);
    border: 1px solid var(--t-vidro-borda);
    border-radius: var(--pulso-raio-lg) !important;
    box-shadow: var(--pulso-sombra-suave) !important;
}
#navbarBlur h6.font-weight-bolder {
    font-weight: var(--pulso-peso-titulo);
}

/* =====================================================================
   Cartões: o raio e a sombra do kit, e a entrada `pulso-rise` escalonada
   (60 ms por coluna). O `paleta-pulso.css` desliga a animação para quem pediu
   menos movimento. Cartão de modal não anima: ele já tem a transição dela.
   ===================================================================== */
.card {
    border-radius: var(--pulso-raio-lg);
    box-shadow: var(--pulso-sombra-suave);
}
.main-content .container-fluid .card:not(.modal .card) {
    animation: pulso-rise var(--pulso-dur-entrada) var(--pulso-curva-saida) both;
}
.main-content .container-fluid .row > :nth-child(2) > .card { animation-delay: 60ms; }
.main-content .container-fluid .row > :nth-child(3) > .card { animation-delay: 120ms; }
.main-content .container-fluid .row > :nth-child(4) > .card { animation-delay: 180ms; }
.main-content .container-fluid .row > :nth-child(5) > .card { animation-delay: 240ms; }
.main-content .container-fluid .row > :nth-child(n+6) > .card { animation-delay: 300ms; }
@media (prefers-reduced-motion: reduce) {
    .main-content .container-fluid .card:not(.modal .card) { animation: none; }
}

/* =====================================================================
   Tela de acesso (Q-010)

   O fundo são as trajetórias do kit, servidas pelo Pulso: o `fundo.jpg` por
   cima, o `fundo.svg` (o mesmo desenho, vetorial) de reserva e o degradê
   grafite por último. Nada vem de terceiros: um login que depende de CDN
   alheio fica cinza quando o CDN cai. Caminho relativo a este CSS porque o
   Pulso roda em subdiretório no desenvolvimento e na raiz em produção. Trocar o
   fundo = salvar por cima do fundo.jpg (ver o CREDITO.md ao lado).
   ===================================================================== */
.pulso-acesso-fundo {
    background-image: url('../assets/img/login/fundo.jpg'), url('../assets/img/login/fundo.svg'), linear-gradient(195deg, #2A2E36 0%, #14161A 60%, #0E0F12 100%);
    background-size: cover;
    background-position: center;
    background-color: #14161A;
}
/* O cartão de vidro do guia: translúcido sobre as trajetórias, texto claro. */
.pulso-acesso-cartao {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 24rem;
    margin: 0 auto;
    padding: 2rem 1.75rem 1.75rem;
    border-radius: var(--pulso-raio-xl);
    background: rgba(255, 255, 255, 0.10);
    border: 1px solid rgba(255, 255, 255, 0.16);
    -webkit-backdrop-filter: blur(18px) saturate(1.3);
    backdrop-filter: blur(18px) saturate(1.3);
    box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.6);
    color: #fff;
    animation: pulso-rise var(--pulso-dur-entrada) var(--pulso-curva-saida) both;
}
.pulso-acesso-cartao .pulso-acesso-marca {
    display: block;
    height: 3.5rem;
    width: auto;
    max-width: 100%;
    margin: 0 auto 0.75rem;
}
.pulso-acesso-cartao .pulso-acesso-subtitulo {
    color: rgba(255, 255, 255, 0.78);
    font-size: 0.8125rem;
    text-align: center;
    margin: 0 0 1.25rem;
}
.pulso-acesso-cartao label.pulso-acesso-rotulo {
    display: block;
    margin: 0.75rem 0 0.375rem;
    color: rgba(255, 255, 255, 0.82);
    font-size: 0.75rem;
    font-weight: var(--pulso-peso-semi);
}
.pulso-acesso-cartao .input-group {
    position: relative;
}
.pulso-acesso-cartao .input-group .form-control {
    height: 2.75rem;
    padding: 0 0.875rem !important;
    border-radius: 0.75rem !important;
    background: rgba(255, 255, 255, 0.10) !important;
    border: 1px solid rgba(255, 255, 255, 0.22) !important;
    color: #fff !important;
    font-size: 0.9375rem;
}
.pulso-acesso-cartao .form-control.com-olho {
    padding-right: 2.75rem !important;
}
.pulso-acesso-cartao .input-group .form-control:focus {
    border-color: #C6F25A !important;
    box-shadow: var(--pulso-anel) !important;
}
.pulso-acesso-cartao .input-group.is-invalid .form-control {
    border-color: #F87171 !important;
}
.pulso-acesso-cartao .input-group > .olho-senha {
    color: rgba(255, 255, 255, 0.72);
}
.pulso-acesso-cartao .input-group > .olho-senha:hover,
.pulso-acesso-cartao .input-group > .olho-senha:focus-visible {
    color: #fff;
}
.pulso-acesso-cartao .form-check-label {
    color: rgba(255, 255, 255, 0.82);
}
.pulso-acesso-cartao .pulso-acesso-erro {
    color: #FCA5A5;
    font-size: 0.75rem;
    margin: 0.375rem 0 0;
}
/* O botão "Entrar": lima claro com texto grafite, o do guia. */
.pulso-acesso-cartao .btn.pulso-acesso-entrar {
    width: 100%;
    margin: 1.25rem 0 0;
    padding: 0.75rem;
    border: 0;
    border-radius: 0.875rem;
    background-image: linear-gradient(195deg, #D4F77A 0%, #A3E635 100%);
    color: var(--pulso-grafite);
    font-size: 0.9375rem;
    font-weight: var(--pulso-peso-forte);
    box-shadow: var(--pulso-sombra-lima);
}
.pulso-acesso-cartao .btn.pulso-acesso-entrar:hover {
    filter: brightness(1.04);
    color: var(--pulso-grafite);
}
.pulso-acesso-cartao .pulso-acesso-nota {
    color: rgba(255, 255, 255, 0.72);
    font-size: 0.8125rem;
    text-align: center;
    margin: 1rem 0 0;
}
.pulso-acesso-rodape {
    color: rgba(255, 255, 255, 0.7);
}

/* =====================================================================
   =====================================================================
   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 Pulso 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(20, 22, 26, 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: #A3E635; /* lima 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: #A3E635; }
}

/* ---- Topbar responsiva ---- */
.navbar-main {
    position: relative;
    z-index: 9998;
}
.pulso-topbar {
    align-items: center;
    display: grid;
    gap: 0.5rem;
    grid-template-columns: 44px minmax(0, 1fr) 44px;
}
.pulso-topbar__menu {
    grid-column: 1;
    justify-self: start;
    min-height: 44px;
    min-width: 44px;
}
.pulso-topbar__menu #iconNavbarSidenav {
    align-items: center;
    display: flex;
    height: 44px;
    justify-content: center;
    width: 44px;
}
.pulso-topbar__identidade {
    grid-column: 2;
    min-width: 0;
    overflow: hidden;
}
.pulso-topbar__identidade .breadcrumb {
    flex-wrap: nowrap;
    margin-right: 0 !important;
    min-width: 0;
    overflow: hidden;
}
.pulso-topbar__identidade .breadcrumb-item,
.pulso-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. */
.pulso-topbar__acoes {
    display: flex !important;
    flex-basis: auto;
    grid-column: 3;
    justify-content: flex-end;
    min-width: 44px;
    overflow: visible;
}
.pulso-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 musgo primário: o contador vermelho de alerta já chama a
   atenção, e o ícone na cor da marca competiria com ele no mesmo canto. */
.sino-botao {
    align-items: center;
    color: var(--pulso-grafite) !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. */
.pulso-menu-fechar { display: none; }

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

@media (min-width: 1200px) {
    .pulso-topbar { display: flex; }
    .pulso-topbar__identidade { flex: 1 1 auto; }
    .pulso-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. No Windows isso só é verdade desde a
   `js/guarda-rolagem-do-tema.js` (spec rodinha-do-mouse-na-montagem): o tema
   punha o PerfectScrollbar no `.main-content`. 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 Pulso 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: #3D7A0B #e9ecef;         /* musgo 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: #3D7A0B;                      /* musgo da marca */
    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: #14161A;                      /* grafite da marca */
}

/* Barra espelho: só a barra, sem conteúdo. */
.tr-barra {
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: auto;
    scrollbar-color: #3D7A0B #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(61, 122, 11, .045);   /* musgo 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(61, 122, 11, .14);
}

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

/*
 * TARJAS DE PRAZO (montagem-unificada-com-a-simulacao, US-233): seis faixas pela distância até a
 * data de entrega, e a neutra do "a confirmar". A cor nunca é o único sinal — o rótulo vai junto.
 * O vermelho escuro distingue "muito atrasado" de "hoje".
 */
.tarja-de-prazo {
    display: inline-block;
    padding: .1rem .45rem;
    border-radius: .35rem;
    font-size: .72rem;
    font-weight: 700;
    line-height: 1.35;
    white-space: nowrap;
    color: #fff;
}
.tarja-verde { background: #2e7d32; }
.tarja-azul { background: #1565c0; }
.tarja-amarelo { background: #f9a825; color: #2b2b2b; }
.tarja-laranja { background: #ef6c00; }
.tarja-vermelho { background: #c62828; }
.tarja-vermelho-escuro { background: #5d0b0b; }
.tarja-a-confirmar { background: #e0e0e0; color: #424242; }
/* Sem data e sem a marca do Atlas (data-a-confirmar-do-atlas, AC-2817): nem o cinza do "a confirmar",
   nem o vermelho do atraso — é o mais cedo possível, e alguém precisa perguntar a data. */
.tarja-sem-data { background: #6a1b9a; }

/*
 * CONTORNO DE URGÊNCIA (montagem-mais-legivel-e-chapa-por-tonelada, US-269): o cartão do pedido na
 * lista leva a cor da tarja dele na borda, para a faixa se ler de longe. Só a largura e a cor — o
 * estilo da borda (tracejado da programada para depois) continua do cartão. O "a confirmar" usa um
 * cinza mais escuro que o da tarja: o da tarja some numa borda.
 */
.contorno-verde { border-width: 2px !important; border-color: #2e7d32 !important; }
.contorno-azul { border-width: 2px !important; border-color: #1565c0 !important; }
.contorno-amarelo { border-width: 2px !important; border-color: #f9a825 !important; }
.contorno-laranja { border-width: 2px !important; border-color: #ef6c00 !important; }
.contorno-vermelho { border-width: 2px !important; border-color: #c62828 !important; }
.contorno-vermelho-escuro { border-width: 2px !important; border-color: #5d0b0b !important; }
.contorno-a-confirmar { border-width: 2px !important; border-color: #757575 !important; }
.contorno-sem-data { border-width: 2px !important; border-color: #6a1b9a !important; }

/* =========================================================================
   Campo solto (06/11/2026). O Material Dashboard tira a borda de TODO
   .form-control, porque espera o campo dentro do .input-group-outline (login,
   senha). As telas de cadastro usam o campo solto, igual ao .form-select —
   sem borda, o "Motivo" da aba Empresas parecia texto e o botão vizinho
   invadia a outra coluna. Fora de um .input-group, o campo ganha a borda e o
   respiro do .form-select.
   ========================================================================= */
.form-control:not(.input-group .form-control) {
    border: 1px solid var(--t-borda, #d2d6da);
    border-radius: .375rem;
    padding-left: .625rem;
    padding-right: .625rem;
    background-color: var(--t-superficie, #fff);
    color: var(--t-texto, #495057);
}
.form-control:not(.input-group .form-control):focus {
    border-color: var(--t-primaria, #3D7A0B);
    box-shadow: var(--pulso-anel, 0 0 0 3px rgb(124 196 19 / .40));
}
.form-select:not(.input-group .form-select) { padding-left: .625rem; padding-right: 2rem; background-position: right .5rem center; }
.pulso-campo-motivo { width: 14rem; max-width: 100%; }