/* =====================================================================
   BOTOES LIQUID NAS CORES MAJUFER (28/09/2026)
   Pedido do Rafael: trocar o visual dos botões de GRAVAR/SALVAR/
   REGISTRAR/CONFIRMAR (ouro), EXCLUIR (vermelho) e CANCELAR/EDITAR
   (neutro) por um estilo "liquid" — pílula com uma bolha de luz que
   entra pelo canto no hover — nas cores já usadas no projeto (ver
   :root em css/styles.css). Prévia aprovada em
   scratchpad/botoes-liquid/previa.html.

   Arquivo À PARTE de propósito: nenhuma regra de styles.css/gpd.css/
   almoxarifado.css/producao.css/recibo.css/margem.css foi reescrita,
   só sobreposta aqui — este link entra DEPOIS de todos os outros CSS
   em cada página, então a especificidade normal já basta pra vencer,
   sem !important em lugar nenhum. Pra desfazer: tirar o <link> deste
   arquivo da página.

   Truque pra não repetir "texto sob o brilho" (bug já corrigido 6x
   neste projeto, sempre por falta de <span> em volta do texto): em vez
   de exigir <span> em cada botão gerado por JS, a bolha (::before) leva
   z-index:-1 dentro de um botão com position:relative + z-index:0. Um
   descendente com z-index NEGATIVO pinta ANTES do texto normal do botão
   (nível "conteúdo em fluxo" da ordem de pintura do CSS), então o texto
   solto — sem span nenhum — sempre fica por cima da bolha. NÃO usar essa
   bolha em .auth-submit: ele já usa ::before (brilho) e ::after (sheen)
   com um esquema de z-index defensivo próprio (ver nota em
   css/styles.css); aqui só trocamos a cor/gradiente dele, sem mexer
   nessa engenharia.

   NÃO mexe na ANIMAÇÃO do componente de exclusão (css/gulp-delete.css /
   gulpConfirmDelete, o botão que "engole" as letras) — ele já tem sua
   própria coreografia de estados (data-state idle/eat/furl/done/err) e um
   esquema de z-index/clip-path próprio; mexer nos pseudo-elementos dele é
   reabrir essa engenharia. Só recebeu um ajuste ADITIVO e seguro: as
   variáveis --face-1/--face-2/--face-3 (que já eram o ponto de extensão
   pensado pro componente — é assim que .gulp--graphite/.gulp--gravar
   mudam de cor) foram alinhadas ao MESMO vermelho das outras pílulas
   liquid. Nenhuma regra estrutural nova. O "Cancelar" ao lado
   (.gulp-modal-cancelar) ganhou o liquid completo (é uma pílula simples,
   sem animação).

   Botões só-ícone (×) — .pf-modal-close, .margem-excluir, e o subconjunto
   fechar/excluir de .btn-ico (crm.html/mensagens.html) — ganharam o
   liquid em versão REDONDA (border-radius:50%, mesmo tamanho de hoje),
   não a pílula larga. Ver seção 6.

   FORA DE ESCOPO: navegação (voltar ←, abas do menu lateral), qualquer
   botão que não seja Salvar/Gravar/Registrar/Confirmar/Enviar, Excluir,
   Cancelar, Editar ou um secundário que sente ao lado deles na mesma
   linha/rodapé (Imprimir, Sair, "+ Nova conversa"...). Lista completa de
   exclusões no relatório do agente.
   ===================================================================== */

/* ---------------------------------------------------------------------
   1) .auth-submit — botão dourado principal dos modais/login, em TODAS
   as telas que o usam (index/gpd/almoxarifado/producao/recibo/margem/
   mapa-visitas). Só reskina cor/gradiente/sombra pro tom "liquid ouro";
   a engenharia de ::before/::after/span (brilho + sheen) continua
   intocada.
   --------------------------------------------------------------------- */
.auth-submit{
  border-radius:999px;
  background:linear-gradient(135deg, #FFDA6B 0%, var(--accent) 55%, var(--accent-deep) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.65),
    inset 0 -10px 14px -6px rgba(120,80,0,0.4),
    0 10px 24px -10px rgba(242,183,5,0.6);
}

/* ---------------------------------------------------------------------
   2) Receita "liquid" genérica (bolha via ::before, z-index:-1).
   Reaproveitada por classe/atributo em cada tela abaixo — sem duplicar
   o bloco inteiro, só a cor muda por bucket (ouro/perigo/neutro).
   --------------------------------------------------------------------- */

/* ---- OURO (ação principal: salvar/gravar/registrar/confirmar) ---- */
.gpd-visita-edit-salvar,
.gpd-mix-conc-confirmar,
.gpd-mix-step-btn.gpd-rot-gravar,
#gpdMixGeralBtn,
#gpdMixImportBtn{
  position:relative;
  z-index:0;
  overflow:hidden;
  border-radius:999px;
  border-color:transparent;
  background:linear-gradient(135deg, #FFDA6B 0%, var(--accent) 55%, var(--accent-deep) 100%);
  color:#241a02;
  box-shadow:0 10px 20px -10px rgba(242,183,5,0.55);
  transition:transform .18s ease, box-shadow .18s ease;
}
.gpd-visita-edit-salvar::before,
.gpd-mix-conc-confirmar::before,
.gpd-mix-step-btn.gpd-rot-gravar::before,
#gpdMixGeralBtn::before,
#gpdMixImportBtn::before{
  content:'';
  position:absolute;
  z-index:-1;
  width:100%; height:220%;
  top:-160%; left:-60%;
  border-radius:50%;
  background:rgba(255,255,255,0.35);
  transition:top .5s ease, left .5s ease, transform .5s ease;
  pointer-events:none;
}
.gpd-visita-edit-salvar:hover:not(:disabled)::before,
.gpd-mix-conc-confirmar:hover:not(:disabled)::before,
.gpd-mix-step-btn.gpd-rot-gravar:hover:not(:disabled)::before,
#gpdMixGeralBtn:hover::before,
#gpdMixImportBtn:hover::before{
  top:50%; left:50%; transform:translate(-50%,-50%);
}
.gpd-visita-edit-salvar:hover:not(:disabled),
.gpd-mix-conc-confirmar:hover:not(:disabled),
.gpd-mix-step-btn.gpd-rot-gravar:hover:not(:disabled),
#gpdMixGeralBtn:hover,
#gpdMixImportBtn:hover{
  color:#241a02;
  transform:translateY(-1px);
}
.gpd-visita-edit-salvar:disabled,
.gpd-mix-conc-confirmar:disabled,
.gpd-mix-step-btn.gpd-rot-gravar:disabled{ color:#241a02; }

/* ---- PERIGO (excluir) ---- */
.almox-row-btn.danger,
.producao-entry-del,
.recibo-item-excluir,
.gpd-visita-edit-excluir{
  position:relative;
  z-index:0;
  overflow:hidden;
  border-radius:999px;
  border-color:transparent;
  background:linear-gradient(135deg, #ff7a7b 0%, var(--bad) 55%, #a8282a 100%);
  color:#fff;
  box-shadow:0 8px 18px -10px rgba(225,89,90,0.6);
  transition:transform .18s ease, box-shadow .18s ease;
}
.almox-row-btn.danger::before,
.producao-entry-del::before,
.recibo-item-excluir::before,
.gpd-visita-edit-excluir::before{
  content:'';
  position:absolute;
  z-index:-1;
  width:100%; height:220%;
  top:-160%; left:-60%;
  border-radius:50%;
  background:rgba(255,255,255,0.3);
  transition:top .5s ease, left .5s ease, transform .5s ease;
  pointer-events:none;
}
.almox-row-btn.danger:hover::before,
.producao-entry-del:hover::before,
.recibo-item-excluir:hover::before,
.gpd-visita-edit-excluir:hover:not(:disabled)::before{
  top:50%; left:50%; transform:translate(-50%,-50%);
}
.almox-row-btn.danger:hover,
.producao-entry-del:hover,
.recibo-item-excluir:hover,
.gpd-visita-edit-excluir:hover:not(:disabled){ color:#fff; }

/* ---- NEUTRO (cancelar / editar / secundário — inclui os botões que ficam
   ao lado de Editar/Excluir/Salvar/Cancelar na mesma linha/rodapé, pra ficar
   uniforme: "Movimentar" do Estoque, "Escolher foto" do item). Trocado de
   [data-action^="edit-"] pra [data-action] (sem `.danger`) pra pegar
   Movimentar/Desfazer/Recibo/PDF/WhatsApp junto — mas NÃO "Limpar filtros"
   nem "Atualizar"/"+ Incluir" (esses não têm data-action, ficam de fora de
   propósito: são filtro/navegação, não ação de linha). ---- */
.almox-row-btn[data-action]:not(.danger),
#almoxItemFotoEscolherBtn,
.recibo-item-acoes [data-pdf-id],
.gpd-visita-edit-open,
.gpd-visita-edit-cancelar,
.gulp-modal-cancelar{
  position:relative;
  z-index:0;
  overflow:hidden;
  border-radius:999px;
  background:linear-gradient(135deg, var(--panel-2, #3a4250) 0%, var(--panel, #232933) 100%);
  transition:transform .18s ease, box-shadow .18s ease, color .18s ease, border-color .18s ease;
}
.almox-row-btn[data-action]:not(.danger)::before,
#almoxItemFotoEscolherBtn::before,
.recibo-item-acoes [data-pdf-id]::before,
.gpd-visita-edit-open::before,
.gpd-visita-edit-cancelar::before,
.gulp-modal-cancelar::before{
  content:'';
  position:absolute;
  z-index:-1;
  width:100%; height:220%;
  top:-160%; left:-60%;
  border-radius:50%;
  background:rgba(255,255,255,0.08);
  transition:top .5s ease, left .5s ease, transform .5s ease;
  pointer-events:none;
}
.almox-row-btn[data-action]:not(.danger):hover::before,
#almoxItemFotoEscolherBtn:hover::before,
.recibo-item-acoes [data-pdf-id]:hover::before,
.gpd-visita-edit-open:hover::before,
.gpd-visita-edit-cancelar:hover:not(:disabled)::before,
.gulp-modal-cancelar:hover::before{
  top:50%; left:50%; transform:translate(-50%,-50%);
}
.almox-row-btn[data-action]:not(.danger):hover,
#almoxItemFotoEscolherBtn:hover,
.recibo-item-acoes [data-pdf-id]:hover{ color:var(--accent); }

/* ---- VERDE (ação segura, não-destrutiva, própria de "Editar/mover" na
   Produção) — pedido explícito: manter o verde do vidro 3D de hoje, só
   trocando pra receita liquid (gradiente diagonal + bolha), continua
   claramente diferente do vermelho do Excluir ao lado. ---- */
.producao-entry-mover{
  position:relative;
  z-index:0;
  overflow:hidden;
  border-radius:999px;
  background:linear-gradient(135deg, #7ddba0 0%, #2f9d5f 55%, #175a34 100%);
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,0.5),
    inset 0 -5px 8px -4px rgba(10,60,30,0.5),
    0 8px 18px -10px rgba(80,200,130,0.5);
  transition:transform .18s ease, box-shadow .18s ease;
}
.producao-entry-mover::before{
  content:'';
  position:absolute;
  z-index:-1;
  width:100%; height:220%;
  top:-160%; left:-60%;
  border-radius:50%;
  background:rgba(255,255,255,0.3);
  transition:top .5s ease, left .5s ease, transform .5s ease;
  pointer-events:none;
}
.producao-entry-mover:hover::before{ top:50%; left:50%; transform:translate(-50%,-50%); }
.producao-entry-mover:hover{ color:#fff; }

/* .gpd-visita-edit-open/.gpd-visita-edit-cancelar vivem num modal SEMPRE
   claro (cores fixas em css/gpd.css, não seguem o tema do app — ver
   .gpd-visita-edit em css/gpd.css), por isso o neutro aqui é claro e não
   usa var(--panel)/var(--panel-2) (que são do tema escuro). */
.gpd-visita-edit-open{
  background:linear-gradient(135deg, #ffffff 0%, #dfe4ec 100%);
  box-shadow:inset 0 0 0 1px #cfd5de;
  color:#1b2230;
}
.gpd-visita-edit-open::before{ background:rgba(0,0,0,0.06); }
.gpd-visita-edit-open:hover{ color:#1b2230; border-color:var(--steel); }
.gpd-visita-edit-cancelar{
  background:linear-gradient(135deg, #ffffff 0%, #dfe4ec 100%);
  box-shadow:inset 0 0 0 1px #cfd5de;
  color:#5A6270;
}
.gpd-visita-edit-cancelar::before{ background:rgba(0,0,0,0.06); }
.gpd-visita-edit-cancelar:hover:not(:disabled){ color:#1b2230; }

/* .gulp-modal-cancelar troca de paleta claro/escuro junto com o resto do
   modal (.gulp-modal--light), então o neutro escuro acima é o padrão e
   este bloco só ajusta a variante clara. */
.gulp-modal--light .gulp-modal-cancelar{
  background:linear-gradient(135deg, #ffffff 0%, #dfe4ec 100%);
  box-shadow:inset 0 0 0 1px #cfd5de;
  color:#5A6270;
}
.gulp-modal--light .gulp-modal-cancelar::before{ background:rgba(0,0,0,0.06); }
.gulp-modal--light .gulp-modal-cancelar:hover{ color:#1B2233; }

/* ---- VERMELHO SUAVE (exclusão PARCIAL — "Remover 1 visita" mantém as
   outras do mês, não é a mesma decisão que "Excluir visita"). Mesmo modal
   sempre claro do .gpd-visita-edit-*: contorno vermelho + fundo quase
   branco com um toque de vermelho, bem mais claro que o gradiente cheio
   do .gpd-visita-edit-excluir ao lado. ---- */
.gpd-visita-edit-menos{
  position:relative;
  z-index:0;
  overflow:hidden;
  border-radius:999px;
  background:linear-gradient(135deg, #FFF4F4 0%, #FCE4E4 100%);
  box-shadow:inset 0 0 0 1px rgba(200,60,60,0.45);
  color:#B23434;
}
.gpd-visita-edit-menos::before{
  content:'';
  position:absolute;
  z-index:-1;
  width:100%; height:220%;
  top:-160%; left:-60%;
  border-radius:50%;
  background:rgba(225,89,90,0.14);
  transition:top .5s ease, left .5s ease, transform .5s ease;
  pointer-events:none;
}
.gpd-visita-edit-menos:hover:not(:disabled)::before{ top:50%; left:50%; transform:translate(-50%,-50%); }
.gpd-visita-edit-menos:hover:not(:disabled){ color:#8A1F1F; }

/* ---------------------------------------------------------------------
   3) remoto.html (Chrome Remote Desktop) — tema fixo escuro, já tem
   --accent/--bad no :root. "Salvar conta" era um .btn liso; Renomear/
   Remover das máquinas (.maq-acoes) já eram editar/excluir.
   --------------------------------------------------------------------- */
#btnConta{
  position:relative;
  z-index:0;
  overflow:hidden;
  border-radius:999px;
  border-color:transparent;
  /* remoto.html não define --accent-deep (só styles.css define) — fallback
     evita var() inválida derrubando o background inteiro (button ficava
     transparente/ilegível). */
  background:linear-gradient(135deg, #FFDA6B 0%, var(--accent) 55%, var(--accent-deep, #B98600) 100%);
  color:#241a02;
  font-weight:700;
}
#btnConta::before{
  content:'';
  position:absolute;
  z-index:-1;
  width:100%; height:220%;
  top:-160%; left:-60%;
  border-radius:50%;
  background:rgba(255,255,255,0.35);
  transition:top .5s ease, left .5s ease, transform .5s ease;
  pointer-events:none;
}
#btnConta:hover::before{ top:50%; left:50%; transform:translate(-50%,-50%); }
#btnConta:hover{ color:#241a02; background:linear-gradient(135deg, #FFDA6B 0%, var(--accent) 55%, var(--accent-deep, #B98600) 100%); }

.maq-acoes [data-editar],
.maq-acoes [data-excluir],
.maq-acoes [data-copiar]{
  position:relative;
  z-index:0;
  overflow:hidden;
  border-radius:999px;
}
.maq-acoes [data-editar]::before,
.maq-acoes [data-excluir]::before,
.maq-acoes [data-copiar]::before{
  content:'';
  position:absolute;
  z-index:-1;
  width:100%; height:220%;
  top:-160%; left:-60%;
  border-radius:50%;
  transition:top .5s ease, left .5s ease, transform .5s ease;
  pointer-events:none;
}
.maq-acoes [data-editar]:hover::before,
.maq-acoes [data-excluir]:hover::before,
.maq-acoes [data-copiar]:hover::before{ top:50%; left:50%; transform:translate(-50%,-50%); }
.maq-acoes [data-editar],
.maq-acoes [data-copiar]{ background:linear-gradient(135deg,#3a4250,#232933); color:#EDEBE3; border-color:transparent; }
.maq-acoes [data-editar]::before,
.maq-acoes [data-copiar]::before{ background:rgba(255,255,255,0.08); }
.maq-acoes [data-editar]:hover,
.maq-acoes [data-copiar]:hover{ color:var(--accent); }
.maq-acoes [data-excluir]{ background:linear-gradient(135deg,#ff7a7b,var(--bad) 55%,#a8282a); color:#fff; border-color:transparent; }
.maq-acoes [data-excluir]::before{ background:rgba(255,255,255,0.3); }
.maq-acoes [data-excluir]:hover{ color:#fff; }

/* ---------------------------------------------------------------------
   4) reuniao.html — só admin (Rafael), suporta claro/escuro por
   [data-theme]. Único botão do bucket é o "Excluir" (×) da legenda de
   fotos da apresentação.
   --------------------------------------------------------------------- */
.mitem .ops button.del{
  position:relative;
  z-index:0;
  overflow:hidden;
  border-radius:999px;
  background:linear-gradient(135deg, #ff7a7b 0%, var(--down) 55%, #a8282a 100%);
  color:#fff;
}
.mitem .ops button.del::before{
  content:'';
  position:absolute;
  z-index:-1;
  width:100%; height:220%;
  top:-160%; left:-60%;
  border-radius:50%;
  background:rgba(255,255,255,0.3);
  transition:top .5s ease, left .5s ease, transform .5s ease;
  pointer-events:none;
}
.mitem .ops button.del:hover::before{ top:50%; left:50%; transform:translate(-50%,-50%); }
.mitem .ops button.del:hover{ color:#fff; }

/* ---------------------------------------------------------------------
   5) crm.html / mensagens.html — mesmo mini design system ("copiado do
   crm.html"), --accent/--bad/--card/--card-2 já trocam por
   [data-theme="light"] sozinhos, então os gradientes usam as variáveis
   em vez de hex fixo.

   Ouro = Salvar/Enviar (ação principal, mesmo quando o rótulo é "Enviar").
   Neutro = Cancelar/Fechar/Editar + os secundários que sentam do lado
   deles na mesma linha (Assumir/Contato/Transferir/Ver/Testar/Atualizar/
   Limpar/Marcar todos — mesmo que hoje alguns sejam .btn.prim, ex.:
   Transferir), pra linha inteira ficar uniforme. [data-a] virou geral
   (não só "editar"): as 4 ações da linha de Canais (Copiar/Testar/
   Apontar/Editar) usam o mesmo atributo só nessa linha — conferido, não
   colide com nada fora dali.

   FICARAM DE FORA (não são nenhum dos 2 baldes, nem secundário de rodapé
   junto deles): "+ Nova conversa" (topo, fora de modal), tabs Hoje/7
   dias/30 dias do relatório, #btnModelo (link dentro de um aviso, não
   está numa linha de botões), #gruposTestar (link de texto, não botão).
   --------------------------------------------------------------------- */
#pcSalvar, #pcSalvarNome, #pcSalvarNota,
#btnRecadoSalvarLista, #btnSalvarFiltro, #btnZapiSalvar,
#formCanal button[type="submit"],
#cSalvar, #cfgSalvar,
#btnEnviar, #enviar, #btnRecadoEnviar, #btnGrupoEnviar, #btnEnviarModelo{
  position:relative;
  z-index:0;
  overflow:hidden;
  border-radius:999px;
  border-color:transparent;
  background:linear-gradient(135deg, color-mix(in srgb, var(--accent) 60%, white) 0%, var(--accent) 55%, color-mix(in srgb, var(--accent) 65%, black) 100%);
  color:var(--accent-ink);
}
#pcSalvar::before, #pcSalvarNome::before, #pcSalvarNota::before,
#btnRecadoSalvarLista::before, #btnSalvarFiltro::before, #btnZapiSalvar::before,
#formCanal button[type="submit"]::before,
#cSalvar::before, #cfgSalvar::before,
#btnEnviar::before, #enviar::before, #btnRecadoEnviar::before, #btnGrupoEnviar::before, #btnEnviarModelo::before{
  content:'';
  position:absolute;
  z-index:-1;
  width:100%; height:220%;
  top:-160%; left:-60%;
  border-radius:50%;
  background:rgba(255,255,255,0.35);
  transition:top .5s ease, left .5s ease, transform .5s ease;
  pointer-events:none;
}
#pcSalvar:hover::before, #pcSalvarNome:hover::before, #pcSalvarNota:hover::before,
#btnRecadoSalvarLista:hover::before, #btnSalvarFiltro:hover::before, #btnZapiSalvar:hover::before,
#formCanal button[type="submit"]:hover::before,
#cSalvar:hover::before, #cfgSalvar:hover::before,
#btnEnviar:hover::before, #enviar:hover::before, #btnRecadoEnviar:hover::before, #btnGrupoEnviar:hover::before, #btnEnviarModelo:hover::before{
  top:50%; left:50%; transform:translate(-50%,-50%);
}
#pcSalvar:hover, #pcSalvarNome:hover, #pcSalvarNota:hover,
#btnRecadoSalvarLista:hover, #btnSalvarFiltro:hover, #btnZapiSalvar:hover,
#formCanal button[type="submit"]:hover,
#cSalvar:hover, #cfgSalvar:hover,
#btnEnviar:hover, #enviar:hover, #btnRecadoEnviar:hover, #btnGrupoEnviar:hover, #btnEnviarModelo:hover{ color:var(--accent-ink); filter:none; }

[data-fechar],
#pcCancelar, #pcCancelarNome,
[data-editar],
[data-a],
#btnTransferir, #btnConfTransferir, #btnAssumir, #btnContato,
#relBuscar, #btnZapiTestar, #btnGruposAtualizar,
#cfgTestar, #cfgWebhook, #btnLimparCanal,
#recadoTodos, #recadoPickerFechar, #recadoPickerAdd,
.abas .aba:not(.ativa),
.filtros .btn:not([aria-pressed="true"]){
  position:relative;
  z-index:0;
  overflow:hidden;
  border-radius:999px;
  background:linear-gradient(135deg, var(--card-2) 0%, var(--card) 100%);
}
[data-fechar]::before,
#pcCancelar::before, #pcCancelarNome::before,
[data-editar]::before,
[data-a]::before,
#btnTransferir::before, #btnConfTransferir::before, #btnAssumir::before, #btnContato::before,
#relBuscar::before, #btnZapiTestar::before, #btnGruposAtualizar::before,
#cfgTestar::before, #cfgWebhook::before, #btnLimparCanal::before,
#recadoTodos::before, #recadoPickerFechar::before, #recadoPickerAdd::before,
.abas .aba:not(.ativa)::before,
.filtros .btn:not([aria-pressed="true"])::before{
  content:'';
  position:absolute;
  z-index:-1;
  width:100%; height:220%;
  top:-160%; left:-60%;
  border-radius:50%;
  background:rgba(255,255,255,0.08);
  transition:top .5s ease, left .5s ease, transform .5s ease;
  pointer-events:none;
}
[data-fechar]:hover::before,
#pcCancelar:hover::before, #pcCancelarNome:hover::before,
[data-editar]:hover::before,
[data-a]:hover::before,
#btnTransferir:hover::before, #btnConfTransferir:hover::before, #btnAssumir:hover::before, #btnContato:hover::before,
#relBuscar:hover::before, #btnZapiTestar:hover::before, #btnGruposAtualizar:hover::before,
#cfgTestar:hover::before, #cfgWebhook:hover::before, #btnLimparCanal:hover::before,
#recadoTodos:hover::before, #recadoPickerFechar:hover::before, #recadoPickerAdd:hover::before,
.abas .aba:not(.ativa):hover::before,
.filtros .btn:not([aria-pressed="true"]):hover::before{
  top:50%; left:50%; transform:translate(-50%,-50%);
}
/* Transferir/Adicionar marcados eram .btn.prim (fundo dourado) — a regra
   acima já pinta o fundo neutro (especificidade de classe+atributo bate
   a de .btn.prim), mas o texto herdava var(--accent-ink) do .btn.prim
   também; força de volta pro texto normal do tema. */
#btnConfTransferir, #recadoPickerAdd{ color:var(--text); border-color:var(--line-forte); }
#btnConfTransferir:hover, #recadoPickerAdd:hover{ color:var(--text); filter:none; }
/* Aba/chip selecionado continua com o destaque de sempre (branco/dourado,
   já definido em regras mais específicas do próprio crm.html/mensagens.html
   — .aba.ativa e .btn[aria-pressed="true"] — não tocadas aqui). */

/* ---------------------------------------------------------------------
   6) Botões só-ícone (×), versão REDONDA do liquid — mesmo diâmetro de
   hoje, não vira pílula larga. Mesma receita de bolha (::before,
   z-index:-1), só com border-radius:50% e width/height fixos em vez de
   padding esticando por conta do texto.
   --------------------------------------------------------------------- */

/* .pf-modal-close (×) — index/gpd/almoxarifado/producao/recibo/margem/
   mapa-visitas. Já é branco 32x32 nos dois temas (modal é sempre claro,
   ver nota em styles.css) — continua neutro/claro, só ganha a bolha. */
.pf-modal-close{
  z-index:0;
  overflow:hidden;
  background:linear-gradient(135deg, #ffffff 0%, #eef0f3 100%);
}
.pf-modal-close::before{
  content:'';
  position:absolute;
  z-index:-1;
  width:100%; height:220%;
  top:-160%; left:-60%;
  border-radius:50%;
  background:rgba(0,0,0,0.06);
  transition:top .5s ease, left .5s ease, transform .5s ease;
  pointer-events:none;
}
.pf-modal-close:hover::before{ top:50%; left:50%; transform:translate(-50%,-50%); }
.pf-modal-close:hover{ background:linear-gradient(135deg, #ffffff 0%, #eef0f3 100%); color:#333; }

/* .margem-excluir (× excluir despesa) — era só um glifo sem fundo; ganha
   um círculo do tamanho do próprio glifo (24px), com o mesmo comportamento
   de hoje (cinza em repouso, vermelho no hover), só que agora com a bolha
   liquid por trás em vez de só trocar a cor do texto. */
.margem-excluir{
  position:relative;
  z-index:0;
  overflow:hidden;
  width:24px;
  height:24px;
  padding:0;
  border-radius:50%;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:17px;
}
.margem-excluir::before{
  content:'';
  position:absolute;
  z-index:-1;
  width:100%; height:220%;
  top:-160%; left:-60%;
  border-radius:50%;
  background:rgba(225,89,90,0.35);
  transition:top .5s ease, left .5s ease, transform .5s ease;
  pointer-events:none;
}
.margem-excluir:hover::before{ top:50%; left:50%; transform:translate(-50%,-50%); }
.margem-excluir:hover{ color:var(--bad); }

/* crm.html: fechar (neutro) — pcFechar (painel de contato), botões ✕ do
   composer (erro de envio, tirar anexo). "voltar ←"/anexar/modelo NÃO
   entram — são navegação/outras ações, não fechar. */
#pcFechar, #fecharErroEnvio, #tirarAnexo{
  position:relative;
  z-index:0;
  overflow:hidden;
  width:28px;
  height:28px;
  padding:0;
  border-radius:50%;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(135deg, var(--card-2) 0%, var(--card) 100%);
}
#pcFechar::before, #fecharErroEnvio::before, #tirarAnexo::before{
  content:'';
  position:absolute;
  z-index:-1;
  width:100%; height:220%;
  top:-160%; left:-60%;
  border-radius:50%;
  background:rgba(255,255,255,0.08);
  transition:top .5s ease, left .5s ease, transform .5s ease;
  pointer-events:none;
}
#pcFechar:hover::before, #fecharErroEnvio:hover::before, #tirarAnexo:hover::before{
  top:50%; left:50%; transform:translate(-50%,-50%);
}

/* mensagens.html: ✕ "tirar da lista" — é o único uso de excluir-por-ícone
   lá (o .btn-ico[data-excluir]; "voltar ←" fora de propósito). */
.btn-ico[data-excluir]{
  position:relative;
  z-index:0;
  overflow:hidden;
  width:28px;
  height:28px;
  padding:0;
  border-radius:50%;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:transparent;
}
.btn-ico[data-excluir]::before{
  content:'';
  position:absolute;
  z-index:-1;
  width:100%; height:220%;
  top:-160%; left:-60%;
  border-radius:50%;
  background:rgba(225,89,90,0.3);
  transition:top .5s ease, left .5s ease, transform .5s ease;
  pointer-events:none;
}
.btn-ico[data-excluir]:hover::before{ top:50%; left:50%; transform:translate(-50%,-50%); }
.btn-ico[data-excluir]:hover{ color:var(--bad); background:transparent; }

/* ---------------------------------------------------------------------
   7) .gulp (css/gulp-delete.css) — SEM mexer em estrutura/pseudo-elemento
   nenhum (ver nota no topo do arquivo): só alinha as variáveis de cor do
   variante padrão (rubi/excluir) ao mesmo vermelho liquid das outras
   pílulas, usando o PRÓPRIO ponto de extensão que o componente já previa
   (é assim que .gulp--graphite/.gulp--gravar mudam de cor). --face-2
   já era var(--bad) — só --face-1/--face-3 mudam de tom.
   --------------------------------------------------------------------- */
.gulp:not(.gulp--graphite):not(.gulp--gravar){
  --face-1: #ff7a7b;
  --face-3: #a8282a;
}