/* =====================================================================
   2!H AGÊNCIA — sistema visual do painel

   O grosso do estilo dos componentes é inline (app.js / login.js). Aqui
   ficam: (1) os tokens que dark e light compartilham, (2) o que estilo
   inline não alcança — hover, foco, media queries, pseudo-elementos — e
   (3) as classes de superfície/botão, cujo estilo foi tirado do inline
   justamente para poder ter estado de hover e variar por tema.
   ===================================================================== */

:root{
  --bg-rgb:11,11,9;
  --elev-rgb:16,16,13;
  --fg-rgb:242,241,236;
  --glow-1:rgba(245,195,40,.15);
  --glow-2:rgba(90,140,255,.12);
  --glow-3:rgba(79,209,139,.07);
  --watermark-opacity:.1;
  --placeholder-alpha:.58;
  --c-gold:#F5C328;
  --c-gold-bright:#FFCE3D;
  --c-green:#4FD18B;
  --c-blue:#7BA7FF;
  --c-red:#F0705A;
  --c-gray:#8C93A0;
  --c-alert-red-text:#FFC7BB;
  --c-alert-green-text:#B8F0D1;
  --c-alert-gold-text:#FFE9A8;

  /* superfícies, sombras e ouro */
  --gold-hi:#FFEFC0;
  --gold-lo:#B8830A;
  --gold-line:rgba(245,195,40,.3);
  --gold-line-soft:rgba(245,195,40,.15);
  --hair:rgba(var(--fg-rgb),.1);
  --hair-2:rgba(var(--fg-rgb),.15);
  --field-bg:rgba(var(--bg-rgb),.45);
  --surface:linear-gradient(165deg,rgba(var(--fg-rgb),.085),rgba(var(--fg-rgb),.026));
  --surface-2:linear-gradient(165deg,rgba(var(--fg-rgb),.055),rgba(var(--fg-rgb),.018));
  --surface-hover:linear-gradient(165deg,rgba(var(--fg-rgb),.13),rgba(var(--fg-rgb),.045));
  --sh-sm:0 8px 20px rgba(0,0,0,.34);
  --sh-md:0 18px 40px rgba(0,0,0,.42),inset 0 1px 0 rgba(255,255,255,.07);
  --sh-lg:0 26px 58px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.08);
  --sh-hover:0 30px 62px rgba(0,0,0,.55),0 0 0 1px rgba(245,195,40,.3),0 0 34px rgba(245,195,40,.12),inset 0 1px 0 rgba(255,255,255,.13);
  --sh-gold:0 12px 28px rgba(245,195,40,.26);
  --sh-gold-hover:0 16px 36px rgba(245,195,40,.4);
  --sheen:rgba(255,255,255,.5);
  --rail:rgba(var(--fg-rgb),.06);
  color-scheme:dark;
}

:root[data-theme="light"]{
  --bg-rgb:247,246,241;
  --elev-rgb:255,255,255;
  --fg-rgb:21,21,15;
  --glow-1:rgba(245,195,40,.16);
  --glow-2:rgba(90,140,255,.09);
  --glow-3:rgba(79,209,139,.08);
  --watermark-opacity:.06;
  --placeholder-alpha:.4;
  --c-gold:#8A5A00;
  --c-gold-bright:#7A4E00;
  --c-green:#1E8E5B;
  --c-blue:#2F5FD1;
  --c-red:#C23B21;
  --c-gray:#6B7280;
  --c-alert-red-text:#A62E17;
  --c-alert-green-text:#146C46;
  --c-alert-gold-text:#7A4E00;

  --gold-hi:#FFD98A;
  --gold-lo:#8A6100;
  --gold-line:rgba(154,107,0,.3);
  --gold-line-soft:rgba(154,107,0,.14);
  --field-bg:rgba(255,255,255,.72);
  --surface:linear-gradient(165deg,rgba(255,255,255,.94),rgba(255,255,255,.68));
  --surface-2:linear-gradient(165deg,rgba(255,255,255,.82),rgba(255,255,255,.56));
  --surface-hover:linear-gradient(165deg,#fff,rgba(255,255,255,.86));
  --sh-sm:0 6px 16px rgba(60,48,16,.07);
  --sh-md:0 12px 30px rgba(60,48,16,.09),inset 0 1px 0 rgba(255,255,255,.9);
  --sh-lg:0 20px 46px rgba(60,48,16,.11),inset 0 1px 0 rgba(255,255,255,.95);
  --sh-hover:0 24px 52px rgba(60,48,16,.15),0 0 0 1px rgba(154,107,0,.3),0 0 28px rgba(245,195,40,.16),inset 0 1px 0 #fff;
  --sh-gold:0 10px 24px rgba(196,148,20,.32);
  --sh-gold-hover:0 14px 32px rgba(196,148,20,.45);
  --sheen:rgba(255,255,255,.8);
  --rail:rgba(24,20,8,.05);
  color-scheme:light;
}

@font-face{font-family:'General Sans';src:url('assets/fonts/GeneralSans-Medium.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'General Sans';src:url('assets/fonts/GeneralSans-Semibold.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'General Sans';src:url('assets/fonts/GeneralSans-Bold.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}

*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:rgb(var(--bg-rgb));color:rgb(var(--fg-rgb));font-family:'Familjen Grotesk',system-ui,sans-serif;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;transition:background-color .25s ease,color .25s ease}

body::before{content:'';position:fixed;inset:0;pointer-events:none;z-index:0;background:
  radial-gradient(760px 520px at 12% -6%,var(--glow-1),transparent 62%),
  radial-gradient(680px 480px at 88% 2%,var(--glow-2),transparent 66%),
  radial-gradient(900px 620px at 50% 108%,var(--glow-3),transparent 70%);
  transition:opacity .25s ease}
body::after{content:'';position:fixed;left:50%;top:52%;width:min(920px,78vw);height:min(920px,78vw);transform:translate(-50%,-50%);pointer-events:none;z-index:0;opacity:var(--watermark-opacity);transition:opacity .25s ease;
  background:url('assets/logo-2h-vetor.png') center/contain no-repeat}

input,select,textarea,button{font-family:inherit;color:inherit}
input::placeholder,textarea::placeholder{color:rgba(var(--fg-rgb),var(--placeholder-alpha))}
input:focus,select:focus,textarea:focus{outline:1.5px solid rgba(245,195,40,.7);outline-offset:1px}
input:hover:not(:focus),textarea:hover:not(:focus),select:hover:not(:focus){border-color:var(--gold-line)!important}
select option{background:rgb(var(--elev-rgb));color:rgb(var(--fg-rgb))}
a{color:var(--c-gold)}
a:hover{color:var(--c-gold-bright)}
button{border:none;background:none}
:focus-visible{outline:2px solid rgba(245,195,40,.85);outline-offset:2px;border-radius:8px}
#app,#app *{transition:background-color .22s ease,border-color .22s ease,color .22s ease,box-shadow .22s ease,transform .22s cubic-bezier(.22,.9,.3,1)}

@keyframes drawer{from{transform:translateX(34px);opacity:0}to{transform:translateX(0);opacity:1}}
@keyframes sheet{from{transform:translateY(26px);opacity:0}to{transform:translateY(0);opacity:1}}
@keyframes veil{from{opacity:0}to{opacity:1}}
@keyframes rise{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
@keyframes pulseDot{0%,100%{opacity:.45}50%{opacity:1}}
@keyframes liveCore{0%,100%{transform:scale(1);box-shadow:0 0 6px currentColor}50%{transform:scale(1.18);box-shadow:0 0 13px currentColor}}
@keyframes liveRing{0%{transform:scale(1);opacity:.75}70%{transform:scale(2.9);opacity:0}100%{transform:scale(2.9);opacity:0}}

::selection{background:rgba(245,195,40,.3)}

#app{position:relative;z-index:1;min-height:100vh;min-height:100dvh;display:flex;flex-direction:column}

/* =====================================================================
   Scrollbar
   Desktop: trilho fino, dourado, com iluminação. Mobile/toque: some.
   ===================================================================== */

::-webkit-scrollbar-button{display:none;width:0;height:0}
::-webkit-scrollbar-corner{background:transparent}

/* Firefox não tem ::-webkit-scrollbar e usa as propriedades padrão. No
   Chrome/Edge/Safari elas precisam ficar de fora: definir scrollbar-width
   ou scrollbar-color lá desliga o ::-webkit-scrollbar inteiro, e com ele
   o gradiente e o brilho da barra. */
@supports not selector(::-webkit-scrollbar){
  @media (pointer:fine){
    html{scrollbar-width:thin;scrollbar-color:var(--c-gold) transparent}
  }
}

@media (pointer:fine){
  ::-webkit-scrollbar{width:9px;height:9px}
  ::-webkit-scrollbar-track{background:var(--rail);border-radius:99px;box-shadow:inset 0 0 4px rgba(0,0,0,.28)}
  ::-webkit-scrollbar-thumb{
    border-radius:99px;
    background:linear-gradient(180deg,var(--gold-hi) 0%,#F5C328 42%,var(--gold-lo) 100%);
    box-shadow:
      inset 0 0 0 1px rgba(255,255,255,.4),
      inset 0 1px 1px rgba(255,255,255,.65),
      0 0 6px rgba(245,195,40,.6),
      0 0 15px rgba(245,195,40,.32);
  }
  ::-webkit-scrollbar-thumb:hover{
    background:linear-gradient(180deg,#FFF8E2 0%,#FFD34F 42%,#D19A0C 100%);
    box-shadow:
      inset 0 0 0 1px rgba(255,255,255,.6),
      inset 0 1px 1px rgba(255,255,255,.85),
      0 0 10px rgba(245,195,40,.85),
      0 0 26px rgba(245,195,40,.45);
  }
  ::-webkit-scrollbar-thumb:active{background:linear-gradient(180deg,#FFD34F,#C08A00)}
}

/* Toque / telas estreitas: a barra some por completo, a rolagem continua. */
@media (pointer:coarse),(max-width:820px){
  html{scrollbar-width:none;-ms-overflow-style:none}
  *{scrollbar-width:none}
  ::-webkit-scrollbar{width:0!important;height:0!important;display:none!important}
}

/* Faixas que rolam na horizontal (abas da ficha) nunca mostram barra. */
.hscroll{scrollbar-width:none;-ms-overflow-style:none}
.hscroll::-webkit-scrollbar{width:0;height:0;display:none}

/* =====================================================================
   Superfícies e componentes
   ===================================================================== */

/* backdrop-filter só nas superfícies de primeiro nível: empilhar blur em
   painel dentro de painel derruba a taxa de quadros sem ganho visual, já
   que atrás deles só existe outra superfície opaca. */
.surface{background:var(--surface);border:1px solid var(--hair);box-shadow:var(--sh-md);backdrop-filter:blur(14px) saturate(150%)}
.surface-2{background:var(--surface-2);border:1px solid var(--hair);box-shadow:var(--sh-sm)}
.surface-lg{box-shadow:var(--sh-lg)}
.dashed{background:var(--surface-2);border:1px dashed var(--hair-2)}

/* Cabeçalho: hairline dourado no lugar da borda cinza. */
.hdr{position:sticky;top:0;z-index:30;background:rgba(var(--bg-rgb),.72);backdrop-filter:blur(24px) saturate(170%)}
.hdr::after{content:'';position:absolute;left:0;right:0;bottom:0;height:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent,var(--gold-line) 22%,rgba(var(--fg-rgb),.12) 55%,transparent)}

/* Card de cliente */
.card{position:relative;background:var(--surface);border:1px solid var(--hair);box-shadow:var(--sh-md);overflow:hidden}
.card::before{content:'';position:absolute;top:0;left:16%;right:16%;height:1px;pointer-events:none;opacity:.6;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.45),transparent);transition:opacity .25s ease,left .3s ease,right .3s ease}
.card:hover,.card:focus-visible{background:var(--surface-hover);border-color:var(--gold-line);box-shadow:var(--sh-hover);transform:translateY(-3px)}
.card:hover::before,.card:focus-visible::before{left:6%;right:6%;opacity:1;background:linear-gradient(90deg,transparent,var(--gold-hi),transparent)}
.card:active{transform:translateY(-1px)}

.mini-card{background:var(--surface-2);border:1px solid var(--hair);box-shadow:var(--sh-sm)}
.mini-card:hover,.mini-card:focus-visible{background:var(--surface-hover);border-color:var(--gold-line);box-shadow:var(--sh-sm),0 0 0 1px var(--gold-line-soft);transform:translateX(3px)}

/* Botões */
.btn{cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px;white-space:nowrap;border-radius:11px;font-weight:600;line-height:1}
.btn-ghost{background:var(--surface-2);border:1px solid var(--hair-2);backdrop-filter:blur(12px);box-shadow:var(--sh-sm)}
.btn-ghost:hover{background:var(--surface-hover);border-color:var(--gold-line);box-shadow:var(--sh-sm),0 0 18px rgba(245,195,40,.12);transform:translateY(-1px)}
.btn-ghost:active{transform:translateY(0)}

.btn-gold{position:relative;overflow:hidden;color:#15150F;
  background:linear-gradient(180deg,#FFDF7A 0%,#FFD34F 34%,#EFB318 100%);
  border:1px solid rgba(255,255,255,.3);
  box-shadow:var(--sh-gold),inset 0 1px 0 rgba(255,255,255,.6),inset 0 -1px 0 rgba(120,80,0,.25)}
.btn-gold::after{content:'';position:absolute;top:0;left:-70%;width:45%;height:100%;pointer-events:none;
  transform:skewX(-18deg);background:linear-gradient(100deg,transparent,var(--sheen),transparent);transition:left .6s cubic-bezier(.3,.8,.4,1)}
.btn-gold:hover{box-shadow:var(--sh-gold-hover),inset 0 1px 0 rgba(255,255,255,.75),inset 0 -1px 0 rgba(120,80,0,.25);transform:translateY(-1px)}
.btn-gold:hover::after{left:130%}
.btn-gold:active{transform:translateY(0);box-shadow:var(--sh-gold),inset 0 2px 5px rgba(120,80,0,.35)}
.btn-gold[data-busy="1"]{cursor:default}
.btn-gold[data-busy="1"]:hover{transform:none}

.btn-danger{background:linear-gradient(180deg,#D2503A,#B93A25);color:#fff;border:1px solid rgba(255,255,255,.18);box-shadow:0 10px 24px rgba(185,58,37,.32)}
.btn-danger:hover{transform:translateY(-1px);box-shadow:0 14px 30px rgba(185,58,37,.45)}

.btn-quiet-danger{background:transparent;color:var(--c-red);border:1px solid rgba(240,112,90,.34);font-weight:600}
.btn-quiet-danger:hover{background:rgba(240,112,90,.12);border-color:rgba(240,112,90,.6)}

/* Segmentos (Cards/Faixas) e abas da ficha: mesmo desenho, mesmo estado. */
.seg,.tab{cursor:pointer;border-radius:9px;font-weight:600;white-space:nowrap;
  background:transparent;border:1px solid transparent;color:rgba(var(--fg-rgb),.96)}
.tab{border-radius:10px;background:var(--surface-2);border-color:var(--hair)}
.seg:hover,.tab:hover{background:var(--surface-hover);border-color:var(--gold-line-soft)}
.seg-on,.seg-on:hover,.tab-on,.tab-on:hover{color:#15150F;border-color:rgba(255,255,255,.28);
  background:linear-gradient(180deg,#FFDF7A,#FFD34F 38%,#EFB318);
  box-shadow:0 6px 16px rgba(245,195,40,.3),inset 0 1px 0 rgba(255,255,255,.6)}

/* Linhas de checklist: sem destaque ao passar o mouse ou tocar (o toggle
   já mostra o próprio estado com a cor). */
.check-row{border-radius:10px}
.check-row:focus-visible{outline:none}

/* Número dourado do resumo: gradiente no texto, não cor chapada. */
.gold-text{background:linear-gradient(180deg,var(--gold-hi) 0%,#F5C328 55%,var(--gold-lo) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}

/* Gaveta lateral da ficha */
.drawer{background:rgb(var(--elev-rgb));border-left:1px solid var(--hair-2);box-shadow:-30px 0 80px rgba(0,0,0,.55)}
.drawer::before{content:'';position:absolute;top:0;left:0;bottom:0;width:1px;pointer-events:none;
  background:linear-gradient(180deg,transparent,var(--gold-line) 18%,var(--gold-line-soft) 60%,transparent)}

.avatar-hint{opacity:0;transition:opacity .16s ease}
label:hover .avatar-hint,label:focus-within .avatar-hint{opacity:1}

/* Linhas de progresso por canal: acendem ao passar o mouse. */
.chan-row{border-radius:10px;padding:6px 8px;margin:-6px -8px}
.chan-row:hover{background:rgba(245,195,40,.07)}

/* Números do resumo: cada um atrás de um fio vertical, para o bloco não
   ficar solto no meio do espaço em telas largas. */
.stat{position:relative;padding-left:22px}
.stat::before{content:'';position:absolute;left:0;top:1px;bottom:1px;width:1px;
  background:linear-gradient(180deg,transparent,var(--hair-2) 30%,var(--hair-2) 70%,transparent)}
.stat-label{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.13em;
  color:rgba(var(--fg-rgb),.86);text-transform:uppercase;line-height:1.35;min-height:2.7em}
.stat-num{font-family:'IBM Plex Mono',monospace;font-size:28px;font-weight:600;line-height:1}

/* Cartão do login: fio de ouro no topo, como a borda de um convite. */
.login-card::before{content:'';position:absolute;top:0;left:12%;right:12%;height:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent,var(--gold-hi),transparent);opacity:.85}

/* =====================================================================
   Responsivo
   ===================================================================== */

/* Login: no celular a marca fica centrada acima do formulário. */
.login-wrap{width:100%;max-width:1120px;display:flex;gap:clamp(20px,3vw,44px);align-items:stretch;flex-wrap:wrap}

/* Em tela estreita a marca d'água concentra num espaço menor e começa a
   competir com o texto, então ela recua. */
@media (max-width:1000px){
  :root{--watermark-opacity:.055}
  :root[data-theme="light"]{--watermark-opacity:.035}
}

@media (max-width:900px){
  .login-brand{align-items:center;text-align:center;gap:20px}
  .login-brand .brand-row{justify-content:center}
  .login-brand h1{margin-left:auto;margin-right:auto;max-width:18ch}
  .login-brand p{margin-left:auto;margin-right:auto}
  /* Centralizada, a lista em coluna fica com a margem esquerda serrilhada;
     em linha ela vira uma faixa de selos e o bloco fecha certo. */
  .login-marks{flex-direction:row!important;flex-wrap:wrap;justify-content:center;gap:10px 20px}
}
@media (max-width:700px){
  .login-brand h1{font-size:clamp(26px,7.4vw,34px);max-width:15ch}
  .login-brand p{font-size:14.5px;max-width:36ch}
  /* !important porque o display vem de estilo inline (render em string). */
  .login-marks{display:none!important}
}

@media (max-width:820px){
  .hdr{padding-top:11px;padding-bottom:11px}
  .hdr-actions{flex:1 1 100%;justify-content:flex-start;margin-top:2px}
  .hdr-actions .btn{flex:1 1 auto}
  .hdr-brand{flex:1 1 auto;min-width:0}
  /* A ficha do cliente vira tela cheia, subindo de baixo. */
  .drawer{top:0;left:0;right:0;bottom:0;width:100%;border-left:none;animation-name:sheet!important;
    padding-bottom:env(safe-area-inset-bottom,0)}
  .drawer::before{display:none}
}

/* No celular os três números viram uma faixa de três colunas sob o anel,
   em vez de quebrar 2+1 e deixar a metade direita do cartão vazia. */
@media (max-width:640px){
  .sum-row{justify-content:center}
  .stats-grid{grid-template-columns:repeat(3,1fr)!important;gap:0 2px}
  .stat{padding-left:11px}
  .stat-label{font-size:10px;letter-spacing:.09em}
  .stat-num{font-size:23px}
}

@media (max-width:520px){
  .hdr-actions .btn-label-long{display:none}
}

/* Quem pediu menos movimento recebe menos movimento. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .card:hover,.mini-card:hover,.btn-gold:hover,.btn-ghost:hover{transform:none}
}