/* Central — mesmo visual do /admin (tokens .adm de src/app/globals.css). */
:root {
  --primaria: #0c5446; --primaria-rgb: 12, 84, 70;
  --destaque: #00efb9; --destaque-rgb: 0, 239, 185; --destaque-tinta: #00241b;
  --bg: #0d1110; --lateral: #0a0e0d; --superficie: #141a18; --elevado: #1a2120; --hover: #1f2826;
  --borda: rgba(255, 255, 255, 0.07); --borda-forte: rgba(255, 255, 255, 0.13);
  --texto: #eef3f1; --texto-2: rgba(238, 243, 241, 0.66); --texto-3: rgba(238, 243, 241, 0.42);
  --ok: #34d399; --mal: #fb7185; --alerta: #fbbf24; --info: #7dd3fc; --serie-2: #a78bfa;
  color-scheme: dark;
}
* { box-sizing: border-box; margin: 0; padding: 0 }
body {
  font: 14px/1.45 "Helvetica Neue", Helvetica, Arial, "Segoe UI", Roboto, sans-serif; color: var(--texto); font-feature-settings: "cv11", "ss01";
  background: radial-gradient(900px 480px at 85% -10%, rgba(var(--destaque-rgb), .07), transparent 60%),
              radial-gradient(700px 420px at -10% 110%, rgba(var(--primaria-rgb), .35), transparent 60%), var(--bg);
  min-height: 100vh;
}
::selection { background: rgba(var(--destaque-rgb), .3) }
a { color: inherit }
svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; flex: none }
button, input, select, textarea { font: inherit; color: inherit }
[hidden] { display: none !important }
.suave { color: var(--texto-3) }
.erro { color: var(--mal) }
.aviso { color: var(--alerta); font-size: 12.5px }
small { font-size: 12px; color: var(--texto-3) }
.pos { color: var(--ok) } .neg { color: var(--mal) }

/* Botões */
button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: 10px; padding: 8px 14px; font-weight: 600; cursor: pointer;
  border: 1px solid var(--borda-forte); background: var(--elevado); color: var(--texto); transition: filter .15s, background .15s, border-color .15s }
button:hover { background: var(--hover) }
button.primario { background: var(--destaque); color: var(--destaque-tinta); border-color: transparent; box-shadow: 0 10px 28px -14px rgba(var(--destaque-rgb), .8) }
button.primario:hover { filter: brightness(1.08); background: var(--destaque) }
button.discreto { background: transparent; color: var(--texto-2); font-weight: 500 }
button.discreto:hover { background: rgba(255,255,255,.04); color: var(--texto) }
button.perigoso { background: transparent; border-color: rgba(251,113,133,.45); color: var(--mal) }
button.perigoso:hover { background: rgba(251,113,133,.08) }
button.perigoso-cheio { background: var(--mal); border-color: transparent; color: #2a0710 }
button.icone { background: transparent; border: 0; padding: 6px; color: var(--texto-3) }
button.icone:hover { color: var(--texto); background: rgba(255,255,255,.05) }
input, select, textarea { background: var(--bg); border: 1px solid var(--borda-forte); border-radius: 10px; padding: 9px 12px; min-width: 0; transition: border-color .15s, box-shadow .15s }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--destaque); box-shadow: 0 0 0 4px rgba(var(--destaque-rgb), .12) }

/* Login (como o do admin) */
.login { min-height: 100vh; display: grid; grid-template-columns: 1.1fr 1fr }
.login-arte { position: relative; padding: 48px; display: flex; flex-direction: column; justify-content: space-between;
  background: linear-gradient(160deg, rgba(var(--primaria-rgb), .55), rgba(13,17,16,.85)), url(/login.jpg) center/cover; border-right: 1px solid var(--borda) }
.login-logo { height: 28px; width: auto; align-self: flex-start; filter: brightness(1.8) }
.login-arte h1 { font-size: 40px; line-height: 1.05; letter-spacing: -.02em; margin: 14px 0 10px; color: #fff }
.login-arte p { color: var(--texto-2); max-width: 380px }
.selo { display: inline-block; border: 1px solid rgba(var(--destaque-rgb), .25); background: rgba(var(--destaque-rgb), .1); color: var(--destaque);
  border-radius: 99px; padding: 4px 12px; font-size: 11px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase }
.login-form { display: grid; place-items: center; padding: 24px }
.caixa { width: 100%; max-width: 380px; display: grid; gap: 14px }
.caixa h2 { font-size: 22px; letter-spacing: -.01em }
.caixa label { display: grid; gap: 6px; font-size: 12px; font-weight: 600; color: var(--texto-2) }
.caixa .codigo { text-align: center; font-size: 20px; font-weight: 700; letter-spacing: .3em }
.caixa button { height: 46px; font-size: 15px }
.selo-mini { font-size: 10px; font-weight: 600; letter-spacing: .3em; text-transform: uppercase; color: rgba(var(--destaque-rgb), .8) }

/* Casca: menu lateral + conteúdo */
.lateral { position: fixed; inset: 0 auto 0 0; width: 256px; z-index: 30; display: flex; flex-direction: column; border-right: 1px solid var(--borda);
  background: linear-gradient(180deg, rgba(var(--primaria-rgb), .28), transparent 38%), radial-gradient(260px 200px at 0% 100%, rgba(var(--destaque-rgb), .06), transparent 70%), var(--lateral) }
.lateral-topo { padding: 22px 22px 14px; display: flex; flex-direction: column; gap: 6px }
.lateral-topo .logo { height: 26px; width: auto; align-self: flex-start; filter: brightness(1.8) drop-shadow(0 0 14px rgba(var(--destaque-rgb), .2)) }
.sublogo { padding-left: 2px; font-size: 9.5px; font-weight: 600; letter-spacing: .28em; text-transform: uppercase; color: rgba(var(--destaque-rgb), .7) }
.menu { flex: 1; overflow-y: auto; padding: 0 12px 12px; display: flex; flex-direction: column; gap: 2px }
.menu .grupo { padding: 16px 12px 6px; font-size: 10px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--texto-3) }
.menu button { position: relative; justify-content: flex-start; gap: 12px; width: 100%; border: 0; background: transparent; padding: 8px 12px; border-radius: 8px;
  font-size: 13.5px; font-weight: 500; color: var(--texto-2) }
.menu button svg { color: var(--texto-3) }
.menu button:hover { background: rgba(255,255,255,.04); color: var(--texto); transform: translateX(2px) }
.menu button.ativa { font-weight: 600; color: var(--texto); transform: none;
  background: linear-gradient(90deg, rgba(var(--destaque-rgb), .16), rgba(var(--destaque-rgb), .04) 70%, transparent);
  box-shadow: inset 0 0 0 1px rgba(var(--destaque-rgb), .14), 0 0 22px -8px rgba(var(--destaque-rgb), .45) }
.menu button.ativa svg { color: var(--destaque) }
.menu button.ativa::before { content: ""; position: absolute; left: 0; top: 50%; width: 3px; height: 20px; transform: translateY(-50%); border-radius: 0 3px 3px 0;
  background: var(--destaque); box-shadow: 0 0 12px rgba(var(--destaque-rgb), .9) }
.lateral-rodape { border-top: 1px solid var(--borda); padding: 12px 14px; display: flex; align-items: center; gap: 12px }
.avatar { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; color: var(--destaque-tinta); background: var(--destaque) }
.quem { flex: 1; min-width: 0; display: grid } .quem b { font-size: 14px; font-weight: 500 } .quem small { font-size: 11px }
.conteudo { margin-left: 256px; min-height: 100vh }
main { padding: 24px 28px 40px; max-width: 1600px; margin: 0 auto }
.barra-movel { display: none }
.veu { position: fixed; inset: 0; background: rgba(0,0,0,.55); z-index: 25 }

/* Cabeçalho da página */
.cabecalho { position: relative; overflow: hidden; display: flex; align-items: center; gap: 16px; margin-bottom: 22px; padding: 20px 24px; border-radius: 18px;
  border: 1px solid var(--borda); background: radial-gradient(420px 180px at 100% 0%, rgba(var(--destaque-rgb), .10), transparent 70%),
  linear-gradient(120deg, rgba(var(--primaria-rgb), .30), rgba(20,26,24,.4) 55%, transparent) }
.cab-fundo { position: absolute; right: -16px; top: -24px; width: 160px; height: 160px; transform: rotate(-8deg); color: var(--destaque); opacity: .07; stroke-width: 1 }
.cab-icone { width: 48px; height: 48px; border-radius: 16px; display: grid; place-items: center; color: var(--destaque); border: 1px solid rgba(var(--destaque-rgb), .2);
  background: linear-gradient(145deg, rgba(var(--destaque-rgb), .18), rgba(var(--primaria-rgb), .35)); box-shadow: 0 8px 28px -12px rgba(var(--destaque-rgb), .55) }
.cab-icone svg { width: 24px; height: 24px }
.cab-texto h1 { font-size: 22px; font-weight: 700; letter-spacing: -.01em }
.cab-texto p { color: var(--texto-3); font-size: 13px }

/* Blocos */
.barra { display: flex; gap: 10px; align-items: center; margin-bottom: 16px; flex-wrap: wrap }
.barra input[name=q] { flex: 1; min-width: 220px }
#sites-em, #painel-em { flex: 1 }
.painel { background: var(--superficie); border: 1px solid var(--borda); border-radius: 18px; overflow: hidden; margin-bottom: 16px }
.painel-topo { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 13px 20px; border-bottom: 1px solid var(--borda) }
.painel-topo h2 { font-size: 14px; font-weight: 600 }
.painel-corpo { padding: 14px 20px }
.rolagem { overflow-x: auto }

.totais { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin-bottom: 16px }
.total { position: relative; overflow: hidden; background: var(--superficie); border: 1px solid var(--borda); border-radius: 16px; padding: 14px 16px; display: grid; gap: 4px }
.total::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(240px 120px at 100% 0%, rgba(var(--destaque-rgb), .08), transparent 70%) }
.total span { color: var(--texto-3); font-size: 12px; font-weight: 500 }
.total b { font-size: 22px; font-weight: 700; letter-spacing: -.01em; font-variant-numeric: tabular-nums }
.total.ok b { color: var(--ok) } .total.mal b { color: var(--mal) } .total.alerta b { color: var(--alerta) }
.total.mal::before { background: radial-gradient(240px 120px at 100% 0%, rgba(251,113,133,.10), transparent 70%) }
.var { font-size: 11.5px } .var.sobe { color: var(--ok) } .var.desce { color: var(--mal) }

.periodos { display: inline-flex; background: var(--superficie); border: 1px solid var(--borda); border-radius: 12px; padding: 3px; gap: 2px }
.periodos button { border: 0; background: transparent; color: var(--texto-2); padding: 6px 14px; font-weight: 500; border-radius: 9px }
.periodos button.ativa { background: var(--destaque); color: var(--destaque-tinta); font-weight: 700 }

.legenda { font-size: 12px; color: var(--texto-3); display: flex; gap: 12px; align-items: center }
.legenda i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 5px; vertical-align: -1px }
.l-esp { background: var(--destaque) } .l-cas { background: var(--serie-2) }
#grafico svg { width: 100%; height: 190px; display: block; fill: initial; stroke: none }
#grafico text { fill: var(--texto-3); font-size: 10px }

.tabela { width: 100%; border-collapse: collapse }
.tabela th, .tabela td { text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--borda); vertical-align: middle; font-variant-numeric: tabular-nums }
.tabela th { font-size: 11px; color: var(--texto-3); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; background: rgba(255,255,255,.015) }
.tabela tbody tr:hover { background: rgba(255,255,255,.02) }
#painel-tabela th, #painel-tabela td { white-space: nowrap; text-align: right }
#painel-tabela th:first-child, #painel-tabela td:first-child { text-align: left }
#painel-tabela td.erro { text-align: left; white-space: normal }
#painel-tabela tfoot td { font-weight: 700; border-top: 1px solid var(--borda-forte); border-bottom: 0; background: rgba(var(--destaque-rgb), .04) }
.site-nome b { display: flex; align-items: center; gap: 6px; font-weight: 600 } .site-nome small { font-size: 11.5px }

.chips { display: flex; flex-wrap: wrap; gap: 4px }
.chip { display: inline-flex; align-items: center; font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 99px; border: 1px solid var(--borda-forte); color: var(--texto-3); white-space: nowrap }
.chip.ok { color: var(--ok); border-color: rgba(52,211,153,.35); background: rgba(52,211,153,.06) }
.chip.mal, .chip.manut { color: var(--mal); border-color: rgba(251,113,133,.45); background: rgba(251,113,133,.08) }
.chip.alerta { color: var(--alerta); border-color: rgba(251,191,36,.45); background: rgba(251,191,36,.08) }
.chip.on { color: var(--texto-2) } .chip.off { opacity: .55 }
.chip.hml { color: var(--info); border-color: rgba(125,211,252,.45) }

/* Saúde: cartões por site */
.grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 14px }
.site { background: var(--superficie); border: 1px solid var(--borda); border-radius: 18px; padding: 16px; display: grid; gap: 10px; align-content: start }
.site.falha { border-color: rgba(251,113,133,.55) }
.site header { display: flex; align-items: center; gap: 10px }
.site header > div { flex: 1; min-width: 0 }
.site h2 { font-size: 15px; font-weight: 600 }
.site header a { font-size: 12px; text-decoration: none; color: var(--texto-3); display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.site footer { font-size: 11px; text-align: right; color: var(--texto-3) }
.ponto { width: 9px; height: 9px; border-radius: 50%; flex: none }
.ponto.ok { background: var(--ok); box-shadow: 0 0 10px var(--ok) } .ponto.mal { background: var(--mal); box-shadow: 0 0 10px var(--mal) }
.sha { font: 12px ui-monospace, Menlo, monospace; color: var(--texto-3) }
.nums { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px }
.nums dt { font-size: 11px; color: var(--texto-3) }
.nums dd { font-weight: 600; font-variant-numeric: tabular-nums }
.nums .destaque dd { color: var(--alerta) }

/* Clientes */
.bloco { margin-bottom: 18px } .bloco h3 { margin: 0 0 8px; font-size: 14px }
.bloco .tabela { background: var(--superficie); border: 1px solid var(--borda); border-radius: 14px; overflow: hidden }
#resultados { overflow-x: auto }

/* Deploy */
.acoes { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; margin-bottom: 16px }
.acao { background: var(--superficie); border: 1px solid var(--borda); border-radius: 16px; padding: 16px; display: grid; gap: 8px; align-content: start }
.acao h3 { font-size: 13px; color: var(--texto-2); font-weight: 600 }
.acao.perigo { border-color: rgba(251,113,133,.35) }
.tarefas { display: grid; grid-template-columns: minmax(280px, 1fr) 2fr; gap: 14px }
#tarefas { list-style: none; display: grid; gap: 4px; padding: 10px; max-height: 68vh; overflow: auto }
#tarefas li { border: 1px solid var(--borda); border-radius: 10px; padding: 8px 10px; cursor: pointer; display: flex; flex-wrap: wrap; gap: 6px; align-items: center }
#tarefas li:hover { background: rgba(255,255,255,.02) }
#tarefas li.aberta { border-color: var(--destaque) }
.saida { background: #070a09; margin: 0; padding: 14px; height: 68vh; overflow: auto; font: 12px/1.55 ui-monospace, Menlo, monospace; white-space: pre-wrap; word-break: break-word; color: var(--texto-2) }

/* Diálogos */
dialog { margin: auto; background: var(--superficie); color: var(--texto); border: 1px solid var(--borda-forte); border-radius: 18px; padding: 22px; width: min(460px, calc(100vw - 32px)); box-shadow: 0 30px 80px -20px rgba(0,0,0,.7) }
dialog::backdrop { background: rgba(0,0,0,.6); backdrop-filter: blur(2px) }
dialog form { display: grid; gap: 12px }
dialog h3 { font-size: 17px }
#dlg-manut label { display: grid; gap: 6px; color: var(--texto-2); font-size: 12px; font-weight: 600 }
#dlg-manut textarea { resize: vertical }
#manut-campos { display: grid; gap: 10px }
.botoes { display: flex; justify-content: flex-end; gap: 8px; margin-top: 4px }

/* Celular */
@media (max-width: 1023px) {
  .lateral { transform: translateX(-100%); transition: transform .2s ease; width: 280px; max-width: 85vw }
  body.menu-aberto .lateral { transform: none }
  .conteudo { margin-left: 0 }
  .barra-movel { display: flex; align-items: center; gap: 10px; position: sticky; top: 0; z-index: 20; padding: 10px 14px; border-bottom: 1px solid var(--borda); background: rgba(10,14,13,.92); backdrop-filter: blur(8px) }
  .barra-movel .logo { height: 20px; filter: brightness(1.8) }
  main { padding: 14px }
  .login { grid-template-columns: 1fr } .login-arte { display: none }
  .grade { grid-template-columns: 1fr }
  .nums { grid-template-columns: repeat(2, 1fr) }
  .tarefas { grid-template-columns: 1fr }
  .saida { height: 50vh }
  .cabecalho { padding: 16px } .cab-icone { display: none }
}

/* Configuração inicial */
.caixa p.suave { font-size: 13px }
.caixa code { font: 12px ui-monospace, Menlo, monospace; color: var(--texto-2) }
.qr { justify-self: center; background: #fff; border-radius: 14px; padding: 10px }
.qr svg { width: 200px; height: 200px; display: block; stroke: none }
.chave { display: block; text-align: center; letter-spacing: .12em; word-break: break-all; padding: 8px; border: 1px dashed var(--borda-forte); border-radius: 10px }

/* Taxa do meio de pagamento */
.taxa-linha { display: grid; grid-template-columns: 90px 1fr 110px; gap: 8px; align-items: center }
.taxa-linha b { display: grid; font-size: 13px } .taxa-linha b small { font-weight: 400 }
button.taxa { padding: 3px 8px; font-size: 12px; font-weight: 500; border-radius: 8px; background: transparent; color: var(--texto-2); border-color: var(--borda) }
button.taxa.vazia { color: var(--alerta); border-color: rgba(251,191,36,.4) }

/* Pagamentos */
#pag-tabela td, #pag-tabela th { white-space: nowrap }
.gw-cartoes { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 14px }
.gw { background: var(--superficie); border: 1px solid var(--borda); border-radius: 16px; padding: 16px; display: grid; gap: 10px; align-content: start }
.gw.ativo { border-color: rgba(var(--destaque-rgb), .55); box-shadow: 0 0 0 1px rgba(var(--destaque-rgb), .15), 0 16px 40px -24px rgba(var(--destaque-rgb), .6) }
.gw header { display: flex; justify-content: space-between; align-items: center; gap: 8px }
.gw h3 { font-size: 15px }
.gw label { display: grid; gap: 5px; font-size: 12px; font-weight: 600; color: var(--texto-2) }
.gw .acoes-gw { display: flex; flex-wrap: wrap; gap: 8px }
.gw .webhook { font: 12px ui-monospace, Menlo, monospace; color: var(--texto-2); word-break: break-all; background: var(--bg); border: 1px dashed var(--borda-forte); border-radius: 8px; padding: 8px }
.gw .teste { font-size: 13px }

/* Comercial */
#com-tabela th, #com-tabela td, .ciclos th, .ciclos td { white-space: nowrap; text-align: right }
#com-tabela th:first-child, #com-tabela td:first-child, .ciclos th:first-child, .ciclos td:first-child { text-align: left }
#com-tabela tfoot td { font-weight: 700; border-top: 1px solid var(--borda-forte); background: rgba(var(--destaque-rgb), .04) }
.com-grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 14px }
.com-form { display: grid; gap: 10px; align-content: start }
.com-form label { display: grid; gap: 5px; font-size: 12px; font-weight: 600; color: var(--texto-2) }
.com-form .linha2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px }
.com-form h3 { font-size: 14px }
.lanc { list-style: none; display: grid; gap: 6px }
.lanc li { display: flex; gap: 10px; align-items: center; justify-content: space-between; border: 1px solid var(--borda); border-radius: 10px; padding: 8px 10px }
.chip.quitado { color: var(--ok); border-color: rgba(52,211,153,.35) } .chip.parcial { color: var(--alerta); border-color: rgba(251,191,36,.45) } .chip.aberto { color: var(--mal); border-color: rgba(251,113,133,.45) }

tr.clicavel { cursor: pointer }
tr.selecionada td { background: rgba(var(--destaque-rgb), .05) }

/* ───── ações nos sites, suporte, pessoas ───── */
dialog.largo { width: min(760px, calc(100vw - 32px)); max-height: calc(100vh - 48px); overflow: auto }
dialog .botoes { display: flex; justify-content: flex-end; gap: 10px; flex-wrap: wrap; align-items: center }
#livre-corpo form { display: grid; gap: 12px }
#livre-corpo label { display: grid; gap: 6px; font-size: 12px; font-weight: 600; color: var(--texto-2) }
label.check { display: inline-flex !important; align-items: center; gap: 8px; font-size: 13px; font-weight: 500; color: var(--texto-2); cursor: pointer }
label.check input { width: 16px; height: 16px; accent-color: var(--destaque) }
.marcas-check { display: flex; flex-wrap: wrap; gap: 8px 16px; padding: 10px 12px; border: 1px solid var(--borda); border-radius: 12px; background: rgba(255,255,255,.015) }
.grade-form { display: grid; gap: 12px; max-width: 760px }
.grade-form label { display: grid; gap: 6px; font-size: 12px; font-weight: 600; color: var(--texto-2) }
.grade-form .rot { display: block; font-size: 12px; font-weight: 600; color: var(--texto-2); margin-bottom: 6px }
.grade-form > button { justify-self: start }
.saida.curta { max-height: 220px; min-height: 0; white-space: pre-wrap }
.acoes-linha { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end }
.acoes-linha button, .acoes-linha .botao { padding: 6px 10px; font-size: 12.5px }
a.botao { display: inline-flex; align-items: center; gap: 8px; border-radius: 10px; padding: 8px 14px; font-weight: 500; text-decoration: none; border: 1px solid var(--borda-forte); color: var(--texto-2) }
a.botao:hover { color: var(--texto); background: rgba(255,255,255,.04) }
tr.apagado { opacity: .55 }
.periodos.rolar { max-width: 100%; overflow-x: auto; flex-wrap: nowrap }
.periodos.rolar button { white-space: nowrap }
.contador { margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 99px; background: var(--alerta); color: #2a1a00; font-size: 11px; font-weight: 700; display: inline-grid; place-items: center }

/* segredo mostrado uma vez */
.segredo { font: 600 22px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .12em; text-align: center; padding: 14px; border-radius: 12px;
  background: rgba(var(--destaque-rgb), .08); border: 1px dashed rgba(var(--destaque-rgb), .45); color: var(--destaque); user-select: all; word-break: break-all }
.segredo-caixa { display: grid; gap: 10px; margin-top: 14px; max-width: 560px }

/* configurações lado a lado */
.tabela.cfg td, .tabela.cfg th { white-space: nowrap }
button.cel { background: transparent; border: 1px dashed transparent; padding: 4px 8px; font-weight: 500; color: var(--texto) }
button.cel:hover { border-color: var(--borda-forte); background: rgba(255,255,255,.03) }
.barrinha { height: 6px; border-radius: 99px; background: rgba(255,255,255,.06); overflow: hidden }
.barrinha i { display: block; height: 100%; background: var(--destaque); border-radius: 99px }
.barrinha.neg i { background: var(--mal) }

/* ficha do jogador */
.ficha { display: grid; gap: 14px }
.ficha-topo { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px }
.ficha-topo h3 { display: flex; align-items: center; gap: 8px; font-size: 18px }
.etiquetas { display: flex; flex-wrap: wrap; gap: 6px }
.acoes-ficha { display: flex; flex-wrap: wrap; gap: 8px }
.ficha-form { border: 1px solid var(--borda); border-radius: 14px; padding: 14px; background: rgba(255,255,255,.015) }
.ficha-form h4 { font-size: 14px }
.ficha .nums, .ficha dl { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px }

/* quadro de tickets */
.kanban { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(250px, 1fr); gap: 12px; overflow-x: auto; padding-bottom: 8px; align-items: start }
.coluna { background: var(--superficie); border: 1px solid var(--borda); border-radius: 16px; min-height: 200px; display: flex; flex-direction: column; transition: border-color .15s, background .15s }
.coluna.alvo { border-color: var(--destaque); background: rgba(var(--destaque-rgb), .04) }
.coluna header { display: flex; justify-content: space-between; align-items: center; padding: 12px 14px; border-bottom: 1px solid var(--borda); font-size: 13px }
.cartoes { display: grid; gap: 8px; padding: 10px }
.cartoes .vazio { text-align: center; padding: 18px 0 }
.ticket { display: grid; gap: 6px; padding: 10px 12px; border-radius: 12px; background: var(--elevado); border: 1px solid var(--borda); border-left: 3px solid var(--borda-forte); cursor: grab }
.ticket:hover { border-color: var(--borda-forte) }
.ticket.arrastando { opacity: .4 }
.ticket.pri-urgente { border-left-color: var(--mal) } .ticket.pri-alta { border-left-color: var(--alerta) } .ticket.pri-baixa { border-left-color: transparent }
.ticket.novo { box-shadow: 0 0 0 1px rgba(251,191,36,.45) inset }
.t-topo { display: flex; flex-wrap: wrap; gap: 4px }
.t-titulo { font-size: 13.5px; line-height: 1.3 }
.t-rodape { display: flex; justify-content: space-between; gap: 8px; font-size: 11.5px }
.ticket-aberto { display: grid; gap: 12px }
.ticket-aberto .barra label { display: grid; gap: 4px; font-size: 11px; font-weight: 600; color: var(--texto-3) }
.conversa { display: grid; gap: 10px; max-height: 46vh; overflow-y: auto; padding: 4px }
.msg { border-radius: 12px; padding: 10px 12px; border: 1px solid var(--borda); background: var(--elevado) }
.msg.operador { margin-right: 48px }
.msg.suporte { margin-left: 48px; border-color: rgba(var(--destaque-rgb), .3); background: rgba(var(--destaque-rgb), .06) }
.msg-topo { display: flex; justify-content: space-between; gap: 8px; font-size: 11.5px; color: var(--texto-3); margin-bottom: 4px }
.msg p { white-space: pre-wrap; word-break: break-word }
.msg-sistema { text-align: center; font-size: 11.5px; color: var(--texto-3) }
#form-resposta textarea { width: 100%; resize: vertical }
@media (max-width: 720px) {
  .kanban { grid-auto-columns: 85vw }
  .msg.operador { margin-right: 12px } .msg.suporte { margin-left: 12px }
}

small.sub { display: block }
.col-barra { width: 120px }
.titulo-ciclos { margin: 18px 0 8px; font-size: 14px }