/* Redesign tecnologico (2026-07-21): componentes compartilhados em todo o sistema. */

.tech-grid-bg{position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:linear-gradient(rgba(230,92,113,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(230,92,113,.05) 1px,transparent 1px);
  background-size:46px 46px;
  mask-image:radial-gradient(circle at 50% 0%,#000 0%,transparent 62%);
  -webkit-mask-image:radial-gradient(circle at 50% 0%,#000 0%,transparent 62%);
  animation:tech-grid-pan 9s linear infinite}
@keyframes tech-grid-pan{to{background-position:46px 46px}}
.topbar,main.container,footer{position:relative;z-index:1}

/* rotulo com indicador "ao vivo" */
.eyebrow{position:relative;padding-left:15px}
.eyebrow::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:6px;height:6px;border-radius:50%;background:#e65c71;box-shadow:0 0 8px #e65c71;
  animation:tech-blip 2s ease-in-out infinite}
@keyframes tech-blip{0%,100%{opacity:1}50%{opacity:.35}}

/* cards de metrica: canto tipo HUD + numeros tabulares + leve elevacao no hover */
.metric{position:relative;transition:transform .22s ease,box-shadow .22s ease}
.metric::before{content:"";position:absolute;top:9px;left:9px;width:11px;height:11px;
  border-top:1.5px solid rgba(230,92,113,.6);border-left:1.5px solid rgba(230,92,113,.6)}
.metric strong{font-variant-numeric:tabular-nums}
.metric:hover{transform:translateY(-2px);box-shadow:0 16px 34px rgba(179,38,61,.16)}

/* fila de acao: mesmo tratamento */
.queue-option{position:relative;overflow:hidden}
.queue-option::before{content:"";position:absolute;top:9px;left:9px;width:10px;height:10px;
  border-top:1.5px solid rgba(230,92,113,.45);border-left:1.5px solid rgba(230,92,113,.45)}
.queue-option strong{font-variant-numeric:tabular-nums}

/* painel: linha superior com brilho em movimento lento */
.panel{position:relative}
.panel::before{content:"";position:absolute;top:-1px;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(230,92,113,.65),transparent);
  background-size:220% 100%;animation:tech-shimmer 6s linear infinite}
@keyframes tech-shimmer{to{background-position:-220% 0}}

/* indicador de prioridade: anel tipo gauge em vez de circulo cheio.
   Escopo restrito de proposito: o app tambem usa a classe .score para pilulas
   de texto (ex: "disponivel"/"cooldown" na saude da IA), onde um anel
   proporcional nao faz sentido — por isso nunca estilizamos .score sozinho. */
.priority-cell .score,.action-score .score{position:relative;z-index:0;border:none!important;
  display:grid;place-items:center;
  background:conic-gradient(var(--score-ring,#e65c71) calc(var(--pct,60)*1%),rgba(130,130,140,.18) 0)}
.priority-cell .score::before,.action-score .score::before{content:"";position:absolute;inset:3px;border-radius:50%;background:var(--panel)}
.score-high{--score-ring:#ff6f6f}
.score-medium{--score-ring:#f2b84b}
.score-low{--score-ring:#9a9aa0}

/* mesmo tratamento no anel maior de risco geral do cliente */
.risk-orbit{position:relative;z-index:0;border:none!important;
  background:conic-gradient(var(--score-ring,#e65c71) calc(var(--pct,60)*1%),rgba(130,130,140,.18) 0)}
.risk-orbit::before{content:"";position:absolute;inset:5px;border-radius:50%;background:var(--panel)}
.risk-orbit strong,.risk-orbit span{position:relative}

/* selo de disponibilidade/cooldown (saude da IA): mantem pilula, so ganha o brilho tecnologico */
.missed-table .score{border-radius:999px;padding:5px 11px;width:auto;height:auto;font-size:11px}

/* linha da tabela: barra de destaque ao passar o mouse */
tbody tr{position:relative}
tbody tr:hover{box-shadow:inset 3px 0 0 #e65c71}

@media (prefers-reduced-motion:reduce){
  .tech-grid-bg,.eyebrow::before,.panel::before{animation:none}
}