/* ============================================================================
   aurora-operator.css — Aurora Premium · Atendimento / Operador (#view-operator)
   Serve os DOIS contextos: painel standalone e embutido na unidade
   (.embedded-in-shell dentro de #ubs-main-content).

   Substitui o <style id="op-aurora-skin"> que vivia inline em views/servidor.html
   (~300 linhas). Metade daquilo duplicava o kit compartilhado (tokens, .glass,
   .topbar, .btn, .icon-btn, .kpi/.k-*, .ring, .spark, .av, .prio, .st, .sla, .pt,
   .proto, .chip, .field, focus) — isso agora vem de aurora-core.css. Havia ainda um
   bloco .tabs/.tab/.tab-ink marcado no proprio codigo como "nao usado aqui".

   Aqui fica SO o que e especifico do Operador. Escuro segue o toggle global
   (body.theme-dark); o atributo data-theme na view foi removido.
   ============================================================================ */

/* a view flutua sobre a aurora GLOBAL (nao pinta canvas nem blobs proprios) */
#view-operator{ background:transparent; min-height:0 }

/* ============================ TOPBAR: GUICHE E SESSAO ============================ */
#view-operator .guiche-chip{
  display:flex; align-items:center; gap:7px; height:38px; padding:6px 10px;
  background:rgba(255,255,255,.4); border:1px solid var(--line); border-radius:11px;
}
body.theme-dark #view-operator .guiche-chip{ background:rgba(255,255,255,.06) }
#view-operator .guiche-chip > span{
  font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-soft);
}
#view-operator #op-desk-name{ font-size:14.5px; font-weight:800; color:var(--brand2); white-space:nowrap }
#view-operator #op-desk{
  border:none !important; background:transparent !important; box-shadow:none !important; outline:none; font-family:inherit; font-size:13px;
  font-weight:700; color:var(--ink); min-width:150px; margin:0; padding:0;
}
#view-operator .op-desk-fix{
  background:var(--brand); border:none; color:#fff; font-family:inherit; font-weight:700;
  font-size:10.5px; padding:6px 11px; border-radius:8px; cursor:pointer;
}
#view-operator .op-desk-alter{ font-size:10.5px; color:var(--ink-soft); cursor:pointer; text-decoration:underline }

#view-operator .session-timer{
  display:flex; align-items:center; gap:6px; padding:8px 12px; border-radius:11px;
  font-size:12px; font-weight:700; font-variant-numeric:tabular-nums; color:var(--ink-soft);
  background:rgba(255,255,255,.35); border:1px solid var(--line);
}
body.theme-dark #view-operator .session-timer{ background:rgba(255,255,255,.06) }
#view-operator #session-countdown-op{ font-weight:800; color:var(--brand2); font-variant-numeric:tabular-nums }

/* ============================ HERO: CHAMAR PROXIMA ============================ */
#view-operator .hero{
  display:flex; align-items:center; justify-content:space-between; gap:20px; padding:18px 22px; flex-wrap:wrap;
}
#view-operator .hero-btn{
  font-size:16px; padding:16px 30px; border-radius:16px; display:flex; align-items:center; gap:10px;
  box-shadow:0 16px 34px -10px rgba(78,98,44,.65);
}
#view-operator .hero-btn .play{ font-size:13px }
#view-operator .hero-info{ display:flex; flex-direction:column; gap:5px; align-items:flex-end; text-align:right }
#view-operator .hero-label{
  font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-soft);
}
#view-operator .hero-next{ display:flex; align-items:center; gap:9px; font-size:14.5px }
#view-operator .hero-next b{ font-weight:750; letter-spacing:-.01em }

/* ============================ LAYOUT DA TELA ============================ */
#view-operator .grid-op{
  grid-template-columns:1fr 300px;
  grid-template-areas:"kpi kpi" "main side";
  align-items:start;
}
#view-operator .grid-op .kpis{ grid-area:kpi }
#view-operator .kpis-op{ grid-template-columns:repeat(3,minmax(0,1fr)) }
#view-operator .op-main{ grid-area:main; min-width:0; display:flex; flex-direction:column; gap:14px }
#view-operator .current-slot{ display:flex; flex-direction:column; gap:14px }
#view-operator .queues-slot{ display:flex; flex-direction:column; gap:12px }
#view-operator .side{ grid-area:side; align-self:start }

/* ============================ EM ATENDIMENTO ============================ */
#view-operator .current{ padding:16px 18px 18px; display:flex; flex-direction:column; gap:14px }
#view-operator .cur-head{ display:flex; align-items:center; justify-content:space-between }
#view-operator .cur-head h2{ margin:0; font-size:16px; font-weight:700; letter-spacing:-.02em }
#view-operator .cur-empty-body{ text-align:center; padding:14px 6px 8px }
#view-operator .cur-empty-t{ font-size:14.5px; font-weight:750; color:var(--ink) }
#view-operator .cur-empty-s{ font-size:12px; color:var(--ink-soft); margin-top:5px }
#view-operator .cur-empty-s b{ color:var(--brand2) }
#view-operator .cur-timer{
  display:flex; align-items:center; gap:6px; font-size:13px; font-weight:800;
  font-variant-numeric:tabular-nums; color:var(--brand2);
}
#view-operator .cur-body{ display:flex; align-items:center; gap:14px }
#view-operator .cur-av{ width:56px; height:56px; border-radius:16px; font-size:16px }
#view-operator .cur-info{ display:flex; flex-direction:column; gap:7px; min-width:0 }
#view-operator .cur-name{ font-size:17px; font-weight:750; letter-spacing:-.01em; color:var(--ink) }
#view-operator .cur-meta{ display:flex; align-items:center; gap:9px; flex-wrap:wrap }
#view-operator .cur-actions{ display:flex; gap:10px; flex-wrap:wrap }
/* anel de pulso do cartao em atendimento (injetado pelo JS) */
#view-operator .opv-ring{ position:absolute; inset:0; border-radius:18px; background:#1f9d57; animation:opvRing 1.6s ease-out infinite }
@keyframes opvRing{ 0%{transform:scale(.9);opacity:.6} 100%{transform:scale(2.2);opacity:0} }

/* ============================ FILAS POR TIPO ============================ */
#view-operator .q-title-row{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:2px 2px 0 }
#view-operator .q-title{ margin:0; font-size:16px; font-weight:700; letter-spacing:-.02em; color:var(--ink) }
#view-operator .q-title-hint{ font-size:12px; color:var(--ink-soft) }

/* colunas e senhas sao injetadas por operator.js */
#view-operator .op-queue-column{
  background:var(--glass) !important; border:1px solid var(--glass-brd) !important;
  backdrop-filter:blur(18px) saturate(1.4); -webkit-backdrop-filter:blur(18px) saturate(1.4);
  border-radius:18px !important; box-shadow:0 12px 30px -18px rgba(46,59,23,.4); overflow:hidden;
}
#view-operator .op-queue-column-body{ min-height:80px }
#view-operator .op-queue-column-body.has-scroll{ overflow-y:auto }
#view-operator .op-queue-ticket{
  background:rgba(255,255,255,.55) !important; border:1px solid var(--glass-brd) !important;
  border-radius:13px !important; transition:.16s;
}
body.theme-dark #view-operator .op-queue-ticket{ background:rgba(255,255,255,.06) !important }
#view-operator .op-queue-ticket:hover{
  border-color:var(--brand2) !important; box-shadow:0 8px 20px -10px rgba(78,98,44,.5); transform:translateY(-1px);
}

#view-operator .op-qhead{ display:flex; align-items:center; gap:8px; padding:12px 14px }
#view-operator .op-qhead-ico{
  width:26px; height:26px; border-radius:8px; flex:none; display:flex; align-items:center; justify-content:center;
  color:#fff; background:linear-gradient(135deg,var(--brand),#64793f);
}
#view-operator .op-qhead-label{ font-size:13px; font-weight:700; color:var(--ink); flex:1; min-width:0 }
#view-operator .op-qcount{
  font-size:12px; font-weight:800; color:var(--brand2); background:rgba(92,111,58,.12);
  min-width:24px; height:24px; padding:0 7px; border-radius:12px; display:flex; align-items:center; justify-content:center;
}
body.theme-dark #view-operator .op-qcount{ background:rgba(147,185,80,.14) }
/* faixa superior identifica o tipo da fila */
#view-operator .op-qcol-normal{ border-top:3px solid var(--brand2) !important }
#view-operator .op-qcol-preferential{ border-top:3px solid #e8863a !important }
#view-operator .op-qcol-appointment{ border-top:3px solid #3f9d6a !important }
#view-operator .op-qcol-preferential .op-qhead-ico{ background:linear-gradient(135deg,#e8a017,#c4881a) }
#view-operator .op-qcol-appointment .op-qhead-ico{ background:linear-gradient(135deg,#3f9d6a,#63c98d) }

/* linha de senha na fila */
#view-operator .q-row3{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:11px 12px; border-radius:14px; font-size:12px; cursor:pointer; transition:.16s;
}
#view-operator .q-row3:hover{ background:rgba(92,111,58,.08) }
body.theme-dark #view-operator .q-row3:hover{ background:rgba(147,185,80,.1) }
#view-operator .q-row3 .pt{ flex:1; min-width:0 }
#view-operator .q-row3 .proto{ flex:none }
#view-operator .q-row3 .sla{ display:flex; align-items:center; gap:6px; flex:none }
#view-operator .tag-pref{
  font-size:12px; font-weight:700; color:#ad631e; background:rgba(232,134,58,.14);
  padding:5px 11px; border-radius:20px;
}
body.theme-dark #view-operator .tag-pref{ color:#ffb877 }

/* ============================ ASIDE: FERRAMENTAS ============================ */
#view-operator .side{ padding:18px; display:flex; flex-direction:column; gap:18px }
#view-operator .side-block{ display:flex; flex-direction:column; gap:10px }
#view-operator .side-block h3{ margin:0; font-size:13px; font-weight:700; letter-spacing:-.01em }
#view-operator .side-sub{ margin:0; font-size:12px; color:var(--ink-soft); line-height:1.45 }
#view-operator .side .chips{ flex-wrap:wrap }
#view-operator .btn.full{ width:100%; justify-content:center }

#view-operator #visible-queues-list{ display:flex; flex-direction:column; gap:3px; margin-top:12px }
#view-operator #visible-queues-list:empty::after{
  content:'Nenhum departamento vinculado.'; font-size:12px; color:var(--ink-soft);
}
#view-operator .visible-queue-item{ border-radius:10px; transition:background .14s ease }
#view-operator .visible-queue-item:hover{ background:rgba(92,111,58,.08) }

/* ============================ RESPONSIVO ============================ */
@media (max-width:920px){
  #view-operator .grid-op{ grid-template-columns:1fr; grid-template-areas:"kpi" "main" "side" }
  #view-operator .hero{ justify-content:center; text-align:center }
  #view-operator .hero-info{ align-items:center; text-align:center }
}
@media (max-width:640px){
  #view-operator .kpis-op{ grid-template-columns:1fr 1fr }
  #view-operator .actions .btn.ghost, #view-operator .actions .btn.exit{ display:none }
}
@media (max-width:420px){ #view-operator .kpis-op{ grid-template-columns:1fr } }