/* ==========================================================================
   VISUAL "VIDRO" — teste do dono (05/11/2026)
   Mesmas telas, mesmos menus, mesmos acessos: só a pele muda. Vidro escuro
   sobre a própria oficina desfocada, pílulas, cantos generosos, entrada com
   desfoque. Liga com VISUAL=vidro no ambiente (config.visual); base.html põe
   data-visual="vidro" no <html>. Ponto, TV e a tela de entrar ficam fora.
   A marca é a do INDU Intelligence de sempre: logotipo, senoide e o gesto de
   _marca_viva.html continuam intocados.
   ========================================================================== */

:root[data-visual="vidro"]{
  --fundo:transparent;
  --painel:rgba(255,255,255,.045);
  --painel2:rgba(255,255,255,.07);
  --painel3:rgba(255,255,255,.095);
  --linha:rgba(255,255,255,.09);
  --linha-fraca:rgba(255,255,255,.055);
  --borda-viva:rgba(255,255,255,.22);
  --tinta:#EEF2F6; --tinta2:rgba(238,242,246,.78); --tinta3:rgba(238,242,246,.58); --tinta4:rgba(238,242,246,.46);
  --marca:#E86056; --indu:#E86056; --indu-forte:#F2897F;
  --azul-acao:#7FB3E6; --azul-fundo:rgba(94,155,214,.16);
  --acao:#EEF2F6; --acao-hover:#FFFFFF; --tinta-acao:#0B0F14;
  --critico-fraco:rgba(232,96,86,.16); --atencao-fraco:rgba(240,180,76,.15);
  --ok-fraco:rgba(76,195,138,.15); --bloqueio-fraco:rgba(160,139,208,.16);
  --neutro-fraco:rgba(255,255,255,.07); --info-fraco:rgba(94,155,214,.16);
  --trilho:rgba(12,17,23,.5); --trilho2:rgba(255,255,255,.07); --trilho-linha:rgba(255,255,255,.08);
  --trilho-aceso-fundo:rgba(255,255,255,.12); --trilho-tinta:rgba(238,242,246,.66);
  --trilho-tinta2:rgba(238,242,246,.42); --trilho-aceso:#fff; --trilho-marca:#fff;
  --sombra:0 10px 30px rgba(0,0,0,.25);
  --sombra-flutua:0 30px 80px -10px rgba(0,0,0,.6);
  --vidro-solido:rgba(20,26,34,.9);
  --r2:14px; --r3:18px; --r4:22px;
  --mola:cubic-bezier(.2,.8,.2,1);
  color-scheme:dark;
}

/* ---------- o fundo: a oficina, desfocada, com a tinta da marca ---------- */
:root[data-visual="vidro"] body{background:#07090C}
:root[data-visual="vidro"] body::before{content:"";position:fixed;inset:-90px;z-index:-2;pointer-events:none;
  background:url(/estatico/vidro/oficina-desfocada.jpg) center 40%/cover;
  /* a foto já vem desfocada do arquivo (6 KB): nada de filtro em tempo real,
     que custa caro no celular e no tablet do galpão */
  transform:scale(1.05)}
:root[data-visual="vidro"] body::after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(1000px 700px at 12% 0%,rgba(21,84,135,.55),transparent 62%),
    radial-gradient(900px 700px at 100% 100%,rgba(232,96,86,.2),transparent 60%),
    linear-gradient(180deg,rgba(7,9,12,.1),rgba(7,9,12,.55))}

/* ---------- estrutura: trilho e barra flutuam em vidro ---------- */
@media (min-width:901px){
  :root[data-visual="vidro"] .app{grid-template-columns:252px 1fr}
  :root[data-visual="vidro"] .trilho{margin:14px 0 14px 14px;top:14px;height:calc(100vh - 28px);height:calc(100dvh - 28px);
    border-radius:26px;background:var(--trilho);border:1px solid var(--linha);
    backdrop-filter:blur(30px) saturate(150%);-webkit-backdrop-filter:blur(30px) saturate(150%);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 30px 80px rgba(0,0,0,.35)}
  /* os itens do destino sobem para a pílula do topo (a mesma faixa do tablet) */
  :root[data-visual="vidro"] .trilho-itens{display:none}
  :root[data-visual="vidro"]:not([data-aparelho="toque"]) .faixa-destino{display:flex}
  :root[data-visual="vidro"] header.barra{margin:14px 18px 0;top:0;border-radius:22px;
    border:1px solid var(--linha)}
}
:root[data-visual="vidro"] .trilho nav a{border-radius:14px}
:root[data-visual="vidro"] .trilho nav a.ativo{box-shadow:inset 0 1px 0 rgba(255,255,255,.1)}
:root[data-visual="vidro"] .trilho nav a.trilho-destino.ativo::before{left:-8px;height:22px;width:3px;background:var(--marca);
  box-shadow:0 0 12px var(--marca)}
:root[data-visual="vidro"] header.barra{background:rgba(10,14,19,.5);
  backdrop-filter:blur(28px) saturate(150%);-webkit-backdrop-filter:blur(28px) saturate(150%);
  border-bottom:1px solid var(--linha);box-shadow:inset 0 1px 0 rgba(255,255,255,.05)}
:root[data-visual="vidro"] .busca-global{border-radius:999px;background:rgba(255,255,255,.06);border:1px solid var(--linha)}
:root[data-visual="vidro"] .busca-global:hover{background:rgba(255,255,255,.1)}
:root[data-visual="vidro"] .botao-tema{display:none!important}
:root[data-visual="vidro"] .novo-botao{background:var(--marca);color:#fff;border-radius:999px;
  box-shadow:0 8px 24px rgba(232,96,86,.35),inset 0 1px 0 rgba(255,255,255,.25)}
:root[data-visual="vidro"] .novo-botao:hover{background:#F0736A}
:root[data-visual="vidro"] .quem-sigla{background:linear-gradient(140deg,#5E9BD6,#155487)!important;color:#fff!important}

/* ---------- a pílula das abas (faixa do destino) ---------- */
:root[data-visual="vidro"]:not([data-aparelho="toque"]) .faixa-destino{position:relative;align-self:flex-start;gap:2px;margin:16px 0 0 32px;padding:5px;
  border-radius:999px;background:rgba(255,255,255,.05);border:1px solid var(--linha);
  max-width:calc(100% - 64px);overflow-x:auto;scrollbar-width:none;border-bottom:1px solid var(--linha)}
:root[data-visual="vidro"]:not([data-aparelho="toque"]) .faixa-destino::-webkit-scrollbar{display:none}
:root[data-visual="vidro"]:not([data-aparelho="toque"]) .faixa-destino a{position:relative;z-index:1;white-space:nowrap;padding:8px 16px;border-radius:999px;
  color:var(--tinta3);font-weight:500;font-size:14.5px;background:none;border:0;transition:color .3s;text-decoration:none}
:root[data-visual="vidro"]:not([data-aparelho="toque"]) .faixa-destino a:hover{color:var(--tinta)}
:root[data-visual="vidro"]:not([data-aparelho="toque"]) .faixa-destino a.ativo{color:var(--tinta);background:none}
:root[data-visual="vidro"]:not([data-aparelho="toque"]) .faixa-destino .vidro-pilula{position:absolute;z-index:0;top:5px;bottom:5px;left:0;width:0;border-radius:999px;
  background:rgba(255,255,255,.13);box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 6px 18px rgba(0,0,0,.25);pointer-events:none}
:root[data-visual="vidro"]:not([data-aparelho="toque"]) .faixa-destino .bolha{background:var(--marca);color:#fff;border-radius:99px;padding:1px 7px;font-size:11px;margin-left:4px}

/* ---------- conteúdo ---------- */
:root[data-visual="vidro"] main{padding:22px 32px 40px}
:root[data-visual="vidro"] main h1{font-weight:500;letter-spacing:-.025em}
:root[data-visual="vidro"] .card{border-radius:18px;box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
  transition:border-color .25s,box-shadow .25s,transform .35s var(--mola),background .25s}
:root[data-visual="vidro"] .card:hover{border-color:rgba(255,255,255,.2);background:rgba(255,255,255,.07);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 14px 34px rgba(0,0,0,.28);transform:translateY(-2px)}
:root[data-visual="vidro"] .coluna{background:rgba(255,255,255,.03);border-radius:22px}
:root[data-visual="vidro"] .coluna > header{border-radius:22px 22px 0 0}

/* botões: pílula; a ação principal é clara, o "perigo" é coral */
:root[data-visual="vidro"] button:not(.fantasma):not(.gatilho),
:root[data-visual="vidro"] .botao{border-radius:999px}
:root[data-visual="vidro"] button.leve,:root[data-visual="vidro"] .botao.leve{background:rgba(255,255,255,.07);
  border:1px solid var(--linha)}
:root[data-visual="vidro"] button.leve:hover,:root[data-visual="vidro"] .botao.leve:hover{background:rgba(255,255,255,.12)}
:root[data-visual="vidro"] button.perigo,:root[data-visual="vidro"] .botao.perigo{color:#fff}

/* campos (dono, 07/11/2026): caixa de vidro arredondada, borda que acende no passar e anel
   azul-ação no foco; `input` sem `type` entra (era a caixa quadrada do navegador). */
:root[data-visual="vidro"] input:not([type]),:root[data-visual="vidro"] input[type=text],
:root[data-visual="vidro"] input[type=email],
:root[data-visual="vidro"] input[type=password],:root[data-visual="vidro"] input[type=number],
:root[data-visual="vidro"] input[type=search],:root[data-visual="vidro"] input[type=tel],
:root[data-visual="vidro"] input[type=url],
:root[data-visual="vidro"] input[type=date],:root[data-visual="vidro"] input[type=time],
:root[data-visual="vidro"] select,:root[data-visual="vidro"] textarea{
  background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.12);border-radius:14px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
:root[data-visual="vidro"] input:not([type]):hover,:root[data-visual="vidro"] input[type=text]:hover,
:root[data-visual="vidro"] input[type=email]:hover,:root[data-visual="vidro"] input[type=search]:hover,
:root[data-visual="vidro"] input[type=number]:hover,:root[data-visual="vidro"] input[type=tel]:hover,
:root[data-visual="vidro"] select:hover,:root[data-visual="vidro"] textarea:hover{border-color:rgba(255,255,255,.2)}
:root[data-visual="vidro"] input::placeholder,:root[data-visual="vidro"] textarea::placeholder{color:var(--tinta4)}
:root[data-visual="vidro"] input:focus,:root[data-visual="vidro"] select:focus,:root[data-visual="vidro"] textarea:focus{
  border-color:rgba(127,179,230,.55);background:rgba(255,255,255,.08);outline:0;
  box-shadow:0 0 0 4px rgba(94,155,214,.18),inset 0 1px 0 rgba(255,255,255,.06)}
:root[data-visual="vidro"] select option{background:#161C24;color:#EEF2F6}

/* tabelas */
:root[data-visual="vidro"] table{border-collapse:separate;border-spacing:0}
:root[data-visual="vidro"] thead th{background:transparent;color:var(--tinta3)}
:root[data-visual="vidro"] tbody tr{transition:background .2s}
:root[data-visual="vidro"] tbody tr:hover{background:rgba(255,255,255,.04)}

/* ---------- superfícies que flutuam: vidro opaco o bastante para ler ---------- */
:root[data-visual="vidro"] .menu .lista,
:root[data-visual="vidro"] .avisos-barra .lista,
:root[data-visual="vidro"] .paleta .caixa,
:root[data-visual="vidro"] .gaveta .folha,
:root[data-visual="vidro"] dialog,
:root[data-visual="vidro"] [popover]{
  background:var(--vidro-solido)!important;
  backdrop-filter:blur(30px) saturate(150%);-webkit-backdrop-filter:blur(30px) saturate(150%);
  border:1px solid rgba(255,255,255,.14);box-shadow:0 40px 100px rgba(0,0,0,.6)}
:root[data-visual="vidro"] .menu .lista{border-radius:18px}
:root[data-visual="vidro"] .paleta .caixa{border-radius:24px}
:root[data-visual="vidro"] .gaveta .folha{border-radius:26px 0 0 26px}
:root[data-visual="vidro"] .paleta{background:rgba(5,7,10,.4);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}

/* ---------- toque (tablet e celular): o mesmo vidro, sem flutuar ---------- */
@media (max-width:900px){
  :root[data-visual="vidro"] .trilho{background:var(--vidro-solido);backdrop-filter:blur(30px);-webkit-backdrop-filter:blur(30px)}
  :root[data-visual="vidro"] .barra-toque{background:rgba(10,14,19,.7);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px)}
  :root[data-visual="vidro"] main{padding:16px}
}

/* no toque a faixa é a de sempre (texto com fio embaixo), em vidro */
:root[data-visual="vidro"][data-aparelho="toque"] .faixa-destino{background:rgba(10,14,19,.72);
  backdrop-filter:blur(24px) saturate(150%);-webkit-backdrop-filter:blur(24px) saturate(150%)}
:root[data-visual="vidro"][data-aparelho="toque"] header.barra{background:rgba(10,14,19,.72)}
:root[data-visual="vidro"][data-aparelho="toque"] .faixa-destino a.ativo::after{background:var(--marca)}

/* ---------- a porta (entrar, esqueci, nova senha): mesma marca, mesmo gesto ---------- */
:root[data-visual="vidro"] .entrada,
:root[data-visual="vidro"] .entrada.com-marca{background:transparent}
:root[data-visual="vidro"] .entrada-marca{background:transparent}
:root[data-visual="vidro"] .entrada-sinal-ranhuras rect{fill:rgba(255,255,255,.14)}
:root[data-visual="vidro"] .entrada.com-marca > .caixa,
:root[data-visual="vidro"] .entrada .caixa{background:rgba(14,19,26,.55);border:1px solid rgba(255,255,255,.12);
  border-radius:28px;box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 40px 100px rgba(0,0,0,.45);
  backdrop-filter:blur(30px) saturate(150%);-webkit-backdrop-filter:blur(30px) saturate(150%);
  padding:40px 36px;margin:auto 0;
  animation:vidro-porta .8s cubic-bezier(.2,.8,.2,1) .15s backwards}
@keyframes vidro-porta{from{opacity:0;transform:translateY(18px) scale(.985);filter:blur(10px)}}
:root[data-visual="vidro"] .porta-caixa input[type=text],:root[data-visual="vidro"] .porta-caixa input[type=email],
:root[data-visual="vidro"] .porta-caixa input[type=password]{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:14px}
:root[data-visual="vidro"] .porta-caixa input:focus{border-color:rgba(255,255,255,.35);box-shadow:0 0 0 4px rgba(94,155,214,.2)}
:root[data-visual="vidro"] .entrada button[type=submit]{background:var(--marca);color:#fff;border-radius:999px;
  box-shadow:0 10px 28px rgba(232,96,86,.35),inset 0 1px 0 rgba(255,255,255,.25)}
:root[data-visual="vidro"] .entrada button[type=submit]:hover{background:#F0736A}
:root[data-visual="vidro"] .porta-caixa .porta-opcao{border-radius:16px}
:root[data-visual="vidro"] #quem-time:checked ~ .porta-escolha [for=quem-time],
:root[data-visual="vidro"] #quem-cliente:checked ~ .porta-escolha [for=quem-cliente]{background:rgba(255,255,255,.1);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1)}
:root[data-visual="vidro"] .porta-botao,:root[data-visual="vidro"] .chave-entrar{border-radius:999px}

/* ---------- toque: menos vidro em tempo real (desempenho no celular) ---------- */
:root[data-visual="vidro"][data-aparelho="toque"] header.barra,
:root[data-visual="vidro"][data-aparelho="toque"] .faixa-destino,
:root[data-visual="vidro"][data-aparelho="toque"] .barra-toque{backdrop-filter:none;-webkit-backdrop-filter:none;
  background:rgba(12,16,22,.94)}
:root[data-visual="vidro"][data-aparelho="toque"] .trilho{backdrop-filter:none;-webkit-backdrop-filter:none;background:#10151C}
:root[data-visual="vidro"][data-aparelho="toque"] .card:hover{transform:none}

/* ---------- entrada da página (vidro.js marca e solta) ---------- */
:root[data-visual="vidro"].vidro-saindo main{opacity:0;filter:blur(12px);transform:scale(.995);
  transition:opacity .18s cubic-bezier(.4,0,1,1),filter .18s,transform .18s}
@media (prefers-reduced-motion:reduce){
  :root[data-visual="vidro"].vidro-saindo main{opacity:1;filter:none;transform:none}
}

/* Correções da varredura (05/11): botão claro continua claro onde outra folha
   trocava só o fundo; o gravar do comercial volta à tinta clara. */
:root[data-visual="vidro"] .lp-botao,:root[data-visual="vidro"] .camera-curta.lp-botao{background:#EEF2F6;color:#0B0F14}
:root[data-visual="vidro"] .lp-botao:hover{background:#fff}

/* Botão secundário (.leve) é vidro claro sobre o escuro: a tinta é sempre a
   clara, mesmo onde a folha da tela pintou o botão primário com a cor do painel
   (o `:not(#_)` ganha de qualquer seletor de tela). Cobrança · Dispensar, 06/11. */
:root[data-visual="vidro"] :is(button,.botao).leve:not(#_){color:var(--tinta)}

/* Contagem de avisos na barra (no toque é um selo sobre o ícone): branco no coral. */
:root[data-visual="vidro"] .avisos-barra .gatilho .conta:not(:empty):not(#_){background:var(--marca);color:#fff;box-shadow:0 0 0 2px #0C1016}

/* >>> tinta-sobre-painel */
/* GERADO (gerar.py): onde a folha usa a cor do painel como tinta, o vidro
   (painel transparente) apagaria o texto. Aqui ela volta a ser sólida. */
:root[data-visual="vidro"] ::selection,
:root[data-visual="vidro"] [data-dica]:hover::after,
:root[data-visual="vidro"] .movendo,
:root[data-visual="vidro"] .medir button,
:root[data-visual="vidro"] .travar button,
:root[data-visual="vidro"] a.marca-check.pede:hover,
:root[data-visual="vidro"] .avisos-barra .lista .secao .conta,
:root[data-visual="vidro"] .avisos-barra .lista .secao.decisao .conta,
:root[data-visual="vidro"] .avisos-barra .lista .secao.trabalho .conta,
:root[data-visual="vidro"] .avisos-barra .lista .secao.risco .conta,
:root[data-visual="vidro"] .avisos-barra .estreito .gatilho .conta,
:root[data-visual="vidro"] .adm-tela .linha-form button,
:root[data-visual="vidro"] .adm-tela .carimbo-nivel button[aria-pressed="true"],
:root[data-visual="vidro"] .adm-tela .aviso.convite button,
:root[data-visual="vidro"] .porta-botao,
:root[data-visual="vidro"] .fin-tela .linha-form button,
:root[data-visual="vidro"] .urg-botao,
:root[data-visual="vidro"] .urg-tempo-ok,
:root[data-visual="vidro"] .calendario .dia.hoje .numero,
:root[data-visual="vidro"] .ini-dia-hoje .ini-dia-num b,
:root[data-visual="vidro"] .acaogrande,
:root[data-visual="vidro"] .aceite details.recusa button,
:root[data-visual="vidro"] .ofi-passo[data-passo="agora"] .ofi-passo-n,
:root[data-visual="vidro"] .acaogrande.ok,
:root[data-visual="vidro"] .travar button.perigo,
:root[data-visual="vidro"] details.travar.atribuir button,
:root[data-visual="vidro"] .carimbo-tentar,
:root[data-visual="vidro"] button.grandao,
:root[data-visual="vidro"] a.grandao,
:root[data-visual="vidro"] .fita-passos a.ativo,
:root[data-visual="vidro"] .escala-condicao .op.on span,
:root[data-visual="vidro"] .escala-condicao .op input:checked+span,
:root[data-visual="vidro"] .vist-rascunho button,
:root[data-visual="vidro"] .vis-gravar,
:root[data-visual="vidro"] .vist-atip-recado,
:root[data-visual="vidro"] .lp-botao,
:root[data-visual="vidro"] .os-fiscal[open]>summary .botao,
:root[data-visual="vidro"] .pt-relogio a.on,
:root[data-visual="vidro"] .pt-filtro.on,
:root[data-visual="vidro"] .pt-filtro.on b,
:root[data-visual="vidro"] .pt-mapa-dia.pt-hoje b{color:#0B0F14}
:root[data-visual="vidro"] .os-curva-ponto,
:root[data-visual="vidro"] .pcp-tela .prod-trilho{stroke:#141A22}
:root[data-visual="vidro"] .os-curva-desta .os-curva-ponto{fill:#141A22}
/* <<< tinta-sobre-painel */

:root[data-visual="vidro"] .botao-visual{background:rgba(255,255,255,.07);border:1px solid var(--linha);color:var(--tinta)}
:root[data-visual="vidro"] .botao-visual:hover{background:rgba(255,255,255,.13)}
:root[data-visual="vidro"][data-aparelho="toque"].vidro-saindo main{filter:none}
:root[data-visual="vidro"] .com-tela .vis-gravar:not([data-gravando]){color:var(--tinta)}

/* Cor da etapa nas colunas dos quadros (como no teste aprovado): a coluna ganha
   um véu da cor no topo e o ponto no nome. A ordem das cores segue a da coluna. */
:root[data-visual="vidro"] .coluna:nth-child(6n+1){--etapa:#5E9BD6}
:root[data-visual="vidro"] .coluna:nth-child(6n+2){--etapa:#7FA7B8}
:root[data-visual="vidro"] .coluna:nth-child(6n+3){--etapa:#C9A15A}
:root[data-visual="vidro"] .coluna:nth-child(6n+4){--etapa:#E86056}
:root[data-visual="vidro"] .coluna:nth-child(6n+5){--etapa:#4CC38A}
:root[data-visual="vidro"] .coluna:nth-child(6n+6){--etapa:#A08BD0}
:root[data-visual="vidro"] .coluna{background:linear-gradient(180deg,color-mix(in srgb,var(--etapa,#5E9BD6) 18%,transparent),rgba(255,255,255,.025) 260px);
  border-color:color-mix(in srgb,var(--etapa,#5E9BD6) 22%,transparent)}
:root[data-visual="vidro"] .coluna > header{border-bottom-color:color-mix(in srgb,var(--etapa,#5E9BD6) 35%,transparent)}
:root[data-visual="vidro"] .coluna .nome::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:8px;
  vertical-align:middle;background:var(--etapa,#5E9BD6);box-shadow:0 0 10px var(--etapa,#5E9BD6)}