/* style.css */

/* -------------------------------------------------------------------------- */
/* 1. FONTES (Carregamento via CDN)                                           */
/* -------------------------------------------------------------------------- */
@import url('https://fonts.cdnfonts.com/css/karnivore');
@import url('https://fonts.cdnfonts.com/css/twenty-seven');
@import url('https://fonts.cdnfonts.com/css/the-led-display-st');
/* @import url('https://fonts.cdnfonts.com/css/red-hat-display-2'); // Fonte de uso geral (não essencial para LCD) */
@import url('https://fonts.cdnfonts.com/css/the-display-st');
@import url('https://fonts.cdnfonts.com/css/minisystem');
@import url('https://fonts.cdnfonts.com/css/edit-undo-brk');
@import url('https://fonts.cdnfonts.com/css/ultraled-st');
@import url('https://fonts.cdnfonts.com/css/digital-dystopia');


/* -------------------------------------------------------------------------- */
/* 2. ESTILOS BASE DO LETREIRO (COM CORREÇÕES FINAIS DE ALINHAMENTO)          */
/* -------------------------------------------------------------------------- */

/* Variáveis CSS para controle de tamanho padrão */
:root {
    --lcd-font-size: 30px;
    --lcd-height: 60px;
    --lcd-width: 100%; /* Padrão para o Admin */
}

/* Base do Container (Admin Preview e Frontend Visor) */
#letreiro-container, #redemidias-lcd-visor {
    /* CORREÇÃO DE PRIORIDADE: !important garante que o valor do painel seja usado */
    height: var(--lcd-height) !important;
    font-size: var(--lcd-font-size) !important;

    /* CORREÇÃO DE ALINHAMENTO: line-height para centralizar melhor fontes retro. */
    line-height: 1.2em;

    width: var(--lcd-width);
    overflow: hidden;
    white-space: nowrap;
    display: flex;
    align-items: center;    /* Centralização Vertical (flex) */

    /* *** CORREÇÃO CHAVE: GARANTE CENTRALIZAÇÃO HORIZONTAL DA DIV PAI *** */
    /* Anula o 'flex-start' que pode ser forçado por temas/Elementor no contêiner */
    justify-content: center !important;
    /* ******************************************************************* */

    text-align: center;
    box-sizing: border-box;
    padding: 0 5px;
}

/* Aplica a largura 95vw APENAS no Frontend para ocupar quase a tela toda */
#redemidias-lcd-visor {
    width: 95vw;
    max-width: 1200px;
    margin: 0 auto;
}

/* -------------------------------------------------------------------------- */
/* 3. ESTILOS DE COR E EFEITO (SEM ALTERAÇÃO)                                 */
/* -------------------------------------------------------------------------- */

/* Estilo 1: Verde */
.style-1 {
    background-color: rgb(0,64,0);
    border-top: 3px solid #000000ee;
    border-left: 3px solid #000000ee;
    border-bottom: 1px solid #cfcfcf33;
    border-right: 1px solid #cfcfcf33;
    border-radius: 10px;
    box-shadow: 0 0 50px #000000ee inset;
    text-shadow: 0 0 20px #ffff00cc;
    margin: 5px;
    color: #00ff77cc;
}

/* Estilo 2: Azul */
.style-2 {
    background-color: rgb(0,0,128);
    text-align:center;
    line-height: 50px;
    font-size:32pt;
    border-top: 3px solid #000000cc;
    border-left: 3px solid #000000cc;
    border-bottom: 1px solid #cfcfcf33;
    border-right: 1px solid #cfcfcf33;
    border-radius: 10px;
    box-shadow: 0 0 50px #000000ee inset;
    text-shadow: 0 0 20px #00ffffcc;
    margin: 5px;
    color: #00ffffcc;
}

/* Estilo 3: Antigo */
.style-3 {
    background-color: rgb(127,138,70);
    border-top: 3px solid #000000ce;
    border-left: 3px solid #000000ce;
    border-bottom: 1px solid #cfcfcf33;
    border-right: 1px solid #cfcfcf33;
    border-radius: 10px;
    box-shadow: 0 0 50px #000000ee inset;
    text-shadow: 0 0 20px #ffff0022;
    color: #000000aa;
    line-height: 50px;
    margin: 5px;
}

/* Estilo 4: Vermelho */
.style-4 {
    background-color: rgb(128,0,0);
    text-align:center;
    line-height: 50px;
    font-size:32pt;
    border-top: 3px solid #000000ee;
    border-left: 3px solid #000000ee;
    border-bottom: 1px solid #cfcfcf33;
    border-right: 1px solid #cfcfcf33;
    border-radius: 10px;
    box-shadow: 0 0 50px #000000ee inset;
    text-shadow: 0 0 20px #ffff00cc;
    margin: 5px;
    color: #ff9999cc;
}

/* Estilo 5: Desligado */
.style-5-off {
    background-color: rgb(20,20,20);
    border-top: 3px solid #000000ce;
    border-left: 3px solid #000000ce;
    border-bottom: 1px solid #cfcfcf33;
    border-right: 1px solid #cfcfcf33;
    border-radius: 10px;
    box-shadow: 0 0 50px #000000ee inset;
    text-shadow: 0 0 5px #55555544;
    color: #000000aa;
}

/* -------------------------------------------------------------------------- */
/* 4. LAYOUT E ANIMAÇÃO (COM CORREÇÕES DE ALINHAMENTO)                        */
/* -------------------------------------------------------------------------- */
.escondido { display: none !important; }

/* Correção de Alinhamento Flexbox para Containers Estáticos */
#info-fixa-front {
    /* Força o alinhamento horizontal ao centro para anular flex-start do tema/Elementor */
    /* Essa regra já estava OK, mas o reforço na div pai é mais abrangente. */
    justify-content: center !important;
}
/* Layouts */
#ticker-texto, #ticker-texto-front {
    white-space: nowrap;
}
#info-fixa, #info-fixa-front {
    width: 100%;
    display: flex;
    align-items: center;
    height: 100%;
}

/* Layout Telefone/Região */
.layout-tel-regiao {
    justify-content: center; /* Centraliza o bloco de spans horizontalmente */
}
.layout-tel-regiao span { flex: 1; }
.layout-tel-regiao span:first-child { text-align: right; padding-right: 10px; }
.layout-tel-regiao span:last-child { text-align: left; padding-left: 10px; }

/* Layout Contrate Agora (CORRIGIDO com !important e ID) */
#info-fixa-front.layout-contrate-agora {
    width: 100% !important; /* Garante que ele use todo o espaço */
}
.layout-contrate-agora span {
    width: 100%;
    /* Força a centralização do TEXTO interno */
    text-align: center !important;
}

/* Links */
.chamada-link { cursor: pointer; }

/* Animações */
@keyframes scroll-left {
    0% { transform: translateX(100%); }
    100% { transform: translateX(-100%); }
}
@keyframes piscar-anim {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}
.piscar {
    animation: piscar-anim 0.5s step-end infinite;
}