/* 1. Reset de margens e bloqueio de rolagem (Scroll) */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    width: 100vw; /* 100% da largura da tela */
    height: 100vh; /* 100% da altura da tela */
    overflow: hidden; /* PROÍBE a rolagem da página */

    /* 2. Forçando a fonte Calibri Negrito e Itálico */
    font-family: 'Calibri', sans-serif;
    font-weight: bold;
    font-style: italic;
}

/* 3. Configuração do Fundo e Alinhamento Central */
body {
    background-image: url('/static/fundo.png');
    background-size: cover; /* Faz o fundo cobrir a tela toda sem distorcer */
    background-position: center;
    background-repeat: no-repeat;

    /* Flexbox para centralizar tudo no meio da tela */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 8vh; /* Espaço entre o título e a caixa de botões */
}

/* 4. Estilo do Título Principal */
h1 {
    color: white;
    font-size: 5vw; /* Tamanho da fonte cresce junto com a tela */
    text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.4); /* Sombra para leitura */
    letter-spacing: 2px;
}

/* 5. Container dos Botões */
.botoes-container {
    display: flex;
    flex-direction: column;
    gap: 4vh; /* Espaço entre um botão e outro */
    width: 60%; /* Ocupa 60% da largura da tela */
    max-width: 900px; /* Limite máximo para telas ultrawide */
}

/* 6. Estilo Base dos Botões (Formato, Fonte e Sombra) */
button {
    font-family: 'Calibri', sans-serif;
    font-weight: bold;
    font-style: italic;
    font-size: 3vw; /* Fonte responsiva */
    padding: 4vh 2vw; /* Preenchimento interno responsivo */
    border: none;
    border-radius: 100px; /* Bordas totalmente redondas */
    cursor: pointer;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.25);
    transition: transform 0.1s, box-shadow 0.1s;
    width: 100%;
}

/* Efeito ao apertar o botão */
button:active {
    transform: scale(0.97);
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
}

/* 7. Cores Específicas de cada Botão */
.btn-iniciar {
    background-color: #56B4C6;
    color: white;
}

.btn-chamar {
    background-color: #C3CDDF;
    color: #1F4275;
}

/* --- NOVAS REGRAS PARA A TELA 2 --- */

/* Container para alinhar 3 botões lado a lado */
.botoes-linha-container {
    display: flex;
    flex-direction: row; /* Coloca os itens em linha */
    justify-content: center;
    align-items: stretch; /* Faz todos os botões terem a mesma altura */
    gap: 3vw; /* Espaço entre os botões */
    width: 85%; /* Largura total do bloco */
    max-width: 1400px;
    margin-bottom: 12vh; /* Espaço entre as 3 opções e o botão de baixo */
}

/* Ajustes específicos para os botões que estão lado a lado */
.botoes-linha-container button {
    flex: 1; /* Faz os 3 botões dividirem o espaço igualmente */
    font-size: 2.2vw; /* Letra um pouco menor para caber bem */
    padding: 3.5vh 1vw;
    line-height: 1.4; /* Espaçamento entre as linhas de texto (ex: CONSULTA CPF \n OU CNPJ) */
}

/* Modificador para o botão "Chamar Atendente" ficar menor na tela 2 */
.btn-chamar-inferior {
    width: 35%; /* Ocupa apenas 35% da tela */
    min-width: 300px;
    font-size: 2vw;
    padding: 2.5vh 1vw;
}

/* --- REGRAS PARA A TELA DE AVISO SPC --- */

/* Texto central de atenção */
.texto-aviso {
    color: white;
    font-size: 2.2vw; /* Estava 3.2vw, reduzimos bastante o tamanho */
    text-align: center;
    width: 75%; /* Aumentamos um pouco a largura para a frase caber melhor */
    line-height: 1.4;
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5);
}

/* Container que joga os botões para a parte inferior da tela */
.rodape-botoes {
    position: absolute; /* Prende o container na parte de baixo da tela */
    bottom: 6vh;
    width: 90%;
    display: flex;
    justify-content: space-between; /* Um botão de cada lado */
    align-items: flex-end; /* Alinha eles pela base */
}

/* Tamanho específico para o botão de chamar no rodapé */
.btn-rodape-chamar {
    width: 30%;
    font-size: 1.8vw;
    padding: 2.5vh 1vw;
}

/* Tamanho específico para o botão de continuar no rodapé */
.btn-rodape-continuar {
    width: 40%;
    font-size: 3vw;
    padding: 3vh 1vw;
    background-color: #55D4D2; /* Ciano mais claro conforme a imagem */
}

/* --- NAVEGAÇÃO SUPERIOR (Botões Redondos) --- */
.nav-topo {
    position: absolute;
    top: 4vh; /* Distância do topo */
    left: 4vw; /* Distância da esquerda */
    display: flex;
    gap: 2vw; /* Espaço entre os dois botões */
    z-index: 100;
}

.btn-nav-circular {
    width: 6vw; /* Largura redonda baseada na tela */
    height: 6vw;
    min-width: 70px;
    min-height: 70px;
    border-radius: 50%; /* Faz o botão ficar perfeitamente redondo */
    background-color: rgba(255, 255, 255, 0.2); /* Fundo branco levemente transparente */
    border: 3px solid white; /* Bordinha branca */
    color: white;
    font-size: 3.5vw; /* Tamanho do ícone */
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(5px); /* Efeito de vidro (blur) no fundo */
    padding: 0;
    transition: transform 0.1s;
}

.btn-nav-circular:active {
    transform: scale(0.9); /* Efeito de aperto no clique */
}


/* --- AJUSTES DA TELA DE AVISO --- */

/* Agrupa o título e o texto para podermos empurrar tudo para cima */
.bloco-aviso {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4vh;
    margin-top: -15vh; /* Puxa os textos bem mais para o alto da tela */
}

/* Modificações no botão de continuar para ficar MAIOR */
.btn-rodape-continuar {
    width: 60%; /* Ocupa bem mais espaço do rodapé */
    font-size: 3.5vw; /* Letra maior */
    padding: 4vh 1vw; /* Botão mais gordo */
    background-color: #55D4D2;
}

/* --- AJUSTES DO RODAPÉ (Tamanho dos botões) --- */
.btn-rodape-chamar {
    width: 30%;
    font-size: 1.8vw;
    padding: 2.5vh 1vw;
}

/* Aumentamos bastante o botão Continuar */
.btn-rodape-continuar {
    width: 48%; /* Mais largo */
    font-size: 3.5vw; /* Letra maior */
    padding: 3.5vh 1vw; /* Botão mais alto/gordo */
    background-color: #55D4D2;
}

/* --- TELA SPC PASSO 1 --- */

.bloco-passo {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2vh;
    margin-top: -12vh; /* Altura ideal na tela */
    width: 100%;
}

.subtitulo-passo {
    color: white;
    font-size: 2.8vw; /* Fonte um pouquinho maior */
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5);
    margin-bottom: 0.5vh; /* Menos espaço entre o subtítulo e o banner */
    letter-spacing: 1px;
}

/* O Retângulo Azul Central */
.banner-app {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    background-color: #3AA3FF;
    border-radius: 35px;
    padding: 1.5vh 1.5vw; /* Menos padding vertical = banner mais "magro" */
    width: 72%;
    max-width: 950px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
}

/* Caixa Branca do QR Code */
.qr-container {
    background-color: white;
    padding: 0.3vw; /* Borda branca bem fininha, igual a foto */
    border-radius: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 23%;
}

.qr-container img {
    width: 95%;
    height: auto;
}

/* Coluna de Texto no Meio */
.texto-banner {
    color: white;
    font-size: 2vw; /* Letra maior para preencher o banner */
    line-height: 1.35; /* Linhas mais juntinhas */
    text-align: left;
    flex: 1;
    padding: 0 1vw 0 2vw;
}

/* O Segredo da Câmera: line-height zero para não quebrar a linha! */
.icone-camera {
    display: inline-block;
    font-size: 3.5vw;
    line-height: 0; /* Impede que o emoji empurre a linha de baixo */
    position: relative;
    top: -0.8vh; /* Dá aquela subidinha charmosa */
    margin-left: 0.5vw;
    transform: rotate(15deg);
    text-shadow: 2px 2px 5px rgba(0,0,0,0.3);
}

/* Logo do App à Direita */
.logo-container {
    width: 23%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.logo-container img {
    width: 100%;
    border-radius: 20px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
} /* <--- AQUI ESTAVA O ERRO (Tinha dois }}) */

/* --- ESTILO PARA AS IMAGENS TRANSPARENTES DOS PASSOS (spc10 ao spc30) --- */
.imagem-passo-container {
    width: 50vw;
    height: 45vh;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 4vh;
}

/* --- MODAL / POPUP CUSTOMIZADO DE AVISO --- */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(5px); /* Efeito de vidro desfocado no fundo */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000; /* Fica acima de TUDO na tela */

    /* Escondido por padrão, mas pronto para animar */
    visibility: hidden;
    opacity: 0;
    transition: visibility 0s, opacity 0.3s ease-in-out;
}

/* Classe que o JavaScript vai adicionar para mostrar o popup */
.modal-overlay.ativo {
    visibility: visible;
    opacity: 1;
}

.modal-box {
    background-color: white;
    padding: 5vh 4vw;
    border-radius: 30px;
    text-align: center;
    width: 50%; /* Tamanho confortável na tela */
    max-width: 600px;
    box-shadow: 0 15px 30px rgba(0,0,0,0.4);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2vh;
}

.modal-box i {
    font-size: 6vw; /* Ícone gigante */
}

.modal-box i.sucesso { color: #4CAF50; /* Verde */ }
.modal-box i.erro { color: #F44336; /* Vermelho */ }

.modal-box h2 {
    color: #1F4275; /* Azul Escuro CDL */
    font-size: 3vw;
    text-shadow: none; /* Tira a sombra padrão dos textos */
    margin: 0;
}

.modal-box p {
    color: #555;
    font-size: 2vw;
    font-weight: normal;
    line-height: 1.4;
}

.btn-fechar-modal {
    background-color: #56B4C6;
    color: white;
    font-size: 2vw;
    padding: 2.5vh 5vw;
    margin-top: 2vh;
    width: auto;
}

.imagem-passo-container img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}}