/* A tela do editor.
 *
 * Ela nao imita a peca. A peca e serifada, com margem larga e cor so no
 * retorno; a ferramenta e cinza, densa e sem enfeite, porque tudo que chama
 * atencao aqui compete com o unico lugar da tela que precisa ser lido com
 * cuidado, que e a previa a direita.
 *
 * A regra que organiza o resto: o formulario e monoespacado nos campos de
 * numero e ticker, e proporcional nos campos de texto corrido. E o analista
 * enxergando, enquanto digita, qual campo vira tabela e qual vira paragrafo.
 */

:root{
  --preto:#111214; --g900:#1f2124; --g700:#3f4247; --g600:#5b5f66;
  --g400:#9aa0a8; --g300:#c9ced4; --g200:#e3e6ea; --g100:#f1f3f5; --g50:#f8f9fa;
  --branco:#fff; --azul:#1d4ed8; --verde:#15803d; --vermelho:#dc2626;
  --barra:52px;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}

*{box-sizing:border-box}
html,body{height:100%}
/* `hidden` e o unico jeito de esconder coisa nesta tela, e `display:flex` numa
 * classe ganha do `display:none` que o navegador da pro atributo. Sem esta
 * linha a gaveta nasce aberta por cima do formulario. */
[hidden]{display:none !important}
body{
  margin:0;font-family:var(--sans);font-size:13px;color:var(--g900);
  background:var(--g100);-webkit-font-smoothing:antialiased;
}
button{font-family:inherit;font-size:inherit;cursor:pointer}

.eyebrow{
  display:block;font-family:var(--mono);font-size:8.5px;font-weight:600;
  letter-spacing:.15em;text-transform:uppercase;color:var(--g400);
}

/* ---- barra de cima --------------------------------------------------- */

.barra{
  height:var(--barra);display:flex;align-items:center;gap:12px;padding:0 14px;
  background:var(--preto);color:var(--branco);position:sticky;top:0;z-index:20;
}
.barra .marca{display:flex;flex-direction:column;line-height:1.15}
.barra .marca b{font-size:12.5px;font-weight:700;letter-spacing:-.01em}
.barra .marca span{
  font-family:var(--mono);font-size:7.5px;font-weight:500;letter-spacing:.14em;
  text-transform:uppercase;color:var(--g400);
}
.barra .titulo{
  margin-left:10px;padding-left:14px;border-left:1px solid #33363b;
  font-size:12.5px;font-weight:500;color:#dfe3e8;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;max-width:38ch;
}
.barra .estado{
  flex:1;font-family:var(--mono);font-size:9px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--g400);
}
.barra .estado.salvando{color:#fbbf24}
.barra .estado.salvo{color:#4ade80}
.barra .estado.erro{color:#f87171}
.barra nav{display:flex;align-items:center;gap:7px}

.barra button{
  height:29px;padding:0 13px;border-radius:5px;border:1px solid transparent;
  background:var(--branco);color:var(--preto);font-weight:600;font-size:12px;
}
.barra button.fantasma{background:transparent;border-color:#3b3e44;color:#dfe3e8}
.barra button.fantasma:hover:not(:disabled){background:#26292e;border-color:#54585f}
.barra button:disabled{opacity:.38;cursor:default}
.barra button.icone{
  width:29px;padding:0;background:transparent;border-color:#3b3e44;color:#dfe3e8;
  font-size:14px;line-height:1;
}

/* ---- as duas colunas -------------------------------------------------- */

.colunas{
  display:grid;grid-template-columns:minmax(430px,1fr) minmax(520px,1.05fr);
  height:calc(100vh - var(--barra));
}
@media (max-width:1180px){.colunas{grid-template-columns:1fr}.papel{display:none}}

.forma{overflow-y:auto;padding:16px 16px 120px;background:var(--g100)}

/* ---- cartoes do formulario -------------------------------------------- */

.cartao{
  background:var(--branco);border:1px solid var(--g200);border-radius:7px;
  margin-bottom:11px;
}
.cartao > summary{
  display:flex;align-items:center;gap:9px;padding:10px 13px;cursor:pointer;
  list-style:none;user-select:none;
}
.cartao > summary::-webkit-details-marker{display:none}
.cartao > summary::before{
  content:"▸";font-size:9px;color:var(--g400);transition:transform .12s;
}
.cartao[open] > summary::before{transform:rotate(90deg)}
.cartao > summary h2{
  margin:0;font-size:12px;font-weight:700;letter-spacing:-.01em;
}
.cartao > summary .conta{
  margin-left:auto;font-family:var(--mono);font-size:9px;color:var(--g400);
}
.cartao > .corpo{padding:2px 13px 13px}

/* ---- campos ------------------------------------------------------------ */

label.campo{display:block;margin-bottom:9px}
label.campo > .eyebrow{margin-bottom:4px}

input,select,textarea{
  width:100%;font-family:var(--sans);font-size:12.5px;color:var(--g900);
  background:var(--branco);border:1px solid var(--g300);border-radius:5px;
  padding:6px 8px;outline:none;
}
input:focus,select:focus,textarea:focus{
  border-color:var(--azul);box-shadow:0 0 0 2px rgba(29,78,216,.13);
}
textarea{resize:vertical;line-height:1.55;min-height:56px}
input.num,input.tick{font-family:var(--mono);font-size:12px;letter-spacing:-.01em}
input.tick{text-transform:uppercase}
select{appearance:none;background-image:none;padding-right:8px}

.grade{display:grid;gap:8px}
.g2{grid-template-columns:1fr 1fr}
.g3{grid-template-columns:1fr 1fr 1fr}

/* ---- linhas de tabela (ordens, posicao, parametros, argumentos) -------- */

.linhas{display:flex;flex-direction:column;gap:6px}
.linha{
  display:grid;gap:6px;align-items:start;
  padding:7px;background:var(--g50);border:1px solid var(--g200);border-radius:6px;
}
/* `.ordem` nao tem grade aqui: o numero de colunas de valor depende do tipo da
   peca, e o `pintaOrdens` manda a grade em linha. Deixar uma de seis colunas
   aqui de reserva so serviria pra o encerramento piscar torto antes do
   `style=` chegar. */
.linha.pos{grid-template-columns:100px 1fr 1fr 1fr 1fr 24px}
.linha.par{grid-template-columns:1fr 1fr 24px}
.linha.arg{grid-template-columns:1fr 24px}
.linha.txt{grid-template-columns:1fr 24px}
.linha .rot{
  grid-column:1/-1;font-family:var(--mono);font-size:8.5px;font-weight:600;
  letter-spacing:.13em;text-transform:uppercase;color:var(--g400);
}

/* Cabecalho das colunas da ordem. Existe porque os rotulos trocam com o tipo da
   peca e sao longos: "Preço de Encerramento" dentro de um placeholder sairia
   cortado justamente na palavra que diz de que preco se trata. Ele quebra em
   duas linhas em vez de truncar, pelo mesmo motivo. */
.linha.ordem.cab{
  background:transparent;border-color:transparent;padding:2px 7px 0;
  align-items:end;
}
.linha.ordem.cab span{
  font-family:var(--mono);font-size:8px;font-weight:600;line-height:1.3;
  letter-spacing:.1em;text-transform:uppercase;color:var(--g400);
}

.mata{
  width:24px;height:28px;border:1px solid transparent;background:transparent;
  color:var(--g400);border-radius:5px;font-size:15px;line-height:1;padding:0;
}
.mata:hover{background:#fee2e2;color:var(--vermelho);border-color:#fecaca}

.mais{
  width:100%;margin-top:7px;height:28px;border:1px dashed var(--g300);
  background:transparent;color:var(--g600);border-radius:5px;font-size:11.5px;
  font-weight:600;
}
.mais:hover{border-color:var(--azul);color:var(--azul);background:#f5f8ff}

.vazio{
  padding:14px;text-align:center;color:var(--g400);font-size:11.5px;
  border:1px dashed var(--g200);border-radius:6px;
}

/* ---- secao de ativo ---------------------------------------------------- */

.secao{
  border:1px solid var(--g200);border-radius:7px;margin-bottom:9px;
  background:var(--g50);
}
.secao > summary{
  display:flex;align-items:center;gap:8px;padding:8px 10px;cursor:pointer;
  list-style:none;
}
.secao > summary::-webkit-details-marker{display:none}
.secao .n{
  font-family:var(--mono);font-size:10px;font-weight:600;color:var(--branco);
  background:var(--preto);border-radius:3px;padding:1px 6px;
}
.secao .tick-nome{
  font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:-.01em;
}
.secao .tick-nome.sem{color:var(--g400);font-weight:400}
.secao > summary .mata{margin-left:auto}
.secao > .corpo{padding:0 10px 11px;background:var(--branco)}
.secao .bloco{margin-top:11px}
.secao .bloco > .eyebrow{margin-bottom:5px}

/* ---- figuras ----------------------------------------------------------- */

.solta{
  border:1px dashed var(--g300);border-radius:6px;padding:13px;text-align:center;
  color:var(--g600);font-size:11.5px;background:var(--g50);cursor:pointer;
}
.solta:hover,.solta.sobre{border-color:var(--azul);background:#f5f8ff;color:var(--azul)}

.fig{
  display:grid;grid-template-columns:96px 1fr 24px;gap:8px;padding:7px;
  background:var(--g50);border:1px solid var(--g200);border-radius:6px;
}
.fig img{
  width:96px;height:64px;object-fit:contain;background:var(--branco);
  border:1px solid var(--g200);border-radius:4px;
}
.fig .meta{display:flex;flex-direction:column;gap:5px}
.fig .apos{display:grid;grid-template-columns:1fr 76px;gap:6px;align-items:center}
.fig .apos span{font-size:10.5px;color:var(--g600)}

/* ---- retrato do analista ------------------------------------------------ */

.retrato-campo{margin-top:13px}
.retrato-campo > .eyebrow{display:block;margin-bottom:6px}
.retrato-linha{display:flex;align-items:center;gap:10px}
.retrato-linha .solta{flex:1;padding:11px}
/* O retrato sai colorido na peca, entao ele e colorido aqui: a tela nao pode
   prometer uma coisa e o PDF entregar outra. Foi por isso mesmo que os dois
   `grayscale(1)` que existiam aqui e no `rel.css` cairam juntos. */
.retrato-linha .rosto{
  flex:none;display:block;width:46px;height:46px;border-radius:50%;overflow:hidden;
  border:1px solid var(--g300);background:var(--g100);
}
/* A mesma conta do `.assina-rel .retrato img` do `rel.css`, com o mesmo `--rz`,
   `--rx` e `--ry`: o `object-position` passeia pelo que o `cover` corta por
   proporcao, o `translate` passeia pelo que o zoom esconde, e cada um esta preso
   na propria folga. Se a formula mudar la, muda aqui: a previa e a verdade, mas
   este circulo e o que o dedo esta olhando enquanto arrasta a barra. */
.retrato-linha .rosto img{
  display:block;width:100%;height:100%;object-fit:cover;
  object-position:calc(50% - var(--rx,0) * 0.5%) calc(50% - var(--ry,0) * 0.5%);
  transform:translate(calc(var(--rx,0) * (var(--rz,1) - 1) * 0.5%),
                      calc(var(--ry,0) * (var(--rz,1) - 1) * 0.5%)) scale(var(--rz,1));
}
/* Sem foto, o circulo vazio ocupa o mesmo lugar que a foto vai ocupar. Sumir
   com ele faria a caixa pular de largura no instante em que a imagem entra. */
.retrato-linha .rosto.sem{border-style:dashed}
.retrato-campo .nota{margin:6px 0 0;font-size:10.5px;color:var(--g600)}

/* As tres reguas do enquadramento. `regua` e nao `barra` porque `.barra` ja e a
   barra preta do topo da janela; duas coisas com o mesmo nome de classe e a tela
   inteira preta atras de um controle de foto.

   Rotulo a esquerda com largura fixa pra as tres comecarem na mesma coluna:
   regua desalinhada com regua parece bagunca, e sao tres. */
.molda{display:flex;flex-direction:column;gap:4px;margin-top:9px}
.regua{display:grid;grid-template-columns:62px 1fr;align-items:center;gap:8px}
.regua span{font-size:10.5px;color:var(--g600)}
/* A regra geral de `input` desenha caixa, borda e recheio, que numa regua viram
   moldura em volta do trilho. Aqui elas saem. */
.regua input[type=range]{
  width:100%;height:16px;margin:0;padding:0;border:0;border-radius:0;
  background:none;accent-color:var(--g700);cursor:ew-resize;
}
.regua input[type=range]:focus{box-shadow:none;outline:2px solid var(--azul);outline-offset:2px}

/* ---- previa ------------------------------------------------------------ */

/* A coluna da prévia usa o cinza da MESA do documento, `#c9c9c9`, que é o
   `body` do `doc.css`. A peça pinta a própria mesa: a `.folha` flutua nela com
   sombra e 26px de folga em cima e embaixo, e o iframe é o documento inteiro,
   mesa inclusa. Com o cinza claro do editor por fora, esses 26px viravam uma
   tarja cinza acima da capa, que é coisa nenhuma. Duas mesas empilhadas em dois
   cinzas é o defeito; uma mesa só é o conserto. Se o `doc.css` mudar de cinza,
   este muda junto. */
.papel{
  display:flex;flex-direction:column;border-left:1px solid var(--g300);
  background:#c9c9c9;min-width:0;
}
.papel-barra{
  display:flex;align-items:center;gap:12px;height:30px;padding:0 12px;
  background:var(--g50);border-bottom:1px solid var(--g200);
}
.papel-barra .zoom{display:flex;align-items:center;gap:6px;margin-left:auto}
.papel-barra .zoom span{font-family:var(--mono);font-size:9.5px;color:var(--g600);width:38px;text-align:center}
.papel-barra .icone{
  width:20px;height:20px;padding:0;border:1px solid var(--g300);border-radius:4px;
  background:var(--branco);color:var(--g700);line-height:1;font-size:12px;
}
.papel-barra .diag{
  font-family:var(--mono);font-size:9px;color:var(--vermelho);
  max-width:34ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.papel-caixa{flex:1;overflow:auto;padding:16px;display:flex;justify-content:center;align-items:flex-start}
/* A folha tem 794px, a largura de um A4 a 96dpi, e nao encolhe: o que encolhe e
 * o `scale`. So que `transform` nao muda a caixa que o layout reservou, entao um
 * iframe desenhado a 80% continua ocupando 794px e a coluna corta a borda
 * direita da folha. O embrulho existe pra receber, em JS, a medida ja
 * multiplicada pelo zoom, e por isso a folha cresce do canto e nao do centro. */
.folha-caixa{flex:none;position:relative}
/* Sem sombra aqui: quem tem sombra é a `.folha` lá dentro, desenhada pelo
   `doc.css`. Uma segunda sombra em volta do iframe contornaria a mesa, e não o
   papel. O fundo é o da mesa pelo mesmo motivo, e também porque é ele que
   aparece no instante entre trocar o `srcdoc` e o documento pintar. */
.papel-caixa iframe{
  width:794px;display:block;border:0;background:#c9c9c9;
  transform-origin:top left;
}

/* ---- gaveta (lista e historico) ---------------------------------------- */

.veu{position:fixed;inset:0;background:rgba(17,18,20,.34);z-index:29}
.gaveta{
  position:fixed;top:0;left:0;bottom:0;width:396px;z-index:30;
  background:var(--branco);border-right:1px solid var(--g200);
  display:flex;flex-direction:column;box-shadow:2px 0 20px rgba(0,0,0,.12);
}
.gaveta-topo{
  display:flex;align-items:center;height:var(--barra);padding:0 14px;
  border-bottom:1px solid var(--g200);
}
.gaveta-topo .icone{
  margin-left:auto;width:26px;height:26px;border:1px solid var(--g300);
  border-radius:5px;background:var(--branco);font-size:15px;line-height:1;padding:0;
}
.gaveta-corpo{flex:1;overflow-y:auto;padding:10px}

.item{
  display:block;width:100%;text-align:left;padding:10px 11px;margin-bottom:6px;
  border:1px solid var(--g200);border-radius:6px;background:var(--branco);
}
.item:hover{border-color:var(--azul);background:#f5f8ff}
.item.atual{border-color:var(--preto);background:var(--g50)}
.item .cab{display:flex;align-items:baseline;gap:8px}
.item .num{font-family:var(--mono);font-size:11px;font-weight:600}
.item .tipo{font-size:11.5px;color:var(--g700);flex:1;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.item .dt{font-family:var(--mono);font-size:9px;color:var(--g400)}
.item .pe{
  margin-top:4px;font-family:var(--mono);font-size:9px;letter-spacing:.06em;
  color:var(--g400);text-transform:uppercase;
}
.item .pe b{color:var(--g700);font-weight:600}

/* Linha com acao propria: o cartao vira a moldura e o conteudo passa a ser dois
   botoes, porque botao dentro de botao nao existe em HTML. O padding sai daqui e
   vai pro `.abre`, senao a area clicavel de abrir pararia antes da borda. */
.item.com-acao{display:flex;align-items:stretch;padding:0;overflow:hidden}
.item.com-acao .abre{
  flex:1;min-width:0;text-align:left;padding:10px 11px;border:0;background:none;
}
.item.com-acao .apaga{
  flex:none;width:30px;padding:0;border:0;border-left:1px solid transparent;
  background:none;color:var(--g300);font-size:16px;line-height:1;
}
/* O × so ganha contorno quando o ponteiro esta na linha. Sempre visivel, ele
   competiria com o titulo do relatorio numa gaveta que existe pra abrir peca, e
   nao pra apagar. */
.item.com-acao:hover .apaga{border-left-color:var(--g200);color:var(--g500)}
.item.com-acao .apaga:hover{background:#fee2e2;border-left-color:#fca5a5;color:#b91c1c}

/* ---- tela de login ----------------------------------------------------- */

body.entrada{display:grid;place-items:center;background:var(--g100)}
body.entrada form{
  width:326px;padding:28px;background:var(--branco);border:1px solid var(--g200);
  border-radius:9px;box-shadow:0 1px 2px rgba(0,0,0,.05),0 12px 34px rgba(0,0,0,.06);
}
body.entrada .marca{margin-bottom:22px}
body.entrada .marca b{display:block;font-size:17px;letter-spacing:-.02em}
body.entrada .marca span{
  font-family:var(--mono);font-size:8.5px;font-weight:600;letter-spacing:.15em;
  text-transform:uppercase;color:var(--g400);
}
body.entrada label{display:block;margin-bottom:12px}
body.entrada label .eyebrow{margin-bottom:4px}
body.entrada input{padding:8px 10px;font-size:13px}
body.entrada button{
  width:100%;height:36px;margin-top:6px;border:0;border-radius:6px;
  background:var(--preto);color:var(--branco);font-weight:600;
}
body.entrada button:disabled{opacity:.5;cursor:default}
body.entrada .erro{
  margin:11px 0 0;font-size:11.5px;color:var(--vermelho);text-align:center;
}