/* ============================================================================
   LINHA · Atendimento / Operador (#view-operator) e seus modais
   Mesa do guichê no topo (cartão verde: quem está comigo agora | próxima e o ritmo
   do turno), barra com as filas e as consultas, e as três filas na largura toda.
   ============================================================================ */

/* cabeçalho: nome, quem está logado, guichê e relógio */
.op .l-secoes{ padding-bottom:var(--l-e5) }
.op .l-secoes::after{ display:none }
.op-extras{ display:flex; align-items:center; gap:var(--l-e4); font-size:var(--l-t-peq); color:var(--l-texto-2) }
.op-guiche{ display:inline-flex; align-items:center; gap:var(--l-e2); padding:4px 4px 4px 12px; border-radius:var(--l-raio-pilula); background:var(--l-sup-3) }
.op-guiche b{ color:var(--l-texto) }
.op-guiche label{ font-size:var(--l-t-peq); color:var(--l-texto-3) }
.op-guiche input{ width:130px; height:28px; padding:0 8px; font-size:var(--l-t-peq) }
.op-guiche .l-link{ padding-right:8px }
.op-sessao{ font-variant-numeric:tabular-nums; color:var(--l-texto-3) }

/* mesa do guichê */
.op-mesa{
  display:grid; grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);
  border-radius:var(--l-raio-bloco, 14px); overflow:hidden; box-shadow:var(--l-sombra-bloco);
  background:var(--l-verde); color:var(--l-verde-texto);
}
.op-mesa-agora, .op-mesa-proxima{ display:flex; flex-direction:column; gap:var(--l-e2); padding:var(--l-e6) var(--l-e8); min-width:0 }
.op-mesa-proxima{ border-left:1px solid rgba(255,255,255,.14); background:rgba(0,0,0,.08) }
.op-rotulo{ font-size:var(--l-t-peq); color:var(--l-verde-texto-2) }
.op-atual-vazio{ display:flex; flex-direction:column; gap:4px }
.op-atual-vazio b{ font-size:26px; font-weight:600; letter-spacing:-.02em }
.op-atual-vazio span:last-child{ color:var(--l-verde-texto-2); font-size:var(--l-t-peq) }
.op-atual-cartao{ display:flex; flex-direction:column; gap:var(--l-e2) }
.op-atual-cod{ font-family:var(--l-mono, ui-monospace, monospace); font-size:46px; font-weight:700; line-height:1; letter-spacing:.01em }
.op-atual-quem{ display:flex; align-items:center; flex-wrap:wrap; gap:var(--l-e3) }
.op-atual-quem b{ font-size:var(--l-t-titulo); font-weight:600 }
/* ficha de quem está no guichê: motivo em destaque, alertas e dados do cadastro */
.op-ficha{ display:flex; flex-direction:column; gap:var(--l-e3); margin-top:var(--l-e2) }
.op-motivo{ display:flex; flex-direction:column; gap:4px; padding:var(--l-e3) var(--l-e4); border-radius:var(--l-raio-2); background:rgba(255,255,255,.09); border-left:3px solid var(--l-verde-texto) }
.op-motivo p{ margin:0; font-size:var(--l-t-corpo); line-height:1.45; color:var(--l-verde-texto) }
.op-motivo p b{ font-weight:600; margin-right:4px }
.op-motivo p span{ color:var(--l-verde-texto-2); font-size:var(--l-t-peq) }
.op-motivo-texto{ font-size:var(--l-t-med) !important; font-weight:500 }
.op-motivo-vazio{ color:var(--l-verde-texto-2) !important; font-style:italic }
.op-alertas{ display:flex; flex-wrap:wrap; gap:6px }
.op-alertas span{ padding:3px 10px; border-radius:999px; background:rgba(255,196,163,.16); color:var(--l-verde-alerta); font-size:var(--l-t-peq); font-weight:500 }
.op-ficha-dados{ display:grid; grid-template-columns:repeat(auto-fill, minmax(128px, 1fr)); gap:var(--l-e3) var(--l-e5); margin:0 }
.op-ficha-campo{ min-width:0 }
.op-ficha-campo.is-largo{ grid-column:1 / -1 }
.op-ficha-campo dt{ font-size:11px; color:var(--l-verde-texto-2); margin-bottom:1px }
.op-ficha-campo dd{ margin:0; font-size:var(--l-t-corpo); font-weight:500; color:var(--l-verde-texto); font-variant-numeric:tabular-nums; overflow-wrap:anywhere }
.op-ficha-campo.is-falta dd{ font-weight:400; font-style:italic; color:var(--l-verde-texto-2); opacity:.75 }
.op-ficha-aviso, .op-ficha-origem{ margin:0; font-size:var(--l-t-peq); color:var(--l-verde-texto-2) }
.op-atual-acoes{ display:flex; flex-wrap:wrap; gap:var(--l-e2); margin-top:var(--l-e3) }
.op-btn-forte, .op-btn-claro, .op-chamar{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--l-e2); height:40px; padding:0 18px;
  border-radius:var(--l-raio-2); font:inherit; font-size:var(--l-t-corpo); font-weight:600; cursor:pointer;
  transition:filter var(--l-rapido), background var(--l-rapido);
}
.op-btn-forte, .op-chamar{ border:0; background:var(--l-verde-ativo); color:var(--l-verde-ativo-texto) }
.op-btn-forte:hover, .op-chamar:hover{ filter:brightness(.94) }
.op-btn-claro{ border:1px solid rgba(255,255,255,.35); background:transparent; color:var(--l-verde-texto) }
.op-btn-claro:hover{ background:var(--l-verde-hover) }
.op-chamar{ align-self:flex-start; height:52px; margin-top:var(--l-e2); padding:0 24px; font-size:var(--l-t-med) }
.op-chamar kbd{ display:inline-grid; place-items:center; min-width:22px; height:22px; padding:0 5px; border:0; border-radius:5px; background:rgba(57,72,32,.12); color:inherit; font:600 11px var(--l-fonte) }
.op-proxima-nome{ display:flex; align-items:center; flex-wrap:wrap; gap:var(--l-e2); font-size:var(--l-t-titulo); font-weight:600 }
.op-proxima-nome .op-senha-cod{ color:var(--l-verde-texto) }
.op-numeros{ display:flex; flex-wrap:wrap; gap:4px var(--l-e5); margin:var(--l-e3) 0 0; font-size:var(--l-t-peq); color:var(--l-verde-texto-2) }
.op-numeros b{ margin-right:4px; font-size:var(--l-t-titulo); font-weight:600; color:var(--l-verde-texto); font-variant-numeric:tabular-nums }
.op-espera{ display:inline-flex; align-items:baseline; flex-wrap:wrap; column-gap:4px }
.op-espera.is-warn b, .op-espera.is-late b{ color:var(--l-verde-alerta) }
.op-medidor{ display:block; flex-basis:100%; height:3px; margin-top:4px; border-radius:3px; background:rgba(255,255,255,.18); overflow:hidden }
.op-medidor i{ display:block; height:100%; width:var(--w, 0%); background:var(--l-verde-texto); transition:width .3s }
.op-espera.is-warn .op-medidor i, .op-espera.is-late .op-medidor i{ background:var(--l-verde-alerta) }

/* filas visíveis (departamentos do guichê) e barra de consultas */
.op-filas-vis{ display:flex; flex-direction:column; gap:var(--l-e3); padding:var(--l-e4) var(--l-e5); border-radius:var(--l-raio-bloco, 14px); background:var(--l-sup); box-shadow:var(--l-sombra-bloco) }
.op-filas-vis-cab{ display:flex; align-items:center; gap:var(--l-e3) }
.op-filas-vis-cab h3{ margin:0; font-size:var(--l-t-med); font-weight:600 }
.op-filas-vis-cab{ flex-wrap:wrap }
.op-filas-vis-cab .l-mini{ color:var(--l-texto-3) }
.op-filas-alterna{ display:inline-flex; align-items:center; gap:var(--l-e3); margin:-6px -8px; padding:6px 8px; border:0; border-radius:var(--l-raio-2); background:none; font:inherit; color:inherit; cursor:pointer }
.op-filas-alterna:hover{ background:var(--l-sup-2) }
.op-seta{ width:7px; height:7px; margin:0 4px 3px; border-right:1.5px solid var(--l-texto-3); border-bottom:1.5px solid var(--l-texto-3); transform:rotate(45deg); transition:transform var(--l-rapido) }
.op-filas-vis.is-fechado .op-seta{ transform:rotate(-45deg); margin-bottom:0 }
.op-filas-vis.is-fechado #visible-queues-list, .op-filas-vis.is-fechado .op-filas-dica{ display:none }
.op-acoes{ display:flex; flex-wrap:wrap; gap:2px; margin-left:auto }
.op-acoes .btn{ height:34px }
.op-chips{ display:flex; flex-wrap:wrap; gap:6px; align-items:center }
.op-chip{ display:inline-flex; align-items:center; gap:7px; height:30px; padding:0 13px; border:0; border-radius:var(--l-raio-pilula); background:var(--l-sup-2); font:inherit; font-size:var(--l-t-peq); color:var(--l-texto-2); cursor:pointer; transition:background var(--l-rapido), color var(--l-rapido) }
.op-chip:hover{ background:var(--l-marca-suave); color:var(--l-texto) }
.op-chip.is-on{ background:var(--l-verde); color:var(--l-verde-texto); font-weight:500 }
.op-chip .opv-count{ min-width:18px; height:18px; padding:0 5px; border-radius:999px; background:var(--l-aba-ativa, #4f7a1e); color:#fff; font-size:11px; font-weight:600; line-height:18px; text-align:center; font-variant-numeric:tabular-nums }
.op-chip .opv-count[hidden]{ display:none }
.op-chip.is-on .opv-count{ background:var(--l-verde-ativo); color:var(--l-verde-ativo-texto) }
.op-chips-todas{ margin-left:4px; font-size:var(--l-t-peq) }

/* filas */
.op-colunas{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--l-e4); align-items:start }
.op-coluna{ overflow:hidden }
.op-coluna-cab{ display:flex; align-items:center; justify-content:space-between; padding:var(--l-e4) var(--l-e5) var(--l-e3) }
.op-coluna-cab h3{ display:flex; align-items:center; gap:var(--l-e2); font-size:var(--l-t-med); font-weight:600 }
.op-coluna-cab h3::before{ content:""; width:10px; height:10px; border-radius:3px; background:var(--l-verde) }
.op-coluna-preferential .op-coluna-cab h3::before{ background:var(--l-atencao-marca) }
.op-coluna-appointment .op-coluna-cab h3::before{ background:var(--l-info) }
.op-conta{ min-width:28px; padding:2px 8px; border-radius:999px; background:var(--l-sup-3); text-align:center; font-size:var(--l-t-peq); font-weight:600; color:var(--l-texto-2); font-variant-numeric:tabular-nums }
.op-lista{ list-style:none; margin:0; padding:0 0 var(--l-e2) }
.op-senha{ display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:var(--l-e3); padding:12px var(--l-e5); border-top:1px solid var(--l-fio) }
.op-senha.is-chamavel{ cursor:pointer }
.op-senha.is-chamavel:hover{ background:var(--l-marca-suave) }
.op-senha.is-aqui{ background:var(--l-marca-suave); box-shadow:inset 3px 0 0 var(--l-verde) }
.op-senha-cod{ font-family:var(--l-mono, ui-monospace, monospace); font-weight:600; letter-spacing:.02em; color:var(--l-texto) }
.op-senha-cod small{ font-family:var(--l-fonte); font-weight:500; color:var(--l-texto-3) }
.op-senha-nome{ font-size:var(--l-t-peq); color:var(--l-texto-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.op-senha-espera{ font-size:var(--l-t-peq); font-variant-numeric:tabular-nums; color:var(--l-texto-3) }
.op-senha-espera[data-tom="atencao"]{ color:var(--l-atencao) }
.op-senha-espera[data-tom="erro"]{ color:var(--l-erro); font-weight:600 }
.op-vazio{ margin:0; padding:var(--l-e6) var(--l-e5); text-align:center; font-size:var(--l-t-peq); color:var(--l-texto-3) }
.op-erro{ color:var(--l-erro); font-size:var(--l-t-peq) }

/* modais */
.op-modal{ width:min(560px, 100%) }
.op-modal-largo{ width:min(820px, 100%) }
.op-modal h3 .l-mini, .op-modal-largo h3 .l-mini{ margin-left:var(--l-e2) }
.op-modal-busca{ display:flex; gap:var(--l-e2); margin-bottom:var(--l-e4) }
.op-modal-busca .field.search{ flex:1 }
.op-opcoes{ border:0; padding:0; margin:0; display:flex; flex-direction:column; gap:var(--l-e2) }
.op-opcoes legend{ margin-bottom:6px; font-size:var(--l-t-peq); font-weight:500; color:var(--l-texto-2) }
.op-opcao{ display:flex; align-items:flex-start; gap:var(--l-e3); padding:var(--l-e3) var(--l-e4); border:1px solid var(--l-borda); border-radius:var(--l-raio-2); cursor:pointer }
.op-opcao:has(input:checked){ border-color:var(--l-marca); background:var(--l-marca-suave) }
.op-opcao input{ margin-top:3px; accent-color:var(--l-marca) }
.op-opcao span{ display:flex; flex-direction:column; gap:2px }
.op-opcao b{ font-weight:500 }
.op-opcao small{ font-size:var(--l-t-mini); color:var(--l-texto-3) }
.op-classes{ display:flex; flex-wrap:wrap; gap:6px }
.op-classes button{ height:32px; padding:0 12px; border:1px solid var(--l-borda); border-radius:var(--l-raio-pilula); background:var(--l-sup); font-size:var(--l-t-peq); color:var(--l-texto-2) }
.op-classes button:hover{ border-color:var(--l-borda-forte) }
.op-classes button[aria-pressed="true"]{ background:var(--l-marca); border-color:var(--l-marca); color:var(--l-sobre-marca); font-weight:600 }

@media (max-width:1100px){
  .op-mesa{ grid-template-columns:1fr }
  .op-mesa-proxima{ border-left:0; border-top:1px solid rgba(255,255,255,.14) }
  .op-colunas{ grid-template-columns:1fr }
}

/* ================================================================ filas, 3ª rodada (01/10)
   Cada fila com a sua cor num fio no topo; fila vazia vira uma área tracejada com
   ícone de senha, na altura de algumas senhas, para a tela não acabar no meio. */
.op-coluna{ --opc:var(--l-verde); position:relative; min-height:300px; display:flex; flex-direction:column }
.op-coluna-preferential{ --opc:var(--l-atencao-marca) }
.op-coluna-appointment{ --opc:var(--l-info) }
.op-coluna::before{ content:""; position:absolute; left:0; right:0; top:0; height:3px; background:var(--opc) }
.op-coluna-cab h3::before{ background:var(--opc) !important }
.op-conta{ background:color-mix(in srgb, var(--opc) 12%, var(--l-sup)) }
.op-lista{ flex:1; display:flex; flex-direction:column }
.op-vazio{
  flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px;
  margin:0 var(--l-e5) var(--l-e5) !important; padding:var(--l-e8) var(--l-e5) !important;
  border:1.5px dashed color-mix(in srgb, var(--opc) 28%, var(--l-borda)); border-radius:14px;
}
.op-vazio::before{
  content:""; width:44px; height:44px; border-radius:14px;
  background:color-mix(in srgb, var(--opc) 12%, var(--l-sup)) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238b8f98' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 9a3 3 0 0 1 0 6v2a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-2a3 3 0 0 1 0-6V7a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2Z'/%3E%3Cpath d='M13 5v2M13 17v2M13 11v2'/%3E%3C/svg%3E") no-repeat center / 22px 22px;
}