/* Estilo base */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    /*-moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;*/
}

/* Definição global da fonte. O tipo de letra (font-family) já foi definido para o contêiner genérico no seu CSS */
body {
    font-family: Arial, sans-serif;
}

/* ========= Estilos de alinhamento de texto para títulos e parágrafos ========= */
/* Alinhamento de títulos e parágrafos aplicados em uma única classe */

/* Alinhamento à direita */
.align-right {
    text-align: right;
}

/* Alinhamento ao centro */
.align-center {
    text-align: center;
}

/* Alinhamento justificado */
.justify {
    text-align: justify;
}

/* Parágrafos centralizados */
.centered-paragraph {
    text-align: center;
}

/* ========= Estilos responsivos para os títulos e textos ========= */
/* Reduzir o tamanho dos títulos e textos em telas menores */

/* Estilos para dispositivos móveis */
@media (max-width: 768px) {
    /* Ajuste do tamanho de fonte de títulos em telas menores */
    
    h1.align-right, h1.align-center {
        font-size: 2em;
    }

    h2.align-right, h2.align-center {
        font-size: 1.8em;
    }

    h3.align-right, h3.align-center {
        font-size: 1.6em;
    }

    h4.align-right, h4.align-center {
        font-size: 1.4em;
    }

    /* Ajustes de fonte para parágrafos */
    p.justify, p.centered-paragraph {
        font-size: 1em;
    }
}

/* Comentários gerais para o alinhamento e responsividade dos textos */
/* 
   A classe "align-right" é usada para alinhar títulos à direita.
   A classe "align-center" é usada para centralizar títulos.
   A classe "justify" é usada para parágrafos justificados.
   A classe "centered-paragraph" é usada para centralizar parágrafos.
   Para responsividade, as fontes dos títulos e parágrafos são reduzidas em telas menores.
*/

/* Fim dos estilos de alinhamento e responsividade para textos da aplicação */

/*Link WhatsApp para consultas*/
#whatsapp-consulta {
    display: inline-block;
    z-index: 1000;
    text-align: center;
    margin: 10px 0;
}

#whatsapp-consulta img {
    width: 150px; /* Tamanho reduzido do botão */
    height: auto;
    border-radius: 5px;
    max-width: 100%; /* Tornar a imagem responsiva */
}

/*Início dos botão de consulta*/
/* Encapsulamento dos botões na mesma linha */
.button-container {
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin-top: 20px; /* Espaçamento superior entre os botões */
    margin-bottom: 15px; /* Espaçamento inferior para garantir espaçamento extra */
    flex-wrap: wrap; /* Alinhar os botões verticalmente em telas menores */
}

/* Botões azuis no mesmo estilo do botão de contato */
/* Ajuste do alinhamento dos botões */
.blue-button {
    display: flex;
    align-items: center; /* Alinha o conteúdo verticalmente */
    justify-content: center; /* Alinha o conteúdo horizontalmente */
    padding: 15px 30px;
    background-color: #0033a0; /* Cor azul */
    color: white; /* Texto branco */
    border: none;
    border-radius: 10px; /* Bordas arredondadas */
    font-size: 21px;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    transition: background-color 0.3s ease;
    height: 100%; /* Garante que todos os botões tenham a mesma altura */
}

.blue-button:hover {
    background-color: #002080; /* Cor azul um pouco mais escura no hover */
    opacity: 0.9; /* Leve opacidade no hover */
}

/* Estilo do ícone de WhatsApp */
.blue-button img {
    width: 24px;
    height: auto;
    vertical-align: middle;
    margin-right: 10px; /* Espaçamento entre ícone e texto */
}

.red-button {
    display: flex;
    align-items: center; /* Alinha o conteúdo verticalmente */
    justify-content: center; /* Alinha o conteúdo horizontalmente */
    padding: 15px 30px;
    background-color: #a00000; /* Cor vermelha */
    color: white; /* Texto branco */
    border: none;
    border-radius: 10px; /* Bordas arredondadas */
    font-size: 21px;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    transition: background-color 0.3s ease;
    height: 100%; /* Garante que todos os botões tenham a mesma altura */
}

.red-button:hover {
    background-color: #800000; /* Cor vermelha um pouco mais escura no hover */
    opacity: 0.9; /* Leve opacidade no hover */
}

/* Responsividade para alinhar os botões em telas menores */
@media (max-width: 768px) {
    .button-container {
        flex-direction: column; /* Alinha os botões verticalmente em dispositivos móveis */
    }

    .blue-button {
        width: 100%; /* Botões ocupam toda a largura em telas menores */
        margin-bottom: 10px;
        margin-top: 10px; /* Espaçamento reduzido para telas pequenas */
    }

    .red-button {
        width: 100%; /* Botões ocupam toda a largura em telas menores */
        margin-bottom: 10px;
        margin-top: 10px; /* Espaçamento reduzido para telas pequenas */
    }
}

/*Fim dos botões de consulta*/

/*Início do calendário*/

/*CSS geral*/
h1, h2, h4 {
    margin-top: 40px; /* Espaço antes dos títulos */
    margin-bottom: 20px; /* Espaço depois dos títulos */
}

p {
    margin-bottom: 20px; /* Espaço depois dos parágrafos */
}

h3 {
    margin-top: 40px; /* Espaço antes dos títulos */
    text-align: center;
    margin-bottom: 20px;
}

/*Para links em parágrafos*/
.saiba-mais {
    color: #007bff; /* Cor padrão do link */
    text-decoration: none; /* Remove o sublinhado padrão */
    font-weight: bold; /* Deixa o link em negrito */
    transition: color 0.3s ease; /* Suaviza a transição da cor */
}

.saiba-mais:hover {
    color: #0056b3; /* Cor ao passar o mouse */
    text-decoration: underline; /* Adiciona o sublinhado ao passar o mouse */
}


.calendar-container {
    width: 100%;
    max-width: 380px;
    border-collapse: collapse;
    margin: 0 auto; /* Centraliza a tabela */
}

.calendar-header th {
    text-align: center;
    font-size: 12px;
    padding: 5px; /* Reduz o espaçamento */
    background-color: #f1f1f1;
    font-weight: bold;
}

.day-block {
    text-align: center;
    padding: 5px; /* Reduz o padding */
    border: 1px solid #ddd;
    font-size: 12px;
    background-color: #fafafa;
}

.day-block h4 {
    font-size: 10px; /* Reduz tamanho da data */
    text-transform: lowercase;
    margin-bottom: 5px; /* Reduz o espaço entre data e horários */
}

.time-slot {
    display: block;
    margin: 2px 0; /* Reduz a margem entre horários */
    padding: 5px;
    text-align: center;
    background-color: #4CAF50;
    color: white;
    text-decoration: none;
    border-radius: 3px; /* Reduz o arredondamento */
    font-size: 10px; /* Ajusta tamanho do texto */
}

.time-slot.disabled {
    background-color: #d9534f;
    pointer-events: none;
}

/* Ajustes de layout para dispositivos menores */
@media (max-width: 768px) {
    h3 {
        font-size: 16px; /* Reduz o tamanho do título em telas pequenas */
    }
    
    .calendar-container {
        width: 95%; /* Margens menores para caber em telas menores */
        margin: 0 auto;
    }

    .calendar-header th {
        font-size: 10px; /* Reduz o tamanho do texto dos dias da semana */
        padding: 3px; /* Reduz o espaçamento */
    }

    .day-block {
        padding: 3px; /* Reduz o padding dentro dos blocos de dias */
        font-size: 10px; /* Reduz o tamanho da fonte para os dias */
    }

    .time-slot {
        font-size: 9px; /* Reduz ainda mais o tamanho da fonte dos horários */
        padding: 3px; /* Ajusta o padding para horários */
    }
}
/*Fim calendário*/

/* Banner fora do contêiner genérico */
/* Estilo para o banner condicional */
#banner-container {
    width: 100vw; /* 100% da largura da tela */
    margin: 0; /* Remove margens */
    padding: 0; /* Remove padding */
    position: relative;
    overflow: hidden;
    height: 60vh; /* Define a altura do banner */
}

#banner-container img {
    width: 100%; /* O banner ocupa 100% da largura */
    height: 100%; /* Faz a imagem cobrir toda a altura do contêiner */
    max-height: 400px;
    object-fit: cover; /* Garante que a imagem se ajuste sem distorção */
    /*max-height: none;*/ /* Remove restrições de altura máxima */
}

#banner-text {
    position: absolute;
    bottom: 10%; /* Ajusta a posição do texto */
    left: 50%;
    transform: translateX(-50%);
    color: #121422; /* Cor para telas maiores */
    text-align: center;
    font-size: 2.5em;
    font-weight: bold;
    white-space: nowrap; /* Evita quebra de linha em telas grandes */
}

/* Ajustes responsivos para dispositivos móveis */
@media (max-width: 768px) {
    #banner-text {
        font-size: 1.2em;
        bottom: 10%; /* Ajuste de posição em telas menores */
        white-space: normal; /* Permite quebras de linha em telas pequenas */
        padding: 0 10px; /* Adiciona espaçamento nas laterais */
        color: #ffffff; /* Alterar a cor do texto para branco em telas menores */
    }
}
/*Fim do código*/


/* Estilo para o header */
.header {
    font-family: Georgia;
    background-color: #fcffff;
    color: rgb(13, 13, 13);
    padding: 1% 10%; /* Reduzir o espaço horizontal */
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    text-align: center; /* Centralizar texto no celular */
}

.header img {
    max-height: 70px; /* Mantendo a altura máxima do logo */
    margin-right: 10px; /* Espaço entre o logo e o nome */
}

.header h1 {
    margin: 0;
    font-weight: normal;
    font-size: 3em;
    display: flex;
    flex-direction: column;
    align-items: center;
}

@media (max-width: 768px) {
    .header {
        flex-direction: column; /* Colocar texto abaixo do logo */
        padding: 1% 5%;
    }

    .header img {
        margin-right: 0;
        margin-bottom: 10px; /* Espaço entre logo e texto */
    }

    .header h1 {
        font-size: 2em; /* Ajustar tamanho da fonte no celular */
        text-align: center;
    }
}

/* Ao clicar no logo redireciona para home */
.logo-link {
    display: inline-block;
}

.logo-link img {
    cursor: pointer;
}

/* Estilo para o menu de navegação */
.nav {
    background-color: #333;
    /* max-height: 51px; o menu hamburger não abria se tivesse limitação, por isso tem que alterar conf. tela*/
}

/* Aplicar max-height apenas em telas maiores */
@media (min-width: 768px) {
    .nav {
        max-height: 51px;
    }
}

.hamburger {
    display: none;
    font-size: 30px;
    color: white;
    padding: 14px 16px;
    cursor: pointer;
}

.nav ul {
    list-style-type: none;
    margin: 0;
    padding: 0; /* Ajustar padding */
    overflow: hidden;
    display: flex;
    justify-content: space-around; /* Distribui os itens proporcionalmente */
    width: 100%; /* Garante que o menu ocupe toda a largura */
}

.nav ul li {
    flex: 1; /* Faz com que cada item ocupe o mesmo espaço */
}

.nav ul li a {
    display: flex; /* Flexbox para garantir que o link ocupe toda a altura do item */
    align-items: center; /* Centralizar verticalmente */
    justify-content: center; /* Centralizar horizontalmente */
    color: white;
    text-align: center;
    padding: 14px 0; /* Ajustar o padding para garantir que o background cubra toda a área do link */
    text-decoration: none;
}

.nav ul li a:hover {
    background-color: #111;
}

/* Estilo para o conteúdo principal */
.main {
    margin: 20px;
    padding: 20px;
    flex: 1; /* Garantir que o conteúdo principal cresça */
}

/* Estilo para o footer */
.footer {
    background-color: #333; /* Cor de fundo do rodapé */
    color: white; /* Cor do texto */
    padding: 20px 0;
    text-align: left; /* Alinhar o texto à esquerda */
    width: 100%;
    position: relative; /* Permitir que o rodapé seja rolável */
    margin-top: auto; /* Empurrar o rodapé para o final da página */
}

/* Contêiner das colunas */
.footer-columns {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    max-width: 1200px;
    margin: 0 auto;
    align-items: flex-start; /* Alinhar as colunas no topo */
}

/* Estilo das listas de ícones */
.footer ul {
    list-style: none;
    padding: 0;
    margin: 10px 0;
}

/* Estilo dos itens de lista */
.footer li {
    margin: 10px 0;
}

/* Estilo dos links e ícones */
.footer a {
    text-decoration: none;
    color: white;
}

/* Estilo dos links e ícones ao passar o mouse */
.footer a:hover {
    color: #007BFF;
}

/* Estilo dos parágrafos no rodapé */
.footer .p {
    margin-top: 20px;
    margin: 10px auto; /* Centralizar o texto */
    text-align: center; /* Centralizar o texto */
}

/* Estilo das colunas */
.footer .column {
    flex: 1;
    min-width: 200px; /* Para responsividade */
}

/* Estilo responsivo */
@media (max-width: 767px) {
    .footer-columns {
        flex-direction: column;
        align-items: flex-start; /* Alinhar as colunas à esquerda em dispositivos móveis */
        margin-left: 3mm; /* Margem esquerda em dispositivos móveis */
        margin-right: 3mm; /* Margem esquerda em dispositivos móveis */
    }

    .footer .column {
        width: 100%;
    }

    .footer li {
        margin: 5px 0;
    }
}

/* Estilo para a barra branca no rodapé */
.bar {
    width: 90%;
    height: 2px; /* Altura fina */
    background-color: white; /* Cor de fundo branca */
    margin: 10px auto; /* Centralizar e adicionar espaço */
}

/* Estilo responsivo para menu */
@media screen and (max-width: 768px) {
    .nav ul {
        display: none;
        flex-direction: column;
        width: 100%;
    }

    .nav ul.show {
        display: flex;
    }

    .hamburger {
        display: block;
    }

    .nav ul li {
        flex: none;
    }

    .nav ul li a {
        text-align: left;
        padding: 10px 20px;
    }
}

/* Garantir que o rodapé fique no final da página */
body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    margin: 0;
}

body > * {
    flex: 1;
}

footer.footer {
    flex-shrink: 0;
    position: relative;
}

/*CSS e estilos encapsulados das páginas em geral*/
.generic-page-container {
    display: flex;
    justify-content: center;
    align-items: flex-start; /* Alinha o formulário ao topo, abaixo do header */
    min-height: 100vh; /* Mantém a altura mínima para a página */
    margin: 0;
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
    padding-top: 100px; /* Ajusta o espaço superior para evitar sobreposição com o header */
}

#genericForm {
    width: 100%;
    max-width: 1100px; /* Limita a largura máxima do formulário em dispositivos maiores */
    background-color: #fff;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    margin: 0 auto; /* Centraliza o formulário */
}

/* Aplica um recuo à esquerda nas listas ordenadas dentro do #genericForm - recuo nos termos de uso*/
#genericForm ol {
    margin-left: 20px; /* Ajuste o valor conforme necessário */
    padding-left: 20px; /* Adiciona mais espaçamento para o recuo */
}

/* Recuo adicional para os itens da lista dentro do #genericForm - recuo nos termos de uso*/
#genericForm ol li {
    margin-bottom: 10px; /* Espaçamento entre os itens */
    text-align: justify; /* Justifica o texto para melhorar a leitura */
}

/* Aplica um recuo à esquerda nas listas ordenadas dentro do #genericForm - recuo na política de privacidade*/
#genericForm ul {
    margin-left: 20px; /* Ajuste o valor conforme necessário */
    padding-left: 20px; /* Adiciona mais espaçamento para o recuo */
}

/* Recuo adicional para os itens da lista dentro do #genericForm - recuo na política de privacidade*/
#genericForm ul li {
    margin-bottom: 10px; /* Espaçamento entre os itens */
    text-align: justify; /* Justifica o texto para melhorar a leitura */
}

/* Encapsulando os estilos do formulário de contato */
.contact-page-container {
    display: flex;
    justify-content: center;
    align-items: flex-start; /* Alinha o formulário ao topo, abaixo do header */
    min-height: 100vh; /* Mantém a altura mínima para a página */
    margin: 0;
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
    padding-top: 100px; /* Ajusta o espaço superior para evitar sobreposição com o header */
}

#contactForm {
    width: 100%;
    max-width: 600px; /* Limita a largura máxima do formulário em dispositivos maiores */
    background-color: #fff;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    margin: 0 auto; /* Centraliza o formulário */
}

#contactForm label {
    display: block;
    margin-bottom: 10px;
    font-weight: bold;
    white-space: nowrap; /* Impede a quebra de linha automática */
}

#contactForm input, #contactForm textarea {
    width: 100%;
    padding: 15px;
    border: 1px solid #ccc;
    border-radius: 10px;
    margin-bottom: 20px;
    font-size: 16px;
    box-sizing: border-box;
    height: calc(1.5 * 1.5em);
}

#contactForm textarea {
    resize: vertical;
}

#contactForm button {
    background-color: #0033a0;
    color: white;
    border: none;
    padding: 15px 30px;
    border-radius: 10px;
    font-size: 16px;
    cursor: pointer;
    display: block;
    width: 100%;
    box-sizing: border-box;
}

/* Estilos para dispositivos maiores (PCs) */
@media (min-width: 769px) {
    #contactForm {
        width: 33.33%; /* Limita a largura do formulário a aproximadamente 1/3 da tela */
        max-width: 600px; /* Limita a largura máxima para evitar que fique muito largo em telas grandes */
        margin: 0 auto; /* Centraliza o formulário na página */
    }

    #contactForm label {
        text-align: left;
    }

    #contactForm input, #contactForm textarea, #contactForm button {
        width: 100%;
        margin-bottom: 10px;
    }
}

/* Estilos para dispositivos menores (telefones) */
@media (max-width: 480px) {
    #contactForm label {
        display: inline-block;
        width: 30%;
        text-align: left;
        vertical-align: middle;
        margin-bottom: 0;
        white-space: nowrap; /* Impede a quebra de linha automática */
    }

    #contactForm input, #contactForm textarea {
        width: 68%; /* Ajusta a largura do input */
        display: inline-block;
        vertical-align: middle;
    }

    #contactForm textarea {
        width: 100%;
        margin-top: 10px;
    }

    #contactForm button {
        width: 100%;
        margin-top: 10px;
        padding: 15px 0;
    }
}

/* Estilo base para o hCaptcha */
.h-captcha {
    width: 100%;
    max-width: 100%;
    transform: scale(0.75); /* Ajusta o tamanho para 75% do original */
    transform-origin: 0 0; /* Define o ponto de origem para a escala no canto superior esquerdo */
}

/* Ajustes para telas menores */
@media (max-width: 480px) {
    .h-captcha {
        transform: scale(0.85); /* Ajusta o tamanho para 85% do original em telas muito pequenas */
        transform-origin: 0 0; /* Mantém o ponto de origem no canto superior esquerdo */
    }
}

/*Checkbox de política de privacidade no formulário de contatos*/
/* Estilo do contêiner do checkbox de política de privacidade */
.privacy-policy-container {
    display: flex;
    align-items: center;
    margin-bottom: 1px; /* Margem inferior */
    font-size: 12px; /* Tamanho da fonte */
    flex-direction: row; /* Em telas grandes, texto ao lado do checkbox */
    text-align: left;
}

/* Estilo do checkbox */
#privacy_policy {
    margin-right: 0px; /* Espaçamento entre o checkbox e o texto */
    width: 10px; /* Tamanho do checkbox */
    height: 10px; /* Tamanho do checkbox */
    transform: scale(0.5); /* Reduz o tamanho do checkbox */
    transform-origin: top left; /* Alinha a transformação ao topo esquerdo */
    /* Adiciona uma margem negativa à esquerda do checkbox para puxá-lo mais próximo do texto */
    margin-left: -2px;
}

/* Estilo do texto do checkbox */
.privacy-policy-label {
    line-height: 1; /* Ajuste do espaçamento vertical do texto */
    margin: 0; /* Remove a margem para ajuste fino */
    padding: 0; /* Remove padding para alinhamento */
    /* Adiciona uma margem negativa à esquerda do texto para aproximá-lo do checkbox */
    margin-left: -4px;
}

.privacy-policy-label a {
    color: #0033a0; /* Cor do link */
    text-decoration: underline; /* Sublinha o link */
}

@media (max-width: 480px) {
    /* Ajustes para telas menores */
    .privacy-policy-container {
        flex-direction: column; /* Texto abaixo do checkbox em telas pequenas */
        align-items: flex-start; /* Alinha à esquerda em telas pequenas */
    }

    #privacy_policy {
        margin-bottom: 1px; /* Adiciona margem inferior ao checkbox */
        margin-left: 0; /* Remove a margem negativa em telas pequenas */
    }

    .privacy-policy-label {
        font-size: 10px; /* Reduz o tamanho do texto em telas pequenas */
        margin: 0; /* Remove margem */
        padding: 0; /* Remove padding */
        margin-left: 0; /* Remove a margem negativa em telas pequenas */
    }
}

/* Estilos para a foto do casal em dispositivos maiores - página sobre nós */
.responsive-image {
    width: 450px;
    height: auto;
    border-radius: 10px;
    margin-top: 20px;
}

/* Ajuste de largura para dispositivos móveis */
@media (max-width: 768px) {
    .responsive-image {
        width: 150px; /* Largura ajustada para celulares */
    }
}

/**INÍCIO DE CSS DO CAPTCHA PARA DESKTOP E MOBILE*/
/* --- desktop / tablets ------------------------------------------- */
.captcha-desktop{  display:block; }
.captcha-mobile{   display:none;  }     /* escondido */

/* --- telas ≤ 480 px ---------------------------------------------- */
@media (max-width:480px){
    .captcha-desktop{ display:none; }   /* esconde o normal   */
    .captcha-mobile{  display:block; }  /* mostra o compact   */

    /* aumenta 25 % p/ ~162 px */
    .captcha-mobile .h-captcha[data-size="compact"]{
        transform:scale(1.25);
        transform-origin:0 0;
    }

    /* evita corte após o scale()  */
    .captcha-mobile{ min-height:170px; }
}
/**FIM DE CSS DO CAPTCHA PARA DESKTOP E MOBILE*/


/* INÍCIO CÓDIGO DA ANDAMENTOS-VIEW - RESPONSIVO PARA CELULAR*/

 /* bloqueio simples de seleção/cópia */
 .no-copy{
    -webkit-user-select:none; -moz-user-select:none;
    -ms-user-select:none; user-select:none;
}
@media print{ body{ display:none; } }      /* desativa print */

/* ——————————————————— TABELA ——————————————————— */
/* wrapper p/ scroll horizontal - caso a caixa passe a tela ele esconde, sem passar por cima da tela  */
.table-wrapper{                 
    width:100%;
    overflow-x:auto;
}
.table-and{
    width:100%;
    min-height:140px;           /*altura mínima da caixa de texto */
    min-width:180px;            /* cria barra horizontal em telas estreitas  */
    border-collapse:collapse;   /* importante p/ não duplicar borda*/
    font-size:0.90em;           /* opcional: fonte um pouco menor */
}

/* bordas finas em TODO o grid                                 */
.table-and th,
.table-and td{
    border:1px solid #AAA;      /* bordas finas em todo o grid               */
    padding:6px 8px;
}
.table-and th{
    background:#f5f5f5;
    font-weight:600;
    text-align:left;
}

/* ajuste micro-layout ≤480 px (opcional)                      */
/* ajustes em telas muito estreitas */
@media (max-width:480px){
    .table-and th,
    .table-and td{
        font-size:0.78em;
        padding:4px 6px;
    }
    /* esconde a coluna “Últ. Atualização” */
    .col-updated{ display:none; }
}

/* altura vertical maior apenas para a caixa de perguntas */
.ask-box{
    min-height:140px;   /* ou 160 px / 180 px – ajuste a gosto               */
    resize: vertical;   /* o usuário ainda pode esticar para baixo se quiser */
}

/* em telas muito estreitas não muda nada,
   porque a largura continua 100 %            */

/* FIM CÓDIGO DA ANDAMENTOS-VIEW - RESPONSIVO PARA CELULAR*/

/*sala-de-espera - consultas agendadas*/
/* container geral do conteúdo */
#genericForms{
    max-width: 500px;
    margin: 0 auto;
    padding: 2rem 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    /*gap: 1.5rem; */
    gap: 0;            /* espaço uniforme entre título, texto, loading e botão */
}

/**Distância entre títulos */
/* título principal e subtítulo: espaço só aqui */
#genericForms h1
/*#genericsForm h2*/{
    margin: 0 0 .45rem;     /* 0 no topo, 0 nas laterais, ~6 px embaixo */
}

/* se quiser colar o h3 logo depois */
#genericForms h3{
    margin: 0 0 1rem;       /* mantém 1 rem antes do loading */
}

/* loading */ /* —— bloco de carregamento ——————————————— */
#loading-containers{
    display: flex;
    align-items: center;
    gap:.6rem;              /* espaço entre spinner e texto */
    font-size:1rem;           /* só texto; spinner ignora */
    margin-bottom:1.25rem;   /* ← espaço extra aqui */
}
/* —— spinner redondo ——————————————— */
#loading-spinners{
    width: 2.25em; /* ≅ 36 px em 16 px base      */
    aspect-ratio:1/1;       /* SEMPRE quadrado*/
    /* height: 1.5em; *//* era 22px, agora cresce/encolhe com a fonte */
    /* borda uniforme nos 4 lados */
    border: 4px solid #3498db; 
    /*border-top: 4px solid transparent; */
    border-top-color:transparent;

    border-radius: 50%; /* torna círculo */
    box-sizing:border-box;       /* garante borda dentro da caixa */

    animation: spin 1s linear infinite; /* era rotate e não spin */
    margin-right: 12px;
}
@keyframes spin{to{transform: rotate(360deg);}}

/* botão de sair com clique fácil */
.btns{
    margin-top: 1.5rem;      /* ↓ ajuste aqui o espaçamento desejado */
    padding: 0.8rem 1.4rem; /**tamanho do botão em volta do texto */
    font-size: 1rem;
    text-align: center;
    text-decoration: none;
    border-radius: 6px;
    background:#3498db;
    color:#fff;
    transition: filter .2s;
}
.btns:hover{ filter: brightness(1.1); }

/*FIM CSS SALA DE ESPERA*/