/*
 * Biblioteca Virtual — ajustes responsivos.
 *
 * Carregado por último em layouts/_resources.gsp, depois do Metronic: aqui ficam só as regras que fazem
 * o cabeçalho, a faixa de busca, os atalhos de serviço, a barra de título e as tabelas caberem de 375px a 1366px.
 * As cores são as que o sistema já usa (verde-oliva AMMG, azul dos links, cinzas do Metronic).
 *
 * Faixas: >= 1280 computador largo | 992–1279 notebook (menu lateral aberto) | 768–991 tablet | <= 767 celular.
 */

:root {
    --bv-oliva: #6e990a;
    --bv-oliva-escuro: #5a7d08;
    --bv-tinta: #2c3e50;
    --bv-cinza: #7f8c8d;
    --bv-linha: #e9ecee;
    --bv-nevoa: #eaeff2;
    --bv-papel: #ffffff;
    --bv-foco: #347cd4;
    /* texto sobre branco ou #f1f3fa com contraste de pelo menos 4,5:1 (WCAG AA) */
    --bv-texto: #3d4a4c;
    --bv-texto-suave: #56666b;
    --bv-oliva-texto: #4f7008;
    --bv-link: #2566b5;
    --bv-fundo-pagina: #f1f3fa;
    --bv-borda-cartao: #dfe4e8;
    --bv-rodape-cartao: #f7f9fa;
}

/* ================================================================== CABEÇALHO (todas as telas com menu) */

/* Logo da Biblioteca na proporção original (antes era esticado para 195x68) */
.page-header.navbar .page-logo .bv-logo {
    width: 195px;
    height: auto;
    margin: 6px 0 0 -18px;
}

.page-header.navbar .top-menu .navbar-nav.bv-topo {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: nowrap;
    height: 68px;
}

.page-header.navbar .top-menu .navbar-nav.bv-topo > li.dropdown {
    display: flex;
    align-items: center;
    float: none;
    height: 68px;
    margin: 0;
    padding: 0;
    min-width: 0;
}

/* o tema dava 25px de margem esquerda a toda imagem do topo */
.page-header.navbar .page-top .bv-topo img {
    margin: 0;
}

.page-header.navbar .top-menu .navbar-nav.bv-topo > li.dropdown > .dropdown-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    white-space: nowrap;
    min-width: 0;
}

.page-header.navbar .top-menu .navbar-nav.bv-topo > li.dropdown > .dropdown-toggle:focus-visible {
    outline: 2px solid var(--bv-foco);
    outline-offset: -2px;
}

/* Créditos: saldo em cima, prazo embaixo */
.bv-topo .bv-creditos__icone {
    width: 28px;
    height: 28px;
    flex: none;
}

.bv-topo .bv-creditos__texto {
    display: flex;
    flex-direction: column;
    line-height: 1.3;
    text-align: left;
}

.bv-topo .bv-creditos__saldo {
    font-size: 14px;
    font-weight: 700;
    color: var(--bv-tinta);
}

.bv-topo .bv-creditos__prazo {
    font-size: 11px;
    font-weight: 400;
    color: var(--bv-texto-suave);
}

/* "Sair" vinha em #95a5a6 (2,6:1 sobre branco) */
.page-header.navbar .top-menu .navbar-nav.bv-topo > li.bv-sair > .dropdown-toggle,
.page-header.navbar .top-menu .navbar-nav.bv-topo > li.bv-sair > .dropdown-toggle:last-child {
    color: var(--bv-texto-suave);
}

/* Usuário: foto sempre visível, nome corta com reticências */
.bv-topo .bv-usuario .avatar {
    width: 35px;
    height: 35px;
    margin: 0;
    object-fit: cover;
    flex: none;
}

.page-header.navbar .top-menu .navbar-nav.bv-topo > li.bv-usuario > .dropdown-toggle > .username {
    display: block;
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 700;
    color: var(--bv-tinta);
}

.page-header.navbar .top-menu .navbar-nav.bv-topo > li.bv-usuario > .dropdown-toggle > i {
    margin: 0;
}

.bv-topo .bv-sair__icone {
    width: 19px;
    height: 19px;
    flex: none;
}

@media (max-width: 1279px) {
    .page-header.navbar .top-menu .navbar-nav.bv-topo > li.dropdown > .dropdown-toggle {
        padding-left: 10px;
        padding-right: 10px;
    }

    .page-header.navbar .top-menu .navbar-nav.bv-topo > li.bv-usuario > .dropdown-toggle > .username {
        max-width: 130px;
    }
}

/* Tablet e celular: logo + botão do menu na 1ª linha, créditos/usuário/sair na 2ª. O cabeçalho deixa de ser fixo
   (regra do Metronic abaixo de 992px) e passa a ter a altura do que contém, então não cobre mais o conteúdo. */
@media (max-width: 991px) {
    .page-header.navbar {
        height: auto;
        min-height: 0;
        background: var(--bv-papel);
    }

    .page-header.navbar .page-logo {
        background: transparent;
        border-bottom: 0;
    }

    .page-header.navbar .menu-toggler.responsive-toggler {
        width: 44px;
        height: 44px;
        margin: 12px 8px 0 0;
        background-image: url(../metronic/assets/admin/layout2/img/sidebar-toggler-inverse.png);
        opacity: 0.8;
    }

    .page-header.navbar .page-top {
        display: block;
        clear: both;
        height: auto;
        border-top: 1px solid var(--bv-linha);
    }

    .page-header.navbar .top-menu {
        float: none;
    }

    /* altura mínima, não fixa: no celular o prazo dos créditos quebra em duas linhas e passava 3px da faixa */
    .page-header.navbar .top-menu .navbar-nav.bv-topo {
        float: none;
        height: auto;
        min-height: 56px;
        margin: 0;
        padding: 0 8px;
    }

    .page-header.navbar .top-menu .navbar-nav.bv-topo > li.dropdown {
        height: auto;
        min-height: 56px;
    }

    .page-header.navbar .top-menu .navbar-nav.bv-topo > li.dropdown > .dropdown-toggle {
        padding: 8px;
    }

    /* créditos à esquerda, o resto à direita. O tema dá 40px à direita (com !important) a .dropdown-quick-sidebar-toggler:
       aqui é espaço perdido, e em 320px empurrava o "Sair" para fora da tela */
    .bv-topo > li.bv-creditos {
        margin-right: auto !important;
        padding: 0 !important;
    }
}

/* "Resumo do Sistema" (administradores): abaixo de 1100px o texto dá lugar a um ícone de gráfico.
   (entre 992 e 1015px, com o texto, o cabeçalho fixo do administrador não cabia ao lado do logo e descia por cima da busca)
   O texto só sai da tela (não usa display:none) para o link continuar com nome para leitores de tela. */
@media (max-width: 1099px) {
    .page-header.navbar .top-menu .navbar-nav.bv-topo > li.dropdown-user:not(.bv-creditos):not(.bv-usuario):not(.bv-sair) > .dropdown-toggle > .username {
        display: block !important;
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }

    .bv-topo > li.dropdown-user:not(.bv-creditos):not(.bv-usuario):not(.bv-sair) > .dropdown-toggle::before {
        content: "\f080";
        font-family: FontAwesome;
        font-size: 18px;
        color: var(--bv-cinza);
    }
}

@media (max-width: 580px) {
    /* no celular fica só a foto (o Metronic já escondia o nome; a regra acima o trazia de volta) */
    .page-header.navbar .top-menu .navbar-nav.bv-topo > li.bv-usuario > .dropdown-toggle > .username-hide-on-mobile {
        display: none;
    }
}

@media (max-width: 479px) {
    .bv-topo .bv-creditos__icone {
        width: 24px;
        height: 24px;
    }

    .bv-topo .bv-creditos__prazo {
        white-space: normal;
        max-width: 150px;
    }

    .page-header.navbar .top-menu .navbar-nav.bv-topo > li.dropdown > .dropdown-toggle {
        padding: 8px 6px;
    }

    .bv-topo .bv-usuario .avatar {
        width: 32px;
        height: 32px;
    }

    /* sem a setinha dos menus: a foto e o gráfico já indicam que abrem opções */
    .page-header.navbar .top-menu .navbar-nav.bv-topo > li.dropdown > .dropdown-toggle > .fa-angle-down {
        display: none;
    }
}

/* ================================================================== FAIXA DE BUSCA */

.page-content-biblioteca-virtual .bg-biblioteca-cabecalho {
    padding: 20px 24px;
}

.bv-busca {
    display: grid;
    grid-template-columns: minmax(320px, 1fr) minmax(160px, 240px) auto auto;
    grid-template-areas: "termo revista buscar avancada";
    gap: 12px 16px;
    align-items: center;
}

.bv-busca__termo { grid-area: termo; min-width: 0; }
.bv-busca__revista { grid-area: revista; min-width: 0; }
.bv-busca__buscar { grid-area: buscar; }
.bv-busca__avancada { grid-area: avancada; }

/* o typeahead embrulha o campo num <span> inline: precisa ocupar a coluna toda */
.bv-busca__termo .twitter-typeahead {
    display: block !important;
    width: 100%;
}

.bv-busca__termo .form-control {
    height: 45px;
    background-color: var(--bv-papel);
}

.bv-busca .bv-busca__revista .select2-container.select-eteg {
    width: 100% !important;
}

.bv-busca .bv-busca__revista .select-eteg .select2-choice {
    background: var(--bv-papel) !important;
}

.bv-busca .bv-busca__buscar {
    height: 45px;
    padding: 0 28px;
    border: 0;
    border-radius: 3px !important;
    background: var(--bv-oliva-escuro); /* branco sobre #6e990a dava 3,4:1; sobre #5a7d08, 4,8:1 */
    color: #fff;
    font-size: 15px;
    font-weight: 600;
}

.bv-busca .bv-busca__buscar:hover {
    background: var(--bv-oliva-texto);
}

.bv-busca .bv-busca__buscar:focus-visible,
.bv-busca .bv-busca__avancada:focus-visible {
    outline: 2px solid var(--bv-foco);
    outline-offset: 2px;
}

.bv-busca .bv-busca__avancada {
    white-space: nowrap;
    text-decoration: none;
}

@media (max-width: 991px) {
    .page-content-biblioteca-virtual .bg-biblioteca-cabecalho {
        padding: 16px;
    }

    .bv-busca {
        grid-template-columns: minmax(0, 1fr) auto auto;
        grid-template-areas:
            "termo termo termo"
            "revista buscar avancada";
    }
}

@media (max-width: 479px) {
    .bv-busca {
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas:
            "termo termo"
            "revista buscar"
            "avancada avancada";
        gap: 10px;
    }

    .bv-busca .bv-busca__buscar {
        padding: 0 20px;
    }

    .bv-busca .bv-busca__avancada {
        justify-self: start;
        padding: 2px 0;
    }
}

/* ================================================================== ATALHOS DE SERVIÇO (revisão, artigos, alerta) */

.page-content-biblioteca-virtual .service-bar.bv-servicos {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 300px);
    align-items: center;
    gap: 16px;
    height: auto;
    min-height: 115px;
    padding: 20px 32px !important;
}

.bv-servicos .bv-servico {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 8px;
    border-radius: 6px;
    text-decoration: none;
}

.bv-servicos .bv-servico:hover .cabecalho-biblioteca-txt {
    color: var(--bv-oliva);
}

.bv-servicos .bv-servico:focus-visible {
    outline: 2px solid var(--bv-foco);
    outline-offset: 2px;
}

.bv-servicos .bv-servico__icone {
    flex: none;
    max-height: 32px;
}

.bv-servicos .cabecalho-biblioteca-txt {
    text-align: left;
    line-height: 1.35;
}

/* Abaixo de 992px sai a foto do teclado: o texto dos atalhos ficava por cima dela */
@media (max-width: 991px) {
    .page-content-biblioteca-virtual .service-bar.bv-servicos {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        background-image: none;
        padding: 16px !important;
        gap: 8px;
    }

    .bv-servicos .bv-servico {
        flex-direction: column;
        gap: 6px;
    }

    .bv-servicos .cabecalho-biblioteca-txt {
        text-align: center;
        font-size: 12px;
    }
}

/* Celular: três botões lado a lado, da mesma altura */
@media (max-width: 767px) {
    .page-content-biblioteca-virtual .service-bar.bv-servicos {
        align-items: stretch;
        padding: 12px !important;
    }

    .bv-servicos .bv-servico {
        min-height: 88px;
        padding: 10px 6px;
        border: 1px solid var(--bv-linha);
        justify-content: flex-start;
    }

    .bv-servicos .cabecalho-biblioteca-txt {
        font-size: 11px;
        letter-spacing: 0.2px;
    }
}

/* ================================================================== BARRA DE TÍTULO DAS TELAS */

/* Abaixo de 992px a barra deixa de ser absoluta (85px fixos, que cortavam títulos de duas linhas) e passa a ter a
   altura do que contém: título à esquerda (até 2 linhas) e, quando a tela tem, a ação à direita ("Cadastrar novo
   alerta"). A trilha "Início › Biblioteca › …" vem numa linha própria logo abaixo, como nas telas que já usam a faixa
   de trilha (compra, relatórios, congressos). Ela nunca quebra: o que não cabe termina em "…" (NN/G, "Breadcrumbs"). */
@media (max-width: 991px) {
    /* o .page-content tem 20px de recuo e a .row em volta, -15px: margens para a barra ir de borda a borda */
    .title-wrapper-biblioteca,
    .title-wrapper-cientifico {
        position: static;
        margin: -20px -5px 0;
        flex-wrap: wrap;
        gap: 4px 12px;
        height: auto;
        min-height: 60px;
        padding: 14px 16px 12px;
        font-size: 16px;
    }

    .title-wrapper-biblioteca > [class*="col-"],
    .title-wrapper-cientifico > [class*="col-"] {
        float: none;
        width: auto;
        padding: 0;
    }

    .title-wrapper-biblioteca > [class*="col-"]:first-child,
    .title-wrapper-cientifico > [class*="col-"]:first-child {
        flex: 1 1 0;
        min-width: 0;
        white-space: normal;
        line-height: 1.25;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    /* ação do título (botão): à direita, na mesma linha */
    .title-wrapper-biblioteca > :not(:first-child):not(:has(.page-breadcrumb)),
    .title-wrapper-cientifico > :not(:first-child):not(:has(.page-breadcrumb)) {
        flex: 0 1 auto;
        min-width: 0;
        max-width: 55%;
    }

    .title-wrapper-biblioteca .page-toolbar,
    .title-wrapper-cientifico .page-toolbar {
        margin-top: 0 !important;
    }

    /* quando o título é texto solto ("Suas solicitações"), o primeiro elemento já é a ação: fica à direita */
    .title-wrapper-biblioteca > :has(.btn):not(:has(.page-breadcrumb)),
    .title-wrapper-cientifico > :has(.btn):not(:has(.page-breadcrumb)) {
        display: block;
        flex: 0 1 auto;
        max-width: 55%;
        margin-left: auto;
        overflow: visible;
        -webkit-line-clamp: none;
    }

    /* trilha: linha inteira, embaixo do título */
    .title-wrapper-biblioteca > [class*="col-"]:has(.page-breadcrumb),
    .title-wrapper-cientifico > [class*="col-"]:has(.page-breadcrumb) {
        flex: 1 1 100%;
        max-width: 100%;
        min-width: 0;
        text-align: left;
    }

    /* a classe .inline-block do tema (3 classes) mantinha a faixa com a largura do texto, e a trilha saía da tela */
    .title-wrapper-biblioteca .page-bar,
    .title-wrapper-cientifico .page-bar {
        display: block !important;
        width: 100%;
        min-width: 0;
    }

    .title-wrapper-biblioteca .page-breadcrumb,
    .title-wrapper-cientifico .page-breadcrumb,
    .page-solicitacao > .portlet-title .page-breadcrumb {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        float: none;
        width: 100%;
        max-width: 100%;
        margin: 0 !important;
        padding: 0;
        font-size: 13px;
        font-weight: 400;
        line-height: 1.5;
        text-transform: none;
        white-space: nowrap;
    }

    .title-wrapper-biblioteca .page-breadcrumb > li,
    .title-wrapper-cientifico .page-breadcrumb > li,
    .page-solicitacao > .portlet-title .page-breadcrumb > li {
        display: flex;
        align-items: center;
        gap: 6px;
        flex: 0 1 auto;
        min-width: 0;
        margin-right: 6px;
        padding: 4px 0;
        color: var(--bv-texto-suave);
    }

    .title-wrapper-biblioteca .page-breadcrumb > li:first-child,
    .title-wrapper-cientifico .page-breadcrumb > li:first-child,
    .page-solicitacao > .portlet-title .page-breadcrumb > li:first-child {
        flex-shrink: 0;
    }

    /* o nível atual (último) é o que mais importa: os do meio encolhem primeiro, até "…" */
    .title-wrapper-biblioteca .page-breadcrumb > li:not(:first-child):not(:last-child),
    .title-wrapper-cientifico .page-breadcrumb > li:not(:first-child):not(:last-child) {
        flex-shrink: 20;
        min-width: 3em;
    }

    .title-wrapper-biblioteca .page-breadcrumb > li > a,
    .title-wrapper-biblioteca .page-breadcrumb > li > span,
    .title-wrapper-cientifico .page-breadcrumb > li > a,
    .title-wrapper-cientifico .page-breadcrumb > li > span,
    .page-solicitacao > .portlet-title .page-breadcrumb > li > a,
    .page-solicitacao > .portlet-title .page-breadcrumb > li > span {
        overflow: hidden;
        min-width: 0;
        color: var(--bv-texto-suave);
        text-overflow: ellipsis;
    }

    .title-wrapper-biblioteca .page-breadcrumb > li > i,
    .title-wrapper-cientifico .page-breadcrumb > li > i,
    .page-solicitacao > .portlet-title .page-breadcrumb > li > i {
        flex: none;
        color: #aab3b8;
    }

    /* título vazio que o layout deixa acima da barra (18px de cinza sobrando) */
    .page-content > h3.page-title.bv-titulo-vazio {
        display: none;
    }

    /* o bloco logo abaixo reservava 50–70px para a barra absoluta */
    .title-wrapper-biblioteca ~ :is(.margin-top-25, .margin-top-40, .margin-top-50, .margin-top-60, .margin-top-70, .margin-top-100),
    .title-wrapper-cientifico ~ :is(.margin-top-25, .margin-top-40, .margin-top-50, .margin-top-60, .margin-top-70, .margin-top-100) {
        margin-top: 16px !important;
    }

    /* Detalhe da solicitação: o título e a trilha ficam no cabeçalho do quadro; a trilha também desce para a linha
       de baixo, à esquerda, em vez de flutuar à direita espremida */
    .page-solicitacao > .portlet-title > [class*="col-"] {
        float: none;
        width: auto;
        padding: 0;
    }

    .page-solicitacao > .portlet-title > .col-md-6.text-right {
        clear: both;
        text-align: left;
    }

    .page-solicitacao > .portlet-title .page-bar {
        float: none !important;
        margin: 0 0 8px;
        padding: 0;
        background: none;
    }
}

/* no celular o recuo lateral do .page-content é de 10px */
@media (max-width: 767px) {
    .title-wrapper-biblioteca,
    .title-wrapper-cientifico {
        margin-left: 5px;
        margin-right: 5px;
    }
}

/* ================================================================== TABELAS NO CELULAR */

/* Tabelas "flip-content" e DataTables: no celular (até 767px) cada linha vira um cartão com "rótulo  valor"; os rótulos
   vêm do <thead> (js/tabelasResponsivas.js). A partir de 768px a tabela é a do computador — em 768 o Metronic ainda a
   deitava (flip-scroll); isso é desfeito mais abaixo, com rolagem lateral dentro do quadro quando ela não cabe. */
@media (max-width: 767px) {
    .flip-scroll table.bv-cartoes,
    table.bv-cartoes {
        display: block;
        border: 0 !important;
    }

    /* sem colunas ordenáveis o cabeçalho só some da tela (leitores de tela ainda o leem) */
    table.bv-cartoes thead {
        position: absolute !important;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        float: none;
    }

    /* com colunas ordenáveis (e dois itens ou mais) ele vira a barra "Ordenar por", acima dos cartões */
    .flip-scroll table.bv-cartoes.bv-com-ordenacao thead,
    table.bv-cartoes.bv-com-ordenacao thead {
        position: static !important;
        display: block;
        width: auto;
        height: auto;
        overflow: visible;
        clip: auto;
    }

    .flip-scroll table.bv-cartoes.bv-com-ordenacao thead tr,
    table.bv-cartoes.bv-com-ordenacao thead tr {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 6px;
        margin: 0 0 12px;
        padding: 0;
        border: 0;
        background: none;
    }

    table.bv-cartoes.bv-com-ordenacao thead tr::before {
        content: "Ordenar por";
        margin-right: 4px;
        color: var(--bv-texto-suave);
        font-size: 12px;
        font-weight: 600;
    }

    .flip-scroll table.bv-cartoes.bv-com-ordenacao thead th,
    table.bv-cartoes.bv-com-ordenacao thead th {
        display: none;
    }

    .flip-scroll table.bv-cartoes.bv-com-ordenacao thead th.bv-ordenavel,
    table.bv-cartoes.bv-com-ordenacao thead th.bv-ordenavel {
        display: block;
        width: auto !important;
        height: auto;
        padding: 0 !important;
        border: 0 !important;
        background-color: transparent;
    }

    /* DataTables: o próprio título é o botão de ordenar (com a setinha do plugin à direita) */
    table.bv-cartoes.bv-com-ordenacao.dataTable thead th.bv-ordenavel {
        padding: 7px 28px 7px 12px !important;
        border: 1px solid var(--bv-borda-cartao) !important;
        border-radius: 16px !important;
        background-color: var(--bv-papel);
        background-position: right 8px center;
        font-size: 12px;
        font-weight: 600;
        cursor: pointer;
    }

    /* o texto do botão mantém a cor que o título da coluna já tinha em cada tabela */
    table.bv-cartoes.bv-com-ordenacao thead th.bv-ordenavel a {
        display: inline-block;
        padding: 7px 12px;
        border: 1px solid var(--bv-borda-cartao);
        border-radius: 16px !important;
        background: var(--bv-papel);
        font-size: 12px;
        font-weight: 600;
        text-decoration: none;
    }

    /* coluna pela qual a lista está ordenada: borda na cor do texto e a seta do sentido */
    table.bv-cartoes.bv-com-ordenacao thead th.bv-ordenavel.sorted a,
    table.bv-cartoes.bv-com-ordenacao.dataTable thead th.bv-ordenavel.sorting_asc,
    table.bv-cartoes.bv-com-ordenacao.dataTable thead th.bv-ordenavel.sorting_desc {
        border-color: currentColor !important;
    }

    table.bv-cartoes.bv-com-ordenacao thead th.bv-ordenavel.sorted.asc a::after {
        content: "\2191";
        margin-left: 4px;
    }

    table.bv-cartoes.bv-com-ordenacao thead th.bv-ordenavel.sorted.desc a::after {
        content: "\2193";
        margin-left: 4px;
    }

    .flip-scroll table.bv-cartoes > tbody,
    table.bv-cartoes > tbody {
        display: block;
        white-space: normal;
        overflow: visible;
    }

    /* Cada linha é um cartão branco. Só os filhos diretos: tabelas aninhadas dentro de uma célula (ex.: a lista de
       artigos da solicitação) ficam como estão, sem virar caixinhas estreitas. O zebrado do Bootstrap sai: com
       cartões, o cinza alternado só tirava contraste do texto. */
    .flip-scroll table.bv-cartoes > tbody > tr,
    table.bv-cartoes > tbody > tr,
    .table-striped.bv-cartoes > tbody > tr:nth-of-type(odd) {
        display: flex;
        flex-direction: column;
        position: relative;
        margin: 0 0 10px;
        padding: 8px 14px;
        border: 1px solid var(--bv-borda-cartao);
        border-radius: 8px;
        background: var(--bv-papel);
        box-shadow: 0 1px 2px rgba(44, 62, 80, 0.06);
        vertical-align: baseline;
    }

    .flip-scroll table.bv-cartoes > tbody > tr > td,
    table.bv-cartoes > tbody > tr > td {
        display: block;
        position: relative;
        width: auto !important;
        height: auto;
        padding: 6px 0 !important;
        border: 0 !important;
        background: transparent !important;
        color: var(--bv-texto);
        text-align: left !important;
        white-space: normal;
        overflow-wrap: anywhere;
    }

    /* rótulo à esquerda, valor à direita (o valor vem embrulhado em .bv-valor pelo script) */
    .flip-scroll table.bv-cartoes > tbody > tr > td[data-label],
    table.bv-cartoes > tbody > tr > td[data-label] {
        display: flex;
        gap: 12px;
    }

    table.bv-cartoes > tbody > tr > td[data-label]::before {
        content: attr(data-label);
        flex: 0 0 35%;
        color: var(--bv-texto-suave);
        font-size: 12px;
        font-weight: 600;
        line-height: 1.6;
    }

    table.bv-cartoes > tbody > tr > td[data-label] > .bv-valor {
        display: block;
        flex: 1 1 auto;
        min-width: 0;
    }

    /* Pé do cartão com as ações: botões do tamanho de um dedo, com ícone e nome ("Visualizar", "Editar", "Excluir"...),
       dividindo a largura, no mesmo estilo dos botões brancos do sistema. (A V6 trocou "Visualizar"/"Editar" por um "›"
       e deixou só "Excluir" pequeno; no uso, os botões com nome se leram melhor e voltaram.) */
    .flip-scroll table.bv-cartoes > tbody > tr > td.bv-celula-acoes,
    table.bv-cartoes > tbody > tr > td.bv-celula-acoes {
        display: flex;
        flex-wrap: wrap;
        order: 99;
        gap: 8px;
        margin: 8px -14px -8px;
        padding: 10px 14px !important;
        border-top: 1px solid var(--bv-linha) !important;
        border-radius: 0 0 8px 8px;
        background: var(--bv-rodape-cartao) !important;
    }

    table.bv-cartoes > tbody > tr > td.bv-celula-acoes::before {
        content: none;
    }

    .flip-scroll table.bv-cartoes > tbody > tr > td.bv-celula-acoes.bv-acoes-vazia,
    table.bv-cartoes > tbody > tr > td.bv-celula-acoes.bv-acoes-vazia {
        display: none !important;
    }

    /* o <div class="clearfix"> em volta dos links não gera caixa: os links viram os itens da barra (e as
       pseudo-caixas do clearfix, que sobravam como uma linha vazia de 16px no pé do cartão, saem) */
    table.bv-cartoes > tbody > tr > td.bv-celula-acoes .clearfix {
        display: contents;
    }

    table.bv-cartoes > tbody > tr > td.bv-celula-acoes .clearfix::before,
    table.bv-cartoes > tbody > tr > td.bv-celula-acoes .clearfix::after {
        content: none;
    }

    table.bv-cartoes > tbody > tr > td.bv-celula-acoes a,
    table.bv-cartoes > tbody > tr > td.bv-celula-acoes button {
        display: inline-flex;
        flex: 1 1 0;
        align-items: center;
        justify-content: center;
        gap: 6px;
        width: auto !important;
        min-width: 0;
        height: auto !important;
        min-height: 38px;
        margin: 0 !important;
        padding: 6px 10px !important;
        border: 1px solid var(--bv-borda-cartao) !important;
        border-radius: 4px !important;
        background: var(--bv-papel);
        font-size: 13px;
        line-height: 1.2;
        text-decoration: none;
    }

    table.bv-cartoes > tbody > tr > td.bv-celula-acoes a:hover,
    table.bv-cartoes > tbody > tr > td.bv-celula-acoes button:hover {
        border-color: currentColor !important;
    }

    table.bv-cartoes > tbody > tr > td.bv-celula-acoes a:focus-visible,
    table.bv-cartoes > tbody > tr > td.bv-celula-acoes button:focus-visible {
        outline: 2px solid var(--bv-foco);
        outline-offset: 1px;
    }

    table.bv-cartoes .bv-acao-rotulo {
        display: inline;
        color: var(--bv-texto);
        font-weight: 600;
    }

    /* célula sem conteúdo (ou só "-"): a linha do cartão some */
    .flip-scroll table.bv-cartoes > tbody > tr > td.bv-celula-vazia,
    table.bv-cartoes > tbody > tr > td.bv-celula-vazia {
        display: none !important;
    }

    /* a caixa de rolagem que o Metronic põe em volta da tabela (borda de 1px) sobra quando a tabela vira cartões:
       sem ela, "Ordenar por" e os cartões alinham com o resto do formulário */
    .table-scrollable:has(> table.bv-cartoes) {
        border: 0 !important;
        margin: 8px 0 !important;
        overflow: visible;
    }

    /* "Nenhum registro existente" e outras linhas de uma célula só: centralizadas, ocupando o cartão */
    table.bv-cartoes > tbody > tr > td[colspan],
    table.bv-cartoes > tbody > tr > td.dataTables_empty {
        flex: 1 1 100%;
        width: 100%;
        justify-content: center;
        text-align: center !important;
        color: var(--bv-texto-suave);
    }

    /* tabelas aninhadas (dentro de uma célula) ocupam a largura do cartão */
    table.bv-cartoes > tbody > tr > td table {
        width: 100% !important;
    }
}

/* Tabela com uma coluna de dados só (ex.: revistas da especialidade): em vez de um cartão alto com um botão largo
   embaixo, uma linha com o nome à esquerda e a ação à direita */
@media (max-width: 767px) {
    .flip-scroll table.bv-cartoes.bv-cartoes-simples > tbody > tr,
    table.bv-cartoes.bv-cartoes-simples > tbody > tr,
    .table-striped.bv-cartoes.bv-cartoes-simples > tbody > tr:nth-of-type(odd) {
        flex-direction: row;
        align-items: center;
        gap: 12px;
        margin-bottom: 8px;
        padding: 6px 8px 6px 14px;
    }

    table.bv-cartoes.bv-cartoes-simples > tbody > tr > td:not(.bv-celula-acoes) {
        flex: 1 1 auto;
        min-width: 0;
    }

    .flip-scroll table.bv-cartoes.bv-cartoes-simples > tbody > tr > td.bv-celula-acoes,
    table.bv-cartoes.bv-cartoes-simples > tbody > tr > td.bv-celula-acoes {
        flex: 0 0 auto;
        order: 99;
        margin: 0;
        padding: 0 !important;
        border: 0 !important;
        background: none !important;
    }

    table.bv-cartoes.bv-cartoes-simples > tbody > tr > td.bv-celula-acoes a,
    table.bv-cartoes.bv-cartoes-simples > tbody > tr > td.bv-celula-acoes button {
        flex: 0 0 auto;
        padding: 6px 12px !important;
    }
}

/* Celular deitado / tablet pequeno (600–767): dois cartões por linha (com um cartão só, ele ocupa a largura toda) */
@media (min-width: 600px) and (max-width: 767px) {
    .flip-scroll table.bv-cartoes > tbody,
    table.bv-cartoes > tbody {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        gap: 10px;
    }

    .flip-scroll table.bv-cartoes > tbody > tr,
    table.bv-cartoes > tbody > tr,
    .table-striped.bv-cartoes > tbody > tr:nth-of-type(odd) {
        margin: 0;
    }

    .flip-scroll table.bv-cartoes > tbody > tr > td.bv-celula-acoes,
    table.bv-cartoes > tbody > tr > td.bv-celula-acoes {
        margin-top: auto;
    }

    table.bv-cartoes > tbody > tr:has(> td[colspan]) {
        grid-column: 1 / -1;
    }
}

/* Tablet em pé (768): o Metronic deitava as tabelas "flip-scroll" até 768px inclusive (cabeçalho à esquerda, cada
   registro numa coluna). Aqui elas voltam a ser a tabela do computador; o quadro rola de lado se ela não couber. */
@media (min-width: 768px) and (max-width: 768px) {
    .flip-scroll {
        overflow-x: auto;
    }

    .flip-scroll .flip-content::after {
        content: none;
    }

    .flip-scroll table {
        display: table;
    }

    .flip-scroll thead {
        display: table-header-group;
        float: none;
    }

    .flip-scroll tbody {
        display: table-row-group;
        overflow: visible;
        white-space: normal;
    }

    .flip-scroll thead tr,
    .flip-scroll tbody tr {
        display: table-row;
        margin-left: 0;
    }

    .flip-scroll th,
    .flip-scroll td {
        display: table-cell;
        height: auto;
        border: 1px solid #ddd !important;
    }

    .flip-scroll th {
        text-align: left;
    }
}

/* tabela mais larga que o quadro (marcado por tabelasResponsivas.js): o quadro rola de lado em vez de o .page-content
   do tema cortar as últimas colunas (ex.: Atender e Usuários entre 992 e 1100px) */
@media (min-width: 768px) {
    .flip-scroll.bv-rola-lateral {
        overflow-x: auto;
    }
}

/* no tablet, tabela larga fora de um .flip-scroll (ex.: os 10 campos dos artigos da solicitação) rola dentro do
   próprio quadro, em vez de levar a página inteira para o lado */
@media (min-width: 768px) and (max-width: 991px) {
    .page-content :has(> table.bv-cartoes) {
        overflow-x: auto;
    }
}

/* fora do celular o nome escrito das ações não aparece (fica o ícone, como sempre foi) */
@media (min-width: 768px) {
    .bv-acao-rotulo {
        display: none;
    }

    /* fora do celular o embrulho não gera caixa: a célula fica exatamente como era */
    .bv-valor {
        display: contents;
    }
}

/* ================================================================== CONTRASTE E OCUPAÇÃO DA TELA (versão 3)

   Revisão de 25/09/2026, comparando antes × depois em 375 e 768px e medindo o contraste de todo texto visível
   (WCAG AA: 4,5:1 para texto comum). Abaixo de 992px: */

@media (max-width: 991px) {
    /* O cinza-esverdeado do body (#839595) aparecia abaixo do conteúdo nas telas curtas, em volta do cartão do
       congresso e embaixo da validação de download; o rodapé ficava ilegível sobre ele. Fundo claro de página. */
    body.page-container-bg-solid,
    body:has(> nav.navbar.navbar-fixed-top) {
        background-color: var(--bv-fundo-pagina);
    }

    /* rodapé: #e4e7e7 sobre fundo claro dava 1,1:1 (invisível) */
    .page-footer .page-footer-inner {
        color: var(--bv-texto-suave) !important;
    }

    .page-footer .page-footer-inner a {
        color: var(--bv-oliva-texto) !important;
    }

    /* trilha "Início > ..." em #888 (3,5:1) */
    .page-breadcrumb > li,
    .page-bar .page-breadcrumb > li > a,
    .page-bar .page-breadcrumb > li > span {
        color: var(--bv-texto-suave);
    }

    /* textos secundários da Biblioteca (#7f8c8d, 3,5:1): autores, referência, contagem de resultados, paginação */
    .page-content .tabela-biblioteca tbody td,
    .page-content .table-td-a a,
    .page-content .icheck-inline,
    .page-content [style*="color:#7f8c8d"],
    .page-content [style*="color: #7f8c8d"],
    .fundo-revista [style*="color:#7f8c8d"],
    .fundo-revista [style*="color: #7f8c8d"] {
        color: var(--bv-texto-suave) !important;
    }

    .pagination > a,
    .pagination > span,
    .pagination > .row:last-child font {
        color: var(--bv-texto-suave) !important;
    }

    .pagination > span.currentStep {
        color: var(--bv-link) !important;
        font-weight: 700;
    }

    /* links de título (#347cd4, 4,2:1) um tom mais escuro */
    .page-content .tabela-biblioteca tbody a,
    .page-content .tabela-biblioteca tbody strong,
    .page-content a[href^="/biblioteca/ver/"],
    .fundo-revista a[href^="/biblioteca/ver/"] {
        color: var(--bv-link);
    }
}

/* Relatórios: os dois calendários ficavam grudados à esquerda, com 220px, sobrando metade da tela */
@media (max-width: 767px) {
    /* o form-body desses filtros é display:table e encolhia no conteúdo */
    .page-content .form-body:has(> .form-group > .date-picker) {
        display: block !important;
        width: 100%;
    }

    .page-content .form-group:has(> .date-picker) {
        float: none !important;
        width: 100%;
        margin-right: 0 !important;
    }

    .page-content .date-picker .datepicker-inline {
        width: 100%;
        margin: 0;
        padding: 0;
    }

    .page-content .date-picker .datepicker-inline table {
        width: 100%;
    }

    /* dias com área de toque de 40px */
    .page-content .date-picker .datepicker-inline td,
    .page-content .date-picker .datepicker-inline th {
        height: 40px;
    }
}

/* Formulários com data + hora em colunas aninhadas (atividades do congresso): no celular os campos ficavam estreitos
   (110px e 75px) e recuados; agora data e hora dividem a linha, na largura do formulário */
@media (max-width: 767px) {
    .page-content .col-md-3:has(> .col-md-6 > input.date-picker) {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 0 12px;
        margin-bottom: 8px;
    }

    .page-content .col-md-3:has(> .col-md-6 > input.date-picker) > .col-md-6 {
        width: auto;
        padding: 0;
    }

    .page-content .col-md-3:has(> .col-md-6 > input.date-picker) .form-control {
        width: 100% !important;
    }
}

/* Detalhe da solicitação: a descrição tinha word-break: break-all e cortava palavras no meio ("Tachycardi-a");
   agora quebra entre palavras e só corta o que não cabe (DOI, identificadores longos) */
@media (max-width: 991px) {
    .page-content .pull-left-right[style*="break-all"] {
        word-break: normal !important;
        overflow-wrap: anywhere;
        float: none;
        clear: both;
        line-height: 1.55;
    }
}

/* Mensagens do atendimento: no celular o balão é estreito e o texto justificado abria buracos entre as palavras
   ("Ele      também      ficou"). Texto alinhado à esquerda e balão um pouco mais largo. */
@media (max-width: 767px) {
    .conversation .message {
        text-align: left;
        max-width: 92%;
    }

    .conversation .conversation-container {
        padding: 0 10px;
    }
}

/* Listas de checkbox dos formulários (idiomas e aspectos da pesquisa bibliográfica): colunas aninhadas somavam
   recuos de 15px e cada lista começava num ponto diferente; o campo "Outros" ficava estreito */
@media (max-width: 767px) {
    .page-content .form-group > [class*="col-"]:has(> .mt-checkbox-list),
    .page-content .mt-checkbox-list [class*="col-"] {
        float: none;
        width: auto;
        padding-left: 0;
        padding-right: 0;
    }

    .page-content .mt-checkbox-list .mt-checkbox {
        display: block;
        margin-bottom: 10px;
    }

    .page-content .mt-checkbox-list .form-inline .form-control,
    .page-content .mt-checkbox-list .mt-checkbox .form-control {
        display: block;
        width: 100%;
        margin-top: 6px;
    }
}

/* Formulários com ".row > .form-group > .row" (solicitar artigo): a segunda .row somava mais -15px e os campos
   ficavam 15px para fora do alinhamento dos títulos e das observações */
@media (max-width: 767px) {
    .page-content .row > .form-group > .row {
        margin-left: 0;
        margin-right: 0;
    }

    /* campo de busca com botão embaixo (ex.: revista na especialidade): o campo ocupa a mesma largura do botão */
    .page-content .form-inline > .select2-container {
        width: 100% !important;
    }
}

/* Meu perfil: as quatro abas eram títulos de 23px empilhados (213px de altura); no celular viram uma grade 2 × 2
   de botões, com a mesma cor de texto e a mesma marca vermelha na aba aberta */
@media (max-width: 767px) {
    .tabbable-custom.nav-justified > .nav-tabs.nav-justified {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
        margin-bottom: 12px;
        border: 0;
    }

    .tabbable-custom.nav-justified > .nav-tabs.nav-justified::before,
    .tabbable-custom.nav-justified > .nav-tabs.nav-justified::after {
        content: none;
    }

    .tabbable-custom.nav-justified > .nav-tabs.nav-justified > li {
        display: block;
        float: none;
        width: auto;
        margin: 0;
        border: 1px solid var(--bv-borda-cartao);
        border-radius: 4px !important;
    }

    /* a aba aberta mantém a marca vermelha do tema no topo */
    .tabbable-custom.nav-justified > .nav-tabs.nav-justified > li.active {
        border-top: 3px solid #F3565D;
    }

    .tabbable-custom.nav-justified > .nav-tabs.nav-justified > li > a {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%;
        min-height: 48px;
        margin: 0;
        padding: 8px 6px;
        border: 0 !important;
        text-align: center;
    }

    .tabbable-custom.nav-justified > .nav-tabs.nav-justified > li > a > h3 {
        font-size: 15px;
        line-height: 1.3;
    }
}

/* Caixas brancas no celular: 20px de recuo de cada lado deixavam os cartões estreitos ("Data abertura" quebrava em
   duas linhas). Recuo de 14px, e a caixa de dentro das abas do perfil perde a segunda moldura. */
@media (max-width: 767px) {
    .page-content .table-white {
        padding: 14px !important;
    }

    .tabbable-custom > .tab-content {
        padding: 12px 0 0;
        border: 0;
    }

    .tabbable-custom > .tab-content .portlet.table-white {
        padding: 0 !important;
        border: 0;
    }
}

/* Artigos de uma revista (página pública): os recuos saíram do HTML (eram inline) para cá. No computador continuam
   iguais; no celular três caixas de 20px deixavam os artigos com ~220px de largura. */
.fundo-revista .portlet.bv-caixa-externa {
    padding: 20px !important;
}

.fundo-revista .portlet.bv-caixa-interna {
    padding: 20px 20px 0 20px !important;
}

@media (max-width: 767px) {
    .fundo-revista .container.content-topo {
        padding-left: 8px;
        padding-right: 8px;
    }

    .fundo-revista .portlet.bv-caixa-externa {
        padding: 8px !important;
    }

    .fundo-revista .portlet.bv-caixa-interna {
        padding: 14px 14px 0 !important;
    }
}

/* Comprar créditos: no celular as duas colunas empilhavam invertidas ("R$ 15,00 ........ Total a pagar:").
   Agora rótulo à esquerda e valor à direita nas duas linhas. */
@media (max-width: 767px) {
    .page-content .row:has(> div > #quantidadeCreditos),
    .page-content .row:has(> div > #valorTotalSpan) {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
    }

    /* o clearfix do Bootstrap (::before/::after) viraria item do flex e empurraria as colunas */
    .page-content .row:has(> div > #quantidadeCreditos)::before,
    .page-content .row:has(> div > #quantidadeCreditos)::after,
    .page-content .row:has(> div > #valorTotalSpan)::before,
    .page-content .row:has(> div > #valorTotalSpan)::after {
        content: none;
    }

    .page-content .row:has(> div > #quantidadeCreditos) > div,
    .page-content .row:has(> div > #valorTotalSpan) > div {
        width: auto;
        float: none;
    }

    .page-content .row:has(> div > #quantidadeCreditos) label,
    .page-content .row:has(> div > #valorTotalSpan) label {
        margin: 0;
    }

    .page-content .row:has(> div > #quantidadeCreditos) > div:has(> label) {
        order: -1;
    }

    .page-content .row:has(> div > #quantidadeCreditos) #quantidadeCreditos,
    .page-content .row:has(> div > #valorTotalSpan) label.pull-right {
        float: none !important;
    }

    .page-content .row:has(> div > #quantidadeCreditos) #quantidadeCreditos {
        width: 96px !important;
        height: 36px;
    }

    .page-content .row:has(> div > #valorTotalSpan) #valorTotalSpan {
        font-weight: 700;
    }
}

/* Detalhe da solicitação no celular: os blocos Artigos / Anexos / Mensagens tinham 30px de recuo interno e, com a
   lista em cartões, a tabela ainda descia 40px abaixo do título (espaço pensado para o formulário do atendente) */
@media (max-width: 767px) {
    /* ficam direto na .row do layout (-15px): 15px de margem alinham com o resto da página */
    .page-artigos,
    .page-mensagens {
        width: auto;
        margin-left: 15px;
        margin-right: 15px;
        padding: 18px 14px 24px;
    }

    .page-artigos .row.grid-celular {
        margin-left: 0;
        margin-right: 0;
    }

    /* a tabelinha de dados do artigo, dentro do cartão, tinha mais 15px de recuo próprio */
    .page-artigos table.bv-cartoes > tbody > tr > td table {
        padding: 0 !important;
    }

    .page-artigos .headline-artigos {
        margin-bottom: 14px !important;
    }

    .page-artigos table.bv-cartoes {
        margin-top: 0;
    }

    .page-artigos form + .row table.bv-cartoes,
    .page-artigos .row + .row table.bv-cartoes {
        margin-top: 16px;
    }
}

/* Pequenos alinhamentos no celular e no tablet */
@media (max-width: 991px) {
    /* Atender: "Convênio" subia 15px (margem negativa inline) e o rótulo encostava no campo de cima */
    .page-content .form-group[class*="col-"][style*="margin-top: -15px"] {
        margin-top: 0 !important;
    }
}

@media (max-width: 767px) {
    /* Novo/editar artigo: o rótulo "Revista(s)" é uma coluna (col-md-7) e ganhava 15px de recuo a mais */
    .page-content .form-group > label.control-label[class*="col-"] {
        padding-left: 0;
    }

    /* Congresso público: as abas Atividades / Aula / Revistas dividem a linha em vez de a última quebrar sozinha */
    .tabbable-line > .nav-tabs:has(> #tab_15_1_li) {
        display: flex;
    }

    .tabbable-line > .nav-tabs:has(> #tab_15_1_li)::before,
    .tabbable-line > .nav-tabs:has(> #tab_15_1_li)::after {
        content: none;
    }

    .tabbable-line > .nav-tabs:has(> #tab_15_1_li) > li {
        flex: 1 1 0;
        float: none;
        padding: 0 !important;
        text-align: center;
    }

    .tabbable-line > .nav-tabs:has(> #tab_15_1_li) > li > a {
        margin: 0;
        padding: 10px 4px;
    }
}

/* Resultado da busca e revista: "Selecionar", "Ver resumo" e "Solicitar/Acessar" numa linha só, dividindo a largura
   (antes ficavam alinhados à direita e o último caía sozinho na linha de baixo; na V5, dois em cima e um embaixo,
   ~130px de botões por artigo) */
@media (max-width: 767px) {
    .col-md-5.text-right:has(> a.selecionar),
    .text-right:has(> a.selecionar) {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        text-align: center;
    }

    .text-right:has(> a.selecionar):has(> .btn:nth-of-type(4)) > .btn {
        flex-basis: 40% !important;
    }

    .col-md-5.text-right:has(> a.selecionar) > .btn,
    .text-right:has(> a.selecionar) > .btn {
        flex: 1 1 0;
        min-width: 0;
        margin: 0 !important;
        padding-left: 4px !important;
        padding-right: 4px !important;
        font-size: 13px;
        letter-spacing: 0;
    }
}

/* Artigo: botões de ação (Compartilhar, Solicitar, Editar, Excluir...) numa grade que ocupa a largura do cartão */
@media (max-width: 767px) {
    .portlet.table-white > .portlet-title > .actions:has(> .btn, > .btn-group) {
        float: none;
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        width: 100%;
        padding: 8px 0 12px;
    }

    .portlet.table-white > .portlet-title > .actions:has(> .btn, > .btn-group) > .btn,
    .portlet.table-white > .portlet-title > .actions:has(> .btn, > .btn-group) > .btn-group {
        flex: 1 1 40%;
        margin: 0 !important;
    }

    .portlet.table-white > .portlet-title > .actions:has(> .btn, > .btn-group) > .btn-group > .btn {
        width: 100%;
    }

    /* o botão de tela cheia continua só um ícone */
    .portlet.table-white > .portlet-title > .actions > .btn.btn-icon-only {
        flex: 0 0 44px;
    }

    /* recuo e espaçamento entre letras menores: "Compartilhar" e "Leia na íntegra" cabem lado a lado em 375px */
    .portlet.table-white > .portlet-title > .actions:has(> .btn, > .btn-group) .btn {
        padding-left: 6px !important;
        padding-right: 6px !important;
        letter-spacing: 0 !important;
    }

    /* "Carregar dados atualizados no Pubmed" (administrador) é longo: linha própria */
    .portlet.table-white > .portlet-title > .actions > .btn.green {
        flex-basis: 100%;
    }
}

/* Formulários: "Salvar/Confirmar" e "Cancelar" lado a lado, dividindo a largura (antes: centralizados e estreitos,
   ou um embaixo do outro). Vale também para os formulários do administrador (congresso, especialidade), cujo par
   ficava pequeno no meio. */
@media (max-width: 767px) {
    .page-content :has(> .btn-new-green):has(> .btn-new-grey),
    .page-content .form-actions :has(> .btn ~ .btn):not(:has(> .btn ~ .btn ~ .btn)) {
        display: flex;
        gap: 8px;
        margin-left: 0;
        text-align: left;
    }

    .page-content .form-actions :has(> .btn ~ .btn):not(:has(> .btn ~ .btn ~ .btn)) > .btn {
        flex: 1 1 0;
        margin: 0 !important;
    }

    .page-content :has(> .btn-new-green):has(> .btn-new-grey) > .btn-new-green,
    .page-content :has(> .btn-new-green):has(> .btn-new-grey) > .btn-new-grey {
        flex: 1 1 0;
        padding-left: 8px !important;
        padding-right: 8px !important;
        letter-spacing: 0; /* "Confirmar Compra" cabe numa linha */
    }

    /* "Voltar" / "Voltar para créditos" sozinhos à direita: botão de largura inteira */
    .page-content .text-right > .btn-group:only-child {
        display: block;
    }

    .page-content .text-right > .btn-group:only-child > .btn {
        width: 100%;
        float: none;
    }
}

/* Páginas públicas no celular: com o topo deixando de ser fixo, os recuos que abriam espaço para ele (98 e 100px)
   viravam um vão branco em cima da especialidade e da revista */
@media (max-width: 767px) {
    /* "body" na frente: especialidadePublico.css carrega depois e tem o mesmo peso */
    body .fundo {
        margin-top: 0;
    }

    .fundo-revista .container.content-topo,
    .container.bv-abaixo-do-topo {
        margin-top: 16px !important;
    }
}

/* "Ver todos" das especialidades: lista longa centralizada é ruim de percorrer (sem margem fixa para o olho descer).
   No celular: sem marcador, tudo à esquerda, a letra como título de cada grupo e mais área para tocar. */
@media (max-width: 767px) {
    body .agrupar-especialidade ul {
        list-style: none;
        margin-bottom: 16px;
        padding-left: 0;
        text-align: left;
    }

    body .agrupar-especialidade ul li {
        padding: 6px 0;
        text-align: left;
    }

    body .agrupar-especialidade h3.caption {
        text-align: left;
        margin: 18px 0 6px;
    }
}

/* ================================================================== V5: MENUS DO TOPO, MENSAGENS E CENTRALIZAÇÃO */

/* Menus do topo ("Resumo do Sistema" e o do usuário): no celular abriam a partir da borda esquerda do ícone e
   passavam da tela à direita. Agora abrem na largura da tela, logo abaixo da linha do topo. */
@media (max-width: 767px) {
    .page-header.navbar .top-menu .navbar-nav.bv-topo {
        position: relative;
    }

    .page-header.navbar .top-menu .navbar-nav.bv-topo > li.dropdown {
        position: static;
    }

    .page-header.navbar .top-menu .navbar-nav.bv-topo > li.dropdown > .dropdown-menu {
        left: 8px !important;
        right: 8px !important;
        top: 100%;
        width: auto;
        min-width: 0;
        max-width: none;
        margin-top: 0;
    }

    .page-header.navbar .top-menu .navbar-nav.bv-topo > li.dropdown > .dropdown-menu::before,
    .page-header.navbar .top-menu .navbar-nav.bv-topo > li.dropdown > .dropdown-menu::after {
        display: none !important;
    }

    .page-header.navbar .top-menu .navbar-nav.bv-topo > li.dropdown > .dropdown-menu > li > a {
        padding: 10px 16px;
    }
}

/* Mensagens da solicitação: "Enviar por e-mail" era puxado 60px para cima e cobria o título e o assunto; a conversa
   tinha 450px fixos (vazio grande com poucas mensagens); "Mensagem / Nota interna" ficava numa coluna estreita.
   Vale até 1199px: em 768 o botão ainda cobria a primeira mensagem, e de 992 a 1199px as Mensagens ficam na metade
   da tela (ao lado dos Anexos), onde o título, o motivo e "Enviar por e-mail" também se sobrepunham. */
@media (max-width: 1199px) {
    .chat-bar {
        height: auto;
        padding: 10px 14px;
    }

    .chat-bar .chat-bar-text {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 4px 12px;
        overflow: visible;
        white-space: normal;
    }

    .chat-bar .chat-bar-text > div {
        float: none;
        padding: 0;
    }

    .chat-bar .chat-bar-title {
        flex: 1 1 auto;
        width: auto;
        padding: 0 !important;
    }

    .chat-bar .chat-bar-description {
        flex: 1 1 100%;
        order: 2;
        width: auto !important;
        margin-top: 0 !important;
        padding: 0 !important;
        text-align: left;
    }

    /* o botão de e-mail fica na mesma linha do título, à direita */
    .chat-bar .chat-bar-description:has(> .btn) {
        flex: 0 0 auto;
        order: 1;
    }

    .conversation {
        height: auto;
    }

    .conversation .conversation-container {
        height: auto;
        min-height: 80px;
        max-height: 420px;
        padding-top: 10px;
        padding-bottom: 10px;
        overflow-y: auto;
    }

    .conversation .conversation-compose {
        flex-wrap: wrap;
        align-items: flex-end;
        gap: 8px;
        height: auto;
        padding: 10px;
    }

    .conversation .conversation-compose > [class*="col-"] {
        display: flex;
        flex: 1 1 100%;
        gap: 16px;
        padding: 0 !important;
    }

    .conversation .conversation-compose > [class*="col-"] label {
        margin: 0;
        font-weight: 400;
    }

    .conversation .conversation-compose {
        flex-wrap: wrap !important;
    }

    .conversation .conversation-compose .input-msg {
        flex: 1 1 0;
        width: auto;
        min-width: 0;
        height: 80px;
        margin: 0;
    }

    .conversation .conversation-compose .send {
        align-self: center;
        margin: 0;
        padding-bottom: 0;
    }
}

/* Alinhamento no celular, caso a caso (V6). Texto que se lê de cima para baixo fica à esquerda (quem lê no celular
   desce pela margem esquerda; centralizado com mais de 2–3 linhas é lido mais devagar). Centralizados ficam só as
   telas de mensagem única, os avisos de lista vazia, a contagem de resultados e a paginação. */
@media (max-width: 767px) {
    /* Detalhe da solicitação: avaliação, "Editar solicitação" e notificações à esquerda, empilhados */
    .bv-cabecalho-solicitacao > [class*="col-"],
    .bv-cabecalho-solicitacao [class*="col-"] {
        text-align: left !important;
    }

    .bv-cabecalho-solicitacao .rating-container,
    .bv-cabecalho-solicitacao .rating-container + .caption {
        display: inline-block;
    }

    .bv-cabecalho-solicitacao h3 {
        margin-bottom: 6px;
    }

    /* Status: rótulo numa linha, as opções embaixo como pílulas que quebram de linha (sem os "|" soltos) e com
       altura de toque; a atual continua em destaque */
    .bv-status-solicitacao .page-toolbar {
        float: none !important;
        margin-bottom: 12px;
    }

    .page-solicitacao .bv-status-solicitacao .texto-status {
        display: block;
        float: none;
        margin: 0 0 8px;
    }

    .bv-status-solicitacao #situacao {
        float: none !important;
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }

    .page-solicitacao .bv-status-solicitacao #situacao > .btn-status {
        display: inline-flex;
        align-items: center;
        float: none;
        min-height: 36px;
        margin: 0 !important;
        padding: 6px 14px;
        border: 1px solid var(--bv-borda-cartao);
        border-radius: 18px !important;
        color: var(--bv-texto-suave);
    }

    .page-solicitacao .bv-status-solicitacao #situacao > .btn-status.active {
        border-color: transparent;
        color: #fff !important;
    }

    /* Resultado da busca e revista: "Encontrados N artigos" à esquerda e "(0) Seleção" na mesma linha, à direita */
    .portlet-body > .row:has(> .col-md-6 > .btn-search-result) {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: 8px 12px;
    }

    .portlet-body > .row:has(> .col-md-6 > .btn-search-result)::before,
    .portlet-body > .row:has(> .col-md-6 > .btn-search-result)::after {
        content: none;
    }

    .portlet-body > .row:has(> .col-md-6 > .btn-search-result) > .col-md-6 {
        flex: 0 1 auto;
        width: auto;
        text-align: left !important;
    }

    .portlet-body > .row:has(> .col-md-6 > .btn-search-result) > .col-md-6:first-child {
        flex: 1 1 0;
        min-width: 0;
    }

    .portlet-body > .row:has(> .col-md-6 > .btn-search-result) > .col-md-6 > strong {
        font-size: 17px !important;
        line-height: 1.3;
    }

    .portlet-body > .row:has(> .col-md-6 > .btn-search-result) .btn-search-result {
        padding-right: 0;
        white-space: nowrap;
    }

    /* Atender: "Avaliação média da consulta" e "Quadro de distribuição" um sobre o outro, cada um na largura toda
       (como os outros botões sozinhos do celular); a nota fica à direita da linha, em destaque */
    .page-content .margin-bottom-20:has(> .btn-group > a[data-toggle="dropdown"]) {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }

    .page-content .margin-bottom-20:has(> .btn-group > a[data-toggle="dropdown"]) > table.pull-left {
        width: 100% !important;
        margin: 0;
    }

    .page-content .margin-bottom-20:has(> .btn-group > a[data-toggle="dropdown"]) > table.pull-left td {
        vertical-align: middle;
    }

    .page-content .margin-bottom-20:has(> .btn-group > a[data-toggle="dropdown"]) > table.pull-left td + td {
        width: 1%;
        font-weight: 700;
        text-align: right;
        white-space: nowrap;
    }

    .page-content .margin-bottom-20:has(> .btn-group > a[data-toggle="dropdown"]) > .btn-group,
    .page-content .margin-bottom-20:has(> .btn-group > a[data-toggle="dropdown"]) > .btn-group > .btn {
        display: flex;
        width: 100%;
    }

    .page-content .margin-bottom-20:has(> .btn-group > a[data-toggle="dropdown"]) > .btn-group > .btn {
        align-items: center;
        justify-content: center;
        gap: 6px;
    }

    .page-content .margin-bottom-20:has(> .btn-group > a[data-toggle="dropdown"]) > .btn-group > .dropdown-menu {
        right: 0;
        left: 0;
        width: 100%;
    }

    .page-content .margin-bottom-20:has(> .btn-group > a[data-toggle="dropdown"]) > .pull-left,
    .page-content .margin-bottom-20:has(> .btn-group > a[data-toggle="dropdown"]) > .pull-right {
        float: none !important;
        margin: 0;
    }

    /* Saldo de créditos (meus créditos, créditos do associado): à esquerda, o botão logo abaixo na largura toda */
    .page-content .col-md-4.center:has(> h3 > strong) {
        text-align: left;
    }

    .page-content .col-md-4.center:has(> h3 > strong) > h3 {
        margin: 4px 0 10px;
        font-size: 20px;
    }

    /* Pesquisa bibliográfica: o parágrafo de apresentação (20px, centralizado) vira texto corrido */
    .page-content .col-md-12.text-center > div[style*="font-size: 20px"] {
        font-size: 16px !important;
        line-height: 1.5;
        text-align: left;
    }

    /* Telas de uma mensagem só (compra concluída, aguardando, recusada, com erro; "Seja associado"): o ícone fica ao
       lado do título e o texto à esquerda, como no resto do sistema (a V6 centralizava com o ícone em cima; no uso, o
       ícone ao lado do título leu melhor). */
    .bv-mensagem .portlet-title .caption {
        float: none;
        white-space: normal;
    }

    /* Validação de download (captcha): título e caixa centralizados */
    .subheader-cientifico:has(.g-recaptcha) h2 {
        text-align: center;
    }
}

/* ================================================================== AJUSTES GERAIS */

/* Várias telas abrem com <div class="row"> e o layout já embrulha o corpo em outra .row: as duas margens
   negativas somadas passavam 10px da tela no tablet (artigo, congresso, especialidade). */
@media (max-width: 991px) {
    .page-content > .row > .row {
        margin-left: 0;
        margin-right: 0;
    }
}

/* ================================================================== PÁGINAS PÚBLICAS (congressos, revista, validação de download) */

/* No celular o topo público (logo + "Já sou associado / Não sou associado") tem ~125px e ficava fixo por cima do
   título da página: quem abria espaço para ele era o .header-wrapper, que some no celular (hidden-xs).
   Aqui ele passa a ocupar o próprio lugar. */
@media (max-width: 767px) {
    nav.navbar.navbar-default.navbar-fixed-top {
        position: relative;
        margin-bottom: 0;
    }

    .subheader-cientifico {
        position: relative;
        top: 0;
        left: 0;
        right: 0;
    }

    .bv-conteudo-congresso {
        margin-top: 16px;
    }

    /* Validação de download: o reCAPTCHA tem 304px fixos e encostava na borda do cartão */
    .subheader-cientifico:has(.g-recaptcha) {
        padding: 16px 12px;
    }

    .subheader-cientifico:has(.g-recaptcha) h2 {
        font-size: 22px;
        margin: 0 0 16px;
    }

    .subheader-cientifico .g-recaptcha {
        display: flex;
        justify-content: center;
    }

    /* a coluna em volta tirava mais 15px de cada lado */
    .container > .col-md-12:has(> .subheader-cientifico .g-recaptcha) {
        padding-left: 0;
        padding-right: 0;
    }
}

/* no computador o conteúdo do congresso desce 200px para não ficar sob o subcabeçalho (que é absoluto) */
@media (min-width: 768px) {
    .bv-conteudo-congresso {
        margin-top: 200px;
    }
}

/* ================================================================== AJUSTES GERAIS NO CELULAR */

@media (max-width: 767px) {
    /* a paginação tinha 200px de recuo fixo e saía da tela; os links vêm colados (sem espaço entre eles),
       então só quebram de linha como inline-block */
    .pagination {
        padding-left: 0 !important;
    }

    .pagination > a,
    .pagination > span {
        display: inline-block;
    }

    .pagination > .row:last-child {
        float: none;
        display: block !important;
        width: auto;
        margin-top: 8px !important;
        text-align: center;
    }

    /* botão de texto longo quebra a linha em vez de sair da tela (ex.: "Quero solicitar a pesquisa ao bibliotecário") */
    .page-content .btn {
        white-space: normal;
        max-width: 100%;
    }

    /* botões com 50px de recuo lateral não cabiam */
    .btn-new-green,
    .btn-new-grey {
        padding: 8px 20px !important;
        white-space: normal;
        max-width: 100%;
    }
}

/* ================================================================== V6: BOTÕES, CAMPOS E ACABAMENTO NO CELULAR */

/* Botão sozinho de formulário ou filtro (Salvar do responsável, Adicionar, Buscar, Filtrar, Adquirir créditos,
   Editar dados...): largura inteira no celular, como no GOV.UK Design System (100% até o tablet), e 12px de folga do
   campo de cima — antes ficava pequeno, à esquerda ou no meio, colado no campo. Botões de dentro de cartões, da barra
   de título, da trilha, de tabelas, de abas e do chat ficam como estão. */
@media (max-width: 767px) {
    .page-content :is(div, p, form):not(.btn-group, .actions, .page-toolbar, .tools, .input-group-btn, .caption, .nav, .input-group):not(:has(> :not(.btn, input[type="hidden"], script, br))):not(:has(> .btn ~ .btn)) > .btn:not(.btn-icon-only, .btn-status, .dropdown-toggle):not(.page-bar *, .title-wrapper-biblioteca *, .title-wrapper-cientifico *, table *, .portlet-title *, .chat-bar *, .conversation *, .pagination *, .dropdown-menu *, .bv-servicos *, .modal *, .tab-pane h3 *) {
        display: block;
        width: 100%;
        max-width: 100%;
        float: none;
        margin-left: 0;
        margin-right: 0;
        white-space: normal;
    }

    /* "Adicionar" (atividade, tema, congresso do artigo) vinha com largura máxima de 100px e 26px de margem no HTML */
    .page-content input.btn.form-control[style*="max-width: 100px"] {
        max-width: 100% !important;
        margin-top: 12px !important;
    }

    /* em colunas que empilham, o botão vinha com margem de alinhamento do computador (26px, 50px...) */
    .page-content [class*="col-"] + [class*="col-"] > .btn:only-child:not(.btn-icon-only):not(table *, .portlet-title *) {
        margin-top: 12px !important;
    }

    .page-content .col-md-4:has(> a.btn-new-grey[style*="margin-top: 50px"]) > .btn {
        margin-top: 12px !important;
    }

    /* campo com o botão logo embaixo (revista da especialidade, congresso do artigo): o botão ocupa a largura e
       ganha folga do campo */
    .page-content .form-inline > .select2-container ~ .btn,
    .page-content .form-inline > .form-control ~ .btn,
    .page-content .form-group > .btn:last-child:not(:first-child) {
        display: block;
        width: 100%;
        margin: 12px 0 0 !important;
    }
}

/* Período de datas ("Acima de:" até "Abaixo de:"): os dois campos e o "até" numa linha só, dividindo a largura. Datas
   são curtas e cabem lado a lado em 375px; preenchido, lê-se "01/01/2026 até 31/01/2026". */
@media (max-width: 767px) {
    .page-content .form-group:has(> input.data-periodo ~ input.data-periodo) {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
        align-items: center;
        gap: 8px;
    }

    .page-content .form-group:has(> input.data-periodo ~ input.data-periodo) > input.data-periodo {
        width: 100% !important;
        margin: 0 !important;
    }

    .page-content [class*="col-"]:has(> .form-group input.data-periodo ~ input.data-periodo) {
        float: none;
        width: 100%;
    }

    .page-content .form-group:has(> input.data-periodo ~ input.data-periodo) > label {
        grid-column: 1 / -1;
        margin: 0;
    }

    /* Busca avançada: "Data de publicação" De e Até em duas colunas vizinhas, lado a lado */
    [class*="col-"]:has(> .form-group > .form-group > input.data-periodo) {
        float: left;
        width: 50%;
    }

    [class*="col-"]:has(> .form-group > .form-group > input.data-periodo) + [class*="col-"]:not(:has(input.data-periodo)) {
        clear: both;
    }
}

/* Anexos da solicitação: "Selecione o arquivo" era um rótulo alinhado à direita, longe do campo; fica à esquerda,
   em cima do campo. O campo e o "Adicionar" ocupam a largura, cada um na sua linha. */
@media (max-width: 767px) {
    .page-content form[enctype="multipart/form-data"] .col-sm-3.text-right {
        text-align: left;
    }

    .page-content form[enctype="multipart/form-data"] .col-sm-3.text-right > label {
        margin-bottom: 6px;
    }

    .page-content form[enctype="multipart/form-data"] input[type="file"].form-control {
        height: auto;
        padding: 6px;
    }
}

/* No tablet (até 991px) o mesmo rótulo fica à esquerda, em cima; o campo usa a largura que sobra e o "Adicionar" fica
   ao lado dele (antes, em três colunas, o nome do arquivo escolhido aparecia cortado: "Nenhum ar…vo escolhido") */
@media (min-width: 768px) and (max-width: 991px) {
    .page-content form[enctype="multipart/form-data"] > .row:has(> .col-sm-3.text-right) {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        row-gap: 6px;
        align-items: center;
    }

    .page-content form[enctype="multipart/form-data"] > .row:has(> .col-sm-3.text-right)::before,
    .page-content form[enctype="multipart/form-data"] > .row:has(> .col-sm-3.text-right)::after {
        content: none;
    }

    .page-content form[enctype="multipart/form-data"] > .row:has(> .col-sm-3.text-right) > [class*="col-"] {
        float: none;
        width: auto;
    }

    .page-content form[enctype="multipart/form-data"] > .row > .col-sm-3.text-right {
        grid-column: 1 / -1;
        text-align: left;
    }

    .page-content form[enctype="multipart/form-data"] > .row > .col-sm-3.text-right > label {
        margin: 0;
    }

    .page-content form[enctype="multipart/form-data"] > .row > .col-sm-3:last-child {
        padding-left: 0;
    }

    .page-content form[enctype="multipart/form-data"] input[type="file"].form-control {
        height: auto;
        padding: 6px;
    }
}

/* Novo/editar alerta (e outros formulários "rótulo col-md-3 + campo col-md-3"): no celular os campos ganhavam 15px de
   recuo das colunas e ficavam mais estreitos que "Observação"; agora rótulo e campo começam e terminam juntos */
@media (max-width: 767px) {
    .page-content .form-group > label.control-label[class*="col-"] + [class*="col-"],
    .page-content .form-group > label.control-label[class*="col-"] ~ [class*="col-"] {
        padding-left: 0;
        padding-right: 0;
    }

    .page-content .form-group > label.control-label[class*="col-"] {
        padding-right: 0;
    }

    .page-content .form-group > label.control-label[class*="col-"] ~ [class*="col-"] > .form-group {
        margin-left: 0;
        margin-right: 0;
    }

    /* Nos formulários .form-horizontal (Enviar comunicado, Comunicado especial, Usuário, Perfil...) o .form-group é
       uma linha do grid, com -15px de cada lado: sem o recuo das colunas, rótulo e campo passavam 4px da borda do
       quadro. A linha perde a margem e tudo fica dentro do quadro, alinhado ao título das seções. */
    .page-content .form-horizontal .form-group:has(> label.control-label[class*="col-"]) {
        margin-left: 0;
        margin-right: 0;
    }
}

/* Comprar créditos: mês/ano de vencimento e parcelas eram selects estreitos ao lado do rótulo; como os outros campos,
   ocupam a largura, embaixo do rótulo */
@media (max-width: 767px) {
    .page-content .form-group > select.form-control.input-inline {
        display: block;
        width: 100% !important;
        margin: 4px 0 0;
    }
}

/* Editar artigo (PubMed): "Revista(s) | Mês | Ano" era uma tabela com o cabeçalho em cima e os campos soltos embaixo
   do nome da revista. No celular: o nome da revista numa linha e Mês e Ano lado a lado, cada um com o seu rótulo. */
@media (max-width: 767px) {
    .page-content .form-group:has(ul > input[name$=".revista.id"]) > label.control-label.col-md-2,
    .page-content .form-group:has(ul > input[name$=".revista.id"]) > label.control-label.col-md-3 {
        display: none;
    }

    .page-content .form-group ul:has(> input[name$=".revista.id"]) {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 4px 12px;
        margin: 0;
        padding: 0 15px;
        list-style: none;
    }

    .page-content .form-group ul:has(> input[name$=".revista.id"]) > .col-md-7 {
        grid-column: 1 / -1;
        width: auto;
        padding: 0;
    }

    .page-content .form-group ul:has(> input[name$=".revista.id"]) > .col-md-2,
    .page-content .form-group ul:has(> input[name$=".revista.id"]) > .col-md-3 {
        width: auto;
        margin: 0 0 12px !important;
        padding: 0;
    }

    .page-content .form-group ul:has(> input[name$=".revista.id"]) label[for$=".mes"]::before {
        content: "Mês";
    }

    .page-content .form-group ul:has(> input[name$=".revista.id"]) label[for$=".ano"]::before {
        content: "Ano";
    }

    .page-content .form-group ul:has(> input[name$=".revista.id"]) .form-control {
        height: 34px !important;
    }
}

/* Solicitar artigo / pesquisa: título do quadro igual ao da página some; "Saldo…" e "Serão gastos…" eram títulos
   h3 em negrito (23px) — viram duas linhas de resumo; as instruções perdem o recuo de 15px a mais */
@media (max-width: 767px) {
    .page-content .portlet > .portlet-title.bv-titulo-repetido {
        display: none;
    }

    .page-content h3.form-section ~ .col-md-4 > h3,
    .page-content h3.form-section + .row > .col-md-4 > h3 {
        margin: 2px 0;
        font-size: 16px;
        line-height: 1.4;
    }

    .page-content h4 + .row[style*="margin-left: 15px"] {
        margin-left: -15px !important;
    }
}

/* Meu perfil: foto de até 150px sozinha numa linha; no celular, 96px */
@media (max-width: 767px) {
    .page-content img.avatar.img-responsive[style*="max-height:150px"] {
        max-width: 96px;
        max-height: 96px !important;
        margin-bottom: 8px;
    }
}

/* Congressos (público): a descrição ficava numa caixa de rolagem de 200px fixos — cartões altos e vazios com textos
   curtos. No celular a caixa tem a altura do texto, até 6 linhas. */
@media (max-width: 767px) {
    .portlet.light > .portlet-body > .slimScrollDiv:has(> .scroller > p) {
        height: auto !important;
    }

    .portlet.light > .portlet-body > .slimScrollDiv > .scroller:has(> p) {
        height: auto !important;
    }

    .portlet.light > .portlet-body > .slimScrollDiv > .scroller > p {
        display: -webkit-box;
        margin-bottom: 8px;
        overflow: hidden;
        -webkit-line-clamp: 6;
        -webkit-box-orient: vertical;
    }

    .portlet.light > .portlet-body > .slimScrollDiv > .slimScrollBar,
    .portlet.light > .portlet-body > .slimScrollDiv > .slimScrollRail {
        display: none !important;
    }

    /* busca do congresso/livro: o botão fica só com a lupa (um dos poucos ícones que todos reconhecem) e o campo
       ganha a largura que o texto "Buscar" tomava */
    .input-group > .input-group-btn > .btn-buscar {
        width: 44px;
        margin-left: 8px;
        overflow: hidden;
        font-size: 0;
        white-space: nowrap;
    }

    .input-group > .input-group-btn > .btn-buscar > .fa-search {
        font-size: 20px;
    }

    /* aula do congresso: "Voltar" flutuava por cima do título e empurrava o texto */
    .tab-pane > h3 > .btn.pull-right {
        float: none !important;
        display: table;
        margin-top: 10px;
        font-size: 14px;
    }

    /* especialidade (público): os atalhos (Pesquisa, Treinamentos, Alerta, Assessoria) tinham a largura do texto,
       cada um de um tamanho */
    .cards-center > .item > .well.icon-card {
        display: block;
        width: 100%;
    }

    /* artigos de uma revista: duas caixas com borda uma dentro da outra desenhavam linhas verticais dos dois lados
       da página; fica só a de dentro */
    .fundo-revista .portlet.bv-caixa-externa {
        border: 0 !important;
        padding: 0 !important;
        background: transparent !important;
    }
}

/* ================================================================== V7: RETORNO SOBRE A V6 NO CELULAR (28/09) */

@media (max-width: 767px) {
    /* Rodapé: centralizado em todas as telas, como já era no login (antes o login centralizava e as outras telas
       alinhavam à esquerda) */
    .page-footer .page-footer-inner {
        float: none;
        width: 100%;
        text-align: center;
    }

    /* "Acompanhar notificações:" e o Sim/Não na mesma linha, na altura das pílulas de status */
    .page-solicitacao .bv-status-solicitacao .page-toolbar:has(> .btn-group-circle) {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 8px 12px;
    }

    .page-solicitacao .bv-status-solicitacao .page-toolbar:has(> .btn-group-circle) > .texto-status {
        display: inline;
        margin: 0;
    }

    .page-solicitacao .bv-status-solicitacao .btn-group-circle > .btn.notification {
        min-height: 36px;
        padding: 6px 16px !important;
    }

    /* Título com um botão ao lado (ex.: "Suas solicitações" + "Nova solicitação"): o botão do tema tinha 25px de
       recuo lateral e não cabia na linha do título, caindo sozinho embaixo, à direita; com recuo menor, fica ao lado */
    .title-wrapper-biblioteca > :has(.btn):not(:has(.page-breadcrumb)) .btn,
    .title-wrapper-cientifico > :has(.btn):not(:has(.page-breadcrumb)) .btn {
        padding: 6px 12px;
        font-size: 13px;
    }

    .title-wrapper-biblioteca:has(> :has(.btn):not(:has(.page-breadcrumb))),
    .title-wrapper-cientifico:has(> :has(.btn):not(:has(.page-breadcrumb))) {
        align-items: center;
    }

    /* Listagens do administrador: o "Filtro"/"Filtro ativo" ficava sozinho num canto, embaixo da trilha; vira um botão
       na largura toda, e o painel de filtros abre na largura da tela, logo abaixo (era um balão estreito à direita) */
    .page-bar > .page-toolbar:has(> [data-toggle="popover"]) {
        float: none !important;
        width: 100%;
        margin: 8px 0 0;
        padding: 0 0 8px;
    }

    .page-bar > .page-toolbar > .btn[data-toggle="popover"] {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        width: 100%;
    }

    body > .popover.bottom {
        left: 8px !important;
        width: calc(100vw - 16px);
        max-width: none;
    }

    body > .popover.bottom > .arrow {
        display: none;
    }

    /* dentro do painel, os campos (250px fixos do tema) e o "Buscar" ocupam a largura */
    body > .popover .popover-content .input-group,
    body > .popover .popover-content .input-large,
    body > .popover .popover-content .input-medium,
    body > .popover .popover-content .input-inline {
        width: 100% !important;
        max-width: none;
    }

    body > .popover .popover-content .input-group > .form-control {
        width: 100%;
    }

    body > .popover .popover-content .btn,
    body > .popover .popover-content input[type="submit"] {
        width: 100%;
    }
}

/* ================================================================== PENDÊNCIAS DA AUDITORIA DO TESTE.AMMG (30/09) */

/* .container nunca passa da largura de quem o contém. O layout.css do tema fixa 1270px a partir de 1260px (entre 1260
   e 1279px a Assessoria científica rolava 10px para o lado) e o Bootstrap fixa 750px a partir de 768px, o que nas
   páginas do macro_limpo (Quero ser associado, Sou associado, Extrato de quitação), com 20px de recuo, passava da tela */
.container {
    max-width: 100%;
}

/* Início sem foto cadastrada: a capa usa a imagem padrão (1166px) sem largura máxima e, entre 768 e 991px, a página
   inteira rolava até 398px para o lado. Recorta como já acontece no celular. */
@media (max-width: 991px) {
    .header-wrapper {
        overflow: hidden;
    }
}

/* Workplace: abaixo de 768px a coluna do logo (.col-sm-8.col-sm-offset-2) ocupa a largura toda e ficava por cima do
   "×" (9×9px, opacidade 0,2): o toque caía no logo e o modal só fechava pelo fundo escuro */
@media (max-width: 767px) {
    #workplace .close {
        position: relative;
        z-index: 2;
        width: 44px;
        height: 44px;
        margin: -14px -14px 0 0;
        opacity: .6;
        background-position: center;
        background-repeat: no-repeat;
    }
}

/* "Solicite um atendimento": a tela usa .service-bar (a faixa de atalhos da Biblioteca, com 115px fixos no tema) como
   caixa das opções. Abaixo de 992px as opções empilham e passavam da caixa; o conteúdo da página corta o que passa, e
   no iPhone só "Pesquisa bibliográfica" e "Artigo científico" apareciam — as outras seis ficavam inacessíveis, e o
   rodapé caía por cima de "Fale com a equipe BV" (achado pelo teste de toque no iPhone/iPad; já era assim na V1). */
@media (max-width: 991px) {
    .portlet-body > .page-bar > .service-bar {
        height: auto;
    }
}

/* ================================================================== ATENDIMENTO, ANUIDADE E COMUNICADOS (30/09) */

/* Texto que só aparece no celular (ex.: a situação escrita ao lado do ícone em "Pagar anuidade", onde a legenda some) */
.bv-so-celular {
    display: none;
}

@media (max-width: 767px) {
    .bv-so-celular {
        display: inline;
    }
}

/* ------------------------------------------------------------------ Faça sua solicitação: canais */

/* 992–1199px: nomes longos quebravam em duas linhas dentro de um link de 50px de altura de linha, com o ícone numa
   linha e o texto na outra; o centro do link caía no vão entre as linhas. Ícone ao lado do nome, bloco inteiro clicável. */
@media (max-width: 1199px) {
    .bv-canais .bv-canal {
        line-height: 1.3;
    }

    .bv-canais .bv-canal > a {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        min-height: 48px;
        padding: 6px 0;
        text-align: left;
        vertical-align: middle;
    }
}

/* Até 991px: os canais viram uma lista, um por linha, alinhados à esquerda, com a linha inteira tocável */
@media (max-width: 991px) {
    .bv-canais .row {
        margin: 0;
    }

    .bv-canais .bv-canal {
        float: none;
        width: 100%;
        padding: 0;
        text-align: left;
        border-bottom: 1px solid var(--bv-borda-cartao);
    }

    .bv-canais .bv-canal:last-child {
        border-bottom: 0;
    }

    .bv-canais .bv-canal > a {
        display: flex;
        width: 100%;
        gap: 14px;
        padding: 8px 4px;
        font-size: 13px !important;
        text-decoration: none;
    }

    .bv-canais .bv-canal > a > i {
        flex: 0 0 32px;
        width: 32px;
        font-size: 24px !important;
        text-align: center;
    }

    .bv-canais h3.form-section {
        margin: 24px 0 4px;
    }

    .bv-canais h3.form-section:first-child {
        margin-top: 0;
    }
}

/* ------------------------------------------------------------------ Meus atendimentos */

/* 992–1199px: "Filtrar" ficava numa coluna de 2/12 com o texto maior que ela e passava 18px da borda do quadro */
@media (min-width: 992px) and (max-width: 1199px) {
    .page-content .col-md-2.text-center.margin-top-30 > .btn {
        max-width: 100%;
        padding-left: 8px;
        padding-right: 8px;
        white-space: normal;
    }
}

/* ------------------------------------------------------------------ Pagar anuidade */

@media (max-width: 767px) {
    /* o título "Financeiro" ficava colado na borda (h3 solto dentro da .row, que tem -15px de margem) */
    .bv-anuidade .portlet-body > .row > h3.form-section {
        margin-left: 0;
        margin-right: 0;
        padding: 0 15px;
    }

    /* a legenda virava cinco cartões com o rótulo "Legenda" repetido; no celular cada ano já diz a situação por
       escrito ao lado do ícone, então a legenda sai */
    .bv-anuidade .bv-legenda-icones {
        display: none;
    }

    /* situação do ano: ícone e texto lado a lado; o motivo de "não cobrar" embaixo */
    .bv-anuidade td .bv-so-celular {
        margin-left: 6px;
    }

    /* "Pagar anuidade" / "Pagar novamente": botão de verdade no cartão, com o nome escrito */
    .bv-anuidade td a.btn-icon-only {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        gap: 8px;
        width: 100% !important;
        min-height: 40px;
        padding: 8px 12px;
        border: 1px solid #26c281;
        border-radius: 4px !important;
        font-weight: 600;
        color: #1b7f55;
        text-decoration: none;
    }

    .bv-anuidade td a.btn-icon-only .bv-so-celular {
        margin-left: 0;
    }
}

/* ------------------------------------------------------------------ Pagamento de anuidade (cartão) */

/* Até 1199px: "Parcelas" é um select "input-inline" com a largura do texto mais longo ("À vista (R$ 1.180,00)...")
   e passava da coluna: 11px em 1024 e 71px em 768, onde a página inteira rolava para o lado */
@media (max-width: 1199px) {
    .bv-pagamento-cartao select.input-inline {
        width: 100% !important;
        max-width: 100%;
    }
}

/* Até 991px: bandeiras em cima, em duas colunas, e os dados do cartão embaixo, com a largura toda (em 768 os campos
   ficavam espremidos ao lado da lista de bandeiras) */
@media (max-width: 991px) {
    .bv-pagamento-cartao > .row:not(.bv-resumo-cobranca) > .col-sm-3,
    .bv-pagamento-cartao > .row:not(.bv-resumo-cobranca) > .col-sm-9 {
        float: none;
        width: 100%;
    }

    .bv-pagamento-cartao .radio-list {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 2px 16px;
    }

    .bv-pagamento-cartao .radio-list > label {
        margin: 0;
        padding: 6px 0;
    }
}

@media (max-width: 767px) {
    /* resumo da cobrança: um dado por linha (ficavam três colunas estreitas com o texto quebrando). O !important vence
       a regra de "Comprar créditos" (.row:has(> div > #valorTotalSpan)), que pega esta linha pelo mesmo id do valor. */
    .bv-pagamento-cartao .bv-resumo-cobranca {
        display: block !important;
        margin: 0;
    }

    .bv-pagamento-cartao .bv-resumo-cobranca > [class*="col-"] {
        display: block;
        float: none;
        width: 100% !important;
        padding: 4px 0;
    }

    /* "Confirmar pagamento" e "Cancelar": par de botões dividindo a largura */
    .bv-acoes-pagamento {
        display: flex;
        gap: 8px;
    }

    .bv-acoes-pagamento > .btn {
        flex: 1 1 0;
        min-height: 40px;
        margin: 0;
        white-space: normal;
    }
}

/* ------------------------------------------------------------------ Extrato de quitação */

@media (max-width: 767px) {
    /* "Associado" e "CPF" eram duas metades flutuando; com nome longo, "Gerado às..." e o primeiro cartão subiam para
       o lado delas (o primeiro ano ficava espremido na metade da tela, com "referência" quebrando no meio) */
    .bv-extrato .bv-extrato-cabecalho {
        display: flow-root;
    }

    .bv-extrato .bv-extrato-cabecalho > div {
        float: none !important;
        width: 100% !important;
    }

    .bv-extrato .bv-extrato-cabecalho p {
        margin: 0 0 4px;
        text-align: left !important;
    }

    .bv-extrato #imprimir h2 {
        font-size: 24px;
    }

    .bv-extrato #imprimir .img-responsive {
        max-width: 120px;
    }
}

/* ------------------------------------------------------------------ Comunicados */

/* "Enviar comunicado" + "Testar comunicado": par de botões dividindo a largura; "Salvar" sozinho ocupa a linha */
@media (max-width: 767px) {
    .bv-acoes-comunicado .col-md-offset-3 {
        display: flex;
        gap: 8px;
    }

    .bv-acoes-comunicado .col-md-offset-3 > .btn:not([style*="display: none"]) {
        flex: 1 1 0;
        min-height: 40px;
        margin: 0;
        white-space: normal;
    }
}

/* ================================================================== INÍCIO: BANNER ABAIXO DO CABEÇALHO (13/10) */

/* Abaixo de 992px o cabeçalho deixa de ser fixo e passa a ocupar o próprio lugar. O margin-top: -40px do
   .header-wrapper (maineteg.css) só servia para compensar o espaço do cabeçalho fixo e, aqui, enfiava 20px do
   banner por baixo dele. Com -20px o banner começa logo abaixo do cabeçalho (o .page-content tem 20px de padding). */
@media (max-width: 991px) {
    .page-content > .row > .header-wrapper {
        margin-top: -20px;
    }
}

/* "Customizar tela inicial" (só administradores) fica solto dentro da .row do layout, cuja margem negativa o
   levava 5px para fora da tela no celular: alinha com a borda dos cartões abaixo dele */
@media (max-width: 767px) {
    .page-content > .row > a[href$="/comum/customizar"] {
        display: inline-block;
        margin-left: 15px;
    }
}