/*
    Reskin visual do módulo GDoc (Gerenciador de Documentos).
    Escopo: somente páginas GDoc. Este arquivo é referenciado diretamente
    pelas views em Views/GDoc (nunca via bundle compartilhado) e todas as
    regras ficam sob ".bodyGDOC" para nunca vazar para o restante do site.
    Nenhuma regra de negócio/dados é afetada — apenas aparência.
*/

/* ---------- rodapé (_RodapeGDoc.cshtml, compartilhado com vários outros
   módulos — estilizado só por aqui, nunca editado direto) ---------- */
.bodyGDOC .navbar-fixed-bottom .modal-footer-GDoc {
    background-color: #0f5cb3;
    background-image: linear-gradient(100deg, #0f5cb3, #1479e6);
    border-top: none;
    box-shadow: none;
    height: 40px;
    box-sizing: border-box;
    padding: 0 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.bodyGDOC .navbar-fixed-bottom .modal-footer-GDoc p {
    margin: 0;
    font-size: 12px;
    color: #ffffff;
    text-align: center;
}

.bodyGDOC {
    background-color: #ffffff;
}

/* #myModal (placeholder herdado do fluxo antigo de modal — a maioria das
   páginas GDoc não usa mais isso, já navegam pra página cheia) não tem
   nenhuma largura definida em nenhum CSS carregado aqui, e acaba
   renderizando bem mais largo que a viewport, causando scroll horizontal
   na página inteira no mobile mesmo estando visualmente vazio/invisível */
.bodyGDOC .modal-GDoc {
    max-width: 100vw;
    box-sizing: border-box;
}

/* só empurra o conteúdo quando a página realmente tem a navbar fixa colorida
   (a tela de login não tem navbar, então não deve levar essa folga) */
.bodyGDOC:has(.navbar-fixed-top) {
    padding-top: 52px;
}

/* a tela de login (.gdoc-login-wrap) centraliza o card na viewport sozinha;
   zera o padding legado (10px/70px) do .bodyGDOC pra não sobrar espaço
   e gerar scroll vertical */
.bodyGDOC:has(.gdoc-login-wrap) {
    padding: 0;
}

/* quando existe o sidebar fixo, empurra todo o conteúdo normal (e a navbar/
   rodapé, que são fixed full-width) pra abrir espaço pra ele à esquerda.
   220px é a largura do sidebar; os +20px extras (e o padding-right) são
   só a folga/respiro do conteúdo, não mudam o encaixe com a navbar/sidebar
   (essa continua colada em 220px, ver regra abaixo). */
.bodyGDOC:has(.gdoc-sidebar) {
    padding-left: 240px;
    padding-right: 20px;
    padding-bottom: 20px;
    transition: padding-left .2s ease;
}

.bodyGDOC:has(.gdoc-sidebar) .navbar-fixed-top,
.bodyGDOC:has(.gdoc-sidebar) .navbar-fixed-bottom {
    left: 220px !important;
    transition: left .2s ease;
}

/* botão hamburguer — só existe visualmente no mobile (media query
   abaixo troca o display pra inline-flex); no desktop fica escondido */
.gdoc-mobile-menu-btn {
    display: none;
    background: none;
    border: none;
    padding: 4px 8px;
    margin: 0;
    color: #ffffff;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    flex: none;
}

.gdoc-mobile-menu-btn svg {
    display: block;
}

/* fundo escurecido atrás do menu quando aberto no mobile (fica
   escondido/sem clique no desktop, onde o sidebar já é sempre visível) */
.gdoc-sidebar-backdrop {
    display: none;
}

/* botão "recolher/expandir" (só desktop — ver troca de largura mais abaixo).
   Fica fixo (não dentro do .gdoc-sidebar) porque o sidebar tem overflow-y:auto,
   o que faz o navegador também clipar o eixo X e cortaria um filho posicionado
   pra fora da borda direita dele. */
.gdoc-sidebar-collapse-btn {
    position: fixed;
    top: 68px;
    left: 220px;
    transform: translateX(-50%);
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background-color: #ffffff;
    border: 1px solid #e3e5e9;
    box-shadow: 0 2px 6px -1px rgba(19, 38, 37, .25);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 1041;
    color: #7c908d;
    padding: 0;
    transition: left .2s ease;
}

.gdoc-sidebar-collapse-btn:hover {
    background-color: #eaf3fd;
    color: #0d5aa8;
    border-color: #b7d9f7;
}

.gdoc-sidebar-collapse-btn svg {
    display: block;
    transition: transform .2s ease;
}

.bodyGDOC.gdoc-sidebar-collapsed .gdoc-sidebar-collapse-btn {
    left: 64px;
}

.bodyGDOC.gdoc-sidebar-collapsed .gdoc-sidebar-collapse-btn svg {
    transform: rotate(180deg);
}

/* o sidebar fixo de 220px foi desenhado só pra desktop — numa tela de
   celular ele toma a maior parte do espaço e "esmaga" o conteúdo.
   Abaixo de 768px, ele vira uma gaveta que começa fora da tela (escondida
   à esquerda) e desliza pra dentro só quando o usuário abre pelo botão
   hamburguer — assim o menu continua acessível, só não fica ocupando
   espaço o tempo todo. */
@media (max-width: 767px) {
    .gdoc-mobile-menu-btn {
        display: inline-flex;
    }

    /* recolher/expandir é só um recurso de desktop pra ganhar espaço
       horizontal — no mobile o sidebar já é uma gaveta off-canvas, então
       esse botão fica escondido (a gaveta some inteira, não faz sentido
       "recolher só os textos" dela) */
    .gdoc-sidebar-collapse-btn {
        display: none;
    }

    .bodyGDOC .gdoc-sidebar {
        width: 260px;
        transform: translateX(-100%);
        transition: transform .25s ease;
        box-shadow: 4px 0 24px -8px rgba(19, 38, 37, .35);
    }

    .bodyGDOC.gdoc-sidebar-open .gdoc-sidebar {
        transform: translateX(0);
    }

    .bodyGDOC.gdoc-sidebar-open .gdoc-sidebar-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        background-color: rgba(15, 25, 35, .45);
        z-index: 1035;
    }

    .bodyGDOC:has(.gdoc-sidebar) {
        padding-left: 20px;
        padding-right: 20px;
    }

    .bodyGDOC:has(.gdoc-sidebar) .navbar-fixed-top,
    .bodyGDOC:has(.gdoc-sidebar) .navbar-fixed-bottom {
        left: 0 !important;
    }

    .bodyGDOC .navbar-fixed-top {
        /* a regra base ".navbar-fixed-top { height: 52px }" vem depois
           no arquivo (seção "cabeçalho") e ganharia da nossa aqui só por
           ordem — precisa de !important pra realmente virar "auto" */
        height: auto !important;
        padding: 8px 14px;
        /* bootstrap-responsive.css compensa o padding lateral do body
           com margin -20px nesse breakpoint — isso é pensado pra uma
           navbar normal (dentro do fluxo), não pra uma "position:fixed"
           que já se posiciona direto contra o viewport; zera aqui pra
           não escorregar 20px pra fora da tela */
        margin: 0 !important;
        /* com display:flex, o navegador calcula a largura pelo conteúdo
           dos filhos (o texto do usuário é mais longo que a tela) em vez
           de esticar até o "right" — "100%" acaba resolvendo contra uma
           largura errada aqui, então usa "vw" (sempre relativo à
           viewport de verdade) pra garantir que bate com a tela */
        width: 100vw !important;
        box-sizing: border-box;
    }

    .gdoc-filtros-linha,
    .gdoc-toolbar-row {
        flex-wrap: wrap;
    }

    /* o form de Período (2 inputs de data + botão) não cabe numa tela
       de celular lado a lado — deixa quebrar linha e os inputs
       encolherem em vez de forçar largura fixa e estourar a tela */
    .bodyGDOC .gdoc-filtros-linha > div:first-child {
        flex-wrap: wrap;
    }

    .bodyGDOC .input-append {
        flex-wrap: wrap;
    }

    .bodyGDOC .input-append input.input-small {
        flex: 1 1 120px;
        width: auto;
    }

    /* no mobile o título + "Usuário: ..." quebram em 2-3 linhas (a
       navbar vira "height:auto" acima) — o padding-top de 52px do
       desktop (pensado pra 1 linha só) não acompanha isso, e o card
       de filtros fica por cima do fim da navbar. Dá uma folga maior,
       fixa, que cobre o caso comum de 3 linhas quebradas. */
    .bodyGDOC:has(.navbar-fixed-top) {
        padding-top: 100px;
    }

    /* campos de formulário do bootstrap legado (.input-large,
       .input-xlarge, .input-xxlarge, .input-medium-large) têm largura
       fixa em px (300-400px+), maior que a tela — estoura o mobile em
       vários formulários do GDoc (Enviar Documentos, Log, etc.) */
    .bodyGDOC input.input-large,
    .bodyGDOC input.input-xlarge,
    .bodyGDOC input.input-xxlarge,
    .bodyGDOC input.input-medium-large,
    .bodyGDOC select.input-large,
    .bodyGDOC select.input-xlarge,
    .bodyGDOC select.input-xxlarge,
    .bodyGDOC select.input-medium-large,
    .bodyGDOC textarea.input-large,
    .bodyGDOC textarea.input-xlarge,
    .bodyGDOC textarea.input-xxlarge,
    .bodyGDOC textarea.input-medium-large {
        width: 100% !important;
        max-width: 100%;
        box-sizing: border-box;
    }

    /* WebGrid (toda tabela de dados do GDoc) tem muitas colunas com largura
       própria (.webgrid-columns-*) e pode ter dezenas de linhas — soma
       facilmente bem mais largura E altura que a tela no celular. Em vez
       de tentar empilhar/responsivar cada coluna (mudaria o layout de cada
       tela, uma por uma), a tabela é envolvida numa div própria (ver
       ".gdoc-table-scroll" em GDoc.js) que rola nos dois eixos: o resto da
       página (filtros, título) não estica/quebra junto nem obriga rolar a
       página inteira pra ver as próximas linhas. Usa uma div de verdade
       (não a tabela virando display:block) porque esse truque mais antigo
       não habilita rolagem por toque de forma confiável em navegador
       móvel de verdade. */
    .bodyGDOC .gdoc-table-scroll {
        overflow: auto;
        -webkit-overflow-scrolling: touch;
        max-width: 100%;
        max-height: 60vh;
    }
}

/* sidebar recolhido (só ícones) — desktop apenas (o mobile trata a
   gaveta inteira via classe própria, ver ".gdoc-sidebar-open" acima).
   Escopado com "min-width" (em vez de deixar valendo sempre e sobrepor
   dentro do media query mobile) porque uma regra com 2 classes
   (".gdoc-sidebar-collapsed .gdoc-sidebar") tem mais especificidade que
   a regra ".bodyGDOC .gdoc-sidebar" do media query mobile e ganharia dela
   mesmo lá dentro, quebrando a gaveta se o usuário tivesse recolhido o
   menu no desktop antes de estreitar a janela/girar o celular. */
@media (min-width: 768px) {
    .bodyGDOC.gdoc-sidebar-collapsed .gdoc-sidebar {
        width: 64px;
    }

    .bodyGDOC.gdoc-sidebar-collapsed:has(.gdoc-sidebar) {
        padding-left: 84px;
    }

    .bodyGDOC.gdoc-sidebar-collapsed:has(.gdoc-sidebar) .navbar-fixed-top,
    .bodyGDOC.gdoc-sidebar-collapsed:has(.gdoc-sidebar) .navbar-fixed-bottom {
        left: 64px !important;
    }

    .bodyGDOC.gdoc-sidebar-collapsed .gdoc-sidebar-link {
        justify-content: center;
    }

    .bodyGDOC.gdoc-sidebar-collapsed .gdoc-sidebar-link-text,
    .bodyGDOC.gdoc-sidebar-collapsed .gdoc-sidebar-section {
        display: none;
    }

    .bodyGDOC.gdoc-sidebar-collapsed .gdoc-sidebar-org {
        padding: 0 8px;
    }

    .bodyGDOC.gdoc-sidebar-collapsed .gdoc-sidebar-sair-btn {
        padding: 5px 8px;
        font-size: 10.5px;
    }
}

/* ---------- sidebar fixo (Arquivo/Usuário/Sair), no lugar do menu
   horizontal antigo — fica sempre visível, igual ao padrão usado no Flow */
.gdoc-sidebar {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    width: 220px;
    background-color: #ffffff;
    display: flex;
    flex-direction: column;
    z-index: 1040;
    overflow-y: auto;
    transition: width .2s ease;
}

/* mesma altura e cor da navbar azul ao lado, pra a linha de baixo alinhar
   e o topo do sidebar "casar" visualmente com a barra do topo */
.gdoc-sidebar-org {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 52px;
    box-sizing: border-box;
    padding: 0 16px;
    background-color: #1479e6;
    border-bottom: none;
}

.gdoc-sidebar-org:hover {
    background-color: #0f5cb3;
}

.gdoc-sidebar-org img {
    max-height: 34px;
    max-width: 100%;
    /* item de flex (.gdoc-sidebar-org é display:flex) tem min-width:auto por
       padrão, que trava no tamanho intrínseco da imagem e ignora esse
       max-width — sem isso, no sidebar recolhido (64px) a logo não encolhe
       e vaza por cima da navbar ao lado */
    min-width: 0;
}

/* a borda direita fica só nas partes brancas (não na área azul do topo,
   pra não cruzar por cima e criar uma linha clara ali) */
.gdoc-sidebar-nav {
    flex: 1 1 auto;
    padding: 10px;
    overflow-y: auto;
    border-right: 1px solid #e3e5e9;
}

.gdoc-sidebar-section {
    padding: 14px 10px 6px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #7c908d;
    font-weight: 700;
}

.gdoc-sidebar-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    border-radius: 7px;
    font-size: 13.5px;
    font-weight: 500;
    color: #2a3742;
    text-decoration: none;
}

.gdoc-sidebar-link svg {
    flex: none;
    color: #7c908d;
}

.gdoc-sidebar-link:hover {
    background-color: #eaf3fd;
    color: #0d5aa8;
}

.gdoc-sidebar-link:hover svg {
    color: #0d5aa8;
}

/* mesma altura do rodapé (_RodapeGDoc) ao lado, pra a linha de cima alinhar */
.gdoc-sidebar-footer {
    height: 40px;
    box-sizing: border-box;
    border-top: 1px solid #e3e5e9;
    border-right: 1px solid #e3e5e9;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* mesmo desenho do botão "SAIR" que já existia na barra azul (pill,
   borda, hover), só adaptado pro fundo branco do rodapé do sidebar */
.gdoc-sidebar-sair-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 5px 18px;
    border-radius: 999px;
    border: 1px solid #f0d3d0;
    background-color: #ffffff;
    color: #b1473f;
    font-weight: 700;
    font-size: 12px;
    text-decoration: none;
}

.gdoc-sidebar-sair-btn:hover {
    background-color: #f7e6e4;
    border-color: #e3a9a3;
}

/* ---------- cabeçalho (navbar fixa) ---------- */
/* _TopoGerenciador.cshtml é compartilhado com o módulo GerenciadorArquivos,
   então não é editado diretamente — todo o realinhamento é feito aqui,
   escopado em .bodyGDOC (usado só pelo GDoc). */
/* mesma altura do .gdoc-sidebar-org ao lado, pra as duas linhas de baixo
   alinharem uma com a outra */
.bodyGDOC .navbar-fixed-top {
    background-color: #1479e6;
    box-shadow: 0 4px 14px -8px rgba(15, 92, 179, .55);
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 24px;
    padding: 0 20px;
    box-sizing: border-box;
    height: 52px;
    /* bootstrap-responsive.css tem um breakpoint (max-width:979px) que
       vira a navbar "position:static" pra ela rolar junto com a página
       em telas pequenas — isso é o comportamento certo pro resto do
       site, mas quebra o layout do GDoc (sidebar fixo + navbar fixa
       colada nele). Força fixa sempre, só aqui em .bodyGDOC. */
    position: fixed !important;
    top: 0 !important;
}

.bodyGDOC .navbar-fixed-top > div {
    float: none;
    width: auto;
    margin: 0;
    padding: 0;
}

/* .span2/.span3 têm margin-top/padding-top embutidos inline no
   _TopoGerenciador.cshtml compartilhado (ex: "margin-top:10px" no título);
   como estilo inline sempre vence CSS externo, o !important aqui é
   necessário só pra neutralizar esse resquício e alinhar tudo na mesma linha.
   Não mexe em .pull-right, que precisa do margin-left:auto para ir à direita. */
.bodyGDOC .navbar-fixed-top > .span2,
.bodyGDOC .navbar-fixed-top > .span3 {
    margin: 0 !important;
    padding: 0 !important;
}

.bodyGDOC .navbar-fixed-top > .span2 {
    display: flex;
    align-items: center;
}

/* logo novo só no GDoc — troca só a imagem renderizada, sem tocar no
   arquivo compartilhado logoMenor.png (usado também pelo LancamentoEventos) */
.bodyGDOC .navbar-fixed-top > .span2 img {
    content: url("img/logo-gdoc-branco.png");
    max-height: 28px;
    width: auto;
    display: block;
}

.bodyGDOC .navbar-fixed-top > .span3 strong {
    font-size: 14px;
}

.bodyGDOC .navbar-fixed-top .pull-right {
    float: none;
    margin-left: auto;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
}

.bodyGDOC .navbar-fixed-top div,
.bodyGDOC .navbar-fixed-top strong {
    color: #ffffff;
}

/* uma linha "margin-top:15px" inline (legado, no _TopoGerenciador
   compartilhado) fica grande demais com a navbar mais compacta */
.bodyGDOC .navbar-fixed-top + .row {
    margin-top: 6px !important;
}

.bodyGDOC .navbar-fixed-top + .row br {
    display: none;
}

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

.gdoc-toolbar-row strong {
    color: #182430;
    flex: 0 0 auto;
    white-space: nowrap;
}

.gdoc-toolbar-row p {
    margin: 0;
}

.gdoc-toolbar-row .gdoc-busca-input {
    flex: 1 1 auto;
    min-width: 160px;
}

.gdoc-toolbar-row select {
    flex: 0 0 auto;
    min-width: 150px;
}

.bodyGDOC .navbar-fixed-top .pull-right a {
    display: inline-block;
    color: #ffffff;
    font-weight: 700;
    text-decoration: none;
    border: 1px solid rgba(255, 255, 255, .45);
    padding: 4px 14px;
    border-radius: 999px;
    margin-left: 6px;
}

.bodyGDOC .navbar-fixed-top .pull-right a:hover {
    background-color: rgba(255, 255, 255, .16);
}

/* ---------- menus (nav-pills / dropdowns) ---------- */
.bodyGDOC .nav-pills {
    gap: 4px;
}

.bodyGDOC .nav-pills > li > a {
    font-weight: 600;
    font-size: 13.5px;
    color: #37454f;
    padding: 8px 14px;
    border-radius: 7px;
    text-decoration: none;
    transition: background-color .15s ease, color .15s ease;
}

/* a "caixa" ao redor do item aberto/clicado era o contorno padrão do
   navegador no link (ele não tem classe própria pra estilizar o foco);
   troco por um destaque de fundo — visível, só que mais discreto */
.bodyGDOC .nav-pills > li > a:hover,
.bodyGDOC .nav-pills > li > a:focus,
.bodyGDOC .nav-pills > li.dropdown.open > a {
    background-color: #eaf3fd;
    color: #0d5aa8;
    outline: none;
}

.bodyGDOC .nav-pills > .active > a,
.bodyGDOC .nav-pills > .active > a:hover {
    background-color: #1479e6;
    color: #ffffff;
}

.bodyGDOC .nav-pills .caret {
    border-top-color: currentColor;
    opacity: .55;
    margin-left: 5px;
}

.bodyGDOC .dropdown-menu {
    border: 1px solid #dde5ee;
    border-radius: 10px;
    box-shadow: 0 10px 28px -12px rgba(19, 38, 37, .3);
    padding: 6px;
    margin-top: 6px;
    min-width: 210px;
}

.bodyGDOC .dropdown-menu > li > a {
    padding: 9px 12px;
    border-radius: 6px;
    font-size: 13.5px;
    font-weight: 500;
    color: #2a3742;
}

.bodyGDOC .dropdown-menu > li > a:hover,
.bodyGDOC .dropdown-menu > li > a:focus {
    background-color: #eaf3fd;
    background-image: none;
    color: #0d5aa8;
    outline: none;
    text-shadow: none;
}

/* ---------- botões ---------- */
.bodyGDOC .btn {
    border-radius: 7px;
    font-weight: 600;
    padding: 7px 16px;
    background-color: #ffffff;
    background-image: none;
    border: 1.5px solid #dde5ee;
    color: #182430;
    text-shadow: none;
    box-shadow: none;
}

.bodyGDOC .btn:hover,
.bodyGDOC .btn:focus {
    background-color: #eaf3fd;
    border-color: #1479e6;
    color: #0d5aa8;
}

.bodyGDOC .btn-primary {
    background-color: #1479e6;
    background-image: none;
    border-color: #0f5cb3;
    color: #ffffff;
    text-shadow: none;
}

.bodyGDOC .btn-primary:hover,
.bodyGDOC .btn-primary:focus {
    background-color: #0f5cb3;
    border-color: #0f5cb3;
    color: #ffffff;
}

/* ---------- rótulos dos filtros (períodos, tipo, visualizado) ---------- */
.bodyGDOC .row > div > strong {
    color: #182430;
}

/* Card que separa visualmente os filtros (Busca/Período/Mostrar) do menu
   Arquivo/Usuário acima — em vez de ficarem "grudados", como em painéis
   modernos que isolam a barra de filtros do resto da navegação. */
.gdoc-filtros-card {
    margin-top: 12px;
    margin-bottom: 12px;
    padding: 8px 14px;
    background-color: #fafbfc;
    border: 1px solid #e3e5e9;
    border-radius: 8px;
}

.gdoc-filtros-card strong {
    font-size: 12.5px;
    white-space: nowrap;
}

/* rótulo e campos lado a lado, pra baixar a altura do card e ele
   aproveitar a largura disponível */
.gdoc-filtros-linha > div:first-child {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1 1 auto;
}

.gdoc-filtros-linha > div:first-child form {
    margin: 0;
}

/* Linha de filtros do painel do escritório (Busca / Período / Mostrar):
   Busca estica pra ocupar o espaço livre; Período e Mostrar ficam
   colados à direita, mais próximos um do outro. */
.gdoc-filtros-linha {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    flex-wrap: nowrap;
    margin-left: 0;
    max-width: 100%;
}

.gdoc-filtros-linha > div {
    flex: 0 0 auto;
    width: auto;
    min-width: 0;
    margin: 0;
}


/* ---------- campos de formulário (busca, período, selects) ---------- */
.bodyGDOC input[type="text"],
.bodyGDOC input[type="password"],
.bodyGDOC input[type="search"],
.bodyGDOC select,
.bodyGDOC textarea {
    border: 1.5px solid #dde5ee;
    border-radius: 7px;
    padding: 7px 10px;
    font-size: 13.5px;
    color: #182430;
}

/* input[type=search] tem aparência nativa própria no Chrome/Safari (cantos
   mais arredondados, ícone de limpar diferente) — reseta só nele, sem
   afetar o <select> (que precisa manter a seta nativa) */
.bodyGDOC input[type="search"] {
    -webkit-appearance: none;
    appearance: none;
}

/* #periodo1/#periodo2 viraram type=search pra reduzir o dropdown de
   autofill do Chrome — mas esse tipo reserva um espacinho interno a mais
   (do "x" de limpar, mesmo com appearance:none acima), fazendo a data
   "dd/mm/aaaa" ficar apertada dentro dos mesmos 90px do ".input-small" */
.bodyGDOC #periodo1,
.bodyGDOC #periodo2 {
    width: 108px;
}

/* input de texto e select com a mesma altura, pra não ficarem
   desalinhados quando aparecem lado a lado (ex: Período + Mostrar) */
.bodyGDOC input[type="text"],
.bodyGDOC input[type="password"],
.bodyGDOC input[type="search"],
.bodyGDOC select {
    height: 34px;
    box-sizing: border-box;
}

.bodyGDOC input[type="text"]:focus,
.bodyGDOC input[type="password"]:focus,
.bodyGDOC input[type="search"]:focus,
.bodyGDOC select:focus,
.bodyGDOC textarea:focus {
    outline: 2px solid #e5f1fd;
    border-color: #1479e6;
}

.bodyGDOC .input-append {
    display: flex;
    align-items: center;
    gap: 6px;
}

.bodyGDOC .input-append .btn {
    margin: 0;
}

.bodyGDOC input[type="radio"] {
    margin-right: 4px;
    accent-color: #1479e6;
    vertical-align: middle;
}

/* ---------- formulários de conteúdo (Enviar Documentos, etc.) — rótulo
   em cima do campo, em vez do span2/span5 lado a lado antigo, que
   desalinhava com rótulos de tamanhos diferentes */
.gdoc-form-card {
    max-width: 460px;
    margin: 20px auto 0;
    padding: 24px 28px;
    background-color: #fafbfc;
    border: 1px solid #e3e5e9;
    border-radius: 10px;
}

.gdoc-form-group {
    margin-bottom: 16px;
}

.gdoc-form-group label {
    display: block;
    font-weight: 600;
    font-size: 13.5px;
    color: #182430;
    margin-bottom: 6px;
}

.gdoc-form-group .gdoc-required {
    color: #b1473f;
    font-weight: 700;
}

.gdoc-form-group select,
.gdoc-form-group textarea,
.gdoc-form-group input[type="text"],
.gdoc-form-group input[type="password"],
.gdoc-form-group input[type="file"] {
    width: 100%;
    box-sizing: border-box;
}

.gdoc-form-actions {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 22px;
}

/* ---------- input de arquivo moderno (troca o botão nativo feio do
   navegador por um botão no mesmo estilo dos outros da tela) ---------- */
.gdoc-file {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

/* esconde o input nativo sem tirar do fluxo de acessibilidade/teclado —
   quem abre o seletor de arquivo é o <label for="..."> estilizado.
   !important necessário: ".gdoc-form-group input[type=file]" (classe+
   atributo) tem mais especificidade que uma classe sozinha e venceria */
.gdoc-file-input-native {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.gdoc-file-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 7px 16px;
    border-radius: 7px;
    border: 1.5px solid #dde5ee;
    background-color: #ffffff;
    color: #182430;
    font-weight: 600;
    font-size: 13.5px;
    cursor: pointer;
    white-space: nowrap;
    margin: 0;
}

.gdoc-file-btn:hover {
    background-color: #eaf3fd;
    border-color: #1479e6;
    color: #0d5aa8;
}

.gdoc-file-name {
    font-size: 13.5px;
    color: #7c908d;
}

/* ---------- combobox filtrável (digita pra filtrar as opções de um
   <select> comum, sem depender de nenhuma lib externa) ---------- */
.gdoc-combo {
    position: relative;
}

.gdoc-combo-native {
    /* !important necessário: ".gdoc-form-group select" (classe+tag) tem
       mais especificidade que uma classe sozinha e venceria */
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.gdoc-combo-input {
    width: 100%;
    box-sizing: border-box;
    cursor: pointer;
}

.gdoc-combo-panel {
    display: none;
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    max-height: 260px;
    overflow-y: auto;
    background-color: #ffffff;
    border: 1px solid #dde5ee;
    border-radius: 8px;
    box-shadow: 0 10px 28px -12px rgba(19, 38, 37, .3);
    z-index: 20;
}

.gdoc-combo-panel.open {
    display: block;
}

.gdoc-combo-option {
    padding: 8px 12px;
    font-size: 13.5px;
    color: #182430;
    cursor: pointer;
}

.gdoc-combo-option:hover,
.gdoc-combo-option.is-selected {
    background-color: #eaf3fd;
    color: #0d5aa8;
}

.gdoc-combo-empty {
    padding: 8px 12px;
    font-size: 13px;
    color: #7c908d;
}

.gdoc-form-card .text-error strong {
    font-size: 12.5px;
}

/* ---------- tabelas (WebGrid) ---------- */
.bodyGDOC .webgrid {
    border: 1px solid #dde5ee;
    border-radius: 10px;
    border-collapse: separate;
    border-spacing: 0;
    overflow: hidden;
}

/* headerStyle do WebGrid vira classe na <tr>, não em cada <th> (cada
   <th> não tem classe nenhuma) — por isso as regras aqui têm que mirar
   ".webgrid-header th", nunca só ".webgrid-header" */
.bodyGDOC .webgrid-header,
.bodyGDOC .webgrid-header-center {
    background-color: #eaf3fd;
}

.bodyGDOC .webgrid-header th,
.bodyGDOC .webgrid-header-center th {
    color: #0d5aa8;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 11.5px;
    letter-spacing: .05em;
    /* o padding fica no <a> (abaixo) quando a coluna é ordenável, pra
       toda a célula virar área clicável — sem isso o link ocupa só o
       tamanho do texto, bem menor que o cabeçalho inteiro, e cliques no
       resto da célula (que visualmente parece clicável) não fazem nada */
    padding: 0 !important;
    /* navegadores centralizam <th> por padrão — precisa forçar esquerda
       como base (a 1ª coluna, "Visualizado", sobrescreve pra centro
       logo abaixo) */
    text-align: left !important;
    border-left-color: #dde5ee;
    border-right-color: #dde5ee;
}

/* cabeçalho sem link (coluna não-ordenável) não tem o <a> pra levar o
   padding — mantém o padding direto no th nesse caso */
.bodyGDOC .webgrid-header th:not(:has(a)),
.bodyGDOC .webgrid-header-center th:not(:has(a)) {
    padding: 13px 10px !important;
}

/* "Visualizado" é a 1ª coluna — cabeçalho centralizado, alinhado com o
   ícone (que também é centralizado na célula) */
.bodyGDOC .webgrid-header th:first-child,
.bodyGDOC .webgrid-header-center th:first-child {
    text-align: center !important;
}

/* cabeçalhos ordenáveis (o WebGrid já gera <a> pra ordenar por coluna) —
   preenche a célula inteira (display:block + padding próprio) pra
   qualquer clique no cabeçalho ordenar, não só um clique certeiro em
   cima do texto */
.bodyGDOC .webgrid-header a,
.bodyGDOC .webgrid-header-center a {
    display: block;
    padding: 13px 10px;
    color: inherit;
    text-decoration: none;
    cursor: pointer;
}

.bodyGDOC .webgrid-header a:hover,
.bodyGDOC .webgrid-header-center a:hover {
    text-decoration: underline;
}

.bodyGDOC .webgrid-row-style {
    border-bottom: 1px solid #eef1f4;
    border-left-color: #eef1f4;
    border-right-color: #eef1f4;
}

.bodyGDOC .webgrid-alternating-row {
    background-color: #f2f7fc;
    border-bottom: 1px solid #eef1f4;
    border-left-color: #eef1f4;
    border-right-color: #eef1f4;
}


.bodyGDOC .webgrid-footer {
    background-color: #fafbfc;
    border-top: 1px solid #dde5ee;
    border-left-color: #dde5ee;
    border-right-color: #dde5ee;
    padding: 8px 10px;
}

.bodyGDOC .webgrid-footer a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 26px;
    height: 26px;
    padding: 0 8px;
    margin: 0 2px;
    border-radius: 6px;
    border: 1px solid #dde5ee;
    background-color: #ffffff;
    color: #182430;
    text-decoration: none;
    font-size: 12.5px;
    font-weight: 600;
}

.bodyGDOC .webgrid-footer a:hover {
    background-color: #eaf3fd;
    border-color: #1479e6;
    color: #0d5aa8;
}

/* ---------- paginação client-side da lista de empresas — a grid
   continua trazendo todas as empresas do período numa única resposta
   (sem paginar no servidor, pra Busca/Mostrar filtrarem sem bater no
   banco de novo), mas só renderiza um "pedaço" por vez — clientes com
   1000+ empresas não travam a tela inteira de uma vez */
.gdoc-pager {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-top: 14px;
    padding: 10px 0;
}

.gdoc-pager-info,
.gdoc-pager-page {
    font-size: 12.5px;
    color: #7c908d;
}

.gdoc-pager-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 16px;
    border-radius: 7px;
    border: 1.5px solid #dde5ee;
    background-color: #ffffff;
    color: #182430;
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
}

.gdoc-pager-btn:hover:not(:disabled) {
    background-color: #eaf3fd;
    border-color: #1479e6;
    color: #0d5aa8;
}

.gdoc-pager-btn:disabled {
    opacity: .4;
    cursor: default;
}

.bodyGDOC .webgrid-columns,
.bodyGDOC .webgrid-columns-width,
.bodyGDOC .webgrid-columns-width-medium,
.bodyGDOC .webgrid-columns-width-large,
.bodyGDOC .webgrid-columns-cnpj {
    border-right-color: #eef1f4;
    padding: 8px 10px;
}

/* coluna "Observações" do painel da Empresa — usava a classe genérica
   ".span4" (300px, do grid antigo do Bootstrap, usada em várias outras
   telas) só pela largura; passou pra classe própria, um pouco mais
   estreita, só o suficiente pra tirar o scroll horizontal da tela */
.bodyGDOC .gdoc-observacoes-cell {
    display: inline-block;
    width: 260px;
    word-wrap: break-word;
}

/* coluna "CNPJ/CPF" — largura justa pro conteúdo (14 dígitos), sem
   sobrar espaço à toa como a coluna genérica "webgrid-columns" */
.bodyGDOC .webgrid-columns-cnpj {
    width: 150px;
    white-space: nowrap;
}

/* ---------- tela de acesso (login) ---------- */
.gdoc-login-wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    padding: 24px;
    box-sizing: border-box;
}

.gdoc-login-card {
    width: min(380px, 100%);
    border: 1px solid #dde5ee;
    border-radius: 14px;
    box-shadow: 0 10px 30px -12px rgba(19, 38, 37, .25);
    overflow: hidden;
    background-color: #ffffff;
}

.gdoc-login-top {
    background-color: #1479e6;
    background-image: linear-gradient(100deg, #0f5cb3, #1479e6);
    color: #ffffff;
    text-align: center;
    padding: 30px 24px 22px;
}

.gdoc-login-top img {
    max-height: 42px;
    max-width: 70%;
    margin-bottom: 12px;
}

.gdoc-login-top h4 {
    color: #ffffff;
    margin: 0;
    font-size: 15px;
    font-weight: 600;
}

.gdoc-login-body {
    padding: 26px 30px 30px;
}

.gdoc-login-body .control-group {
    margin-bottom: 14px;
}

.gdoc-login-body input[type="text"],
.gdoc-login-body input[type="password"] {
    width: 100%;
    box-sizing: border-box;
    padding: 11px 13px;
    border-radius: 8px;
    border: 1.5px solid #dde5ee;
    font-size: 14px;
}

.gdoc-login-body input[type="text"]:focus,
.gdoc-login-body input[type="password"]:focus {
    outline: 2px solid #e5f1fd;
    border-color: #1479e6;
}

.gdoc-login-body .btn-primary {
    width: 100%;
    padding: 11px 16px;
    font-size: 14px;
}

.gdoc-login-body h4.text-error {
    text-align: center;
    font-size: 13px;
}

/* ---------- modal de aviso (troca do alert() nativo) ---------- */
.bodyGDOC .gdoc-alert-backdrop {
    position: fixed;
    inset: 0;
    background-color: rgba(15, 25, 35, .45);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 2000;
}

.bodyGDOC .gdoc-alert-backdrop.open {
    display: flex;
}

.bodyGDOC .gdoc-alert-box {
    width: min(360px, 90vw);
    background-color: #ffffff;
    border-radius: 12px;
    box-shadow: 0 20px 45px -12px rgba(19, 38, 37, .35);
    overflow: hidden;
}

.bodyGDOC .gdoc-alert-head {
    background-color: #1479e6;
    background-image: linear-gradient(100deg, #0f5cb3, #1479e6);
    color: #ffffff;
    padding: 14px 18px;
    font-weight: 700;
    font-size: 14.5px;
}

.bodyGDOC .gdoc-alert-body {
    padding: 20px 18px;
    font-size: 14px;
    color: #182430;
    line-height: 1.5;
}

.bodyGDOC .gdoc-alert-actions {
    padding: 0 18px 18px;
    text-align: right;
}

.bodyGDOC .gdoc-alert-actions button {
    background-color: #1479e6;
    background-image: none;
    color: #ffffff;
    border: none;
    border-radius: 7px;
    padding: 8px 20px;
    font-weight: 600;
    font-size: 13.5px;
    cursor: pointer;
}

.bodyGDOC .gdoc-alert-actions button:hover {
    background-color: #0f5cb3;
}

.bodyGDOC .gdoc-confirm-backdrop {
    position: fixed;
    inset: 0;
    background-color: rgba(15, 25, 35, .45);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 2000;
}

.bodyGDOC .gdoc-confirm-backdrop.open {
    display: flex;
}

.bodyGDOC .gdoc-confirm-box {
    width: min(380px, 90vw);
    background-color: #ffffff;
    border-radius: 12px;
    box-shadow: 0 20px 45px -12px rgba(19, 38, 37, .35);
    overflow: hidden;
}

.bodyGDOC .gdoc-confirm-head {
    background-color: #b1473f;
    color: #ffffff;
    padding: 14px 18px;
    font-weight: 700;
    font-size: 14.5px;
}

.bodyGDOC .gdoc-confirm-body {
    padding: 20px 18px;
    font-size: 14px;
    color: #182430;
    line-height: 1.5;
}

.bodyGDOC .gdoc-confirm-body input {
    width: 100%;
    box-sizing: border-box;
    margin-top: 10px;
    text-transform: uppercase;
}

.bodyGDOC .gdoc-confirm-actions {
    padding: 0 18px 18px;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

.bodyGDOC .gdoc-confirm-actions button {
    border-radius: 7px;
    padding: 8px 20px;
    font-weight: 600;
    font-size: 13.5px;
    cursor: pointer;
    border: none;
}

.bodyGDOC .gdoc-confirm-cancel {
    background-color: #ffffff;
    border: 1.5px solid #dde5ee !important;
    color: #182430;
}

.bodyGDOC .gdoc-confirm-ok {
    background-color: #b1473f;
    color: #ffffff;
}

.bodyGDOC .gdoc-confirm-ok:disabled {
    opacity: .5;
    cursor: not-allowed;
}

.bodyGDOC .gdoc-apagar-disabled {
    opacity: .35;
    cursor: not-allowed;
}

/* botão "Trocar" ao lado do Escritório no cabeçalho (Empresa) */
.bodyGDOC .gdoc-btn-trocar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 3px 12px;
    margin-left: 8px;
    border-radius: 999px;
    border: 1px solid #b7d9f7;
    background-color: #eaf3fd;
    color: #0d5aa8;
    font-weight: 700;
    font-size: 11.5px;
    cursor: pointer;
    vertical-align: middle;
}

.bodyGDOC .gdoc-btn-trocar:hover {
    background-color: #d9ebfc;
}

/* badge do "Escritório: ..." no cabeçalho (Empresa), no mesmo formato de
   pill do botão Trocar ao lado, só em verde por ser uma informação (não
   uma ação clicável) */
.bodyGDOC .gdoc-badge-escritorio {
    display: inline-flex;
    align-items: center;
    padding: 4px 14px;
    border-radius: 999px;
    border: 1px solid #a8dfc0;
    background-color: #e6f7ec;
    color: #1a7a45;
    font-size: 12.5px;
    font-weight: 600;
}

.bodyGDOC .gdoc-badge-escritorio strong {
    font-weight: 700;
    margin-right: 4px;
}

/* modal "Trocar Escritório" — mesmo esqueleto visual do gdoc-confirm,
   mas com cabeçalho azul (não é uma ação destrutiva) e um combobox no
   lugar do input de texto */
.bodyGDOC .gdoc-trocar-backdrop {
    position: fixed;
    inset: 0;
    background-color: rgba(15, 25, 35, .45);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 2000;
}

.bodyGDOC .gdoc-trocar-backdrop.open {
    display: flex;
}

.bodyGDOC .gdoc-trocar-box {
    width: min(420px, 90vw);
    background-color: #ffffff;
    border-radius: 12px;
    box-shadow: 0 20px 45px -12px rgba(19, 38, 37, .35);
    overflow: hidden;
}

.bodyGDOC .gdoc-trocar-head {
    background-color: #1479e6;
    background-image: linear-gradient(100deg, #0f5cb3, #1479e6);
    color: #ffffff;
    padding: 14px 18px;
    font-weight: 700;
    font-size: 14.5px;
}

.bodyGDOC .gdoc-trocar-body {
    padding: 20px 18px;
    font-size: 14px;
    color: #182430;
}

.bodyGDOC .gdoc-trocar-body label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
}

.bodyGDOC .gdoc-trocar-actions {
    padding: 0 18px 18px;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

.bodyGDOC .gdoc-trocar-actions button {
    border-radius: 7px;
    padding: 8px 20px;
    font-weight: 600;
    font-size: 13.5px;
    cursor: pointer;
    border: none;
}

.bodyGDOC .gdoc-trocar-cancelar {
    background-color: #ffffff;
    border: 1.5px solid #dde5ee !important;
    color: #182430;
}

.bodyGDOC .gdoc-trocar-confirmar {
    background-color: #1479e6;
    color: #ffffff;
}

/* modal "Log de Arquivos Visualizados" (era window.open) — mais largo que
   os outros modais porque o conteúdo é uma tabela com várias colunas */
.bodyGDOC .gdoc-log-backdrop {
    position: fixed;
    inset: 0;
    background-color: rgba(15, 25, 35, .45);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    padding: 20px;
    box-sizing: border-box;
}

.bodyGDOC .gdoc-log-backdrop.open {
    display: flex;
}

.bodyGDOC .gdoc-log-box {
    width: min(1100px, 95vw);
    max-height: 90vh;
    background-color: #ffffff;
    border-radius: 12px;
    box-shadow: 0 20px 45px -12px rgba(19, 38, 37, .35);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.bodyGDOC .gdoc-log-head {
    background-color: #1479e6;
    background-image: linear-gradient(100deg, #0f5cb3, #1479e6);
    color: #ffffff;
    padding: 14px 20px;
    font-weight: 700;
    font-size: 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex: none;
}

.bodyGDOC .gdoc-log-close {
    background: none;
    border: none;
    color: #ffffff;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    padding: 0;
}

.bodyGDOC .gdoc-log-body {
    padding: 20px;
    overflow-y: auto;
}

.bodyGDOC .gdoc-log-carregando {
    text-align: center;
    color: #7c908d;
    padding: 30px 0;
}

.bodyGDOC .gdoc-log-info {
    margin-bottom: 14px;
    font-size: 13.5px;
    color: #182430;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.bodyGDOC .gdoc-log-info strong {
    margin-right: 4px;
}

.bodyGDOC .gdoc-log-actions {
    margin-bottom: 14px;
}

.bodyGDOC .gdoc-log-table-wrap {
    overflow-x: auto;
}

/* botão "Imprimir" do modal de Log: window.print() imprime a página
   inteira por padrão (inclusive o que está atrás do modal) — esconde
   tudo, exceto o conteúdo do próprio modal, na hora de imprimir. Também
   solta o max-height/overflow/position:fixed do modal (que existem só
   pra caber na tela), senão a tabela fica cortada em vez de continuar
   nas próximas páginas impressas. */
/* pede pro navegador iniciar a impressão em paisagem — só afeta o GDoc,
   já que esse CSS não é carregado em nenhum outro módulo do site (e o
   único window.print() daqui é o do modal de Log, com uma tabela larga
   que cabe melhor deitada) */
@page {
    size: landscape;
}

@media print {
    /* só entra em vigor quando o modal de Log está de fato aberto — sem o
       ":has()" aqui, essa regra bateria em QUALQUER página do GDoc que não
       tenha ".gdoc-log-backdrop" (ele só existe depois de aberto uma vez) e
       escondia a página inteira, deixando a folha em branco */
    body.bodyGDOC:has(.gdoc-log-backdrop.open) > *:not(.gdoc-log-backdrop) {
        display: none !important;
    }

    .bodyGDOC .gdoc-log-backdrop {
        position: static !important;
        display: block !important;
        background: none !important;
        padding: 0 !important;
    }

    .bodyGDOC .gdoc-log-box {
        width: 100% !important;
        max-height: none !important;
        box-shadow: none !important;
        border-radius: 0 !important;
    }

    .bodyGDOC .gdoc-log-head,
    .bodyGDOC .gdoc-log-actions {
        display: none !important;
    }

    .bodyGDOC .gdoc-log-body {
        overflow: visible !important;
        padding: 0 !important;
    }

    /* limpeza geral pra qualquer impressão dentro do GDoc (menu lateral,
       navbar e o botão flutuante de recolher/expandir não fazem sentido
       no papel) — junto com ".gdoc-print-hide", uma classe de uso pontual
       pra esconder controles específicos de uma tela (ex: o próprio botão
       "Imprimir" e os filtros do /PainelLog) só na hora de imprimir */
    .bodyGDOC .gdoc-sidebar,
    .bodyGDOC .gdoc-sidebar-backdrop,
    .bodyGDOC .gdoc-sidebar-collapse-btn,
    .bodyGDOC .navbar-fixed-top,
    .bodyGDOC .navbar-fixed-bottom,
    .bodyGDOC .gdoc-trocar-backdrop,
    .bodyGDOC .gdoc-print-hide {
        display: none !important;
    }

    /* bootstrap.css tem uma regra de impressão padrão que escreve o "href"
       de todo link logo depois dele (convenção de "num papel não dá pra
       clicar, então mostra a URL") — isso inclui os cabeçalhos da tabela
       (que são links de ordenação), deixando o cabeçalho impresso cheio de
       "?sort=...&sortdir=..." em vez do texto limpo que aparece em tela */
    .bodyGDOC a[href]::after {
        content: none !important;
    }

    .bodyGDOC:has(.gdoc-sidebar) {
        padding: 0 !important;
    }
}