:root{
    --verde:#1f4d3a;
    --verde-escuro:#163828;
    --dourado:#c9a24a;
    --texto:#ffffff;
    --fundo:url("https://images.unsplash.com/photo-1506905925346-21bda4d32df4?auto=format&fit=crop&w=1920&q=80") center/cover no-repeat fixed;
  }

  /* ===== TEMA: escuro (padrão) e claro (paletas Branco e Creme) ===== */
  :root{
    --tx:#ffffff; --rgb:255,255,255; --inBorda:transparent;
    --vidro:rgba(255,255,255,.12); --vidroHover:rgba(255,255,255,.2);
    --sup:color-mix(in srgb, color-mix(in srgb, var(--verde-escuro) 80%, #121212) 72%, transparent);
    --painel:color-mix(in srgb, var(--verde-escuro) 42%, rgba(0,0,0,.18));
    --topo:color-mix(in srgb, var(--verde-escuro) 58%, transparent);
    --cab:color-mix(in srgb, color-mix(in srgb, var(--dourado) 26%, var(--verde-escuro)) 82%, transparent);
    --faixa:color-mix(in srgb, color-mix(in srgb, var(--verde-escuro) 78%, #000) 80%, transparent);
    --modal:color-mix(in srgb, var(--verde-escuro) 88%, #000);
  }
  html.claro{
    --tx:#23292f; --rgb:35,45,55; --inBorda:rgba(0,0,0,.18);
    --vidro:rgba(255,255,255,.62); --vidroHover:rgba(255,255,255,.82);
    --sup:color-mix(in srgb, var(--claroSup) 70%, transparent); --painel:color-mix(in srgb, var(--claroFundo) 42%, transparent);
    --topo:color-mix(in srgb, var(--claroSup) 75%, transparent);
    --cab:color-mix(in srgb, color-mix(in srgb, var(--dourado) 28%, var(--claroSup)) 82%, transparent);
    --faixa:color-mix(in srgb, color-mix(in srgb, var(--verde) 12%, var(--claroSup)) 80%, transparent);
    --modal:var(--claroSup);
  }
  html.claro body::before{background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.25))}
  html.claro .bt.sec{color:var(--tx)}
  /* áreas que ficam sempre com texto branco (sobre foto ou sobre a cor principal) */
  #telaLogin, .cabFicha, .chipProc, .bt:not(.sec){ --tx:#ffffff; --rgb:255,255,255; }
  .cabFicha{color:#fff}
  *{box-sizing:border-box;margin:0;padding:0}
  html,body{height:100%}
  body{
    font-family:"Segoe UI", Roboto, Arial, sans-serif;
    color:var(--tx);
    background:#1b2b22;
    background:var(--fundo);
  }
  body::before{
    content:"";position:fixed;inset:0;
    background:linear-gradient(180deg, rgba(0,0,0,.15), rgba(0,0,0,.5));
    pointer-events:none;z-index:0;
  }
  .oculto{display:none !important}

  /* ===== LOGIN ===== */
  #telaLogin{
    position:relative;z-index:1;min-height:100%;
    display:flex;align-items:center;justify-content:center;padding:16px;
  }
  .card{
    width:100%;max-width:280px;padding:26px 24px 20px;border-radius:12px;
    background:rgba(var(--rgb),.14);border:1px solid rgba(var(--rgb),.25);
    backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
    box-shadow:0 10px 40px rgba(0,0,0,.35);
  }
  .marca{text-align:center;margin-bottom:16px}
  .marca .logo{
    width:44px;height:44px;margin:0 auto 8px;border-radius:50%;
    border:2px solid var(--dourado);background:rgba(0,0,0,.25);
    display:flex;align-items:center;justify-content:center;
  }
  .marca h1{font-size:21px;font-weight:600;letter-spacing:.5px}
  .marca p{font-size:11.5px;opacity:.85;margin-top:3px}
  label{display:block;font-size:12px;margin:10px 0 5px}
  .campo{position:relative}
  input,select,textarea{
    width:100%;padding:8px 11px;border-radius:7px;border:1px solid var(--inBorda);
    background:rgba(255,255,255,.92);font-size:13.5px;color:#1d1d1d;outline:none;font-family:inherit;
  }
  input:focus,select:focus,textarea:focus{border-color:var(--dourado);box-shadow:0 0 0 3px color-mix(in srgb, var(--dourado) 35%, transparent)}
  .olho{
    position:absolute;right:10px;top:50%;transform:translateY(-50%);
    background:none;border:none;cursor:pointer;color:#555;font-size:11.5px;
  }
  .linha{display:flex;justify-content:flex-end;margin-top:10px}
  .linha a{color:var(--tx);font-size:11.5px;text-decoration:none;opacity:.9}
  .linha a:hover{color:var(--dourado)}
  button.entrar{
    width:100%;margin-top:16px;padding:9px;border:none;border-radius:7px;
    background:var(--verde);color:#fff;font-size:13.5px;font-weight:600;cursor:pointer;
    border-bottom:2px solid var(--dourado);transition:background .2s;
  }
  button.entrar:hover{background:var(--verde-escuro)}
  .msg{margin-top:10px;font-size:12px;text-align:center;min-height:18px}
  .rodape{margin-top:10px;text-align:center;font-size:10px;opacity:.7}

  /* ===== CABEÇALHO ===== */
  #telaArea{position:relative;z-index:1;min-height:100%}
  .topo{
    position:fixed;top:0;left:0;right:0;height:46px;z-index:10;
    display:flex;align-items:center;justify-content:space-between;padding:0 14px;
    background:var(--topo);
    border-bottom:1px solid color-mix(in srgb, var(--dourado) 55%, transparent);
    backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  }
  .topo .esq{display:flex;align-items:center;gap:10px;cursor:pointer}
  .topo .esq .mini{
    width:30px;height:30px;border-radius:50%;border:2px solid var(--dourado);
    background:rgba(0,0,0,.25);display:flex;align-items:center;justify-content:center;
  }
  .topo .esq strong{font-size:17px;font-weight:600;letter-spacing:.3px}
  .topo .esq span{font-size:12px;opacity:.8;margin-left:4px}
  .escritorioTopo{display:flex;align-items:center;gap:8px;padding-left:14px;margin-left:6px;border-left:1px solid rgba(var(--rgb),.3);font-size:13px}
  .escritorioTopo img{height:26px;max-width:110px;object-fit:contain;border-radius:4px;background:rgba(255,255,255,.85);padding:2px 4px}
  .topo .dir{display:flex;align-items:center;gap:14px}
  .usuario{display:flex;align-items:center;gap:8px;font-size:14px}
  .avatar{
    width:28px;height:28px;border-radius:50%;background:var(--verde);
    border:1px solid var(--dourado);display:flex;align-items:center;justify-content:center;
    font-weight:600;font-size:13px;text-transform:uppercase;
  }
  .btIcone{
    color:var(--tx);width:32px;height:32px;border-radius:8px;border:none;cursor:pointer;
    background:rgba(var(--rgb),.1);display:flex;align-items:center;justify-content:center;
    transition:background .2s;
  }
  .btIcone:hover,.btIcone.ativo{background:color-mix(in srgb, var(--dourado) 40%, transparent)}

  /* ===== ÁREA DE TRABALHO ===== */
  .conteudo{
    min-height:calc(100vh / var(--z, 1));padding:70px 16px 24px;
    display:flex;flex-direction:column;align-items:center;justify-content:center;
  }
  .modulos{display:grid;grid-template-columns:repeat(4, 138px);gap:14px}
  .modulo{
    height:118px;border-radius:12px;cursor:pointer;text-decoration:none;color:var(--tx);
    background:var(--vidro);border:1px solid rgba(var(--rgb),.22);
    backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
    box-shadow:0 8px 30px rgba(0,0,0,.3);
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
    transition:transform .2s, background .2s, border-color .2s;
    padding:10px;text-align:center;
  }
  .modulo:hover{transform:translateY(-4px);background:var(--vidroHover);border-color:var(--dourado)}
  .modulo .ic{
    width:48px;height:48px;border-radius:12px;
    display:flex;align-items:center;justify-content:center;
    box-shadow:0 4px 14px rgba(0,0,0,.3);
  }
  .modulo .ic svg{width:27px;height:27px}
  .modulo span{font-size:13px;font-weight:600;line-height:1.2}
  .c-exterior{background:#0e7490}.c-pct{background:#6b4fa0}
  .c-relatorios{background:#3b5b8c}.c-ferramentas{background:#5b6b2e}.c-conexos{background:#9d3b6b}.c-judicial{background:#47546a}
  .c-clientes{background:#1f7a6b}
  .c-marcas{background:#a8322d}
  .c-patentes{background:#3e3f92}
  .c-desenhos{background:#d9692a}
  .c-programas{background:#b8902a}
  .c-transferencia{background:#6b5640}

  /* ===== CONFIGURAÇÕES ===== */
  .painel{
    width:100%;max-width:1040px;min-height:540px;
    display:grid;grid-template-columns:220px 1fr;
    border-radius:14px;overflow:hidden;
    background:var(--painel);
    border:1px solid rgba(var(--rgb),.2);
    backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
    box-shadow:0 10px 40px rgba(0,0,0,.4);
  }
  .menuConfig{padding:18px 10px;border-right:1px solid rgba(var(--rgb),.15);background:rgba(0,0,0,.15)}
  .menuConfig h3{font-size:15px;font-weight:600;padding:0 10px 12px;display:flex;align-items:center;gap:8px}
  .menuConfig button{
    width:100%;text-align:left;padding:10px 12px;margin-bottom:4px;border:none;border-radius:8px;
    background:none;color:var(--tx);font-size:13.5px;cursor:pointer;display:flex;align-items:center;gap:10px;
    border-left:3px solid transparent;
  }
  .menuConfig button:hover{background:rgba(var(--rgb),.08)}
  .menuConfig button.ativo{background:rgba(var(--rgb),.14);border-left-color:var(--dourado)}
  .menuConfig button svg{width:17px;height:17px;flex:none}
  .abasDesp{display:flex;flex-wrap:wrap;gap:6px;margin:4px 0 12px}
  .abasDesp button{padding:6px 12px;border-radius:8px;border:1px solid rgba(var(--rgb),.22);background:rgba(var(--rgb),.06);color:var(--tx);cursor:pointer;font-size:13px}
  .abasDesp button.ativo{border-color:var(--dourado);background:color-mix(in srgb, var(--dourado) 30%, transparent)}
  .abasDesp button small{opacity:.7;margin-left:4px}
  .tabDesp td input{padding:6px 9px;font-size:13px}
  .tabDesp td.cod{font-weight:600;white-space:nowrap}
  .tabDesp .btLixo{background:none;border:none;color:var(--tx);opacity:.55;cursor:pointer;padding:4px}
  .tabDesp .btLixo:hover{opacity:1;color:#ff8a80}
  .tabDesp th.c,.tabDesp td.c{text-align:center}
  .tabDesp td select{padding:5px 8px;font-size:13px;width:auto}
  .abas{padding:24px 28px;overflow:auto}
  .aba h2{font-size:18px;font-weight:600;margin-bottom:4px}
  .aba .sub{font-size:12.5px;opacity:.8;margin-bottom:18px}
  .grade{display:grid;grid-template-columns:repeat(12, 1fr);gap:4px 14px}
  .grade > div{grid-column:span 12}
  .s1{grid-column:span 1 !important}
  .s2{grid-column:span 2 !important}.s3{grid-column:span 3 !important}.s4{grid-column:span 4 !important}
  .s5{grid-column:span 5 !important}.s6{grid-column:span 6 !important}.s7{grid-column:span 7 !important}.s8{grid-column:span 8 !important}
  .comBotao{display:flex;gap:6px}
  .bt{
    padding:8px 14px;border:none;border-radius:7px;cursor:pointer;font-size:13px;font-weight:600;
    background:var(--verde);color:#fff;border-bottom:2px solid var(--dourado);white-space:nowrap;
  }
  .bt:hover{background:var(--verde-escuro)}
  .bt.sec{background:rgba(var(--rgb),.15);border-bottom-color:transparent}
  .bt.sec:hover{background:rgba(var(--rgb),.25)}
  .bt.peq{padding:5px 10px;font-size:12px}
  .acoes{margin-top:20px;display:flex;align-items:center;gap:12px}
  .aviso{font-size:12.5px;opacity:.9}
  .titulo2{font-size:14px;font-weight:600;margin:22px 0 8px;padding-bottom:6px;border-bottom:1px solid rgba(var(--rgb),.15)}
  .logoBox{display:flex;align-items:center;gap:14px;margin-top:4px}
  .logoPrev{
    width:150px;height:64px;border-radius:8px;background:rgba(255,255,255,.88);
    display:flex;align-items:center;justify-content:center;color:#777;font-size:12px;overflow:hidden;
  }
  .logoPrev img{max-width:100%;max-height:100%;object-fit:contain}

  .barraPlano{margin-bottom:16px;padding:12px 14px;border-radius:10px;background:rgba(var(--rgb),.08)}
  .barraPlano .txt{display:flex;justify-content:space-between;font-size:13px;margin-bottom:8px}
  .barra{height:8px;border-radius:4px;background:rgba(var(--rgb),.18);overflow:hidden}
  .barra div{height:100%;background:var(--dourado);transition:width .3s}
  .lista{width:100%;border-collapse:collapse;font-size:13px}
  .lista th{text-align:left;font-weight:600;padding:8px;border-bottom:1px solid rgba(var(--rgb),.25);opacity:.85}
  .lista td{padding:8px;border-bottom:1px solid rgba(var(--rgb),.1);vertical-align:middle}
  .lista tr.inativo td{opacity:.5}
  .selo{display:inline-block;padding:2px 8px;border-radius:10px;font-size:11px;background:rgba(var(--rgb),.15)}
  .selo.adm{background:color-mix(in srgb, var(--dourado) 45%, transparent)}
  #aba-usuarios .lista th{white-space:nowrap}
  #aba-usuarios .nomeComp{display:block;font-size:11.5px;opacity:.65;margin-left:23px}
  #uLogin:disabled{opacity:.6;cursor:default}
  .formUsuario{margin-top:16px;padding:14px;border-radius:10px;background:rgba(var(--rgb),.06)}

  .paletas{display:grid;grid-template-columns:repeat(auto-fill, minmax(110px,1fr));gap:12px}
  .paleta{
    border-radius:10px;padding:10px;cursor:pointer;background:rgba(var(--rgb),.08);
    border:2px solid transparent;text-align:center;font-size:12.5px;
  }
  .paleta:hover{background:rgba(var(--rgb),.14)}
  .paleta.sel{border-color:var(--tx)}
  .paleta .amostra{display:flex;height:34px;border-radius:6px;overflow:hidden;margin-bottom:6px}
  .paleta .amostra i{flex:1}
  .fundos{display:grid;grid-template-columns:repeat(auto-fill, minmax(130px,1fr));gap:12px}
  .fundoOp{
    height:80px;border-radius:10px;cursor:pointer;background-size:cover;background-position:center;
    border:2px solid transparent;position:relative;overflow:hidden;
  }
  .fundoOp.sel{border-color:var(--tx)}
  .fundoOp span{position:absolute;left:0;right:0;bottom:0;font-size:11.5px;padding:4px 6px;background:rgba(0,0,0,.5)}
  .cores{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:6px}
  .cor{width:34px;height:34px;border-radius:8px;cursor:pointer;border:2px solid rgba(var(--rgb),.4)}
  .cores input[type=color]{width:44px;height:36px;padding:2px;cursor:pointer}

  .check{display:flex;align-items:center;gap:8px;font-size:13px;margin:8px 0}
  .check input{width:auto}
  .cards{display:grid;grid-template-columns:repeat(auto-fill, minmax(180px,1fr));gap:12px}
  .info{padding:14px;border-radius:10px;background:rgba(var(--rgb),.08)}
  .info small{display:block;font-size:11.5px;opacity:.75;margin-bottom:4px}
  .info b{font-size:17px}
  .modsPlano{display:grid;grid-template-columns:repeat(auto-fill, minmax(200px,1fr));gap:8px;margin-top:6px}
  .modsPlano div{padding:9px 12px;border-radius:8px;background:rgba(var(--rgb),.08);font-size:13px;display:flex;align-items:center;gap:8px}
  .ok{color:#7fd38f;font-weight:700}

  .voltar{
    width:100%;text-align:left;padding:9px 12px;margin-bottom:14px;border:1px solid rgba(var(--rgb),.2) !important;border-radius:8px;
    background:rgba(var(--rgb),.06) !important;color:var(--tx);font-size:13px;cursor:pointer;display:flex;align-items:center;gap:8px;
  }
  .voltar:hover{background:rgba(var(--rgb),.14) !important}
  .pendente{color:var(--dourado);font-weight:600}
  /* ===== CLIENTES ===== */
  .moduloPainel{
    width:100%;max-width:1200px;padding:20px 24px;border-radius:14px;
    background:var(--painel);
    border:1px solid rgba(var(--rgb),.2);
    backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
    box-shadow:0 10px 40px rgba(0,0,0,.4);
  }
  .conteudo.telaCheia{padding:46px 0 0;justify-content:flex-start;align-items:stretch}
  .telaCheia .moduloPainel{max-width:none;border-radius:0;border-width:0;box-shadow:none;min-height:calc(100vh / var(--z, 1) - 46px)}
  .telaCheia .cabFicha{border-radius:0}
  .barraMod{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:14px}
  .barraMod h2{font-size:19px;font-weight:600}
  .barraMod .bts{display:flex;gap:8px;flex-wrap:wrap}
  .buscaLinha{display:flex;gap:8px;margin-bottom:6px}
  .buscaLinha input{padding:10px 14px;font-size:14px}
  .filtroAv{margin-top:6px;padding:4px 14px 12px;border-radius:10px;background:rgba(var(--rgb),.06)}
  #formCli input:disabled,#formCli select:disabled,#formCli textarea:disabled{
    background:rgba(var(--rgb),.07);color:var(--tx);border-color:rgba(var(--rgb),.12);opacity:1;cursor:default;-webkit-text-fill-color:var(--tx);
  }
  #formCli select:disabled{appearance:none;-webkit-appearance:none}
  .modoLeitura .soEdicao{display:none !important}
  .modoEdicao .soLeitura{display:none !important}
  .tagEdicao{font-size:12px;font-weight:600;padding:3px 10px;border-radius:10px;background:color-mix(in srgb, var(--dourado) 45%, transparent)}
  .moduloPainel{position:relative;transition:background .3s}
  .moduloPainel.inativo{background:color-mix(in srgb, #8a1c1c 60%, rgba(0,0,0,.4));border-color:rgba(255,130,130,.45)}
  .moduloPainel{--pv:20px;--ph:24px;padding:var(--pv) var(--ph)}
  .statusQ{display:inline-block;width:13px;height:13px;border-radius:3px;background:#3ccf6e;margin-right:10px;vertical-align:-1px;box-shadow:0 0 0 2px rgba(var(--rgb),.25)}
  .statusQ.off{background:#ff5a52}
  /* faixa do topo da ficha */
  .cabFicha{
    display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;
    margin:calc(var(--pv) * -1) calc(var(--ph) * -1) 16px;padding:10px var(--ph);justify-content:flex-start;
    border-radius:14px 14px 0 0;background:var(--verde);border-bottom:2px solid var(--dourado);
  }
  .cabFicha h2{font-size:19px;font-weight:600}
  .cabFicha{flex-wrap:nowrap}
  .cabFicha > .bts{margin-left:auto;flex:none;display:flex;align-items:center;gap:8px}
  .tituloFicha{display:flex;align-items:center;min-width:0;flex:0 1 auto}
  #tituloCli{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  #dotCli{flex:none}
  .procIcones{flex:none;flex-wrap:nowrap}
  .procIcones.compacto .chipProc .nm{display:none}
  .procIcones.compacto .chipProc{padding-right:7px}
  /* barra do cliente em grade: nome sempre tem espaço garantido */
  .cabFicha{display:grid;grid-template-columns:minmax(180px, 1fr) auto auto;grid-template-areas:"tit proc bts";column-gap:14px;row-gap:8px}
  .cabFicha .tituloFicha{grid-area:tit}
  .cabFicha .procIcones{grid-area:proc;margin-left:0}
  .cabFicha > .bts{grid-area:bts;margin-left:0}
  @media (max-width:900px){
    .cabFicha{grid-template-columns:1fr auto;grid-template-areas:"tit bts" "proc proc"}
    #tituloCli{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;line-height:1.25}
    .procIcones{flex-wrap:wrap}
  }
  @media (max-width:520px){
    .btVoltarTxt{display:none}
    .cabFicha h2{font-size:16px}
    .cabFicha > .bts .bt{padding:7px 10px}
  }
  .tituloFicha{cursor:pointer;border-radius:8px;padding:4px 8px;margin-left:-8px}
  .tituloFicha:hover{background:rgba(var(--rgb),.1)}
  .procIcones{display:flex;gap:6px;flex-wrap:wrap;margin-left:10px}
  .chipProc{display:flex;align-items:center;gap:7px;padding:3px 9px 3px 3px;border-radius:8px;border:1px solid rgba(var(--rgb),.22);
    background:rgba(0,0,0,.2);color:var(--tx);cursor:pointer;font-size:12.5px}
  .chipProc:hover{border-color:var(--dourado);background:rgba(0,0,0,.32)}
  .chipProc .ic{width:26px;height:26px;border-radius:6px;display:flex;align-items:center;justify-content:center}
  .chipProc .ic svg{width:16px;height:16px}
  .chipProc b{font-size:11.5px;background:rgba(var(--rgb),.22);padding:0 7px;border-radius:8px}
  @media (max-width:980px){ .chipProc .nm{display:none} }
  .moduloPainel.inativo .cabFicha{background:#7a1f24}
  /* faixa das abas */
  #fichaCli .abasCli{
    margin:0 calc(var(--ph) * -1) 18px;padding:0 calc(var(--ph) - 10px);border-bottom:none;
    background:var(--faixa);
  }
  #fichaCli .abasCli button{padding:11px 14px}
  #fichaCli .abasCli button.ativo{background:color-mix(in srgb, var(--dourado) 22%, transparent)}
  /* cartões */
  .cartao{margin-bottom:16px;border-radius:10px;overflow:hidden;border:1px solid color-mix(in srgb, var(--dourado) 35%, transparent);
    background:var(--sup)}
  .cartaoCab{padding:9px 14px;font-size:13.5px;font-weight:600;
    background:var(--cab);border-bottom:1px solid color-mix(in srgb, var(--dourado) 45%, transparent)}
  .celulas{display:grid;grid-template-columns:repeat(4, 1fr);gap:1px;background:rgba(var(--rgb),.12)}
  .celulas .campoVer{padding:10px 14px;background:var(--sup)}
  .cartao .lista th{background:rgba(var(--rgb),.06);padding:8px 14px}
  .cartao .lista td{padding:8px 14px}
  .cartao .lista tbody tr:nth-child(even) td{background:rgba(var(--rgb),.035)}
  #formCli,#editContatos{padding:16px;border-radius:10px;background:var(--sup);
    border:1px solid color-mix(in srgb, var(--dourado) 35%, transparent);margin-top:18px}
  .acoesFicha{display:flex;justify-content:flex-end}
  .rotEnd{display:flex;align-items:center;gap:8px;margin-bottom:3px}
  .rotEnd small{margin:0 !important}
  .trocaEnd{display:inline-flex;border:1px solid rgba(var(--rgb),.25);border-radius:6px;overflow:hidden}
  .trocaEnd button{background:none;border:none;color:var(--tx);font-size:11px;padding:2px 8px;cursor:pointer;opacity:.75}
  .trocaEnd button.sel{background:var(--dourado);color:#1d1d1d;opacity:1;font-weight:600}
  .linkGrupo{background:none;border:none;color:var(--tx);font:inherit;cursor:pointer;padding:0;border-bottom:1px dashed color-mix(in srgb, var(--dourado) 80%, transparent)}
  .linkGrupo:hover{color:var(--dourado)}
  .listaGrupo{max-height:340px;overflow:auto;margin-top:10px;border-radius:8px;border:1px solid rgba(var(--rgb),.12)}
  .listaGrupo button{display:flex;align-items:center;gap:10px;width:100%;text-align:left;padding:10px 12px;border:none;border-bottom:1px solid rgba(var(--rgb),.08);background:none;color:var(--tx);cursor:pointer;font-size:13.5px}
  .listaGrupo button:hover{background:rgba(var(--rgb),.1)}
  .listaGrupo button.atual{opacity:.55;cursor:default}
  .listaGrupo small{opacity:.7;margin-left:auto;white-space:nowrap}
  .usuario{cursor:pointer;position:relative;padding:4px 8px;border-radius:8px}
  .usuario:hover{background:rgba(var(--rgb),.1)}
  .menuUsuario{position:absolute;top:38px;right:0;min-width:230px;padding:12px;border-radius:10px;z-index:20;cursor:default;
    background:var(--modal);border:1px solid color-mix(in srgb, var(--dourado) 50%, transparent);box-shadow:0 10px 30px rgba(0,0,0,.5)}
  .menuUsuario small{display:block;font-size:12px;opacity:.75;margin-bottom:8px}
  .tamanhos{display:flex;gap:6px}
  .tamanhos button{flex:1;padding:6px 0;border-radius:6px;border:1px solid rgba(var(--rgb),.2);background:rgba(var(--rgb),.08);color:var(--tx);cursor:pointer}
  .tamanhos button.sel{background:var(--dourado);color:#1d1d1d;font-weight:700;border-color:var(--dourado)}
  .ver{display:grid;grid-template-columns:repeat(4, 1fr);gap:16px 22px;margin-top:4px}
  .campoVer small{display:block;font-size:11.5px;opacity:.65;margin-bottom:3px}
  .campoVer div{font-size:14px;line-height:1.4;white-space:pre-line;word-break:break-word}
  .campoVer.l2{grid-column:span 2}.campoVer.l4{grid-column:span 4}
  .campoVer a{color:var(--tx)}
  .tituloComBt{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
  .tituloComBt .bts{display:flex;align-items:center;gap:12px;font-weight:400}
  .tituloComBt .check{margin:0;font-size:12.5px}
  .zap{color:var(--tx);text-decoration:none;display:inline-flex;align-items:center;gap:6px;border-bottom:1px dashed rgba(37,211,102,.7)}
  .zap:hover{color:#5ee08f}
  .zap svg{width:14px;height:14px;flex:none}
  /* copiar dados */
  .btCopia{background:none;border:none;cursor:pointer;color:var(--tx);opacity:0;padding:2px 4px;border-radius:4px;line-height:0;transition:opacity .15s;vertical-align:middle}
  .btCopia svg{width:14px;height:14px}
  .btCopia:hover{background:rgba(var(--rgb),.15);opacity:1 !important}
  .campoVer:hover .btCopia,.tituloFicha:hover .btCopia,.lista tr:hover .btCopia{opacity:.7}
  .campoVer small{display:flex !important;align-items:center;gap:4px}
  @media (hover:none){ .btCopia{opacity:.6} }
  .aviso-copia{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:60;padding:8px 16px;border-radius:8px;font-size:13px;
    background:#1d1d1d;color:#fff;box-shadow:0 6px 20px rgba(0,0,0,.4);pointer-events:none;opacity:0;transition:opacity .2s}
  .aviso-copia.on{opacity:1}
  .btDiscreto{background:transparent;border:1px solid rgba(var(--rgb),.28);color:var(--tx);font-size:12.5px;padding:5px 12px;border-radius:6px;cursor:pointer;opacity:.9}
  .btDiscreto:hover{border-color:var(--dourado);background:rgba(var(--rgb),.06);opacity:1}
  #cNome{text-transform:uppercase}
  .linkEmail{color:var(--tx);text-decoration:none;border-bottom:1px dashed rgba(var(--rgb),.45)}
  .linkEmail:hover{color:var(--dourado);border-bottom-color:var(--dourado)}
  /* links sem sublinhado em todo o sistema; ao passar o mouse ficam dourados */
  .linkEmail,.zap,.linkGrupo,.campoVer a{text-decoration:none !important;border-bottom:none !important}
  .linkEmail:hover,.zap:hover,.linkGrupo:hover,.campoVer a:hover{color:var(--dourado) !important}
  .campoVer.l3{grid-column:span 3}
  .paisTag{display:inline-flex;align-items:center;gap:8px;padding:4px 10px;border:1px solid rgba(var(--rgb),.3);border-radius:6px;
    font-size:13px;font-weight:600;letter-spacing:.3px;background:rgba(var(--rgb),.05)}
  .lista .flag{width:18px;height:12px;margin-right:7px;vertical-align:-1px}
  .flag{width:22px;height:15px;object-fit:cover;border-radius:2px;box-shadow:0 0 0 1px rgba(0,0,0,.25);flex:none}
  .btDiscreto{white-space:nowrap;padding:3px 10px}
  .btDiscreto small{display:inline !important;opacity:.65;margin-left:6px}
  #mgBusca{margin-top:10px}
  .listaGrupo{max-height:min(55vh, 420px)}
  /* transição login -> área de trabalho */
  @keyframes cardSai{to{opacity:0;transform:translateY(-14px) scale(.96);filter:blur(4px)}}
  @keyframes topoEntra{from{transform:translateY(-100%);opacity:0}to{transform:none;opacity:1}}
  @keyframes moduloEntra{from{opacity:0;transform:translateY(22px) scale(.94)}to{opacity:1;transform:none}}
  .card.saindo{animation:cardSai .38s ease-in forwards}
  #telaArea.entrando .topo{animation:topoEntra .45s cubic-bezier(.2,.8,.2,1) both}
  #telaArea.entrando .modulo{animation:moduloEntra .5s cubic-bezier(.2,.8,.2,1) both}
  #telaArea.entrando .modulo:nth-child(1){animation-delay:0.08s}
  #telaArea.entrando .modulo:nth-child(2){animation-delay:0.12s}
  #telaArea.entrando .modulo:nth-child(3){animation-delay:0.17s}
  #telaArea.entrando .modulo:nth-child(4){animation-delay:0.22s}
  #telaArea.entrando .modulo:nth-child(5){animation-delay:0.26s}
  #telaArea.entrando .modulo:nth-child(6){animation-delay:0.30s}
  #telaArea.entrando .modulo:nth-child(7){animation-delay:0.35s}
  #telaArea.entrando .modulo:nth-child(8){animation-delay:0.40s}
  #telaArea.entrando .modulo:nth-child(9){animation-delay:0.44s}
  #telaArea.entrando .modulo:nth-child(10){animation-delay:0.48s}
  #telaArea.entrando .modulo:nth-child(11){animation-delay:0.53s}
  #telaArea.entrando .modulo:nth-child(12){animation-delay:0.57s}
  @media (prefers-reduced-motion:reduce){ .card.saindo,#telaArea.entrando .topo,#telaArea.entrando .modulo{animation:none} }
  /* ===== MARCAS ===== */
  .tipoM{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;flex:none;
    font-size:10.5px;font-weight:500;color:#fff;box-shadow:0 0 0 1px rgba(255,255,255,.35);vertical-align:-4px;margin-right:8px}
  .tp-N{background:#8a8f96}.tp-M{background:#c9372c}.tp-F{background:#2f6fb3}.tp-T{background:#2e8b57}
  .s-Pedido{background:#e08a1e;color:#fff}.s-Registro{background:#2e9e4f;color:#fff}
  .s-Indeferida{background:#c0392b;color:#fff}.s-Arquivada{background:#8e2a22;color:#fff}
  .chipProc.ativo{border-color:var(--dourado);background:rgba(0,0,0,.42)}
  .tabMarcas td{white-space:nowrap}
  .tabMarcas td.nomeM{font-weight:500}
  .tabMarcas td.cliM{max-width:340px;overflow:hidden;text-overflow:ellipsis}
  .tabMarcas .tipoM,.popMarcas .tipoM{vertical-align:middle}
  .tabEspec td:first-child{white-space:nowrap}
  .buscaPeq{width:240px;padding:5px 10px;font-size:12.5px}
  /* lista rápida ao passar o mouse no ícone de marcas */
  .popMarcas{position:fixed;z-index:45;width:min(470px, calc(100vw - 16px));max-height:min(60vh, 460px);overflow:auto;border-radius:10px;
    background:var(--modal);border:1px solid color-mix(in srgb, var(--dourado) 55%, transparent);box-shadow:0 12px 34px rgba(0,0,0,.45);
    backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);color:var(--tx)}
  .popTit{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .popCab{position:sticky;top:0;z-index:1;padding:9px 12px;font-size:12.5px;font-weight:600;background:var(--cab);border-bottom:1px solid rgba(var(--rgb),.15)}
  .popCab small{opacity:.7;font-weight:400}
  #popLista{overflow:auto}
  .popMarcas button{display:grid;grid-template-columns:82px 22px 52px 1fr auto;gap:8px;align-items:center;width:100%;text-align:left;
    padding:8px 12px;border:none;border-bottom:1px solid rgba(var(--rgb),.08);background:none;color:var(--tx);cursor:pointer;font-size:12.5px}
  .popMarcas button:hover{background:rgba(var(--rgb),.1)}
  .popMarcas .tipoM{margin:0}
  .popMarcas .nm{font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .popMarcas .cl{opacity:.75}
  /* ficha da marca */
  .marcaCab{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
  .mcTit{display:flex;align-items:center;gap:6px;font-size:15px;min-width:0}
  .mcTit b{font-size:16px;font-weight:500;letter-spacing:.3px}
  .mcTit .badge{margin-left:6px}
  .navM{display:flex;align-items:center;gap:4px;font-weight:400;font-size:12px}
  .navM button{width:28px;height:26px;border-radius:6px;border:1px solid rgba(var(--rgb),.25);background:rgba(var(--rgb),.06);color:var(--tx);cursor:pointer}
  .navM button:hover:not(:disabled){border-color:var(--dourado)}
  .navM button:disabled{opacity:.3;cursor:default}
  .navM span{padding:0 6px;opacity:.8}
  .marcaCorpo{display:grid;grid-template-columns:1fr 270px;gap:1px;background:rgba(var(--rgb),.12)}
  .celulas.c3{grid-template-columns:repeat(3, 1fr)}
  .logoMarca{display:flex;align-items:center;justify-content:center;padding:12px;background:var(--sup)}
  .logoMarca .moldura{width:100%;height:100%;min-height:170px;border-radius:8px;background:#fff;display:flex;align-items:center;justify-content:center;overflow:hidden;border:1px solid rgba(0,0,0,.08)}
  .logoMarca img{max-width:92%;max-height:180px}
  .logoNom{display:flex;flex-direction:column;align-items:center;gap:6px;color:#2b2b2b;text-align:center;padding:10px}
  .logoNom span{font-family:Arial, sans-serif;font-size:22px;font-weight:700;letter-spacing:.5px;word-break:break-word}
  .logoNom small{font-size:11px;opacity:.6}
  .avisoVig{display:block;font-size:11.5px;margin-top:2px;font-weight:600}
  .avisoVig.lar{color:#f0a24a}.avisoVig.verm{color:#ff7a70}
  html.claro .avisoVig.lar{color:#b8620c}html.claro .avisoVig.verm{color:#b3261e}
  .rolaX{overflow-x:auto}
  .tabEspec td.esp{max-width:0;width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:pointer}
  .tabEspec tr.aberta td.esp{white-space:normal}
  @media (max-width:820px){
    .marcaCorpo{grid-template-columns:1fr}
    .logoMarca{order:-1}
    .celulas.c3{grid-template-columns:1fr 1fr}
    .buscaPeq{width:150px}
  }
  /* imagem quadrada (padrão INPI) com botão de copiar */
  .logoMarca .moldura{position:relative;aspect-ratio:1 / 1;height:auto !important;min-height:0 !important}
  .logoMarca img{max-width:94% !important;max-height:94% !important}
  .btCopiaImg{position:absolute;top:6px;right:6px;width:28px;height:28px;border-radius:6px;border:1px solid rgba(0,0,0,.15);background:rgba(255,255,255,.9);
    color:#333;cursor:pointer;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .15s}
  .btCopiaImg svg{width:15px;height:15px}
  .moldura:hover .btCopiaImg{opacity:1}
  @media (hover:none){ .btCopiaImg{opacity:.85} }
  .comIcone{display:inline-flex;align-items:center;gap:8px}
  .comIcone .tipoM{margin:0}
  .celBts{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
  .btDiscreto:disabled{opacity:.35;cursor:default;border-color:rgba(var(--rgb),.2)}
  .btDiscreto.temDica{border-color:color-mix(in srgb, var(--dourado) 70%, transparent)}
  /* balão com o conteúdo (observações, resumo) */
  .dica{position:fixed;z-index:55;max-width:min(460px, calc(100vw - 16px));max-height:min(50vh, 380px);overflow:auto;padding:10px 12px;border-radius:8px;
    font-size:13px;line-height:1.45;white-space:pre-line;background:var(--modal);color:var(--tx);
    border:1px solid color-mix(in srgb, var(--dourado) 55%, transparent);box-shadow:0 10px 30px rgba(0,0,0,.45);
    backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
  .dica b{display:flex;align-items:center;font-size:12px;opacity:.85;margin-bottom:4px}
  .dica{user-select:text}
  /* patentes */
  .natP{display:inline-flex;align-items:center;justify-content:center;min-width:26px;padding:1px 5px;border-radius:4px;font-size:10.5px;font-weight:600;color:#fff;
    vertical-align:middle;margin-right:8px;box-shadow:0 0 0 1px rgba(255,255,255,.3)}
  .np-PI{background:#1e3a8a}.np-MU{background:#9cccf5;color:#0f2a4a}.np-CA{background:#7a4fa0}
  .s-Concedida{background:#2e9e4f;color:#fff}
  .tabPat td{white-space:nowrap}
  .tabPat td.titP{white-space:normal;min-width:260px}
  .tabPat td.cliM{max-width:300px;overflow:hidden;text-overflow:ellipsis}
  .popMarcas.grp button{grid-template-columns:16px 1fr auto}
  .popMarcas.grp button.procInat .nm{color:#ff8a80}
  .popMarcas.pat button{grid-template-columns:150px 30px 1fr auto}
  .tabAnu th,.tabAnu td{text-align:center}
  .tabAcomp th{text-align:center}
  .tabAcomp td:nth-child(-n+3),.tabAcomp td:nth-child(6){text-align:center}
  .a-Paga,.a-Requerido{background:#2e9e4f;color:#fff}
  .a-Pendente{background:#e08a1e;color:#fff}
  .a-Naopaga,.a-Vencido{background:#c0392b;color:#fff}
  .a-Avencer{background:transparent;color:var(--tx);border:1px solid rgba(var(--rgb),.3);opacity:.8}
  .tabAnu tr.linhaExame td{background:rgba(var(--rgb),.06);font-weight:500}
  .formProc{padding:16px}
  .formProc input[type=date]{min-height:34px}
  .imgPrev{width:120px;height:120px;border-radius:8px;background:#fff;display:flex;align-items:center;justify-content:center;overflow:hidden;color:#777;font-size:12px;text-align:center}
  .imgPrev img{max-width:94%;max-height:94%}
  .subCab{border-top:2px solid color-mix(in srgb, var(--dourado) 70%, transparent)}
  .okCheck{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;background:#2e9e4f;vertical-align:middle}
  .okCheck svg{width:12px;height:12px}
  .menuMais{position:relative}
  #btMais{display:flex;align-items:center;justify-content:center;width:36px;height:34px;padding:0}
  #btMais svg{width:16px;height:16px}
  .menuMais::after{content:'';position:absolute;left:0;right:0;top:100%;height:8px}
  .menuAdd{position:absolute;top:calc(100% + 6px);right:0;z-index:30;min-width:330px;white-space:nowrap;padding:6px;border-radius:10px;
    background:var(--modal);border:1px solid color-mix(in srgb, var(--dourado) 55%, transparent);box-shadow:0 12px 30px rgba(0,0,0,.45)}
  .menuAdd button{display:flex;align-items:center;gap:10px;width:100%;padding:8px 10px;border:none;border-radius:7px;background:none;color:var(--tx);cursor:pointer;font-size:13.5px;text-align:left}
  .menuAdd button:hover:not(:disabled){background:rgba(var(--rgb),.1)}
  .menuAdd button:disabled{opacity:.45;cursor:default}
  .menuAdd .ic{width:26px;height:26px;border-radius:6px;display:flex;align-items:center;justify-content:center;flex:none}
  .menuAdd .ic svg{width:16px;height:16px}
  .menuAdd small{margin-left:auto;font-size:11px;opacity:.7}
  .tabAnu input,.tabPror input{padding:5px 8px;font-size:12.5px;max-width:170px;margin:0 auto;display:block;text-align:center}
  .tabPror input.obsIn{max-width:none;text-align:left}
  .tabPror th,.tabPror td{text-align:center}
  .cartaoCab.tituloComBt .bt.peq{padding:4px 12px}
  .emEdicaoTab{box-shadow:0 0 0 2px color-mix(in srgb, var(--dourado) 70%, transparent) inset}
  .s-Indeferido{background:#c0392b;color:#fff}.s-Arquivado{background:#8e2a22;color:#fff}
  .tabAcomp td.cump{text-align:center}
  .tabAcomp input[type=checkbox]{width:18px;height:18px;cursor:pointer}
  .tabAcomp input.obsIn{padding:5px 8px;font-size:12.5px}
  .tagDI{display:inline-flex;align-items:center;justify-content:center;min-width:26px;padding:1px 5px;border-radius:4px;font-size:10.5px;font-weight:600;color:#fff;
    background:#d9692a;vertical-align:middle;margin-right:8px;box-shadow:0 0 0 1px rgba(255,255,255,.3)}
  .popMarcas.di button{grid-template-columns:150px 30px 1fr auto}
  /* processo inativo: igual ao cliente inativo */
  .cartao.procInativo{background:color-mix(in srgb, #8a1c1c 45%, var(--sup));border-color:rgba(255,130,130,.45)}
  .cartao.procInativo > .cartaoCab{background:color-mix(in srgb, #7a1f24 70%, var(--cab))}
  .lista tr.procInat td{color:#ff8a80}
  .lista tr.procTerc td{color:#ffb766}
  html.claro .lista tr.procTerc td{color:#b35c00}
  .popMarcas button.procInat .nm,.popMarcas button.procInat > span:first-child{color:#ff8a80}
  .mcTit .statusQ{margin-right:4px}
  .fundoProc{margin:-16px calc(var(--ph) * -1) calc(var(--pv) * -1);padding:16px var(--ph) var(--pv);transition:background .3s}
  .fundoProc.inativo{background:color-mix(in srgb, #8a1c1c 60%, rgba(0,0,0,.4))}
  .fundoProc.terceiros{background:color-mix(in srgb, #c46a12 42%, rgba(0,0,0,.32))}
  .moduloPainel.terceiros{background:color-mix(in srgb, #c46a12 42%, rgba(0,0,0,.32));border-color:rgba(255,180,100,.5)}
  .cartao.procTerceiros > .cartaoCab.marcaCab{background:color-mix(in srgb, #b8650f 65%, var(--cab))}
  .txtTerc{color:#ffb766;font-weight:600}
  html.claro .txtTerc{color:#b35c00}
  .seloProv{display:inline-block;padding:2px 9px;border-radius:10px;font-size:11px;font-weight:600;white-space:nowrap}
  .seloInativo{background:#efe3c8;color:#5a4a2a;border:1px solid #dccca4}
  .seloTerceiros{background:#f6cfa3;color:#5a3510;border:1px solid #e8b47c}
  .linkTexto{background:none;border:none;color:var(--tx);font-size:12.5px;cursor:pointer;opacity:.85;padding:4px 6px;border-radius:6px}
  .linkTexto:hover{opacity:1;background:rgba(var(--rgb),.1)}
  .lista tr.contInativo td{color:#ff8a80;text-decoration:line-through}
  .contatos tr.contInativo input[type=text],.contatos tr.contInativo input[type=email]{color:#b3261e;text-decoration:line-through}
  .ordem{white-space:nowrap}
  .ordem button{background:rgba(var(--rgb),.12);border:none;color:var(--tx);width:24px;height:24px;border-radius:5px;cursor:pointer;font-size:11px}
  .ordem button:hover:not(:disabled){background:rgba(var(--rgb),.25)}
  .ordem button:disabled{opacity:.25;cursor:default}
  @media (max-width:820px){ .ver,.celulas{grid-template-columns:1fr 1fr} .campoVer.l4,.campoVer.l3{grid-column:span 2} .moduloPainel{--pv:16px;--ph:12px} }
  .t-Inteira{background:#1e3a8a;color:#fff;border:1px solid rgba(255,255,255,.35)}
  .t-Meia{background:#a9d2f7;color:#0f2a4a}
  /* Perfis: selos metálicos */
  .b-p0{background:linear-gradient(135deg,#f4f6f8 0%,#c9d1d9 45%,#eef1f4 70%,#b9c3cd 100%);color:#26303a;border:1px solid #dfe5ea}
  .b-p1{background:linear-gradient(135deg,#f8e08e 0%,#c99a2e 45%,#f3d77a 70%,#b8871f 100%);color:#3a2700;border:1px solid #e9c862}
  .b-p2{background:linear-gradient(135deg,#e6e6e6 0%,#a9a9a9 45%,#d9d9d9 70%,#8f8f8f 100%);color:#262626;border:1px solid #cfcfcf}
  .b-p3{background:linear-gradient(135deg,#e7ad7c 0%,#a5642f 45%,#d99a62 70%,#8a4f22 100%);color:#2b1606;border:1px solid #d08d57}
  .b-p4{background:#f3ecd2;color:#4d4530;border:1px solid #e2d7b0}
  .filtros{display:grid;grid-template-columns:repeat(4, 1fr);gap:2px 14px}
  .filtros label{margin:8px 0 4px}
  .linhaFiltro{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:10px 0 12px;font-size:13px}
  .linhaFiltro .check{margin:0}
  .lista th.ord{cursor:pointer;user-select:none;white-space:nowrap}
  .lista th.ord:hover{opacity:1;color:var(--dourado)}
  .lista.clicavel tbody tr{cursor:pointer}
  .lista.clicavel tbody tr:hover td{background:rgba(var(--rgb),.08)}
  .lista tr.riscado td{text-decoration:line-through;opacity:.55}
  .lista tr.cliInativo td{color:#ff8a80}
  .bolinha{display:inline-block;width:9px;height:9px;border-radius:50%;background:#3ccf6e;margin-right:8px;vertical-align:1px}
  .bolinha.off{background:#ff5a52}
  .badge{display:inline-block;min-width:62px;text-align:center;padding:2px 8px;border-radius:10px;font-size:11px;font-weight:600}
  .b-Sim{background:#2e9e4f}.b-Não{background:#b3302b}.b-A{background:#d9822b}.b-Isento{background:#7a7a7a}
  .paginacao{display:flex;gap:4px;justify-content:flex-end;align-items:center;margin-top:14px;flex-wrap:wrap}
  .pg{min-width:30px;height:28px;padding:0 8px;border:none;border-radius:6px;cursor:pointer;background:rgba(var(--rgb),.12);color:var(--tx);font-size:12.5px}
  .pg:hover{background:rgba(var(--rgb),.22)}
  .pg.at{background:var(--dourado);color:#1d1d1d;font-weight:700}
  .pg:disabled{opacity:.35;cursor:default}
  .abasCli{display:flex;gap:2px;flex-wrap:wrap;border-bottom:1px solid rgba(var(--rgb),.2);margin-bottom:16px}
  .abasCli button{background:none;border:none;color:var(--tx);padding:9px 14px;font-size:13.5px;cursor:pointer;border-bottom:3px solid transparent;opacity:.85}
  .abasCli button:hover{opacity:1}
  .abasCli button.ativo{border-bottom-color:var(--dourado);opacity:1;font-weight:600}
  .abasCli .qtd{font-size:11px;background:rgba(var(--rgb),.2);padding:1px 7px;border-radius:8px;margin-left:5px}
  .contatos input{padding:6px 8px;font-size:12.5px}
  .contatos td{padding:5px 4px}
  .contatos tr.riscado input[type=text],.contatos tr.riscado input[type=email]{text-decoration:line-through;opacity:.6}
  .btX{background:none;border:none;color:var(--tx);cursor:pointer;font-size:16px;opacity:.7;padding:2px 6px}
  .btX:hover{opacity:1;color:#ff8a80}
  input[readonly]{background:rgba(255,255,255,.6)}
  .fundoModal{position:fixed;inset:0;z-index:50;background:rgba(0,0,0,.55);display:flex;align-items:center;justify-content:center;padding:16px}
  .caixaModal{
    width:100%;max-width:380px;padding:22px;border-radius:12px;
    background:var(--modal);border:1px solid color-mix(in srgb, var(--dourado) 60%, transparent);
    box-shadow:0 10px 40px rgba(0,0,0,.5);
  }
  .caixaModal h4{font-size:16px;margin-bottom:8px}
  .caixaModal p{font-size:13.5px;opacity:.92;line-height:1.45}
  .caixaModal .acoes{justify-content:flex-end;margin-top:18px;flex-wrap:wrap;gap:8px}
  .caixaModal:has(#mExtra:not(.oculto)){max-width:500px}
  @media (max-width:520px){ .caixaModal .acoes .bt{flex:1 1 100%} }
  @media (max-width:980px){
    .topo .esq strong,.topo .esq > span,.escritorioTopo span,.usuario .nome{display:none}
    .escritorioTopo{padding-left:10px;margin-left:2px}
  }
  @media (max-width:820px){
    .painel{grid-template-columns:1fr}
    .menuConfig{display:flex;overflow-x:auto;gap:4px;border-right:none;border-bottom:1px solid rgba(var(--rgb),.15)}
    .menuConfig h3{display:none}
    .menuConfig button{width:auto;white-space:nowrap;margin:0;border-left:none;border-bottom:3px solid transparent}
    .menuConfig button.ativo{border-bottom-color:var(--dourado)}
    .abas{padding:18px 16px}
    .grade > div{grid-column:span 12 !important}
    .lista .esconde{display:none}
    .filtros{grid-template-columns:repeat(2, 1fr)}
    .moduloPainel{padding:16px 12px}
    .contatos{display:block;overflow-x:auto}
  }
  @media (max-width:720px){
    .modulos{grid-template-columns:repeat(3, minmax(0,1fr));gap:10px;width:100%;max-width:420px}
    .modulo{height:104px;gap:6px;padding:8px}
    .modulo .ic{width:40px;height:40px}
    .modulo .ic svg{width:22px;height:22px}
    .modulo span{font-size:11.5px}
    .topo .esq span,.usuario .nome,.escritorioTopo span{display:none}
  }

  /* ===== sistema online ===== */
  .aviso-flutuante{position:fixed;left:50%;bottom:24px;transform:translate(-50%,20px);opacity:0;pointer-events:none;
    background:rgba(20,24,22,.92);color:#fff;padding:10px 18px;border-radius:10px;font-size:13.5px;transition:all .25s;z-index:200;
    box-shadow:0 8px 24px rgba(0,0,0,.35);max-width:calc(100% - 32px);text-align:center}
  .aviso-flutuante.on{opacity:1;transform:translate(-50%,0)}
  button.entrar:disabled{opacity:.6;cursor:wait}