/* Windland Remote Support - folha de estilo do portal e do painel */

:root {
  color-scheme: light dark;

  /* Laranja da marca, retirado do logotipo. */
  --wl-marca:        #fe6c02;
  --wl-marca-forte:  #d95a00;
  --wl-marca-escura: #a84600;
  --wl-marca-suave:  #fff2e6;

  --wl-tinta:        #16181d;
  --wl-tinta-media:  #4b525e;
  --wl-tinta-suave:  #6b7382;
  --wl-fundo:        #f5f6f8;
  --wl-superficie:   #ffffff;
  --wl-superficie2:  #fafbfc;
  --wl-linha:        #e2e5ea;
  --wl-linha-forte:  #ccd1d9;

  --wl-ok:           #0f7a51;
  --wl-ok-fundo:     #e6f5ee;
  --wl-aviso:        #a35a05;
  --wl-aviso-fundo:  #fdf1e0;
  --wl-perigo:       #b42318;
  --wl-perigo-fundo: #fdecea;
  --wl-info:         #1f5fa8;
  --wl-info-fundo:   #e9f1fb;

  --wl-raio:    10px;
  --wl-raio-sm: 7px;
  --wl-topo-h:  52px;
  --wl-rodape-h: 30px;
  --wl-sombra:  0 1px 2px rgba(22,24,29,.05), 0 6px 18px rgba(22,24,29,.06);
  --wl-sombra-f: 0 10px 40px rgba(22,24,29,.16);
  --wl-topo-h:  58px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    --wl-marca:        #ff8127;
    --wl-marca-forte:  #ffa15c;
    --wl-marca-escura: #ffb684;
    --wl-marca-suave:  #33200f;

    --wl-tinta:        #e8ebf0;
    --wl-tinta-media:  #a9b1be;
    --wl-tinta-suave:  #8b93a1;
    --wl-fundo:        #101318;
    --wl-superficie:   #171b21;
    --wl-superficie2:  #1c2129;
    --wl-linha:        #2a303a;
    --wl-linha-forte:  #3a424f;

    --wl-ok:           #4cc38a;
    --wl-ok-fundo:     #12281f;
    --wl-aviso:        #e3a05a;
    --wl-aviso-fundo:  #2c1f10;
    --wl-perigo:       #f3897d;
    --wl-perigo-fundo: #2e1512;
    --wl-info:         #79aee8;
    --wl-info-fundo:   #12202f;

    --wl-sombra:  0 1px 2px rgba(0,0,0,.5), 0 6px 18px rgba(0,0,0,.4);
    --wl-sombra-f: 0 10px 40px rgba(0,0,0,.6);
  }
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--wl-fundo);
  color: var(--wl-tinta);
  font: 15px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--wl-marca-forte); }

/* --- cabeçalho ----------------------------------------------------------- */

.wl-topo {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; height: var(--wl-topo-h); padding: 0 18px;
  background: var(--wl-superficie);
  border-bottom: 1px solid var(--wl-linha);
}
.wl-marca { display: flex; align-items: center; gap: 11px; min-width: 0; }
.wl-marca__icone { height: 30px; width: auto; flex: none; }
.wl-marca__nome  { height: 19px; width: auto; flex: none; }
.wl-marca__sec {
  padding-left: 11px; margin-left: 1px;
  border-left: 1px solid var(--wl-linha-forte);
  color: var(--wl-tinta-suave); font-size: .88rem; font-weight: 500;
  white-space: nowrap;
}
@media (max-width: 620px) { .wl-marca__sec { display: none; } }

.wl-sessao { display: flex; align-items: center; gap: 10px; }
.wl-sessao__nome { font-size: .88rem; font-weight: 550; }
@media (max-width: 520px) { .wl-sessao__nome { display: none; } }

/* --- superfícies --------------------------------------------------------- */

.wl-folha { max-width: 660px; margin: 0 auto; padding: 26px 16px 64px; }

.wl-cartao {
  background: var(--wl-superficie);
  border: 1px solid var(--wl-linha);
  border-radius: var(--wl-raio);
  box-shadow: var(--wl-sombra);
  padding: 24px;
}
.wl-cartao + .wl-cartao { margin-top: 16px; }

h1 { font-size: 1.35rem; margin: 0 0 6px; letter-spacing: -.021em; font-weight: 650; }
h2 { font-size: 1rem;    margin: 0 0 12px; letter-spacing: -.012em; font-weight: 650; }
h3 { font-size: .82rem;  margin: 0 0 10px; letter-spacing: .05em; font-weight: 700;
     text-transform: uppercase; color: var(--wl-tinta-suave); }
.wl-sub { color: var(--wl-tinta-media); margin: 0 0 22px; }

/* --- formulários --------------------------------------------------------- */

.wl-campo { margin-bottom: 16px; }
.wl-campo label { display: block; font-size: .86rem; font-weight: 600; margin-bottom: 6px; }
.wl-campo .wl-nota { font-weight: 400; color: var(--wl-tinta-suave); }

input, textarea, select {
  width: 100%; padding: 10px 12px;
  font: inherit; color: inherit;
  background: var(--wl-superficie2);
  border: 1px solid var(--wl-linha-forte);
  border-radius: var(--wl-raio-sm);
}
input::placeholder, textarea::placeholder { color: var(--wl-tinta-suave); }
input:focus-visible, textarea:focus-visible, select:focus-visible, button:focus-visible {
  outline: 2px solid var(--wl-marca); outline-offset: 1px;
}
textarea { min-height: 112px; resize: vertical; }

/* --- botões -------------------------------------------------------------- */

.wl-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 9px 17px; font: inherit; font-size: .92rem; font-weight: 600;
  border: 1px solid transparent; border-radius: var(--wl-raio-sm);
  background: var(--wl-marca); color: #fff; cursor: pointer;
  white-space: nowrap; transition: background .12s, border-color .12s;
}
.wl-btn:hover:not(:disabled) { background: var(--wl-marca-forte); }
.wl-btn:active:not(:disabled) { background: var(--wl-marca-escura); }
.wl-btn:disabled { opacity: .45; cursor: not-allowed; }
.wl-btn--largo  { width: 100%; }
.wl-btn--mini   { padding: 6px 12px; font-size: .85rem; }
.wl-btn--neutro { background: var(--wl-superficie); color: var(--wl-tinta); border-color: var(--wl-linha-forte); }
.wl-btn--neutro:hover:not(:disabled) { background: var(--wl-superficie2); border-color: var(--wl-tinta-suave); }
.wl-btn--perigo { background: var(--wl-perigo); }
.wl-btn--perigo:hover:not(:disabled) { filter: brightness(.9); }
.wl-btn--ok     { background: var(--wl-ok); }
.wl-btn--ok:hover:not(:disabled) { filter: brightness(.9); }

/* --- avisos -------------------------------------------------------------- */

.wl-aviso {
  padding: 11px 14px; border-radius: var(--wl-raio-sm);
  font-size: .89rem; line-height: 1.45; margin-bottom: 16px;
  border: 1px solid transparent;
}
.wl-aviso--erro    { background: var(--wl-perigo-fundo); color: var(--wl-perigo); }
.wl-aviso--ok      { background: var(--wl-ok-fundo);     color: var(--wl-ok); }
.wl-aviso--atencao { background: var(--wl-aviso-fundo);  color: var(--wl-aviso); }
.wl-aviso--painel  { margin: 14px 20px 0; }

/* --- número do pedido ---------------------------------------------------- */

.wl-codigo {
  text-align: center; padding: 22px; margin-bottom: 22px;
  background: var(--wl-marca-suave);
  border: 1px solid color-mix(in srgb, var(--wl-marca) 22%, transparent);
  border-radius: var(--wl-raio);
}
.wl-codigo small { display: block; color: var(--wl-tinta-media); font-size: .8rem;
                   letter-spacing: .04em; text-transform: uppercase; margin-bottom: 6px; }
.wl-codigo strong {
  font-size: 2.1rem; letter-spacing: .05em; color: var(--wl-marca-forte);
  font-variant-numeric: tabular-nums; font-weight: 700;
}

/* --- passos -------------------------------------------------------------- */

.wl-passos { list-style: none; margin: 0; padding: 0; }
.wl-passos li { display: flex; gap: 13px; padding: 13px 0; border-top: 1px solid var(--wl-linha); }
.wl-passos li:first-child { border-top: 0; padding-top: 0; }
.wl-passos .wl-num {
  flex: none; width: 25px; height: 25px; border-radius: 50%;
  background: var(--wl-superficie2); border: 1px solid var(--wl-linha-forte);
  display: grid; place-items: center; font-size: .77rem; font-weight: 700;
  color: var(--wl-tinta-suave);
}
.wl-passos li[data-estado="feito"]  .wl-num { background: var(--wl-ok);    border-color: var(--wl-ok);    color: #fff; }
.wl-passos li[data-estado="actual"] .wl-num { background: var(--wl-marca); border-color: var(--wl-marca); color: #fff; }
.wl-passos li[data-estado="futuro"] { opacity: .45; }
.wl-passos b { display: block; font-size: .92rem; font-weight: 620; }
.wl-passos span { font-size: .86rem; color: var(--wl-tinta-media); }

/* --- etiquetas de estado ------------------------------------------------- */

.wl-etiqueta {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 2px 9px; border-radius: 999px;
  font-size: .74rem; font-weight: 650; letter-spacing: .015em;
  background: var(--wl-superficie2); color: var(--wl-tinta-suave);
  border: 1px solid var(--wl-linha); white-space: nowrap;
}
.wl-etiqueta::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.wl-etiqueta--simples::before { display: none; }
.wl-etiqueta[data-e="novo"]                  { background: var(--wl-info-fundo);   color: var(--wl-info);   border-color: transparent; }
.wl-etiqueta[data-e="atribuido"]             { background: var(--wl-marca-suave);  color: var(--wl-marca-forte); border-color: transparent; }
.wl-etiqueta[data-e="aguarda_consentimento"] { background: var(--wl-aviso-fundo);  color: var(--wl-aviso);  border-color: transparent; }
.wl-etiqueta[data-e="activo"]                { background: var(--wl-ok-fundo);     color: var(--wl-ok);     border-color: transparent; }
.wl-etiqueta[data-e="recusado"]              { background: var(--wl-perigo-fundo); color: var(--wl-perigo); border-color: transparent; }

/* --- janela de autorização ---------------------------------------------- */

.wl-modal {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(14,16,20,.62);
  display: grid; place-items: center; padding: 16px;
  backdrop-filter: blur(3px);
}
.wl-modal__caixa {
  background: var(--wl-superficie); border-radius: 15px;
  box-shadow: var(--wl-sombra-f);
  max-width: 440px; width: 100%; padding: 28px; text-align: center;
}
.wl-modal__icone {
  width: 56px; height: 56px; margin: 0 auto 16px; border-radius: 15px;
  background: var(--wl-marca-suave); display: grid; place-items: center;
}
.wl-modal__icone img { width: 34px; height: auto; }
.wl-modal__accoes { display: flex; gap: 10px; margin-top: 22px; }
.wl-modal__accoes .wl-btn { flex: 1; }
.wl-contagem { font-variant-numeric: tabular-nums; font-weight: 700; }

/* --- painel: estrutura --------------------------------------------------- */

.wl-painel { display: grid; grid-template-columns: 372px 1fr; height: calc(100vh - var(--wl-topo-h)); }
@media (max-width: 900px) { .wl-painel { grid-template-columns: 1fr; height: auto; } }

/* --- painel: fila como grelha -------------------------------------------- */

.wl-fila {
  border-right: 1px solid var(--wl-linha); background: var(--wl-superficie);
  display: flex; flex-direction: column; min-height: 0;
}
.wl-fila__topo {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 11px 16px; border-bottom: 1px solid var(--wl-linha);
}
.wl-fila__titulo { font-size: .78rem; font-weight: 700; letter-spacing: .06em;
                   text-transform: uppercase; color: var(--wl-tinta-suave); }
.wl-fila__conta {
  min-width: 22px; padding: 1px 7px; border-radius: 999px;
  background: var(--wl-marca); color: #fff;
  font-size: .74rem; font-weight: 700; text-align: center; font-variant-numeric: tabular-nums;
}
.wl-fila__conta[data-zero="sim"] { background: var(--wl-linha-forte); color: var(--wl-tinta-suave); }

.wl-fila__filtro { padding: 10px 12px; border-bottom: 1px solid var(--wl-linha); }
.wl-fila__filtro input { padding: 7px 10px; font-size: .88rem; }

.wl-fila__lista { list-style: none; margin: 0; padding: 0; overflow-y: auto; flex: 1; min-height: 0; }

.wl-fila__item {
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-areas: "codigo . estado" "cliente cliente cliente" "meta meta meta";
  gap: 3px 8px; align-items: center;
  padding: 11px 16px 12px; cursor: pointer;
  border-bottom: 1px solid var(--wl-linha);
  border-left: 3px solid transparent;
}
.wl-fila__item:hover { background: var(--wl-superficie2); }
.wl-fila__item[aria-selected="true"] {
  background: var(--wl-marca-suave); border-left-color: var(--wl-marca);
}
.wl-fila__codigo {
  grid-area: codigo; font-weight: 700; font-size: .88rem;
  font-variant-numeric: tabular-nums; letter-spacing: .01em;
}
.wl-fila__estado { grid-area: estado; }
.wl-fila__cliente {
  grid-area: cliente; font-size: .9rem; color: var(--wl-tinta);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.wl-fila__empresa { color: var(--wl-tinta-suave); }
.wl-fila__meta {
  grid-area: meta; display: flex; gap: 6px; align-items: center; flex-wrap: wrap;
  font-size: .78rem; color: var(--wl-tinta-suave);
}
.wl-fila__meta .wl-ponto { opacity: .5; }
.wl-fila__agente[data-a="ligado"]  { color: var(--wl-ok); font-weight: 600; }
.wl-fila__agente[data-a="offline"] { color: var(--wl-perigo); }

.wl-vazio { padding: 44px 20px; text-align: center; color: var(--wl-tinta-suave); font-size: .9rem; }
.wl-vazio--centro { margin-top: 10vh; }

/* --- painel: detalhe ----------------------------------------------------- */

.wl-detalhe__topo {
  display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  padding: 13px 20px; border-bottom: 1px solid var(--wl-linha); background: var(--wl-superficie);
}
.wl-detalhe__ident { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.wl-detalhe__codigo { font-size: 1.06rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.wl-detalhe__accoes { display: flex; gap: 8px; flex-wrap: wrap; }
.wl-detalhe__corpo { padding: 20px; overflow-y: auto; flex: 1; min-height: 0; }

.wl-ficha { display: grid; grid-template-columns: 128px 1fr; gap: 7px 16px; font-size: .91rem; }
.wl-ficha dt { color: var(--wl-tinta-suave); }
.wl-ficha dd { margin: 0; }
.wl-problema {
  white-space: pre-wrap; word-break: break-word; margin: 0;
  padding: 13px 15px; background: var(--wl-superficie2);
  border: 1px solid var(--wl-linha); border-radius: var(--wl-raio-sm);
  font-size: .92rem;
}
.wl-espaco-cima { margin-top: 24px; }

/* --- painel: sessão em curso --------------------------------------------- */

.wl-sessao-viva {
  display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  padding: 15px 18px; margin-bottom: 20px;
  background: var(--wl-ok-fundo); border: 1px solid color-mix(in srgb, var(--wl-ok) 26%, transparent);
  border-radius: var(--wl-raio);
}
.wl-sessao-viva__texto b { display: block; color: var(--wl-ok); font-size: .96rem; }
.wl-sessao-viva__texto span { font-size: .85rem; color: var(--wl-tinta-media); }

/* --- painel: ferramentas ------------------------------------------------- */

.wl-ferramentas { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 8px; }
.wl-ferramenta {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px; font: inherit; font-size: .88rem; font-weight: 550; text-align: left;
  background: var(--wl-superficie); color: var(--wl-tinta);
  border: 1px solid var(--wl-linha-forte); border-radius: var(--wl-raio-sm);
  cursor: pointer;
}
.wl-ferramenta:hover:not(:disabled) { border-color: var(--wl-marca); background: var(--wl-marca-suave); }
.wl-ferramenta:disabled { opacity: .4; cursor: not-allowed; }
.wl-ferramenta--perigo { color: var(--wl-perigo); border-color: color-mix(in srgb, var(--wl-perigo) 40%, var(--wl-linha)); }
.wl-ferramenta--perigo:hover:not(:disabled) { background: var(--wl-perigo-fundo); border-color: var(--wl-perigo); }

.wl-resultado {
  margin-top: 14px; border: 1px solid var(--wl-linha); border-radius: var(--wl-raio-sm);
  background: var(--wl-superficie); overflow: hidden;
}
.wl-resultado__topo {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 9px 13px; background: var(--wl-superficie2); border-bottom: 1px solid var(--wl-linha);
  font-size: .85rem; font-weight: 650;
}
.wl-resultado__corpo { padding: 13px; max-height: 420px; overflow: auto; }
.wl-resultado pre {
  margin: 0; font: 12.5px/1.55 ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  white-space: pre-wrap; word-break: break-word; color: var(--wl-tinta-media);
}

.wl-tabela { width: 100%; border-collapse: collapse; font-size: .85rem; }
.wl-tabela th, .wl-tabela td {
  text-align: left; padding: 6px 10px; border-bottom: 1px solid var(--wl-linha);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 260px;
}
.wl-tabela th { color: var(--wl-tinta-suave); font-weight: 650; font-size: .78rem;
                text-transform: uppercase; letter-spacing: .04em; position: sticky; top: 0;
                background: var(--wl-superficie); }
.wl-tabela tbody tr:hover { background: var(--wl-superficie2); }

.wl-pares { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; font-size: .88rem; }
.wl-pares dt { color: var(--wl-tinta-suave); white-space: nowrap; }
.wl-pares dd { margin: 0; word-break: break-word; }

/* --- registo ------------------------------------------------------------- */

.wl-registo { list-style: none; margin: 0; padding: 0; font-size: .84rem; }
.wl-registo li { display: flex; gap: 12px; padding: 6px 0; border-top: 1px solid var(--wl-linha); }
.wl-registo li:first-child { border-top: 0; }
.wl-registo time { color: var(--wl-tinta-suave); font-variant-numeric: tabular-nums; flex: none; }

/* --- entrada ------------------------------------------------------------- */

.wl-entrada { max-width: 372px; margin: 9vh auto; padding: 0 16px; }
.wl-entrada__marca { text-align: center; margin-bottom: 22px; }
.wl-entrada__marca img { width: 232px; height: auto; }

/* --- notas --------------------------------------------------------------- */

.wl-rodape-nota {
  margin: 12px 0 0; padding: 10px 13px;
  font-size: .84rem; line-height: 1.5;
  color: var(--wl-tinta-media);
  background: var(--wl-superficie2);
  border: 1px solid var(--wl-linha);
  border-radius: var(--wl-raio-sm);
}
.wl-accao { margin: 22px 0 0; }
.wl-accao--junta { margin: 10px 0 0; }

/* --- tabelas com acções -------------------------------------------------- */

.wl-filtro-tabela {
  margin-bottom: 10px; padding: 7px 10px; font-size: .88rem;
}
.wl-tabela__accoes { display: flex; gap: 6px; justify-content: flex-end; white-space: nowrap; }
.wl-tabela__accoes .wl-btn { padding: 3px 9px; font-size: .78rem; }
.wl-tabela td .wl-etiqueta { font-size: .72rem; }
.wl-nota-celula { font-size: .76rem; color: var(--wl-tinta-suave); font-style: italic; }

/* --- abas e paginação da fila -------------------------------------------- */

.wl-abas { display: flex; border-bottom: 1px solid var(--wl-linha); }
.wl-barra-fila .wl-abas { border-bottom: 0; }
.wl-barra-fila .wl-aba { flex: none; padding: 14px 20px; }
.wl-aba {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 7px;
  padding: 11px 10px; font: inherit; font-size: .82rem; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase;
  color: var(--wl-tinta-suave); background: var(--wl-superficie);
  border: 0; border-bottom: 2px solid transparent; cursor: pointer;
  white-space: nowrap;
}
.wl-aba:hover { color: var(--wl-tinta); background: var(--wl-superficie2); }
.wl-aba[aria-selected="true"] { color: var(--wl-marca-forte); border-bottom-color: var(--wl-marca); }

.wl-paginacao {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 10px 14px; border-top: 1px solid var(--wl-linha);
  font-size: .82rem; color: var(--wl-tinta-suave);
  background: var(--wl-superficie);
}
.wl-paginacao span { font-variant-numeric: tabular-nums; }

.wl-fila__item--fechado { opacity: .78; }
.wl-fila__item--fechado:hover { opacity: 1; }

/* ==========================================================================
   Consola de suporte
   O painel é uma ferramenta de trabalho para horas seguidas, por isso é
   escuro por decisão e não por preferência do sistema. O portal do cliente
   mantém-se claro. Só trocamos os tokens; os componentes são os mesmos.
   ========================================================================== */

:root[data-tema="escuro"] {
  --wl-tinta:        #e7ebf1;
  --wl-tinta-media:  #a4adbb;
  --wl-tinta-suave:  #7d8796;
  --wl-fundo:        #0c0f13;
  --wl-superficie:   #141920;
  --wl-superficie2:  #1a2029;
  --wl-linha:        #232b35;
  --wl-linha-forte:  #313a47;

  --wl-marca:        #fe6c02;
  --wl-marca-forte:  #ff8c33;
  --wl-marca-escura: #d95a00;
  --wl-marca-suave:  #2a1a0c;

  --wl-ok:           #3ecf8e;
  --wl-ok-fundo:     #0f2a20;
  --wl-aviso:        #e0a55c;
  --wl-aviso-fundo:  #2b2010;
  --wl-perigo:       #f48579;
  --wl-perigo-fundo: #2d1614;
  --wl-info:         #6fb0ee;
  --wl-info-fundo:   #10202f;

  --wl-sombra:  0 1px 2px rgba(0,0,0,.6), 0 8px 24px rgba(0,0,0,.45);
}

:root[data-tema="escuro"] body { background: var(--wl-fundo); }

/* --- estrutura da consola ------------------------------------------------ */

.wl-pagina {
  display: flex; flex-direction: column;
  height: calc(100vh - var(--wl-topo-h) - var(--wl-rodape-h));
  min-height: 0;
}
@media (max-width: 940px) { .wl-pagina { height: auto; } }

/* --- barra da fila -------------------------------------------------------- */

.wl-barra-fila {
  display: flex; align-items: stretch; justify-content: space-between; gap: 16px;
  background: var(--wl-superficie); border-bottom: 1px solid var(--wl-linha);
  padding-right: 16px;
}
.wl-procura {
  align-self: center; width: 340px; max-width: 42vw;
  padding: 7px 11px; font-size: .88rem;
}
@media (max-width: 700px) { .wl-procura { width: 100%; max-width: none; } .wl-barra-fila { flex-wrap: wrap; padding: 0 10px 10px; } }

/* --- grelha de pedidos ---------------------------------------------------- */

.wl-tabela-envolve { flex: 1; min-height: 0; overflow: auto; }

.wl-grelha { width: 100%; border-collapse: collapse; font-size: .9rem; }
.wl-grelha th {
  position: sticky; top: 0; z-index: 2;
  text-align: left; padding: 9px 14px; white-space: nowrap;
  background: var(--wl-superficie2); border-bottom: 1px solid var(--wl-linha-forte);
  font-size: .74rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--wl-tinta-suave);
}
.wl-grelha th.wl-ord { cursor: pointer; user-select: none; }
.wl-grelha th.wl-ord:hover { color: var(--wl-tinta); }
.wl-grelha th[data-dir]::after { content: " ▲"; font-size: .7em; }
.wl-grelha th[data-dir="desc"]::after { content: " ▼"; }
.wl-grelha th.wl-ord--num { text-align: right; }

.wl-grelha td {
  padding: 9px 14px; border-bottom: 1px solid var(--wl-linha);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 280px;
}
.wl-grelha td.wl-num { text-align: right; font-variant-numeric: tabular-nums; color: var(--wl-tinta-suave); }
.wl-grelha tbody tr { cursor: pointer; }
.wl-grelha tbody tr:hover { background: var(--wl-superficie2); }
.wl-grelha tbody tr:focus-visible { outline: 2px solid var(--wl-marca); outline-offset: -2px; }
.wl-grelha__codigo { font-weight: 700; font-variant-numeric: tabular-nums; }

/* Pedidos que precisam de alguém: barra à esquerda, sem gritar. */
.wl-grelha tbody tr[data-atencao="sim"] { box-shadow: inset 3px 0 0 var(--wl-marca); }
.wl-grelha tbody tr[data-atencao="sessao"] { box-shadow: inset 3px 0 0 var(--wl-ok); }
.wl-grelha__agente[data-a="ligado"]  { color: var(--wl-ok); font-weight: 600; }
.wl-grelha__agente[data-a="offline"] { color: var(--wl-perigo); }
.wl-grelha__abrir { color: var(--wl-tinta-suave); font-size: 1rem; }

.wl-rodape {
  position: fixed; left: 0; right: 0; bottom: 0; height: var(--wl-rodape-h);
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 0 16px; background: var(--wl-superficie); border-top: 1px solid var(--wl-linha);
  font-size: .74rem; color: var(--wl-tinta-suave); letter-spacing: .02em;
}
.wl-rodape__grupo { display: flex; align-items: center; gap: 14px; }
.wl-rodape b { color: var(--wl-tinta-media); font-weight: 650; font-variant-numeric: tabular-nums; }
.wl-relogio { font-variant-numeric: tabular-nums; }
@media (max-width: 940px) { .wl-rodape { position: static; } }

/* --- sinal vivo ----------------------------------------------------------- */

.wl-sinal { width: 7px; height: 7px; border-radius: 50%; background: var(--wl-tinta-suave); flex: none; }
.wl-sinal[data-v="ok"]   { background: var(--wl-ok); box-shadow: 0 0 0 0 rgba(62,207,142,.6); animation: wl-pulso 2s infinite; }
.wl-sinal[data-v="mau"]  { background: var(--wl-perigo); }
@keyframes wl-pulso {
  0%   { box-shadow: 0 0 0 0 rgba(62,207,142,.55); }
  70%  { box-shadow: 0 0 0 7px rgba(62,207,142,0); }
  100% { box-shadow: 0 0 0 0 rgba(62,207,142,0); }
}

/* --- cabeçalho do detalhe ------------------------------------------------ */

.wl-detalhe__topo { position: sticky; top: 0; z-index: 5; }
.wl-cronometro {
  font-variant-numeric: tabular-nums; font-weight: 700; font-size: .92rem;
  color: var(--wl-ok); letter-spacing: .02em;
}

/* --- separadores do detalhe ---------------------------------------------- */

.wl-seccoes {
  display: flex; gap: 2px; padding: 0 20px;
  background: var(--wl-superficie); border-bottom: 1px solid var(--wl-linha);
}
.wl-seccao {
  padding: 10px 14px; font: inherit; font-size: .84rem; font-weight: 650;
  color: var(--wl-tinta-suave); background: transparent;
  border: 0; border-bottom: 2px solid transparent; cursor: pointer;
}
.wl-seccao:hover { color: var(--wl-tinta); }
.wl-seccao[aria-selected="true"] { color: var(--wl-marca-forte); border-bottom-color: var(--wl-marca); }
.wl-seccao__conta {
  display: inline-block; margin-left: 6px; padding: 0 6px; border-radius: 999px;
  background: var(--wl-superficie2); color: var(--wl-tinta-suave);
  font-size: .7rem; font-weight: 700; font-variant-numeric: tabular-nums;
}

/* --- faixa da sessão ----------------------------------------------------- */

.wl-faixa {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 16px 18px; margin-bottom: 20px;
  background: var(--wl-ok-fundo);
  border: 1px solid color-mix(in srgb, var(--wl-ok) 24%, transparent);
  border-left: 3px solid var(--wl-ok);
  border-radius: var(--wl-raio);
}
.wl-faixa__info { flex: 1; min-width: 200px; }
.wl-faixa__titulo { display: flex; align-items: center; gap: 8px; font-weight: 650; font-size: .96rem; }
.wl-faixa__nota { font-size: .84rem; color: var(--wl-tinta-suave); margin-top: 3px; }
.wl-faixa__accoes { display: flex; gap: 8px; flex-wrap: wrap; }

/* --- cartões de informação ----------------------------------------------- */

.wl-cartoes { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; }
.wl-mini {
  padding: 12px 14px; background: var(--wl-superficie);
  border: 1px solid var(--wl-linha); border-radius: var(--wl-raio-sm);
}
.wl-mini dt {
  font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--wl-tinta-suave); margin-bottom: 5px;
}
.wl-mini dd { margin: 0; font-size: .92rem; word-break: break-word; }

/* --- atalhos de teclado --------------------------------------------------- */

kbd {
  display: inline-block; padding: 1px 5px; border-radius: 4px;
  background: var(--wl-superficie2); border: 1px solid var(--wl-linha-forte);
  border-bottom-width: 2px; font: inherit; font-size: .74rem; font-weight: 650;
  color: var(--wl-tinta-media);
}
.wl-vazio__dica { font-size: .84rem; display: inline-block; margin-top: 8px; }

/* --- barra de ocupação de disco ------------------------------------------ */

.wl-barra { display: flex; align-items: center; gap: 9px; min-width: 130px; }
.wl-barra b { font-size: .78rem; font-weight: 650; font-variant-numeric: tabular-nums; color: var(--wl-tinta-suave); }
.wl-barra meter { width: 74px; height: 7px; flex: none; }

/* O <meter> desenha-se de maneiras diferentes conforme o motor do browser. */
.wl-barra meter { -webkit-appearance: none; appearance: none; border: 0; background: var(--wl-linha); border-radius: 4px; }
.wl-barra meter::-webkit-meter-bar { background: var(--wl-linha); border: 0; border-radius: 4px; height: 7px; }
.wl-barra meter::-webkit-meter-optimum-value { background: var(--wl-ok);     border-radius: 4px; }
.wl-barra meter::-webkit-meter-suboptimum-value { background: var(--wl-aviso); border-radius: 4px; }
.wl-barra meter::-webkit-meter-even-less-good-value { background: var(--wl-perigo); border-radius: 4px; }
.wl-barra meter::-moz-meter-bar { background: var(--wl-ok); border-radius: 4px; }
.wl-barra meter:-moz-meter-sub-optimum::-moz-meter-bar { background: var(--wl-aviso); }
.wl-barra meter:-moz-meter-sub-sub-optimum::-moz-meter-bar { background: var(--wl-perigo); }

/* --- interruptor de tema -------------------------------------------------- */

.wl-tema {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; padding: 0;
  background: transparent; color: var(--wl-tinta-suave);
  border: 1px solid var(--wl-linha-forte); border-radius: var(--wl-raio-sm);
  cursor: pointer; font-size: 14px; line-height: 1;
}
.wl-tema:hover { color: var(--wl-tinta); background: var(--wl-superficie2); }
.wl-tema svg { display: none; }
:root[data-tema="escuro"] .wl-tema__claro { display: block; }
:root:not([data-tema="escuro"]) .wl-tema__escuro { display: block; }

/* --- entrada: aviso de utilização e crédito ------------------------------- */

.wl-entrada .wl-cartao {
  box-shadow: 0 2px 6px rgba(20,24,31,.07), 0 18px 44px rgba(20,24,31,.14);
  border-color: transparent;
}
:root[data-tema="escuro"] .wl-entrada .wl-cartao {
  box-shadow: 0 2px 8px rgba(0,0,0,.5), 0 22px 52px rgba(0,0,0,.55);
  border-color: var(--wl-linha);
}

.wl-aviso-uso {
  display: flex; gap: 11px; align-items: flex-start;
  padding: 12px 14px; margin-bottom: 20px;
  background: var(--wl-marca-suave);
  border: 1px solid color-mix(in srgb, var(--wl-marca) 22%, transparent);
  border-radius: var(--wl-raio-sm);
  font-size: .82rem; line-height: 1.5; color: var(--wl-tinta-media);
}
.wl-aviso-uso svg { flex: none; margin-top: 1px; color: var(--wl-marca-forte); }
.wl-aviso-uso b { color: var(--wl-tinta); font-weight: 650; }

.wl-credito {
  margin: 22px 0 0; text-align: center;
  font-size: .74rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--wl-tinta-suave);
}
.wl-credito b { color: var(--wl-marca-forte); font-weight: 700; letter-spacing: .12em; }
.wl-credito--rodape { margin: 0; font-size: .7rem; }