/* Casca do produto: barra lateral fixa e area de trabalho.

   Vale para os tres temas, entao nao fixa cor nenhuma: le a variavel do tema
   carregado antes e cai no valor do tema da casa quando ele usa outro nome
   (o tema da casa chama o fundo de --creme e o acento de --vinho). */
:root{
  --barra: 250px;
  --app-fundo: var(--fundo, var(--creme, #FAF9F5));
  --app-papel: var(--papel, #fff);
  --app-tinta: var(--tinta, #141413);
  --app-cinza: var(--cinza, #6E6B63);
  --app-linha: var(--linha, #E8E4DA);
  --app-linha-forte: var(--linha-forte, var(--linha, #DAD5C8));
  --app-acento: var(--acento, var(--vinho, #D97757));
  --app-acento-escuro: var(--acento-escuro, var(--vinho-escuro, #C15F3C));
  --app-acento-suave: var(--acento-suave, #FBF0EA);
}

.app{display:flex;min-height:100vh;align-items:stretch}

/* ---------------------------------------------------------------- lateral */
.lateral{width:var(--barra);flex:0 0 var(--barra);background:var(--app-papel);
  border-right:1px solid var(--app-linha);position:fixed;inset:0 auto 0 0;
  display:flex;flex-direction:column;z-index:40;overflow-y:auto}
.lateral .marca{display:flex;align-items:center;gap:9px;padding:18px 20px 16px;
  font-size:21px;line-height:1;border-bottom:1px solid var(--app-linha)}
/* o tema pinta .marca span de acento e em corpo pequeno, o que serve para a
   assinatura mas apagaria o nome da marca: aqui ele volta ao normal */
.lateral .marca .nome-marca{display:block;line-height:1.05;font-size:19px;
  color:var(--app-tinta);letter-spacing:-.01em;text-transform:none;font-weight:inherit}
.lateral .marca .nome-marca span{display:block;font-size:8.5px;margin-top:5px;
  letter-spacing:.11em;color:var(--app-acento)}
.lateral nav{padding:14px 12px;flex:1}
.lateral .grupo{margin:16px 10px 6px;font-size:10px;font-weight:600;letter-spacing:.13em;
  text-transform:uppercase;color:var(--app-cinza);opacity:.75}
.lateral nav > a{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:9px;
  color:var(--app-cinza);font-size:14px;font-weight:450;line-height:1.3}
.lateral nav > a:hover{background:rgba(20,20,19,.045);color:var(--app-tinta);text-decoration:none}
.lateral nav > a svg{width:17px;height:17px;flex:0 0 17px;stroke:currentColor;fill:none;
  stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;opacity:.85}
.lateral nav > a.ativo{background:var(--app-acento-suave);color:var(--app-acento-escuro);
  font-weight:550}
.lateral nav > a.ativo svg{opacity:1}
.pe-lateral{border-top:1px solid var(--app-linha);padding:12px;display:flex;
  align-items:center;gap:10px}
.pe-lateral .quem{min-width:0;flex:1}
.pe-lateral .nome{display:block;font-size:13.5px;color:var(--app-tinta);font-weight:550;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pe-lateral .plano{display:block;font-size:11.5px;color:var(--app-cinza)}
.pe-lateral .sair{font-size:12.5px;color:var(--app-cinza);padding:6px 9px;border-radius:8px}
.pe-lateral .sair:hover{background:rgba(20,20,19,.05);text-decoration:none}

/* --------------------------------------------------------- area de trabalho */
.area{flex:1;min-width:0;margin-left:var(--barra);display:flex;flex-direction:column}
.app main{padding:30px 34px 70px;max-width:1180px;width:100%}
.app .rodape{margin-top:auto;padding:20px 34px;border-top:1px solid var(--app-linha);
  color:var(--app-cinza);font-size:12.5px}
.app .rodape .container{max-width:none;padding:0}

/* botao de menu: so aparece quando a lateral vira gaveta */
.abrir-menu{display:none;position:fixed;top:12px;left:12px;z-index:60;width:40px;height:40px;
  border:1px solid var(--app-linha-forte);background:var(--app-papel);border-radius:10px;
  cursor:pointer;align-items:center;justify-content:center;padding:0}
.abrir-menu span{display:block;width:17px;height:1.6px;background:var(--app-tinta);
  position:relative}
.abrir-menu span::before,.abrir-menu span::after{content:"";position:absolute;left:0;
  width:17px;height:1.6px;background:var(--app-tinta)}
.abrir-menu span::before{top:-5.5px}.abrir-menu span::after{top:5.5px}
.veu{display:none;position:fixed;inset:0;background:rgba(20,20,19,.35);z-index:35}

@media (max-width: 900px){
  .lateral{transform:translateX(-100%);transition:transform .18s ease;box-shadow:0 0 40px rgba(0,0,0,.12)}
  body.menu-aberto .lateral{transform:none}
  body.menu-aberto .veu{display:block}
  .area{margin-left:0}
  .abrir-menu{display:flex}
  .app main{padding:64px 18px 60px}
  .app .rodape{padding:18px}
}

/* ------------------------------------------------- janela de edicao da peca */
/* Duas colunas: o texto que o advogado mexe fica a esquerda, a arte fica a
   direita e gruda na tela, para ele ver o efeito sem rolar de volta. */
.oficina{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:24px;align-items:start}
.oficina-arte{position:sticky;top:22px;background:var(--app-papel);
  border:1px solid var(--app-linha);border-radius:var(--raio,12px);padding:16px}
.oficina-arte h4{margin:0 0 12px;font-size:12px;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--app-cinza)}
.tela-arte{background:var(--app-fundo);border:1px dashed var(--app-linha-forte);
  border-radius:10px;min-height:300px;display:flex;align-items:center;justify-content:center;
  padding:10px;overflow:hidden}
.tela-arte img{max-width:100%;max-height:420px;border-radius:6px;display:block}
.tela-arte .vazio{color:var(--app-cinza);font-size:13.5px;text-align:center;padding:20px}
.tira-arte{display:flex;gap:6px;margin-top:10px;overflow-x:auto;padding-bottom:2px}
.tira-arte img{width:52px;height:65px;object-fit:cover;border-radius:5px;cursor:pointer;
  border:2px solid transparent}
.tira-arte img.marcada{border-color:var(--app-acento)}
.acoes-arte{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}
.acoes-arte .botao{justify-content:center;width:100%;padding:9px 10px;font-size:13.5px}
.acoes-arte .larga{grid-column:1 / -1}
.nota-arte{font-size:12px;color:var(--app-cinza);margin:10px 0 0;line-height:1.45}

@media (max-width: 1080px){
  .oficina{grid-template-columns:minmax(0,1fr)}
  .oficina-arte{position:static}
}

/* controles da arte no painel: pilulas pequenas, para caber na coluna estreita */
.escolhas-arte{margin-top:14px;border-top:1px solid var(--app-linha);padding-top:12px}
.escolhas-arte label{margin:10px 0 4px;font-size:12px}
.escolhas-arte .opcoes{gap:6px}
.escolhas-arte .opcao{padding:5px 11px;font-size:12.5px}
.oficina-texto{min-width:0}
.oficina .bloco-slide{margin-bottom:14px}
a.tela-arte{text-decoration:none}
a.tela-arte:hover{border-color:var(--app-acento)}

/* passos numerados: a pessoa ve que a tela tem ordem, nao um monte de campo */
label.passo{display:flex;align-items:center;gap:8px}
label.passo i{display:inline-flex;align-items:center;justify-content:center;width:19px;
  height:19px;border-radius:50%;background:var(--app-acento-suave);
  color:var(--app-acento-escuro);font-style:normal;font-size:11px;font-weight:600}

/* com a gaveta aberta o botao ia ficar por cima da marca: ele passa para o
   outro lado e vira o jeito de fechar */
@media (max-width: 900px){
  body.menu-aberto .abrir-menu{left:auto;right:14px}
}

/* amostra ainda em forno: brilho correndo no lugar da imagem, nunca o icone de
   imagem quebrada */
.amostra img.carregando{background:linear-gradient(90deg, rgba(20,20,19,.05) 25%,
  rgba(20,20,19,.10) 37%, rgba(20,20,19,.05) 63%);background-size:400% 100%;
  animation:amostra-brilho 1.3s ease infinite}
@keyframes amostra-brilho{0%{background-position:100% 50%}100%{background-position:0 50%}}


/* aviso de salvamento: embaixo e no centro, longe do botao de ajuda */
.confirmacao{position:fixed;left:50%;bottom:28px;z-index:80;max-width:min(92vw,520px);
  transform:translate(-50%,16px);opacity:0;pointer-events:none;
  padding:12px 18px 12px 42px;border-radius:12px;font-size:14.5px;font-weight:500;
  line-height:1.4;box-shadow:0 10px 30px rgba(20,20,19,.18);
  transition:opacity .2s ease,transform .2s ease;background:#1F6B45;color:#fff}
.confirmacao::before{content:"";position:absolute;left:16px;top:50%;width:14px;height:8px;
  margin-top:-6px;border-left:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:rotate(-45deg)}
.confirmacao.visivel{opacity:1;transform:translate(-50%,0)}
.confirmacao.alerta{background:#8A5A12}
.confirmacao.erro{background:#9B2F28}
.confirmacao.erro::before,.confirmacao.alerta::before{content:"!";border:0;transform:none;
  width:auto;height:auto;margin-top:-10px;font-weight:700;font-size:16px}
@media (max-width: 900px){ .confirmacao{bottom:90px} }


/* Perfil em Pauta: o celular com o perfil do proprio assinante, numerado */
.perfil-grade{display:grid;grid-template-columns:290px minmax(0,1fr);gap:22px;align-items:start}
@media (max-width:980px){.perfil-grade{grid-template-columns:minmax(0,1fr)}}
.celular{background:#050505;border-radius:34px;padding:10px;position:sticky;top:22px;max-width:300px}
.celular-tela{background:#0c0c0c;border-radius:26px;padding:16px 14px 14px;color:#F5F5F5;
  font-size:13px;line-height:1.45;font-family:-apple-system,"Segoe UI",Inter,sans-serif}
.cel-el{display:flex;gap:6px;align-items:center;border-radius:5px;min-height:18px;
  outline:2px solid transparent;outline-offset:2px;margin-bottom:1px}
.cel-el.on{outline-color:#F0997B}
.cel-num{display:inline-flex;align-items:center;justify-content:center;width:17px;height:17px;
  border-radius:50%;background:#FAECE7;color:#712B13;font-size:10.5px;font-weight:600;flex:0 0 17px}
.cel-avatar{width:64px;height:64px;border-radius:50%;border:2px solid #D97757;padding:2px}
.cel-avatar div{width:100%;height:100%;border-radius:50%;background:#2C2C2A;display:flex;
  align-items:center;justify-content:center;color:#F5F5F5;font-size:18px}
.cel-muted{color:#A8A8A8}
.cel-link{color:#7DB9F5}
.cel-bt{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin:12px 0 0}
.cel-bt span{background:#262626;border-radius:8px;text-align:center;padding:6px 0;font-weight:600;font-size:12.5px}
.cel-bt span:first-child{background:#0095F6;color:#fff}
.perfil-item{display:flex;gap:12px;padding:11px 13px;border:1px solid var(--app-linha);border-radius:10px;
  background:var(--app-papel);margin-bottom:8px;cursor:pointer}
.perfil-item.on{border-color:var(--app-acento)}
.perfil-item .cel-num{margin-top:3px}
.status{font-size:11.5px;padding:2px 9px;border-radius:999px;white-space:nowrap}
.status.pronto{background:#EDF6F0;color:#2F7D52}
.status.ajustar{background:#FBF3E2;color:#8A5A12}
.status.risco_oab{background:#FBECEA;color:#9B2F28}
.status.orientacao{background:var(--app-acento-suave);color:var(--app-acento-escuro)}
.campo-copia{display:flex;gap:10px;align-items:flex-start;justify-content:space-between;
  background:var(--app-fundo);border:1px solid var(--app-linha);border-radius:8px;padding:9px 11px;
  white-space:pre-line;font-size:14.5px}
.contador{font-size:12px;color:var(--app-cinza);font-weight:400}
.contador.estourou{color:#9B2F28;font-weight:600}
.alterna{display:inline-flex;border:1px solid var(--app-linha-forte);border-radius:10px;overflow:hidden;margin-bottom:16px}
.alterna button{border:0;background:var(--app-papel);padding:8px 16px;font:inherit;cursor:pointer;color:var(--app-cinza)}
.alterna button[aria-pressed="true"]{background:var(--app-acento-suave);color:var(--app-acento-escuro);font-weight:600}
.bonus-trava img{max-width:100%;height:auto;border-radius:10px;border:1px solid var(--app-linha)}


/* Capas: formulario a esquerda, a capa grande a direita e grudada na tela */
.capas-grade{display:grid;grid-template-columns:minmax(0,1fr) 420px;gap:20px;align-items:start}
@media (max-width:1080px){.capas-grade{grid-template-columns:minmax(0,1fr)}}
.capas-grade .cartao:last-child{position:sticky;top:22px}
a.tela-capa{display:flex;align-items:center;justify-content:center;min-height:320px;padding:10px;
  background:var(--app-fundo);border:1px dashed var(--app-linha-forte);border-radius:10px;
  text-decoration:none;overflow:hidden}
a.tela-capa:hover{border-color:var(--app-acento)}
a.tela-capa img{max-width:100%;max-height:520px;border-radius:6px;display:block}
a.tela-capa .vazio{color:var(--app-cinza);font-size:13.5px;text-align:center;padding:24px}
.opcao-titulo{cursor:pointer;text-align:left;max-width:100%}

/* cabeca da etapa: o numero de um lado, o botao de tirar do outro */
.linha-etapa{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.linha-etapa .mini{flex:0 0 auto;opacity:.65}
.linha-etapa .mini:hover{opacity:1}

/* escolha do papel: amostra de cor do lado do nome, sem depender de script */
.papeis{display:flex;flex-wrap:wrap;gap:10px 18px;margin:4px 0 10px}
.papel{display:flex;align-items:center;gap:8px;font-size:13px;cursor:pointer}
.papel i{width:22px;height:22px;border-radius:6px;display:inline-block;
  border:1px solid var(--linha-forte, rgba(0,0,0,.18))}
.papel input[type=color]{width:34px;height:24px;padding:2px;border-radius:6px}

/* formato de saida com a proporcao desenhada, igual a pagina de apresentacao:
   o advogado reconhece o formato pelo desenho antes de ler o nome */
.formatos-saida{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:4px 0 14px}
.fs{font:inherit;font-size:12px;text-align:center;cursor:pointer;padding:10px 6px 9px;
  border-radius:10px;border:1px solid var(--linha, rgba(0,0,0,.12));background:transparent;
  color:inherit;display:flex;flex-direction:column;align-items:center;gap:5px}
.fs .quadro{height:50px;display:flex;align-items:center;justify-content:center}
.fs .quadro i{display:block;border-radius:4px;border:1.5px solid var(--acento, #7B1C2C);
  background:color-mix(in srgb, var(--acento, #7B1C2C) 14%, transparent)}
.fs b{font-weight:600;line-height:1.2}
.fs .medida{opacity:.62;font-size:11px}
.fs:hover{border-color:var(--acento, #7B1C2C)}
.fs.marcada{border-color:var(--acento, #7B1C2C);
  background:color-mix(in srgb, var(--acento, #7B1C2C) 9%, transparent)}

/* estilo com amostra: cor e layout de verdade, nao um nome solto */
.grade-estilos{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:4px 0 12px}
.ge{font:inherit;font-size:11.5px;cursor:pointer;padding:5px 5px 7px;border-radius:10px;
  border:1px solid var(--linha, rgba(0,0,0,.12));background:transparent;color:inherit;
  display:flex;flex-direction:column;gap:5px;align-items:center;text-align:center}
.ge img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:6px;
  background:var(--linha, rgba(0,0,0,.08))}
.ge img.pronta{background:none}
.ge b{font-weight:600;line-height:1.15}
.ge:hover{border-color:var(--acento, #7B1C2C)}
.ge.marcada{border-color:var(--acento, #7B1C2C);
  background:color-mix(in srgb, var(--acento, #7B1C2C) 9%, transparent)}

.grade-estilos.larga{grid-template-columns:repeat(5,1fr)}
@media (max-width:900px){.grade-estilos.larga{grid-template-columns:repeat(3,1fr)}}

/* modelo da biblioteca preso a geracao */
.modelo-preso{border-left:4px solid var(--acento, #7B1C2C)}
.modelo-preso.solto{border-left-color:var(--linha, rgba(0,0,0,.14));opacity:.68}
.linha-modelo{display:flex;gap:16px;align-items:flex-start;justify-content:space-between;
  flex-wrap:wrap}
.linha-modelo .aviso-solto{width:100%}
/* o cartao do modelo na biblioteca empurra o botao para o rodape */
.grade.g3>.cartao{display:flex;flex-direction:column}

/* exemplo do modelo: fechado por padrao, para o botao de usar caber na tela */
.exemplo-modelo{margin-top:12px}
.exemplo-modelo>summary{cursor:pointer;font-size:12px;font-weight:600;letter-spacing:.04em;
  text-transform:uppercase;color:var(--cinza, #6b6b66);list-style:none}
.exemplo-modelo>summary::-webkit-details-marker{display:none}
.exemplo-modelo>summary::before{content:"+ ";font-weight:700}
.exemplo-modelo[open]>summary::before{content:"– "}
.exemplo-modelo>summary:hover{color:var(--acento, #7B1C2C)}

/* o que falta para gerar, dito antes de a pessoa errar */
.falta-tema{margin-top:12px;font-size:13.5px;line-height:1.55;
  border-top:1px solid var(--linha, rgba(0,0,0,.1));padding-top:12px}
.falta-tema .botao{margin-left:6px;vertical-align:baseline}