@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@500;600;700;800&family=Poppins:wght@500;600;700;800&family=Inter:wght@400;500;600&display=swap');

/* ATUALIZADO 19/08/2026 (Rodada 9) -- pedido do cliente: "ajuste o visual da
   sidebar, não está legal com essa visualização de cor, deixe mais moderno no
   estilo do meu layout do site". Trocamos a fonte de exibição 'Orbitron'
   (estilo "sci-fi/gamer") por 'Poppins' (geométrica, bold, mais perto do
   espírito da fonte oficial da marca "Gropled Bold", que não está disponível
   como webfont) e a cor de destaque pela cor real da marca BLUE WOLF TEC
   (extraída do manual de marca enviado pelo cliente: #3871C1), mantendo o
   tema escuro que o resto do sistema já usa -- só suavizamos o brilho neon.

   REVERTIDO 19/08/2026 (Rodada 9, Entrega L) -- pedido do cliente: "coloque
   de volta a fonte que tava antes na logo font-family: 'Orbitron', sans-serif;
   e no lobo acorrentado...". Volta 'Orbitron' SÓ no texto da marca que
   acompanha a imagem do lobo (sidebar, rodapé decorativo e tela de login) --
   o resto do sistema (h1/h2/h3, cards, etc.) continua em 'Poppins', que não
   fazia parte do pedido de reverter. */

:root {
    --bg-void: #000000;
    --bg-panel: #0d0f12;
    --bg-panel-raised: #15181d;
    --border-steel: #23262c;
    --border-steel-light: #343841;
    --text-bright: #eef2f6;
    --text-muted: #8b96a5;
    /* CORRIGIDO 21/08/2026 -- pedido do cliente: "a fonte do texto do
       sidebar nao esta boa". Causa raiz mensuravel: #565e69 (cor antiga)
       sobre o fundo do painel (--bg-panel, #0d0f12) tinha contraste de
       2,93:1 -- o padrao de acessibilidade (WCAG AA) exige 4,5:1 pra texto
       normal. Novo valor #757f8c da 4,73:1 (mesma familia de cor azulada/
       acinzentada de antes, só mais clara -- não é uma cor nova, é a MESMA
       cor ajustada pra ficar legível). Usado em rótulos de grupo do menu,
       dicas, texto secundário e itens desabilitados em todo o sistema
       (não só sidebar), já que --text-dim é global. */
    --text-dim: #757f8c;
    --accent-blue: #3871c1;
    --accent-cyan: #5b93d6;
    --accent-blue-glow: rgba(56, 113, 193, 0.22);
    --brand-gray: #656263;
    --success: #34d399;
    --success-bg: rgba(52, 211, 153, 0.12);
    --warning: #fbbf24;
    --warning-bg: rgba(251, 191, 36, 0.12);
    --danger: #f87171;
    --danger-bg: rgba(248, 113, 113, 0.12);
    --edit-color: #a78bfa;
    --radius: 6px;
    --sidebar-width: 240px;
}

* {
    box-sizing: border-box;
}

body {
    font-family: 'Inter', Arial, sans-serif;
    background-color: var(--bg-void);
    color: var(--text-bright);
    margin: 0;
    padding: 0;
}

h1, h2, h3 {
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    letter-spacing: 0.5px;
    color: var(--text-bright);
    margin: 0;
}

h1 { font-size: 24px; }
h2 { font-size: 16px; color: var(--accent-blue); margin-top: 30px; margin-bottom: 12px; text-transform: uppercase; letter-spacing: 1px; }

.subtitulo-pagina {
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    letter-spacing: 0.8px;
    margin: 4px 0 0 0;
}

a {
    color: var(--accent-blue);
    text-decoration: none;
}

a:hover {
    color: var(--accent-cyan);
}

/* ---------- Toast de sucesso ---------- */

@keyframes toast-entrada {
    from { opacity: 0; transform: translateY(-12px); }
    to { opacity: 1; transform: translateY(0); }
}

.toast {
    position: fixed;
    top: 20px;
    right: 26px;
    background-color: var(--success-bg);
    color: var(--success);
    border: 1px solid rgba(52, 211, 153, 0.35);
    padding: 12px 20px;
    border-radius: var(--radius);
    font-size: 14px;
    font-weight: 600;
    z-index: 200;
    animation: toast-entrada 0.25s ease-out;
    transition: opacity 0.4s, transform 0.4s;
}

.toast-aviso {
    background-color: var(--warning-bg);
    color: var(--warning);
    border: 1px solid rgba(251, 191, 36, 0.35);
}

.toast-saindo {
    opacity: 0;
    transform: translateY(-12px);
}

/* ---------- Aviso de guia inativa ---------- */

.aviso-inativa {
    background-color: var(--danger-bg);
    color: var(--danger);
    border: 1px solid rgba(248, 113, 113, 0.3);
    padding: 12px 16px;
    border-radius: var(--radius);
    margin-bottom: 20px;
    font-size: 14px;
}

/* ---------- Logo de rodapé + marca + frase institucional ---------- */

.decor-logo-wrapper {
    position: fixed;
    bottom: 20px;
    right: 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 220px;
    pointer-events: none;
    z-index: 0;
}

.decor-brand-name {
    font-family: 'Orbitron', sans-serif;
    font-weight: 700;
    font-size: 15px;
    letter-spacing: 2px;
    color: var(--text-bright);
    opacity: 0.75;
    margin-bottom: 12px;
}

.decor-brand-name .accent {
    color: var(--accent-blue);
}

.decor-logo-box {
    width: 200px;
}

.decor-logo {
    width: 100%;
    display: block;
    mix-blend-mode: screen;
    opacity: 0.55;
    -webkit-mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, black 40%, transparent 75%);
    mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, black 40%, transparent 75%);
}

.decor-logo-texto {
    font-family: 'Orbitron', sans-serif;
    font-size: 10px;
    font-weight: 700;
    text-align: center;
    line-height: 1.5;
    color: var(--accent-blue);
    opacity: 0.75;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin: 8px 0 0 0;
}

/* ---------- Layout com sidebar ---------- */

.app-shell {
    display: flex;
    min-height: 100vh;
    position: relative;
    z-index: 1;
}

.sidebar {
    width: var(--sidebar-width);
    flex-shrink: 0;
    background-color: var(--bg-panel);
    border-right: 1px solid var(--border-steel);
    padding: 24px 16px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    position: sticky; /* NOVO 21/08/2026 -- pedido do cliente: "deixar o sidebar fixo.. sem
    se mexer... com a rolagem da pagina" -- sticky+top:0+align-self:flex-start (herdado do
    flex-start abaixo) prende a sidebar no topo da viewport durante a rolagem da PAGINA; o
    menu em si ganha rolagem PROPRIA (overflow-y:auto) se a lista de links for maior que a
    tela, em vez de rolar junto com o conteudo. */
    top: 0;
    align-self: flex-start;
    height: 100vh;
    overflow-y: auto;
    z-index: 2;
    /* NOVO 21/08/2026 -- pedido do cliente: "tirar a barra de rolagem". A
       rolagem em si continua funcionando (mouse/touch/teclado) quando a
       lista de links é maior que a tela -- só a BARRA visual (a "trilha"
       cinza do lado direito do menu) fica escondida, truque padrão de
       CSS suportado por todos os navegadores modernos. */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* Edge antigo */
}
.sidebar::-webkit-scrollbar { /* Chrome/Edge/Safari (baseados em WebKit/Blink) */
    display: none;
}

.sidebar-logo {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding-bottom: 24px;
    margin-bottom: 16px;
    border-bottom: 1px solid var(--border-steel);
}

.sidebar-logo img {
    width: 56px;
    height: 56px;
    object-fit: contain;
    filter: drop-shadow(0 0 10px rgba(56, 113, 193, 0.30));
}

.sidebar-logo .brand-name {
    font-family: 'Orbitron', sans-serif;
    font-weight: 700;
    font-size: 16px;
    letter-spacing: 1.5px;
    color: var(--text-bright);
}

.sidebar-logo .brand-name .accent {
    color: var(--accent-blue);
}

.sidebar-nav {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.sidebar-nav a, .sidebar-nav .nav-disabled {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: var(--radius);
    color: var(--text-muted);
    font-size: 14px;
    font-weight: 500;
}

.sidebar-nav a:hover {
    background-color: var(--bg-panel-raised);
    color: var(--text-bright);
}

.sidebar-nav a.ativo {
    background-color: var(--accent-blue-glow);
    color: var(--accent-cyan);
    box-shadow: inset 2px 0 0 var(--accent-blue);
}

.sidebar-nav .nav-disabled {
    color: var(--text-dim);
    cursor: default;
}

.sidebar-nav .tag-em-breve {
    margin-left: auto;
    font-size: 10px;
    font-weight: 700;
    color: #1a1a1a;
    background-color: #fbbf24;
    padding: 2px 6px;
    border-radius: 100px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* NOVO 22/08/2026 -- pedido do cliente: "colocar um Novo do lado do
   modulo na primeira vez que a empresa clica" -- mesmo desenho do
   ".tag-em-breve" acima (selo pequeno, cantos arredondados, alinhado à
   direita do link), só que na cor de sucesso do sistema (var(--success),
   verde) pra não confundir com o amarelo de "Em breve" -- são avisos com
   significado diferente (um diz "não vai/não vai ainda", o outro diz
   "isso aqui é recente"). Ver templates/base.html (onde aparece) e
   app/web.py (CHAVES_MODULOS_NOVOS -- decide quando some). */
.sidebar-nav .tag-novo {
    margin-left: auto;
    font-size: 10px;
    font-weight: 700;
    color: #063d2c;
    background-color: var(--success);
    padding: 2px 6px;
    border-radius: 100px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* NOVO 21/08/2026 -- pedido do cliente: "tornar os menus expandiveis e
   retrateis.. ao clicar em atendimento ele recolhe ou abre execucao e
   solicitar". Cada subgrupo do sidebar (Atendimento, Digitacao, Apuracao de
   Faturamento, Painel Diretoria etc.) vira um mini-acordeao: o rotulo do
   grupo (antes um <div> estatico) virou um <button> clicavel que
   mostra/esconde os links daquele grupo. Estado (aberto/fechado) calculado
   no servidor pra abrir sozinho o grupo da pagina atual (ver bloco
   "aberto" nos <div class="grupo-menu-corpo">), e depois ajustavel pelo
   usuario -- preferencia salva em localStorage (bwToggleGrupo(), no fim de
   base.html), mesmo padrao ja usado no recolher/expandir da sidebar
   inteira. Sem permissao nova, so comportamento visual. */
/* NOVO 21/08/2026 -- pedido do cliente: "aplique o 1 [Cards Elevados],
   mantendo a cor do tema que já tenho" (das 8 propostas de redesign
   mostradas em canvas). Cada grupo do menu vira um "cartão" com fundo e
   sombra próprios (mesmos tokens de cor já existentes -- --bg-panel-raised,
   --border-steel-light -- nenhuma cor nova introduzida), no lugar da faixa
   colorida lateral fina de antes. */
.grupo-menu-card {
    background: var(--bg-panel-raised);
    border: 1px solid var(--border-steel-light);
    border-radius: 10px;
    margin: 6px 6px;
    padding: 2px 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.22);
}

/* O card acima usa --bg-panel-raised de fundo -- a mesma cor que
   `.sidebar-nav a:hover` (style.css) usa pra "acender" um link ao passar
   o mouse. Sem este ajuste, o hover de qualquer link DENTRO de um card
   ficaria invisível (fundo igual ao fundo). Não afeta o link ATIVO (esse
   usa --accent-blue-glow, translúcido azul, sempre visível). */
.grupo-menu-card a:hover {
    background-color: rgba(255, 255, 255, 0.06);
}

.grupo-menu-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    background: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
    text-align: left;
    padding: 10px 14px;
    /* ATUALIZADO 21/08/2026 -- pedido do cliente: "o título de cada
       módulo eu acho que precisa de destaque". Saiu do padrão pequeno em
       CAIXA ALTA (12px/700/var(--text-dim)) pra um título de verdade:
       maior, mais pesado, cor mais clara (mesmo tratamento usado na
       Direção 1 "Cards Elevados" dos mockups). */
    font-size: 14px;
    text-transform: none;
    letter-spacing: 0.1px;
    font-weight: 800;
    color: var(--text-bright);
}

.grupo-menu-header:hover {
    color: var(--accent-cyan);
}

.grupo-menu-header .seta-grupo {
    /* ATUALIZADO 21/08/2026 -- pedido do cliente: "as setas para expandir
       estão muito pequenas". Trocado de caractere de texto (▾, 9px) pra
       ícone SVG de verdade, quase o dobro do tamanho, traço mais grosso
       (2.3px) -- fica nítido em qualquer resolução de tela, ao contrário
       de um caractere pequeno. */
    width: 17px;
    height: 17px;
    flex-shrink: 0;
    margin-left: 8px;
    transition: transform .16s ease;
    color: var(--accent-blue);
}

.grupo-menu-corpo {
    max-height: 0;
    overflow: hidden;
    transition: max-height .2s ease;
}

.grupo-menu-corpo.aberto {
    max-height: 600px; /* generoso o bastante pro maior grupo existente */
}

.grupo-menu-header[data-aberto="1"] .seta-grupo {
    transform: rotate(180deg);
}

.sidebar-user {
    margin-top: auto;
    padding-top: 16px;
    border-top: 1px solid var(--border-steel);
    font-size: 13px;
    color: var(--text-muted);
}

.sidebar-user strong {
    display: block;
    color: var(--text-bright);
    font-size: 14px;
    margin-bottom: 2px;
}

.link-sair {
    display: inline-block;
    margin-top: 10px;
    font-size: 12px;
    color: var(--danger) !important;
}

.link-sair:hover {
    color: #ff8a8a !important;
}

.link-conta {
    display: inline-block;
    margin-top: 10px;
    font-size: 12px;
    color: var(--text-dim) !important;
}

.link-conta:hover {
    color: var(--accent-blue) !important;
}

.main-area {
    flex: 1;
    min-width: 0;
    position: relative;
    z-index: 2;
}

/* NOVO 19/08/2026 -- pedido do cliente: "na tela de conciliacao dar a
   opcao para recolher o side bar.. e usar melhor a tela". A sidebar some
   (width 0, sem padding, overflow escondido) quando <html> tem o atributo
   data-sidebar-recolhida="1" (ver templates/base.html -- bwToggleSidebar()
   e o script no <head> que lê o estado salvo em localStorage antes do
   <body> renderizar, pra não "piscar" a sidebar aberta e fechar). Só CSS
   troca instantaneamente (sem esperar re-render do servidor), funciona em
   toda tela que usa base.html, não só Conciliação. */
.sidebar {
    transition: width .18s ease, padding .18s ease;
}
html[data-sidebar-recolhida="1"] .sidebar {
    width: 0;
    padding: 24px 0;
    overflow: hidden;
    border-right: none;
}

.btn-toggle-sidebar {
    position: fixed;
    top: 20px;
    left: calc(var(--sidebar-width) - 14px);
    z-index: 50;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--bg-panel-raised);
    border: 1px solid var(--border-steel-light);
    color: var(--text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    line-height: 1;
    transition: left .18s ease, transform .18s ease, color .15s, border-color .15s;
}
.btn-toggle-sidebar:hover {
    color: var(--accent-blue);
    border-color: var(--accent-blue);
}
html[data-sidebar-recolhida="1"] .btn-toggle-sidebar {
    left: 6px;
    transform: rotate(180deg);
}

.container {
    max-width: 1000px;
    margin: 0 auto;
    padding: 32px 32px 60px;
    position: relative;
    z-index: 2;
}

.topo {
    margin-bottom: 16px;
}

.topo a {
    font-size: 14px;
    color: var(--text-muted);
}

.topo a:hover {
    color: var(--accent-blue);
}

.acoes-fila {
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.btn-pill-secundario {
    display: inline-flex;
    align-items: center;
    padding: 11px 22px;
    border-radius: 100px;
    background-color: transparent;
    border: 1px solid var(--border-steel-light);
    color: var(--text-muted);
    font-size: 14px;
    font-weight: 600;
    transition: background-color 0.15s, color 0.15s;
}

.btn-pill-secundario:hover {
    background-color: var(--bg-panel-raised);
    color: var(--text-bright);
}

.toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
}

.search-bar {
    flex: 1;
    max-width: 360px;
}

.search-bar input {
    width: 100%;
}

.date-filter {
    flex-shrink: 0;
}

.date-filter input {
    width: 180px;
    cursor: pointer;
}

/* NOVO 12-09-2026 -- filtro por Local de Atendimento (Execução de Guias
   e Solicitar Exclusão de Exames), mesmo espírito do .date-filter. */
.local-filter {
    flex-shrink: 0;
}

.local-filter select {
    width: 220px;
    cursor: pointer;
}

/* ---------- Forms ---------- */

label {
    display: block;
    margin-top: 16px;
    margin-bottom: 6px;
    font-size: 13px;
    color: var(--text-muted);
    font-weight: 500;
}

input, select, textarea {
    width: 100%;
    padding: 10px 12px;
    border-radius: var(--radius);
    border: 1px solid var(--border-steel-light);
    background-color: var(--bg-void);
    color: var(--text-bright);
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    transition: border-color 0.15s, box-shadow 0.15s;
}

/* CORRIGIDO 19/08/2026 (Rodada 9, correção 3) -- "ajustar esse layout" (tela
   Mensurar Recursos, mas o bug é em QUALQUER checkbox/radio do sistema): a
   regra `input, select, textarea { width:100%; padding:10px 12px; }` acima
   foi pensada pra campo de texto/select -- sem essa exceção, ela também
   "esticava" cada checkbox/radio pra 100% da largura da linha + padding
   grande, fazendo o quadradinho ficar solto/deslocado da legenda ao lado
   (mais visível em listas onde o <label> é flex com o texto do lado, tipo
   o "Módulos contratados" de Mensurar Recursos). Reproduzido e confirmado
   num browser de verdade antes de mexer -- ver captura de tela na entrega.
   Volta os dois pro tamanho nativo do navegador. */
input[type="checkbox"],
input[type="radio"] {
    width: auto;
    padding: 0;
}

input[type="date"] {
    color-scheme: dark;
    cursor: pointer;
}

input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--accent-blue);
    box-shadow: 0 0 0 3px var(--accent-blue-glow);
}

input:invalid:not(:placeholder-shown) {
    border-color: var(--danger);
}

textarea {
    resize: vertical;
}

button, .btn {
    display: inline-block;
    padding: 11px 20px;
    margin-top: 20px;
    background-color: var(--accent-blue);
    color: white;
    border: none;
    border-radius: var(--radius);
    cursor: pointer;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.2px;
    transition: background-color 0.15s, box-shadow 0.15s;
    text-decoration: none;
}

button:hover, .btn:hover {
    background-color: var(--accent-cyan);
    box-shadow: 0 0 18px var(--accent-blue-glow);
    color: #001018;
}

.btn-topo {
    margin-top: 0;
}

/* ---------- Login ---------- */

.login-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    background:
        radial-gradient(circle at 50% 20%, rgba(56, 113, 193, 0.06) 0%, transparent 45%);
}

.login-box {
    background-color: var(--bg-panel);
    padding: 40px;
    border-radius: 10px;
    border: 1px solid var(--border-steel);
    width: 100%;
    max-width: 380px;
    box-shadow: 0 0 50px rgba(56, 113, 193, 0.07);
}

.login-brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    margin-bottom: 28px;
}

.login-brand img {
    width: 80px;
    height: 80px;
    object-fit: contain;
    filter: drop-shadow(0 0 16px rgba(56, 113, 193, 0.32));
}

.login-brand .brand-name {
    font-family: 'Orbitron', sans-serif;
    font-weight: 700;
    font-size: 20px;
    letter-spacing: 1.5px;
}

.login-brand .brand-name .accent {
    color: var(--accent-blue);
}

.sucesso {
    background-color: var(--success-bg);
    color: var(--success);
    border: 1px solid rgba(52, 211, 153, 0.3);
    padding: 10px 14px;
    border-radius: var(--radius);
    margin-bottom: 16px;
    font-size: 14px;
}

.link-secundario {
    text-align: center;
    margin-top: 18px;
    font-size: 13px;
}

.link-secundario a {
    color: var(--text-dim);
}

.link-secundario a:hover {
    color: var(--accent-blue);
}
/* ---------- Botões de ação (alinhados e do mesmo tamanho) ---------- */

.acoes-form {
    display: flex;
    align-items: stretch;
    gap: 12px;
    margin-top: 16px;
    flex-wrap: wrap;
}

.acoes-form form {
    display: flex;
}

.btn-acao {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 160px;
    height: 44px;
    padding: 0 20px;
    margin: 0;
    border-radius: var(--radius);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    border: none;
    text-decoration: none;
    transition: background-color 0.15s, box-shadow 0.15s;
}

.btn-principal {
    background-color: var(--accent-blue);
    color: white;
}

.btn-principal:hover {
    background-color: var(--accent-cyan);
    box-shadow: 0 0 18px var(--accent-blue-glow);
    color: #001018;
}

.btn-editar {
    background-color: var(--edit-color);
    color: #1a0f2e;
}

.btn-editar:hover {
    background-color: #c4b5fd;
    box-shadow: 0 0 18px rgba(167, 139, 250, 0.35);
    color: #1a0f2e;
}

.btn-secundario {
    background-color: transparent;
    border: 1px solid var(--border-steel-light);
    color: var(--text-muted);
}

.btn-secundario:hover {
    background-color: var(--bg-panel-raised);
    color: var(--text-bright);
}

.btn-perigo {
    background-color: var(--danger);
    border: 1px solid var(--danger);
    color: white;
}

.btn-perigo:hover {
    background-color: #ff8a8a;
    border-color: #ff8a8a;
    box-shadow: 0 0 18px rgba(248, 113, 113, 0.35);
    color: white;
}

/* NOVO 18/08/2026 -- pedido do cliente: "mudar a cor do botao do
   lançamento do caixa para ficar mais visivel o texto e chame a
   atenção do usuario" -- o botão padrão (azul, igual à cor de quase
   todo botão do sistema) se perdia no meio da tela. Usa o mesmo verde
   de "sucesso" do resto do sistema (var(--success)) só que como cor de
   FUNDO (não texto), com texto escuro em negrito (mais contraste que
   texto branco em fundo claro) e um brilho constante em volta -- assim
   o botão chama atenção mesmo sem passar o mouse em cima. */
.btn-destaque-caixa {
    background-color: var(--success);
    color: #06301f;
    font-weight: 800;
    box-shadow: 0 0 14px rgba(52, 211, 153, 0.4);
}

.btn-destaque-caixa:hover {
    background-color: #5eead4;
    color: #06301f;
    box-shadow: 0 0 24px rgba(52, 211, 153, 0.6);
}

.btn-sucesso {
    background-color: var(--success);
    color: #04160f;
}

.btn-sucesso:hover {
    background-color: #4ee6ad;
    box-shadow: 0 0 18px rgba(52, 211, 153, 0.3);
    color: #04160f;
}

.btn-aviso {
    background-color: var(--warning);
    color: #251a02;
}

.btn-aviso:hover {
    background-color: #ffcc55;
    box-shadow: 0 0 18px rgba(251, 191, 36, 0.35);
    color: #251a02;
}

.erro {
    background-color: var(--danger-bg);
    color: var(--danger);
    border: 1px solid rgba(248, 113, 113, 0.3);
    padding: 10px 14px;
    border-radius: var(--radius);
    margin-bottom: 16px;
    font-size: 14px;
}

/* ---------- Painéis ---------- */

.painel {
    background-color: var(--bg-panel);
    border: 1px solid var(--border-steel);
    border-radius: 10px;
    padding: 24px;
    margin-bottom: 28px;
}

.painel p {
    margin: 10px 0;
    font-size: 14px;
    color: var(--text-muted);
}

.painel p strong {
    color: var(--text-bright);
    font-weight: 600;
    margin-right: 6px;
}

.form-page {
    max-width: 100%;
}

.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 24px;
}

.field {
    display: flex;
    flex-direction: column;
}

.field-full {
    grid-column: 1 / -1;
}

/* ---------- Anexos ---------- */

.lista-anexos {
    list-style: none;
    padding: 0;
    margin: 0;
}

.lista-anexos li {
    padding: 10px 0;
    border-bottom: 1px solid var(--border-steel);
    font-size: 14px;
}

.lista-anexos li:last-child {
    border-bottom: none;
}

.anexo-meta {
    display: block;
    color: var(--text-dim);
    font-size: 12px;
    margin-top: 2px;
}

/* ---------- Abas de status ---------- */

.status-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 20px;
}

.status-tab {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 14px;
    color: var(--text-muted) !important;
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
    cursor: pointer;
    background-color: var(--bg-panel);
    border: 1px solid var(--border-steel);
    border-radius: 100px;
}

.status-tab:hover {
    color: var(--text-bright) !important;
    border-color: var(--border-steel-light);
}

.status-tab.ativo {
    color: white !important;
    background-color: var(--accent-blue);
    border-color: var(--accent-blue);
}

.status-tab .contagem {
    background-color: var(--bg-panel-raised);
    color: var(--text-muted);
    padding: 1px 8px;
    border-radius: 100px;
    font-size: 11px;
    font-weight: 600;
}

.status-tab.ativo .contagem {
    background-color: rgba(255, 255, 255, 0.25);
    color: white;
}

/* ---------- Tabela ---------- */

.tabela-guias {
    width: 100%;
    border-collapse: collapse;
    background-color: var(--bg-panel);
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid var(--border-steel);
}

.tabela-guias th, .tabela-guias td {
    padding: 13px 16px;
    text-align: left;
    font-size: 14px;
}

.tabela-guias th {
    background-color: var(--bg-panel-raised);
    color: var(--text-muted);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
    border-bottom: 1px solid var(--border-steel);
}

.tabela-guias tbody tr {
    border-bottom: 1px solid var(--border-steel);
    transition: background-color 0.15s;
}

.tabela-guias tbody tr:last-child {
    border-bottom: none;
}

.tabela-guias tbody tr:hover {
    background-color: var(--bg-panel-raised);
}

.tabela-guias .vazio {
    text-align: center;
    color: var(--text-dim);
    padding: 30px;
}

/* NOVO 19/08/2026 (Rodada 9, Entrega E) -- pedido do cliente: "ajustar para
   a planilha nao ter rolagem ser inteira" (tela de detalhe do Pagamento
   Médico, tabela de 12 colunas). Reduz padding/fonte só quando a tabela
   tem a classe "tabela-compacta" -- diminui a largura total o suficiente
   pra caber sem rolagem na maioria das telas de notebook/desktop (>=1366px
   de largura). Em telas MENORES que isso (ex.: celular), com 12 colunas de
   dado real ainda pode sobrar rolagem -- por isso o wrapper overflow-x:auto
   (ver comentário no template) continua ali como rede de segurança, pra
   NUNCA reintroduzir o bug de "página inteira descentralizada" corrigido
   na Entrega D. Não apliquei essa classe nas outras tabelas do sistema --
   é uma correção pontual pra essa tabela específica, que é a mais larga
   (12 colunas) do módulo. */
.tabela-guias.tabela-compacta th, .tabela-guias.tabela-compacta td {
    padding: 8px 10px;
    font-size: 12.5px;
}

.tabela-guias.tabela-compacta th {
    font-size: 10.5px;
}

/* ---------- Badges de status ---------- */

.badge {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 100px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.3px;
    white-space: nowrap;
}

.badge-info {
    background-color: var(--accent-blue-glow);
    color: #7cb8ff;
}

.badge-warning {
    background-color: var(--warning-bg);
    color: var(--warning);
}

.badge-success {
    background-color: var(--success-bg);
    color: var(--success);
}

.badge-danger {
    background-color: var(--danger-bg);
    color: var(--danger);
}

.badge-neutral {
    background-color: var(--bg-panel-raised);
    color: var(--text-muted);
}

/* NOVO 18/08/2026 -- pedido do cliente: "melhore as cores das pilulas dos
   status do caixa" -- o status inicial (FECHAMENTO LANÇADO) usava
   badge-neutral (cinza), a mesma cor "sem status definido" usada em
   qualquer outro lugar do sistema -- não dava pra bater o olho e saber
   que aquilo era de fato o primeiro passo do fluxo. Trocado pra
   badge-info (azul, "acabou de entrar"). Como badge-info já era usado
   pelo status CONFERIDO, CONFERIDO ganhou esta cor nova (ciano) pra não
   ficar igual -- agora os 4 status do Caixa têm 4 cores distintas e em
   sequência lógica: azul (lançado) -> âmbar (aguardando conferência) ->
   ciano (conferido, ainda editável) -> verde (finalizado). */
.badge-cyan {
    background-color: rgba(58, 214, 255, 0.14);
    color: var(--accent-cyan);
}

/* ATUALIZADO 19/08/2026 -- pedido do cliente: "troque a cor da bolinha da
   glosa para preto" -- era roxo (var(--edit-color)), mas o cliente pediu
   preto explicitamente. Preto puro em fundo escuro fica invisível, então
   aqui a pílula inverte (fundo claro + texto preto) pra continuar legível
   e ainda "ler" como preto -- diferente de qualquer outro badge do
   conjunto (todos os outros são texto colorido em fundo escuro translúcido). */
.badge-glosa {
    background-color: #d1d5db;
    color: #0a0a0a;
}

/* NOVO 18/08/2026 -- status GUIA_NAO_LOCALIZADA (colunas de pagamento em
   branco no espelho -- possível guia errada no envio), separado da
   GLOSA de verdade -- laranja, mesmo tom já usado pra AUSENCIA na
   Agenda Plantão, até então livre neste conjunto de badges. */
.badge-guia-nao-localizada {
    background-color: rgba(251, 146, 60, 0.14);
    color: #fb923c;
}

/* NOVO 19/08/2026 -- pedido do cliente: "troque a cor do ainda não pago
   pois está igual a bolinha do sinalizada" -- NAO_PAGO usava
   badge-warning (mesmo âmbar #fbbf24 da tag/status "Sinalizada"), então
   as duas bolinhas ficavam idênticas na Conferência. NAO_PAGO ganha cor
   própria (rosa), livre nesse conjunto de badges de status. */
.badge-rosa {
    background-color: rgba(244, 114, 182, 0.14);
    color: #f472b6;
}

/* ---------- Filtros de relatório ---------- */

.filtro-relatorio {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.filtro-relatorio input[type="date"] {
    width: 150px;
    padding: 8px 10px;
    font-size: 13px;
}

/* ---------- Gráfico de barras ---------- */

.grafico-barras {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.barra-linha {
    display: grid;
    grid-template-columns: 180px 1fr 100px;
    align-items: center;
    gap: 12px;
}

.barra-label {
    font-size: 13px;
    color: var(--text-muted);
}

.barra-trilho {
    background-color: var(--bg-panel-raised);
    border-radius: 100px;
    height: 18px;
    overflow: hidden;
}

.barra-preenchida {
    height: 100%;
    background-color: var(--accent-blue);
    border-radius: 100px;
    transition: width 0.4s ease;
}

.barra-valor {
    font-size: 13px;
    color: var(--text-bright);
    text-align: right;
}

/* ---------- Dashboard de gráficos de pizza (com % dentro) ---------- */

.dashboard-pizzas {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 28px;
}

.pizza-card {
    background-color: var(--bg-panel);
    border: 1px solid var(--border-steel);
    border-radius: 10px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.pizza-card h3 {
    font-family: 'Poppins', sans-serif;
    font-size: 13px;
    color: var(--accent-blue);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0 0 16px 0;
}

.pizza-visual {
    position: relative;
    width: 140px;
    height: 140px;
    border-radius: 50%;
    box-shadow: 0 0 20px rgba(56, 113, 193, 0.14);
}

.pizza-label {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -8px;
    margin-left: -18px;
    width: 36px;
    text-align: center;
    font-size: 11px;
    font-weight: 700;
    color: #000814;
    text-shadow: 0 1px 2px rgba(255,255,255,0.4);
    pointer-events: none;
}

.pizza-legenda {
    list-style: none;
    padding: 0;
    margin: 16px 0 0 0;
    text-align: left;
    width: 100%;
    font-size: 12px;
    color: var(--text-muted);
}

.pizza-legenda li {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 3px 0;
}

.pizza-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}


/* ============================================================
   NOVO 18/08/2026 -- AGENDA PLANTÃO MÉDICO
   Grade semanal estilo "cartão de arrastar" (drag-and-drop).
   ============================================================ */

.pm-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 12.5px;
    font-weight: 600;
    cursor: grab;
    user-select: none;
    transition: transform 0.15s, box-shadow 0.15s;
}

.pm-chip:active {
    cursor: grabbing;
    transform: scale(0.97);
}

.pm-chip-bolinha {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    flex-shrink: 0;
}

.pm-chip-remover {
    background: rgba(248, 113, 113, 0.12);
    border: 1.5px solid var(--danger);
    color: var(--danger);
}

.pm-grade {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.pm-grade th,
.pm-grade td {
    border: 1px solid var(--border-steel);
    padding: 5px;
    text-align: center;
    vertical-align: middle;
}

.pm-grade thead th {
    background-color: var(--bg-panel-raised);
    color: var(--text-bright);
    font-weight: 600;
    font-size: 12.5px;
    padding: 10px 8px;
}

.pm-col-unidade {
    text-align: left !important;
    font-weight: 600;
    color: var(--text-bright);
    background-color: var(--bg-panel-raised);
    white-space: nowrap;
    min-width: 140px;
}

/* ATUALIZADO 19/08/2026 (Rodada 9, Entrega C) -- pedido do cliente: "aumentar
   o tamanho da célula, tirar a rolagem, aumentar as laterais". Célula tinha
   sido encolhida pra 42px numa entrega anterior (18/08) especificamente pra
   eliminar a rolagem vertical da página -- as duas coisas puxam em direções
   opostas (célula maior = grade mais alta = mais chance de rolar). O ajuste
   aqui: célula sobe pra 54px (mesmo tamanho mínimo que o modo mobile já usa,
   ver media query mais abaixo -- ficou mais fácil de ler/tocar) E a tela
   ganha bem mais largura útil (.container:has(.pm-grade) no próprio
   template, mesmo padrão já usado na Conciliação Unimed), pra sobrar menos
   vazio nas laterais e a rolagem HORIZONTAL quase não aparecer mesmo com
   célula maior. Rolagem VERTICAL: eliminar 100% em qualquer resolução de
   tela não é garantido matematicamente com célula maior (depende da altura
   da tela de cada um) -- se ainda notar rolagem na sua tela, me avise a
   resolução que eu ajusto fino. */
.pm-celula {
    min-width: 132px;
    height: 54px;
    background-color: var(--bg-panel);
    transition: background-color 0.15s, opacity 0.15s;
}

.pm-celula-editavel {
    cursor: pointer;
}

/* NOVO 18/08/2026 -- célula agora tem uma cor de fundo própria (tint pelo
   status, ver inline style no template) -- hover usa box-shadow em vez de
   sobrescrever o background-color, senão o hover apagava a cor do status. */
.pm-celula-editavel:hover {
    box-shadow: inset 0 0 0 999px rgba(255, 255, 255, 0.07);
}

/* NOVO 18/08/2026 -- "popup com descrição completa ao clicar no horário
   (somente leitura)": célula clicável mesmo pra quem não gerencia
   (`pode_gerenciar=False`), só que abre o popup de visualização em vez do
   diálogo de edição. */
.pm-celula-visualizavel {
    cursor: pointer;
}

.pm-celula-visualizavel:hover {
    box-shadow: inset 0 0 0 999px rgba(255, 255, 255, 0.05);
}

.pm-cartao {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-bright);
    min-height: 20px;
}

/* NOVO 18/08/2026 -- legenda de bolinhas coloridas + filtro clicável na
   Agenda ("mostre as legendas do tipo bolinha nos status na tela de
   agenda e possivel filtralas"). Filtro é 100% client-side (JS abaixo,
   no template) porque a grade é fixa/semanal -- não dá pra simplesmente
   esconder linha como numa tabela comum, cada dia/período tem que
   continuar visível, só "apaga" (dimming) o que não bate com o filtro
   ativo. */
.pm-legenda {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    padding: 10px 16px;
}

.pm-legenda-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--text-dim);
    cursor: pointer;
    padding: 3px 8px;
    border-radius: 14px;
    border: 1px solid transparent;
    user-select: none;
    transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}

.pm-legenda-item:hover {
    background-color: var(--bg-panel-raised);
}

.pm-legenda-item.pm-legenda-ativo {
    color: var(--text-bright);
    border-color: var(--border-steel-light);
    background-color: var(--bg-panel-raised);
    font-weight: 600;
}

.pm-legenda-bolinha {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.pm-legenda-limpar {
    font-size: 11.5px;
    color: var(--accent-blue);
    cursor: pointer;
    text-decoration: underline;
    padding: 3px 4px;
}

/* Célula que não bate com o filtro ativo -- continua no lugar (a grade
   não pode "sumir" um dia da semana), só fica esmaecida. */
.pm-celula-filtrada-fora {
    opacity: 0.18;
}

.pm-cartao-vazio {
    background-color: var(--danger-bg);
    border-left: 3px solid var(--danger) !important;
    color: var(--danger);
    font-weight: 600;
}

.pm-cartao-placeholder {
    color: var(--text-dim);
    font-size: 15px;
}

.pm-selo {
    font-size: 12px;
    cursor: help;
}

/* ATUALIZADO 19/08/2026 (Rodada 9) -- "MUDE O DESENHO PARA COLORIDO.. BASEADO
   NA ATENCAO QUE PRECISA": selo do status de notificação vira uma pastilha
   colorida (mesmo padrão visual dos .badge-* já usados no resto do sistema)
   em vez de um ícone monocromático discreto -- verde = tudo certo (médico já
   confirmou), azul = e-mail enviado mas ainda sem confirmação do médico,
   vermelho = falhou o envio (precisa de atenção/ação). Também fica clicável
   (cursor:pointer) nas células da grade, já que agora abre o popup de
   detalhe -- exceto na legenda estática, onde é só ilustrativo. */
.pm-selo-confirmado,
.pm-selo-notificado,
.pm-selo-falha {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 16px;
    height: 16px;
    padding: 0 3px;
    border-radius: 50%;
    cursor: pointer;
    line-height: 1;
}

.pm-selo-confirmado {
    background-color: var(--success-bg);
    color: var(--success);
}

.pm-selo-notificado {
    background-color: rgba(56, 113, 193, 0.14);
    color: var(--accent-blue);
}

.pm-selo-falha {
    background-color: var(--danger-bg);
    color: var(--danger);
}

/* NOVO 18/08/2026 -- botão "✕" de remoção rápida no cartão (clique
   direto, sem abrir o diálogo grande) -- gated na permissão
   remover_agenda_plantao_medico. */
.pm-btn-remover {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: none;
    background: rgba(248, 113, 113, 0.18);
    color: var(--danger);
    font-size: 10px;
    line-height: 1;
    cursor: pointer;
    flex-shrink: 0;
    padding: 0;
    transition: background-color 0.15s;
}

.pm-btn-remover:hover {
    background: rgba(248, 113, 113, 0.35);
}

.pm-cartao-vazio-tipo {
    font-weight: 400;
    opacity: 0.85;
    font-size: 11px;
}

/* ============================================================
   NOVO 18/08/2026 (rodada 2) -- períodos (M/T/N) na grade e visão mensal.
   ============================================================ */

.pm-col-periodo {
    text-align:left !important;
    font-weight:500;
    color: var(--text-dim);
    font-size: 12px;
    white-space: nowrap;
    min-width: 70px;
}

.pm-mensal {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    font-size: 12px;
}

.pm-mensal th {
    background-color: var(--bg-panel-raised);
    color: var(--text-bright);
    font-weight: 600;
    padding: 8px;
    border: 1px solid var(--border-steel);
}

.pm-mensal td {
    border: 1px solid var(--border-steel);
    vertical-align: top;
    height: 90px;
    padding: 6px;
}

.pm-mensal-vazio {
    background-color: var(--bg-void);
}

.pm-mensal-numero {
    font-weight: 700;
    color: var(--text-dim);
    font-size: 12px;
    margin-bottom: 4px;
}

.pm-mensal-slot {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 10.5px;
    padding: 2px 0;
    color: var(--text-bright);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pm-mensal-periodo {
    font-weight: 700;
    color: var(--text-dim);
    flex-shrink: 0;
}

.pm-mensal-bolinha {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* NOVO 18/08/2026 -- destaque da célula-alvo durante o arraste por
   toque (ver script no template agenda_plantao_medico.html: Pointer
   Events simulando drag-and-drop no celular, já que touch não dispara
   dragstart/dragover/drop nativos). */
.pm-celula-alvo-toque {
    background-color: var(--bg-panel-raised) !important;
    box-shadow: inset 0 0 0 2px var(--accent-blue);
}

.pm-chip-fantasma {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 14px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
}

/* ============================================================
   NOVO 18/08/2026 -- responsivo (celular/tablet), pedido explícito do
   cliente ("faça que esse modulo seja possivel visualizar no celular
   ajustando o tamanho das telas e icones"). Só afeta as telas da Agenda
   Plantão Médico (classes pm-*) -- não mexe no resto do sistema.
   ============================================================ */
@media (max-width: 760px) {
    .pm-chip {
        padding: 9px 14px;
        font-size: 13.5px;
        min-height: 40px; /* alvo de toque confortável (>=40px) */
    }

    .pm-grade {
        font-size: 12px;
    }

    .pm-celula {
        min-width: 108px;
        height: auto;
        min-height: 54px;
    }

    .pm-col-unidade {
        min-width: 88px;
        font-size: 12px;
    }

    .pm-col-periodo {
        min-width: 54px;
        font-size: 11px;
    }

    .pm-cartao {
        padding: 8px;
        font-size: 12px;
        flex-wrap: wrap;
        justify-content: flex-start;
    }

    .pm-btn-remover {
        width: 22px;
        height: 22px;
        font-size: 12px;
    }

    .pm-selo {
        font-size: 14px;
    }

    .pm-mensal {
        font-size: 10.5px;
    }

    .pm-mensal td {
        height: 64px;
        padding: 4px;
    }

    .pm-mensal-slot {
        font-size: 9.5px;
    }

    /* botões de topo (Médicos/Escala Padrão/Visão Mensal/Relatórios/
       Histórico/Solicitações) empilham em vez de espremer numa linha só */
    .topo > div[style*="display:flex"] {
        width: 100%;
    }
}

/* NOVO 20/08/2026 (Rodada 9, Entrega M) -- grade (tabela modalidade x
   unidade, ou lista de unidade em Materiais) da tela "Configurações por
   Médico" -- pedido do cliente: "uma tabela onde mostre todas unidades e
   todas modalidades e ai eu possa inserir os valores e configurações".
   Célula vazia = "+" clicável (abre cadastro novo); célula preenchida =
   valor clicável (abre edição/ativar-desativar/excluir), esmaecida com
   texto riscado quando a configuração está INATIVA. */

/* AJUSTADO 20/08/2026 (Rodada 9, Entrega N) -- pedido do cliente: "ajsute
   a rolagem da configuracao de procedimento... deixa ela inteira para ver
   na tela..". A grade ficava com rolagem horizontal (overflow-x: auto)
   mesmo em telas largas porque TODA página do sistema roda dentro de
   ".container", que tem "max-width: 1000px" (ver base.html) -- isso é
   proposital nas outras telas (textos/formulários ficam mais legíveis
   sem esticar até a borda da tela), mas atrapalha justamente numa tabela
   larga como essa grade. Em vez de mudar ".container" pra TODAS as
   páginas (arriscado -- afetaria a leitura em todo o resto do sistema),
   usamos ":has()" (seletor CSS que estica a regra pro PAI só quando ele
   contém um filho específico -- suportado em todo navegador atualizado)
   pra destravar a largura do container SÓ na página que tem essa grade
   dentro. Alguns navegadores muito antigos sem suporte a :has()
   simplesmente ignoram essa regra e a grade volta a rolar (nunca quebra,
   só não ganha a largura extra).

   ATUALIZADO 20/08/2026 -- pedido do cliente: "tabela sem rolagem
   aumentar para ver tudo" / "tirar a rolagem da planilha ver detalhe da
   importação", de novo depois desta primeira rodada (que só cobriu a
   grade de Procedimento). Estendida a mesma regra pra ".pmpm-tabela-
   larga" -- marcador novo colocado no wrapper das tabelas largas do
   módulo Pagamento Médico que ainda dependiam só de fonte menor
   ("tabela-compacta", Rodada 9 Entrega I/E) + rolagem horizontal como
   rede de segurança: tela inicial (lista de Importações), Ver detalhe
   da importação, e as 4 tabelas de Relatórios. */
.container:has(.pmpm-grade-wrap),
.container:has(.pmpm-tabela-larga),
.container:has(.tabela-larga) {
    max-width: 100%;
}
/* NOVO 20/08/2026 -- ".tabela-larga" é a versão genérica (não específica
   do Pagamento Médico) do marcador acima, pra qualquer tabela nova do
   sistema que precise de largura total sem depender de rolagem
   horizontal -- usado 1º na tela "Indicadores de RH". */

.pmpm-grade-wrap {
    overflow-x: auto;
    border-radius: var(--radius);
    border: 1px solid var(--border-steel);
}

.pmpm-grade {
    margin: 0;
    width: 100%;
}

.pmpm-grade th,
.pmpm-grade td {
    text-align: center;
    white-space: normal;
    padding: 8px 10px;
    word-break: break-word;
}

.pmpm-grade-canto {
    text-align: left !important;
    white-space: normal !important;
    font-weight: 600;
    position: sticky;
    left: 0;
    background: var(--bg-panel-raised);
    z-index: 1;
}

.pmpm-grade-materiais {
    max-width: 360px;
}

.pmpm-celula {
    cursor: pointer;
    border-radius: 6px;
    font-weight: 600;
    transition: background-color 0.15s ease, opacity 0.15s ease;
}

.pmpm-celula:hover {
    background-color: var(--accent-blue-glow);
}

.pmpm-celula-vazia {
    font-weight: 400;
}

.pmpm-celula-mais {
    color: var(--text-dim);
    font-size: 17px;
}

.pmpm-celula-preenchida {
    background-color: var(--success-bg);
    color: var(--success);
}

.pmpm-celula-inativa {
    background-color: var(--bg-panel);
    color: var(--text-dim);
    font-weight: 400;
    text-decoration: line-through;
    opacity: 0.7;
}

.pmpm-celula-meta {
    margin-left: 4px;
    text-decoration: none;
    display: inline-block;
}

.pmpm-celula-tag {
    font-size: 9.5px;
    text-decoration: none;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

/* NOVO 20/08/2026 (Rodada 10, Entrega H) -- pedido do cliente: "adicionar
   opção de selecionar mais de um campo para aplicar o desconto.. quando
   tem muitos faciliaria" -- destaque visual de célula marcada no modo
   "Selecionar vários" da grade Modalidade x Unidade (Procedimento e
   Materiais, ver pmpmAbrirCelulaProcNova/pmpmAbrirCelulaMatNova). */
.pmpm-celula-selecionada {
    outline: 2px solid var(--accent-blue);
    outline-offset: -2px;
    background-color: var(--accent-blue-glow);
}

.pmpm-btn-selecao-ativo {
    background-color: var(--accent-blue) !important;
    color: white !important;
    border-color: var(--accent-blue) !important;
}