/* =============================================================================
   O ANEL DE FOCO SO APARECE PARA QUEM NAVEGA PELO TECLADO
   -----------------------------------------------------------------------------
   Clicar num link ou num card deixava um retangulo preto em volta dele, que
   ficava ali ate o proximo clique. E o anel de foco do navegador, e ele estava
   certo em existir - so estava aparecendo para a pessoa errada.

   POR QUE NAO `outline: none` E PONTO. Esse e o conserto que se acha em todo
   lugar, e ele apaga o anel TAMBEM para quem navega pelo teclado - e aí quem
   usa Tab perde a unica pista de onde esta na pagina. Numa tela de login isso
   quer dizer digitar a senha sem saber em qual campo.

   `:focus-visible` e o navegador respondendo a pergunta certa: ele so marca o
   elemento quando o foco veio do TECLADO. Entao o anel some no clique e fica
   no Tab, que e exatamente o que se queria.
   ============================================================================= */
:focus:not(:focus-visible) {
    outline: none;
}

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

ul {
    list-style: none;
}

a {
    text-decoration: none !important;
    color: #000;
    transition: all ease 0.5s;
}

a:hover {
    color: #002060;
}

body {
    font-family: 'Poppins', sans-serif;
    zoom: 1;
}

/* =============================================================================
   A BARRA DE ROLAGEM DO PAINEL

   Era trilha #212A3E (azul escuro) e cursor #9BA4B5 (cinza azulado) - duas
   cores que nao existem em lugar nenhum deste painel. Do lado do menu roxo
   elas apareciam como uma faixa azulada de tela inteira, e a primeira leitura
   era de que algo estava fora do lugar.

   Agora e a mesma linguagem do menu: calha transparente e cursor magenta com
   o truque da borda - 3px de borda transparente e o fundo pintando so dentro
   dela (background-clip: padding-box), o que da um cursor fino, arredondado e
   com folga das margens.
   ============================================================================= */
html {
    scrollbar-width: thin;
    scrollbar-color: rgba(231, 73, 231, .32) transparent;
}

body::-webkit-scrollbar {
    width: 12px;
    height: 12px;
    background: transparent;
}

body::-webkit-scrollbar-track {
    background: transparent;
}

body::-webkit-scrollbar-thumb {
    border: 3px solid transparent;
    border-radius: 999px;
    background: rgba(231, 73, 231, .3);
    background-clip: padding-box;
}

body::-webkit-scrollbar-thumb:hover {
    background: rgba(231, 73, 231, .5);
    background-clip: padding-box;
}

body::-webkit-scrollbar-corner {
    background: transparent;
}

.img-fluid {
    max-width: 100%;
}

.scroll {
    max-height: 35em;
}

/* AS TRES REGRAS DE BARRA QUE MORAVAM AQUI SAIRAM.

   Elas pintavam a trilha de #9BA4B5 (cinza claro) e o cursor de #212A3E
   (azul escuro) - cores de um painel claro que este nunca foi. Nenhum HTML
   usava a classe .pnl-menu: eram regras orfas, sobra de algo removido.

   Ficaram invisiveis ate o menu novo nascer com esse mesmo nome de classe, e
   entao passaram a desenhar uma trilha cinza clara colada na borda do menu
   escuro. A barra do menu esta no bloco O MENU DO PAINEL, mais abaixo. */

.form-control:focus {
    border-color: #002060 !important;
}

.txt-center {
    text-align: center !important;
}

/* O RÓTULO NO MEIO, E ISSO PRECISA SER DITO.

   `form * { text-align: justify }` alcança o <input type="submit"> como
   alcança todo o resto. Justificado, um rótulo de uma linha só encosta na
   ESQUERDA - e no editor, onde o botão ocupa a largura toda da coluna, o
   "ENVIAR" ficava num canto de uma barra de 444px.

   Vai na regra base, e não só na do editor: nas telas antigas o botão tem
   7em de recuo de cada lado, então ali o desvio é pequeno - mas é o mesmo
   desvio, e não há razão para deixá-lo. */
.btn-principal {
    width: auto;
    padding: 0.8em 7em;
    text-align: center;
    border-radius: 10px;
    background: #D9D9D9;
    color: #212A3E;
    border: 1px solid #D9D9D9;
    text-transform: uppercase;
    transition: all ease 0.5s;
}

.btn-principal:hover {
    border: 1px solid #D9D9D9;
    background-color: transparent;
    color: #D9D9D9;
}

.btn-principal.excluir {
    background: #F44336;
    border: 1px solid #F44336;
}

.btn-principal.excluir:hover {
    border: 1px solid #F44336;
    background-color: transparent;
    color: #F44336;
}

.btn-tabela {
    padding: 0.7em 3em;
    border-radius: 10px;
    font-weight: 400;
    background: #039BE5;
    color: #fff;
    border: 1px solid #039BE5;
    text-transform: uppercase;
    transition: all ease 0.5s;
}

.btn-tabela:hover {
    border: 1px solid #002060;
    background-color: #002060;
}

.btn-tabela.atendimento {
    background: #04ff00;
    border: 1px solid #04ff00;
}

.btn-tabela.atendimento:hover {
    border: 1px solid #2E7D32;
    background-color: #2E7D32;
}

@media (max-width: 1440px) {
    .btn-principal {
        padding: 0.6em 3em;
        font-size: 12px;
    }

}

/*****************************************/

/* O desenho das telas de entrada mora no bloco TELAS DE ENTRADA,
   mais abaixo neste arquivo. */
form *{
    font-family: 'Poppins',sans-serif;
    /* ERA #7C7C7C, e sobre o cinza claro dos cards do painel (#D9D9D9) isso
       da 2,96:1 - abaixo do minimo de 3:1 em que ate texto grande ainda se
       le. Medido em cinco telas: o titulo dos cards, a contagem de cliques, a
       dica do campo de aviso, o nome das secoes.

       Nao veio da mudanca de fundo - o fundo destes textos e o card, e nao a
       pagina - e sim de sempre: apareceu ao medir a tela inteira depois de
       trocar o fundo. #5A5A5A sobe para 5,3:1 sem mudar o desenho: continua
       sendo o cinza secundario, so que legivel. */
    color: #5A5A5A;
    letter-spacing: 0.5px;
    outline: none;
    border: none;
    text-align: justify;
}
form h3{
    font-size: 32px;
    font-weight: 500;
    line-height: 42px;
    text-align: center;
}

label{
    display: block;
    margin-top: 30px;
    font-size: 16px;
    font-weight: 700;
}
label.form-info {
    color: #fff;
}
input{
    display: block;
    height: 50px;
    width: 100%;
    background-color: rgba(255,255,255,0.07);
    border-radius: 3px;
    padding: 0 10px;
    margin-top: 8px;
    font-size: 14px;
    font-weight: 300;
}
::placeholder{
    color: #e5e5e5;
}
button{
    margin-top: 50px;
    width: 100%;
    background-color: #ffffff;
    color: #080710;
    padding: 15px 0;
    font-size: 18px;
    font-weight: 600;
    border-radius: 5px;
    cursor: pointer;
}
.social{
  margin-top: 30px;
  display: flex;
}
.social div{
  background: red;
  width: 150px;
  border-radius: 3px;
  padding: 5px 10px 10px 5px;
  background-color: rgba(255,255,255,0.27);
  color: #eaf0fb;
  text-align: center;
}
.social div:hover{
  background-color: rgba(255,255,255,0.47);
}
.social .fb{
  margin-left: 25px;
}
.social i{
  margin-right: 4px;
}

/*******************************************/




/* =============================================================================
   O EDITOR DA PÁGINA
   Estrutura em admin/editor/. Desenho: canvas, "Painel novo · Conteúdo".

   Três colunas: as seções, os blocos da seção aberta, e os ajustes. A régua é a
   mesma do resto do painel - tudo o que é texto começa na mesma coluna dentro
   do seu bloco, e os rótulos de seção alinham com o conteúdo que anunciam.
   ============================================================================= */

.pnl-ed {
    display: flex;
    flex-direction: column;
    gap: 16px;
    font-family: 'Poppins', 'Roboto', Arial, sans-serif;
    color: #fff;
}

/* ---------------- o cabeçalho ---------------- */
.pnl-ed-topo {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
    padding: 16px 20px;
    border: 1px solid rgba(231, 73, 231, .16);
    border-radius: 14px;
    background: linear-gradient(120deg, rgba(80, 5, 128, .26) 0%, rgba(231, 73, 231, .07) 100%);
}

.pnl-ed-topo-quem {
    flex: 1 1 200px;
    min-width: 0;
}

.pnl-ed-nome {
    margin: 0 0 3px;
    overflow: hidden;
    font-size: 19px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -.3px;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #fff;
}

.pnl-ed-estado {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 0;
    color: #a98bb8;
    font-size: 12.5px;
}

.pnl-ed-bolinha {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
}

.pnl-ed-bolinha.ok  { background: #00b894; }
.pnl-ed-bolinha.off { background: #e17055; }

.pnl-ed-sep { color: #8a7598; }

/* AS ABAS. Elas são o coração do desenho novo: nove telas viram três palavras.
   Por isso ganham peso - são o único lugar da tela com fundo próprio. */
.pnl-ed-abas {
    display: flex;
    gap: 3px;
    padding: 3px;
    border: 1px solid rgba(231, 73, 231, .2);
    border-radius: 999px;
    background: rgba(12, 6, 17, .5);
}

.pnl-ed-aba {
    padding: 8px 20px;
    border-radius: 999px;
    color: #cdbcd6 !important;
    font-size: 13.5px;
    font-weight: 600;
    text-decoration: none !important;
    white-space: nowrap;
    transition: background .16s ease, color .16s ease;
}

.pnl-ed-aba:hover,
.pnl-ed-aba:focus-visible {
    background: rgba(231, 73, 231, .12);
    color: #fff !important;
}

.pnl-ed-aba-aqui {
    background: linear-gradient(90deg, #500580 0%, #b333c9 100%);
    color: #fff !important;
}

.pnl-ed-aba-aqui:hover {
    background: linear-gradient(90deg, #500580 0%, #b333c9 100%);
}

.pnl-ed-ver {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    flex-shrink: 0;
    padding: 9px 16px;
    border: 1px solid rgba(231, 73, 231, .3);
    border-radius: 10px;
    color: #cdbcd6 !important;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none !important;
}

.pnl-ed-ver:hover,
.pnl-ed-ver:focus-visible {
    background: rgba(231, 73, 231, .14);
    color: #fff !important;
}

/* ---------------- as três colunas ---------------- */
.pnl-ed-corpo {
    display: grid;
    grid-template-columns: 232px minmax(0, 1fr) 320px;
    gap: 14px;
    align-items: start;
}

/* COM O FORMULÁRIO ABERTO, A LARGURA MUDA DE DONO.

   Vazia, a terceira coluna é um cartão de recado e 320px bastam. Com o
   formulário dentro ela é onde o trabalho acontece, e 320px transformam
   cada campo de texto num campo ruim: o título de um card não cabe, o
   endereço muito menos. A lista ao lado encolhe, e pode - ela continua
   legível porque o nome do card tem reticências, e quem está editando
   está olhando para a direita. */
.pnl-ed-corpo-editando {
    grid-template-columns: 200px minmax(240px, 1fr) minmax(0, 540px);
}

@media (min-width: 1700px) {
    .pnl-ed-corpo-editando { grid-template-columns: 232px minmax(0, 1fr) 640px; }
}

/* COM A PRÉVIA LIGADA, SÃO SEMPRE TRÊS COLUNAS.

   A primeira tentativa foi acrescentar a prévia como QUARTA coluna, e não
   coube: o menu come 264px, e num monitor de 1600 sobram cerca de 1290 para
   o editor. Com seções + lista + formulário + prévia, a lista ficava com
   346px - o nome do card em três linhas e o interruptor por cima da
   miniatura. Quatro colunas magras são quatro colunas ruins.

   A regra que sobrou é simples de explicar: a prévia toma o lugar do que não
   se está usando. Sem card aberto ela substitui a coluna de ajustes, que
   estaria só com o recado "escolha um card"; com um card aberto ela
   substitui a lista, porque quem está editando está olhando para o
   formulário e para a página. O X do formulário traz a lista de volta.

   372px é a largura de um celular de 360 mais a moldura. Menos que isso e a
   prévia deixaria de mostrar a página como ela é para mostrar uma versão
   espremida que ninguém vai ver - e aí ela não serve para nada. */
@media (min-width: 1441px) {
    .pnl-ed-corpo-previa,
    .pnl-ed-corpo-previa.pnl-ed-corpo-editando {
        grid-template-columns: 200px minmax(0, 1fr) 372px;
    }

    /* O `:not(.pnl-ed-corpo-aba)` É NECESSÁRIO.

       Esta regra é da aba Conteúdo: lá, com a prévia ligada e nenhum card
       aberto, a coluna de ajustes estaria só com o recado "escolha um card" e
       a prévia toma o lugar dela.

       Nas abas Tema e Publicar a mesma classe carrega o MIOLO - o formulário
       inteiro. Sem esta exceção, ligar a prévia ali apagava o formulário: a
       coluna sumia, o quadro ficava 0x0 e a tela mostrava a prévia ao lado de
       um buraco. Medido. */
    .pnl-ed-corpo-previa:not(.pnl-ed-corpo-editando):not(.pnl-ed-corpo-aba) .pnl-ed-ajustes { display: none; }
    .pnl-ed-corpo-previa.pnl-ed-corpo-editando:not(.pnl-ed-corpo-aba) .pnl-ed-lista { display: none; }
}

/* Em tela bem larga a LISTA volta enquanto se edita: com espaço sobrando ela
   é útil, porque é por ela que se pula para o próximo card.

   A COLUNA DE AJUSTES VAZIA NÃO VOLTA NUNCA. Eu a tinha trazido de volta aqui
   também, e o resultado foi uma quarta coluna inteira ocupada por um cartão
   escrito "escolha um card" - ao lado de uma lista de cards para escolher.
   Espaço sobrando não é motivo para mostrar um recado; é motivo para dar a
   largura a quem tem conteúdo. */
@media (min-width: 1800px) {
    .pnl-ed-corpo-previa {
        grid-template-columns: 210px minmax(0, 1fr) 372px;
    }

    .pnl-ed-corpo-previa.pnl-ed-corpo-editando {
        grid-template-columns: 210px minmax(0, 1fr) 520px 372px;
    }

    .pnl-ed-corpo-previa.pnl-ed-corpo-editando .pnl-ed-lista { display: block; }
}

/* ============================================================================
   CELULAR E TABLET: O FORMULÁRIO VIRA UMA FOLHA QUE COBRE A TELA

   Empilhado, o formulário caía DEPOIS da lista: clicar num card mandava um
   formulário para baixo da tela, longe de onde o dedo estava, e quem não
   rolasse concluía que o clique não tinha feito nada. Pior ainda com a prévia
   ligada, que empurrava tudo mais para baixo.

   Aqui ele cobre a tela inteira, com o título e o Fechar parados no alto. É o
   que um celular faz com qualquer coisa que se abre: ocupa a tela e tem uma
   saída visível. Fechar volta para a lista, porque o X é um link para a mesma
   tela sem o card aberto - o caminho de volta não depende de JavaScript
   nenhum.
   ============================================================================ */
@media (max-width: 1200px) {
    /* O `.pnl-ed-corpo` a mais no seletor não é enfeite: sem ele, o
       `display: block` que devolve a coluna de ajustes abaixo de 1441 pesa
       igual e vence por vir depois. A folha virava um bloco comum, e o quadro
       do formulário desabava para os 150px que todo <iframe> tem por padrão -
       um formulário inteiro numa janelinha de três linhas. */
    .pnl-ed-corpo.pnl-ed-corpo-editando .pnl-ed-ajustes {
        position: fixed;
        inset: 0;
        z-index: 1200;
        display: flex;
        flex-direction: column;
        margin: 0;
        padding: 0;
        border: 0;
        border-radius: 0;
        background: #120a18;
    }

    /* O cabeçalho da folha fica parado: rolando um formulário longo, a saída
       não pode ficar para trás. */
    .pnl-ed-corpo.pnl-ed-corpo-editando .pnl-ed-ajustes-topo {
        flex-shrink: 0;
        margin: 0;
        padding: 14px 16px;
        border-bottom: 1px solid rgba(231, 73, 231, .16);
        background: #1b0f24;
    }

    /* O Fechar cresce: numa folha que cobre a tela ele é A saída, e alvo de
       dedo não é alvo de ponteiro. */
    .pnl-ed-corpo.pnl-ed-corpo-editando .pnl-ed-fechar {
        padding: 10px 16px;
        font-size: 13px;
    }

    .pnl-ed-corpo.pnl-ed-corpo-editando .pnl-ed-quadro {
        flex: 1 1 auto;
        height: auto;
        min-height: 0;
        border: 0;
        border-radius: 0;
    }

    /* A prévia sai da frente enquanto a folha está aberta: ela continua ali,
       atrás, e volta a aparecer quando o formulário fecha. Deixá-la rolando
       por baixo não ajuda ninguém e ainda carrega a página duas vezes. */
    .pnl-ed-corpo.pnl-ed-corpo-editando.pnl-ed-corpo-previa .pnl-ed-previa { display: none; }
}

/* Abaixo de 1441 nem três colunas mais a prévia cabem. Ela desce e ocupa a
   largura toda, e as três de cima voltam a ser o que são sem prévia -
   inclusive a lista, que empilhada não atrapalha ninguém e é por onde se
   troca de card. */
@media (max-width: 1440px) {
    .pnl-ed-corpo-previa,
    .pnl-ed-corpo-previa.pnl-ed-corpo-editando {
        grid-template-columns: 200px minmax(240px, 1fr) minmax(0, 480px);
    }

    .pnl-ed-corpo-previa .pnl-ed-lista,
    .pnl-ed-corpo-previa .pnl-ed-ajustes { display: block; }

    .pnl-ed-previa { grid-column: 1 / -1; }
}

.pnl-ed-secoes,
.pnl-ed-lista,
.pnl-ed-ajustes {
    padding: 16px 18px 18px;
    border: 1px solid rgba(231, 73, 231, .14);
    border-radius: 14px;
    background: rgba(231, 73, 231, .04);
}

/* O rótulo de cada coluna, na mesma linguagem do rótulo de grupo do menu -
   e na mesma régua: ele alinha com o CONTEÚDO que anuncia, e não com a borda
   do bloco. Medido na tinta: o nome das seções cai em 324 contra 311 do
   rótulo, e a pega dos blocos em 574 contra 558. Os 13px aqui fecham a
   coluna das seções; a dos blocos leva 3px a mais, logo abaixo. */
/* O título agora carrega o "i" da ajuda daquela coluna, então ele é uma
   linha com duas coisas dentro. O `text-transform` é do TÍTULO e não pode
   alcançar o balão, que fica no <body> e não aqui. */
.pnl-ed-rotulo {
    display: flex;
    align-items: center;
    gap: 2px;
    margin: 0 0 10px;
    padding-left: 13px;
    color: #8a7598;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 1.1px;
    text-transform: uppercase;
}

/* Fora do formulário o "i" não herda a cor do painel escuro por acaso: aqui
   ele fica ao lado de um título apagado, e acompanha o tom dele até alguém
   passar o ponteiro. */
.pnl-ed-rotulo .pnl-i {
    flex-shrink: 0;
    color: #a98ab6;
    letter-spacing: 0;
}

.pnl-ed-rotulo-meio {
    margin-top: 22px;
    padding-top: 16px;
    border-top: 1px solid rgba(231, 73, 231, .12);
}

/* ---------------- coluna 1: as seções ---------------- */
.pnl-ed-secao {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 2px;
    padding: 9px 11px;
    border: 1px solid transparent;
    border-radius: 9px;
    color: #cdbcd6 !important;
    font-size: 13.5px;
    text-decoration: none !important;
    transition: background .16s ease, color .16s ease;
}

.pnl-ed-secao:hover,
.pnl-ed-secao:focus-visible {
    background: rgba(231, 73, 231, .09);
    color: #fff !important;
}

.pnl-ed-secao-aqui {
    background: linear-gradient(90deg, rgba(80, 5, 128, .55) 0%, rgba(231, 73, 231, .28) 100%);
    border-color: rgba(231, 73, 231, .4);
    color: #fff !important;
    font-weight: 600;
}

.pnl-ed-secao-nome {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pnl-ed-secao-num {
    flex-shrink: 0;
    color: #9376a1;
    font-size: 11.5px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.pnl-ed-secao-aqui .pnl-ed-secao-num { color: #e2c9ec; }

.pnl-ed-nova {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    padding: 9px 11px;
    border: 1px dashed rgba(231, 73, 231, .28);
    border-radius: 9px;
    color: #a98bb8 !important;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none !important;
}

.pnl-ed-nova:hover,
.pnl-ed-nova:focus-visible {
    border-color: rgba(231, 73, 231, .5);
    color: #fff !important;
}


/* ---------------- coluna 2: os blocos ---------------- */
.pnl-ed-lista-topo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

/* Na coluna dos blocos a linha comeca na PEGA do arrastar, que tem 2px de
   folga a mais que uma letra - o ⠿ e um glifo de braille e nao encosta na
   borda da caixa. */
.pnl-ed-lista .pnl-ed-rotulo {
    padding-left: 16px;
}

.pnl-ed-lista-topo .pnl-ed-rotulo { margin: 0; }

.pnl-ed-add {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 14px;
    border-radius: 9px;
    background: linear-gradient(90deg, #500580 0%, #b333c9 100%);
    color: #fff !important;
    font-size: 12.5px;
    font-weight: 600;
    text-decoration: none !important;
    box-shadow: 0 5px 16px rgba(80, 5, 128, .3);
}

.pnl-ed-add:hover,
.pnl-ed-add:focus-visible {
    filter: brightness(1.1);
    color: #fff !important;
}

.pnl-ed-bloco {
    /* A LARGURA DA PEGA MORA AQUI, e não na regra dela.

       A lista de cards tem pega e a do conteúdo compartilhado tem um recuo no
       lugar dela, para as duas terem a mesma margem de texto. Com a medida
       escrita duas vezes, aumentar a área de toque da pega para o arrasto
       desalinhou as duas listas em 5px - de novo. Agora é uma medida só. */
    --pega-largura: 22px;
    --pega-recuo: -6px;

    display: flex;
    align-items: center;
    gap: 13px;
    margin-bottom: 6px;
    padding: 9px 14px;
    border: 1px solid rgba(231, 73, 231, .13);
    border-radius: 11px;
    background: rgba(231, 73, 231, .04);
    color: inherit !important;
    text-decoration: none !important;
    transition: border-color .16s ease, background .16s ease;
}

/* O realce é da LINHA, e o foco que o dispara é o do link dentro dela: a
   linha virou uma <div> e não recebe foco. */
.pnl-ed-bloco:hover,
.pnl-ed-bloco:focus-within {
    border-color: rgba(231, 73, 231, .4);
    background: rgba(231, 73, 231, .1);
}

/* OS BOTÕES DA LINHA DESFAZEM A REGRA GLOBAL `button` ANTES DE QUALQUER COISA.

   Existe um `button { margin-top: 50px; width: 100%; padding: 15px 0; ... }`
   lá em cima, do CSS do formulário de login que virou CSS do painel inteiro.
   Ele é VIVO: tirá-lo muda 13 dos botões do painel, e já foi medido.

   Quando a linha do editor deixou de ser um <a> e os comandos dela viraram
   <button> de verdade, eu desfiz `border`, `background` e `padding` em cada
   um - e esqueci `width` e `margin`. O interruptor de destaque nasceu com
   100% de largura e 50px de margem no alto: ele esmagou o link da linha até
   zero, o título do card sumiu e o subtítulo despencou numa coluna de três
   palavras. Tudo isso sem um único erro em lugar nenhum.

   Por isso o reset é um só, no começo, e nomeia os três: acrescentar um botão
   aqui é acrescentá-lo a esta lista. */
.pnl-ed-pega,
.pnl-ed-dest,
.pnl-ed-acoes-btn,
.pnl-ed-acao {
    width: auto;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    font-size: inherit;
    font-weight: inherit;
    border-radius: 0;
}

/* A PEGA DO ARRASTAR.

   Ela nasceu apagada, prometendo um arrasto que ainda não existia. Agora
   existe, e ela é um comando de verdade: `role=button` e `tabindex`, porque
   arrastar não serve a quem não usa mouse e é com as setas que essa pessoa
   muda a ordem.

   A área de toque é maior do que o desenho. O caractere tem 15px de altura, e
   15px é alvo de mira, não de dedo. */
.pnl-ed-pega {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    /* Ela virou <button>, e o painel tem uma regra global para `button` que
       mexe em padding e em fundo. Desfazer aqui, explicitamente. */
    padding: 0;
    border: 0;
    background: none;
    width: var(--pega-largura);
    height: 34px;
    margin: -6px 0 -6px var(--pega-recuo);
    border-radius: 7px;
    color: #8a7d93;
    font-size: 15px;
    line-height: 1;
    cursor: grab;
    user-select: none;
    touch-action: none;
    transition: color .16s ease, background .16s ease;
}

.pnl-ed-bloco:hover .pnl-ed-pega { color: #9376a1; }

.pnl-ed-pega:hover {
    background: rgba(231, 73, 231, .14);
    color: #e9d4f2;
}

.pnl-ed-pega:focus-visible {
    outline: 2px solid #e749e7;
    outline-offset: 1px;
    color: #e9d4f2;
}

.pnl-ed-pega:active { cursor: grabbing; }

/* O BURACO QUE O CARD DEIXA ENQUANTO ESTÁ NO AR.

   Sem ele os cards de baixo sobem de repente e a lista pisca a cada pixel de
   arrasto; com ele há um lugar visível para soltar. A altura vem do
   forcePlaceholderSize, que copia a do card arrastado. */
.pnl-ed-bloco-fantasma {
    margin-bottom: 6px;
    border: 1px dashed rgba(231, 73, 231, .45);
    border-radius: 11px;
    background: rgba(231, 73, 231, .07);
}

/* Enquanto se arrasta, o cursor é o mesmo em toda a tela: sem isto ele volta
   a ser seta assim que sai de cima da pega. */
.pnl-ed-arrasta .ui-sortable-helper { cursor: grabbing; }


/* O AVISO DA GRAVAÇÃO.

   Ele nasce vazio e sem altura: um espaço reservado permanentemente empurraria
   a dica para baixo à toa. Quando tem texto, ele empurra - e empurrar é o
   ponto, porque um recado que não mexe em nada passa despercebido. */
.pnl-ed-ordem-aviso {
    margin: 0;
    color: #9376a1;
    font-size: 11.5px;
}

.pnl-ed-ordem-aviso:not(:empty) { margin: 10px 2px 0; }
.pnl-ed-ordem-ok { color: #6fd39a; }
.pnl-ed-ordem-erro { color: #ff9a9a; }


/* A MINIATURA PRECISA MOSTRAR O QUE E A ARTE.

   Eram 36px quadrados, e a 36px uma foto de card vira uma manchinha: nao da
   para saber se e a fachada da loja ou uma tabela de precos. E a arte e
   justamente o que faz reconhecer o bloco numa lista de vinte.

   Foram para 64 e continuavam pequenas demais: a capa de um card tem TEXTO
   dentro, e a 64px de largura uma letra de 40px do original vira 2px. Agora
   sao 104 por 58, onde a composicao e a cor se leem e o texto grande chega a
   ser reconhecivel.

   A PROPORCAO importa tanto quanto o tamanho: a capa e larga (1200x600 e o
   recomendado), e num quadrado ela aparecia cortada dos dois lados, o que e o
   mesmo que nao aparecer.

   Nenhum tamanho razoavel de miniatura torna o texto pequeno de uma capa
   legivel - e por isso que o nome do card fica ao lado dela, e nao dentro.
   A miniatura serve para reconhecer, e o nome para ler.

   O icone dos blocos que nao tem arte fica no mesmo espaco, para as linhas da
   lista nao dancarem. */
.pnl-ed-bloco-arte,
.pnl-ed-bloco-icone {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
    width: 104px;
    height: 58px;
    border-radius: 8px;
}

.pnl-ed-bloco-arte img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pnl-ed-bloco-arte-vazia {
    background: rgba(231, 73, 231, .1);
    color: #c9a8d6;
    font-size: 17px;
    font-weight: 700;
    letter-spacing: .3px;
}

.pnl-ed-bloco-icone {
    background: rgba(231, 73, 231, .1);
    color: #c9a8d6;
}

/* O CONTEÚDO COMPARTILHADO NÃO É UM CARD, E NÃO SE PARECE COM UM.

   Estas linhas são atalhos para onde os horários e o número são cadastrados,
   e não blocos da página: não têm pega, e a marca fica num quadradinho em vez
   da miniatura larga dos cards. Fossem iguais, a pessoa leria as duas listas
   como uma só, que é justamente o engano que a mudança veio desfazer. */
.pnl-ed-bloco-fonte {
    border-style: dashed;
    border-color: rgba(231, 73, 231, .16);
    background: none;
}

.pnl-ed-bloco-fonte:hover,
.pnl-ed-bloco-fonte:focus-visible {
    border-color: rgba(231, 73, 231, .34);
    background: rgba(231, 73, 231, .06);
}

/* ---------------- a página de dentro do quadro ---------------- */

/* O formulário foi escrito para uma tela do painel: um menu de 264px à
   esquerda e o respiro de uma página inteira em volta. Dentro da coluna não
   há menu nem página, e sem isto ele nasce com a margem de um menu que não
   está lá - com metade dos campos fora do quadro. */
body.pnl-embutido {
    margin: 0;
    padding: 0;
    background: #120a18;
}

body.pnl-embutido #conteudoAdm {
    float: none !important;
    width: 100%;
    margin: 0;
    padding: 0;
}

.pnl-embutido-corpo {
    padding: 4px 14px 22px;
}

/* ============================================================================
   O FORMULÁRIO DO CARD, NO TEMA DO PAINEL

   Tudo aqui está preso a `body.pnl-embutido`, que só existe na página que roda
   dentro da coluna de ajustes. As telas antigas não veem nada disto e
   continuam como estão - é o que torna esta mudança barata: se ficar ruim,
   apaga-se o bloco e nada mais no painel se mexe.

   O formulário foi desenhado para um painel claro: campo branco, rótulo
   grande e caixas com borda verde e azul. Dentro de uma coluna escura ele
   chegava como uma janela de outro programa - e é a tela onde a pessoa passa
   mais tempo.
   ============================================================================ */

/* ---- os campos ---- */
body.pnl-embutido .form-control,
body.pnl-embutido input[type="text"],
body.pnl-embutido input[type="url"],
body.pnl-embutido input[type="email"],
body.pnl-embutido input[type="number"],
body.pnl-embutido input[type="date"],
body.pnl-embutido input[type="time"],
body.pnl-embutido select,
body.pnl-embutido textarea {
    height: auto;
    min-height: 42px;
    padding: 10px 13px;
    border: 1px solid rgba(231, 73, 231, .2) !important;
    border-radius: 10px;
    background: rgba(255, 255, 255, .04) !important;
    color: #fff !important;
    font-size: 13.5px;
    box-shadow: none !important;
    transition: border-color .16s ease, background .16s ease;
}

body.pnl-embutido .form-control:focus,
body.pnl-embutido input:focus,
body.pnl-embutido select:focus,
body.pnl-embutido textarea:focus {
    border-color: #e749e7 !important;
    background: rgba(255, 255, 255, .07) !important;
    outline: none;
}

body.pnl-embutido ::placeholder { color: #7b6089; }

/* O <select> SÓ ACEITA FUNDO COM `appearance: none`.

   No Chromium ele é desenhado pelo sistema, e `background` é simplesmente
   ignorado - o campo continuava branco no meio de um formulário escuro,
   mesmo com !important. Tirando a aparência nativa, a seta some junto, então
   ela volta como imagem de fundo. */
body.pnl-embutido select {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 36px;
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%23c9a8d6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 13px center !important;
    background-color: rgba(255, 255, 255, .04) !important;
}

/* O <select> nativo desenha a lista com as cores do SISTEMA, e num campo
   escuro isso dava texto branco sobre fundo branco em alguns aparelhos. */
body.pnl-embutido select option {
    background: #1b0f24;
    color: #fff;
}

/* ---- o campo de Seção é um SELECT2, e não o <select> ----

   O `<select>` de verdade fica com 2px de largura, escondido, e quem desenha
   é um `<span class="select2">` ao lado dele. Pintar o `<select>` não muda
   nada na tela: era por isso que o campo continuava branco no meio de um
   formulário escuro, mesmo com !important.

   A LISTA que abre é filha do <body>, e não do campo - por isso ela também
   está aqui dentro do `body.pnl-embutido`, e não junto do resto. */
body.pnl-embutido .select2-container--default .select2-selection--single {
    height: auto;
    min-height: 42px;
    border: 1px solid rgba(231, 73, 231, .2);
    border-radius: 10px;
    background: rgba(255, 255, 255, .04);
}

body.pnl-embutido .select2-container--default .select2-selection--single
    .select2-selection__rendered {
    padding: 11px 34px 11px 13px !important;
    color: #fff;
    font-size: 13.5px;
    line-height: 1.3 !important;
}

body.pnl-embutido .select2-container--default .select2-selection--single
    .select2-selection__placeholder { color: #7b6089; }

body.pnl-embutido .select2-container--default .select2-selection--single
    .select2-selection__arrow { top: 50%; right: 8px; transform: translateY(-50%); }

body.pnl-embutido .select2-container--default .select2-selection--single
    .select2-selection__arrow b { border-top-color: #c9a8d6; }

body.pnl-embutido .select2-container--default.select2-container--open
    .select2-selection--single { border-color: #e749e7; }

/* A lista aberta. */
body.pnl-embutido .select2-dropdown {
    border: 1px solid rgba(231, 73, 231, .3);
    border-radius: 11px;
    background: #1b0f24;
    overflow: hidden;
}

body.pnl-embutido .select2-results__option {
    color: #cdbcd6;
    font-size: 13px;
}

body.pnl-embutido .select2-container--default
    .select2-results__option--highlighted[aria-selected] {
    background: rgba(231, 73, 231, .22);
    color: #fff;
}

body.pnl-embutido .select2-container--default
    .select2-results__option[aria-selected="true"] {
    background: rgba(231, 73, 231, .12);
    color: #fff;
}

body.pnl-embutido .select2-search--dropdown .select2-search__field {
    border: 1px solid rgba(231, 73, 231, .22) !important;
    border-radius: 8px;
    background: rgba(255, 255, 255, .05) !important;
    color: #fff !important;
}

/* O campo de arquivo é o único que fica claro: o botão "Escolher arquivo"
   dentro dele é desenhado pelo navegador e não se pinta. Melhor assumir. */
body.pnl-embutido input[type="file"] {
    padding: 9px 12px;
    border: 1px dashed rgba(231, 73, 231, .28) !important;
    background: rgba(255, 255, 255, .04) !important;
    color: #cdbcd6 !important;
}

/* ---- os rótulos ---- */

/* Eram 16px em negrito, do tamanho de um título. Numa coluna estreita, com
   quinze campos, a tela virava uma lista de títulos com campos no meio. */
body.pnl-embutido .inst-home-produtos {
    min-height: 0;
    margin-bottom: 7px !important;
    padding-top: 0;
    color: #cdbcd6;
    font-size: 12.5px;
    font-weight: 600;
}

body.pnl-embutido label {
    margin-top: 0;
    font-size: 12.5px;
}

body.pnl-embutido .form-group { margin-bottom: 18px; }

body.pnl-embutido .pnl-dica { color: #9376a1; }
body.pnl-embutido .pnl-dica b { color: #c9a8d6; }

/* ---- as caixas de escolha ---- */

/* As bordas verde e azul vinham de um painel claro, onde cor forte é o que
   separa uma caixa do fundo branco. No escuro elas não separam nada: só
   pintam a tela de semáforo. */
body.pnl-embutido .pnl-destaque-box,
body.pnl-embutido .pnl-destaque-box-neutro,
body.pnl-embutido .pnl-acao-box,
body.pnl-embutido .pnl-agenda-box {
    border: 1px solid rgba(231, 73, 231, .16) !important;
    border-left-width: 1px !important;
    border-radius: 12px;
    background: rgba(231, 73, 231, .04) !important;
}

body.pnl-embutido .pnl-destaque-txt { color: #a98bb8; }
body.pnl-embutido .pnl-destaque-txt b { color: #e9d4f2; }

/* ---- "o que acontece quando clica": blocos, e não uma lista de radios ----

   Eram dez `input[type=radio]` empilhados, cada um com um título em negrito e
   uma linha de explicação: meia tela de bolinhas para escolher UMA coisa. A
   mesma escolha já é feita em blocos no modal de card novo, e aqui, na hora de
   trocar o tipo de um card que existe, ela aparecia crua.

   O `<input>` continua sendo o controle - só some da vista. Quem desenha é o
   `<span>` ao lado dele, e o estado marcado vem de `input:checked + span`, que
   é seletor de irmão e funciona em qualquer navegador. Nada de JavaScript:
   isto é um formulário, e o rádio marcado é o que o POST leva. */
body.pnl-embutido .pnl-acao-ops,
body.pnl-embutido .pnl-acao-ops-muitos {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(206px, 1fr));
    gap: 9px;
    margin-top: 12px;
}

body.pnl-embutido .pnl-acao-op {
    display: block;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
}

/* Escondido da vista, PRESENTE para o teclado e para o POST: `display: none`
   tiraria o campo da navegação por Tab e dos leitores de tela. */
body.pnl-embutido .pnl-acao-op > input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    padding: 0;
    border: 0;
    opacity: 0;
    pointer-events: none;
}

/* O BLOCO É O MESMO DO MODAL, ATÉ NO QUE ESTÁ ATRÁS DELE.

   O quadradinho do desenho é translúcido, então a cor que o olho vê depende
   de todas as camadas embaixo. As medidas já eram iguais às do modal e o
   desenho ainda saía diferente: aqui o bloco tinha fundo BRANCO translúcido
   e no modal fundo ROXO, e o mesmo roxo por cima de um cinza dá cinza.

   Medido: o quadrado do modal compunha rgb(54,21,60) e o daqui rgb(73,26,77).
   Igualar a pilha - a caixa de fora sem fundo, o bloco com o mesmo roxo do
   modal - vale mais que igualar a declaração. */
body.pnl-embutido .pnl-acao-op > input + span {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    height: 100%;
    padding: 13px 15px;
    border: 1px solid rgba(231, 73, 231, .16);
    border-radius: 11px;
    background: rgba(231, 73, 231, .04);
    transition: border-color .16s ease, background .16s ease;
}

/* ---- A LINHA DO TIPO ESCOLHIDO, com a grade recolhida ----

   São dez opções com ícone, nome e explicação. Abertas o tempo todo, quem entrava
   para trocar uma palavra do título rolava o catálogo inteiro antes de chegar no
   campo. A escolha do tipo se faz uma vez e se troca quase nunca. */
.pnl-acao-atual {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border: 1px solid rgba(231, 73, 231, .3);
    border-radius: 12px;
    background: rgba(231, 73, 231, .07);
}

.pnl-acao-atual[hidden] { display: none; }

/* A cara vem COPIADA da opção marcada, com as classes dela junto - por isso o
   ícone e os textos já chegam pintados, e aqui só se arruma o arranjo. */
.pnl-acao-atual-cara {
    display: flex;
    align-items: center;
    gap: 11px;
    flex: 1 1 auto;
    min-width: 0;
}

/* A explicação da opção não se repete aqui: na grade ela ajuda a escolher, e
   depois de escolhida vira texto que ocupa duas linhas dizendo o que a pessoa
   acabou de decidir. */
.pnl-acao-atual-cara small { display: none; }

.pnl-acao-atual-cara b {
    color: #fff;
    font-size: 13.5px;
}

.pnl-acao-trocar {
    flex: 0 0 auto;
    width: auto;
    margin: 0;
    padding: 8px 14px;
    border: 1px solid rgba(231, 73, 231, .4);
    border-radius: 9px;
    background: rgba(255, 255, 255, .05);
    color: #cdbcd6;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

.pnl-acao-trocar:hover {
    border-color: #e749e7;
    color: #fff;
}

/* O `[hidden]` TEM DE PESAR MAIS QUE O `display` DA GRADE.

   `body.pnl-embutido .pnl-acao-ops { display: grid }` vale (0,2,1); um
   `.pnl-acao-ops[hidden]` sozinho vale (0,2,0) e perde. O atributo era posto,
   o JavaScript achava que tinha recolhido, e a grade continuava na tela.

   PIOR: O MEU TESTE NÃO VIU. Ele lia a propriedade `hidden` do elemento, que
   estava certa, e não o que a tela mostrava. Passou verde com a grade aberta na
   cara da Stefanie. Teste de coisa visível olha o `display` calculado.

   Os dois seletores, porque esta tela abre dentro do editor e também em tela
   cheia, e só o primeiro tem `pnl-embutido`. */
body.pnl-embutido .pnl-acao-ops[hidden],
.pnl-acao-ops[hidden] { display: none !important; }

/* ---- O ÍCONE DO CARD ----

   Mesma mecânica da grade de tipos: a linha do escolhido, e os 24 desenhos atrás
   de um botão. A maioria dos cards não usa nenhum, e 24 quadradinhos abertos o
   tempo todo seriam mais uma parede no meio do formulário. */
.pnl-icone-atual {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 10px 8px 12px;
    border: 1px solid rgba(231, 73, 231, .3);
    border-radius: 12px;
    background: rgba(255, 255, 255, .03);
}

.pnl-icone-cara {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1 1 auto;
    min-width: 0;
    color: #fff;
    font-size: 13.5px;
}

/* E AGORA O CASO INTEIRO, DE UMA VEZ.

   Esta e a quarta vez que a medida acha o mesmo defeito: um `<b>` dentro de
   uma frase do painel novo saindo em #5a5a5a por causa do `form *`, ou seja, a
   palavra em negrito MENOS legivel do que a frase em volta - o contrario do que
   o negrito existe para fazer. Foram o nome do icone (2,81:1), tres paragrafos
   da tela de tag, e o vazio da tela de e-mail (2,7:1).

   Consertar o quarto e esperar o quinto. `color: inherit` diz a coisa certa
   para todos: o negrito le na cor da frase em que esta.

   ELA FICA AQUI EM CIMA DE PROPOSITO. As regras que dao cor PROPRIA a um <b>
   vem logo abaixo, e precisam ganhar: a de `.pnl-icone-cara b` pesa igual a
   esta (0,1,1) e so ganha por vir depois. */
.pnl-pub b,
.pnl-pub strong { color: inherit; }

/* O NOME DO ICONE E UM <b>, E O `form *` ALCANCA ELE.

   `form * { color: #5a5a5a }` e solto no painel e pesa (0,0,1) - pouco, mas
   aplicado DIRETO no <b>, que ganha de qualquer cor herdada do pai. O nome saia em
   cinza-escuro sobre fundo escuro: 2,81:1, e o ve-contraste2 pegou no mesmo dia
   em que o seletor nasceu. */
.pnl-icone-cara b { color: #fff; }

/* =============================================================================
   REDES SOCIAIS - as em uso em cima, as outras atras de um botao
   ============================================================================= */

/* O rotulo do segundo grupo da coluna de secoes, no editor. */
.pnl-ed-rotulo-2 { margin-top: 22px; }

.pnl-pub .pnl-redes-vazio {
    margin: 0 0 14px;
    color: #b9a5c6;
    font-size: 13px;
    line-height: 1.55;
}

.pnl-pub .pnl-redes-lista {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* DUAS ALTURAS, E SEM MOLDURA PRÓPRIA.

   As duas alturas são porque esta tela abre na terceira coluna do editor, que
   mede 320px - o quadro dentro dela tem 282. Tudo lado a lado deixava o campo do
   endereço com 184px, cortando o link no meio.

   A moldura saiu no mesmo dia em que entrou: cada rede era um cartão dentro do
   cartão da seção, dentro do cartão do quadro. Três bordas encaixadas em 282px de
   largura, e a Stefanie disse "apertado" antes de eu terminar de olhar. Agora as
   linhas se separam por um traço, que é o suficiente quando cada uma tem nome. */
.pnl-pub .pnl-redes-linha {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 0 0 12px;
    border-bottom: 1px solid rgba(231, 73, 231, .14);
}

.pnl-pub .pnl-redes-linha:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

/* `align-items: center` E A ALTURA IGUAL NOS TRÊS: o ícone tem 20px, o nome tem
   a altura da linha do texto e o botão tem 30px. Centralizados, o meio de cada
   um cai no mesmo lugar - mas o X parecia alto porque o glifo `×` não é
   centrado dentro da própria caixa de texto. `line-height: 1` no botão e o
   `display: flex` dele resolvem, e aí é a CAIXA que se centra, não a letra. */
.pnl-pub .pnl-redes-topo {
    display: flex;
    align-items: center;
    gap: 9px;
    min-height: 30px;
}

.pnl-pub .pnl-redes-nome {
    flex: 1 1 auto;
    min-width: 0;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
}

/* O ICONE E UMA MASCARA, e nao um <img>: assim ele herda a cor do painel em vez
   de vir no preto do arquivo. E a mesma tecnica que o site usa nos icones de rede
   (`.icone-cor`), e por isso o mesmo arquivo serve nos dois lugares. */
.pnl-pub .pnl-redes-icone {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    background-color: #cdbcd6;
    -webkit-mask: var(--icone) no-repeat center / contain;
    mask: var(--icone) no-repeat center / contain;
}

/* O CAMPO DO ENDEREÇO E O DO TELEFONE SÃO A MESMA COISA, e por isso a mesma
   regra. Escrevi uma só para o Contato, com largura e altura e mais nada, e a
   tela saiu com três campos BRANCOS: sem a cor declarada aqui, quem vence é o
   `input { }` global do painel, que vem de um tema claro. O campo vazio parecia
   certo porque estava com o foco, e o foco tem regra própria. */
.pnl-pub .pnl-redes-linha > input,
.pnl-pub .pnl-zap-linha > input {
    width: 100%;
    height: var(--pnl-alt-campo, 44px);
    margin: 0;
    padding: 0 12px;
    border: 1px solid rgba(231, 73, 231, .45);
    border-radius: 10px;
    background: rgba(255, 255, 255, .04);
    color: #fff;
    font-size: 13px;
    text-align: left;
}

.pnl-pub .pnl-redes-linha > input:focus,
.pnl-pub .pnl-zap-linha > input:focus {
    border-color: #e749e7 !important;
    box-shadow: none !important;
    outline: none;
}

.pnl-pub .pnl-redes-tirar {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    margin: 0;
    padding: 0;
    border: 1px solid rgba(255, 138, 138, .3);
    border-radius: 10px;
    background: rgba(255, 92, 92, .08);
    color: #ff9d9d;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
}

.pnl-pub .pnl-redes-tirar:hover {
    border-color: rgba(255, 138, 138, .6);
    color: #fff;
}

.pnl-pub .pnl-redes-mais { margin-top: 14px; }

/* ---------------------------------------------------------------------------
   CONTATO - os números de WhatsApp

   MESMO DESENHO DAS REDES, de propósito: as duas são listas de "uma coisa por
   linha" na mesma coluna estreita, e duas telas irmãs que não se parecem são
   duas telas para aprender. O que muda é que aqui o nome também é campo.
   --------------------------------------------------------------------------- */
.pnl-pub .pnl-zap-lista {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.pnl-pub .pnl-zap-linha {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(231, 73, 231, .12);
}

.pnl-pub .pnl-zap-linha:last-child { padding-bottom: 0; border-bottom: 0; }

/* EM CIMA QUEM ATENDE, EMBAIXO O TELEFONE, e não os dois lado a lado. Esta tela
   abre na terceira coluna do editor, que tem uns 460px úteis: os dois campos e
   o botão de tirar na mesma linha dariam 150px para cada um. */
.pnl-pub .pnl-zap-topo {
    display: flex;
    align-items: center;
    gap: 9px;
    min-height: 30px;
}

.pnl-pub .pnl-zap-icone {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    background-color: #cdbcd6;
    -webkit-mask: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 11.5a8.4 8.4 0 0 1-12.3 7.4L3 20.5l1.7-5.6A8.4 8.4 0 1 1 21 11.5z'/%3E%3C/svg%3E") no-repeat center / contain;
            mask: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 11.5a8.4 8.4 0 0 1-12.3 7.4L3 20.5l1.7-5.6A8.4 8.4 0 1 1 21 11.5z'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* O NOME É UM CAMPO DISCRETO até receber o foco. Ele é opcional e a maioria das
   contas tem um número só, onde ele nem aparece na página: com a moldura de
   sempre, a coisa opcional pesava tanto quanto o telefone, que é obrigatório. */
.pnl-pub .pnl-zap-topo > input {
    flex: 1 1 auto;
    width: auto;
    height: 30px;
    min-height: 0;
    margin: 0;
    padding: 0 8px;
    border: 1px solid transparent;
    border-radius: 8px;
    background: transparent;
    color: #f2eaf6;
    font-size: 14px;
    font-weight: 600;
}

.pnl-pub .pnl-zap-topo > input::placeholder { color: #9376a1; font-weight: 400; }

.pnl-pub .pnl-zap-topo > input:hover { border-color: rgba(231, 73, 231, .22); }

.pnl-pub .pnl-zap-topo > input:focus {
    border-color: rgba(231, 73, 231, .55);
    background: rgba(0, 0, 0, .22);
    outline: none;
}

/* O X da linha nova não some junto com a linha: ele É o que a tira. */
.pnl-pub .pnl-zap-tirar { margin-left: 0; }

.pnl-pub .pnl-zap-erro {
    margin: 0;
    color: #ff9d9d;
    font-size: 12.5px;
    line-height: 1.35;
    text-align: left;
}

/* ---------------------------------------------------------------------------
   HORÁRIOS - a lista dentro da coluna do editor

   A ÚNICA ÁREA DE DOIS NÍVEIS, e o desenho diz isso: aqui são linhas que ABREM
   alguma coisa, e não campos que se preenchem. Por isso a linha inteira é o
   link, e não um lápis no canto.
   --------------------------------------------------------------------------- */
.pnl-pub .pnl-hor-local {
    margin: 16px 0 8px;
    color: #a98bb8;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .6px;
    text-align: left;
    text-transform: uppercase;
}

.pnl-pub .pnl-hor-local:first-of-type { margin-top: 4px; }

.pnl-pub .pnl-hor-lista {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.pnl-pub .pnl-hor-linha {
    display: flex;
    align-items: stretch;
    gap: 8px;
}

.pnl-pub .pnl-hor-abre {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    padding: 10px 12px;
    border: 1px solid rgba(231, 73, 231, .2);
    border-radius: 10px;
    background: rgba(255, 255, 255, .04);
    text-align: left;
    text-decoration: none;
}

.pnl-pub .pnl-hor-abre:hover {
    border-color: rgba(231, 73, 231, .55);
    background: rgba(255, 255, 255, .07);
    text-decoration: none;
}

/* `color` NAS TRÊS LINHAS, E NÃO SÓ NO <a>. O painel tem um `form * { color:
   #5a5a5a }` sem dono que alcança qualquer coisa dentro de um formulário, e um
   cinza escuro sobre o roxo escuro é texto que não se lê. Já mordeu na tabela
   de horários, e a Stefanie foi quem viu. */
.pnl-pub .pnl-hor-quando {
    color: #f2eaf6;
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.3;
}

.pnl-pub .pnl-hor-horas {
    color: #cdbcd6;
    font-size: 12.5px;
    line-height: 1.3;
}

/* #a98bb8 E NAO #8d6f9c, e a diferenca e uma medida: sobre este fundo o cinza
   mais escuro dava 3.96:1, abaixo dos 4.5 que texto pequeno pede. A observacao
   e secundaria, mas e texto que o cliente escreveu - se nao e para ler, nao era
   para estar na tela. */
.pnl-pub .pnl-hor-obs {
    color: #a98bb8;
    font-size: 11.5px;
    line-height: 1.3;
}

/* O formulário de tirar não é uma linha do desenho: ele existe só para o POST
   não virar um GET. Sem isto o `form` ganharia a margem de sempre e empurraria
   o X para baixo do texto. */
.pnl-pub .pnl-hor-tirar-form {
    display: flex;
    align-items: center;
    margin: 0;
    padding: 0;
}

.pnl-pub .pnl-hor-tirar { margin: 0; }

/* O caminho de volta, dentro do quadro. */
.pnl-pub .pnl-hor-voltar,
.pnl-embutido .pnl-hor-voltar {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0 0 14px;
    color: #cdbcd6;
    font-size: 12.5px;
    font-weight: 600;
    text-decoration: none;
}

.pnl-pub .pnl-hor-voltar:hover,
.pnl-embutido .pnl-hor-voltar:hover { color: #e749e7; text-decoration: none; }

/* ---------------------------------------------------------------------------
   AVISO NO TOPO - a lista de recados que se revezam

   A TELA MOSTRA FAIXAS, E NÃO CARDS. Foi uma objeção da Stefanie: "ele não é um
   card igual de link, é uma faixa". Ela estava certa, e a resposta não é onde a
   tela mora e sim o que ela mostra - cada recado tem aqui a forma que tem na
   página: largura toda, triângulo na frente, texto ao centro.

   A COR É A DO PAINEL, e não a do tema do cliente. Copiar o amarelo da página
   aqui dentro pareceria a prévia, e não é: a prévia de verdade está na coluna ao
   lado, ao vivo. Isto é um formulário com forma de faixa.
   --------------------------------------------------------------------------- */
.pnl-pub .pnl-avi-lista {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.pnl-pub .pnl-avi-bloco {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* O RECADO DESLIGADO FICA APAGADO, e não escondido: ele continua sendo uma
   faixa que existe e que volta quando se ligar de novo. 55% é pouco o bastante
   para se ver de relance qual está no ar e muito o bastante para se ler e
   editar o texto sem precisar ligar antes. */
.pnl-pub .pnl-avi-bloco-off .pnl-avi-faixa { opacity: .55; }

.pnl-pub .pnl-avi-faixa {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 9px 12px;
    border: 1px solid rgba(231, 73, 231, .3);
    border-radius: 10px;
    background: rgba(231, 73, 231, .08);
}

/* ---- O ÍCONE DO RECADO, que é um botão ----

   Ele era um triângulo fixo. Virou botão porque o triângulo diz "cuidado", e em
   cima de uma promoção isso é dizer a coisa errada com desenho.

   NÃO PARECE UM BOTÃO ATÉ SE PASSAR O MOUSE, de propósito: a faixa tem três
   coisas clicáveis lado a lado (o ícone, o texto e o X), e três molduras
   competindo fariam a linha parecer uma barra de ferramentas em vez de um
   recado. A dica do painel (`data-dica`) diz o que ele faz. */
.pnl-pub .pnl-avi-escolha {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
}

.pnl-pub .pnl-avi-icone {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    margin: 0;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 8px;
    background: transparent;
    color: #e9d4f2;
    cursor: pointer;
}

.pnl-pub .pnl-avi-icone:hover {
    border-color: rgba(231, 73, 231, .45);
    background: rgba(231, 73, 231, .14);
}

.pnl-pub .pnl-avi-icone-aberto {
    border-color: #e749e7;
    background: rgba(231, 73, 231, .2);
}

.pnl-pub .pnl-avi-icone-svg { display: flex; align-items: center; }

/* SEM ÍCONE precisa de desenho, e o desenho é a ausência: um quadrado tracejado
   vazio. Sem nada ali o botão viraria um buraco de 28px que ninguém descobre
   que é clicável. */
.pnl-pub .pnl-avi-icone-sem {
    display: block;
    width: 14px;
    height: 14px;
    border: 1.5px dashed rgba(233, 212, 242, .5);
    border-radius: 4px;
}

/* ---- A GRADE DE OPÇÕES ----

   Uma só na tela, movida por JavaScript para baixo do recado em que se clicou.
   Ver o comentário em admin/aviso/form.php. */
/* DEZ COLUNAS FIXAS, e nao `auto-fill`.

   Com `auto-fill` os nove icones mais o "sem icone" davam nove numa linha e um
   sozinho na de baixo - um botao orfao embaixo de uma fileira cheia, que parece
   defeito. Dez tracos fixos poem todos na mesma linha, e cada um encolhe junto
   com a coluna em vez de quebrar.

   E a mesma licao da grade de tipos de card, onde o `auto-fit` dava tres tracos
   numa tela larga: numero fixo diz o que se quer, `auto` diz o que couber. */
.pnl-pub .pnl-avi-icones {
    display: grid;
    grid-template-columns: repeat(10, minmax(0, 1fr));
    gap: 5px;
    margin: 2px 0 2px;
    padding: 9px;
    border: 1px solid rgba(231, 73, 231, .28);
    border-radius: 11px;
    background: rgba(0, 0, 0, .22);
}

.pnl-pub .pnl-avi-icones[hidden] { display: none; }

/* Abaixo de 470px os dez nao cabem sem virar botao de 30px. Cinco e cinco e
   duas fileiras cheias, que e melhor que uma cheia e uma com um. */
@media (max-width: 470px) {
    .pnl-pub .pnl-avi-icones { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

.pnl-pub .pnl-avi-op {
    display: flex;
    align-items: center;
    justify-content: center;
    width: auto;
    height: 40px;
    margin: 0;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 9px;
    background: rgba(255, 255, 255, .04);
    color: #cdbcd6;
    cursor: pointer;
}

.pnl-pub .pnl-avi-op:hover {
    border-color: rgba(231, 73, 231, .5);
    color: #fff;
}

/* O QUE JÁ ESTÁ ESCOLHIDO FICA MARCADO. Sem isto a grade abre sem dizer qual é
   o de agora, e a pessoa escolhe de novo o que já estava. */
.pnl-pub .pnl-avi-op-agora {
    border-color: #e749e7;
    background: rgba(231, 73, 231, .16);
    color: #fff;
}

.pnl-pub .pnl-avi-op-svg { display: flex; align-items: center; }

.pnl-pub .pnl-avi-op-svg svg { width: 19px; height: 19px; }

/* O CAMPO NÃO TEM MOLDURA PRÓPRIA: a moldura é a faixa em volta dele. Com a
   caixa de sempre seriam duas bordas concêntricas, e a de dentro é que apagaria
   a forma que esta tela existe para mostrar. */
/* `input.pnl-avi-texto` pelo mesmo empate: a classe sozinha perdia o `width`
   para `.pnl-cl input[type="text"]`, e só não se via porque o `flex: 1 1 auto`
   dá a mesma largura por outro caminho. Defeito invisível é defeito esperando. */
.pnl-pub .pnl-avi-faixa input.pnl-avi-texto {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    height: 30px;
    min-height: 0;
    margin: 0;
    padding: 0 6px;
    border: 1px solid transparent;
    border-radius: 7px;
    background: transparent;
    color: #fff;
    font-size: 13.5px;
    font-weight: 600;
    text-align: center;
}

.pnl-pub .pnl-avi-texto::placeholder { color: #a98bb8; font-weight: 400; }

.pnl-pub .pnl-avi-texto:hover { border-color: rgba(231, 73, 231, .3); }

.pnl-pub .pnl-avi-texto:focus {
    border-color: rgba(231, 73, 231, .7);
    background: rgba(0, 0, 0, .25);
    outline: none;
}

.pnl-pub .pnl-avi-tirar { margin: 0; }

/* O pé: ligado, e a janela de datas. */
.pnl-pub .pnl-avi-pe {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 14px;
    padding: 0 2px;
}

.pnl-pub .pnl-avi-liga {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 0;
    color: #cdbcd6;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
}

.pnl-pub .pnl-avi-liga input[type="checkbox"] {
    width: 17px;
    height: 17px;
    min-height: 0;
    margin: 0;
    accent-color: #e749e7;
    cursor: pointer;
}

.pnl-pub .pnl-avi-datas {
    display: flex;
    align-items: center;
    gap: 8px;
}

.pnl-pub .pnl-avi-datas > label {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    color: #a98bb8;
    font-size: 12.5px;
    font-weight: 400;
}

/* 106px cabe `dd/mm/aaaa` e não cabe mais nada. Um campo de data com a largura
   do cartão convida a escrever frase onde só cabe data.

   `input[type="text"]` E NÃO `input`, E O MOTIVO É UM EMPATE.

   `.pnl-cl input[type="text"] { width: 100% }` existe mais abaixo neste mesmo
   arquivo e tem a MESMA especificidade que `.pnl-pub .pnl-avi-datas input`:
   duas classes e um elemento, dos dois lados. Empate em CSS é decidido por
   ordem no arquivo, e quem vem depois ganha - então o campo de data saía com
   197px e a largura que eu tinha escrito não valia nada.

   Com o `[type=...]` do meu lado são duas classes, um atributo e um elemento, e
   aí não há empate para a ordem desempatar. É a terceira vez que esse mesmo
   empate morde neste projeto, e as outras duas custaram uma rodada cada.

   E foi o navegador que respondeu, não eu: perguntar quais regras casam com o
   elemento é vinte linhas de script e acaba com o chute. */
.pnl-pub .pnl-avi-datas input[type="text"] {
    width: 106px;
    height: 32px;
    min-height: 0;
    margin: 0;
    padding: 0 8px;
    border: 1px solid rgba(231, 73, 231, .3);
    border-radius: 8px;
    background: rgba(255, 255, 255, .04);
    color: #fff;
    font-size: 12.5px;
    text-align: center;
}

/* A frase que diz o que vai acontecer, por extenso. Duas datas soltas obrigam
   quem lê a montar a frase na cabeça, e é aí que se inverte o começo com o
   fim - mesma ideia do aviso de agendamento do card. */
.pnl-pub .pnl-avi-quando {
    margin: 0;
    padding: 0 2px;
    color: #a98bb8;
    font-size: 12px;
    line-height: 1.35;
    text-align: left;
}

.pnl-pub .pnl-avi-ritmo {
    display: flex;
    align-items: center;
    gap: 9px;
    color: #cdbcd6;
    font-size: 13px;
}

/* A COR TEM DE SER REPETIDA NOS FILHOS. O `color` do bloco acima e herdado, e
   heranca perde para o `form * { color: #5a5a5a }` solto do painel, que alcanca
   o `<label>` e o `<span>` diretamente. O bloco ficava com a moldura certa e o
   texto cinza-chumbo por dentro: 2,7:1. */
.pnl-pub .pnl-avi-ritmo > label,
.pnl-pub .pnl-avi-ritmo > span { color: #cdbcd6; }

.pnl-pub .pnl-avi-ritmo > label { margin: 0; font-weight: 600; }

/* `[type="number"]` pelo mesmo empate da regra das datas, logo acima. */
.pnl-pub .pnl-avi-ritmo input[type="number"] {
    width: 74px;
    height: var(--pnl-alt-campo, 44px);
    margin: 0;
    padding: 0 10px;
    border: 1px solid rgba(231, 73, 231, .45);
    border-radius: 10px;
    background: rgba(255, 255, 255, .04);
    color: #fff;
    font-size: 13px;
    text-align: center;
}

.pnl-pub .pnl-redes-grade {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(46px, 1fr));
    gap: 6px;
    margin-top: 10px;
    padding: 10px;
    border: 1px solid rgba(231, 73, 231, .18);
    border-radius: 12px;
    background: rgba(0, 0, 0, .18);
}

.pnl-pub .pnl-redes-grade[hidden] { display: none; }

.pnl-pub .pnl-redes-op {
    display: flex;
    align-items: center;
    justify-content: center;
    width: auto;
    height: 44px;
    margin: 0;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 9px;
    background: rgba(255, 255, 255, .04);
    cursor: pointer;
}

.pnl-pub .pnl-redes-op .pnl-redes-icone { margin: 0; }

.pnl-pub .pnl-redes-op:hover { border-color: rgba(231, 73, 231, .45); }

.pnl-pub .pnl-redes-op:hover .pnl-redes-icone { background-color: #fff; }

/* A REDE QUE JÁ ESTÁ NA PÁGINA CONTINUA NA GRADE, com o visto.

   Ela saía da grade, e quem já usava o Facebook descia, procurava o Facebook e
   não achava. Apagar até sumir seria o mesmo defeito com outro nome: aqui o
   ícone fica em 60%, que é pouco o bastante para não competir com o que se pode
   escolher e muito o bastante para se achar o que se procura.

   `position: relative` é para o visto, que é um `::after` no canto. */
.pnl-pub .pnl-redes-op-ja {
    position: relative;
    border-color: rgba(0, 184, 148, .3);
    background: rgba(0, 184, 148, .07);
    cursor: pointer;
}

.pnl-pub .pnl-redes-op-ja .pnl-redes-icone { opacity: .6; }

.pnl-pub .pnl-redes-op-ja:hover { border-color: rgba(0, 184, 148, .65); }

.pnl-pub .pnl-redes-op-ja:hover .pnl-redes-icone { opacity: 1; background-color: #fff; }

/* O VISTO É DESENHADO, e não uma letra. `✓` depende da fonte instalada e, onde
   ela não tem o glifo, sai o retângulo vazio - num badge de 13px isso é a
   diferença entre "já está" e "deu erro".

   E ELE É IMAGEM, NÃO MÁSCARA, que é o contrário do resto desta tela. Máscara
   em CSS usa o ALFA do arquivo: o círculo preto e o tique branco são os dois
   opacos, então a máscara mostrava o círculo inteiro e o tique sumia dentro
   dele. Saía uma bolinha verde, que quer dizer qualquer coisa. Como imagem,
   cada cor é ela mesma. */
.pnl-pub .pnl-redes-op-ja::after {
    content: "";
    position: absolute;
    right: 3px;
    bottom: 3px;
    width: 13px;
    height: 13px;
    background: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='12' fill='%2300b894'/%3E%3Cpath d='M6.6 12.3l3.5 3.5 7.3-7.3' fill='none' stroke='%23ffffff' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center/contain;
    pointer-events: none;
}

/* O PISCAR DA LINHA ACHADA. Rolar até o campo não diz QUAL linha é a resposta
   quando já havia campo à vista; o realce diz, e some sozinho. */
@keyframes pnlRedesAchada {
    0%   { box-shadow: 0 0 0 2px rgba(0, 184, 148, .85); }
    100% { box-shadow: 0 0 0 2px rgba(0, 184, 148, 0); }
}

.pnl-pub .pnl-redes-linha-achada {
    border-radius: 12px;
    animation: pnlRedesAchada 1.5s ease-out 1;
}

@media (prefers-reduced-motion: reduce) {
    .pnl-pub .pnl-redes-linha-achada { animation: none; box-shadow: 0 0 0 2px rgba(0, 184, 148, .7); }
}

.pnl-icone-desenho svg {
    width: 22px;
    height: 22px;
    display: block;
}

/* O "sem ícone" é um quadrado tracejado, e não um espaço em branco: um vazio sem
   contorno parece um desenho que não carregou. */
.pnl-icone-vazio {
    display: block;
    width: 22px;
    height: 22px;
    border: 1.5px dashed rgba(231, 73, 231, .45);
    border-radius: 6px;
}

.pnl-icone-ops {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(46px, 1fr));
    gap: 6px;
    margin-top: 8px;
    padding: 10px;
    border: 1px solid rgba(231, 73, 231, .18);
    border-radius: 12px;
    background: rgba(0, 0, 0, .18);
}

.pnl-icone-ops[hidden] { display: none; }

.pnl-icone-op {
    display: block;
    margin: 0;
    cursor: pointer;
}

/* Escondido da vista, PRESENTE para o teclado e para o envio - como no resto do
   painel. */
.pnl-icone-op > input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    opacity: 0;
}

.pnl-icone-op > input + span {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 42px;
    border: 1px solid transparent;
    border-radius: 9px;
    background: rgba(255, 255, 255, .04);
    color: #cdbcd6;
}

.pnl-icone-op:hover > input + span {
    border-color: rgba(231, 73, 231, .45);
    color: #fff;
}

.pnl-icone-op > input:checked + span {
    border-color: #e749e7;
    background: rgba(231, 73, 231, .16);
    color: #fff;
}

.pnl-icone-op > input:focus-visible + span {
    outline: 2px solid #e749e7;
    outline-offset: 2px;
}

/* A caixa que envolve os blocos não entra na conta da cor: no modal não há
   caixa nenhuma entre o fundo e o bloco. */
body.pnl-embutido .pnl-acao-box { background: none !important; }

body.pnl-embutido .pnl-acao-op:hover > input + span {
    border-color: rgba(231, 73, 231, .5);
    background: rgba(231, 73, 231, .1);
}

/* O ESCOLHIDO não se distingue só pela cor: ele ganha uma borda cheia e um
   fundo, e o título fica branco. Cor sozinha deixa de fora quem não a
   distingue - e num formulário com dez opções parecidas, saber qual está
   marcada é a informação mais importante da tela. */
body.pnl-embutido .pnl-acao-op > input:checked + span {
    border-color: #e749e7;
    background: rgba(231, 73, 231, .16);
    box-shadow: inset 0 0 0 1px rgba(231, 73, 231, .35);
}

body.pnl-embutido .pnl-acao-op > input:focus-visible + span {
    outline: 2px solid #e749e7;
    outline-offset: 2px;
}

/* O TRAÇO DO DESENHO PRECISA SER DITO NO PRÓPRIO <svg>.

   Existe um `form * { color: #5a5a5a }` no CSS do painel - seletor universal
   dentro de `form`, da mesma família do `button` global. Ele pega o <svg>
   DIRETAMENTE, e regra que pega o elemento vence herança: o quadradinho ficava
   com `color: #e9a8ff` e o desenho dentro dele saía cinza, porque
   `stroke="currentColor"` lê a cor DO SVG, não a do pai.

   Medido no pixel, e não no getComputedStyle: o `color` do quadrado dizia
   #e9a8ff nos dois lugares, e o traço saía rgb(233,168,255) no modal contra
   rgb(76,64,79) aqui. Foi recortando o ícone e procurando o pixel mais
   colorido que a diferença apareceu - olhar a propriedade do pai não bastava.

   E NÃO BASTA O <svg>: o `form *` pega também os <path> de dentro, e é no
   PATH que o `stroke: currentColor` acaba resolvendo. Consertando só o svg,
   o `stroke` dele passava a computar roxo e o desenho continuava cinza - o
   pixel provou, a propriedade não.

   `.pnl-acao-op-icone svg` tem peso 2 contra o 1 do `form *`. */
body.pnl-embutido .pnl-acao-op-icone svg,
body.pnl-embutido .pnl-acao-op-icone svg *,
body.pnl-embutido .pnl-hor-previa svg,
body.pnl-embutido .pnl-hor-previa svg *,
body.pnl-embutido .pnl-ir-tela svg,
body.pnl-embutido .pnl-ir-tela svg * { color: inherit; }

body.pnl-embutido .pnl-acao-op-texto { min-width: 0; }

/* ============================================================================
   O SELETOR DE FORMA DO CARD (Modelo 3)

   Três miniaturas do card, e não três frases. "Faixa larga" e "lado a lado"
   são palavras para quem já viu as duas formas; quem chega ao painel pela
   primeira vez lê as duas e escolhe no chute. Um retângulo com uma barra em
   cima e duas linhas embaixo não precisa de legenda.

   DESENHADAS COM <span>, e não com imagem nem com <svg>: são três retângulos,
   e assim elas seguem a cor do tema sem arquivo nenhum para carregar - e sem
   esbarrar no `form *` que já pintou de cinza um ícone que devia ser roxo.
   ============================================================================ */
/* DUAS COLUNAS É O PADRÃO, e não quatro.

   Nos Modelos 1 e 2 são duas formas, e duas miniaturas esticadas ficam
   largas e boas de ver. No Modelo 3 são quatro, e aí elas vão a duas por
   linha em vez de quatro numa fila: quatro miniaturas numa coluna de 500px
   dariam 97px cada, que é onde o nome começa a quebrar em três linhas. */
.pnl-forma-ops {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

/* Com espaço de sobra as quatro cabem numa fila só, e aí se comparam de
   relance - que é o ponto de serem desenhos. */
@media (min-width: 620px) {
    .pnl-forma-ops-quatro {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.pnl-forma-op {
    display: block;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
}

/* Escondido da vista, PRESENTE para o teclado e para o envio. */
.pnl-forma-op > input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    padding: 0;
    border: 0;
    opacity: 0;
    pointer-events: none;
}

/* O `text-align: left` é contra o `form *`, que põe JUSTIFY em tudo o que
   está dentro de um formulário no painel. Numa caixa de 97px de largura o
   justificado abre buracos entre as palavras: "Foto  em  cima" saía com o
   espaçamento de um jornal antigo. É a mesma regra solta que já pintou de
   cinza o ícone dos tipos de card. */
.pnl-forma-op > input + span {
    display: block;
    height: 100%;
    text-align: left;
    padding: 10px;
    border: 1px solid rgba(231, 73, 231, .16);
    border-radius: 11px;
    background: rgba(231, 73, 231, .04);
    transition: border-color .16s ease, background .16s ease;
}

.pnl-forma-op:hover > input + span {
    border-color: rgba(231, 73, 231, .5);
    background: rgba(231, 73, 231, .1);
}

/* O escolhido não se distingue só pela cor: ganha borda cheia, fundo e o
   nome em branco. Cor sozinha deixa de fora quem não a distingue. */
.pnl-forma-op > input:checked + span {
    border-color: #e749e7;
    background: rgba(231, 73, 231, .16);
}

.pnl-forma-op > input:focus-visible + span {
    outline: 2px solid #e749e7;
    outline-offset: 2px;
}

/* ---- a miniatura ---- */

/* Altura fixa nas três: elas são comparadas lado a lado, e três caixas de
   alturas diferentes fazem parecer que o card também sai de tamanhos
   diferentes - o que não acontece. */
.pnl-forma-arte {
    display: flex;
    flex-direction: column;
    gap: 4px;
    height: 52px;
    padding: 5px;
    border-radius: 7px;
    background: rgba(255, 255, 255, .05);
}

.pnl-forma-foto {
    flex: 0 0 auto;
    height: 22px;
    border-radius: 4px;
    background: linear-gradient(135deg, #7a2a9e 0%, #e749e7 100%);
}

.pnl-forma-txt {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    flex: 1 1 auto;
    min-height: 0;
}

.pnl-forma-txt i {
    display: block;
    height: 3px;
    border-radius: 2px;
    background: rgba(255, 255, 255, .34);
}

.pnl-forma-txt i:last-child { width: 62%; }

/* FOTO AO LADO: a mesma marcação, em linha. A foto fica com um terço, que é
   a proporção que o card tem de verdade. */
.pnl-forma-arte-lado {
    flex-direction: row;
    align-items: stretch;
    gap: 6px;
}

.pnl-forma-arte-lado .pnl-forma-foto {
    flex: 0 0 34%;
    height: auto;
}

/* SÓ A FOTO: a arte toma a caixa inteira e as linhas de texto somem. */
.pnl-forma-arte-soimagem .pnl-forma-foto { height: 100%; }
.pnl-forma-arte-soimagem .pnl-forma-txt  { display: none; }

/* TEXTO SOBRE A FOTO: a arte também toma a caixa inteira, e as linhas ficam
   POR CIMA dela, no pé. A miniatura precisa mostrar essa diferença - é a
   única coisa que separa esta forma da de cima.

   O `position` sai do fluxo, então a arte volta a ser a caixa toda por baixo
   e as linhas se sobrepõem, como no card de verdade. */
.pnl-forma-arte-sobre { position: relative; }

.pnl-forma-arte-sobre .pnl-forma-foto { height: 100%; }

.pnl-forma-arte-sobre .pnl-forma-txt {
    position: absolute;
    inset: auto 5px 5px 5px;
    flex: 0 0 auto;
    padding: 5px 5px 4px;
    border-radius: 0 0 4px 4px;
    background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, .62) 62%);
}

/* Branco cheio, e não o cinza translúcido das outras: sobre a arte é assim
   que o texto aparece no card. */
.pnl-forma-arte-sobre .pnl-forma-txt i {
    background: rgba(255, 255, 255, .92);
}

/* ---- OS QUATRO DESENHOS DO ESTILO DO MAPA ----

   Mesmas peças da forma do card: `.pnl-forma-foto` é o mapa e `.pnl-forma-txt`
   são as linhas do endereço. O que muda é o arranjo, que é justamente o que a
   escolha decide. */

/* Faixa larga: o mapa ocupa tudo, e o endereço não aparece escrito. */
.pnl-mapa-arte-largo .pnl-forma-foto { height: 100%; }
.pnl-mapa-arte-largo .pnl-forma-txt  { display: none; }

/* Cartão: o mapa de um lado, o endereço do outro. */
.pnl-mapa-arte-cartao {
    display: flex;
    flex-direction: row;
    gap: 4px;
}

.pnl-mapa-arte-cartao .pnl-forma-foto {
    flex: 0 0 52%;
    height: 100%;
}

.pnl-mapa-arte-cartao .pnl-forma-txt {
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex: 1 1 auto;
    gap: 4px;
}

/* Só o endereço: sem mapa, e as linhas ganham o lugar todo. */
.pnl-mapa-arte-soEndereco .pnl-forma-foto { display: none; }

.pnl-mapa-arte-soEndereco .pnl-forma-txt {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
    gap: 5px;
}

/* Não mostrar: o quadro vazio, com o risco na diagonal. Um desenho em branco
   pareceria um desenho que não carregou. */
.pnl-mapa-arte-nenhum .pnl-forma-foto,
.pnl-mapa-arte-nenhum .pnl-forma-txt { display: none; }

.pnl-mapa-arte-nenhum {
    position: relative;
    background-image: linear-gradient(
        to bottom right,
        transparent calc(50% - 1px), rgba(231, 73, 231, .35) calc(50% - 1px),
        rgba(231, 73, 231, .35) calc(50% + 1px), transparent calc(50% + 1px));
}

/* A miniatura do escolhido acende junto com a caixa. */
.pnl-forma-op > input:checked + span .pnl-forma-arte {
    background: rgba(255, 255, 255, .09);
}

/* ---- o texto embaixo ---- */
.pnl-forma-nome {
    display: block;
    margin-top: 9px;
    text-align: left;
    color: #cdbcd6;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.3;
}

.pnl-forma-op > input:checked + span .pnl-forma-nome { color: #fff; }

/* O `text-align` de novo: o `form *` casa com ESTE elemento direto, então
   o `left` do pai não o alcança - herança perde para uma regra que casa. */
.pnl-forma-sub {
    display: block;
    margin-top: 3px;
    text-align: left;
    color: #9376a1;
    font-size: 11.5px;
    font-weight: 400;
    line-height: 1.35;
}



body.pnl-embutido .pnl-acao-op b {
    display: block;
    margin-bottom: 3px;
    color: #cdbcd6;
    font-size: 13px;
    font-weight: 600;
}

body.pnl-embutido .pnl-acao-op > input:checked + span b { color: #fff; }

/* Era #8d6f9c, o mesmo cinza dos textos de apoio do painel. Num bloco que se
   escolhe, a descrição não é apoio: é o que faz escolher. */
body.pnl-embutido .pnl-acao-op small {
    display: block;
    color: #a98bb8;
    font-size: 11.5px;
    line-height: 1.45;
}

/* A pergunta acima dos blocos é um rótulo, não um título de seção. */
body.pnl-embutido .pnl-acao-box > h3.inst-home-produtos {
    margin-bottom: 0 !important;
    font-size: 12.5px !important;
}

/* ---- data e hora ----

   `color-scheme: dark` é o que faz o navegador desenhar o calendarinho, o
   relógio e o ícone deles em versão escura. Sem isso o ícone sai preto sobre
   fundo escuro (invisível) e o calendário abre branco no meio do painel. */
body.pnl-embutido { color-scheme: dark; }

body.pnl-embutido .pnl-agenda-campos { gap: 14px; }

body.pnl-embutido .pnl-agenda-rotulo {
    display: block;
    margin-bottom: 6px;
    color: #cdbcd6;
    font-size: 12.5px;
    font-weight: 600;
}

/* UM RÓTULO DEPOIS DE UM TEXTO DE APOIO PRECISA DE AR.

   "Mensagem já escrita" nascia colado na explicação do campo de cima, e os
   dois liam como um parágrafo só: a pessoa não via onde uma coisa terminava e
   a outra começava. */
body.pnl-embutido .pnl-dica + .pnl-agenda-rotulo,
body.pnl-embutido .pnl-dica + .inst-home-produtos {
    margin-top: 20px;
}

/* A caixa do agendamento fecha embaixo: ela terminava com 4px de padding, e
   com os campos escuros a borda passava rente ao último texto. */
body.pnl-embutido .pnl-agenda-box { padding-bottom: 16px; }

/* ---- os interruptores que sobraram ---- */
body.pnl-embutido .pnl-switch-trilho {
    background: rgba(255, 255, 255, .16);
}

/* O seletor precisa do [type="checkbox"] para bater com o do painel antigo:
   sem ele o peso é menor e o verde de lá continua vencendo. */
body.pnl-embutido .pnl-switch input[type="checkbox"]:checked + .pnl-switch-trilho {
    background: #a01ea0;
}

/* ---- o botão de escolher a imagem ---- */

/* Ele é azul-padrão de framework, e é o botão mais visível do formulário. */
body.pnl-embutido label.foto {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    width: 100%;
    margin: 0 0 8px;
    padding: 13px 18px;
    border: 1px dashed rgba(231, 73, 231, .38);
    border-radius: 11px;
    background: rgba(231, 73, 231, .08);
    color: #e9d4f2;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: border-color .16s ease, background .16s ease, color .16s ease;
}

body.pnl-embutido label.foto:hover {
    border-color: #e749e7;
    border-style: solid;
    background: rgba(231, 73, 231, .16);
    color: #fff;
}

body.pnl-embutido label.foto img,
body.pnl-embutido label.foto svg { filter: brightness(2.4); }

/* ---- o campo de PDF, agora que ele existe na tela ---- */
body.pnl-embutido input[type="file"][name="arquivoPdf"] {
    display: block;
    width: 100%;
    cursor: pointer;
}

/* O botão interno ("Escolher arquivo") é desenhado pelo navegador e não se
   pinta por CSS comum; o `::file-selector-button` é a única alça. */
body.pnl-embutido input[type="file"]::file-selector-button {
    margin-right: 12px;
    padding: 8px 14px;
    border: 0;
    border-radius: 8px;
    background: rgba(231, 73, 231, .18);
    color: #e9d4f2;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
}

body.pnl-embutido input[type="file"]::file-selector-button:hover {
    background: rgba(231, 73, 231, .3);
    color: #fff;
}

/* ---- cupom ou chave Pix: duas opções, dois blocos ---- */
body.pnl-embutido .pnl-acao-cupom-tipo {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 9px;
    margin-bottom: 14px;
}

body.pnl-embutido .pnl-codigo-op {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0;
    padding: 11px 13px;
    border: 1px solid rgba(231, 73, 231, .16);
    border-radius: 10px;
    background: rgba(255, 255, 255, .03);
    /* O !important é para vencer um !important: o estilo antigo pinta esta
       opção de `rgba(255,255,255,.82)`, que ao lado da escolhida (branco puro)
       lê como apagada - parece desativada, e não apenas não escolhida. */
    color: #e9d4f2 !important;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    transition: border-color .16s ease, background .16s ease, color .16s ease;
}

body.pnl-embutido .pnl-codigo-op:hover {
    border-color: rgba(231, 73, 231, .38);
    background: rgba(231, 73, 231, .07);
}

/* A bolinha continua ali, desenhada à mão: aqui ela é o que distingue as duas
   opções, e são só duas - blocos sem marca nenhuma fariam pensar que são
   botões, e não uma escolha entre uma coisa e outra. */
body.pnl-embutido .pnl-codigo-op input[type="radio"] {
    appearance: none;
    -webkit-appearance: none;
    flex-shrink: 0;
    width: 15px;
    height: 15px;
    margin: 0;
    border: 2px solid rgba(231, 73, 231, .45);
    border-radius: 50%;
    background: none;
    transition: border-color .16s ease, box-shadow .16s ease;
}

body.pnl-embutido .pnl-codigo-op input[type="radio"]:checked {
    border-color: #e749e7;
    box-shadow: inset 0 0 0 3.5px #e749e7;
}

body.pnl-embutido .pnl-codigo-op:has(input:checked) {
    border-color: #e749e7;
    background: rgba(231, 73, 231, .14);
    color: #fff !important;
}

/* ---- o subtítulo é o texto do card, e cabe mais que uma linha curta ----

   `:not(.pnl-embutido-aba)` PORQUE HÁ DOIS EMBUTIDOS, e esta regra é de um só.

   `pnl-embutido` é qualquer tela que roda dentro de um quadro do editor: o
   formulário do card (embutido.php) E as abas Tema e Publicar (quadro.php, que
   acrescenta `pnl-embutido-aba`). O campo `subtitulo` existe nos dois - no card é
   a descrição, que pede mais altura, e em Cores e letra é o subtítulo da página,
   que fica ao lado do título.

   Sem o `:not`, os 52px caíam nos dois: em Cores e letra o subtítulo ficava 8px
   mais alto que o título ao lado dele. Levei três medições para achar, porque eu
   media na TELA CHEIA, onde `pnl-embutido` não existe e os dois batiam certo. Foi
   a Stefanie que encontrou a regra. */
body.pnl-embutido:not(.pnl-embutido-aba) input[name="subtitulo"] {
    min-height: 52px;
    font-size: 14px;
}

/* ---- a chave do agendamento ---- */
body.pnl-embutido .pnl-agenda-chave {
    display: flex;
    align-items: center;
    gap: 13px;
    margin: 0;
    cursor: pointer;
}

body.pnl-embutido .pnl-agenda-chave-texto {
    display: block;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
}

body.pnl-embutido .pnl-agenda-chave-texto small {
    display: block;
    margin-top: 2px;
    color: #9376a1;
    font-size: 11.5px;
    font-weight: 400;
}

/* O miolo só existe com a chave ligada. `display: none` e não altura zero:
   escondido de verdade, ele sai também do Tab e dos leitores de tela - um
   campo de data que se alcança por Tab mas não se vê é pior que nenhum. */
/* A CHAVE APARECE NAS DUAS TELAS, então a cor dela não pode ficar presa ao
   editor. Escondida atrás do `body.pnl-embutido`, na tela antiga o `small`
   caía no cinza de fábrica (#5a5a5a) e dava 2.81:1 contra o fundo - abaixo do
   mínimo, e foi o medidor de contraste que pegou. */
.pnl-agenda-chave-texto { color: #fff; font-size: 13px; font-weight: 600; }
.pnl-agenda-chave-texto small {
    display: block;
    margin-top: 2px;
    color: #a98bb8;
    font-size: 11.5px;
    font-weight: 400;
}

.pnl-agenda-miolo { display: none; }
.pnl-agenda-ligado .pnl-agenda-miolo { display: block; margin-top: 16px; }

/* ---- o que o card de horários vai mostrar ---- */
.pnl-hor-previa {
    margin: 8px 0 14px;
    padding: 0;
    max-height: 210px;
    overflow-y: auto;
    list-style: none;
    border: 1px solid rgba(231, 73, 231, .14);
    border-radius: 10px;
    background: rgba(255, 255, 255, .03);
}

.pnl-hor-previa li {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 10px;
    padding: 9px 13px;
    font-size: 12.5px;
}

.pnl-hor-previa li + li { border-top: 1px solid rgba(231, 73, 231, .1); }

.pnl-hor-previa b   { color: #e9d4f2; font-weight: 600; }
.pnl-hor-previa span{ color: #cdbcd6; }
.pnl-hor-previa em  { color: #9376a1; font-style: normal; margin-left: auto; }

/* ---- acrescentar horário sem sair do card ---- */
.pnl-hor-vazio {
    margin: 8px 0 14px;
    padding: 12px 14px;
    border: 1px dashed rgba(231, 73, 231, .24);
    border-radius: 10px;
    color: #a98bb8;
    font-size: 12.5px;
    line-height: 1.5;
}

.pnl-hor-vazio b { color: #e9d4f2; }

/* O X FICAVA FORA DO CENTRO DO PRÓPRIO BOTÃO.

   Um botão de 24 por 24 com o glifo solto dentro não centra nada: o `×` se
   apoia na linha de base, que fica bem abaixo do meio da caixa, e o fundo
   vermelho do hover aparecia deslocado em relação ao desenho. `inline-flex`
   com os dois `center` resolve, e é o que todo botão só-de-ícone precisa - não
   basta dar largura e altura a ele. */
.pnl-hor-tirar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    margin: 0 0 0 6px;
    padding: 0;
    border: 0;
    border-radius: 7px;
    background: none;
    color: #9376a1;
    font-size: 17px;
    line-height: 1;
    cursor: pointer;
    transition: background .14s ease, color .14s ease;
}

.pnl-hor-tirar:hover,
.pnl-hor-tirar:focus-visible {
    background: rgba(255, 92, 92, .16);
    color: #ff9a9a;
}

.pnl-hor-novo {
    padding: 14px;
    border: 1px solid rgba(231, 73, 231, .16);
    border-radius: 11px;
    background: rgba(231, 73, 231, .04);
}

/* OS DIAS SÃO SETE BOTÕEZINHOS, e não sete linhas com caixa de marcar: são
   sete coisas curtas que se escolhem juntas, e em fila vertical ocupariam
   meia coluna. */
.pnl-hor-dias {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 12px;
}

.pnl-hor-dia { margin: 0; cursor: pointer; }

/* Escondido da vista, presente para o teclado: `display: none` tiraria o
   campo do Tab e dos leitores de tela. */
.pnl-hor-dia input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.pnl-hor-dia span {
    display: block;
    padding: 7px 11px;
    border: 1px solid rgba(231, 73, 231, .2);
    border-radius: 8px;
    color: #cdbcd6;
    font-size: 12px;
    font-weight: 600;
    transition: border-color .14s ease, background .14s ease, color .14s ease;
}

.pnl-hor-dia:hover span { border-color: rgba(231, 73, 231, .42); }

.pnl-hor-dia input:checked + span {
    border-color: #e749e7;
    background: #8a2b96;
    color: #fff;
}

.pnl-hor-dia input:focus-visible + span {
    outline: 2px solid #e749e7;
    outline-offset: 2px;
}

.pnl-hor-linha {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 12px;
}

.pnl-hor-campo { flex: 0 0 auto; margin: 0; }
.pnl-hor-campo-largo { flex: 1 1 160px; }

.pnl-hor-campo span {
    display: block;
    margin-bottom: 5px;
    color: #a98bb8;
    font-size: 11.5px;
    font-weight: 600;
}

.pnl-hor-campo input { width: 100%; }

/* ============================================================================
   O RELÓGIO: UM BOTÃO, E UMA GRADE QUE NÓS DESENHAMOS

   Escolher a hora passou por três formas aqui. `input[type="time"]` abre uma
   lista desenhada pelo NAVEGADOR, com fundo branco e seleção azul do sistema,
   que nenhum CSS alcança. Dois `<select>` resolveram a aparência do campo
   fechado e não a da lista: aberta, ela continuava sendo vinte e quatro linhas
   do sistema cobrindo metade da tela - ficou mais difícil de usar do que o
   campo que veio substituir.

   Agora o campo é um botão, e a lista é uma grade nossa: as vinte e quatro
   horas em seis por quatro, os minutos de cinco em cinco em seis por dois.
   Tudo à vista de uma vez, e escolher é um clique.
   ============================================================================ */
.pnl-rel { position: relative; }

.pnl-rel-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    min-width: 92px;
    min-height: 44px;
    margin: 0;
    padding: 0 16px;
    border: 1px solid rgba(231, 73, 231, .2);
    border-radius: 10px;
    background: rgba(255, 255, 255, .04);
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    letter-spacing: .5px;
    cursor: pointer;
    transition: border-color .16s ease, background .16s ease;
}

.pnl-rel-btn:hover {
    border-color: rgba(231, 73, 231, .5);
    background: rgba(231, 73, 231, .08);
}

.pnl-rel-btn[aria-expanded="true"] {
    border-color: #e749e7;
    background: rgba(231, 73, 231, .12);
}

.pnl-rel-btn:focus-visible {
    outline: 2px solid #e749e7;
    outline-offset: 2px;
}

/* O valor ainda não escolhido fica apagado: "--:--" em branco pareceria um
   horário de verdade. */
.pnl-rel-valor { color: inherit; }

/* ---- a grade ----

   `fixed` e presa ao <body>, como o balão do "i": o campo mora numa coluna
   que rola, e uma grade `absolute` seria cortada pela borda do primeiro pai
   com `overflow`. O z-index passa do 1200 da folha do formulário no celular. */
.pnl-rel-caixa {
    position: fixed;
    z-index: 1300;
    width: 246px;
    padding: 12px;
    border: 1px solid rgba(231, 73, 231, .32);
    border-radius: 12px;
    background: #26142f;
    box-shadow: 0 16px 40px rgba(0, 0, 0, .6);
    font-family: "Poppins", sans-serif;
}

.pnl-rel-caixa[hidden] { display: none; }

.pnl-rel-tit {
    margin: 0 0 7px;
    color: #9376a1;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.1px;
    text-transform: uppercase;
}

.pnl-rel-grade {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 4px;
}

.pnl-rel-grade + .pnl-rel-tit { margin-top: 13px; }

/* O `width: auto` e o `margin: 0` são contra o `button` solto do painel, que
   dá 100% de largura e 50px de margem no alto a todo botão sem dono. Aqui ele
   empilharia os trinta e seis botões numa coluna de 1800px de altura. */
.pnl-rel-grade button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: auto;
    height: 30px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 7px;
    background: rgba(255, 255, 255, .05);
    color: #cdbcd6;
    font-size: 12.5px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    cursor: pointer;
    transition: background .12s ease, color .12s ease;
}

.pnl-rel-grade button:hover {
    background: rgba(231, 73, 231, .22);
    color: #fff;
}

.pnl-rel-grade button:focus-visible {
    outline: 2px solid #e749e7;
    outline-offset: 1px;
}

/* O escolhido não se distingue só pela cor de fundo: ele fica branco e cheio,
   contra o cinza translúcido dos outros. */
.pnl-rel-grade button.aqui {
    background: linear-gradient(135deg, #7a2a9e 0%, #e749e7 100%);
    color: #fff;
}

.pnl-hor-add {
    width: auto;
    margin: 0;
    padding: 10px 18px;
    border: 1px solid rgba(231, 73, 231, .4);
    border-radius: 10px;
    background: rgba(231, 73, 231, .12);
    color: #fff;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    transition: background .16s ease, border-color .16s ease;
}

.pnl-hor-add:hover:not(:disabled) {
    border-color: #e749e7;
    background: rgba(231, 73, 231, .24);
}

.pnl-hor-add:disabled { opacity: .55; cursor: default; }

.pnl-hor-erro {
    margin: 0;
    color: #ff9a9a;
    font-size: 11.5px;
}

.pnl-hor-erro:not(:empty) { margin-top: 10px; }

/* ---- o link que leva a outra tela do painel ---- */

/* Ele não é um botão de ação do formulário: sai desta tela. Por isso é
   discreto e tem a seta, que diz "isto leva a outro lugar". */
.pnl-ir-tela {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin: 4px 0 10px;
    padding: 9px 14px;
    border: 1px solid rgba(231, 73, 231, .24);
    border-radius: 10px;
    color: #c9a8d6 !important;
    font-size: 12.5px;
    font-weight: 600;
    text-decoration: none !important;
    transition: border-color .16s ease, background .16s ease, color .16s ease;
}

/* A SETA É O CARACTERE, e não um escape.

   Aqui chegou a ficar um BYTE DE CONTROLE (0x11) seguido de "92": o escape
   CSS foi escrito através de um heredoc de shell, que o comeu pela metade. Na
   tela saía um quadradinho e o número. Um caractere que o arquivo já sabe
   guardar em UTF-8 não precisa de escape nenhum. */
.pnl-ir-tela::after { content: "→"; font-size: 14px; }

.pnl-ir-tela:hover,
.pnl-ir-tela:focus-visible {
    border-color: rgba(231, 73, 231, .5);
    background: rgba(231, 73, 231, .1);
    color: #fff !important;
}

/* ---- salvar não pode ficar no fim de uma rolagem ---- */

/* Numa coluna alta e estreita o Enviar cai muito abaixo da dobra, e num
   formulário longo a pessoa escreve, rola até o fim para salvar e rola de
   volta. Grudado embaixo, ele está sempre a um clique. */
body.pnl-embutido .display-align:has(> .form-group > .btn-principal) {
    position: sticky;
    bottom: 0;
    z-index: 5;
    margin: 0 -14px -22px;
    padding: 12px 14px;
    border-top: 1px solid rgba(231, 73, 231, .16);
    background: #120a18;
}

body.pnl-embutido .display-align:has(> .form-group > .btn-principal) .form-group {
    margin: 0;
    width: 100%;
}

body.pnl-embutido .btn-principal {
    width: 100%;
    padding: 13px 20px;
    border: 0;
    border-radius: 11px;
    background: linear-gradient(90deg, #500580, #a01ea0);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .4px;
}

body.pnl-embutido .btn-principal:hover,
body.pnl-embutido .btn-principal:focus-visible {
    border: 0;
    background: linear-gradient(90deg, #5d0a94, #b92ab9);
    color: #fff;
}

/* A rolagem é do quadro, e usa a mesma barra do resto do painel. */
body.pnl-embutido::-webkit-scrollbar { width: 10px; }
body.pnl-embutido::-webkit-scrollbar-track { background: transparent; }
body.pnl-embutido::-webkit-scrollbar-thumb {
    border: 2px solid transparent;
    border-radius: 99px;
    background: rgba(231, 73, 231, .28);
    background-clip: content-box;
}
body.pnl-embutido::-webkit-scrollbar-thumb:hover { background: rgba(231, 73, 231, .45); background-clip: content-box; }

/* O recuo vale a pega, para as duas listas terem a mesma margem de texto.
   As medidas vêm de .pnl-ed-bloco, que é o dono delas. */
.pnl-ed-bloco-recuo {
    flex-shrink: 0;
    width: var(--pega-largura);
    margin-left: var(--pega-recuo);
}

/* A marca ocupa a largura da miniatura, e nao a altura: o que muda de peso e
   a altura da linha, nao a coluna onde o texto comeca. */
.pnl-ed-bloco-fonte .pnl-ed-bloco-icone {
    width: 104px;
    height: 38px;
    border-radius: 9px;
}

.pnl-ed-bloco-texto {
    flex: 1 1 auto;
    min-width: 0;
}

.pnl-ed-bloco-texto b {
    display: block;
    overflow: hidden;
    color: #fff;
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.3;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* O subtítulo corta com reticências, como o título. Sem isto ele quebrava em
   duas ou três linhas na coluna estreita e cada card ficava com uma altura,
   o que transforma a lista numa escada. */
.pnl-ed-bloco-texto small {
    display: block;
    overflow: hidden;
    color: #9376a1;
    font-size: 11.5px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Bloco sem conteúdo não aparece na página, e a lista diz isso: senão a pessoa
   procura na página uma coisa que ela acha que cadastrou. */
.pnl-ed-bloco-vazio .pnl-ed-bloco-texto b { color: #cdbcd6; }

/* O CARD EM DESTAQUE, RECONHECÍVEL NA LISTA.

   Antes não havia como saber qual card era o grande sem abrir um por um. A
   marca é uma barra na borda esquerda, e não um fundo diferente: fundo
   diferente brigaria com a marca do card ABERTO, que também é fundo, e as
   duas coisas acontecem ao mesmo tempo o tempo todo. */
.pnl-ed-bloco-destaque {
    border-left: 3px solid #e749e7;
    padding-left: 12px;
}

/* O INTERRUPTOR DE DESTAQUE.

   Ele mora dentro do link da linha, então não pode ser um <input>: é um
   `role=switch` com o desenho feito à mão. O rótulo fica ao lado do trilho e
   não some, porque um trilho sozinho no fim de uma linha não diz de que é o
   liga/desliga. */
.pnl-ed-dest {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    flex-shrink: 0;
    /* Também virou <button>: mesma história da pega. */
    border: 0;
    background: none;
    padding: 5px 9px 5px 6px;
    border-radius: 9px;
    cursor: pointer;
    user-select: none;
    transition: background .16s ease;
}

.pnl-ed-dest:hover { background: rgba(231, 73, 231, .1); }

.pnl-ed-dest:focus-visible {
    outline: 2px solid #e749e7;
    outline-offset: 1px;
}

.pnl-ed-dest-trilho {
    position: relative;
    display: block;
    flex-shrink: 0;
    width: 30px;
    height: 17px;
    border-radius: 99px;
    background: rgba(231, 73, 231, .16);
    transition: background .16s ease;
}

.pnl-ed-dest-trilho::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: #8d6f9c;
    transition: transform .16s ease, background .16s ease;
}

.pnl-ed-dest-texto {
    color: #9376a1;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .2px;
    transition: color .16s ease;
}

/* LIGADO */
.pnl-ed-dest-on .pnl-ed-dest-trilho { background: #a01ea0; }
.pnl-ed-dest-on .pnl-ed-dest-trilho::after {
    transform: translateX(13px);
    background: #fff;
}
.pnl-ed-dest-on .pnl-ed-dest-texto { color: #e9d4f2; }

/* MODELO 1: o valor fica gravado, mas não muda a página. O interruptor
   continua funcionando e apagado, que é o que ele é ali: um ajuste guardado
   para quando a conta trocar de modelo. */
.pnl-ed-dest-mudo { opacity: .5; }

/* A PARTE DA LINHA QUE É LINK.

   A linha inteira era um <a>, e cada comando que entrava nela tinha de ser um
   `<span role="button">` para não virar botão dentro de link. Agora só a arte
   e o nome levam a algum lugar; o resto são botões de verdade, ao lado. */
.pnl-ed-bloco-link {
    display: flex;
    align-items: center;
    gap: 13px;
    flex: 1 1 auto;
    min-width: 0;
    color: inherit !important;
    text-decoration: none !important;
}

.pnl-ed-bloco-link:focus-visible {
    outline: 2px solid #e749e7;
    outline-offset: 3px;
    border-radius: 8px;
}

/* ---------------------------------------------------------------------------
   A LINHA QUE O PLANO NÃO MOSTRA (02/10/2026)

   A conta caiu para o Grátis e os dezessete cards continuam no banco. A página
   já mostra só os cinco primeiros - mas no painel as dezessete linhas eram
   idênticas, e não havia como saber quais estavam no ar.

   TRACEJADO, E NÃO APAGADO. A tentação é `opacity: .45` na linha inteira, e ela
   é errada por duas razões.

   A primeira é de contraste, e está medida: o título é #fff sobre o fundo real
   da linha (#e749e7 a 4% sobre a coluna #120a18, que compõe #1b0d20), o que dá
   18,67:1. A 45% de opacidade ele compõe com o próprio fundo e cai para 4,50:1
   - em cima do mínimo, sem folga nenhuma, numa linha que a pessoa PRECISA ler
   para decidir qual card apagar ou subir. Com o âmbar daqui ele fica em 18,08:1.

   A segunda é de sentido: apagado quer dizer "desativado, não mexa", e aqui é o
   contrário - esta é justamente a linha em que ela tem de mexer. O tracejado diz
   "provisório" sem tirar uma letra de legibilidade.

   SÓ A ARTE PERDE A COR. A miniatura é decoração, e dessaturada ela reforça o
   estado sem custar uma palavra. */
.pnl-ed-bloco-fora {
    border-style: dashed;
    border-color: rgba(240, 185, 92, .34);
    background: rgba(240, 185, 92, .05);
}

.pnl-ed-bloco-fora:hover,
.pnl-ed-bloco-fora:focus-within {
    border-color: rgba(240, 185, 92, .58);
    background: rgba(240, 185, 92, .1);
}

.pnl-ed-bloco-fora .pnl-ed-bloco-arte img,
.pnl-ed-bloco-fora .pnl-ed-bloco-icone {
    filter: grayscale(1);
    opacity: .7;
}

/* A SEGUNDA LINHA DO TEXTO: o tipo do card e, quando há, a etiqueta.

   A etiqueta ficava ao lado do NOME, e ali ela não cabia: medido no editor de
   três colunas a 1280px, a linha tem 358px e o link dentro dela 99px, então
   uma pastilha de 104px que não encolhe transbordava 196px por cima do
   interruptor de destaque. Descida para cá, ela divide o espaço com o tipo,
   que é curto e já corta com reticências. */
.pnl-ed-bloco-rodape {
    display: flex;
    align-items: center;
    gap: 7px;
    min-width: 0;

    /* A pergunta não é a largura da JANELA, e sim quanto espaço esta coluna
       recebeu - que depende também do menu, da prévia e de a terceira coluna
       estar aberta. Ver a regra do cadeado, logo abaixo. */
    container-type: inline-size;
    container-name: pnlcardrodape;
}

.pnl-ed-bloco-rodape small { min-width: 0; }

/* A ETIQUETA PRECISA VENCER `.pnl-situacao`, QUE VEM DEPOIS NESTE ARQUIVO.
   -----------------------------------------------------------------------
   As duas classes estão no mesmo elemento. Com uma classe cada, quem ganha é
   quem vem por último - e `.pnl-situacao` mora lá na linha 8614, bem depois
   daqui. Escrita com uma classe só, esta regra perdia `display`, `padding` e
   `font-size` para ela: a pastilha voltava a ser `inline-block`, o `gap`
   morria junto, e o cadeado saía grudado na palavra ("[cadeado]fora do
   plano"). Foi assim que a Stefanie a viu, e por isso o seletor dobrado. */
.pnl-situacao.pnl-ed-bloco-fora-selo {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    flex-shrink: 0;
    padding: 2px 9px 2px 7px;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .1px;
}

/* QUANDO SÓ O CADEADO CABE, SOBRA SÓ O CADEADO.

   O limite de 200px é medido: a pastilha inteira ocupa 104px e o tipo do card
   precisa de uns 90px para não virar "Produto...". Navegador sem `@container`
   mostra as palavras sempre, que é o comportamento de antes desta regra. */
@container pnlcardrodape (max-width: 200px) {
    .pnl-ed-bloco-fora-txt { display: none; }
    .pnl-situacao.pnl-ed-bloco-fora-selo { padding: 3px 5px; }
}

/* AS AÇÕES DA LINHA: GAVETA NO ESTREITO, SOLTAS NO LARGO.

   A marcação é uma só, e quem decide é esta folha. O padrão - o que vale
   sem media query nenhuma - é a GAVETA, porque é o caso apertado: num
   celular a linha inteira cabe num polegar, e dois alvos encostados no nome
   do card são dois toques errados por dia.

   Da largura em que o editor volta a ser três colunas para cima, os dois
   ícones saem da gaveta e ficam à vista. Ali sobra espaço, e um menu que
   esconde as ações cobra um clique a mais em todas elas - além de esconder
   que elas existem: ninguém descobre que dá para duplicar um card se nada na
   tela diz que dá. */
.pnl-ed-acoes {
    position: relative;
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

/* ---- o botão dos três pontinhos (só no estreito) ---- */
.pnl-ed-acoes-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: 9px;
    background: none;
    color: #a98ab6;
    cursor: pointer;
    transition: background .14s ease, color .14s ease;
}

.pnl-ed-acoes-btn:hover,
.pnl-ed-acoes-btn[aria-expanded="true"] {
    background: rgba(231, 73, 231, .14);
    color: #f2e2f8;
}

.pnl-ed-acoes-btn:focus-visible {
    outline: 2px solid #e749e7;
    outline-offset: 1px;
    color: #f2e2f8;
}

/* ---- a gaveta ---- */

/* Ela sai para a ESQUERDA porque o botão está na ponta direita da coluna:
   aberta para a direita, nasceria fora da tela. */
.pnl-ed-acoes-menu {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 20;
    min-width: 172px;
    padding: 5px;
    border: 1px solid rgba(231, 73, 231, .28);
    border-radius: 11px;
    background: #1b0f24;
    box-shadow: 0 14px 34px rgba(0, 0, 0, .55);
}

.pnl-ed-acoes-menu[hidden] { display: none; }

.pnl-ed-acao {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    padding: 10px 11px;
    border: 0;
    border-radius: 8px;
    background: none;
    color: #cdbcd6;
    font-size: 12.5px;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
    transition: background .14s ease, color .14s ease;
}

.pnl-ed-acao:hover,
.pnl-ed-acao:focus-visible {
    background: rgba(231, 73, 231, .16);
    color: #fff;
    outline: none;
}

.pnl-ed-acao:focus-visible {
    outline: 2px solid #e749e7;
    outline-offset: -2px;
}

/* EXCLUIR É O ÚNICO QUE NÃO DÁ PARA DESFAZER.

   O traço em cima o separa do Duplicar: colados, a diferença entre copiar e
   apagar vira um deslize de mão. A cor só aparece sob o ponteiro - vermelho
   parado pinta de alarme uma lista onde nada está errado. */
.pnl-ed-acao-perigo {
    margin-top: 4px;
    padding-top: 11px;
    border-top: 1px solid rgba(231, 73, 231, .16);
    border-radius: 0 0 8px 8px;
}

.pnl-ed-acao-perigo:hover,
.pnl-ed-acao-perigo:focus-visible {
    background: rgba(255, 92, 92, .14);
    color: #ff9a9a;
}

.pnl-ed-acao-perigo:focus-visible { outline-color: #ff9a9a; }

/* ---- TELA LARGA: A GAVETA VIRA DOIS ÍCONES NA LINHA ----

   1201px é a mesma largura em que o formulário deixa de ser folha sobre a
   tela e o editor volta a ser três colunas. Um segundo ponto de virada
   próximo do primeiro daria uma faixa de larguras com metade de cada
   desenho.

   O `[hidden]` precisa ser DESFEITO aqui: quem o põe e o tira é o script da
   gaveta, que não sabe de largura nenhuma. Aqui em cima não há gaveta para
   abrir - o botão dos pontinhos nem é desenhado - então o atributo ficaria
   escondendo as duas ações para sempre. */
@media (min-width: 1201px) {
    .pnl-ed-acoes-btn { display: none; }

    .pnl-ed-acoes-menu,
    .pnl-ed-acoes-menu[hidden] {
        position: static;
        display: flex;
        gap: 2px;
        min-width: 0;
        padding: 0;
        border: 0;
        border-radius: 0;
        background: none;
        box-shadow: none;
    }

    .pnl-ed-acao {
        width: 30px;
        height: 30px;
        padding: 0;
        justify-content: center;
        border-radius: 9px;
        color: #7d6289;
    }

    /* O nome da ação sai, e fica o `title` e o `aria-label`, que já estão no
       botão. Dois ícones mudos numa linha de 30px são o que cabe ali. */
    .pnl-ed-acao-rot { display: none; }

    /* Com o ponteiro na LINHA os dois clareiam, sem acender: é o aviso de
       que estão ali. O aceso é o que está sob o ponteiro. */
    .pnl-ed-bloco:hover .pnl-ed-acao { color: #a98ab6; }

    .pnl-ed-acao:hover,
    .pnl-ed-acao:focus-visible { color: #f2e2f8; }

    .pnl-ed-acao-perigo {
        margin: 0 0 0 4px;
        padding: 0;
        border: 0;
        border-radius: 9px;
    }

    .pnl-ed-acao-perigo:hover,
    .pnl-ed-acao-perigo:focus-visible { color: #ff9a9a; }
}

/* O CARD QUE ESTÁ ABERTO AO LADO.

   Sem esta marca, com o formulário aberto não há nada na lista dizendo de
   qual card ele é - e numa seção com dez cards parecidos isso é o começo
   de editar o errado. */
.pnl-ed-bloco-aqui,
.pnl-ed-bloco-aqui:hover {
    border-color: rgba(231, 73, 231, .55);
    background: rgba(231, 73, 231, .14);
}

/* ============================================================================
   O MODAL DE ESCOLHER O TIPO DO CARD

   É um <dialog> nativo: Esc, foco preso e fundo inerte vêm de fábrica. O que
   sobra para o CSS é o desenho.
   ============================================================================ */
.pnl-ed-modal {
    /* CENTRALIZAR NÃO VEM DE GRAÇA quando se mexe no `display`.

       O navegador centraliza o <dialog> modal com `margin: auto` dentro de um
       `inset: 0`. Trocar o `display: block` dele por `flex` (para o corpo
       rolar e o cabeçalho ficar parado) desmonta essa conta, e o modal nasce
       grudado no canto de cima à esquerda. As duas linhas abaixo refazem a
       centralização à mão. */
    position: fixed;
    inset: 0;
    margin: auto;

    width: min(780px, calc(100vw - 32px));
    max-height: calc(100vh - 80px);
    padding: 0;
    border: 1px solid rgba(231, 73, 231, .24);
    border-radius: 16px;
    background: #160c1d;
    color: #cdbcd6;
    box-shadow: 0 30px 80px rgba(0, 0, 0, .6);
    overflow: hidden;
}

/* O <dialog> nasce com `display: none`; aberto ele vira `block`, e é aí que
   o flex pode valer. */
.pnl-ed-modal[open] {
    display: flex;
    flex-direction: column;
}

.pnl-ed-modal::backdrop {
    background: rgba(8, 4, 12, .72);
}

.pnl-ed-modal-topo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-shrink: 0;
    padding: 18px 20px;
    border-bottom: 1px solid rgba(231, 73, 231, .14);
}

.pnl-ed-modal-titulo {
    margin: 0;
    color: #fff;
    font-size: 17px;
    font-weight: 700;
}

.pnl-ed-modal-x {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    /* O `button` global de novo: largura, margem e recheio. */
    width: 32px;
    height: 32px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 9px;
    background: none;
    color: #9376a1;
    cursor: pointer;
    transition: background .16s ease, color .16s ease;
}

.pnl-ed-modal-x:hover,
.pnl-ed-modal-x:focus-visible {
    background: rgba(231, 73, 231, .14);
    color: #fff;
}

.pnl-ed-modal-corpo {
    overflow-y: auto;
    padding: 18px 20px 22px;
}

.pnl-ed-modal-grupo {
    margin: 0 0 9px;
    color: #9376a1;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 1.1px;
    text-transform: uppercase;
}

.pnl-ed-modal-grade + .pnl-ed-modal-grupo { margin-top: 22px; }

/* `auto-fill` com um mínimo: as opções se acomodam sozinhas em duas ou três
   colunas conforme a largura, sem uma media query para cada caso. */
.pnl-ed-modal-grade {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(216px, 1fr));
    gap: 10px;
}

/* O DESENHO À ESQUERDA, e o texto ao lado.

   Ele fica num quadradinho de fundo próprio: solto, um traço fino ao lado de
   um título em negrito some. O quadrado dá a ele o mesmo peso visual do texto
   sem precisar engordar o traço. */
.pnl-ed-tipo {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    padding: 13px 15px;
    border: 1px solid rgba(231, 73, 231, .16);
    border-radius: 11px;
    background: rgba(231, 73, 231, .04);
    color: inherit !important;
    text-decoration: none !important;
    transition: border-color .16s ease, background .16s ease, transform .16s ease;
}

.pnl-ed-tipo:hover,
.pnl-ed-tipo:focus-visible {
    border-color: rgba(231, 73, 231, .5);
    background: rgba(231, 73, 231, .1);
    outline: none;
    transform: translateY(-1px);
}

@media (prefers-reduced-motion: reduce) {
    .pnl-ed-tipo:hover, .pnl-ed-tipo:focus-visible { transform: none; }
}

/* A COR DO QUADRADINHO É SÓLIDA, E NÃO TRANSLÚCIDA.

   O mesmo desenho aparece em dois lugares - aqui no modal e dentro do
   formulário do card - e com roxo translúcido a cor que o olho vê depende de
   TODAS as camadas embaixo. Medido: o mesmo `rgba(231,73,231,.12)` compunha
   rgb(54,21,60) no modal e rgb(66,25,71) no formulário, porque as pilhas são
   diferentes. Igualar a declaração não iguala a cor.

   #36153c é justamente o que o modal compunha. Sólido, os dois ficam
   idênticos sem depender de onde estão. */
.pnl-ed-tipo-icone,
body.pnl-embutido .pnl-acao-op-icone {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    border-radius: 9px;
    background: #36153c;
    color: #e9a8ff;
    transition: background .16s ease, color .16s ease;
}

.pnl-ed-tipo:hover .pnl-ed-tipo-icone,
.pnl-ed-tipo:focus-visible .pnl-ed-tipo-icone,
body.pnl-embutido .pnl-acao-op:hover .pnl-acao-op-icone {
    background: #5a1f63;
    color: #fff;
}

/* No bloco escolhido ele acende de vez: é parte da marca de escolhido, e não
   um enfeite que fica igual em todos. */
body.pnl-embutido .pnl-acao-op > input:checked + span .pnl-acao-op-icone {
    background: #8a2b96;
    color: #fff;
}

.pnl-ed-tipo-texto { min-width: 0; }

.pnl-ed-tipo b {
    display: block;
    margin-bottom: 3px;
    color: #fff;
    font-size: 13.5px;
    font-weight: 600;
}

.pnl-ed-tipo small {
    display: block;
    color: #9376a1;
    font-size: 11.5px;
    line-height: 1.5;
}

/* No celular o modal ocupa a tela: uma janelinha centralizada com margem de
   16px em volta é a mesma coisa, com menos espaço para as opções. */
@media (max-width: 640px) {
    .pnl-ed-modal {
        width: 100vw;
        max-width: 100vw;
        height: 100vh;
        max-height: 100vh;
        margin: 0;
        border: 0;
        border-radius: 0;
    }

    .pnl-ed-modal-grade { grid-template-columns: minmax(0, 1fr); }
}

/* ---------------- o botão da prévia, no cabeçalho ---------------- */

/* Ele mora ao lado do "Ver a página" e é o irmão discreto dele: um abre a
   página numa aba, o outro traz a página para cá. */
.pnl-ed-previa-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    flex-shrink: 0;
    padding: 9px 14px;
    border: 1px solid rgba(231, 73, 231, .22);
    border-radius: 10px;
    color: #c9a8d6 !important;
    font-size: 12.5px;
    font-weight: 600;
    text-decoration: none !important;
    transition: border-color .16s ease, background .16s ease, color .16s ease;
}

.pnl-ed-previa-btn:hover,
.pnl-ed-previa-btn:focus-visible {
    border-color: rgba(231, 73, 231, .45);
    background: rgba(231, 73, 231, .1);
    color: #fff !important;
}

/* Ligada, ela é um estado e não um convite: fica acesa como a aba ativa. */
.pnl-ed-previa-btn-on,
.pnl-ed-previa-btn-on:hover {
    border-color: transparent;
    background: linear-gradient(90deg, #500580, #a01ea0);
    color: #fff !important;
}

/* ---------------- coluna 4: a prévia ---------------- */
.pnl-ed-previa {
    padding: 16px 18px 18px;
    border: 1px solid rgba(231, 73, 231, .14);
    border-radius: 14px;
    background: rgba(231, 73, 231, .04);
}

.pnl-ed-previa-topo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.pnl-ed-previa-topo .pnl-ed-rotulo { margin: 0; }

.pnl-ed-previa-recarrega {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    /* O `button` global de novo: largura, margem e recheio. */
    width: auto;
    margin: 0;
    padding: 6px 11px;
    border: 1px solid rgba(231, 73, 231, .22);
    border-radius: 9px;
    background: none;
    color: #c9a8d6;
    font-size: 11.5px;
    font-weight: 600;
    cursor: pointer;
    transition: border-color .16s ease, background .16s ease, color .16s ease;
}

.pnl-ed-previa-recarrega:hover,
.pnl-ed-previa-recarrega:focus-visible {
    border-color: rgba(231, 73, 231, .45);
    background: rgba(231, 73, 231, .1);
    color: #fff;
}

/* Enquanto a página de dentro carrega, a seta gira: sem isso o clique parece
   não ter feito nada, porque quase sempre o conteúdo volta igual. */
.pnl-ed-previa-girando svg { animation: pnl-ed-gira .8s linear infinite; }

@keyframes pnl-ed-gira { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
    .pnl-ed-previa-girando svg { animation: none; opacity: .5; }
}

/* ---------------- celular ou desktop ----------------

   Duas opções de uma escolha só, desenhadas como um par e não como dois
   botões: a cápsula em volta é o que diz isso antes de qualquer texto. */
.pnl-ed-previa-tela {
    display: inline-flex;
    flex-shrink: 0;
    gap: 2px;
    padding: 2px;
    border: 1px solid rgba(231, 73, 231, .18);
    border-radius: 10px;
    background: rgba(0, 0, 0, .25);
}

.pnl-ed-previa-tela-bt {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    /* O `button` global de novo (largura 100%, margem 50px no topo). Esta
       folha tem seletores sem dono desde o site antigo, e todo botão novo
       precisa desfazer os três. */
    width: auto;
    margin: 0;
    padding: 5px 10px;
    border: 0;
    border-radius: 8px;
    background: none;
    color: #a98ab8;
    font-size: 11.5px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: background .16s ease, color .16s ease;
}

.pnl-ed-previa-tela-bt:hover { color: #fff; }

/* A ligada é um ESTADO, como a aba ativa do editor: fundo cheio, e não só
   uma borda. Com dois botões lado a lado, borda sozinha não responde "qual
   dos dois está valendo" num relance. */
.pnl-ed-previa-tela-on,
.pnl-ed-previa-tela-on:hover {
    background: linear-gradient(90deg, #500580, #a01ea0);
    color: #fff;
}

/* A MOLDURA DE CELULAR.

   Ela não é enfeite: sem a moldura, um quadro de 360px encostado na coluna
   parece a página cortada, e não a página num telefone. Com ela, dá para
   julgar o que se está vendo. */
.pnl-ed-celular {
    width: 100%;
    max-width: 336px;
    margin: 0 auto;
    padding: 10px 8px;
    border: 1px solid rgba(231, 73, 231, .22);
    border-radius: 26px;
    background: #0c0611;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .5);
}

/* COM O DESKTOP LIGADO, A PRÉVIA TOMA A LINHA INTEIRA.

   Medido antes de escrever esta regra: na coluna de sempre, o palco tinha
   334px e o quadro de 1280 era reduzido a 26% - uma miniatura de 208px de
   altura, onde não dá para julgar nada. Ocupando a linha, o palco passa de
   1200px e a redução fica perto de 1:1.

   É a mesma coisa que esta folha já faz abaixo de 1441px, onde a prévia desce
   e ocupa a largura toda porque três colunas mais ela não cabem. Aqui o
   motivo é outro - o conteúdo é que é largo - mas o remédio é o mesmo. */
.pnl-ed-corpo .pnl-ed-previa-larga { grid-column: 1 / -1; }

/* NO DESKTOP A MOLDURA VIRA MONITOR: larga, de cantos menos redondos, e com
   o `overflow: hidden` que recorta o quadro de 1280px reduzido lá dentro.

   `max-width: none` desfaz os 336px do telefone; sem isso o monitor sairia
   do tamanho de um celular deitado. */
.pnl-ed-celular-desk {
    max-width: none;
    padding: 8px;
    border-radius: 14px;
    overflow: hidden;
}

/* A página mora num quadro de 1280px, reduzido pelo JavaScript.

   `transform-origin` no canto superior esquerdo porque a redução tem de
   puxar o quadro para dentro da moldura, e não para o meio dela. A ALTURA
   do palco é calculada junto, no mesmo lugar: `transform` não muda o espaço
   que o elemento ocupa, então sem isso a moldura ficaria com a altura do
   quadro inteiro e sobraria um vão escuro embaixo. */
.pnl-ed-celular-desk .pnl-ed-celular-tela {
    width: 1280px;
    transform-origin: top left;
    border-radius: 6px;
}

/* A altura acompanha a tela, com um piso: num monitor baixo, 100vh menos o
   cabeçalho deixaria um telefone de duas linhas. */
.pnl-ed-celular-tela {
    display: block;
    width: 100%;
    height: max(460px, calc(100vh - 290px));
    border: 0;
    border-radius: 18px;
    background: #fff;
}

/* Na largura em que a prévia desce e ocupa a linha toda, ela tem espaço para
   ser mais alta - ali não divide a tela com ninguém. */
@media (max-width: 1440px) {
    .pnl-ed-celular-tela { height: max(560px, calc(100vh - 220px)); }
}

.pnl-ed-previa-aviso {
    margin: 12px 2px 0;
    color: #cdbcd6;
    font-size: 11.5px;
    line-height: 1.6;
    text-align: center;
}

.pnl-ed-previa-aviso b { color: #ffd479; }

/* ---------------- coluna 3: os ajustes ---------------- */

/* O título da coluna e o fechar, na mesma linha - como o topo da lista. */
.pnl-ed-ajustes-topo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.pnl-ed-ajustes-topo .pnl-ed-rotulo { margin: 0; }

.pnl-ed-fechar {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    padding: 6px 11px;
    border: 1px solid rgba(231, 73, 231, .22);
    border-radius: 9px;
    color: #c9a8d6 !important;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none !important;
    transition: border-color .16s ease, background .16s ease, color .16s ease;
}

.pnl-ed-fechar:hover,
.pnl-ed-fechar:focus-visible {
    border-color: rgba(231, 73, 231, .45);
    background: rgba(231, 73, 231, .1);
    color: #fff !important;
}

/* O QUADRO DO FORMULÁRIO.

   Altura fixa e rolagem POR DENTRO, em vez de o quadro crescer com o
   conteúdo. Crescendo, a página do editor ficaria com duas barras de
   rolagem concorrentes e a lista ao lado sumiria para cima enquanto se
   preenche um campo lá embaixo. Assim as três colunas ficam sempre à
   vista, e quem rola é o formulário.

   Os 210px descontados são o cabeçalho do editor mais o respiro da tela.
   O mínimo existe para telas baixas, onde 100vh menos o cabeçalho deixaria
   um quadro de duas linhas. */
.pnl-ed-quadro {
    display: block;
    width: 100%;
    height: max(420px, calc(100vh - 210px));
    border: 1px solid rgba(231, 73, 231, .14);
    border-radius: 11px;
    background: #120a18;
}

.pnl-ed-ajustes-vazio {
    padding: 22px 6px;
    text-align: center;
}

.pnl-ed-ajustes-icone {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    margin-bottom: 14px;
    border-radius: 15px;
    background: rgba(231, 73, 231, .1);
    color: #c9a8d6;
}

.pnl-ed-ajustes-titulo {
    margin: 0 0 7px;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
}

.pnl-ed-ajustes-texto {
    margin: 0;
    color: #9376a1;
    font-size: 12.5px;
    line-height: 1.6;
}

.pnl-ed-vazio {
    margin: 0;
    padding: 18px;
    border: 1px dashed rgba(231, 73, 231, .22);
    border-radius: 11px;
    color: #a98bb8;
    font-size: 13px;
    line-height: 1.6;
}

.pnl-ed-vazio b { color: #cdbcd6; }

/* ---------------- telas estreitas ----------------
   Abaixo de 1200px a coluna dos ajustes não cabe ao lado sem espremer a lista,
   que é o miolo da tela. Ela desce para baixo, inteira. Abaixo de 900px as
   seções descem também e viram uma faixa rolável na horizontal - em celular,
   escolher seção é uma ação curta e cabe numa fita. */
/* DAQUI PARA BAIXO, A PRÉVIA ENTRA EM TODOS OS SELETORES.

   `.pnl-ed-corpo-previa.pnl-ed-corpo-editando` tem peso 2, e as regras de
   tela estreita tinham peso 1: com a prévia ligada, o celular continuava
   tentando desenhar três colunas e a tela ganhava rolagem lateral. Peso não
   se resolve com ordem - tem de estar no seletor. */
@media (max-width: 1200px) {
    .pnl-ed-corpo,
    .pnl-ed-corpo-editando,
    .pnl-ed-corpo-previa,
    .pnl-ed-corpo-previa.pnl-ed-corpo-editando {
        grid-template-columns: 220px minmax(0, 1fr);
    }
    .pnl-ed-ajustes {
        grid-column: 1 / -1;
    }

    /* Embaixo e em toda a largura, o quadro pode ser mais alto: aqui ele
       não divide a tela com ninguém. */
    .pnl-ed-quadro { height: max(520px, calc(100vh - 160px)); }
}

@media (max-width: 900px) {
    .pnl-ed-corpo,
    .pnl-ed-corpo-editando,
    .pnl-ed-corpo-previa,
    .pnl-ed-corpo-previa.pnl-ed-corpo-editando {
        grid-template-columns: minmax(0, 1fr);
    }

    .pnl-ed-secoes {
        display: flex;
        flex-wrap: nowrap;
        gap: 6px;
        overflow-x: auto;
        padding: 12px 14px;
    }

    .pnl-ed-secoes .pnl-ed-rotulo { display: none; }

    .pnl-ed-secao,
    .pnl-ed-nova {
        flex-shrink: 0;
        margin: 0;
        white-space: nowrap;
    }

    .pnl-ed-topo {
        gap: 12px;
    }

    .pnl-ed-abas {
        order: 3;
        width: 100%;
    }

    .pnl-ed-aba {
        flex: 1 1 0;
        padding: 8px 10px;
        text-align: center;
    }
}

/* =============================================================================
   A PRIMEIRA TELA DEPOIS DE ENTRAR
   Estrutura em admin/home.php.

   Mesma família de cores do menu: o roxo e o magenta da Steactech sobre o
   fundo escuro do painel. A tela e o menu precisam parecer a mesma coisa.
   ============================================================================= */

/* DE MARGEM A MARGEM. Era 980px centralizados, e numa tela larga sobravam
   duas faixas vazias do tamanho do proprio conteudo - com a lista de contas,
   que e uma linha por conta, o desperdicio fica gritante. O recuo lateral
   continua, para o conteudo nao encostar na borda. */
/* SEM RECUO PROPRIO: quem espaca a tela da borda e o #conteudoAdm, e repetir
   aqui dobrava a conta - eram 35px do contentor mais 30px daqui, so no topo. */
.pnl-home {
    max-width: none;
    margin: 0;
    padding: 0;
    font-family: 'Poppins', 'Roboto', Arial, sans-serif;
    color: #fff;
}

/* ---------------- a página ---------------- */
.pnl-home-capa {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
    padding: 24px 26px;
    border: 1px solid rgba(231, 73, 231, .18);
    border-radius: 16px;
    background: linear-gradient(120deg, rgba(80, 5, 128, .3) 0%, rgba(231, 73, 231, .09) 100%);
}

.pnl-home-capa-marca {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
    width: 76px;
    height: 76px;
    border-radius: 20px;
    /* Fundo claro por trás da logo: quase toda logo de cliente foi desenhada
       para fundo branco, e várias têm partes escuras que sumiriam aqui. */
    background: rgba(255, 255, 255, .94);
}

.pnl-home-capa-marca img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.pnl-home-capa-inicial {
    color: #500580;
    font-size: 28px;
    font-weight: 700;
    letter-spacing: -.5px;
}

.pnl-home-capa-texto {
    flex: 1 1 260px;
    min-width: 0;
}

/* NO AR OU FORA DO AR é a primeira coisa a se ler nesta tela: dá para passar
   dias editando uma página que ninguém alcança. */
.pnl-home-etiqueta {
    display: inline-block;
    margin-bottom: 7px;
    padding: 3px 11px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .7px;
    text-transform: uppercase;
}

.pnl-home-etiqueta-ok {
    background: rgba(0, 184, 148, .18);
    color: #4ce0bd;
}

.pnl-home-etiqueta-off {
    background: rgba(225, 112, 85, .2);
    color: #ffb4a2;
}

.pnl-home-nome {
    margin: 0 0 6px;
    font-size: 26px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -.4px;
    color: #fff;
}

.pnl-home-endereco {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0;
    font-size: 13.5px;
    color: #a98bb8;
}

.pnl-home-endereco a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #a98bb8 !important;
    text-decoration: none !important;
}

.pnl-home-endereco a b {
    color: #e749e7;
    font-weight: 600;
}

.pnl-home-endereco a:hover,
.pnl-home-endereco a:focus-visible {
    color: #fff !important;
}

.pnl-home-modelo {
    padding: 2px 9px;
    border: 1px solid rgba(231, 73, 231, .22);
    border-radius: 999px;
    font-size: 11.5px;
}

.pnl-home-religar {
    flex: 1 1 100%;
    padding: 11px 14px;
    border: 1px solid rgba(225, 112, 85, .3);
    border-left: 3px solid #e17055;
    border-radius: 10px;
    background: rgba(225, 112, 85, .1);
    color: #ffc9b8 !important;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none !important;
}

.pnl-home-religar:hover,
.pnl-home-religar:focus-visible {
    background: rgba(225, 112, 85, .18);
    color: #fff !important;
}

/* ---------------- os números ---------------- */
.pnl-home-numeros {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-top: 16px;
}

.pnl-home-num {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 16px 18px;
    border: 1px solid rgba(231, 73, 231, .14);
    border-radius: 13px;
    background: rgba(231, 73, 231, .045);
    color: inherit !important;
    text-decoration: none !important;
    transition: border-color .16s ease, background .16s ease;
}

/* Só os que levam a algum lugar respondem ao mouse. Um card que muda no hover
   e não é clicável promete uma coisa que não acontece. */
a.pnl-home-num:hover,
a.pnl-home-num:focus-visible {
    border-color: rgba(231, 73, 231, .4);
    background: rgba(231, 73, 231, .1);
}

.pnl-home-num-valor {
    font-size: 27px;
    font-weight: 700;
    line-height: 1.05;
    color: #fff;
    font-variant-numeric: tabular-nums;
}

/* "há 3 dias" não é um número e não pode ter o corpo de um: no mesmo tamanho
   dos outros ele quebraria em duas linhas e desalinharia a fileira. */
.pnl-home-num-texto {
    font-size: 18px;
    line-height: 1.5;
}

.pnl-home-num-rotulo {
    color: #a98bb8;
    font-size: 12px;
    font-weight: 500;
}

/* ---------------- os atalhos ---------------- */
/* O TITULO DA SECAO ALINHA COM O CONTEUDO, e nao com a borda dos blocos.

   Estava em 292, a mesma coluna da borda dos cards - tecnicamente alinhado,
   e errado aos olhos: o texto dentro dos blocos comeca em 312, e o que o olho
   compara e texto com texto. "Contas" ficava vinte pixels a esquerda de
   "Ensaio Sao Mateus", que e justamente o que ele anuncia.

   E a mesma decisao que o menu ja tomou: la o rotulo do grupo nao alinha com
   a borda dos itens (12), e sim com a tinta dos icones (27). Uma regua so, e
   ela passa pelo conteudo.

   Os 20px sao a soma do recuo dos blocos (18) com a borda deles (1) e o
   bearing da letra (1) - medido na tinta, em captura de 4x. */
.pnl-home-titulo {
    margin: 34px 0 14px;
    padding-left: 20px;
    font-size: 15px;
    font-weight: 600;
    color: #cdbcd6;
}

.pnl-home-titulo-conta {
    margin-left: 7px;
    padding: 2px 9px;
    border-radius: 999px;
    background: rgba(231, 73, 231, .14);
    color: #e2c9ec;
    font-size: 12px;
    font-weight: 600;
}

.pnl-home-atalhos {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

/* O ICONE EM CIMA, E NAO AO LADO.

   Ao lado, ele empurrava o texto para 362 enquanto o titulo da secao e todo
   o resto da tela ficavam em 312 - cinquenta pixels de diferenca entre o
   titulo e o texto que ele anuncia, na unica secao da home onde isso
   acontecia. As linhas de conta, logo abaixo, comecam em 312.

   Empilhado, o icone e as duas linhas de texto caem todos na mesma coluna, e
   os tres blocos da home passam a ler-se como uma coisa so. */
.pnl-home-atalho {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 11px;
    padding: 17px 18px;
    border: 1px solid rgba(231, 73, 231, .16);
    border-radius: 13px;
    background: rgba(231, 73, 231, .045);
    color: inherit !important;
    text-decoration: none !important;
    transition: border-color .16s ease, background .16s ease, transform .16s ease;
}

.pnl-home-atalho:hover,
.pnl-home-atalho:focus-visible {
    border-color: rgba(231, 73, 231, .42);
    background: rgba(231, 73, 231, .1);
    transform: translateY(-2px);
}

.pnl-home-atalho-icone {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    border-radius: 11px;
    background: linear-gradient(135deg, #500580 0%, #b333c9 100%);
    color: #fff;
}

.pnl-home-atalho b {
    display: block;
    margin-bottom: 2px;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
}

.pnl-home-atalho small {
    display: block;
    color: #a98bb8;
    font-size: 12px;
    line-height: 1.45;
}

/* ---------------- as contas, só para o master ---------------- */
.pnl-home-lista {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

/* ---- a busca ----
   Ela vem junto com a paginacao, e nao no lugar dela: paginar 35 contas sem
   ter como procurar PIORA o que a paginacao veio resolver - achar a conta
   certa passaria a exigir folhear pagina por pagina. */
.pnl-home-busca {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 12px;
    /* O mesmo recuo dos outros blocos: o icone fica onde o texto dos demais
       comeca, e a lupa deixa de ser a unica coisa fora da coluna. */
    padding: 0 18px;
    height: 42px;
    max-width: 380px;
    border: 1px solid rgba(231, 73, 231, .2);
    border-radius: 10px;
    background: rgba(231, 73, 231, .05);
}

.pnl-home-busca:focus-within {
    border-color: rgba(231, 73, 231, .5);
}

.pnl-home-busca svg {
    flex-shrink: 0;
    color: #9376a1;
}

.pnl-home-busca input {
    flex: 1 1 auto;
    min-width: 0;
    height: auto;
    /* A regra global `input` do painel - a que nasceu na tela de login - da
       8px de margem no topo de TODO campo. Num campo empilhado ela serve; aqui
       o campo esta numa linha com a lupa, e a margem descia o texto 4px abaixo
       do centro dela. Mesma familia de problema do span+span. */
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    color: #fff;
    font-family: inherit;
    font-size: 13.5px;
}

.pnl-home-busca input:focus {
    border: 0 !important;
    box-shadow: none !important;
    outline: 0;
}

.pnl-home-busca input::placeholder {
    color: #8a7598;
}

/* Zera a regra global de `button` que nasceu na tela de login. */
.pnl-home-busca button {
    margin-top: 0;
    width: auto;
    padding: 0;
    font-size: 0;
    border: 0;
    background: none;
    color: #9376a1;
    cursor: pointer;
}

.pnl-home-busca button:hover { color: #fff; }

/* ---- a paginacao ---- */
/* `.pnl-nov-paginas` ANDA JUNTO em todas as regras daqui: a paginacao das
   Novidades e a mesma coisa que a de Contas, e duas aparencias para a mesma
   funcao sao duas coisas para manter iguais a mao. A diferenca esta so no
   comportamento - la o link recarrega a pagina, aqui o botao corta a lista no
   navegador, porque o filtro e a busca daquela tela tambem sao de la. */
.pnl-home-paginas,
.pnl-nov-paginas {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 14px;
}

.pnl-home-paginas a,
.pnl-home-paginas span,
.pnl-nov-paginas button,
.pnl-nov-paginas span {
    min-width: 34px;
    padding: 7px 10px;
    border: 1px solid rgba(231, 73, 231, .18);
    border-radius: 8px;
    color: #cdbcd6 !important;
    font-size: 12.5px;
    font-weight: 600;
    text-align: center;
    text-decoration: none !important;
    transition: background .16s ease, color .16s ease;
}

.pnl-home-paginas a:hover,
.pnl-home-paginas a:focus-visible,
.pnl-nov-paginas button:not(:disabled):hover,
.pnl-nov-paginas button:not(:disabled):focus-visible {
    background: rgba(231, 73, 231, .16);
    color: #fff !important;
}

.pnl-home-paginas .aqui,
.pnl-nov-paginas .aqui {
    background: linear-gradient(90deg, rgba(80, 5, 128, .6) 0%, rgba(231, 73, 231, .3) 100%);
    border-color: rgba(231, 73, 231, .45);
    color: #fff !important;
}

/* O resumo diz de quantas a pessoa esta vendo quantas: sem ele, a paginacao
   e um punhado de numeros sem escala - nao da para saber se sao tres paginas
   ou trinta. */
.pnl-home-paginas em,
.pnl-nov-paginas em {
    border: 0;
    padding-left: 6px;
    color: #9376a1;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
}

.pnl-home-vazio {
    padding: 18px;
    border: 1px dashed rgba(231, 73, 231, .22);
    border-radius: 11px;
    color: #a98bb8;
    font-size: 13.5px;
}

/* 18px DE RECUO, o mesmo dos cartoes de numero e dos atalhos. Eram 16 aqui e
   18 la, e como os blocos ficam empilhados na mesma coluna, o texto de um
   comecava dois pixels antes do outro. */
.pnl-home-conta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    padding: 12px 18px;
    border: 1px solid rgba(231, 73, 231, .13);
    border-radius: 11px;
    background: rgba(231, 73, 231, .04);
}

/* Conta fora do ar fica mais apagada, e o motivo vem escrito ao lado do
   endereço - uma linha só apagada seria um enigma. */
.pnl-home-conta-off {
    opacity: .58;
}

.pnl-home-conta-dados {
    flex: 1 1 200px;
    min-width: 0;
}

.pnl-home-conta-dados b {
    display: block;
    overflow: hidden;
    color: #fff;
    font-size: 13.5px;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pnl-home-conta-dados small {
    display: block;
    color: #9376a1;
    font-size: 11.5px;
}

.pnl-home-conta-botoes {
    display: flex;
    flex-shrink: 0;
    gap: 7px;
}

.pnl-home-conta-botoes a {
    padding: 6px 14px;
    border: 1px solid rgba(231, 73, 231, .26);
    border-radius: 8px;
    color: #cdbcd6 !important;
    font-size: 12.5px;
    font-weight: 600;
    text-decoration: none !important;
    transition: background .16s ease, color .16s ease;
}

.pnl-home-conta-botoes a:hover,
.pnl-home-conta-botoes a:focus-visible {
    background: rgba(231, 73, 231, .16);
    color: #fff !important;
}

/* ---------------- telas estreitas ---------------- */
@media (max-width: 860px) {
    .pnl-home-numeros {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .pnl-home-atalhos {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 560px) {
    .pnl-home {
        padding: 20px 16px 48px;
    }
    .pnl-home-capa {
        padding: 20px;
    }
    .pnl-home-nome {
        font-size: 21px;
    }
    /* Dois números por linha continuam legíveis em 360px; quatro não. */
    .pnl-home-num {
        padding: 13px 14px;
    }
    .pnl-home-num-valor {
        font-size: 22px;
    }
}

/* =============================================================================
   O MENU DO PAINEL
   Estrutura em admin/partes/menu.php.

   As cores são as do canvas ("Menu novo · Minhas páginas"), que são as da
   Steactech: o roxo #500580 e o magenta #e749e7 da logo, sobre um fundo quase
   preto arroxeado. A mesma família da tela de entrada, para a porta e o que
   vem depois dela combinarem.

   O MENU ANTIGO TINHA 6em E CRESCIA PARA 16em NO HOVER, então em repouso era
   uma coluna de oito ícones cinzas sem nome. Este tem 264px e os nomes ficam
   escritos. Quem quiser a coluna estreita clica em recolher - e aí ela vira
   68px de ícones, mas por escolha, e com o nome voltando no hover.
   ============================================================================= */

:root {
    --pnl-menu-largura: 264px;
    --pnl-menu-largura-fechado: 68px;
}

.pnl-menu {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 5;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    width: var(--pnl-menu-largura);
    height: 100vh;
    padding: 16px 12px 12px;
    background: #0c0611;
    border-right: 1px solid rgba(231, 73, 231, .14);
    font-family: 'Poppins', 'Roboto', Arial, sans-serif;
    transition: width .22s ease;
}

/* ---------------- a marca e o recolher ---------------- */
/* A REGUA DO MENU tem duas colunas, e so duas:

     25px - os icones (e o rotulo de cada grupo)
     55px - o texto dos itens (e o nome da marca)

   Antes eram quatro posicoes, e tres delas erravam por pouco: o rotulo do
   grupo caia em 24 contra 25 dos icones, e o nome da marca em 58 contra 55
   dos itens. Errar por um ou tres pixels e pior que errar por vinte: o olho
   percebe que esta torto e nao acha o motivo.

   A MARCA PRECISAVA ENTRAR NAS DUAS, e nao so no nome. O selo comecava em 13
   enquanto os icones dos itens comecam em 27: o bloco inteiro da marca ficava
   catorze pixels a esquerda de tudo o que vem abaixo dele, e e a primeira
   coisa que se ve no menu.

   A conta que fecha as duas colunas de uma vez: selo em 27, selo de 24px, vao
   de 4 -> o nome cai em 27 + 24 + 4 = 55. O selo encolheu de 32 para 24 para
   essa soma bater sem espremer o texto contra ele. */
.pnl-menu-topo {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 2px 1px 14px 15px;
}

.pnl-menu-marca {
    display: flex;
    align-items: center;
    gap: 4px;
    flex: 1 1 auto;
    min-width: 0;
    color: #fff !important;
    text-decoration: none !important;
}

.pnl-menu-marca-selo {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    border-radius: 7px;
    background: linear-gradient(135deg, #500580 0%, #e749e7 100%);
}

/* O desenho dentro do selo acompanha: 18px num selo de 24 nao deixa respiro
   nenhum, e o simbolo encostava na borda do proprio quadrado. */
.pnl-menu-marca-selo svg {
    width: 14px;
    height: 14px;
}

.pnl-menu-marca-nome {
    overflow: hidden;
    font-size: 15.5px;
    font-weight: 400;
    color: #a98bb8;
    letter-spacing: -.2px;
    white-space: nowrap;
}

.pnl-menu-marca-nome b {
    font-weight: 700;
    color: #fff;
}

/* Zera a regra global de `button` do painel (margin-top: 50px, width: 100%,
   padding: 15px 0, font-size: 18px) - ela nasceu na tela de login e alcança
   todo botão do painel. */
.pnl-menu-recolher {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 0;
    width: 30px;
    height: 30px;
    padding: 0;
    font-size: 0;
    border: 0;
    border-radius: 8px;
    background: rgba(231, 73, 231, .08);
    color: #a98bb8;
    cursor: pointer;
    transition: background .18s ease, color .18s ease;
}

.pnl-menu-recolher:hover,
.pnl-menu-recolher:focus-visible {
    background: rgba(231, 73, 231, .2);
    color: #fff;
}

/* ---------------- quem está dentro ---------------- */
/* O CARD DA CONTA. O recuo era de 10px por 12px e o nome encostava na borda
   - num card pequeno, com borda visivel, pouco respiro le como erro de
   alinhamento. As duas linhas de dentro tambem ganharam folga entre si. */
/* A LOGO DA CONTA, a esquerda do nome (02/10/2026).
   -----------------------------------------------------------------------------
   O bloco virou uma linha de dois: a imagem e, ao lado, a coluna com nome,
   endereco e plano. Antes era so a coluna, e os tres filhos eram diretos daqui
   - por isso a `.pnl-menu-conta-dados` no meio: sem ela a imagem e o plano
   seriam irmaos na mesma linha.

   `align-items: flex-start` para a logo ficar no alto, junto do nome, e nao
   centrada contra as tres linhas de texto. */
.pnl-menu-conta {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    overflow: hidden;
    margin-bottom: 14px;
    /* 13px na LATERAL: com a borda de 1px e o bearing da propria letra, o nome
       cai com a tinta em 27 - a mesma coluna da tinta dos icones.

       O respiro que faltava e que a fez parecer colada era o de CIMA, e esse
       continua generoso: sao 13 e 14, contra os 10 do desenho original. */
    padding: 13px 13px 14px;
    border: 1px solid rgba(231, 73, 231, .16);
    border-radius: 11px;
    background: rgba(231, 73, 231, .05);
}

/* `min-width: 0` E O QUE DEIXA O NOME LONGO CORTAR. Um filho de flex nao
   encolhe abaixo do conteudo por padrao, entao sem isto o `text-overflow` do
   nome nunca dispara e a coluna empurra a logo para fora da caixa. */
.pnl-menu-conta-dados {
    min-width: 0;
    flex: 1 1 auto;
}

.pnl-menu-conta-logo {
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    border-radius: 9px;
    /* `contain` e nao `cover`: logo cortada e marca errada. Quem envia um
       retangulo ve o retangulo inteiro dentro do quadrado. */
    object-fit: contain;
    background: rgba(231, 73, 231, .10);
    padding: 3px;
}

.pnl-menu-conta-nome {
    display: block;
    overflow: hidden;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* "Ver meu site" era a única resposta para "qual é o meu link?" e vivia numa
   faixa no alto do conteúdo, que sai da tela ao rolar. Aqui ela fica. */
.pnl-menu-conta-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: 5px;
    max-width: 100%;
    overflow: hidden;
    color: #e749e7 !important;
    font-size: 11.5px;
    font-weight: 500;
    text-decoration: none !important;
    white-space: nowrap;
}

.pnl-menu-conta-link:hover,
.pnl-menu-conta-link:focus-visible {
    color: #f38df3 !important;
    text-decoration: underline !important;
}

/* A ETIQUETA DO PLANO, no bloco da conta e levando a tela de Planos.
   -----------------------------------------------------------------------------
   PILULA E NAO LINHA DE TEXTO. Ao lado do `/slug`, que ja e roxo e sublinha no
   hover, um terceiro texto solto viraria uma lista de tres links parecidos. A
   pilula diz "isto e um estado desta conta", que e o que o plano e.

   EM LINHA PROPRIA, e aqui eu errei na primeira versao (02/10/2026).

   Ela nasceu `inline-flex` com `margin-top`, e `inline-flex` nao quebra linha:
   ela foi parar ao lado do `/steactech`, encostada nele, e o `margin-top` nao
   fez nada porque os dois estavam na mesma linha. A Stefanie: "esta estranha,
   sei la, colada ali no link".

   `flex` com `width: fit-content` resolve as duas coisas de uma vez: o
   elemento passa a ser de bloco, entao comeca na linha de baixo, e continua
   do tamanho do conteudo em vez de esticar pela caixa inteira - uma pilula
   que atravessa o menu nao parece mais uma pilula.

   SEM FIO DIVISORIO. Cheguei a escrever um, com `::before` absoluto, para
   separar "a pagina" (nome e endereco) de "a assinatura" (o plano). Ele
   precisava de um ancestral posicionado que a caixa nao tem, e eu estava
   resolvendo com posicionamento um problema que era de espaco. O que ela
   pediu foi que a pilula parasse de parecer colada no link - linha propria e
   onze pixels fazem isso, e nada mais precisa existir.

   O FUNDO E MAIS FORTE QUE O DA CAIXA em volta (.10 contra .05) porque ela
   precisa se destacar DENTRO de um bloco que ja e roxo claro. Com o mesmo
   valor ela sumia. */
.pnl-menu-conta-plano {
    display: flex;
    align-items: center;
    gap: 5px;
    width: fit-content;
    max-width: 100%;
    margin-top: 11px;
    overflow: hidden;
    padding: 4px 10px;
    border: 1px solid rgba(231, 73, 231, .28);
    border-radius: 999px;
    background: rgba(231, 73, 231, .10);
    color: #f0a8f0 !important;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .2px;
    text-decoration: none !important;
    text-transform: uppercase;
    white-space: nowrap;
}


.pnl-menu-conta-plano:hover,
.pnl-menu-conta-plano:focus-visible {
    border-color: rgba(231, 73, 231, .55);
    background: rgba(231, 73, 231, .20);
    color: #fbd5fb !important;
}

/* O escudo nao encolhe quando o nome do plano e longo: ele e o que diz, de
   relance, que aquela pilula fala de plano. */
.pnl-menu-conta-plano svg { flex: 0 0 auto; }

/* ---------------- a lista ---------------- */
.pnl-menu-rolo {
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    margin: 0 -4px;
    padding: 0 4px;
}

/* A SOMBRA QUE DIZ QUE TEM MAIS COISA ABAIXO.

   Com dezesseis itens - o caso do master - tres deles ficam abaixo da dobra,
   e nada na tela dizia isso: a lista terminava numa borda limpa e parecia
   completa. 'Modelos' e 'Links do menu' existiam e ninguem os via.

   A barra de rolagem nao serve de aviso aqui: ela e overlay e so aparece
   depois que a pessoa ja rolou - ou seja, depois de ela ja ter descoberto
   sozinha o que a sombra existe para contar.

   A classe vem do JavaScript, que a tira quando a lista chega ao fim. */
.pnl-menu-rolo-caixa {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
}

.pnl-menu-rolo-caixa::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 34px;
    background: linear-gradient(to top, #0c0611 8%, rgba(12, 6, 17, 0));
    opacity: 0;
    pointer-events: none;   /* a sombra nunca engole o clique do ultimo item */
    transition: opacity .18s ease;
}

.pnl-menu-rolo-caixa.tem-mais::after {
    opacity: 1;
}

/* A BARRA DE ROLAGEM DO MENU.

   Ela saia GROSSA E QUADRADA, e a culpa nao era do cursor: e da regra
   global ::-webkit-scrollbar, mais abaixo neste arquivo, que pinta a CALHA
   inteira com a cor de destaque. O cursor discreto por cima dela sumia, e o
   que se via era uma faixa magenta macica de ponta a ponta - parecendo uma
   barra sempre cheia, com canto vivo.

   Aqui a calha volta a ser transparente, e o cursor usa o truque da borda:
   a barra tem 11px, o cursor tem 3px de borda TRANSPARENTE e o fundo so
   pinta dentro dela (background-clip: padding-box). O resultado e um cursor
   de 5px, bem arredondado e com folga das duas margens - em vez de um bloco
   colado na borda do menu.

   scrollbar-width/scrollbar-color sao o padrao moderno e vem antes: onde os
   dois existem, o navegador escolhe o padrao e ignora o -webkit-. */
.pnl-menu-rolo {
    scrollbar-width: thin;
    scrollbar-color: rgba(231, 73, 231, .35) transparent;
}

.pnl-menu-rolo::-webkit-scrollbar {
    width: 11px;
    background: transparent;
}

.pnl-menu-rolo::-webkit-scrollbar-track {
    background: transparent;
    border: 0;
}

.pnl-menu-rolo::-webkit-scrollbar-thumb {
    border: 3px solid transparent;
    border-radius: 999px;
    background: rgba(231, 73, 231, .3);
    background-clip: padding-box;
}

.pnl-menu-rolo::-webkit-scrollbar-thumb:hover {
    background: rgba(231, 73, 231, .5);
    background-clip: padding-box;
}

/* Os cantos, onde duas barras se encontrariam: sem isto o navegador desenha
   um quadradinho na cor de destaque no pe da barra. */
.pnl-menu-rolo::-webkit-scrollbar-corner {
    background: transparent;
}

/* O RÓTULO DO GRUPO É O QUE FAZ O MENU SE LER.
   Sem ele são treze itens em fila e a pessoa lê os treze para achar um. Com
   ele, ela lê quatro palavras e vai direto ao grupo certo.

   E os grupos são de propósito os mesmos que vão virar as abas do editor
   (A página, Tema, Publicar): quando o editor existir, esses nomes já serão
   conhecidos. */
.pnl-menu-grupo {
    margin: 12px 0 4px;
    /* 15px, E ISSO E MEDIDO NA TINTA, nao na caixa.

       As caixas do rotulo e do icone ja estavam nos mesmos 25px - e a tela
       continuava torta. O motivo: a caixa nao e o que o olho ve. Os icones
       sao SVG de viewBox 24 cujo desenho comeca em x=3, o que da 2px de folga
       dentro de uma caixa de 18px. A tinta do icone comecava em 27 e a da
       letra em 25.

       Dois pixels num rotulo pequeno em maiusculas sao visiveis, e sao do
       tipo que nao se explica: da para ver que esta torto e nao da para dizer
       por que. Os 2px a mais aqui poem a letra na mesma coluna da tinta do
       icone.

       Medido com captura de tela em 4x, procurando a primeira coluna de
       pixel diferente do fundo dentro da caixa de cada elemento - e nao com
       getBoundingClientRect, que foi justamente quem disse que estava tudo
       certo enquanto a tela dizia o contrario. */
    padding: 0 15px;
    color: #8a7598;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 1.1px;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
}

.pnl-menu-grupo:first-child {
    margin-top: 2px;
}

.pnl-menu-item {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    box-sizing: border-box;
    margin: 0 0 1px;
    padding: 7px 12px;
    border: 1px solid transparent;
    border-radius: 9px;
    background: none;
    color: #cdbcd6 !important;
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 500;
    text-align: left;
    text-decoration: none !important;
    transition: background .16s ease, color .16s ease;
}

.pnl-menu-item:hover,
.pnl-menu-item:focus-visible {
    background: rgba(231, 73, 231, .09);
    color: #fff !important;
}

/* ONDE A PESSOA ESTÁ, dito pelo fundo e pela borda - e não só pela cor do
   texto. Um item apenas mais claro que os outros se perde numa lista de
   treze; o mesmo gradiente da marca não. */
.pnl-menu-item-aqui {
    background: linear-gradient(90deg, rgba(80, 5, 128, .55) 0%, rgba(231, 73, 231, .28) 100%);
    border-color: rgba(231, 73, 231, .4);
    color: #fff !important;
    font-weight: 600;
}

.pnl-menu-icone {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;   /* mesmo motivo do ícone do Pix: o flex espremia o SVG */
    width: 18px;
}

.pnl-menu-nome {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* A contagem de cards. Fraca de propósito: é informação de apoio, não o
   assunto do item. */
.pnl-menu-conta-num {
    flex-shrink: 0;
    color: #9376a1;
    font-size: 11.5px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.pnl-menu-item-aqui .pnl-menu-conta-num {
    color: #e2c9ec;
}

/* ---------------- o pé ---------------- */
.pnl-menu-pe {
    flex-shrink: 0;
    margin: 8px 0 0;
    padding-top: 10px;
    border-top: 1px solid rgba(231, 73, 231, .12);
}

/* O PE DO MENU E UM <form> - por causa do botao de sair, que precisa ser um
   POST - e por isso ele apanhava da regra `form *` la de cima, que pinta TODO
   descendente de formulario com o cinza secundario.

   O resultado: "Ajuda" e "Sair do painel" saiam num cinza mais apagado que
   os outros itens do menu, como se estivessem desativados. Sobre o fundo do
   menu isso da 2,9:1 - abaixo do minimo.

   `inherit` devolve a cor do proprio item, que e quem sabe qual ela e em cada
   estado (normal, hover, atual). A regra `form *` continua valendo no resto
   do painel, onde ela faz sentido. */
.pnl-menu form *,
.pnl-menu-item-pe .pnl-menu-nome,
.pnl-menu-item-pe .pnl-menu-icone {
    color: inherit;
}

.pnl-menu-item-pe {
    font-size: 13px;
}

/* A BOLINHA DE "TEM COISA NOVA AQUI", hoje no Termo de Uso.
   -------------------------------------------------------------------------
   Ela empurra a si mesma para a direita com `margin-left: auto` em vez de
   `position: absolute`: o item do menu ja e flex, e um ponto posicionado por
   cima passaria por cima do nome quando o menu encolhe.

   ÂMBAR, E NÃO VERMELHO. Vermelho no menu quer dizer erro, e nao ha erro
   nenhum aqui: ha um documento esperando leitura. É o mesmo âmbar do selo
   "fora do plano" e do botão que vira aviso, e os três querem dizer a mesma
   coisa - tem algo para você resolver, sem pressa e sem susto.

   `aria-label` NO HTML, e nao so cor: quem usa leitor de tela precisa ouvir
   "versao nova para aceitar", e nao um span vazio. */
.pnl-menu-ponto {
    flex-shrink: 0;
    width: 7px;
    height: 7px;
    margin-left: auto;
    border-radius: 50%;
    background: #f0b95c;
}

.pnl-menu-sair {
    /* De novo a regra global de `button`, desfeita item por item. */
    margin-top: 0;
    padding: 9px 12px;
    font-size: 13px;
    cursor: pointer;
}

.pnl-menu-sair:hover {
    background: rgba(225, 112, 85, .14);
    color: #ffb4a2 !important;
}

/* =============================================================================
   RECOLHIDO - 68px, só os ícones

   Aqui o nome volta a aparecer no hover, como era antes. A diferença é que
   agora isso é uma ESCOLHA de quem clicou em recolher, e não o estado normal
   de quem nunca pediu nada.
   ============================================================================= */
.pnl-menu-fechado .pnl-menu {
    width: var(--pnl-menu-largura-fechado);
    padding-left: 8px;
    padding-right: 8px;
}

.pnl-menu-fechado .pnl-menu-marca-nome,
.pnl-menu-fechado .pnl-menu-conta,
.pnl-menu-fechado .pnl-menu-nome,
.pnl-menu-fechado .pnl-menu-conta-num {
    display: none;
}

/* O TOPO RECOLHIDO PRECISA PERDER O RECUO DE ABERTO.

   Aberto, o topo tem `padding: 2px 1px 14px 15px` - quinze à esquerda, um à
   direita, porque ali a marca fica encostada na margem do menu e o botão de
   recolher na outra ponta. Empilhado em 68px esse desequilíbrio de 14px vira
   deslocamento: a marca e o botão nasciam SETE PIXELS à direita do centro,
   enquanto a fila de ícones abaixo estava centrada. Medido: centro do menu em
   34, centro dos dois em 40,5.

   Era isso que quebrava a coluna - dois itens fora de prumo no alto de uma
   fila de treze certinhos.

   `align-items: center` junto com o padding zerado: sem ele, o `stretch`
   padrão do flex em coluna esticaria os dois na largura toda, e cada um
   voltaria a se centrar dentro da própria caixa esticada, não do menu. */
.pnl-menu-fechado .pnl-menu-topo {
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 2px 0 12px;
}

.pnl-menu-fechado .pnl-menu-recolher svg {
    transform: scaleX(-1);   /* a seta aponta para o outro lado: agora ela abre */
}

.pnl-menu-fechado .pnl-menu-item {
    justify-content: center;
    padding: 10px 0;
}

/* O rótulo do grupo não cabe em 68px, mas tirá-lo deixaria os treze ícones
   numa fila só. Vira um traço: o agrupamento continua visível sem texto. */
.pnl-menu-fechado .pnl-menu-grupo {
    margin: 10px 8px 6px;
    padding: 0;
    height: 1px;
    background: rgba(231, 73, 231, .16);
    color: transparent;
    font-size: 0;
}

/* =============================================================================
   A DICA DO MENU RECOLHIDO

   Com o menu em 68px sobram os ícones, e ícone sozinho não diz o que é - era
   exatamente o defeito do menu antigo. A dica devolve o nome no hover.

   POR QUE NAO E O `title` DO HTML: o tooltip do navegador demora quase um
   segundo para aparecer, sai numa caixa amarelada que não tem nada a ver com o
   painel, e some sozinho depois de uns segundos mesmo com o mouse parado.

   POR QUE NAO E UM ::after NO PROPRIO ITEM: a lista do menu tem overflow para
   rolar, e overflow corta o que sai dela. Um ::after ao lado do ícone
   apareceria pela metade, ou não apareceria. Por isso a dica é UM elemento só,
   preso ao <body>, que o JavaScript move para a altura do item apontado.

   SO ONDE HA MOUSE. Em tela de toque não existe hover: a dica ficaria presa na
   tela depois do toque, tapando justamente o item seguinte.
   ============================================================================= */
@media (hover: hover) {
    .pnl-dica-menu {
        position: fixed;
        z-index: 20;
        left: 0;
        top: 0;
        display: flex;
        flex-direction: column;
        gap: 2px;
        max-width: 260px;
        padding: 9px 13px;
        border: 1px solid rgba(231, 73, 231, .34);
        border-radius: 10px;
        background: #1b0f26;
        box-shadow: 0 10px 28px rgba(0, 0, 0, .5);
        color: #fff;
        font-family: 'Poppins', 'Roboto', Arial, sans-serif;
        pointer-events: none;   /* a dica nunca rouba o clique do item */

        opacity: 0;
        transform: translateX(-6px);
        transition: opacity .13s ease, transform .13s ease;
    }

    .pnl-dica-menu.aparece {
        opacity: 1;
        transform: translateX(0);
    }

    /* ---- A MESMA CAIXA, NASCENDO EMBAIXO DO BOTÃO ----

       É a dica de qualquer ação do painel (duplicar, excluir, recarregar),
       e reaproveita tudo daqui de cima de propósito: duas dicas com desenhos
       diferentes na mesma tela são duas coisas para a pessoa aprender.

       O que muda é a seta, que passa a apontar para cima, e o deslize de
       entrada, que vem de cima em vez de vir do lado. Ver
       admin/library/js/dica-hover.js. */
    .pnl-dica-baixo,
    .pnl-dica-cima {
        transform: translateY(-4px);
    }

    .pnl-dica-cima { transform: translateY(4px); }

    .pnl-dica-baixo.aparece,
    .pnl-dica-cima.aparece {
        transform: translateY(0);
    }

    /* A SETA, apontando para o ícone. Ela é um quadrado girado com só duas
       bordas pintadas - as mesmas duas que ficam viradas para o menu depois do
       giro. Um triângulo de borda não teria como levar a linha de contorno. */
    .pnl-dica-menu::before {
        content: "";
        position: absolute;
        left: -5px;
        top: 50%;
        width: 9px;
        height: 9px;
        margin-top: -4.5px;
        border-left: 1px solid rgba(231, 73, 231, .34);
        border-bottom: 1px solid rgba(231, 73, 231, .34);
        border-bottom-left-radius: 3px;
        background: #1b0f26;
        transform: rotate(45deg);
    }

    /* AS DUAS REGRAS ABAIXO TÊM DE VIR DEPOIS DESTA.

       `.pnl-dica-menu::before` e `.pnl-dica-baixo::before` têm a MESMA
       especificidade, então quem ganha é quem vem por último. Escritas antes,
       elas não pegavam: o `left: -5px` daqui de cima continuava valendo e a
       seta ficava pendurada na lateral esquerda da caixa, fora da vista.
       Medido: o computado do ::before dava left -5px com a dica embaixo do
       botão. */
    /* A ponta fica onde o JavaScript disser, e não no meio da caixa: perto
       da borda da tela a caixa é empurrada para dentro, e uma seta parada no
       centro apontaria para o botão vizinho. */
    .pnl-dica-baixo::before,
    .pnl-dica-cima::before {
        left: var(--pnl-dica-seta, 50%);
        margin-top: 0;
        margin-left: -4.5px;
    }

    .pnl-dica-baixo::before {
        top: -5px;
        border-left: 1px solid rgba(231, 73, 231, .34);
        border-bottom: 0;
        border-top: 1px solid rgba(231, 73, 231, .34);
        border-radius: 3px 0 0 0;
    }

    .pnl-dica-cima::before {
        top: auto;
        bottom: -5px;
        border-left: 0;
        border-right: 1px solid rgba(231, 73, 231, .34);
        border-bottom: 1px solid rgba(231, 73, 231, .34);
        border-radius: 0 0 3px 0;
    }

    .pnl-dica-menu-nome {
        font-size: 13px;
        font-weight: 600;
        line-height: 1.25;
        white-space: nowrap;
    }

    /* A ajuda vem junto, e é o ganho de verdade sobre o menu antigo: ali o nome
       já era um enigma, e não havia onde explicar. */
    .pnl-dica-menu-ajuda {
        color: #a98bb8;
        font-size: 11.5px;
        font-weight: 400;
        line-height: 1.4;
    }

    .pnl-dica-menu-ajuda:empty {
        display: none;
    }
}

@media not all and (hover: hover) {
    .pnl-dica-menu { display: none; }
}

/* =============================================================================
   O CONTEÚDO, ao lado do menu
   ============================================================================= */
#conteudoAdm {
    margin-left: var(--pnl-menu-largura);
    transition: margin-left .22s ease;

    /* O FLOAT SAI, e com ele a conta errada de largura.

       O conteudo flutuava a direita porque era assim que ele ficava ao lado
       do menu antigo. Com a margem reservando o lugar do menu, o float deixou
       de ser necessario - e passou a atrapalhar: a div e col-md-12, que no
       Bootstrap 3 e width: 100%, e 100% da JANELA, nao do espaco que sobrou.
       Flutuada a direita com 1361px numa tela de 1440, ela comecava em x=79 -
       ou seja, 185px dela ficavam POR BAIXO do menu. O titulo da tela saia
       cortado no meio, e a primeira coluna da tabela nao existia.

       O !important nao e preguica: o float esta como atributo style direto no
       HTML de cerca de quarenta lista.php/form.php, e estilo inline so perde
       para !important. Tirar um a um seria quarenta arquivos alterados para o
       mesmo efeito - e era justamente essa duplicacao que ja tinha mordido
       este projeto no celular (ver o comentario do float mais abaixo). */
    float: none !important;
    width: auto;
    max-width: none;
}

.pnl-menu-fechado #conteudoAdm {
    margin-left: var(--pnl-menu-largura-fechado);
}

/* =============================================================================
   CELULAR - o menu sai do lado e vira uma gaveta

   Em 390px um menu de 264px come dois terços da tela. Ele passa a ficar fora
   da tela e entra quando a pessoa pede, com um véu por cima do conteúdo para
   que um toque fora feche - que é o que se espera de uma gaveta.
   ============================================================================= */
@media (max-width: 991px) {
    .pnl-menu {
        transform: translateX(-100%);
        transition: transform .24s ease;
        box-shadow: 8px 0 34px rgba(0, 0, 0, .45);

        /* O HAMBURGUER FICA POR CIMA DA GAVETA.
           Ele vive no conteudo, tem posicao fixa e mora exatamente no canto
           onde a marca do menu apareceria - com a gaveta aberta, o X cobria
           o "Steactech Links". Empurrar o topo desvia da area dele sem
           precisar mexer num botao que quarenta telas desenham. */
        padding-top: 62px;
    }

    /* Recolher para 68px nao existe no celular: ali a gaveta ou esta na tela
       ou nao esta. Fechar e pelo veu, pela tecla Esc, pelo proprio hamburguer
       ou tocando num item - quatro caminhos, todos esperados. */
    .pnl-menu-recolher {
        display: none;
    }

    .pnl-menu-aberto .pnl-menu {
        transform: translateX(0);
    }

    #conteudoAdm,
    .pnl-menu-fechado #conteudoAdm {
        margin-left: 0;
    }

    /* No celular o botão do topo do menu FECHA a gaveta - recolher para 68px
       não faz sentido aqui. */
    .pnl-menu-fechado .pnl-menu {
        width: var(--pnl-menu-largura);
        padding-left: 12px;
        padding-right: 12px;
    }

    .pnl-menu-fechado .pnl-menu-marca-nome,
    .pnl-menu-fechado .pnl-menu-conta,
    .pnl-menu-fechado .pnl-menu-nome,
    .pnl-menu-fechado .pnl-menu-conta-num {
        display: block;
    }

    /* O recuo volta ao de menu aberto junto com a direção: no celular esta
       gaveta É o menu aberto, e o padding zerado lá de cima existe só para
       centrar a coluna de 68px, que aqui não acontece. */
    .pnl-menu-fechado .pnl-menu-topo {
        flex-direction: row;
        align-items: center;
        padding: 2px 1px 14px 15px;
    }

    .pnl-menu-fechado .pnl-menu-item {
        justify-content: flex-start;
        padding: 9px 12px;
    }

    .pnl-menu-fechado .pnl-menu-grupo {
        margin: 16px 0 5px;
        padding: 0 12px;
        height: auto;
        background: none;
        color: #8a7598;
        font-size: 10.5px;
    }

    .pnl-menu-veu {
        position: fixed;
        inset: 0;
        z-index: 4;
        background: rgba(12, 6, 17, .6);
        opacity: 0;
        pointer-events: none;
        transition: opacity .24s ease;
    }

    .pnl-menu-aberto .pnl-menu-veu {
        opacity: 1;
        pointer-events: auto;
    }
}

@media (min-width: 992px) {
    .pnl-menu-veu { display: none; }
}

/* =============================================================================
   TELAS DE ENTRADA - entrar, esqueci a senha, redefinir a senha
   -----------------------------------------------------------------------------
   Estrutura em admin/login/partes/marca.php e partes/rodape.php.

   O DESENHO: duas colunas. A esquerda e a marca, escura, com a logo e uma
   frase; a direita e o formulario, sobre superficie clara. No celular a coluna
   da marca vira uma faixa no topo.

   POR QUE MUDOU. O formulario antigo era vidro translucido sobre roxo, com
   rotulo branco e campo semitransparente. Isso tem um custo que nao aparece
   numa captura de tela: texto branco sobre um fundo que muda de tom conforme a
   bola decorativa passa por tras nao tem contraste garantido em lugar nenhum -
   ele e claro num ponto da tela e quase ilegivel no ponto ao lado. Um campo de
   senha e o pior lugar possivel para isso: quem digita errado e nao enxerga o
   que digitou culpa a propria memoria, e nao a tela.

   Agora o contraste e fixo: tinta escura sobre branco no formulario, branco
   sobre roxo escuro na marca. As duas metades sao legiveis por construcao, e
   nao por onde a bola decorativa parou.

   O ROXO CONTINUA SENDO O ROXO DA STEACTECH. Esta tela e a porta do painel da
   agencia, e nao da pagina do cliente - trocar a cor aqui faria a entrada
   deixar de combinar com o painel que vem logo depois dela.
   ============================================================================= */

body.pg-login {
    margin: 0;
    background: #f6f5f9;
    color: #2a2634;
    font-family: 'Poppins', 'Roboto', Arial, sans-serif;
    font-size: 15px;
}

/* A MOLDURA. Duas colunas de larguras diferentes: a marca e o cartao de visita,
   e o formulario e o assunto - por isso ele leva a fatia maior. */
.pg-login .center-conteudo {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    align-items: stretch;
    min-height: 100vh;
    width: 100%;
}

/* ---------------- A COLUNA DA MARCA ---------------- */
.pg-marca {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 48px;
    /* Do preto ao roxo da logo e de volta ao preto. O roxo do meio e o #4b0772
       que a propria logo.svg usa - a coluna e a logo sao a mesma cor, e nao
       duas cores parecidas. */
    background: linear-gradient(135deg, #17111f 0%, #4b0772 52%, #1b1226 100%);
    color: #fff;
}

/* As duas luzes. Desfocadas de proposito: a versao antiga eram circulos de
   borda dura que vazavam a tela no celular e pediam um overflow-x para
   segurar. Luz desfocada nao tem borda para vazar. */
.pg-marca-luz {
    position: absolute;
    width: 460px;
    height: 460px;
    border-radius: 50%;
    filter: blur(90px);
    pointer-events: none;
}

.pg-marca-luz-1 {
    top: -180px;
    left: -170px;
    background: rgba(231, 73, 231, .38);
}

.pg-marca-luz-2 {
    right: -190px;
    bottom: -200px;
    background: rgba(123, 47, 214, .40);
}

.pg-marca-conteudo {
    position: relative;   /* acima das luzes */
    z-index: 1;
    max-width: 360px;
}

/* A PASTILHA DA LOGO, e as medidas dela sao medidas, nao gosto.
   O desenho util do logo.svg ocupa 865x301 num viewBox de 1020x1020 (getBBox,
   no navegador): logotipo horizontal, 70% do arquivo vazio. Num quadrado ele
   sai minusculo - a 104px a palavra "TECH" ainda nao se lia.

   A imagem entra MAIOR que a pastilha e o vazio do arquivo e aparado pelo
   overflow. Com 186px de imagem o logotipo sai com 158px de largura, contra os
   76px que o quadrado dava.

   O fundo claro nao e enfeite: "TECH" e preto no arquivo e, solto sobre o roxo
   desta coluna, desaparece - sobra "STEAC". Comparado lado a lado. */
.pg-marca-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    box-sizing: border-box;
    width: 210px;
    height: 78px;
    padding: 0 14px;
    border-radius: 18px;
    background: rgba(255, 255, 255, .96);
    box-shadow: 0 12px 34px rgba(0, 0, 0, .3);
}

.pg-marca-logo img {
    flex-shrink: 0;   /* senao o flex espreme a imagem de volta ao tamanho da caixa */
    width: 186px;
    height: 186px;
    max-width: none;  /* o Bootstrap poe max-width: 100% em imagem */
}

.pg-marca-titulo {
    margin: 28px 0 10px;
    font-size: 30px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -.4px;
}

.pg-marca-frase {
    margin: 0;
    font-size: 15px;
    line-height: 1.65;
    color: rgba(255, 255, 255, .78);
}

/* ---------------- A COLUNA DO FORMULARIO ---------------- */
.pg-login form {
    display: flex;
    flex-direction: column;
    justify-content: center;
    box-sizing: border-box;
    width: 100%;
    max-width: 420px;
    margin: 0 auto;
    padding: 56px 24px;
    /* Sem cartao: a coluna inteira JA e a superficie clara. Um cartao branco
       sobre fundo branco so desenharia uma borda sem funcao. */
    background: none;
    border: 0;
    box-shadow: none;
    text-align: left;
}

/* A regra `form *` (mais acima neste arquivo) pinta tudo de cinza e justifica
   o texto. Ela e antiga e alcanca o painel inteiro; aqui a tela desfaz o que
   nao serve, em vez de eu mexer numa regra que dezenove telas ja encostaram. */
.pg-login form * {
    color: inherit;
    text-align: inherit;
}

.pg-login .form-group {
    margin-bottom: 18px;
}

.pg-login label.form-info,
.pg-login label {
    display: block;
    margin: 0 0 6px;
    color: #6b6577;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .2px;
}

/* O CAMPO. Borda de 1px que engrossa e fica roxa no foco - e o foco precisa
   ser visivel, porque esta tela e usada no teclado mais do que qualquer outra
   do painel. */
.pg-login .form-info .form-control,
.pg-login .form-control {
    height: auto;
    padding: 13px 15px;
    background-color: #fff !important;
    border: 1px solid #ddd9e3;
    border-radius: 12px;
    box-shadow: none;
    color: #2a2634;
    font-size: 15px;
    font-weight: 500;
    transition: border-color .18s ease, box-shadow .18s ease;
}

.pg-login .form-control:focus {
    border-color: #7b2fd6 !important;
    box-shadow: 0 0 0 3px rgba(123, 47, 214, .16) !important;
    outline: 0 !important;
}

.pg-login ::placeholder {
    color: #a9a3b5;
    font-weight: 400;
}

/* O BOTAO. Zera a regra global de `button` que nasceu nesta mesma tela e hoje
   alcanca o painel inteiro (margin-top: 50px, width: 100%, padding: 15px 0,
   font-size: 18px). Ela nao pode simplesmente sumir sem mexer em quem ja se
   acomodou a ela, entao aqui ela e desfeita item por item. */
.pg-login button[type="submit"],
.pg-login .bg-first {
    margin-top: 6px;
    width: 100%;
    padding: 15px 20px;
    border: 0;
    border-radius: 12px;
    background: linear-gradient(to right, #500580, #b333c9);
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .6px;
    text-transform: uppercase;
    cursor: pointer;
    box-shadow: 0 8px 22px rgba(80, 5, 128, .26);
    transition: filter .2s ease, transform .2s ease, box-shadow .2s ease;
}

.pg-login button[type="submit"]:hover,
.pg-login .bg-first:hover {
    filter: brightness(1.08);
    transform: translateY(-1px);
    box-shadow: 0 12px 26px rgba(80, 5, 128, .32);
}

.pg-login button[type="submit"]:active,
.pg-login .bg-first:active {
    transform: translateY(0);
}

.pg-login button[type="submit"]:focus-visible {
    outline: 3px solid rgba(123, 47, 214, .45);
    outline-offset: 2px;
}

/* O olho do campo de senha: o fundo virou claro, entao a tinta volta a ser
   escura. Era branca, para o vidro roxo de antes. */
.pg-login .pnl-olho {
    color: #736d7d;
}

.pg-login .pnl-olho:hover,
.pg-login .pnl-olho:focus {
    color: #500580;
    background: rgba(123, 47, 214, .10);
}

/* O ERRO. Era um texto vermelho solto entre os campos; virou um aviso com
   superficie propria, porque ele aparece depois de a pessoa ter apertado
   ENTRAR e precisa ser a primeira coisa que ela acha ao olhar de volta. */
.pg-login .cRed,
.pg-login .pg-erro {
    margin: 2px 0 14px;
    padding: 12px 14px;
    border: 1px solid rgba(197, 48, 48, .22);
    border-left: 3px solid #c53030;
    border-radius: 10px;
    background: #fdf2f2;
    color: #9b2c2c !important;
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.45;
}

.pg-login .pg-ok {
    margin: 2px 0 14px;
    padding: 12px 14px;
    border: 1px solid rgba(47, 133, 90, .22);
    border-left: 3px solid #2f855a;
    border-radius: 10px;
    background: #f0f9f4;
    color: #276749 !important;
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.45;
}

/* O TITULO DE DENTRO do formulario (o "Esqueceu a senha?" e o "Nova senha").
   Quem diz ONDE se esta e a coluna da marca; aqui o titulo e do PASSO. */
.pg-login .pg-passo {
    margin: 0 0 26px;
}

.pg-login .pg-passo-titulo {
    display: block;
    margin: 0 0 6px;
    color: #2a2634;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -.2px;
}

.pg-login .pg-passo-ajuda {
    display: block;
    color: #6b6577;
    font-size: 14px;
    line-height: 1.55;
}

.pg-login .pg-voltar {
    display: block;
    margin-top: 16px;
    color: #6b6577;
    font-size: 13.5px;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
}

.pg-login .pg-voltar:hover,
.pg-login .pg-voltar:focus {
    color: #500580;
    text-decoration: underline;
}

/* ---------------- O PE ---------------- */
.pg-login .pg-pe {
    margin-top: 34px;
    padding-top: 22px;
    border-top: 1px solid #e7e4ec;
    text-align: center;
}

.pg-login .pg-pe-redes {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-bottom: 16px;
}

/* Os SVG das redes sao brancos - eles vieram do rodape escuro do site, e sobre
   fundo claro sumiam. O `filter` os escurece sem eu ter de manter uma segunda
   copia de cada arquivo, e no hover solta para o roxo. */
.pg-pe-rede {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #efedf3;
    transition: background .2s ease, transform .2s ease;
}

.pg-pe-rede img {
    width: 17px;
    height: 17px;
    filter: brightness(0) saturate(100%) invert(38%) sepia(8%) saturate(600%) hue-rotate(230deg) brightness(92%) contrast(88%);
    transition: filter .2s ease;
}

.pg-pe-rede:hover,
.pg-pe-rede:focus {
    background: #ece4f7;
    transform: translateY(-2px);
}

.pg-pe-rede:hover img,
.pg-pe-rede:focus img {
    filter: brightness(0) saturate(100%) invert(13%) sepia(84%) saturate(4500%) hue-rotate(283deg) brightness(78%) contrast(105%);
}

/* #9b7fa8 NOS DOIS PONTOS QUE FICARAM CURTOS.

   O `#9376a1` foi calculado contra o fundo mais comum do painel e passa na
   maioria; nestes dois o fundo e um pouco mais claro e ele para em 4,09 e 4,33.
   Em vez de clarear o tom inteiro por causa de dois, os dois ganham o seu. */
/* #9b7fa8 dava 4,34:1, logo abaixo do minimo. So apareceu quando a varredura
   passou a entrar nos iframes em 30/09: este texto vive dentro do quadro do
   editor, e ate entao nenhuma medida chegava la. */
.pnl-forma-sub,
.pnl-pub-slug-base { color: #a98bb8 !important; }

/* O ENDERECO DA PREVIA FICA SOBRE FUNDO BRANCO, e eu clareei o cinza dele numa
   primeira tentativa: de 4,29:1 foi para 2,81. Clarear texto sobre fundo claro e
   andar para o lado errado, e eu tinha suposto o fundo escuro do resto do painel
   em vez de medir. O medidor ja sabia dizer, e eu nao perguntei. */
.pnl-pub-previa-url { color: #757575 !important; }

/* #736d7d E NAO #8b8499, e a direcao importa.

   O rodape do login fica sobre fundo CLARO (#f6f5f9). A primeira tentativa
   CLAREOU o cinza, como eu vinha fazendo no resto do painel, e o contraste
   piorou de 3,3:1 para 2,42 - clarear texto sobre fundo claro e andar para o
   lado errado. Eu supus o fundo escuro do resto em vez de medir, e o medidor ja
   sabia responder.

   Esta e a unica linha da tela que diz para onde ligar quando alguem nao
   consegue entrar. */
.pg-login .pg-pe-suporte {
    margin: 0;
    color: #736d7d;
    font-size: 12.5px;
    line-height: 1.6;
    text-align: center;
}

.pg-login .pg-pe-suporte a {
    color: #500580;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
}

.pg-login .pg-pe-suporte a:hover,
.pg-login .pg-pe-suporte a:focus {
    text-decoration: underline;
}

/* ---------------- CELULAR E TABLET ----------------
   Abaixo de 900px a coluna da marca sai da lateral e vira uma faixa no topo:
   ela continua dizendo onde a pessoa esta, sem roubar metade de uma tela de
   390px do formulario, que e o que a pessoa veio fazer. */
@media (max-width: 900px) {
    .pg-login .center-conteudo {
        grid-template-columns: minmax(0, 1fr);
        min-height: 100vh;
    }

    .pg-marca {
        padding: 30px 24px 34px;
        text-align: center;
    }

    .pg-marca-conteudo {
        max-width: 100%;
    }

    .pg-marca-logo {
        margin: 0 auto;
        width: 178px;
        height: 66px;
        padding: 0 12px;
        border-radius: 16px;
    }

    .pg-marca-logo img {
        width: 156px;
        height: 156px;
    }

    .pg-marca-titulo {
        margin: 16px 0 6px;
        font-size: 22px;
    }

    .pg-marca-frase {
        font-size: 13.5px;
    }

    .pg-marca-luz {
        width: 300px;
        height: 300px;
        filter: blur(70px);
    }

    .pg-login form {
        padding: 34px 22px 44px;
    }
}

/* O SUPORTE EM DUAS LINHAS na tela estreita.
   "Em caso de dúvidas: suporte@steactech.com.br" cabe numa linha so ate uns
   600px; abaixo disso ele ocupa a largura inteira de ponta a ponta e, mesmo
   centralizado, LE como se estivesse torto - nao sobra margem de nenhum lado
   para o olho comparar. Quebrado em duas linhas, o centro volta a ser visivel.

   A quebra e do CSS e nao um <br> na marcacao: no desktop a linha unica esta
   certa, e um <br> a quebraria nos dois lugares. */
@media (max-width: 600px) {
    .pg-login .pg-pe-suporte a {
        display: block;
        margin-top: 3px;
    }
}

.text-center {
    display: grid;
    justify-content: center;
    text-align: center;
}

/* A moldura das telas de entrada e grid, e esta escrita no bloco TELAS DE
   ENTRADA. Esta classe nao e usada em nenhuma outra tela do painel. */

.btn-acao {
    text-align: center;
}

.bold-6 {
    font-weight: 600;
}

.pdg-10 {
    padding: 10px;
}

.pdg-30 {
    padding: 30px;
}

.pdg-t-40 {
    padding-top: 40px;
}


/*REDE SOCIAL*/
.social .img-rede {
    width: 20%;
    padding: 15px;
    transition: all 0.5s ease-in-out;
}
.social .img-rede {
    border-radius: 50%;
}
.social .img-rede.instagram:hover {
    background-color: rgb(225, 48, 108);
}
.social .img-rede.facebook:hover {
    background-color: rgb(14 76 201);
}
.social .img-rede.linkedin:hover {
    background-color: rgb(0, 132, 191);
}
.social .img-rede.youtube:hover {
    background-color: rgb(255, 0, 0);
}

/*TEXTOS*/
.text-descricao {
    font-size: 18px;
    color: #8B8B8B;
    font-weight: 500;
    position: relative;
    font-family: "Poppins", sans-serif;
    line-height: 20px;
    margin-bottom: 25px;
}

.header-padrao {
    font-family: 'Poppins', sans-serif;
    font-size: 50px;
    color: #212A3E;
    font-weight: 800;
    text-align: center;
    /*margin-bottom: 33px;*/
}

.header-padrao.azul {
    color: #4971C9;
}
.header-padrao.amarelo {
    color: #BFB27D;
}
.header-padrao.laranja {
    color: #C1674F;
}

.datetime {
    font-family: 'Baloo 2', cursive;
    color: #9BA4B5;
    font-size: 22px;
    margin: 10px 0;
    text-align: end;
}

.body-tabela.ultimas .header-padrao {
    font-size: 20px;
    padding: 5px;
}

@media (max-width: 1440px) {

    .text-descricao,
    .c-g9 {
        font-size: 12px;
    }

    .header-padrao {
        font-size: 30px;
    }

    .body-tabela.ultimas .header-padrao {
        font-size: 15px;
    }
}

.duvidas a:link,
.duvidas a:visited,
.duvidas a:active,
.duvidas a:focus,
.duvidas a:hover, a:focus {
    text-decoration: none;
    color: #333333;
}

.dsp-in-block {
    display: inline-block;
}

form.dsp-in-block {
    width: 100%;
}

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

/* O `margin-bottom: 0` acima zera os 15px que o Bootstrap da a todo campo.
   No desktop isso passa despercebido, porque os campos ficam lado a lado e o
   respiro vertical vem do `min-height: 3em` do rotulo. Empilhados - celular, ou
   qualquer campo de linha inteira - o resultado era o rotulo de um campo
   encostando no input do campo anterior: 0px entre eles, tudo correndo junto.

   Escopado em `.cool-b4-form` para valer nos formularios do painel sem mexer
   em `.form-group` usado fora deles. */
.cool-b4-form .form-group {
    margin-bottom: 16px;
}
/* O TEXTO DE APOIO DO TITULO fica sobre o fundo escuro do painel, e nao
   dentro de um card claro: ali o cinza de `form *` (#5A5A5A) da 2,8:1. Estes
   sao o "(gerenciar)" ao lado de Secao e os demais avisos curtos que
   acompanham um rotulo. */
.inst-home-produtos small,
.inst-home-produtos small a,
.inst-home-produtos .dica,
.inst-home-produtos a {
    color: #b9b9b9;
}

.inst-home-produtos a:hover,
.inst-home-produtos a:focus-visible {
    color: #fff;
}

.inst-home-produtos {
    /* `min-height` e nao `height`: com altura fixa, rotulo que quebra em duas
       linhas vaza para fora da caixa e a segunda linha cai POR CIMA do campo.
       Acontecia em toda tela estreita - "Subtitulo (legenda exibida abaixo do
       titulo no Modelo 2)" terminava impresso dentro do proprio input.
       A caixa continua com as mesmas 3em quando o texto cabe numa linha, que
       e o que mantem os rotulos alinhados entre si no desktop. */
    min-height: 3em;
    margin-top: 0!important;
    padding-top: 10px;
    color: #fff;
}

/* O TITULO FLUTUANTE SAIU. Ele era um <h1> em position:absolute preso a
   `left: 42.5%`, o que so centraliza numa largura de tela - em qualquer outra
   ele ficava torto, e no celular encostava na borda. Quem diz "Painel
   administrativo" agora e a coluna da marca, no fluxo. */

.form-control {
    display: block;
    width: 100%;
    height: 34px;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.42857143;
    color: #555;
    background-color: #fff;
    background-image: none;
    border: 1px solid #ccc;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%);
    box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%);
    -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
    -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}

/*SELECT 2*/

.select2-container {
    width: 100% !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered,
.select2-container .select2-selection--single .select2-selection__rendered {
    padding: 19px 14px !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 0px !important;
}

.select2-container--default .select2-selection--single {
    height: 40px !important;
}

.select2-container .select2-selection--multiple {
    height: 40px !important;
}

.select2-container--default .select2-selection--multiple {
    overflow-y: auto;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice {
    margin-top: 8px !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__display {
    padding-left: 17px !important;
    padding-right: 2px !important;
}

.form-group input.btn-principal,
.form-group button.btn-principal {
    margin-top: 30px;
}

.dashboard .form-control {
    border: none;
    padding: 20px 1rem;
}

.dashboard .busca {
    border-right: none;
    border-radius: 20px!important;
}

.form-info .form-control {
    font-weight: bold;
    font-size: 1.2rem;
    padding: 20px 20px;
    background-color: rgba(255, 255, 255, .6) !important;
    border: 1px solid rgba(0, 0, 0, .1);
    color: #000;
    border-radius: 2px !important;
}

/* A pele do campo nesta tela esta no bloco TELAS DE ENTRADA. */

.select2-search__field {
    height: 30px!important;
}

.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
    background-color: #212A3E!important;
}

button {
    background: transparent;
    outline-color: transparent !important;
}

button:focus,
textarea:focus,
.bootstrap-select button:focus,
.bootstrap-select .dropdown-toggle:focus,
select:focus,
input:focus {
    border-color: #212A3E !important;
    outline: 0 !important;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(0, 0, 0, .6) !important;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(0, 0, 0, .6) !important;
}

.form-info .pz-btn-shadow, .acao-btn-shadow {
    padding: 15px 60px;
    text-align: center;
}

.bg-first {
    padding: 0.8em 7em;
    border-radius: 10px;
    background: linear-gradient(to right, #500580,#E749E7);
    color: #fff;
    border: 1px solid transparent;
    text-transform: uppercase;
    transition: all ease 0.5s;
}

.pz-btn-shadow, .acao-btn-shadow {
    text-decoration: none !important;
    border: 1px solid #500580;
    margin-top: 20px;
    padding: 21px 30px;
    font-size: 1.4rem;
    border-radius: 5px;
    transition: all ease 0.5s;
}

.acao-btn-shadow {
    border: 1px solid #aeb7c7;
}

.cliente {
    float: right;
}

.cliente .pz-btn-shadow, .cliente .acao-btn-shadow {
    padding: 0;
    width: 6em;
    height: 5em;
}

.cliente a.perfil {
    justify-content: end;
}

.c-1 {
    color: #FFFFFF;
}

[class*="pz-btn-shadow"]:hover {
    border: 1px solid #500580;
    background: transparent;
    background-image: linear-gradient(180deg, #500580 50%, #E749E7 100%);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    transition: all ease 0.5s;
}

[class*="acao-btn-shadow"]:hover {
    box-shadow: 0 8px 16px 1px rgb(0 0 0 / 20%);
    transform: scale(1.01);
}

@media (max-width: 1024px) {
    .cliente a.perfil {
        justify-content: center;
        margin-top: 25px;
    }
}

@media (max-width: 768px) {
    .cliente {
        float: none !important;
    }

    .cliente a.perfil {
        margin-top: 25px;
    }

    .pdg-t-40 {
        padding-top: 90px;
    }
}

/*CONTEUDO*/
.display-align {
    display: flex;
    justify-content: center;
    align-items: center;
}

.display-align.mobile {
    display: inline;
}

/* Campos do painel empilhados abaixo de 992px.

   O painel carrega SO o Bootstrap 3, e as colunas dos formularios misturam tres
   convencoes:
     `col-xs-12`   existe no BS3 e FLUTUA a esquerda;
     `col-12`      e sintaxe do BS4 - aqui nao existe, e classe morta (188 usos);
     `col-lg-4 col-md-6`  nenhuma das duas vale abaixo de 992px.

   Bloco flutuado e bloco normal nao se enxergam: o normal e desenhado no mesmo
   lugar do flutuado. No formulario do Institucional, em 390px, o titulo "Capa
   (imagem do botao)" caia exatamente por cima do "Subtitulo" - dois textos
   impressos um sobre o outro, ilegiveis. O mesmo com "Destaque no Modelo 2"
   sobre "Titulo:".

   Tirando o float de todos, some a mistura: no celular vira um campo por linha,
   que e o certo de qualquer jeito. Escopado em `.cool-b4-form` para nao mexer
   no home.php, que usa col-sm-2/3/10 de proposito. */
@media (max-width: 991px) {
    .cool-b4-form [class*="col-"] {
        float: none;
        width: 100%;
    }
}

/* Entre 992px e 1199px (tablet deitado) a mistura acontece de novo, uma faixa
   acima: ali `col-md-*` JA vale e flutua, enquanto `col-lg-*` ainda NAO vale.
   Numa dupla como `col-lg-8 col-md-12` + `col-lg-2 col-12`, o primeiro flutua
   ocupando a linha e o segundo, sem largura nenhuma, era desenhado por cima -
   era assim que "Ordenar por:" saia impresso em cima de "Titulo:" no filtro de
   quase toda listagem.

   Aqui nao da para simplesmente empilhar tudo como no celular: em 1024px os
   `col-md-6` lado a lado sao intencionais. Entao so quem NAO tem largura
   valida nessa faixa recebe `clear`, para descer em vez de sobrepor. */
@media (min-width: 992px) and (max-width: 1199px) {
    .cool-b4-form [class*="col-lg-"]:not([class*="col-md-"]):not([class*="col-sm-"]):not([class*="col-xs-"]),
    .cool-b4-form [class*="col-12"]:not([class*="col-lg-"]):not([class*="col-md-"]):not([class*="col-sm-"]):not([class*="col-xs-"]) {
        clear: both;
        width: 100%;
    }
}

/* Cabecalho do painel (o "Bem-vindo" com a data ao lado) empilhado no celular.
   Sao dois flex-items `col-lg-9` e `col-lg-2`, e nenhuma dessas classes vale
   abaixo de 1200px: sem largura, o flex espremia os dois lado a lado e o
   "Bem-vindo," quebrava em duas linhas ao lado da data.

   O seletor pega `.pd-bt-30` de proposito - essa combinacao aparece uma unica
   vez no projeto, no admin/pre.php, entao nao respinga em nenhum outro
   `.display-align`, que e classe de uso geral. */
@media (max-width: 991px) {
    .display-align.pd-bt-30 {
        flex-direction: column;
        align-items: stretch;
        text-align: center;
    }

    .display-align.pd-bt-30 > div {
        width: 100%;
    }

    .display-align.pd-bt-30 .datetime {
        text-align: center;
        margin-top: 4px;
    }
}

.espaco-conteudo {
    margin: 5em;
}

/*ESPA�AMENTO PADDING*/
.pd-tp-30 {
    padding-top: 30px;
}

.pd-bt-30 {
    padding-bottom: 30px;
}

.pd-tp-60 {
    padding-top: 60px;
}

.pd-bt-60 {
    padding-bottom: 60px;
}

/*ESPA�AMENTO MARGIN*/
.mg-tp-30 {
    margin-top: 30px;
}

.mg-bt-30 {
    margin-bottom: 30px;
}

.mg-tp-60 {
    margin-top: 60px;
}

.mg-bt-60 {
    margin-bottom: 60px;
}

/*PADR�O*/
/* O FUNDO DO PAINEL.

   Era #333 - o cinza do painel antigo - e ele ficou de fora quando o menu e
   a home mudaram de cor. O resultado era o pior dos dois: um menu roxo
   escuro colado num conteudo cinza, como se fossem duas telas diferentes
   emendadas.

   Agora e o #120a18 do canvas, que e o mesmo tom do menu clareado o
   suficiente para os dois se distinguirem: o menu (#0c0611) continua sendo a
   faixa mais escura, e o conteudo respira ao lado dele sem virar outra
   familia de cor. */
.pg-board {
    background: #120a18;

    /*
    EFEITO FUNDO PONTILHADO

    background: radial-gradient(rgb(245, 245, 245), #E8EBEB);
    -webkit-background-image: -webkit-repeating-radial-gradient(rgb(245, 245, 245), #E8EBEB);
    -moz-background-image: -moz-radial-gradient(rgb(245, 245, 245), #E8EBEB);
    -o-background-image: -o-radial-gradient(rgb(245, 245, 245), #E8EBEB);

    background-size: 5px 5px;
    -webkit-background-size: 5px 5px;
    -moz-background-size: 5px 5px;
    -o-background-size: 5px 5px;
    */
}

.cor-padrao {
    color: #002060;
}

.btn-padrao {
    color: #fff;
    background-color: #002060;
    border-radius: 10px;
}

.btn-tabela {
    color: #fff;
    background-color: #027cb7;
    border-radius: 10px;
}

@media (max-width: 1440px) {
    .btn-tabela {
        padding: 0.5em 1em;
    }
}

@media (max-width: 768px) {
    .btn-tabela {
        padding: 0.3em;
    }
}

/*MENU*/

.pg-board {
    width: 100%;
    height: 100vh;
    margin-bottom: 0;
}

.panel-menu {
    position: fixed;
    height: 100%;
    margin-bottom: 0;
    border-radius: 0 20px 20px 0;
    background: #9BA4B5 !important;
}

.panel-menu .panel {
    display: flex;
    justify-content: center;
    flex-direction: column;
    margin: 10px;
}

/* 35px DE TODOS OS LADOS ERA DEMAIS, e no topo somava com o recuo da propria
   tela: o primeiro card da home comecava a 95px da borda, sem nada nesse
   espaco. Num painel, a tela deve comecar perto do topo - e o que se ve sem
   rolar e o que a pessoa veio fazer.

   O `width: 95.5%` tambem saiu. Ele deixava 4,5% de vao a direita de TODA
   tela do painel, e essa conta nao tinha como estar certa: com o menu
   ocupando 264px fixos, uma porcentagem da janela nunca bate com o espaco
   que sobrou. Quem cuida da largura agora e o margin-left do menu mais o
   `width: auto` da regra do #conteudoAdm. */
.panel-conteudo {
    padding: 24px 28px 48px;
}

.panel.logo {
    border: none;
    text-align: center;
    margin: 40px 0;
}

.panel.logo img {
    width: 90%;
}

.logo a {
    background-color: #9BA4B5;
}

.logo a {
    background-color: #9BA4B5;
    border: none;
}

.logo-responsivo {
    display: none;
}

.panel-default {
    border: none;
}

.panel-default>.panel-heading {
    cursor: pointer;
    color: #fff;
    border-bottom: 1px;
    background-color: #9BA4B5 !important;
    text-decoration: none;
}

.panel-default>.panel-heading img.seta {
    filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(346deg) brightness(104%) contrast(97%);
    rotate: 180deg;
}

.panel-default>.panel-heading img.icone,
img.img-table {
    width: 2em;
}

.panel-default>.panel-heading:active,
.panel-default>.panel-heading:focus {
    filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(346deg) brightness(104%) contrast(97%);
    background-color: transparent !important;
    text-decoration: none;
}

.panel-default>.panel-heading:active img.seta,
.panel-default>.panel-heading:focus img.seta {
    filter: none;
    rotate: none;
}

.panel-default>.panel-heading:active img.icone,
.panel-default>.panel-heading:focus img.icone {
    filter: invert(1);
}

#collapse-cliente .list-group-item {
    background: #fff;
}
.list-group-item {
    background: transparent;
}

.panel-heading+.list-group .list-group-item {
    color: #002060;
    background-color: #D4DEF1;
}

.mobile {
    display: none;
}
.desktop {
    display: block;
}

.fixo-mobile {
   display: none;
}

@media (max-width: 1440px) {
    .panel-conteudo {
        padding: 40px 20px;
        width: 94.5%;
    }

    .logo a {
        display: flex;
        justify-content: center;
    }

    .logo img {
        width: 90%;
        margin-top: 30px;
    }
}

@media (max-width: 1024px) {
    .panel-conteudo {
        width: 91.5%;
    }

    .mobile {
        display: block!important;
    }
    .desktop {
        display: none!important;
    }
    
    .panel-menu {
        position: fixed;
        top: 100px;
        width: 100%;
        z-index: 99;
    }

    .panel.logo {
        display: none;
    }

    .logo-responsivo {
        display: inline;
        top: 12px;
        margin: 0 30%;
    }
}

@media (max-width: 768px) {
    .panel-conteudo {
        padding: 65px 20px;
        width: 89%;
    }

    .logo-responsivo {
        margin: 25%;
    }

    .fixo-mobile {
        display: block;
        position: fixed;
        width: 100%;
        height: 5em;
        left: 0;
        top: 0;
        background: hsl(var(--background-secondary));
        box-shadow: 0px 6px 5px 0px #28232359;
        z-index: 99;
    }
}

@media (max-width: 425px) {
    .panel-conteudo {
        width: 100%!important;
    }

    .logo-responsivo {
        top: 20px;
    }

    .logo-responsivo img {
        width: 60%;
    }
}

@media (max-width: 375px) {
    .logo-responsivo {
        top: 25px;
    }
}

@media (max-width: 320px) {
    .logo-responsivo {
        top: 30px;
    }
}


:root {
    --primary: 237, 94%, 81%;
    --background: 266, 16%, 92%;
    --background-secondary: 256, 12%, 12%;
    --background-secondary-dark: 256, 10%, 10%;
    --background-secondary-light: 257, 11%, 16%;
    --text-primary: 0, 0%, 0%;
    /* Colors */
    --black: 0, 0%, 0%;
    --white: 0, 0%, 100%;
    --quite-gray: 0, 0%, 50%;
    --grooble: 10, 28%, 93%;
    /* Sizes */
    --heading-large: 5.6rem;
    --heading-medium: 3.6rem;
    --heading-small: 2.4rem;
    --paragraph: 1.11rem;
    --navbar-buttons: 2.4rem;
    /* misc */
    --transition-main: .175, .685, .32;
    /* Fonts */
    --font-main: "Poppins";
}


/* =========
    Buttons
   ========= */

button {
    padding: .8em 1.2em;
    border: 1px solid hsl(var(--black));
    background-color: hsl(var(--background));
    font-size: var(--paragraph);
    cursor: pointer;
    outline: none;
}
button:focus {
    box-shadow:
            0 0 0 2px hsl(var(--black)),
            0 0 0 3px hsl(var(--white));
    border: 1px solid transparent;
}

/* =======
    Lists
   ======= */

ul, ol {
    margin: 1em 0;
}

/* =======
    Forms
   ======= */

form {
    margin: 0;
}
fieldset {
    margin: 0;
    padding: .5em 0;
    border: none;
}
input {
    padding: .8em 1.2em;
    font-size: var(--paragraph);
    background-color: hsl(var(--grooble));
    border: 2px solid hsl(var(--grooble));
    outline: none;
}
textarea {
    padding: .8em 1.2em;
    font-size: var(--paragraph);
    font-family: var(--font-main);
    background-color: hsl(var(--grooble));
    border: 2px solid hsl(var(--grooble));
    outline: none;
}
input, textarea {
    transition: all .2s ease-in-out;
}
select {
    padding: .8em 1.2em;
    border: 1px solid hsl(var(--black));
    font-size: var(--paragraph);
    outline: none;
}

/* =========
    Classes
   ========= */

/* ================
    Global classes
   ================ */

/* =========
    Flexbox
   ========= */

.flexbox {
    display: flex;
    justify-content: center;
    align-items: center;
}
.flexbox-left {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}
.flexbox-right {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}
/* Columns */
.flexbox-col {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
}
.flexbox-col-left {
    display: flex;
    justify-content: flex-start;
    flex-direction: column;
    align-items: flex-start;
}
.flexbox-col-left-ns {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: flex-start;
}
.flexbox-col-right {
    display: flex;
    justify-content: flex-end;
    flex-direction: column;
    align-items: flex-end;
}
.flexbox-col-start-center {
    display: flex;
    justify-content: flex-start;
    flex-direction: column;
    align-items: center;
}
/* Spacings */
.flexbox-space-bet {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* =========
    Classes
   ========= */

.view-width {
    width: 70%;
}

/* ========
    Navbar
   ======== */

#navbar {
    top: 0;
    padding: 0;
    width: 6em;
    height: 100vh;
    position: fixed;
    background-color: hsl(var(--background-secondary));
    transition: width .35s cubic-bezier(var(--transition-main), 1);
    overflow-y: auto;
    overflow-x: hidden;
    z-index: 4;
}
#navbar:hover {
    width: 16em;
}

.list-group.panel-collapse {
    width: 90%;
}
.list-group.panel-collapse.collapse.in {
    display: none;
    transition: all ease 0.5s;
}
#collapse-cliente.list-group.panel-collapse.collapse.in {
    display: block;
}
#navbar:hover .list-group.panel-collapse.collapse.in {
    display: block;
}
/* As tres regras de barra do #navbar sairam com ele.

   O elemento era o menu antigo e nao existe mais em HTML nenhum. Regra presa
   a um seletor que ninguem usa fica invisivel ate o dia em que alguma coisa
   nasce com aquele nome - foi exatamente o que aconteceu com as .pnl-menu
   esquecidas, que voltaram pintando a trilha do menu novo de cinza claro.

   O resto do bloco #navbar continua aqui por ora: ele e grande e nao faz
   mal nenhum sem o elemento. Sai junto com a limpeza do CSS antigo, quando o
   editor das fases seguintes tornar o resto dele obsoleto tambem. */
.navbar-items {
    margin: 0;
    padding: 0;
    list-style-type: none;
}

@media (max-width: 768px) {
    #navbar {
       top: 70px;
    }
}

@media (max-width: 425px) {
    #navbar {
        height: 120vh;
    }
}

/* Navbar Logo */
.navbar-logo {
    margin: 0 0 2em 0;
    padding: 9px;
    width: 100%;
    height: 10em;
    background: hsl(var(--background-secondary-dark));
}
.navbar-logo > .navbar-item-inner {
    width: 100%;
}
.navbar-logo > .navbar-item-inner:hover {
    background-color: transparent;
}
.navbar-logo > .navbar-item-inner > svg {
    height: 2em;
    fill: hsl(var(--white));
}
/* Navbar Items */
.navbar-item {
    padding: 0 .5em;
    width: 100%;
    cursor: pointer;
}
.navbar-item-inner {
    padding: 1em 0;
    width: 100%;
    position: relative;
    color: hsl(var(--quite-gray));
    border-radius: .25em;
    text-decoration: none;
    justify-content: center;
    transition: all .2s cubic-bezier(var(--transition-main), 1);
}
.navbar-item-inner:hover {
    color: hsl(var(--white));
    background: hsl(var(--background-secondary-light));
}
.navbar-item-inner-icon-wrapper {
    width: calc(5rem - 1em - 8px);
    position: relative;
}
.navbar-item-inner-icon-wrapper ion-icon {
    position: absolute;
    font-size: calc(var(--navbar-buttons) - 1rem);
}
.link-text {
    margin: 0;
    width: 0;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: all .35s cubic-bezier(var(--transition-main), 1);
    overflow: hidden;
    opacity: 0;
}
#navbar:hover .link-text {
    width: calc(100% - calc(5rem - 8px));
    margin-left: 15px;
    opacity: 1;
}

.labelMenuAdm.link-text {
    display: block!important;
}

/* ======
    Main
   ====== */

#main {
    margin: 0 0 0 5em;
    min-height: 150vh;
}
#main > h2 {
    width: 80%;
    max-width: 80%;
}
#main > p {
    width: 80%;
    max-width: 80%;
}

/* =============
    ::Selectors
   ============= */

/* Selection */
::selection {
    color: hsl(var(--white));
    background: hsla(var(--primary), .33);
}
/* Scrollbar */
/* A MESMA BARRA EM TODA AREA ROLAVEL DE DENTRO DAS TELAS.

   Esta regra pintava a CALHA inteira com a cor de destaque, e nao so o
   cursor: o resultado era uma faixa magenta macica de ponta a ponta, que se
   lia como uma barra sempre cheia e de canto vivo. Foi ela que deixou a barra
   do menu estranha, e ela alcanca qualquer outra lista rolavel do painel. */
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar {
    width: 11px;
    height: 11px;
    background: transparent;
}
::-webkit-scrollbar-thumb {
    border: 3px solid transparent;
    border-radius: 999px;
    background: rgba(231, 73, 231, .28);
    background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover {
    background: rgba(231, 73, 231, .48);
    background-clip: padding-box;
}
::-webkit-scrollbar-corner {
    background: transparent;
}

/* ===============
    5. @keyframes
   =============== */

/* ==============
    @media rules
   ============== */

@media only screen and (max-width: 1660px) {
    :root {
        /* Sizes */
        --heading-large: 5.4rem;
        --heading-medium: 3.4rem;
        --heading-small: 2.2rem;
    }
}
@media only screen and (max-width: 1456px) {
    :root {
        /* Sizes */
        --heading-large: 5.2rem;
        --heading-medium: 3.2rem;
        --heading-small: 2rem;
    }
    .view-width {
        width: 80%;
    }
}
@media only screen and (max-width: 1220px) {
    .view-width {
        width: 70%;
    }
}
@media only screen and (max-width: 1024px) {
    :root {
        /* Sizes */
        --heading-large: 5rem;
        --heading-medium: 3rem;
        --heading-small: 1.8rem;
    }
    .view-width {
        width: 75%;
    }
}
@media only screen and (max-width: 756px) {
    :root {
        /* Sizes */
        --heading-large: 4rem;
        --heading-medium: 2.6rem;
        --heading-small: 1.6rem;
        --paragraph: 1rem;
        --navbar-buttons: 2.2rem;
    }
    .view-width {
        width: calc(100% - 5em);
    }
}
@media only screen and (max-width: 576px) {
    .view-width {
        width: calc(100% - 3em);
    }
}
@media only screen and (max-width: 496px) {

}




/*PESQUISA*/

.form-control {
    font-family: 'Poppins',sans-serif;
    width: 100%;
    height: 40px;
    color: #000000;
    background-color: #fff;
    background-clip: padding-box;
    border-radius: 4px;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

.input-group {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-align: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
    width: 100%;
}

.input-group>.custom-select:not(:last-child),
.input-group>.form-control:not(:last-child) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.input-group>.custom-file,
.input-group>.custom-select,
.input-group>.form-control {
    position: relative;
    -webkit-box-flex: 1;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    width: 1%;
    margin-bottom: 0;
}

@media (max-width: 1024px) {
    .input-group {
        margin-top: 7em;
    }
}

/*CONTE�DO PRINCIPAL*/

table {
    width: 100%;
}

.pnl-body {
    background: #E8EBEB;
    padding: 40px 30px;
}


/*HAMBURGER*/

.box {
    position: absolute;
    top: 30%;
}

.box .btn {
    position: absolute;
    top: 50%;
    left: 50%;
    /*transform: translate(-50%, -50%);*/
    padding: 0;
    width: 55px;
    cursor: pointer;
}

.hamburguer {
    margin-bottom: 55px;
}

.btn.active,
.btn:active {
    box-shadow: none;
}

.box .btn span {
    display: block;
    width: 100%;
    box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.3);
    border-radius: 3px;
    height: 5px;
    background: #9BA4B5;
    transition: all .3s;
    position: relative;
}

/* O ESPACO ENTRE AS TRES BARRINHAS DO HAMBURGUER - e so isso.

   A regra era `span+span`, sem escopo nenhum, e pegava TODO span que viesse
   depois de outro span em qualquer tela do painel. Ela existe para separar as
   tres barrinhas do icone de menu (ver `.box .btn span`, logo acima), e a
   partir dali passou a empurrar 7px para baixo:

     - o nome de cada um dos 18 itens do menu, que vem depois do icone:
       3,5px abaixo do centro do icone ao lado. Em todos eles.
     - o nome da marca, que vem depois do selo
     - o campo da busca da home, que vem depois da lupa: 4px
     - o rotulo de cada cartao de numero, que vem depois do valor

   Eu passei tres rodadas medindo o eixo X e afirmando que estava alinhado.
   O desalinhamento era no Y, e a causa estava a uma regra de distancia - foi
   a Stefanie quem achou, abrindo o inspetor.

   Escopada, ela volta a fazer o que foi escrita para fazer. E a terceira
   regra sem dono que morde este painel hoje: as outras duas eram as barras de
   rolagem do #navbar e as .pnl-menu orfas. */
.box .btn span + span {
    margin-top: 7px;
}

.active span:nth-child(1) {
    animation: ease .7s top forwards;
}

.not-active span:nth-child(1) {
    animation: ease .7s top-2 forwards;
}

.active span:nth-child(2) {
    animation: ease .7s scaled forwards;
}

.not-active span:nth-child(2) {
    animation: ease .7s scaled-2 forwards;
}

.active span:nth-child(3) {
    animation: ease .7s bottom forwards;
}

.not-active span:nth-child(3) {
    animation: ease .7s bottom-2 forwards;
}

@media (max-width: 1440px) {
    .box .btn {
        width: 45px;
        padding: 6px 0;
    }

    .mobile .hamburguer {
        margin-bottom: 0 !important;
    }
}

@media (max-width: 1024px) {
    .mobile .hamburguer {
        top: 16px;
        left: 20px;

        /* `fit-content` PORQUE `col-lg-1` NAO TEM LARGURA NO CELULAR.

           `col-lg-1` so vale a partir de 1200px e `col-md-2` a partir de 992px -
           abaixo disso os dois sao div de bloco comum, e bloco ocupa 100% do pai.
           Somando o `left: 20px` daqui, a caixa do botao terminava 20px alem da
           janela e a PAGINA INTEIRA rolava para o lado em 360 e 390. Encolhendo
           ao conteudo, o botao fica onde estava e nao empurra mais nada.

           Achado pelo ferramentas/varre-painel.js, e so em duas larguras. */
        width: -moz-fit-content;
        width: fit-content;
    }
}

@media (max-width: 425px) {
    .box .btn {
        width: 40px;
    }
}

@media (max-width: 320px) {
    .box .btn {
        width: 35px;
    }
}

@keyframes top {
    0% {
        top: 0;
        transform: rotate(0);
    }

    50% {
        top: 22px;
        transform: rotate(0);
    }

    100% {
        top: 10px;
        transform: rotate(45deg);
    }
}

@keyframes top-2 {
    0% {
        top: 22px;
        transform: rotate(45deg);
    }

    50% {
        top: 22px;
        transform: rotate(0deg);
    }

    100% {
        top: 0;
        transform: rotate(0deg);
    }
}

@keyframes bottom {
    0% {
        bottom: 0;
        transform: rotate(0);
    }

    50% {
        bottom: 22px;
        transform: rotate(0);
    }

    100% {
        bottom: 15px;
        transform: rotate(135deg);
    }
}

@keyframes bottom-2 {
    0% {
        bottom: 22px;
        transform: rotate(135deg);
    }

    50% {
        bottom: 22px;
        transform: rotate(0);
    }

    100% {
        bottom: 0;
        transform: rotate(0);
    }
}

@keyframes scaled {
    50% {
        transform: scale(0);
    }

    100% {
        transform: scale(0);
    }
}

@keyframes scaled-2 {
    0% {
        transform: scale(0);
    }

    50% {
        transform: scale(0);
    }

    100% {
        transform: scale(1);
    }
}


/*HAMBURGUER-SCRIPT*/
.width80 {
    width: 80px;
}

@media only screen and (max-width: 1024px) {
    .width80 {
        width: 0px;
    }

    .panel-menu {
        opacity: 0;
        visibility: visible;
    }
}

#menuAdm {
    z-index: 99;
}

#menuAdm,
#conteudoAdm,
#auxMenuAdm {
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

#conteudoAdm {
    float: right;
}

/* O float acima so faz sentido no desktop, para o conteudo ficar ao lado do
   menu lateral. Abaixo de 992px o menu vira hamburguer e o float passa a
   atrapalhar - feio:

   as divs do painel sao `col-lg-12 col-md-12`, e no Bootstrap 3 nenhuma dessas
   duas vale abaixo de 992px. Sem largura declarada, um elemento FLUTUADO nao
   herda a largura do pai: ele encolhe ate caber o conteudo, e cresce se o
   conteudo for maior. Com a tabela do Institucional isso dava 606px de div
   numa tela de 360px e, como o float e a direita, o excedente saia pela
   ESQUERDA - a tabela comecava em x=-261.

   O resultado era o pior tipo de bug: conteudo negativo NAO gera barra de
   rolagem, entao as colunas do checkbox e do Titulo simplesmente nao existiam
   no celular. O cliente abria a lista e nao via o nome dos proprios links.

   Sem o float, a div volta a ser bloco comum e ocupa a largura do pai.

   O `!important` e necessario, nao e preguica: o float esta como atributo
   `style` direto no HTML (`<div id='conteudoAdm' style='float:right;' ...>`),
   repetido em cerca de quarenta lista.php/form.php. Estilo inline so perde
   para `!important`, e tirar um a um seria quarenta arquivos alterados para o
   mesmo efeito. */
@media (max-width: 991px) {
    #conteudoAdm {
        float: none !important;
        max-width: 100%;
    }
}

@media (max-width: 375px) {
    #conteudoAdm {
        padding: 0;
    }

    /* O `padding: 0` acima era o que sobrava para compensar a margem negativa
       do `.row` do Bootstrap (margin: 0 -15px). Sem ele, toda linha do painel
       passava 15px da borda direita e o celular ganhava rolagem lateral em
       TODAS as telas - conferido em 360px de largura.

       Zerar a margem do row resolve sem devolver o padding: as colunas ja tem
       15px de padding proprio, entao o conteudo continua com respiro na borda,
       so que agora por dentro da tela. */
    #conteudoAdm .row {
        margin-left: 0;
        margin-right: 0;
    }

    #conteudoAdm .display-align.mobile {
        padding-top: 8em;
    }
}

/*PERFIL LOGIN*/

.display_abs_bloco {
    position: absolute !important;
    width: 93%;
    margin-top: 20px;
    z-index: 1;
}

.perfil .conteudo-icone {
    background-color: #002060;
    padding: 10px;
    border-radius: 50%;
}

.perfil h3.f-bold.c-first {
    font-family: 'Baloo 2', cursive;
    font-weight: 900;
    color: #9BA4B5;
    padding: 0 10px;
}

.panel:hover .perfil h3.f-bold.c-first {
    color: #002060;
}

.perfil .seta {
    rotate: 180deg;
}

@media (max-width: 1440px) {
    .display_abs_bloco {
        width: 89%;
    }
}

@media (max-width: 1024px) {
    .display_abs_bloco {
        width: 97%;
    }
}

@media (max-width: 768px) {
    .display_abs_bloco {
        width: 96%;
    }

}

@media (max-width: 425px) {
    .display_abs_bloco {
        width: 92.5%;
    }
}

@media (max-width: 375px) {
    .display_abs_bloco {
        width: 91.5%;
    }
}

@media (max-width: 320px) {
    .display_abs_bloco {
        width: 90%;
    }
}

/*4 ITEMS*/

.produtos {
    background: #D9D9D9;
    border: 1px solid transparent;
    border-radius: 20px;
    padding: 30px;
    height: 90%;
    max-height: 90%;
    transition: all ease 0.7s;
}
#produtos.destaques .produtos {
    height: 30em;
}

#produtos.destaques .primeiro, .segundo {
    width: 100%;
}
#produtos.destaques .segundo {
    margin-top: 1em;
}

#produtos.destaques .primeiro .produtos, #produtos.destaques .segundo .produtos {
    height: 13em;
}

#produtos.destaques .segundo .produtos  {
    background: transparent;
}

.produtos:hover,
.produtos.ativo {
    box-shadow: 0px 6px 5px 0px #28232359;
    border: 1px solid transparent;
}

.produtos .clima {
    position: relative;
    bottom: 60%;
}

@media (max-width: 1440px) {
    #produtos {
        padding-top: 20px;
    }

    .produtos {
        padding: 20px;
    }
}

@media (max-width: 1024px) {
    .produtos {
        margin-bottom: 30px;
    }
}

@media (max-width: 425px) {
    #produtos.destaques .produtos {
        height: 24em;
    }
}

/*TABELA*/

.table-round-corner {
    width: 100%;
    text-align: center;
    overflow: hidden;
    border-collapse: separate;
    /*border: solid #ccc 1px;*/
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
}

.table>tbody>tr>td {
    padding: 20px;
}

/* O CALENDARIO DA HOME NAO PODE EMPURRAR A PAGINA.

   Sao sete colunas com 20px de recuo de cada lado: 280px so de respiro,
   antes de qualquer numero. A tabela tem width: 100%, mas 100% nao encolhe
   abaixo do minimo que o conteudo exige - entao, quando o conteudo cedeu
   264px ao menu novo, ela passou a estourar 19px para fora da janela e a
   pagina inteira ganhou barra de rolagem lateral.

   O recuo diminui, e o que ainda nao couber rola DENTRO do bloco. Rolagem
   lateral na pagina inteira por causa de um enfeite no canto e o tipo de
   coisa que ninguem liga a causa: mexe-se na largura do navegador e o site
   todo parece quebrado. */
.calendario {
    max-width: 100%;
    overflow-x: auto;
}

.calendario .table>tbody>tr>td {
    padding: 10px 12px;
}

.img-tabela {
    width: 4em;
}


.header-tabela {
    margin: 0!important;
}

.header-tabela th {
    font-family: 'Baloo 2', cursive;
    text-align: initial;
    font-size: 30px;
    color: #212A3E;
    font-weight: 500;
}

.body-tabela td {
    text-align: initial;
    vertical-align: middle !important;
}

.body-tabela.ultimas td {
    padding: 9px 0;
}

.body-tabela.ultimas td .display-align {
    justify-content: space-between;
}

.body-tabela.ultimas td .hospedagem, .table .body-tabela .hospedagem td a {
    color: #55b500;
}

.body-tabela.ultimas td .sites, .table .body-tabela .sites td a {
    color: #E749E7;
}

/* #039BE5 sobre o cinza do card dava 2,18:1 - o link de acao mais usado das
   listagens era o texto menos legivel da tela. O tom mais fundo chega a
   4,6:1 e continua sendo o mesmo azul. */
.body-tabela.ultimas td .fotografias, .table .body-tabela .fotografias td a {
    color: #0A6FA8;
}

.body-tabela.ultimas td p {
    text-align: initial;
    margin: 0;
}

.img-left {
    position: relative;
    left: 80%;
}

#logoMenu {
    width: 90%; 
}

@media (max-width: 1440px) {
    .labelMenuAdm {
        font-size: 15px;
    }

    .table>thead>tr>th,
    body-tabela.ultimas td p {
        font-size: 12px;
    }

    .body-tabela.ultimas td {
        padding: 13px 0;
    }

    .body-tabela.ultimas td p {
        font-size: 11px;
    }

    .img-tabela {
        padding: 7px;
    }
}

@media (max-width: 1440px) {
    .table>tbody>tr>td {
        font-size: 12px;
    }
}

@media (max-width: 1300px) {
    .calendario .table>tbody>tr>td {
        padding: 10px 10px;
    }
}

@media (max-width: 768px) {
    .table>tbody>tr>td {
        padding: 10px;
        font-size: 11px;
    }

    .calendario .table>tbody>tr>td {
        padding: 17px 10px;
    }

    .labelMenuAdm {
        display: block!important;
    }    
}

/* A rolagem lateral da tabela vale em QUALQUER largura, nao so no celular.
   A lista de Usuarios tem colunas demais: em 1024px (tablet deitado) a tabela
   dava 1031px dentro de um wrapper de 912px e vazava para fora da pagina
   inteira, levando a rolagem lateral junto. Com o overflow no wrapper, quem
   rola e a tabela - a pagina fica parada. */
.table-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Sem `max-height` + `overflow-y` no celular, de proposito.
   Uma caixa de 500px com rolagem propria dentro de uma pagina que tambem rola
   e das piores coisas de usar no toque: o dedo entra na caixa, a pagina para de
   andar e o cliente acha que travou. Era por isso, ao que tudo indica, que cinco
   listas estavam com o `table-wrapper` comentado no HTML - o remedio incomodava
   mais que a doenca, e o efeito colateral foi ficarem sem rolagem lateral
   nenhuma. Aqui a tabela rola so na horizontal, e a pagina rola livre. */

@media (max-width: 425px) {
    .table>tbody>tr>td {
        padding: 10px!important;
    }
}


/*�CONES*/
.img-container img {
    width: 5em;
}

@media (max-width: 1440px) {
    .img-container img {
        width: 4em;
    }
}

/*BOT�ES PAINEL*/
.btn-titulo {
    display: flex;
}

.btn-azul,
.btn-verde,
.btn-roxo,
.btn-amarelo,
.btn-vermelho {
    display: flex;
    justify-content: center;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    transition: all ease 0.5s;
}

.btn-azul:hover,
.btn-verde:hover,
.btn-roxo:hover,
.btn-amarelo:hover,
.btn-vermelho:hover {
    box-shadow: 0px 6px 5px 0px #28232359;
    transform: scaleX(1.02);
}

.btn-azul {
    background-color: #027cb7;
    margin: 0 5px;
}

.btn-verde {
    background-color: #2E7D32;
    margin: 0 5px;
}

.btn-roxo {
    background-color: #7f42A7;
    margin: 0 5px;
}

.btn-amarelo {
    background-color: #f9a825;
    margin: 0 5px;
}

.btn-vermelho {
    background-color: #d50000;
    margin: 0 5px;
}

.txt-verde {
    color: #2E7D32;
    font-weight: 700;
}

@media (max-width: 425px) {
    .btn-azul, .btn-verde, .btn-amarelo, .btn-vermelho {
        padding: 10px 3px;
        margin: 5px;
    }

    .btn-titulo {
        flex-direction: column;
    }
}

/* PAGINACAO */
.paginacao {
    font-family: 'Open Sans', sans-serif;
}

.paginacao ul {
    margin: 0;
}

.paginacao li {
    display: inline-block;
    vertical-align: middle;
    position: relative;
}

.paginacao .paginacao-busca {
    font-size: 17px;
    /*width: 30px;
    height: 40px;*/
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: transparent;
    margin: 10px;
    color: #002060;
    padding: 0!important;
    transition: all 0.5s;
}

.paginacao .paginacao-busca:hover,
.paginacao .borda-selecionada {
    color: #212A3E;
    transform: scale(1.20);
}

.paginacao .paginacao-busca input,
.paginacao .borda-selecionada input {
    width: 2.5em;
    height: 2.8em;
    font-size: 16px;
    font-weight: 600;
    text-align: center;
    border: 1px solid #212A3E;
    border-radius: 4px;
    background: #fff;
    color: #212A3E;
    padding: 0px;
    margin: 0;
}
.linoticia a, .licardapio.paginacao-left a, .licardapio.paginacao-right a {
    display: block;
    width: 2.5em;
    text-align: center;
    padding: 0px;
    border: 1px solid #212A3E;
    border-radius: 4px;
    background: #ffffffbd;
    color: #212A3E;
}

input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.ulcardapio {
    display: flex;
    justify-content: center;
    align-items: center;
}

.paginacao-icon svg {
    margin-top: 3px;
    width: 15px;
    height: 15px;
}

.paginacao-left .paginacao-icon svg {
    transform: rotateY(180deg);
}

.paginacao-icon svg:hover {
    fill: #fff;
}

#interna-segmento.container .row {
    justify-content: flex-end;
}

@media (max-width: 768px) {
    .paginacao .paginacao-busca {
        width: 40px;
        height: 40px;
    }

    .col-lg-12.no-padding {
        padding-left: 0px;
        padding-right: 0px;
    }
}

@media (max-width: 425px) {
    .paginacao .paginacao-busca {
        width: 30px;
        height: 35px;
    }
}

@media (max-width: 375px) {
    .paginacao .paginacao-busca {
        width: 25px;
        font-size: 15px;
    }
}

@media (max-width: 320px) {
    .paginacao .paginacao-busca {
        width: 18px;
        font-size: 13px;
    }
}

/*CHECKBOX*/

.checkbox .descheck.none {
    transition: all ease 0.5s;
    display: none;
}

.check {
    display: flex;
    flex-direction: row-reverse;
    justify-content: center;
    align-items: center;
    margin-top: 27px;
}

.card {
    margin-top: 20px;
    margin-bottom: 10px;
}

@keyframes check {
    0% {
        height: 0;
        width: 0;
    }

    25% {
        height: 0;
        width: 10px;
    }

    50% {
        height: 20px;
        width: 10px;
    }
}

.checkbox {
    background-color: #fff;
    display: inline-block;
    height: 28px;
    margin: 0 .25em;
    width: 28px;
    border-radius: 4px;
    border: 1px solid #ccc;
    float: right
}

.checkbox span {
    display: block;
    height: 28px;
    position: relative;
    width: 28px;
    padding: 0
}

.checkbox span {
    -moz-transform: scaleX(-1) rotate(135deg);
    -ms-transform: scaleX(-1) rotate(135deg);
    -webkit-transform: scaleX(-1) rotate(135deg);
    transform: scaleX(-1) rotate(135deg);
    -moz-transform-origin: left top;
    -ms-transform-origin: left top;
    -webkit-transform-origin: left top;
    transform-origin: left top;
    border-right: 4px solid #fff;
    border-top: 4px solid #fff;
    content: '';
    display: block;
    height: 20px;
    left: 3px;
    position: absolute;
    top: 15px;
    width: 10px
}

.checkbox span:hover {
    border-color: #0020605b
}

.checkbox input {
    display: none
}

.checkbox span.checked {
    -webkit-animation: check .8s;
    -moz-animation: check .8s;
    -o-animation: check .8s;
    animation: check .8s;
    border-color: #002060
}

.checkbox .default.checked,
.checkbox input.checked+.default:after {
    border-color: #002060
}

.checkbox.disable {
    background-color: #e7e7e7;
}

.checkbox.disable span {
    display: none;
}



/*INPUT FILE*/

/* SÓ SOME O CAMPO QUE TEM UM BOTÃO NO LUGAR DELE.

   Isto era `input[type="file"] { display: none }`, sem exceção, e existia
   para o campo de IMAGEM, que é escondido de propósito: quem aparece por ele
   é o `label.foto` ("Selecionar imagem").

   Só que a regra pegava TODOS. O campo de PDF do card "Arquivo para baixar"
   não tem botão substituto: ele simplesmente não existia na tela, e quem
   escolhesse esse tipo não tinha como anexar coisa alguma. Na tela antiga
   também, desde sempre.

   Agora some só quem tem `id` de campo com botão. O padrão passou a ser
   APARECER: um campo novo que alguém acrescente sem label sai sem estilo, e
   não invisível.
   --------------------------------------------------------------------------
   Ao criar um upload com `label.foto`, acrescente o id dele nesta lista. */
input[type="file"]#file,
input[type="file"]#fileFundo,
input[type="file"]#fileShare {
    display: none;
}

/* #027cb7 E NAO #039BE5: o azul claro com texto branco dava 3,08:1, e este e
   o botao de escolher a imagem - se ele nao se le, a pessoa nao acha onde
   enviar a foto. Escurecido 20%, o minimo que chega a 4,5. O hover ja era
   #002060 e passa com folga. */
label.foto {
    color: #fff;
    cursor: pointer;
    text-transform: uppercase;
    height: 50px;
    width: 200px;
    border-radius: 10px;
    background-color: #027cb7;
    font-size: 17px;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all ease 0.5s;
}

label.foto:hover {
    background-color: #002060;
    box-shadow: 0px 0px 10px 3px #28232359;
    transform: scaleX(1.01);
}

/*ALERT*/
.alert {
    padding: 25px !important;
    margin-top: 100px !important;
}

.filesPainel img {
    width: 100%;
    height: 30em;
}

.swal2-content .select2-container--default .select2-selection--single {
    display: none;
}

/*DESTAQUE ATIVIDADES*/
.box-destaque {
    margin-left: 40px;
}

.destaque-contagem {
    border-radius: 20px;
}
.destaque-contagem.azul {
    background-color: #4971C9;
}
.destaque-contagem.amarelo {
    background-color: #BFB27D;
}
.destaque-contagem.laranja {
    background-color: #C1674F;
}

.destaque-contagem img {
    width: 90%;
    padding: 20px;
}

span.barra {
    background: #212A3E;
    width: 1px;
    height: 8em;
}

.icone-hora {
    text-align: end;
}
.icone-hora img {
    width: 40%;
}

@media (max-width: 425px) {
    .box-destaque {
        margin-left: 0px;
    }

    span.barra {
        display: none;
    }

    .destaque-contagem {
        width: 85px;
    }
}

/*CALEND�RIO*/
td[data-semana="0"] { color: #ff0000; }

.glyphicon {
    cursor: pointer;
}

.t-recomendado span {
    font-weight: 600;
    color: #ff0000;
    font-size: 16px;
    letter-spacing: 1px;
}

.status-active {
    color: green;
    background: #73d373;
    padding: 5px 10px;
    border-radius: 20px;
}
.status-inactive {
    color: #812020;
    background: #f93131;
    padding: 5px 10px;
    border-radius: 20px;
}

#preview {
    display: none;
    max-height: 150px;
    margin-top: 10px;
    border: 4px solid #fff;         /* Borda branca */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Sombra suave */
    border-radius: 8px;             /* Canto levemente arredondado (opcional) */
    object-fit: cover;
}
/* ==========================================================================
   COMPONENTES DE PAINEL (secoes, upload com preview, destaque)
   ========================================================================== */

/* --- Titulo de secao dentro de um formulario --- */
.pnl-secao {
    margin: 35px 0 18px;
    padding-bottom: 10px;
    border-bottom: 1px solid #4a4a4a;
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .5px;
}

.pnl-secao small {
    display: block;
    margin-top: 6px;
    color: #b9b9b9;
    font-size: 12.5px;
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    line-height: 1.5;
}

.pnl-secao b {
    color: #5dc4fe;
}

/* --- Texto dentro dos botoes coloridos do topo --- */
.btn-titulo a .pnl-btn-txt,
.btn-azul.pnl-btn-txt,
.btn-verde.pnl-btn-txt,
.btn-roxo.pnl-btn-txt,
.btn-amarelo.pnl-btn-txt,
.btn-vermelho.pnl-btn-txt {
    align-items: center;
    color: #ffffff !important;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .4px;
    white-space: nowrap;
}

/* ============================================================================
   O "i" DE INFORMAÇÃO E O BALÃO DELE

   O botão é um círculo de 16px, e o "i" dentro dele NÃO É UMA LETRA: são duas
   formas desenhadas em `::before` (o ponto) e `::after` (a haste).

   Com a letra, quem decidia onde a tinta caía era a métrica da fonte. Um "i"
   minúsculo não tem descida - o ponto e a haste ficam todos acima da linha de
   base - e `align-items: center` centra a caixa de LINHA, não a tinta:
   medido em pixel, a letra nascia 1px acima do centro de um círculo de 16px.
   Um empurrão de 1,5px corrigiu o número e não o incômodo, porque a fonte
   ainda mandava no desenho.

   Desenhado, ele é simétrico POR CONSTRUÇÃO: 3,5px de folga em cima, 3,5px
   embaixo, e o mesmo eixo nos dois. E de quebra nenhum `form *` alcança um
   pseudo-elemento - a regra solta que já pintou de cinza um ícone que devia
   ser roxo aqui não tem o que pegar.

   Ele nasce discreto: contorno e traço em roxo apagado. É um convite, não um
   aviso - a tela não pode ficar salpicada de bolinhas gritando.
   ============================================================================ */
.pnl-i {
    position: relative;
    display: inline-block;
    width: 16px;
    height: 16px;
    margin: 0 0 0 5px;
    padding: 0;
    border: 1px solid rgba(231, 73, 231, .45);
    border-radius: 50%;
    background: none;
    color: #d9a8ea;
    font-size: 0;
    line-height: 0;
    vertical-align: middle;
    cursor: help;
    transition: background .14s ease, color .14s ease, border-color .14s ease;
}

/* O ponto e a haste. `currentColor` faz as duas seguirem a cor do botão, que
   é o que muda no hover. */
.pnl-i::before,
.pnl-i::after {
    content: "";
    position: absolute;
    left: 50%;
    width: 2px;
    background: currentColor;
    transform: translateX(-50%);
}

/* O `top` CONTA A PARTIR DA CAIXA INTERNA, e não da borda.

   O círculo tem 1px de contorno, então a caixa onde o `top` se apoia começa
   1px abaixo do alto do botão. Escrevendo as medidas como se não houvesse
   borda, o desenho inteiro descia 1px - medido em pixel, a tinta ficava
   0,94px abaixo do centro. Os números aqui já vêm com o 1px descontado.

   Alvo, em coordenadas do botão: tinta de 3,5px a 12,5px num círculo de 16px,
   ou seja 3,5px de folga em cima e 3,5px embaixo. */

/* O ponto: de 3,5px a 5,5px na caixa do botão. */
.pnl-i::before {
    top: 2.5px;
    height: 2px;
    border-radius: 50%;
}

/* A haste: de 7px a 12,5px na caixa do botão. */
.pnl-i::after {
    top: 6px;
    height: 5.5px;
    border-radius: 1px;
}

.pnl-i:hover,
.pnl-i[aria-expanded="true"] {
    border-color: #e749e7;
    background: rgba(231, 73, 231, .18);
    color: #fff;
}

.pnl-i:focus-visible {
    outline: 2px solid #e749e7;
    outline-offset: 2px;
}

/* O texto viaja dentro do botão e só sai quando alguém pede. */
.pnl-i-txt { display: none; }

/* O BALÃO É UM SÓ, PRESO AO <body>, E `fixed`.

   `absolute` dentro do campo seria cortado pelo primeiro pai com `overflow`,
   e a coluna do formulário rola. `fixed` não tem pai que o corte. O z-index
   passa do 1200 da folha do formulário no celular, senão ele nasceria atrás
   dela justamente onde o espaço é pouco. */
.pnl-i-balao {
    position: fixed;
    z-index: 1300;
    max-width: 300px;
    padding: 11px 13px;
    border: 1px solid rgba(231, 73, 231, .32);
    border-radius: 11px;
    background: #26142f;
    box-shadow: 0 16px 40px rgba(0, 0, 0, .6);
    color: #e6d7ee;
    font-family: "Poppins", sans-serif;
    font-size: 12.5px;
    font-weight: 400;
    line-height: 1.55;
}

.pnl-i-balao[hidden] { display: none; }

.pnl-i-balao b {
    color: #f0c8ff;
    font-weight: 600;
}

/* --- Dica curta, colada no campo que ela explica --- */
.pnl-dica {
    display: block;
    margin-top: 6px;
    color: #b9b9b9;
    font-size: 12.5px;
    font-weight: 400;
    line-height: 1.5;
}

.pnl-dica b {
    color: #5dc4fe;
    font-weight: 600;
}

/* Dica dentro do rotulo do campo (h3.inst-home-produtos tem altura fixa) */
.inst-home-produtos .pnl-dica-inline {
    color: #b9b9b9;
    font-size: 12px;
    font-weight: 400;
    text-transform: none;
}

/* --- Bloco de upload com pre-visualizacao --- */
.pnl-upload {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 26px;
}

.pnl-upload-acao {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Botao de upload: largura pelo conteudo, texto em uma linha so */
label.foto {
    width: auto;
    height: auto;
    min-height: 44px;
    padding: 11px 22px;
    gap: 8px;
    font-size: 14px;
    line-height: 1.2;
    text-transform: none;
    white-space: nowrap;
}

.pnl-upload-acao {
    align-items: flex-start;
}

.pnl-upload-info {
    max-width: 280px;
    color: #b9b9b9;
    font-size: 12.5px;
    word-break: break-all;
}

.pnl-upload-erro {
    color: #ff8a80;
    font-weight: 600;
}

.pnl-preview {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px;
    border: 1px solid #4a4a4a;
    border-radius: 10px;
    background: #2b2b2b;
}

.pnl-preview img {
    display: block;
    width: auto;
    max-width: 260px;
    max-height: 150px;
    border-radius: 6px;
    background: #1d1d1d;
}

.pnl-preview-tag {
    color: #b9b9b9;
    font-size: 11.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .5px;
}

.pnl-preview-tag-novo {
    color: #7ed957;
}

.pnl-preview-tag-erro {
    color: #ff8a80;
}

.pnl-preview-erro {
    max-width: 260px;
    padding: 20px 12px;
    border-radius: 6px;
    background: #1d1d1d;
    color: #ff8a80;
    font-size: 13px;
    word-break: break-all;
}

.pnl-check {
    display: flex;
    align-items: center;
    gap: 8px;
    max-width: 260px;
    margin: 4px 0 0;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.4;
    cursor: pointer;
}

.pnl-check span {
    color: #ffffff;
}

.pnl-check input[type="checkbox"] {
    width: 16px;
    height: 16px;
    margin: 0;
    flex: 0 0 auto;
    cursor: pointer;
}

/* --- Seletor de cor / gradiente --- */
.pnl-grapick {
    height: 45px;
    margin-bottom: 8px;
    border: 1px solid #4a4a4a;
    border-radius: 4px;
    background: #2b2b2b;
}

.pnl-cor-preview {
    width: 100%;
    height: 35px;
    border: 1px solid #4a4a4a;
    border-radius: 4px;
}

input.form-control.pnl-cor {
    height: 40px;
    padding: 4px;
    border: 1px solid #4a4a4a;
    background: #2b2b2b;
    cursor: pointer;
}

/* --- Destaque (Modelo 2) --- */
.pnl-destaque-box {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    padding: 16px 20px;
    border: 1px solid #00b894;
    border-left: 5px solid #00b894;
    border-radius: 10px;
    background: #2b2b2b;
}

.pnl-destaque-box .pnl-destaque-txt {
    color: #e6e6e6;
    font-size: 13px;
    line-height: 1.5;
}

.pnl-switch {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    user-select: none;
}

.pnl-switch input[type="checkbox"] {
    display: none;
}

.pnl-switch .pnl-switch-trilho {
    position: relative;
    width: 52px;
    height: 28px;
    flex: 0 0 auto;
    border-radius: 20px;
    background: #5a5a5a;
    transition: background ease .3s;
}

.pnl-switch .pnl-switch-trilho::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #fff;
    transition: transform ease .3s;
}

.pnl-switch input[type="checkbox"]:checked + .pnl-switch-trilho {
    background: #00b894;
}

.pnl-switch input[type="checkbox"]:checked + .pnl-switch-trilho::after {
    transform: translateX(24px);
}

/* Etiqueta e botao de destaque nas listagens */
.pnl-badge {
    display: inline-block;
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    white-space: nowrap;
}

.pnl-badge-on {
    background: #00b894;
    color: #fff;
}

/* Fica sobre o fundo claro da tabela: precisa de contraste escuro */
.pnl-badge-off {
    background: #e4e4e4;
    border: 1px solid #bdbdbd;
    color: #5c5c5c;
}

.pnl-btn-acao {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 16px;
    border: none;
    border-radius: 5px;
    background: #039BE5;
    color: #fff !important;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .4px;
    white-space: nowrap;
    cursor: pointer;
    transition: all ease .4s;
}

.pnl-btn-acao:hover {
    box-shadow: 0px 6px 5px 0px #28232359;
    transform: scale(1.03);
}

.pnl-btn-acao.on {
    background: #00b894;
}

.pnl-btn-acao.off {
    background: #6b6b6b;
}

.pnl-btn-acao .material-icons {
    font-size: 16px;
}

@media (max-width: 768px) {
    .pnl-upload {
        gap: 18px;
    }

    .pnl-upload label.foto,
    .pnl-upload-info,
    .pnl-preview img,
    .pnl-check {
        width: 100%;
        max-width: 100%;
    }
}

/* Contraste do bloco de destaque (fica sobre fundo escuro) */
.pnl-switch > span:not(.pnl-switch-trilho) {
    color: #ffffff;
}

.pnl-destaque-box .pnl-destaque-txt {
    color: #d8d8d8;
}

.pnl-destaque-box .pnl-destaque-txt b {
    color: #2ee6b6;
    font-weight: 700;
}

/* --- Interruptor clicavel de destaque nas listagens ---------------------------
   E um link, mas com cara de switch: fica obvio que da para clicar e alternar. */
.pnl-toggle {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 7px 14px 7px 8px;
    border: 1px solid #cfcfcf;
    border-radius: 24px;
    background: #ffffff;
    color: #5c5c5c !important;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .4px;
    white-space: nowrap;
    cursor: pointer;
    transition: all ease .3s;
}

.pnl-toggle:hover {
    border-color: #00b894;
    box-shadow: 0 4px 10px rgba(0, 0, 0, .14);
    transform: translateY(-1px);
}

.pnl-toggle .pnl-toggle-trilho {
    position: relative;
    width: 40px;
    height: 22px;
    flex: 0 0 auto;
    border-radius: 20px;
    background: #c4c4c4;
    transition: background ease .3s;
}

.pnl-toggle .pnl-toggle-trilho::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
    transition: transform ease .3s;
}

.pnl-toggle.on {
    border-color: #00b894;
    background: #e6faf5;
    color: #00795f !important;
}

.pnl-toggle.on .pnl-toggle-trilho {
    background: #00b894;
}

.pnl-toggle.on .pnl-toggle-trilho::after {
    transform: translateX(18px);
}

/* Variante neutra do bloco de destaque (para outros interruptores) */
.pnl-destaque-box-neutro {
    border-color: #5dc4fe;
    border-left-color: #5dc4fe;
}

.pnl-destaque-box-neutro .pnl-switch input[type="checkbox"]:checked + .pnl-switch-trilho {
    background: #039BE5;
}

.pnl-destaque-box-neutro .pnl-destaque-txt b {
    color: #5dc4fe;
}

/* Dica em tom de alerta (ex.: proporcao diferente para o card em destaque) */
.pnl-dica-alerta {
    padding: 10px 14px;
    border-left: 3px solid #f9a825;
    border-radius: 4px;
    background: #3a3a3a;
    color: #e6e6e6;
}

.pnl-dica-alerta b {
    color: #ffc55c;
}

/* Etiqueta de situacao do agendamento (listagem do Institucional).
   Cores iguais as do aviso dentro do formulario, para a pessoa reconhecer o
   mesmo estado nos dois lugares. */
.pnl-situacao {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}
/* AS ETIQUETAS DE SITUACAO tinham a MESMA cor no texto e no fundo, mudando
   so a opacidade: um veu de 15% da cor por baixo do texto cheio dela. Isso
   da 1,6:1 no "No ar" - o estado de cada link da lista era a coisa menos
   legivel dela.

   O fundo continua igual; o texto escurece ate separar do proprio veu. As
   tres continuam verde, ambar e laranja - so que legiveis. */
/* FUNDO OPACO, E NAO `rgba(...,.15)`.

   A mesma etiqueta aparece em DUAS superficies: no editor, que e escuro, e na
   listagem antiga, cujas linhas sao brancas. Com fundo translucido ela compoe
   com o que estiver atras, e ai nenhuma cor de texto serve nas duas - o verde
   escuro que se le sobre o verde claro da listagem (4,36:1, e ja abaixo do
   minimo) e ilegivel sobre o verde escuro do editor, e vice-versa.

   Com fundo proprio a etiqueta passa a ser a mesma coisa em qualquer lugar, e o
   texto dela tem um unico fundo para vencer: 7,8:1 nas quatro.

   A BORDA E O QUE DA CONTORNO NO ESCURO. A pastilha escura sobre a listagem
   branca se destaca sozinha (12:1), mas sobre o editor ela quase encosta no
   fundo (1,4:1) - sem a borda seria um texto colorido solto, e nao uma etiqueta.

   Medido, e nao escolhido a olho: ver ferramentas/varre-painel.js. */
.pnl-sit-ok {
    background: #0d3a30;
    border: 1px solid rgba(111, 224, 192, .35);
    color: #6fe0c0;
}

.pnl-sit-espera {
    background: #3a2a0c;
    border: 1px solid rgba(240, 185, 92, .35);
    color: #f0b95c;
}

.pnl-sit-erro {
    background: #3d1a12;
    border: 1px solid rgba(255, 157, 128, .35);
    color: #ff9d80;
}

/* ---------------------------------------------------------------------------
   MOSTRAR / ESCONDER SENHA
   A caixa e o botao sao montados pelo admin/library/js/olho-senha.js, que
   encontra todo input[type=password] da pagina. O CSS fica aqui para valer nas
   tres telas que tem senha: login, cadastro de usuario e redefinir senha.
   --------------------------------------------------------------------------- */
.pnl-senha {
    position: relative;
    display: block;
}

/* O padding da direita abre espaco para o botao nao ficar por cima do texto
   digitado - senha longa passava por baixo do icone. */
.pnl-senha > input {
    padding-right: 44px !important;
}

.pnl-olho {
    position: absolute;
    top: 50%;
    right: 6px;
    transform: translateY(-50%);
    width: 34px;
    height: 34px;
    margin: 0 !important;          /* o painel tem `button { width:100%; margin-top:50px }` */
    padding: 0;
    border: 0;
    background: transparent;
    color: #7a7a7a;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    transition: color .2s ease, background .2s ease;
}

.pnl-olho:hover,
.pnl-olho:focus {
    color: #002060;
    background: rgba(0, 0, 0, .06);
    outline: none;
}

/* O olho nesta tela esta no bloco TELAS DE ENTRADA: o fundo deixou de ser
   escuro, entao a tinta branca de antes sumiria. */


/* ---------------------------------------------------------------------------
   JANELA DE ENQUADRAMENTO DA IMAGEM
   Montada pelo admin/library/js/imagem-webp.js quando o campo declara
   `data-recorte`. A moldura mostra a forma REAL em que a imagem vai aparecer -
   inclusive redonda, quando o destino e o avatar do Modelo 2.
   --------------------------------------------------------------------------- */
.pnl-corte-fundo {
    position: fixed;
    inset: 0;
    background: rgba(10, 10, 12, .82);
    backdrop-filter: blur(3px);
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    animation: pnlCorteEntra .18s ease-out;
}

@keyframes pnlCorteEntra { from { opacity: 0; } to { opacity: 1; } }

.pnl-corte-caixa {
    background: #262a2e;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, .09);
    border-radius: 16px;
    padding: 24px 24px 20px;
    max-width: 100%;
    max-height: 100%;
    overflow: auto;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .55);
}

.pnl-corte-topo { margin-bottom: 16px; }
.pnl-corte-topo b { display: block; font-size: 17px; letter-spacing: .2px; }
.pnl-corte-topo span { font-size: 12.5px; color: #9aa4ad; }

/* O palco e a moldura. `overflow: hidden` e o que faz o excesso da foto
   desaparecer de verdade - e o mesmo corte que o site aplica. */
.pnl-corte-palco {
    position: relative;
    margin: 0 auto;
    overflow: hidden;
    border-radius: 10px;
    background: #14171a;
}

.pnl-corte-tela { display: block; cursor: grab; touch-action: none; }
.pnl-corte-tela:active { cursor: grabbing; }

/* A mascara desenha por cima: escurece o que sai do recorte e marca a borda.
   `pointer-events: none` para nao atrapalhar o arraste embaixo dela. */
.pnl-corte-mascara {
    position: absolute;          /* left/top/width vem do JS: e o retangulo da moldura */
    pointer-events: none;
    border-radius: 8px;
    /* O box-shadow gigante escurece TUDO que esta fora da moldura, e o
       `overflow: hidden` do palco apara o excesso. E assim que a faixa em volta
       mostra, apagado, o pedaco da foto que sera descartado. */
    box-shadow:
        0 0 0 9999px rgba(10, 10, 12, .68),
        0 0 0 1.5px rgba(255, 255, 255, .9);
}

/* Circulo: o `box-shadow` gigante escurece tudo que esta FORA do circulo,
   e o overflow do palco apara o excesso. Assim a pessoa continua vendo os
   cantos da foto, so que apagados - que e exatamente o que sera cortado. */
.pnl-corte-palco.e-circulo .pnl-corte-mascara {
    border-radius: 50%;
}

.pnl-corte-dica {
    font-size: 12.5px;
    color: #9aa4ad;
    text-align: center;
    line-height: 1.5;
    margin: 16px auto 14px;
    max-width: 460px;
}
.pnl-corte-dica b { color: #cfd6dc; }

/* ---- zoom ---- */
.pnl-corte-zoom {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 auto 20px;
    max-width: 460px;
}

.pnl-corte-lupa {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    margin: 0 !important;          /* o painel tem `button { width:100%; margin-top:50px }` */
    padding: 0;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 9px;
    background: rgba(255, 255, 255, .07);
    color: #cfd6dc;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .15s ease, color .15s ease;
}
.pnl-corte-lupa:hover { background: rgba(255, 255, 255, .16); color: #fff; }

/* A barra padrao do navegador some no fundo escuro - por isso o desenho
   proprio, com trilho visivel e alvo grande o bastante para o dedo. */
.pnl-corte-zoom input[type="range"] {
    flex: 1;
    margin: 0;
    height: 6px;
    /* `border` e `padding` zerados na marra: o painel tem estilo global para
       `input` (borda clara, altura, padding) que deixava a barra com um
       contorno branco em volta do trilho. */
    border: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
    border-radius: 999px;
    background: rgba(255, 255, 255, .16);
    -webkit-appearance: none;
    appearance: none;
    outline: none;
    cursor: pointer;
}
/* O AZUL AQUI É HERANÇA, e agora incomoda mais: a janela deixou de morar
   dentro da coluna e passou a cobrir a tela, então o azul dela virou a única
   coisa azul do painel. */
.pnl-corte-zoom input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 20px; height: 20px;
    border-radius: 50%;
    background: #e749e7;
    border: 3px solid #fff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .45);
    cursor: grab;
}
.pnl-corte-zoom input[type="range"]::-moz-range-thumb {
    width: 20px; height: 20px;
    border-radius: 50%;
    background: #e749e7;
    border: 3px solid #fff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .45);
    cursor: grab;
}

/* ---- acoes ---- */
.pnl-corte-acoes {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: flex-end;
    border-top: 1px solid rgba(255, 255, 255, .08);
    padding-top: 18px;
}

.pnl-corte-acoes button {
    width: auto !important;
    margin: 0 !important;
    padding: 11px 20px;
    border: 1px solid transparent;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
}

/* Cancelar e o mais discreto: e a acao que descarta o trabalho. */
.pnl-corte-acoes .pnl-corte-cancelar {
    background: transparent;
    color: #9aa4ad;
}
.pnl-corte-acoes .pnl-corte-cancelar:hover { color: #fff; background: rgba(255, 255, 255, .08); }

.pnl-corte-acoes .pnl-corte-centralizar {
    background: transparent;
    border-color: rgba(255, 255, 255, .2);
    color: #cfd6dc;
}
.pnl-corte-acoes .pnl-corte-centralizar:hover { background: rgba(255, 255, 255, .1); color: #fff; }

/* O botao que conclui e o unico cheio - assim o olho acha o caminho sozinho. */
.pnl-corte-acoes .pnl-corte-ok {
    background: linear-gradient(135deg, #7a2a9e 0%, #e749e7 100%);
    color: #fff;
    box-shadow: 0 4px 14px rgba(231, 73, 231, .35);
}
.pnl-corte-acoes .pnl-corte-ok:hover { filter: brightness(1.12); }

@media (max-width: 520px) {
    .pnl-corte-caixa { padding: 18px 16px 16px; border-radius: 14px; }
    .pnl-corte-acoes { justify-content: stretch; }
    .pnl-corte-acoes button { flex: 1 1 auto; text-align: center; }
    .pnl-corte-acoes .pnl-corte-ok { order: -1; flex-basis: 100%; }
}

/* Etiqueta do card que copia (listagem do Institucional). Cor propria para nao
   se confundir com a situacao do agendamento, que usa verde/laranja/vermelho. */
/* Fundo opaco pelo mesmo motivo das tres acima. */
/* O `<b>` do codigo herdava o `#5a5a5a` do `form *` sem dono, e com a pastilha
   agora escura isso ficou em 2,03:1. A cor e declarada no filho porque e ele que
   o `form *` alcanca. */
.pnl-sit-copiar b { color: #cfe8f7; }

.pnl-sit-copiar {
    background: #0d2f42;
    border: 1px solid rgba(126, 203, 240, .35);
    color: #7ecbf0;
}

/* --------------------------------------------------------------------------
   FILTRO EM UMA LINHA (listagem de Categorias)

   O campo cresce e ocupa o que sobra; os botões ficam com o tamanho que já
   têm em todo o painel (.btn-principal tem padding de 7em nas laterais, e
   mexer nisso mudaria todos os botões do sistema).

   `align-items: flex-end` alinha pela BASE: o campo tem rótulo em cima e é
   mais alto que o botão, e alinhar pelo topo deixava os botões flutuando no
   meio do nada.
   -------------------------------------------------------------------------- */
.pnl-filtro-linha {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 12px;
}

.pnl-filtro-campo {
    flex: 1 1 260px;   /* cresce, mas nunca abaixo de 260px antes de quebrar */
    min-width: 0;
}

.pnl-filtro-campo .form-control {
    width: 100%;
}

/* No celular os botões do painel já são largos; em linha eles não caberiam
   lado a lado, então cada um ocupa a largura toda. */
@media (max-width: 767px) {
    .pnl-filtro-linha .btn-principal {
        flex: 1 1 100%;
        padding-left: 0;
        padding-right: 0;
    }
}

/* Etiqueta da seção (categoria) na coluna Seção do Institucional. Neutra de
   propósito: as outras etiquetas da tabela significam ESTADO (no ar, agendado,
   copia) e usam cor para isso. Seção não é estado - é onde o link aparece. */
.pnl-secao-tag {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 999px;
    background: rgba(33, 42, 62, .1);
    color: #212A3E;
    font-size: 12.5px;
    font-weight: 700;
    white-space: nowrap;
}

/* --------------------------------------------------------------------------
   ALINHAMENTO DOS BLOCOS DA LISTAGEM

   No Bootstrap 3 o `.row` tem margem NEGATIVA de 15px, para cancelar o padding
   das colunas. A barra do título e a tabela devolvem esse padding por conta
   própria; o bloco do filtro e o de explicação não devolviam, e por isso saíam
   15px mais largos de cada lado - medido: 107px contra 122px de borda.
   -------------------------------------------------------------------------- */
.pnl-bloco-alinhado {
    padding-left: 15px;
    padding-right: 15px;
}

/* --------------------------------------------------------------------------
   LINHA DE SEÇÃO na listagem do Institucional

   Separa os links de cada seção dentro da mesma tabela. Precisa parecer
   cabeçalho, e não um registro: por isso a faixa escura, o texto em maiúscula
   e nenhum link clicável dentro.

   Não leva a classe `sort`, de propósito - é o que a torna inofensiva na tela
   de ordenação (painel.scripts.js usa `items: ".sort"`).
   -------------------------------------------------------------------------- */
.pnl-linha-secao > td {
    padding: 12px 18px !important;
    background: #212A3E;
    border: 0;
}

/* O striped do Bootstrap pinta linha ímpar/par; a faixa da seção tem de
   ganhar dele, senão fica cinza-claro no meio da tabela e se confunde com um
   registro. */
.table-striped > tbody > tr.pnl-linha-secao:nth-of-type(odd) > td,
.table-striped > tbody > tr.pnl-linha-secao > td {
    background: #212A3E;
}

.pnl-linha-secao-nome {
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    color: #ffffff;
}

.pnl-linha-secao-conta {
    margin-left: 10px;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .6px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .6);
}

/* ===========================================================================
   HORÁRIOS - os controles do formulário
   ---------------------------------------------------------------------------
   O fundo do painel é escuro (ver .pnl-dica, #b9b9b9), então estas caixas são
   superfície clara translúcida com texto branco - e não caixas brancas, que
   brigariam com os .form-control brancos ao lado.

   O radio e o checkbox continuam nativos de propósito: o Tab chega neles, o
   leitor de tela os anuncia e o clique no <label> já funciona sem JS. Só a
   moldura em volta é estilizada.
   =========================================================================== */

/* ---- os quatro modos de recorrência ---- */
/* O AZUL DESTAS CAIXAS VIROU O MAGENTA DO PAINEL (25/09/2026).

   Elas nasceram na tela cheia de Horários, onde o azul só convivia consigo
   mesmo. Com os horários dentro do editor, a mesma coluna passa a mostrar hoje
   um formulário magenta e amanhã um azul, conforme a área aberta - e aí o azul
   deixa de ser uma escolha e vira um descuido.

   A troca é só aqui: `#5dc4fe` é usado em outros lugares do painel, e trocar
   todos seria mexer em tela que ninguém pediu. */
.pnl-modo-box {
    display: block;
    width: 100%;
    margin: 0;
    padding: 14px 16px;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 10px;
    background: rgba(255, 255, 255, .04);
    cursor: pointer;
    transition: border-color .2s ease, background .2s ease;
}

.pnl-modo-box:hover {
    border-color: rgba(231, 73, 231, .55);
}

.pnl-modo-box-ativo {
    border-color: #e749e7;
    background: rgba(231, 73, 231, .12);
}

.pnl-modo-topo {
    display: flex;
    align-items: center;
    gap: 9px;
}

.pnl-modo-topo b {
    font-size: 14px;
    font-weight: 600;
    color: #fff;
}

.pnl-modo-radio {
    width: 16px;
    height: 16px;
    margin: 0;
    flex-shrink: 0;
    accent-color: #e749e7;
}

/* O exemplo não é enfeite: "Semana do mês" sozinho não diz a ninguém que serve
   para "1ª sexta-feira do mês". */
.pnl-modo-exemplo {
    display: block;
    margin-top: 6px;
    font-size: 12.5px;
    font-weight: 400;
    line-height: 1.45;
    color: #b9b9b9;
}

/* ---- dias da semana ---- */
.pnl-dias {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* O TEXTO DO DIA PRECISA DE COR PROPRIA, e o motivo e o `form * { color:
   #5a5a5a }` sem dono la do comeco do arquivo.

   A caixa declara `color: #fff`, e o `<span>` de dentro nao herda isso: o
   `form *` alcanca o span e pinta ele de cinza escuro, que sobre a caixa escura
   da 2,61:1. O dia marcado escapava porque a regra do ativo repinta; o
   desmarcado ficava ilegivel, e era so o desmarcado - por isso ninguem via.

   Medido pelo ferramentas/varre-painel.js. */
.pnl-dia-box > span { color: #cdbcd6; }

.pnl-dia-box-ativo > span { color: #fff; }

.pnl-dia-box {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    /* 44px é o alvo de toque mínimo; o .form-control do projeto tem 34px, mas
       aqui são sete alvos lado a lado no celular e errar o dia é caro. */
    min-width: 84px;
    height: 44px;
    margin: 0;
    padding: 0 12px;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 8px;
    background: rgba(255, 255, 255, .04);
    color: #fff;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: border-color .2s ease, background .2s ease;
}

.pnl-dia-box:hover {
    border-color: rgba(231, 73, 231, .55);
}

.pnl-dia-box-ativo {
    border-color: #e749e7;
    background: rgba(231, 73, 231, .14);
    font-weight: 600;
}

.pnl-dia-check {
    width: 15px;
    height: 15px;
    margin: 0;
    accent-color: #e749e7;
}

/* ---- chips de hora ---- */
.pnl-horas-linha {
    display: flex;
    align-items: flex-end;
    gap: 10px;
}

/* O .btn-principal tem `padding: 0.8em 7em` - do tamanho de um botão de
   formulário inteiro. Ao lado de um campo de hora de 160px ele ficaria
   absurdo, então aqui, e só aqui, o padding horizontal encolhe. */
.pnl-horas-linha .btn-principal {
    padding-left: 2.4em;
    padding-right: 2.4em;
    white-space: nowrap;
}

.pnl-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
    min-height: 34px;
}

.pnl-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 36px;
    padding: 0 6px 0 14px;
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 999px;
    background: rgba(255, 255, 255, .08);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.pnl-chip-x {
    width: 24px;
    height: 24px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .16);
    color: #fff;
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
    transition: background .2s ease;
}

.pnl-chip-x:hover {
    background: #b0121f;
}

/* ---- prévia ---- */
.pnl-previa-horario {
    display: inline-flex;
    align-items: baseline;
    gap: 18px;
    margin-top: 8px;
    padding: 10px 16px;
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 10px;
    background: rgba(255, 255, 255, .06);
    font-size: 15px;
    color: #fff;
}

.pnl-previa-horario #previaHoras {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    white-space: pre;
}

@media (max-width: 767px) {
    .pnl-dia-box {
        min-width: 0;
        flex: 1 1 calc(25% - 8px);
    }

    .pnl-horas-linha {
        flex-wrap: wrap;
    }

    .pnl-horas-linha .btn-principal {
        flex: 1 1 100%;
    }
}

/* ===========================================================================
   HORÁRIOS - controles no padrão do painel, e não no do navegador
   ---------------------------------------------------------------------------
   O checkbox e o radio nativos aparecem com o desenho do sistema operacional -
   quadradinho cinza do Windows no meio de um painel escuro. Ficam nativos no
   HTML, porque é o que faz o Tab chegar neles e o leitor de tela anunciar, mas
   com `appearance: none` o desenho passa a ser nosso.
   =========================================================================== */
.pnl-modo-radio,
.pnl-dia-check {
    -webkit-appearance: none;
    appearance: none;
    flex-shrink: 0;
    margin: 0;
    border: 1.5px solid rgba(255, 255, 255, .45);
    background: transparent;
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease;
}

.pnl-modo-radio {
    width: 17px;
    height: 17px;
    border-radius: 50%;
}

.pnl-dia-check {
    width: 16px;
    height: 16px;
    border-radius: 4px;
}

/* O miolo do radio: um ponto central, desenhado com um gradiente radial para
   não precisar de pseudo-elemento num <input> (que não aceita ::before). */
.pnl-modo-radio:checked {
    border-color: #e749e7;
    background: radial-gradient(circle, #e749e7 0 42%, transparent 46%);
}

/* O tique do checkbox: duas bordas de um elemento girado dariam pseudo-
   elemento, então aqui é uma imagem SVG embutida - pinta de branco sobre o
   azul e acompanha qualquer tamanho. */
.pnl-dia-check:checked {
    border-color: #e749e7;
    background-color: #e749e7;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round' d='M3.5 8.5l3 3 6-6'/%3E%3C/svg%3E");
    background-size: 100%;
    background-position: center;
    background-repeat: no-repeat;
}

.pnl-modo-radio:focus-visible,
.pnl-dia-check:focus-visible {
    outline: 2px solid #e749e7;
    outline-offset: 2px;
}

/* ---- faixa de atendimento: "das __ às __" ---- */
.pnl-faixa-linha {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.pnl-faixa-linha .form-control {
    width: 110px;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.pnl-faixa-rotulo {
    font-size: 14px;
    color: #b9b9b9;
    white-space: nowrap;
}

/* ---- formato do horário: avulsos ou faixa ---- */
.pnl-formato-ops {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 14px;
}

.pnl-formato-op {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0;
    padding: 0 16px;
    height: 44px;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 8px;
    background: rgba(255, 255, 255, .04);
    color: #fff;
    font-size: 13.5px;
    font-weight: 500;
    cursor: pointer;
    transition: border-color .2s ease, background .2s ease;
}

.pnl-formato-op:hover {
    border-color: rgba(231, 73, 231, .55);
}

.pnl-formato-op-ativo {
    border-color: #e749e7;
    background: rgba(231, 73, 231, .14);
    font-weight: 600;
}

/* Uma ETAPA do formulário: um bloco que começa numa linha nova e contém os
   próprios campos.
   ---------------------------------------------------------------------------
   Eu tinha usado `<div class="col-12">` para separar as etapas, e `.col-12`
   NÃO EXISTE no CSS deste painel - é classe do Bootstrap 4, e aqui roda o 3.
   O div ficava sem float e sem clearfix, então os `col-lg-*` de dentro
   escapavam dele: as quatro opções de "Quando acontece" se partiam em duas
   linhas e as duas primeiras subiam para o lado do campo Local, que é o que a
   Stefanie viu na tela.

   `clear: both` faz a etapa começar abaixo de tudo o que flutuou antes; o
   `::after` faz ela conter o que flutua dentro. Os dois são necessários. */
.pnl-etapa {
    clear: both;
    width: 100%;
}

.pnl-etapa::after {
    content: "";
    display: table;
    clear: both;
}

/* O × do chip tinha de derrubar a regra GLOBAL de `button` deste painel.
   ---------------------------------------------------------------------------
   Em admin/library/css/estilo.css:245 existe um `button { margin-top: 50px;
   width: 100%; padding: 15px 0; font-size: 18px }` - regra herdada da tela de
   login que atinge TODO <button> do painel. Ela empurrava o × para 31px abaixo
   do chip, fora dele: era o "botão de x quebrado".

   Não removo a regra global: ela desenha os botões da tela de login, e mexer
   nela para consertar um chip seria trocar um bug por outro. */
.pnl-chip .pnl-chip-x {
    margin: 0;
    padding: 0;
    width: 24px;
    min-width: 24px;
    height: 24px;
    flex-shrink: 0;
    font-size: 15px;
    line-height: 1;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .16);
    color: #fff;
}

.pnl-chip .pnl-chip-x:hover {
    background: #b0121f;
}

/* ===========================================================================
   HORÁRIOS - a listagem
   ---------------------------------------------------------------------------
   A primeira versão herdava o cinza claro que a tabela dá aos links, e sobre a
   linha clara o texto ficava quase ilegível. Aqui cada peça ganha a cor dela.
   =========================================================================== */
.pnl-local-linha {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}

.pnl-local-nome {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: #fff;
}

.pnl-local-conta {
    padding: 3px 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .14);
    font-size: 12px;
    font-weight: 500;
    color: #dbe4f0;
    white-space: nowrap;
}

.pnl-local-acoes {
    display: flex;
    gap: 8px;
    margin-left: auto;
}

/* Estes <button> também tinham de derrubar o `button { margin-top: 50px;
   width: 100%; padding: 15px 0 }` global do painel - senão viravam dois blocos
   gigantes empurrados 50px para baixo dentro da linha do local. */
.pnl-local-acoes .pnl-local-btn {
    margin: 0;
    width: auto;
    min-width: 0;
    padding: 5px 13px;
    border: 1px solid rgba(255, 255, 255, .35);
    border-radius: 6px;
    background: transparent;
    color: #fff;
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
    cursor: pointer;
    transition: background .2s ease, border-color .2s ease;
}

.pnl-local-acoes .pnl-local-btn:hover {
    background: rgba(255, 255, 255, .16);
    border-color: #fff;
}

.pnl-local-acoes .pnl-local-btn-perigo:hover {
    background: #b0121f;
    border-color: #b0121f;
}

/* A coluna "Quando" é o link de editar: precisa ler como texto de conteúdo, e
   não como o cinza de link que a tabela dá. */
.pnl-hora-quando,
.pnl-hora-quando:link,
.pnl-hora-quando:visited {
    color: #212A3E;
    font-size: 14.5px;
    font-weight: 600;
}

.pnl-hora-quando:hover {
    color: #039BE5;
    text-decoration: underline !important;
}

/* Cada hora numa pílula, como o quadro do site desenha: a listagem passa a se
   parecer com o resultado em vez de ser uma linha de texto solta. */
.pnl-hora-pilula {
    display: inline-block;
    margin: 2px 4px 2px 0;
    padding: 3px 10px;
    border-radius: 999px;
    background: rgba(33, 42, 62, .10);
    color: #212A3E;
    font-size: 13px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* O que falta, em cinza - mas cinza que ainda se lê, e não o quase-branco de
   antes.

   A #6b7280 foi escolhida por dar 4,6:1, e hoje dá 3,42: o fundo composto desta
   linha é #d9d9d9, e não o que eu media na época. A conferência do navegador
   pegou. Mesmo tom, escurecido até passar de novo. */
.pnl-hora-falta {
    color: #585d69;
    font-size: 13px;
    font-style: italic;
}

/* #039BE5 sobre o cinza do card dava 2,18:1 - o link de acao mais usado da
   listagem era o texto menos legivel da tela.

   A correção de então parou em 3,86 sobre o fundo composto de verdade (#d9d9d9).
   Continua sendo o mesmo azul, agora com a medida certa. */
.pnl-hora-editar,
.pnl-hora-editar:link,
.pnl-hora-editar:visited {
    color: #096294;
    font-size: 13px;
    font-weight: 600;
}

.pnl-hora-editar:hover {
    text-decoration: underline !important;
}

/* O × do chip: o GLIFO dentro do botão não estava centrado.
   ---------------------------------------------------------------------------
   O botão em si estava no lugar (centro em 18px, igual ao do chip), mas com
   `display: block` e `line-height: 15px` numa caixa de 24px o "×" ficava
   encostado no topo do conteúdo. Flex centraliza nos dois eixos e não depende
   de acertar line-height. */
.pnl-chip .pnl-chip-x {
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

/* Cabeçalho e corpo com o MESMO recuo.
   ---------------------------------------------------------------------------
   No painel o `th` tem `padding-left: 8px` e o `td` tem 20px, então todo
   rótulo do cabeçalho fica 12px à esquerda do conteúdo da coluna. Nas listas
   antigas isso quase não se nota; nesta, com "Horários" em cima de pílulas e
   "Observação" em cima de um travessão, a deriva salta.

   A classe é só desta tabela de propósito: a diferença vem do estilo comum do
   painel e existe em mais de dez listagens. Igualar no lugar comum arrastaria
   todas elas sem ninguém ter pedido. */
table.pnl-tabela-alinhada > thead > tr > th {
    padding-left: 20px;
    padding-right: 20px;
}

/* A linha do local: as três peças centradas de verdade.
   ---------------------------------------------------------------------------
   `align-items: center` no flex já estava ali, e ainda assim o nome ficava em
   17.9 e a pílula e os botões em 21.4 - 3,5px abaixo. Cada peça tinha um
   `line-height` diferente herdado (18.57 no nome, 17.14 nos outros), e a
   altura da caixa saía dessa linha, não do conteúdo.

   Com `display: flex` e `line-height: 1` em cada peça a caixa passa a ter a
   altura do que está dentro dela, e aí o centro do pai centra as três no mesmo
   eixo. */
.pnl-local-linha {
    min-height: 30px;
}

.pnl-local-nome,
.pnl-local-conta {
    display: flex;
    align-items: center;
    line-height: 1;
}

.pnl-local-acoes {
    align-items: center;
}

.pnl-local-acoes .pnl-local-btn {
    display: flex;
    align-items: center;
    line-height: 1;
}

/* Margem parasita nos filhos da linha do local.
   ---------------------------------------------------------------------------
   Mesmo com `align-items: center` no pai e `line-height: 1` nos filhos, a
   pílula e os botões ficavam 3,5px abaixo do nome. O nome centrava; os outros
   dois, não - e os dois pela mesma medida, o que aponta para margem herdada de
   alguma regra comum do painel, e não para o flex.

   `align-self: center` é per-item e não depende do que o pai resolveu; as
   margens verticais zeradas tiram o empurrão. */
.pnl-local-linha > * {
    align-self: center;
    margin-top: 0;
    margin-bottom: 0;
}

/* =============================================================================
   PUBLICAR  (admin/publicar/)
   Prefixo .pnl-pub-*.

   Regra que assombra toda peca nova deste painel: existe um
   `button { margin-top: 50px; width: 100%; padding: 15px 0; font-size: 18px }`
   herdado da tela de login (linha ~245 deste arquivo) que acerta QUALQUER botao
   da area logada. Todo botao daqui zera as quatro propriedades na mao.
   ============================================================================= */

.pnl-pub-bloco {
    padding-bottom: 26px;
    margin-bottom: 26px;
    border-bottom: 1px solid #e6e6e6;
}

.pnl-pub-bloco-fim {
    padding-bottom: 0;
    margin-bottom: 0;
    border-bottom: 0;
}

.pnl-pub-rotulo {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #8a8a8a;
    margin-bottom: 12px;
}

/* A CONTAGEM AO LADO DO ROTULO: "2 de 5 pessoas".
   -------------------------------------------------------------------------
   Ela nao herda o `letter-spacing: 1px` nem o caixa-alta do rotulo: numero
   espacado se le pior, e "2 DE 5 PESSOAS" grita o que e informacao de apoio.

   SEM COR PROPRIA ENQUANTO CABE. Um numero colorido em toda tela vira ruido,
   e o que importa e a linha diferente - a mesma razao pela qual a etiqueta
   "No ar" nao aparece nos cards que estao no ar. So quando a conta chega ao
   teto ela ganha o ambar, que e o mesmo do botao que virou aviso. */
.pnl-pub-conta {
    display: inline-block;
    margin-left: 8px;
    padding: 2px 9px;
    border-radius: 999px;
    background: #f1f1f1;
    color: #6b6b6b;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    vertical-align: 1px;
}

.pnl-pub-conta-cheia {
    background: #fdf6e6;
    color: #7a5407;
}

/* A linha de controles. `flex-wrap` porque abaixo de ~900px o campo de URL
   sozinho ja ocupa a largura toda e os botoes precisam cair para baixo. */
.pnl-pub-linha {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.pnl-pub-url {
    flex: 1 1 320px;
    min-width: 0;
    font-family: Consolas, Monaco, monospace;
    font-size: 15px;
    background: #f7f7f7;
    cursor: text;
}

/* -------- botoes -------- */
.pnl-pub-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 0;          /* zera a regra global de button */
    width: auto;            /* idem */
    padding: 9px 18px;      /* idem */
    font-size: 14px;        /* idem */
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    border: 1px solid #cfcfcf;
    border-radius: 6px;
    background: #ffffff;
    color: #333333;
    text-decoration: none;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease;
}

.pnl-pub-btn:hover,
.pnl-pub-btn:focus {
    background: #f0f0f0;
    color: #333333;
    text-decoration: none;
}

/* O BOTAO QUE VIROU AVISO: a conta chegou ao limite de pessoas do plano.
   -------------------------------------------------------------------------
   Nao e um botao desabilitado, e por isso nao e um <button> com `disabled`:
   e um AVISO com um numero, e a dica explica o que fazer. Botao cinzento que
   nao faz nada deixa a pessoa clicando e achando que a tela travou.

   O AMBAR E O MESMO DO SELO "fora do plano" do editor, de proposito: os dois
   dizem a mesma coisa - o plano chegou ao fim aqui. */
.pnl-pub-btn-teto {
    gap: 6px;
    border-color: rgba(166, 112, 20, .45);
    background: #fdf6e6;
    color: #7a5407;
    cursor: default;
}

.pnl-pub-btn-teto:hover,
.pnl-pub-btn-teto:focus {
    background: #fdf6e6;
    color: #7a5407;
}

.pnl-pub-btn-forte {
    border-color: #500580;
    background: #500580;
    color: #ffffff;
}

.pnl-pub-btn-forte:hover,
.pnl-pub-btn-forte:focus {
    background: #3d0463;
    color: #ffffff;
}

.pnl-pub-btn-ok {
    border-color: #1c5c2e;
    background: #1c5c2e;
    color: #ffffff;
}

/* -------- endereco -------- */
.pnl-pub-slug {
    flex: 1 1 320px;
    min-width: 0;
    padding: 10px 14px;
    border: 1px solid #e6e6e6;
    border-radius: 6px;
    background: #f7f7f7;
    font-family: Consolas, Monaco, monospace;
    font-size: 15px;
    color: #333333;
    overflow-wrap: anywhere;
}

/* #9a9a9a sobre o branco do bloco dava 2,63:1. E a parte fixa do endereco,
   que existe para a pessoa LER o link inteiro - ilegivel ali e o mesmo que
   nao estar escrito. */
.pnl-pub-slug-base {
    color: #6b6b6b;
}

.pnl-pub-nota {
    margin-top: 11px;
    font-size: 13.5px;
    line-height: 1.6;
    color: #6f6f6f;
}

.pnl-pub-alerta {
    margin-top: 12px;
    padding: 11px 14px;
    border: 1px solid rgba(176, 18, 31, .3);
    border-radius: 6px;
    background: rgba(176, 18, 31, .07);
    font-size: 13.5px;
    line-height: 1.6;
    color: #8a0f1a;
}

/* -------- no ar / fora do ar -------- */
.pnl-pub-switch-linha {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

.pnl-pub-switch {
    position: relative;
    flex-shrink: 0;
    margin-top: 0;          /* zera a regra global de button */
    width: 58px;            /* idem */
    padding: 0;             /* idem */
    font-size: 0;           /* idem */
    height: 32px;
    border: 0;
    border-radius: 999px;
    background: #bdbdbd;
    cursor: pointer;
    transition: background .18s ease;
}

.pnl-pub-switch-on {
    background: #1c5c2e;
}

.pnl-pub-switch-bola {
    position: absolute;
    top: 4px;
    left: 4px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
    transition: left .18s ease;
}

.pnl-pub-switch-on .pnl-pub-switch-bola {
    left: 30px;
}

.pnl-pub-switch-txt {
    font-size: 14.5px;
    color: #4a4a4a;
}

/* O TEXTO DO INTERRUPTOR DEPENDE DO QUE ESTA ATRAS DELE.

   `.pnl-switch > span` pinta de branco, e foi escrito para o interruptor
   sobre o fundo escuro do painel - onde branco e o certo. Na tela do Aviso o
   mesmo interruptor vive dentro de um bloco `.produtos`, que e cinza claro
   (#D9D9D9): ali o branco dava 1,4:1, e a frase que explica o que o
   interruptor faz era praticamente invisivel.

   Quem manda e o fundo, entao a regra pergunta pelo fundo. */
.produtos .pnl-switch > span:not(.pnl-switch-trilho) {
    color: #4a4a4a;
}

.pnl-pub-selo {
    display: inline-block;
    padding: 5px 13px;
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 700;
}

.pnl-pub-selo-on {
    background: rgba(28, 92, 46, .12);
    color: #1c5c2e;
}

.pnl-pub-selo-off {
    background: rgba(176, 18, 31, .1);
    color: #8a0f1a;
}

/* -------- previa do compartilhamento --------
   Imita a forma do cartao que o WhatsApp desenha: imagem larga em cima, titulo
   e endereco embaixo, num bloco estreito. Nao precisa ser igual - precisa ser
   reconhecivel o bastante para a pessoa entender o que esta vendo. */
/* `min()` E NAO `width` + `max-width`.

   O par `width: 340px; max-width: 100%` parece a mesma coisa e nao e: o 100% e
   do pai, e num pai que nao limita o filho - flex, ou com padding assimetrico -
   ele nao segura nada. Em 360px a previa media 340 comecando em 37, e a PAGINA
   inteira rolava para o lado.

   `min(340px, 100%)` resolve os dois casos com uma declaracao so. */
.pnl-pub-previa {
    width: min(340px, 100%);
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    overflow: hidden;
    background: #ffffff;
}

.pnl-pub-previa-img {
    height: 178px;
    background-color: #ededed;
    background-size: cover;
    background-position: center;
}

.pnl-pub-previa-vazia {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    color: #a0a0a0;
    background-image:
        repeating-linear-gradient(45deg,
            #e8e8e8 0, #e8e8e8 9px, #f2f2f2 9px, #f2f2f2 18px);
}

.pnl-pub-previa-txt {
    padding: 11px 14px;
}

.pnl-pub-previa-titulo {
    font-size: 14.5px;
    font-weight: 600;
    color: #222222;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.pnl-pub-previa-url {
    margin-top: 4px;
    font-size: 12.5px;
    color: #8a8a8a;
    overflow-wrap: anywhere;
}

/* =============================================================================
   AVISO NO TOPO  (admin/aviso/)
   Reaproveita .pnl-pub-* da tela Publicar: os dois sao formularios de uma
   coisa so, com blocos separados por fio. Repetir aquele CSS com outro prefixo
   daria duas verdades sobre a mesma caixa.
   ============================================================================= */

.pnl-aviso-txt {
    font-size: 15px;
}

/* ---------------------------------------------------------------------------
   A TELA DE PUBLICAR NO TEMA DO PAINEL

   Ela nasceu quando o painel ainda era claro - um cartão branco dentro de uma
   tela escura - e ficou para trás.

   TUDO AQUI COMEÇA COM `.pnl-pub `, E ISSO NÃO É ENFEITE. As classes
   `.pnl-pub-*` não são só desta tela: a de Aviso no topo usa `.pnl-pub-selo`,
   `.pnl-pub-bloco`, `.pnl-pub-rotulo`, `.pnl-pub-nota` e `.pnl-pub-alerta` na
   superfície CLARA dela. Retematizando sem o prefixo, o selo verde daquela
   tela foi para 1,20:1 contra o fundo - o ve-contraste2 pegou. As regras
   antigas continuam logo acima, para elas.
   --------------------------------------------------------------------------- */

.pnl-pub {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 0 0 30px;
}

.pnl-pub .pnl-pub-topo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 26px 0 18px;
}

.pnl-pub .pnl-pub-titulo {
    margin: 0;
    color: #fff;
    font-size: 22px;
    font-weight: 700;
}

/* ---- o cartão do link, que é o herói da tela ---- */

/* Ele tem contorno e sombra que os outros não têm: é onde o olho tem de
   pousar primeiro, e é de onde sai a única coisa que a pessoa vem buscar
   todo dia - o endereço da página dela. */
.pnl-pub .pnl-pub-heroi {
    overflow: hidden;
    border: 1px solid rgba(231, 73, 231, .24);
    border-radius: 18px;
    background: #1b0f24;
    box-shadow: 0 18px 44px rgba(0, 0, 0, .38);
}

.pnl-pub .pnl-pub-faixa {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 9px;
    padding: 13px 20px;
    border-bottom: 1px solid rgba(231, 73, 231, .16);
    background: rgba(255, 92, 92, .07);
}

.pnl-pub .pnl-pub-heroi-on .pnl-pub-faixa { background: rgba(87, 217, 163, .08); }

.pnl-pub .pnl-pub-bolinha {
    width: 8px;
    height: 8px;
    flex-shrink: 0;
    border-radius: 50%;
    background: #ff7b7b;
}

.pnl-pub .pnl-pub-heroi-on .pnl-pub-bolinha { background: #57d9a3; }

.pnl-pub .pnl-pub-estado {
    color: #fff;
    font-size: 13.5px;
    font-weight: 700;
}

.pnl-pub .pnl-pub-faixa-txt {
    color: #a98ab6;
    font-size: 13px;
}

/* `margin-left: auto` joga o interruptor para a ponta sem precisar de um
   espaçador vazio no HTML. */
.pnl-pub .pnl-pub-faixa-fim {
    margin: 0 0 0 auto;
    line-height: 0;
}

.pnl-pub .pnl-pub-faixa-nota {
    color: #9376a1;
    font-size: 12px;
    line-height: 1.4;
}

.pnl-pub .pnl-pub-heroi-corpo {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 22px;
    padding: 22px 20px 24px;
}

/* ---- o QR ---- */

.pnl-pub .pnl-pub-qr {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 9px;
    flex-shrink: 0;
    width: 148px;
}

/* CARTÃO BRANCO, e isto é parte do código. Um leitor de QR procura contraste
   e a norma pede a "zona quieta" clara em volta - QR na cor da marca sobre
   fundo escuro é QR que não lê. */
.pnl-qr {
    width: 148px;
    height: 148px;
    padding: 8px;
    border-radius: 12px;
    background: #fff;
}

.pnl-qr canvas { display: block; border-radius: 4px; }

/* ---- o endereço ---- */

.pnl-pub .pnl-pub-heroi-texto {
    flex: 1 1 260px;
    min-width: 0;
}

/* EM TAMANHO DE LEITURA, e não num campo de formulário cinza de treze pixels.
   A pessoa precisa CONFERIR o que copiou antes de colar no WhatsApp. */
.pnl-pub .pnl-pub-endereco {
    margin: 6px 0 0;
    color: #fff;
    font-size: 17px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: .2px;
    word-break: break-all;
}

/* O input continua na página para o `execCommand("copy")` dos navegadores sem
   área de transferência moderna. `display: none` não copia - o campo precisa
   existir e poder ser selecionado. */
.pnl-pub .pnl-pub-escondido {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    border: 0;
    opacity: 0;
    pointer-events: none;
}

.pnl-pub .pnl-pub-botoes {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 16px;
}

/* ---- os cartões menores ---- */

.pnl-pub .pnl-pub-cartao {
    padding: 20px;
    border: 1px solid rgba(231, 73, 231, .14);
    border-radius: 16px;
    background: rgba(255, 255, 255, .025);
}

.pnl-pub .pnl-pub-rotulo {
    display: flex;
    align-items: center;
    gap: 2px;
    margin: 0 0 12px;
    color: #9376a1;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.1px;
    text-transform: uppercase;
}

/* O "i" não herda o caixa-alta nem o espaçamento do rótulo. */
.pnl-pub .pnl-pub-rotulo .pnl-i { letter-spacing: 0; flex-shrink: 0; }

.pnl-pub .pnl-pub-linha {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.pnl-pub .pnl-pub-slug {
    flex: 1 1 240px;
    min-width: 0;
    padding: 12px 14px;
    border: 1px solid rgba(231, 73, 231, .18);
    border-radius: 11px;
    background: rgba(255, 255, 255, .04);
    color: #cdbcd6;
    font-size: 14px;
    word-break: break-all;
}

.pnl-pub .pnl-pub-slug-base { color: #9376a1; }
.pnl-pub .pnl-pub-slug b { color: #fff; font-weight: 600; }
.pnl-pub .pnl-pub-slug i { color: #9376a1; font-weight: 400; }

/* ---- os botões ----

   O `width: auto` e o `margin: 0` são contra o `button { width: 100%;
   margin-top: 50px }` solto do painel, herdado da tela de login. Todo botão
   novo daqui zera as quatro propriedades na mão. */
.pnl-pub .pnl-pub-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    margin: 0;
    padding: 12px 20px;
    border: 1px solid rgba(231, 73, 231, .3);
    border-radius: 11px;
    background: rgba(255, 255, 255, .045);
    color: #cdbcd6 !important;
    font-size: 13.5px;
    font-weight: 600;
    text-decoration: none !important;
    cursor: pointer;
    transition: background .16s ease, border-color .16s ease, color .16s ease;
}

.pnl-pub .pnl-pub-btn:hover,
.pnl-pub .pnl-pub-btn:focus-visible {
    border-color: rgba(231, 73, 231, .55);
    background: rgba(231, 73, 231, .14);
    color: #fff !important;
}

.pnl-pub .pnl-pub-btn-forte {
    border-color: transparent;
    background: linear-gradient(135deg, #7a2a9e 0%, #e749e7 100%);
    color: #fff !important;
}

.pnl-pub .pnl-pub-btn-forte:hover { filter: brightness(1.12); background: linear-gradient(135deg, #7a2a9e 0%, #e749e7 100%); }

.pnl-pub .pnl-pub-btn-fino { padding: 9px 12px; font-size: 12.5px; }

.pnl-pub .pnl-pub-btn-ok {
    border-color: transparent;
    background: linear-gradient(135deg, #1f7a52 0%, #57d9a3 100%);
    color: #08210f !important;
}

/* ---- o interruptor ---- */

.pnl-pub .pnl-pub-switch {
    position: relative;
    display: block;
    width: 52px;
    height: 28px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, .16);
    cursor: pointer;
    transition: background .18s ease;
}

.pnl-pub .pnl-pub-switch-on { background: linear-gradient(135deg, #1f7a52 0%, #3ec48a 100%); }

.pnl-pub .pnl-pub-switch-bola {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .35);
    transition: transform .18s ease;
}

.pnl-pub .pnl-pub-switch-on .pnl-pub-switch-bola { transform: translateX(24px); }

.pnl-pub .pnl-pub-switch:focus-visible {
    outline: 2px solid #e749e7;
    outline-offset: 2px;
}

/* ---- o selo de estado, no cabeçalho da tela solta ---- */
.pnl-pub .pnl-pub-selo {
    display: inline-flex;
    align-items: center;
    padding: 5px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
}

.pnl-pub .pnl-pub-selo-on  { background: rgba(87, 217, 163, .16); color: #57d9a3; }
.pnl-pub .pnl-pub-selo-off { background: rgba(255, 123, 123, .16); color: #ff7b7b; }

/* ---- os avisos ---- */

/* AVISO NÃO VIRA "i". Este diz que o link na mão da pessoa não funciona, e
   escondido atrás de um clique ela manda mesmo assim. */
.pnl-pub .pnl-pub-alerta {
    margin-top: 14px;
    padding: 11px 13px;
    border-left: 3px solid #ff7b7b;
    border-radius: 9px;
    background: rgba(255, 92, 92, .1);
    color: #ffc9c9;
    font-size: 12.5px;
    line-height: 1.5;
}

.pnl-pub .pnl-pub-alerta b { color: #fff; }

/* TEXTO ALINHADO À ESQUERDA, contra o `form * { text-align: justify }` solto
   do painel. O justificado abre buracos entre as palavras numa caixa estreita,
   e texto de aviso com rio branco no meio é texto que ninguém lê.

   A regra vale para QUALQUER formulário desta tela, e não só para o do
   endereço, onde ela nasceu: o mesmo aviso justificado reapareceu na tela do
   Google no dia seguinte. O que decide não é o bloco, é estar dentro de um
   <form>.

   O contador de caracteres alinha à direita, e a regra dele vem depois desta
   de propósito - as duas têm o mesmo peso, e a última ganha. */
.pnl-pub form,
.pnl-pub form * { text-align: left; }

/* =============================================================================
   NO GOOGLE - a prévia do resultado de busca

   A tela inteira é `.pnl-pub`, de propósito: cartão, rótulo, botão e alerta já
   estão tematizados ali e uma segunda cópia do mesmo tema é uma segunda cópia
   para divergir. Só o que é desta tela mora aqui.
   ============================================================================= */

/* O BLOCO IMITA UM RESULTADO DO GOOGLE, e não é enfeite: a pessoa não está
   preenchendo dois campos, está escrevendo o que os outros vão ler na busca.
   Sem a imitação, "título" e "resumo" são duas palavras abstratas.

   O azul é o do Google em tema escuro. Ele destoa do roxo do painel de
   propósito - isto não é uma peça da nossa interface, é a citação de outra. */
.pnl-pub .pnl-seo-previa {
    padding: 16px 18px;
    border: 1px dashed rgba(231, 73, 231, .22);
    border-radius: 12px;
    background: rgba(255, 255, 255, .03);
}

.pnl-pub .pnl-seo-previa-url {
    margin-bottom: 6px;
    color: #b9a5c6;
    font-size: 12.5px;
    word-break: break-all;
}

.pnl-pub .pnl-seo-previa-titulo {
    color: #8ab4f8;
    font-size: 18px;
    font-weight: 500;
    line-height: 1.3;
}

.pnl-pub .pnl-seo-previa-texto {
    margin-top: 5px;
    color: #cdbcd6;
    font-size: 13px;
    line-height: 1.55;
}

/* ---- os campos ----

   As propriedades zeradas são contra o `input { display: block; height: 50px;
   width: 100%; margin-top: 8px }` e o `form * { text-align: justify }` soltos
   do painel, que alcançam qualquer campo dentro de um formulário. */
.pnl-pub .pnl-seo-campo { position: relative; }

.pnl-pub .pnl-seo-campo input,
.pnl-pub .pnl-seo-campo textarea {
    display: block;
    width: 100%;
    height: auto;
    margin: 0;
    padding: 12px 14px;
    border: 1px solid rgba(231, 73, 231, .45);
    border-radius: 11px;
    background: rgba(255, 255, 255, .04);
    color: #fff;
    font-size: 14px;
    line-height: 1.5;
    text-align: left;
    resize: vertical;
}

.pnl-pub .pnl-seo-campo input:focus,
.pnl-pub .pnl-seo-campo textarea:focus {
    border-color: #e749e7 !important;
    box-shadow: none !important;
    outline: none;
}

/* O `::placeholder` vai no CAMPO, e nao no embrulho dele. Escrito em
   `.pnl-seo-campo`, que e a <div>, a regra nao alcancava nada e o texto de
   exemplo saia na cor de fabrica - quase branco, igual a um valor escrito. */
.pnl-pub .pnl-seo-campo input::placeholder,
.pnl-pub .pnl-seo-campo textarea::placeholder { color: #9376a1; opacity: 1; }

/* O CONTADOR AVISA E NÃO IMPEDE. O corte do Google é em PIXEL, não em
   caractere: o que cabe depende da largura das letras. Um `maxlength` no
   limite mentiria sobre uma regra que não existe, e travaria a pessoa no meio
   de uma palavra. */
.pnl-pub .pnl-seo-conta {
    display: block;
    margin-top: 5px;
    color: #9376a1;
    font-size: 11.5px;
    font-variant-numeric: tabular-nums;
    text-align: right;
}

.pnl-pub .pnl-seo-conta-passou { color: #ffb547; }

.pnl-pub .pnl-seo-rotulo-2 { margin-top: 18px; }

/* O RITMO DOS BLOCOS SE PERDIA DENTRO DO <form>.

   `.pnl-pub` é uma coluna flex com `gap: 16px`, e é ela que dá o respiro
   entre os cartões da tela de Publicar. Aqui os cartões estão todos dentro de
   um formulário, e o formulário é UM filho só: o gap separava o form do que
   viesse antes, e os cartões lá dentro ficavam encostados. O formulário
   precisa ser a mesma coluna.

   A classe é do formulário DESTA tela, e não `.pnl-pub form`: na tela de
   Publicar há dois formulários pequenos, um dentro da faixa de "no ar" e o de
   trocar o endereço, e os dois já espaçam os filhos por margem. */
.pnl-pub .pnl-seo-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* ---- SALVAR NÃO PODE FICAR NO FIM DA ROLAGEM ----

   É a mesma decisão já tomada para o formulário do card, logo acima do
   `.pnl-ir-tela`: numa coluna alta e estreita o botão cai muito abaixo da
   dobra, e a pessoa escreve, rola até o fim para salvar e rola de volta.

   E ele é LARGO. Um botão de 90px centralizado no fim de três cartões de 460
   não parece a conclusão de nada - parece um link perdido. Grudado embaixo e
   ocupando a largura, ele é a barra de salvar da tela. */
.pnl-pub .pnl-seo-fim {
    position: sticky;
    bottom: 0;
    z-index: 5;
    display: flex;
    margin-top: 2px;
    padding: 12px 0 0;
    background: #120a18;
}

.pnl-pub .pnl-seo-fim::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    border-top: 1px solid rgba(231, 73, 231, .16);
}

.pnl-pub .pnl-seo-fim .pnl-pub-btn {
    flex: 1 1 auto;
    padding: 14px 20px;
    font-size: 14px;
    letter-spacing: .3px;
}

/* A MARCA DE "NAO SALVO", dentro da barra de salvar.

   Era uma faixa roxa de largura inteira, fixa no rodape, logo acima de uma barra
   de salvar que tambem e roxa e tambem e do rodape. Aqui ela e um ponto e tres
   palavras ao lado do botao: fica na mesma linha do gesto que resolve, que e onde
   um aviso desses serve. */
/* ---- UMA ALTURA SÓ PARA CAMPO E BOTÃO ----

   Medindo a tela inteira: campo de texto 42,9px, select da fonte 43, botão de
   salvar 46,8, campo hex do seletor 41. Nenhum deles estava errado sozinho - cada
   um vinha de um `padding` diferente escrito num dia diferente -, e juntos numa
   linha a diferença é a primeira coisa que se vê.

   `--pnl-alt-campo` é a medida, num lugar só. Quem for somar um controle novo a
   estas telas usa ela e não precisa saber por que é 44.

   As caixas de VÁRIAS LINHAS ficam de fora, de propósito: `textarea` cresce com o
   texto, e prender a altura dela seria trocar um problema de alinhamento por um
   de leitura. */
.pnl-pub,
.pnl-cl,
.pnl-quadro-hor { --pnl-alt-campo: 44px; }

/* Os campos das outras telas. Os de Cores e letra não estão aqui: a altura deles
   mora junto do resto do estilo deles, mais abaixo, por causa de um empate de
   peso entre seletores - está explicado lá. */
.pnl-pub .pnl-seo-campo input,
.pnl-pub .pnl-pub-campo input,
.pnl-cor-ctrl .pnl-cc-hex,
.pnl-quadro-hor-campo input,
.pnl-quadro-hor-campo select {
    height: var(--pnl-alt-campo, 44px);
}


/* Os botões usam `min-height`, e não `height`: um rótulo comprido pode quebrar em
   duas linhas num celular, e ali o botão precisa crescer em vez de cortar. */
.pnl-pub .pnl-pub-btn,
.pnl-quadro-hor-btn {
    min-height: var(--pnl-alt-campo, 44px);
}

/* A barra de salvar tinha um `padding` próprio que a deixava 3px mais alta que
   tudo. O respiro dela agora vem da altura comum. */
.pnl-pub .pnl-seo-fim .pnl-pub-btn {
    padding-top: 0;
    padding-bottom: 0;
}

/* ---- A MARCA DE "NÃO SALVO", no alto da tela ----

   Ela esteve em dois lugares errados antes: uma faixa roxa de largura inteira no
   rodapé, empilhada sobre a barra de salvar - que também é roxa -, e depois ao
   lado do próprio botão, onde ao aparecer EMPURRAVA o botão. O alvo mudava de
   lugar justamente quando a pessoa ia clicar nele. */
.pnl-pub .pnl-seo-sujo {
    position: sticky;
    top: 0;
    z-index: 4;
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 9px 13px;
    border: 1px solid rgba(255, 181, 71, .3);
    border-radius: 11px;
    background: #241a12;
    color: #ffb547;
    font-size: 12px;
    font-weight: 600;
}

.pnl-pub .pnl-seo-sujo[hidden] { display: none; }

/* A MESMA MARCA NO FORMULARIO DO CARD, que nao e `.pnl-pub`.

   Ela nasceu presa a `.pnl-pub` porque era de uma tela so. O seletor abaixo repete
   o desenho para o formulario do card, no editor - e e a segunda copia, que ja e
   uma a mais. Na terceira, tirar o `.pnl-pub` da regra original e deixar a marca
   valer por si; hoje seria mexer em quatro telas para arrumar duas. */
body.pnl-embutido .pnl-seo-sujo {
    position: sticky;
    top: 0;
    z-index: 4;
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 14px;
    padding: 9px 13px;
    border: 1px solid rgba(255, 181, 71, .3);
    border-radius: 11px;
    background: #241a12;
    color: #ffb547;
    font-size: 12px;
    font-weight: 600;
}

body.pnl-embutido .pnl-seo-sujo[hidden] { display: none; }

body.pnl-embutido .pnl-seo-sujo i {
    flex: 0 0 auto;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #ffb547;
    animation: pnlSujoPisca 2.4s ease-in-out infinite;
}

/* O ponto pisca DEVAGAR. Um aviso parado no canto some da vista em dez segundos;
   um que pisca rápido é um alarme, e isto não é um alarme. */
.pnl-pub .pnl-seo-sujo i {
    flex: 0 0 auto;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #ffb547;
    animation: pnlSujoPisca 2.4s ease-in-out infinite;
}

@keyframes pnlSujoPisca {
    0%, 100% { opacity: 1; }
    50%      { opacity: .35; }
}

/* Quem pediu para o sistema parar de animar não vê o ponto piscar. */
@media (prefers-reduced-motion: reduce) {
    .pnl-pub .pnl-seo-sujo i { animation: none; }
}

/* Numa tela estreita a marca desce para a linha de cima, e o botao continua
   ocupando a largura toda - que e o que se quer clicar no celular. */
.pnl-pub .pnl-seo-fim { flex-wrap: wrap; }


/* A BARRA SANGRA ATÉ A BORDA DO QUADRO, e por isso as margens negativas: sem
   elas fica uma faixa do fundo aparecendo dos dois lados da barra, e a coisa
   parece solta em vez de presa embaixo. Os números são o padding do
   `.pnl-embutido-corpo` (4px 14px 22px) e o do `.pnl-pub` (0 0 30px).

   Só dentro do quadro: na tela cheia o formulário mora numa grade do
   Bootstrap, e puxar para fora dela empurraria a rolagem horizontal.

   O -52 embaixo é a soma de DOIS paddings, e não de um: 30px do `.pnl-pub` e
   22px do `.pnl-embutido-corpo`, um dentro do outro. Com -30 sobrava uma faixa
   de 22px do fundo por baixo da barra quando a rolagem chegava ao fim - grudado
   embaixo quase sempre, e solto justamente no momento em que a pessoa desceu
   para salvar. Sticky não escapa do pai: o que ele alcança é o fim do próprio
   fluxo, e por isso a correção é a margem e não o `bottom`. */
body.pnl-embutido .pnl-pub .pnl-seo-fim {
    margin: 2px -14px -52px;
    padding: 12px 14px 22px;
}

/* =============================================================================
   IMAGENS - as três vagas da conta

   A imagem vem antes de tudo e grande o bastante para se reconhecer: numa lista
   de nomes de arquivo ninguém sabe qual é qual sem abrir.
   ============================================================================= */

.pnl-pub .pnl-img-vaga {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
}

/* O XADREZ NÃO É ENFEITE. Logo de cliente é quase sempre PNG transparente, e
   sobre um fundo escuro liso uma logo escura simplesmente some - a pessoa acha
   que o upload falhou. O quadriculado é a convenção que diz "aqui é
   transparente", e é a mesma de qualquer editor de imagem. */
.pnl-pub .pnl-img-moldura {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 108px;
    height: 108px;
    overflow: hidden;
    border: 1px solid rgba(231, 73, 231, .22);
    background-color: #2a1b33;
    background-image:
        linear-gradient(45deg, rgba(255, 255, 255, .05) 25%, transparent 25%),
        linear-gradient(-45deg, rgba(255, 255, 255, .05) 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, rgba(255, 255, 255, .05) 75%),
        linear-gradient(-45deg, transparent 75%, rgba(255, 255, 255, .05) 75%);
    background-size: 16px 16px;
    background-position: 0 0, 0 8px, 8px -8px, -8px 0;
}

.pnl-pub .pnl-img-quadrada { border-radius: 12px; }

/* No Modelo 2 a logo do menu É o avatar redondo do topo. A moldura mostra a
   forma real, senão a pessoa enquadra cantos que o site vai cortar. */
.pnl-pub .pnl-img-redonda { border-radius: 50%; }

/* A imagem de compartilhamento e DEITADA, 1200x630. Mostra-la num quadrado de
   108px seria mostrar outra coisa: o corte do WhatsApp e o que ela tem de
   estreita em cima e embaixo. */
.pnl-pub .pnl-img-deitada {
    width: 172px;
    height: 90px;
    border-radius: 10px;
}

.pnl-pub .pnl-img-moldura img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.pnl-pub .pnl-img-sem { color: #9376a1; }

.pnl-pub .pnl-img-lado {
    flex: 1 1 200px;
    min-width: 0;
}

/* O <input type="file"> fica fora da tela, e não com `display: none`: escondido
   assim ele some da navegação por teclado, e a <label> que o abre deixa de ter o
   que abrir. Aqui ele continua focável, e o `for` continua funcionando. */
.pnl-pub .pnl-img-arquivo {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.pnl-pub .pnl-img-botoes {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* O AVISO DO ENQUADRAMENTO É INJETADO PELO imagem-webp.js, com um `id` que
   começa em `aviso-img-` e um estilo inline mínimo. Ele já diz a medida e que a
   janela de enquadrar vai abrir - e por isso esta tela não repete a medida numa
   linha própria: era a mesma informação duas vezes, uma acima da outra.

   O que falta a ele é lugar: chega colado no botão. O resto do visual é dele
   mesmo, inline, e mexer nisso daqui seria disputar com o JavaScript. */
.pnl-pub .pnl-img-lado > [id^='aviso-img-'] {
    margin-top: 10px !important;
}

.pnl-pub .pnl-img-nota {
    margin: 4px 0 0;
    color: #b9a5c6;
    font-size: 12.5px;
    line-height: 1.5;
}

/* =============================================================================
   CORES E LETRA - a tela antiga dentro da moldura nova

   Esta era a última tela no visual velho do painel: rótulos `inst-home-produtos`,
   campos `.form-control` do Bootstrap 3, seções separadas por um título com risco
   embaixo. Ao lado das telas refeitas parecia outro programa.

   O HTML dos CAMPOS não mudou, e isso é de propósito: os temas prontos, a
   conferência de contraste, a prévia ao vivo e os três gradientes dependem dos
   `id` e dos `name` que estão lá. Trocar a marcação seria refazer também o
   JavaScript que funciona há meses. O que mudou foi a moldura - cartões, ritmo e
   a barra de salvar - e o resto é esta camada, presa a `.pnl-cl`.
   ============================================================================= */

/* A LINHA DO BOOTSTRAP VIRA UMA GRADE, e o motivo é o FLOAT.

   As colunas do Bootstrap 3 são floats. Dentro do cartão, a coluna do título
   flutuava à esquerda com a largura toda, e o campo seguinte - que não flutua
   nessa largura de tela - tinha o box inteiro por baixo dela mas as LINHAS DE
   TEXTO desviando do float. O rótulo do primeiro campo de cor saía espremido numa
   tira de 70px na borda direita, uma palavra por linha. Levei um tempo olhando
   para a largura da coluna, que estava certa: 432px.

   Numa grade não há float, e a coluna do título ocupa a faixa inteira. O
   `auto-fit` põe os campos lado a lado quando há espaço e empilha quando não há -
   dentro do editor, que é uma coluna de 460px, é sempre empilhado.

   SEIS FAIXAS FIXAS, E NÃO `auto-fit`. Tentei `minmax(240px, 1fr)` e depois
   `minmax(320px, 1fr)`, e as duas erram pelo mesmo motivo: o número de faixas
   passa a depender da largura da tela. Num monitor grande cabiam TRÊS, e o cartão
   de dois campos - título e subtítulo, fonte e arredondamento - ocupava duas e
   deixava a terceira vazia. Os campos tinham a mesma largura entre si e mesmo
   assim a linha não chegava à borda.

   Seis faixas reproduzem o que a marcação já diz: `col-lg-6` é metade, `col-lg-4`
   é um terço. É a grade do Bootstrap sem os floats dele - dois campos ficam 50% e
   50% em qualquer monitor.

   Abaixo de 760px tudo empilha, que é como o editor sempre vê esta tela: a coluna
   de ajustes tem 460px.

   E as margens negativas da `.row` saem: o cartão já tem 20px, e -15px de um lado
   davam um vão duplo. */
.pnl-cl .pnl-pub-cartao > .row {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 16px;
    margin-right: 0;
    margin-left: 0;
}

.pnl-cl .pnl-pub-cartao > .row > [class*='col-'] {
    float: none;
    width: auto;
    padding-right: 0;
    padding-left: 0;
    grid-column: span 6;
}

/* O título da seção e o que pede a largura inteira, em qualquer tamanho.

   ESTA REGRA VEM ANTES DA DE BAIXO, e a ordem é o que decide. Uma coluna do
   Bootstrap costuma carregar três classes - `col-lg-4 col-md-6 col-xs-12` - e
   ela casa com esta E com a das duas faixas. As duas pesam igual, então ganha a
   última escrita: com a ordem trocada, as colunas de um terço voltavam a ocupar
   a linha inteira. */
.pnl-cl .pnl-pub-cartao > .row > .col-lg-12,
.pnl-cl .pnl-pub-cartao > .row > .col-xs-12 { grid-column: span 6; }

@media (min-width: 760px) {
    .pnl-cl .pnl-pub-cartao > .row > .col-lg-6 { grid-column: span 3; }
    .pnl-cl .pnl-pub-cartao > .row > .col-lg-4 { grid-column: span 2; }
}

/* O TÍTULO DA SEÇÃO É O RÓTULO DO CARTÃO, e o risco embaixo dele sai.

   Ele existia para separar uma seção da seguinte numa página que era uma coluna
   só de campos. Agora quem separa é a borda do cartão, e duas linhas de divisão
   a 20px uma da outra é uma delas sobrando. */
.pnl-cl .pnl-secao {
    display: flex;
    align-items: center;
    gap: 2px;
    margin: 0 0 14px;
    padding: 0;
    border: 0;
    color: #9376a1;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.1px;
}

/* Os rótulos de campo: menores que o título da seção e maiores que a dica, que é
   a ordem em que se lê. */
.pnl-cl .inst-home-produtos {
    margin: 0 0 7px !important;
    color: #cdbcd6 !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
    letter-spacing: .2px;
    text-align: left !important;
}

/* Os campos de texto, de número e as listas. As propriedades zeradas são contra o
   `input { display: block; height: 50px; width: 100% }` solto do painel, o mesmo
   de sempre.

   A ALTURA VEM DE `--pnl-alt-campo`, E ELA ESTÁ AQUI, e não na regra que declara
   a medida, lá em cima. Escrevi primeiro `.pnl-cl .form-control:not(textarea)`
   naquele bloco e não pegou: este aqui tem `.pnl-cl input[type='text']`, que pesa
   o mesmo, e no empate vence o que vem depois no arquivo. Em vez de inventar um
   seletor mais pesado, a altura mora onde o resto do campo já mora. */
/* A LISTA DE TIPOS ERA `text` E `number`, E FALTAVA O RESTO.

   O campo de e-mail saiu BRANCO na tela de E-mail, com texto cinza: nenhuma
   regra do painel alcanca `input[type="email"]`, e ele caia num `input {
   background-color: hsl(var(--grooble)) }` do tema antigo, la em cima. A
   Stefanie viu: "fugiu do padrao do tema".

   NAO FOI A PRIMEIRA VEZ e nao seria a ultima: listar tipo por tipo quer dizer
   que o proximo campo de `tel`, `password` ou `date` nasce branco e so aparece
   quando alguem olha. Por isso sao DUAS regras:

     1. a lista explicita, aqui, que continua valendo e pesando o mesmo de
        sempre - mexer no peso dela quebraria os seletores que hoje a vencem,
        como o `width: 106px` do campo de data do Aviso;
     2. e uma REDE, logo abaixo, com `:where()` para nao pesar nada: ela pega
        qualquer `input` que nao seja caixa, bolinha, arquivo ou botao, e da o
        mesmo fundo escuro. Um tipo esquecido cai nela em vez de cair no tema
        antigo.

   `:where()` NAO SOMA ESPECIFICIDADE, e e isso que a torna segura: ela vence o
   `input` solto e perde para tudo o que este arquivo ja escreve depois. */
.pnl-cl .form-control,
.pnl-cl input[type='text'],
.pnl-cl input[type='number'],
.pnl-cl input[type='email'],
.pnl-cl input[type='tel'],
.pnl-cl input[type='url'],
.pnl-cl input[type='password'],
.pnl-cl input[type='search'],
.pnl-cl input[type='date'],
.pnl-cl input[type='time'],
.pnl-cl select.form-control {
    width: 100%;
    height: var(--pnl-alt-campo, 44px);
    min-height: 0;
    margin: 0;
    padding: 11px 13px;
    border: 1px solid rgba(231, 73, 231, .45);
    border-radius: 11px;
    background: rgba(255, 255, 255, .04);
    box-shadow: none;
    color: #fff;
    font-size: 13.5px;
    line-height: 1.4;
    text-align: left;
}

/* A REDE. Ver o comentario acima: `:where()` nao pesa, entao esta regra so
   alcanca o campo que nenhuma outra alcancou. */
.pnl-cl input:where(:not([type='checkbox'], [type='radio'], [type='file'],
                         [type='hidden'], [type='submit'], [type='button'],
                         [type='image'], [type='range'], [type='color'])) {
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(231, 73, 231, .45);
    border-radius: 11px;
    box-shadow: none;
    color: #fff;
}

.pnl-cl .form-control:focus {
    border-color: #e749e7 !important;
    box-shadow: none !important;
    outline: none;
}

/* A CAIXA DE VÁRIAS LINHAS FICA DE FORA DA ALTURA ÚNICA. `textarea` cresce com o
   texto, e prender a altura dela seria trocar um problema de alinhamento por um
   de leitura. */
.pnl-cl textarea.form-control { height: auto; }

/* A MESMA ALTURA DENTRO DO QUADRO DO EDITOR, e ela precisa ser dita de novo.

   O formulário do card pinta todo campo com
   `body.pnl-embutido input[type="text"] { height: auto; min-height: 42px }`, e
   esse seletor PESA MAIS que o desta tela: ele tem uma classe e um atributo na
   mesma coluna, e `.pnl-cl .form-control` tem duas classes. Empatam em duas, e o
   dele ainda leva dois elementos de desempate.

   Por isso o campo media 44px na tela cheia e 42px dentro do editor - a mesma
   tela, duas alturas, dependendo de onde estava aberta. */
body.pnl-embutido .pnl-cl .form-control:not(textarea),
body.pnl-embutido .pnl-cl input[type='text'],
body.pnl-embutido .pnl-cl input[type='number'],
body.pnl-embutido .pnl-cl select.form-control,
body.pnl-embutido .pnl-pub .pnl-seo-campo input,
body.pnl-embutido .pnl-pub .pnl-pub-campo input,
body.pnl-embutido .pnl-cor-ctrl .pnl-cc-hex,
body.pnl-embutido .pnl-quadro-hor-campo input,
body.pnl-embutido .pnl-quadro-hor-campo select {
    height: var(--pnl-alt-campo, 44px);
    min-height: var(--pnl-alt-campo, 44px);
}

body.pnl-embutido .pnl-cl textarea.form-control {
    height: auto;
    min-height: 42px;
}

/* Espaço entre um campo e o próximo dentro do mesmo cartão. O `.form-group` do
   Bootstrap traz 15px e as colunas empilham sem nada entre elas no celular. */
.pnl-cl .pnl-pub-cartao .form-group { margin-bottom: 16px; }
.pnl-cl .pnl-pub-cartao > .row > [class*='col-']:last-child .form-group { margin-bottom: 0; }

.pnl-cl .pnl-dica {
    display: block;
    margin-top: 7px;
    color: #9376a1;
    font-size: 12px;
    line-height: 1.5;
    text-align: left;
}

/* O select2 desenha a própria caixa por cima do <select>, e ela vinha clara.

   O TEXTO NO MEIO, e por `flex` e não por `line-height`. A caixa do select2 é
   dimensionada por altura fixa e o texto dentro dela por uma altura de linha
   herdada da biblioteca: qualquer fonte mais alta que a prevista - e esta lista
   é justamente de fontes diferentes, cada uma com a sua altura - saía encostada
   em cima. Centralizado por flex, a altura da letra deixa de importar. */
.pnl-cl .select2-container--default .select2-selection--single {
    display: flex;
    align-items: center;
    /* A ALTURA COMUM, E COM `!important`: o painel tem um
       `.select2-container--default .select2-selection--single { height: 40px
       !important }` solto, herdado do template, e contra `!important` só
       `!important`. A medida é a mesma de todo campo desta tela - ver
       `--pnl-alt-campo`. */
    height: var(--pnl-alt-campo, 44px) !important;
    padding: 0;
    border: 1px solid rgba(231, 73, 231, .45);
    border-radius: 11px;
    background: rgba(255, 255, 255, .04);
}

.pnl-cl .select2-container--default .select2-selection--single .select2-selection__rendered {
    padding: 0 30px 0 13px;
    color: #fff;
    font-size: 14px;
    line-height: normal;
}

.pnl-cl .select2-container--default .select2-selection--single .select2-selection__arrow {
    top: 0;
    height: 100%;
    right: 8px;
}

/* ---- OS CAMPOS DE COR ----

   O QUE ESTAVA FEIO ERA A ORDEM. O campo de gradiente mostrava primeiro o
   `linear-gradient(180deg, #1d1105 0%, ...)` escrito por extenso, num campo de
   texto largo, e só embaixo a faixa colorida com os marcadores. Quem chega para
   escolher uma cor lê código antes de ver cor.

   A ordem agora é a de olhar: a faixa com os marcadores, o resultado, e o código
   por último e pequeno - ele continua ali porque é por onde se cola um gradiente
   pronto, e porque é o que o formulário envia. */
.pnl-cl .pnl-pub-cartao .form-group:has(> .pnl-grapick) {
    display: flex;
    flex-direction: column;
}

.pnl-cl .form-group:has(> .pnl-grapick) > .inst-home-produtos { order: 1; }
.pnl-cl .form-group:has(> .pnl-grapick) > .pnl-grapick        { order: 2; }
.pnl-cl .form-group:has(> .pnl-grapick) > .pnl-cor-preview    { order: 3; }
.pnl-cl .form-group:has(> .pnl-grapick) > .form-control       { order: 4; }
.pnl-cl .form-group:has(> .pnl-grapick) > .pnl-dica           { order: 5; }

/* Os marcadores do Grapick ficam FORA da faixa: para cima, e para os lados.

   A folga em cima é para eles não caírem sobre o que estiver acima. A dos LADOS é
   porque cada marcador abre um `<input type="color">` de 30px centralizado nele:
   no marcador de 100% metade dessa caixa ficava fora do cartão, cortada pela
   borda. 16px de cada lado é o suficiente para os dois extremos caberem. */
.pnl-cl .pnl-grapick {
    height: 42px;
    margin: 10px 16px 0;
    border: 1px solid rgba(231, 73, 231, .28);
    border-radius: 10px;
    background: rgba(255, 255, 255, .04);
}

/* O resultado é uma FAIXA FINA, e não um segundo retângulo do tamanho do
   primeiro: eram dois blocos iguais, um em cima do outro, mostrando a mesma
   coisa. Ele fica porque é o único que responde quando alguém digita o código
   na mão, e porque se o Grapick não carregar ele é o que sobra. */
/* A CAIXINHA DE COR DE CADA MARCADOR NASCE ENCOSTADA NELE PELA ESQUERDA, e por
   isso a do marcador de 100% saía 30px para fora do cartão, cortada pela borda.

   Centralizada no marcador, ela passa a sair 15px para cada lado - e os 16px de
   folga lateral da faixa, logo acima, dão conta dos dois extremos. */
.pnl-cl .pnl-grapick input[type='color'] {
    transform: translateX(-50%);
}

.pnl-cl .pnl-cor-preview {
    height: 12px;
    margin-top: 8px;
    border: 0;
    border-radius: 6px;
}

.pnl-cl .pnl-cor-codigo {
    margin-top: 8px !important;
    padding: 8px 11px !important;
    color: #b9a5c6 !important;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace !important;
    font-size: 11.5px !important;
}

/* A COR CHAPADA VIRA UMA AMOSTRA, e não uma barra branca de ponta a ponta.

   O `<input type="color">` desenha um retângulo com a cor escolhida dentro de uma
   moldura do sistema. Em largura total, uma cor clara virava uma barra branca
   atravessando o cartão, e era a coisa mais chamativa da tela - mais que o
   gradiente logo acima, que é a escolha que importa. */
.pnl-cl input.form-control.pnl-cor {
    width: 84px;
    height: 40px;
    padding: 4px;
    border: 1px solid rgba(231, 73, 231, .28);
    border-radius: 10px;
    background: rgba(255, 255, 255, .04);
    cursor: pointer;
}

.pnl-cl input.form-control.pnl-cor::-webkit-color-swatch-wrapper { padding: 0; }

.pnl-cl input.form-control.pnl-cor::-webkit-color-swatch {
    border: 0;
    border-radius: 7px;
}

.pnl-cl input.form-control.pnl-cor::-moz-color-swatch {
    border: 0;
    border-radius: 7px;
}

/* ---- A LISTA DE CORES ----

   Eram quatro blocos de largura inteira por cor - faixa, resultado, código e
   dica - vezes oito cores. Uma parede de retângulos coloridos em que nada tinha
   nome à vista e tudo tinha o mesmo peso.

   Agora cada cor é uma linha de 52px: a amostra, o nome, o valor. O editor abre
   embaixo quando se pede, um de cada vez. */
.pnl-cl .pnl-cores {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.pnl-cl .pnl-cor-linha {
    position: relative;
    border: 1px solid rgba(231, 73, 231, .16);
    border-radius: 12px;
    background: rgba(255, 255, 255, .025);
}

.pnl-cl .pnl-cor-aberta {
    border-color: rgba(231, 73, 231, .4);
    background: rgba(231, 73, 231, .06);
}

/* A AMOSTRA É O BOTÃO, e o botão é a linha inteira: clicar na cor para mexer na
   cor é o gesto que a pessoa tenta antes de procurar um botão. O `padding-right`
   abre espaço para o "i", que fica por cima, fora do botão - um <button> dentro
   de outro <button> não é HTML válido. */
.pnl-cl .pnl-cor-abrir {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    margin: 0;
    padding: 9px 46px 9px 10px;
    border: 0;
    border-radius: 12px;
    background: none;
    text-align: left;
    cursor: pointer;
}

.pnl-cl .pnl-cor-abrir:hover { background: rgba(255, 255, 255, .03); }

.pnl-cl .pnl-cor-abrir:focus-visible {
    outline: 2px solid #e749e7;
    outline-offset: -2px;
}

/* O XADREZ POR BAIXO: a cor vem por cima, e onde ela for transparente - ou onde
   ainda não houver cor nenhuma - aparece o quadriculado, que é a convenção de
   "vazio". Sem ele, campo sem cor e campo com a cor do fundo ficam idênticos. */
.pnl-cl .pnl-cor-amostra {
    flex: 0 0 auto;
    width: 38px;
    height: 34px;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 9px;
    background-color: #2a1b33;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .25);
}

.pnl-cl .pnl-cor-txt {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.pnl-cl .pnl-cor-nome {
    color: #fff;
    font-size: 13px;
    font-weight: 600;
}

/* O valor em fonte de código, e cortado quando for um gradiente comprido: ele é
   uma conferência de relance, não um texto para ler. */
.pnl-cl .pnl-cor-valor {
    overflow: hidden;
    color: #9376a1;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 10.5px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pnl-cl .pnl-cor-seta {
    flex: 0 0 auto;
    margin-left: auto;
    width: 8px;
    height: 8px;
    border-right: 1.6px solid #8d6f9c;
    border-bottom: 1.6px solid #8d6f9c;
    transform: rotate(45deg) translate(-2px, -2px);
    transition: transform .16s ease;
}

.pnl-cl .pnl-cor-aberta .pnl-cor-seta { transform: rotate(-135deg) translate(-3px, -3px); }

/* O "i" mora FORA do botão, por cima dele: `<button>` dentro de `<button>` não
   é HTML válido, e o navegador desmonta a marcação sozinho quando encontra. */
.pnl-cl .pnl-cor-ajuda {
    position: absolute;
    top: 50%;
    right: 14px;
    transform: translateY(-50%);
}

.pnl-cl .pnl-cor-aberta .pnl-cor-ajuda { top: 26px; }

.pnl-cl .pnl-cor-editor {
    padding: 2px 12px 14px;
}

.pnl-cl .pnl-cor-contraste {
    margin-top: 8px;
    font-size: 12px;
    line-height: 1.3;
}

/* Dentro da linha o campo de cor chapada ocupa a largura toda: ali ele já está
   num editor aberto de propósito, e não disputa atenção com mais nada. */
.pnl-cl .pnl-cor-editor input.form-control.pnl-cor {
    width: 100%;
    height: 44px;
}

/* =============================================================================
   O SELETOR DE COR E DE DEGRADÊ (admin/library/js/cor.js)

   Tudo desenhado aqui, e nada do sistema operacional: o `<input type="color">`
   abria a janela branca do Windows por cima de um painel escuro, e era a única
   peça da ferramenta que não parecia dela.
   ============================================================================= */

.pnl-cor-ctrl {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* ---- as duas abas ---- */
.pnl-cor-ctrl .pnl-cc-tipos {
    display: flex;
    gap: 4px;
    padding: 3px;
    border-radius: 10px;
    background: rgba(255, 255, 255, .05);
}

.pnl-cor-ctrl .pnl-cc-tipos[hidden] { display: none; }

.pnl-cor-ctrl .pnl-cc-tipo {
    flex: 1 1 0;
    width: auto;
    margin: 0;
    padding: 7px 8px;
    border: 0;
    border-radius: 8px;
    background: none;
    color: #b9a5c6;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

.pnl-cor-ctrl .pnl-cc-tipo-on {
    background: linear-gradient(135deg, #7a2a9e 0%, #e749e7 100%);
    color: #fff;
}

/* ---- a faixa das paradas ----

   A faixa tem margem dos lados porque os marcadores ficam CENTRADOS na posição
   deles: o de 0% e o de 100% saíam metade para fora. */
.pnl-cor-ctrl .pnl-cc-faixa {
    position: relative;
    height: 26px;
    margin: 0 9px 14px;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 8px;
}

.pnl-cor-ctrl .pnl-cc-paradas {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

.pnl-cor-ctrl .pnl-cc-parada {
    position: absolute;
    top: 50%;
    width: 16px;
    height: 16px;
    margin: 0;
    padding: 0;
    border: 2px solid #fff;
    border-radius: 50%;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .5);
    transform: translate(-50%, -50%);
    cursor: grab;
}

/* A parada que está sendo editada cresce e ganha o anel do painel: sem isso,
   com três ou quatro paradas, não dá para saber qual delas o quadrado de cor
   logo abaixo está mexendo. */
.pnl-cor-ctrl .pnl-cc-parada-on {
    width: 20px;
    height: 20px;
    box-shadow: 0 0 0 2px #e749e7;
}

.pnl-cor-ctrl .pnl-cc-linha {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.pnl-cor-ctrl .pnl-cc-mini {
    width: auto;
    margin: 0;
    padding: 6px 11px;
    border: 1px solid rgba(231, 73, 231, .3);
    border-radius: 8px;
    background: rgba(255, 255, 255, .045);
    color: #cdbcd6;
    font-size: 11.5px;
    font-weight: 600;
    cursor: pointer;
}

.pnl-cor-ctrl .pnl-cc-mini:hover:not(:disabled) {
    border-color: rgba(231, 73, 231, .55);
    color: #fff;
}

.pnl-cor-ctrl .pnl-cc-mini:disabled { opacity: .4; cursor: default; }

.pnl-cor-ctrl .pnl-cc-ang {
    display: flex;
    align-items: center;
    gap: 7px;
    flex: 1 1 150px;
    min-width: 0;
    margin: 0;
    color: #9376a1;
    font-size: 11.5px;
    font-weight: 600;
}

.pnl-cor-ctrl .pnl-cc-ang-campo {
    flex: 1 1 auto;
    width: auto;
    height: 4px;
    min-width: 60px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 3px;
    background: rgba(255, 255, 255, .16);
    accent-color: #e749e7;
    cursor: pointer;
}

.pnl-cor-ctrl .pnl-cc-ang-val {
    flex: 0 0 auto;
    color: #cdbcd6;
    font-variant-numeric: tabular-nums;
}

/* ---- o quadrado de saturação e claridade ----

   A cor pura vem do `background-color`, posto pelo JavaScript. Por cima, duas
   camadas: branco da esquerda para a direita e preto de cima para baixo. É a
   receita de sempre, e ela funciona porque as duas se somam. */
.pnl-cor-ctrl .pnl-cc-quadro {
    position: relative;
    height: 132px;
    border-radius: 10px;
    background-image:
        linear-gradient(to top, #000, transparent),
        linear-gradient(to right, #fff, transparent);
    cursor: crosshair;
    touch-action: none;
}

.pnl-cor-ctrl .pnl-cc-matiz {
    position: relative;
    height: 14px;
    border-radius: 7px;
    background: linear-gradient(to right,
        #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%);
    cursor: crosshair;
    touch-action: none;
}

/* O alvo é o mesmo nos dois, e ele NÃO recebe eventos: com `pointer-events` o
   arrasto parava quando o dedo passava por cima do próprio marcador. */
.pnl-cor-ctrl .pnl-cc-alvo {
    position: absolute;
    top: 50%;
    width: 14px;
    height: 14px;
    border: 2px solid #fff;
    border-radius: 50%;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .6);
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.pnl-cor-ctrl .pnl-cc-hex {
    width: 100%;
    height: auto;
    margin: 0;
    padding: 9px 12px;
    border: 1px solid rgba(231, 73, 231, .45);
    border-radius: 10px;
    background: rgba(255, 255, 255, .04);
    color: #fff;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12.5px;
    text-align: left;
    text-transform: lowercase;
}

.pnl-cor-ctrl .pnl-cc-hex:focus {
    border-color: #e749e7 !important;
    box-shadow: none !important;
    outline: none;
}

/* ---- O QUADRO DE HORARIOS, na tela de Horarios ----

   O titulo e a posicao do quadro vieram de Cores e letra em 24/09. Sao dois
   campos soltos no alto de uma listagem, e sem moldura eles pareceriam parte do
   formulario de cadastrar horario, que vem logo abaixo. */
.pnl-quadro-hor {
    margin-bottom: 18px;
    padding: 16px 18px;
    border: 1px solid rgba(231, 73, 231, .18);
    border-radius: 14px;
    background: rgba(255, 255, 255, .025);
}

.pnl-quadro-hor-campos {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 12px;
}

.pnl-quadro-hor-campo {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1 1 220px;
    min-width: 0;
    margin: 0;
    font-weight: 400;
}

.pnl-quadro-hor-campo > span {
    color: #cdbcd6;
    font-size: 12.5px;
    font-weight: 600;
}

/* As propriedades zeradas sao contra o `input { display:block; height:50px;
   width:100% }` solto do painel, o mesmo de sempre. */
.pnl-quadro-hor-campo input,
.pnl-quadro-hor-campo select {
    width: 100%;
    height: 42px;
    margin: 0;
    padding: 0 12px;
    border: 1px solid rgba(231, 73, 231, .45);
    border-radius: 10px;
    background: rgba(255, 255, 255, .04);
    color: #fff;
    font-size: 13.5px;
}

.pnl-quadro-hor-campo input:focus,
.pnl-quadro-hor-campo select:focus {
    border-color: #e749e7 !important;
    box-shadow: none !important;
    outline: none;
}

.pnl-quadro-hor-btn {
    flex: 0 0 auto;
    width: auto;
    height: 42px;
    margin: 0;
    padding: 0 20px;
    border: 0;
    border-radius: 10px;
    background: linear-gradient(135deg, #7a2a9e 0%, #e749e7 100%);
    color: #fff;
    font-size: 13.5px;
    font-weight: 600;
}

.pnl-quadro-hor .pnl-dica {
    display: block;
    margin-top: 10px;
    color: #9376a1;
    font-size: 12px;
    line-height: 1.5;
}

.pnl-pub .pnl-pub-alerta-morno {
    border-left-color: #ffb547;
    background: rgba(255, 181, 71, .1);
    color: #f0d5ac;
}

.pnl-pub .pnl-pub-alerta a { color: #f0c8ff !important; text-decoration: underline !important; }

/* ---- a prévia do WhatsApp ----

   Ela imita o cartão que o WhatsApp desenha, e por isso é CLARA: é assim que
   ele aparece lá, e pintá-la de escuro faria a prévia mentir sobre a única
   coisa que ela existe para mostrar. */
.pnl-pub .pnl-pub-previa {
    max-width: 340px;
    overflow: hidden;
    border-radius: 12px;
    background: #fff;
}

.pnl-pub .pnl-pub-previa-img {
    height: 168px;
    background-size: cover;
    background-position: center;
}

.pnl-pub .pnl-pub-previa-vazia {
    display: flex;
    align-items: center;
    justify-content: center;
    background: repeating-linear-gradient(45deg, #f2f2f2, #f2f2f2 10px, #e9e9e9 10px, #e9e9e9 20px);
    color: #9a9a9a;
    font-size: 13px;
}

.pnl-pub .pnl-pub-previa-txt { padding: 11px 14px 13px; }

.pnl-pub .pnl-pub-previa-titulo {
    color: #111;
    font-size: 14px;
    font-weight: 700;
}

.pnl-pub .pnl-pub-previa-url {
    margin-top: 2px;
    color: #7a7a7a;
    font-size: 12px;
    word-break: break-all;
}

/* Em coluna estreita o QR e o endereço empilham, e o QR ocupa a largura toda
   em vez de ficar um selo de 148px perdido no alto. */
@media (max-width: 560px) {
    .pnl-pub-qr,
    .pnl-qr { width: 100%; }
    .pnl-qr { height: auto; aspect-ratio: 1 / 1; }
}

/* #9a9a9a sobre o cinza do card dava 1,99:1 - e este numero existe para ser
   lido enquanto se digita. */
.pnl-aviso-conta {
    float: right;
    font-variant-numeric: tabular-nums;
    color: #6b6b6b;
}

/* Acima de 90 caracteres a faixa ja corta com reticencias num celular de
   390px. Nao e erro - e o aviso de que o recado nao vai caber inteiro. */
.pnl-aviso-conta-cheio {
    color: #b0121f;
    font-weight: 600;
}

.pnl-aviso-datas {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

.pnl-aviso-datas > label {
    flex: 0 1 190px;
    margin: 0;
    font-weight: 400;
}

/* -------- a previa --------
   Imita o topo da pagina do cliente: a faixa e tres blocos cinza no lugar do
   conteudo. Nao precisa ser igual - precisa mostrar ONDE a faixa aparece e se
   o texto cabe numa linha. */
.pnl-aviso-previa {
    width: 420px;
    max-width: 100%;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    overflow: hidden;
}

.pnl-aviso-faixa {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 14px;
    background: #e0a52a;
    color: #3a2a00;
    font-size: 13px;
    font-weight: 700;
}

/* Uma linha, como no site. E a previa so serve se mentir o minimo. */
.pnl-aviso-faixa > span:last-child {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pnl-aviso-corpo {
    display: flex;
    flex-direction: column;
    gap: 9px;
    padding: 16px 14px;
    background: #16233a;
}

.pnl-aviso-corpo > span {
    display: block;
    height: 12px;
    border-radius: 4px;
    background: rgba(255, 255, 255, .13);
}

/* -----------------------------------------------------------------------------
   CAMPO COM ERRO
   Ver admin/class/functions.Formulario.php.

   O painel sempre mostrou erro so num bloco vermelho no topo: dizia O QUE
   estava errado e nao ONDE. Numa tela de seis campos ainda se acha; numa de
   vinte, nao. A marca no campo e o que faltava.

   A BORDA NAO E A UNICA PISTA: vem com a frase embaixo. Cor sozinha nao serve
   a quem nao distingue vermelho, e "campo com borda diferente" nao diz por que.
   ----------------------------------------------------------------------------- */
.pnl-campo-erro,
input.pnl-campo-erro,
textarea.pnl-campo-erro,
select.pnl-campo-erro {
    border-color: #b0121f;
    background-color: rgba(176, 18, 31, .04);
}

.pnl-campo-erro:focus {
    border-color: #b0121f;
    box-shadow: 0 0 0 3px rgba(176, 18, 31, .14);
}

.pnl-erro-campo {
    display: block;
    margin-top: 6px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.45;
    color: #b0121f;
}

/* O triangulo de atencao antes da frase: mais um sinal alem da cor. */
.pnl-erro-campo::before {
    content: "\26A0";
    margin-right: 6px;
    font-weight: 400;
}

/* ============================================================================
   OS AVISOS E AS CONFIRMAÇÕES, NO TEMA DO PAINEL

   O SweetAlert vinha com o tema de fábrica: fundo branco, título preto, botão
   azul. Num painel escuro ele chegava como uma janela de outro programa - e a
   confirmação de excluir é justamente o momento em que a pessoa precisa
   reconhecer onde está.

   TUDO AQUI, E NADA NAS CHAMADAS. São dezenas de telas chamando `Swal.fire` e
   o helper `swal()`; retematizar uma por uma seria retematizar de novo a cada
   tela nova. O que saiu das chamadas foram só as cores passadas à mão
   (`confirmButtonColor`), porque elas viram `style=` no botão e ganham de
   qualquer folha.

   TODO SELETOR AQUI COMEÇA COM `.swal2-container`, E ISSO NÃO É ENFEITE. Duas diferenças que importam: o conteúdo é
   `.swal2-content` (na v9 virou `.swal2-html-container`), e o ícone se pede
   com `type:` (na v9, `icon:`). Ver também a armadilha do `r.value`.
   ============================================================================ */

/* O fundo escurece mais do que o padrão: sobre um painel já escuro, o véu
   claro de fábrica quase não separava a janela do que está atrás. */
.swal2-container {
    background: rgba(10, 5, 14, .74) !important;
}

/* A JANELA NASCIA COM 320px, E NINGUÉM ESCOLHEU ISSO.

   O SweetAlert pede `width: 32em`, contando com os 16px de raiz que todo
   navegador tem de fábrica. O Bootstrap 3 deste painel tem
   `html { font-size: 10px }` - a receita antiga do "1rem = 10px" - e 32em
   viraram 320px em vez dos 512px que a biblioteca desenhou.

   Nessa largura os dois botões não cabiam lado a lado: eles empilhavam, o de
   cancelar ficava por último e maior que o de confirmar, e a janela inteira
   virava uma coluna estreita. Era isso o "modal feio", e não as cores.

   A largura vai em PIXEL de propósito: em `em` ela volta a depender de uma
   raiz que não é nossa. */
.swal2-container .swal2-popup {
    width: 460px;
    max-width: calc(100vw - 32px);
    padding: 30px 28px 24px;
    border: 1px solid rgba(231, 73, 231, .28);
    border-radius: 16px;
    background: #1b0f24;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .6);
    font-family: "Poppins", sans-serif;
}

.swal2-container .swal2-title {
    color: #fff;
    font-size: 19px;
    font-weight: 700;
    line-height: 1.35;
}

.swal2-container .swal2-content {
    color: #cdbcd6;
    font-size: 13.5px;
    font-weight: 400;
    line-height: 1.6;
}

.swal2-container .swal2-content b { color: #f0c8ff; font-weight: 600; }

.swal2-container .swal2-close {
    color: #9376a1;
}

.swal2-container .swal2-close:hover { color: #fff; }

/* ---- os botões ---- */

.swal2-container .swal2-actions {
    gap: 10px;
    margin-top: 26px;
}

/* O `width: auto` é contra o `button { width: 100% }` solto do painel, que
   alcança os botões do alerta como alcança todos os outros. Cheios, os dois
   empilhavam um sobre o outro e a janela virava uma coluna - com o botão de
   confirmar do tamanho do de cancelar, lado nenhum ajudando a escolher. */
.swal2-container .swal2-styled {
    width: auto;
    min-width: 118px;
    margin: 0;
    padding: 13px 24px;
    border: 1px solid transparent;
    border-radius: 11px;
    font-size: 13.5px;
    font-weight: 600;
    letter-spacing: .2px;
    box-shadow: none;
    transition: filter .16s ease, background .16s ease, border-color .16s ease, color .16s ease;
}

/* O FOCO PRECISA DE `!important`, E ISSO NÃO É PREGUIÇA.

   O painel tem um `button:focus { border-color: #212A3E !important; box-shadow:
   inset 0 1px 1px ..., 0 0 8px rgba(0,0,0,.6) !important }` solto, do template
   de onde ele nasceu. O SweetAlert dá foco ao botão de confirmar assim que
   abre, então TODO alerta abria com o botão principal cercado por um contorno
   azul-marinho e uma sombra preta de 8px - e era isso que fazia a janela
   parecer de outro programa mesmo já estando nas cores certas.

   Contra `!important` só `!important`. O seletor é o mais fechado possível
   para não alcançar botão nenhum fora do alerta. */
.swal2-container .swal2-styled:focus {
    outline: none !important;
    border-color: rgba(255, 255, 255, .24) !important;
    box-shadow: 0 0 0 2px #1b0f24, 0 0 0 4px #e749e7 !important;
}

/* O ANEL ACOMPANHA O BOTÃO VERMELHO, que agora é o cancelar. Um anel de uma
   cor em volta de um botão de outra é um botão que parece de duas cores. */
.swal2-container .pnl-alerta-perigo .swal2-cancel.swal2-styled:focus {
    border-color: rgba(255, 170, 170, .5) !important;
    box-shadow: 0 0 0 2px #1b0f24, 0 0 0 4px #e0344a !important;
}

/* O GRADIENTE VAI EM `background-image`, E A COR SÓLIDA EM `background-color`.

   A biblioteca tem
   `.swal2-styled:hover { background-image: linear-gradient(rgba(0,0,0,.1), ...) }`.
   Escrito com o atalho `background`, o meu gradiente virava background-image e
   a cor de fundo ia para transparente - aí o hover trocava a única camada que
   restava e o botão ficava OCO, com o texto branco boiando. Foi o que a
   Stefanie viu passando o mouse no Excluir.

   Separando as duas, a cor sólida fica de piso: mesmo que alguém troque a
   imagem de fundo, o botão continua sendo um botão. E o hover abaixo devolve
   o gradiente por cima. */
.swal2-container .swal2-confirm.swal2-styled {
    background-color: #9a2fbd;
    background-image: linear-gradient(135deg, #7a2a9e 0%, #e749e7 100%);
    color: #fff;
}

/* `.swal2-actions` NO SELETOR, E ELE É NECESSÁRIO.

   A regra da biblioteca é
   `.swal2-actions:not(.swal2-loading) .swal2-styled:hover` - quatro classes,
   exatamente o peso que os meus tinham. Empate, e a folha dela entra depois:
   o hover dela vencia e punha um preto translúcido por cima do gradiente.
   Com `.swal2-actions` aqui são cinco, e a disputa acaba. */
.swal2-container .swal2-actions .swal2-confirm.swal2-styled:hover {
    background-image: linear-gradient(135deg, #8d31b6 0%, #f062f0 100%);
}

/* O cancelar é discreto de propósito: ele é a saída, não a ação. Dois botões
   cheios lado a lado fazem a pessoa parar para ler qual é qual. */
.swal2-container .swal2-cancel.swal2-styled {
    border-color: rgba(231, 73, 231, .26);
    background-color: rgba(255, 255, 255, .045);
    background-image: none;
    color: #cdbcd6;
}

/* `background-image: none` também aqui: sem ele o hover da biblioteca põe o
   preto translúcido dela por cima e o botão escurece em vez de clarear. */
.swal2-container .swal2-actions .swal2-cancel.swal2-styled:hover {
    border-color: rgba(231, 73, 231, .5);
    background-color: rgba(231, 73, 231, .14);
    background-image: none;
    color: #fff;
}

/* O VERMELHO É DO CANCELAR, E A ESCOLHA É DA STEFANIE.

   Estava no contrário, que é a convenção de quem desenha software: vermelho
   no botão que faz a coisa sem volta. A leitura dela é a de quem usa, "o povo
   associa vermelho a cancelar", e são 35 contas de gente que não desenha
   software. Entre a convenção e o público, o público.

   O botão que age fica com o roxo do painel, o mesmo de qualquer confirmar. O
   vermelho só aparece em alerta de perigo, então ele continua sendo o sinal de
   que há algo sem volta na mesa - mudou de lado, não de significado.

   Quem pede o alerta assim é a própria chamada, com
   `customClass: "pnl-alerta-perigo"`. Na v8 o `customClass` é uma string e vai
   no POPUP - por isso o seletor desce dele até o botão, e não é uma classe no
   botão.

   Um vermelho mais fundo e menos saturado que o de sinal de trânsito: ele
   precisa parar a pessoa, não gritar com ela. Cor sólida e gradiente
   separados, pelo mesmo motivo do botão roxo. */
.swal2-container .pnl-alerta-perigo .swal2-cancel.swal2-styled {
    border-color: rgba(255, 138, 138, .38);
    background-color: #a02235;
    background-image: linear-gradient(135deg, #7d1526 0%, #b8263c 100%);
    color: #fff;
}

.swal2-container .swal2-actions .pnl-alerta-perigo .swal2-cancel.swal2-styled:hover,
.swal2-container .pnl-alerta-perigo .swal2-actions .swal2-cancel.swal2-styled:hover {
    border-color: rgba(255, 170, 170, .62);
    background-color: #a02235;
    background-image: linear-gradient(135deg, #8f1a2c 0%, #cf2d45 100%);
    color: #fff;
}

.swal2-container .pnl-alerta-perigo .swal2-cancel.swal2-styled:focus {
    box-shadow: 0 0 0 2px #1b0f24, 0 0 0 4px #e0344a;
}

/* ---- os ícones ----

   As cores de fábrica foram escolhidas para fundo branco: o amarelo do aviso
   e o verde do sucesso somem sobre roxo escuro. */

.swal2-container .swal2-icon.swal2-warning { border-color: rgba(255, 181, 71, .5); color: #ffb547; }
.swal2-container .swal2-icon.swal2-info    { border-color: rgba(126, 199, 255, .5); color: #7ec7ff; }
.swal2-container .swal2-icon.swal2-question{ border-color: rgba(217, 168, 234, .5); color: #d9a8ea; }

.swal2-container .swal2-icon.swal2-error { border-color: rgba(255, 123, 123, .5); }
.swal2-container .swal2-icon.swal2-error [class^="swal2-x-mark-line"] { background-color: #ff7b7b; }

.swal2-container .swal2-icon.swal2-success { border-color: rgba(87, 217, 163, .5); }
.swal2-container .swal2-icon.swal2-success .swal2-success-ring { border-color: rgba(87, 217, 163, .3); }
.swal2-container .swal2-icon.swal2-success [class^="swal2-success-line"] { background-color: #57d9a3; }

/* Estas três são MÁSCARAS: elas apagam pedaços do círculo durante a animação,
   pintando por cima com a cor do fundo. De fábrica são brancas, e sobre a
   janela escura viravam três riscos claros atravessando o ícone. */
.swal2-container .swal2-icon.swal2-success .swal2-success-circular-line-left,
.swal2-container .swal2-icon.swal2-success .swal2-success-circular-line-right,
.swal2-container .swal2-icon.swal2-success .swal2-success-fix {
    background-color: #1b0f24;
}

/* ---- o campo de texto, quando o alerta pergunta algo ---- */
.swal2-container .swal2-input,
.swal2-container .swal2-textarea,
.swal2-container .swal2-select {
    height: auto;
    padding: 11px 14px;
    border: 1px solid rgba(231, 73, 231, .22);
    border-radius: 10px;
    background: rgba(255, 255, 255, .04);
    box-shadow: none;
    color: #fff;
    font-size: 14px;
}

.swal2-container .swal2-input:focus,
.swal2-container .swal2-textarea:focus,
.swal2-container .swal2-select:focus {
    border-color: #e749e7;
    box-shadow: none;
}

.swal2-container .swal2-input::placeholder { color: #9376a1; }

.swal2-container .swal2-validation-message {
    border-radius: 10px;
    background: rgba(255, 92, 92, .14);
    color: #ff9a9a;
    font-size: 12.5px;
}

.swal2-container .swal2-validation-message::before {
    background: #e0344a;
    color: #fff;
}

/* ============================================================================
   O AVISO DE "SALVO", NO CANTO

   O `Base::mensagem()` escreve uma faixa do Bootstrap no meio da página:
   verde-clarinho, largura toda, empurrando o formulário para baixo. Dentro do
   editor, onde o formulário mora numa coluna estreita, ela empurrava os campos
   e ficava ocupando o alto até a pessoa rolar.

   Quem move a faixa para cá é o admin/library/js/recado.js. O HTML do servidor
   não mudou - são 25 telas chamando `mensagem()`, e sem JavaScript a faixa
   continua aparecendo, que é o certo para um recado que confirma gravação.
   ============================================================================ */
.pnl-recados {
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 1400;
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: min(340px, calc(100vw - 36px));
    pointer-events: none;
}

/* O CANTO DE BAIXO, e não o de cima: em cima ele cobriria o cabeçalho do
   editor e as abas, que é justamente onde a pessoa vai clicar em seguida. */
.pnl-recado {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 13px 12px 13px 15px;
    border: 1px solid rgba(231, 73, 231, .26);
    border-left: 3px solid #57d9a3;
    border-radius: 12px;
    background: #1f1129;
    box-shadow: 0 16px 40px rgba(0, 0, 0, .55);
    color: #e6d7ee;
    font-family: "Poppins", sans-serif;
    font-size: 13px;
    line-height: 1.5;
    pointer-events: auto;

    opacity: 0;
    transform: translateY(10px);
    transition: opacity .2s ease, transform .2s ease;
}

.pnl-recado-entra {
    opacity: 1;
    transform: translateY(0);
}

/* O erro tem mais o que dizer - ele lista os campos - e por isso pode crescer
   e rolar em vez de estourar a tela. */
.pnl-recado-erro {
    border-left-color: #ff7b7b;
    max-height: 60vh;
    overflow-y: auto;
}

.pnl-recado-txt { flex: 1 1 auto; min-width: 0; }

.pnl-recado-txt b { color: #ffb3b3; font-weight: 600; }

/* O `width: auto` e o `margin: 0` são contra o `button` solto do painel. */
.pnl-recado-x {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 7px;
    background: none;
    color: #9376a1;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    transition: background .14s ease, color .14s ease;
}

.pnl-recado-x:hover {
    background: rgba(231, 73, 231, .16);
    color: #fff;
}

/* Em tela de celular ele ocupa a largura, com respiro dos dois lados. */
@media (max-width: 520px) {
    .pnl-recados {
        right: 12px;
        left: 12px;
        bottom: 12px;
        width: auto;
    }
}

/* Quem prefere a tela parada não recebe o deslize. */
@media (prefers-reduced-motion: reduce) {
    .pnl-recado { transition: opacity .2s ease; transform: none; }
    .pnl-recado-entra { transform: none; }
}

/* ============================================================================
   AS ABAS TEMA E PUBLICAR: DUAS COLUNAS, E NÃO TRÊS

   Na aba Conteúdo são três porque ali há dois níveis - escolher a seção, depois
   o card. Aqui há um só: escolher a área. Uma terceira coluna existiria para
   ficar vazia.

   A coluna das áreas é mais larga que a das seções: o nome vem com uma linha de
   explicação embaixo, e "Compartilhamento" com "o que aparece quando alguém
   envia o seu link" não cabe em 232px sem quebrar em quatro linhas.
   ============================================================================ */
.pnl-ed-corpo-aba {
    grid-template-columns: 268px minmax(0, 1fr);
}

/* Com a prévia ligada ela entra como terceira coluna, e o miolo cede o espaço.
   372px é a largura de um celular de 360 mais a moldura - menos que isso e a
   prévia deixa de mostrar a página como ela é. */
@media (min-width: 1441px) {
    .pnl-ed-corpo-aba.pnl-ed-corpo-previa {
        grid-template-columns: 240px minmax(0, 1fr) 372px;
    }
}

/* Abaixo de 1441 a prévia desce e ocupa a largura toda, como na aba Conteúdo. */
@media (max-width: 1440px) {
    .pnl-ed-corpo-aba.pnl-ed-corpo-previa {
        grid-template-columns: 268px minmax(0, 1fr);
    }
}

/* Empilhado, a coluna das áreas vira uma fileira de atalhos no alto. */
@media (max-width: 900px) {
    .pnl-ed-corpo-aba,
    .pnl-ed-corpo-aba.pnl-ed-corpo-previa {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ---- cada área da coluna ---- */

/* `.pnl-ed-secao` já dá a superfície, o arredondamento e o estado de escolhida.
   O que muda aqui é o conteúdo: um ícone à esquerda e duas linhas de texto, em
   vez de um nome e um número. */
.pnl-ed-secao-area {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    padding: 12px 13px;
}

.pnl-ed-secao-area .pnl-ed-secao-icone {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    border-radius: 9px;
    background: rgba(231, 73, 231, .1);
    color: #d9a8ea;
}

.pnl-ed-secao-aqui.pnl-ed-secao-area .pnl-ed-secao-icone {
    background: rgba(255, 255, 255, .14);
    color: #fff;
}

.pnl-ed-secao-area .pnl-ed-secao-texto {
    display: block;
    min-width: 0;
}

/* A explicação em LINHA PRÓPRIA. Sem isto ela emenda no nome e os dois viram
   uma frase só - "Cores e letra As cores, a fonte e o fundo da página". */
.pnl-ed-secao-area small {
    display: block;
    margin-top: 2px;
    color: #9376a1;
    font-size: 11.5px;
    font-weight: 400;
    line-height: 1.4;
}

.pnl-ed-secao-aqui.pnl-ed-secao-area small { color: rgba(255, 255, 255, .72); }

/* O caminho para a tela antiga fica no pé da coluna, separado das áreas. */
.pnl-ed-tela-antiga {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid rgba(231, 73, 231, .12);
}

/* ---- o miolo ---- */

/* A coluna de ajustes da aba Conteúdo nasce estreita porque compete com a lista
   de cards. Aqui não há lista ao lado: o miolo é a tela inteira. */
.pnl-ed-ajustes-aba {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.pnl-ed-quadro-aba {
    flex: 1 1 auto;
    width: 100%;
    min-height: 720px;
    border: 0;
    border-radius: 0 0 14px 14px;
    background: #120a18;
}

/* Dentro do quadro das abas o conteúdo não precisa do recuo de 60px que a tela
   antiga usa para passar por baixo do cabeçalho do painel - aqui não há
   cabeçalho por cima. */
body.pnl-embutido-aba .pnl-embutido-corpo > div > .col-12:first-child { padding-top: 0 !important; }

/* O CAMPO DE TROCAR O ENDEREÇO, na tela de Publicar.

   Ele nasce fechado: trocar o endereço quebra todo link já compartilhado, e um
   campo de texto sempre editável ao lado de "Copiar o link" é um campo que
   alguém edita sem querer. */
.pnl-pub .pnl-pub-trocar { margin-top: 4px; }

/* `[hidden]` PERDE PARA QUALQUER `display` VINDO DE CLASSE.

   O `[hidden] { display: none }` do navegador vale (0,0,1), e
   `.pnl-pub .pnl-pub-linha { display: flex }` vale (0,2,0): o atributo não tem
   chance. A linha de olhar o endereço continuava na tela mesmo com `hidden`
   escrito nela, e quem abrisse o formulário com erro via DOIS endereços
   empilhados - um para olhar e um para escrever. Parecia campo duplicado.

   O atributo escrito duas vezes vale (0,3,0) e resolve sem `!important`. A
   regra é geral de propósito: dentro de `.pnl-pub`, `hidden` esconde, e não é
   preciso lembrar de escrever uma regra para cada elemento novo. */
.pnl-pub [hidden][hidden] { display: none; }

/* O prefixo do endereço e o campo dentro da MESMA moldura: eles são uma coisa
   só, e dois retângulos lado a lado fariam parecer que o site é um campo que a
   pessoa também pode mudar. */
/* O CAMPO OCUPA A LINHA INTEIRA, E OS BOTÕES FICAM EMBAIXO.

   Tentei os três lado a lado e não dá: o prefixo é o site inteiro, aqui já
   com 22 caracteres e em produção com mais, e ele não pode encolher - um
   endereço cortado no meio não se lê. Espremendo a linha, quem some é a
   parte que a pessoa escreve, que virou um buraco de 30px.

   Com `flex-basis: 100%` o campo toma a linha e os dois botões caem para a
   seguinte de propósito, em toda largura de tela. Fica igual em todo lugar,
   e o campo fica do tamanho de um campo. */
.pnl-pub .pnl-pub-campo {
    display: flex;
    align-items: center;
    flex: 1 1 100%;
    min-width: 0;
    margin: 0;
    padding: 0 0 0 14px;
    border: 1px solid rgba(231, 73, 231, .28);
    border-radius: 11px;
    background: rgba(255, 255, 255, .04);
    overflow: hidden;
}

.pnl-pub .pnl-pub-campo:focus-within { border-color: #e749e7; }

.pnl-pub .pnl-pub-campo-base {
    flex-shrink: 0;
    color: #9376a1;
    font-size: 14px;
    white-space: nowrap;
}

/* As quatro propriedades zeradas são contra o `input { display: block;
   height: 50px; width: 100%; margin-top: 8px }` solto do painel. */
.pnl-pub .pnl-pub-campo input {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    height: auto;
    margin: 0;
    padding: 12px 14px 12px 0;
    border: 0;
    background: none;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
}

.pnl-pub .pnl-pub-campo input:focus {
    border: 0 !important;
    box-shadow: none !important;
    outline: none;
}


/* =============================================================================
   CAIXA, BOLINHA E SELECT DO PAINEL - desenhados, nunca os do navegador
   -----------------------------------------------------------------------------
   A Stefanie mandou o print de um "Ligado" com a caixa BRANCA, do sistema, no
   meio de uma tela roxa: "quero sempre personalizado pelo tema, não o html cru".

   O CONTROLE NATIVO NÃO DÁ PARA TEMATIZAR DE VERDADE. `accent-color` pinta o
   miolo e mais nada, e basta outra folha de estilo mexer no `background` do
   `input` para o navegador desistir e desenhar o dele. Foi o que aconteceu: na
   minha bancada saía magenta, no painel dela saía branco, com as mesmas regras.
   Perseguir a diferença seria consertar o sintoma - o controle nativo é o que
   está errado.

   Aqui eles são DESENHADOS: `appearance: none` apaga o controle do sistema, e o
   tique e a seta são SVG embutido. Não há mais o que outra folha de estilo
   possa desfazer, e o resultado é igual em qualquer navegador.

   NO FIM DO ARQUIVO DE PROPÓSITO. Isto tem de vencer o Bootstrap, o
   bootstrap-select e o `input { }` sem dono lá de cima; com a mesma
   especificidade, quem vem depois ganha - e é a terceira vez neste projeto que
   um empate de CSS se resolve por ordem. Aqui a ordem trabalha a favor.

   O ESCOPO SÃO AS TELAS NOVAS: `.pnl-pub` e o corpo do quadro. As telas legadas
   continuam com o que sempre tiveram - trocar o controle delas de uma vez seria
   mexer em dez telas que ninguém pediu, num dia só.
   ============================================================================= */

.pnl-pub input[type="checkbox"],
.pnl-pub input[type="radio"],
body.pnl-embutido .pnl-embutido-corpo input[type="checkbox"],
body.pnl-embutido .pnl-embutido-corpo input[type="radio"] {
    -webkit-appearance: none;
            appearance: none;

    display: inline-block;
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    min-height: 0;
    margin: 0;
    padding: 0;

    border: 1.5px solid rgba(231, 73, 231, .5);
    border-radius: 5px;
    background: rgba(255, 255, 255, .05);
    box-shadow: none;
    cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease;
}

.pnl-pub input[type="radio"],
body.pnl-embutido .pnl-embutido-corpo input[type="radio"] { border-radius: 50%; }

.pnl-pub input[type="checkbox"]:hover,
.pnl-pub input[type="radio"]:hover,
body.pnl-embutido .pnl-embutido-corpo input[type="checkbox"]:hover,
body.pnl-embutido .pnl-embutido-corpo input[type="radio"]:hover {
    border-color: rgba(231, 73, 231, .85);
}

/* O tique é IMAGEM e não máscara: máscara usa o alfa do arquivo, e o tique
   branco sobre fundo transparente sumiria dentro do quadrado cheio. Já mordeu
   no visto verde da grade de redes, no mesmo dia. */
.pnl-pub input[type="checkbox"]:checked,
body.pnl-embutido .pnl-embutido-corpo input[type="checkbox"]:checked {
    border-color: #e749e7;
    background-color: #e749e7;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round' d='M3.5 8.5l3 3 6-6'/%3E%3C/svg%3E");
    background-size: 100%;
    background-position: center;
    background-repeat: no-repeat;
}

/* O miolo do radio é um gradiente radial, e não um pseudo-elemento: `<input>`
   não aceita ::before. */
.pnl-pub input[type="radio"]:checked,
body.pnl-embutido .pnl-embutido-corpo input[type="radio"]:checked {
    border-color: #e749e7;
    background: radial-gradient(circle, #e749e7 0 42%, transparent 46%);
}

.pnl-pub input[type="checkbox"]:focus-visible,
.pnl-pub input[type="radio"]:focus-visible,
body.pnl-embutido .pnl-embutido-corpo input[type="checkbox"]:focus-visible,
body.pnl-embutido .pnl-embutido-corpo input[type="radio"]:focus-visible {
    outline: 2px solid #e749e7;
    outline-offset: 2px;
}

.pnl-pub input[type="checkbox"]:disabled,
.pnl-pub input[type="radio"]:disabled,
body.pnl-embutido .pnl-embutido-corpo input[type="checkbox"]:disabled,
body.pnl-embutido .pnl-embutido-corpo input[type="radio"]:disabled {
    opacity: .45;
    cursor: not-allowed;
}

/* ---------------------------------------------------------------------------
   O SELECT

   A CAIXA DE OPÇÕES ABERTA CONTINUA SENDO A DO SISTEMA, e não dá para mudar
   isso sem trocar o `<select>` por uma lista de `<div>` com JavaScript. Isso
   custa o teclado, o leitor de tela e o seletor nativo do celular, que é bem
   melhor que qualquer lista que se escreva - e o projeto já tem o select2 para
   quando a lista precisa de busca.

   O que se pode tematizar é o CAMPO FECHADO, que é o que se vê o tempo todo, e
   é isso que está aqui: a seta do sistema sai e entra a nossa.
   --------------------------------------------------------------------------- */
.pnl-pub select:not([data-sem-tema]),
body.pnl-embutido .pnl-embutido-corpo select:not([data-sem-tema]) {
    -webkit-appearance: none;
            appearance: none;

    width: 100%;
    height: var(--pnl-alt-campo, 44px);
    min-height: 0;
    margin: 0;
    padding: 0 34px 0 13px;

    border: 1px solid rgba(231, 73, 231, .45);
    border-radius: 10px;
    background-color: rgba(255, 255, 255, .04);
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23cdbcd6' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' d='M4 6.5l4 4 4-4'/%3E%3C/svg%3E");
    background-size: 15px;
    background-position: right 12px center;
    background-repeat: no-repeat;
    box-shadow: none;

    color: #fff;
    font-size: 13.5px;
    cursor: pointer;
}

.pnl-pub select:not([data-sem-tema]):hover,
body.pnl-embutido .pnl-embutido-corpo select:not([data-sem-tema]):hover {
    border-color: rgba(231, 73, 231, .7);
}

.pnl-pub select:not([data-sem-tema]):focus,
body.pnl-embutido .pnl-embutido-corpo select:not([data-sem-tema]):focus {
    border-color: #e749e7;
    outline: none;
}

/* AS OPÇÕES PRECISAM DE COR DECLARADA. A lista aberta é desenhada pelo sistema
   e herda a cor do `<select>`: sem isto, no Windows, sai texto branco sobre
   fundo branco - a lista fica em branco e parece vazia. */
.pnl-pub select option,
body.pnl-embutido .pnl-embutido-corpo select option {
    background: #241630;
    color: #fff;
}

/* O select2 desenha o dele por cima e não é este: escondê-lo aqui deixaria a
   tela com dois campos, o nosso e o dele. */
.pnl-pub select.select2-hidden-accessible,
body.pnl-embutido .pnl-embutido-corpo select.select2-hidden-accessible {
    display: none !important;
}

/* =============================================================================
   CAMPO COM DATA QUE NÃO EXISTE
   -----------------------------------------------------------------------------
   Quem marca é o `data-valida.js`, ao sair do campo. A frase aparece embaixo, e
   não num resumo no topo: o erro tem de estar onde o olho já está.

   A BORDA VERMELHA NÃO É A ÚNICA MARCA. Ela não existe para quem usa leitor de
   tela e não serve a quem não distingue vermelho de cinza - por isso o script
   põe `aria-invalid` e escreve a frase, que é o que de fato informa. A cor é
   reforço.

   No fim do arquivo pelo mesmo motivo do bloco dos controles: tem de vencer o
   Bootstrap e o `input { }` sem dono lá de cima.
   ============================================================================= */

/* O `[type="text"]` ESTÁ AQUI PARA GANHAR DE UMA REGRA COM `!important`.

   `body.pnl-embutido input[type="text"]` declara a borda com `!important` e tem
   uma classe, um atributo e dois elementos. Um `.pnl-campo-ruim` com `!important`
   e menos que isso perde, e o campo errado continuava roxo como os outros.

   A lista é longa porque são três contextos - a tela cheia, o quadro e o resto -
   e em cada um a regra que se quer vencer é outra. Escrever um seletor curto e
   torcer foi o que me custou esta rodada. */
.pnl-pub input[type="text"].pnl-campo-ruim,
.pnl-pub input.pnl-campo-ruim,
body.pnl-embutido input[type="text"].pnl-campo-ruim,
body.pnl-embutido .pnl-embutido-corpo input.pnl-campo-ruim,
input[type="text"].pnl-campo-ruim,
input.pnl-campo-ruim {
    border-color: #ff7a7a !important;
    background-color: rgba(255, 92, 92, .09) !important;
}

.pnl-campo-recado {
    display: block;
    width: 100%;
    margin: 5px 0 0;
    color: #ff9d9d;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.35;
    text-align: left;
}

.pnl-campo-recado[hidden] { display: none; }

/* O RECADO OCUPA A LINHA INTEIRA. Ele é o último filho da linha - um `.pnl-avi-pe`
   no Aviso -, e essa linha é um flex: sem o `100%` ele ficaria ao lado do último
   campo em vez de embaixo de tudo. */
.pnl-pub .pnl-avi-pe { flex-wrap: wrap; }

.pnl-pub .pnl-avi-pe > .pnl-campo-recado { flex: 1 0 100%; margin-top: 2px; }

/* =============================================================================
   DADOS DA EMPRESA - a grade do endereço
   -----------------------------------------------------------------------------
   SEIS TRACOS, E OS CAMPOS OCUPAM O QUE PRECISAM. A tela antiga punha tudo em
   `col-lg-6`: a rua e o numero ficavam do mesmo tamanho, e o campo do numero
   tinha meia tela para escrever `6090`. Campo grande convida a escrever mais do
   que cabe ali.

   Numa grade de seis, a rua ocupa quatro e o numero dois; o CEP tambem dois. O
   resto pega tres, que e metade da linha. No celular todos viram uma coluna so.

   `.pnl-emp-campo` E UM <label>, e o rotulo esta DENTRO dele: assim clicar no
   texto poe o cursor no campo, sem precisar de `for` e `id` casados a mao em
   sete pares.
   ============================================================================= */
.pnl-pub .pnl-emp-grade {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 14px;
}

.pnl-pub .pnl-emp-campo {
    display: flex;
    flex-direction: column;
    gap: 6px;
    grid-column: span 3;
    margin: 0;
    font-weight: 400;
}

.pnl-pub .pnl-emp-campo-largo { grid-column: span 4; }
.pnl-pub .pnl-emp-campo-curto { grid-column: span 2; }

.pnl-pub .pnl-emp-campo > span {
    color: #cdbcd6;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: .2px;
}

/* `input` e `select` dividem a mesma medida, e isso e o `--pnl-alt-campo` de
   sempre: sete campos lado a lado com alturas diferentes foi o defeito que a
   Stefanie achou no subtitulo do card. */
.pnl-pub .pnl-emp-campo input,
.pnl-pub .pnl-emp-campo select {
    width: 100%;
    height: var(--pnl-alt-campo, 44px);
    min-height: 0;
    margin: 0;
}

/* O CODIGO DO MAPA E LONGO, e por isso e um `textarea`. A fonte monoespacada
   nao e enfeite: o que se cola ali e codigo, e num texto de 400 caracteres com
   aspas e barras a fonte de largura fixa e o que deixa conferir se o colado
   veio inteiro. */
.pnl-pub .pnl-emp-mapa {
    width: 100%;
    min-height: 84px;
    margin: 0;
    padding: 11px 13px;
    border: 1px solid rgba(231, 73, 231, .45);
    border-radius: 10px;
    background: rgba(255, 255, 255, .04);
    color: #fff;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12px;
    line-height: 1.5;
    resize: vertical;
}

.pnl-pub .pnl-emp-mapa:focus { border-color: #e749e7; outline: none; }

.pnl-pub .pnl-emp-mapa::placeholder { color: #8d6f9c; }

/* Abaixo de 700px a grade de seis vira uma coluna: em 360px, `span 2` daria um
   campo de 100px com o rotulo `Complemento` quebrado em tres linhas. */
@media (max-width: 700px) {
    .pnl-pub .pnl-emp-grade { grid-template-columns: 1fr; }

    .pnl-pub .pnl-emp-campo,
    .pnl-pub .pnl-emp-campo-largo,
    .pnl-pub .pnl-emp-campo-curto { grid-column: span 1; }
}

/* O envelope da tela de E-mail. Mesma medida e mesma cor do balaozinho do
   Contato: as duas telas sao a mesma coisa com outro campo. */
.pnl-pub .pnl-eml-icone {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    background-color: #cdbcd6;
    -webkit-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='m3 7 9 6 9-6'/%3E%3C/svg%3E") no-repeat center / contain;
            mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='m3 7 9 6 9-6'/%3E%3C/svg%3E") no-repeat center / contain;
}


/* =============================================================================
   A TELA NOVA OCUPA A AREA INTEIRA
   -----------------------------------------------------------------------------
   O respiro dos lados e o `padding` do `#conteudoAdm` do pre.php, que e igual
   nos dois lados. Aqui dentro nao ha margem nem largura maxima: o cartao vai de
   uma borda a outra da area de conteudo, que foi o que a Stefanie pediu -
   antes ele media 1016 numa area de 1280 e ficava encostado a direita.

   `min-width: 0` PORQUE ELA PODE VIRAR ITEM DE FLEX ou de grade um dia, e item
   de flex nao encolhe abaixo do conteudo sem isso - e o campo do mapa, que e
   monoespacado e longo, esticaria a tela inteira.
   ============================================================================= */
.pnl-tela {
    width: 100%;
    min-width: 0;
    max-width: none;
    margin: 0;
    padding: 0;
    float: none;
}

.pnl-tela > .pnl-cl {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
}


/* =============================================================================
   E-MAIL - uma linha por endereço, com os dois campos lado a lado
   -----------------------------------------------------------------------------
   O Contato empilha o nome e o telefone porque aquela tela abre na terceira
   coluna do editor, com uns 460px. Esta e de largura inteira, e ali empilhar so
   gasta altura.

   A GRADE E `auto 1fr 1fr auto`: o ícone e o X ocupam o que medem, e os dois
   campos dividem o que sobra em partes iguais. Com `1fr 1fr` de verdade, e não
   com `50%` - porcentagem aqui não desconta o ícone nem o X, e a linha passaria
   da borda.
   ============================================================================= */
.pnl-pub .pnl-eml-lista {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.pnl-pub .pnl-eml-linha {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
}

.pnl-pub .pnl-eml-linha > input {
    width: 100%;
    height: var(--pnl-alt-campo, 44px);
    min-height: 0;
    margin: 0;
}

.pnl-pub .pnl-eml-tirar { margin: 0; }

/* O erro atravessa a linha inteira: ao lado de um campo ele sairia quebrado em
   palavras de duas letras. */
.pnl-pub .pnl-eml-erro { grid-column: 1 / -1; }

/* Abaixo de 700px volta a empilhar, pelo mesmo motivo que o Contato empilha
   sempre: dois campos e um X numa linha de 360px dao 90px para cada. */
@media (max-width: 700px) {
    .pnl-pub .pnl-eml-linha {
        grid-template-columns: auto minmax(0, 1fr) auto;
    }

    .pnl-pub .pnl-eml-linha > input:nth-of-type(2) { grid-column: 1 / -1; }
}

/* A explicação do CEP ocupa o resto da primeira linha da grade do endereço, e
   é por isso que nenhum campo fica órfão ali. */
/* O RECADO DO CEP ATRAVESSA A GRADE INTEIRA, e so aparece quando ha o que
   dizer. Ao lado do campo ele saia curto e desalinhado - duas linhas de tres
   palavras num espaco de quatro tracos. Na largura toda, ele e uma frase. */
.pnl-pub .pnl-emp-dica {
    grid-column: 1 / -1;
    margin: -4px 0 0;
    color: #a98bb8;
    font-size: 12.5px;
    line-height: 1.4;
    text-align: left;
}

.pnl-pub .pnl-emp-dica-ruim { color: #ff9d9d; }

.pnl-pub .pnl-emp-dica[hidden] { display: none; }

@media (max-width: 700px) {
    .pnl-pub .pnl-emp-dica { grid-column: 1 / -1; }
}

/* =============================================================================
   TAG DE RASTREAMENTO
   -----------------------------------------------------------------------------
   A caixa é a mesma do código do mapa, e por o mesmo motivo: o que se cola ali
   é código, e numa fonte de largura fixa dá para conferir se veio inteiro. Só
   que esta é de doze linhas, porque o trecho do Google tem oito.
   ============================================================================= */
.pnl-pub .pnl-tag-onde {
    margin: 0 0 12px;
    color: #c6aed2;
    font-size: 13px;
    line-height: 1.55;
    text-align: left;
}

.pnl-pub .pnl-tag-onde code {
    padding: 1px 5px;
    border-radius: 5px;
    background: rgba(255, 255, 255, .07);
    color: #f0d9f7;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12px;
}

.pnl-pub .pnl-tag-codigo {
    width: 100%;
    /* O PISO E O TETO, e no meio quem manda e o conteudo: o script abaixo do
       formulario cresce a caixa ate caber o que esta dentro. Uma altura fixa
       erra nos dois sentidos - o snippet do Google tem oito linhas e rolava
       dentro de uma caixa de cinco, e um campo vazio ficava um retangulo
       enorme. */
    min-height: 170px;
    max-height: 60vh;
    margin: 0;
    padding: 12px 14px;
    border: 1px solid rgba(231, 73, 231, .45);
    border-radius: 11px;
    background: rgba(255, 255, 255, .04);
    color: #fff;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12.5px;
    line-height: 1.6;
    /* SEM QUEBRA DE LINHA AUTOMÁTICA. Um `<script>` numa linha só vira um
       parágrafo de seis linhas falsas, e aí ninguém enxerga onde o trecho
       realmente termina. Rola na horizontal, dentro da caixa. */
    white-space: pre;
    overflow-wrap: normal;
    overflow-x: auto;
    resize: vertical;
    tab-size: 2;
}

.pnl-pub .pnl-tag-codigo:focus { border-color: #e749e7; outline: none; }

.pnl-pub .pnl-tag-codigo::placeholder { color: #8d6f9c; }

/* ---- o que a tela reconheceu ---- */
.pnl-pub .pnl-tag-achados {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
}

.pnl-pub .pnl-tag-achados-tit {
    color: #c6aed2;
    font-size: 13px;
}

.pnl-pub .pnl-tag-selo {
    display: inline-flex;
    align-items: baseline;
    gap: 7px;
    padding: 5px 11px;
    border: 1px solid rgba(120, 231, 170, .45);
    border-radius: 999px;
    background: rgba(120, 231, 170, .1);
    color: #bff0d5;
    font-size: 12.5px;
    line-height: 1.4;
}

/* O NÚMERO NA FONTE DO CÓDIGO, porque é ele que se confere letra por letra
   contra a tela do Google - e `G-4XQ7BZ1TPL` numa fonte proporcional é onde o
   zero e a letra O ficam iguais. */
.pnl-pub .pnl-tag-selo b {
    color: #fff;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12px;
    font-weight: 600;
}

/* A tag que não mede mais nada não pode ter a mesma cor da que mede. */
.pnl-pub .pnl-tag-selo-velho {
    border-color: rgba(231, 176, 73, .5);
    background: rgba(231, 176, 73, .12);
    color: #f2d7a6;
}

.pnl-pub .pnl-tag-recado {
    margin: 12px 0 0;
    padding: 11px 14px;
    border: 1px solid rgba(231, 176, 73, .4);
    border-radius: 10px;
    background: rgba(231, 176, 73, .09);
    color: #f2d7a6;
    font-size: 13px;
    line-height: 1.6;
    text-align: left;
}

/* O cartão de abertura explica os três, e por isso não tem caixa nenhuma. */
.pnl-pub .pnl-tag-abre-txt {
    margin: 0;
    color: #c6aed2;
    font-size: 13.5px;
    line-height: 1.6;
    text-align: left;
}

/* O LUGAR VEM PRIMEIRO E EM DESTAQUE, porque é a única coisa que diferencia um
   campo do outro: três caixas iguais com três parágrafos iguais seriam três
   chances de colar no lugar errado. */
.pnl-pub .pnl-tag-onde-lugar {
    color: #f0d9f7;
    font-weight: 600;
}

/* O `<b>` DENTRO DESTES PARÁGRAFOS, contra o `form * { color: #5a5a5a }` solto
   do painel - que alcança qualquer descendente de um formulário e é mais
   específico do que a regra escrita no `<p>`. Sozinho, ele dava 2,7:1 sobre o
   cartão escuro: a palavra em negrito ficava MENOS legível do que a frase em
   volta, que é o contrário do que o negrito existe para fazer. */
.pnl-pub .pnl-tag-abre-txt b,
.pnl-pub .pnl-tag-onde b,
.pnl-pub .pnl-tag-recado b {
    color: #fff;
    font-weight: 600;
}

/* =============================================================================
   QUEM TEM ACESSO
   -----------------------------------------------------------------------------
   Dois desenhos numa tela só, porque a mesma tela mostra duas listas de tamanho
   muito diferente: o cliente vê uma, duas, três pessoas; o super admin vê todas
   as contas. Cartão para a curta, tabela para a longa.
   ============================================================================= */

/* ---- a busca, dentro do cartão da lista ---- */
.pnl-pub .pnl-acs-busca {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
}

.pnl-pub .pnl-acs-busca input {
    flex: 1 1 260px;
    min-width: 0;
    height: var(--pnl-alt-campo, 44px);
    min-height: 0;
    margin: 0;
}

.pnl-pub .pnl-acs-busca .pnl-pub-btn { flex: 0 0 auto; }

.pnl-pub .pnl-acs-limpar {
    background: transparent;
    color: #c6aed2;
}

/* ---- a lista curta: uma pessoa por linha ---- */
.pnl-pub .pnl-acs-lista {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.pnl-pub .pnl-acs-pessoa {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid rgba(255, 255, 255, .07);
    border-radius: 12px;
    background: rgba(255, 255, 255, .03);
}

/* A INICIAL, e não um ícone igual em todas as linhas: com três pessoas, a letra
   é o que diferencia uma da outra de relance. */
.pnl-pub .pnl-acs-inicial {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(231, 73, 231, .35), rgba(140, 73, 231, .35));
    color: #fff;
    font-size: 16px;
    font-weight: 700;
}

.pnl-pub .pnl-acs-quem {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 8px;
    min-width: 0;
}

.pnl-pub .pnl-acs-nome {
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
}

.pnl-pub .pnl-acs-nome:hover { color: #f0a6f0; text-decoration: underline; }

.pnl-pub .pnl-acs-dados {
    flex: 1 1 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 10px;
    color: #a98bb8;
    font-size: 12.5px;
}

.pnl-pub .pnl-acs-login {
    padding: 1px 6px;
    border-radius: 5px;
    background: rgba(255, 255, 255, .07);
    color: #f0d9f7;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12px;
}

/* O e-mail corta em vez de quebrar a linha: um endereço comprido empurraria os
   botões da direita para fora. */
.pnl-pub .pnl-acs-email {
    display: block;
    max-width: 100%;
    overflow: hidden;
    color: #a98bb8;
    font-size: 12.5px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pnl-pub .pnl-acs-selo {
    padding: 2px 9px;
    border: 1px solid rgba(120, 231, 170, .4);
    border-radius: 999px;
    background: rgba(120, 231, 170, .1);
    color: #bff0d5;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .3px;
    text-transform: uppercase;
}

.pnl-pub .pnl-acs-selo-fraco {
    border-color: rgba(255, 255, 255, .18);
    background: rgba(255, 255, 255, .06);
    color: #c6aed2;
}

/* ---- os botões de cada linha ---- */
.pnl-pub .pnl-acs-btn {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    height: 30px;
    padding: 0 12px;
    border: 1px solid rgba(231, 73, 231, .4);
    border-radius: 9px;
    background: rgba(231, 73, 231, .1);
    color: #f0d9f7;
    font-size: 12.5px;
    text-decoration: none;
    white-space: nowrap;
}

.pnl-pub .pnl-acs-btn:hover {
    border-color: #e749e7;
    color: #fff;
    text-decoration: none;
}

.pnl-pub .pnl-acs-btn-perigo {
    border-color: rgba(255, 138, 138, .35);
    background: rgba(255, 92, 92, .08);
    color: #ff9d9d;
}

.pnl-pub .pnl-acs-btn-perigo:hover { border-color: rgba(255, 138, 138, .7); color: #fff; }

/* O LUGAR DO X EXISTE MESMO VAZIO. Sem ele, a linha de quem não pode ser
   removido fica com os botões deslocados em relação às outras, e a coluna
   inteira desalinha. */
.pnl-pub .pnl-acs-tirar-nao {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    /* CINZA, MAS LEGIVEL. A #6d5a78 dava 2,81:1 sobre o cartao: nao era
       discreta, era invisivel - e ela carrega um `title` que explica por que o
       X esta apagado, que ninguem leria num caractere que nao se enxerga. */
    color: #9481a0;
    font-size: 18px;
    line-height: 1;
    cursor: not-allowed;
}

/* ---- a lista longa: a tabela de contas ---- */
.pnl-pub .pnl-acs-tabela {
    /* Rola dentro do cartão, e não a página: em 360px a tabela de cinco colunas
       não cabe de jeito nenhum, e é melhor arrastar a tabela do que a tela. */
    overflow-x: auto;
}

.pnl-pub .pnl-acs-tabela table {
    width: 100%;
    margin: 0;
    border-collapse: collapse;
}

.pnl-pub .pnl-acs-tabela th {
    padding: 0 12px 9px;
    border-bottom: 1px solid rgba(255, 255, 255, .09);
    color: #a98bb8;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .4px;
    text-align: left;
    text-transform: uppercase;
    white-space: nowrap;
}

.pnl-pub .pnl-acs-tabela td {
    padding: 11px 12px;
    border-bottom: 1px solid rgba(255, 255, 255, .05);
    color: #e3d2ea;
    font-size: 13.5px;
    text-align: left;
    vertical-align: middle;
}

.pnl-pub .pnl-acs-tabela tbody tr:last-child td { border-bottom: none; }

.pnl-pub .pnl-acs-tabela tbody tr:hover td { background: rgba(255, 255, 255, .025); }

.pnl-pub .pnl-acs-tabela .pnl-acs-nome { display: block; }

.pnl-pub .pnl-acs-slug {
    color: #f0a6f0;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12.5px;
    text-decoration: none;
}

.pnl-pub .pnl-acs-slug:hover { text-decoration: underline; }

.pnl-pub .pnl-acs-convidado { color: #c6aed2; font-size: 12.5px; }
.pnl-pub .pnl-acs-convidado b { color: #e3d2ea; }

/* O traco de "nao se aplica" continua sendo o mais apagado da tabela, mas
   legivel: a #6d5a78 dava 3:1, e uma celula que parece vazia quando na verdade
   diz "nao tem" e uma celula que mente. */
.pnl-pub .pnl-acs-vazio { color: #9481a0; }

/* NO AR / FORA DO AR EM PALAVRAS, e não só numa cor: "ativa" em verde e
   "desativada" em cinza contam a mesma coisa duas vezes para quem enxerga cor,
   e nenhuma vez para quem não enxerga. */
.pnl-pub .pnl-acs-sit {
    display: inline-block;
    padding: 3px 10px;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 999px;
    background: rgba(255, 255, 255, .05);
    color: #c6aed2;
    font-size: 11.5px;
    white-space: nowrap;
}

.pnl-pub .pnl-acs-sit-on {
    border-color: rgba(120, 231, 170, .4);
    background: rgba(120, 231, 170, .1);
    color: #bff0d5;
}

.pnl-pub .pnl-acs-col-acoes { width: 1%; }

.pnl-pub .pnl-acs-acoes {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    white-space: nowrap;
}

/* Abaixo de 700px a linha da lista curta vira duas: os botões descem para a
   linha de baixo em vez de espremer o nome em 80px. */
@media (max-width: 700px) {
    .pnl-pub .pnl-acs-pessoa {
        grid-template-columns: auto minmax(0, 1fr) auto;
    }

    .pnl-pub .pnl-acs-btn { grid-column: 2; justify-self: start; }
}

/* ---- a ficha de uma pessoa ----

   `auto-fit` com `minmax` no lugar das três montagens de linha que a tela
   legada fazia à mão conforme o nível de quem edita. Cada cartão tem dois, três
   ou um campo, e a grade acomoda os três casos sem ninguém contar colunas. */
.pnl-pub .pnl-acs-grade {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 14px 16px;
}

.pnl-pub .pnl-acs-campo {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
    margin: 0;
    font-weight: 400;
}

.pnl-pub .pnl-acs-campo > span:first-child {
    color: #c6aed2;
    font-size: 12.5px;
    text-align: left;
}

.pnl-pub .pnl-acs-campo input,
.pnl-pub .pnl-acs-campo select {
    width: 100%;
    height: var(--pnl-alt-campo, 44px);
    min-height: 0;
    margin: 0;
}

.pnl-pub .pnl-acs-campo small {
    /* #8d6f9c dava 4,33:1, a um passo do minimo. E a mesma cor do apoio do resto
       do painel, que passa por estar sobre fundo mais escuro - aqui o cartao e
       mais claro. */
    color: #a98bb8;
    font-size: 11.5px;
    line-height: 1.4;
    text-align: left;
}

/* O campo que ocupa a linha toda; sozinho numa grade de `auto-fit` ele já
   ocuparia, mas ao lado de outros precisa dizer. */
.pnl-pub .pnl-acs-campo-largo { grid-column: 1 / -1; }

/* O PREFIXO GRUDADO NO CAMPO, e não numa frase embaixo. O que se digita ali é
   só o pedaço final do link, e ver o começo colado é o que diz isso sem texto
   nenhum. O foco acende a borda do conjunto, e não a de um pedaço dele. */
.pnl-pub .pnl-acs-slug-campo {
    display: flex;
    align-items: stretch;
    min-width: 0;
    overflow: hidden;
    border: 1px solid rgba(231, 73, 231, .45);
    border-radius: 11px;
    background: rgba(255, 255, 255, .04);
}

.pnl-pub .pnl-acs-slug-campo:focus-within { border-color: #e749e7; }

.pnl-pub .pnl-acs-slug-fixo {
    display: flex;
    align-items: center;
    /* `0 0 auto`: O PREFIXO NAO ENCOLHE. Com `0 1 auto` ele cedia largura ao
       campo e saía cortado - `localhost:80`, sem o `88`. Um endereço cortado no
       meio parece um erro, e ele é justamente a parte que diz onde a página vai
       ficar. Quem cede largura agora é o campo, que rola. */
    flex: 0 0 auto;
    padding: 0 2px 0 13px;
    /* O prefixo e mais apagado do que o que se digita, e e para ser: ele nao se
       edita. Mas 3,95:1 e ilegivel, e ele e justamente a parte que diz onde a
       pagina vai ficar. */
    color: #a98bb8;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12.5px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pnl-pub .pnl-acs-slug-campo input {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0 13px 0 0;
    border: none;
    border-radius: 0;
    background: transparent;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 13px;
}

.pnl-pub .pnl-acs-slug-campo input:focus { border: none; box-shadow: none; outline: none; }

/* ---- o aviso de "já está em uso" ----

   Ele guarda a altura mesmo vazio: sem isso o campo pula uns 18px para baixo na
   primeira letra digitada, e o campo de baixo pula junto. */
.pnl-pub .pnl-acs-aviso {
    display: block;
    min-height: 17px;
    color: #a98bb8;
    font-size: 12px;
    line-height: 1.4;
    text-align: left;
}

.pnl-pub .pnl-acs-aviso-bom  { color: #8ce8b4; }
.pnl-pub .pnl-acs-aviso-ruim { color: #ff9d9d; }

/* O CAMPO DE ENDEREÇO NÃO ESTICA A LINHA INTEIRA. Sozinho no cartão, o
   `auto-fit` o fazia ocupar 1150px para caber um slug de vinte letras: um campo
   largo promete um texto longo, e quem olha para ele fica em dúvida sobre o que
   é para escrever ali. */
.pnl-pub .pnl-acs-campo-slug { max-width: 520px; }

/* =============================================================================
   O SELECT DESENHADO PELO PAINEL
   -----------------------------------------------------------------------------
   O `<select>` fechado dá para pintar; a LISTA que abre, não - ela é desenhada
   pelo sistema operacional, fora da página. Por isso o campo inteiro é
   desenhado aqui, e o `<select>` de verdade fica escondido dentro, mandando o
   valor no POST como sempre. Ver admin/library/js/pnl-select.js.
   ============================================================================= */
.pnl-sel {
    position: relative;
    width: 100%;
    min-width: 0;
}

/* O SELECT DE VERDADE NÃO É `display: none`. Escondido assim, ele sai do
   formulário em alguns navegadores e o campo deixa de ser enviado; e um
   `disabled` teria o mesmo efeito. Ele fica presente e sem tamanho. */
.pnl-sel .pnl-sel-nativo {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    padding: 0;
    border: 0;
    opacity: 0;
    pointer-events: none;
}

.pnl-sel-botao {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    height: var(--pnl-alt-campo, 44px);
    margin: 0;
    padding: 0 13px;
    border: 1px solid rgba(231, 73, 231, .45);
    border-radius: 11px;
    background: rgba(255, 255, 255, .04);
    color: #fff;
    font-size: 13.5px;
    line-height: 1.3;
    text-align: left;
    cursor: pointer;
}

.pnl-sel-botao:hover { border-color: rgba(231, 73, 231, .7); }

.pnl-sel-botao:focus-visible,
.pnl-sel[data-aberto="true"] .pnl-sel-botao {
    border-color: #e749e7;
    outline: none;
}

/* A COR VAI NO <span>, e não só no botão em volta.

   O painel tem um `form * { color: #5a5a5a }` solto que alcança QUALQUER
   descendente de um formulário, e ele ganha de uma cor herdada. O botão era
   branco e o texto dentro dele saía cinza-chumbo: dois selects apagados ao lado
   de um terceiro colorido, que só escapou porque a regra de "sem escolha" lhe
   dava uma cor. A Stefanie viu os três lado a lado.

   Branco é a cor de valor digitado no resto do painel, e um valor escolhido num
   select é a mesma coisa que um valor digitado num campo.

   O valor corta em vez de empurrar a seta para fora: "No ar, responde
   normalmente" num campo de 230px não cabe, e sem isto a seta sumia. */
.pnl-sel-valor {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    color: #fff;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* O CONVITE ("Selecione...") é mais apagado do que uma resposta, e não tanto
   quanto um `::placeholder`: sobre o fundo claro do botão, a #9376a1 dos campos
   de texto dava 4,33:1. */
.pnl-sel[data-vazio="true"] .pnl-sel-valor { color: #a98bb8; }

.pnl-sel-seta {
    flex: 0 0 auto;
    width: 12px;
    height: 8px;
    fill: none;
    stroke: #c9a8d6;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform .18s ease;
}

.pnl-sel[data-aberto="true"] .pnl-sel-seta { transform: rotate(180deg); }

/* ---- a lista ---- */
.pnl-sel-lista {
    position: absolute;
    z-index: 60;
    top: calc(100% + 6px);
    right: 0;
    left: 0;
    max-height: 260px;
    margin: 0;
    padding: 5px;
    overflow-y: auto;
    list-style: none;
    border: 1px solid rgba(231, 73, 231, .35);
    border-radius: 12px;
    /* OPACO, e não translúcido: por cima de outro campo, um fundo com alfa
       deixaria ler os dois textos ao mesmo tempo. */
    background: #1b0f24;
    box-shadow: 0 14px 34px rgba(0, 0, 0, .55);
}

/* Perto do rodapé a lista abre para cima: no último campo de uma página, para
   baixo ela cairia fora da tela e o clique pareceria não ter feito nada. */
.pnl-sel[data-acima="true"] .pnl-sel-lista {
    top: auto;
    bottom: calc(100% + 6px);
}

.pnl-sel-item {
    padding: 9px 11px;
    border-radius: 8px;
    color: #cdbcd6;
    font-size: 13.5px;
    line-height: 1.35;
    cursor: pointer;
}

/* O MOUSE E O TECLADO ACENDEM O MESMO ITEM. Se o `:hover` fosse o único realce,
   quem navega de seta não veria onde está. */
.pnl-sel-item-sob {
    background: rgba(231, 73, 231, .22);
    color: #fff;
}

.pnl-sel-item-escolhido { color: #fff; font-weight: 600; }

.pnl-sel-item-escolhido::after {
    content: "✓";
    float: right;
    margin-left: 10px;
    color: #f0a6f0;
    font-weight: 400;
}

.pnl-sel-item[aria-disabled="true"] {
    color: #6d5a78;
    cursor: not-allowed;
}

@media (prefers-reduced-motion: reduce) {
    .pnl-sel-seta { transition: none; }
}


/* O "Ligado" do interruptor de cada aviso, contra o `form * { color: #5a5a5a }`
   solto do painel - 2,7:1 sobre o cartão escuro. É o rótulo do interruptor: se
   ele não se lê, o interruptor não diz o que liga. */
.pnl-pub .pnl-avi-liga span { color: #e3d2ea; }

/* =============================================================================
   MODELOS - a galeria e a ficha
   -----------------------------------------------------------------------------
   A galeria já era o formato certo: escolher um modelo é olhar o print, não ler
   uma linha de tabela. O que mudou foi a roupa - cartão branco com texto #222
   no meio de um painel escuro, e o desenho inteiro escrito em `style=` dentro
   do HTML, onde nenhuma folha alcança para corrigir.
   ============================================================================= */
.pnl-pub .pnl-mod-galeria {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
}

.pnl-pub .pnl-mod-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .09);
    border-radius: 14px;
    background: rgba(255, 255, 255, .03);
}

/* O QUE ESTÁ EM USO SE VÊ DE LONGE. Numa galeria de prints parecidos, a borda
   colorida é o que responde "qual é o meu?" sem ler nada. */
.pnl-pub .pnl-mod-card-uso {
    border-color: rgba(120, 231, 170, .55);
    box-shadow: 0 0 0 1px rgba(120, 231, 170, .25);
}

.pnl-pub .pnl-mod-print {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 5 / 3;
    overflow: hidden;
    background: #120b18;
}

/* `aspect-ratio` e não uma altura fixa: com 230px cravados, um print mais alto
   era cortado no meio e um mais baixo deixava faixa preta. */
.pnl-pub .pnl-mod-print img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* #6d5a78 dava 3,11:1 sobre o fundo do print. Ele diz que falta uma imagem, e
   um aviso que nao se le e um aviso que nao existe. */
.pnl-pub .pnl-mod-sem-print {
    color: #9481a0;
    font-size: 13px;
}

.pnl-pub .pnl-mod-selo {
    position: absolute;
    top: 10px;
    right: 10px;
    padding: 3px 10px;
    border: 1px solid rgba(120, 231, 170, .5);
    border-radius: 999px;
    /* Opaco: por cima de um print claro, um fundo com alfa deixaria a imagem
       atravessar as letras. */
    background: #11331f;
    color: #bff0d5;
    font-size: 11.5px;
    font-weight: 600;
}

.pnl-pub .pnl-mod-corpo {
    flex: 1 1 auto;
    padding: 15px 16px 12px;
}

.pnl-pub .pnl-mod-nome {
    margin: 0 0 6px;
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    text-align: left;
}

.pnl-pub .pnl-mod-txt {
    margin: 0;
    color: #c6aed2;
    font-size: 13px;
    line-height: 1.55;
    text-align: left;
}

.pnl-pub .pnl-mod-arquivo {
    margin: 10px 0 0;
    color: #a98bb8;
    font-size: 11.5px;
    text-align: left;
}

/* O FUNDO TEM DE SER DITO. O `<code>` chega com fundo claro de fabrica do
   Bootstrap, e trocar so a cor da letra deixava texto lilas sobre rosa-claro:
   1,83:1, medido pela conferencia do navegador. Os outros `code` do painel ja
   declaravam o fundo, e foi por isso que passaram. */
.pnl-pub .pnl-mod-arquivo code {
    padding: 1px 5px;
    border-radius: 5px;
    background: rgba(255, 255, 255, .07);
    color: #c6aed2;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 11.5px;
}

.pnl-pub .pnl-mod-arquivo-falta,
.pnl-pub .pnl-mod-arquivo-falta code { color: #ff9d9d; }

.pnl-pub .pnl-mod-pe {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px 16px;
    border-top: 1px solid rgba(255, 255, 255, .06);
}

.pnl-pub .pnl-mod-form { flex: 1 1 auto; margin: 0; }

.pnl-pub .pnl-mod-usar { width: 100%; }

.pnl-pub .pnl-mod-usar[disabled] { opacity: .45; cursor: not-allowed; }

.pnl-pub .pnl-mod-agora {
    flex: 1 1 auto;
    color: #bff0d5;
    font-size: 13px;
}

/* O LUGAR DO BOTAO, QUANDO O PLANO NAO LIBERA.

   Escrevi o HTML desta trava e NAO escrevi esta regra; a medida achou o que
   sobrou: texto #333 dentro do cartao escuro, 1.38:1 - praticamente invisivel.
   O #333 nao veio de lugar nenhum de proposito, e o `form * { color: #5a5a5a }`
   e os defaults do tema velho pegando o que ninguem pintou.

   Ela ocupa o lugar do "Usar este modelo" e tem a mesma altura, para o cartao
   sem plano nao ficar mais baixo que o vizinho - tres cartoes de alturas
   diferentes fazem a galeria parecer quebrada, e nao bloqueada.

   A COR E A DO AVISO DE PLANO (`.pnl-plano-trava-txt b`), e nao vermelho: nao
   e erro nem perigo, e uma coisa que se compra. */
.pnl-pub .pnl-mod-trava {
    flex: 1 1 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 38px;
    padding: 8px 12px;
    border: 1px solid rgba(246, 230, 198, .22);
    border-radius: 8px;
    background: rgba(246, 230, 198, .06);
    color: #f0dcb8;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
}

.pnl-pub .pnl-mod-trava svg { flex: 0 0 auto; opacity: .85; }

/* ---- a ficha ---- */
/* DUAS COLUNAS FIXAS, e nao o `auto-fit` do cartao de pessoa.

   Com `auto-fit` cabiam cinco colunas de 230px: o titulo ocupava duas, a
   ordem uma, e sobravam duas vazias a direita. O titulo e o campo que
   aproveita largura - e um nome de modelo -, e a ordem e um numero de um
   digito. Dizer isso e mais curto do que deixar a grade adivinhar. */
.pnl-pub .pnl-mod-grade {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 170px;
    gap: 14px 16px;
}

@media (max-width: 700px) {
    .pnl-pub .pnl-mod-grade { grid-template-columns: 1fr; }
}

.pnl-pub .pnl-mod-campo-desc {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 14px 0 0;
    font-weight: 400;
}

.pnl-pub .pnl-mod-campo-desc > span {
    color: #c6aed2;
    font-size: 12.5px;
    text-align: left;
}

.pnl-pub .pnl-mod-campo-desc textarea {
    width: 100%;
    height: auto;
    margin: 0;
    padding: 11px 13px;
    border: 1px solid rgba(231, 73, 231, .45);
    border-radius: 11px;
    background: rgba(255, 255, 255, .04);
    color: #fff;
    font-size: 13.5px;
    line-height: 1.5;
    text-align: left;
    resize: vertical;
}

.pnl-pub .pnl-mod-campo-desc textarea:focus { border-color: #e749e7; outline: none; }
.pnl-pub .pnl-mod-campo-desc textarea::placeholder { color: #9376a1; }

.pnl-pub .pnl-mod-envio {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 18px;
}

.pnl-pub .pnl-mod-atual {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 280px;
    aspect-ratio: 5 / 3;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .09);
    border-radius: 12px;
    background: #120b18;
}

.pnl-pub .pnl-mod-atual img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pnl-pub .pnl-mod-escolher {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}

/* O <input type="file"> nativo não se veste, então quem aparece é o <label>.
   Ele fica fora da tela em vez de `display: none`: escondido assim, o teclado
   não alcança o campo e a tela deixa de ter como enviar arquivo sem mouse. */
.pnl-pub .pnl-mod-escolher input[type="file"] {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    opacity: 0;
}

.pnl-pub .pnl-mod-escolher input[type="file"]:focus-visible + label {
    border-color: #e749e7;
    outline: 2px solid #e749e7;
    outline-offset: 2px;
}

.pnl-pub .pnl-mod-escolher label { margin: 0; cursor: pointer; }

.pnl-pub .pnl-mod-dica {
    max-width: 260px;
    color: #a98bb8;
    font-size: 12px;
    line-height: 1.45;
}

@media (max-width: 700px) {
    .pnl-pub .pnl-mod-atual { width: 100%; }
    .pnl-pub .pnl-mod-campo-ordem { max-width: none; }
}


/* =============================================================================
   A CAIXINHA DO INTERRUPTOR NAO SE DESENHA
   -----------------------------------------------------------------------------
   `.pnl-switch input[type="checkbox"] { display: none }` existe desde sempre:
   quem se vê é o trilho, e o checkbox é só o estado. Só que a regra que
   desenha o checkbox do painel novo pesa mais:

       .pnl-switch input[type="checkbox"]                             0-2-1
       body.pnl-embutido .pnl-embutido-corpo input[type="checkbox"]   0-3-2

   e ela devolvia `display: inline-block`. O resultado era um quadradinho vazio
   grudado na frente de TODO interruptor do painel, que a Stefanie leu como um
   segundo controle.

   Empate de peso se resolve com peso, e não com ordem: estes dois seletores
   passam dos dois lados.
   ============================================================================= */
.pnl-pub .pnl-switch input[type="checkbox"],
.pnl-cl .pnl-switch input[type="checkbox"],
body.pnl-embutido .pnl-embutido-corpo .pnl-switch input[type="checkbox"] {
    display: none;
}


/* Os dois botoes do pe do cartao de modelo tinham alturas diferentes: 44px o
   de usar e 30px o de editar, porque um é `.pnl-pub-btn` e o outro é
   `.pnl-acs-btn`, que nasceu para linha de tabela. Lado a lado, o menor parece
   desligado. */
.pnl-pub .pnl-mod-pe .pnl-acs-btn {
    height: var(--pnl-alt-campo, 44px);
    padding: 0 16px;
    font-size: 13.5px;
}

/* VERDE NO ATIVAR, e não o roxo de tudo.

   "Painel" e "Ativar" saíam da mesma cor, um do lado do outro, e as duas ações
   não têm nada a ver: uma abre uma aba, a outra põe um site no ar. Desativar já
   era vermelho; faltava o par. Agora as três se distinguem sem ler:

       Painel     roxo, que é a cor de navegar no painel
       Ativar     verde, que é a cor de "no ar" na coluna ao lado
       Desativar  vermelho, que é a cor do que tira do ar

   O verde é o MESMO do selo "No ar" da mesma linha, de propósito: o botão diz
   para onde a linha vai. */
.pnl-pub .pnl-acs-btn-ativar {
    border-color: rgba(120, 231, 170, .5);
    background: rgba(120, 231, 170, .12);
    color: #bff0d5;
}

.pnl-pub .pnl-acs-btn-ativar:hover {
    border-color: #78e7aa;
    color: #fff;
}

/* =============================================================================
   PAGINAÇÃO DO DESENHO NOVO
   -----------------------------------------------------------------------------
   Ver admin/partes/paginacao-nova.php para o porquê de ela existir separada da
   antiga.
   ============================================================================= */
.pnl-pub .pnl-pag,
.pnl-cl .pnl-pag {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    padding: 18px 0 4px;
}

.pnl-cl .pnl-pag-num,
.pnl-cl .pnl-pag-passo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 11px;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 9px;
    background: rgba(255, 255, 255, .03);
    color: #c6aed2;
    font-size: 13px;
    text-decoration: none;
}

.pnl-cl a.pnl-pag-num:hover,
.pnl-cl a.pnl-pag-passo:hover {
    border-color: rgba(231, 73, 231, .55);
    color: #fff;
    text-decoration: none;
}

/* A PÁGINA EM QUE SE ESTÁ NÃO É UM LINK, e também não parece um. Ela é o único
   item preenchido da fila: sem isso, quem olha conta os números procurando qual
   está diferente. */
.pnl-cl .pnl-pag-aqui {
    border-color: rgba(231, 73, 231, .6);
    background: rgba(231, 73, 231, .18);
    color: #fff;
    font-weight: 600;
    cursor: default;
}

/* "3" sozinho não diz se é a página ou a quantidade. */
.pnl-cl .pnl-pag-conta {
    margin-left: auto;
    color: #a98bb8;
    font-size: 12.5px;
}

@media (max-width: 700px) {
    .pnl-cl .pnl-pag-conta { margin-left: 0; width: 100%; }
}

/* O nome no topo da barra virou link para os próprios dados, e um <a> chega com
   a cor e o sublinhado do tema. Ele continua parecendo o que era: um título,
   não um link, até o mouse passar. */
.pnl-menu-conta-nome,
.pnl-menu-conta-nome:link,
.pnl-menu-conta-nome:visited { text-decoration: none; }

.pnl-menu-conta-nome:hover {
    color: #f0a6f0;
    text-decoration: none;
}


/* =============================================================================
   A LISTA DO SELECT2 NÃO EMPURRA A TELA
   -----------------------------------------------------------------------------
   Ela é pendurada no <body> e posicionada por coordenada absoluta. Dentro do
   quadro do editor isso a fazia passar 35px da borda direita, e o quadro ganhava
   barra de rolagem horizontal só por abrir o campo.

   O conserto de raiz é o `dropdownParent` no JS da tela (ver
   admin/personalizacao/form.php); estas duas regras são a rede, para o próximo
   select2 que aparecer sem ele.
   ============================================================================= */
.pnl-cl .form-group,
body.pnl-embutido .form-group { position: relative; }

.pnl-cl .select2-container,
body.pnl-embutido .select2-container { max-width: 100%; }

.pnl-cl .select2-dropdown,
body.pnl-embutido .select2-dropdown {
    max-width: 100%;
    box-sizing: border-box;
}

/* "(raiz do site)" é o que aparece no lugar do endereço na conta principal, que
   não tem slug. Ele herdava a cor do `<b>` em volta mas o `<i>` cai no
   `form * { color: #5a5a5a }`... não: ele vinha em #9376a1, a cor de exemplo,
   e deu 4,33:1 sobre o cartão. É um valor de verdade, e não um exemplo: aquela
   conta responde na raiz mesmo. */
.pnl-pub .pnl-seo-previa i,
body.pnl-embutido .pnl-embutido-corpo b > i { color: #c6aed2; font-style: italic; }

/* =============================================================================
   O QUE O HTML ESCONDEU, O DESENHO NÃO REACENDE
   -----------------------------------------------------------------------------
   O atributo `hidden` esconde por uma regra do próprio navegador, de peso quase
   nulo. A regra que desenha o checkbox do painel pesa mais e devolvia
   `display: inline-block`: um quadradinho vazio aparecia na frente do toggle
   "Este card tem prazo", porque o formulário do card tem um
   `<input type="checkbox" id="chkDestaque" hidden>` que existe só para o script
   saber se o card é destaque.

   É a terceira vez que a mesma regra reacende algo escondido - antes foi o
   checkbox do `.pnl-switch`. Então esta não trata o caso: trata a CLASSE do
   caso. `[hidden]` quer dizer "não desenhe", e nenhuma regra de aparência tem o
   direito de discordar.

   Sem `!important`: o peso empata com o da regra que desenha, e empate se
   resolve por ordem - esta vem depois.
   ============================================================================= */
.pnl-pub input[hidden],
.pnl-cl input[hidden],
body.pnl-embutido .pnl-embutido-corpo input[hidden] {
    display: none;
}

/* =============================================================================
   A PRÉVIA DA IMAGEM DO CARD GUARDA A PROPORÇÃO DELA
   -----------------------------------------------------------------------------
   `.filesPainel img` tinha `height: 30em` cravado e nenhum `object-fit`: uma
   capa de 1200x600 era esticada dentro de uma caixa que não é a proporção dela,
   e a prévia mostrava uma imagem diferente da que vai para a página. Prévia que
   mente é pior do que prévia nenhuma - é para ela que se olha antes de salvar.

   `height: auto` com `width: 100%` devolve a proporção de verdade. O
   `max-height` existe para a imagem alta não empurrar o botão de salvar para
   fora da tela, e aí `contain` mantém tudo visível em vez de cortar.
   ============================================================================= */
.pnl-pub .filesPainel img,
.pnl-cl .filesPainel img,
body.pnl-embutido .filesPainel img {
    width: 100%;
    height: auto;
    max-height: 320px;
    object-fit: contain;
    border-radius: 10px;
}

/* =============================================================================
   A ALÇA DE ARRASTAR SEÇÃO
   -----------------------------------------------------------------------------
   Sem estas regras o `<button>` da alça sai com o desenho de fábrica do
   navegador - fundo claro, borda preta - e, como a coluna empilha, ele virava
   uma barra branca de largura inteira em cima do nome de cada seção. Foi o que
   a Stefanie viu.

   A linha é `flex`: alça à esquerda, nome ocupando o resto.
   ============================================================================= */
.pnl-ed-secoes-lista {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.pnl-ed-secao-linha {
    display: flex;
    align-items: center;
    gap: 2px;
    min-width: 0;
}

.pnl-ed-secao-linha > .pnl-ed-secao {
    flex: 1 1 auto;
    min-width: 0;
}

.pnl-ed-secao-pega {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 15px;
    height: 32px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 5px;
    background: transparent;
    box-shadow: none;
    /* SEMPRE VISÍVEL, a pedido da Stefanie. Eu a tinha deixado transparente até
       o hover para não competir com o nome da seção; ela viu o outro lado, que
       pesa mais: um gesto que só existe depois de passar o mouse é um gesto que
       quase ninguém descobre. Em tela de toque não há hover nenhum.

       Discreta, e não escondida: ela acende no hover e no foco. */
    color: #6f5a7d;
    cursor: grab;
}

.pnl-ed-secao-linha:hover .pnl-ed-secao-pega,
.pnl-ed-secao-pega:focus-visible { color: #c6aed2; }

.pnl-ed-secao-pega:hover { color: #e3d2ea; background: rgba(255, 255, 255, .06); }
.pnl-ed-secao-pega:active { cursor: grabbing; }


.pnl-ed-secoes-lista .ui-sortable-helper {
    border-radius: 9px;
    background: rgba(231, 73, 231, .16);
    box-shadow: 0 8px 20px rgba(0, 0, 0, .45);
}

/* O "Novo card" quando o teto do plano chegou: o mesmo lugar e o mesmo tamanho
   do botão, para a coluna não dançar, mas sem cara de botão - ele não faz nada.
   O cadeado diz o motivo antes de a pessoa tentar. */
.pnl-ed-add-teto {
    border-style: dashed;
    border-color: rgba(231, 176, 73, .45);
    background: rgba(231, 176, 73, .08);
    color: #f2d7a6;
    cursor: default;
}

.pnl-ed-add-teto:hover {
    border-color: rgba(231, 176, 73, .45);
    color: #f2d7a6;
}

/* =============================================================================
   "ISTO NÃO ESTÁ NO SEU PLANO"
   -----------------------------------------------------------------------------
   Âmbar, e não vermelho: vermelho quer dizer que algo deu errado, e aqui nada
   deu - a tela está dizendo o que existe um degrau acima. Ver
   planoBloqueioHtml() em admin/class/functions.Plano.php.
   ============================================================================= */
.pnl-plano-trava {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    margin: 0 0 16px;
    padding: 13px 15px;
    border: 1px solid rgba(231, 176, 73, .4);
    border-radius: 12px;
    background: rgba(231, 176, 73, .09);
}

.pnl-plano-trava-icone {
    flex: 0 0 auto;
    margin-top: 1px;
    color: #f2d7a6;
}

.pnl-plano-trava-txt {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.pnl-plano-trava-txt b { color: #f6e6c6; font-size: 13.5px; }
.pnl-plano-trava-txt span { color: #d8bd94; font-size: 12.5px; line-height: 1.5; }

/* O "Nova seção" quando o plano não dá: mesma caixa, outra cor, sem cara de
   botão. O cadeado diz o motivo antes de a pessoa tentar. */
.pnl-ed-nova-trava {
    border-color: rgba(231, 176, 73, .4);
    color: #d8bd94;
    cursor: default;
}

.pnl-ed-nova-trava:hover {
    border-color: rgba(231, 176, 73, .4);
    color: #d8bd94;
}

/* =============================================================================
   CLIQUES - o relatorio da pagina (01/10/2026)

   Tres formas numa tela so, pelo limite `cliques` do plano. Ver
   admin/cliques/lista.php.
   ============================================================================= */

.pnl-pub .pnl-clq-explica {
    margin: 0;
    color: #c9b6d4;
    font-size: 13.5px;
    line-height: 1.6;
}

/* ---- as tres janelas de tempo, no topo ---- */

/* UM GRUPO DE LINKS, e nao um select: sao tres opcoes, e tres opcoes a vista
   se comparam. Um select esconde duas atras de um clique para economizar um
   espaco que esta sobrando ali. */
.pnl-pub .pnl-clq-periodo {
    display: inline-flex;
    gap: 2px;
    padding: 3px;
    border: 1px solid rgba(231, 73, 231, .16);
    border-radius: 11px;
    background: rgba(231, 73, 231, .04);
}

.pnl-pub .pnl-clq-periodo-op {
    padding: 7px 14px;
    border-radius: 8px;
    color: #c9b6d4 !important;
    font-size: 12.5px;
    font-weight: 600;
    text-decoration: none !important;
    white-space: nowrap;
    transition: background .16s ease, color .16s ease;
}

.pnl-pub .pnl-clq-periodo-op:hover {
    background: rgba(231, 73, 231, .1);
    color: #fff !important;
}

.pnl-pub .pnl-clq-periodo-op-aqui,
.pnl-pub .pnl-clq-periodo-op-aqui:hover {
    background: rgba(231, 73, 231, .22);
    color: #fff !important;
}

/* ---- o resumo ---- */

/* GRADE E NAO FILEIRA (02/10/2026).
   -----------------------------------------------------------------------------
   Era `flex` com `min-width: 150px`: duas ou quatro caixinhas encostadas a
   esquerda e o resto do cartao vazio ate a borda direita. A Stefanie: "o card
   ta pequeno e tem espaco", "os cards soltos ali fica estranho".

   `auto-fit` com `1fr` faz as caixas DIVIDIREM a largura em vez de ocuparem o
   minimo delas: duas caixas viram duas metades, quatro viram quatro quartos, e
   em tela estreita elas quebram sozinhas. O vazio a direita desaparece sem
   ninguem precisar escolher uma largura por tela. */
.pnl-pub .pnl-clq-resumo {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px;
}

.pnl-pub .pnl-clq-num {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 16px 18px;
    border: 1px solid rgba(231, 73, 231, .14);
    border-radius: 13px;
    background: rgba(231, 73, 231, .045);
}

/* A CHAMADA DO CARTAO: o numero que resume o desenho logo abaixo.
   Nao e um cartao de estatistica - e o titulo do grafico, e por isso fica na
   linha, em texto, sem caixa em volta. */
.pnl-pub .pnl-clq-chamada {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin: 0 0 14px;
}

.pnl-pub .pnl-clq-chamada b {
    color: #fff;
    font-size: 27px;
    font-weight: 700;
    line-height: 1.05;
    font-variant-numeric: tabular-nums;
}

.pnl-pub .pnl-clq-chamada span {
    color: #a98bb8;
    font-size: 12.5px;
    font-weight: 500;
}

.pnl-pub .pnl-clq-num-valor {
    color: #fff;
    font-size: 27px;
    font-weight: 700;
    line-height: 1.05;
    /* Numeros de mesma largura: sem isto, 1.111 e 8.888 ocupam espacos
       diferentes e as duas caixas da fileira dancam ao trocar o periodo. */
    font-variant-numeric: tabular-nums;
}

.pnl-pub .pnl-clq-num-rotulo {
    color: #a98bb8;
    font-size: 12px;
    font-weight: 500;
}

/* ---- o grafico dia a dia ---- */

/* BARRAS EM DIVS, sem biblioteca nenhuma: e uma serie so de retangulos, e
   qualquer biblioteca de grafico pesa mais do que a tela inteira para desenhar
   isso. Ver o topo do lista.php. */
/* O EIXO, QUE ANTES ERA VAZIO (02/10/2026).
   -----------------------------------------------------------------------------
   O grafico tinha 150px e as barras eram proporcionais ao pico: com um dia de
   33 e o resto perto de zero, sobravam 90% de caixa vazia. A escala estava
   certa; o que faltava era alguma coisa naquele espaco que ajudasse a ler
   tamanho.

   Tres linhas de grade e tres rotulos resolvem: o mesmo espaco passa a dizer
   quanto vale cada altura, que era o que a legenda "pico de 33 num dia"
   tentava dizer em palavras debaixo do desenho.

   A GRADE E `background` NA PROPRIA AREA, e nao elementos: sao tres linhas
   fixas, e tres <span> posicionados seriam tres coisas a mais para o
   navegador medir a cada redesenho - num grafico de noventa barras isso se
   nota. Os `0.5px` de altura em degrade dao a linha de 1px sem que ela
   engorde no zoom. */
.pnl-pub .pnl-clq-plot {
    display: flex;
    align-items: stretch;
    gap: 10px;
}

.pnl-pub .pnl-clq-eixoy {
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    justify-content: space-between;
    /* O mesmo padding de cima do grafico, para o rotulo do teto cair EM CIMA
       da linha de grade do teto, e nao acima dela. */
    padding: 10px 0 0;
    color: #8f7a9c;
    font-size: 11px;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    text-align: right;
    /* O zero fica colado na base; o `translateY` sobe metade da letra para o
       texto ficar centrado NA linha, como nos outros dois rotulos. */
    transform: translateY(5px);
}

.pnl-pub .pnl-clq-grafico {
    display: flex;
    align-items: flex-end;
    flex: 1 1 auto;
    min-width: 0;
    gap: 2px;
    height: 150px;
    padding: 10px 2px 0;
    /* A LINHA DE BASE E RECESSIVA. Ela existe para a barra ter de onde sair;
       se competir com as barras, o grafico vira uma grade com barras dentro. */
    border-bottom: 1px solid rgba(255, 255, 255, .1);

    /* Grade no teto e na metade. A base ja e a borda acima. */
    background-image:
        linear-gradient(rgba(255, 255, 255, .07), rgba(255, 255, 255, .07)),
        linear-gradient(rgba(255, 255, 255, .07), rgba(255, 255, 255, .07));
    background-size: 100% 1px, 100% 1px;
    background-position: 0 10px, 0 calc(10px + (100% - 10px) / 2);
    background-repeat: no-repeat;
}

/* Sem o rotulo do meio (teto impar), tambem sem a linha do meio: grade sem
   numero e risco. */
.pnl-pub .pnl-clq-grafico-semmeio {
    background-image: linear-gradient(rgba(255, 255, 255, .07), rgba(255, 255, 255, .07));
    background-size: 100% 1px;
    background-position: 0 10px;
}

.pnl-pub .pnl-clq-barra {
    display: flex;
    align-items: flex-end;
    flex: 1 1 0;
    min-width: 0;
    height: 100%;
}

.pnl-pub .pnl-clq-barra-corpo {
    display: block;
    width: 100%;
    height: var(--alt, 2%);
    /* 3px em cima so, encostada na base: a barra nasce da linha, e arredondar
       embaixo a faria flutuar. */
    border-radius: 3px 3px 0 0;
    background: #e749e7;
    transition: background .16s ease;
}

.pnl-pub .pnl-clq-barra:hover .pnl-clq-barra-corpo { background: #f68cf6; }

/* DIA SEM CLIQUE FICA COM UM FIO, e nao some: o lugar dele no tempo e
   informacao. Em outra cor para nao se confundir com um dia de um clique. */
.pnl-pub .pnl-clq-barra-zero .pnl-clq-barra-corpo {
    background: rgba(255, 255, 255, .12);
}

.pnl-pub .pnl-clq-eixo {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    margin-top: 8px;
    color: #a98bb8;
    font-size: 11.5px;
}

/* O rotulo do meio saiu do eixo em 02/10 (eram tres spans, a data da esquerda,
   o "pico de N" e a da direita). Com dois, `space-between` ja os poe nas
   pontas e nao ha nada para centrar. */

/* ---- link por link ---- */

.pnl-pub .pnl-clq-lista {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* TRES COLUNAS NO COMPUTADOR e empilhado no celular. A fita do meio e a que
   encolhe: ela e comparacao, e nao numero - o numero esta escrito ao lado. */
.pnl-pub .pnl-clq-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(60px, 180px) auto;
    align-items: center;
    gap: 14px;
    padding: 11px 12px;
    border-radius: 9px;
}

.pnl-pub .pnl-clq-item:nth-child(odd) { background: rgba(255, 255, 255, .025); }

.pnl-pub .pnl-clq-item-nome {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.pnl-pub .pnl-clq-item-titulo {
    color: #fff;
    font-size: 13.5px;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pnl-pub .pnl-clq-item-quando {
    color: #a98bb8;
    font-size: 11.5px;
}

.pnl-pub .pnl-clq-item-fita {
    height: 7px;
    border-radius: 4px;
    background: rgba(255, 255, 255, .07);
    overflow: hidden;
}

.pnl-pub .pnl-clq-item-fita span {
    display: block;
    height: 100%;
    border-radius: 4px;
    background: #e749e7;
}

.pnl-pub .pnl-clq-item-nums {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 1px;
    text-align: right;
}

.pnl-pub .pnl-clq-item-total {
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.pnl-pub .pnl-clq-item-periodo {
    color: #a98bb8;
    font-size: 11.5px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

@media (max-width: 700px) {
    /* A FITA SAI NO CELULAR. Com 360px de largura ela ficaria com uns 40px, e
       uma barra de comparacao de 40px nao compara nada - so rouba o espaco do
       titulo do link, que e o que precisa ser lido. */
    .pnl-pub .pnl-clq-item {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 10px;
    }

    .pnl-pub .pnl-clq-item-fita { display: none; }

    .pnl-pub .pnl-clq-grafico { height: 110px; }

    .pnl-pub .pnl-clq-periodo { width: 100%; justify-content: space-between; }
    .pnl-pub .pnl-clq-periodo-op { flex: 1 1 0; text-align: center; }
}

/* =============================================================================
   LINK SEM CLASSE, DENTRO DO PAINEL NOVO (01/10/2026)

   A folha tem `a { color: #000 }` solto no topo, do tema claro de origem. Toda
   area nova e escura, entao um <a> que ninguem pintou sai PRETO sobre fundo
   escuro: a medida pegou "Criar o primeiro card" a 1,13:1, no vazio da tela de
   Cliques.

   O caso nao e daquela frase, e de qualquer link escrito no meio de um texto -
   e nenhum deles vai ter classe propria, porque sao links dentro de uma frase.

   `:not([class])` E A PERGUNTA CERTA. Link COM classe tem dono, e o dono pinta:
   os botoes, os itens de menu, as abas. Link sem classe nenhuma e exatamente o
   que caiu no preto. Pesa (0,2,1) e ganha do `a` solto sem precisar de
   !important.

   SUBLINHADO DE VOLTA, e isso e de proposito: aquele `a` do topo tem
   `text-decoration: none !important`, entao um link no meio de um paragrafo
   so se distingue pela cor - e so pela cor nao basta para quem nao separa
   essas duas. Em botao nao faz falta; aqui faz. */
.pnl-pub a:not([class]),
.pnl-tela a:not([class]) {
    color: #f0a8f0;
    text-decoration: underline !important;
    text-underline-offset: 2px;
}

.pnl-pub a:not([class]):hover,
.pnl-tela a:not([class]):hover {
    color: #fff;
}

/* A LISTA SEM FITA: usada onde todos os valores sao iguais (zero), e ali uma
   barra de comparacao nao compara nada. Ver a lista de contas paradas em
   admin/geral/lista.php. */
.pnl-pub .pnl-clq-lista-simples .pnl-clq-item {
    grid-template-columns: minmax(0, 1fr) auto;
}

/* =============================================================================
   O AVISO DE ASSINATURA EM ATRASO (01/10/2026)

   Aparece no topo de TODA tela do painel, e so quando ha atraso. Dois tons:
   ambar enquanto a pagina ainda esta no ar, vermelho quando ela ja saiu.
   Ver admin/class/functions.Assinatura.php.
   ============================================================================= */

.pnl-assin-aviso {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    margin: 0 0 18px;
    padding: 13px 16px;
    border: 1px solid rgba(231, 176, 73, .32);
    border-left-width: 3px;
    border-radius: 11px;
    background: rgba(231, 176, 73, .07);
    color: #e8c98f;
}

/* VERMELHO SO QUANDO JA ACONTECEU. Enquanto da para evitar, o aviso e ambar:
   vermelho quer dizer "isto aconteceu e nao se desfaz", e aqui se desfaz
   pagando. Gritar nos cinco dias gasta o vermelho para o dia em que ele
   precisar dizer alguma coisa. */
.pnl-assin-aviso-fora {
    border-color: rgba(231, 73, 73, .38);
    background: rgba(231, 73, 73, .08);
    color: #f0b4b4;
}

.pnl-assin-aviso svg { flex: 0 0 auto; margin-top: 1px; }

.pnl-assin-aviso-txt {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.pnl-assin-aviso-txt > b {
    color: #f6e6c6;
    font-size: 13.5px;
    font-weight: 700;
}

.pnl-assin-aviso-fora .pnl-assin-aviso-txt > b { color: #ffd9d9; }

.pnl-assin-aviso-txt > span {
    font-size: 12.5px;
    line-height: 1.55;
}

/* O <b> de dentro do paragrafo herda a cor da frase, como o resto do painel:
   ver a regra de `.pnl-pub b`. Aqui ele e so peso. */
.pnl-assin-aviso-txt > span b { color: inherit; font-weight: 700; }

/* =============================================================================
   OS CLIQUES NA LINHA DO CARD, no editor (01/10/2026)

   A Stefanie: "o certo do clique e mostrar ali na lista em editar a pagina
   tambem, de cada card, para a pessoa saber qual ta tendo mais cliques".
   Quando aparece e por que esta em admin/editor/cfg.php.
   ============================================================================= */

.pnl-ed-cliques {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    flex: 0 0 auto;
    padding: 3px 9px;
    border-radius: 999px;
    background: rgba(231, 73, 231, .12);
    color: #f0a8f0;
    font-size: 12px;
    font-weight: 700;
    /* Mesma largura por algarismo: sem isto, 9 e 1.284 nao alinham e a coluna
       inteira perde a serventia, que e comparar de relance. */
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.pnl-ed-cliques svg { opacity: .75; }

/* O TITULO TEM PISO, E A ETIQUETA CEDE PRIMEIRO.
   -----------------------------------------------------------------------
   `.pnl-ed-bloco-texto` e `flex: 1 1 auto; min-width: 0`, e a etiqueta nasceu
   `flex: 0 0 auto`: com a terceira coluna aberta, a do meio cai para 374px e o
   texto encolhia ate ZERO - o titulo e o subtitulo sumiam e o numero ia parar
   em cima do "Destaque", escrito "336estaque". Medido, nao imaginado.

   O piso resolve a metade de baixo: o texto nunca desaparece. A outra metade e
   a etiqueta ficar menor quando a coluna aperta, logo abaixo. */
.pnl-ed-bloco-texto { min-width: 74px; }

/* COM O CARD ABERTO, A ETIQUETA PERDE O ICONE. `pnl-ed-corpo-editando` e a
   classe que a propria tela ja usa para dizer "a coluna do meio esta estreita"
   - e aqui ela serve de medida sem precisar de container query.

   O numero fica, porque e ele a informacao; o icone era so para dizer que
   aquele numero e de cliques, e isso a pessoa aprende na primeira vez. */
.pnl-ed-corpo-editando .pnl-ed-cliques { padding: 3px 7px; gap: 0; }
.pnl-ed-corpo-editando .pnl-ed-cliques svg { display: none; }

/* E A PALAVRA "DESTAQUE" SAI JUNTO, pelo mesmo motivo.
   -----------------------------------------------------------------------
   A linha ja estava no limite antes da etiqueta de cliques: com a terceira
   coluna aberta ela mede 374px, e ali cabem a arte, o titulo, o interruptor
   com a palavra ao lado, o duplicar e a lixeira - exatamente, sem folga. O
   numero entrou e as coisas passaram a montar umas nas outras.

   Entre perder o NUMERO e perder a PALAVRA, perde-se a palavra: o interruptor
   continua desenhado e continua tendo a dica "Destaque" no hover, enquanto o
   numero nao tem outro lugar onde aparecer. `flex-shrink: 0` no botao estava
   certo - o que sobrava era o rotulo. */
.pnl-ed-corpo-editando .pnl-ed-dest-texto { display: none; }

/* E NO CELULAR VALE O MESMO, pelo mesmo motivo medido.
   -----------------------------------------------------------------------
   Com o piso do titulo e a etiqueta de cliques, a 360px a linha passou a
   vazar 22px - a varredura pegou em quatro telas do editor, e quem vazava era
   a etiqueta de situacao ("não aparece"), empurrada para fora.

   A conta e a mesma da coluna estreita: a linha tem 328px uteis e o rotulo do
   interruptor leva uns 60 deles. Ele sai, e cabe tudo - o interruptor
   continua desenhado, com a dica no toque. */
@media (max-width: 700px) {
    .pnl-ed-dest-texto { display: none; }
    .pnl-ed-cliques { padding: 3px 7px; gap: 0; }
    .pnl-ed-cliques svg { display: none; }

    /* E O PISO SAI. Tirar o rotulo sozinho nao bastou - medi, continuava
       vazando 22px -, e aqui o piso nao faz falta: no celular as tres colunas
       empilham, entao a linha tem a largura da tela inteira e o titulo nunca
       chegava a sumir. O piso existe para a coluna do meio espremida, que so
       acontece no computador. */
    .pnl-ed-bloco-texto { min-width: 0; }
}

/* ZERO E INFORMACAO, mas nao e destaque: ele so aparece numa pagina que JA tem
   clique em algum lugar, e ali o que ele diz e "este nao". Em cinza, para a
   fileira dos que funcionam saltar. */
.pnl-ed-cliques-zero {
    background: rgba(255, 255, 255, .06);
    color: #9a8aa6;
}

@media (max-width: 420px) {
    /* O ICONE SAI NO CELULAR e o numero fica. Com 360px de largura, o titulo
       do card e a primeira coisa a ser espremida, e ele e o que se le. */
    .pnl-ed-cliques { padding: 3px 7px; }
    .pnl-ed-cliques svg { display: none; }
}

/* O LUGAR RESERVADO DO CARD QUE ESTA SENDO CRIADO (01/10/2026)

   Tracejado e apagado de proposito: ele nao e um card, e um espaco guardado.
   Ver o comentario em admin/editor/form.php. */
.pnl-ed-bloco-novo {
    border: 1.5px dashed rgba(231, 73, 231, .45);
    background: rgba(231, 73, 231, .05);
    /* Sem o `cursor: pointer` nem o hover dos outros: nao ha o que clicar. */
    cursor: default;
}

.pnl-ed-bloco-novo .pnl-ed-bloco-arte {
    border-style: dashed;
    border-color: rgba(231, 73, 231, .45);
    background: transparent;
    color: #f0a8f0;
    font-size: 20px;
    font-weight: 400;
}

.pnl-ed-bloco-novo .pnl-ed-bloco-texto b { color: #f0a8f0; }

/* A ULTIMA LINHA RESPIRA. Dentro do container de arrasto os cards tem o
   espaco do proprio container; esta linha fica fora dele e colaria no bloco
   de cima. */
.pnl-ed-bloco-novo { margin-top: 2px; }

/* A DATA E A HORA DO AGENDAMENTO (01/10/2026)

   OS DOIS GRUPOS EMPILHADOS, e nao lado a lado. A Stefanie pediu, e a medida
   explica: sao QUATRO campos, e em duas colunas cada um ficava com uns 110px -
   a data saia escrita "05/10/2..." e a hora nao cabia.

   Um grupo embaixo do outro, cada um com a largura toda: a data fica larga e a
   hora, que e curta de verdade, fica do tamanho dela.

   E SAO CAMPOS DE TEXTO COM MASCARA, e nao `type=date` / `type=time`. Ver o
   comentario em admin/institucional/form.php. */
.pnl-agenda-campos {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* O `gap` E A UNICA DISTANCIA. Cada grupo e um `.form-group`, que traz uma
   margem de baixo do Bootstrap - somada ao gap, sobrava um vao de 200px entre
   "Começa a aparecer em" e "Sai do ar depois de", como se fossem duas seções
   diferentes da tela. Medido no retrato. */
.pnl-agenda-campos > .form-group {
    margin: 0;
}

.pnl-agenda-dupla {
    display: flex;
    gap: 10px;
    align-items: stretch;
}

/* A data leva o espaco que sobra; a hora leva o que ela precisa. */
.pnl-agenda-dupla input { min-width: 0; }
.pnl-agenda-dupla input.pnl-mask-data { flex: 1 1 auto; }

.pnl-agenda-hora {
    flex: 0 0 110px;
    width: 110px;
    text-align: center;
}

/* =============================================================================
   PLANOS - o da conta, e os outros (01/10/2026)

   A Stefanie: "o campo no menu de planos, para a pessoa ver qual plano que ta
   na conta". Ver admin/planos/.
   ============================================================================= */

/* ---- o plano de hoje ---- */

.pnl-pub .pnl-plano-hoje {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 18px 20px;
    border: 1px solid rgba(231, 73, 231, .22);
    border-radius: 13px;
    background: rgba(231, 73, 231, .06);
}

.pnl-pub .pnl-plano-hoje-nome {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 10px;
}

.pnl-pub .pnl-plano-hoje-nome b {
    color: #fff;
    font-size: 22px;
    font-weight: 700;
}

.pnl-pub .pnl-plano-hoje-preco {
    color: #c9b6d4;
    font-size: 13px;
}

/* A LINHA QUE APONTA PARA A GRADE, no lugar de repetir a lista que o cartao
   com o selo ja mostra um palmo abaixo. Tom secundario de proposito: ela nao
   e informacao nova, e so o caminho ate onde a informacao esta. */
.pnl-pub .pnl-plano-hoje-ponteiro {
    margin: 2px 0 0;
    color: #b7a3c3;
    font-size: 13px;
    line-height: 1.6;
}

.pnl-pub .pnl-plano-hoje-ponteiro b { color: #e7d8ef; }

/* ---- quando vence a proxima fatura ---- */

/* NEUTRA POR PADRAO. A conta esta em dia; o que mudou e que uma data existe.
   Pintar isto de ambar seria dar a uma informacao de rotina o mesmo peso da
   faixa de pagamento em aberto, e ai as duas param de significar alguma coisa. */
.pnl-pub .pnl-plano-vence {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 2px 0 0;
    color: #b7a3c3;
    font-size: 13px;
    line-height: 1.6;
}

.pnl-pub .pnl-plano-vence svg {
    flex: 0 0 auto;
    margin-top: 3px;
    color: #9b86a8;
}

.pnl-pub .pnl-plano-vence b { color: #e7d8ef; }

/* PERTO DO VENCIMENTO ela ganha cor, e so cor: mesmo tamanho, mesmo lugar,
   mesma frase. O ambar aqui e o mesmo do aviso de plano (`.pnl-plano-trava`),
   e nao o vermelho - nada esta errado, so esta chegando. */
/* CANCELAMENTO MARCADO: ambar, como o "perto de vencer", e nao vermelho. Nada
   esta errado - a pessoa escolheu isto, e a pagina segue no ar ate a data. O
   vermelho e de quem esta prestes a perder a pagina sem querer. */
.pnl-pub .pnl-plano-vence-cancela { color: #d8bd94; }
.pnl-pub .pnl-plano-vence-cancela svg { color: #e0a94a; }
.pnl-pub .pnl-plano-vence-cancela b { color: #f6e6c6; }

.pnl-pub .pnl-plano-vence-perto { color: #d8bd94; }
.pnl-pub .pnl-plano-vence-perto svg { color: #e0a94a; }
.pnl-pub .pnl-plano-vence-perto b { color: #f6e6c6; }

/* A ETIQUETA DO PLANO ATUAL e a mesma nos dois lugares - no topo e no cartao
   da grade -, porque e a mesma informacao. Dois desenhos para "este e o seu"
   seria uma coisa a mais para a pessoa aprender. */
.pnl-pub .pnl-plano-selo-atual {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    background: rgba(231, 73, 231, .22);
    color: #f0a8f0;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .3px;
    text-transform: uppercase;
    white-space: nowrap;
}

/* ---- a lista do que cada plano da ---- */

.pnl-pub .pnl-plano-itens {
    display: flex;
    flex-direction: column;
    gap: 7px;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* O MARCADOR E DESENHADO, e nao um caractere: o `list-style` padrao do
   navegador desenha a bolinha fora da caixa e ela some no recorte do cartao.
   E o risco diagonal do "certo" diz "voce tem isto", que e o que a lista e. */
.pnl-pub .pnl-plano-itens li {
    position: relative;
    padding-left: 24px;
    color: #cdbcd6;
    font-size: 13px;
    line-height: 1.5;
}

.pnl-pub .pnl-plano-itens li::before {
    content: "";
    position: absolute;
    left: 4px;
    top: 5px;
    width: 10px;
    height: 6px;
    border-left: 2px solid #68d391;
    border-bottom: 2px solid #68d391;
    transform: rotate(-45deg);
}

.pnl-pub .pnl-plano-itens li b { color: #fff; }

/* ---- a grade de planos ---- */

/* `auto-fit` COM MINIMO DE 250px: com tres planos numa tela larga ficam tres
   colunas, e num celular fica um embaixo do outro, sem breakpoint escrito. */
.pnl-pub .pnl-plano-grade {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 14px;
}

.pnl-pub .pnl-plano-card {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 20px;
    border: 1px solid rgba(255, 255, 255, .09);
    border-radius: 14px;
    background: rgba(255, 255, 255, .025);
}

.pnl-pub .pnl-plano-card-atual {
    border-color: rgba(231, 73, 231, .4);
    background: rgba(231, 73, 231, .06);
}

.pnl-pub .pnl-plano-card-topo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.pnl-pub .pnl-plano-card-nome {
    margin: 0;
    color: #fff;
    font-size: 17px;
    font-weight: 700;
}

.pnl-pub .pnl-plano-card-preco b {
    color: #fff;
    font-size: 26px;
    font-weight: 700;
    /* Numeros de mesma largura: sem isto os precos nao alinham entre as
       colunas, e comparar preco e o que esta grade existe para fazer. */
    font-variant-numeric: tabular-nums;
}

/* "Combinado" nao e um numero, e nao pode ter o corpo de um: no tamanho do
   preco ele vira a palavra mais pesada da grade, e a leitura passa a ser "o
   caro aqui e o combinado". */
.pnl-pub .pnl-plano-card-combinado { font-size: 24px; }

/* "direto com a Steactech" EM LINHA PROPRIA. Ao lado do preco funciona com
   "por mes", que sao sete letras; com vinte e duas a linha quebrou em
   "Combinado direto" / "com a Steactech", que lê como uma frase partida no
   meio. O resto da grade nao muda: so este card tem a legenda longa. */
.pnl-pub .pnl-plano-card-combinado + span { display: block; }

.pnl-pub .pnl-plano-card-preco span {
    color: #a98bb8;
    font-size: 12.5px;
}

.pnl-pub .pnl-plano-card-preco small {
    display: block;
    margin-top: 4px;
    color: #a98bb8;
    font-size: 12px;
}

.pnl-pub .pnl-plano-card-preco small b {
    color: #68d391;
    font-size: 12px;
}

.pnl-pub .pnl-plano-card-txt {
    margin: 0;
    color: #c9b6d4;
    font-size: 13px;
    line-height: 1.55;
}

/* O PE GRUDA EMBAIXO. Sem isto, o cartao com menos itens fica com o botao na
   altura do meio do vizinho, e a fileira de botoes vira uma escada. */
.pnl-pub .pnl-plano-card-pe { margin-top: auto; }

.pnl-pub .pnl-plano-card-btn { width: 100%; text-align: center; }

.pnl-pub .pnl-plano-card-agora {
    display: block;
    padding: 10px 0;
    color: #bff0d5;
    font-size: 13px;
    text-align: center;
}

.pnl-pub .pnl-plano-nota { margin-top: 16px; }

/* O formulario do botao nao pode mudar o desenho do rodape do card: ele existe
   so para o clique virar POST. */
.pnl-pub .pnl-plano-card-forma { margin: 0; }
.pnl-pub .pnl-plano-card-forma .pnl-plano-card-btn { width: 100%; }

/* O botao de gerenciar: discreto de proposito. Ele e manutencao, nao compra -
   competir em peso com "Assinar o Profissional" seria dar o mesmo destaque a
   "quero pagar mais" e a "quero cancelar". */
.pnl-pub .pnl-plano-gerenciar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin: 14px 0 0;
}

.pnl-pub .pnl-plano-gerenciar button {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    width: auto;
}

.pnl-pub .pnl-plano-gerenciar small {
    color: #a98bb8;
    font-size: 12.5px;
}

/* ---- o recado de quem voltou do pagamento ---- */

.pnl-pub .pnl-plano-recado {
    margin: 0 0 16px;
    padding: 13px 16px;
    border-radius: 12px;
    font-size: 13.5px;
    line-height: 1.6;
}

/* VERDE SO PARA O BOM, e nao roxo como o resto da tela: aqui a cor e a
   informacao, e o painel inteiro ja e roxo. */
.pnl-pub .pnl-plano-recado-bom {
    border: 1px solid rgba(74, 222, 128, .28);
    background: rgba(74, 222, 128, .09);
    color: #bdf0cd;
}

.pnl-pub .pnl-plano-recado-bom b { color: #dcfce7; }

.pnl-pub .pnl-plano-recado-ruim {
    border: 1px solid rgba(248, 113, 113, .3);
    background: rgba(248, 113, 113, .09);
    color: #f3c4c4;
}

.pnl-pub .pnl-plano-recado-ruim b { color: #fee2e2; }

/* ============================================================================
   O TERMO DE USO NA TELA (03/10/2026)
   ----------------------------------------------------------------------------
   Um contrato e feito para ser LIDO de cabo a rabo, e nao varrido em busca de
   um campo. Por isso aqui as medidas sao de texto corrido, e nao as do resto
   do painel:

     - largura maxima em `ch`, que mede em caracteres: por volta de 70 por
       linha e onde o olho acha o comeco da linha seguinte sem se perder. Num
       monitor de 1920 sem isso, cada linha teria 180 caracteres.
     - `line-height` mais alto que o do painel, pelo mesmo motivo.
     - os titulos de secao com respiro em cima, para a numeracao marcar onde
       um assunto acaba e outro comeca.

   O TEXTO VEM DO BANCO e usa tags simples (h3, p, ul, li, b, code). O CSS
   cobre essas, e nenhuma a mais - quando a versao 1.1 precisar de uma tabela,
   e aqui que ela ganha estilo.
   ========================================================================== */
/* AS DUAS COLUNAS: indice e texto (06/10/2026).
   -------------------------------------------------------------------------
   A Stefanie: "a pagina dos termos ficou estranha e espremida, use o tamanho
   inteiro da tela". A tela estava inteira; o que estava espremido era o
   conteudo, numa coluna de 72 caracteres com meio monitor vazio ao lado.

   ESTICAR O TEXTO SERIA A CURA ERRADA. Num monitor de 1920 a linha passaria
   de duzentos caracteres, e linha longa demais e o jeito mais rapido de
   perder o comeco da linha seguinte. O espaco que sobrava vira INDICE, que
   e o que um contrato de dezesseis secoes pede.

   `minmax(0, 76ch)` NA SEGUNDA COLUNA, e nao `1fr`: com `1fr` o texto voltaria
   a esticar ate a borda nos monitores grandes, trocando um problema pelo
   outro. Assim ele cresce ate uma medida boa e para. */
.pnl-termo-caixa-indice {
    display: grid;
    grid-template-columns: 250px minmax(0, 82ch);
    gap: 32px;
    align-items: start;

    /* CENTRADO, e nao colado na esquerda. Num monitor de 1900 o par
       indice + texto ocupa cerca de 1030px, e os 870 que sobram ficavam
       todos de um lado so - o que se le como "a pagina acabou antes da
       tela". Centrado, a mesma sobra vira margem dos dois lados, que e
       como qualquer documento longo se apresenta.

       A ALTERNATIVA ERA ESTICAR O TEXTO ate a borda, e ela e pior: a 1900px
       daria linha de mais de duzentos caracteres, e linha longa demais faz
       o olho perder o comeco da seguinte. Medida boa com margem larga le
       melhor do que medida ruim sem sobra. */
    justify-content: center;
}

/* O indice acompanha a rolagem. Sem isto ele e um enfeite que some no
   primeiro gesto, e num documento longo e justamente no meio dele que a
   pessoa quer pular para outra secao. */
.pnl-termo-indice {
    position: sticky;
    top: 18px;
    max-height: calc(100vh - 40px);
    overflow-y: auto;
    padding: 16px 18px;
    border: 1px solid rgba(231, 73, 231, .14);
    border-radius: 14px;
    background: rgba(231, 73, 231, .04);
}

.pnl-termo-indice ol {
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: none;
}

.pnl-termo-indice li { margin: 0; }

.pnl-termo-indice a {
    display: flex;
    align-items: baseline;
    gap: 9px;
    padding: 7px 9px;
    border-radius: 8px;
    color: #cdbcd6;
    font-size: 13px;
    line-height: 1.35;
    text-decoration: none;
}

.pnl-termo-indice a:hover,
.pnl-termo-indice a:focus-visible {
    background: rgba(231, 73, 231, .12);
    color: #fff;
}

/* O numero em largura fixa alinha os titulos numa coluna so, e e por isso
   que ele e `tabular-nums`: com fonte proporcional, o 1 e mais estreito que
   o 8 e a lista fica serrilhada. */
.pnl-termo-indice-num {
    flex-shrink: 0;
    width: 17px;
    color: #9376a1;
    font-size: 11.5px;
    font-variant-numeric: tabular-nums;
    text-align: right;
}

/* A ANCORA NAO PODE PARAR COLADA NO TOPO: o titulo da secao encostaria na
   borda da janela, e quem saltou nao veria que chegou. */
.pnl-termo h3 { scroll-margin-top: 20px; }
.pnl-termo h3:focus-visible { outline: none; }

/* NO ESTREITO, UMA COLUNA SO, e o indice vai para cima do texto - ali ele
   deixa de ser sticky, senao comeria metade da tela do celular. */
/* O aceite mora na coluna do TEXTO, e nao na do indice. */
.pnl-termo-caixa-indice .pnl-termo-aceite { grid-column: 2; }

@media (max-width: 1100px) {
    .pnl-termo-caixa-indice { grid-template-columns: minmax(0, 1fr); }
    .pnl-termo-caixa-indice .pnl-termo-aceite { grid-column: 1; }

    .pnl-termo-indice {
        position: static;
        max-height: none;
    }

    .pnl-termo-indice ol {
        display: flex;
        flex-wrap: wrap;
        gap: 2px 6px;
    }
}

.pnl-termo {
    color: #e8dcee;
    font-size: 14.5px;
    line-height: 1.75;
}

.pnl-termo h3 {
    margin: 34px 0 10px;
    color: #fff;
    font-size: 15.5px;
    font-weight: 700;
    line-height: 1.35;
}

.pnl-termo h3:first-child { margin-top: 0; }

.pnl-termo p  { margin: 0 0 14px; }
.pnl-termo ul { margin: 0 0 14px; padding-left: 22px; }
.pnl-termo li { margin-bottom: 7px; }
.pnl-termo b  { color: #fff; font-weight: 600; }

.pnl-termo code {
    padding: 1px 6px;
    border-radius: 5px;
    background: rgba(231, 73, 231, .12);
    color: #f0c8f0;
    font-size: 13px;
}

/* O ACEITE: a caixinha e o botao, separados do texto por uma linha.
   -------------------------------------------------------------------------
   A CAIXINHA E UM GESTO SEPARADO do botao, de proposito. Com um botao so
   escrito "aceito", o clique de quem queria rolar a pagina vira contrato.
   Dois gestos custam um segundo e tiram a duvida sobre o que a pessoa quis. */
.pnl-termo-aceite {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 22px;
    padding-top: 20px;
    border-top: 1px solid rgba(231, 73, 231, .16);
}

.pnl-termo-li {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    flex: 1 1 320px;
    margin: 0;
    color: #e8dcee;
    font-size: 14px;
    line-height: 1.5;
    cursor: pointer;
}

/* `width`/`height` explicitos e `accent-color` porque a regra global de
   formulario deste painel estica todo `input` para 100% da largura - sem
   isto, a caixinha vira uma barra atravessando a tela. */
.pnl-termo-li input[type="checkbox"] {
    flex-shrink: 0;
    width: 17px;
    height: 17px;
    margin: 2px 0 0;
    padding: 0;
    accent-color: #e749e7;
    cursor: pointer;
}

/* ============================================================================
   OS 7 DIAS PARA DESISTIR, na tela de Planos (06/10/2026)
   ----------------------------------------------------------------------------
   AMBAR, E NAO VERMELHO. Vermelho diria "algo deu errado"; aqui nao ha erro
   nenhum, ha um direito com prazo. E o mesmo ambar do selo "fora do plano" e
   do botao que vira aviso, e os tres querem dizer a mesma coisa: ha algo para
   voce resolver, sem susto.

   E NAO E UM BOTAO VERMELHO DE PERIGO, de proposito. Pedir o dinheiro de volta
   dentro do prazo e um direito normal, nao uma destruicao - pintar de vermelho
   seria o site torcendo para a pessoa nao clicar.
   ========================================================================== */
.pnl-plano-arrep {
    margin-top: 18px;
    padding: 16px 18px;
    border: 1px solid rgba(240, 185, 92, .3);
    border-radius: 13px;
    background: rgba(240, 185, 92, .06);
}

.pnl-plano-arrep-topo {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 8px;
    color: #fff;
    font-size: 14.5px;
}

/* A contagem e o que ela pediu: "mostra a data 1/7 2/7 7/7". Em pastilha
   porque e um numero que muda todo dia, e numero solto no meio de uma frase
   nao se acha de relance. */
.pnl-plano-arrep-dia {
    padding: 2px 10px;
    border-radius: 999px;
    background: #3a2a0c;
    border: 1px solid rgba(240, 185, 92, .35);
    color: #f0b95c;
    font-size: 11.5px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.pnl-plano-arrep-txt {
    max-width: 64ch;
    margin: 0 0 14px;
    color: #cdbcd6;
    font-size: 13px;
    line-height: 1.6;
}

.pnl-plano-arrep .pnl-termo-li { margin-bottom: 14px; }

/* ============================================================================
   PRIMEIROS PASSOS, na primeira tela do painel (06/10/2026)
   ----------------------------------------------------------------------------
   Pedido dela: "uma ajuda no 1 acesso, o que fazer, onde clicar". O bloco so
   existe enquanto falta um passo, e cada linha se marca sozinha pelo dado -
   o porque esta em admin/home.php.

   O FEITO FICA MAIS FRACO, e nao riscado. Texto riscado se le como "isto foi
   cancelado"; aqui foi CONCLUIDO, que e o contrario. O visto verde e a cor
   mais apagada dizem isso sem ambiguidade.
   ========================================================================== */
.pnl-home-passos {
    margin-bottom: 26px;
    padding: 20px 22px;
    border: 1px solid rgba(231, 73, 231, .16);
    border-radius: 16px;
    background: rgba(231, 73, 231, .05);
}

.pnl-home-passos-topo {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 6px;
}

.pnl-home-passos-topo .pnl-home-titulo { margin: 0; }

.pnl-home-passos-conta {
    padding: 2px 10px;
    border-radius: 999px;
    background: rgba(231, 73, 231, .14);
    color: #f0c8f0;
    font-size: 11.5px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.pnl-home-passos-txt {
    max-width: 62ch;
    margin: 0 0 16px;
    color: #cdbcd6;
    font-size: 13px;
    line-height: 1.6;
}

.pnl-home-passos-lista {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 8px;
}

.pnl-home-passo {
    display: flex;
    align-items: flex-start;
    gap: 11px;
}

/* A bolinha e o visto tem o MESMO tamanho e o mesmo lugar: a lista nao pode
   dancar para a direita conforme os passos vao fechando. */
.pnl-home-passo-marca {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 21px;
    height: 21px;
    margin-top: 2px;
    border-radius: 50%;
    background: #0d3a30;
    color: #6fe0c0;
}

.pnl-home-passo-marca-vazia {
    background: none;
    border: 1.5px dashed rgba(231, 73, 231, .4);
}

.pnl-home-passo-txt {
    display: block;
    min-width: 0;
    color: inherit;
    text-decoration: none;
}

.pnl-home-passo-txt b {
    display: block;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.35;
}

.pnl-home-passo-txt small {
    display: block;
    color: #9376a1;
    font-size: 12px;
    line-height: 1.45;
}

a.pnl-home-passo-txt:hover b,
a.pnl-home-passo-txt:focus-visible b { color: #f0c8f0; }

.pnl-home-passo-feito .pnl-home-passo-txt b { color: #9376a1; font-weight: 500; }
.pnl-home-passo-feito .pnl-home-passo-txt small { color: #6fe0c0; }


/* ============================================================================
   NOVIDADES, EM CARDS (06/10/2026)
   ----------------------------------------------------------------------------
   A primeira versao era uma lista de duas colunas - data a esquerda, texto a
   direita - e ocupava a largura inteira da tela para dizer tres linhas. A
   Stefanie: "novidades ta bem feio, o certo e ser em forma de card, mostrar um
   do lado do outro".

   `auto-fill` E NAO `auto-fit`, com minimo de 300px. Com `auto-fit`, uma busca
   que devolve um unico card faz esse card esticar para a largura toda - e o
   resultado parece um erro de desenho. `auto-fill` guarda as colunas vazias, e
   o card que sobrou continua com o tamanho dos outros.

   O CARD TEM ALTURA IGUAL a dos vizinhos da fileira (o grid ja faz isso), e o
   pe fica colado embaixo com `margin-top: auto` - sem isso, "Ver na minha
   conta" flutuaria no meio do card curto ao lado de um card longo.
   ========================================================================== */
.pnl-nov-intro { max-width: 70ch; margin-bottom: 18px; }

/* ---- A barra: filtro de um lado, busca do outro ---- */
.pnl-nov-barra {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 18px;
}

.pnl-nov-filtro {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.pnl-nov-chip {
    /* `width` e `margin` EXPLICITOS por causa de um `button { margin-top: 50px;
       width: 100% }` solto na linha 240 deste arquivo, heranca da tela de login
       antiga. Sem estas duas linhas os quatro chips viravam quatro barras
       empilhadas, cada uma com cinquenta pixels de respiro em cima - foi o que
       a primeira prova no navegador mostrou. */
    width: auto;
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 14px;
    border: 1px solid rgba(231, 73, 231, .16);
    border-radius: 999px;
    background: transparent;
    color: #cdbcd6;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    transition: background .16s ease, color .16s ease, border-color .16s ease;
}

.pnl-nov-chip:hover { background: rgba(231, 73, 231, .12); color: #fff; }

.pnl-nov-chip-aqui,
.pnl-nov-chip-aqui:hover {
    background: linear-gradient(90deg, #500580 0%, #b333c9 100%);
    border-color: transparent;
    color: #fff;
}

/* A CONTAGEM AO LADO DO NOME, como no filtro de secoes da pagina publica. Ela
   diz o tamanho de cada grupo ANTES do clique - sem ela, comparar "A conta"
   com "Planos" exige clicar nos dois. */
.pnl-nov-chip-num {
    padding: 1px 7px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .1);
    font-size: 11px;
    font-weight: 700;
}

.pnl-nov-chip-aqui .pnl-nov-chip-num { background: rgba(0, 0, 0, .22); }

/* O chip de "Novas para voce" veste a cor do selo, e nao a do filtro: ele nao
   e um assunto, e o mesmo recado ambar da bolinha do menu. */
.pnl-nov-chip-novas {
    border-color: rgba(240, 185, 92, .35);
    color: #f0b95c;
}

.pnl-nov-chip-novas:hover { background: rgba(240, 185, 92, .12); color: #f0b95c; }

.pnl-nov-chip-novas.pnl-nov-chip-aqui,
.pnl-nov-chip-novas.pnl-nov-chip-aqui:hover {
    background: #3a2a0c;
    border-color: rgba(240, 185, 92, .45);
    color: #f0b95c;
}

.pnl-nov-busca {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 1 260px;
    padding: 0 12px;
    border: 1px solid rgba(231, 73, 231, .16);
    border-radius: 999px;
    background: #120a18;
    color: #9376a1;
}

.pnl-nov-busca:focus-within {
    border-color: rgba(231, 73, 231, .45);
    color: #f0c8f0;
}

.pnl-nov-busca-campo {
    flex: 1 1 auto;
    min-width: 0;
    padding: 8px 0;
    border: 0;
    background: transparent;
    color: #fff;
    font-size: 13px;
    outline: none;
}

.pnl-nov-busca-campo::placeholder { color: #9376a1; }

.pnl-nov-busca-limpa {
    width: auto;
    margin: 0;
    border: 0;
    background: transparent;
    color: #9376a1;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    padding: 0 2px;
}

.pnl-nov-busca-limpa:hover { color: #fff; }

/* ---- A grade ---- */
.pnl-nov-grade {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 14px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.pnl-nov {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 16px 18px 14px;
    border: 1px solid rgba(231, 73, 231, .14);
    border-radius: 14px;
    background: #1b0f24;
}

/* O card novo se distingue pela BORDA, e nao pelo fundo: um fundo ambar em
   cinco cards de onze viraria a cor principal da tela. */
.pnl-nov-nova { border-color: rgba(240, 185, 92, .3); }

.pnl-nov-topo {
    display: flex;
    align-items: center;
    gap: 8px;
}

.pnl-nov-quando {
    color: #9376a1;
    font-size: 12px;
    line-height: 1.4;
}

/* O selo de "novo" e ambar, e nao verde: verde diria "concluido". Aqui e
   "olhe isto", que e o mesmo recado do selo "fora do plano" e da bolinha do
   menu - e os tres usam a mesma cor de proposito. */
.pnl-nov-selo {
    padding: 1px 8px;
    border-radius: 999px;
    background: #3a2a0c;
    border: 1px solid rgba(240, 185, 92, .35);
    color: #f0b95c;
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .4px;
}

.pnl-nov-titulo {
    margin: 0;
    color: #fff;
    font-size: 14.5px;
    font-weight: 600;
    line-height: 1.35;
}

.pnl-nov-texto {
    margin: 0;
    color: #cdbcd6;
    font-size: 13px;
    line-height: 1.6;
}

.pnl-nov-texto b { color: #fff; font-weight: 600; }

/* `margin-top: auto` cola o pe embaixo: na mesma fileira ha card de tres
   linhas e card de seis, e o link tem de ficar na mesma altura nos dois. */
.pnl-nov-pe {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: auto;
    padding-top: 10px;
}

.pnl-nov-area {
    padding: 2px 9px;
    border-radius: 999px;
    background: rgba(231, 73, 231, .1);
    color: #cdbcd6;
    font-size: 11px;
    font-weight: 600;
}

.pnl-nov-ir {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #f0c8f0;
    font-size: 12.5px;
    font-weight: 600;
    text-decoration: none;
}

.pnl-nov-ir:hover,
.pnl-nov-ir:focus-visible { color: #fff; text-decoration: underline; }

.pnl-nov-nada {
    margin: 18px 0 0;
    color: #9376a1;
    font-size: 13.5px;
}

@media (max-width: 720px) {
    .pnl-nov-barra { flex-direction: column; align-items: stretch; }
    .pnl-nov-busca { flex: 1 1 auto; }
    .pnl-nov-grade { grid-template-columns: minmax(0, 1fr); }
}

/* ============================================================================
   A BUSCA DO PAINEL - o botao no menu e o modal (06/10/2026)
   ----------------------------------------------------------------------------
   Pedido da Stefanie: busca no menu "para a pessoa pesquisar no geral do
   painel... e mostra o modal, estilo mac".

   O BOTAO NAO E UM CAMPO. Um input aberto no menu competiria com os itens pela
   leitura e ficaria vazio o tempo todo; o botao ocupa uma linha, diz o que faz
   e ensina o atalho com a tecla escrita na ponta.

   O MODAL ABRE NO TERCO DE CIMA, e nao centrado: e onde o Spotlight abre, e e
   onde o olho ja esta quando a pessoa aperta Ctrl+K. Centrado, ele pularia
   para o meio da tela e levaria a atencao junto.
   ========================================================================== */
.pnl-menu-busca {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    box-sizing: border-box;
    margin: 0 0 10px;
    padding: 8px 12px;
    border: 1px solid rgba(231, 73, 231, .16);
    border-radius: 9px;
    background: #120a18;
    color: #9376a1;
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
    transition: background .16s ease, color .16s ease, border-color .16s ease;
}

.pnl-menu-busca:hover,
.pnl-menu-busca:focus-visible {
    border-color: rgba(231, 73, 231, .45);
    background: rgba(231, 73, 231, .1);
    color: #fff;
}

/* `margin-left: auto` empurra a tecla para a outra ponta, onde ela nao
   disputa a leitura com a palavra "Buscar". */
.pnl-menu-busca-tecla {
    margin-left: auto;
    padding: 2px 7px;
    border: 1px solid rgba(231, 73, 231, .22);
    border-radius: 6px;
    color: #9376a1;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .3px;
    white-space: nowrap;
}

/* Recolhido, sobra o icone - e a tecla sai junto com o nome: ela nao tem onde
   caber em 68px, e a dica do hover continua dizendo o atalho. */
.pnl-menu-fechado .pnl-menu-busca {
    justify-content: center;
    padding: 10px 0;
}

.pnl-menu-fechado .pnl-menu-busca-tecla { display: none; }

/* ---- O modal ---- */
.pnl-bm {
    position: fixed;
    inset: 0;
    z-index: 9000;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 12vh 16px 16px;
    background: rgba(8, 4, 12, .62);
    backdrop-filter: blur(3px);
}

.pnl-bm[hidden] { display: none; }

/* Enquanto o modal esta aberto a pagina atras nao rola: rolar o fundo com um
   dialogo por cima faz a tela parecer quebrada. */
body.pnl-bm-aberto { overflow: hidden; }

.pnl-bm-caixa {
    width: 100%;
    max-width: 580px;
    max-height: 70vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid rgba(231, 73, 231, .22);
    border-radius: 16px;
    background: #1b0f24;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .55);
}

.pnl-bm-topo {
    display: flex;
    align-items: center;
    gap: 11px;
    flex-shrink: 0;
    padding: 14px 16px;
    border-bottom: 1px solid rgba(231, 73, 231, .14);
    color: #9376a1;
}

.pnl-bm-campo {
    flex: 1 1 auto;
    min-width: 0;
    border: 0;
    background: transparent;
    color: #fff;
    font-family: inherit;
    font-size: 15.5px;
    outline: none;
}

.pnl-bm-campo::placeholder { color: #9376a1; }

.pnl-bm-esc {
    width: auto;
    margin: 0;
    flex-shrink: 0;
    padding: 3px 8px;
    border: 1px solid rgba(231, 73, 231, .22);
    border-radius: 6px;
    background: transparent;
    color: #9376a1;
    font-family: inherit;
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .4px;
    cursor: pointer;
}

.pnl-bm-esc:hover { color: #fff; border-color: rgba(231, 73, 231, .45); }

.pnl-bm-lista {
    margin: 0;
    padding: 6px;
    list-style: none;
    overflow-y: auto;
}

.pnl-bm-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 12px;
    border-radius: 10px;
    cursor: pointer;
}

/* UMA CLASSE SO PARA O HOVER E PARA A SETA. O teclado e o mouse apontam a
   mesma linha, e duas marcas diferentes na tela ao mesmo tempo fariam a
   pessoa perguntar qual delas o Enter escolhe. */
.pnl-bm-item:hover,
.pnl-bm-item-aqui { background: rgba(231, 73, 231, .14); }

.pnl-bm-item-txt {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1 1 auto;
}

.pnl-bm-item-txt b {
    color: #fff;
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.3;
}

.pnl-bm-item-txt small {
    color: #9376a1;
    font-size: 11.5px;
    line-height: 1.35;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* O GRUPO E O QUE DESEMPATA dois resultados de nome parecido: "Imagens" em
   Tema e "Imagens" num card querem dizer coisas diferentes, e sem a etiqueta
   as duas linhas ficariam identicas. */
.pnl-bm-item-grupo {
    flex-shrink: 0;
    max-width: 44%;
    padding: 2px 9px;
    border-radius: 999px;
    background: rgba(231, 73, 231, .1);
    color: #cdbcd6;
    font-size: 11px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pnl-bm-vazio {
    margin: 0;
    padding: 18px 18px 22px;
    color: #9376a1;
    font-size: 13px;
    text-align: center;
}

@media (max-width: 720px) {
    .pnl-bm { padding-top: 8vh; }
    .pnl-bm-caixa { max-height: 80vh; }
    .pnl-bm-item-grupo { display: none; }
}

/* A CAIXA BRANCA EM VOLTA DO CAMPO, desfeita (06/10/2026).

   A linha 6136 deste arquivo poe `box-shadow` e `border-color` com
   `!important` em TODO `input:focus` do painel - uma regra antiga, feita para
   formulario de cadastro, onde a moldura ajuda. Nos dois campos de busca ela
   desenhava um retangulo claro no meio de um modal escuro, e foi o que a prova
   no navegador mostrou.

   `!important` aqui e a unica forma de desfazer `!important` de la. A
   alternativa seria tirar o `!important` da regra de cima, e isso mexeria no
   foco de todo formulario do painel para arrumar duas caixas de busca. */
.pnl-bm-campo:focus,
.pnl-nov-busca-campo:focus {
    border: 0 !important;
    box-shadow: none !important;
    outline: 0 !important;
}

/* O CAMPO DE BUSCA DAS NOVIDADES E O CAMPO DENTRO DA PILULA (06/10/2026).

   `.pnl-cl input[type='text']` (linha 10939) pinta todo campo do painel com
   44px de altura, borda magenta e cantos de 11px - e esta certo: e o campo
   padrao de formulario. O da busca mora DENTRO de uma pilula que ja tem a
   borda e o redondo, e com a regra padrao ele desenhava uma segunda caixa
   dentro da primeira.

   O SELETOR PRECISA DO `input[type='text']` para pesar mais do que aquele:
   `.pnl-nov-busca-campo` sozinho tem uma classe contra duas, e perdia. Nao e
   `!important` porque aqui a especificidade basta - e `!important` numa regra
   de aparencia e divida para a proxima pessoa. */
.pnl-cl input[type='text'].pnl-nov-busca-campo {
    width: auto;
    height: auto;
    padding: 8px 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    font-size: 13px;
}

/* O botao da paginacao das Novidades precisa desfazer o `button` solto da
   linha 240 (margin-top: 50px; width: 100%), como os chips do filtro logo
   acima - e o `cursor`/`background`, que ali tambem vem branco. */
.pnl-nov-paginas button {
    width: auto;
    margin: 0;
    background: none;
    font-family: inherit;
    cursor: pointer;
}

/* A seta desligada fica visivel e sem resposta, e nao escondida: sumir com o
   "anterior" na primeira pagina faz os outros botoes pularem de lugar a cada
   virada. */
.pnl-nov-paginas button:disabled {
    opacity: .35;
    cursor: default;
}

/* ============================================================================
   ENCERRAR A CONTA (06/10/2026)
   ----------------------------------------------------------------------------
   O VERMELHO E DA CAIXA, E NAO DO PAINEL. Esta e a unica tela do Ferret com
   cor de perigo, e ela precisa ser a unica: vermelho em tudo e vermelho em
   nada. Ele veste a borda e o botao, e para por ai - o texto continua na cor
   de sempre, porque texto vermelho se le como erro, e nao ha erro nenhum aqui.

   A CAIXA DO PEDIDO ABERTO E AMBAR, e nao vermelha. Ambar e o que este painel
   usa para "olhe isto" (o selo "novo", o "fora do plano", a bolinha do menu);
   vermelho e para "isto apaga". Um encerramento ja pedido nao esta apagando
   nada hoje - esta esperando, e o que a pessoa precisa ver ali e o prazo e a
   saida.
   ========================================================================== */
.pnl-enc-cartao {
    margin-top: 26px;
    border: 1px solid rgba(240, 92, 92, .3);
}

.pnl-enc-cartao .pnl-pub-rotulo { color: #f08c8c; }

/* A lista de alternativas vem ANTES do botao, e por isso ela nao pode parecer
   rodape: fundo proprio e recuo, para se ler como uma caixa dentro da caixa. */
.pnl-enc-antes {
    /* O marcador e dito aqui porque o painel zera `list-style` nas listas por
       padrao, e sem ele as duas alternativas se leem como um paragrafo so. */
    list-style: disc;
    margin: 14px 0;
    padding: 12px 16px 12px 32px;
    border-radius: 11px;
    background: rgba(231, 73, 231, .07);
    color: #cdbcd6;
    font-size: 13px;
    line-height: 1.6;
}

.pnl-enc-antes li + li { margin-top: 7px; }
.pnl-enc-antes b { color: #fff; }
.pnl-enc-antes a { color: #f0c8f0; }

.pnl-enc-form { margin-top: 16px; }

.pnl-enc-campo {
    display: block;
    margin: 14px 0 16px;
    color: #cdbcd6;
    font-size: 13px;
}

.pnl-enc-campo span { display: block; margin-bottom: 7px; }
.pnl-enc-campo b { color: #fff; font-family: monospace; font-size: 14px; }

/* O campo e CURTO de proposito: um endereco cabe em 280px, e um campo de
   largura inteira aqui pareceria o comeco de um formulario de cadastro. */
.pnl-enc-campo input { max-width: 280px; }

.pnl-enc-btn,
.pnl-enc-btn:hover {
    background: linear-gradient(90deg, #7a1d1d 0%, #c23b3b 100%) !important;
    border-color: rgba(240, 92, 92, .45) !important;
}

/* ---- a caixa de quem ja pediu ---- */
.pnl-enc-cartao-aberto { border-color: rgba(240, 185, 92, .35); }
.pnl-enc-cartao-aberto .pnl-pub-rotulo { color: #f0b95c; }

.pnl-enc-prazo {
    margin: 0 0 10px;
    color: #f0b95c;
    font-size: 16px;
    line-height: 1.4;
}

.pnl-enc-prazo b { color: #fff; }

/* ---- a faixa de toda tela ---- */
.pnl-encerrando {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin: 0 0 18px;
    padding: 11px 15px;
    border: 1px solid rgba(240, 185, 92, .35);
    border-radius: 11px;
    background: #3a2a0c;
    color: #f0d9a8;
    font-size: 13.5px;
    line-height: 1.5;
}

.pnl-encerrando b { color: #fff; }
.pnl-encerrando > span { flex: 1 1 260px; }

.pnl-encerrando-bt {
    flex-shrink: 0;
    padding: 6px 14px;
    border-radius: 999px;
    background: rgba(0, 0, 0, .3);
    color: #fff !important;
    font-size: 12.5px;
    font-weight: 600;
    text-decoration: none !important;
    white-space: nowrap;
}

.pnl-encerrando-bt:hover { background: rgba(0, 0, 0, .5); }

/* ---- o link de encerrar, no cartao do plano (06/10/2026) ----

   DISCRETO DE PROPOSITO, e essa e a decisao de desenho inteira. Ele fica numa
   tela que a pessoa abre para ver preco, e um botao vermelho ali competiria
   com a compra - mas escondê-lo seria pior: a saida tem de estar onde se
   procura. Entao ele e um link, com a cor de texto apagado, separado por uma
   linha do que vem acima.

   A SEGUNDA LINHA DIZ O QUE ELE FAZ. "Encerrar a conta" sozinho e ambiguo com
   "cancelar a assinatura" - sao a confusao mais cara desta tela, e a frase de
   baixo existe so para desfazê-la antes do clique. */
.pnl-plano-encerrar {
    margin: 18px 0 0;
    padding-top: 14px;
    border-top: 1px solid rgba(231, 73, 231, .12);
    font-size: 13px;
    line-height: 1.5;
}

/* O SUBLINHADO FICA, e nao e descuido: o painel sublinha todo link sem classe
   dentro do conteudo (`.pnl-pub a:not([class])`, que pesa mais do que isto
   aqui), e essa convencao esta certa - texto que leva a outro lugar tem de se
   distinguir do texto que so informa. Tentei tirar com `!important` e perdi;
   perder foi o resultado bom. O que esta regra muda e so a cor. */
.pnl-plano-encerrar a {
    color: #c98f8f !important;
    font-weight: 600;
}

.pnl-plano-encerrar a:hover,
.pnl-plano-encerrar a:focus-visible { color: #f08c8c !important; }

.pnl-plano-encerrar small {
    display: block;
    margin-top: 3px;
    color: #9376a1;
    font-size: 12px;
}

/* Com pedido aberto o link vira ambar e some o `small`: ali ele nao esta mais
   oferecendo a saida, esta avisando que ela ja foi pedida. */
.pnl-plano-encerrar-aberto a { color: #f0b95c !important; }
.pnl-plano-encerrar-aberto a:hover { color: #f0d9a8 !important; }

/* ---- a tela de encerrar ---- */

/* O QUE SE PERDE, EM NUMERO. Cada linha e um numero grande e uma explicacao
   pequena: e a forma que faz a pessoa parar para ler, que e o unico objetivo
   desta lista. */
.pnl-enc-perde {
    margin: 4px 0 0;
    padding: 0;
    list-style: none;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 12px;
}

.pnl-enc-perde li {
    padding: 13px 15px;
    border: 1px solid rgba(240, 92, 92, .2);
    border-radius: 11px;
    background: rgba(240, 92, 92, .05);
}

.pnl-enc-perde b {
    display: block;
    color: #fff;
    font-size: 15px;
    line-height: 1.3;
    word-break: break-word;
}

.pnl-enc-perde small {
    display: block;
    margin-top: 5px;
    color: #cdbcd6;
    font-size: 12px;
    line-height: 1.45;
}

/* As acoes lado a lado, com a saida em texto: um segundo botao do mesmo peso
   ao lado do vermelho faria os dois parecerem a mesma coisa. */
.pnl-enc-acoes {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
}

.pnl-enc-cancela {
    color: #cdbcd6 !important;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none !important;
}

.pnl-enc-cancela:hover { color: #fff !important; text-decoration: underline !important; }

.pnl-enc-volta {
    margin: 18px 0 0;
    font-size: 13px;
}

.pnl-enc-volta a { color: #f0c8f0 !important; }

/* ============================================================================
   DENUNCIAS - a fila da Steactech (06/10/2026)
   ----------------------------------------------------------------------------
   LISTA, E NAO GRADE. As Novidades viraram cards porque sao leitura solta e a
   pessoa quer ver muitas de relance; uma denuncia e trabalho: le-se uma, faz-se
   alguma coisa, fecha-se. Em fileira de tres, o texto de cada uma ficaria
   espremido em 300px e a linha de botoes nao caberia.

   O VERMELHO E SO DOS TRES MOTIVOS GRAVES. Se toda denuncia fosse vermelha, a
   cor nao diria mais nada - e e justamente nela que esta a unica decisao que
   esta tela precisa induzir: o que olhar primeiro.
   ========================================================================== */
.pnl-den-filtro { margin-bottom: 18px; }

/* O chip do filtro e um <a> aqui (a tela recarrega) e um <button> nas
   Novidades. A regra de la alcanca os dois, menos o sublinhado que o painel
   poe em link sem classe - e este tem classe, entao nao e alcancado. */
.pnl-nov-chip { text-decoration: none !important; }

.pnl-den-lista {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.pnl-den {
    padding: 16px 18px;
    border: 1px solid rgba(231, 73, 231, .14);
    border-radius: 14px;
    background: #1b0f24;
}

.pnl-den-nova  { border-color: rgba(240, 185, 92, .3); }
.pnl-den-grave { border-color: rgba(240, 92, 92, .4); }

.pnl-den-topo {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 9px;
    margin-bottom: 9px;
}

.pnl-den-motivo {
    padding: 3px 11px;
    border-radius: 999px;
    background: rgba(231, 73, 231, .12);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
}

.pnl-den-motivo-grave {
    background: rgba(240, 92, 92, .16);
    color: #f0b3b3;
}

.pnl-den-sit {
    padding: 2px 9px;
    border-radius: 999px;
    border: 1px solid rgba(231, 73, 231, .22);
    color: #cdbcd6;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .3px;
}

.pnl-den-sit-nova      { border-color: rgba(240, 185, 92, .4); color: #f0b95c; }
.pnl-den-sit-resolvida { border-color: rgba(111, 224, 192, .4); color: #6fe0c0; }

.pnl-den-quando { margin-left: auto; color: #9376a1; font-size: 12px; }

.pnl-den-alvo { margin: 0 0 8px; font-size: 13.5px; }
.pnl-den-alvo a { color: #f0c8f0 !important; font-weight: 600; }

.pnl-den-conta { color: #9376a1; font-size: 12.5px; margin-left: 6px; }
.pnl-den-conta-sumida { font-style: italic; }

.pnl-den-texto {
    margin: 0 0 10px;
    padding: 11px 14px;
    border-radius: 10px;
    background: rgba(255, 255, 255, .03);
    color: #cdbcd6;
    font-size: 13.5px;
    line-height: 1.6;
    /* O texto vem de um formulario PUBLICO: uma palavra de 300 caracteres sem
       espaco estouraria a caixa, e isso e trivial de mandar de proposito. */
    overflow-wrap: anywhere;
}

.pnl-den-meta { margin: 0 0 12px; color: #9376a1; font-size: 12px; }
.pnl-den-meta a { color: #cdbcd6 !important; }

.pnl-den-nota {
    margin: 0 0 12px;
    padding: 10px 14px;
    border-left: 3px solid rgba(111, 224, 192, .5);
    border-radius: 0 8px 8px 0;
    background: rgba(111, 224, 192, .06);
    color: #cdbcd6;
    font-size: 13px;
}

.pnl-den-nota b { color: #fff; }
.pnl-den-nota small { display: block; margin-top: 3px; color: #9376a1; font-size: 11.5px; }

.pnl-den-acoes {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

/* `width: auto; margin: 0` de novo por causa do `button { margin-top: 50px;
   width: 100% }` da linha 240. Ver o comentario nos chips das Novidades. */
.pnl-den-bt {
    width: auto;
    margin: 0;
    padding: 7px 14px;
    border: 1px solid rgba(231, 73, 231, .22);
    border-radius: 9px;
    background: transparent;
    color: #cdbcd6;
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
}

.pnl-den-bt:hover { background: rgba(231, 73, 231, .14); color: #fff; }

.pnl-den-bt-ok {
    border-color: rgba(111, 224, 192, .4);
    color: #6fe0c0;
}

.pnl-den-bt-ok:hover { background: rgba(111, 224, 192, .14); color: #6fe0c0; }

.pnl-den-bt-fraco { opacity: .65; }

/* O campo da nota toma o espaco que sobra e empurra os botoes para a direita,
   mas nunca abaixo de 180px: espremido, ele deixa de caber uma frase. */
.pnl-cl input[type='text'].pnl-den-campo {
    flex: 1 1 180px;
    width: auto;
    min-width: 180px;
    height: auto;
    padding: 8px 12px;
    border-radius: 9px;
    font-size: 12.5px;
}

/* ---- falar com quem publicou, na denuncia (06/10/2026) ----

   OS BOTOES MOSTRAM O VALOR, e nao so o icone: numa conta com tres numeros,
   tres icones iguais obrigariam a passar o mouse em cada um para saber qual
   e qual. Na lista de Contas a escolha e a oposta (so o icone), e o motivo e
   o espaco: la sao 35 linhas numa tabela, aqui sao duas ou tres por denuncia. */
.pnl-den-falar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 0 0 12px;
    padding: 10px 14px;
    border-radius: 10px;
    background: rgba(231, 73, 231, .06);
}

.pnl-den-falar-rot {
    color: #9376a1;
    font-size: 12px;
    font-weight: 600;
}

.pnl-den-contato {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 11px;
    border: 1px solid rgba(231, 73, 231, .22);
    border-radius: 999px;
    color: #cdbcd6 !important;
    font-size: 12.5px;
    font-weight: 600;
    text-decoration: none !important;
    white-space: nowrap;
}

.pnl-den-contato:hover { background: rgba(231, 73, 231, .16); color: #fff !important; }

/* O verde do WhatsApp e o unico lugar do painel onde uma cor de marca entra,
   e ela se paga: numa fila de contatos, achar "o do zap" tem de ser instantaneo. */
.pnl-den-contato-whatsapp {
    border-color: rgba(37, 211, 102, .35);
    color: #6fe0a0 !important;
}

.pnl-den-contato-whatsapp:hover { background: rgba(37, 211, 102, .14); color: #8ff0bc !important; }

.pnl-den-contato-ficha { opacity: .75; font-weight: 500; }

.pnl-den-sem-contato { font-style: italic; }
.pnl-den-sem-contato a { color: #f0c8f0 !important; }

/* ---- e na lista de Contas, so o icone ---- */
.pnl-acs-contato { white-space: nowrap; }

.pnl-acs-fala {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    margin-right: 4px;
    border: 1px solid rgba(231, 73, 231, .22);
    border-radius: 8px;
    color: #cdbcd6 !important;
    text-decoration: none !important;
}

.pnl-acs-fala:hover { background: rgba(231, 73, 231, .16); color: #fff !important; }

.pnl-acs-fala-whatsapp {
    border-color: rgba(37, 211, 102, .35);
    color: #6fe0a0 !important;
}

.pnl-acs-fala-whatsapp:hover { background: rgba(37, 211, 102, .14); color: #8ff0bc !important; }


/* ============================================================================
   A BOLINHA DOS PRIMEIROS PASSOS (13/10/2026)
   ----------------------------------------------------------------------------
   A Stefanie: "os primeiros passos estão colados no topo, acho que seria legal
   ter um card, igual o da busca no site, mas no painel". O bloco saiu da visão
   geral e virou isto: um botão redondo no canto, que abre a lista por cima de
   qualquer tela do painel.

   AS CORES SÃO AS DO BLOCO QUE ELA SUBSTITUI, de propósito: é a mesma lista,
   no mesmo painel, e inventar uma segunda paleta para ela seria dizer que é
   outra coisa.

   NO CANTO DIREITO DE BAIXO, e não no esquerdo: o menu do painel mora à
   esquerda, e no celular ele vira gaveta que sai justamente dali.
   ========================================================================== */
.pnl-passos {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 1200;   /* acima do conteúdo e do véu da gaveta, abaixo do Swal */
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 12px;
    max-width: calc(100vw - 32px);
}

/* ---- o botão redondo ---- */
.pnl-passos-bola {
    /* ZERA A REGRA GLOBAL DE `button` DO PAINEL (estilo.css:240):
       margin-top: 50px, width: 100%, padding: 15px 0, fundo branco.
       Ela alcanca todo botao do painel, e foi ela que empurrou o X
       deste painel 50px para baixo do titulo na primeira medicao. */
    margin: 0;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    padding: 0;
    border: 1px solid rgba(231, 73, 231, .3);
    border-radius: 50%;
    background: #2a1430;
    color: #f0c8f0;
    box-shadow: 0 10px 26px rgba(0, 0, 0, .45);
    cursor: pointer;
    transition: transform .16s ease, background .16s ease, border-color .16s ease;
}

.pnl-passos-bola:hover,
.pnl-passos-bola:focus-visible {
    transform: translateY(-2px);
    background: #3a1b43;
    border-color: rgba(231, 73, 231, .55);
}

/* O SELO DIZ QUANTOS FALTAM, e esse é o motivo de a bolinha ser notada sem
   piscar nem pular: um número pequeno no canto conta a mesma coisa que uma
   animação, e não atrapalha quem está editando. */
.pnl-passos-selo {
    position: absolute;
    top: -3px;
    right: -3px;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    border-radius: 999px;
    background: #e749e7;
    color: #fff;
    font-size: 11.5px;
    font-weight: 700;
    line-height: 20px;
    font-variant-numeric: tabular-nums;
}

/* ---- o painel que ela abre ---- */
.pnl-passos-caixa {
    width: 330px;
    max-width: 100%;
    padding: 18px 20px 16px;
    border: 1px solid rgba(231, 73, 231, .2);
    border-radius: 16px;
    background: #1b0f21;
    box-shadow: 0 22px 54px rgba(0, 0, 0, .55);
}

.pnl-passos-topo {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.pnl-passos-titulo {
    margin: 0;
    color: #fff;
    font-size: 15px;
    font-weight: 700;
}

.pnl-passos-conta {
    margin: 2px 0 0;
    color: #9376a1;
    font-size: 12px;
    font-variant-numeric: tabular-nums;
}

.pnl-passos-x {
    margin: 0;   /* idem: a regra global de `button` - ver a bolinha acima */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #9376a1;
    cursor: pointer;
}

.pnl-passos-x:hover { background: rgba(231, 73, 231, .14); color: #fff; }

.pnl-passos-lista {
    display: grid;
    gap: 13px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.pnl-passo { display: flex; align-items: flex-start; gap: 10px; }

.pnl-passo-marca {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    margin-top: 2px;
    border-radius: 50%;
    background: #0d3a30;
    color: #6fe0c0;
}

.pnl-passo-marca-vazia {
    background: none;
    border: 1.5px dashed rgba(231, 73, 231, .4);
}

.pnl-passo-txt {
    display: block;
    min-width: 0;
    color: inherit;
    text-decoration: none;
}

.pnl-passo-txt b {
    display: block;
    color: #fff;
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.35;
}

.pnl-passo-txt small {
    display: block;
    color: #9376a1;
    font-size: 11.5px;
    line-height: 1.45;
}

a.pnl-passo-txt:hover b,
a.pnl-passo-txt:focus-visible b { color: #f0c8f0; }

.pnl-passo-feito .pnl-passo-txt b { color: #9376a1; font-weight: 500; }
.pnl-passo-feito .pnl-passo-txt small { color: #6fe0c0; }

.pnl-passos-rodape {
    margin: 14px 0 0;
    padding-top: 12px;
    border-top: 1px solid rgba(231, 73, 231, .14);
    color: #7d6489;
    font-size: 11.5px;
    line-height: 1.5;
}

/* NO CELULAR O PAINEL OCUPA A LARGURA, com a bolinha um pouco mais acima: ali
   embaixo, no canto, fica o lugar por onde o dedo segura o aparelho. */
@media (max-width: 600px) {
    .pnl-passos { right: 14px; bottom: 14px; left: 14px; align-items: flex-end; }
    .pnl-passos-caixa { width: 100%; }
}