/* Legalizup — identidade visual da marca
   marinho #0F1B2D ("Legaliz") · azul #1D6CF2 ("up") · degradê do símbolo #36B6FF → #1D6CF2 → #1450C8
   fundo branco e cinza-azulado · Jost (textos e títulos)
   Convertido da identidade anterior (versão 2.10.0) com as regras do Legalizup; daqui em diante, edite à mão. */

@font-face { font-family: "Jost"; font-weight: 300; font-style: normal; font-display: swap; src: url("../fontes/jost-latin-300-normal.woff2") format("woff2"); }
@font-face { font-family: "Jost"; font-weight: 400; font-style: normal; font-display: swap; src: url("../fontes/jost-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Jost"; font-weight: 500; font-style: normal; font-display: swap; src: url("../fontes/jost-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Jost"; font-weight: 600; font-style: normal; font-display: swap; src: url("../fontes/jost-latin-600-normal.woff2") format("woff2"); }

:root {
  --tinta: #0f1b2d;
  --tinta-2: #2b3a52;
  --tinta-3: #66748a;
  --tinta-4: #9aa6b8;
  --papel: #f3f6fb;
  --papel-2: #e8eef7;
  --papel-3: #f8fafd;
  --cartao: #ffffff;
  --linha: #e1e8f2;
  --linha-2: #cfd9e8;
  --azul: #1d6cf2;
  --azul-2: #3b8cff;
  --azul-claro: #e3edff;
  --azul-tenue: #f1f6ff;
  --marinho: #16345f;
  --marinho-2: #4a5b78;
  --ok: #1f8a5b;
  --ok-fundo: #e3f4ec;
  --erro: #d23b3b;
  --erro-fundo: #fde8e8;
  --aviso: #b7791f;
  --aviso-fundo: #fdf3dc;
  --gradiente-x: linear-gradient(135deg, #36b6ff 0%, #1d6cf2 55%, #1450c8 100%);
  --sans: "Jost", "Segoe UI", system-ui, sans-serif;
  --titulo: "Jost", "Segoe UI", system-ui, sans-serif;
  --sombra-1: 0 1px 2px rgba(15, 27, 45, .05), 0 6px 18px -10px rgba(15, 27, 45, .16);
  --sombra-2: 0 2px 4px rgba(15, 27, 45, .06), 0 18px 40px -18px rgba(15, 27, 45, .28);
  --raio: 16px;
  color-scheme: light;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--papel);
  color: var(--tinta-2);
  font: 400 15px/1.5 var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
#app { height: 100%; }
::selection { background: #cfe0ff; color: var(--tinta); }
img { display: block; }
button { font: inherit; color: inherit; }
h1, h2, h3, h4 { margin: 0; color: var(--tinta); font-weight: 500; }
p { margin: 0; }
[hidden] { display: none !important; }

::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-thumb { background: #c9d4e4; border-radius: 10px; border: 3px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background-color: #a9b8ce; }
::-webkit-scrollbar-track { background: transparent; }

:focus-visible { outline: 2px solid var(--azul); outline-offset: 2px; }

/* ---------- abertura ---------- */
.abertura { height: 100%; display: grid; place-content: center; justify-items: center; gap: 18px; }
.abertura img { width: 64px; animation: respirar 1.6s ease-in-out infinite; }
.abertura span { font: 500 11px var(--sans); letter-spacing: .32em; text-transform: uppercase; color: var(--marinho-2); }
@keyframes respirar { 50% { opacity: .45; transform: scale(.94); } }

/* ---------- tipografia de marca ---------- */
.eyebrow {
  display: inline-flex; align-items: center; gap: 12px;
  font: 500 11px/1 var(--sans); letter-spacing: .3em; text-transform: uppercase; color: var(--marinho-2);
}
.eyebrow::before, .eyebrow::after { content: ""; width: 26px; height: 1px; background: currentColor; opacity: .7; }

/* ---------- botões ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 40px; padding: 0 16px; border-radius: 10px; border: 1px solid transparent;
  font: 500 14.5px/1 var(--sans); letter-spacing: .01em; cursor: pointer; white-space: nowrap;
  transition: background .15s, border-color .15s, color .15s, transform .15s, box-shadow .15s;
}
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .55; cursor: progress; }
.btn-pri { background: var(--azul); color: #ffffff; box-shadow: 0 1px 0 rgba(255, 255, 255, .12) inset, 0 8px 18px -8px rgba(29, 108, 242, .65); }
.btn-pri:hover { background: #1659d1; }
.btn-sec { background: #fff; border-color: var(--linha-2); color: var(--tinta); }
.btn-sec:hover { border-color: var(--azul); color: var(--marinho); }
.btn-ghost { background: transparent; color: var(--tinta-2); }
.btn-ghost:hover { background: rgba(29, 108, 242, .09); color: var(--marinho); }
.btn-perigo { background: var(--erro); color: #fff; }
.btn-perigo:hover { background: #b02a2a; }
.btn-p { height: 34px; padding: 0 12px; font-size: 13.5px; border-radius: 9px; }
.btn .ic, .btn-icone .ic { flex: none; }
.btn.carregando { cursor: progress; position: relative; color: transparent !important; }
.btn.carregando::after { content: ""; position: absolute; width: 14px; height: 14px; border: 2px solid var(--azul); border-right-color: transparent; border-radius: 50%; animation: girar .7s linear infinite; }
.btn-icone {
  width: 34px; height: 34px; display: inline-grid; place-items: center; border-radius: 9px;
  border: 0; background: transparent; color: var(--tinta-3); cursor: pointer; transition: background .15s, color .15s;
}
.btn-icone:hover { background: var(--papel-2); color: var(--tinta); }
.btn-icone.perigo:hover { background: var(--erro-fundo); color: var(--erro); }
.link { background: none; border: 0; padding: 0; color: var(--azul); font: 500 13.5px var(--sans); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(29, 108, 242, .4); }
.link:hover { color: var(--marinho); text-decoration-color: currentColor; }

/* ---------- chips e selos ---------- */
.chip { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px; border-radius: 999px; font: 500 12px/1 var(--sans); letter-spacing: .02em; border: 0; white-space: nowrap; }
.chip-ltda { background: var(--azul-claro); color: #1b4fae; }
.chip-slu { background: #e8edf5; color: var(--tinta-2); }
.chip-alteracao { background: #f6ecd2; color: #7a5410; }
.chip-locacao { background: #e3e8ee; color: #2c4a6e; }
.chip-desenho { background: #e6ece8; color: #2f5a46; }
.selo { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font: 500 12.5px/1.2 var(--sans); }
.selo-ok { background: var(--ok-fundo); color: var(--ok); }
.selo-erro { background: var(--erro-fundo); color: var(--erro); }
.selo-lacuna { background: var(--azul-claro); color: #1b4fae; }
.selo-aviso { background: var(--aviso-fundo); color: var(--aviso); }
.contador { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; margin-left: 10px; border-radius: 999px; background: var(--papel-2); color: var(--tinta-2); font: 600 12px/1 var(--sans); vertical-align: middle; }

/* =================================================================
   INÍCIO
   ================================================================= */
.inicio-app { height: 100%; display: grid; grid-template-columns: 292px minmax(0, 1fr); }
.inicio-rolagem { overflow: auto; min-width: 0; }
.inicio { max-width: 1200px; margin: 0 auto; padding: 0 44px; min-height: 100%; display: flex; flex-direction: column; }
.inicio-topo { display: flex; align-items: center; justify-content: space-between; padding: 26px 0 4px; }

/* menu lateral de grupos */
.lateral-inicio { min-height: 0; }
.lateral-inicio .marca { cursor: default; }
.grupos-nav { flex: 1; min-height: 0; display: flex; flex-direction: column; padding: 0 12px 10px; }
.grupos-cab { display: flex; align-items: center; justify-content: space-between; padding: 18px 4px 6px 12px; }
.grupos-cab span { font: 500 10.5px/1 var(--sans); letter-spacing: .24em; text-transform: uppercase; color: var(--marinho-2); }
.btn-mini { width: 28px; height: 28px; border-radius: 8px; }
.grupos-cab .btn-mini { color: var(--azul); }
.grupos-cab .btn-mini:hover { background: var(--azul-claro); color: var(--marinho); }
.grupos-filtro { display: flex; align-items: center; gap: 6px; margin: 4px 2px 6px; padding: 0 10px; height: 32px; border-radius: 9px; border: 1px solid var(--linha); background: #fff; color: var(--tinta-4); }
.grupos-filtro:focus-within { border-color: var(--azul); box-shadow: 0 0 0 3px rgba(29, 108, 242, .14); }
.grupos-filtro input[type="search"] { flex: 1; min-width: 0; border: 0; outline: 0; height: 100%; padding: 0; background: transparent; font: 400 13px var(--sans); color: var(--tinta); box-shadow: none !important; }
.grupos { flex: 1; min-height: 60px; overflow: auto; display: flex; flex-direction: column; gap: 1px; margin: 0 -4px; padding: 0 4px; }
.grupo-item { position: relative; display: flex; align-items: center; border-radius: 10px; transition: background .15s, box-shadow .15s; }
.grupo-item:hover { background: rgba(29, 108, 242, .07); }
.grupo-item.ativo { background: #fff; box-shadow: 0 0 0 1px var(--linha), var(--sombra-1); }
.grupo-item.alvo-soltar { background: var(--azul-claro); box-shadow: inset 0 0 0 2px var(--azul-2); }
.arrastando-doc .grupo-item.solta { outline: 1px dashed #c3d5f3; outline-offset: -1px; }
.grupo-btn { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; padding: 7px 6px 7px 8px; border: 0; background: none; cursor: pointer; text-align: left; border-radius: 10px; }
.grupo-ic { flex: none; width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; background: var(--azul-tenue); color: var(--marinho); border: 1px solid #d6e4fb; transition: background .2s, color .2s; }
.grupo-item.ativo .grupo-ic { background: var(--gradiente-x); color: #fff; border-color: transparent; }
.grupo-item.fixo .grupo-ic { background: var(--papel-2); border-color: var(--linha); color: var(--tinta-3); }
.grupo-item.fixo.ativo .grupo-ic { background: var(--tinta); color: #ffffff; }
.grupo-nome { flex: 1; min-width: 0; font: 500 12.5px/1.3 var(--sans); letter-spacing: .02em; color: var(--tinta-2); overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow-wrap: anywhere; }
.grupo-item.ativo .grupo-nome { color: var(--tinta); font-weight: 600; }
.grupo-item.fixo .grupo-nome { font-size: 13.5px; letter-spacing: 0; }
.grupo-qtd { flex: none; min-width: 20px; text-align: right; font: 500 11.5px var(--sans); color: var(--tinta-4); font-variant-numeric: tabular-nums; }
.grupo-mais { flex: none; width: 28px; height: 28px; margin-right: 3px; display: none; }
.grupo-item:hover .grupo-mais, .grupo-item:focus-within .grupo-mais, .grupo-mais[aria-expanded="true"] { display: inline-grid; }
.grupo-item:hover .grupo-qtd, .grupo-item:focus-within .grupo-qtd { display: none; }
.grupo-item.fixo:hover .grupo-qtd { display: block; }
.grupo-mais[aria-expanded="true"] { background: var(--papel-2); color: var(--tinta); }
.grupo-edicao { display: flex; align-items: center; gap: 6px; padding: 5px 4px 5px 8px; border-radius: 10px; background: #fff; box-shadow: 0 0 0 1px var(--azul-2), 0 0 0 4px rgba(29, 108, 242, .14); margin: 2px 0; }
.grupo-edicao input[type="text"] { flex: 1; min-width: 0; height: 30px; padding: 0 8px; font: 500 12.5px var(--sans); border-radius: 7px; box-shadow: none !important; }
.grupo-edicao .btn-mini.ok { color: var(--ok); }
.grupo-edicao .btn-mini.ok:hover { background: var(--ok-fundo); }
.grupos-vazio { padding: 10px 12px; font-size: 12.5px; color: var(--tinta-4); }
.grupos-sep { height: 1px; background: var(--linha); margin: 8px 8px; }
.grupo-novo { display: flex; align-items: center; gap: 8px; margin-top: 6px; padding: 9px 12px; border-radius: 10px; border: 1px dashed var(--linha-2); background: none; color: var(--marinho); font: 500 13px var(--sans); cursor: pointer; transition: background .15s, border-color .15s; }
.grupo-novo:hover { background: var(--azul-tenue); border-color: var(--azul-2); }
.lateral-inicio .lateral-rodape p { margin-top: 0; }
.lateral-inicio .lateral-rodape small { display: block; margin-top: 4px; font-size: 11.5px; color: var(--tinta-4); }

/* árvore grupo > empresa (pastas de clientes do Drive) */
.grupos-cab-acoes { display: flex; gap: 2px; }
.grupos-cab .btn-mini.carregando .ic { animation: girar .8s linear infinite; }
.grupo-seta { flex: none; align-self: stretch; width: 18px; margin-right: -6px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 6px; background: none; color: var(--tinta-4); cursor: pointer; }
span.grupo-seta { cursor: default; }
button.grupo-seta:hover { color: var(--marinho); background: rgba(29, 108, 242, .1); }
.grupo-seta .ic { transition: transform .15s; }
.grupo-seta.aberta .ic { transform: rotate(90deg); }
.empresas { display: flex; flex-direction: column; gap: 1px; margin: 1px 0 6px 31px; padding-left: 6px; border-left: 1px solid var(--linha); }
.empresa-item { position: relative; display: flex; align-items: center; border-radius: 8px; transition: background .15s, box-shadow .15s; }
.empresa-item:hover { background: rgba(29, 108, 242, .07); }
.empresa-item.ativo { background: #fff; box-shadow: 0 0 0 1px var(--linha), var(--sombra-1); }
.empresa-item.alvo-soltar { background: var(--azul-claro); box-shadow: inset 0 0 0 2px var(--azul-2); }
.arrastando-doc .empresa-item.solta { outline: 1px dashed #c3d5f3; outline-offset: -1px; }
.empresa-btn { flex: 1; min-width: 0; display: flex; align-items: center; gap: 7px; padding: 5px 6px; border: 0; background: none; cursor: pointer; text-align: left; border-radius: 8px; }
.empresa-cod { flex: none; width: 23px; font: 500 10.5px/1 var(--sans); color: var(--tinta-4); font-variant-numeric: tabular-nums; }
.empresa-nome { flex: 1; min-width: 0; font: 400 12px/1.35 var(--sans); color: var(--tinta-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.empresa-item.ativo .empresa-nome { color: var(--tinta); font-weight: 500; }
.empresa-item.ativo .empresa-cod { color: var(--azul); }
.empresa-item.inativa .empresa-nome { color: var(--tinta-4); text-decoration: line-through; text-decoration-color: rgba(102, 116, 138, .5); }
.empresa-item .grupo-qtd { min-width: 0; }
.empresa-item .grupo-mais { width: 24px; height: 24px; margin-right: 2px; }
.empresa-item:hover .grupo-mais, .empresa-item:focus-within .grupo-mais { display: inline-grid; }
.empresa-item:hover .grupo-qtd, .empresa-item:focus-within .grupo-qtd { display: none; }
.empresas .grupo-edicao .grupo-ic { width: 24px; height: 24px; }
.regime { flex: none; padding: 2px 5px; border-radius: 5px; font: 600 9.5px/1.2 var(--sans); letter-spacing: .05em; }
.chip.regime { height: 24px; padding: 0 10px; border-radius: 999px; font: 500 12px/1 var(--sans); letter-spacing: .02em; }
.regime-lr { background: #dde9fc; color: #1b4fae; }
.regime-lp { background: var(--papel-2); color: var(--tinta-2); }
.regime-sn, .regime-snh { background: var(--ok-fundo); color: var(--ok); }
.empresa-item.inativa .regime { opacity: .55; }

/* cabeçalho da empresa */
.eyebrow-link { padding: 0; border: 0; background: none; font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit; cursor: pointer; }
.eyebrow-link:hover { color: var(--azul); text-decoration: underline; text-underline-offset: 3px; }
.empresa-dados { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.chip-dado { background: #fff; color: var(--tinta-2); box-shadow: inset 0 0 0 1px var(--linha-2); }
.chip-dado .ic { color: var(--azul); }
.chip-inativa { background: var(--erro-fundo); color: var(--erro); }

/* aviso de nova versão (pasta de instalação) */
.aviso-atualizacao { position: fixed; left: 50%; top: 16px; transform: translateX(-50%); z-index: 96; width: min(760px, calc(100vw - 32px)); display: flex; align-items: center; gap: 12px; padding: 12px 12px 12px 14px; border-radius: 14px; background: var(--cartao); border: 1px solid #d6e4fb; box-shadow: var(--sombra-2); animation: entrar .22s ease-out; }
.aviso-atualizacao.seguranca { background: var(--erro-fundo); border-color: #ecb3b3; }
.aviso-atualizacao-ic { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--azul-claro); color: var(--marinho); }
.aviso-atualizacao.seguranca .aviso-atualizacao-ic { background: #fff; color: var(--erro); }
.aviso-atualizacao-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.aviso-atualizacao-txt strong { font: 600 14px/1.3 var(--sans); color: var(--tinta); }
.aviso-atualizacao-txt span { font-size: 13px; line-height: 1.4; color: var(--tinta-2); }
.aviso-atualizacao-txt small { font-size: 11.5px; color: var(--tinta-3); }
.aviso-atualizacao.seguranca .aviso-atualizacao-txt strong { color: var(--erro); }
.aviso-atualizacao-txt small.erro { color: var(--erro); font-weight: 500; }
.aviso-atualizacao-instalar { flex: none; }
.modal-fundo.atualizando { z-index: 97; cursor: progress; }
.atualizando-topo { display: flex; align-items: center; gap: 12px; }
.atualizando-topo h3 { margin: 0; }
.atualizando-topo .girando { flex: none; width: 16px; height: 16px; }
.atualizando .modal p { margin: 12px 0 4px; }

/* desenho societário: escolher empresas do grupo */
.modal-escolha { width: min(620px, 94vw); }
.des-escolha-caixa { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.des-escolha-manual { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; }
.des-escolha-topo { display: flex; align-items: center; gap: 14px; min-height: 24px; }
.des-escolha-topo .busca { flex: 1; width: auto; height: 38px; }
.des-escolha-qtd { margin-left: auto; font: 500 12.5px var(--sans); color: var(--marinho-2); }
.des-escolha { max-height: min(46vh, 420px); overflow: auto; display: flex; flex-direction: column; gap: 2px; padding: 4px; border: 1px solid var(--linha); border-radius: 12px; background: #fff; }
.des-escolha-item { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 8px; cursor: pointer; }
.des-escolha-item:hover { background: var(--azul-tenue); }
.des-escolha-item input { flex: none; width: 16px; height: 16px; accent-color: var(--azul); }
.des-escolha-item .empresa-cod { width: 26px; }
.des-escolha-nome { flex: 1; min-width: 0; display: flex; flex-direction: column; font: 500 13.5px/1.3 var(--sans); color: var(--tinta); }
.des-escolha-nome small { font: 400 11.5px/1.3 var(--sans); color: var(--tinta-4); }
.des-escolha-item.ja { cursor: default; opacity: .6; }
.des-escolha-item.ja:hover { background: none; }
.des-escolha-item.inativa .des-escolha-nome { color: var(--tinta-3); }
.des-dica-grupo { display: flex; align-items: center; gap: 6px; margin-top: 10px; font-size: 12.5px; color: var(--tinta-3); }
.des-dica-grupo .ic { flex: none; color: var(--azul); }

/* janela "Qual empresa?" vinda de uma empresa do menu e resumo da atualização pela pasta */
.cad-empresa { display: flex; align-items: flex-start; gap: 8px; margin: -2px 0 10px; padding: 9px 12px; border-radius: 10px; background: var(--azul-tenue); border: 1px solid #d6e4fb; font-size: 13.5px; color: var(--tinta-2); }
.cad-empresa .ic { flex: none; margin-top: 2px; color: var(--azul); }
.cad-empresa strong { color: var(--tinta); font-weight: 600; }
.cad-alerta { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 10px; padding: 9px 12px; border-radius: 10px; background: var(--aviso-fundo); color: var(--aviso); font-size: 13.5px; }
.cad-alerta .ic { flex: none; margin-top: 2px; }
.resumo-pasta { margin: 4px 0 0; padding-left: 18px; display: grid; gap: 8px; font-size: 14px; color: var(--tinta-2); }
.resumo-pasta strong { color: var(--tinta); font-weight: 600; }
.resumo-pasta .resumo-obs { color: var(--tinta-3); }

/* menu suspenso */
.menu { position: fixed; z-index: 95; min-width: 230px; max-width: 340px; max-height: min(70vh, 520px); overflow: auto; padding: 6px; border-radius: 13px; background: var(--cartao); border: 1px solid var(--linha); box-shadow: 0 2px 6px rgba(15, 27, 45, .08), 0 22px 50px -16px rgba(15, 27, 45, .38); animation: entrar .14s ease-out; }
.menu-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border: 0; background: none; border-radius: 8px; text-align: left; font: 400 14px var(--sans); color: var(--tinta-2); cursor: pointer; }
.menu-item:hover, .menu-item:focus-visible { background: var(--azul-tenue); color: var(--tinta); outline: none; }
.menu-item .ic { flex: none; color: var(--azul); }
.menu-item:disabled { opacity: .5; cursor: default; }
.menu-t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.menu-item.ativo { color: var(--tinta); font-weight: 500; }
.menu-item .menu-check { color: var(--azul); margin-left: auto; }
.menu-item.perigo, .menu-item.perigo .ic { color: var(--erro); }
.menu-item.perigo:hover, .menu-item.perigo:focus-visible { background: var(--erro-fundo); }
.menu-ic-vazio { width: 16px; flex: none; }
.menu-sep { height: 1px; background: var(--linha); margin: 5px 6px; }
.menu-titulo { padding: 8px 10px 4px; font: 500 10.5px var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--tinta-4); }

/* cabeçalho de grupo */
.hero.hero-grupo { padding: 34px 0 26px; max-width: none; }
.hero.hero-grupo h1 { margin-top: 14px; font: 600 38px/1.05 var(--titulo); letter-spacing: .005em; color: var(--tinta); }
.hero.hero-grupo p:not(.eyebrow) { margin-top: 10px; font-size: 16px; color: var(--tinta-3); font-weight: 400; max-width: 680px; }
.hero .eyebrow { margin: 0; font-size: 11px; font-weight: 500; line-height: 1; color: var(--marinho-2); }
.hero-grupo-linha { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 4px; }
.hero.hero-grupo .hero-grupo-linha p { margin-top: 6px; }
.hero-acoes { display: flex; gap: 4px; }
.btn-ghost.perigo:hover { background: var(--erro-fundo); color: var(--erro); }
.secao-titulo { margin: 4px 0 14px; font: 500 13px var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--marinho-2); }
.secao-titulo span { letter-spacing: .08em; color: var(--tinta-3); }
.rasc-grupo { display: inline-flex; align-items: center; gap: 5px; max-width: 100%; margin-bottom: 6px; font: 500 11px var(--sans); letter-spacing: .03em; color: var(--marinho-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rasc-grupo .ic { flex: none; color: var(--azul); }
.rasc.arrastando { opacity: .45; }
.rasc[draggable="true"] { cursor: pointer; }

/* grupo no editor */
.chip-grupo { cursor: pointer; background: #fff; color: var(--marinho-2); box-shadow: inset 0 0 0 1px var(--linha-2); max-width: 360px; transition: box-shadow .15s, background .15s; }
.chip-grupo span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chip-grupo .ic { flex: none; color: var(--azul); }
.chip-grupo .chip-seta { transform: rotate(90deg); color: var(--tinta-4); }
.chip-grupo:hover, .chip-grupo[aria-expanded="true"] { box-shadow: inset 0 0 0 1px var(--azul-2); background: var(--azul-tenue); }
.chip-grupo.sem-grupo { color: var(--tinta-3); background: transparent; box-shadow: inset 0 0 0 1px var(--linha-2); }
.hero { padding: 44px 0 34px; max-width: 760px; }
.hero h1 { font: 600 48px/1.02 var(--titulo); letter-spacing: -.01em; color: var(--tinta); }
.hero h1 em { display: block; font-style: normal; color: var(--azul); background: var(--gradiente-x); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; padding-bottom: 4px; }
.hero p { margin-top: 18px; font-size: 18px; line-height: 1.55; color: var(--tinta-3); font-weight: 300; max-width: 620px; }

.tipos { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 18px; }
.tipo {
  position: relative; overflow: hidden; text-align: left; cursor: pointer;
  display: flex; flex-direction: column; gap: 8px; min-height: 248px;
  padding: 28px 28px 24px; border-radius: 22px; border: 1px solid var(--linha); background: var(--cartao);
  box-shadow: var(--sombra-1); transition: transform .2s, box-shadow .2s, border-color .2s;
}
.tipo::after {
  content: ""; position: absolute; right: -30px; bottom: -30px; width: 118px; height: 118px;
  background: url("../img/simbolo.png") center / contain no-repeat; opacity: .045; transition: opacity .25s, transform .35s;
}
.tipo:hover { transform: translateY(-3px); box-shadow: var(--sombra-2); border-color: #c3d5f3; }
.tipo:hover::after { opacity: .11; transform: rotate(-6deg) scale(1.05); }
.tipo-ic { width: 54px; height: 54px; display: grid; place-items: center; border-radius: 15px; background: var(--azul-tenue); color: var(--marinho); border: 1px solid #d6e4fb; margin-bottom: 10px; }
.tipo strong { font: 600 21px/1.1 var(--titulo); color: var(--tinta); }
.tipo-resumo { color: var(--tinta-2); font-size: 15px; }
.tipo small { color: var(--tinta-3); font-size: 13.5px; line-height: 1.45; max-width: 92%; }
.tipo-ir { margin-top: auto; padding-top: 14px; display: inline-flex; align-items: center; gap: 8px; color: var(--azul); font: 500 13px var(--sans); letter-spacing: .14em; text-transform: uppercase; }
.tipo-ir .ic { transition: transform .2s; }
.tipo:hover .tipo-ir .ic { transform: translateX(4px); }

.rascunhos { margin-top: 56px; }
.rascunhos-cab { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 16px; }
.rascunhos-cab h2 { font: 600 25px var(--titulo); }
.busca { display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px; width: 340px; border: 1px solid var(--linha-2); border-radius: 10px; background: #fff; color: var(--tinta-3); }
.busca:focus-within { border-color: var(--azul); box-shadow: 0 0 0 3px rgba(29, 108, 242, .16); }
.busca input { border: 0; outline: 0; background: transparent; flex: 1; font: 400 14.5px var(--sans); color: var(--tinta); }

.rasc {
  display: grid; grid-template-columns: 46px minmax(0, 1fr) 210px auto; align-items: center; gap: 20px;
  padding: 16px 18px 16px 18px; margin-bottom: 10px; border-radius: 16px; border: 1px solid var(--linha);
  background: var(--cartao); cursor: pointer; transition: border-color .15s, box-shadow .15s;
}
.rasc:hover, .rasc:focus-visible { border-color: #c3d5f3; box-shadow: var(--sombra-1); outline: none; }
.rasc-ic { width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; }
.rasc-info { display: flex; flex-direction: column; min-width: 0; }
.rasc-info strong { font: 500 16px var(--sans); color: var(--tinta); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rasc-info small { color: var(--tinta-3); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rasc-nomes { color: var(--tinta-4) !important; }
.rasc-prog small { color: var(--tinta-3); font-size: 12.5px; }
.rasc-acoes { display: flex; align-items: center; gap: 2px; }
.rasc-acoes .btn { margin-right: 6px; }
.geral-barra { height: 6px; border-radius: 999px; background: var(--papel-2); overflow: hidden; margin-bottom: 6px; }
.geral-barra span { display: block; height: 100%; border-radius: inherit; background: var(--gradiente-x); transition: width .4s; }

.vazio { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 46px 20px; border: 1px dashed var(--linha-2); border-radius: 20px; background: rgba(255, 255, 255, .55); }
.vazio-marca { width: 54px; margin-bottom: 8px; }
.vazio strong { font: 600 20px var(--titulo); color: var(--tinta); }
.vazio span { color: var(--tinta-3); max-width: 420px; }
.vazio.pequeno { padding: 26px; }

.inicio-rodape { margin-top: auto; padding: 48px 0 30px; display: flex; justify-content: space-between; color: var(--tinta-4); font-size: 12.5px; letter-spacing: .04em; }
.inicio-rodape span:first-child { letter-spacing: .26em; text-transform: uppercase; font-size: 11px; color: var(--marinho-2); }

/* =================================================================
   EDITOR
   ================================================================= */
.editor { height: 100%; display: grid; grid-template-columns: 268px minmax(0, 1fr); }

.lateral { display: flex; flex-direction: column; background: var(--papel-3); border-right: 1px solid var(--linha); min-height: 0; }
.marca { border: 0; background: none; padding: 28px 26px 6px; cursor: pointer; text-align: left; }
.marca .logo { width: 176px; height: auto; transition: opacity .15s; }
.marca:hover .logo { opacity: .78; }
.lateral-eyebrow { margin: 10px 26px 22px; font-size: 10px; }
.passos { flex: 1; overflow: auto; padding: 0 14px; display: flex; flex-direction: column; gap: 4px; }
.passo {
  position: relative; display: grid; grid-template-columns: 30px minmax(0, 1fr); align-items: center; gap: 12px;
  text-align: left; padding: 11px 12px 13px; border: 1px solid transparent; border-radius: 13px; background: none; cursor: pointer;
  transition: background .15s, border-color .15s;
}
.passo:hover { background: rgba(29, 108, 242, .07); }
.passo-num {
  width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid var(--linha-2); background: #fff; color: var(--tinta-3); font: 500 13px var(--sans); transition: all .2s;
}
.passo-txt { display: flex; flex-direction: column; min-width: 0; }
.passo-txt strong { font: 500 14.5px/1.25 var(--sans); color: var(--tinta-2); }
.passo-txt small { color: var(--tinta-4); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.passo-barra { position: absolute; left: 54px; right: 14px; bottom: 6px; height: 2px; border-radius: 2px; background: var(--papel-2); overflow: hidden; opacity: 0; transition: opacity .2s; }
.passo-barra span { display: block; height: 100%; background: var(--azul-2); transition: width .4s; }
.passo.atual { background: #fff; border-color: var(--linha); box-shadow: var(--sombra-1); }
.passo.atual .passo-num { background: var(--tinta); border-color: var(--tinta); color: #ffffff; }
.passo.atual .passo-txt strong { color: var(--tinta); }
.passo.atual .passo-barra, .passo:hover .passo-barra { opacity: 1; }
.passo.completo .passo-num { background: var(--gradiente-x); border-color: transparent; color: #fff; }
.passo.completo .passo-txt small { color: var(--ok); }
.passo.com-erro .passo-num { border-color: #eeb4b4; color: var(--erro); font-weight: 600; }
.passo.com-erro.atual .passo-num { background: var(--erro); border-color: var(--erro); color: #fff; }
.lateral-rodape { padding: 18px 26px 22px; border-top: 1px solid var(--linha); }
.lateral-rodape .geral { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; font-size: 12.5px; color: var(--tinta-3); }
.lateral-rodape .geral strong { font: 600 18px var(--titulo); color: var(--tinta); }
.lateral-rodape p { margin-top: 14px; font-size: 10px; letter-spacing: .26em; text-transform: uppercase; color: var(--tinta-4); }

.centro { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.topo {
  height: 66px; flex: none; display: flex; align-items: center; gap: 14px; padding: 0 22px 0 14px;
  border-bottom: 1px solid var(--linha); background: rgba(246, 249, 253, .9); backdrop-filter: blur(8px); position: relative; z-index: 5;
}
.topo-titulo { display: flex; align-items: center; gap: 12px; min-width: 0; padding-left: 10px; border-left: 1px solid var(--linha); }
.topo-titulo strong { font: 500 16px var(--sans); color: var(--tinta); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 34vw; }
.salvo { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; color: var(--tinta-3); font-size: 12.5px; white-space: nowrap; }
.girando { width: 12px; height: 12px; border: 2px solid var(--azul); border-right-color: transparent; border-radius: 50%; animation: girar .7s linear infinite; }
@keyframes girar { to { transform: rotate(360deg); } }
.topo-acoes { display: flex; gap: 8px; }
.btn-previa { display: none; }

.area { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) clamp(400px, 37vw, 660px); }
.formulario { overflow: auto; container-type: inline-size; scroll-behavior: smooth; }
.form-interno { max-width: 880px; margin: 0 auto; padding: 38px 46px 70px; }

.passo-cab { margin-bottom: 26px; }
.passo-cab h2 { margin-top: 14px; font: 600 34px/1.05 var(--titulo); letter-spacing: -.005em; }
.passo-sub { margin-top: 8px; color: var(--tinta-3); font-size: 15.5px; max-width: 660px; }
.passo-status { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.passo-nav { display: flex; justify-content: space-between; align-items: center; margin-top: 34px; padding-top: 24px; border-top: 1px solid var(--linha); }

.cartao { background: var(--cartao); border: 1px solid var(--linha); border-radius: var(--raio); padding: 24px 26px 26px; box-shadow: var(--sombra-1); margin-bottom: 18px; }
.cartao-cab { margin-bottom: 18px; }
.cartao-cab h3 { font: 500 17.5px var(--sans); letter-spacing: .005em; }
.cartao-cab p { margin-top: 4px; color: var(--tinta-3); font-size: 14px; }

.nota { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; margin-bottom: 18px; border-radius: 13px; background: var(--azul-tenue); border: 1px solid #dbe7fb; color: var(--marinho-2); font-size: 14px; }
.nota .ic { margin-top: 2px; color: var(--azul); flex: none; }
.nota strong { color: var(--marinho); font-weight: 600; }

/* grade de 12 colunas */
.grade { display: grid; gap: 16px 16px; align-items: start; }
.grade-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
.grade-12 > * { grid-column: span 12; }
.grade-12 > .c-2 { grid-column: span 2; } .grade-12 > .c-3 { grid-column: span 3; } .grade-12 > .c-4 { grid-column: span 4; }
.grade-12 > .c-5 { grid-column: span 5; } .grade-12 > .c-6 { grid-column: span 6; } .grade-12 > .c-8 { grid-column: span 8; }
.grade-12 > .c-12 { grid-column: span 12; }
@container (max-width: 700px) {
  .grade-12 > .c-2, .grade-12 > .c-3 { grid-column: span 6; }
  .grade-12 > .c-4, .grade-12 > .c-5, .grade-12 > .c-6, .grade-12 > .c-8 { grid-column: span 12; }
  .form-interno { padding: 28px 24px 60px; }
}

/* campos */
.campo { display: flex; flex-direction: column; gap: 6px; min-width: 0; border-radius: 12px; }
.campo-rotulo { display: flex; align-items: baseline; gap: 8px; font: 500 13px/1.3 var(--sans); color: var(--tinta-2); letter-spacing: .01em; }
.campo-rotulo em { font-style: normal; font-weight: 400; font-size: 11.5px; color: var(--tinta-4); }
.espaco-cima { margin-top: 20px; margin-bottom: 8px; }
.campo-dica { font-size: 12.5px; color: var(--tinta-3); line-height: 1.4; }
.campo-erro { font-size: 12.5px; color: var(--erro); display: none; }
.campo.tem-erro .campo-erro { display: block; }
.campo.tem-erro input, .campo.tem-erro select { border-color: #ea9a9a; background: #fff8f8; }
input[type="text"], input[type="date"], input[type="search"], input[type="email"], input[type="password"], select, textarea {
  width: 100%; height: 42px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--linha-2); background: #fff;
  font: 400 15px var(--sans); color: var(--tinta); transition: border-color .15s, box-shadow .15s; outline: none;
}
.busca input { height: auto; padding: 0; border: 0; }
textarea { height: auto; padding: 10px 12px; line-height: 1.5; resize: vertical; min-height: 64px; }
select { appearance: none; padding-right: 34px; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%237b6e63' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 12px center; cursor: pointer; }
input:hover, select:hover, textarea:hover { border-color: #bccbe2; }
input:focus, select:focus, textarea:focus { border-color: var(--azul); box-shadow: 0 0 0 3px rgba(29, 108, 242, .17); }
input:disabled { background: var(--papel-3); color: var(--tinta-3); cursor: not-allowed; }
input::placeholder, textarea::placeholder { color: #a9b5c7; }
input.maiusc { text-transform: uppercase; }
input.maiusc::placeholder { text-transform: none; }
input[type="date"]::-webkit-calendar-picker-indicator { opacity: .55; cursor: pointer; }
.campo-com-botao { display: flex; gap: 8px; }
.campo-com-botao > input { flex: 1; min-width: 0; }
.campo-com-botao > .btn { height: 42px; flex: none; }
.campo-prefixo, .campo-sufixo { position: relative; }
.campo-prefixo > span { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: var(--tinta-3); font-size: 14px; pointer-events: none; }
.campo-prefixo > input { padding-left: 40px; text-align: right; font-variant-numeric: tabular-nums; }
.campo-sufixo > span { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: var(--tinta-3); pointer-events: none; }
.campo-sufixo > input { padding-right: 30px; }
.sugestao:empty { display: none; }
.pulsar { animation: pulsar 1.6s ease-out; }
@keyframes pulsar { 0% { box-shadow: 0 0 0 0 rgba(29, 108, 242, .55); } 40% { box-shadow: 0 0 0 10px rgba(29, 108, 242, .12); background: var(--azul-tenue); } 100% { box-shadow: 0 0 0 16px rgba(29, 108, 242, 0); } }

/* segmentos */
.segmentos { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 4px; border-radius: 12px; background: var(--papel-2); align-self: flex-start; justify-self: start; }
.seg { display: inline-flex; align-items: center; gap: 7px; border: 0; background: transparent; padding: 8px 14px; border-radius: 9px; cursor: pointer; color: var(--tinta-3); font: 500 13.5px/1.2 var(--sans); transition: background .15s, color .15s, box-shadow .15s; }
.seg:hover { color: var(--tinta); }
.seg.ativo { background: #fff; color: var(--tinta); box-shadow: 0 1px 2px rgba(15, 27, 45, .1), 0 2px 8px -4px rgba(15, 27, 45, .2); }
.seg.ativo .ic { color: var(--azul); }
.segmentos.compacto .seg { padding: 6px 11px; font-size: 12.5px; }
.alinhar-dir { display: flex; align-items: center; justify-content: flex-end; gap: 10px; flex-direction: row-reverse; }
.rotulo-lateral { font-size: 12px; color: var(--tinta-4); cursor: help; border-bottom: 1px dotted var(--tinta-4); }

/* chave liga/desliga */
.chave { display: flex; align-items: center; gap: 12px; cursor: pointer; user-select: none; }
.chave input { position: absolute; opacity: 0; pointer-events: none; }
.chave-trilho { flex: none; width: 42px; height: 24px; border-radius: 999px; background: var(--linha-2); position: relative; transition: background .2s; }
.chave-bola { position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .2); transition: transform .2s; }
.chave input:checked + .chave-trilho { background: var(--azul); }
.chave input:checked + .chave-trilho .chave-bola { transform: translateX(18px); }
.chave input:focus-visible + .chave-trilho { outline: 2px solid var(--azul); outline-offset: 2px; }
.chave-texto { display: flex; flex-direction: column; }
.chave-texto strong { font: 500 14.5px var(--sans); color: var(--tinta); }
.chave-texto small { font-size: 12.5px; color: var(--tinta-3); }

/* alterações */
.alt-lista { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 18px; }
@container (max-width: 700px) { .alt-lista { grid-template-columns: 1fr; } }
.alt-item { padding: 14px 16px; border: 1px solid var(--linha); border-radius: 13px; background: #fff; transition: border-color .15s, background .15s; }
.alt-item:has(input:checked) { border-color: #b9cff4; background: var(--azul-tenue); grid-column: 1 / -1; }
.alt-corpo { display: grid; gap: 12px; margin-top: 14px; padding-top: 14px; border-top: 1px dashed #d5e2f7; }

/* CNAEs */
.cnaes { display: flex; flex-direction: column; gap: 8px; }
.cnae-cab, .cnae-linha { display: grid; grid-template-columns: 130px minmax(0, 1fr) 64px 34px; gap: 8px; align-items: center; }
.cnae-cab span { font-size: 11.5px; text-transform: uppercase; letter-spacing: .12em; color: var(--tinta-4); }
.cnae-cab span:nth-child(3) { text-align: center; }
.cnae-principal { justify-self: center; width: 34px; height: 34px; border-radius: 9px; border: 1px solid var(--linha-2); background: #fff; color: var(--tinta-4); cursor: pointer; display: grid; place-items: center; }
.cnae-principal:hover { color: var(--azul); border-color: var(--azul-2); }
.cnae-principal.ativo { background: var(--azul); border-color: var(--azul); color: #fff; }
.cnae-principal.ativo .ic { fill: currentColor; }
.linha-botoes { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 6px; }
.linha-botoes.entre { justify-content: space-between; margin-top: 16px; }
input.invalido, .campo.tem-erro input.invalido { border-color: #ea9a9a; background: #fff8f8; }

/* contrato de locação */
.veiculos { display: flex; flex-direction: column; gap: 12px; }
.veiculo { padding: 14px 16px 16px; border: 1px solid var(--linha); border-radius: 14px; background: #fff; }
.veiculo-cab { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.veiculo-cab strong { flex: 1; font: 600 14.5px var(--sans); color: var(--tinta); letter-spacing: .02em; }
.veiculo-ic { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 9px; background: var(--azul-tenue); color: var(--marinho); border: 1px solid #d6e4fb; }
.precos { display: flex; flex-direction: column; gap: 8px; }
.preco-linha { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 12px; align-items: center; padding: 10px 12px; border: 1px solid var(--linha); border-radius: 12px; background: #fff; }
.preco-veic { display: flex; flex-direction: column; min-width: 0; }
.preco-veic strong { font: 600 15px var(--sans); letter-spacing: .04em; color: var(--tinta); }
.preco-veic small { font-size: 12.5px; color: var(--tinta-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.itens-preco { display: flex; flex-direction: column; gap: 10px; }
.item-preco { display: grid; grid-template-columns: 44px minmax(0, 1fr) 34px; gap: 8px; align-items: start; }
.item-num { padding-top: 11px; font: 600 14px var(--sans); color: var(--tinta-3); text-align: right; }
.item-preco .btn-icone { margin-top: 4px; }
.restaurar { margin-top: 8px; }
.restaurar:empty, .copiar-rep:empty { display: none; }
.restaurar .link, .copiar-rep .link { display: inline-flex; align-items: center; gap: 6px; }
.copiar-rep { margin: 14px 0 2px; }

/* sócios */
.socios { display: flex; flex-direction: column; gap: 12px; }
.socio { border: 1px solid var(--linha); border-radius: var(--raio); background: var(--cartao); box-shadow: var(--sombra-1); scroll-margin-top: 20px; }
.socio.aberto { border-color: #d3e0f5; }
.socio-cab { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto auto 20px; align-items: center; gap: 14px; padding: 14px 18px; cursor: pointer; border-radius: var(--raio); }
.socio-cab:hover { background: rgba(241, 246, 255, .6); }
.avatar { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--gradiente-x); color: #fff; font: 600 15px/1 var(--titulo); letter-spacing: .04em; flex: none; box-shadow: 0 4px 10px -4px rgba(22, 52, 95, .5); }
.socio-tit { display: flex; flex-direction: column; min-width: 0; }
.socio-tit strong { font: 500 16px var(--sans); color: var(--tinta); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.socio-tit small { color: var(--tinta-3); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.socio-estado { display: flex; gap: 6px; }
.socio-seta { color: var(--tinta-4); transition: transform .2s; display: grid; }
.socio.aberto .socio-seta { transform: rotate(90deg); }
.socio-corpo { padding: 6px 22px 24px; border-top: 1px solid var(--linha); }
.socio-corpo > .grade:first-child { padding-top: 16px; margin-bottom: 18px; }
.subbloco { padding: 16px 18px 6px; margin: 0 -4px 18px; border-radius: 13px; background: var(--papel-3); border: 1px solid var(--linha); }
.subbloco h4 { display: flex; align-items: center; gap: 8px; font: 500 14px var(--sans); color: var(--marinho); margin-bottom: 14px; letter-spacing: .02em; }
.subbloco h4 .ic { color: var(--azul); }
.subbloco h4.espaco-cima { margin-top: 18px; }
.adicionar { margin-top: 14px; width: 100%; height: 50px; border-style: dashed; color: var(--marinho); }

/* capital */
.indicador { align-self: stretch; display: flex; flex-direction: column; justify-content: center; padding: 8px 16px; border-radius: 12px; border: 1px dashed var(--linha-2); background: var(--papel-3); min-height: 66px; }
.indicador small { font-size: 11.5px; text-transform: uppercase; letter-spacing: .14em; color: var(--tinta-4); }
.indicador strong { font: 600 21px/1.15 var(--titulo); color: var(--tinta); }
.indicador span, .indicador em { font-size: 12.5px; color: var(--tinta-3); }
.indicador.claro em { font: 600 14px var(--titulo); color: var(--tinta-2); }
.extenso { margin-top: 16px; font-size: 14px; color: var(--tinta-3); }
.extenso em { font: 600 15px var(--titulo); color: var(--marinho); }
.barra-quotas { display: flex; height: 12px; border-radius: 999px; background: repeating-linear-gradient(-45deg, var(--papel-2) 0 6px, var(--papel-3) 6px 12px); overflow: hidden; margin-bottom: 16px; gap: 2px; }
.barra-quotas span { height: 100%; transition: width .35s; }
.barra-quotas span:first-child { border-radius: 999px 0 0 999px; }
.tabela-quotas { width: 100%; border-collapse: collapse; }
.tabela-quotas th { text-align: left; font: 500 11px var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--tinta-4); padding: 0 8px 8px; border-bottom: 1px solid var(--linha); }
.tabela-quotas td { padding: 8px; border-bottom: 1px solid var(--linha); vertical-align: middle; }
.tabela-quotas td:first-child { display: flex; align-items: center; gap: 10px; color: var(--tinta); font-weight: 500; min-height: 58px; }
.tabela-quotas tfoot td { border-bottom: 0; font-weight: 600; color: var(--tinta); }
.tabela-quotas .num { text-align: right; font-variant-numeric: tabular-nums; }
.tabela-quotas input.num { width: 130px; margin-left: auto; display: block; }
.tabela-quotas .campo-sufixo { width: 116px; margin-left: auto; }
.tabela-quotas .campo-sufixo input.num { width: 100%; }
.tabela-quotas .valor { color: var(--tinta-2); white-space: nowrap; }
.ponto { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.quotas-status { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; }

/* administração */
.lista-adm { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@container (max-width: 700px) { .lista-adm { grid-template-columns: 1fr; } }
.opcao-adm { position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr) 26px; gap: 12px; align-items: center; padding: 14px 16px; border-radius: 14px; border: 1px solid var(--linha); background: #fff; cursor: pointer; transition: border-color .15s, background .15s, box-shadow .15s; }
.opcao-adm input { position: absolute; opacity: 0; pointer-events: none; }
.opcao-adm:hover { border-color: #c3d5f3; }
.opcao-adm.ativo { border-color: var(--azul-2); background: var(--azul-tenue); box-shadow: 0 0 0 3px rgba(29, 108, 242, .1); }
.opcao-adm:focus-within { outline: 2px solid var(--azul); outline-offset: 2px; }
.opcao-adm .avatar { filter: grayscale(.85) opacity(.65); transition: filter .2s; }
.opcao-adm.ativo .avatar { filter: none; }
.opcao-texto { display: flex; flex-direction: column; min-width: 0; }
.opcao-texto strong { color: var(--tinta); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.opcao-texto small { color: var(--tinta-3); font-size: 12.5px; }
.marca-x, .opcao-adm .marca { width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--linha-2); display: grid; place-items: center; color: transparent; transition: all .2s; padding: 0; background: #fff; }
.opcao-adm.ativo .marca { background: var(--azul); border-color: var(--azul); color: #fff; }

/* revisão */
.resumo { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 28px; align-items: center; }
.anel { width: 132px; height: 132px; border-radius: 50%; display: grid; place-content: center; text-align: center; position: relative;
  background: conic-gradient(var(--azul) calc(var(--p) * 1%), var(--papel-2) 0); }
.anel::before { content: ""; position: absolute; inset: 9px; border-radius: 50%; background: var(--cartao); }
.anel strong, .anel small { position: relative; }
.anel strong { font: 600 28px/1 var(--titulo); color: var(--tinta); }
.anel small { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--tinta-3); }
.resumo-dados h3 { font: 600 23px/1.15 var(--titulo); margin: 10px 0 12px; }
.resumo-dados dl { margin: 0; display: grid; gap: 6px; }
.resumo-dados dl div { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 12px; font-size: 14px; }
.resumo-dados dt { color: var(--tinta-4); font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; padding-top: 2px; }
.resumo-dados dd { margin: 0; color: var(--tinta-2); }
.pend-grupo + .pend-grupo { margin-top: 18px; }
.pend-grupo h4 { display: flex; align-items: center; gap: 8px; font: 500 14px var(--sans); color: var(--marinho); margin-bottom: 8px; }
.pend-grupo h4 .ic { color: var(--azul); }
.pend-grupo ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.pend button { width: 100%; display: grid; grid-template-columns: 18px minmax(0, 1fr) auto 16px; align-items: center; gap: 10px; text-align: left; padding: 9px 12px; border-radius: 10px; border: 1px solid transparent; background: var(--papel-3); cursor: pointer; font-size: 14px; transition: background .15s, border-color .15s; }
.pend button:hover { background: #fff; border-color: var(--linha-2); }
.pend button em { font-style: normal; font-size: 11.5px; color: var(--tinta-4); letter-spacing: .06em; }
.pend button > .ic:last-child { color: var(--tinta-4); }
.pend-erro button > .ic:first-child { color: var(--erro); }
.pend-lacuna button > .ic:first-child { color: var(--azul); }
.pend-aviso button > .ic:first-child { color: var(--aviso); }
.tudo-certo { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 18px; text-align: center; color: var(--ok); }
.tudo-certo strong { font: 600 20px var(--titulo); color: var(--tinta); }
.tudo-certo span { color: var(--tinta-3); }
.exportar { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
@container (max-width: 700px) { .exportar { grid-template-columns: 1fr; } }
.exp { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 18px 18px 16px; text-align: left; border-radius: 15px; border: 1px solid var(--linha-2); background: #fff; cursor: pointer; transition: transform .15s, box-shadow .15s, border-color .15s; }
.exp:hover { transform: translateY(-2px); box-shadow: var(--sombra-2); border-color: var(--azul-2); }
.exp .ic { color: var(--azul); margin-bottom: 8px; }
.exp strong { font: 500 16px var(--sans); color: var(--tinta); }
.exp small { color: var(--tinta-3); font-size: 12.5px; }
.exp-pdf { background: var(--tinta); border-color: var(--tinta); }
.exp-pdf strong { color: #ffffff; }
.exp-pdf small { color: #b7c3d4; }
.exp-pdf .ic { color: var(--azul-2); }
.exp-pdf:hover { border-color: var(--tinta); }
.proximos { margin: 0; padding-left: 20px; display: grid; gap: 8px; color: var(--tinta-2); font-size: 14.5px; }
.proximos li::marker { color: var(--azul); font-weight: 600; }
.proximos strong { color: var(--tinta); font-weight: 500; }

/* ---------- pré-visualização ---------- */
.previa { display: flex; flex-direction: column; min-height: 0; background: #e2e9f3; border-left: 1px solid var(--linha); }
.previa-barra { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px 12px 20px; background: rgba(243, 246, 251, .92); border-bottom: 1px solid var(--linha); }
.previa-barra > div:first-child { display: flex; flex-direction: column; min-width: 0; }
.previa-barra strong { font: 500 11px var(--sans); letter-spacing: .26em; text-transform: uppercase; color: var(--marinho-2); }
.previa-barra small { color: var(--tinta-3); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.previa-ctrl { display: flex; align-items: center; gap: 2px; }
.zoom-valor { font-size: 12px; color: var(--tinta-3); width: 40px; text-align: center; font-variant-numeric: tabular-nums; }
.chip-lacunas { cursor: pointer; background: var(--azul-claro); color: #1b4fae; margin-right: 8px; }
.chip-lacunas.zero { background: var(--ok-fundo); color: var(--ok); }
.chip-lacunas.desligado { background: var(--papel-2); color: var(--tinta-3); text-decoration: line-through; }
.folha-caixa { flex: 1; overflow: auto; padding: 24px; scroll-behavior: smooth; }
.folha {
  width: 794px; min-height: 1123px; margin: 0 auto; background: #fff; padding: 113px 76px 90px 113px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .08), 0 14px 40px -12px rgba(15, 27, 45, .35);
}
.folha [data-passo] { position: relative; cursor: pointer; border-radius: 3px; transition: background .2s; }
.folha [data-passo]:hover { background: rgba(29, 108, 242, .07); }
.folha [data-passo].ativo::before { content: ""; position: absolute; left: -22px; top: 3px; bottom: 3px; width: 4px; border-radius: 3px; background: var(--azul-2); }
.folha mark.lacuna {
  background: #e6efff; color: #1b4fae; border-bottom: 1.5px dashed var(--azul); border-radius: 3px; padding: 0 4px;
  font: 500 .74em/1.35 var(--sans); letter-spacing: .05em; text-transform: uppercase; white-space: nowrap;
  display: inline-block; text-align: left; text-indent: 0;
}
.folha.sem-destaque mark.lacuna { background: none; color: transparent; border-bottom: 1px solid #222; border-radius: 0; }
.so-estreito { display: none !important; }

/* ---------- avisos e janelas ---------- */
.toasts { position: fixed; right: 24px; bottom: 24px; z-index: 100; display: flex; flex-direction: column; gap: 10px; align-items: flex-end; }
.toast { display: flex; align-items: center; gap: 12px; min-width: 300px; max-width: 520px; padding: 12px 10px 12px 14px; border-radius: 13px; background: var(--tinta); color: #eef3f9; box-shadow: 0 14px 34px -12px rgba(15, 27, 45, .6); animation: entrar .25s ease-out; font-size: 14px; }
.toast.saindo { animation: sair .22s ease-in forwards; }
.toast-ic { display: grid; color: var(--azul-2); }
.toast-ok .toast-ic { color: #8fd3a8; }
.toast-erro .toast-ic { color: #f3a3a3; }
.toast-msg { flex: 1; }
.toast-acao { border: 0; background: rgba(255, 255, 255, .08); color: #b9d3fb; padding: 6px 10px; border-radius: 8px; cursor: pointer; font: 500 12.5px var(--sans); white-space: nowrap; }
.toast-acao:hover { background: rgba(255, 255, 255, .16); }
.toast-x { border: 0; background: none; color: #8f9bb0; cursor: pointer; display: grid; padding: 4px; border-radius: 6px; }
.toast-x:hover { color: #fff; }
@keyframes entrar { from { opacity: 0; transform: translateY(10px) scale(.98); } }
@keyframes sair { to { opacity: 0; transform: translateY(6px); } }
.modal-fundo { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; background: rgba(15, 27, 45, .42); backdrop-filter: blur(3px); animation: aparecer .18s ease-out; }
.modal-fundo.saindo { animation: sumir .18s ease-in forwards; }
.modal { width: min(500px, 92vw); padding: 28px 28px 22px; border-radius: 20px; background: var(--cartao); box-shadow: 0 30px 80px -20px rgba(15, 27, 45, .55); animation: entrar .22s ease-out; }
.modal h3 { font: 600 22px/1.15 var(--titulo); }
.modal p { margin-top: 10px; color: var(--tinta-2); }
.modal-acoes { display: flex; justify-content: flex-end; gap: 10px; margin-top: 24px; }
@keyframes aparecer { from { opacity: 0; } }
@keyframes sumir { to { opacity: 0; } }

/* ---------- telas menores ---------- */
@media (max-width: 1280px) {
  .area { grid-template-columns: minmax(0, 1fr); }
  .previa { display: none; }
  .btn-previa { display: inline-flex; }
  .so-estreito { display: grid !important; }
  .previa-aberta .previa { display: flex; position: fixed; top: 66px; right: 0; bottom: 0; width: min(640px, 94vw); z-index: 40; box-shadow: -30px 0 60px -20px rgba(15, 27, 45, .45); animation: deslizar .22s ease-out; }
  .previa-aberta .btn-previa { background: rgba(29, 108, 242, .12); color: var(--marinho); }
}
@keyframes deslizar { from { transform: translateX(40px); opacity: 0; } }
@media (max-width: 1180px) {
  .editor { grid-template-columns: 228px minmax(0, 1fr); }
  .inicio-app { grid-template-columns: 250px minmax(0, 1fr); }
  .inicio { padding: 0 28px; }
  .marca .logo { width: 150px; }
  .tipos { grid-template-columns: 1fr; }
  .tipo { min-height: 0; }
  .rasc { grid-template-columns: 46px minmax(0, 1fr) auto; }
  .rasc-prog { display: none; }
}

/* =================================================================
   CADASTRO POR CNPJ
   ================================================================= */
.chip-desenho { background: #e4eaf3; color: var(--marinho); }
.cadastro { border: 1px solid #d9e5f7; background: linear-gradient(180deg, #f7faff, #ffffff); border-radius: 12px; padding: 12px 14px; }
.cad-topo { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 9px; }
.cad-fonte { display: inline-flex; align-items: center; gap: 6px; font: 500 10.5px var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--ok); }
.cad-data { margin-left: auto; font-size: 11.5px; color: var(--tinta-4); }
.cadastro dl { margin: 0; display: grid; gap: 8px; }
.cad-linha { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 10px; align-items: baseline; }
.cad-linha dt { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--tinta-3); }
.cad-linha dt .ic { color: var(--azul); flex: none; }
.cad-linha dd { margin: 0; font-size: 14px; color: var(--tinta); font-weight: 500; overflow-wrap: anywhere; }
.cadastro.compacto { padding: 10px 12px; }
.cadastro.compacto .cad-linha { grid-template-columns: 1fr; gap: 1px; }
.cadastro.compacto .cad-linha dt { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; }
.cadastro.compacto .cad-linha dd { font-size: 13px; }
.modal-cadastro { width: min(640px, 94vw); }
.cad-busca { display: flex; gap: 8px; margin-top: 18px; }
.cad-busca input[type="text"] { flex: 1; height: 48px; font-size: 18px; letter-spacing: .05em; font-variant-numeric: tabular-nums; }
.cad-busca .btn { height: 48px; }
.cad-resultado { margin-top: 14px; }
.cad-resultado:empty { display: none; }
.cad-carregando, .cad-erro { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 10px; font-size: 14px; }
.cad-carregando { background: var(--papel-3); color: var(--tinta-3); }
.cad-erro { background: var(--erro-fundo); color: var(--erro); }
.modal-acoes .cad-manual { margin-right: auto; align-self: center; }
.btn:disabled:not(.carregando) { cursor: not-allowed; }

@media (max-width: 1500px) {
  .tipos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tipo { min-height: 0; }
}

/* =================================================================
   DESENHO SOCIETÁRIO
   ================================================================= */
.desenho { height: 100%; display: flex; flex-direction: column; }
.des-corpo { flex: 1; min-height: 0; display: grid; grid-template-columns: 384px minmax(0, 1fr); }
.des-painel { overflow: auto; padding: 18px 16px 24px; background: var(--papel-3); border-right: 1px solid var(--linha); display: flex; flex-direction: column; gap: 12px; }
.des-cartao { background: var(--cartao); border: 1px solid var(--linha); border-radius: 14px; padding: 16px; box-shadow: var(--sombra-1); }
.des-cartao > header { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.des-cartao h3 { font: 500 15px var(--sans); }
.des-texto { font-size: 13.5px; color: var(--tinta-3); margin-bottom: 10px; }
.des-dica { display: flex; gap: 8px; align-items: flex-start; font-size: 12.5px; color: var(--tinta-3); margin-top: 10px; }
.des-dica .ic { color: var(--azul); flex: none; margin-top: 2px; }
.des-arquivo { display: flex; gap: 12px; align-items: center; margin-bottom: 10px; }
.des-arquivo-ic { width: 40px; height: 40px; flex: none; border-radius: 10px; display: grid; place-items: center; background: var(--azul-tenue); color: var(--azul); border: 1px solid #d6e4fb; }
.des-arquivo strong { display: block; font-weight: 500; color: var(--tinta); overflow-wrap: anywhere; }
.des-arquivo small { color: var(--tinta-3); font-size: 12px; }
.des-numeros { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.des-numeros div { background: var(--papel-3); border: 1px solid var(--linha); border-radius: 10px; padding: 8px 10px; }
.des-numeros strong { display: block; font: 600 21px/1.1 var(--titulo); color: var(--tinta); }
.des-numeros small { font-size: 11.5px; color: var(--tinta-3); }
.des-alertas ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.des-alertas li { display: flex; gap: 8px; font-size: 12.5px; line-height: 1.4; color: var(--aviso); background: var(--aviso-fundo); padding: 8px 10px; border-radius: 8px; }
.des-alertas li .ic { flex: none; margin-top: 2px; }
.des-alertas .contador { margin-left: 0; background: var(--aviso-fundo); color: var(--aviso); }
.des-detalhe { border-color: var(--azul-2); box-shadow: 0 0 0 3px rgba(29, 108, 242, .12), var(--sombra-1); animation: entrar .18s ease-out; }
.des-detalhe > header { align-items: flex-start; }
.des-det-ic { width: 38px; height: 38px; flex: none; border-radius: 10px; display: grid; place-items: center; }
.des-det-ic.pj { background: var(--gradiente-x); color: #fff; }
.des-det-ic.pf { background: var(--azul-tenue); color: var(--azul); border: 1px solid #d6e4fb; border-radius: 50%; }
.des-det-tit { flex: 1; min-width: 0; }
.des-det-tit h3 { font: 600 14px/1.3 var(--sans); text-transform: uppercase; letter-spacing: .01em; color: var(--tinta); }
.des-det-tit small { color: var(--tinta-3); font-size: 12px; }
.des-detalhe .cadastro, .des-detalhe > .linha-botoes, .des-detalhe > .des-dica { margin-top: 4px; }
.des-bloco { margin-top: 14px; }
.des-bloco h4 { display: flex; justify-content: space-between; align-items: baseline; font: 500 11px var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--marinho-2); margin-bottom: 6px; }
.des-soma { letter-spacing: .04em; color: var(--ok); text-transform: none; font-size: 12px; }
.des-soma.erro { color: var(--erro); }
.des-vinculos { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 3px; }
.des-vinculos .des-v-ir { width: 100%; min-width: 0; display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 9px; align-items: center; padding: 7px 4px 7px 10px; border: 0; border-radius: 8px; background: transparent; cursor: pointer; text-align: left; font-size: 13px; color: var(--tinta-2); }
.des-vinculos .des-v-ir:hover { color: var(--tinta); }
.des-vinculo { display: grid; grid-template-columns: minmax(0, 1fr) 76px 28px; gap: 4px; align-items: center; border-radius: 8px; background: var(--papel-3); padding-right: 4px; transition: background .15s; }
.des-vinculo:hover { background: var(--azul-tenue); }
.des-vinculos .ic { color: var(--azul); }
.des-vinculos strong { color: var(--marinho); font-weight: 600; font-variant-numeric: tabular-nums; }
.des-v-nome { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.des-v-nome small { display: block; font-size: 11px; color: var(--tinta-4); }

.des-palco { position: relative; min-width: 0; min-height: 0; overflow: hidden; background: radial-gradient(circle at 1px 1px, #dbe3ee 1px, transparent 0) 0 0 / 22px 22px, #eef2f8; }
.des-palco.soltando::after { content: "Solte a planilha aqui"; position: absolute; inset: 16px; z-index: 5; border: 2px dashed var(--azul-2); border-radius: 18px; background: rgba(241, 246, 255, .88); display: grid; place-items: center; font: 600 21px var(--titulo); color: var(--marinho); }
.des-tela { position: absolute; inset: 0; cursor: grab; touch-action: none; }
.des-tela.arrastando { cursor: grabbing; }
.des-camada { position: absolute; left: 0; top: 0; transform-origin: 0 0; will-change: transform; }
.des-camada svg { display: block; overflow: visible; }
.org-svg .apagada { opacity: .25; transition: opacity .2s; }
.org-no:hover > rect:first-of-type { stroke: #3b8cff; }
.des-ferramentas { position: absolute; top: 14px; right: 14px; display: flex; align-items: center; gap: 2px; padding: 4px; border-radius: 12px; background: rgba(255, 255, 255, .96); border: 1px solid var(--linha); box-shadow: var(--sombra-1); }
.des-legenda { position: absolute; left: 14px; bottom: 14px; right: 14px; display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: center; padding: 8px 12px; border-radius: 10px; background: rgba(255, 255, 255, .94); border: 1px solid var(--linha); font-size: 12px; color: var(--tinta-3); pointer-events: none; width: fit-content; }
.des-legenda i { display: inline-block; width: 14px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.des-legenda .lg-pj { background: #fff; border: 1px solid #cfd9e8; }
.des-legenda .lg-pf { background: #f4f8ff; border: 1px solid #d8e4f6; border-radius: 6px; }
.des-legenda .lg-pr { border: 2px solid var(--azul); }
.des-legenda .lg-dica { color: var(--tinta-4); }
.des-vazio { position: absolute; inset: 0; overflow: auto; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; padding: 30px; }
.des-soltar { width: min(580px, 100%); display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 34px 30px 30px; border: 2px dashed #c3d5f3; border-radius: 22px; background: rgba(255, 255, 255, .85); }
.des-soltar-ic { width: 72px; height: 72px; border-radius: 20px; display: grid; place-items: center; background: var(--azul-tenue); color: var(--azul); border: 1px solid #d6e4fb; margin-bottom: 8px; }
.des-soltar strong { font: 600 22px/1.15 var(--titulo); color: var(--tinta); }
.des-soltar > span { color: var(--tinta-3); }
.linha-botoes.centro { justify-content: center; margin-top: 14px; }
.des-formato { width: min(780px, 100%); background: var(--cartao); border: 1px solid var(--linha); border-radius: 16px; padding: 16px 18px; font-size: 13px; color: var(--tinta-2); }
.des-formato table { width: 100%; border-collapse: collapse; margin: 10px 0 4px; font-size: 12px; }
.des-formato th { text-align: left; background: var(--azul); color: #fff; font-weight: 500; padding: 6px 8px; }
.des-formato td { padding: 6px 8px; border-bottom: 1px solid var(--linha); color: var(--tinta-3); }
@media (max-width: 1280px) { .des-corpo { grid-template-columns: 330px minmax(0, 1fr); } }
/* desenho editável: arrastar balões, regime e ferramentas */
.des-tela .org-no { cursor: grab; }
.des-tela.movendo-no, .des-tela.movendo-no .org-no { cursor: grabbing; }
.org-svg .org-no.movendo { opacity: .96; }
.des-ferramentas { gap: 4px; }
.des-ferramentas .btn-p { height: 32px; padding: 0 10px; font-size: 13px; }
.des-sep { width: 1px; height: 22px; background: var(--linha); margin: 0 4px; }
.espaco-cima-p { margin-top: 10px; }
.cad-obs { display: block; margin-top: 2px; font-size: 11px; font-weight: 400; color: var(--tinta-4); }
.des-regimes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.des-regime { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 36px; padding: 6px 8px; border-radius: 9px; border: 1px solid var(--linha-2); background: #fff; color: var(--tinta-2); font: 500 12.5px/1.2 var(--sans); cursor: pointer; text-align: center; transition: border-color .15s, background .15s, color .15s; }
.des-regime:hover { border-color: var(--azul-2); color: var(--marinho); }
.des-regime.ativo { background: var(--azul); border-color: var(--azul); color: #fff; }
.des-posicao { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; font-size: 12.5px; color: var(--tinta-3); padding-top: 12px; border-top: 1px dashed var(--linha); }
.des-posicao .ic { color: var(--azul); }
/* desenho montado manualmente */
.des-opcoes { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: stretch; gap: 18px; width: min(1000px, 100%); }
.des-opcoes .des-soltar { width: auto; }
.des-ou { align-self: center; font: 600 16px var(--titulo); color: var(--tinta-4); }
.des-manual { border-style: solid; border-color: var(--linha-2); }
.des-manual .des-soltar-ic { background: var(--tinta); color: var(--azul-2); border-color: var(--tinta); }
@media (max-width: 1280px) { .des-opcoes { grid-template-columns: 1fr; } .des-ou { justify-self: center; } }
.des-acoes { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 2px; }
.des-pct-caixa { position: relative; display: block; }
.des-pct-caixa input.des-pct { width: 100%; height: 30px; padding: 0 20px 0 8px; text-align: right; font: 600 13px var(--sans); color: var(--marinho); border-radius: 7px; border-color: transparent; background: rgba(255, 255, 255, .7); font-variant-numeric: tabular-nums; }
.des-pct-caixa input.des-pct:hover { border-color: var(--linha-2); }
.des-pct-caixa input.des-pct:focus { border-color: var(--azul); background: #fff; }
.des-pct-caixa > span { position: absolute; right: 7px; top: 50%; transform: translateY(-50%); font-size: 12px; color: var(--tinta-4); pointer-events: none; }
.des-vinculo .btn-mini { width: 26px; height: 26px; }
.des-editado { display: inline-flex !important; align-items: center; gap: 4px; color: var(--azul) !important; }
.link.perigo { color: var(--erro); text-decoration-color: rgba(210, 59, 59, .35); }
.des-excluir { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; }
.des-dica.sem-margem { margin-top: 0; }
.modal-form { width: min(560px, 94vw); }
.form-balao { display: flex; flex-direction: column; gap: 14px; margin-top: 16px; }
.form-bloco { display: flex; flex-direction: column; gap: 14px; }
.form-balao .segmentos { align-self: flex-start; }
.campo-dica.erro { color: var(--erro); }
.dialogo-erro { display: none; margin-top: 14px; padding: 10px 12px; border-radius: 10px; background: var(--erro-fundo); color: var(--erro); font-size: 13.5px; }
.dialogo-erro.visivel { display: block; }
.des-ferramentas .btn-pri.btn-p { color: #ffffff; }
/* janela "Gerar PDF" do desenho societário */
.modal-pdf { width: min(940px, 96vw); }
.pdf-opcoes { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 26px; margin-top: 14px; align-items: start; }
.pdf-campos { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.pdf-chaves { display: flex; flex-direction: column; gap: 10px; padding: 12px 14px; border: 1px solid var(--linha); border-radius: 12px; background: var(--papel-3); }
.chave.desativada { opacity: .55; cursor: not-allowed; }
.pdf-lado-previa { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 14px; border-radius: 14px; background: #e2e9f3; min-width: 330px; }
.pdf-lado-previa .eyebrow { align-self: flex-start; font-size: 10px; }
.pdf-previa { position: relative; overflow: hidden; background: #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, .08), 0 18px 40px -16px rgba(15, 27, 45, .4); transition: width .2s, height .2s; }
.pdf-folha { position: absolute; left: 0; top: 0; transform-origin: 0 0; background: #fff; box-sizing: border-box; }
.pdf-folha-rodape { position: absolute; left: 13mm; right: 13mm; bottom: 6mm; font: 7.5pt Arial, sans-serif; color: #9aa6b8; }
.pdf-previa-rot { font-size: 12px; color: var(--tinta-3); letter-spacing: .02em; }
@media (max-width: 1000px) { .pdf-opcoes { grid-template-columns: 1fr; } .pdf-lado-previa { min-width: 0; } }
/* cartão Exportar no painel */
.des-exportar { display: flex; flex-direction: column; gap: 8px; }
.des-exportar > header { margin-bottom: 2px; }
.exp.exp-largo { width: 100%; padding: 14px 16px; }
.exp.exp-largo .ic { margin-bottom: 4px; }
.des-exportar > .btn-ghost { align-self: flex-start; }
/* =================================================================
   LOGIN
   ================================================================= */
.login { height: 100%; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(440px, 1fr); }
.login-marca { position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; gap: 40px; padding: 56px 64px; background: radial-gradient(ellipse at 15% 0%, #f9fbfe 0%, #edf2f9 55%, #e3e9f2 100%); border-right: 1px solid var(--linha); }
.login-logo { height: 64px; width: auto; align-self: flex-start; position: relative; z-index: 1; }
.login-texto { position: relative; z-index: 1; max-width: 580px; }
.login-texto h1 { margin-top: 18px; font: 600 43px/1.06 var(--titulo); color: var(--tinta); letter-spacing: -.005em; }
.login-texto h1 em { font-style: normal; background: var(--gradiente-x); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.login-destaques { list-style: none; padding: 0; margin: 34px 0 0; display: grid; gap: 14px; }
.login-destaques li { display: flex; align-items: center; gap: 14px; font-size: 15.5px; color: var(--tinta-2); }
.login-destaques .ic { flex: none; box-sizing: content-box; padding: 9px; border-radius: 11px; background: #fff; border: 1px solid #d6e4fb; color: var(--azul); }
.login-x { position: absolute; right: -70px; bottom: -110px; width: 520px; height: 600px; background: url("../img/simbolo.png") center / contain no-repeat; opacity: .09; transform: rotate(-8deg); pointer-events: none; }
.login-lado { display: grid; place-items: center; padding: 40px 32px; background: var(--papel-3); overflow: auto; }
.login-cartao { width: min(430px, 100%); display: flex; flex-direction: column; gap: 16px; padding: 38px 36px 26px; border-radius: 24px; border: 1px solid var(--linha); background: var(--cartao); box-shadow: var(--sombra-2); }
.login-cartao h2 { font: 600 31px/1 var(--titulo); color: var(--tinta); }
.login-sub { margin-top: -6px; color: var(--tinta-3); }
.login-senha { position: relative; }
.login-senha input { padding-right: 46px; }
.login-olho { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 32px; height: 32px; display: grid; place-items: center; border: 0; border-radius: 8px; background: none; color: var(--tinta-4); cursor: pointer; }
.login-olho:hover, .login-olho.ativo { color: var(--azul); background: var(--azul-tenue); }
.login-caps { display: flex; align-items: center; gap: 6px; margin-top: 4px; font-size: 12.5px; color: var(--aviso); }
.login-lembrar { display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: var(--tinta-2); cursor: pointer; user-select: none; }
.login-lembrar input { width: 16px; height: 16px; accent-color: var(--azul); }
.login-erro { display: none; padding: 10px 12px; border-radius: 10px; background: var(--erro-fundo); color: var(--erro); font-size: 13.5px; }
.login-erro.visivel { display: block; }
.login-botao { width: 100%; height: 48px; font-size: 15.5px; margin-top: 2px; }
.login-nota { margin: 0; }
.login-caminho { display: block; margin-top: 4px; color: var(--tinta-4); word-break: break-all; }
.login-aviso { display: flex; gap: 6px; align-items: flex-start; font-size: 12px; color: var(--tinta-3); }
.login-aviso .ic { flex: none; margin-top: 2px; }
.login-rodape { text-align: center; font-size: 11.5px; letter-spacing: .04em; color: var(--tinta-4); margin-top: 2px; }
.tremer { animation: tremer .35s; }
@keyframes tremer { 20% { transform: translateX(-6px); } 40% { transform: translateX(6px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(3px); } }
@media (max-width: 1100px) { .login { grid-template-columns: 1fr; } .login-marca { display: none; } }

/* usuário logado no menu lateral */
.usuario-rodape { display: flex; flex-direction: column; gap: 10px; }
.usuario-cartao { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto auto; gap: 6px 8px; align-items: center; }
.usuario-cartao .avatar { width: 36px; height: 36px; font-size: 14px; }
.usuario-info { min-width: 0; }
.usuario-info strong { display: block; font: 500 13.5px var(--sans); color: var(--tinta); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.usuario-info small { font-size: 11.5px; color: var(--tinta-3); }
.usuario-gerenciar { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-radius: 10px; border: 1px solid var(--linha-2); background: #fff; color: var(--marinho); font: 500 13px var(--sans); cursor: pointer; transition: background .15s, border-color .15s; }
.usuario-gerenciar:hover { background: var(--azul-tenue); border-color: var(--azul-2); }
.usuario-versao { font-size: 10.5px; color: var(--tinta-4); letter-spacing: .03em; }
.avatar-claro { background: var(--azul-tenue); color: var(--marinho); box-shadow: none; border: 1px solid #d6e4fb; }
.rasc-autor { display: block; font-size: 11.5px; color: var(--tinta-4) !important; }

/* =================================================================
   USUÁRIOS (administrador)
   ================================================================= */
.usuarios { height: 100%; display: flex; flex-direction: column; }
.usu-corpo { flex: 1; overflow: auto; display: grid; grid-template-columns: minmax(340px, 440px) minmax(0, 1fr); gap: 22px; align-items: start; width: 100%; max-width: 1320px; margin: 0 auto; padding: 30px 40px 40px; }
.usu-coluna { display: flex; flex-direction: column; gap: 16px; }
.usu-form { display: flex; flex-direction: column; gap: 14px; }
.usu-forca-linha { display: flex; align-items: center; gap: 10px; margin-top: 6px; min-height: 16px; }
.usu-gerar { display: inline-flex; align-items: center; gap: 5px; justify-self: start; align-self: flex-start; margin-top: 8px; font-size: 12.5px; }
.usu-forca { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; width: 150px; }
.usu-forca span { height: 5px; border-radius: 3px; background: var(--papel-2); transition: background .2s; }
.usu-forca span.ok { background: var(--azul-2); }
.usu-forca[data-nivel="0"] span.ok, .usu-forca[data-nivel="1"] span.ok { background: var(--erro); }
.usu-forca[data-nivel="4"] span.ok { background: var(--ok); }
.usu-forca-rot { font-size: 12px; color: var(--tinta-3); }
.usu-planilha { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 14px; margin-bottom: 8px; border-radius: 12px; border: 1px solid var(--linha); background: var(--papel-3); }
.usu-planilha-ic { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; background: var(--azul-tenue); color: var(--azul); border: 1px solid #d6e4fb; }
.usu-planilha strong { display: block; font-weight: 500; color: var(--tinta); }
.usu-planilha small { display: block; font-size: 12px; color: var(--tinta-3); }
.usu-planilha .usu-caminho { color: var(--tinta-4); word-break: break-all; }
.usu-site.fora { border-color: #f3c4c4; background: var(--erro-fundo); }
.usu-site.fora .usu-planilha-ic { background: #fff; color: var(--erro); border-color: #f3c4c4; }
.usu-local { border-color: #f0dcb0; background: #fffaf0; }
.usu-origem-txt { display: inline-flex; align-items: center; gap: 6px; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.usu-com-acao .usu-origem { flex-direction: column; align-items: flex-start; gap: 5px; white-space: normal; overflow: visible; }
.usu-local .usu-origem .ic { color: #b7791f; }
.usu-acao { flex: none; height: 28px; padding: 0 10px; font-size: 12px; }
.usu-grupo-tit { display: flex; align-items: center; gap: 2px; margin: 16px 0 8px; font: 500 11px var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--marinho-2); }
.usu-linha { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto minmax(0, 230px) 34px; gap: 12px; align-items: center; padding: 10px 12px; margin-bottom: 6px; border-radius: 12px; border: 1px solid var(--linha); background: #fff; }
.usu-linha .avatar { width: 40px; height: 40px; font-size: 15px; }
.usu-info { min-width: 0; }
.usu-info strong { display: flex; align-items: center; gap: 8px; font-weight: 500; color: var(--tinta); }
.usu-info small { display: block; font-size: 12.5px; color: var(--tinta-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.usu-voce { font: 500 10px var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--azul); background: var(--azul-tenue); padding: 2px 7px; border-radius: 999px; }
.chip-admin { background: var(--tinta); color: #ffffff; }
.chip-usuario { background: var(--papel-2); color: var(--tinta-2); }
.usu-origem { display: inline-flex; align-items: center; gap: 6px; min-width: 0; font-size: 12px; color: var(--tinta-3); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.usu-origem .ic { flex: none; color: var(--azul); }
@media (max-width: 1100px) { .usu-corpo { grid-template-columns: 1fr; padding: 24px; } .usu-linha { grid-template-columns: 40px minmax(0, 1fr) auto 34px; } .usu-origem { display: none; } }

/* =================================================================
   MENU DE GRUPOS E EMPRESAS EM TODO O PROGRAMA (Exibir / Ocultar)
   ================================================================= */
.casca { height: 100%; display: grid; grid-template-columns: 272px minmax(0, 1fr); }
.casca-menu { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.casca-menu > .lateral, .casca-menu > .menu-trilho { flex: 1; min-height: 0; }
.casca-tela { min-width: 0; min-height: 0; height: 100%; overflow: hidden; }
.casca.menu-oculto, .inicio-app.menu-oculto { grid-template-columns: 44px minmax(0, 1fr); }
.lateral-inicio { position: relative; }
.lateral-inicio > .menu-ocultar { position: absolute; top: 14px; right: 10px; }
.menu-ocultar { color: var(--tinta-4); }
.menu-ocultar .ic { transform: rotate(180deg); }
.menu-ocultar:hover { background: var(--papel-2); color: var(--tinta); }
.lateral-global-cab { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 20px 12px 2px 24px; }
.lateral-global-cab .eyebrow { font-size: 10px; letter-spacing: .24em; gap: 9px; white-space: nowrap; }
.lateral-global-cab .eyebrow::after { display: none; }
/* barra de cima mais estreita (menu à vista): o título e o grupo encolhem com reticências, sem invadir os botões */
.topo-titulo { flex: 0 1 auto; overflow: hidden; }
.topo-titulo strong { flex: 0 1 auto; min-width: 48px; }
.topo-titulo .chip:not(.chip-grupo) { flex: none; }
.chip-grupo { flex: 0 1 auto; min-width: 0; }
.chip-grupo span { min-width: 0; }
.lateral-global .grupos-nav { padding-top: 10px; }
.lateral-global .grupos-cab { padding-top: 12px; }
.lateral-global > .menu-ocultar { display: none; }
.menu-trilho { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 0; background: var(--papel-3); border-right: 1px solid var(--linha); }
.menu-exibir { color: var(--marinho); }
.menu-exibir:hover { background: var(--azul-claro); color: var(--marinho); }
.menu-trilho-rotulo { writing-mode: vertical-rl; transform: rotate(180deg); border: 0; background: none; cursor: pointer; padding: 10px 4px; border-radius: 8px; font: 500 10.5px var(--sans); letter-spacing: .24em; text-transform: uppercase; color: var(--tinta-4); }
.menu-trilho-rotulo:hover { color: var(--marinho); background: var(--azul-tenue); }
@media (max-width: 1180px) { .casca { grid-template-columns: 236px minmax(0, 1fr); } }
/* com o menu à vista, o editor e o desenho passam a usar o espaço como numa tela menor */
@media (max-width: 1600px) {
  .casca:not(.menu-oculto) .area { grid-template-columns: minmax(0, 1fr); }
  .casca:not(.menu-oculto) .previa { display: none; }
  .casca:not(.menu-oculto) .btn-previa { display: inline-flex; }
  .casca:not(.menu-oculto) .so-estreito { display: grid !important; }
  .casca:not(.menu-oculto) .previa-aberta .previa { display: flex; position: fixed; top: 66px; right: 0; bottom: 0; width: min(640px, 94vw); z-index: 40; box-shadow: -30px 0 60px -20px rgba(15, 27, 45, .45); animation: deslizar .22s ease-out; }
  .casca:not(.menu-oculto) .previa-aberta .btn-previa { background: rgba(29, 108, 242, .12); color: var(--marinho); }
  .casca:not(.menu-oculto) .des-corpo { grid-template-columns: 330px minmax(0, 1fr); }
  .casca:not(.menu-oculto) .topo .salvo { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; } /* o status encolhe antes dos botões */
  .casca:not(.menu-oculto) .editor { grid-template-columns: 228px minmax(0, 1fr); }
  .casca:not(.menu-oculto) .btn-previa { font-size: 0; gap: 0; padding: 0 12px; } /* só o ícone; o nome fica na dica */
}
@media (max-width: 1400px) { .casca:not(.menu-oculto) .usu-corpo { grid-template-columns: 1fr; padding: 24px; } }

/* sócia pessoa jurídica na administração: quem administra por ela */
.cartao-admin-pj { border-color: #d9e5f7; }
.rep-resumo { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 12px; background: var(--papel-3); border: 1px solid var(--linha); }
.rep-ic { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: #fff; color: var(--marinho); border: 1px solid var(--linha); }
.rep-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.rep-txt strong { font-weight: 600; color: var(--tinta); }
.rep-txt small { font-size: 12.5px; color: var(--tinta-3); }

/* logo do cliente no desenho societário */
.des-logo-previa { display: flex; align-items: center; justify-content: center; min-height: 64px; padding: 12px; margin-bottom: 10px; border: 1px dashed var(--linha-2); border-radius: 10px; background: #fff; }
.des-logo-previa img { max-width: 100%; max-height: 80px; object-fit: contain; }
.des-logo-mini { width: 24px; height: 16px; object-fit: contain; }
.pdf-logo-campo { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pdf-logo-mini { height: 34px; max-width: 130px; object-fit: contain; padding: 3px; border: 1px solid var(--linha); border-radius: 7px; background: #fff; }
/* escritórios clientes (equipe do Legalizup) */
.chip-erro { background: #fdecec; color: #b42318; }
.op-suspenso { opacity: .72; }
.op-admin { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 2px; }
.op-link { font-size: 12px; }
.op-senha-linha { display: flex; gap: 8px; align-items: center; }
.op-senha { flex: 1; min-width: 0; font: 600 16px ui-monospace, "Cascadia Mono", Consolas, monospace; letter-spacing: .02em; }
.op-email { font-weight: 500; color: var(--tinta); }
.usuario-gerenciar + .usuario-gerenciar { margin-top: 6px; }
.op-dlg { display: grid; gap: 12px; margin-top: 10px; }
/* ações nas linhas de usuários e de escritórios */
.usu-icones { display: flex; align-items: center; gap: 2px; justify-content: flex-end; }
.usu-linha { grid-template-columns: 40px minmax(0, 1fr) auto minmax(0, 230px) auto; }
.usu-linha.op-linha { grid-template-columns: 40px minmax(0, 1fr) auto auto 0; }
.op-acoes { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
@media (max-width: 1100px) { .usu-linha { grid-template-columns: 40px minmax(0, 1fr) auto auto; } .usu-linha.op-linha { grid-template-columns: 40px minmax(0, 1fr) auto; } .usu-linha.op-linha .op-acoes { grid-column: 2 / -1; justify-content: flex-start; } }
/* faixa: equipe do Legalizup dentro de um escritório cliente */
.faixa-visita { position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 900; display: flex; align-items: center; gap: 12px; max-width: calc(100vw - 32px); padding: 10px 12px 10px 16px; border-radius: 14px; background: var(--tinta); color: #fff; font: 400 13.5px var(--sans); box-shadow: 0 18px 40px -18px rgba(15, 27, 45, .7); }
.faixa-visita strong { font-weight: 600; }
.faixa-visita small { display: block; color: #b9c6da; font-size: 12px; }
.faixa-visita .btn { flex: none; }
.com-faixa-visita .toasts { bottom: 92px; }
.com-faixa-visita .casca-tela, .com-faixa-visita .inicio { padding-bottom: 72px; }