/* ==========================================================================
   Tema de campanha — Outubro Rosa.
   Carregado DEPOIS de design-system.css e publico.css: troca os tokens de
   cor e cobre os poucos pontos onde o verde/laranja está escrito por extenso
   (sombras em rgba, degradê do fundo, balões do tour).

   Para voltar ao visual normal basta tirar o <link> deste arquivo e o
   include da faixa de campanha nos cabeçalhos. Nada aqui muda estrutura.
   ========================================================================== */

:root {
    /* Os nomes continuam "leaf" e "papaya" porque é deles que o resto do CSS
       depende; o que muda é o valor. */
    --leaf:       #c2185b;   /* rosa-framboesa: texto e botões (5,9:1 no branco) */
    --leaf-700:   #880e4f;
    --leaf-light: #fce4ec;
    --papaya:     #d81b60;   /* cabeçalho da tabela */
    --papaya-700: #ad1457;

    --rosa-claro:  #f8bbd0;
    --rosa-medio:  #f06292;
    --rosa-rgb:    194, 24, 91;

    /* Neutros puxados levemente para o rosa, para o cartão não parecer
       cinza-azulado no meio do fundo rosado. */
    --off-white:    #fffafc;
    --cinza-fundo:  #fdf3f7;
    --border:       #f2dce6;
    --border-sutil: #f9ebf1;
    --borda-forte:  #e8c3d3;

    --destaque-sup: #fde7ef;
}

/* --- Fundo da página ------------------------------------------------
   Degradê rosado com laços bem discretos ao fundo. O desenho é o mesmo
   traçado do ícone "laco", embutido para não custar uma requisição. */
body {
    background-color: #fdeef4;
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240' viewBox='0 0 240 240'%3E%3Cg fill='none' stroke='%23e91e63' stroke-opacity='.10' stroke-width='3.4' stroke-linejoin='round'%3E%3Cpath transform='translate(30 34) scale(1.6) rotate(-12 12 12)' d='M15.5 21 9.2 11.6A4.2 4.2 0 1 1 14.8 11.6L8.5 21'/%3E%3Cpath transform='translate(160 150) scale(1.2) rotate(14 12 12)' d='M15.5 21 9.2 11.6A4.2 4.2 0 1 1 14.8 11.6L8.5 21'/%3E%3C/g%3E%3C/svg%3E"),
        radial-gradient(1200px 600px at 0% 0%, #fde2ec 0%, transparent 60%),
        radial-gradient(900px 600px at 100% 100%, #fbd3e3 0%, transparent 60%),
        linear-gradient(160deg, #fff5f9 0%, #fdeef4 50%, #fbe0eb 100%);
    background-attachment: fixed;
}

:focus-visible { outline-color: var(--leaf); }

.container {
    border-color: rgba(255,255,255,.8);
    box-shadow:
        0 18px 50px rgba(var(--rosa-rgb), .14),
        0 2px 6px rgba(var(--rosa-rgb), .06);
}

/* --- Banner da campanha ---------------------------------------------
   Ocupa a largura do cartão inteira. O fundo é a cor dominante da arte,
   para não piscar em branco enquanto a imagem carrega. */
.faixa-campanha {
    background: #5b1fb8;
    line-height: 0;
}

.faixa-campanha img {
    display: block;
    width: 100%;
    height: auto;
}

.icone-laco {
    stroke-width: 3.2;
    stroke-linecap: butt;
}

/* --- Cabeçalho ------------------------------------------------------ */
.marca-titulo { color: var(--leaf-700); }

/* Laço pequeno ao lado do título: discreto, só para amarrar o tema. */
.marca-titulo .icone-laco {
    width: .8em;
    height: .8em;
    margin-left: 6px;
    vertical-align: -0.05em;
    color: var(--rosa-medio);
}

.btn-fantasma:hover { background: var(--leaf-light); color: var(--leaf-700); }

/* --- Abas ----------------------------------------------------------- */
.aba:hover { background: rgba(var(--rosa-rgb), .05); }

/* --- Botões e campos ------------------------------------------------ */
.btn-primario {
    background: linear-gradient(135deg, #d81b60 0%, #ad1457 100%);
    box-shadow: 0 2px 8px rgba(var(--rosa-rgb), .28);
}
.btn-primario:hover { box-shadow: 0 4px 14px rgba(var(--rosa-rgb), .38); }

.entrada:focus,
.campo input:focus,
.campo select:focus,
.campo textarea:focus {
    border-color: var(--rosa-medio);
    box-shadow: 0 0 0 3px rgba(var(--rosa-rgb), .12);
}

/* --- Fichas de filtro ativo ----------------------------------------- */
.ficha {
    color: var(--leaf-700);
    border-color: rgba(var(--rosa-rgb), .25);
}
.ficha:hover { background: var(--leaf-light); }

/* --- Resumo --------------------------------------------------------- */
.resumo-resultados {
    background: linear-gradient(90deg, #fdeef4, #fff6f9 50%, #fdeef4);
    border-color: var(--border);
}

/* --- Tabela --------------------------------------------------------- */
.tabela-wrapper { border-color: var(--border); }

.tabela tbody tr:nth-child(even) { background: #fffbfd; }
.tabela tbody tr:hover           { background: #fdf0f5; }

.numero-ramal { color: var(--leaf-700); }

/* Principal: antes azul, que destoava do tema. Fica num rosa um pouco mais
   cheio que o zebrado; a etiqueta com estrela continua dizendo o que é. */
.linha-principal,
.tabela tbody tr.linha-principal { background: #fdeaf1; }
.tabela tbody tr.linha-principal:hover { background: #fbdde8; }
.linha-principal .numero-ramal { color: var(--leaf-700); }
.etiqueta-principal { background: #fbd3e2; color: #880e4f; }

/* Emergência continua vermelha — é sinal de alerta, não decoração. A borda
   à esquerda separa bem do rosa da linha principal. */
.tabela tbody tr.linha-emergencia { background: var(--vermelho-sup); box-shadow: inset 4px 0 0 var(--vermelho); }

.etiqueta-livre { background: var(--leaf-light); color: var(--leaf-700); }

/* --- Cartões (celular) ---------------------------------------------- */
.cartao-ramal { border-left-color: var(--rosa-claro); }
.cartao-ramal.linha-principal { border-left-color: var(--leaf); background: #fdeaf1; }
.linha-principal .cartao-ramal-numero { color: var(--leaf-700); background: #fbd3e2; }

/* --- Paginação ------------------------------------------------------ */
.paginacao .atual {
    background: linear-gradient(135deg, #d81b60 0%, #ad1457 100%);
    border-color: #ad1457;
}

/* --- Aviso flutuante e carregamento --------------------------------- */
#toast-notification { background: linear-gradient(135deg, #d81b60, #ad1457); }
#conteudo.carregando::after { border-top-color: var(--leaf); }

/* --- Atalho do administrador ---------------------------------------- */
.admin-corner .admin-link { background: #880e4f; }
.admin-corner .admin-link-sair { background: #6d4c5c; }

/* --- Modal ---------------------------------------------------------- */
.modal-fundo { background: rgba(74, 20, 44, .55); }

/* --- Rodapé --------------------------------------------------------- */
.rodape { background: var(--cinza-fundo); }

/* --- Tour guiado ----------------------------------------------------
   O tour.js injeta o próprio <style> com o verde escrito por extenso.
   O prefixo `html` só aumenta a especificidade para vencer aquelas regras,
   que entram depois desta folha. */
html #tour-balao,
html #tour-menu,
html #tour-intro { border-color: var(--leaf); }
html #tour-balao[data-arrow="left"]::before  { border-right-color: var(--leaf); }
html #tour-balao[data-arrow="right"]::before { border-left-color: var(--leaf); }
html #tour-balao h4,
html #tour-intro h3 { color: var(--leaf); }
html #tour-menu button:hover { background: var(--leaf-light); color: var(--leaf); }
html #tour-balao .tour-proximo,
html #tour-intro .tour-comecar {
    background: linear-gradient(135deg, #d81b60 0%, #ad1457 100%);
    box-shadow: 0 2px 8px rgba(var(--rosa-rgb), .3);
}

/* ---------------------------------------------------------------- */
/* Responsivo                                                       */
/* ---------------------------------------------------------------- */

@media (max-width: 768px) {
    body { background-attachment: scroll; }
    /* Em tela estreita o título quebra linha e o laço ficava sozinho na
       linha de baixo; o banner logo acima já dá o recado. */
    .marca-titulo .icone-laco { display: none; }
}