@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=IBM+Plex+Sans:wght@400;500;600;700&display=swap");

/* ===========================================================
   ADDSTV - Design System
   Modelo 1B "Painel Azul"  (ver: ADDSTV Color and Type.dc.html #1b)

   Regra do modelo:
   - O AZUL lidera a interface (acao primaria, selecao, dados).
   - O LARANJA e sinal, nao base. Aparece so onde a decisao
     acontece: status "No ar", valor final, link de venda.
   - Tipografia: Space Grotesk (display) / IBM Plex Sans (interface)
   - Painel, nao pilula: raios curtos (4/6/8px). Excecao: botoes sao
     pilula, no mesmo layout do "Anunciar agora" da landing.
   =========================================================== */
:root{
  /* --- Marca: azul lidera --- */
  --brand-blue:#0B72F0;
  --brand-blue-600:#0A5FCB;
  --brand-blue-700:#0A4FB0;
  --brand-blue-900:#0A3B7A;
  --brand-blue-200:#CFE0F7;
  --brand-blue-100:#DCEAFF;
  --brand-blue-050:#EAF1FB;

  /* --- Marca: laranja e sinal --- */
  --brand-orange:#FF6A00;
  --brand-orange-600:#C74F00;
  --brand-orange-700:#A63F00;
  --brand-orange-100:#FFE8D6;
  --brand-orange-050:#FFF0E3;

  /* Aliases de acao: use estes nos componentes */
  --primary:var(--brand-blue);
  --primary-hover:var(--brand-blue-600);
  --primary-ink:#FFFFFF;
  --accent:var(--brand-orange);
  --accent-hover:var(--brand-orange-600);

  /* --- Neutros --- */
  --ink-900:#0A2340;   /* titulos */
  --ink-800:#153050;
  --ink-700:#33455A;
  --ink-600:#4E5A66;   /* corpo */
  --ink-500:#5B6B7C;   /* meta */
  --ink-400:#8A8A80;   /* label caixa-alta */
  --ink-300:#B6BDC6;
  --ink-200:#DDDDD6;   /* borda de card */
  --ink-100:#E6E6DF;   /* divisoria */
  --ink-050:#F3F3EE;
  --white:#FFFFFF;

  /* --- Semanticos --- */
  --success:#0F8A4A; --success-bg:#E4F5EC; --success-ink:#0B6E38;
  --warning:#B87400; --warning-bg:#FDF0DA; --warning-ink:#7A5800;
  --danger:#CE2A2A;  --danger-bg:#FBE9E9;  --danger-ink:#9E1B1B;
  --info:#0B72F0;    --info-bg:#EAF1FB;    --info-ink:#0A4FB0;
  /* "No ar" e o unico status laranja: e o momento da decisao */
  --live:#FF6A00;    --live-bg:#FFF0E3;    --live-ink:#A63F00;

  /* --- Superficies --- */
  --bg:#FBFBF9;              /* off-white quente do 1B */
  --surface:#FFFFFF;
  --surface-alt:#F3F3EE;
  --surface-blue:#EAF1FB;    /* painel de dados */
  --surface-dark:#0A3B7A;
  --border:#DDDDD6;
  --border-soft:#E6E6DF;
  --border-strong:#C3C4BC;
  --border-blue:#CFE0F7;

  /* --- Tipografia --- */
  --font:"IBM Plex Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  --font-display:"Space Grotesk","IBM Plex Sans",-apple-system,"Segoe UI",sans-serif;
  --tracking-display:-.035em;
  --tracking-label:.16em;

  /* --- Raio --- */
  --r-xs:3px;   /* badge de status */
  --r-sm:4px;   /* card externo */
  --r-md:6px;   /* botao / input */
  --r-lg:8px;   /* painel de dados */
  --r-xl:12px;  /* modal */
  --r-full:999px;

  /* --- Sombra: o 1B usa borda, nao elevacao --- */
  --sh-1:0 1px 2px rgba(10,35,64,.05);
  --sh-2:0 4px 14px rgba(10,35,64,.07);
  --sh-3:0 16px 40px rgba(10,35,64,.14);
  --sh-primary:0 6px 18px rgba(11,114,240,.24);
  --sh-accent:0 6px 18px rgba(255,106,0,.22);

  /* --- Espaco --- */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:20px;
  --s-6:24px; --s-8:32px; --s-10:40px; --s-12:48px; --s-16:64px;

  --header-h:64px;
  --maxw:1180px;
}

/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--ink-600);
  font-family:var(--font);font-size:15px;line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{
  font-family:var(--font-display);margin:0;color:var(--ink-900);
  font-weight:700;letter-spacing:var(--tracking-display);
}
h1{font-size:clamp(30px,4.2vw,42px);line-height:1.02}
h2{font-size:clamp(22px,2.6vw,30px);line-height:1.08}
h3{font-size:19px;line-height:1.2;letter-spacing:-.01em}
h4{font-size:15.5px;line-height:1.3;letter-spacing:-.01em}
p{margin:0 0 var(--s-3)}
a{color:var(--brand-blue);text-decoration:none}
a:hover{color:var(--brand-blue-600);text-decoration:underline}
img,svg{max-width:100%}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:3px solid rgba(11,114,240,.42);outline-offset:2px;border-radius:var(--r-md)}

/* Rotulo caixa-alta do 1B */
.eyebrow{
  font-size:11px;font-weight:600;text-transform:uppercase;
  letter-spacing:var(--tracking-label);color:var(--ink-400);
}

.container{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--s-5)}
.muted{color:var(--ink-500)}
.small{font-size:13px}
.xsmall{font-size:12px}
.bold{font-weight:600}
.center{text-align:center}
.right{text-align:right}
.row{display:flex;gap:var(--s-3);align-items:center}
.row-between{display:flex;gap:var(--s-3);align-items:center;justify-content:space-between}
.col{display:flex;flex-direction:column}
.wrap{flex-wrap:wrap}
.grow{flex:1}
.hidden{display:none !important}
.stack>*+*{margin-top:var(--s-3)}
.mt-2{margin-top:var(--s-2)}.mt-3{margin-top:var(--s-3)}.mt-4{margin-top:var(--s-4)}
.mt-5{margin-top:var(--s-5)}.mt-6{margin-top:var(--s-6)}.mt-8{margin-top:var(--s-8)}
.mb-0{margin-bottom:0}.mb-2{margin-bottom:var(--s-2)}.mb-3{margin-bottom:var(--s-3)}
.mb-4{margin-bottom:var(--s-4)}.mb-5{margin-bottom:var(--s-5)}.mb-6{margin-bottom:var(--s-6)}

/* ---------- Botoes ----------
   Layout unico: pilula, igual ao "Anunciar agora" da landing.
   Hierarquia: primario ESCURO solido com seta no circulo -> secundario
   contornado -> terciario laranja em TEXTO ("Falar com vendas ->").
   .btn-accent (laranja solido) e reservado ao momento de decisao:
   confirmar pagamento, colocar no ar. No maximo um por tela.
   A seta do primario/accent vem do CSS (::after): nao escreva "->"
   no texto desses botoes.                                           */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--s-2);
  padding:12px 20px;border-radius:var(--r-full);border:1.5px solid transparent;
  font-family:var(--font);font-weight:600;font-size:13.5px;cursor:pointer;
  background:var(--ink-050);color:var(--ink-700);
  transition:background .18s ease,border-color .18s ease,color .18s ease,
             box-shadow .2s ease,transform .12s ease;
  text-decoration:none !important;white-space:nowrap;
}

/* ATENCAO ao mexer nos :hover abaixo.
   Um <a class="btn"> herda o `a:hover{color:...}` do reset, que tem
   especificidade (0,1,1) e venceria um `.btn-primary{color:#fff}` (0,1,0)
   — o texto sumia no fundo da propria cor. Por isso TODO hover de botao
   usa o mesmo gate `:hover:not(:disabled):not([aria-disabled="true"])`,
   que da (0,4,0) a todos: a especificidade empata e quem decide e a ordem
   no arquivo (variantes vem depois da regra generica). E todo hover de
   variante solida REAFIRMA a propria cor de texto. */
.btn:hover:not(:disabled):not([aria-disabled="true"]){
  background:var(--ink-100);color:var(--ink-900);
}
.btn:active:not(:disabled):not([aria-disabled="true"]){
  transform:translateY(1px);box-shadow:none;
}

.btn-primary{background:var(--ink-900);color:#fff}
.btn-primary:hover:not(:disabled):not([aria-disabled="true"]){
  background:var(--brand-blue);color:#fff;transform:translateY(-1px);
}

.btn-accent{background:var(--accent);color:#fff;box-shadow:var(--sh-accent)}
.btn-accent:hover:not(:disabled):not([aria-disabled="true"]){
  background:var(--accent-hover);color:#fff;
  box-shadow:0 9px 24px rgba(255,106,0,.34);transform:translateY(-1px);
}

/* seta no circulo branco, com a cor do proprio botao */
.btn-primary,.btn-accent{padding:9px 9px 9px 20px;gap:10px}
.btn-primary::after,.btn-accent::after{
  content:"→";width:26px;height:26px;flex:none;border-radius:var(--r-full);
  background:#fff;color:var(--ink-900);display:grid;place-items:center;
  font-size:13px;line-height:1;transition:transform .18s ease,color .18s ease;
}
.btn-accent::after{color:var(--accent)}
.btn-primary:hover:not(:disabled):not([aria-disabled="true"])::after{color:var(--brand-blue);transform:translateX(2px)}
.btn-accent:hover:not(:disabled):not([aria-disabled="true"])::after{color:var(--accent-hover);transform:translateX(2px)}

.btn-outline{background:var(--white);border-color:var(--border-strong);color:var(--ink-700)}
.btn-outline:hover:not(:disabled):not([aria-disabled="true"]){
  background:var(--brand-blue-050);border-color:var(--brand-blue);color:var(--brand-blue-700);
}

.btn-ghost{background:transparent;color:var(--ink-600)}
.btn-ghost:hover:not(:disabled):not([aria-disabled="true"]){
  background:var(--ink-050);color:var(--ink-900);
}

/* laranja em texto: o "Falar com vendas ->" do 1B */
.btn-link{background:transparent;color:var(--accent);padding:12px 6px;box-shadow:none}
.btn-link:hover:not(:disabled):not([aria-disabled="true"]){
  background:transparent;color:var(--accent-hover);
  text-decoration:underline !important;text-underline-offset:3px;
}

.btn-danger{background:var(--danger);color:#fff}
.btn-danger:hover:not(:disabled):not([aria-disabled="true"]){
  background:#B02020;color:#fff;box-shadow:0 9px 24px rgba(206,42,42,.30);transform:translateY(-1px);
}
.btn-success{background:var(--success);color:#fff}
.btn-success:hover:not(:disabled):not([aria-disabled="true"]){
  background:#0C7440;color:#fff;box-shadow:0 9px 24px rgba(15,138,74,.30);transform:translateY(-1px);
}

/* Fica por ultimo: vence qualquer :hover de variante (mesma especificidade,
   ordem posterior) e mata o efeito no botao travado. */
.btn:disabled,.btn[aria-disabled="true"]{
  opacity:.45;cursor:not-allowed;box-shadow:none;transform:none;
}
.btn-lg{padding:15px 26px;font-size:15px}
.btn-sm{padding:8px 14px;font-size:12.5px}
.btn-block{width:100%}

/* tamanhos da pilula com seta */
.btn-primary.btn-lg,.btn-accent.btn-lg{padding:11px 11px 11px 28px}
.btn-primary.btn-lg::after,.btn-accent.btn-lg::after{width:34px;height:34px;font-size:15px}
.btn-primary.btn-sm,.btn-accent.btn-sm{padding:5px 5px 5px 16px;gap:8px}
.btn-primary.btn-sm::after,.btn-accent.btn-sm::after{width:22px;height:22px;font-size:11.5px}
/* largura total: texto centralizado, seta presa na ponta direita */
.btn-primary.btn-block,.btn-accent.btn-block{position:relative;padding-inline:52px}
.btn-primary.btn-block::after,.btn-accent.btn-block::after{position:absolute;right:9px}
.btn-primary.btn-block.btn-lg::after,.btn-accent.btn-block.btn-lg::after{right:11px}

/* ---------- Cards ---------- */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-sm);box-shadow:var(--sh-1)}
.card-pad{padding:var(--s-5)}
.card-head{
  padding:var(--s-5) var(--s-6);border-bottom:1px solid var(--border-soft);
  display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);
}
.card-body{padding:var(--s-5) var(--s-6)}

/* Painel de dados azul - o bloco de metricas do 1B */
.panel{background:var(--surface-blue);border-radius:var(--r-lg);padding:var(--s-5)}
.panel-dark{background:var(--surface-dark);color:var(--brand-blue-100);border-radius:var(--r-lg);padding:var(--s-5)}
.panel-dark h1,.panel-dark h2,.panel-dark h3,.panel-dark h4{color:#fff}

/* Faixa de paleta (referencia visual do modelo) */
.swatches{display:flex;height:64px;border-radius:var(--r-sm);overflow:hidden}
.swatches>span{
  flex:1;display:flex;align-items:flex-end;padding:8px 10px;
  font-size:10px;font-weight:700;letter-spacing:.08em;
}

/* ---------- Badges ---------- */
.badge{
  display:inline-flex;align-items:center;gap:6px;padding:4px 9px;border-radius:var(--r-xs);
  font-size:11px;font-weight:700;line-height:1.5;letter-spacing:.06em;text-transform:uppercase;
  background:var(--ink-050);color:var(--ink-500);white-space:nowrap;
}
.badge .dot{width:6px;height:6px;border-radius:50%;background:currentColor}
.badge-live{background:var(--live);color:#fff}
.badge-success{background:var(--success-bg);color:var(--success-ink)}
.badge-warning{background:var(--warning-bg);color:var(--warning-ink)}
.badge-danger{background:var(--danger-bg);color:var(--danger-ink)}
.badge-info{background:var(--info-bg);color:var(--info-ink)}
.badge-orange{background:var(--brand-orange-050);color:var(--brand-orange-700)}
.badge-neutral{background:var(--ink-050);color:var(--ink-500)}
.badge-pill{border-radius:var(--r-full);padding:4px 11px}

/* ---------- Formulario ---------- */
.field{display:block;margin-bottom:var(--s-4)}
.label{display:block;font-size:12.5px;font-weight:600;color:var(--ink-700);margin-bottom:6px}
.hint{font-size:12.5px;color:var(--ink-500);margin-top:5px}
.input,.select,.textarea{
  width:100%;padding:11px 14px;border:1.5px solid var(--border);border-radius:var(--r-md);
  background:var(--white);color:var(--ink-800);
  transition:border-color .15s,box-shadow .15s;
}
.input::placeholder,.textarea::placeholder{color:var(--ink-300)}
.input:focus,.select:focus,.textarea:focus{
  outline:none;border-color:var(--brand-blue);box-shadow:0 0 0 4px rgba(11,114,240,.13);
}
.input.err,.select.err,.textarea.err{border-color:var(--danger)}
.textarea{min-height:96px;resize:vertical}
.select{appearance:none;padding-right:36px}

/* Chips de opcao (formato / duracao / quantidade) - selecao AZUL */
.chips{display:flex;flex-wrap:wrap;gap:var(--s-2)}
.chip{
  padding:10px 16px;border:1.5px solid var(--border);border-radius:var(--r-md);
  background:var(--white);font-weight:600;font-size:13.5px;cursor:pointer;color:var(--ink-600);
  transition:border-color .15s,color .15s,background .15s,box-shadow .15s;
}
.chip:hover{border-color:var(--brand-blue);color:var(--brand-blue)}
.chip[aria-pressed="true"]{
  background:var(--brand-blue);border-color:var(--brand-blue);color:#fff;box-shadow:var(--sh-primary);
}
.chip.accent[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);box-shadow:var(--sh-accent)}
.chip:disabled{opacity:.4;cursor:not-allowed}
/* compacto: listas longas, como os 16 nichos do cadastro */
.chip-sm{padding:7px 11px;font-size:12.5px;border-radius:var(--r-sm);font-weight:500}
.chip-sm[aria-pressed="true"]{font-weight:600;box-shadow:none}

/* Checkbox */
.check{
  display:flex;gap:var(--s-3);align-items:flex-start;cursor:pointer;padding:var(--s-4);
  border:1.5px solid var(--border);border-radius:var(--r-md);background:var(--white);
  transition:border-color .15s,background .15s;
}
.check:hover{border-color:var(--border-strong)}
.check input{margin-top:2px;width:20px;height:20px;accent-color:var(--brand-blue);flex-shrink:0;cursor:pointer}
.check.checked{border-color:var(--brand-blue);background:var(--brand-blue-050)}

/* Barra de progresso (o "62% do pacote" do 1B) */
.progress{height:8px;background:var(--brand-blue-200);border-radius:var(--r-sm);overflow:hidden}
.progress>i{display:block;height:100%;background:var(--brand-blue);border-radius:var(--r-sm)}
.progress.accent{background:var(--brand-orange-100)}
.progress.accent>i{background:var(--accent)}

/* Numero de metrica (Space Grotesk, apertado) */
.metric{
  font-family:var(--font-display);font-weight:700;font-size:26px;
  letter-spacing:var(--tracking-display);color:var(--brand-blue);line-height:1.05;
}
.metric.accent{color:var(--accent)}
.metric-label{
  font-size:11px;font-weight:600;text-transform:uppercase;
  letter-spacing:var(--tracking-label);color:var(--ink-400);margin-top:4px;
}

/* ---------- Tabela ---------- */
.table-wrap{overflow-x:auto;border-radius:var(--r-sm)}
table.tbl{width:100%;border-collapse:collapse;font-size:14px;min-width:640px}
table.tbl th{
  text-align:left;padding:11px var(--s-4);background:var(--surface-alt);color:var(--ink-400);
  font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:var(--tracking-label);
  border-bottom:1px solid var(--border);white-space:nowrap;
}
table.tbl td{padding:13px var(--s-4);border-bottom:1px solid var(--border-soft);vertical-align:middle}
table.tbl tbody tr:hover{background:var(--brand-blue-050)}
table.tbl tbody tr:last-child td{border-bottom:none}

/* ---------- Alertas ---------- */
.alert{display:flex;gap:var(--s-3);padding:var(--s-4);border-radius:var(--r-md);font-size:14px;border:1px solid transparent}
.alert-info{background:var(--info-bg);border-color:var(--border-blue);color:var(--info-ink)}
.alert-warning{background:var(--warning-bg);border-color:#F0DCAE;color:var(--warning-ink)}
.alert-danger{background:var(--danger-bg);border-color:#F2C7C7;color:var(--danger-ink)}
.alert-success{background:var(--success-bg);border-color:#BCE3CD;color:var(--success-ink)}

/* ---------- Grade ---------- */
.grid{display:grid;gap:var(--s-4)}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
@media(max-width:900px){.g3,.g4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.g2,.g3,.g4{grid-template-columns:1fr}}

.divider{height:1px;background:var(--border-soft);margin:var(--s-5) 0}

/* ---------- Toast ---------- */
.toast-wrap{position:fixed;top:16px;right:16px;z-index:9999;display:flex;flex-direction:column;gap:8px}
.toast{
  background:var(--ink-900);color:#fff;padding:12px 18px;border-radius:var(--r-md);
  box-shadow:var(--sh-3);font-size:14px;font-weight:500;animation:tin .25s ease;max-width:340px;
}
.toast.ok{background:var(--success)}
.toast.err{background:var(--danger)}
@keyframes tin{from{opacity:0;transform:translateX(20px)}to{opacity:1;transform:none}}

/* ---------- Modal ---------- */
.modal-bg{
  position:fixed;inset:0;background:rgba(10,35,64,.55);z-index:900;
  display:flex;align-items:center;justify-content:center;padding:var(--s-4);
}
.modal{
  background:var(--surface);border-radius:var(--r-xl);box-shadow:var(--sh-3);
  width:100%;max-width:560px;max-height:88vh;overflow:auto;animation:mup .22s ease;
}
@keyframes mup{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}
}

/* atributo hidden sempre vence o display dos componentes */
[hidden]{display:none!important}