/* ══════════════════════════════════════════
   LEDMATRIX — Agência Luthini
   ══════════════════════════════════════════ */
:root{
  --bg:#08060f;
  --card:rgba(12,9,20,.94);
  --linha:rgba(168,85,247,.28);
  --linha-forte:rgba(196,160,255,.55);
  --roxo:#a855f7;
  --roxo-esc:#8a2be2;
  --texto:#f0edf7;
  --dim:#a196bd;
  --verde:#00d68f;
  --ambar:#ffb020;
  --vermelho:#ff5544;
  --azul:#4ab8ff;
  --r:12px;
  --r-lg:14px;      /* cards principais */
  --r-md:10px;      /* box, sub-bloco, tela-item, saída-box */
  --r-sm:8px;       /* inputs, checks, botões pequenos */
  --pad-card:15px;   /* valor único — antes havia um 18px aqui e um 15px !important lá embaixo brigando */
  --pad-box:12px 14px;
  --font-tit:'Space Grotesk','Inter',sans-serif;   /* títulos e cabeçalhos */
  --font-corpo:'Inter',-apple-system,system-ui,sans-serif; /* corpo/rótulos */
  --font-num:'JetBrains Mono',monospace;            /* números/valores técnicos */
}
*{margin:0;padding:0;box-sizing:border-box;font-family:'Inter',-apple-system,system-ui,sans-serif;min-width:0;}

/* ⭐ REGRA DE OURO: todo SVG solto tem tamanho fixo. Fim dos ícones gigantes. */
svg.i{width:14px;height:14px;flex-shrink:0;display:inline-block;vertical-align:-2px;}
.box-st svg.i,.box-tit svg.i{width:14px;height:14px;}
.btn svg.i{width:15px;height:15px;}
.b3d svg.i{width:13px;height:13px;}
.info-title svg.i{width:16px;height:16px;}
.campo-tit svg.i{width:17px;height:17px;}
.campo-ação svg.i{width:13px;height:13px;margin-top:3px;}
.grid-ok svg.i{width:14px;height:14px;}
.ico-info svg.i{width:16px;height:16px;}
.btn-ico svg.i{width:15px;height:15px;}
.saída-alerta svg.i,.alerta svg.i,.res-warn svg.i{width:13px;height:13px;margin-top:2px;}
.tag svg.i{width:11px;height:11px;}
.proc-del svg.i{width:14px;height:14px;}

body{
  background:var(--bg); color:var(--texto);
  display:flex; flex-direction:column; align-items:center;
  min-height:100vh; padding:16px 20px 0;
  overflow-wrap:break-word;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}
/* ⭐ NOVO: no celular o conteúdo ficava quase colado na borda da tela —
   respiro lateral extra só abaixo de 400px, sem mexer no zoom responsivo
   que já existe pra desktop/tablet. */
@media (max-width:400px){
  body{ padding-left:18px; padding-right:18px; }
  .container{ padding:0 2px; }
}
label,.box-lbl,.box-txt,.hint,.box-st{ white-space:normal; word-break:normal; }
#rgbCanvas{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;}
.container{width:100%;max-width:520px;position:relative;z-index:1;display:flex;flex-direction:column;gap:18px;}

/* ── ESCALA RESPONSIVA (item 2) ──────────────────────────────────────
   O app inteiro foi desenhado em px pequenos e fixos, pensado pro celular
   (container de 520px). Em desktop isso ficava minúsculo — só dava pra ler
   forçando zoom manual do navegador (175%, confirmado pelo Yago). Em vez
   de reescrever centenas de regras px → rem uma por uma (alto risco de
   quebrar alguma sem poder testar ao vivo), aplicamos a MESMA técnica que
   o navegador já usa no zoom manual — a propriedade CSS "zoom" — só que
   automática, embutida no próprio app. Ela escala a página inteira
   (fontes, paddings, bordas, gaps) numa tacada só, incluindo os modais
   fixos e os canvas do 3D/mini-grid (que já leem coordenadas na escala
   zoomada, porque é assim que já funciona hoje com o zoom manual do
   Yago — testado e comprovado por ele mesmo no uso diário). No celular
   (abaixo de 700px) fica em 1 — exatamente como já era, sem mudar nada.
   Navegador sem suporte a "zoom" simplesmente ignora a regra e mantém o
   tamanho de hoje — não piora nada, só não ganha o aumento. */
/* ⭐ 04/08 — REMOVIDO POR COMPLETO. Três tentativas diferentes de
   neutralizar o zoom (resetar via JS, mover de html pra #appContainer,
   separar scroll de centralização) não resolveram o checkout esticado.
   A hipótese agora é que "zoom" em QUALQUER elemento da página confunde
   o Chrome pro cálculo de TODOS os position:fixed da página, não só os
   que estão dentro do elemento zoomado — por isso nada que eu fizesse
   "por dentro" resolvia. Tirando o zoom de vez: o dashboard fica no
   tamanho normal (1x) em telas largas em vez de ampliado — é uma perda
   cosmética, não um bug. Volto a pensar num jeito seguro de reintroduzir
   esse aumento (provavelmente via transform:scale, que não tem esse
   efeito colateral) depois de confirmar que o checkout ficou 100% ok.
@media (min-width:700px){  #appContainer{ zoom:1.3;  } }
@media (min-width:1100px){ #appContainer{ zoom:1.5;  } }
@media (min-width:1600px){ #appContainer{ zoom:1.65; } }
*/

/* ── TOPO ── */
.topo{text-align:center;padding:6px 0 4px;}
h1{
  font-family:var(--font-tit);font-weight:700;
  font-size:clamp(28px,8vw,36px);text-transform:uppercase;letter-spacing:5px;
  color:#c084fc;line-height:1;
  text-shadow:0 0 24px rgba(167,80,240,.55);
  animation:pulse 4s ease-in-out infinite;
}
@keyframes pulse{0%,100%{text-shadow:0 0 20px rgba(167,80,240,.5)}50%{text-shadow:0 0 34px rgba(200,130,255,.9)}}
.sub{font-size:10px;color:var(--dim);text-transform:uppercase;letter-spacing:2.5px;font-weight:600;margin-top:6px;}

/* ── CARD ── */
.card{
  background:var(--card); backdrop-filter:blur(14px);
  border:1px solid var(--linha); border-radius:var(--r-lg);
  padding:var(--pad-card); display:flex; flex-direction:column; gap:14px;
}
.card-pro{border-color:rgba(138,43,226,.42);}
.card-master{border-color:var(--linha-forte);background:rgba(15,10,26,.96);}
.head{display:flex;justify-content:space-between;align-items:center;gap:10px;}
h2{
  font-family:var(--font-tit);
  font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:2px;
  color:#fff;display:flex;align-items:center;gap:6px;
}
h3{
  font-family:var(--font-tit);
  font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:1.8px;
  color:var(--roxo);margin-top:10px;padding-top:16px;
  border-top:1px solid rgba(138,43,226,.16);
  display:flex;align-items:center;gap:6px;
}
.selo{
  background:linear-gradient(135deg,#5b0fa8,#8a2be2);color:#fff;
  padding:3px 9px;border-radius:5px;font-size:9px;font-weight:800;letter-spacing:1.2px;
  flex-shrink:0;
}
.sub-bloco{
  display:flex;flex-direction:column;gap:12px;
  padding:var(--pad-box);border-radius:var(--r-md);
  background:rgba(138,43,226,.05);border:1px solid rgba(138,43,226,.14);
}

/* Blocos de estrutura precisam de respiro interno entre as caixas */
#blocoVoado,#blocoArara,#blocoParede,#fibraResultado{ display:flex; flex-direction:column; gap:12px; }
#blocoCamera{ gap:12px; }

/* Card compacto: barra slim só com título + botão */
.card-compact{ padding:0 16px; gap:0; }
.card-compact .head{ min-height:50px; margin:0; }
.card-compact > .sub-bloco{ margin:2px 0 16px; }

/* ── GRIDS UNIFORMES ── */
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:start;}
.grid3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;align-items:start;}
.grid4{display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:12px;align-items:start;}   /* ⭐ NOVO: resumo geral do projeto (Telas/Peso/Resolução/Área) */
.grid2>*,.grid3>*,.grid4>*{min-width:0;}   /* ⭐ NOVO: sem isso, texto/número longo estoura a coluna do grid em telas estreitas */
@media (max-width:400px){ .grid3,.grid4{grid-template-columns:1fr 1fr;} }
@media (max-width:300px){ .grid2,.grid3,.grid4{grid-template-columns:1fr;} }   /* ⭐ NOVO: telas muito estreitas empilham em 1 coluna, sem exceção */
.grid2-solo{grid-template-columns:1fr !important;}   /* mantido: usado em outros lugares quando só sobra 1 item num grid2 */

/* ⭐ REVISÃO (padronização geral): a versão anterior usava align-items:stretch
   "de propósito" pra fileira ficar com borda de baixo alinhada — só que isso
   é exatamente o que causa "caixa enorme pra conteúdo pequeno" quando a
   caixa vizinha tem mais texto (rótulo de 2 linhas, texto de ajuda, etc).
   Regra única agora: align-items:start SEMPRE, e é o .box (min-height fixo
   abaixo) que garante caixas do mesmo tamanho — não o esticamento da grade.
   Isso também é aplicado sem exceção pela regra !important no bloco
   "CONSOLIDADO" mais abaixo neste arquivo — ambas foram sincronizadas pra
   não voltarem a divergir. */

/* ── LINKS DE NUVEM — discretos, sem caixa, com ícone ── */
.nuvem-links{display:flex;gap:22px;justify-content:center;flex-wrap:wrap;padding:2px 0 4px;}
.link-nuvem{background:none;border:none;padding:6px 4px;margin:0;color:var(--roxo);font-size:11.5px;font-weight:700;display:inline-flex;align-items:center;gap:6px;cursor:pointer;}
.link-nuvem:hover{color:#fff;}
.link-nuvem svg{width:15px;height:15px;flex-shrink:0;}

/* ── CAMPOS ── */
.campo{display:flex;flex-direction:column;gap:5px;}
label{
  font-size:10.5px;font-weight:600;color:#c4b8dc;line-height:1.45;
  display:flex;align-items:center;gap:5px;flex-wrap:wrap;
}
input,select,textarea{
  width:100%;padding:11px 12px;
  background:rgba(0,0,0,.5);border:1px solid rgba(138,43,226,.22);
  color:#fff;border-radius:var(--r-sm);outline:none;
  font-size:13.5px;font-weight:600;
  transition:border-color .15s;
}
select{
  appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--roxo) 50%),linear-gradient(135deg,var(--roxo) 50%,transparent 50%);
  background-position:calc(100% - 16px) 50%, calc(100% - 11px) 50%;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;
  padding-right:32px;
  /* BUG CORRIGIDO: text-overflow:ellipsis não fazia nada sem estes dois —
     o texto ficava cortado sem "…", com a última letra bem em cima da
     setinha, parecendo sobreposição (ex: "SCREEN / House Mix — telã"). */
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
input:focus,select:focus,textarea:focus{border-color:rgba(167,139,250,.75);box-shadow:0 0 0 3px rgba(138,43,226,.14);}
select option,select optgroup{background:#0d0a1a;color:#fff;}
select optgroup{color:var(--roxo);font-weight:700;}
input[readonly]{background:rgba(255,255,255,.03);color:#6d6480;border-color:transparent;}
input[type="file"]{padding:8px;font-size:11px;font-weight:500;}
textarea{resize:vertical;font-weight:500;line-height:1.6;}

.check{
  display:flex;align-items:center;gap:10px;
  padding:var(--pad-box);border-radius:var(--r-sm);
  background:rgba(138,43,226,.06);border:1px solid rgba(138,43,226,.16);
  cursor:pointer;
}
.check input{width:auto;flex-shrink:0;transform:scale(1.2);accent-color:var(--roxo-esc);margin:0;padding:0;}
.check span{font-size:12px;font-weight:600;color:#ddd;line-height:1.4;display:flex;align-items:center;gap:5px;flex-wrap:wrap;}
.checks{display:grid;grid-template-columns:1fr 1fr;gap:8px;}

/* ── BOX — compacta e PERFILADA ──────────────────────────────
   Regra: dentro de uma mesma fileira, todas as caixas têm a MESMA
   altura e os números alinham na MESMA linha horizontal. Isso se
   consegue reservando altura fixa pro rótulo (2 linhas), senão um
   rótulo curto ("Consumo") deixa a caixa mais baixa que a vizinha
   de rótulo longo ("Potência aparente") e a fileira fica torta.
   Padding enxuto pra número curto não morar numa caixa enorme. */
.box{
  background:rgba(6,5,12,.9);
  border:1px solid rgba(138,43,226,.15);
  border-radius:var(--r-md); padding:9px 11px;
  display:flex; flex-direction:column; gap:3px;
  justify-content:flex-start;
  min-height:74px;   /* ⭐ PADRONIZAÇÃO: piso de altura único pra toda caixa .box do
     app — rótulo (2 linhas reservadas) + valor + padding cabem exatos nisso.
     Caixa com pouco conteúdo pára aqui; caixa com mais conteúdo cresce além
     disso normalmente. É essa regra, e não o esticamento da grade, que faz
     as caixas da mesma fileira parecerem do mesmo tamanho. */
}
.box-pro{background:rgba(6,5,12,.9);border-color:rgba(138,43,226,.15);}
.box-destaque{background:rgba(138,43,226,.08);border-color:rgba(138,43,226,.32);}
.box-erro{background:rgba(180,40,40,.09);border-left:3px solid var(--vermelho);}
.box-ok{background:rgba(0,180,120,.08);border-left:3px solid var(--verde);}
.box-aviso{background:rgba(200,140,0,.08);border-left:3px solid var(--ambar);}
.box-info{background:rgba(0,150,220,.08);border-left:3px solid var(--azul);}
.box-cam{background:rgba(0,140,220,.07);border-left:3px solid var(--azul);gap:10px;}

.box-lbl{
  font-size:9px;color:var(--dim);text-transform:uppercase;letter-spacing:.7px;
  font-weight:700;line-height:1.35;
  display:flex;align-items:flex-start;gap:4px;flex-wrap:wrap;
  overflow-wrap:break-word;hyphens:none;
  min-height:2.7em;   /* ⭐ 2 linhas reservadas: alinha o número das caixas irmãs */
}
.box-val{
  font-family:'JetBrains Mono',monospace;
  font-size:17px;font-weight:700;color:var(--roxo);
  line-height:1.3;letter-spacing:-.4px;
  font-variant-numeric:tabular-nums;
  word-break:break-word;
}
.box-val small{font-size:12px;color:var(--dim);font-weight:600;margin-left:2px;font-family:'Inter',sans-serif;}
.box-val-sm{font-family:'JetBrains Mono',monospace;font-size:15px;font-weight:700;color:#d8c8ff;line-height:1.35;font-variant-numeric:tabular-nums;}
.box-val-g{font-size:24px;font-weight:800;color:var(--roxo);line-height:1.2;font-family:'JetBrains Mono',monospace;letter-spacing:-.5px;}
.box-txt{font-size:11.5px;color:#b8adcc;line-height:1.7;}
.box-txt.dim{color:#7d7292;font-size:10.5px;}
.box-tit{font-size:11px;font-weight:800;color:#fff;display:flex;align-items:center;gap:6px;line-height:1.4;}
.box-st{
  font-size:11px;font-weight:700;line-height:1.55;
  display:flex;align-items:flex-start;gap:6px;margin-top:3px;
}
.hint{font-size:10.5px;color:#7a6f92;line-height:1.65;}
.hint.ok{color:var(--verde);display:flex;align-items:center;gap:5px;}
.vazio{color:#5f5773;font-size:12px;text-align:center;padding:20px;}

/* ── ÍCONES SVG ── */
.ico{display:inline-flex;width:15px;height:15px;flex-shrink:0;vertical-align:-2px;}
.ico svg{width:100%;height:100%;}
.ico-info{
  display:inline-flex;align-items:center;justify-content:center;
  width:16px;height:16px;flex-shrink:0;padding:0;
  background:none;border:none;cursor:pointer;
  color:var(--roxo);opacity:.75;transition:all .15s;
  vertical-align:-3px;
}
.ico-info svg{width:100%;height:100%;}
.ico-info:hover{opacity:1;transform:scale(1.18);}
.sw{display:inline-block;width:11px;height:11px;border-radius:2px;vertical-align:-1px;}
.sw-base{background:rgba(60,40,110,.7);border:1px solid #4455aa;}
.sw-sub{background:hsla(318,70%,50%,.5);border:1px solid hsl(315,70%,55%);}

/* ── BOTÕES ── */
.btn{
  width:100%;padding:13px;border-radius:var(--r-md);cursor:pointer;
  font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:1.3px;
  display:flex;align-items:center;justify-content:center;gap:7px;
  transition:transform .1s;border:1px solid transparent;
}
.btn:active{transform:scale(.985);}
.btn-linha{background:transparent;color:var(--roxo);border-color:rgba(167,139,250,.45);}
.btn-linha:hover{background:rgba(167,139,250,.08);}
.btn-verde{background:transparent;color:var(--verde);border-color:rgba(0,214,143,.45);}
.btn-verde:hover{background:rgba(0,214,143,.08);}
.btn-fraco{background:transparent;color:#6f6689;border:1px dashed rgba(138,43,226,.3);font-size:11px;}
.btn-fraco:hover{color:var(--roxo);border-color:rgba(167,139,250,.5);}

/* ⭐ DESTAQUE — reservado só pro recurso-assinatura do app (Resolume XML).
   Âmbar é a única exceção à regra "cor só pra status": aqui marca "isso é
   especial", não um estado. Usar com moderação, só neste botão. */
.selo-destaque{
  display:inline-block;font-size:9px;font-weight:800;letter-spacing:1.4px;
  color:var(--ambar);background:rgba(255,176,32,.1);
  border:1px solid rgba(255,176,32,.35);border-radius:20px;
  padding:3px 10px;margin:2px 0 8px;
}
.btn-destaque{
  background:linear-gradient(135deg,rgba(255,176,32,.14),rgba(138,43,226,.22));
  border:1.5px solid var(--ambar);color:#ffd580;
  box-shadow:0 0 0 1px rgba(255,176,32,.08) inset;
}
.btn-destaque:hover{background:linear-gradient(135deg,rgba(255,176,32,.22),rgba(138,43,226,.3));}
.btn-pdf{
  background:linear-gradient(135deg,#3d1466,#5b0fa8,#7a1fd6);color:#fff;
  border-color:rgba(167,139,250,.4);padding:15px;font-size:13px;
}
.btn-salvar{
  background:linear-gradient(135deg,#5b0fa8,#8a2be2,#b44aff);
  background-size:200%;animation:grad 4s ease infinite;
  color:#fff;padding:17px;font-size:13px;letter-spacing:1.8px;
  box-shadow:0 6px 22px rgba(138,43,226,.32);
}
@keyframes grad{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
.btn-mini{
  background:rgba(138,43,226,.16);color:var(--roxo);
  border:1px solid rgba(138,43,226,.35);border-radius:7px;
  padding:5px 12px;font-size:10px;font-weight:700;cursor:pointer;
  text-transform:uppercase;letter-spacing:1px;white-space:nowrap;
}
.btn-link{
  background:none;border:none;color:var(--roxo);
  font-size:11px;font-weight:700;cursor:pointer;
  text-decoration:underline;text-underline-offset:3px;
  padding:6px 0;text-align:left;
}
.btn-ico{
  width:32px;height:32px;border-radius:8px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  border:1px solid transparent;padding:0;
}
.btn-ico .ico,.btn-ico svg{width:15px;height:15px;}
.btn-ico-edit{background:rgba(138,43,226,.16);color:var(--roxo);border-color:rgba(138,43,226,.35);}
.btn-ico-del{background:rgba(180,40,30,.16);color:#ff7766;border-color:rgba(200,60,50,.35);}

/* ── LISTA DE TELAS ── */
.tela-item{
  background:rgba(138,43,226,.06);
  border:1px solid rgba(138,43,226,.2);
  border-radius:var(--r-md);padding:var(--pad-box);
  display:flex;gap:10px;align-items:flex-start;
}
.tela-editando{background:rgba(138,43,226,.2);border-color:var(--roxo);}
.tela-info{flex:1;display:flex;flex-direction:column;gap:5px;}
.tela-topo{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.tela-nome{font-size:15px;font-weight:800;color:#fff;}
.tela-sub{font-size:11px;color:var(--roxo);font-weight:700;}
.tela-dados{display:grid;grid-template-columns:repeat(3,1fr);gap:6px 10px;margin-top:2px;}
.tela-dados>*{min-width:0;}
.tela-dados span{font-size:10.5px;color:var(--dim);white-space:normal;overflow-wrap:break-word;line-height:1.4;}
.tela-dados b{color:#e0d4f8;font-weight:800;font-size:12px;display:block;}
@media (max-width:360px){ .tela-dados{grid-template-columns:repeat(2,1fr);} }
.tela-mont{font-size:10px;color:#6d6484;line-height:1.5;}
.tela-edit{font-size:9.5px;font-weight:800;color:var(--ambar);letter-spacing:1px;}
.tela-ações{display:flex;flex-direction:column;gap:6px;flex-shrink:0;}
.tag{
  display:inline-flex;align-items:center;gap:4px;
  font-size:9px;font-weight:800;letter-spacing:.8px;
  padding:3px 7px;border-radius:5px;
}
.tag-cam{background:rgba(74,184,255,.14);color:var(--azul);border:1px solid rgba(74,184,255,.3);}
.tag .ico{width:11px;height:11px;}
.aviso-edicao{
  background:rgba(255,176,32,.1);border-left:3px solid var(--ambar);
  color:#ffcc70;padding:10px 12px;border-radius:8px;font-size:11.5px;line-height:1.5;
}
.px-row-item{display:flex;align-items:center;gap:7px;padding:4px 0;border-top:1px solid rgba(138,43,226,.08);font-size:9.5px;flex-wrap:wrap;}
.px-row-item:first-child{border-top:none;}
.px-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0;}
.px-row-item b{color:#d9cdf0;font-weight:700;font-size:9.5px;}
.px-val{color:var(--dim);flex:1;min-width:0;}
.px-pct{color:#9c8fb8;font-weight:700;font-size:9px;flex-shrink:0;}

/* ── SAÍDAS ── */
/* ⭐ BUG CORRIGIDO: essas classes tinham "saida" sem acento aqui no CSS,
   mas o script.js sempre gerou o HTML com acento ("saída-box", "saída-btns"
   etc.) — como seletor CSS é sensível a acento, nada deste bloco nunca bateu
   com o HTML real, e os botões caíam no estilo branco padrão do navegador. */
.saída-box{border-radius:var(--r-md);padding:var(--pad-box);display:flex;flex-direction:column;gap:7px;}
.saída-ok{background:rgba(0,140,80,.08);border:1px solid rgba(0,190,110,.28);}
.saída-erro{background:rgba(180,40,40,.09);border:1px solid rgba(255,70,60,.35);}
.saída-head{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap;}
.saída-nome{font-size:12px;font-weight:800;color:var(--verde);}
.saída-erro .saída-nome{color:var(--vermelho);}
.saída-px{font-size:10.5px;color:var(--dim);display:flex;align-items:center;gap:4px;}
.saída-tela{display:flex;align-items:center;gap:8px;}
.saída-tela-nome{flex:1;font-size:11.5px;color:#ccc;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.saída-btns{display:flex;gap:4px;flex-shrink:0;}
.saída-btns button{
  background:rgba(138,43,226,.14);color:var(--roxo);
  border:1px solid rgba(138,43,226,.3);border-radius:6px;
  padding:4px 8px;font-size:10px;font-weight:700;cursor:pointer;
}
.btn-nova-saída{color:var(--azul)!important;border-color:rgba(74,184,255,.35)!important;}
.saída-alerta{
  background:rgba(255,60,60,.08);border-radius:7px;padding:9px;
  font-size:11px;color:#ffb0a8;line-height:1.65;
  display:flex;gap:6px;align-items:flex-start;
}

/* ── ALERTAS ── */
.alerta{
  padding:12px 13px;border-radius:9px;font-size:11.5px;line-height:1.7;
  display:flex;flex-direction:column;gap:3px;
}
.alerta-erro{background:rgba(200,40,40,.11);border-left:3px solid var(--vermelho);color:#ffb4ac;}
.alerta-aviso{background:rgba(200,140,0,.1);border-left:3px solid var(--ambar);color:#ffd490;}
.alerta b{color:#fff;}
#alertasSinal{display:flex;flex-direction:column;gap:8px;}

/* ── CARDS SÉRIE H ── */
.card-h-row{
  display:flex;justify-content:space-between;align-items:center;gap:10px;
  background:rgba(138,43,226,.07);border-radius:8px;padding:10px 12px;
}
.card-h-row b{color:#fff;font-size:11.5px;}
.card-h-desc{color:var(--dim);font-size:10px;line-height:1.5;display:block;margin-top:3px;}
.card-h-qtd{color:var(--roxo);font-size:17px;font-weight:800;flex-shrink:0;}

/* ── CARDS SÉRIE H — nota discreta (abaixo da Processadora MASTER) ── */
.cards-h-nota{
  margin:2px 0;padding:7px 9px;border-radius:7px;
  background:rgba(138,43,226,.03);border:1px dashed rgba(138,43,226,.18);
  display:flex;flex-direction:column;gap:3px;
}
.cards-h-nota .box-lbl{font-size:9px;}
.cards-h-nota .hint{font-size:8.5px;margin:0;line-height:1.35;}
.cards-h-linha{font-family:'JetBrains Mono',monospace;font-size:10.5px;font-weight:700;color:#c9b8ee;letter-spacing:-.2px;}

/* ── PROCESSADORAS ── */
.sub-card{
  background:rgba(138,43,226,.05);border:1px solid rgba(138,43,226,.2);
  border-radius:10px;padding:14px;display:flex;flex-direction:column;gap:10px;
}
.sub-head{display:flex;justify-content:space-between;align-items:center;gap:8px;}
.sub-tit{font-size:9.5px;font-weight:800;color:var(--roxo);text-transform:uppercase;letter-spacing:1.4px;}
.sub-tit-extra{display:block;font-size:8px;font-weight:600;color:#6f6689;text-transform:none;letter-spacing:.2px;margin-top:2px;}
.lista-proc{display:flex;flex-direction:column;gap:5px;min-height:14px;}
.proc-row{
  display:flex;justify-content:space-between;align-items:center;gap:8px;
  background:rgba(138,43,226,.08);border-radius:7px;padding:9px 11px;
}
.proc-role{font-size:9px;color:var(--dim);text-transform:uppercase;letter-spacing:1px;display:block;}
.proc-nome{font-size:12px;color:#fff;font-weight:600;}
.proc-del{background:none;border:none;color:#ff6655;cursor:pointer;padding:2px;display:flex;}
.proc-del svg{width:14px;height:14px;}
.form-proc{background:rgba(0,0,0,.32);border-radius:9px;padding:12px;display:flex;flex-direction:column;gap:9px;}
.btn-confirm{
  padding:11px;background:linear-gradient(135deg,#4a0080,#8a2be2);color:#fff;
  border:none;border-radius:8px;font-size:11px;font-weight:800;cursor:pointer;
  text-transform:uppercase;letter-spacing:1px;
}
.guia-box{background:rgba(0,0,0,.28);border-radius:9px;padding:13px;display:flex;flex-direction:column;gap:8px;}
.guia-tit{font-size:9.5px;font-weight:800;color:var(--roxo);text-transform:uppercase;letter-spacing:1.3px;}
.guia-item{font-size:11px;color:#a99cc0;line-height:1.75;}
.guia-item b{color:#e0d8f0;}

/* ── FIBRA ── */
.fib-step{
  display:flex;gap:11px;
  background:rgba(0,0,0,.26);border-radius:9px;padding:12px;
}
.fib-n{
  display:flex;align-items:center;justify-content:center;
  width:23px;height:23px;flex-shrink:0;border-radius:50%;
  background:var(--roxo-esc);color:#fff;font-size:11px;font-weight:800;
}
.fib-step div{font-size:11.5px;color:#a99cc0;line-height:1.75;}
.fib-step b{color:#fff;}
.fib-ouro{background:rgba(255,176,32,.08);border:1px solid rgba(255,176,32,.28);}
.fib-ouro .fib-n{background:var(--ambar);color:#1a1000;}
#fibraPassos{display:flex;flex-direction:column;gap:8px;}

/* ── MODAL ── */
.info-modal{
  position:fixed;inset:0;z-index:10000;
  background:rgba(4,2,10,.9);backdrop-filter:blur(8px);
  display:flex;align-items:center;justify-content:center;padding:16px;
  animation:fade .16s ease;
}
@keyframes fade{from{opacity:0}to{opacity:1}}
.info-box{
  background:#0e0b1a;border:1px solid rgba(167,139,250,.4);
  border-radius:14px;max-width:500px;width:100%;max-height:86vh;
  display:flex;flex-direction:column;
  box-shadow:0 24px 70px rgba(0,0,0,.9);
}
.info-head{
  display:flex;justify-content:space-between;align-items:flex-start;gap:12px;
  padding:18px 18px 13px;border-bottom:1px solid rgba(138,43,226,.18);
}
.info-title{color:#c9a8ff;font-size:14.5px;font-weight:800;line-height:1.4;display:flex;align-items:center;gap:8px;}
.info-title .ico{width:17px;height:17px;color:var(--verde);}
.info-close{background:none;border:none;color:#6f6689;cursor:pointer;padding:2px;display:flex;flex-shrink:0;}
.info-close svg{width:17px;height:17px;}
.info-close:hover{color:#fff;}
.info-body{padding:16px 18px;overflow-y:auto;flex:1;}
.info-body p{color:#d8d2e4;font-size:13px;line-height:1.8;margin-bottom:9px;}
.info-body p:last-child{margin-bottom:0;}
.info-body b{color:#fff;}

/* ── MODAL DE SOBRECARGA (item 1 — aviso antes de gerar o PDF) ── */
.modal-overlay{
  position:fixed;inset:0;z-index:100000;
  background:rgba(4,2,10,.9);backdrop-filter:blur(8px);
  display:flex;align-items:center;justify-content:center;padding:16px;
  animation:fade .16s ease;
}
.modal-card{
  background:#0e0b1a;border:1px solid rgba(255,176,32,.35);
  border-radius:var(--r-lg);max-width:min(460px,92vw);width:100%;max-height:86vh;
  display:flex;flex-direction:column;padding:20px;gap:12px;
  box-shadow:0 24px 70px rgba(0,0,0,.9);
}
.modal-head{display:flex;align-items:center;gap:10px;}
.modal-ico{width:22px;height:22px;flex-shrink:0;color:var(--ambar);}
.modal-ico svg{width:100%;height:100%;}
.modal-head h3{font-size:15px;font-weight:800;color:#fff;}
.modal-sub{font-size:12px;color:var(--dim);line-height:1.6;}
.modal-lista{display:flex;flex-direction:column;gap:8px;overflow-y:auto;max-height:44vh;}
.modal-item{
  display:flex;gap:9px;align-items:flex-start;
  background:rgba(255,176,32,.07);border:1px solid rgba(255,176,32,.25);
  border-radius:var(--r-sm);padding:10px 11px;
}
.modal-item svg.i{width:15px;height:15px;flex-shrink:0;margin-top:1px;color:var(--ambar);}
.modal-item-txt{display:flex;flex-direction:column;gap:2px;}
.modal-item-txt b{font-size:11px;color:#ffcf80;text-transform:uppercase;letter-spacing:.6px;}
.modal-item-txt span{font-size:12px;color:#e8e0f0;line-height:1.55;}
.modal-acoes{display:flex;gap:8px;margin-top:4px;}
.modal-acoes .btn{width:auto;flex:1;}
.info-body code{
  background:rgba(138,43,226,.16);padding:2px 6px;border-radius:4px;
  font-family:monospace;font-size:11.5px;color:#c9a8ff;
}
.info-ok{
  margin:0 18px 18px;padding:13px;
  background:linear-gradient(135deg,#5b0fa8,#8a2be2);color:#fff;
  border:none;border-radius:9px;font-size:12px;font-weight:800;
  text-transform:uppercase;letter-spacing:1.4px;cursor:pointer;
}
.res-step{color:#d8d2e4;font-size:12.5px;line-height:1.75;margin-bottom:10px;}
.res-path{
  background:rgba(138,43,226,.1);border-left:3px solid var(--roxo-esc);
  padding:9px 11px;border-radius:6px;margin-bottom:10px;
  font-size:11.5px;color:#c9a8ff;line-height:1.65;
}
.res-warn{
  background:rgba(255,176,32,.1);border-left:3px solid var(--ambar);
  padding:10px;border-radius:6px;color:#ffd490;font-size:11.5px;
  margin:12px 0;line-height:1.65;display:flex;gap:7px;align-items:flex-start;
}
.res-tit{
  color:var(--roxo);font-size:10px;font-weight:800;
  text-transform:uppercase;letter-spacing:1.4px;
  margin:16px 0 7px;padding-top:13px;border-top:1px solid rgba(138,43,226,.18);
}
.res-tit-sub{color:#8d84a5;font-size:11.5px;line-height:1.65;margin-bottom:9px;}
.res-tab{width:100%;border-collapse:collapse;font-size:11px;}
.res-tab th{background:rgba(138,43,226,.18);color:#c9a8ff;padding:7px 6px;text-align:left;font-size:9.5px;text-transform:uppercase;letter-spacing:.8px;}
.res-tab td{padding:7px 6px;border-bottom:1px solid rgba(138,43,226,.1);color:#b0a6c4;}
.res-tab td b{color:#fff;}

/* ── MAPEADOR ── */
.mini-grid{display:flex;justify-content:center;padding:12px;background:rgba(0,0,0,.3);border-radius:9px;overflow:auto;}
.grid-overlay{position:fixed;inset:0;z-index:9999;background:rgba(4,3,8,.97);display:flex;justify-content:center;padding:16px;overflow-y:auto;}
.grid-wrap{width:100%;max-width:620px;display:flex;flex-direction:column;gap:12px;}
.grid-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;}
.grid-title{color:var(--roxo);font-size:14px;font-weight:800;}
.grid-sub{color:var(--dim);font-size:11px;margin-top:5px;line-height:1.5;}
.grid-ok{
  background:linear-gradient(135deg,#6a0dad,#8a2be2);color:#fff;
  border:none;border-radius:9px;padding:12px 22px;
  font-size:12px;font-weight:800;cursor:pointer;flex-shrink:0;
  display:inline-flex;align-items:center;gap:7px;letter-spacing:1px;
  white-space:nowrap;width:auto;height:auto;
}
.grid-canvas{background:#07060e;border-radius:10px;border:1px solid #1e1a2c;overflow:auto;padding:12px;max-height:62vh;}
.gcell{
  border:1px solid #2a2438;background:rgba(30,20,60,.4);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;color:#5566bb;font-weight:800;box-sizing:border-box;
  transition:background .1s;
}
.gcell:hover{background:rgba(60,40,110,.6);}
.gcell-sub{border-color:hsl(315,70%,52%);background:hsla(318,70%,50%,.32);color:hsl(315,90%,84%);}
.gcell-sub:hover{background:hsla(318,70%,55%,.48);}
.grid-legend{display:flex;gap:20px;justify-content:center;font-size:11px;}
.lg-normal{color:#7788cc;display:flex;align-items:center;gap:6px;}
.lg-sub{color:hsl(315,80%,72%);display:flex;align-items:center;gap:6px;}
.grid-hint{color:#665e7c;font-size:10.5px;text-align:center;line-height:1.6;}

/* ── 3D ── */
.ov3d{position:fixed;inset:0;z-index:9999;background:var(--bg);display:flex;flex-direction:column;}
.ov3d-top{
  display:flex;justify-content:space-between;align-items:center;gap:10px;
  padding:10px 14px;background:rgba(138,43,226,.12);
  border-bottom:1px solid rgba(138,43,226,.28);flex-wrap:wrap;flex-shrink:0;
}
.ov3d-title{display:flex;flex-direction:column;gap:2px;}
.ov3d-title span:first-child{color:var(--roxo);font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:1.5px;}
.ov3d-sel{color:var(--verde);font-size:10px;min-height:13px;}
.ov3d-btns{display:flex;gap:5px;flex-wrap:wrap;}
.b3d{
  padding:8px 11px;background:rgba(138,43,226,.16);color:var(--roxo);
  border:1px solid rgba(138,43,226,.35);border-radius:7px;
  font-size:10px;font-weight:800;cursor:pointer;white-space:nowrap;
  display:flex;align-items:center;gap:5px;letter-spacing:.6px;
}
.b3d svg{width:13px;height:13px;}
.b3d-modo{background:rgba(167,139,250,.22);border-color:var(--roxo);color:#fff;}
.b3d-modo-on{background:rgba(0,214,143,.24);border-color:var(--verde);color:#00ffb0;}
.b3d-info{background:rgba(100,120,255,.14);color:#a8b4ff;border-color:rgba(100,120,255,.35);}
.b3d-cinza{background:transparent;color:#5f5773;border-color:#2a2438;}
.b3d-ok{background:linear-gradient(135deg,#4a0080,#8a2be2);color:#fff;border:none;padding:8px 18px;}
.ov3d-hint{background:rgba(0,0,0,.5);padding:7px 14px;font-size:10px;color:#7d7492;flex-shrink:0;line-height:1.5;}
.ov3d-wrap{position:relative;overflow:hidden;flex:none;}
.tut3d{
  position:fixed;top:74px;right:14px;
  width:min(340px,calc(100vw - 28px));max-height:76vh;overflow-y:auto;
  background:rgba(12,7,26,.98);border:1px solid rgba(138,43,226,.5);
  border-radius:12px;padding:16px;z-index:99999;
  font-size:12px;color:#cec6de;line-height:1.75;
  box-shadow:0 16px 50px rgba(0,0,0,.85);
}
.tut-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;}
.tut-head span{color:var(--roxo);font-weight:800;font-size:11.5px;text-transform:uppercase;letter-spacing:1px;}
.tut-head button{background:none;border:none;color:#6f6689;cursor:pointer;display:flex;padding:2px;}
.tut-head button svg{width:15px;height:15px;}
.tut-sec{
  color:var(--roxo);font-weight:800;font-size:9.5px;
  text-transform:uppercase;letter-spacing:1.2px;
  margin:14px 0 7px;padding-top:11px;border-top:1px solid rgba(138,43,226,.16);
}
.tut3d p{margin-bottom:7px;}
.tut-tab{width:100%;border-collapse:collapse;font-size:11.5px;}
.tut-tab td{padding:6px 4px;border-bottom:1px solid rgba(138,43,226,.1);}
.tut-tab td:first-child{color:#fff;width:46%;}
.tut-tab td:last-child{color:#948ba8;}
.toast{
  position:fixed;bottom:26px;left:50%;transform:translateX(-50%);
  background:rgba(138,43,226,.96);color:#fff;
  padding:13px 24px;border-radius:10px;
  font-size:12px;font-weight:700;z-index:99998;
  box-shadow:0 10px 30px rgba(0,0,0,.6);animation:fade .2s ease;
}

/* ── MODO CAMPO ── */
.campo-ov{position:fixed;inset:0;z-index:9999;background:#0a0714;display:flex;flex-direction:column;padding:16px;}
.campo-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:14px;flex-shrink:0;}
.campo-tit{color:var(--verde);font-size:16px;font-weight:900;display:flex;align-items:center;gap:8px;}
.campo-tit .ico{width:18px;height:18px;}
.campo-sub{color:#6f6689;font-size:10.5px;display:block;margin-top:4px;}
.campo-close{background:none;border:none;color:#6f6689;cursor:pointer;padding:4px;display:flex;}
.campo-close svg{width:20px;height:20px;}
.campo-busca{flex-shrink:0;margin-bottom:12px;border-color:rgba(0,214,143,.3);}
.campo-busca:focus{border-color:var(--verde);box-shadow:0 0 0 3px rgba(0,214,143,.12);}
.campo-tabs{display:flex;gap:8px;margin-bottom:12px;flex-shrink:0;}
.campo-tab{
  flex:1;padding:10px;border-radius:9px;cursor:pointer;text-align:center;
  background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.1);
  color:#948ba8;font-size:11px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;
}
.campo-tab-ativa{background:rgba(0,214,143,.12);border-color:var(--verde);color:var(--verde);}
.campo-item-faq{border-left-color:#9fc4ff;}
.campo-item-faq .campo-ação{color:#c2dcff;}
.campo-lista{overflow-y:auto;flex:1;padding-bottom:20px;display:flex;flex-direction:column;gap:9px;}
.campo-item{
  background:rgba(0,214,143,.04);border:1px solid rgba(0,214,143,.14);
  border-left:3px solid var(--verde);border-radius:9px;padding:13px;
  display:flex;flex-direction:column;gap:6px;
}
.campo-sintoma{color:#fff;font-size:13px;font-weight:800;line-height:1.4;}
.campo-causa{color:#948ba8;font-size:11px;line-height:1.65;}
.campo-causa b{color:var(--ambar);}
.campo-ação{color:#8fe8c0;font-size:11.5px;line-height:1.7;display:flex;gap:7px;align-items:flex-start;}
.campo-ação .ico{width:13px;height:13px;flex-shrink:0;margin-top:3px;}
.campo-teste{color:#9fc4ff;font-size:11px;line-height:1.65;display:flex;gap:7px;align-items:flex-start;margin-top:8px;padding-top:8px;border-top:1px dashed rgba(159,196,255,.25);}
.campo-teste .ico{width:12px;height:12px;flex-shrink:0;margin-top:3px;}
.campo-teste b{color:#c2dcff;}
.campo-badge{display:inline-block;background:linear-gradient(135deg,#5b0fa8,#8a2be2);color:#fff;font-size:8.5px;font-weight:800;letter-spacing:1px;padding:3px 8px;border-radius:5px;margin-bottom:8px;text-transform:uppercase;}
.campo-vazio{color:#5f5773;text-align:center;padding:30px;font-size:12px;}

/* ── RODAPÉ ── */
footer{
  margin:42px auto 34px;
  display:flex;align-items:center;gap:16px;
  background:rgba(10,7,20,.4);padding:14px 28px;border-radius:50px;
  border:1px solid rgba(138,43,226,.22);
  position:relative;z-index:1;
}
/* ⭐ BUG CORRIGIDO: logo pequena demais (36px) — sem destaque nenhum na
   pilula. Agora 58px (quase o dobro), opacidade cheia (era .9). */
.footer-logo{height:58px;width:auto;opacity:1;}
.footer-txt{display:flex;flex-direction:column;align-items:flex-start;gap:2px;}
.footer-p{font-size:9.5px;color:#6f6689;text-transform:uppercase;letter-spacing:1.6px;font-weight:600;}
.footer-marca{
  font-size:16px;font-weight:800;letter-spacing:2px;
  color:var(--roxo);text-transform:uppercase;
  animation:pulse 4s ease-in-out infinite;
}

/* ── DESKTOP ── */
@media (min-width:820px){
  .container{max-width:820px;}
  .grid3{grid-template-columns:repeat(3,1fr);}
  .grid4{grid-template-columns:repeat(4,1fr);}
}

/* ══════════════════════════════════════════════════════════════════
   CONSOLIDADO DO <style> INLINE QUE VIVIA NO index.html
   (item 12 — essas regras existiam soltas dentro do HTML, escritas por
   cima do style.css com !important pra furar cache. Movidas pra cá tal
   e qual, sem mudar nenhum valor, só tirando da bagunça do inline.
   Mantidas os !important aqui porque algumas ainda precisam vencer
   regras mais específicas declaradas antes neste mesmo arquivo.) ══ */
.card,.box,.sub-bloco,.tela-item{ contain:none !important; }
.box{ overflow:visible !important; }
.grid2,.grid3,.grid4{ align-items:start !important; }
.grid2{ gap:12px !important; } .grid3{ gap:12px !important; } .grid4{ gap:12px !important; }
#blocoVoado,#blocoArara,#blocoParede,#fibraResultado{ display:flex; flex-direction:column; gap:12px !important; }
#blocoCamera{ gap:12px !important; }
#listaTelas,#listaDistribuicao,#listaMultiProc{ display:flex; flex-direction:column; gap:12px !important; }
/* Minhas Placas / Sugerir Melhoria: barra fina, largura de conteúdo */
.card-compact{ padding:0 18px !important; gap:0 !important; width:fit-content !important; max-width:100% !important; }
.card-compact .head{ min-height:44px !important; margin:0 !important; }
.card-compact .head h2{ font-size:12px !important; }
.card-compact > .sub-bloco{ margin:0 0 16px !important; }
#projetoLogoStatus{ display:none !important; }
#projetoConteudo{ flex-direction:column !important; gap:14px !important; }
.btn + .btn{ margin-top:10px; }
.grid2 .btn + .btn{ margin-top:0; }
.card{ gap:10px !important; }
.sub-bloco{ padding:12px !important; gap:9px !important; }

@media (min-width:700px){
  #listaTelas,#listaDistribuicao,#listaMultiProc{
    display:grid !important; grid-template-columns:1fr 1fr !important; gap:12px !important; align-items:start;
  }
  /* ⭐ BUG DE ALINHAMENTO CORRIGIDO: aqui existia uma regra que, acima de
     700px, trocava a GRADE por flex-wrap com largura pelo conteúdo. Era a
     causa das "caixas desorganizadas" no desktop — cada caixa ficava de um
     tamanho, quebrando linha em lugar aleatório. A grade permanece grade em
     qualquer largura. */
  /* ⭐ PADRONIZAÇÃO GERAL: havia aqui uma regra que deixava os BOTÕES com
     largura pelo próprio conteúdo (min-width:220px) só no desktop — por
     isso "Gerar preset .xml do Resolume", "Gerar projeto SmartLCT (.srcx)"
     e "Exportar projeto (PDF)" saíam cada um com uma largura diferente.
     Removida: todo .btn agora fica 100% da largura do contêiner em
     qualquer tela, igual ao mobile — mesma altura, mesma largura, sem
     exceção (fora os pares intencionais, como Resolume+SmartLCT lado a
     lado, que herdam a largura da própria coluna do grid). */
}


/* ⭐ MOBILE: na coluna estreita alguns rótulos quebram em 3 linhas e o número
   descia, saindo do alinhamento da fileira. Reserva 3 linhas abaixo de 480px. */
@media (max-width:480px){
  .box-lbl{ min-height:3.9em; }
}

/* ══════════════════════════════════════════════════════════════
   RODADA A — COMPACTAÇÃO E PERFILAMENTO
   ══════════════════════════════════════════════════════════════ */

/* Botões: mais baixos e com texto menor. Antes ocupavam altura de
   caixa de conteúdo, competindo com a informação da tela. */
.btn{ padding:11px 14px !important; font-size:11.5px !important; letter-spacing:1.1px !important; }
.btn + .btn{ margin-top:7px !important; }
.btn-pdf{ padding:13px 14px !important; font-size:12.5px !important; }


/* Checkboxes gerais (Resolução/Dimensões/Sinal/Energia) mais baixos */
.check{ padding:9px 11px !important; }
.check span{ font-size:11.5px !important; }

/* Cabeçalho de card e título de seção mais enxutos */
.card .head{ min-height:0 !important; }
.card h2{ font-size:12.5px !important; letter-spacing:1.6px !important; }
h3{ font-size:10.5px !important; margin-top:2px !important; }
.hint{ font-size:10px !important; line-height:1.45 !important; }

/* ── BLOCO ASSINATURA (Resolume) — o diferencial do app ──────────
   Antes: uma pílula larga com estrela ocupando linha inteira + botão.
   Agora: um bloco só, com ícone próprio (camadas/slices — desenho
   nosso, sem usar marca de terceiro) e o selo integrado ao topo. */
.bloco-assinatura{
  border:1px solid rgba(255,176,32,.34);
  background:linear-gradient(160deg,rgba(255,176,32,.07),rgba(138,43,226,.07));
  border-radius:var(--r-md); padding:13px 14px;
  display:flex; flex-direction:column; gap:8px; margin:2px 0 4px;
}
.assinatura-topo{ display:flex; align-items:center; gap:11px; }
.ico-slices{ width:34px; height:26px; color:var(--ambar); flex-shrink:0; }
.assinatura-selo{
  display:block; font-size:8px; font-weight:800; letter-spacing:1.5px;
  color:var(--ambar); margin-bottom:2px;
}
.assinatura-tit{ margin:0 !important; font-size:12px !important; color:#ffd88a !important; letter-spacing:1.2px !important; }
.bloco-assinatura .hint{ margin:0; }
.bloco-assinatura .btn{ margin-top:1px; }

/* ── DUPLA DE DESTAQUE — Resolume + SmartLCT lado a lado ──────────
   Os dois recursos-assinatura do app (exportação pronta pra abrir direto
   no software) ganham o MESMO tratamento visual — selo, ícone, borda âmbar
   — lado a lado, em vez de um destacado e o outro um botão solto abaixo. */
.duo-destaque{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:2px 0 4px; }
.duo-destaque .bloco-assinatura{ margin:0; padding:11px 10px; gap:7px; height:100%; }
.duo-destaque .assinatura-topo{ gap:7px; }
.duo-destaque .ico-slices{ width:24px; height:19px; }
.duo-destaque .assinatura-selo{ font-size:7px; letter-spacing:1px; }
.duo-destaque .assinatura-tit{ font-size:10.5px !important; line-height:1.3; }
.duo-destaque .hint{ font-size:9px !important; line-height:1.5 !important; }
@media (max-width:340px){ .duo-destaque{ grid-template-columns:1fr; } }

/* ── CHECKBOXES DO PDF — grade compacta ─────────────────────────
   Antes: 8 caixas empilhadas com titulo + descricao fixa embaixo,
   ocupando varias telas de rolagem. Agora: grade de 3 por linha,
   nome curto, e a explicacao mora no icone de info. */
#blocoPdfSecoes{ padding:11px 12px !important; }
.pdf-sec-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; }
.pdf-secs{ display:grid; grid-template-columns:repeat(3,1fr); gap:5px; }
.chk-mini{
  display:flex; align-items:center; gap:6px;
  padding:0 9px; border-radius:var(--r-sm);
  background:rgba(138,43,226,.05); border:1px solid rgba(138,43,226,.13);
  cursor:pointer; min-width:0;
  /* ⭐ ALTURA FIXA: sem isso, o rotulo que quebra em 2 linhas ("Testcard +
     cabeamento", "Distribuição de fases") deixava a caixa mais alta que as
     vizinhas da mesma fileira e a grade ficava irregular. */
  height:38px;
}
.chk-mini input{ width:auto; flex-shrink:0; margin:0; accent-color:var(--roxo-esc); }
.chk-mini span{
  font-size:9.5px; font-weight:600; color:#ddd; line-height:1.2;
  display:flex; align-items:center; gap:3px; min-width:0; flex:1;
  overflow:hidden;
}
.chk-mini svg.i{ width:11px; height:11px; flex-shrink:0; }
@media (max-width:520px){ .pdf-secs{ grid-template-columns:repeat(2,1fr); } }

/* ══════════════════════════════════════════════════════════════
   AUTENTICAÇÃO, BLOQUEIO E CONTA — mesmo padrão dark-dashboard roxo
   já usado no resto do app, sem nenhuma cor decorativa nova.
   ══════════════════════════════════════════════════════════════ */
.tela-full{
  position:fixed;inset:0;z-index:99000;
  /* ⭐ gradiente cobrindo 100% da tela sempre — antes era cor sólida
     #050309 e os blobs (abaixo) cobriam só parte dela; em telas maiores
     ou com scroll, a área sem blob aparecia como uma faixa preta dura.
     O gradiente garante transição suave em qualquer tamanho de tela. */
  background:radial-gradient(ellipse 100% 80% at 25% 15%,#150a26 0%,#050309 55%),
             radial-gradient(ellipse 90% 70% at 80% 90%,#1a0a22 0%,#050309 60%),
             #050309;
  overflow-y:auto;
  animation:fade .18s ease;
}
/* ⭐ CORREÇÃO 04/08 #2: antes o scroll (overflow-y:auto) e a centralização
   (display:flex;align-items:center;justify-content:center) viviam no
   MESMO elemento. Isso é um bug clássico de flexbox: quando o conteúdo
   centralizado é mais alto que a tela, o navegador empurra tudo pro
   canto em vez de centralizar de verdade, e sobra vazio do lado oposto
   — exatamente o "conteúdo jogado pro canto" que você via. A correção é
   separar as duas responsabilidades: o scroll fica no .tela-full (acima,
   sem flex nenhum), a centralização fica neste wrapper interno, que
   cresce em altura conforme o conteúdo precisa, sem brigar com o scroll. */
.tela-full-inner{
  min-height:100%;
  width:100%;
  display:flex;align-items:center;justify-content:center;
  padding:20px 14px;
  box-sizing:border-box;
}
/* ── fundo fluido animado (só roxo/violeta/magenta, sem cor fora da marca) ── */
.fundo-fluido{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none;}
.fundo-fluido i{
  position:absolute;border-radius:50%;filter:blur(60px);opacity:.5;
  mix-blend-mode:screen;
}
.fundo-fluido i:nth-child(1){width:520px;height:520px;background:radial-gradient(circle,#8a2be2,transparent 70%);top:-160px;left:-100px;animation:fluido1 16s ease-in-out infinite;}
.fundo-fluido i:nth-child(2){width:460px;height:460px;background:radial-gradient(circle,#c026d3,transparent 70%);bottom:-140px;right:-80px;animation:fluido2 19s ease-in-out infinite;}
.fundo-fluido i:nth-child(3){width:380px;height:380px;background:radial-gradient(circle,#6d28d9,transparent 70%);top:40%;left:55%;animation:fluido3 22s ease-in-out infinite;}
.fundo-fluido i:nth-child(4){width:400px;height:400px;background:radial-gradient(circle,#9333ea,transparent 70%);bottom:-120px;left:15%;animation:fluido2 21s ease-in-out infinite reverse;}
@keyframes fluido1{0%,100%{transform:translate(0,0) scale(1);}50%{transform:translate(80px,60px) scale(1.15);}}
@keyframes fluido2{0%,100%{transform:translate(0,0) scale(1);}50%{transform:translate(-70px,-50px) scale(1.1);}}
@keyframes fluido3{0%,100%{transform:translate(0,0) scale(1);}50%{transform:translate(-60px,70px) scale(.9);}}
.auth-card{
  position:relative;z-index:1;
  width:100%;max-width:400px;margin:0 auto;
  background:var(--card);backdrop-filter:blur(14px);
  border:1px solid var(--linha-forte);border-radius:var(--r-lg);
  padding:24px 22px;display:flex;flex-direction:column;gap:16px;
  box-shadow:0 24px 70px rgba(0,0,0,.85);
}
.auth-topo{text-align:center;padding-bottom:2px;}
.auth-topo h1{
  font-family:var(--font-tit);font-weight:700;
  font-size:clamp(24px,7vw,30px);text-transform:uppercase;letter-spacing:4px;
  color:#c084fc;text-shadow:0 0 20px rgba(167,80,240,.5);
}
.auth-tabs{display:flex;gap:6px;background:rgba(0,0,0,.35);border-radius:var(--r-sm);padding:4px;}
.auth-tab{
  flex:1;padding:9px;border:none;border-radius:6px;background:transparent;
  color:var(--dim);font-size:11px;font-weight:800;text-transform:uppercase;
  letter-spacing:1px;cursor:pointer;
}
.auth-tab-ativa{background:rgba(138,43,226,.28);color:#fff;}
.auth-form{display:flex;flex-direction:column;gap:12px;}
.auth-form .check span a{color:var(--roxo);text-decoration:underline;text-underline-offset:2px;}
.auth-form .check span a:hover{color:#fff;}
.btn-google{
  display:flex;align-items:center;justify-content:center;gap:10px;
  background:#fff;color:#3c4043;border:1px solid #dadce0;
  font-family:'Roboto',var(--font-corpo,sans-serif);
}
.btn-google:hover{background:#f7f7f8;}
.btn-google svg{width:18px;height:18px;flex-shrink:0;}
.pilula-agencia{
  display:inline-flex;align-items:center;gap:14px;
  background:rgba(138,43,226,.1);border:1px solid rgba(138,43,226,.3);
  padding:6px 24px 6px 6px;border-radius:34px;font-size:12.5px;color:var(--dim);
}
.pilula-agencia img{height:40px;width:auto;max-width:105px;object-fit:contain;flex-shrink:0;border-radius:8px;}
.pilula-agencia b{color:#c084fc;font-weight:700;}


/* ── BARRA DE CONTA (topo do app, usuário logado) ── */
.barra-conta{
  display:flex;align-items:center;justify-content:center;gap:10px;
  padding:2px 0 0;flex-wrap:wrap;
}
.conta-email{font-size:10.5px;color:var(--dim);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:180px;}
.btn-mini-sair{background:rgba(255,70,60,.12);color:#ff8a80;border-color:rgba(255,70,60,.3);}

/* ── BARRA DE TRIAL ── */
.barra-trial{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  background:rgba(255,176,32,.08);border:1px solid rgba(255,176,32,.3);
  border-radius:var(--r-md);padding:10px 13px;flex-wrap:wrap;
}
.barra-trial span{font-size:11px;color:#ffd490;font-weight:600;line-height:1.5;}
.barra-trial .btn-mini{background:rgba(255,176,32,.18);color:var(--ambar);border-color:rgba(255,176,32,.4);flex-shrink:0;}

/* ── PLANOS (tela de bloqueio) ── */
.planos-grid{display:flex;flex-direction:column;gap:10px;}
.plano-card{
  background:rgba(6,5,12,.9);border:1px solid rgba(138,43,226,.2);
  border-radius:var(--r-md);padding:14px;
  display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;
  position:relative;overflow:hidden;
}
/* ⭐ foto de cada plano, bem discreta — os arquivos originais têm o nome
   do plano escrito grande (ex: "MENSAL R$ 50/mês"), que faz "fantasma"
   atrás do texto real do card se aparecer legível. Por isso: desfoque
   forte (10px) + opacidade bem baixa + zoom bem de perto num canto da
   imagem (sem letras grandes), só a textura/luz de fundo aparece. */
.plano-card::before{
  content:'';position:absolute;inset:-10px;z-index:0;
  background-size:240% auto;background-position:top left;
  opacity:.07;filter:blur(10px) saturate(1.2) brightness(.7);
  pointer-events:none;
}
.plano-card > *{position:relative;z-index:1;}
.plano-card-mensal::before{background-image:url('img/planos/mensal.jpg');}
.plano-card-anual::before{background-image:url('img/planos/anual.jpg');}
.plano-card-empresarial::before{background-image:url('img/planos/empresarial.jpg');}
.plano-destaque{border-color:var(--ambar);background:rgba(255,176,32,.05);}
.plano-nome{font-size:10px;color:var(--dim);text-transform:uppercase;letter-spacing:1.4px;font-weight:800;}
.plano-preco{font-family:var(--font-num);font-size:22px;font-weight:800;color:#fff;}
.plano-preco small{font-size:11px;color:var(--dim);font-weight:600;}
.plano-obs{font-size:10px;color:var(--dim);line-height:1.5;}
.plano-card .btn{margin-top:6px;}
.plano-card input[type="text"]{padding:9px 10px;font-size:12px;text-align:center;}
.plano-card .btn-boleto{width:100%;text-align:center;margin-top:2px;font-size:10.5px;}
.check-desabilitado{opacity:.55;}
.check-desabilitado input{cursor:not-allowed;}

/* ── PAINEL DA EMPRESA ── */
.empresa-convite-linha{display:flex;gap:8px;}
.empresa-convite-linha input{flex:1;}
.empresa-lista{display:flex;flex-direction:column;gap:6px;max-height:38vh;overflow-y:auto;}
.empresa-membro{
  display:flex;justify-content:space-between;align-items:center;gap:8px;
  background:rgba(138,43,226,.06);border:1px solid rgba(138,43,226,.16);
  border-radius:var(--r-sm);padding:9px 11px;
}
.empresa-membro-info{display:flex;flex-direction:column;gap:2px;min-width:0;}
.empresa-membro-email{font-size:11.5px;color:#fff;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.empresa-membro-papel{font-size:9px;color:var(--dim);text-transform:uppercase;letter-spacing:.8px;}
.empresa-membro-status{font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.6px;padding:2px 7px;border-radius:10px;flex-shrink:0;}
.status-ativo{background:rgba(0,214,143,.14);color:var(--verde);}
.status-trial{background:rgba(255,176,32,.14);color:var(--ambar);}
.status-pendente{background:rgba(138,43,226,.14);color:var(--roxo);}
.status-expirado{background:rgba(255,70,60,.14);color:#ff8a80;}

/* ── FAIXA INFERIOR PADRONIZADA ──────────────────────────────────
   DEFEITO MEDIDO ANTES: os 4 elementos do rodape tinham 4 larguras
   diferentes (258 / 228 / 255 / 362 px) e 2 formatos de canto (50px
   e 14px). Estavam centralizados, mas centralizado não e padronizado
   — cada um mantinha o tamanho do proprio conteudo.
   AGORA: largura identica, canto identico, altura identica. */
#btnModoCampo,
.card-compact{
  width:100% !important;
  max-width:none !important;
  align-self:stretch !important;
  border-radius:var(--r-md) !important;
  box-sizing:border-box;
}
#btnModoCampo{
  min-height:46px !important; padding:0 14px !important;
  border-style:solid !important; border-color:rgba(138,43,226,.3) !important;
  justify-content:center;
}
.card-compact{ min-height:46px !important; padding:0 14px !important; justify-content:center; }
.card-compact .head{ min-height:46px !important; padding:0 !important; }
/* footer (pilula da agencia) fica FORA da padronizacao acima de proposito —
   ela e uma marca compacta, não uma faixa de largura total. Ver regra
   original ".footer-logo/.footer-p/.footer-marca" logo apos "RODAPÉ". */
/* altura exata igual (o card tinha +2px de borda) */
#btnModoCampo, .card-compact{ height:46px !important; min-height:46px !important; }
.card-compact .head{ height:44px !important; min-height:44px !important; }

/* Bloco do PDF e botao de exportar formam UM conjunto visual: o botao nasce
   colado no bloco, mesma largura, cantos de baixo arredondados. */
#blocoPdfSecoes{
  border-bottom-left-radius:0 !important; border-bottom-right-radius:0 !important;
  border-bottom:none !important; margin-bottom:0 !important;
}
#btnExportPDF{
  border-top-left-radius:0 !important; border-top-right-radius:0 !important;
  /* cancela o gap do .card pra encostar no bloco de checkboxes */
  margin-top:-10px !important;
  width:100% !important; min-width:0 !important;
  border-top:1px solid rgba(255,255,255,.10) !important;
}