/* ============================================================ tema noite
   Visual novo (set/2026): fundo quase preto com leve tom verde, cartões
   planos com borda fina, verde como única cor de ação, amarelo e vermelho
   só para prazo. Sobrescreve o tema "escuro" sem tocar nas outras regras. */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap');

:root[data-tema="noite"] {
  color-scheme: dark;
  --fundo: #0b0d0c;
  --branco: #121513;
  --painel-2: #181c19;
  --tinta: #e9efeb;
  --tinta-fraca: #8d978f;
  --borda: rgba(255,255,255,.07);
  --verde: #34c77a;
  --verde-escuro: #5fd996;
  --verde-claro: rgba(52,199,122,.12);
  --verde-medio: #1f5c3a;
  --amarelo: #e2b25b;
  --amarelo-claro: rgba(226,178,91,.12);
  --vermelho: #ee6b5f;
  --vermelho-claro: rgba(238,107,95,.12);
  --roxo: #b7a6ff;
  --roxo-claro: rgba(183,166,255,.12);
  --cinza-claro: #1d221f;
  --raio: 16px;
  --sombra: none;
  --sombra-alta: 0 24px 60px rgba(0,0,0,.55);
  --miranda-azul: #34c77a;
  --miranda-azul-hover: #5fd996;
  --miranda-azul-claro: #5fd996;
  --miranda-azul-fundo: rgba(52,199,122,.12);
  --miranda-superficie: #121513;
  --miranda-superficie-2: #181c19;
  --miranda-linha: rgba(255,255,255,.07);
}

:root[data-tema="noite"] body {
  background: var(--fundo);
  font-family: Manrope, -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  font-variant-numeric: tabular-nums;
}
:root[data-tema="noite"] .trilho { background: var(--fundo); backdrop-filter: none; border: 0; border-right: 1px solid var(--borda); border-radius: 0; }
:root[data-tema="noite"] .trilho .logo { color: #06130c; border-radius: 11px; width: 40px; height: 40px; font-size: 15px; }
:root[data-tema="noite"] .trilho button { border-radius: 12px; }
:root[data-tema="noite"] .trilho button.ativa { background: var(--painel-2); color: var(--tinta); }
:root[data-tema="noite"] .trilho button:hover { background: var(--painel-2); color: var(--tinta); }
:root[data-tema="noite"] .trilho .fila-badge {
  position: absolute; top: 5px; right: 5px; min-width: 16px; height: 16px; padding: 0 4px;
  border-radius: 999px; background: var(--verde); color: #06130c; font-size: 10px; font-weight: 800;
  display: grid; place-items: center; line-height: 1;
}
:root[data-tema="noite"] .cartao,
:root[data-tema="noite"] .painel-recolhivel,
:root[data-tema="noite"] dialog { box-shadow: none; border: 1px solid var(--borda); }
:root[data-tema="noite"] .cartao.verde { background: var(--verde-claro); color: var(--tinta); box-shadow: none; border-color: rgba(52,199,122,.25); }
:root[data-tema="noite"] .cartao.verde .legenda,
:root[data-tema="noite"] .cartao.verde .numerao .centavos { color: var(--tinta-fraca); }
:root[data-tema="noite"] .pilula { box-shadow: none; background: var(--painel-2); border-radius: 10px; }
:root[data-tema="noite"] .pilula.solida,
:root[data-tema="noite"] button.acao.principal,
:root[data-tema="noite"] a.acao.principal,
:root[data-tema="noite"] .selo.solido { background: var(--verde); color: #06130c; border-color: var(--verde); }
:root[data-tema="noite"] button.acao.principal:hover,
:root[data-tema="noite"] a.acao.principal:hover,
:root[data-tema="noite"] .pilula.solida:hover { background: var(--verde-escuro); color: #06130c; }
:root[data-tema="noite"] .trilho button.ativa svg { color: var(--tinta); }
:root[data-tema="noite"] .icone-caixa { background: var(--painel-2); color: var(--tinta-fraca); border-radius: 10px; }
:root[data-tema="noite"] .icone-caixa.amarelo { background: var(--amarelo-claro); color: var(--amarelo); }
:root[data-tema="noite"] .icone-caixa.vermelho { background: var(--vermelho-claro); color: var(--vermelho); }
:root[data-tema="noite"] .topo h1 { font-weight: 800; letter-spacing: -.02em; }
:root[data-tema="noite"] .numerao { letter-spacing: -.02em; }
:root[data-tema="noite"] input,
:root[data-tema="noite"] select,
:root[data-tema="noite"] textarea { background: #0e100f; border-color: var(--borda); }
:root[data-tema="noite"] .selo.azul { background: var(--verde-claro); color: var(--verde-escuro); }
:root[data-tema="noite"] .avatar { background: var(--painel-2); color: #b7c1ba; border-radius: 12px; }

/* ---- Início: fila de hoje */
.inicio-numeros { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 18px; }
.inicio-numeros .cartao { padding: 16px 18px; display: flex; flex-direction: column; gap: 4px; }
.inicio-numeros small { color: var(--tinta-fraca); font-size: 12px; font-weight: 500; }
.inicio-numeros strong { font-size: 26px; font-weight: 700; letter-spacing: -.02em; line-height: 1.1; }
.inicio-numeros em { font-style: normal; color: var(--tinta-fraca); opacity: .75; font-size: 12px; }
.inicio-numeros .barra { height: 4px; border-radius: 999px; background: var(--cinza-claro); margin-top: 6px; overflow: hidden; }
.inicio-numeros .barra i { display: block; height: 100%; background: var(--verde); }
.inicio-grade { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 18px; align-items: start; }
.inicio-lateral { display: flex; flex-direction: column; gap: 18px; }
.fila { padding: 0; overflow: hidden; }
.fila .cartao-topo { padding: 16px 18px 12px; margin: 0; align-items: center; }
.fila-item { display: flex; align-items: center; gap: 14px; padding: 13px 18px; border-top: 1px solid var(--borda); min-height: 64px; }
.fila-item .corpo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.fila-item .corpo strong { font-weight: 600; font-size: 14px; }
.fila-item .corpo small { color: var(--tinta-fraca); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fila-item .acoes { display: flex; gap: 8px; flex: none; }
.fila-item .selo { flex: none; }
.fila-vazia { padding: 34px 18px; text-align: center; color: var(--tinta-fraca); }
.fila-vazia strong { display: block; color: var(--tinta); font-size: 16px; margin-bottom: 4px; }
.fila-rodape { padding: 12px 18px; border-top: 1px solid var(--borda); display: flex; justify-content: space-between; gap: 12px; color: var(--tinta-fraca); font-size: 12px; }
.fila-rodape button { background: none; border: 0; color: var(--verde-escuro); font: inherit; font-weight: 600; cursor: pointer; padding: 0; }
.dias-lista { padding: 0; overflow: hidden; }
.dias-lista .cartao-topo { padding: 16px 18px 10px; margin: 0; }
.dia-linha { display: grid; grid-template-columns: 72px 1fr auto; gap: 12px; align-items: center; padding: 10px 18px; border-top: 1px solid var(--borda); font-size: 13px; cursor: pointer; }
.dia-linha:hover { background: var(--painel-2); }
.dia-linha b { font-weight: 600; } .dia-linha span { color: var(--tinta-fraca); } .dia-linha .num { font-weight: 600; text-align: right; }
.vaga-linha { display: flex; justify-content: space-between; gap: 12px; align-items: center; padding: 10px 18px; border-top: 1px solid var(--borda); font-size: 13px; }
.vaga-linha span { color: var(--tinta-fraca); text-align: right; } .vaga-linha span b { color: var(--tinta); }
.selo.espera-verde { background: var(--verde-claro); color: var(--verde-escuro); }
.selo.espera-amarelo { background: var(--amarelo-claro); color: var(--amarelo); }
.selo.espera-vermelho { background: var(--vermelho-claro); color: var(--vermelho); }

/* ---- Pedidos: filtros em cima */
.pedidos-filtros { display: flex; gap: 4px; background: var(--branco); border: 1px solid var(--borda); border-radius: 12px; padding: 4px; margin-bottom: 16px; overflow-x: auto; scrollbar-width: none; }
.pedidos-filtros button { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px; border-radius: 9px; border: 0; background: none; color: var(--tinta-fraca); font: inherit; font-weight: 600; font-size: 13px; cursor: pointer; white-space: nowrap; }
.pedidos-filtros button.ativa { background: var(--painel-2); color: var(--tinta); }
.pedidos-filtros button i { font-style: normal; font-size: 11px; font-weight: 700; padding: 1px 7px; border-radius: 999px; background: var(--cinza-claro); color: var(--tinta-fraca); }
.pedidos-filtros button.ativa i { background: var(--verde); color: #06130c; }
.pedidos-resumo { display: flex; align-items: center; gap: 18px; }
.pedidos-resumo span { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.2; }
.pedidos-resumo small { color: var(--tinta-fraca); font-size: 12px; }
.pedidos-resumo b { font-size: 15px; }
.pedidos-legenda-espera { display: flex; align-items: center; gap: 8px; color: var(--tinta-fraca); font-size: 12px; margin: 10px 2px 0; }

@media (max-width: 1100px) {
  .inicio-grade { grid-template-columns: 1fr; }
  .inicio-numeros { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  :root[data-tema="noite"] .trilho { border-right: 0; border-top: 1px solid var(--borda); background: rgba(11,13,12,.94); box-shadow: none; }
  :root[data-tema="noite"] .trilho button.ativa { background: none; color: var(--verde); }
  :root[data-tema="noite"] .trilho .fila-badge { top: 2px; right: calc(50% - 22px); }
  .inicio-numeros { gap: 10px; }
  .inicio-numeros strong { font-size: 22px; }
  .fila-item { flex-wrap: wrap; padding: 12px 14px; }
  .fila-item .acoes { width: 100%; }
  .fila-item .acoes .acao.principal { flex: 1; justify-content: center; }
  .pedidos-resumo { display: none; }
}

/* ---- sobrescreve a identidade azul/arco-íris do tema escuro anterior */
:root[data-tema="noite"] .trilho .logo,
:root[data-tema="noite"] .login-marca { background: var(--verde); border: 0; box-shadow: none; color: #06130c; }
:root[data-tema="noite"] .trilho button:hover,
:root[data-tema="noite"] button.acao:hover,
:root[data-tema="noite"] a.acao:hover,
:root[data-tema="noite"] .pilula:hover { border-color: rgba(52,199,122,.5); }
:root[data-tema="noite"] button.acao,
:root[data-tema="noite"] a.acao { border-radius: 10px; }
:root[data-tema="noite"] .trilho { box-shadow: none; }
:root[data-tema="noite"] .tag.familia { background: var(--verde-claro); color: var(--verde-escuro); }
:root[data-tema="noite"] .tag.compart { background: var(--roxo-claro); color: var(--roxo); }
:root[data-tema="noite"] *:focus-visible { outline: 2px solid var(--verde); outline-offset: 2px; }
.pedidos-legenda-espera svg { width: 14px; height: 14px; flex: none; }
:root[data-tema="noite"] .pedido-site-item.destino-pendente { border-color: rgba(226,178,91,.35); }
:root[data-tema="noite"] .pedido-site-item.destino-confirmado { border-color: rgba(52,199,122,.35); }


/* ---- liberação de acesso */
.liberacao-grade { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 12px 0; }
.liberacao-bloco { display: flex; flex-direction: column; gap: 4px; padding: 14px; border-radius: 12px; border: 1px solid var(--borda); background: var(--painel-2); font-size: 13px; }
.liberacao-bloco small { color: var(--tinta-fraca); font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.liberacao-bloco strong { font-size: 15px; }
.liberacao-bloco span { color: var(--tinta-fraca); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; word-break: break-all; }
.liberacao-bloco span.atencao { color: var(--amarelo); } .liberacao-bloco span.perigo { color: var(--vermelho); }
.liberacao-bloco em { font-style: normal; color: var(--tinta-fraca); font-size: 12px; }
.liberacao-bloco .acao { align-self: flex-start; margin-top: 6px; }
.liberacao-bloco.destino.sugerido { border-color: rgba(226,178,91,.45); }
.liberacao-bloco.destino.confirmado { border-color: rgba(52,199,122,.45); }
.liberacao-credencial { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border-radius: 12px; border: 1px dashed var(--borda); margin-bottom: 10px; font-size: 13px; }
.liberacao-credencial small { color: var(--tinta-fraca); font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.liberacao-credencial span { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; word-break: break-all; font-family: ui-monospace, SFMono-Regular, monospace; }
.fila-plano { color: var(--tinta-fraca); font-weight: 500; font-size: 12px; margin-left: 4px; }
.fila-item .corpo small b { color: var(--tinta); font-weight: 600; }
.ajustes-automacoes { display: flex; flex-direction: column; gap: 10px; padding: 12px 14px; border: 1px solid var(--borda); border-radius: 12px; margin-bottom: 12px; }
.ajuste-toggle { display: flex; gap: 10px; align-items: flex-start; }
.ajuste-toggle input { margin-top: 3px; width: 18px; height: 18px; }
.ajuste-toggle span { display: flex; flex-direction: column; gap: 2px; }
.ajuste-toggle small { color: var(--tinta-fraca); font-size: 12px; }
.trilho-icone { position: relative; display: inline-grid; place-items: center; }
.trilho .trilho-icone .fila-badge { position: absolute; top: -6px; right: -10px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px; background: var(--verde); color: #06130c; font-size: 10px; font-weight: 800; display: grid; place-items: center; line-height: 1; }
:root[data-tema="noite"] .trilho .fila-badge { top: -6px; right: -10px; }
@media (max-width: 760px) {
  .liberacao-grade { grid-template-columns: 1fr; }
  :root[data-tema="noite"] .trilho .fila-badge { top: -6px; right: -10px; }
}


/* ---- estado do WhatsApp */
.aviso-whatsapp { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; padding: 14px 16px; border-radius: 12px; border: 1px solid rgba(238,107,95,.45); background: rgba(238,107,95,.10); margin-bottom: 16px; }
.aviso-whatsapp > div:first-child { display: flex; flex-direction: column; gap: 2px; }
.aviso-whatsapp strong { color: var(--vermelho); }
.aviso-whatsapp span { color: var(--tinta-fraca); font-size: 13px; }
.aviso-whatsapp .acoes { display: flex; gap: 8px; }
.estado-whatsapp { display: inline-flex; align-items: center; gap: 8px; color: var(--tinta-fraca); font-size: 12px; margin: -6px 0 12px; }
.estado-whatsapp i { width: 8px; height: 8px; border-radius: 50%; background: var(--verde); box-shadow: 0 0 0 3px rgba(52,199,122,.18); }
:root[data-tema="noite"] .avatar.amarelo { background: var(--amarelo-claro); color: var(--amarelo); }
:root[data-tema="noite"] .avatar.vermelho { background: var(--vermelho-claro); color: var(--vermelho); }


/* ---- atividade recente em Pedidos */
.atividade-item { display: flex; align-items: flex-start; gap: 12px; padding: 11px 18px; border-top: 1px solid var(--borda); font-size: 13px; }
.atividade-item:first-child { border-top: 0; }
.atividade-item.clicavel { cursor: pointer; }
.atividade-item.clicavel:hover { background: var(--painel-2); }
.atividade-texto { flex: 1; min-width: 0; line-height: 1.6; }
.atividade-texto b { font-weight: 600; }
.atividade-texto .tag { margin-left: 4px; vertical-align: 1px; }
.atividade-quando { color: var(--tinta-fraca); font-size: 12px; flex: none; padding-top: 1px; }
.atividade-item .acao { flex: none; }


/* ---- Início compacto: 3 respostas, sem lista de ações */
.inicio-resumo { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.inicio-resumo-item { display: flex; flex-direction: column; gap: 10px; }
.inicio-resumo-item p { margin: 0; color: var(--tinta-fraca); font-size: 13px; line-height: 1.5; flex: 1; }
.inicio-resumo-item > .acao { align-self: flex-start; }
.alinhamento-linha { display: flex; align-items: center; gap: 10px; padding: 8px 0; font-size: 13px; border-top: 1px solid var(--borda); }
.alinhamento-linha:first-child { border-top: 0; padding-top: 0; }
.alinhamento-linha svg { width: 16px; height: 16px; flex: none; }
.alinhamento-linha.ok svg { color: var(--verde-escuro); }
.alinhamento-linha.atencao svg { color: var(--amarelo); }
.alinhamento-linha[data-ir] { cursor: pointer; }
.alinhamento-linha[data-ir]:hover span:first-of-type { text-decoration: underline; }
.alinhamento-acoes { margin-left: auto; display: flex; gap: 6px; flex: none; }
@media (max-width: 1100px) { .inicio-resumo { grid-template-columns: 1fr; } }

/* ---- Entregues recentemente: linha clicável abre o cliente */
.pedido-entregue-linha.clicavel { cursor: pointer; }
.pedido-entregue-linha.clicavel:hover { background: var(--painel-2); }


/* ---- sala de entrega (painel) */
.modal-sala { width: min(720px, 96vw); }
.sala-cabecalho { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; margin-bottom: 10px; }
.sala-cabecalho h3 { margin: 0 0 2px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sala-cabecalho-acoes { display: flex; gap: 6px; flex: none; }
.sala-alerta { margin-top: 6px; padding: 8px 10px; border-radius: 10px; background: var(--vermelho-claro); color: var(--vermelho); font-size: 12.5px; }
.sala-thread { display: flex; flex-direction: column; gap: 8px; max-height: 46vh; min-height: 140px; overflow-y: auto; padding: 10px; border: 1px solid var(--borda); border-radius: 12px; background: #0e100f; }
.sala-msg { display: flex; flex-direction: column; max-width: 84%; }
.sala-msg.cliente { align-self: flex-start; } .sala-msg.operador { align-self: flex-end; align-items: flex-end; } .sala-msg.sistema { align-self: center; align-items: center; max-width: 94%; }
.sala-bolha { padding: 9px 12px; border-radius: 14px; background: var(--painel-2); font-size: 13.5px; line-height: 1.45; }
.sala-msg.operador .sala-bolha { background: var(--verde-claro); color: var(--tinta); border-bottom-right-radius: 5px; }
.sala-msg.cliente .sala-bolha { border-bottom-left-radius: 5px; }
.sala-msg.sistema .sala-bolha { background: transparent; border: 1px dashed var(--borda); color: var(--tinta-fraca); font-size: 12.5px; text-align: center; }
.sala-bolha.credencial { display: flex; flex-direction: column; gap: 2px; font-family: ui-monospace, SFMono-Regular, monospace; }
.sala-bolha.credencial small { font-family: Manrope, system-ui, sans-serif; color: var(--tinta-fraca); font-size: 11px; text-transform: uppercase; letter-spacing: .04em; }
.sala-msg em { font-style: normal; color: var(--tinta-fraca); font-size: 11px; margin-top: 2px; }
.sala-enviar-acesso { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 10px 12px; margin-top: 10px; border-radius: 12px; border: 1px solid rgba(52,199,122,.35); background: var(--verde-claro); font-size: 13px; }
.sala-escrever { display: flex; gap: 8px; align-items: flex-end; margin-top: 10px; }
.sala-escrever textarea { flex: 1; min-height: 44px; resize: vertical; }
.sala-linha { display: flex; align-items: center; gap: 12px; padding: 12px 18px; border-top: 1px solid var(--borda); cursor: pointer; }
.sala-linha:hover { background: var(--painel-2); }
.sala-linha.nao-lida { background: rgba(52,199,122,.06); }
.sala-linha .corpo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sala-linha .corpo strong { font-weight: 600; font-size: 14px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.sala-linha .corpo small { color: var(--tinta-fraca); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sala-linha.nao-lida .corpo small { color: var(--tinta); }
.sala-quando { color: var(--tinta-fraca); font-size: 12px; flex: none; }
@media (max-width: 760px) { .sala-cabecalho { flex-direction: column; } .sala-thread { max-height: 50vh; } }


/* ---- guia "Como funciona" e conversa por pessoa */
.ajuda-grade { align-items: start; }
.ajuda-passo { display: flex; gap: 12px; padding: 12px 0; border-top: 1px solid var(--borda); }
.ajuda-passo:first-of-type { border-top: 0; }
.ajuda-passo > b { flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--verde); color: #06130c; display: grid; place-items: center; font-size: 13px; font-weight: 800; }
.ajuda-passo strong { display: block; margin-bottom: 2px; }
.ajuda-passo p { margin: 0; color: var(--tinta-fraca); font-size: 13px; line-height: 1.5; }
.ajuda-lista { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 8px; }
.ajuda-lista li { color: var(--tinta-fraca); font-size: 13px; line-height: 1.5; }
.ajuda-lista b, .ajuda-passo p b { color: var(--tinta); font-weight: 600; }
.ajuda-obs { margin-top: 16px; }
.conversa-acessos { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.conversa-acesso { font-size: 11.5px; padding: 3px 8px; border-radius: 999px; background: var(--painel-2); color: var(--tinta-fraca); }
.conversa-acesso.atencao { background: var(--amarelo-claro); color: var(--amarelo); }