/* ==========================================================================
   CONFIGURAÇÕES GLOBAIS E VARIÁVEIS
   ========================================================================== */
:root {
    --gradiente-neon: linear-gradient(135deg, #00e676 0%, #00b0ff 50%, #80d8ff 100%);
    --azul-marinho: #00254d;
    --azul-institucional: #0056b3;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background-color: var(--bg);
    color: var(--text-main);
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* ==========================================================================
   BARRA SUPERIOR LIMPA E HEADER COM BACKGROUND PATTERN
   ========================================================================== */

.barra-acessibilidade-nova {
    background: #ffffff; /* Fundo branco sólido para destacar balsa/clima */
    padding: 12px 20px;
    width: 100%;
    position: relative;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    z-index: 10;
}

.alertas-topo-centralizados {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    font-weight: 600;
    color: var(--azul-marinho);
    font-size: 0.95rem;
}

.main-header-imersivo {
    position: relative;
    background: #005281 url('https://www.ilhacomprida.sp.gov.br/Arquitetura/Imagens/pattern.jpg') repeat-x top center;
    background-size: auto 110px;
    padding: 120px 20px 60px 20px; /* Reduzi um pouco o padding inferior */
    text-align: center;
    overflow: hidden;
    z-index: 1;
    margin-bottom: 0; /* Garante que o cabeçalho não empurre nada para baixo */
}

/* Ajuste no container que vem logo após o header */
.container-cards-home, 
.grid-servicos { 
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
    gap: 25px;
    max-width: 1200px;
    margin: 0 auto; /* Zerou a margem superior (antes era 40px) */
    padding: 40px 20px; /* Transfere o espaçamento para o padding interno */
    box-sizing: border-box;
}

/* Título em branco com sombra para máxima leitura */
.header-conteudo-premium h1 {
    font-size: 2.8rem;
    color: #ffffff;
    margin-bottom: 8px;
    font-weight: 800;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

/* Subtítulo em branco nítido */
.header-conteudo-premium p,
.subtitulo-header-preto {
    color: #ffffff;
    font-weight: 600;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.brasao-background {
    position: absolute;
    top: 55%; /* Centraliza mais abaixo da faixa de ondas */
    left: 50%;
    transform: translate(-50%, -50%);
    background: url('https://www.ilhacomprida.sp.gov.br/Arquitetura/Imagens/ilha-brasao.png') no-repeat center center;
    background-size: contain;
    width: 280px;
    height: 280px;
    opacity: 1; /* Restaurado para total visibilidade, sem sumir */
    z-index: -1; 
    pointer-events: none;
    /* Adiciona um filtro leve para o brasão brilhar e se destacar do azul escuro atrás */
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.35));
}

.header-conteudo-premium {
    position: relative;
    max-width: 700px;
    margin: 0 auto;
    z-index: 2; 
}

.header-conteudo-premium h1 {
    font-size: 2.8rem;
    color: var(--azul-marinho);
    margin-bottom: 8px;
    font-weight: 800;
}

.header-conteudo-premium p {
    color: #64748b;
    font-size: 1.1rem;
}

/* Caixa de Busca com Efeito Neon */
.busca-container-neon {
    background: #ffffff;
    max-width: 600px;
    margin: 30px auto 0 auto;
    border-radius: 50px;
    padding: 6px 24px;
    display: flex;
    align-items: center;
    gap: 15px;
    box-shadow: 0 10px 30px rgba(0, 37, 77, 0.1);
    border: 3px solid transparent;
    background-image: linear-gradient(#fff, #fff), var(--gradiente-neon);
    background-origin: border-box;
    background-clip: padding-box, border-box;
    transition: all 0.3s ease;
}

.busca-container-neon:focus-within {
    transform: translateY(-2px);
    box-shadow: 0 12px 35px rgba(0, 176, 255, 0.25);
}

.icone-busca {
    color: #00b0ff;
    font-size: 1.2rem;
}

.busca-container-neon input {
    border: none;
    outline: none;
    width: 100%;
    font-size: 1.05rem;
    color: var(--azul-marinho);
    font-weight: 500;
    background: transparent;
}

/* ==========================================================================
   CONSERTO DOS CARDS ATALHOS (GRID E ESTILO PREMIUM)
   ========================================================================== */
.container-cards-home, .grid-servicos { 
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
    gap: 25px;
    max-width: 1200px;
    margin: 40px auto;
    padding: 0 20px;
}

.card-atalho {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    background: #ffffff;
    padding: 30px 25px;
    border-radius: 22px;
    text-decoration: none;
    color: #334155;
    position: relative;
    z-index: 1;
    box-sizing: border-box;
    border: 3px solid transparent;
    background-image: linear-gradient(#fff, #fff), linear-gradient(135deg, rgba(0,230,118,0.2), rgba(0,176,255,0.2));
    background-origin: border-box;
    background-clip: padding-box, border-box;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* Sombra e Efeito Hover com Animação Suave nos Cards */
.premium-shadow {
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04), 0 1px 3px rgba(0, 0, 0, 0.01);
}

.card-atalho:hover {
    transform: translateY(-6px);
    background-image: linear-gradient(#fff, #fff), var(--gradiente-neon);
    box-shadow: 0 18px 35px rgba(0, 176, 255, 0.15);
}

.card-atalho span {
    font-size: 2.3rem;
    margin-bottom: 12px;
    display: block;
}

.card-atalho h3 {
    margin: 0 0 8px 0;
    font-size: 1.3rem;
    color: var(--azul-institucional); 
    font-weight: 700;
}

.card-atalho p {
    margin: 0;
    font-size: 0.95rem;
    color: #64748b;
    line-height: 1.5;
}

/* ==========================================================================
   CARDS DESTAQUES COM ANIMAÇÃO DE IMAGEM DE FUNDO (SLIDESHOW)
   ========================================================================== */
.card-destaque-ilha {
    position: relative;
    border-radius: 0px;
    padding: 90px 20px;
    text-align: center;
    overflow: hidden;
    z-index: 1;
    margin: 40px 0;
    max-width: none;
    background: #001f3f;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
}

/* Camada da primeira imagem de fundo */
.card-destaque-ilha::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(rgba(0, 31, 63, 0.45), rgba(0, 31, 63, 0.7)), 
                url('https://ecrie.com.br/sistema/conteudos/imagem/g_38_1_1_21012025093140.jpg') center/cover no-repeat;
    z-index: -2;
}

/* Camada da segunda imagem animada que esmaece (Fade) */
.card-destaque-ilha::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(rgba(0, 31, 63, 0.45), rgba(0, 31, 63, 0.7)), 
                url('https://ecrie.com.br/sistema/conteudos/imagem/g_38_0_1_28012025123106.jpg') center/cover no-repeat;
    z-index: -1;
    animation: alternarImagens 8s ease-in-out infinite;
}

@keyframes alternarImagens {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

.tag-tropical, .tag-evento {
    background: #ffd700;
    color: #00254d;
    padding: 6px 14px;
    border-radius: 50px;
    font-weight: bold;
    font-size: 0.85rem;
    display: inline-block;
    margin-bottom: 15px;
}

.destaque-conteudo {
    position: relative;
    z-index: 10;
}

.destaque-conteudo h2 {
    color: #ffffff;
    font-size: 2rem;
    margin-bottom: 10px;
}

.destaque-conteudo p {
    color: #f1f5f9;
    max-width: 800px;
    margin: 0 auto 20px auto;
    font-size: 1.05rem;
    line-height: 1.6;
}

/* Card Intermediário (Cultura Caiçara) */
.card-destaque-intermediario {
    position: relative;
    border-radius: 0px;
    padding: 70px 40px;
    color: #ffffff;
    margin: 40px auto;
    max-width: none;
    overflow: hidden;
    background: linear-gradient(rgba(0,31,63,0.5), rgba(0,31,63,0.8)), 
                url('https://www.viagensecaminhos.com/wp-content/uploads/2024/03/ilha-comprida.jpg') center/cover no-repeat;
    text-align: center;

    background-attachment: fixed;
}

.btn-conhecer {
    display: inline-block;
    background: #ffffff;
    color: var(--azul-marinho);
    padding: 12px 28px;
    border-radius: 50px;
    font-weight: bold;
    text-decoration: none;
    margin-top: 15px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.btn-conhecer:hover {
    transform: scale(1.05);
    box-shadow: 0 10px 20px rgba(255,255,255,0.2);
}

/* ==========================================================================
   SECRETARIAS E SEÇÃO INFERIOR
   ========================================================================== */
.grid-todas-secretarias {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    max-width: 1200px;
    margin: 25px auto;
    padding: 0 20px;
}

.card-secretaria-premium {
    background: #ffffff;
    border-radius: 24px;
    padding: 30px 24px;
    text-align: center;
    text-decoration: none;
    color: #334155;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    border: 1px solid #e2e8f0;
    transition: all 0.3s ease;
}

.card-secretaria-premium:hover {
    transform: translateY(-4px);
    border-color: #00b0ff;
    box-shadow: 0 12px 25px rgba(0, 176, 255, 0.1);
}

.wrapper-svg {
    width: 65px;
    height: 65px;
    background: #f0fdf4;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 14px;
    margin-bottom: 12px;
}

.wrapper-svg svg {
    width: 100%;
    height: 100%;
}

/* ==========================================================================
   FOOTER INSTITUCIONAL
   ========================================================================== */
.main-footer {
    background-color: var(--azul-marinho);
    color: #ffffff;
    padding: 50px 20px 30px 20px;
    margin-top: 60px;
}

.emergencia-rapida h3 {
    text-align: center;
    font-size: 1.2rem;
    margin-bottom: 20px;
}

.botoes-ligar {
    display: flex;
    justify-content: center;
    gap: 15px;
    flex-wrap: wrap;
}

.btn-tel {
    background: rgba(255,255,255,0.1);
    color: #fff;
    text-decoration: none;
    padding: 12px 24px;
    border-radius: 8px;
    font-weight: 600;
    transition: background 0.2s;
}

.btn-tel.emergencia {
    background: #dc2626;
}

.btn-tel:hover {
    background: rgba(255,255,255,0.2);
}

.btn-tel.emergencia:hover {
    background: #b91c1c;
}

.footer-institucional {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    max-width: 1200px;
    margin: 40px auto 0 auto;
    flex-wrap: wrap;
    gap: 30px;
}

.icones-redes a {
    color: #fff;
    font-size: 1.3rem;
    margin-right: 15px;
    opacity: 0.8;
    transition: opacity 0.2s;
}

.icones-redes a:hover {
    opacity: 1;
}

/* ==========================================================================
   ESTILIZAÇÃO DOS MÓDULOS E PÁGINAS INTERNAS
   ========================================================================== */

/* Container Principal das Páginas Internas */
.container-interno {
    max-width: 900px;
    margin: 40px auto;
    padding: 30px;
    background: #ffffff;
    border-radius: 20px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
}

/* Títulos Internos Dinâmicos */
.container-interno h2, 
.container-interno h1 {
    font-size: 1.8rem;
    color: var(--azul-marinho, #00254d);
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.container-interno p {
    color: #64748b;
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 25px;
}

/* Formulários e Inputs Modernizados */
.grupo-formulario {
    margin-bottom: 20px;
}

.grupo-formulario label {
    display: block;
    font-weight: 600;
    color: #334155;
    margin-bottom: 8px;
    font-size: 0.95rem;
}

.container-interno input[type="text"],
.container-interno input[type="number"],
.container-interno select {
    width: 100%;
    max-width: 400px;
    padding: 12px 16px;
    border: 2px solid #e2e8f0;
    border-radius: 10px;
    font-size: 1rem;
    color: #334155;
    outline: none;
    transition: all 0.2s ease;
}

.container-interno input:focus {
    border-color: #00b0ff;
    box-shadow: 0 0 0 3px rgba(0, 176, 255, 0.15);
}

/* Botões Modernos e Alinhados */
.container-interno button,
.btn-modulo {
    background: #0056b3;
    color: #ffffff;
    border: none;
    padding: 12px 24px;
    font-size: 1rem;
    font-weight: 600;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.container-interno button:hover {
    background: #004085;
    transform: translateY(-1px);
}

/* Seções de Resultado (Ex: Parcela Única / PIX) */
.resultado-busca {
    margin-top: 30px;
    padding: 20px;
    background: #f8fafc;
    border-left: 4px solid #00e676;
    border-radius: 0 12px 12px 0;
}

.resultado-busca h3 {
    color: #1e293b;
    font-size: 1.2rem;
    margin-bottom: 12px;
}

/* Container do QR Code Pix */
.box-qrcode {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
    margin-top: 20px;
    padding: 20px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    max-width: 320px;
}

.box-qrcode img {
    width: 100%;
    max-width: 200px;
    height: auto;
    border-radius: 8px;
}

/* Código "Copia e Cola" Input */
.input-copia-cola {
    display: flex;
    gap: 8px;
    width: 100%;
}

.input-copia-cola input {
    background: #f1f5f9;
    border: 1px solid #cbd5e1;
    font-family: monospace;
    font-size: 0.9rem;
    padding: 8px;
}
/* ==========================================================================
   REVITALIZAÇÃO COMPLETA DOS MÓDULOS INTERNOS & IPTU/PIX PREMIUM
   ========================================================================== */

/* Container Principal das Páginas Internas */
.container-interno {
    max-width: 1000px;
    margin: 40px auto;
    padding: 40px;
    background: #ffffff;
    border-radius: 24px;
    box-shadow: 0 15px 35px rgba(0, 37, 77, 0.04), 0 1px 3px rgba(0, 0, 0, 0.01);
    font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

/* Cabeçalhos dos Módulos */
.container-interno h1 {
    font-size: 2.1rem;
    color: #00254d; /* Azul Marinho Corporativo */
    font-weight: 800;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 12px;
    letter-spacing: -0.5px;
}

.container-interno > p {
    color: #64748b;
    font-size: 1.05rem;
    line-height: 1.6;
    margin-bottom: 35px;
}

/* Estrutura do Formulário Modernizado */
.grupo-formulario {
    background: #f8fafc;
    padding: 25px;
    border-radius: 18px;
    border: 1px solid #e2e8f0;
    margin-bottom: 30px;
}

.grupo-formulario label {
    display: block;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 10px;
    font-size: 0.95rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Área de Input e Botão Alinhados Modernos */
.input-com-botao {
    display: flex;
    gap: 12px;
    max-width: 600px;
    width: 100%;
}

.container-interno input[type="text"],
.container-interno input[type="number"] {
    flex: 1;
    padding: 14px 18px;
    border: 2px solid #cbd5e1;
    border-radius: 12px;
    font-size: 1.05rem;
    color: #334155;
    font-weight: 500;
    outline: none;
    background: #ffffff;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.container-interno input[type="text"]:focus {
    border-color: #00b0ff;
    box-shadow: 0 0 0 4px rgba(0, 176, 255, 0.15);
    background: #ffffff;
}

/* Botões Estilo Premium App */
.container-interno button,
.btn-modulo-premium {
    background: #0056b3;
    color: #ffffff;
    border: none;
    padding: 14px 28px;
    font-size: 1rem;
    font-weight: 700;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-shadow: 0 4px 12px rgba(0, 86, 179, 0.2);
}

.container-interno button:hover {
    background: #00254d;
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(0, 37, 77, 0.3);
}

/* Dashboard de Resultados (Ex: Cota Encontrada) */
.resultado-busca-premium {
    margin-top: 35px;
    padding: 30px;
    background: #ffffff;
    border-radius: 20px;
    border: 2px solid transparent;
    background-image: linear-gradient(#fff, #fff), linear-gradient(135deg, #00e676 0%, #00b0ff 100%);
    background-origin: border-box;
    background-clip: padding-box, border-box;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.02);
}

.resultado-busca-premium h2 {
    color: #00254d;
    font-size: 1.4rem;
    font-weight: 700;
    margin-bottom: 20px;
    border-bottom: 1px solid #f1f5f9;
    padding-bottom: 12px;
}

.info-linha {
    display: flex;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px dashed #e2e8f0;
    font-size: 1.05rem;
}

.info-linha:last-of-type {
    border-bottom: none;
    margin-bottom: 20px;
}

.info-linha span.label {
    color: #64748b;
    font-weight: 500;
}

.info-linha span.valor {
    color: #1e293b;
    font-weight: 700;
}

.info-linha span.valor.desconto {
    color: #00c853;
    background: #e8f5e9;
    padding: 2px 10px;
    border-radius: 6px;
}

/* Área de Pagamento Pix Inovadora */
.caixa-pagamento-pix {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 25px;
    margin-top: 25px;
    display: flex;
    gap: 30px;
    align-items: center;
}

.pix-titulo-status {
    color: #00254d;
    font-weight: 700;
    font-size: 1.1rem;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.pix-instrucao {
    color: #64748b;
    font-size: 0.95rem;
    line-height: 1.5;
    margin-bottom: 15px;
}

.qrcode-wrapper {
    background: #ffffff;
    padding: 12px;
    border-radius: 14px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.03);
    border: 1px solid #e2e8f0;
    flex-shrink: 0;
}

.qrcode-wrapper img {
    display: block;
    width: 160px;
    height: 160px;
    object-fit: contain;
}

/* Input Copia e Cola Estilo Moderno */
.copia-cola-container {
    display: flex;
    gap: 8px;
    width: 100%;
    max-width: 450px;
}

.copia-cola-container input {
    background: #f1f5f9;
    border: 1px solid #cbd5e1;
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.9rem;
    font-weight: bold;
    color: #475569;
    flex: 1;
    padding: 10px 14px;
    border-radius: 10px;
}

.btn-copiar {
    background: #475569;
    padding: 10px 18px;
    font-size: 0.9rem;
    box-shadow: none;
}

.btn-copiar:hover {
    background: #1e293b;
}

/* Responsividade para Telas Menores (Celular) */
@media (max-width: 768px) {
    .container-interno {
        margin: 15px;
        padding: 20px;
    }
    .input-com-botao {
        flex-direction: column;
    }
    .caixa-pagamento-pix {
        flex-direction: column;
        text-align: center;
        gap: 20px;
    }
    .copia-cola-container {
        flex-direction: column;
    }
}

.container-modulo-premium {
    max-width: 1000px;
    margin: 40px auto;
    padding: 40px;
    background: #ffffff;
    border-radius: 24px;
    box-shadow: 0 15px 35px rgba(0, 37, 77, 0.04);
    font-family: system-ui, -apple-system, sans-serif;
}

.container-modulo-premium h1 {
    font-size: 2.2rem;
    color: #00254d;
    font-weight: 800;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.container-modulo-premium > p {
    color: #64748b;
    font-size: 1.05rem;
    margin-bottom: 35px;
}

/* Formulários e Inputs */
.campo-formulario-premium {
    background: #f8fafc;
    padding: 25px;
    border-radius: 18px;
    border: 1px solid #e2e8f0;
    margin-bottom: 25px;
}

.campo-formulario-premium label {
    display: block;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 10px;
    text-transform: uppercase;
    font-size: 0.85rem;
    letter-spacing: 0.5px;
}

.container-modulo-premium input[type="text"],
.container-modulo-premium select {
    width: 100%;
    max-width: 500px;
    padding: 14px 18px;
    border: 2px solid #cbd5e1;
    border-radius: 12px;
    font-size: 1rem;
    outline: none;
    transition: all 0.2s ease;
}

.container-modulo-premium input:focus,
.container-modulo-premium select:focus {
    border-color: #00b0ff;
    box-shadow: 0 0 0 4px rgba(0, 176, 255, 0.15);
}

/* Botões do Sistema */
.container-modulo-premium button,
.btn-premium-sistema {
    background: #0056b3;
    color: #ffffff;
    border: none;
    padding: 14px 28px;
    font-size: 1rem;
    font-weight: 700;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.container-modulo-premium button:hover {
    background: #00254d;
    transform: translateY(-2px);
}

/* Tabelas Elegantes (Uso: Horários de Ônibus / Taxas) */
.tabela-responsiva-premium {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0,0,0,0.02);
}

.tabela-responsiva-premium th {
    background: #00254d;
    color: #ffffff;
    text-align: left;
    padding: 16px;
    font-weight: 600;
}

.tabela-responsiva-premium td {
    padding: 16px;
    border-bottom: 1px solid #e2e8f0;
    color: #334155;
    font-size: 0.95rem;
}

.tabela-responsiva-premium tr:hover {
    background: #f8fafc;
}

/* Cards de Listagem (Uso: Empregos, Projetos, Eventos) */
.grid-cards-internos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
}

.card-informativo-interno {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 25px;
    transition: all 0.2s ease;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.card-informativo-interno:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 24px rgba(0,37,77,0.06);
    border-color: #cbd5e1;
}

.card-informativo-interno h3 {
    color: #00254d;
    font-size: 1.25rem;
    margin-bottom: 10px;
}

.badge-modulo {
    display: inline-block;
    padding: 4px 12px;
    background: #e0f2fe;
    color: #0369a1;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 700;
    margin-bottom: 15px;
    width: fit-content;
}

/* Bloco Pix Especial */
.painel-pix-premium {
    background: #f8fafc;
    border: 2px solid #00e676;
    border-radius: 16px;
    padding: 25px;
    margin-top: 25px;
    display: flex;
    gap: 25px;
    align-items: center;
}
.qr-code-box img {
    width: 140px;
    background: #fff;
    padding: 8px;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
}

/* ==========================================================================
   SISTEMA DE DESIGN ECOSSISTEMA URBANO (MOBILE-FIRST)
   ========================================================================== */

/* Regras Globais para as Telas Internas */
.modulo-body-premium {
    background-color: #f8fafc;
    margin: 0;
    padding: 0;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* Container Principal - Foco Mobile (Preenche quase toda a largura) */
.container-modulo-premium {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    padding: 24px 16px;
    box-sizing: border-box;
}

/* Topo do Módulo: Título e Descrição */
.modulo-header-premium {
    margin-bottom: 24px;
}

.modulo-header-premium h1 {
    font-size: 1.8rem;
    color: #00254d;
    font-weight: 800;
    margin: 0 0 8px 0;
    display: flex;
    align-items: center;
    gap: 10px;
    letter-spacing: -0.5px;
}

.modulo-header-premium p {
    color: #64748b;
    font-size: 0.95rem;
    line-height: 1.5;
    margin: 0;
}

/* Componentes de Formulário (Inputs e Filtros) */
.campo-formulario-premium {
    background: #ffffff;
    padding: 20px;
    border-radius: 16px;
    border: 1px solid #e2e8f0;
    margin-bottom: 20px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.02);
}

.campo-formulario-premium label {
    display: block;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 8px;
    text-transform: uppercase;
    font-size: 0.8rem;
    letter-spacing: 0.5px;
}

.grupo-input-botao {
    display: flex;
    flex-direction: column; /* Empilhado no Mobile */
    gap: 12px;
}

.container-modulo-premium input[type="text"],
.container-modulo-premium select {
    width: 100%;
    padding: 14px 16px;
    border: 2px solid #cbd5e1;
    border-radius: 12px;
    font-size: 1rem;
    outline: none;
    background: #ffffff;
    box-sizing: border-box;
    transition: all 0.2s ease;
}

.container-modulo-premium input:focus,
.container-modulo-premium select:focus {
    border-color: #00b0ff;
    box-shadow: 0 0 0 4px rgba(0, 176, 255, 0.12);
}

/* Botões Robustos (Fáceis de clicar no celular) */
.container-modulo-premium button,
.btn-premium-sistema {
    width: 100%; /* Ocupa tudo no celular */
    background: #0056b3;
    color: #ffffff;
    border: none;
    padding: 14px 24px;
    font-size: 1rem;
    font-weight: 700;
    border-radius: 12px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: background 0.2s;
}

.container-modulo-premium button:hover {
    background: #00254d;
}

/* Grid de Informações e Cartões (Mobile: 1 coluna fixa) */
.grid-cards-internos {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Cartões de Conteúdo (Uso geral: Empregos, Ônibus, Meio Ambiente) */
.card-informativo-interno {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 20px;
    box-sizing: border-box;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.01);
}

.card-informativo-interno h3 {
    color: #00254d;
    font-size: 1.2rem;
    margin: 0 0 8px 0;
}

.card-informativo-interno p {
    color: #64748b;
    font-size: 0.9rem;
    line-height: 1.5;
    margin: 0 0 16px 0;
}

.badge-modulo {
    display: inline-block;
    padding: 4px 10px;
    background: #e0f2fe;
    color: #0369a1;
    border-radius: 8px;
    font-size: 0.75rem;
    font-weight: 700;
    margin-bottom: 12px;
}

/* Bloco Pix Especial Responsivo */
.painel-pix-premium {
    background: #ffffff;
    border: 2px solid #00e676;
    border-radius: 16px;
    padding: 20px;
    margin-top: 20px;
    display: flex;
    flex-direction: column; /* Empilha no mobile */
    align-items: center;
    text-align: center;
    gap: 20px;
}

.qr-code-box img {
    width: 150px;
    height: 150px;
    background: #fff;
    padding: 8px;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
}

/* Linhas de Dados de Ônibus ou Horários no Celular */
.linha-horario-mobile {
    display: flex;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px dashed #e2e8f0;
    font-size: 0.95rem;
}
.linha-horario-mobile:last-child {
    border-bottom: none;
}

/* ==========================================================================
   MEDIA QUERIES (Layout Desktop - Telas maiores que 768px)
   ========================================================================== */
@media (min-width: 768px) {
    .container-modulo-premium {
        padding: 40px 24px;
    }
    
    .modulo-header-premium h1 {
        font-size: 2.2rem;
    }

    .grupo-input-botao {
        flex-direction: row; /* Lado a lado no computador */
    }

    .container-modulo-premium input[type="text"] {
        flex: 1; /* Input estica para ocupar o espaço */
    }

    .container-modulo-premium button {
        width: auto; /* Botão fica com seu tamanho natural */
    }

    .grid-cards-internos {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); /* Organiza em colunas no PC */
        gap: 20px;
    }

    .painel-pix-premium {
        flex-direction: row; /* Lado a lado no computador */
        text-align: left;
    }
}

/* ==========================================================================
   IDENTIDADES EXCLUSIVAS: APP PIX/SERVIÇOS vs GUIA DE PRAIA
   ========================================================================== */

/* --- TELA: SERVICOS.HTML (Estilo App de Banco / Pix Rápido) --- */
.bg-servicos-pix {
    background: linear-gradient(135deg, #f0fdf4 0%, #e0f2fe 100%); /* Fundo suave verde/azul */
}

.card-maquininha-pix {
    background: #ffffff;
    border: 2px solid #00e676;
    border-radius: 24px;
    padding: 24px;
    box-shadow: 0 20px 40px rgba(0, 230, 118, 0.08);
    text-align: center;
}

.status-pagamento-badge {
    background: #00e676;
    color: #00254d;
    font-weight: 800;
    font-size: 0.85rem;
    padding: 6px 14px;
    border-radius: 20px;
    display: inline-block;
    margin-bottom: 16px;
}

.valor-pix-destaque {
    font-size: 2rem;
    font-weight: 800;
    color: #00254d;
    margin: 12px 0;
}

/* --- TELA: GUIA DE PRAIA (Estilo Verão / Natureza / Turismo) --- */
.bg-guia-praia {
    background: linear-gradient(135deg, #fffbeb 0%, #f0fdfa 100%); /* Tons de areia e mar azul-piscina */
}

.header-praia h1 {
    color: #0369a1; /* Azul Oceano */
}

.card-praia-status {
    background: #ffffff;
    border-radius: 20px;
    border-left: 8px solid #06b6d4; /* Detalhe em ciano */
    padding: 20px;
    box-shadow: 0 10px 25px rgba(6, 182, 212, 0.05);
}

.badge-balneabilidade {
    padding: 6px 12px;
    border-radius: 8px;
    font-weight: 700;
    font-size: 0.85rem;
    display: inline-block;
}
.badge-propria { background: #dcfce7; color: #15803d; }
.badge-impropria { background: #fee2e2; color: #b91c1c; }

.info-clima-mar {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 15px;
    background: #f0fdfa;
    padding: 12px;
    border-radius: 12px;
}

/* ==========================================================================
   BOTÃO VOLTAR PREMIUM (ACESSIBILIDADE E NAVEGAÇÃO)
   ========================================================================== */

.btn-voltar-container {
    margin-bottom: 20px;
    display: block;
}

.btn-voltar-premium {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #475569; /* Cinza slate discreto */
    background: #ffffff;
    border: 1px solid #e2e8f0;
    padding: 10px 16px;
    border-radius: 12px;
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
    transition: all 0.2s ease;
    width: fit-content; /* Garante que no mobile ele ocupe apenas o tamanho do texto */
}

.btn-voltar-premium:hover {
    color: #0056b3; /* Muda para o azul principal */
    border-color: #cbd5e1;
    transform: translateX(-4px); /* Efeito sutil empurrando para a esquerda */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

/* Ajuste fino para combinar com o topo no desktop */
@media (min-width: 768px) {
    .btn-voltar-container {
        margin-bottom: 30px;
    }
}

/* 1️⃣ Barra de Progresso Sutil no Topo */
#progress-bar {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    width: 0%;
    background: linear-gradient(90deg, #38bdf8, var(--primary));
    z-index: 1000;
    transition: width 0.3s ease;
}

.container {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    box-sizing: border-box;
}

/* Card Modernizado */
.card {
    background: var(--surface);
    width: 100%;
    max-width: 420px;
    padding: 24px;
    border-radius: 20px;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.05), 0 8px 10px -6px rgba(0, 0, 0, 0.05);
    box-sizing: border-box;
}

.card-title {
    margin: 0 0 6px 0;
    font-size: 1.35rem;
    font-weight: 700;
}

.card-subtitle {
    margin: 0 0 24px 0;
    font-size: 0.9rem;
    color: var(--text-muted);
    line-height: 1.4;
}

.form-group {
    margin-bottom: 20px;
}

label {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 8px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Inputs e Seletores Otimizados para Dedos */
input, .date-trigger-box {
    width: 100%;
    height: 52px;
    padding: 0 16px;
    font-size: 1rem;
    border: 1.5px solid var(--border);
    border-radius: 12px;
    background: var(--surface);
    box-sizing: border-box;
    outline: none;
    transition: all 0.2s ease;
}

input:focus, .date-trigger-box:active {
    border-color: var(--primary);
    box-shadow: 0 0 0 4px rgba(2, 132, 199, 0.1);
}

.date-trigger-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    color: var(--text-main);
}

/* 3️⃣ Botão com Micro-feedback e Spinner */
.btn-primary {
    width: 100%;
    height: 52px;
    background: var(--primary);
    color: white;
    border: none;
    border-radius: 12px;
    font-size: 1rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    -webkit-tap-highlight-color: transparent;
}

.btn-primary:active {
    transform: scale(0.97);
    background: var(--primary-active);
}

.btn-primary:disabled {
    background: #cbd5e1;
    cursor: not-allowed;
    transform: none;
}

.spinner {
    width: 20px;
    height: 20px;
    border: 2.5px solid rgba(255,255,255,0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }
.hidden { display: none; }

/* 2️⃣ Toast Inteligente (Padrão Mobile App) */
.toast {
    position: fixed;
    bottom: -100px;
    left: 16px;
    right: 16px;
    background: rgba(15, 23, 42, 0.95);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    padding: 16px;
    border-radius: 14px;
    box-shadow: 0 20px 25px -5px rgba(0,0,0,0.15);
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    z-index: 1000;
}

.toast.show {
    transform: translateY(-120px); /* Sobe suave para a área segura */
}

.toast-content {
    display: flex;
    align-items: center;
    gap: 12px;
    color: white;
    font-size: 0.9rem;
    line-height: 1.4;
}

.toast-icon { color: var(--error); flex-shrink: 0; }

/* 4️⃣ Bottom Sheet (Janela Deslizante de Cima) */
.overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.4);
    z-index: 998;
    transition: opacity 0.3s ease;
}

.bottom-sheet {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    background: var(--surface);
    border-top-left-radius: 24px;
    border-top-right-radius: 24px;
    padding: 16px 20px 24px 20px;
    z-index: 999;
    transform: translateY(100%);
    transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}

.bottom-sheet.open { transform: translateY(0); }

.sheet-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 20px;
}

.sheet-drag-handle {
    width: 40px; height: 4px;
    background: var(--border);
    border-radius: 2px;
    margin-bottom: 12px;
}

.sheet-header h3 { margin: 0; font-size: 1.1rem; }

.quick-options {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 20px;
}

.opt-btn {
    width: 100%;
    padding: 14px;
    background: var(--bg);
    border: 1.5px solid transparent;
    border-radius: 12px;
    font-size: 0.95rem;
    text-align: left;
    cursor: pointer;
    font-weight: 500;
}

.opt-btn.selected {
    border-color: var(--primary);
    background: rgba(2, 132, 199, 0.05);
    color: var(--primary);
}

.tributo-selector {
    display: flex;
    background: #f1f5f9;
    padding: 4px;
    border-radius: 10px;
    margin-bottom: 20px;
}

.tab-btn {
    flex: 1;
    padding: 10px;
    border: none;
    background: none;
    font-size: 0.9rem;
    font-weight: 600;
    color: #64748b;
    cursor: pointer;
    border-radius: 8px;
    transition: all 0.2s;
}

.tab-btn.active {
    background: #ffffff;
    color: #0284c7;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.dashboard-wrapper {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    padding: 20px 16px;
    box-sizing: border-box;
}

.section-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 20px;
    padding-left: 4px;
}

/* Grid Inteligente Mobile-First */
.services-grid {
    display: grid;
    grid-template-columns: 1fr; /* Uma coluna no celular */
    gap: 14px;
}

/* Ajuste automático para telas maiores (tablets e PCs) */
@media (min-width: 640px) {
    .services-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (min-width: 1024px) {
    .services-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Design Moderno do Card */
.service-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 16px;
    display: flex;
    align-items: center;
    gap: 16px;
    cursor: pointer;
    position: relative;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    -webkit-tap-highlight-color: transparent;
}

/* Efeito de toque no Mobile */
.service-card:active {
    transform: scale(0.98);
    background: #f8fafc;
    border-color: #cbd5e1;
}

/* Moldura estilizada para o ícone */
.card-icon-wrapper {
    width: 48px;
    height: 48px;
    background: rgba(2, 132, 199, 0.08);
    color: #0284c7;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.card-info {
    flex: 1;
}

.card-info h3 {
    margin: 0 0 4px 0;
    font-size: 1rem;
    font-weight: 600;
    color: #0f172a;
}

.card-info p {
    margin: 0;
    font-size: 0.85rem;
    color: #64748b;
}

.external-arrow {
    color: #94a3b8;
    display: flex;
    align-items: center;
}

.overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(15, 23, 42, 0.4);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 1000;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.overlay.visible {
    opacity: 1;
    pointer-events: auto;
}

.bottom-sheet {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    background: #ffffff;
    border-top-left-radius: 24px;
    border-top-right-radius: 24px;
    padding: 16px 20px 24px 20px;
    z-index: 1001;
    transform: translateY(100%);
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 -10px 25px -5px rgba(0, 0, 0, 0.1);
    max-width: 500px;
    margin: 0 auto; /* Centraliza no desktop */
}

.bottom-sheet.open {
    transform: translateY(0);
}

.sheet-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-bottom: 20px;
}

.sheet-drag-handle {
    width: 36px; height: 5px;
    background: #e2e8f0;
    border-radius: 3px;
    margin-bottom: 12px;
}

.sheet-header h3 {
    margin: 0 0 4px 0;
    font-size: 1.2rem;
    font-weight: 700;
    color: #0f172a;
}

.sheet-header p {
    margin: 0;
    font-size: 0.85rem;
    color: #64748b;
}

.hidden {
    display: none;
}

.container {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    padding: 20px 16px;
    box-sizing: border-box;
}

#progress-bar {
    position: fixed;
    top: 0; left: 0; height: 3px;
    width: 0%;
    background: #0284c7;
    z-index: 9999;
    transition: width 0.3s ease;
}

/* --- DASHBOARD GRID DE SERVIÇOS --- */
.dashboard-wrapper {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.section-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: #1e293b;
    margin: 0;
}

.services-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
}

@media (min-width: 640px) { .services-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .services-grid { grid-template-columns: repeat(3, 1fr); } }

.service-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 16px;
    display: flex;
    align-items: center;
    gap: 16px;
    cursor: pointer;
    transition: all 0.25s ease;
}

.service-card:hover {
    border-color: #cbd5e1;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
}

.card-icon-wrapper {
    width: 44px; height: 44px;
    background: rgba(2, 132, 199, 0.08);
    color: #0284c7;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.card-info { flex: 1; }
.card-info h3 { margin: 0 0 2px 0; font-size: 0.95rem; font-weight: 600; color: #0f172a; }
.card-info p { margin: 0; font-size: 0.8rem; color: #64748b; }
.external-arrow { color: #94a3b8; }

/* --- CARD DE CONSULTA IPTU / ISS --- */
.iptu-section {
    margin-top: 10px;
}

.iptu-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 20px;
    padding: 24px;
    max-width: 500px;
    margin: 0 auto;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02);
}

.iptu-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: #0f172a;
    margin: 0 0 6px 0;
}

.iptu-subtitle {
    font-size: 0.85rem;
    color: #64748b;
    margin: 0 0 20px 0;
    line-height: 1.4;
}

.iptu-form-group {
    margin-bottom: 18px;
    text-align: left;
}

.iptu-form-group label {
    display: block;
    font-size: 0.8rem;
    font-weight: 600;
    color: #475569;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.iptu-form-group input, .default-input {
    width: 100%;
    height: 50px;
    padding: 0 16px;
    border: 1.5px solid #e2e8f0;
    border-radius: 12px;
    font-size: 1rem;
    color: #0f172a;
    box-sizing: border-box;
    outline: none;
    transition: border-color 0.2s;
}

.iptu-form-group input:focus, .default-input:focus {
    border-color: #0284c7;
}

/* --- SELETOR DE ABAS --- */
.tributo-selector {
    display: flex;
    background: #f1f5f9;
    padding: 4px;
    border-radius: 10px;
    margin-bottom: 20px;
}

.tab-btn {
    flex: 1;
    padding: 10px;
    border: none;
    background: none;
    font-size: 0.85rem;
    font-weight: 600;
    color: #64748b;
    cursor: pointer;
    border-radius: 8px;
    transition: all 0.2s;
}

.tab-btn.active {
    background: #ffffff;
    color: #0284c7;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

/* --- BOTÕES --- */
.iptu-btn {
    width: 100%;
    height: 50px;
    border: none;
    background: #0284c7;
    color: #ffffff;
    border-radius: 12px;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: background 0.2s;
}

.iptu-btn:hover { background: #0369a1; }
.iptu-btn:disabled { background: #94a3b8; cursor: not-allowed; }
.btn-success { background: #10b981; }
.btn-success:hover { background: #059669; }

.iptu-btn-link {
    display: block;
    width: 100%;
    background: none;
    border: none;
    color: #64748b;
    font-size: 0.85rem;
    font-weight: 600;
    margin-top: 14px;
    cursor: pointer;
    text-align: center;
}

/* --- PIX RESULTADO --- */
.pix-header { text-align: center; margin-bottom: 20px; }
.pix-badge {
    display: inline-block;
    background: #e6f4ea;
    color: #137333;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    margin-bottom: 12px;
}
.pix-code-box {
    background: #f8fafc;
    border: 1.5px dashed #cbd5e1;
    border-radius: 12px;
    padding: 16px;
    font-family: monospace;
    font-size: 0.85rem;
    word-break: break-all;
    color: #334155;
    margin-bottom: 20px;
    text-align: center;
}

/* --- BOTTOM SHEETS --- */
.overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(15, 23, 42, 0.4);
    backdrop-filter: blur(4px);
    z-index: 1000;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s;
}
.overlay.visible { opacity: 1; pointer-events: auto; }

.bottom-sheet {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    background: #ffffff;
    border-top-left-radius: 24px;
    border-top-right-radius: 24px;
    padding: 16px 20px 24px 20px;
    z-index: 1001;
    transform: translateY(100%);
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    max-width: 500px;
    margin: 0 auto;
}
.bottom-sheet.open { transform: translateY(0); }

/* --- TOAST E AUXILIARES --- */
.iptu-toast-box {
    position: fixed;
    bottom: 24px; left: 50%;
    transform: translateX(-50%) translateY(100px);
    background: #1e293b;
    color: #ffffff;
    padding: 12px 20px;
    border-radius: 12px;
    font-size: 0.85rem;
    z-index: 9999;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    pointer-events: none;
}
.iptu-toast-box.show { transform: translateX(-50%) translateY(0); }

.iptu-hidden, .hidden { display: none; }

/* --- PORTAL DE CONSULTA (2ª VIA IPTU/ISS) --- */
.iptu-section {
    margin-top: 30px;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.iptu-section.show-portal {
    opacity: 1;
    transform: translateY(0);
}

.portal-card {
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 10px 25px rgba(15, 23, 42, 0.08);
    border: 1px solid #e2e8f0;
    overflow: hidden;
    width: 100%;
    margin: 0 auto;
}

/* Topo azul similar à imagem desejada */
.portal-header {
    background: #0284c7; /* Azul corporativo moderno */
    color: #ffffff;
    padding: 16px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.portal-header-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1.05rem;
    font-weight: 600;
    letter-spacing: 0.3px;
}

.portal-close-btn {
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.8);
    font-size: 1.6rem;
    cursor: pointer;
    line-height: 1;
    transition: color 0.2s;
    padding: 0 5px;
}

.portal-close-btn:hover {
    color: #ffffff;
}

.portal-body {
    padding: 24px;
}

/* Grid responsiva fluida */
.portal-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}

@media (min-width: 768px) {
    .portal-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.portal-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.portal-group label {
    font-size: 0.85rem;
    font-weight: 600;
    color: #334155;
}
 
.portal-group input, .select-wrapper select {
    width: 100%;
    height: 46px;
    padding: 0 14px;
    border: 1.5px solid #cbd5e1;
    border-radius: 8px;
    font-size: 0.95rem;
    color: #0f172a;
    background-color: #f8fafc;
    outline: none;
    transition: all 0.25s ease;
    box-sizing: border-box;
}

.portal-group input:focus, .select-wrapper select:focus {
    border-color: #0284c7;
    background-color: #ffffff;
    box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.12);
}
 
.select-wrapper {
    position: relative;
}

.select-wrapper::after {
    content: '▼';
    font-size: 0.7rem;
    color: #64748b;
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
}

.select-wrapper select {
    appearance: none;
    padding-right: 35px;
    cursor: pointer;
}
 
.checkbox-align {
    justify-content: center;
    padding-top: 10px;
}
 
.custom-checkbox {
    display: flex;
    align-items: center;
    position: relative;
    padding-left: 30px;
    cursor: pointer;
    user-select: none;
}

.custom-checkbox input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0; width: 0;
}

.checkmark {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    height: 20px;
    width: 20px;
    background-color: #f1f5f9;
    border: 1.5px solid #cbd5e1;
    border-radius: 6px;
    transition: all 0.2s;
}

.custom-checkbox:hover input ~ .checkmark {
    border-color: #0284c7;
}

.custom-checkbox input:checked ~ .checkmark {
    background-color: #0284c7;
    border-color: #0284c7;
}

.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

.custom-checkbox input:checked ~ .checkmark:after {
    display: block;
}

.custom-checkbox .checkmark:after {
    left: 6px;
    top: 2px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 2.5px 2.5px 0;
    transform: rotate(45deg);
}

.checkbox-label {
    font-size: 0.9rem;
    color: #475569;
    font-weight: 500;
}
 
.portal-actions {
    margin-top: 24px;
    display: flex;
    justify-content: flex-start;
}

.btn-portal-primary {
    background: #0284c7;
    color: #ffffff;
    border: none;
    padding: 0 32px;
    height: 46px;
    border-radius: 8px;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: background 0.2s, transform 0.1s;
}

.btn-portal-primary:hover {
    background: #0369a1;
}

.btn-portal-primary:active {
    transform: scale(0.98);
}
 
.portal-spinner {
    width: 18px;
    height: 18px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: #ffffff;
    border-radius: 50%;
    animation: rotateSpinner 0.8s linear infinite;
}

@keyframes rotateSpinner {
    to { transform: rotate(360deg); }
}

.iptu-hidden {
    display: none;
}

.servicos-container-fluxo {
    margin-top: 35px;
    width: 100%;
}

.tela-servico {
    opacity: 0;
    transform: translateY(15px);
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.tela-servico.show-portal {
    opacity: 1;
    transform: translateY(0);
}
 
.portal-card {
    background: #ffffff;
    border-radius: 14px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.05);
    border: 1px solid #e2e8f0;
    overflow: hidden;
    animation: fadeInSlide 0.35s ease-out;
}

@keyframes fadeInSlide {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}
 
.iptu-hidden {
    display: none;
}

.tela-servico {
    opacity: 0;
    transform: translateY(15px);
    transition: all 0.35s ease-out;
}

.tela-servico.show-portal {
    opacity: 1;
    transform: translateY(0);
}
 
.portal-card {
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    border: 1px solid #e2e8f0;
    overflow: hidden;
    max-width: 650px;
    margin: 0 auto;
}

.portal-header {
    background: #0284c7;
    color: #ffffff;
    padding: 14px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.portal-header-title {
    font-weight: 600;
    font-size: 1rem;
}

.portal-close-btn {
    background: transparent;
    border: none;
    color: #ffffff;
    font-size: 1.5rem;
    cursor: pointer;
}

.portal-body {
    padding: 20px;
}

.portal-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 15px;
}

@media (min-width: 600px) {
    .portal-grid {
        grid-template-columns: 1fr 1fr;
    }
}

.portal-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.portal-group label {
    font-size: 0.85rem;
    font-weight: 600;
    color: #334155;
}

.portal-input {
    height: 44px;
    padding: 0 12px;
    border: 1.5px solid #cbd5e1;
    border-radius: 8px;
    font-size: 0.95rem;
    background-color: #f8fafc;
    outline: none;
    transition: all 0.2s ease;
}

.portal-input:focus {
    border-color: #0284c7;
    background-color: #ffffff;
    box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.15);
}

.portal-actions {
    margin-top: 20px;
    display: flex;
    justify-content: flex-end;
}

.btn-portal-primary {
    background: #0284c7;
    color: #ffffff;
    border: none;
    padding: 12px 24px;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
}

.btn-portal-primary:hover {
    background: #0369a1;
}
 
.toast-card {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: #1e293b;
    color: #ffffff;
    padding: 16px 20px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    max-width: 320px;
    z-index: 9999;
    opacity: 0;
    transform: translateY(100px);
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    pointer-events: none;
}

.toast-card.show {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.card-menu-premium {
    background: #ffffff;
    border: 1.5px solid #e2e8f0;
    border-radius: 12px;
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 16px;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
}

.card-menu-premium:hover {
    transform: translateY(-2px);
    border-color: #0284c7;
    box-shadow: 0 10px 20px rgba(2, 132, 199, 0.08);
}

.card-icon-wrapper {
    width: 48px;
    height: 48px;
    background: #f0f9ff;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: #0284c7;
    flex-shrink: 0;
}

.card-text-wrapper h3 {
    font-size: 1rem;
    font-weight: 600;
    color: #0f172a;
    margin: 0 0 4px 0;
}

.card-text-wrapper p {
    font-size: 0.85rem;
    color: #64748b;
    margin: 0;
}
 
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body.bg-mobile-grey {
    background-color: #f8fafc;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    color: #1e293b;
    padding: 16px;
}

.mobile-container {
    max-width: 600px;  
    margin: 0 auto;
    width: 100%;
}
 
.navigation-bar {
    margin-bottom: 24px;
}

.btn-back-clean {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    color: #475569;
    font-size: 0.95rem;
    font-weight: 600;
    padding: 8px 0;
    transition: color 0.2s;
}

.btn-back-clean:hover {
    color: #0284c7;
}
 
.section-title {
    font-size: 1.35rem;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 16px;
}
 
.mobile-services-grid {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
 
.mobile-card-link {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 16px;
    display: flex;
    align-items: center;
    text-decoration: none;
    transition: all 0.2s ease-in-out;
}

.mobile-card-link:active {
    background: #f1f5f9;
    transform: scale(0.98);
}

.card-icon-circle {
    width: 44px;
    height: 44px;
    border-radius: 10px;  
    display: flex;        
    align-items: center;
    justify-content: center;
    flex-shrink: 0;      
}
 
.blue-icon {background-color: #e0f2fe; }
.purple-icon { background: #f3e8ff; }
.green-icon { background: #dcfce7; }
.yellow-icon { background: #fef9c3; }
.dark-blue-icon { background: #e0e7ff; }

.card-info {
    flex-grow: 1;
}

.card-info h3 {
    font-size: 0.95rem;
    font-weight: 600;
    color: #0f172a;
    margin-bottom: 3px;
}

.card-info p {
    font-size: 0.8rem;
    color: #64748b;
}

.card-arrow {
    color: #cbd5e1;
    font-size: 1rem;
    padding-left: 8px;
}
 
.mobile-form-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 20px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
}

.form-header h2 {
    font-size: 1.2rem;
    color: #0f172a;
    margin-bottom: 6px;
}

.form-header p {
    font-size: 0.85rem;
    color: #64748b;
    line-height: 1.4;
    margin-bottom: 20px;
}

.form-group-mobile {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 16px;
}

.form-group-mobile label {
    font-size: 0.8rem;
    font-weight: 600;
    color: #475569;
}

.mobile-input {
    height: 48px;
    border: 1.5px solid #cbd5e1;
    border-radius: 10px;
    padding: 0 14px;
    font-size: 0.95rem;
    outline: none;
    background: #f8fafc;
    transition: all 0.2s;
}

.mobile-input:focus {
    border-color: #0284c7;
    background: #ffffff;
    box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.15);
}
 
.btn-mobile-primary {
    width: 100%;
    height: 48px;
    background: #0284c7;
    color: #ffffff;
    border: none;
    border-radius: 10px;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    margin-top: 10px;
    transition: background 0.2s;
}

.btn-mobile-primary:active {
    background: #0369a1;
}
 
.mobile-progress-container {
    height: 4px;
    background: #f1f5f9;
    border-radius: 2px;
    overflow: hidden;
    margin-top: 10px;
}

.mobile-progress-bar {
    width: 0%;
    height: 100%;
    background: #0284c7;
    transition: width 0.3s ease;
}
 
@media (min-width: 768px) {
    .mobile-services-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 16px;
    }
}
 
.checkbox-group-mobile {
    margin: 18px 0;
}

.checkbox-label-container {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 600;
    color: #475569;
    user-select: none;
}
 
.mobile-checkbox {
    width: 20px;
    height: 20px;
    accent-color: #0284c7;  
    border: 1.5px solid #cbd5e1;
    border-radius: 4px;
    cursor: pointer;
    transition: transform 0.1s ease;
}

.mobile-checkbox:active {
    transform: scale(0.9);
}

.checkbox-custom-text {
    font-size: 0.9rem;
    color: #334155;
}

.form-header-blue {
    background: #0284c7;
    color: #ffffff;
    padding: 12px 16px;
    border-radius: 14px 14px 0 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: -20px -20px 0 -20px;  
}

.header-content {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.9rem;
    font-weight: 600;
}

.header-close {
    text-decoration: none;
    color: #ffffff;
    font-size: 1.5rem;
    line-height: 1;
}

.input-readonly-right {
    text-align: right;
    background-color: #f8fafc;  
    color: #64748b;             
    border-color: #e2e8f0;
    cursor: default;                      
    user-select: none;                    
}

.action-row-mobile {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 24px;
}

.btn-mobile-action {
    background-color: #0284c7;
    color: #ffffff;
    border: none;
    border-radius: 8px;
    padding: 12px 18px;
    font-size: 0.95rem;
    font-weight: bold;
    cursor: pointer;
    min-width: 140px;
    max-width: 150px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    transition: background-color 0.2s ease, transform 0.1s ease;
    flex-shrink: 0; 
    text-align: center;
}

.btn-mobile-action:active {
    background-color: #0369a1;
    transform: scale(0.98);
}

.action-desc-text {
    font-size: 0.85rem;
    color: #64748b;
    line-height: 1.3;
    font-weight: 500;
}

.action-row-mobile {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 20px;
    width: 100%;
}

.btn-mobile-action {
    background-color: #0284c7;
    color: #ffffff;
    border: none;
    border-radius: 8px;
    padding: 12px 18px;
    font-size: 0.95rem;
    font-weight: bold;
    cursor: pointer;
    min-width: 150px;      
    text-align: center;
    text-decoration: none;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;      
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}
 
.action-desc-text {
    font-size: 0.85rem;
    color: #475569;
    line-height: 1.4;
    font-weight: 500;
}

.checkbox-block-group {
    display: flex;
    flex-direction: column;  
    align-items: flex-start; 
    gap: 8px;                
    margin-top: 10px;
    margin-bottom: 15px;
}
 
.checkbox-main-title {
    font-size: 0.9rem;
    color: #334155;
    font-weight: 600;
    margin: 0;
    display: block;
}
 
.checkbox-input-wrapper {
    display: flex;
    justify-content: flex-start;
    width: 100%;
}
 
.mobile-checkbox-fixed {
    width: 18px;             
    height: 18px;
    margin: 0;              
    cursor: pointer;
    flex-shrink: 0;                     
}

.app-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    background-color: #ffffff;
    border-bottom: 1px solid #e2e8f0;
    margin-bottom: 20px;
}

.brand-info .app-title {
    font-size: 1.2rem;
    font-weight: bold;
    color: #0284c7;
}

.btn-login-header {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background-color: #f1f5f9;
    color: #334155;
    text-decoration: none;
    padding: 8px 14px;
    border-radius: 20px; 
    font-size: 0.85rem;
    font-weight: 600;
    transition: all 0.2s ease;
    border: 1px solid #e2e8f0;
}

.btn-login-header:active {
    background-color: #e2e8f0;
    transform: scale(0.96);
}

.btn-login-header svg {
    color: #0284c7;  
}   

.password-wrapper {
    position: relative;
    width: 100%;
}
 
.password-wrapper .mobile-input {
    padding-right: 45px;
}
 
.btn-toggle-password {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    cursor: pointer;
    color: #64748b;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s ease;
}

.btn-toggle-password:active {
    color: #0284c7;
}
 
.input-error {
    border-color: #ef4444;
    background-color: #fef2f2;
    box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.1);
}
 
.form-error-text {
    color: #ef4444;
    font-size: 0.8rem;
    font-weight: bold;
    margin-top: 5px;
    display: block;
}

.password-wrapper {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
}
 
.password-wrapper .mobile-input {
    padding-right: 45px;
    width: 100%;
    box-sizing: border-box;
}
 
.btn-toggle-password {
    position: absolute;
    right: 12px;
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    cursor: pointer;
    color: #64748b;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    outline: none;
}

.btn-toggle-password:hover,
.btn-toggle-password:focus {
    color: #0284c7;
}
 
.input-error {
    border-color: #ef4444;
    background-color: #fef2f2;
}

.form-error-text {
    color: #ef4444;
    font-size: 0.8rem;
    font-weight: bold;
    margin-top: 5px;
    display: block;
}

.card-icone-container {
    width: 44px;
    height: 44px;
    background-color: #e0f2fe; 
    color: #0284c7;             
    border-radius: 10px;       
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;             
}
 
.card-seta {
    color: #cbd5e1;             
    display: flex;
    align-items: center;
    margin-left: auto;         
}

.card-icone-container {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #0284c7;  
}

.card-icone-container {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #0284c7;  
}

.tabela-scroll-wrapper {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;  
    margin-top: 15px;
    border-radius: 8px;
}
 
@media (max-width: 768px) {
    .tabela-responsiva-premium {
        min-width: 600px;  
    }
}

html, body {
    max-width: 100vw;
    overflow-x: hidden;  
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

*, *:before, *:after {
    box-sizing: inherit;
}
 
.container-modulo-premium {
    width: 100%;
    max-width: 100%;
    padding: 16px;
    margin: 0 auto;
    overflow: hidden;  
}
 
.tabela-scroll-wrapper {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;  
    display: block;
    -webkit-overflow-scrolling: touch; 
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    margin-top: 15px;
}
 
.tabela-responsiva-premium {
    width: 100%;
    border-collapse: collapse;
    white-space: nowrap;  
}
 
@media (max-width: 768px) {
    .tabela-responsiva-premium {
        min-width: 580px;  
    }
}

.tabela-responsiva-premium {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
    background-color: #ffffff;
    border-radius: 8px;
    overflow: hidden;
}

.tabela-responsiva-premium th, 
.tabela-responsiva-premium td {
    padding: 12px 15px;
    text-align: left;
    border-bottom: 1px solid #e2e8f0;
}
 
@media (max-width: 768px) {
 
    .tabela-responsiva-premium thead {
        display: none;
    }

    .tabela-responsiva-premium, 
    .tabela-responsiva-premium tbody, 
    .tabela-responsiva-premium tr, 
    .tabela-responsiva-premium td {
        display: block;
        width: 100%;
    }
 
    .tabela-responsiva-premium tr {
        background-color: #ffffff;
        border: 1px solid #e2e8f0;
        border-radius: 12px;
        margin-bottom: 16px;
        padding: 12px;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
    }
 
    .tabela-responsiva-premium td {
        display: flex;
        justify-content: space-between;  
        align-items: center;
        padding: 8px 4px;
        border-bottom: 1px dashed #edf2f7;
        font-size: 14px;
        text-align: right;
    }
 
    .tabela-responsiva-premium td:last-child {
        border-bottom: none;
    }
 
    .tabela-responsiva-premium td::before {
        content: attr(data-label);
        font-weight: bold;
        color: #1e3a8a;  
        text-align: left;
        padding-right: 10px;
    }
}

.onibus-lista-cards {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 20px;
    width: 100%;
}

/* O Cartão Individual */
.onibus-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 16px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Cabeçalho do Card */
.onibus-card-header {
    display: flex;
    align-items: center;
    gap: 10px;
    border-bottom: 1px solid #f1f5f9;
    padding-bottom: 10px;
}

.onibus-card-header h3 {
    margin: 0;
    font-size: 16px;
    color: #1e293b;
    font-weight: 700;
}
 
.linha-badge {
    background-color: #0284c7;
    color: white;
    font-size: 11px;
    font-weight: bold;
    padding: 4px 8px;
    border-radius: 6px;
    text-transform: uppercase;
}
 
.info-row {
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    padding: 6px 0;
}

.info-label {
    color: #64748b;
    font-weight: 500;
}

.info-value {
    color: #0f172a;
    font-weight: 600;
    text-align: right;
}

.status-normal {
    color: #10b981; 
}
 
.onibus-card-footer {
    margin-top: 6px;
}

.btn-mapa {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    background-color: #f0fdf4;  
    color: #16a34a;
    border: 1px solid #bbf7d0;
    padding: 10px;
    border-radius: 8px;
    text-decoration: none;
    font-size: 13px;
    font-weight: bold;
    transition: background 0.2s ease;
}

.btn-mapa:hover {
    background-color: #dcfce7;
}

.mapa-container {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 14px;
    margin-top: 20px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
}

.mapa-container h3 {
    margin: 0 0 10px 0;
    font-size: 15px;
    color: #1e293b;
}
 
#map {
    width: 100%;
    height: 280px;  
    border-radius: 8px;
    border: 1px solid #cbd5e1;
    z-index: 1;  
    touch-action: pan-y;  
} 

.onibus-card {
    display: flex;
}
 
.mapa-container {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 14px;
    margin-top: 20px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
}

.mapa-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    flex-wrap: wrap;
    gap: 10px;
}

.mapa-header h3 {
    margin: 0;
    font-size: 15px;
    color: #1e293b;
}
 
.btn-alerta-desvio {
    background-color: #ef4444;
    color: white;
    border: none;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: bold;
    cursor: pointer;
    transition: background 0.2s;
}

.btn-alerta-desvio:hover {
    opacity: 0.9;
}
 
#map {
    width: 100%;
    height: 280px;
    border-radius: 8px;
    border: 1px solid #cbd5e1;
    z-index: 1;
    touch-action: pan-y;
}
 
.menu-atalhos {
    width: 100%;
    padding: 15px;
    box-sizing: border-box;
}
 
.secao-passo {
    background: #ffffff;
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
    position: relative;
    box-sizing: border-box;
}
 
.numero-passo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #0284c7;
    color: #ffffff;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    font-size: 0.85rem;
    font-weight: bold;
    margin-bottom: 10px;
}
 
.grid-categorias-ouvidoria {
    display: grid;
    grid-template-columns: repeat(2, 1fr); 
    gap: 12px;
    margin-top: 15px;
}
 
.btn-categoria {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: #f8fafc;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    padding: 15px 10px;
    font-size: 0.9rem;
    font-weight: 600;
    color: #334155;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
    min-height: 80px;
}

.btn-categoria:active, .btn-categoria.selecionado {
    border-color: #0284c7;
    background-color: #f0f9ff;
    color: #0284c7;
}
 
.btn-utilitario {
    width: 100%;
    min-height: 48px;
    padding: 12px;
    background-color: #334155;
    color: #ffffff;
    border: none;
    border-radius: 8px;
    font-weight: bold;
    font-size: 0.9rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: 10px;
}

#endereco-manual, #detalhes {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    font-size: 0.95rem;
    padding: 12px;
    outline: none;
    transition: border-color 0.2s;
}

#endereco-manual:focus, #detalhes:focus {
    border-color: #0284c7;
}
 
.label-upload {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 50px;
    border: 2px dashed #0284c7;
    background-color: #f0f9ff;
    color: #0284c7;
    border-radius: 8px;
    font-weight: bold;
    font-size: 0.95rem;
    cursor: pointer;
    text-align: center;
    box-sizing: border-box;
    padding: 10px;
}
 
.btn-enviar-principal {
    width: 100%;
    height: 54px;
    background-color: #10b981;
    color: #ffffff;
    border: none;
    border-radius: 8px;
    font-size: 1.1rem;
    font-weight: bold;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(16, 185, 129, 0.3);
    transition: transform 0.1s, background-color 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 10px;
}

.btn-enviar-principal:active {
    transform: scale(0.98);
    background-color: #059669;
}
 
div[class*="cookie" i], 
div[id*="cookie" i], 
.cookie-banner, 
#cookie-banner {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% - 32px);
    max-width: 500px; 
    background-color: #1e293b; 
    color: #f8fafc;
    font-family: inherit;
    font-size: 0.9rem;
    line-height: 1.5; 
    padding: 20px;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.3), 0 8px 10px -6px rgba(0, 0, 0, 0.3);
    z-index: 999999;  
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

div[class*="cookie" i] p, 
div[id*="cookie" i] p, 
#cookie-banner p {
    margin: 0;
    color: #cbd5e1;
    font-size: 0.85rem;
}

 
div[class*="cookie" i] a, 
div[id*="cookie" i] a, 
#cookie-banner a {
    color: #38bdf8;  
    text-decoration: underline;
    font-weight: 700;
}

div[class*="cookie" i] a:hover, 
#cookie-banner a:hover {
    color: #0ea5e9;
}
 
div[class*="cookie" i] button, 
div[id*="cookie" i] button, 
#cookie-banner button,
div[class*="cookie" i] input[type="button"],
div[class*="cookie" i] input[type="submit"] {
    background-color: #10b981;  
    color: #ffffff;
    border: none;
    border-radius: 8px;
    padding: 12px 20px;
    font-size: 0.95rem;
    font-weight: 700;
    cursor: pointer;
    width: 100%;
    text-align: center;
    transition: background-color 0.2s, transform 0.1s;
    box-shadow: 0 4px 10px rgba(16, 185, 129, 0.2);
    box-sizing: border-box;
}

div[class*="cookie" i] button:active, 
#cookie-banner button:active {
    background-color: #059669;
    transform: scale(0.97);
}
 
span[class*="toggle" i], 
button[class*="toggle" i],
.cookie-toggle {
    display: none;  
}

.cookie-botoes-grupo {
    display: flex;
    gap: 8px;
    width: 100%;
}
 
.cookie-botoes-grupo button {
    flex: 1;
    border: none;
    border-radius: 8px;
    padding: 10px 12px;
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
}
 
.btn-cookie-sucesso {
    background-color: #10b981;
    color: #ffffff;
}
.btn-cookie-sucesso:active {
    background-color: #059669;
    transform: scale(0.96);
}
 
.btn-cookie-perigo {
    background-color: #ef4444;
    color: #ffffff;
}
.btn-cookie-perigo:active {
    background-color: #dc2626;
    transform: scale(0.96);
}
 
.btn-cookie-neutro {
    background-color: #475569;
    color: #f1f5f9;
}
.btn-cookie-neutro:active {
    background-color: #334155;
    transform: scale(0.96);
}
 
@media (max-width: 400px) {
    .cookie-botoes-grupo {
        flex-direction: column;
    }
    .cookie-botoes-grupo button {
        width: 100%;
        padding: 12px;
    }
}

.btn-voltar-topo {
    position: fixed;
    bottom: 25px;
    right: 25px;
    width: 50px;
    height: 50px;
    background-color: #0284c7;  
    color: #ffffff;
    border: none;
    border-radius: 50%;  
    box-shadow: 0 4px 12px rgba(2, 132, 199, 0.4);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999; 
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
}
 
.btn-voltar-topo:hover {
    background-color: #0369a1;
    transform: translateY(-3px);
    box-shadow: 0 6px 16px rgba(2, 132, 199, 0.5);
}
 
.btn-voltar-topo:active {
    transform: translateY(0) scale(0.95);
}
 
.btn-voltar-topo.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
 
@media (max-width: 768px) {
    .btn-voltar-topo {
        bottom: 20px;
        right: 20px;
        width: 46px;
        height: 46px;
    }
}

@media screen and (min-width: 768px) {
     
    .menu-atalhos {
        max-width: 850px;
        margin: 50px auto;
        padding: 0 20px;
    }
 
    .secao-passo {
        padding: 40px 50px;
        border-radius: 16px;
        margin-bottom: 30px;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04);
    }
 
    .grid-categorias-ouvidoria {
        display: grid;
        grid-template-columns: repeat(4, 1fr);  
        gap: 20px;
    }

    .btn-categoria {
        min-height: 120px;  
        padding: 25px 15px;
        font-size: 1.15rem;  
        border-radius: 14px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 12px;
    } 

    .btn-utilitario, .label-upload, .btn-enviar-principal {
        max-width: 480px; 
        margin-left: auto;
        margin-right: auto;
    }

    .btn-utilitario {
        height: 52px;
        font-size: 1.05rem;
    }

    .label-upload {
        min-height: 60px;
        font-size: 1.1rem;
    } 

    #endereco-manual, #detalhes {
        font-size: 1.1rem;
    } 

    .btn-enviar-principal {
        height: 64px;
        font-size: 1.3rem;
        border-radius: 14px;
    }
} 

@media screen and (min-width: 768px) {
     
    body.bg-mobile-grey {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;  
        align-items: center;
        min-height: 100vh;
        padding: 40px 0;  
        box-sizing: border-box;
    }
 
    .mobile-container {
        width: 85%;
        max-width: 1300px; 
        margin: 0 auto;
        display: flex;
        flex-direction: column;
        min-height: calc(100vh - 80px); 
    }
 
    .navigation-bar {
        width: 100%;
        display: flex;
        justify-content: flex-start;  
        margin-bottom: 15px;  
    }
 
    .btn-back-clean {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        text-decoration: none;
        color: #64748b;
        font-weight: 600;
        transition: color 0.2s ease;
    }

    .btn-back-clean:hover {
        color: #0284c7;
    }
 
    .section-title {
        font-size: 2.6rem;
        margin-top: 0;
        margin-bottom: auto;  
        color: #0f172a;
        text-align: left;
    }

    .mobile-services-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr); 
        gap: 28px;
        width: 100%;
        margin-top: 40px; 
        margin-bottom: auto;  
    }
 
    .mobile-card-link {
        display: flex;
        flex-direction: column; 
        align-items: flex-start;
        justify-content: space-between;
        min-height: 195px; 
        padding: 28px;
        background: #ffffff;
        border-radius: 16px;
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .mobile-card-link:hover {
        transform: translateY(-6px);
        box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.08), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
        border-color: #0284c7;
    }

    .card-icon-circle {
        width: 52px;
        height: 52px;
        margin-bottom: 16px;
    }

    .card-icon-circle svg {
        width: 24px;
        height: 24px;
    }

    .card-info {
        width: 100%;
    }

    .card-info h3 {
        font-size: 1.2rem;
        font-weight: 700;
        color: #1e293b;
        margin: 0 0 8px 0;
    }

    .card-info p {
        font-size: 0.9rem;
        color: #64748b;
        margin: 0;
        line-height: 1.4;
    }

    .card-arrow {
        align-self: flex-end;
        margin-top: 10px;
        font-size: 1.2rem;
        color: #94a3b8;
        transition: transform 0.2s;
    }

    .mobile-card-link:hover .card-arrow {
        transform: translateX(4px);
        color: #0284c7;
    }
 
    .mobile-services-grid > .mobile-card-link:nth-child(5) {
        grid-column-start: 2; 
    }
}

@media screen and (min-width: 768px) {

    /* ----------------------------------------------------------------------
       TELA 1: SERVIÇOS (servicos.html)
       ---------------------------------------------------------------------- */
     
    body.bg-mobile-grey:not(.pagina-formulario) {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        min-height: 100vh;
        padding: 40px 0;
        box-sizing: border-box;
    }
 
    body.bg-mobile-grey:not(.pagina-formulario) .mobile-container {
        width: 85%;
        max-width: 1300px; 
        margin: 0 auto;
        display: flex;
        flex-direction: column;
        min-height: calc(100vh - 80px);
    }
 
    body.bg-mobile-grey:not(.pagina-formulario) .navigation-bar {
        width: 100%;
        display: flex;
        justify-content: flex-start;
        margin-bottom: 15px;
    }
 
    body.bg-mobile-grey:not(.pagina-formulario) .section-title {
        font-size: 2.6rem;
        margin-top: 0;
        margin-bottom: auto;  
        text-align: left;
    }
 
    body.bg-mobile-grey:not(.pagina-formulario) .mobile-services-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr); 
        gap: 28px;
        width: 100%;
        margin-top: 40px;
        margin-bottom: auto;
    } 

    body.bg-mobile-grey:not(.pagina-formulario) .mobile-card-link {
        display: flex;
        flex-direction: column; 
        align-items: flex-start;
        justify-content: space-between;
        min-height: 195px; 
        padding: 28px;
        background: #ffffff;
        border-radius: 16px;
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        box-sizing: border-box;
    }

    body.bg-mobile-grey:not(.pagina-formulario) .mobile-card-link:hover {
        transform: translateY(-6px);
        box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.08), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
        border-color: #0284c7;
    }

    body.bg-mobile-grey:not(.pagina-formulario) .card-icon-circle {
        width: 52px;
        height: 52px;
        margin-bottom: 16px;
    }

    body.bg-mobile-grey:not(.pagina-formulario) .card-icon-circle svg {
        width: 24px;
        height: 24px;
    }

    body.bg-mobile-grey:not(.pagina-formulario) .card-info h3 {
        font-size: 1.2rem;
        font-weight: 700;
        color: #1e293b;
        margin: 0 0 8px 0;
    }

    body.bg-mobile-grey:not(.pagina-formulario) .card-info p {
        font-size: 0.9rem;
        color: #64748b;
        margin: 0;
        line-height: 1.4;
    }

    body.bg-mobile-grey:not(.pagina-formulario) .card-arrow {
        align-self: flex-end;
        margin-top: 10px;
        font-size: 1.2rem;
        color: #94a3b8;
        transition: transform 0.2s;
    }

    body.bg-mobile-grey:not(.pagina-formulario) .mobile-card-link:hover .card-arrow {
        transform: translateX(4px);
        color: #0284c7;
    }
 
    body.bg-mobile-grey:not(.pagina-formulario) .mobile-services-grid > .mobile-card-link:nth-child(5) {
        grid-column-start: 2; 
    }
 
    body.pagina-formulario {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        min-height: 100vh;
        padding: 40px;
        box-sizing: border-box;
        background-color: #f8fafc;
    }
 
    body.pagina-formulario .btn-voltar-container {
        width: 100%;
        max-width: 1100px;  
        display: flex;
        justify-content: flex-start;
        margin-bottom: 24px;
        box-sizing: border-box;
    }
 
    body.pagina-formulario .btn-voltar-premium {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        text-decoration: none;
        color: #64748b;
        font-weight: 600;
        transition: color 0.2s ease;
    }

    body.pagina-formulario .btn-voltar-premium:hover {
        color: #0284c7;
    }
 
    body.pagina-formulario .mobile-form-card {
        max-width: 1100px;  
        width: 100%;
        margin: 20px auto;  
        background: #ffffff;
        padding: 40px;
        border-radius: 12px;
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
        border: 1px solid #e2e8f0;
        box-sizing: border-box;
    }

    /* Cabeçalho do formulário */
    body.pagina-formulario .form-header h2 {
        font-size: 1.6rem;
        font-weight: 700;
        color: #0f172a;
        margin-bottom: 6px;
    }

    body.pagina-formulario .form-header p {
        font-size: 0.95rem;
        color: #64748b;
        margin-bottom: 30px;
        text-transform: uppercase;
        font-weight: 500;
        letter-spacing: 0.05em;
    }
 
    body.pagina-formulario .form-group-mobile label {
        display: block;
        font-size: 0.85rem;
        font-weight: 600;
        color: #475569;
        margin-bottom: 8px;
        letter-spacing: 0.03em;
    }
 
    body.pagina-formulario .mobile-input,
    body.pagina-formulario select {
        width: 100%;
        height: 52px;  
        font-size: 1rem;
        border-radius: 8px;
        padding: 12px 18px;
        border: 1px solid #cbd5e1;
        background-color: #f8fafc;  
        color: #1e293b;
        box-sizing: border-box;
        transition: border-color 0.2s, background-color 0.2s;
    }

    body.pagina-formulario .mobile-input:focus,
    body.pagina-formulario select:focus {
        border-color: #0284c7;
        background-color: #ffffff;
        outline: none;
    }
 
    body.pagina-formulario .form-group-mobile {
        margin-bottom: 24px;
    }
 
    body.pagina-formulario .checkbox-group-mobile {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        width: 100%;
        margin-bottom: 24px;
        box-sizing: border-box;
    }

    body.pagina-formulario .checkbox-label-container {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: 10px;
        width: 100%;
        cursor: pointer;
        text-align: left;
    }
 
    body.pagina-formulario .btn-mobile-primary {
        margin: 0;
        width: 100%;
        height: 54px;
        font-size: 1.1rem;
        font-weight: 600;
        color: #ffffff;
        background-color: #0284c7;
        border: none;
        border-radius: 8px;
        cursor: pointer;
        margin-top: 10px;
        transition: background-color 0.2s, transform 0.1s;
    }

    body.pagina-formulario .btn-mobile-primary:hover {
        background-color: #0369a1;
    }

    body.pagina-formulario .btn-mobile-primary:active {
        transform: scale(0.99);
    }
}

@media screen and (min-width: 768px) {
 
    body.bg-guia-praia {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        min-height: 100vh;
        padding: 40px 0;
        box-sizing: border-box;
        background-color: #f8fafc;  
    }
 
    body.bg-guia-praia .container-modulo-premium {
        width: 90%;
        max-width: 1200px;  
        margin: 0 auto;
        display: flex;
        flex-direction: column;
    }
 
    body.bg-guia-praia .btn-voltar-container {
        width: 100%;
        max-width: 1200px;
        display: flex;
        justify-content: flex-start;
        margin-bottom: 20px;
        box-sizing: border-box;
    }
 
    body.bg-guia-praia .fonte-dados-nota {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        font-size: 0.85rem;
        color: #475569;
        background-color: #f1f5f9;
        padding: 10px 18px;
        border-radius: 30px;
        border: 1px solid #e2e8f0;
        margin-top: 10px;
        margin-bottom: 30px;
        align-self: flex-start;  
    }

    body.bg-guia-praia .fonte-dados-nota svg {
        color: #0284c7;  
    }
 
    body.bg-guia-praia .grid-cards-internos {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 28px;  
        width: 100%;
        margin-bottom: 30px;
    }
 
    body.bg-guia-praia .card-praia-status {
        background: #ffffff;
        border-radius: 14px;
        padding: 28px;
        border: 1px solid #e2e8f0;
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.04), 0 2px 4px -1px rgba(0, 0, 0, 0.02);
        transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.2s;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        min-height: 220px;  
        box-sizing: border-box;
    }

    body.bg-guia-praia .card-praia-status:hover {
        transform: translateY(-4px);
        box-shadow: 0 12px 20px -3px rgba(0, 0, 0, 0.08);
        border-color: #cbd5e1;
    }
 
    body.bg-guia-praia .card-praia-status h3 {
        font-size: 1.3rem;
        font-weight: 700;
        color: #0f172a;
    }
 
    body.bg-guia-praia .card-praia-status p {
        font-size: 0.95rem;
        color: #475569;
        line-height: 1.5;
        margin: 12px 0 20px 0;
    }
 
    body.bg-guia-praia .badge-balneabilidade {
        font-size: 0.75rem;
        font-weight: 700;
        padding: 6px 12px;
        border-radius: 6px;
        letter-spacing: 0.05em;
    }

    body.bg-guia-praia .badge-propria {
        background-color: #dcfce7; 
        color: #15803d;  
        border: 1px solid #bbf7d0;
    }

    body.bg-guia-praia .badge-impropria {
        background-color: #fee2e2;  
        color: #b91c1c;  
        border: 1px solid #fecaca;
    }
 
    body.bg-guia-praia .info-clima-mar {
        display: flex;
        gap: 20px;
        padding-top: 16px;
        border-top: 1px solid #f1f5f9;  
        font-size: 0.9rem;
        color: #475569;
    }

    body.bg-guia-praia .info-clima-mar strong {
        color: #0f172a;
    }
 
    body.bg-guia-praia .card-informativo-interno {
        width: 100%;
        border-radius: 12px;
        padding: 24px 32px;
        border: 1px solid #bae6fd;
        background: #f0f9ff; 
        box-shadow: 0 4px 6px -1px rgba(3, 105, 161, 0.03);
        box-sizing: border-box;
    }

    body.bg-guia-praia .card-informativo-interno h3 {
        font-size: 1.15rem;
        font-weight: 700;
        margin-bottom: 6px;
    }

    body.bg-guia-praia .card-informativo-interno p {
        font-size: 0.95rem;
        line-height: 1.5;
    }
}

@media screen and (min-width: 768px) {
 
    body.bg-vagas-pat {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        min-height: 100vh;
        padding: 40px 0;
        background-color: #f8fafc;
        box-sizing: border-box;
    }

    body.bg-vagas-pat .container-modulo-premium {
        width: 90%;
        max-width: 1200px;
        margin: 0 auto;
        display: flex;
        flex-direction: column;
    }
 
    body.bg-vagas-pat .fonte-dados-nota {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        font-size: 0.85rem;
        color: #475569;
        background-color: #f1f5f9;
        padding: 10px 18px;
        border-radius: 30px;
        border: 1px solid #e2e8f0;
        margin-top: 10px;
        margin-bottom: 30px;
        align-self: flex-start;
    }

    body.bg-vagas-pat .fonte-dados-nota svg {
        color: #0284c7;
    }
 
    body.bg-vagas-pat .grid-cards-internos {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 28px;
        width: 100%;
    }
 
    body.bg-vagas-pat .card-informativo-interno {
        background: #ffffff;
        border-radius: 16px;
        padding: 32px;
        border: 1px solid #e2e8f0;
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.04), 0 2px 4px -1px rgba(0, 0, 0, 0.02);
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        min-height: 250px;
        box-sizing: border-box;
        transition: transform 0.2s ease, box-shadow 0.2s ease;
    }

    body.bg-vagas-pat .card-informativo-interno:hover {
        transform: translateY(-4px);
        box-shadow: 0 12px 20px -3px rgba(0, 0, 0, 0.08);
        border-color: #cbd5e1;
    }
 
    body.bg-vagas-pat .card-informativo-interno h3 {
        font-size: 1.35rem;
        font-weight: 700;
        color: #0f172a;
        margin: 12px 0 8px 0;
    }

    /* Descrição do cargo */
    body.bg-vagas-pat .vaga-descricao {
        font-size: 0.95rem;
        color: #475569;
        line-height: 1.5;
        margin: 0 0 20px 0;
    }
 
    body.bg-vagas-pat .badge-modulo {
        display: inline-block;
        font-size: 0.75rem;
        font-weight: 700;
        padding: 6px 12px;
        border-radius: 6px;
        text-transform: uppercase;
        letter-spacing: 0.05em;
    }

    body.bg-vagas-pat .badge-vaga-clt {
        background-color: #e0f2fe;
        color: #0369a1;
        border: 1px solid #bae6fd;
    }

    body.bg-vagas-pat .badge-vaga-estagio {
        background-color: #fef3c7;
        color: #b45309;
        border: 1px solid #fde68a;
    }
 
    body.bg-vagas-pat .btn-candidatar {
        width: 100%;
        height: 48px;
        background-color: #0284c7;
        color: #ffffff;
        border: none;
        border-radius: 8px;
        font-size: 0.95rem;
        font-weight: 600;
        cursor: pointer;
        transition: background-color 0.2s, transform 0.1s;
    }

    body.bg-vagas-pat .btn-candidatar:hover {
        background-color: #0369a1;
    }

    body.bg-vagas-pat .btn-candidatar:active {
        transform: scale(0.98);
    }
}

body.bg-vagas-pat .vaga-acoes-container {
        display: flex;
        gap: 12px;  
        width: 100%;
        margin-top: 20px;
        box-sizing: border-box;
    }
 
    body.bg-vagas-pat .btn-candidatar {
        flex: 1; 
        height: 46px;
        border: none;
        border-radius: 8px;
        font-size: 0.9rem;
        font-weight: 600;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;  
        text-decoration: none;
        box-sizing: border-box;
        transition: background-color 0.2s, transform 0.1s;
    }
 
    body.bg-vagas-pat .btn-whatsapp {
        background-color: #25d366;
        color: #ffffff;
    }

    body.bg-vagas-pat .btn-whatsapp:hover {
        background-color: #1ebd59;
    }
 
    body.bg-vagas-pat .btn-email {
        background-color: #0284c7;
        color: #ffffff;
    }

    body.bg-vagas-pat .btn-email:hover {
        background-color: #0369a1;
    }

    body.bg-vagas-pat .btn-candidatar:active {
        transform: scale(0.97);
    }

    .spinner-carregamento {
    width: 32px;
    height: 32px;
    border: 3px solid #e2e8f0;
    border-top: 3px solid #0284c7;
    border-radius: 50%;
    margin: 0 auto;
    animation: girarSpinner 0.8s linear infinite;
}

@keyframes girarSpinner {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@media screen and (max-width: 768px) {
    
    /* Faz o campo de texto e o botão ficarem um embaixo do outro no celular */
    .form-consulta-sus {
        display: flex;
        flex-direction: column;
        gap: 12px;
        width: 100%;
    }

    /* Garante que o input ocupe toda a largura disponível */
    #cartao-sus-input {
        width: 100% !important;
        box-sizing: border-box;
        padding: 12px;
        font-size: 1rem;
    }

    /* Corrige o botão no mobile para não quebrar ou sumir */
    .btn-consultar {
        width: 100% !important;
        min-height: 48px; /* Altura ideal para clicar com o dedo no celular */
        background-color: #0284c7 !important; /* Força a cor azul oficial */
        color: #ffffff !important; /* Força a cor do texto branca */
        font-size: 1rem;
        font-weight: 600;
        border: none;
        border-radius: 8px;
        display: flex !important;
        align-items: center;
        justify-content: center;
        text-align: center;
        box-sizing: border-box;
        cursor: pointer;
        visibility: visible !important;
        opacity: 1 !important;
    }
}

@media screen and (max-width: 768px) {
     
    div.form-consulta-sus, 
    .form-consulta-sus {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 12px !important;
        width: 100% !important;
    }
 
    #cartao-sus-input {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    padding: 14px 16px !important;
    font-size: 1rem !important;
    background-color: #ffffff !important; 
    border: 2px solid #94a3b8 !important;  
    border-radius: 8px !important;
    color: #1e293b !important;  
    transition: all 0.2s ease-in-out !important;  
}
 
    button#btn-consultar-sus,
    .btn-consultar {
        display: block !important;
        width: 100% !important;
        min-width: 100% !important;
        min-height: 48px !important;
        background: #0284c7 !important;  
        color: #ffffff !important;  
        font-size: 1rem !important;
        font-weight: bold !important;
        border: none !important;
        border-radius: 8px !important;
        text-align: center !important;
        visibility: visible !important;
        opacity: 1 !important;
        box-sizing: border-box !important;
    }
}

.form-flex-coluna {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    width: 100% !important;
    max-width: 400px;
    margin: 0 auto;  
}

/* Garante a largura total para o input */
#cartao-sus-input:focus {
    border-color: #0284c7 !important;  
    background-color: #f0f9ff !important;  
    outline: none !important;  
    box-shadow: 0 0 0 4px rgba(2, 132, 199, 0.2) !important;  
}

/* Reconstrói o botão garantindo que ele apareça */
#btn-consultar-sus {
    display: block !important;
    width: 100% !important;
    min-height: 46px !important;
    background-color: #0284c7 !important; 
    color: #ffffff !important;  
    border: none !important;
    border-radius: 6px !important;
    font-weight: bold !important;
    font-size: 1rem !important;
    cursor: pointer !important;
    text-align: center !important;
}

/* Seção para o Ecoturismo do Meio-Ambiente.html (mobile) */

@media screen and (max-width: 768px) {
    .grid-turismo-ecologico {
        gap: 20px !important;
    }

    .card-turimo-item {
        flex-direction: column !important;
    }

    .card-turismo-img {
        width: 100% !important;
        height: 180px !important;
    }

    .card-turismo-info {
        width: 100% !important;
        padding: 16px !important;
    }
}

/* ==========================================================================
   PORTAL DA ILHA - MÓDULO MEIO AMBIENTE & SERVIÇOS
   ========================================================================== */

/* Fundo Temático com Elementos de Ilha Comprida */
html, body {
    background-image: linear-gradient(135deg, #f8faf7 0%, #edf3f0 100%) !important;
    background-color: #edf3f0 !important;
    background-attachment: fixed !important;
    position: relative !important;
}

/* Vegetação litorânea / Coqueiro (Inferior Direito) */
body::before {
    content: "" !important;
    position: fixed !important;
    bottom: -20px !important;
    right: -20px !important;
    width: 320px !important;
    height: 320px !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23cbd5e1' stroke-width='0.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 22c1.25-6.75 6-12 13-14c-4.25 4.75-5 11.5-5 14'/%3E%3Cpath d='M11 11.5c1.75-2.75 5-4.5 8.5-4.5c-3.25 2.25-4.75 5.75-4.75 9'/%3E%3Cpath d='M6.5 16.5c.75-3.25 3.5-5.5 6.5-6c-2.25 2-2.75 5-2.25 7.5'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-size: contain !important;
    opacity: 0.6 !important;
    z-index: -1 !important;
    pointer-events: none !important;
}

/* Pássaros / Guarás (Superior Esquerdo) */
body::after {
    content: "" !important;
    position: fixed !important;
    top: 70px !important;
    left: 20px !important;
    width: 280px !important;
    height: 160px !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23cbd5e1' stroke-width='0.75'%3E%3Cpath d='M2 10s2-3 4-3s3 2 3 2s1-2 3-2s4 3 4 3'/%3E%3Cpath d='M6 14s1.5-2 3-2s2.5 1.5 2.5 1.5s1-1.5 2.5-1.5s3 2 3 2' /%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-size: contain !important;
    opacity: 0.5 !important;
    z-index: -1 !important;
    pointer-events: none !important;
}

/* Container de fileiras (Ecoturismo) */
.fileira-cards-ambiente {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 24px !important;
    width: 100% !important;
    margin-bottom: 40px !important;
}

/* Card de Ecoturismo Premium */
.card-vertical-premium {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 calc(33.333% - 24px) !important; 
    min-width: 280px !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05) !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}

.card-vertical-premium:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1) !important;
}

.card-vertical-img {
    width: 100% !important;
    height: 200px !important;
    background: #f1f5f9 !important;
    position: relative !important;
}

.card-vertical-img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
}

.badge-status-card {
    position: absolute !important;
    top: 12px !important;
    left: 12px !important;
    background: #dcfce7 !important;
    color: #166534 !important;
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    padding: 4px 12px !important;
    border-radius: 20px !important;
}

.card-vertical-corpo {
    padding: 20px !important;
    display: flex !important;
    flex-direction: column !important;
    flex-grow: 1 !important;
	justify-content: space-between !important;
}

.card-vertical-titulo {
    color: #0f172a !important;
    font-size: 1.2rem !important;
    font-weight: 700 !important;
    margin: 0 0 8px 0 !important;
}

.card-vertical-texto {
    color: #475569 !important;
    font-size: 0.9rem !important;
    line-height: 1.5 !important;
    margin: 0 0 16px 0 !important;
}

.card-vertical-rodape {
    border-top: 1px solid #f1f5f9 !important;
    padding-top: 12px !important;
    margin-top: auto !important;
    color: #64748b !important;
    font-size: 0.85rem !important;
}

/* Seção de Utilidades (Fundo da Página) */
.secao-serviços-fundo {
    margin-top: 50px !important;
    padding-top: 30px !important;
    border-top: 2px dashed #e2e8f0 !important;
    margin-bottom: 50px !important;
}

.grid-servicos-otimizados {
    display: flex !important;
    flex-direction: row !important;
    gap: 24px !important;
    width: 100% !important;
    max-width: 900px !important;
    margin: 0 auto !important;
}

.card-servico-clean {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 14px !important;
    padding: 24px !important;
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.03) !important;
}

.card-servico-header {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    margin-bottom: 12px !important;
}

.card-servico-header h3 {
    color: #0f172a !important;
    margin: 0 !important;
    font-size: 1.2rem !important;
    font-weight: 700 !important;
}

.card-servico-clean p {
    color: #475569 !important;
    font-size: 0.9rem !important;
    line-height: 1.5 !important;
    margin: 0 0 20px 0 !important;
    min-height: 44px !important;
}

/* Responsividade Mobile */
@media screen and (max-width: 768px) {
    .fileira-cards-ambiente,
    .grid-servicos-otimizados {
        flex-direction: column !important;
        gap: 16px !important;
    }
    .card-vertical-premium,
    .card-servico-clean {
        width: 100% !important;
        flex: 1 1 100% !important;
    }
}

/* ==========================================================================
   RESPONSIVIDADE DO PAINEL DE TRIBUTOS (MOBILE FIRST)
   ========================================================================== */

/* Corrige o alinhamento do campo de busca no celular */
.busca-input-wrapper {
    display: flex;
    flex-direction: column; /* Empilha o input e o botão no mobile */
    gap: 12px;
    width: 100%;
}

/* Garante que o input ocupe a largura correta */
#doc-input {
    width: 100%;
    box-sizing: border-box;
    min-height: 48px; /* Facilita o clique no celular */
}

/* Ajusta o botão para ocupar a largura total no mobile */
#btn-buscar {
    width: 100%;
    min-height: 48px;
}

/* Configuração para telas maiores (Computador / Tablet) */
@media (min-width: 768px) {
    .busca-input-wrapper {
        flex-direction: row; /* Volta a ficar lado a lado no PC */
    }
    #btn-buscar {
        width: auto; /* Botão volta ao tamanho normal */
    }
}

/* Ajustes gerais de tabela responsiva para os débitos */
@media (max-width: 600px) {
    #area-resultado-tributos table, 
    #area-resultado-tributos thead, 
    #area-resultado-tributos tbody, 
    #area-resultado-tributos th, 
    #area-resultado-tributos td, 
    #area-resultado-tributos tr { 
        display: block; 
    }
    
    #area-resultado-tributos thead tr { 
        position: absolute;
        top: -9999px;
        left: -9999px;
    }
    
    #area-resultado-tributos tr { 
        border: 1px solid #e2e8f0; 
        margin-bottom: 12px;
        border-radius: 8px;
        padding: 8px;
    }
    
    #area-resultado-tributos td { 
        border: none;
        position: relative;
        padding-left: 50%; 
        text-align: left !important;
    }
}

/* Cards do modulo de Educação */

.card-banner-slider {
            width: 100%;
            height: 180px;
            position: relative;
            overflow: hidden;
            background-color: #f1f5f9;
        }
        .slide-img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            position: absolute;
            top: 0;
            left: 0;
            opacity: 0;
            transition: opacity 1s ease-in-out; /* Transição suave de fade */
        }
        .slide-img.active {
            opacity: 1;
        }
        /* ==========================================================================
   ESTILOS DO PORTAL DA SAÚDE E PÁGINAS INTERNAS
   ========================================================================== */

/* Background Geral das Páginas */
body.bg-mobile-grey {
    background-color: #f8fafc;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    color: #1e293b;
    margin: 0;
    padding: 0;
}

/* 1. Botão de Voltar */
.btn-voltar-container {
    padding: 20px 20px 0 20px;
    max-width: 900px;
    margin: 0 auto;
}

.btn-voltar-premium {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background-color: #ffffff;
    color: #0284c7;
    border: 1px solid #e2e8f0;
    padding: 10px 18px;
    border-radius: 30px;
    font-size: 0.88rem;
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.04);
    transition: all 0.2s ease-in-out;
}

.btn-voltar-premium:hover {
    background-color: #f0f9ff;
    border-color: #bae6fd;
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(2, 132, 199, 0.1);
}

/* 2. Cabeçalho Principal */
.main-header h2 {
    font-size: 1.8rem;
    color: #0f172a;
    font-weight: 800;
    letter-spacing: -0.5px;
}

.main-header p {
    color: #64748b;
    font-size: 0.95rem;
    margin-top: 6px;
}

/* 3. Cards de Atalho e Formulários */
.card-atalho {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* Inputs e Selects */
.card-atalho input[type="tel"],
.card-atalho input[type="text"],
.card-atalho select {
    width: 100%;
    box-sizing: border-box;
    padding: 14px 16px !important;
    font-size: 0.95rem !important;
    background-color: #ffffff !important;
    border: 2px solid #cbd5e1 !important;
    border-radius: 10px !important;
    color: #1e293b !important;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.card-atalho input:focus,
.card-atalho select:focus {
    border-color: #0284c7 !important;
    box-shadow: 0 0 0 4px rgba(2, 132, 199, 0.15) !important;
}

/* Botões do Formulário */
.card-atalho button,
.btn-consultar {
    background-color: #0284c7;
    color: #ffffff;
    border: none;
    padding: 14px 24px;
    border-radius: 10px;
    font-weight: 700;
    font-size: 0.95rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.2s ease;
}

.card-atalho button:hover,
.btn-consultar:hover {
    background-color: #0369a1;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(2, 132, 199, 0.25);
}

/* 4. Grade de Serviços (Cards Clicáveis) */
.mobile-card-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    text-decoration: none;
    color: inherit;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.02);
    transition: all 0.2s ease-in-out;
}

.mobile-card-link:hover {
    border-color: #7dd3fc;
    transform: translateY(-3px);
    box-shadow: 0 8px 16px rgba(2, 132, 199, 0.08);
}

.card-icon-circle.blue-icon {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #e0f2fe;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.2s;
}

.mobile-card-link:hover .card-icon-circle.blue-icon {
    background: #0284c7;
}

.mobile-card-link:hover .card-icon-circle.blue-icon i {
    color: #ffffff !important;
}

.mobile-card-link:hover .card-arrow {
    color: #0284c7 !important;
    transform: translateX(4px);
}

.card-arrow {
    transition: transform 0.2s ease, color 0.2s ease;
}

/* 5. Lista de Unidades de Atendimento */
.card-atalho ul li {
    padding: 14px 18px;
    background: #f8fafc;
    border: 1px solid #f1f5f9;
    border-radius: 12px;
    transition: background 0.2s;
}

.card-atalho ul li:hover {
    background: #f1f5f9;
}

/* ==========================================================================
   PORTAL DE SERVIÇOS MUNICIPAIS - DESIGN SYSTEM & ACESSIBILIDADE (UX/UI)
   ========================================================================== */

:root {
    /* Paleta de Cores - Padrão Governo / Saúde */
    --primary: #0284c7;
    --primary-hover: #0369a1;
    --primary-light: #e0f2fe;
    --text-main: #0f172a;
    --text-muted: #475569;
    --bg-page: #f1f5f9;
    --bg-card: #ffffff;
    --border-color: #cbd5e1;
    --radius-lg: 16px;
    --radius-md: 12px;
    --radius-sm: 8px;
    --shadow-sm: 0 2px 4px rgba(15, 23, 42, 0.04);
    --shadow-md: 0 10px 25px -5px rgba(15, 23, 42, 0.08), 0 8px 10px -6px rgba(15, 23, 42, 0.04);
}

/* Base e Tipografia Acessível */
body.bg-mobile-grey, body {
    background-color: var(--bg-page);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    color: var(--text-main);
    line-height: 1.6;
    margin: 0;
    padding: 0;
    -webkit-font-smoothing: antialiased;
}

/* 1. Botão de Voltar (Padrão Pílula Acessível) */
.btn-voltar-container {
    padding: 24px 20px 8px 20px;
    max-width: 900px;
    margin: 0 auto;
}

.btn-voltar-premium {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background-color: var(--bg-card);
    color: var(--primary);
    border: 2px solid var(--border-color);
    padding: 12px 22px;
    border-radius: 50px;
    font-size: 1rem; /* Fonte aumentada */
    font-weight: 700;
    text-decoration: none;
    box-shadow: var(--shadow-sm);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-voltar-premium:hover {
    background-color: var(--primary-light);
    border-color: var(--primary);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

/* 2. Cabeçalho Principal */
.main-header {
    padding: 24px 20px 12px 20px !important;
    text-align: center;
}

.main-header h2 {
    font-size: 2.2rem !important; /* Aumentado para destaque imediato */
    color: var(--text-main) !important;
    font-weight: 800 !important;
    letter-spacing: -0.8px;
    margin: 0 0 8px 0 !important;
}

.main-header p {
    color: var(--text-muted) !important;
    font-size: 1.1rem !important; /* Leitura confortável */
    max-width: 640px;
    margin: 0 auto !important;
    font-weight: 400;
}

/* 3. Containers e Cards Principais */
.container-interno {
    max-width: 900px;
    margin: 24px auto 48px auto;
    padding: 0 20px;
}

.card-atalho {
    background: var(--bg-card) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: var(--radius-lg) !important;
    padding: 28px !important;
    margin-bottom: 32px !important;
    box-shadow: var(--shadow-sm) !important;
}

/* Títulos das Seções Internas */
.section-title, 
.card-atalho h3 {
    font-size: 1.4rem !important;
    font-weight: 800 !important;
    color: var(--text-main) !important;
    margin-bottom: 12px !important;
}

.card-atalho p {
    font-size: 1.05rem !important; /* Aumentado */
    color: var(--text-muted) !important;
    line-height: 1.6 !important;
}

/* 4. Formulários e Inputs de Grande Porte (Mobile-First) */
.card-atalho input[type="tel"],
.card-atalho input[type="text"],
.card-atalho select {
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 16px 20px !important; /* Área de toque ampla */
    font-size: 1.1rem !important; /* Digitação legível sem zoom forçado no celular */
    background-color: #ffffff !important;
    border: 2px solid var(--border-color) !important;
    border-radius: var(--radius-md) !important;
    color: var(--text-main) !important;
    outline: none !important;
    transition: all 0.2s ease !important;
}

.card-atalho input:focus,
.card-atalho select:focus {
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 4px rgba(2, 132, 199, 0.2) !important;
}

/* Botões Principais de Ação */
.card-atalho button,
.btn-consultar {
    background-color: var(--primary) !important;
    color: #ffffff !important;
    border: none !important;
    padding: 16px 28px !important;
    border-radius: var(--radius-md) !important;
    font-weight: 700 !important;
    font-size: 1.05rem !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    min-height: 52px; /* Touch target ideal */
}

.card-atalho button:hover,
.btn-consultar:hover {
    background-color: var(--primary-hover) !important;
    transform: translateY(-2px) !important;
    box-shadow: var(--shadow-md) !important;
}

/* 5. Grade de Serviços (Cards Clicáveis de Alta Visibilidade) */
.mobile-services-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
    gap: 20px !important;
    margin-bottom: 36px !important;
}

.mobile-card-link {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 20px !important;
    background: var(--bg-card) !important;
    border: 2px solid #e2e8f0 !important;
    border-radius: var(--radius-md) !important;
    text-decoration: none !important;
    color: inherit !important;
    box-shadow: var(--shadow-sm) !important;
    transition: all 0.25s ease !important;
}

.mobile-card-link:hover {
    border-color: var(--primary) !important;
    transform: translateY(-4px) !important;
    box-shadow: var(--shadow-md) !important;
}

.card-icon-circle.blue-icon {
    width: 52px !important;
    height: 52px !important;
    border-radius: 50% !important;
    background: var(--primary-light) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    transition: all 0.2s ease !important;
}

.card-icon-circle.blue-icon i {
    font-size: 1.3rem !important;
    color: var(--primary) !important;
}

.mobile-card-link:hover .card-icon-circle.blue-icon {
    background: var(--primary) !important;
}

.mobile-card-link:hover .card-icon-circle.blue-icon i {
    color: #ffffff !important;
}

.card-info h4 {
    margin: 0 0 4px 0 !important;
    font-size: 1.1rem !important; /* Títulos dos cards bem visíveis */
    color: var(--text-main) !important;
    font-weight: 700 !important;
}

.card-info p {
    margin: 0 !important;
    font-size: 0.92rem !important;
    color: var(--text-muted) !important;
}

.card-arrow {
    font-size: 1.2rem !important;
    color: var(--border-color) !important;
    transition: all 0.2s ease !important;
}

.mobile-card-link:hover .card-arrow {
    color: var(--primary) !important;
    transform: translateX(6px) !important;
}

/* 6. Listas de Unidades e Itens Informativos */
.card-atalho ul li {
    padding: 18px 20px !important;
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: var(--radius-md) !important;
    margin-bottom: 12px !important;
}

.card-atalho ul li strong {
    font-size: 1.1rem !important;
}

.card-atalho ul li span {
    font-size: 0.85rem !important;
    font-weight: 700 !important;
}

/* Ajustes para Telas Pequenas (Smartphones) */
@media (max-width: 640px) {
    .main-header h2 {
        font-size: 1.8rem !important;
    }
    
    .card-atalho {
        padding: 20px !important;
    }

    .form-consulta-sus {
        flex-direction: column !important;
    }

    .card-atalho button, 
    .btn-consultar {
        width: 100% !important;
    }
}

/* ==========================================================================
   ESTILOS DO BANNER DE DESTAQUE E MÍDIAS DA HOME (INDEX.HTML)
   ========================================================================== */

.secao-header-midias {
    margin-bottom: 20px;
}

/* Banner de Destaque */
.banner-destaque-home {
    background: linear-gradient(135deg, #0f172a 0%, #0284c7 100%);
    border-radius: 16px;
    padding: 32px 28px;
    color: #ffffff;
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.08);
    margin-bottom: 28px;
}

.banner-badge {
    display: inline-block;
    background-color: rgba(56, 189, 248, 0.2);
    color: #38bdf8;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 12px;
}

.banner-destaque-home h2 {
    font-size: 1.75rem !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    margin: 0 0 10px 0 !important;
    line-height: 1.3;
}

.banner-destaque-home p {
    font-size: 1.05rem !important;
    color: #e0f2fe !important;
    margin: 0 0 20px 0 !important;
    max-width: 650px;
}

.btn-banner-home {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background-color: #38bdf8;
    color: #0f172a;
    padding: 12px 24px;
    border-radius: 10px;
    font-weight: 800;
    font-size: 0.95rem;
    text-decoration: none;
    transition: all 0.2s ease;
}

.btn-banner-home:hover {
    background-color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Grid de Notícias */
.noticias-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
}

.card-noticia {
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 14px;
    overflow: hidden;
    transition: all 0.25s ease;
}

.card-noticia:hover {
    border-color: #0284c7;
    transform: translateY(-4px);
    box-shadow: 0 10px 20px -5px rgba(15, 23, 42, 0.12);
}

.noticia-img-placeholder {
    height: 110px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.2rem;
    color: #ffffff;
}

.blue-bg { background: linear-gradient(135deg, #0284c7, #38bdf8); }
.green-bg { background: linear-gradient(135deg, #15803d, #4ade80); }

.noticia-body {
    padding: 18px 20px;
}

.noticia-tag {
    font-size: 0.78rem;
    font-weight: 800;
    color: #0284c7;
    text-transform: uppercase;
    display: block;
    margin-bottom: 6px;
}

.noticia-tag.tag-green { color: #15803d; }

.noticia-body h4 {
    font-size: 1.1rem !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    margin: 0 0 8px 0 !important;
    line-height: 1.35;
}

.noticia-body p {
    font-size: 0.92rem !important;
    color: #475569 !important;
    margin: 0 0 14px 0 !important;
    line-height: 1.5;
}

.noticia-data {
    font-size: 0.82rem;
    color: #94a3b8;
    font-weight: 600;
}   

/* ==========================================================================
   ESTILOS DE BANNERS E NOTÍCIAS REALISTAS (ESTILO PREFEITURA)
   ========================================================================== */

/* Container do Banner Principal */
.banner-carrossel-container {
    width: 100%;
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 35px;
    background-color: #f8fafc;
    border: 1px solid #e2e8f0;
}

.banner-item {
    display: block;
    width: 100%;
}

.banner-img {
    width: 100%;
    height: auto;
    max-height: 280px;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease;
}

.banner-item:hover .banner-img {
    transform: scale(1.01);
}

/* Título da Seção Notícias */
.noticias-titulo-principal {
    font-size: 1.8rem !important;
    font-weight: 800 !important;
    color: #0b436a !important;
    text-align: center;
    margin-bottom: 25px !important;
}

/* Layout do Grid de Notícias */
.noticias-grid-oficial {
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: 20px;
    margin-bottom: 25px;
}

/* Card Destaque Grande (Esquerda) */
.card-noticia-oficial {
    background: #ffffff;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid #e2e8f0;
    position: relative;
}

.card-noticia-oficial a {
    text-decoration: none;
    color: inherit;
    display: block;
}

.noticia-thumb-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 260px;
}

.noticia-thumb-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.noticia-overlay-titulo {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0) 100%);
    padding: 20px 16px 14px 16px;
}

.noticia-overlay-titulo h4 {
    color: #ffffff !important;
    font-size: 1.15rem !important;
    font-weight: 700 !important;
    margin: 0 !important;
    line-height: 1.3;
}

/* Coluna de Notícias Menores (Direita) */
.noticias-coluna-secundarias {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.card-noticia-horizontal {
    background: #ffffff;
    border-radius: 10px;
    border: 1px solid #e2e8f0;
    overflow: hidden;
    transition: border-color 0.2s, transform 0.2s;
}

.card-noticia-horizontal:hover {
    border-color: #0b436a;
    transform: translateY(-2px);
}

.card-noticia-horizontal a {
    display: flex;
    align-items: center;
    gap: 14px;
    text-decoration: none;
    padding: 10px;
}

.thumb-mini {
    width: 110px;
    height: 80px;
    flex-shrink: 0;
    border-radius: 6px;
    overflow: hidden;
}

.thumb-mini img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.info-mini {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.data-noticia {
    font-size: 0.75rem;
    font-weight: 700;
    color: #64748b;
}

.info-mini h4 {
    font-size: 0.92rem !important;
    font-weight: 700 !important;
    color: #1e293b !important;
    margin: 0 !important;
    line-height: 1.35;
}

/* Botão Veja Todas */
.container-btn-veja-todas {
    text-align: center;
    margin-top: 20px;
    margin-bottom: 40px;
}

.btn-veja-todas {
    display: inline-block;
    padding: 10px 32px;
    border: 2px solid #0b436a;
    color: #0b436a;
    font-weight: 800;
    font-size: 0.85rem;
    border-radius: 6px;
    text-decoration: none;
    transition: all 0.2s;
    letter-spacing: 0.5px;
}

.btn-veja-todas:hover {
    background-color: #0b436a;
    color: #ffffff;
}

/* Responsividade Mobile */
@media (max-width: 768px) {
    .noticias-grid-oficial {
        grid-template-columns: 1fr;
    }
    
    .noticia-thumb-wrapper {
        min-height: 200px;
    }
}

/* Layout Principal do Grid de Notícias */
.noticias-grid-oficial {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 20px;
    align-items: start;
    margin-bottom: 25px;
}

/* Coluna de Notícias Secundárias com Rolagem Suave */
.noticias-coluna-secundarias {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-height: 580px; /* Limita a altura para alinhar com o destaque */
    overflow-y: auto;  /* Permite rolar os cards se houver muitos */
    padding-right: 6px;
}

/* Personalização da barra de rolagem */
.noticias-coluna-secundarias::-webkit-scrollbar {
    width: 6px;
}
.noticias-coluna-secundarias::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 4px;
}
.noticias-coluna-secundarias::-webkit-scrollbar-thumb:hover {
    background: #0b436a;
}

/* Card Horizontal Mini */
.card-noticia-horizontal {
    background: #ffffff;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    overflow: hidden;
    transition: all 0.2s ease;
}

.card-noticia-horizontal:hover {
    border-color: #0b436a;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.card-noticia-horizontal a {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    padding: 8px 10px;
}

.thumb-mini {
    width: 100px;
    height: 70px;
    flex-shrink: 0;
    border-radius: 6px;
    overflow: hidden;
    background-color: #f1f5f9;
}

.thumb-mini img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.info-mini {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.data-noticia {
    font-size: 0.72rem;
    font-weight: 700;
    color: #64748b;
}

.info-mini h4 {
    font-size: 0.88rem !important;
    font-weight: 700 !important;
    color: #1e293b !important;
    margin: 0 !important;
    line-height: 1.3;
}

/* Responsividade para Telas Menores */
@media (max-width: 850px) {
    .noticias-grid-oficial {
        grid-template-columns: 1fr;
    }
    
    .noticias-coluna-secundarias {
        max-height: none; /* Remove limite no mobile */
        overflow-y: visible;
    }
}

/* BANNER DE BOAS-VINDAS (HERO) */
.banner-boas-vindas {
    position: relative;
    width: 100%;
    height: 220px;
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 30px;
    background: url('../img/fotos/escola-monte-carlo.png') center/cover no-repeat; /* Coloque aqui a imagem panorâmica da cidade */
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.banner-overlay {
    position: absolute;
    inset: 0;
    background: rgba(11, 67, 106, 0.65); /* Filtro escuro/azulado por cima da imagem */
    z-index: 1;
}

.banner-conteudo {
    position: relative;
    z-index: 2;
    color: #ffffff;
    padding: 0 20px;
    max-width: 700px;
}

.tag-iluminado {
    display: inline-block;
    background-color: #f59e0b;
    color: #000000;
    font-size: 0.75rem;
    font-weight: 800;
    padding: 4px 12px;
    border-radius: 20px;
    margin-bottom: 10px;
    text-transform: uppercase;
}

.banner-conteudo h1 {
    font-size: 1.8rem;
    font-weight: 800;
    margin-bottom: 8px;
    color: #ffffff;
}

.banner-conteudo p {
    font-size: 0.9rem;
    opacity: 0.95;
    margin: 0;
    line-height: 1.4;
}

/* EFECTO DE TRANSIÇÃO AUTOMÁTICA DE IMAGENS NO BANNER BOAS-VINDAS */
.card-destaque-ilha {
    position: relative;
    background-size: cover;
    background-position: center;
    transition: background-image 1.2s ease-in-out;
    animation: trocarFotosBanner 10s infinite ease-in-out;
}

@keyframes trocarFotosBanner {
    0%, 45% {
        background-image: linear-gradient(rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.45)), 
                          url('../img/fotos/escola-monte-carlo.png');
    }
    50%, 95% {
        background-image: linear-gradient(rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.45)), 
                          url('../img/fotos/boqueirao-sul.png');
    }
    100% {
        background-image: linear-gradient(rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.45)), 
                          url('../img/fotos/escola-monte-carlo.png');
    }
}

/* Efeito de Cursor nos cards clicáveis */
.card-noticia-horizontal {
    cursor: pointer;
}

/* Animação ao trocar a imagem de destaque */
.noticia-thumb-wrapper img {
    transition: opacity 0.3s ease-in-out, transform 0.3s ease;
}

.trocando-noticia {
    opacity: 0.3;
}

.container-cards-servicos {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

@media (min-width: 992px) {
            .mobile-services-grid {
                grid-template-columns: repeat(4, 1fr) !important;
    }
}

/* Mobile-First Base Styles */
        .protocolo-wrapper {
            padding: 16px;
            max-width: 800px;
            margin: 0 auto;
        }

        .protocolo-card {
            background: #ffffff;
            border-radius: 12px;
            padding: 20px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.06);
            border: 1px solid #e2e8f0;
            margin-bottom: 20px;
        }

        .form-section-title {
            font-size: 1rem;
            font-weight: 700;
            color: #0284c7;
            margin-bottom: 16px;
            padding-bottom: 8px;
            border-bottom: 2px solid #e2e8f0;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .form-grid {
            display: grid;
            grid-template-columns: 1fr;
            gap: 16px;
        }

        .form-group {
            display: flex;
            flex-direction: column;
            gap: 6px;
        }

        .form-group label {
            font-size: 0.875rem;
            font-weight: 600;
            color: #334155;
        }

        .form-group label span {
            color: #ef4444;
        }

        .form-input, .form-select, .form-textarea {
            width: 100%;
            padding: 12px;
            border: 1px solid #cbd5e1;
            border-radius: 8px;
            font-size: 0.95rem;
            color: #1e293b;
            background-color: #f8fafc;
            box-sizing: border-box;
            outline: none;
            transition: all 0.2s ease;
        }

        .form-input:focus, .form-select:focus, .form-textarea:focus {
            background-color: #ffffff;
            border-color: #0284c7;
            box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.15);
        }

        /* Radio Buttons Tipo de Pessoa */
        .tipo-pessoa-group {
            display: flex;
            gap: 20px;
            margin-bottom: 10px;
        }

        .radio-option {
            display: flex;
            align-items: center;
            gap: 6px;
            font-size: 0.9rem;
            color: #334155;
            cursor: pointer;
        }

        /* Botão Enviar */
        .btn-submit-protocolo {
            width: 100%;
            background: #0284c7;
            color: #ffffff;
            border: none;
            padding: 14px;
            border-radius: 8px;
            font-size: 1rem;
            font-weight: 700;
            cursor: pointer;
            transition: background 0.2s;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
        }

        .btn-submit-protocolo:hover {
            background: #0369a1;
        }

        /* Modal / Caixa de Confirmação */
        .protocolo-sucesso {
            display: none;
            background: #f0fdf4;
            border: 1px solid #bbf7d0;
            border-radius: 12px;
            padding: 20px;
            text-align: center;
            margin-top: 20px;
        }

        .protocolo-sucesso h3 {
            color: #166534;
            margin-bottom: 8px;
        }

        .numero-protocolo-box {
            display: inline-block;
            background: #166534;
            color: #ffffff;
            padding: 8px 16px;
            border-radius: 6px;
            font-weight: bold;
            font-size: 1.2rem;
            margin: 12px 0;
            letter-spacing: 1px;
        }

        /* Desktop Adjustments (Min-width: 640px) */
        @media (min-width: 640px) {
            .form-grid-2 {
                grid-template-columns: 1fr 1fr;
            }
            .form-grid-3 {
                grid-template-columns: 1fr 1fr 1fr;
            }
        }