/*
 * Regras específicas para telas maiores que 600px (desktop e tablets)
 * – garante que o menu lateral esteja visível e alinhado com a margem,
 *   enquanto o ícone de hambúrguer permanece oculto.
 */
@media (min-width: 601px) {
    /* mostra o menu lateral e remove qualquer margem ou preenchimento indesejado */
    #menu {
        display: block !important;
        padding-left: 0;
        margin-left: 0;
    }
    /* certifica-se de que o miolo não tenha deslocamento lateral extra */
    #miolo {
        padding-left: 0;
        margin-left: 0;
    }
    /* oculta o ícone de hambúrguer em telas grandes */
    #hamburger {
        display: none;
    }
}

/*
 * Configurações para aparelhos pequenos (entre 601px e 768px)
 * – destinam‑se a smartphones grandes e pequenos tablets. Aqui as fontes
 *   ficam ainda menores que no desktop, e as logomarcas são reduzidas. O menu
 *   lateral continua visível (não utiliza o hambúrguer) e o rodapé permanece.
 */
@media (min-width: 601px) and (max-width: 768px) {
    /* reduz o tamanho das imagens de logotipos */
    #logo1 img,
    #logo2 img {
        height: 70px;
    }
    /* diminui as fontes do texto do cabeçalho para economizar espaço */
    #texto h4 {
        font-size: 13px;
    }
    /* ajusta a altura e o tamanho de fonte da área central */
    #miolo {
        height: auto;
        font-size: 12px !important;
    }
    /* diminui a fonte do menu lateral para pequenos tablets */
    #menu {
        font-size: 12px;
    }
    /* diminui a fonte dos formulários e seus controles */
    #formulario {
        font-size: 9px;
    }
    #formulario input,
    #formulario select,
    #formulario option {
        font-size: 9px;
    }
    /* diminui a fonte da barra de navegação */
    #barra {
        font-size: 12px !important;
    }

    /*
     * Exibe o ícone de menu (hambúrguer) e oculta o menu lateral e os
     * links da barra nesta faixa de largura. Isso permite que dispositivos
     * de médio porte utilizem o mesmo comportamento de navegação do modo
     * mobile, oferecendo mais espaço para o conteúdo.
     */
    #hamburger {
        /* usa !important para se sobrepor à regra global que o oculta */
        display: block !important;
        position: fixed;
        top: 10px;
        left: 10px;
        font-size: 26px;
        line-height: 1;
        cursor: pointer;
        z-index: 1050;
        color: #000080;
        background: #F5703C;
        padding: 8px 12px;
        border-radius: 4px;
    }
    /* esconde o menu lateral inicialmente nesta faixa de largura */
    #menu {
        /* usa !important para sobrepor a regra de exibição definida em telas maiores */
        display: none !important;
    }
    /* oculta os links horizontais da barra para usar o menu hamburguer */
    #barra a,
    #barra .barra {
        display: none;
    }

    /* oculta os logotipos para liberar espaço na tela */
    #logo1,
    #logo2 {
        display: none;
    }

    /* reorganiza o cabeçalho em coluna e ajusta os espaçamentos */
    #head {
        flex-direction: column;
        padding: 10px;
    }

    /* reduz ainda mais as fontes do cabeçalho para coincidir com o mobile */
    #texto h4 {
        font-size: 12px;
    }

    /* ajusta o miolo para ocupar toda a largura e altura automática, com fonte reduzida */
    #miolo {
        height: auto;
        width: 100%;
        margin-top: 20px;
        font-size: 12px;
    }

    /* adiciona margens laterais ao formulário para evitar que fique colado nas bordas */
    #formulario {
        margin-left: 10px;
        margin-right: 10px;
        font-size: 9px;
    }
    #formulario input,
    #formulario select,
    #formulario option {
        font-size: 9px;
    }

    /* esconde o rodapé nesta faixa de largura, tal como no mobile */
    #rodape {
        /* garante que o rodapé permaneça oculto mesmo que haja regras posteriores */
        display: none !important;
    }
}

/*
 * Configurações para tablets tradicionais (entre 769px e 992px)
 * – os elementos ficam um pouco maiores que nos aparelhos pequenos, mas ainda
 *   menores que no desktop. As logomarcas são reduzidas e as fontes são
 *   ajustadas para melhor leitura em telas médias.
 */
@media (min-width: 769px) and (max-width: 992px) {
    /* reduz o tamanho das logomarcas em tablets */
    #logo1 img,
    #logo2 img {
        height: 70px;
    }
    /* ajusta as fontes do cabeçalho para um tamanho intermediário */
    #texto h4 {
        font-size: 14px;
    }
    /* define altura automática e fonte moderada para o miolo */
    #miolo {
        height: auto;
        font-size: 13px !important;
    }
    /* ajusta a fonte do menu lateral para tablets */
    #menu {
        font-size: 13px;
    }
    /* ajusta a fonte dos formulários e controles para tablets */
    #formulario {
        font-size: 10px;
    }
    #formulario input,
    #formulario select,
    #formulario option {
        font-size: 10px;
    }
    /* reduz a fonte da barra de navegação em tablets */
    #barra {
        font-size: 13px !important;
    }
}

/*
 * Configuração para laptops menores e desktops compactos (entre 993px e 1200px)
 * – ligeira redução no tamanho de alguns elementos visuais para melhorar o
 *   aproveitamento de espaço sem comprometer a legibilidade em telas maiores.
 */
@media (min-width: 993px) and (max-width: 1200px) {
    /* diminui um pouco as logomarcas em laptops menores */
    #logo1 img,
    #logo2 img {
        height: 80px;
    }
    /* ajusta as fontes do cabeçalho para um tamanho levemente reduzido */
    #texto h4 {
        font-size: 15px;
    }
    /* ajusta a fonte do miolo */
    #miolo {
        font-size: 14px;
    }
    /* ajusta a fonte do menu lateral */
    #menu {
        font-size: 14px;
    }
    /* ajusta a fonte dos formulários e controles */
    #formulario {
        font-size: 11px;
    }
    #formulario input,
    #formulario select,
    #formulario option {
        font-size: 11px;
    }
    /* ajusta a fonte da barra de navegação */
    #barra {
        font-size: 14px;
    }
}

/*
 * Ajusta a proporção do menu lateral e da área de conteúdo em tablets e
 * laptops menores. Ao aumentar a largura do menu, melhora‑se a
 * navegabilidade, enquanto a área de conteúdo é ligeiramente reduzida.
 */
@media (min-width: 769px) and (max-width: 992px),
       (min-width: 993px) and (max-width: 1200px) {
    /* menu ocupa cerca de 30% da largura total para melhorar a usabilidade */
    #menu {
        flex: 0 0 30%;
        max-width: 30%;
    }
    /* conteúdo ocupa os 70% restantes */
    #conteudo {
        flex: 0 0 70%;
        max-width: 70%;
    }
    /* dentro da área de conteúdo, o formulário ocupa pelo menos 80% do espaço e fica centralizado */
    #formulario {
        min-width: 80%;
        margin-left: auto;
        margin-right: auto;
    }
}
html body {
    font-family: Arial, Helvetica, sans-serif;
    /*
     * Definimos margens laterais uniformes em todas as resoluções para afastar o conteúdo
     * das bordas da tela. O topo e a base permanecem sem margem para manter o alinhamento
     * do cabeçalho e rodapé.
     */
    margin-top: 0;
    margin-bottom: 0;
    margin-left: 10px;
    margin-right: 10px;
}

/* As linhas (rows) ocupam toda a largura disponível do contêiner pai,
   respeitando as margens laterais definidas no body */
div.row {
    max-width: 100%;
    width: 100%;
    /* Remove as margens negativas de bootstrap para que a margem do body seja respeitada */
    margin-left: 0;
    margin-right: 0;
}
div#head {
    display: flex;
    align-items: center;
    justify-content: center;
    /* Usa 100% para respeitar as margens do body */
    width: 100%;
    /* padding: 10px; */
}

div#formulario {
    text-align: center;
    background: #CCCCCD;
    font-size: 12px;
    border-radius: 10px;
    input, select, option{
        font-size: 12px;
    }
}

div#titulo {
    font-weight: bold;
    font-size: 16px; 
}

h4 {
    font-weight: bold;
    text-align: center;
}

div#logo1 {
    text-align:center; 
}
div#logo1 img {
    height: 90px;
}

div#logo2 {
    text-align:center; 
}
div#logo2 img {
    height: 90px;
}

div#texto{
    text-align:center; 
}

div#barra {
    font-size:18px; 
    font-style:italic; 
    text-align: center;
    margin-top:10px; 
    color:#FFFFFF; 
    background: #000080;
    /* ocupa a largura do contêiner pai */
    width: 100%;
}

a.barra:link, a.barra:visited {
    text-decoration:none; 
    color: #FFFFFF;
    background: #000080;
    height:100%; 
    width:100%;
    display:block;
}
a.barra:hover, a.barra:active {
    text-decoration:none; 
    /* padding-left: 30px;  */
    background: #F5703C; 
    color: #000080;
}

a.barra2:link, a.barra2:visited {
    text-decoration:none; 
    color: #FFFFFF;
    background: #F5703C;
    height:100%; 
    width:100%;
    display:block;
}
a.barra2:hover, a.barra2:active {
    text-decoration:none; 
    /* padding-left: 30px;  */
    background: #000080; 
    color: #F5703C;
}

div#miolo {
    text-align: justify;
    font-size: 15px;
    height: 70vh;
    /* usa 100% para respeitar margens do body */
    width: 100%;
    margin-top: 10px;
    overflow: auto;
}

div#menu {
    text-align: center;
    font-size: 15px;
    /* remove o preenchimento lateral das colunas de bootstrap para alinhar o menu à margem */
    padding-left: 0;
    padding-right: 0;
}

div.menu {
    border-bottom: 2px solid #FFFFFF;
    /* padding-left: 10px; */
}

/* div#conteudo {
    align-items: center;
    justify-content: center;
    display: flex;
}

div.conteudo {
    padding-left: 10px;
} */

div#rodape {
    background: #CCCCCC;
    /* O rodapé é exibido por padrão; será ocultado apenas em telas menores via media query */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    margin-top: 10px;
    font-weight: bold;
    /* usa 100% para respeitar margens do body */
    width: 100%;
    height: 5vh;
}

div#rodape img {
    height: 80%;
}
div#rodape span {
    margin: 10px;
}

object {
    /* width: 100vw; */
    height: 100vh;
}

/* Responsividade para dispositivos móveis
 *
 * Este bloco adiciona regras específicas para telas menores (até 600px de largura),
 * ocultando elementos de topo (logotipos), escondendo links horizontais da barra,
 * reduzindo fontes, e exibindo um ícone de menu (hambúrguer) para acessar os menus
 * laterais ou horizontais escondidos. O rodapé também é ocultado em telas pequenas.
 */

/* O ícone do menu fica oculto por padrão; será exibido apenas em telas pequenas */
#hamburger {
    display: none;
}

@media (max-width: 600px) {
    /* suprime completamente os logotipos no topo */
    #logo1,
    #logo2 {
        display: none;
    }

    /* reorganiza o topo em coluna e ajusta espaçamentos */
    #head {
        flex-direction: column;
        padding: 10px;
    }

    /* reduz ainda mais as fontes do texto do cabeçalho para mobile */
    #texto h4 {
        font-size: 12px;
        margin: 2px 0;
    }

    /* oculta o menu lateral inicialmente */
    #menu {
        display: none;
    }

    /* esconde os links da barra (menu horizontal) na página pública;
       os elementos com texto que não são links (como mensagem de boas‑vindas)
       permanecem visíveis */
    #barra a,
    #barra .barra {
        display: none;
    }
    #barra {
        font-size: 11px !important;
    }

    /* o ícone do menu é visível; posicionado no canto superior esquerdo */
    #hamburger {
        display: block;
        position: fixed;
        top: 10px;
        left: 10px;
        font-size: 26px;
        line-height: 1;
        cursor: pointer;
        z-index: 1050;
        color: #000080;
        background: #F5703C;
        padding: 8px 12px;
        border-radius: 4px;
    }

    /* ajusta o miolo para ocupar a largura total e altura automática */
    #miolo {
        height: auto;
        width: 100%;
        margin-top: 20px;
        font-size: 10px !important;
    }

    /*
     * Adiciona margens laterais iguais aos formulários para que eles não fiquem colados
     * nas bordas da tela. Isso melhora a legibilidade em telas pequenas.
     */
    #formulario {
        margin-left: 10px;
        margin-right: 10px;
    }

    /* esconde o rodapé para priorizar o conteúdo principal */
    #rodape {
        display: none !important;
    }

    /* ajusta a barra (links de navegação) para fonte menor no mobile */
    #barra {
        font-size: 11px;
    }

    /* diminui a fonte do menu lateral no modo mobile */
    #menu {
        font-size: 11px;
    }

    /* diminui a fonte dos formulários e controles no modo mobile */
    #formulario {
        font-size: 9px;
    }
    #formulario input,
    #formulario select,
    #formulario option {
        font-size: 9px;
    }

}