/**
 * /assets/css/admin.css
 * criado em: 28/09/2026 14:26 (horário de Bacabal-MA)
 * ajuste em: 28/09/2026 16:49 (horário de Bacabal-MA)
 * v1.1
 */

/* =========================================================================
   VARIÁVEIS DE TEMA (as cores são sobrescritas por Ajustes > Aparência)
   ========================================================================= */
:root{
  --cor-primaria:#7c3aed;
  --cor-secundaria:#4c1d95;
  --cor-destaque:#ede9fe;
  --cor-fundo:#f7f5fc;
  --fonte-sistema:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;

  --texto-1:#26213a;
  --texto-2:#6b6385;
  --branco:#ffffff;
  --borda:#e2dcf2;
  --sucesso:#1c7c33;
  --sucesso-bg:#e8f7ea;
  --erro:#b4233c;
  --erro-bg:#fde8ec;
  --atencao:#8a5a00;
  --atencao-bg:#fff4dc;
  --sombra:0 8px 24px rgba(40,24,90,.08);
  --raio:14px;
  --raio-sm:9px;
}

*,*::before,*::after{ box-sizing:border-box }
html{ -webkit-text-size-adjust:100% }
body{
  margin:0; background:var(--cor-fundo); color:var(--texto-1);
  font-family:var(--fonte-sistema); font-size:15px; line-height:1.5;
}
a{ color:inherit }
img{ max-width:100%; display:block }
button{ font-family:inherit; cursor:pointer }
input,select,textarea{ font-family:inherit; font-size:1rem }
::selection{ background:var(--cor-destaque) }
:focus-visible{ outline:2px solid var(--cor-primaria); outline-offset:2px }

.oculto{ display:none !important }
.container{ max-width:1240px; margin:0 auto; padding:0 18px 40px }
.mudo{ color:var(--texto-2) }

/* =========================================================================
   BOTÕES
   ========================================================================= */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  border:none; border-radius:var(--raio-sm); padding:11px 20px;
  font-weight:700; font-size:.92rem; text-decoration:none; transition:.15s;
  min-height:44px; white-space:nowrap; line-height:1.2;
}
.btn-prim{ background:var(--cor-primaria); color:#fff }
.btn-prim:hover{ background:var(--cor-secundaria) }
.btn-cinza{ background:#ece8f5; color:var(--texto-1) }
.btn-cinza:hover{ background:#ddd6ee }
.btn-vermelho{ background:var(--erro); color:#fff }
.btn-vermelho:hover{ background:#8e1a2f }
.btn-fantasma{ background:transparent; color:var(--cor-primaria); border:2px solid var(--cor-primaria) }
.btn-fantasma:hover{ background:var(--cor-destaque) }
.btn-sm{ padding:7px 12px; font-size:.82rem; min-height:36px }
.btn-xs{ padding:5px 9px; font-size:.76rem; min-height:30px; border-radius:7px }
.btn:disabled{ opacity:.5; cursor:not-allowed }
.btn-bloco{ width:100%; justify-content:center }
.btn-icone{ min-width:36px; padding-left:8px; padding-right:8px }

/* =========================================================================
   CAMPOS
   ========================================================================= */
.campo{ margin-bottom:14px; text-align:left }
.campo label, .rotulo{ display:block; font-weight:700; font-size:.84rem; color:var(--texto-1); margin-bottom:6px }
.campo input[type=text], .campo input[type=password], .campo input[type=number],
.campo input[type=email], .campo input[type=search], .campo input[type=url],
.campo select, .campo textarea, .entrada{
  width:100%; padding:10px 13px; border:1.5px solid var(--borda);
  border-radius:var(--raio-sm); background:#fff; color:var(--texto-1); outline:none; min-height:44px;
}
.campo textarea{ min-height:84px; resize:vertical }
.campo input:focus, .campo select:focus, .campo textarea:focus, .entrada:focus{ border-color:var(--cor-primaria) }
.campo-ajuda{ font-size:.78rem; color:var(--texto-2); margin-top:5px }
.campo-check{ display:flex; align-items:center; gap:8px; font-weight:600; font-size:.88rem; cursor:pointer }
.campo-check input{ width:18px; height:18px; accent-color:var(--cor-primaria) }

.campo-senha{ position:relative }
.campo-senha input{ padding-right:46px !important }
.btn-olho{
  position:absolute; right:6px; top:50%; transform:translateY(-50%);
  background:none; border:none; padding:8px; color:var(--texto-2);
  display:flex; align-items:center; justify-content:center;
}
.btn-olho:hover{ color:var(--cor-primaria) }

.campo-cor{ display:flex; align-items:center; gap:8px }
.campo-cor input[type=color]{
  width:44px; height:44px; padding:2px; border:1.5px solid var(--borda);
  border-radius:var(--raio-sm); background:#fff; cursor:pointer; flex-shrink:0;
}
.campo-cor input[type=text]{ flex:1; min-width:0 }

.grade-2{ display:grid; grid-template-columns:1fr 1fr; gap:12px }
.grade-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px }
.grade-4{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px }
@media (max-width:640px){ .grade-2, .grade-3{ grid-template-columns:1fr } .grade-4{ grid-template-columns:1fr 1fr } }

/* =========================================================================
   LOGIN
   ========================================================================= */
.pagina-login{ min-height:100vh; display:flex; align-items:center; justify-content:center; padding:20px }
.cartao-login{
  width:100%; max-width:380px; background:#fff; border-radius:var(--raio);
  box-shadow:var(--sombra); padding:34px 28px; text-align:center;
}
.cartao-login .icone{ font-size:2.6rem; margin-bottom:6px }
.cartao-login h1{ font-size:1.25rem; margin:0 0 4px; color:var(--cor-secundaria) }
.cartao-login .sub{ font-size:.88rem; color:var(--texto-2); margin:0 0 22px }
.cartao-login form{ text-align:left }
.msg-erro-login{
  background:var(--erro-bg); color:var(--erro); border-radius:var(--raio-sm);
  padding:10px 14px; font-size:.85rem; font-weight:600; margin-bottom:14px; display:none; text-align:left;
}
.msg-sucesso{ background:var(--sucesso-bg); color:var(--sucesso) }
.aviso-login{ background:var(--atencao-bg); color:var(--atencao); border-radius:var(--raio-sm); padding:10px 14px; font-size:.85rem; margin-bottom:14px }
.aviso-login a{ font-weight:700 }

/* =========================================================================
   TOPO
   ========================================================================= */
.topo{ background:#fff; border-bottom:1px solid var(--borda); position:sticky; top:0; z-index:50 }
.topo-linha{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:12px 18px; max-width:1240px; margin:0 auto;
}
.topo-marca{ display:flex; align-items:center; gap:10px; font-weight:800; color:var(--cor-secundaria); text-decoration:none; min-width:0 }
.topo-marca .emoji{ font-size:1.4rem }
.topo-acoes{ display:flex; align-items:center; gap:8px; flex-wrap:wrap }
.topo-usuario{ font-size:.82rem; color:var(--texto-2) }

.cabecalho-pagina{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  flex-wrap:wrap; margin:24px 0 16px;
}
.cabecalho-pagina h2{ margin:0; font-size:1.3rem; color:var(--cor-secundaria) }
.cabecalho-acoes{ display:flex; gap:8px; flex-wrap:wrap }

/* =========================================================================
   SEÇÕES / ABAS / STATS
   ========================================================================= */
.secao{ background:#fff; border-radius:var(--raio); box-shadow:var(--sombra); padding:20px; margin-bottom:18px }
.secao h2{ margin:0 0 6px; font-size:1.05rem; color:var(--cor-secundaria); display:flex; align-items:center; gap:8px }
.secao .desc{ font-size:.86rem; color:var(--texto-2); margin:0 0 16px }

.abas{
  display:flex; gap:4px; overflow-x:auto; border-bottom:2px solid var(--borda);
  margin-bottom:20px; -webkit-overflow-scrolling:touch; scrollbar-width:none;
}
.abas::-webkit-scrollbar{ display:none }
.aba{
  background:none; border:none; padding:12px 16px; font-weight:700; font-size:.9rem; text-decoration:none;
  color:var(--texto-2); border-bottom:3px solid transparent; white-space:nowrap; margin-bottom:-2px;
}
.aba.ativa{ color:var(--cor-primaria); border-color:var(--cor-primaria) }
.aba .contador{ background:var(--cor-destaque); color:var(--cor-secundaria); border-radius:20px; padding:1px 8px; font-size:.74rem; margin-left:4px }
.painel-aba{ display:none }
.painel-aba.ativa{ display:block }

.stats-rapidas{ display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:12px; margin-bottom:20px }
.stat-card{ background:#fff; border-radius:var(--raio-sm); padding:14px 16px; box-shadow:var(--sombra); text-align:center }
.stat-card b{ display:block; font-size:1.55rem; color:var(--cor-primaria); line-height:1.2 }
.stat-card span{ font-size:.76rem; color:var(--texto-2) }

.selo{ display:inline-block; font-size:.7rem; font-weight:800; text-transform:uppercase; letter-spacing:.03em; padding:3px 9px; border-radius:20px; white-space:nowrap }
.selo-ok{ background:var(--sucesso-bg); color:var(--sucesso) }
.selo-pausa{ background:var(--atencao-bg); color:var(--atencao) }
.selo-cinza{ background:#eee; color:#666 }
.selo-prim{ background:var(--cor-primaria); color:#fff }
.selo-hoje{ background:linear-gradient(135deg,#f59e0b,#ef4444); color:#fff }

.vazio-bloco{
  text-align:center; padding:44px 20px; color:var(--texto-2); background:#fff;
  border-radius:var(--raio); border:1.5px dashed var(--borda);
}
.vazio-bloco .grande{ font-size:2.4rem; display:block; margin-bottom:8px }

/* =========================================================================
   CLIENTES (dashboard)
   ========================================================================= */
.grade-clientes{ display:grid; grid-template-columns:repeat(auto-fill,minmax(270px,1fr)); gap:16px; margin-bottom:28px }
.cartao-cliente{
  background:#fff; border-radius:var(--raio); box-shadow:var(--sombra); border:1px solid var(--borda);
  overflow:hidden; display:flex; flex-direction:column;
}
.cartao-cliente-faixa{ height:6px }
.cartao-cliente-corpo{ padding:16px; display:flex; gap:12px; align-items:center; text-decoration:none; color:inherit; flex:1 }
.logo-cliente{
  width:54px; height:54px; border-radius:14px; flex-shrink:0; background:#f1eef9 center/contain no-repeat;
  display:flex; align-items:center; justify-content:center; font-weight:800; font-size:1.3rem; color:#fff;
}
.cartao-cliente h3{ margin:0 0 2px; font-size:1.02rem; line-height:1.3 }
.cartao-cliente .info{ font-size:.8rem; color:var(--texto-2) }
.cartao-cliente-stats{ display:flex; border-top:1px solid var(--borda) }
.cartao-cliente-stats div{ flex:1; text-align:center; padding:9px 4px }
.cartao-cliente-stats div + div{ border-left:1px solid var(--borda) }
.cartao-cliente-stats b{ display:block; font-size:1.05rem }
.cartao-cliente-stats span{ font-size:.7rem; color:var(--texto-2) }
.cartao-cliente-acoes{ display:flex; gap:8px; padding:10px 14px; background:#faf9fe; border-top:1px solid var(--borda) }
.cartao-cliente-acoes .btn{ flex:1 }

/* Lista de próximos aniversariantes */
.lista-proximos{ display:flex; flex-direction:column; gap:8px }
.item-proximo{
  display:flex; align-items:center; gap:12px; padding:10px 12px; border:1px solid var(--borda);
  border-radius:var(--raio-sm); background:#fff;
}
.item-proximo.hoje{ border-color:#f59e0b; background:linear-gradient(90deg,#fff8eb,#fff) }
.avatar{
  width:44px; height:44px; border-radius:50%; flex-shrink:0; background:#e9e4f6 center/cover no-repeat;
  display:flex; align-items:center; justify-content:center; font-weight:800; color:var(--cor-secundaria);
}
.item-proximo .dados{ flex:1; min-width:0 }
.item-proximo .dados b{ display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.item-proximo .dados span{ font-size:.78rem; color:var(--texto-2) }
.item-proximo .acoes{ display:flex; gap:6px; flex-shrink:0 }

/* =========================================================================
   ANIVERSARIANTES (cards com miniatura da arte)
   ========================================================================= */
.barra-filtros{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-bottom:14px }
.barra-filtros .entrada{ width:auto; flex:1; min-width:160px }
.barra-filtros select.entrada{ flex:0 0 auto; min-width:150px }
.barra-selecao{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap; background:var(--cor-destaque);
  border-radius:var(--raio-sm); padding:8px 12px; margin-bottom:14px; font-size:.86rem; font-weight:600;
}
.barra-selecao .espaco{ flex:1 }

.grade-aniv{ display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:14px }
.cartao-aniv{
  background:#fff; border-radius:var(--raio); box-shadow:var(--sombra); border:2px solid transparent;
  overflow:hidden; display:flex; flex-direction:column; position:relative; transition:border-color .15s;
}
.cartao-aniv.selecionado{ border-color:var(--cor-primaria) }
.cartao-aniv.inativo{ opacity:.55 }
.cartao-aniv .miniatura{
  aspect-ratio:4/5; background:#efeaf8; display:flex; align-items:center; justify-content:center;
  cursor:zoom-in; position:relative; overflow:hidden;
}
.cartao-aniv .miniatura img{ width:100%; height:100%; object-fit:contain }
.cartao-aniv .miniatura .spin{ position:absolute }
.cartao-aniv .sel{
  position:absolute; top:8px; left:8px; z-index:2; width:26px; height:26px; border-radius:7px;
  background:rgba(255,255,255,.92); display:flex; align-items:center; justify-content:center; box-shadow:0 1px 4px rgba(0,0,0,.2);
}
.cartao-aniv .sel input{ width:17px; height:17px; accent-color:var(--cor-primaria); cursor:pointer; margin:0 }
.cartao-aniv .etiqueta-topo{ position:absolute; top:8px; right:8px; z-index:2 }
.cartao-aniv .corpo{ padding:10px 12px 4px; flex:1 }
.cartao-aniv .corpo b{ display:block; font-size:.93rem; line-height:1.3 }
.cartao-aniv .corpo > span{ display:block; font-size:.76rem; color:var(--texto-2) }
.cartao-aniv .acoes{ display:flex; gap:4px; padding:8px 10px 10px; flex-wrap:wrap }
.cartao-aniv .acoes .btn{ flex:1; padding-left:4px; padding-right:4px }
.sem-foto-aviso{ color:var(--atencao); font-weight:700 }

/* =========================================================================
   ARTES (cards)
   ========================================================================= */
.grade-artes{ display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:16px }
.cartao-arte{ background:#fff; border-radius:var(--raio); box-shadow:var(--sombra); overflow:hidden; display:flex; flex-direction:column; border:1px solid var(--borda) }
.cartao-arte .previa-arte{ background:#efeaf8; aspect-ratio:1/1; display:flex; align-items:center; justify-content:center; padding:10px }
.cartao-arte .previa-arte canvas, .cartao-arte .previa-arte img{ max-width:100%; max-height:100%; width:auto; height:auto; box-shadow:0 4px 14px rgba(0,0,0,.12); border-radius:4px }
.cartao-arte .corpo{ padding:12px 14px 6px; flex:1 }
.cartao-arte .corpo b{ display:block; line-height:1.3 }
.cartao-arte .corpo > span{ display:block; font-size:.77rem; color:var(--texto-2) }
.cartao-arte .acoes{ display:flex; gap:6px; padding:8px 12px 12px; flex-wrap:wrap }
.cartao-arte .acoes .btn-prim{ flex:1 1 100% }

/* =========================================================================
   MODAIS
   ========================================================================= */
.modal-overlay{
  position:fixed; inset:0; background:rgba(30,20,60,.5); display:flex;
  align-items:center; justify-content:center; padding:16px; z-index:200;
  opacity:0; pointer-events:none; transition:opacity .15s;
}
.modal-overlay.aberto{ opacity:1; pointer-events:auto }
#modalRecorte{ z-index:320 }
#modalConfirmOverlay{ z-index:340 }
.modal{
  background:#fff; border-radius:var(--raio); width:100%; max-width:540px;
  max-height:92vh; overflow-y:auto; box-shadow:0 20px 60px rgba(0,0,0,.25);
  display:flex; flex-direction:column;
}
.modal-largo{ max-width:980px }
.modal-cabec{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:16px 20px; border-bottom:1px solid var(--borda); position:sticky; top:0; background:#fff; z-index:3;
}
.modal-cabec h3{ margin:0; font-size:1.05rem; color:var(--cor-secundaria) }
.modal-fechar{ background:none; border:none; font-size:1.5rem; color:var(--texto-2); line-height:1; padding:4px 8px; min-height:auto }
.modal-corpo{ padding:18px 20px }
.modal-rodape{
  display:flex; gap:10px; justify-content:flex-end; padding:14px 20px; border-top:1px solid var(--borda);
  position:sticky; bottom:0; background:#fff; z-index:3;
}
@media (max-width:560px){
  .modal-overlay{ padding:0; align-items:flex-end }
  .modal{ max-height:96vh; border-radius:var(--raio) var(--raio) 0 0 }
  .modal-rodape{ flex-direction:column-reverse } .modal-rodape .btn{ width:100% }
}

.modal-confirm-card{ background:#fff; border-radius:var(--raio); width:100%; max-width:420px; box-shadow:0 20px 60px rgba(0,0,0,.25); overflow:hidden }
.modal-confirm-cabec{ display:flex; align-items:flex-start; gap:14px; padding:22px 22px 16px }
.modal-confirm-icone{ width:44px; height:44px; border-radius:50%; background:var(--cor-destaque); display:flex; align-items:center; justify-content:center; font-size:1.4rem; flex-shrink:0 }
.modal-confirm-cabec h3{ margin:0 0 4px; font-size:1.05rem; color:var(--cor-secundaria) }
.modal-confirm-cabec p{ margin:0; font-size:.88rem; line-height:1.5 }
.modal-confirm-acoes{ display:flex; gap:10px; justify-content:flex-end; padding:14px 22px; border-top:1px solid var(--borda) }
@media (max-width:480px){ .modal-confirm-acoes{ flex-direction:column-reverse } .modal-confirm-acoes .btn{ width:100% } }

/* Modal do aniversariante: formulário + prévia ao vivo */
.form-aniv{ display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); gap:22px }
.form-aniv .previa-viva{ position:sticky; top:70px; align-self:start }
.previa-viva canvas{ width:100%; height:auto; border-radius:8px; background:#efeaf8; box-shadow:0 6px 20px rgba(0,0,0,.12); display:block }
.previa-viva .legenda{ font-size:.76rem; color:var(--texto-2); text-align:center; margin-top:6px }
@media (max-width:820px){
  .form-aniv{ grid-template-columns:1fr }
  .form-aniv .previa-viva{ position:static; max-width:380px; margin:0 auto; width:100% }
}
.grade-data{ display:grid; grid-template-columns:90px 1fr 110px; gap:10px }
@media (max-width:420px){ .grade-data{ grid-template-columns:1fr 1.4fr } .grade-data .campo:last-child{ grid-column:1 / -1 } }

/* =========================================================================
   CAMPO DE FOTO (link, upload, Ctrl+V) + RECORTE
   ========================================================================= */
.foto-entrada{ display:flex; gap:14px; align-items:flex-start }
.foto-previa{
  width:110px; flex-shrink:0; border-radius:10px; background:#efeaf8 center/cover no-repeat;
  border:2px dashed var(--borda); display:flex; align-items:center; justify-content:center; aspect-ratio:1/1;
  transition:border-color .15s;
}
.foto-previa.circulo{ border-radius:50% }
.foto-previa:not(.vazio){ border-style:solid; border-color:var(--cor-destaque) }
.foto-previa.vazio span{ font-size:.72rem; color:var(--texto-2); text-align:center; padding:6px }
.foto-previa.soltar{ border-color:var(--cor-primaria); background-color:var(--cor-destaque) }
.foto-controles{ flex:1; min-width:0; display:flex; flex-direction:column; gap:8px }
.foto-link{ display:flex; gap:6px }
.foto-link input{
  flex:1; min-width:0; padding:9px 12px; border:1.5px solid var(--borda); border-radius:var(--raio-sm); min-height:40px; font-size:.9rem;
}
.foto-link input:focus{ border-color:var(--cor-primaria); outline:none }
.foto-botoes{ display:flex; gap:6px; flex-wrap:wrap }
.foto-status{ font-size:.8rem; min-height:1.1em }
.foto-status.ok{ color:var(--sucesso) }
.foto-status.erro{ color:var(--erro) }
.foto-status.aviso{ color:var(--atencao) }
.foto-status.carregando{ color:var(--cor-primaria) }
@media (max-width:480px){ .foto-entrada{ flex-direction:column } .foto-previa{ width:120px } .foto-link{ flex-direction:column } }

.modal-recorte{ max-width:440px }
.recorte-palco{
  position:relative; margin:0 auto; touch-action:none; cursor:grab; user-select:none;
  background:#eee; overflow:hidden; border-radius:6px; max-width:100%;
}
.recorte-palco.arrastando{ cursor:grabbing }
.recorte-palco canvas{ display:block; width:100%; height:100% }
.recorte-mascara{ position:absolute; inset:0; pointer-events:none; box-shadow:inset 0 0 0 2px rgba(255,255,255,.8) }
.recorte-mascara.circulo{ border-radius:50%; box-shadow:0 0 0 999px rgba(20,10,40,.45), inset 0 0 0 2px rgba(255,255,255,.9) }
.recorte-mascara.arredondado{ border-radius:12%; box-shadow:0 0 0 999px rgba(20,10,40,.35), inset 0 0 0 2px rgba(255,255,255,.9) }
.recorte-controles{ display:flex; align-items:center; gap:10px; margin-top:14px }
.recorte-controles input[type=range]{ flex:1; accent-color:var(--cor-primaria) }

/* =========================================================================
   LIGHTBOX (visualizar arte)
   ========================================================================= */
.lightbox{ position:fixed; inset:0; background:rgba(10,6,24,.9); z-index:300; display:none; flex-direction:column; align-items:center; justify-content:center; padding:16px; gap:12px }
.lightbox.aberto{ display:flex }
.lightbox canvas{ max-width:100%; max-height:calc(100vh - 140px); width:auto; height:auto; border-radius:6px; box-shadow:0 10px 40px rgba(0,0,0,.5) }
.lightbox .lb-titulo{ color:#fff; font-weight:700; text-align:center }
.lightbox .lb-acoes{ display:flex; gap:8px; flex-wrap:wrap; justify-content:center }
.lightbox .lb-fechar{ position:absolute; top:10px; right:14px; background:none; border:none; color:#fff; font-size:2rem; line-height:1 }
.lightbox .lb-nav{ position:absolute; top:50%; transform:translateY(-50%); background:rgba(255,255,255,.14); border:none; color:#fff; font-size:1.6rem; width:46px; height:46px; border-radius:50% }
.lightbox .lb-ant{ left:12px } .lightbox .lb-prox{ right:12px }
@media (max-width:640px){ .lightbox .lb-nav{ top:auto; bottom:84px; transform:none } }

/* =========================================================================
   EDITOR DE AJUSTES DA ARTE
   ========================================================================= */
.editor{ display:grid; grid-template-columns:minmax(0,1fr) 380px; gap:18px; align-items:start; margin-top:16px }
.editor-palco-caixa{ background:#fff; border-radius:var(--raio); box-shadow:var(--sombra); padding:14px; position:sticky; top:70px }
.editor-ferramentas{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-bottom:10px; font-size:.82rem; color:var(--texto-2) }
.editor-ferramentas .espaco{ flex:1 }
.editor-palco-fundo{
  background-color:#e8e4f2;
  background-image:linear-gradient(45deg,#d9d3ea 25%,transparent 25%),linear-gradient(-45deg,#d9d3ea 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#d9d3ea 75%),linear-gradient(-45deg,transparent 75%,#d9d3ea 75%);
  background-size:20px 20px; background-position:0 0,0 10px,10px -10px,-10px 0;
  border-radius:8px; display:flex; align-items:center; justify-content:center; padding:12px; overflow:hidden;
}
.editor-palco{ position:relative; line-height:0; touch-action:none; user-select:none; box-shadow:0 6px 24px rgba(0,0,0,.18) }
.editor-palco canvas{ display:block; width:100%; height:100% }
.camada-caixa{
  position:absolute; border:1.5px dashed rgba(124,58,237,.75); cursor:move; touch-action:none;
  background:rgba(124,58,237,.04);
}
.camada-caixa.foto{ border-color:rgba(14,165,233,.9); background:rgba(14,165,233,.05) }
.camada-caixa.selecionada{ border:2px solid var(--cor-primaria); background:rgba(124,58,237,.08); z-index:5 }
.camada-caixa.foto.selecionada{ border-color:#0ea5e9; background:rgba(14,165,233,.1) }
.camada-caixa .rotulo-camada{
  display:none; position:absolute; left:-1.5px; top:-22px; font:700 11px/1 var(--fonte-sistema); background:var(--cor-primaria); color:#fff;
  padding:5px 7px; border-radius:5px 5px 0 0; white-space:nowrap; pointer-events:none;
}
.camada-caixa.foto .rotulo-camada{ background:#0ea5e9 }
.camada-caixa.selecionada .rotulo-camada{ display:block }
@media (hover:hover){ .camada-caixa:hover .rotulo-camada{ display:block; z-index:7 } }
.camada-caixa .alca{
  position:absolute; width:16px; height:16px; background:#fff; border:2px solid var(--cor-primaria); border-radius:50%;
  display:none; touch-action:none;
}
.camada-caixa.foto .alca{ border-color:#0ea5e9 }
.camada-caixa.selecionada .alca{ display:block }
.alca.se{ right:-9px; bottom:-9px; cursor:nwse-resize }
.alca.sw{ left:-9px; bottom:-9px; cursor:nesw-resize }
.alca.ne{ right:-9px; top:-9px; cursor:nesw-resize }
.alca.nw{ left:-9px; top:-9px; cursor:nwse-resize }
.alca.e{ right:-9px; top:50%; margin-top:-8px; cursor:ew-resize; border-radius:4px }
.alca.w{ left:-9px; top:50%; margin-top:-8px; cursor:ew-resize; border-radius:4px }
.alca.n{ top:-9px; left:50%; margin-left:-8px; cursor:ns-resize; border-radius:4px }
.alca.s{ bottom:-9px; left:50%; margin-left:-8px; cursor:ns-resize; border-radius:4px }
.guia{ position:absolute; background:#f43f5e; pointer-events:none; z-index:6; display:none }
.guia.v{ top:0; bottom:0; width:1px; left:50% }
.guia.h{ left:0; right:0; height:1px; top:50% }
.editor-palco.ocultar-caixas .camada-caixa{ border-color:transparent; background:none }
.editor-palco.ocultar-caixas .camada-caixa .rotulo-camada,
.editor-palco.ocultar-caixas .camada-caixa .alca{ display:none }

.editor-lateral{ display:flex; flex-direction:column; gap:14px }
.editor-lateral .secao{ margin:0; padding:16px }
.lista-camadas{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px }
.lista-camadas li{
  display:flex; align-items:center; gap:8px; padding:8px 10px; border:1.5px solid var(--borda); border-radius:var(--raio-sm);
  cursor:pointer; font-size:.88rem; background:#fff;
}
.lista-camadas li.ativa{ border-color:var(--cor-primaria); background:var(--cor-destaque) }
.lista-camadas li .nome{ flex:1; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.lista-camadas li .tipo{ font-size:.72rem; color:var(--texto-2) }
.lista-camadas li button{ background:none; border:none; padding:4px 6px; border-radius:6px; font-size:.9rem; min-height:auto }
.lista-camadas li button:hover{ background:rgba(0,0,0,.06) }

.props h3{ margin:0 0 12px; font-size:.98rem; color:var(--cor-secundaria) }
.props .campo{ margin-bottom:11px }
.props .campo label{ font-size:.78rem; margin-bottom:4px }
.props .campo input, .props .campo select, .props .campo textarea{ min-height:38px; padding:7px 10px; font-size:.9rem }
.props .campo-cor input[type=color]{ width:38px; height:38px }
.grupo-props{ border-top:1px solid var(--borda); padding-top:12px; margin-top:4px }
.grupo-props > summary{ font-weight:700; font-size:.85rem; cursor:pointer; color:var(--cor-secundaria); margin-bottom:10px; list-style:none }
.grupo-props > summary::-webkit-details-marker{ display:none }
.grupo-props > summary::before{ content:'▸ '; color:var(--texto-2) }
.grupo-props[open] > summary::before{ content:'▾ ' }
.botoes-seg{ display:flex; border:1.5px solid var(--borda); border-radius:var(--raio-sm); overflow:hidden }
.botoes-seg button{ flex:1; border:none; background:#fff; padding:8px 4px; font-size:.82rem; min-height:38px; font-weight:600; color:var(--texto-2) }
.botoes-seg button + button{ border-left:1.5px solid var(--borda) }
.botoes-seg button.ativo{ background:var(--cor-primaria); color:#fff }
.chips-var{ display:flex; flex-wrap:wrap; gap:5px; margin-top:6px }
.chips-var button{
  border:1px solid var(--borda); background:#faf9fe; border-radius:20px; padding:3px 9px; font-size:.74rem;
  font-family:ui-monospace,Menlo,monospace; color:var(--cor-secundaria); min-height:auto;
}
.chips-var button:hover{ background:var(--cor-destaque) }
.linha-faixa{ display:flex; align-items:center; gap:8px }
.linha-faixa input[type=range]{ flex:1; accent-color:var(--cor-primaria) }
.linha-faixa input[type=number]{ width:74px !important; flex-shrink:0 }
.dica-teclado{ font-size:.74rem; color:var(--texto-2); margin-top:8px }
.barra-salvar{ display:flex; gap:8px; align-items:center }
.barra-salvar .status-salvo{ font-size:.8rem; color:var(--texto-2) }
.barra-salvar .status-salvo.pendente{ color:var(--atencao); font-weight:700 }

@media (max-width:980px){
  .editor{ grid-template-columns:1fr }
  .editor-palco-caixa{ position:relative; top:0 }
}

/* =========================================================================
   TABELAS
   ========================================================================= */
.tabela-scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch }
table{ border-collapse:collapse; width:100%; font-size:.85rem }
th,td{ padding:9px 12px; border-bottom:1px solid var(--borda); text-align:left; white-space:nowrap }
th{ background:var(--cor-destaque); color:var(--cor-secundaria); font-weight:700 }
td.quebra{ white-space:normal; min-width:200px }

/* =========================================================================
   LOADER / TOAST
   ========================================================================= */
.loader-adm{ display:flex; align-items:center; gap:8px; font-size:.85rem; color:var(--texto-2); padding:14px 0 }
.spin{ width:18px; height:18px; border:2.5px solid var(--borda); border-top-color:var(--cor-primaria); border-radius:50%; animation:girar .7s linear infinite; flex-shrink:0 }
@keyframes girar{ to{ transform:rotate(360deg) } }

.toast-caixa{ position:fixed; bottom:18px; right:18px; left:18px; display:flex; flex-direction:column; gap:8px; z-index:400; align-items:flex-end; pointer-events:none }
@media (max-width:640px){ .toast-caixa{ align-items:stretch } }
.toast{
  background:#fff; border-radius:var(--raio-sm); padding:12px 16px; box-shadow:0 10px 30px rgba(0,0,0,.15);
  font-size:.86rem; font-weight:600; max-width:360px; border-left:4px solid var(--cor-primaria);
  animation:entra-toast .2s ease-out; pointer-events:auto;
}
.toast.ok{ border-color:var(--sucesso); color:var(--sucesso) }
.toast.erro{ border-color:var(--erro); color:var(--erro) }
.toast.aviso{ border-color:#d99a00; color:var(--atencao) }
@keyframes entra-toast{ from{ opacity:0; transform:translateY(8px) } to{ opacity:1; transform:translateY(0) } }

/* Barra de progresso (ZIP) */
.progresso{ height:8px; background:var(--borda); border-radius:10px; overflow:hidden; margin-top:10px }
.progresso div{ height:100%; width:0; background:var(--cor-primaria); transition:width .2s }

/* Lista de fontes / usuários em Ajustes */
.lista-simples{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px }
.lista-simples li{ display:flex; align-items:center; gap:10px; padding:10px 12px; border:1px solid var(--borda); border-radius:var(--raio-sm); background:#fff; flex-wrap:wrap }
.lista-simples li .nome{ flex:1; font-weight:600; min-width:140px }
.lista-simples li .sub{ font-size:.78rem; color:var(--texto-2); display:block; font-weight:400 }
.amostra-fonte{ font-size:1.35rem; flex:1 1 100%; color:var(--cor-secundaria) }

/* =========================================================================
   FORMATOS FEED / STORY
   ========================================================================= */
.caixa-envio{
  display:flex; align-items:center; justify-content:center; text-align:center; cursor:pointer;
  border:2px dashed var(--borda); border-radius:var(--raio-sm); background:#faf9fe; aspect-ratio:3/4;
  overflow:hidden; position:relative; transition:border-color .15s; font-weight:400 !important; margin:0 !important;
}
.caixa-envio.caixa-story{ aspect-ratio:auto; width:146px; height:260px; margin:0 auto !important }
.caixa-envio:not(.caixa-story){ max-height:260px }
.caixa-envio:hover{ border-color:var(--cor-primaria) }
.caixa-envio img{ width:100%; height:100%; object-fit:contain; position:absolute; inset:0; background:#efeaf8 }
.caixa-envio-texto{ font-size:.84rem; color:var(--texto-2); padding:10px; font-weight:600 }
.caixa-envio-texto small{ font-weight:400; font-size:.74rem }
.caixa-envio.com-imagem{ border-style:solid; border-color:var(--cor-destaque) }
.caixa-envio.com-imagem .caixa-envio-texto{ display:none }
.envio-formatos .campo{ display:flex; flex-direction:column }
@media (max-width:640px){ .envio-formatos{ grid-template-columns:1fr 1fr } .caixa-envio{ max-height:200px } .caixa-envio.caixa-story{ width:112px; height:200px } }

.lightbox .lb-formatos{ background:#fff; border-color:#fff; min-width:220px }
.lightbox canvas{ max-height:calc(100vh - 190px) }

.abas-formato{ display:flex; gap:6px; margin-bottom:10px; flex-wrap:wrap }
.abas-formato button{
  border:1.5px solid var(--borda); background:#fff; border-radius:30px; padding:7px 14px; font-weight:700; font-size:.84rem;
  color:var(--texto-2); min-height:38px;
}
.abas-formato button.ativo{ background:var(--cor-primaria); border-color:var(--cor-primaria); color:#fff }
.abas-formato button .dim{ font-weight:400; opacity:.8; font-size:.74rem }
.aviso-story{ text-align:center; padding:40px 16px; color:var(--texto-2) }
.aviso-story .grande{ font-size:2.4rem; display:block; margin-bottom:6px }

/* =========================================================================
   RESPONSIVO GERAL
   ========================================================================= */
@media (max-width:640px){
  .container{ padding:0 12px 30px }
  .cabecalho-pagina{ flex-direction:column; align-items:stretch }
  .cabecalho-acoes .btn{ flex:1 }
  .topo-linha{ flex-wrap:wrap; padding:10px 12px }
  .topo-usuario{ display:none }
  .topo-acoes{ width:100%; justify-content:flex-end }
  .grade-aniv{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px }
  .barra-filtros > *{ flex:1 1 calc(50% - 5px); min-width:0 }
  .barra-filtros input[type=search]{ flex-basis:100% }
  .barra-filtros select.entrada{ min-width:0 }
  .cartao-aniv .acoes .btn{ font-size:.72rem }
  th,td{ font-size:.8rem; padding:8px 9px }
  .secao{ padding:16px 14px }
}
@media (max-width:360px){ .grade-aniv{ grid-template-columns:1fr } }