/* Toque do CRM na Central (13/10/2026, pedido da Suellem: "levar esse mesmo toque para nossa central").
   Os mesmos detalhes que o CRM ganhou em 10/10: letras Manrope + Cormorant, brilho passando na logo
   dourada, estrelinhas no alto da lateral, fio dourado no topo, fundo com pontinhos e brilho dourado,
   cartões com sombra mais suave e botões em degradê.
   Arquivo separado e carregado DEPOIS do estilo.css: não muda nenhum botão nem o que ele faz, só o acabamento.
   Para voltar ao visual anterior, basta tirar a linha do toque-crm do index.html. */

/* letras */
body{font-family:Manrope,"Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  background:
    radial-gradient(700px 360px at 100% 0%,rgba(243,196,77,.08),transparent 60%),
    radial-gradient(rgba(24,58,94,.06) 1px,transparent 1px) 0 0/14px 14px,
    var(--fundo);
  background-attachment:fixed}
.cabecalho-cliente h1,.cartao-login h1,.vazio-geral h2,.bd-topo h1,.bd-topo h2,.bd-ola{
  font-family:"Cormorant Garamond",Georgia,serif;font-weight:700;letter-spacing:.005em}
.cabecalho-cliente h1{font-size:30px;line-height:1.05}
.cartao-login h1{font-size:27px}
.vazio-geral h2{font-size:26px}
.marca-com-logo .marca-sub{color:#f6ecd8;font-size:14px;font-weight:700;opacity:1}

/* fio dourado no topo da tela */
.fio-topo{position:fixed;top:0;left:0;right:0;height:2px;z-index:70;pointer-events:none;
  background:linear-gradient(90deg,rgba(243,196,77,0) 0%,#f3c44d 30%,#fff0c2 50%,#f3c44d 70%,rgba(243,196,77,0) 100%)}

/* lateral: a mesma aurora do CRM, com o terceiro brilho embaixo */
.lateral{background:
  radial-gradient(420px 320px at 0% -5%,rgba(24,58,94,.8),transparent 65%),
  radial-gradient(320px 260px at 110% 0%,rgba(243,196,77,.10),transparent 60%),
  radial-gradient(380px 300px at 50% 105%,rgba(16,40,67,.75),transparent 65%),
  linear-gradient(180deg,#061223 0%,#03080f 100%)}
.topo-lateral{border-bottom:1px solid rgba(243,196,77,.2);padding-bottom:12px;margin-bottom:12px}
.lateral{scrollbar-width:thin;scrollbar-color:rgba(243,196,77,.25) transparent}
.lateral::-webkit-scrollbar,.lista-clientes::-webkit-scrollbar{width:6px}
.lateral::-webkit-scrollbar-thumb,.lista-clientes::-webkit-scrollbar-thumb{background:rgba(243,196,77,.25);border-radius:999px}
.lista-clientes{scrollbar-width:thin;scrollbar-color:rgba(243,196,77,.25) transparent}

/* brilho passando na logo dourada */
.logo-brilho{position:relative;display:inline-block;line-height:0;flex:none}
.logo-brilho::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(105deg,transparent 35%,rgba(255,246,215,.85) 50%,transparent 65%);
  background-size:300% 100%;background-position:120% 0;
  -webkit-mask:url(img/logo-mybimed-dourada.png) center/contain no-repeat;
  mask:url(img/logo-mybimed-dourada.png) center/contain no-repeat;
  animation:brilho-logo 7s ease-in-out infinite}
@keyframes brilho-logo{0%,62%{background-position:120% 0}100%{background-position:-20% 0}}

/* estrelinhas douradas */
.brilho-estrela{position:absolute;z-index:2;width:6px;height:6px;pointer-events:none;
  background:radial-gradient(circle,#fff6d7 0%,#f3c44d 40%,transparent 70%);
  clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%);
  transform:scale(1.6);opacity:0;animation:brilho-estrela 4.8s ease-in-out infinite}
@keyframes brilho-estrela{0%,100%{opacity:0;transform:scale(.8)}45%{opacity:.9;transform:scale(2)}}
.lateral>.brilho-estrela,.login>.brilho-estrela{position:absolute}
body.lat-recolhe .lateral:not(.aberta)>.brilho-estrela{display:none}
@media (prefers-reduced-motion:reduce){.logo-brilho::after,.brilho-estrela{animation:none}}

/* lista de clientes: cartões arredondados, escolhido em dourado */
.item-cliente{border-radius:12px;transition:background .15s,transform .15s}
.item-cliente:hover{transform:translateX(2px)}
.item-cliente.ativo{background:linear-gradient(90deg,rgba(243,196,77,.2),rgba(243,196,77,.06));box-shadow:inset 3px 0 0 #f3c44d,0 4px 14px rgba(0,0,0,.18)}
.item-cliente.ativo .nome{color:#fff3d1;font-weight:700}
.busca-lateral input:focus{border-color:rgba(243,196,77,.55);box-shadow:0 0 0 3px rgba(243,196,77,.12)}
.btn-novo{border-color:rgba(243,196,77,.45);color:#f6ecd8}
.btn-novo:hover{background:rgba(243,196,77,.1)}

/* botões dos atalhos com relevo, como no CRM */
.atalhos-lateral .btn-cofre{box-shadow:0 3px 10px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.12);transition:transform .15s,filter .15s,background .15s}
.atalhos-lateral .btn-cofre:hover{transform:translateY(-1px);filter:brightness(1.08)}

/* área de trabalho: cartões com sombra mais suave e cantos maiores */
:root{--raio:16px;--sombra:0 1px 2px rgba(15,39,71,.06),0 10px 28px rgba(15,39,71,.08)}
.cartao{border-color:#e4eaf2}
.btn-primario{background:linear-gradient(135deg,#24507e 0%,#183a5e 55%,#0f2747 100%);
  box-shadow:0 4px 14px rgba(15,39,71,.22),inset 0 1px 0 rgba(255,255,255,.18);transition:transform .15s,box-shadow .15s,filter .15s}
.btn-primario:hover:not(:disabled){background:linear-gradient(135deg,#24507e 0%,#183a5e 55%,#0f2747 100%);transform:translateY(-1px);filter:brightness(1.08);box-shadow:0 6px 18px rgba(15,39,71,.28),inset 0 1px 0 rgba(255,255,255,.18)}
.aba.ativa{border-bottom-color:#f3c44d;color:var(--tinta)}
.cabecalho-cliente{padding-bottom:14px;border-bottom:1px solid rgba(243,196,77,.35)}

/* login: aurora com a logo brilhando */
.cartao-login{border-radius:22px;box-shadow:0 30px 70px rgba(0,0,0,.35),0 0 0 1px rgba(243,196,77,.25)}
.cartao-login button{background:linear-gradient(135deg,#24507e 0%,#183a5e 55%,#0f2747 100%);box-shadow:0 6px 16px rgba(15,39,71,.3)}

@media (max-width:860px){.cabecalho-cliente h1{font-size:26px}}

/* 14/10/2026 · botões da lateral iguais aos do CRM ("os botões do CRM ficaram mais bonitos"):
   botão escuro e transparente com borda fina, quadradinho colorido em degradê com o símbolo em branco
   e, no botão aberto, borda e brilho dourados. Só muda a aparência; cada botão faz o mesmo de antes. */
.lateral .atalhos-lateral>button.btn-cofre{display:flex!important;flex-direction:row!important;align-items:center!important;gap:8px;text-align:left!important;justify-content:flex-start!important;
  padding:6px 7px!important;min-height:42px;border-radius:12px;border:1px solid rgba(255,255,255,.10)!important;
  background:rgba(255,255,255,.04)!important;color:#f1f5f9!important;font-weight:600;font-size:12.5px;line-height:1.2;
  box-shadow:none;filter:none;transition:transform .15s,background .15s,border-color .15s,box-shadow .15s}
.lateral .atalhos-lateral>button.btn-cofre:hover{transform:translateY(-1px);background:rgba(255,255,255,.09)!important;border-color:rgba(255,255,255,.20)!important;filter:none}
.lateral .atalhos-lateral>button.btn-cofre.ativo{border-color:rgba(243,196,77,.7)!important;background:rgba(243,196,77,.14)!important;color:#fff!important;
  box-shadow:0 0 18px rgba(243,196,77,.18)!important}
.lateral .atalhos-lateral>button .lat-txt{min-width:0}
.lateral .atalhos-lateral>button .lat-ico{display:grid;place-items:center;flex:none;width:28px;height:28px;margin:0!important;border-radius:9px;
  font-size:14px;line-height:1;background:linear-gradient(135deg,var(--c1,#38bdf8),var(--c2,#4f46e5));
  box-shadow:0 2px 8px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.35);
  text-shadow:0 1px 1px rgba(0,0,0,.25)}
#btn-meudia{--c1:#38bdf8;--c2:#4f46e5}
#btn-pedidos{--c1:#34d399;--c2:#16a34a}
#btn-comercial{--c1:#a78bfa;--c2:#c026d3}
#btn-acomp{--c1:#22d3ee;--c2:#2563eb}
#btn-prod{--c1:#fb923c;--c2:#f43f5e}
#btn-grav{--c1:#c084fc;--c2:#7e22ce}
#btn-ideias{--c1:#a3e635;--c2:#059669}
#btn-cofre{--c1:#ffe7a3;--c2:#c9962a}
#btn-hist{--c1:#f472b6;--c2:#e11d48}
#btn-rel{--c1:#818cf8;--c2:#6d28d9}
#btn-notas{--c1:#2dd4bf;--c2:#047857}
/* barra recolhida: só o quadradinho, como no CRM recolhido */
@media (min-width:861px) and (hover:hover){
body.lat-recolhe .lateral:not(.aberta) .atalhos-lateral>button.btn-cofre{justify-content:center;padding:4px 0!important;min-height:40px;
  border-color:transparent!important;background:transparent!important}
body.lat-recolhe .lateral:not(.aberta) .atalhos-lateral>button.btn-cofre.ativo{border-color:rgba(243,196,77,.7)!important;background:rgba(243,196,77,.14)!important}
body.lat-recolhe .lateral:not(.aberta) .atalhos-lateral>button .lat-ico{width:32px;height:32px;font-size:16px}
}
/* duas colunas que não passam da borda; palavra comprida quebra com hífen (Acompanha-mento) */
.lateral .atalhos-lateral{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.lateral .atalhos-lateral>button .lat-txt{hyphens:auto;-webkit-hyphens:auto;overflow-wrap:break-word}
/* a regra do meudia.js usa display:block com id; aqui ele vira lado a lado como os outros */
body:not(.sem-comercial) .lateral .atalhos-lateral>#btn-comercial{display:flex!important}

/* degradês do CRM nos botões principais da Central de Produção */
#btn-prod-nova{background:linear-gradient(135deg,#38bdf8,#4f46e5)!important;border:0!important;color:#fff!important;
  box-shadow:0 4px 14px rgba(79,70,229,.32),inset 0 1px 0 rgba(255,255,255,.35)!important}
#btn-prod-publicacao{background:linear-gradient(135deg,#fb923c,#f43f5e)!important;border:0!important;color:#fff!important;
  box-shadow:0 4px 14px rgba(244,63,94,.28),inset 0 1px 0 rgba(255,255,255,.35)!important}
#btn-prod-nova,#btn-prod-publicacao{transition:transform .15s,filter .15s}
#btn-prod-nova:hover,#btn-prod-publicacao:hover{transform:translateY(-1px);filter:brightness(1.06)}